feat: 架构调整

2026-07-23 11:27:33 +08:00
parent 6f37264047
commit 3b5a908ee4
25 changed files with 653 additions and 245 deletions
@@ -0,0 +1,27 @@
+.container {
+  // 容器
+}
+
+.title {
+  margin-top: 0;
+  margin-bottom: 24px;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.panel {
+  margin-top: 16px;
+
+  ul {
+    margin: 12px 0 0;
+    padding-left: 20px;
+    line-height: 2;
+  }
+
+  code {
+    padding: 2px 8px;
+    background: #f5f5f5;
+    border-radius: 4px;
+    font-size: 13px;
+  }
+}
@@ -0,0 +1,67 @@
+import { defineComponent } from 'vue';
+import { Card, Col, Row, Statistic } from 'ant-design-vue';
+import styles from './index.module.less';
+
+interface StatItem {
+  title: string;
+  value: number;
+  suffix: string;
+  precision?: number;
+}
+
+/**
+ * 工作台 / 仪表盘
+ */
+export default defineComponent({
+  name: 'Dashboard',
+  setup() {
+    const stats: StatItem[] = [
+      { title: '今日访问', value: 1280, suffix: '次' },
+      { title: '活跃用户', value: 368, suffix: '人' },
+      { title: '订单总数', value: 9920, suffix: '单' },
+      { title: '处理率', value: 96.8, suffix: '%', precision: 1 },
+    ];
+
+    return () => (
+      <div class={styles.container}>
+        <h2 class={styles.title}>工作台</h2>
+
+        <Row gutter={[16, 16]}>
+          {stats.map((item) => (
+            <Col key={item.title} xs={24} sm={12} lg={6}>
+              <Card>
+                <Statistic
+                  title={item.title}
+                  value={item.value}
+                  suffix={item.suffix}
+                  precision={item.precision}
+                />
+              </Card>
+            </Col>
+          ))}
+        </Row>
+
+        <Card class={styles.panel} title="项目说明">
+          <p>
+            欢迎使用 CPMS 运营平台。这是一个基于 Vue 3 + Vite + TypeScript + Ant Design Vue
+            搭建的中后台管理项目骨架,采用 TSX 写法,你可以在此基础上继续开发业务功能。
+          </p>
+          <ul>
+            <li>
+              开发命令:<code>npm run dev</code>
+            </li>
+            <li>
+              构建(测试环境):<code>npm run build:test</code>
+            </li>
+            <li>
+              构建(生产环境):<code>npm run build:prod</code>
+            </li>
+            <li>
+              代码检查:<code>npm run lint</code>
+            </li>
+          </ul>
+        </Card>
+      </div>
+    );
+  },
+});