头像
YIBI

正在加载...

返回文章列表

更新日志

2026-06-13更新日志开发记录

2026-06-13 更新日志

本次更新新增/优化了 WindChime 风铃组件、项目页、照片墙页、动态页 及 PhotoLightbox 灯箱组件。

一、WindChime 风铃组件优化

文件: app/components/WindChime.vue

1.1 TypeScript 修复

  • 添加 lang="ts"，修复函数参数类型注解（dt: number）导致的编译错误
  • 清理未使用的 reactive 导入
  • 添加 CSSProperties 泛型 + as 断言修复 TS 样式类型错误
  • animationFrameId 显式类型 number | null

1.2 卡片连接结构修复

  • 卡片移入棍子内部：card-pivot 从 stick-pivot 的兄弟节点变为子节点
  • 卡片通过 position: absolute; top: 100%; left: 50% 挂在棍底中心
  • stick-pivot 添加 position: relative 作为锚点

1.3 物理模型重写（摆锤链）

棍子和卡片从「直接加减角速度」改为摆锤 + 转动惯量模型：

参数 棍子 卡片
转动惯量 5.0 6.0
位移力矩 ballOffsetX * 0.001 —
棍→卡耦合 — stickAngle * 0.025
速度阻尼 0.07 0.05

1.4 弹性边界反弹

  • 触顶不再硬截断，改为速度反向 + 能量损失（棍 -0.55 / 卡 -0.5）
  • 产生真实的阻尼回弹振荡，逐次减弱直到稳定

1.5 松手甩动

  • endDrag() 中棍子和卡片获得 mouseVelX * 0.06 初速
  • 拖拽扰动减弱（棍 <em> 0.4 / 卡 </em> 0.15），主要靠摆锤链自然响应

二、项目页

文件: app/pages/projects.vue

功能

  • 标题 + 副标题（与文章页一致）
  • 搜索框（名称/描述/标签匹配）+ 下拉结果
  • 标签筛选（自动从项目数据生成）
  • GitHub 项目显示深色 GitHub 徽章
  • 整卡可点击跳转到 GitHub 或自定义链接
  • 标签样式统一为文章页风格（rounded + bg-gray-100）
  • 容器宽度 max-w-7xl 与文章页对齐

当前项目

添加项目

ts
{ icon: '🎯', name: '项目名', description: '简介',
  tags: ['Vue', 'TS'], github: 'https://github.com/...', link: 'https://...' }

三、照片墙页

文件: app/pages/photowall.vue

3.1 主页面

  • 搜索框 + 标签筛选（与文章/项目页一致）
  • 相册卡片交叉堆叠（3 张封面以随机偏移/旋转散布）
  • hover 散开：悬浮时 3 张照片归零角度向外展开，卡片上浮
  • 动态宽高比（根据封面图实际比例）

3.2 三级导航

照片墙首页 → 点击 → 相册内页（瀑布流照片网格）→ 点击照片 → 灯箱

3.3 相册内页

  • 返回按钮 + 标题信息
  • CSS columns 瀑布流排列，照片保持原图比例（不做裁剪）
  • 悬浮显示照片名，点击打开灯箱

3.4 视觉

  • 所有照片 border-[8px] 白边 + rounded-sm 小圆角
  • 淡入淡出切换过渡动画

添加相册

ts
{ id: 'a1', cover: '封面URL', title: '标题', description: '描述',
  date: '2026-06-13', tags: ['城市', '街拍'],
  photos: [{ src: '图URL', name: '照片名' }, ...] }

四、PhotoLightbox 灯箱组件

文件: app/components/PhotoLightbox.vue

Props

Prop 类型 说明
photos string[] 照片 URL 数组
initialIndex number 初始显示的照片索引
title / description / date string 显示信息

功能

  • 全屏暗色遮罩 + 毛玻璃模糊
  • ← → 键翻页（带滑入方向动画）
  • Esc / 点击 × 关闭
  • 底部缩略点指示器，可点击跳跃
  • 入场淡出过渡（appear + opacity-0）
  • watch(initialIndex) 动态响应索引变化

使用

vue
<PhotoLightbox
  :photos="['url1', 'url2']" :initial-index="0"
  title="标题" @close="show = false"
/>

五、动态页

文件: app/pages/moments.vue

5.1 双视图模式

模式 布局 切换图标
时间线 竖线 + 圆点 + 单列卡片 ⏱
矩阵瀑布流 CSS columns 自适应高度 ⊞

5.2 功能

  • 搜索框（内容/定位匹配）+ 下拉结果
  • 排序切换（最新/最早）
  • useCookie 持久化视图和排序状态，无 hydration 闪屏
  • 两张模式切换无闪屏（contentKey + mode="out-in"）

5.3 动态卡片

  • 文字内容（支持换行）
  • 图片网格：4 列正方形，最多 9 张，超出显示 +N 遮罩
  • 点击图片打开灯箱浏览
  • 日期 + 📍 定位信息
  • 纯文字动态（images: []）无图片区域

5.4 添加动态

ts
{ id: 'm5', content: '文字', images: ['图1'], location: '北京', date: '2026-06-13' }

六、样式统一

元素 浅色模式 暗色模式
卡片背景 bg-white/50 dark:bg-slate-800/40
卡片边框 border-white/50 dark:border-white/10
标题 text-slate-800 dark:text-white
副标题 text-gray-500 dark:text-gray-400
正文 text-slate-800 dark:text-slate-100
图片白边 border-[8px] border-white/80 dark:border-white/20
标签 bg-indigo-50 text-indigo-600 dark:bg-indigo-900/20 dark:text-indigo-300

文件清单

app/
├── components/
│   ├── BaseCard.vue          # 玻璃态卡片（已有）
│   ├── PhotoLightbox.vue     # 全屏灯箱组件（新增）
│   └── WindChime.vue         # 风铃交互组件（重构）
├── pages/
│   ├── projects.vue          # 项目页（新增）
│   ├── photowall.vue         # 照片墙页（重构）
│   └── moments.vue           # 动态页（重构）
content/
└── CHANGELOG.md              # 本文件