codedog-ui

CodeDogUI

面向 uni-app 的跨端 UI 框架。一套 Vue3 代码，同时覆盖 H5 移动端、H5 PC 浏览器、微信小程序与 Electron 桌面套壳。

不是「响应式布局」那种两端共用一套视觉的方案，而是让同一个组件在手机与 PC 上呈现各自的交互形态：

80 个组件 · 320 个设计令牌 · 亮暗主题 · 命令式反馈服务 · MIT 许可。

安装

npm i codedog-ui
# 或把整个目录拷进 src/uni_modules/（uni_modules 形态，推荐）

四步接入

<!-- 1. App.vue 引入样式（一次） -->
<style lang="scss">
@import 'codedog-ui/styles';
</style>

// 2. pages.json 配置 easycom
{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^cd-(.*)": "codedog-ui/components/cd-$1/cd-$1.vue",
      "^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue"
    }
  }
}

<!-- 3. 包一层 Provider（必填，主题/密度由它向下广播） -->
<template>
  <cd-config-provider>
    <view class="cd-page cd-page--desktop">…</view>
  </cd-config-provider>
</template>

<!-- 4. 直接用组件 -->
<cd-button type="primary" @click="save">保存</cd-button>
<cd-select v-model="status" :options="options" clearable />
<cd-table :columns="columns" :data="list" />

命令式反馈

import { toast, confirm, alert, loading } from 'codedog-ui'

toast.success('保存成功')

const ok = await confirm({ title: '删除确认', content: '删除后无法恢复' })
if (ok) await remove()

const close = loading('提交中...')
close()

H5 零配置自动挂载宿主；小程序端在页面放一次 <cd-toast-host /> 获得品牌样式，未放自动降级原生 API。

文档

完整文档（每个组件的 Props / Events / Slots / Exposes / 设计说明）：

• 在线文档站：https://doc.ui.codedog.tech
• 本地文档源码：docs/ 目录，npm run docs:dev 启动
• 跨端约束清单：为什么不用 rpx、不让 CSS 变量参与 calc 除法、不用 nth-child……

版本

完整记录见 changelog。

许可

MIT。

• cd-icon 的 73 个图标衍生自 Feather(MIT) 与 Lucide(ISC)，分发时必须保留署名（已写入 components/cd-icon/icons.js 头部注释）
• 依赖 wot-design-uni（MIT），仅 npm 依赖 + CSS 变量桥接，未再分发其源码

关于

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

遇到问题？别客气，直接来找我们。

用得不顺手、发现 Bug、想要某个组件、或者文档没写清楚——随时反馈，我们看到就会处理。 商业合作与定制需求也可以直接邮件联系。觉得好用的话，欢迎到 GitHub 给个 Star 支持一下。