remove all index.ts
This commit is contained in:
@@ -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";
|
||||
import { LightButton, LinkButton } from "@/design-system/base/button/button";
|
||||
import { actionGetUserProfileByUsername } from "@/modules/auth/auth-action";
|
||||
import { repoGetFoldersWithTotalPairsByUserId } from "@/modules/folder/folder-repository";
|
||||
import { notFound } from "next/navigation";
|
||||
|
||||
@@ -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";
|
||||
import { IconClick, CircleToggleButton, CircleButton, PrimaryButton } from "@/design-system/base/button/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";
|
||||
import { Card } from "@/design-system/base/card/card";
|
||||
|
||||
interface AlphabetCardProps {
|
||||
alphabet: Letter[];
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { LightButton } from "@/design-system/base/button";
|
||||
import { IconClick } from "@/design-system/base/button";
|
||||
import { LightButton } from "@/design-system/base/button/button";
|
||||
import { IconClick } from "@/design-system/base/button/button";
|
||||
import { IMAGES } from "@/config/images";
|
||||
import { Letter, SupportedAlphabets } from "@/lib/interfaces";
|
||||
import {
|
||||
|
||||
@@ -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";
|
||||
import { LightButton } from "@/design-system/base/button/button";
|
||||
import { AlphabetCard } from "./AlphabetCard";
|
||||
|
||||
export default function Alphabet() {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { LightButton } from "@/design-system/base/button";
|
||||
import { Input } from "@/design-system/base/input";
|
||||
import { LightButton } from "@/design-system/base/button/button";
|
||||
import { Input } from "@/design-system/base/input/input";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { Plus, RefreshCw } from "lucide-react";
|
||||
import { CircleButton, LightButton } from "@/design-system/base/button";
|
||||
import { CircleButton, LightButton } from "@/design-system/base/button/button";
|
||||
import { toast } from "sonner";
|
||||
import { actionCreatePair } from "@/modules/folder/folder-aciton";
|
||||
import { TSharedItem } from "@/shared/dictionary-type";
|
||||
|
||||
@@ -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";
|
||||
import { PrimaryButton } from "@/design-system/base/button/button";
|
||||
|
||||
interface FolderSelectorProps {
|
||||
folders: TSharedFolderWithTotalPairs[];
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { LinkButton, CircleToggleButton, LightButton } from "@/design-system/base/button";
|
||||
import { LinkButton, CircleToggleButton, LightButton } from "@/design-system/base/button/button";
|
||||
import { useAudioPlayer } from "@/hooks/useAudioPlayer";
|
||||
import { getTTSUrl, TTS_SUPPORTED_LANGUAGES } from "@/lib/bigmodel/tts";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useState, useRef, forwardRef, useEffect, useCallback } from "react";
|
||||
import { SubtitleDisplay } from "./SubtitleDisplay";
|
||||
import { LightButton } from "@/design-system/base/button";
|
||||
import { LightButton } from "@/design-system/base/button/button";
|
||||
import { RangeInput } from "@/components/ui/RangeInput";
|
||||
import { getIndex, parseSrt, getNearistIndex } from "../subtitle";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import React, { useRef } from "react";
|
||||
import { LightButton } from "@/design-system/base/button";
|
||||
import { LightButton } from "@/design-system/base/button/button";
|
||||
import { FileInputProps } from "../../types/controls";
|
||||
|
||||
interface FileInputComponentProps extends FileInputProps {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import React from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { LightButton } from "@/design-system/base/button";
|
||||
import { LightButton } from "@/design-system/base/button/button";
|
||||
import { PlayButtonProps } from "../../types/player";
|
||||
|
||||
export function PlayButton({ isPlaying, onToggle, disabled, className }: PlayButtonProps) {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { LightButton } from "@/design-system/base/button";
|
||||
import { LightButton } from "@/design-system/base/button/button";
|
||||
import { SpeedControlProps } from "../../types/player";
|
||||
import { getPlaybackRateOptions, getPlaybackRateLabel } from "../../utils/timeUtils";
|
||||
|
||||
|
||||
@@ -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";
|
||||
import { LightButton } from "@/design-system/base/button/button";
|
||||
import { ControlBarProps } from "../../types/controls";
|
||||
import { PlayButton } from "../atoms/PlayButton";
|
||||
import { SpeedControl } from "../atoms/SpeedControl";
|
||||
|
||||
@@ -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";
|
||||
import { LightButton } from "@/design-system/base/button/button";
|
||||
import { FileUploadProps } from "../../types/controls";
|
||||
import { useFileUpload } from "../../hooks/useFileUpload";
|
||||
|
||||
|
||||
@@ -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";
|
||||
import { LightButton } from "@/design-system/base/button/button";
|
||||
|
||||
export default function SrtPlayerPage() {
|
||||
const t = useTranslations("home");
|
||||
|
||||
@@ -6,7 +6,7 @@ import {
|
||||
TextSpeakerArraySchema,
|
||||
TextSpeakerItemSchema,
|
||||
} from "@/lib/interfaces";
|
||||
import { IconClick } from "@/design-system/base/button";
|
||||
import { IconClick } from "@/design-system/base/button/button";
|
||||
import { IMAGES } from "@/config/images";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { getLocalStorageOperator } from "@/lib/browser/localStorageOperators";
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { LightButton } from "@/design-system/base/button";
|
||||
import { IconClick } from "@/design-system/base/button";
|
||||
import { LightButton } from "@/design-system/base/button/button";
|
||||
import { IconClick } from "@/design-system/base/button/button";
|
||||
import { IMAGES } from "@/config/images";
|
||||
import { useAudioPlayer } from "@/hooks/useAudioPlayer";
|
||||
import {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { LightButton, PrimaryButton, IconClick } from "@/design-system/base/button";
|
||||
import { LightButton, PrimaryButton, IconClick } from "@/design-system/base/button/button";
|
||||
import { IMAGES } from "@/config/images";
|
||||
import { useAudioPlayer } from "@/hooks/useAudioPlayer";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
@@ -7,7 +7,7 @@ import {
|
||||
FolderPlus,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import { CircleButton, LightButton } from "@/design-system/base/button";
|
||||
import { CircleButton, LightButton } from "@/design-system/base/button/button";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { LightButton } from "@/design-system/base/button";
|
||||
import { Input } from "@/design-system/base/input";
|
||||
import { LightButton } from "@/design-system/base/button/button";
|
||||
import { Input } from "@/design-system/base/input/input";
|
||||
import { LocaleSelector } from "@/components/ui/LocaleSelector";
|
||||
import { X } from "lucide-react";
|
||||
import { useRef, useState } from "react";
|
||||
|
||||
@@ -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";
|
||||
import { PrimaryButton, CircleButton, LinkButton } from "@/design-system/base/button/button";
|
||||
import { CardList } from "@/components/ui/CardList";
|
||||
import { actionCreatePair, actionDeletePairById, actionGetPairsByFolderId } from "@/modules/folder/folder-aciton";
|
||||
import { TSharedPair } from "@/shared/folder-type";
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Edit, Trash2 } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { CircleButton } from "@/design-system/base/button";
|
||||
import { CircleButton } from "@/design-system/base/button/button";
|
||||
import { UpdateTextPairModal } from "./UpdateTextPairModal";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { TSharedPair } from "@/shared/folder-type";
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { LightButton } from "@/design-system/base/button";
|
||||
import { Input } from "@/design-system/base/input";
|
||||
import { LightButton } from "@/design-system/base/button/button";
|
||||
import { Input } from "@/design-system/base/input/input";
|
||||
import { LocaleSelector } from "@/components/ui/LocaleSelector";
|
||||
import { X } from "lucide-react";
|
||||
import { useRef, useState } from "react";
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { GhostLightButton } from "@/design-system/base/button";
|
||||
import { GhostLightButton } from "@/design-system/base/button/button";
|
||||
import { useState } from "react";
|
||||
import { Languages } from "lucide-react";
|
||||
|
||||
|
||||
@@ -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";
|
||||
import { GhostLightButton } from "@/design-system/base/button/button";
|
||||
|
||||
export async function Navbar() {
|
||||
const t = await getTranslations("navbar");
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
*
|
||||
* 使用 Design System 重写的卡片列表组件
|
||||
*/
|
||||
import { VStack } from "@/design-system/layout/stack";
|
||||
import { VStack } from "@/design-system/layout/stack/stack";
|
||||
|
||||
interface CardListProps {
|
||||
children: React.ReactNode;
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
*
|
||||
* 使用 Design System 重写的容器组件
|
||||
*/
|
||||
import { Container as DSContainer } from "@/design-system/layout/container";
|
||||
import { Card } from "@/design-system/base/card";
|
||||
import { Container as DSContainer } from "@/design-system/layout/container/container";
|
||||
import { Card } from "@/design-system/base/card/card";
|
||||
|
||||
interface ContainerProps {
|
||||
children?: React.ReactNode;
|
||||
|
||||
@@ -5,9 +5,9 @@
|
||||
*/
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useState } from "react";
|
||||
import { Input } from "@/design-system/base/input";
|
||||
import { Select } from "@/design-system/base/select";
|
||||
import { VStack } from "@/design-system/layout/stack";
|
||||
import { Input } from "@/design-system/base/input/input";
|
||||
import { Select } from "@/design-system/base/select/select";
|
||||
import { VStack } from "@/design-system/layout/stack/stack";
|
||||
|
||||
const COMMON_LANGUAGES = [
|
||||
{ label: "chinese", value: "chinese" },
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
*
|
||||
* 使用 Design System 重写的页面标题组件
|
||||
*/
|
||||
import { VStack } from "@/design-system/layout/stack";
|
||||
import { VStack } from "@/design-system/layout/stack/stack";
|
||||
|
||||
interface PageHeaderProps {
|
||||
title: string;
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
*
|
||||
* 使用 Design System 重写的页面布局组件
|
||||
*/
|
||||
import { Card } from "@/design-system/base/card";
|
||||
import { Container } from "@/design-system/layout/container";
|
||||
import { Card } from "@/design-system/base/card/card";
|
||||
import { Container } from "@/design-system/layout/container/container";
|
||||
|
||||
type PageLayoutVariant = "centered-card" | "full-width" | "fullscreen";
|
||||
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
// 可以从 '@/components/ui' 导入所有组件
|
||||
|
||||
// Design System 组件(向后兼容)
|
||||
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 { 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 {
|
||||
Button,
|
||||
PrimaryButton,
|
||||
@@ -18,7 +18,7 @@ export {
|
||||
type ButtonVariant,
|
||||
type ButtonSize,
|
||||
type ButtonProps
|
||||
} from '@/design-system/base/button';
|
||||
} from '@/design-system/base/button/button';
|
||||
|
||||
// 业务特定组件
|
||||
export { RangeInput } from './RangeInput';
|
||||
|
||||
@@ -47,16 +47,16 @@ pnpm add class-variance-authority clsx tailwind-merge
|
||||
|
||||
```tsx
|
||||
// 使用显式导入以获得更好的 tree-shaking
|
||||
import { Button } from '@/design-system/base/button';
|
||||
import { Input } from '@/design-system/base/input';
|
||||
import { Card } from '@/design-system/base/card';
|
||||
import { Button } from '@/design-system/base/button/button';
|
||||
import { Input } from '@/design-system/base/input/input';
|
||||
import { Card } from '@/design-system/base/card/card';
|
||||
```
|
||||
|
||||
### 使用组件
|
||||
|
||||
```tsx
|
||||
import { Button } from '@/design-system/base/button';
|
||||
import { Card } from '@/design-system/base/card';
|
||||
import { Button } from '@/design-system/base/button/button';
|
||||
import { Card } from '@/design-system/base/card/card';
|
||||
|
||||
export function MyComponent() {
|
||||
return (
|
||||
@@ -127,7 +127,7 @@ export function MyComponent() {
|
||||
按钮组件,支持多种变体和尺寸。
|
||||
|
||||
```tsx
|
||||
import { Button } from '@/design-system/base/button';
|
||||
import { Button } from '@/design-system/base/button/button';
|
||||
|
||||
<Button variant="primary" size="md" onClick={handleClick}>
|
||||
点击我
|
||||
@@ -145,7 +145,7 @@ import { Button } from '@/design-system/base/button';
|
||||
输入框组件。
|
||||
|
||||
```tsx
|
||||
import { Input } from '@/design-system/base/input';
|
||||
import { Input } from '@/design-system/base/input/input';
|
||||
|
||||
<Input
|
||||
variant="bordered"
|
||||
@@ -163,7 +163,7 @@ import { Input } from '@/design-system/base/input';
|
||||
多行文本输入组件。
|
||||
|
||||
```tsx
|
||||
import { Textarea } from '@/design-system/base/textarea';
|
||||
import { Textarea } from '@/design-system/base/textarea/textarea';
|
||||
|
||||
<Textarea
|
||||
variant="bordered"
|
||||
@@ -179,7 +179,7 @@ import { Textarea } from '@/design-system/base/textarea';
|
||||
卡片容器组件。
|
||||
|
||||
```tsx
|
||||
import { Card, CardHeader, CardTitle, CardBody, CardFooter } from '@/design-system/base/card';
|
||||
import { Card, CardHeader, CardTitle, CardBody, CardFooter } from '@/design-system/base/card/card';
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
@@ -203,7 +203,7 @@ import { Card, CardHeader, CardTitle, CardBody, CardFooter } from '@/design-syst
|
||||
复选框组件。
|
||||
|
||||
```tsx
|
||||
import { Checkbox } from '@/design-system/base/checkbox';
|
||||
import { Checkbox } from '@/design-system/base/checkbox/checkbox';
|
||||
|
||||
<Checkbox checked={checked} onChange={setChecked}>
|
||||
同意条款
|
||||
@@ -215,7 +215,7 @@ import { Checkbox } from '@/design-system/base/checkbox';
|
||||
单选按钮组件。
|
||||
|
||||
```tsx
|
||||
import { Radio, RadioGroup } from '@/design-system/base/radio';
|
||||
import { Radio, RadioGroup } from '@/design-system/base/radio/radio';
|
||||
|
||||
<RadioGroup name="choice" value={value} onChange={setValue}>
|
||||
<Radio value="1">选项 1</Radio>
|
||||
@@ -228,7 +228,7 @@ import { Radio, RadioGroup } from '@/design-system/base/radio';
|
||||
开关组件。
|
||||
|
||||
```tsx
|
||||
import { Switch } from '@/design-system/base/switch';
|
||||
import { Switch } from '@/design-system/base/switch/switch';
|
||||
|
||||
<Switch checked={enabled} onChange={setEnabled} />
|
||||
```
|
||||
@@ -238,7 +238,7 @@ import { Switch } from '@/design-system/base/switch';
|
||||
警告提示组件。
|
||||
|
||||
```tsx
|
||||
import { Alert } from '@/design-system/feedback/alert';
|
||||
import { Alert } from '@/design-system/feedback/alert/alert';
|
||||
|
||||
<Alert variant="success" title="成功">
|
||||
操作成功完成
|
||||
@@ -252,7 +252,7 @@ import { Alert } from '@/design-system/feedback/alert';
|
||||
进度条组件。
|
||||
|
||||
```tsx
|
||||
import { Progress } from '@/design-system/feedback/progress';
|
||||
import { Progress } from '@/design-system/feedback/progress/progress';
|
||||
|
||||
<Progress value={60} showLabel />
|
||||
```
|
||||
@@ -262,7 +262,7 @@ import { Progress } from '@/design-system/feedback/progress';
|
||||
骨架屏组件。
|
||||
|
||||
```tsx
|
||||
import { Skeleton, TextSkeleton, CardSkeleton } from '@/design-system/feedback/skeleton';
|
||||
import { Skeleton, TextSkeleton, CardSkeleton } from '@/design-system/feedback/skeleton/skeleton';
|
||||
|
||||
<Skeleton className="h-4 w-32" />
|
||||
<TextSkeleton lines={3} />
|
||||
@@ -274,7 +274,7 @@ import { Skeleton, TextSkeleton, CardSkeleton } from '@/design-system/feedback/s
|
||||
通知提示组件(基于 sonner)。
|
||||
|
||||
```tsx
|
||||
import { toast } from '@/design-system/feedback/toast';
|
||||
import { toast } from '@/design-system/feedback/toast/toast';
|
||||
|
||||
toast.success("操作成功!");
|
||||
toast.error("发生错误");
|
||||
@@ -290,7 +290,7 @@ toast.promise(promise, {
|
||||
模态框组件。
|
||||
|
||||
```tsx
|
||||
import { Modal } from '@/design-system/overlay/modal';
|
||||
import { Modal } from '@/design-system/overlay/modal/modal';
|
||||
|
||||
<Modal open={open} onClose={() => setOpen(false)}>
|
||||
<Modal.Header>
|
||||
@@ -313,7 +313,7 @@ import { Modal } from '@/design-system/overlay/modal';
|
||||
徽章组件。
|
||||
|
||||
```tsx
|
||||
import { Badge } from '@/design-system/data-display/badge';
|
||||
import { Badge } from '@/design-system/data-display/badge/badge';
|
||||
|
||||
<Badge variant="success">成功</Badge>
|
||||
<Badge dot />
|
||||
@@ -326,7 +326,7 @@ import { Badge } from '@/design-system/data-display/badge';
|
||||
分隔线组件。
|
||||
|
||||
```tsx
|
||||
import { Divider } from '@/design-system/data-display/divider';
|
||||
import { Divider } from '@/design-system/data-display/divider/divider';
|
||||
|
||||
<Divider />
|
||||
<Divider>或者</Divider>
|
||||
@@ -338,7 +338,7 @@ import { Divider } from '@/design-system/data-display/divider';
|
||||
容器组件。
|
||||
|
||||
```tsx
|
||||
import { Container } from '@/design-system/layout/container';
|
||||
import { Container } from '@/design-system/layout/container/container';
|
||||
|
||||
<Container size="lg" padding="xl">
|
||||
<p>内容</p>
|
||||
@@ -350,7 +350,7 @@ import { Container } from '@/design-system/layout/container';
|
||||
网格布局组件。
|
||||
|
||||
```tsx
|
||||
import { Grid } from '@/design-system/layout/grid';
|
||||
import { Grid } from '@/design-system/layout/grid/grid';
|
||||
|
||||
<Grid cols={3} gap={4}>
|
||||
<div>项目 1</div>
|
||||
@@ -364,7 +364,7 @@ import { Grid } from '@/design-system/layout/grid';
|
||||
堆叠布局组件。
|
||||
|
||||
```tsx
|
||||
import { Stack, VStack, HStack } from '@/design-system/layout/stack';
|
||||
import { Stack, VStack, HStack } from '@/design-system/layout/stack/stack';
|
||||
|
||||
<VStack gap={4}>
|
||||
<div>项目 1</div>
|
||||
@@ -377,7 +377,7 @@ import { Stack, VStack, HStack } from '@/design-system/layout/stack';
|
||||
标签页组件。
|
||||
|
||||
```tsx
|
||||
import { Tabs } from '@/design-system/navigation/tabs';
|
||||
import { Tabs } from '@/design-system/navigation/tabs/tabs';
|
||||
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
||||
<Tabs.List>
|
||||
@@ -398,7 +398,7 @@ import { Tabs } from '@/design-system/navigation/tabs';
|
||||
### 颜色
|
||||
|
||||
```tsx
|
||||
import { colors } from '@/design-system/tokens';
|
||||
import { colors } from '@/design-system/tokens/colors';
|
||||
|
||||
// 主色
|
||||
colors.primary.500 // #35786f
|
||||
@@ -478,9 +478,9 @@ const className = cn(
|
||||
|
||||
```tsx
|
||||
// ✅ 使用显式导入
|
||||
import { Button } from '@/design-system/base/button';
|
||||
import { Input } from '@/design-system/base/input';
|
||||
import { Card } from '@/design-system/base/card';
|
||||
import { Button } from '@/design-system/base/button/button';
|
||||
import { Input } from '@/design-system/base/input/input';
|
||||
import { Card } from '@/design-system/base/card/card';
|
||||
```
|
||||
|
||||
### 2. 样式覆盖
|
||||
@@ -532,8 +532,8 @@ import { Input } from '@/components/ui/Input';
|
||||
新的组件路径:
|
||||
|
||||
```tsx
|
||||
import { Button } from '@/design-system/base/button';
|
||||
import { Input } from '@/design-system/base/input';
|
||||
import { Button } from '@/design-system/base/button/button';
|
||||
import { Input } from '@/design-system/base/input/input';
|
||||
```
|
||||
|
||||
### API 变化
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export * from './button';
|
||||
@@ -1 +0,0 @@
|
||||
export * from './card';
|
||||
@@ -1 +0,0 @@
|
||||
export * from './checkbox';
|
||||
@@ -1 +0,0 @@
|
||||
export * from './input';
|
||||
@@ -1 +0,0 @@
|
||||
export * from './radio';
|
||||
@@ -1 +0,0 @@
|
||||
export * from './select';
|
||||
@@ -1 +0,0 @@
|
||||
export * from './switch';
|
||||
@@ -1 +0,0 @@
|
||||
export * from './textarea';
|
||||
@@ -1 +0,0 @@
|
||||
export * from './badge';
|
||||
@@ -1 +0,0 @@
|
||||
export * from './divider';
|
||||
@@ -1 +0,0 @@
|
||||
export * from './alert';
|
||||
@@ -1 +0,0 @@
|
||||
export * from './progress';
|
||||
@@ -1 +0,0 @@
|
||||
export * from './skeleton';
|
||||
@@ -1 +0,0 @@
|
||||
export * from './toast';
|
||||
@@ -1 +0,0 @@
|
||||
export * from './container';
|
||||
@@ -1 +0,0 @@
|
||||
export * from './grid';
|
||||
@@ -1 +0,0 @@
|
||||
export * from './stack';
|
||||
@@ -1 +0,0 @@
|
||||
export * from './tabs';
|
||||
@@ -1 +0,0 @@
|
||||
export * from './modal';
|
||||
@@ -1,38 +0,0 @@
|
||||
/**
|
||||
* Design System 设计令牌统一导出
|
||||
*
|
||||
* 包含所有设计系统的原始令牌
|
||||
*/
|
||||
|
||||
export * from './colors';
|
||||
export * from './spacing';
|
||||
export * from './typography';
|
||||
export * from './borders';
|
||||
export * from './shadows';
|
||||
|
||||
import type { Colors } from './colors';
|
||||
|
||||
/**
|
||||
* 完整的设计令牌类型
|
||||
*/
|
||||
export interface DesignTokens {
|
||||
colors: Colors;
|
||||
spacing: typeof import('./spacing').spacing;
|
||||
semanticSpacing: typeof import('./spacing').semanticSpacing;
|
||||
sizes: typeof import('./spacing').sizes;
|
||||
fontFamily: typeof import('./typography').fontFamily;
|
||||
fontSize: typeof import('./typography').fontSize;
|
||||
fontWeight: typeof import('./typography').fontWeight;
|
||||
letterSpacing: typeof import('./typography').letterSpacing;
|
||||
typography: typeof import('./typography').typography;
|
||||
borderRadius: typeof import('./borders').borderRadius;
|
||||
borderWidth: typeof import('./borders').borderWidth;
|
||||
boxShadow: typeof import('./shadows').boxShadow;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设计令牌常量(供 TypeScript 类型使用)
|
||||
*/
|
||||
export const tokens = {
|
||||
colors: {} as Colors,
|
||||
} as const;
|
||||
Reference in New Issue
Block a user