点击查看插件

sunrains-tabbar 自定义 TabBar 插件使用指南

点击体验h5端

点击查看安卓端录屏效果

点击查看安卓端演示安装包

目录

• [1. 基础配置]
• [2. pages.json 配置]
• [3. 动态配置 TabBar]
• [4. 数字角标功能]
• [5. 小程序端特殊配置]
• [6. 主题配置]
• [7. page页跳转自定义tab页]
• [8. 拓展底部tabbar类型，（切换、弹出、进入）页面]

  ---

1. 基础配置

App.uvue onLaunch 初始化  
 import {initDefaultTabItems} from '@/uni_modules/sunrains-tabbar/tabbar-config.uts'  
        onLaunch(() => {  
        console.log('App Launch')  
        initDefaultTabItems()  
        }

1.1 配置 tabbar-config.uts 文件

在插件根目录 tabbar-config.uts 文件中，配置注册全局tab组件和导航栏设置。

完整示例：

import { setNavbarConfig, NavBarConfig, registerGlobalComponent, setDefaultTabItems, TabItem } from '@/uni_modules/sunrains-tabbar/utssdk/types.uts'  
import { getStoreLoginItems,storeLoginItems } from './utssdk/handle'  
//导入所有自定义tab页  
import Recommend from '@/pages/home/recommend.uvue'  
import Order from '@/pages/order/order.uvue'  
import Mine from '@/pages/mine/mine.uvue'  
import Detail from '@/pages/detail/detail.uvue'  

//注册所有需要切换的tab页或需要弹出的页面  即类型为 tabPage:tab页面  tabPop:弹窗组件  
registerGlobalComponent('home', Recommend)  
registerGlobalComponent('order', Order)  
registerGlobalComponent('mine', Mine)  
registerGlobalComponent('detail', Detail)  

// 2. 配置导航栏（不设置会使用默认配置）  
setNavbarConfig(new NavBarConfig(true, 34, 'bold', '#333333', '#ffffff', "", 88))  

//初始化默认tabbar区域按钮  
export function initDefaultTabItems(){  
    /**  
     *  
     * 3. 设置默认 Tab 列表（至少设置一个固定的，也可以全部设置，其它可通过请求服务端接口动态配置），  
     * 或通过网络请求初始化 游客 显示哪些  有 角色的 按角色 初始化  
     * App.uvue onLaunch 初始化  
      import {initDefaultTabItems} from '@/uni_modules/sunrains-tabbar/tabbar-config.uts'  
        onLaunch(() => {  
        console.log('App Launch')  
        initDefaultTabItems()  
        }  
     */  
    let home = new TabItem('home',"", 12, "red", "yellow", "bold", '首页', '/static/tab/main3.png', '/static/tab/main3_active.png',24,24,"tabPage")  
    let mine = new TabItem('mine',"", 12, "red", "yellow", "bold", '我的', '/static/tab/main3.png', '/static/tab/main3_active.png',24,24,"tabPage")  

    let items = getStoreLoginItems();  
    //判断是否登录  
    if(false || items != null){  
        setDefaultTabItems(items)  
    }else{  
        setDefaultTabItems([  
            home,mine  
        ])  
        storeLoginItems([home,mine])  
    }  

}  

关键步骤说明：

1. 导入组件：将所有需要作为 Tab 的页面组件导入
2. 注册组件：使用 registerGlobalComponent 注册每个组件（第一个参数为唯一标识）
3. 配置导航栏：可选配置，根据项目需求调整
4. 设置默认 Tab：至少配置一个固定 Tab，其余可动态添加

2. pages.json 配置

2.1 必需配置

必须在 pages.json 中配置自定义 TabBar 入口页面（必须放在第一个位置），tab页无需在pages.json中配置：

{  
  "path": "uni_modules/sunrains-tabbar/index",  
  "style": {  
    "navigationStyle": "custom"  
  }  
}

2.2 完整示例

{  
    "pages": [   
        {  
          "path": "uni_modules/sunrains-tabbar/utssdk/index",  
          "style": {  
            "navigationStyle": "custom"  
          }  
        },  
        {  
          "path": "pages/detail/detail",  
          "style": {  
            "navigationBarTitleText": "详情"  
          }  
        }  
    ],  
    "globalStyle": {  
        "navigationBarTextStyle": "black",  
        "navigationBarTitleText": "uni-app x",  
        "navigationBarBackgroundColor": "#F8F8F8",  
        "backgroundColor": "#F8F8F8"  
    },  
    "uniIdRouter": {}  
}  

注意事项：

• 自定义 TabBar 入口页面必须配置在 pages 数组的第一位
• 所有 Tab 页面不需要在 pages 中声明
• navigationStyle 设置为 "custom" 以隐藏原生导航栏

3. 动态配置 TabBar

3.1 使用场景

当需要根据用户权限、服务端配置等动态调整 TabBar 时，可以在任意页面触发刷新。

3.2 实现示例

以下面文档 mine.uvue 页面为例：

关键点：

• 使用 refreshTabbar方法触发 TabBar 刷新
• 确保所有动态 Tab 对应的组件已在 tabbar-config.uts 中注册

4. 数字角标功能

4.1 功能说明

支持为任意 Tab 设置数字角标，用于显示未读消息数、待处理事项等。

特性：

• ✅ 动态设置/更新角标
• ✅ 超过 99 自动显示 "99+"
• ✅ 角标为 0 或 null 时不显示
• ✅ 响应式更新，立即生效

4.2 使用方法

方法一：通过事件设置（推荐）

在任意页面通过 调用 setTabBadge 方法：

import { setTabBadge} from '@/uni_modules/sunrains-tabbar/utssdk/noticetab.uts'  
// 设置算法 tab 的角标为 5  
setTabBadge("order",5)  
// 清除角标（设置为 0）  
setTabBadge("order",0)  
// 设置超过 99 显示 99+  
setTabBadge("order",150)

方法二：初始化时设置

在创建 TabItem 时传入 badge 参数：

import { TabItem } from '@/uni_modules/sunrains-tabbar/utssdk/types.uts'  

// 带角标的 tab  
new TabItem(  
  'order',   
  '算法',   
  '/static/tab/main2.png',   
  '/static/tab/main2_active.png'  
  10  // badge 参数  
)  

// 不带角标的 tab  
new TabItem(  
  'home',   
  '首页',   
  '/static/tab/main1.png',   
  '/static/tab/main1_active.png'  
)

4.3 完整示例

以 文档后面 mine.uvue 页面为例，实现动态设置角标功能：

4.4 实际应用场景

场景 1：算法未读数

// 从服务端获取未读算法数  
async function loadUnreadOrderCount() {  
  const res = await getOrderCount()  
  setTabBadge("order",res.data.count)  
}  

// 页面加载时调用  
onShow(() => {  
  loadUnreadOrderCount()  
})

场景 2：消息通知

// WebSocket 收到新消息  
websocket.onMessage((msg) => {  
  if (msg.type === 'new_message') {  
    const currentBadge = getCurrentBadge('message')  
    setTabBadge("newMessage",currentBadge + 1)  
  }  
})

场景 3：购物车数量

// 添加商品到购物车后更新角标  
function addToCart(product: Product) {  
  cartItems.push(product)  
  setTabBadge("cart",cartItems.length)  
}

5. 小程序端特殊配置

4.1 配置 tab-content-renderer.uvue

注意： 仅在需要支持微信小程序时需要配置，App 端可忽略此步骤。

在 uni_modules/sunrains-tabbar/tab-content-renderer.uvue 中配置：

<<template>  
  <view style="width: 100%; height: 100%;">  
   <Recommend v-if="currentTab === 'home'" style="width: 100%; height: 100%;" />  
    <Order v-if="currentTab === 'order'" style="width: 100%; height: 100%;" />  
    <Mine v-if="currentTab === 'mine'" style="width: 100%; height: 100%;" />  
      <Detail v-if="currentTab === 'detail'" style="width: 100%; height: 100%;" />  
  </view>  
</template>  

<script setup lang="uts">  
import Recommend from '@/pages/home/recommend.uvue'  
import Order from '@/pages/order/order.uvue'  
import Mine from '@/pages/mine/mine.uvue'  
import Detail from '@/pages/detail/detail.uvue'  
interface Props {  
  currentTab: string  
}  
defineProps({  
    currentTab:{  
        type:String  
    }  
})  
</script>  

配置说明：

1. 条件编译：使用 #ifndef MP-WEIXIN 和 #ifdef MP-WEIXIN 区分平台
2. App 端：使用 <component :is="..."> 动态渲染组件
3. 小程序端：必须静态导入并声明所有可能的 Tab 组件
4. 导入位置：在 #ifdef MP-WEIXIN 块内导入组件

6. 主题配置

6.1 主题功能说明

插件支持自定义 TabBar 的主题样式，支持网络背景图、本地图片背景图、纯颜色背景（支持rgba透明）、导航栏、tabbar区域背景、图标大小、图标（支持网络图标）、文字颜色、文字大小、等属性 满足不同项目的视觉需求。

主题特性：

• ✅ 支持全局主题配置
• ✅ 支持动态切换主题
• ✅ 支持自定义主题参数

6.2 初始化时配置主题

在 tabbar-config.uts 文件中配置主题：

import {   
  setNavbarConfig,   
  NavBarConfig,   
  registerGlobalComponent,   
  setDefaultTabItems,   
  TabItem,  
  setTabBarTheme,  
  TabBarTheme  
} from '@/uni_modules/sunrains-tabbar/types.uts'  
import { setTabPageTheme} from '@/uni_modules/sunrains-tabbar/utssdk/noticetab.uts'  

let bgType : BgType = "IMG"  
//背景 如果是图片传图片路径 颜色则传 具体颜色  
let bg : string = "/static/2.png"  
//配置导航栏（可选，不设置会使用默认配置）  
let navBarConfig : NavBarConfig = new NavBarConfig(  
    true, // 是否显示导航栏  
    34,  // 字体大小  
    'bold',  // 字体粗细  
    '#FFA500', // 文字颜色  
    '',// 背景颜色  
    "", //背景图片（支持网络图片）  
    90) // 导航栏高度  

let tabbarIcon = new TabbarIcon(  
    "mine",//自定义组件唯一标识  
    //非选中图标  
    "https://gimg3.baidu.com/search/src=https%3A%2F%2Fpic.rmb.bdstatic.com%2Fbjh%2Fuser%2F779083e57f84a4ce5345b17aaf7f8459.jpeg&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=r1,1&n=0&g=4&er=404&q=100&maxorilen2heic=2000000?sec=1781283600&t=4feca8b5a1149e3ed0f28ee030f767b4",  
   //选中图标  
    "/static/tab/main3_active.png",  
    24,//图标宽 单位 px  
    24,//图标高 单位 px  
   //文字颜色  
    12,  
    //非选中文字大小  
    "green",  
    //选择文字颜色  
    "white",  
    //选择文字粗细  
    "bold"  
)  

let tabbarIcons : Map<string,TabbarIcon> = new Map();  
tabbarIcons.set("mine",tabbarIcon)  

let tabbarStyle : TabbarStyle = new TabbarStyle(  
    //tabbar区域高度  
    120,  
    //tabbar区域背景  
    "rgba(21, 20, 31, 0.8)",  
    //tabbar图标文字样式  
    tabbarIcons)  

let theme = new CustomTheme(bgType, bg, navBarConfig, tabbarStyle);  
setTabPageTheme(theme)

6.3 动态修改主题

在任意页面通过调用 setTabPageTheme 方法动态修改主题：

import { setTabPageTheme} from '@/uni_modules/sunrains-tabbar/utssdk/noticetab.uts'  
// 动态修改背景色和选中颜色  
let theme = new CustomTheme(bgType, bg, navBarConfig, tabbarStyle);  
setTabPageTheme(theme)

6.4 在页面中动态切换主题

以 mine.uvue 页面为例，实现主题切换功能：

<template>  
    <scroll-view direction="vertical" class="mine-page"  
    show-scrollbar = "false"  
    enable-back-to-top="true"  
    refresher-enabled="true"  
    refresher-default-style="none"  
    refresher-background="rgba(232, 201, 183, 0.5)"  
    :refresher-triggered="data.refreshing2"  

     refresher-max-drag-distance="200px"  
          @refresherpulling="onRefresherpulling2"  
          @refresherrefresh="onRefresherrefresh2"  
          @refresherrestore="onRefresherrestore2"  

     >  
     <uni-refresh-box  
       slot="refresher"  
       :pulling-distance="data.pullingDistance2"  
       :refreshing="data.refreshing2"  
                    loading-class="loading-dark"  
                    text-class="uni-text-class-buildin"  
                    style="flex-direction: column;height: 46px;padding-top: 6px;"  
                    pulling-text="继续下拉可刷新"  
                    loosing-text="释放后会刷新"  
                    loading-text="奋力加载中..."  
                />  

        <view class="page-title">  
            <text style="color:#ff4d40">动态设置中心</text>  
        </view>  
        <view class="tabbar">  
            <text class="title-text">tabbar设置</text>  
            <button class="tabbar-btn" @click="refresh1">动态tabbar(我的)</button>  
            <button class="tabbar-btn" @click="refresh2">动态tabbar(首页、我的)</button>  
            <button class="tabbar-btn" @click="refresh3">动态tabbar(算法、我的)</button>  
            <button class="tabbar-btn" @click="refresh4">动态tabbar(我的、算法、首页、弹出详情、进入详情)</button>  
            <text class="title-text">设置角标</text>  
            <input class="input-item" v-model="tabbar" placeholder="请输入tabbar" />  
            <input class="input-item" v-model="badge" placeholder="请输入角标" />  
            <button class="tabbar-btn" @click="setBadge">确定</button>  
            <button class="tabbar-btn" @click="theme">主题1</button>  
            <button class="tabbar-btn" @click="theme2">主题2</button>  
            <button class="tabbar-btn" @click="theme3">主题3</button>  
            <button class="tabbar-btn" @click="clear">clear</button>  
            <!-- <button class="tabbar-btn" type="default" @click="refresh">刷新</button> -->  
                    <!-- <button   type="default" @click="cPop">返回</button> -->  

        </view>  

    </scroll-view>  
</template>  

<script setup lang="uts">  
    import { ref,onMounted,onUnmounted } from 'vue'  
    import { TabItem, GLOBAL_COMPONENT_REGISTRY, CustomTheme, TabbarIcon, TabbarStyle, NavBarConfig } from '@/uni_modules/sunrains-tabbar/utssdk/types.uts'  
    import { setTabBadge,setTabbarColorHeight,refreshTabbar ,setTabPageTheme,closeTabPop,clearStorage} from '@/uni_modules/sunrains-tabbar/utssdk/noticetab.uts'  

 function cPop(){  
    closeTabPop()  
 }  

   onMounted(() => {  
     console.log('【组件挂载====mine===】')  
   })  

   onUnmounted(() => {  
     console.log('【组件销毁====mine===】')  
   })  

// 用于自动化测试的数据暴露 - 使用 reactive 将所有 ref 状态集中暴露  
const data = reactive({  
  refreshing2: false,  
  pullingDistance2: 0  

})  

function onRefresherpulling2(e: RefresherEvent) {  
  data.pullingDistance2 = e.detail.dy  
}  
    const refreshing = ref(false)  

function onRefresherrefresh2() {  
  data.refreshing2 = true  
  console.log('触发刷新')  
  setTimeout(() => {  
    data.refreshing2 = false  
    console.log('刷新完成')  
  }, 1500)  
}  

function onRefresherrestore2() {  
  data.pullingDistance2 = 0  
}  

function onRefresherabort2() {  
  data.pullingDistance2 = 0  
}  

    // 上拉触底加载  
    const loadMore = () => {  
        console.log("滚动到底部", "info")  
    }  

    function clear() {  
        clearStorage("all")  
    }  

    const bgColor = ref<string>('pink')  
    const tabHeight = ref<string>('120')  
    const badge = ref<string>('0')  
    const ss = ref<any>("");  

    // tab 选项配置  
    const tabbar = ref<string | null>(null)  
    const selectedTab = ref<string>('mine')  
    const selectedTabIndex = ref<number>(0)  

    function setBadge() {  
        //动态设置指定tabbar 角标  
        const badgeNum = parseInt(badge.value)  
        if (isNaN(badgeNum)) {  
            uni.showToast({  
                title: '请输入有效数字',  
                icon: 'none'  
            })  
            return  
        }  
        setTabBadge(tabbar.value,badgeNum)  
        uni.showToast({  
            title: `已设置 ${tabbar.value} 角标为 ${badgeNum}`,  
            icon: 'success'  
        })  
    }  

    function setStyle() {  
        setTabbarColorHeight(bgColor.value,parseInt(tabHeight.value) )  
    }  

    function refresh1() {  
        console.log("动态tabbar(我的)")  
        refreshTabbar([  
            new TabItem('mine', "",12, "red", "yellow", "bold", '我的', '/static/tab/main3.png', '/static/tab/main3_active.png',24,24,"tabPage")  
        ]);  
    }  
    function refresh2() {  
        console.log("动态tabbar(首页、我的)")  
        refreshTabbar([  
            new TabItem('home', "",12, "red", "yellow", "bold", '首页', '/static/tab/main1.png', '/static/tab/main1_active.png',24,24,"tabPage"),  
            new TabItem('mine', "",12, "red", "yellow", "bold", '我的', '/static/tab/main3.png', '/static/tab/main3_active.png',24,24,"tabPage")  
        ])  
    }  
    function refresh3() {  
        console.log("动态tabbar(算法、我的)")  

        refreshTabbar( [  
            new TabItem('order', "",12, "red", "yellow", "bold", '算法', '/static/tab/main2.png', '/static/tab/main2_active.png',24,24,"tabPage"),  
            new TabItem('mine', "",12, "red", "yellow", "bold", '我的', '/static/tab/main3.png', '/static/tab/main3_active.png',24,24,"tabPage")  
        ])  
    }  
    function refresh4() {  
        console.log("动态tabbar(我的、算法、首页、弹出详情、进入详情)")  

        refreshTabbar([  
            new TabItem('mine', "",12, "red", "yellow", "bold", '我的', '/static/tab/main3.png', '/static/tab/main3_active.png',24,24,"tabPage"),  
            new TabItem('order', "",12, "red", "yellow", "bold", '算法', '/static/tab/main2.png', '/static/tab/main2_active.png',24,24,"tabPage"),  
            new TabItem('home', "",12, "red", "yellow", "bold", '首页', '/static/tab/main1.png',  
             'https://gimg3.baidu.com/search/src=https%3A%2F%2Fpic.rmb.bdstatic.com%2Fbjh%2Fuser%2F779083e57f84a4ce5345b17aaf7f8459.jpeg&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=r1,1&n=0&g=4&er=404&q=100&maxorilen2heic=2000000?sec=1781283600&t=4feca8b5a1149e3ed0f28ee030f767b4',  
             24,24,"tabPage"  
             ),  
             new TabItem('detail', "",12, "red", "yellow", "bold", '弹出详情', '/static/tab/main1.png',  
              'https://gimg3.baidu.com/search/src=https%3A%2F%2Fpic.rmb.bdstatic.com%2Fbjh%2Fuser%2F779083e57f84a4ce5345b17aaf7f8459.jpeg&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=r1,1&n=0&g=4&er=404&q=100&maxorilen2heic=2000000?sec=1781283600&t=4feca8b5a1149e3ed0f28ee030f767b4',  
              24,24,"tabPop"  
              ),  
              new TabItem('detail', "/pages/detail/detail",12, "red", "yellow", "bold", '进入详情', '/static/tab/main1.png',  
               'https://gimg3.baidu.com/search/src=https%3A%2F%2Fpic.rmb.bdstatic.com%2Fbjh%2Fuser%2F779083e57f84a4ce5345b17aaf7f8459.jpeg&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=r1,1&n=0&g=4&er=404&q=100&maxorilen2heic=2000000?sec=1781283600&t=4feca8b5a1149e3ed0f28ee030f767b4',  
               24,24,"page"  
               )  
        ])  
    }  

    function theme() {  
        //主题背景类型  
        let bgType = "IMG"  
        //背景 如果是图片传图片路径 颜色则传 具体颜色  
        let bg : string = "/static/2.png"  
        // let bg:string = "black"  
        let navBarConfig : NavBarConfig = new NavBarConfig(true, 34, 'bold', '#FFA500', "rgba(191, 191, 191, 0.5)", "", 90)  
        let tabbarIcon = new TabbarIcon("mine",  
            "https://gimg3.baidu.com/search/src=https%3A%2F%2Fpic.rmb.bdstatic.com%2Fbjh%2Fuser%2F779083e57f84a4ce5345b17aaf7f8459.jpeg&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=r1,1&n=0&g=4&er=404&q=100&maxorilen2heic=2000000?sec=1781283600&t=4feca8b5a1149e3ed0f28ee030f767b4",  
            "/static/tab/main3_active.png",  
            24,24,  
            12,  
            "green",  
            "white",  
            "bold"  
        )  
        let tabbarIcons : Map<string, TabbarIcon> = new Map();  
        tabbarIcons.set("mine", tabbarIcon)  
        let tabbarStyle : TabbarStyle = new TabbarStyle(120, "rgba(21, 20, 31, 0.8)", tabbarIcons)  
        let theme = new CustomTheme(bgType, bg, navBarConfig, tabbarStyle);  
        setTabPageTheme(theme)  
    }  

    function theme2() {  
        //主题背景类型  
        let bgType  = "IMG"  
        //背景 如果是图片传图片路径 颜色则传 具体颜色  
        let bg : string = "/static/sm.jpg"  
        // let bg:string = "black"  
        let navBarConfig : NavBarConfig = new NavBarConfig(false, 34, 'bold', '#0c0c0c', "", "", 90)  
        let tabbarIcon = new TabbarIcon("mine",  
            "/static/aj.png",  
            "/static/aj1.png",  
            24,24,  
            20,  
            "green",  
            "red",  
            "bold"  
        )  
        let tabbarIcon1 = new TabbarIcon("home",  
            "https://static-mp-4c53170b-e5f8-453b-a634-afcb5cf07d59.next.bspapp.com/img/icon/豪横.gif",  
            "https://static-mp-4c53170b-e5f8-453b-a634-afcb5cf07d59.next.bspapp.com/img/icon/豪横.gif",  
            50,24,  
            16,  
            "black",  
            "yellow",  
            "bold"  
        )  
        let tabbarIcons : Map<string, TabbarIcon> = new Map();  
        tabbarIcons.set("mine", tabbarIcon)  
        tabbarIcons.set("home", tabbarIcon1)  
        let tabbarStyle : TabbarStyle = new TabbarStyle(120, "rgba(21, 20, 31, 0.4)", tabbarIcons)  
        let theme = new CustomTheme(bgType, bg, navBarConfig, tabbarStyle);  
        setTabPageTheme(theme)  
    }  
    function theme3() {  
        //主题背景类型  
        let bgType  = "IMG"  
        //背景 如果是图片传图片路径 颜色则传 具体颜色  
        let bg : string = "https://static-mp-4c53170b-e5f8-453b-a634-afcb5cf07d59.next.bspapp.com/img/bizhi/端午1.png"  
        // let bg:string = "black"  
        let navBarConfig : NavBarConfig = new NavBarConfig(true, 34, 'bold', '#0c0c0c', "", "", 90)  
        let tabbarIcon = new TabbarIcon("mine",  
            "/static/aj.png",  
            "/static/aj1.png",  
            24,24,  
            16,  
            "white",  
            "red",  
            "bold"  
        )  
        let tabbarIcon1 = new TabbarIcon("home",  
            "/static/sy1.png",  
            "/static/sy.png",  
            50,24,  
            16,  
            "white",  
            "red",  
            "bold"  
        )  
        let tabbarIcon2 = new TabbarIcon("detail",  
            "/static/tab/main2_active.png",  
            "/static/tab/main2_active.png",  
            24,24,  
            16,  
            "red",  
            "red",  
            "bold"  
        )  
        let tabbarIcons : Map<string, TabbarIcon> = new Map();  
        tabbarIcons.set("mine", tabbarIcon)  
        tabbarIcons.set("home", tabbarIcon1)  
        tabbarIcons.set("detail", tabbarIcon2)  
        let tabbarStyle : TabbarStyle = new TabbarStyle(150, "rgba(10, 13, 31, 0.8)", tabbarIcons)  
        let theme = new CustomTheme(bgType, bg, navBarConfig, tabbarStyle);  
        setTabPageTheme(theme)  
    }  

    function init() {  
        uni.stopPullDownRefresh()  
        console.log('stop onPullDownRefresh=====');  
    }  
    onPullDownRefresh(() => {  
        console.log('onPullDownRefresh=====');  
        init()  

    })  

    function refresh() {  
        uni.startPullDownRefresh({  
            success: () => {  
                console.log("1111")  
            }  
        });  
        init()  
    }  
</script>  

<style scoped lang="scss">  
    .mine-page {  
        height: 100%;  
        // border: 12px solid red;  
        margin: 5px;  
    }  

    .page-title {  
        margin-bottom: 15px;  
        display: flex;  
        align-items: center;  
        justify-content: center;  
        width: 100%;  
    }  

    .title-text {  
        font-size: 18px;  
        font-weight: bold;  
        color: #333;  
    }  

    .tabbar {  
        // border: 2px solid cyan;  
        padding: 15px;  
        display: flex;  
        flex-direction: column;  
    }  

    .input-item {  
        height: 45px;  
        border: 1px solid #ccc;  
        border-radius: 6px;  
        padding-left: 10px;  
        background: #fff;  
        margin: 10px;  
        padding-left: 20px;  
    }  

    .picker-item {  
        height: 45px;  
        border: 1px solid #ccc;  
        border-radius: 6px;  
        background: #fff;  
        margin: 10px;  
        display: flex;  
        align-items: center;  
    }  

    .picker-display {  
        padding-left: 20px;  
        font-size: 16px;  
        color: #333;  
    }  

    .tabbar-btn {  
        margin-bottom: 10px;  
        border-radius: 8px;  
        background: #f5f5f5;  
        border: 1px solid #e5e5e5;  
        padding: 16px 0;  
        font-size: 16px;  
    }  

    .tabbar-btn:last-child {  
        margin-bottom: 0;  
    }  
</style>  

6.5 主题配置注意事项

1. 颜色格式：颜色值必须为有效的 CSS 颜色格式（如 #ffffff、rgb(255,255,255) 等）
2. tabbar区域高度单位：高度值为数字类型，单位为 rpx
3. 动态修改：通过 uni.$emit('setTheme', new CustomTheme(bgType, bg, navBarConfig, tabbarStyle)) 动态修改的主题会立即生效

7 page页跳转自定义tab页

使用 pageToTab 方法 跳转到tab页

以 detail.uvue 页面为例，实现主题切换功能：

<template>  

    <view class="detail-root">  

        <view class="detail-content">  
<!--   
            <view>  
                <input v-model="content" placeholder="请输入。。" />  
                <text>{{sbase64}}</text>  
                <text>{{base64yostr}}</text>  
            </view> -->  
            <view class = "con">  
                <view  class = "com">  
                    <text>网络请求</text>     
                </view>  
                <view>  

                    <button class="btn" type="primary" @click="req">访问testvoid</button>  
                    <button class="btn"  type="primary" @click="reqSm2">访问testSm2</button>  
                    <button class="btn" type="primary" @click="reqSm4">访问testSm4</button>  
                    <button class="btn" type="primary" @click="reqSm2Sm4">访问testreqSm2Sm4</button>  
                </view>  
            </view>  

            <view class = "con">  
                <view class = "com">  
                    <text>跳转tab页</text>  
                </view>  

                <view>  
                    <input style="height: 50px; border:1px solid grey;margin: 5px 0;" v-model="addr" placeholder="输入跳转tabbar key"/>  
                    <button type="warn" @click="tz">跳转tab页</button>   
                </view>  
            </view>  

        </view>  

    </view>  

</template>  

<script setup lang="uts">  
    import { ref, computed } from 'vue'  
    import { stringToBase64, base64ToString, ReqApi } from "@/uni_modules/sunrains-request"  
    import { Response, FrontRequestVo } from "@/uni_modules/sunrains-common-type"  
    import { CustFailError, getComErrorInfo } from "@/uni_modules/sunrains-common-err"  
    import { pageToTab} from "@/uni_modules/sunrains-tabbar/utssdk/noticetab.uts"  

   onMounted(() => {  
     console.log('【组件挂载====detail===】')  
   })  

   onUnmounted(() => {  
     console.log('【组件销毁====detail===】')  
   })  
    const addr = ref("")  
    function tz(){  
        if(addr.value.length<1){  
            uni.showToast({  
                title: '请输入跳转的tabbar key'  
            });  
        }else{  
            pageToTab(addr.value)  
        }  

    }  

    function fh(){  
        uni.navigateBack()  

    }  

    let priKey = "4a4a1d48fc284fe2fc43970641880554aed2f69fdfbea63257ea417af4e65802"  
    let pubKey = "0460e86263ec52b38a3da24c7a605055d14f8aa5c7855e4f4e19819f4f8a5b72181afd7aa4ab19255eb871eaedaba30fa18cd5c71693d3d76b030a04969bd1edfe"  
    const BASEURL = "http://192.168.1.9:8081"  
    type IRootType = {  
        name : string;  
        age : number;  
    }  

    type Builds = {  
        buildingNo : string,  
        sortNum : number,  
        buildAreaId : string,  
        id : string  
    }  

    async function req() {  
        let data : UTSJSONObject = {  
            name: "张三",  
            age: 18  
        }  
        try {  

            let vo : FrontRequestVo = {  
                method: 'GET',  
                url: BASEURL + "/test/get/cs1",  
                data: data,  
                header: null,  
                reqFlag: "void",  
                priKey: priKey,  
                pubKey: pubKey,  
                //method 为POST时 不能为null  
                contentType: "urlencoded",  
                timeout: null,  
                //当为上传文件时 文件路径参数不能为空  
                filePathParamName: null  
            }  
            const res = await ReqApi(vo)  
            console.log("####reqvoid==", res.data)  
            // console.log("####==",res)  
        } catch (err) {  
            uni.showToast({  
                title: err.message ?? "请求异常",  
                icon: "error"  
            })  
            console.log("-----", err)  

            return  
        };  
    }  

    //"sign"|"sm4Encrypt"|"signwithenSM2-Sm4Encrypt"|"void";  
    async function reqSm2() {  
        let data : UTSJSONObject = {  
            name: "张三",  
            age: 18  
        }  

        try {  
            let vo : FrontRequestVo = {  
                method: 'GET',  
                url: BASEURL + "/test/get/cs1",  
                data: data,  
                header: null,  
                reqFlag: "sign",  
                priKey: priKey,  
                pubKey: pubKey,  
                //method 为POST时 不能为null  
                contentType: "urlencoded",  
                timeout: null,  
                //当为上传文件时 文件路径参数不能为空  
                filePathParamName: null  
            }  

            const res = await ReqApi(vo)  
            console.log("####reqSm2==", res.data)  
        } catch (err) {  
            uni.showToast({  
                title: err.message ?? "请求异常",  
                icon: "error"  
            })  

            //#ifndef APP-ANDROID  
            const errMsg = (err as any).errMsg ?? "未知错误";  
            const errCode = (err as any).errCode ?? -1;  
            console.log('标准化错误码:', errMsg);  
            console.log('标准化错误信息:', errCode);  
            //#else   
            if (err instanceof UniError) {  
                let sa = err as UniError  
                console.log('sa==:', sa);  
            }  
            //#endif  
            console.log("-----", err)  
            return  
        };  
    }  

    async function reqSm4() {  
        let data : UTSJSONObject = {  
            name: "张三",  
            age: 18  
        }  
        try {  
            let vo : FrontRequestVo = {  
                method: 'POST',  
                url: BASEURL + "/test/post/cs1",  
                data: data,  
                header: null,  
                reqFlag: "sm4Encrypt",  
                priKey: priKey,  
                pubKey: pubKey,  
                //method 为POST时 不能为null  
                contentType: "urlencoded",  
                timeout: null,  
                //当为上传文件时 文件路径参数不能为空  
                filePathParamName: null  
            }  

            const res = await ReqApi(vo)  
            console.log("####reqSm4==", res.data)  
        } catch (err) {  
            console.log("####reqSm4 err==", err)  
            uni.showToast({  
                title: err.message??"",  
                icon: "error"  
            })  
            return  
        };  
    }  

    async function reqSm2Sm4() {  
        let data : UTSJSONObject = {  
            name: "张三",  
            age: 18  
        }  
        try {  
            let vo : FrontRequestVo = {  
                method: 'POST',  
                url: BASEURL + "/test/post/cs1",  
                data: data,  
                header: null,  
                reqFlag: "signwithenSM2-Sm4Encrypt",  
                priKey: priKey,  
                pubKey: pubKey,  
                //method 为POST时 不能为null  
                contentType: "urlencoded",  
                timeout: null,  
                //当为上传文件时 文件路径参数不能为空  
                filePathParamName: null  
            }  

            const res = await ReqApi(vo)  
            console.log("####reqSm2Sm4==", res.data)  
        } catch (err) {  
            console.log("-----", err)  
            return  
        };  
    }  

    const orderId = ref<string>('')  
    const orderStatus = ref<string>('')  
    const content = ref<string>('')  
    const sbase64 = computed(() => {  
        return stringToBase64(content.value)  
    })  

    const base64yostr = computed(() => {  
        return base64ToString(sbase64.value)  
    })  

    onLoad((options) => {  
        const opts = options as UTSJSONObject  
        const id = options?.["orderId"] as string | null  
        const status = options?.["status"] as string | null  

        if (id != null) {  
            orderId.value = id  
        }  
        if (status != null) {  
            orderStatus.value = status  
        }  
        console.log(`接收算法参数：ID=${orderId.value}，状态=${orderStatus.value}`)  
    })  

    const goBack = () => {  
        uni.navigateBack()  
    }  

    function init(){  
              // uni.stopPullDownRefresh()  
              // console.log('stop onPullDownRefresh=====');  
    }  

     //  onPullDownRefresh(() => {  
     //    console.log('onPullDownRefresh=====');  
        // init()  

     //  })  

      function refresh(){  
          uni.removeStorageSync("LOGINTABBARITEMS")  
          // uni.startPullDownRefresh({  
             //  success:()=>{  
                //   console.log("1111")  
             //  }  
          // });  
          // init()  
      }  

</script>  

<style scoped>  
    .detail-root {  
/*      flex: 1;  
        display: flex;  
        flex-direction: column; */  
        background-color: #fff;  
    }  

    .status-bar {  
        height: 44px;  
        background-color: #ffffff;  
    }  

    .detail-header {  
        height: 44px;  
        background-color: #fff;  
        flex-direction: row;  
        align-items: center;  
        padding-left: 15px;  
        padding-right: 15px;  
        border-bottom-width: 1px;  
        border-bottom-style: solid;  
        border-bottom-color: #eee;  
    }  

    .back-icon {  
        font-size: 18px;  
        color: #007aff;  
        margin-right: 10px;  
    }  

    .detail-title {  
        font-size: 16px;  
        font-weight: bold;  
        color: #333;  
    }  

    .detail-content {  
        flex: 1;  
        padding: 20px;  
    }  

    .detail-item {  
        flex-direction: row;  
        margin-bottom: 20px;  
        align-items: center;  
    }  

    .label {  
        font-size: 15px;  
        color: #666;  
        width: 80px;  
    }  

    .value {  
        font-size: 15px;  
        color: #333;  
        font-weight: bold;  
    }  

    .detail-desc {  
        margin-top: 30px;  
    }  

    .com{  
        display:flex;  
        align-items: center;  
        margin:10px 0;   
    }  
    .con{  
        margin:10px 0;   
        padding:10px;  
        background-color: #e3eda1;  
    }  
    .btn{  
        margin: 5px;  
    }  
</style>  

8 拓展底部tabbar类型，（切换、弹出、进入）页面

    let mine = new TabItem(  
           'mine', //组件或页面唯一标识  
            "", //组件或页面路径  当类型为 page 时不可为空，其它传空字符串即可  
            12,  
            "red",  
            "yellow",   
            "bold",   
            '我的',   
            '/static/tab/main3.png',  
            '/static/tab/main3_active.png',  
            24,//图标宽  
            24,//图标高  
            "tabPage" //tabbar 类型 tabPage:tab页面  tabPop:弹窗组件  page:普通页面  
        )  

注：
类型为 tabPop 打开页面 可 右滑手势(当手机开启右滑手势时)关闭、 或点击虚拟返回按键关闭 或 页面中调用方法 closeTabPop()关闭

方法导入 import { pageToTab} from "@/uni_modules/sunrains-tabbar/utssdk/noticetab.uts"

⚠️ 常见问题

Q1: 为什么小程序端需要单独配置？

A: 微信小程序不支持动态组件渲染，必须静态声明所有可能使用的组件。

Q2: 动态 Tab 刷新失败怎么办？

A: 检查以下几点：

• 组件是否在 tabbar-config.uts 中正确注册
• 是否正确使用了 GLOBAL_COMPONENT_REGISTRY.get() 获取组件
• TabItem 的参数是否完整且类型正确

Q3: 导航栏配置不生效？

A: 确保 setNavbarConfig() 在 setDefaultTabItems() 之前调用，或在应用启动时尽早调用。

Q4: 如何设置数字角标？

A: 使用 uni.$emit('setTabBadge', {"key": "tab_key", "badge": number}) 即可，详见第 4 章。

Q5: 角标设置后不显示怎么办？

A: 检查以下几点：

• badge 值是否大于 0（0 或负数不显示）
• tab key 是否正确（必须与 TabItem 的 key 一致）
• 是否重新赋值了整个数组（直接修改对象属性不会触发响应式）

Q6: 退出登录如何清除 tabbar相关缓存

A: 调用 noticetab.uts里的 clearStorage 方法

/**  
 * 清除tabbar相关缓存  
 * all 所有  
 * theme 主题  
 * tabbarItems 所有tabbar  
 * badge 角标  
 */  
export function clearStorage(type:string){  
    switch (type){  
        case "theme":  
            uni.removeStorageSync("sunrains-tabbar-customtheme")      
            break;  
        case "tabbarItems":  
            uni.removeStorageSync("sunrains-tabbar-logintabbaritems")  
            break;    
        case "badge":  
            uni.removeStorageSync("sunrains-tabbar-tabbarbadges")  
            break;    
        default:  
            uni.removeStorageSync("sunrains-tabbar-customtheme")  
            uni.removeStorageSync("sunrains-tabbar-logintabbaritems")  
            uni.removeStorageSync("sunrains-tabbar-tabbarbadges")         
    }  

}

我们公司找兼职开发，有没有会iOS开发的（跨平台最好），QQ752562065

uni-app app端（安卓实测）<editor>组件光标使用按钮插入特定符号（如【】）时定位到特定字符中间的可行方案

因为在做文本编辑器（符号快捷成对（如【】这种的）输入）需用到editor组件。
因为不能直接使用DOM，因网上搜不出解决方案，借助AI后实测出一种方案和一种待验证方案。
思路简单得离谱（主要还是对edtior这个组件不了解）：

首先说一下editor

<editor> 组件底层是基于 Quill.js，所以不能使用原生输入框的 selectionStart/setSelectionRange。光标操作只能通过 Quill API 或标准 DOM API 实现。

方案一：Quill API（推荐这种）

获取 Quill 实例

const editor = document.getElementById('editor')  
const quill = editor.__quill || editor.querySelector('.ql-editor')?.__quill

核心示例：插入配对符号并定位光标

例如：一个按钮直接插入【】，你需要光标在【】的中间

const range = quill.getSelection()  
const pos = range ? range.index : 0  
const half = Math.ceil(pair.length / 2)  
quill.insertText(pos, pair)  
quill.setSelection(pos + half)

优缺点

优点

• API 简洁高效
• 与编辑器状态（Delta）完全同步
• 不影响撤销/重做

缺点

• 依赖 Quill 内部属性 __quill
• 不同版本 uni-app 兼容性不确定
• 需在 renderjs 中运行

方案二：原生 DOM API（降级方案：这个未验证，因为第一种方案基本解决，这是ai给的降级兜底方案）

核心思路

使用 document.createTreeWalker 遍历文本节点计算全局偏移，通过 Range + Selection API 操作光标。

获取光标全局偏移

function getCursorIndex(container) {  
    const sel = window.getSelection()  
    if (!sel?.rangeCount) return -1  
    const node = sel.anchorNode, off = sel.anchorOffset  
    if (!node || !container.contains(node)) return -1  
    const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT)  
    let count = 0  
    while (walker.nextNode()) {  
        if (walker.currentNode === node) return count + off  
        count += walker.currentNode.textContent.length  
    }  
    return count  
}

