From 1f3a83b84d069dbf4a38fb504bfab0f7eaa7099b Mon Sep 17 00:00:00 2001
From: jiangrui <jiangrui@01ly.com.cn>
Date: Wed, 5 Mar 2025 18:20:54 +0800
Subject: [PATCH] refactor:pc views

---
 frontend/components.d.ts                      |   3 +
 frontend/src/api/user.ts                      |   2 +-
 frontend/src/components/AsideMenu.vue         | 269 +++++--
 frontend/src/components/Home/DoubanMovie.vue  |   0
 frontend/src/components/Home/FolderSelect.vue | 307 +++++---
 frontend/src/components/Home/ResourceCard.vue | 675 ++++++++++++++----
 .../src/components/Home/ResourceSelect.vue    | 206 ++++--
 .../src/components/Home/ResourceTable.vue     |  14 +-
 frontend/src/components/SearchBar.vue         | 285 +++++---
 frontend/src/constants/storage.ts             |   5 +
 frontend/src/main.ts                          |   1 +
 frontend/src/router/pc-routes.ts              |   2 +-
 frontend/src/stores/userSetting.ts            |  29 +-
 frontend/src/styles/common.scss               |  62 ++
 frontend/src/types/index.ts                   |   1 +
 frontend/src/types/user.ts                    |  22 +-
 frontend/src/utils/request.ts                 |   5 +-
 frontend/src/views/Douban.vue                 | 145 ++--
 frontend/src/views/Home.vue                   | 227 ++++--
 frontend/src/views/Login.vue                  | 260 -------
 frontend/src/views/ResourceList.vue           | 498 ++++++++++---
 frontend/src/views/Setting.vue                | 551 ++++++++++----
 frontend/src/views/mobile/Login.vue           |  28 +-
 frontend/src/views/mobile/Setting.vue         | 115 ++-
 frontend/src/views/pc/Login.vue               | 354 +++++++++
 25 files changed, 2949 insertions(+), 1117 deletions(-)
 delete mode 100644 frontend/src/components/Home/DoubanMovie.vue
 create mode 100644 frontend/src/constants/storage.ts
 create mode 100644 frontend/src/styles/common.scss
 delete mode 100644 frontend/src/views/Login.vue
 create mode 100644 frontend/src/views/pc/Login.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 39ce718..8403a27 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -13,6 +13,7 @@ declare module 'vue' {
     ElBacktop: typeof import('element-plus/es')['ElBacktop']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDialog: typeof import('element-plus/es')['ElDialog']
@@ -25,9 +26,11 @@ declare module 'vue' {
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElLink: typeof import('element-plus/es')['ElLink']
+    ElLoadingIcon: typeof import('element-plus/es')['ElLoadingIcon']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElSpace: typeof import('element-plus/es')['ElSpace']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
diff --git a/frontend/src/api/user.ts b/frontend/src/api/user.ts
index ba63441..c9ee255 100644
--- a/frontend/src/api/user.ts
+++ b/frontend/src/api/user.ts
@@ -4,7 +4,7 @@ export const userApi = {
   login: (data: { username: string; password: string }) => {
     return request.post<{ token: string }>("/api/user/login", data);
   },
-  register: (data: { username: string; password: string }) => {
+  register: (data: { username: string; password: string; registerCode: string }) => {
     return request.post<{ token: string }>("/api/user/register", data);
   },
 };
diff --git a/frontend/src/components/AsideMenu.vue b/frontend/src/components/AsideMenu.vue
index cefe2dc..2e2efff 100644
--- a/frontend/src/components/AsideMenu.vue
+++ b/frontend/src/components/AsideMenu.vue
@@ -1,34 +1,38 @@
 <template>
-  <div class="aside-menu">
-    <div class="logo">
-      <img :src="logo" class="logo-img" />
-      <div class="logo-text">Cloud Saver</div>
+  <div class="pc-aside">
+    <!-- Logo 区域 -->
+    <div class="pc-aside__logo">
+      <img :src="logo" alt="Cloud Saver Logo" class="logo__image" />
+      <h1 class="logo__title">Cloud Saver</h1>
     </div>
+
+    <!-- 菜单区域 -->
     <el-menu
       :default-active="currentMenu?.index || '1'"
       :default-openeds="currentMenuOpen"
-      class="el-menu-vertical"
-      @open="handleOpen"
-      @close="handleClose"
+      class="pc-aside__menu"
     >
-      <template v-for="menu in menuList">
-        <el-sub-menu v-if="menu.children" :key="menu.index" :index="menu.index">
+      <template v-for="menu in menuList" :key="menu.index">
+        <!-- 子菜单 -->
+        <el-sub-menu v-if="menu.children" :index="menu.index">
           <template #title>
             <el-icon><component :is="menu.icon" /></el-icon>
             <span>{{ menu.title }}</span>
           </template>
+
           <el-menu-item
             v-for="child in menu.children"
             :key="child.index"
             :index="child.index"
             @click="handleMenuClick(child)"
           >
-            {{ child.title }}
+            <span>{{ child.title }}</span>
           </el-menu-item>
         </el-sub-menu>
+
+        <!-- 普通菜单项 -->
         <el-menu-item
           v-else
-          :key="menu.router"
           :index="menu.index"
           :disabled="menu.disabled"
           @click="handleMenuClick(menu)"
@@ -38,54 +42,86 @@
         </el-menu-item>
       </template>
     </el-menu>
+
+    <!-- GitHub 链接 -->
+    <div class="pc-aside__footer">
+      <a
+        href="https://github.com/jiangrui1994/CloudSaver"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="github-link"
+      >
+        <svg
+          height="20"
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          version="1.1"
+          width="20"
+          class="github-icon"
+        >
+          <path
+            fill="currentColor"
+            d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"
+          />
+        </svg>
+        <span>GitHub</span>
+        <span class="version">v{{ pkg.version }}</span>
+      </a>
+    </div>
   </div>
 </template>
 
-<script lang="ts" setup>
-import { Search, Film, Setting } from "@element-plus/icons-vue";
-import logo from "@/assets/images/logo.png";
-import { useRouter, useRoute } from "vue-router";
+<script setup lang="ts">
 import { computed } from "vue";
-const router = useRouter();
-const route = useRoute();
+import { useRouter, useRoute } from "vue-router";
+import { Search, Film, Setting, Link } from "@element-plus/icons-vue";
+import logo from "@/assets/images/logo.png";
+import pkg from "../../package.json";
+
+// 类型定义
 interface MenuItem {
   index: string;
   title: string;
-  icon?: typeof Search | typeof Film | typeof Setting;
+  icon?: typeof Search | typeof Film | typeof Setting | typeof Link;
   router?: string;
   children?: MenuItem[];
   disabled?: boolean;
 }
 
+// 路由相关
+const router = useRouter();
+const route = useRoute();
+
+// 菜单配置
 const menuList: MenuItem[] = [
   {
-    index: "2",
+    index: "1",
     title: "资源搜索",
     icon: Search,
-    router: "/",
+    router: "/resource",
   },
   {
-    index: "1",
+    index: "2",
     title: "豆瓣榜单",
     icon: Film,
     children: [
       {
-        index: "1-1",
+        index: "2-1",
         title: "热门电影",
         router: "/douban?type=movie",
       },
       {
-        index: "1-2",
+        index: "2-2",
         title: "热门电视剧",
         router: "/douban?type=tv",
       },
       {
-        index: "1-3",
+        index: "2-3",
         title: "最新电影",
         router: "/douban?type=movie&tag=最新",
       },
       {
-        index: "1-4",
+        index: "2-4",
         title: "热门综艺",
         router: "/douban?type=tv&tag=综艺",
       },
@@ -100,50 +136,171 @@ const menuList: MenuItem[] = [
   },
 ];
 
+// 计算当前激活的菜单
 const currentMenu = computed(() => {
-  return menuList
-    .reduce((pre: MenuItem[], cur: MenuItem) => {
-      if (!cur.children) {
-        pre.push(cur);
-      } else {
-        pre.push(...cur.children);
-      }
-      return pre;
-    }, [])
-    .find((x) => x.router === decodeURIComponent(route.fullPath));
+  const flatMenus = menuList.reduce<MenuItem[]>((acc, menu) => {
+    if (!menu.children) {
+      acc.push(menu);
+    } else {
+      acc.push(...menu.children);
+    }
+    return acc;
+  }, []);
+
+  return flatMenus.find((menu) => menu.router === decodeURIComponent(route.fullPath));
 });
+
+// 计算当前展开的子菜单
 const currentMenuOpen = computed(() => {
-  if (currentMenu.value && currentMenu.value.index.length > 1) {
+  if (currentMenu.value?.index.includes("-")) {
     return [currentMenu.value.index.split("-")[0]];
-  } else {
-    return [];
   }
+  return [];
 });
-const handleOpen = (_key: string, _keyPath: string[]): void => {};
-const handleClose = (_key: string, _keyPath: string[]): void => {};
-const handleMenuClick = (menu: MenuItem): void => {
+
+// 菜单点击处理
+const handleMenuClick = (menu: MenuItem) => {
   if (menu.router) {
     router.push(menu.router);
   }
 };
 </script>
+
 <style lang="scss" scoped>
-.el-menu-vertical {
-  width: 100%;
-  height: 100vh;
-}
-.logo {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 10px 0;
-  .logo-img {
-    width: 30px;
-    height: 30px;
-    margin-right: 15px;
+@import "@/styles/common.scss";
+
+.pc-aside {
+  height: 100%;
+  background: var(--theme-card-bg);
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+
+  // Logo 区域
+  &__logo {
+    @include flex-center;
+    padding: 24px 16px;
+    gap: 12px;
+
+    .logo__image {
+      width: 32px;
+      height: 32px;
+      object-fit: contain;
+    }
+
+    .logo__title {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--theme-text-primary);
+      @include text-overflow;
+    }
   }
-  .logo-text {
-    font-size: 20px;
+
+  // 菜单区域
+  &__menu {
+    border-right: none;
+    background: transparent;
+
+    :deep(.el-menu-item) {
+      height: 48px;
+      line-height: 48px;
+      color: var(--theme-text-regular);
+
+      &.is-active {
+        color: var(--theme-primary);
+        background: rgba(0, 102, 204, 0.1);
+      }
+
+      &:hover {
+        color: var(--theme-primary);
+        background: rgba(0, 102, 204, 0.05);
+      }
+    }
+
+    :deep(.el-sub-menu) {
+      .el-sub-menu__title {
+        color: var(--theme-text-regular);
+
+        &:hover {
+          color: var(--theme-primary);
+          background: rgba(0, 102, 204, 0.05);
+        }
+      }
+    }
+
+    :deep(.el-icon) {
+      font-size: 18px;
+      margin-right: 12px;
+      color: inherit;
+    }
+  }
+
+  // GitHub 链接区域
+  &__footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 16px;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    background: var(--theme-card-bg);
+
+    .github-link {
+      @include flex-center;
+      gap: 8px;
+      padding: 12px;
+      color: var(--theme-text-regular);
+      text-decoration: none;
+      border-radius: var(--theme-radius);
+      transition: var(--theme-transition);
+
+      .github-icon {
+        font-size: 20px;
+        transition: var(--theme-transition);
+      }
+
+      .version {
+        font-size: 12px;
+        opacity: 0.7;
+        margin-left: 4px;
+      }
+
+      &:hover {
+        color: var(--theme-primary);
+        background: rgba(0, 102, 204, 0.05);
+        transform: translateY(-1px);
+
+        .github-icon {
+          transform: scale(1.1);
+        }
+
+        .version {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+
+// 自定义滚动条
+.pc-aside__menu {
+  height: calc(100vh - 80px - 69px); // 减去 logo 高度和 footer 高度
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.3);
+    }
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
   }
 }
 </style>
diff --git a/frontend/src/components/Home/DoubanMovie.vue b/frontend/src/components/Home/DoubanMovie.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/frontend/src/components/Home/FolderSelect.vue b/frontend/src/components/Home/FolderSelect.vue
index c204274..0f04188 100644
--- a/frontend/src/components/Home/FolderSelect.vue
+++ b/frontend/src/components/Home/FolderSelect.vue
@@ -1,26 +1,46 @@
 <template>
   <div class="folder-select">
-    <div class="folder-select-header">
-      当前位置：<el-icon style="margin: 0 5px"><Folder /></el-icon
-      >{{ selectedFolder?.path?.map((x: Folder) => x.name).join("/") }}
+    <div class="folder-header">
+      <div class="folder-path">
+        <el-icon><FolderOpened /></el-icon>
+        <template v-if="folderPath.length">
+          <span
+            v-for="(folder, index) in folderPath"
+            :key="folder.cid"
+            class="path-item"
+            @click="handlePathClick(index)"
+          >
+            <span class="folder-name">{{ folder.name }}</span>
+            <el-icon v-if="index < folderPath.length - 1"><ArrowRight /></el-icon>
+          </span>
+        </template>
+        <span v-else class="root-path" @click="handlePathClick(-1)">根目录</span>
+      </div>
     </div>
-    <el-tree
-      ref="treeRef"
-      :data="folders"
-      :props="defaultProps"
-      node-key="cid"
-      :load="loadNode"
-      lazy
-      highlight-current
-      @node-click="handleNodeClick"
-    >
-      <template #default="{ node }">
-        <span class="folder-node">
+
+    <div class="folder-list">
+      <div v-if="!folders.length" class="empty-folder">
+        <el-empty description="暂无文件夹" />
+      </div>
+      <div
+        v-for="folder in folders"
+        :key="folder.cid"
+        class="folder-item"
+        :class="{ 'is-selected': folder.cid === selectedFolder?.cid }"
+        @click="handleFolderClick(folder)"
+      >
+        <div class="folder-info">
           <el-icon><Folder /></el-icon>
-          {{ node.label }}
-        </span>
-      </template>
-    </el-tree>
+          <span class="folder-name">{{ folder.name }}</span>
+        </div>
+        <el-icon class="arrow-icon"><ArrowRight /></el-icon>
+      </div>
+    </div>
+
+    <div v-if="loading" class="loading-overlay">
+      <el-icon class="loading-icon"><Loading /></el-icon>
+      <span>加载中...</span>
+    </div>
   </div>
 </template>
 
@@ -28,12 +48,9 @@
 import { ref, defineProps } from "vue";
 import { cloud115Api } from "@/api/cloud115";
 import { quarkApi } from "@/api/quark";
-import type { TreeInstance } from "element-plus";
-import type { Folder } from "@/types";
-import { type RequestResult } from "@/types/response";
-import { useResourceStore } from "@/stores/resource";
+import type { Folder as FolderType } from "@/types";
+import { Folder, FolderOpened, ArrowRight, Loading } from "@element-plus/icons-vue";
 
-const resourceStore = useResourceStore();
 import { ElMessage } from "element-plus";
 
 const props = defineProps({
@@ -43,96 +60,218 @@ const props = defineProps({
   },
 });
 
-const treeRef = ref<TreeInstance>();
-const folders = ref<Folder[]>([]);
-const selectedFolder = ref<Folder | null>(null);
+const loading = ref(false);
+const folders = ref<FolderType[]>([]);
+const selectedFolder = ref<FolderType | null>(null);
+const folderPath = ref<FolderType[]>([{ name: "根目录", cid: "0" }]);
 const emit = defineEmits<{
   (e: "select", folderId: string): void;
   (e: "close"): void;
 }>();
 
-const defaultProps = {
-  label: "name",
-  children: "children",
-  isLeaf: "leaf",
-};
-
 const cloudTypeApiMap = {
   pan115: cloud115Api,
   quark: quarkApi,
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const loadNode = async (node: any, resolve: (list: Folder[]) => void) => {
+const getList = async (cid: string = "0") => {
   const api = cloudTypeApiMap[props.cloudType as keyof typeof cloudTypeApiMap];
+  loading.value = true;
   try {
-    let res: RequestResult<Folder[]> = { code: 0, data: [] as Folder[], message: "" };
-    resourceStore.setLoadTree(true);
-    if (node.level === 0) {
-      if (api.getFolderList) {
-        // 使用类型保护检查方法是否存在
-        res = await api.getFolderList();
-      }
-    } else {
-      if (api.getFolderList) {
-        // 使用类型保护检查方法是否存在
-        res = await api.getFolderList(node.data.cid);
-      }
-    }
+    const res = await api.getFolderList?.(cid);
     if (res?.code === 0) {
-      resolve(res.data.length ? res.data : []);
+      folders.value = res.data || [];
     } else {
-      throw new Error(res.message);
+      throw new Error(res?.message);
     }
-    resourceStore.setLoadTree(false);
   } catch (error) {
-    ElMessage.error(error instanceof Error ? `${error.message}` : "获取目录失败");
-    // 关闭模态框
+    ElMessage.error(error instanceof Error ? error.message : "获取目录失败");
     emit("close");
-    resourceStore.setLoadTree(false);
-    resolve([]);
+  } finally {
+    loading.value = false;
   }
 };
 
-const handleNodeClick = (data: Folder) => {
-  selectedFolder.value = {
-    ...data,
-    path: data.path ? [...data.path, data] : [data],
-  };
-  emit("select", data.cid);
+const handleFolderClick = async (folder: FolderType) => {
+  selectedFolder.value = folder;
+  folderPath.value = [...folderPath.value, folder];
+  emit("select", folder.cid);
+  await getList(folder.cid);
 };
+
+const handlePathClick = async (index: number) => {
+  if (index < 0) {
+    // 点击根目录
+    folderPath.value = [{ name: "根目录", cid: "0" }];
+    selectedFolder.value = null;
+    await getList("0");
+  } else {
+    // 点击路径中的某个文件夹
+    const targetFolder = folderPath.value[index];
+    folderPath.value = folderPath.value.slice(0, index + 1);
+    selectedFolder.value = targetFolder;
+    await getList(targetFolder.cid);
+    emit("select", targetFolder.cid);
+  }
+};
+
+// 初始化加载
+getList();
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+@import "@/styles/common.scss";
+
 .folder-select {
+  position: relative;
   min-height: 300px;
   max-height: 500px;
+  display: flex;
+  flex-direction: column;
+  padding: 4px;
+
+  .folder-header {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    margin-bottom: 16px;
+    padding: 12px 16px;
+    background: var(--el-fill-color-light);
+    border-radius: var(--theme-radius);
+
+    .folder-path {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--theme-text-regular);
+      font-size: 14px;
+      overflow-x: auto;
+
+      &::-webkit-scrollbar {
+        height: 4px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: rgba(0, 0, 0, 0.1);
+        border-radius: 2px;
+      }
+
+      .el-icon {
+        flex-shrink: 0;
+        font-size: 16px;
+        color: var(--theme-primary);
+      }
+
+      .path-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        white-space: nowrap;
+        cursor: pointer;
+        transition: var(--theme-transition);
+
+        &:hover {
+          color: var(--theme-primary);
+
+          .folder-name {
+            color: var(--theme-primary);
+          }
+        }
+
+        .folder-name {
+          color: var(--theme-text-primary);
+        }
+      }
+
+      .root-path {
+        color: var(--theme-text-secondary);
+        cursor: pointer;
+        transition: var(--theme-transition);
+
+        &:hover {
+          color: var(--theme-primary);
+        }
+      }
+    }
+  }
+}
+
+.folder-list {
+  flex: 1;
   overflow-y: auto;
+  padding: 4px;
+
+  .folder-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    border-radius: var(--theme-radius);
+    cursor: pointer;
+    transition: var(--theme-transition);
+
+    &:hover {
+      background: var(--el-fill-color-light);
+    }
+
+    &.is-selected {
+      background: var(--el-color-primary-light-9);
+      color: var(--theme-primary);
+
+      .el-icon {
+        color: var(--theme-primary);
+      }
+    }
+
+    .folder-info {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 14px;
+
+      .el-icon {
+        font-size: 16px;
+        color: var(--theme-text-regular);
+      }
+
+      .folder-name {
+        color: var(--theme-text-primary);
+      }
+    }
+
+    .arrow-icon {
+      font-size: 16px;
+      color: var(--theme-text-secondary);
+    }
+  }
 }
 
-.folder-node {
-  display: flex;
-  align-items: center;
+.empty-folder {
+  padding: 32px 0;
+}
+
+.loading-overlay {
+  @include flex-center;
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(4px);
   gap: 8px;
-}
-
-.folder-path {
-  color: #999;
-  font-size: 12px;
-  margin-left: 8px;
-}
-
-:deep(.el-tree-node__content) {
-  height: 32px;
-}
-.folder-select-header {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  margin-bottom: 10px;
   font-size: 14px;
-  padding: 5px 10px;
-  border: 1px solid #e5e6e8;
-  border-radius: 8px;
+  color: var(--theme-text-regular);
+
+  .loading-icon {
+    font-size: 20px;
+    animation: rotating 2s linear infinite;
+  }
+}
+
+@keyframes rotating {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 </style>
diff --git a/frontend/src/components/Home/ResourceCard.vue b/frontend/src/components/Home/ResourceCard.vue
index d2d7c22..95a1e44 100644
--- a/frontend/src/components/Home/ResourceCard.vue
+++ b/frontend/src/components/Home/ResourceCard.vue
@@ -1,61 +1,155 @@
 <template>
-  <div class="resource-card-list">
-    <div v-for="group in store.resources" :key="group.id" class="resource-list">
-      <div class="group-header">
-        <el-link :href="`https://t.me/s/${group.id}`" target="_blank" :underline="false">
-          <el-image :src="group.channelInfo.channelLogo" class="channel-logo" fit="cover" lazy />
-          {{ group.channelInfo.name }}</el-link
-        >
-        <el-icon class="header-icon" @click="group.displayList = !group.displayList"
-          ><ArrowDown
-        /></el-icon>
-      </div>
-      <div v-show="group.displayList" class="card-item-list">
-        <div v-for="resource in group.list" :key="resource.messageId" class="card-item-content">
-          <el-card class="card-item">
-            <el-image
-              class="card-item-image"
-              :src="`/tele-images/?url=${encodeURIComponent(resource.image as string)}`"
-              fit="cover"
-              lazy
-              :alt="resource.title"
-              hide-on-click-modal
-              :preview-src-list="[
-                `${location.origin}/tele-images/?url=${encodeURIComponent(resource.image as string)}`,
-              ]"
-            />
-            <el-link :href="resource.cloudLinks[0]" target="_blank" :underline="false"
-              ><div class="item-name">{{ resource.title }}</div></el-link
-            >
-            <div class="item-description" v-html="resource.content"></div>
-            <div v-if="resource.tags && resource.tags.length" class="tags-list">
-              <span>标签：</span>
+  <div class="resource-card">
+    <!-- 详情弹窗 -->
+    <el-dialog
+      v-model="showDetail"
+      :title="currentResource?.title"
+      width="700px"
+      class="resource-detail-dialog"
+      destroy-on-close
+    >
+      <div v-if="currentResource" class="detail-content">
+        <div class="detail-cover">
+          <el-image
+            class="cover-image"
+            :src="`/tele-images/?url=${encodeURIComponent(currentResource.image as string)}`"
+            fit="cover"
+          />
+          <el-tag
+            class="cloud-type"
+            :type="store.tagColor[currentResource.cloudType as keyof TagColor]"
+            effect="dark"
+            round
+          >
+            {{ currentResource.cloudType }}
+          </el-tag>
+        </div>
+        <div class="detail-info">
+          <h3 class="detail-title">
+            <el-link :href="currentResource.cloudLinks[0]" target="_blank" :underline="false">
+              {{ currentResource.title }}
+            </el-link>
+          </h3>
+          <div class="detail-description" v-html="currentResource.content" />
+          <div v-if="currentResource.tags?.length" class="detail-tags">
+            <span class="tags-label">标签：</span>
+            <div class="tags-list">
               <el-tag
-                v-for="item in resource.tags"
-                :key="item"
-                class="resource_tag"
-                @click="searchMovieforTag(item)"
+                v-for="tag in currentResource.tags"
+                :key="tag"
+                class="tag-item"
+                @click="searchMovieforTag(tag)"
               >
-                {{ item }}
+                {{ tag }}
               </el-tag>
             </div>
-            <template #footer>
-              <div class="item-footer">
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="currentResource && handleSave(currentResource)"
+            >转存</el-button
+          >
+        </div>
+      </template>
+    </el-dialog>
+
+    <div v-for="group in store.resources" :key="group.id" class="resource-group">
+      <div class="group-header">
+        <el-link
+          class="group-title"
+          :href="`https://t.me/s/${group.id}`"
+          target="_blank"
+          :underline="false"
+        >
+          <el-image :src="group.channelInfo.channelLogo" class="channel-logo" fit="cover" lazy />
+          <span>{{ group.channelInfo.name }}</span>
+          <span class="item-count">({{ group.list.length }})</span>
+        </el-link>
+
+        <el-tooltip effect="dark" :content="group.displayList ? '收起' : '展开'" placement="top">
+          <el-button class="toggle-btn" type="text" @click="group.displayList = !group.displayList">
+            <el-icon :class="{ 'is-active': group.displayList }">
+              <ArrowDown />
+            </el-icon>
+          </el-button>
+        </el-tooltip>
+      </div>
+
+      <div v-show="group.displayList" class="group-content">
+        <div class="card-grid">
+          <el-card
+            v-for="resource in group.list"
+            :key="resource.messageId"
+            class="resource-card-item"
+            :body-style="{ padding: '0' }"
+          >
+            <div class="card-wrapper">
+              <div class="card-cover">
+                <el-image
+                  class="cover-image"
+                  :src="`/tele-images/?url=${encodeURIComponent(resource.image as string)}`"
+                  fit="cover"
+                  lazy
+                  :alt="resource.title"
+                  @click="showResourceDetail(resource)"
+                />
                 <el-tag
+                  class="cloud-type"
                   :type="store.tagColor[resource.cloudType as keyof TagColor]"
                   effect="dark"
                   round
+                  size="small"
                 >
                   {{ resource.cloudType }}
                 </el-tag>
-                <el-button @click="handleSave(resource)">转存</el-button>
               </div>
-            </template>
+
+              <div class="card-body">
+                <el-link
+                  class="card-title"
+                  :href="resource.cloudLinks[0]"
+                  target="_blank"
+                  :underline="false"
+                >
+                  {{ resource.title }}
+                </el-link>
+
+                <div
+                  class="card-content"
+                  @click="showResourceDetail(resource)"
+                  v-html="resource.content"
+                />
+
+                <div v-if="resource.tags?.length" class="card-tags">
+                  <span class="tags-label">标签：</span>
+                  <div class="tags-list">
+                    <el-tag
+                      v-for="tag in resource.tags"
+                      :key="tag"
+                      class="tag-item"
+                      @click="searchMovieforTag(tag)"
+                    >
+                      {{ tag }}
+                    </el-tag>
+                  </div>
+                </div>
+
+                <div class="card-footer">
+                  <el-button type="primary" @click="handleSave(resource)">转存</el-button>
+                </div>
+              </div>
+            </div>
           </el-card>
         </div>
-      </div>
-      <div v-show="group.displayList" class="load-more">
-        <el-button @click="handleLoadMore(group.id)"> 加载更多 </el-button>
+
+        <div class="load-more">
+          <el-button :loading="group.loading" @click="handleLoadMore(group.id)">
+            <el-icon><Plus /></el-icon>
+            加载更多
+          </el-button>
+        </div>
       </div>
     </div>
   </div>
@@ -63,19 +157,28 @@
 
 <script setup lang="ts">
 import { useResourceStore } from "@/stores/resource";
-import { computed } from "vue";
+import { ref } from "vue";
 import type { ResourceItem, TagColor } from "@/types";
+import { ArrowDown, Plus } from "@element-plus/icons-vue";
 
 const store = useResourceStore();
-
-const location = computed(() => window.location);
+const showDetail = ref(false);
+const currentResource = ref<ResourceItem | null>(null);
 
 const emit = defineEmits(["save", "loadMore", "searchMovieforTag"]);
 
 const handleSave = (resource: ResourceItem) => {
+  if (showDetail.value) {
+    showDetail.value = false;
+  }
   emit("save", resource);
 };
 
+const showResourceDetail = (resource: ResourceItem) => {
+  currentResource.value = resource;
+  showDetail.value = true;
+};
+
 const searchMovieforTag = (tag: string) => {
   emit("searchMovieforTag", tag);
 };
@@ -85,105 +188,391 @@ const handleLoadMore = (channelId: string) => {
 };
 </script>
 
-<style scoped>
-.resource-list {
-  margin-bottom: 30px;
-  padding: 20px;
-  border-radius: 15px;
-  background-color: var(--theme-other_background);
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-.card-item-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 220px);
-  grid-row-gap: 30px;
-  justify-content: space-between;
-  margin-top: 20px;
-  /* grid-column-gap: auto-fill; */
-  /* flex-wrap: wrap; */
-}
-.card-item-content {
-  /* height: 520px; */
-}
-.channel-logo {
-  height: 40px;
-  width: 40px;
-  border-radius: 50%;
-  overflow: hidden;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  margin-right: 10px;
-}
-.load-more {
-  margin-top: 40px;
-  width: 100%;
-  text-align: center;
-}
-.card-item {
-  max-width: 480px;
+<style lang="scss" scoped>
+@import "@/styles/common.scss";
+
+.resource-card {
+  position: relative;
   height: 100%;
-  border-radius: 20px;
-}
-.card-item-image {
-  border-radius: 20px;
-  width: 100%;
-  height: 220px;
-}
-.item-name,
-.item-description {
-  max-width: 100%;
-  margin: 15px 0;
-  -webkit-box-orient: vertical;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  white-space: all;
-}
-.item-description {
-  -webkit-line-clamp: 4;
-  margin-top: 0;
-  height: 100px;
-}
-.item-name {
-  height: 58px;
-  font-size: 18px;
-}
-.tags-list {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-  height: 58px;
-  overflow: hidden;
-}
-.resource_tag {
-  cursor: pointer;
-  margin-right: 10px;
-  margin-bottom: 5px;
-}
-.group-header {
-  height: 50px;
-  line-height: 50px;
-  text-align: left;
-  padding: 0 15px;
-  font-size: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  /* text-align: center; */
-  .el-link {
-    font-size: 22px;
+
+  // 资源组
+  .resource-group {
+    background: var(--theme-card-bg);
+    backdrop-filter: var(--theme-blur);
+    -webkit-backdrop-filter: var(--theme-blur);
+    margin-bottom: 24px;
+    border-radius: var(--theme-radius);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    transition: var(--theme-transition);
+
+    &:last-child {
+      margin-bottom: 100px;
+    }
   }
-  .header-icon {
-    cursor: pointer;
-    width: 50px;
-    height: 50px;
+
+  // 组标题
+  .group-header {
+    @include flex-center;
+    justify-content: space-between;
+    padding: 12px 20px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+
+    .group-title {
+      @include flex-center;
+      gap: 12px;
+      font-size: 16px;
+      color: var(--theme-text-primary);
+      transition: var(--theme-transition);
+
+      .channel-logo {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        overflow: hidden;
+        box-shadow: var(--theme-shadow-sm);
+      }
+
+      .item-count {
+        font-size: 13px;
+        color: var(--theme-text-secondary);
+      }
+
+      &:hover {
+        color: var(--theme-primary);
+        transform: translateY(-1px);
+      }
+    }
+
+    .toggle-btn {
+      width: 32px;
+      height: 32px;
+      padding: 0;
+      color: var(--theme-text-regular);
+      transition: var(--theme-transition);
+
+      .el-icon {
+        font-size: 16px;
+        transition: transform 0.3s ease;
+
+        &.is-active {
+          transform: rotate(180deg);
+        }
+      }
+
+      &:hover {
+        color: var(--theme-primary);
+        transform: translateY(-1px);
+      }
+    }
+  }
+
+  // 组内容
+  .group-content {
+    padding: 20px;
+  }
+
+  // 卡片网格
+  .card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+    gap: 24px;
+    grid-auto-rows: min-content;
+  }
+
+  // 资源卡片
+  .resource-card-item {
+    border-radius: var(--theme-radius);
+    transition: var(--theme-transition);
+    overflow: hidden;
+    max-width: 460px;
+    margin: 0 auto;
+    width: 100%;
+    height: fit-content;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: var(--theme-shadow);
+    }
+
+    .card-wrapper {
+      display: flex;
+      gap: 20px;
+      padding: 16px;
+      height: 100%;
+    }
+
+    .card-cover {
+      position: relative;
+      width: 120px;
+      height: 180px;
+      flex-shrink: 0;
+
+      .cover-image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: var(--theme-radius);
+        cursor: pointer;
+        transition: opacity 0.3s ease;
+
+        &:hover {
+          opacity: 0.85;
+        }
+      }
+
+      .cloud-type {
+        position: absolute;
+        top: 8px;
+        left: 8px;
+        z-index: 1;
+      }
+    }
+
+    .card-body {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+
+      .card-title {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        font-size: 16px;
+        line-height: 1.5;
+        color: var(--theme-text-primary);
+        word-break: break-word;
+        height: 3em;
+        transition: var(--theme-transition);
+
+        &:hover {
+          color: var(--theme-primary);
+        }
+      }
+
+      .card-content {
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: var(--theme-text-regular);
+        cursor: pointer;
+        transition: color 0.3s ease;
+
+        &:hover {
+          color: var(--theme-text-primary);
+        }
+      }
+
+      .card-tags {
+        margin-top: auto;
+        max-height: 88px;
+        overflow: hidden;
+
+        .tags-label {
+          font-size: 13px;
+          color: var(--theme-text-secondary);
+          margin-right: 8px;
+          display: block;
+          margin-bottom: 8px;
+        }
+
+        .tags-list {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 8px;
+          max-height: 72px;
+          overflow: hidden;
+
+          .tag-item {
+            cursor: pointer;
+            transition: var(--theme-transition);
+            margin: 0;
+            height: 24px;
+
+            &:hover {
+              color: var(--theme-primary);
+              border-color: var(--theme-primary);
+              transform: translateY(-1px);
+            }
+          }
+        }
+      }
+    }
+
+    .card-footer {
+      @include flex-center;
+      justify-content: flex-end;
+      margin-top: 8px;
+
+      .el-button {
+        padding: 6px 16px;
+        font-size: 14px;
+        height: 32px;
+        min-width: 80px;
+
+        &:hover {
+          transform: translateY(-1px);
+          box-shadow: var(--theme-shadow-sm);
+        }
+      }
+    }
+  }
+
+  // 加载更多
+  .load-more {
+    @include flex-center;
+    position: relative;
+    padding: 32px 0 8px;
+    margin-top: 16px;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      height: 1px;
+      background: linear-gradient(
+        90deg,
+        transparent,
+        var(--el-border-color-lighter) 20%,
+        var(--el-border-color-lighter) 80%,
+        transparent
+      );
+    }
+
+    .el-button {
+      min-width: 160px;
+      height: 40px;
+      border-radius: 20px;
+      font-size: 14px;
+      color: var(--theme-text-regular);
+      background: var(--theme-card-bg);
+      border: 1px solid var(--el-border-color-lighter);
+      transition: var(--theme-transition);
+      position: relative;
+      overflow: hidden;
+
+      &::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+        transform: translateX(-100%);
+        transition: transform 0.6s ease;
+      }
+
+      &:hover {
+        color: var(--theme-primary);
+        border-color: var(--theme-primary);
+        background: var(--el-color-primary-light-9);
+
+        &::after {
+          transform: translateX(100%);
+        }
+      }
+
+      &.is-loading {
+        color: var(--theme-text-secondary);
+
+        &::after {
+          display: none;
+        }
+      }
+
+      .el-icon {
+        margin-right: 6px;
+        font-size: 16px;
+      }
+    }
+  }
+
+  // 详情弹窗样式
+  .resource-detail-dialog {
+    :deep(.el-dialog__body) {
+      padding: 20px;
+    }
+
+    .detail-content {
+      display: flex;
+      gap: 24px;
+    }
+
+    .detail-cover {
+      position: relative;
+      width: 200px;
+      flex-shrink: 0;
+
+      .cover-image {
+        width: 100%;
+        height: 300px;
+        border-radius: var(--theme-radius);
+        overflow: hidden;
+      }
+
+      .cloud-type {
+        position: absolute;
+        top: 8px;
+        left: 8px;
+        z-index: 1;
+      }
+    }
+
+    .detail-info {
+      flex: 1;
+      min-width: 0;
+
+      .detail-title {
+        font-size: 18px;
+        margin: 0 0 16px;
+        line-height: 1.5;
+        color: var(--theme-text-primary);
+      }
+
+      .detail-description {
+        font-size: 14px;
+        line-height: 1.6;
+        color: var(--theme-text-regular);
+        margin-bottom: 20px;
+      }
+
+      .detail-tags {
+        .tags-label {
+          font-size: 13px;
+          color: var(--theme-text-secondary);
+          margin-right: 8px;
+        }
+
+        .tags-list {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 8px;
+          margin-top: 8px;
+
+          .tag-item {
+            cursor: pointer;
+            transition: var(--theme-transition);
+
+            &:hover {
+              color: var(--theme-primary);
+              border-color: var(--theme-primary);
+              transform: translateY(-1px);
+            }
+          }
+        }
+      }
+    }
+
+    .dialog-footer {
+      display: flex;
+      justify-content: flex-end;
+      padding-top: 16px;
+    }
   }
-}
-.item-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
 }
 </style>
diff --git a/frontend/src/components/Home/ResourceSelect.vue b/frontend/src/components/Home/ResourceSelect.vue
index 36472cd..16bdc65 100644
--- a/frontend/src/components/Home/ResourceSelect.vue
+++ b/frontend/src/components/Home/ResourceSelect.vue
@@ -1,74 +1,178 @@
 <template>
-  <div class="folder-select">
-    <el-tree
-      ref="treeRef"
-      :data="resourceStore.shareInfo.list"
-      :props="defaultProps"
-      :default-checked-keys="resourceStore.shareInfo.list?.map((x) => x.fileId) || []"
-      node-key="fileId"
-      show-checkbox
-      highlight-current
-      @check-change="handleCheckChange"
-    >
-      <template #default="{ node }">
-        <span class="folder-node">
-          <el-icon><Folder /></el-icon>
-          {{ node.data.fileName }}
-          <span v-if="node.data.fileSize" style="font-weight: bold"
-            >({{ formattedFileSize(node.data.fileSize) }})</span
-          >
-        </span>
-      </template>
-    </el-tree>
+  <div class="resource-select">
+    <div class="select-header">
+      <div class="select-info">
+        <el-icon><Document /></el-icon>
+        <span>已选择 {{ selectedCount }} 个文件</span>
+        <span v-if="totalSize" class="total-size">({{ formattedFileSize(totalSize) }})</span>
+      </div>
+      <div class="header-actions">
+        <el-button type="text" @click="handleSelectAll(!hasSelectedAll)">
+          {{ hasSelectedAll ? "取消全选" : "全选" }}
+        </el-button>
+      </div>
+    </div>
+
+    <div class="file-list">
+      <div
+        v-for="file in resourceStore.shareInfo.list"
+        :key="file.fileId"
+        class="file-item"
+        :class="{ 'is-checked': isChecked(file.fileId) }"
+        @click="toggleSelect(file)"
+      >
+        <el-checkbox :model-value="isChecked(file.fileId)" @click.stop>
+          <div class="file-info">
+            <el-icon><Document /></el-icon>
+            <span class="file-name">{{ file.fileName }}</span>
+            <span v-if="file.fileSize" class="file-size">
+              {{ formattedFileSize(file.fileSize) }}
+            </span>
+          </div>
+        </el-checkbox>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useResourceStore } from "@/stores/resource";
 import { formattedFileSize } from "@/utils/index";
+import { computed } from "vue";
 import type { ShareInfo } from "@/types";
+import { Document } from "@element-plus/icons-vue";
 
 const resourceStore = useResourceStore();
 
-const defaultProps = {
-  isLeaf: "leaf",
+const selectedCount = computed(
+  () => resourceStore.resourceSelect.filter((x) => x.isChecked).length
+);
+
+const totalSize = computed(() =>
+  resourceStore.resourceSelect
+    .filter((x) => x.isChecked)
+    .reduce((sum, item) => sum + (item.fileSize || 0), 0)
+);
+
+const totalFiles = computed(() => resourceStore.shareInfo.list.length);
+
+const hasSelectedAll = computed(() => selectedCount.value === totalFiles.value);
+
+const isChecked = (fileId: string) => {
+  return resourceStore.resourceSelect.find((x) => x.fileId === fileId)?.isChecked;
 };
 
-const handleCheckChange = (data: ShareInfo) => {
+const toggleSelect = (file: ShareInfo) => {
   let resourceSelect = [...resourceStore.resourceSelect];
-  resourceSelect.forEach((x) => {
-    if (x.fileId === data.fileId) x.isChecked = !x.isChecked;
-  });
+  const item = resourceSelect.find((x) => x.fileId === file.fileId);
+  if (item) {
+    item.isChecked = !item.isChecked;
+    resourceStore.setSelectedResource(resourceSelect);
+  }
+};
+
+const handleSelectAll = (checked: boolean) => {
+  const resourceSelect = resourceStore.shareInfo.list.map((file) => ({
+    fileId: file.fileId,
+    fileName: file.fileName,
+    fileSize: file.fileSize,
+    isChecked: checked,
+  }));
   resourceStore.setSelectedResource(resourceSelect);
 };
 </script>
 
-<style scoped>
-.folder-select {
-  min-height: 300px;
+<style lang="scss" scoped>
+@import "@/styles/responsive.scss";
+
+.resource-select {
+  min-height: 200px;
   max-height: 500px;
-  overflow-y: auto;
-}
-
-.folder-node {
   display: flex;
-  align-items: center;
-  gap: 8px;
-}
+  flex-direction: column;
+  gap: 16px;
 
-.folder-path {
-  color: #999;
-  font-size: 12px;
-  margin-left: 8px;
-}
-.folder-select-header {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  margin-bottom: 10px;
-  font-size: 14px;
-  padding: 5px 10px;
-  border: 1px solid #e5e6e8;
-  border-radius: 8px;
+  .select-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    background: var(--el-fill-color-light);
+    border-radius: var(--theme-radius);
+
+    .select-info {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--theme-text-regular);
+      font-size: 14px;
+
+      .el-icon {
+        font-size: 16px;
+      }
+
+      .total-size {
+        color: var(--theme-text-secondary);
+      }
+    }
+
+    .header-actions {
+      display: flex;
+      gap: 16px;
+    }
+
+    .el-button {
+      font-size: 13px;
+      padding: 4px 8px;
+
+      &:not(:disabled):hover {
+        color: var(--theme-primary);
+      }
+    }
+  }
+
+  .file-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 4px;
+
+    .file-item {
+      padding: 12px 16px;
+      border-radius: var(--theme-radius);
+      cursor: pointer;
+      transition: var(--theme-transition);
+
+      &:hover {
+        background: var(--el-fill-color-light);
+      }
+
+      &.is-checked {
+        background: var(--el-color-primary-light-9);
+      }
+
+      .file-info {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: var(--theme-text-primary);
+        font-size: 14px;
+
+        .el-icon {
+          font-size: 16px;
+          color: var(--theme-text-regular);
+        }
+
+        .file-name {
+          flex: 1;
+          @include text-ellipsis;
+        }
+
+        .file-size {
+          color: var(--theme-text-secondary);
+          font-size: 13px;
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/frontend/src/components/Home/ResourceTable.vue b/frontend/src/components/Home/ResourceTable.vue
index e8c218e..0d5c731 100644
--- a/frontend/src/components/Home/ResourceTable.vue
+++ b/frontend/src/components/Home/ResourceTable.vue
@@ -61,14 +61,6 @@
               <span v-else>无</span>
             </template>
           </el-table-column>
-
-          <!-- <el-table-column label="地址">
-            <template #default="{ row }">
-              <el-link :href="row.cloudLinks[0]" target="_blank">
-                {{ row.cloudLinks[0] }}
-              </el-link>
-            </template>
-          </el-table-column> -->
           <el-table-column label="云盘类型" width="120">
             <template #default="{ row }">
               <el-tag :type="store.tagColor[row.cloudType as keyof TagColor]" effect="dark" round>
@@ -195,4 +187,10 @@ const searchMovieforTag = (tag: string) => {
   justify-content: center;
   padding: 16px 0;
 }
+
+.resource-table {
+  position: relative;
+  height: auto;
+  overflow: visible;
+}
 </style>
diff --git a/frontend/src/components/SearchBar.vue b/frontend/src/components/SearchBar.vue
index 595dafe..855fd1f 100644
--- a/frontend/src/components/SearchBar.vue
+++ b/frontend/src/components/SearchBar.vue
@@ -1,130 +1,199 @@
 <template>
-  <div class="search-bar">
-    <div class="search-bar__input">
-      <input
+  <div class="pc-search">
+    <!-- 搜索区域 -->
+    <div class="pc-search__input">
+      <el-input
         v-model="keyword"
-        type="text"
         placeholder="请输入搜索关键词或输入链接直接解析"
-        class="input-with-select"
+        clearable
         @keyup.enter="handleSearch"
-      />
-      <el-icon class="search_icon" size="28px" @click="handleSearch"><Search /></el-icon class="search_icon">
-    </div>
-    <div class="logout" alt="退出登录" @click="logout">
-      <el-tooltip
-        class="box-item"
-        effect="dark"
-        content="退出登录"
-        placement="bottom"
       >
-      <el-icon><SwitchButton class="logout-icon" /></el-icon>
+        <template #prefix>
+          <el-icon><Search /></el-icon>
+        </template>
+        <template #suffix>
+          <el-icon v-if="keyword" class="search-icon" @click="handleSearch">
+            <ArrowRight />
+          </el-icon>
+        </template>
+      </el-input>
+    </div>
+
+    <!-- 用户操作区 -->
+    <div class="pc-search__actions">
+      <el-tooltip effect="dark" content="退出登录" placement="bottom">
+        <el-button class="logout-btn" type="text" @click="handleLogout">
+          <el-icon><SwitchButton /></el-icon>
+        </el-button>
       </el-tooltip>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { computed, ref,watch } from "vue";
-  import { useResourceStore } from "@/stores/resource";
-  import { useRoute,useRouter } from "vue-router";
-  const route = useRoute();
-  const router = useRouter();
-  const resourcStore = useResourceStore();
-  const keyword = ref("");
-  const routeKeyword = computed(() => route.query.keyword as string);
-  const logout = () => {
-    localStorage.removeItem("token");
-    router.push({ path: "/login" });
-  };
-  const handleSearch = async () => {
-    // 如果搜索内容是一个https的链接，则尝试解析链接
-    if (keyword.value.startsWith("http")) {
-      resourcStore.parsingCloudLink(keyword.value);
-      return;
-    }
-    if (!keyword.value.trim()) {
-      return;
-    }
-    await resourcStore.searchResources(keyword.value);
-    if(route.path !== '/'){
-      router.push({ path: '/' });
-    }
-  };
+import { ref, computed, watch } from "vue";
+import { useResourceStore } from "@/stores/resource";
+import { useRoute, useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+import { Search, ArrowRight, SwitchButton } from "@element-plus/icons-vue";
+import { STORAGE_KEYS } from "@/constants/storage";
 
-  watch(() => routeKeyword.value, () => {
-    if(routeKeyword.value){
-      keyword.value = routeKeyword.value;
+// 路由相关
+const route = useRoute();
+const router = useRouter();
+const resourcStore = useResourceStore();
+
+// 响应式数据
+const keyword = ref("");
+const routeKeyword = computed(() => route.query.keyword as string);
+
+// 退出登录
+const handleLogout = () => {
+  localStorage.removeItem(STORAGE_KEYS.TOKEN);
+  router.push("/login");
+  ElMessage.success("已退出登录");
+};
+
+// 搜索处理
+const handleSearch = async () => {
+  const searchText = keyword.value.trim();
+  if (!searchText) {
+    ElMessage.warning("请输入搜索内容");
+    return;
+  }
+
+  // 链接解析处理
+  if (searchText.startsWith("http")) {
+    await resourcStore.parsingCloudLink(searchText);
+    return;
+  }
+
+  // 关键词搜索
+  await resourcStore.searchResources(searchText);
+  if (route.path !== "/resource") {
+    router.push("/resource");
+  }
+};
+
+// 监听路由参数变化
+watch(
+  () => routeKeyword.value,
+  (newKeyword) => {
+    if (newKeyword) {
+      keyword.value = newKeyword;
       handleSearch();
     } else {
-      keyword.value = ''
+      keyword.value = "";
     }
-  });
-
-
+  }
+);
 </script>
 
-<style scoped lang="scss">
-  .search-bar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    .logout{
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      font-size: 28px;
-      margin-left: 15px;
-      cursor: pointer;
-    }
-    .search-bar__input {
-      width: 100%;
-      margin: 15px auto;
-      position: relative;
-      background-color: var(--theme-other_background);
-      box-shadow: 0 4px 10px rgba(225, 225, 225, 0.3);
-      height: 40px;
-      border-radius: 40px;
-      display: flex;
-      align-items: center;
-    }
-    .input-with-select {
-      width: 100%;
-      height: 100%;
-      background: none;
-      padding-left: 24px;
-      box-sizing: border-box;
-      border-radius: 40px;
-      line-height: 100%;
-      border: unset;
-      font-size: 18px;
-    }
-    .search_icon {
-      width: 64px;
-      height: 64px;
-      cursor: pointer;
-    }
-    .search-bar_tips{
-      width: 100%;
-      text-align: center;
-      margin: 20px auto;
+<style lang="scss" scoped>
+@import "@/styles/common.scss";
+
+.pc-search {
+  @include flex-center;
+  justify-content: space-between;
+  gap: 16px;
+  width: 100%;
+
+  // 搜索输入区域
+  &__input {
+    flex: 1;
+    min-width: 0; // 防止溢出
+
+    :deep(.el-input) {
+      --el-input-height: 44px;
+
+      .el-input__wrapper {
+        @include glass-effect;
+        padding: 0 16px;
+        border-radius: var(--theme-radius);
+        box-shadow:
+          inset 0 0 0 1px rgba(255, 255, 255, 0.1),
+          0 2px 4px rgba(0, 0, 0, 0.05),
+          0 1px 2px rgba(0, 0, 0, 0.1);
+        border: 1px solid rgba(0, 0, 0, 0.08);
+        transition: var(--theme-transition);
+        background: rgba(255, 255, 255, 0.9);
+
+        &:hover {
+          border-color: var(--theme-primary);
+          box-shadow:
+            inset 0 0 0 1px var(--theme-primary),
+            0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        &.is-focus {
+          border-color: var(--theme-primary);
+          box-shadow:
+            inset 0 0 0 1px var(--theme-primary),
+            0 4px 8px rgba(0, 0, 0, 0.1),
+            0 0 0 3px rgba(0, 102, 204, 0.1);
+          background: #fff;
+        }
+      }
+
+      .el-input__inner {
+        font-size: 15px;
+        color: var(--theme-text-primary);
+        height: 42px;
+        line-height: 42px;
+
+        &::placeholder {
+          color: var(--theme-text-secondary);
+        }
+      }
+
+      .el-input__prefix-inner {
+        .el-icon {
+          font-size: 18px;
+          color: var(--theme-text-secondary);
+          margin-right: 8px;
+        }
+      }
+
+      .search-icon {
+        font-size: 18px;
+        cursor: pointer;
+        color: var(--theme-primary);
+        transition: var(--theme-transition);
+        margin-left: 8px;
+
+        &:hover {
+          transform: scale(1.1);
+        }
+      }
     }
   }
 
-  .search-new {
-    margin-top: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-  }
-  .switch-source {
-    margin-left: 20px;
-  }
-  .switch-source .label {
-    margin-left: 5px;
-  }
-  .display-style {
-    margin-left: 20px;
+  // 操作区域
+  &__actions {
+    .logout-btn {
+      @include glass-effect;
+      width: 44px;
+      height: 44px;
+      padding: 0;
+      border-radius: var(--theme-radius);
+      transition: var(--theme-transition);
+
+      .el-icon {
+        font-size: 20px;
+        color: var(--theme-text-regular);
+        transition: var(--theme-transition);
+      }
+
+      &:hover {
+        background: var(--theme-primary);
+        transform: translateY(-2px);
+        box-shadow: var(--theme-shadow-sm);
+
+        .el-icon {
+          color: #fff;
+        }
+      }
+    }
   }
+}
 </style>
diff --git a/frontend/src/constants/storage.ts b/frontend/src/constants/storage.ts
new file mode 100644
index 0000000..5443aba
--- /dev/null
+++ b/frontend/src/constants/storage.ts
@@ -0,0 +1,5 @@
+export const STORAGE_KEYS = {
+  USERNAME: "saved_username",
+  PASSWORD: "saved_password",
+  TOKEN: "token",
+} as const;
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index be7e8f1..54f6ad2 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -9,6 +9,7 @@ import { Lazyload } from "vant";
 import "vant/es/notify/style";
 import "vant/es/dialog/style";
 import "@/styles/responsive.scss";
+import "@/styles/common.scss";
 
 import router from "./router/index";
 
diff --git a/frontend/src/router/pc-routes.ts b/frontend/src/router/pc-routes.ts
index 0364847..5e2140a 100644
--- a/frontend/src/router/pc-routes.ts
+++ b/frontend/src/router/pc-routes.ts
@@ -26,7 +26,7 @@ const routes: RouteRecordRaw[] = [
   {
     path: "/login",
     name: "login",
-    component: () => import("@/views/Login.vue"),
+    component: () => import("@/views/pc/Login.vue"),
   },
 ];
 
diff --git a/frontend/src/stores/userSetting.ts b/frontend/src/stores/userSetting.ts
index 21b84b5..a91119c 100644
--- a/frontend/src/stores/userSetting.ts
+++ b/frontend/src/stores/userSetting.ts
@@ -1,5 +1,9 @@
 import { defineStore } from "pinia";
-import type { UserSettingStore } from "@/types/user";
+import type {
+  UserSettingStore,
+  GlobalSettingAttributes,
+  UserSettingAttributes,
+} from "@/types/user";
 import { settingApi } from "@/api/setting";
 import { ElMessage } from "element-plus";
 
@@ -21,19 +25,20 @@ export const useUserSettingStore = defineStore("user", {
         this.userSettings = data.userSettings;
       }
     },
-    async saveSettings() {
-      if (this.userSettings) {
-        const setting: UserSettingStore = {
-          userSettings: this.userSettings,
-        };
-        if (this.globalSetting) setting.globalSetting = this.globalSetting;
-        const res = await settingApi.saveSetting(setting);
-        if (res) {
-          this.getSettings();
-          ElMessage.success("保存成功");
-        }
+
+    async saveSettings(settings: {
+      globalSetting?: GlobalSettingAttributes | null;
+      userSettings: UserSettingAttributes;
+    }) {
+      try {
+        await settingApi.saveSetting(settings);
+        await this.getSettings();
+      } catch (error) {
+        console.log(error);
+        throw error;
       }
     },
+
     setDisplayStyle(style: "table" | "card") {
       this.displayStyle = style;
       ElMessage.success(`切换成功，当前为${style}模式`);
diff --git a/frontend/src/styles/common.scss b/frontend/src/styles/common.scss
new file mode 100644
index 0000000..ca962e1
--- /dev/null
+++ b/frontend/src/styles/common.scss
@@ -0,0 +1,62 @@
+// 颜色系统
+:root {
+  // 主题色
+  --theme-primary: #0066cc;
+  --theme-primary-hover: #0256ac;
+  --theme-success: #28cd41;
+  --theme-warning: #ff9f0a;
+  --theme-error: #ff3b30;
+
+  // 中性色
+  --theme-bg: #f5f7fa;
+  --theme-card-bg: rgba(255, 255, 255, 0.8);
+  --theme-text-primary: #000000;
+  --theme-text-regular: #424242;
+  --theme-text-secondary: #6e6e6e;
+
+  // 特效
+  --theme-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
+  --theme-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  --theme-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
+
+  // 圆角
+  --theme-radius-sm: 8px;
+  --theme-radius: 12px;
+  --theme-radius-lg: 16px;
+
+  // 模糊效果
+  --theme-blur: blur(12px);
+
+  // 动画
+  --theme-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+// Mixins
+@mixin glass-effect {
+  background: var(--theme-card-bg);
+  backdrop-filter: var(--theme-blur);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin text-overflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// 通用动画
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index a9ef477..9337ccb 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -15,6 +15,7 @@ export interface ResourceItem {
 export interface Resource {
   list: ResourceItem[];
   displayList?: boolean;
+  loading?: boolean;
   channelInfo: {
     channelId: string;
     name: string;
diff --git a/frontend/src/types/user.ts b/frontend/src/types/user.ts
index 0e84638..4839408 100644
--- a/frontend/src/types/user.ts
+++ b/frontend/src/types/user.ts
@@ -1,6 +1,18 @@
-import { GlobalSettingAttributes, UserSettingAttributes } from "@/types";
-export interface UserSettingStore {
-  globalSetting?: GlobalSettingAttributes | null;
-  userSettings: UserSettingAttributes;
-  displayStyle?: "table" | "card";
+export interface GlobalSettingAttributes {
+  httpProxyHost: string;
+  httpProxyPort: string | number;
+  isProxyEnabled: boolean;
+  AdminUserCode: number;
+  CommonUserCode: number;
+}
+
+export interface UserSettingAttributes {
+  cloud115Cookie: string;
+  quarkCookie: string;
+}
+
+export interface UserSettingStore {
+  globalSetting: GlobalSettingAttributes | null;
+  userSettings: UserSettingAttributes;
+  displayStyle: "table" | "card";
 }
diff --git a/frontend/src/utils/request.ts b/frontend/src/utils/request.ts
index e1d5e69..d8ce960 100644
--- a/frontend/src/utils/request.ts
+++ b/frontend/src/utils/request.ts
@@ -3,6 +3,7 @@ import { ElMessage } from "element-plus";
 import { isMobileDevice } from "@/utils/index";
 import { showNotify } from "vant";
 import { RequestResult } from "../types/response";
+import { STORAGE_KEYS } from "@/constants/storage";
 
 const errorMessage = (message: string) => {
   if (isMobileDevice()) {
@@ -31,7 +32,7 @@ function isLoginAndRedirect(url: string) {
 
 axiosInstance.interceptors.request.use(
   (config) => {
-    const token = localStorage.getItem("token");
+    const token = localStorage.getItem(STORAGE_KEYS.TOKEN);
     if (token) {
       config.headers.Authorization = `Bearer ${token}`;
     } else if (!isLoginAndRedirect(config.url || "")) {
@@ -53,7 +54,7 @@ axiosInstance.interceptors.response.use(
   (error) => {
     if (error.response.status === 401) {
       errorMessage("登录过期，请重新登录");
-      localStorage.removeItem("token");
+      localStorage.removeItem(STORAGE_KEYS.TOKEN);
       window.location.href = "/login";
       return Promise.reject(new Error("登录过期，请重新登录"));
     }
diff --git a/frontend/src/views/Douban.vue b/frontend/src/views/Douban.vue
index 4dcbba2..0882224 100644
--- a/frontend/src/views/Douban.vue
+++ b/frontend/src/views/Douban.vue
@@ -1,29 +1,31 @@
 <template>
-  <div class="movie-wall">
-    <div v-for="movie in doubanStore.hotList" :key="movie.id" class="movie-item">
-      <div class="movie-poster">
-        <el-image
-          class="movie-poster-img"
-          :src="movie.cover"
-          fit="cover"
-          lazy
-          :alt="movie.title"
-          hide-on-click-modal
-          :preview-src-list="[movie.cover]"
-        />
-        <div class="movie-rate">
-          {{ movie.rate }}
-        </div>
-        <div class="movie-poster-hover" @click="searchMovie(movie.title)">
-          <div class="movie-search">
-            <el-icon class="search_icon" size="28px"><Search /></el-icon>
+  <div class="douban-page">
+    <div class="movie-wall">
+      <div v-for="movie in doubanStore.hotList" :key="movie.id" class="movie-item">
+        <div class="movie-poster">
+          <el-image
+            class="movie-poster-img"
+            :src="movie.cover"
+            fit="cover"
+            lazy
+            :alt="movie.title"
+            hide-on-click-modal
+            :preview-src-list="[movie.cover]"
+          />
+          <div class="movie-rate">
+            {{ movie.rate }}
+          </div>
+          <div class="movie-poster-hover" @click="searchMovie(movie.title)">
+            <div class="movie-search">
+              <el-icon class="search_icon" size="28px"><Search /></el-icon>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="movie-info">
-        <el-link :href="movie.url" target="_blank" :underline="false" class="movie-title">{{
-          movie.title
-        }}</el-link>
+        <div class="movie-info">
+          <el-link :href="movie.url" target="_blank" :underline="false" class="movie-title">{{
+            movie.title
+          }}</el-link>
+        </div>
       </div>
     </div>
   </div>
@@ -59,89 +61,136 @@ const searchMovie = (title: string) => {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+@import "@/styles/common.scss";
+@import "@/styles/responsive.scss";
+
+.douban-page {
+  height: calc(100vh - 180px);
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.3);
+    }
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}
+
 .movie-wall {
   display: grid;
   grid-template-columns: repeat(auto-fill, 200px);
-  grid-row-gap: 15px;
   justify-content: space-between;
+  gap: 20px;
+  padding: 4px;
 }
 
 .movie-item {
-  width: 200px; /* 设置固定宽度 */
-  overflow: hidden; /* 确保内容不会超出卡片 */
-  text-align: center;
-  background-color: #f9f9f9; /* 可选：设置背景颜色 */
-  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12); /* 可选：设置阴影效果 */
-  border-radius: 15px; /* 设置图片圆角 */
+  width: 200px;
+  background: var(--theme-card-bg);
+  border-radius: var(--theme-radius);
+  box-shadow: var(--theme-shadow);
   box-sizing: border-box;
-  padding-bottom: 0px;
-  position: relative;
-  padding: 15px;
-  padding-bottom: 0;
+  padding: 12px;
+  transition: var(--theme-transition);
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--theme-shadow-lg);
+  }
 }
 
 .movie-poster-img {
   width: 100%;
   height: 220px;
-  object-fit: cover; /* 确保图片使用cover模式 */
-  border-radius: 15px; /* 设置图片圆角 */
+  object-fit: cover;
+  border-radius: var(--theme-radius);
   overflow: hidden;
 }
+
 .movie-info {
-  /* margin-top: 8px; */
+  padding: 12px 0 4px;
+  text-align: center;
+  width: 100%;
+
   .movie-title {
+    display: block;
     font-size: 16px;
     font-weight: bold;
-    padding: 10px 0;
+    color: var(--theme-text-primary);
+    transition: var(--theme-transition);
+    @include text-ellipsis;
+    max-width: 100%;
+    line-height: 1.2;
+
+    &:hover {
+      color: var(--theme-primary);
+    }
   }
 }
+
 .movie-poster {
   width: 100%;
   height: 220px;
   position: relative;
   overflow: hidden;
-  border-radius: 15px;
+  border-radius: var(--theme-radius);
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  overflow: hidden;
 }
 
 .movie-poster-hover {
-  opacity: 0; /* 默认情况下隐藏 */
-  transition: opacity 0.3s ease; /* 添加过渡效果 */
+  opacity: 0;
+  transition: opacity 0.3s ease;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
-  /* height: 100%; */
   background-color: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  backdrop-filter: blur(2px);
 }
 
 .movie-poster:hover .movie-poster-hover {
-  opacity: 1; /* 鼠标移入时显示 */
+  opacity: 1;
 }
 
 .movie-rate {
   position: absolute;
   top: 10px;
   right: 10px;
-  background-color: rgba(88, 83, 250, 0.8);
+  background: var(--theme-primary);
   color: white;
   padding: 0px 8px;
-  border-radius: 5px;
+  border-radius: var(--theme-radius-sm);
   font-size: 14px;
 }
+
 .movie-search {
   color: white;
-  border-radius: 5px;
+  border-radius: var(--theme-radius);
   font-size: 14px;
   cursor: pointer;
+  transition: transform 0.2s ease;
+
+  &:hover {
+    transform: scale(1.1);
+  }
 }
 </style>
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index fb89ef4..b379eed 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,93 +1,196 @@
 <template>
-  <div v-loading="resourcStore.loading" class="home" element-loading-background="rgba(0,0,0,0.6)">
-    <el-container>
-      <el-aside width="200px"><aside-menu /></el-aside>
-      <el-container class="home-main">
-        <el-header :class="{ 'home-header': true, 'search-bar-active': !store.scrollTop }">
+  <div class="pc-home" :class="{ 'is-loading': resourcStore.loading }">
+    <!-- 主布局容器 -->
+    <el-container class="pc-home__container">
+      <!-- 侧边栏 -->
+      <el-aside width="220px" class="pc-home__aside">
+        <aside-menu />
+      </el-aside>
+
+      <!-- 主内容区 -->
+      <el-container class="pc-home__main">
+        <!-- 顶部搜索栏 -->
+        <el-header class="pc-home__header" :class="{ 'is-scrolled': !store.scrollTop }">
           <search-bar />
         </el-header>
-        <el-main class="home-main-main">
-          <router-view />
+
+        <!-- 内容区域 -->
+        <el-main class="pc-home__content">
+          <div class="content-wrapper">
+            <router-view v-slot="{ Component }">
+              <transition name="fade" mode="out-in">
+                <component :is="Component" />
+              </transition>
+            </router-view>
+          </div>
         </el-main>
-        <!-- <el-aside class="home-aside"></el-aside> -->
       </el-container>
     </el-container>
-    <el-backtop :bottom="100">
-      <div
-        style="
-          height: 100%;
-          width: 100%;
-          background-color: var(--el-bg-color-overlay);
-          box-shadow: var(--el-box-shadow-lighter);
-          text-align: center;
-          line-height: 40px;
-          color: #1989fa;
-        "
-      >
-        UP
-      </div>
-    </el-backtop>
+
+    <!-- 全局加载 -->
+    <div v-if="resourcStore.loading" class="pc-home__loading">
+      <el-icon class="is-loading"><Loading /></el-icon>
+      <span class="loading-text">加载中...</span>
+    </div>
   </div>
-  <!-- <login v-else /> -->
 </template>
 
 <script setup lang="ts">
+import { onMounted, onUnmounted } from "vue";
 import { useResourceStore } from "@/stores/resource";
 import { useStore } from "@/stores/index";
 import { useUserSettingStore } from "@/stores/userSetting";
-import { onUnmounted } from "vue";
+import { throttle } from "@/utils/index";
+import { Loading } from "@element-plus/icons-vue";
+import "element-plus/es/components/loading/style/css";
 import AsideMenu from "@/components/AsideMenu.vue";
 import SearchBar from "@/components/SearchBar.vue";
 
+// 状态管理
 const resourcStore = useResourceStore();
 const store = useStore();
 const settingStore = useUserSettingStore();
-settingStore.getSettings();
-const handleScroll = () => {
-  const scrollTop = window.scrollY;
-  if (scrollTop > 50) {
-    store.scrollTop && store.setScrollTop(false);
-  } else {
-    !store.scrollTop && store.setScrollTop(true);
-  }
-};
-window.addEventListener("scroll", handleScroll);
+
+// 初始化设置
+onMounted(() => {
+  settingStore.getSettings();
+  window.addEventListener("scroll", handleScroll);
+});
+
 onUnmounted(() => {
   window.removeEventListener("scroll", handleScroll);
 });
+
+// 滚动处理
+const handleScroll = throttle(() => {
+  const scrollTop = window.scrollY;
+  store.setScrollTop(scrollTop <= 50);
+}, 100);
 </script>
 
-<style scoped lang="scss">
-.home {
-  // padding: 20px;
-  min-width: 1000px;
+<style lang="scss" scoped>
+@import "@/styles/common.scss";
+
+.pc-home {
+  position: relative;
   height: 100vh;
-  overflow: hidden;
-  margin: 0 auto;
+  background: var(--theme-bg);
+  color: var(--theme-text-primary);
+
+  // 主容器
+  &__container {
+    height: 100%;
+  }
+
+  // 侧边栏
+  &__aside {
+    background: var(--theme-card-bg);
+    backdrop-filter: var(--theme-blur);
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    transition: var(--theme-transition);
+
+    &:hover {
+      box-shadow: var(--theme-shadow);
+    }
+  }
+
+  // 主内容区
+  &__main {
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    height: 100%;
+  }
+
+  // 顶部搜索栏
+  &__header {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    height: auto;
+    padding: 16px;
+    background: var(--theme-card-bg);
+    backdrop-filter: var(--theme-blur);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    transition: var(--theme-transition);
+
+    &.is-scrolled {
+      padding: 12px;
+      box-shadow: var(--theme-shadow-sm);
+    }
+  }
+
+  // 内容区域
+  &__content {
+    flex: 1;
+    padding: 20px;
+    height: 0;
+
+    .content-wrapper {
+      height: 100%;
+    }
+  }
+
+  // 加载状态
+  &__loading {
+    @include flex-center;
+    position: fixed;
+    inset: 0;
+    z-index: 2000;
+    flex-direction: column;
+    gap: 16px;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(18px);
+    -webkit-backdrop-filter: blur(18px);
+    animation: fadeIn 0.3s ease;
+
+    .loading-text {
+      color: var(--theme-text-primary);
+      font-size: 14px;
+      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+    }
+
+    .is-loading {
+      font-size: 24px;
+      color: var(--theme-primary);
+      animation: rotating 2s linear infinite;
+      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1));
+    }
+  }
 }
-.home-header {
-  height: auto;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  // padding: 0;
-  background-color: rgba(231, 235, 239, 0.7) !important;
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  border-radius: 0 0 5px 5px;
-  // background-color: var(--theme-other_background);
-  // box-shadow: 0 4px 10px rgba(225, 225, 225, 0.3);
-  // border-radius: 20px;
+
+// 加载动画
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    backdrop-filter: blur(0);
+  }
+  to {
+    opacity: 1;
+    backdrop-filter: blur(8px);
+  }
 }
-.home-main {
-  width: 1000px;
-  height: 100vh;
-  overflow: auto;
+
+// 路由过渡动画
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
 }
-.home-main-main {
-  padding: 10px 15px;
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
 }
-.home-aside {
-  width: 300px;
+
+@keyframes rotating {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 </style>
diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
deleted file mode 100644
index 7f21b7e..0000000
--- a/frontend/src/views/Login.vue
+++ /dev/null
@@ -1,260 +0,0 @@
-<template>
-  <div class="login-register">
-    <div class="login-bg"></div>
-    <el-card class="card">
-      <!-- 登录与注册切换 -->
-      <el-tabs v-model="activeTab" class="tabs">
-        <el-tab-pane label="登录" name="login"></el-tab-pane>
-        <el-tab-pane label="注册" name="register"> </el-tab-pane>
-      </el-tabs>
-
-      <!-- 登录表单 -->
-      <el-form
-        v-if="activeTab === 'login'"
-        ref="loginFormRef"
-        :model="loginForm"
-        :rules="loginRules"
-        label-position="top"
-      >
-        <el-form-item prop="username" class="form-item">
-          <el-input
-            v-model="loginForm.username"
-            placeholder="用户名"
-            name="username"
-            autocomplete="on"
-            class="form-input"
-          />
-        </el-form-item>
-        <el-form-item prop="password" class="form-item">
-          <el-input
-            v-model="loginForm.password"
-            type="password"
-            placeholder="密码"
-            class="form-input"
-            show-password="true"
-            autocomplete="on"
-            name="password"
-            @keyup.enter="handleLogin"
-          />
-        </el-form-item>
-
-        <el-button type="primary" class="form-submit" @click="loginFormRefValidate">
-          登录
-        </el-button>
-      </el-form>
-
-      <!-- 注册表单 -->
-      <el-form
-        v-if="activeTab === 'register'"
-        ref="registerFormRef"
-        :model="registerForm"
-        :rules="registerRules"
-        label-position="top"
-        ><el-form-item prop="username" class="form-item">
-          <el-input v-model="registerForm.username" placeholder="用户名" class="form-input" />
-        </el-form-item>
-        <el-form-item prop="password" class="form-item">
-          <el-input
-            v-model="registerForm.password"
-            type="password"
-            placeholder="密码"
-            class="form-input"
-          />
-        </el-form-item>
-        <el-form-item prop="password" class="form-item">
-          <el-input
-            v-model="password2"
-            type="password"
-            placeholder="再次输入密码"
-            class="form-input"
-          />
-        </el-form-item>
-        <el-form-item prop="registerCode" class="form-item">
-          <el-input v-model="registerForm.registerCode" placeholder="注册码" class="form-input" />
-        </el-form-item>
-
-        <el-button type="primary" class="form-submit" @click="handleRegister"> 注册 </el-button>
-      </el-form>
-    </el-card>
-  </div>
-</template>
-
-<script setup type="ts">
-import { ref } from "vue";
-import { userApi } from "@/api/user";
-import router from "@/router";
-import { ElMessage } from "element-plus";
-
-const activeTab = ref("login"); // 默认显示登录表单
-
-const loginForm = ref({
-  username: "",
-  password: "",
-});
-const registerForm = ref({
-  username: "",
-  password: "",
-  registerCode: "",
-});
-
-const password2 = ref("");
-
-const loginRules = {
-  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
-  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
-};
-
-const registerRules = {
-  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
-  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
-  registerCode: [{ required: true, message: "请输入注册码", trigger: "blur" }],
-};
-
-const loginFormRef = ref(null);
-const registerFormRef = ref(null);
-
-
-
-const handleLogin = async () => {
-      try {
-        const res = await userApi.login(loginForm.value);
-        if (res.code === 0) {
-          const { token } = res.data;
-          localStorage.setItem("token", token);
-          // 路由跳转首页
-          router.push("/");
-        } else {
-          ElMessage.error(res.message);
-        }
-      } catch (error) {
-        ElMessage.error("登录失败", error);
-      }
-};
-const loginFormRefValidate = () => {
-  loginFormRef.value.validate((valid) => {
-    if (valid) {
-      handleLogin();
-    } else {
-      ElMessage.error("登录表单验证失败");
-    }
-  });
-};
-
-const handleRegister = async () => {
-  registerFormRef.value.validate(async (valid) => {
-    if (valid) {
-      if(password2.value !== registerForm.value.password){
-        return ElMessage.error("两次输入的密码不一致");
-      }
-      try {
-        const res = await userApi.register(registerForm.value);
-        if (res.code === 0) {
-          ElMessage.success("注册成功");
-          loginForm.value.username = registerForm.value.username
-          loginForm.value.password = registerForm.value.password
-          handleLogin()
-        } else {
-          ElMessage.error(res.message || "注册失败");
-        }
-      } catch (error) {
-        ElMessage.error(error.message || "注册失败");
-      }
-    } else {
-      console.error("注册表单验证失败");
-    }
-  });
-};
-</script>
-
-<style scoped lang="scss">
-.login-register {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.login-bg {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-image: url("../assets/images/login-bg.jpg");
-  background-size: cover;
-  background-position: center center;
-  -webkit-filter: blur(3px);
-  -moz-filter: blur(3px);
-  -o-filter: blur(3px);
-  -ms-filter: blur(3px);
-  filter: blur(3px);
-  z-index: 0;
-}
-.card {
-  position: relative;
-  z-index: 10;
-  width: 480px;
-  border-radius: 16px;
-  background: rgba(255, 255, 255, 0.8);
-  box-shadow: 0px 20px 60px rgba(123, 61, 224, 0.1);
-}
-
-.tabs {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 20px;
-}
-
-.tab-button {
-  flex: 1;
-  text-align: center;
-}
-
-.form-item {
-  width: 100%;
-  margin-bottom: 30px;
-}
-.form-input {
-  height: 48px;
-  border-radius: 10px;
-}
-
-.options {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-.forgot-password {
-  color: #6366f1;
-  text-decoration: none;
-  font-size: 14px;
-}
-
-.form-submit {
-  margin-bottom: 10px;
-  background-color: #6366f1;
-  width: 100%;
-  height: 48px;
-}
-
-.google-login {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #f5f5f5;
-}
-
-.agreement {
-  text-align: center;
-  margin-top: 10px;
-  font-size: 14px;
-}
-
-.user-agreement {
-  color: #6366f1;
-  text-decoration: none;
-}
-</style>
diff --git a/frontend/src/views/ResourceList.vue b/frontend/src/views/ResourceList.vue
index f996c3d..7ae9970 100644
--- a/frontend/src/views/ResourceList.vue
+++ b/frontend/src/views/ResourceList.vue
@@ -1,62 +1,105 @@
 <template>
-  <div class="resource-list">
-    <div :class="{ 'resource-list__header': true }">
-      <div class="header_left">
-        <div class="refresh_btn" @click="refreshResources">
-          <el-icon class="type_icon" size="20px"><Refresh /></el-icon>最新资源<span
-            class="item-count"
-            >(上次刷新时间：{{ resourceStore.lastUpdateTime }})</span
-          >
-        </div>
+  <div class="pc-resources">
+    <!-- 头部工具栏 -->
+    <div class="pc-resources__header">
+      <div class="header__left">
+        <el-tooltip effect="dark" content="点击获取最新资源" placement="bottom">
+          <el-button class="refresh-btn" type="text" @click="refreshResources">
+            <el-icon><Refresh /></el-icon>
+            <span>最新资源</span>
+            <span class="update-time"> (上次刷新时间：{{ resourceStore.lastUpdateTime }}) </span>
+          </el-button>
+        </el-tooltip>
       </div>
-      <div class="header_right">
-        <el-icon
-          v-if="userStore.displayStyle === 'card'"
-          class="type_icon"
-          @click="setDisplayStyle('table')"
-          ><Menu
-        /></el-icon>
-        <el-icon v-else class="type_icon" @click="setDisplayStyle('card')"><Fold /></el-icon>
+
+      <div class="header__right">
+        <el-tooltip
+          effect="dark"
+          :content="userStore.displayStyle === 'card' ? '切换到列表视图' : '切换到卡片视图'"
+          placement="bottom"
+        >
+          <el-button
+            type="text"
+            class="view-toggle"
+            @click="setDisplayStyle(userStore.displayStyle === 'card' ? 'table' : 'card')"
+          >
+            <el-icon>
+              <component :is="userStore.displayStyle === 'card' ? 'Menu' : 'Grid'" />
+            </el-icon>
+          </el-button>
+        </el-tooltip>
       </div>
     </div>
-    <ResourceTable
-      v-if="userStore.displayStyle === 'table'"
-      @load-more="handleLoadMore"
-      @search-moviefor-tag="searchMovieforTag"
-      @save="handleSave"
-    ></ResourceTable>
-    <ResourceCard
-      v-else
-      @load-more="handleLoadMore"
-      @search-moviefor-tag="searchMovieforTag"
-      @save="handleSave"
-    ></ResourceCard>
-    <el-empty v-if="resourceStore.resources.length === 0" :image-size="200" />
+
+    <!-- 资源列表 -->
+    <div ref="contentRef" class="pc-resources__content">
+      <component
+        :is="userStore.displayStyle === 'table' ? ResourceTable : ResourceCard"
+        v-if="resourceStore.resources.length > 0"
+        @load-more="handleLoadMore"
+        @search-moviefor-tag="searchMovieforTag"
+        @save="handleSave"
+      />
+
+      <!-- 空状态 -->
+      <div v-if="resourceStore.resources.length === 0" class="pc-resources__empty">
+        <el-empty :image-size="200">
+          <template #description>
+            <p class="empty-text">暂无资源</p>
+            <el-tooltip effect="dark" content="点击获取最新资源" placement="top">
+              <el-button type="primary" @click="refreshResources">
+                <el-icon><Refresh /></el-icon>
+                <span>刷新资源</span>
+              </el-button>
+            </el-tooltip>
+          </template>
+        </el-empty>
+      </div>
+    </div>
+
+    <!-- 返回顶部 -->
+    <el-backtop :bottom="40" :right="40" target=".pc-resources__content">
+      <div class="pc-resources__backtop">
+        <el-icon><ArrowUp /></el-icon>
+      </div>
+    </el-backtop>
+
+    <!-- 保存对话框 -->
     <el-dialog
       v-if="currentResource"
       v-model="saveDialogVisible"
       :title="saveDialogMap[saveDialogStep].title"
+      width="580px"
+      destroy-on-close
     >
       <template #header="{ titleId }">
-        <div class="my-header">
-          <div :id="titleId">
-            <el-tag
-              :type="resourceStore.tagColor[currentResource.cloudType as keyof TagColor]"
-              effect="dark"
-              round
-            >
-              {{ currentResource.cloudType }}
-            </el-tag>
-            {{ saveDialogMap[saveDialogStep].title }}
-            <span
-              v-if="resourceStore.shareInfo.fileSize && saveDialogStep === 1"
-              style="font-weight: bold"
-            >
-              ({{ formattedFileSize(resourceStore.shareInfo.fileSize || 0) }})
-            </span>
-          </div>
+        <div class="dialog-header">
+          <h3 :id="titleId">
+            <div class="title-main">
+              <el-tag
+                :type="resourceStore.tagColor[currentResource.cloudType as keyof TagColor]"
+                effect="dark"
+                round
+              >
+                {{ currentResource.cloudType }}
+              </el-tag>
+              {{ saveDialogMap[saveDialogStep].title }}
+            </div>
+            <div class="title-sub">
+              <span class="resource-title" :title="currentResource.title">
+                {{ currentResource.title }}
+              </span>
+              <span
+                v-if="resourceStore.shareInfo.fileSize && saveDialogStep === 1"
+                class="file-size"
+              >
+                ({{ formattedFileSize(resourceStore.shareInfo.fileSize) }})
+              </span>
+            </div>
+          </h3>
         </div>
       </template>
+
       <div v-loading="resourceStore.loadTree">
         <resource-select
           v-if="saveDialogVisible && saveDialogStep === 1 && resourceStore.resourceSelect.length"
@@ -70,13 +113,23 @@
         />
       </div>
 
-      <div class="dialog-footer">
-        <el-button @click="saveDialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="handleConfirmClick">{{
-          saveDialogMap[saveDialogStep].buttonText
-        }}</el-button>
-      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="saveDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleConfirmClick">
+            {{ saveDialogMap[saveDialogStep].buttonText }}
+          </el-button>
+        </div>
+      </template>
     </el-dialog>
+
+    <!-- 加载状态 -->
+    <div v-if="resourceStore.loading" class="pc-resources__loading">
+      <div class="loading-text">加载中...</div>
+      <div class="is-loading">
+        <el-icon><Loading /></el-icon>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -93,6 +146,7 @@ import type { ResourceItem, TagColor } from "@/types";
 import ResourceCard from "@/components/Home/ResourceCard.vue";
 import { useRouter } from "vue-router";
 import { ElMessage } from "element-plus";
+import { ArrowUp } from "@element-plus/icons-vue";
 const router = useRouter();
 
 const resourceStore = useResourceStore();
@@ -113,7 +167,7 @@ const saveDialogMap = {
   },
   2: {
     title: "选择保存目录",
-    buttonText: "保存",
+    buttonText: "保存到此目录",
   },
 };
 
@@ -133,7 +187,8 @@ const handleFolderSelect = async (folderId: string) => {
 
 const handleConfirmClick = async () => {
   if (saveDialogStep.value === 1) {
-    if (resourceStore.resourceSelect.length === 0) {
+    const selectedFiles = resourceStore.resourceSelect.filter((x) => x.isChecked);
+    if (selectedFiles.length === 0) {
       ElMessage.warning("请选择要保存的资源");
       return;
     }
@@ -161,75 +216,302 @@ const searchMovieforTag = (tag: string) => {
 };
 </script>
 
-<style scoped>
-.resource-list {
-  /* margin-top: 20px; */
+<style lang="scss" scoped>
+@import "@/styles/common.scss";
+@import "@/styles/responsive.scss";
+
+.pc-resources {
+  // 整体容器
   position: relative;
+  width: 100%;
+
+  // 头部工具栏
+  &__header {
+    @include glass-effect;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 48px;
+    padding: 0 20px;
+    margin-bottom: 16px;
+    border-radius: var(--theme-radius);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    transition: var(--theme-transition);
+
+    &:hover {
+      border-color: var(--theme-primary);
+      box-shadow: var(--theme-shadow-sm);
+    }
+
+    .header__left {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 12px;
+      padding: 8px 0;
+
+      .refresh-btn {
+        @include flex-center;
+        gap: 8px;
+        color: var(--theme-text-regular);
+        transition: var(--theme-transition);
+        white-space: nowrap;
+
+        .el-icon {
+          font-size: 18px;
+          color: var(--theme-primary);
+        }
+
+        .update-time {
+          margin-left: 4px;
+          font-size: 13px;
+          color: var(--theme-text-secondary);
+          white-space: nowrap;
+        }
+
+        &:hover {
+          color: var(--theme-primary);
+          transform: translateY(-1px);
+        }
+      }
+    }
+
+    .header__right {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 8px 0;
+
+      .view-toggle {
+        width: 36px;
+        height: 36px;
+        padding: 0;
+        color: var(--theme-text-regular);
+        border-radius: var(--theme-radius);
+        transition: var(--theme-transition);
+
+        .el-icon {
+          font-size: 18px;
+        }
+
+        &:hover {
+          color: var(--theme-primary);
+          background: rgba(0, 102, 204, 0.05);
+          transform: translateY(-1px);
+        }
+      }
+    }
+  }
+
+  // 内容区域
+  &__content {
+    position: relative;
+    width: 100%;
+    height: calc(100vh - 180px);
+    overflow-y: auto;
+
+    // 资源列表组件样式覆盖
+    :deep(.resource-table),
+    :deep(.resource-card) {
+      height: 100%;
+
+      // 自定义滚动条
+      &::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 4px;
+
+        &:hover {
+          background: rgba(0, 0, 0, 0.3);
+        }
+      }
+
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+    }
+  }
+
+  // 加载状态
+  &__loading {
+    @include glass-effect;
+    @include flex-center;
+    position: fixed;
+    inset: 0;
+    z-index: 2000;
+    flex-direction: column;
+    gap: 16px;
+    background: rgba(255, 255, 255, 0.3);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    animation: fadeIn 0.3s ease;
+
+    .loading-text {
+      color: var(--theme-text-primary);
+      font-size: 14px;
+      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    }
+
+    .is-loading {
+      font-size: 24px;
+      color: var(--theme-primary);
+      animation: rotating 2s linear infinite;
+      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
+    }
+  }
+
+  // 空状态
+  &__empty {
+    @include flex-center;
+    flex-direction: column;
+    gap: 16px;
+    height: 100%;
+
+    .empty-text {
+      color: var(--theme-text-primary);
+      font-size: 14px;
+      margin: 8px 0 16px;
+    }
+
+    .el-button {
+      @include flex-center;
+      gap: 8px;
+      padding: 8px 20px;
+      height: 40px;
+      font-size: 14px;
+      transition: var(--theme-transition);
+      background: var(--theme-primary);
+      border-color: var(--theme-primary);
+
+      .el-icon {
+        font-size: 16px;
+      }
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: var(--theme-shadow-sm);
+      }
+    }
+  }
+
+  // 返回顶部按钮
+  &__backtop {
+    @include flex-center;
+    width: 40px;
+    height: 40px;
+    color: var(--theme-primary);
+    background: var(--theme-card-bg);
+    border-radius: var(--theme-radius);
+    box-shadow: var(--theme-shadow);
+    transition: var(--theme-transition);
+
+    &:hover {
+      background: var(--theme-primary);
+      color: #fff;
+      transform: translateY(-2px);
+    }
+
+    .el-icon {
+      font-size: 20px;
+    }
+  }
 }
-.resource-list__header {
-  height: 48px;
-  background-color: var(--theme-other_background);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 10px;
-  box-sizing: border-box;
-  border-radius: 15px;
-  padding: 0 15px;
-}
-.header_right {
-  cursor: pointer;
-}
-.type_icon {
-  width: 48px;
-  height: 48px;
-  size: 48px;
-}
-.refresh_btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  .item-count {
-    color: #909399;
-    font-size: 0.9em;
+
+// 对话框样式
+.dialog-header {
+  h3 {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin: 0;
+    font-weight: 600;
+    color: var(--theme-text-primary);
+
+    .title-main {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 16px;
+    }
+
+    .title-sub {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 14px;
+      color: var(--theme-text-secondary);
+      font-weight: normal;
+    }
+
+    .resource-title {
+      max-width: 300px;
+      @include text-ellipsis;
+    }
+  }
+
+  .file-size {
+    color: var(--theme-text-secondary);
   }
 }
 
 .dialog-footer {
   display: flex;
-  align-items: center;
   justify-content: flex-end;
+  gap: 12px;
+  padding-top: 16px;
 }
 
-.group-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
+:deep(.el-dialog) {
+  border-radius: var(--theme-radius);
+  overflow: hidden;
 
-.item-count {
-  color: #909399;
-  font-size: 0.9em;
-}
+  .el-dialog__header {
+    margin: 0;
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+  }
 
-:deep(.el-table__expand-column) {
-  .cell {
-    padding: 0 !important;
+  .el-dialog__body {
+    padding: 24px;
+  }
+
+  .el-dialog__footer {
+    padding: 16px 24px;
+    border-top: 1px solid var(--el-border-color-lighter);
   }
 }
 
-:deep(.el-table__expanded-cell) {
-  padding: 20px !important;
+// 表格扩展列样式
+:deep(.el-table) {
+  .el-table__expand-column {
+    .cell {
+      padding: 0;
+    }
+  }
+
+  .el-table__expanded-cell {
+    padding: 20px;
+  }
+
+  .el-table__expand-icon {
+    height: 23px;
+    line-height: 23px;
+  }
 }
 
-:deep(.el-table__expand-icon) {
-  height: 23px;
-  line-height: 23px;
-}
-.load-more {
-  display: flex;
-  justify-content: center;
-  padding: 16px 0;
+// 加载动画
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    backdrop-filter: blur(0);
+  }
+  to {
+    opacity: 1;
+    backdrop-filter: blur(8px);
+  }
 }
 </style>
diff --git a/frontend/src/views/Setting.vue b/frontend/src/views/Setting.vue
index a79991c..267de29 100644
--- a/frontend/src/views/Setting.vue
+++ b/frontend/src/views/Setting.vue
@@ -1,175 +1,458 @@
 <template>
-  <div class="settings">
-    <el-card v-if="settingStore.globalSetting" class="setting-card">
-      <h2>网络配置</h2>
-      <div class="section">
-        <div class="form-group">
-          <label for="proxyDomain">代理ip:</label>
-          <el-input
-            id="proxyDomain"
-            v-model="globalSetting.httpProxyHost"
-            class="form-input"
-            type="text"
-            placeholder="127.0.0.1"
-          />
+  <div class="settings-page">
+    <!-- 项目配置卡片 -->
+    <el-card v-if="settingStore.globalSetting" class="settings-card network-card">
+      <template #header>
+        <div class="card-header">
+          <el-icon><Connection /></el-icon>
+          <h2>项目配置</h2>
         </div>
-        <div class="form-group">
-          <label for="proxyPort">代理端口:</label>
-          <el-input
-            id="proxyPort"
-            v-model="globalSetting.httpProxyPort"
-            class="form-input"
-            type="text"
-            placeholder="7890"
-          />
+      </template>
+
+      <div class="settings-section">
+        <!-- 代理配置组 -->
+        <div class="settings-group">
+          <div class="group-header">
+            <h3>代理设置</h3>
+            <el-switch
+              v-model="localGlobalSetting.isProxyEnabled"
+              active-text="已启用"
+              @change="handleProxyChange"
+            />
+          </div>
+
+          <div class="form-row">
+            <div class="form-item">
+              <label for="proxyDomain">代理服务器IP</label>
+              <el-input
+                id="proxyDomain"
+                v-model="localGlobalSetting.httpProxyHost"
+                placeholder="127.0.0.1"
+                :disabled="!localGlobalSetting.isProxyEnabled"
+                @input="handleProxyHostChange"
+              >
+                <template #prefix>
+                  <el-icon><Monitor /></el-icon>
+                </template>
+              </el-input>
+            </div>
+
+            <div class="form-item">
+              <label for="proxyPort">代理端口</label>
+              <el-input
+                id="proxyPort"
+                v-model="localGlobalSetting.httpProxyPort"
+                placeholder="7890"
+                :disabled="!localGlobalSetting.isProxyEnabled"
+              >
+                <template #prefix>
+                  <el-icon><Position /></el-icon>
+                </template>
+              </el-input>
+            </div>
+          </div>
         </div>
-        <div class="form-group">
-          <label for="AdminUserCode">管理员注册码:</label>
-          <el-input-number
-            id="AdminUserCode"
-            v-model="globalSetting.AdminUserCode"
-            class="form-input"
-            type="text"
-            :controls="false"
-            :precision="0"
-            placeholder="设置管理员注册码"
-          />
-        </div>
-        <div class="form-group">
-          <label for="CommonUserCode">普通用户注册码:</label>
-          <el-input-number
-            id="CommonUserCode"
-            v-model="globalSetting.CommonUserCode"
-            class="form-input"
-            type="text"
-            :precision="0"
-            :controls="false"
-            placeholder="设置普通用户注册码"
-          />
-        </div>
-      </div>
-      <div class="section">
-        <div class="form-group">
-          <label for="isProxyEnabled">启用代理:</label>
-          <el-switch v-model="globalSetting.isProxyEnabled" @change="saveSettings" />
+
+        <!-- 注册码配置组 -->
+        <div class="settings-group">
+          <h3>注册码设置</h3>
+          <div class="form-row">
+            <div class="form-item">
+              <label for="AdminUserCode">管理员注册码</label>
+              <el-input-number
+                id="AdminUserCode"
+                v-model="localGlobalSetting.AdminUserCode"
+                :controls="false"
+                :precision="0"
+                placeholder="设置管理员注册码"
+              >
+                <template #prefix>
+                  <el-icon><Key /></el-icon>
+                </template>
+              </el-input-number>
+            </div>
+
+            <div class="form-item">
+              <label for="CommonUserCode">普通用户注册码</label>
+              <el-input-number
+                id="CommonUserCode"
+                v-model="localGlobalSetting.CommonUserCode"
+                :controls="false"
+                :precision="0"
+                placeholder="设置普通用户注册码"
+              >
+                <template #prefix>
+                  <el-icon><Key /></el-icon>
+                </template>
+              </el-input-number>
+            </div>
+          </div>
         </div>
       </div>
     </el-card>
-    <el-card class="setting-card">
-      <h2>用户配置</h2>
-      <div class="section">
-        <div class="form-group">
-          <label for="cookie115">115网盘Cookie:</label>
-          <el-input
-            id="cookie115"
-            v-model="settingStore.userSettings.cloud115Cookie"
-            class="form-input"
-            type="text"
-          />
+
+    <!-- 用户配置卡片 -->
+    <el-card class="settings-card user-card">
+      <template #header>
+        <div class="card-header">
+          <el-icon><User /></el-icon>
+          <h2>用户配置</h2>
         </div>
-        <div class="form-group">
-          <label for="cookieQuark">夸克网盘Cookie:</label>
-          <el-input
-            id="cookieQuark"
-            v-model="settingStore.userSettings.quarkCookie"
-            class="form-input"
-            type="text"
-          />
+      </template>
+
+      <div class="settings-section">
+        <div class="settings-group">
+          <h3>网盘授权</h3>
+          <div class="form-row">
+            <div class="form-item full-width">
+              <label for="cookie115">115网盘 Cookie</label>
+              <el-input
+                id="cookie115"
+                v-model="localUserSettings.cloud115Cookie"
+                type="password"
+                show-password
+                placeholder="请输入115网盘Cookie"
+              >
+                <template #prefix>
+                  <el-icon><Lock /></el-icon>
+                </template>
+              </el-input>
+            </div>
+          </div>
+
+          <div class="form-row">
+            <div class="form-item full-width">
+              <label for="cookieQuark">夸克网盘 Cookie</label>
+              <el-input
+                id="cookieQuark"
+                v-model="localUserSettings.quarkCookie"
+                type="password"
+                show-password
+                placeholder="请输入夸克网盘Cookie"
+              >
+                <template #prefix>
+                  <el-icon><Lock /></el-icon>
+                </template>
+              </el-input>
+            </div>
+          </div>
         </div>
-      </div>
-      <div class="user-setting-tips">
-        <h3>帮助</h3>
-        <div>
-          <el-link
-            target="_blank"
-            href="https://alist.nn.ci/zh/guide/drivers/115.html#cookie%E8%8E%B7%E5%8F%96%E6%96%B9%E5%BC%8F"
-            >如何获取115网盘cookie？</el-link
-          >
-        </div>
-        <div>
-          <el-link target="_blank" href="https://alist.nn.ci/zh/guide/drivers/quark.html#cookie"
-            >如何获取夸克网盘cookie？</el-link
-          >
+
+        <!-- 帮助链接 -->
+        <div class="settings-help">
+          <h3>帮助文档</h3>
+          <div class="help-links">
+            <el-link
+              href="https://www.yuque.com/xiaoruihenbangde/ggogn3/ga6gaaiy5fsyw62l?singleDoc=true"
+              target="_blank"
+              type="primary"
+            >
+              <el-icon><QuestionFilled /></el-icon>
+              CloudSaver部署与使用常见问题
+            </el-link>
+            <el-link
+              href="https://www.yuque.com/xiaoruihenbangde/ggogn3/cl2g0p9h3xrgfa5i"
+              target="_blank"
+              type="primary"
+            >
+              <el-icon><QuestionFilled /></el-icon>
+              CloudSaver功能介绍
+            </el-link>
+            <el-link
+              href="https://alist.nn.ci/zh/guide/drivers/115.html#cookie获取方式"
+              target="_blank"
+              type="primary"
+            >
+              <el-icon><QuestionFilled /></el-icon>
+              如何获取115网盘Cookie？
+            </el-link>
+            <el-link
+              href="https://alist.nn.ci/zh/guide/drivers/quark.html#cookie"
+              target="_blank"
+              type="primary"
+            >
+              <el-icon><QuestionFilled /></el-icon>
+              如何获取夸克网盘Cookie？
+            </el-link>
+          </div>
         </div>
       </div>
     </el-card>
-    <el-button @click="saveSettings">保存设置</el-button>
+
+    <!-- 保存按钮 -->
+    <div class="settings-actions">
+      <el-button type="primary" @click="handleSave"> 保存设置 </el-button>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useUserSettingStore } from "@/stores/userSetting";
-import { computed } from "vue";
+import { ref, watch } from "vue";
+import { ElMessage } from "element-plus";
+import type { GlobalSettingAttributes, UserSettingAttributes } from "@/types/user";
+import {
+  Connection,
+  Monitor,
+  Position,
+  Key,
+  User,
+  Lock,
+  QuestionFilled,
+} from "@element-plus/icons-vue";
+
 const settingStore = useUserSettingStore();
 
-const globalSetting = computed(
-  () =>
-    settingStore.globalSetting || {
-      httpProxyHost: "127.0.1",
-      httpProxyPort: "7890",
-      isProxyEnabled: false,
-      AdminUserCode: 230713,
-      CommonUserCode: 9527,
+// 本地状态
+const localGlobalSetting = ref<GlobalSettingAttributes>({
+  httpProxyHost: "127.0.0.1",
+  httpProxyPort: "7890",
+  isProxyEnabled: false,
+  AdminUserCode: 230713,
+  CommonUserCode: 9527,
+});
+
+const localUserSettings = ref<UserSettingAttributes>({
+  cloud115Cookie: "",
+  quarkCookie: "",
+});
+
+// 监听 store 变化,更新本地状态
+watch(
+  () => settingStore.globalSetting,
+  (newVal) => {
+    if (newVal) {
+      localGlobalSetting.value = { ...newVal };
     }
+  },
+  { immediate: true }
 );
 
+watch(
+  () => settingStore.userSettings,
+  (newVal) => {
+    if (newVal) {
+      localUserSettings.value = { ...newVal };
+    }
+  },
+  { immediate: true }
+);
+
+// 初始化获取设置
 settingStore.getSettings();
 
-const saveSettings = () => {
-  settingStore.saveSettings();
-  // Add your save logic here
+// 处理代理开关变化并立即保存
+const handleProxyChange = async (val: boolean) => {
+  try {
+    localGlobalSetting.value.isProxyEnabled = val;
+    await settingStore.saveSettings({
+      globalSetting: localGlobalSetting.value,
+      userSettings: localUserSettings.value,
+    });
+    ElMessage.success("设置保存成功");
+  } catch (error) {
+    // 保存失败时恢复开关状态
+    ElMessage.error("设置保存失败");
+    localGlobalSetting.value.isProxyEnabled = !val;
+  }
+};
+
+// 处理代理地址,去除协议前缀
+const handleProxyHostChange = (val: string) => {
+  // 移除 http:// 或 https:// 前缀
+  const cleanHost = val.replace(/^(https?:\/\/)/i, "");
+  // 更新状态
+  localGlobalSetting.value.httpProxyHost = cleanHost;
+};
+
+// 其他设置的保存
+const handleSave = async () => {
+  try {
+    await settingStore.saveSettings({
+      globalSetting: localGlobalSetting.value,
+      userSettings: localUserSettings.value,
+    });
+    ElMessage.success("设置保存成功");
+  } catch (error) {
+    console.error("保存设置失败:", error);
+  }
 };
 </script>
 
-<style scoped lang="scss">
-.settings {
+<style lang="scss" scoped>
+@import "@/styles/common.scss";
+
+.settings-page {
+  // max-width: 1000px;
+  margin: 0;
+  padding-bottom: 40px;
+}
+
+.settings-card {
+  margin-bottom: 24px;
+  border-radius: var(--theme-radius);
+  transition: var(--theme-transition);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+
+  &:hover {
+    box-shadow: var(--theme-shadow);
+  }
+
+  :deep(.el-card__header) {
+    padding: 16px 20px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  }
+}
+
+.card-header {
+  @include flex-center;
+  gap: 12px;
+
+  .el-icon {
+    font-size: 20px;
+    color: var(--theme-primary);
+  }
+
+  h2 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--theme-text-primary);
+  }
+}
+
+.settings-section {
   padding: 20px;
 }
-.setting-card {
-  margin-bottom: 20px;
-  border-radius: 15px;
+
+.settings-group {
+  margin-bottom: 32px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  h3 {
+    margin: 0 0 16px;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--theme-text-regular);
+  }
+
+  .group-header {
+    @include flex-center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+
+    h3 {
+      margin: 0;
+    }
+  }
 }
 
-.section {
-  margin-bottom: 20px;
+.form-row {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
+  gap: 24px;
+  margin-bottom: 16px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
-.form-group {
-  margin-bottom: 10px;
-  width: 48%;
-}
-.form-input {
-  text-align: left;
-  width: 100%;
-}
-::v-deep .el-input__inner {
-  text-align: left;
+.form-item {
+  flex: 1;
+  min-width: 0;
+
+  &.full-width {
+    width: 100%;
+  }
+
+  label {
+    display: block;
+    margin-bottom: 8px;
+    font-size: 13px;
+    color: var(--theme-text-secondary);
+  }
+
+  :deep(.el-input),
+  :deep(.el-input-number) {
+    width: 100%;
+
+    .el-input__wrapper {
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+      transition: var(--theme-transition);
+
+      &:hover {
+        box-shadow: 0 0 0 1px var(--theme-primary);
+      }
+
+      &.is-focus {
+        box-shadow:
+          0 0 0 1px var(--theme-primary),
+          0 0 0 3px rgba(0, 102, 204, 0.1);
+      }
+    }
+
+    .el-input__prefix-inner {
+      .el-icon {
+        margin-right: 8px;
+        color: var(--theme-text-secondary);
+      }
+    }
+  }
 }
 
-label {
-  display: block;
-  margin-bottom: 5px;
+.settings-help {
+  padding-top: 24px;
+  margin-top: 24px;
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+
+  .help-links {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+    margin-top: 16px;
+  }
+
+  :deep(.el-link) {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+
+    .el-icon {
+      font-size: 16px;
+    }
+
+    &:hover {
+      transform: translateX(4px);
+    }
+  }
 }
 
-input {
-  width: 100%;
-  padding: 8px;
-  box-sizing: border-box;
-}
+.settings-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 24px;
 
-button {
-  padding: 10px 20px;
-  background-color: #007bff;
-  color: white;
-  border: none;
-  cursor: pointer;
-}
+  .el-button {
+    min-width: 120px;
+    height: 40px;
+    border-radius: 20px;
+    font-size: 14px;
+    transition: var(--theme-transition);
 
-button:hover {
-  background-color: #0056b3;
+    .el-icon {
+      margin-right: 6px;
+      font-size: 16px;
+    }
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: var(--theme-shadow-sm);
+    }
+  }
 }
 </style>
diff --git a/frontend/src/views/mobile/Login.vue b/frontend/src/views/mobile/Login.vue
index e565638..71a5ae6 100644
--- a/frontend/src/views/mobile/Login.vue
+++ b/frontend/src/views/mobile/Login.vue
@@ -80,6 +80,7 @@ import { showNotify } from "vant";
 import type { FieldInstance } from "vant";
 import { userApi } from "@/api/user";
 import logo from "@/assets/images/logo.png";
+import { STORAGE_KEYS } from "@/constants/storage";
 
 // 类型定义
 interface LoginForm {
@@ -94,7 +95,7 @@ const formData = ref<LoginForm>({
 });
 const isLoading = ref(false);
 const passwordRef = ref<FieldInstance>();
-const rememberPassword = ref(!!localStorage.getItem("rememberedPassword"));
+const rememberPassword = ref(false);
 
 // 工具函数
 const router = useRouter();
@@ -106,13 +107,12 @@ const focusPassword = () => {
 
 // 在组件加载时检查是否有保存的账号密码
 onMounted(() => {
-  if (rememberPassword.value) {
-    const savedUsername = localStorage.getItem("username");
-    const savedPassword = localStorage.getItem("password");
-    if (savedUsername && savedPassword) {
-      formData.value.username = savedUsername;
-      formData.value.password = savedPassword;
-    }
+  const savedUsername = localStorage.getItem(STORAGE_KEYS.USERNAME);
+  const savedPassword = localStorage.getItem(STORAGE_KEYS.PASSWORD);
+  if (savedUsername && savedPassword) {
+    formData.value.username = savedUsername;
+    formData.value.password = savedPassword;
+    rememberPassword.value = true;
   }
 });
 
@@ -124,16 +124,14 @@ const handleSubmit = async () => {
     if (res.code === 0) {
       // 处理记住密码
       if (rememberPassword.value) {
-        localStorage.setItem("username", formData.value.username);
-        localStorage.setItem("password", formData.value.password);
-        localStorage.setItem("rememberedPassword", "true");
+        localStorage.setItem(STORAGE_KEYS.USERNAME, formData.value.username);
+        localStorage.setItem(STORAGE_KEYS.PASSWORD, formData.value.password);
       } else {
-        localStorage.removeItem("username");
-        localStorage.removeItem("password");
-        localStorage.removeItem("rememberedPassword");
+        localStorage.removeItem(STORAGE_KEYS.USERNAME);
+        localStorage.removeItem(STORAGE_KEYS.PASSWORD);
       }
 
-      localStorage.setItem("token", res.data.token);
+      localStorage.setItem(STORAGE_KEYS.TOKEN, res.data.token);
       await router.push("/");
     } else {
       showNotify({
diff --git a/frontend/src/views/mobile/Setting.vue b/frontend/src/views/mobile/Setting.vue
index 6e21ba3..01eebb1 100644
--- a/frontend/src/views/mobile/Setting.vue
+++ b/frontend/src/views/mobile/Setting.vue
@@ -5,23 +5,36 @@
       <div class="setting__title">项目配置</div>
       <div class="setting__card">
         <van-cell-group inset>
-          <van-field v-model="globalSetting.httpProxyHost" label="代理IP" placeholder="127.0.0.1" />
-          <van-field v-model="globalSetting.httpProxyPort" label="代理端口" placeholder="7890" />
           <van-field
-            v-model.number="globalSetting.AdminUserCode"
+            v-model="localGlobalSetting.httpProxyHost"
+            label="代理服务器IP"
+            placeholder="127.0.0.1"
+            @update:model-value="handleProxyHostChange"
+          />
+          <van-field
+            v-model="localGlobalSetting.httpProxyPort"
+            label="代理端口"
+            placeholder="7890"
+          />
+          <van-field
+            v-model.number="localGlobalSetting.AdminUserCode"
             label="管理员码"
             type="digit"
             placeholder="设置管理员注册码"
           />
           <van-field
-            v-model.number="globalSetting.CommonUserCode"
+            v-model.number="localGlobalSetting.CommonUserCode"
             label="用户注册码"
             type="digit"
             placeholder="设置普通用户注册码"
           />
           <van-cell center title="启用代理">
             <template #right-icon>
-              <van-switch v-model="globalSetting.isProxyEnabled" size="24px" />
+              <van-switch
+                v-model="localGlobalSetting.isProxyEnabled"
+                size="24px"
+                @change="handleProxyChange"
+              />
             </template>
           </van-cell>
         </van-cell-group>
@@ -34,7 +47,7 @@
       <div class="setting__card">
         <van-cell-group inset>
           <van-field
-            v-model="settingStore.userSettings.cloud115Cookie"
+            v-model="localUserSettings.cloud115Cookie"
             label="115网盘"
             type="textarea"
             rows="2"
@@ -42,7 +55,7 @@
             placeholder="请输入115网盘Cookie"
           />
           <van-field
-            v-model="settingStore.userSettings.quarkCookie"
+            v-model="localUserSettings.quarkCookie"
             label="夸克网盘"
             type="textarea"
             rows="2"
@@ -56,6 +69,16 @@
       <div class="setting__help">
         <div class="help__title">帮助说明</div>
         <div class="help__links">
+          <van-cell
+            title="CloudSaver部署与使用常见问题"
+            is-link
+            url="https://www.yuque.com/xiaoruihenbangde/ggogn3/ga6gaaiy5fsyw62l?singleDoc=true"
+          />
+          <van-cell
+            title="CloudSaver功能介绍"
+            is-link
+            url="https://www.yuque.com/xiaoruihenbangde/ggogn3/cl2g0p9h3xrgfa5i"
+          />
           <van-cell
             title="如何获取115网盘cookie？"
             is-link
@@ -72,39 +95,93 @@
 
     <!-- 保存按钮 -->
     <div class="setting__submit">
-      <van-button round block type="primary" @click="saveSettings"> 保存设置 </van-button>
+      <van-button round block type="primary" @click="handleSave"> 保存设置 </van-button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useUserSettingStore } from "@/stores/userSetting";
-import { computed } from "vue";
+import { ref, watch } from "vue";
 import { showNotify } from "vant";
+import type { GlobalSettingAttributes, UserSettingAttributes } from "@/types/user";
 
 const settingStore = useUserSettingStore();
 
-const globalSetting = computed(
-  () =>
-    settingStore.globalSetting || {
-      httpProxyHost: "127.0.1",
-      httpProxyPort: "7890",
-      isProxyEnabled: false,
-      AdminUserCode: 230713,
-      CommonUserCode: 9527,
+// 本地状态
+const localGlobalSetting = ref<GlobalSettingAttributes>({
+  httpProxyHost: "127.0.0.1",
+  httpProxyPort: "7890",
+  isProxyEnabled: false,
+  AdminUserCode: 230713,
+  CommonUserCode: 9527,
+});
+
+const localUserSettings = ref<UserSettingAttributes>({
+  cloud115Cookie: "",
+  quarkCookie: "",
+});
+
+// 监听 store 变化
+watch(
+  () => settingStore.globalSetting,
+  (newVal) => {
+    if (newVal) {
+      localGlobalSetting.value = { ...newVal };
     }
+  },
+  { immediate: true }
 );
 
+watch(
+  () => settingStore.userSettings,
+  (newVal) => {
+    if (newVal) {
+      localUserSettings.value = { ...newVal };
+    }
+  },
+  { immediate: true }
+);
+
+// 初始化获取设置
 settingStore.getSettings();
 
-const saveSettings = async () => {
+// 处理代理开关变化并立即保存
+const handleProxyChange = async (val: boolean) => {
   try {
-    await settingStore.saveSettings();
+    localGlobalSetting.value.isProxyEnabled = val;
+    await settingStore.saveSettings({
+      globalSetting: localGlobalSetting.value,
+      userSettings: localUserSettings.value,
+    });
+    showNotify({ type: "success", message: "代理设置已更新" });
+  } catch (error) {
+    showNotify({ type: "danger", message: "代理设置更新失败" });
+    // 保存失败时恢复开关状态
+    localGlobalSetting.value.isProxyEnabled = !val;
+  }
+};
+
+// 其他设置的保存
+const handleSave = async () => {
+  try {
+    await settingStore.saveSettings({
+      globalSetting: localGlobalSetting.value,
+      userSettings: localUserSettings.value,
+    });
     showNotify({ type: "success", message: "设置保存成功" });
   } catch (error) {
     showNotify({ type: "danger", message: "设置保存失败" });
   }
 };
+
+// 处理代理地址,去除协议前缀
+const handleProxyHostChange = (val: string) => {
+  // 移除 http:// 或 https:// 前缀
+  const cleanHost = val.replace(/^(https?:\/\/)/i, "");
+  // 更新状态
+  localGlobalSetting.value.httpProxyHost = cleanHost;
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/views/pc/Login.vue b/frontend/src/views/pc/Login.vue
new file mode 100644
index 0000000..fd9ce83
--- /dev/null
+++ b/frontend/src/views/pc/Login.vue
@@ -0,0 +1,354 @@
+<template>
+  <div class="login-page">
+    <div class="login-bg"></div>
+    <div class="login-card">
+      <div class="card-header">
+        <img src="@/assets/images/logo.png" alt="Logo" class="logo" />
+        <h1 class="title">欢迎回来</h1>
+        <p class="subtitle">登录您的账户以继续</p>
+      </div>
+
+      <el-tabs v-model="activeTab" class="login-tabs">
+        <el-tab-pane label="登录" name="login">
+          <el-form
+            ref="loginFormRef"
+            :model="loginForm"
+            :rules="loginRules"
+            @keyup.enter="handleLogin"
+          >
+            <el-form-item prop="username">
+              <el-input
+                v-model="loginForm.username"
+                placeholder="用户名"
+                :prefix-icon="User"
+                autocomplete="username"
+              />
+            </el-form-item>
+
+            <el-form-item prop="password">
+              <el-input
+                v-model="loginForm.password"
+                type="password"
+                placeholder="密码"
+                :prefix-icon="Lock"
+                show-password
+                autocomplete="current-password"
+              />
+            </el-form-item>
+
+            <div class="form-options">
+              <el-checkbox v-model="rememberPassword">记住密码</el-checkbox>
+            </div>
+
+            <el-button type="primary" class="submit-btn" :loading="loading" @click="handleLogin">
+              登录
+            </el-button>
+          </el-form>
+        </el-tab-pane>
+
+        <el-tab-pane label="注册" name="register">
+          <el-form ref="registerFormRef" :model="registerForm" :rules="registerRules">
+            <el-form-item prop="username">
+              <el-input v-model="registerForm.username" placeholder="用户名" :prefix-icon="User" />
+            </el-form-item>
+
+            <el-form-item prop="password">
+              <el-input
+                v-model="registerForm.password"
+                type="password"
+                placeholder="密码"
+                :prefix-icon="Lock"
+                show-password
+              />
+            </el-form-item>
+
+            <el-form-item prop="confirmPassword">
+              <el-input
+                v-model="registerForm.confirmPassword"
+                type="password"
+                placeholder="确认密码"
+                :prefix-icon="Lock"
+                show-password
+              />
+            </el-form-item>
+
+            <el-form-item prop="registerCode">
+              <el-input
+                v-model="registerForm.registerCode"
+                placeholder="注册码"
+                :prefix-icon="Key"
+              />
+            </el-form-item>
+
+            <el-button type="primary" class="submit-btn" :loading="loading" @click="handleRegister">
+              注册
+            </el-button>
+          </el-form>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+import { User, Lock, Key } from "@element-plus/icons-vue";
+import { userApi } from "@/api/user";
+import "@/styles/common.scss";
+import { STORAGE_KEYS } from "@/constants/storage";
+import type { FormItemRule } from "element-plus";
+
+// 状态
+const activeTab = ref("login");
+const loading = ref(false);
+const rememberPassword = ref(false);
+
+const loginForm = ref({
+  username: "",
+  password: "",
+});
+
+const registerForm = ref({
+  username: "",
+  password: "",
+  confirmPassword: "",
+  registerCode: "",
+});
+
+// 表单校验规则
+const loginRules = {
+  username: [
+    { required: true, message: "请输入用户名", trigger: "blur" },
+    { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" },
+  ],
+  password: [
+    { required: true, message: "请输入密码", trigger: "blur" },
+    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
+  ],
+};
+
+const registerRules = {
+  ...loginRules,
+  confirmPassword: [
+    { required: true, message: "请确认密码", trigger: "blur" },
+    {
+      validator: (_rule: FormItemRule, value: string, callback: (error?: Error) => void) => {
+        if (value !== registerForm.value.password) {
+          callback(new Error("两次输入密码不一致"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur",
+    },
+  ],
+  registerCode: [{ required: true, message: "请输入注册码", trigger: "blur" }],
+};
+
+const router = useRouter();
+const loginFormRef = ref();
+const registerFormRef = ref();
+
+// 记住密码相关
+onMounted(() => {
+  const savedUsername = localStorage.getItem(STORAGE_KEYS.USERNAME);
+  const savedPassword = localStorage.getItem(STORAGE_KEYS.PASSWORD);
+  if (savedUsername && savedPassword) {
+    loginForm.value.username = savedUsername;
+    loginForm.value.password = savedPassword;
+    rememberPassword.value = true;
+  }
+});
+
+// 登录处理
+const handleLogin = async () => {
+  if (!loginFormRef.value) return;
+
+  await loginFormRef.value.validate(async (valid: boolean) => {
+    if (valid) {
+      loading.value = true;
+      try {
+        const res = await userApi.login(loginForm.value);
+        if (res.code === 0) {
+          // 记住密码
+          if (rememberPassword.value) {
+            localStorage.setItem(STORAGE_KEYS.USERNAME, loginForm.value.username);
+            localStorage.setItem(STORAGE_KEYS.PASSWORD, loginForm.value.password);
+          } else {
+            localStorage.removeItem(STORAGE_KEYS.USERNAME);
+            localStorage.removeItem(STORAGE_KEYS.PASSWORD);
+          }
+
+          localStorage.setItem(STORAGE_KEYS.TOKEN, res.data.token);
+          ElMessage.success("登录成功");
+          router.push("/");
+        } else {
+          ElMessage.error(res.message || "登录失败");
+        }
+      } catch (error: unknown) {
+        ElMessage.error(error instanceof Error ? error.message : "登录失败");
+      } finally {
+        loading.value = false;
+      }
+    }
+  });
+};
+
+// 注册处理
+const handleRegister = async () => {
+  if (!registerFormRef.value) return;
+
+  await registerFormRef.value.validate(async (valid: boolean) => {
+    if (valid) {
+      loading.value = true;
+      try {
+        const res = await userApi.register({
+          username: registerForm.value.username,
+          password: registerForm.value.password,
+          registerCode: registerForm.value.registerCode,
+        });
+
+        if (res.code === 0) {
+          ElMessage.success("注册成功");
+          // 自动填充登录表单
+          loginForm.value.username = registerForm.value.username;
+          loginForm.value.password = registerForm.value.password;
+          activeTab.value = "login";
+          // 自动登录
+          handleLogin();
+        } else {
+          ElMessage.error(res.message || "注册失败");
+        }
+      } catch (error: unknown) {
+        ElMessage.error(error instanceof Error ? error.message : "注册失败");
+      } finally {
+        loading.value = false;
+      }
+    }
+  });
+};
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/common.scss";
+
+.login-page {
+  @include flex-center;
+  min-height: 100vh;
+  background: var(--theme-bg);
+  position: relative;
+}
+
+.login-bg {
+  position: fixed;
+  inset: 0;
+  background-image: url("@/assets/images/login-bg.jpg");
+  background-size: cover;
+  background-position: center;
+  filter: blur(3px);
+  z-index: 0;
+}
+
+.login-card {
+  @include glass-effect;
+  position: relative;
+  width: 420px;
+  padding: 32px;
+  border-radius: var(--theme-radius);
+  box-shadow: var(--theme-shadow);
+  z-index: 1;
+}
+
+.card-header {
+  text-align: center;
+  margin-bottom: 32px;
+
+  .logo {
+    width: 64px;
+    height: 64px;
+    margin-bottom: 16px;
+  }
+
+  .title {
+    font-size: 24px;
+    font-weight: 600;
+    color: var(--theme-text-primary);
+    margin-bottom: 8px;
+  }
+
+  .subtitle {
+    font-size: 14px;
+    color: var(--theme-text-secondary);
+  }
+}
+
+.login-tabs {
+  :deep(.el-tabs__nav-wrap::after) {
+    display: none;
+  }
+
+  :deep(.el-tabs__active-bar) {
+    background-color: var(--theme-primary);
+  }
+
+  :deep(.el-tabs__item) {
+    color: var(--theme-text-secondary);
+    font-size: 16px;
+
+    &.is-active {
+      color: var(--theme-primary);
+      font-weight: 500;
+    }
+  }
+}
+
+:deep(.el-form-item) {
+  margin-bottom: 24px;
+
+  .el-input__wrapper {
+    background-color: rgba(255, 255, 255, 0.5);
+    box-shadow: none;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    transition: var(--theme-transition);
+
+    &:hover {
+      border-color: var(--theme-primary);
+    }
+
+    &.is-focus {
+      border-color: var(--theme-primary);
+      box-shadow: 0 0 0 1px var(--theme-primary);
+    }
+  }
+
+  .el-input__inner {
+    height: 42px;
+  }
+}
+
+.form-options {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.submit-btn {
+  width: 100%;
+  height: 42px;
+  font-size: 16px;
+  border-radius: var(--theme-radius-sm);
+  background: var(--theme-primary);
+  transition: var(--theme-transition);
+
+  &:hover {
+    background: var(--theme-primary-hover);
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+}
+</style>