From 9295d9f2cfcd6f775d5976c97801c54029caab04 Mon Sep 17 00:00:00 2001
From: li-xiaochen <397721316@qq.com>
Date: Tue, 7 Jan 2025 13:29:00 +0800
Subject: [PATCH] =?UTF-8?q?=E7=95=8C=E9=9D=A2=E4=BC=98=E5=8C=96=201.?=
 =?UTF-8?q?=E6=97=A5=E5=BF=97=E7=9A=84=E4=B8=AD=E6=96=87=E5=AD=97=E4=BD=93?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=E5=BE=AE=E8=BD=AF=E9=9B=85=E9=BB=91=202.?=
 =?UTF-8?q?=E5=B8=AE=E5=8A=A9=E6=96=87=E6=A1=A3=E6=8C=89=E9=92=AE=E5=A4=96?=
 =?UTF-8?q?=E8=BE=B9=E8=B7=9D=E8=B0=83=E6=95=B4=E5=88=B0=E5=92=8C=E6=97=A5?=
 =?UTF-8?q?=E5=BF=97=E7=AA=97=E5=B7=A6=E8=BE=B9=E8=B7=9D=E4=B8=80=E8=87=B4?=
 =?UTF-8?q?=203.=E6=89=A9=E5=A4=A7=E9=BB=98=E8=AE=A4=E7=AA=97=E5=8F=A3?=
 =?UTF-8?q?=E5=A4=A7=E5=B0=8F=EF=BC=8C=E4=BD=BF=E5=BE=97PyPI=E5=8F=AF?=
 =?UTF-8?q?=E4=BB=A5=E5=88=9D=E5=A7=8B=E5=B1=95=E7=A4=BA=E5=88=B0=E4=B8=80?=
 =?UTF-8?q?=E8=A1=8C=204.=E8=A1=A8=E5=8D=95label=E6=94=B9=E4=B8=BA?=
 =?UTF-8?q?=E5=9E=82=E7=9B=B4=E5=B1=85=E4=B8=AD=205.=E8=AE=BE=E7=BD=AEtab?=
 =?UTF-8?q?=E9=A1=B5=E7=9A=84=E2=80=9C=E6=96=B0=E2=80=9D=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E5=9E=82=E7=9B=B4=E5=B1=85=E4=B8=AD=EF=BC=8C?=
 =?UTF-8?q?=E5=B9=B6=E4=B8=94=E4=B8=8D=E8=83=BD=E5=BD=B1=E5=93=8D=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E6=A0=8F=E7=9A=84=E9=AB=98=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 launcher/webview/__init__.py       |  2 +-
 ui/src/App.vue                     | 26 ++++++++++++---
 ui/src/components/LogComponent.vue | 52 ++++++++++++++----------------
 ui/src/main.js                     |  1 +
 ui/src/pages/Settings.vue          |  3 +-
 ui/src/pages/Update.vue            |  5 +--
 ui/src/styles/global.css           | 43 ++++++++++++++++++++++++
 ui/src/styles/styles.js            |  3 ++
 8 files changed, 99 insertions(+), 36 deletions(-)
 create mode 100644 ui/src/styles/global.css
 create mode 100644 ui/src/styles/styles.js

diff --git a/launcher/webview/__init__.py b/launcher/webview/__init__.py
index 1129706..f450a28 100644
--- a/launcher/webview/__init__.py
+++ b/launcher/webview/__init__.py
@@ -9,5 +9,5 @@ window = None
 def start_webview():
     global window
     window = webview.create_window(f"mower-ng launcher {sys_config.get('version')}", sys_config.get('url'),
-                                   js_api=Api())
+                                   js_api=Api(), width=850, height=600)
     webview.start(debug=sys_config.get('debug'))
diff --git a/ui/src/App.vue b/ui/src/App.vue
index 06d73a2..cffa4df 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -89,6 +89,7 @@ provide('new_version', new_version)
         class="container"
         v-model:value="conf.page"
         @update:value="set_page"
