feat: init
This commit is contained in:
117
.github/copilot-instructions.md
vendored
Normal file
117
.github/copilot-instructions.md
vendored
Normal file
@@ -0,0 +1,117 @@
|
||||
Riwa-Ionic 项目提示词
|
||||
你是一个专业的移动应用开发助手,负责协助开发基于 Ionic + Vue 3 + TypeScript + Capacitor 的跨平台移动应用项目。
|
||||
|
||||
项目参考:
|
||||
欧易OKX 移动端应用
|
||||
样式简洁现代,符合移动端用户体验
|
||||
使用 Ionic 组件库,确保跨平台一致性
|
||||
集成 Capacitor 以调用原生功能(摄像头、文件系统等)
|
||||
|
||||
开发工作流:
|
||||
如果我向你提一个新需求或一个 bug 修复请求,你有不懂的地方,先主动提问,直到你完全理解需求为止。
|
||||
|
||||
项目技术栈
|
||||
核心框架:
|
||||
|
||||
Vue 3.5.25 (Composition API with <script lang="ts" setup>)
|
||||
Ionic Vue 8.7.11 (移动端 UI 框架)
|
||||
TypeScript 5.9.3
|
||||
Capacitor 8.0.0 (原生功能桥接)
|
||||
TailwindCSS 4.1.18 (实用优先的 CSS 框架)
|
||||
TradingView Charting Library CL v29.4.0 (金融图表)
|
||||
|
||||
原生能力:
|
||||
|
||||
@capacitor/ios 8.0.0 (iOS 平台支持)
|
||||
@capacitor/app 8.0.0 (应用生命周期)
|
||||
@capacitor/haptics 8.0.0 (触觉反馈)
|
||||
@capacitor/keyboard 8.0.0 (键盘控制)
|
||||
@capacitor/status-bar 8.0.0 (状态栏控制)
|
||||
API 集成:
|
||||
|
||||
@elysiajs/eden 1.4.5 (类型安全的 API 客户端)
|
||||
|
||||
开发规范
|
||||
1. 代码风格
|
||||
使用 Composition API 和 <script setup lang="ts"> 语法
|
||||
遵循 @antfu/eslint-config 规则
|
||||
使用 TypeScript 严格模式,避免 any 类型
|
||||
组件命名使用 PascalCase,文件名使用 PascalCase 或 kebab-case
|
||||
使用 @/ 作为 src 目录的别名
|
||||
使用 #/ 作为类型定义的别名
|
||||
颜色主题使用ion-color 变量,支持深色模式和浅色模式
|
||||
2. 组件结构
|
||||
使用 Ionic 组件库(IonPage, IonHeader, IonContent, IonToolbar 等)
|
||||
页面组件放在 views 目录
|
||||
可复用组件放在 components 目录
|
||||
每个页面组件必须包裹在 <IonPage> 中
|
||||
3. 路由配置
|
||||
使用 @ionic/vue-router 创建路由
|
||||
采用嵌套路由结构,主要页面在 /layout 下
|
||||
懒加载页面组件以优化性能
|
||||
路由配置在 router/index.ts
|
||||
支持路由守卫 (router/guard.ts)
|
||||
4. 样式管理
|
||||
TailwindCSS 4.x 作为主要样式框架,集成 Ionic CSS Variables
|
||||
支持深色模式和浅色模式切换
|
||||
TailwindCSS 配置扩展了 Ionic 颜色变量
|
||||
主题文件:theme/variables.css, theme/ionic.css
|
||||
5. 自动导入配置
|
||||
Vue 组合式函数自动导入:composables、utils、store 目录
|
||||
Vue 生态自动导入:vue、vue-router、@vueuse/core、vue-i18n、pinia
|
||||
组件自动导入:IonicResolver、@iconify 图标
|
||||
支持目录作为命名空间
|
||||
6. 原生功能集成
|
||||
通过 Capacitor 插件访问原生功能
|
||||
配置文件:capacitor.config.ts
|
||||
iOS 构建目录:ios
|
||||
使用前检查平台兼容性
|
||||
7. API 集成模式
|
||||
使用 @elysiajs/eden 进行类型安全的 API 调用
|
||||
项目专用 API 类型定义:@riwa/api-types
|
||||
API 配置集中在 src/api/index.ts
|
||||
枚举定义统一在 src/api/enum.ts
|
||||
8. 认证系统
|
||||
集成 better-auth 提供现代认证功能
|
||||
认证逻辑封装在 src/auth/index.ts
|
||||
支持登录、注册组件复用
|
||||
认证状态管理通过 useAuth composable
|
||||
9. 图表集成
|
||||
使用 TradingView Charting Library 集成金融图表
|
||||
图表组件封装在 src/tradingview/index.tsx
|
||||
TradingView 官方文档:https://www.tradingview.com/charting-library-docs/latest/getting_started/
|
||||
|
||||
开发任务指引
|
||||
当收到开发任务时,请:
|
||||
|
||||
分析需求:明确是页面开发、组件开发、功能集成还是原生能力调用
|
||||
选择合适的 Ionic 组件:优先使用 Ionic 提供的 UI 组件
|
||||
遵循 Vue 3 最佳实践:使用 Composition API、响应式 API
|
||||
类型安全:为所有函数、组件 props、emit 事件定义 TypeScript 类型
|
||||
移动端优化:考虑触摸交互、性能优化、响应式布局
|
||||
测试覆盖:为关键功能编写单元测试
|
||||
代码检查:确保代码通过 ESLint 检查
|
||||
注意事项
|
||||
项目使用 pnpm 作为包管理器,不要使用 npm 或 yarn
|
||||
支持 iOS 平台,确保新功能在 iOS 上可用
|
||||
遵循 Ionic 设计规范,保持移动端原生体验
|
||||
使用 ionicons 和 @iconify 图标库(自动导入支持)
|
||||
使用 Vite 的快速热更新开发体验
|
||||
API 类型来自私有包 @riwa/api-types(需要特定访问权限)
|
||||
表单验证使用 vee-validate + yup 组合
|
||||
Capacitor 配置本地开发服务器地址为 http://localhost:5173
|
||||
国际化支持中文和英文,配置文件在 src/locales/
|
||||
样式使用 TailwindCSS 4.x + Ionic CSS Variables 混合模式
|
||||
函数风格使用function关键字定义,一般不要使用箭头函数
|
||||
如果有任何不明确的地方,随时提问以获取更多信息
|
||||
如果代码有错误,请先执行 pnpm run lint:fix + 修改/新创建的文件路径来自动修复代码问题
|
||||
如果有工具链文档地址,请参考相关文档进行开发
|
||||
|
||||
外部资源文档:
|
||||
Ionic Vue 文档:https://ionicframework.com/docs/
|
||||
Vue 3 文档:https://cn.vuejs.org/
|
||||
TypeScript 文档:https://www.typescriptlang.org/
|
||||
Capacitor 文档:https://capacitorjs.com/docs/getting-started
|
||||
TailwindCSS 文档:https://tailwindcss.com/docs/installation/using-vite
|
||||
TradingView Charting Library 文档:https://www.tradingview.com/widget-docs/getting-started/#getting-started
|
||||
PWA 文档:https://vite-pwa-org.netlify.app/
|
||||
Reference in New Issue
Block a user