xinjiang_travel

Imported from theonlyweiyi/xinjiang_travel (AGENTS.md). Install upstream with npx skills add theonlyweiyi/xinjiang_travel. Copyright stays with the author.

新疆7天自驾游攻略 - 信息可视化需求分析

基本信息

• 场景类型: <scene_type>info_viz</scene_type>
• 文件: 新疆7天自驾游攻略（文本内容）
• 内容类型: 图文混合（文字为主 + 路线示意图 + 时间轴可视化）
• 界面语言: 中文
• 主题偏好: user_specified（清新自然旅行风格，主色调蓝色+绿色，体现新疆蓝天草原）
• 图片生成: 否（路线地图用 CSS/SVG 示意图实现）

内容理解

核心主题

一份完整的新疆7天自驾游攻略，路线为乌鲁木齐—S101—赛里木湖—唐布拉—孟克特—独库—乌鲁木齐环线，提供每日行程、景点、住宿、美食和实用贴士，适合旅行爱好者参考和收藏。

章节结构

1. 行程概览 - 总览全局信息（里程、路线、季节、车型），让读者快速了解行程全貌
2. 每日详细行程 - 按天展示7天行程，是攻略的主体内容
3. 实用贴士 - 出行准备和注意事项，辅助读者做好行前规划

重点内容

• 核心结论: 这是一条涵盖丹霞、湖泊、草原、森林、峡谷、古道等多种地貌的经典新疆自驾环线，最佳季节为6-9月
• 关键决策点: 车型选择（SUV优先）、住宿预订（旺季提前）、独库公路通车时间（6-9月）

可视化识别

需要可视化的内容

保留文字的内容

• 每日行程的路线描述、里程、行车时间等详细信息保留文字段落
• 景点介绍的详细说明保留文字
• 住宿推荐、美食推荐的具体内容保留文字
• 贴士的详细说明保留文字

数据与图表规划

本攻略以文字内容为主，不涉及传统数据图表。仅有的数据类信息（里程、天数等）通过数据卡片形式展示即可，无需使用图表库。

数据概览

• 核心数据点: 总里程1800公里、7天行程、最佳季节6-9月、建议车型SUV
• 每日数据: 每日里程、行车时间、景点数量

图表规划

不需要图表的数据：每日里程对比、景点数量统计等非必要数据不做图表，避免为了可视化而可视化。

页面结构规划

说明：info_viz 场景为单页文档流布局，以下为页面区块结构

页面文件: TravelGuidePage.tsx

交互设计要点

1. 每日行程展开/收起: 时间轴上每天为一个折叠面板，默认全部收起或仅展开Day 1，点击展开查看详情
2. 平滑滚动: 点击顶部导航锚点平滑滚动到对应区域
3. 景点卡片悬停效果: 鼠标悬停时轻微上浮 + 阴影加深
4. 回到顶部按钮: 页面滚动到一定位置后显示
5. 响应式适配: 移动端时间轴调整为单侧布局，卡片改为单列

数据来源声明

本需求为纯展示型旅行攻略网页，所有内容由用户提供，作为静态数据硬编码在 src/data/travelGuide.ts 中，属于 demo-mock 类型。

<scene_type>prototype-app</scene_type>

UI 设计指南

1. 设计推导依据

• 参考意图: Free —— 无参考材料，从新疆自驾旅行语义出发自主设计
• 核心情绪 / 应用类型: 清新自然的公路旅行叙事感，内容站 + 实用攻略工具属性
• 独特记忆点: 以"天山蓝 + 草原绿"双主色渐变时间轴串联 7 天行程，每日卡片展开后呈现景点、住宿、美食三类信息模块，配合路线地图示意形成"一眼看懂、逐层深入"的阅读体验

2. Art Direction

• 方向名: 天山公路旅行志
• Design Style: Editorial 内容编辑风 + Soft Organic 柔化自然 —— 长文攻略需要强排版秩序，自然旅行主题需要柔和边界与呼吸感
• DNA 参数: 圆角 soft (rounded-lg/xl) / 阴影 subtle-layered (shadow-sm + hover:shadow-md) / 间距 spacious (gap-6 / p-8) / 字体方向 中文正文 Noto Sans SC + 标题衬线点缀 / 装饰手法 渐变时间轴圆点 + 风景图片裁切圆角 + 淡色路线连线
• 应用类型: Content / Narrative —— 纵向滚动叙事流，时间轴为骨架

3. Color System

色彩关系: 赛里木湖蓝主色 + 唐布拉草原绿辅助色 + 雪山白背景，形成"蓝天-草原-雪山"的新疆自然色彩层次 配色设计理由: 蓝色代表赛里木湖与天空，承担主交互与品牌锚点；绿色代表草原与森林，用于景点与自然元素强调；中性色偏暖白模拟高原日光下的纸面感，整体低饱和高对比保证长文可读性 主色推导: 从赛里木湖"大西洋最后一滴眼泪"的湖蓝色提取 primary，从唐布拉百里画廊的草原绿提取 accent，二者色相相差约 60°，饱和度均控制在中高水平，形成和谐又有区分度的双色系 使用比例: 60% 中性（白/浅灰/深墨）/ 30% 草原绿辅助 + 湖蓝浅底 / 10% 湖蓝主色；primary 仅用于 CTA、时间轴当前日、关键数字；accent 用于景点标签、hover 态、装饰元素

语义色提示:

