From 6547123a8394b840596b3e978dacb089e538b2b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=91=E5=B0=8F=E9=A9=AC?= <heixiaoma@gmail.com>
Date: Wed, 23 Jul 2025 17:15:25 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=9B=B8=E5=85=B3=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/package.json                    |   5 +-
 web/src/App.vue                     |   4 +-
 web/src/main.js                     |   6 +-
 web/src/router/index.js             |  24 ++
 web/src/style.css                   |  11 +
 web/src/views/appcenter.vue         | 646 ++++++++++++++++++++++++++++
 web/src/views/components/layout.vue | 120 ++++++
 web/src/views/home.vue              |  70 +++
 web/src/views/index.vue             |  13 +
 web/vite.config.js                  |   5 +-
 10 files changed, 896 insertions(+), 8 deletions(-)
 create mode 100644 web/src/router/index.js
 create mode 100644 web/src/views/appcenter.vue
 create mode 100644 web/src/views/components/layout.vue
 create mode 100644 web/src/views/home.vue
 create mode 100644 web/src/views/index.vue

diff --git a/web/package.json b/web/package.json
index bd277a7..65b299e 100644
--- a/web/package.json
+++ b/web/package.json
@@ -9,8 +9,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.1.11",
+    "element-plus": "^2.10.4",
     "vue": "^3.5.17",
-    "@tailwindcss/vite": "^4.1.11"
+    "vue-router": "4",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.0",
diff --git a/web/src/App.vue b/web/src/App.vue
index 7c1d25e..a1c3f8d 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -2,9 +2,7 @@
 </script>
 
 <template>
-<div>
-
-</div>
+  <router-view />
 </template>
 <style scoped>
 </style>
diff --git a/web/src/main.js b/web/src/main.js
index 2425c0f..ddac3eb 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -1,5 +1,7 @@
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
-
-createApp(App).mount('#app')
+import router from './router/index.js'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+createApp(App).use(router).use(ElementPlus).mount('#app')
diff --git a/web/src/router/index.js b/web/src/router/index.js
new file mode 100644
index 0000000..4ff9c03
--- /dev/null
+++ b/web/src/router/index.js
@@ -0,0 +1,24 @@
+import { createMemoryHistory, createRouter } from 'vue-router'
+
+import index from '../views/index.vue'
+import home from '../views/home.vue'
+import appcenter from '../views/appcenter.vue'
+
+const routes = [
+    {
+        path: '/', component: index,
+        children:[
+            {path: '', redirect: '/home'},
+            { path: '/home', component: home },
+            { path: '/app-center', component: appcenter }
+        ]
+    },
+]
+
+
+const router = createRouter({
+    history: createMemoryHistory(),
+    routes,
+})
+
+export default router;
diff --git a/web/src/style.css b/web/src/style.css
index d4b5078..6b66af3 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -1 +1,12 @@
 @import 'tailwindcss';
