<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件管理系统</title>
    <!-- 引入TailwindCSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font-awesome图标 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        neutral: '#F5F7FA',
                        dark: '#1D2129',
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .btn-effect {
                @apply transform transition-all duration-200 active:scale-95;
            }
            .scrollbar-thin {
                scrollbar-width: thin;
            }
            .scrollbar-thin::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }
            .scrollbar-thin::-webkit-scrollbar-thumb {
                background-color: rgba(156, 163, 175, 0.5);
                border-radius: 3px;
            }
            .folder-active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .breadcrumb-item {
                @apply flex items-center text-sm;
            }
            .breadcrumb-separator {
                @apply mx-2 text-gray-400;
            }
        }

        /* 提示框样式 */
        .notification {
            @apply fixed top-4 right-4 px-4 py-3 rounded-lg shadow-lg flex items-center gap-2 z-50 transform transition-all duration-300 opacity-0 translate-y-[-20px];
        }
        .notification.show {
            @apply opacity-100 translate-y-0;
        }
        .notification-success {
            @apply bg-success/10 text-success border border-success/30;
        }
        .notification-error {
            @apply bg-danger/10 text-danger border border-danger/30;
        }
        .notification-info {
            @apply bg-primary/10 text-primary border border-primary/30;
        }
    </style>
</head>

