mirror of
https://github.com/jiangrui1994/CloudSaver.git
synced 2026-01-09 14:48:47 +08:00
feat:add mobile views
This commit is contained in:
jiangrui
1
frontend/auto-imports.d.ts
vendored
1
frontend/auto-imports.d.ts
vendored
@@ -6,4 +6,5 @@
|
||||
export {}
|
||||
declare global {
|
||||
const ElMessage: typeof import('element-plus/es')['ElMessage']
|
||||
const showConfirmDialog: typeof import('vant/es')['showConfirmDialog']
|
||||
}
|
||||
|
||||
16
frontend/components.d.ts
vendored
16
frontend/components.d.ts
vendored
@@ -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']
|
||||
|
||||
@@ -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"
|
||||
|
||||
13
frontend/postcss.config.cjs
Normal file
13
frontend/postcss.config.cjs
Normal file
@@ -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");
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
BIN
frontend/src/assets/images/mobile-login-bg.png
Normal file
BIN
frontend/src/assets/images/mobile-login-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
138
frontend/src/components/mobile/FolderSelect.vue
Normal file
138
frontend/src/components/mobile/FolderSelect.vue
Normal file
@@ -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>
|
||||
138
frontend/src/components/mobile/ResourceCard.vue
Normal file
138
frontend/src/components/mobile/ResourceCard.vue
Normal file
@@ -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>
|
||||
82
frontend/src/components/mobile/ResourceSelect.vue
Normal file
82
frontend/src/components/mobile/ResourceSelect.vue
Normal file
@@ -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>
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
35
frontend/src/router/mobile-routes.ts
Normal file
35
frontend/src/router/mobile-routes.ts
Normal file
@@ -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;
|
||||
35
frontend/src/router/pc-routes.ts
Normal file
35
frontend/src/router/pc-routes.ts
Normal file
@@ -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;
|
||||
@@ -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
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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));
|
||||
}
|
||||
);
|
||||
|
||||
147
frontend/src/views/mobile/Douban.vue
Normal file
147
frontend/src/views/mobile/Douban.vue
Normal file
@@ -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>
|
||||
143
frontend/src/views/mobile/Home.vue
Normal file
143
frontend/src/views/mobile/Home.vue
Normal file
@@ -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>
|
||||
113
frontend/src/views/mobile/Login.vue
Normal file
113
frontend/src/views/mobile/Login.vue
Normal file
@@ -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>
|
||||
246
frontend/src/views/mobile/ResourceList.vue
Normal file
246
frontend/src/views/mobile/ResourceList.vue
Normal file
@@ -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>
|
||||
182
frontend/src/views/mobile/Setting.vue
Normal file
182
frontend/src/views/mobile/Setting.vue
Normal file
@@ -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>
|
||||
@@ -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: {
|
||||
|
||||
Reference in New Issue
Block a user