#94 全新 UI，你值得拥有

✨ 新版 UI Windows 支持完成
💚 [build-electron]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stapxs-qq-lite",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "private": false,
   "author": "Stapx Steve [林槐]",
   "description": "一个兼容 OneBot 的非官方网页版 QQ 客户端，使用 Vue 重制的全新版本。",

src/App.vue

@@ -27,7 +27,7 @@
             </div>
         </template>
     </TransitionGroup>
-    <div v-if="platform == 'darwin'" class="controller mac-controller"></div>
+    <div v-if="runtimeData.tags.platform == 'darwin'" class="controller mac-controller"></div>
     <div id="base-app">
         <div class="layui-tab layui-tab-brief main-body">
             <ul class="layui-tab-title" :style="get('fs_adaptation') > 0 ? `padding-bottom: ${get('fs_adaptation')}px;` : ''">
@@ -251,7 +251,6 @@ export default defineComponent({
     data () {
         return {
             dev: process.env.NODE_ENV == 'development',
-            platform: undefined,
             Connector: Connector,
             defineAsyncComponent: defineAsyncComponent,
             save: Option.runASWEvent,
@@ -448,8 +447,7 @@ export default defineComponent({
             const reader = electron ? electron.ipcRenderer : null
             runtimeData.reader = reader
             if (reader) {
-                this.platform = await reader.invoke('sys:getPlatform')
-                runtimeData.tags.platform = this.platform
+                runtimeData.tags.platform = await reader.invoke('sys:getPlatform')
             }
             app.config.globalProperties.$viewer = this.viewerBody
             // 初始化波浪动画

src/assets/css/append/append_darwin.css

@@ -1,8 +1,16 @@
+body {
+    font: 14px -apple-system !important;
+}
+
 .main-body > ul {
     height: calc(100% - 25px);
     padding-top: 25px;
 }
 
 .opt-main > div:last-child {
     padding: 33px 10px 0 10px;
+}
+
+.friend-list {
+    padding-top: 20px;
 }

src/assets/css/append/append_vibrancy.css

@@ -22,7 +22,6 @@
 }
 .friend-list {
     background: rgba(var(--color-card-rgb), 0.6);
-    padding-top: 20px;
 }
 .friend-list > div:first-child {
     margin: 15px 15px 15px 0;
@@ -59,10 +58,10 @@
 .opt-main > div:last-child {
     margin-left: -65px !important;
     background: var(--color-bg);
-    margin: -3px -5px 0 5px;
+    margin: -5px -5px 0 5px;
     box-shadow: -5px 0px 4px -5px var(--color-shader);
     transition: margin .3s;
-    height: calc(100% + 5px);
+    height: calc(100% + 7px);
     padding: 3px 10px 0 10px;
 }
 

src/assets/css/append/append_win32.css

@@ -1,22 +1,17 @@
-#app {
-    margin: 10px;
-    border-radius: 7px;
-    overflow: hidden;
-    box-shadow: 0 0 10px #0005;
-    height: calc(100% - 20px);
+body {
+    font: 14px 'SF Pro Text', 'Source Han Sans', sans-serif !important;
 }
 
 #base-app.withBar {
-    height: calc(100% - 36px);
-    padding-top: 36px;
+    height: calc(100% - 35px);
+    padding-top: 35px;
 }
+
 .top-bar {
-    border-bottom: 1px solid var(--color-card-2);
     border-radius: 7px 7px 0 0;
+    background: transparent;
     box-shadow: unset;
-    background: var(--color-bg);
     height: 35px;
-    width: calc(100% - 20px);
 }
 .top-bar>img, .top-bar>svg {
     height: 16px;
@@ -29,21 +24,41 @@
 .top-bar>div.controller>div {
     padding: 7px;
 }
-.top-bar>div.controller>div>svg{
+.top-bar>div.controller>div>svg {
     height: 14px;
 }
 
-.chat-pan {
-    height: calc(100% - 50px) !important;
-    border-radius: 0 0 7px 0;
-    margin-right: 10px;
+.main-body > div {
+    margin-top: -35px;
+    height: calc(100% + 35px);
+}
+.main-body > ul {
+    margin-top: -35px;
+    height: calc(100% + 35px);
+    padding-left: 5px;
+}
+
+.top-bar {
+    margin-bottom: 0 !important;
 }
-.pop-box>div:last-child {
+.top-bar>span,
+.top-bar>img, .top-bar>svg {
+    display: none;
+}
+
+.chat-pan.withBar {
+    left: 275px !important;
+    top: 0;
     height: calc(100% - 20px);
-    margin-top: 10px;
-    width: calc(100% - 20px);
-    margin-left: 10px;
+    padding-top: 20px;
+}
+.card-info-pan-bg {
+    margin-top: -20px;
+}
+.chat-info {
+    margin: calc(50vh - 20px) 0 0 50%;
 }
-.chat-pan>div.bg {
-    border-radius: 0 0 7px 0;
+.opt-main>div:last-child {
+    padding-top: 25px !important;
+    height: calc(100% - 17px) !important;
 }

src/background.ts

@@ -41,40 +41,35 @@ async function createWindow() {
         defaultHeight: 800
     })
     const store = new Store()
-    const noWindow = await store.get('opt_no_window')
     let windowConfig = {
         x: mainWindowState.x,
         y: mainWindowState.y,
         width: mainWindowState.width,
         height: mainWindowState.height,
         icon: path.join(__dirname,'./public/img/icons/icon.png'),
         webPreferences: {
-            nodeIntegration: true,
+            nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
             contextIsolation: false
-        },
-        transparent: true
+        }
     } as Electron.BrowserWindowConstructorOptions
-    // macOS
     if(process.platform === 'darwin') {
+        // macOS
         windowConfig = {
             ...windowConfig,
             maximizable: false,
             fullscreen: false,
-            titleBarStyle: process.platform === 'darwin' ? 'hidden' : 'default',
+            titleBarStyle: 'hidden',
             trafficLightPosition: { x: 11, y: 10 },
             vibrancy: 'fullscreen-ui',
+            transparent: true,
             // visualEffectState: 'active'
         }
-    } else {
-        windowConfig = {
-            ...windowConfig,
-            frame: noWindow === "true" ? false : true
-        }
-    }
-    // Windows
-    if(process.platform === 'win32') {
+    } else if(process.platform === 'win32') {
+        // Windows
         windowConfig = {
             ...windowConfig,
+            backgroundColor: '#00000000',
+            backgroundMaterial: 'acrylic',
             frame: false
         }
         store.set('opt_no_window', 'true')

src/function/utils/appUtil.ts

@@ -389,6 +389,9 @@ export function createIpc() {
         runtimeData.reader.on('app:openLink', (event, link) => {
             openLink(link)
         })
+        runtimeData.reader.on('app:logger', (event, config) => {
+            new Logger().add(config.type, config.text)
+        })
     }
 }
 
@@ -407,7 +410,7 @@ export function loadAppendStyle() {
     } catch (e) {
         logger.info('未找到对应平台的附加样式')
     }
-    if (platform == 'darwin') {
+    if (platform != 'linux') {
         import('@/assets/css/append/append_vibrancy.css').then(() => {
             logger.info('透明 UI 附加样式加载完成')
         })

vue.config.js

@@ -19,7 +19,7 @@ module.exports = {
                 {
                     test: /\.yaml$/,
                     use: 'js-yaml-loader',
-                  }
+                }
             ]
         }
     },
@@ -71,6 +71,7 @@ module.exports = {
          * @type {import('vue-cli-plugin-electron-builder').PluginOptions}
          */
         electronBuilder: {
+            nodeIntegration: true,
             builderOptions: {
                 appId: 'com.stapxs.qqweb',
                 productName: 'Stapxs QQ Lite',