add: bar components

src/VueAdmin.ts

@@ -53,6 +53,8 @@ export interface ShrimpAdminOptions {
     locales?: Record<string, any>
     /** 语言列表,默认 [{ lang: 'zh-cn', name: '简体中文' }] */
     langList?: { lang: string; name: string }[]
+    /** 顶栏(userbar)自定义组件,按序渲染在语言切换左侧。业务侧注入全局头部小部件(如终端商户选择器) */
+    headerWidgets?: Component[]
 }
 
 // ============== 源注册表 ==============
@@ -138,6 +140,9 @@ export class VueAdmin extends ShrimpClient {
 
     state = reactive({ isMobile: false })
 
+    /** 顶栏自定义组件(由 createShrimpAdmin 的 headerWidgets 注入),userbar 按序渲染 */
+    headerWidgets: Component[] = []
+
     private _token: string | null = null
     get token() { return this._token }
     set token(value: string | null) {
@@ -170,6 +175,7 @@ export class VueAdmin extends ShrimpClient {
         super()
         this.config = opts.config
         this.langList = opts.langList || [{ lang: 'zh-cn', name: '简体中文' }]
+        this.headerWidgets = opts.headerWidgets || []
 
         if (opts.sources) {
             Object.assign(externalSources, opts.sources)

src/components/userbar.vue

@@ -1,5 +1,7 @@
 <template>
 	<div class="user-bar">
+		<!-- 业务侧注入的顶栏部件(headerWidgets),按序渲染在语言切换左侧 -->
+		<component :is="w" v-for="(w, i) in vueAdmin.headerWidgets" :key="i" />
 		<LangSwitch class="panel-item" />
 		<div class="panel-item" @click="screen">
 			<el-icon><el-icon-full-screen /></el-icon>