⚡

Scoop新闻平台UI重构工作流Skill scoop-ui-refactor

本技能是一个针对Scoop新闻平台前端界面的专项重构工作流。它专注于优化用户界面布局、提升地球仪交互体验、改进研究工作区设计，并强制执行无表情符号政策。核心工作包括压缩布局空间、实现类似TikTok的吸附滚动效果、确保功能完整性，以及通过系统化步骤移除所有UI、日志和文档中的表情符号。适用于前端开发者、UI/UX设计师进行项目重构和代码规范化。关键词：UI重构，前端开发，用户体验优化，吸附滚动，无表情符号，代码规范，React组件，工作流。

前端开发 0 次安装 0 次浏览 更新于 3/2/2026

名称：scoop-ui-refactor 描述：用于Scoop新闻平台的项目特定UI重构工作流，位于/home/bender/classwork/Thesis。在更新Scoop前端布局、地球仪用户体验、研究工作区及品牌文档时使用，需保留所有功能，并在UI、日志和文档中强制执行无表情符号政策。

Scoop UI 重构

范围

  • 项目根目录：/home/bender/classwork/Thesis
  • 前端：frontend/app 和 frontend/components

预期成果

  • 保留所有现有功能（视图模式、过滤器、研究、模态框）。
  • 提高信息密度，减少垂直空白区域。
  • 使地球仪选择流程清晰易用。
  • 为网格视图实现吸附滚动。
  • 保持信息流吸附滚动，同时保持全局页眉可见。
  • 从UI、日志和文档中移除表情符号。

工作流程

  1. 审查主要界面
  • frontend/app/page.tsx（主页布局）
  • frontend/components/globe-view.tsx 和 frontend/components/interactive-globe.tsx
  • frontend/app/search/page.tsx（研究界面）
  • frontend/app/globals.css（主题变量）
  1. 主页布局重构
  • 将头条新闻压缩为标题+摘要+操作行。
  • 将长篇叙述块移至紧凑的摘要卡片中。
  • 将冗长的“联系”部分转换为简短的操作行。
  • 保持视图模式控件和过滤器可见且分隔开。
  1. 地球仪视图用户体验
  • 添加清晰的国家焦点标题。
  • 显示所选国家的来源数量和顶级来源。
  • 保持清晰的“重置”操作可见。
  • 移除所有国旗表情符号及任何表情符号使用。
  1. 研究工作区
  • 使用顶部查询栏。
  • 添加简报和流程模式（流程模式按顺序显示推理步骤）。
  • 将历史记录或聊天列表移至侧边栏。
  • 确保研究视觉效果与主信息流样式区分开。
  1. 无表情符号强制执行
  • 使用ripgrep查找表情符号使用情况并将其移除。
  • 用图标或标签替换表情符号。
  • 应用于UI字符串、日志和文档。
  1. 信息流视图吸附滚动（类似TikTok风格）
  • 在具有snap-y snap-mandatory scroll-smooth属性的滚动容器内，使用全视口区域（h-screen，snap-start）。
  • 仅在实际发生吸附过渡时对滚轮/触摸事件调用event.preventDefault()；当处于第一项/最后一项时允许默认滚动，以保持全局页眉可见。
  • 跟踪activeIndex和isAnimating防护标志；为下一个/上一个区域调用scrollIntoView，并在短暂超时后清除防护标志。
  • 支持滚轮、触摸（deltaY阈值）和箭头键；对小增量进行防抖处理以避免意外吸附。
  • 保留模态框、书签、点赞和收藏行为；不破坏现有的信息流操作。

检查项

  • 确认视图模式仍能正确切换。
  • 确认模态框和来源过滤器仍能工作。
  • 确认研究结果仍能渲染并嵌入来源。
  • 确认信息流吸附滚动在滚轮、触摸和箭头键上仍能工作，并且页眉在顶级滚动时仍可访问。

近期背景

  • 如果区域固定为h-screen而未考虑周围布局，吸附滚动信息流会裁剪下方内容；建议在滚动容器内使用弹性父容器（flex-1 h-full min-h-0）和每个区域h-full min-h-full snap-start，以便每篇文章使用可用的视口高度而不隐藏标题。
  • 目前前端存在预先存在的警告/错误导致lint失败（未使用的变量、钩子顺序、显式any）；修复工作待进行，与吸附滚动布局无关。