Skip to content

Latest commit

 

History

History
339 lines (291 loc) · 14.8 KB

interface-planning.md

File metadata and controls

339 lines (291 loc) · 14.8 KB

产品界面规划文档

1. 信息架构设计

1.1 整体架构

快速开发平台
├── 用户认证模块
│   ├── 登录页面
│   ├── 注册页面
│   └── 密码重置页面
├── 主控制台模块
│   ├── 仪表板首页
│   ├── 项目管理
│   ├── 用户设置
│   └── 帮助中心
├── 可视化设计器模块
│   ├── 设计器主界面
│   ├── 组件库面板
│   ├── 属性配置面板
│   ├── 页面管理面板
│   └── 预览窗口
├── 数据管理模块
│   ├── 数据源管理
│   ├── 数据模型设计
│   ├── API接口管理
│   └── 数据预览
└── 发布管理模块
    ├── 应用发布
    ├── 版本管理
    ├── 部署配置
    └── 监控面板

1.2 导航结构

主导航 (顶部导航栏)

  • Logo区域: 平台标识和首页链接
  • 项目切换: 当前项目名称和切换下拉
  • 功能模块: 设计器、数据管理、发布管理
  • 用户区域: 用户头像、设置、退出

侧边导航 (左侧边栏)

  • 仪表板: 首页概览
  • 我的项目: 项目列表和管理
  • 设计器: 可视化设计工具
  • 数据管理: 数据源和模型管理
  • 发布管理: 应用发布和版本管理
  • 设置: 用户和系统设置

面包屑导航

  • 显示当前页面在系统中的位置
  • 支持快速跳转到上级页面
  • 提供页面层级关系

1.3 页面层级关系

登录页面
    ↓
主控制台 (仪表板)
    ├── 项目管理
    │   ├── 项目列表
    │   ├── 项目详情
    │   └── 新建项目
    ├── 设计器
    │   ├── 设计器主界面
    │   ├── 组件库
    │   ├── 属性面板
    │   └── 预览窗口
    ├── 数据管理
    │   ├── 数据源列表
    │   ├── 数据源详情
    │   ├── 数据模型设计
    │   └── API管理
    └── 发布管理
        ├── 发布列表
        ├── 版本管理
        └── 部署配置

2. 界面布局规划

2.1 整体布局结构

标准布局 (1920x1080)

┌─────────────────────────────────────────────────────────┐
│                    顶部导航栏 (60px)                      │
├─────────────┬───────────────────────────────────────────┤
│             │                                           │
│   左侧边栏   │              主内容区域                    │
│   (280px)   │            (1640px)                      │
│             │                                           │
│             │                                           │
│             │                                           │
└─────────────┴───────────────────────────────────────────┘

紧凑布局 (1366x768)

┌─────────────────────────────────────────────────────────┐
│                    顶部导航栏 (50px)                      │
├─────────────┬───────────────────────────────────────────┤
│             │                                           │
│   左侧边栏   │              主内容区域                    │
│   (240px)   │            (1126px)                      │
│             │                                           │
│             │                                           │
└─────────────┴───────────────────────────────────────────┘

2.2 各模块界面布局

登录注册页面

┌─────────────────────────────────────────────────────────┐
│                                                         │
│                                                         │
│                   登录表单居中                           │
│                                                         │
│                                                         │
└─────────────────────────────────────────────────────────┘

主控制台页面

┌─────────────────────────────────────────────────────────┐
│                    顶部导航栏                            │
├─────────────┬───────────────────────────────────────────┤
│             │  ┌─────────┐ ┌─────────┐ ┌─────────┐     │
│   左侧边栏   │  │ 统计卡片 │ │ 统计卡片 │ │ 统计卡片 │     │
│             │  └─────────┘ └─────────┘ └─────────┘     │
│             │                                           │
│             │           项目列表/图表区域                │
│             │                                           │
└─────────────┴───────────────────────────────────────────┘

设计器页面

┌─────────────────────────────────────────────────────────┐
│                    顶部导航栏                            │
├─────────────┬───────────────────────────────────────────┤
│             │  ┌─────────┐ ┌─────────────────────────┐  │
│   组件库     │  │ 工具栏   │ │                         │  │
│   面板      │  └─────────┘ │      设计画布区域        │  │
│   (200px)   │              │                         │  │
│             │              └─────────────────────────┘  │
│             │  ┌─────────────────────────────────────┐  │
│             │  │          属性配置面板                │  │
│             │  └─────────────────────────────────────┘  │
└─────────────┴───────────────────────────────────────────┘

数据管理页面

┌─────────────────────────────────────────────────────────┐
│                    顶部导航栏                            │
├─────────────┬───────────────────────────────────────────┤
│             │  ┌─────────┐ ┌─────────────────────────┐  │
│   左侧边栏   │  │ 操作栏   │ │                         │  │
│             │  └─────────┘ │      数据列表/图表        │  │
│             │              │                         │  │
│             │              └─────────────────────────┘  │
│             │  ┌─────────────────────────────────────┐  │
│             │  │          详情/编辑面板               │  │
│             │  └─────────────────────────────────────┘  │
└─────────────┴───────────────────────────────────────────┘

3. 关键界面设计

3.1 登录注册模块

登录页面 (login.html)

  • 布局: 居中卡片式布局
  • 元素: Logo、用户名输入、密码输入、记住我、登录按钮、注册链接
  • 特色: 背景图片、动画效果、响应式设计

注册页面 (register.html)

  • 布局: 分步骤表单布局
  • 元素: 基本信息、邮箱验证、密码设置、完成注册
  • 特色: 步骤指示器、实时验证、进度保存

