# Ollama Chat App

> Ollama Chat App 将 AI 对话、用户权限、表单表格与文件处理整合到 Vue 3 前端工程，介绍核心功能、组件复用和技术边界。

原始页面：[Ollama Chat App](http://docs.quyongqing.cn/projects/ollama-chat-app.html)

`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 对话与业务后台融合
-   通用业务组件沉淀
-   用户体系与菜单权限
-   滑动验证码与短信验证码登录注册流程
-   聊天、表单、表格、文件能力一体化

## 扩展方向

-   多模型能力继续增强
-   后台模块继续补充
-   组件体系继续抽离和沉淀
-   文件处理与预览能力继续扩展

## 项目地址

[http://quyongqing.cn/](http://quyongqing.cn/)