gxwebsoft/tiantian-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(tiantian-system): 重构系统首页界面与布局

Browse Source 
- 使用侧边栏布局替换顶部欢迎区，提升导航体验
- 重新设计快捷入口，采用按钮网格样式
- 添加待办事项模块，方便任务管理和提醒
- 优化应用模块展示，支持点击跳转应用管理界面
- 增加经营概览和最新公告两个信息展示模块
- 简化代码结构，移除旧组件和无用代码
- 使用 TailwindCSS 进行样式统一管理，提升交互动画体验
- 新增顶部栏包含搜索、消息、语言切换和用户信息
- 调整日期显示和剩余工作日计算逻辑
- 移除多余的类型声明和无用API调用逻辑
This commit is contained in:
赵忠林
2026-04-09 01:45:22 +08:00
parent 3af47ad1e7
commit 3209d92cc5
16 changed files with 463 additions and 1060 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
app/pages/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
<!-- 左侧导航 -->
<aside class="sidebar w-64 fixed h-full text-white flex flex-col">
<aside class="w-64 fixed h-full text-white flex flex-col sidebar">
<!-- Logo -->
<div class="p-6 border-b border-white/10">
<div class="flex items-center gap-3">
@@ -14,7 +14,7 @@
</div>
</div>
</div>
<!-- 导航菜单 -->
<nav class="flex-1 py-6 px-3">
<div class="space-y-1">
@@ -47,7 +47,7 @@
<span>协同办公</span>
</a>
</div>
<div class="mt-8 pt-6 border-t border-white/10">
<p class="px-4 text-xs text-white/50 mb-3">个人</p>
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
@@ -60,80 +60,10 @@
</a>
</div>
</nav>
<!-- 用户信息 -->
<div class="p-4 border-t border-white/10">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
<UserOutlined />
</div>
<div class="flex-1">
<p class="font-medium">管理员</p>
<p class="text-xs text-white/70">超级管理员</p>
</div>
<button class="text-white/70 hover:text-white">
<LogoutOutlined />
</button>
</div>
</div>
</aside>
<!-- 主内容区 -->
<main class="flex-1 ml-64">
<!-- 顶部栏 -->
<header class="bg-white/85 backdrop-blur-xl border-b border-white/20 sticky top-0 z-50 px-8 py-4">
<div class="flex items-center justify-between">
<!-- 搜索 -->
<div class="relative w-96">
<input
v-model="searchQuery"
type="text"
placeholder="🔍 搜索设备、订单、员工、文档..."
class="w-full px-5 py-3 bg-gray-100 rounded-xl border-0 focus:ring-2 focus:ring-purple-500 focus:bg-white transition-all"
>
</div>
<!-- 右侧 -->
<div class="flex items-center gap-6">
<!-- 全屏 -->
<button class="text-gray-500 hover:text-purple-600 transition-colors" @click="toggleFullscreen">
<ExpandOutlined class="text-lg" />
</button>
<!-- 消息 -->
<a-popover trigger="click">
<template #content>
<div class="w-64">
<div class="font-medium mb-2">通知中心</div>
<div class="text-sm text-gray-500">暂无新通知</div>
</div>
</template>
<button class="relative text-gray-500 hover:text-purple-600 transition-colors">
<Badge :count="3" :offset="[-2, 2]">
<BellOutlined class="text-lg" />
</Badge>
</button>
</a-popover>
<!-- 语言 -->
<button class="text-gray-500 hover:text-purple-600 transition-colors">
<GlobalOutlined class="text-lg" />
</button>
<!-- 用户 -->
<div class="flex items-center gap-3 pl-6 border-l border-gray-200">
<div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white font-bold">
A
</div>
<div>
<p class="font-medium text-gray-800">Admin</p>
<p class="text-xs text-gray-500">超级管理员</p>
</div>
</div>
</div>
</div>
</header>
<!-- 内容区域 -->
<div class="p-8">
<!-- 欢迎区 -->
@@ -143,7 +73,7 @@
</h2>
<p class="text-gray-500">今天是 {{ currentDate }}，本周还有 <span class="text-purple-600 font-semibold">{{ remainingDays }}</span> 天工作日</p>
</div>
<!-- 数据概览 -->
<div class="grid grid-cols-4 gap-6 mb-8">
<div class="stat-card blue bg-white rounded-2xl p-6 card-hover shadow-sm">
@@ -156,7 +86,7 @@
<h3 class="text-3xl font-bold text-gray-800 mb-1">128</h3>
<p class="text-gray-500 text-sm">设备总数</p>
</div>
<div class="stat-card green bg-white rounded-2xl p-6 card-hover shadow-sm">
<div class="flex items-center justify-between mb-4">
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
@@ -167,7 +97,7 @@
<h3 class="text-3xl font-bold text-gray-800 mb-1">5,230</h3>
<p class="text-gray-500 text-sm">库存物料</p>
</div>
<div class="stat-card orange bg-white rounded-2xl p-6 card-hover shadow-sm">
<div class="flex items-center justify-between mb-4">
<div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center">
@@ -178,7 +108,7 @@
<h3 class="text-3xl font-bold text-gray-800 mb-1">12</h3>
<p class="text-gray-500 text-sm">待审批</p>
</div>
<div class="stat-card purple bg-white rounded-2xl p-6 card-hover shadow-sm">
<div class="flex items-center justify-between mb-4">
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
@@ -190,7 +120,7 @@
<p class="text-gray-500 text-sm">本月支出</p>
</div>
</div>
<!-- 中间区域 -->
<div class="grid grid-cols-3 gap-6 mb-8">
<!-- 快捷入口 -->
@@ -200,8 +130,8 @@
快捷入口
</h3>
<div class="grid grid-cols-2 gap-3">
<button
v-for="shortcut in shortcuts"
<button
v-for="shortcut in shortcuts"
:key="shortcut.label"
class="quick-btn flex items-center gap-2 px-4 py-3 bg-gray-50 rounded-xl text-gray-700 text-sm font-medium hover:bg-purple-500 hover:text-white transition-all"
>
@@ -210,7 +140,7 @@
</button>
</div>
</div>
<!-- 待办事项 -->
<div class="bg-white rounded-2xl p-6 card-hover shadow-sm col-span-2">
<div class="flex items-center justify-between mb-4">
@@ -222,8 +152,8 @@
<button class="text-purple-600 text-sm font-medium hover:underline">查看全部</button>
</div>
<div class="space-y-3">
<div
v-for="todo in todos"
<div
v-for="todo in todos"
:key="todo.id"
class="todo-item flex items-center gap-4 p-3 rounded-xl cursor-pointer hover:bg-purple-50 transition-all"
>
@@ -239,7 +169,7 @@
</div>
</div>
</div>
<!-- 应用模块 -->
<div class="mb-8">
<div class="flex items-center justify-between mb-6">
@@ -250,13 +180,13 @@
<button class="text-purple-600 text-sm font-medium hover:underline">自定义模块</button>
</div>
<div class="grid grid-cols-6 gap-4">
<div
v-for="app in apps"
<div
v-for="app in apps"
:key="app.name"
class="app-card bg-white rounded-2xl p-6 flex flex-col items-center justify-center card-hover cursor-pointer shadow-sm"
@click="navigateToApp(app.route)"
>
<div
<div
class="app-icon w-16 h-16 rounded-2xl flex items-center justify-center mb-4 shadow-lg"
:style="{ background: app.gradient }"
>
@@ -267,7 +197,7 @@
</div>
</div>
</div>
<!-- 底部区域 -->
<div class="grid grid-cols-2 gap-6">
<!-- 经营概览图表 -->
@@ -278,8 +208,8 @@
经营概览
</h3>
<div class="flex gap-2">
<button
v-for="period in ['本周', '本月', '本季']"
<button
v-for="period in ['本周', '本月', '本季']"
:key="period"
:class="['px-3 py-1 text-xs rounded-lg font-medium', activePeriod === period ? 'bg-purple-100 text-purple-600' : 'bg-gray-100 text-gray-600']"
@click="activePeriod = period"
@@ -289,12 +219,12 @@
</div>
</div>
<div class="h-48 flex items-end gap-4">
<div
v-for="(bar, index) in chartData"
<div
v-for="(bar, index) in chartData"
:key="index"
class="flex-1 flex flex-col items-center"
>
<div
<div
class="w-full bg-gradient-to-t from-purple-500 to-purple-300 rounded-t-lg transition-all hover:opacity-80 cursor-pointer"
:style="{ height: bar + '%' }"
></div>
@@ -302,7 +232,7 @@
</div>
</div>
</div>
<!-- 最新公告 -->
<div class="bg-white rounded-2xl p-6 card-hover shadow-sm">
<div class="flex items-center justify-between mb-6">
@@ -313,8 +243,8 @@
<button class="text-purple-600 text-sm font-medium hover:underline">全部公告</button>
</div>
<div class="space-y-4">
<div
v-for="notice in notices"
<div
v-for="notice in notices"
:key="notice.id"
:class="['p-4 rounded-xl border-l-4 cursor-pointer hover:scale-[1.02] transition-transform', notice.bgColor, notice.borderColor]"
>
@@ -334,7 +264,7 @@
</template>
<script setup lang="ts">
import { ref, computed, h } from 'vue'
import { ref, computed } from 'vue'
import {
HomeOutlined,
SettingOutlined,
@@ -344,10 +274,6 @@ import {
TeamOutlined,
ProjectOutlined,
UserOutlined,
LogoutOutlined,
ExpandOutlined,
BellOutlined,
GlobalOutlined,
ArrowUpOutlined,
CheckSquareOutlined,
ThunderboltOutlined,
@@ -367,10 +293,12 @@ import {
AuditOutlined,
ExperimentOutlined,
FileTextOutlined,
BlockOutlined,
} from '@ant-design/icons-vue'
definePageMeta({ layout: 'blank' })
// 响应式数据
const searchQuery = ref('')
const activeMenu = ref('home')
const activePeriod = ref('本周')
@@ -428,14 +356,6 @@ const notices = [
]
// 方法
const toggleFullscreen = () => {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen()
} else {
document.exitFullscreen()
}
}
const navigateToApp = (route: string) => {
navigateTo(route)
}
@@ -477,15 +397,6 @@ const navigateToApp = (route: string) => {
transition: transform 0.3s ease;
}
.notification-badge {
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.quick-btn {
transition: all 0.2s ease;
}