设置光标到指定位置

function setCursorIndex(container, index) {  
    const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT)  
    let count = 0  
    while (walker.nextNode()) {  
        const len = walker.currentNode.textContent.length  
        if (count + len >= index) {  
            const range = document.createRange()  
            range.setStart(walker.currentNode, index - count)  
            range.collapse(true)  
            const sel = window.getSelection()  
            sel.removeAllRanges()  
            sel.addRange(range)  
            return  
        }  
        count += len  
    }  
}

插入文本并设置光标

const text = foundNode.textContent  
foundNode.textContent = text.slice(0, offset) + pair + text.slice(offset)  
const range = document.createRange()  
range.setStart(foundNode, offset + half)  
range.collapse(true)  
window.getSelection().removeAllRanges()  
window.getSelection().addRange(range)

优缺点

优点

• 纯标准 DOM API，兼容性最好
• 不依赖任何框架内部属性

缺点

• 代码较复杂
• 直接改 textContent 可能破坏 Quill Delta 同步
• 富文本元素（图片等）偏移计算需额外处理

两种方案对比

代码量

• Quill API：3 行
• DOM API：30+ 行

• Delta 同步

• Quill API：✅ 完全同步
• DOM API：❌ 可能不同步

撤销/重做

• Quill API：✅ 正常
• DOM API：❌ 可能受影响

WebView 兼容性

• Quill API：⭐⭐⭐（依赖 Quill 版本）
• DOM API：⭐⭐⭐⭐⭐

uni-app App 端实践要点

• 逻辑层无 DOM，所有 DOM 操作必须通过 renderjs 执行
• renderjs 通过 change:prop 模板绑定接收逻辑层数据，通过 ownerVm.callMethod() 回传状态
• 方法签名：methodName(newVal, oldVal, ownerVm, vm)
• 推荐双方案：优先 Quill API → 失败则降级 DOM API

