PrompterHub Logo

PrompterHub

返回首页

你是一位国际顶尖的数字杂志艺术总监和前端...

作者：虫虫
发布于：2025/7/17
3
内容创作
开发
教育

用户输入

设计风格：极简主义，附加描述：<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>智慧财务报销系统</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/JsBarcode.all.min.js"></script> <!-- Tailwind配置 --> <script> tailwind.config = { theme: { extend: { colors: { primary: '#165DFF', secondary: '#0FC6C2', accent: '#722ED1', success: '#00B42A', warning: '#FF7D00', danger: '#F53F3F', info: '#86909C', light: '#F2F3F5', dark: '#1D2129', 'primary-light': '#E8F3FF', }, fontFamily: { inter: ['Inter', 'system-ui', 'sans-serif'], }, }, } } </script> <style type="text/tailwindcss"> @layer utilities { .content-auto { content-visibility: auto; } .shadow-card { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } .transition-all-300 { transition: all 0.3s ease; } .hover-scale { transition: transform 0.2s ease; } .hover-scale:hover { transform: scale(1.02); } .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } } </style> </head> <body class="font-inter bg-gray-50 text-dark"> <!-- 侧边栏 --> <div class="fixed inset-y-0 left-0 z-50 w-64 transform transition-transform duration-300 ease-in-out bg-white shadow-lg lg:translate-x-0" id="sidebar"> <div class="flex items-center justify-between h-16 px-4 border-b"> <div class="flex items-center space-x-2"> <i class="fa fa-line-chart text-primary text-2xl"></i> <span class="text-xl font-bold text-primary">智慧财务报销系统</span> </div> <button class="lg:hidden text-gray-500 hover:text-gray-700" id="closeSidebar"> <i class="fa fa-times"></i> </button> </div> <div class="flex flex-col h-[calc(100vh-4rem)] overflow-y-auto scrollbar-hide"> <nav class="flex-1 px-4 py-6 space-y-1"> <a href="#dashboard" class="flex items-center px-3 py-2 text-sm font-medium rounded-md bg-primary-light text-primary"> <i class="fa fa-dashboard w-5 h-5 mr-3"></i> <span>控制面板</span> </a> <div class="mt-4"> <h3 class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider"> 模板管理 </h3> <a href="#template-upload" class="flex items-center px-3 py-2 mt-1 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100 hover:text-primary"> <i class="fa fa-upload w-5 h-5 mr-3"></i> <span>模板上传</span> </a> <a href="#template-list" class="flex items-center px-3 py-2 mt-1 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100 hover:text-primary"> <i class="fa fa-list w-5 h-5 mr-3"></i> <span>模板列表</span> </a> </div> <div class="mt-4"> <h3 class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider"> 报销管理 </h3> <a href="#expense-create" class="flex items-center px-3 py-2 mt-1 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100 hover:text-primary"> <i class="fa fa-plus-circle w-5 h-5 mr-3"></i> <span>新建报销</span> </a> <a href="#expense-list" class="flex items-center px-3 py-2 mt-1 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100 hover:text-primary"> <i class="fa fa-table w-5 h-5 mr-3"></i> <span>报销列表</span> </a> <a href="#expense-batch" class="flex items-center px-3 py-2 mt-1 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100 hover:text-primary"> <i class="fa fa-clone w-5 h-5 mr-3"></i> <span>批量导入</span> </a> </div> <div class="mt-4"> <h3 class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider"> 发票管理 </h3> <a href="#invoice-upload" class="flex items-center px-3 py-2 mt-1 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100 hover:text-primary"> <i class="fa fa-camera w-5 h-5 mr-3"></i> <span>发票上传</span> </a> <a href="#invoice-list" class="flex items-center px-3 py-2 mt-1 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100 hover:text-primary"> <i class="fa fa-file-text w-5 h-5 mr-3"></i> <span>发票列表</span> </a> </div> <div class="mt-4"> <h3 class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider"> 系统管理 </h3> <a href="#user-management" class="flex items-center px-3 py-2 mt-1 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100 hover:text-primary"> <i class="fa fa-users w-5 h-5 mr-3"></i> <span>用户管理</span> </a> <a href="#audit-logs" class="flex items-center px-3 py-2 mt-1 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100 hover:text-primary"> <i class="fa fa-history w-5 h-5 mr-3"></i> <span>操作日志</span> </a> <a href="#system-settings" class="flex items-center px-3 py-2 mt-1 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100 hover:text-primary"> <i class="fa fa-cog w-5 h-5 mr-3"></i> <span>系统设置</span> </a> </div> </nav> <div class="p-4 border-t"> <div class="flex items-center"> <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-10 h-10 rounded-full"> <div class="ml-3"> <p class="text-sm font-medium text-gray-700">张财务</p> <p class="text-xs text-gray-500">财务主管</p> </div> </div> </div> </div> </div> <!-- 主内容区 --> <div class="min-h-screen lg:pl-64"> <!-- 顶部导航栏 --> <header class="fixed top-0 right-0 left-0 lg:left-64 z-40 h-16 bg-white shadow-sm"> <div class="flex items-center justify-between h-full px-4 lg:px-6"> <div class="flex items-center"> <button class="lg:hidden text-gray-500 hover:text-gray-700" id="openSidebar"> <i class="fa fa-bars"></i> </button> <div class="relative ml-4 lg:ml-0"> <span class="absolute inset-y-0 left-0 flex items-center pl-3"> <i class="fa fa-search text-gray-400"></i> </span> <input type="text" placeholder="搜索..." class="block w-full pl-10 pr-3 py-2 text-sm bg-gray-100 border-transparent rounded-md focus:bg-white focus:border-gray-300 focus:ring-0"> </div> </div> <div class="flex items-center space-x-4"> <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full"> <i class="fa fa-bell"></i> </button> <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full"> <i class="fa fa-question-circle"></i> </button> <div class="relative"> <button class="flex items-center space-x-2 focus:outline-none" id="userMenuButton"> <img src="https://picsum.photos/id/1005/32/32" alt="用户头像" class="w-8 h-8 rounded-full"> <span class="hidden md:block text-sm font-medium">张财务</span> <i class="fa fa-angle-down text-gray-400"></i> </button> <div class="hidden absolute right-0 mt-2 w-48 py-2 bg-white rounded-md shadow-lg z-50" id="userMenu"> <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> <i class="fa fa-user mr-2"></i>个人信息 </a> <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"> <i class="fa fa-cog mr-2"></i>账户设置 </a> <div class="border-t border-gray-100 my-1"></div> <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100"> <i class="fa fa-sign-out mr-2"></i>退出登录 </a> </div> </div> </div> </div> </header> <!-- 页面内容 --> <main class="pt-16 pb-6 px-4 lg:px-6"> <!-- 控制面板 --> <section id="dashboard" class="py-6"> <div class="mb-6"> <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-900">控制面板</h1> <p class="mt-1 text-gray-600">欢迎使用智慧财务报销系统，今天是 <span id="currentDate"></span></p> </div> <!-- 统计卡片 --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> <div class="bg-white rounded-xl shadow-card p-6 hover-scale"> <div class="flex items-center justify-between"> <div> <p class="text-sm font-medium text-gray-500">今日报销</p> <h3 class="text-2xl font-bold mt-1">¥12,850.00</h3> <p class="text-xs mt-2 text-success"> <i class="fa fa-arrow-up"></i> 12.5% <span class="text-gray-500">较昨日</span> </p> </div> <div class="p-3 bg-primary-light rounded-lg"> <i class="fa fa-credit-card text-primary text-xl"></i> </div> </div> </div> <div class="bg-white rounded-xl shadow-card p-6 hover-scale"> <div class="flex items-center justify-between"> <div> <p class="text-sm font-medium text-gray-500">待审批</p> <h3 class="text-2xl font-bold mt-1">24</h3> <p class="text-xs mt-2 text-danger"> <i class="fa fa-arrow-up"></i> 8.3% <span class="text-gray-500">较昨日</span> </p> </div> <div class="p-3 bg-warning/10 rounded-lg"> <i class="fa fa-clock-o text-warning text-xl"></i> </div> </div> </div> <div class="bg-white rounded-xl shadow-card p-6 hover-scale"> <div class="flex items-center justify-between"> <div> <p class="text-sm font-medium text-gray-500">本月报销总额</p> <h3 class="text-2xl font-bold mt-1">¥186,245.00</h3> <p class="text-xs mt-2 text-success"> <i class="fa fa-arrow-up"></i> 5.2% <span class="text-gray-500">较上月</span> </p> </div> <div class="p-3 bg-success/10 rounded-lg"> <i class="fa fa-line-chart text-success text-xl"></i> </div> </div> </div> <div class="bg-white rounded-xl shadow-card p-6 hover-scale"> <div class="flex items-center justify-between"> <div> <p class="text-sm font-medium text-gray-500">已完成报销</p> <h3 class="text-2xl font-bold mt-1">187</h3> <p class="text-xs mt-2 text-success"> <i class="fa fa-arrow-up"></i> 15.3% <span class="text-gray-500">较上月</span> </p> </div> <div class="p-3 bg-secondary/10 rounded-lg"> <i class="fa fa-check-circle text-secondary text-xl"></i> </div> </div> </div> </div> <!-- 图表区域 --> <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> <div class="bg-white rounded-xl shadow-card p-6 lg:col-span-2"> <div class="flex items-center justify-between mb-6"> <h3 class="font-semibold text-lg">报销趋势</h3> <div class="flex space-x-2"> <button class="px-3 py-1 text-xs bg-primary-light text-primary rounded-md">周</button> <button class="px-3 py-1 text-xs bg-gray-100 text-gray-500 rounded-md">月</button> <button class="px-3 py-1 text-xs bg-gray-100 text-gray-500 rounded-md">年</button> </div> </div> <div class="h-80"> <canvas id="expenseTrendChart"></canvas> </div> </div> <div class="bg-white rounded-xl shadow-card p-6"> <div class="flex items-center justify-between mb-6"> <h3 class="font-semibold text-lg">报销类型分布</h3> <button class="text-gray-400 hover:text-gray-600"> <i class="fa fa-ellipsis-v"></i> </button> </div> <div class="h-80"> <canvas id="expenseTypeChart"></canvas> </div> </div> </div> <!-- 最近报销和待办事项 --> <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div class="bg-white rounded-xl shadow-card p-6 lg:col-span-2"> <div class="flex items-center justify-between mb-6"> <h3 class="font-semibold text-lg">最近报销记录</h3> <a href="#expense-list" class="text-primary text-sm hover:underline">查看全部</a> </div> <div class="overflow-x-auto"> <table class="min-w-full"> <thead> <tr class="border-b"> <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">报销单号</th> <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">申请人</th> <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th> <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额</th> <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th> <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th> </tr> </thead> <tbody> <tr class="border-b hover:bg-gray-50"> <td class="px-4 py-3 whitespace-nowrap text-sm">BX20250715001</td> <td class="px-4 py-3 whitespace-nowrap text-sm">李小明</td> <td class="px-4 py-3 whitespace-nowrap text-sm">差旅费</td> <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">¥3,250.00</td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-07-15</td> <td class="px-4 py-3 whitespace-nowrap"> <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">已完成</span> </td> </tr> <tr class="border-b hover:bg-gray-50"> <td class="px-4 py-3 whitespace-nowrap text-sm">BX20250716002</td> <td class="px-4 py-3 whitespace-nowrap text-sm">王芳</td> <td class="px-4 py-3 whitespace-nowrap text-sm">办公用品</td> <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">¥1,860.00</td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-07-16</td> <td class="px-4 py-3 whitespace-nowrap"> <span class="px-2 py-1 text-xs font-medium bg-warning/10 text-warning rounded-full">审批中</span> </td> </tr> <tr class="border-b hover:bg-gray-50"> <td class="px-4 py-3 whitespace-nowrap text-sm">BX20250716003</td> <td class="px-4 py-3 whitespace-nowrap text-sm">张伟</td> <td class="px-4 py-3 whitespace-nowrap text-sm">会议费</td> <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">¥5,620.00</td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-07-16</td> <td class="px-4 py-3 whitespace-nowrap"> <span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">待修改</span> </td> </tr> <tr class="border-b hover:bg-gray-50"> <td class="px-4 py-3 whitespace-nowrap text-sm">BX20250717004</td> <td class="px-4 py-3 whitespace-nowrap text-sm">赵强</td> <td class="px-4 py-3 whitespace-nowrap text-sm">差旅费</td> <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">¥2,180.00</td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-07-17</td> <td class="px-4 py-3 whitespace-nowrap"> <span class="px-2 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">已提交</span> </td> </tr> <tr class="hover:bg-gray-50"> <td class="px-4 py-3 whitespace-nowrap text-sm">BX20250717005</td> <td class="px-4 py-3 whitespace-nowrap text-sm">陈丽</td> <td class="px-4 py-3 whitespace-nowrap text-sm">业务招待费</td> <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">¥4,980.00</td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-07-17</td> <td class="px-4 py-3 whitespace-nowrap"> <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">已完成</span> </td> </tr> </tbody> </table> </div> </div> <div class="bg-white rounded-xl shadow-card p-6"> <div class="flex items-center justify-between mb-6"> <h3 class="font-semibold text-lg">待办事项</h3> <button class="text-primary text-sm hover:underline">添加</button> </div> <div class="space-y-4"> <div class="flex items-start"> <div class="flex items-center h-5"> <input id="todo-1" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"> </div> <div class="ml-3 text-sm"> <label for="todo-1" class="font-medium text-gray-700">审核差旅费报销单 BX20250716002</label> <p class="text-gray-500">王芳 · 2小时前</p> </div> </div> <div class="flex items-start"> <div class="flex items-center h-5"> <input id="todo-2" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"> </div> <div class="ml-3 text-sm"> <label for="todo-2" class="font-medium text-gray-700">处理待修改报销单 BX20250716003</label> <p class="text-gray-500">张伟 · 3小时前</p> </div> </div> <div class="flex items-start"> <div class="flex items-center h-5"> <input id="todo-3" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"> </div> <div class="ml-3 text-sm"> <label for="todo-3" class="font-medium text-gray-700">核对6月部门预算</label> <p class="text-gray-500">今日截止</p> </div> </div> <div class="flex items-start"> <div class="flex items-center h-5"> <input id="todo-4" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" checked> </div> <div class="ml-3 text-sm"> <label for="todo-4" class="font-medium text-gray-500 line-through">更新报销系统版本</label> <p class="text-gray-500">已完成 · 昨天</p> </div> </div> <div class="flex items-start"> <div class="flex items-center h-5"> <input id="todo-5" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"> </div> <div class="ml-3 text-sm"> <label for="todo-5" class="font-medium text-gray-700">提交季度财务报表</label> <p class="text-gray-500">7月20日前</p> </div> </div> </div> </div> </div> </section> <!-- 模板上传页面 --> <section id="template-upload" class="py-6 hidden"> <div class="mb-6"> <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-900">Excel模板上传</h1> <p class="mt-1 text-gray-600">上传Excel报销模板，系统将自动识别表格结构</p> </div> <div class="bg-white rounded-xl shadow-card p-6 mb-8"> <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-primary transition-all-300" id="dropZone"> <i class="fa fa-cloud-upload text-gray-400 text-4xl mb-4"></i> <h3 class="text-lg font-medium text-gray-700 mb-2">拖放Excel文件到此处，或点击选择文件</h3> <p class="text-sm text-gray-500 mb-6">支持 .xlsx, .xls 格式文件</p> <input type="file" id="templateFile" accept=".xlsx,.xls" class="hidden"> <button class="px-6 py-2 bg-primary text-white rounded-md hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" onclick="document.getElementById('templateFile').click()"> 选择文件 </button> </div> </div> <div id="templatePreview" class="hidden"> <div class="bg-white rounded-xl shadow-card p-6 mb-8"> <h3 class="font-semibold text-lg mb-4">模板预览</h3> <div class="mb-6"> <div class="flex items-center justify-between mb-3"> <h4 class="font-medium">员工差旅报销单.xlsx</h4> <div class="flex space-x-2"> <button class="text-primary hover:text-primary/80"> <i class="fa fa-download mr-1"></i> 下载 </button> <button class="text-gray-500 hover:text-gray-700"> <i class="fa fa-trash mr-1"></i> 删除 </button> </div> </div> <div class="border rounded-lg overflow-hidden"> <img src="https://picsum.photos/id/180/800/400" alt="Excel模板预览" class="w-full h-auto"> </div> </div> <h3 class="font-semibold text-lg mb-4">模板信息</h3> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <div> <label class="block text-sm font-medium text-gray-700 mb-1">模板名称</label> <input type="text" value="员工差旅报销单" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">模板类型</label> <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <option>差旅费</option> <option>办公用品</option> <option>业务招待费</option> <option>会议费</option> <option>其他</option> </select> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">适用部门</label> <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" multiple> <option selected>财务部</option> <option selected>人力资源部</option> <option>市场部</option> <option>技术部</option> <option>销售部</option> </select> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">创建人</label> <input type="text" value="张财务" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" readonly> </div> </div> <h3 class="font-semibold text-lg mb-4">表格结构识别</h3> <div class="overflow-x-auto mb-6"> <table class="min-w-full"> <thead> <tr class="border-b"> <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">字段名称</th> <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数据类型</th> <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">是否必填</th> <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th> </tr> </thead> <tbody> <tr class="border-b hover:bg-gray-50"> <td class="px-4 py-3 whitespace-nowrap text-sm">员工姓名</td> <td class="px-4 py-3 whitespace-nowrap text-sm">文本</td> <td class="px-4 py-3 whitespace-nowrap text-sm"> <span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">是</span> </td> <td class="px-4 py-3 whitespace-nowrap text-sm"> <button class="text-primary hover:text-primary/80">编辑</button> </td> </tr> <tr class="border-b hover:bg-gray-50"> <td class="px-4 py-3 whitespace-nowrap text-sm">部门</td> <td class="px-4 py-3 whitespace-nowrap text-sm">文本</td> <td class="px-4 py-3 whitespace-nowrap text-sm"> <span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">是</span> </td> <td class="px-4 py-3 whitespace-nowrap text-sm"> <button class="text-primary hover:text-primary/80">编辑</button> </td> </tr> <tr class="border-b hover:bg-gray-50"> <td class="px-4 py-3 whitespace-nowrap text-sm">职位</td> <td class="px-4 py-3 whitespace-nowrap text-sm">文本</td> <td class="px-4 py-3 whitespace-nowrap text-sm"> <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">否</span> </td> <td class="px-4 py-3 whitespace-nowrap text-sm"> <button class="text-primary hover:text-primary/80">编辑</button> </td> </tr> <tr class="border-b hover:bg-gray-50"> <td class="px-4 py-3 whitespace-nowrap text-sm">出差日期</td> <td class="px-4 py-3 whitespace-nowrap text-sm">日期</td> <td class="px-4 py-3 whitespace-nowrap text-sm"> <span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">是</span> </td> <td class="px-4 py-3 whitespace-nowrap text-sm"> <button class="text-primary hover:text-primary/80">编辑</button> </td> </tr> <tr class="border-b hover:bg-gray-50"> <td class="px-4 py-3 whitespace-nowrap text-sm">返回日期</td> <td class="px-4 py-3 whitespace-nowrap text-sm">日期</td> <td class="px-4 py-3 whitespace-nowrap text-sm"> <span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">是</span> </td> <td class="px-4 py-3 whitespace-nowrap text-sm"> <button class="text-primary hover:text-primary/80">编辑</button> </td> </tr> <tr class="border-b hover:bg-gray-50"> <td class="px-4 py-3 whitespace-nowrap text-sm">出差地点</td> <td class="px-4 py-3 whitespace-nowrap text-sm">文本</td> <td class="px-4 py-3 whitespace-nowrap text-sm"> <span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">是</span> </td> <td class="px-4 py-3 whitespace-nowrap text-sm"> <button class="text-primary hover:text-primary/80">编辑</button> </td> </tr> <tr class="border-b hover:bg-gray-50"> <td class="px-4 py-3 whitespace-nowrap text-sm">交通工具</td> <td class="px-4 py-3 whitespace-nowrap text-sm">文本</td> <td class="px-4 py-3 whitespace-nowrap text-sm"> <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">否</span> </td> <td class="px-4 py-3 whitespace-nowrap text-sm"> <button class="text-primary hover:text-primary/80">编辑</button> </td> </tr> <tr class="hover:bg-gray-50"> <td class="px-4 py-3 whitespace-nowrap text-sm">住宿费</td> <td class="px-4 py-3 whitespace-nowrap text-sm">数字</td> <td class="px-4 py-3 whitespace-nowrap text-sm"> <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">否</span> </td> <td class="px-4 py-3 whitespace-nowrap text-sm"> <button class="text-primary hover:text-primary/80">编辑</button> </td> </tr> </tbody> </table> </div> <div class="flex justify-end space-x-3"> <button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"> 取消 </button> <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90"> 保存模板 </button> </div> </div> </div> </section> <!-- 发票上传页面 --> <section id="invoice-upload" class="py-6 hidden"> <div class="mb-6"> <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-900">发票上传</h1> <p class="mt-1 text-gray-600">上传发票照片或PDF，系统将自动识别发票信息</p> </div> <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div class="bg-white rounded-xl shadow-card p-6 lg:col-span-2"> <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-primary transition-all-300" id="invoiceDropZone"> <i class="fa fa-file-image-o text-gray-400 text-4xl mb-4"></i> <h3 class="text-lg font-medium text-gray-700 mb-2">拖放发票文件到此处，或点击选择文件</h3> <p class="text-sm text-gray-500 mb-6">支持 JPG, PNG, PDF 格式文件</p> <input type="file" id="invoiceFile" accept="image/*,.pdf" class="hidden" multiple> <button class="px-6 py-2 bg-primary text-white rounded-md hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" onclick="document.getElementById('invoiceFile').click()"> 选择文件 </button> </div> <div id="invoicePreview" class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4 hidden"> <div class="border rounded-lg overflow-hidden"> <img src="https://picsum.photos/id/1/300/400" alt="发票预览" class="w-full h-auto"> <div class="p-3 bg-gray-50"> <div class="flex items-center justify-between"> <span class="text-sm font-medium">住宿费发票.jpg</span> <button class="text-gray-500 hover:text-gray-700"> <i class="fa fa-trash"></i> </button> </div> </div> </div> <div class="border rounded-lg overflow-hidden"> <img src="https://picsum.photos/id/2/300/400" alt="发票预览" class="w-full h-auto"> <div class="p-3 bg-gray-50"> <div class="flex items-center justify-between"> <span class="text-sm font-medium">交通费发票.jpg</span> <button class="text-gray-500 hover:text-gray-700"> <i class="fa fa-trash"></i> </button> </div> </div> </div> </div> </div> <div class="bg-white rounded-xl shadow-card p-6"> <h3 class="font-semibold text-lg mb-4">发票信息</h3> <div class="space-y-4"> <div> <label class="block text-sm font-medium text-gray-700 mb-1">发票类型</label> <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <option>增值税专用发票</option> <option selected>增值税普通发票</option> <option>通用机打发票</option> <option>其他</option> </select> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">发票代码</label> <input type="text" value="1100251320" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">发票号码</label> <input type="text" value="01234567" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">开票日期</label> <input type="date" value="2025-07-15" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">购买方名称</label> <input type="text" value="北京智慧科技有限公司" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">金额</label> <input type="text" value="3,250.00" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">税额</label> <input type="text" value="390.00" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">价税合计</label> <input type="text" value="3,640.00" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">发票状态</label> <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <option selected>正常</option> <option>作废</option> <option>红冲</option> </select> </div> <div class="flex justify-end space-x-3 pt-4"> <button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"> 取消 </button> <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90"> 保存发票 </button> </div> </div> </div> </div> </section> <!-- 新建报销页面 --> <section id="expense-create" class="py-6 hidden"> <div class="mb-6"> <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-900">新建报销</h1> <p class="mt-1 text-gray-600">根据已有的模板创建报销单</p> </div> <div class="bg-white rounded-xl shadow-card p-6 mb-8"> <h3 class="font-semibold text-lg mb-4">选择模板</h3> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div class="border rounded-lg overflow-hidden hover-scale cursor-pointer"> <img src="https://picsum.photos/id/180/400/200" alt="员工差旅报销单" class="w-full h-40 object-cover"> <div class="p-4"> <h4 class="font-medium text-gray-900">员工差旅报销单</h4> <p class="text-sm text-gray-500 mt-1">适用于员工出差费用报销</p> <div class="mt-3 flex items-center justify-between"> <span class="text-xs text-gray-500">创建于 2025-06-15</span> <button class="px-3 py-1 text-xs bg-primary text-white rounded-md"> 选择 </button> </div> </div> </div> <div class="border rounded-lg overflow-hidden hover-scale cursor-pointer"> <img src="https://picsum.photos/id/181/400/200" alt="办公用品申请表" class="w-full h-40 object-cover"> <div class="p-4"> <h4 class="font-medium text-gray-900">办公用品申请表</h4> <p class="text-sm text-gray-500 mt-1">适用于申请购买办公用品</p> <div class="mt-3 flex items-center justify-between"> <span class="text-xs text-gray-500">创建于 2025-06-20</span> <button class="px-3 py-1 text-xs bg-primary text-white rounded-md"> 选择 </button> </div> </div> </div> <div class="border rounded-lg overflow-hidden hover-scale cursor-pointer"> <img src="https://picsum.photos/id/182/400/200" alt="业务招待费申请表" class="w-full h-40 object-cover"> <div class="p-4"> <h4 class="font-medium text-gray-900">业务招待费申请表</h4> <p class="text-sm text-gray-500 mt-1">适用于业务招待费用报销</p> <div class="mt-3 flex items-center justify-between"> <span class="text-xs text-gray-500">创建于 2025-07-05</span> <button class="px-3 py-1 text-xs bg-primary text-white rounded-md"> 选择 </button> </div> </div> </div> </div> </div> <div id="expenseForm" class="hidden"> <div class="bg-white rounded-xl shadow-card p-6 mb-8"> <h3 class="font-semibold text-lg mb-4">员工差旅报销单</h3> <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> <div> <label class="block text-sm font-medium text-gray-700 mb-1">员工姓名</label> <input type="text" value="李小明" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">部门</label> <input type="text" value="技术部" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">职位</label> <input type="text" value="高级工程师" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">报销日期</label> <input type="date" value="2025-07-17" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">出差日期</label> <input type="date" value="2025-07-10" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">返回日期</label> <input type="date" value="2025-07-12" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">出差地点</label> <input type="text" value="上海" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">交通工具</label> <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <option>飞机</option> <option selected>高铁</option> <option>动车</option> <option>汽车</option> <option>其他</option> </select> </div> </div> <h3 class="font-semibold text-lg mb-4">费用明细</h3> <div class="overflow-x-auto mb-6"> <table class="min-w-full"> <thead> <tr class="border-b"> <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">费用类型</th> <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额</th> <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th> <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">发票号</th> <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">备注</th> <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th> </tr> </thead> <tbody> <tr class="border-b hover:bg-gray-50"> <td class="px-4 py-3 whitespace-nowrap"> <select class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <option selected>交通费</option> <option>住宿费</option> <option>餐饮费</option> <option>其他</option> </select> </td> <td class="px-4 py-3 whitespace-nowrap"> <input type="text" value="850.00" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </td> <td class="px-4 py-3 whitespace-nowrap"> <input type="date" value="2025-07-10" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </td> <td class="px-4 py-3 whitespace-nowrap"> <input type="text" value="01234567" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </td> <td class="px-4 py-3 whitespace-nowrap"> <input type="text" value="高铁二等座" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </td> <td class="px-4 py-3 whitespace-nowrap"> <button class="text-gray-500 hover:text-gray-700"> <i class="fa fa-trash"></i> </button> </td> </tr> <tr class="border-b hover:bg-gray-50"> <td class="px-4 py-3 whitespace-nowrap"> <select class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <option>交通费</option> <option selected>住宿费</option> <option>餐饮费</option> <option>其他</option> </select> </td> <td class="px-4 py-3 whitespace-nowrap"> <input type="text" value="1,860.00" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </td> <td class="px-4 py-3 whitespace-nowrap"> <input type="date" value="2025-07-10" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </td> <td class="px-4 py-3 whitespace-nowrap"> <input type="text" value="01234568" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </td> <td class="px-4 py-3 whitespace-nowrap"> <input type="text" value="两晚住宿费" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </td> <td class="px-4 py-3 whitespace-nowrap"> <button class="text-gray-500 hover:text-gray-700"> <i class="fa fa-trash"></i> </button> </td> </tr> <tr class="hover:bg-gray-50"> <td class="px-4 py-3 whitespace-nowrap"> <select class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <option>交通费</option> <option>住宿费</option> <option selected>餐饮费</option> <option>其他</option> </select> </td> <td class="px-4 py-3 whitespace-nowrap"> <input type="text" value="540.00" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </td> <td class="px-4 py-3 whitespace-nowrap"> <input type="date" value="2025-07-11" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </td> <td class="px-4 py-3 whitespace-nowrap"> <input type="text" value="01234569" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </td> <td class="px-4 py-3 whitespace-nowrap"> <input type="text" value="商务宴请" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </td> <td class="px-4 py-3 whitespace-nowrap"> <button class="text-gray-500 hover:text-gray-700"> <i class="fa fa-trash"></i> </button> </td> </tr> </tbody> </table> </div> <div class="flex justify-end mb-6"> <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90"> <i class="fa fa-plus mr-1"></i> 添加费用 </button> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> <div> <label class="block text-sm font-medium text-gray-700 mb-1">报销总额</label> <input type="text" value="3,250.00" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" readonly> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">报销原因</label> <textarea rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">参加上海技术研讨会</textarea> </div> </div> <h3 class="font-semibold text-lg mb-4">上传发票</h3> <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-primary transition-all-300 mb-6"> <i class="fa fa-paperclip text-gray-400 text-2xl mb-2"></i> <p class="text-sm text-gray-500">点击上传相关发票或附件</p> <input type="file" accept="image/*,.pdf" class="hidden" id="expenseInvoiceFile"> <button class="mt-2 px-4 py-1.5 bg-primary text-white rounded-md hover:bg-primary/90 text-sm" onclick="document.getElementById('expenseInvoiceFile').click()"> 选择文件 </button> </div> <div class="flex justify-end space-x-3"> <button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"> 保存草稿 </button> <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90"> 提交审批 </button> </div> </div> </div> </section> </main> </div> <!-- 脚本 --> <script> // 设置当前日期 document.getElementById('currentDate').textContent = new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' }); // 侧边栏切换 document.getElementById('openSidebar').addEventListener('click', function() { document.getElementById('sidebar').classList.remove('transform', '-translate-x-full'); }); document.getElementById('closeSidebar').addEventListener('click', function() { document.getElementById('sidebar').classList.add('transform', '-translate-x-full'); }); // 用户菜单切换 document.getElementById('userMenuButton').addEventListener('click', function() { document.getElementById('userMenu').classList.toggle('hidden'); }); // 点击其他区域关闭用户菜单 document.addEventListener('click', function(event) { const userMenuButton = document.getElementById('userMenuButton'); const userMenu = document.getElementById('userMenu'); if (!userMenuButton.contains(event.target) && !userMenu.contains(event.target)) { userMenu.classList.add('hidden'); } }); // 页面切换 document.querySelectorAll('#sidebar a').forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); // 获取目标页面ID const targetId = this.getAttribute('href').substring(1); // 隐藏所有页面 document.querySelectorAll('main > section').forEach(section => { section.classList.add('hidden'); }); // 显示目标页面 document.getElementById(targetId).classList.remove('hidden'); // 移动端关闭侧边栏 if (window.innerWidth < 1024) { document.getElementById('sidebar').classList.add('transform', '-translate-x-full'); } }); }); // 文件上传功能 document.getElementById('templateFile').addEventListener('change', function() { if (this.files.length > 0) { document.getElementById('templatePreview').classList.remove('hidden'); } }); document.getElementById('invoiceFile').addEventListener('change', function() { if (this.files.length > 0) { document.getElementById('invoicePreview').classList.remove('hidden'); } }); document.getElementById('expenseInvoiceFile').addEventListener('change', function() { if (this.files.length > 0) { alert('文件已上传'); } }); // 选择模板后显示表单 document.querySelectorAll('#expense-create .grid button').forEach(button => { button.addEventListener('click', function() { document.getElementById('expenseForm').classList.remove('hidden'); }); }); // 图表初始化 window.addEventListener('load', function() { // 报销趋势图表 const trendCtx = document.getElementById('expenseTrendChart').getContext('2d'); new Chart(trendCtx, { type: 'line', data: { labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], datasets: [{ label: '报销金额', data: [8500, 12400, 9800, 15600, 11200, 7800, 12850], borderColor: '#165DFF', backgroundColor: 'rgba(22, 93, 255, 0.1)', fill: true, tension: 0.4 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { callback: function(value) { return '¥' + value.toLocaleString(); } } } } } }); // 报销类型分布图表 const typeCtx = document.getElementById('expenseTypeChart').getContext('2d'); new Chart(typeCtx, { type: 'doughnut', data: { labels: ['差旅费', '办公用品', '业务招待费', '会议费', '其他'], datasets: [{ data: [45, 20, 15, 10, 10], backgroundColor: [ '#165DFF', '#0FC6C2', '#722ED1', '#FF7D00', '#86909C' ], borderWidth: 0 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' } }, cutout: '70%' } }); }); </script> </body> </html>

