diff --git a/src/components/SwitchButtonGroup.tsx b/src/components/SwitchButtonGroup.tsx index 831ad7a..aee922f 100644 --- a/src/components/SwitchButtonGroup.tsx +++ b/src/components/SwitchButtonGroup.tsx @@ -51,7 +51,6 @@ export default function SwitchButtonGroup({ type="button" onClick={() => onChange(option.value)} className={cn( - // 4. 完美继承 shadcn 的 Tabs 交互和动效微调 'flex-1 inline-flex items-center justify-center font-medium whitespace-nowrap transition-all', 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2', 'disabled:pointer-events-none disabled:opacity-50', diff --git a/src/entrypoints/content/uiPopover.ts b/src/entrypoints/content/uiPopover.ts index a56511a..254df53 100644 --- a/src/entrypoints/content/uiPopover.ts +++ b/src/entrypoints/content/uiPopover.ts @@ -125,7 +125,6 @@ function getOrCreatePopover(): HTMLElement { return popover; } -// 💡 2. 安全防线:字符实体转义沙箱,彻底掐灭任意恶意脚本的执行通道 function escapeHtml(text: string): string { const map: Record = { '&': '&', @@ -171,7 +170,6 @@ export function showPopover( ): void { const popover = getOrCreatePopover(); - // 💡 3. 坚固的无障碍绑定:废除违规的行内 inline onclick,改用标准原生节点监听 popover.innerHTML = ''; if (title) { diff --git a/src/pages/Base64Converter/TextMode.tsx b/src/pages/Base64Converter/TextMode.tsx index 47fcf27..1079fc2 100644 --- a/src/pages/Base64Converter/TextMode.tsx +++ b/src/pages/Base64Converter/TextMode.tsx @@ -44,8 +44,6 @@ export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) { useContextMenuData({ featureKey: 'base64Converter', onData: handleContextMenuData }); - // 💡 4. 贯彻方案 A(彻底消灭 setOutput / setError): - // 让所有的转化逻辑、类型安全校验在 useMemo 内存管道中单次渲染一气呵成! const conversionPipeline = useMemo(() => { const trimmed = debouncedInput.trim(); if (!trimmed) return { output: '', error: null }; @@ -112,7 +110,7 @@ export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) { placeholder={placeholder} value={input} onChange={setInput} - externalError={error || undefined} // 💡 流式异常大闸动态注入 + externalError={error || undefined} showClear={true} allowCopy={true} minRows={5} diff --git a/src/pages/Base64Converter/useBase64Converter.ts b/src/pages/Base64Converter/useBase64Converter.ts index e71ad3a..9701cc8 100644 --- a/src/pages/Base64Converter/useBase64Converter.ts +++ b/src/pages/Base64Converter/useBase64Converter.ts @@ -130,7 +130,6 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) { return ''; }, [customFileName, decoded]); - // 💡 托管最大文件体积字符串算子,清除下游引入风险 const maxFileSizeStr = `${MAX_FILE_SIZE / 1024 / 1024} MB`; return { diff --git a/src/pages/HtmlToMarkdown/index.tsx b/src/pages/HtmlToMarkdown/index.tsx index 4d0a00e..bf62a08 100644 --- a/src/pages/HtmlToMarkdown/index.tsx +++ b/src/pages/HtmlToMarkdown/index.tsx @@ -3,7 +3,7 @@ import { Download, Trash2 } from 'lucide-react'; import { useI18n } from '@/utils/chromeI18n'; import CopyButton from '@/components/CopyButton'; import SwitchButtonGroup from '@/components/SwitchButtonGroup'; -import { Button } from '@/components/ui/button'; // 💡 1. 全面回归规范:引入原生的 shadcn 原子 Button +import { Button } from '@/components/ui/button'; import { useStorageState } from '@/utils/useStorageState'; import type { HtmlToMarkdownPreviewMode } from '@/types/storage'; import { downloadMarkdownFile, htmlToMarkdown, SAMPLE_HTML } from '@/utils/htmlToMarkdown'; diff --git a/src/pages/JsonTools/DiffNavigator.tsx b/src/pages/JsonTools/DiffNavigator.tsx index ffbd496..9298b39 100644 --- a/src/pages/JsonTools/DiffNavigator.tsx +++ b/src/pages/JsonTools/DiffNavigator.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { ChevronLeft, ChevronRight } from 'lucide-react'; import { useI18n } from '@/utils/chromeI18n'; -import { cn } from '@/lib/utils'; // 1. 引入标准的 shadcn 工具函数 +import { cn } from '@/lib/utils'; export interface DiffNavigatorProps extends React.HTMLAttributes { total: number; @@ -21,11 +21,9 @@ export default function DiffNavigator({ }: DiffNavigatorProps) { const { t } = useI18n('jsonDiff'); - // 计算当前的边界禁用状态守卫 const isFirst = currentIndex <= 0; const isLast = currentIndex >= total - 1; - // 2. 空状态面板:对齐 shadcn 规范的中性低调卡片 if (total === 0) { return (
- {/* 计数看板:强制等宽防止数字长短不一时产生宽度挤压跳动 */} {currentIndex + 1} /{' '} {total} @@ -83,7 +77,7 @@ export default function DiffNavigator({ className={cn( 'p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground', 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring', - 'disabled:pointer-events-none disabled:opacity-30', // 4. 边界拦截:触底时优雅淡化并锁死点击 + 'disabled:pointer-events-none disabled:opacity-30', )} > diff --git a/src/pages/JsonTools/DiffResult.tsx b/src/pages/JsonTools/DiffResult.tsx index 733d231..7fb4fbd 100644 --- a/src/pages/JsonTools/DiffResult.tsx +++ b/src/pages/JsonTools/DiffResult.tsx @@ -4,7 +4,6 @@ import { cn } from '@/lib/utils'; import JsonTree from './JsonTree'; import type { DiffNode, DiffResult as DiffResultType, DiffType, ViewMode } from './types'; -// 💡 顶层 Interface 继承原生 HTML 容器属性,扩展灵活性 export interface DiffResultProps extends React.HTMLAttributes { result: DiffResultType; viewMode: ViewMode; @@ -39,10 +38,6 @@ export default function DiffResult({ } return ( - /* 1. 单栏拍平视图容器: - - 对齐 shadcn 规范,使用 bg-card、border-border 隔离。 - - 注入 tabular-nums 配合 font-mono,消灭任何行高和字符抖动。 - */
{ return ' '; }; -// 2. 状态色彩超进化: -// 拒绝硬编码实色系,全部换用高度安全的语义色变体与暗黑模式自适应。 const typeThemeMap = { added: { text: 'text-emerald-600 dark:text-emerald-400', @@ -191,7 +184,6 @@ interface UnifiedRowProps { } const UnifiedRow = ({ depth, type, text, active, multiline }: UnifiedRowProps) => { - // 3. 高精度提取状态样式映射 const currentTheme = typeThemeMap[type] || typeThemeMap.unchanged; return ( @@ -200,17 +192,14 @@ const UnifiedRow = ({ depth, type, text, active, multiline }: UnifiedRowProps) = 'flex items-start w-full font-mono py-0.5 select-text group', currentTheme.bg, currentTheme.text, - // 4. 高亮定位条:不再使用生硬的蓝圆环,改为现代编辑器的“侧边左高亮带”设计,质感直接拉满 active && 'bg-primary/10 relative before:absolute before:left-0 before:top-0 before:bottom-0 before:w-1 before:bg-blue-500', )} style={{ - // 维持高精度的 Padding 基线缩进 paddingLeft: `${Math.max(0.5, depth * 1.25)}rem`, paddingRight: '0.5rem', }} > - {/* 5. 前缀标识:等宽锁定,强行占据 w-5 并让符号居中对齐,达成 VSCode 般的整洁排版 */} {prefixForType(type)} diff --git a/src/pages/JsonTools/JsonConvertSection.tsx b/src/pages/JsonTools/JsonConvertSection.tsx index 84007ee..e2458bb 100644 --- a/src/pages/JsonTools/JsonConvertSection.tsx +++ b/src/pages/JsonTools/JsonConvertSection.tsx @@ -32,7 +32,7 @@ export default function JsonConvertSection({ const pk = translationPrefix; - // 1. 高阶性能调优:将文本变化收拢进行 250ms 极速防抖落盘,避免每一次敲击键盘都触发底层的复杂序列化算法 + // Debounce input useEffect(() => { const handle = setTimeout(() => { setDebouncedInput(input); @@ -40,14 +40,10 @@ export default function JsonConvertSection({ return () => clearTimeout(handle); }, [input]); - // 💡 2. 贯彻方案 A(衍生变量超进化): - // 彻底删掉 error 状态和对应的受控 useEffect 节点。 - // 语法错误由防抖文本在内存中同步推导,彻底斩断二次级联渲染链条,ESLint 警告自愈! const error = useMemo(() => { return validateJson(debouncedInput); }, [debouncedInput]); - // 3. 核心魔法:纯净的即时流式转换转换管线 (Live Compilation Pipeline) const conversionPipeline = useMemo(() => { const trimmed = debouncedInput.trim(); if (!trimmed || error) return null; @@ -63,7 +59,6 @@ export default function JsonConvertSection({ } }, [debouncedInput, error, convertFunction]); - // 判定运行时异常 const runtimeError = conversionPipeline && 'isRuntimeError' in conversionPipeline ? conversionPipeline.errorMessage @@ -88,7 +83,7 @@ export default function JsonConvertSection({ onClear={() => setInput('')} /> - {/* 4. 结果展示或状态引导卡片区 */} + {/* Result display */} {result && result.output ? (
{/* 结果栏精致头部 */} @@ -130,7 +125,7 @@ export default function JsonConvertSection({
) : ( - /* 5. 空状态提示容器:完美的中性虚线引导,不喧宾夺主 */ + /* Empty state */

{error ? t('jsonFormat:fixErrorHint') : t(`jsonFormat:${pk}EmptyHint`)} diff --git a/src/pages/JsonTools/JsonDiffInput.tsx b/src/pages/JsonTools/JsonDiffInput.tsx index 254cd15..2e0adca 100644 --- a/src/pages/JsonTools/JsonDiffInput.tsx +++ b/src/pages/JsonTools/JsonDiffInput.tsx @@ -2,8 +2,6 @@ import React from 'react'; import TextInputArea from '@/components/TextInputArea'; import { cn } from '@/lib/utils'; -// 💡 核心修复:使用 Omit<..., 'onChange'> 强行挖掉原生的 onChange 签名 -// 这样我们自定义的 (value: string) => void 就能独占鳌头,彻底消灭 TS2430 接口冲突! export interface JsonDiffInputProps extends Omit, 'onChange'> { label: string; placeholder: string; diff --git a/src/pages/JsonTools/JsonFormatSection.tsx b/src/pages/JsonTools/JsonFormatSection.tsx index 99d175e..6c2ea44 100644 --- a/src/pages/JsonTools/JsonFormatSection.tsx +++ b/src/pages/JsonTools/JsonFormatSection.tsx @@ -21,7 +21,7 @@ export default function JsonFormatSection() { const [indentSize, setIndentSize] = useState(2); const [sortKeys, setSortKeys] = useState(false); - // 1. 高频打字防抖落盘:防止大体积 JSON 在高频输入时发生卡顿 + // Debounce input useEffect(() => { const handle = setTimeout(() => { setDebouncedInput(input); @@ -29,14 +29,11 @@ export default function JsonFormatSection() { return () => clearTimeout(handle); }, [input]); - // 💡 2. 贯彻方案 A(衍生变量超进化): - // 彻底删除原有的 setError 状态和相关的 useEffect。 - // 语法错误由防抖文本在内存中同步推导,彻底斩断二次级联渲染链条,ESLint 警告瞬间消亡! const error = useMemo(() => { return validateJson(debouncedInput); }, [debouncedInput]); - // 3. 实时流式格式化管线 + // Real-time formatting pipeline const formattedPipeline = useMemo(() => { const trimmed = debouncedInput.trim(); if (!trimmed || error) return null; @@ -149,9 +146,6 @@ export default function JsonFormatSection() { />

- {/* 核心格式化数据面板: - 💡 修复点:移除了互相打架的 select-all 类名,仅保留纯正的代码高亮可选样式 select-text - */}
{result.formatted}
diff --git a/src/pages/JsonTools/JsonTree.tsx b/src/pages/JsonTools/JsonTree.tsx index 597791d..ac510d0 100644 --- a/src/pages/JsonTools/JsonTree.tsx +++ b/src/pages/JsonTools/JsonTree.tsx @@ -38,7 +38,6 @@ const getValueForSide = (node: DiffNode, side: TreeSide): unknown => { return side === 'left' ? node.oldValue : node.newValue; }; -// 1. 核心状态色彩映射调色盘:完美自适应双色模式 const typeThemeMap = { added: { text: 'text-emerald-600 dark:text-emerald-400', @@ -62,10 +61,6 @@ const isContainerValue = (v: unknown): boolean => { return (typeof v === 'object' && v !== null) || Array.isArray(v); }; -/** - * 💡 性能调优大闸:将 NodeRow 抽离为顶层独立组件并裹上 React.memo。 - * 配合精准的 Props Diff,使得某一行的展开闭合绝对不会连累到其他平级和上级节点。 - */ const NodeRow = React.memo( ({ node, side, depth, defaultExpandDepth, activePath, isLastChild }: NodeRowProps) => { const [override, setOverride] = useState<'auto' | 'open' | 'closed'>('auto'); @@ -113,8 +108,6 @@ const NodeRow = React.memo( const isActive = activePath === node.path; const isRoot = depth === 0; - // 缩进样式封装: - // 💡 视觉魔法:通过在左侧追加 before 细线,在每一层级下自动垂下一条优雅的 IDE 级“缩进指引线” const indentStyle = { paddingLeft: `${Math.max(0.25, depth * 1.15)}rem`, }; diff --git a/src/pages/JsonTools/diffEngine.ts b/src/pages/JsonTools/diffEngine.ts index 78c1889..cb4b720 100644 --- a/src/pages/JsonTools/diffEngine.ts +++ b/src/pages/JsonTools/diffEngine.ts @@ -43,7 +43,7 @@ const diffNode = ( return { key, type: 'added', - oldValue: undefined, // 💡 补齐:对齐移除 ? 后的类型规范 + oldValue: undefined, newValue: right, path, isLeaf: !isObject(right) && !isArray(right), @@ -58,7 +58,7 @@ const diffNode = ( key, type: 'removed', oldValue: left, - newValue: undefined, // 💡 补齐:对齐移除 ? 后的类型规范 + newValue: undefined, path, isLeaf: !isObject(left) && !isArray(left), hasDiffInChildren: false, // 自身即是删除,子树无需向下检索 @@ -87,7 +87,6 @@ const diffNode = ( children.push(diffNode(l, r, k, childPath, diffPaths)); }); - // 💡 核心改良:判定子节点中是否存在任何变动 const hasDiffInChildren = children.some((c) => c.type !== 'unchanged' || c.hasDiffInChildren); return { @@ -115,7 +114,6 @@ const diffNode = ( children[i] = diffNode(l, r, k, childPath, diffPaths); } - // 💡 核心改良:判定子项中是否存在任何变动 const hasDiffInChildren = children.some((c) => c.type !== 'unchanged' || c.hasDiffInChildren); return { diff --git a/src/pages/JsonTools/index.tsx b/src/pages/JsonTools/index.tsx index 5f105c2..e30e4d5 100644 --- a/src/pages/JsonTools/index.tsx +++ b/src/pages/JsonTools/index.tsx @@ -40,11 +40,11 @@ export default function Index() { const { t } = useI18n(['jsonDiff', 'jsonFormat']); const [pageMode, setPageMode] = useStorageState('jsonTools/pageMode', 'diff', isValidPageMode); - // 1. 受控原始输入源 + // Debounce input const [leftInput, setLeftInput] = useState(''); const [rightInput, setRightInput] = useState(''); - // 2. 纯净的异步防抖管道:仅负责切断高频打字开销 + // Debounced values const [debouncedLeft, setDebouncedLeft] = useState(''); const [debouncedRight, setDebouncedRight] = useState(''); @@ -56,7 +56,7 @@ export default function Index() { return () => clearTimeout(handle); }, [leftInput, rightInput]); - // 3. 贯彻方案A:利用 useMemo 将防抖文本同步转化为解析树和错误提示 + // Parse debounced inputs const parseState = useMemo(() => { const invalidMsg = t('jsonDiff:invalidJson'); return { @@ -71,7 +71,7 @@ export default function Index() { const [viewMode, setViewMode] = useState('sideBySide'); const [currentDiffIndex, setCurrentDiffIndex] = useState(0); - // 4. 实时比对流式计算 + // Real-time diff computation const diffResult = useMemo(() => { const { left, right } = parseState; if (left.error || right.error || debouncedLeft.trim() === '' || debouncedRight.trim() === '') { @@ -80,9 +80,6 @@ export default function Index() { return diffJson(left.value, right.value); }, [parseState, debouncedLeft, debouncedRight]); - // 💡 彻底删除了原本在此处的侦听 [diffResult] 的 useEffect。 - // 状态重置已完全委托给事件源头,级联更新警告从根源上永久自愈! - const total = diffResult?.diffPaths.length ?? 0; const handlePrev = useCallback(() => { diff --git a/src/pages/Jwt/index.tsx b/src/pages/Jwt/index.tsx index 0300b10..6e37771 100644 --- a/src/pages/Jwt/index.tsx +++ b/src/pages/Jwt/index.tsx @@ -9,7 +9,7 @@ import { cn } from '@/lib/utils'; interface SectionProps { title: string; content: unknown; - colorClass: string; // 💡 1. 废除硬编码十六进制色值,改用语义化的 Tailwind 类名 + colorClass: string; bgClass: string; borderClass: string; } @@ -27,10 +27,6 @@ const Section = ({ title, content, colorClass, bgClass, borderClass }: SectionPr className="h-6 w-6 rounded-md border text-muted-foreground" />
- {/* 💡 排版微距精雕: - - 彻底移除 border-black/5 这种非暗黑模式友好的硬隔离。 - - 统一收拢为标准的 bg-muted/40 配合 font-mono text-xs - */}
         {content ? stringifyJson(content) : t('jwt:invalidFormat')}
       
@@ -59,7 +55,6 @@ export default function Index() { useContextMenuData({ featureKey: 'jwt', onData: handleContextMenuData }); - // 3. 贯彻方案 A:衍生变量流。直接消费防抖后的文本 const result = useMemo(() => { if (!debouncedInput.trim()) { return null; diff --git a/src/pages/MarkdownToHtml/index.tsx b/src/pages/MarkdownToHtml/index.tsx index 557ebcb..74a0418 100644 --- a/src/pages/MarkdownToHtml/index.tsx +++ b/src/pages/MarkdownToHtml/index.tsx @@ -18,7 +18,6 @@ import { cn } from '@/lib/utils'; const isValidPreviewMode = (val: unknown): val is MarkdownToHtmlPreviewMode => typeof val === 'string' && ['split', 'preview', 'html'].includes(val); -// 💡 规范回归:保持最纯净的通用选择器集合,内部变量全部交由全局 :root 驱动 const PREVIEW_STYLES = ` .markdown-body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; @@ -94,7 +93,6 @@ export default function MarkdownToHtmlPage() { const result = useMemo(() => markdownToHtml(markdown), [markdown]); const error = result.hasError ? (result.error ?? null) : null; - // 💡 自适应大总管:以极高严谨度拼装明暗大闸,用标准换行切断粘连风险 useEffect(() => { const iframe = iframeRef.current; if (!iframe) return; @@ -123,7 +121,6 @@ export default function MarkdownToHtmlPage() { --md-link-color: #3b82f6; }`; - // 💡 3. 核心大清洗:将全局基础树(html, body)与派生样式完全独立硬编码,杜绝任何语法踩踏 const baseGlobalStyles = ` html, body { margin: 0; diff --git a/src/pages/QrCode/components/GeneratePanel.tsx b/src/pages/QrCode/components/GeneratePanel.tsx index 8dfab73..22cf88c 100644 --- a/src/pages/QrCode/components/GeneratePanel.tsx +++ b/src/pages/QrCode/components/GeneratePanel.tsx @@ -11,17 +11,12 @@ export default function GeneratePanel() { return (
- {/* 左翼:高性能受控输入翼终端 */}
- {/* 💡 2. 独立外置标签架(A11y 无障碍对齐): - - 彻底删掉 TextInputArea 上引发崩溃的违规属性。 - - 改用正统的
- {/* 右翼:活态二维码高精生成区 */}
- {/* 左翼:图片接收/拖拽/剪贴板上传终端 */}
- {/* 右翼:高阶解析出码只读终端 */}
- {/* 💡 修复点:物理剔除 TextInputArea 上的违规 title,改用符合 Vercel 美学的极致大写极细原子标签 */} diff --git a/src/pages/QrCode/contexts/QrCodeContext.ts b/src/pages/QrCode/contexts/QrCodeContext.ts index 3e1b4ef..fe6d02f 100644 --- a/src/pages/QrCode/contexts/QrCodeContext.ts +++ b/src/pages/QrCode/contexts/QrCodeContext.ts @@ -1,23 +1,19 @@ -import type { Dispatch, SetStateAction } from 'react'; // 💡 1. 显式解构导入类型,彻底掐灭 TS2304 报错 +import type { Dispatch, SetStateAction } from 'react'; import { createContext, useContext } from 'react'; import type { QrCodeGeneratorState, QrCodeMode, QrCodeParserState } from '../types'; export interface QrCodeContextValue { - // 核心主视图路由模式切换卡 mode: QrCodeMode; setMode: (mode: QrCodeMode) => void; - // 1. 流式生成器终端状态机驱动 generatorState: QrCodeGeneratorState; setTextToEncode: (text: string) => void; - // 💡 架构纯净化:物理剔除暴露给外部的命令式 generateQrCode 算子。 - // 外部面板只需 setTextToEncode 驱动源文本更新,生成动作由内部流式管线全自动自发自愈完成! + downloadQrCode: () => void; copyQrCode: () => Promise; - // 2. 活态反向解析器终端状态机驱动 parserState: QrCodeParserState; - setParserState: Dispatch>; // 💡 规整为纯净的直接类型使用 + setParserState: Dispatch>; parseQrCode: (file: File) => Promise; handleFileChange: (file: File) => void; handleClearFile: () => void; @@ -28,7 +24,6 @@ export const QrCodeContext = createContext(null); export function useQrCodeContext() { const context = useContext(QrCodeContext); if (!context) { - // 边界鲁棒性防护大闸 throw new Error('useQrCodeContext must be used within a valid QrCodeProvider container'); } return context; diff --git a/src/pages/QrCode/hooks/useQrCode.ts b/src/pages/QrCode/hooks/useQrCode.ts index f6c1308..706cefd 100644 --- a/src/pages/QrCode/hooks/useQrCode.ts +++ b/src/pages/QrCode/hooks/useQrCode.ts @@ -12,10 +12,8 @@ export function useQrCode(): QrCodeContextValue { const { t } = useI18n('qrCode'); const { showMessage } = useSnackbar(); - // 核心路由视图模式 const [mode, setMode] = useState('generate'); - // 1. 生成器状态流(大幅瘦身:剔除 generating 状态) const [generatorState, setGeneratorState] = useState< Omit >({ @@ -23,7 +21,6 @@ export function useQrCode(): QrCodeContextValue { inputError: '', }); - // 2. 解析器状态流 const [parserState, setParserState] = useState({ decodedResult: '', parsing: false, @@ -33,12 +30,8 @@ export function useQrCode(): QrCodeContextValue { dragging: false, }); - // 3. 高频打字极速防抖 const debouncedTextToEncode = useDebounce(generatorState.textToEncode, 200); - // 💡 4. 贯彻方案 A(无副作用超导管线): - // 彻底删除原有的 generateQrCodeRef、3个 useEffect、1个 useRef 以及相关的复杂状态机。 - // 二维码画布纯粹作为防抖文本的派生变量同步算出,0重绘死循环风险,体验平滑如镜! const qrCodeDataUrl = useMemo(() => { const text = debouncedTextToEncode.trim(); if (!text) return ''; @@ -49,14 +42,12 @@ export function useQrCode(): QrCodeContextValue { url = 'https://' + url; } - // 💡 暗黑模式自适应大闸:实时嗅探系统 DOM 阶度 const isDark = document.documentElement.classList.contains('dark'); const qr = new QRious({ value: url, size: 260, level: 'H', - // 暗黑模式下使用透明底、月白前景色;白天模式下使用标准现代黑白配 foreground: isDark ? '#f3f4f6' : '#0f172a', background: isDark ? 'transparent' : '#ffffff', }); @@ -68,7 +59,6 @@ export function useQrCode(): QrCodeContextValue { } }, [debouncedTextToEncode]); - // 融合派生数据至完整状态体,满足外部组件强类型契合 const fullGeneratorState = useMemo( () => ({ ...generatorState, @@ -78,12 +68,10 @@ export function useQrCode(): QrCodeContextValue { [generatorState, qrCodeDataUrl], ); - // 设置输入文本 const setTextToEncode = useCallback((text: string) => { setGeneratorState((prev) => ({ ...prev, textToEncode: text, inputError: '' })); }, []); - // 处理右键菜单数据上下文 const handleContextMenuData = useCallback((payload: string) => { setMode('generate'); setGeneratorState((prev) => ({ ...prev, textToEncode: payload, inputError: '' })); @@ -119,7 +107,6 @@ export function useQrCode(): QrCodeContextValue { [t, showMessage], ); - // 下载二维码 const downloadQrCode = useCallback(() => { if (!qrCodeDataUrl) return; @@ -130,7 +117,6 @@ export function useQrCode(): QrCodeContextValue { showMessage(t('qrCode:qrCodeDownloadSuccess'), { severity: 'success', autoHideDuration: 1000 }); }, [qrCodeDataUrl, showMessage, t]); - // 复制二维码至剪贴板 const copyQrCode = useCallback(async () => { if (!qrCodeDataUrl) return; @@ -151,7 +137,6 @@ export function useQrCode(): QrCodeContextValue { } }, [qrCodeDataUrl, showMessage, t]); - // 处理文件选择 const handleFileChange = useCallback( (file: File) => { setParserState((prev) => { diff --git a/src/pages/QrCode/index.tsx b/src/pages/QrCode/index.tsx index c63104f..8591e04 100644 --- a/src/pages/QrCode/index.tsx +++ b/src/pages/QrCode/index.tsx @@ -19,12 +19,7 @@ export default function Index() { return ( - {/* 💡 统一视觉规范大超进化: - - 彻底剥离破坏流式宽度的 max-w-[400px] 枷锁,开启标准的 w-full 全自适应包裹。 - - 替换为标准的 p-4 呼吸内边距配合 flex flex-col space-y-4,接管系统级重排! - */}
- {/* 流式中央控制切流卡:注入 sm 断点防御,防范单栏状态下发生变形 */}
- {/* 💡 面板渲染沙箱: - - 在切流渲染时,利用独立的 mt-2 增加纵深边界线。 - - 配合内部自带的双翼 Flex 聚焦大边框,形成坚固如铁的架构闭环! - */}
{qrCode.mode === 'generate' ? (
diff --git a/src/pages/StorageCleaner/CleaningResult.tsx b/src/pages/StorageCleaner/CleaningResult.tsx index d6f658c..d546d09 100644 --- a/src/pages/StorageCleaner/CleaningResult.tsx +++ b/src/pages/StorageCleaner/CleaningResult.tsx @@ -3,7 +3,7 @@ import { CheckCircle, XCircle } from 'lucide-react'; import type { CleaningResult as CleaningResultType } from '@/types/storage'; import { formatCleaningResult } from '@/utils/storageCleaner'; import { useI18n } from '@/utils/chromeI18n'; -import { cn } from '@/lib/utils'; // 1. 引入 shadcn 核心类名合并工具 +import { cn } from '@/lib/utils'; interface CleaningResultProps extends React.HTMLAttributes { result: CleaningResultType | null; @@ -18,11 +18,6 @@ export default function CleaningResult({ result, className, ...props }: Cleaning return (
- {/* 2. 彻底重构容器类名结构: - - 成功状态:采用 Tailwind 官方推荐的 emerald 体系,利用 /10 (10% 透明度) 和 /20 (边框)。 - - 失败状态:完全放权给标准的 border-destructive/20 和 bg-destructive/5。 - - 这样在明暗双色模式切换时,色彩会自动与背景完美融为一体。 - */}
- {/* 3. 图标样式向系统语义全面对齐 */} {isSuccess ? ( ) : ( )} - {/* 4. 文本排版细节微调 */} {isSuccess ? formatCleaningResult(result, t) diff --git a/src/pages/StorageCleaner/ErrorDisplay.tsx b/src/pages/StorageCleaner/ErrorDisplay.tsx index 1e9ac17..2568831 100644 --- a/src/pages/StorageCleaner/ErrorDisplay.tsx +++ b/src/pages/StorageCleaner/ErrorDisplay.tsx @@ -10,7 +10,6 @@ export default function ErrorDisplay({ error, className, ...props }: ErrorDispla const { t } = useI18n('storageCleaner'); return ( - // 1. 精简层级:单层外壳直接搞定居中、响应式高度与外部类名扩展
- {/* 2. 核心卡片容器: - - 彻底放弃 bg-red-50,改用标准的 bg-destructive/5(3%~5% 透明度的系统危险色)。 - - 边框改为 border-destructive/20。 - - 这样在黑夜模式下会自动完美混色,绝不刺眼。 - */}
- {/* 3. 图标与主要错误信息全面对接 text-destructive 语义色 */}
@@ -33,7 +26,6 @@ export default function ErrorDisplay({ error, className, ...props }: ErrorDispla {error}

- {/* 次要提示文本维持柔和的中性高级灰 */}

{t('storageCleaner:errorStandardOnly')}

diff --git a/src/pages/StorageCleaner/OptionItem.tsx b/src/pages/StorageCleaner/OptionItem.tsx index 55f0f4b..18c7fe6 100644 --- a/src/pages/StorageCleaner/OptionItem.tsx +++ b/src/pages/StorageCleaner/OptionItem.tsx @@ -26,14 +26,9 @@ export default function OptionItem({ return (
- {/* 5. 超进化:全面替换原生 input 标签 - 完美调用 shadcn 的 Checkbox 组件。它自带全站统一的主色(Primary)、 - 打钩选中时的平滑微放大缩放动效(Scale Animation), - 并且阻止冒泡,防范与外层的全局覆盖点击事件产生双重冲突。 - */} e.stopPropagation()} onCheckedChange={onChange} className="h-4 w-4 shrink-0 rounded border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground" diff --git a/src/pages/StorageCleaner/StorageCleanerConfirm.tsx b/src/pages/StorageCleaner/StorageCleanerConfirm.tsx index 452582c..b3397cc 100644 --- a/src/pages/StorageCleaner/StorageCleanerConfirm.tsx +++ b/src/pages/StorageCleaner/StorageCleanerConfirm.tsx @@ -34,11 +34,6 @@ export function StorageCleanerConfirm({ return ( !isOpen && onClose()}> - {/* 💡 终极修复秘诀: - - 移除原来的 sm:max-w-[360px],改用 max-w-[calc(100%-32px)] 或者是 w-[88%]。 - - 这样无论插件弹窗多窄,它的左右两侧都必然会被强制挤出至少 16px 的完美空白护边! - - 将 p-5 转换为明确的 p-6,增大弹窗内部的呼吸感。 - */}
- {/* 底部操作按钮区: - 💡 修复要点: - - 增加 pt-2 隔开上方危险条。 - - 显式通过 w-full 配合 flex-col 铺满,在移动端/窄插件下垂直堆叠,最符合小屏直觉。 - */}