feat: 优化路由 搭建赛事管理页面基础 处理部分样式问题 完成赛事列表页面搭建

src/layouts/BasicLayout.module.less

@@ -1,9 +1,6 @@
 .container {
   min-height: 100vh;
-}
-
-.sider {
-  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
+  height: 100vh;
 }
 
 .logo {
@@ -12,8 +9,8 @@
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  color: #fff;
-  background: rgba(255, 255, 255, 0.08);
+  color: #1a1a1a;
+  background: #fff;
 }
 
 .logoText {
@@ -22,14 +19,6 @@
   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;
@@ -48,10 +37,16 @@
   padding: 24px;
   background: #fff;
   border-radius: 8px;
-  min-height: 280px;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
-.footer {
-  text-align: center;
-  color: rgba(0, 0, 0, 0.45);
+.main {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
 }

src/layouts/BasicLayout.module.wxss

@@ -0,0 +1,46 @@
+.container {
+  min-height: 100vh;
+  height: 100vh;
+}
+.logo {
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  color: #1a1a1a;
+  background: #fff;
+}
+.logoText {
+  font-size: 16px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.trigger {
+  font-size: 18px;
+  cursor: pointer;
+  transition: color 0.3s;
+  padding: 0 12px;
+  display: inline-flex;
+  align-items: center;
+}
+.trigger:hover {
+  color: #1677ff;
+}
+.content {
+  margin: 16px;
+  padding: 24px;
+  background: #fff;
+  border-radius: 8px;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.main {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}

src/layouts/BasicLayout.tsx

@@ -1,4 +1,5 @@
 import { computed, defineComponent, h, ref } from 'vue';
+import type { CSSProperties } from 'vue';
 import { useRouter, useRoute, RouterView } from 'vue-router';
 import { Layout, Menu } from 'ant-design-vue';
 import type { MenuProps } from 'ant-design-vue';
@@ -8,12 +9,34 @@ import {
   MenuFoldOutlined,
   MenuUnfoldOutlined,
   SettingOutlined,
+  TrophyOutlined,
 } from '@ant-design/icons-vue';
 import { useMenuStore } from '@/stores/menuStore';
 import styles from './BasicLayout.module.less';
 
 const { Header, Sider, Content, Footer } = Layout;
 
+const headerStyle: CSSProperties = {
+  background: '#fff',
+  padding: '0 16px',
+  display: 'flex',
+  alignItems: 'center',
+  color: '#1a1a1a',
+  boxShadow: '0 1px 4px rgba(0, 21, 41, 0.08)',
+};
+
+const siderStyle: CSSProperties = {
+  background: '#fff',
+  boxShadow: '2px 0 8px rgba(0, 21, 41, 0.08)',
+};
+
+const footerStyle: CSSProperties = {
+  padding: '0 50px 16px 50px',
+  textAlign: 'center',
+  color: '#3a3a3a',
+  userSelect: 'none',
+};
+
 /**
  * 图标名 → 组件映射
  * 后端下发的 icon 字符串在此映射为 antd icon 组件
@@ -23,6 +46,7 @@ const ICON_MAP: Record<string, any> = {
   DashboardOutlined,
   InfoCircleOutlined,
   SettingOutlined,
+  TrophyOutlined,
 };
 
 /**
@@ -75,12 +99,12 @@ export default defineComponent({
 
     return () => (
       <Layout class={styles.container}>
-        <Sider class={styles.sider} collapsed={collapsed.value} trigger={null} collapsible>
+        <Sider style={siderStyle} collapsed={collapsed.value} trigger={null} collapsible>
           <div class={styles.logo}>
-            <span class={styles.logoText}>{collapsed.value ? '6羽' : '六个羽友赛事'}</span>
+            <span class={styles.logoText}>{collapsed.value ? '6羽' : '六羽赛事运营平台'}</span>
           </div>
           <Menu
-            theme="dark"
+            theme="light"
             mode="inline"
             selectedKeys={selectedKeys.value}
             items={resolvedItems.value}
@@ -88,8 +112,8 @@ export default defineComponent({
           />
         </Sider>
 
-        <Layout>
-          <Header class={styles.header}>
+        <Layout class={styles.main}>
+          <Header style={headerStyle}>
             <span class={styles.trigger} onClick={toggleCollapsed}>
               {collapsed.value ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
             </span>
@@ -99,7 +123,7 @@ export default defineComponent({
             <RouterView />
           </Content>
 
-          <Footer class={styles.footer}>六个羽友赛事运营平台 ©{new Date().getFullYear()}</Footer>
+          <Footer style={footerStyle}>六个羽友赛事运营平台 ©{new Date().getFullYear()}</Footer>
         </Layout>
       </Layout>
     );