密码重置页面 (forgot-password.html)

  • 布局: 简洁表单布局
  • 元素: 邮箱输入、验证码、新密码设置
  • 特色: 倒计时、安全提示

3.2 主控制台模块

仪表板首页 (dashboard.html)

  • 布局: 网格布局 + 卡片组件
  • 元素:
    • 统计卡片：项目数量、用户数量、发布次数、活跃度
    • 图表区域：项目趋势图、用户增长图
    • 快捷操作：新建项目、导入项目、模板库
    • 最近活动：项目更新、团队动态
  • 特色: 数据可视化、实时更新、个性化推荐

项目管理页面 (projects.html)

  • 布局: 列表 + 筛选布局
  • 元素:
    • 搜索栏：项目名称搜索
    • 筛选器：状态、类型、时间筛选
    • 项目卡片：项目信息、操作按钮、状态标识
    • 分页器：分页导航
  • 特色: 拖拽排序、批量操作、快速预览

用户设置页面 (settings.html)

  • 布局: 标签页布局
  • 元素:
    • 个人信息：头像、姓名、邮箱、手机
    • 账户安全：密码修改、两步验证
    • 偏好设置：主题、语言、通知
    • 团队管理：成员管理、权限设置
  • 特色: 实时保存、安全验证、权限控制

3.3 可视化设计器模块

设计器主界面 (designer.html)

  • 布局: 三栏布局（组件库 + 画布 + 属性面板）
  • 元素:
    • 顶部工具栏：保存、预览、发布、撤销/重做
    • 左侧组件库：基础组件、业务组件、自定义组件
    • 中间画布：拖拽设计区域、网格线、标尺
    • 右侧属性面板：组件属性、样式设置、事件配置
    • 底部状态栏：页面信息、缩放控制
  • 特色: 拖拽交互、实时预览、快捷键支持

组件库面板 (component-library.html)

  • 布局: 分类列表布局
  • 元素:
    • 搜索栏：组件搜索
    • 分类标签：基础组件、表单组件、布局组件
    • 组件列表：组件缩略图、名称、描述
    • 预览窗口：组件预览、使用说明
  • 特色: 分类筛选、搜索高亮、拖拽添加

属性配置面板 (properties.html)

  • 布局: 分组表单布局
  • 元素:
    • 基础属性：ID、类名、文本内容
    • 样式属性：颜色、字体、尺寸、边距
    • 事件属性：点击、悬停、输入事件
    • 数据绑定：数据源、字段映射
  • 特色: 实时预览、智能提示、批量设置

3.4 数据管理模块

数据源管理页面 (data-sources.html)

  • 布局: 列表 + 详情布局
  • 元素:
    • 数据源列表：名称、类型、状态、操作
    • 添加按钮：新建数据源
    • 详情面板：连接信息、测试结果、使用统计
    • 操作菜单：编辑、删除、复制、测试
  • 特色: 连接测试、状态监控、使用统计

数据模型设计页面 (data-models.html)

  • 布局: 图形化编辑器布局
  • 元素:
    • 工具栏：添加表、添加字段、建立关系
    • 画布区域：表结构图、关系连线
    • 属性面板：表属性、字段属性
    • 预览区域：SQL预览、API预览
  • 特色: 拖拽编辑、关系连线、代码生成

API接口管理页面 (api-management.html)

  • 布局: 列表 + 编辑器布局
  • 元素:
    • API列表：接口名称、方法、路径、状态
    • 编辑器：接口定义、参数配置、响应设置
    • 测试工具：参数输入、请求发送、响应查看
    • 文档生成：自动生成API文档
  • 特色: 在线测试、文档生成、版本管理

3.5 发布管理模块

应用发布页面 (publish.html)

  • 布局: 步骤向导布局
  • 元素:
    • 步骤指示器：配置、构建、部署、完成
    • 配置面板：环境选择、参数设置
    • 构建日志：实时构建进度、错误信息
    • 部署状态：部署进度、状态监控
  • 特色: 步骤引导、实时监控、错误处理

版本管理页面 (versions.html)

  • 布局: 时间线布局
  • 元素:
    • 版本列表：版本号、发布时间、变更内容
    • 版本对比：代码差异、功能对比
    • 回滚操作：版本回退、数据恢复
    • 发布记录：发布历史、状态记录
  • 特色: 版本对比、一键回滚、发布记录

4. 响应式设计规划

4.1 断点设置

  • 大屏幕: ≥1920px (桌面显示器)
  • 中屏幕: 1366px - 1919px (笔记本)
  • 小屏幕: 768px - 1365px (平板)
  • 移动端: <768px (手机)

4.2 适配策略

  • 桌面端: 完整功能，多栏布局
  • 平板端: 简化功能，双栏布局
  • 手机端: 核心功能，单栏布局

4.3 交互适配

  • 鼠标操作: 悬停效果、右键菜单
  • 触摸操作: 点击反馈、手势支持
  • 键盘操作: 快捷键、Tab导航

5. 界面状态设计

5.1 加载状态

  • 页面加载: 骨架屏、进度条
  • 数据加载: 加载动画、占位符
  • 操作加载: 按钮状态、禁用状态

5.2 空状态

  • 无数据: 空状态插画、操作提示
  • 无权限: 权限提示、申请链接
  • 错误状态: 错误信息、重试按钮

5.3 成功状态

  • 操作成功: 成功提示、自动关闭
  • 保存成功: 保存状态、同步提示
  • 发布成功: 发布状态、访问链接

规划完成时间: 2025年10月22日
规划人员: PETERFEI
版本: 1.0.0