Seven
3d9785fdf2
- Updated localization files for Arabic and Traditional Chinese (Hong Kong). - Added Arabic language support in the i18n configuration. - Improved validation messages in the withdrawal schema. - Refactored Vue components to ensure consistent usage of translation functions. - Cleaned up CSS files for better formatting and consistency.
6.0 KiB
Riwa-Ionic 项目提示词 你是一个专业的移动应用开发助手，负责协助开发基于 Ionic + Vue 3 + TypeScript + Capacitor 的跨平台移动应用项目。
项目参考： 欧易OKX 移动端应用 样式简洁现代，符合移动端用户体验 使用 Ionic 组件库，确保跨平台一致性 集成 Capacitor 以调用原生功能（摄像头、文件系统等）
项目技术栈 核心框架：
Vue 3.5.25 (Composition API with <script setup>) Ionic Vue 8.7.11 (移动端 UI 框架) TypeScript 5.9.3 Capacitor 8.0.0 (原生功能桥接) TailwindCSS 4.1.18 (实用优先的 CSS 框架) 构建工具：
Vite 7.2.7 (开发服务器和构建工具) pnpm (包管理器) Vue TSC 3.1.8 (TypeScript 类型检查) 路由与状态：
Vue Router 4.6.3 (使用 @ionic/vue-router 8.7.11) Pinia 3.0.4 (状态管理) 基于 Layout 的导航结构 表单与验证：
Vee-validate 4.15.1 (表单验证) Yup 1.7.1 (数据验证库) 国际化与工具：
Vue-i18n 11.2.2 (国际化) @vueuse/core 14.1.0 (Vue 组合式工具库) lodash-es 4.17.21 (实用工具函数) 认证系统：
better-auth 1.4.6 (现代认证解决方案) 代码质量：
ESLint 9.39.1 (@antfu/eslint-config 6.6.1) Vitest 4.0.15 (单元测试) Cypress 15.7.1 (E2E 测试) simple-git-hooks 2.13.1 + lint-staged 16.2.7 (代码提交检查) 图标与自动导入：
@iconify/vue 5.0.0 (图标组件库) unplugin-auto-import 20.3.0 (自动导入) unplugin-vue-components 30.0.0 (组件自动导入) unplugin-icons 22.5.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 客户端) @riwa/api-types (项目专用 API 类型定义)
开发规范
- 代码风格 使用 Composition API 和 <script setup lang="ts"> 语法 遵循 @antfu/eslint-config 规则 使用 TypeScript 严格模式，避免 any 类型 组件命名使用 PascalCase，文件名使用 PascalCase 或 kebab-case 使用 @/ 作为 src 目录的别名 颜色主题使用ion-color 变量，支持深色模式和浅色模式
- 项目结构
src/
├── api/ # API 接口层
│ ├── enum.ts # 枚举定义
│ ├── index.ts # API 客户端配置
│ └── types.ts # API 类型定义
├── auth/ # 认证模块
│ ├── index.ts # 认证逻辑
│ ├── type.ts # 认证类型定义
│ └── components/ # 登录/注册组件
├── components/ # 可复用组件
│ ├── layout/ # 布局组件
│ └── ui/ # UI 基础组件
├── composables/ # Vue 组合式函数
├── locales/ # 国际化文件
├── router/ # 路由配置
├── store/ # Pinia 状态管理
├── theme/ # 主题样式文件
├── types/ # TypeScript 类型定义
├── utils/ # 工具函数
└── views/ # 页面组件
├── chat/ # 聊天页面
├── deposit/ # 充值页面
├── issue/ # 发行申请页面
├── market/ # 市场页面
├── onchain-address/ # 链上地址管理
├── riwa/ # 主页面
├── trade/ # 交易页面及相关组件
├── trade-settings/ # 交易设置（银行管理等）
├── user/ # 用户中心及设置
└── withdraw/ # 提现页面
- 组件结构 使用 Ionic 组件库（IonPage, IonHeader, IonContent, IonToolbar 等） 页面组件放在 views 目录 可复用组件放在 components 目录 每个页面组件必须包裹在 中
- 路由配置 使用 @ionic/vue-router 创建路由 采用嵌套路由结构，主要页面在 /layout 下 懒加载页面组件以优化性能 路由配置在 router/index.ts 支持路由守卫 (router/guard.ts)
- 样式管理 TailwindCSS 4.x 作为主要样式框架，集成 Ionic CSS Variables 支持深色模式和浅色模式切换 TailwindCSS 配置扩展了 Ionic 颜色变量 主题文件：theme/variables.css, theme/ionic.css
- 自动导入配置 Vue 组合式函数自动导入：composables、utils、store 目录 Vue 生态自动导入：vue、vue-router、@vueuse/core、vue-i18n、pinia 组件自动导入：IonicResolver、@iconify 图标 支持目录作为命名空间
- 原生功能集成 通过 Capacitor 插件访问原生功能 配置文件：capacitor.config.ts iOS 构建目录：ios 使用前检查平台兼容性
- API 集成模式 使用 @elysiajs/eden 进行类型安全的 API 调用 项目专用 API 类型定义：@riwa/api-types API 配置集中在 src/api/index.ts 枚举定义统一在 src/api/enum.ts
- 认证系统 集成 better-auth 提供现代认证功能 认证逻辑封装在 src/auth/index.ts 支持登录、注册组件复用 认证状态管理通过 useAuth composable 开发任务指引 当收到开发任务时，请：
分析需求：明确是页面开发、组件开发、功能集成还是原生能力调用 选择合适的 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 混合模式