<body class="font-inter bg-gray-50 h-screen flex flex-col overflow-hidden text-dark">
<!-- 主内容区 -->
<main class="flex-1 flex flex-col overflow-hidden">
    <!-- 查询区域 -->
    <section class="bg-white p-4 border-b border-gray-200">
        <div class="container mx-auto flex flex-col md:flex-row md:items-center gap-4">
            <!-- 面包屑导航 -->
            <div class="flex items-center text-sm mb-2 md:mb-0">
                <span class="breadcrumb-separator">/</span>
                <div class="breadcrumb-item" id="currentFolderName">全部文件</div>
            </div>

            <div class="relative flex-1">
                <input
                        type="text"
                        placeholder="搜索文件名、类型或创建人..."
                        class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary outline-none transition-all"
                >
                <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
            </div>
            <div class="flex items-center gap-3">
                <button id="searchBtn" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg flex items-center gap-2 btn-effect">
                    <i class="fa fa-search"></i>
                    <span>查询</span>
                </button>
                <button id="resetBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-lg flex items-center gap-2 btn-effect">
                    <i class="fa fa-refresh"></i>
                    <span>重置</span>
                </button>
            </div>
        </div>
    </section>

    <!-- 数据展示区域 -->
    <section class="flex-1 flex overflow-hidden">
        <!-- 左侧导航 -->
        <div class="w-full md:w-1/5 bg-white border-r border-gray-200 p-4 overflow-y-auto scrollbar-thin">
            <div class="space-y-6">
                <!-- 数据统计 -->
                <div class="bg-neutral rounded-xl p-4">
                    <h3 class="text-sm font-medium text-gray-500 mb-3">数据统计</h3>
                    <div class="space-y-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm">文件总数</span>
                            <span class="font-semibold">2,356</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm">已用空间</span>
                            <span class="font-semibold text-primary">18.7 GB</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm">剩余空间</span>
                            <span class="font-semibold text-success">81.3 GB</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm">共享文件</span>
                            <span class="font-semibold">142</span>
                        </div>
                    </div>
                </div>

                <!-- 文件管理 -->
                <div>
                    <h3 class="text-sm font-medium text-gray-500 mb-3">文件管理</h3>
                    <ul class="space-y-1">
                        <li>
                            <a href="#" class="folder-link flex items-center gap-3 px-3 py-2 rounded-lg bg-primary/10 text-primary" data-folder="all">
                                <i class="fa fa-home w-5 text-center"></i>
                                <span>全部</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="folder-link flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors" data-folder="images">
                                <i class="fa fa-image w-5 text-center"></i>
                                <span>图片</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="folder-link flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors" data-folder="documents">
                                <i class="fa fa-file-text-o w-5 text-center"></i>
                                <span>文档</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="folder-link flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors" data-folder="audio">
                                <i class="fa fa-music w-5 text-center"></i>
                                <span>音频</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="folder-link flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors" data-folder="videos">
                                <i class="fa fa-film w-5 text-center"></i>
                                <span>视频</span>
                            </a>
                        </li>
                    </ul>
                </div>

                <!-- 我的文件夹 -->
                <div>
                    <h3 class="text-sm font-medium text-gray-500 mb-3">我的文件夹</h3>
                    <ul class="space-y-1">
                        <li th:each="folder :${folders}">
                            <a href="#" class="folder-link flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors" data-folder="market-research">
                                <i class="fa fa-folder w-5 text-center"></i>
                                <span th:text="${folder.getFolderName()}"></span>
                            </a>
                        </li>
                    </ul>
                </div>

                <!-- 共享管理 -->
                <div>
                    <h3 class="text-sm font-medium text-gray-500 mb-3">共享管理</h3>
                    <ul class="space-y-1">
                        <li>
                            <a href="#" class="folder-link flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors" data-folder="my-shares">
                                <i class="fa fa-share-alt w-5 text-center"></i>
                                <span>我的共享</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="folder-link flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors" data-folder="shared-with-me">
                                <i class="fa fa-user-o w-5 text-center"></i>
                                <span>共享给我</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 右侧文件列表 -->
        <div class="flex-1 flex flex-col bg-gray-50 overflow-hidden">
            <!-- 操作按钮 -->
            <div class="bg-white border-b border-gray-200 p-4 flex justify-between items-center">
                <div class="flex items-center gap-3">
                    <button id="uploadBtn" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg flex items-center gap-2 btn-effect">
                        <i class="fa fa-upload"></i>
                        <span>上传文件</span>
                    </button>
                    <button id="createFolderBtn" class="bg-secondary hover:bg-secondary/90 text-white px-4 py-2 rounded-lg flex items-center gap-2 btn-effect">
                        <i class="fa fa-folder"></i>
                        <span>新建文件夹</span>
                    </button>
                </div>
                <div class="text-sm text-gray-500">
                    共 <span class="font-medium text-primary" id="fileCount">8</span> 个文件
                </div>
            </div>

            <!-- 文件卡片列表（静态模拟数据） -->
            <div class="flex-1 p-4 overflow-y-auto scrollbar-thin">
                <div id="fileList" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
                    <!-- 项目计划书.pdf -->
                    <div class="file-card bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200 card-hover" data-folder="all documents project-docs">
                        <div class="p-4">
                            <div class="flex items-start justify-between mb-3">
                                <div class="flex items-center gap-2">
                                    <i class="fa fa-file-pdf-o text-danger text-xl"></i>
                                    <h4 class="font-medium truncate max-w-[70%]">项目计划书.pdf</h4>
                                </div>
                                <span class="text-xs bg-danger/10 text-danger px-2 py-0.5 rounded">PDF</span>
                            </div>
                            <div class="space-y-1 text-xs text-gray-500 mb-4">
                                <div class="flex justify-between"><span>大小</span><span>2.4 MB</span></div>
                                <div class="flex justify-between"><span>来源</span><span>本地上传</span></div>
                                <div class="flex justify-between"><span>创建时间</span><span>2023-10-15</span></div>
                                <div class="flex justify-between"><span>创建人</span><span>张三</span></div>
                            </div>
                            <div class="flex justify-end gap-2">
                                <button class="text-primary hover:text-primary/80 p-1.5 rounded hover:bg-primary/10 transition-colors view-detail" data-name="项目计划书.pdf" data-type="pdf">
                                    <i class="fa fa-eye"></i>
                                </button>
                                <button class="text-success hover:text-success/80 p-1.5 rounded hover:bg-success/10 transition-colors download-file" data-name="项目计划书.pdf">
                                    <i class="fa fa-download"></i>
                                </button>
                                <button class="text-secondary hover:text-secondary/80 p-1.5 rounded hover:bg-secondary/10 transition-colors share-file">
                                    <i class="fa fa-share-alt"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 销售数据统计.xlsx -->
                    <div class="file-card bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200 card-hover" data-folder="all documents my-shares">
                        <div class="p-4">
                            <div class="flex items-start justify-between mb-3">
                                <div class="flex items-center gap-2">
                                    <i class="fa fa-file-excel-o text-success text-xl"></i>
                                    <h4 class="font-medium truncate max-w-[70%]">销售数据统计.xlsx</h4>
                                </div>
                                <span class="text-xs bg-success/10 text-success px-2 py-0.5 rounded">Excel</span>
                            </div>
                            <div class="space-y-1 text-xs text-gray-500 mb-4">
                                <div class="flex justify-between"><span>大小</span><span>1.8 MB</span></div>
                                <div class="flex justify-between"><span>来源</span><span>系统生成</span></div>
                                <div class="flex justify-between"><span>创建时间</span><span>2023-10-12</span></div>
                                <div class="flex justify-between"><span>创建人</span><span>李四</span></div>
                            </div>
                            <div class="flex justify-end gap-2">
                                <button class="text-primary hover:text-primary/80 p-1.5 rounded hover:bg-primary/10 transition-colors view-detail" data-name="销售数据统计.xlsx" data-type="excel">
                                    <i class="fa fa-eye"></i>
                                </button>
                                <button class="text-success hover:text-success/80 p-1.5 rounded hover:bg-success/10 transition-colors download-file" data-name="销售数据统计.xlsx">
                                    <i class="fa fa-download"></i>
                                </button>
                                <button class="text-secondary hover:text-secondary/80 p-1.5 rounded hover:bg-secondary/10 transition-colors share-file">
                                    <i class="fa fa-share-alt"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 产品宣传图.png -->
                    <div class="file-card bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200 card-hover" data-folder="all images shared-with-me">
                        <div class="p-4">
                            <div class="flex items-start justify-between mb-3">
                                <div class="flex items-center gap-2">
                                    <i class="fa fa-file-image-o text-warning text-xl"></i>
                                    <h4 class="font-medium truncate max-w-[70%]">产品宣传图.png</h4>
                                </div>
                                <span class="text-xs bg-warning/10 text-warning px-2 py-0.5 rounded">图片</span>
                            </div>
                            <div class="space-y-1 text-xs text-gray-500 mb-4">
                                <div class="flex justify-between"><span>大小</span><span>5.2 MB</span></div>
                                <div class="flex justify-between"><span>来源</span><span>共享文件</span></div>
                                <div class="flex justify-between"><span>创建时间</span><span>2023-10-10</span></div>
                                <div class="flex justify-between"><span>创建人</span><span>王五</span></div>
                            </div>
                            <div class="flex justify-end gap-2">
                                <button class="text-primary hover:text-primary/80 p-1.5 rounded hover:bg-primary/10 transition-colors view-detail" data-name="产品宣传图.png" data-type="image">
                                    <i class="fa fa-eye"></i>
                                </button>
                                <button class="text-success hover:text-success/80 p-1.5 rounded hover:bg-success/10 transition-colors download-file" data-name="产品宣传图.png">
                                    <i class="fa fa-download"></i>
                                </button>
                                <button class="text-secondary hover:text-secondary/80 p-1.5 rounded hover:bg-secondary/10 transition-colors share-file">
                                    <i class="fa fa-share-alt"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 会议记录.docx -->
                    <div class="file-card bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200 card-hover" data-folder="all documents">
                        <div class="p-4">
                            <div class="flex items-start justify-between mb-3">
                                <div class="flex items-center gap-2">
                                    <i class="fa fa-file-word-o text-primary text-xl"></i>
                                    <h4 class="font-medium truncate max-w-[70%]">会议记录.docx</h4>
                                </div>
                                <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded">Word</span>
                            </div>
                            <div class="space-y-1 text-xs text-gray-500 mb-4">
                                <div class="flex justify-between"><span>大小</span><span>980 KB</span></div>
                                <div class="flex justify-between"><span>来源</span><span>本地上传</span></div>
                                <div class="flex justify-between"><span>创建时间</span><span>2023-10-08</span></div>
                                <div class="flex justify-between"><span>创建人</span><span>赵六</span></div>
                            </div>
                            <div class="flex justify-end gap-2">
                                <button class="text-primary hover:text-primary/80 p-1.5 rounded hover:bg-primary/10 transition-colors view-detail" data-name="会议记录.docx" data-type="word">
                                    <i class="fa fa-eye"></i>
                                </button>
                                <button class="text-success hover:text-success/80 p-1.5 rounded hover:bg-success/10 transition-colors download-file" data-name="会议记录.docx">
                                    <i class="fa fa-download"></i>
                                </button>
                                <button class="text-secondary hover:text-secondary/80 p-1.5 rounded hover:bg-secondary/10 transition-colors share-file">
                                    <i class="fa fa-share-alt"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 市场调研资料文件夹 -->
                    <div class="file-card bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200 card-hover" data-folder="all market-research">
                        <div class="p-4">
                            <div class="flex items-start justify-between mb-3">
                                <div class="flex items-center gap-2">
                                    <i class="fa fa-folder text-warning text-xl"></i>
                                    <h4 class="font-medium truncate max-w-[70%]">市场调研资料</h4>
                                </div>
                                <span class="text-xs bg-warning/10 text-warning px-2 py-0.5 rounded">文件夹</span>
                            </div>
                            <div class="space-y-1 text-xs text-gray-500 mb-4">
                                <div class="flex justify-between"><span>大小</span><span>12.5 MB</span></div>
                                <div class="flex justify-between"><span>来源</span><span>本地创建</span></div>
                                <div class="flex justify-between"><span>创建时间</span><span>2023-10-05</span></div>
                                <div class="flex justify-between"><span>创建人</span><span>张三</span></div>
                            </div>
                            <div class="flex justify-end gap-2">
                                <button class="text-primary hover:text-primary/80 p-1.5 rounded hover:bg-primary/10 transition-colors view-detail" data-name="市场调研资料" data-type="folder">
                                    <i class="fa fa-eye"></i>
                                </button>
                                <button class="text-secondary hover:text-secondary/80 p-1.5 rounded hover:bg-secondary/10 transition-colors share-file">
                                    <i class="fa fa-share-alt"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 产品介绍.pptx -->
                    <div class="file-card bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200 card-hover" data-folder="all documents my-shares">
                        <div class="p-4">
                            <div class="flex items-start justify-between mb-3">
                                <div class="flex items-center gap-2">
                                    <i class="fa fa-file-powerpoint-o text-danger text-xl"></i>
                                    <h4 class="font-medium truncate max-w-[70%]">产品介绍.pptx</h4>
                                </div>
                                <span class="text-xs bg-danger/10 text-danger px-2 py-0.5 rounded">PPT</span>
                            </div>
                            <div class="space-y-1 text-xs text-gray-500 mb-4">
                                <div class="flex justify-between"><span>大小</span><span>8.7 MB</span></div>
                                <div class="flex justify-between"><span>来源</span><span>共享文件</span></div>
                                <div class="flex justify-between"><span>创建时间</span><span>2023-10-01</span></div>
                                <div class="flex justify-between"><span>创建人</span><span>李四</span></div>
                            </div>
                            <div class="flex justify-end gap-2">
                                <button class="text-primary hover:text-primary/80 p-1.5 rounded hover:bg-primary/10 transition-colors view-detail" data-name="产品介绍.pptx" data-type="ppt">
                                    <i class="fa fa-eye"></i>
                                </button>
                                <button class="text-success hover:text-success/80 p-1.5 rounded hover:bg-success/10 transition-colors download-file" data-name="产品介绍.pptx">
                                    <i class="fa fa-download"></i>
                                </button>
                                <button class="text-secondary hover:text-secondary/80 p-1.5 rounded hover:bg-secondary/10 transition-colors share-file">
                                    <i class="fa fa-share-alt"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 产品演示.mp4 -->
                    <div class="file-card bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200 card-hover" data-folder="all videos">
                        <div class="p-4">
                            <div class="flex items-start justify-between mb-3">
                                <div class="flex items-center gap-2">
                                    <i class="fa fa-file-video-o text-purple-500 text-xl"></i>
                                    <h4 class="font-medium truncate max-w-[70%]">产品演示.mp4</h4>
                                </div>
                                <span class="text-xs bg-purple-500/10 text-purple-500 px-2 py-0.5 rounded">视频</span>
                            </div>
                            <div class="space-y-1 text-xs text-gray-500 mb-4">
                                <div class="flex justify-between"><span>大小</span><span>156 MB</span></div>
                                <div class="flex justify-between"><span>来源</span><span>本地上传</span></div>
                                <div class="flex justify-between"><span>创建时间</span><span>2023-09-28</span></div>
                                <div class="flex justify-between"><span>创建人</span><span>王五</span></div>
                            </div>
                            <div class="flex justify-end gap-2">
                                <button class="text-primary hover:text-primary/80 p-1.5 rounded hover:bg-primary/10 transition-colors view-detail" data-name="产品演示.mp4" data-type="video">
                                    <i class="fa fa-eye"></i>
                                </button>
                                <button class="text-success hover:text-success/80 p-1.5 rounded hover:bg-success/10 transition-colors download-file" data-name="产品演示.mp4">
                                    <i class="fa fa-download"></i>
                                </button>
                                <button class="text-secondary hover:text-secondary/80 p-1.5 rounded hover:bg-secondary/10 transition-colors share-file">
                                    <i class="fa fa-share-alt"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 开发文档文件夹 -->
                    <div class="file-card bg-white rounded-xl shadow-sm overflow-hidden border border-gray-200 card-hover" data-folder="all development-docs">
                        <div class="p-4">
                            <div class="flex items-start justify-between mb-3">
                                <div class="flex items-center gap-2">
                                    <i class="fa fa-folder text-warning text-xl"></i>
                                    <h4 class="font-medium truncate max-w-[70%]">开发文档</h4>
                                </div>
                                <span class="text-xs bg-warning/10 text-warning px-2 py-0.5 rounded">文件夹</span>
                            </div>
                            <div class="space-y-1 text-xs text-gray-500 mb-4">
                                <div class="flex justify-between"><span>大小</span><span>24.3 MB</span></div>
                                <div class="flex justify-between"><span>来源</span><span>本地创建</span></div>
                                <div class="flex justify-between"><span>创建时间</span><span>2023-09-25</span></div>
                                <div class="flex justify-between"><span>创建人</span><span>赵六</span></div>
                            </div>
                            <div class="flex justify-end gap-2">
                                <button class="text-primary hover:text-primary/80 p-1.5 rounded hover:bg-primary/10 transition-colors view-detail" data-name="开发文档" data-type="folder">
                                    <i class="fa fa-eye"></i>
                                </button>
                                <button class="text-secondary hover:text-secondary/80 p-1.5 rounded hover:bg-secondary/10 transition-colors share-file">
                                    <i class="fa fa-share-alt"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<!-- 详情弹窗 -->
