feat: About Me

2026-08-19 18:05:20 +08:00
commit 214acfd33c
37 changed files with 6118 additions and 0 deletions
@@ -0,0 +1,233 @@
+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: "/images/aiping-cover.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 的完整演进过程。
+
+![提交记录](/images/aiping-commits.webp)
+
+移动端适配 · 核心模块开发 · 平台迭代`
+  },
+  {
+    id: "aihua",
+    mdOrder: 2,
+    title: "清程爱画",
+    description:
+      "AI 图像与视频生成平台。负责作品发布、作品管理、模型训练、AI 润色提示词、提示词打标等多个核心模块的开发与迭代，覆盖从创作到内容管理的完整链路",
+    image: "/images/aihua-cover.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: "/images/papermind-cover.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"
+  }
+];
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}