桌面端下载器调优：任务列表信息层级与操作区重排

- 统一 theme.css 视觉变量与卡片、状态标签样式
- DashBoard 与 Side 的任务行重排：状态标签与进度对齐，排序/显示条件更明确
- 新增 AppIcon 图标组件，store 同步空名短标题修复

src/components/DashBoard.vue

@@ -2,12 +2,20 @@
   <!-- Auth Screen -->
   <div v-show="!loadComplete" class="auth-container">
     <div class="auth-card">
-      <h1>LionWebsite</h1>
-      <p class="auth-subtitle">请输入授权码以访问下载管理器</p>
+      <div class="auth-brand">
+        <span class="auth-mark" aria-hidden="true">L</span>
+        <span class="auth-name">LionWebsite</span>
+      </div>
+      <h1>下载管理器</h1>
+      <p class="auth-subtitle">输入授权码以继续</p>
       <div class="auth-form">
-        <el-input v-model="AuthCode" placeholder="请输入授权码" size="large" />
+        <el-input v-model="AuthCode"
+                  placeholder="请输入授权码"
+                  size="large"
+                  show-password
+                  @keydown.enter="validate" />
         <el-checkbox v-model="isRemember">记住授权码</el-checkbox>
-        <el-button @click="validate" type="primary" size="large" @keydown.enter="validate" class="auth-btn">验证</el-button>
+        <el-button @click="validate" type="primary" size="large" class="auth-btn">验证</el-button>
       </div>
     </div>
   </div>
@@ -15,138 +23,179 @@
   <!-- Dashboard Main -->
   <div v-show="loadComplete" class="dashboard">
     <div class="control-card">
-      <h3>用量统计</h3>
-      <div class="card-row">
-        <span class="usage-text">本周已用: <b>{{ weekUsed.weekUsedAmount }}</b> | 上次重置: {{ weekUsed.lastResetAmountTime }}</span>
-        <el-button @click="queryWeekUsedAmount" size="small">查询用量</el-button>
+      <div class="card-head">
+        <h3 class="section-title">本周用量</h3>
+        <el-button @click="queryWeekUsedAmount" size="small" text>刷新</el-button>
+      </div>
+      <div class="usage-line">
+        <span class="usage-value">{{ weekUsed.weekUsedAmount ?? '—' }}</span>
+        <span class="usage-note">上次重置 {{ weekUsed.lastResetAmountTime ?? '—' }}</span>
       </div>
     </div>
 
-    <div class="control-card">
-      <h3>查询任务</h3>
-      <div class="card-row">
-        <el-select v-model="type" @change="resetLocalQuery" size="small" style="width: 90px">
-          <el-option value="link" label="链接"/>
-          <el-option value="keyword" label="关键字"/>
-        </el-select>
-        <el-input v-model="param" size="small" placeholder="输入参数" style="width: 160px" />
-        <el-button @click="queryRemoteTask" v-show="type === 'link'" size="small">远程查询</el-button>
-        <el-button @click="queryLocalTask" size="small">当前页查询</el-button>
+    <div class="dashboard-grid">
+      <div class="control-card">
+        <div class="card-head">
+          <h3 class="section-title">查询任务</h3>
+        </div>
+        <div class="card-row">
+          <el-select v-model="type" @change="resetLocalQuery" size="small" style="width: 92px">
+            <el-option value="link" label="链接"/>
+            <el-option value="keyword" label="关键字"/>
+          </el-select>
+          <el-input v-model="param"
+                    size="small"
+                    placeholder="输入链接或关键字"
+                    style="flex: 1; min-width: 150px"
+                    @keydown.enter="type === 'link' ? queryRemoteTask() : queryLocalTask()" />
+          <el-button @click="queryRemoteTask" v-show="type === 'link'" size="small" type="primary">远程查询</el-button>
+          <el-button @click="queryLocalTask" size="small">当前页查询</el-button>
+        </div>
+      </div>
+
+      <div class="control-card">
+        <div class="card-head">
+          <h3 class="section-title">管理</h3>
+        </div>
+        <div class="card-row">
+          <el-button @click="isAlterAuthCode = true" size="small">修改授权码</el-button>
+          <el-button @click="deleteAuthCode" size="small">删除本地授权码</el-button>
+          <el-button @click="isConfig = true" size="small">配置</el-button>
+        </div>
+      </div>
+
+      <div class="control-card">
+        <div class="card-head">
+          <h3 class="section-title">系统</h3>
+        </div>
+        <div class="card-row">
+          <el-button @click="isQuerying = true" size="small" type="primary">在线搜索</el-button>
+          <el-button @click="reconnect" size="small">重连节点</el-button>
+          <el-button v-if="isLion" @click="resetUndone" size="small" type="danger" plain>重置任务</el-button>
+        </div>
+      </div>
+
+      <div class="control-card">
+        <div class="card-head">
+          <h3 class="section-title">外观</h3>
+        </div>
+        <div class="setting-row">
+          <span>夜间模式</span>
+          <el-switch v-model="isDark" @change="toggleStyle" />
+        </div>
       </div>
     </div>
 