+        justify-content="center"
       >
         <n-tab-pane :disabled="running" name="init" tab="初始化"><init /></n-tab-pane>
         <n-tab-pane :disabled="running" name="update" tab="更新代码"><update /></n-tab-pane>
@@ -96,15 +97,17 @@ provide('new_version', new_version)
         <n-tab-pane :disabled="running" name="fix" tab="依赖修复"><fix /></n-tab-pane>
         <n-tab-pane :disabled="running" name="settings">
           <template #tab>
-            <n-space :wrap="false">
-              设置
-              <n-tag v-if="update_able" round type="success">新</n-tag>
-            </n-space>
+            <div class="tab-content">
+              <span>设置</span>
+              <n-tag v-if="update_able" class="tag" round type="success">新</n-tag>
+            </div>
           </template>
           <settings />
         </n-tab-pane>
         <template #suffix>
-          <n-button type="primary" secondary size="small" @click="show_doc">帮助文档</n-button>
+          <div class="suffix-container">
+            <n-button type="primary" secondary size="small" @click="show_doc">帮助文档</n-button>
+          </div>
         </template>
       </n-tabs>
     </n-notification-provider>
@@ -117,4 +120,17 @@ provide('new_version', new_version)
   width: 100vw;
   height: 100vh;
 }
+.suffix-container {
+  margin: 0 4px 6px 4px;
+}
+.tab-content {
+  position: relative;
+}
+.tag {
+  margin-left: 4px;
+  position: absolute;
+  top: 50%;
+  left: 100%;
+  transform: translateY(-50%);
+}
 </style>
diff --git a/ui/src/components/LogComponent.vue b/ui/src/components/LogComponent.vue
index 7fc5d72..47d1339 100644
--- a/ui/src/components/LogComponent.vue
+++ b/ui/src/components/LogComponent.vue
@@ -5,27 +5,44 @@ import hljs from 'highlight.js/lib/core'
 const log = inject('log')
 const log_ele = inject('log_ele')
 
+const chinesePattern = {
+  className: 'chinese',
+  begin: /[\u4e00-\u9fa5]+/
+}
+
 hljs.registerLanguage('naive-log', () => ({
   contains: [
     {
       className: 'info',
-      begin: /\[信息\]/,
-      end: /$/
+      begin: /^\[信息\]/,
+      end: /$/,
+      returnBegin: true,
+      returnEnd: true,
+      contains: [chinesePattern]
     },
     {
       className: 'error',
-      begin: /\[错误\]/,
-      end: /$/
+      begin: /^\[错误\]/,
+      end: /$/,
+      returnBegin: true,
+      returnEnd: true,
+      contains: [chinesePattern]
     },
     {
       className: 'execute_command',
-      begin: /\[执行命令\]/,
-      end: /$/
+      begin: /^\[执行命令\]/,
+      end: /$/,
+      returnBegin: true,
+      returnEnd: true,
+      contains: [chinesePattern]
     },
     {
       className: 'command_out',
-      begin: /\[命令输出\]/,
-      end: /$/
+      begin: /^\[命令输出\]/,
+      end: /$/,
+      returnBegin: true,
+      returnEnd: true,
+      contains: [chinesePattern]
     }
   ]
 }))
