# han-coder-frontend-rev

**Repository Path**: hanser_wei_admin/han-coder-frontend-rev

## Basic Information

- **Project Name**: han-coder-frontend-rev
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-05
- **Last Updated**: 2025-09-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# HanCoder AI 应用生成平台

<div align="center">

![HanCoder Logo](/src/assets/logo.png)

**一句话轻松创建网站应用**

[![Vue 3](https://img.shields.io/badge/Vue-3.x-4FC08D?style=flat-square&logo=vue.js)](https://vuejs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-3178C6?style=flat-square&logo=typescript)](https://www.typescriptlang.org/)
[![Ant Design Vue](https://img.shields.io/badge/Ant%20Design%20Vue-4.x-0170FE?style=flat-square&logo=ant-design)](https://antdv.com/)
[![Vite](https://img.shields.io/badge/Vite-5.x-646CFF?style=flat-square&logo=vite)](https://vitejs.dev/)

</div>

## 🚀 项目介绍

HanCoder 是一个基于 AI 的应用生成平台，让用户通过简单的自然语言描述就能快速创建完整的网站应用。平台采用现代化的科技风格设计，提供直观的用户界面和强大的管理功能。

### ✨ 核心特性

- 🤖 **AI 驱动**：通过自然语言描述自动生成网站应用
- 🎨 **科技美学**：深色主题 + 霓虹色彩 + 动态光效
- 🔐 **安全防护**：验证码防恶意注册，完善的权限管理
- 📱 **响应式设计**：完美适配桌面端和移动端
- ⚡ **现代技术栈**：Vue 3 + TypeScript + Vite
- 🛡️ **权限管理**：用户角色区分，管理员后台功能

## 🎯 主要功能

### 用户功能
- **应用生成**：输入描述，AI 自动生成网站应用
- **个人中心**：管理个人信息和创建的应用
- **作品展示**：查看和管理自己的应用作品
- **实时对话**：与 AI 交互优化应用功能

### 管理功能
- **用户管理**：用户信息管理、权限设置
- **应用管理**：应用审核、精选推荐、删除管理
- **聊天管理**：对话记录查看和管理
- **数据统计**：平台使用情况统计

## 🎨 设计特色

### 科技风格主题
- **深色背景**：渐变色背景营造科技氛围
- **霓虹色彩**：青色、紫色、绿色的霓虹配色方案
- **动态效果**：网格背景、光效动画、悬停交互
- **毛玻璃效果**：现代化的半透明元素设计

### 用户体验
- **直观操作**：简洁明了的界面设计
- **快速响应**：优化的加载和交互体验
- **视觉反馈**：丰富的动画和状态提示
- **无障碍设计**：良好的可访问性支持

## 🛠️ 技术栈

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

### 开发工具
- **ESLint**：代码质量检查
- **Prettier**：代码格式化
- **Husky**：Git hooks 管理
- **Commitlint**：提交信息规范

## 📦 快速开始

### 环境要求
- Node.js >= 16.0.0
- npm >= 7.0.0

### 安装依赖
```bash
# 克隆项目
git clone https://github.com/yourusername/han-coder-frontend.git
cd han-coder-frontend

# 安装依赖
npm install
```

### 开发环境
```bash
# 启动开发服务器
npm run dev
```

### 构建部署
```bash
# 构建生产版本
npm run build

# 预览构建结果
npm run preview
```

## 🏗️ 项目结构

```
src/
├── api/                    # API 接口定义
│   ├── appController.ts    # 应用相关接口
│   ├── userController.ts   # 用户相关接口
│   └── ...
├── assets/                 # 静态资源
├── components/             # 通用组件
│   ├── GlobalHeader.vue    # 全局头部
│   ├── GlobalFooter.vue    # 全局底部
│   ├── CaptchaInput.vue    # 验证码组件
│   └── ...
├── layouts/                # 布局组件
├── pages/                  # 页面组件
│   ├── admin/             # 管理员页面
│   ├── app/               # 应用相关页面
│   ├── user/              # 用户相关页面
│   └── HomePage.vue       # 首页
├── router/                # 路由配置
├── stores/                # 状态管理
├── utils/                 # 工具函数
└── main.ts               # 应用入口
```

## 🔧 核心组件

### 验证码组件 (CaptchaInput)
- Canvas 绘制动态验证码
- 防机器人注册保护
- 科技风格视觉设计
- 点击刷新功能

### 用户管理 (AdminUserEditModal)
- 用户信息编辑
- 权限角色管理
- 表单验证
- 实时数据同步

### 个人资料 (UserProfileModal)
- 个人信息编辑
- 头像预览功能
- 表单验证
- 状态同步

## 🎯 页面功能

### 主页 (HomePage)
- AI 应用生成入口
- 快捷模板选择
- 个人作品展示
- 精选案例展示

### 管理后台
- **用户管理**：用户列表、编辑、删除、权限设置
- **应用管理**：应用审核、精选设置、统计分析
- **聊天管理**：对话记录查看、内容审核

### 用户中心
- **登录注册**：安全的用户认证系统
- **个人资料**：信息管理和设置
- **应用管理**：个人作品管理

## 🔐 安全特性

### 用户认证
- JWT Token 认证
- 会话状态管理
- 自动登录保持

### 防护机制
- 验证码防恶意注册
- 表单验证和数据校验
- XSS 防护
- CSRF 防护

### 权限控制
- 基于角色的访问控制 (RBAC)
- 路由守卫保护
- 接口权限验证

## 🎨 样式系统

### 设计令牌
```css
/* 主要颜色 */
--neon-cyan: #00ffff;      /* 霓虹青色 */
--neon-purple: #8a2be2;    /* 霓虹紫色 */
--neon-green: #00ff7f;     /* 霓虹绿色 */

/* 背景色 */
--bg-primary: #0f172a;     /* 主背景 */
--bg-secondary: #1e293b;   /* 次背景 */
--bg-tertiary: #334155;    /* 三级背景 */

/* 文字颜色 */
--text-primary: #e2e8f0;   /* 主文字 */
--text-secondary: #cbd5e1; /* 次文字 */
--text-tertiary: #94a3b8;  /* 辅助文字 */
```

### 组件样式
- 统一的圆角设计 (8px, 12px, 16px)
- 毛玻璃效果 (backdrop-filter: blur)
- 霓虹发光效果 (box-shadow + 色彩)
- 动态交互动画 (transform + transition)

## 📱 响应式设计

### 断点系统
- **移动端**：< 768px
- **平板端**：768px - 1024px  
- **桌面端**：> 1024px

### 适配策略
- 弹性布局 (Flexbox/Grid)
- 相对单位 (rem/em/%)
- 媒体查询优化
- 触摸友好的交互设计

## 🚀 性能优化

### 构建优化
- Vite 快速构建
- Tree Shaking 删除无用代码
- 代码分割和懒加载
- 资源压缩和优化

### 运行时优化
- Vue 3 Composition API
- 组件按需加载
- 图片懒加载
- 缓存策略优化

## 🤝 贡献指南

### 开发流程
1. Fork 项目到个人仓库
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送分支 (`git push origin feature/AmazingFeature`)
5. 创建 Pull Request

### 代码规范
- 使用 ESLint 进行代码检查
- 遵循 Vue 3 最佳实践
- TypeScript 类型安全
- 统一的命名规范

### 提交规范
```
feat: 新功能
fix: 修复 bug
docs: 文档更新
style: 代码格式调整
refactor: 代码重构
test: 测试相关
chore: 构建/工具链相关
```

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。

## 👨‍💻 作者

**Hanserwei**
- Website: [https://www.likeyy.love](https://www.likeyy.love)
- GitHub: [@hanserwei](https://github.com/hanserwei)

## 🙏 致谢

感谢以下开源项目的支持：
- [Vue.js](https://vuejs.org/) - 渐进式 JavaScript 框架
- [Ant Design Vue](https://antdv.com/) - 企业级 UI 组件库
- [Vite](https://vitejs.dev/) - 下一代前端构建工具
- [TypeScript](https://www.typescriptlang.org/) - 类型安全的 JavaScript

## 📞 联系我们

如果您有任何问题或建议，欢迎通过以下方式联系：
- 提交 Issue
- 发送邮件
- 加入讨论群

---

<div align="center">

**⭐ 如果这个项目对您有帮助，请给我们一个星标！**

</div>