diff --git a/frontend/auto-imports.d.ts b/frontend/auto-imports.d.ts
index 78813d8..78d1e91 100644
--- a/frontend/auto-imports.d.ts
+++ b/frontend/auto-imports.d.ts
@@ -6,4 +6,5 @@
 export {}
 declare global {
   const ElMessage: typeof import('element-plus/es')['ElMessage']
+  const showConfirmDialog: typeof import('vant/es')['showConfirmDialog']
 }
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index c0bdab2..f91f6b6 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -44,6 +44,22 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SearchBar: typeof import('./src/components/SearchBar.vue')['default']
+    VanBackTop: typeof import('vant/es')['BackTop']
+    VanButton: typeof import('vant/es')['Button']
+    VanCell: typeof import('vant/es')['Cell']
+    VanCellGroup: typeof import('vant/es')['CellGroup']
+    VanField: typeof import('vant/es')['Field']
+    VanForm: typeof import('vant/es')['Form']
+    VanIcon: typeof import('vant/es')['Icon']
+    VanImage: typeof import('vant/es')['Image']
+    VanList: typeof import('vant/es')['List']
+    VanLoading: typeof import('vant/es')['Loading']
+    VanSearch: typeof import('vant/es')['Search']
+    VanTab: typeof import('vant/es')['Tab']
+    VanTabbar: typeof import('vant/es')['Tabbar']
+    VanTabbarItem: typeof import('vant/es')['TabbarItem']
+    VanTabs: typeof import('vant/es')['Tabs']
+    VanTag: typeof import('vant/es')['Tag']
   }
   export interface ComponentCustomProperties {
     vLoading: typeof import('element-plus/es')['ElLoadingDirective']
diff --git a/frontend/package.json b/frontend/package.json
index 7480697..8a8595b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,15 +14,18 @@
     "element-plus": "^2.6.1",
     "pinia": "^2.1.7",
     "socket.io-client": "^4.8.1",
+    "vant": "^4.9.17",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"
   },
   "devDependencies": {
     "@types/node": "^20.11.25",
+    "@vant/auto-import-resolver": "^1.3.0",
     "@vitejs/plugin-vue": "^5.0.4",
+    "postcss-pxtorem": "^6.1.0",
     "sass": "^1.83.4",
     "typescript": "^5.4.2",
-    "unplugin-auto-import": "^0.17.5",
+    "unplugin-auto-import": "^0.17.8",
     "unplugin-vue-components": "^0.26.0",
     "vite": "^5.1.5",
     "vue-tsc": "^2.0.6"
diff --git a/frontend/postcss.config.cjs b/frontend/postcss.config.cjs
new file mode 100644
index 0000000..2080a27
--- /dev/null
+++ b/frontend/postcss.config.cjs
@@ -0,0 +1,13 @@
+module.exports = {
+  plugins: {
+    "postcss-pxtorem": {
+      rootValue({ file }) {
+        return file.indexOf("vant") !== -1 ? 37.5 : 75;
+      },
+      propList: ["*"],
+      exclude: (file) => {
+        return !file.includes("mobile") && !file.includes("vant");
+      },
+    },
+  },
+};
diff --git a/frontend/src/assets/images/mobile-login-bg.png b/frontend/src/assets/images/mobile-login-bg.png
new file mode 100644
index 0000000..5321e3f
Binary files /dev/null and b/frontend/src/assets/images/mobile-login-bg.png differ
diff --git a/frontend/src/components/mobile/FolderSelect.vue b/frontend/src/components/mobile/FolderSelect.vue
new file mode 100644
index 0000000..f101997
--- /dev/null
+++ b/frontend/src/components/mobile/FolderSelect.vue
@@ -0,0 +1,138 @@
+<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>
+    <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">
+          <el-icon><Folder /></el-icon>
+          {{ node.label }}
+        </span>
+      </template>
+    </el-tree>
+  </div>
+</template>
+
+<script setup lang="ts">
+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";
+
+const resourceStore = useResourceStore();
+import { ElMessage } from "element-plus";
+
+const props = defineProps({
+  cloudType: {
+    type: String,
+    required: true,
+  },
+});
+
+const treeRef = ref<TreeInstance>();
+const folders = ref<Folder[]>([]);
+const selectedFolder = ref<Folder | null>(null);
+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 api = cloudTypeApiMap[props.cloudType as keyof typeof cloudTypeApiMap];
+  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);
+      }
+    }
+    if (res?.code === 0) {
+      resolve(res.data.length ? res.data : []);
+    } else {
+      throw new Error(res.message);
+    }
+    resourceStore.setLoadTree(false);
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? `${error.message}` : "获取目录失败");
+    // 关闭模态框
+    emit("close");
+    resourceStore.setLoadTree(false);
+    resolve([]);
+  }
+};
+
+const handleNodeClick = (data: Folder) => {
+  selectedFolder.value = {
+    ...data,
+    path: data.path ? [...data.path, data] : [data],
+  };
+  emit("select", data.cid);
+};
+</script>
+
+<style scoped>
+.folder-select {
+  min-height: 300px;
+  max-height: 100%;
+  overflow-y: auto;
+}
+
+.folder-node {
+  display: flex;
+  align-items: center;
+  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;
+}
+</style>
diff --git a/frontend/src/components/mobile/ResourceCard.vue b/frontend/src/components/mobile/ResourceCard.vue
new file mode 100644
index 0000000..2d97575
--- /dev/null
+++ b/frontend/src/components/mobile/ResourceCard.vue
@@ -0,0 +1,138 @@
+<template>
+  <div class="resource-card-list">
+    <div v-for="item in dataList" :key="item.id" class="resource-card-list__item">
+      <div class="resource-card-content-box">
+        <div class="resource-card-left">
+          <van-image
+            width="100"
+            class="resource-card-image"
+            lazy-load
+            fit="contain"
+            :src="`/tele-images/?url=${encodeURIComponent(item.image as string)}`"
+          />
+        </div>
+        <div class="resource-card-right">
+          <div class="resource-card-title" @click="openUrl(item.cloudLinks[0])">
+            {{ item.title }}
+          </div>
+          <div class="resource-card-content" v-html="item.content"></div>
+          <div v-if="item.tags && item.tags.length" class="resource-card-tags">
+            <van-tag
+              v-for="tag in item.tags"
+              :key="tag"
+              type="primary"
+              class="item-tag"
+              @click="searchMovieforTag(tag)"
+              >{{ tag }}</van-tag
+            >
+          </div>
+        </div>
+      </div>
+      <div class="resource-card-footer">
+        <el-tag :type="store.tagColor[item.cloudType as keyof TagColor]" effect="dark" round>
+          {{ item.cloudType }}
+        </el-tag>
+        <van-button type="primary" class="save-btn" @click="handleSave(item)">转存</van-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 props = defineProps<{
+  currentChannelId: string;
+}>();
+
+const currentChannelId = computed(() => props.currentChannelId);
+
+const store = useResourceStore();
+
+const dataList = computed(() => {
+  const channel = store.resources.filter((item) => {
+    return item.id === currentChannelId.value;
+  });
+  console.log(currentChannelId.value, channel, store.resources);
+  return channel.length ? channel[0].list : [];
+});
+
+const emit = defineEmits(["save", "searchMovieforTag"]);
+
+const handleSave = (resource: ResourceItem) => {
+  emit("save", resource);
+};
+
+const openUrl = (url: string) => {
+  window.open(url);
+};
+
+const searchMovieforTag = (tag: string) => {
+  emit("searchMovieforTag", tag);
+};
+</script>
+
+<style scoped lang="scss">
+.resource-card-list {
+  padding: 0 10px;
+}
+.resource-card-image {
+  border-radius: 15px;
+  overflow: hidden;
+}
+.resource-card-list__item {
+  padding: 20px;
+  border-bottom: 1px solid #eee;
+  box-shadow: 0 4px 10px rgba(225, 225, 225, 0.3);
+  background-color: #fff;
+  border-radius: 15px;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0 auto;
+  margin-top: 15px;
+  padding-bottom: 0;
+  .resource-card-content-box {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding-bottom: 15px;
+    .resource-card-right {
+      margin-left: 10px;
+      .resource-card-title {
+        font-size: 24px;
+        font-weight: bold;
+        -webkit-box-orient: vertical;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        white-space: all;
+      }
+      .resource-card-content {
+        -webkit-box-orient: vertical;
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        overflow: hidden;
+        white-space: all;
+      }
+    }
+  }
+  .item-tag {
+    margin-left: 10px;
+    font-size: 18px;
+  }
+}
+.resource-card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-top: #eee 1px solid;
+  height: 80px;
+}
+.save-btn {
+  height: 50px;
+  font-size: 24px;
+  border-radius: 40px;
+}
+</style>
diff --git a/frontend/src/components/mobile/ResourceSelect.vue b/frontend/src/components/mobile/ResourceSelect.vue
new file mode 100644
index 0000000..e85e41b
--- /dev/null
+++ b/frontend/src/components/mobile/ResourceSelect.vue
@@ -0,0 +1,82 @@
+<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>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useResourceStore } from "@/stores/resource";
+import { formattedFileSize } from "@/utils/index";
+import type { ShareInfo } from "@/types";
+
+const resourceStore = useResourceStore();
+const selectedResource = ref<ShareInfo[]>([]);
+
+const defaultProps = {
+  isLeaf: "leaf",
+};
+
+const handleCheckChange = (data: ShareInfo) => {
+  selectedResource.value = [...resourceStore.resourceSelect, ...selectedResource.value];
+  if (selectedResource.value.findIndex((x) => x.fileId === data.fileId) === -1) {
+    selectedResource.value.push(data);
+  } else {
+    selectedResource.value = selectedResource.value.filter((x) => x.fileId !== data.fileId);
+  }
+  resourceStore.setSelectedResource(selectedResource.value);
+};
+</script>
+
+<style scoped>
+.folder-select {
+  min-height: 300px;
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.folder-node {
+  display: flex;
+  align-items: center;
+  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;
+}
+</style>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 02f4bc5..c6251c3 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -3,7 +3,12 @@ import { createPinia } from "pinia";
 import ElementPlus from "element-plus";
 import "element-plus/dist/index.css";
 import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+import { isMobileDevice } from "@/utils/index";
 import App from "./App.vue";
+import { Lazyload } from "vant";
+import "vant/es/notify/style";
+import "vant/es/dialog/style";
+
 import router from "./router/index";
 
 const app = createApp(App);
@@ -13,7 +18,24 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 }
 
 app.use(createPinia());
