Appearance
Ollama Chat App
ollama-chat-app 是一个基于 Vue 3 + TypeScript 构建的 AI 对话与后台业务融合项目，目标不是单纯的演示页，而是更接近正式产品形态的前端应用。
项目定位
- 面向 AI 对话与业务场景结合的中后台产品
- 在统一项目中承载对话、权限、表单、表格、文件处理等常见能力
- 兼顾页面体验、组件沉淀和后续业务扩展
核心能力
- AI 对话：提供对话页面、消息交互和基础会话体验
- 用户系统：包含手机号密码登录、手机号验证码登录、注册、用户信息、角色菜单和权限相关页面
- 业务页面：覆盖数据概览、任务计划、系统管理、表单表格组合等场景
- 文件能力：支持文件上传、预览以及
docx预览组件 - 复用组件：沉淀了
qyq-form、qyq-table、背景轮播、雪花特效等组件 - 交互能力：登录注册流程接入滑动验证码校验，并引入 DataV 与 GSAP 增强大屏展示和页面动效
技术栈
- Vue 3
- TypeScript
- Vite
- Element Plus
- Pinia
- Vue Router
- Axios
- DataV
- GSAP
- Supabase SDK
适合承载的场景
- AI 助手或多模型对话前台
- 带用户体系的业务后台
- 需要沉淀通用组件能力的中小型产品
- 后续持续扩展页面和模块的正式项目
技术亮点
1. AI 对话与业务后台放在同一项目中
- 不是单纯的聊天演示页，而是把 AI 对话、用户体系、后台页面和业务组件放在统一前端工程里
- 这种结构更适合长期演进，也更接近正式产品项目
2. 通用业务组件沉淀比较完整
- 已经沉淀了
qyq-form、qyq-table、文件上传预览、背景轮播、雪花动效等组件 - 这些组件既能支撑业务页面，也能继续抽离成独立文档能力
3. 页面类型覆盖比较全
- 不只是聊天页，还包含数据概览、任务计划、系统管理、表单表格组合等页面
- 说明项目已经具备比较完整的业务壳层能力
4. 用户体系与菜单权限已接入前端
- 登录、用户信息、角色菜单、待办事项等能力已经和页面结构打通
- 对外看是一个聊天项目，对内其实已经具备中后台产品基础
5. 登录注册流程接入了验证码校验
- 登录页支持手机号 + 密码、手机号 + 验证码两种登录方式
- 注册流程接入短信验证码发送与校验，提升账户注册和登录链路的完整度
- 验证码发送前增加滑动验证码校验，用于拦截批量请求和异常触发
6. 引入 DataV 和 GSAP 增强展示与动效
- DataV 主要用于数据分析大屏相关的装饰边框、视觉组件和大屏氛围构建
- GSAP 主要用于页面动效、滚动展示和交互过渡，增强首页和特效区域的表现力
技术难点
1. 项目边界比较宽
- 一个前端工程里同时放聊天、后台、组件、文件处理和交互效果，结构上更容易变复杂
- 如果后续不持续做模块边界控制，维护成本会逐步上升
2. 多种页面范式共存
- 聊天页、后台页、表单页、组件演示页本质上是不同类型的页面
- 想同时保持体验统一和代码复用，需要持续做组件抽象和布局收敛
3. 组件沉淀与业务开发需要平衡
- 组件抽得太早，容易过度设计
- 只做业务不沉淀，又会导致复用能力不足
- 这类项目真正难的地方，是在复用和交付之间找到合适平衡
项目特点
- AI 对话与业务后台融合
- 通用业务组件沉淀
- 用户体系与菜单权限
- 滑动验证码与短信验证码登录注册流程
- 聊天、表单、表格、文件能力一体化
扩展方向
- 多模型能力继续增强
- 后台模块继续补充
- 组件体系继续抽离和沉淀
- 文件处理与预览能力继续扩展