-    <div class="control-card">
-      <h3>管理</h3>
-      <div class="card-row">
-        <el-button @click="isAlterAuthCode = true" size="small">修改授权码</el-button>
-        <el-button @click="deleteAuthCode" size="small">删除授权码</el-button>
-        <el-button @click="isConfig = true" size="small">配置</el-button>
-        <span style="font-size:13px;color:var(--text-secondary)">夜间模式</span>
-        <el-switch v-model="isDark" @change="toggleStyle" size="small" />
+    <div v-show="thumbnailGallery.thumb_link !== undefined" class="control-card">
+      <div class="card-head">
+        <h3 class="section-title">缩略图</h3>
       </div>
-    </div>
-
-    <div class="control-card">
-      <h3>系统</h3>
-      <div class="card-row">
-        <el-button @click="isQuerying = true" size="small">在线搜索</el-button>
-        <el-button @click="reconnect" size="small">重连节点</el-button>
-        <el-button v-if="isLion" @click="resetUndone" size="small">重置任务</el-button>
-      </div>
-    </div>
-
-    <div v-show="thumbnailGallery.thumb_link !== undefined" class="control-card card-wide">
-      <h3>缩略图</h3>
       <div class="thumbnail-body">
         <p class="gallery-name">{{ thumbnailGallery.shortName }}</p>
-        <el-image :src="thumbnailGallery.thumb_link" :preview-src-list="[thumbnailGallery.thumb_link]" style="width:100%;height:500px" fit="contain" />
+        <div class="thumbnail-frame">
+          <el-image :src="thumbnailGallery.thumb_link"
+                    :preview-src-list="[thumbnailGallery.thumb_link]"
+                    style="width: 100%; height: 420px"
+                    fit="contain" />
+        </div>
       </div>
     </div>
   </div>
 
-  <el-dialog title="查询" v-model="chosenGallery" style="height: 350px">
-    <el-image v-show='chosenGallery.thumb_link !== undefined'
-              style="float: right; width: 250px; height: 250px;" fit="contain"
-              :src="chosenGallery.thumb_link !== undefined ? thumbnailUrl(chosenGallery.thumb_link) : ''"/>
-    <table>
-      <tr>名字:{{chosenGallery.name}}</tr>
-      <tr>页数:{{chosenGallery.pages}}</tr>
-      <tr>语言:{{chosenGallery.language}}</tr>
-      <tr>大小:{{chosenGallery.fileSize}}</tr>
-      <tr>状态:{{chosenGallery.status}}</tr>
-      <tr v-if="chosenGallery.availableResolution">
-        目标分辨率:<el-select v-model="targetResolution" style="width: 200px">
-          <el-option v-for="(fileSize, resolution) in chosenGallery.availableResolution" :value="resolution"
-                     :label="resolution + '  ' + fileSize">
-          </el-option>
-        </el-select>
-      </tr>
-    </table>
+  <el-dialog title="任务详情" v-model="chosenGallery" width="560px">
+    <div class="detail-layout">
+      <el-image v-show="chosenGallery.thumb_link !== undefined"
+                class="detail-thumb"
+                fit="contain"
+                :src="chosenGallery.thumb_link !== undefined ? thumbnailUrl(chosenGallery.thumb_link) : ''" />
+      <dl class="detail-list">
+        <dt>名字</dt>
+        <dd>{{ chosenGallery.name }}</dd>
+        <dt>页数</dt>
+        <dd>{{ chosenGallery.pages }}</dd>
+        <dt>语言</dt>
+        <dd>{{ chosenGallery.language }}</dd>
+        <dt>大小</dt>
+        <dd>{{ chosenGallery.fileSize }}</dd>
+        <dt>状态</dt>
+        <dd>{{ chosenGallery.status }}</dd>
+        <template v-if="chosenGallery.availableResolution">
+          <dt>目标分辨率</dt>
+          <dd>
+            <el-select v-model="targetResolution" style="width: 220px">
+              <el-option v-for="(fileSize, resolution) in chosenGallery.availableResolution"
+                         :key="resolution"
+                         :value="resolution"
+                         :label="resolution + '  ' + fileSize" />
+            </el-select>
+          </dd>
+        </template>
+      </dl>
+    </div>
     <template #footer>
