代码重构：使用统一消息组件封装替代原始调用

1.启动程序界面字体对齐
2.编辑实例名称时保持行高和实例名称位置不变
3.修改实例名称输入框添加可清除选项
4.打开配置路径按钮移到右侧按钮处

launcher/constants.py

@@ -29,6 +29,7 @@ mirror_list = {
     "aliyun": "https://mirrors.aliyun.com/pypi/simple/",
     "tuna": "https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple",
     "sjtu": "https://mirror.sjtu.edu.cn/pypi/web/simple",
+    "ustc": "https://mirrors.ustc.edu.cn/pypi/simple",
 }
 
 # 实例文件夹名

ui/src/App.vue

@@ -89,35 +89,34 @@ provide('new_version', new_version)
     <n-spin v-if="loading" class="container">
       <template #description>加载中</template>
     </n-spin>
-    <n-notification-provider v-else>
-      <n-tabs
-        type="card"
-        placement="left"
-        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>
-        <n-tab-pane :disabled="running" name="launch" tab="启动程序"><launch /></n-tab-pane>
-        <n-tab-pane :disabled="running" name="fix" tab="依赖修复"><fix /></n-tab-pane>
-        <n-tab-pane :disabled="running" name="settings">
-          <template #tab>
-            <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>
-          <div class="suffix-container">
-            <n-button type="primary" secondary size="small" @click="show_doc">帮助文档</n-button>
+    <n-tabs
+      type="card"
+      placement="left"
+      class="container"
+      v-model:value="conf.page"
+      @update:value="set_page"
+      justify-content="center"
+      v-else
+    >
+      <n-tab-pane :disabled="running" name="init" tab="初始化"><init /></n-tab-pane>
+      <n-tab-pane :disabled="running" name="update" tab="更新代码"><update /></n-tab-pane>
+      <n-tab-pane :disabled="running" name="launch" tab="启动程序"><launch /></n-tab-pane>
+      <n-tab-pane :disabled="running" name="fix" tab="依赖修复"><fix /></n-tab-pane>
+      <n-tab-pane :disabled="running" name="settings">
+        <template #tab>
+          <div class="tab-content">
+            <span>设置</span>
+            <n-tag v-if="update_able" class="tag" round type="success">新</n-tag>
           </div>
         </template>
-      </n-tabs>
-    </n-notification-provider>
+        <settings />
+      </n-tab-pane>
+      <template #suffix>
+        <div class="suffix-container">
+          <n-button type="primary" secondary size="small" @click="show_doc">帮助文档</n-button>
+        </div>
+      </template>
+    </n-tabs>
     <n-global-style />
   </n-config-provider>
 </template>

ui/src/components/FloatButton.vue

@@ -1,6 +1,7 @@
 <script setup>
 import PlayIcon from '@vicons/ionicons5/Play'
 import { inject } from 'vue'
+import { notify } from '@/utils/naiveDiscrete.js'
 
 const running = inject('running')
 const log = inject('log')
@@ -8,8 +9,6 @@ const steps = inject('steps')
 const current_step = inject('current_step')
 const current_state = inject('current_state')
 
-const notification = useNotification()
-
 async function start() {
   log.value = []
   running.value = true
@@ -20,22 +19,14 @@ async function start() {
       if ((await pywebview.api.run(cmd, step.cwd)) == 'failed') {
         current_state.value = 'error'
         running.value = false
-        notification['error']({
-          content: '错误',
-          meta: '命令运行失败',
-          duration: 3000
-        })
+        notify.error('命令运行失败')
         return
       }
     }
   }
   current_state.value = 'finish'
   running.value = false
-  notification['info']({
-    content: '提示',
-    meta: '命令运行完成',
-    duration: 3000
-  })
+  notify.info('命令运行完成')
 }
 </script>
 

ui/src/main.js

@@ -1,4 +1,3 @@
-import 'vfonts/Lato.css'
 import 'vfonts/FiraCode.css'
 import './styles/global.css'
 

ui/src/pages/Fix.vue

@@ -1,26 +1,15 @@
 <script setup>
+import { notify } from '@/utils/naiveDiscrete.js'
+
 const running = inject('running')
-const notification = useNotification()
 
 async function rm_site_packages_and_python_scripts() {
   running.value = true
-  notification['info']({
-    content: '提示',
-    meta: '开始移除site-packages和python/Script目录',
-    duration: 3000
-  })
+  notify.info('开始移除site-packages和python/Script目录')
   const response = await pywebview.api.rm_site_packages()
-  notification['info']({
-    content: '提示',
-    meta: response,
-    duration: 3000
-  })
+  notify.info(response)
   const response2 = await pywebview.api.rm_python_scripts()
-  notification['info']({
-    content: '提示',
-    meta: response2,
-    duration: 3000
-  })
+  notify.info(response2)
   running.value = false
 }
 </script>

