UI 全面优化：新主题系统、布局调整、组件美化

- 新增 CSS 变量主题系统，支持亮色/暗色切换，去掉 DOM 操作
   - 页面标题 Vite App → LionWebsite，修复 HTML link 标签
   - 布局交换：表格在左(720px)，Dashboard 在右(弹性)，均无滚动栏
   - Dashboard 改为响应式网格卡片布局，功能分组展示
   - 认证页改为全屏居中卡片设计，提升品牌感
   - 修复表格列宽 300vw 为合理值，样式加 scoped
   - 卡片字体调大适配高分辨率屏
   - 缩略图卡片跨列显示，图片比例修正
   - 表格内部滚动（height: calc），翻页栏固定底部
   - 搜索页加载动画修正居中
   - 删除 OnlineReader 空样式块

src/components/DashBoard.vue

@@ -1,45 +1,66 @@
 <template>
-  <div class="DashBoard" v-show="loadComplete">
-    <span>本周已用额度:{{weekUsed.weekUsedAmount}} 上次重置时间:{{weekUsed.lastResetAmountTime}}</span><br>
-    <el-button @click="queryWeekUsedAmount">查询用量</el-button>
-    <hr>
-    <el-row>
-      <el-col>
-       查询参数类型: <el-select style="width: 125px" v-model="type" @change="resetLocalQuery()">
+  <!-- Auth Screen -->
+  <div v-show="!loadComplete" class="auth-container">
+    <div class="auth-card">
+      <h1>LionWebsite</h1>
+      <p class="auth-subtitle">请输入授权码以访问下载管理器</p>
+      <div class="auth-form">
+        <el-input v-model="AuthCode" placeholder="请输入授权码" size="large" />
+        <el-checkbox v-model="isRemember">记住授权码</el-checkbox>
+        <el-button @click="validate" type="primary" size="large" @keydown.enter="validate" class="auth-btn">验证</el-button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 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>
+    </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 style="width: 200px;" v-model="param">
-          <template #prepend>
-            参数:
-          </template>
-        </el-input>
-      </el-col>
-      <el-col>
-        <el-button @click="queryRemoteTask" v-show="type === 'link'">远程查询</el-button>
-        <el-button @click="queryLocalTask">当前页查询</el-button>
-      </el-col>
-    </el-row>
-    <br>
-    <hr>
-    <el-button @click="isAlterAuthCode = true">修改授权码</el-button>
-    <el-button @click="deleteAuthCode">删除本地授权码</el-button>
-    <el-button @click="isConfig = true">配置</el-button>
-    <span style="display: inline">夜间模式</span>
-    <el-switch @click="toggleStyle" v-model="isDark">夜间模式</el-switch>
-    <hr>
-    <el-button @click="isQuerying = true">在线搜索</el-button>
-    <el-button @click="reconnect">重连节点</el-button>
-    <hr>
-    <el-button v-if="isLion" @click="resetUndone">重置任务</el-button>
-    <div v-show="thumbnailGallery.thumb_link !== undefined">
-      <span>
-        {{thumbnailGallery.shortName}}<br>
-      </span><br>
-      <picture>
-        <el-image :src="thumbnailGallery.thumb_link" :preview-src-list="[thumbnailGallery.thumb_link, ]" class="preview"
-        style="width: 300px; height: 250px" fit="contain"/>
-      </picture>
+        <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>
+    </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>
+    </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>
     </div>
   </div>
 
@@ -130,12 +151,6 @@
       <el-button type="primary" @click="saveConfig">保存</el-button>
     </template>
   </el-dialog>
-
-  <div class="DashBoard" v-show="!loadComplete">
-      <el-input v-model="AuthCode" placeholder="请输入授权码" style="padding-top: 200px"/> <br>
-      <el-checkbox v-model="isRemember">是否记住授权码</el-checkbox>
-      <el-button @click="validate" type="primary" @keydown.enter="validate" style="margin-left: 50px">验证</el-button>
-  </div>
 </template>
 
 <script setup>
@@ -145,7 +160,6 @@ import {ElMessage} from "element-plus"
 import HentaiSearch from "./HentaiSearch.vue";
 import {validateLink} from "../utils/validate.js";
 
