happy-life-star/web-flowith

开心APP - 前端应用

基于Vue 3 + Ant Design Vue的现代化情绪陪伴应用前端。

技术栈

• Vue 3 - 渐进式JavaScript框架
• TypeScript - 类型安全的JavaScript超集
• Ant Design Vue - 企业级UI组件库
• Vite - 下一代前端构建工具
• Vue Router - 官方路由管理器
• Pinia - 状态管理库
• Sass - CSS预处理器

功能特性

• 🤖 智能对话 - 与AI助手"开开"实时聊天
• 📝 情绪日记 - 记录和分享日常心情
• 👤 个人展板 - 自定义个人信息展示
• 📊 话题追踪 - 关注和管理感兴趣的话题
• 📈 数据可视化 - 心情统计图表
• ⚙️ 用户管理 - 登录、注册、设置

项目结构

src/
├── assets/          # 静态资源
│   ├── images/      # 图片资源
│   └── styles/      # 样式文件
├── components/      # 公共组件
│   ├── common/      # 通用组件
│   ├── layout/      # 布局组件
│   └── ui/          # UI组件
├── views/           # 页面组件
│   ├── Home/        # 首页
│   ├── Chat/        # 聊天页面
│   ├── Diary/       # 日记页面
│   ├── Dashboard/   # 个人展板
│   └── ...
├── router/          # 路由配置
├── stores/          # Pinia状态管理
├── services/        # API服务
├── utils/           # 工具函数
├── types/           # TypeScript类型定义
├── App.vue          # 根组件
└── main.ts          # 应用入口

快速开始

环境要求

• Node.js >= 16.0.0
• npm >= 8.0.0

安装依赖

npm install

开发模式

npm run dev

应用将在 http://localhost:3000 启动

构建生产版本

npm run build

预览生产版本

npm run preview

代码检查

npm run lint

代码格式化

npm run format

类型检查

npm run type-check

开发指南

项目启动

1. 克隆项目到本地
2. 安装依赖：npm install
3. 启动开发服务器：npm run dev
4. 在浏览器中打开 http://localhost:3000

开发流程

1. 创建新分支进行开发
2. 编写代码并确保通过所有检查
3. 提交代码并创建Pull Request
4. 代码审查通过后合并到主分支

代码规范

• 使用TypeScript进行类型安全开发
• 遵循ESLint和Prettier配置的代码规范
• 组件命名使用PascalCase
• 文件命名使用kebab-case
• 变量和函数使用camelCase

环境配置

开发环境

复制 .env 文件并根据需要修改配置：

cp .env.example .env

生产环境

配置 .env.production 文件中的生产环境变量。

部署

传统部署

构建

npm run build

构建产物将生成在 dist 目录中。

部署到服务器

将 dist 目录中的文件部署到Web服务器即可。

使用部署脚本

# 开发环境
./deploy.sh dev

# 测试环境
./deploy.sh test

# 生产环境
./deploy.sh prod

Docker部署

构建Docker镜像

docker build -t emotion-museum-web .

运行容器

docker run -d -p 3000:80 --name emotion-museum-web emotion-museum-web

使用Docker Compose

# 生产模式
docker-compose up -d

# 开发模式
docker-compose --profile dev up -d

Nginx配置示例

server {
    listen 80;
    server_name your-domain.com;
    root /path/to/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://backend-server;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

开发规范

组件命名

• 组件名使用PascalCase
• 文件名使用kebab-case
• 变量和函数使用camelCase

代码风格

项目使用ESLint和Prettier进行代码规范检查和格式化。

Git提交规范

使用约定式提交格式：

feat: 新功能
fix: 修复bug
docs: 文档更新
style: 代码格式调整
refactor: 代码重构
test: 测试相关
chore: 构建过程或辅助工具的变动

浏览器支持

• Chrome >= 87
• Firefox >= 78
• Safari >= 14
• Edge >= 88

许可证

MIT License

联系方式

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