Merge remote-tracking branch 'origin/master' into panda-ui

src/main/index.js

@@ -1,23 +1,24 @@
 'use strict'
 
-import { app } from 'electron'
+import { app, ipcMain, BrowserWindow } from 'electron'
 import initWindow from './services/windowManager'
 import DisableButton from './config/DisableButton'
 import electronDevtoolsInstaller, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
 
-function onAppReady () {
+function onAppReady() {
   initWindow()
   DisableButton.Disablef12()
   if (process.env.NODE_ENV === 'development') {
     electronDevtoolsInstaller(VUEJS_DEVTOOLS)
       .then((name) => console.log(`installed: ${name}`))
-      .catch(err => console.log('Unable to install `vue-devtools`: \n', err))
+      .catch((err) => console.log('Unable to install `vue-devtools`: \n', err))
   }
 }
+
 // 禁止程序多开，此处需要单例锁的同学打开注释即可
 const gotTheLock = app.requestSingleInstanceLock()
-if(!gotTheLock){
-   app.quit()
+if (!gotTheLock) {
+  app.quit()
 }
 app.isReady() ? onAppReady() : app.on('ready', onAppReady)
 // 解决9.x跨域异常问题
@@ -31,10 +32,14 @@ app.on('browser-window-created', () => {
   console.log('window-created')
 })
 
+ipcMain.on('window-lang-change', () => {
+  BrowserWindow.getFocusedWindow().webContents.reload()
+})
+
 if (process.defaultApp) {
   if (process.argv.length >= 2) {
-      app.removeAsDefaultProtocolClient('electron-vue-template')
-      console.log('框架特殊性开发环境下无法使用')
+    app.removeAsDefaultProtocolClient('electron-vue-template')
+    console.log('框架特殊性开发环境下无法使用')
   }
 } else {
   app.setAsDefaultProtocolClient('electron-vue-template')

src/renderer/components/LangTab/index.vue

@@ -1,6 +1,9 @@
 <template>
-  <el-dropdown split-button type="primary" @command="handleCommand">
-    {{ $t('buttons.changeLanguage') }}
+  <el-dropdown type="primary" @command="handleCommand">
+    <div class="lang-change-btn">
+      <SvgIcon icon-class="earth" class-name="earth"></SvgIcon>
+      {{ curLang }}
+    </div>
     <el-dropdown-menu slot="dropdown">
       <el-dropdown-item v-for="lang in langs" :key="lang.value" :command="lang.value">
         {{ lang.text }}
@@ -11,8 +14,13 @@
 
 <script>
 import i18n from '@/i18n'
+import { ipcRenderer } from 'electron'
+import SvgIcon from '@/components/SvgIcon/index.vue'
 
 export default {
+  components: {
+    SvgIcon,
+  },
   data() {
     return {
       langs: [
@@ -26,19 +34,24 @@ export default {
         },
         {
           text: i18n.t('e-yu'),
-          value: 'ru',
+          value: 'ru-RU',
         },
         {
           text: i18n.t('sai-er-wei-ya-yu'),
-          value: 'sr-Latn',
+          value: 'sr',
         },
       ],
     }
   },
+  computed: {
+    curLang() {
+      return localStorage.getItem('lang') || 'zh-CN'
+    },
+  },
   methods: {
     handleCommand(lang) {
       localStorage.setItem('lang', lang)
-      window.location.reload()
+      ipcRenderer.send('window-lang-change')
     },
   },
 }
@@ -54,4 +67,20 @@ export default {
 .el-icon-arrow-down {
   font-size: 12px;
 }
+
+.lang-change-btn {
+  display: flex;
+  height: 54px;
+  padding: 0px 16px;
+  align-items: center;
+
+  flex-shrink: 0;
+  border-radius: 8px;
+  border: 1px solid var(--e-6-e-6-e-6, #e6e6e6);
+}
+
+.svg-icon-earth {
+  width: 24px;
+  height: 24px;
+}
 </style>

src/renderer/i18n/index.js

@@ -4,6 +4,8 @@ import ru from './languages/ru.json'
 import srLatn from './languages/sr-Latn.json'
 import enLocale from 'element-ui/lib/locale/lang/en'
 import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+import srLocale from 'element-ui/lib/locale/lang/sr'
+import ruLocale from 'element-ui/lib/locale/lang/ru-RU'
 import VueI18n from 'vue-i18n'
 import Vue from 'vue'
 
@@ -19,11 +21,13 @@ function loadLanguage() {
       ...zhCN,
       ...zhLocale,
     },
-    'sr-Latn': {
+    sr: {
       ...srLatn,
+      ...srLocale,
     },
-    ru: {
+    'ru-RU': {
       ...ru,
+      ...ruLocale,
     },
   }
 

src/renderer/icons/svg/earth.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5229 22 22 17.5229 22 12C22 6.47715 17.5229 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5229 6.47715 22 12 22Z" stroke="#333333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M2 12H22" stroke="#333333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C14.2092 22 16 17.5229 16 12C16 6.47715 14.2092 2 12 2C9.79085 2 8 6.47715 8 12C8 17.5229 9.79085 22 12 22Z" stroke="#333333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M4.92871 5.07129C6.73836 6.88094 9.23836 8.00024 11.9998 8.00024C14.7612 8.00024 17.2612 6.88094 19.0709 5.07129" stroke="#333333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M19.0709 18.9289C17.2612 17.1193 14.7612 16 11.9998 16C9.23836 16 6.73836 17.1193 4.92871 18.9289" stroke="#333333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/renderer/views/login/index.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="login-container">
     <div class="login-from-box">
+      <div class="lang-change">
+        <LangTab></LangTab>
+      </div>
+      <div class="login-icon">
+        <img src="./login-icon.png" alt="" />
+      </div>
       <el-form
         class="login-form"
         ref="loginForm"
@@ -10,7 +16,6 @@
         label-position="left"
       >
         <h3 class="title">{{ systemName }}</h3>
-        <LangTab></LangTab>
         <el-form-item prop="username">
           <span class="svg-container svg-container_login">
             <svg-icon icon-class="user" />
@@ -62,9 +67,7 @@
             {{ $t('li-ji-deng-lu') }}
           </button>
         </div>
-        <div class="tips">
-          <!-- <span>Copyright © 2020-2024 <a target="_blank" href="https://www.fuint.cn">fuint.cn</a> 延禾技术 All Rights Reserved.</span> -->
-        </div>
+        <div class="tips"></div>
       </el-form>
     </div>
   </div>
@@ -107,7 +110,6 @@ export default {
     }
   },
   created() {
-    console.log(this.$t)
     this.getCode()
   },
   methods: {
@@ -157,9 +159,9 @@ export default {
 // 定义新的配色变量
 $primary-color: #a9b1b8; // 主色调，蓝色
 $secondary-color: #eabc48; // 次色调，深蓝色
-$light-gray: #f5f5f5; // 浅灰色
+$light-gray: #999; // 浅灰色
 $dark-gray: #9f8787; // 深灰色
-$background-color: #161212; // 背景色，灰色
+$background-color: #f6f6f6; // 背景色，灰色
 
 /* reset element-ui css */
 .login-container {
@@ -168,9 +170,11 @@ $background-color: #161212; // 背景色，灰色
   width: 100%;
   top: 0;
   left: 0;
-  background: linear-gradient(to bottom right, $primary-color, $secondary-color);
-  background-position: center;
+  background: url('./login-bg.png');
+  background-size: 100% 100%;
   color: #ffffff;
+  box-sizing: border-box;
+  padding: 4vw 8vw;
 
   ::v-deep .el-input {
     display: inline-block;
@@ -180,7 +184,6 @@ $background-color: #161212; // 背景色，灰色
     input {
       background: transparent;
       border: 0px;
-      -webkit-appearance: none;
       border-radius: 0px;
       padding: 12px 5px 12px 15px;
       color: $light-gray;
@@ -202,16 +205,39 @@ $background-color: #161212; // 背景色，灰色
 
   .login-from-box {
     position: relative;
-    .login-form {
+    display: flex;
+    overflow: hidden;
+    align-items: flex-start;
+    border-radius: 20px;
+    background: #fff;
+    box-sizing: border-box;
+    padding: 4vw 0 0 5vw;
+
+    .lang-change {
       position: absolute;
-      left: 0;
-      right: 0;
+      right: 40px;
+    }
+
+    .login-icon {
+      width: calc(100% - 520px);
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      overflow: hidden;
+
+      img {
+        width: 38vw;
+        height: 33vw;
+      }
+    }
+
+    .login-form {
       width: 520px;
       padding: 35px 35px 15px 35px;
-      margin: 150px auto;
+      margin: 100px auto;
       align-items: center;
       color: white;
-      background-color: rgba(63, 63, 63, 0.373);
       border-radius: 10px;
 
       .login-btn {
@@ -222,7 +248,8 @@ $background-color: #161212; // 背景色，灰色
           margin: 10px 0 36px 0;
           font-size: 1.2em;
           color: white;
-          background: linear-gradient(to right, $primary-color, $secondary-color);
+          background: #f67f20;
+          border-radius: 8px;
           border: none;
           outline: none;
           cursor: pointer;
@@ -253,9 +280,8 @@ $background-color: #161212; // 背景色，灰色
         img {
           cursor: pointer;
           vertical-align: middle;
-          height: 48px;
+          height: 3vw;
           height: 100%;
-
           border-radius: 1px;
         }
       }
@@ -282,7 +308,7 @@ $background-color: #161212; // 背景色，灰色
     .title {
       font-size: 26px;
       font-weight: 400;
-      color: $light-gray;
+      color: #000;
       margin: 0px auto 20px auto;
       text-align: center;
       font-weight: bold;

static/loader.html

@@ -1,127 +1,126 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="utf-8" />
+    <title></title>
+
+    <style>
+      html {
+        height: 100%;
+        min-height: 100%;
+        overflow: hidden;
+        user-select: none;
+        -webkit-app-region: no-drag;
+      }
+
+      html body {
+        background-size: 163px;
+        font: 14px/21px Monaco, sans-serif;
+        color: #999;
+        -webkit-font-smoothing: antialiased;
+        -webkit-text-size-adjust: 100%;
+        -moz-text-size-adjust: 100%;
+        -ms-text-size-adjust: 100%;
+        text-size-adjust: 100%;
+        height: 100%;
+        min-height: 100%;
+        margin: 0px;
+      }
+
+      html body h4 {
+        margin: 0;
+      }
+
+      .scene {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        background: #222;
+        position: relative;
+      }
+
+      .loader {
+        position: relative;
+        width: 15em;
+        height: 15em;
+        background: linear-gradient(-225deg, #ff3cac 0%, #562b7c 52%, #2b86c5 100%);
+        border-radius: 50%;
+        animation: spin 0.5s linear infinite;
+      }
+
+      span {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
+        background: inherit;
+      }
 
-<head>
-  <meta charset="utf-8">
-  <title></title>
-
-  <style>
-    html {
-      height: 100%;
-      min-height: 100%;
-      overflow: hidden;
-      user-select: none;
-      -webkit-app-region: no-drag;
-    }
-
-    html body {
-      background-size: 163px;
-      font: 14px/21px Monaco, sans-serif;
-      color: #999;
-      -webkit-font-smoothing: antialiased;
-      -webkit-text-size-adjust: 100%;
-      -moz-text-size-adjust: 100%;
-      -ms-text-size-adjust: 100%;
-      text-size-adjust: 100%;
-      height: 100%;
-      min-height: 100%;
-      margin: 0px;
-    }
-
-    html body h4 {
-      margin: 0;
-    }
-
-    .scene {
-      position: relative;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 100%;
-      background: #222;
-      position: relative;
-    }
-
-    .loader {
-      position: relative;
-      width: 15em;
-      height: 15em;
-      background: linear-gradient(-225deg, #ff3cac 0%, #562b7c 52%, #2b86c5 100%);
-      border-radius: 50%;
-      animation: spin 0.5s linear infinite;
-    }
-
-    span {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      border-radius: inherit;
-      background: inherit;
-    }
-
-    span:nth-child(1) {
-      filter: blur(5px);
-    }
-
-    span:nth-child(2) {
-      filter: blur(10px);
-    }
-
-    span:nth-child(3) {
-      filter: blur(25px);
-    }
-
-    span:nth-child(4) {
-      filter: blur(50px);
-    }
-
-    span::after {
-      position: absolute;
-      content: "";
-      top: 10px;
-      left: 10px;
-      right: 10px;
-      bottom: 10px;
-      background: #222;
-      border-radius: inherit;
-    }
-
-    .text {
-      position: absolute;
-      opacity: 0;
-      animation: breath 3s ease-in-out infinite;
-    }
-
-    @keyframes breath {
-      from {
-        opacity: 0.05;
+      span:nth-child(1) {
+        filter: blur(5px);
       }
 
-      50% {
-        opacity: 1;
+      span:nth-child(2) {
+        filter: blur(10px);
       }
 
-      to {
-        opacity: 0.05;
+      span:nth-child(3) {
+        filter: blur(25px);
+      }
+
+      span:nth-child(4) {
+        filter: blur(50px);
+      }
+
+      span::after {
+        position: absolute;
+        content: '';
+        top: 10px;
+        left: 10px;
+        right: 10px;
+        bottom: 10px;
+        background: #222;
+        border-radius: inherit;
+      }
+
+      .text {
+        position: absolute;
+        opacity: 0;
+        animation: breath 3s ease-in-out infinite;
+      }
+
+      @keyframes breath {
+        from {
+          opacity: 0.05;
+        }
+
+        50% {
+          opacity: 1;
+        }
+
+        to {
+          opacity: 0.05;
+        }
       }
-    }
 
-    @keyframes spin {
-      to {
-        transform: rotate(1turn);
+      @keyframes spin {
+        to {
+          transform: rotate(1turn);
+        }
       }
-    }
-  </style>
-</head>
-<body>
-  <div class="scene">
-    <div class="loader">
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
+    </style>
+  </head>
+  <body>
+    <div class="scene">
+      <div class="loader">
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+      <div class="text">Loading...</div>
     </div>
-    <div class="text">系统正在准备资源中...</div>
-  </div>
-</body>
+  </body>
 </html>