前端UI组件设计系统【免费下载链接】vue-devui基于全新 DevUI Design 设计体系的 Vue3 组件库面向研发工具的开源前端解决方案。项目地址https://gitcode.com/DevCloudFE/vue-devui点击查看免费下载Vue DevUI 是基于全新 DevUI Design 设计体系的 Vue 3 开源组件库其官方文档站中的「组件功能概览」页面是一张面向使用者与贡献者的总览看板它按六大功能分类登记了组件库中全部组件的名称、版本、复杂度、废弃状态与细粒度功能点并用 ✅ / / ⌛ 三种状态标记实时跟踪每一项功能的开发进度。本文以 overview/index.md 及其数据源 feature-data.ts 为骨架逐层拆解概览页的数据结构、渲染逻辑与分类体系并对照devui/源码目录与docs/components/文档目录帮助你快速建立对组件库全貌的认知掌握从「功能点」反查「组件源码与文档」的检索方法。一、概览页是什么一张页面读懂整个组件库概览页组件功能概览位于文档站的组件目录下是组件库文档体系的总入口之一。它不只是静态的组件名列表而是一张由数据驱动的动态看板页面顶部标题会实时显示两项统计已登记组件数量componentFeatureData.length全部组件功能点总数featureCount由所有组件的features数组长度累加而来。页面同时给出三种状态图例让读者一眼看出每个组件、每项功能的开发进度✅ 已完成done 开发中developing⌛ 待认领to-be-claimed正文部分按功能分类分组每组以h2展示分类名称及该分类下的组件数量每个组件以h3展示组件英文名、中文名、功能点数量、复杂度标记⭐、版本标签与废弃标记垃圾桶图标随后以每行 3 个的网格密度罗列全部功能点每个功能点都链接到该组件文档页中对应的标题锚点。从源码结构看这个页面依赖两个文件协同工作overview/index.md页面模板包含 Vuescript setup渲染逻辑与 SCSS 样式overview/feature-data.ts全部组件与功能点的数据源约 2500 行 TypeScript 常量声明。二、数据驱动的概览机制从数据结构到页面渲染2.1 数据源feature-data.ts 的类型体系概览页的绝大部分内容都来自 feature-data.ts 顶部的类型定义。理解这些类型就理解了整个概览数据的语义type ICategory general | navigation | feedback | data-entry | data-display | layout; type IStatus done | developing | to-be-claimed; interface IFeature { name: string; // 功能点英文名部分组件留空仅使用中文名 cnName: string; // 功能点中文名同时充当文档锚点文本 desc?: string; // 可选的功能描述 status?: IStatus; // 开发状态done / developing / to-be-claimed } interface IComponent { name: string; // 组件英文名用于生成文档链接 /components/{name}/ cnName: string; // 组件中文名 category: ICategory; // 所属功能分类 desc?: string; // 可选描述 version?: string; // 版本标签如 v1.0、v2.0 complex?: boolean; // 是否为复杂组件页面显示 ⭐ deprecated?: boolean;// 是否已废弃页面显示红色垃圾桶图标 features: IFeature[] | string[]; // 功能点列表 }配套的两个映射表决定了页面上的分类中文名与状态符号export const CATEGORY_MAP { general: 通用, navigation: 导航, feedback: 反馈, data-entry: 数据录入, data-display: 数据展示, layout: 布局, }; export const STATUS_MAP { done: ✅, developing: , to-be-claimed: ⌛, };2.2 页面渲染逻辑分组、统计与锚点生成index.md 中的script setup承担了全部渲染逻辑import { groupBy, startCase } from lodash; import { componentFeatureData, STATUS_MAP, CATEGORY_MAP } from ./feature-data; function group(arr, step 3) { if (!arr || arr.length 0) return; if (arr.length step) return [arr]; return arr.reduce((x, y) { return Array.isArray(x) ? (x[x.length - 1].push(y) step ? [...x, []] : x) : [[x, y]]; }); } const featureCount componentFeatureData.reduce((acc, cur) acc cur.features.length, 0);其中几个关键点值得注意分类分组groupBy(componentFeatureData, item item.category)按category字段把全部组件聚合成 6 组配合startCase(category)与CATEGORY_MAP[category]输出形如「General 通用」的标题三列网格group(component.features)把每个组件的功能点按step 3切成小组配合d-col :span824 / 3 8实现每行恰好 3 个功能点的布局功能总数featureCount累加所有组件的features.length。以当前数据文件统计功能点总数含各状态的status字段为 373锚点链接每个功能点渲染为a :href/components/${component.name}/#${feature.cnName}即「组件文档页 功能点中文名锚点」。在 VitePress 中文档页内每个###标题都会生成同名锚点因此点击功能点即可跳到 button/index.md 这类组件文档中对应的示例章节版本标签version-tag-${component.version?.slice(1, 2)}从v1.0/v2.0中截取主版本号1或2生成不同样式的标签废弃标记deprecated: true的组件会在标题旁渲染一个红色的垃圾桶 SVG并带有Deprecated的title提示复杂组件complex: true的组件标题旁显示 ⭐ 徽标提示该组件功能面广、实现复杂查阅文档时需要投入更多关注。2.3 一个细节静态文本与动态数据的差异页面 H1 下方有一段静态文字「Vue DevUI 组件库包含 77 个灵活、易用、功能强大的组件」而当前 feature-data.ts 中实际登记了79 个组件条目含已废弃与待认领组件。组件数量与功能总数在页面标题中均由脚本从数据文件动态计算因此该差异可能源于文档静态文本与数据文件更新节奏不一致。以当前仓库数据为准概览数据共覆盖 79 个组件条目、373 项功能点。三、六大分类全景组件与功能清单概览页将组件划分为 6 个功能分类。下面按数据文件的登记顺序完整列出每个分类的组件及其全部功能点⌛ 表示「待认领」其余未标注的功能均为 ✅ 已完成。各组件的中文文档可在packages/devui-vue/docs/components/name/index.md查看源码位于packages/devui-vue/devui/name/目录。3.1 通用general11 个组件button 按钮v1.07 项功能形态、主题色、尺寸、禁用状态、加载中状态、图标按钮、按钮组。示例通过variant设置solid/outline/text三种形态通过color设置primary/secondary/danger主题色详见 按钮文档。dragdrop 拖拽v2.0⭐ 复杂组件11 项功能基础拖拽、拖拽排序已完成多层树状拖拽 ⌛、拖拽实体元素跟随 ⌛、越边交换 ⌛、外部放置位置 ⌛、拖拽滚动容器增强 ⌛、源占位符 ⌛、批量拖拽 ⌛、二维拖拽 ⌛、拖拽预览 ⌛。fullscreen 全屏v1.02 项功能全屏模式、全屏层级。icon 图标v1.04 项功能图标名称、颜色、尺寸、自定义字体图标class-prefix。overlay 遮罩层v1.02 项功能固定遮罩层fixed-overlay、弹性遮罩层flexible-overlay。panel 面板v1.0已废弃6 项功能基本功能、默认状态、面板类型、面板样式、阻止折叠、自定义内容。ripple 水波纹v1.02 项功能基本功能、自定义颜色。search 搜索v1.05 项功能基本功能、搜索图标左置、无边框、双向绑定、自动聚焦。status 状态v1.0已废弃1 项功能类型。sticky 便贴v2.02 项功能基本功能、滚动容器。virtual-list 虚拟列表v2.01 项功能基本功能。3.2 导航navigation10 个组件accordion 手风琴v2.0已废弃5 项功能基本功能、内置路由和链接类型、使用模板、复合层级已完成改变键值 ⌛。anchor 锚点v2.04 项功能基本功能已完成异步加载 ⌛、滚动容器 ⌛、url 锚点 ⌛。back-top 回到顶部v2.03 项功能基本功能、自定义、滚动容器。breadcrumb 面包屑v2.04 项功能基本功能、传入 source、可下拉、自定义分隔符。dropdown 下拉菜单v1.0⭐ 复杂组件12 项功能基本功能、触发方式、可关闭区域、多级菜单、单独使用已完成关闭触发点设置 ⌛、悬浮下拉 ⌛、手动控制下拉 ⌛、通过 isOpen 控制下拉 ⌛、自动展开和自动聚焦 ⌛、设置展开位置处理 ⌛、支持添加图标 ⌛。menu 菜单v1.08 项功能基本功能、自定义图标、垂直菜单、默认展开、仅一项展开、收缩菜单、取消多选、响应式参数。nav-sprite 精灵导航v2.02 项功能基本功能、指定容器。pagination 分页v1.04 项功能基本功能、极简模式、多种配置、特殊情况。steps-guide 操作指引v2.03 项功能基本功能、弹出位置、自定义。tabs 选项卡v1.07 项功能基本功能、类型、禁用状态、自定义模板、拦截 tab 切换、添加/删除、标签位置的设置。3.3 反馈feedback11 个组件alert 警告v1.03 项功能基本功能、可关闭、不显示图标。Drawer 抽屉板v1.03 项功能基本功能、关闭后不销毁、自定义模板。loading 加载中v1.06 项功能基本功能、自定义样式、多 promise、使用 Subscription 方式、使用 showLoading 控制、服务方式调用。mention 提及v1.04 项功能基本功能、异步用法、自定义前缀、自定义模板。modal 弹窗v1.09 项功能标准对话框、自定义对话框、拦截对话框关闭已完成信息提示 ⌛、警告弹出框 ⌛、弹出框按钮状态 ⌛、自动聚焦 ⌛、自定义内容模板 ⌛、避免滚动和抖动 ⌛。notification 全局通知v1.05 项功能基本功能、超时时间、自定义样式、单独超时时间、服务方式调用。popover 悬浮提示v1.06 项功能基本功能、弹出位置、手动控制、自定义提示内容、父容器设置、延时触发。read-tip 阅读提示v2.04 项功能基本功能、多提示、自定义模板、异步获取数据。result 结果v1.02 项功能基本功能、自定义。message 全局提示v2.06 项功能基本功能、可关闭消息提示、超时时间、阴影和边框设置、关闭回调、多种用法。tooltip 提示v1.02 项功能基本功能、延时触发。3.4 数据录入data-entry24 个组件auto-complete 自动补全v1.06 项功能基本功能、自定义数据匹配方法、自定义模板、禁用状态、最近输入、懒加载。cascader 级联菜单v2.0⭐ 复杂组件7 项功能基本功能、多选类型已完成搜索类型 ⌛、父级可选 ⌛、模板类型 ⌛、点击加载 ⌛、下拉头模板 ⌛。category-search 分类搜索v2.02 项功能均待认领 ⌛基本功能、大数据优化展示。checkbox 复选框v1.04 项功能基本功能、复选框组、拦截状态切换、拦截复选框组的状态切换。color-picker 颜色选择器v2.05 项功能基本功能、颜色透明度、颜色模式、历史颜色、自定义基础面板。date-picker 日期选择器v2.0⭐ 复杂组件已废弃5 项功能自动关闭、日期范围选择器、日期格式、日期范围分隔符已完成自定义 ⌛。date-picker-pro 日期选择器v1.0⭐ 复杂组件8 项功能基本功能、显示时间、自定义扩展区域、年月选择器、范围选择器、自定义范围选择器模板已完成自定义宿主 ⌛、日历面板模式 ⌛。editable-select 可输入下拉选择框v1.0已废弃5 项功能基本功能、禁用状态、自定义匹配方法、异步数据、懒加载。form 表单v1.0⭐ 复杂组件10 项功能基本功能、label 横向排列、弹窗表单、多列表单、模板驱动表单验证、响应式表单验证、指定表单状态、表单协同验证、跨组件表单验证已完成更新验证规则 ⌛。input 输入框v1.03 项功能基本功能、尺寸、密码框。input-icon 图标输入框v2.0已废弃3 项功能图标名称、颜色已完成自定义 ⌛。input-number 数字输入框v1.06 项功能基本功能、禁用状态、允许空值、设置最大长度、正则限制已完成限制小数 ⌛。multi-auto-complete 多项自动补全v2.03 项功能均待认领 ⌛基本功能、自定义匹配方法、允许空值。radio 单选框v1.06 项功能相互独立的单选项、条件切换、单选框组条件切换、禁用状态、排列方向、自定义单选项。select 下拉选择框v1.0⭐ 复杂组件10 项功能基础单选功能、尺寸、多选、禁用、可清空、自定义下拉选项、选项分组、选项过滤、新增选项、远程加载。slider 滑块v1.02 项功能基本功能、禁用状态。switch 开关v1.04 项功能基本功能、双向绑定、回调事件、自定义样式。tag-input 标签输入框v2.0已废弃4 项功能基本功能、双向绑定、异步数据源已完成虚拟滚动 ⌛。textarea 多行文本框v1.03 项功能基本功能、调整大小、字符数限制。time-picker 时间选择器v1.03 项功能基本功能、格式化已完成自定义模板 ⌛。time-select 时间下拉选择器v1.04 项功能基本功能、尺寸、时间段、事件。transfer 穿梭框v2.05 项功能基本功能、可搜索、可排序、自定义穿梭框已完成虚拟滚动 ⌛。tree-select 树形选择框v2.0⭐ 复杂组件10 项功能基本功能、标签化配置、仅叶节点可选、可搜索已完成初始化完成时调用的钩子 ⌛、自定义列表选项 ⌛、自定义 key ⌛、自定义区域 ⌛、展开/收起 icon ⌛、虚拟滚动 ⌛。upload 上传v1.06 项功能基本功能、多文件上传、自动上传、自定义、动态上传参数、任意区域上传。3.5 数据展示data-display20 个组件avatar 头像v1.03 项功能头像显示规则、基础配置、特殊显示。badge 徽标v1.06 项功能基本功能、点状徽章、计数徽章、状态徽章、徽章位置、自定义。card 卡片v1.03 项功能基本功能、使用图片、自定义区域。carousel 轮播v2.04 项功能基本功能、指示器和切换箭头、自动轮播、自定义操作。collapse 折叠面板v1.01 项功能基本功能。comment 评论v2.02 项功能基本功能、自定义。countdown 倒计时v1.05 项功能基本功能、时间格式、自定义前缀后缀、自定义样式、自定义内容。dashboard 仪表盘v2.02 项功能均待认领 ⌛基本功能、更多设置。gantt 甘特图v2.0⭐ 复杂组件2 项功能均待认领 ⌛基本功能、与表格结合。image-preview 图片预览v1.03 项功能基本功能、自定义开启预览窗口、设置层级。list 列表v2.02 项功能基本功能已完成自定义 ⌛。progress 进度条v1.02 项功能基本功能、圆环形态。quadrant-diagram 象限图v2.02 项功能均待认领 ⌛基本功能、自定义。rate 评分v1.06 项功能基本功能、只读模式、动态模式、自定义、半选模式、类型。skeleton 骨架屏v1.03 项功能基本功能、组合、细粒度模式。statistic 统计数值v1.03 项功能基本功能、数值动画、自定义。table 表格v1.0⭐ 复杂组件21 项功能基础表格、表格样式、行勾选、索引列、自定义列、单元格编辑、自定义表头、空数据模板、固定表头、固定列、单元格合并、表头分组、排序、过滤、展开行、树形表格、懒加载已完成虚拟滚动 ⌛、列拖拽 ⌛、行拖拽 ⌛、批量行拖拽 ⌛。tag 标签v1.02 项功能基本功能、标签组。timeline 时间轴v1.07 项功能基本功能、设置方向、自定义内容模板、使用 html、自定义内容方向、设置时间位置、时间节点单独使用。tree 树v1.0⭐ 复杂组件11 项功能基本功能、可勾选、默认状态、禁用状态、自定义图标、懒加载、增删改查操作、搜索过滤、拖拽排序、treeFactory、虚拟滚动。3.6 布局layout3 个组件grid 栅格v1.07 项功能基本功能、对齐、子元素间距、flex 填充、左右偏移、响应式布局、栅格排序。layout 布局v1.02 项功能基本功能、更多用法。splitter 分割器v1.05 项功能基本功能、垂直布局、组合布局、制定折叠收起方向、折叠收起菜单。四、开发状态跟踪从已完成到待认领状态标记是概览页最具协作价值的部分。根据 feature-data.ts 的当前数据统计已完成✅ done311 项功能覆盖绝大多数核心组件与常用场景开发中 developing0 项。该状态在类型定义IStatus与STATUS_MAP中均有保留说明它是一条预留给「正在开发中的功能」的通道只是当前数据暂无使用待认领⌛ to-be-claimed62 项功能主要集中于复杂组件的能力补全如 dragdrop 的批量拖拽/二维拖拽、dropdown 的悬浮下拉/手动控制、table 的虚拟滚动/列拖拽、tree-select 与 cascader 的多种扩展用法以及若干完全待启动的组件如 dashboard 仪表盘、gantt 甘特图、category-search 分类搜索、quadrant-diagram 象限图。对于贡献者而言「⌛ 待认领」意味着这些功能点尚未实现、欢迎社区认领开发对于使用者而言在选用组件前浏览功能点的状态可以提前判断某个能力在当前版本是否可用。相关组件源码与测试位于packages/devui-vue/devui/name/目录例如 table 源码目录 中对应 21 项功能点的多个实现文件与 table 测试。五、版本、复杂度与废弃标记解读除状态外概览页还通过三类附加标记辅助选型版本标签v1.0 / v2.0version字段统一标记组件的版本世代。当前数据中全部组件均为 v1.0 或 v2.0从整体分布看v2.0 多用于较新的组件如 dragdrop、sticky、virtual-list、date-picker-pro、transfer、carousel 等。注意该字段代表概览数据中登记的版本信息具体以各组件文档与发布记录为准。复杂度标记⭐complex: true的组件共有 11 个dragdrop、dropdown、cascader、date-picker、date-picker-pro、form、select、table、tree、tree-select、gantt。这类组件功能面广、内部实现复杂文档页面通常也更长适合按功能点逐个查阅。废弃标记垃圾桶图标deprecated: true的组件共有 7 个panel、status、accordion、date-picker、editable-select、input-icon、tag-input。这些组件虽已废弃但在概览数据中仍保留登记部分功能仍为已完成状态方便存量项目对照迁移对应替代组件可从同一分类下的同类组件如 date-picker-pro 之于 date-picker中寻找。六、概览页与源码、文档的对应关系概览数据并非孤立的元数据它与仓库的源码和文档目录存在清晰的对应关系三者可通过组件英文名对齐概览数据feature-data.ts 中的name字段组件文档packages/devui-vue/docs/components/name/index.md其中每个###小节标题即概览页功能点锚点指向的目标组件源码packages/devui-vue/devui/name/目录含src/实现、__tests__/测试与index.ts出口。概览页功能点链接的生成规则为/components/${component.name}/#${feature.cnName}例如点击「按钮」组件的「形态」功能会跳转到 button/index.md 中「形态」小节该小节内即通过:::demo button/shape :::内嵌示例演示variant属性的三种形态。需要说明的是从当前仓库目录对照可以发现概览数据与源码/文档目录之间存在少量差异例如dashboard在概览数据中登记为待认领组件但packages/devui-vue/devui/与packages/devui-vue/docs/components/下暂无同名目录同时部分已有实现与文档的组件如 action-timeline、code-editor、code-review、data-grid、echarts、editor-md、git-graph、steps 等尚未登记进概览数据。这些差异反映了文档数据与代码演进的不同步阅读概览页时应以各组件独立文档为准。七、如何阅读与维护概览数据作为读者建议的阅读路径是先看六类分类标题确定目标组件所在的类别 → 在组件条目中确认状态✅ 可用 / ⌛ 待认领与版本、废弃标记 → 点击感兴趣的功能点锚点进入对应组件文档的示例章节 → 如需深入原理再进入devui/name/源码目录阅读实现与测试。作为贡献者概览页的数据维护入口只有一个文件packages/devui-vue/docs/components/overview/feature-data.ts。新增组件时在componentFeatureData数组中追加一个IComponent对象设置name、cnName、category、version与features列表新增功能点时在对应组件的features数组中追加带status的IFeature条目。数据更新后页面标题的组件数与功能总数、分类数量、状态符号与锚点链接均会自动重算无需改动页面模板本身——这正是概览页「数据驱动」设计带来的维护效率。小结「组件功能概览」用一份 TypeScript 数据文件驱动了一整张覆盖 79 个组件条目、373 项功能的动态看板六大分类通用、导航、反馈、数据录入、数据展示、布局完整映射了组件库的能力地图三种状态标记透明呈现了「已完成 / 开发中 / 待认领」的进度版本、复杂度与废弃标记则为选型提供了快速过滤维度。结合devui/源码与docs/components/文档开发者可以从任意一个功能点出发一键反查到对应的示例、实现与测试快速评估组件能力并定位扩展方向。赞分享前端UI组件设计系统【免费下载链接】vue-devui基于全新 DevUI Design 设计体系的 Vue3 组件库面向研发工具的开源前端解决方案。项目地址https://gitcode.com/DevCloudFE/vue-devui点击查看免费下载相关推荐【限时免费】 Vue-DevUI组件库中d-select组件空数据渲染问题解析Vue DevUI组件库中d select组件空数据渲染问题解析 问题背景 在Vue DevUI组件库1.6.18版本中d select选择器组件存在一个DO前端UI组件设计系统Vue Native中的动态组件根据条件渲染不同组件Vue Native中的动态组件根据条件渲染不同组件 在移动应用开发中我们经常需要根据不同条件展示不同界面内容。Vue Native提供的动态组件功能可以帮移动开发跨平台前端Nuxt UI 组件体系全览125 个 Vue 组件的分类架构与实战指南Nuxt UI 组件体系全览125 个 Vue 组件的分类架构与实战指南 组件是 Nuxt UI本仓库即其 v4 源码的核心资产。本文以 docs/co前端UI组件上一篇frontend-slides 的 Grove 模板封面预览完全指南从设计系统到 1920×1080 首屏预览的实践下一篇Cowrie 蜜罐 MySQL/PostgreSQL 数据库输出插件配置全指南从建库、建表到事件审计落库创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考