# @vaebe/ccui > Vue 3 + TypeScript 组件库，视觉对齐 Ant Design v6.3.7。83+ 组件、SeedToken/MapToken 双层主题、内置 zhCN/enUS/jaJP/koKR i18n、暗色模式、可访问性审计。所有组件统一以 `c-` 前缀使用（例如 ``）。 本文件遵循 [llms.txt](https://llmstxt.org) 规范，便于 AI agent / IDE 内 Copilot 检索 ccui 的组件能力。完整文档见同目录的 `llms-full.txt`。 ## 入门 - [简介与安装](https://vaebe.github.io/ccui/introduce.html)：包管理器安装、CDN 引入、完整 / 按需引入、unplugin-vue-components resolver、主题 Token。 - [贡献者](https://vaebe.github.io/ccui/team.html)：项目维护者列表。 ## 组件 - [Affix 固钉](https://vaebe.github.io/ccui/components/affix/index.html)：将页面元素钉在可视区域。常用于侧边目录、操作栏、工具条等需要常驻视野的场景 - [Alert 警告提示](https://vaebe.github.io/ccui/components/alert/index.html)：警告提示，展现需要关注的信息 - [Anchor 锚点](https://vaebe.github.io/ccui/components/anchor/index.html)：页面内部跳转导航。点击锚点平滑滚动到对应内容，滚动时自动高亮当前所在区段 - [AutoComplete 自动完成](https://vaebe.github.io/ccui/components/auto-complete/index.html)：输入框 + 浮层下拉建议项。区别于 Select：值可以是任意字符串（不限于选项），适合做地址、邮箱、商品名、关键词等"补全"场景 - [Avatar 头像](https://vaebe.github.io/ccui/components/avatar/index.html)：代表用户或对象的图标，支持图片、文字、自定义文本 - [Badge 徽标数](https://vaebe.github.io/ccui/components/badge/index.html)：图标右上角的圆形徽标数字 - [BadgeRibbon 缎带徽标](https://vaebe.github.io/ccui/components/badge-ribbon/index.html)：带折角缎带的徽标，作为独立顶层组件存在（不挂在 Badge 命名空间下） - [BorderBeam 边框流光](https://vaebe.github.io/ccui/components/border-beam/index.html)：一道渐变光沿容器边框循环流动，用于给卡片、容器等内容加一层灵动的视觉强调 - [Breadcrumb 面包屑](https://vaebe.github.io/ccui/components/breadcrumb/index.html)：显示当前页面在系统层级中的位置，并提供向上导航能力 - [Button 按钮](https://vaebe.github.io/ccui/components/button/index.html)：常用的操作按钮 - [Button3d 3D按钮](https://vaebe.github.io/ccui/components/button-3d/index.html)：3D 效果按钮，基于 [Building a Magical 3D Button](https://www.joshwcomeau.com/animation/3d-button/) 实现 - [Calendar 日历](https://vaebe.github.io/ccui/components/calendar/index.html)：按月展示日期，常用于"日程 / 任务 / 排班"场景 - [Card 卡片](https://vaebe.github.io/ccui/components/card/index.html)：将信息聚合在卡片容器中展示 - [CardMeta 卡片元信息](https://vaebe.github.io/ccui/components/card-meta/index.html)：卡片元信息组件，作为独立顶层组件存在（不挂在 Card 命名空间下） - [Carousel 走马灯](https://vaebe.github.io/ccui/components/carousel/index.html)：旋转切换图像或卡片的容器组件。支持自动播放、循环、四向指示器、`scrollx` / `fade` 两种切换效果、前后切换箭头、键盘导航和触摸滑动手势。当一组同等内容需要在水平方向轮播展示时使用 - [Cascader 级联选择](https://vaebe.github.io/ccui/components/cascader/index.html)：多级联动选择控件。每一列展示一级选项，点击非叶子节点自动展开下一级。`v-model` 是路径数组 `[v1, v2, v3]`，输入框默认按 `separator` 拼接每级 label - [CheckBox 多选框](https://vaebe.github.io/ccui/components/check-box/index.html)：在一组备选项中可选多个 - [CheckableTag 可勾选标签](https://vaebe.github.io/ccui/components/checkable-tag/index.html)：可勾选切换的标签，作为独立顶层组件存在（不挂在 Tag 命名空间下）。配套 `CheckableTagGroup` 容器组件支持多选 - [Collapse 折叠面板](https://vaebe.github.io/ccui/components/collapse/index.html)：将复杂的内容折叠收起，按需展开。常用于"分组配置"、"问答列表"、"层级日志" - [ColorPicker 颜色选择器](https://vaebe.github.io/ccui/components/color-picker/index.html)：可视化挑选颜色，支持 HEX / RGB / HSB 三种格式显示，alpha 透明度，预设色板，和受控/非受控两种模式。基于浏览器 Pointer Events 实现 SV / hue / alpha 三段拖拽，零外部颜色库依赖 - [ConfigProvider 全局配置](https://vaebe.github.io/ccui/components/config-provider/index.html)：为内部所有 ccui 组件提供统一的全局配置：尺寸、方向、品牌色、语言、类名前缀 - [DatePicker 日期选择框](https://vaebe.github.io/ccui/components/date-picker/index.html)：输入或选择日期/周/月/年/季度的控件。支持 `picker` 切换 5 种粒度、面板逐级展开（date → month → year）、`weekStart` 周起始、ConfigProvider 注入 locale 与周文案 - [Descriptions 描述列表](https://vaebe.github.io/ccui/components/descriptions/index.html)：成组展示多个只读字段，常用于详情页 / 资料卡 - [Divider 分隔线](https://vaebe.github.io/ccui/components/divider/index.html)：区隔内容的分隔线 - [Drawer 抽屉](https://vaebe.github.io/ccui/components/drawer/index.html)：从屏幕侧边滑入的浮层，承载较多详情或表单。相比 Modal，Drawer 不打断当前页面纵深，更适合"补充信息"场景 - [Dropdown 下拉菜单](https://vaebe.github.io/ccui/components/dropdown/index.html)：点击或悬停后弹出的菜单 - [Empty 空状态](https://vaebe.github.io/ccui/components/empty/index.html)：数据缺失或还没创建时的占位提示 - [Flex 弹性布局](https://vaebe.github.io/ccui/components/flex/index.html)：封装 CSS flexbox 的常用属性，配合主题间距 token 让"行内 / 垂直 / 两端对齐"等场景更直白 - [FloatButton 悬浮按钮](https://vaebe.github.io/ccui/components/float-button/index.html)：固定在视图角落的按钮 - [Form 表单](https://vaebe.github.io/ccui/components/form/index.html)：用于收集、校验和提交一组输入项。`validateDebounce` / `normalize` 等边角能力后续迭代 - [Grid 栅格](https://vaebe.github.io/ccui/components/grid/index.html)：24 等分的响应式栅格系统。`` 是行容器，`` 是列；列的 `span` 之和满 24 即填满一行 - [Icon 图标](https://vaebe.github.io/ccui/components/icon/index.html)：统一图标尺寸、颜色、旋转和无障碍属性的基础包装器，内置 [Iconify](https://iconify.design/) 适配，可直接通过 `name=":"` 渲染来自 200+ 图标集的任意图标 - [Image 图片](https://vaebe.github.io/ccui/components/image/index.html)：带占位、错误兜底、懒加载和大图预览的图片组件 - [ImagePreview 图片预览](https://vaebe.github.io/ccui/components/image-preview/index.html)：多图预览组件，作为独立顶层组件存在（不挂在 Image 命名空间下） - [Input 输入框](https://vaebe.github.io/ccui/components/input/index.html)：通过鼠标或键盘输入字符，可以设置输入框的类型、大小和状态 - [InputNumber 数字输入框](https://vaebe.github.io/ccui/components/input-number/index.html)：数字输入框组件，用于输入数字类型的数据 - [InputOtp 一次性密码](https://vaebe.github.io/ccui/components/input-otp/index.html)：分格的一次性密码 / 验证码输入框，作为独立顶层组件存在（不挂在 Input 命名空间下） - [InputSearch 搜索框](https://vaebe.github.io/ccui/components/input-search/index.html)：带搜索按钮的输入框，作为独立顶层组件存在（不挂在 Input 命名空间下） - [Layout 布局](https://vaebe.github.io/ccui/components/layout/index.html)：帮助构建中后台页面的整体框架，提供 ``、``、``、``、`` 五个组件 - [Masonry 瀑布流](https://vaebe.github.io/ccui/components/masonry/index.html)：按列分布、高度自适应的多列布局。卡片墙、画廊、动态列表的常见排版方式 - [Mentions 提及](https://vaebe.github.io/ccui/components/mentions/index.html)：带「@提及」语法的多行输入框。在 textarea 中输入特定 prefix（默认 `@`）后弹出候选浮层，选中后插入 `@username ` 到光标位置。常见于评论、IM、协作工具的 @ 队友、`#` 话题、`/` 命令场景 - [Menu 导航菜单](https://vaebe.github.io/ccui/components/menu/index.html)：为页面、侧边栏和应用顶部提供导航，使用 Vue 组件的声明式 props、`v-model` 和事件风格 - [Message 全局提示](https://vaebe.github.io/ccui/components/message/index.html)：轻量的全局反馈提示，从顶部弹入，几秒后自动消失。适合用于操作成功 / 失败的简短确认，不打断用户操作 - [Modal 对话框](https://vaebe.github.io/ccui/components/modal/index.html)：模态对话框。需要确认操作或集中处理一段交互时使用 - [Notification 通知](https://vaebe.github.io/ccui/components/notification/index.html)：四角弹出的通知提醒，比 Message 更适合带标题 + 描述的多行内容。默认 4.5 秒自动关闭，右上角弹出 - [Pagination 分页](https://vaebe.github.io/ccui/components/pagination/index.html)：切分大列表为多页展示 - [Popconfirm 气泡确认](https://vaebe.github.io/ccui/components/popconfirm/index.html)：在被点击的元素附近弹出二次确认气泡。比 Modal 轻量，适合"删除 / 重置 / 注销"等需要明确反悔机会的危险操作 - [Popover 弹出框](https://vaebe.github.io/ccui/components/popover/index.html)：用于在不打断用户流程的情况下展示补充信息和操作内容。支持标题 / 富文本内容 / 不同触发方式与位置控制 - [Progress 进度条](https://vaebe.github.io/ccui/components/progress/index.html)：可视化操作的完成度 - [Radio 单选框](https://vaebe.github.io/ccui/components/radio/index.html)：在多个备选项中选中一个 - [RangePicker 日期范围](https://vaebe.github.io/ccui/components/range-picker/index.html)：选择一段连续的日期区间。双面板显示当前月与下一月，起 / 止两次点击完成选择，hover 期间高亮预览区间。复用 DatePicker 同款 dayjs 工具层与 `valueFormat` 三档 - [Rate 评分](https://vaebe.github.io/ccui/components/rate/index.html)：等级评估 - [Result 结果](https://vaebe.github.io/ccui/components/result/index.html)：为重要操作给出明确的最终反馈页（成功 / 失败 / 警告 / 找不到） - [Segmented 分段控制器](https://vaebe.github.io/ccui/components/segmented/index.html)：在两个或多个互斥选项之间切换，比 Radio 更紧凑 - [Select 选择器](https://vaebe.github.io/ccui/components/select/index.html)：从一组选项中选择一个或多个值，支持分组（含嵌套）、字段名映射、自定义渲染、远程搜索、tags、popup 定位、Teleport 容器、虚拟列表、完整 ARIA、键盘导航、labelInValue、maxCount、命中高亮和 FormItem 校验联动 - [Skeleton 骨架屏](https://vaebe.github.io/ccui/components/skeleton/index.html)：在内容真正加载完成前先显示一个轮廓占位，缓解"白屏 + 跳动"的视觉割裂 - [SkeletonNode 自定义骨架](https://vaebe.github.io/ccui/components/skeleton-node/index.html)：自定义形状的骨架占位容器，作为独立顶层组件存在（**不通过 Skeleton.Node 静态属性挂载**） - [Slider 滑块](https://vaebe.github.io/ccui/components/slider/index.html)：滑块组件用于在数值区间内进行选择 - [Space 间距](https://vaebe.github.io/ccui/components/space/index.html)：设置组件之间的间距 - [SpaceCompact 紧凑组合](https://vaebe.github.io/ccui/components/space-compact/index.html)：让多个输入类组件视觉上贴边拼接为一组紧凑控件，作为独立顶层组件存在（**不通过 Space.Compact 静态属性挂载**） - [Spin 加载中](https://vaebe.github.io/ccui/components/spin/index.html)：加载状态的占位指示器 - [Splitter 分隔面板](https://vaebe.github.io/ccui/components/splitter/index.html)：通过拖拽分隔条调整两个或多个面板的相对尺寸。常用于"代码编辑器布局"、"文件浏览器"、"双栏对比" - [Steps 步骤条](https://vaebe.github.io/ccui/components/steps/index.html)：引导用户按顺序完成任务，把多步流程拆解成可见的进度 - [Switch 开关](https://vaebe.github.io/ccui/components/switch/index.html)：开关选择器 - [Table 表格](https://vaebe.github.io/ccui/components/table/index.html)：展示结构化数据，覆盖列渲染、排序、过滤、行选择、固定列、展开行和合并单元格等高频能力 - [TableColumn 表格列](https://vaebe.github.io/ccui/components/table-column/index.html)：模板式表格列声明，作为 `` 的子组件出现（**不通过 Table.Column 静态属性挂载**，平铺独立顶层组件） - [TableColumnGroup 表格列分组](https://vaebe.github.io/ccui/components/table-column-group/index.html)：表格列分组组件，作为 `` 的子组件，让 thead 多生成一行「分组标题」，子叶子列在 tbody 中被展平渲染（**不通过 Table.ColumnGroup 静态属性挂载**，平铺独立顶层组件） - [TableSummary 表格汇总](https://vaebe.github.io/ccui/components/table-summary/index.html)：表格汇总行，在 `` 底部渲染 `` 汇总区（**不通过 Table.Summary 静态属性挂载**，平铺独立顶层组件） - [Tabs 选项卡](https://vaebe.github.io/ccui/components/tabs/index.html)：选项卡切换组件 - [Tag 标签](https://vaebe.github.io/ccui/components/tag/index.html)：进行标记和分类的小标签 - [Textarea 多行文本](https://vaebe.github.io/ccui/components/textarea/index.html)：多行文本输入框，作为独立顶层组件存在（不挂在 Input 命名空间下） - [主题定制 / 深色模式](https://vaebe.github.io/ccui/components/theme/index.html)：ccui 的所有组件样式都建立在一套 `--ccui-*` CSS 变量之上。深色模式、品牌色定制、圆角调整都归结为一件事：**覆盖这些 CSS 变量**。本页梳理三种由浅入深的用法 - [TimePicker 时间选择框](https://vaebe.github.io/ccui/components/time-picker/index.html)：输入或选择时间的控件。三列（时 / 分 / 秒）滚动选择，可控制各列显示与步长，支持 `disabledHours` / `disabledMinutes` / `disabledSeconds` 屏蔽，支持 `showNow` 与 `showOk` 控制 footer 行为 - [TimeRangePicker 时间范围选择](https://vaebe.github.io/ccui/components/time-range-picker/index.html)：时间区间选择控件，`v-model` 是 `[start, end]` 元组。两端各自独立的 TimePicker 面板，支持独立 `disabled` / `allowEmpty` / `placeholder`，可配 `order` 自动保序 - [Timeline 时间线](https://vaebe.github.io/ccui/components/timeline/index.html)：可视化地呈现时间流信息 - [Tooltip 文字提示](https://vaebe.github.io/ccui/components/tooltip/index.html)：常用于展示鼠标 hover 时的提示信息 - [Transfer 穿梭框](https://vaebe.github.io/ccui/components/transfer/index.html)：双列穿梭框。左侧"源"，右侧"目标"，通过中间按钮把选中项从一侧移到另一侧。常见于权限分配 / 字段挑选 / 角色管理等场景 - [Tree 树](https://vaebe.github.io/ccui/components/tree/index.html)：层级数据展示与管理：选中、勾选（含父子半选联动）、展开、异步加载、搜索高亮、自定义渲染、拖拽 - [TreeSelect 树选择](https://vaebe.github.io/ccui/components/tree-select/index.html)：把 `Tree` 嵌进下拉浮层做为选项面板的选择器。`v-model` 在单选模式下是单值（节点 value），多选模式下是 value 数组。多选默认渲染 checkbox（`treeCheckable=true`），关闭后回退到 `c-tree` 的 multiple selectable 模式。fieldNames 与 Cascader/Select 保持一致（`label/value/children/disabled`），内部映射到 `c-tree` 的 `title/key/...` - [Typography 排版](https://vaebe.github.io/ccui/components/typography/index.html)：文本内容的基本格式 - [Upload 上传](https://vaebe.github.io/ccui/components/upload/index.html)：文件上传控件。提供文件选择、拖拽接收、文件列表、删除四个核心能力。**组件不内置 HTTP 上传请求** —— 业务侧通过 `update:fileList` 拿到文件后自行发请求并回写状态，组件只负责 UI 与状态同步 - [Util 工具集](https://vaebe.github.io/ccui/components/util/index.html)：vue3-ccui 内部使用的公共工具函数 - [Watermark 水印](https://vaebe.github.io/ccui/components/watermark/index.html)：为页面或局部容器盖上重复的、平铺的水印。常用于"版权提示 / 数据保密 / 防截图泄露"等场景 ## 资源 - 完整文档（单文件，便于 LLM 一次读入）: https://vaebe.github.io/ccui/llms-full.txt - 站点首页: https://vaebe.github.io/ccui/ - 仓库: https://github.com/vaebe/ccui - npm: https://www.npmjs.com/package/@vaebe/ccui