From 0ac826622879a8a9e5f03ce33ebd76d26ca94104 Mon Sep 17 00:00:00 2001
From: lynn <lynnlinyong@qq.com>
Date: Fri, 20 Jun 2025 19:20:20 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=BA=A4=E4=BA=92=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1=E5=92=8C=E4=BE=9B=E5=BA=94=E9=9C=80=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/student/interaction_stats.vue | 714 ++++++++++++++++++++++++
 src/views/student/supply_demand.vue     | 407 ++++++++++++++
 2 files changed, 1121 insertions(+)
 create mode 100644 src/views/student/interaction_stats.vue
 create mode 100644 src/views/student/supply_demand.vue

diff --git a/src/views/student/interaction_stats.vue b/src/views/student/interaction_stats.vue
new file mode 100644
index 0000000..4de2045
--- /dev/null
+++ b/src/views/student/interaction_stats.vue
@@ -0,0 +1,714 @@
+<template>
+  <div class="interaction-stats">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h2 class="page-title">
+        <i class="el-icon-s-data"></i>
+        交互统计
+      </h2>
+      <div class="time-selector">
+        <el-button
+          v-for="(btn, index) in timeButtons"
+          :key="index"
+          :type="btn.active ? 'primary' : 'default'"
+          size="small"
+          @click="setTimeRange(btn.value)"
+        >
+          {{ btn.label }}
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 筛选区域 -->
+    <div class="filter-section">
+      <el-form :model="filter" label-position="top">
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item label="时间范围" prop="timeRange">
+              <el-select v-model="filter.timeRange" placeholder="请选择时间范围" style="width: 100%;">
+                <el-option label="最近7天" :value="7"></el-option>
+                <el-option label="最近30天" :value="30"></el-option>
+                <el-option label="最近90天" :value="90"></el-option>
+                <el-option label="最近一年" :value="365"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="交互类型" prop="interactionType">
+              <el-select v-model="filter.interactionType" placeholder="请选择交互类型" clearable style="width: 100%;">
+                <el-option label="全部类型" value=""></el-option>
+                <el-option label="查看" value="view"></el-option>
+                <el-option label="私信" value="message"></el-option>
+                <el-option label="联系" value="contact"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="供需类型" prop="supplyType">
+              <el-select v-model="filter.supplyType" placeholder="请选择供需类型" clearable style="width: 100%;">
+                <el-option label="全部" value=""></el-option>
+                <el-option label="供应" value="supply"></el-option>
+                <el-option label="需求" value="demand"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="操作">
+              <el-button type="primary" @click="updateStats">更新统计</el-button>
+              <el-button type="success" @click="exportStats">导出报告</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+
+    <!-- 统计概览 -->
+    <div class="stats-overview">
+      <div
+        v-for="(stat, index) in statsData"
+        :key="index"
+        class="stat-card"
+        :class="stat.type"
+      >
+        <div class="stat-header">
+          <div class="stat-title">{{ stat.title }}</div>
+          <div class="stat-icon" :class="'icon-' + stat.type">
+            <i :class="stat.icon"></i>
+          </div>
+        </div>
+        <div class="stat-value">{{ stat.value }}</div>
+        <div class="stat-change" :class="stat.changeType">
+          <i :class="stat.changeIcon"></i>
+          <span>{{ stat.changeText }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 交互趋势图表 -->
+    <div class="chart-section">
+      <div class="section-title">
+        交互趋势分析
+        <small class="text-muted">最近30天交互数据变化</small>
+      </div>
+      <div class="chart-container" ref="trendChart"></div>
+    </div>
+
+    <!-- 交互类型分布 -->
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <div class="chart-section">
+          <div class="section-title">交互类型分布</div>
+          <div class="chart-container" ref="typeChart" style="height: 300px;"></div>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="chart-section">
+          <div class="section-title">用户活跃度分析</div>
+          <div class="chart-container" ref="userChart" style="height: 300px;"></div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <!-- 详细交互记录 -->
+    <div class="chart-section">
+      <div class="section-title">
+        交互详情记录
+        <small class="text-muted">仅统计会话记录，不监测会话内容</small>
+      </div>
+      <div class="data-table">
+        <el-table :data="interactionList" style="width: 100%">
+          <el-table-column label="用户信息" width="200">
+            <template slot-scope="scope">
+              <div class="user-info">
+                <div class="user-avatar">{{ scope.row.userName.charAt(0) }}</div>
+                <div>
+                  <div class="user-name">{{ scope.row.userName }}</div>
+                  <div class="user-year">{{ scope.row.userYear }}届</div>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="目标用户" width="200">
+            <template slot-scope="scope">
+              <div class="user-info">
+                <div class="user-avatar">{{ scope.row.targetName.charAt(0) }}</div>
+                <div>
+                  <div class="user-name">{{ scope.row.targetName }}</div>
+                  <div class="user-year">{{ scope.row.targetYear }}届</div>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="交互类型" width="120">
+            <template slot-scope="scope">
+              <el-tag
+                :type="getInteractionTagType(scope.row.type)"
+                size="small"
+              >
+                {{ scope.row.typeText }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="供需信息" width="250">
+            <template slot-scope="scope">
+              <div class="supply-info">
+                <div class="supply-title">{{ scope.row.supplyTitle }}</div>
+                <div class="supply-type">{{ scope.row.supplyType }}</div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="交互时间" width="150">
+            <template slot-scope="scope">
+              <div class="interaction-time">{{ scope.row.time }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" width="100">
+            <template slot-scope="scope">
+              <el-tag
+                :type="getStatusTagType(scope.row.status)"
+                size="small"
+              >
+                {{ scope.row.statusText }}
+              </el-tag>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'InteractionStats',
+  data() {
+    return {
+      timeButtons: [
+        { label: '今日', value: 'today', active: false },
+        { label: '本周', value: 'week', active: true },
+        { label: '本月', value: 'month', active: false },
+        { label: '本季度', value: 'quarter', active: false }
+      ],
+      filter: {
+        timeRange: 30,
+        interactionType: '',
+        supplyType: ''
+      },
+      statsData: [
+        {
+          title: '总交互次数',
+          value: '1,247',
+          changeText: '+12.5% 较上月',
+          changeType: 'change-up',
+          changeIcon: 'el-icon-arrow-up',
+          type: 'blue',
+          icon: 'el-icon-chat-dot-round'
+        },
+        {
+          title: '活跃用户数',
+          value: '186',
+          changeText: '+8.3% 较上月',
+          changeType: 'change-up',
+          changeIcon: 'el-icon-arrow-up',
+          type: 'green',
+          icon: 'el-icon-user'
+        },
+        {
+          title: '私信发送量',
+          value: '562',
+          changeText: '+15.7% 较上月',
+          changeType: 'change-up',
+          changeIcon: 'el-icon-arrow-up',
+          type: 'orange',
+          icon: 'el-icon-message'
+        },
+        {
+          title: '成功匹配数',
+          value: '89',
+          changeText: '+22.1% 较上月',
+          changeType: 'change-up',
+          changeIcon: 'el-icon-arrow-up',
+          type: 'purple',
+          icon: 'el-icon-check'
+        }
+      ],
+      interactionList: [
+        {
+          userName: '张总',
+          userYear: '2010',
+          targetName: '李经理',
+          targetYear: '2015',
+          type: 'message',
+          typeText: '私信',
+          supplyTitle: '寻找技术合作伙伴',
+          supplyType: '需求类型',
+          time: '2024-01-15 14:30',
+          status: 'replied',
+          statusText: '已回复'
+        },
+        {
+          userName: '王顾问',
+          userYear: '2008',
+          targetName: '赵总',
+          targetYear: '2012',
+          type: 'view',
+          typeText: '查看',
+          supplyTitle: '投融资咨询服务',
+          supplyType: '供应类型',
+          time: '2024-01-15 13:45',
+          status: 'viewed',
+          statusText: '已查看'
+        },
+        {
+          userName: '陈经理',
+          userYear: '2018',
+          targetName: '孙总',
+          targetYear: '2005',
+          type: 'contact',
+          typeText: '联系',
+          supplyTitle: '企业管理咨询',
+          supplyType: '供应类型',
+          time: '2024-01-15 11:20',
+          status: 'processing',
+          statusText: '进行中'
+        }
+      ],
+      charts: {
+        trendChart: null,
+        typeChart: null,
+        userChart: null
+      }
+    }
+  },
+  mounted() {
+    this.initCharts()
+    this.$nextTick(() => {
+      window.addEventListener('resize', this.handleResize)
+    })
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize)
+    Object.values(this.charts).forEach(chart => {
+      if (chart) {
+        chart.dispose()
+      }
+    })
+  },
+  methods: {
+    setTimeRange(range) {
+      this.timeButtons.forEach(btn => {
+        btn.active = btn.value === range
+      })
+      this.updateStats()
+    },
+    updateStats() {
+      console.log('更新统计数据:', this.filter)
+      this.$message.success('统计数据已更新')
+    },
+    exportStats() {
+      console.log('导出统计报告')
+      this.$message.info('统计报告正在生成，请稍候...')
+    },
+    getInteractionTagType(type) {
+      const typeMap = {
+        message: 'primary',
+        view: 'success',
+        contact: 'warning'
+      }
+      return typeMap[type] || 'info'
+    },
+    getStatusTagType(status) {
+      const statusMap = {
+        replied: 'success',
+        viewed: 'info',
+        processing: 'primary'
+      }
+      return statusMap[status] || 'info'
+    },
+    initCharts() {
+      this.initTrendChart()
+      this.initTypeChart()
+      this.initUserChart()
+    },
+    initTrendChart() {
+      const chartDom = this.$refs.trendChart
+      if (!chartDom) return
+
+      this.charts.trendChart = echarts.init(chartDom)
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(0,0,0,0.8)',
+          borderColor: 'transparent',
+          textStyle: { color: '#fff' }
+        },
+        legend: {
+          data: ['查看次数', '私信次数', '联系次数'],
+          bottom: 10
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['1/9', '1/10', '1/11', '1/12', '1/13', '1/14', '1/15', '1/16', '1/17', '1/18', '1/19', '1/20', '1/21']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: '查看次数',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            data: [45, 52, 48, 61, 55, 67, 72, 68, 75, 81, 77, 89, 95],
+            itemStyle: { color: '#3498db' }
+          },
+          {
+            name: '私信次数',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            data: [23, 28, 25, 32, 29, 35, 38, 34, 41, 45, 42, 48, 52],
+            itemStyle: { color: '#2ecc71' }
+          },
+          {
+            name: '联系次数',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            data: [12, 15, 13, 18, 16, 21, 24, 22, 27, 31, 28, 34, 38],
+            itemStyle: { color: '#f39c12' }
+          }
+        ]
+      }
+      this.charts.trendChart.setOption(option)
+    },
+    initTypeChart() {
+      const chartDom = this.$refs.typeChart
+      if (!chartDom) return
+
+      this.charts.typeChart = echarts.init(chartDom)
+      const option = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        series: [
+          {
+            name: '交互类型',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 2
+            },
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '18',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 562, name: '私信', itemStyle: { color: '#3498db' }},
+              { value: 425, name: '查看', itemStyle: { color: '#2ecc71' }},
+              { value: 260, name: '联系', itemStyle: { color: '#f39c12' }}
+            ]
+          }
+        ]
+      }
+      this.charts.typeChart.setOption(option)
+    },
+    initUserChart() {
+      const chartDom = this.$refs.userChart
+      if (!chartDom) return
+
+      this.charts.userChart = echarts.init(chartDom)
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: ['低活跃', '中活跃', '高活跃', '超活跃']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: [
+              { value: 45, itemStyle: { color: '#95a5a6' }},
+              { value: 82, itemStyle: { color: '#3498db' }},
+              { value: 41, itemStyle: { color: '#2ecc71' }},
+              { value: 18, itemStyle: { color: '#e74c3c' }}
+            ],
+            type: 'bar',
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          }
+        ]
+      }
+      this.charts.userChart.setOption(option)
+    },
+    handleResize() {
+      Object.values(this.charts).forEach(chart => {
+        if (chart) {
+          chart.resize()
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.interaction-stats {
+  padding: 20px;
+  background-color: #f8f9fa;
+  min-height: 100vh;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30px;
+  padding-bottom: 15px;
+  border-bottom: 2px solid #e9ecef;
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #2c3e50;
+  display: flex;
+  align-items: center;
+  margin: 0;
+
+  i {
+    margin-right: 10px;
+    color: #3498db;
+  }
+}
+
+.time-selector {
+  display: flex;
+  gap: 10px;
+}
+
+.filter-section {
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.stats-overview {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.stat-card {
+  background: white;
+  border-radius: 12px;
+  padding: 25px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  border-left: 4px solid;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+  }
+
+  &.blue {
+    border-left-color: #3498db;
+  }
+
+  &.green {
+    border-left-color: #2ecc71;
+  }
+
+  &.orange {
+    border-left-color: #f39c12;
+  }
+
+  &.purple {
+    border-left-color: #9b59b6;
+  }
+}
+
+.stat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 15px;
+}
+
+.stat-title {
+  font-size: 14px;
+  color: #7f8c8d;
+  font-weight: 500;
+}
+
+.stat-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  color: white;
+
+  &.icon-blue { background: #3498db; }
+  &.icon-green { background: #2ecc71; }
+  &.icon-orange { background: #f39c12; }
+  &.icon-purple { background: #9b59b6; }
+}
+
+.stat-value {
+  font-size: 32px;
+  font-weight: bold;
+  color: #2c3e50;
+  margin-bottom: 5px;
+}
+
+.stat-change {
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  &.change-up {
+    color: #27ae60;
+  }
+
+  &.change-down {
+    color: #e74c3c;
+  }
+}
+
+.chart-section {
+  background: white;
+  border-radius: 12px;
+  padding: 25px;
+  margin-bottom: 30px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #2c3e50;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  small {
+    font-size: 12px;
+    color: #6c757d;
+    font-weight: normal;
+  }
+}
+
+.chart-container {
+  height: 350px;
+  width: 100%;
+}
+
+.data-table {
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.user-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.user-name {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.user-year {
+  font-size: 12px;
+  color: #666;
+}
+
+.supply-info {
+  max-width: 200px;
+}
+
+.supply-title {
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.supply-type {
+  font-size: 11px;
+  color: #666;
+}
+
+.interaction-time {
+  font-size: 12px;
+}
+
+.text-muted {
+  color: #6c757d;
+}
+</style>
diff --git a/src/views/student/supply_demand.vue b/src/views/student/supply_demand.vue
new file mode 100644
index 0000000..b3b7496
--- /dev/null
+++ b/src/views/student/supply_demand.vue
@@ -0,0 +1,407 @@
+<template>
+  <div class="supply-demand-container">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h2 class="page-title">
+        <i class="el-icon-s-comment"></i>
+        供需管理
+      </h2>
+      <div>
+        <el-tag type="danger">{{ pendingCount }}</el-tag>
+        <small class="text-muted">待审核</small>
+      </div>
+    </div>
+
+    <!-- 搜索区域 -->
+    <div class="search-section">
+      <el-form :model="filters" inline>
+        <el-form-item>
+          <el-input v-model="filters.keyword" placeholder="搜索标题、内容或用户名"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-select v-model="filters.status" placeholder="全部状态" clearable>
+            <el-option label="待审核" value="pending"></el-option>
+            <el-option label="已通过" value="approved"></el-option>
+            <el-option label="已拒绝" value="rejected"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-select v-model="filters.type" placeholder="全部类型" clearable>
+            <el-option label="供应" value="supply"></el-option>
+            <el-option label="需求" value="demand"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-date-picker v-model="filters.date" type="date" placeholder="选择日期"></el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="success" icon="el-icon-download" @click="handleExport">导出数据</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!-- 供需列表表格 -->
+    <div class="table-container">
+      <el-table
+        :data="list"
+        @selection-change="handleSelectionChange"
+        style="width: 100%"
+      >
+        <el-table-column type="selection" width="55"></el-table-column>
+        <el-table-column type="index" label="序号" width="80"></el-table-column>
+        <el-table-column label="供需信息" min-width="250">
+          <template slot-scope="scope">
+            <div class="supply-title">{{ scope.row.title }}</div>
+            <div class="supply-desc">{{ scope.row.description }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="类型" width="100">
+          <template slot-scope="scope">
+            <el-tag :type="scope.row.type === 'supply' ? 'success' : 'primary'" size="small">{{ scope.row.typeText }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="发布者" width="150">
+          <template slot-scope="scope">
+            <div class="user-info">
+              <div class="user-avatar">{{ scope.row.publisher.name.charAt(0) }}</div>
+              <div>
+                <div class="user-name">{{ scope.row.publisher.name }}</div>
+                <div class="user-year">{{ scope.row.publisher.year }}届</div>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="120">
+          <template slot-scope="scope">
+            <el-tag :type="getStatusTagType(scope.row.status)" size="small">{{ scope.row.statusText }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="优先级" width="100">
+          <template slot-scope="scope">
+            <el-tag :type="getPriorityTagType(scope.row.priority)" size="small">{{ scope.row.priorityText }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="发布时间" width="150">
+          <template slot-scope="scope">
+            <div class="time-display">{{ scope.row.publishDate }}</div>
+            <div class="time-display-secondary">{{ scope.row.publishTime }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="审核时间" width="150">
+          <template slot-scope="scope">
+            <div v-if="scope.row.auditDate">
+              <div class="time-display">{{ scope.row.auditDate }}</div>
+              <div class="time-display-secondary">{{ scope.row.auditTime }}</div>
+            </div>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="170" fixed="right">
+          <template slot-scope="scope">
+            <div class="action-buttons">
+              <el-button v-if="scope.row.status === 'pending' || scope.row.status === 'rejected'" type="success" size="mini" icon="el-icon-check" @click="handleApprove(scope.row)">通过</el-button>
+              <el-button v-if="scope.row.status === 'approved'" type="info" size="mini" icon="el-icon-remove-outline" @click="handleHide(scope.row)">隐藏</el-button>
+              <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
+              <el-button v-if="scope.row.status === 'pending'" type="danger" size="mini" icon="el-icon-close" @click="handleReject(scope.row)">拒绝</el-button>
+              <el-button type="info" size="mini" icon="el-icon-view" @click="handleView(scope.row)">详情</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!-- 分页区域 -->
+    <div class="pagination-container">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="listQuery.page"
+        :page-sizes="[10, 20, 50]"
+        :page-size="listQuery.limit"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      ></el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SupplyDemand',
+  data() {
+    return {
+      pendingCount: 3,
+      filters: {
+        keyword: '',
+        status: '',
+        type: '',
+        date: ''
+      },
+      list: [
+        {
+          id: 1,
+          title: '提供企业管理咨询服务',
+          description: '专业企业管理咨询团队，具有10年以上行业经验...',
+          type: 'supply',
+          typeText: '供应',
+          publisher: { name: '张总', year: '2010' },
+          status: 'pending',
+          statusText: '待审核',
+          priority: 'high',
+          priorityText: '高',
+          publishDate: '2024-01-15',
+          publishTime: '14:30',
+          auditDate: null,
+          auditTime: null
+        },
+        {
+          id: 2,
+          title: '寻找技术合作伙伴',
+          description: '我们是一家初创公司，目前在开发一款AI智能客服产品...',
+          type: 'demand',
+          typeText: '需求',
+          publisher: { name: '李经理', year: '2015' },
+          status: 'approved',
+          statusText: '已通过',
+          priority: 'medium',
+          priorityText: '中',
+          publishDate: '2024-01-14',
+          publishTime: '16:45',
+          auditDate: '2024-01-14',
+          auditTime: '17:20'
+        },
+        {
+          id: 3,
+          title: '投融资咨询服务',
+          description: '专业投融资顾问，为企业提供全方位的融资解决方案...',
+          type: 'supply',
+          typeText: '供应',
+          publisher: { name: '王顾问', year: '2008' },
+          status: 'rejected',
+          statusText: '已拒绝',
+          priority: 'low',
+          priorityText: '低',
+          publishDate: '2024-01-13',
+          publishTime: '09:15',
+          auditDate: '2024-01-13',
+          auditTime: '10:30'
+        }
+      ],
+      total: 156,
+      listQuery: {
+        page: 1,
+        limit: 10
+      },
+      multipleSelection: []
+    }
+  },
+  methods: {
+    handleSearch() {
+      console.log('搜索条件:', this.filters)
+      this.$message.success('搜索已触发')
+    },
+    handleExport() {
+      console.log('导出数据')
+      this.$message.info('数据导出中...')
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    getStatusTagType(status) {
+      const statusMap = {
+        pending: 'warning',
+        approved: 'success',
+        rejected: 'danger'
+      }
+      return statusMap[status]
+    },
+    getPriorityTagType(priority) {
+      const priorityMap = {
+        high: 'danger',
+        medium: 'warning',
+        low: 'success'
+      }
+      return priorityMap[priority]
+    },
+    handleApprove(row) {
+      this.$confirm('确定要通过这条供需信息吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'success'
+      }).then(() => {
+        console.log('审核通过:', row.id)
+        // API call here
+        row.status = 'approved'
+        row.statusText = '已通过'
+        this.$message.success('审核通过成功！')
+      })
+    },
+    handleEdit(row) {
+      console.log('编辑:', row.id)
+      this.$message.info('跳转到编辑页面')
+    },
+    handleReject(row) {
+      this.$prompt('请输入拒绝原因：', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(({ value }) => {
+        console.log('拒绝:', row.id, '原因:', value)
+        // API call here
+        row.status = 'rejected'
+        row.statusText = '已拒绝'
+        this.$message.success('已拒绝该供需信息！')
+      })
+    },
+    handleHide(row) {
+      this.$confirm('确定要隐藏这条供需信息吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'info'
+      }).then(() => {
+        console.log('隐藏:', row.id)
+        // API call here
+        this.$message.success('供需信息已隐藏！')
+      })
+    },
+    handleView(row) {
+      console.log('查看详情:', row.id)
+      this.$message.info('跳转到详情页面')
+    },
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      // getList()
+    },
+    handleCurrentChange(val) {
+      this.listQuery.page = val
+      // getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.supply-demand-container {
+  padding: 20px;
+  background-color: #fff;
+  margin: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 15px;
+  border-bottom: 2px solid #e9ecef;
+  
+  .page-title {
+    font-size: 24px;
+    font-weight: bold;
+    color: #2c3e50;
+    display: flex;
+    align-items: center;
+    margin: 0;
+    
+    i {
+      margin-right: 10px;
+      color: #3498db;
+    }
+  }
+
+  .text-muted {
+    margin-left: 5px;
+    color: #6c757d;
+  }
+}
+
+.search-section {
+  background: #f8f9fa;
+  padding: 20px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+.table-container {
+  background: white;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.supply-title {
+  font-weight: 600;
+  color: #2c3e50;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.supply-desc {
+  font-size: 12px;
+  color: #6c757d;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.user-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.user-name {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.user-year {
+  font-size: 11px;
+  color: #666;
+}
+
+.time-display {
+  font-size: 12px;
+}
+
+.time-display-secondary {
+  font-size: 11px;
+  color: #666;
+}
+
+.action-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+
+  .el-button {
+    margin: 0;
+  }
+}
+
+.pagination-container {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 20px 0;
+}
+</style>