diff --git a/.superpowers/brainstorm/39838-1777791603/.server-stopped b/.superpowers/brainstorm/39838-1777791603/.server-stopped new file mode 100644 index 0000000..96d1744 --- /dev/null +++ b/.superpowers/brainstorm/39838-1777791603/.server-stopped @@ -0,0 +1 @@ +{"reason":"idle timeout","timestamp":1777795204433} diff --git a/.superpowers/brainstorm/39838-1777791603/animation-style.html b/.superpowers/brainstorm/39838-1777791603/animation-style.html new file mode 100644 index 0000000..94ffd30 --- /dev/null +++ b/.superpowers/brainstorm/39838-1777791603/animation-style.html @@ -0,0 +1,52 @@ +

Hero 动画风格偏好

+

你希望 Hero 区域传达什么样的品牌气质？选择最接近你期望的方向

+ +
+
+
A
+
+

沉稳专业 — 微妙渐变 + 文字动效

+

暖白/浅灰渐变背景，文字依次淡入上浮，极简装饰元素（如细线圆圈）。类似 Atlassian、Stripe 的克制风格。强调品牌可信度与专业感。

+
+

优势

  • 加载快，性能开销极低
  • 适配所有设备
  • 与现有品牌色（朱砂红 #C41E3A）自然融合
+

注意

  • 视觉冲击力相对温和
  • 需要文字排版功底支撑
+
+
+
+ +
+
B
+
+

科技动感 — 流光渐变 + 粒子/网格

+

深色或渐变背景，数据粒子流动、科技网格线、光晕效果。强调数字化转型与科技实力。类似 Vercel、Linear 的科技美学。

+
+

优势

  • 视觉冲击力强
  • 与"数字化转型"定位高度契合
  • 项目已有 DataParticleFlow、TechGridFlow 等组件
+

注意

  • 性能开销中等
  • 需要控制粒子数量避免喧宾夺主
+
+
+
+ +
+
C
+
+

东方韵味 — 水墨/印章 + 现代排版

+

融合中国传统元素（水墨晕染、印章动画）与现代极简排版。强调文化底蕴与创新融合。项目已有 InkBackground、SealAnimation 等组件。

+
+

优势

  • 品牌辨识度极高
  • 差异化明显，同行少有
  • 与 Novalon（诺华麟）品牌名呼应
+

注意

  • 设计难度高，容易"土味"
  • 需要精准控制水墨效果的克制度
+
+
+
+ +
+
D
+
+

融合创新 — 克制科技 + 品牌印记

+

以方案 A 的沉稳为底色，融入方案 B 的微妙科技光效（如渐变光晕），点缀方案 C 的品牌印章元素。三者取精华，克制融合。

+
+

优势

  • 兼顾专业感、科技感、品牌辨识度
  • 层次丰富但不杂乱
  • 与之前的设计方向（品牌融合重构）一致
+

注意

  • 实现复杂度最高
  • 需要精心调校各元素的视觉权重
+
+
+
+
diff --git a/.superpowers/brainstorm/39838-1777791603/hero-animation-demos.html b/.superpowers/brainstorm/39838-1777791603/hero-animation-demos.html new file mode 100644 index 0000000..dfd1ffe --- /dev/null +++ b/.superpowers/brainstorm/39838-1777791603/hero-animation-demos.html @@ -0,0 +1,332 @@ + + + + + +Hero 动画风格 Demo + + + + +
+ + + + +
+ + +
+
+
+
+
+
✦ 智连未来，成长伙伴
+

睿新致遠

+

企业数字化转型服务商

+

以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者

+
+ + +
+
+
+ + +
+
+
+
+
+
+
✦ 智连未来，成长伙伴
+

睿新致遠

+

企业数字化转型服务商

+

以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者

+
+ + +
+
+
+ + +
+
+
+
+
+
+
睿
+
+
✦ 智连未来，成长伙伴
+

睿新致遠

+

企业数字化转型服务商

+

以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者

+
+ + +
+
+
+ + +
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
睿
+
+
✦ 智连未来，成长伙伴
+

睿新致遠

+

企业数字化转型服务商

+

以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者

+
+ + +
+
+
+ +
当前：A 沉稳专业 — 微妙渐变 + 文字动效
+ + + + + diff --git a/.superpowers/brainstorm/39838-1777791603/hero-ink-demos.html b/.superpowers/brainstorm/39838-1777791603/hero-ink-demos.html new file mode 100644 index 0000000..fab6a97 --- /dev/null +++ b/.superpowers/brainstorm/39838-1777791603/hero-ink-demos.html @@ -0,0 +1,447 @@ + + + + + +东方韵味 Hero — 水墨扩散 Demo + + + + + +
+ + + +
+ + +
+
+ +
睿
+
+
✦ 智连未来，成长伙伴
+

