Skip to content

fix: history stock name truncate [Issue: #815] - #894

Merged
ZhuLinsen merged 3 commits into
ZhuLinsen:mainfrom
Activer007:feat/history-stock-name-truncate
Mar 27, 2026
Merged

fix: history stock name truncate [Issue: #815]#894
ZhuLinsen merged 3 commits into
ZhuLinsen:mainfrom
Activer007:feat/history-stock-name-truncate

Conversation

@Activer007

Copy link
Copy Markdown
Contributor

PR Type

  • fix

  • feat

  • refactor

  • docs

  • chore

  • test


Background And Problem

本 PR 修复历史列表中过长股票名称与右侧状态标签文字重叠的 UI 问题。( Issue: #815

问题描述:当历史记录中的股票名称过长时,在 1920x1080 分辨率下,股票名称与右侧情绪标签(如"观望 35" / "减仓
35")发生文字重叠,影响用户识别。

触发场景:历史列表中包含长股票名称的记录(主要是美股)。


Scope Of Change

新增文件:

  • apps/dsa-web/src/utils/stockName.ts — 股票名称截断工具函数
  • apps/dsa-web/src/utils/tests/stockName.test.ts — 单元测试(25 个测试用例)

修改文件:

  • apps/dsa-web/src/components/history/HistoryListItem.tsx — 引入截断逻辑与悬停交互
  • apps/dsa-web/src/components/history/tests/HistoryList.test.tsx — 集成测试
  • docs/CHANGELOG.md — 同步更新

说明:未更新 README.md 属于小bug 修复,不影响其他功能;


Issue Link

Fixes #815


Verification Commands And Results

cd apps/dsa-web
npm run lint
npm run build
npm test

关键输出/结论:

检查项 结果
npm run lint │ 通过(无输出)
npm run build │ 通过(7.18s,3175 modules transformed)
npm test │ 317 passed, 2 skipped


Compatibility And Risk

  • 兼容性:本改动为纯前端 UI 优化,不涉及 API、Schema 或数据结构的变更。
  • 兼容性:新增的 stockName.ts 工具函数仅在 HistoryListItem 组件内部使用,无外部调用方影响。
  • 风险:截断长度阈值(英文 15/中文 8/混合 10)是基于常见股票名称长度的人工设定,若未来出现更长的合法股票名称,可能需要调整阈值。
  • 风险:悬停交互依赖 CSS group-hover 类名,若外层容器类名变更,可能需要同步调整。

Rollback Plan

  • 直接 git revert 回退到合入前状态;
  • 若只需临时禁用截断功能,可通过设置 STOCK_NAME_MAX_LENGTH 为较大值(如 999)实现,无需代码回滚。

EXTRACT_PROMPT Change (if applicable)

None


Checklist

  • 本 PR 有明确动机和业务价值 / This PR has a clear motivation and value
  • 已提供可复现的验证命令与结果 / Reproducible verification commands and results are included
  • 已评估兼容性与风险 / Compatibility and risk have been assessed
  • 已提供回滚方案 / A rollback plan is provided
  • 若涉及用户可见变更,已同步更新相关文档与 docs/CHANGELOG.md;未更新 README.md,已说明原因;

Snipaste_2026-03-27_19-00-01

Display truncated stock names with a trailing dot (max 15 English / 8
Chinese / 10 mixed chars). Show full name on hover. Extract truncation
logic to utils/stockName with full test coverage.

(cherry picked from commit 76cf05db841dc8ee39436e0ba9cd86be2690252c)
The title attribute is no longer needed since truncateStockName
already handles long stock names properly.
Unified duplicate item.stockName || item.stockCode expressions to use
  the pre-computed stockName variable. Also added CHANGELOG entry
@Activer007
Activer007 requested a review from ZhuLinsen as a code owner March 27, 2026 11:43
@github-actions github-actions Bot added documentation Improvements or additions to documentation size/L testing labels Mar 27, 2026
@Activer007 Activer007 changed the title Feat/history stock name truncate fix: history stock name truncate [Issue: #815] Mar 27, 2026
@github-actions

Copy link
Copy Markdown

🤖 自动审查报告

项目 结果
📊 变更文件 5 个
➕ 新增行数 203 行
➖ 删除行数 3 行
🔍 静态检查 ✅ 通过
🧠 AI 审查 ✅ 已完成

📁 修改的文件

  • 📝 apps/dsa-web/src/components/history/HistoryListItem.tsx (+11/-3)
  • 📝 apps/dsa-web/src/components/history/__tests__/HistoryList.test.tsx (+26/-0)
  • 🆕 apps/dsa-web/src/utils/__tests__/stockName.test.ts (+119/-0)
  • 🆕 apps/dsa-web/src/utils/stockName.ts (+46/-0)
  • 📝 docs/CHANGELOG.md (+1/-0)

🧠 AI 代码审查意见

结论

Ready to Merge

结构化审查结果

必要性

通过。 本 PR 明确指出修复了历史列表中过长股票名称与右侧状态标签文字重叠的 UI 问题(Issue: #815),影响用户识别,且提供了截图。该修复具有明确的业务价值和用户体验提升。

关联性

通过。 PR 描述中明确提及 "Fixes #815",与问题描述中的 Issue 完全关联。

类型

通过。 PR 类型标记为 fix,与解决 UI 重叠问题的性质一致。

描述完整性

完整。

  • 背景与问题:清晰描述了问题、触发场景及影响。
  • 变更范围:详细列出了新增和修改的文件,并解释了未更新 README.md 的原因。
  • Issue 链接:已提供。
  • 验证命令与结果:提供了 npm run lint, npm run build, npm test 的执行命令和详细的通过结果,证明了前端代码的质量和功能。
  • 兼容性与风险:充分评估了兼容性(纯前端 UI 优化,无 API/Schema 变更,工具函数隔离)和风险(阈值设定,CSS 类名依赖),考虑周全。
  • 回滚方案:提供了明确的 Git 回滚和临时禁用方案。
  • Checklist:所有项均已勾选。
  • 用户可见变更docs/CHANGELOG.md 已同步更新。

风险级别

低。

  • 关键风险:描述中提及的风险(截断长度阈值、CSS group-hover 类名依赖)已被充分识别,且风险可控。代码改动集中在 UI 层,对核心业务逻辑和后端无影响。
  • 新增工具函数stockName.ts 新增的工具函数仅在 HistoryListItem 中使用,且经过详尽的单元测试(25个测试用例),引入的风险极低。

必改项

无。

建议项

无。


详细审查意见:

  1. 代码质量:

    • apps/dsa-web/src/utils/stockName.ts: 工具函数设计良好,考虑了英文、中文、混合字符的不同截断逻辑,并用正则判断字符类型,逻辑清晰。常量的定义也使得配置可维护。
    • apps/dsa-web/src/utils/__tests__/stockName.test.ts: 单元测试非常详尽和全面,覆盖了各种字符类型、长度边界和边缘情况,确保了截断逻辑的正确性。这是高质量代码的重要标志。
    • apps/dsa-web/src/components/history/HistoryListItem.tsx: 组件集成做得很好。通过 isStockNameTruncated 判断是否需要启用悬停显示完整名称的交互,并巧妙地利用 Tailwind CSS 的 group-hoverz-indexopacity 类名实现 UI 效果,用户体验考虑周全。使用 item.stockName || item.stockCode 确保了名称的健壮性。
    • apps/dsa-web/src/components/history/__tests__/HistoryList.test.tsx: 集成测试中添加了针对长中文名称的测试用例,验证了截断功能在实际组件中的表现,进一步增强了代码的可靠性。
  2. 文档与说明:

    • docs/CHANGELOG.md 更新及时且内容准确,符合规范。
    • PR 描述清晰、结构完整,提供了所有必要的背景信息、技术细节和风险评估,展现了良好的工程实践。
  3. CI 检查:

    • PR 描述中提供了本地 npm run lint, npm run build, npm test 的详细输出,显示所有检查均通过。这与本次 PR 对前端的修改性质非常匹配,验证充分。

综上所述,本次 PR 针对明确的 UI 问题提供了高质量的解决方案,代码实现健壮,测试覆盖完善,文档更新及时,且经过充分验证。因此,该 PR 已达到合入标准。


💡 提示: 请确保代码已通过本地测试,并遵循项目代码规范。

@ZhuLinsen ZhuLinsen left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

评审结论

  • 必要性:通过,针对 #815 的历史列表名称与状态标签重叠问题做了范围收敛的前端修复,符合仓库对 fix 类最小改动的要求。
  • 是否有对应 issue:有(Fixes #815
  • PR 类型:fix,改动集中在 apps/dsa-web 的历史列表展示逻辑、对应测试和 docs/CHANGELOG.md
  • description 完整性:完整,已覆盖背景、范围、验证命令与结果、兼容性/风险、回滚方案,并说明了未更新 README.md 的原因。
  • 是否可直接合入:不可,HistoryListItem 中新增的 hover 交互当前并不会生效,和 PR 描述及 changelog 中声明的用户可见行为不一致,需要先修正。

主要问题

  1. [Correctness blocker] apps/dsa-web/src/components/history/HistoryListItem.tsx 中子元素使用了 group-hover/item:*,但外层父节点仍是 group,不是 group/item。按 Tailwind 的命名 group 语义,这会导致“悬停显示完整股票名称”以及 badge 透明度调整都不会触发。当前实际落地的是静态截断,不是 PR 描述和 docs/CHANGELOG.md 中写明的 hover 展示完整名称。置信度:高。
  2. [Verification gap] apps/dsa-web/src/components/history/__tests__/HistoryList.test.tsx 新增用例只验证了隐藏的完整名称节点存在,没有覆盖 hover 态是否真的切换显示,因此上述交互失效不会被 CI 捕获。

🤖 此回复由 OpenReview Bot 自动生成,仅供参考。如有疑问请 @维护者。

@Activer007

Activer007 commented Mar 27, 2026

Copy link
Copy Markdown
Contributor Author
  1. [Correctness blocker] apps/dsa-web/src/components/history/HistoryListItem.tsx 中子元素使用了 group-hover/item:*,但外层父节点仍是 group,不是 group/item。按 Tailwind 的命名 group 语义,这会导致“悬停显示完整股票名称”以及 badge 透明度调整都不会触发。当前实际落地的是静态截断,不是 PR 描述和 docs/CHANGELOG.md 中写明的 hover 展示完整名称。置信度:高。

请看截图, 只要Hover 就会展示完整名称,badge 透明度自动调整; 完全符合PR 描述和 docs/CHANGELOG.md 中的描述;
image

  1. [Verification gap] apps/dsa-web/src/components/history/__tests__/HistoryList.test.tsx 新增用例只验证了隐藏的完整名称节点存在,没有覆盖 hover 态是否真的切换显示,因此上述交互失效不会被 CI 捕获。

属实;但是普通用例无法测试hover,需要构建较为复杂的测试;


所以我们使用截图的方式展示了测试的效果;

@ZhuLinsen ZhuLinsen left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

跟进结论

  • 结论:接受 + 最新回复成立,上一轮把 HistoryListItem.tsx 中的 hover 交互直接判定为失效过重,这个结论需要收回。
  • 是否仍有阻断:无 + 当前代码、改动范围和已通过的 CI / web-gate 之下,没有看到围绕这次争议点仍会阻断合入的正确性问题。

说明

  1. apps/dsa-web/src/components/history/HistoryListItem.tsx 这次改动不只是静态截断,还包含 hover 下名称展示切换和 badge 透明度调整;结合当前讨论里的实际页面表现,之前“group-hover/item:* 不会触发”的判断不成立。
  2. 更准确的表述应收窄为:本 PR 的核心修复是用字符阈值避免默认态重叠,hover 是补充展示方式;docs/CHANGELOG.md 对“截断 + 悬停展示”的描述与当前实现没有明显失配。
  3. apps/dsa-web/src/components/history/__tests__/HistoryList.test.tsx 目前覆盖了“长名称被截断且完整名称节点存在”的静态断言,但没有直接验证 hover 态切换;这属于测试补强空间,不构成当前继续阻断的依据。

🤖 此回复由 OpenReview Bot 自动生成,仅供参考。如有疑问请 @维护者。

@ZhuLinsen ZhuLinsen left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

跟进结论

  • 结论:接受 + 最新回复成立,HistoryListItem.tsx 中承载交互的父级按钮本身就是 group/item,上一轮把 hover 交互判成失效不成立,需要收回。
  • 是否仍有阻断:无 + 当前代码里这条争议对应的实现链路是通的,CI 也已成功,现有 mergeable_state=blocked 不能单独作为阻断依据。

说明

  1. apps/dsa-web/src/components/history/HistoryListItem.tsx 里,父级按钮 class 为 group/item,名称切换使用 group-hover/item:hiddengroup-hover/item:inline,badge 透明度也挂在 group-hover/item:opacity-80 上;从当前代码看,“悬停展示完整名称并淡化右侧 badge”与实现是一致的。
  2. apps/dsa-web/src/components/history/__tests__/HistoryList.test.tsx 已覆盖默认态:长名称会显示截断文本,完整名称节点保留在 DOM 且默认是 hidden。这条测试没有直接验证 hover 视觉态,但这最多说明自动化覆盖粒度有限,不足以支持“功能仍未实现”的判断。
  3. docs/CHANGELOG.md 对这次修复描述为“默认截断,悬停展示完整名称”,按当前组件实现看并没有与代码脱节;因此此前围绕“文档声称有 hover,但代码实际只有静态截断”的指控也应一并关闭。

🤖 此回复由 OpenReview Bot 自动生成,仅供参考。如有疑问请 @维护者。

@ZhuLinsen
ZhuLinsen merged commit 000d4fc into ZhuLinsen:main Mar 27, 2026
10 checks passed
Copilot AI pushed a commit to anmezing/daily_stock_analysis that referenced this pull request Apr 10, 2026
* feat(web): truncate long stock names in history list

Display truncated stock names with a trailing dot (max 15 English / 8
Chinese / 10 mixed chars). Show full name on hover. Extract truncation
logic to utils/stockName with full test coverage.

(cherry picked from commit 76cf05db841dc8ee39436e0ba9cd86be2690252c)

* fix(web): remove redundant title attribute in HistoryListItem

The title attribute is no longer needed since truncateStockName
already handles long stock names properly.

* refactor(web): consolidate stockName variable usage in HistoryListItem

Unified duplicate item.stockName || item.stockCode expressions to use
  the pre-computed stockName variable. Also added CHANGELOG entry

Co-authored-by: qingdaoqin <43225158+qingdaoqin@users.noreply.github.com>
yangshiyan pushed a commit to yangshiyan/daily_stock_analysis that referenced this pull request Apr 20, 2026
* feat(web): truncate long stock names in history list

Display truncated stock names with a trailing dot (max 15 English / 8
Chinese / 10 mixed chars). Show full name on hover. Extract truncation
logic to utils/stockName with full test coverage.

(cherry picked from commit 76cf05db841dc8ee39436e0ba9cd86be2690252c)

* fix(web): remove redundant title attribute in HistoryListItem

The title attribute is no longer needed since truncateStockName
already handles long stock names properly.

* refactor(web): consolidate stockName variable usage in HistoryListItem

Unified duplicate item.stockName || item.stockCode expressions to use
  the pre-computed stockName variable. Also added CHANGELOG entry
EchoingFootsteps pushed a commit to EchoingFootsteps/daily_stock_analysis that referenced this pull request Jul 4, 2026
* feat(web): truncate long stock names in history list

Display truncated stock names with a trailing dot (max 15 English / 8
Chinese / 10 mixed chars). Show full name on hover. Extract truncation
logic to utils/stockName with full test coverage.

(cherry picked from commit 76cf05db841dc8ee39436e0ba9cd86be2690252c)

* fix(web): remove redundant title attribute in HistoryListItem

The title attribute is no longer needed since truncateStockName
already handles long stock names properly.

* refactor(web): consolidate stockName variable usage in HistoryListItem

Unified duplicate item.stockName || item.stockCode expressions to use
  the pre-computed stockName variable. Also added CHANGELOG entry
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Improvements or additions to documentation size/L testing

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] 文字重叠

2 participants