ui/src/pages/Launch.vue

@@ -12,8 +12,7 @@ import {
   Stop,
   Search
 } from '@vicons/ionicons5'
-
-const notification = useNotification()
+import { notify } from '@/utils/naiveDiscrete.js'
 
 const config_store = useConfigStore()
 const conf = config_store.config
@@ -90,17 +89,9 @@ async function handle_migrate(key) {
         name: '默认实例',
         path: response.data
       })
-      notification['success']({
-        content: '信息',
-        meta: response.message,
-        duration: 3000
-      })
+      notify.success(response.message)
     } else {
-      notification['error']({
-        content: '错误',
-        meta: response.message,
-        duration: 3000
-      })
+      notify.error(response.message)
     }
   } else {
     const response = await pywebview.api.migrate_instances_config()
@@ -110,17 +101,9 @@ async function handle_migrate(key) {
       conf.instances = [...config_store.config.instances]
     }
     if (response.status) {
-      notification['info']({
-        title: '信息',
-        content: response.message,
-        duration: 3000
-      })
+      notify.info(response.message)
     } else {
-      notification['error']({
-        title: '错误',
-        content: response.message,
-        duration: 3000
-      })
+      notify.error(response.message)
     }
   }
 }
@@ -175,8 +158,8 @@ async function handle_migrate(key) {
         显示日志
       </div>
     </n-space>
-    <n-list class="instance-list" bordered>
-      <n-list-item>
+    <n-list class="instance_list" bordered>
+      <n-list-item class="instance_list_item">
         <template #prefix>
           <n-checkbox
             v-model:checked="check_all"
@@ -187,29 +170,26 @@ async function handle_migrate(key) {
           >
         </template>
       </n-list-item>
-      <n-list-item v-for="(item, index) in conf.instances" :key="index">
+      <n-list-item class="instance_list_item" v-for="(item, index) in conf.instances" :key="index">
         <template #prefix>
           <n-checkbox v-model:checked="item.checked"></n-checkbox>
         </template>
         <n-space vertical>
           <n-space v-if="update_instance_name_index != index">
-            <n-text>{{ item.name }}</n-text>
+            <n-text class="instance_name">{{ item.name }}</n-text>
             <n-button size="tiny" @click="start_update_instance_name(index)">
               <template #icon>
                 <n-icon :component="Pencil"></n-icon>
               </template>
             </n-button>
-            <n-button @click="open_folder(item.path)" size="tiny">
-              <template #icon>
-                <n-icon :component="Folder"></n-icon>
-              </template>
-            </n-button>
           </n-space>
           <n-input
             v-else
+            class="instance_name_input"
             :ref="(el) => setInstanceNameInputRef(el, index)"
             v-model:value="item.name"
             @blur="end_update_instance_name"
+            clearable
           ></n-input>
         </n-space>
         <template #suffix>
@@ -234,6 +214,11 @@ async function handle_migrate(key) {
                 <n-icon :component="Stop"></n-icon>
               </template>
             </n-button>
+            <n-button type="primary" ghost size="small" @click="open_folder(item.path)">
+              <template #icon>
+                <n-icon :component="Folder"></n-icon>
+              </template>
+            </n-button>
             <n-popconfirm @positive-click="delete_instance(index, item.path)">
               <template #trigger>
                 <n-button type="error" ghost size="small">
@@ -256,9 +241,18 @@ async function handle_migrate(key) {
 .launch-btn {
   height: 38px;
 }
-.instance-list {
+.instance_list {
   overflow: auto;
 }
+.instance_list_item {
+  height: 50px;
+}
+.instance_name {
+  margin-left: 12px;
+}
+.instance_name_input {
+  height: 35px;
+}
 .log {
   min-height: 40vh;
   max-height: 40vh;
@@ -269,5 +263,6 @@ async function handle_migrate(key) {
 }
 .is_show_log_switch {
   margin-right: 20px;
+  text-align: center;
 }
 </style>

ui/src/pages/Settings.vue

@@ -2,8 +2,7 @@
 import { Sync } from '@vicons/ionicons5'
 import { form_item_label_style } from '@/styles/styles.js'
 import BaseMirrorOption from '@/components/BaseMirrorOption.vue'
-
-const notification = useNotification()
+import { notify } from '@/utils/naiveDiscrete.js'
 
 const update_able = inject('update_able')
 const running = inject('running')
@@ -19,11 +18,7 @@ async function update_self() {
   const response = await pywebview.api.update_self(
     new_version.value['assets'][0]['browser_download_url']
   )
-  notification['error']({
-    content: '错误',
-    meta: response,
-    duration: 3000
-  })
+  notify.error(response)
   update_self_running.value = false
   running.value = false
 }
@@ -38,18 +33,10 @@ async function check_update() {
   new_version.value = await pywebview.api.get_new_version()
   if (new_version.value.tag_name > version.value) {
     update_able.value = true
-    notification['info']({
-      content: '提示',
-      meta: '有新版本可更新',
-      duration: 3000
-    })
+    notify.info('有新版本可更新')
   } else {
     update_able.value = false
-    notification['info']({
-      content: '提示',
-      meta: '当前已是最新版本',
-      duration: 3000
-    })
+    notify.info('当前已是最新版本')
   }
   check_running.value = false
   running.value = false

ui/src/pages/Update.vue

@@ -20,6 +20,28 @@ const steps = computed(() => [
     cwd: 'mower-ng'
   }
 ])
+const mirror_options = [
+  {
+    label: 'PyPI',
+    value: 'pypi'
+  },
+  {
+    label: '阿里云镜像源',
+    value: 'aliyun'
+  },
+  {
+    label: '上海交通大学镜像源',
+    value: 'sjtu'
+  },
+  {
+    label: '清华大学镜像源',
+    value: 'tuna'
+  },
+  {
+    label: '中国科学技术大学镜像源',
+    value: 'ustc'
+  }
+]
 provide('steps', steps)
 const current_step = ref(1)
 provide('current_step', current_step)
@@ -40,14 +62,7 @@ provide('current_state', current_state)
         </n-radio-group>
       </n-form-item>
       <n-form-item label="PyPI 仓库镜像" :label-style="form_item_label_style">
-        <n-radio-group v-model:value="conf.mirror" :disabled="running">
-          <n-flex>
-            <n-radio value="pypi">PyPI</n-radio>
-            <n-radio value="aliyun">阿里云镜像站</n-radio>
-            <n-radio value="sjtu">上海交通大学镜像站</n-radio>
-            <n-radio value="tuna">清华大学镜像站</n-radio>
-          </n-flex>
-        </n-radio-group>
+        <n-select v-model:value="conf.mirror" :options="mirror_options" :disabled="running" />
       </n-form-item>
     </n-form>
     <n-steps :current="current_step" :status="current_state" size="small">

ui/src/utils/naiveDiscrete.js

@@ -0,0 +1,63 @@
+import { createDiscreteApi, darkTheme, lightTheme } from 'naive-ui'
+
+// 创建全局单例
+const { message, dialog, notification, loadingBar } = createDiscreteApi(
+  ['message', 'dialog', 'notification', 'loadingBar'],
+  {
+    configProviderProps: {
+      // 全局主题配置（示例使用系统主题）
+      theme: window.matchMedia('(prefers-color-scheme: dark)').matches ? darkTheme : lightTheme
+    }
+  }
+)
+
+// 创建统一的工厂函数
+const createMessager =
+  (handler, defaults) =>
+  (content, options = {}) => {
+    const mergedOptions =
+      typeof content === 'string'
+        ? { content, ...defaults, ...options }
+        : { ...defaults, ...content, ...options }
+
+    return handler(mergedOptions)
+  }
+
+// 消息提示封装
+export const toast = {
+  info: createMessager((opts) => message.info(opts.content, opts), { duration: 3000 }),
+
+  success: createMessager((opts) => message.success(opts.content, opts), { duration: 3000 }),
+
+  warning: createMessager((opts) => message.warning(opts.content, opts), { duration: 5000 }),
+
+  error: createMessager((opts) => message.error(opts.content, opts), { duration: 7000 })
+}
+
+// 通知封装
+export const notify = {
+  info: createMessager(notification.info, { title: '提示', duration: 3000 }),
+
+  success: createMessager(notification.success, { title: '成功', duration: 3000 }),
+
+  warning: createMessager(notification.warning, { title: '警告', duration: 5000 }),
+
+  error: createMessager(notification.error, { title: '错误', duration: 7000 })
+}
+
+// 对话框封装
+export const modal = {
+  info: (options) => dialog.info(options),
+  success: (options) => dialog.success(options),
+  warning: (options) => dialog.warning(options),
+  error: (options) => dialog.error(options),
+  confirm: (options) => dialog.confirm(options)
+}
+
+// 加载条控制器
+export const loader = {
+  start: () => loadingBar.start(),
+  finish: () => loadingBar.finish(),
+  error: () => loadingBar.error(),
+  setProgress: (progress) => loadingBar.setProgress(progress)
+}