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

- 新增 CSS 变量主题系统，支持亮色/暗色切换，去掉 DOM 操作 - 页面标题 Vite App → LionWebsite，修复 HTML link 标签 - 布局交换：表格在左(720px)，Dashboard 在右(弹性)，均无滚动栏 - Dashboard 改为响应式网格卡片布局，功能分组展示 - 认证页改为全屏居中卡片设计，提升品牌感 - 修复表格列宽 300vw 为合理值，样式加 scoped - 卡片字体调大适配高分辨率屏 - 缩略图卡片跨列显示，图片比例修正 - 表格内部滚动（height: calc），翻页栏固定底部 - 搜索页加载动画修正居中 - 删除 OnlineReader 空样式块
2026-06-07 19:20:47 +08:00 · 2026-06-07 19:20:47 +08:00 · c47cd3fb0d
commit c47cd3fb0d
parent e25afb7445
7 changed files with 145 additions and 126 deletions
--- a/index.html
+++ b/index.html
@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-CN">
 <head>
  <meta charset="UTF-8">
    <link rel="icon" type="image/svg+xml" href="/vite.svg"/>
-    <link href="/src/reset.css" type="text/css">
+    <link rel="stylesheet" href="/src/reset.css" type="text/css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Vite App</title>
+  <title>LionWebsite</title>
 </head>
 <body>
  <div id="app"></div>
--- a/src/App.vue
+++ b/src/App.vue
@ -4,14 +4,28 @@ import DashBoard from "./components/DashBoard.vue";
 </script>

 <template>
-  <div class="app">
-    <el-container>
-      <el-aside width="750px">
-        <Side/>
-      </el-aside>
-      <el-main>
-        <DashBoard/>
-      </el-main>
-    </el-container>
-  </div>
+  <el-container class="app-layout">
+    <el-aside width="720px" class="side-area">
+      <Side/>
+    </el-aside>
+    <el-main class="main-area">
+      <DashBoard/>
+    </el-main>
+  </el-container>
 </template>
+
+<style>
+.app-layout {
+  height: 100vh;
+}
+.side-area {
+  overflow: hidden;
+  border-right: 1px solid var(--border-color);
+  background: var(--bg-surface);
+}
+.main-area {
+  padding: 0;
+  overflow: hidden;
+  background-color: var(--bg-body);
+}
+</style>
--- a/src/components/DashBoard.vue
+++ b/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>
--- a/src/components/HentaiSearch.vue
+++ b/src/components/HentaiSearch.vue
@ -108,12 +108,14 @@ function close(){
 }

 .loading {
+  display: inline-block;
  width: 25px;
  height: 25px;
  border: 2px solid #ccc;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
+  vertical-align: middle;
 }

@keyframes spin {
--- a/src/components/OnlineReader.vue
+++ b/src/components/OnlineReader.vue
@ -133,6 +133,3 @@ function set_current_page(page){
  </el-dialog>
 </template>

-<style scoped>
-
-</style>
--- a/src/components/Side.vue
+++ b/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>
--- a/src/main.js
+++ b/src/main.js
@ -4,5 +4,6 @@ import 'element-plus/dist/index.css'
 import element from "element-plus"
 import "./reset.css"
 import 'element-plus/theme-chalk/dark/css-vars.css'
+import "./styles/theme.css"

 createApp(App).use(element).mount('#app')