prototype_design/src/views/dashboard.vue

<template>
  <div class="min-h-screen bg-gray-50">
    <!-- Sidebar -->
    <aside class="w-64 min-h-screen bg-[#08002E] text-white border-r">
      <nav class="p-4">
        <div class="mb-4">菜单类别标题</div>
        <ul class="space-y-2">
          <li>
            <a href="#/dashboard" class="flex items-center px-4 py-2 hover:bg-gray-700 rounded-lg">
              <Home class="w-5 h-5 mr-3" />
              首页
            </a>
          </li>
          <li>
            <a href="#/organization" class="flex items-center px-4 py-2 hover:bg-gray-700 rounded-lg">
              <Users class="w-5 h-5 mr-3" />
              组织架构
            </a>
          </li>
          <li>
            <a href="#/userList" class="flex items-center px-4 py-2 hover:bg-gray-700 rounded-lg">
              <List class="w-5 h-5 mr-3" />
              用户列表信息
            </a>
          </li>
          <li>
            <a href="#/systemModule1" class="flex items-center px-4 py-2 hover:bg-gray-700 rounded-lg">
              <Box class="w-5 h-5 mr-3" />
              系统模块1
            </a>
          </li>
          <li>
            <a href="#/systemModule2" class="flex items-center px-4 py-2 hover:bg-gray-700 rounded-lg">
              <Box class="w-5 h-5 mr-3" />
              系统模块2
            </a>
          </li>
        </ul>
      </nav>
    </aside>

    <!-- Main Content -->
    <main class="flex-1 p-6">
      <div class="grid grid-cols-4 gap-6 mb-6">
        <div class="bg-white rounded-lg p-6 flex items-center space-x-4 shadow-sm">
          <div class="w-12 h-12 rounded-lg flex items-center justify-center bg-blue-50">
            <FileText class="text-blue-500" size={24} />
          </div>
          <div>
            <div class="text-3xl font-semibold">
              21<span class="text-gray-400 text-lg">/35</span>
            </div>
            <div class="text-gray-500">合同审核</div>
          </div>
        </div>
        <div class="bg-white rounded-lg p-6 flex items-center space-x-4 shadow-sm">
          <div class="w-12 h-12 rounded-lg flex items-center justify-center bg-yellow-50">
            <FileText class="text-yellow-500" size={24} />
          </div>
          <div>
            <div class="text-3xl font-semibold">
              28<span class="text-gray-400 text-lg">/40</span>
            </div>
            <div class="text-gray-500">合同签署</div>
          </div>
        </div>
        <div class="bg-white rounded-lg p-6 flex items-center space-x-4 shadow-sm">
          <div class="w-12 h-12 rounded-lg flex items-center justify-center bg-green-50">
            <FileText class="text-green-500" size={24} />
          </div>
          <div>
            <div class="text-3xl font-semibold">
              40<span class="text-gray-400 text-lg">/65</span>
            </div>
            <div class="text-gray-500">合同登记</div>
          </div>
        </div>
        <div class="bg-white rounded-lg p-6 flex items-center space-x-4 shadow-sm">
          <div class="w-12 h-12 rounded-lg flex items-center justify-center bg-red-50">
            <FileText class="text-red-500" size={24} />
          </div>
          <div>
            <div class="text-3xl font-semibold">
              12<span class="text-gray-400 text-lg">/15</span>
            </div>
            <div class="text-gray-500">合同履约</div>
          </div>
        </div>
      </div>

      <div class="grid grid-cols-2 gap-6">
        <div class="bg-white rounded-lg p-6 shadow-sm">
          <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-medium">特办事项</h2>
            <div class="flex space-x-4">
              <button class="px-3 py-1 text-blue-600 bg-blue-50 rounded-md">全部</button>
              <button class="px-3 py-1 text-blue-600">今天</button>
              <button class="px-3 py-1 text-gray-500">本周</button>
              <button class="px-3 py-1 text-gray-500">本月</button>
            </div>
          </div>
          <div class="space-y-4">
            <div v-for="(task, index) in tasks" :key="index" class="flex items-start">
              <input type="checkbox" :checked="task.completed" class="mt-1 mr-3" />
              <div>
                <div class="text-gray-900">{{ task.title }}</div>
                <div class="text-gray-500 text-sm">{{ task.project }}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="bg-white rounded-lg p-6 shadow-sm">
          <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-medium">项目进程</h2>
          </div>
          <table class="w-full">
            <thead>
            <tr class="text-gray-500">
              <th class="pb-4 text-left font-normal">项目名称</th>
              <th class="pb-4 text-left font-normal">负责人</th>
              <th class="pb-4 text-left font-normal">截止日期</th>
              <th class="pb-4 text-left font-normal">当前状态</th>
            </tr>
            </thead>
            <tbody class="text-sm">
            <tr v-for="(project, index) in projects" :key="index" class="border-t">
              <td class="py-4">{{ project.name }}</td>
              <td class="py-4">{{ project.owner }}</td>
              <td class="py-4">{{ project.deadline }}</td>
              <td class="py-4">
                  <span :class="[
                    'px-2 py-1 rounded text-sm',
                    project.statusColor
                  ]">
                    {{ project.status }}
                  </span>
              </td>
            </tr>
            </tbody>
          </table>
        </div>

        <div class="bg-white rounded-lg p-6 shadow-sm">
          <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-medium">快捷功能</h2>
            <MoreHorizontal class="text-gray-400" />
          </div>
          <div class="space-y-3">
            <div v-for="(func, index) in quickFunctions" :key="index"
                 class="text-gray-700 hover:text-blue-600 cursor-pointer">
              {{ func }}
            </div>
          </div>
        </div>

        <div class="bg-white rounded-lg p-6 shadow-sm">
          <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-medium">合同类型统计</h2>
            <div class="flex items-center space-x-4">
              <div class="flex items-center">
                <div class="w-3 h-3 bg-blue-500 rounded-sm mr-2"></div>
                <span class="text-sm text-gray-500">A合同</span>
              </div>
              <div class="flex items-center">
                <div class="w-3 h-3 bg-green-500 rounded-sm mr-2"></div>
                <span class="text-sm text-gray-500">B合同</span>
              </div>
            </div>
          </div>
          <div class="h-64">
            <!-- Chart would go here - using a placeholder -->
            <div class="w-full h-full bg-gray-50 rounded flex items-center justify-center">
              Bar Chart Placeholder
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import {
  Home, Users, List, Box, FileText, MoreHorizontal
} from 'lucide-vue-next'