<div id="detailModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center p-4">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col transform transition-all duration-300 scale-95 opacity-0" id="modalContent">
        <div class="border-b border-gray-200 p-4 flex justify-between items-center">
            <h3 class="text-lg font-semibold" id="modalTitle">文件详情</h3>
            <button id="closeDetailModal" class="text-gray-500 hover:text-gray-700 p-2">
                <i class="fa fa-times"></i>
            </button>
        </div>
        <div class="flex-1 overflow-y-auto p-6">
            <div id="detailContent">
                <div class="flex flex-col md:flex-row gap-6">
                    <div class="md:w-1/3">
                        <div class="bg-gray-100 rounded-lg p-6 flex items-center justify-center mb-4">
                            <i id="detailIcon" class="fa fa-file-pdf-o text-6xl text-danger"></i>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-4">
                            <h4 class="font-medium mb-3">文件操作</h4>
                            <div class="flex flex-col gap-2">
                                <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2 btn-effect">
                                    <i class="fa fa-download"></i>
                                    <span>下载文件</span>
                                </button>
                                <button class="bg-secondary hover:bg-secondary/90 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2 btn-effect">
                                    <i class="fa fa-share-alt"></i>
                                    <span>分享文件</span>
                                </button>
                                <button class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-lg flex items-center justify-center gap-2 btn-effect">
                                    <i class="fa fa-history"></i>
                                    <span>版本历史</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="md:w-2/3">
                        <h2 id="detailFileName" class="text-xl font-semibold mb-6">项目计划书.pdf</h2>

                        <div class="space-y-4 mb-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <h4 class="text-sm text-gray-500 mb-1">文件类型</h4>
                                    <p id="detailFileType" class="font-medium">PDF 文档</p>
                                </div>
                                <div>
                                    <h4 class="text-sm text-gray-500 mb-1">文件大小</h4>
                                    <p id="detailFileSize" class="font-medium">2.4 MB</p>
                                </div>
                                <div>
                                    <h4 class="text-sm text-gray-500 mb-1">创建时间</h4>
                                    <p id="detailCreateTime" class="font-medium">2023-10-15 09:30</p>
                                </div>
                                <div>
                                    <h4 class="text-sm text-gray-500 mb-1">修改时间</h4>
                                    <p id="detailModifyTime" class="font-medium">2023-10-16 14:20</p>
                                </div>
                                <div>
                                    <h4 class="text-sm text-gray-500 mb-1">创建人</h4>
                                    <p id="detailCreator" class="font-medium">张三</p>
                                </div>
                                <div>
                                    <h4 class="text-sm text-gray-500 mb-1">存储位置</h4>
                                    <p id="detailLocation" class="font-medium">我的文件 > 项目文档</p>
                                </div>
                            </div>

                            <div>
                                <h4 class="text-sm text-gray-500 mb-1">文件描述</h4>
                                <p id="detailDescription" class="font-medium">这是2023年度新产品开发项目的详细计划书，包含项目目标、时间表、资源分配和预期成果等内容。</p>
                            </div>
                        </div>

                        <div>
                            <h4 class="text-sm font-medium mb-3">访问记录</h4>
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead>
                                    <tr>
                                        <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户</th>
                                        <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                        <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
                                    </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                    <tr>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <img src="https://picsum.photos/id/1001/32/32" alt="用户头像" class="w-6 h-6 rounded-full mr-2">
                                                <span>张三</span>
                                            </div>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm">上传文件</td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm">2023-10-15 09:30</td>
                                    </tr>
                                    <tr>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <img src="https://picsum.photos/id/1002/32/32" alt="用户头像" class="w-6 h-6 rounded-full mr-2">
                                                <span>李四</span>
                                            </div>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm">查看文件</td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm">2023-10-15 14:20</td>
                                    </tr>
                                    <tr>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <img src="https://picsum.photos/id/1003/32/32" alt="用户头像" class="w-6 h-6 rounded-full mr-2">
                                                <span>王五</span>
                                            </div>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm">下载文件</td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm">2023-10-16 10:15</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 新建文件夹弹窗 -->