睿新致遠

+

企业数字化转型服务商

+

以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者

+
+ + +
+
+
+ + +
+
+ +
睿
+
+
✦ 智连未来，成长伙伴
+

睿新致遠

+

企业数字化转型服务商

+

以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者

+
+ + +
+
+
+ + +
+ +
+
+
+
+
睿
+
+
✦ 智连未来，成长伙伴
+

睿新致遠

+

企业数字化转型服务商

+

以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者

+
+ + +
+
+
+ +
V1 宣纸水墨 — 传统宣纸底色 + 水墨扩散 + 印章
+ + + + + diff --git a/.superpowers/brainstorm/39838-1777791603/hero-refined-demos.html b/.superpowers/brainstorm/39838-1777791603/hero-refined-demos.html new file mode 100644 index 0000000..302d7da --- /dev/null +++ b/.superpowers/brainstorm/39838-1777791603/hero-refined-demos.html @@ -0,0 +1,779 @@ + + + + + +Hero 动画 — 精选方案 + + + + + +
+ + + +
+ + +
+ +
睿
+
+
✦ 智连未来，成长伙伴
+

睿新致遠

+

以智慧连接数字趋势，以伙伴身份陪您成长
——您的数字化转型同行者

+
+ + +
+
+
+ + +
+ +
+
✦ 智连未来，成长伙伴
+

睿新致遠

+

以智慧连接数字趋势
以伙伴身份陪您成长

+
+ + +
+
+
+ + +
+ +
+
✦ 智连未来，成长伙伴
+

睿新致遠

+

以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者

