\n \n \n \n \n \n \n \n \n \n\n\n\n \n
\n
\n
\n \n 智慧财务报销系统\n
\n \n
\n \n
\n \n \n
\n
\n \"用户头像\"\n
\n

张财务

\n

财务主管

\n
\n
\n
\n
\n
\n\n \n
\n \n
\n
\n
\n \n
\n \n \n \n \n
\n
\n \n
\n \n \n
\n \n \n \n
\n
\n
\n
\n\n \n
\n \n
\n
\n

控制面板

\n

欢迎使用智慧财务报销系统，今天是

\n
\n \n \n
\n
\n
\n
\n

今日报销

\n

¥12,850.00

\n

\n 12.5% 较昨日\n

\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n

待审批

\n

24

\n

\n 8.3% 较昨日\n

\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n

本月报销总额

\n

¥186,245.00

\n

\n 5.2% 较上月\n

\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n

已完成报销

\n

187

\n

\n 15.3% 较上月\n

\n
\n
\n \n
\n
\n
\n
\n \n \n
\n
\n
\n

报销趋势

\n
\n \n \n \n
\n
\n
\n \n
\n
\n \n
\n
\n

报销类型分布

\n \n
\n
\n \n
\n
\n
\n \n \n
\n
\n
\n

最近报销记录

\n 查看全部\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
报销单号申请人类型金额日期状态
BX20250715001李小明差旅费¥3,250.002025-07-15\n 已完成\n
BX20250716002王芳办公用品¥1,860.002025-07-16\n 审批中\n
BX20250716003张伟会议费¥5,620.002025-07-16\n 待修改\n
BX20250717004赵强差旅费¥2,180.002025-07-17\n 已提交\n
BX20250717005陈丽业务招待费¥4,980.002025-07-17\n 已完成\n
\n
\n
\n \n
\n
\n

待办事项

\n \n
\n
\n
\n
\n \n
\n
\n \n

王芳 · 2小时前

\n
\n
\n
\n
\n \n
\n
\n \n

张伟 · 3小时前

\n
\n
\n
\n
\n \n
\n
\n \n

今日截止

\n
\n
\n
\n
\n \n
\n
\n \n

已完成 · 昨天

\n
\n
\n
\n
\n \n
\n
\n \n

7月20日前

\n
\n
\n
\n
\n
\n
\n \n \n
\n
\n

Excel模板上传

\n

上传Excel报销模板，系统将自动识别表格结构

\n
\n \n
\n
\n \n

拖放Excel文件到此处，或点击选择文件

\n

支持 .xlsx, .xls 格式文件

\n \n \n
\n
\n \n
\n
\n

模板预览

\n
\n
\n

员工差旅报销单.xlsx

\n
\n \n \n
\n
\n
\n \"Excel模板预览\"\n
\n
\n \n

模板信息

\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n

表格结构识别

\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
字段名称数据类型是否必填操作
员工姓名文本\n 是\n \n \n
部门文本\n 是\n \n \n
职位文本\n 否\n \n \n
出差日期日期\n 是\n \n \n
返回日期日期\n 是\n \n \n
出差地点文本\n 是\n \n \n
交通工具文本\n 否\n \n \n
住宿费数字\n 否\n \n \n
\n
\n \n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n

发票上传

\n

上传发票照片或PDF，系统将自动识别发票信息

\n
\n \n
\n
\n
\n \n

拖放发票文件到此处，或点击选择文件

\n

支持 JPG, PNG, PDF 格式文件

\n \n \n
\n \n
\n
\n \"发票预览\"\n
\n
\n 住宿费发票.jpg\n \n
\n
\n
\n
\n \"发票预览\"\n
\n
\n 交通费发票.jpg\n \n
\n
\n
\n
\n
\n \n
\n

发票信息

\n \n
\n
\n \n \n
\n \n
\n \n \n
\n \n
\n \n \n
\n \n
\n \n \n
\n \n
\n \n \n
\n \n
\n \n \n
\n \n
\n \n \n
\n \n
\n \n \n
\n \n
\n \n \n
\n \n
\n \n \n
\n
\n
\n
\n
\n \n \n
\n
\n

新建报销

\n

根据已有的模板创建报销单

\n
\n \n
\n

选择模板

\n \n
\n
\n \"员工差旅报销单\"\n
\n

员工差旅报销单

\n

适用于员工出差费用报销

\n
\n 创建于 2025-06-15\n \n
\n
\n
\n \n
\n \"办公用品申请表\"\n
\n

办公用品申请表

\n

适用于申请购买办公用品

\n
\n 创建于 2025-06-20\n \n
\n
\n
\n \n
\n \"业务招待费申请表\"\n
\n

业务招待费申请表

\n

适用于业务招待费用报销

\n
\n 创建于 2025-07-05\n \n
\n
\n
\n
\n
\n \n
\n
\n

员工差旅报销单

\n \n
\n
\n \n \n
\n \n
\n \n \n
\n \n
\n \n \n
\n \n
\n \n \n
\n \n
\n \n \n
\n \n
\n \n \n
\n \n
\n \n \n
\n \n
\n \n \n
\n
\n \n

费用明细

\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
费用类型金额日期发票号备注操作
\n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n
\n
\n \n
\n \n
\n \n
\n
\n \n \n
\n \n
\n \n \n
\n
\n \n

上传发票

\n \n
\n \n

点击上传相关发票或附件

\n \n \n
\n \n
\n \n \n
\n
\n
\n
\n
\n
\n\n \n \n\n\n ","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/UseAction","userInteractionCount":0}}
Back to Explore

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

Author:虫虫
2026/01/05 09:13

Description

设计极简主义风格的杂志知识卡片，采用留白美学和网格系统，使用HTML5和Tailwind CSS实现精致的视觉呈现

Tags

Code ProgrammingVisualizeBrand & Strategy

Content

你是一位国际顶尖的数字杂志艺术总监和前端开发专家，曾为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/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/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>