xiaoyu/txw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新版前端页面展示调整 #1

Merged
liulujian merged 36 commits from feat/new-ui-1 into refactor/clear 2026-07-06 06:11:49 +00:00
Conversation 0 Commits 36 Files Changed 26 +2280 -1067
liulujian commented 2026-07-06 05:04:51 +00:00
Collaborator
Copy Link

txw前端界面风格统一调整

txw前端界面风格统一调整
liulujian added 36 commits 2026-07-06 05:04:54 +00:00 
- 新建 market-list-variables.less 共享变量文件（50+ token）
- 新建 EmptyState.vue 通用空状态组件
- jrsc: 修复nav-tab圆角32px→6px, 页面底色→#F6F7FA, 分隔线→#E8F0EC
- fwsc/sjsc/xqsc: 引用共享变量, 统一卡片hover, 替换空状态组件
- 4个列表页视觉细节完全对齐

Co-Authored-By: Claude <noreply@anthropic.com>
① jrsc emoji → TDesign SVG 图标 (MoneyCircle/Secured/ChartBar等)
② 列表页顶部增加统计摘要栏 (StatsSummary组件,4页)
③ 卡片分类左侧3px彩色标识条 (蓝/绿/橙/紫)
④ 空状态升级 (CSS几何插画+引导按钮+3种场景类型)
⑤ 加载态 spinner → 骨架屏 (SkeletonCard组件,shimmer动效)
⑥ Banner 增加网格点阵动画背景 (纯CSS,零JS依赖)

新建: SkeletonCard.vue, StatsSummary.vue, card-category.js
增强: EmptyState.vue, market-list-variables.less

Co-Authored-By: Claude <noreply@anthropic.com>
Vue 2 中 import 的函数不会自动暴露给模板，需要在 methods 选项中注册。

Co-Authored-By: Claude <noreply@anthropic.com>
⑦ 标签按类别分色 (蓝核算/绿交易/橙认证/紫数据)
⑧ 统计数字进入视口时 count-up 缓动动画
⑨ sjlbc.vue 表格页同步升级 (骨架屏+EmptyState)
⑩ 移动端 nav-tabs 横向滚动边缘 CSS mask 渐隐
⑪ 收藏按钮心跳动画 + 操作按钮涟漪反馈 + 标签 hover 放大
⑫ router-view 路由切换 fade + slide 过渡

Co-Authored-By: Claude <noreply@anthropic.com>
① 导航栏加白色背景 + 底部分割线，不再浮空
② 激活态从荧光绿填充改为品牌绿下划线 (更克制/更专业)
③ 右侧操作区加竖线分隔，视觉层次清晰
④ 发布按钮从渐变实心改为 outline 样式，视觉权重降级
⑤ jrsc 补全第4个tab (碳金融市场自身)
⑥ 列表计数颜色增强对比度 #6B8575→#8C9BA5
⑦ 移动端 nav 高度自适应 (height:auto)

Co-Authored-By: Claude <noreply@anthropic.com>
StatsSummary 改用 CSS auto-fit 自适应列数，不再需要 cols prop。
3列含真实数据的指标比4列含占位符更专业可信。

Co-Authored-By: Claude <noreply@anthropic.com>
transform 会创建新的 containing block，破坏 gxnlpt 侧边栏
的 JS fixed 定位计算（_applySidebarSticky 依赖精确的
getBoundingClientRect 值）。纯 opacity 过渡不影响布局。

Co-Authored-By: Claude <noreply@anthropic.com>
GxnlptCardTags 引入 tagColorClass + market-tag-colors mixin
标签按类别分色(蓝核算/绿交易/橙认证/紫数据)，hover 放大

Co-Authored-By: Claude <noreply@anthropic.com>
这两个图标在 tdesign-icons-vue 中不存在，替换为实际存在的图标。

Co-Authored-By: Claude <noreply@anthropic.com>
新增 tagHashColor(tag) — djb2 hash → 6色调色板,任何标签
都能自动分到固定颜色。原 tagColorClass 保留给服务中心使用。

Co-Authored-By: Claude <noreply@anthropic.com>
hash 6色: green/teal/blue/cyan/moss/ocean 全部在蓝绿光谱内
服务中心仍用 blue/green/orange/purple 语义色(不受影响)

Co-Authored-By: Claude <noreply@anthropic.com>
① 空状态/加载态替换为 EmptyState + SkeletonCard 组件
② 列表顶部增加统计摘要 (收录链接/覆盖分类/我的收藏)
③ 卡片去灰色实线边框,改用阴影,与列表页统一
④ 卡片 hover 上浮 -3px + 绿色阴影
⑤ '查看更多'按钮升级:箭头图标+hover圆角边框+绿色反馈
⑥ 收藏空态加引导按钮'浏览链接'

Co-Authored-By: Claude <noreply@anthropic.com>
虚线边框+圆形+号图标+'发现更多'文案,点击返回列表视图。
与普通卡片同尺寸,作为收藏页的自然出口。

