236 lines
9.7 KiB
TypeScript
236 lines
9.7 KiB
TypeScript
export type PersonalProject = {
|
||
id: string;
|
||
title: string;
|
||
description: string;
|
||
image: string;
|
||
live: string | null;
|
||
gitea: string | null;
|
||
/** 项目背景：公司、时间段、状态（如已下架） */
|
||
meta?: {
|
||
company?: string;
|
||
period?: string;
|
||
status?: string;
|
||
};
|
||
/** 为 true 时展示 Intro 按钮 */
|
||
showIntro?: boolean;
|
||
/** 弹窗正文，按 Markdown 渲染 */
|
||
intro?: string;
|
||
/** 双列时的排序，数字越小越靠前；单列仍按数组顺序 */
|
||
mdOrder?: number;
|
||
};
|
||
|
||
export const personalProjects: PersonalProject[] = [
|
||
{
|
||
id: "aiping",
|
||
mdOrder: 1,
|
||
title: "AI Ping",
|
||
description:
|
||
"面向大模型使用者的服务评测与信息汇总平台，提供长周期、高频率、多时段的客观评测数据，助力高效完成大模型服务选型与服务商评估。参与平台前端核心功能 0-1 开发",
|
||
image:
|
||
"https://core.qflink.xyz/img/20260816/993c77393dccb7c37713da5957fba40a_medium.webp",
|
||
live: "https://aiping.cn",
|
||
gitea: null,
|
||
meta: {
|
||
company: "北京清程极智科技 · 实习",
|
||
period: "2025.07 – 2026.04"
|
||
},
|
||
showIntro: true,
|
||
intro: `面向大模型使用者的服务评测与信息汇总平台，提供长周期、高频率、多时段的客观评测数据，助力高效完成大模型服务选型与服务商评估。参与平台前端核心功能 0-1 开发。
|
||
|
||
**Tech Stack** · Vue 3 · TypeScript · ECharts · SSE · MarkStream · Mitt
|
||
|
||
## 通用泛型表格组件
|
||
|
||
针对多个业务页面表格逻辑重复、定制需求多的问题，基于 TypeScript 泛型封装通用表格组件：集成多字段排序、行展开折叠、数据缓冲防闪烁、行置顶等能力，通过插槽支持灵活列配置，已在 4 个页面复用。
|
||
|
||
|
||
|
||
TypeScript 泛型 · 插槽列配置 · 4 页面复用
|
||
|
||
## AI 响应实时流式渲染
|
||
|
||
集成 SSE 实现模型响应的实时流式传输，配合 MarkStream 完成 Markdown 增量渲染。
|
||
|
||
重构开源代码块行号插件，新增指定行高亮与样式标记能力。
|
||
|
||
|
||
|
||
SSE · MarkStream · 插件重构
|
||
|
||
## 数据可视化与联动
|
||
|
||
使用 ECharts 可视化评测数据并实现图表与表格的联动交互。
|
||
|
||
引入 Mitt 事件总线降低模块耦合，抽离通用函数与业务组件提升复用性，并优化响应式布局与多端适配。
|
||
|
||
|
||
|
||
ECharts · Mitt · 多端适配
|
||
|
||
## 深度参与
|
||
|
||
从项目初期持续迭代至今，高频参与核心模块的开发与重构，移动端适配几乎全程独立负责，提交记录见证了平台从 0 到 1 的完整演进过程。
|
||
|
||
|
||
|
||
移动端适配 · 核心模块开发 · 平台迭代`
|
||
},
|
||
{
|
||
id: "aihua",
|
||
mdOrder: 2,
|
||
title: "清程爱画",
|
||
description:
|
||
"AI 图像与视频生成平台。负责作品发布、作品管理、模型训练、AI 润色提示词、提示词打标等多个核心模块的开发与迭代，覆盖从创作到内容管理的完整链路",
|
||
image:
|
||
"https://core.qflink.xyz/img/20260816/11fe002c1f00bee4280a7e319a037c12_medium.webp",
|
||
live: null,
|
||
gitea: null,
|
||
meta: {
|
||
company: "北京清程极智科技 · 实习",
|
||
period: "2024.11 – 2025.07",
|
||
status: "已下架"
|
||
},
|
||
showIntro: true,
|
||
intro: `AI 图像与视频生成平台。负责作品发布、作品管理、模型训练、AI 润色提示词、提示词打标等多个核心模块的开发与迭代，覆盖从创作到内容管理的完整链路。
|
||
|
||
**Tech Stack** · Vue 3 · TypeScript · Naive UI · Vite
|
||
|
||
## 高频可复用表单组件
|
||
|
||
设计并封装基于 Naive UI 的高频可复用表单组件，减少复杂表单场景下的重复代码。
|
||
|
||
同时将 SVG Icon 转化为可交互的 Vue 组件，统一图标的使用与维护方式。
|
||
|
||
Naive UI · 表单封装 · SVG 组件化
|
||
|
||
## 协同交付与体验优化
|
||
|
||
与后端协同梳理接口字段、参数约束与异常处理逻辑，完成接口联调、问题排查与上线验收。
|
||
|
||
持续优化复杂表单和内容管理场景下的交互体验与页面稳定性，并深度参与移动端适配。
|
||
|
||
接口联调 · 移动端适配`
|
||
},
|
||
{
|
||
id: "my-v0",
|
||
mdOrder: 5,
|
||
title: "大屏低代码编辑器",
|
||
description:
|
||
"Vue 3 + Vite 大屏低代码编辑器，支持物料拖拽、画布编排、属性配置与实时预览，面向数据可视化大屏的快速搭建与交付。",
|
||
image:
|
||
"https://core.qflink.xyz/img/20260817/c56c26447560c0be6e4a77173b78e106_medium.webp",
|
||
live: "https://www.qflink.xyz/my-v0",
|
||
gitea: "https://git.qflink.xyz/jiawei/my-v0",
|
||
showIntro: true,
|
||
intro: `Vue 3 + Vite 大屏低代码编辑器前端，支持物料拖拽、画布编排、属性配置与实时预览。
|
||
|
||
## 技术栈
|
||
|
||
- **框架**：Vue 3、Vite、TypeScript、Pinia、Vue Router
|
||
- **样式 / UI**：Tailwind CSS、Element Plus、Iconify
|
||
- **画布**：vue3-moveable（拖拽缩放）、vue3-selecto（框选）、vue3-sketch-ruler（标尺）、 vue-draggable-plus（图层拖拽排序）
|
||
- **图表 / 编辑器**：ECharts、Monaco Editor
|
||
- **数据**：Axios、Mock.js
|
||
|
||
## 开发
|
||
|
||
Node \`^22.18.0 || >=24.12.0\`，包管理器用 pnpm。
|
||
|
||
\`\`\`bash
|
||
pnpm install
|
||
pnpm dev
|
||
pnpm build # vue-tsc --build + vite build
|
||
pnpm type-check
|
||
pnpm preview
|
||
pnpm lint # oxlint + eslint（都会 --fix）
|
||
pnpm format # prettier --write src/
|
||
\`\`\`
|
||
|
||
## 构建分包与性能
|
||
|
||
生产构建通过 Vite 8 的 Rolldown \`codeSplitting.groups\` 拆分 Vue、Element Plus 和画布交互依赖；编辑器、ECharts 图表和 Monaco 编辑器均按实际使用时异步加载。异步模块加载期间显示 loading，避免首次打开编辑器、首次拖入图表或打开 JSON 编辑器时出现空白区域。
|
||
|
||
### 首屏效果
|
||
|
||
- 页面加载时间：实测约从 6 s 降至 1 s
|
||
- 首屏入口 JS：从 6,585.31 kB（gzip 1,751.85 kB）降至 165.12 kB（gzip 60.45 kB）
|
||
- 入口 JS 未压缩体积减少约 97.5%，gzip 体积减少约 96.5%
|
||
|
||
### 生产构建产物
|
||
|
||
数据来自 \`pnpm build\`：
|
||
|
||
| Chunk | 未压缩体积 | gzip 体积 | 加载时机 |
|
||
| --- | --- | --- | --- |
|
||
| 入口 index JS | 165.12 kB | 60.45 kB | 首屏 |
|
||
| vue | 96.61 kB | 37.58 kB | 首屏 |
|
||
| element-plus JS | 294.87 kB | 99.25 kB | 编辑器加载后 |
|
||
| canvas JS | 292.04 kB | 95.24 kB | 编辑器加载后 |
|
||
| 编辑器业务 JS | 79.36 kB | 25.17 kB | 编辑器加载后 |
|
||
| 图表 component / ECharts | 1,166.65 kB | 389.20 kB | 首次渲染图表节点 |
|
||
| MonacoEditor JS | 58.71 kB | 15.63 kB | 首次打开 JSON 编辑器 |
|
||
| Monaco editor.api JS | 3,625.00 kB | 926.34 kB | 首次打开 JSON 编辑器 |
|
||
|
||
Monaco 的 CSS 为 308.18 kB（gzip 101.96 kB），同样延迟到首次打开 JSON 编辑器后加载。
|
||
|
||
Element Plus CSS 为 116.01 kB（gzip 16.05 kB），随编辑器模块加载。`
|
||
},
|
||
{
|
||
id: "paper-mind",
|
||
mdOrder: 4,
|
||
title: "Paper Mind",
|
||
description:
|
||
"现代化 PDF 翻译平台，专业的 AI 驱动翻译服务。负责平台的快速重构，借助 AI 辅助开发与 Svelte，两天内完成整站重构并上线",
|
||
image: "https://core.qflink.xyz/img/20260816/0af85f3400d94ee74ed5965327e1d465_medium.webp",
|
||
live: "https://fanyi.qc-ai.cn",
|
||
gitea: null,
|
||
meta: {
|
||
company: "北京清程极智科技 · 实习",
|
||
period: "2026.01"
|
||
},
|
||
showIntro: true,
|
||
intro: `现代化 PDF 翻译平台，专业的 AI 驱动翻译服务。负责平台的快速重构，借助 AI 辅助开发与 Svelte，两天内完成整站重构并上线。
|
||
|
||
**Tech Stack** · Svelte · TypeScript · AI-assisted Dev
|
||
|
||
## 两天重构上线
|
||
|
||
以 AI 辅助开发为核心工作流，快速梳理原有业务逻辑并用 Svelte 重写：从技术选型、页面重构到部署上线全流程压缩至两天，验证了 AI + 轻量框架在紧急交付场景下的工程效率。
|
||
|
||
AI 辅助开发 · Svelte · 48h 交付`
|
||
},
|
||
{
|
||
id: "pta",
|
||
mdOrder: 3,
|
||
title: "多模态智能对话",
|
||
description:
|
||
"2025 暑期实训作业，一个前后端分离的多模态智能对话演示站，覆盖文字聊天、文生图演示、语音识别、语音合成，以及语音连续对话等能力。",
|
||
image:
|
||
"https://core.qflink.xyz/img/20260817/a4f7a1f6c3e4769b5916ba076e9b66e9_medium.webp",
|
||
live: "https://www.qflink.xyz/pta",
|
||
gitea: "https://git.qflink.xyz/jiawei/Practical_Training_Assignment"
|
||
},
|
||
{
|
||
id: "infinite-slide",
|
||
mdOrder: 6,
|
||
title: "Infinite Slide",
|
||
description:
|
||
"基于 Leafer-UI 的 React 无限滑动画布组件。卡片以网格平铺，支持四向无限环绕、拖拽惯性、响应式布局、视口虚拟化，并可监听可视区域内的卡片。",
|
||
image:
|
||
"https://core.qflink.xyz/img/20260816/c54029c728fb4fe86bab5de43b5c7dc9_medium.webp",
|
||
live: "https://www.qflink.xyz/infinite-slide",
|
||
gitea: "https://git.qflink.xyz/jiawei/infinite-slide"
|
||
},
|
||
{
|
||
id: "ocs-service",
|
||
mdOrder: 7,
|
||
title: "OCS Nuxt AI Answer Service",
|
||
description:
|
||
"基于 Nuxt/Nitro 的 OCS AI 答题服务，迁移自 Python Flask 服务。使用 OpenAI 兼容的 Chat Completions 流式接口生成答案，同时兼容 OCS 题库接口，并提供多种请求方式、题型提示词处理、可选令牌校验、内存缓存、健康检查与运行统计。",
|
||
image:
|
||
"https://core.qflink.xyz/img/20260817/ebf2d71656ae76f5b48f10f1d5a3e8f7_medium.webp",
|
||
live: "https://ocs.qflink.xyz",
|
||
gitea: "https://git.qflink.xyz/jiawei/OCS_service"
|
||
}
|
||
];
|