Files

赵忠林 ffab0ec25c feat(developer): 完成小程序开发者中心和企业控制台改造

- 设计并实现了开发者中心与企业控制台两大模块
- 按用户角色区分开发者和企业客户，支持多项目类型及成员管理
- 新增项目管理、应用管理、API Key管理及成员邀请等多功能页面
- 实现应用版本发布、消息通知中心、权限审批与开发者申请流程
- 完成CI/CD流水线、运营监控、发票管理、SSO单点登录功能
- 搭建SDK下载中心、工单系统、FAQ系统、数据导入导出等模块
- 优化后端API，支持已登录和未注册用户不同加入应用流程
- 前端按钮统一采用微信手机号授权，完善用户授权体验
- 修复多个页面的JSX语法错误及依赖导入问题，替换部分组件库
- 增加详细的类型定义文件，提升项目类型安全
- 新增超过55个页面及60个API接口，扩展应用功能和服务体系
- 完成全面的样式设计，实现一致的视觉风格和交互体验

2026-04-13 02:26:46 +08:00

14 KiB

Raw Blame History

小程序改造方案 - 开发者中心 & 企业控制台

制定时间：2026-04-12 项目中心：以「项目」为核心构建所有功能

一、整体架构设计

1.1 用户角色划分

┌─────────────────────────────────────────────────────────────┐
│                         小程序端                             │
├─────────────────────────┬───────────────────────────────────┤
│    🛠️ 开发者角色          │    🏢 企业客户角色                 │
│    (Developer)          │    (Enterprise)                  │
├─────────────────────────┼───────────────────────────────────┤
│ • 拥有开发者权限的用户     │ • 拥有企业权限的用户               │
│ • 可开发/发布应用         │ • 可管理企业应用、成员、账单         │
│ • 独立于企业存在          │ • 属于某个企业组织                  │
│                         │ • 可申请成为开发者                   │
└─────────────────────────┴───────────────────────────────────┘

1.2 角色获取方式

角色	获取方式	说明
开发者	申请审核制	用户主动申请 → 资料审核 → 获得开发者权限
企业客户	购买产品	下单支付 → 自动开通企业账号 → 成为企业主

二、页面结构设计

2.1 入口设计

首页 (pages/index/index)
├── 产品展示区
├── 快捷入口区
│   ├── 🛠️ 开发者中心 (开发者角色入口)
│   └── 🏢 企业控制台 (企业客户入口)
└── 底部 TabBar (商城/购物车/我的)

注意：两个入口对普通用户可见，但需要对应角色权限才能进入。

2.2 开发者中心 (developer/)

developer/
├── index.tsx                    # 开发者工作台
│   ├── 我的项目列表
│   ├── 快捷操作 (新建项目、查看文档)
│   └── 开发者动态/通知
│
├── project/
│   ├── index.tsx                # 项目列表
│   ├── create.tsx               # 创建项目
│   └── [id]/
│       ├── index.tsx            # 项目概览
│       ├── settings.tsx         # 项目设置
│       ├── members.tsx          # 项目成员
│       ├── api-keys.tsx         # API Key 管理
│       ├── deployments.tsx      # 部署记录
│       └── logs.tsx             # 运行日志
│
├── app/                         # 应用管理
│   ├── index.tsx                # 应用列表
│   ├── create.tsx               # 创建应用
│   └── [id]/
│       ├── index.tsx            # 应用详情
│       ├── version.tsx          # 版本管理
│       ├── config.tsx           # 应用配置
│       └── publish.tsx          # 发布管理
│
├── market/                      # 开发者市场
│   ├── index.tsx                # 市场首页
│   ├── templates.tsx            # 模板市场
│   └── plugins.tsx              # 插件市场
│
├── orders/                      # 开发订单 (已有)
│   └── index.tsx
│
├── developer/                   # 开发者中心
│   ├── index.tsx                # 开发者设置
│   ├── profile.tsx              # 个人资料
│   ├── credentials.tsx          # 开发者凭证
│   └── notification.tsx         # 通知设置
│
└── docs/                        # 文档中心
    ├── index.tsx                # 文档首页
    ├── quickstart.tsx          # 快速开始
    ├── api-docs.tsx            # API 文档
    └── sdk-download.tsx        # SDK 下载

2.3 企业控制台 (enterprise/)