-//授权码相关
 let AuthCode = ref("")
 let isRemember = ref(false)
 let isAlterAuthCode = ref(false)
@@ -162,7 +176,6 @@ let category = ref("")
 let sortType = ref("")
 let galleryNameType = ref("")
 
-//查询相关
 let type = ref("link")
 let param = ref("")
 
@@ -191,18 +204,15 @@ let isLion = computed(() => {
   return store.state.userId === 3
 })
 
-// 查询弹窗打开时重置表单
 watch(chosenGallery, () => {
   param.value = ''
   targetResolution.value = ''
 })
 
-//重连节点
 function reconnect(){
   store.dispatch("reconnect")
 }
 
-//修改授权码
 function alterAuthCode(){
   if(newAuthCode.value.trim() === "" || tempAuthCode.value.trim() === "" || newAuthCode.value !== tempAuthCode.value)
     ElMessage("请检查授权码输入是否错误")
@@ -213,11 +223,11 @@ function alterAuthCode(){
     tempAuthCode.value = ""
   }
 }
-//查询用量
+
 function queryWeekUsedAmount(){
   store.dispatch("loadWeekUsedAmount")
 }
-//提交任务
+
 function postTask(){
   if(!validateLink(chosenGallery.value.link)){
     ElMessage("链接错误")
@@ -232,7 +242,6 @@ function postTask(){
               targetResolution: targetResolution.value})
 }
 
-//查询任务
 function queryRemoteTask(){
   if(!validateLink(param.value)){
     ElMessage("链接错误")
@@ -262,7 +271,6 @@ function deleteGallery(){
   store.dispatch("deleteGallery", chosenGallery.value.gid)
 }
 
-//验证授权码
 function validate(){
   if(AuthCode.value.trim() === ""){
     ElMessage("请输入授权码后再验证")
@@ -274,12 +282,10 @@ function validate(){
   }
 }
 
-//在线阅读以及展示缩略图
 function readOnlineGallery(gallery){
   store.dispatch("readOnlineGallery", gallery)
 }
 
-//重新给节点发送未完成任务
 function resetUndone(){
   store.dispatch("resetUndone").then()
 }
@@ -289,9 +295,9 @@ function deleteAuthCode(){
 }
 function toggleStyle(){
   if(isDark.value)
-    dark()
+    document.documentElement.classList.add('dark')
   else
-    light()
+    document.documentElement.classList.remove('dark')
 }
 
 onMounted(() => {
@@ -315,34 +321,18 @@ function adjustForStyle(){
   if(darkConfigStr !== null) {
     darkConfig.value = JSON.parse(darkConfigStr)
     if (darkConfig.value.followSystem && isSystemDark())
-      dark()
+      document.documentElement.classList.add('dark')
     else
-      light()
+      document.documentElement.classList.remove('dark')
   }else {
-    light()
+    document.documentElement.classList.remove('dark')
     darkConfig.value = {'followSystem': false}
   }
+  isDark.value = document.documentElement.classList.contains('dark')
 }
 function isSystemDark(){
   return window.matchMedia('(prefers-color-scheme: dark)').matches
 }
-function dark(){
-  isDark.value = true
-  let html = document.querySelector("html")
-  if(!html.classList.contains("dark"))
-    html.classList.add('dark')
-  document.querySelector(".DashBoard").style.setProperty("background-color", null)
-  document.querySelector(".app").style.setProperty("background-color", null)
-}
-function light(){
-  isDark.value = false
-  let html = document.querySelector("html")
-  if(html.classList.contains("dark"))
-    html.classList.remove('dark')
-
-  document.querySelector(".DashBoard").style.setProperty("background-color", "ghostwhite")
-  document.querySelector(".app").style.setProperty("background-color", "#c6e2ff")
-}
 function saveConfig(){
   if(lengthPerPage.value < 0 || lengthPerPage.value > 30) {
     ElMessage("分页页数设置错误，范围1~30")
@@ -367,12 +357,4 @@ function saveConfig(){
 </script>
 
 <style scoped>
-  .DashBoard{
-    width: auto;
-    height: 92vh;
-    text-align: center;
-  }
-  .el-input{
-    width: 200px;
-  }
 </style>