mirror of
https://github.com/jiangrui1994/CloudSaver.git
synced 2026-01-11 23:58:46 +08:00
feat:版本迭代
This commit is contained in:
jiangrui
149
frontend/src/views/Douban.vue
Normal file
149
frontend/src/views/Douban.vue
Normal file
@@ -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>
|
||||
93
frontend/src/views/Home.vue
Normal file
93
frontend/src/views/Home.vue
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
259
frontend/src/views/Login.vue
Normal file
259
frontend/src/views/Login.vue
Normal file
@@ -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>
|
||||
186
frontend/src/views/ResourceList.vue
Normal file
186
frontend/src/views/ResourceList.vue
Normal file
@@ -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>
|
||||
162
frontend/src/views/Setting.vue
Normal file
162
frontend/src/views/Setting.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user