• 成功/推荐（美食、住宿推荐）：hsl(145 55% 40%) —— bg: hsl(145 55% 92%) / border: hsl(145 50% 75%) / text: hsl(145 60% 25%)；与草原绿 accent 同色系，饱和度对齐 ±5%
• 警告/重要贴士：hsl(35 90% 50%) —— bg: hsl(40 90% 95%) / border: hsl(35 85% 70%) / text: hsl(25 80% 30%)；暖橙模拟丹霞与日落，饱和度低于 primary 10%，避免刺眼
• 错误/危险路况：hsl(0 70% 50%) —— bg: hsl(0 70% 96%) / border: hsl(0 65% 80%) / text: hsl(0 70% 30%)；仅用于路况警示，使用频率极低

4. 字体与节奏

• font-display: Noto Serif SC —— 标题与 Day 数字使用衬线，增加旅行日志的文学感与仪式感
• font-body: Noto Sans SC —— 正文与攻略信息使用无衬线，保证移动端长文可读性
• 字号: H1 text-4xl md:text-6xl；H2 text-2xl md:text-3xl；Day 数字 text-3xl md:text-4xl；body text-base；muted text-sm
• 圆角: 大（rounded-xl 卡片 / rounded-lg 按钮与图片 / rounded-full 时间轴圆点）—— 呼应自然地貌的柔和曲线

5. 全局布局契约

• Reference Layout Use: 按需求结构推导，时间轴 + 可展开卡片为核心交互骨架
• Page / Section Order: Hero（标题+路线总览+地图示意）→ 行程概览（4 项关键信息卡片）→ 每日行程（7 天时间轴，可展开）→ 实用贴士 → 页脚
• Standard Content Zone: Landing 型 max-w-4xl lg:max-w-5xl + mx-auto，攻略内容控制舒适阅读行长
• Shell / Frame Alignment: 同宽 —— 内容区与导航框架共享同一 max-w 约束
• Padding & Rhythm: px-4 md:px-6 lg:px-8 py-10 md:py-16，section 间距 py-12 md:py-16
• Full-bleed Zones: Hero 背景图与渐变全宽，内部标题与概览卡片受内容区约束；每日行程图片可卡片内全宽
• Local Narrowing: 实用贴士正文可收窄至 max-w-3xl，保持阅读聚焦
• Overflow Strategy: 路线地图示意在移动端可横向滑动查看完整路线
• Flexibility Boundary: 允许移动端时间轴改为左侧单线、卡片内边距减半；不允许改变主色、圆角系统、时间轴交互逻辑

6. 视觉与动效

• 装饰: 渐变时间轴连线 + 圆角风景图片 + 轻量路线 SVG 示意图
• 阴影/边界: 轻 —— 卡片默认 shadow-sm，hover 展开时 shadow-md，边界 1px solid border
• 动效: 精致克制 —— 卡片展开/收起用 300ms ease 高度过渡；时间轴当前日用呼吸式微光；图片加载用淡入；hover 态用背景色平移而非缩放

7. 组件原则

• 每日行程卡片：默认态显示 Day 数字、路线标题、里程/时长、核心景点标签；展开后显示详细路线、景点介绍、住宿、美食、贴士
• 时间轴节点：左侧竖线 + 圆形节点，当前日/已展开节点填充 primary，其余为 border 色
• 信息标签：景点用 accent 绿底、美食用暖橙浅底、住宿用湖蓝浅底、贴士用灰底
• 按钮与链接：主按钮 primary 填充，次按钮 outline + primary 边框，文字链接 text-primary + underline
• 所有可交互元素必须有 :focus-visible 环（outline 2px primary，offset 2px）

8. Image Direction

• Image Role: Hero 主视觉图 + 每日行程头图 + 景点缩略图；Hero 承担情绪冲击，每日图承担场景代入
• Image Art Direction: 写实风景摄影风格，强调新疆的辽阔感与光影层次；Hero 图采用赛里木湖或唐布拉草原广角全景，前景有公路或河流引导线，中景草原/湖面，远景雪山，天空占比 40%，黄金时刻光线（清晨或傍晚），色调偏冷蓝+暖金对比；每日头图采用对应景点的标志性画面，构图简洁主体明确，适合上方叠加白色文字；整体统一为高清晰度、自然色彩、低对比度胶片质感
• Image Prompt Keywords: 新疆风光摄影, 赛里木湖蓝湖雪山, 天山草原云杉, 丹霞地貌峡谷, 公路蜿蜒延伸, 黄金时刻光线, 广角全景构图, 自然色彩分级, 胶片质感, 高清晰度旅行摄影
• Image Avoidance: 避免过度饱和的网红滤镜感；避免人物占比过大的游客照；避免卡通插画或手绘风格替代真实风景；避免拼接感明显的素材图库图；避免低分辨率模糊图片

9. Anti-patterns

• Split personality: 首页用旅行风、内页回退到默认 SaaS 蓝；全站统一湖蓝+草原绿双色系与圆角语言
• Timeline bloat: 时间轴装饰过重挤压内容空间；时间轴线宽 ≤ 2px，节点直径 ≤ 16px，信息重心在卡片内容
• Image overload: 每页塞满大图导致加载慢且信息分散；仅 Hero 和每日展开态用大图，默认态用小缩略图或纯文字
• Invisible interaction: 卡片可点击但无 hover/focus 提示；卡片 hover 有边框色变化 + 轻微阴影，focus-visible 有外轮廓
• Mono-hue tyranny: 湖蓝铺满按钮、标签、图标、链接、标题；primary 只给 CTA 和时间轴激活态，景点用绿、美食用橙、辅助用灰
• Status color drift: 警告红/橙饱和度远高于主色，视觉跳脱；所有语义色饱和度与 primary 对齐 ±15%，保持统一质感
• Wall of text: 每日行程展开后一大段文字不分层；用图标+小标题+短段落拆分景点/住宿/美食/贴士四类信息