标签 主题切换 下的文章

打磨了一周的卡片式 ui 大佬们还有更多的 功能/样式 建议吗 准备发布啦

它主要解决什么问题?

  • 长楼“找上下文”困难:不知道自己在回复谁
  • 讨论树太深,页面太长:滚动疲劳、定位困难
  • 想快速扫顶层(L0)主线程:上下跳楼不够顺手
  • 深色模式/阅读舒适度:原生样式太简陋,眼睛累


核心功能一览(当前脚本已实现)

1) 评论区卡片化重排(核心)

  • 把 HN 原生的表格树评论,重建为 卡片式树结构(视觉层级更清晰)
  • 每条评论是一个卡片:用户名/时间/操作按钮在顶部,正文在下面,子回复作为卡片嵌套
  • 支持 最大宽度、圆角、间距、缩进等布局调节

适用场景:长讨论阅读体验会明显提升,尤其是多层回复。


2) 主题与外观:浅色/深色/跟随系统 + 渐变层级背景

  • 主题模式:跟随系统 / 强制浅色 / 强制深色
  • 页面背景可自定义(浅色/深色各一套)
  • 评论卡片支持“按层级渐变”:L0/L1/L2… 背景颜色可调
  • 也提供一些预设配色(比如蓝灰、暖米色、灰阶极简、深海蓝黑等)

目标:让“长时间刷楼”变得更舒服。


3) 折叠/展开(偏扫楼用)

为了快速扫楼,它提供多种折叠策略(可开关/可配置):

  • 每条评论可折叠:右上角有“折叠/展开”按钮
  • 折叠触发方式(可选):
    • 仅按钮
    • 按钮 + 单击正文
    • 按钮 + 双击正文
  • 双击正文折叠/展开整个子树(可选):
    双击某条评论正文,直接折叠/展开它下面整棵回复树
  • 默认折叠策略(两套):
    • 按数量:顶层评论如果“后代回复总数”超过阈值,默认折叠(便于扫主楼)
    • 按深度:从指定深度开始默认折叠(避免页面无限延长)
  • 全局快捷按钮(右下角):
    • 全部折叠(收起所有有子回复的评论)
    • 全部展开(展开所有评论)


4) “展开提示” + 数量颜色提醒(更好扫大楼)

当某条评论被折叠时,会出现类似:

  • [+展开 8 条回复](单击默认展开 双击展开全部子级)

并且这个数字会根据数量变色(可调阈值/颜色):

  • 少量:更偏主题强调色
  • 中量:偏粉/亮色
  • 大量:偏红(提醒这楼很长)

另外支持把这个提示按钮放在:

  • 评论底部(默认)
  • 或者放在右上角按钮行里(更省垂直空间)


5) L0 主线程导航(扫楼神器)

每条评论右上角会有:

  • 上 L0 / 下 L0:快速跳到上一个/下一个顶层主线程
  • L0 折叠:一键折叠当前评论所在的顶层主线程(快速收起一整楼)
  • 还有一个 “层展”:只展开下一层,下一层的子回复继续保持折叠(用于逐层读)

(这块我自己用得最多,长讨论基本靠它快速扫楼。)


6) Hover 父级高亮:找上下文更快

鼠标悬停某条评论时:

  • 自动高亮它的直接父评论
    用来快速确认“我现在在回复谁/这层上下文是什么”。


7) OP(楼主)高亮

楼主(story author)的评论会有额外高亮描边,方便追踪 OP 在楼里说了什么。


8) Dead 评论处理(单选模式)

对被标记为 dead 的评论可以选择:

  • 不处理
  • 弱化(降低透明度/饱和度)
  • 隐藏(同时自动启用弱化)


9) 像素头像(基于用户名生成)

每个用户名旁边会生成一个 对称像素头像(纯前端生成,无请求外部资源):

  • 默认开启
  • 支持调整大小、是否加边框、边框颜色、边框样式
  • 有做性能优化:懒加载 + 缓存,避免长楼卡顿

用途:快速识别同一个人在楼里出现的回复。


10) 复制评论直达链接(可选)

每条评论右上角可以显示 copy

  • 一键复制 item?id=xxx#commentId 的直达链接
    方便分享某条具体回复。


11) 顶部导航吸附 + 回到顶部

  • 顶部 HN 导航栏可吸附(sticky)
  • 右下角 回到顶部按钮(滚动到一定距离才出现)


12) 快捷键(可选)

Alt + Shift:

  • C 全部折叠
  • E 全部展开
  • T 循环切换主题(auto/light/dark)

功能模块

  1. IP 地址 / 子网计算

    • 输出网络地址、广播地址、可用 IP 等。桌面端子网掩码计算可按主机数或掩码生成可用网段。
    • 配图:
  2. 超网拆分

    • 输入超网(CIDR)与目标掩码,生成拆分后的子网列表。
    • 配图:
  3. 路由汇总(算法对比)

    • 路由聚合示例,比较两种算法的汇总结果。
    • 算法 A:
    • 算法 B:
  4. 进制转换

    • IP/数值在十进制、二进制、十六进制之间互转,结果即时显示。
    • 配图:
  5. 历史记录(导入 / 导出)

    • 支持搜索、导出、导入;“清除计算器状态” 会清空所有输入/结果缓存(Web 和桌面均生效)。
    • 配图:

平台特性

  • Web 端:导出历史会触发浏览器下载 JSON;导入通过文件内容;清除状态在当前浏览器环境生效。
  • 桌面端:导出历史保存到系统下载目录(若不可用则退回应用文档目录);导入使用文件路径;窗口尺寸与存储目录可定制。

语言与主题

  • 多语言:简体中文、繁体中文(中国香港)、English (US)、日本語。
  • 主题:浅色 / 深色 / 跟随系统;支持自定义颜色主题。

下载地址

在线体验: https://hoochanlon.github.io/network-calculator