# SD Design Vue Docs

- [llms-full.txt](https://sd-design.js.org/llms/llms-full.txt): 聚合后的完整文档文本。

## Overview

- [SD Design](https://sd-design.js.org/): 面向企业级 Vue 项目的简体中文组件文档与设计实践入口。
- [组件总览](https://sd-design.js.org/components/): 按分类浏览全部组件文档。
- [设计指引](https://sd-design.js.org/design/guidelines/): 预留中的设计指引页面，后续会补充布局、配色、组件模式与文案规范。
- [设计价值观](https://sd-design.js.org/design/values/): 预留中的设计价值观页面，后续会补充体验原则与判断标准。
- [LLMs.txt](https://sd-design.js.org/llms_txt/): 面向大语言模型的文档入口与推荐使用方式。

## Guides

- [暗黑模式](https://sd-design.js.org/guides/dark/): 组件库内置暗色的主题，你可以轻易的切换到暗色。
- [常见问题](https://sd-design.js.org/guides/faq/): 组件库使用中的常见问题解答
- [Naive UI 迁移](https://sd-design.js.org/guides/naive-ui-migration/): 从 Naive UI 迁移到 SD Design Vue 的常用组件差异与改造建议。
- [快速上手](https://sd-design.js.org/guides/start/): 跟随以下的步骤，快速上手组件库的使用。
- [样式迁移手册](https://sd-design.js.org/guides/style-migration/): 从 Less 主题覆盖迁移到 Scss + CSS variables + ConfigProvider theme 对象的步骤与风险说明。
- [Tailwind 搭配使用](https://sd-design.js.org/guides/tailwind/): 在 SD Design 组件库中与 Tailwind CSS v3/v4 共存的完整实践，覆盖样式优先级、Layer、Preflight、主题 Token 映射与排障。
- [定制主题](https://sd-design.js.org/guides/theme/): 使用 ConfigProvider 的 theme 对象在运行时覆盖 CSS variables，并统一输出可分享的主题 JSON。
- [主题编辑器](https://sd-design.js.org/guides/theme-editor/): 运行时 theme 对象约定与 JSON 结构说明。
- [虚拟列表迁移](https://sd-design.js.org/guides/virtual-list-migration/): 虚拟列表能力迁移到 vue-virtual-scroller 后的参数、方法与兼容说明。

## Components

- [固钉 Affix](https://sd-design.js.org/llms/components/affix.md): 将页面元素钉在可视范围。当内容区域比较长，需要滚动页面时，固钉可以将内容固定在屏幕上。常用于侧边菜单和按钮组合。
- [警告提示 Alert](https://sd-design.js.org/llms/components/alert.md): 向用户显示警告的信息时，通过警告提示，展现需要关注的信息。
- [锚点 Anchor](https://sd-design.js.org/llms/components/anchor.md): 通过锚点可快速找到信息内容在当前页面的位置。
- [自动补全 AutoComplete](https://sd-design.js.org/llms/components/auto-complete.md): 输入框的自动补全功能。
- [头像 Avatar](https://sd-design.js.org/llms/components/avatar.md): 用作头像显示，可以为图片、图标或字符形式展示。
- [返回顶部 BackTop](https://sd-design.js.org/llms/components/back-top.md): 可一键返回顶部的按钮。
- [徽标数 Badge](https://sd-design.js.org/llms/components/badge.md): 一般出现在图标或文字的右上角。提供及时、重要的信息提示。
- [面包屑 Breadcrumb](https://sd-design.js.org/llms/components/breadcrumb.md): 面包屑是辅助导航模式，用于识别页面在层次结构内的位置，并根据需要向上返回。
- [按钮 Button](https://sd-design.js.org/llms/components/button.md): 按钮是一种命令组件，可发起一个即时操作。
- [日历 Calendar](https://sd-design.js.org/llms/components/calendar.md): 日历组件。
- [卡片 Card](https://sd-design.js.org/llms/components/card.md): 将信息分类后分标题、详情等区域聚合展现，一般作为简洁介绍或者信息的大盘和入口。
- [图片轮播 Carousel](https://sd-design.js.org/llms/components/carousel.md): 用于展示多张图片、视频或内嵌框架等内容的循环播放，支持系统自动播放或用户手动切换。
- [级联选择 Cascader](https://sd-design.js.org/llms/components/cascader.md): 使用多级路径组织选项，适合层级化数据的单选、多选与搜索场景。
- [复选框 Checkbox](https://sd-design.js.org/llms/components/checkbox.md): 在一组数据中，用户可通过复选框选择一个或多个数据。
- [折叠面板 Collapse](https://sd-design.js.org/llms/components/collapse.md): 可以折叠 / 展开的内容区域。
- [颜色选择器 ColorPicker](https://sd-design.js.org/llms/components/color-picker.md): 以 TDesign API 为主的颜色选择器，用于输入、预览和调整颜色。
- [评论 Comment](https://sd-design.js.org/llms/components/comment.md): 展示评论信息
- [全局配置 ConfigProvider](https://sd-design.js.org/llms/components/config-provider.md): 在应用的最外层进行配置，一次设置，全局生效。一般用于设置国际化语言等功能。
- [复制 Copy](https://sd-design.js.org/llms/components/copy.md): 通过链接或按钮触发复制操作。
- [图片裁剪 Cropper](https://sd-design.js.org/llms/components/cropper.md): 基于 cropperjs 的图片裁剪封装，提供选区联动、实例方法和底层元素配置透传。
- [日期选择器 DatePicker](https://sd-design.js.org/llms/components/date-picker.md): 选择日期。支持年、月、周、日类型，支持范围选择等。
- [描述列表 Descriptions](https://sd-design.js.org/llms/components/descriptions.md): 一般用于详情页的信息展示。
- [分割线 Divider](https://sd-design.js.org/llms/components/divider.md): 划分内容区域，对模块做分隔。
- [抽屉 Drawer](https://sd-design.js.org/llms/components/drawer.md): 触发命令后，从屏幕一侧滑出的抽屉式的面板。
- [下拉菜单 Dropdown](https://sd-design.js.org/llms/components/dropdown.md): 页面上的命令过多时，可将备选命令收纳到向下展开的浮层容器中。
- [文本省略 Ellipsis](https://sd-design.js.org/llms/components/ellipsis.md): 在有限空间内展示较长文本，并在内容被截断时提供提示或展开能力。
- [空状态 Empty](https://sd-design.js.org/llms/components/empty.md): 指当前场景没有对应的数据内容，呈现出的一种状态。
- [表单 Form](https://sd-design.js.org/llms/components/form.md): 具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。
- [栅格 Grid](https://sd-design.js.org/llms/components/grid.md): 栅格可以有效的保证页面的一致性、逻辑性、加强团队协作和统一。
- [图片 Image](https://sd-design.js.org/llms/components/image.md): 展示和预览图片。
- [输入框 Input](https://sd-design.js.org/llms/components/input.md): 基本表单组件，并在原生控件基础上进行了功能扩展，可以组合使用。
- [数字输入框 InputNumber](https://sd-design.js.org/llms/components/input-number.md): 仅允许输入数字格式的输入框。
- [标签输入框 InputTag](https://sd-design.js.org/llms/components/input-tag.md): 用来输入标签。
- [JSON 表单 JsonForm](https://sd-design.js.org/llms/components/json-form.md): 用声明式 schema 快速生成表单，同时支持 A2UI 配置翻译和通过 ConfigProvider 注入业务自定义字段组件。
- [布局 Layout](https://sd-design.js.org/llms/components/layout.md): 页面的基础布局框架，常与组件嵌套使用，构建页面整体布局。
- [链接 Link](https://sd-design.js.org/llms/components/link.md): 链接的基本样式。
- [列表 List](https://sd-design.js.org/llms/components/list.md): 最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。
- [提及 Mention](https://sd-design.js.org/llms/components/mention.md): 用于在输入中提及某人或某事，常用于发布、聊天或评论功能。
- [菜单 Menu](https://sd-design.js.org/llms/components/menu.md): 收纳、排列并展示一系列选项的列表。
- [全局提示 Message](https://sd-design.js.org/llms/components/message.md): 由用户的操作触发的轻量级全局反馈。
- [Modal 对话框](https://sd-design.js.org/llms/components/modal.md): 在当前页面打开一个浮层，承载相关操作。
- [通知提醒框 Notification](https://sd-design.js.org/llms/components/notification.md): 全局展示通知提醒，将信息及时有效的传达给用户。
- [折叠列表 OverflowList](https://sd-design.js.org/llms/components/overflow-list.md): 无描述。
- [页头 PageHeader](https://sd-design.js.org/llms/components/page-header.md): 页头位于页容器顶部，起到了内容概览和引导页级操作的作用。包括面包屑、标题等内容。
- [分页 Pagination](https://sd-design.js.org/llms/components/pagination.md): 采用分页控制单页内的信息数量，也可进行页面跳转。
- [气泡确认框 Popconfirm](https://sd-design.js.org/llms/components/popconfirm.md): 点击元素，弹出气泡式的确认框。
- [气泡卡片 Popover](https://sd-design.js.org/llms/components/popover.md): 鼠标悬停、聚焦或点击在某个组件时，弹出的气泡式的卡片浮层。可以对卡片上的元素进行操作。
- [进度条 Progress](https://sd-design.js.org/llms/components/progress.md): 给予用户当前系统执行中任务运行状态的反馈，多用于运行一段时间的场景，有效减轻用户在等待中产生的焦虑感。
- [二维码 QrCode](https://sd-design.js.org/llms/components/qr-code.md): 将文本快速转换为二维码，支持状态覆盖、中心图标和 SVG 或 Canvas 两种渲染方式。
- [单选框 Radio](https://sd-design.js.org/llms/components/radio.md): 在一组相关且互斥数据中，用户仅能选择一个选项。
- [评分 Rate](https://sd-design.js.org/llms/components/rate.md): 用于评分或打星的组件。
- [伸缩框 ResizeBox](https://sd-design.js.org/llms/components/resize-box.md): 伸缩框组件。
- [结果页 Result](https://sd-design.js.org/llms/components/result.md): 用于反馈一系列操作任务的处理结果，当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用。
- [滚动条 Scrollbar](https://sd-design.js.org/llms/components/scrollbar.md): 用于替换浏览器默认滚动条样式。
- [敏感信息 Secret](https://sd-design.js.org/llms/components/secret.md): 对敏感文本提供显示、隐藏和复制操作。
- [选择器 Select](https://sd-design.js.org/llms/components/select.md): 当用户需要从一组同类数据中选择一个或多个时，可以使用下拉选择器，点击后选择对应项。
- [骨架屏 Skeleton](https://sd-design.js.org/llms/components/skeleton.md): 将加载中的数据用灰色占位。
- [滑动输入条 Slider](https://sd-design.js.org/llms/components/slider.md): 滑动型输入器，展示当前值和可选范围。
- [间距 Space](https://sd-design.js.org/llms/components/space.md): 设置组件之间的间距
- [加载中 Spin](https://sd-design.js.org/llms/components/spin.md): 用于页面和区块的加载中状态 - 页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。
- [面板分割 Split](https://sd-design.js.org/llms/components/split.md): 将面板分割成两部分。
- [数值显示 Statistic](https://sd-design.js.org/llms/components/statistic.md): 突出展示某个或某组数字、带描述的统计类数据。
- [步骤条 Steps](https://sd-design.js.org/llms/components/steps.md): 明示任务流程和当前完成程度，引导用户按照步骤完成任务。
- [开关 Switch](https://sd-design.js.org/llms/components/switch.md): 互斥性的操作控件，用户可打开或关闭某个功能。
- [表格 Table](https://sd-design.js.org/llms/components/table.md): 用于数据收集展示、分析整理、操作处理。
- [标签页 Tabs](https://sd-design.js.org/llms/components/tabs.md): 将内容组织同一视图中，一次可查看一个视图内容，查看其他内容可切换选项卡查看。
- [标签 Tag](https://sd-design.js.org/llms/components/tag.md): 用于信息的选择、筛选、分类。用户通过标签进行信息反馈和交互操作。
- [标签组 TagGroup](https://sd-design.js.org/llms/components/tag-group.md): 用于展示一组标签项，并在数量过多时自动折叠为计数入口。
- [文本域 Textarea](https://sd-design.js.org/llms/components/textarea.md): 多行纯文本编辑控件，适用于评论或反馈表单中的一段意见。
- [主题容器 ThemeProvider](https://sd-design.js.org/llms/components/theme-provider.md): 独立的局部主题容器组件，在子树内注入主题模式与运行时 theme 变量。
- [时间选择器 TimePicker](https://sd-design.js.org/llms/components/time-picker.md): 在弹出面板上选择时间，以便捷完成时间输入的控件。
- [时间轴 Timeline](https://sd-design.js.org/llms/components/timeline.md): 按照时间顺序或倒序规则的展示信息内容。
- [文字气泡 Tooltip](https://sd-design.js.org/llms/components/tooltip.md): 鼠标悬停、聚焦或点击在某个组件时，弹出的文字提示。
- [数据穿梭框 Transfer](https://sd-design.js.org/llms/components/transfer.md): 两栏布局的多选组件，将元素从一栏即时移到另一栏。
- [树 Tree](https://sd-design.js.org/llms/components/tree.md): 对于文件夹、分类目录、组织架构等层级较多的内容，树可以清楚显示他们的层级关系，并具有展开、收起、选择等交互功能。
- [树选择 TreeSelect](https://sd-design.js.org/llms/components/tree-select.md): 可以对树形结构数据进行选择。
- [触发器 Trigger](https://sd-design.js.org/llms/components/trigger.md): 用于对元素添加 hover, click, focus 等事件，并且弹出下拉框。
- [排版 Typography](https://sd-design.js.org/llms/components/typography.md): 用于展示标题、段落、文本内容。
- [上传 Upload](https://sd-design.js.org/llms/components/upload.md): 用户可传输文件或提交相应的内容。
- [验证码输入 VerificationCode](https://sd-design.js.org/llms/components/verification-code.md): 验证码输入组件
- [水印 Watermark](https://sd-design.js.org/llms/components/watermark.md): 用于给页面的指定区域加上水印。