界面优化

1.日志的中文字体改为微软雅黑
2.帮助文档按钮外边距调整到和日志窗左边距一致
3.扩大默认窗口大小，使得PyPI可以初始展示到一行
4.表单label改为垂直居中
5.设置tab页的“新”标签设置垂直居中，并且不能影响菜单栏的高度

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'))

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">
+            <div class="tab-content">
-              设置
+              <span>设置</span>
-              <n-tag v-if="update_able" round type="success">新</n-tag>
+              <n-tag v-if="update_able" class="tag" round type="success">新</n-tag>
-            </n-space>
+            </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>

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: /\[信息\]/,
+      begin: /^\[信息\]/,
-      end: /$/
+      end: /$/,
+      returnBegin: true,
+      returnEnd: true,
+      contains: [chinesePattern]
     },
     {
       className: 'error',
-      begin: /\[错误\]/,
+      begin: /^\[错误\]/,
-      end: /$/
+      end: /$/,
+      returnBegin: true,
+      returnEnd: true,
+      contains: [chinesePattern]
     },
     {
       className: 'execute_command',
-      begin: /\[执行命令\]/,
+      begin: /^\[执行命令\]/,
-      end: /$/
+      end: /$/,
+      returnBegin: true,
+      returnEnd: true,
+      contains: [chinesePattern]
     },
     {
       className: 'command_out',
-      begin: /\[命令输出\]/,
+      begin: /^\[命令输出\]/,
-      end: /$/
+      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>

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'

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

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>

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;
+}

ui/src/styles/styles.js

@@ -0,0 +1,3 @@
+export const form_item_label_style = {
+  alignSelf: 'center'
+}