feat(collaboration): 添加完整协同办公模块及设备管理和文档协同页面

- 新增现代化企业协同办公系统，包含概览仪表板、项目管理、任务看板和文档协同 - 使用Vue 3、TypeScript、Nuxt.js及Ant Design Vue实现前端结构和交互 - 设计响应式布局、渐变背景及毛玻璃视觉效果，优化移动端体验 - 创建设备管理页面，实现设备台账、巡检、维修和报警管理 - 新建文档协同页面，支持文档搜索、筛选、分类显示及多种视图切换 - 配置协同办公导航及布局文件，完善模块化和组件化架构 - 修复管理页语法错误，完善演示数据和统计信息展示 - 提供新建、导入、分享、重命名和删除文档等核心操作功能 - 添加设备健康度及维修记录展示模块，方便车间设备管理和维护 - 更新.gitignore忽略输出目录，提升项目环境整洁性
2026-04-09 12:13:35 +08:00
parent a9da04fbb8
commit ecdc1cc986
12 changed files with 4199 additions and 0 deletions
--- a/app/pages/oa/documents.vue
+++ b/app/pages/oa/documents.vue
--- a/app/pages/oa/index.vue
+++ b/app/pages/oa/index.vue
@@ -0,0 +1,554 @@
+<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>