diff --git a/.vscode/settings.json b/.vscode/settings.json
index bf80054..7e0ee1b 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -9,5 +9,9 @@
},
"[css]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
- }
+ },
+ "tailwindCSS.classFunctions": [
+ "cva",
+ "cx"
+ ]
}
\ No newline at end of file
diff --git a/src/app/(features)/srt-player/components/atoms/FileInput.tsx b/src/app/(features)/srt-player/components/atoms/FileInput.tsx
index fcf0e43..5145137 100644
--- a/src/app/(features)/srt-player/components/atoms/FileInput.tsx
+++ b/src/app/(features)/srt-player/components/atoms/FileInput.tsx
@@ -1,7 +1,7 @@
"use client";
import React, { useRef } from "react";
-import { Button } from "@/design-system/base/button";
+import { LightButton } from "@/design-system/base/button";
import { FileInputProps } from "../../types/controls";
interface FileInputComponentProps extends FileInputProps {
@@ -34,15 +34,14 @@ export function FileInput({ accept, onFileSelect, disabled, className, children
disabled={disabled}
className="hidden"
/>
-
+
>
);
}
\ No newline at end of file
diff --git a/src/app/folders/FoldersClient.tsx b/src/app/folders/FoldersClient.tsx
index faba006..5d91837 100644
--- a/src/app/folders/FoldersClient.tsx
+++ b/src/app/folders/FoldersClient.tsx
@@ -7,7 +7,7 @@ import {
FolderPlus,
Trash2,
} from "lucide-react";
-import { CircleButton, DashedButton } from "@/design-system/base/button";
+import { CircleButton, LightButton } from "@/design-system/base/button";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
@@ -135,7 +135,7 @@ export function FoldersClient({ userId }: { userId: string; }) {
{/* 新建文件夹按钮 */}
- {
const folderName = prompt(t("enterFolderName"));
if (!folderName) return;
@@ -154,11 +154,11 @@ export function FoldersClient({ userId }: { userId: string; }) {
}
}}
disabled={loading}
- className="w-full"
+ className="w-full border-dashed"
>
{loading ? t("creating") : t("newFolder")}
-
+
{/* 文件夹列表 */}
diff --git a/src/app/folders/[folder_id]/InFolder.tsx b/src/app/folders/[folder_id]/InFolder.tsx
index 1821c23..f13a3c2 100644
--- a/src/app/folders/[folder_id]/InFolder.tsx
+++ b/src/app/folders/[folder_id]/InFolder.tsx
@@ -7,7 +7,7 @@ import { AddTextPairModal } from "./AddTextPairModal";
import { TextPairCard } from "./TextPairCard";
import { useTranslations } from "next-intl";
import { PageLayout } from "@/components/ui/PageLayout";
-import { PrimaryButton, IconButton, LinkButton } from "@/design-system/base/button";
+import { PrimaryButton, CircleButton, LinkButton } from "@/design-system/base/button";
import { CardList } from "@/components/ui/CardList";
import { actionCreatePair, actionDeletePairById, actionGetPairsByFolderId } from "@/modules/folder/folder-aciton";
import { TSharedPair } from "@/shared/folder-type";
@@ -81,12 +81,13 @@ export function InFolder({ folderId, isReadOnly }: { folderId: number; isReadOnl
{t("memorize")}
{!isReadOnly && (
-
{
setAddModal(true);
}}
- icon={}
- />
+ >
+
+
)}
diff --git a/src/components/layout/LanguageSettings.tsx b/src/components/layout/LanguageSettings.tsx
index 64739c4..90ff5a8 100644
--- a/src/components/layout/LanguageSettings.tsx
+++ b/src/components/layout/LanguageSettings.tsx
@@ -15,7 +15,12 @@ export function LanguageSettings() {
};
return (
<>
-
+
+
+
{showLanguageMenu && (
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
index efb798b..24bee35 100644
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -9,20 +9,12 @@ export { Card, type CardVariant, type CardPadding, type CardProps } from '@/desi
export {
Button,
PrimaryButton,
- SecondaryButton,
LightButton,
- SuccessButton,
- WarningButton,
- ErrorButton,
- GhostButton,
GhostLightButton,
- OutlineButton,
LinkButton,
- IconButton,
IconClick,
CircleButton,
CircleToggleButton,
- DashedButton,
type ButtonVariant,
type ButtonSize,
type ButtonProps
diff --git a/src/design-system/base/button/button.tsx b/src/design-system/base/button/button.tsx
index d307e98..58c5c6b 100644
--- a/src/design-system/base/button/button.tsx
+++ b/src/design-system/base/button/button.tsx
@@ -41,7 +41,7 @@ import { cn } from "@/design-system/lib/utils";
*/
const buttonVariants = cva(
// 基础样式
- "border flex-inline items-center justify-center gap-2 rounded-md font-semibold shadow transition-all duration-250 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+ "inline-flex items-center justify-center gap-2 rounded-md font-semibold shadow leading-none transition-all duration-250 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
@@ -56,9 +56,9 @@ const buttonVariants = cva(
link: "text-primary-500 hover:text-primary-600 hover:underline shadow-none px-0",
},
size: {
- sm: "h-8 px-3 text-sm",
- md: "h-10 px-4 text-base",
- lg: "h-12 px-6 text-lg",
+ sm: "px-2.5 py-1.5 text-sm",
+ md: "px-4 py-2 text-base",
+ lg: "px-6 py-3 text-lg",
},
fullWidth: {
true: "w-full",
@@ -248,50 +248,22 @@ export const PrimaryButton = (props: Omit) => (
);
-export const SecondaryButton = (props: Omit) => (
+// LightButton: 次要按钮
+export const LightButton = (props: Omit) => (
);
-// LightButton: 次要按钮的别名(向后兼容)
-export const LightButton = SecondaryButton;
-
-export const SuccessButton = (props: Omit) => (
-
-);
-
-export const WarningButton = (props: Omit) => (
-
-);
-
-export const ErrorButton = (props: Omit) => (
-
-);
-
-export const GhostButton = (props: Omit) => (
-
-);
-
// GhostLightButton: 透明按钮(白色文字,用于深色背景)
export const GhostLightButton = (props: Omit) => (
);
-export const OutlineButton = (props: Omit) => (
-
-);
-
export const LinkButton = (props: Omit) => (
);
// ========== 其他便捷组件 ==========
-// IconButton: SVG 图标按钮(使用 ghost 变体)
-export const IconButton = (props: Omit & { icon?: React.ReactNode }) => {
- const { icon, ...rest } = props;
- return ;
-};
-
// IconClick: 图片图标按钮(支持 Next.js Image)
export const IconClick = (props: Omit & {
src?: string;
@@ -344,8 +316,3 @@ export const CircleToggleButton = (props: Omit & { selec
);
};
-
-// DashedButton: 虚线边框按钮(使用 outline 变体近似)
-export const DashedButton = (props: Omit) => (
-
-);