这是什么

CodeDogUI 是一套面向 uni-app 的 Vue3 组件库，目标是：一套代码，同时跑出移动端与 PC 端各自正确的交互形态。

项目归属

由 Codedog.tech 长期维护，Penn.Gu 设计开发 UI。

官方站点 https://ui.codedog.tech · 在线文档 https://doc.ui.codedog.tech · 源码仓库 https://github.com/peen-gu/CodeDog-ui · MIT 许可

它解决的不是「响应式」

大多数跨端方案做的是响应式布局——同一套视觉在不同宽度下缩放重排。CodeDogUI 做的是双形态：同一个组件内部渲染两套结构，运行时按终端切换。

组件	移动端形态	PC 形态
cd-dialog	底部抽屉	居中模态
cd-select	底部动作面板	下拉面板
cd-table	卡片列表（首列升格为标题）	多列表格
cd-pagination	上一页 / 下一页	完整页码
cd-date-picker	系统原生滚轮	自研日历面板

这不是审美偏好。手机上「从底部升起的抽屉」和可点尺寸更容易命中拇指；PC 上「居中模态」符合用户对桌面软件的预期。把移动端的模态照搬到 PC，会让 27 英寸屏幕中央浮着一块窄条。

三条设计原则

1. 简单组件自研，复杂组件复用。

按钮没有遮罩、滚动锁、层级管理这些难点，自研成本极低，却能 100% 掌控设计语言；而 cd-dialog / cd-select 反过来复用 wot-design-uni——难点在别处，重复投入不划算。目前 62 个组件中 8 个是二次封装，其余为自研。

2. 每一条「禁止」都对应一次真实的失败。

框架里有很多看起来奇怪的硬约定：不用 rpx、不让 CSS 变量参与 calc 除法、不用 nth-child……它们不是风格洁癖，每一条背后都是一次具体的编译错误或渲染异常，全部记录在跨端约束清单。

3. 改动只能从上往下传导。

第 1 层 · 设计变量    色彩 / 间距 / 字号 / 圆角 / 动效 / 层级
第 2 层 · 平台适配层   断点判断 / 终端探测 / 主题切换 / 交互态降级
第 3 层 · 组件层       一份 SFC，内部渲染双形态结构

下层禁止反向引用上层。这条限制带来的收益是：改一个品牌色只需要动第 1 层的一行。

与其他库的关系

库	关系
wot-design-uni	底层依赖，锁定 1.14.0。8 个复杂组件在其之上做主题桥接（不改它一行源码、不重编译 SCSS）
uni-app 全家桶	运行时依赖，Apache-2.0。产品名与宣传中不得使用 "uni-app" 字样或暗示官方关联
Feather / Lucide	cd-icon 的 72 个图标衍生自这两个 MIT / ISC 项目，署名已写入 icons.js 头部注释

star-fill 是例外——它是自研几何（外接圆 9.6 / 内接圆 4.0 十点计算），与 Feather、Lucide 无字节重合。

已知的能力边界

以下内容刻意没有实现，避免为了「看起来齐全」付出不成比例的维护成本：

• 表格的虚拟滚动与列宽拖拽
• 上传组件的拖拽（小程序没有 drag 事件体系）
• cd-date-picker 的范围选择（range）
• 瀑布流、级联选择、树形控件等尚未覆盖的组件

TIP

不确定性也是一种文档。把「不做什么」和「做不了什么」写清楚，比让使用方自己撞上去要好。