|
@@ -1,40 +1,40 @@
|
|
|
{
|
|
{
|
|
|
- "nodes": [
|
|
|
|
|
- {"id":"title","type":"text","text":"# askyi-uniapp 架构\n\n**版本**: 0.1.0\n**描述**: 问易社区微信小程序\n**状态**: 规划中\n\n技术栈:UniApp + Vue 3 + TypeScript\n状态管理:Pinia\nUI组件:uView Plus\n\n**迁移来源**: askyi-h5\n**目标平台**: 微信小程序","x":-2400,"y":-1600,"width":400,"height":340,"color":"6"},
|
|
|
|
|
- {"id":"pages_core","type":"text","text":"## Phase 1: 核心页面\n\n**pages/home/**\n- index.vue 首页\n- components/ 首页组件\n\n**pages/explore/**\n- index.vue 发现页\n- components/ 发现组件\n\n**pages/auth/**\n- login.vue 登录\n- register.vue 注册\n- forgot-password.vue 忘记密码\n\n**pages/profile/**\n- index.vue 个人中心\n- edit.vue 编辑资料\n- settings.vue 设置","x":-1600,"y":-1920,"width":300,"height":600,"color":"3"},
|
|
|
|
|
- {"id":"pages_content","type":"text","text":"## Phase 2: 内容页面\n\n**pages/article/**\n- list.vue 文章列表\n- detail.vue 文章详情\n\n**pages/expert/**\n- list.vue 专家列表\n- detail.vue 专家详情\n\n**pages/video/**\n- feed.vue 视频流\n- player.vue 视频播放\n\n**pages/search/**\n- index.vue 搜索\n- result.vue 搜索结果","x":-1200,"y":-1920,"width":300,"height":560,"color":"3"},
|
|
|
|
|
- {"id":"pages_divination","type":"text","text":"## Phase 3: 占卜功能\n\n**pages/divination/**\n- index.vue 占卜首页\n- coins.vue 金钱卦\n- shake.vue 摇卦\n- stick.vue 求签\n- today.vue 今日运势\n- history.vue 占卜历史\n- name.vue 姓名测算","x":-800,"y":-1920,"width":300,"height":440,"color":"1"},
|
|
|
|
|
- {"id":"pages_advanced","type":"text","text":"## Phase 4: 高级功能\n\n**pages/course/**\n- list.vue 课程列表\n- detail.vue 课程详情\n- player.vue 课程播放\n\n**pages/consult/**\n- index.vue 咨询页\n\n**pages/message/**\n- index.vue 消息列表\n- chat.vue 聊天详情\n\n**pages/payment/**\n- index.vue 支付页","x":-400,"y":-1920,"width":300,"height":480,"color":"5"},
|
|
|
|
|
- {"id":"comp_layout","type":"text","text":"## 布局组件\n\n**components/layout/**\n- TabBar.vue 底部导航\n- NavBar.vue 顶部导航\n- BackHeader.vue 返回头部\n- AppLayout.vue 应用布局\n\n**样式**\n- layout.scss 布局样式","x":-1600,"y":-1200,"width":280,"height":360,"color":"4"},
|
|
|
|
|
- {"id":"comp_content","type":"text","text":"## 内容组件\n\n**components/content/**\n- ArticleCard.vue 文章卡片\n- ArticleItem.vue 文章项\n- VideoCard.vue 视频卡片\n- ExpertCard.vue 专家卡片\n- CourseCard.vue 课程卡片\n\n**列表组件**\n- InfiniteScroll.vue 无限滚动\n- Waterfall.vue 瀑布流","x":-1200,"y":-1200,"width":280,"height":400,"color":"4"},
|
|
|
|
|
- {"id":"comp_interactive","type":"text","text":"## 交互组件\n\n**components/interactive/**\n- FollowButton.vue 关注按钮\n- ReactionButton.vue 点赞收藏\n- ConsultButton.vue 咨询按钮\n- ShareButton.vue 分享按钮\n\n**表单组件**\n- SearchInput.vue 搜索输入\n- CategoryNav.vue 分类导航\n- TagsList.vue 标签列表","x":-800,"y":-1200,"width":280,"height":400,"color":"4"},
|
|
|
|
|
- {"id":"comp_media","type":"text","text":"## 媒体组件\n\n**components/media/**\n- VideoPlayer.vue 视频播放器\n- ImageUploader.vue 图片上传\n- ImageCropper.vue 图片裁剪\n- AudioPlayer.vue 音频播放\n\n**UniApp特有**\n- 使用 video 组件\n- 使用 uni.chooseImage","x":-400,"y":-1200,"width":280,"height":360,"color":"1"},
|
|
|
|
|
- {"id":"comp_common","type":"text","text":"## 通用组件\n\n**components/common/**\n- Loading.vue 加载状态\n- Empty.vue 空状态\n- ErrorPage.vue 错误页\n- Toast.vue 提示\n- Modal.vue 弹窗\n- Icon.vue 图标","x":0,"y":-1200,"width":260,"height":320,"color":"4"},
|
|
|
|
|
- {"id":"api_layer","type":"text","text":"## API 接口层\n\n| 模块 | 文件 | 功能 |\n|------|------|------|\n| article | api/article.ts | 文章 |\n| auth | api/auth.ts | 认证 |\n| user | api/user.ts | 用户 |\n| expert | api/expert.ts | 专家 |\n| video | api/video.ts | 视频 |\n| reaction | api/reaction.ts | 反应 |\n| following | api/following.ts | 关注 |\n| category | api/category.ts | 分类 |\n| course | api/course.ts | 课程 |\n| divination | api/divination.ts | 占卜 |","x":400,"y":-1800,"width":320,"height":480,"color":"1"},
|
|
|
|
|
- {"id":"composables","type":"text","text":"## Composables 组合式函数\n\n**composables/**\n- useAuth.ts 认证状态\n- useUser.ts 用户信息\n- useFollow.ts 关注操作\n- useReaction.ts 点赞收藏\n- useInfiniteScroll.ts 无限滚动\n- useRequest.ts 请求封装\n- useToast.ts 提示消息","x":400,"y":-1200,"width":280,"height":360,"color":"5"},
|
|
|
|
|
- {"id":"stores","type":"text","text":"## Pinia 状态管理\n\n**stores/**\n- user.ts 用户状态\n- auth.ts 认证状态\n- app.ts 应用状态\n- video.ts 视频状态\n\n**持久化**\n- 使用 uni.setStorageSync\n- 自动同步本地存储","x":800,"y":-1200,"width":280,"height":360,"color":"5"},
|
|
|
|
|
- {"id":"utils","type":"text","text":"## 工具函数\n\n**utils/**\n- request.ts HTTP封装\n- storage.ts 存储工具\n- format.ts 格式化\n- validate.ts 验证\n- platform.ts 平台检测\n- share.ts 分享工具","x":800,"y":-720,"width":260,"height":320,"color":"2"},
|
|
|
|
|
- {"id":"types","type":"text","text":"## TypeScript 类型\n\n**types/**\n- article.ts 文章类型\n- user.ts 用户类型\n- expert.ts 专家类型\n- video.ts 视频类型\n- api.ts API响应类型\n- common.ts 通用类型","x":1200,"y":-1200,"width":260,"height":320,"color":"4"},
|
|
|
|
|
- {"id":"config","type":"text","text":"## 配置文件\n\n**pages.json**\n- 页面路由配置\n- TabBar 配置\n- 导航栏样式\n\n**manifest.json**\n- 应用信息\n- 微信小程序配置\n- AppId 配置\n\n**uni.scss**\n- 全局样式变量\n- 主题色定义","x":1200,"y":-720,"width":280,"height":380,"color":"2"},
|
|
|
|
|
- {"id":"backend","type":"text","text":"## 后端 API\n\n**askyi-cms-railway**\nStrapi 5 + PostgreSQL\n\n**API 地址**\n- 开发: localhost:1337\n- 生产: Railway\n\n**共享端点**\n- /api/articles\n- /api/videos\n- /api/experts\n- /api/users\n- /api/auth","x":1600,"y":-1200,"width":280,"height":400,"color":"4"},
|
|
|
|
|
- {"id":"project_structure","type":"text","text":"## 项目结构\n\n```\nsrc/\n├── api/ # API 接口\n├── components/ # 组件\n├── composables/ # 组合函数\n├── pages/ # 页面\n├── stores/ # 状态管理\n├── static/ # 静态资源\n├── styles/ # 样式\n├── types/ # 类型\n└── utils/ # 工具\n```","x":-1600,"y":-680,"width":320,"height":360,"color":"6"},
|
|
|
|
|
- {"id":"data_flow","type":"text","text":"## 数据流\n\n```\n用户操作\n ↓\nPages (pages/)\n ↓\nComponents\n ↓\nComposables\n ↓\nAPI Layer\n ↓\nUtils (request)\n ↓\nStrapi CMS\n ↓\n响应数据\n ↓\nStores (Pinia)\n ↓\n组件更新\n```","x":-1200,"y":-680,"width":280,"height":500,"color":"6"},
|
|
|
|
|
- {"id":"migration_map","type":"text","text":"## 迁移映射\n\n**askyi-h5 → askyi-uniapp**\n\n| React | Vue 3 |\n|-------|-------|\n| useState | ref |\n| useEffect | onMounted |\n| Hooks | composables |\n| axios | uni.request |\n| className | class |\n| Capacitor | UniApp |\n\n**共享资源**\n- 类型定义 (types/)\n- API 结构 (api/)","x":-800,"y":-680,"width":300,"height":420,"color":"3"},
|
|
|
|
|
- {"id":"env_config","type":"text","text":"## 环境配置\n\n**开发环境**\n- API: localhost:1337\n- 调试: HBuilderX\n\n**生产环境**\n- API: Railway\n- 构建: mp-weixin\n\n**环境变量**\n- VUE_APP_API_BASE\n- VUE_APP_SITE_URL","x":-400,"y":-680,"width":280,"height":360,"color":"2"}
|
|
|
|
|
- ],
|
|
|
|
|
- "edges": [
|
|
|
|
|
- {"id":"e1","fromNode":"pages_core","fromSide":"bottom","toNode":"comp_layout","toSide":"top","label":"使用"},
|
|
|
|
|
- {"id":"e2","fromNode":"pages_content","fromSide":"bottom","toNode":"comp_content","toSide":"top","label":"使用"},
|
|
|
|
|
- {"id":"e3","fromNode":"pages_divination","fromSide":"bottom","toNode":"comp_interactive","toSide":"top","label":"使用"},
|
|
|
|
|
- {"id":"e4","fromNode":"pages_advanced","fromSide":"bottom","toNode":"comp_media","toSide":"top","label":"使用"},
|
|
|
|
|
- {"id":"e5","fromNode":"comp_content","fromSide":"right","toNode":"api_layer","toSide":"left","label":"调用"},
|
|
|
|
|
- {"id":"e6","fromNode":"comp_interactive","fromSide":"right","toNode":"composables","toSide":"left","label":"使用"},
|
|
|
|
|
- {"id":"e7","fromNode":"composables","fromSide":"right","toNode":"stores","toSide":"left","label":"状态"},
|
|
|
|
|
- {"id":"e8","fromNode":"composables","fromSide":"top","toNode":"api_layer","toSide":"bottom","label":"请求"},
|
|
|
|
|
- {"id":"e9","fromNode":"stores","fromSide":"bottom","toNode":"utils","toSide":"top","label":"工具"},
|
|
|
|
|
- {"id":"e10","fromNode":"api_layer","fromSide":"right","toNode":"types","toSide":"left","label":"类型"},
|
|
|
|
|
- {"id":"e11","fromNode":"utils","fromSide":"right","toNode":"backend","toSide":"left","label":"HTTP"},
|
|
|
|
|
- {"id":"e12","fromNode":"types","fromSide":"bottom","toNode":"config","toSide":"top"},
|
|
|
|
|
- {"id":"e13","fromNode":"project_structure","fromSide":"right","toNode":"data_flow","toSide":"left"}
|
|
|
|
|
- ]
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ "nodes":[
|
|
|
|
|
+ {"id":"title","type":"text","text":"# askyi-uniapp 架构\n\n**版本**: 0.1.0\n**描述**: 问易社区微信小程序\n**状态**: 规划中\n\n技术栈:UniApp + Vue 3 + TypeScript\n状态管理:Pinia\nUI组件:uView Plus\n\n**迁移来源**: askyi-h5\n**目标平台**: 微信小程序","x":-2400,"y":-1600,"width":400,"height":340,"color":"6"},
|
|
|
|
|
+ {"id":"pages_core","type":"text","text":"## Phase 1: 核心页面\n\n**pages/home/**\n- index.vue 首页\n- components/ 首页组件\n\n**pages/explore/**\n- index.vue 发现页\n- components/ 发现组件\n\n**pages/auth/**\n- login.vue 登录\n- register.vue 注册\n- forgot-password.vue 忘记密码\n\n**pages/profile/**\n- index.vue 个人中心\n- edit.vue 编辑资料\n- settings.vue 设置","x":-1600,"y":-1920,"width":300,"height":600,"color":"3"},
|
|
|
|
|
+ {"id":"pages_content","type":"text","text":"## Phase 2: 内容页面\n\n**pages/article/**\n- list.vue 文章列表\n- detail.vue 文章详情\n\n**pages/expert/**\n- list.vue 专家列表\n- detail.vue 专家详情\n\n**pages/video/**\n- feed.vue 视频流\n- player.vue 视频播放\n\n**pages/search/**\n- index.vue 搜索\n- result.vue 搜索结果","x":-1200,"y":-1920,"width":300,"height":560,"color":"3"},
|
|
|
|
|
+ {"id":"pages_divination","type":"text","text":"## Phase 3: 占卜功能\n\n**pages/divination/**\n- index.vue 占卜首页\n- coins.vue 金钱卦\n- shake.vue 摇卦\n- stick.vue 求签\n- today.vue 今日运势\n- history.vue 占卜历史\n- name.vue 姓名测算","x":-800,"y":-1920,"width":300,"height":440,"color":"1"},
|
|
|
|
|
+ {"id":"pages_advanced","type":"text","text":"## Phase 4: 高级功能\n\n**pages/course/**\n- list.vue 课程列表\n- detail.vue 课程详情\n- player.vue 课程播放\n\n**pages/consult/**\n- index.vue 咨询页\n\n**pages/message/**\n- index.vue 消息列表\n- chat.vue 聊天详情\n\n**pages/payment/**\n- index.vue 支付页","x":-400,"y":-1920,"width":300,"height":480,"color":"5"},
|
|
|
|
|
+ {"id":"comp_layout","type":"text","text":"## 布局组件\n\n**components/layout/**\n- TabBar.vue 底部导航\n- NavBar.vue 顶部导航\n- BackHeader.vue 返回头部\n- AppLayout.vue 应用布局\n\n**样式**\n- layout.scss 布局样式","x":-1600,"y":-1200,"width":280,"height":360,"color":"4"},
|
|
|
|
|
+ {"id":"comp_content","type":"text","text":"## 内容组件\n\n**components/content/**\n- ArticleCard.vue 文章卡片\n- ArticleItem.vue 文章项\n- VideoCard.vue 视频卡片\n- ExpertCard.vue 专家卡片\n- CourseCard.vue 课程卡片\n\n**列表组件**\n- InfiniteScroll.vue 无限滚动\n- Waterfall.vue 瀑布流","x":-1200,"y":-1200,"width":280,"height":400,"color":"4"},
|
|
|
|
|
+ {"id":"comp_interactive","type":"text","text":"## 交互组件\n\n**components/interactive/**\n- FollowButton.vue 关注按钮\n- ReactionButton.vue 点赞收藏\n- ConsultButton.vue 咨询按钮\n- ShareButton.vue 分享按钮\n\n**表单组件**\n- SearchInput.vue 搜索输入\n- CategoryNav.vue 分类导航\n- TagsList.vue 标签列表","x":-800,"y":-1200,"width":280,"height":400,"color":"4"},
|
|
|
|
|
+ {"id":"comp_media","type":"text","text":"## 媒体组件\n\n**components/media/**\n- VideoPlayer.vue 视频播放器\n- ImageUploader.vue 图片上传\n- ImageCropper.vue 图片裁剪\n- AudioPlayer.vue 音频播放\n\n**UniApp特有**\n- 使用 video 组件\n- 使用 uni.chooseImage","x":-400,"y":-1200,"width":280,"height":360,"color":"1"},
|
|
|
|
|
+ {"id":"comp_common","type":"text","text":"## 通用组件\n\n**components/common/**\n- Loading.vue 加载状态\n- Empty.vue 空状态\n- ErrorPage.vue 错误页\n- Toast.vue 提示\n- Modal.vue 弹窗\n- Icon.vue 图标","x":0,"y":-1200,"width":260,"height":320,"color":"4"},
|
|
|
|
|
+ {"id":"composables","type":"text","text":"## Composables 组合式函数\n\n**composables/**\n- useAuth.ts 认证状态\n- useUser.ts 用户信息\n- useFollow.ts 关注操作\n- useReaction.ts 点赞收藏\n- useInfiniteScroll.ts 无限滚动\n- useRequest.ts 请求封装\n- useToast.ts 提示消息","x":400,"y":-1200,"width":280,"height":360,"color":"5"},
|
|
|
|
|
+ {"id":"stores","type":"text","text":"## Pinia 状态管理\n\n**stores/**\n- user.ts 用户状态\n- auth.ts 认证状态\n- app.ts 应用状态\n- video.ts 视频状态\n\n**持久化**\n- 使用 uni.setStorageSync\n- 自动同步本地存储","x":800,"y":-1200,"width":280,"height":360,"color":"5"},
|
|
|
|
|
+ {"id":"project_structure","type":"text","text":"## 项目结构\n\n```\nsrc/\n├── api/ # API 接口\n├── components/ # 组件\n├── composables/ # 组合函数\n├── pages/ # 页面\n├── stores/ # 状态管理\n├── static/ # 静态资源\n├── styles/ # 样式\n├── types/ # 类型\n└── utils/ # 工具\n```","x":-1600,"y":-680,"width":320,"height":360,"color":"6"},
|
|
|
|
|
+ {"id":"data_flow","type":"text","text":"## 数据流\n\n```\n用户操作\n ↓\nPages (pages/)\n ↓\nComponents\n ↓\nComposables\n ↓\nAPI Layer\n ↓\nUtils (request)\n ↓\nStrapi CMS\n ↓\n响应数据\n ↓\nStores (Pinia)\n ↓\n组件更新\n```","x":-1200,"y":-680,"width":280,"height":560,"color":"6"},
|
|
|
|
|
+ {"id":"migration_map","type":"text","text":"## 迁移映射\n\n**askyi-h5 → askyi-uniapp**\n\n| React | Vue 3 |\n|-------|-------|\n| useState | ref |\n| useEffect | onMounted |\n| Hooks | composables |\n| axios | uni.request |\n| className | class |\n| Capacitor | UniApp |\n\n**共享资源**\n- 类型定义 (types/)\n- API 结构 (api/)","x":-800,"y":-680,"width":300,"height":480,"color":"3"},
|
|
|
|
|
+ {"id":"env_config","type":"text","text":"## 环境配置\n\n**开发环境**\n- API: localhost:1337\n- 调试: HBuilderX\n\n**生产环境**\n- API: Railway\n- 构建: mp-weixin\n\n**环境变量**\n- VUE_APP_API_BASE\n- VUE_APP_SITE_URL","x":-400,"y":-680,"width":280,"height":420,"color":"2"},
|
|
|
|
|
+ {"id":"api_layer","type":"text","text":"## API 接口层\n\n| 模块 | 文件 | 功能 |\n|------|------|------|\n| article | api/article.ts | 文章 |\n| auth | api/auth.ts | 认证 |\n| user | api/user.ts | 用户 |\n| expert | api/expert.ts | 专家 |\n| video | api/video.ts | 视频 |\n| reaction | api/reaction.ts | 反应 |\n| following | api/following.ts | 关注 |\n| category | api/category.ts | 分类 |\n| course | api/course.ts | 课程 |\n| divination | api/divination.ts | 占卜 |","x":340,"y":-1840,"width":400,"height":480,"color":"1"},
|
|
|
|
|
+ {"id":"utils","type":"text","text":"## 工具函数\n\n**utils/**\n- request.ts HTTP封装\n- storage.ts 存储工具\n- format.ts 格式化\n- validate.ts 验证\n- platform.ts 平台检测\n- share.ts 分享工具","x":810,"y":-720,"width":260,"height":320,"color":"2"},
|
|
|
|
|
+ {"id":"backend","type":"text","text":"## 后端 API\n\n**askyi-cms-railway**\nStrapi 5 + PostgreSQL\n\n**API 地址**\n- 开发: localhost:1337\n- 生产: Railway\n\n**共享端点**\n- /api/articles\n- /api/videos\n- /api/experts\n- /api/users\n- /api/auth","x":1240,"y":-780,"width":280,"height":440,"color":"4"},
|
|
|
|
|
+ {"id":"types","type":"text","text":"## TypeScript 类型\n\n**types/**\n- article.ts 文章类型\n- user.ts 用户类型\n- expert.ts 专家类型\n- video.ts 视频类型\n- api.ts API响应类型\n- common.ts 通用类型","x":1250,"y":-1760,"width":260,"height":320,"color":"4"},
|
|
|
|
|
+ {"id":"config","type":"text","text":"## 配置文件\n\n**pages.json**\n- 页面路由配置\n- TabBar 配置\n- 导航栏样式\n\n**manifest.json**\n- 应用信息\n- 微信小程序配置\n- AppId 配置\n\n**uni.scss**\n- 全局样式变量\n- 主题色定义","x":1240,"y":-1320,"width":280,"height":480,"color":"2"}
|
|
|
|
|
+ ],
|
|
|
|
|
+ "edges":[
|
|
|
|
|
+ {"id":"e1","fromNode":"pages_core","fromSide":"bottom","toNode":"comp_layout","toSide":"top","label":"使用"},
|
|
|
|
|
+ {"id":"e2","fromNode":"pages_content","fromSide":"bottom","toNode":"comp_content","toSide":"top","label":"使用"},
|
|
|
|
|
+ {"id":"e3","fromNode":"pages_divination","fromSide":"bottom","toNode":"comp_interactive","toSide":"top","label":"使用"},
|
|
|
|
|
+ {"id":"e4","fromNode":"pages_advanced","fromSide":"bottom","toNode":"comp_media","toSide":"top","label":"使用"},
|
|
|
|
|
+ {"id":"e5","fromNode":"comp_content","fromSide":"right","toNode":"api_layer","toSide":"left","label":"调用"},
|
|
|
|
|
+ {"id":"e6","fromNode":"comp_interactive","fromSide":"right","toNode":"composables","toSide":"left","label":"使用"},
|
|
|
|
|
+ {"id":"e7","fromNode":"composables","fromSide":"right","toNode":"stores","toSide":"left","label":"状态"},
|
|
|
|
|
+ {"id":"e8","fromNode":"composables","fromSide":"top","toNode":"api_layer","toSide":"bottom","label":"请求"},
|
|
|
|
|
+ {"id":"e9","fromNode":"stores","fromSide":"bottom","toNode":"utils","toSide":"top","label":"工具"},
|
|
|
|
|
+ {"id":"e10","fromNode":"api_layer","fromSide":"right","toNode":"types","toSide":"left","label":"类型"},
|
|
|
|
|
+ {"id":"e11","fromNode":"utils","fromSide":"right","toNode":"backend","toSide":"left","label":"HTTP"},
|
|
|
|
|
+ {"id":"e12","fromNode":"types","fromSide":"bottom","toNode":"config","toSide":"top"},
|
|
|
|
|
+ {"id":"e13","fromNode":"project_structure","fromSide":"right","toNode":"data_flow","toSide":"left"}
|
|
|
|
|
+ ]
|
|
|
|
|
+}
|