sunrains-request

注：客户端与服务端之间通信 数据 加密，签名，保证数据安全与防串改(完整功能依赖付费插件sunrains-smutil)

客户端与服务端（java）之间通信数据加密、签名，保证数据安全与防篡改
支持平台：微信小程序、H5、Android、iOS、鸿蒙
请求方式支持：GET、POST（application/json、application/x-www-form-urlencoded、multipart/form-data（计划中））

服务端（java）点击 sunrains-java

模块目录结构

sunrains-request/  
├── index.uts                          # 模块入口，统一导出  
├── js_sdk/  
│   ├── inutils/  
│   │   └── requestApi.uts             # 底层网络请求封装（uni.request / uni.uploadFile）  
│   └── openutil/  
│       ├── base64Util.uts             # Base64 编解码工具  
│       ├── randomUtil.uts             # 随机字符串生成  
│       └── request/  
│           ├── Request.uts            # 请求入口（ReqApi）  
│           └── reqHandle/  
│               ├── ReqHandle.uts      # 请求处理抽象基类  
│               ├── handle.uts         # 策略工厂（根据 reqFlag 选择 Handler）  
│               └── handle/  
│                   ├── VoidHandle.uts           # 无加密无签名模式  
│                   ├── SignHandle.uts           # 仅签名模式  
│                   ├── EncryptHandle.uts        # 仅SM4加密模式  
│                   └── SignWithEncryptHandle.uts # 签名+SM4加密模式

导出 API 一览

网络请求架构（核心）

整体流程

调用方  
  │  
  ▼  
ReqApi(frontVo: FrontRequestVo)          ← 高层入口  
  │  
  ├─ 1. selectHandle(reqFlag)            ← 根据模式选择 Handler  
  │  
  ├─ 2. handle.handleHeaderAndBody(vo)   ← 构造请求头 + 处理请求体（签名/加密）  
  │  
  ├─ 3. RequestApi(req)                  ← 底层发起 HTTP 请求  
  │  
  └─ 4. handle.handleRes(req, res)       ← 处理响应（解密/验签）  
  │  
  ▼  
返回 Response

四种请求模式（ReqFlag）

通过 FrontRequestVo.reqFlag 指定，决定请求的安全处理策略：

请求头处理（所有模式共用）

无论哪种模式，handleSignHeader 都会执行以下操作：

1. SM2加密SM4密钥：生成随机 SM4 key + iv，用服务端公钥（pubKey）通过 SM2 加密后放入 header["key"]
2. 条件签名（sign / signwithenSM2-Sm4Encrypt 模式）：
   • 生成 timestamp（时间戳）和 nonceStr（16位随机串）
   • 将所有业务参数 + timestamp + nonceStr 按 key 字典序排列，拼接为 key=value& 格式
   • 使用客户端私钥（priKey）对拼接字符串进行 SM2 签名
   • 签名结果放入 header["sign"]，同时放入 header["timestamp"] 和 header["nonceStr"]

请求体处理（按 HTTP Method + contentType）

GET 请求：

• void / sign 模式：参数拼接到 URL query string
• sm4Encrypt / signwithenSM2-Sm4Encrypt 模式：参数 JSON 序列化后 SM4 加密，拼接到 ?data=加密结果

POST 请求（按 contentType）：

响应处理

• 无加密模式（void / sign）：直接返回 Response
• 加密模式（sm4Encrypt / signwithenSM2-Sm4Encrypt）：
  1. 先校验外层 res.code == resSuccessCode()（当前定义为 0）
  2. 取出 res.data（SM4 加密的字符串）
  3. 用本次请求生成的 SM4 key + iv 解密
  4. 解密结果为内层 Response，返回给调用方

底层请求（RequestApi）

RequestApi(req: RequestVo) → Promise<Response>

• 基于 uni.request 封装
• 超时时间：req.timeout ?? 6000ms
• 成功（statusCode=200）：resolve Response 对象
  • Android 平台特殊处理：通过 JSON.parse(JSON.stringify(res.data)) 转换
  • 其他平台：直接 res.data as Response
• 失败（非200）：reject CustOtherFailError（包含 code + errorMsg）
• 网络异常：reject CustOtherFailError（包含 errCode + errMsg）

文件上传（uploadFile）

uploadFile(req: UploadFileOptions) → Promise<Response>

• 基于 uni.uploadFile 封装
• 超时时间：req.timeout ?? 12000ms
• 成功时解析 res.data 为 Response
• 失败时 reject err.errMsg

类型定义（依赖 sunrains-common-type）

FrontRequestVo（前置请求参数）

type FrontRequestVo = {  
  method: 'GET' | 'POST',           // HTTP 方法  
  url: string,                       // 请求地址  
  data: UTSJSONObject | null,        // 请求数据  
  header: UTSJSONObject | null,      // 自定义请求头（会与签名/加密头合并）  
  reqFlag: ReqFlag,                  // 安全模式标识  
  priKey: string,                    // SM2 私钥（签名时使用）  
  pubKey: string,                    // SM2 公钥（加密SM4密钥时使用）  
  contentType: "json" | "urlencoded" | "form-data" | null,  // POST内容类型  
  timeout: number | null,            // 超时时间(ms)  
  filePathParamName: string | null   // 上传文件时，文件路径的参数名  
}

Response（统一响应）

type Response = {  
  success: boolean | null,    // 是否成功  
  msg: string | null,         // 提示信息  
  code: number,               // 状态码（0=成功）  
  errorMsg: string | null,    // 错误详情  
  data: any | null            // 业务数据（加密模式下为密文字符串）  
}

RequestVo（底层请求参数）

type RequestVo = {  
  url: string,  
  method?: 'GET' | 'POST' | null,  
  header: UTSJSONObject,  
  timeout?: number | null,  
  data: any  
}

Sm4Key（SM4密钥）

type Sm4Key = {  
  key: string,  
  iv: string  
}

错误处理（依赖 sunrains-common-err）

所有请求错误统一通过 UniError 抛出：

调用方 catch 示例：

try {  
  const res = await ReqApi(frontVo)  
} catch (err) {  
  // 跨平台安全取值（避免 iOS 上 err.message 崩溃）  
  console.log("请求异常：", `${err}`)  
  // 或通过 err.message 获取错误信息（err 为 UniError 实例）  
}

工具函数

Base64 编解码

import { stringToBase64, base64ToString } from "@/uni_modules/sunrains-request"  

const encoded = stringToBase64("Hello")   // "SGVsbG8="  
const decoded = base64ToString("SGVsbG8=") // "Hello"

随机字符串

import { random } from "@/uni_modules/sunrains-request"  

const nonce = random(16)   // 生成16位随机字符串

依赖模块

使用示例

1. 无加密请求（void）

import { ReqApi } from "@/uni_modules/sunrains-request"  

const frontVo: FrontRequestVo = {  
  method: "POST",  
  url: "http://your-api.com/test",  
  data: { name: "张三", age: 18 },  
  header: null,  
  reqFlag: "void",  
  priKey: "",  
  pubKey: "",  
  contentType: "json",  
  timeout: null,  
  filePathParamName: null  
}  
const res = await ReqApi(frontVo)

2. SM2签名请求（sign）

const frontVo: FrontRequestVo = {  
  method: "POST",  
  url: "http://your-api.com/test",  
  data: { name: "张三", age: 18 },  
  header: null,  
  reqFlag: "sign",  
  priKey: "客户端SM2私钥",  
  pubKey: "服务端SM2公钥",  
  contentType: "json",  
  timeout: null,  
  filePathParamName: null  
}  
const res = await ReqApi(frontVo)

3. 签名 + SM4加密请求（signwithenSM2-Sm4Encrypt）

const frontVo: FrontRequestVo = {  
  method: "POST",  
  url: "http://your-api.com/test",  
  data: { name: "张三", age: 18 },  
  header: null,  
  reqFlag: "signwithenSM2-Sm4Encrypt",  
  priKey: "客户端SM2私钥",  
  pubKey: "服务端SM2公钥",  
  contentType: "json",  
  timeout: null,  
  filePathParamName: null  
}  
const res = await ReqApi(frontVo)  
// res.data 已自动解密

4. 文件上传（计划中）

sunrains-tabbar 自定义 TabBar 插件使用指南

点击体验h5端

📋 目录

• [1. 基础配置]
• [2. pages.json 配置]
• [3. 动态配置 TabBar]
• [4. 数字角标功能]
• [5. 小程序端特殊配置]
• [6. 主题配置]
• [7. page页跳转自定义tab页]

1. 基础配置