const metrics = [
  { label: '合同审核', value: 21, total: 35 },
  { label: '合同签署', value: 28, total: 40 },
  { label: '合同登记', value: 40, total: 65 },
  { label: '合同履约', value: 12, total: 15 }
]

const tasks = [
  { title: '联系xxxx客户，商讨具体合同事宜', project: 'xxxx公司公积金管理', completed: true },
  { title: '完成合同模版创建并上传系统', project: 'xxxxx公司人员xxxx合同管理', completed: true },
  { title: '审核xxxxxxx合同', project: 'xxxx公司人员xxx合同签订', completed: false },
  { title: '签署xxxx合同，邮件发送xxxxx客户', project: 'xxxxxxxxx公司人员资源管理', completed: true }
]

const projects = [
  { name: 'xxxx公司公积金管理', owner: '任小东', deadline: '2023/07/25', status: '已延期', statusColor: 'bg-red-50 text-red-600' },
  { name: 'xxxxx公司人员xxxx合同管理', owner: '胡晓东', deadline: '2024/01/09', status: '进行中', statusColor: 'bg-blue-50 text-blue-600' },
  { name: 'xxxx公司人员xxx合同签订', owner: '李兵', deadline: '2025/01/08', status: '进行中', statusColor: 'bg-blue-50 text-blue-600' },
  { name: 'xxxxxxxxx公司人员资源管理', owner: '王天一', deadline: '2023/09/03', status: '已完成', statusColor: 'bg-green-50 text-green-600' }
]

const quickFunctions = [
  '人力资源主合同（标准版）',
  '人事代理服务协议（标准版）',
  '人事代理服务协议',
  '人事代理服务协议',
  '人事代理服务协议（企业版）',
  '人事代理服务协议（定制版）'
]
</script>