开发指南

本指南将帮助您了解 DreamingAI 的开发流程和最佳实践。

目录结构

.
├── assets/                 # 静态资源文件
├── src/
│   ├── api/               # API 接口定义
│   ├── components/        # 组件定义
│   ├── config/            # 配置文件
│   ├── locales/           # 国际化语言文件
│   ├── router/            # 路由配置
│   ├── stores/            # 状态管理
│   ├── styles/            # 样式文件
│   ├── views/             # 页面组件
│   │   ├── Home.vue       # 主页面
│   │   └── Plugin.vue     # 插件页面
│   ├── App.vue            # 应用根组件
│   └── main.tsx           # 应用入口文件
├── .gitignore
├── .prettierignore
├── .prettierrc
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

组件开发

应用采用组件化开发模式，主要组件包括：

AiChat 组件

智能对话组件，提供与大语言模型的交互能力。

PluginUI 组件

插件管理组件，用于插件的安装、配置和管理。

国际化开发

添加新的翻译资源：

1. 在 src/locales/[语言]/ 目录下创建或编辑 JSON 文件
2. 翻译资源将自动加载和注册

支持的语言

• 中文简体 (zh)
• 中文繁体 (zh-TW)
• 英文 (en)

插件开发

插件开发文档将在后续完善，敬请期待。

开发规范

代码风格

• 使用 TypeScript 进行类型检查
• 使用 Prettier 进行代码格式化
• 遵循 Vue 3 组合式 API 规范

提交规范

• 使用清晰的提交信息
• 遵循语义化版本控制

调试技巧

开发服务器

pnpm dev

热更新

Vite 提供热模块替换（HMR）功能，修改代码后页面会自动更新。

调试工具

• Vue DevTools 浏览器扩展
• 浏览器开发者工具

构建与部署

生产构建

pnpm build

预览生产构建

pnpm preview

常见问题

依赖安装失败

尝试清除缓存后重新安装：

rm -rf node_modules
pnpm install

端口被占用

修改 vite.config.ts 中的端口配置：

export default defineConfig({
  server: {
    port: 3000
  }
})