20260809223428

code/fms/fms-vue/src/views/demo/CardDemo.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+
+const stats = [
+  { label: '总用户数', value: '12,345', trend: '+12.5%', up: true },
+  { label: '活跃用户', value: '8,920', trend: '+8.2%', up: true },
+  { label: '本月新增', value: '1,203', trend: '-3.1%', up: false },
+  { label: '转化率', value: '24.8%', trend: '+5.6%', up: true },
+]
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div>
+      <h2 class="text-xl font-semibold">卡片示例</h2>
+      <p class="mt-1 text-sm text-muted-foreground">统计卡片和内容卡片</p>
+    </div>
+
+    <!-- Stat cards -->
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      <Card v-for="stat in stats" :key="stat.label">
+        <CardHeader class="pb-2">
+          <CardDescription>{{ stat.label }}</CardDescription>
+        </CardHeader>
+        <CardContent class="pb-2">
+          <div class="text-2xl font-bold">{{ stat.value }}</div>
+        </CardContent>
+        <CardFooter class="text-xs" :class="stat.up ? 'text-emerald-600' : 'text-red-500'">
+          {{ stat.trend }}
+        </CardFooter>
+      </Card>
+    </div>
+
+    <!-- Content cards -->
+    <div class="grid gap-4 md:grid-cols-2">
+      <Card>
+        <CardHeader>
+          <CardTitle>最近活动</CardTitle>
+          <CardDescription>团队最近的操作记录</CardDescription>
+        </CardHeader>
+        <CardContent class="space-y-2 text-sm text-muted-foreground">
+          <p>• 张三 新增了一条客户记录</p>
+          <p>• 李四 更新了产品配置</p>
+          <p>• 王五 导出了本月报表</p>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>快捷操作</CardTitle>
+          <CardDescription>常用功能入口</CardDescription>
+        </CardHeader>
+        <CardContent class="flex flex-wrap gap-2">
+          <Button variant="outline">新建订单</Button>
+          <Button variant="outline">导入数据</Button>
+          <Button variant="outline">生成报表</Button>
+          <Button variant="outline">发送通知</Button>
+        </CardContent>
+      </Card>
+    </div>
+  </div>
+</template>