diff --git a/src/pages.json b/src/pages.json
index 3cfb3296..99a15bef 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -1,1003 +1,1010 @@
-{
- "easycom": {
- "autoscan": true,
- "custom": {
- "^u-(.*)": "@/uni_modules/uview-pro/components/u-$1/u-$1.vue"
- }
- },
- "pages": [
- // 演示-组件
- {
- "path": "pages/example/components",
- "style": {
- "navigationBarTitleText": "组件"
- }
- },
- // 关于
- {
- "path": "pages/example/about",
- "style": {
- "navigationBarTitleText": "关于"
- // "navigationStyle": "custom"
- }
- },
- // 关于-关于我
- {
- "path": "pages/example/about/about-me",
- "style": {
- "navigationBarTitleText": "关于我"
- }
- },
- // 关于-版本信息
- {
- "path": "pages/example/about/version",
- "style": {
- "navigationBarTitleText": "版本信息"
- }
- },
- // 关于-开源协议
- {
- "path": "pages/example/about/license",
- "style": {
- "navigationBarTitleText": "开源协议"
- }
- },
- // 关于-贡献者
- {
- "path": "pages/example/about/contributors",
- "style": {
- "navigationBarTitleText": "贡献者"
- }
- },
- // 关于-常见问题
- {
- "path": "pages/example/about/faq",
- "style": {
- "navigationBarTitleText": "常见问题"
- }
- },
- // 关于-使用指南
- {
- "path": "pages/example/about/guide",
- "style": {
- "navigationBarTitleText": "使用指南"
- }
- },
- // 关于-设置
- {
- "path": "pages/example/about/settings",
- "style": {
- "navigationBarTitleText": "设置"
- }
- },
- // 演示-工具
- {
- "path": "pages/example/js",
- "style": {
- "navigationBarTitleText": "工具"
- }
- },
- // 演示-模板
- {
- "path": "pages/example/template",
- "style": {
- "navigationBarTitleText": "模板"
- }
- },
- {
- "path": "pages/example/experienceMap",
- "style": {
- "navigationBarTitleText": "体验地图"
- }
- },
- // fullScreen-压窗屏
- {
- "path": "pages/example/fullScreen",
- "style": {
- "navigationStyle": "custom",
- "app-plus": {
- "animationType": "fade-in",
- "background": "transparent",
- "backgroundColor": "rgba(0,0,0,0)",
- "popGesture": "none"
- }
- }
- }
- ],
- "subPackages": [
- {
- "root": "pages/componentsC",
- "pages": [
- // gap-间隔槽
- {
- "path": "gap/index",
- "style": {
- "navigationBarTitleText": "Gap 间隔槽"
- }
- },
- // subsection分段器
- {
- "path": "subsection/index",
- "style": {
- "navigationBarTitleText": "Subsection 分段器"
- }
- },
- // section 查看更多
- {
- "path": "section/index",
- "style": {
- "navigationBarTitleText": "Section 查看更多"
- }
- },
- // link链接
- {
- "path": "link/index",
- "style": {
- "navigationBarTitleText": "Link 链接"
- }
- },
- // mask遮罩层
- {
- "path": "mask/index",
- "style": {
- "navigationBarTitleText": "Mask 遮罩层"
- }
- },
- // countTo数字滚动
- {
- "path": "countTo/index",
- "style": {
- "navigationBarTitleText": "CountTo 数字滚动"
- }
- },
- // color颜色
- {
- "path": "color/index",
- "style": {
- "navigationBarTitleText": "Color 颜色"
- }
- },
- // countDown倒计时
- {
- "path": "countDown/index",
- "style": {
- "navigationBarTitleText": "CountDown 倒计时"
- }
- },
- // progress进度条
- {
- "path": "progress/index",
- "style": {
- "navigationBarTitleText": "Progress 进度条"
- }
- },
- // alertTips警告提示
- {
- "path": "alertTips/index",
- "style": {
- "navigationBarTitleText": "AlertTips 警告提示"
- }
- },
- // badge 徽标数
- {
- "path": "badge/index",
- "style": {
- "navigationBarTitleText": "Badge 徽标数"
- }
- },
- // button按钮
- {
- "path": "button/index",
- "style": {
- "navigationBarTitleText": "Button 按钮"
- }
- },
- // collapse折叠面板
- {
- "path": "collapse/index",
- "style": {
- "navigationBarTitleText": "Collapse 折叠面板"
- }
- },
- // actionSheet操作菜单
- {
- "path": "actionSheet/index",
- "style": {
- "navigationBarTitleText": "ActionSheet 操作菜单"
- }
- },
- // messageInput验证码输入
- {
- "path": "messageInput/index",
- "style": {
- "navigationBarTitleText": "MessageInput 验证码输入"
- }
- },
- // popup弹窗
- {
- "path": "popup/index",
- "style": {
- "navigationBarTitleText": "Popup 弹窗"
- }
- },
- // listCell
- {
- "path": "cell/index",
- "style": {
- "navigationBarTitleText": "ListCell 列表"
- }
- },
- // numberBox数字输入框
- {
- "path": "numberBox/index",
- "style": {
- "navigationBarTitleText": "NumberBox 步进器"
- }
- },
- // grid宫格布局
- {
- "path": "grid/index",
- "style": {
- "navigationBarTitleText": "Grid 宫格布局"
- }
- },
- // layout栅格布局
- {
- "path": "layout/index",
- "style": {
- "navigationBarTitleText": "Layout 栅格布局"
- }
- },
- // 加载更多
- {
- "path": "loadmore/index",
- "style": {
- "navigationBarTitleText": "Loadmore 加载更多"
- }
- },
- // 文本
- {
- "path": "text/index",
- "style": {
- "navigationBarTitleText": "Text 文本"
- }
- },
- // fab悬浮按钮
- {
- "path": "fab/index",
- "style": {
- "navigationBarTitleText": "Fab 悬浮按钮"
- }
- },
- // pagination分页
- {
- "path": "pagination/index",
- "style": {
- "navigationBarTitleText": "Pagination 分页"
- }
- }
- ]
- },
- {
- "root": "pages/template",
- "pages": [
- // wxCenter 仿微信个人中心
- {
- "path": "wxCenter/index",
- "style": {
- "navigationBarTitleText": "WxCenter 仿微信个人中心"
- }
- },
- // keyboardPay 自定义键盘支付
- {
- "path": "keyboardPay/index",
- "style": {
- "navigationBarTitleText": "KeyboardPay 自定义键盘支付"
- }
- },
- // mallMenu商城分类
- {
- "path": "mallMenu/index2",
- "style": {
- "navigationBarTitleText": "MallMenu 商城分类"
- }
- },
- // mallMenu商城分类
- {
- "path": "mallMenu/index1",
- "style": {
- "navigationBarTitleText": "MallMenu 商城分类"
- }
- },
- // coupon优惠券
- {
- "path": "coupon/index",
- "style": {
- "navigationBarTitleText": "Coupon 优惠券"
- }
- },
- {
- "path": "login/index",
- "style": {
- "navigationBarTitleText": "美团登录"
- }
- },
- // 城市选择
- {
- "path": "citySelect/index",
- "style": {
- "navigationBarTitleText": "城市选择"
- }
- },
- // SubmitBar提交订单栏
- {
- "path": "submitBar/index",
- "style": {
- "navigationBarTitleText": "SubmitBar 提交订单栏"
- }
- },
- // comment评论
- {
- "path": "comment/index",
- "style": {
- "navigationBarTitleText": "评论"
- }
- },
- // comment评论详情
- {
- "path": "comment/reply",
- "style": {
- "navigationBarTitleText": "评论详情"
- }
- },
- // order订单
- {
- "path": "order/index",
- "style": {
- "navigationBarTitleText": "订单"
- }
- },
- // login登录获取验证码
- {
- "path": "login/code",
- "style": {
- "navigationBarTitleText": "登录获取验证码"
- }
- },
- // address用户地址
- {
- "path": "address/index",
- "style": {
- "navigationBarTitleText": "用户地址"
- }
- },
- // address添加用户地址
- {
- "path": "address/addSite",
- "style": {
- "navigationBarTitleText": "添加用户地址"
- }
- },
- // template-模板详情
- {
- "path": "detail/index",
- "style": {
- "navigationBarTitleText": "模板详情"
- }
- }
- ]
- },
- {
- "root": "pages/library",
- "pages": [
- // debounce-节流防抖
- {
- "path": "debounce/index",
- "style": {
- "navigationBarTitleText": "Debounce 节流防抖"
- }
- },
- // deepClone-对象深度克隆
- {
- "path": "deepClone/index",
- "style": {
- "navigationBarTitleText": "DeepClone 对象深度克隆"
- }
- },
- // deepMerge-对象深度合并
- {
- "path": "deepMerge/index",
- "style": {
- "navigationBarTitleText": "DeepMerge 对象深度合并"
- }
- },
- // getRect-元素节点
- {
- "path": "getRect/index",
- "style": {
- "navigationBarTitleText": "GetRect 元素节点"
- }
- },
- // timeFrom-多久之前
- {
- "path": "timeFrom/index",
- "style": {
- "navigationBarTitleText": "TimeFrom 多久之前"
- }
- },
- // http-请求
- {
- "path": "http/index",
- "style": {
- "navigationBarTitleText": "Http 请求"
- }
- },
- // test-规则验证
- {
- "path": "test/index",
- "style": {
- "navigationBarTitleText": "Test 规则验证"
- }
- },
- // mpShare-小程序分享
- {
- "path": "mpShare/index",
- "style": {
- "navigationBarTitleText": "MpShare 小程序分享"
- }
- },
- // color-JS调用颜色
- {
- "path": "color/index",
- "style": {
- "navigationBarTitleText": "Color JS调用颜色"
- }
- },
- // trim-去除空格
- {
- "path": "trim/index",
- "style": {
- "navigationBarTitleText": "Trim 去除空格"
- }
- },
- // random-随机数生成
- {
- "path": "random/index",
- "style": {
- "navigationBarTitleText": "Random 随机数生成"
- }
- },
- // md5加密
- {
- "path": "md5/index",
- "style": {
- "navigationBarTitleText": "Md5 加密"
- }
- },
- // colorSwitch颜色转换
- {
- "path": "colorSwitch/index",
- "style": {
- "navigationBarTitleText": "ColorSwitch 颜色转换"
- }
- },
- // randomArray数组乱序
- {
- "path": "randomArray/index",
- "style": {
- "navigationBarTitleText": "RandomArray 数组乱序"
- }
- },
- // guid全局唯一标识符
- {
- "path": "guid/index",
- "style": {
- "navigationBarTitleText": "Guid 全局唯一标识符"
- }
- },
- // timeFormat时间格式化
- {
- "path": "timeFormat/index",
- "style": {
- "navigationBarTitleText": "TimeFormat 时间格式化"
- }
- }, // route-路由
- {
- "path": "route/index",
- "style": {
- "navigationBarTitleText": "Route 路由"
- }
- },
- // route-路由跳转
- {
- "path": "route/routeTo",
- "style": {
- "navigationBarTitleText": "Route 路由跳转"
- }
- },
- // queryParams-对象转URL参数
- {
- "path": "queryParams/index",
- "style": {
- "navigationBarTitleText": "QueryParams 对象转URL参数"
- }
- }
- ]
- },
- {
- "root": "pages/componentsA",
- "pages": [
- // // parse-富文本解析器
- // {
- // "path": "parse/index",
- // "style": {
- // "navigationBarTitleText": "parse-富文本解析器"
- // }
- // },
- // input-输入框
- {
- "path": "input/index",
- "style": {
- "navigationBarTitleText": "Input 输入框"
- }
- },
- {
- "path": "textarea/index",
- "style": {
- "navigationBarTitleText": "Textarea 输入框"
- }
- },
- // backTop-返回顶部
- {
- "path": "backTop/index",
- "style": {
- "navigationBarTitleText": "BackTop 返回顶部"
- }
- },
- // calendar-日历
- {
- "path": "calendar/index",
- "style": {
- "navigationBarTitleText": "Calendar 日历"
- }
- },
- // form-表单
- {
- "path": "form/index",
- "style": {
- "navigationBarTitleText": "Form 表单"
- }
- },
- // select-列选择器
- {
- "path": "select/index",
- "style": {
- "navigationBarTitleText": "Select 列选择器"
- }
- },
- // slider-滑动选择器
- {
- "path": "slider/index",
- "style": {
- "navigationBarTitleText": "Slider 滑动选择器"
- }
- },
- // fullScreen-压窗屏
- {
- "path": "fullScreen/index",
- "style": {
- "navigationBarTitleText": "FullScreen 压窗屏"
- }
- },
- // navbar-自定义导航栏
- {
- "path": "navbar/index",
- "style": {
- // "navigationBarTitleText": "Navbar 自定义导航栏",
- "navigationStyle": "custom", // 隐藏系统导航栏
- "navigationBarTextStyle": "white" // 状态栏字体为白色
- }
- },
- // field-输入框
- {
- "path": "field/index",
- "style": {
- "navigationBarTitleText": "Field 输入框"
- }
- },
- // modal-模态框
- {
- "path": "modal/index",
- "style": {
- "navigationBarTitleText": "Modal 模态框"
- }
- },
- // indexList索引列表
- {
- "path": "indexList/index",
- "style": {
- "navigationBarTitleText": "IndexList 索引列表"
- }
- },
- // empty内容为空
- {
- "path": "empty/index",
- "style": {
- "navigationBarTitleText": "Empty 内容为空"
- }
- },
- // // avatarCropper-头像裁剪
- // {
- // "path": "avatarCropper/index",
- // "style": {
- // "navigationBarTitleText": "AvatarCropper 头像裁剪"
- // }
- // },
- // noNetwork没有网络
- {
- "path": "noNetwork/index",
- "style": {
- "navigationBarTitleText": "NoNetwork 没有网络"
- }
- },
- // icon字体图标
- {
- "path": "icon/index",
- "style": {
- "navigationBarTitleText": "Icon 字体图标"
- }
- },
- // avatar-用户头像展示
- {
- "path": "avatar/index",
- "style": {
- "navigationBarTitleText": "Avatar 用户头像展示"
- }
- },
- // keyboard键盘
- {
- "path": "keyboard/index",
- "style": {
- "navigationBarTitleText": "Keyboard 键盘"
- }
- },
- // 图片懒加载
- {
- "path": "lazyLoad/index",
- "style": {
- "navigationBarTitleText": "LazyLoad 懒加载"
- }
- },
- // tabs切换
- {
- "path": "tabs/index",
- "style": {
- "navigationBarTitleText": "Tabs 切换"
- }
- },
- // tag标签
- {
- "path": "tag/index",
- "style": {
- "navigationBarTitleText": "Tag 标签"
- }
- },
- // timeLine时间轴
- {
- "path": "timeLine/index",
- "style": {
- "navigationBarTitleText": "TimeLine 时间轴"
- }
- },
- // toast轻提示
- {
- "path": "toast/index",
- "style": {
- "navigationBarTitleText": "Toast 轻提示"
- }
- },
- // topTips消息提示
- {
- "path": "topTips/index",
- "style": {
- "navigationBarTitleText": "TopTips 消息提示"
- }
- },
- // Code-验证码倒计时
- {
- "path": "verificationCode/index",
- "style": {
- "navigationBarTitleText": "VerificationCode 验证码倒计时"
- }
- }
- ]
- },
- {
- "root": "pages/componentsB",
- "pages": [
- // dropdown-下拉菜单
- {
- "path": "dropdown/index",
- "style": {
- "navigationBarTitleText": "Dropdown 下拉菜单"
- }
- },
- // tabbar-底部导航栏
- {
- "path": "tabbar/index",
- "style": {
- "navigationBarTitleText": "Tabbar 底部导航栏"
- }
- },
- // line-线条
- {
- "path": "line/index",
- "style": {
- "navigationBarTitleText": "Line 线条"
- }
- },
- // image-图片
- {
- "path": "image/index",
- "style": {
- "navigationBarTitleText": "Image 图片"
- }
- },
- // card-卡片
- {
- "path": "card/index",
- "style": {
- "navigationBarTitleText": "Card 卡片"
- }
- },
- // divider-分割线
- {
- "path": "divider/index",
- "style": {
- "navigationBarTitleText": "Divider 分割线"
- }
- },
- // picker选择器
- {
- "path": "picker/index",
- "style": {
- "navigationBarTitleText": "Picker 选择器"
- }
- }, // noticeBar通告栏
- {
- "path": "noticeBar/index",
- "style": {
- "navigationBarTitleText": "NoticeBar 通告栏"
- }
- },
- // checkbox-复选框
- {
- "path": "checkbox/index",
- "style": {
- "navigationBarTitleText": "Checkbox 复选框"
- }
- },
- // radio-单选框
- {
- "path": "radio/index",
- "style": {
- "navigationBarTitleText": "Radio 单选框"
- }
- },
- // loading-加载动画
- {
- "path": "loading/index",
- "style": {
- "navigationBarTitleText": "Loading 加载动画"
- }
- },
- // loadingPopup-加载弹窗
- {
- "path": "loadingPopup/index",
- "style": {
- "navigationBarTitleText": "LoadingPopup 加载弹窗"
- }
- },
- // switch-开关选择器
- {
- "path": "switch/index",
- "style": {
- "navigationBarTitleText": "Switch 开关选择器"
- }
- },
- // 骨架屏
- {
- "path": "skeleton/index",
- "style": {
- "navigationBarTitleText": "Skeleton 骨架屏"
- }
- }, // upload上传
- {
- "path": "upload/index",
- "style": {
- "navigationBarTitleText": "Upload 上传"
- }
- },
- // waterfall瀑布流
- // #ifndef MP-TOUTIAO
- {
- "path": "waterfall/index",
- "style": {
- "navigationBarTitleText": "Waterfall 瀑布流"
- }
- },
- // #endif
- // table表格
- {
- "path": "table/index",
- "style": {
- "navigationBarTitleText": "Table 表格"
- }
- },
- // rate评分
- {
- "path": "rate/index",
- "style": {
- "navigationBarTitleText": "Rate 评分"
- }
- },
- // readMore显示更多
- {
- "path": "readMore/index",
- "style": {
- "navigationBarTitleText": "ReadMore 查看更多"
- }
- },
- // search搜索框
- {
- "path": "search/index",
- "style": {
- "navigationBarTitleText": "Search 搜索框"
- }
- },
- // steps步骤条
- {
- "path": "steps/index",
- "style": {
- "navigationBarTitleText": "Steps 步骤条"
- }
- },
- // sticky吸顶
- {
- "path": "sticky/index",
- "style": {
- "navigationBarTitleText": "Sticky 吸顶"
- }
- },
- // swiper轮播图
- {
- "path": "swiper/index",
- "style": {
- "navigationBarTitleText": "Swiper 轮播图"
- }
- },
- // swipeAction-左滑删除
- {
- "path": "swipeAction/index",
- "style": {
- "navigationBarTitleText": "SwipeAction 左滑删除"
- }
- },
- {
- "path": "transition/index",
- "style": {
- "navigationBarTitleText": "Transition 动画"
- }
- }
- ]
- },
- {
- "root": "pages/other",
- "pages": [
- {
- "path": "theme/index",
- "style": {
- "navigationBarTitleText": "Theme 主题管理"
- }
- },
- {
- "path": "locale/index",
- "style": {
- "navigationBarTitleText": "locale-国际化"
- }
- }
- ]
- },
- {
- "root": "pages/scenes",
- "pages": [
- {
- "path": "index",
- "style": {
- "navigationBarTitleText": "实用场景"
- }
- },
- {
- "path": "todo/index",
- "style": {
- "navigationBarTitleText": "待办事项"
- }
- },
- {
- "path": "notes/index",
- "style": {
- "navigationBarTitleText": "我的笔记"
- }
- },
- {
- "path": "dashboard/index",
- "style": {
- "navigationBarTitleText": "数据统计"
- }
- },
- {
- "path": "favorites/index",
- "style": {
- "navigationBarTitleText": "我的收藏"
- }
- }
- ]
- },
- {
- "root": "pages/hooks",
- "pages": [
- {
- "path": "useModal/index",
- "style": {
- "navigationBarTitleText": "useModal 模态框"
- }
- },
- {
- "path": "useToast/index",
- "style": {
- "navigationBarTitleText": "useToast 提示"
- }
- }
- ]
- }
- ],
- "preloadRule": {
- "pages/example/components": {
- "network": "all",
- "packages": ["pages/componentsA", "pages/componentsB", "pages/componentsC"]
- }
- },
- "globalStyle": {
- "backgroundColor": "@bgColor",
- "backgroundColorBottom": "@bgColorBottom",
- "backgroundColorTop": "@bgColorTop",
- "backgroundTextStyle": "@bgTxtStyle",
- "navigationBarBackgroundColor": "@navBgColor",
- "navigationBarTextStyle": "@navTxtStyle",
- "navigationBarTitleText": "uView Pro",
- "navigationStyle": "custom"
- },
- "tabBar": {
- "color": "@tabFontColor",
- "selectedColor": "@tabSelectedColor",
- "backgroundColor": "@tabBgColor",
- "borderStyle": "@tabBorderStyle",
- "list": [
- {
- "pagePath": "pages/example/components"
- },
- {
- "pagePath": "pages/example/js"
- },
- {
- "pagePath": "pages/example/experienceMap"
- },
- {
- "pagePath": "pages/example/template"
- },
- {
- "pagePath": "pages/example/about"
- }
- ]
- }
-}
+{
+ "easycom": {
+ "autoscan": true,
+ "custom": {
+ "^u-(.*)": "@/uni_modules/uview-pro/components/u-$1/u-$1.vue"
+ }
+ },
+ "pages": [
+ // 演示-组件
+ {
+ "path": "pages/example/components",
+ "style": {
+ "navigationBarTitleText": "组件"
+ }
+ },
+ // 关于
+ {
+ "path": "pages/example/about",
+ "style": {
+ "navigationBarTitleText": "关于"
+ // "navigationStyle": "custom"
+ }
+ },
+ // 关于-关于我
+ {
+ "path": "pages/example/about/about-me",
+ "style": {
+ "navigationBarTitleText": "关于我"
+ }
+ },
+ // 关于-版本信息
+ {
+ "path": "pages/example/about/version",
+ "style": {
+ "navigationBarTitleText": "版本信息"
+ }
+ },
+ // 关于-开源协议
+ {
+ "path": "pages/example/about/license",
+ "style": {
+ "navigationBarTitleText": "开源协议"
+ }
+ },
+ // 关于-贡献者
+ {
+ "path": "pages/example/about/contributors",
+ "style": {
+ "navigationBarTitleText": "贡献者"
+ }
+ },
+ // 关于-常见问题
+ {
+ "path": "pages/example/about/faq",
+ "style": {
+ "navigationBarTitleText": "常见问题"
+ }
+ },
+ // 关于-使用指南
+ {
+ "path": "pages/example/about/guide",
+ "style": {
+ "navigationBarTitleText": "使用指南"
+ }
+ },
+ // 关于-设置
+ {
+ "path": "pages/example/about/settings",
+ "style": {
+ "navigationBarTitleText": "设置"
+ }
+ },
+ // 演示-工具
+ {
+ "path": "pages/example/js",
+ "style": {
+ "navigationBarTitleText": "工具"
+ }
+ },
+ // 演示-模板
+ {
+ "path": "pages/example/template",
+ "style": {
+ "navigationBarTitleText": "模板"
+ }
+ },
+ {
+ "path": "pages/example/experienceMap",
+ "style": {
+ "navigationBarTitleText": "体验地图"
+ }
+ },
+ // fullScreen-压窗屏
+ {
+ "path": "pages/example/fullScreen",
+ "style": {
+ "navigationStyle": "custom",
+ "app-plus": {
+ "animationType": "fade-in",
+ "background": "transparent",
+ "backgroundColor": "rgba(0,0,0,0)",
+ "popGesture": "none"
+ }
+ }
+ }
+ ],
+ "subPackages": [
+ {
+ "root": "pages/componentsC",
+ "pages": [
+ // gap-间隔槽
+ {
+ "path": "gap/index",
+ "style": {
+ "navigationBarTitleText": "Gap 间隔槽"
+ }
+ },
+ // subsection分段器
+ {
+ "path": "subsection/index",
+ "style": {
+ "navigationBarTitleText": "Subsection 分段器"
+ }
+ },
+ // section 查看更多
+ {
+ "path": "section/index",
+ "style": {
+ "navigationBarTitleText": "Section 查看更多"
+ }
+ },
+ // link链接
+ {
+ "path": "link/index",
+ "style": {
+ "navigationBarTitleText": "Link 链接"
+ }
+ },
+ // mask遮罩层
+ {
+ "path": "mask/index",
+ "style": {
+ "navigationBarTitleText": "Mask 遮罩层"
+ }
+ },
+ // countTo数字滚动
+ {
+ "path": "countTo/index",
+ "style": {
+ "navigationBarTitleText": "CountTo 数字滚动"
+ }
+ },
+ // color颜色
+ {
+ "path": "color/index",
+ "style": {
+ "navigationBarTitleText": "Color 颜色"
+ }
+ },
+ // countDown倒计时
+ {
+ "path": "countDown/index",
+ "style": {
+ "navigationBarTitleText": "CountDown 倒计时"
+ }
+ },
+ // progress进度条
+ {
+ "path": "progress/index",
+ "style": {
+ "navigationBarTitleText": "Progress 进度条"
+ }
+ },
+ // alertTips警告提示
+ {
+ "path": "alertTips/index",
+ "style": {
+ "navigationBarTitleText": "AlertTips 警告提示"
+ }
+ },
+ // badge 徽标数
+ {
+ "path": "badge/index",
+ "style": {
+ "navigationBarTitleText": "Badge 徽标数"
+ }
+ },
+ // button按钮
+ {
+ "path": "button/index",
+ "style": {
+ "navigationBarTitleText": "Button 按钮"
+ }
+ },
+ // collapse折叠面板
+ {
+ "path": "collapse/index",
+ "style": {
+ "navigationBarTitleText": "Collapse 折叠面板"
+ }
+ },
+ // actionSheet操作菜单
+ {
+ "path": "actionSheet/index",
+ "style": {
+ "navigationBarTitleText": "ActionSheet 操作菜单"
+ }
+ },
+ // messageInput验证码输入
+ {
+ "path": "messageInput/index",
+ "style": {
+ "navigationBarTitleText": "MessageInput 验证码输入"
+ }
+ },
+ // popup弹窗
+ {
+ "path": "popup/index",
+ "style": {
+ "navigationBarTitleText": "Popup 弹窗"
+ }
+ },
+ // listCell
+ {
+ "path": "cell/index",
+ "style": {
+ "navigationBarTitleText": "ListCell 列表"
+ }
+ },
+ // numberBox数字输入框
+ {
+ "path": "numberBox/index",
+ "style": {
+ "navigationBarTitleText": "NumberBox 步进器"
+ }
+ },
+ // grid宫格布局
+ {
+ "path": "grid/index",
+ "style": {
+ "navigationBarTitleText": "Grid 宫格布局"
+ }
+ },
+ // layout栅格布局
+ {
+ "path": "layout/index",
+ "style": {
+ "navigationBarTitleText": "Layout 栅格布局"
+ }
+ },
+ // 加载更多
+ {
+ "path": "loadmore/index",
+ "style": {
+ "navigationBarTitleText": "Loadmore 加载更多"
+ }
+ },
+ // 文本
+ {
+ "path": "text/index",
+ "style": {
+ "navigationBarTitleText": "Text 文本"
+ }
+ },
+ // fab悬浮按钮
+ {
+ "path": "fab/index",
+ "style": {
+ "navigationBarTitleText": "Fab 悬浮按钮"
+ }
+ },
+ // pagination分页
+ {
+ "path": "pagination/index",
+ "style": {
+ "navigationBarTitleText": "Pagination 分页"
+ }
+ }
+ ]
+ },
+ {
+ "root": "pages/template",
+ "pages": [
+ // wxCenter 仿微信个人中心
+ {
+ "path": "wxCenter/index",
+ "style": {
+ "navigationBarTitleText": "WxCenter 仿微信个人中心"
+ }
+ },
+ // keyboardPay 自定义键盘支付
+ {
+ "path": "keyboardPay/index",
+ "style": {
+ "navigationBarTitleText": "KeyboardPay 自定义键盘支付"
+ }
+ },
+ // mallMenu商城分类
+ {
+ "path": "mallMenu/index2",
+ "style": {
+ "navigationBarTitleText": "MallMenu 商城分类"
+ }
+ },
+ // mallMenu商城分类
+ {
+ "path": "mallMenu/index1",
+ "style": {
+ "navigationBarTitleText": "MallMenu 商城分类"
+ }
+ },
+ // coupon优惠券
+ {
+ "path": "coupon/index",
+ "style": {
+ "navigationBarTitleText": "Coupon 优惠券"
+ }
+ },
+ {
+ "path": "login/index",
+ "style": {
+ "navigationBarTitleText": "美团登录"
+ }
+ },
+ // 城市选择
+ {
+ "path": "citySelect/index",
+ "style": {
+ "navigationBarTitleText": "城市选择"
+ }
+ },
+ // SubmitBar提交订单栏
+ {
+ "path": "submitBar/index",
+ "style": {
+ "navigationBarTitleText": "SubmitBar 提交订单栏"
+ }
+ },
+ // comment评论
+ {
+ "path": "comment/index",
+ "style": {
+ "navigationBarTitleText": "评论"
+ }
+ },
+ // comment评论详情
+ {
+ "path": "comment/reply",
+ "style": {
+ "navigationBarTitleText": "评论详情"
+ }
+ },
+ // order订单
+ {
+ "path": "order/index",
+ "style": {
+ "navigationBarTitleText": "订单"
+ }
+ },
+ // login登录获取验证码
+ {
+ "path": "login/code",
+ "style": {
+ "navigationBarTitleText": "登录获取验证码"
+ }
+ },
+ // address用户地址
+ {
+ "path": "address/index",
+ "style": {
+ "navigationBarTitleText": "用户地址"
+ }
+ },
+ // address添加用户地址
+ {
+ "path": "address/addSite",
+ "style": {
+ "navigationBarTitleText": "添加用户地址"
+ }
+ },
+ // template-模板详情
+ {
+ "path": "detail/index",
+ "style": {
+ "navigationBarTitleText": "模板详情"
+ }
+ }
+ ]
+ },
+ {
+ "root": "pages/library",
+ "pages": [
+ // debounce-节流防抖
+ {
+ "path": "debounce/index",
+ "style": {
+ "navigationBarTitleText": "Debounce 节流防抖"
+ }
+ },
+ // deepClone-对象深度克隆
+ {
+ "path": "deepClone/index",
+ "style": {
+ "navigationBarTitleText": "DeepClone 对象深度克隆"
+ }
+ },
+ // deepMerge-对象深度合并
+ {
+ "path": "deepMerge/index",
+ "style": {
+ "navigationBarTitleText": "DeepMerge 对象深度合并"
+ }
+ },
+ // getRect-元素节点
+ {
+ "path": "getRect/index",
+ "style": {
+ "navigationBarTitleText": "GetRect 元素节点"
+ }
+ },
+ // timeFrom-多久之前
+ {
+ "path": "timeFrom/index",
+ "style": {
+ "navigationBarTitleText": "TimeFrom 多久之前"
+ }
+ },
+ // http-请求
+ {
+ "path": "http/index",
+ "style": {
+ "navigationBarTitleText": "Http 请求"
+ }
+ },
+ // test-规则验证
+ {
+ "path": "test/index",
+ "style": {
+ "navigationBarTitleText": "Test 规则验证"
+ }
+ },
+ // mpShare-小程序分享
+ {
+ "path": "mpShare/index",
+ "style": {
+ "navigationBarTitleText": "MpShare 小程序分享"
+ }
+ },
+ // color-JS调用颜色
+ {
+ "path": "color/index",
+ "style": {
+ "navigationBarTitleText": "Color JS调用颜色"
+ }
+ },
+ // trim-去除空格
+ {
+ "path": "trim/index",
+ "style": {
+ "navigationBarTitleText": "Trim 去除空格"
+ }
+ },
+ // random-随机数生成
+ {
+ "path": "random/index",
+ "style": {
+ "navigationBarTitleText": "Random 随机数生成"
+ }
+ },
+ // md5加密
+ {
+ "path": "md5/index",
+ "style": {
+ "navigationBarTitleText": "Md5 加密"
+ }
+ },
+ // colorSwitch颜色转换
+ {
+ "path": "colorSwitch/index",
+ "style": {
+ "navigationBarTitleText": "ColorSwitch 颜色转换"
+ }
+ },
+ // randomArray数组乱序
+ {
+ "path": "randomArray/index",
+ "style": {
+ "navigationBarTitleText": "RandomArray 数组乱序"
+ }
+ },
+ // guid全局唯一标识符
+ {
+ "path": "guid/index",
+ "style": {
+ "navigationBarTitleText": "Guid 全局唯一标识符"
+ }
+ },
+ // timeFormat时间格式化
+ {
+ "path": "timeFormat/index",
+ "style": {
+ "navigationBarTitleText": "TimeFormat 时间格式化"
+ }
+ }, // route-路由
+ {
+ "path": "route/index",
+ "style": {
+ "navigationBarTitleText": "Route 路由"
+ }
+ },
+ // route-路由跳转
+ {
+ "path": "route/routeTo",
+ "style": {
+ "navigationBarTitleText": "Route 路由跳转"
+ }
+ },
+ // queryParams-对象转URL参数
+ {
+ "path": "queryParams/index",
+ "style": {
+ "navigationBarTitleText": "QueryParams 对象转URL参数"
+ }
+ }
+ ]
+ },
+ {
+ "root": "pages/componentsA",
+ "pages": [
+ // // parse-富文本解析器
+ // {
+ // "path": "parse/index",
+ // "style": {
+ // "navigationBarTitleText": "parse-富文本解析器"
+ // }
+ // },
+ // input-输入框
+ {
+ "path": "input/index",
+ "style": {
+ "navigationBarTitleText": "Input 输入框"
+ }
+ },
+ {
+ "path": "textarea/index",
+ "style": {
+ "navigationBarTitleText": "Textarea 输入框"
+ }
+ },
+ // backTop-返回顶部
+ {
+ "path": "backTop/index",
+ "style": {
+ "navigationBarTitleText": "BackTop 返回顶部"
+ }
+ },
+ // calendar-日历
+ {
+ "path": "calendar/index",
+ "style": {
+ "navigationBarTitleText": "Calendar 日历"
+ }
+ },
+ // form-表单
+ {
+ "path": "form/index",
+ "style": {
+ "navigationBarTitleText": "Form 表单"
+ }
+ },
+ // select-列选择器
+ {
+ "path": "select/index",
+ "style": {
+ "navigationBarTitleText": "Select 列选择器"
+ }
+ },
+ // slider-滑动选择器
+ {
+ "path": "slider/index",
+ "style": {
+ "navigationBarTitleText": "Slider 滑动选择器"
+ }
+ },
+ // fullScreen-压窗屏
+ {
+ "path": "fullScreen/index",
+ "style": {
+ "navigationBarTitleText": "FullScreen 压窗屏"
+ }
+ },
+ // navbar-自定义导航栏
+ {
+ "path": "navbar/index",
+ "style": {
+ // "navigationBarTitleText": "Navbar 自定义导航栏",
+ "navigationStyle": "custom", // 隐藏系统导航栏
+ "navigationBarTextStyle": "white" // 状态栏字体为白色
+ }
+ },
+ // field-输入框
+ {
+ "path": "field/index",
+ "style": {
+ "navigationBarTitleText": "Field 输入框"
+ }
+ },
+ // modal-模态框
+ {
+ "path": "modal/index",
+ "style": {
+ "navigationBarTitleText": "Modal 模态框"
+ }
+ },
+ // indexList索引列表
+ {
+ "path": "indexList/index",
+ "style": {
+ "navigationBarTitleText": "IndexList 索引列表"
+ }
+ },
+ // empty内容为空
+ {
+ "path": "empty/index",
+ "style": {
+ "navigationBarTitleText": "Empty 内容为空"
+ }
+ },
+ // // avatarCropper-头像裁剪
+ // {
+ // "path": "avatarCropper/index",
+ // "style": {
+ // "navigationBarTitleText": "AvatarCropper 头像裁剪"
+ // }
+ // },
+ // noNetwork没有网络
+ {
+ "path": "noNetwork/index",
+ "style": {
+ "navigationBarTitleText": "NoNetwork 没有网络"
+ }
+ },
+ // icon字体图标
+ {
+ "path": "icon/index",
+ "style": {
+ "navigationBarTitleText": "Icon 字体图标"
+ }
+ },
+ // avatar-用户头像展示
+ {
+ "path": "avatar/index",
+ "style": {
+ "navigationBarTitleText": "Avatar 用户头像展示"
+ }
+ },
+ // keyboard键盘
+ {
+ "path": "keyboard/index",
+ "style": {
+ "navigationBarTitleText": "Keyboard 键盘"
+ }
+ },
+ // 图片懒加载
+ {
+ "path": "lazyLoad/index",
+ "style": {
+ "navigationBarTitleText": "LazyLoad 懒加载"
+ }
+ },
+ // tabs切换
+ {
+ "path": "tabs/index",
+ "style": {
+ "navigationBarTitleText": "Tabs 切换"
+ }
+ },
+ // tag标签
+ {
+ "path": "tag/index",
+ "style": {
+ "navigationBarTitleText": "Tag 标签"
+ }
+ },
+ // timeLine时间轴
+ {
+ "path": "timeLine/index",
+ "style": {
+ "navigationBarTitleText": "TimeLine 时间轴"
+ }
+ },
+ // toast轻提示
+ {
+ "path": "toast/index",
+ "style": {
+ "navigationBarTitleText": "Toast 轻提示"
+ }
+ },
+ // topTips消息提示
+ {
+ "path": "topTips/index",
+ "style": {
+ "navigationBarTitleText": "TopTips 消息提示"
+ }
+ },
+ // Code-验证码倒计时
+ {
+ "path": "verificationCode/index",
+ "style": {
+ "navigationBarTitleText": "VerificationCode 验证码倒计时"
+ }
+ }
+ ]
+ },
+ {
+ "root": "pages/componentsB",
+ "pages": [
+ // dropdown-下拉菜单
+ {
+ "path": "dropdown/index",
+ "style": {
+ "navigationBarTitleText": "Dropdown 下拉菜单"
+ }
+ },
+ // tabbar-底部导航栏
+ {
+ "path": "tabbar/index",
+ "style": {
+ "navigationBarTitleText": "Tabbar 底部导航栏"
+ }
+ },
+ // line-线条
+ {
+ "path": "line/index",
+ "style": {
+ "navigationBarTitleText": "Line 线条"
+ }
+ },
+ // image-图片
+ {
+ "path": "image/index",
+ "style": {
+ "navigationBarTitleText": "Image 图片"
+ }
+ },
+ // card-卡片
+ {
+ "path": "card/index",
+ "style": {
+ "navigationBarTitleText": "Card 卡片"
+ }
+ },
+ // divider-分割线
+ {
+ "path": "divider/index",
+ "style": {
+ "navigationBarTitleText": "Divider 分割线"
+ }
+ },
+ // picker选择器
+ {
+ "path": "picker/index",
+ "style": {
+ "navigationBarTitleText": "Picker 选择器"
+ }
+ }, // noticeBar通告栏
+ {
+ "path": "noticeBar/index",
+ "style": {
+ "navigationBarTitleText": "NoticeBar 通告栏"
+ }
+ },
+ // checkbox-复选框
+ {
+ "path": "checkbox/index",
+ "style": {
+ "navigationBarTitleText": "Checkbox 复选框"
+ }
+ },
+ // radio-单选框
+ {
+ "path": "radio/index",
+ "style": {
+ "navigationBarTitleText": "Radio 单选框"
+ }
+ },
+ // loading-加载动画
+ {
+ "path": "loading/index",
+ "style": {
+ "navigationBarTitleText": "Loading 加载动画"
+ }
+ },
+ // loadingPopup-加载弹窗
+ {
+ "path": "loadingPopup/index",
+ "style": {
+ "navigationBarTitleText": "LoadingPopup 加载弹窗"
+ }
+ },
+ // switch-开关选择器
+ {
+ "path": "switch/index",
+ "style": {
+ "navigationBarTitleText": "Switch 开关选择器"
+ }
+ },
+ // 骨架屏
+ {
+ "path": "skeleton/index",
+ "style": {
+ "navigationBarTitleText": "Skeleton 骨架屏"
+ }
+ }, // upload上传
+ {
+ "path": "upload/index",
+ "style": {
+ "navigationBarTitleText": "Upload 上传"
+ }
+ },
+ // waterfall瀑布流
+ // #ifndef MP-TOUTIAO
+ {
+ "path": "waterfall/index",
+ "style": {
+ "navigationBarTitleText": "Waterfall 瀑布流"
+ }
+ },
+ // #endif
+ // table表格
+ {
+ "path": "table/index",
+ "style": {
+ "navigationBarTitleText": "Table 表格"
+ }
+ },
+ // rate评分
+ {
+ "path": "rate/index",
+ "style": {
+ "navigationBarTitleText": "Rate 评分"
+ }
+ },
+ // readMore显示更多
+ {
+ "path": "readMore/index",
+ "style": {
+ "navigationBarTitleText": "ReadMore 查看更多"
+ }
+ },
+ // search搜索框
+ {
+ "path": "search/index",
+ "style": {
+ "navigationBarTitleText": "Search 搜索框"
+ }
+ },
+ // steps步骤条
+ {
+ "path": "steps/index",
+ "style": {
+ "navigationBarTitleText": "Steps 步骤条"
+ }
+ },
+ // sticky吸顶
+ {
+ "path": "sticky/index",
+ "style": {
+ "navigationBarTitleText": "Sticky 吸顶"
+ }
+ },
+ // swiper轮播图
+ {
+ "path": "swiper/index",
+ "style": {
+ "navigationBarTitleText": "Swiper 轮播图"
+ }
+ },
+ // swipeAction-左滑删除
+ {
+ "path": "swipeAction/index",
+ "style": {
+ "navigationBarTitleText": "SwipeAction 左滑删除"
+ }
+ },
+ // colorPicker-颜色选择器
+ {
+ "path": "colorPicker/index",
+ "style": {
+ "navigationBarTitleText": "ColorPicker 颜色选择器"
+ }
+ },
+ {
+ "path": "transition/index",
+ "style": {
+ "navigationBarTitleText": "Transition 动画"
+ }
+ }
+ ]
+ },
+ {
+ "root": "pages/other",
+ "pages": [
+ {
+ "path": "theme/index",
+ "style": {
+ "navigationBarTitleText": "Theme 主题管理"
+ }
+ },
+ {
+ "path": "locale/index",
+ "style": {
+ "navigationBarTitleText": "locale-国际化"
+ }
+ }
+ ]
+ },
+ {
+ "root": "pages/scenes",
+ "pages": [
+ {
+ "path": "index",
+ "style": {
+ "navigationBarTitleText": "实用场景"
+ }
+ },
+ {
+ "path": "todo/index",
+ "style": {
+ "navigationBarTitleText": "待办事项"
+ }
+ },
+ {
+ "path": "notes/index",
+ "style": {
+ "navigationBarTitleText": "我的笔记"
+ }
+ },
+ {
+ "path": "dashboard/index",
+ "style": {
+ "navigationBarTitleText": "数据统计"
+ }
+ },
+ {
+ "path": "favorites/index",
+ "style": {
+ "navigationBarTitleText": "我的收藏"
+ }
+ }
+ ]
+ },
+ {
+ "root": "pages/hooks",
+ "pages": [
+ {
+ "path": "useModal/index",
+ "style": {
+ "navigationBarTitleText": "useModal 模态框"
+ }
+ },
+ {
+ "path": "useToast/index",
+ "style": {
+ "navigationBarTitleText": "useToast 提示"
+ }
+ }
+ ]
+ }
+ ],
+ "preloadRule": {
+ "pages/example/components": {
+ "network": "all",
+ "packages": ["pages/componentsA", "pages/componentsB", "pages/componentsC"]
+ }
+ },
+ "globalStyle": {
+ "backgroundColor": "@bgColor",
+ "backgroundColorBottom": "@bgColorBottom",
+ "backgroundColorTop": "@bgColorTop",
+ "backgroundTextStyle": "@bgTxtStyle",
+ "navigationBarBackgroundColor": "@navBgColor",
+ "navigationBarTextStyle": "@navTxtStyle",
+ "navigationBarTitleText": "uView Pro",
+ "navigationStyle": "custom"
+ },
+ "tabBar": {
+ "color": "@tabFontColor",
+ "selectedColor": "@tabSelectedColor",
+ "backgroundColor": "@tabBgColor",
+ "borderStyle": "@tabBorderStyle",
+ "list": [
+ {
+ "pagePath": "pages/example/components"
+ },
+ {
+ "pagePath": "pages/example/js"
+ },
+ {
+ "pagePath": "pages/example/experienceMap"
+ },
+ {
+ "pagePath": "pages/example/template"
+ },
+ {
+ "pagePath": "pages/example/about"
+ }
+ ]
+ }
+}
diff --git a/src/pages/componentsB/colorPicker/index.vue b/src/pages/componentsB/colorPicker/index.vue
new file mode 100644
index 00000000..6b08a670
--- /dev/null
+++ b/src/pages/componentsB/colorPicker/index.vue
@@ -0,0 +1,301 @@
+
+
+
+
+
+
+ 弹窗模式
+
+
+
+
+
+ {{ popupColor }}
+
+
+ 打开颜色选择器
+
+
+
+
+
+ 内联模式
+
+
+
+ 当前颜色：
+ {{ inlineColor }}
+
+
+
+
+
+
+ 仅单色模式（无渐变）
+
+
+
+
+ {{ solidColor }}
+
+
+ 选择单色
+
+
+
+
+
+
+ 圆形触发器
+
+
+ {{
+ circleColor
+ }}
+
+
+
+
+
+ 直接使用颜色选择面板
+
+
+
+
+
+
+
+ 弹窗模式参数配置
+
+ 颜色模式
+
+
+
+ 显示透明度
+
+
+
+ 显示历史记录
+
+
+
+ 显示预设颜色
+
+
+
+ 触发器形状
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/pages/example/components.config.ts b/src/pages/example/components.config.ts
index a9120e90..4058e5a0 100644
--- a/src/pages/example/components.config.ts
+++ b/src/pages/example/components.config.ts
@@ -219,6 +219,14 @@ export default [
desc: '开关组件，用于二元状态切换与即时交互。',
desc_en: 'Switch component for binary state toggling and instant interactions.'
},
+ {
+ path: '/pages/componentsB/colorPicker/index',
+ icon: 'color',
+ title: 'ColorPicker 颜色选择器',
+ title_en: 'ColorPicker',
+ desc: '颜色选择器，支持弹窗和内联模式，可选择单色或渐变色。',
+ desc_en: 'Color picker with popup/inline modes for solid and gradient colors.'
+ },
{
path: '/pages/componentsA/slider/index',
icon: 'slider',
diff --git a/src/uni_modules/uview-pro/components/u-color-picker/README.md b/src/uni_modules/uview-pro/components/u-color-picker/README.md
new file mode 100644
index 00000000..344186a6
--- /dev/null
+++ b/src/uni_modules/uview-pro/components/u-color-picker/README.md
@@ -0,0 +1,216 @@
+# ColorPicker 颜色选择器
+
+该组件用于颜色选择，包含弹窗模式（`u-color-picker`）和内联面板模式（`u-color-select-panel`）两个组件，支持单色、渐变色、透明度调节、历史记录、预设颜色、吸管取色等功能，可根据场景灵活使用。
+
+## 平台差异说明
+
+| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
+| :--: | :--: | :--: | :--: | :--: | :--: | :--: |
+| √ | √ | √ | √ | √ | √ | √ |
+
+> 注意：吸管取色（EyeDropper）功能仅在支持 `EyeDropper API` 的浏览器环境（如 Chrome Desktop）中可用，小程序和移动端 H5 环境暂不支持。
+
+## 基本使用
+
+### 弹窗模式
+
+使用 `u-color-picker` 组件，通过 `v-model:show` 控制弹窗显隐，`v-model` 双向绑定颜色值。
+
+```html
+
+
+ 打开颜色选择器
+
+
+
+
+
+
+
+```
+
+### 内联模式
+
+使用 `u-color-select-panel` 组件直接嵌入页面，无需弹窗。
+
+```html
+
+
+
+
+
+
+
+```
+
+### 自定义样式
+
+通过 `customStyle` 和 `customClass` 可自定义组件根节点的样式。
+
+```html
+
+
+
+```
+
+## API
+
+### u-color-picker Props
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| :-- | :-- | :-- | :-- | :-- |
+| v-model | 绑定的颜色值 | String | `#000000` | - |
+| show | 是否显示弹窗 | Boolean | `false` | - |
+| mode | 显示模式 | String | `popup` | `popup`, `inline` |
+| title | 弹窗标题 | String | `选择颜色` | - |
+| confirmText | 确认按钮文字 | String | `确定` | - |
+| cancelText | 取消按钮文字 | String | `取消` | - |
+| shape | 触发器形状 | String | `square` | `square`, `circle` |
+| size | 触发器大小 | String \| Number | `60rpx` | - |
+| zIndex | 弹窗层级 | String \| Number | `10075` | - |
+| colorMode | 颜色模式 | String | `both` | `solid`, `gradient`, `both` |
+| showAlpha | 是否显示透明度调节 | Boolean | `true` | `true`, `false` |
+| showEyeDropper | 是否显示吸管工具 | Boolean | `true` | `true`, `false` |
+| showHistory | 是否显示最近使用颜色 | Boolean | `true` | `true`, `false` |
+| showPresets | 是否显示预设颜色 | Boolean | `true` | `true`, `false` |
+| presets | 预设颜色列表 | Array | `[...]` | - |
+| format | 颜色格式 | String | `HEX` | `HEX`, `RGB` |
+| disabled | 是否禁用 | Boolean | `false` | - |
+| customStyle | 自定义根节点样式 | Object \| String | `{}` | - |
+| customClass | 自定义根节点样式类 | String | `''` | - |
+
+### u-color-picker Events
+
+| 事件名 | 说明 | 回调参数 |
+| :-- | :-- | :-- |
+| confirm | 点击确定按钮触发 | `color: string` |
+| cancel | 点击取消或关闭弹窗触发 | - |
+| change | 颜色改变时实时触发 | `color: string` |
+| color-update | 颜色每次更新时触发 | `color: string` |
+| update:modelValue | 颜色值变化时触发（v-model） | `color: string` |
+| update:show | 弹窗显隐状态变化时触发 | `show: boolean` |
+
+### u-color-select-panel Props
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| :-- | :-- | :-- | :-- | :-- |
+| v-model | 绑定的颜色值 | String | `#000000` | - |
+| colorMode | 颜色模式 | String | `both` | `solid`, `gradient`, `both` |
+| showAlpha | 是否显示透明度调节 | Boolean | `true` | `true`, `false` |
+| showEyeDropper | 是否显示吸管工具 | Boolean | `true` | `true`, `false` |
+| showHistory | 是否显示最近使用颜色 | Boolean | `true` | `true`, `false` |
+| showPresets | 是否显示预设颜色 | Boolean | `true` | `true`, `false` |
+| presets | 预设颜色列表 | Array | `[...]` | - |
+| format | 颜色格式 | String | `HEX` | `HEX`, `RGB` |
+| disabled | 是否禁用 | Boolean | `false` | - |
+| customStyle | 自定义根节点样式 | Object \| String | `{}` | - |
+| customClass | 自定义根节点样式类 | String | `''` | - |
+
+### u-color-select-panel Events
+
+| 事件名 | 说明 | 回调参数 |
+| :-- | :-- | :-- |
+| change | 颜色改变时实时触发 | `color: string` |
+| color-update | 颜色每次更新时触发 | `color: string` |
+| update:modelValue | 颜色值变化时触发（v-model） | `color: string` |
+
+### u-color-select-panel Methods
+
+可通过 `ref` 调用组件内部方法。
+
+| 方法名 | 说明 | 参数 | 返回值 |
+| :-- | :-- | :-- | :-- |
+| setColor | 主动设置颜色 | `color: string` | - |
+| getColor | 获取当前颜色对象详细信息 | - | `ColorObject` |
+| saveRecentColor | 保存指定颜色到历史记录 | `color: string` | - |
+
+#### ColorObject 类型定义
+
+```typescript
+interface ColorObject {
+ hex: string; // 十六进制颜色值，如 #ff0000ff
+ rgb: { // RGB 对象
+ r: number;
+ g: number;
+ b: number;
+ };
+ hsl: { // HSL 对象
+ h: number;
+ s: number;
+ l: number;
+ };
+ hsv: { // HSV 对象
+ h: number;
+ s: number;
+ v: number;
+ };
+ alpha: number; // 透明度 0-1
+ source: string; // 来源格式 'hex' | 'rgb' | 'hsl'
+}
+```
+
+## 功能特性详解
+
+### 1. 渐变色支持
+
+当 `colorMode` 设置为 `gradient` 或 `both` 时，组件支持 CSS 线性渐变（linear-gradient）。
+
+- 面板顶部会出现渐变控制条，可添加/选择颜色断点（Stop）
+- 点击断点可选中，选中的断点会放大高亮显示
+- 拖动断点可调整其在渐变中的位置
+- 选中断点后，下方选色区域将控制该断点的颜色
+- v-model 的值在渐变模式下为 `linear-gradient(90deg, #fff 0%, #000 100%)` 格式
+
+### 2. 颜色格式切换
+
+点击输入框左侧的格式标签可以切换颜色显示格式。
+
+- HEX：支持 6 位（`#RRGGBB`）和 8 位（`#RRGGBBAA`）格式
+- RGB：显示为 `rgba(r, g, b, a)` 格式
+
+### 3. 吸管工具 (EyeDropper)
+
+在支持 `EyeDropper API` 的 H5 环境（桌面端 Chrome/Edge），点击吸管图标可以吸取屏幕上任意位置的颜色。移动端 H5 或小程序环境暂不支持此 API，吸管按钮会自动隐藏。
+
+### 4. 历史记录
+
+组件会自动保存最近使用的 10 个颜色到本地存储，方便快速复用。可通过 `showHistory` 控制是否显示历史记录区域，通过 `saveRecentColor` 方法手动保存颜色。
+
+### 5. 预设颜色
+
+支持通过 `presets` 属性自定义预设颜色列表，组件内置了 15 种常用颜色作为默认值。可通过 `showPresets` 控制是否显示预设颜色区域。
+
+### 6. 暗黑模式适配
+
+组件内置了对暗黑模式的支持，会自动感知当前应用的主题设置并切换相应的背景色和文字颜色。无需额外配置。
diff --git a/src/uni_modules/uview-pro/components/u-color-picker/types.ts b/src/uni_modules/uview-pro/components/u-color-picker/types.ts
new file mode 100644
index 00000000..55b50af3
--- /dev/null
+++ b/src/uni_modules/uview-pro/components/u-color-picker/types.ts
@@ -0,0 +1,66 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import { useLocale } from '../../';
+import { ColorSelectPanelProps } from '../u-color-select-panel/types';
+
+const { t } = useLocale();
+
+export const ColorPickerProps = {
+ ...ColorSelectPanelProps,
+ /** 自定义根节点样式 */
+ customStyle: {
+ type: [String, Object] as PropType>,
+ default: () => ({})
+ },
+ /** 自定义根节点样式类 */
+ customClass: {
+ type: String as unknown as PropType,
+ default: ''
+ },
+ /** 是否显示弹窗 */
+ show: {
+ type: Boolean,
+ default: false
+ },
+ /** 模式：popup-弹窗，inline-内联 */
+ mode: {
+ type: String as PropType<'popup' | 'inline'>,
+ default: 'popup'
+ },
+ /** 标题 */
+ title: {
+ type: String,
+ default: () => t('uColorPicker.title')
+ },
+ /** 确认按钮文字 */
+ confirmText: {
+ type: String,
+ default: () => t('uColorPicker.confirmText')
+ },
+ /** 取消按钮文字 */
+ cancelText: {
+ type: String,
+ default: () => t('uColorPicker.cancelText')
+ },
+ /** z-index */
+ zIndex: {
+ type: [String, Number],
+ default: 10075
+ },
+ /** 形状：square-方形，circle-圆形 */
+ shape: {
+ type: String as PropType<'square' | 'circle'>,
+ default: 'square'
+ },
+ /** 大小 */
+ size: {
+ type: [String, Number],
+ default: '60rpx'
+ },
+ /** 是否禁用 */
+ disabled: {
+ type: Boolean,
+ default: false
+ }
+};
+
+export type ColorPickerProps = ExtractPropTypes;
diff --git a/src/uni_modules/uview-pro/components/u-color-picker/u-color-picker.vue b/src/uni_modules/uview-pro/components/u-color-picker/u-color-picker.vue
new file mode 100644
index 00000000..8550714c
--- /dev/null
+++ b/src/uni_modules/uview-pro/components/u-color-picker/u-color-picker.vue
@@ -0,0 +1,330 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/uni_modules/uview-pro/components/u-color-select-panel/types.ts b/src/uni_modules/uview-pro/components/u-color-select-panel/types.ts
new file mode 100644
index 00000000..ec3f587b
--- /dev/null
+++ b/src/uni_modules/uview-pro/components/u-color-select-panel/types.ts
@@ -0,0 +1,86 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+export const ColorSelectPanelProps = {
+ /** 自定义根节点样式 */
+ customStyle: {
+ type: [String, Object] as PropType>,
+ default: () => ({})
+ },
+ /** 自定义根节点样式类 */
+ customClass: {
+ type: String as unknown as PropType,
+ default: ''
+ },
+ /** 绑定值 */
+ modelValue: {
+ type: String,
+ default: '#000000'
+ },
+ /** 颜色模式: 'solid'|'gradient'|'both' */
+ colorMode: {
+ type: String as PropType<'solid' | 'gradient' | 'both'>,
+ default: 'both'
+ },
+ /** 是否显示透明度 */
+ showAlpha: {
+ type: Boolean,
+ default: true
+ },
+ /** 是否显示吸管 */
+ showEyeDropper: {
+ type: Boolean,
+ default: true
+ },
+ /** 是否显示历史记录 */
+ showHistory: {
+ type: Boolean,
+ default: true
+ },
+ /** 是否显示预设颜色 */
+ showPresets: {
+ type: Boolean,
+ default: true
+ },
+ /** 预设颜色列表 */
+ presets: {
+ type: Array as PropType,
+ default: () => [
+ '#000000',
+ '#ffffff',
+ '#ff0000',
+ '#00ff00',
+ '#0000ff',
+ '#ffff00',
+ '#00ffff',
+ '#ff00ff',
+ '#c0c0c0',
+ '#808080',
+ '#800000',
+ '#800080',
+ '#008000',
+ '#008080',
+ '#000080'
+ ]
+ },
+ /** 格式: 'HEX' | 'RGB' */
+ format: {
+ type: String as PropType<'HEX' | 'RGB'>,
+ default: 'HEX'
+ },
+ /** 是否禁用 */
+ disabled: {
+ type: Boolean,
+ default: false
+ }
+};
+
+export type ColorSelectPanelProps = ExtractPropTypes;
+
+export interface ColorObject {
+ hex: string;
+ rgb: { r: number; g: number; b: number };
+ hsl: { h: number; s: number; l: number };
+ hsv: { h: number; s: number; v: number };
+ alpha: number;
+ source: string; // 'hex' | 'rgb' | 'hsl'
+}
diff --git a/src/uni_modules/uview-pro/components/u-color-select-panel/u-color-select-panel.vue b/src/uni_modules/uview-pro/components/u-color-select-panel/u-color-select-panel.vue
new file mode 100644
index 00000000..21799f23
--- /dev/null
+++ b/src/uni_modules/uview-pro/components/u-color-select-panel/u-color-select-panel.vue
@@ -0,0 +1,1192 @@
+
+
+
+
+
+ {{ t('uColorSelectPanel.solid') }}
+
+
+ {{ t('uColorSelectPanel.gradient') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ colorFormat }}
+
+
+
+
+ {{ fmt }}
+
+
+
+
+
+
+ #
+
+
+
+
+
+
+
+
+
+
+ %
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ t('uColorSelectPanel.recentColors') }}
+
+
+
+
+
+
+
+ {{ t('uColorSelectPanel.systemPresets') }}
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/uni_modules/uview-pro/locale/lang/en-US.ts b/src/uni_modules/uview-pro/locale/lang/en-US.ts
index eee1ba5e..d09d0292 100644
--- a/src/uni_modules/uview-pro/locale/lang/en-US.ts
+++ b/src/uni_modules/uview-pro/locale/lang/en-US.ts
@@ -107,6 +107,17 @@ export default {
holiday: '休',
workday: '班'
},
+ uColorPicker: {
+ title: 'Select Color',
+ confirmText: 'Confirm',
+ cancelText: 'Cancel'
+ },
+ uColorSelectPanel: {
+ solid: 'Solid',
+ gradient: 'Gradient',
+ recentColors: 'Recent Colors',
+ systemPresets: 'System Presets'
+ },
uEmpty: {
car: 'Shopping cart is empty',
page: 'Page not found',
diff --git a/src/uni_modules/uview-pro/locale/lang/zh-CN.ts b/src/uni_modules/uview-pro/locale/lang/zh-CN.ts
index 326bbb81..3c1a7fa0 100644
--- a/src/uni_modules/uview-pro/locale/lang/zh-CN.ts
+++ b/src/uni_modules/uview-pro/locale/lang/zh-CN.ts
@@ -107,6 +107,17 @@ export default {
holiday: '休',
workday: '班'
},
+ uColorPicker: {
+ title: '选择颜色',
+ confirmText: '确定',
+ cancelText: '取消'
+ },
+ uColorSelectPanel: {
+ solid: '单色',
+ gradient: '渐变色',
+ recentColors: '最近使用颜色',
+ systemPresets: '系统预设颜色'
+ },
uEmpty: {
car: '购物车为空',
page: '页面不存在',