change icons

src/App.vue

@@ -9,7 +9,7 @@ import pkg from "../package.json";
 type Tab = 'clean-c-fast' | 'clean-c-advanced' | 'clean-c-deep' | 'clean-browser-chrome' | 'clean-browser-edge' | 'clean-memory';
 const activeTab = ref<Tab>('clean-c-fast');
 const isCMenuOpen = ref(true);
-const isBrowserMenuOpen = ref(false);
+const isBrowserMenuOpen = ref(true);
 
 // --- 数据结构 ---
 interface ScanItem { name: string; path: string; size: number; count: number; enabled: boolean; }
@@ -426,7 +426,9 @@ watch(activeTab, (newTab) => {
         <!-- 清理 C 盘组 -->
         <div class="nav-group">
           <div class="nav-item-header" @click="isCMenuOpen = !isCMenuOpen">
-            <span class="icon">💾</span>
+            <span class="icon svg-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>
+            </span>
             <span class="label">清理 C 盘</span>
             <span class="arrow" :class="{ open: isCMenuOpen }">▾</span>
           </div>
@@ -458,7 +460,9 @@ watch(activeTab, (newTab) => {
         <!-- 清理浏览器组 -->
         <div class="nav-group">
           <div class="nav-item-header" @click="isBrowserMenuOpen = !isBrowserMenuOpen">
-            <span class="icon">🌐</span>
+            <span class="icon svg-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><line x1="3" y1="10" x2="21" y2="10"/><path d="M7 7h.01"/><path d="M11 7h.01"/></svg>
+            </span>
             <span class="label">清理浏览器</span>
             <span class="arrow" :class="{ open: isBrowserMenuOpen }">▾</span>
           </div>
@@ -486,7 +490,9 @@ watch(activeTab, (newTab) => {
           :class="{ active: activeTab === 'clean-memory' }"
           @click="activeTab = 'clean-memory'"
         >
-          <span class="icon">🚀</span>
+          <span class="icon svg-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
+          </span>
           <span class="label">清理内存</span>
         </div>
       </nav>
@@ -903,7 +909,9 @@ watch(activeTab, (newTab) => {
                   <span v-if="node.is_dir" class="node-toggle">
                     {{ node.isLoading ? '⌛' : (node.isOpen ? '▼' : '▶') }}
                   </span>
-                  <span v-else class="node-icon">📄</span>
+                  <span v-else class="node-icon svg-icon">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>
+                  </span>
                   <span class="node-text">{{ node.name }}</span>
                 </div>
                 <div class="col-size">{{ node.size_str }}</div>
@@ -1010,16 +1018,22 @@ watch(activeTab, (newTab) => {
       @click.stop
     >
       <div class="menu-item" @click="openNodeInExplorer">
-        <span class="menu-icon">📂</span>
+        <span class="menu-icon svg-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+        </span>
         <span>在文件夹中打开</span>
       </div>
       <div class="menu-divider"></div>
       <div class="menu-item" @click="searchNode('google')">
-        <span class="menu-icon">🌐</span>
+        <span class="menu-icon svg-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+        </span>
         <span>用 Google 搜索</span>
       </div>
       <div class="menu-item" @click="searchNode('perplexity')">
-        <span class="menu-icon">🤖</span>
+        <span class="menu-icon svg-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>
+        </span>
         <span>询问 Perplexity</span>
       </div>
     </div>
@@ -1168,6 +1182,7 @@ body {
   padding: 40px 60px; 
   overflow-y: auto; 
   height: 100%;
+  scrollbar-gutter: stable;
 }
 /* 当处于全屏模式（深度分析）时，内容区本身不滚动，让内部树形滚动 */
 .content:has(.page-container.full-width) {
@@ -1824,4 +1839,37 @@ body {
   opacity: 0.7;
   pointer-events: none;
 }
+
+/* --- SVG 图标通用样式 --- */
+.svg-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+}
+
+.svg-icon svg {
+  width: 1.25em;
+  height: 1.25em;
+  stroke: currentColor;
+  stroke-width: 2;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.svg-icon.big svg {
+  width: 2.5em;
+  height: 2.5em;
+}
+
+.icon.svg-icon {
+  margin-right: 12px;
+  color: inherit;
+}
+
+.icon.svg-icon svg {
+  width: 18px;
+  height: 18px;
+}
 </style>