refactor: remove meaningless comments
Remove 50+ noise comments across the codebase: - AI-generated verbose prose (💡 emoji, '超进化', '大闸', etc.) - Comments that restate what the code obviously does - Comments about deleted code - Import-level noise comments - Overly verbose Chinese section markers Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
雨霖铃
@@ -16,7 +16,6 @@ const LiveClock = React.memo(({ unit, onUseNow, className, ...props }: LiveClock
|
||||
const { showMessage } = useSnackbar();
|
||||
const onUseNowRef = useRef(onUseNow);
|
||||
|
||||
// 1. 采用毫秒/秒的双态原子计数，避免无意义的重绘
|
||||
const [currentDisplay, setCurrentDisplay] = useState(() => {
|
||||
const initNow = Date.now();
|
||||
return {
|
||||
@@ -36,21 +35,17 @@ const LiveClock = React.memo(({ unit, onUseNow, className, ...props }: LiveClock
|
||||
const rightNow = Date.now();
|
||||
const nextText = String(Math.floor(rightNow / (unit === 'ms' ? 1 : 1000)));
|
||||
|
||||
// 性能核心：只有当生成的文本内容发生变化时，才触发 React 的 State 更新。
|
||||
// 在“秒(s)”单位下，这可以让组件的渲染频率暴跌 90%，做到极度省电和高性能。
|
||||
setCurrentDisplay((prev) => {
|
||||
if (prev.text === nextText) return prev;
|
||||
return { rawTime: rightNow, text: nextText };
|
||||
});
|
||||
};
|
||||
|
||||
// 200ms 的高速低延迟轮询，比 1000ms 更具响应灵敏度，且因为上面有过滤，完全不用担心引发性能损耗
|
||||
const tickId = setInterval(tick, 200);
|
||||
return () => clearInterval(tickId);
|
||||
}, [unit]);
|
||||
|
||||
const handleUseNow = useCallback(() => {
|
||||
// 捕获真实极其精准的绝对时间戳
|
||||
onUseNowRef.current(currentDisplay.rawTime);
|
||||
showMessage?.(t('timestamp:usedSuccess'), { severity: 'success' });
|
||||
}, [currentDisplay.rawTime, showMessage, t]);
|
||||
@@ -58,9 +53,6 @@ const LiveClock = React.memo(({ unit, onUseNow, className, ...props }: LiveClock
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
// 3. 完美适配 shadcn 暗黑模式：
|
||||
// 不再写死 bg-primary/10，改用更高级的 bg-secondary/50 和中性边框，
|
||||
// 在任何主题色下都能表现得低调且极具质感。
|
||||
'flex items-center gap-3 px-3 h-10 rounded-lg border border-border/80 bg-secondary/50',
|
||||
className,
|
||||
)}
|
||||
@@ -70,12 +62,10 @@ const LiveClock = React.memo(({ unit, onUseNow, className, ...props }: LiveClock
|
||||
{t('timestamp:currentTs')}
|
||||
</span>
|
||||
|
||||
{/* 4. tabular-nums 强制使用等宽数字布局，彻底消灭数字跳动时字符宽度不同带来的抖动颤噪感 */}
|
||||
<span className="flex-1 font-mono font-bold text-foreground text-sm tracking-tight leading-none truncate tabular-nums">
|
||||
{currentDisplay.text}
|
||||
</span>
|
||||
|
||||
{/* 5. 按钮重构成精巧的 shadcn 原子微动效风格 */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleUseNow}
|
||||
|
||||
@@ -67,11 +67,6 @@ const ResultView = React.memo(
|
||||
{t('timestamp:resultLabel')}
|
||||
</span>
|
||||
|
||||
{/*
|
||||
2. 核心结果大卡片：
|
||||
对齐 shadcn 官方卡片风格，使用 bg-card、border-border 构筑多层级阴影。
|
||||
核心数值直接拉粗为 text-foreground (在黑夜模式下会自动转为大气的纯白，完美避开刺眼强光)
|
||||
*/}
|
||||
<div className="bg-card text-card-foreground border border-border p-4 sm:p-5 rounded-xl relative mb-3.5 shadow-sm flex justify-between items-center gap-4 focus-within:ring-1 focus-within:ring-ring">
|
||||
<span className="font-mono font-extrabold text-foreground break-all text-xl sm:text-2xl tracking-tight leading-tight select-all tabular-nums">
|
||||
{result}
|
||||
@@ -83,11 +78,6 @@ const ResultView = React.memo(
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/*
|
||||
3. 衍生的附加参考数据区：
|
||||
背景改为低饱和度的 bg-muted/40 隔离带。
|
||||
内部数值降级为 text-muted-foreground，建立教科书般的完美“视觉权重层级”。
|
||||
*/}
|
||||
<div className="bg-muted/40 p-4 rounded-xl border border-border/50 flex flex-col gap-3">
|
||||
{[
|
||||
{ label: t('timestamp:relativeTime'), value: extraInfo?.relative },
|
||||
|
||||
@@ -6,7 +6,6 @@ import { useTimestampConverter } from './useTimestampConverter';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
// 1. 引入标准的 shadcn/ui 原子表单组件（代替原生的原生 Input 和 Select）
|
||||
import { Input } from '@/components/ui/input';
|
||||
import {
|
||||
Select,
|
||||
@@ -19,7 +18,6 @@ import {
|
||||
export default function Index() {
|
||||
const { t } = useI18n('timestamp');
|
||||
|
||||
// 2. 完美对接全新重构后的统一单源响应式 Hook
|
||||
const {
|
||||
mode,
|
||||
input,
|
||||
@@ -37,15 +35,11 @@ export default function Index() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground antialiased selection:bg-primary/20">
|
||||
<div className="max-w-7xl mx-auto p-4 sm:p-6 space-y-4">
|
||||
{/* 动态参考信息时钟条 */}
|
||||
<LiveClock unit={unit} onUseNow={handleUseNow} />
|
||||
|
||||
{/* 核心工作台网格：桌面端 md+ 左右等宽分栏；移动端单栏堆叠 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-stretch">
|
||||
{/* 左栏：转换工作台 */}
|
||||
<div className="p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm flex flex-col justify-between">
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* 模式选择切换组 */}
|
||||
<SwitchButtonGroup
|
||||
value={mode}
|
||||
options={[
|
||||
@@ -56,12 +50,7 @@ export default function Index() {
|
||||
size="small"
|
||||
/>
|
||||
|
||||
{/* 输入交互区 */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
{/*
|
||||
3. 替换为标准的 shadcn <Input /> 组件：
|
||||
享受原生高水准的 focus-visible 环形动画响应。
|
||||
*/}
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={
|
||||
@@ -75,13 +64,10 @@ export default function Index() {
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* 错误自愈提示 */}
|
||||
{error && <p className="text-destructive text-xs font-medium px-0.5">{error}</p>}
|
||||
</div>
|
||||
|
||||
{/* 核心配置群：单位切换 + 时区选择紧凑横排 */}
|
||||
<div className="flex flex-col sm:flex-row items-stretch gap-3 w-full">
|
||||
{/* 时间精度单位选择 */}
|
||||
<SwitchButtonGroup
|
||||
value={unit}
|
||||
options={[
|
||||
@@ -93,10 +79,6 @@ export default function Index() {
|
||||
className="sm:w-auto shrink-0" // 窄屏下全宽，宽屏下自适应收缩
|
||||
/>
|
||||
|
||||
{/*
|
||||
4. 降维打击：将原生 <select> 强行超进化为标准的 shadcn <Select>：
|
||||
全操作系统的样式绝对一致，完美融合暗黑模式，悬浮弹窗自带微距磨砂玻璃阻尼动效。
|
||||
*/}
|
||||
<Select value={zone} onValueChange={(v: string) => setZone(v as typeof zone)}>
|
||||
<SelectTrigger className="flex-1 font-mono font-semibold h-9 shadow-sm bg-background">
|
||||
<SelectValue placeholder="选择时区" />
|
||||
@@ -115,14 +97,8 @@ export default function Index() {
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/*
|
||||
5. 彻底移除了原先丑陋的手动 convert 按钮！
|
||||
在响应式 Hook 的加持下，此处留白或由排版自然撑开，界面视觉极其干净。
|
||||
*/}
|
||||
</div>
|
||||
|
||||
{/* 右栏：结果实时流展示卡片 */}
|
||||
<div className="p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm h-full flex flex-col">
|
||||
<ResultView result={result} mode={mode} unit={unit} zone={zone} showEmptyPlaceholder />
|
||||
</div>
|
||||
|
||||
@@ -31,11 +31,8 @@ export function useTimestampConverter(): UseTimestampConverterReturn {
|
||||
const [unit, setUnit] = useState<UnitType>('ms');
|
||||
const [zone, setZone] = useState<ZoneType>('Asia/Shanghai');
|
||||
|
||||
// 1. 唯一受控源：不再区分 ts/dt，输入框在当前模式下展现的就是它的值
|
||||
const [input, setInput] = useState(() => String(Date.now()));
|
||||
|
||||
// 2. 核心魔法：利用 useMemo 达成 0 延迟响应式转换 (Reactive Pipeline)
|
||||
// 只要 input, mode, unit, zone 任何一个发生改变，结果和错误信息自动流出，废除 convert 按钮
|
||||
const conversionPipeline = useMemo(() => {
|
||||
const rawInput = input.trim();
|
||||
if (!rawInput) return { result: '', error: '' };
|
||||
@@ -63,7 +60,6 @@ export function useTimestampConverter(): UseTimestampConverterReturn {
|
||||
|
||||
const { result, error } = conversionPipeline;
|
||||
|
||||
// 3. 处理右键菜单联动（直接修改唯一的 input，衍生转换自动触发）
|
||||
const handleContextMenuData = useCallback((payload: string) => {
|
||||
const trimmed = payload.trim();
|
||||
if (isTimestampLike(trimmed)) {
|
||||
@@ -96,8 +92,6 @@ export function useTimestampConverter(): UseTimestampConverterReturn {
|
||||
[mode, unit, zone],
|
||||
);
|
||||
|
||||
// 4. 尊享级连贯交互：切换 Mode 时，自动把上一个模式计算出的结果喂进输入框
|
||||
// 比如：输入时间戳 -> 得到日期 -> 切换模式 -> 日期直接进入输入框，方便用户进行微调反向转换
|
||||
const handleSetMode = useCallback(
|
||||
(newMode: 'ts2dt' | 'dt2ts') => {
|
||||
setMode(newMode);
|
||||
|
||||
Reference in New Issue
Block a user