Co-Authored-By: Claude <noreply@anthropic.com>
收起后内容高度骤减,用户视野可能停留在下方空白区。
现在收起后 smooth scroll 到当前分类 header (留80px顶栏余量)。

Co-Authored-By: Claude <noreply@anthropic.com>
- 解开 import api 注释
- loadAllSections: API优先,wzxxList失败自动fallback demo
- loadFavorites: API调用,401弹窗提示登录(确认→登录页,取消→停留)
- handleCollect: API调用,401同上
- handleSubmitForm: API调用,401同上

Co-Authored-By: Claude <noreply@anthropic.com>
首次加载仍全部 count-up。后续 items 变化时对比新旧值,
只对值发生变化的列触发动画,其他列保持静止。

Co-Authored-By: Claude <noreply@anthropic.com>
卡片/面板/侧边栏/入口卡/统计卡: 12px/16px→6px
组件(EmptyState/SkeletonCard/StatsSummary): 12px/10px→6px
变量文件: @market-card-radius/@market-filter-radius/@gxnlpt-* 等
标签/按钮等小元素保持3-6px不变

Co-Authored-By: Claude <noreply@anthropic.com>
5px宽/12%透明度/hover加深/圆角3px,兼顾可见性与低调

Co-Authored-By: Claude <noreply@anthropic.com>
新增 _isInsideScrollablePanel: wheel事件源在content-item1内时,
检查面板自身是否还能滚动。能滚→交给浏览器,不能→触发整页翻屏。

Co-Authored-By: Claude <noreply@anthropic.com>
① 电池法案: 紫色→绿色系 (edf4e9/dce9d8/e3f0e6)
② CBAM: 橙色→青色系 (edf6f2/d8ebe3) 去掉突兀的暖橙色
③ 航运燃料: 蓝色→蓝绿系 (eef7f2/dbece2/e2f0ec)
④ Section 背景统一 #f6f7fa (全平台一致)
⑤ open-page 按钮 蓝色→品牌绿渐变

Co-Authored-By: Claude <noreply@anthropic.com>
电池法案→蓝色系(工业/技术/精密): #e9f0fe header, #e4edfb→#c8d6f0 card
CBAM→青色系(金融/贸易/国际): #e6f5f2 header, #dfeee9→#c0ddd2 card
航运燃料→蓝绿系(海洋/物流/可持续): #e6f4f0 header, #dff0ea→#c0e0d7 card
section 背景各行极淡底色 (#f7f9fc/#f6faf9/#f5faf8)

Co-Authored-By: Claude <noreply@anthropic.com>
电池法案 蓝: #dce6f7→#b8c9e8 / CBAM 青: #ceeaea→#a3d4d4 / 航运 绿: #d4ead7→#acd4b1
三轮对比明显(蓝↔青↔绿),卡片渐变从粉彩升级到有色彩浓度的干净渐变

Co-Authored-By: Claude <noreply@anthropic.com>
根因: text-section(白)+service-section(白)两层白底上叠card渐变,
旧方案淡→稍深方向导致色浓度被稀释到几乎看不见。
新方案: 深→淡方向,顶部有明确色彩,底部自然过渡到白

电池: #b8cfe8→#e3edf7  CBAM: #9ecfcb→#ddf0ee  航运: #a3ccaa→#dcecdd

Co-Authored-By: Claude <noreply@anthropic.com>
旧:中色调渐变(#b8cfe8→#e3edf7)黑字压暗底=沉闷
新:亮色调渐变(#d9e7f6→#edf3fa)黑字压亮底=干净通透
三色差保持：蓝(d9e7f6)/青(d6efed)/绿(d5ead7)

Co-Authored-By: Claude <noreply@anthropic.com>
0deg=底部有色→顶部淡色,标题区更干净,黑/灰字更清晰

Co-Authored-By: Claude <noreply@anthropic.com>
旧:纯绿 #d2e9d5 偏陆地
新:海绿 #cde6de 带蓝调,更贴合航运/海洋主题
三色对比更清晰:蓝(电池)↔青(CBAM)↔海绿(航运)

Co-Authored-By: Claude <noreply@anthropic.com>
Header: 180deg 顶部有色→底部白色(标题栏效果,不与白底融合)
Card:  0deg   底部有色→顶部淡色(文字区干净,色彩沉底)

Co-Authored-By: Claude <noreply@anthropic.com>
liulujian changed title from WIP: 新版前端页面展示调整 to 新版前端页面展示调整 2026-07-06 05:05:26 +00:00
liulong approved these changes 2026-07-06 05:20:07 +00:00
xiaoyu approved these changes 2026-07-06 06:10:13 +00:00
xiaoyu left a comment
Owner
Copy Link

通过

通过
liulujian merged commit 4cb79987d3 into refactor/clear 2026-07-06 06:11:49 +00:00
liulujian deleted branch feat/new-ui-1 2026-07-06 06:11:52 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
liulong
xiaoyu
Labels
Clear labels
No items
No Label
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
3 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: xiaoyu/txw#1
No description provided.
Delete Branch "feat/new-ui-1"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?