From 15d06266b7c4546ced76146c34ee414e6bfff166 Mon Sep 17 00:00:00 2001
From: lewis_yan <lewis_yan@avc.co>
Date: Wed, 1 Apr 2026 19:09:24 +0800
Subject: [PATCH] feat(dashboard): add dashboard Vue components

---
 .../pisadmin/dashboard/BuyerTaskList.vue      | 43 +++++++++++++
 .../components/pisadmin/dashboard/KpiCard.vue | 57 +++++++++++++++++
 .../pisadmin/dashboard/MessageList.vue        | 51 +++++++++++++++
 .../pisadmin/dashboard/SupplierQuoteList.vue  | 38 ++++++++++++
 .../pisadmin/dashboard/TrendChart.vue         | 62 +++++++++++++++++++
 5 files changed, 251 insertions(+)
 create mode 100644 web/src/components/pisadmin/dashboard/BuyerTaskList.vue
 create mode 100644 web/src/components/pisadmin/dashboard/KpiCard.vue
 create mode 100644 web/src/components/pisadmin/dashboard/MessageList.vue
 create mode 100644 web/src/components/pisadmin/dashboard/SupplierQuoteList.vue
 create mode 100644 web/src/components/pisadmin/dashboard/TrendChart.vue

diff --git a/web/src/components/pisadmin/dashboard/BuyerTaskList.vue b/web/src/components/pisadmin/dashboard/BuyerTaskList.vue
new file mode 100644
index 0000000..5839c7e
--- /dev/null
+++ b/web/src/components/pisadmin/dashboard/BuyerTaskList.vue
@@ -0,0 +1,43 @@
+<template>
+  <el-table :data="tasks" stripe style="width: 100%">
+    <el-table-column prop="inquiry_no" label="询价单号" width="120" />
+    <el-table-column prop="title" label="标题" />
+    <el-table-column prop="status" label="状态" width="100">
+      <template #default="{ row }">
+        <el-tag :type="getStatusType(row.status)">{{ row.status }}</el-tag>
+      </template>
+    </el-table-column>
+    <el-table-column prop="created_at" label="创建时间" width="180">
+      <template #default="{ row }">
+        {{ formatDate(row.created_at) }}
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  tasks: Array<{
+    id: number;
+    title: string;
+    inquiry_no: string;
+    status: string;
+    created_at: string;
+  }>;
+}>();
+
+function getStatusType(status: string) {
+  const map: Record<string, string> = {
+    '开立': 'info',
+    '确认': 'warning',
+    '发布': 'primary',
+    '报价中': 'success',
+  };
+  return map[status] || 'info';
+}
+
+function formatDate(date: string) {
+  if (!date) return '';
+  return new Date(date).toLocaleString();
+}
+</script>
diff --git a/web/src/components/pisadmin/dashboard/KpiCard.vue b/web/src/components/pisadmin/dashboard/KpiCard.vue
new file mode 100644
index 0000000..ff42d95
--- /dev/null
+++ b/web/src/components/pisadmin/dashboard/KpiCard.vue
@@ -0,0 +1,57 @@
+<template>
+  <el-card class="kpi-card" shadow="hover">
+    <div class="kpi-content">
+      <div class="kpi-icon" :style="{ background: iconBg }">
+        <i :class="icon" :style="{ color: iconColor }"></i>
+      </div>
+      <div class="kpi-info">
+        <div class="kpi-value">{{ value }}</div>
+        <div class="kpi-label">{{ label }}</div>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  value: number | string;
+  label: string;
+  icon: string;
+  iconBg?: string;
+  iconColor?: string;
+}>();
+</script>
+
+<style scoped lang="scss">
+.kpi-card {
+  border-radius: 12px;
+  .kpi-content {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+  .kpi-icon {
+    width: 56px;
+    height: 56px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    i {
+      font-size: 28px;
+    }
+  }
+  .kpi-info {
+    .kpi-value {
+      font-size: 28px;
+      font-weight: 700;
+      color: var(--el-text-color-primary);
+    }
+    .kpi-label {
+      font-size: 14px;
+      color: var(--el-text-color-secondary);
+      margin-top: 4px;
+    }
+  }
+}
+</style>
diff --git a/web/src/components/pisadmin/dashboard/MessageList.vue b/web/src/components/pisadmin/dashboard/MessageList.vue
new file mode 100644
index 0000000..b903cfc
--- /dev/null
+++ b/web/src/components/pisadmin/dashboard/MessageList.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="message-list">
+    <div v-for="msg in messages" :key="msg.id" class="message-item">
+      <el-badge :is-dot="!msg.is_read" class="message-badge">
+        <div class="message-content">
+          <div class="message-title">{{ msg.title }}</div>
+          <div class="message-time">{{ formatTime(msg.created_at) }}</div>
+        </div>
+      </el-badge>
+    </div>
+    <el-empty v-if="messages.length === 0" description="暂无消息" :image-size="60" />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  messages: Array<{
+    id: number;
+    title: string;
+    content: string;
+    is_read: boolean;
+    created_at: string;
+  }>;
+}>();
+
+function formatTime(time: string) {
+  if (!time) return '';
+  return new Date(time).toLocaleDateString();
+}
+</script>
+
+<style scoped lang="scss">
+.message-list {
+  .message-item {
+    padding: 12px 0;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+    &:last-child { border-bottom: none; }
+  }
+  .message-content {
+    .message-title {
+      font-size: 14px;
+      color: var(--el-text-color-primary);
+    }
+    .message-time {
+      font-size: 12px;
+      color: var(--el-text-color-secondary);
+      margin-top: 4px;
+    }
+  }
+}
+</style>
diff --git a/web/src/components/pisadmin/dashboard/SupplierQuoteList.vue b/web/src/components/pisadmin/dashboard/SupplierQuoteList.vue
new file mode 100644
index 0000000..598b89c
--- /dev/null
+++ b/web/src/components/pisadmin/dashboard/SupplierQuoteList.vue
@@ -0,0 +1,38 @@
+<template>
+  <el-table :data="quotes" stripe style="width: 100%">
+    <el-table-column prop="inquiry_no" label="询价单号" width="120" />
+    <el-table-column prop="item_name" label="产品名称" />
+    <el-table-column prop="quantity" label="数量" width="80" />
+    <el-table-column prop="unit" label="单位" width="80" />
+    <el-table-column prop="deadline" label="报价截止时间" width="180">
+      <template #default="{ row }">
+        {{ formatDate(row.deadline) }}
+      </template>
+    </el-table-column>
+    <el-table-column label="操作" width="100" fixed="right">
+      <template #default="{ row }">
+        <el-button type="primary" link @click="$emit('quote', row)">去报价</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  quotes: Array<{
+    id: number;
+    inquiry_no: string;
+    item_name: string;
+    quantity: number;
+    unit: string;
+    deadline: string;
+  }>;
+}>();
+
+defineEmits(['quote']);
+
+function formatDate(date: string) {
+  if (!date) return '';
+  return new Date(date).toLocaleString();
+}
+</script>
diff --git a/web/src/components/pisadmin/dashboard/TrendChart.vue b/web/src/components/pisadmin/dashboard/TrendChart.vue
new file mode 100644
index 0000000..956500a
--- /dev/null
+++ b/web/src/components/pisadmin/dashboard/TrendChart.vue
@@ -0,0 +1,62 @@
+<template>
+  <div ref="chartRef" class="trend-chart"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import * as echarts from 'echarts';
+
+const props = defineProps<{
+  data: Array<{ month: string; count?: number; quotes?: number; won?: number }>;
+  type: 'buyer' | 'supplier';
+}>();
+
+const chartRef = ref();
+
+function initChart() {
+  if (!chartRef.value) return;
+  const chart = echarts.init(chartRef.value);
+
+  const xData = props.data.map(d => d.month);
+
+  if (props.type === 'buyer') {
+    const yData = props.data.map(d => d.count || 0);
+    chart.setOption({
+      title: { text: '业务趋势', left: 'left' },
+      tooltip: { trigger: 'axis' },
+      xAxis: { type: 'category', data: xData },
+      yAxis: { type: 'value' },
+      series: [{
+        type: 'line',
+        data: yData,
+        smooth: true,
+        areaStyle: { opacity: 0.3 },
+      }],
+    });
+  } else {
+    const quotesData = props.data.map(d => d.quotes || 0);
+    const wonData = props.data.map(d => d.won || 0);
+    chart.setOption({
+      title: { text: '报价与中标趋势', left: 'left' },
+      tooltip: { trigger: 'axis' },
+      legend: { data: ['报价数', '中标数'], right: 0 },
+      xAxis: { type: 'category', data: xData },
+      yAxis: { type: 'value' },
+      series: [
+        { name: '报价数', type: 'line', data: quotesData, smooth: true },
+        { name: '中标数', type: 'line', data: wonData, smooth: true },
+      ],
+    });
+  }
+}
+
+onMounted(initChart);
+watch(() => props.data, initChart);
+</script>
+
+<style scoped lang="scss">
+.trend-chart {
+  width: 100%;
+  height: 300px;
+}
+</style>