From 26ca5273d21abcc9c5300ccc6751f9de51c58d9c Mon Sep 17 00:00:00 2001
From: Julian Freeman <freemanjulian372@gmail.com>
Date: Fri, 13 Mar 2026 17:07:19 -0400
Subject: [PATCH] add visual hints on advanced

---
 src/App.vue | 51 +++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 41 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 7638e02..410ba83 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -614,7 +614,7 @@ watch(activeTab, (newTab) => {
         <div class="page-header">
           <div class="header-info">
             <h1>高级清理工具</h1>
-            <p>执行深层系统优化，释放更多磁盘空间。</p>
+            <p>针对特定系统区域执行清理，但都有注意事项和副作用，在不理解的情况下慎点。</p>
           </div>
         </div>
 
@@ -625,13 +625,18 @@ watch(activeTab, (newTab) => {
               <div class="adv-card-info">
                 <span class="adv-card-icon">⚙️</span>
                 <div class="adv-card-text">
-                  <h3>系统组件清理</h3>
+                  <h3>系统组件清理 <small class="detail-hint">(点击查看详情)</small></h3>
                   <p>通过 DISM 命令移除不再需要的系统冗余组件。</p>
                 </div>
               </div>
-              <button class="btn-action" @click.stop="runAdvancedTask('dism')" :disabled="advLoading['dism']">
-                {{ advLoading['dism'] ? '执行中...' : '执行' }}
-              </button>
+              <div class="adv-card-right">
+                <span class="expand-icon" :class="{ rotated: expandedAdvanced === 'dism' }">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                </span>
+                <button class="btn-action" @click.stop="runAdvancedTask('dism')" :disabled="advLoading['dism']">
+                  {{ advLoading['dism'] ? '执行中...' : '执行' }}
+                </button>
+              </div>
             </div>
             <div class="adv-card-detail" v-show="expandedAdvanced === 'dism'">
               <div class="detail-content">
@@ -653,11 +658,16 @@ watch(activeTab, (newTab) => {
               <div class="adv-card-info">
                 <span class="adv-card-icon">🖼️</span>
                 <div class="adv-card-text">
-                  <h3>清理缩略图缓存</h3>
+                  <h3>清理缩略图缓存 <small class="detail-hint">(点击查看详情)</small></h3>
                   <p>重置文件夹预览缩略图数据库以释放空间。</p>
                 </div>
               </div>
-              <button class="btn-action" @click.stop="runAdvancedTask('thumb')" :disabled="advLoading['thumb']">执行</button>
+              <div class="adv-card-right">
+                <span class="expand-icon" :class="{ rotated: expandedAdvanced === 'thumb' }">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                </span>
+                <button class="btn-action" @click.stop="runAdvancedTask('thumb')" :disabled="advLoading['thumb']">执行</button>
+              </div>
             </div>
             <div class="adv-card-detail" v-show="expandedAdvanced === 'thumb'">
               <div class="detail-content">
@@ -678,11 +688,16 @@ watch(activeTab, (newTab) => {
               <div class="adv-card-info">
                 <span class="adv-card-icon">🌙</span>
                 <div class="adv-card-text">
-                  <h3>关闭休眠文件</h3>
+                  <h3>关闭休眠文件 <small class="detail-hint">(点击查看详情)</small></h3>
                   <p>永久删除 hiberfil.sys 文件（大小等同于内存）。</p>
                 </div>
               </div>
-              <button class="btn-action" @click.stop="runAdvancedTask('hiber')" :disabled="advLoading['hiber']">执行</button>
+              <div class="adv-card-right">
+                <span class="expand-icon" :class="{ rotated: expandedAdvanced === 'hiber' }">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                </span>
+                <button class="btn-action" @click.stop="runAdvancedTask('hiber')" :disabled="advLoading['hiber']">执行</button>
+              </div>
             </div>
             <div class="adv-card-detail" v-show="expandedAdvanced === 'hiber'">
               <div class="detail-content">
@@ -691,6 +706,7 @@ watch(activeTab, (newTab) => {
                 <h4 class="warning-title">注意事项：</h4>
                 <ul>
                   <li>关闭后将无法使用“休眠”功能及“快速启动”技术。</li>
+                  <li>只需执行一次。</li>
                   <li>需要管理员权限。</li>
                 </ul>
               </div>
@@ -1363,9 +1379,24 @@ body {
 
 .adv-card-info { display: flex; align-items: center; gap: 24px; }
 .adv-card-icon { font-size: 32px; }
-.adv-card-text h3 { font-size: 18px; margin-bottom: 4px; font-weight: 700; color: var(--text-main); }
+.adv-card-text h3 { font-size: 18px; margin-bottom: 4px; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 8px; }
 .adv-card-text p { color: var(--text-sec); font-size: 14px; }
 
+.detail-hint { font-size: 12px; color: var(--text-sec); font-weight: 400; opacity: 0.7; }
+
+.adv-card-right { display: flex; align-items: center; gap: 16px; }
+
+.expand-icon { 
+  width: 32px; height: 32px; 
+  display: flex; align-items: center; justify-content: center; 
+  color: #C1C1C1; 
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
+  border-radius: 50%;
+  background: #F8F9FA;
+}
+.expand-icon svg { width: 18px; height: 18px; }
+.expand-icon.rotated { transform: rotate(180deg); background: #EBF4FF; color: var(--primary-color); }
+
 .btn-action { 
   background-color: #F2F2F7; 
   color: var(--primary-color);