提示词

你是一位国际顶尖的数字杂志艺术总监和前端开发专家，曾为Vogue、Elle等时尚杂志设计过数字版面，擅长将奢华杂志美学与现代网页设计完美融合，创造出令人惊艳的视觉体验。

设计高级时尚杂志风格的知识卡片，将日常信息以精致奢华的杂志编排呈现，让用户感受到如同翻阅高端杂志般的视觉享受。

**可选设计风格：**

极简主义风格：采用极简主义设计理念，追求"少即是多"的美学原则。使用大量留白创造呼吸空间，配色限制在2-3种中性色，主要为纯白背景配以深灰或黑色文字。排版应精确到像素级别，使用严格的网格系统和黄金比例。字体选择无衬线字体如Helvetica或Noto Sans，通过字重变化创造层次。装饰元素几乎为零，仅使用极细的分隔线和微妙阴影。整体设计应呈现克制、优雅且永恒的美学，让内容本身成为焦点。参考Dieter Rams的设计原则和无印良品的产品美学，添加微妙的悬停效果增强交互体验。

**每种风格都应包含以下元素，但视觉表现各不相同：**

* 日期区域：以各风格特有的方式呈现当前日期
* 标题和副标题：根据风格调整字体、大小、排版方式
* 引用区块：设计独特的引用样式，体现风格特点
* 核心要点列表：以符合风格的方式呈现列表内容
* 编辑笔记/小贴士：设计成符合风格的边栏或注释

