style: 调整UI和布局

server/src/App.vue

@@ -6,6 +6,10 @@
 
 <script>
 export default {
-  name: 'App'
+  name: 'App',
+  mounted() {
+    const size = localStorage.getItem('size') || 'mini'
+    document.body.classList.add('emphasize-' + size)
+  }
 }
 </script>

server/src/components/Hamburger/index.vue

@@ -3,14 +3,20 @@
     <svg
       :class="{ 'is-active': isActive }"
       class="hamburger"
-      viewBox="0 0 1024 1024"
+      viewBox="0 0 15 15"
       xmlns="http://www.w3.org/2000/svg"
       width="64"
       height="64"
     >
-      <path
+      <!-- <path
         d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
-      />
+      /> -->
+      <path
+        d="M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z"
+        fill="currentColor"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+      ></path>
     </svg>
   </div>
 </template>

server/src/components/HeaderSearch/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="{ show: show }" class="header-search">
-    <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
+    <svg-icon class-name="search-icon" icon-class="search-line" @click.stop="click" />
     <el-select
       ref="headerSearchSelect"
       v-model="search"

server/src/components/LangSelect/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
+  <el-dropdown size="medium" trigger="click" class="international" @command="handleSetLanguage">
     <div>
-      <svg-icon class-name="international-icon" icon-class="language" />
+      <svg-icon class-name="international-icon" icon-class="translate" />
     </div>
     <el-dropdown-menu slot="dropdown">
       <el-dropdown-item :disabled="language === 'zh'" command="zh">中文</el-dropdown-item>

server/src/components/Screenfull/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="click" />
+    <svg-icon :icon-class="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" @click="click" />
   </div>
 </template>
 

server/src/components/SizeSelect/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <el-dropdown trigger="click" @command="handleSetSize">
+  <el-dropdown size="medium" trigger="click" @command="handleSetSize">
     <div>
-      <svg-icon class-name="size-icon" icon-class="size" />
+      <svg-icon class-name="size-icon" icon-class="font-size" />
     </div>
     <el-dropdown-menu slot="dropdown">
       <el-dropdown-item
@@ -36,6 +36,7 @@ export default {
   methods: {
     handleSetSize(size) {
       this.$ELEMENT.size = size
+      this.changeBodyClass(size)
       this.$store.dispatch('app/setSize', size)
       this.refreshView()
       this.$message({
@@ -54,6 +55,15 @@ export default {
           path: '/redirect' + fullPath
         })
       })
+    },
+    changeBodyClass(currentSize) {
+      const sizes = ['default', 'medium', 'small', 'mini']
+      sizes.forEach(function (size, index) {
+        if (document.body.classList.contains('emphasize-' + size)) {
+          document.body.classList.remove('emphasize-' + size)
+        }
+      })
+      document.body.classList.add('emphasize-' + currentSize)
     }
   }
 }

server/src/layout/components/Navbar.vue

@@ -17,9 +17,9 @@
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
-        <!-- <el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
+        <el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip> -->
+        </el-tooltip>
 
         <lang-select class="right-menu-item hover-effect" />
       </template>
@@ -127,6 +127,7 @@ export default {
   }
 
   .right-menu {
+    padding-right: 20px;
     float: right;
     height: 100%;
     line-height: 50px;

server/src/layout/components/Sidebar/Logo.vue

@@ -3,11 +3,11 @@
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 v-else class="sidebar-title">{{ title }}</h1>
+        <p v-else class="sidebar-title">{{ title }}</p>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 class="sidebar-title">{{ title }}</h1>
+        <p class="sidebar-title">{{ title }}</p>
       </router-link>
     </transition>
   </div>
@@ -46,7 +46,6 @@ export default {
   width: 100%;
   height: 50px;
   line-height: 50px;
-  background: #2b2f3a;
   text-align: center;
   overflow: hidden;
 
@@ -64,11 +63,11 @@ export default {
     & .sidebar-title {
       display: inline-block;
       margin: 0;
-      color: #fff;
-      font-weight: 600;
+      color: #1a1a1a;
+      font-weight: 400;
       line-height: 50px;
-      font-size: 14px;
-      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+      font-size: 18px;
+      font-family: system-ui, Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
       vertical-align: middle;
     }
   }

server/src/layout/components/Sidebar/index.vue

@@ -20,6 +20,16 @@
         />
       </el-menu>
     </el-scrollbar>
+    <el-popover placement="right" trigger="click">
+      <div class="qq-group">
+        <img src="@/assets/VirtualBrowser-qq-group.png" />
+        <p>
+          QQ Group:
+          <code>564142956</code>
+        </p>
+      </div>
+      <div slot="reference" class="about-us">关于我们</div>
+    </el-popover>
   </div>
 </template>
 
@@ -54,3 +64,31 @@ export default {
   }
 }
 </script>
+<style lang="scss" scoped>
+.about-us {
+  padding: 12px;
+  text-align: center;
+  border-radius: 26px;
+  font-size: 14px;
+  color: #664100;
+  background: linear-gradient(90deg, #ffeccc, #ffd080);
+  margin: 5px 5px 0 5px;
+  cursor: pointer;
+}
+.qq-group {
+  p {
+    margin-top: -5px;
+    margin-left: 18px;
+    font-size: 13px;
+  }
+  code {
+    padding: 0.2em 0.4em;
+    margin: 0;
+    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+    font-size: 120%;
+    white-space: break-spaces;
+    background-color: rgba(175, 184, 193, 0.2);
+    border-radius: 6px;
+  }
+}
+</style>

server/src/main.js

@@ -2,11 +2,10 @@ import Vue from 'vue'
 import Clipboard from 'v-clipboard'
 import Cookies from 'js-cookie'
 
-import 'normalize.css/normalize.css' // a modern alternative to CSS resets
-
+// import 'normalize.css/normalize.css' // a modern alternative to CSS resets
 import Element from 'element-ui'
-import './styles/element-variables.scss'
-
+// import './styles/element-variables.scss'
+// import 'element-ui/lib/theme-chalk/index.css'
 import '@/styles/index.scss' // global css
 
 import App from './App'
@@ -35,7 +34,7 @@ if (process.env.NODE_ENV === 'production') {
 
 Vue.use(Clipboard)
 Vue.use(Element, {
-  size: localStorage.getItem('size') || 'mini', // set element-ui default size
+  size: localStorage.getItem('size') || 'small', // set element-ui default size
   i18n: (key, value) => i18n.t(key, value)
 })
 

server/src/router/index.js

@@ -85,19 +85,19 @@ export const constantRoutes = [
     path: '/',
     component: Layout,
     redirect: '/index',
-    meta: { title: 'browser', icon: 'international' },
+    meta: { title: 'browser', icon: 'globe-americas' },
     children: [
       {
         path: 'index',
         component: require('@/views/browser/index').default,
         name: 'Browser',
-        meta: { title: 'browser_list', icon: 'list', affix: true }
+        meta: { title: 'browser_list', icon: 'list-ul', affix: true }
       },
       {
         path: 'group',
         component: require('@/views/browser/group').default,
         name: 'Group',
-        meta: { title: 'group', icon: 'tab', affix: true }
+        meta: { title: 'group', icon: 'collection-fill', affix: true }
       }
     ]
   }