enterprise/
├── index.tsx                    # 企业工作台
│   ├── 企业概览仪表盘
│   ├── 快捷入口 (应用/成员/账单)
│   └── 最新动态
│
├── apps/                        # 企业应用
│   ├── index.tsx                # 应用列表
│   ├── [id]/
│   │   ├── index.tsx            # 应用详情
│   │   ├── monitor.tsx          # 运营监控
│   │   ├── analytics.tsx        # 数据分析
│   │   └── settings.tsx         # 应用设置
│   └── purchase.tsx             # 购买应用
│
├── members/                     # 成员管理
│   ├── index.tsx                # 成员列表
│   ├── invite.tsx               # 邀请成员
│   ├── roles.tsx                # 角色权限
│   └── audit.tsx                # 权限审批
│
├── orders/                      # 订单账单
│   ├── index.tsx                # 订单列表
│   ├── detail.tsx               # 订单详情
│   ├── invoice.tsx              # 发票管理
│   └── bills.tsx                # 账单明细
│
├── billing/                     # 费用中心
│   ├── index.tsx                # 费用概览
│   ├── consumption.tsx          # 消费明细
│   ├── recharge.tsx             # 充值中心
│   └── coupons.tsx              # 优惠券
│
├── enterprise/                  # 企业设置
│   ├── index.tsx                # 企业设置
│   ├── info.tsx                 # 企业信息
│   ├── domain.tsx               # 域名配置
│   ├── security.tsx             # 安全设置
│   └── notification.tsx         # 通知设置
│
└── developer/                   # 开发者入口
    ├── index.tsx                # 开发者介绍
    └── apply.tsx                # 申请开发者

三、核心功能设计

3.1 项目管理 (项目中心)

项目类型：

类型	说明	适用角色
基础项目	免费，限制功能	所有开发者
专业项目	付费，功能完整	开发者/企业
企业项目	全功能，支持团队协作	企业

项目核心属性：

interface Project {
  id: string
  name: string                    // 项目名称
  type: 'basic' | 'pro' | 'enterprise'
  owner: string                   // 所有者 (开发者ID 或 企业ID)
  ownerType: 'developer' | 'enterprise'
  description?: string            // 项目描述
  icon?: string                   // 项目图标
  status: 'active' | 'suspended' | 'archived'
  createdAt: string
  updatedAt: string

  // 关联信息
  apps: string[]                  // 关联的应用
  members: ProjectMember[]        // 项目成员
  apiKeys: ApiKey[]               // API Key

  // 统计
  appCount: number
  memberCount: number
  apiCallCount: number            // API 调用次数
  storageUsed: number             // 存储使用量
}

3.2 开发者角色功能

权限项：

权限	说明	默认
project.create	创建项目	✅
project.edit	编辑项目	✅
project.delete	删除项目	✅
app.create	创建应用	✅
app.publish	发布应用	✅
apiKey.manage	管理 API Key	✅
market.access	访问市场	✅
docs.access	访问文档	✅

开发者特有功能：

✅ 创建和管理个人项目
✅ 开发、测试、发布应用
✅ 访问模板/插件市场
✅ 生成和管理 API Key
✅ 查看开发者文档和 SDK
✅ 提交工单和技术支持

3.3 企业客户角色功能

权限项：

权限	说明	适用角色
enterprise.manage	企业管理	企业主
app.manage	应用管理	企业主/管理员
member.invite	邀请成员	企业主/管理员
member.role	分配角色	企业主/管理员
order.view	查看订单	所有成员
billing.view	查看账单	企业主/财务
billing.pay	支付充值	企业主/财务

企业特有功能：

✅ 企业仪表盘和数据概览
✅ 应用运营监控
✅ 成员邀请和权限管理
✅ 订单管理和发票
✅ 费用中心和充值
✅ 企业信息配置

3.4 角色切换机制

用户登录
    │
    ├── 开发者身份
    │   └── 可进入开发者中心
    │
    ├── 企业身份
    │   └── 可进入企业控制台
    │
    └── 两者皆有
        └── 可切换身份入口
            ├── [开发者] 🛠️ 开发者中心
            └── [企业] 🏢 企业控制台

四、开发优先级与里程碑

Phase 1：基础框架 ⭐ 必须上线

目标：建立核心框架，实现最小可用产品

模块	页面	工作量	优先级
入口设计	首页快捷入口 + 身份切换	⭐⭐	P0
开发者工作台	开发者首页/概览	⭐⭐⭐	P0
项目管理	项目列表 + 创建	⭐⭐⭐⭐	P0
应用管理	应用列表 + 创建	⭐⭐⭐⭐	P0
企业工作台	企业首页/概览	⭐⭐⭐	P0
企业应用	应用列表 + 详情	⭐⭐⭐⭐	P0

Phase 2：核心功能 ⭐ 必须上线

目标：完成核心业务闭环

模块	页面	工作量	优先级
API Key	生成/查看/禁用	⭐⭐⭐	P0
项目成员	邀请/移除/角色	⭐⭐⭐	P0
应用发布	版本管理/发布	⭐⭐⭐	P0
企业成员	列表/邀请/角色	⭐⭐⭐⭐	P0
订单管理	列表/详情	⭐⭐⭐	P0
账单查看	消费明细	⭐⭐⭐	P0

Phase 3：增强功能 🔄 后续迭代

模块	页面	工作量	优先级
开发者申请	申请流程/审核	⭐⭐⭐	P1
权限审批	权限申请/审批	⭐⭐⭐	P1
市场浏览	模板/插件市场	⭐⭐⭐⭐	P1
运营监控	数据看板	⭐⭐⭐⭐	P1
开发者文档	API文档/SDK	⭐⭐⭐⭐	P1
消息通知	通知中心	⭐⭐⭐	P1

