feat: 更漂亮的设置页面

Author: LarryZhu-dev

lang/index.json

@@ -3734,5 +3734,61 @@
     "ru": "",
     "en": "",
     "fr": ""
+  },
+  "wzgjv47": {
+    "zh-cn": " 前往发布页 ",
+    "ja": "",
+    "ko": "",
+    "ru": "",
+    "en": "",
+    "fr": ""
+  },
+  "ypb7wrd": {
+    "zh-cn": "控制编辑器中的拼写检查能力",
+    "ja": "",
+    "ko": "",
+    "ru": "",
+    "en": "",
+    "fr": ""
+  },
+  "bgchnp4": {
+    "zh-cn": "图片粘贴",
+    "ja": "",
+    "ko": "",
+    "ru": "",
+    "en": "",
+    "fr": ""
+  },
+  "p3ko1gf": {
+    "zh-cn": "设置粘贴图片后的保存与上传方式",
+    "ja": "",
+    "ko": "",
+    "ru": "",
+    "en": "",
+    "fr": ""
+  },
+  "ksgnsqh": {
+    "zh-cn": "配置 AI 提供商、模型与连接参数",
+    "ja": "",
+    "ko": "",
+    "ru": "",
+    "en": "",
+    "fr": ""
+  },
+  "zaoq64e": {
+    "zh-cn": "常用的打开、保存与另存为操作",
+    "ja": "",
+    "ko": "",
+    "ru": "",
+    "en": "",
+    "fr": ""
+  },
+  "q1na9je": {
+    "zh-cn": "将当前内容导出为不同格式文件",
+    "ja": "",
+    "ko": "",
+    "ru": "",
+    "en": "",
+    "fr": ""
   }
 }

package.json

@@ -73,6 +73,7 @@
     "font-list": "^1.5.1",
     "he": "^1.2.0",
     "katex": "^0.16.28",
+    "lucide-vue-next": "^1.0.0",
     "mdast": "^3.0.0",
     "mermaid": "^11.10.0",
     "mitt": "^3.0.1",

src/renderer/components/dialogs/UpdateConfirmDialog.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { nextTick, ref, watch } from "vue";
+import AppIcon from "@/renderer/components/ui/AppIcon.vue";
 import { unified } from "unified";
 import remarkParse from "remark-parse";
 import remarkRehype from "remark-rehype";
