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,57 @@
+.container {
+  min-height: 100vh;
+}
+
+.sider {
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
+}
+
+.logo {
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  color: #fff;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.logoText {
+  font-size: 16px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.header {
+  background: #fff;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+}
+
+.trigger {
+  font-size: 18px;
+  cursor: pointer;
+  transition: color 0.3s;
+  padding: 0 12px;
+  display: inline-flex;
+  align-items: center;
+
+  &:hover {
+    color: #1677ff;
+  }
+}
+
+.content {
+  margin: 16px;
+  padding: 24px;
+  background: #fff;
+  border-radius: 8px;
+  min-height: 280px;
+}
+
+.footer {
+  text-align: center;
+  color: rgba(0, 0, 0, 0.45);
+}
@@ -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>
+    );
+  },
+});