mirror of
https://github.com/jiangrui1994/CloudSaver.git
synced 2026-01-10 23:28:46 +08:00
refactor:优化移动端页面
This commit is contained in:
jiangrui
5
frontend/components.d.ts
vendored
5
frontend/components.d.ts
vendored
@@ -46,16 +46,21 @@ declare module 'vue' {
|
||||
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']
|
||||
VanCheckbox: typeof import('vant/es')['Checkbox']
|
||||
VanCheckboxGroup: typeof import('vant/es')['CheckboxGroup']
|
||||
VanEmpty: typeof import('vant/es')['Empty']
|
||||
VanField: typeof import('vant/es')['Field']
|
||||
VanForm: typeof import('vant/es')['Form']
|
||||
VanIcon: typeof import('vant/es')['Icon']
|
||||
VanImage: typeof import('vant/es')['Image']
|
||||
VanLoading: typeof import('vant/es')['Loading']
|
||||
VanOverlay: typeof import('vant/es')['Overlay']
|
||||
VanPopover: typeof import('vant/es')['Popover']
|
||||
VanPopup: typeof import('vant/es')['Popup']
|
||||
VanSearch: typeof import('vant/es')['Search']
|
||||
VanSwitch: typeof import('vant/es')['Switch']
|
||||
VanTab: typeof import('vant/es')['Tab']
|
||||
VanTabbar: typeof import('vant/es')['Tabbar']
|
||||
VanTabbarItem: typeof import('vant/es')['TabbarItem']
|
||||
|
||||
@@ -2,12 +2,14 @@ module.exports = {
|
||||
plugins: {
|
||||
"postcss-pxtorem": {
|
||||
rootValue({ file }) {
|
||||
return file.indexOf("vant") !== -1 ? 37.5 : 75;
|
||||
return file.indexOf("mobile") !== -1 || file.indexOf("vant") !== -1 ? 37.5 : 75;
|
||||
},
|
||||
propList: ["*"],
|
||||
exclude: (file) => {
|
||||
return !file.includes("mobile") && !file.includes("vant");
|
||||
},
|
||||
minPixelValue: 2,
|
||||
mediaQuery: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -33,4 +33,30 @@ body {
|
||||
background-color: var(--theme-background);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* 移动端全局样式 */
|
||||
@media screen and (max-width: 768px) {
|
||||
#app {
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* 统一按钮样式 */
|
||||
.van-button {
|
||||
height: 40px;
|
||||
font-size: var(--font-size-base);
|
||||
border-radius: var(--border-radius-base);
|
||||
}
|
||||
|
||||
/* 统一输入框样式 */
|
||||
.van-field {
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
/* 统一卡片样式 */
|
||||
.van-card {
|
||||
border-radius: var(--border-radius-base);
|
||||
margin: var(--spacing-base) 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,10 +5,11 @@
|
||||
<span
|
||||
v-for="(path, index) in currentFolderPath"
|
||||
:key="path.cid"
|
||||
class="path-item"
|
||||
@click="handleFolderClick(path, index)"
|
||||
>
|
||||
{{ path.name }}
|
||||
<span v-if="index !== currentFolderPath.length - 1" style="margin-right: 5px">></span>
|
||||
<span v-if="index !== currentFolderPath.length - 1" class="path-separator">></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="folder-item-list">
|
||||
@@ -99,43 +100,51 @@ const getList = async (data?: Folder) => {
|
||||
getList();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/responsive.scss";
|
||||
|
||||
.folder-select {
|
||||
position: relative;
|
||||
padding-top: 60px;
|
||||
padding-top: var(--spacing-xl);
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
font-size: var(--font-size-base);
|
||||
padding: var(--spacing-sm) var(--spacing-base);
|
||||
border: 1px solid #e5e6e8;
|
||||
border-radius: var(--border-radius-base);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-path {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.folder-select-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 10px;
|
||||
font-size: 21px;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #e5e6e8;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.folder-item {
|
||||
font-size: 20px;
|
||||
font-size: var(--font-size-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-base) var(--spacing-sm);
|
||||
border-bottom: 1px dashed #ececec;
|
||||
padding: 15px 5px;
|
||||
|
||||
.folder-node {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
|
||||
.path-item {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: var(--theme-theme);
|
||||
}
|
||||
}
|
||||
|
||||
.path-separator {
|
||||
margin: 0 var(--spacing-xs);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,65 +1,99 @@
|
||||
<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">
|
||||
<div class="resource-card">
|
||||
<div v-for="item in dataList" :key="item.id" class="resource-card__item">
|
||||
<!-- 内容区域 -->
|
||||
<div class="item__content">
|
||||
<!-- 左侧图片 -->
|
||||
<div class="content__image">
|
||||
<van-image
|
||||
width="100"
|
||||
class="resource-card-image"
|
||||
lazy-load
|
||||
fit="contain"
|
||||
:src="`/tele-images/?url=${encodeURIComponent(item.image as string)}`"
|
||||
fit="contain"
|
||||
lazy-load
|
||||
/>
|
||||
<!-- 来源标签移到图片左上角 -->
|
||||
<van-tag class="image__tag" :color="getTagColor(item.cloudType)" round>
|
||||
{{ item.cloudType }}
|
||||
</van-tag>
|
||||
</div>
|
||||
<div class="resource-card-right">
|
||||
<div class="resource-card-title" @click="openUrl(item.cloudLinks[0])">
|
||||
|
||||
<!-- 右侧信息 -->
|
||||
<div class="content__info">
|
||||
<!-- 标题 -->
|
||||
<div class="info__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
|
||||
class="info__desc"
|
||||
:class="{ 'is-expanded': expandedItems[item.id] }"
|
||||
@click="toggleExpand(item.id)"
|
||||
v-html="item.content"
|
||||
/>
|
||||
|
||||
<!-- 底部区域：标签 -->
|
||||
<div class="info__footer">
|
||||
<div v-if="item.tags?.length" class="info__tags">
|
||||
<van-tag
|
||||
v-for="tag in item.tags"
|
||||
:key="tag"
|
||||
type="primary"
|
||||
plain
|
||||
round
|
||||
@click.stop="searchMovieforTag(tag)"
|
||||
>
|
||||
{{ tag }}
|
||||
</van-tag>
|
||||
</div>
|
||||
|
||||
<!-- 转存按钮 -->
|
||||
<div class="info__action">
|
||||
<van-button type="primary" size="mini" round @click="handleSave(item)">
|
||||
转存
|
||||
</van-button>
|
||||
</div>
|
||||
</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 { computed, ref } from "vue";
|
||||
import { useResourceStore } from "@/stores/resource";
|
||||
import { computed } from "vue";
|
||||
import type { ResourceItem, TagColor } from "@/types";
|
||||
import type { ResourceItem } from "@/types";
|
||||
|
||||
// Props 定义
|
||||
const props = defineProps<{
|
||||
currentChannelId: string;
|
||||
}>();
|
||||
|
||||
const currentChannelId = computed(() => props.currentChannelId);
|
||||
// 事件定义
|
||||
const emit = defineEmits<{
|
||||
(e: "save", resource: ResourceItem): void;
|
||||
(e: "searchMovieforTag", tag: string): void;
|
||||
}>();
|
||||
|
||||
// 状态管理
|
||||
const store = useResourceStore();
|
||||
|
||||
// 计算属性
|
||||
const dataList = computed(() => {
|
||||
const channel = store.resources.filter((item) => {
|
||||
return item.id === currentChannelId.value;
|
||||
});
|
||||
return channel.length ? channel[0].list : [];
|
||||
const channel = store.resources.find((item) => item.id === props.currentChannelId);
|
||||
return channel?.list || [];
|
||||
});
|
||||
|
||||
const emit = defineEmits(["save", "searchMovieforTag"]);
|
||||
// 标签颜色映射
|
||||
const getTagColor = (type?: string) => {
|
||||
const colorMap: Record<string, string> = {
|
||||
pan115: "#07c160",
|
||||
quark: "#1989fa",
|
||||
};
|
||||
return colorMap[type || ""] || "#ff976a";
|
||||
};
|
||||
|
||||
// 方法定义
|
||||
const handleSave = (resource: ResourceItem) => {
|
||||
emit("save", resource);
|
||||
};
|
||||
@@ -71,67 +105,147 @@ const openUrl = (url: string) => {
|
||||
const searchMovieforTag = (tag: string) => {
|
||||
emit("searchMovieforTag", tag);
|
||||
};
|
||||
|
||||
// 展开状态管理
|
||||
const expandedItems = ref<Record<string, boolean>>({});
|
||||
|
||||
// 切换展开状态
|
||||
const toggleExpand = (id: string) => {
|
||||
expandedItems.value[id] = !expandedItems.value[id];
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.resource-card-list {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.resource-card-image {
|
||||
border-radius: 15px;
|
||||
<style lang="scss" scoped>
|
||||
// 文本省略混入 - 移到最前面
|
||||
@mixin text-ellipsis($lines) {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: $lines;
|
||||
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 {
|
||||
|
||||
.resource-card {
|
||||
padding: var(--spacing-base);
|
||||
|
||||
&__item {
|
||||
margin-bottom: var(--spacing-base);
|
||||
background: var(--theme-other_background);
|
||||
border-radius: var(--border-radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
&__content {
|
||||
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;
|
||||
}
|
||||
gap: var(--spacing-base);
|
||||
padding: var(--spacing-base);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
&__image {
|
||||
position: relative; // 为标签定位
|
||||
flex-shrink: 0;
|
||||
width: 100px;
|
||||
height: 140px;
|
||||
border-radius: var(--border-radius-sm);
|
||||
overflow: hidden;
|
||||
background: var(--van-gray-2);
|
||||
|
||||
:deep(.van-image) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.image__tag {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
font-size: 10px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
}
|
||||
.item-tag {
|
||||
margin-left: 10px;
|
||||
font-size: 18px;
|
||||
|
||||
&__info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
}
|
||||
.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;
|
||||
|
||||
.info {
|
||||
&__title {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
color: var(--theme-color);
|
||||
@include text-ellipsis(2);
|
||||
|
||||
&:active {
|
||||
color: var(--theme-theme);
|
||||
}
|
||||
}
|
||||
|
||||
&__desc {
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: var(--van-gray-7);
|
||||
@include text-ellipsis(3);
|
||||
margin: 4px 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.is-expanded {
|
||||
-webkit-line-clamp: 8;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "展开";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 0 4px;
|
||||
font-size: 12px;
|
||||
color: var(--theme-theme);
|
||||
background: var(--theme-other_background);
|
||||
}
|
||||
|
||||
&.is-expanded::after {
|
||||
content: "收起";
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xs);
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
&__tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
|
||||
:deep(.van-tag) {
|
||||
font-size: 11px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&__action {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.van-button {
|
||||
font-size: 12px;
|
||||
height: 24px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
<template>
|
||||
<div class="folder-select">
|
||||
<div class="resource-select">
|
||||
<van-checkbox-group v-model="selectedResourceIds" @change="handleCheckChange">
|
||||
<div v-for="item in resourceStore.shareInfo.list" :key="item.fileId" class="folder-item">
|
||||
<div class="folder-item-left">
|
||||
<span class="folder-node">
|
||||
<div v-for="item in resourceStore.shareInfo.list" :key="item.fileId" class="resource-item">
|
||||
<div class="resource-item-left">
|
||||
<span class="resource-node">
|
||||
<el-icon><Folder /></el-icon>
|
||||
<div class="folder-node-name">
|
||||
<div class="resource-name">
|
||||
{{ item.fileName }}
|
||||
<span v-if="item.fileSize" style="font-weight: bold"
|
||||
>({{ formattedFileSize(item.fileSize) }})</span
|
||||
>
|
||||
<span v-if="item.fileSize" class="file-size">
|
||||
({{ formattedFileSize(item.fileSize) }})
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="folder-item-right">
|
||||
<div class="resource-item-right">
|
||||
<van-checkbox :name="item.fileId"></van-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
@@ -39,33 +39,43 @@ const handleCheckChange = (Ids: string[]) => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.folder-select {
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/responsive.scss";
|
||||
|
||||
.resource-select {
|
||||
min-height: 300px;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
padding: var(--spacing-base);
|
||||
}
|
||||
|
||||
.folder-node {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.folder-path {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.folder-item {
|
||||
font-size: 20px;
|
||||
.resource-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-base) 0;
|
||||
border-bottom: 1px dashed #ececec;
|
||||
padding: 15px 0;
|
||||
|
||||
&-left {
|
||||
flex: 1;
|
||||
margin-right: var(--spacing-base);
|
||||
}
|
||||
}
|
||||
.folder-item-left {
|
||||
width: 80%;
|
||||
|
||||
.resource-node {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.resource-name {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: var(--font-size-sm);
|
||||
color: #999;
|
||||
margin-left: var(--spacing-xs);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,6 +8,7 @@ import App from "./App.vue";
|
||||
import { Lazyload } from "vant";
|
||||
import "vant/es/notify/style";
|
||||
import "vant/es/dialog/style";
|
||||
import "@/styles/responsive.scss";
|
||||
|
||||
import router from "./router/index";
|
||||
|
||||
|
||||
46
frontend/src/styles/mobile.scss
Normal file
46
frontend/src/styles/mobile.scss
Normal file
@@ -0,0 +1,46 @@
|
||||
/* 移动端通用样式类 */
|
||||
.mobile-page {
|
||||
padding: var(--spacing-base);
|
||||
min-height: 100vh;
|
||||
background-color: var(--theme-background);
|
||||
}
|
||||
|
||||
.mobile-card {
|
||||
background: var(--theme-other_background);
|
||||
border-radius: var(--border-radius-lg);
|
||||
padding: var(--spacing-base);
|
||||
margin-bottom: var(--spacing-base);
|
||||
}
|
||||
|
||||
.mobile-title {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: bold;
|
||||
margin-bottom: var(--spacing-base);
|
||||
}
|
||||
|
||||
.mobile-text {
|
||||
font-size: var(--font-size-base);
|
||||
line-height: 1.6;
|
||||
color: var(--theme-color);
|
||||
}
|
||||
|
||||
.mobile-button {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
font-size: var(--font-size-lg);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.mobile-form {
|
||||
.van-field {
|
||||
padding: var(--spacing-base);
|
||||
|
||||
&__label {
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
&__control {
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
47
frontend/src/styles/responsive.scss
Normal file
47
frontend/src/styles/responsive.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
// 响应式布局工具类
|
||||
@mixin mobile {
|
||||
@media screen and (max-width: 768px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tablet {
|
||||
@media screen and (min-width: 769px) and (max-width: 1024px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin desktop {
|
||||
@media screen and (min-width: 1025px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// 通用样式变量
|
||||
:root {
|
||||
// 字体大小
|
||||
--font-size-xs: 12px;
|
||||
--font-size-sm: 14px;
|
||||
--font-size-base: 16px;
|
||||
--font-size-lg: 18px;
|
||||
--font-size-xl: 20px;
|
||||
|
||||
// 间距
|
||||
--spacing-xs: 4px;
|
||||
--spacing-sm: 8px;
|
||||
--spacing-base: 16px;
|
||||
--spacing-lg: 24px;
|
||||
--spacing-xl: 32px;
|
||||
|
||||
// 圆角
|
||||
--border-radius-sm: 4px;
|
||||
--border-radius-base: 8px;
|
||||
--border-radius-lg: 16px;
|
||||
--border-radius-xl: 24px;
|
||||
|
||||
// 移动端特殊变量
|
||||
@include mobile {
|
||||
--font-size-base: 14px;
|
||||
--spacing-base: 12px;
|
||||
}
|
||||
}
|
||||
10
frontend/src/utils/device.ts
Normal file
10
frontend/src/utils/device.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
export const isMobile = () => {
|
||||
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||
};
|
||||
|
||||
export const isTablet = () => {
|
||||
const userAgent = navigator.userAgent.toLowerCase();
|
||||
return /(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/.test(
|
||||
userAgent
|
||||
);
|
||||
};
|
||||
@@ -1,31 +1,43 @@
|
||||
<template>
|
||||
<div class="movie-wall">
|
||||
<div v-for="movie in doubanStore.hotList" :key="movie.id" class="movie-item">
|
||||
<div class="movie-poster">
|
||||
<el-image
|
||||
class="movie-poster-img"
|
||||
:src="movie.cover"
|
||||
fit="cover"
|
||||
lazy
|
||||
:alt="movie.title"
|
||||
hide-on-click-modal
|
||||
:preview-src-list="[movie.cover]"
|
||||
/>
|
||||
<div class="movie-rate">
|
||||
{{ movie.rate }}
|
||||
</div>
|
||||
<div class="movie-poster-hover" @click="searchMovie(movie.title)">
|
||||
<div class="movie-search">
|
||||
<el-icon class="search_icon" size="28px"><Search /></el-icon>
|
||||
<div class="mobile-page douban">
|
||||
<!-- 电影列表 -->
|
||||
<div class="douban__grid">
|
||||
<div v-for="movie in doubanStore.hotList" :key="movie.id" class="douban__item">
|
||||
<!-- 海报卡片 -->
|
||||
<div class="douban__poster">
|
||||
<van-image
|
||||
class="poster__img"
|
||||
:src="movie.cover"
|
||||
fit="cover"
|
||||
lazy
|
||||
loading="skeleton"
|
||||
:alt="movie.title"
|
||||
@click="previewImage(movie.cover)"
|
||||
/>
|
||||
<!-- 评分标签 -->
|
||||
<van-tag
|
||||
class="poster__rate"
|
||||
type="primary"
|
||||
:style="{ backgroundColor: getRateColor(movie.rate) }"
|
||||
>
|
||||
{{ movie.rate }}
|
||||
</van-tag>
|
||||
<!-- 搜索按钮 -->
|
||||
<div class="poster__action" @click.stop="searchMovie(movie.title)">
|
||||
<van-icon name="search" size="24" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="movie-info">
|
||||
<el-link :href="movie.url" target="_blank" :underline="false" class="movie-title">{{
|
||||
movie.title
|
||||
}}</el-link>
|
||||
<!-- 电影信息 -->
|
||||
<div class="douban__info">
|
||||
<van-button class="info__title" type="default" :url="movie.url" text="text" block>
|
||||
{{ movie.title }}
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<van-empty v-if="!doubanStore.hotList.length" description="暂无数据" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -33,115 +45,150 @@
|
||||
import { computed, watch } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { useDoubanStore } from "@/stores/douban";
|
||||
import { showImagePreview } from "vant";
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
// 状态管理
|
||||
const doubanStore = useDoubanStore();
|
||||
|
||||
// 监听路由参数变化
|
||||
watch(
|
||||
() => routeParams.value,
|
||||
() => {
|
||||
console.log(routeParams.value);
|
||||
doubanStore.setCurrentParams(routeParams.value);
|
||||
}
|
||||
(params) => {
|
||||
if (params) {
|
||||
doubanStore.setCurrentParams(params);
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 方法定义
|
||||
const searchMovie = (title: string) => {
|
||||
router.push({ path: "/resource", query: { keyword: title } });
|
||||
router.push({
|
||||
path: "/resource",
|
||||
query: { keyword: title },
|
||||
});
|
||||
};
|
||||
|
||||
const previewImage = (url: string) => {
|
||||
showImagePreview({
|
||||
images: [url],
|
||||
closeable: true,
|
||||
});
|
||||
};
|
||||
|
||||
// 根据评分获取颜色
|
||||
const getRateColor = (rate: string | number) => {
|
||||
const numRate = Number(rate);
|
||||
if (numRate >= 8) return "#42b883";
|
||||
if (numRate >= 6) return "#5853fa";
|
||||
return "#f56c6c";
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.movie-wall {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 48%);
|
||||
grid-row-gap: 15px;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
}
|
||||
<style lang="scss" scoped>
|
||||
.douban {
|
||||
// 网格布局 - 修改为两列
|
||||
&__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-base);
|
||||
padding: var(--spacing-base);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
// 电影项
|
||||
&__item {
|
||||
background: var(--theme-other_background);
|
||||
border-radius: var(--border-radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.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;
|
||||
// 海报区域
|
||||
&__poster {
|
||||
position: relative;
|
||||
aspect-ratio: 2/3;
|
||||
background: #f5f5f5;
|
||||
overflow: hidden;
|
||||
|
||||
.poster__img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.poster__rate {
|
||||
position: absolute;
|
||||
top: var(--spacing-xs);
|
||||
right: var(--spacing-xs);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--border-radius-lg);
|
||||
}
|
||||
|
||||
.poster__action {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
color: #fff;
|
||||
|
||||
&:active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 信息区域
|
||||
&__info {
|
||||
padding: 6px 8px;
|
||||
|
||||
.info__title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
color: var(--theme-color);
|
||||
text-align: left;
|
||||
border: none;
|
||||
|
||||
&:active {
|
||||
color: var(--theme-theme);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.movie-poster {
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 15px;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
|
||||
// 深度修改 Vant 组件样式
|
||||
:deep(.van-image) {
|
||||
display: block;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.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;
|
||||
:deep(.van-tag--primary) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
:deep(.van-button) {
|
||||
height: auto;
|
||||
padding: var(--spacing-xs) 0;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,143 +1,202 @@
|
||||
<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 />
|
||||
<div class="home">
|
||||
<!-- 顶部搜索栏 -->
|
||||
<header class="home__header">
|
||||
<div class="header__wrapper">
|
||||
<van-search
|
||||
v-model="searchForm.keyword"
|
||||
class="header__search"
|
||||
shape="round"
|
||||
placeholder="请输入搜索关键词或输入链接直接解析"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
|
||||
<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 /> -->
|
||||
<van-icon
|
||||
name="https://b.yzcdn.cn/vant/icon-demo-1126.png"
|
||||
class="header__action"
|
||||
@click="handleLogout"
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 主要内容区 -->
|
||||
<main class="home__content">
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition name="fade" mode="out-in">
|
||||
<component :is="Component" />
|
||||
</transition>
|
||||
</router-view>
|
||||
</main>
|
||||
|
||||
<!-- 底部导航栏 -->
|
||||
<van-tabbar class="home__tabbar" route>
|
||||
<van-tabbar-item to="/resource" icon="search">搜索</van-tabbar-item>
|
||||
<van-tabbar-item to="/douban" icon="video">影视</van-tabbar-item>
|
||||
<van-tabbar-item to="/setting" icon="setting-o">设置</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
|
||||
<!-- 全局加载状态 -->
|
||||
<van-overlay :show="resourceStore.loading" class="home__loading" @touchmove.prevent>
|
||||
<van-loading type="spinner" color="#fff" size="24px"> 资源搜索中... </van-loading>
|
||||
</van-overlay>
|
||||
|
||||
<!-- 返回顶部 -->
|
||||
<van-back-top right="30px" bottom="100px" />
|
||||
</div>
|
||||
</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 { ref, watch } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { showConfirmDialog } from "vant";
|
||||
// const store = useStore();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const resourcStore = useResourceStore();
|
||||
import { useResourceStore } from "@/stores/resource";
|
||||
import { useUserSettingStore } from "@/stores/userSetting";
|
||||
|
||||
// 接口定义
|
||||
interface SearchForm {
|
||||
keyword: string;
|
||||
}
|
||||
|
||||
// 状态管理
|
||||
const resourceStore = useResourceStore();
|
||||
const settingStore = useUserSettingStore();
|
||||
|
||||
// 响应式数据
|
||||
const searchForm = ref<SearchForm>({
|
||||
keyword: "",
|
||||
});
|
||||
|
||||
// 路由相关
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
// 初始化
|
||||
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;
|
||||
() => route.query.keyword as string,
|
||||
(keyword) => {
|
||||
if (keyword) {
|
||||
searchForm.value.keyword = keyword;
|
||||
handleSearch();
|
||||
} else {
|
||||
keyword.value = "";
|
||||
searchForm.value.keyword = "";
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 方法定义
|
||||
const handleSearch = async () => {
|
||||
const keyword = searchForm.value.keyword.trim();
|
||||
if (!keyword) return;
|
||||
|
||||
if (keyword.startsWith("http")) {
|
||||
await resourceStore.parsingCloudLink(keyword);
|
||||
return;
|
||||
}
|
||||
|
||||
if (route.path !== "/resource") {
|
||||
await router.push("/resource");
|
||||
}
|
||||
await resourceStore.searchResources(keyword);
|
||||
};
|
||||
|
||||
const handleLogout = () => {
|
||||
showConfirmDialog({
|
||||
title: "退出登录",
|
||||
message: "确定要退出登录吗？",
|
||||
}).then(() => {
|
||||
localStorage.removeItem("token");
|
||||
router.push("/login");
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.home-pc {
|
||||
// padding: 20px;
|
||||
min-width: 1000px;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
<style lang="scss" scoped>
|
||||
.home {
|
||||
// 布局
|
||||
min-height: 100vh;
|
||||
background: var(--theme-background);
|
||||
|
||||
// 头部搜索
|
||||
&__header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
background: var(--theme-other_background);
|
||||
backdrop-filter: blur(8px);
|
||||
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.header__wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.header__search {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.header__action {
|
||||
padding: 8px;
|
||||
margin-left: 4px;
|
||||
color: var(--theme-color);
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
|
||||
&:active {
|
||||
color: var(--theme-theme);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 主内容区 - 调整顶部间距
|
||||
&__content {
|
||||
padding-top: 64px; // 搜索框高度(48px) + 上下padding(8px * 2)
|
||||
padding-bottom: calc(50px + var(--safe-area-bottom)); // tabbar高度 + 底部安全区域
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// 加载状态
|
||||
&__loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.home-header {
|
||||
height: auto;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background-color: rgba(231, 235, 239, 0.7) !important;
|
||||
|
||||
// 过渡动画
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// 深度修改 Vant 组件样式
|
||||
:deep(.van-tabbar) {
|
||||
background: var(--theme-other_background);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border-radius: 0 0 5px 5px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.home-main {
|
||||
width: 1000px;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
|
||||
:deep(.van-tabbar-item) {
|
||||
color: var(--theme-color);
|
||||
}
|
||||
.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;
|
||||
|
||||
:deep(.van-tabbar-item--active) {
|
||||
color: var(--theme-theme);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,112 +1,281 @@
|
||||
<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">
|
||||
<div class="login">
|
||||
<!-- 背景区域 -->
|
||||
<div class="login__background" aria-hidden="true" />
|
||||
|
||||
<!-- 主要内容区 -->
|
||||
<main class="login__content">
|
||||
<!-- 头部 Logo -->
|
||||
<header class="login__header">
|
||||
<img :src="logo" alt="Cloud Saver Logo" class="login__logo" width="50" height="50" />
|
||||
<h1 class="login__title">Cloud Saver</h1>
|
||||
</header>
|
||||
|
||||
<!-- 登录表单 -->
|
||||
<van-form class="login__form" @submit="handleSubmit">
|
||||
<van-cell-group inset class="login__form-group">
|
||||
<!-- 用户名输入框 -->
|
||||
<van-field
|
||||
v-model="loginForm.username"
|
||||
name="用户名"
|
||||
v-model="formData.username"
|
||||
name="username"
|
||||
label="用户名"
|
||||
placeholder="用户名"
|
||||
placeholder="请输入用户名"
|
||||
:rules="[{ required: true, message: '请填写用户名' }]"
|
||||
/>
|
||||
autocomplete="username"
|
||||
@keyup.enter="focusPassword"
|
||||
>
|
||||
<template #left-icon>
|
||||
<van-icon name="user-o" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<!-- 密码输入框 -->
|
||||
<van-field
|
||||
v-model="loginForm.password"
|
||||
ref="passwordRef"
|
||||
v-model="formData.password"
|
||||
type="password"
|
||||
name="密码"
|
||||
name="password"
|
||||
label="密码"
|
||||
placeholder="密码"
|
||||
placeholder="请输入密码"
|
||||
:rules="[{ required: true, message: '请填写密码' }]"
|
||||
/>
|
||||
autocomplete="current-password"
|
||||
@keyup.enter="handleSubmit"
|
||||
>
|
||||
<template #left-icon>
|
||||
<van-icon name="lock" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<!-- 优化记住密码选项 -->
|
||||
<div class="login__remember">
|
||||
<van-checkbox v-model="rememberPassword" class="remember-checkbox">
|
||||
记住密码
|
||||
</van-checkbox>
|
||||
</div>
|
||||
</van-cell-group>
|
||||
<div style="margin: 16px">
|
||||
<van-button round block type="primary" native-type="submit"> 登录 </van-button>
|
||||
|
||||
<!-- 登录按钮 -->
|
||||
<div class="login__submit">
|
||||
<van-button
|
||||
:loading="isLoading"
|
||||
:disabled="isLoading"
|
||||
round
|
||||
block
|
||||
type="primary"
|
||||
native-type="submit"
|
||||
class="login__button"
|
||||
>
|
||||
{{ isLoading ? "登录中..." : "登录" }}
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</div>
|
||||
</main>
|
||||
</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({
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { showNotify } from "vant";
|
||||
import type { FieldInstance } from "vant";
|
||||
import { userApi } from "@/api/user";
|
||||
import logo from "@/assets/images/logo.png";
|
||||
|
||||
// 类型定义
|
||||
interface LoginForm {
|
||||
username: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
// 响应式数据
|
||||
const formData = ref<LoginForm>({
|
||||
username: "",
|
||||
password: "",
|
||||
});
|
||||
const handleLogin = async () => {
|
||||
const isLoading = ref(false);
|
||||
const passwordRef = ref<FieldInstance>();
|
||||
const rememberPassword = ref(!!localStorage.getItem("rememberedPassword"));
|
||||
|
||||
// 工具函数
|
||||
const router = useRouter();
|
||||
|
||||
// 方法定义
|
||||
const focusPassword = () => {
|
||||
passwordRef.value?.focus();
|
||||
};
|
||||
|
||||
// 在组件加载时检查是否有保存的账号密码
|
||||
onMounted(() => {
|
||||
if (rememberPassword.value) {
|
||||
const savedUsername = localStorage.getItem("username");
|
||||
const savedPassword = localStorage.getItem("password");
|
||||
if (savedUsername && savedPassword) {
|
||||
formData.value.username = savedUsername;
|
||||
formData.value.password = savedPassword;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
const res = await userApi.login(loginForm.value);
|
||||
console.log(res);
|
||||
isLoading.value = true;
|
||||
const res = await userApi.login(formData.value);
|
||||
|
||||
if (res.code === 0) {
|
||||
const { token } = res.data;
|
||||
localStorage.setItem("token", token);
|
||||
// 路由跳转首页
|
||||
router.push("/");
|
||||
// 处理记住密码
|
||||
if (rememberPassword.value) {
|
||||
localStorage.setItem("username", formData.value.username);
|
||||
localStorage.setItem("password", formData.value.password);
|
||||
localStorage.setItem("rememberedPassword", "true");
|
||||
} else {
|
||||
localStorage.removeItem("username");
|
||||
localStorage.removeItem("password");
|
||||
localStorage.removeItem("rememberedPassword");
|
||||
}
|
||||
|
||||
localStorage.setItem("token", res.data.token);
|
||||
await router.push("/");
|
||||
} else {
|
||||
showNotify({
|
||||
message: res.message,
|
||||
duration: 2000,
|
||||
type: "danger",
|
||||
message: res.message || "登录失败",
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
showNotify({
|
||||
type: "danger",
|
||||
message: "登录失败",
|
||||
duration: 2000,
|
||||
type: "danger",
|
||||
});
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
};
|
||||
</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%;
|
||||
<style lang="scss" scoped>
|
||||
.login {
|
||||
// 布局
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
// 背景
|
||||
&__background {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: url("@/assets/images/mobile-login-bg.png") no-repeat;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
// 主内容区
|
||||
&__content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
min-height: 60%;
|
||||
padding: var(--spacing-lg);
|
||||
background-color: var(--theme-other_background);
|
||||
border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
|
||||
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
// 头部
|
||||
&__header {
|
||||
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);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
&__logo {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: var(--spacing-base);
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: 700;
|
||||
color: var(--theme-theme);
|
||||
}
|
||||
|
||||
// 表单
|
||||
&__form {
|
||||
padding: 0 var(--spacing-base);
|
||||
}
|
||||
|
||||
&__form-group {
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
|
||||
border-radius: var(--border-radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__submit {
|
||||
margin-top: var(--spacing-xl);
|
||||
}
|
||||
|
||||
&__button {
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// 新增记住密码容器样式
|
||||
&__remember {
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
border-top: 1px solid #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
// Vant 组件样式覆盖
|
||||
:deep(.van-cell-group--inset) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(.van-field) {
|
||||
padding: var(--spacing-base);
|
||||
}
|
||||
|
||||
:deep(.van-field__label) {
|
||||
width: 4em;
|
||||
color: var(--theme-color);
|
||||
}
|
||||
|
||||
:deep(.van-field__left-icon) {
|
||||
margin-right: var(--spacing-sm);
|
||||
}
|
||||
|
||||
// 优化记住密码样式
|
||||
:deep(.remember-checkbox) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
|
||||
.van-checkbox__icon {
|
||||
font-size: 14px;
|
||||
|
||||
.van-icon {
|
||||
border: 1px solid #dcdee0;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
|
||||
.van-checkbox__label {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
&.van-checkbox--checked {
|
||||
.van-icon {
|
||||
background-color: var(--theme-theme);
|
||||
border-color: var(--theme-theme);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,16 +1,20 @@
|
||||
<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 class="resource-list">
|
||||
<!-- 头部刷新区 -->
|
||||
<div class="resource-list__header">
|
||||
<van-cell center @click="refreshResources">
|
||||
<template #title>
|
||||
<div class="header__title">
|
||||
<van-icon name="replay" size="18" />
|
||||
<span class="title__text">最新资源</span>
|
||||
<span class="title__time">上次刷新：{{ resourceStore.lastUpdateTime }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</van-cell>
|
||||
</div>
|
||||
<van-tabs v-model:active="currentTab">
|
||||
|
||||
<!-- 资源列表 -->
|
||||
<van-tabs v-model:active="currentTab" sticky swipeable animated>
|
||||
<van-tab
|
||||
v-for="item in resourceStore.resources"
|
||||
:key="item.id"
|
||||
@@ -24,83 +28,106 @@
|
||||
/>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
<!-- 保存弹窗 -->
|
||||
<van-popup
|
||||
v-if="currentResource"
|
||||
v-model:show="saveDialogVisible"
|
||||
round
|
||||
closeable
|
||||
position="bottom"
|
||||
:style="{ height: '80%' }"
|
||||
><div class="my-header">
|
||||
<el-tag
|
||||
:type="resourceStore.tagColor[currentResource.cloudType as keyof TagColor]"
|
||||
effect="dark"
|
||||
round
|
||||
>
|
||||
{{ currentResource.cloudType }}
|
||||
</el-tag>
|
||||
<span>{{ saveDialogMap[saveDialogStep].title }}</span>
|
||||
<span
|
||||
v-if="resourceStore.shareInfo.fileSize && saveDialogStep === 1"
|
||||
style="font-weight: bold"
|
||||
>
|
||||
({{ formattedFileSize(resourceStore.shareInfo.fileSize || 0) }})
|
||||
>
|
||||
<!-- 弹窗头部 -->
|
||||
<div class="popup__header">
|
||||
<van-tag :color="getTagColor(currentResource?.cloudType)" round>
|
||||
{{ currentResource?.cloudType }}
|
||||
</van-tag>
|
||||
<span class="header__title">{{ saveDialogMap[saveDialogStep].title }}</span>
|
||||
<span v-if="resourceStore.shareInfo.fileSize && saveDialogStep === 1" class="header__size">
|
||||
{{ formattedFileSize(resourceStore.shareInfo.fileSize) }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-loading="resourceStore.loadTree" class="popup-content">
|
||||
|
||||
<!-- 弹窗内容 -->
|
||||
<div class="popup__content">
|
||||
<van-loading v-if="resourceStore.loadTree" vertical>加载中...</van-loading>
|
||||
|
||||
<resource-select
|
||||
v-if="saveDialogVisible && saveDialogStep === 1 && resourceStore.resourceSelect.length"
|
||||
:cloud-type="currentResource.cloudType"
|
||||
:cloud-type="currentResource?.cloudType"
|
||||
/>
|
||||
|
||||
<folder-select
|
||||
v-if="saveDialogVisible && saveDialogStep === 2"
|
||||
v-if="saveDialogVisible && saveDialogStep === 2 && currentResource"
|
||||
:cloud-type="currentResource.cloudType"
|
||||
@select="handleFolderSelect"
|
||||
@close="saveDialogVisible = false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="dialog-footer">
|
||||
<div class="save-floder-show">
|
||||
<span>保存至</span>
|
||||
<div class="save-floder">
|
||||
<van-icon name="notes-o" /><span>{{
|
||||
currentFolderPath ? currentFolderPath[currentFolderPath.length - 1]?.name : "待选择"
|
||||
}}</span>
|
||||
<!-- 弹窗底部 -->
|
||||
<div class="popup__footer">
|
||||
<div class="footer__path">
|
||||
<span class="path__label">保存至</span>
|
||||
<div class="path__value">
|
||||
<van-icon name="notes-o" />
|
||||
<span>{{ getCurrentFolderName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <van-button class="btn" round @click="saveDialogVisible = false"> 取消 </van-button> -->
|
||||
<van-button class="btn" round type="primary" @click="handleConfirmClick">
|
||||
<van-button round type="primary" block @click="handleConfirmClick">
|
||||
{{ saveDialogMap[saveDialogStep].buttonText }}
|
||||
</van-button>
|
||||
</div></van-popup
|
||||
>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted, onUnmounted } from "vue";
|
||||
import { ref, watch, onMounted, onUnmounted, computed } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { showToast } from "vant";
|
||||
import { useResourceStore } from "@/stores/resource";
|
||||
// import { useUserSettingStore } from "@/stores/userSetting";
|
||||
import { formattedFileSize } from "@/utils/index";
|
||||
import type { Folder, ResourceItem } from "@/types";
|
||||
import FolderSelect from "@/components/mobile/FolderSelect.vue";
|
||||
import ResourceSelect from "@/components/mobile/ResourceSelect.vue";
|
||||
import { formattedFileSize } from "@/utils/index";
|
||||
import type { Folder, 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 currentFolderPath = ref<null | Folder[]>(null);
|
||||
const currentFolderPath = ref<Folder[] | null>(null);
|
||||
const saveDialogStep = ref<1 | 2>(1);
|
||||
const currentTab = ref<string>("");
|
||||
|
||||
// 计算属性
|
||||
const getCurrentFolderName = computed(() => {
|
||||
return currentFolderPath.value
|
||||
? currentFolderPath.value[currentFolderPath.value.length - 1]?.name
|
||||
: "待选择";
|
||||
});
|
||||
|
||||
// 常量定义
|
||||
const saveDialogMap = {
|
||||
1: { title: "选择资源", buttonText: "下一步" },
|
||||
2: { title: "选择保存目录", buttonText: "保存" },
|
||||
};
|
||||
|
||||
// 标签颜色映射
|
||||
const getTagColor = (type?: string) => {
|
||||
const colorMap: Record<string, string> = {
|
||||
pan115: "#07c160",
|
||||
quark: "#1989fa",
|
||||
};
|
||||
return colorMap[type || ""] || "#ff976a";
|
||||
};
|
||||
|
||||
// 监听器
|
||||
watch(
|
||||
() => resourceStore.resources,
|
||||
() => {
|
||||
@@ -110,31 +137,22 @@ watch(
|
||||
}
|
||||
);
|
||||
|
||||
const refreshResources = async () => {
|
||||
// 方法定义
|
||||
const refreshResources = () => {
|
||||
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))) {
|
||||
|
||||
if (!(await resourceStore.getResourceListAndSelect(resource))) {
|
||||
saveDialogVisible.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleFolderSelect = async (folders: Folder[]) => {
|
||||
const handleFolderSelect = (folders: Folder[]) => {
|
||||
if (!currentResource.value) return;
|
||||
currentFolderPath.value = folders;
|
||||
currentFolderId.value = folders[folders.length - 1]?.cid || "0";
|
||||
@@ -143,7 +161,7 @@ const handleFolderSelect = async (folders: Folder[]) => {
|
||||
const handleConfirmClick = async () => {
|
||||
if (saveDialogStep.value === 1) {
|
||||
if (!resourceStore.resourceSelect.some((x) => x.isChecked)) {
|
||||
ElMessage.warning("请选择要保存的资源");
|
||||
showToast("请选择要保存的资源");
|
||||
return;
|
||||
}
|
||||
saveDialogStep.value = 2;
|
||||
@@ -157,7 +175,7 @@ const handleSaveBtnClick = async () => {
|
||||
saveDialogVisible.value = false;
|
||||
await resourceStore.saveResource(currentResource.value, currentFolderId.value);
|
||||
};
|
||||
// 添加加载更多处理函数
|
||||
|
||||
const handleLoadMore = (channelId: string) => {
|
||||
resourceStore.searchResources("", true, channelId);
|
||||
};
|
||||
@@ -166,15 +184,15 @@ 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) {
|
||||
const { scrollHeight, scrollTop, clientHeight } = document.documentElement;
|
||||
if (clientHeight + scrollTop >= scrollHeight - 50) {
|
||||
handleLoadMore(currentTab.value);
|
||||
}
|
||||
};
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
window.addEventListener("scroll", doScroll);
|
||||
});
|
||||
@@ -184,133 +202,94 @@ onUnmounted(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" 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;
|
||||
}
|
||||
.my-header {
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #ececec;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
padding: 0 25px;
|
||||
font-size: 30px;
|
||||
span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
.popup-content {
|
||||
height: calc(100% - 200px);
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
padding: 25px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
&__header {
|
||||
margin-bottom: var(--spacing-base);
|
||||
|
||||
.dialog-footer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 15px 25px;
|
||||
box-sizing: border-box;
|
||||
height: 100px;
|
||||
.btn {
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
}
|
||||
.save-floder-show {
|
||||
width: 360px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span {
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.save-floder {
|
||||
width: 280px;
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
display: inline-flexbox;
|
||||
.header__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
line-height: 40px;
|
||||
border-radius: 5px;
|
||||
background-color: #ececec;
|
||||
font-size: 18px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
span {
|
||||
margin-left: 5px;
|
||||
font-weight: unset;
|
||||
gap: var(--spacing-xs);
|
||||
font-size: 14px;
|
||||
|
||||
.title__text {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.title__time {
|
||||
color: var(--van-gray-6);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
/* width: ; */
|
||||
}
|
||||
}
|
||||
|
||||
.group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.popup {
|
||||
&__header {
|
||||
padding: var(--spacing-lg);
|
||||
border-bottom: 1px solid var(--van-gray-3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
|
||||
.item-count {
|
||||
color: #909399;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.header__title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.el-table__expand-column) {
|
||||
.cell {
|
||||
padding: 0 !important;
|
||||
.header__size {
|
||||
color: var(--van-gray-6);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__expanded-cell) {
|
||||
padding: 20px !important;
|
||||
}
|
||||
&__content {
|
||||
height: calc(100% - 140px);
|
||||
padding: var(--spacing-base);
|
||||
overflow-y: auto;
|
||||
|
||||
:deep(.el-table__expand-icon) {
|
||||
height: 23px;
|
||||
line-height: 23px;
|
||||
}
|
||||
.load-more {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 16px 0;
|
||||
.van-loading {
|
||||
margin: var(--spacing-xl) auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: var(--spacing-base);
|
||||
background: var(--theme-other_background);
|
||||
border-top: 1px solid var(--van-gray-3);
|
||||
|
||||
.footer__path {
|
||||
margin-bottom: var(--spacing-base);
|
||||
|
||||
.path__label {
|
||||
font-size: 14px;
|
||||
margin-right: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.path__value {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
background: var(--van-gray-2);
|
||||
border-radius: var(--border-radius-sm);
|
||||
font-size: 14px;
|
||||
max-width: 80%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.van-button {
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,105 +1,87 @@
|
||||
<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"
|
||||
<div class="setting">
|
||||
<!-- 全局设置 -->
|
||||
<div v-if="settingStore.globalSetting" class="setting__section">
|
||||
<div class="setting__title">项目配置</div>
|
||||
<div class="setting__card">
|
||||
<van-cell-group inset>
|
||||
<van-field v-model="globalSetting.httpProxyHost" label="代理IP" placeholder="127.0.0.1" />
|
||||
<van-field v-model="globalSetting.httpProxyPort" label="代理端口" placeholder="7890" />
|
||||
<van-field
|
||||
v-model.number="globalSetting.AdminUserCode"
|
||||
label="管理员码"
|
||||
type="digit"
|
||||
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"
|
||||
<van-field
|
||||
v-model.number="globalSetting.CommonUserCode"
|
||||
label="用户注册码"
|
||||
type="digit"
|
||||
placeholder="设置普通用户注册码"
|
||||
/>
|
||||
</div>
|
||||
<van-cell center title="启用代理">
|
||||
<template #right-icon>
|
||||
<van-switch v-model="globalSetting.isProxyEnabled" size="24px" />
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</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"
|
||||
</div>
|
||||
|
||||
<!-- 用户设置 -->
|
||||
<div class="setting__section">
|
||||
<div class="setting__title">用户配置</div>
|
||||
<div class="setting__card">
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="settingStore.userSettings.cloud115Cookie"
|
||||
class="form-input"
|
||||
type="text"
|
||||
label="115网盘"
|
||||
type="textarea"
|
||||
rows="2"
|
||||
autosize
|
||||
placeholder="请输入115网盘Cookie"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cookieQuark">夸克网盘Cookie:</label>
|
||||
<el-input
|
||||
id="cookieQuark"
|
||||
<van-field
|
||||
v-model="settingStore.userSettings.quarkCookie"
|
||||
class="form-input"
|
||||
type="text"
|
||||
label="夸克网盘"
|
||||
type="textarea"
|
||||
rows="2"
|
||||
autosize
|
||||
placeholder="请输入夸克网盘Cookie"
|
||||
/>
|
||||
</van-cell-group>
|
||||
</div>
|
||||
|
||||
<!-- 帮助说明 -->
|
||||
<div class="setting__help">
|
||||
<div class="help__title">帮助说明</div>
|
||||
<div class="help__links">
|
||||
<van-cell
|
||||
title="如何获取115网盘cookie？"
|
||||
is-link
|
||||
url="https://alist.nn.ci/zh/guide/drivers/115.html"
|
||||
/>
|
||||
<van-cell
|
||||
title="如何获取夸克网盘cookie？"
|
||||
is-link
|
||||
url="https://alist.nn.ci/zh/guide/drivers/quark.html"
|
||||
/>
|
||||
</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>
|
||||
|
||||
<!-- 保存按钮 -->
|
||||
<div class="setting__submit">
|
||||
<van-button round block type="primary" @click="saveSettings"> 保存设置 </van-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUserSettingStore } from "@/stores/userSetting";
|
||||
import { computed } from "vue";
|
||||
import { showNotify } from "vant";
|
||||
|
||||
const settingStore = useUserSettingStore();
|
||||
|
||||
const globalSetting = computed(
|
||||
@@ -115,68 +97,82 @@ const globalSetting = computed(
|
||||
|
||||
settingStore.getSettings();
|
||||
|
||||
const saveSettings = () => {
|
||||
settingStore.saveSettings();
|
||||
// Add your save logic here
|
||||
const saveSettings = async () => {
|
||||
try {
|
||||
await settingStore.saveSettings();
|
||||
showNotify({ type: "success", message: "设置保存成功" });
|
||||
} catch (error) {
|
||||
showNotify({ type: "danger", message: "设置保存失败" });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.settings {
|
||||
padding: 10px;
|
||||
}
|
||||
.setting-card {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 15px;
|
||||
padding: 0px;
|
||||
}
|
||||
.card-title {
|
||||
font-size: 32px;
|
||||
}
|
||||
<style lang="scss" scoped>
|
||||
.setting {
|
||||
min-height: 100vh;
|
||||
background: var(--theme-background);
|
||||
padding: var(--spacing-base);
|
||||
padding-bottom: 90px; // 为底部导航栏和按钮留出空间
|
||||
|
||||
.section {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
&__section {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 16px; // 统一字体大小
|
||||
font-weight: 500;
|
||||
margin-bottom: var(--spacing-base);
|
||||
color: var(--theme-color);
|
||||
}
|
||||
|
||||
&__card {
|
||||
background: var(--theme-other_background);
|
||||
border-radius: var(--border-radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__help {
|
||||
margin-top: var(--spacing-base);
|
||||
|
||||
.help__title {
|
||||
font-size: 14px; // 统一字体大小
|
||||
margin-bottom: var(--spacing-sm);
|
||||
color: var(--theme-color);
|
||||
}
|
||||
}
|
||||
|
||||
&__submit {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 50px; // tabbar 高度
|
||||
padding: var(--spacing-base);
|
||||
background: var(--theme-other_background);
|
||||
z-index: 99;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 10px;
|
||||
width: 48%;
|
||||
}
|
||||
.form-input {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
text-align: left;
|
||||
// 深度修改 Vant 组件样式
|
||||
:deep(.van-field) {
|
||||
font-size: 14px; // 统一字体大小
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
:deep(.van-field__label) {
|
||||
width: 6em;
|
||||
color: var(--theme-color);
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
:deep(.van-cell) {
|
||||
font-size: 14px; // 统一字体大小
|
||||
padding: 12px var(--spacing-base);
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
:deep(.van-button) {
|
||||
height: 40px; // 统一按钮高度
|
||||
font-size: 14px; // 统一字体大小
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
:deep(.van-cell-group--inset) {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,6 +5,7 @@ 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";
|
||||
import { resolve } from "path";
|
||||
|
||||
export default defineConfig({
|
||||
base: "/",
|
||||
@@ -26,7 +27,7 @@ export default defineConfig({
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": fileURLToPath(new URL("./src", import.meta.url)),
|
||||
"@": resolve(__dirname, "src"),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
|
||||
10519
package-lock.json
generated
Normal file
10519
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
7077
pnpm-lock.yaml
generated
7077
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user