@@ -92,9 +93,10 @@ watch(
       <div class="dialog-content" @click.stop>
         <div class="dialog-header">
           <h3>milkup 新版本现已发布！</h3>
-          <span class="link" @click="openReleasePage"
-            >前往发布页 <i class="iconfont icon-link"></i
-          ></span>
+          <span class="link" @click="openReleasePage">
+            前往发布页
+            <AppIcon name="link" class="link-icon" />
+          </span>
         </div>
 
         <!-- 进度条区域 - 固定在内容上方 -->

src/renderer/components/menu/MenuBar.vue

@@ -6,6 +6,7 @@ import FileOptions from "@/renderer/components/settings/FileOptions.vue";
 import Language from "@/renderer/components/settings/Language.vue";
 import SettingBase from "@/renderer/components/settings/SettingBase.vue";
 import ShortcutPage from "@/renderer/components/settings/ShortcutPage.vue";
+import AppIcon from "@/renderer/components/ui/AppIcon.vue";
 import emitter from "@/renderer/events";
 import { checkUpdate } from "@/renderer/services/api/update.js";
 
@@ -21,32 +22,32 @@ const MenuComponents = {
   shortcut: ShortcutPage,
 };
 const MenuOptions = [
-  { label: "文件", action: () => (activeTab.value = "file"), icon: "icon-document", value: "file" },
+  { label: "文件", action: () => (activeTab.value = "file"), icon: "document", value: "file" },
   {
     label: "设置",
     action: () => (activeTab.value = "settings"),
-    icon: "icon-config-props",
+    icon: "config-props",
     value: "settings",
   },
   {
     label: "外观",
     action: () => (activeTab.value = "appearance"),
-    icon: "icon-waiguan",
+    icon: "waiguan",
     value: "appearance",
   },
   {
     label: "快捷键",
     action: () => (activeTab.value = "shortcut"),
-    icon: "icon-input",
+    icon: "shortcut-key",
     value: "shortcut",
   },
   {
     label: "语言",
     action: () => (activeTab.value = "language"),
-    icon: "icon-fanyi",
+    icon: "fanyi",
     value: "language",
   },
-  { label: "关于", action: () => (activeTab.value = "about"), icon: "icon-github", value: "about" },
+  { label: "关于", action: () => (activeTab.value = "about"), icon: "github", value: "about" },
 ];
 checkUpdate().then((updateInfo) => {
   if (updateInfo) {
@@ -58,15 +59,16 @@ checkUpdate().then((updateInfo) => {
 <template>
   <div class="MenubarBox">
     <div class="optionsContainer">
-      <span
+      <button
         v-for="option in MenuOptions"
         :key="option.label"
-        class="iconfont"
-        :class="{ active: activeTab === option.value, [option.icon]: true }"
+        class="menu-option"
+        :class="{ active: activeTab === option.value }"
         @click="option.action"
       >
+        <AppIcon :name="option.icon" class="menu-option-icon" />
         {{ option.label }}
-      </span>
+      </button>
     </div>
     <div class="detailContainer">
       <div class="scrollView">
@@ -117,7 +119,7 @@ checkUpdate().then((updateInfo) => {
     -webkit-app-region: drag;
     background: var(--background-color);
 
-    span {
+    .menu-option {
       cursor: pointer;
       width: 100%;
       -webkit-app-region: no-drag;
@@ -126,12 +128,14 @@ checkUpdate().then((updateInfo) => {
       display: flex;
       align-items: center;
       gap: 8px;
+      border: none;
+      background: transparent;
+      text-align: left;
       color: var(--text-color);
 
-      &::before {
-        font-size: 16px;
-        transform: translateY(1px);
-        font-weight: 100 !important;
+      .menu-option-icon {
+        font-size: 18px;
+        flex-shrink: 0;
       }
 
       &:hover {

src/renderer/components/menu/StatusBar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
+import AppIcon from "@/renderer/components/ui/AppIcon.vue";
 import { toggleShowOutline } from "@/renderer/hooks/useOutline";
 import useSourceCode from "@/renderer/hooks/useSourceCode";
 
@@ -58,12 +59,11 @@ window.electronAPI.on("view:toggleView", () => {
   <div class="StatusBarBox">
     <div class="left-section">
       <div>
-        <span class="iconfont icon-List-outlined" @click="toggleShowOutline()"></span>
-        <span
-          class="iconfont"
-          :class="isShowSource ? 'icon-input' : 'icon-markdown'"
-          @click.stop="toggleSourceCode()"
-        >
+        <span class="status-icon-btn" @click="toggleShowOutline()">
+          <AppIcon name="List-outlined" />
+        </span>
+        <span class="status-icon-btn" @click.stop="toggleSourceCode()">
+          <AppIcon :name="isShowSource ? 'input' : 'markdown'" />
         </span>
       </div>
 
@@ -74,7 +74,7 @@ window.electronAPI.on("view:toggleView", () => {
         @click="handleRestore"
         title="点击恢复下载弹窗"
       >
-        <span class="iconfont icon-download"></span>
+        <AppIcon name="download" class="status-inline-icon" />
         <span>正在下载 {{ downloadProgress }}%</span>
         <div class="mini-progress-bg">
           <div class="mini-progress-fill" :style="{ width: `${downloadProgress}%` }"></div>
@@ -85,7 +85,7 @@ window.electronAPI.on("view:toggleView", () => {
         class="update-progress-bar success"
         @click="handleRestore"
       >
-        <span class="iconfont icon-check-circle"></span>
+        <AppIcon name="check-circle" class="status-inline-icon" />
         <span>下载完成，点击安装</span>
       </div>
     </div>

src/renderer/components/menu/TitleBar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onUnmounted, ref } from "vue";
+import AppIcon from "@/renderer/components/ui/AppIcon.vue";
 import TabBar from "@/renderer/components/workspace/TabBar.vue";
 import MenuDropDown from "./MenuDropDown.vue";
 
@@ -46,13 +47,15 @@ onUnmounted(() => {
       <TabBar />
 
       <div class="window-controls">
-        <span class="iconfont icon-min" @click="minimize"></span>
-        <span
-          class="iconfont"
-          :class="isFullScreen ? 'icon-normal' : 'icon-max'"
-          @click="toggleMaximize"
-        ></span>
-        <span class="iconfont icon-close" @click="close"></span>
+        <button class="window-control-btn" @click="minimize">
+          <AppIcon name="min" />
+        </button>
+        <button class="window-control-btn" @click="toggleMaximize">
+          <AppIcon :name="isFullScreen ? 'normal' : 'max'" />
+        </button>
+        <button class="window-control-btn close-btn" @click="close">
+          <AppIcon name="close" />
+        </button>
       </div>
     </template>
     <template v-else>
@@ -91,7 +94,7 @@ onUnmounted(() => {
     justify-content: center;
 
     /* ✅ 控制按钮不能拖动 */
-    span {
+    .window-control-btn {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -100,15 +103,14 @@ onUnmounted(() => {
       color: var(--text-color-1);
       height: 40px;
       width: 40px;
-
-      // padding:  8px;
-      // 保持长宽比
+      border: none;
+      background: transparent;
 
       &:hover {
         background: var(--hover-color);
       }
 
-      &.icon-close:hover {
+      &.close-btn:hover {
         background: #ff5f56;
         color: white;
       }

src/renderer/components/outline/Outline.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { reactive, ref, watch } from "vue";
+import AppIcon from "@/renderer/components/ui/AppIcon.vue";
 import WorkSpace from "@/renderer/components/workspace/WorkSpace.vue";
 import useOutline from "@/renderer/hooks/useOutline";
 import emitter from "@/renderer/events";
@@ -161,15 +162,15 @@ onUnmounted(() => document.removeEventListener("click", onDocClick));
                 :class="{ collapsed: collapsedSet.has(oi.id) }"
                 @click.stop="toggleCollapse(oi)"
               >
-                <span class="iconfont icon-arrow-right"></span>
+                <AppIcon name="arrow-right" />
               </span>
               <span v-else class="collapse-icon-placeholder"></span>
               <span class="outlineItem-text">{{ oi.text }}</span>
             </div>
           </template>
         </template>
         <div v-else class="empty-state">
-          <span class="iconfont icon-List-outlined empty-icon"></span>
+          <AppIcon name="List-outlined" class="empty-icon" />
           <span class="empty-text">暂无大纲</span>
         </div>
       </div>
@@ -194,7 +195,7 @@ onUnmounted(() => document.removeEventListener("click", onDocClick));
           @mouseleave="showCollapseSubmenu = false"
         >
           <span>折叠</span>
-          <span class="iconfont icon-arrow-right submenu-arrow"></span>
+          <AppIcon name="arrow-right" class="submenu-arrow" />
           <!-- 二级菜单 -->
           <div v-if="showCollapseSubmenu" class="outline-submenu">
             <div class="outline-ctx-item" @click="collapseByLevel(1)">折叠一级标题</div>

src/renderer/components/settings/AISetting.vue

@@ -9,6 +9,7 @@ import { Switch } from "@renderer/components/ui/switch";
 import { Slider } from "@renderer/components/ui/slider";
 import Input from "@renderer/components/ui/input/Input.vue";
 import Selector from "@renderer/components/ui/selector/Selector.vue";
+import AppIcon from "@/renderer/components/ui/AppIcon.vue";
 
 const { config, updateConfig, providerDefaultUrls: urls } = useAIConfig();
 
@@ -154,7 +155,7 @@ function updateProvider(val: string) {
             class="setting-input-width"
           />
           <button class="refresh-btn" @click="fetchOllamaModels" title="刷新模型列表">
-            <i class="iconfont icon-refresh">↻</i>
+            <AppIcon name="refresh" />
           </button>
         </div>
         <Input

src/renderer/components/settings/About.vue

@@ -5,6 +5,7 @@ import emitter from "@/renderer/events";
 import { checkUpdate } from "@/renderer/services/api/update";
 import { version } from "../../../../package.json";
 import { ref } from "vue";
+import AppIcon from "@/renderer/components/ui/AppIcon.vue";
 import LoadingIcon from "../ui/LoadingIcon.vue";
 
 function openByDefaultBrowser(url: string) {
@@ -89,7 +90,10 @@ function handleCheckUpdate() {
         @click="openByDefaultBrowser(`https://github.com/Auto-Plugin/milkup/graphs/contributors`)"
       >
         Thank you for the contribution from
-        <span class="iconfont icon-github">Auto-Plugin</span></span
+        <span class="contributor-link">
+          <AppIcon name="github" />
+          Auto-Plugin
+        </span></span
       >
     </p>
     <p class="tip">milkup 是完全免费开源的软件</p>