⚡优化ui、布局

.vscode/settings.json

@@ -5,11 +5,7 @@
   "editor.formatOnPaste": true,
   "editor.formatOnType": true,
   // 配置eslint适用于vue代码
-  "eslint.validate": [
+  "eslint.validate": ["javascript", "typescript", "vue"],
-    "javascript",
-    "typescript",
-    "vue"
-  ],
   "[vue]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
@@ -22,12 +18,15 @@
   "[js]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
   // 保存时 prettier 自动格式化
   "editor.formatOnSave": true,
   // 保存时自动启用 eslint --fix 自动修复
   "editor.codeActionsOnSave": {
     "source.fixAll": true,
-    "eslint.autoFixOnSave": true,
+    "eslint.autoFixOnSave": true
   },
   "eslint.options": {
     "overrideConfig": {
@@ -49,16 +48,12 @@
   },
   "i18n-ally.displayLanguage": "zh-cn",
   "i18n-ally.enabledParsers": ["json", "js"],
-  "i18n-ally.localesPaths": [
+  "i18n-ally.localesPaths": ["src/i18n/lang", "src/i18n/pages/login", "src/i18n/pages/menu"],
-    "src/i18n/lang",
-    "src/i18n/pages/login",
-    "src/i18n/pages/menu",
-  ],
   "i18n-ally.extract.parsers.html": {
     "attributes": ["text", "title", "alt", "placeholder", "label", "aria-label"],
     "ignoredTags": ["script", "style"],
     "vBind": true,
     "inlineText": true
   },
-  "i18n-ally.keystyle": "nested",
+  "i18n-ally.keystyle": "nested"
-}
+}

src/layout/components/Settings/index.vue

@@ -21,7 +21,7 @@
       <el-radio-group v-model="mode" size="small">
         <el-radio label="dark">{{ $t('layout.darkMode') }}</el-radio>
         <el-radio label="light">{{ $t('layout.lightMode') }}</el-radio>
-        <el-radio label="cafe">cafe</el-radio>
+        <!-- <el-radio label="cafe">cafe</el-radio> -->
         <!-- <el-radio label="contrast">contrast</el-radio> -->
       </el-radio-group>
     </div>

src/router/index.js

@@ -68,7 +68,7 @@ export const constantRoutes = [
         path: '/index',
         component: () => import('@/views/index'),
         name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true, titleKey: 'menu.home' }
+        meta: { title: '首页', icon: 'index', affix: true, titleKey: 'menu.home' }
       }
     ]
   },

src/settings.js

@@ -2,7 +2,7 @@ export default {
   /**
    * 框架版本号
    */
-  version: '3.8.2',
+  version: '20230811',
   /**
    * 网页标题
    */

src/views/components/icons/index.vue

@@ -7,6 +7,7 @@
             <template #content> {{ generateIconCode(item) }} </template>
             <div class="icon-item">
               <svg-icon :name="item" style="height: 40px; width: 40px" />
+              <span>{{ item }}</span>
             </div>
           </el-tooltip>
         </div>
@@ -17,6 +18,7 @@
             <template #content> {{ generateElementIconCode(item) }} </template>
             <div class="icon-item">
               <el-icon><component :is="item" /></el-icon>
+              <span>{{ item }}</span>
             </div>
           </el-tooltip>
         </div>
@@ -54,7 +56,7 @@ function generateElementIconCode(symbol) {
     margin: 20px;
     height: 60px;
     text-align: center;
-    width: 60px;
+    width: 77px;
     float: left;
     font-size: 30px;
     color: #24292e;

src/views/index.vue

@@ -39,7 +39,7 @@
         <h2>ZRAdmin.NET {{ $t('layout.backstageManagement') }}</h2>
         <p>
           ZRAdmin.NET借鉴了很多开源项目的优点，让你开发Web管理系统更简单，所以我也把它给开源了（前端
-          <code>vue页面</code>主要参考若依，在此表示感谢.)
+          <code>vue页面</code>主要使用了若依，后端参考Ruoyi stringboot版本，在此表示感谢.)
         </p>
         <p>{{ $t('layout.content1') }}</p>
         <p>

src/views/index_v1.vue

@@ -31,14 +31,8 @@
         <el-card style="height: 100%">
           <div class="text-warning mb10">{{ currentTime }} {{ weekName }}</div>
           <div class="work-wrap">
-            <div class="item">
+            <el-statistic :title="$t('layout.workTime')" :value="Math.ceil(onlineInfo.todayOnlineTime, 2)" />
-              <div class="name">今日工作时长</div>
+            <el-statistic :title="$t('layout.onlineClientNum')" :value="onlineInfo.clientNum" />
-              <div class="mt10">{{ onlineInfo.onlineTime }}分</div>
-            </div>
-            <div class="item">
-              <div class="name">在线设备数</div>
-              <div class="mt10">{{ onlineInfo.clientNum }}</div>
-            </div>
           </div>
         </el-card>
       </el-col>
@@ -53,7 +47,7 @@
               <el-button text @click="handleAdd()">{{ $t('btn.add') }}</el-button>
             </div>
           </template>
-          <div class="info">
+          <div>
             <el-scrollbar wrap-class="scrollbar-wrapper"> <CommonMenu v-model="showEdit"></CommonMenu></el-scrollbar>
           </div>
         </el-card>

src/views/login.vue

@@ -24,7 +24,7 @@
             </template>
           </el-input>
         </el-form-item>
-        <el-form-item prop="code" v-if="captchaOnOff != 'off'">
+        <el-form-item prop="code" v-show="captchaOnOff != 'off'">
           <el-input v-model="loginForm.code" auto-complete="off" :placeholder="$t('login.captcha')" style="width: 63%" @keyup.enter="handleLogin">
             <template #prefix>
               <svg-icon name="validCode" class="input-icon" />
@@ -38,7 +38,7 @@
         <div style="display: flex; justify-content: space-between">
           <el-checkbox v-model="loginForm.rememberMe">{{ $t('login.rememberMe') }}</el-checkbox>
           <span style="font-size: 12px">
-            <span @click="handleForgetPwd()" class="forget-pwd">忘记密码</span>
+            <span @click="handleForgetPwd()" class="forget-pwd">{{ $t('login.forgotPwd') }}</span>
             <router-link class="link-type" :to="'/register'">{{ $t('login.register') }}</router-link>
           </span>
         </div>
@@ -58,8 +58,8 @@
         </div>
 
         <div class="login-scan-container">
-          <div ref="imgContainerRef" id="imgContainer"></div>
+          <div ref="imgContainerRef" id="imgContainer" class="qrCode"></div>
-          <div>请使用移动端app扫码登录</div>
+          <div class="mt10 text-muted">请使用移动端app扫码登录</div>
         </div>
       </div>
 
@@ -218,8 +218,8 @@ function generateCode() {
       new QRCode(document.getElementById('imgContainer'), {
         // text: 'https://qm.qq.com/cgi-bin/qm/qr?k=kgt4HsckdljU0VM-0kxND6d_igmfuPlL&authKey=r55YUbruiKQ5iwC/folG7KLCmZ++Y4rQVgNlvLbUniUMkbk24Y9+zNuOmOnjAjRc&noverify=0',
         text: JSON.stringify(data.codeContent),
-        width: 200,
+        width: 160,
-        height: 200
+        height: 160
       })
     }
   })
@@ -279,4 +279,9 @@ getCookie()
 .other-login {
   padding: 0px 10px 5px;
 }
+.qrCode {
+  width: 160px;
+  height: 160px;
+  line-height: 160px;
+}
 </style>