赵忠林
ecdc1cc986
- 新增现代化企业协同办公系统，包含概览仪表板、项目管理、任务看板和文档协同 - 使用Vue 3、TypeScript、Nuxt.js及Ant Design Vue实现前端结构和交互 - 设计响应式布局、渐变背景及毛玻璃视觉效果，优化移动端体验 - 创建设备管理页面，实现设备台账、巡检、维修和报警管理 - 新建文档协同页面，支持文档搜索、筛选、分类显示及多种视图切换 - 配置协同办公导航及布局文件，完善模块化和组件化架构 - 修复管理页语法错误，完善演示数据和统计信息展示 - 提供新建、导入、分享、重命名和删除文档等核心操作功能 - 添加设备健康度及维修记录展示模块，方便车间设备管理和维护 - 更新.gitignore忽略输出目录，提升项目环境整洁性
554 lines
12 KiB
Vue
554 lines
12 KiB
Vue
<template>
|
||
<div class="oa-home">
|
||
<!-- 头部介绍 -->
|
||
<div class="hero-section">
|
||
<div class="hero-content">
|
||
<h1 class="hero-title">协同办公系统</h1>
|
||
<p class="hero-description">
|
||
企业级团队协作平台，集项目管理、任务跟踪、文档协同于一体
|
||
</p>
|
||
<div class="hero-stats">
|
||
<div class="stat-item">
|
||
<div class="stat-number">2000+</div>
|
||
<div class="stat-label">企业使用</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number">85%</div>
|
||
<div class="stat-label">协作效率提升</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number">99.9%</div>
|
||
<div class="stat-label">系统可用率</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-image">
|
||
<span class="image-placeholder">📊</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 功能模块介绍 -->
|
||
<div class="features-section">
|
||
<h2 class="section-title">核心功能模块</h2>
|
||
<p class="section-description">全面覆盖企业团队协作需求</p>
|
||
|
||
<div class="features-grid">
|
||
<div
|
||
v-for="feature in features"
|
||
:key="feature.id"
|
||
class="feature-card"
|
||
@click="navigateTo(feature.path)"
|
||
>
|
||
<div class="feature-icon" :style="{ backgroundColor: feature.color + '10', color: feature.color }">
|
||
{{ feature.icon }}
|
||
</div>
|
||
<h3 class="feature-title">{{ feature.title }}</h3>
|
||
<p class="feature-description">{{ feature.description }}</p>
|
||
<div class="feature-tags">
|
||
<span v-for="tag in feature.tags" :key="tag" class="feature-tag">{{ tag }}</span>
|
||
</div>
|
||
<div class="feature-action">
|
||
<a-typography-link>立即体验 →</a-typography-link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 使用流程演示 -->
|
||
<div class="workflow-section">
|
||
<h2 class="section-title">典型工作流程示例</h2>
|
||
<p class="section-description">从立项到交付的一体化管理</p>
|
||
|
||
<div class="workflow-steps">
|
||
<div class="workflow-step" v-for="(step, index) in workflowSteps" :key="index">
|
||
<div class="step-number">{{ index + 1 }}</div>
|
||
<div class="step-content">
|
||
<h4>{{ step.title }}</h4>
|
||
<p>{{ step.description }}</p>
|
||
<div class="step-modules">
|
||
<a-tag
|
||
v-for="module in step.modules"
|
||
:key="module"
|
||
color="#1890ff"
|
||
@click="navigateToModule(module)"
|
||
>
|
||
{{ getModuleLabel(module) }}
|
||
</a-tag>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 立即开始按钮 -->
|
||
<div class="cta-section">
|
||
<div class="cta-content">
|
||
<h3 class="cta-title">立即开始您的协同办公之旅</h3>
|
||
<p class="cta-description">
|
||
已有数据？点击任意功能模块直接进入演示，或从概览仪表板开始
|
||
</p>
|
||
<a-space>
|
||
<a-button type="primary" size="large" @click="navigateTo('/oa')">
|
||
进入概览仪表板
|
||
</a-button>
|
||
<a-button size="large" @click="navigateTo('/oa/projects')">
|
||
直接体验项目管理
|
||
</a-button>
|
||
</a-space>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { message } from 'ant-design-vue'
|
||
|
||
// 功能模块数据
|
||
const features = [
|
||
{
|
||
id: 1,
|
||
icon: '📊',
|
||
title: '概览仪表板',
|
||
description: '团队工作状态全局概览，快速了解各项进度和统计',
|
||
tags: ['数据统计', '快捷操作', '实时通知'],
|
||
path: '/oa',
|
||
color: '#1890ff'
|
||
},
|
||
{
|
||
id: 2,
|
||
icon: '🚀',
|
||
title: '项目管理',
|
||
description: '完整项目生命周期管理，从规划到交付全过程跟踪',
|
||
tags: ['进度跟踪', '团队协作', '风险管理'],
|
||
path: '/oa/projects',
|
||
color: '#52c41a'
|
||
},
|
||
{
|
||
id: 3,
|
||
icon: '📋',
|
||
title: '任务看板',
|
||
description: '可视化任务管理，拖拽操作，实时同步团队成员任务状态',
|
||
tags: ['看板管理', '优先级管理', '进度跟踪'],
|
||
path: '/oa/tasks',
|
||
color: '#722ed1'
|
||
},
|
||
{
|
||
id: 4,
|
||
icon: '📄',
|
||
title: '文档协同',
|
||
description: '多人实时协同编辑，版本管理，企业知识库建设',
|
||
tags: ['实时协作', '版本控制', '权限管理'],
|
||
path: '/oa/documents',
|
||
color: '#fa8c16'
|
||
},
|
||
{
|
||
id: 5,
|
||
icon: '🗓️',
|
||
title: '会议管理',
|
||
description: '会议安排、纪要管理、任务分派一体化管理',
|
||
tags: ['日程管理', '会议纪要', '决议跟踪'],
|
||
path: '/oa/meetings',
|
||
color: '#f5222d'
|
||
},
|
||
{
|
||
id: 6,
|
||
icon: '✅',
|
||
title: '审批流程',
|
||
description: '自定义审批流程，多级审批，移动端快速处理',
|
||
tags: ['流程设计', '移动审批', '电子签章'],
|
||
path: '/oa/approvals',
|
||
color: '#faad14'
|
||
}
|
||
]
|
||
|
||
// 工作流程步骤
|
||
const workflowSteps = [
|
||
{
|
||
title: '项目立项与规划',
|
||
description: '创建项目，明确目标，制定计划，分配资源',
|
||
modules: ['projects', 'teams']
|
||
},
|
||
{
|
||
title: '任务分解与分配',
|
||
description: '将项目目标分解为具体任务，分配给团队成员',
|
||
modules: ['tasks', 'teams']
|
||
},
|
||
{
|
||
title: '文档协作与共享',
|
||
description: '团队协同编写文档，共享资源和知识',
|
||
modules: ['documents', 'chat']
|
||
},
|
||
{
|
||
title: '进度跟踪与会议',
|
||
description: '定期会议讨论进度，调整计划，解决问题',
|
||
modules: ['meetings', 'tasks', 'calendar']
|
||
},
|
||
{
|
||
title: '成果交付与审批',
|
||
description: '交付成果，进行质量审查和最终审批',
|
||
modules: ['approvals', 'documents']
|
||
},
|
||
{
|
||
title: '回顾总结与归档',
|
||
description: '项目复盘，总结经验，知识归档',
|
||
modules: ['documents', 'projects']
|
||
}
|
||
]
|
||
|
||
// 功能模块对应关系
|
||
const moduleLabels: Record<string, string> = {
|
||
'projects': '项目管理',
|
||
'tasks': '任务看板',
|
||
'documents': '文档协同',
|
||
'meetings': '会议管理',
|
||
'approvals': '审批流程',
|
||
'teams': '团队协作',
|
||
'calendar': '日程日历',
|
||
'chat': '即时通讯'
|
||
}
|
||
|
||
// 方法
|
||
function navigateToModule(module: string) {
|
||
const path = `/oa/${module}`
|
||
navigateTo(path)
|
||
}
|
||
|
||
function getModuleLabel(module: string) {
|
||
return moduleLabels[module] || module
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.oa-home {
|
||
min-height: calc(100vh - 140px);
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 24px 0;
|
||
}
|
||
|
||
/* Hero 区域 */
|
||
.hero-section {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 40px;
|
||
margin-bottom: 64px;
|
||
background: linear-gradient(135deg, #f6f8ff 0%, #f0f4ff 100%);
|
||
border-radius: 24px;
|
||
padding: 40px;
|
||
box-shadow: 0 8px 32px rgba(24, 144, 255, 0.08);
|
||
}
|
||
|
||
.hero-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: 40px;
|
||
font-weight: 700;
|
||
color: #1a3353;
|
||
margin-bottom: 16px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.hero-description {
|
||
font-size: 18px;
|
||
color: rgba(26, 51, 83, 0.8);
|
||
margin-bottom: 32px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.hero-stats {
|
||
display: flex;
|
||
gap: 40px;
|
||
margin-top: 32px;
|
||
}
|
||
|
||
.stat-item {
|
||
text-align: left;
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
color: #1890ff;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 14px;
|
||
color: rgba(26, 51, 83, 0.6);
|
||
}
|
||
|
||
.hero-image {
|
||
flex-shrink: 0;
|
||
width: 200px;
|
||
height: 200px;
|
||
background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
|
||
border-radius: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 16px 32px rgba(24, 144, 255, 0.3);
|
||
}
|
||
|
||
.image-placeholder {
|
||
font-size: 80px;
|
||
}
|
||
|
||
/* 功能模块区域 */
|
||
.features-section {
|
||
margin-bottom: 64px;
|
||
}
|
||
|
||
.section-title {
|
||
text-align: center;
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
color: #1a3353;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.section-description {
|
||
text-align: center;
|
||
font-size: 16px;
|
||
color: rgba(26, 51, 83, 0.6);
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
.features-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||
gap: 24px;
|
||
}
|
||
|
||
.feature-card {
|
||
background: white;
|
||
border-radius: 16px;
|
||
padding: 24px;
|
||
border: 1px solid #f0f0f0;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
}
|
||
|
||
.feature-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
|
||
border-color: transparent;
|
||
}
|
||
|
||
.feature-icon {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.feature-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #1a3353;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.feature-description {
|
||
font-size: 14px;
|
||
color: rgba(26, 51, 83, 0.7);
|
||
line-height: 1.6;
|
||
flex: 1;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.feature-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.feature-tag {
|
||
font-size: 12px;
|
||
color: #1890ff;
|
||
background: rgba(24, 144, 255, 0.1);
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.feature-action {
|
||
margin-top: auto;
|
||
}
|
||
|
||
/* 工作流程区域 */
|
||
.workflow-section {
|
||
margin-bottom: 64px;
|
||
background: #fafafa;
|
||
border-radius: 20px;
|
||
padding: 40px;
|
||
}
|
||
|
||
.workflow-steps {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24px;
|
||
}
|
||
|
||
.workflow-step {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 24px;
|
||
padding: 24px;
|
||
background: white;
|
||
border-radius: 12px;
|
||
border: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.step-number {
|
||
flex-shrink: 0;
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.step-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.step-content h4 {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #1a3353;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.step-content p {
|
||
font-size: 14px;
|
||
color: rgba(26, 51, 83, 0.7);
|
||
line-height: 1.6;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.step-modules {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.step-modules :deep(.ant-tag) {
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.step-modules :deep(.ant-tag):hover {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* CTA 区域 */
|
||
.cta-section {
|
||
text-align: center;
|
||
padding: 48px;
|
||
background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
|
||
border-radius: 20px;
|
||
color: white;
|
||
}
|
||
|
||
.cta-title {
|
||
font-size: 28px;
|
||
font-weight: 600;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.cta-description {
|
||
font-size: 16px;
|
||
opacity: 0.9;
|
||
margin-bottom: 32px;
|
||
max-width: 600px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.cta-section :deep(.ant-btn-primary:not(.ant-btn-background-ghost)) {
|
||
background: white;
|
||
border-color: white;
|
||
color: #1890ff;
|
||
}
|
||
|
||
.cta-section :deep(.ant-btn-primary:not(.ant-btn-background-ghost)):hover {
|
||
background: rgba(255, 255, 255, 0.9);
|
||
border-color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
.cta-section :deep(.ant-btn-background-ghost) {
|
||
background: transparent;
|
||
border-color: white;
|
||
color: white;
|
||
}
|
||
|
||
.cta-section :deep(.ant-btn-background-ghost):hover {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-color: white;
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 768px) {
|
||
.hero-section {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
padding: 32px 24px;
|
||
}
|
||
|
||
.hero-stats {
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
gap: 24px;
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: 32px;
|
||
}
|
||
|
||
.hero-description {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.hero-image {
|
||
width: 150px;
|
||
height: 150px;
|
||
}
|
||
|
||
.features-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.workflow-step {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.step-modules {
|
||
justify-content: center;
|
||
}
|
||
|
||
.cta-section {
|
||
padding: 32px 24px;
|
||
}
|
||
|
||
.cta-title {
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
</style> |