Merge pull request #54 from mayinrain/master

upd: legend调整，新增最近更新，国际化引入，样式名优化

Author: nancyzhan

packages/traction-widget/components/Charts/Charts.vue

@@ -1,15 +1,23 @@
 <template>
-    <div class="wd-content-body">
-        <h4 class="chart-title">{{ config.title }}</h4>
+    <div class="chart-body">
+        <div class="chart-header">
+            <div class="title-section">
+                <h4 class="chart-title">{{ config.title }}</h4>
+                <div class="update-info">
+                    <span class="update-time">{{ chartsLocale.lastUpdate }}{{ lastUpdateTime }}</span>
+                    <ReloadOutlined class="refresh-icon" @click="handleRefresh" />
+                </div>
+            </div>
+        </div>
         <div class="date-range">
             <div class="mr16 my-date-picker">
                 <FDatePicker type="daterange" v-model="dateRange" @change="updateDateRange" />
             </div>
             <FButton key="btn-1" class="mr16" :class="{ 'my-btn': true, active: days === 7 }" @click="updateDays(7)">
-                最近7天
+                {{ chartsLocale.last7Days }}
             </FButton>
             <FButton key="btn-2" :class="{ 'my-btn': true, active: days === 30 }" @click="updateDays(30)">
-                最近30天
+                {{ chartsLocale.last30Days }}
             </FButton>
         </div>
         <div :id="chartId" class="chart-container">
@@ -18,15 +26,18 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 import { FDatePicker, FButton } from '@fesjs/fes-design';
+import { ReloadOutlined } from '@fesjs/fes-design/icon';
 import { useChart, type ChartConfig } from './useChart';
 import {
     getYear, getMonth, getDate, subDays, differenceInDays,
+    format,
 } from 'date-fns';
+import { useLocale } from '../hooks/useLocale';
 
-
-
+const locale = useLocale();
+const chartsLocale = locale.Charts;
 interface Props {
     chartId: string;
     config: ChartConfig;
@@ -42,7 +53,7 @@ const initialStartDate = subDays(new Date(initialEndDate), days.value - 1).getTi
 const endDate = ref(initialEndDate);
 const startDate = ref(initialStartDate);
 
-// 初始化时，开始日期在前，结束日期在后
+
 const dateRange = ref([initialStartDate, initialEndDate]);
 
 const updateDateRange = (range: number[]) => {
@@ -73,10 +84,17 @@ const updateDays = (newDays: number) => {
 };
 
 // 图表相关
-const { loading } = useChart(
+const { loading, updateChart } = useChart(
     props.chartId,
     props.config,
     startDate,
     endDate
 );
+
+const lastUpdateTime = ref(format(new Date(), 'yyyy-MM-dd HH:mm:ss'));
+
+const handleRefresh = async () => {
+    await updateChart();
+    lastUpdateTime.value = format(new Date(), 'yyyy-MM-dd HH:mm:ss');
+};
 </script>

packages/traction-widget/components/Charts/style/index.less

@@ -1,9 +1,43 @@
-.wd-content-body {
+.chart-body {
     width: 100%;
+  
+  .chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 16px;
+  }
+  
+  .title-section {
+    display: flex;
+    flex-direction: column;
+    color: #999;
+    gap: 8px;
+  }
+  
+  .update-info {
+    display: flex;
+    align-items: center;
+  }
+  
+  .update-time {
+    font-size: 12px;
+  }
+  
+  .refresh-icon {
+    margin-left: 8px;
+    font-size: 12px;
+    cursor: pointer;
+    color: #999;
+    &:hover {
+      color: #5384ff;
+    }
   }
 
   .chart-title {
-    margin-bottom: 16px;
+    margin: 0;
+    font-size: 16px;
+    color: #333;
   }
 
   .date-range {
@@ -38,4 +72,5 @@
     background-color: #f5f8ff;
     border-color: #5384ff;
     color: #5384ff;
-  }
+  }
+}

packages/traction-widget/components/Charts/useChart.ts

@@ -1,6 +1,10 @@
 import { onMounted, onUnmounted, Ref, ref, watch, markRaw } from 'vue';
 import echarts from './useEcharts';
 import type { EChartsOption, TooltipComponentFormatterCallback } from 'echarts';
+import { useLocale } from '../hooks/useLocale';
+
+const locale = useLocale();
+const chartsLocale = locale.Charts;
 
 export interface BarStyle {
     color: string;
@@ -47,6 +51,13 @@ export function useChart(
 
     const transformData = (data: any[]) => {
         const xAxisData = data.map(item => item[config.xAxisField]);
+        // 计算每个系列的总和
+        const seriesTotal = config.series.reduce((acc, series) => {
+            const total = data.reduce((sum, item) => sum + (Number(item[series.field]) || 0), 0);
+            acc[series.name] = total;
+            return acc;
+        }, {} as Record<string, number>);
+
         // 计算最大值来确定左侧留白
         let maxSum = 0;
         let leftGridSize = 16; // 基础留白大小
@@ -78,14 +89,15 @@ export function useChart(
         return {
             xAxisData,
             series,
-            leftGridSize
+            leftGridSize,
+            seriesTotal
         };
     };
     const genTooltipStr = (tempData: any[]) => {
         const showList = tempData.map((item: { value: any; seriesName: any; }) => ({ value: item.value, name: item.seriesName }));
-        const dateStr = showList.length ? `日期：${tempData[0].name} <br />` : '';
+        const dateStr = showList.length ? `${chartsLocale.date}${tempData[0].name} <br />` : '';
         const total = showList.reduce((pre: any, cur: { value: any; }) => pre + cur.value, 0);
-        const totalStr = showList.length ? `总计：${total} <br />` : '';
+        const totalStr = showList.length ? `${chartsLocale.total}${total} <br />` : '';
         const showListStr = showList.reduce((pre: any, cur: { name: any; value: any; }) => `${pre}${cur.name}: ${cur.value}<br />`, '');
         return dateStr + totalStr + showListStr;
     };
@@ -95,7 +107,7 @@ export function useChart(
         try {
             loading.value = true;
             const data = await config.fetchData(startDate.value, endDate.value);
-            const { xAxisData, series, leftGridSize } = transformData(data);
+            const { xAxisData, series, leftGridSize, seriesTotal } = transformData(data);
 
             const option: EChartsOption = {
                 backgroundColor: '#fff',
@@ -142,6 +154,9 @@ export function useChart(
                     itemStyle: {
                         borderWidth: 1
                     },
+                    formatter: (name) => {
+                        return `${name}(${seriesTotal[name]})`;
+                    },
                     data: config.series.map(item => ({
                         name: item.name,
                         itemStyle: item.itemStyle

packages/traction-widget/components/locales/lang/enUS.ts

@@ -34,5 +34,12 @@ export default {
         repeatTip: 'Cannot add duplicate tags!',
         numberLimitTip: 'Cannot add more than ',
         tag: 'tags'
+    },
+    Charts: {
+        lastUpdate: 'Last Update: ',
+        last30Days: 'Last 30 Days',
+        last7Days: 'Last 7 Days',
+        date: 'Date: ',
+        total: 'Total: '
     }
 };

packages/traction-widget/components/locales/lang/zhCN.ts

@@ -33,5 +33,12 @@ export default {
         repeatTip: '不能添加重复标签！',
         numberLimitTip: '不能添加超过',
         tag: '标签'
+    },
+    Charts: {
+        lastUpdate: '最后更新：',
+        last30Days: '最近30天',
+        last7Days: '最近7天',
+        date: '日期：',
+        total: '总计：'
     }
 };