631 lines
13 KiB
Vue
631 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<div class="folder-browser">
|
|||
|
|
<!-- 顶部导航栏 -->
|
|||
|
|
<div class="header">
|
|||
|
|
<div class="nav-left">
|
|||
|
|
<n-button quaternary circle size="large" @click="goBack" class="back-button">
|
|||
|
|
<template #icon>
|
|||
|
|
<n-icon>
|
|||
|
|
<ArrowBackOutline />
|
|||
|
|
</n-icon>
|
|||
|
|
</template>
|
|||
|
|
</n-button>
|
|||
|
|
<div class="breadcrumb">
|
|||
|
|
<span
|
|||
|
|
v-for="(crumb, index) in breadcrumbs"
|
|||
|
|
:key="crumb.id"
|
|||
|
|
class="breadcrumb-item"
|
|||
|
|
@click="navigateTo(crumb)"
|
|||
|
|
>
|
|||
|
|
{{ crumb.name }}
|
|||
|
|
<span v-if="index < breadcrumbs.length - 1" class="separator">></span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="nav-right">
|
|||
|
|
<n-button type="primary" @click="addFile">
|
|||
|
|
添加文件
|
|||
|
|
</n-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 内容区域 -->
|
|||
|
|
<div class="content">
|
|||
|
|
<div class="folder-view">
|
|||
|
|
<div class="folder-header">
|
|||
|
|
<h3>{{ currentFolder?.name || '文件夹' }}</h3>
|
|||
|
|
<div class="folder-info" v-if="currentFolder">
|
|||
|
|
<span>创建时间：{{ currentFolder.createTime }}</span>
|
|||
|
|
<span>创建人：{{ currentFolder.creator }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 文件夹内容列表 -->
|
|||
|
|
<div class="folder-content">
|
|||
|
|
<div class="file-grid">
|
|||
|
|
<div
|
|||
|
|
v-for="item in folderItems"
|
|||
|
|
:key="item.id"
|
|||
|
|
class="file-item"
|
|||
|
|
@click="selectItem(item)"
|
|||
|
|
@dblclick="openItem(item)"
|
|||
|
|
:class="{ 'selected': selectedItem?.id === item.id }"
|
|||
|
|
>
|
|||
|
|
<div class="file-icon">
|
|||
|
|
<img :src="getFileIcon(item.type)" :alt="item.type" />
|
|||
|
|
<div v-if="item.isTop" class="top-badge">置顶</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="file-name" :title="item.name">{{ item.name }}</div>
|
|||
|
|
<div class="file-meta">
|
|||
|
|
<span class="file-size">{{ item.size }}</span>
|
|||
|
|
<span class="file-time">{{ formatTime(item.createTime) }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="file-actions">
|
|||
|
|
<n-button @click.stop="viewItem(item)">查看</n-button>
|
|||
|
|
<n-button @click.stop="downloadItem(item)" v-if="item.type !== 'folder'">下载</n-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 空状态 -->
|
|||
|
|
<div v-if="folderItems.length === 0" class="empty-state">
|
|||
|
|
<div class="empty-icon">📁</div>
|
|||
|
|
<p>该文件夹暂无内容</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 加载状态 -->
|
|||
|
|
<div v-if="loading" class="loading-state">
|
|||
|
|
<div class="loading-spinner"></div>
|
|||
|
|
<p>加载中...</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, onMounted } from 'vue'
|
|||
|
|
import { useRoute, useRouter } from 'vue-router'
|
|||
|
|
import { useMessage } from 'naive-ui'
|
|||
|
|
import { ArrowBackOutline } from '@vicons/ionicons5'
|
|||
|
|
|
|||
|
|
|
|||
|
|
const route = useRoute()
|
|||
|
|
const router = useRouter()
|
|||
|
|
const message = useMessage()
|
|||
|
|
|
|||
|
|
// 文件类型定义
|
|||
|
|
interface FileItem {
|
|||
|
|
id: number
|
|||
|
|
name: string
|
|||
|
|
type: string
|
|||
|
|
size: string
|
|||
|
|
creator: string
|
|||
|
|
createTime: string
|
|||
|
|
isTop: boolean
|
|||
|
|
children?: FileItem[]
|
|||
|
|
parentId?: number
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 当前文件夹
|
|||
|
|
const currentFolder = ref<FileItem | null>(null)
|
|||
|
|
// 面包屑导航
|
|||
|
|
const breadcrumbs = ref<FileItem[]>([])
|
|||
|
|
// 文件夹内容
|
|||
|
|
const folderItems = ref<FileItem[]>([])
|
|||
|
|
// 选中的项目
|
|||
|
|
const selectedItem = ref<FileItem | null>(null)
|
|||
|
|
// 加载状态
|
|||
|
|
const loading = ref(false)
|
|||
|
|
|
|||
|
|
// 模拟文件数据
|
|||
|
|
const mockFileData: FileItem[] = [
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
name: '教学资料文件夹',
|
|||
|
|
type: 'folder',
|
|||
|
|
size: '1MB',
|
|||
|
|
creator: '王建国',
|
|||
|
|
createTime: '2025.07.25 09:20',
|
|||
|
|
isTop: true,
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
id: 2,
|
|||
|
|
name: '课程大纲.xlsx',
|
|||
|
|
type: 'excel',
|
|||
|
|
size: '1MB',
|
|||
|
|
creator: '王建国',
|
|||
|
|
createTime: '2025.07.25 09:20',
|
|||
|
|
isTop: false,
|
|||
|
|
parentId: 1
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 3,
|
|||
|
|
name: '教学计划.docx',
|
|||
|
|
type: 'word',
|
|||
|
|
size: '2MB',
|
|||
|
|
creator: '王建国',
|
|||
|
|
createTime: '2025.07.25 09:20',
|
|||
|
|
isTop: false,
|
|||
|
|
parentId: 1
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 4,
|
|||
|
|
name: '子文件夹',
|
|||
|
|
type: 'folder',
|
|||
|
|
size: '0B',
|
|||
|
|
creator: '王建国',
|
|||
|
|
createTime: '2025.07.25 10:30',
|
|||
|
|
isTop: false,
|
|||
|
|
parentId: 1,
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
id: 5,
|
|||
|
|
name: '深层文件.pdf',
|
|||
|
|
type: 'pdf',
|
|||
|
|
size: '3MB',
|
|||
|
|
creator: '王建国',
|
|||
|
|
createTime: '2025.07.25 11:00',
|
|||
|
|
isTop: false,
|
|||
|
|
parentId: 4
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
// 获取文件图标
|
|||
|
|
const getFileIcon = (type: string) => {
|
|||
|
|
const iconMap: { [key: string]: string } = {
|
|||
|
|
folder: '/images/teacher/folder.jpg',
|
|||
|
|
excel: '/images/activity/xls.png',
|
|||
|
|
word: '/images/activity/wrod.png',
|
|||
|
|
pdf: '/images/activity/pdf.png',
|
|||
|
|
ppt: '/images/activity/ppt.png',
|
|||
|
|
video: '/images/activity/file.png',
|
|||
|
|
image: '/images/activity/image.png'
|
|||
|
|
}
|
|||
|
|
return iconMap[type] || '/images/activity/file.png'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 格式化时间
|
|||
|
|
const formatTime = (timeStr: string) => {
|
|||
|
|
return timeStr.replace(/\./g, '-')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 根据ID查找文件
|
|||
|
|
const findFileById = (files: FileItem[], id: number): FileItem | null => {
|
|||
|
|
for (const file of files) {
|
|||
|
|
if (file.id === id) {
|
|||
|
|
return file
|
|||
|
|
}
|
|||
|
|
if (file.children) {
|
|||
|
|
const found = findFileById(file.children, id)
|
|||
|
|
if (found) return found
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return null
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 构建面包屑导航
|
|||
|
|
const buildBreadcrumbs = (folder: FileItem) => {
|
|||
|
|
const crumbs: FileItem[] = []
|
|||
|
|
let current = folder
|
|||
|
|
|
|||
|
|
while (current) {
|
|||
|
|
crumbs.unshift(current)
|
|||
|
|
if (current.parentId) {
|
|||
|
|
current = findFileById(mockFileData, current.parentId) as FileItem
|
|||
|
|
} else {
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
breadcrumbs.value = crumbs
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 加载文件夹数据
|
|||
|
|
const loadFolder = (folderId: number) => {
|
|||
|
|
loading.value = true
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
const folder = findFileById(mockFileData, folderId)
|
|||
|
|
if (folder && folder.type === 'folder') {
|
|||
|
|
currentFolder.value = folder
|
|||
|
|
buildBreadcrumbs(folder)
|
|||
|
|
|
|||
|
|
if (folder.children) {
|
|||
|
|
// 对文件夹内容进行排序：置顶文件在前
|
|||
|
|
folderItems.value = [...folder.children].sort((a, b) => {
|
|||
|
|
if (a.isTop && !b.isTop) return -1
|
|||
|
|
if (!a.isTop && b.isTop) return 1
|
|||
|
|
return 0
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
folderItems.value = []
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
message.error('文件夹不存在或不是有效的文件夹')
|
|||
|
|
router.back()
|
|||
|
|
}
|
|||
|
|
loading.value = false
|
|||
|
|
}, 500)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 选中项目
|
|||
|
|
const selectItem = (item: FileItem) => {
|
|||
|
|
selectedItem.value = item
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 打开项目（双击）
|
|||
|
|
const openItem = (item: FileItem) => {
|
|||
|
|
if (item.type === 'folder') {
|
|||
|
|
// 跳转到子文件夹
|
|||
|
|
router.push({
|
|||
|
|
name: 'FolderBrowser',
|
|||
|
|
params: {
|
|||
|
|
id: route.params.id,
|
|||
|
|
folderId: item.id.toString()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
// 跳转到文件查看页面
|
|||
|
|
router.push({
|
|||
|
|
name: 'FileViewer',
|
|||
|
|
params: {
|
|||
|
|
id: route.params.id,
|
|||
|
|
fileId: item.id.toString()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 查看项目
|
|||
|
|
const viewItem = (item: FileItem) => {
|
|||
|
|
if (item.type === 'folder') {
|
|||
|
|
openItem(item)
|
|||
|
|
} else {
|
|||
|
|
// 跳转到文件查看页面
|
|||
|
|
router.push({
|
|||
|
|
name: 'FileViewer',
|
|||
|
|
params: {
|
|||
|
|
id: route.params.id,
|
|||
|
|
fileId: item.id.toString()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 下载项目
|
|||
|
|
const downloadItem = (item: FileItem) => {
|
|||
|
|
message.success(`开始下载：${item.name}`)
|
|||
|
|
// 这里实现下载逻辑
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 导航到面包屑位置
|
|||
|
|
const navigateTo = (crumb: FileItem) => {
|
|||
|
|
if (crumb.id !== currentFolder.value?.id) {
|
|||
|
|
router.push({
|
|||
|
|
name: 'FolderBrowser',
|
|||
|
|
params: {
|
|||
|
|
id: route.params.id,
|
|||
|
|
folderId: crumb.id.toString()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 返回上一页
|
|||
|
|
const goBack = () => {
|
|||
|
|
router.back()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 添加文件
|
|||
|
|
const addFile = () => {
|
|||
|
|
message.info('添加文件功能')
|
|||
|
|
// 这里可以打开文件上传模态框
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 组件挂载时加载数据
|
|||
|
|
onMounted(() => {
|
|||
|
|
const folderId = parseInt(route.params.folderId as string)
|
|||
|
|
if (folderId) {
|
|||
|
|
loadFolder(folderId)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 监听路由参数变化
|
|||
|
|
router.afterEach(() => {
|
|||
|
|
const folderId = parseInt(route.params.folderId as string)
|
|||
|
|
if (folderId && folderId !== currentFolder.value?.id) {
|
|||
|
|
loadFolder(folderId)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.folder-browser {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
height: 100vh;
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 顶部导航栏 */
|
|||
|
|
.header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 16px 24px;
|
|||
|
|
border-bottom: 1px solid #e8e8e8;
|
|||
|
|
background: #fff;
|
|||
|
|
z-index: 10;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-left {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.back-btn {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
padding: 8px 16px;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
border: 1px solid #d9d9d9;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #666;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.back-btn:hover {
|
|||
|
|
background: #e6f7ff;
|
|||
|
|
border-color: #0288d1;
|
|||
|
|
color: #0288d1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.breadcrumb {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.breadcrumb-item {
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: color 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.breadcrumb-item:hover {
|
|||
|
|
color: #0288d1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.breadcrumb-item:last-child {
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.separator {
|
|||
|
|
margin: 0 8px;
|
|||
|
|
color: #ccc;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-right .btn {
|
|||
|
|
padding: 8px 16px;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 14px;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-primary {
|
|||
|
|
background: #0288d1;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-primary:hover {
|
|||
|
|
background: #0277bd;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 内容区域 */
|
|||
|
|
.content {
|
|||
|
|
flex: 1;
|
|||
|
|
overflow: auto;
|
|||
|
|
padding: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.folder-view {
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.folder-header {
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.folder-header h3 {
|
|||
|
|
margin: 0 0 8px 0;
|
|||
|
|
font-size: 24px;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.folder-info {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 24px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.folder-content {
|
|||
|
|
min-height: 400px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.file-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|||
|
|
gap: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.file-item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 16px;
|
|||
|
|
border: 1px solid #e8e8e8;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
background: #fff;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.file-item:hover {
|
|||
|
|
border-color: #0288d1;
|
|||
|
|
box-shadow: 0 2px 8px rgba(2, 136, 209, 0.1);
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.file-item.selected {
|
|||
|
|
border-color: #0288d1;
|
|||
|
|
box-shadow: 0 0 0 2px rgba(2, 136, 209, 0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.file-icon {
|
|||
|
|
position: relative;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.file-icon img {
|
|||
|
|
width: 48px;
|
|||
|
|
height: 48px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top-badge {
|
|||
|
|
position: absolute;
|
|||
|
|
top: -8px;
|
|||
|
|
right: -8px;
|
|||
|
|
background: #ff4d4f;
|
|||
|
|
color: white;
|
|||
|
|
font-size: 10px;
|
|||
|
|
padding: 2px 6px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.file-name {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #333;
|
|||
|
|
text-align: center;
|
|||
|
|
word-break: break-word;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
min-height: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.file-meta {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 4px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #999;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.file-actions {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 8px;
|
|||
|
|
opacity: 0;
|
|||
|
|
transition: opacity 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.file-item:hover .file-actions {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn {
|
|||
|
|
padding: 4px 8px;
|
|||
|
|
border: 1px solid #0288d1;
|
|||
|
|
background: white;
|
|||
|
|
color: #0288d1;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 12px;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn:hover {
|
|||
|
|
background: #0288d1;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-state {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 80px 20px;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-icon {
|
|||
|
|
font-size: 64px;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
opacity: 0.6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 加载状态 */
|
|||
|
|
.loading-state {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
height: 400px;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading-spinner {
|
|||
|
|
width: 32px;
|
|||
|
|
height: 32px;
|
|||
|
|
border: 3px solid #f3f3f3;
|
|||
|
|
border-top: 3px solid #0288d1;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
animation: spin 1s linear infinite;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes spin {
|
|||
|
|
0% { transform: rotate(0deg); }
|
|||
|
|
100% { transform: rotate(360deg); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 响应式设计 */
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.content {
|
|||
|
|
padding: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.file-grid {
|
|||
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.folder-info {
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-left {
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|