白羽翾 · 前端开发作品集

小说精品屋｜前端开发

技术栈：Vue3 + TypeScript + Pinia + Vite + Spring Boot + Elasticsearch｜2024.09-2025.01

💡 点击图片可放大查看

项目描述：基于Vue3 + Spring Boot的前后端分离系统，包含C端阅读平台与作家创作后台双端。前端实现用户注册登录、小说浏览、章节阅读、评论互动、作品管理、章节创作等核心模块。
前端职责：负责C端阅读页与作家后台全部页面开发；基于Vue3 + TypeScript + Pinia搭建前端架构；使用Vue Router实现双端路由与JWT双角色鉴权守卫；封装书籍卡片、章节列表、评论组件等可复用组件。
核心功能：
- C端阅读：小说列表、分类筛选、书名/作者模糊检索（接入Elasticsearch）、章节阅读、评论发布。
- 作家后台：小说发布（封面JPG上传，5MB限制）、章节创作管理、点击量与订阅统计、作品数据看板。
- 双角色鉴权：普通用户与作家双角色，基于JWT实现登录态管理，路由守卫控制访问权限。
技术亮点：Vue3组件化开发，书籍卡片、章节列表、评论组件复用率超80%；Elasticsearch检索前端使用防抖+分页缓存，响应稳定在500ms内；项目已在Gitee开源。
量化成果：双端页面30+，组件复用提升开发效率约30%，检索响应≤500ms。

中医药课题申报系统｜前端开发核心成员

技术栈：Vue 3.5 + Vue Router 4.2 + Vite 8.0 + Axios + Mammoth + Element Plus｜4人团队｜2024.10-2025.04

💡 点击图片可放大查看

项目描述：面向中医药科研管理的B端申报系统，覆盖身份认证、课题申报、多级审批、专家匿名评审、系统配置全流程。前端实现多角色权限隔离、复杂表单、状态机流转展示。
前端职责：负责身份申请、课题申报、专家评审、系统配置等模块前端开发；基于Vue Router实现多角色路由守卫与动态菜单权限；封装可复用表单组件、审批流组件与状态标签组件。
核心功能：
- 多角色权限：中心管理员、机构管理员、机构普通用户、评审专家、默认用户五类角色，前端路由守卫+动态菜单实现权限隔离。
- 课题申报：草稿保存、附件上传（Word/PDF）、必填项校验、申报状态实时展示。
- 多级审批：机构初审→中心终审两级审批链路，状态标签与进度条展示流转状态。
- 专家评审：匿名活页查看、四维度分项打分、草稿暂存、回避申请、二次评审，前端实现分数范围校验与提交锁定。
- 系统配置：申报时间管理、课题分类管理、评审规则管理、公告管理，Element Plus表单实现动态配置。
技术亮点：Vite热更新极速开发；Axios拦截器统一处理Token与异常；Mammoth实现Word在线预览；前端状态机与后端同步，保障审批流程可追溯。
量化成果：5类角色、30+功能页面，单元测试通过率93.75%，集成测试通过率100%，上线后零重大生产故障。

民族团结摄影大赛平台｜前端开发核心成员

技术栈：Vue 3.5 + Pinia + Vue Router 4 + Axios + Element Plus + Vite｜3-4人团队｜2024.10-2025.04

💡 点击图片可放大查看

项目描述：面向高校民族团结摄影大赛的数字化赛事平台，覆盖用户端作品提交、浏览、点赞、排行榜，管理员端作品审核、公告管理、数据统计。前端模块化架构，公共组件复用率80%。
前端职责：负责用户端与管理端页面开发；基于Vue3 Composition API封装可复用组件；Pinia管理用户登录状态、作品列表、点赞状态；Vue Router实现用户端与管理员端路由隔离与权限守卫。
核心功能：
- 作品提交：支持jpg/png（≤5MB）与mp4/avi/mov/wmv（≤50MB）上传，前端文件类型与大小校验，草稿保存与正式提交。
- 作品浏览：筛选、搜索、排序，Element Plus表格与分页，接口响应≤500ms。
- 点赞防重复：24小时内仅能点赞1次，取消后可重新点赞，Pinia同步点赞状态与点赞数。
- 排行榜：总榜与日榜双维度，ECharts可视化热度趋势。
- 管理员端：作品审核（通过/驳回、批量）、置顶、公告管理、系统配置、数据统计看板。
技术亮点：封装通用请求函数与Axios拦截器，统一异常与Token处理；Vite代理解决跨域；路由守卫实现未登录重定向；公共组件复用率80%。
量化成果：支撑100+并发上传，接口平均响应≤500ms，系统可用性99%+。

家谱管理系统｜前端开发负责人

技术栈：Vue 3.4 + Composition API + Pinia 2.1 + Vue Router 4.2 + Vite 5.0 + Axios + vue-family-tree｜3-4人团队｜2025.03-2025.06

💡 点击图片可放大查看

项目描述：数字化家族族谱管理系统，解决传统纸质族谱更新困难、查询不便等问题。前端实现家族成员管理、亲属关系可视化、照片管理、回收站恢复、数据统计等核心功能。
前端职责：负责前端架构搭建，Vue3 + Composition API开发全部页面；Pinia管理成员数据与登录状态；vue-family-tree与递归组件实现家族树可视化；封装FamilyStats统计组件与PhotoManager照片管理组件。
核心功能：
- 家族树可视化：递归组件FamilyChildrenRow渲染多层级家族关系，buildCoupleTree算法将扁平成员列表转为树形结构，支持夫妻节点、子女节点、养子女虚线标识，颜色区分性别。
- 成员管理：增删改查、软删除与回收站恢复，成员列表分页展示，支持按状态筛选。
- 数据统计：FamilyStats组件统计总成员数、世代分布、性别比例、年龄分布、教育程度、婚姻状态，卡片+条形图可视化。
- 照片管理：PhotoManager组件实现多张照片上传、预览与删除，FormData上传至后端。
技术亮点：递归组件实现无限层级家族树；Pinia集中管理复杂亲属关系数据；Vite代理配置解决跨域；Axios封装通用request函数；响应式布局适配PC与移动端。
量化成果：支持数万条成员记录高效渲染，家族树展开/折叠流畅，统计页面秒级加载。

多模态AI Agent智能内容系统｜前端核心开发

技术栈：Vue3 + TypeScript + Node.js + SSE + ECharts｜2025.03-2025.05

💡 点击图片可放大查看

项目描述：基于多模态大模型的智能内容生成系统，前端实现多轮对话、任务展示、结果校验等交互流程，并搭建效果评测面板。
前端职责：Vue3 + TypeScript完成交互界面与功能原型开发；设计SSE流式输出与异步任务队列，解决大模型长响应导致的前端阻塞；搭建5维度效果评测面板，支持2000+样本数据可视化。
核心功能：多轮对话界面、任务进度展示、结果卡片渲染、SSE流式输出、异步任务队列、ECharts可视化评测面板。
量化成果：核心响应时间控制在2s以内，前端交互无阻塞，核心场景准确率从62%提升至88%。