<div id="createFolderModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center p-4">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-md transform transition-all duration-300 scale-95 opacity-0" id="createFolderModalContent">
        <div class="border-b border-gray-200 p-4 flex justify-between items-center">
            <h3 class="text-lg font-semibold">新建文件夹</h3>
            <button id="closeCreateFolderModal" class="text-gray-500 hover:text-gray-700 p-2">
                <i class="fa fa-times"></i>
            </button>
        </div>
        <div class="p-6">
            <div class="mb-4">
                <label for="folderName" class="block text-sm font-medium text-gray-700 mb-1">文件夹名称</label>
                <input type="text" id="folderName" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary outline-none transition-all" placeholder="请输入文件夹名称">
            </div>
            <div class="mb-6">
                <label for="folderLocation" class="block text-sm font-medium text-gray-700 mb-1">存储位置</label>
                <select id="folderLocation" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary outline-none transition-all">
                    <option value="root">我的文件</option>
                    <option value="project">我的文件 > 项目文档</option>
                    <option value="personal">我的文件 > 个人文档</option>
                </select>
            </div>
            <div class="flex justify-end gap-3">
                <button id="cancelCreateFolder" class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-lg btn-effect">取消</button>
                <button id="confirmCreateFolder" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg btn-effect">创建</button>
            </div>
        </div>
    </div>
