rsgltzyd/testing-tool
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: 重构 Tailwind 配置以支持模块化和共享主题

Browse Source 
- 更新 components.json，修改 CSS 文件路径为 src/styles/shell.css。
- 移除 tailwind.config.js 中的冗余配置，改为导入 tailwind.shell.config.js。
- 新增 tailwind.pages.config.js 和 tailwind.shared.js，集中管理主题和样式配置。
- 更新多个组件以使用新的样式类和配置，提升代码一致性和可维护性。
This commit is contained in:
雨霖铃
2026-06-30 23:15:35 +08:00
parent 17a4dbd8a7
commit 6975e38f79
24 changed files with 236 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/CopyButton.tsx
+1 -5
View File
@@ -57,11 +57,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
className={cn(className, copied && 'text-emerald-500')}
{...props}
>
{copied ? (
<Check className="h-[1.2em] w-[1.2em]" />
) : (
<Copy className="h-[1.2em] w-[1.2em]" />
)}
{copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
</Button>
);
};
src/components/ErrorFallback.tsx
+1 -3
View File
@@ -30,9 +30,7 @@ export function ErrorFallback({
<div
className={cn(
'flex flex-col items-center justify-center',
isApp
? 'mt-16 mx-auto max-w-md'
: 'flex-1 p-6 min-h-[300px] animate-in fade-in zoom-in-95 duration-200',
isApp ? 'mt-16 mx-auto max-w-md' : 'flex-1 p-6 min-h-[300px] fade-in-zoom-95',
className,
)}
>
src/components/PageSkeleton.tsx
+1 -1
View File
@@ -46,7 +46,7 @@ function ToolPageSkeleton() {
<div className="w-24 h-9 bg-muted rounded-lg animate-pulse" />
<div className="w-20 h-9 bg-muted rounded-lg animate-pulse" />
<div className="flex-1" />
<div className="w-22 h-9 bg-muted rounded-lg animate-pulse" />
<div className="w-24 h-9 bg-muted rounded-lg animate-pulse" />
</div>
{/* 结果区域 */}
src/components/RouterContainer.tsx
+2 -2
View File
@@ -49,7 +49,7 @@ export default function RouterContainer() {
key={currentPage}
className={cn(
'flex-1 flex flex-col overflow-x-hidden overflow-y-auto',
'scrollbar-gutter-stable motion-reduce:transition-none',
'motion-reduce:transition-none',
animationClass,
)}
>
@@ -57,7 +57,7 @@ export default function RouterContainer() {
{currentFeature ? (
<LoadedPage key={currentPage} pageKey={currentPage} />
) : (
<div className="flex-1 flex flex-col items-center justify-center p-8 text-center animate-in fade-in duration-300">
<div className="flex-1 flex flex-col items-center justify-center p-8 text-center fade-in-300">
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-destructive/10 text-destructive mb-4">
<AlertTriangle className="h-6 w-6" />
</div>
src/components/SwitchButtonGroup.tsx
+1 -2
View File
@@ -24,8 +24,7 @@ const SIZE_CLASSES = {
large: 'text-base h-11 px-4 py-2 rounded-lg',
} as const;
const SELECTED_CLASSES =
'bg-background text-foreground shadow-sm font-semibold animate-in fade-in-50 zoom-in-95 duration-150';
const SELECTED_CLASSES = 'bg-background text-foreground shadow-sm font-semibold fade-in-zoom-95';
const UNSELECTED_CLASSES = 'hover:bg-background/50 hover:text-foreground/80';
export default function SwitchButtonGroup<T extends string | number = string>({
src/components/TextInputArea.tsx
+10 -4
View File
@@ -267,7 +267,13 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
<div className="flex items-center gap-1.5 ml-auto shrink-0">
{allowCopy && value && (
<CopyButton text={value} tooltip="复制内容" size="sm" className="h-7 w-7 p-1" />
<CopyButton
text={value}
tooltip="复制内容"
variant="ghost"
size="iconSm"
className="text-muted-foreground hover:text-foreground"
/>
)}
{showClear && value && !disabled && !readOnly && (
<Button
@@ -275,8 +281,8 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
onClick={handleClear}
aria-label="清空"
variant="ghost"
size="icon"
className="h-7 w-7 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
size="iconSm"
className="text-muted-foreground hover:text-destructive hover:bg-destructive/10"
>
<X className="h-4 w-4" />
</Button>
@@ -287,7 +293,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
</div>
{displayError && (
<p className="text-xs font-medium text-destructive px-0.5 animate-in fade-in slide-in-from-top-1 duration-150">
<p className="text-xs font-medium text-destructive px-0.5 fade-in-slide-top-1">
{displayError}
</p>
)}
src/components/ui/button.tsx
+1
View File
@@ -21,6 +21,7 @@ const buttonVariants = cva(
sm: 'h-9 rounded-md px-3',
lg: 'h-11 rounded-md px-8',
icon: 'h-10 w-10',
iconSm: 'h-7 w-7',
},
},
defaultVariants: {
src/components/ui/dialog.tsx
+2 -2
View File
@@ -18,7 +18,7 @@ const DialogOverlay = React.forwardRef<
<DialogPrimitive.Overlay
ref={ref}
className={cn(
'fixed inset-0 z-50 bg-black/80 dark:bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
'fixed inset-0 z-50 bg-black/80 dark:bg-black/60 transition-opacity duration-200 data-[state=closed]:opacity-0 data-[state=open]:opacity-100',
className,
)}
{...props}
@@ -41,7 +41,7 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white dark:bg-gray-900 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white dark:bg-gray-900 p-6 shadow-lg transition-all duration-200 data-[state=closed]:scale-95 data-[state=open]:scale-100 data-[state=closed]:opacity-0 data-[state=open]:opacity-100 sm:rounded-lg',
className,
)}
{...props}
src/components/ui/select.tsx
+1 -1
View File
@@ -65,7 +65,7 @@ const SelectContent = React.forwardRef<
<SelectPrimitive.Content
ref={ref}
className={cn(
'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md transition-all duration-200 data-[state=closed]:scale-95 data-[state=open]:scale-100 data-[state=closed]:opacity-0 data-[state=open]:opacity-100',
position === 'popper' &&
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
className,
src/config/pageLoaders/index.ts
+38 -26
View File
@@ -3,31 +3,43 @@ import type { PageType } from '@/types/storage';
type PageModule = { default: ComponentType };
export function loadPage(key: PageType): Promise<PageModule> {
switch (key) {
case 'dashboard':
return import('@/config/pageLoaders/dashboard').then((m) => m.default());
case 'timestamp':
return import('@/config/pageLoaders/timestamp').then((m) => m.default());
case 'storageCleaner':
return import('@/config/pageLoaders/storageCleaner').then((m) => m.default());
case 'qrCode':
return import('@/config/pageLoaders/qrCode').then((m) => m.default());
case 'textStatistics':
return import('@/config/pageLoaders/textStatistics').then((m) => m.default());
case 'jwt':
return import('@/config/pageLoaders/jwt').then((m) => m.default());
case 'jsonTools':
return import('@/config/pageLoaders/jsonTools').then((m) => m.default());
case 'base64Converter':
return import('@/config/pageLoaders/base64Converter').then((m) => m.default());
case 'rightClickRestorer':
return import('@/config/pageLoaders/rightClickRestorer').then((m) => m.default());
case 'testDataGenerator':
return import('@/config/pageLoaders/testDataGenerator').then((m) => m.default());
default: {
const _exhaustive: never = key;
return Promise.reject(new Error(`Unknown page: ${String(_exhaustive)}`));
}
let pagesStylesLoaded = false;
function ensurePagesStyles(): Promise<unknown> {
if (pagesStylesLoaded) {
return Promise.resolve();
}
pagesStylesLoaded = true;
return import('@/styles/pages.css');
}
export function loadPage(key: PageType): Promise<PageModule> {
return ensurePagesStyles().then(() => {
switch (key) {
case 'dashboard':
return import('@/config/pageLoaders/dashboard').then((m) => m.default());
case 'timestamp':
return import('@/config/pageLoaders/timestamp').then((m) => m.default());
case 'storageCleaner':
return import('@/config/pageLoaders/storageCleaner').then((m) => m.default());
case 'qrCode':
return import('@/config/pageLoaders/qrCode').then((m) => m.default());
case 'textStatistics':
return import('@/config/pageLoaders/textStatistics').then((m) => m.default());
case 'jwt':
return import('@/config/pageLoaders/jwt').then((m) => m.default());
case 'jsonTools':
return import('@/config/pageLoaders/jsonTools').then((m) => m.default());
case 'base64Converter':
return import('@/config/pageLoaders/base64Converter').then((m) => m.default());
case 'rightClickRestorer':
return import('@/config/pageLoaders/rightClickRestorer').then((m) => m.default());
case 'testDataGenerator':
return import('@/config/pageLoaders/testDataGenerator').then((m) => m.default());
default: {
const _exhaustive: never = key;
return Promise.reject(new Error(`Unknown page: ${String(_exhaustive)}`));
}
}
});
}
src/entrypoints/popup/App.tsx
+1 -1
View File
@@ -25,7 +25,7 @@ export default function App() {
visiblePagesKey={routerConfig.visiblePagesKey}
pageOrderKey={routerConfig.pageOrderKey}
>
<div className="app flex flex-col w-[400px] max-w-[400px] min-w-[400px] h-[600px] min-h-[600px] overflow-hidden bg-background sm:w-screen sm:max-w-none sm:min-w-0 sm:h-screen sm:min-h-0">
<div className="flex flex-col w-[400px] max-w-[400px] min-w-[400px] h-[600px] min-h-[600px] overflow-hidden bg-background sm:w-screen sm:max-w-none sm:min-w-0 sm:h-screen sm:min-h-0">
<TopBar />
<ErrorBoundary>
<RouterContainer />
src/entrypoints/popup/main.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import ReactDOM from 'react-dom/client';
import AppRoot from '@/providers/AppRoot';
import '@/index.css';
import '@/styles/shell.css';
import App from './App.tsx';
ReactDOM.createRoot(document.getElementById('root')!).render(
src/entrypoints/sidepanel/App.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ export default function App() {
return (
<RouterProvider defaultRoute="dashboard" syncKey="app/sidepanelRoute">
<div className="app flex flex-col h-screen w-full overflow-hidden">
<div className="flex flex-col h-screen w-full overflow-hidden">
<TopBar />
<ErrorBoundary>
<RouterContainer />
src/entrypoints/sidepanel/main.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import ReactDOM from 'react-dom/client';
import AppRoot from '@/providers/AppRoot';
import '@/index.css';
import '@/styles/shell.css';
import App from './App.tsx';
ReactDOM.createRoot(document.getElementById('root')!).render(
src/layout/TopBar/SearchDropdown.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ export default function SearchDropdown({
const items = isSearching ? searchResults : recentFeatures;
return (
<div className="absolute left-0 right-0 top-full z-50 mt-1.5 max-h-80 overflow-y-auto rounded-lg border border-border bg-popover text-popover-foreground shadow-lg animate-in fade-in slide-in-from-top-2 duration-150">
<div className="absolute left-0 right-0 top-full z-50 mt-1.5 max-h-80 overflow-y-auto rounded-lg border border-border bg-popover text-popover-foreground shadow-lg fade-in-slide-top-2">
<ul role="listbox" className="p-1.5">
{!isSearching && items.length > 0 && (
<li className="px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
src/pages/QrCode/components/QrCodePreview.tsx
+1 -1
View File
@@ -44,7 +44,7 @@ const QrCodePreview = ({
<img
src={qrCodeDataUrl}
alt="QR Code Preview"
className="w-48 h-48 max-w-full object-contain block animate-in fade-in duration-300"
className="w-48 h-48 max-w-full object-contain block fade-in-300"
/>
</div>
src/styles/pages.css
+3
View File
@@ -0,0 +1,3 @@
@config "../../tailwind.pages.config.js";
@tailwind utilities;
src/index.css → src/styles/shell.css
+90
View File
@@ -1,3 +1,5 @@
@config "../../tailwind.shell.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;
@@ -90,3 +92,91 @@
::-webkit-scrollbar {
display: none;
}
@layer components {
.page-transition-dashboard {
@apply motion-reduce:transition-none;
}
.page-transition-enter {
@apply motion-reduce:transition-none;
animation: tt-page-enter 200ms ease-out;
}
}
@layer utilities {
.fade-in-150 {
animation: tt-fade-in 150ms ease-out forwards;
}
.fade-in-200 {
animation: tt-fade-in 200ms ease-out forwards;
}
.fade-in-300 {
animation: tt-fade-in 300ms ease-out forwards;
}
.fade-in-zoom-95 {
animation: tt-fade-in-zoom-95 150ms ease-out forwards;
}
.fade-in-slide-top-1 {
animation: tt-fade-in-slide-top-1 150ms ease-out forwards;
}
.fade-in-slide-top-2 {
animation: tt-fade-in-slide-top-2 150ms ease-out forwards;
}
}
@keyframes tt-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes tt-fade-in-zoom-95 {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes tt-fade-in-slide-top-1 {
from {
opacity: 0;
transform: translateY(-0.25rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes tt-fade-in-slide-top-2 {
from {
opacity: 0;
transform: translateY(-0.5rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes tt-page-enter {
from {
opacity: 0.92;
}
to {
opacity: 1;
}
}
src/types/css.d.ts
Vendored
+4
View File
@@ -0,0 +1,4 @@
declare module '*.css' {
const css: string;
export default css;
}