mirror of
https://github.com/jiangrui1994/CloudSaver.git
synced 2026-01-11 23:58:46 +08:00
feat:add mobile views
This commit is contained in:
jiangrui
138
frontend/src/components/mobile/FolderSelect.vue
Normal file
138
frontend/src/components/mobile/FolderSelect.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div class="folder-select">
|
||||
<div class="folder-select-header">
|
||||
当前位置：<el-icon style="margin: 0 5px"><Folder /></el-icon
|
||||
>{{ selectedFolder?.path?.map((x: Folder) => x.name).join("/") }}
|
||||
</div>
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:data="folders"
|
||||
:props="defaultProps"
|
||||
node-key="cid"
|
||||
:load="loadNode"
|
||||
lazy
|
||||
highlight-current
|
||||
@node-click="handleNodeClick"
|
||||
>
|
||||
<template #default="{ node }">
|
||||
<span class="folder-node">
|
||||
<el-icon><Folder /></el-icon>
|
||||
{{ node.label }}
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, defineProps } from "vue";
|
||||
import { cloud115Api } from "@/api/cloud115";
|
||||
import { quarkApi } from "@/api/quark";
|
||||
import type { TreeInstance } from "element-plus";
|
||||
import type { Folder } from "@/types";
|
||||
import { type RequestResult } from "@/types/response";
|
||||
import { useResourceStore } from "@/stores/resource";
|
||||
|
||||
const resourceStore = useResourceStore();
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const props = defineProps({
|
||||
cloudType: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const treeRef = ref<TreeInstance>();
|
||||
const folders = ref<Folder[]>([]);
|
||||
const selectedFolder = ref<Folder | null>(null);
|
||||
const emit = defineEmits<{
|
||||
(e: "select", folderId: string): void;
|
||||
(e: "close"): void;
|
||||
}>();
|
||||
|
||||
const defaultProps = {
|
||||
label: "name",
|
||||
children: "children",
|
||||
isLeaf: "leaf",
|
||||
};
|
||||
|
||||
const cloudTypeApiMap = {
|
||||
pan115: cloud115Api,
|
||||
quark: quarkApi,
|
||||
};
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const loadNode = async (node: any, resolve: (list: Folder[]) => void) => {
|
||||
const api = cloudTypeApiMap[props.cloudType as keyof typeof cloudTypeApiMap];
|
||||
try {
|
||||
let res: RequestResult<Folder[]> = { code: 0, data: [] as Folder[], message: "" };
|
||||
resourceStore.setLoadTree(true);
|
||||
if (node.level === 0) {
|
||||
if (api.getFolderList) {
|
||||
// 使用类型保护检查方法是否存在
|
||||
res = await api.getFolderList();
|
||||
}
|
||||
} else {
|
||||
if (api.getFolderList) {
|
||||
// 使用类型保护检查方法是否存在
|
||||
res = await api.getFolderList(node.data.cid);
|
||||
}
|
||||
}
|
||||
if (res?.code === 0) {
|
||||
resolve(res.data.length ? res.data : []);
|
||||
} else {
|
||||
throw new Error(res.message);
|
||||
}
|
||||
resourceStore.setLoadTree(false);
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? `${error.message}` : "获取目录失败");
|
||||
// 关闭模态框
|
||||
emit("close");
|
||||
resourceStore.setLoadTree(false);
|
||||
resolve([]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleNodeClick = (data: Folder) => {
|
||||
selectedFolder.value = {
|
||||
...data,
|
||||
path: data.path ? [...data.path, data] : [data],
|
||||
};
|
||||
emit("select", data.cid);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.folder-select {
|
||||
min-height: 300px;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.folder-node {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.folder-path {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
:deep(.el-tree-node__content) {
|
||||
height: 32px;
|
||||
}
|
||||
.folder-select-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #e5e6e8;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
138
frontend/src/components/mobile/ResourceCard.vue
Normal file
138
frontend/src/components/mobile/ResourceCard.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div class="resource-card-list">
|
||||
<div v-for="item in dataList" :key="item.id" class="resource-card-list__item">
|
||||
<div class="resource-card-content-box">
|
||||
<div class="resource-card-left">
|
||||
<van-image
|
||||
width="100"
|
||||
class="resource-card-image"
|
||||
lazy-load
|
||||
fit="contain"
|
||||
:src="`/tele-images/?url=${encodeURIComponent(item.image as string)}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="resource-card-right">
|
||||
<div class="resource-card-title" @click="openUrl(item.cloudLinks[0])">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class="resource-card-content" v-html="item.content"></div>
|
||||
<div v-if="item.tags && item.tags.length" class="resource-card-tags">
|
||||
<van-tag
|
||||
v-for="tag in item.tags"
|
||||
:key="tag"
|
||||
type="primary"
|
||||
class="item-tag"
|
||||
@click="searchMovieforTag(tag)"
|
||||
>{{ tag }}</van-tag
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="resource-card-footer">
|
||||
<el-tag :type="store.tagColor[item.cloudType as keyof TagColor]" effect="dark" round>
|
||||
{{ item.cloudType }}
|
||||
</el-tag>
|
||||
<van-button type="primary" class="save-btn" @click="handleSave(item)">转存</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useResourceStore } from "@/stores/resource";
|
||||
import { computed } from "vue";
|
||||
import type { ResourceItem, TagColor } from "@/types";
|
||||
|
||||
const props = defineProps<{
|
||||
currentChannelId: string;
|
||||
}>();
|
||||
|
||||
const currentChannelId = computed(() => props.currentChannelId);
|
||||
|
||||
const store = useResourceStore();
|
||||
|
||||
const dataList = computed(() => {
|
||||
const channel = store.resources.filter((item) => {
|
||||
return item.id === currentChannelId.value;
|
||||
});
|
||||
console.log(currentChannelId.value, channel, store.resources);
|
||||
return channel.length ? channel[0].list : [];
|
||||
});
|
||||
|
||||
const emit = defineEmits(["save", "searchMovieforTag"]);
|
||||
|
||||
const handleSave = (resource: ResourceItem) => {
|
||||
emit("save", resource);
|
||||
};
|
||||
|
||||
const openUrl = (url: string) => {
|
||||
window.open(url);
|
||||
};
|
||||
|
||||
const searchMovieforTag = (tag: string) => {
|
||||
emit("searchMovieforTag", tag);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.resource-card-list {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.resource-card-image {
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.resource-card-list__item {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
box-shadow: 0 4px 10px rgba(225, 225, 225, 0.3);
|
||||
background-color: #fff;
|
||||
border-radius: 15px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
margin-top: 15px;
|
||||
padding-bottom: 0;
|
||||
.resource-card-content-box {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 15px;
|
||||
.resource-card-right {
|
||||
margin-left: 10px;
|
||||
.resource-card-title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
white-space: all;
|
||||
}
|
||||
.resource-card-content {
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 4;
|
||||
overflow: hidden;
|
||||
white-space: all;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-tag {
|
||||
margin-left: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.resource-card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: #eee 1px solid;
|
||||
height: 80px;
|
||||
}
|
||||
.save-btn {
|
||||
height: 50px;
|
||||
font-size: 24px;
|
||||
border-radius: 40px;
|
||||
}
|
||||
</style>
|
||||
82
frontend/src/components/mobile/ResourceSelect.vue
Normal file
82
frontend/src/components/mobile/ResourceSelect.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div class="folder-select">
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:data="resourceStore.shareInfo.list"
|
||||
:props="defaultProps"
|
||||
:default-checked-keys="resourceStore.shareInfo.list?.map((x) => x.fileId) || []"
|
||||
node-key="fileId"
|
||||
show-checkbox
|
||||
highlight-current
|
||||
@check-change="handleCheckChange"
|
||||
>
|
||||
<template #default="{ node }">
|
||||
<span class="folder-node">
|
||||
<el-icon><Folder /></el-icon>
|
||||
{{ node.data.fileName }}
|
||||
<span v-if="node.data.fileSize" style="font-weight: bold"
|
||||
>({{ formattedFileSize(node.data.fileSize) }})</span
|
||||
>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useResourceStore } from "@/stores/resource";
|
||||
import { formattedFileSize } from "@/utils/index";
|
||||
import type { ShareInfo } from "@/types";
|
||||
|
||||
const resourceStore = useResourceStore();
|
||||
const selectedResource = ref<ShareInfo[]>([]);
|
||||
|
||||
const defaultProps = {
|
||||
isLeaf: "leaf",
|
||||
};
|
||||
|
||||
const handleCheckChange = (data: ShareInfo) => {
|
||||
selectedResource.value = [...resourceStore.resourceSelect, ...selectedResource.value];
|
||||
if (selectedResource.value.findIndex((x) => x.fileId === data.fileId) === -1) {
|
||||
selectedResource.value.push(data);
|
||||
} else {
|
||||
selectedResource.value = selectedResource.value.filter((x) => x.fileId !== data.fileId);
|
||||
}
|
||||
resourceStore.setSelectedResource(selectedResource.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.folder-select {
|
||||
min-height: 300px;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.folder-node {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.folder-path {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
:deep(.el-tree-node__content) {
|
||||
height: 32px;
|
||||
}
|
||||
.folder-select-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #e5e6e8;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user