gxwebsoft/template-nuxt4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新版官网模板

Browse Source
This commit is contained in:
赵忠林
2026-04-29 01:33:33 +08:00
commit 0d82386f8f
341 changed files with 64526 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
docs/WEBSITE_PLAN.md Normal file
View File

@@ -0,0 +1,37 @@
# 官网规划（软件开发平台）
## 目标
- 清晰传达平台定位：`SaaS 开发平台` + `支持私有化部署` + `模板/插件生态` + `自动开通与初始化`
- 提升转化：让客户能快速理解“能做什么、怎么购买、怎么交付、怎么上线”
- SEO：覆盖「SaaS平台」「私有化部署」「低代码/建站」「模板市场」「插件市场」「多租户」等关键词组合
## 受众与核心诉求
- 企业客户（老板/IT负责人）：交付快、成本低、可私有化、可控可扩展
- 代理/集成商：可复用模板、插件变现、标准化交付
- 开发者：模块化、可扩展、文档与示例、插件开发规范
## 信息架构（建议路由）
- `/` 首页：一句话定位 + 关键能力 + 交付流程 + CTA（联系/试用/购买）
- `/platform` 平台能力：多租户、权限、模块化、扩展点、可观测、运维
- `/products` 产品矩阵：企业官网/电商/小程序/门户等（支持按行业/场景筛选）
- `/market` 模板&插件市场：模板、插件、购买/授权/更新、开发者入驻
- `/deploy` 部署方式：SaaS/私有化/混合；安全合规；交付清单
- `/flow` 业务流程（开通链路）：选品→支付→创建租户→初始化模块/数据→交付上线→续费/升级
- `/contact` 联系我们：表单/电话/微信/预约演示
## 主转化路径（业务流程对外表达）
1. 客户选择产品/套餐（产品矩阵、案例、能力对比）
2. 下单支付（支持模板/插件加购、增值项）
3. 自动开通（创建租户、绑定域名/应用信息、生成管理员）
4. 初始化（按所购产品加载模块、默认配置、演示数据/基础字典、权限菜单）
5. 交付上线（SaaS 直接可用；私有化交付镜像/包、部署文档、验收清单）
6. 运营与升级（插件更新、模板切换、续费/扩容、工单支持）
## 页面内容要点（首页优先）
- Hero：一句话定位 + “SaaS/私有化/生态”三要点 + 立即联系
- 能力卡片：多租户/模块/权限/模板/插件/支付开通/私有化
- 交付流程：用 Steps 展示开通链路
- 市场生态：模板与插件如何购买、如何生效、如何升级
- 部署安全：私有化交付、数据隔离、审计与权限
- 社会证明：客户案例/合作伙伴

387
docs/payment-integration.md Normal file
View File