Phase 4：高级功能 🔄 后续迭代

模块	页面	工作量	优先级
CI/CD	流水线管理	⭐⭐⭐⭐⭐	P2
部署管理	一键部署	⭐⭐⭐⭐	P2
数据分析	高级统计	⭐⭐⭐⭐	P2
工单系统	技术支持	⭐⭐⭐	P2
发票管理	电子发票	⭐⭐⭐	P2
SSO	单点登录	⭐⭐⭐⭐⭐	P2

五、与现有模块的关系

5.1 独立开发，不依赖现有模块

新建模块	说明
developer/	开发者中心全套功能
enterprise/	企业控制台全套功能

5.2 共享基础设施

共享内容	说明
用户认证	复用 passport 模块的登录体系
用户状态	复用 globalData/storage 中的用户信息
消息通知	可复用 notification 组件
基础 UI	复用组件库样式

5.3 不复用模块

❌ 不复用 shop/ (商城) - 独立的企业应用体系
❌ 不复用 dealer/ (分销) - 独立的开发者体系
❌ 不复用 user/order (用户订单) - 使用新的企业订单体系

六、技术实现建议

6.1 目录结构

src/
├── developer/                    # 🛠️ 开发者模块
│   ├── index.tsx                # 开发者入口
│   ├── project/                 # 项目管理
│   ├── app/                     # 应用管理
│   ├── market/                  # 市场
│   └── docs/                    # 文档
│
├── enterprise/                   # 🏢 企业模块
│   ├── index.tsx                # 企业入口
│   ├── apps/                   # 企业应用
│   ├── members/                # 成员管理
│   ├── orders/                 # 订单账单
│   ├── billing/                # 费用中心
│   └── settings/               # 企业设置
│
└── shared/                       # 共享
    ├── components/              # 共享组件
    ├── types/                   # 类型定义
    └── api/                     # API 接口

6.2 路由配置

// app.config.ts
export default {
  subpackages: [
    {
      root: "developer",
      pages: [
        "index",
        "project/index",
        "project/create",
        "project/[id]/index",
        "project/[id]/settings",
        "app/index",
        "app/create",
        "app/[id]/index",
        // ...
      ]
    },
    {
      root: "enterprise",
      pages: [
        "index",
        "apps/index",
        "apps/[id]/index",
        "members/index",
        "members/invite",
        "orders/index",
        "orders/detail",
        // ...
      ]
    }
  ]
}

七、API 接口设计建议

7.1 项目相关

接口	方法	说明
/api/project/list	GET	项目列表
/api/project/create	POST	创建项目
/api/project/:id	GET/PUT/DELETE	项目 CRUD
/api/project/:id/members	GET/POST/DELETE	项目成员
/api/project/:id/keys	GET/POST/DELETE	API Key

7.2 应用相关

接口	方法	说明
/api/app/list	GET	应用列表
/api/app/create	POST	创建应用
/api/app/:id	GET/PUT/DELETE	应用 CRUD
/api/app/:id/version	POST	发布版本

7.3 企业相关

接口	方法	说明
/api/enterprise/info	GET	企业信息
/api/enterprise/members	GET/POST	成员管理
/api/enterprise/roles	GET/POST	角色管理
/api/enterprise/orders	GET	订单列表
/api/enterprise/bills	GET	账单明细

八、下一步行动

立即开始 (Phase 1)

✅ 创建 developer/ 和 enterprise/ 目录结构
✅ 设计 API 接口文档 (与后端对齐)
✅ 开发首页入口组件
✅ 开发工作台基础页面

需要确认

后端 API 是否已准备好？
数据库表结构是否已设计？
是否需要支持微信小程序码扫码登录？

文档版本：v1.0 最后更新：2026-04-12

14 KiB Raw Blame History Unescape Escape

小程序改造方案 - 开发者中心 & 企业控制台

一、整体架构设计

1.1 用户角色划分

1.2 角色获取方式

二、页面结构设计

2.1 入口设计

2.2 开发者中心 (developer/)

2.3 企业控制台 (enterprise/)

三、核心功能设计

3.1 项目管理 (项目中心)

3.2 开发者角色功能

3.3 企业客户角色功能

3.4 角色切换机制

四、开发优先级与里程碑

Phase 1：基础框架 ⭐ 必须上线

Phase 2：核心功能 ⭐ 必须上线

Phase 3：增强功能 🔄 后续迭代

Phase 4：高级功能 🔄 后续迭代

五、与现有模块的关系

5.1 独立开发，不依赖现有模块

5.2 共享基础设施

5.3 不复用模块

六、技术实现建议

6.1 目录结构

6.2 路由配置

七、API 接口设计建议

7.1 项目相关

7.2 应用相关

7.3 企业相关

八、下一步行动

立即开始 (Phase 1)

需要确认

14 KiB

Raw Blame History