+/*
+ * 配置教程 https://juejin.cn/post/7480450288421109787
+*/
+@theme inline {
+    --color-primary: #085ce6;
+    --color-secondary: #FFB81C;
+    --color-dark: #12192C;
+    --color-light: #F5F7FA;
+    --color-muted: #6B7280;
+    --font-display: 'Inter', 'system-ui', 'sans-serif';
+}
diff --git a/web/src/views/appcenter.vue b/web/src/views/appcenter.vue
new file mode 100644
index 0000000..3bfe5f4
--- /dev/null
+++ b/web/src/views/appcenter.vue
@@ -0,0 +1,646 @@
+<template>
+  <div class="min-h-screen bg-gray-50 p-6">
+    <!-- 页面标题 -->
+    <div class="mb-8">
+      <h1 class="text-2xl font-bold text-gray-800 mb-2">应用中心</h1>
+      <p class="text-gray-600">发现和使用企业内部的各类应用系统</p>
+    </div>
+
+    <!-- 搜索和筛选 -->
+    <div class="bg-white rounded-lg shadow-sm p-4 mb-8">
+      <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
+        <div class="relative w-full md:w-1/3">
+          <el-input
+              v-model="searchQuery"
+              placeholder="搜索应用..."
+              :prefix-icon="Search"
+              clearable
+          ></el-input>
+        </div>
+
+        <div class="flex flex-wrap gap-2">
+          <el-button
+              v-for="category in categories"
+              :key="category.id"
+              :type="activeCategory === category.id ? 'primary' : 'text'"
+              @click="activeCategory = category.id"
+          >
+            {{ category.name }}
+          </el-button>
+          <el-button type="text" @click="activeCategory = 'all'">全部</el-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 我的应用 -->
+    <div class="mb-10">
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-xl font-semibold text-gray-800">我的应用</h2>
+        <div class="flex items-center gap-2">
+          <el-tooltip content="拖拽可调整顺序" placement="top">
+            <el-button type="text" icon="el-icon-rank" size="small"></el-button>
+          </el-tooltip>
+          <el-tooltip content="管理我的应用" placement="top">
+            <el-button type="text" icon="el-icon-setting" @click="showManageMyApps = true"></el-button>
+          </el-tooltip>
+        </div>
+      </div>
+
+      <!-- 使用draggable实现拖拽排序 -->
+
+
+      <draggable
+          v-model="myApps"
+          group="people"
+          @start="drag=true"
+          @end="onDragEnd"
+          class="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4"
+
+      >
+        <template #item="{element}">
+          <el-card
+              class="app-card cursor-pointer hover:shadow-lg transition-shadow duration-300 relative"
+              @click="openApp(element)"
+          >
+            <div class="absolute top-2 left-2 drag-handle cursor-move opacity-50 hover:opacity-100 transition-opacity mt-1">
+              <el-icon size="16"><Rank /></el-icon>
+            </div>
+            <!-- 卡片内容保持不变 -->
+            <div class="absolute top-2 right-2">
+              <el-button
+                  type="text"
+                  :icon="Delete"
+                  @click.stop="confirmRemoveFromMyApps(element)"
+              ></el-button>
+            </div>
+
+            <div class="flex flex-col items-center p-4">
+              <div class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center mb-3">
+                <el-icon :size="24" :class="element.icon"></el-icon>
+              </div>
+              <h3 class="font-medium text-gray-800 mb-1 text-center truncate w-full">{{ element.name }}</h3>
+              <p class="text-xs text-gray-500 text-center truncate w-full">{{ element.description }}</p>
+            </div>
+          </el-card>
+        </template>
+      </draggable>
+
+
+
+      <!-- 没有我的应用时的提示 -->
+      <div
+          v-if="myApps.length === 0 && !searchQuery.trim()"
+          class="col-span-full flex flex-col items-center justify-center py-10 text-gray-500"
+      >
+        <el-icon class="text-4xl mb-3"><Collection /></el-icon>
+        <p>您还没有添加任何应用到"我的应用"</p>
+        <el-button type="text" size="small" @click="showManageMyApps = true">添加应用</el-button>
+      </div>
+
+      <!-- 搜索无结果提示 -->
+      <div
+          v-if="filteredMyApps.length === 0 && searchQuery.trim()"
+          class="col-span-full flex flex-col items-center justify-center py-10 text-gray-500"
+      >
+        <el-icon class="text-4xl mb-3"><Search /></el-icon>
+        <p>没有找到匹配的应用</p>
+      </div>
+    </div>
+
+    <!-- 全部应用 -->
+    <div>
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-xl font-semibold text-gray-800">全部应用</h2>
+        <span class="text-sm text-gray-500">{{ filteredAllApps.length }} 个应用</span>
+      </div>
+
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+        <el-card
+            v-for="app in filteredAllApps"
+            :key="app.id"
+            class="app-card cursor-pointer hover:shadow-lg transition-shadow duration-300"
+            @click="openApp(app)"
+        >
+          <div class="flex flex-col items-center p-4">
+            <div class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center mb-3">
+              <el-icon :size="24" :class="app.icon"></el-icon>
+            </div>
+            <h3 class="font-medium text-gray-800 mb-1 text-center truncate w-full">{{ app.name }}</h3>
+            <p class="text-xs text-gray-500 text-center truncate w-full">{{ app.description }}</p>
+
+            <!-- 添加到我的应用按钮 -->
+            <el-button
+                v-if="!isAppInMyApps(app.id)"
+                type="text"
+                size="mini"
+                icon="el-icon-plus"
+                class="mt-2"
+                @click.stop="addToMyApps(app)"
+            >
+              添加
+            </el-button>
+          </div>
+        </el-card>
+
+        <!-- 没有应用时的提示 -->
+        <div
+            v-if="filteredAllApps.length === 0"
+            class="col-span-full flex flex-col items-center justify-center py-10 text-gray-500"
+        >
+          <el-icon class="text-4xl mb-3"><Search /></el-icon>
+          <p>没有找到匹配的应用</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- 管理我的应用对话框 -->
+    <el-dialog
+        title="管理我的应用"
+        :visible.sync="showManageMyApps"
+        width="40%"
+        :before-close="handleCloseManageMyApps"
+    >
+      <template #content>
+        <div class="p-4">
+          <p class="text-sm text-gray-600 mb-4">从下方选择您常用的应用添加到"我的应用"</p>
+
+          <el-input
+              v-model="manageSearchQuery"
+              placeholder="搜索应用..."
+              :prefix-icon="Search"
+              clearable
+              class="mb-4"
+          >
+          </el-input>
+
+          <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
+            <el-checkbox-group v-model="selectedApps">
+              <el-checkbox
+                  v-for="app in filteredManageApps"
+                  :key="app.id"
+                  :label="app.id"
+                  class="flex items-center"
+              >
+                <el-icon :class="app.icon" class="mr-2"></el-icon>
+                <span class="text-sm">{{ app.name }}</span>
+              </el-checkbox>
+            </el-checkbox-group>
+          </div>
+        </div>
+      </template>
+
+      <template #footer>
+        <el-button @click="showManageMyApps = false">取消</el-button>
+        <el-button type="primary" @click="saveMyApps">保存</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 删除确认对话框 -->
+    <el-dialog
+        title="确认删除"
+        :model-value="showDeleteConfirm"
+        width="30%"
+    >
+      <p>确定要从"我的应用"中移除 <span class="font-medium">{{ deletingAppName }}</span> 吗？</p>
+      <template #footer>
+        <el-button @click="showDeleteConfirm = false">取消</el-button>
+        <el-button type="danger" @click="confirmDelete">确认</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted } from 'vue'
+import draggable from 'vuedraggable'
+import {
+  Collection,
+  Search,
+  Delete,
+  Remove,
+  Rank,
+  // 应用图标
+  Monitor,
+  Document,
+  Setting,
+  User,
+  Message,
+  Calendar,
+  PieChart,
+  Download,
+  Upload,
+  Folder,
+  Clock,
+  Bell,
+  Lock,
+  Share,
+  Star
+} from '@element-plus/icons-vue'
+import { ElMessage, ElDialog } from 'element-plus'
+
+// 应用分类数据
+const categories = ref([
+  { id: 'workflow', name: '工作流程' },
+  { id: 'data', name: '数据分析' },
+  { id: 'communication', name: '沟通协作' },
+  { id: 'document', name: '文档管理' },
+  { id: 'system', name: '系统工具' }
+])
+
+// 应用类型定义
+interface App {
+  id: number
+  name: string
+  description: string
+  icon: any
+  category: string
+  url: string
+}
+
+const drag=ref(false)
+
+// 所有应用数据
+const allApps = ref<App[]>([
+  {
+    id: 1,
+    name: '项目管理系统',
+    description: '管理项目进度、任务分配和资源',
+    icon: Monitor,
+    category: 'workflow',
+    url: '/project-management'
+  },
+  {
+    id: 2,
+    name: '文档中心',
+    description: '企业级文档管理和协作平台',
+    icon: Document,
+    category: 'document',
+    url: '/document-center'
+  },
+  {
+    id: 3,
+    name: '企业邮箱',
+    description: '安全可靠的企业邮件系统',
+    icon: Message,
+    category: 'communication',
+    url: '/mail'
+  },
+  {
+    id: 4,
+    name: '人力资源系统',
+    description: '员工信息管理和人事流程',
+    icon: User,
+    category: 'workflow',
+    url: '/hr-system'
+  },
+  {
+    id: 5,
+    name: '数据分析平台',
+    description: '企业数据可视化和分析工具',
+    icon: PieChart,
+    category: 'data',
+    url: '/data-analysis'
+  },
+  {
+    id: 6,
+    name: '日程安排',
+    description: '团队和个人日程管理',
+    icon: Calendar,
+    category: 'workflow',
+    url: '/calendar'
+  },
+  {
+    id: 7,
+    name: '知识库',
+    description: '企业知识沉淀和共享平台',
+    icon: Folder,
+    category: 'document',
+    url: '/knowledge-base'
+  },
+  {
+    id: 8,
+    name: '视频会议',
+    description: '高清视频会议和远程协作',
+    icon: PieChart,
+    category: 'communication',
+    url: '/video-conference'
+  },
+  {
+    id: 9,
+    name: '系统设置',
+    description: '企业系统配置和管理',
+    icon: Setting,
+    category: 'system',
+    url: '/system-settings'
+  },
+  {
+    id: 10,
+    name: '数据备份',
+    description: '企业数据定期备份和恢复',
+    icon: Download,
+    category: 'system',
+    url: '/data-backup'
+  },
+  {
+    id: 11,
+    name: '报表生成器',
+    description: '自定义报表和数据导出',
+    icon: PieChart,
+    category: 'data',
+    url: '/report-generator'
+  },
+  {
+    id: 12,
+    name: '移动办公',
+    description: '随时随地处理工作事务',
+    icon: PieChart,
+    category: 'workflow',
+    url: '/mobile-office'
+  },
+  {
+    id: 13,
+    name: '文件传输',
+    description: '安全高效的大文件传输工具',
+    icon: Upload,
+    category: 'system',
+    url: '/file-transfer'
+  },
+  {
+    id: 14,
+    name: '工单系统',
+    description: 'IT服务请求和问题跟踪',
+    icon: PieChart,
+    category: 'workflow',
+    url: '/work-order'
+  },
+  {
+    id: 15,
+    name: '实时监控',
+    description: '系统性能和状态实时监控',
+    icon: Clock,
+    category: 'system',
+    url: '/monitoring'
+  },
+  {
+    id: 16,
+    name: '企业公告',
+    description: '公司通知和重要消息发布',
+    icon: Bell,
+    category: 'communication',
+    url: '/announcements'
+  },
+  {
+    id: 17,
+    name: '权限管理',
+    description: '用户权限和访问控制',
+    icon: Lock,
+    category: 'system',
+    url: '/permission-management'
+  },
+  {
+    id: 18,
+    name: '数据同步',
+    description: '多系统间数据实时同步',
+    icon: PieChart,
+    category: 'data',
+    url: '/data-sync'
+  },
+  {
+    id: 19,
+    name: '协作白板',
+    description: '团队在线协作和头脑风暴',
+    icon: Share,
+    category: 'communication',
+    url: '/collaboration-board'
+  },
+  {
+    id: 20,
+    name: '应用商店',
+    description: '发现和安装企业应用',
+    icon: Star,
+    category: 'system',
+    url: '/app-store'
+  }
+])
+
+// 我的应用ID列表（从本地存储加载或设置默认值）
+const myAppIds = ref<number[]>([])
+
+// 搜索和筛选相关状态
+const searchQuery = ref('')
+const activeCategory = ref('all')
+const showManageMyApps = ref(false)
+const manageSearchQuery = ref('')
+const selectedApps = ref<number[]>([])
+
+// 删除确认相关状态
+const showDeleteConfirm = ref(false)
+const deletingAppId = ref<number | null>(null)
+const deletingAppName = ref('')
+
+// 计算属性：我的应用列表
+const myApps = computed<App[]>({
+  get() {
+    // 保持与myAppIds相同的顺序
+    return myAppIds.value.map(id => allApps.value.find(app => app.id === id)).filter(Boolean) as App[]
+  },
+  set(newValue) {
+    // 当拖拽排序后更新myAppIds
+    myAppIds.value = newValue.map(app => app.id)
+  }
+})
+
+// 计算属性：筛选后的我的应用
+const filteredMyApps = computed(() => {
+  if (!searchQuery.value.trim()) return myApps.value
+
+  const query = searchQuery.value.toLowerCase().trim()
+  return myApps.value.filter(app =>
+      app.name.toLowerCase().includes(query) ||
+      app.description.toLowerCase().includes(query)
+  )
+})
+
+// 计算属性：筛选后的所有应用
+const filteredAllApps = computed(() => {
+  let apps = allApps.value
+
+  // 按分类筛选
+  if (activeCategory.value !== 'all') {
+    apps = apps.filter(app => app.category === activeCategory.value)
+  }
+
+  // 按搜索词筛选
+  if (searchQuery.value.trim()) {
+    const query = searchQuery.value.toLowerCase().trim()
+    apps = apps.filter(app =>
+        app.name.toLowerCase().includes(query) ||
+        app.description.toLowerCase().includes(query)
+    )
+  }
+
+  return apps
+})
+
+// 计算属性：管理对话框中的应用列表
+const filteredManageApps = computed(() => {
+  if (!manageSearchQuery.value.trim()) return allApps.value
+
+  const query = manageSearchQuery.value.toLowerCase().trim()
+  return allApps.value.filter(app =>
+      app.name.toLowerCase().includes(query) ||
+      app.description.toLowerCase().includes(query)
+  )
+})
+
+// 检查应用是否在我的应用中
+const isAppInMyApps = (appId: number) => {
+  return myAppIds.value.includes(appId)
+}
+
+// 添加应用到我的应用
+const addToMyApps = (app: App) => {
+  if (!isAppInMyApps(app.id)) {
+    myAppIds.value.push(app.id)
+    saveMyAppsToLocalStorage()
+
+    // 显示成功提示
+    ElMessage({
+      message: `已将"${app.name}"添加到我的应用`,
+      type: 'success'
+    })
+  }
+}
+
+// 显示删除确认对话框
+const confirmRemoveFromMyApps = (app: App) => {
+  console.log(app)
+  deletingAppId.value = app.id
+  deletingAppName.value = app.name
+  showDeleteConfirm.value = true
+}
+
+// 确认删除应用
+const confirmDelete = () => {
+  if (deletingAppId.value) {
+    myAppIds.value = myAppIds.value.filter(id => id !== deletingAppId.value)
+    saveMyAppsToLocalStorage()
+
+    // 显示成功提示
+    ElMessage({
+      message: `已从我的应用中移除"${deletingAppName.value}"`,
+      type: 'info'
+    })
+
+    // 关闭对话框
+    showDeleteConfirm.value = false
+    deletingAppId.value = null
+    deletingAppName.value = ''
+  }
+}
+
+// 打开应用
+const openApp = (app: App) => {
+  // 在实际应用中，这里可以实现跳转逻辑
+  console.log(`Opening app: ${app.name} (${app.url})`)
+
+  // 显示打开提示
+  ElMessage({
+    message: `正在打开"${app.name}"`,
+    type: 'info'
+  })
+}
+
+// 保存我的应用设置
+const saveMyApps = () => {
+  myAppIds.value = [...selectedApps.value]
+  saveMyAppsToLocalStorage()
+  showManageMyApps.value = false
+
+  // 显示保存成功提示
+  ElMessage({
+    message: '我的应用设置已保存',
+    type: 'success'
+  })
+}
+
+// 关闭管理对话框前的处理
+const handleCloseManageMyApps = (done: () => void) => {
+  // 恢复之前的选择
+  selectedApps.value = [...myAppIds.value]
+  done()
+}
+
+// 拖拽结束事件处理
+const onDragEnd = () => {
+  drag.value=false
+  // 拖拽排序后保存
+  saveMyAppsToLocalStorage()
+  ElMessage({
+    message: '应用顺序已更新',
+    type: 'success',
+    duration: 1000
+  })
+}
+
+// 将我的应用保存到本地存储
+const saveMyAppsToLocalStorage = () => {
+  localStorage.setItem('myApps', JSON.stringify(myAppIds.value))
+}
+
+// 从本地存储加载我的应用
+const loadMyAppsFromLocalStorage = () => {
+  const savedMyApps = localStorage.getItem('myApps')
+  if (savedMyApps) {
+    try {
+      myAppIds.value = JSON.parse(savedMyApps)
+    } catch (e) {
+      console.error('Failed to parse saved my apps', e)
+      // 解析失败时使用默认值
+      myAppIds.value = [1, 2, 3, 4]
+    }
+  } else {
+    // 如果没有保存的我的应用，设置一些默认值
+    myAppIds.value = [1, 2, 3, 4]
+  }
+
+  // 初始化管理对话框中的选择
+  selectedApps.value = [...myAppIds.value]
+}
+
+// 生命周期钩子：组件挂载后加载我的应用
+onMounted(() => {
+  loadMyAppsFromLocalStorage()
+})
+</script>
+
+<style scoped>
+.app-card {
+  border-radius: 10px;
+  transition: all 0.3s ease;
+}
+
+.app-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+/* 拖拽相关样式 */
+.drag-handle {
+  transition: all 0.2s;
+}
+
+.drag-handle:hover {
+  color: #409eff;
+}
+
+/* 隐藏拖拽过程中的默认高亮样式 */
+:deep(.ghost) {
+  opacity: 0.5;
+}
+
+:deep(.dragging) {
+  opacity: 0.8;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+</style>
\ No newline at end of file
diff --git a/web/src/views/components/layout.vue b/web/src/views/components/layout.vue
new file mode 100644
index 0000000..c7fe72d
--- /dev/null
+++ b/web/src/views/components/layout.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="flex flex-col h-screen overflow-hidden bg-gray-50">
+    <!-- 顶部导航栏 -->
+    <header class="bg-primary text-white shadow-md h-16 flex items-center justify-between px-6">
+      <!-- 左侧Logo和菜单按钮 -->
+      <div class="flex items-center">
+        <button @click="isCollapse = !isCollapse" class="mr-4 text-white focus:outline-none">
+          <el-icon><Fold /></el-icon>
+        </button>
+        <div class="flex items-center">
+          <el-icon><Platform /></el-icon>
+          <span class="ml-2 text-lg font-semibold hidden md:block">企业内网门户</span>
+        </div>
+      </div>
+
+      <!-- 右侧用户信息 -->
+      <div class="flex items-center">
+        <div class="relative mr-6">
+          <button class="relative text-white focus:outline-none">
+            <el-icon><Bell /></el-icon>
+            <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
+          </button>
+        </div>
+
+        <div class="flex items-center">
+          <img src="https://picsum.photos/200/200?random=1" alt="User Avatar" class="w-8 h-8 rounded-full object-cover">
+          <span class="ml-2 hidden sm:block">管理员</span>
+          <el-icon><CaretBottom /></el-icon>
+        </div>
+      </div>
+    </header>
+
+    <!-- 主内容区 -->
+    <div class="flex flex-1 overflow-hidden">
+      <!-- 侧边栏菜单 -->
+      <aside class="bg-white shadow-md z-10 transition-all duration-300" :style="{ width: isCollapse ? '64px' : '200px' }">
+        <el-menu
+            default-active="2"
+            class="el-menu-vertical-demo h-full"
+            :collapse="isCollapse"
+            @open="handleOpen"
+            @close="handleClose"
+            router
+        >
+          <el-menu-item index="/home">
+            <el-icon><IconMenu /></el-icon>
+            <template #title>首页</template>
+          </el-menu-item>
+          <el-menu-item index="/app-center">
+            <el-icon><IconMenu /></el-icon>
+            <template #title>应用中心</template>
+          </el-menu-item>
+          <el-sub-menu index="2">
+            <template #title>
+              <el-icon><Location /></el-icon>
+              <span>导航一</span>
+            </template>
+            <el-menu-item-group>
+              <template #title><span>分组一</span></template>
+              <el-menu-item index="1-1">菜单项一</el-menu-item>
+              <el-menu-item index="1-2">菜单项二</el-menu-item>
+            </el-menu-item-group>
+            <el-menu-item-group title="分组二">
+              <el-menu-item index="1-3">菜单项三</el-menu-item>
+            </el-menu-item-group>
+            <el-sub-menu index="1-4">
+              <template #title><span>菜单项四</span></template>
+              <el-menu-item index="1-4-1">子菜单项一</el-menu-item>
+            </el-sub-menu>
+          </el-sub-menu>
+          <el-menu-item index="3" disabled>
+            <el-icon><Document /></el-icon>
+            <template #title>导航三</template>
+          </el-menu-item>
+          <el-menu-item index="4">
+            <el-icon><Setting /></el-icon>
+            <template #title>导航四</template>
+          </el-menu-item>
+        </el-menu>
+      </aside>
+
+      <!-- 内容区域 -->
+      <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
+          <router-view></router-view>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import {
+  Document,
+  Menu as IconMenu,
+  Location,
+  Setting,
+  // 新增：导入需要使用的图标
+  Fold,
+  Platform,
+  Bell,
+  CaretBottom
+} from '@element-plus/icons-vue'
+
+const isCollapse = ref(false)
+
+const handleOpen = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+
+const handleClose = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+</script>
+
+<style scoped>
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  width: 200px;
+  min-height: 400px;
+}
+</style>
\ No newline at end of file
diff --git a/web/src/views/home.vue b/web/src/views/home.vue
new file mode 100644
index 0000000..b94df26
--- /dev/null
+++ b/web/src/views/home.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="max-w-7xl mx-auto">
+    <h1 class="text-2xl font-bold text-gray-800 mb-6">欢迎使用企业内网门户</h1>
+
+    <!-- 页面内容示例 -->
+    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+      <h2 class="text-xl font-semibold text-gray-700 mb-4">系统公告</h2>
+      <el-alert
+          title="系统升级通知"
+          type="info"
+          description="本系统将于本周六凌晨2点进行例行维护，预计维护时间为2小时。维护期间系统将暂停服务，请提前做好工作安排。"
+          show-icon
+          :closable="false"
+      ></el-alert>
+    </div>
+
+    <!-- 统计卡片示例 -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+      <el-card class="bg-white rounded-lg shadow-md p-4">
+        <div slot="header" class="flex justify-between items-center">
+          <span>项目统计</span>
+          <el-button icon="el-icon-refresh" circle size="small" type="text"></el-button>
+        </div>
+        <div class="flex items-center justify-center">
+          <el-progress :percentage="75" type="circle" :width="120"></el-progress>
+        </div>
+        <div class="text-center mt-2">
+          <p class="text-gray-500 text-sm">进行中项目</p>
+          <p class="text-blue-600 text-2xl font-bold">12/16</p>
+        </div>
+      </el-card>
+
+      <el-card class="bg-white rounded-lg shadow-md p-4">
+        <div slot="header" class="flex justify-between items-center">
+          <span>待办事项</span>
+          <el-button icon="el-icon-refresh" circle size="small" type="text"></el-button>
+        </div>
+        <div class="flex items-center justify-center">
+          <el-progress :percentage="40" type="circle" :width="120" color="#f56c6c"></el-progress>
+        </div>
+        <div class="text-center mt-2">
+          <p class="text-gray-500 text-sm">今日待办</p>
+          <p class="text-red-500 text-2xl font-bold">6/15</p>
+        </div>
+      </el-card>
+
+      <el-card class="bg-white rounded-lg shadow-md p-4">
+        <div slot="header" class="flex justify-between items-center">
+          <span>通知消息</span>
+          <el-button icon="el-icon-refresh" circle size="small" type="text"></el-button>
+        </div>
+        <div class="flex items-center justify-center">
+          <el-progress :percentage="20" type="circle" :width="120" color="#e6a23c"></el-progress>
+        </div>
+        <div class="text-center mt-2">
+          <p class="text-gray-500 text-sm">未读消息</p>
+          <p class="text-orange-500 text-2xl font-bold">3/15</p>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/web/src/views/index.vue b/web/src/views/index.vue
new file mode 100644
index 0000000..d6ed760
--- /dev/null
+++ b/web/src/views/index.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+import Layout from "./components/layout.vue";
+
+</script>
+
+<template>
+<layout></layout>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/web/vite.config.js b/web/vite.config.js
index fa2786c..9764ee1 100644
--- a/web/vite.config.js
+++ b/web/vite.config.js
@@ -5,7 +5,8 @@ import tailwindcss from '@tailwindcss/vite'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
-      vue(),
-    tailwindcss(),
+    vue(),
+    tailwindcss(
+    ),
   ],
 })