@@ -0,0 +1,387 @@
# 支付与订单闭环实现指南
## 📦 已完成的前端实现
### 1. 支付 API 模块 (`app/api/payment/index.ts`)
提供统一的支付接口封装：
```typescript
import {
createWechatJsapiPay, // 微信 JSAPI 支付
createWechatH5Pay, // 微信 H5 支付
createWechatNativePay, // 微信 Native 扫码支付
createAlipayPay, // 支付宝网页支付
queryPayStatus, // 查询支付状态
detectPayEnvironment, // 检测支付环境
isWechatBrowser, // 检测微信浏览器
isAlipayBrowser // 检测支付宝浏览器
} from '@/api/payment'
```
### 2. 支付组件 (`app/components/payment/PaymentModal.vue`)
开箱即用的支付弹窗组件，支持：
- **微信 JSAPI** - 微信内置浏览器调起微信支付
- **微信 H5** - 非微信浏览器跳转微信H5支付页面
- **微信 Native** - 扫码支付，显示二维码
- **支付宝 WAP** - 跳转支付宝支付页面
- **余额支付** - 平台余额直接扣款
使用方式：
```vue
<template>
<PaymentModal
v-model:visible="payModalVisible"
:order-no="order.orderNo"
:order-id="order.orderId"
:pay-price="order.payPrice"
:available-methods="{ wechat: true, alipay: true, balance: false }"
@success="onPaySuccess"
/>
</template>
<script setup>
import PaymentModal from '@/components/payment/PaymentModal.vue'
const payModalVisible = ref(false)
function openPay(order) {
payModalVisible.value = true
}
function onPaySuccess(result) {
console.log('支付成功', result)
// 刷新订单列表等操作
}
</script>
```
### 3. 订单页面集成 (`app/pages/orders.vue`)
已完善 `goPay()`、`applyRefund()`、`cancelOrder()` 功能：
- 点击"去支付"打开支付弹窗
- 点击"申请退款"弹出确认框
- 点击"取消订单"弹出确认框
---
## 🔧 后端需要实现的接口
### 1. 微信 JSAPI 支付
```
POST /api/system/wx-jsapi-pay/unified-order
```
**请求参数：**
```json
{
"orderNo": "订单号",
"openId": "用户 OpenId",
"subject": "商品描述",
"body": "商品详情",
"totalAmount": 100, // 金额（分）
"returnUrl": "支付完成跳转URL"
}
```
**返回参数：**
```json
{
"code": 0,
"data": {
"prepayId": "预支付交易会话标识",
"codeUrl": "公众号 AppId",
"mwebUrl": "H5支付链接"
}
}
```
### 2. 微信 H5 支付
```
POST /api/system/wx-h5-pay/unified-order
```
**请求参数：** 同 JSAPI
**返回参数：**
```json
{
"code": 0,
"data": {
"mwebUrl": "https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?..."
}
}
```
### 3. 微信 Native 支付
```
POST /api/system/wx-native-pay/unified-order
```
**返回参数：**
```json
{
"code": 0,
"data": {
"codeUrl": "weixin://wxpay/bizpayurl?..."
}
}
```
### 4. 支付宝网页支付
```
POST /api/system/alipay/unified-order
```
**请求参数：**
```json
{
"orderNo": "订单号",
"subject": "商品标题",
"body": "商品描述",
"totalAmount": 100, // 金额（元）
"returnUrl": "支付完成跳转URL"
}
```
**返回参数：**
```json
{
"code": 0,
"data": {
"paymentUrl": "https://openapi.alipay.com/gateway.do?..."
}
}
```
### 5. 查询支付状态
```
GET /api/system/payment/query-status?orderNo=xxx
```
**返回参数：**
```json
{
"code": 0,
"data": {
"paid": true,
"payStatus": 1,
"orderStatus": 1,
"payTime": "2024-01-01 12:00:00",
"transactionId": "微信/支付宝交易号"
}
}
```
### 6. 取消订单
```
POST /api/system/order/cancel
```
**请求参数：**
```json
{
"orderId": 123
}
```
### 7. 申请退款
```
POST /api/system/order/refund
```
**请求参数：**
```json
{
"orderId": 123,
"reason": "退款原因"
}
```
---
## 🔐 微信支付配置
### 1. 微信商户平台配置
登录 [微信商户平台](https://pay.weixin.qq.com)，获取以下信息：
| 配置项 | 说明 |
|--------|------|
| AppID | 公众号应用ID |
| MchID | 商户号 |
| API Key | APIv2 密钥 |
| APIv3 Key | APIv3 密钥 |
| 证书 | 商户证书（用于退款等敏感操作） |
| AppSecret | 公众号应用密钥 |
### 2. 后端配置示例
```yaml
# application.yml
wechat:
pay:
app-id: wx1234567890abcdef
mch-id: 1234567890
api-key: xxxxxxxx
api-v3-key: xxxxxxxx
notify-url: https://your-domain.com/api/payment/notify
refund-url: https://your-domain.com/api/payment/refund-notify
cert-path: /path/to/apiclient_cert.p12
```
### 3. JSAPI 支付配置
需要在微信公众平台配置：
- **JS接口安全域名** - 发起支付的页面域名
- **网页授权域名** - 用于获取 OpenId
---
## 🔐 支付宝配置
### 1. 支付宝开放平台配置
登录 [支付宝开放平台](https://open.alipay.com)，创建应用并获取：
| 配置项 | 说明 |
|--------|------|
| AppID | 应用ID |
| PrivateKey | 应用私钥 |
| AlipayPublicKey | 支付宝公钥 |
### 2. 后端配置示例
```yaml
# application.yml
alipay:
app-id: 2021000000000000
private-key: xxxxxxxx
alipay-public-key: xxxxxxxx
notify-url: https://your-domain.com/api/payment/alipay-notify
return-url: https://your-domain.com/api/payment/alipay-return
```
---
## 📋 支付流程
### 微信 JSAPI 支付流程
```
┌─────────────┐
│ 用户下单 │
└──────┬──────┘
▼
┌─────────────┐
│ 后端创建订单 │
└──────┬──────┘
▼
┌─────────────────────────────────────┐
│ 前端调用 createWechatJsapiPay │
│ (传入 openId、订单信息) │
└──────┬────────────────────────────┘
▼
┌─────────────┐
│ 后端统一下单 │
│ 返回 prepayId │
└──────┬──────┘
▼
┌─────────────┐
│ 前端调起 │
│ WeixinJSBridge │
└──────┬──────┘
▼
┌─────────────┐
│ 用户输入密码 │
│ 完成支付 │
└──────┬──────┘
▼
┌─────────────────────────────────────┐
│ 微信回调后端 + 前端轮询 queryPayStatus │
└──────┬────────────────────────────┘
▼
┌─────────────┐
│ 显示支付成功 │
└─────────────┘
```
### 支付结果通知
后端需要实现支付结果回调：
```
POST /api/system/payment/notify (微信)
POST /api/system/payment/alipay-notify (支付宝)
```
收到回调后：
1. 验证签名
2. 更新订单状态
3. 返回 success 给支付方
---
## 🎯 快速开始
### 1. 完成后端接口
按照"后端需要实现的接口"章节实现各个支付接口。
### 2. 配置密钥
在微信商户平台和支付宝开放平台完成配置，获取必要的密钥。
### 3. 更新 API 路径
如果后端接口路径与设计不同，更新 `app/api/payment/index.ts` 中的接口路径。
### 4. 测试支付
1. 启动前端：`pnpm dev`
2. 登录后进入订单页面
3. 点击"去支付"测试支付流程
---
## 📝 注意事项
### 1. 金额单位
- **前端传给后端**：元（保留2位小数）或 分（整数）
- **微信/支付宝**：通常使用**分**
- 建议前端统一传元，后端转为分
### 2. 订单号
- 建议使用业务方生成的唯一订单号
- 避免重复支付
- 建议格式：`PAY + 时间戳 + 随机数`
### 3. 回调通知
- 必须实现支付结果回调
- 回调地址需要公网可访问
- 注意防止重复处理
### 4. 安全建议
- 所有支付相关接口需要登录验证
- 金额计算在后端完成
- 签名验证在前端不做，后端完成
---
## 🔗 相关资源
- [微信支付开发文档](https://pay.weixin.qq.com/wiki/doc/apiv3/index.shtml)
- [支付宝支付文档](https://opendocs.alipay.com/open/270)
- [JSSDK 使用说明](https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html)

53
docs/sql/app_subscription.sql Normal file
View File

@@ -0,0 +1,53 @@
-- ============================================================
-- 应用订阅表
-- 用于记录用户在应用市场购买/订阅的应用
-- ============================================================
CREATE TABLE IF NOT EXISTS `app_subscription` (
`id` BIGINT PRIMARY KEY AUTO_INCREMENT,
`subscription_no` VARCHAR(64) NOT NULL COMMENT '订阅编号（业务唯一）',
`user_id` BIGINT NOT NULL COMMENT '购买用户ID',
`product_id` BIGINT NOT NULL COMMENT '应用产品ID',
`tenant_id` BIGINT DEFAULT NULL COMMENT '租户ID',
-- 订阅状态
`status` VARCHAR(20) NOT NULL DEFAULT 'pending' COMMENT 'pending-待支付, active-生效中, expired-已过期, cancelled-已取消',
-- 价格信息
`price_type` VARCHAR(20) NOT NULL COMMENT 'free-免费, one_time-一次性, subscription-订阅',
`original_price` DECIMAL(10,2) DEFAULT 0 COMMENT '原价（单位：元）',
`pay_price` DECIMAL(10,2) DEFAULT 0 COMMENT '实付金额（单位：元）',
`pay_type` TINYINT DEFAULT 0 COMMENT '支付方式: 0-余额, 1-微信, 2-支付宝, 12-免费',
`pay_status` TINYINT DEFAULT 0 COMMENT '0-未支付, 1-已支付',
`pay_time` DATETIME DEFAULT NULL COMMENT '支付时间',
`transaction_id` VARCHAR(128) DEFAULT NULL COMMENT '第三方交易号',
-- 订阅周期
`subscription_period` VARCHAR(10) DEFAULT NULL COMMENT 'month-按月, year-按年',
`start_time` DATETIME DEFAULT NULL COMMENT '生效时间',
`expire_time` DATETIME DEFAULT NULL COMMENT '到期时间（订阅型）',
`auto_renew` TINYINT DEFAULT 0 COMMENT '是否自动续费 0-否 1-是',
-- 应用实例信息（购买后分配）
`instance_domain` VARCHAR(255) DEFAULT NULL COMMENT '分配的域名',
`instance_admin_url` VARCHAR(500) DEFAULT NULL COMMENT '实例管理后台URL',
`instance_config` TEXT DEFAULT NULL COMMENT '实例配置（JSON）',
-- 关联支付订单号（复用统一支付）
`order_no` VARCHAR(64) DEFAULT NULL COMMENT '关联的支付订单号',
`order_id` BIGINT DEFAULT NULL COMMENT '关联的支付订单ID',
-- 通用字段
`remark` VARCHAR(500) DEFAULT NULL,
`deleted` TINYINT DEFAULT 0,
`sort_number` INT DEFAULT 0,
`create_time` DATETIME DEFAULT CURRENT_TIMESTAMP,
`update_time` DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
INDEX `idx_user_id` (`user_id`),
INDEX `idx_product_id` (`product_id`),
INDEX `idx_subscription_no` (`subscription_no`),
INDEX `idx_status` (`status`),
INDEX `idx_tenant_id` (`tenant_id`),
UNIQUE KEY `uk_user_product_active` (`user_id`, `product_id`, `deleted`) COMMENT '同一用户对同一应用只能有一个有效订阅'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='应用订阅表';

213
docs/开发计划.md Normal file
View File

@@ -0,0 +1,213 @@
现在我有了完整的了解。让我为你梳理一下 `/console/apps` 和 `/developer` 两个模块的衔接框架设计：
---
## 当前架构分析
### 1. **控制台 (`/console`)** - 面向终端用户
- **定位**：用户购买、订阅、管理已购应用的消费端
- **核心功能**：
- 查看已订阅的应用列表
- 进入应用后台管理
- 订单、账单、优惠券管理
- 账号设置
### 2. **开发者中心 (`/developer`)** - 面向开发者
- **定位**：开发者创建、开发、发布应用的生产端
- **核心功能**：
- 创建企业自建应用
- API Key 管理
- 源码与仓库权限申请
- 开发教程与文档
### 3. **模板市场 (`/market`)** - 应用展示与分发
- **定位**：应用展示、浏览、购买入口
- 目前只支持"查看详情"和"立即体验"，缺少购买/订阅流程
---
## 建议的衔接框架设计
```
┌─────────────────────────────────────────────────────────────────┐
│ 应用生态流转架构 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────┐ 发布/上架 ┌──────────────┐ │
│ │ 开发者中心 │ ──────────────────> │ 模板市场 │ │
│ │ /developer │ │ /market │ │
│ │ │ │ │ │
│ │ • 创建应用 │ │ • 应用展示 │ │
│ │ • 开发插件 │ │ • 插件展示 │ │
│ │ • 提交审核 │ │ • 官方认证 │ │
│ │ • 版本管理 │ │ • 推荐排序 │ │
│ └──────────────┘ └──────┬───────┘ │
│ ^ │ │
│ │ │ 购买/订阅 │
│ │ ▼ │
│ │ ┌──────────────┐ │
│ │ │ 控制台 │ │
│ │ │ /console │ │
│ │ │ │ │
│ │ │ • 我的应用 │ │
│ │ │ • 订单管理 │ │
│ │ │ • 应用配置 │ │
│ │ └──────────────┘ │
│ │ │ │
│ └────────────────────────────────────┘ │
│ 反馈/数据回流 │
│ │
└─────────────────────────────────────────────────────────────────┘
```
---
## 具体衔接方案
### 1. **应用生命周期状态流转**
建议增加 `publishStatus` 字段来区分应用的不同阶段：
| 状态 | 说明 | 可见范围 |
|------|------|----------|
| `developing` | 开发中 | 仅开发者自己 |
| `pending_review` | 待审核 | 开发者 + 平台审核人员 |
| `rejected` | 审核未通过 | 仅开发者自己 |
| `published` | 已上架 | 公开市场可见 |
| `deprecated` | 已下架 | 已购用户仍可用 |
### 2. **开发者中心新增功能**
```typescript
// 建议在 developer-nav.ts 中增加
export const developerNav: DeveloperNavItem[] = [
// ... 现有菜单
// 新增：应用发布管理
{ key: 'developer-publish', label: '发布管理', to: '/developer/publish', icon: '🚀', group: '开发资源', badge: 'NEW' },
{ key: 'developer-versions', label: '版本管理', to: '/developer/versions', icon: '🏷️', group: '开发资源' },
{ key: 'developer-analytics', label: '数据统计', to: '/developer/analytics', icon: '📊', group: '开发资源' },
]
```
### 3. **控制台应用中心增强**
当前 `/console/apps` 只显示用户已创建/协作的应用，建议增加：
- **应用商店入口**：从控制台直接跳转到市场购买
- **已购应用管理**：区分"自建应用"和"购买的应用"
- **应用配置**：对已购插件进行启用/禁用/配置
### 4. **模板市场购买流程**
当前市场只有"查看详情"和"立即体验"，需要增加：
1. **价格与订阅模式展示**
2. **购买/订阅按钮**
3. **支付流程**（跳转到控制台订单）
4. **购买后自动添加到控制台应用列表**
---
## 页面结构调整建议
### 开发者中心 (`/developer`)
```
/developer
├── / # 概览（已有）
├── /apps # 我的应用（已有）- 开发中的应用
├── /apikeys # API Key 管理（已有）
├── /source # 源码与仓库（已有）
├── /publish # 【新增】发布管理
│ ├── 提交上架申请
│ ├── 审核状态跟踪
│ └── 上下架操作
├── /versions # 【新增】版本管理
│ ├── 版本列表
│ ├── 发布新版本
│ └── 回滚操作
├── /analytics # 【新增】数据统计
│ ├── 安装量统计
│ ├── 活跃用户
│ └── 收入统计
├── /tutorial # 开发教程（已有）
├── /git # Git 账号绑定（已有）
└── /support # 支持与反馈（已有）
```
### 控制台 (`/console`)
```
/console
├── / # 控制台首页（已有）
├── /apps # 应用中心（增强）
│ ├── 我的应用（Tab 1）- 已有
│ ├── 应用商店（Tab 2）- 【新增】嵌入市场或跳转
│ └── 已购应用（Tab 3）- 【新增】管理购买的应用
├── /products # 已购产品（已有）
├── /orders # 订单记录（已有）
├── /invoices # 发票记录（已有）
├── /coupons # 优惠券（已有）
└── /account # 账号设置（已有）
```
---
## 数据模型建议
```typescript
// 应用表扩展字段
interface CmsWebsite {
// ... 现有字段
// 发布相关
publishStatus: 'developing' | 'pending_review' | 'published' | 'rejected' | 'deprecated'
isPublic: boolean // 是否公开到市场
isPlugin: boolean // 是否为插件（已有 plugin 字段）
priceType: 'free' | 'one_time' | 'subscription'
price: number // 价格（分）
subscriptionPeriod?: 'month' | 'year'
// 统计
installCount: number
rating: number
reviewCount: number
// 开发者信息
developerId: number
developerName: string
}
// 新增：应用订阅表
interface AppSubscription {
id: number
userId: number
websiteId: number
status: 'active' | 'expired' | 'cancelled'
startTime: string
endTime?: string
autoRenew: boolean
}
```
---
## 下一步实施建议
1. **短期（1-2周）**：
- 在 `/market` 增加购买按钮，跳转到 `/console/orders` 下单
- 在 `/console/apps` 增加"应用商店"快捷入口
- 在 `/developer/apps` 增加"提交上架"功能
2. **中期（1个月）**：
- 开发 `/developer/publish` 发布管理页面
- 实现应用审核流程
- 完善订阅/购买数据模型
3. **长期（2个月）**：
- 开发者收益统计
- 应用评分评论系统
- 插件依赖管理
你觉得这个框架设计符合你的预期吗？有哪些部分需要调整或优先实现？