feat:版本迭代

2026-01-10 23:28:46 +08:00 · 2025-02-20 12:00:19 +08:00
parent fd110590af
commit 510fdc48f6
86 changed files with 5045 additions and 1161 deletions
--- a/frontend/auto-imports.d.ts
+++ b/frontend/auto-imports.d.ts
@@ -5,5 +5,5 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
 }
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -7,22 +7,44 @@ export {}

 declare module 'vue' {
  export interface GlobalComponents {
-    ElAlert: typeof import('element-plus/es')['ElAlert']
+    AsideMenu: typeof import('./src/components/AsideMenu.vue')['default']
+    DoubanMovie: typeof import('./src/components/Home/DoubanMovie.vue')['default']
+    ElAside: typeof import('element-plus/es')['ElAside']
    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"]
+    ElCol: typeof import('element-plus/es')['ElCol']
    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElEmpty: typeof import('element-plus/es')['ElEmpty']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
    ElIcon: typeof import('element-plus/es')['ElIcon']
    ElImage: typeof import('element-plus/es')['ElImage']
    ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
    ElLink: typeof import('element-plus/es')['ElLink']
+    ElMain: typeof import('element-plus/es')['ElMain']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
+    ElRow: typeof import('element-plus/es')['ElRow']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
    ElSwitch: typeof import('element-plus/es')['ElSwitch']
    ElTable: typeof import('element-plus/es')['ElTable']
    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
    ElTag: typeof import('element-plus/es')['ElTag']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
    ElTree: typeof import('element-plus/es')['ElTree']
-    FolderSelect: typeof import('./src/components/FolderSelect.vue')['default']
-    ResourceList: typeof import('./src/components/ResourceList.vue')['default']
+    FolderSelect: typeof import('./src/components/Home/FolderSelect.vue')['default']
+    ResourceCard: typeof import('./src/components/Home/ResourceCard.vue')['default']
+    ResourceList: typeof import('./src/components/Home/ResourceList.vue')['default']
+    ResourceTable: typeof import('./src/components/Home/ResourceTable.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
    SearchBar: typeof import('./src/components/SearchBar.vue')['default']
--- a/frontend/favicon.ico
+++ b/frontend/favicon.ico
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,7 +3,12 @@
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- 移动端适配  -->
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
+    />
+    <meta name="referrer" content="no-referrer" />
    <title>CloudSaver</title>
  </head>
  <body>
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,6 +20,7 @@
  "devDependencies": {
    "@types/node": "^20.11.25",
    "@vitejs/plugin-vue": "^5.0.4",
+    "sass": "^1.83.4",
    "typescript": "^5.4.2",
    "unplugin-auto-import": "^0.17.5",
    "unplugin-vue-components": "^0.26.0",
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -5,7 +5,32 @@
 </template>

 <style>
-#app {
-  height: 100vh;
-}
+  #app {
+    height: 100vh;
+  }
+  :root {
+    --theme-color: #3e3e3e;
+    --theme-theme: #133ab3;
+    --theme-background: #fafafa;
+    --theme-other_background: #ffffff;
+  }
+  html,
+  body {
+    margin: 0;
+    font-size: 15px;
+    font-family:
+      v-sans,
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      Segoe UI,
+      sans-serif,
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      Segoe UI Symbol;
+    line-height: 1.6;
+    color: var(--theme-color);
+    background-color: var(--theme-background);
+    word-wrap: break-word;
+  }
 </style>
--- a/frontend/src/api/cloud115.ts
+++ b/frontend/src/api/cloud115.ts
@@ -2,22 +2,22 @@ import request from "@/utils/request";
 import type { ShareInfoResponse, Folder, Save115FileParams } from "@/types";

 export const cloud115Api = {
-  async getShareInfo(shareCode: string, receiveCode = ""): Promise<ShareInfoResponse> {
-    const { data } = await request.get("/api/cloud115/share-info", {
+  async getShareInfo(shareCode: string, receiveCode = "") {
+    const { data } = await request.get<ShareInfoResponse>("/api/cloud115/share-info", {
      params: { shareCode, receiveCode },
    });
-    return data;
+    return data as ShareInfoResponse;
  },

-  async getFolderList(parentCid = "0"): Promise<{ data: Folder[] }> {
-    const { data } = await request.get("/api/cloud115/folders", {
+  async getFolderList(parentCid = "0") {
+    const res = await request.get<Folder[]>("/api/cloud115/folders", {
      params: { parentCid },
    });
-    return data;
+    return res;
  },

  async saveFile(params: Save115FileParams) {
-    const { data } = await request.post("/api/cloud115/save", params);
-    return data;
+    const res = await request.post("/api/cloud115/save", params);
+    return res;
  },
 };
--- a/frontend/src/api/douban.ts
+++ b/frontend/src/api/douban.ts
@@ -0,0 +1,11 @@
+import request from "@/utils/request";
+import { HotListItem, HotListParams } from "@/types/douban";
+
+export const doubanApi = {
+  async getHotList(params: HotListParams) {
+    const { data } = await request.get<HotListItem[]>("/api/douban/hot", {
+      params,
+    });
+    return data;
+  },
+};
--- a/frontend/src/api/quark.ts
+++ b/frontend/src/api/quark.ts
@@ -2,22 +2,21 @@ import request from "@/utils/request";
 import type { ShareInfoResponse, Folder, SaveQuarkFileParams } from "@/types";

 export const quarkApi = {
-  async getShareInfo(pwdId: string, passcode = ""): Promise<ShareInfoResponse> {
-    const { data } = await request.get("/api/quark/share-info", {
+  async getShareInfo(pwdId: string, passcode = "") {
+    const { data } = await request.get<ShareInfoResponse>("/api/quark/share-info", {
      params: { pwdId, passcode },
    });
-    return data;
+    return data as ShareInfoResponse;
  },

-  async getFolderList(parentCid = "0"): Promise<{ data: Folder[] }> {
-    const { data } = await request.get("/api/quark/folders", {
+  async getFolderList(parentCid = "0") {
+    const data = await request.get<Folder[]>("/api/quark/folders", {
      params: { parentCid },
    });
    return data;
  },

  async saveFile(params: SaveQuarkFileParams) {
-    const { data } = await request.post("/api/quark/save", params);
-    return data;
+    return await request.post("/api/quark/save", params);
  },
 };
--- a/frontend/src/api/resource.ts
+++ b/frontend/src/api/resource.ts
@@ -2,8 +2,8 @@ import request from "@/utils/request";
 import type { Resource } from "@/types/index";

 export const resourceApi = {
-  search(keyword: string, backupPlan: boolean, channelId?: string, lastMessageId?: string) {
-    return request.get<Resource[]>(`/api/${backupPlan ? "rssSearch" : "search"}`, {
+  search(keyword: string, channelId?: string, lastMessageId?: string) {
+    return request.get<Resource[]>(`/api/search`, {
      params: { keyword, channelId, lastMessageId },
    });
  },
--- a/frontend/src/api/setting.ts
+++ b/frontend/src/api/setting.ts
@@ -0,0 +1,17 @@
+import request from "@/utils/request";
+import type { GlobalSettingAttributes, UserSettingAttributes } from "@/types";
+
+export const settingApi = {
+  getSetting: () => {
+    return request.get<{
+      userSettings: UserSettingAttributes;
+      globalSetting: GlobalSettingAttributes;
+    }>("/api/setting/get");
+  },
+  saveSetting: (data: {
+    userSettings: UserSettingAttributes;
+    globalSetting?: GlobalSettingAttributes | null;
+  }) => {
+    return request.post("/api/setting/save", data);
+  },
+};
--- a/frontend/src/api/user.ts
+++ b/frontend/src/api/user.ts
@@ -0,0 +1,10 @@
+import request from "@/utils/request";
+
+export const userApi = {
+  login: (data: { username: string; password: string }) => {
+    return request.post<{ token: string }>("/api/user/login", data);
+  },
+  register: (data: { username: string; password: string }) => {
+    return request.post<{ token: string }>("/api/user/register", data);
+  },
+};
--- a/frontend/src/assets/images/login-bg.jpg
+++ b/frontend/src/assets/images/login-bg.jpg
--- a/frontend/src/assets/images/logo-1.png
+++ b/frontend/src/assets/images/logo-1.png
--- a/frontend/src/assets/images/logo.png
+++ b/frontend/src/assets/images/logo.png
--- a/frontend/src/components/AsideMenu.vue
+++ b/frontend/src/components/AsideMenu.vue
@@ -0,0 +1,155 @@
+<template>
+  <div class="aside-menu">
+    <div class="logo">
+      <img :src="logo" class="logo-img" />
+      <div class="logo-text">Cloud Saver</div>
+    </div>
+    <el-menu
+      :default-active="currentMenu?.index || '1'"
+      :default-openeds="currentMenuOpen"
+      class="el-menu-vertical"
+      @open="handleOpen"
+      @close="handleClose"
+    >
+      <template v-for="menu in menuList">
+        <el-sub-menu :index="menu.index" v-if="menu.children">
+          <template #title>
+            <el-icon><component :is="menu.icon" /></el-icon>
+            <span>{{ menu.title }}</span>
+          </template>
+          <el-menu-item
+            v-for="child in menu.children"
+            :index="child.index"
+            :key="child.index"
+            @click="handleMenuClick(child)"
+          >
+            {{ child.title }}
+          </el-menu-item>
+        </el-sub-menu>
+        <el-menu-item
+          v-else
+          :index="menu.index"
+          @click="handleMenuClick(menu)"
+          :disabled="menu.disabled"
+        >
+          <el-icon><component :is="menu.icon" /></el-icon>
+          <span>{{ menu.title }}</span>
+        </el-menu-item>
+      </template>
+    </el-menu>
+  </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";
+  import { computed } from "vue";
+  const router = useRouter();
+  const route = useRoute();
+  interface MenuItem {
+    index: string;
+    title: string;
+    icon?: any;
+    router?: string;
+    children?: MenuItem[];
+    disabled?: boolean;
+  }
+
+  const menuList: MenuItem[] = [
+    {
+      index: "2",
+      title: "资源搜索",
+      icon: Search,
+      router: "/",
+    },
+    {
+      index: "1",
+      title: "豆瓣榜单",
+      icon: Film,
+      children: [
+        {
+          index: "1-1",
+          title: "热门电影",
+          router: "/douban?type=movie",
+        },
+        {
+          index: "1-2",
+          title: "热门电视剧",
+          router: "/douban?type=tv",
+        },
+        {
+          index: "1-3",
+          title: "最新电影",
+          router: "/douban?type=movie&tag=最新",
+        },
+        {
+          index: "1-4",
+          title: "热门综艺",
+          router: "/douban?type=tv&tag=综艺",
+        },
+      ],
+    },
+    {
+      index: "3",
+      title: "设置",
+      icon: Setting,
+      router: "/setting",
+      disabled: false,
+    },
+  ];
+
+  const currentMenu = computed(() => {
+    console.log("route", decodeURIComponent(route.fullPath));
+    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 currentMenuOpen = computed(() => {
+    if (currentMenu.value && currentMenu.value.index.length > 1) {
+      console.log([currentMenu.value.index.split("-")[0]]);
+      return [currentMenu.value.index.split("-")[0]];
+    } else {
+      return [];
+    }
+  });
+  const handleOpen = (key: string, keyPath: string[]) => {
+    console.log(key, keyPath);
+  };
+  const handleClose = (key: string, keyPath: string[]) => {
+    console.log(key, keyPath);
+  };
+  const handleMenuClick = (menu: any) => {
+    console.log(menu);
+    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;
+    }
+    .logo-text {
+      font-size: 20px;
+    }
+  }
+</style>
--- a/frontend/src/components/Home/DoubanMovie.vue
+++ b/frontend/src/components/Home/DoubanMovie.vue
--- a/frontend/src/components/Home/FolderSelect.vue
+++ b/frontend/src/components/Home/FolderSelect.vue
@@ -30,6 +30,7 @@
  import { quarkApi } from "@/api/quark";
  import type { TreeInstance } from "element-plus";
  import type { Folder } from "@/types";
+  import { type RequestResult } from "@/types/response";
  import { ElMessage } from "element-plus";

  const props = defineProps({
@@ -58,13 +59,10 @@
    quark: quarkApi,
  };

-  const loadNode = async (node: any, resolve: (data: Folder[]) => void) => {
+  const loadNode = async (node: any, resolve: (list: Folder[]) => void) => {
    const api = cloudTypeApiMap[props.cloudType as keyof typeof cloudTypeApiMap];
    try {
-      let res: {
-        data: Folder[];
-        error?: string;
-      } = { data: [] };
+      let res: RequestResult<Folder[]> = { code: 0, data: [] as Folder[], message: "" };
      if (node.level === 0) {
        if (api.getFolderList) {
          // 使用类型保护检查方法是否存在
@@ -76,11 +74,10 @@
          res = await api.getFolderList(node.data.cid);
        }
      }
-      if (res.data?.length > 0) {
-        resolve(res.data);
+      if (res?.code === 0) {
+        resolve(res.data.length ? res.data : []);
      } else {
-        resolve([]);
-        throw new Error(res.error);
+        throw new Error(res.message);
      }
    } catch (error) {
      ElMessage.error(error instanceof Error ? `${error.message}` : "获取目录失败");
--- a/frontend/src/components/Home/ResourceCard.vue
+++ b/frontend/src/components/Home/ResourceCard.vue
@@ -0,0 +1,189 @@
+<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 class="card-item-list" v-show="group.displayList">
+        <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 class="tags-list" v-if="resource.tags && resource.tags.length">
+              <span>标签：</span>
+              <el-tag
+                v-for="item in resource.tags"
+                class="resource_tag"
+                :key="item"
+                @click="searchMovieforTag(item)"
+              >
+                {{ item }}
+              </el-tag>
+            </div>
+            <template #footer>
+              <div class="item-footer">
+                <el-tag
+                  :type="store.tagColor[resource.cloudType as keyof TagColor]"
+                  effect="dark"
+                  round
+                >
+                  {{ resource.cloudType }}
+                </el-tag>
+                <el-button @click="handleSave(resource)">转存</el-button>
+              </div>
+            </template>
+          </el-card>
+        </div>
+      </div>
+      <div class="load-more" v-show="group.displayList">
+        <el-button @click="handleLoadMore(group.id)"> 加载更多 </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useResourceStore } from "@/stores/resource";
+  import { computed } from "vue";
+  import type { ResourceItem, TagColor } from "@/types";
+
+  const store = useResourceStore();
+
+  const location = computed(() => window.location);
+
+  const emit = defineEmits(["save", "loadMore", "searchMovieforTag"]);
+
+  const handleSave = (resource: ResourceItem) => {
+    emit("save", resource);
+  };
+
+  const searchMovieforTag = (tag: string) => {
+    emit("searchMovieforTag", tag);
+  };
+
+  const handleLoadMore = (channelId: string) => {
+    emit("loadMore", channelId);
+  };
+</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;
+    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;
+    }
+    .header-icon {
+      cursor: pointer;
+      width: 50px;
+      height: 50px;
+    }
+  }
+  .item-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+</style>
--- a/frontend/src/components/Home/ResourceTable.vue
+++ b/frontend/src/components/Home/ResourceTable.vue
@@ -0,0 +1,197 @@
+<template>
+  <el-table
+    v-loading="store.loading"
+    class="resource-list-table"
+    :data="store.resources"
+    style="width: 100%"
+    row-key="id"
+    :default-expand-all="true"
+  >
+    <el-table-column type="expand">
+      <template #default="props">
+        <el-table :data="props.row.list" style="width: 100%">
+          <el-table-column label="图片" width="180">
+            <template #default="{ row }">
+              <el-image
+                class="table-item-image"
+                v-if="row.image"
+                :src="`/tele-images/?url=${encodeURIComponent(row.image as string)}`"
+                hide-on-click-modal
+                :preview-src-list="[
+                  `${location.origin}/tele-images/?url=${encodeURIComponent(row.image as string)}`,
+                ]"
+                :zoom-rate="1.2"
+                :max-scale="7"
+                :min-scale="0.2"
+                :initial-index="4"
+                preview-teleported
+                :z-index="999"
+                fit="cover"
+                width="60"
+                height="90"
+              />
+              <el-icon v-else size="20"><Close /></el-icon>
+            </template>
+          </el-table-column>
+          <el-table-column prop="title" label="标题" width="180">
+            <template #default="{ row }">
+              <el-link :href="row.cloudLinks[0]" target="_blank">
+                {{ row.title }}
+              </el-link>
+            </template>
+          </el-table-column>
+          <el-table-column prop="title" label="描述">
+            <template #default="{ row }">
+              <div v-html="row.content" class="item-description"></div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="tags" label="标签">
+            <template #default="{ row }">
+              <div class="tags-list" v-if="row.tags.length > 0">
+                <span>标签：</span>
+                <el-tag
+                  v-for="item in row.tags"
+                  class="resource_tag"
+                  :key="item"
+                  @click="searchMovieforTag(item)"
+                >
+                  {{ item }}
+                </el-tag>
+              </div>
+              <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>
+                {{ row.cloudType }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="180">
+            <template #default="{ row }">
+              <el-button @click="handleSave(row)">转存</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="load-more">
+          <el-button :loading="props.row.loading" @click="handleLoadMore(props.row.id)">
+            加载更多
+          </el-button>
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column label="来源" prop="channel">
+      <template #default="{ row }">
+        <div class="group-header">
+          <el-image :src="row.channelInfo.channelLogo" class="channel-logo" fit="cover" lazy />
+          <span>{{ row.channelInfo.name }}</span>
+          <span class="item-count">({{ row.list.length }})</span>
+        </div>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script setup lang="ts">
+  import { useResourceStore } from "@/stores/resource";
+  import type { Resource, TagColor } from "@/types";
+  import { computed } from "vue";
+
+  const store = useResourceStore();
+
+  const emit = defineEmits(["save", "loadMore", "searchMovieforTag"]);
+
+  const location = computed(() => window.location);
+
+  const handleSave = (resource: Resource) => {
+    emit("save", resource);
+  };
+
+  // 添加加载更多处理函数
+  const handleLoadMore = (channelId: string) => {
+    emit("loadMore", channelId);
+  };
+
+  const searchMovieforTag = (tag: string) => {
+    emit("searchMovieforTag", tag);
+  };
+</script>
+
+<style scoped>
+  .resource-list-table {
+    border-radius: 15px;
+  }
+
+  .group-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .channel-logo {
+    width: 20px;
+    height: 20px;
+    margin-right: 10px;
+    border-radius: 50%;
+    overflow: hidden;
+  }
+
+  .table-item-image {
+    border-radius: 20px;
+    width: 100%;
+    height: 220px;
+  }
+
+  .item-count {
+    color: #909399;
+    font-size: 0.9em;
+  }
+  .tags-list {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+  .resource_tag {
+    cursor: pointer;
+    margin-right: 10px;
+    margin-bottom: 5px;
+  }
+  .item-description {
+    max-width: 100%;
+    margin: 15px 0;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    overflow: hidden;
+    white-space: all;
+  }
+
+  :deep(.el-table__expand-column) {
+    .cell {
+      padding: 0 !important;
+    }
+  }
+
+  :deep(.el-table__expanded-cell) {
+    padding: 20px !important;
+  }
+
+  :deep(.el-table__expand-icon) {
+    height: 23px;
+    line-height: 23px;
+  }
+  .load-more {
+    display: flex;
+    justify-content: center;
+    padding: 16px 0;
+  }
+</style>
--- a/frontend/src/components/ResourceList.vue
+++ b/frontend/src/components/ResourceList.vue
@@ -1,221 +0,0 @@
-<template>
-  <div class="resource-list">
-    <el-table
-      v-loading="store.loading"
-      :data="groupedResources"
-      style="width: 100%"
-      row-key="id"
-      :default-expand-all="true"
-    >
-      <el-table-column type="expand">
-        <template #default="props">
-          <el-table :data="props.row.items" style="width: 100%">
-            <el-table-column label="图片" width="90">
-              <template #default="{ row }">
-                <el-image
-                  v-if="row.image"
-                  :src="row.image"
-                  :preview-src-list="[row.image]"
-                  :zoom-rate="1.2"
-                  :max-scale="7"
-                  :min-scale="0.2"
-                  :initial-index="4"
-                  preview-teleported
-                  :z-index="999"
-                  fit="cover"
-                  width="60"
-                  height="90"
-                />
-                <el-icon v-else size="20"><Close /></el-icon>
-              </template>
-            </el-table-column>
-            <el-table-column prop="title" label="标题" width="180" />
-            <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="tagColor[row.cloudType as keyof typeof tagColor]"
-                  effect="dark"
-                  round
-                >
-                  {{ row.cloudType }}
-                </el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" width="180">
-              <template #default="{ row }">
-                <el-button @click="handleSave(row)">转存</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-          <div v-if="props.row.hasMore" class="load-more">
-            <el-button :loading="props.row.loading" @click="handleLoadMore(props.row.channel)">
-              加载更多
-            </el-button>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="来源" prop="channel">
-        <template #default="{ row }">
-          <div class="group-header">
-            <span>{{ row.channel }}</span>
-            <span class="item-count">({{ row.items.length }})</span>
-          </div>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <el-dialog v-model="folderDialogVisible" title="选择保存目录" v-if="currentResource">
-      <template #header="{ titleId }">
-        <div class="my-header">
-          <div :id="titleId">
-            <el-tag
-              :type="tagColor[currentResource.cloudType as keyof typeof tagColor]"
-              effect="dark"
-              round
-            >
-              {{ currentResource.cloudType }}
-            </el-tag>
-            选择保存目录
-          </div>
-        </div>
-      </template>
-      <folder-select
-        v-if="folderDialogVisible"
-        @select="handleFolderSelect"
-        @close="folderDialogVisible = false"
-        :cloudType="currentResource.cloudType"
-      />
-      <div class="dialog-footer">
-        <el-button @click="folderDialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="handleSaveBtnClick">保存</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref, computed } from "vue";
-  import { useResourceStore } from "@/stores/resource";
-  import FolderSelect from "./FolderSelect.vue";
-  import type { Resource } from "@/types";
-
-  const tagColor = {
-    baiduPan: "primary",
-    weiyun: "info",
-    aliyun: "warning",
-    pan115: "danger",
-    quark: "success",
-  };
-
-  const store = useResourceStore();
-  const folderDialogVisible = ref(false);
-  const currentResource = ref<Resource | null>(null);
-  const currentFolderId = ref<string | null>(null);
-
-  // 按来源分组的数据
-  const groupedResources = computed(() => {
-    const groups = store.resources.reduce(
-      (acc, curr) => {
-        const channel = curr.channel;
-        const channelId = curr.channelId;
-        if (!acc[channel]) {
-          acc[channel] = {
-            channel,
-            items: [],
-            hasMore: true,
-            loading: false, // 添加 loading 状态
-            id: channelId || "", // 用于row-key
-          };
-        }
-        acc[channel].items.push(curr);
-        return acc;
-      },
-      {} as Record<
-        string,
-        { channel: string; items: Resource[]; id: string; hasMore: boolean; loading: boolean }
-      >
-    );
-
-    return Object.values(groups);
-  });
-
-  const handleSave = (resource: Resource) => {
-    currentResource.value = resource;
-    folderDialogVisible.value = true;
-  };
-
-  const handleFolderSelect = async (folderId: string) => {
-    if (!currentResource.value) return;
-    currentFolderId.value = folderId;
-  };
-
-  const handleSaveBtnClick = async () => {
-    if (!currentResource.value || !currentFolderId.value) return;
-    folderDialogVisible.value = false;
-    await store.saveResource(currentResource.value, currentFolderId.value);
-  };
-
-  // 添加加载更多处理函数
-  const handleLoadMore = async (channel: string) => {
-    const group = groupedResources.value.find((g) => g.channel === channel);
-    if (!group || group.loading) return;
-
-    group.loading = true;
-    try {
-      const lastMessageId = group.items[group.items.length - 1].messageId;
-      store.searchResources("", false, true, group.id, lastMessageId);
-    } finally {
-      group.loading = false;
-    }
-  };
-</script>
-
-<style scoped>
-  .resource-list {
-    margin-top: 20px;
-  }
-
-  .dialog-footer {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-
-  .group-header {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .item-count {
-    color: #909399;
-    font-size: 0.9em;
-  }
-
-  :deep(.el-table__expand-column) {
-    .cell {
-      padding: 0 !important;
-    }
-  }
-
-  :deep(.el-table__expanded-cell) {
-    padding: 20px !important;
-  }
-
-  :deep(.el-table__expand-icon) {
-    height: 23px;
-    line-height: 23px;
-  }
-  .load-more {
-    display: flex;
-    justify-content: center;
-    padding: 16px 0;
-  }
-</style>
--- a/frontend/src/components/SearchBar.vue
+++ b/frontend/src/components/SearchBar.vue
@@ -1,70 +1,115 @@
 <template>
  <div class="search-bar">
-    <el-input
-      v-model="keyword"
-      placeholder="请输入搜索关键词与输入链接直接解析"
-      class="input-with-select"
-      @keyup.enter="handleSearch"
-      style="margin-bottom: 8px"
-    >
-      <template #append>
-        <el-button type="success" @click="handleSearch">{{ searchBtnText }}</el-button>
-      </template>
-    </el-input>
-    <el-alert
-      title="可直接输入链接进行资源解析，也可进行资源搜索！"
-      type="info"
-      show-icon
-      :closable="false"
-    />
-    <div class="search-new">
-      <el-button type="primary" @click="handleSearchNew">最新资源</el-button>
-      <div class="switch-source">
-        <el-switch v-model="backupPlan" /><span class="label">使用rsshub(较慢)</span>
-      </div>
+    <div class="search-bar__input">
+      <input
+        v-model="keyword"
+        type="text"
+        placeholder="请输入搜索关键词或输入链接直接解析"
+        class="input-with-select"
+        @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>
+      </el-tooltip>
    </div>
  </div>
 </template>

 <script setup lang="ts">
-  import { effect, ref } from "vue";
+  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 backupPlan = ref(false);
-  const store = useResourceStore();
-  const searchBtnText = ref("搜索");
-
-  effect(() => {
-    // 监听搜索关键词的变化，如果存在，则自动触发搜索
-    if (keyword.value && keyword.value.startsWith("http")) {
-      searchBtnText.value = "解析";
-    } else {
-      searchBtnText.value = "搜索";
-    }
-  });
-
+  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")) {
-      store.parsingCloudLink(keyword.value);
+      resourcStore.parsingCloudLink(keyword.value);
      return;
    }
    if (!keyword.value.trim()) {
      return;
    }
-    await store.searchResources(keyword.value, backupPlan.value);
+    await resourcStore.searchResources(keyword.value);
+    if(route.path !== '/'){
+      router.push({ path: '/' });
+    }
  };

-  const handleSearchNew = async () => {
-    keyword.value = "";
-    await store.searchResources("", backupPlan.value);
-  };
+  watch(() => routeKeyword.value, () => {
+    if(routeKeyword.value){
+      keyword.value = routeKeyword.value;
+      handleSearch();
+    } else {
+      keyword.value = ''
+    }
+  });
+
+
 </script>

-<style scoped>
+<style scoped lang="scss">
  .search-bar {
-    padding: 20px;
+    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;
+    }
  }

  .search-new {
@@ -79,4 +124,7 @@
  .switch-source .label {
    margin-left: 5px;
  }
+  .display-style {
+    margin-left: 20px;
+  }
 </style>
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -1,12 +1,35 @@
 import { createRouter, createWebHistory } from "vue-router";
 import type { RouteRecordRaw } from "vue-router";
-import HomeView from "@/views/HomeView.vue";
+import Login from "@/views/Login.vue";
+import Home from "@/views/Home.vue";

 const routes: RouteRecordRaw[] = [
  {
    path: "/",
    name: "home",
-    component: HomeView,
+    component: Home,
+    children: [
+      {
+        path: "",
+        name: "resource",
+        component: () => import("@/views/ResourceList.vue"),
+      },
+      {
+        path: "/douban",
+        name: "douban",
+        component: () => import("@/views/Douban.vue"),
+      },
+      {
+        path: "/setting",
+        name: "setting",
+        component: () => import("@/views/Setting.vue"),
+      },
+    ],
+  },
+  {
+    path: "/login",
+    name: "login",
+    component: Login,
  },
 ];

--- a/frontend/src/stores/douban.ts
+++ b/frontend/src/stores/douban.ts
@@ -0,0 +1,50 @@
+import { defineStore } from "pinia";
+import { doubanApi } from "@/api/douban";
+import { HotListItem } from "@/types/douban";
+import { ElMessage } from "element-plus";
+
+interface StoreType {
+  hotList: HotListItem[];
+  currentParams: CurrentParams;
+}
+
+interface CurrentParams {
+  type: string;
+  tag?: string;
+}
+
+export const useDoubanStore = defineStore("douban", {
+  state: (): StoreType => ({
+    hotList: [],
+    currentParams: {
+      type: "movie",
+      tag: "热门",
+    },
+  }),
+
+  actions: {
+    async getHotList() {
+      try {
+        const params = {
+          type: this.currentParams.type,
+          tag: this.currentParams.tag || "热门",
+          page_limit: "20",
+          page_start: "0",
+        };
+        const result = await doubanApi.getHotList(params);
+        if (result && result.length > 0) {
+          this.hotList = result;
+        } else {
+          console.log("获取热门列表失败");
+          ElMessage.warning("获取热门列表失败");
+        }
+      } catch (error) {
+        ElMessage.error(error || "获取热门列表失败");
+      }
+    },
+    setCurrentParams(currentParams: CurrentParams) {
+      this.currentParams = currentParams;
+      this.getHotList();
+    },
+  },
+});
--- a/frontend/src/stores/index.ts
+++ b/frontend/src/stores/index.ts
@@ -0,0 +1,17 @@
+import { defineStore } from "pinia";
+
+interface StoreType {
+  scrollTop: boolean;
+}
+
+export const useStore = defineStore("global", {
+  state: (): StoreType => ({
+    scrollTop: true,
+  }),
+
+  actions: {
+    setScrollTop(top: boolean) {
+      this.scrollTop = top;
+    },
+  },
+});
--- a/frontend/src/stores/resource.ts
+++ b/frontend/src/stores/resource.ts
@@ -2,9 +2,26 @@ import { defineStore } from "pinia";
 import { cloud115Api } from "@/api/cloud115";
 import { resourceApi } from "@/api/resource";
 import { quarkApi } from "@/api/quark";
-import type { Resource, ShareInfoResponse, Save115FileParams, SaveQuarkFileParams } from "@/types";
+import type {
+  Resource,
+  ShareInfoResponse,
+  Save115FileParams,
+  SaveQuarkFileParams,
+  ResourceItem,
+} from "@/types";
 import { ElMessage } from "element-plus";

+interface StorageListObject {
+  list: Resource[];
+  lastUpdateTime?: string;
+}
+
+const lastResource = (
+  localStorage.getItem("last_resource_list")
+    ? JSON.parse(localStorage.getItem("last_resource_list") as string)
+    : { list: [] }
+) as StorageListObject;
+
 // 定义云盘驱动配置类型
 interface CloudDriveConfig {
  name: string;
@@ -12,7 +29,7 @@ interface CloudDriveConfig {
  regex: RegExp;
  api: {
    getShareInfo: (parsedCode: any) => Promise<ShareInfoResponse>;
-    saveFile: (params: Record<string, any>) => Promise<{ success: boolean; error?: string }>;
+    saveFile: (params: Record<string, any>) => Promise<any>;
  };
  parseShareCode: (match: RegExpMatchArray) => Record<string, string>;
  getSaveParams: (shareInfo: ShareInfoResponse, folderId: string) => Record<string, any>;
@@ -23,20 +40,20 @@ export const CLOUD_DRIVES: CloudDriveConfig[] = [
  {
    name: "115网盘",
    type: "pan115",
-    regex: /(?:115|anxia)\.com\/s\/([^?]+)(?:\?password=([^#]+))?/,
+    regex: /(?:115|anxia|115cdn)\.com\/s\/([^?]+)(?:\?password=([^&#]+))?/,
    api: {
      getShareInfo: (parsedCode: { shareCode: string; receiveCode: string }) =>
        cloud115Api.getShareInfo(parsedCode.shareCode, parsedCode.receiveCode),
-      saveFile: (params) => cloud115Api.saveFile(params as Save115FileParams),
+      saveFile: async (params) => await cloud115Api.saveFile(params as Save115FileParams),
    },
    parseShareCode: (match) => ({
      shareCode: match[1],
      receiveCode: match[2] || "",
    }),
    getSaveParams: (shareInfo, folderId) => ({
-      shareCode: shareInfo.data.shareCode,
-      receiveCode: shareInfo.data.receiveCode,
-      fileId: shareInfo.data.list[0].fileId,
+      shareCode: shareInfo.shareCode,
+      receiveCode: shareInfo.receiveCode,
+      fileId: shareInfo.list[0].fileId,
      folderId,
    }),
  },
@@ -46,15 +63,15 @@ export const CLOUD_DRIVES: CloudDriveConfig[] = [
    regex: /pan\.quark\.cn\/s\/([a-zA-Z0-9]+)/,
    api: {
      getShareInfo: (parsedCode: { pwdId: string }) => quarkApi.getShareInfo(parsedCode.pwdId),
-      saveFile: (params) => quarkApi.saveFile(params as SaveQuarkFileParams),
+      saveFile: async (params) => await quarkApi.saveFile(params as SaveQuarkFileParams),
    },
    parseShareCode: (match) => ({ pwdId: match[1] }),
    getSaveParams: (shareInfo, folderId) => ({
-      fid_list: shareInfo.data.list.map((item) => item.fileId || ""),
-      fid_token_list: shareInfo.data.list.map((item) => item.fileIdToken || ""),
+      fid_list: shareInfo.list.map((item) => item.fileId || ""),
+      fid_token_list: shareInfo.list.map((item) => item.fileIdToken || ""),
      to_pdir_fid: folderId,
-      pwd_id: shareInfo.data.pwdId || "",
-      stoken: shareInfo.data.stoken || "",
+      pwd_id: shareInfo.pwdId || "",
+      stoken: shareInfo.stoken || "",
      pdir_fid: "0",
      scene: "link",
    }),
@@ -63,7 +80,15 @@ export const CLOUD_DRIVES: CloudDriveConfig[] = [

 export const useResourceStore = defineStore("resource", {
  state: () => ({
-    resources: [] as Resource[],
+    tagColor: {
+      baiduPan: "primary",
+      weiyun: "info",
+      aliyun: "warning",
+      pan115: "danger",
+      quark: "success",
+    },
+    resources: lastResource.list,
+    lastUpdateTime: lastResource.lastUpdateTime || "",
    selectedResources: [] as Resource[],
    loading: false,
    lastKeyWord: "",
@@ -72,65 +97,64 @@ export const useResourceStore = defineStore("resource", {

  actions: {
    // 搜索资源
-    async searchResources(
-      keyword?: string,
-      backupPlan = false,
-      isLoadMore = false,
-      channelId?: string,
-      lastMessageId?: string
-    ): Promise<void> {
+    async searchResources(keyword?: string, isLoadMore = false, channelId?: string): Promise<void> {
      this.loading = true;
      if (!isLoadMore) this.resources = [];
      try {
+        let lastMessageId = "";
        if (isLoadMore) {
+          const list = this.resources.find((x) => x.id === channelId)?.list || [];
+          lastMessageId = list[list.length - 1].messageId || "";
          if (!lastMessageId) {
            ElMessage.error("当次搜索源不支持加载更多");
            return;
          }
          keyword = this.lastKeyWord;
-          backupPlan = this.backupPlan;
        }
-        const { data } = await resourceApi.search(
-          keyword || "",
-          backupPlan,
-          channelId,
-          lastMessageId
-        );
+        let { data = [] } = await resourceApi.search(keyword || "", channelId, lastMessageId);
+        data = data.filter((item) => item.list.length > 0);
        this.lastKeyWord = keyword || "";
        if (isLoadMore) {
-          this.resources.push(
-            ...data.filter(
-              (item) => !this.selectedResources.some((selectedItem) => selectedItem.id === item.id)
-            )
-          );
+          const findedIndex = this.resources.findIndex((item) => item.id === data[0]?.id);
+          if (findedIndex !== -1) {
+            this.resources[findedIndex].list.push(...data[0].list);
+          }
+          if (data.length === 0) {
+            ElMessage.warning("没有更多了~");
+          }
        } else {
-          this.resources = data;
+          this.resources = data.map((item) => ({ ...item, displayList: true }));
+          if (this.resources.length === 0) {
+            ElMessage.warning("未搜索到相关资源");
+          }
        }
+        // 获取当前时间字符串 用于存储到本地
+        this.lastUpdateTime = new Date().toLocaleString();
+        localStorage.setItem(
+          "last_resource_list",
+          JSON.stringify({ list: this.resources, lastUpdateTime: this.lastUpdateTime })
+        );
      } catch (error) {
-        this.handleError("搜索失败，请重试", error);
+        this.handleError("搜索失败，请重试", null);
      } finally {
        this.loading = false;
      }
    },

    // 转存资源
-    async saveResource(resource: Resource, folderId: string): Promise<void> {
-      try {
-        const savePromises: Promise<void>[] = [];
-        CLOUD_DRIVES.forEach((drive) => {
-          if (resource.cloudLinks.some((link) => drive.regex.test(link))) {
-            savePromises.push(this.saveResourceToDrive(resource, folderId, drive));
-          }
-        });
-        await Promise.all(savePromises);
-      } catch (error) {
-        this.handleError("转存失败，请重试", error);
-      }
+    async saveResource(resource: ResourceItem, folderId: string): Promise<void> {
+      const savePromises: Promise<void>[] = [];
+      CLOUD_DRIVES.forEach((drive) => {
+        if (resource.cloudLinks.some((link) => drive.regex.test(link))) {
+          savePromises.push(this.saveResourceToDrive(resource, folderId, drive));
+        }
+      });
+      await Promise.all(savePromises);
    },

    // 保存资源到网盘
    async saveResourceToDrive(
-      resource: Resource,
+      resource: ResourceItem,
      folderId: string,
      drive: CloudDriveConfig
    ): Promise<void> {
@@ -141,27 +165,28 @@ export const useResourceStore = defineStore("resource", {
      if (!match) throw new Error("链接解析失败");

      const parsedCode = drive.parseShareCode(match);
-      try {
-        let shareInfo = await drive.api.getShareInfo(parsedCode);
-        if (shareInfo?.data) {
+
+      let shareInfo = await drive.api.getShareInfo(parsedCode);
+      if (shareInfo) {
+        if (Array.isArray(shareInfo)) {
+          shareInfo = {
+            list: shareInfo,
+            ...parsedCode,
+          };
+        } else {
          shareInfo = {
            ...shareInfo,
-            data: {
-              ...shareInfo.data,
-              ...parsedCode,
-            },
+            ...parsedCode,
          };
        }
-        const params = drive.getSaveParams(shareInfo, folderId);
-        const result = await drive.api.saveFile(params);
+      }
+      const params = drive.getSaveParams(shareInfo, folderId);
+      const result = await drive.api.saveFile(params);

-        if (result.success) {
-          ElMessage.success(`${drive.name} 转存成功`);
-        } else {
-          throw new Error(result.error);
-        }
-      } catch (error) {
-        throw new Error(error instanceof Error ? error.message : `${drive.name} 转存失败`);
+      if (result.code === 0) {
+        ElMessage.success(`${drive.name} 转存成功`);
+      } else {
+        ElMessage.error(result.message);
      }
    },

@@ -177,17 +202,33 @@ export const useResourceStore = defineStore("resource", {
        if (!match) throw new Error("链接解析失败");

        const parsedCode = matchedDrive.parseShareCode(match);
-        const shareInfo = await matchedDrive.api.getShareInfo(parsedCode);
+        let shareInfo = await matchedDrive.api.getShareInfo(parsedCode);
+        if (Array.isArray(shareInfo)) {
+          shareInfo = {
+            list: shareInfo,
+          };
+        }

-        if (shareInfo?.data?.list?.length) {
+        if (shareInfo?.list?.length) {
          this.resources = [
            {
-              id: "1",
-              title: shareInfo.data.list.map((item) => item.fileName).join(", "),
-              cloudLinks: [url],
-              cloudType: matchedDrive.type,
-              channel: matchedDrive.name,
-              pubDate: "",
+              id: "",
+              channelInfo: {
+                name: "自定义搜索",
+                channelLogo: "",
+                channelId: "",
+              },
+              displayList: true,
+              list: [
+                {
+                  id: "1",
+                  title: shareInfo.list.map((item) => item.fileName).join(", "),
+                  cloudLinks: [url],
+                  cloudType: matchedDrive.type,
+                  channel: matchedDrive.name,
+                  pubDate: "",
+                },
+              ],
            },
          ];
        } else {
--- a/frontend/src/stores/userSetting.ts
+++ b/frontend/src/stores/userSetting.ts
@@ -0,0 +1,42 @@
+import { defineStore } from "pinia";
+import type { UserSettingStore } from "@/types/user";
+import { settingApi } from "@/api/setting";
+import { ElMessage } from "element-plus";
+
+export const useUserSettingStore = defineStore("user", {
+  state: (): UserSettingStore => ({
+    globalSetting: null,
+    userSettings: {
+      cloud115Cookie: "",
+      quarkCookie: "",
+    },
+    displayStyle: "card",
+  }),
+
+  actions: {
+    async getSettings() {
+      const { data } = await settingApi.getSetting();
+      if (data) {
+        this.globalSetting = data.globalSetting;
+        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("保存成功");
+        }
+      }
+    },
+    setDisplayStyle(style: "table" | "card") {
+      this.displayStyle = style;
+      ElMessage.success(`切换成功，当前为${style}模式`);
+    },
+  },
+});
--- a/frontend/src/styles/global.scss
+++ b/frontend/src/styles/global.scss
@@ -0,0 +1,11 @@
+:root {
+    --theme-color: #3e3e3e;
+    --theme-theme: #133ab3;
+    --theme-background: #fafafa;
+    --theme-other_background: #ffffff;
+}
+
+input {
+    border: none;
+    outline: none;
+}
--- a/frontend/src/types/douban.ts
+++ b/frontend/src/types/douban.ts
@@ -0,0 +1,18 @@
+export interface HotListParams {
+  type: string;
+  tag?: string;
+  page_limit?: string;
+  page_start?: string;
+}
+export interface HotListItem {
+  cover: string;
+  cover_x: number;
+  cover_y: number;
+  episodes_info: string;
+  id: string;
+  is_new: boolean;
+  playable: boolean;
+  rate: string;
+  title: string;
+  url: string;
+}
--- a/frontend/src/types/globals.d.ts
+++ b/frontend/src/types/globals.d.ts
@@ -0,0 +1,15 @@
+declare global {
+  interface Location {
+    // 根据你的需求定义 location 的属性和方法
+    pathname: string;
+    search: string;
+    hash: string;
+    host: string;
+    // 其他属性和方法...
+  }
+  interface Window {
+    location: Location;
+  }
+}
+
+export {};
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -1,14 +1,28 @@
-export interface Resource {
+export interface ResourceItem {
  id: string;
  title: string;
  channel: string;
  channelId?: string;
+  image?: string;
  cloudLinks: string[];
+  tags?: string[];
+  content?: string;
  pubDate: string;
  cloudType: string;
  messageId?: string;
 }

+export interface Resource {
+  list: ResourceItem[];
+  displayList?: boolean;
+  channelInfo: {
+    channelId: string;
+    name: string;
+    channelLogo: string;
+  };
+  id: string;
+}
+
 export interface ShareInfo {
  fileId: string;
  fileName: string;
@@ -17,13 +31,11 @@ export interface ShareInfo {
 }

 export interface ShareInfoResponse {
-  data: {
-    list: ShareInfo[];
-    pwdId?: string;
-    stoken?: string;
-    shareCode?: string;
-    receiveCode?: string;
-  };
+  list: ShareInfo[];
+  pwdId?: string;
+  stoken?: string;
+  shareCode?: string;
+  receiveCode?: string;
 }

 export interface Folder {
@@ -61,3 +73,23 @@ export interface SaveQuarkFileParams {
  pdir_fid: string;
  scene: string;
 }
+
+export interface TagColor {
+  baiduPan: string;
+  weiyun: string;
+  aliyun: string;
+  pan115: string;
+  quark: string;
+}
+
+export interface GlobalSettingAttributes {
+  httpProxyHost: string;
+  httpProxyPort: number | string;
+  isProxyEnabled: boolean;
+  AdminUserCode: number;
+  CommonUserCode: number;
+}
+export interface UserSettingAttributes {
+  cloud115Cookie: string;
+  quarkCookie: string;
+}
--- a/frontend/src/types/response.ts
+++ b/frontend/src/types/response.ts
@@ -0,0 +1,15 @@
+export type RequestErrorCode = -1 | 400 | 401 | 402 | 403 | 500 | 501;
+
+export interface RequestSuccess<T> {
+  code: 0;
+  data: T;
+  message: string;
+}
+
+export interface RequestError<T> {
+  code: RequestErrorCode;
+  message: string;
+  data?: T;
+}
+
+export type RequestResult<T> = RequestSuccess<T> | RequestError<T>;
--- a/frontend/src/types/user.ts
+++ b/frontend/src/types/user.ts
@@ -0,0 +1,6 @@
+import { GlobalSettingAttributes, UserSettingAttributes } from "@/types";
+export interface UserSettingStore {
+  globalSetting?: GlobalSettingAttributes | null;
+  userSettings: UserSettingAttributes;
+  displayStyle?: "table" | "card";
+}
--- a/frontend/src/utils/request.ts
+++ b/frontend/src/utils/request.ts
@@ -1,28 +1,63 @@
 import axios, { AxiosResponse } from "axios";
 import { ElMessage } from "element-plus";
+import { RequestResult } from "../types/response";

-const request = axios.create({
+const axiosInstance = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL as string,
-  timeout: 60000,
+  timeout: 9000,
  withCredentials: true,
  headers: {
    "Content-Type": "application/json",
  },
 });

-request.interceptors.response.use(
-  (response: AxiosResponse) => {
-    const res = response.data;
-    if (!res.success) {
-      ElMessage.error(res.error || "请求失败");
-      return Promise.reject(new Error(res.error || "请求失败"));
+function isLoginAndRedirect(url: string) {
+  return url.includes("/api/user/login") || url.includes("/api/user/register");
+}
+
+axiosInstance.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem("token");
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    } else if (!isLoginAndRedirect(config.url || "")) {
+      ElMessage.error("请先登录");
+      window.location.href = "/login";
    }
-    return res;
+    return config;
  },
  (error) => {
-    ElMessage.error(error.message || "网络错误");
    return Promise.reject(error);
  }
 );

+axiosInstance.interceptors.response.use(
+  (response: AxiosResponse) => {
+    const res = response.data;
+    return res;
+  },
+  (error) => {
+    if (error.response.status === 401) {
+      ElMessage.error("登录过期，请重新登录");
+      localStorage.removeItem("token");
+      window.location.href = "/login";
+      return Promise.reject(new Error("登录过期，请重新登录"));
+    }
+    ElMessage.error(error.response.statusText);
+    return Promise.reject(new Error(error.response.statusText));
+  }
+);
+
+const request = {
+  get: <T>(
+    url: string,
+    config?: Record<string, any>
+  ): Promise<RequestResult<T>> => {
+    return axiosInstance.get(url, { ...config });
+  },
+  post: axiosInstance.post,
+  put: axiosInstance.put,
+  delete: axiosInstance.delete,
+};
+
 export default request;
--- a/frontend/src/views/Douban.vue
+++ b/frontend/src/views/Douban.vue
@@ -0,0 +1,149 @@
+<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>
+        </div>
+      </div>
+      <div class="movie-info">
+        <el-link :href="movie.url" target="_blank" :underline="false" class="movie-title">{{
+          movie.title
+        }}</el-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, watch } from "vue";
+  import { useRouter, useRoute } from "vue-router";
+  import { useDoubanStore } from "@/stores/douban";
+  interface CurrentParams {
+    type: string;
+    tag?: string;
+  }
+  const router = useRouter();
+  const route = useRoute();
+
+  const routeParams = computed(
+    (): CurrentParams => ({ ...route.query }) as unknown as CurrentParams
+  );
+  const doubanStore = useDoubanStore();
+  if (routeParams.value) {
+    doubanStore.setCurrentParams(routeParams.value);
+  }
+
+  watch(
+    () => routeParams.value,
+    () => {
+      console.log(routeParams.value);
+      doubanStore.setCurrentParams(routeParams.value);
+    }
+  );
+
+  const searchMovie = (title: string) => {
+    router.push({ path: "/", query: { keyword: title } });
+  };
+</script>
+
+<style scoped>
+  .movie-wall {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 200px);
+    grid-row-gap: 15px;
+    justify-content: space-between;
+  }
+
+  .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; /* 设置图片圆角 */
+    box-sizing: border-box;
+    padding-bottom: 0px;
+    position: relative;
+    padding: 15px;
+    padding-bottom: 0;
+  }
+
+  .movie-poster-img {
+    width: 100%;
+    height: 220px;
+    object-fit: cover; /* 确保图片使用cover模式 */
+    border-radius: 15px; /* 设置图片圆角 */
+    overflow: hidden;
+  }
+  .movie-info {
+    /* margin-top: 8px; */
+    .movie-title {
+      font-size: 16px;
+      font-weight: bold;
+      padding: 10px 0;
+    }
+  }
+  .movie-poster {
+    width: 100%;
+    height: 220px;
+    position: relative;
+    overflow: hidden;
+    border-radius: 15px;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+  }
+
+  .movie-poster-hover {
+    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;
+  }
+
+  .movie-poster:hover .movie-poster-hover {
+    opacity: 1; /* 鼠标移入时显示 */
+  }
+
+  .movie-rate {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background-color: rgba(88, 83, 250, 0.8);
+    color: white;
+    padding: 0px 8px;
+    border-radius: 5px;
+    font-size: 14px;
+  }
+  .movie-search {
+    color: white;
+    border-radius: 5px;
+    font-size: 14px;
+    cursor: pointer;
+  }
+</style>
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="home" v-loading="resourcStore.loading" 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 }">
+          <search-bar />
+        </el-header>
+        <el-main class="home-main-main">
+          <router-view />
+        </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>
+  <!-- <login v-else /> -->
+</template>
+
+<script setup lang="ts">
+  import { useResourceStore } from "@/stores/resource";
+  import { useStore } from "@/stores/index";
+  import { useUserSettingStore } from "@/stores/userSetting";
+  import { onUnmounted } from "vue";
+  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);
+  onUnmounted(() => {
+    window.removeEventListener("scroll", handleScroll);
+  });
+</script>
+
+<style scoped lang="scss">
+  .home {
+    // padding: 20px;
+    min-width: 1000px;
+    height: 100vh;
+    overflow: hidden;
+    margin: 0 auto;
+  }
+  .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;
+  }
+  .home-main {
+    width: 1000px;
+    height: 100vh;
+    overflow: auto;
+  }
+  .home-main-main {
+    padding: 10px 15px;
+  }
+  .home-aside {
+    width: 300px;
+  }
+</style>
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,32 +0,0 @@
-<template>
-  <div class="home">
-    <search-bar />
-    <resource-list />
-    <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>
-</template>
-
-<script setup lang="ts">
-  import SearchBar from "@/components/SearchBar.vue";
-  import ResourceList from "@/components/ResourceList.vue";
-</script>
-
-<style scoped>
-  .home {
-    padding: 20px;
-  }
-</style>
--- a/frontend/src/views/Login.vue
+++ b/frontend/src/views/Login.vue
@@ -0,0 +1,259 @@
+<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'"
+        :model="loginForm"
+        :rules="loginRules"
+        ref="loginFormRef"
+        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'"
+        :model="registerForm"
+        :rules="registerRules"
+        ref="registerFormRef"
+        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";
+
+  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>
--- a/frontend/src/views/ResourceList.vue
+++ b/frontend/src/views/ResourceList.vue
@@ -0,0 +1,186 @@
+<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>
+      <div class="header_right">
+        <el-icon
+          class="type_icon"
+          v-if="userStore.displayStyle === 'card'"
+          @click="setDisplayStyle('table')"
+          ><Menu
+        /></el-icon>
+        <el-icon v-else class="type_icon" @click="setDisplayStyle('card')"><Fold /></el-icon>
+      </div>
+    </div>
+    <ResourceTable
+      @loadMore="handleLoadMore"
+      @searchMovieforTag="searchMovieforTag"
+      @save="handleSave"
+      v-if="userStore.displayStyle === 'table'"
+    ></ResourceTable>
+    <ResourceCard
+      @loadMore="handleLoadMore"
+      @searchMovieforTag="searchMovieforTag"
+      @save="handleSave"
+      v-else
+    ></ResourceCard>
+    <el-empty v-if="resourceStore.resources.length === 0" :image-size="200" />
+    <el-dialog v-model="folderDialogVisible" title="选择保存目录" v-if="currentResource">
+      <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>
+            选择保存目录
+          </div>
+        </div>
+      </template>
+      <folder-select
+        v-if="folderDialogVisible"
+        @select="handleFolderSelect"
+        @close="folderDialogVisible = false"
+        :cloudType="currentResource.cloudType"
+      />
+      <div class="dialog-footer">
+        <el-button @click="folderDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleSaveBtnClick">保存</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from "vue";
+  import { useResourceStore } from "@/stores/resource";
+  import { useUserSettingStore } from "@/stores/userSetting";
+  import FolderSelect from "@/components/Home/FolderSelect.vue";
+  import ResourceTable from "@/components/Home/ResourceTable.vue";
+  import type { ResourceItem, TagColor } from "@/types";
+  import ResourceCard from "@/components/Home/ResourceCard.vue";
+  import { useRouter } from "vue-router";
+  const router = useRouter();
+
+  const resourceStore = useResourceStore();
+  const userStore = useUserSettingStore();
+  const folderDialogVisible = ref(false);
+  const currentResource = ref<ResourceItem | null>(null);
+  const currentFolderId = ref<string | null>(null);
+
+  const refreshResources = async () => {
+    resourceStore.searchResources("", false);
+  };
+
+  const handleSave = (resource: ResourceItem) => {
+    currentResource.value = resource;
+    folderDialogVisible.value = true;
+  };
+
+  const handleFolderSelect = async (folderId: string) => {
+    if (!currentResource.value) return;
+    currentFolderId.value = folderId;
+  };
+
+  const handleSaveBtnClick = async () => {
+    if (!currentResource.value || !currentFolderId.value) return;
+    folderDialogVisible.value = false;
+    await resourceStore.saveResource(currentResource.value, currentFolderId.value);
+  };
+  const setDisplayStyle = (style: string) => {
+    console.log(userStore);
+    userStore.setDisplayStyle(style as "card" | "table");
+  };
+  // 添加加载更多处理函数
+  const handleLoadMore = (channelId: string) => {
+    resourceStore.searchResources("", true, channelId);
+  };
+
+  const searchMovieforTag = (tag: string) => {
+    console.log("iiii");
+    router.push({ path: "/", query: { keyword: tag } });
+  };
+</script>
+
+<style scoped>
+  .resource-list {
+    /* margin-top: 20px; */
+    position: relative;
+  }
+  .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-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .group-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .item-count {
+    color: #909399;
+    font-size: 0.9em;
+  }
+
+  :deep(.el-table__expand-column) {
+    .cell {
+      padding: 0 !important;
+    }
+  }
+
+  :deep(.el-table__expanded-cell) {
+    padding: 20px !important;
+  }
+
+  :deep(.el-table__expand-icon) {
+    height: 23px;
+    line-height: 23px;
+  }
+  .load-more {
+    display: flex;
+    justify-content: center;
+    padding: 16px 0;
+  }
+</style>
--- a/frontend/src/views/Setting.vue
+++ b/frontend/src/views/Setting.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="settings">
+    <el-card class="setting-card" v-if="settingStore.globalSetting">
+      <h2>网络配置</h2>
+      <div class="section">
+        <div class="form-group">
+          <label for="proxyDomain">代理域名:</label>
+          <el-input
+            class="form-input"
+            type="text"
+            id="proxyDomain"
+            placeholder="127.0.0.1"
+            v-model="settingStore.globalSetting.httpProxyHost"
+          />
+        </div>
+        <div class="form-group">
+          <label for="proxyPort">代理端口:</label>
+          <el-input
+            class="form-input"
+            type="text"
+            id="proxyPort"
+            placeholder="7890"
+            v-model="settingStore.globalSetting.httpProxyPort"
+          />
+        </div>
+        <div class="form-group">
+          <label for="AdminUserCode">管理员注册码:</label>
+          <el-input-number
+            class="form-input"
+            type="text"
+            id="AdminUserCode"
+            :controls="false"
+            :precision="0"
+            placeholder="设置管理员注册码"
+            v-model="settingStore.globalSetting.AdminUserCode"
+          />
+        </div>
+        <div class="form-group">
+          <label for="CommonUserCode">普通用户注册码:</label>
+          <el-input-number
+            class="form-input"
+            type="text"
+            :precision="0"
+            :controls="false"
+            id="CommonUserCode"
+            placeholder="设置普通用户注册码"
+            v-model="settingStore.globalSetting.CommonUserCode"
+          />
+        </div>
+      </div>
+      <div class="section">
+        <div class="form-group">
+          <label for="isProxyEnabled">启用代理:</label>
+          <el-switch v-model="settingStore.globalSetting.isProxyEnabled" @change="saveSettings" />
+        </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
+            class="form-input"
+            type="text"
+            id="cookie115"
+            v-model="settingStore.userSettings.cloud115Cookie"
+          />
+        </div>
+        <div class="form-group">
+          <label for="cookieQuark">夸克网盘Cookie:</label>
+          <el-input
+            class="form-input"
+            type="text"
+            id="cookieQuark"
+            v-model="settingStore.userSettings.quarkCookie"
+          />
+        </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>
+      </div>
+    </el-card>
+    <el-button @click="saveSettings">保存设置</el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useUserSettingStore } from "@/stores/userSetting";
+  const settingStore = useUserSettingStore();
+  settingStore.getSettings();
+
+  const saveSettings = () => {
+    settingStore.saveSettings();
+    // Add your save logic here
+  };
+</script>
+
+<style scoped lang="scss">
+  .settings {
+    padding: 20px;
+  }
+  .setting-card {
+    margin-bottom: 20px;
+    border-radius: 15px;
+  }
+
+  .section {
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
+  .form-group {
+    margin-bottom: 10px;
+    width: 48%;
+  }
+  .form-input {
+    text-align: left;
+    width: 100%;
+  }
+  ::v-deep .el-input__inner {
+    text-align: left;
+  }
+
+  label {
+    display: block;
+    margin-bottom: 5px;
+  }
+
+  input {
+    width: 100%;
+    padding: 8px;
+    box-sizing: border-box;
+  }
+
+  button {
+    padding: 10px 20px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    cursor: pointer;
+  }
+
+  button:hover {
+    background-color: #0056b3;
+  }
+</style>
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -16,6 +16,7 @@
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": ".",
+    "typeRoots": ["./node_modules/@types", "./types"],
    "paths": {
      "@/*": ["src/*"]
    }
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -16,6 +16,13 @@ export default defineConfig({
      resolvers: [ElementPlusResolver()],
    }),
  ],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@use "@/styles/global.scss";`,
+      },
+    },
+  },
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
@@ -41,6 +48,10 @@ export default defineConfig({
          });
        },
      },
+      "/tele-images": {
+        target: process.env.VITE_API_BASE_URL_PROXY || "http://127.0.0.1:8009",
+        changeOrigin: true,
+      },
    },
  },
  build: {