-      <el-button @click="postTask" v-if="chosenGallery.availableResolution">下载</el-button>
-      <el-button @click="downloadChosenGallery" v-else-if="chosenGallery.status === '下载完成'">下载文件</el-button>
+      <el-button @click="postTask" v-if="chosenGallery.availableResolution" type="primary">提交下载</el-button>
+      <el-button @click="downloadChosenGallery" v-else-if="chosenGallery.status === '下载完成'" type="primary">下载文件</el-button>
       <el-button @click="readOnlineGallery(chosenGallery)">在线预览</el-button>
-      <el-button v-if="chosenGallery.status === '下载完成'" @click="deleteGallery">删除</el-button>
+      <el-button v-if="chosenGallery.status === '下载完成'" type="danger" plain @click="deleteGallery">删除</el-button>
     </template>
   </el-dialog>
 
   <el-dialog title="修改授权码" v-model="isAlterAuthCode">
-    <el-form>
-      <el-form-item>
-        <template #label>当前授权码</template>
-        <template #default>{{realAuthCode}}</template>
+    <el-form label-position="top">
+      <el-form-item label="当前授权码">
+        <span class="mono-value">{{ realAuthCode }}</span>
       </el-form-item>
-      <el-form-item>
-        <template #label>新的授权码</template>
-        <template #default>
-          <el-input v-model="newAuthCode"></el-input>
-        </template>
+      <el-form-item label="新的授权码">
+        <el-input v-model="newAuthCode" show-password></el-input>
       </el-form-item>
-      <el-form-item>
-        <template #label>再次输入授权码</template>
-        <template #default>
-          <el-input v-model="tempAuthCode"></el-input>
-        </template>
+      <el-form-item label="再次输入授权码">
+        <el-input v-model="tempAuthCode" show-password></el-input>
       </el-form-item>
     </el-form>
-    <el-footer>
-      <el-button @click="alterAuthCode">提交</el-button>
-    </el-footer>
+    <template #footer>
+      <el-button @click="isAlterAuthCode = false">取消</el-button>
+      <el-button type="primary" @click="alterAuthCode">提交</el-button>
+    </template>
   </el-dialog>
 
   <HentaiSearch v-model:is-querying="isQuerying"  @close="isQuerying = false"></HentaiSearch>
 
   <el-dialog title="配置" v-model="isConfig">
-    <div>
-      夜间模式<br>
-      <span style="display: inline-block">夜间模式跟随系统</span>
-      <el-switch v-model="darkConfig.followSystem"></el-switch><hr>
-    </div>
-    <div>
-      在线预览<br>
-      <span style="display: inline-block">在线预览分页页数:</span>
-      <input v-model="lengthPerPage"><hr>
-    </div>
-    <div>
-      默认设置<br>
-      <span style="display: inline-block">分类:</span>
-      <el-select v-model="category" default-first-option>
-        <el-option label="全部" value="total"/>
-        <el-option label="我的下载" value="myDownload"/>
-        <el-option label="我的收藏" value="myCollect"/>
-      </el-select> <br>
-      <span style="display: inline-block">排序方式:</span>
-      <el-select v-model="sortType" default-first-option>
-        <el-option label="名字" value="name"/>
-        <el-option label="简洁名字" value="shortName"/>
-        <el-option label="任务创建时间" value="createTime"/>
-      </el-select> <br>
-      <span style="display: inline-block">显示类型:</span>
-      <el-select v-model="galleryNameType" default-first-option>
-        <el-option label="名字" value="name"/>
-        <el-option label="简洁名字" value="shortName"/>
-      </el-select> <br>
-    </div>
+    <el-form label-position="top" class="config-form">
+      <h4 class="section-title">外观</h4>
+      <div class="setting-row">
+        <span>夜间模式跟随系统</span>
+        <el-switch v-model="darkConfig.followSystem"></el-switch>
+      </div>
+
+      <h4 class="section-title">在线预览</h4>
+      <el-form-item label="每页图片数量">
+        <el-input-number v-model="lengthPerPage" :min="1" :max="30" :step="1" style="width: 160px" />
+        <span class="field-hint">1 – 30</span>
+      </el-form-item>
+
+      <h4 class="section-title">默认设置</h4>
+      <el-form-item label="分类">
+        <el-select v-model="category" default-first-option style="width: 220px">
+          <el-option label="全部" value="total"/>
+          <el-option label="我的下载" value="myDownload"/>
+          <el-option label="我的收藏" value="myCollect"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="排序方式">
+        <el-select v-model="sortType" default-first-option style="width: 220px">
+          <el-option label="名字" value="name"/>
+          <el-option label="简洁名字" value="shortName"/>
+          <el-option label="任务创建时间" value="createTime"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="显示类型">
+        <el-select v-model="galleryNameType" default-first-option style="width: 220px">
+          <el-option label="名字" value="name"/>
+          <el-option label="简洁名字" value="shortName"/>
+        </el-select>
+      </el-form-item>
+    </el-form>
     <template #footer>
       <el-button type="primary" @click="saveConfig">保存</el-button>
     </template>