From 4d9e2e1af9be65c6e4d3fc7202feb3d3a9ef915e Mon Sep 17 00:00:00 2001 From: WuYongJie Date: Thu, 28 May 2026 22:05:08 +0800 Subject: [PATCH] =?UTF-8?q?=E6=94=B6=E6=95=9B=E6=97=A7=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E5=B7=A5=E5=85=B7=E5=AF=BC=E5=87=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/商业化地基排查问题清单_20260524.md | 2 +- lib/ui-styles.ts | 82 ++++++++++--------------- 2 files changed, 33 insertions(+), 51 deletions(-) diff --git a/docs/商业化地基排查问题清单_20260524.md b/docs/商业化地基排查问题清单_20260524.md index b0cf2e1..e636d54 100644 --- a/docs/商业化地基排查问题清单_20260524.md +++ b/docs/商业化地基排查问题清单_20260524.md @@ -959,7 +959,7 @@ NAS 私有化系统可能在平板或窄屏浏览器里使用。模板编辑器 证据： -- `lib/ui-styles.ts`：已先把向后兼容导出的 `rainbow / glass / neon` 降级为普通工作台控件。 +- `lib/ui-styles.ts`：已把向后兼容导出的 `rainbow / glass / neon` 降级为普通工作台控件；本轮继续把旧直出 `cardStyles / buttonStyles / inputStyles / navItemStyles` 从大圆角、靛蓝焦点和 `transition-all` 收为 `rounded-lg`、中性焦点和颜色过渡，并把兼容的浮动光球/鼠标光晕函数降级为无装饰效果。 - `lib/ui-styles-base.ts`：已把 Hook 样式源头里的卡片、按钮、输入框、导航、弹窗从大圆角、毛玻璃、强阴影和缩放动画收敛为普通边框、普通圆角和轻量状态变化。 - `lib/ui-theme-colors-light.ts`、`lib/ui-theme-colors-dark.ts`：已把彩虹、玻璃、霓虹、强阴影等兼容字段映射为普通背景、普通边框和少量语义色。 - `components/ui/Tag.tsx`：已把标签从彩色胶囊和放大动效改为中性后台标签。 diff --git a/lib/ui-styles.ts b/lib/ui-styles.ts index 7a59dc0..d9c33f3 100644 --- a/lib/ui-styles.ts +++ b/lib/ui-styles.ts @@ -18,66 +18,66 @@ export { lightStyles, darkStyles } from './ui-styles-theme-exports' // 建议逐步迁移到 useThemeStyles Hook export const cardStyles = { // 基础卡片 - base: 'rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-6 transition-colors duration-200', + base: 'rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-5 transition-colors duration-200', // 悬停卡片 - hover: 'rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 transition-colors duration-200 p-6', + hover: 'rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 transition-colors duration-200 p-5', // 大卡片 - large: 'rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 transition-colors duration-200 p-8', + large: 'rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 transition-colors duration-200 p-6', // 扁平卡片 - flat: 'rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-6 transition-colors duration-200', + flat: 'rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-5 transition-colors duration-200', // 保留兼容字段，但降级为普通卡片 - rainbow: 'rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-6 transition-colors duration-200', + rainbow: 'rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-5 transition-colors duration-200', // 保留兼容字段，但降级为普通卡片 - glass: 'rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-6 transition-colors duration-200', + glass: 'rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-5 transition-colors duration-200', // 保留兼容字段，但降级为普通卡片 - neon: 'rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-6 transition-colors duration-200', + neon: 'rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-5 transition-colors duration-200', } as const export const buttonStyles = { // 主要按钮 - primary: 'px-6 py-3 rounded-xl bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 font-medium hover:bg-slate-800 dark:hover:bg-white transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed', + primary: 'px-4 py-2 rounded-lg bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 font-medium hover:bg-slate-800 dark:hover:bg-white transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed', // 次要按钮 - secondary: 'px-6 py-3 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 font-medium hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed', + secondary: 'px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 font-medium hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed', // 幽灵按钮 - ghost: 'px-6 py-3 rounded-xl text-slate-700 dark:text-slate-200 font-medium hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed', + ghost: 'px-4 py-2 rounded-lg text-slate-700 dark:text-slate-200 font-medium hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed', // 危险按钮 - danger: 'px-6 py-3 rounded-xl bg-red-600 dark:bg-red-500 text-white font-medium hover:bg-red-700 dark:hover:bg-red-600 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed', + danger: 'px-4 py-2 rounded-lg bg-red-600 dark:bg-red-500 text-white font-medium hover:bg-red-700 dark:hover:bg-red-600 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed', // 成功按钮 - success: 'px-6 py-3 rounded-xl bg-emerald-600 dark:bg-emerald-500 text-white font-medium hover:bg-emerald-700 dark:hover:bg-emerald-600 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed', + success: 'px-4 py-2 rounded-lg bg-emerald-600 dark:bg-emerald-500 text-white font-medium hover:bg-emerald-700 dark:hover:bg-emerald-600 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed', // 保留兼容字段，但降级为普通按钮 - rainbow: 'px-6 py-3 rounded-xl bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 font-medium hover:bg-slate-800 dark:hover:bg-white transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed', + rainbow: 'px-4 py-2 rounded-lg bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 font-medium hover:bg-slate-800 dark:hover:bg-white transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed', // 保留兼容字段，但降级为普通按钮 - neon: 'px-6 py-3 rounded-xl bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 font-medium hover:bg-slate-800 dark:hover:bg-white transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed', + neon: 'px-4 py-2 rounded-lg bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 font-medium hover:bg-slate-800 dark:hover:bg-white transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed', // 保留兼容字段，但降级为普通按钮 - glass: 'px-6 py-3 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 font-medium hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed', + glass: 'px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 font-medium hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed', } as const export const buttonModifiers = { compact: 'px-3 py-1.5 text-sm', compactXs: 'px-2 py-1 text-xs', - icon: 'p-2 rounded-xl', + icon: 'p-2 rounded-lg', block: 'w-full justify-center', pill: 'rounded-full', } as const export const inputStyles = { // 基础输入框 - 确保深色模式完全适配 - base: 'w-full px-4 py-3 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder:text-slate-400 dark:placeholder:text-slate-400 focus:border-indigo-500 dark:focus:border-indigo-400 focus:ring-2 focus:ring-indigo-200 dark:focus:ring-indigo-800 outline-none transition-all', + base: 'w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder:text-slate-400 dark:placeholder:text-slate-400 focus:border-slate-900 dark:focus:border-slate-500 focus:ring-2 focus:ring-slate-200 dark:focus:ring-slate-700 outline-none transition-colors', // 错误输入框 - 确保深色模式完全适配 - error: 'w-full px-4 py-3 rounded-xl border-2 border-red-500 dark:border-red-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder:text-slate-400 dark:placeholder:text-slate-400 focus:ring-2 focus:ring-red-200 dark:focus:ring-red-800 outline-none transition-all', + error: 'w-full px-3 py-2 rounded-lg border-2 border-red-500 dark:border-red-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder:text-slate-400 dark:placeholder:text-slate-400 focus:ring-2 focus:ring-red-200 dark:focus:ring-red-800 outline-none transition-colors', } as const export const inputModifiers = { @@ -87,20 +87,20 @@ export const inputModifiers = { export const navItemStyles = { // 基础导航项 - base: 'px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 transition-colors duration-200', + base: 'px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 transition-colors duration-200', // 悬停导航项 - hover: 'px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 transition-colors duration-200', + hover: 'px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 transition-colors duration-200', // 激活导航项 - active: 'px-4 py-3 rounded-xl border border-slate-900 dark:border-slate-100 bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-white transition-colors duration-200', + active: 'px-3 py-2 rounded-lg border border-slate-900 dark:border-slate-100 bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-white transition-colors duration-200', // 保留兼容字段，但降级为普通导航项 - rainbow: 'px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 transition-colors duration-200', + rainbow: 'px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 transition-colors duration-200', // 标签页导航项 - 确保深色模式完全适配 - tabBase: 'relative pb-4 px-5 font-medium transition-all duration-300 ease-out text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white', - tabActive: 'relative pb-4 px-5 font-medium transition-all duration-300 ease-out text-slate-900 dark:text-white', + tabBase: 'relative pb-4 px-5 font-medium transition-colors duration-200 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white', + tabActive: 'relative pb-4 px-5 font-medium transition-colors duration-200 text-slate-900 dark:text-white', } as const export const badgeStyles = { @@ -147,8 +147,8 @@ export function getThemeStyles(theme: 'light' | 'dark') { */ export function sectionRevealClass(isVisible: boolean): string { return cn( - 'transition-all duration-700 ease-out transform', - isVisible ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-6 scale-95' + 'transition-opacity duration-300 ease-out', + isVisible ? 'opacity-100' : 'opacity-0' ) } @@ -158,16 +158,8 @@ export function sectionRevealClass(isVisible: boolean): string { * @param position - 位置 'topRight' | 'bottomLeft' * @returns 样式类字符串 */ -export function floatingOrbClass(theme: 'light' | 'dark', position: 'topRight' | 'bottomLeft'): string { - const baseClasses = 'absolute rounded-full blur-3xl pointer-events-none' - const positionClasses = position === 'topRight' - ? '-top-8 -right-8 h-24 w-24 animate-pulse-slow' - : '-bottom-8 -left-8 h-20 w-20 animate-[pulse_8s_ease-in-out_infinite]' - const colorClasses = position === 'topRight' - ? (theme === 'dark' ? 'bg-indigo-500/15' : 'bg-indigo-400/20') - : (theme === 'dark' ? 'bg-purple-500/15' : 'bg-purple-400/20') - - return cn(baseClasses, positionClasses, colorClasses) +export function floatingOrbClass(_theme: 'light' | 'dark', _position: 'topRight' | 'bottomLeft'): string { + return 'hidden' } /** @@ -179,24 +171,14 @@ export function floatingOrbClass(theme: 'light' | 'dark', position: 'topRight' | * @returns 背景样式对象 */ export function getHeroDynamicBackground( - isMouseOver: boolean, - glowPos: { x: number; y: number }, - theme: 'light' | 'dark', + _isMouseOver: boolean, + _glowPos: { x: number; y: number }, + _theme: 'light' | 'dark', baseGradient: string ): { backgroundImage: string; transition: string } { - if (isMouseOver) { - return { - backgroundImage: `radial-gradient(circle 300px at ${glowPos.x}% ${glowPos.y}%, ${ - theme === 'dark' - ? 'rgba(255,255,255,0.2), rgba(255,255,255,0.1), rgba(255,255,255,0.05), transparent 75%' - : 'rgba(255,255,255,0.3), rgba(255,255,255,0.15), rgba(255,255,255,0.08), transparent 75%' - }), ${baseGradient}`, - transition: 'background-image 0.4s ease-out', - } - } return { backgroundImage: baseGradient, - transition: 'background-image 0.4s ease-out', + transition: 'background-color 0.2s ease-out', } }