shadcn 组件一览

Alert Accordion Alert Dialog Aspect Ratio Attachment Avatar Badge Breadcrumb Bubble Button Button Group Calendar Card Carousel Chart Checkbox Collapsible Combobox Command Menu Context Menu Data Table Date Picker Dialog Drawer Dropdown Menu Empty Field Hover Card Input Input Group InputOTP Item KBD Label Marker Menubar Message Message Scroller Native Select Navigation Menu Pagination Popover Progress Radio Group Resizable Scroll Area Select Separator Sheet Sidebar Skeleton Slider Sonner Spinner Switch Table Tabs Textarea Toggle Toggle Group Tooltip Typography

2026年7月3日 · 1 分钟 · 78 字 · Dorianyang

React 遇到的一些知识(Adding...)

字段 ellipsis 意思是 columns 中的当单元格中内容太长,显示… const columns: ColumnsType<FileInfo> = [ { title: '文件名', dataIndex: 'file_name', key: 'file_name', ellipsis: true, render: (text: string) => <Text strong>{text}</Text>, }, { title: '文件大小', dataIndex: 'file_size', key: 'file_size', width: 120, render: (size: number) => formatFileSize(size), }, { title: '上传时间', dataIndex: 'uploaded_at', key: 'uploaded_at', width: 180, render: (date: string) => formatDateTime(date), }, { title: '操作', key: 'actions', width: 220, render: (_, record: FileInfo) => ( <Space size="small"> <Button type="link" icon={<EyeOutlined />} onClick={() => handlePreview(record)} > 预览 </Button> <Button type="link" icon={<DownloadOutlined />} onClick={() => handleDownload(record)} > 下载 </Button> <Button type="link" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)} > 删除 </Button> </Space> ), }, ]; 移动端页面出现偏移 (我们使用 tailwindcss) 在index.css中,用 vite 构建的 react 应用 body 包含两个 css 属性 ...

2025年10月16日 · 2 分钟 · 277 字 · Dorianyang

React报错 The requested module does not provide an export named 'Subtask'

format.ts:1 Uncaught SyntaxError: The requested module ‘/src/types/index.ts’ does not provide an export named ‘Subtask’ (at format.ts:1:10) 添加 type 即可

2025年10月16日 · 1 分钟 · 19 字 · Dorianyang

搭建一个 Vite + React 项目

前期准备 首先你需要安装 node.js,mac 使用如下命令,windows linux 请自查 brew install node 然后全局安装 pnpm(我从来不用 npm,pnpm 是最好的) npm install pnpm -g pnpm -v 然后在项目路径中使用 vite 初始化项目 pnpm create vite . -- --template react-ts 以下是我的一些选择 $ pnpm create vite . -- --template react-ts .../199e71df160-9ee0 | +1 + .../199e71df160-9ee0 | Progress: resolved 1, reused 0, downloaded 1, added 1, done │ ◇ Current directory is not empty. Please choose how to proceed: │ Ignore files and continue │ ◇ Package name: │ iselect-ui │ ◇ Select a framework: │ React │ ◇ Select a variant: │ TypeScript + React Compiler │ ◇ Use rolldown-vite (Experimental)?: │ No │ ◇ Install with pnpm and start now? │ Yes │ ◇ Scaffolding project in /Users/dorian/Documents/Programme/iSelect/iSelect-UI... │ ◇ Installing dependencies with pnpm... VITE v7.1.10 ready in 603 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h + enter to show help 然后进入浏览器打开网址就可以看到啦

2025年10月15日 · 1 分钟 · 147 字 · Dorianyang