feat: 架构调整

src/pages/about/index.module.less

@@ -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;
+}

src/pages/about/index.tsx

@@ -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>
+    );
+  },
+});