feat: Architecture initialization

2026-07-14 10:31:17 +08:00
commit 6f37264047
59 changed files with 8752 additions and 0 deletions
@@ -0,0 +1,71 @@
+import { computed, defineComponent, ref } from 'vue';
+import { useRouter, useRoute, RouterView } from 'vue-router';
+import { Layout, Menu } from 'ant-design-vue';
+import type { MenuProps } from 'ant-design-vue';
+import {
+  DashboardOutlined,
+  InfoCircleOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+} from '@ant-design/icons-vue';
+import styles from './BasicLayout.module.less';
+
+const { Header, Sider, Content, Footer } = Layout;
+
+/**
+ * 基础布局:左侧导航 + 顶部栏 + 内容区 + 页脚
+ */
+export default defineComponent({
+  name: 'BasicLayout',
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+    const collapsed = ref(false);
+
+    const selectedKeys = computed<string[]>(() => [route.path]);
+
+    const menuItems: MenuProps['items'] = [
+      { key: '/dashboard', icon: () => <DashboardOutlined />, label: '工作台' },
+      { key: '/about', icon: () => <InfoCircleOutlined />, label: '关于' },
+    ];
+
+    const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
+      router.push(key as string);
+    };
+
+    const toggleCollapsed = () => {
+      collapsed.value = !collapsed.value;
+    };
+
+    return () => (
+      <Layout class={styles.container}>
+        <Sider class={styles.sider} collapsed={collapsed.value} trigger={null} collapsible>
+          <div class={styles.logo}>
+            <span class={styles.logoText}>{collapsed.value ? 'CPMS' : 'CPMS 运营平台'}</span>
+          </div>
+          <Menu
+            theme="dark"
+            mode="inline"
+            selectedKeys={selectedKeys.value}
+            items={menuItems}
+            onClick={handleMenuClick}
+          />
+        </Sider>
+
+        <Layout>
+          <Header class={styles.header}>
+            <span class={styles.trigger} onClick={toggleCollapsed}>
+              {collapsed.value ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+            </span>
+          </Header>
+
+          <Content class={styles.content}>
+            <RouterView />
+          </Content>
+
+          <Footer class={styles.footer}>CPMS 运营平台 ©{new Date().getFullYear()}</Footer>
+        </Layout>
+      </Layout>
+    );
+  },
+});