</div>

<!-- 分享文件弹窗 -->
<div id="shareModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center p-4">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-md transform transition-all duration-300 scale-95 opacity-0" id="shareModalContent">
        <div class="border-b border-gray-200 p-4 flex justify-between items-center">
            <h3 class="text-lg font-semibold">分享文件</h3>
            <button id="closeShareModal" class="text-gray-500 hover:text-gray-700 p-2">
                <i class="fa fa-times"></i>
            </button>
        </div>
        <div class="p-6">
            <div class="mb-4">
                <label for="shareEmail" class="block text-sm font-medium text-gray-700 mb-1">邮箱地址</label>
                <input type="email" id="shareEmail" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary outline-none transition-all" placeholder="请输入接收方邮箱">
            </div>
            <div class="mb-6">
                <label for="sharePermission" class="block text-sm font-medium text-gray-700 mb-1">权限设置</label>
                <select id="sharePermission" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary outline-none transition-all">
                    <option value="view">仅查看</option>
                    <option value="edit">可编辑</option>
                    <option value="admin">完全控制</option>
                </select>
            </div>
            <div class="mb-6">
                <label for="shareMessage" class="block text-sm font-medium text-gray-700 mb-1">附加消息</label>
                <textarea id="shareMessage" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary outline-none transition-all" placeholder="请输入附加消息（可选）"></textarea>
            </div>
            <div class="flex justify-end gap-3">
                <button id="cancelShare" class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-lg btn-effect">取消</button>
                <button id="confirmShare" class="bg-secondary hover:bg-secondary/90 text-white px-4 py-2 rounded-lg btn-effect">发送</button>
            </div>
        </div>
    </div>
