From 72ced7866edf8d25299549cfc4376ccfd422a319 Mon Sep 17 00:00:00 2001 From: goddonebianu Date: Tue, 24 Feb 2026 07:56:21 +0800 Subject: [PATCH] flatten folder design-system --- src/app/(auth)/users/[username]/page.tsx | 2 +- src/app/(features)/alphabet/AlphabetCard.tsx | 4 +- src/app/(features)/alphabet/MemoryCard.tsx | 4 +- src/app/(features)/alphabet/page.tsx | 2 +- src/app/(features)/dictionary/SearchForm.tsx | 4 +- .../dictionary/SearchResult.client.tsx | 2 +- .../(features)/memorize/FolderSelector.tsx | 2 +- src/app/(features)/memorize/Memorize.tsx | 2 +- .../srt-player/VideoPlayer/VideoPanel.tsx | 2 +- .../srt-player/components/atoms/FileInput.tsx | 2 +- .../components/atoms/PlayButton.tsx | 2 +- .../components/atoms/SpeedControl.tsx | 2 +- .../components/compounds/ControlBar.tsx | 2 +- .../components/compounds/UploadZone.tsx | 2 +- src/app/(features)/srt-player/page.tsx | 2 +- src/app/(features)/text-speaker/SaveList.tsx | 2 +- src/app/(features)/text-speaker/page.tsx | 4 +- src/app/(features)/translator/page.tsx | 2 +- src/app/folders/FoldersClient.tsx | 2 +- .../folders/[folder_id]/AddTextPairModal.tsx | 4 +- src/app/folders/[folder_id]/InFolder.tsx | 2 +- src/app/folders/[folder_id]/TextPairCard.tsx | 2 +- .../[folder_id]/UpdateTextPairModal.tsx | 4 +- src/components/layout/LanguageSettings.tsx | 2 +- src/components/layout/Navbar.tsx | 2 +- src/components/ui/CardList.tsx | 2 +- src/components/ui/Container.tsx | 4 +- src/components/ui/LocaleSelector.tsx | 6 +- src/components/ui/PageHeader.tsx | 2 +- src/components/ui/PageLayout.tsx | 4 +- src/components/ui/index.ts | 10 +- src/design-system/README.md | 97 +++++++++---------- .../base/{button => }/button.tsx | 0 src/design-system/base/{card => }/card.tsx | 0 .../base/{checkbox => }/checkbox.tsx | 0 src/design-system/base/{input => }/input.tsx | 0 src/design-system/base/{radio => }/radio.tsx | 0 .../base/{select => }/select.tsx | 0 .../base/{switch => }/switch.tsx | 0 .../base/{textarea => }/textarea.tsx | 0 .../data-display/{badge => }/badge.tsx | 0 .../data-display/{divider => }/divider.tsx | 0 .../feedback/{alert => }/alert.tsx | 0 .../feedback/{progress => }/progress.tsx | 0 .../feedback/{skeleton => }/skeleton.tsx | 0 .../feedback/{toast => }/toast.tsx | 2 +- .../layout/{container => }/container.tsx | 0 src/design-system/layout/{grid => }/grid.tsx | 0 .../layout/{stack => }/stack.tsx | 0 .../navigation/{tabs => }/tabs.tsx | 0 .../overlay/{modal => }/modal.tsx | 0 51 files changed, 94 insertions(+), 95 deletions(-) rename src/design-system/base/{button => }/button.tsx (100%) rename src/design-system/base/{card => }/card.tsx (100%) rename src/design-system/base/{checkbox => }/checkbox.tsx (100%) rename src/design-system/base/{input => }/input.tsx (100%) rename src/design-system/base/{radio => }/radio.tsx (100%) rename src/design-system/base/{select => }/select.tsx (100%) rename src/design-system/base/{switch => }/switch.tsx (100%) rename src/design-system/base/{textarea => }/textarea.tsx (100%) rename src/design-system/data-display/{badge => }/badge.tsx (100%) rename src/design-system/data-display/{divider => }/divider.tsx (100%) rename src/design-system/feedback/{alert => }/alert.tsx (100%) rename src/design-system/feedback/{progress => }/progress.tsx (100%) rename src/design-system/feedback/{skeleton => }/skeleton.tsx (100%) rename src/design-system/feedback/{toast => }/toast.tsx (99%) rename src/design-system/layout/{container => }/container.tsx (100%) rename src/design-system/layout/{grid => }/grid.tsx (100%) rename src/design-system/layout/{stack => }/stack.tsx (100%) rename src/design-system/navigation/{tabs => }/tabs.tsx (100%) rename src/design-system/overlay/{modal => }/modal.tsx (100%) diff --git a/src/app/(auth)/users/[username]/page.tsx b/src/app/(auth)/users/[username]/page.tsx index 1feed6c..105f33a 100644 --- a/src/app/(auth)/users/[username]/page.tsx +++ b/src/app/(auth)/users/[username]/page.tsx @@ -1,7 +1,7 @@ import Image from "next/image"; import Link from "next/link"; import { PageLayout } from "@/components/ui/PageLayout"; -import { LightButton, LinkButton } from "@/design-system/base/button/button"; +import { LightButton, LinkButton } from "@/design-system/base/button"; import { actionGetUserProfileByUsername } from "@/modules/auth/auth-action"; import { repoGetFoldersWithTotalPairsByUserId } from "@/modules/folder/folder-repository"; import { notFound } from "next/navigation"; diff --git a/src/app/(features)/alphabet/AlphabetCard.tsx b/src/app/(features)/alphabet/AlphabetCard.tsx index bd04a64..0d5435d 100644 --- a/src/app/(features)/alphabet/AlphabetCard.tsx +++ b/src/app/(features)/alphabet/AlphabetCard.tsx @@ -3,11 +3,11 @@ import { useState, useEffect, useCallback } from "react"; import { useTranslations } from "next-intl"; import { Letter, SupportedAlphabets } from "@/lib/interfaces"; -import { IconClick, CircleToggleButton, CircleButton, PrimaryButton } from "@/design-system/base/button/button"; +import { IconClick, CircleToggleButton, CircleButton, PrimaryButton } from "@/design-system/base/button"; import { IMAGES } from "@/config/images"; import { ChevronLeft, ChevronRight } from "lucide-react"; import { PageLayout } from "@/components/ui/PageLayout"; -import { Card } from "@/design-system/base/card/card"; +import { Card } from "@/design-system/base/card"; interface AlphabetCardProps { alphabet: Letter[]; diff --git a/src/app/(features)/alphabet/MemoryCard.tsx b/src/app/(features)/alphabet/MemoryCard.tsx index 05526f0..faaaf04 100644 --- a/src/app/(features)/alphabet/MemoryCard.tsx +++ b/src/app/(features)/alphabet/MemoryCard.tsx @@ -1,5 +1,5 @@ -import { LightButton } from "@/design-system/base/button/button"; -import { IconClick } from "@/design-system/base/button/button"; +import { LightButton } from "@/design-system/base/button"; +import { IconClick } from "@/design-system/base/button"; import { IMAGES } from "@/config/images"; import { Letter, SupportedAlphabets } from "@/lib/interfaces"; import { diff --git a/src/app/(features)/alphabet/page.tsx b/src/app/(features)/alphabet/page.tsx index 95341ab..c1031a0 100644 --- a/src/app/(features)/alphabet/page.tsx +++ b/src/app/(features)/alphabet/page.tsx @@ -4,7 +4,7 @@ import { useState, useEffect } from "react"; import { useTranslations } from "next-intl"; import { Letter, SupportedAlphabets } from "@/lib/interfaces"; import { PageLayout } from "@/components/ui/PageLayout"; -import { LightButton } from "@/design-system/base/button/button"; +import { LightButton } from "@/design-system/base/button"; import { AlphabetCard } from "./AlphabetCard"; export default function Alphabet() { diff --git a/src/app/(features)/dictionary/SearchForm.tsx b/src/app/(features)/dictionary/SearchForm.tsx index d90e1f8..687b7a9 100644 --- a/src/app/(features)/dictionary/SearchForm.tsx +++ b/src/app/(features)/dictionary/SearchForm.tsx @@ -1,7 +1,7 @@ "use client"; -import { LightButton } from "@/design-system/base/button/button"; -import { Input } from "@/design-system/base/input/input"; +import { LightButton } from "@/design-system/base/button"; +import { Input } from "@/design-system/base/input"; import { useTranslations } from "next-intl"; import { useState } from "react"; import { useRouter } from "next/navigation"; diff --git a/src/app/(features)/dictionary/SearchResult.client.tsx b/src/app/(features)/dictionary/SearchResult.client.tsx index 9dba7a6..97609f2 100644 --- a/src/app/(features)/dictionary/SearchResult.client.tsx +++ b/src/app/(features)/dictionary/SearchResult.client.tsx @@ -1,7 +1,7 @@ "use client"; import { Plus, RefreshCw } from "lucide-react"; -import { CircleButton, LightButton } from "@/design-system/base/button/button"; +import { CircleButton, LightButton } from "@/design-system/base/button"; import { toast } from "sonner"; import { actionCreatePair } from "@/modules/folder/folder-aciton"; import { TSharedItem } from "@/shared/dictionary-type"; diff --git a/src/app/(features)/memorize/FolderSelector.tsx b/src/app/(features)/memorize/FolderSelector.tsx index 05fa429..91c1475 100644 --- a/src/app/(features)/memorize/FolderSelector.tsx +++ b/src/app/(features)/memorize/FolderSelector.tsx @@ -6,7 +6,7 @@ import Link from "next/link"; import { Folder as Fd } from "lucide-react"; import { TSharedFolderWithTotalPairs } from "@/shared/folder-type"; import { PageLayout } from "@/components/ui/PageLayout"; -import { PrimaryButton } from "@/design-system/base/button/button"; +import { PrimaryButton } from "@/design-system/base/button"; interface FolderSelectorProps { folders: TSharedFolderWithTotalPairs[]; diff --git a/src/app/(features)/memorize/Memorize.tsx b/src/app/(features)/memorize/Memorize.tsx index cb62e93..48846da 100644 --- a/src/app/(features)/memorize/Memorize.tsx +++ b/src/app/(features)/memorize/Memorize.tsx @@ -1,7 +1,7 @@ "use client"; import { useState } from "react"; -import { LinkButton, CircleToggleButton, LightButton } from "@/design-system/base/button/button"; +import { LinkButton, CircleToggleButton, LightButton } from "@/design-system/base/button"; import { useAudioPlayer } from "@/hooks/useAudioPlayer"; import { getTTSUrl, TTS_SUPPORTED_LANGUAGES } from "@/lib/bigmodel/tts"; import { useTranslations } from "next-intl"; diff --git a/src/app/(features)/srt-player/VideoPlayer/VideoPanel.tsx b/src/app/(features)/srt-player/VideoPlayer/VideoPanel.tsx index a3aacc0..26db463 100644 --- a/src/app/(features)/srt-player/VideoPlayer/VideoPanel.tsx +++ b/src/app/(features)/srt-player/VideoPlayer/VideoPanel.tsx @@ -1,6 +1,6 @@ import { useState, useRef, forwardRef, useEffect, useCallback } from "react"; import { SubtitleDisplay } from "./SubtitleDisplay"; -import { LightButton } from "@/design-system/base/button/button"; +import { LightButton } from "@/design-system/base/button"; import { RangeInput } from "@/components/ui/RangeInput"; import { getIndex, parseSrt, getNearistIndex } from "../subtitle"; import { useTranslations } from "next-intl"; diff --git a/src/app/(features)/srt-player/components/atoms/FileInput.tsx b/src/app/(features)/srt-player/components/atoms/FileInput.tsx index 9c4c103..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 { LightButton } from "@/design-system/base/button/button"; +import { LightButton } from "@/design-system/base/button"; import { FileInputProps } from "../../types/controls"; interface FileInputComponentProps extends FileInputProps { diff --git a/src/app/(features)/srt-player/components/atoms/PlayButton.tsx b/src/app/(features)/srt-player/components/atoms/PlayButton.tsx index fa1f7fb..32534ef 100644 --- a/src/app/(features)/srt-player/components/atoms/PlayButton.tsx +++ b/src/app/(features)/srt-player/components/atoms/PlayButton.tsx @@ -2,7 +2,7 @@ import React from "react"; import { useTranslations } from "next-intl"; -import { LightButton } from "@/design-system/base/button/button"; +import { LightButton } from "@/design-system/base/button"; import { PlayButtonProps } from "../../types/player"; export function PlayButton({ isPlaying, onToggle, disabled, className }: PlayButtonProps) { diff --git a/src/app/(features)/srt-player/components/atoms/SpeedControl.tsx b/src/app/(features)/srt-player/components/atoms/SpeedControl.tsx index df86a45..d266e92 100644 --- a/src/app/(features)/srt-player/components/atoms/SpeedControl.tsx +++ b/src/app/(features)/srt-player/components/atoms/SpeedControl.tsx @@ -1,7 +1,7 @@ "use client"; import React from "react"; -import { LightButton } from "@/design-system/base/button/button"; +import { LightButton } from "@/design-system/base/button"; import { SpeedControlProps } from "../../types/player"; import { getPlaybackRateOptions, getPlaybackRateLabel } from "../../utils/timeUtils"; diff --git a/src/app/(features)/srt-player/components/compounds/ControlBar.tsx b/src/app/(features)/srt-player/components/compounds/ControlBar.tsx index d4b2ce5..b24470c 100644 --- a/src/app/(features)/srt-player/components/compounds/ControlBar.tsx +++ b/src/app/(features)/srt-player/components/compounds/ControlBar.tsx @@ -3,7 +3,7 @@ import React from "react"; import { useTranslations } from "next-intl"; import { ChevronLeft, ChevronRight, RotateCcw, Pause } from "lucide-react"; -import { LightButton } from "@/design-system/base/button/button"; +import { LightButton } from "@/design-system/base/button"; import { ControlBarProps } from "../../types/controls"; import { PlayButton } from "../atoms/PlayButton"; import { SpeedControl } from "../atoms/SpeedControl"; diff --git a/src/app/(features)/srt-player/components/compounds/UploadZone.tsx b/src/app/(features)/srt-player/components/compounds/UploadZone.tsx index f5d0173..450850e 100644 --- a/src/app/(features)/srt-player/components/compounds/UploadZone.tsx +++ b/src/app/(features)/srt-player/components/compounds/UploadZone.tsx @@ -4,7 +4,7 @@ import React from "react"; import { useTranslations } from "next-intl"; import { toast } from "sonner"; import { Video, FileText } from "lucide-react"; -import { LightButton } from "@/design-system/base/button/button"; +import { LightButton } from "@/design-system/base/button"; import { FileUploadProps } from "../../types/controls"; import { useFileUpload } from "../../hooks/useFileUpload"; diff --git a/src/app/(features)/srt-player/page.tsx b/src/app/(features)/srt-player/page.tsx index 95faf4f..8184861 100644 --- a/src/app/(features)/srt-player/page.tsx +++ b/src/app/(features)/srt-player/page.tsx @@ -15,7 +15,7 @@ import { SubtitleArea } from "./components/compounds/SubtitleArea"; import { ControlBar } from "./components/compounds/ControlBar"; import { UploadZone } from "./components/compounds/UploadZone"; import { SeekBar } from "./components/atoms/SeekBar"; -import { LightButton } from "@/design-system/base/button/button"; +import { LightButton } from "@/design-system/base/button"; export default function SrtPlayerPage() { const t = useTranslations("home"); diff --git a/src/app/(features)/text-speaker/SaveList.tsx b/src/app/(features)/text-speaker/SaveList.tsx index 0e5e4fb..98674f5 100644 --- a/src/app/(features)/text-speaker/SaveList.tsx +++ b/src/app/(features)/text-speaker/SaveList.tsx @@ -6,7 +6,7 @@ import { TextSpeakerArraySchema, TextSpeakerItemSchema, } from "@/lib/interfaces"; -import { IconClick } from "@/design-system/base/button/button"; +import { IconClick } from "@/design-system/base/button"; import { IMAGES } from "@/config/images"; import { useTranslations } from "next-intl"; import { getLocalStorageOperator } from "@/lib/browser/localStorageOperators"; diff --git a/src/app/(features)/text-speaker/page.tsx b/src/app/(features)/text-speaker/page.tsx index 7d2ade4..d683e47 100644 --- a/src/app/(features)/text-speaker/page.tsx +++ b/src/app/(features)/text-speaker/page.tsx @@ -1,7 +1,7 @@ "use client"; -import { LightButton } from "@/design-system/base/button/button"; -import { IconClick } from "@/design-system/base/button/button"; +import { LightButton } from "@/design-system/base/button"; +import { IconClick } from "@/design-system/base/button"; import { IMAGES } from "@/config/images"; import { useAudioPlayer } from "@/hooks/useAudioPlayer"; import { diff --git a/src/app/(features)/translator/page.tsx b/src/app/(features)/translator/page.tsx index 098155d..2cf5f6b 100644 --- a/src/app/(features)/translator/page.tsx +++ b/src/app/(features)/translator/page.tsx @@ -1,6 +1,6 @@ "use client"; -import { LightButton, PrimaryButton, IconClick } from "@/design-system/base/button/button"; +import { LightButton, PrimaryButton, IconClick } from "@/design-system/base/button"; import { IMAGES } from "@/config/images"; import { useAudioPlayer } from "@/hooks/useAudioPlayer"; import { useTranslations } from "next-intl"; diff --git a/src/app/folders/FoldersClient.tsx b/src/app/folders/FoldersClient.tsx index 96ebb4b..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, LightButton } from "@/design-system/base/button/button"; +import { CircleButton, LightButton } from "@/design-system/base/button"; import { useEffect, useState } from "react"; import { useRouter } from "next/navigation"; import { useTranslations } from "next-intl"; diff --git a/src/app/folders/[folder_id]/AddTextPairModal.tsx b/src/app/folders/[folder_id]/AddTextPairModal.tsx index 8a7d151..a76fe69 100644 --- a/src/app/folders/[folder_id]/AddTextPairModal.tsx +++ b/src/app/folders/[folder_id]/AddTextPairModal.tsx @@ -1,5 +1,5 @@ -import { LightButton } from "@/design-system/base/button/button"; -import { Input } from "@/design-system/base/input/input"; +import { LightButton } from "@/design-system/base/button"; +import { Input } from "@/design-system/base/input"; import { LocaleSelector } from "@/components/ui/LocaleSelector"; import { X } from "lucide-react"; import { useRef, useState } from "react"; diff --git a/src/app/folders/[folder_id]/InFolder.tsx b/src/app/folders/[folder_id]/InFolder.tsx index c00e8f7..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, CircleButton, LinkButton } from "@/design-system/base/button/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"; diff --git a/src/app/folders/[folder_id]/TextPairCard.tsx b/src/app/folders/[folder_id]/TextPairCard.tsx index 3eb5daa..03f8a47 100644 --- a/src/app/folders/[folder_id]/TextPairCard.tsx +++ b/src/app/folders/[folder_id]/TextPairCard.tsx @@ -1,6 +1,6 @@ import { Edit, Trash2 } from "lucide-react"; import { useState } from "react"; -import { CircleButton } from "@/design-system/base/button/button"; +import { CircleButton } from "@/design-system/base/button"; import { UpdateTextPairModal } from "./UpdateTextPairModal"; import { useTranslations } from "next-intl"; import { TSharedPair } from "@/shared/folder-type"; diff --git a/src/app/folders/[folder_id]/UpdateTextPairModal.tsx b/src/app/folders/[folder_id]/UpdateTextPairModal.tsx index 9ac6165..cce3032 100644 --- a/src/app/folders/[folder_id]/UpdateTextPairModal.tsx +++ b/src/app/folders/[folder_id]/UpdateTextPairModal.tsx @@ -1,5 +1,5 @@ -import { LightButton } from "@/design-system/base/button/button"; -import { Input } from "@/design-system/base/input/input"; +import { LightButton } from "@/design-system/base/button"; +import { Input } from "@/design-system/base/input"; import { LocaleSelector } from "@/components/ui/LocaleSelector"; import { X } from "lucide-react"; import { useRef, useState } from "react"; diff --git a/src/components/layout/LanguageSettings.tsx b/src/components/layout/LanguageSettings.tsx index c1bdd1b..90ff5a8 100644 --- a/src/components/layout/LanguageSettings.tsx +++ b/src/components/layout/LanguageSettings.tsx @@ -1,6 +1,6 @@ "use client"; -import { GhostLightButton } from "@/design-system/base/button/button"; +import { GhostLightButton } from "@/design-system/base/button"; import { useState } from "react"; import { Languages } from "lucide-react"; diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx index 3a77222..312f09d 100644 --- a/src/components/layout/Navbar.tsx +++ b/src/components/layout/Navbar.tsx @@ -5,7 +5,7 @@ import { LanguageSettings } from "./LanguageSettings"; import { auth } from "@/auth"; import { headers } from "next/headers"; import { getTranslations } from "next-intl/server"; -import { GhostLightButton } from "@/design-system/base/button/button"; +import { GhostLightButton } from "@/design-system/base/button"; export async function Navbar() { const t = await getTranslations("navbar"); diff --git a/src/components/ui/CardList.tsx b/src/components/ui/CardList.tsx index f660431..94b0e04 100644 --- a/src/components/ui/CardList.tsx +++ b/src/components/ui/CardList.tsx @@ -3,7 +3,7 @@ * * 使用 Design System 重写的卡片列表组件 */ -import { VStack } from "@/design-system/layout/stack/stack"; +import { VStack } from "@/design-system/layout/stack"; interface CardListProps { children: React.ReactNode; diff --git a/src/components/ui/Container.tsx b/src/components/ui/Container.tsx index 06bfc6e..5f3a082 100644 --- a/src/components/ui/Container.tsx +++ b/src/components/ui/Container.tsx @@ -3,8 +3,8 @@ * * 使用 Design System 重写的容器组件 */ -import { Container as DSContainer } from "@/design-system/layout/container/container"; -import { Card } from "@/design-system/base/card/card"; +import { Container as DSContainer } from "@/design-system/layout/container"; +import { Card } from "@/design-system/base/card"; interface ContainerProps { children?: React.ReactNode; diff --git a/src/components/ui/LocaleSelector.tsx b/src/components/ui/LocaleSelector.tsx index 2c2c332..bea30b2 100644 --- a/src/components/ui/LocaleSelector.tsx +++ b/src/components/ui/LocaleSelector.tsx @@ -5,9 +5,9 @@ */ import { useTranslations } from "next-intl"; import { useState } from "react"; -import { Input } from "@/design-system/base/input/input"; -import { Select } from "@/design-system/base/select/select"; -import { VStack } from "@/design-system/layout/stack/stack"; +import { Input } from "@/design-system/base/input"; +import { Select } from "@/design-system/base/select"; +import { VStack } from "@/design-system/layout/stack"; const COMMON_LANGUAGES = [ { label: "chinese", value: "chinese" }, diff --git a/src/components/ui/PageHeader.tsx b/src/components/ui/PageHeader.tsx index e634f53..4b17e25 100644 --- a/src/components/ui/PageHeader.tsx +++ b/src/components/ui/PageHeader.tsx @@ -3,7 +3,7 @@ * * 使用 Design System 重写的页面标题组件 */ -import { VStack } from "@/design-system/layout/stack/stack"; +import { VStack } from "@/design-system/layout/stack"; interface PageHeaderProps { title: string; diff --git a/src/components/ui/PageLayout.tsx b/src/components/ui/PageLayout.tsx index 1ba4605..850762f 100644 --- a/src/components/ui/PageLayout.tsx +++ b/src/components/ui/PageLayout.tsx @@ -3,8 +3,8 @@ * * 使用 Design System 重写的页面布局组件 */ -import { Card } from "@/design-system/base/card/card"; -import { Container } from "@/design-system/layout/container/container"; +import { Card } from "@/design-system/base/card"; +import { Container } from "@/design-system/layout/container"; type PageLayoutVariant = "centered-card" | "full-width" | "fullscreen"; diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts index 4126e3b..24bee35 100644 --- a/src/components/ui/index.ts +++ b/src/components/ui/index.ts @@ -2,10 +2,10 @@ // 可以从 '@/components/ui' 导入所有组件 // Design System 组件（向后兼容） -export { Input, type InputVariant, type InputProps } from '@/design-system/base/input/input'; -export { Select, type SelectVariant, type SelectSize, type SelectProps } from '@/design-system/base/select/select'; -export { Textarea, type TextareaVariant, type TextareaProps } from '@/design-system/base/textarea/textarea'; -export { Card, type CardVariant, type CardPadding, type CardProps } from '@/design-system/base/card/card'; +export { Input, type InputVariant, type InputProps } from '@/design-system/base/input'; +export { Select, type SelectVariant, type SelectSize, type SelectProps } from '@/design-system/base/select'; +export { Textarea, type TextareaVariant, type TextareaProps } from '@/design-system/base/textarea'; +export { Card, type CardVariant, type CardPadding, type CardProps } from '@/design-system/base/card'; export { Button, PrimaryButton, @@ -18,7 +18,7 @@ export { type ButtonVariant, type ButtonSize, type ButtonProps -} from '@/design-system/base/button/button'; +} from '@/design-system/base/button'; // 业务特定组件 export { RangeInput } from './RangeInput'; diff --git a/src/design-system/README.md b/src/design-system/README.md index 6b41411..85d8cf8 100644 --- a/src/design-system/README.md +++ b/src/design-system/README.md @@ -6,33 +6,32 @@ ``` src/design-system/ -├── tokens/ # 设计令牌（颜色、间距、字体等） ├── lib/ # 工具函数 ├── base/ # 基础组件 -│ ├── button/ -│ ├── input/ -│ ├── textarea/ -│ ├── card/ -│ ├── checkbox/ -│ ├── radio/ -│ ├── switch/ -│ └── select/ +│ ├── button.tsx +│ ├── input.tsx +│ ├── textarea.tsx +│ ├── card.tsx +│ ├── checkbox.tsx +│ ├── radio.tsx +│ ├── switch.tsx +│ └── select.tsx ├── feedback/ # 反馈组件 -│ ├── alert/ -│ ├── progress/ -│ ├── skeleton/ -│ └── toast/ +│ ├── alert.tsx +│ ├── progress.tsx +│ ├── skeleton.tsx +│ └── toast.tsx ├── overlay/ # 覆盖组件 -│ └── modal/ +│ └── modal.tsx ├── data-display/ # 数据展示组件 -│ ├── badge/ -│ └── divider/ +│ ├── badge.tsx +│ └── divider.tsx ├── layout/ # 布局组件 -│ ├── container/ -│ ├── grid/ -│ └── stack/ -├── navigation/ # 导航组件 -│ └── tabs/ +│ ├── container.tsx +│ ├── grid.tsx +│ └── stack.tsx +└── navigation/ # 导航组件 + └── tabs.tsx ``` ## 快速开始 @@ -47,16 +46,16 @@ pnpm add class-variance-authority clsx tailwind-merge ```tsx // 使用显式导入以获得更好的 tree-shaking -import { Button } from '@/design-system/base/button/button'; -import { Input } from '@/design-system/base/input/input'; -import { Card } from '@/design-system/base/card/card'; +import { Button } from '@/design-system/base/button'; +import { Input } from '@/design-system/base/input'; +import { Card } from '@/design-system/base/card'; ``` ### 使用组件 ```tsx -import { Button } from '@/design-system/base/button/button'; -import { Card } from '@/design-system/base/card/card'; +import { Button } from '@/design-system/base/button'; +import { Card } from '@/design-system/base/card'; export function MyComponent() { return ( @@ -127,7 +126,7 @@ export function MyComponent() { 按钮组件，支持多种变体和尺寸。 ```tsx -import { Button } from '@/design-system/base/button/button'; +import { Button } from '@/design-system/base/button';