站点地图

文档编号: SYS-UX-IA-001
版本: 1.0 (基线版本)
日期: 2026-03-09
编制: UI/UX设计师
审核: 产品经理
批准: 项目总监
状态: ✓ 已基线

一、文档概述

1.1 文档目的

本文档定义系统的整体信息架构，包括页面层级结构、页面关系、以及各页面的核心功能，为后续的导航设计和界面设计提供基础框架。

1.2 参考文档

二、站点地图总览

┌─────────────────────────────────────────────────────────────────────────────┐
│                              系统平台 (Linsir)                               │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                             │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐   │
│  │   登录页     │  │   首页       │  │  个人中心    │  │  系统设置    │   │
│  │   /login     │  │   /home      │  │  /profile    │  │  /settings   │   │
│  └──────────────┘  └──────┬───────┘  └──────────────┘  └──────────────┘   │
│                           │                                                 │
│           ┌───────────────┼───────────────┐                                 │
│           │               │               │                                 │
│           ▼               ▼               ▼                                 │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐                       │
│  │  用户管理    │  │  组织架构    │  │  权限管理    │                       │
│  │  /user       │  │  /org        │  │  /role       │                       │
│  └──────┬───────┘  └──────┬───────┘  └──────┬───────┘                       │
│         │                 │                 │                               │
│         ▼                 ▼                 ▼                               │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐                       │
│  │  用户列表    │  │  部门管理    │  │  角色列表    │                       │
│  │  /user/list  │  │  /org/dept   │  │  /role/list  │                       │
│  └──────────────┘  └──────────────┘  └──────────────┘                       │
│                                                                             │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐                       │
│  │  系统监控    │  │  日志管理    │  │  系统配置    │                       │
│  │  /monitor    │  │  /log        │  │  /config     │                       │
│  └──────────────┘  └──────────────┘  └──────────────┘                       │
│                                                                             │
└─────────────────────────────────────────────────────────────────────────────┘

三、页面层级结构

3.1 一级页面

页面名称	路由	说明	访问权限
登录页	/login	用户登录入口	公开
首页	/home	系统仪表盘	已登录用户
个人中心	/profile	个人信息管理	已登录用户
系统设置	/settings	系统配置	系统管理员

3.2 业务模块页面

3.2.1 用户管理模块 (/user)

页面名称	路由	说明	父页面
用户列表	/user/list	用户数据展示与管理	首页
用户创建	/user/create	新建用户表单	用户列表
用户编辑	/user/edit/:id	编辑用户信息	用户列表
用户详情	/user/detail/:id	用户详细信息	用户列表
批量导入	/user/import	批量导入用户	用户列表

3.2.2 组织架构模块 (/org)

页面名称	路由	说明	父页面
部门管理	/org/dept	部门树形管理	首页
组织架构图	/org/chart	可视化组织架构	部门管理
岗位管理	/org/post	岗位设置	部门管理

3.2.3 权限管理模块 (/role)

页面名称	路由	说明	父页面
角色列表	/role/list	角色管理	首页
角色创建	/role/create	新建角色	角色列表
角色编辑	/role/edit/:id	编辑角色	角色列表
权限分配	/role/permission/:id	分配权限	角色列表

3.2.4 系统监控模块 (/monitor)

页面名称	路由	说明	父页面
在线用户	/monitor/online	在线用户监控	首页
系统状态	/monitor/status	系统运行状态	首页

3.2.5 日志管理模块 (/log)

页面名称	路由	说明	父页面
操作日志	/log/operation	操作记录查询	首页
登录日志	/log/login	登录记录查询	首页

3.2.6 系统配置模块 (/config)

页面名称	路由	说明	父页面
参数配置	/config/param	系统参数设置	首页
字典管理	/config/dict	数据字典管理	首页

四、页面关系图