</div>

<!-- 上传文件弹窗 -->
<div id="uploadModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center p-4">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-md transform transition-all duration-300 scale-95 opacity-0" id="uploadModalContent">
        <div class="border-b border-gray-200 p-4 flex justify-between items-center">
            <h3 class="text-lg font-semibold">上传文件</h3>
            <button id="closeUploadModal" class="text-gray-500 hover:text-gray-700 p-2">
                <i class="fa fa-times"></i>
            </button>
        </div>
        <div class="p-6">
            <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-6 hover:border-primary transition-colors cursor-pointer" id="dropArea">
                <i class="fa fa-cloud-upload text-4xl text-gray-400 mb-3"></i>
                <p class="text-gray-500 mb-2">拖放文件到此处上传</p>
                <p class="text-sm text-gray-400">或</p>
                <button class="mt-3 bg-primary/10 hover:bg-primary/20 text-primary px-4 py-2 rounded-lg btn-effect">
                    选择文件
                </button>
                <input type="file" id="fileInput" class="hidden" multiple>
            </div>
            <div class="mb-6">
                <label for="uploadLocation" class="block text-sm font-medium text-gray-700 mb-1">存储位置</label>
                <select id="uploadLocation" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary outline-none transition-all">
                    <option value="root">我的文件</option>
                    <option value="project">我的文件 > 项目文档</option>
                    <option value="personal">我的文件 > 个人文档</option>
                </select>
            </div>
            <div class="flex justify-end gap-3">
                <button id="cancelUpload" class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-lg btn-effect">取消</button>
                <button id="confirmUpload" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg btn-effect">开始上传</button>
            </div>
        </div>
    </div>
</div>

<!-- 提示框容器 -->
<div id="notificationContainer"></div>

