整体布局调整

public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>DM Admin</title>
+    <title>闪兔到家后台管理系统</title>
     <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
     <script type="text/javascript">
       window._AMapSecurityConfig = {

src/components/PageContainer.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="page-container">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped>
+.page-container {
+  background: #fff;
+  min-height: calc(100vh - 120px);
+  padding: 24px;
+  margin: 16px;
+  border-radius: 4px;
+}
+</style> 

src/layouts/TabsLayout.vue

@@ -0,0 +1,282 @@
+<template>
+  <a-layout class="tabs-layout">
+    <a-layout-header class="header">
+      <div class="logo">闪兔到家后台管理系统</div>
+      <div class="header-right">
+        <a-space>
+          <a-button type="link" icon><SearchOutlined /></a-button>
+          <a-button type="link" icon><QuestionCircleOutlined /></a-button>
+          <a-dropdown>
+            <a-button type="link">
+              {{ username }}
+              <DownOutlined />
+            </a-button>
+            <template #overlay>
+              <a-menu>
+                <a-menu-item key="logout" @click="handleLogout">
+                  退出登录
+                </a-menu-item>
+              </a-menu>
+            </template>
+          </a-dropdown>
+        </a-space>
+      </div>
+    </a-layout-header>
+
+    <a-layout>
+      <a-layout-sider width="256" class="sider">
+        <a-menu
+          mode="inline"
+          :selectedKeys="[activeMenu]"
+          :openKeys="openKeys"
+          @select="handleMenuSelect"
+          @openChange="handleOpenChange"
+        >
+          <a-sub-menu key="user">
+            <template #title>
+              <span>
+                <UserOutlined />
+                <span>用户管理</span>
+              </span>
+            </template>
+            <a-menu-item key="/user/list">用户列表</a-menu-item>
+          </a-sub-menu>
+
+          <a-sub-menu key="community">
+            <template #title>
+              <span>
+                <HomeOutlined />
+                <span>小区管理</span>
+              </span>
+            </template>
+            <a-menu-item key="/community/list">小区列表</a-menu-item>
+            <a-menu-item key="/community/building">楼栋管理</a-menu-item>
+          </a-sub-menu>
+        </a-menu>
+      </a-layout-sider>
+
+      <a-layout-content class="content">
+        <div class="tabs-wrapper">
+          <a-tabs
+            v-model:activeKey="activeTab"
+            type="editable-card"
+            @edit="handleTabEdit"
+            @change="handleTabChange"
+            hide-add
+          >
+            <a-tab-pane
+              v-for="tab in tabs"
+              :key="tab.key"
+              :tab="tab.title"
+              :closable="tab.closable"
+            />
+          </a-tabs>
+        </div>
+        <div class="content-wrapper">
+          <router-view v-slot="{ Component }">
+            <keep-alive>
+              <component :is="Component" />
+            </keep-alive>
+          </router-view>
+        </div>
+      </a-layout-content>
+    </a-layout>
+  </a-layout>
+</template>
+
+<script>
+import { defineComponent, ref, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import {
+  SearchOutlined,
+  QuestionCircleOutlined,
+  DownOutlined,
+  UserOutlined,
+  HomeOutlined
+} from '@ant-design/icons-vue'
+
+export default defineComponent({
+  components: {
+    SearchOutlined,
+    QuestionCircleOutlined,
+    DownOutlined,
+    UserOutlined,
+    HomeOutlined
+  },
+
+  setup() {
+    const router = useRouter()
+    const route = useRoute()
+    const activeTab = ref('')
+    const activeMenu = ref('')
+    const openKeys = ref(['user', 'community'])
+    const username = ref('')
+
+    const tabs = ref([
+      {
+        title: '工作台',
+        key: '/dashboard',
+        closable: false
+      }
+    ])
+
+    // 获取用户信息
+    const getUserInfo = () => {
+      const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
+      username.value = userInfo.username || '未登录'
+    }
+
+    // 在组件挂载时获取用户信息
+    getUserInfo()
+
+    // 监听路由变化
+    watch(
+      () => route.path,
+      (newPath) => {
+        activeMenu.value = newPath
+        const existTab = tabs.value.find(tab => tab.key === newPath)
+        if (!existTab) {
+          tabs.value.push({
+            title: route.meta.title,
+            key: newPath,
+            closable: true
+          })
+        }
+        activeTab.value = newPath
+      },
+      { immediate: true }
+    )
+
+    // 处理标签页切换
+    const handleTabChange = (key) => {
+      router.push(key)
+    }
+
+    // 处理标签页编辑（关闭）
+    const handleTabEdit = (targetKey, action) => {
+      if (action === 'remove') {
+        const targetIndex = tabs.value.findIndex(tab => tab.key === targetKey)
+        if (targetIndex === -1) return
+
+        // 如果关闭的是当前页，需要跳转到其他页面
+        if (targetKey === activeTab.value) {
+          const newActiveKey = tabs.value[targetIndex - 1]?.key || tabs.value[targetIndex + 1]?.key
+          if (newActiveKey) {
+            router.push(newActiveKey)
+          }
+        }
+
+        // 移除标签页
+        tabs.value = tabs.value.filter(tab => tab.key !== targetKey)
+      }
+    }
+
+    // 处理菜单选择
+    const handleMenuSelect = ({ key }) => {
+      router.push(key)
+    }
+
+    // 处理子菜单展开/收起
+    const handleOpenChange = (keys) => {
+      openKeys.value = keys
+    }
+
+    // 处理退出登录
+    const handleLogout = () => {
+      localStorage.removeItem('token')
+      localStorage.removeItem('userInfo')
+      router.push('/login')
+    }
+
+    return {
+      activeTab,
+      activeMenu,
+      openKeys,
+      tabs,
+      username,
+      handleTabChange,
+      handleTabEdit,
+      handleMenuSelect,
+      handleOpenChange,
+      handleLogout
+    }
+  }
+})
+</script>
+
+<style scoped>
+.tabs-layout {
+  min-height: 100vh;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  z-index: 10;
+}
+
+.logo {
+  font-size: 16px;
+  color: #1890ff;
+  white-space: nowrap;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.sider {
+  background: #fff;
+  box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  background: #f0f2f5;
+}
+
+.tabs-wrapper {
+  padding: 6px 6px 0;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+}
+
+.content-wrapper {
+  flex: 1;
+  padding: 16px;
+  overflow: auto;
+}
+
+:deep(.ant-tabs-nav) {
+  margin: 0;
+}
+
+:deep(.ant-tabs-tab) {
+  border: none !important;
+  background: transparent !important;
+  padding: 8px 16px !important;
+}
+
+:deep(.ant-tabs-tab-active) {
+  background: #e6f7ff !important;
+}
+
+:deep(.ant-tabs-tab-btn) {
+  color: #666 !important;
+}
+
+:deep(.ant-tabs-tab-active .ant-tabs-tab-btn) {
+  color: #1890ff !important;
+}
+
+:deep(.ant-menu-item) {
+  margin: 0 !important;
+}
+</style> 

src/main.js

@@ -18,7 +18,8 @@ import {
   Modal,
   Select,
   InputNumber,
-  AutoComplete
+  AutoComplete,
+  Tabs
 } from 'ant-design-vue'
 import 'ant-design-vue/dist/antd.css'
 
@@ -43,5 +44,6 @@ app.use(Modal)
 app.use(Select)
 app.use(InputNumber)
 app.use(AutoComplete)
+app.use(Tabs)
 
 app.mount('#app') 

src/router/index.js

@@ -1,24 +1,30 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import BasicLayout from '../layouts/BasicLayout.vue'
+import TabsLayout from '../layouts/TabsLayout.vue'
 
 const routes = [
   {
     path: '/',
-    component: BasicLayout,
+    component: TabsLayout,
     children: [
       {
         path: '',
-        redirect: '/user/list'
+        redirect: '/dashboard'
+      },
+      {
+        path: '/dashboard',
+        name: 'Dashboard',
+        component: () => import('../views/dashboard/Dashboard.vue'),
+        meta: { title: '工作台' }
       },
       {
         path: '/user/list',
-        name: 'userList',
+        name: 'UserList',
         component: () => import('../views/user/UserList.vue'),
         meta: { title: '用户列表' }
       },
       {
         path: '/community/list',
-        name: 'communityList',
+        name: 'CommunityList',
         component: () => import('../views/community/CommunityList.vue'),
         meta: { title: '小区列表' }
       },
@@ -27,12 +33,6 @@ const routes = [
         name: 'BuildingList',
         component: () => import('../views/community/BuildingList.vue'),
         meta: { title: '楼栋管理' }
-      },
-      {
-        path: '/community/station',
-        name: 'stationList',
-        component: () => import('../views/community/StationList.vue'),
-        meta: { title: '驿站列表' }
       }
     ]
   },

src/views/community/BuildingList.vue

@@ -1,4 +1,5 @@
 <template>
+  <page-container>
     <div class="building-list">
       <div class="table-header">
         <h1>楼栋列表</h1>
@@ -87,6 +88,7 @@
         </a-form>
       </a-modal>
     </div>
+  </page-container>
 </template>
 
 <script>
@@ -94,8 +96,12 @@ import { defineComponent, ref, onMounted } from 'vue'
 import { message } from 'ant-design-vue'
 import { getBuildingList, getCommunityList, createBuilding } from '@/api/community'
 import dayjs from 'dayjs'
+import PageContainer from '@/components/PageContainer.vue'
 
 export default defineComponent({
+  components: {
+    PageContainer
+  },
   setup() {
     const loading = ref(false)
     const tableData = ref([])

src/views/community/CommunityList.vue

@@ -1,4 +1,5 @@
 <template>
+  <page-container>
     <div class="community-list">
       <div class="table-header">
         <h1>小区列表</h1>
@@ -117,6 +118,7 @@
         </a-form>
       </a-modal>
     </div>
+  </page-container>
 </template>
 
 <script>
@@ -125,9 +127,11 @@ import { message, Tag } from 'ant-design-vue'
 import { getCommunityList, createCommunity } from '@/api/community'
 import { initAMap, createMap } from '@/utils/amap'
 import dayjs from 'dayjs'
+import PageContainer from '@/components/PageContainer.vue'
 
 export default defineComponent({
   components: {
+    PageContainer,
     [Tag.name]: Tag
   },
   setup() {

src/views/dashboard/Dashboard.vue

@@ -0,0 +1,127 @@
+<template>
+  <page-container>
+    <h2>欢迎使用后台管理系统</h2>
+    <p class="time">{{ currentTime }}</p>
+
+    <div class="stats-section">
+      <div class="stat-item">
+        <div class="stat-label">小区总数</div>
+        <div class="stat-value">{{ stats.communityCount }}</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-label">楼栋总数</div>
+        <div class="stat-value">{{ stats.buildingCount }}</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-label">用户总数</div>
+        <div class="stat-value">{{ stats.userCount }}</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-label">今日活跃</div>
+        <div class="stat-value">{{ stats.activeCount }}</div>
+      </div>
+    </div>
+  </page-container>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted, onUnmounted } from 'vue'
+import dayjs from 'dayjs'
+import PageContainer from '@/components/PageContainer.vue'
+
+export default defineComponent({
+  components: {
+    PageContainer
+  },
+  setup() {
+    const currentTime = ref('')
+    const stats = ref({
+      communityCount: 0,
+      buildingCount: 0,
+      userCount: 0,
+      activeCount: 0
+    })
+
+    // 更新时间
+    const updateTime = () => {
+      currentTime.value = dayjs().format('YYYY年MM月DD日 HH:mm:ss')
+    }
+
+    // 定时器
+    let timer = null
+
+    onMounted(() => {
+      // 初始化时间
+      updateTime()
+      // 每秒更新时间
+      timer = setInterval(updateTime, 1000)
+
+      // TODO: 这里可以添加获取统计数据的API调用
+      // 目前使用模拟数据
+      stats.value = {
+        communityCount: 25,
+        buildingCount: 168,
+        userCount: 1280,
+        activeCount: 368
+      }
+    })
+
+    onUnmounted(() => {
+      // 清除定时器
+      if (timer) {
+        clearInterval(timer)
+      }
+    })
+
+    return {
+      currentTime,
+      stats
+    }
+  }
+})
+</script>
+
+<style scoped>
+.dashboard {
+  /* 移除 background、padding、margin 等样式 */
+}
+
+.dashboard h2 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: normal;
+  color: #000;
+}
+
+.time {
+  margin: 8px 0 24px;
+  font-size: 13px;
+  color: #999;
+}
+
+.stats-section {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  background: #fff;
+}
+
+.stat-item {
+  background: #fff;
+  padding: 20px;
+  border: 1px solid #eee;
+  border-radius: 2px;
+}
+
+.stat-label {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 8px;
+}
+
+.stat-value {
+  font-size: 24px;
+  color: #1890ff;
+  font-weight: normal;
+}
+</style> 

src/views/user/UserList.vue

@@ -1,4 +1,5 @@
 <template>
+  <page-container>
     <div class="user-list">
       <div class="table-header">
         <h1>用户列表</h1>
@@ -22,14 +23,19 @@
         </template>
       </a-table>
     </div>
+  </page-container>
 </template>
 
 <script>
 import { defineComponent, ref, onMounted } from 'vue'
 import { message } from 'ant-design-vue'
 import { getUserList } from '@/api/user'
+import PageContainer from '@/components/PageContainer.vue'
 
 export default defineComponent({
+  components: {
+    PageContainer
+  },
   setup() {
     const loading = ref(false)
     const tableData = ref([])
@@ -149,4 +155,8 @@ export default defineComponent({
 :deep(.ant-table-content) {
   overflow-x: auto;
 }
+
+.user-list {
+  /* 保留其他必要样式 */
+}
 </style>