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,20 @@
+.container {
+  // 容器
+}
+
+.title {
+  margin-top: 0;
+  margin-bottom: 24px;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.subtitle {
+  margin: 16px 0 8px;
+}
+
+.list {
+  margin: 0;
+  padding-left: 20px;
+  line-height: 2;
+}
@@ -0,0 +1,42 @@
+import { defineComponent } from 'vue';
+import { Card } from 'ant-design-vue';
+import styles from './index.module.less';
+
+interface TechItem {
+  name: string;
+  version: string;
+}
+
+/**
+ * 关于页面
+ */
+export default defineComponent({
+  name: 'About',
+  setup() {
+    const techStack: TechItem[] = [
+      { name: 'Vue', version: '^3.3.0' },
+      { name: 'Vite', version: '^5.0.0' },
+      { name: 'TypeScript', version: '^5.3.0' },
+      { name: 'Ant Design Vue', version: '^4.0.0' },
+      { name: 'Vue Router', version: '^4.2.0' },
+      { name: 'Less', version: '^4.6.4' },
+    ];
+
+    return () => (
+      <div class={styles.container}>
+        <h2 class={styles.title}>关于</h2>
+        <Card>
+          <p>CPMS 运营平台前端 PC 端。</p>
+          <h3 class={styles.subtitle}>技术栈</h3>
+          <ul class={styles.list}>
+            {techStack.map((item) => (
+              <li key={item.name}>
+                {item.name} — {item.version}
+              </li>
+            ))}
+          </ul>
+        </Card>
+      </div>
+    );
+  },
+});
@@ -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>
+    );
+  },
+});
@@ -1,7 +1,6 @@
 import { defineComponent, reactive, ref } from 'vue';
 import { Button, Card, Form, FormItem, Input, message } from 'ant-design-vue';
 import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
-import { useRouter } from 'vue-router';
 import { auth } from '@/hooks/useAuth';
 import styles from './index.module.less';

@@ -12,11 +11,11 @@ interface LoginForm {

 /**
 * 登录页
+ * auth.login() 内部会自动:保存 token → 拉取菜单+权限 → 动态注册路由 → 跳转首页
 */
 export default defineComponent({
  name: 'LoginPage',
  setup() {
-    const router = useRouter();
    const loading = ref(false);

    const form = reactive<LoginForm>({
@@ -37,16 +36,20 @@ export default defineComponent({

      loading.value = true;

-      // TODO: 替换为真实登录接口
-      // const res = await post<LoginResult>('/login', { ...form });
-      // auth.login(res.token);
+      try {
+        // TODO: 替换为真实登录接口
+        // const res = await post<LoginResult>('/auth/login', { username: form.username, password: form.password });
+        // await auth.login(res.token);

-      setTimeout(() => {
-        auth.login('mock_token_' + Date.now());
+        // Mock:模拟登录
+        await new Promise((r) => setTimeout(r, 600));
+        await auth.login('mock_token_' + Date.now());
        message.success('登录成功');
+      } catch (err) {
+        message.error('登录失败,请重试');
+      } finally {
        loading.value = false;
-        router.push('/dashboard');
-      }, 600);
+      }
    };

    return () => (
@@ -71,7 +74,7 @@ export default defineComponent({
              />
            </FormItem>
            <FormItem>
-              <Button type="primary" html-type="submit" size="large" block loading={loading.value}>
+              <Button type="primary" htmlType="submit" size="large" block loading={loading.value}>
                登录
              </Button>
            </FormItem>
@@ -0,0 +1,32 @@
+import { defineComponent } from 'vue';
+import { useRouter } from 'vue-router';
+import { Button, Result } from 'ant-design-vue';
+
+/**
+ * 404 页面
+ */
+export default defineComponent({
+  name: 'NotFound',
+  setup() {
+    const router = useRouter();
+
+    const goHome = () => router.push('/');
+
+    return () => (
+      <Result
+        status="404"
+        title="404"
+        subTitle="抱歉,你访问的页面不存在。"
+        style={{ paddingTop: '120px' }}
+      >
+        {{
+          extra: () => (
+            <Button type="primary" onClick={goHome}>
+              返回首页
+            </Button>
+          ),
+        }}
+      </Result>
+    );
+  },
+});