4.1 用户访问流程

                    ┌──────────────┐
                    │    登录页    │
                    │   /login     │
                    └──────┬───────┘
                           │ 登录成功
                           ▼
                    ┌──────────────┐
                    │    首页      │
                    │   /home      │
                    └──────┬───────┘
                           │
           ┌───────────────┼───────────────┐
           │               │               │
           ▼               ▼               ▼
    ┌──────────────┐ ┌──────────────┐ ┌──────────────┐
    │  用户管理    │ │  组织架构    │ │  权限管理    │
    │  /user/*     │ │  /org/*      │ │  /role/*     │
    └──────────────┘ └──────────────┘ └──────────────┘

4.2 用户管理模块页面关系

                    ┌──────────────┐
                    │  用户列表页  │
                    │ /user/list   │
                    └──────┬───────┘
                           │
        ┌──────────────────┼──────────────────┐
        │                  │                  │
        ▼                  ▼                  ▼
┌──────────────┐  ┌──────────────┐  ┌──────────────┐
│  用户创建页  │  │  用户编辑页  │  │  用户详情页  │
│ /user/create │  │/user/edit/:id│  │/user/detail  │
└──────────────┘  └──────────────┘  └──────────────┘
        │
        ▼
┌──────────────┐
│  批量导入页  │
│ /user/import │
└──────────────┘

4.3 组织架构模块页面关系

                    ┌──────────────┐
                    │  部门管理页  │
                    │ /org/dept    │
                    └──────┬───────┘
                           │
        ┌──────────────────┼──────────────────┐
        │                  │                  │
        ▼                  ▼                  ▼
┌──────────────┐  ┌──────────────┐  ┌──────────────┐
│ 组织架构图页 │  │  岗位管理页  │  │  部门详情页  │
│ /org/chart   │  │ /org/post    │  │ /org/dept/   │
└──────────────┘  └──────────────┘  └──────────────┘

五、页面详细说明

页面类型: 独立页面 访问权限: 公开 核心功能:

账号密码登录
验证码验证
记住密码
忘记密码链接

设计要点:

简洁的登录表单
清晰的错误提示
品牌Logo展示

5.2 首页 (/home)

页面类型: 布局页面（含侧边栏+顶部栏） 访问权限: 已登录用户 核心功能:

数据概览卡片
快捷入口
系统公告
待办事项

设计要点:

信息密度适中
关键数据突出
快速导航便捷

5.3 用户列表页 (/user/list)

页面类型: 列表页面 访问权限: 系统管理员 核心功能:

用户数据表格
搜索筛选
分页浏览
批量操作
快捷操作按钮

设计要点:

表格列宽合理
操作按钮明确
筛选条件清晰

5.4 组织架构页 (/org/dept)

页面类型: 树形+表格混合页面 访问权限: 系统管理员 核心功能:

部门树形展示
部门增删改查
人员分配
组织架构图切换

设计要点:

树形结构清晰
拖拽操作支持
层级关系明确

六、移动端适配

6.1 移动端页面清单

页面名称	路由	适配方式
登录页	/login	响应式
首页	/home	响应式
个人中心	/profile	响应式
用户列表	/user/list	简化版
部门管理	/org/dept	简化版

6.2 移动端设计原则

简化信息展示
优化触控区域
底部导航栏
卡片式布局

七、技术实现建议

7.1 路由设计

typescript

// 路由配置示例
const routes = [
  {
    path: '/login',
    component: Login,
    meta: { public: true }
  },
  {
    path: '/',
    component: Layout,
    children: [
      { path: 'home', component: Home },
      { path: 'user/list', component: UserList },
      { path: 'org/dept', component: DeptManagement },
      // ...
    ]
  }
];

7.2 面包屑导航

当前页面	面包屑
用户列表	首页 > 用户管理 > 用户列表
用户创建	首页 > 用户管理 > 用户列表 > 创建用户
部门管理	首页 > 组织架构 > 部门管理

八、修订记录

版本	日期	作者	变更内容
1.0	2026-03-09	UI/UX设计师	初始版本，创建站点地图

文档状态: ⏳ 进行中
最后更新: 2026-03-09
文档作者: UI/UX设计师

站点地图 ​

一、文档概述 ​

1.1 文档目的 ​

1.2 参考文档 ​

二、站点地图总览 ​

三、页面层级结构 ​

3.1 一级页面 ​

3.2 业务模块页面 ​

3.2.1 用户管理模块 (/user) ​

3.2.2 组织架构模块 (/org) ​

3.2.3 权限管理模块 (/role) ​

3.2.4 系统监控模块 (/monitor) ​

3.2.5 日志管理模块 (/log) ​

3.2.6 系统配置模块 (/config) ​

四、页面关系图 ​

4.1 用户访问流程 ​

4.2 用户管理模块页面关系 ​

4.3 组织架构模块页面关系 ​

五、页面详细说明 ​

5.1 登录页 (/login) ​

5.2 首页 (/home) ​

5.3 用户列表页 (/user/list) ​

5.4 组织架构页 (/org/dept) ​

六、移动端适配 ​

6.1 移动端页面清单 ​

6.2 移动端设计原则 ​

七、技术实现建议 ​

7.1 路由设计 ​

7.2 面包屑导航 ​

八、修订记录 ​

站点地图

一、文档概述

1.1 文档目的

1.2 参考文档

二、站点地图总览

三、页面层级结构

3.1 一级页面

3.2 业务模块页面

3.2.1 用户管理模块 (/user)

3.2.2 组织架构模块 (/org)

3.2.3 权限管理模块 (/role)

3.2.4 系统监控模块 (/monitor)

3.2.5 日志管理模块 (/log)

3.2.6 系统配置模块 (/config)

四、页面关系图

4.1 用户访问流程

4.2 用户管理模块页面关系

4.3 组织架构模块页面关系

五、页面详细说明

5.1 登录页 (/login)

5.2 首页 (/home)

5.3 用户列表页 (/user/list)

5.4 组织架构页 (/org/dept)

六、移动端适配

6.1 移动端页面清单

6.2 移动端设计原则

七、技术实现建议

7.1 路由设计

7.2 面包屑导航

八、修订记录