**技术规范：**

* 使用HTML5、Font Awesome、Tailwind CSS和必要的JavaScript
* Font Awesome: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css
* Tailwind CSS: https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css
* 中文字体: https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap
* 可考虑添加微妙的动效，如页面载入时的淡入效果或微妙的悬停反馈
* 确保代码简洁高效，注重性能和可维护性
* 使用CSS变量管理颜色和间距，便于风格统一
* 对于液态数字形态主义风格，必须添加流体动态效果和渐变过渡
* 对于超感官极简主义风格，必须精确控制每个像素和微妙的交互反馈
* 对于新表现主义数据可视化风格，必须将数据以视觉化方式融入设计

**输出要求：**

* 提供一个完整的HTML文件，包含所有设计风格的卡片
* 确保风格共享相同的内容，但视觉表现完全不同
* 代码应当优雅且符合最佳实践，CSS应体现出对细节的极致追求
* 设计的宽度为400px，高度不超过1280px
* 对主题内容进行抽象提炼，只显示列点或最核心句引用，让人阅读有收获感
* 永远用中文输出，装饰元素可用法语、英语等其他语言显得有逼格

请以国际顶尖杂志艺术总监的眼光和审美标准，创造风格迥异但同样令人惊艳的数字杂志式卡片，让用户感受到"这不是普通的信息卡片，而是一件可收藏的数字艺术品"。