+app.use(Lazyload);
 app.use(router);
 app.use(ElementPlus);
 
 app.mount("#app");
+
+const setRootFontSize = () => {
+  const isMobile = isMobileDevice();
+  console.log(isMobile);
+  if (!isMobile) {
+    return;
+  } // PC端不干预
+  const clientWidth = document.documentElement.clientWidth;
+  const baseSize = clientWidth / 7.5; // 按750px设计稿
+  document.documentElement.style.fontSize = baseSize + "px";
+};
+
+// 初始化执行
+setRootFontSize();
+// 监听窗口变化
+window.addEventListener("resize", setRootFontSize);
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 5946833..c9cbc2d 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -1,41 +1,11 @@
 import { createRouter, createWebHistory } from "vue-router";
-import type { RouteRecordRaw } from "vue-router";
-import Login from "@/views/Login.vue";
-import Home from "@/views/Home.vue";
-
-const routes: RouteRecordRaw[] = [
-  {
-    path: "/",
-    name: "home",
-    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,
-  },
-];
+import mobileRoutes from "./mobile-routes";
+import pcRoutes from "./pc-routes";
+import { isMobileDevice } from "@/utils/index";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes,
+  routes: [...(isMobileDevice() ? mobileRoutes : pcRoutes)],
 });
 
 export default router;
