feat: 新增运营数据展示组件，优化商城首页数据处理逻辑

- 在商城首页引入 WorkbenchQuickDataShow 组件，展示关键运营数据
- 增加数据获取方法，包括订单、商品和钱包充值数据
- 更新 AnalysisOverview 组件以支持双向绑定
- 优化数据加载逻辑，提升用户体验

packages/effects/common-ui/src/ui/dashboard/analysis/analysis-overview.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { AnalysisOverviewItem } from '../typing';
 
+import { computed } from 'vue';
+
 import {
   Card,
   CardContent,
@@ -13,20 +15,29 @@ import {
 
 interface Props {
   items?: AnalysisOverviewItem[];
+  modelValue?: AnalysisOverviewItem[];
 }
 
 defineOptions({
   name: 'AnalysisOverview',
 });
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   items: () => [],
+  modelValue: () => [],
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const itemsData = computed({
+  get: () => (props.modelValue?.length ? props.modelValue : props.items),
+  set: (value) => emit('update:modelValue', value),
 });
 </script>
 
 <template>
   <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
-    <template v-for="item in items" :key="item.title">
+    <template v-for="item in itemsData" :key="item.title">
       <Card :title="item.title" class="w-full">
         <CardHeader>
           <CardTitle class="text-xl">{{ item.title }}</CardTitle>

packages/effects/common-ui/src/ui/dashboard/typing.ts

@@ -39,9 +39,18 @@ interface WorkbenchQuickNavItem {
   url?: string;
 }
 
+interface WorkbenchQuickDataShowItem {
+  name: string;
+  value: number;
+  prefix: string;
+  decimals: number;
+  routerName: string;
+}
+
 export type {
   AnalysisOverviewItem,
   WorkbenchProjectItem,
+  WorkbenchQuickDataShowItem,
   WorkbenchQuickNavItem,
   WorkbenchTodoItem,
   WorkbenchTrendItem,

packages/effects/common-ui/src/ui/dashboard/workbench/index.ts

@@ -1,5 +1,6 @@
 export { default as WorkbenchHeader } from './workbench-header.vue';
 export { default as WorkbenchProject } from './workbench-project.vue';
+export { default as WorkbenchQuickDataShow } from './workbench-quick-data-show.vue';
 export { default as WorkbenchQuickNav } from './workbench-quick-nav.vue';
 export { default as WorkbenchTodo } from './workbench-todo.vue';
 export { default as WorkbenchTrends } from './workbench-trends.vue';

packages/effects/common-ui/src/ui/dashboard/workbench/workbench-quick-data-show.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { WorkbenchQuickDataShowItem } from '../typing';
+
+import { computed } from 'vue';
+
+import { CountTo } from '@vben/common-ui';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@vben-core/shadcn-ui';
+
+interface Props {
+  items?: WorkbenchQuickDataShowItem[];
+  modelValue?: WorkbenchQuickDataShowItem[];
+  title: string;
+}
+
+defineOptions({
+  name: 'WorkbenchQuickDataShow',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  modelValue: () => [],
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+// 使用计算属性实现双向绑定
+const itemsData = computed({
+  get: () => (props.modelValue?.length ? props.modelValue : props.items),
+  set: (value) => {
+    emit('update:modelValue', value);
+  },
+});
+</script>
+
+<template>
+  <Card>
+    <CardHeader class="py-4">
+      <CardTitle class="text-lg">{{ title }}</CardTitle>
+    </CardHeader>
+    <CardContent class="flex flex-wrap p-0">
+      <template v-for="(item, index) in itemsData" :key="item.name">
+        <div
+          :class="{
+            'border-r-0': index % 4 === 3,
+            'border-b-0': index < 4,
+            'pb-4': index > 4,
+            'rounded-bl-xl': index === itemsData.length - 4,
+            'rounded-br-xl': index === itemsData.length - 1,
+          }"
+          class="flex-col-center group w-1/4 cursor-pointer py-9"
+        >
+          <div class="mb-2 flex justify-center">
+            <CountTo
+              :prefix="item.prefix || ''"
+              :end-val="Number(item.value)"
+              :decimals="item.decimals || 0"
+              class="text-4xl font-normal"
+            />
+          </div>
+          <span class="truncate text-base text-gray-500">{{ item.name }}</span>
+        </div>
+      </template>
+    </CardContent>
+  </Card>
+</template>