+
+ + +
+
+
+ +
壹 · 墨韵流光 — 流动水墨 + 光晕 + 印章
+ + + + + diff --git a/docs/superpowers/specs/2026-05-03-particle-visual-upgrade-design.md b/docs/superpowers/specs/2026-05-03-particle-visual-upgrade-design.md new file mode 100644 index 0000000..8a2e7a9 --- /dev/null +++ b/docs/superpowers/specs/2026-05-03-particle-visual-upgrade-design.md @@ -0,0 +1,55 @@ +# 粒子束视觉升级与移动端适配设计 + +日期: 2026-05-03 +状态: 已批准 + +## 目标 + +提升 InkDataMorph 粒子动画的视觉美观度，并确保移动端展示体验。 + +## 核心改动 + +### 1. 多色调系统（5级水墨色调） + +| 色调 | 色值 | 用途 | 分配比例 | +|------|------|------|----------| +| 浓墨 | #1C1C1C | 核心墨点 | 15% | +| 淡墨 | #4A4A4A | 中间层次 | 25% | +| 浅墨 | #8C8C8C | 氛围渲染 | 30% | +| 朱砂 | #C41E3A | 点缀焦点 | 10% | +| 淡朱 | #E8707A | 淡雅扩散 | 20% | + +### 2. 粒子形态升级 + +- 椭圆粒子 + 随机旋转角度（ctx.ellipse 替代 ctx.arc） +- 浓墨粒子：纵横比 0.8-1.0（近圆） +- 淡墨/浅墨粒子：纵横比 0.5-0.9（椭圆） +- 墨迹飞溅：10% 粒子为飞溅粒子（更快速度、更小半径、不参与 morphing） + +### 3. 响应式适配 + +| 参数 | 移动端 (<768px) | 平板 (768-1023px) | 桌面 (≥1024px) | +|------|-----------------|-------------------|----------------| +| 粒子数量 | 80 | 140 | 220 | +| 墨点起始 | 单墨点（右侧中上） | 双墨点（缩小间距） | 双墨点（当前） | +| 目标区域X | W*(0.55-0.9) | W*(0.5-0.9) | W*(0.5-0.9) | +| 目标区域Y | H*(0.1-0.5) | H*(0.12-0.6) | H*(0.12-0.65) | +| 连接距离 | 60px | 80px | 100px | +| 光晕缩放 | 0.5x | 0.75x | 1.0x | +| 渐变层数 | 2 | 2 | 3 | +| 拖尾效果 | 关闭 | 5帧 | 8帧 | +| 飞溅粒子 | 无 | 5% | 10% | + +### 4. 技术实现 + +- Particle 接口新增: rotation, scaleX, scaleY, isSplash, toneIndex +- 新增 InkTone 枚举和 TONES 常量数组 +- 新增 getResponsiveConfig(W) 函数根据屏幕宽度返回配置 +- resize 监听（debounced 300ms）重新初始化粒子系统 +- DPR 适配: Math.min(window.devicePixelRatio, 2) +- 移动端性能优化: 减少渐变层、关闭拖尾、减少粒子数 + +## 文件影响 + +- src/components/effects/ink-data-morph.tsx — 主要改动文件 +- src/components/effects/ink-data-morph.test.tsx — 测试更新 diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png new file mode 100644 index 0000000..ff5ae84 Binary files /dev/null and b/public/apple-touch-icon.png differ diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png new file mode 100644 index 0000000..131df7d Binary files /dev/null and b/public/favicon-16x16.png differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png new file mode 100644 index 0000000..ce44132 Binary files /dev/null and b/public/favicon-32x32.png differ diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..5345f00 Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/site.webmanifest b/public/site.webmanifest new file mode 100644 index 0000000..fa731cf --- /dev/null +++ b/public/site.webmanifest @@ -0,0 +1,26 @@ +{ + "name": "四川睿新致远科技有限公司", + "short_name": "睿新致远", + "description": "专注于企业数字化转型服务", + "icons": [ + { + "src": "/favicon-16x16.png", + "sizes": "16x16", + "type": "image/png" + }, + { + "src": "/favicon-32x32.png", + "sizes": "32x32", + "type": "image/png" + }, + { + "src": "/apple-touch-icon.png", + "sizes": "180x180", + "type": "image/png" + } + ], + "theme_color": "#C41E3A", + "background_color": "#FFFFFF", + "display": "standalone", + "start_url": "/" +} diff --git a/scripts/generate-favicons.js b/scripts/generate-favicons.js new file mode 100644 index 0000000..8d78873 --- /dev/null +++ b/scripts/generate-favicons.js @@ -0,0 +1,42 @@ +const sharp = require('sharp'); +const fs = require('fs'); +const path = require('path'); + +const svgPath = path.join(__dirname, '..', 'public', 'favicon.svg'); +const svg = fs.readFileSync(svgPath); + +async function generate() { + await sharp(svg).resize(180, 180).png().toFile(path.join(__dirname, '..', 'public', 'apple-touch-icon.png')); + console.log('apple-touch-icon.png (180x180) generated'); + + await sharp(svg).resize(32, 32).png().toFile(path.join(__dirname, '..', 'public', 'favicon-32x32.png')); + console.log('favicon-32x32.png generated'); + + await sharp(svg).resize(16, 16).png().toFile(path.join(__dirname, '..', 'public', 'favicon-16x16.png')); + console.log('favicon-16x16.png generated'); + + const png32 = await sharp(svg).resize(32, 32).png().toBuffer(); + + const header = Buffer.alloc(6); + header.writeUInt16LE(0, 0); + header.writeUInt16LE(1, 2); + header.writeUInt16LE(1, 4); + + const entry = Buffer.alloc(16); + entry.writeUInt8(32, 0); + entry.writeUInt8(32, 1); + entry.writeUInt8(0, 2); + entry.writeUInt8(0, 3); + entry.writeUInt16LE(1, 4); + entry.writeUInt16LE(32, 6); + entry.writeUInt32LE(png32.length, 8); + entry.writeUInt32LE(22, 12); + + const ico = Buffer.concat([header, entry, png32]); + fs.writeFileSync(path.join(__dirname, '..', 'public', 'favicon.ico'), ico); + console.log('favicon.ico generated'); + + console.log('All favicon files generated!'); +} + +generate().catch(err => console.error(err)); diff --git a/src/app/globals.css b/src/app/globals.css index 2bdb055..34033ce 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1152,10 +1152,14 @@ body { } /* 优化移动端按钮和链接的触摸目标 */ - a, button { + a:not(nav[aria-label="breadcrumb"] a), button { min-height: 44px; min-width: 44px; } + nav[aria-label="breadcrumb"] a { + min-height: 0; + min-width: 0; + } /* 防止长文本溢出 */ p, li, span { diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 95da4cf..61c1e18 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -124,7 +124,12 @@ export default function RootLayout({ - + + + + + + diff --git a/src/components/layout/breadcrumb.tsx b/src/components/layout/breadcrumb.tsx index 8e4522f..f682d55 100644 --- a/src/components/layout/breadcrumb.tsx +++ b/src/components/layout/breadcrumb.tsx @@ -14,7 +14,7 @@ interface BreadcrumbProps { export function Breadcrumb({ items }: BreadcrumbProps) { return ( -