mirror of
https://github.com/Sagit-chu/flvx.git
synced 2026-09-28 07:36:38 +08:00
sagit
de9ab51def
* feat(nodes): add renewal cycle and auto-advance scheduling - Add renewal_cycle field to nodes for tracking paid vs free cycles - Implement auto-advance scheduling when renewal is processed - Add migration test for renewal_cycle column - Update dashboard to show renewal cycle count - Add renewal status display on node detail page * fix(frontend): show rule count in compact view mode for forward pages * style(frontend): format code and improve node card layout Entire-Checkpoint: 08b760b76538 * fix: restore renewal.ts from main to resolve build errors
30 lines
2.3 KiB
Plaintext
30 lines
2.3 KiB
Plaintext
我已经详细查阅了节点卡片 (`vite-frontend/src/pages/node.tsx`) 的代码结构。由于现在处于**计划模式 (Plan Mode)**，我目前只能读取和分析，不能直接修改代码。
|
||
|
||
我已经为你准备了详细的修改方案，这套方案同时满足你提到的 3 个要求：
|
||
|
||
### 修改计划：
|
||
|
||
**1. 统一限制卡片高度**
|
||
* **目标代码位置**：修改包裹 `Card` 的外层 `SortableItem` 的 `className`，以及 `Card` 内部的结构。
|
||
* **具体修改**：
|
||
* 给 `SortableItem` 内部渲染的 `div` 增加 `flex flex-col h-full`，使其占满整个 Grid 格子的高度。
|
||
* 给 `Card` 增加 `h-full flex flex-col` 类名。
|
||
* 在 `<CardBody>` 内部，将顶部的基础信息区域（包含备注、续费等）和底部的控制区域（系统监控及按钮）分开。给包含底部按钮区域的 div 添加 `mt-auto`，这样它就会自动被推到卡片的最底部，使所有的操作按钮和监控进度条在同一行水平对齐，从而强制拉伸中间的空白区域以保证卡片等高。
|
||
|
||
**2. 限制「备注」只显示 1 行**
|
||
* **目标代码位置**：备注内容显示的 div (`{node.remark.trim()}`)。
|
||
* **具体修改**：
|
||
* 将包含备注文本的 `div` 上的 `whitespace-pre-wrap break-words` 替换为 `line-clamp-1 break-all`。
|
||
* 在这个文本外层包一个 `title={node.remark.trim()}` 属性（原生 Tooltip），这样用户只要把鼠标悬停在被截断的备注上，就能看到完整的备注内容。
|
||
|
||
**3. 下次续费只显示距离到期**
|
||
* **目标代码位置**：`{node.expiryTime && node.expiryTime > 0 && node.renewalCycle && ( ... )}` 渲染逻辑内。
|
||
* **具体修改**：
|
||
* 精简现有的 3 行布局（具体时间、剩余时间 Chip、续费周期）。
|
||
* 将其压缩为 1 行显示，只展示带颜色的 Chip（里面包含了“还有 x 天”的 `expiryMeta.label`）。
|
||
* 为了保留完整信息，我们给这个 Chip 加上 `title` 属性，比如鼠标移上去会显示完整的：`下次续费：2026-12-01 (年付)`。
|
||
* 这会把原先极度占用垂直空间的 3 行内容直接缩减到单行。
|
||
|
||
---
|
||
|
||
如果这个方案符合你的预期，你可以退出计划模式（或者直接回复同意执行），我会在下一次交互中立即为你实施这些代码修改！ |