项目简介

这是一个基于 Nuxt.js + TypeScript + Element Plus 的 PC 端长文写作系统前端项目，提供完整的长文生成、用户管理、支付、分销等商业化功能。

技术栈

核心框架

Nuxt.js - Vue 3 全栈框架

TypeScript - 类型安全

Element Plus - UI 组件库

Tailwind CSS - 原子化 CSS 框架

Pinia - 状态管理

开发工具

ESLint - 代码规范检查

Prettier - 代码格式化

npm/yarn - 包管理器
项目结构

pc/
├── api/ # API 接口层
│ ├── account.ts # 账户相关接口
│ ├── generate.ts # 生成功能接口
│ ├── pay.ts # 支付相关接口
│ ├── distribution.ts # 分销系统接口
│ ├── news.ts # 新闻资讯接口
│ ├── shop.ts # 商城接口
│ └── record.ts # 记录管理接口
│
├── assets/ # 静态资源
│ ├── images/ # 图片资源
│ └── styles/ # 全局样式
│
├── components/ # 组件层
│ ├── form-designer/ # 表单设计器
│ ├── cropper-upload/ # 图片裁剪上传
│ ├── daterange-picker/ # 日期范围选择器
│ ├── pagination/ # 分页组件
│ ├── reduction-order/ # 订单减免
│ ├── reduction-pay/ # 支付减免
│ └── user-pop/ # 用户弹窗
│
├── composables/ # 组合式函数
│ ├── useLockFn.ts # 防抖锁函数
│ ├── useMenu.ts # 菜单管理
│ └── usePolling.ts # 轮询功能
│
├── constants/ # 常量定义
│ └── menu.ts # 菜单配置
│
├── enums/ # 枚举定义
│ ├── appEnums.ts # 应用枚举
│ ├── cacheEnums.ts # 缓存枚举
│ ├── pageEnum.ts # 页面枚举
│ └── requestEnums.ts # 请求枚举
│
├── layouts/ # 布局层
│ ├── default.vue # 默认布局
│ ├── generate.vue # 生成页面布局
│ ├── blank.vue # 空白布局
│ └── components/ # 布局组件
│ ├── header/ # 头部导航
│ ├── gen_siderBar/ # 侧边栏
│ ├── account/ # 账户登录/注册
│ └── footer/ # 页脚
│
├── middleware/ # 中间件
│ ├── route.global.ts # 路由中间件
│ └── wxlogin.global.ts # 微信登录中间件
│
├── pages/ # 页面层
│ ├── generate/ # 长文生成页面
│ ├── information/ # 资讯页面
│ ├── user/ # 用户页面
│ ├── account/ # 账户页面
│ └── download.vue # 下载页面
│
├── plugins/ # 插件
│ ├── element-plus.ts # Element Plus 配置
│ ├── fetch.ts # 请求插件
│ └── icons.ts # 图标插件
│
├── stores/ # 状态管理
│ ├── app.ts # 应用状态
│ ├── user.ts # 用户状态
│ └── theme.ts # 主题状态
│
├── utils/ # 工具函数
│ ├── http/ # HTTP 请求封装
│ ├── pay/ # 支付工具
│ ├── client.ts # 客户端工具
│ ├── env.ts # 环境工具
│ ├── feedback.ts # 反馈工具
│ ├── theme.ts # 主题工具
│ ├── usePaging.ts # 分页工具
│ ├── util.ts # 通用工具
│ ├── validate.ts # 验证工具
│ └── wechat.ts # 微信工具
│
├── typings/ # 类型定义
│ ├── fetch.d.ts # 请求类型
│ ├── modules.d.ts # 模块类型
│ └── router.d.ts # 路由类型
│
├── public/ # 公共静态资源
│ └── robots.txt # 爬虫配置
│
├── .env # 环境变量
├── .env.development # 开发环境变量
├── .env.production # 生产环境变量
├── nuxt.config.ts # Nuxt 配置
├── tailwind.config.js # Tailwind 配置
└── tsconfig.json # TypeScript 配置

核心功能模块

长文生成系统

大纲生成：智能生成文章大纲

大纲编辑：可视化编辑大纲结构

章节生成：逐章生成内容

章节编辑：编辑和优化章节内容

