|
|
@@ -0,0 +1,220 @@
|
|
|
+<template>
|
|
|
+ <div class="min-h-screen bg-gray-50">
|
|
|
+ <!-- Top Navigation -->
|
|
|
+ <header class="bg-white border-b">
|
|
|
+ <div class="flex items-center justify-between px-4 py-2">
|
|
|
+ <div class="flex items-center space-x-2">
|
|
|
+ <div class="text-blue-600">
|
|
|
+ <div class="w-8 h-8">
|
|
|
+ <div class="w-full h-full" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span class="text-xl font-medium">ProductName</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex-1 max-w-xl mx-4">
|
|
|
+ <div class="relative">
|
|
|
+ <Search class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size="20" />
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ placeholder="输入内容查询"
|
|
|
+ class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex items-center space-x-4">
|
|
|
+ <MessageCircle class="w-6 h-6 text-blue-500" />
|
|
|
+ <Bell class="w-6 h-6 text-blue-500" />
|
|
|
+ <Settings class="w-6 h-6 text-gray-400" />
|
|
|
+ <div class="w-8 h-8 rounded-full bg-gray-200"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <div class="flex">
|
|
|
+ <!-- Sidebar -->
|
|
|
+ <aside class="w-64 min-h-screen bg-white border-r">
|
|
|
+ <nav class="p-4">
|
|
|
+ <div class="mb-4 text-gray-500">菜单类别标题</div>
|
|
|
+ <ul class="space-y-2">
|
|
|
+ <li>
|
|
|
+ <a href="#" class="flex items-center px-4 py-2 text-blue-600 bg-blue-50 rounded-lg">
|
|
|
+ <LayoutGrid class="w-5 h-5 mr-3" />
|
|
|
+ 首页
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li v-for="i in 8" :key="i">
|
|
|
+ <a href="#" class="flex items-center px-4 py-2 text-gray-600 hover:bg-gray-50 rounded-lg">
|
|
|
+ <Box class="w-5 h-5 mr-3" />
|
|
|
+ 系统模块{{ i }}
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </nav>
|
|
|
+ </aside>
|
|
|
+
|
|
|
+ <!-- Main Content -->
|
|
|
+ <main class="flex-1 p-6">
|
|
|
+ <!-- Breadcrumb -->
|
|
|
+ <div class="flex items-center text-gray-500 mb-6">
|
|
|
+ <span>首页</span> > <span>xxx工作台</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Metric Cards -->
|
|
|
+ <div class="grid grid-cols-4 gap-6 mb-6">
|
|
|
+ <div v-for="(metric, index) in metrics" :key="index"
|
|
|
+ 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',
|
|
|
+ metric.bgColor
|
|
|
+ ]">
|
|
|
+ <FileText :class="metric.iconColor" size="24" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="text-3xl font-semibold">
|
|
|
+ {{ metric.value }}<span class="text-gray-400 text-lg">/{{ metric.total }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="text-gray-500">{{ metric.label }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Tasks and Projects -->
|
|
|
+ <div class="grid grid-cols-2 gap-6 mb-6">
|
|
|
+ <!-- Special Tasks -->
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <!-- Project Progress -->
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <!-- Bottom Section -->
|
|
|
+ <div class="grid grid-cols-2 gap-6">
|
|
|
+ <!-- Quick Functions -->
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <!-- Contract Statistics -->
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import {
|
|
|
+ Search, MessageCircle, Bell, Settings,
|
|
|
+ Home, ChevronRight, FileText, Box,
|
|
|
+ LayoutGrid, MoreHorizontal
|
|
|
+} from 'lucide-vue-next'
|
|
|
+
|
|
|
+const metrics = [
|
|
|
+ { label: '合同审核', value: 21, total: 35, bgColor: 'bg-blue-50', iconColor: 'text-blue-500' },
|
|
|
+ { label: '合同签署', value: 28, total: 40, bgColor: 'bg-yellow-50', iconColor: 'text-yellow-500' },
|
|
|
+ { label: '合同登记', value: 40, total: 65, bgColor: 'bg-green-50', iconColor: 'text-green-500' },
|
|
|
+ { label: '合同履约', value: 12, total: 15, bgColor: 'bg-red-50', iconColor: 'text-red-500' }
|
|
|
+]
|
|
|
+
|
|
|
+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>
|
genlitex