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

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

src/components/Side.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="side" style="width: 100%">
+  <div class="side-table-wrapper">
     <div  v-show="loadComplete" class="load_complete">
       <el-table :data="currentTasks"
+                :height="tableHeight"
                 :empty-text="emptyText"
                 :row-key="gallery=>gallery.gid"
                 class="table"
@@ -10,28 +11,30 @@
 
         <el-table-column type="expand">
           <template #default="props">
-            名字:{{ props.row.name}} <br>
-            链接:<el-link :href="props.row.link">链接</el-link> <br>
-            语言:{{props.row.language}} <br>
-            页数:{{props.row.pages}} <br>
-            文件大小:{{props.row.fileSize}}<br>
-            分辨率:{{props.row.resolution}}<br>
-            任务创建时间:{{props.row.createTimeDisplay}}<br>
-            <span v-show="isLion">
-              downloader:{{props.row.downloader}}
-            </span>
+            <div class="detail-info">
+              名字:{{ props.row.name}} <br>
+              链接:<el-link :href="props.row.link">链接</el-link> <br>
+              语言:{{props.row.language}} <br>
+              页数:{{props.row.pages}} <br>
+              文件大小:{{props.row.fileSize}}<br>
+              分辨率:{{props.row.resolution}}<br>
+              任务创建时间:{{props.row.createTimeDisplay}}<br>
+              <span v-show="isLion">
+                downloader:{{props.row.downloader}}
+              </span>
+            </div>
 
             <el-button @click="deleteGallery(props.row.gid)" :disabled="props.row.status !== '下载完成'">删除</el-button>
           </template>
         </el-table-column>
 
-        <el-table-column label="名字" width="300vw">
+        <el-table-column label="名字" min-width="200">
           <template #default="scoped">
             {{galleryNameType === 'shortName' ? scoped.row.shortName: scoped.row.name}}
           </template>
         </el-table-column>
 
-        <el-table-column label="操作" width="300vw">
+        <el-table-column label="操作" width="280">
           <template #default="scoped">
             <span>
               <el-button @click="downloadTask(scoped.row.download)" :disabled="scoped.row.status !== '下载完成'">下载</el-button>
@@ -90,7 +93,7 @@
     </div>
     <OnlineReader/>
 
-    <span v-show="!loadComplete" class="side">请输入授权码后再查看</span>
+    <span v-show="!loadComplete" class="loading-text">请输入授权码后再查看</span>
   </div>
 </template>
 
@@ -129,6 +132,8 @@ let currentTasks = computed(() => {
   return store.getters.currentTasks ? store.getters.currentTasks: null
 })
 
+let tableHeight = computed(() => 'calc(100vh - 130px)')
+
 let min = computed(() => {
   return store.getters.min
 })
@@ -230,22 +235,40 @@ function showThumbnail(gallery){
 }
 </script>
 
-<style>
-  .side{
-    text-align: center;
-    height: 300px;
+<style scoped>
+  .side-table-wrapper {
+    height: 100%;
+    padding: 16px;
+    box-sizing: border-box;
   }
-  span{
+
+  .loading-text {
     display: block;
+    text-align: center;
+    padding-top: 200px;
+    color: var(--text-secondary, #86909c);
+    font-size: 14px;
   }
-  .pageChanger{
-    margin-top: 5vh;
+
+  .pageChanger {
+    margin-top: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
   }
-  .el-select{
-    width: 135px;
-  }
-  .page{
+
+  .page {
     display: inline-block;
     width: 50px;
+    cursor: pointer;
+    text-align: center;
+  }
+
+  .detail-info {
+    line-height: 1.8;
+  }
+  .detail-info > span {
+    display: block;
   }
 </style>