轮播展示：展示生成进度和内容

用户系统

多种登录方式：

账号密码登录

微信扫码登录

手机验证码登录

账户安全：

修改密码

绑定邮箱

绑定手机

绑定微信

用户信息：个人资料管理

支付系统

支付方式：

支付宝支付

微信支付

余额支付

充值中心：在线充值功能

订单管理：

购买记录

充值记录

优惠活动：

订单减免

支付减免

分销系统

分销申请：申请成为分销商

收入明细：查看分销收入

提现功能：申请提现

提现记录：查看提现历史

资讯系统

资讯列表：浏览资讯文章

资讯详情：查看资讯内容

资讯分类：按分类浏览

收藏系统

内容收藏：收藏感兴趣的内容

收藏管理：查看和管理收藏

核心组件说明

表单设计器
支持多种表单组件：

输入框 (input)

数字输入 (number)

下拉选择 (select)

单选框 (radio)

复选框 (checkbox)

文本域 (textarea)

标题 (title)
图片裁剪上传

支持图片裁剪

支持图片上传

支持预览功能
日期范围选择器

快捷选择（今天、昨天、最近7天等）

自定义日期范围

日期格式化
分页组件

支持页码跳转

支持每页条数设置

支持总数显示
状态管理

App Store

应用全局状态

主题配置

语言设置
User Store

用户信息

登录状态

权限信息
Theme Store

主题模式（亮色/暗色）

主题颜色

主题配置
路由结构

主要路由

/ - 首页

/generate - 长文生成

/generate/:id - 生成详情

/information - 资讯列表

/information/detail/:id - 资讯详情

/user - 用户中心

/user/collection - 收藏列表

/account/security - 账户安全

/download - 下载页面
用户中心路由

/generate/user - 用户中心首页

/generate/user/center - 个人中心

/generate/user/wallet - 钱包

/generate/user/password - 修改密码

/generate/user/buy_record - 购买记录

/generate/user/recharge_record - 充值记录

/generate/user/distribution - 分销中心

/generate/user/distribution/withdrawn - 提现
支付流程

创建订单

选择商品/服务

应用优惠

生成订单

选择支付方式

支付宝支付

微信支付

余额支付

完成支付

调起支付

支付结果回调

更新订单状态

订单完成

生成购买记录

更新用户余额/积分

发送通知
开发指南

环境变量配置

开发环境

cp .env.development.example .env.development

生产环境

cp .env.production.example .env.production

安装依赖

npm install

或

yarn install

开发模式

npm run dev

或

yarn dev

构建生产

npm run build

或

yarn build

代码检查

npm run lint

或

yarn lint

项目特点

完整的商业化功能

用户系统、支付系统、分销系统

订单管理、充值管理

优惠活动、积分系统

模块化设计

清晰的目录结构

组件、页面、工具分离

易于维护和扩展

类型安全

全面使用 TypeScript

完善的类型定义

减少运行时错误

响应式设计

支持移动端适配

灵活的布局系统

良好的用户体验

多支付方式

支付宝支付

微信支付

余额支付

表单设计器

自定义表单设计器

支持多种表单组件

可视化配置

完善的权限管理

路由守卫

权限验证

角色管理
技术亮点

Nuxt.js 服务端渲染

SEO 优化

首屏加载快

良好的用户体验

组合式 API

代码复用性强

逻辑组织清晰

类型推断完善

Pinia 状态管理

轻量级

TypeScript 友好

模块化设计

Element Plus 组件库

丰富的组件

良好的文档

持续更新

Tailwind CSS

原子化 CSS

快速开发

高度可定制
注意事项

环境变量：请根据实际环境配置相应的环境变量文件

API 接口：确保后端接口地址配置正确

支付配置：支付相关配置需要申请相应的支付平台账号

微信配置：微信登录需要配置微信开放平台信息

构建优化：生产环境构建前请检查环境变量配置

版本信息

Node.js 版本：建议 >= 16.x

Nuxt.js 版本：3.x

Vue 版本：3.x

Element Plus 版本：2.x
联系方式

如有问题或建议，请联系开发团队。

PC项目概览

开发环境#

生产环境#

或#

或#

或#

或#

开发环境

生产环境

或

或

或

或