App.uvue onLaunch 初始化  
 import {initDefaultTabItems} from '@/uni_modules/sunrains-tabbar/tabbar-config.uts'  
        onLaunch(() => {  
        console.log('App Launch')  
        initDefaultTabItems()  
        }

1.1 创建 tabbar-config.uts 文件

在项目根目录创建 tabbar-config.uts 文件，用于注册全局组件和配置导航栏。

完整示例：

// 1. 导入所有自定义 tabbar 页面组件并注册  
import Recommend from '@/pages/home/recommend.uvue'  
import Order from '@/pages/order/order.uvue'  
import Mine from '@/pages/mine/mine.uvue'  
import {   
  setNavbarConfig,   
  NavBarConfig,   
  registerGlobalComponent,   
  setDefaultTabItems,   
  TabItem   
} from '@/uni_modules/sunrains-tabbar/types.uts'  

// 2. 注册全局组件  
registerGlobalComponent('home', Recommend)  
registerGlobalComponent('order', Order)  
registerGlobalComponent('mine', Mine)  

// 3. 配置导航栏（可选，不设置会使用默认配置）  
setNavbarConfig(new NavBarConfig(  
  true,       // 是否显示导航栏  
  17,         // 字体大小  
  'bold',     // 字体粗细  
  '#333333',  // 文字颜色  
  '#ffffff',  // 背景颜色  
  '',         // 背景图片（支持网络图片）  
  56,         // 导航栏高度  
))  

// 4. 设置默认 Tab 列表（至少设置一个固定项）  
// 其他 Tab 可通过服务端接口动态配置  
setDefaultTabItems([  
  new TabItem(  
    'home',                              // 唯一标识  
    '首页',                              // 显示名称  
    '/static/tab/main1.png',             // 未选中图标  
    '/static/tab/main1_active.png',      // 选中图标  
    '@/pages/home/recommend.uvue',       // 页面路径  
    Recommend                            // 组件引用  
  ),  
  new TabItem(  
    'mine',  
    '我的',  
    '/static/tab/main3.png',  
    '/static/tab/main3_active.png'  
  )  
])

关键步骤说明：

1. 导入组件：将所有需要作为 Tab 的页面组件导入
2. 注册组件：使用 registerGlobalComponent 注册每个组件（第一个参数为唯一标识）
3. 配置导航栏：可选配置，根据项目需求调整
4. 设置默认 Tab：至少配置一个固定 Tab，其余可动态添加

2. pages.json 配置

2.1 必需配置

必须在 pages.json 中配置自定义 TabBar 入口页面（必须放在第一个位置）：

{  
  "path": "uni_modules/sunrains-tabbar/index",  
  "style": {  
    "navigationBarTitleText": "自定义tabbar",  
    "navigationStyle": "custom"  
  }  
}

2.2 完整示例

{  
  "pages": [  
    {  
      "path": "uni_modules/sunrains-tabbar/index",  
      "style": {  
        "navigationBarTitleText": "自定义tabbar",  
        "navigationStyle": "custom"  
      }  
    },  
    {  
      "path": "pages/home/recommend",  
      "style": {  
        "navigationBarTitleText": "首页"  
      }  
    },  
    {  
      "path": "pages/mine/mine",  
      "style": {  
        "navigationBarTitleText": "我的"  
      }  
    },  
    {  
      "path": "pages/order/order",  
      "style": {  
        "navigationBarTitleText": "订单"  
      }  
    },  
    {  
      "path": "pages/detail/detail",  
      "style": {  
        "navigationBarTitleText": "详情"  
      }  
    }  
  ],  
  "globalStyle": {  
    "backgroundColor": "#ffffff"  
  }  
}

注意事项：

• 自定义 TabBar 入口页面必须配置在 pages 数组的第一位
• 所有 Tab 页面都需要在 pages 中声明
• navigationStyle 设置为 "custom" 以隐藏原生导航栏

3. 动态配置 TabBar

3.1 使用场景

当需要根据用户权限、服务端配置等动态调整 TabBar 时，可以在任意页面触发刷新。

3.2 实现示例

以下面文档 mine.uvue 页面为例：

关键点：

• 使用 refreshTabbar方法触发 TabBar 刷新
• 确保所有动态 Tab 对应的组件已在 tabbar-config.uts 中注册

4. 数字角标功能

4.1 功能说明

支持为任意 Tab 设置数字角标，用于显示未读消息数、待处理事项等。

特性：

• ✅ 动态设置/更新角标
• ✅ 超过 99 自动显示 "99+"
• ✅ 角标为 0 或 null 时不显示
• ✅ 响应式更新，立即生效

4.2 使用方法

方法一：通过事件设置（推荐）

在任意页面通过 调用 setTabBadge 方法：

import { setTabBadge} from '@/uni_modules/sunrains-tabbar/utssdk/noticetab.uts'  
// 设置订单 tab 的角标为 5  
setTabBadge("order",5)  
// 清除角标（设置为 0）  
setTabBadge("order",0)  
// 设置超过 99 显示 99+  
setTabBadge("order",150)

方法二：初始化时设置

在创建 TabItem 时传入 badge 参数：

import { TabItem } from '@/uni_modules/sunrains-tabbar/utssdk/types.uts'  

// 带角标的 tab  
new TabItem(  
  'order',   
  '订单',   
  '/static/tab/main2.png',   
  '/static/tab/main2_active.png'  
  10  // badge 参数  
)  

// 不带角标的 tab  
new TabItem(  
  'home',   
  '首页',   
  '/static/tab/main1.png',   
  '/static/tab/main1_active.png'  
)

4.3 完整示例

以 文档后面 mine.uvue 页面为例，实现动态设置角标功能：

4.4 实际应用场景

场景 1：订单未读数

// 从服务端获取未读订单数  
async function loadUnreadOrderCount() {  
  const res = await getOrderCount()  
  setTabBadge("order",res.data.count)  
}  

// 页面加载时调用  
onShow(() => {  
  loadUnreadOrderCount()  
})

场景 2：消息通知

// WebSocket 收到新消息  
websocket.onMessage((msg) => {  
  if (msg.type === 'new_message') {  
    const currentBadge = getCurrentBadge('message')  
    setTabBadge("newMessage",currentBadge + 1)  
  }  
})

场景 3：购物车数量

// 添加商品到购物车后更新角标  
function addToCart(product: Product) {  
  cartItems.push(product)  
  setTabBadge("cart",cartItems.length)  
}

5. 小程序端特殊配置

4.1 配置 tab-content-renderer.uvue

注意： 仅在需要支持微信小程序时需要配置，App 端可忽略此步骤。

在 uni_modules/sunrains-tabbar/tab-content-renderer.uvue 中配置：

<template>  
  <view class="renderer-wrap">  
    <!-- App 端：使用动态组件 -->  
    <!-- #ifndef MP-WEIXIN -->  
    <template v-for="item in items" :key="item.key">  
      <component  
        v-if="currentTab === item.key"  
        :is="item.component"  
        :key="`${item.key}-${renderKey}`"  
      />  
    </template>  
    <!-- #endif -->  

    <!-- 微信小程序端：使用静态声明 -->  
    <!-- #ifdef MP-WEIXIN -->  
    <Recommend v-if="currentTab === 'home'" style="width: 100%; height: 100%;" />  
    <Order v-if="currentTab === 'order'" style="width: 100%; height: 100%;" />  
    <Mine v-if="currentTab === 'mine'" style="width: 100%; height: 100%;" />  
    <!-- #endif -->  
  </view>  
</template>  

<script setup lang="uts">  
import { TabItem } from './utssdk/types.uts'  

// #ifdef MP-WEIXIN  
// 只有在小程序端才需要这些导入，App 端会自动忽略  
import Recommend from '@/pages/home/recommend.uvue'  
import Order from '@/pages/order/order.uvue'  
import Mine from '@/pages/mine/mine.uvue'  
// #endif  

interface Props {  
  currentTab: string  
  items: TabItem[]  
  renderKey: number  
}  

defineProps<Props>()  
</script>  

<style scoped>  
.renderer-wrap {  
  width: 100%;  
  height: 100%;  
}  
</style>

配置说明：

1. 条件编译：使用 #ifndef MP-WEIXIN 和 #ifdef MP-WEIXIN 区分平台
2. App 端：使用 <component :is="..."> 动态渲染组件
3. 小程序端：必须静态导入并声明所有可能的 Tab 组件
4. 导入位置：在 #ifdef MP-WEIXIN 块内导入组件

6. 主题配置

6.1 主题功能说明

插件支持自定义 TabBar 的主题样式，支持网络背景图、本地图片背景图、纯颜色背景（支持rgba透明）、导航栏、tabbar区域背景、图标大小、图标（支持网络图标）、文字颜色、文字大小、等属性 满足不同项目的视觉需求。

主题特性：

• ✅ 支持全局主题配置
• ✅ 支持动态切换主题
• ✅ 支持自定义主题参数

6.2 初始化时配置主题

在 tabbar-config.uts 文件中配置主题：

import {   
  setNavbarConfig,   
  NavBarConfig,   
  registerGlobalComponent,   
  setDefaultTabItems,   
  TabItem,  
  setTabBarTheme,  
  TabBarTheme  
} from '@/uni_modules/sunrains-tabbar/types.uts'  
import { setTabPageTheme} from '@/uni_modules/sunrains-tabbar/utssdk/noticetab.uts'  

let bgType : BgType = "IMG"  
//背景 如果是图片传图片路径 颜色则传 具体颜色  
let bg : string = "/static/2.png"  
//配置导航栏（可选，不设置会使用默认配置）  
let navBarConfig : NavBarConfig = new NavBarConfig(  
    true, // 是否显示导航栏  
    34,  // 字体大小  
    'bold',  // 字体粗细  
    '#FFA500', // 文字颜色  
    '',// 背景颜色  
    "", //背景图片（支持网络图片）  
    90) // 导航栏高度  

let tabbarIcon = new TabbarIcon(  
    "mine",//自定义组件唯一标识  
    //非选中图标  
    "https://gimg3.baidu.com/search/src=https%3A%2F%2Fpic.rmb.bdstatic.com%2Fbjh%2Fuser%2F779083e57f84a4ce5345b17aaf7f8459.jpeg&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=r1,1&n=0&g=4&er=404&q=100&maxorilen2heic=2000000?sec=1781283600&t=4feca8b5a1149e3ed0f28ee030f767b4",  
   //选中图标  
    "/static/tab/main3_active.png",  
   //文字颜色  
    12,  
    //非选中文字大小  
    "green",  
    //选择文字颜色  
    "white",  
    //选择文字粗细  
    "bold"  
)  

let tabbarIcons : Map<string,TabbarIcon> = new Map();  
tabbarIcons.set("mine",tabbarIcon)  

let tabbarStyle : TabbarStyle = new TabbarStyle(  
    //tabbar区域高度  
    120,  
    //tabbar区域背景  
    "rgba(21, 20, 31, 0.8)",  
    //tabbar图标文字样式  
    tabbarIcons)  

let theme = new CustomTheme(bgType, bg, navBarConfig, tabbarStyle);  
setTabPageTheme(theme)

6.3 动态修改主题

在任意页面通过调用 setTabPageTheme 方法动态修改主题：

import { setTabPageTheme} from '@/uni_modules/sunrains-tabbar/utssdk/noticetab.uts'  
// 动态修改背景色和选中颜色  
let theme = new CustomTheme(bgType, bg, navBarConfig, tabbarStyle);  
setTabPageTheme(theme)

6.4 在页面中动态切换主题

以 mine.uvue 页面为例，实现主题切换功能：

<template>  
    <scroll-view direction="vertical" class="mine-page"  
    show-scrollbar = "false"  
    enable-back-to-top="true"  
    refresher-enabled="true"  
    refresher-default-style="none"  
    refresher-background="rgba(232, 201, 183, 0.5)"  
    :refresher-triggered="data.refreshing2"  

     refresher-max-drag-distance="200px"  
          @refresherpulling="onRefresherpulling2"  
          @refresherrefresh="onRefresherrefresh2"  
          @refresherrestore="onRefresherrestore2"  

     >  
     <uni-refresh-box  
       slot="refresher"  
       :pulling-distance="data.pullingDistance2"  
       :refreshing="data.refreshing2"  
                    loading-class="loading-dark"  
                    text-class="uni-text-class-buildin"  
                    style="flex-direction: column;height: 46px;padding-top: 6px;"  
                    pulling-text="继续下拉可刷新"  
                    loosing-text="释放后会刷新"  
                    loading-text="奋力加载中..."  
                />  

        <view class="page-title">  
            <text style="color:#ff4d40">动态设置中心</text>  
        </view>  
        <view class="tabbar">  
            <text class="title-text">tabbar设置</text>  
            <button class="tabbar-btn" @click="refresh1">动态tabbar(我的)</button>  
            <button class="tabbar-btn" @click="refresh2">动态tabbar(首页、我的)</button>  
            <button class="tabbar-btn" @click="refresh3">动态tabbar(订单、我的)</button>  
            <button class="tabbar-btn" @click="refresh4">动态tabbar(我的、订单、首页)</button>  
            <text class="title-text">设置角标</text>  
            <input class="input-item" v-model="tabbar" placeholder="请输入tabbar" />  
            <input class="input-item" v-model="badge" placeholder="请输入角标" />  
            <button class="tabbar-btn" @click="setBadge">确定</button>  
            <button class="tabbar-btn" @click="theme">主题1</button>  
            <button class="tabbar-btn" @click="theme2">主题2</button>  
            <button class="tabbar-btn" @click="theme3">主题3</button>  
            <button class="tabbar-btn" @click="clear">clear</button>  
            <button class="tabbar-btn" type="default" @click="refresh">刷新</button>  
        </view>  

    </scroll-view>  
</template>  

<script setup lang="uts">  
    import { ref } from 'vue'  
    import { TabItem, GLOBAL_COMPONENT_REGISTRY, CustomTheme, TabbarIcon, TabbarStyle, NavBarConfig } from '@/uni_modules/sunrains-tabbar/utssdk/types.uts'  
    import { setTabBadge,setTabbarColorHeight,refreshTabbar ,setTabPageTheme} from '@/uni_modules/sunrains-tabbar/utssdk/noticetab.uts'  

// 用于自动化测试的数据暴露 - 使用 reactive 将所有 ref 状态集中暴露  
const data = reactive({  
  refreshing2: false,  
  pullingDistance2: 0  

})  

function onRefresherpulling2(e: RefresherEvent) {  
  data.pullingDistance2 = e.detail.dy  
}  
    const refreshing = ref(false)  

function onRefresherrefresh2() {  
  data.refreshing2 = true  
  console.log('触发刷新')  
  setTimeout(() => {  
    data.refreshing2 = false  
    console.log('刷新完成')  
  }, 1500)  
}  

function onRefresherrestore2() {  
  data.pullingDistance2 = 0  
}  

function onRefresherabort2() {  
  data.pullingDistance2 = 0  
}  

    // 上拉触底加载  
    const loadMore = () => {  
        console.log("滚动到底部", "info")  
    }  

    function clear() {  
        uni.removeStorageSync("CUSTOMTHEME")  
    }  

    const bgColor = ref<string>('pink')  
    const tabHeight = ref<string>('120')  
    const badge = ref<string>('0')  
    const ss = ref<any>("");  

    // tab 选项配置  
    const tabbar = ref<string | null>(null)  
    const selectedTab = ref<string>('mine')  
    const selectedTabIndex = ref<number>(0)  

    function setBadge() {  
        //动态设置指定tabbar 角标  
        const badgeNum = parseInt(badge.value)  
        if (isNaN(badgeNum)) {  
            uni.showToast({  
                title: '请输入有效数字',  
                icon: 'none'  
            })  
            return  
        }  
        setTabBadge(tabbar.value,badgeNum)  
        uni.showToast({  
            title: `已设置 ${tabbar.value} 角标为 ${badgeNum}`,  
            icon: 'success'  
        })  
    }  

    function setStyle() {  
        setTabbarColorHeight(bgColor.value,parseInt(tabHeight.value) )  
    }  

    function refresh1() {  
        console.log("动态tabbar(我的)")  
        refreshTabbar([  
            new TabItem('mine', 12, "red", "yellow", "bold", '我的', '/static/tab/main3.png', '/static/tab/main3_active.png')  
        ]);  
    }  
    function refresh2() {  
        console.log("动态tabbar(首页、我的)")  
        refreshTabbar([  
            new TabItem('home', 12, "red", "yellow", "bold", '首页', '/static/tab/main1.png', '/static/tab/main1_active.png'),  
            new TabItem('mine', 12, "red", "yellow", "bold", '我的', '/static/tab/main3.png', '/static/tab/main3_active.png')  
        ])  
    }  
    function refresh3() {  
        console.log("动态tabbar(订单、我的)")  

        refreshTabbar( [  
            new TabItem('order', 12, "red", "yellow", "bold", '订单', '/static/tab/main2.png', '/static/tab/main2_active.png'),  
            new TabItem('mine', 12, "red", "yellow", "bold", '我的', '/static/tab/main3.png', '/static/tab/main3_active.png')  
        ])  
    }  
    function refresh4() {  
        console.log("动态tabbar(我的、订单、首页)")  

        refreshTabbar([  
            new TabItem('mine', 12, "red", "yellow", "bold", '我的', '/static/tab/main3.png', '/static/tab/main3_active.png'),  
            new TabItem('order', 12, "red", "yellow", "bold", '订单', '/static/tab/main2.png', '/static/tab/main2_active.png'),  
            new TabItem('home', 12, "red", "yellow", "bold", '首页', '/static/tab/main1.png',  
             'https://gimg3.baidu.com/search/src=https%3A%2F%2Fpic.rmb.bdstatic.com%2Fbjh%2Fuser%2F779083e57f84a4ce5345b17aaf7f8459.jpeg&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=r1,1&n=0&g=4&er=404&q=100&maxorilen2heic=2000000?sec=1781283600&t=4feca8b5a1149e3ed0f28ee030f767b4')  
        ])  
    }  

    function theme() {  
        //主题背景类型  
        let bgType = "IMG"  
        //背景 如果是图片传图片路径 颜色则传 具体颜色  
        let bg : string = "/static/2.png"  
        // let bg:string = "black"  
        let navBarConfig : NavBarConfig = new NavBarConfig(true, 34, 'bold', '#FFA500', "rgba(191, 191, 191, 0.5)", "", 90)  
        let tabbarIcon = new TabbarIcon("mine",  
            "https://gimg3.baidu.com/search/src=https%3A%2F%2Fpic.rmb.bdstatic.com%2Fbjh%2Fuser%2F779083e57f84a4ce5345b17aaf7f8459.jpeg&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=r1,1&n=0&g=4&er=404&q=100&maxorilen2heic=2000000?sec=1781283600&t=4feca8b5a1149e3ed0f28ee030f767b4",  
            "/static/tab/main3_active.png",  
            12,  
            "green",  
            "white",  
            "bold"  
        )  
        let tabbarIcons : Map<string, TabbarIcon> = new Map();  
        tabbarIcons.set("mine", tabbarIcon)  
        let tabbarStyle : TabbarStyle = new TabbarStyle(120, "rgba(21, 20, 31, 0.8)", tabbarIcons)  
        let theme = new CustomTheme(bgType, bg, navBarConfig, tabbarStyle);  
        setTabPageTheme(theme)  
    }  

    function theme2() {  
        //主题背景类型  
        let bgType  = "IMG"  
        //背景 如果是图片传图片路径 颜色则传 具体颜色  
        let bg : string = "/static/sm.jpg"  
        // let bg:string = "black"  
        let navBarConfig : NavBarConfig = new NavBarConfig(false, 34, 'bold', '#0c0c0c', "", "", 90)  
        let tabbarIcon = new TabbarIcon("mine",  
            "/static/aj.png",  
            "/static/aj1.png",  
            20,  
            "green",  
            "red",  
            "bold"  
        )  
        let tabbarIcon1 = new TabbarIcon("home",  
            "/static/sy1.png",  
            "/static/sy.png",  
            16,  
            "black",  
            "yellow",  
            "bold"  
        )  
        let tabbarIcons : Map<string, TabbarIcon> = new Map();  
        tabbarIcons.set("mine", tabbarIcon)  
        tabbarIcons.set("home", tabbarIcon1)  
        let tabbarStyle : TabbarStyle = new TabbarStyle(120, "rgba(21, 20, 31, 0.4)", tabbarIcons)  
        let theme = new CustomTheme(bgType, bg, navBarConfig, tabbarStyle);  
        setTabPageTheme(theme)  
    }  
    function theme3() {  
        //主题背景类型  
        let bgType  = "IMG"  
        //背景 如果是图片传图片路径 颜色则传 具体颜色  
        let bg : string = "/static/777.png"  
        // let bg:string = "black"  
        let navBarConfig : NavBarConfig = new NavBarConfig(true, 34, 'bold', '#0c0c0c', "", "", 90)  
        let tabbarIcon = new TabbarIcon("mine",  
            "/static/aj.png",  
            "/static/aj1.png",  
            20,  
            "green",  
            "red",  
            "bold"  
        )  
        let tabbarIcon1 = new TabbarIcon("home",  
            "/static/sy1.png",  
            "/static/sy.png",  
            16,  
            "#1afa29",  
            "yellow",  
            "bold"  
        )  
        let tabbarIcons : Map<string, TabbarIcon> = new Map();  
        tabbarIcons.set("mine", tabbarIcon)  
        tabbarIcons.set("home", tabbarIcon1)  
        let tabbarStyle : TabbarStyle = new TabbarStyle(200, "rgba(10, 13, 31, 0.8)", tabbarIcons)  
        let theme = new CustomTheme(bgType, bg, navBarConfig, tabbarStyle);  
        setTabPageTheme(theme)  
    }  

    function init() {  
        uni.stopPullDownRefresh()  
        console.log('stop onPullDownRefresh=====');  
    }  
    onPullDownRefresh(() => {  
        console.log('onPullDownRefresh=====');  
        init()  

    })  

    function refresh() {  
        uni.startPullDownRefresh({  
            success: () => {  
                console.log("1111")  
            }  
        });  
        init()  
    }  
</script>  

<style scoped lang="scss">  
    .mine-page {  
        height: 100%;  
        // border: 12px solid red;  
        margin: 5px;  
    }  

    .page-title {  
        margin-bottom: 15px;  
        display: flex;  
        align-items: center;  
        justify-content: center;  
        width: 100%;  
    }  

    .title-text {  
        font-size: 18px;  
        font-weight: bold;  
        color: #333;  
    }  

    .tabbar {  
        // border: 2px solid cyan;  
        padding: 15px;  
        display: flex;  
        flex-direction: column;  
    }  

    .input-item {  
        height: 45px;  
        border: 1px solid #ccc;  
        border-radius: 6px;  
        padding-left: 10px;  
        background: #fff;  
        margin: 10px;  
        padding-left: 20px;  
    }  

    .picker-item {  
        height: 45px;  
        border: 1px solid #ccc;  
        border-radius: 6px;  
        background: #fff;  
        margin: 10px;  
        display: flex;  
        align-items: center;  
    }  

    .picker-display {  
        padding-left: 20px;  
        font-size: 16px;  
        color: #333;  
    }  

    .tabbar-btn {  
        margin-bottom: 10px;  
        border-radius: 8px;  
        background: #f5f5f5;  
        border: 1px solid #e5e5e5;  
        padding: 16px 0;  
        font-size: 16px;  
    }  

    .tabbar-btn:last-child {  
        margin-bottom: 0;  
    }  
</style>  

6.5 主题配置注意事项

1. 颜色格式：颜色值必须为有效的 CSS 颜色格式（如 #ffffff、rgb(255,255,255) 等）
2. tabbar区域高度单位：高度值为数字类型，单位为 rpx
3. 动态修改：通过 uni.$emit('setTheme', new CustomTheme(bgType, bg, navBarConfig, tabbarStyle)) 动态修改的主题会立即生效

7 page页跳转自定义tab页

使用 pageToTab 方法 跳转到tab页

以 detail.uvue 页面为例，实现主题切换功能：

<template>  

    <view class="detail-root">  

        <view class="detail-content">  
            <view class="detail-item">  
                <text class="label">订单编号：</text>  
                <text class="value">{{ orderId }}</text>  
            </view>  
            <view class="detail-item">  
                <text class="label">订单状态：</text>  
                <text class="value">{{ orderStatus }}</text>  
            </view>  
            <view class="detail-desc">  
                <text>这是订单{{ orderId }}的详细信息页面</text>  
            </view>  
            <view>  
                <input v-model="content" placeholder="请输入。。" />  
                <text>{{sbase64}}</text>  
                <text>{{base64yostr}}</text>  
            </view>  

            <view>  
                <button type="primary" @click="req">访问testvoid</button>  
                <button type="primary" @click="reqSm2">访问testSm2</button>  
                <button type="primary" @click="reqSm4">访问testSm4</button>  
                <button type="primary" @click="reqSm2Sm4">访问testreqSm2Sm4</button>  
                <input style="height: 50px; border:1px solid grey;margin: 5px 0;" v-model="addr" placeholder="输入跳转tabbar key"/>  
                <button type="default" @click="tz">跳转指定tab页</button>  
            </view>  
        </view>  

    </view>  

</template>  

<script setup lang="uts">  
    import { ref, computed } from 'vue'  
    import { stringToBase64, base64ToString, ReqApi } from "@/uni_modules/sunrains-request"  
    import { Response, FrontRequestVo } from "@/uni_modules/sunrains-common-type"  
    import { CustFailError, getComErrorInfo } from "@/uni_modules/sunrains-common-err"  
    import { pageToTab} from "@/uni_modules/sunrains-tabbar/utssdk/noticetab.uts"  
    const addr = ref("")  
    function tz(){  
        if(addr.value.length<1){  
            uni.showToast({  
                title: '请输入跳转的tabbar key'  
            });  
        }else{  
            pageToTab(addr.value)  
        }  

    }  

    let priKey = "4a4a1d48fc284fe2fc43970641880554aed2f69fdfbea63257ea417af4e65802"  
    let pubKey = "0460e86263ec52b38a3da24c7a605055d14f8aa5c7855e4f4e19819f4f8a5b72181afd7aa4ab19255eb871eaedaba30fa18cd5c71693d3d76b030a04969bd1edfe"  
    const BASEURL = "http://192.168.1.9:8081"  
    type IRootType = {  
        name : string;  
        age : number;  
    }  

    type Builds = {  
        buildingNo : string,  
        sortNum : number,  
        buildAreaId : string,  
        id : string  
    }  

    async function req() {  
        let data : UTSJSONObject = {  
            name: "张三",  
            age: 18  
        }  
        try {  

            let vo : FrontRequestVo = {  
                method: 'GET',  
                url: BASEURL + "/test/get/cs1",  
                data: data,  
                header: null,  
                reqFlag: "void",  
                priKey: priKey,  
                pubKey: pubKey,  
                //method 为POST时 不能为null  
                contentType: "urlencoded",  
                timeout: null,  
                //当为上传文件时 文件路径参数不能为空  
                filePathParamName: null  
            }  
            const res = await ReqApi(vo)  
            console.log("####reqvoid==", res.data)  
            // console.log("####==",res)  
        } catch (err) {  
            uni.showToast({  
                title: err.message ?? "请求异常",  
                icon: "error"  
            })  
            console.log("-----", err)  

            return  
        };  
    }  

    //"sign"|"sm4Encrypt"|"signwithenSM2-Sm4Encrypt"|"void";  
    async function reqSm2() {  
        let data : UTSJSONObject = {  
            name: "张三",  
            age: 18  
        }  

        try {  
            let vo : FrontRequestVo = {  
                method: 'GET',  
                url: BASEURL + "/test/get/cs1",  
                data: data,  
                header: null,  
                reqFlag: "sign",  
                priKey: priKey,  
                pubKey: pubKey,  
                //method 为POST时 不能为null  
                contentType: "urlencoded",  
                timeout: null,  
                //当为上传文件时 文件路径参数不能为空  
                filePathParamName: null  
            }  

            const res = await ReqApi(vo)  
            console.log("####reqSm2==", res.data)  
        } catch (err) {  
            uni.showToast({  
                title: err.message ?? "请求异常",  
                icon: "error"  
            })  

            //#ifndef APP-ANDROID  
            const errMsg = (err as any).errMsg ?? "未知错误";  
            const errCode = (err as any).errCode ?? -1;  
            console.log('标准化错误码:', errMsg);  
            console.log('标准化错误信息:', errCode);  
            //#else   
            if (err instanceof UniError) {  
                let sa = err as UniError  
                console.log('sa==:', sa);  
            }  
            //#endif  
            console.log("-----", err)  
            return  
        };  
    }  

    async function reqSm4() {  
        let data : UTSJSONObject = {  
            name: "张三",  
            age: 18  
        }  
        try {  
            let vo : FrontRequestVo = {  
                method: 'POST',  
                url: BASEURL + "/test/post/cs1",  
                data: data,  
                header: null,  
                reqFlag: "sm4Encrypt",  
                priKey: priKey,  
                pubKey: pubKey,  
                //method 为POST时 不能为null  
                contentType: "urlencoded",  
                timeout: null,  
                //当为上传文件时 文件路径参数不能为空  
                filePathParamName: null  
            }  

            const res = await ReqApi(vo)  
            console.log("####reqSm4==", res.data)  
        } catch (err) {  
            console.log("####reqSm4 err==", err)  
            uni.showToast({  
                title: err.message??"",  
                icon: "error"  
            })  
            return  
        };  
    }  

    async function reqSm2Sm4() {  
        let data : UTSJSONObject = {  
            name: "张三",  
            age: 18  
        }  
        try {  
            let vo : FrontRequestVo = {  
                method: 'POST',  
                url: BASEURL + "/test/post/cs1",  
                data: data,  
                header: null,  
                reqFlag: "signwithenSM2-Sm4Encrypt",  
                priKey: priKey,  
                pubKey: pubKey,  
                //method 为POST时 不能为null  
                contentType: "urlencoded",  
                timeout: null,  
                //当为上传文件时 文件路径参数不能为空  
                filePathParamName: null  
            }  

            const res = await ReqApi(vo)  
            console.log("####reqSm2Sm4==", res.data)  
        } catch (err) {  
            console.log("-----", err)  
            return  
        };  
    }  

    const orderId = ref<string>('')  
    const orderStatus = ref<string>('')  
    const content = ref<string>('')  
    const sbase64 = computed(() => {  
        return stringToBase64(content.value)  
    })  

    const base64yostr = computed(() => {  
        return base64ToString(sbase64.value)  
    })  

    onLoad((options) => {  
        const opts = options as UTSJSONObject  
        const id = options?.["orderId"] as string | null  
        const status = options?.["status"] as string | null  

        if (id != null) {  
            orderId.value = id  
        }  
        if (status != null) {  
            orderStatus.value = status  
        }  
        console.log(`接收订单参数：ID=${orderId.value}，状态=${orderStatus.value}`)  
    })  

    const goBack = () => {  
        uni.navigateBack()  
    }  

    function init(){  
              // uni.stopPullDownRefresh()  
              // console.log('stop onPullDownRefresh=====');  
    }  

     //  onPullDownRefresh(() => {  
     //    console.log('onPullDownRefresh=====');  
        // init()  

     //  })  

      function refresh(){  
          uni.removeStorageSync("LOGINTABBARITEMS")  
          // uni.startPullDownRefresh({  
             //  success:()=>{  
                //   console.log("1111")  
             //  }  
          // });  
          // init()  
      }  

</script>  

<style scoped>  
    .detail-root {  
/*      flex: 1;  
        display: flex;  
        flex-direction: column; */  
        background-color: #fff;  
    }  

    .status-bar {  
        height: 44px;  
        background-color: #ffffff;  
    }  

    .detail-header {  
        height: 44px;  
        background-color: #fff;  
        flex-direction: row;  
        align-items: center;  
        padding-left: 15px;  
        padding-right: 15px;  
        border-bottom-width: 1px;  
        border-bottom-style: solid;  
        border-bottom-color: #eee;  
    }  

    .back-icon {  
        font-size: 18px;  
        color: #007aff;  
        margin-right: 10px;  
    }  

    .detail-title {  
        font-size: 16px;  
        font-weight: bold;  
        color: #333;  
    }  

    .detail-content {  
        flex: 1;  
        padding: 20px;  
    }  

    .detail-item {  
        flex-direction: row;  
        margin-bottom: 20px;  
        align-items: center;  
    }  

    .label {  
        font-size: 15px;  
        color: #666;  
        width: 80px;  
    }  

    .value {  
        font-size: 15px;  
        color: #333;  
        font-weight: bold;  
    }  

    .detail-desc {  
        margin-top: 30px;  
        font-size: 14px;  
        color: #999;  
    }  
</style>  

⚠️ 常见问题

Q1: 为什么小程序端需要单独配置？

A: 微信小程序不支持动态组件渲染，必须静态声明所有可能使用的组件。

Q2: 动态 Tab 刷新失败怎么办？

A: 检查以下几点：

• 组件是否在 tabbar-config.uts 中正确注册
• 是否正确使用了 GLOBAL_COMPONENT_REGISTRY.get() 获取组件
• TabItem 的参数是否完整且类型正确

Q3: 导航栏配置不生效？

A: 确保 setNavbarConfig() 在 setDefaultTabItems() 之前调用，或在应用启动时尽早调用。

Q4: 如何设置数字角标？

A: 使用 uni.$emit('setTabBadge', {"key": "tab_key", "badge": number}) 即可，详见第 4 章。

Q5: 角标设置后不显示怎么办？

A: 检查以下几点：

• badge 值是否大于 0（0 或负数不显示）
• tab key 是否正确（必须与 TabItem 的 key 一致）
• 是否重新赋值了整个数组（直接修改对象属性不会触发响应式）

📝 总结

1. 基础配置三要素：注册组件 → 配置导航栏 → 设置默认 Tab
2. pages.json：自定义 TabBar 入口必须放在第一位
3. 动态刷新：通过 uni.$emit('refreshNewTabbar', [...]) 实现
4. 数字角标：通过 uni.$emit('setTabBadge', {"key": "...", "badge": number}) 设置
5. 小程序兼容：需要在 tab-content-renderer.uvue 中静态声明组件
6. 主题配置 通过 uni.$emit('setTheme', new CustomTheme(bgType, bg, navBarConfig, tabbarStyle)) 动态修改

sunrains-smutil 插件使用指南

本插件提供SM2、SM3 、 SM4、AES、RSA 客户端（ios，安卓，鸿蒙，微信小程序，h5），服务端（java）SM2、SM3 、 SM4、AES、RSA 算法的跨平台实现,支持以下功能:
SM2 非对称加密算法
✅ SM2 密钥对生成
✅ SM2 数字签名
✅ SM2 签名验证
✅ SM2 数据加密
✅ SM2 数据解密
SM3 密码杂凑算法
✅ SM3 哈希计算(字符串)
✅ HMAC-SM3 密钥哈希
✅ 文件 SM3 哈希
✅ 哈希值验证
SM4 对称加密算法
✅ SM4 密钥生成(含 IV)
✅ SM4 数据加密(CBC 模式)
✅ SM4 数据解密(CBC 模式)
AES 对称加密算法
✅ AES 密钥和 IV 生成
✅ AES 数据加密(CBC 模式, PKCS7/PKCS5 填充)
✅ AES 数据解密(CBC 模式, PKCS7/PKCS5 填充)
✅ 跨平台兼容(Android/iOS/HarmonyOS/H5/微信小程序)
RSA 非对称加密算法
✅ RSA 密钥对生成(2048位)
✅ RSA-OAEP-SHA256 数据加密
✅ RSA-OAEP-SHA256 数据解密
✅ SHA256withRSA 数字签名(PKCS#1 v1.5)
✅ SHA256withRSA 签名验证(PKCS#1 v1.5)
✅ 跨平台兼容(Android/iOS/HarmonyOS/H5)
⚠️ 微信小程序端暂不支持RSA-OAEP-SHA256加密解密，仅支持签名验签

调用方式

本插件同时支持回调风格和异步风格两种调用方式：

方式一：回调风格（传统方式）

import { sm2Sign } from "@/uni_modules/sunrains-util";  

sm2Sign({  
  data: "需要签名的数据",  
  privateKey: "你的私钥",  
  success: (res) => {  
    console.log("签名结果:", res.signature);  
  },  
  fail: (err) => {  
    console.error("签名失败:", err);  
  }  
});

方式二：异步风格（推荐，更简洁）

import { sm2SignAsync } from "@/uni_modules/sunrains-util";  

async function doSign() {  
  try {  
    const result = await sm2SignAsync("需要签名的数据", "你的私钥")  
    console.log("签名结果:", result.signature)  
  } catch (error) {  
    console.error("签名失败:", error)  
  }  
}

平台支持

使用示例

SM2 相关操作

1. 生成 SM2 密钥对

同步方式：

import { sm2GenerateKeyPair } from "@/uni_modules/sunrains-util";  

const result = sm2GenerateKeyPair();  
console.log("公钥:", result.publicKey);  // 04开头的130位十六进制字符串  
console.log("私钥:", result.privateKey); // 64位十六进制字符串

异步方式：

import { sm2GenerateKeyPairAsync } from "@/uni_modules/sunrains-util";  

async function generateKeys() {  
  const result = await sm2GenerateKeyPairAsync()  
  console.log("公钥:", result.publicKey)  
  console.log("私钥:", result.privateKey)  
}

2. SM2 签名

回调风格：

import { sm2Sign } from "@/uni_modules/sunrains-util";  

sm2Sign({  
  data: "需要签名的数据",  
  privateKey: "你的私钥",  
  success: (res) => {  
    console.log("签名结果:", res.signature);  
  },  
  fail: (err) => {  
    console.error("签名失败:", err);  
  }  
});

异步风格（推荐）：

import { sm2SignAsync } from "@/uni_modules/sunrains-util";  

async function doSign() {  
  try {  
    const result = await sm2SignAsync("需要签名的数据", "你的私钥")  
    console.log("签名结果:", result.signature)  
  } catch (error) {  
    console.error("签名失败:", error)  
  }  
}

3. SM2 验签

回调风格：

import { sm2Verify } from "@/uni_modules/sunrains-util";  

sm2Verify({  
  data: "原始数据",  
  signature: "签名值",  
  publicKey: "你的公钥",  
  success: (res) => {  
    console.log("验签结果:", res.valid); // true 或 false  
  },  
  fail: (err) => {  
    console.error("验签失败:", err);  
  }  
});

异步风格（推荐）：

import { sm2VerifyAsync } from "@/uni_modules/sunrains-util";  

async function doVerify() {  
  try {  
    const result = await sm2VerifyAsync("原始数据", "签名值", "你的公钥")  
    console.log("验签结果:", result.valid) // true 或 false  
  } catch (error) {  
    console.error("验签失败:", error)  
  }  
}

完整实战示例

以下是一个完整的国密算法测试页面示例，及服务端（java）工具类，展示了所有功能的实际使用：

客户端 Vue 3 Composition API 示例

 <template>  
  <view class="order-content">  
    <view class="order-header">  
      <text class="order-title">国密算法测试</text>  
    </view>  

    <scroll-view class="order-list" scroll-y="true">  
      <view class="section">  
        <view class="section-title">SM4 对称加密</view>  

        <view class="input-group">  
          <text class="label">待加密内容：</text>  
          <input v-model="sm4Content" placeholder="请输入要加密的内容" class="input" />  
        </view>  

        <button @click="testSm4Encrypt" class="btn btn-primary">SM4 加密</button>  

        <view class="result-box" v-if="sm4Key.key">  
          <text class="result-label">密钥 (key)：</text>  
          <text selectable="true" class="result-value">{{ sm4Key.key }}</text>  
        </view>  

        <view class="result-box" v-if="sm4Key.iv">  
          <text class="result-label">初始向量 (iv)：</text>  
          <text selectable="true" class="result-value">{{ sm4Key.iv }}</text>  
        </view>  

        <view class="result-box" v-if="sm4Encrypted">  
          <text class="result-label">加密结果：</text>  
          <text selectable="true" class="result-value">{{ sm4Encrypted }}</text>  
        </view>  
        <button @click="testSm4Decrypt" :disabled="sm4Encrypted.length==0" class="btn btn-secondary">SM4 解密</button>  
        <button @click="testSm4Decrypt" :disabled="sm4Encrypted === ''" :class="sm4Encrypted === '' ? 'btn btn-secondary disabled' : 'btn btn-secondary'" class="btn btn-secondary">SM4 解密</button>  

        <view class="result-box" v-if="sm4Decrypted">  
          <text class="result-label">解密结果：</text>  
          <text selectable="true" class="result-value success">{{ sm4Decrypted }}</text>  
        </view>  
      </view>  

      <view class="section">  
        <view class="section-title">SM2 数字签名</view>  

        <view class="input-group">  
          <text class="label">待签名内容：</text>  
          <input v-model="sm2SignContent" placeholder="请输入要签名的内容" class="input" />  
        </view>  

        <button @click="testSm2Sign" class="btn btn-primary">生成密钥对并签名</button>  

        <view class="result-box" v-if="sm2KeyPair.publicKey">  
          <text class="result-label">公钥：</text>  
          <text selectable="true" class="result-value small">{{ sm2KeyPair.publicKey }}</text>  
        </view>  

        <view class="result-box" v-if="sm2KeyPair.privateKey">  
          <text class="result-label">私钥：</text>  
          <text selectable="true" class="result-value small">{{ sm2KeyPair.privateKey }}</text>  
        </view>  

        <view class="result-box" v-if="sm2Signature">  
          <text class="result-label">签名结果：</text>  
          <text selectable="true" class="result-value small">{{ sm2Signature }}</text>  
        </view>  

        <button @click="testSm2Verify" :disabled="sm2Signature.length==0" class="btn btn-secondary">验签</button>  

        <view class="result-box" v-if="sm2VerifyResult !== null">  
          <text class="result-label">验签结果：</text>  
          <text class="result-value" :class="sm2VerifyResult ==true? 'success' : 'error'">  
            {{ sm2VerifyResult ==true ? '✅ 验签成功' : '❌ 验签失败' }}  
          </text>  
        </view>  
      </view>  

      <view class="section">  
        <view class="section-title">SM2 非对称加密</view>  

        <view class="input-group">  
          <text class="label">待加密内容：</text>  
          <input v-model="sm2EncryptContent" placeholder="请输入要加密的内容" class="input" />  
        </view>  

        <button @click="testSm2Encrypt" class="btn btn-primary">SM2 加密</button>  

        <view class="result-box" v-if="sm2EncryptKeyPair.publicKey">  
          <text class="result-label">公钥：</text>  
          <text selectable="true" class="result-value small">{{ sm2EncryptKeyPair.publicKey }}</text>  
        </view>  

        <view class="result-box" v-if="sm2EncryptKeyPair.privateKey">  
          <text class="result-label">私钥：</text>  
          <text selectable="true" class="result-value small">{{ sm2EncryptKeyPair.privateKey }}</text>  
        </view>  

        <view class="result-box" v-if="sm2Encrypted">  
          <text class="result-label">加密结果：</text>  
          <text selectable="true" class="result-value small">{{ sm2Encrypted }}</text>  
        </view>  

        <button @click="testSm2Decrypt" :disabled="sm2Encrypted.length==0" class="btn btn-secondary">SM2 解密</button>  

        <view class="result-box" v-if="sm2Decrypted">  
          <text class="result-label">解密结果：</text>  
          <text selectable="true" class="result-value success">{{ sm2Decrypted }}</text>  
        </view>  
      </view>  

      <view class="section">  
        <view class="section-title">SM3 哈希算法</view>  

        <!-- 1. SM3 哈希 -->  
        <view class="input-group">  
          <text class="label">待哈希内容：</text>  
          <input v-model="sm3Content" placeholder="请输入要哈希的内容" class="input" />  
        </view>  

        <button @click="testSm3Hash" class="btn btn-primary">SM3 哈希</button>  

        <view class="result-box" v-if="sm3HashResult">  
          <text class="result-label">SM3 哈希值：</text>  
          <text selectable="true" class="result-value small">{{ sm3HashResult }}</text>  
        </view>  

        <!-- 2. SM3 哈希验证 -->  
        <view class="divider"></view>  
        <view class="sub-title">SM3 哈希验证</view>  

        <view class="input-group">  
          <text class="label">验证 - 原始内容：</text>  
          <input v-model="sm3VerifyContent" placeholder="请输入原始内容" class="input" />  
        </view>  

        <button @click="testSm3Verify" :disabled="sm3VerifyContent.length == 0" class="btn btn-secondary">验证哈希值</button>  

        <view class="result-box" v-if="sm3HashMatchResult !== null">  
          <text class="result-label">哈希匹配结果：</text>  
          <text class="result-value" :class="sm3HashMatchResult == true ? 'success' : 'error'">  
            {{ sm3HashMatchResult == true ? '✅ 哈希值匹配' : '❌ 哈希值不匹配' }}  
          </text>  
        </view>  

        <!-- 3. HMAC-SM3 哈希 -->  
        <view class="divider"></view>  
        <view class="sub-title">HMAC-SM3 哈希</view>  

        <view class="input-group">  
          <text class="label">HMAC-SM3 待哈希内容：</text>  
          <input v-model="sm3HmacContent" placeholder="请输入要哈希的内容" class="input" />  
        </view>  

        <view class="input-group">  
          <text class="label">HMAC-SM3 密钥（HEX）：</text>  
          <input v-model="sm3HmacKey" placeholder="请输入HMAC密钥（HEX格式）" class="input" />  
        </view>  

        <button @click="testSm3HmacHash" :disabled="sm3HmacContent.length == 0 || sm3HmacKey.length == 0" class="btn btn-primary">HMAC-SM3 哈希</button>  

        <view class="result-box" v-if="sm3HmacHashResult">  
          <text class="result-label">HMAC-SM3 哈希值：</text>  
          <text selectable="true" class="result-value small">{{ sm3HmacHashResult }}</text>  
        </view>  

        <!-- 4. HMAC-SM3 哈希验证 -->  
        <view class="divider"></view>  
        <view class="sub-title">HMAC-SM3 哈希验证</view>  

        <view class="input-group">  
          <text class="label">验证 - 原始内容：</text>  
          <input v-model="sm3HmacVerifyContent" placeholder="请输入原始内容" class="input" />  
        </view>  

        <view class="input-group">  
          <text class="label">验证 - HMAC 密钥：</text>  
          <input v-model="sm3HmacVerifyKey" placeholder="请输入HMAC密钥" class="input" />  
        </view>  

        <view class="input-group">  
          <text class="label">验证 - 期望哈希值：</text>  
          <input v-model="sm3HmacExpectedHash" placeholder="请输入期望的哈希值" class="input" />  
        </view>  

        <button @click="testSm3HmacHashWithExpected" :disabled="sm3HmacVerifyContent.length == 0 || sm3HmacVerifyKey.length == 0 || sm3HmacExpectedHash.length == 0" class="btn btn-secondary">验证 HMAC-SM3 哈希值</button>  

        <view class="result-box" v-if="sm3HmacHashMatchResult !== null">  
          <text class="result-label">HMAC-SM3 哈希匹配结果：</text>  
          <text class="result-value" :class="sm3HmacHashMatchResult == true ? 'success' : 'error'">  
            {{ sm3HmacHashMatchResult == true ? '✅ 哈希值匹配' : '❌ 哈希值不匹配' }}  
          </text>  
        </view>  

        <!-- 5. 文件 SM3 哈希 -->  
        <view class="divider"></view>  
        <view class="sub-title">文件 SM3 哈希</view>  

        <button @click="chooseImageAndHash" class="btn btn-primary">选择图片并计算 SM3</button>  
        <button @click="chooseFileAndHash" class="btn btn-primary">选择文件并计算 SM3</button>  
        <view class="result-box" v-if="sm3FileName">  
          <text class="result-label">文件名：</text>  
          <text class="result-value">{{ sm3FileName }}</text>  
        </view>  

        <view class="result-box" v-if="sm3FileHashResult">  
          <text class="result-label">文件 SM3 哈希值：</text>  
          <text selectable="true" class="result-value small">{{ sm3FileHashResult }}</text>  
        </view>  
      </view>  

      <view class="section">  
        <view class="section-title">AES 对称加密</view>  

        <view class="input-group">  
          <text class="label">待加密内容：</text>  
          <input v-model="aesContent" placeholder="请输入要加密的内容" class="input" />  
        </view>  

        <button @click="testAesEncrypt" class="btn btn-primary">AES 加密</button>  

        <view class="result-box" v-if="aesKey.key">  
          <text class="result-label">密钥 (key)：</text>  
          <text selectable="true" class="result-value">{{ aesKey.key }}</text>  
        </view>  

        <view class="result-box" v-if="aesKey.iv">  
          <text class="result-label">初始向量 (iv)：</text>  
          <text selectable="true" class="result-value">{{ aesKey.iv }}</text>  
        </view>  

        <view class="result-box" v-if="aesEncrypted">  
          <text class="result-label">加密结果：</text>  
          <text selectable="true" class="result-value">{{ aesEncrypted }}</text>  
        </view>  

        <button @click="testAesDecrypt" :disabled="aesEncrypted.length==0" class="btn btn-secondary">AES 解密</button>  

        <view class="result-box" v-if="aesDecrypted">  
          <text class="result-label">解密结果：</text>  
          <text selectable="true" class="result-value success">{{ aesDecrypted }}</text>  
        </view>  
      </view>  

      <view class="section">  
        <view class="section-title">RSA 非对称加密</view>  

        <view class="input-group">  
          <text class="label">待加密内容：</text>  
          <input v-model="rsaContent" placeholder="请输入要加密的内容" class="input" />  
        </view>  

        <button @click="testRsaEncrypt" class="btn btn-primary">RSA 加密</button>  

        <view class="result-box" v-if="rsaKeyPair.publicKey">  
          <text class="result-label">公钥：</text>  
          <text selectable="true" class="result-value small">{{ rsaKeyPair.publicKey }}</text>  
        </view>  

        <view class="result-box" v-if="rsaKeyPair.privateKey">  
          <text class="result-label">私钥：</text>  
          <text selectable="true" class="result-value small">{{ rsaKeyPair.privateKey }}</text>  
        </view>  

        <view class="result-box" v-if="rsaEncrypted">  
          <text class="result-label">加密结果：</text>  
          <text selectable="true" class="result-value small">{{ rsaEncrypted }}</text>  
        </view>  

        <button @click="testRsaDecrypt" :disabled="rsaEncrypted.length==0" class="btn btn-secondary">RSA 解密</button>  

        <view class="result-box" v-if="rsaDecrypted">  
          <text class="result-label">解密结果：</text>  
          <text selectable="true" class="result-value success">{{ rsaDecrypted }}</text>  
        </view>  
      </view>  

      <view class="section">  
        <view class="section-title">RSA 数字签名</view>  

        <view class="input-group">  
          <text class="label">待签名内容：</text>  
          <input v-model="rsaSignContent" placeholder="请输入要签名的内容" class="input" />  
        </view>  

        <button @click="testRsaSign" class="btn btn-primary">生成密钥对并签名</button>  

        <view class="result-box" v-if="rsaSignKeyPair.publicKey">  
          <text class="result-label">公钥：</text>  
          <text selectable="true" class="result-value small">{{ rsaSignKeyPair.publicKey }}</text>  
        </view>  

        <view class="result-box" v-if="rsaSignKeyPair.privateKey">  
          <text class="result-label">私钥：</text>  
          <text selectable="true" class="result-value small">{{ rsaSignKeyPair.privateKey }}</text>  
        </view>  

        <view class="result-box" v-if="rsaSignature">  
          <text class="result-label">签名结果：</text>  
          <text selectable="true" class="result-value small">{{ rsaSignature }}</text>  
        </view>  

        <button @click="testRsaVerify" :disabled="rsaSignature.length==0" class="btn btn-secondary">验签</button>  

        <view class="result-box" v-if="rsaVerifyResult !== null">  
          <text class="result-label">验签结果：</text>  
          <text class="result-value" :class="rsaVerifyResult ==true? 'success' : 'error'">  
            {{ rsaVerifyResult ==true ? '✅ 验签成功' : '❌ 验签失败' }}  
          </text>  
        </view>  
      </view>  

      <view class="order-item" @click="goToDetail(1002, '已完成')">  
        <view class="order-info">  
          <text class="order-id">订单编号：1002</text>  
          <text class="order-status">状态：已完成</text>  
        </view>  
        <view class="order-btn">  
          <text class="go-detail">查看详情</text>  
        </view>  
      </view>  
    </scroll-view>  
  </view>  
</template>  

<script setup lang="uts">  
  import {IdcardOcrModel}from "@/uni_modules/sunrains-idcard-ocr/utssdk/interface.uts"  
  import {Response} from "@/uni_modules/sunrains-utils/index.uts"  

  import * as SM from "@/uni_modules/sunrains-smutil"  

  // ==================== SM4 相关数据 ====================  
  const sm4Content = ref("Hello World")  
  const sm4Key = ref<SM.Sm4Key>({ key: '', iv: '' })  
  const sm4Encrypted = ref("")  
  const sm4Decrypted = ref("")  

  // ==================== SM2 签名验签相关数据 ====================  
  const sm2SignContent = ref("123")  
  const sm2KeyPair = ref<SM.Sm2KeyPair>({ publicKey: '', privateKey: '' })  
  const sm2Signature = ref("")  
  const sm2VerifyResult = ref<boolean | null>(null)  

  // ==================== SM2 加密解密相关数据 ====================  
  const sm2EncryptContent = ref("Hello SM2")  
  const sm2EncryptKeyPair = ref<SM.Sm2KeyPair>({ publicKey: '', privateKey: '' })  
  const sm2Encrypted = ref("")  
  const sm2Decrypted = ref("")  

  // ==================== SM3 相关数据 ====================  
  const sm3Content = ref("Hello SM3")  
  const sm3HashResult = ref("")  
  const sm3VerifyContent = ref("")  
  const sm3HashMatchResult = ref<boolean | null>(null)  

  const sm3HmacContent = ref("Hello HMAC-SM3")  
  const sm3HmacKey = ref("0123456789abcdef0123456789abcdef")  // 默认 HMAC 密钥（32字节HEX）  
  const sm3HmacHashResult = ref("")  
  const sm3HmacVerifyContent = ref("")  
  const sm3HmacVerifyKey = ref("")  
  const sm3HmacExpectedHash = ref("")  
  const sm3HmacHashMatchResult = ref<boolean | null>(null)  
  const sm3VerifyResult = ref<boolean|null>(null)  

  const sm3FileName = ref("")  
  const sm3FileHashResult = ref("")  

  // ==================== AES 相关数据 ====================  
  const aesContent = ref("Hello AES")  
  const aesKey = ref<SM.AesKey>({ key: '', iv: '' })  
  const aesEncrypted = ref("")  
  const aesDecrypted = ref("")  

  // ==================== RSA 加密解密相关数据 ====================  
  const rsaContent = ref("Hello RSA")  
  const rsaKeyPair = ref<SM.RsaKeyPair>({ publicKey: '', privateKey: '' })  
  const rsaEncrypted = ref("")  
  const rsaDecrypted = ref("")  

  // ==================== RSA 签名验签相关数据 ====================  
  const rsaSignContent = ref("需要签名的数据")  
  const rsaSignKeyPair = ref<SM.RsaKeyPair>({ publicKey: '', privateKey: '' })  
  const rsaSignature = ref("")  
  const rsaVerifyResult = ref<boolean | null>(null)  

  // ==================== SM4 加密 ====================  
  async function testSm4Encrypt() {  
      if (sm4Content.value.length == 0) {  
          uni.showToast({ title: '请输入内容', icon: 'none' })  
          return  
      }  

      try {  
          // 生成密钥  
          const key = await SM.sm4GenerateKeyAsync()  
          sm4Key.value = { key: key.key, iv: key.iv }  
          console.log("SM4 密钥:", key)  

          // 加密  
          const encryptResult = await SM.sm4EncryptAsync(sm4Content.value, key.key, key.iv)  
          sm4Encrypted.value = encryptResult.result  
          console.log("SM4 加密成功:", encryptResult.result)  
          uni.showToast({ title: '加密成功', icon: 'success' })  

      } catch (e) {  
          console.error("SM4 加密失败:", e)  
          uni.showToast({ title: '加密失败', icon: 'error' })  
      }  
  }  

  // ==================== SM4 解密 ====================  
  async function testSm4Decrypt() {  
      if (sm4Encrypted.value.length==0 || sm4Key.value.key.length==0) {  
          uni.showToast({ title: '请先加密', icon: 'none' })  
          return  
      }  

      try {  
          const decryptResult = await SM.sm4DecryptAsync(sm4Encrypted.value, sm4Key.value.key, sm4Key.value.iv)  
          sm4Decrypted.value = decryptResult.result  
          console.log("SM4 解密成功:", decryptResult.result)  
          if (decryptResult.result == sm4Content.value) {  
              uni.showToast({ title: '解密成功且内容一致', icon: 'success' })  
          } else {  
              uni.showToast({ title: '解密成功但内容不一致', icon: 'error' })  
          }  
      } catch (e) {  
          console.error("SM4 解密失败:", e)  
          uni.showToast({ title: '解密失败', icon: 'error' })  
      }  
  }  

  // ==================== AES 加密 ====================  
  async function testAesEncrypt() {  
      if (aesContent.value.length == 0) {  
          uni.showToast({ title: '请输入内容', icon: 'none' })  
          return  
      }  

      try {  
          // 生成密钥和 IV  
          const key = await SM.aesGenerateKeyAsync()  
          aesKey.value = { key: key.key, iv: key.iv }  
          console.log("AES 密钥:", key)  

          // 加密  
          const encryptResult = await SM.aesEncryptAsync(aesContent.value, key.key, key.iv)  
          aesEncrypted.value = encryptResult.result  
          console.log("AES 加密成功:", encryptResult.result)  
          uni.showToast({ title: '加密成功', icon: 'success' })  

      } catch (e) {  
          console.error("AES 加密失败:", e)  
          uni.showToast({ title: '加密失败', icon: 'error' })  
      }  
  }  

  // ==================== AES 解密 ====================  
  async function testAesDecrypt() {  
      if (aesEncrypted.value.length==0 || aesKey.value.key.length==0) {  
          uni.showToast({ title: '请先加密', icon: 'none' })  
          return  
      }  

      try {  
          const decryptResult = await SM.aesDecryptAsync(aesEncrypted.value, aesKey.value.key, aesKey.value.iv)  
          aesDecrypted.value = decryptResult.result  
          console.log("AES 解密成功:", decryptResult.result)  
          if (decryptResult.result == aesContent.value) {  
              uni.showToast({ title: '解密成功且内容一致', icon: 'success' })  
          } else {  
              uni.showToast({ title: '解密成功但内容不一致', icon: 'error' })  
          }  
      } catch (e) {  
          console.error("AES 解密失败:", e)  
          uni.showToast({ title: '解密失败', icon: 'error' })  
      }  
  }  

  // ==================== RSA 加密 ====================  
  async function testRsaEncrypt() {  
      if (rsaContent.value.length == 0) {  
          uni.showToast({ title: '请输入内容', icon: 'none' })  
          return  
      }  

      try {  
          // 生成密钥对  
          const keyPair = await SM.rsaGenerateKeyPairAsync()  
          rsaKeyPair.value = {   
              publicKey: keyPair.publicKey,   
              privateKey: keyPair.privateKey   
          }  
          console.log("RSA 公钥:", keyPair.publicKey)  
          console.log("RSA 私钥:", keyPair.privateKey)  

          // 加密  
          const encryptResult = await SM.rsaEncryptAsync(rsaContent.value, keyPair.publicKey)  
          rsaEncrypted.value = encryptResult.result  
          console.log("RSA 加密结果:", encryptResult.result)  
          uni.showToast({ title: '加密成功', icon: 'success' })  
      } catch (e) {  
          console.error("RSA 加密失败:", e)  
          uni.showToast({ title: '加密失败', icon: 'error' })  
      }  
  }  

  // ==================== RSA 解密 ====================  
  async function testRsaDecrypt() {  
      if (rsaEncrypted.value.length==0 || rsaKeyPair.value.privateKey.length==0) {  
          uni.showToast({ title: '请先加密', icon: 'none' })  
          return  
      }  

      try {  
          const decryptResult = await SM.rsaDecryptAsync(rsaEncrypted.value, rsaKeyPair.value.privateKey)  
          rsaDecrypted.value = decryptResult.result  
          console.log("RSA 解密结果:", decryptResult.result)  

          if (decryptResult.result == rsaContent.value) {  
              uni.showToast({ title: '解密成功且内容一致', icon: 'success' })  
          } else {  
              uni.showToast({ title: '解密成功但内容不一致', icon: 'error' })  
          }  
      } catch (e) {  
          console.error("RSA 解密异常:", e)  
          uni.showToast({ title: '解密异常', icon: 'error' })  
      }  
  }  

  // ==================== RSA 签名 ====================  
  async function testRsaSign() {  
      if (rsaSignContent.value.length == 0) {  
          uni.showToast({ title: '请输入内容', icon: 'none' })  
          return  
      }  

      try {  
          // 生成密钥对  
          const keyPair = await SM.rsaGenerateKeyPairAsync()  
          rsaSignKeyPair.value = {   
              publicKey: keyPair.publicKey,   
              privateKey: keyPair.privateKey   
          }  
          console.log("RSA 公钥:", keyPair.publicKey)  
          console.log("RSA 私钥:", keyPair.privateKey)  

          // 签名  
          const signResult = await SM.rsaSignAsync(rsaSignContent.value, keyPair.privateKey)  
          rsaSignature.value = signResult.signature  
          console.log("RSA 签名成功:", signResult.signature)  
          uni.showToast({ title: '签名成功', icon: 'success' })  
      } catch (e) {  
          console.error("RSA 签名失败:", e)  
          uni.showToast({ title: '签名失败', icon: 'error' })  
      }  
  }  

  // ==================== RSA 验签 ====================  
  async function testRsaVerify() {  
      if (rsaSignature.value.length==0 || rsaSignKeyPair.value.publicKey.length==0) {  
          uni.showToast({ title: '请先签名', icon: 'none' })  
          return  
      }  

      try {  
          // 验签  
          const verifyResult = await SM.rsaVerifyAsync(rsaSignContent.value, rsaSignature.value, rsaSignKeyPair.value.publicKey)  
          rsaVerifyResult.value = verifyResult.valid  
          console.log("RSA 验签结果:", verifyResult.valid)  
          if (verifyResult.valid) {  
              uni.showToast({ title: '验签成功', icon: 'success' })  
          } else {  
              uni.showToast({ title: '验签失败', icon: 'error' })  
          }  
      } catch (e) {  
          console.error("RSA 验签异常:", e)  
          uni.showToast({ title: '验签异常', icon: 'error' })  
      }  
  }  

  // ==================== SM2 签名 ====================  
  async function testSm2Sign() {  
      if (sm2SignContent.value.length == 0) {  
          uni.showToast({ title: '请输入内容', icon: 'none' })  
          return  
      }  

      try {  
          // 生成密钥对  
          const keyPair = await SM.sm2GenerateKeyPairAsync()  
          sm2KeyPair.value = {   
              publicKey: keyPair.publicKey,   
              privateKey: keyPair.privateKey   
          }  
          console.log("SM2 公钥:", keyPair.publicKey)  
          console.log("SM2 私钥:", keyPair.privateKey)  

          // 签名  
          const signResult = await SM.sm2SignAsync(sm2SignContent.value, keyPair.privateKey)  
          sm2Signature.value = signResult.signature  
          console.log("SM2 签名成功:", signResult.signature)  
          uni.showToast({ title: '签名成功', icon: 'success' })  
      } catch (e) {  
          console.error("SM2 生成密钥对失败:", e)  
          uni.showToast({ title: '生成密钥对失败', icon: 'error' })  
      }  
  }  

  // ==================== SM2 验签 ====================  
  async function testSm2Verify() {  
      if (sm2Signature.value.length==0 || sm2KeyPair.value.publicKey.length==0) {  
          uni.showToast({ title: '请先签名', icon: 'none' })  
          return  
      }  

      try {  
          // 验签  
          const verifyResult = await SM.sm2VerifyAsync(sm2SignContent.value, sm2Signature.value, sm2KeyPair.value.publicKey)  
          sm2VerifyResult.value = verifyResult.valid  
          console.log("SM2 验签结果:", verifyResult.valid)  
          if (verifyResult.valid) {  
              uni.showToast({ title: '验签成功', icon: 'success' })  
          } else {  
              uni.showToast({ title: '验签失败', icon: 'error' })  
          }  
      } catch (e) {  
          console.error("SM2 验签异常:", e)  
          uni.showToast({ title: '验签异常', icon: 'error' })  
      }  
  }  

  // ==================== SM2 加密 ====================  
  async function testSm2Encrypt() {  
      if (sm2EncryptContent.value.length==0) {  
          uni.showToast({ title: '请输入内容', icon: 'none' })  
          return  
      }  

      try {  
          // 生成密钥对  
          const keyPair = await SM.sm2GenerateKeyPairAsync()  
          sm2EncryptKeyPair.value = {   
              publicKey: keyPair.publicKey,   
              privateKey: keyPair.privateKey   
          }  
          console.log("SM2 加密公钥:", keyPair.publicKey)  
          console.log("SM2 加密私钥:", keyPair.privateKey)  

          // 加密  
          const encryptResult = await SM.sm2EncryptAsync(sm2EncryptContent.value, keyPair.publicKey)  
          sm2Encrypted.value = encryptResult.encrypted  
          console.log("SM2 加密结果:", encryptResult.encrypted)  
          uni.showToast({ title: '加密成功', icon: 'success' })  
      } catch (e) {  
          console.error("SM2 生成密钥对失败:", e)  
          uni.showToast({ title: '生成密钥对失败', icon: 'error' })  
      }  
  }  

  // ==================== SM2 解密 ====================  
  async function testSm2Decrypt() {  
      if (sm2Encrypted.value.length==0 || sm2EncryptKeyPair.value.privateKey.length==0) {  
          uni.showToast({ title: '请先加密', icon: 'none' })  
          return  
      }  

      try {  
          const decryptResult = await SM.sm2DecryptAsync(sm2Encrypted.value, sm2EncryptKeyPair.value.privateKey)  
          sm2Decrypted.value = decryptResult.decrypted  
          console.log("SM2 解密结果:", decryptResult.decrypted)  

          if (decryptResult.decrypted == sm2EncryptContent.value) {  
              uni.showToast({ title: '解密成功且内容一致', icon: 'success' })  
          } else {  
              uni.showToast({ title: '解密成功但内容不一致', icon: 'error' })  
          }  
      } catch (e) {  
          console.error("SM2 解密异常:", e)  
          uni.showToast({ title: '解密异常', icon: 'error' })  
      }  
  }  

  // ==================== SM3 哈希 ====================  
  async function testSm3Hash() {  
      if (sm3Content.value.length == 0) {  
          uni.showToast({ title: '请输入内容', icon: 'none' })  
          return  
      }  

      try {  
          const hashResult = await SM.sm3HashAsync(sm3Content.value)  
          sm3HashResult.value = hashResult.resultHash  

          console.log("SM3 哈希成功:", hashResult.resultHash)  
          uni.showToast({ title: '哈希成功', icon: 'success' })  
      } catch (e) {  
          console.error("SM3 哈希失败:", e)  
          uni.showToast({ title: '哈希失败', icon: 'error' })  
      }  
  }  

  // ==================== HMAC-SM3 哈希 ====================  
  async function testSm3HmacHash() {  
      if (sm3HmacContent.value.length == 0) {  
          uni.showToast({ title: '请输入内容', icon: 'none' })  
          return  
      }  

      if (sm3HmacKey.value.length == 0) {  
          uni.showToast({ title: '请输入HMAC密钥', icon: 'none' })  
          return  
      }  

      try {  
          const hmacHashResult = await SM.sm3HmacHashAsync(sm3HmacContent.value, sm3HmacKey.value)  
          sm3HmacHashResult.value = hmacHashResult.resultHash  
          sm3HmacExpectedHash.value  =  hmacHashResult.resultHash  
          sm3HmacVerifyKey.value = sm3HmacKey.value  
          sm3HmacVerifyContent.value = sm3HmacContent.value  
          console.log("HMAC-SM3 哈希成功:", hmacHashResult.resultHash)  
          uni.showToast({ title: 'HMAC-SM3 哈希成功', icon: 'success' })  
      } catch (e) {  
          console.error("HMAC-SM3 哈希失败:", e)  
          uni.showToast({ title: 'HMAC-SM3 哈希失败', icon: 'error' })  
      }  
  }  

  // ==================== HMAC-SM3 验证（输入期望哈希值） ====================  
  async function testSm3HmacHashWithExpected() {  
      if (sm3HmacVerifyContent.value.length == 0) {  
          uni.showToast({ title: '请输入原始内容', icon: 'none' })  
          return  
      }  

      try {  
          // 计算实际 HMAC-SM3 哈希值  
          const res = await SM.sm3HmacVerifyAsync(sm3HmacVerifyContent.value, sm3HmacVerifyKey.value,sm3HmacHashResult.value)  
          if (res) {  
              uni.showToast({ title: 'HMAC-SM3 哈希值匹配', icon: 'success' })  
          } else {  
              uni.showToast({ title: 'HMAC-SM3 哈希值不匹配', icon: 'error' })  
          }  
      } catch (e) {  
          console.error("HMAC-SM3 哈希验证异常:", e)  
          uni.showToast({ title: '验证异常', icon: 'error' })  
      }  
  }  

  // ==================== SM3 验证 ====================  
  async function testSm3Verify() {  
      if (sm3HashResult.value.length == 0 || sm3Content.value.length == 0) {  
          uni.showToast({ title: '请先计算哈希', icon: 'none' })  
          return  
      }  

      try {  
          // 重新计算哈希并验证  
          const res = await SM.sm3VerifyAsync(sm3VerifyContent.value,sm3HashResult.value)  
          sm3VerifyResult.value = res  
          console.log("SM3 验证结果:", sm3VerifyResult.value)  

          if (sm3VerifyResult.value!) {  
              uni.showToast({ title: '验证成功', icon: 'success' })  
          } else {  
              uni.showToast({ title: '验证失败', icon: 'error' })  
          }  
      } catch (e) {  
          console.error("SM3 验证异常:", e)  
          uni.showToast({ title: '验证异常', icon: 'error' })  
      }  
  }  

  // ==================== 选择文件并计算 SM3 哈希 ====================  
  async function processFileHash(filePath: string, fileSize?: number) {  
      // 计算文件 SM3 哈希  
      uni.showLoading({ title: '计算中...' })  

      try {  
          console.log("开始计算文件 SM3 哈希")  
          console.log("文件路径:", filePath)  

          const result = await SM.sm3FileHashAsync(filePath)  
          sm3FileHashResult.value = result.resultHash  
          console.log("文件 SM3 哈希成功:", result.resultHash)  
          uni.hideLoading()  
          uni.showToast({ title: '文件哈希成功', icon: 'success' })  
      } catch (e) {  
          console.error("文件 SM3 哈希失败:", e)  
          uni.hideLoading()  
          uni.showToast({ title: '文件哈希失败', icon: 'error' })  
      }  
  }  

  function chooseFileAndHash() {  
      uni.chooseFile({  
          count: 1,  
          success: (res) => {  
              const tempFiles = res.tempFiles  
              if (tempFiles != null && tempFiles.length > 0) {  
                  const file = tempFiles[0]  
                  const fileName = file.name  
                  const filePath = file.path  
                  const fileSize = file.size  
                  sm3FileName.value = fileName != null ? fileName : "未知文件"  

                  if (filePath != null) {  
                      processFileHash(filePath, fileSize)  
                  }  
              }  
          },  
          fail: (err) => {  
              console.error("选择文件失败:", err)  
              if (err.errMsg != null && !err.errMsg.includes('cancel')) {  
                  uni.showToast({ title: '选择文件失败', icon: 'error' })  
              }  
          }  
      })  
  }  

  // ==================== 选择相册图片并计算 SM3 哈希 ====================  
  function chooseImageAndHash() {  
      uni.chooseImage({  
          count: 1,  
          sizeType: ['original'],  // 只选择原图,不压缩  
          sourceType: ['album', 'camera'],  
          success: (res) => {  
              const tempFilePaths = res.tempFilePaths  
              if (tempFilePaths != null && tempFilePaths.length > 0) {  
                  const filePath = tempFilePaths[0]  
                  const fileName = "图片文件"  
                  sm3FileName.value = fileName  
                  console.log("选择的图片(原图):", filePath)  

                  if (filePath != null) {  
                      // 调用异步函数处理文件哈希  
                      processFileHash(filePath)  
                  }  
              }  
          },  
          fail: (err) => {  
              console.error("选择图片失败:", err)  
              if (err.errMsg != null && !err.errMsg.includes('cancel')) {  
                  uni.showToast({ title: '选择图片失败', icon: 'error' })  
              }  
          }  
      })  
  }  

  const goToDetail = (orderId: number, status: string) => {  
    uni.setStorageSync('fromTabBar', true)  
    uni.navigateTo({  
      url: `/pages/detail/detail?orderId=${orderId}&status=${status}`,  
      success: () => {  
        console.log(`跳转到order${orderId}的详情页`)  
      }  
    })  
  }  

  function btn (){  

  }  

</script>  

<style scoped>  
  .order-content {  
    flex: 1;  
    display: flex;  
    flex-direction: column;  
    background-color: #f5f5f5;  
  }  

  .order-header {  
    height: 48px;  
    background-color: #fff;  
    align-items: center;  
    justify-content: center;  
    border-bottom-width: 1px;  
    border-bottom-style: solid;  
    border-bottom-color: #eee;  
  }  

  .order-title {  
    font-size: 18px;  
    font-weight: bold;  
    color: #333;  
  }  

  .order-list {  
    flex: 1;  
    padding: 10px;  
  }  

  /* 区块样式 */  
  .section {  
    background-color: #fff;  
    border-radius: 8px;  
    padding: 15px;  
    margin-bottom: 15px;  
  }  

  .section-title {  
    font-size: 16px;  
    font-weight: bold;  
    color: #333;  
    margin-bottom: 15px;  
    padding-bottom: 10px;  
    border-bottom-width: 1px;  
    border-bottom-style: solid;  
    border-bottom-color: #eee;  
  }  

  .input-group {  
    margin-bottom: 15px;  
  }  

  .label {  
    font-size: 14px;  
    color: #666;  
    margin-bottom: 8px;  
  }  

  .input {  
    height: 40px;  
    border-width: 1px;  
    border-style: solid;  
    border-color: #ddd;  
    border-radius: 4px;  
    padding: 0 10px;  
    font-size: 14px;  
    background-color: #fafafa;  
  }  

  /* 按钮样式 */  
  .btn {  
    height: 44px;  
    border-radius: 4px;  
    font-size: 15px;  
    margin-bottom: 10px;  
  }  

  .btn-primary {  
    background-color: #007aff;  
    color: #fff;  
  }  

  .btn-secondary {  
    background-color: #34c759;  
    color: #fff;  
  }  

  .btn:disabled {  
    opacity: 0.5;  
  }  

  /* 结果展示框 */  
  .result-box {  
    margin-top: 10px;  
    padding: 10px;  
    background-color: #f9f9f9;  
    border-radius: 4px;  
    border-left-width: 3px;  
    border-left-style: solid;  
    border-left-color: #007aff;  
  }  

  .result-label {  
    font-size: 12px;  
    color: #999;  
    margin-bottom: 5px;  
  }  

  .result-value {  
    font-size: 13px;  
    color: #333;  
    line-height: 1.5;  
  }  

  .result-value.small {  
    font-size: 11px;  
  }  

  .result-value.success {  
    color: #34c759;  
    font-weight: bold;  
  }  

  .result-value.error {  
    color: #ff3b30;  
    font-weight: bold;  
  }  

  .divider {  
    height: 1px;  
    background-color: #eee;  
    margin: 15px 0;  
  }  

  .sub-title {  
    font-size: 14px;  
    font-weight: bold;  
    color: #666;  
    margin-bottom: 10px;  
  }  
</style>

服务端（java工具类）

package top.sunrains;  

import org.bouncycastle.crypto.digests.SM3Digest;  
import org.bouncycastle.crypto.engines.SM2Engine;  
import org.bouncycastle.crypto.params.ECDomainParameters;  
import org.bouncycastle.crypto.params.ECPrivateKeyParameters;  
import org.bouncycastle.crypto.params.ECPublicKeyParameters;  
import org.bouncycastle.crypto.params.ParametersWithRandom;  
import org.bouncycastle.crypto.signers.SM2Signer;  
import org.bouncycastle.jce.ECNamedCurveTable;  
import org.bouncycastle.jce.spec.ECParameterSpec;  
import org.bouncycastle.util.encoders.Hex;  

import java.math.BigInteger;  
import java.security.SecureRandom;  

/**  
 *         <dependency>  
 *             <groupId>org.bouncycastle</groupId>  
 *             <artifactId>bcprov-jdk15to18</artifactId>  
 *             <version>1.69</version>  
 *         </dependency>  
 */  
public class SM2Util {  

    private static final ECParameterSpec CURVE = ECNamedCurveTable.getParameterSpec("sm2p256v1");  
    private static final ECDomainParameters DOMAIN = new ECDomainParameters(  
            CURVE.getCurve(),  
            CURVE.getG(),  
            CURVE.getN(),  
            CURVE.getH()  
    );  

    /**  
     * 生成SM2密钥对  
     *  
     * @return Map包含publicKey和privateKey，均为小写十六进制字符串  
     */  
    public static java.util.Map<String, String> generateKeyPair() {  
        try {  
            BigInteger d = new BigInteger(256, new SecureRandom()).mod(DOMAIN.getN());  
            org.bouncycastle.math.ec.ECPoint q = DOMAIN.getG().multiply(d).normalize();  

            String x = String.format("4x", q.getAffineXCoord().toBigInteger());  
            String y = String.format("4x", q.getAffineYCoord().toBigInteger());  
            String publicKey = "04" + x + y;  
            String privateKey = String.format("4x", d);  
            java.util.Map<String, String> keyMap = new java.util.HashMap<>();  
            keyMap.put("publicKey", publicKey.toLowerCase());  
            keyMap.put("privateKey", privateKey.toLowerCase());  
            return keyMap;  
        } catch (Exception e) {  
            System.err.println("密钥生成失败: " + e.getMessage());  
            e.printStackTrace();  
            java.util.Map<String, String> keyMap = new java.util.HashMap<>();  
            keyMap.put("publicKey", "");  
            keyMap.put("privateKey", "");  
            return keyMap;  
        }  
    }  

    /**  
     * SM2签名  
     *  
     * @param data 待签名的原始数据  
     * @param privateKeyHex 私钥（64字符十六进制）  
     * @return 签名结果（DER格式，小写十六进制）  
     */  
    public static String sign(String data, String privateKeyHex) {  
        try {  
            byte[] msgBytes = data.getBytes(java.nio.charset.StandardCharsets.UTF_8);  

            BigInteger d = new BigInteger(privateKeyHex, 16);  
            ECPrivateKeyParameters priKey = new ECPrivateKeyParameters(d, DOMAIN);  

            SM2Signer signer = new SM2Signer(new SM3Digest());  
            signer.init(true, priKey);  
            signer.update(msgBytes, 0, msgBytes.length);  
            byte[] sig = signer.generateSignature();  

            return Hex.toHexString(sig).toLowerCase();  
        } catch (Exception e) {  
            System.err.println("签名失败: " + e.getMessage());  
            e.printStackTrace();  
            return "";  
        }  
    }  

    /**  
     * SM2验签  
     *  
     * @param data 原始数据  
     * @param signatureHex 签名（DER格式，十六进制）  
     * @param publicKeyHex 公钥（04开头或不含04前缀的十六进制）  
     * @return 验签是否成功  
     */  
    public static boolean verify(String data, String signatureHex, String publicKeyHex) {  
        try {  
            byte[] msgBytes = data.getBytes(java.nio.charset.StandardCharsets.UTF_8);  

            String xy = publicKeyHex.startsWith("04") ? publicKeyHex.substring(2) : publicKeyHex;  
            BigInteger x = new BigInteger(xy.substring(0, 64), 16);  
            BigInteger y = new BigInteger(xy.substring(64, 128), 16);  

            org.bouncycastle.math.ec.ECPoint pubPoint = DOMAIN.getCurve().createPoint(x, y).normalize();  
            ECPublicKeyParameters pubKey = new ECPublicKeyParameters(pubPoint, DOMAIN);  

            SM2Signer signer = new SM2Signer(new SM3Digest());  
            signer.init(false, pubKey);  
            signer.update(msgBytes, 0, msgBytes.length);  

            byte[] sigBytes = Hex.decode(signatureHex);  
            return signer.verifySignature(sigBytes);  
        } catch (Exception e) {  
            System.err.println("验签失败: " + e.getMessage());  
            e.printStackTrace();  
            return false;  
        }  
    }  

    /**  
     * SM2加密  
     *  
     * @param data 待加密的原始数据（UTF-8字符串）  
     * @param publicKeyHex 公钥（04开头或不含04前缀的十六进制）  
     * @return 密文（HEX字符串，小写）  
     */  
    public static String encrypt(String data, String publicKeyHex) {  
        try {  
            byte[] dataBytes = data.getBytes(java.nio.charset.StandardCharsets.UTF_8);  

            String xy = publicKeyHex.startsWith("04") ? publicKeyHex.substring(2) : publicKeyHex;  
            BigInteger x = new BigInteger(xy.substring(0, 64), 16);  
            BigInteger y = new BigInteger(xy.substring(64, 128), 16);  

            org.bouncycastle.math.ec.ECPoint pubPoint = DOMAIN.getCurve().createPoint(x, y).normalize();  
            ECPublicKeyParameters pubKey = new ECPublicKeyParameters(pubPoint, DOMAIN);  

            SM2Engine engine = new SM2Engine(new SM3Digest(), SM2Engine.Mode.C1C3C2);  
            engine.init(true, new ParametersWithRandom(pubKey, new SecureRandom()));  

            byte[] encrypted = engine.processBlock(dataBytes, 0, dataBytes.length);  
            return Hex.toHexString(encrypted).toLowerCase();  
        } catch (Exception e) {  
            System.err.println("加密失败: " + e.getMessage());  
            e.printStackTrace();  
            return "";  
        }  
    }  

    /**  
     * SM2解密  
     *  
     * @param encryptedHex 密文（HEX字符串）  
     * @param privateKeyHex 私钥（64字符十六进制）  
     * @return 解密后的原始数据（UTF-8字符串）  
     */  
    public static String decrypt(String encryptedHex, String privateKeyHex) {  
        try {  
            byte[] encryptedBytes = Hex.decode(encryptedHex);  

            BigInteger d = new BigInteger(privateKeyHex, 16);  
            ECPrivateKeyParameters priKey = new ECPrivateKeyParameters(d, DOMAIN);  

            SM2Engine engine = new SM2Engine(new SM3Digest(), SM2Engine.Mode.C1C3C2);  
            engine.init(false, priKey);  

            byte[] decrypted = engine.processBlock(encryptedBytes, 0, encryptedBytes.length);  
            return new String(decrypted, java.nio.charset.StandardCharsets.UTF_8);  
        } catch (Exception e) {  
            System.err.println("解密失败: " + e.getMessage());  
            e.printStackTrace();  
            return "";  
        }  
    }  

    /**  
     * 测试方法  
     */  
    public static void main(String[] args) {  
        System.out.println("=== SM2 工具类测试 ===\n");  

        java.util.Map<String, String> keyPair = generateKeyPair();  
        String publicKey = keyPair.get("publicKey");  
        String privateKey = keyPair.get("privateKey");  

        System.out.println("公钥: " + publicKey);  
        System.out.println("私钥: " + privateKey);  
        System.out.println();  

        String testData = "123";  
        System.out.println("原始数据: " + testData);  

        String signature = sign(testData, privateKey);  
        System.out.println("签名: " + signature);  
        System.out.println();  

        boolean isValid = verify(testData, signature, publicKey);  
        System.out.println("验签结果: " + isValid);  
        System.out.println();  

        if (!isValid) {  
            System.err.println("验签失败！");  
        } else {  
            System.out.println("验签成功！");  
        }  

        System.out.println("\n=== SM2 加密解密测试 ===\n");  

        // 加密解密测试  
        String originalText = "Hello SM2";  
        System.out.println("原始数据: " + originalText);  

        String encrypted = encrypt(originalText, publicKey);  
        System.out.println("原始数据: " + originalText);  

        String decrypted = decrypt(encrypted, privateKey);  
        System.out.println("解密结果: " + decrypted);  
        System.out.println();  

        if (originalText.equals(decrypted)) {  
            System.out.println("加密解密成功！");  
        } else {  
            System.err.println("加密解密失败！");  
        }  
    }  
}  

package top.sunrains;  

import org.bouncycastle.jce.provider.BouncyCastleProvider;  

import javax.crypto.Cipher;  
import javax.crypto.spec.IvParameterSpec;  
import javax.crypto.spec.SecretKeySpec;  
import java.security.SecureRandom;  
import java.security.Security;  

/**  
 *         <dependency>  
 *             <groupId>org.bouncycastle</groupId>  
 *             <artifactId>bcprov-jdk15to18</artifactId>  
 *             <version>1.69</version>  
 *         </dependency>  
 *  
 * SM4国密算法工具类  
 * 使用Bouncy Castle原生API  
 * 配置信息：  
 * - 算法：SM4  
 * - 模式：CBC（密码分组链接）  
 * - 填充：PKCS5Padding  
 * - 密钥长度：128位（16字节）  
 * - IV长度：128位（16字节）  
 */  
public class Sm4Util {  

    static {  
        try {  
            Security.addProvider(new BouncyCastleProvider());  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
    }  

    public static void main(String[] args) throws Exception {  
//        String key = generateKeyHex();  
//        String iv = generateIvHex();  
        //String s = encryptHex("123", key, iv);  
        String key = "7f9a942a1aa85c331d3697a5369a37fe";  
        String iv = "cbc07750d33d6a3ef6d39fc7e7c4a876";  

        String s = "09187a80e9f52e7e962a3465ed70669e";  
        System.out.println(s);  
        String decryptedHex = decryptHex(s, key, iv);  
        System.out.println(decryptedHex);  
    }  

    /**  
     * 生成SM4密钥（16字节，128位）  
     * @return 十六进制编码的密钥字符串（32个字符）  
     */  
    public static String generateKeyHex() {  
        byte[] keyBytes = new byte[16];  
        new SecureRandom().nextBytes(keyBytes);  
        return byteArrayToHex(keyBytes);  
    }  

    /**  
     * 生成IV向量（16字节，128位）  
     * @return 十六进制编码的IV字符串（32个字符）  
     */  
    public static String generateIvHex() {  
        byte[] ivBytes = new byte[16];  
        new SecureRandom().nextBytes(ivBytes);  
        return byteArrayToHex(ivBytes);  
    }  

    /**  
     * SM4-CBC加密（字符串到HEX）  
     * 标准加密方式  
     *  
     * @param plaintext 明文字符串（UTF-8）  
     * @param keyHex 十六进制密钥字符串  
     * @param ivHex 十六进制IV字符串  
     * @return 加密后的HEX字符串  
     * @throws Exception 加密异常  
     */  
    public static String encryptHex(String plaintext, String keyHex, String ivHex) throws Exception {  
        byte[] key = decodeKeyHex(keyHex);  
        byte[] iv = decodeIvHex(ivHex);  
        byte[] data = plaintext.getBytes("UTF-8");  

        byte[] encrypted = encrypt(data, key, iv);  
        return byteArrayToHex(encrypted);  
    }  

    /**  
     * SM4-CBC加密  
     *  
     * @param data 原始数据字节数组  
     * @param key 密钥字节数组（16字节）  
     * @param iv IV字节数组（16字节）  
     * @return 加密后的字节数组  
     * @throws Exception 加密异常  
     */  
    public static byte[] encrypt(byte[] data, byte[] key, byte[] iv) throws Exception {  
        Cipher cipher = Cipher.getInstance("SM4/CBC/PKCS5Padding", "BC");  
        cipher.init(Cipher.ENCRYPT_MODE,  
                new SecretKeySpec(key, "SM4"),  
                new IvParameterSpec(iv));  
        return cipher.doFinal(data);  
    }  

    /**  
     * byte[] 转 Hex  
     *  
     * @param bytes 字节数组  
     * @return HEX字符串（小写）  
     */  
    public static String byteArrayToHex(byte[] bytes) {  
        if (bytes == null || bytes.length == 0) {  
            return "";  
        }  
        StringBuilder sb = new StringBuilder();  
        for (byte b : bytes) {  
            String hex = Integer.toHexString(b & 0xFF);  
            if (hex.length() == 1) {  
                sb.append('0');  
            }  
            sb.append(hex);  
        }  
        return sb.toString().toLowerCase();  
    }  

    public static String decryptHex(String encryptedHex, String keyHex, String ivHex) throws Exception {  
        byte[] key = decodeKeyHex(keyHex);  
        byte[] iv = decodeIvHex(ivHex);  
        byte[] encryptedData = hexToByteArray(encryptedHex);  

        byte[] decrypted = decrypt(encryptedData, key, iv);  
        return new String(decrypted, "UTF-8");  
    }  

    /**  
     * SM4-CBC解密  
     *  
     * @param encryptedData 加密数据字节数组  
     * @param key 密钥字节数组（16字节）  
     * @param iv IV字节数组（16字节）  
     * @return 解密后的原始字节数组  
     * @throws Exception 解密异常  
     */  
    public static byte[] decrypt(byte[] encryptedData, byte[] key, byte[] iv) throws Exception {  
        Cipher cipher = Cipher.getInstance("SM4/CBC/PKCS5Padding", "BC");  
        cipher.init(Cipher.DECRYPT_MODE,  
                new SecretKeySpec(key, "SM4"),  
                new IvParameterSpec(iv));  
        return cipher.doFinal(encryptedData);  
    }  

    /**  
     * 从十六进制字符串还原密钥字节数组  
     * @param keyHex 十六进制编码的密钥字符串  
     * @return 密钥字节数组（16字节）  
     */  
    public static byte[] decodeKeyHex(String keyHex) {  
        return hexToByteArray(keyHex);  
    }  

    /**  
     * 从十六进制字符串还原IV字节数组  
     * @param ivHex 十六进制编码的IV字符串  
     * @return IV字节数组（16字节）  
     */  
    public static byte[] decodeIvHex(String ivHex) {  
        return hexToByteArray(ivHex);  
    }  

    /**  
     * HEX 转 byte[]  
     *  
     * @param hex HEX字符串  
     * @return 字节数组  
     */  
    public static byte[] hexToByteArray(String hex) {  
        if (hex == null || hex.length() == 0) {  
            return new byte[0];  
        }  

        int len = hex.length() / 2;  
        byte[] bytes = new byte[len];  
        for (int i = 0; i < len; i++) {  
            int high = Character.digit(hex.charAt(i * 2), 16);  
            int low = Character.digit(hex.charAt(i * 2 + 1), 16);  
            bytes[i] = (byte) ((high << 4) | low);  
        }  
        return bytes;  
    }  

    public static String stringToHex(String str) {  
        if (str == null || str.isEmpty()) {  
            return "";  
        }  
        byte[] bytes = str.getBytes(java.nio.charset.StandardCharsets.UTF_8);  
        return byteArrayToHex(bytes);  
    }  
}  

package top.sunrains;  

import javax.crypto.Cipher;  
import javax.crypto.spec.IvParameterSpec;  
import javax.crypto.spec.SecretKeySpec;  
import java.security.SecureRandom;  
import java.util.Base64;  
import java.util.HashMap;  
import java.util.Map;  

/**  
 * AES对称加密算法工具类  
 * 使用Java原生Crypto API  
 * 配置信息：  
 * - 算法：AES-256  
 * - 模式：CBC（密码分组链接）  
 * - 填充：PKCS5Padding  
 * - 密钥长度：256位（32字节）  
 * - IV长度：128位（16字节）  
 */  
public class AesUtil {  

    /**  
     * 生成AES密钥和IV  
     * @return Map包含key (32字符) 和 iv (16字符)  
     */  
    public static Map<String, String> generateKey() {  
        try {  
            // 生成32字节的随机字符串作为密钥  
            String key = generateRandomString(32);  

            // 生成16字节的随机字符串作为IV  
            String iv = generateRandomString(16);  

            System.out.println("AES Key: " + key + " (长度: " + key.length() + ")");  
            System.out.println("AES IV: " + iv + " (长度: " + iv.length() + ")");  

            Map<String, String> result = new HashMap<>();  
            result.put("key", key);  
            result.put("iv", iv);  

            return result;  
        } catch (Exception e) {  
            System.err.println("AES 密钥生成失败: " + e.getMessage());  
            e.printStackTrace();  
            return new HashMap<>();  
        }  
    }  

    /**  
     * 生成指定长度的随机字符串  
     */  
    private static String generateRandomString(int length) {  
        String chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";  
        SecureRandom random = new SecureRandom();  
        StringBuilder result = new StringBuilder(length);  
        for (int i = 0; i < length; i++) {  
            result.append(chars.charAt(random.nextInt(chars.length())));  
        }  
        return result.toString();  
    }  

    /**  
     * AES-CBC加密  
     *  
     * @param plaintext 明文字符串（UTF-8）  
     * @param keyStr 密钥字符串（32字符）  
     * @param ivStr IV字符串（16字符）  
     * @return Base64编码的密文  
     * @throws Exception 加密异常  
     */  
    public static String encrypt(String plaintext, String keyStr, String ivStr) throws Exception {  
        // 将字符串Key和IV转换为字节数组（UTF-8编码）  
        byte[] keyBytes = keyStr.getBytes("UTF-8");  
        byte[] ivBytes = ivStr.getBytes("UTF-8");  

        // 创建密钥和IV  
        SecretKeySpec keySpec = new SecretKeySpec(keyBytes, "AES");  
        IvParameterSpec ivSpec = new IvParameterSpec(ivBytes);  

        // 创建Cipher对象（AES/CBC/PKCS5Padding）  
        Cipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding");  
        cipher.init(Cipher.ENCRYPT_MODE, keySpec, ivSpec);  

        // 执行加密  
        byte[] encrypted = cipher.doFinal(plaintext.getBytes("UTF-8"));  

        // 返回Base64编码的密文  
        return Base64.getEncoder().encodeToString(encrypted);  
    }  

    /**  
     * AES-CBC解密  
     *  
     * @param encryptedBase64 Base64编码的密文  
     * @param keyStr 密钥字符串（32字符）  
     * @param ivStr IV字符串（16字符）  
     * @return 解密后的明文字符串  
     * @throws Exception 解密异常  
     */  
    public static String decrypt(String encryptedBase64, String keyStr, String ivStr) throws Exception {  
        // 将字符串Key和IV转换为字节数组（UTF-8编码）  
        byte[] keyBytes = keyStr.getBytes("UTF-8");  
        byte[] ivBytes = ivStr.getBytes("UTF-8");  

        // 创建密钥和IV  
        SecretKeySpec keySpec = new SecretKeySpec(keyBytes, "AES");  
        IvParameterSpec ivSpec = new IvParameterSpec(ivBytes);  

        // 创建Cipher对象（AES/CBC/PKCS5Padding）  
        Cipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding");  
        cipher.init(Cipher.DECRYPT_MODE, keySpec, ivSpec);  

        // 将Base64密文解码为字节  
        byte[] encryptedBytes = Base64.getDecoder().decode(encryptedBase64);  

        // 执行解密  
        byte[] decrypted = cipher.doFinal(encryptedBytes);  

        // 返回明文字符串  
        return new String(decrypted, "UTF-8");  
    }  

    /**  
     * 测试方法  
     */  
    public static void main(String[] args) throws Exception {  
        System.out.println("=== AES 工具类测试 ===\n");  

        // 生成密钥  
        Map<String, String> keyMap = generateKey();  
        String key = keyMap.get("key");  
        String iv = keyMap.get("iv");  

        System.out.println("密钥: " + key);  
        System.out.println("IV: " + iv);  
        System.out.println();  

        // 加密测试  
        String originalText = "Hello AES";  
        System.out.println("原始数据: " + originalText);  

        String encrypted = encrypt(originalText, key, iv);  
        System.out.println("加密结果: " + encrypted);  
        System.out.println();  

        // 解密测试  
        String decrypted = decrypt(encrypted, key, iv);  
        System.out.println("解密结果: " + decrypted);  
        System.out.println();  

        if (originalText.equals(decrypted)) {  
            System.out.println("✅ 加密解密成功！");  
        } else {  
            System.err.println("❌ 加密解密失败！");  
        }  
    }  
}  

package top.sunrains;  

import cn.hutool.core.text.CharSequenceUtil;  
import org.bouncycastle.crypto.digests.SM3Digest;  
import org.bouncycastle.crypto.macs.HMac;  
import org.bouncycastle.crypto.params.KeyParameter;  
import org.bouncycastle.jce.provider.BouncyCastleProvider;  

import java.io.File;  
import java.io.FileInputStream;  
import java.io.IOException;  
import java.io.InputStream;  
import java.security.Security;  
/**  
 * SM3国密哈希算法工具类  
 * 使用Bouncy Castle原生API  
 * 功能：  
 * - 字符串哈希计算  
 * - 字节数组哈希计算  
 * - 文件哈希计算  
 * - HMAC-SM3计算  
 */  
public class SM3Util {  

    static {  
        try {  
            Security.addProvider(new BouncyCastleProvider());  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
    }  

    private static final int BUFFER_SIZE = 8192;  

    /**  
     * 计算字符串的SM3哈希值  
     *  
     * @param data 待哈希的字符串  
     * @return 哈希值（小写十六进制字符串，64个字符）  
     */  
    public static String hash(String data) {  
        if (data == null) {  
            throw new IllegalArgumentException("Data cannot be null");  
        }  
        return hash(data.getBytes(java.nio.charset.StandardCharsets.UTF_8));  
    }  

    /**  
     * 验证字符串的SM3哈希值  
     *  
     * @param data 原始数据  
     * @param expectedHash 期望的哈希值  
     * @return 是否匹配  
     */  
    public static boolean verify(String data, String expectedHash) {  
        String actualHash = hash(data);  
        return actualHash.equalsIgnoreCase(expectedHash);  
    }  

    /**  
     * 计算字节数组的SM3哈希值  
     *  
     * @param data 待哈希的字节数组  
     * @return 哈希值（小写十六进制字符串，64个字符）  
     */  
    public static String hash(byte[] data) {  
        SM3Digest digest = new SM3Digest();  
        digest.update(data, 0, data.length);  
        byte[] result = new byte[digest.getDigestSize()];  
        digest.doFinal(result, 0);  
        return byteArrayToHex(result);  
    }  

    /**  
     * 计算文件的SM3哈希值（支持大文件）  
     *  
     * @param filePath 文件路径  
     * @return 哈希值（小写十六进制字符串，64个字符）  
     * @throws IOException 文件读取异常  
     */  
    public static String hashFile(String filePath) throws IOException {  
        return hashFile(new File(filePath));  
    }  

    /**  
     * 计算文件的SM3哈希值（支持大文件）  
     *  
     * @param file 文件对象  
     * @return 哈希值（小写十六进制字符串，64个字符）  
     * @throws IOException 文件读取异常  
     */  
    public static String hashFile(File file) throws IOException {  
        if (!file.exists()) {  
            throw new IOException("File not found: " + file.getAbsolutePath());  
        }  

        SM3Digest digest = new SM3Digest();  
        byte[] buffer = new byte[BUFFER_SIZE];  

        try (InputStream is = new FileInputStream(file)) {  
            int bytesRead;  
            while ((bytesRead = is.read(buffer)) != -1) {  
                digest.update(buffer, 0, bytesRead);  
            }  
        }  

        byte[] result = new byte[digest.getDigestSize()];  
        digest.doFinal(result, 0);  
        return byteArrayToHex(result);  
    }  

    /**  
     * 计算HMAC-SM3（基于密钥的哈希消息认证码）  
     *  
     * @param data 待计算的数据  
     * @param hexKey 密钥  
     * @return HMAC-SM3结果（小写十六进制字符串，64个字符）  
     */  
    public static String hmac(String data, String hexKey) {  
        if (CharSequenceUtil.isBlank(hexKey)) {  
            throw new IllegalArgumentException("密钥不能为空");  
        }  
        return hmac(data.getBytes(java.nio.charset.StandardCharsets.UTF_8),  
                hexToByteArray(hexKey));  
    }  

    /**  
     * 计算HMAC-SM3（基于密钥的哈希消息认证码）  
     *  
     * @param data 待计算的字节数组  
     * @param hexKey hex密钥字节数组  
     * @return HMAC-SM3结果（小写十六进制字符串，64个字符）  
     */  
    public static String hmac(byte[] data, byte[] hexKey) {  
        HMac hmac = new HMac(new SM3Digest());  
        hmac.init(new KeyParameter(hexKey));  
        hmac.update(data, 0, data.length);  
        byte[] result = new byte[hmac.getMacSize()];  
        hmac.doFinal(result, 0);  
        return byteArrayToHex(result);  
    }  

    /**  
     * byte[] 转 Hex  
     *  
     * @param bytes 字节数组  
     * @return HEX字符串（小写）  
     */  
    private static String byteArrayToHex(byte[] bytes) {  
        if (bytes == null || bytes.length == 0) {  
            return "";  
        }  
        StringBuilder sb = new StringBuilder();  
        for (byte b : bytes) {  
            String hex = Integer.toHexString(b & 0xFF);  
            if (hex.length() == 1) {  
                sb.append('0');  
            }  
            sb.append(hex);  
        }  
        return sb.toString().toLowerCase();  
    }  

    /**  
     * 测试方法  
     */  
    public static void main(String[] args) throws IOException {  
        String testData = "12";  
        System.out.println("SM3: " + hash(testData));  
        String key = "1";  
        key = stringToHex(key);  
        System.out.println("HMAC-SM3 key: " + key);  
        String hmacResult = hmac(testData, key);  
        System.out.println("HMAC-SM3: " + hmacResult);  
        System.out.println("HMAC长度: " + hmacResult.length() + " 字符");  
       System.out.println("文件哈希值: " +  hashFile("/Users/sun/1/t.jpg"));  
    }  

    public static String stringToHex(String str) {  
        if (str == null || str.isEmpty()) {  
            return "";  
        }  
        byte[] bytes = str.getBytes(java.nio.charset.StandardCharsets.UTF_8);  
        return byteArrayToHex(bytes);  
    }  

    /**  
     * HEX 转 byte[]  
     *  
     * @param hex HEX字符串  
     * @return 字节数组  
     */  
    public static byte[] hexToByteArray(String hex) {  
        if (hex == null || hex.length() == 0) {  
            return new byte[0];  
        }  

        int len = hex.length() / 2;  
        byte[] bytes = new byte[len];  
        for (int i = 0; i < len; i++) {  
            int high = Character.digit(hex.charAt(i * 2), 16);  
            int low = Character.digit(hex.charAt(i * 2 + 1), 16);  
            bytes[i] = (byte) ((high << 4) | low);  
        }  
        return bytes;  
    }  
}

各平台实现说明

Android 平台

SM2 实现：

• 依赖库：BouncyCastle (org.bouncycastle:bcprov-jdk15on:1.70)

• 特点：

  • 使用 ECKeyPairGenerator 生成密钥对
  • 使用 SM2Signer 进行签名和验签（DER 格式）
  • 使用 SM2Engine 进行加密和解密（C1C3C2 格式）
  • 不依赖 JCA Provider，避免兼容性问题

SM4 实现：

• 依赖库：BouncyCastle

• 特点：

  • 使用 SM4Engine 进行加密和解密
  • CBC 模式 + PKCS7 填充
  • 支持自定义密钥和 IV

iOS 平台

实现方式：GMObjC 原生库

SM2 特点：

• 使用 GMSm2Utils 进行所有操作
• 签名自动转换为 DER 格式以兼容其他平台
• 加密输出 C1C3C2 格式（04 开头）
• 支持跨平台互通（Android/HarmonyOS）

SM4 特点：

• 使用 GMSm4Utils 进行加密解密
• CBC 模式 + PKCS7 填充
• 密钥和 IV 为 32 位十六进制字符串

HarmonyOS 平台

实现方式: @ohos.security.cryptoFramework

SM2 特点:

• 使用 HarmonyOS 原生 cryptoFramework API
• 签名使用 DER 格式
• 加密使用 C1C3C2 格式
• 完全符合国密标准

SM3 特点:

• 使用 createMd (MessageDigest) 进行普通哈希
• 使用手动实现 HMAC-SM3 (RFC 2104)
• 支持流式文件哈希处理 (4096 字节缓冲区)
• 不依赖 createMac,避免密钥参数问题

SM4 特点:

• 使用 createSymKeyGenerator 生成密钥
• 使用 createCipher 进行加密解密
• CBC 模式 + PKCS7 填充
• 支持 SM4_128 算法

AES 特点:

• 使用 crypto.createSymKeyGenerator('AES256') 创建密钥生成器
• 使用 crypto.createCipher('AES|CBC|PKCS7') 进行加解密
• CBC 模式 + PKCS7 填充
• 密钥和 IV 为随机字符串（UTF-8 编码）

H5 平台

实现方式：sm-crypto + Web Crypto API

特点：

• SM2/SM3/SM4：通过 npm 包 sm-crypto 实现
• AES：使用浏览器原生 Web Crypto API 实现
• 所有功能均在浏览器环境中运行
• SM2 签名使用 DER 格式（der: true）
• SM2 默认 userId 为 '1234567812345678'

依赖安装：

npm install --save sm-crypto

微信小程序平台

实现方式：miniprogram-sm-crypto + crypto-js + jsrsasign

特点：

• 专为小程序优化的国密算法库
• 完全支持 SM2、SM4 和 AES
• SM2：密钥生成、签名、验签、加密、解密（使用 miniprogram-sm-crypto）
• SM4：密钥生成、加密、解密（CBC 模式，使用 miniprogram-sm-crypto）
• AES：密钥生成、加密、解密（CBC 模式，使用 crypto-js）
• 需要通过微信开发者工具构建 npm

依赖安装：

npm install --save miniprogram-sm-crypto crypto-js jsrsasign

重要：微信小程序 npm 构建步骤

1. 确保项目根目录已安装上述依赖
2. 打开微信开发者工具，勾选「详情」→「本地设置」→「使用 npm 模块」
3. 点击菜单栏「工具」→「构建 npm」，生成 miniprogram_npm 目录
4. 重新编译运行小程序

注意事项

1. 密钥格式

SM2 密钥：

• 公钥：以 04 开头的 130 位十六进制字符串（非压缩格式）
• 私钥：64 位十六进制字符串

SM4 密钥：

• 密钥 (key) ：32 位十六进制字符串（128 位）
• 初始向量 (IV) ：32 位十六进制字符串（128 位）

AES 密钥：

• 密钥 (key) ：32 字符随机字符串（字母+数字，UTF-8 编码后为 256 位）
• 初始向量 (IV) ：16 字符随机字符串（字母+数字，UTF-8 编码后为 128 位）

2. 签名格式

• 所有平台的签名输出均为 DER 编码的十六进制字符串
• DER 格式确保跨平台兼容性

3. 哈希格式

SM3 哈希:

• 输出长度：64 位十六进制字符串 (256 位)
• 格式：小写十六进制
• 示例：a1b2c3d4e5f6... (64 个字符)

HMAC-SM3 哈希:

• 输出长度：64 位十六进制字符串 (256 位)
• 密钥格式：十六进制字符串
• 格式：小写十六进制

4. 加密格式

SM2 加密：

• 输出格式：C1C3C2（以 04 开头）
• 兼容 Android BouncyCastle、iOS GMObjC、HarmonyOS cryptoFramework

SM4 加密:

• 模式：CBC
• 填充：PKCS7
• 输出：十六进制字符串

AES 加密:

• 模式：CBC
• 填充：PKCS5/PKCS7
• 密钥：32 字符随机字符串（UTF-8 编码后为 256 位）
• IV：16 字符随机字符串（UTF-8 编码后为 128 位）
• 输出：Base64 编码字符串

RSA 加密:

• 算法：RSA-OAEP with SHA-256 (对应 Java 的 RSA/ECB/OAEPWithSHA-256AndMGF1Padding)
• 密钥长度：2048 位
• 私钥格式：PKCS#8 (Base64 编码)
• 公钥格式：X.509/SPKI (Base64 编码)
• 输出：Base64 编码字符串
• 跨平台兼容：Android/iOS/HarmonyOS/H5 完全互通

RSA 签名:

• 算法：SHA256withRSA (PKCS#1 v1.5)
• 私钥格式：PKCS#8 (Base64 编码)
• 公钥格式：X.509/SPKI (Base64 编码)
• 签名输出：Base64 编码字符串
• 跨平台兼容：Android/iOS/HarmonyOS/H5/微信小程序 完全互通

5. 跨平台兼容性

✅ 完全兼容:

• 各平台生成的 SM2 密钥对可以互相使用
• Android 平台签名的数据可以在 iOS/Harmony/H5 平台验证
• SM2 加密的数据可以在不同平台间解密
• SM4 加密的数据可以在 Android/iOS/Harmony 平台间加解密
• AES 加密的数据可以在所有平台间加解密（Android/iOS/HarmonyOS/H5/微信小程序）
• SM3 哈希值在所有平台保持一致(相同输入产生相同输出)
• HMAC-SM3 支持跨平台验证
• RSA-OAEP-SHA256 加密的数据可以在 Android/iOS/HarmonyOS/H5 平台间加解密
• SHA256withRSA 签名可以在所有平台间验签（包括微信小程序）

⚠️ 注意事项:

• 确保使用相同的哈希选项(默认启用)
• SM4/AES 加密和解密必须使用相同的密钥和 IV
• 微信小程序需要先构建 npm 才能使用
• SM3 文件哈希需要确保文件内容完全一致
• AES 密钥为 32 字符随机字符串，IV 为 16 字符随机字符串
• RSA 密钥长度为 2048 位，私钥为 PKCS#8 格式，公钥为 X.509/SPKI 格式
• RSA 加密使用 OAEP with SHA-256 填充，与其他平台互通
• RSA 签名使用 SHA256withRSA (PKCS#1 v1.5)，所有平台兼容
• 微信小程序端暂不支持 RSA-OAEP-SHA256 加密解密，仅支持签名验签

**元岳科技自2021年起，专注药店商城小程序的研发与技术服务。已经服务全国上百家实体药店均有真实案例，欢迎联系客服咨询。
我们给您搭建的线上商城，已经经历过众多客户的使用与验证，市场反应良好，客户运营稳定，我们熟悉从准备材料到上架成功的全流程。
根据客户的反馈，不断完善系统功能自我进化，我们始终深耕药店的技术开发领域，做到专精。
主要功能：1，线上商城，已对接互联网医院，合规开具电子处方，提供处方药服务。
2，主图水印，自动给产品主图打上水印，合规不显示药品的功能和用量等信息
3，药品标签，分类别展示不同的产品标签，区分处方药，甲类otc，乙类otc.
4，合规要求，处方药设置营销活动，自动阻断，甲类OTC参加部分营销活动自动阻断。
5，小票打印，电子面单打印，快递发货，物流轨迹同步。
6，可提供渠道办理《互联网药品信息服务备案凭证》，全程协助指导，包上架成功。
。。。。。更多功能。。。。
技术栈：前端使用uniapp开发，后端php，thinkphp框架，前后端分离，二开更便捷。提供全靠开源代码，可定制开发。
电话：18678829759，同V.

@meng-xi/uni-router

为 uni-app 提供类似 vue-router 风格的路由管理系统（uni_modules 版本）。

特性

• vue-router 风格 API - 熟悉的 push / replace / back 导航方式，零学习成本
• 路由守卫 - 全局前置守卫 beforeEach、解析守卫 beforeResolve、后置钩子 afterEach、路由独享守卫 beforeEnter
• 守卫超时保护 - 守卫未调用 next() 时自动中止导航，超时时间可配置（guardTimeout）
• 命名路由 - 通过 name 进行导航，无需硬编码路径字符串
• 路由元信息 - meta 字段支持页面标题、权限标记、TabBar 标识等自定义数据
• uni API 拦截 - 拦截 uni.navigateTo 等原生导航 API，确保守卫始终生效（interceptUniApi）
• 路由状态同步 - syncRoute() 将路由状态与实际页面栈同步，处理物理返回键等非路由器导航
• 路由变化监听 - onRouteChange() 订阅路由状态变化，包括导航完成和状态同步
• RouterLink 组件 - 声明式导航组件，支持 push / replace 模式和 @error 事件
• TypeScript 类型提示 - 通过模块增强为路由名称和路径提供自动补全和类型检查
• 错误处理 - 完整的 RouterError / NavigationFailure 体系，支持 onError 全局捕获
• 组合式 API - useRouter() / useRoute() 在组件中便捷访问路由器
• uni_modules 集成 - 通过 uni_modules 方式安装，无需 npm，开箱即用

📖 完整文档：https://mengxi-studio.github.io/uni-router/

安装

uni_modules（推荐）

将 mxuni-router 目录复制到项目的 uni_modules 目录下：

src/  
  └── uni_modules/  
        └── mxuni-router/  
              ├── js_sdk/  
              │     ├── index.js  
              │     ├── index.cjs  
              │     ├── index.d.ts  
              │     └── index.d.cts  
              ├── components/  
              │     └── mxuni-router/  
              │           └── mxuni-router.vue  
              ├── package.json  
              └── readme.md

npm

pnpm add @meng-xi/uni-router

npm 方式需将导入路径改为 @meng-xi/uni-router。

快速开始

1. 创建路由器

// main.ts  
import { createSSRApp } from 'vue'  
import { createRouter } from './uni_modules/mxuni-router/js_sdk/index.js'  
import App from './App.vue'  

const router = createRouter({  
    routes: [  
        { path: 'pages/index/index', name: 'home', meta: { title: '首页' } },  
        { path: 'pages/about/about', name: 'about', meta: { title: '关于', requireAuth: true } },  
        { path: 'pages/user/user', name: 'user', meta: { title: '我的', isTab: true } }  
    ],  
    strict: true  
})  

export function createApp() {  
    const app = createSSRApp(App)  
    app.use(router)  
    return { app }  
}

2. 路由导航

import { useRouter, useRoute } from './uni_modules/mxuni-router/js_sdk/index.js'  

// 在组件 setup 中使用  
const router = useRouter()  
const route = useRoute()  

// 路径导航  
await router.push('/pages/about/about')  
await router.push({ path: '/pages/about/about', query: { id: '1' } })  

// 命名导航  
await router.push({ name: 'about' })  

// 返回  
await router.back()  
await router.back(2) // 返回两级

3. 路由守卫

// 全局前置守卫 - 登录验证  
router.beforeEach((to, from, next) => {  
    if (to.meta.requireAuth && !isLoggedIn()) {  
        next({ name: 'login', query: { redirect: to.fullPath } })  
    } else {  
        next()  
    }  
})  

// 全局后置钩子  
router.afterEach((to, from) => {  
    console.log(`导航完成: ${from.path} → ${to.path}`)  
})

4. 自动生成路由配置（推荐）

配合 @meng-xi/vite-plugin 的 generateRouter 插件，可从 pages.json 自动生成路由配置和类型声明：

pnpm add @meng-xi/vite-plugin -D

// vite.config.ts  
import { defineConfig } from 'vite'  
import uni from '@dcloudio/vite-plugin-uni'  
import { generateRouter } from '@meng-xi/vite-plugin'  

export default defineConfig({  
    plugins: [  
        uni(),  
        generateRouter({  
            pagesJsonPath: 'src/pages.json',  
            outputPath: 'src/router.config.ts',  
            dts: true,  
            metaMapping: {  
                navigationBarTitleText: 'title',  
                requireAuth: 'requireAuth'  
            }  
        })  
    ]  
})

然后在 main.ts 中导入生成的路由配置：

import { createRouter } from './uni_modules/mxuni-router/js_sdk/index.js'  
import routes from './router.config'  

const router = createRouter({ routes })

API 概览

核心

Router 实例方法

错误码

RouterOptions 配置项

RouterLink 组件

声明式导航组件，对应 uni-app 的 <navigator>，自动通过路由器执行导航。

<!-- 路径导航 -->  
<mxuni-router to="/pages/about/about">  
    <view>跳转到关于页</view>  
</mxuni-router>  

<!-- replace 模式 -->  
<mxuni-router to="/pages/about/about" replace>  
    <view>替换当前页</view>  
</mxuni-router>  

<!-- 捕获导航失败 -->  
<mxuni-router to="/pages/about/about" @error="onNavError">  
    <view>跳转</view>  
</mxuni-router>

TypeScript 类型提示

启用 dts: true 后，generateRouter 插件自动生成类型声明文件，为路由导航提供类型安全：

// 路由名称自动补全  
router.push({ name: 'pagesIndexIndex' }) // ✅ 自动补全  
router.push({ name: 'invalidName' }) // ❌ 类型错误  

// 路径自动补全  
router.push({ path: '/pages/index/index' }) // ✅ 自动补全  
router.push({ path: '/invalid/path' }) // ❌ 类型错误

与 pages.json 的关系

Uni Router 不替代 pages.json，而是与之配合使用：

License

MIT

https://www.catpull.com/

增加取消云打包排队的按钮，以及增加取消云打包排队的cli命令

初始排查方向：

1. 微信API兼容性问题
2. 组件兼容性问题
3. 数据更新机制问题

排查过程：
在初步测试中，我们发现该小程序仅能在体验版环境下通过电脑端进行查看，而开发版本则无法正常打开，或使用自动预览功能，点击 预览->自动预览，可以选择启动 PC 自动预览，点击编译并预览，成功的话将在微信 PC 版上自动拉起小程序。
进一步的诊断显示，即使移除了微信API相关的更新代码，应用仍然出现卡顿现象。为精确定位问题源头，我们采取了逐页注释与标签级注释的方法逐步排除，最终确认问题是由于某公共状态管理中的数据引起。
具体而言，所有使用TabBar导航模式的页面以及登录页面均频繁调用同一接口，并基于此更新上述提及的公共状态管理中的数据，导致了性能瓶颈。

解决方案：
● 在短时间内减少对特定接口的请求频率。
● 在更新公共状态管理的数据时引入一致性检查逻辑，即只有当新获取的数据与现有数据存在差异时才执行更新操作。
● 同时该公共状态管理数据appConfig嵌套过深，如需使用appConfig中某个单一数据，请在store文件中的getters声明再引用。