构成主义 × 极简主义 — 一个全栈开发者和游戏创作者的展示空间
| 层级 | 技术 | 用途 |
|---|---|---|
| 框架 | Vue 3 (Composition API + <script setup>) |
前端框架 |
| 语言 | TypeScript（非严格模式） | 类型安全 |
| 构建 | Vite 5 | 构建工具 |
| 路由 | Vue Router 4（懒加载） | 路由管理 |
| CSS | Tailwind CSS 4 + @import "tailwindcss" |
工具类样式 |
| 工具 | clsx + tailwind-merge（cn() 函数） |
类名合并 |
| 图标 | lucide-vue-next + 自定义 SVG 组件 | 图标系统 |
| 动画 | CSS @keyframes + Vue <Transition> |
页面过渡 |
| 看板娘 | l2d-widget（Cubism 2/6） |
Live2D 角色 |
| 状态管理 | @vueuse/core（useColorMode） |
主题切换 |
| Markdown | markdown-it + KaTeX + highlight.js | 内容渲染 |
- 视觉：构成主义（Constructivism）— 几何图形、对角线、粗体字、红/黑/白对撞
- 强调色：橙色
#f7630c（--accent-color） - 主题色：金色
#e67e22（--theme-color） - 主题：暗色/亮色/跟随系统 三态切换（通过
<html>class 控制） - 毛玻璃：
acrylic类（backdrop-filter: blur(1rem)+ 半透明背景） - 动画：对角运动路由过渡、滚动入场、视差背景、点击涟漪
- 构成主义风格页面过渡动画（对角运动）
- 暗色/亮色/自动 三态主题切换
- Live2D 看板娘（随机待机动作，左下角）
- 视差滚动背景
- 滚动入场动画（Intersection Observer）
- 图片画廊与灯箱
- 404 页面（构成主义风格）
- 返回顶部按钮
- 动态页面标题
- Markdown 内容渲染（KaTeX 公式 + 代码高亮）
- 响应式设计（移动端适配）
# 安装依赖
npm install
# 启动开发服务器（localhost:5173）
npm run dev
# 构建生产版本
npm run build
# 预览构建结果
npm run previewsrc/
├── App.vue # 根组件：布局、路由过渡、背景视差、Live2D
├── main.ts # 入口：挂载插件、路由、全局样式
├── router.ts # 路由配置（懒加载 + 动态标题）
├── assets/ # 静态资源（图标、图片）
├── components/ # 公共组件（12 个）
├── composables/ # 组合式函数（useScrollAnimation、useRipple）
├── css/ # 全局样式（defStyle.css、markdownStyle.css）
├── lib/ # 工具库（theme、tools、live2d）
└── views/ # 页面组件（6 个，懒加载）
| 目录/文件 | 说明 |
|---|---|
src/css/defStyle.css |
CSS 变量定义、主题切换、全局样式、动画类 |
src/lib/theme.ts |
主题系统（三态切换、持久化、插件注入） |
src/lib/tools.ts |
cn() 工具函数 |
src/lib/live2d.ts |
Live2D 看板娘初始化 |
src/composables/useScrollAnimation.ts |
滚动入场动画 + 视差效果 |
src/composables/useRipple.ts |
点击涟漪 + 交错入场 |
- Cloudflare Pages：自动部署（关联 GitHub 仓库）
- GitHub Pages：通过 GitHub Actions 推送
v*tag 触发 - 部署配置在
.github/workflows/main.yml
本项目包含 AGENTS.md 智能体协作规范，AI 智能体在参与开发时请遵循其中的约束和约定。
MIT