diff --git a/frontend/src/router/mobile-routes.ts b/frontend/src/router/mobile-routes.ts
new file mode 100644
index 0000000..21171d1
--- /dev/null
+++ b/frontend/src/router/mobile-routes.ts
@@ -0,0 +1,35 @@
+import Login from "@/views/mobile/Login.vue";
+import Home from "@/views/mobile/Home.vue";
+import type { RouteRecordRaw } from "vue-router";
+const routes: RouteRecordRaw[] = [
+  {
+    path: "/",
+    name: "home",
+    component: Home,
+    redirect: "/resource",
+    children: [
+      {
+        path: "/resource",
+        name: "resource",
+        component: () => import("@/views/mobile/ResourceList.vue"),
+      },
+      {
+        path: "/douban",
+        name: "douban",
+        component: () => import("@/views/mobile/Douban.vue"),
+      },
+      {
+        path: "/setting",
+        name: "setting",
+        component: () => import("@/views/mobile/Setting.vue"),
+      },
+    ],
+  },
+  {
+    path: "/login",
+    name: "login",
+    component: Login,
+  },
+];
+
+export default routes;
diff --git a/frontend/src/router/pc-routes.ts b/frontend/src/router/pc-routes.ts
new file mode 100644
index 0000000..6407fce
--- /dev/null
+++ b/frontend/src/router/pc-routes.ts
@@ -0,0 +1,35 @@
+import Login from "@/views/Login.vue";
+import Home from "@/views/Home.vue";
+import type { RouteRecordRaw } from "vue-router";
+const routes: RouteRecordRaw[] = [
+  {
+    path: "/",
+    name: "home",
+    component: Home,
+    redirect: "/resource",
+    children: [
+      {
+        path: "/resource",
+        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,
+  },
+];
+
+export default routes;
diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
index 09cb076..4fcb218 100644
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@@ -7,3 +7,10 @@ export const formattedFileSize = (size: number): string => {
   }
   return `${(size / 1024 / 1024 / 1024).toFixed(2)}GB`;
 };
+
+export function isMobileDevice() {
+  return (
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
+    window.innerWidth <= 768
+  );
+}
diff --git a/frontend/src/utils/request.ts b/frontend/src/utils/request.ts
index cbd4307..e1d5e69 100644
--- a/frontend/src/utils/request.ts
+++ b/frontend/src/utils/request.ts
@@ -1,7 +1,21 @@
 import axios, { AxiosResponse, AxiosRequestConfig } from "axios";
 import { ElMessage } from "element-plus";
+import { isMobileDevice } from "@/utils/index";
+import { showNotify } from "vant";
 import { RequestResult } from "../types/response";
 
+const errorMessage = (message: string) => {
+  if (isMobileDevice()) {
+    console.log(message);
+    showNotify({
+      type: "danger",
+      message,
+    });
+    return;
+  }
+  ElMessage.error(message);
+};
+
 const axiosInstance = axios.create({
   baseURL: import.meta.env.VITE_API_BASE_URL as string,
   timeout: 16000,
@@ -21,7 +35,7 @@ axiosInstance.interceptors.request.use(
     if (token) {
       config.headers.Authorization = `Bearer ${token}`;
     } else if (!isLoginAndRedirect(config.url || "")) {
-      ElMessage.error("请先登录");
+      errorMessage("请先登录");
       window.location.href = "/login";
     }
     return config;
@@ -38,12 +52,12 @@ axiosInstance.interceptors.response.use(
   },
   (error) => {
     if (error.response.status === 401) {
-      ElMessage.error("登录过期，请重新登录");
+      errorMessage("登录过期，请重新登录");
       localStorage.removeItem("token");
       window.location.href = "/login";
       return Promise.reject(new Error("登录过期，请重新登录"));
     }
-    ElMessage.error(error.response.statusText);
+    errorMessage(error.response.statusText);
     return Promise.reject(new Error(error.response.statusText));
   }
 );
diff --git a/frontend/src/views/mobile/Douban.vue b/frontend/src/views/mobile/Douban.vue
new file mode 100644
index 0000000..2e7685d
--- /dev/null
+++ b/frontend/src/views/mobile/Douban.vue
@@ -0,0 +1,147 @@
+<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: "/resource", query: { keyword: title } });
+};
+</script>
+
+<style scoped>
+.movie-wall {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 48%);
+  grid-row-gap: 15px;
+  justify-content: space-between;
+  padding: 15px;
+}
+
+.movie-item {
+  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: 280px;
+  object-fit: cover; /* 确保图片使用cover模式 */
+  border-radius: 15px; /* 设置图片圆角 */
+  overflow: hidden;
+}
+.movie-info {
+  /* margin-top: 8px; */
+  .movie-title {
+    font-size: 24px;
+    font-weight: bold;
+    padding: 10px 0;
+  }
+}
+.movie-poster {
+  width: 100%;
+  height: 280px;
+  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: 20px;
+}
+.movie-search {
+  color: white;
+  border-radius: 5px;
+  font-size: 14px;
+  cursor: pointer;
+}
+</style>
diff --git a/frontend/src/views/mobile/Home.vue b/frontend/src/views/mobile/Home.vue
new file mode 100644
index 0000000..305a534
--- /dev/null
+++ b/frontend/src/views/mobile/Home.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="mobile-pc">
+    <van-search
+      v-model="keyword"
+      shape="round"
+      show-action
+      class="search-input"
+      placeholder="请输入搜索关键词或输入链接直接解析"
+      @search="handleSearch"
+    >
+      <template #action>
+        <van-icon name="contact-o" @click="logout" />
+      </template>
+    </van-search>
+    <div class="content">
+      <router-view />
+    </div>
+  </div>
+  <div v-if="resourcStore.loading" class="page-loading" @touchmove.prevent>
+    <van-loading text-color="#fff">资源搜索中...</van-loading>
+  </div>
+  <van-back-top />
+
+  <van-tabbar route>
+    <van-tabbar-item replace to="/resource" icon="search"></van-tabbar-item>
+    <van-tabbar-item replace to="/douban" icon="play-circle-o"></van-tabbar-item>
+    <van-tabbar-item replace to="/setting" icon="setting"></van-tabbar-item>
+  </van-tabbar>
+  <!-- <login v-else /> -->
+</template>
+
+<script setup lang="ts">
+import { useResourceStore } from "@/stores/resource";
+// import { useStore } from "@/stores/index";
+import { useUserSettingStore } from "@/stores/userSetting";
+import { computed, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { showConfirmDialog } from "vant";
+// const store = useStore();
+const route = useRoute();
+const router = useRouter();
+const resourcStore = useResourceStore();
+const settingStore = useUserSettingStore();
+settingStore.getSettings();
+
+const keyword = ref("");
+const routeKeyword = computed(() => route.query.keyword as string);
+const logout = () => {
+  showConfirmDialog({
+    title: "退出登录",
+    message: "是否确定退出登录？",
+  }).then(() => {
+    // on confirm
+    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;
+  }
+  console.log(route.path);
+  if (route.path !== "/resource") {
+    router.push({ path: "/resource" });
+  }
+  await resourcStore.searchResources(keyword.value);
+};
+
+watch(
+  () => routeKeyword.value,
+  () => {
+    if (routeKeyword.value) {
+      console.log("获取路由参数", routeKeyword.value);
+      keyword.value = routeKeyword.value;
+      handleSearch();
+    } else {
+      keyword.value = "";
+    }
+  }
+);
+</script>
+
+<style scoped lang="scss">
+.home-pc {
+  // padding: 20px;
+  min-width: 1000px;
+  height: 100vh;
+  overflow: hidden;
+  margin: 0 auto;
+}
+.home-header {
+  height: auto;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: rgba(231, 235, 239, 0.7) !important;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border-radius: 0 0 5px 5px;
+}
+.home-main {
+  width: 1000px;
+  height: 100vh;
+  overflow: auto;
+}
+.home-main-main {
+  padding: 10px 15px;
+}
+.home-aside {
+  width: 300px;
+}
+.search-input {
+  background-color: rgba(231, 235, 239, 0.7) !important;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 999;
+}
+.page-loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.content {
+  padding-top: 120px;
+  padding-bottom: 100px;
+}
+</style>
diff --git a/frontend/src/views/mobile/Login.vue b/frontend/src/views/mobile/Login.vue
new file mode 100644
index 0000000..ce86a6d
--- /dev/null
+++ b/frontend/src/views/mobile/Login.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="login-container">
+    <div class="login-form">
+      <div class="login-header">
+        <img :src="logo" alt="logo" class="logo" />
+        <div class="name">Cloud Saver</div>
+      </div>
+      <van-form @submit="handleLogin">
+        <van-cell-group inset class="login-form-group">
+          <van-field
+            v-model="loginForm.username"
+            name="用户名"
+            label="用户名"
+            placeholder="用户名"
+            :rules="[{ required: true, message: '请填写用户名' }]"
+          />
+          <van-field
+            v-model="loginForm.password"
+            type="password"
+            name="密码"
+            label="密码"
+            placeholder="密码"
+            :rules="[{ required: true, message: '请填写密码' }]"
+          />
+        </van-cell-group>
+        <div style="margin: 16px">
+          <van-button round block type="primary" native-type="submit"> 登录 </van-button>
+        </div>
+      </van-form>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import logo from "@/assets/images/logo.png";
+import { userApi } from "@/api/user";
+import router from "@/router";
+import { showNotify } from "vant";
+
+const loginForm = ref({
+  username: "",
+  password: "",
+});
+const handleLogin = async () => {
+  try {
+    const res = await userApi.login(loginForm.value);
+    console.log(res);
+    if (res.code === 0) {
+      const { token } = res.data;
+      localStorage.setItem("token", token);
+      // 路由跳转首页
+      router.push("/");
+    } else {
+      showNotify({
+        message: res.message,
+        duration: 2000,
+        type: "danger",
+      });
+    }
+  } catch (error) {
+    showNotify({
+      message: "登录失败",
+      duration: 2000,
+      type: "danger",
+    });
+  }
+};
+</script>
+<style lang="scss" scoped>
+.login-container {
+  padding: 0;
+  background-color: #fff;
+  width: 100%;
+  height: 100vh;
+  background: url("../../assets//images//mobile-login-bg.png") no-repeat;
+  background-size: 100% auto;
+
+  .login-header {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 38px;
+    .logo {
+      width: 50px;
+      height: auto;
+      margin-right: 18px;
+    }
+    .name {
+      font-size: 50px;
+      font-weight: 700;
+      letter-spacing: 0px;
+      line-height: 65.64px;
+      color: rgba(2, 46, 87, 1);
+    }
+  }
+  .login-form {
+    height: 60%;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    background-color: #fff;
+    border-radius: 20px 20px 0 0;
+    box-sizing: border-box;
+    padding-top: 30px;
+    .login-form-group {
+      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+      margin-bottom: 15px;
+    }
+  }
+}
+</style>
diff --git a/frontend/src/views/mobile/ResourceList.vue b/frontend/src/views/mobile/ResourceList.vue
new file mode 100644
index 0000000..73c7638
--- /dev/null
+++ b/frontend/src/views/mobile/ResourceList.vue
@@ -0,0 +1,246 @@
+<template>
+  <div ref="content" 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>
+    <van-tabs v-model:active="currentTab">
+      <van-tab
+        v-for="item in resourceStore.resources"
+        :key="item.id"
+        :name="item.id"
+        :title="item.channelInfo.name"
+      >
+        <ResourceCard
+          :current-channel-id="currentTab"
+          @save="handleSave"
+          @search-moviefor-tag="searchMovieforTag"
+        />
+      </van-tab>
+    </van-tabs>
+    <el-dialog
+      v-if="currentResource"
+      v-model="saveDialogVisible"
+      width="100%"
+      :title="saveDialogMap[saveDialogStep].title"
+    >
+      <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>
+      </template>
+      <div v-loading="resourceStore.loadTree">
+        <resource-select
+          v-if="saveDialogVisible && saveDialogStep === 1"
+          :cloud-type="currentResource.cloudType"
+        />
+        <folder-select
+          v-if="saveDialogVisible && saveDialogStep === 2"
+          :cloud-type="currentResource.cloudType"
+          @select="handleFolderSelect"
+          @close="saveDialogVisible = false"
+        />
+      </div>
+
+      <div class="dialog-footer">
+        <el-button @click="saveDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleConfirmClick">{{
+          saveDialogMap[saveDialogStep].buttonText
+        }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted } from "vue";
+import { useResourceStore } from "@/stores/resource";
+// import { useUserSettingStore } from "@/stores/userSetting";
+import FolderSelect from "@/components/mobile/FolderSelect.vue";
+import ResourceSelect from "@/components/mobile/ResourceSelect.vue";
+import { formattedFileSize } from "@/utils/index";
+import type { ResourceItem, TagColor } from "@/types";
+
+import ResourceCard from "@/components/mobile/ResourceCard.vue";
+import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+
+const router = useRouter();
+const resourceStore = useResourceStore();
+// const userStore = useUserSettingStore();
+const saveDialogVisible = ref(false);
+const currentResource = ref<ResourceItem | null>(null);
+const currentFolderId = ref<string | null>(null);
+const saveDialogStep = ref<1 | 2>(1);
+const currentTab = ref<string>("");
+
+watch(
+  () => resourceStore.resources,
+  () => {
+    if (resourceStore.resources.length > 0) {
+      currentTab.value = resourceStore.resources[0].id;
+    }
+  }
+);
+
+const refreshResources = async () => {
+  resourceStore.searchResources("", false);
+};
+
+const saveDialogMap = {
+  1: {
+    title: "选择资源",
+    buttonText: "下一步",
+  },
+  2: {
+    title: "选择保存目录",
+    buttonText: "保存",
+  },
+};
+
+const handleSave = async (resource: ResourceItem) => {
+  currentResource.value = resource;
+  saveDialogVisible.value = true;
+  saveDialogStep.value = 1;
+  if (!(await resourceStore.getResourceListAndSelect(currentResource.value))) {
+    saveDialogVisible.value = false;
+  }
+};
+
+const handleFolderSelect = async (folderId: string) => {
+  if (!currentResource.value) return;
+  currentFolderId.value = folderId;
+};
+
+const handleConfirmClick = async () => {
+  if (saveDialogStep.value === 1) {
+    if (resourceStore.resourceSelect.length === 0) {
+      ElMessage.warning("请选择要保存的资源");
+      return;
+    }
+    saveDialogStep.value = 2;
+  } else {
+    handleSaveBtnClick();
+  }
+};
+
+const handleSaveBtnClick = async () => {
+  if (!currentResource.value || !currentFolderId.value) return;
+  saveDialogVisible.value = false;
+  await resourceStore.saveResource(currentResource.value, currentFolderId.value);
+};
+// 添加加载更多处理函数
+const handleLoadMore = (channelId: string) => {
+  resourceStore.searchResources("", true, channelId);
+};
+
+const searchMovieforTag = (tag: string) => {
+  router.push({ path: "/resource", query: { keyword: tag } });
+};
+
+const doScroll = () => {
+  const scrollHeight = document.documentElement.scrollHeight; // 可滚动区域的高
+  const scrollTop = document.documentElement.scrollTop; // 已经滚动区域的高
+  const clientHeight = document.documentElement.clientHeight; // 可视区高度
+  if (clientHeight + scrollTop >= scrollHeight) {
+    handleLoadMore(currentTab.value);
+  }
+};
+
+onMounted(() => {
+  window.addEventListener("scroll", doScroll);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", doScroll);
+});
+</script>
+
+<style scoped>
+.resource-list {
+  position: relative;
+}
+.resource-list__header {
+  height: 52px;
+  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;
+}
+.refresh_btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0 15px;
+  .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>
diff --git a/frontend/src/views/mobile/Setting.vue b/frontend/src/views/mobile/Setting.vue
new file mode 100644
index 0000000..8d523f6
--- /dev/null
+++ b/frontend/src/views/mobile/Setting.vue
@@ -0,0 +1,182 @@
+<template>
+  <div class="settings">
+    <el-card v-if="settingStore.globalSetting" class="setting-card">
+      <div class="card-title">项目配置</div>
+      <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>
+        <div class="form-group">
+          <label for="proxyPort">代理端口:</label>
+          <el-input
+            id="proxyPort"
+            v-model="globalSetting.httpProxyPort"
+            class="form-input"
+            type="text"
+            placeholder="7890"
+          />
+        </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>
+      </div>
+    </el-card>
+    <el-card class="setting-card">
+      <div class="card-title">用户配置</div>
+      <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"
+          />
+        </div>
+        <div class="form-group">
+          <label for="cookieQuark">夸克网盘Cookie:</label>
+          <el-input
+            id="cookieQuark"
+            v-model="settingStore.userSettings.quarkCookie"
+            class="form-input"
+            type="text"
+          />
+        </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>
+    <van-button round block type="primary" @click="saveSettings"> 保存设置 </van-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useUserSettingStore } from "@/stores/userSetting";
+import { computed } from "vue";
+const settingStore = useUserSettingStore();
+
+const globalSetting = computed(
+  () =>
+    settingStore.globalSetting || {
+      httpProxyHost: "127.0.1",
+      httpProxyPort: "7890",
+      isProxyEnabled: false,
+      AdminUserCode: 230713,
+      CommonUserCode: 9527,
+    }
+);
+
+settingStore.getSettings();
+
+const saveSettings = () => {
+  settingStore.saveSettings();
+  // Add your save logic here
+};
+</script>
+
+<style scoped lang="scss">
+.settings {
+  padding: 10px;
+}
+.setting-card {
+  margin-bottom: 20px;
+  border-radius: 15px;
+  padding: 0px;
+}
+.card-title {
+  font-size: 32px;
+}
+
+.section {
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  &: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;
+}
+
+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>
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index e7e446c..aa428af 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -4,16 +4,17 @@ import { fileURLToPath, URL } from "node:url";
 import AutoImport from "unplugin-auto-import/vite";
 import Components from "unplugin-vue-components/vite";
 import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
+import { VantResolver } from "@vant/auto-import-resolver";
 
 export default defineConfig({
   base: "/",
   plugins: [
     vue(),
     AutoImport({
-      resolvers: [ElementPlusResolver()],
+      resolvers: [ElementPlusResolver(), VantResolver()],
     }),
     Components({
-      resolvers: [ElementPlusResolver()],
+      resolvers: [ElementPlusResolver(), VantResolver()],
     }),
   ],
   css: {