# layout > Squirrel 运维平台前端布局架构技能。提供前端整体架构设计、模块划分、数据流管理等高层次架构参考。在设计或调整前端架构时调用。 - Author: agocan - Repository: AgoCan/skill-demo - Version: 20260203212008 - Stars: 0 - Forks: 0 - Last Updated: 2026-02-06 - Source: https://github.com/AgoCan/skill-demo - Web: https://mule.run/skillshub/@@AgoCan/skill-demo~layout:20260203212008 --- --- name: "layout" description: "Squirrel 运维平台前端布局架构技能。提供前端整体架构设计、模块划分、数据流管理等高层次架构参考。在设计或调整前端架构时调用。" --- # Squirrel 运维平台前端布局架构 ## 项目概述 为 Squirrel API Server 构建前端架构系统，使用 Vue3 + TypeScript + Vite 技术栈，遵循反主流设计美学的现代化运维平台架构设计。 ## 技术栈 - Vue3 - TypeScript - Vite ## 架构设计 ### 1. 模块划分 #### 核心模块 - **layout**：布局系统核心模块 - **components**：通用组件库 - **views**：页面视图（多组件模式） - **router**：路由管理 - **store**：状态管理 - **api**：API 接口封装 - **utils**：工具函数 - **types**：类型定义 - **lang**：国际化语言包 #### 布局模块结构 ``` layout/ ├── index.ts # 布局模块入口 ├── components/ # 布局组件 │ ├── Navbar/ # 导航栏 │ ├── Sidebar/ # 侧边栏 │ ├── MainContent/ # 主内容区 │ └── Footer/ # 页脚 ├── composables/ # 布局相关组合式函数 ├── hooks/ # 布局相关钩子 └── types/ # 布局类型定义 ``` #### Views 模块结构（多组件模式） ``` views/ ├── Login/ # 登录页 │ ├── index.vue # 页面入口 │ ├── components/ # 页面内部组件 │ │ ├── LoginForm.vue # 登录表单 │ │ └── LoginFooter.vue # 登录页脚 │ ├── composables/ # 页面相关组合式函数 │ └── types/ # 页面类型定义 ├── Server/ # 服务器管理 │ ├── index.vue # 页面入口 │ ├── components/ # 页面内部组件 │ │ ├── ServerList.vue # 服务器列表 │ │ ├── ServerForm.vue # 服务器表单 │ │ └── ServerStatus.vue # 服务器状态 │ ├── composables/ # 页面相关组合式函数 │ └── types/ # 页面类型定义 ├── Application/ # 应用管理 │ ├── index.vue # 页面入口 │ ├── components/ # 页面内部组件 │ ├── composables/ # 页面相关组合式函数 │ └── types/ # 页面类型定义 └── Monitor/ # 监控页面 ├── index.vue # 页面入口 ├── components/ # 页面内部组件 ├── composables/ # 页面相关组合式函数 └── types/ # 页面类型定义 ``` #### Lang 模块结构 ``` lang/ ├── index.ts # 语言模块入口 ├── zh-CN/ # 中文语言包 │ ├── common.ts # 通用文本 │ ├── layout.ts # 布局文本 │ ├── login.ts # 登录页文本 │ ├── server.ts # 服务器管理文本 │ └── application.ts # 应用管理文本 ├── en-US/ # 英文语言包 │ ├── common.ts # 通用文本 │ ├── layout.ts # 布局文本 │ ├── login.ts # 登录页文本 │ ├── server.ts # 服务器管理文本 │ └── application.ts # 应用管理文本 └── i18n.ts # 国际化配置 ``` ### 2. 数据流管理 #### 状态管理 - 使用 Pinia 进行状态管理 - 布局状态集中管理（侧边栏展开/折叠、布局模式等） - 全局状态与局部状态分离 #### 数据流方向 1. **用户操作** → 触发组件事件 2. **事件处理** → 调用状态管理 3. **状态更新** → 触发组件重新渲染 4. **布局变化** → 响应式调整 ### 3. 路由架构 #### 路由配置 - 基于 Vue Router 4 - 嵌套路由结构 - 路由元信息管理布局模式 #### 路由守卫 - 全局前置守卫：权限检查 - 路由变化时的布局调整 ### 4. 响应式架构 #### 断点系统 - 基于 CSS 变量的断点定义 - 响应式布局策略 - 设备类型检测 #### 适配策略 - 移动端：组件重排、功能简化 - 平板：布局调整、空间优化 - 桌面：完整功能、多栏布局 ## 布局模式 ### 1. 全屏模式 - **适用场景**：登录页、欢迎页 - **架构特点**：独立布局、无嵌套导航 - **组件层次**：单层组件结构 ### 2. 标准模式 - **适用场景**：大部分管理页面 - **架构特点**：多层嵌套、完整导航 - **组件层次**：Navbar → Sidebar → MainContent ### 3. 紧凑模式 - **适用场景**：数据密集型页面 - **架构特点**：侧边栏折叠、内容区域最大化 - **状态管理**：动态调整布局状态 ### 4. 详情模式 - **适用场景**：详情查看页面 - **架构特点**：侧边栏可选、内容区域为主 - **路由配置**：独立路由配置 ## 组件设计原则 ### 1. 组件化架构 - **单一职责**：每个组件只负责一个功能 - **可复用性**：设计通用可复用组件 - **可组合性**：支持组件嵌套组合 ### 2. 通信机制 - **Props/Events**：父子组件通信 - **Provide/Inject**：跨层级组件通信 - **Pinia**：全局状态管理 - **EventBus**：非父子组件通信 ### 3. 性能优化 - **虚拟滚动**：长列表优化 - **组件懒加载**：按需加载组件 - **缓存策略**：合理缓存布局状态 - **防抖节流**：优化用户输入 ## 扩展性设计 ### 1. 主题系统 - 基于 CSS 变量的主题定义 - 支持明暗主题切换 - 主题配置可扩展 ### 2. 插件系统 - 布局插件接口 - 支持第三方插件集成 - 自定义布局扩展 ### 3. 国际化 - 布局文本国际化支持 - 多语言布局适配 - 时区和日期格式处理 ## 架构最佳实践 ### 1. 代码组织 - 按功能模块划分目录 - 统一命名规范 - 清晰的文件结构 ### 2. 类型安全 - 完整的 TypeScript 类型定义 - 接口和类型复用 - 类型检查严格模式 ### 3. 测试策略 - 单元测试：组件测试 - 集成测试：布局功能测试 - E2E 测试：用户流程测试 ### 4. 部署策略 - 静态资源优化 - 代码分割 - 按需加载 ## 架构决策记录 ### 1. 为什么选择 Vue3 + TypeScript - **Vue3**：组合式 API、更好的 TypeScript 支持、性能优化 - **TypeScript**：类型安全、更好的开发体验、代码可维护性 ### 2. 为什么采用模块化布局 - **可维护性**：模块划分清晰，易于维护 - **可扩展性**：支持功能扩展和定制 - **可测试性**：模块独立，便于测试 ### 3. 为什么使用 Pinia 进行状态管理 - **TypeScript 支持**：更好的类型推断 - **模块化**：支持模块拆分 - **轻量**：比 Vuex 更轻量 ## 架构使用指南 ### 1. 初始化布局 1. 导入布局模块 2. 配置布局选项 3. 注册布局组件 ### 2. 自定义布局 1. 扩展基础布局组件 2. 注册自定义布局模式 3. 配置路由元信息 ### 3. 布局状态管理 1. 访问布局状态 2. 修改布局配置 3. 监听布局变化 始终记住：架构设计是前端系统的骨架，良好的架构能够支撑系统的可维护性和可扩展性！