一个基于 Vue 3 + TypeScript + Element Plus 构建的现代化个人网站，融合 VS Code 风格的设计语言，支持中英文切换和深色/浅色主题。
- 🎨 VS Code 风格设计 — 代码窗口、语法高亮等程序员美学元素贯穿全站
- 🌗 深色 / 浅色主题 — 一键切换，偏好自动持久化至
localStorage，首次访问跟随系统主题 - 🌍 国际化 (i18n) — 中英文动态切换，所有页面内容同步更新
- 📱 响应式布局 — 适配手机、平板和桌面端
- 🔙 移动端返回拦截 — 优化移动端体验，返回手势优先关闭模态框而不触发路由跳转
- 🚀 GitHub Actions 自动部署 — 推送
master分支即自动构建并部署至腾讯云 CloudBase 静态托管 - 🔍 SEO 优化 — 动态
<title>、meta描述、robots.txt和sitemap.xml - ✨ 丰富的交互动效 — 页面过渡动画、卡片悬浮效果、模态框展开/收起动画
| 页面 | 路由 | 说明 |
|---|---|---|
| 首页 | /home |
Hero 区域展示个人信息代码卡片 + 名言引用区 |
| 日常 | /daily |
瀑布流卡片布局，点击展开详情弹窗，支持图片和视频内容 |
| 作品集 | /portfolio |
网格展示作品，支持按类型筛选、置顶标识及集合详细描述展示 |
| 关于 | /about |
个人简介、教育/工作/项目/技能亮点卡片、几何时间轴、兴趣爱好展示 |
| 类别 | 技术 |
|---|---|
| 前端框架 | Vue 3 (Composition API) |
| 开发语言 | TypeScript |
| 构建工具 | Vite 7 |
| UI 组件库 | Element Plus |
| CSS 预处理器 | Less |
| 路由管理 | Vue Router 4 |
| 国际化 | Vue I18n |
| SEO | @vueuse/head |
| 部署 | GitHub Actions + CloudBase 静态托管 |
personal-website/
├── .agent/ # AI 辅助开发配置 (Skills & Workflows)
├── .github/workflows/ # GitHub Actions 部署工作流
├── public/ # 静态资源 (favicon, robots.txt, sitemap.xml)
├── src/
│ ├── assets/ # 静态资源 (logo 等)
│ ├── components/ # 通用组件
│ │ ├── TheHeader.vue # 顶部导航栏 (主题切换、语言切换)
│ │ ├── TheFooter.vue # 底部社交链接栏
│ │ ├── DailyCard.vue # 日常页面卡片组件
│ │ └── *Skeleton.vue # 骨架屏组件 (Daily & Portfolio)
│ ├── composables/ # 组合式函数 (逻辑复用)
│ │ └── useBackClose.ts# 移动端返回手势拦截逻辑
│ ├── data/ # 数据定义与云端获取逻辑
│ │ ├── dailyData.ts # 日常数据
│ │ ├── portfolioData.ts# 作品集数据
│ │ └── GUIDE.*.md # 数据配置与云后台操作指南
│ ├── locales/ # 国际化语言文件
│ │ ├── zh.json # 中文
│ │ ├── en.json # 英文
│ │ └── i18n.ts # i18n 配置
│ ├── router/ # 路由配置
│ ├── utils/ # 工具函数 (TCB 初始化等)
│ ├── views/ # 页面视图
│ │ ├── Home.vue # 首页
│ │ ├── Daily.vue # 日常
│ │ ├── Portfolio.vue # 作品集
│ │ ├── About.vue # 关于
│ │ └── Index.vue # 根布局
│ ├── App.vue # 根组件
│ ├── main.ts # 应用入口
│ └── main.less # 全局样式 & 主题变量
├── index.html # HTML 入口
├── vite.config.ts # Vite 配置
├── tsconfig.json # TypeScript 配置
└── package.json # 项目依赖 & 脚本
- Node.js
^20.19.0或>=22.12.0 - npm (随 Node.js 安装)
# 1. 克隆仓库
git clone https://github.com/TallMessiWu/personal-website.git
cd personal-website
# 2. 安装依赖
npm install
# 3. 启动开发服务器 (支持热重载)
npm run dev启动后访问 http://localhost:5173
# 构建生产版本 (含类型检查)
npm run build
# 预览生产构建
npm run preview
# 仅执行类型检查
npm run type-check项目已配置 GitHub Actions 自动部署至腾讯云 CloudBase 静态托管：
- 将代码推送到
master分支 - GitHub Actions 自动执行构建，并通过 CloudBase CLI 部署至静态托管
- 需在仓库 Settings → Secrets 中配置以下密钥：
TCB_SECRET_ID— 腾讯云 API 密钥 IDTCB_SECRET_KEY— 腾讯云 API 密钥 KeyTCB_ENV_ID— CloudBase 环境 ID