更新记录

1.0.0（2026-08-24） 下载此版本

初始化构建

平台兼容性

uni-app(5.21)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
× √ √ √ √ - √ √ √
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
√ √ √ - - - - - - - - -

其他

多语言 暗黑模式 宽屏模式
√ √ ×

yixin-ui

yixin-ui 是 uni-app 项目的独立、可共享 UI 能力库，跨 H5、微信小程序、支付宝小程序、抖音小程序、Android App、iOS App 六端。包含主题、国际化、网络请求、设备标识、统一存储、工具函数、启动引导能力模块，以及 57 个高复用组件。

📦 本目录为独立可发布包（uni_modules/yixin-ui），内部无任何业务依赖，可通过 HBuilderX 插件市场或 npm 发布复用。MIT License。

👨‍💻 给 AI 开发用的代码架构与修改指南见 AGENTS.md。

快速开始

业务页面直接使用：主题通过 :style="themeStyle"（getThemeStyle）注入 --yx-* 令牌；国际化用 t() / registerLocaleMessages；网络请求用 request / createRequestClient；启动引导用 bootstrapApp。60 行内完成一个可交互主题页示例见各能力文档。

文档目录

本仓库的详细说明按主题拆分，README 仅作为总览与索引：

  • 使用说明书（给人）：各能力与组件的详细用法 →
    • 能力模块：docs/theme.md i18n.md http.md device.md storage.md utils.md bootstrap.md
    • 组件：docs/components/*.md（按组件名 yx-*.md）
    • 待补充规划：docs/todo.md
  • 代码架构与修改指南（给 AI）：AGENTS.md
  • AI 使用说明书（给 AI）：skill/skill.md（能力与组件技能文档见 skill/）
  • 视觉规范（项目级）：../../docs/壹新视觉规范.md

能力模块

模块 说明 详细文档
主题 显示模式 / 哀悼 / 预设色 / 字号 / CSS 令牌 docs/theme.md
国际化 多语言包 / 响应式取文 / 业务注入 / 变更订阅 docs/i18n.md
网络请求 会话 / 弱网重试 / 错误归一 / mock docs/http.md
设备标识 openid / deviceSn / 诊断 / code2session 注入 docs/device.md
统一存储 命名空间 / 类型化 / 过期 docs/storage.md
纯函数工具 脱敏 / 金额 / 日期 / 防抖节流 docs/utils.md
启动引导 bootstrapApp 统一启动流程 docs/bootstrap.md
图标映射 YX_ICON 名称→码点，供 YxIcon docs/components/yx-icon.md

统一入口：yixin-ui/index.ts 从 ./theme、./theme/types、./http/request-client、./i18n、./icons、./device、./bootstrap、./storage、./utils 导出全部能力。宿主 main.ts 注入设备身份（configureDeviceIdentity），App.vue 调用 bootstrapApp 完成启动。

组件

共 57 个高复用组件，位于 yixin-ui/components/，通过 easycom 自动注册，页面模板直接 <yx-xxx> 使用。详细文档见 docs/components/。

框架 / 导航

组件 说明 文档
YxNavigationBar 自定义标题栏（状态栏安全区 / 主题背景 / 返回） yx-navigation-bar
YxMainNavigator 常驻主导航容器（标题栏 + 内容区 + TabBar） yx-main-navigator
YxTabBar 跨端 TabBar（docked / floating / 圆形特殊 Tab） yx-tab-bar
YxFab 浮动操作按钮 yx-fab

基础交互

组件 说明 文档
YxButton 主题化按钮 yx-button
YxIcon 图标（Remix Icon 字体） yx-icon
YxTag 标签 yx-tag
YxBadge 徽标 yx-badge
YxCard 卡片容器 yx-card
YxCell 列表单元格 yx-cell
YxList 列表容器 yx-list
YxSwitch 开关 yx-switch
YxInput 单行输入 yx-input
YxTextarea 多行输入 yx-textarea
YxNumberInput 数字输入步进器 yx-number-input
YxCheckbox 复选框 yx-checkbox
YxRadio 单选框 yx-radio
YxSelect 下拉选择 yx-select
YxForm / YxFormItem 表单容器 / 表单项 yx-form · yx-form-item
YxRate 评分 yx-rate
YxSegmentedControl 分段控件 yx-segmented-control

选择器 / 弹层 / 提示

组件 说明 文档
YxPicker 通用选择器 yx-picker
YxDatePicker 日期 / 时间选择器 yx-date-picker
YxPopup 弹层容器 yx-popup
YxDialog 对话框 yx-dialog
YxToast 轻提示 yx-toast
YxDrawer 抽屉 yx-drawer
YxOverlay 遮罩层 yx-overlay
YxTransition 过渡动画容器 yx-transition
YxEmpty 空状态 yx-empty
YxLoadMore 加载更多 yx-load-more
YxPagination 分页 yx-pagination
YxSwipeAction 滑动操作 yx-swipe-action

业务 / 领域组件

领域组件仅接收标准化数据与展示配置，通过 props / 事件注入；数据获取、价格计算、库存校验、路由跳转由业务层处理。

组件 说明 文档
YxProductCard 商品卡片 yx-product-card
YxCartBar 购物车栏 yx-cart-bar
YxCheckoutBar 结算栏 yx-checkout-bar
YxSkuSelector SKU 规格选择 yx-sku-selector
YxOrderItem 订单条目 yx-order-item
YxOrderStatus 订单状态 yx-order-status
YxCouponCell 优惠券行 yx-coupon-cell
YxDishCard 点餐菜品卡片 yx-dish-card
YxSearchBar 搜索栏 yx-search-bar

工具 / 文本 / 数据展示

组件 说明 文档
YxCountdown 倒计时 yx-countdown
YxSteps 步骤条 yx-steps
YxTable 表格 yx-table
YxNotice 通知条 yx-notice
YxFilePicker 文件选择 yx-file-picker
YxVerificationCode 验证码按钮 yx-verification-code
YxMaskedText 脱敏文本 yx-masked-text
YxCopyable 可复制文本 yx-copyable
YxSelectableText 可选文本 yx-selectable-text

主题设置 / 演示

组件 说明 文档
YxThemeSettings 统一主题设置（显示模式 / 哀悼 / 主题色 / 字号 / 语言） yx-theme-settings
YxThemeDemo 主题效果实时展示（与 ThemeSettings 各自独立、无嵌套关联） yx-theme-demo
YxColorPalette 强调色取色编辑 yx-color-palette
YxComponentDemo 基础组件聚合演示 yx-component-demo

智能助手

组件 说明 文档
YxAiChatPanel AI 对话面板（消息经 props 传入、发送经事件抛出、AI 请求由业务接入） yx-ai-chat-panel

测试

yixin-ui/test/unit/ 提供独立 Jest 单测（theme / i18n / request-client / storage / utils / bootstrap），可随库共享。运行（cwd 为 uni_modules/yixin-ui/test/unit）：

& "D:\HBuilderX\plugins\node\node.exe" node_modules/jest/bin/jest.js

使用约束

  • 背景必须配合 on-* 前景色；使用 --yx-* 令牌，禁止业务页自定义固定 font-size/line-height/letter-spacing/固定色（遮罩等无法用主题令牌的场景除外）。详见 docs/theme.md。
  • 每个使用 --yx-* 的页面最外层根容器须绑定 :style="themeStyle"。
  • 业务页仅用 Yx* 组件与 view/text/scroll-view/image 基础标签，不使用原生交互控件与 uni-* 视觉组件。
  • Remix Icon 加载：小程序端走 jsDelivr CDN，H5 与 App 使用本地 components/yx-icon/yx-icons.ttf 字体。

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT License

Copyright (c) 2024 yxxin-uniappdemo contributors

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

评论列表 撰写评论 向官方投诉

暂无用户评论。