@@ -54,22 +71,3 @@ hljs.registerLanguage('naive-log', () => ({
   user-select: text;
 }
 </style>
-
-<style>
-pre {
-  word-break: break-all !important;
-}
-
-.n-code pre .hljs-info {
-  color: #33ff33;
-}
-.n-code pre .hljs-error {
-  color: #ff0000;
-}
-.n-code pre .hljs-execute_command {
-  color: #edaf1f;
-}
-.n-code pre .hljs-command_out {
-  color: #ffffff;
-}
-</style>
diff --git a/ui/src/main.js b/ui/src/main.js
index e8343a7..132098e 100644
--- a/ui/src/main.js
+++ b/ui/src/main.js
@@ -1,5 +1,6 @@
 import 'vfonts/Lato.css'
 import 'vfonts/FiraCode.css'
+import './styles/global.css'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
diff --git a/ui/src/pages/Settings.vue b/ui/src/pages/Settings.vue
index cd21d17..120ff2c 100644
--- a/ui/src/pages/Settings.vue
+++ b/ui/src/pages/Settings.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { SyncCircle } from '@vicons/ionicons5'
+import { form_item_label_style } from '@/styles/styles.js'
 
 const notification = useNotification()
 
@@ -57,7 +58,7 @@ async function check_update() {
 <template>
   <n-flex vertical style="gap: 16px; height: 100%; padding: 16px; box-sizing: border-box">
     <n-form label-placement="left" :show-feedback="false" label-width="auto" label-align="left">
-      <n-form-item label="版本">
+      <n-form-item label="版本" :label-style="form_item_label_style">
         <n-space align="center">
           {{ version }}
           <n-button
diff --git a/ui/src/pages/Update.vue b/ui/src/pages/Update.vue
index dc1da6a..3dbd82a 100644
--- a/ui/src/pages/Update.vue
+++ b/ui/src/pages/Update.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { useConfigStore } from '@/stores/config.js'
+import { form_item_label_style } from '@/styles/styles.js'
 
 const conf = useConfigStore().config
 const branch = ref(null)
@@ -27,7 +28,7 @@ provide('current_state', current_state)
 <template>
   <n-flex vertical style="gap: 16px; height: 100%; padding: 16px; box-sizing: border-box">
     <n-form label-placement="left" :show-feedback="false" label-width="auto" label-align="left">
-      <n-form-item label="mower-ng 代码分支">
+      <n-form-item label="mower-ng 代码分支" :label-style="form_item_label_style">
         <n-radio-group v-model:value="conf.branch">
           <n-flex>
             <n-radio value="fast">测试版</n-radio>
@@ -35,7 +36,7 @@ provide('current_state', current_state)
           </n-flex>
         </n-radio-group>
       </n-form-item>
-      <n-form-item label="PyPI 仓库镜像">
+      <n-form-item label="PyPI 仓库镜像" :label-style="form_item_label_style">
         <n-radio-group v-model:value="conf.mirror">
           <n-flex>
             <n-radio value="pypi">PyPI</n-radio>
diff --git a/ui/src/styles/global.css b/ui/src/styles/global.css
new file mode 100644
index 0000000..6e553b5
--- /dev/null
+++ b/ui/src/styles/global.css
@@ -0,0 +1,43 @@
+/* src/assets/styles/global.css */
+
+/* 日志样式 */
+.n-code pre {
+  word-break: break-all !important;
+}
+
+.n-code pre .hljs-info {
+  color: #33ff33;
+}
+
+.n-code pre .hljs-error {
+  color: #ff0000;
+}
+
+.n-code pre .hljs-execute_command {
+  color: #edaf1f;
+}
+
+.n-code pre .hljs-command_out {
+  color: #ffffff;
+}
+
+.n-code pre .hljs-chinese {
+  font-family: '微软雅黑', sans-serif;
+}
+
+/* 确保 chinese 类在所有父级类下生效 */
+.n-code pre .hljs-info .hljs-chinese {
+  color: #33ff33;
+}
+
+.n-code pre .hljs-error .hljs-chinese {
+  color: #ff0000;
+}
+
+.n-code pre .hljs-execute_command .hljs-chinese {
+  color: #edaf1f;
+}
+
+.n-code pre .hljs-command_out .hljs-chinese {
+  color: #ffffff;
+}
diff --git a/ui/src/styles/styles.js b/ui/src/styles/styles.js
new file mode 100644
index 0000000..0ef8fb1
--- /dev/null
+++ b/ui/src/styles/styles.js
@@ -0,0 +1,3 @@
+export const form_item_label_style = {
+  alignSelf: 'center'
+}