待处理内容：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智慧财务报销系统</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/JsBarcode.all.min.js"></script>
  
  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#0FC6C2',
            accent: '#722ED1',
            success: '#00B42A',
            warning: '#FF7D00',
            danger: '#F53F3F',
            info: '#86909C',
            light: '#F2F3F5',
            dark: '#1D2129',
            'primary-light': '#E8F3FF',
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .shadow-card {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      }
      .transition-all-300 {
        transition: all 0.3s ease;
      }
      .hover-scale {
        transition: transform 0.2s ease;
      }
      .hover-scale:hover {
        transform: scale(1.02);
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
    }
  </style>
</head>

<body class="font-inter bg-gray-50 text-dark">
  <!-- 侧边栏 -->
  <div class="fixed inset-y-0 left-0 z-50 w-64 transform transition-transform duration-300 ease-in-out bg-white shadow-lg lg:translate-x-0" id="sidebar">
    <div class="flex items-center justify-between h-16 px-4 border-b">
      <div class="flex items-center space-x-2">
        <i class="fa fa-line-chart text-primary text-2xl"></i>
        <span class="text-xl font-bold text-primary">智慧财务报销系统</span>
      </div>
      <button class="lg:hidden text-gray-500 hover:text-gray-700" id="closeSidebar">
        <i class="fa fa-times"></i>
      </button>
    </div>
    
    <div class="flex flex-col h-[calc(100vh-4rem)] overflow-y-auto scrollbar-hide">
      <nav class="flex-1 px-4 py-6 space-y-1">
        <a href="#dashboard" class="flex items-center px-3 py-2 text-sm font-medium rounded-md bg-primary-light text-primary">
          <i class="fa fa-dashboard w-5 h-5 mr-3"></i>
          <span>控制面板</span>
        </a>
        
        <div class="mt-4">
          <h3 class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">
            模板管理
          </h3>
          <a href="#template-upload" class="flex items-center px-3 py-2 mt-1 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100 hover:text-primary">
            <i class="fa fa-upload w-5 h-5 mr-3"></i>
            <span>模板上传</span>
          </a>
          <a href="#template-list" class="flex items-center px-3 py-2 mt-1 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100 hover:text-primary">
            <i class="fa fa-list w-5 h-5 mr-3"></i>
            <span>模板列表</span>
          </a>
        </div>
        
        <div class="mt-4">
          <h3 class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">
            报销管理
          </h3>
          <a href="#expense-create" class="flex items-center px-3 py-2 mt-1 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100 hover:text-primary">
            <i class="fa fa-plus-circle w-5 h-5 mr-3"></i>
            <span>新建报销</span>
          </a>
          <a href="#expense-list" class="flex items-center px-3 py-2 mt-1 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100 hover:text-primary">
            <i class="fa fa-table w-5 h-5 mr-3"></i>
            <span>报销列表</span>
          </a>
          <a href="#expense-batch" class="flex items-center px-3 py-2 mt-1 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100 hover:text-primary">
            <i class="fa fa-clone w-5 h-5 mr-3"></i>
            <span>批量导入</span>
          </a>
        </div>
        
        <div class="mt-4">
          <h3 class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">
            发票管理
          </h3>
          <a href="#invoice-upload" class="flex items-center px-3 py-2 mt-1 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100 hover:text-primary">
            <i class="fa fa-camera w-5 h-5 mr-3"></i>
            <span>发票上传</span>
          </a>
          <a href="#invoice-list" class="flex items-center px-3 py-2 mt-1 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100 hover:text-primary">
            <i class="fa fa-file-text w-5 h-5 mr-3"></i>
            <span>发票列表</span>
          </a>
        </div>
        
        <div class="mt-4">
          <h3 class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">
            系统管理
          </h3>
          <a href="#user-management" class="flex items-center px-3 py-2 mt-1 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100 hover:text-primary">
            <i class="fa fa-users w-5 h-5 mr-3"></i>
            <span>用户管理</span>
          </a>
          <a href="#audit-logs" class="flex items-center px-3 py-2 mt-1 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100 hover:text-primary">
            <i class="fa fa-history w-5 h-5 mr-3"></i>
            <span>操作日志</span>
          </a>
          <a href="#system-settings" class="flex items-center px-3 py-2 mt-1 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-100 hover:text-primary">
            <i class="fa fa-cog w-5 h-5 mr-3"></i>
            <span>系统设置</span>
          </a>
        </div>
      </nav>
      
      <div class="p-4 border-t">
        <div class="flex items-center">
          <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-10 h-10 rounded-full">
          <div class="ml-3">
            <p class="text-sm font-medium text-gray-700">张财务</p>
            <p class="text-xs text-gray-500">财务主管</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 主内容区 -->
  <div class="min-h-screen lg:pl-64">
    <!-- 顶部导航栏 -->
    <header class="fixed top-0 right-0 left-0 lg:left-64 z-40 h-16 bg-white shadow-sm">
      <div class="flex items-center justify-between h-full px-4 lg:px-6">
        <div class="flex items-center">
          <button class="lg:hidden text-gray-500 hover:text-gray-700" id="openSidebar">
            <i class="fa fa-bars"></i>
          </button>
          <div class="relative ml-4 lg:ml-0">
            <span class="absolute inset-y-0 left-0 flex items-center pl-3">
              <i class="fa fa-search text-gray-400"></i>
            </span>
            <input type="text" placeholder="搜索..." class="block w-full pl-10 pr-3 py-2 text-sm bg-gray-100 border-transparent rounded-md focus:bg-white focus:border-gray-300 focus:ring-0">
          </div>
        </div>
        
        <div class="flex items-center space-x-4">
          <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full">
            <i class="fa fa-bell"></i>
          </button>
          <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full">
            <i class="fa fa-question-circle"></i>
          </button>
          <div class="relative">
            <button class="flex items-center space-x-2 focus:outline-none" id="userMenuButton">
              <img src="https://picsum.photos/id/1005/32/32" alt="用户头像" class="w-8 h-8 rounded-full">
              <span class="hidden md:block text-sm font-medium">张财务</span>
              <i class="fa fa-angle-down text-gray-400"></i>
            </button>
            
            <div class="hidden absolute right-0 mt-2 w-48 py-2 bg-white rounded-md shadow-lg z-50" id="userMenu">
              <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                <i class="fa fa-user mr-2"></i>个人信息
              </a>
              <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                <i class="fa fa-cog mr-2"></i>账户设置
              </a>
              <div class="border-t border-gray-100 my-1"></div>
              <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">
                <i class="fa fa-sign-out mr-2"></i>退出登录
              </a>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- 页面内容 -->
    <main class="pt-16 pb-6 px-4 lg:px-6">
      <!-- 控制面板 -->
      <section id="dashboard" class="py-6">
        <div class="mb-6">
          <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-900">控制面板</h1>
          <p class="mt-1 text-gray-600">欢迎使用智慧财务报销系统，今天是 <span id="currentDate"></span></p>
        </div>
        
        <!-- 统计卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          <div class="bg-white rounded-xl shadow-card p-6 hover-scale">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-sm font-medium text-gray-500">今日报销</p>
                <h3 class="text-2xl font-bold mt-1">¥12,850.00</h3>
                <p class="text-xs mt-2 text-success">
                  <i class="fa fa-arrow-up"></i> 12.5% <span class="text-gray-500">较昨日</span>
                </p>
              </div>
              <div class="p-3 bg-primary-light rounded-lg">
                <i class="fa fa-credit-card text-primary text-xl"></i>
              </div>
            </div>
          </div>
          
          <div class="bg-white rounded-xl shadow-card p-6 hover-scale">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-sm font-medium text-gray-500">待审批</p>
                <h3 class="text-2xl font-bold mt-1">24</h3>
                <p class="text-xs mt-2 text-danger">
                  <i class="fa fa-arrow-up"></i> 8.3% <span class="text-gray-500">较昨日</span>
                </p>
              </div>
              <div class="p-3 bg-warning/10 rounded-lg">
                <i class="fa fa-clock-o text-warning text-xl"></i>
              </div>
            </div>
          </div>
          
          <div class="bg-white rounded-xl shadow-card p-6 hover-scale">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-sm font-medium text-gray-500">本月报销总额</p>
                <h3 class="text-2xl font-bold mt-1">¥186,245.00</h3>
                <p class="text-xs mt-2 text-success">
                  <i class="fa fa-arrow-up"></i> 5.2% <span class="text-gray-500">较上月</span>
                </p>
              </div>
              <div class="p-3 bg-success/10 rounded-lg">
                <i class="fa fa-line-chart text-success text-xl"></i>
              </div>
            </div>
          </div>
          
          <div class="bg-white rounded-xl shadow-card p-6 hover-scale">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-sm font-medium text-gray-500">已完成报销</p>
                <h3 class="text-2xl font-bold mt-1">187</h3>
                <p class="text-xs mt-2 text-success">
                  <i class="fa fa-arrow-up"></i> 15.3% <span class="text-gray-500">较上月</span>
                </p>
              </div>
              <div class="p-3 bg-secondary/10 rounded-lg">
                <i class="fa fa-check-circle text-secondary text-xl"></i>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 图表区域 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
          <div class="bg-white rounded-xl shadow-card p-6 lg:col-span-2">
            <div class="flex items-center justify-between mb-6">
              <h3 class="font-semibold text-lg">报销趋势</h3>
              <div class="flex space-x-2">
                <button class="px-3 py-1 text-xs bg-primary-light text-primary rounded-md">周</button>
                <button class="px-3 py-1 text-xs bg-gray-100 text-gray-500 rounded-md">月</button>
                <button class="px-3 py-1 text-xs bg-gray-100 text-gray-500 rounded-md">年</button>
              </div>
            </div>
            <div class="h-80">
              <canvas id="expenseTrendChart"></canvas>
            </div>
          </div>
          
          <div class="bg-white rounded-xl shadow-card p-6">
            <div class="flex items-center justify-between mb-6">
              <h3 class="font-semibold text-lg">报销类型分布</h3>
              <button class="text-gray-400 hover:text-gray-600">
                <i class="fa fa-ellipsis-v"></i>
              </button>
            </div>
            <div class="h-80">
              <canvas id="expenseTypeChart"></canvas>
            </div>
          </div>
        </div>
        
        <!-- 最近报销和待办事项 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <div class="bg-white rounded-xl shadow-card p-6 lg:col-span-2">
            <div class="flex items-center justify-between mb-6">
              <h3 class="font-semibold text-lg">最近报销记录</h3>
              <a href="#expense-list" class="text-primary text-sm hover:underline">查看全部</a>
            </div>
            <div class="overflow-x-auto">
              <table class="min-w-full">
                <thead>
                  <tr class="border-b">
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">报销单号</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">申请人</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="border-b hover:bg-gray-50">
                    <td class="px-4 py-3 whitespace-nowrap text-sm">BX20250715001</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">李小明</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">差旅费</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">¥3,250.00</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-07-15</td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">已完成</span>
                    </td>
                  </tr>
                  <tr class="border-b hover:bg-gray-50">
                    <td class="px-4 py-3 whitespace-nowrap text-sm">BX20250716002</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">王芳</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">办公用品</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">¥1,860.00</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-07-16</td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium bg-warning/10 text-warning rounded-full">审批中</span>
                    </td>
                  </tr>
                  <tr class="border-b hover:bg-gray-50">
                    <td class="px-4 py-3 whitespace-nowrap text-sm">BX20250716003</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">张伟</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">会议费</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">¥5,620.00</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-07-16</td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">待修改</span>
                    </td>
                  </tr>
                  <tr class="border-b hover:bg-gray-50">
                    <td class="px-4 py-3 whitespace-nowrap text-sm">BX20250717004</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">赵强</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">差旅费</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">¥2,180.00</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-07-17</td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">已提交</span>
                    </td>
                  </tr>
                  <tr class="hover:bg-gray-50">
                    <td class="px-4 py-3 whitespace-nowrap text-sm">BX20250717005</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">陈丽</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">业务招待费</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">¥4,980.00</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2025-07-17</td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">已完成</span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          
          <div class="bg-white rounded-xl shadow-card p-6">
            <div class="flex items-center justify-between mb-6">
              <h3 class="font-semibold text-lg">待办事项</h3>
              <button class="text-primary text-sm hover:underline">添加</button>
            </div>
            <div class="space-y-4">
              <div class="flex items-start">
                <div class="flex items-center h-5">
                  <input id="todo-1" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                </div>
                <div class="ml-3 text-sm">
                  <label for="todo-1" class="font-medium text-gray-700">审核差旅费报销单 BX20250716002</label>
                  <p class="text-gray-500">王芳 · 2小时前</p>
                </div>
              </div>
              <div class="flex items-start">
                <div class="flex items-center h-5">
                  <input id="todo-2" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                </div>
                <div class="ml-3 text-sm">
                  <label for="todo-2" class="font-medium text-gray-700">处理待修改报销单 BX20250716003</label>
                  <p class="text-gray-500">张伟 · 3小时前</p>
                </div>
              </div>
              <div class="flex items-start">
                <div class="flex items-center h-5">
                  <input id="todo-3" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                </div>
                <div class="ml-3 text-sm">
                  <label for="todo-3" class="font-medium text-gray-700">核对6月部门预算</label>
                  <p class="text-gray-500">今日截止</p>
                </div>
              </div>
              <div class="flex items-start">
                <div class="flex items-center h-5">
                  <input id="todo-4" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" checked>
                </div>
                <div class="ml-3 text-sm">
                  <label for="todo-4" class="font-medium text-gray-500 line-through">更新报销系统版本</label>
                  <p class="text-gray-500">已完成 · 昨天</p>
                </div>
              </div>
              <div class="flex items-start">
                <div class="flex items-center h-5">
                  <input id="todo-5" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                </div>
                <div class="ml-3 text-sm">
                  <label for="todo-5" class="font-medium text-gray-700">提交季度财务报表</label>
                  <p class="text-gray-500">7月20日前</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 模板上传页面 -->
      <section id="template-upload" class="py-6 hidden">
        <div class="mb-6">
          <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-900">Excel模板上传</h1>
          <p class="mt-1 text-gray-600">上传Excel报销模板，系统将自动识别表格结构</p>
        </div>
        
        <div class="bg-white rounded-xl shadow-card p-6 mb-8">
          <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-primary transition-all-300" id="dropZone">
            <i class="fa fa-cloud-upload text-gray-400 text-4xl mb-4"></i>
            <h3 class="text-lg font-medium text-gray-700 mb-2">拖放Excel文件到此处，或点击选择文件</h3>
            <p class="text-sm text-gray-500 mb-6">支持 .xlsx, .xls 格式文件</p>
            <input type="file" id="templateFile" accept=".xlsx,.xls" class="hidden">
            <button class="px-6 py-2 bg-primary text-white rounded-md hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" onclick="document.getElementById('templateFile').click()">
              选择文件
            </button>
          </div>
        </div>
        
        <div id="templatePreview" class="hidden">
          <div class="bg-white rounded-xl shadow-card p-6 mb-8">
            <h3 class="font-semibold text-lg mb-4">模板预览</h3>
            <div class="mb-6">
              <div class="flex items-center justify-between mb-3">
                <h4 class="font-medium">员工差旅报销单.xlsx</h4>
                <div class="flex space-x-2">
                  <button class="text-primary hover:text-primary/80">
                    <i class="fa fa-download mr-1"></i> 下载
                  </button>
                  <button class="text-gray-500 hover:text-gray-700">
                    <i class="fa fa-trash mr-1"></i> 删除
                  </button>
                </div>
              </div>
              <div class="border rounded-lg overflow-hidden">
                <img src="https://picsum.photos/id/180/800/400" alt="Excel模板预览" class="w-full h-auto">
              </div>
            </div>
            
            <h3 class="font-semibold text-lg mb-4">模板信息</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">模板名称</label>
                <input type="text" value="员工差旅报销单" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">模板类型</label>
                <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                  <option>差旅费</option>
                  <option>办公用品</option>
                  <option>业务招待费</option>
                  <option>会议费</option>
                  <option>其他</option>
                </select>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">适用部门</label>
                <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" multiple>
                  <option selected>财务部</option>
                  <option selected>人力资源部</option>
                  <option>市场部</option>
                  <option>技术部</option>
                  <option>销售部</option>
                </select>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">创建人</label>
                <input type="text" value="张财务" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" readonly>
              </div>
            </div>
            
            <h3 class="font-semibold text-lg mb-4">表格结构识别</h3>
            <div class="overflow-x-auto mb-6">
              <table class="min-w-full">
                <thead>
                  <tr class="border-b">
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">字段名称</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数据类型</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">是否必填</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="border-b hover:bg-gray-50">
                    <td class="px-4 py-3 whitespace-nowrap text-sm">员工姓名</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">文本</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">
                      <span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">是</span>
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">
                      <button class="text-primary hover:text-primary/80">编辑</button>
                    </td>
                  </tr>
                  <tr class="border-b hover:bg-gray-50">
                    <td class="px-4 py-3 whitespace-nowrap text-sm">部门</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">文本</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">
                      <span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">是</span>
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">
                      <button class="text-primary hover:text-primary/80">编辑</button>
                    </td>
                  </tr>
                  <tr class="border-b hover:bg-gray-50">
                    <td class="px-4 py-3 whitespace-nowrap text-sm">职位</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">文本</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">
                      <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">否</span>
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">
                      <button class="text-primary hover:text-primary/80">编辑</button>
                    </td>
                  </tr>
                  <tr class="border-b hover:bg-gray-50">
                    <td class="px-4 py-3 whitespace-nowrap text-sm">出差日期</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">日期</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">
                      <span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">是</span>
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">
                      <button class="text-primary hover:text-primary/80">编辑</button>
                    </td>
                  </tr>
                  <tr class="border-b hover:bg-gray-50">
                    <td class="px-4 py-3 whitespace-nowrap text-sm">返回日期</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">日期</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">
                      <span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">是</span>
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">
                      <button class="text-primary hover:text-primary/80">编辑</button>
                    </td>
                  </tr>
                  <tr class="border-b hover:bg-gray-50">
                    <td class="px-4 py-3 whitespace-nowrap text-sm">出差地点</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">文本</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">
                      <span class="px-2 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">是</span>
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">
                      <button class="text-primary hover:text-primary/80">编辑</button>
                    </td>
                  </tr>
                  <tr class="border-b hover:bg-gray-50">
                    <td class="px-4 py-3 whitespace-nowrap text-sm">交通工具</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">文本</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">
                      <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">否</span>
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">
                      <button class="text-primary hover:text-primary/80">编辑</button>
                    </td>
                  </tr>
                  <tr class="hover:bg-gray-50">
                    <td class="px-4 py-3 whitespace-nowrap text-sm">住宿费</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">数字</td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">
                      <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">否</span>
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">
                      <button class="text-primary hover:text-primary/80">编辑</button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            
            <div class="flex justify-end space-x-3">
              <button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
                取消
              </button>
              <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90">
                保存模板
              </button>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 发票上传页面 -->
      <section id="invoice-upload" class="py-6 hidden">
        <div class="mb-6">
          <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-900">发票上传</h1>
          <p class="mt-1 text-gray-600">上传发票照片或PDF，系统将自动识别发票信息</p>
        </div>
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <div class="bg-white rounded-xl shadow-card p-6 lg:col-span-2">
            <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-primary transition-all-300" id="invoiceDropZone">
              <i class="fa fa-file-image-o text-gray-400 text-4xl mb-4"></i>
              <h3 class="text-lg font-medium text-gray-700 mb-2">拖放发票文件到此处，或点击选择文件</h3>
              <p class="text-sm text-gray-500 mb-6">支持 JPG, PNG, PDF 格式文件</p>
              <input type="file" id="invoiceFile" accept="image/*,.pdf" class="hidden" multiple>
              <button class="px-6 py-2 bg-primary text-white rounded-md hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" onclick="document.getElementById('invoiceFile').click()">
                选择文件
              </button>
            </div>
            
            <div id="invoicePreview" class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4 hidden">
              <div class="border rounded-lg overflow-hidden">
                <img src="https://picsum.photos/id/1/300/400" alt="发票预览" class="w-full h-auto">
                <div class="p-3 bg-gray-50">
                  <div class="flex items-center justify-between">
                    <span class="text-sm font-medium">住宿费发票.jpg</span>
                    <button class="text-gray-500 hover:text-gray-700">
                      <i class="fa fa-trash"></i>
                    </button>
                  </div>
                </div>
              </div>
              <div class="border rounded-lg overflow-hidden">
                <img src="https://picsum.photos/id/2/300/400" alt="发票预览" class="w-full h-auto">
                <div class="p-3 bg-gray-50">
                  <div class="flex items-center justify-between">
                    <span class="text-sm font-medium">交通费发票.jpg</span>
                    <button class="text-gray-500 hover:text-gray-700">
                      <i class="fa fa-trash"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="bg-white rounded-xl shadow-card p-6">
            <h3 class="font-semibold text-lg mb-4">发票信息</h3>
            
            <div class="space-y-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">发票类型</label>
                <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                  <option>增值税专用发票</option>
                  <option selected>增值税普通发票</option>
                  <option>通用机打发票</option>
                  <option>其他</option>
                </select>
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">发票代码</label>
                <input type="text" value="1100251320" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">发票号码</label>
                <input type="text" value="01234567" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">开票日期</label>
                <input type="date" value="2025-07-15" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">购买方名称</label>
                <input type="text" value="北京智慧科技有限公司" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">金额</label>
                <input type="text" value="3,250.00" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">税额</label>
                <input type="text" value="390.00" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">价税合计</label>
                <input type="text" value="3,640.00" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">发票状态</label>
                <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                  <option selected>正常</option>
                  <option>作废</option>
                  <option>红冲</option>
                </select>
              </div>
              
              <div class="flex justify-end space-x-3 pt-4">
                <button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
                  取消
                </button>
                <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90">
                  保存发票
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 新建报销页面 -->
      <section id="expense-create" class="py-6 hidden">
        <div class="mb-6">
          <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-900">新建报销</h1>
          <p class="mt-1 text-gray-600">根据已有的模板创建报销单</p>
        </div>
        
        <div class="bg-white rounded-xl shadow-card p-6 mb-8">
          <h3 class="font-semibold text-lg mb-4">选择模板</h3>
          
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div class="border rounded-lg overflow-hidden hover-scale cursor-pointer">
              <img src="https://picsum.photos/id/180/400/200" alt="员工差旅报销单" class="w-full h-40 object-cover">
              <div class="p-4">
                <h4 class="font-medium text-gray-900">员工差旅报销单</h4>
                <p class="text-sm text-gray-500 mt-1">适用于员工出差费用报销</p>
                <div class="mt-3 flex items-center justify-between">
                  <span class="text-xs text-gray-500">创建于 2025-06-15</span>
                  <button class="px-3 py-1 text-xs bg-primary text-white rounded-md">
                    选择
                  </button>
                </div>
              </div>
            </div>
            
            <div class="border rounded-lg overflow-hidden hover-scale cursor-pointer">
              <img src="https://picsum.photos/id/181/400/200" alt="办公用品申请表" class="w-full h-40 object-cover">
              <div class="p-4">
                <h4 class="font-medium text-gray-900">办公用品申请表</h4>
                <p class="text-sm text-gray-500 mt-1">适用于申请购买办公用品</p>
                <div class="mt-3 flex items-center justify-between">
                  <span class="text-xs text-gray-500">创建于 2025-06-20</span>
                  <button class="px-3 py-1 text-xs bg-primary text-white rounded-md">
                    选择
                  </button>
                </div>
              </div>
            </div>
            
            <div class="border rounded-lg overflow-hidden hover-scale cursor-pointer">
              <img src="https://picsum.photos/id/182/400/200" alt="业务招待费申请表" class="w-full h-40 object-cover">
              <div class="p-4">
                <h4 class="font-medium text-gray-900">业务招待费申请表</h4>
                <p class="text-sm text-gray-500 mt-1">适用于业务招待费用报销</p>
                <div class="mt-3 flex items-center justify-between">
                  <span class="text-xs text-gray-500">创建于 2025-07-05</span>
                  <button class="px-3 py-1 text-xs bg-primary text-white rounded-md">
                    选择
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div id="expenseForm" class="hidden">
          <div class="bg-white rounded-xl shadow-card p-6 mb-8">
            <h3 class="font-semibold text-lg mb-4">员工差旅报销单</h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">员工姓名</label>
                <input type="text" value="李小明" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">部门</label>
                <input type="text" value="技术部" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">职位</label>
                <input type="text" value="高级工程师" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">报销日期</label>
                <input type="date" value="2025-07-17" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">出差日期</label>
                <input type="date" value="2025-07-10" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">返回日期</label>
                <input type="date" value="2025-07-12" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">出差地点</label>
                <input type="text" value="上海" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">交通工具</label>
                <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                  <option>飞机</option>
                  <option selected>高铁</option>
                  <option>动车</option>
                  <option>汽车</option>
                  <option>其他</option>
                </select>
              </div>
            </div>
            
            <h3 class="font-semibold text-lg mb-4">费用明细</h3>
            
            <div class="overflow-x-auto mb-6">
              <table class="min-w-full">
                <thead>
                  <tr class="border-b">
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">费用类型</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">发票号</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">备注</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="border-b hover:bg-gray-50">
                    <td class="px-4 py-3 whitespace-nowrap">
                      <select class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                        <option selected>交通费</option>
                        <option>住宿费</option>
                        <option>餐饮费</option>
                        <option>其他</option>
                      </select>
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <input type="text" value="850.00" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <input type="date" value="2025-07-10" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <input type="text" value="01234567" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <input type="text" value="高铁二等座" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <button class="text-gray-500 hover:text-gray-700">
                        <i class="fa fa-trash"></i>
                      </button>
                    </td>
                  </tr>
                  <tr class="border-b hover:bg-gray-50">
                    <td class="px-4 py-3 whitespace-nowrap">
                      <select class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                        <option>交通费</option>
                        <option selected>住宿费</option>
                        <option>餐饮费</option>
                        <option>其他</option>
                      </select>
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <input type="text" value="1,860.00" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <input type="date" value="2025-07-10" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <input type="text" value="01234568" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <input type="text" value="两晚住宿费" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <button class="text-gray-500 hover:text-gray-700">
                        <i class="fa fa-trash"></i>
                      </button>
                    </td>
                  </tr>
                  <tr class="hover:bg-gray-50">
                    <td class="px-4 py-3 whitespace-nowrap">
                      <select class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                        <option>交通费</option>
                        <option>住宿费</option>
                        <option selected>餐饮费</option>
                        <option>其他</option>
                      </select>
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <input type="text" value="540.00" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <input type="date" value="2025-07-11" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <input type="text" value="01234569" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <input type="text" value="商务宴请" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <button class="text-gray-500 hover:text-gray-700">
                        <i class="fa fa-trash"></i>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            
            <div class="flex justify-end mb-6">
              <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90">
                <i class="fa fa-plus mr-1"></i> 添加费用
              </button>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">报销总额</label>
                <input type="text" value="3,250.00" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" readonly>
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">报销原因</label>
                <textarea rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">参加上海技术研讨会</textarea>
              </div>
            </div>
            
            <h3 class="font-semibold text-lg mb-4">上传发票</h3>
            
            <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-primary transition-all-300 mb-6">
              <i class="fa fa-paperclip text-gray-400 text-2xl mb-2"></i>
              <p class="text-sm text-gray-500">点击上传相关发票或附件</p>
              <input type="file" accept="image/*,.pdf" class="hidden" id="expenseInvoiceFile">
              <button class="mt-2 px-4 py-1.5 bg-primary text-white rounded-md hover:bg-primary/90 text-sm" onclick="document.getElementById('expenseInvoiceFile').click()">
                选择文件
              </button>
            </div>
            
            <div class="flex justify-end space-x-3">
              <button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
                保存草稿
              </button>
              <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90">
                提交审批
              </button>
            </div>
          </div>
        </div>
      </section>
    </main>
  </div>

  <!-- 脚本 -->
  <script>
    // 设置当前日期
    document.getElementById('currentDate').textContent = new Date().toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
      weekday: 'long'
    });
    
    // 侧边栏切换
    document.getElementById('openSidebar').addEventListener('click', function() {
      document.getElementById('sidebar').classList.remove('transform', '-translate-x-full');
    });
    
    document.getElementById('closeSidebar').addEventListener('click', function() {
      document.getElementById('sidebar').classList.add('transform', '-translate-x-full');
    });
    
    // 用户菜单切换
    document.getElementById('userMenuButton').addEventListener('click', function() {
      document.getElementById('userMenu').classList.toggle('hidden');
    });
    
    // 点击其他区域关闭用户菜单
    document.addEventListener('click', function(event) {
      const userMenuButton = document.getElementById('userMenuButton');
      const userMenu = document.getElementById('userMenu');
      
      if (!userMenuButton.contains(event.target) && !userMenu.contains(event.target)) {
        userMenu.classList.add('hidden');
      }
    });
    
    // 页面切换
    document.querySelectorAll('#sidebar a').forEach(link => {
      link.addEventListener('click', function(e) {
        e.preventDefault();
        
        // 获取目标页面ID
        const targetId = this.getAttribute('href').substring(1);
        
        // 隐藏所有页面
        document.querySelectorAll('main > section').forEach(section => {
          section.classList.add('hidden');
        });
        
        // 显示目标页面
        document.getElementById(targetId).classList.remove('hidden');
        
        // 移动端关闭侧边栏
        if (window.innerWidth < 1024) {
          document.getElementById('sidebar').classList.add('transform', '-translate-x-full');
        }
      });
    });
    
    // 文件上传功能
    document.getElementById('templateFile').addEventListener('change', function() {
      if (this.files.length > 0) {
        document.getElementById('templatePreview').classList.remove('hidden');
      }
    });
    
    document.getElementById('invoiceFile').addEventListener('change', function() {
      if (this.files.length > 0) {
        document.getElementById('invoicePreview').classList.remove('hidden');
      }
    });
    
    document.getElementById('expenseInvoiceFile').addEventListener('change', function() {
      if (this.files.length > 0) {
        alert('文件已上传');
      }
    });
    
    // 选择模板后显示表单
    document.querySelectorAll('#expense-create .grid button').forEach(button => {
      button.addEventListener('click', function() {
        document.getElementById('expenseForm').classList.remove('hidden');
      });
    });
    
    // 图表初始化
    window.addEventListener('load', function() {
      // 报销趋势图表
      const trendCtx = document.getElementById('expenseTrendChart').getContext('2d');
      new Chart(trendCtx, {
        type: 'line',
        data: {
          labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          datasets: [{
            label: '报销金额',
            data: [8500, 12400, 9800, 15600, 11200, 7800, 12850],
            borderColor: '#165DFF',
            backgroundColor: 'rgba(22, 93, 255, 0.1)',
            fill: true,
            tension: 0.4
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              display: false
            }
          },
          scales: {
            y: {
              beginAtZero: true,
              ticks: {
                callback: function(value) {
                  return '¥' + value.toLocaleString();
                }
              }
            }
          }
        }
      });
      
      // 报销类型分布图表
      const typeCtx = document.getElementById('expenseTypeChart').getContext('2d');
      new Chart(typeCtx, {
        type: 'doughnut',
        data: {
          labels: ['差旅费', '办公用品', '业务招待费', '会议费', '其他'],
          datasets: [{
            data: [45, 20, 15, 10, 10],
            backgroundColor: [
              '#165DFF',
              '#0FC6C2',
              '#722ED1',
              '#FF7D00',
              '#86909C'
            ],
            borderWidth: 0
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'bottom'
            }
          },
          cutout: '70%'
        }
      });
    });
  </script>
</body>
</html>
去使用这个提示词
DeepSeek
DeepSeek
豆包
豆包
Gemini
Gemini
Claude
Claude
ChatGPT
ChatGPT
Grok
Grok