feat(ui):看板图表样式调整

2025-11-04 08:13:43 +08:00 · 2024-03-11 08:35:21 +08:00
parent cbbcd4c571
commit 20915038a3
10 changed files with 129 additions and 28 deletions
--- a/gpt-vue/projects/vue-admin/package.json
+++ b/gpt-vue/projects/vue-admin/package.json
@@ -14,6 +14,7 @@
  "dependencies": {
    "@arco-design/web-vue": "^2.54.6",
    "@gpt-vue/packages": "workspace:^1.0.0",
+    "echarts": "^5.5.0",
    "md-editor-v3": "^2.2.1",
    "pinia": "^2.1.7",
    "vue": "^3.4.15",
--- a/gpt-vue/projects/vue-admin/src/components/SearchTable/FormSection.vue
+++ b/gpt-vue/projects/vue-admin/src/components/SearchTable/FormSection.vue
@@ -80,8 +80,8 @@ const optionsEvent = {
          </slot>
        </AFormItem>
      </AGridItem>
-      <AGridItem suffix>
-        <ASpace class="flex-end">
+      <AGridItem>
+        <ASpace>
          <slot name="search-options" :option="optionsEvent">
            <AButton type="primary" html-type="submit" :size="size" :loading="submitting">
              <icon-search />
@@ -92,6 +92,10 @@ const optionsEvent = {
              <span>重置</span>
            </AButton>
          </slot>
+        </ASpace>
+      </AGridItem>
+      <AGridItem suffix>
+        <ASpace class="flex-end">
          <slot name="search-extra" />
        </ASpace>
      </AGridItem>
@@ -100,7 +104,7 @@ const optionsEvent = {
 </template>
 <style scoped>
 .search-form-conteiner {
-  padding: 16px 0;
+  padding: 8px 0px 0px;
 }
 .flex-end {
  display: flex;
--- a/gpt-vue/projects/vue-admin/src/components/SimpleTable/SimpleTable.vue
+++ b/gpt-vue/projects/vue-admin/src/components/SimpleTable/SimpleTable.vue
@@ -33,12 +33,12 @@ const handleSearch = async (tips?: boolean) => {
 onActivated(handleSearch);
 </script>
 <template>
-  <div class="simple-header">
-    <a-space>
-      <slot name="header" v-bind="{ reload: handleSearch }" />
-    </a-space>
-  </div>
  <div class="simple-table">
+    <div class="simple-header">
+      <a-space class="flex-end">
+        <slot name="header" v-bind="{ reload: handleSearch }" />
+      </a-space>
+    </div>
    <div ref="tableContainerRef" class="simple-table-container">
      <ATable
        v-bind="{
@@ -46,7 +46,7 @@ onActivated(handleSearch);
          ...tableConfig,
          ...props,
          scroll: useTableScroll(_columns || [], tableContainerRef as HTMLElement),
-          columns: _columns
+          columns: _columns,
        }"
      >
        <template v-for="slot in Object.keys($slots)" #[slot]="config">
@@ -71,6 +71,10 @@ onActivated(handleSearch);
  justify-content: space-between;
 }
 .simple-header {
-  padding: 16px 0;
+  padding: 8px 0px 16px;
+}
+.flex-end {
+  display: flex;
+  justify-content: end;
 }
 </style>
--- a/gpt-vue/projects/vue-admin/src/views/ApiKey/ApiKeyContainer.vue
+++ b/gpt-vue/projects/vue-admin/src/views/ApiKey/ApiKeyContainer.vue
@@ -96,7 +96,9 @@ const handleStatusChange = ({ filed, value, record, reload }) => {
      </a-popconfirm>
    </template>
    <template #header="{ reload }">
-      <a-button @click="popup({ reload })" size="small"><icon-plus />新增</a-button>
+      <a-button @click="popup({ reload })" size="small" type="primary"
+        ><template #icon> <icon-plus /> </template>新增
+      </a-button>
    </template>
    <template #status="{ record, reload }">
      <a-switch
--- a/gpt-vue/projects/vue-admin/src/views/ChatModel/ChatModelContainer.vue
+++ b/gpt-vue/projects/vue-admin/src/views/ChatModel/ChatModelContainer.vue
@@ -96,7 +96,9 @@ const handleStatusChange = ({ filed, value, record, reload }) => {
      </a-popconfirm>
    </template>
    <template #header="{ reload }">
-      <a-button @click="popup({ reload })" size="small"><icon-plus />新增</a-button>
+      <a-button @click="popup({ reload })" size="small" type="primary"
+        ><template #icon> <icon-plus /> </template>新增</a-button
+      >
    </template>
    <template #status="{ record, reload }">
      <a-switch
--- a/gpt-vue/projects/vue-admin/src/views/DashboardView.vue
+++ b/gpt-vue/projects/vue-admin/src/views/DashboardView.vue
@@ -1,13 +1,11 @@
 <script lang="ts" setup>
 import http from "@/http/config";
-import { ref } from "vue";
-
-const dataSet = {
-  users: "今日新增用户",
-  chats: "今日新增对话",
-  tokens: "今日消耗 Tokens",
-  income: "今日入账",
-};
+import { ref, nextTick } from "vue";
+import * as echarts from "echarts/core";
+import { GridComponent, TitleComponent } from "echarts/components";
+import { LineChart } from "echarts/charts";
+import { UniversalTransition } from "echarts/features";
+import { CanvasRenderer } from "echarts/renderers";

 const icons = {
  users: "icon-user",
@@ -15,24 +13,81 @@ const icons = {
  tokens: "icon-computer",
  income: "icon-wechatpay",
 };
+const dataSet = {
+  users: "今日新增用户",
+  chats: "今日新增对话",
+  tokens: "今日消耗 Tokens",
+  income: "今日入账",
+};

-const data = ref<Record<string, number>>({});
 const getData = () => {
  http({
    url: "api/admin/dashboard/stats",
    method: "get",
  }).then((res) => {
    data.value = res.data;
+    handeChartData(res.data.chart);
  });
 };
 getData();
+// 图表
+const chartTitle = {
+  historyMessage: "对话",
+  orders: "订单",
+  users: "用户数",
+};
+echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition, TitleComponent]);
+const chartDomRefs = [];
+const chartData = ref({});
+const data = ref<Record<string, number>>({});
+const handeChartData = (data) => {
+  const _chartData = {};
+  for (let key in data) {
+    const type = data[key];
+    _chartData[key] = {
+      series: [],
+      xAxis: [],
+    };
+    for (let date in type) {
+      _chartData[key].series.push(type[date]);
+      _chartData[key].xAxis.push(date);
+    }
+    nextTick(() => {
+      const myChart = echarts.init(chartDomRefs.pop());
+      myChart.setOption(createOption(_chartData[key], key));
+    });
+  }
+  chartData.value = _chartData;
+};
+const createOption = (data, key) => {
+  const { xAxis, series } = data;
+  return {
+    title: {
+      left: "center",
+      text: chartTitle[key],
+    },
+    xAxis: {
+      type: "category",
+      data: xAxis,
+    },
+    yAxis: {
+      type: "value",
+    },
+    series: [
+      {
+        data: series,
+        type: "line",
+      },
+    ],
+  };
+};
 </script>
 <template>
  <div class="dashboard">
    <a-grid :cols="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 4 }" :colGap="12" :rowGap="16" class="grid">
      <a-grid-item v-for="(value, key) in dataSet" :key="key">
        <div class="data-card">
-          <span :class="key" class="icon"><icon-user /></span>
+          <span :class="key" class="icon"><component :is="icons[key]" /> </span>
          <span class="count"
            ><a-statistic :extra="value" :value="data[key]" :precision="0"
          /></span>
@@ -40,6 +95,27 @@ getData();
      </a-grid-item>
    </a-grid>
  </div>
+  <div class="chart">
+    <a-grid
+      :cols="{ xs: 1, sm: 1, md: 1, lg: 2, xl: 2, xxl: 3 }"
+      :colGap="12"
+      :rowGap="16"
+      class="grid"
+    >
+      <a-grid-item v-for="(value, key, index) in chartData" :key="key">
+        <div
+          :ref="
+            (el) => {
+              chartDomRefs[index] = el;
+            }
+          "
+          class="chartDom"
+        >
+          {{ key }}
+        </div>
+      </a-grid-item>
+    </a-grid>
+  </div>
 </template>
 <style lang="less" scoped>
 .dashboard {
@@ -80,7 +156,15 @@ getData();
      display: flex;
      align-items: center;
      justify-content: center;
+      background: #f3f3f3;
    }
  }
 }
+.chart {
+  margin-top: 15px;
+  .chartDom {
+    width: 450px;
+    height: 500px;
+  }
+}
 </style>
--- a/gpt-vue/projects/vue-admin/src/views/Functions/FunctionsContainer.vue
+++ b/gpt-vue/projects/vue-admin/src/views/Functions/FunctionsContainer.vue
@@ -57,7 +57,7 @@ const handleRemove = async (id, reload) => {
 <template>
  <SimpleTable :request="getList" :columns="columns" :pagination="false">
    <template #header="{ reload }">
-      <a-button @click="openFormModal(reload, {})">
+      <a-button type="primary" @click="openFormModal(reload, {})">
        <template #icon> <icon-plus /> </template>
        新增
      </a-button>
--- a/gpt-vue/projects/vue-admin/src/views/Product/ProductContainer.vue
+++ b/gpt-vue/projects/vue-admin/src/views/Product/ProductContainer.vue
@@ -102,7 +102,9 @@ const handleStatusChange = ({ value, record, reload }) => {
      </a-popconfirm>
    </template>
    <template #header="{ reload }">
-      <a-button @click="popup({ reload })" size="small"><icon-plus />新增</a-button>
+      <a-button @click="popup({ reload })" size="small" type="primary"
+        ><template #icon> <icon-plus /> </template>新增
+      </a-button>
    </template>
    <template #status="{ record, reload }">
      <a-switch
--- a/gpt-vue/projects/vue-admin/src/views/Role/RoleContainer.vue
+++ b/gpt-vue/projects/vue-admin/src/views/Role/RoleContainer.vue
@@ -105,7 +105,9 @@ const handleStatusChange = ({ value, record, reload }) => {
      </a-popconfirm>
    </template>
    <template #header="{ reload }">
-      <a-button @click="popup({ reload })" size="small"><icon-plus />新增</a-button>
+      <a-button @click="popup({ reload })" size="small" type="primary"
+        ><template #icon> <icon-plus /> </template>新增</a-button
+      >
    </template>
    <template #status="{ record, reload }">
      <a-switch
--- a/gpt-vue/projects/vue-admin/src/views/User/UserContainer.vue
+++ b/gpt-vue/projects/vue-admin/src/views/User/UserContainer.vue
@@ -80,9 +80,9 @@ const handleDelete = async ({ id }: { id: string }, reload) => {
      <a-link @click="password({ record, reload })">重置密码</a-link>
    </template>
    <template #search-extra="{ reload }">
-      <a-button @click="editModal({ reload })" status="success" size="small"
-        ><icon-plus />新增用户</a-button
-      >
+      <a-button @click="editModal({ reload })" size="small" type="primary">
+        <template #icon> <icon-plus /> </template>新增
+      </a-button>
    </template>
  </SearchTable>
 </template>