<script>
    // 提示框工具函数
    function showNotification(message, type = 'info') {
        const notification = document.createElement('div');
        notification.className = `notification notification-${type}`;

        let icon = 'fa-info-circle';
        if (type === 'success') icon = 'fa-check-circle';
        if (type === 'error') icon = 'fa-exclamation-circle';

        notification.innerHTML = `
            <i class="fa ${icon}"></i>
            <span>${message}</span>
        `;

        const container = document.getElementById('notificationContainer');
        container.appendChild(notification);

        setTimeout(() => {
            notification.classList.add('show');
        }, 10);

        setTimeout(() => {
            notification.classList.remove('show');
            setTimeout(() => {
                container.removeChild(notification);
            }, 300);
        }, 3000);
    }

    // 文件类型配置
    const fileTypeConfig = {
        pdf: { icon: 'fa-file-pdf-o', color: 'text-danger', label: 'PDF', typeText: 'PDF 文档' },
        excel: { icon: 'fa-file-excel-o', color: 'text-success', label: 'Excel', typeText: 'Excel 文档' },
        image: { icon: 'fa-file-image-o', color: 'text-warning', label: '图片', typeText: '图片文件' },
        word: { icon: 'fa-file-word-o', color: 'text-primary', label: 'Word', typeText: 'Word 文档' },
        folder: { icon: 'fa-folder', color: 'text-warning', label: '文件夹', typeText: '文件夹' },
        ppt: { icon: 'fa-file-powerpoint-o', color: 'text-danger', label: 'PPT', typeText: 'PowerPoint 文档' },
        video: { icon: 'fa-file-video-o', color: 'text-purple-500', label: '视频', typeText: '视频文件' }
    };

    // 文件夹名称映射
    const folderNames = {
        'all': '全部文件',
        'images': '图片',
        'documents': '文档',
        'audio': '音频',
        'videos': '视频',
        'market-research': '市场调研资料',
        'development-docs': '开发文档',
        'project-docs': '项目文档',
        'personal': '个人文档',
        'my-shares': '我的共享',
        'shared-with-me': '共享给我'
    };

    // 等待DOM加载完成
    document.addEventListener('DOMContentLoaded', function() {
        // 模态框相关元素
        const detailModal = document.getElementById('detailModal');
        const modalContent = document.getElementById('modalContent');
        const closeDetailModal = document.getElementById('closeDetailModal');

        const createFolderModal = document.getElementById('createFolderModal');
        const createFolderModalContent = document.getElementById('createFolderModalContent');
        const createFolderBtn = document.getElementById('createFolderBtn');
        const closeCreateFolderModal = document.getElementById('closeCreateFolderModal');
        const cancelCreateFolder = document.getElementById('cancelCreateFolder');

        const shareModal = document.getElementById('shareModal');
        const shareModalContent = document.getElementById('shareModalContent');
        const closeShareModal = document.getElementById('closeShareModal');
        const cancelShare = document.getElementById('cancelShare');

        const uploadModal = document.getElementById('uploadModal');
        const uploadModalContent = document.getElementById('uploadModalContent');
        const uploadBtn = document.getElementById('uploadBtn');
        const closeUploadModal = document.getElementById('closeUploadModal');
        const cancelUpload = document.getElementById('cancelUpload');
        const dropArea = document.getElementById('dropArea');
        const fileInput = document.getElementById('fileInput');

        // 文件夹点击事件 - 筛选文件
        document.querySelectorAll('.folder-link').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const folderId = this.getAttribute('data-folder');

                // 更新选中状态
                document.querySelectorAll('.folder-link').forEach(item => {
                    item.classList.remove('folder-active');
                });
                this.classList.add('folder-active');

                // 更新当前文件夹名称
                document.getElementById('currentFolderName').textContent = folderNames[folderId] || '全部文件';

                // 筛选并显示对应文件夹的文件
                let fileCount = 0;
                document.querySelectorAll('.file-card').forEach(card => {
                    if (folderId === 'all' || card.getAttribute('data-folder').includes(folderId)) {
                        card.style.display = 'block';
                        fileCount++;
                    } else {
                        card.style.display = 'none';
                    }
                });

                // 更新文件计数
                document.getElementById('fileCount').textContent = fileCount;
            });
        });

        // 打开详情模态框
        document.getElementById('fileList').addEventListener('click', function(e) {
            if (e.target.closest('.view-detail')) {
                const btn = e.target.closest('.view-detail');
                const fileName = btn.getAttribute('data-name');
                const fileType = btn.getAttribute('data-type');

                document.getElementById('modalTitle').textContent = `${fileName} - 详情`;
                document.getElementById('detailFileName').textContent = fileName;

                // 设置文件图标和类型
                if (fileTypeConfig[fileType]) {
                    document.getElementById('detailIcon').className = `fa ${fileTypeConfig[fileType].icon} text-6xl ${fileTypeConfig[fileType].color}`;
                    document.getElementById('detailFileType').textContent = fileTypeConfig[fileType].typeText;
                }

                openModal(detailModal, modalContent);
            }
        });

        // 关闭详情模态框
        closeDetailModal.addEventListener('click', function() {
            closeModal(detailModal, modalContent);
        });

        // 打开新建文件夹模态框
        createFolderBtn.addEventListener('click', function() {
            openModal(createFolderModal, createFolderModalContent);
        });

        // 关闭新建文件夹模态框
        closeCreateFolderModal.addEventListener('click', function() {
            closeModal(createFolderModal, createFolderModalContent);
        });

        cancelCreateFolder.addEventListener('click', function() {
            closeModal(createFolderModal, createFolderModalContent);
        });

        // 确认创建文件夹
        document.getElementById('confirmCreateFolder').addEventListener('click', function() {
            const folderName = document.getElementById('folderName').value;
            if (folderName.trim() === '') {
                showNotification('请输入文件夹名称', 'error');
                return;
            }

            showNotification(`文件夹 "${folderName}" 创建成功！`, 'success');
            closeModal(createFolderModal, createFolderModalContent);
            document.getElementById('folderName').value = '';
        });

        // 打开分享模态框
        document.getElementById('fileList').addEventListener('click', function(e) {
            if (e.target.closest('.share-file')) {
                openModal(shareModal, shareModalContent);
            }
        });

        // 关闭分享模态框
        closeShareModal.addEventListener('click', function() {
            closeModal(shareModal, shareModalContent);
        });

        cancelShare.addEventListener('click', function() {
            closeModal(shareModal, shareModalContent);
        });

        // 确认分享
        document.getElementById('confirmShare').addEventListener('click', function() {
            const email = document.getElementById('shareEmail').value;
            if (email.trim() === '') {
                showNotification('请输入接收方邮箱', 'error');
                return;
            }

            showNotification(`文件已成功分享给 ${email}！`, 'success');
            closeModal(shareModal, shareModalContent);
            document.getElementById('shareEmail').value = '';
            document.getElementById('shareMessage').value = '';
        });

        // 打开上传文件模态框
        uploadBtn.addEventListener('click', function() {
            openModal(uploadModal, uploadModalContent);
        });

        // 关闭上传文件模态框
        closeUploadModal.addEventListener('click', function() {
            closeModal(uploadModal, uploadModalContent);
        });

        cancelUpload.addEventListener('click', function() {
            closeModal(uploadModal, uploadModalContent);
        });

        // 确认上传
        document.getElementById('confirmUpload').addEventListener('click', function() {
            showNotification('文件上传已开始！', 'success');
            closeModal(uploadModal, uploadModalContent);
        });

        // 点击上传区域触发文件选择
        dropArea.addEventListener('click', function() {
            fileInput.click();
        });

        // 文件选择变化
        fileInput.addEventListener('change', function() {
            if (this.files.length > 0) {
                showNotification(`已选择 ${this.files.length} 个文件`);
            }
        });

        // 阻止拖放默认行为
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, preventDefaults, false);
        });

        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }

        // 高亮拖放区域
        ['dragenter', 'dragover'].forEach(eventName => {
            dropArea.addEventListener(eventName, highlight, false);
        });

        ['dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, unhighlight, false);
        });

        function highlight() {
            dropArea.classList.add('border-primary');
            dropArea.classList.add('bg-primary/5');
        }

        function unhighlight() {
            dropArea.classList.remove('border-primary');
            dropArea.classList.remove('bg-primary/5');
        }

        // 处理文件拖放
        dropArea.addEventListener('drop', handleDrop, false);

        function handleDrop(e) {
            const dt = e.dataTransfer;
            const files = dt.files;

            if (files.length > 0) {
                showNotification(`已拖放 ${files.length} 个文件`);
            }
        }

        // 查询按钮
        document.getElementById('searchBtn').addEventListener('click', function() {
            const searchInput = document.querySelector('input[placeholder="搜索文件名、类型或创建人..."]');
            if (searchInput.value.trim() !== '') {
                showNotification(`正在搜索: ${searchInput.value}`);
            } else {
                showNotification('请输入搜索内容', 'error');
            }
        });

        // 重置按钮
        document.getElementById('resetBtn').addEventListener('click', function() {
            document.querySelector('input[placeholder="搜索文件名、类型或创建人..."]').value = '';
        });

        // 下载按钮
        document.getElementById('fileList').addEventListener('click', function(e) {
            if (e.target.closest('.download-file')) {
                const fileName = e.target.closest('.download-file').getAttribute('data-name');
                showNotification(`正在下载: ${fileName}`);
            }
        });

        // 打开模态框函数
        function openModal(modal, content) {
            modal.style.display = 'flex';
            setTimeout(() => {
                content.classList.remove('scale-95', 'opacity-0');
                content.classList.add('scale-100', 'opacity-100');
            }, 10);
            document.body.style.overflow = 'hidden';
        }

        // 关闭模态框函数
        function closeModal(modal, content) {
            content.classList.remove('scale-100', 'opacity-100');
            content.classList.add('scale-95', 'opacity-0');
            setTimeout(() => {
                modal.style.display = 'none';
                document.body.style.overflow = '';
            }, 300);
        }

        // 点击模态框外部关闭
        window.addEventListener('click', function(event) {
            if (event.target === detailModal) {
                closeModal(detailModal, modalContent);
            }
            if (event.target === createFolderModal) {
                closeModal(createFolderModal, createFolderModalContent);
            }
            if (event.target === shareModal) {
                closeModal(shareModal, shareModalContent);
            }
            if (event.target === uploadModal) {
                closeModal(uploadModal, uploadModalContent);
            }
        });
    });
</script>
</body>
</html>