From 2b0a027bdef6e0a1cf46ce5ba88fa692736993dc Mon Sep 17 00:00:00 2001
From: Edan's Win11 <961150665@qq.com>
Date: Tue, 3 Jun 2025 21:29:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B7=A5=E4=BD=9C=E5=8F=B0=E5=92=8C?=
 =?UTF-8?q?=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sau_frontend/src/views/Dashboard.vue | 548 +++++++++++++++++++++++++++
 sau_frontend/src/views/Home.vue      | 106 ++++++
 2 files changed, 654 insertions(+)
 create mode 100644 sau_frontend/src/views/Dashboard.vue
 create mode 100644 sau_frontend/src/views/Home.vue

diff --git a/sau_frontend/src/views/Dashboard.vue b/sau_frontend/src/views/Dashboard.vue
new file mode 100644
index 0000000..da604ee
--- /dev/null
+++ b/sau_frontend/src/views/Dashboard.vue
@@ -0,0 +1,548 @@
+<template>
+  <div class="dashboard">
+    <div class="page-header">
+      <h1>自媒体自动化运营系统</h1>
+    </div>
+    
+    <div class="dashboard-content">
+      <el-row :gutter="20">
+        <!-- 账号统计卡片 -->
+        <el-col :span="6">
+          <el-card class="stat-card">
+            <div class="stat-card-content">
+              <div class="stat-icon">
+                <el-icon><User /></el-icon>
+              </div>
+              <div class="stat-info">
+                <div class="stat-value">{{ accountStats.total }}</div>
+                <div class="stat-label">账号总数</div>
+              </div>
+            </div>
+            <div class="stat-footer">
+              <div class="stat-detail">
+                <span>正常: {{ accountStats.normal }}</span>
+                <span>异常: {{ accountStats.abnormal }}</span>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+        
+        <!-- 平台统计卡片 -->
+        <el-col :span="6">
+          <el-card class="stat-card">
+            <div class="stat-card-content">
+              <div class="stat-icon platform-icon">
+                <el-icon><Platform /></el-icon>
+              </div>
+              <div class="stat-info">
+                <div class="stat-value">{{ platformStats.total }}</div>
+                <div class="stat-label">平台总数</div>
+              </div>
+            </div>
+            <div class="stat-footer">
+              <div class="stat-detail">
+                <el-tooltip content="快手账号" placement="top">
+                  <el-tag size="small" type="success">{{ platformStats.kuaishou }}</el-tag>
+                </el-tooltip>
+                <el-tooltip content="抖音账号" placement="top">
+                  <el-tag size="small" type="danger">{{ platformStats.douyin }}</el-tag>
+                </el-tooltip>
+                <el-tooltip content="视频号账号" placement="top">
+                  <el-tag size="small" type="warning">{{ platformStats.channels }}</el-tag>
+                </el-tooltip>
+                <el-tooltip content="小红书账号" placement="top">
+                  <el-tag size="small" type="info">{{ platformStats.xiaohongshu }}</el-tag>
+                </el-tooltip>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+        
+        <!-- 任务统计卡片 -->
+        <el-col :span="6">
+          <el-card class="stat-card">
+            <div class="stat-card-content">
+              <div class="stat-icon task-icon">
+                <el-icon><List /></el-icon>
+              </div>
+              <div class="stat-info">
+                <div class="stat-value">{{ taskStats.total }}</div>
+                <div class="stat-label">任务总数</div>
+              </div>
+            </div>
+            <div class="stat-footer">
+              <div class="stat-detail">
+                <span>完成: {{ taskStats.completed }}</span>
+                <span>进行中: {{ taskStats.inProgress }}</span>
+                <span>失败: {{ taskStats.failed }}</span>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+        
+        <!-- 内容统计卡片 -->
+        <el-col :span="6">
+          <el-card class="stat-card">
+            <div class="stat-card-content">
+              <div class="stat-icon content-icon">
+                <el-icon><Document /></el-icon>
+              </div>
+              <div class="stat-info">
+                <div class="stat-value">{{ contentStats.total }}</div>
+                <div class="stat-label">内容总数</div>
+              </div>
+            </div>
+            <div class="stat-footer">
+              <div class="stat-detail">
+                <span>已发布: {{ contentStats.published }}</span>
+                <span>草稿: {{ contentStats.draft }}</span>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+      
+      <!-- 快捷操作区域 -->
+      <div class="quick-actions">
+        <h2>快捷操作</h2>
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-card class="action-card" @click="navigateTo('/account-management')">
+              <div class="action-icon">
+                <el-icon><UserFilled /></el-icon>
+              </div>
+              <div class="action-title">账号管理</div>
+              <div class="action-desc">管理所有平台账号</div>
+            </el-card>
+          </el-col>
+          <el-col :span="6">
+            <el-card class="action-card">
+              <div class="action-icon">
+                <el-icon><Upload /></el-icon>
+              </div>
+              <div class="action-title">内容上传</div>
+              <div class="action-desc">上传视频和图文内容</div>
+            </el-card>
+          </el-col>
+          <el-col :span="6">
+            <el-card class="action-card">
+              <div class="action-icon">
+                <el-icon><Timer /></el-icon>
+              </div>
+              <div class="action-title">定时发布</div>
+              <div class="action-desc">设置内容发布时间</div>
+            </el-card>
+          </el-col>
+          <el-col :span="6">
+            <el-card class="action-card">
+              <div class="action-icon">
+                <el-icon><DataAnalysis /></el-icon>
+              </div>
+              <div class="action-title">数据分析</div>
+              <div class="action-desc">查看内容数据分析</div>
+            </el-card>
+          </el-col>
+        </el-row>
+      </div>
+      
+      <!-- 最近任务列表 -->
+      <div class="recent-tasks">
+        <div class="section-header">
+          <h2>最近任务</h2>
+          <el-button text>查看全部</el-button>
+        </div>
+        
+        <el-table :data="recentTasks" style="width: 100%">
+          <el-table-column prop="title" label="任务名称" width="250" />
+          <el-table-column prop="platform" label="平台" width="120">
+            <template #default="scope">
+              <el-tag
+                :type="getPlatformTagType(scope.row.platform)"
+                effect="plain"
+              >
+                {{ scope.row.platform }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="account" label="账号" width="150" />
+          <el-table-column prop="createTime" label="创建时间" width="180" />
+          <el-table-column prop="status" label="状态" width="120">
+            <template #default="scope">
+              <el-tag
+                :type="getStatusTagType(scope.row.status)"
+                effect="plain"
+              >
+                {{ scope.row.status }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作">
+            <template #default="scope">
+              <el-button size="small" @click="viewTaskDetail(scope.row)">查看</el-button>
+              <el-button 
+                size="small" 
+                type="primary" 
+                v-if="scope.row.status === '待执行'"
+                @click="executeTask(scope.row)"
+              >
+                执行
+              </el-button>
+              <el-button 
+                size="small" 
+                type="danger" 
+                v-if="scope.row.status !== '已完成' && scope.row.status !== '已失败'"
+                @click="cancelTask(scope.row)"
+              >
+                取消
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { 
+  User, UserFilled, Platform, List, Document, 
+  Upload, Timer, DataAnalysis 
+} from '@element-plus/icons-vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+const router = useRouter()
+
+// 账号统计数据
+const accountStats = reactive({
+  total: 12,
+  normal: 10,
+  abnormal: 2
+})
+
+// 平台统计数据
+const platformStats = reactive({
+  total: 4,
+  kuaishou: 3,
+  douyin: 4,
+  channels: 2,
+  xiaohongshu: 3
+})
+
+// 任务统计数据
+const taskStats = reactive({
+  total: 24,
+  completed: 18,
+  inProgress: 5,
+  failed: 1
+})
+
+// 内容统计数据
+const contentStats = reactive({
+  total: 36,
+  published: 30,
+  draft: 6
+})
+
+// 最近任务数据
+const recentTasks = ref([
+  {
+    id: 1,
+    title: '快手视频自动发布',
+    platform: '快手',
+    account: '快手账号1',
+    createTime: '2024-05-01 10:30:00',
+    status: '已完成'
+  },
+  {
+    id: 2,
+    title: '抖音视频定时发布',
+    platform: '抖音',
+    account: '抖音账号1',
+    createTime: '2024-05-01 11:15:00',
+    status: '进行中'
+  },
+  {
+    id: 3,
+    title: '视频号内容上传',
+    platform: '视频号',
+    account: '视频号账号1',
+    createTime: '2024-05-01 14:20:00',
+    status: '待执行'
+  },
+  {
+    id: 4,
+    title: '小红书图文发布',
+    platform: '小红书',
+    account: '小红书账号1',
+    createTime: '2024-05-01 16:45:00',
+    status: '已失败'
+  },
+  {
+    id: 5,
+    title: '快手短视频批量上传',
+    platform: '快手',
+    account: '快手账号2',
+    createTime: '2024-05-02 09:10:00',
+    status: '待执行'
+  }
+])
+
+// 根据平台获取标签类型
+const getPlatformTagType = (platform) => {
+  const typeMap = {
+    '快手': 'success',
+    '抖音': 'danger',
+    '视频号': 'warning',
+    '小红书': 'info'
+  }
+  return typeMap[platform] || 'info'
+}
+
+// 根据状态获取标签类型
+const getStatusTagType = (status) => {
+  const typeMap = {
+    '已完成': 'success',
+    '进行中': 'warning',
+    '待执行': 'info',
+    '已失败': 'danger'
+  }
+  return typeMap[status] || 'info'
+}
+
+// 导航到指定路由
+const navigateTo = (path) => {
+  router.push(path)
+}
+
+// 查看任务详情
+const viewTaskDetail = (task) => {
+  ElMessage.info(`查看任务: ${task.title}`)
+  // 实际应用中应该跳转到任务详情页面
+}
+
+// 执行任务
+const executeTask = (task) => {
+  ElMessageBox.confirm(
+    `确定要执行任务 ${task.title} 吗？`,
+    '提示',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'info',
+    }
+  )
+    .then(() => {
+      // 更新任务状态
+      const index = recentTasks.value.findIndex(t => t.id === task.id)
+      if (index !== -1) {
+        recentTasks.value[index].status = '进行中'
+      }
+      ElMessage({
+        type: 'success',
+        message: '任务已开始执行',
+      })
+    })
+    .catch(() => {
+      // 取消执行
+    })
+}
+
+// 取消任务
+const cancelTask = (task) => {
+  ElMessageBox.confirm(
+    `确定要取消任务 ${task.title} 吗？`,
+    '警告',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  )
+    .then(() => {
+      // 更新任务状态
+      const index = recentTasks.value.findIndex(t => t.id === task.id)
+      if (index !== -1) {
+        recentTasks.value[index].status = '已取消'
+      }
+      ElMessage({
+        type: 'success',
+        message: '任务已取消',
+      })
+    })
+    .catch(() => {
+      // 取消操作
+    })
+}
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/variables.scss' as *;
+
+.dashboard {
+  .page-header {
+    margin-bottom: 20px;
+    
+    h1 {
+      font-size: 24px;
+      color: $text-primary;
+      margin: 0;
+    }
+  }
+  
+  .dashboard-content {
+    .stat-card {
+      height: 140px;
+      margin-bottom: 20px;
+      
+      .stat-card-content {
+        display: flex;
+        align-items: center;
+        margin-bottom: 15px;
+        
+        .stat-icon {
+          width: 60px;
+          height: 60px;
+          border-radius: 50%;
+          background-color: rgba($primary-color, 0.1);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-right: 15px;
+          
+          .el-icon {
+            font-size: 30px;
+            color: $primary-color;
+          }
+          
+          &.platform-icon {
+            background-color: rgba($success-color, 0.1);
+            
+            .el-icon {
+              color: $success-color;
+            }
+          }
+          
+          &.task-icon {
+            background-color: rgba($warning-color, 0.1);
+            
+            .el-icon {
+              color: $warning-color;
+            }
+          }
+          
+          &.content-icon {
+            background-color: rgba($info-color, 0.1);
+            
+            .el-icon {
+              color: $info-color;
+            }
+          }
+        }
+        
+        .stat-info {
+          .stat-value {
+            font-size: 24px;
+            font-weight: bold;
+            color: $text-primary;
+            line-height: 1.2;
+          }
+          
+          .stat-label {
+            font-size: 14px;
+            color: $text-secondary;
+          }
+        }
+      }
+      
+      .stat-footer {
+        border-top: 1px solid $border-lighter;
+        padding-top: 10px;
+        
+        .stat-detail {
+          display: flex;
+          justify-content: space-between;
+          color: $text-secondary;
+          font-size: 13px;
+          
+          .el-tag {
+            margin-right: 5px;
+          }
+        }
+      }
+    }
+    
+    .quick-actions {
+      margin: 20px 0 30px;
+      
+      h2 {
+        font-size: 18px;
+        margin-bottom: 15px;
+        color: $text-primary;
+      }
+      
+      .action-card {
+        height: 160px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: all 0.3s;
+        
+        &:hover {
+          transform: translateY(-5px);
+          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+        }
+        
+        .action-icon {
+          width: 50px;
+          height: 50px;
+          border-radius: 50%;
+          background-color: rgba($primary-color, 0.1);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-bottom: 15px;
+          
+          .el-icon {
+            font-size: 24px;
+            color: $primary-color;
+          }
+        }
+        
+        .action-title {
+          font-size: 16px;
+          font-weight: bold;
+          color: $text-primary;
+          margin-bottom: 5px;
+        }
+        
+        .action-desc {
+          font-size: 13px;
+          color: $text-secondary;
+          text-align: center;
+        }
+      }
+    }
+    
+    .recent-tasks {
+      margin-top: 30px;
+      
+      .section-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 15px;
+        
+        h2 {
+          font-size: 18px;
+          color: $text-primary;
+          margin: 0;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/sau_frontend/src/views/Home.vue b/sau_frontend/src/views/Home.vue
new file mode 100644
index 0000000..90373ab
--- /dev/null
+++ b/sau_frontend/src/views/Home.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="home">
+    <div class="welcome-section">
+      <h1>欢迎使用 Vue3 + Vite 项目</h1>
+      <p>这是一个集成了 Vue3、Vite、Element Plus、Pinia、Vue Router 和 Axios 的现代化前端项目</p>
+      <div class="features">
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-card class="feature-card">
+              <template #header>
+                <div class="card-header">
+                  <el-icon><Lightning /></el-icon>
+                  <span>快速开发</span>
+                </div>
+              </template>
+              <p>基于 Vite 构建，提供极速的开发体验</p>
+            </el-card>
+          </el-col>
+          <el-col :span="8">
+            <el-card class="feature-card">
+              <template #header>
+                <div class="card-header">
+                  <el-icon><Star /></el-icon>
+                  <span>现代化</span>
+                </div>
+              </template>
+              <p>使用 Vue3 Composition API 和 setup 语法</p>
+            </el-card>
+          </el-col>
+          <el-col :span="8">
+            <el-card class="feature-card">
+              <template #header>
+                <div class="card-header">
+                  <el-icon><Setting /></el-icon>
+                  <span>完整配置</span>
+                </div>
+              </template>
+              <p>集成路由、状态管理、HTTP请求等完整解决方案</p>
+            </el-card>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    
+    <div class="demo-section">
+      <HelloWorld msg="Vue3 + Vite + Element Plus" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import HelloWorld from '../components/HelloWorld.vue'
+import { Lightning, Star, Setting } from '@element-plus/icons-vue'
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/variables.scss' as *;
+
+.home {
+  .welcome-section {
+    text-align: center;
+    margin-bottom: 3rem;
+    
+    h1 {
+      color: #2c3e50;
+      margin-bottom: 1rem;
+      font-size: 2.5rem;
+    }
+    
+    p {
+      color: #7f8c8d;
+      font-size: 1.2rem;
+      margin-bottom: 2rem;
+    }
+    
+    .features {
+      margin-top: 2rem;
+      
+      .feature-card {
+        height: 200px;
+        
+        .card-header {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          font-weight: bold;
+          
+          .el-icon {
+            color: #409eff;
+          }
+        }
+        
+        p {
+          color: #666;
+          font-size: 1rem;
+          line-height: 1.6;
+        }
+      }
+    }
+  }
+  
+  .demo-section {
+    margin-top: 3rem;
+  }
+}
+</style>
\ No newline at end of file