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 个页面复用。

![通用泛型表格组件](https://core.qflink.xyz/img/20260816/c859bc76cdc209581f55d31548964ffd_medium.webp)

TypeScript 泛型 · 插槽列配置 · 4 页面复用

## AI 响应实时流式渲染

集成 SSE 实现模型响应的实时流式传输，配合 MarkStream 完成 Markdown 增量渲染。

重构开源代码块行号插件，新增指定行高亮与样式标记能力。

![AI 响应实时流式渲染](https://core.qflink.xyz/img/20260816/f7ad62460fde3e02587d0fe50f7bc114_medium.webp)

SSE · MarkStream · 插件重构

## 数据可视化与联动

使用 ECharts 可视化评测数据并实现图表与表格的联动交互。

引入 Mitt 事件总线降低模块耦合，抽离通用函数与业务组件提升复用性，并优化响应式布局与多端适配。

![数据可视化与联动](https://core.qflink.xyz/img/20260816/e55462a5f0095ec099d884e6bb8867c7_medium.webp)

ECharts · Mitt · 多端适配

## 深度参与

从项目初期持续迭代至今，高频参与核心模块的开发与重构，移动端适配几乎全程独立负责，提交记录见证了平台从 0 到 1 的完整演进过程。

![提交记录](https://core.qflink.xyz/img/20260816/740e79322c9849935b62b6a9c4cc57ab_medium.webp)

移动端适配 · 核心模块开发 · 平台迭代`
  },
  {
    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"
  }
];