rhjy-ui 0.2.2 → 0.2.4

package/README.md

@@ -76,16 +76,19 @@ const handleTaskAction = ({ action, task }) => {
 </script>
 
 <template>
-  <RhDataCenter
-    :categories="categories"
-    :load-tasks="loadTasks"
-    @task-action="handleTaskAction"
-  />
+  <RhDataCenter
+    :categories="categories"
+    :load-tasks="loadTasks"
+    sidebar-width="160px"
+    @task-action="handleTaskAction"
+  />
 </template>
 ```
 
 The “全部任务” rule is application-owned. It may omit `taskType`, pass a fixed value, or combine multiple requests without changing the component.
 
+Use `sidebar-width` with a number or CSS size string to adjust the data type panel width. Its default value is `124px`.
+
 Category counts are optional and application-owned. Set `show-category-count` to `false` to hide every category count, or pass `category-counts` to display values before individual categories are loaded:
 
 ```vue

package/dist/data-center/RhDataCenter.vue.d.ts

@@ -34,6 +34,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     label?: string;
     width?: string | number;
     panelHeight?: string | number;
+    sidebarWidth?: string | number;
     panelRight?: string | number;
     pollInterval?: number;
     refreshOnOpen?: boolean;
@@ -47,6 +48,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     label: string;
     width: number;
     panelHeight: number;
+    sidebarWidth: number;
     panelRight: number;
     pollInterval: number;
     refreshOnOpen: boolean;
@@ -68,6 +70,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     label?: string;
     width?: string | number;
     panelHeight?: string | number;
+    sidebarWidth?: string | number;
     panelRight?: string | number;
     pollInterval?: number;
     refreshOnOpen?: boolean;
@@ -81,6 +84,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     label: string;
     width: number;
     panelHeight: number;
+    sidebarWidth: number;
     panelRight: number;
     pollInterval: number;
     refreshOnOpen: boolean;
@@ -98,6 +102,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
 }>, {
     label: string;
     width: string | number;
+    sidebarWidth: string | number;
     showCategoryCount: boolean;
     modelValue: boolean;
     panelHeight: string | number;

package/dist/data-center/RhDataCenterPanel.vue.d.ts

@@ -25,6 +25,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     categories: RhDataCenterCategory[];
     loadTasks: RhDataCenterLoadTasks;
     activeCategoryKey?: string | number;
+    sidebarWidth?: string | number;
     closeable?: boolean;
     showTotal?: boolean;
     showCategoryCount?: boolean;
@@ -32,6 +33,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     recentDaysText?: string;
 }>, {
     activeCategoryKey: any;
+    sidebarWidth: number;
     closeable: boolean;
     showTotal: boolean;
     showCategoryCount: boolean;
@@ -47,6 +49,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     categories: RhDataCenterCategory[];
     loadTasks: RhDataCenterLoadTasks;
     activeCategoryKey?: string | number;
+    sidebarWidth?: string | number;
     closeable?: boolean;
     showTotal?: boolean;
     showCategoryCount?: boolean;
@@ -54,6 +57,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     recentDaysText?: string;
 }>, {
     activeCategoryKey: any;
+    sidebarWidth: number;
     closeable: boolean;
     showTotal: boolean;
     showCategoryCount: boolean;
@@ -65,6 +69,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     onError?: (error: unknown, category: RhDataCenterCategory) => any;
 }>, {
     activeCategoryKey: string | number;
+    sidebarWidth: string | number;
     closeable: boolean;
     showTotal: boolean;
     showCategoryCount: boolean;

package/dist/data-center/RhDataCenterTip.vue.d.ts

@@ -43,9 +43,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     type: string | number;
     title: string;
     width: string | number;
+    content: string;
     modelValue: boolean;
     minutes: number;
-    content: string;
     showGuideAnimation: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;

package/dist/data-center/constants.d.ts

@@ -7,5 +7,6 @@ export declare const RH_DATA_CENTER_TASK_STATUS: {
 export declare const RH_DATA_CENTER_DEFAULT_LABEL = "\u6570\u636E\u5904\u7406\u4E2D\u5FC3";
 export declare const RH_DATA_CENTER_DEFAULT_WIDTH = 606;
 export declare const RH_DATA_CENTER_DEFAULT_HEIGHT = 500;
+export declare const RH_DATA_CENTER_DEFAULT_SIDEBAR_WIDTH = 124;
 export declare const RH_DATA_CENTER_DEFAULT_POLL_INTERVAL = 1000;
 export declare const RH_DATA_CENTER_RECENT_DAYS_TEXT = "-\u6B64\u5904\u4EC5\u5C55\u793A\u8FD115\u5929\u5185\u7684\u6570\u636E-";

package/dist/data-center/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),I=require("../_plugin-vue_export-helper-f246444f.cjs");const H={class:"rh-data-center-panel__state"},S=e.defineComponent({__name:"RhDataCenterState",props:{text:{},retryable:{type:Boolean,default:!1}},emits:["retry"],setup(t,{emit:p}){const o=p;return(s,d)=>(e.openBlock(),e.createElementBlock("div",H,[e.createElementVNode("span",null,e.toDisplayString(t.text),1),t.retryable?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"rh-data-center-panel__retry",onClick:d[0]||(d[0]=c=>o("retry"))}," 重新加载 ")):e.createCommentVNode("",!0)]))}}),M={class:"rh-data-center-panel__task"},O={class:"rh-data-center-panel__taskMain"},F={class:"rh-data-center-panel__taskTitle"},U={key:0,class:"rh-data-center-panel__taskTag"},K={key:0,class:"rh-data-center-panel__progress"},q={class:"rh-data-center-panel__meta"},G={key:0,class:"rh-data-center-panel__actions"},W=["disabled","onClick"],j=e.defineComponent({__name:"RhDataCenterTaskItem",props:{task:{}},emits:["action"],setup(t,{emit:p}){const o=t,s=p,d=e.computed(()=>{const c=Number(o.task.progress||0);return Math.min(100,Math.max(0,c))});return(c,k)=>{var f;return e.openBlock(),e.createElementBlock("div",M,[e.createElementVNode("div",O,[e.createElementVNode("div",F,[e.createElementVNode("span",null,e.toDisplayString(t.task.title),1),t.task.tag?(e.openBlock(),e.createElementBlock("span",U,e.toDisplayString(t.task.tag),1)):e.createCommentVNode("",!0)]),t.task.status!=="success"?(e.openBlock(),e.createElementBlock("div",K,[e.createElementVNode("div",{class:e.normalizeClass(["rh-data-center-panel__progressBar",{"is-failed":t.task.status==="failed"}]),style:e.normalizeStyle({width:`${d.value}%`})},null,6)])):e.createCommentVNode("",!0),e.createElementVNode("div",q,e.toDisplayString(t.task.createdAt),1),t.task.message?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["rh-data-center-panel__message",{"is-failed":t.task.status==="failed"}])},e.toDisplayString(t.task.message),3)):e.createCommentVNode("",!0)]),(f=t.task.actions)!=null&&f.length?(e.openBlock(),e.createElementBlock("div",G,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.task.actions,y=>(e.openBlock(),e.createElementBlock("button",{key:y.key,type:"button",class:"rh-data-center-panel__action",disabled:y.disabled,onClick:g=>s("action",y.key)},e.toDisplayString(y.label),9,W))),128))])):e.createCommentVNode("",!0)])}}}),X="数据处理中心",Y=606,J=500,Q=1e3,Z="-此处仅展示近15天内的数据-",ee={class:"rh-data-center-panel"},te={class:"rh-data-center-panel__sidebar"},oe=["onClick"],ne={key:0,class:"rh-data-center-panel__categoryCount"},ae={class:"rh-data-center-panel__main"},re={class:"rh-data-center-panel__title"},le={class:"rh-data-center-panel__scroll"},se={key:0,class:"rh-data-center-panel__footer"},L=e.defineComponent({__name:"RhDataCenterPanel",props:{categories:{},loadTasks:{},activeCategoryKey:{default:void 0},closeable:{type:Boolean,default:!0},showTotal:{type:Boolean,default:!0},showCategoryCount:{type:Boolean,default:!0},categoryCounts:{},recentDaysText:{default:Z}},emits:["close","refresh","task-action","error"],setup(t,{expose:p,emit:o}){const s=t,d=o,c=e.ref(s.activeCategoryKey),k=e.ref({}),f=e.ref({}),y=e.ref({}),g=e.ref({}),_=e.ref({}),u=e.computed(()=>s.categories.find(l=>l.key===c.value)||s.categories[0]),E=e.computed(()=>{var l;return String(((l=u.value)==null?void 0:l.key)??"")}),C=e.computed(()=>k.value[E.value]),R=e.computed(()=>f.value[E.value]===!0),B=e.computed(()=>y.value[E.value]),D=l=>{var n,h,T;if(!s.showCategoryCount)return;const i=String(l.key),a=(n=s.categoryCounts)==null?void 0:n[i];if(a!==void 0)return a;for(const r of Object.values(k.value)){const v=(h=r.counts)==null?void 0:h[i];if(v!==void 0)return v}return(T=k.value[i])==null?void 0:T.total},V=async(l=!1)=>{const i=u.value;if(!i)return;const a=String(i.key);if(_.value[a]&&!l)return;_.value[a]=!0,f.value[a]=!0,y.value[a]=void 0;const n=(g.value[a]||0)+1;g.value[a]=n,d("refresh",i);try{const h=await s.loadTasks({category:i});if(g.value[a]!==n||E.value!==a)return;k.value[a]=h}catch(h){if(g.value[a]!==n||E.value!==a)return;y.value[a]=h,d("error",h,i)}finally{g.value[a]===n&&(f.value[a]=!1,_.value[a]=!1)}},w=async l=>{c.value!==l.key&&(c.value=l.key,await V())},N=(l,i)=>{const a=u.value;a&&d("task-action",{action:l,task:i,category:a})};return e.onMounted(()=>{var l;c.value===void 0&&(c.value=(l=s.categories[0])==null?void 0:l.key)}),p({refresh:V}),(l,i)=>{var a;return e.openBlock(),e.createElementBlock("div",ee,[e.createElementVNode("aside",te,[i[1]||(i[1]=e.createElementVNode("div",{class:"rh-data-center-panel__title"},"数据类型",-1)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.categories,n=>(e.openBlock(),e.createElementBlock("button",{key:n.key,type:"button",class:e.normalizeClass(["rh-data-center-panel__category",{"is-active":c.value===n.key}]),onClick:h=>w(n)},[e.createElementVNode("span",null,e.toDisplayString(n.label),1),D(n)!==void 0?(e.openBlock(),e.createElementBlock("span",ne,e.toDisplayString(D(n)),1)):e.createCommentVNode("",!0)],10,oe))),128))]),e.createElementVNode("section",ae,[e.createElementVNode("div",re,[e.renderSlot(l.$slots,"header",{category:u.value},()=>[i[2]||(i[2]=e.createTextVNode("数据处理进度",-1))]),t.closeable?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"rh-data-center-panel__action",onClick:i[0]||(i[0]=n=>d("close"))},"关闭")):e.createCommentVNode("",!0)]),e.createElementVNode("div",le,[R.value&&!C.value?(e.openBlock(),e.createBlock(S,{key:0,text:"加载中..."})):B.value&&!C.value?e.renderSlot(l.$slots,"error",{key:1,error:B.value,retry:V},()=>[e.createVNode(S,{text:"任务加载失败",retryable:!0,onRetry:V})]):(a=C.value)!=null&&a.items.length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:2},e.renderList(C.value.items,n=>e.renderSlot(l.$slots,"task",{key:n.id,task:n,category:u.value,action:N},()=>[e.createVNode(j,{task:n,onAction:h=>N(h,n)},null,8,["task","onAction"])])),128)):e.renderSlot(l.$slots,"empty",{key:3,category:u.value},()=>[e.createVNode(S,{text:"暂无任务"})])]),e.renderSlot(l.$slots,"footer",{result:C.value,category:u.value},()=>{var n;return[t.showTotal?(e.openBlock(),e.createElementBlock("div",se,[e.createElementVNode("span",null,e.toDisplayString(((n=C.value)==null?void 0:n.total)||0)+"条记录",1),e.createElementVNode("span",null,e.toDisplayString(t.recentDaysText),1)])):e.createCommentVNode("",!0)]})])])}}}),ie=t=>typeof t=="function"?t():t.value,ce=(t,p)=>{const o=s=>{const d=s.target;if(!d)return;t.some(k=>{var f;return(f=ie(k))==null?void 0:f.contains(d)})||p()};e.onMounted(()=>document.addEventListener("click",o,!0)),e.onBeforeUnmount(()=>document.removeEventListener("click",o,!0))},de=["src"],ue=e.defineComponent({__name:"RhDataCenter",props:{modelValue:{type:Boolean,default:void 0},categories:{},loadTasks:{},label:{default:X},width:{default:Y},panelHeight:{default:J},panelRight:{default:0},pollInterval:{default:Q},refreshOnOpen:{type:Boolean,default:!0},closeOnClickOutside:{type:Boolean,default:!0},showCategoryCount:{type:Boolean,default:!0},categoryCounts:{},icon:{default:""},activeIcon:{default:""}},emits:["update:modelValue","open","close","refresh","task-action","error"],setup(t,{emit:p}){const o=t,s=p,d=e.ref(!1),c=e.ref(null),k=e.ref(null),f=e.ref(null),y=e.ref({}),g=e.ref(),_=e.ref(!1),u=e.computed(()=>o.modelValue===void 0?d.value:o.modelValue),E=e.computed(()=>u.value?o.activeIcon||o.icon:o.icon||o.activeIcon),C=r=>typeof r=="number"?`${r}px`:r,R=r=>typeof r=="number"?r:Number.parseFloat(r)||0,B=()=>{const r=c.value,v=k.value;if(!r||!v)return;const m=r.getBoundingClientRect(),$=v.offsetWidth||R(o.width),x=R(o.panelRight),b=8,A=m.right-$-x,P=Math.min(Math.max(b,A),Math.max(b,window.innerWidth-$-b)),z=Math.min(m.bottom+8,Math.max(b,window.innerHeight-v.offsetHeight-b));y.value={top:`${z}px`,left:`${P}px`,width:C(o.width),"--rh-ui-data-center-panel-height":C(o.panelHeight)}},D=()=>{_.value||(_.value=!0,window.addEventListener("resize",B),window.addEventListener("scroll",B,!0))},V=()=>{_.value&&(_.value=!1,window.removeEventListener("resize",B),window.removeEventListener("scroll",B,!0))},w=()=>{g.value!==void 0&&(window.clearInterval(g.value),g.value=void 0)},N=()=>{var r;(r=f.value)==null||r.refresh()},l=()=>{w(),!(!u.value||o.pollInterval<=0)&&(g.value=window.setInterval(N,o.pollInterval))},i=r=>{o.modelValue===void 0&&(d.value=r),s("update:modelValue",r)},a=()=>{u.value||(i(!0),s("open"))},n=()=>{u.value&&(i(!1),s("close"))},h=()=>u.value?n():a(),T=()=>{if(document.visibilityState==="hidden"){w();return}l(),N()};return e.watch(u,async r=>{if(w(),V(),!r){document.removeEventListener("visibilitychange",T);return}await e.nextTick(),B(),D(),document.addEventListener("visibilitychange",T),o.refreshOnOpen&&N(),l()},{immediate:!0}),ce([c,k],()=>{o.closeOnClickOutside&&u.value&&n()}),e.onBeforeUnmount(()=>{w(),V(),document.removeEventListener("visibilitychange",T)}),(r,v)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{ref_key:"triggerRef",ref:c,class:"rh-data-center",onClick:e.withModifiers(h,["stop"])},[e.renderSlot(r.$slots,"trigger",{visible:u.value,open:a,close:n,toggle:h},()=>[e.createElementVNode("span",{class:e.normalizeClass(["rh-data-center__trigger",{"is-active":u.value}])},[E.value?(e.openBlock(),e.createElementBlock("img",{key:0,src:E.value,class:"rh-data-center__icon",alt:""},null,8,de)):e.createCommentVNode("",!0),e.createElementVNode("span",null,e.toDisplayString(t.label),1)],2)],!0)],512),(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[u.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"contentRef",ref:k,class:"rh-data-center__popover",style:e.normalizeStyle(y.value),onClick:v[3]||(v[3]=e.withModifiers(()=>{},["stop"]))},[e.createVNode(L,{ref_key:"panelRef",ref:f,categories:t.categories,"load-tasks":t.loadTasks,closeable:!0,"show-category-count":t.showCategoryCount,"category-counts":t.categoryCounts,onClose:n,onRefresh:v[0]||(v[0]=m=>s("refresh",m)),onTaskAction:v[1]||(v[1]=m=>s("task-action",m)),onError:v[2]||(v[2]=(m,$)=>s("error",m,$))},{header:e.withCtx(m=>[e.renderSlot(r.$slots,"header",e.normalizeProps(e.guardReactiveProps(m)),()=>[v[4]||(v[4]=e.createTextVNode("数据处理进度",-1))],!0)]),task:e.withCtx(m=>[e.renderSlot(r.$slots,"task",e.normalizeProps(e.guardReactiveProps(m)),void 0,!0)]),empty:e.withCtx(m=>[e.renderSlot(r.$slots,"empty",e.normalizeProps(e.guardReactiveProps(m)),void 0,!0)]),error:e.withCtx(m=>[e.renderSlot(r.$slots,"error",e.normalizeProps(e.guardReactiveProps(m)),void 0,!0)]),footer:e.withCtx(m=>[e.renderSlot(r.$slots,"footer",e.normalizeProps(e.guardReactiveProps(m)),void 0,!0)]),_:3},8,["categories","load-tasks","show-category-count","category-counts"])],4)):e.createCommentVNode("",!0)]))],64))}});const me=I._export_sfc(ue,[["__scopeId","data-v-a3a35657"]]),ve={key:0,class:"rh-data-center-tip__guide"},pe={class:"rh-data-center-tip__content"},fe={key:0,class:"rh-data-center-tip__minutes"},ke={key:1,class:"rh-data-center-tip__description"},ye=e.defineComponent({__name:"RhDataCenterTip",props:{modelValue:{type:Boolean,default:!1},minutes:{default:void 0},type:{default:void 0},title:{default:""},content:{default:""},width:{default:"540px"},showGuideAnimation:{type:Boolean,default:!0}},emits:["update:modelValue","close"],setup(t,{emit:p}){const o=p,s=()=>{o("update:modelValue",!1),o("close")};return(d,c)=>{const k=e.resolveComponent("el-button"),f=e.resolveComponent("el-dialog");return e.openBlock(),e.createBlock(f,{"model-value":t.modelValue,title:t.title||"提示",width:t.width,"append-to-body":"","onUpdate:modelValue":c[0]||(c[0]=y=>o("update:modelValue",y)),onClose:s},{footer:e.withCtx(()=>[e.createVNode(k,{type:"primary",onClick:s},{default:e.withCtx(()=>[...c[1]||(c[1]=[e.createTextVNode("关闭弹框",-1)])]),_:1})]),default:e.withCtx(()=>[t.showGuideAnimation?(e.openBlock(),e.createElementBlock("div",ve)):e.createCommentVNode("",!0),e.createElementVNode("div",pe,[t.minutes!==void 0?(e.openBlock(),e.createElementBlock("span",fe,e.toDisplayString((t.title||"任务处理中，大概需要")+t.minutes+"分钟"),1)):e.createCommentVNode("",!0),t.content?(e.openBlock(),e.createElementBlock("div",ke,e.toDisplayString(t.content),1)):e.createCommentVNode("",!0),e.renderSlot(d.$slots,"extra")])]),_:3},8,["model-value","title","width"])}}}),he=()=>{const t=e.ref(!1),p=e.ref({});return{tipVisible:t,tipConfig:p,showTip:d=>{p.value={...d},t.value=!0},closeTip:()=>{t.value=!1}}};exports.RhDataCenter=me;exports.RhDataCenterPanel=L;exports.RhDataCenterTip=ye;exports.useRhDataCenter=he;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),H=require("../_plugin-vue_export-helper-f246444f.cjs");const M={class:"rh-data-center-panel__state"},$=e.defineComponent({__name:"RhDataCenterState",props:{text:{},retryable:{type:Boolean,default:!1}},emits:["retry"],setup(t,{emit:p}){const a=p;return(s,u)=>(e.openBlock(),e.createElementBlock("div",M,[e.createElementVNode("span",null,e.toDisplayString(t.text),1),t.retryable?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"rh-data-center-panel__retry",onClick:u[0]||(u[0]=c=>a("retry"))}," 重新加载 ")):e.createCommentVNode("",!0)]))}}),O={class:"rh-data-center-panel__task"},F={class:"rh-data-center-panel__taskMain"},K={class:"rh-data-center-panel__taskTitle"},W={key:0,class:"rh-data-center-panel__taskTag"},U={key:0,class:"rh-data-center-panel__progress"},q={class:"rh-data-center-panel__meta"},G={key:0,class:"rh-data-center-panel__actions"},j=["disabled","onClick"],X=e.defineComponent({__name:"RhDataCenterTaskItem",props:{task:{}},emits:["action"],setup(t,{emit:p}){const a=t,s=p,u=e.computed(()=>{const c=Number(a.task.progress||0);return Math.min(100,Math.max(0,c))});return(c,y)=>{var f;return e.openBlock(),e.createElementBlock("div",O,[e.createElementVNode("div",F,[e.createElementVNode("div",K,[e.createElementVNode("span",null,e.toDisplayString(t.task.title),1),t.task.tag?(e.openBlock(),e.createElementBlock("span",W,e.toDisplayString(t.task.tag),1)):e.createCommentVNode("",!0)]),t.task.status!=="success"?(e.openBlock(),e.createElementBlock("div",U,[e.createElementVNode("div",{class:e.normalizeClass(["rh-data-center-panel__progressBar",{"is-failed":t.task.status==="failed"}]),style:e.normalizeStyle({width:`${u.value}%`})},null,6)])):e.createCommentVNode("",!0),e.createElementVNode("div",q,e.toDisplayString(t.task.createdAt),1),t.task.message?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["rh-data-center-panel__message",{"is-failed":t.task.status==="failed"}])},e.toDisplayString(t.task.message),3)):e.createCommentVNode("",!0)]),(f=t.task.actions)!=null&&f.length?(e.openBlock(),e.createElementBlock("div",G,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.task.actions,k=>(e.openBlock(),e.createElementBlock("button",{key:k.key,type:"button",class:"rh-data-center-panel__action",disabled:k.disabled,onClick:h=>s("action",k.key)},e.toDisplayString(k.label),9,j))),128))])):e.createCommentVNode("",!0)])}}}),Y="数据处理中心",J=606,Q=500,A=124,Z=1e3,ee="-此处仅展示近15天内的数据-",te={class:"rh-data-center-panel"},oe=["aria-pressed","onClick","onKeydown"],ne={key:0,class:"rh-data-center-panel__categoryCount"},ae={class:"rh-data-center-panel__main"},re={class:"rh-data-center-panel__title"},le={class:"rh-data-center-panel__scroll"},se={key:0,class:"rh-data-center-panel__footer"},x=e.defineComponent({__name:"RhDataCenterPanel",props:{categories:{},loadTasks:{},activeCategoryKey:{default:void 0},sidebarWidth:{default:A},closeable:{type:Boolean,default:!0},showTotal:{type:Boolean,default:!0},showCategoryCount:{type:Boolean,default:!0},categoryCounts:{},recentDaysText:{default:ee}},emits:["close","refresh","task-action","error"],setup(t,{expose:p,emit:a}){const s=t,u=a,c=e.ref(s.activeCategoryKey),y=e.ref({}),f=e.ref({}),k=e.ref({}),h=e.ref({}),C=e.ref({}),m=e.computed(()=>s.categories.find(r=>r.key===c.value)||s.categories[0]),_=e.computed(()=>{var r;return String(((r=m.value)==null?void 0:r.key)??"")}),g=e.computed(()=>y.value[_.value]),R=e.computed(()=>f.value[_.value]===!0),E=e.computed(()=>k.value[_.value]),D=r=>typeof r=="number"?`${r}px`:r,S=e.computed(()=>({width:D(s.sidebarWidth),flexBasis:D(s.sidebarWidth)})),w=r=>{var n,o,v;if(!s.showCategoryCount)return;const i=String(r.key),l=(n=s.categoryCounts)==null?void 0:n[i];if(l!==void 0)return l;for(const d of Object.values(y.value)){const b=(o=d.counts)==null?void 0:o[i];if(b!==void 0)return b}return(v=y.value[i])==null?void 0:v.total},B=async(r=!1)=>{const i=m.value;if(!i)return;const l=String(i.key);if(C.value[l]&&!r)return;C.value[l]=!0,f.value[l]=!0,k.value[l]=void 0;const n=(h.value[l]||0)+1;h.value[l]=n,u("refresh",i);try{const o=await s.loadTasks({category:i});if(h.value[l]!==n||_.value!==l)return;y.value[l]=o}catch(o){if(h.value[l]!==n||_.value!==l)return;k.value[l]=o,u("error",o,i)}finally{h.value[l]===n&&(f.value[l]=!1,C.value[l]=!1)}},V=async r=>{c.value!==r.key&&(c.value=r.key,await B())},N=(r,i)=>{const l=m.value;l&&u("task-action",{action:r,task:i,category:l})};return e.onMounted(()=>{var r;c.value===void 0&&(c.value=(r=s.categories[0])==null?void 0:r.key)}),p({refresh:B}),(r,i)=>{var l;return e.openBlock(),e.createElementBlock("div",te,[e.createElementVNode("aside",{class:"rh-data-center-panel__sidebar",style:e.normalizeStyle(S.value)},[i[1]||(i[1]=e.createElementVNode("div",{class:"rh-data-center-panel__title"},"数据类型",-1)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.categories,n=>(e.openBlock(),e.createElementBlock("div",{key:n.key,role:"button",tabindex:"0",class:e.normalizeClass(["rh-data-center-panel__category",{"is-active":c.value===n.key}]),"aria-pressed":c.value===n.key,onClick:o=>V(n),onKeydown:[e.withKeys(o=>V(n),["enter"]),e.withKeys(e.withModifiers(o=>V(n),["prevent"]),["space"])]},[e.createElementVNode("span",null,e.toDisplayString(n.label),1),w(n)!==void 0?(e.openBlock(),e.createElementBlock("span",ne,e.toDisplayString(w(n)),1)):e.createCommentVNode("",!0)],42,oe))),128))],4),e.createElementVNode("section",ae,[e.createElementVNode("div",re,[e.renderSlot(r.$slots,"header",{category:m.value},()=>[i[2]||(i[2]=e.createTextVNode("数据处理进度",-1))]),t.closeable?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"rh-data-center-panel__action",onClick:i[0]||(i[0]=n=>u("close"))},"关闭")):e.createCommentVNode("",!0)]),e.createElementVNode("div",le,[R.value&&!g.value?(e.openBlock(),e.createBlock($,{key:0,text:"加载中..."})):E.value&&!g.value?e.renderSlot(r.$slots,"error",{key:1,error:E.value,retry:B},()=>[e.createVNode($,{text:"任务加载失败",retryable:!0,onRetry:B})]):(l=g.value)!=null&&l.items.length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:2},e.renderList(g.value.items,n=>e.renderSlot(r.$slots,"task",{key:n.id,task:n,category:m.value,action:N},()=>[e.createVNode(X,{task:n,onAction:o=>N(o,n)},null,8,["task","onAction"])])),128)):e.renderSlot(r.$slots,"empty",{key:3,category:m.value},()=>[e.createVNode($,{text:"暂无任务"})])]),e.renderSlot(r.$slots,"footer",{result:g.value,category:m.value},()=>{var n;return[t.showTotal?(e.openBlock(),e.createElementBlock("div",se,[e.createElementVNode("span",null,e.toDisplayString(((n=g.value)==null?void 0:n.total)||0)+"条记录",1),e.createElementVNode("span",null,e.toDisplayString(t.recentDaysText),1)])):e.createCommentVNode("",!0)]})])])}}}),ie=t=>typeof t=="function"?t():t.value,ce=(t,p)=>{const a=s=>{const u=s.target;if(!u)return;t.some(y=>{var f;return(f=ie(y))==null?void 0:f.contains(u)})||p()};e.onMounted(()=>document.addEventListener("click",a,!0)),e.onBeforeUnmount(()=>document.removeEventListener("click",a,!0))},de=["src"],ue=e.defineComponent({__name:"RhDataCenter",props:{modelValue:{type:Boolean,default:void 0},categories:{},loadTasks:{},label:{default:Y},width:{default:J},panelHeight:{default:Q},sidebarWidth:{default:A},panelRight:{default:0},pollInterval:{default:Z},refreshOnOpen:{type:Boolean,default:!0},closeOnClickOutside:{type:Boolean,default:!0},showCategoryCount:{type:Boolean,default:!0},categoryCounts:{},icon:{default:""},activeIcon:{default:""}},emits:["update:modelValue","open","close","refresh","task-action","error"],setup(t,{emit:p}){const a=t,s=p,u=e.ref(!1),c=e.ref(null),y=e.ref(null),f=e.ref(null),k=e.ref({}),h=e.ref(),C=e.ref(!1),m=e.computed(()=>a.modelValue===void 0?u.value:a.modelValue),_=e.computed(()=>m.value?a.activeIcon||a.icon:a.icon||a.activeIcon),g=o=>typeof o=="number"?`${o}px`:o,R=o=>typeof o=="number"?o:Number.parseFloat(o)||0,E=()=>{const o=c.value,v=y.value;if(!o||!v)return;const d=o.getBoundingClientRect(),b=v.offsetWidth||R(a.width),L=R(a.panelRight),T=8,P=d.right-b-L,z=Math.min(Math.max(T,P),Math.max(T,window.innerWidth-b-T)),I=Math.min(d.bottom+8,Math.max(T,window.innerHeight-v.offsetHeight-T));k.value={top:`${I}px`,left:`${z}px`,width:g(a.width),"--rh-ui-data-center-panel-height":g(a.panelHeight)}},D=()=>{C.value||(C.value=!0,window.addEventListener("resize",E),window.addEventListener("scroll",E,!0))},S=()=>{C.value&&(C.value=!1,window.removeEventListener("resize",E),window.removeEventListener("scroll",E,!0))},w=()=>{h.value!==void 0&&(window.clearInterval(h.value),h.value=void 0)},B=()=>{var o;(o=f.value)==null||o.refresh()},V=()=>{w(),!(!m.value||a.pollInterval<=0)&&(h.value=window.setInterval(B,a.pollInterval))},N=o=>{a.modelValue===void 0&&(u.value=o),s("update:modelValue",o)},r=()=>{m.value||(N(!0),s("open"))},i=()=>{m.value&&(N(!1),s("close"))},l=()=>m.value?i():r(),n=()=>{if(document.visibilityState==="hidden"){w();return}V(),B()};return e.watch(m,async o=>{if(w(),S(),!o){document.removeEventListener("visibilitychange",n);return}await e.nextTick(),E(),D(),document.addEventListener("visibilitychange",n),a.refreshOnOpen&&B(),V()},{immediate:!0}),ce([c,y],()=>{a.closeOnClickOutside&&m.value&&i()}),e.onBeforeUnmount(()=>{w(),S(),document.removeEventListener("visibilitychange",n)}),(o,v)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{ref_key:"triggerRef",ref:c,class:"rh-data-center",onClick:e.withModifiers(l,["stop"])},[e.renderSlot(o.$slots,"trigger",{visible:m.value,open:r,close:i,toggle:l},()=>[e.createElementVNode("span",{class:e.normalizeClass(["rh-data-center__trigger",{"is-active":m.value}])},[_.value?(e.openBlock(),e.createElementBlock("img",{key:0,src:_.value,class:"rh-data-center__icon",alt:""},null,8,de)):e.createCommentVNode("",!0),e.createElementVNode("span",null,e.toDisplayString(t.label),1)],2)],!0)],512),(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[m.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"contentRef",ref:y,class:"rh-data-center__popover",style:e.normalizeStyle(k.value),onClick:v[3]||(v[3]=e.withModifiers(()=>{},["stop"]))},[e.createVNode(x,{ref_key:"panelRef",ref:f,categories:t.categories,"load-tasks":t.loadTasks,"sidebar-width":t.sidebarWidth,closeable:!0,"show-category-count":t.showCategoryCount,"category-counts":t.categoryCounts,onClose:i,onRefresh:v[0]||(v[0]=d=>s("refresh",d)),onTaskAction:v[1]||(v[1]=d=>s("task-action",d)),onError:v[2]||(v[2]=(d,b)=>s("error",d,b))},{header:e.withCtx(d=>[e.renderSlot(o.$slots,"header",e.normalizeProps(e.guardReactiveProps(d)),()=>[v[4]||(v[4]=e.createTextVNode("数据处理进度",-1))],!0)]),task:e.withCtx(d=>[e.renderSlot(o.$slots,"task",e.normalizeProps(e.guardReactiveProps(d)),void 0,!0)]),empty:e.withCtx(d=>[e.renderSlot(o.$slots,"empty",e.normalizeProps(e.guardReactiveProps(d)),void 0,!0)]),error:e.withCtx(d=>[e.renderSlot(o.$slots,"error",e.normalizeProps(e.guardReactiveProps(d)),void 0,!0)]),footer:e.withCtx(d=>[e.renderSlot(o.$slots,"footer",e.normalizeProps(e.guardReactiveProps(d)),void 0,!0)]),_:3},8,["categories","load-tasks","sidebar-width","show-category-count","category-counts"])],4)):e.createCommentVNode("",!0)]))],64))}});const me=H._export_sfc(ue,[["__scopeId","data-v-47bfdbe2"]]),ve={key:0,class:"rh-data-center-tip__guide"},pe={class:"rh-data-center-tip__content"},fe={key:0,class:"rh-data-center-tip__minutes"},ye={key:1,class:"rh-data-center-tip__description"},ke=e.defineComponent({__name:"RhDataCenterTip",props:{modelValue:{type:Boolean,default:!1},minutes:{default:void 0},type:{default:void 0},title:{default:""},content:{default:""},width:{default:"540px"},showGuideAnimation:{type:Boolean,default:!0}},emits:["update:modelValue","close"],setup(t,{emit:p}){const a=p,s=()=>{a("update:modelValue",!1),a("close")};return(u,c)=>{const y=e.resolveComponent("el-button"),f=e.resolveComponent("el-dialog");return e.openBlock(),e.createBlock(f,{"model-value":t.modelValue,title:t.title||"提示",width:t.width,"append-to-body":"","onUpdate:modelValue":c[0]||(c[0]=k=>a("update:modelValue",k)),onClose:s},{footer:e.withCtx(()=>[e.createVNode(y,{type:"primary",onClick:s},{default:e.withCtx(()=>[...c[1]||(c[1]=[e.createTextVNode("关闭弹框",-1)])]),_:1})]),default:e.withCtx(()=>[t.showGuideAnimation?(e.openBlock(),e.createElementBlock("div",ve)):e.createCommentVNode("",!0),e.createElementVNode("div",pe,[t.minutes!==void 0?(e.openBlock(),e.createElementBlock("span",fe,e.toDisplayString((t.title||"任务处理中，大概需要")+t.minutes+"分钟"),1)):e.createCommentVNode("",!0),t.content?(e.openBlock(),e.createElementBlock("div",ye,e.toDisplayString(t.content),1)):e.createCommentVNode("",!0),e.renderSlot(u.$slots,"extra")])]),_:3},8,["model-value","title","width"])}}}),he=()=>{const t=e.ref(!1),p=e.ref({});return{tipVisible:t,tipConfig:p,showTip:u=>{p.value={...u},t.value=!0},closeTip:()=>{t.value=!1}}};exports.RhDataCenter=me;exports.RhDataCenterPanel=x;exports.RhDataCenterTip=ke;exports.useRhDataCenter=he;

package/dist/data-center/index.js

@@ -1,6 +1,6 @@
-import { defineComponent as M, openBlock as l, createElementBlock as i, createElementVNode as y, toDisplayString as w, createCommentVNode as b, computed as L, normalizeClass as U, normalizeStyle as Q, Fragment as G, renderList as j, ref as m, onMounted as Z, renderSlot as T, createTextVNode as q, createBlock as X, createVNode as S, onBeforeUnmount as ee, watch as se, nextTick as le, withModifiers as Y, Teleport as re, withCtx as V, normalizeProps as H, guardReactiveProps as O, resolveComponent as J } from "vue";
-import { _ as ie } from "../_plugin-vue_export-helper-dad06003.js";
-const ce = { class: "rh-data-center-panel__state" }, W = /* @__PURE__ */ M({
+import { defineComponent as M, openBlock as r, createElementBlock as u, createElementVNode as h, toDisplayString as C, createCommentVNode as b, computed as E, normalizeClass as F, normalizeStyle as X, Fragment as U, renderList as j, ref as m, onMounted as ee, withKeys as Q, withModifiers as q, renderSlot as w, createTextVNode as Y, createBlock as J, createVNode as O, onBeforeUnmount as te, watch as re, nextTick as ie, Teleport as ue, withCtx as V, normalizeProps as H, guardReactiveProps as S, resolveComponent as Z } from "vue";
+import { _ as ce } from "../_plugin-vue_export-helper-dad06003.js";
+const de = { class: "rh-data-center-panel__state" }, G = /* @__PURE__ */ M({
   __name: "RhDataCenterState",
   props: {
     text: {},
@@ -8,73 +8,73 @@ const ce = { class: "rh-data-center-panel__state" }, W = /* @__PURE__ */ M({
   },
   emits: ["retry"],
   setup(e, { emit: p }) {
-    const t = p;
-    return (r, d) => (l(), i("div", ce, [
-      y("span", null, w(e.text), 1),
-      e.retryable ? (l(), i("button", {
+    const n = p;
+    return (l, v) => (r(), u("div", de, [
+      h("span", null, C(e.text), 1),
+      e.retryable ? (r(), u("button", {
         key: 0,
         type: "button",
         class: "rh-data-center-panel__retry",
-        onClick: d[0] || (d[0] = (u) => t("retry"))
+        onClick: v[0] || (v[0] = (c) => n("retry"))
       }, " 重新加载 ")) : b("", !0)
     ]));
   }
-}), ue = { class: "rh-data-center-panel__task" }, de = { class: "rh-data-center-panel__taskMain" }, ve = { class: "rh-data-center-panel__taskTitle" }, fe = {
+}), ve = { class: "rh-data-center-panel__task" }, fe = { class: "rh-data-center-panel__taskMain" }, he = { class: "rh-data-center-panel__taskTitle" }, ye = {
   key: 0,
   class: "rh-data-center-panel__taskTag"
-}, ye = {
+}, me = {
   key: 0,
   class: "rh-data-center-panel__progress"
-}, he = { class: "rh-data-center-panel__meta" }, me = {
+}, pe = { class: "rh-data-center-panel__meta" }, ge = {
   key: 0,
   class: "rh-data-center-panel__actions"
-}, pe = ["disabled", "onClick"], ge = /* @__PURE__ */ M({
+}, ke = ["disabled", "onClick"], _e = /* @__PURE__ */ M({
   __name: "RhDataCenterTaskItem",
   props: {
     task: {}
   },
   emits: ["action"],
   setup(e, { emit: p }) {
-    const t = e, r = p, d = L(() => {
-      const u = Number(t.task.progress || 0);
-      return Math.min(100, Math.max(0, u));
+    const n = e, l = p, v = E(() => {
+      const c = Number(n.task.progress || 0);
+      return Math.min(100, Math.max(0, c));
     });
-    return (u, k) => {
+    return (c, k) => {
       var g;
-      return l(), i("div", ue, [
-        y("div", de, [
-          y("div", ve, [
-            y("span", null, w(e.task.title), 1),
-            e.task.tag ? (l(), i("span", fe, w(e.task.tag), 1)) : b("", !0)
+      return r(), u("div", ve, [
+        h("div", fe, [
+          h("div", he, [
+            h("span", null, C(e.task.title), 1),
+            e.task.tag ? (r(), u("span", ye, C(e.task.tag), 1)) : b("", !0)
           ]),
-          e.task.status !== "success" ? (l(), i("div", ye, [
-            y("div", {
-              class: U(["rh-data-center-panel__progressBar", { "is-failed": e.task.status === "failed" }]),
-              style: Q({ width: `${d.value}%` })
+          e.task.status !== "success" ? (r(), u("div", me, [
+            h("div", {
+              class: F(["rh-data-center-panel__progressBar", { "is-failed": e.task.status === "failed" }]),
+              style: X({ width: `${v.value}%` })
             }, null, 6)
           ])) : b("", !0),
-          y("div", he, w(e.task.createdAt), 1),
-          e.task.message ? (l(), i("div", {
+          h("div", pe, C(e.task.createdAt), 1),
+          e.task.message ? (r(), u("div", {
             key: 1,
-            class: U(["rh-data-center-panel__message", { "is-failed": e.task.status === "failed" }])
-          }, w(e.task.message), 3)) : b("", !0)
+            class: F(["rh-data-center-panel__message", { "is-failed": e.task.status === "failed" }])
+          }, C(e.task.message), 3)) : b("", !0)
         ]),
-        (g = e.task.actions) != null && g.length ? (l(), i("div", me, [
-          (l(!0), i(G, null, j(e.task.actions, (_) => (l(), i("button", {
+        (g = e.task.actions) != null && g.length ? (r(), u("div", ge, [
+          (r(!0), u(U, null, j(e.task.actions, (_) => (r(), u("button", {
             key: _.key,
             type: "button",
             class: "rh-data-center-panel__action",
             disabled: _.disabled,
-            onClick: ($) => r("action", _.key)
-          }, w(_.label), 9, pe))), 128))
+            onClick: (T) => l("action", _.key)
+          }, C(_.label), 9, ke))), 128))
         ])) : b("", !0)
       ]);
     };
   }
-}), ke = "数据处理中心", _e = 606, Ce = 500, we = 1e3, be = "-此处仅展示近15天内的数据-", Te = { class: "rh-data-center-panel" }, $e = { class: "rh-data-center-panel__sidebar" }, Re = ["onClick"], Ee = {
+}), Ce = "数据处理中心", be = 606, we = 500, ae = 124, Te = 1e3, $e = "-此处仅展示近15天内的数据-", Ee = { class: "rh-data-center-panel" }, Re = ["aria-pressed", "onClick", "onKeydown"], Ae = {
   key: 0,
   class: "rh-data-center-panel__categoryCount"
-}, Ae = { class: "rh-data-center-panel__main" }, De = { class: "rh-data-center-panel__title" }, Le = { class: "rh-data-center-panel__scroll" }, Ve = {
+}, De = { class: "rh-data-center-panel__main" }, Le = { class: "rh-data-center-panel__title" }, Ve = { class: "rh-data-center-panel__scroll" }, xe = {
   key: 0,
   class: "rh-data-center-panel__footer"
 }, Be = /* @__PURE__ */ M({
@@ -83,130 +83,143 @@ const ce = { class: "rh-data-center-panel__state" }, W = /* @__PURE__ */ M({
     categories: {},
     loadTasks: {},
     activeCategoryKey: { default: void 0 },
+    sidebarWidth: { default: ae },
     closeable: { type: Boolean, default: !0 },
     showTotal: { type: Boolean, default: !0 },
     showCategoryCount: { type: Boolean, default: !0 },
     categoryCounts: {},
-    recentDaysText: { default: be }
+    recentDaysText: { default: $e }
   },
   emits: ["close", "refresh", "task-action", "error"],
-  setup(e, { expose: p, emit: t }) {
-    const r = e, d = t, u = m(r.activeCategoryKey), k = m({}), g = m({}), _ = m({}), $ = m({}), E = m({}), v = L(() => r.categories.find((s) => s.key === u.value) || r.categories[0]), A = L(() => {
+  setup(e, { expose: p, emit: n }) {
+    const l = e, v = n, c = m(l.activeCategoryKey), k = m({}), g = m({}), _ = m({}), T = m({}), R = m({}), f = E(() => l.categories.find((s) => s.key === c.value) || l.categories[0]), A = E(() => {
       var s;
-      return String(((s = v.value) == null ? void 0 : s.key) ?? "");
-    }), R = L(() => k.value[A.value]), z = L(() => g.value[A.value] === !0), D = L(() => _.value[A.value]), F = (s) => {
-      var a, C, I;
-      if (!r.showCategoryCount)
+      return String(((s = f.value) == null ? void 0 : s.key) ?? "");
+    }), $ = E(() => k.value[A.value]), K = E(() => g.value[A.value] === !0), D = E(() => _.value[A.value]), W = (s) => typeof s == "number" ? `${s}px` : s, z = E(() => ({
+      width: W(l.sidebarWidth),
+      flexBasis: W(l.sidebarWidth)
+    })), x = (s) => {
+      var a, t, y;
+      if (!l.showCategoryCount)
         return;
-      const c = String(s.key), n = (a = r.categoryCounts) == null ? void 0 : a[c];
-      if (n !== void 0)
-        return n;
-      for (const o of Object.values(k.value)) {
-        const h = (C = o.counts) == null ? void 0 : C[c];
-        if (h !== void 0)
-          return h;
+      const i = String(s.key), o = (a = l.categoryCounts) == null ? void 0 : a[i];
+      if (o !== void 0)
+        return o;
+      for (const d of Object.values(k.value)) {
+        const B = (t = d.counts) == null ? void 0 : t[i];
+        if (B !== void 0)
+          return B;
       }
-      return (I = k.value[c]) == null ? void 0 : I.total;
-    }, B = async (s = !1) => {
-      const c = v.value;
-      if (!c)
+      return (y = k.value[i]) == null ? void 0 : y.total;
+    }, L = async (s = !1) => {
+      const i = f.value;
+      if (!i)
         return;
-      const n = String(c.key);
-      if (E.value[n] && !s)
+      const o = String(i.key);
+      if (R.value[o] && !s)
         return;
-      E.value[n] = !0, g.value[n] = !0, _.value[n] = void 0;
-      const a = ($.value[n] || 0) + 1;
-      $.value[n] = a, d("refresh", c);
+      R.value[o] = !0, g.value[o] = !0, _.value[o] = void 0;
+      const a = (T.value[o] || 0) + 1;
+      T.value[o] = a, v("refresh", i);
       try {
-        const C = await r.loadTasks({ category: c });
-        if ($.value[n] !== a || A.value !== n)
+        const t = await l.loadTasks({ category: i });
+        if (T.value[o] !== a || A.value !== o)
           return;
-        k.value[n] = C;
-      } catch (C) {
-        if ($.value[n] !== a || A.value !== n)
+        k.value[o] = t;
+      } catch (t) {
+        if (T.value[o] !== a || A.value !== o)
           return;
-        _.value[n] = C, d("error", C, c);
+        _.value[o] = t, v("error", t, i);
       } finally {
-        $.value[n] === a && (g.value[n] = !1, E.value[n] = !1);
+        T.value[o] === a && (g.value[o] = !1, R.value[o] = !1);
       }
-    }, x = async (s) => {
-      u.value !== s.key && (u.value = s.key, await B());
-    }, P = (s, c) => {
-      const n = v.value;
-      n && d("task-action", { action: s, task: c, category: n });
+    }, I = async (s) => {
+      c.value !== s.key && (c.value = s.key, await L());
+    }, N = (s, i) => {
+      const o = f.value;
+      o && v("task-action", { action: s, task: i, category: o });
     };
-    return Z(() => {
+    return ee(() => {
       var s;
-      u.value === void 0 && (u.value = (s = r.categories[0]) == null ? void 0 : s.key);
+      c.value === void 0 && (c.value = (s = l.categories[0]) == null ? void 0 : s.key);
     }), p({
-      refresh: B
-    }), (s, c) => {
-      var n;
-      return l(), i("div", Te, [
-        y("aside", $e, [
-          c[1] || (c[1] = y("div", { class: "rh-data-center-panel__title" }, "数据类型", -1)),
-          (l(!0), i(G, null, j(e.categories, (a) => (l(), i("button", {
+      refresh: L
+    }), (s, i) => {
+      var o;
+      return r(), u("div", Ee, [
+        h("aside", {
+          class: "rh-data-center-panel__sidebar",
+          style: X(z.value)
+        }, [
+          i[1] || (i[1] = h("div", { class: "rh-data-center-panel__title" }, "数据类型", -1)),
+          (r(!0), u(U, null, j(e.categories, (a) => (r(), u("div", {
             key: a.key,
-            type: "button",
-            class: U(["rh-data-center-panel__category", { "is-active": u.value === a.key }]),
-            onClick: (C) => x(a)
+            role: "button",
+            tabindex: "0",
+            class: F(["rh-data-center-panel__category", { "is-active": c.value === a.key }]),
+            "aria-pressed": c.value === a.key,
+            onClick: (t) => I(a),
+            onKeydown: [
+              Q((t) => I(a), ["enter"]),
+              Q(q((t) => I(a), ["prevent"]), ["space"])
+            ]
           }, [
-            y("span", null, w(a.label), 1),
-            F(a) !== void 0 ? (l(), i("span", Ee, w(F(a)), 1)) : b("", !0)
-          ], 10, Re))), 128))
-        ]),
-        y("section", Ae, [
-          y("div", De, [
-            T(s.$slots, "header", { category: v.value }, () => [
-              c[2] || (c[2] = q("数据处理进度", -1))
+            h("span", null, C(a.label), 1),
+            x(a) !== void 0 ? (r(), u("span", Ae, C(x(a)), 1)) : b("", !0)
+          ], 42, Re))), 128))
+        ], 4),
+        h("section", De, [
+          h("div", Le, [
+            w(s.$slots, "header", { category: f.value }, () => [
+              i[2] || (i[2] = Y("数据处理进度", -1))
             ]),
-            e.closeable ? (l(), i("button", {
+            e.closeable ? (r(), u("button", {
               key: 0,
               type: "button",
               class: "rh-data-center-panel__action",
-              onClick: c[0] || (c[0] = (a) => d("close"))
+              onClick: i[0] || (i[0] = (a) => v("close"))
             }, "关闭")) : b("", !0)
           ]),
-          y("div", Le, [
-            z.value && !R.value ? (l(), X(W, {
+          h("div", Ve, [
+            K.value && !$.value ? (r(), J(G, {
               key: 0,
               text: "加载中..."
-            })) : D.value && !R.value ? T(s.$slots, "error", {
+            })) : D.value && !$.value ? w(s.$slots, "error", {
               key: 1,
               error: D.value,
-              retry: B
+              retry: L
             }, () => [
-              S(W, {
+              O(G, {
                 text: "任务加载失败",
                 retryable: !0,
-                onRetry: B
+                onRetry: L
               })
-            ]) : (n = R.value) != null && n.items.length ? (l(!0), i(G, { key: 2 }, j(R.value.items, (a) => T(s.$slots, "task", {
+            ]) : (o = $.value) != null && o.items.length ? (r(!0), u(U, { key: 2 }, j($.value.items, (a) => w(s.$slots, "task", {
               key: a.id,
               task: a,
-              category: v.value,
-              action: P
+              category: f.value,
+              action: N
             }, () => [
-              S(ge, {
+              O(_e, {
                 task: a,
-                onAction: (C) => P(C, a)
+                onAction: (t) => N(t, a)
               }, null, 8, ["task", "onAction"])
-            ])), 128)) : T(s.$slots, "empty", {
+            ])), 128)) : w(s.$slots, "empty", {
               key: 3,
-              category: v.value
+              category: f.value
             }, () => [
-              S(W, { text: "暂无任务" })
+              O(G, { text: "暂无任务" })
             ])
           ]),
-          T(s.$slots, "footer", {
-            result: R.value,
-            category: v.value
+          w(s.$slots, "footer", {
+            result: $.value,
+            category: f.value
           }, () => {
             var a;
             return [
-              e.showTotal ? (l(), i("div", Ve, [
-                y("span", null, w(((a = R.value) == null ? void 0 : a.total) || 0) + "条记录", 1),
-                y("span", null, w(e.recentDaysText), 1)
+              e.showTotal ? (r(), u("div", xe, [
+                h("span", null, C(((a = $.value) == null ? void 0 : a.total) || 0) + "条记录", 1),
+                h("span", null, C(e.recentDaysText), 1)
               ])) : b("", !0)
             ];
           })
@@ -214,28 +227,29 @@ const ce = { class: "rh-data-center-panel__state" }, W = /* @__PURE__ */ M({
       ]);
     };
   }
-}), xe = (e) => typeof e == "function" ? e() : e.value, Pe = (e, p) => {
-  const t = (r) => {
-    const d = r.target;
-    if (!d)
+}), Ie = (e) => typeof e == "function" ? e() : e.value, Ne = (e, p) => {
+  const n = (l) => {
+    const v = l.target;
+    if (!v)
       return;
     e.some((k) => {
       var g;
-      return (g = xe(k)) == null ? void 0 : g.contains(d);
+      return (g = Ie(k)) == null ? void 0 : g.contains(v);
     }) || p();
   };
-  Z(() => document.addEventListener("click", t, !0)), ee(() => document.removeEventListener("click", t, !0));
-}, Ie = ["src"], Ne = /* @__PURE__ */ M({
+  ee(() => document.addEventListener("click", n, !0)), te(() => document.removeEventListener("click", n, !0));
+}, Pe = ["src"], He = /* @__PURE__ */ M({
   __name: "RhDataCenter",
   props: {
     modelValue: { type: Boolean, default: void 0 },
     categories: {},
     loadTasks: {},
-    label: { default: ke },
-    width: { default: _e },
-    panelHeight: { default: Ce },
+    label: { default: Ce },
+    width: { default: be },
+    panelHeight: { default: we },
+    sidebarWidth: { default: ae },
     panelRight: { default: 0 },
-    pollInterval: { default: we },
+    pollInterval: { default: Te },
     refreshOnOpen: { type: Boolean, default: !0 },
     closeOnClickOutside: { type: Boolean, default: !0 },
     showCategoryCount: { type: Boolean, default: !0 },
@@ -245,137 +259,138 @@ const ce = { class: "rh-data-center-panel__state" }, W = /* @__PURE__ */ M({
   },
   emits: ["update:modelValue", "open", "close", "refresh", "task-action", "error"],
   setup(e, { emit: p }) {
-    const t = e, r = p, d = m(!1), u = m(null), k = m(null), g = m(null), _ = m({}), $ = m(), E = m(!1), v = L(() => t.modelValue === void 0 ? d.value : t.modelValue), A = L(() => v.value ? t.activeIcon || t.icon : t.icon || t.activeIcon), R = (o) => typeof o == "number" ? `${o}px` : o, z = (o) => typeof o == "number" ? o : Number.parseFloat(o) || 0, D = () => {
-      const o = u.value, h = k.value;
-      if (!o || !h)
+    const n = e, l = p, v = m(!1), c = m(null), k = m(null), g = m(null), _ = m({}), T = m(), R = m(!1), f = E(() => n.modelValue === void 0 ? v.value : n.modelValue), A = E(() => f.value ? n.activeIcon || n.icon : n.icon || n.activeIcon), $ = (t) => typeof t == "number" ? `${t}px` : t, K = (t) => typeof t == "number" ? t : Number.parseFloat(t) || 0, D = () => {
+      const t = c.value, y = k.value;
+      if (!t || !y)
         return;
-      const f = o.getBoundingClientRect(), K = h.offsetWidth || z(t.width), te = z(t.panelRight), N = 8, ae = f.right - K - te, ne = Math.min(
-        Math.max(N, ae),
-        Math.max(N, window.innerWidth - K - N)
-      ), oe = Math.min(
-        f.bottom + 8,
-        Math.max(N, window.innerHeight - h.offsetHeight - N)
+      const d = t.getBoundingClientRect(), B = y.offsetWidth || K(n.width), ne = K(n.panelRight), P = 8, se = d.right - B - ne, oe = Math.min(
+        Math.max(P, se),
+        Math.max(P, window.innerWidth - B - P)
+      ), le = Math.min(
+        d.bottom + 8,
+        Math.max(P, window.innerHeight - y.offsetHeight - P)
       );
       _.value = {
-        top: `${oe}px`,
-        left: `${ne}px`,
-        width: R(t.width),
-        "--rh-ui-data-center-panel-height": R(t.panelHeight)
+        top: `${le}px`,
+        left: `${oe}px`,
+        width: $(n.width),
+        "--rh-ui-data-center-panel-height": $(n.panelHeight)
       };
-    }, F = () => {
-      E.value || (E.value = !0, window.addEventListener("resize", D), window.addEventListener("scroll", D, !0));
-    }, B = () => {
-      E.value && (E.value = !1, window.removeEventListener("resize", D), window.removeEventListener("scroll", D, !0));
+    }, W = () => {
+      R.value || (R.value = !0, window.addEventListener("resize", D), window.addEventListener("scroll", D, !0));
+    }, z = () => {
+      R.value && (R.value = !1, window.removeEventListener("resize", D), window.removeEventListener("scroll", D, !0));
     }, x = () => {
-      $.value !== void 0 && (window.clearInterval($.value), $.value = void 0);
-    }, P = () => {
-      var o;
-      (o = g.value) == null || o.refresh();
+      T.value !== void 0 && (window.clearInterval(T.value), T.value = void 0);
+    }, L = () => {
+      var t;
+      (t = g.value) == null || t.refresh();
+    }, I = () => {
+      x(), !(!f.value || n.pollInterval <= 0) && (T.value = window.setInterval(L, n.pollInterval));
+    }, N = (t) => {
+      n.modelValue === void 0 && (v.value = t), l("update:modelValue", t);
     }, s = () => {
-      x(), !(!v.value || t.pollInterval <= 0) && ($.value = window.setInterval(P, t.pollInterval));
-    }, c = (o) => {
-      t.modelValue === void 0 && (d.value = o), r("update:modelValue", o);
-    }, n = () => {
-      v.value || (c(!0), r("open"));
-    }, a = () => {
-      v.value && (c(!1), r("close"));
-    }, C = () => v.value ? a() : n(), I = () => {
+      f.value || (N(!0), l("open"));
+    }, i = () => {
+      f.value && (N(!1), l("close"));
+    }, o = () => f.value ? i() : s(), a = () => {
       if (document.visibilityState === "hidden") {
         x();
         return;
       }
-      s(), P();
+      I(), L();
     };
-    return se(v, async (o) => {
-      if (x(), B(), !o) {
-        document.removeEventListener("visibilitychange", I);
+    return re(f, async (t) => {
+      if (x(), z(), !t) {
+        document.removeEventListener("visibilitychange", a);
         return;
       }
-      await le(), D(), F(), document.addEventListener("visibilitychange", I), t.refreshOnOpen && P(), s();
-    }, { immediate: !0 }), Pe([u, k], () => {
-      t.closeOnClickOutside && v.value && a();
-    }), ee(() => {
-      x(), B(), document.removeEventListener("visibilitychange", I);
-    }), (o, h) => (l(), i(G, null, [
-      y("div", {
+      await ie(), D(), W(), document.addEventListener("visibilitychange", a), n.refreshOnOpen && L(), I();
+    }, { immediate: !0 }), Ne([c, k], () => {
+      n.closeOnClickOutside && f.value && i();
+    }), te(() => {
+      x(), z(), document.removeEventListener("visibilitychange", a);
+    }), (t, y) => (r(), u(U, null, [
+      h("div", {
         ref_key: "triggerRef",
-        ref: u,
+        ref: c,
         class: "rh-data-center",
-        onClick: Y(C, ["stop"])
+        onClick: q(o, ["stop"])
       }, [
-        T(o.$slots, "trigger", {
-          visible: v.value,
-          open: n,
-          close: a,
-          toggle: C
+        w(t.$slots, "trigger", {
+          visible: f.value,
+          open: s,
+          close: i,
+          toggle: o
         }, () => [
-          y("span", {
-            class: U(["rh-data-center__trigger", { "is-active": v.value }])
+          h("span", {
+            class: F(["rh-data-center__trigger", { "is-active": f.value }])
           }, [
-            A.value ? (l(), i("img", {
+            A.value ? (r(), u("img", {
               key: 0,
               src: A.value,
               class: "rh-data-center__icon",
               alt: ""
-            }, null, 8, Ie)) : b("", !0),
-            y("span", null, w(e.label), 1)
+            }, null, 8, Pe)) : b("", !0),
+            h("span", null, C(e.label), 1)
           ], 2)
         ], !0)
       ], 512),
-      (l(), X(re, { to: "body" }, [
-        v.value ? (l(), i("div", {
+      (r(), J(ue, { to: "body" }, [
+        f.value ? (r(), u("div", {
           key: 0,
           ref_key: "contentRef",
           ref: k,
           class: "rh-data-center__popover",
-          style: Q(_.value),
-          onClick: h[3] || (h[3] = Y(() => {
+          style: X(_.value),
+          onClick: y[3] || (y[3] = q(() => {
           }, ["stop"]))
         }, [
-          S(Be, {
+          O(Be, {
             ref_key: "panelRef",
             ref: g,
             categories: e.categories,
             "load-tasks": e.loadTasks,
+            "sidebar-width": e.sidebarWidth,
             closeable: !0,
             "show-category-count": e.showCategoryCount,
             "category-counts": e.categoryCounts,
-            onClose: a,
-            onRefresh: h[0] || (h[0] = (f) => r("refresh", f)),
-            onTaskAction: h[1] || (h[1] = (f) => r("task-action", f)),
-            onError: h[2] || (h[2] = (f, K) => r("error", f, K))
+            onClose: i,
+            onRefresh: y[0] || (y[0] = (d) => l("refresh", d)),
+            onTaskAction: y[1] || (y[1] = (d) => l("task-action", d)),
+            onError: y[2] || (y[2] = (d, B) => l("error", d, B))
           }, {
-            header: V((f) => [
-              T(o.$slots, "header", H(O(f)), () => [
-                h[4] || (h[4] = q("数据处理进度", -1))
+            header: V((d) => [
+              w(t.$slots, "header", H(S(d)), () => [
+                y[4] || (y[4] = Y("数据处理进度", -1))
               ], !0)
             ]),
-            task: V((f) => [
-              T(o.$slots, "task", H(O(f)), void 0, !0)
+            task: V((d) => [
+              w(t.$slots, "task", H(S(d)), void 0, !0)
             ]),
-            empty: V((f) => [
-              T(o.$slots, "empty", H(O(f)), void 0, !0)
+            empty: V((d) => [
+              w(t.$slots, "empty", H(S(d)), void 0, !0)
             ]),
-            error: V((f) => [
-              T(o.$slots, "error", H(O(f)), void 0, !0)
+            error: V((d) => [
+              w(t.$slots, "error", H(S(d)), void 0, !0)
             ]),
-            footer: V((f) => [
-              T(o.$slots, "footer", H(O(f)), void 0, !0)
+            footer: V((d) => [
+              w(t.$slots, "footer", H(S(d)), void 0, !0)
             ]),
             _: 3
-          }, 8, ["categories", "load-tasks", "show-category-count", "category-counts"])
+          }, 8, ["categories", "load-tasks", "sidebar-width", "show-category-count", "category-counts"])
         ], 4)) : b("", !0)
       ]))
     ], 64));
   }
 });
-const Ke = /* @__PURE__ */ ie(Ne, [["__scopeId", "data-v-a3a35657"]]), He = {
+const Fe = /* @__PURE__ */ ce(He, [["__scopeId", "data-v-47bfdbe2"]]), Se = {
   key: 0,
   class: "rh-data-center-tip__guide"
-}, Oe = { class: "rh-data-center-tip__content" }, Se = {
+}, Oe = { class: "rh-data-center-tip__content" }, Me = {
   key: 0,
   class: "rh-data-center-tip__minutes"
-}, Me = {
+}, Ke = {
   key: 1,
   class: "rh-data-center-tip__description"
 }, Ue = /* @__PURE__ */ M({
@@ -391,36 +406,36 @@ const Ke = /* @__PURE__ */ ie(Ne, [["__scopeId", "data-v-a3a35657"]]), He = {
   },
   emits: ["update:modelValue", "close"],
   setup(e, { emit: p }) {
-    const t = p, r = () => {
-      t("update:modelValue", !1), t("close");
+    const n = p, l = () => {
+      n("update:modelValue", !1), n("close");
     };
-    return (d, u) => {
-      const k = J("el-button"), g = J("el-dialog");
-      return l(), X(g, {
+    return (v, c) => {
+      const k = Z("el-button"), g = Z("el-dialog");
+      return r(), J(g, {
         "model-value": e.modelValue,
         title: e.title || "提示",
         width: e.width,
         "append-to-body": "",
-        "onUpdate:modelValue": u[0] || (u[0] = (_) => t("update:modelValue", _)),
-        onClose: r
+        "onUpdate:modelValue": c[0] || (c[0] = (_) => n("update:modelValue", _)),
+        onClose: l
       }, {
         footer: V(() => [
-          S(k, {
+          O(k, {
             type: "primary",
-            onClick: r
+            onClick: l
           }, {
-            default: V(() => [...u[1] || (u[1] = [
-              q("关闭弹框", -1)
+            default: V(() => [...c[1] || (c[1] = [
+              Y("关闭弹框", -1)
             ])]),
             _: 1
           })
         ]),
         default: V(() => [
-          e.showGuideAnimation ? (l(), i("div", He)) : b("", !0),
-          y("div", Oe, [
-            e.minutes !== void 0 ? (l(), i("span", Se, w((e.title || "任务处理中，大概需要") + e.minutes + "分钟"), 1)) : b("", !0),
-            e.content ? (l(), i("div", Me, w(e.content), 1)) : b("", !0),
-            T(d.$slots, "extra")
+          e.showGuideAnimation ? (r(), u("div", Se)) : b("", !0),
+          h("div", Oe, [
+            e.minutes !== void 0 ? (r(), u("span", Me, C((e.title || "任务处理中，大概需要") + e.minutes + "分钟"), 1)) : b("", !0),
+            e.content ? (r(), u("div", Ke, C(e.content), 1)) : b("", !0),
+            w(v.$slots, "extra")
           ])
         ]),
         _: 3
@@ -432,8 +447,8 @@ const Ke = /* @__PURE__ */ ie(Ne, [["__scopeId", "data-v-a3a35657"]]), He = {
   return {
     tipVisible: e,
     tipConfig: p,
-    showTip: (d) => {
-      p.value = { ...d }, e.value = !0;
+    showTip: (v) => {
+      p.value = { ...v }, e.value = !0;
     },
     closeTip: () => {
       e.value = !1;
@@ -441,7 +456,7 @@ const Ke = /* @__PURE__ */ ie(Ne, [["__scopeId", "data-v-a3a35657"]]), He = {
   };
 };
 export {
-  Ke as RhDataCenter,
+  Fe as RhDataCenter,
   Be as RhDataCenterPanel,
   Ue as RhDataCenterTip,
   Ge as useRhDataCenter

package/dist/style.css

@@ -1 +1 @@
-:root{--rh-ui-data-center-primary: #00828a;--rh-ui-data-center-primary-soft: #cfe8ea;--rh-ui-data-center-panel-width: 606px;--rh-ui-data-center-panel-height: 500px;--rh-ui-data-center-text: #333;--rh-ui-data-center-secondary-text: #999;--rh-ui-data-center-border: #e9e9e9}.rh-data-center-panel{width:var(--rh-ui-data-center-panel-width);height:var(--rh-ui-data-center-panel-height);display:flex;overflow:hidden;box-sizing:border-box;background:#fff;border:1px solid var(--rh-ui-data-center-border);border-radius:8px;box-shadow:0 12px 32px #0f172a29}.rh-data-center-panel__sidebar{width:124px;flex:0 0 124px;box-sizing:border-box;padding:16px 10px;border-right:1px solid var(--rh-ui-data-center-border)}.rh-data-center-panel__main{min-width:0;flex:1;padding:16px 0 10px 15px}.rh-data-center-panel__title{display:flex;align-items:center;justify-content:space-between;margin:0 10px 15px 0;color:var(--rh-ui-data-center-text);font-size:16px;font-weight:600}.rh-data-center-panel__category{width:104px;min-height:32px;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;margin:10px 0;padding:0 10px;border-radius:3px;color:#666;cursor:pointer;font-size:14px}.rh-data-center-panel__category.is-active{background:var(--rh-ui-data-center-primary-soft);color:var(--rh-ui-data-center-primary);font-weight:600}.rh-data-center-panel__categoryCount{color:#999;font-size:12px;font-weight:400}.rh-data-center-panel__category.is-active .rh-data-center-panel__categoryCount{color:var(--rh-ui-data-center-primary)}.rh-data-center-panel__scroll{height:calc(100% - 48px);padding-right:10px;overflow-y:auto}.rh-data-center-panel__task{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;box-sizing:border-box;min-height:84px;margin-bottom:10px;padding:0 10px 10px 0;border-bottom:1px solid var(--rh-ui-data-center-border)}.rh-data-center-panel__taskMain{min-width:0;flex:1}.rh-data-center-panel__taskTitle{overflow:hidden;color:var(--rh-ui-data-center-text);font-size:14px;line-height:20px;text-overflow:ellipsis;white-space:nowrap}.rh-data-center-panel__taskTag{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:12px;background:#f5f6f7;color:#999;font-size:12px;line-height:20px;vertical-align:1px}.rh-data-center-panel__progress{width:100%;height:4px;margin:7px 0 5px;overflow:hidden;border-radius:4px;background:#edf0f1}.rh-data-center-panel__progressBar{height:100%;border-radius:inherit;background:var(--rh-ui-data-center-primary);transition:width .3s ease}.rh-data-center-panel__progressBar.is-failed{background:#f04444}.rh-data-center-panel__meta,.rh-data-center-panel__message{color:var(--rh-ui-data-center-secondary-text);font-size:11px;line-height:18px}.rh-data-center-panel__message.is-failed{color:#f04444;font-size:12px}.rh-data-center-panel__actions{flex:0 0 auto;display:flex;align-items:flex-end;gap:10px;min-height:56px;padding-bottom:1px}.rh-data-center-panel__action{padding:0;border:0;background:transparent;color:#008ae6;cursor:pointer;font-size:12px;white-space:nowrap}.rh-data-center-panel__action:disabled{color:#bbb;cursor:not-allowed}.rh-data-center-panel__state{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--rh-ui-data-center-secondary-text);font-size:14px}.rh-data-center-panel__retry{border:0;background:transparent;color:var(--rh-ui-data-center-primary);cursor:pointer}.rh-data-center-panel__footer{display:flex;justify-content:space-between;box-sizing:border-box;padding:8px 10px 0 0;color:var(--rh-ui-data-center-secondary-text);font-size:12px}.rh-data-center-tip__content{display:flex;flex-direction:column;align-items:center;color:var(--rh-ui-data-center-text)}.rh-data-center-tip__minutes{color:var(--rh-ui-data-center-primary);font-size:18px}.rh-data-center-tip__description{margin:15px 0 30px;font-size:14px;line-height:22px}.rh-data-center-tip__guide{width:120px;height:56px;position:relative;margin:-20px auto 8px;border-radius:50%;background:radial-gradient(circle at 50% 55%,rgba(0,130,138,.18),transparent 65%)}.rh-data-center-tip__guide:after{content:">";position:absolute;top:0;right:15px;color:var(--rh-ui-data-center-primary);font-size:32px;animation:rh-data-center-guide 1.5s ease-in-out infinite}@keyframes rh-data-center-guide{0%,to{transform:translate(-8px,5px)}50%{transform:translate(0)}}.rh-data-center[data-v-a3a35657]{position:relative;display:inline-flex;align-items:center}.rh-data-center__trigger[data-v-a3a35657]{display:inline-flex;align-items:center;min-height:30px;padding:0 8px;border-radius:4px;color:var(--rh-ui-data-center-text);cursor:pointer;transition:background-color .2s ease,color .2s ease}.rh-data-center__trigger[data-v-a3a35657]:hover,.rh-data-center__trigger.is-active[data-v-a3a35657]{background:rgba(0,130,138,.08);color:var(--rh-ui-data-center-primary)}.rh-data-center__icon[data-v-a3a35657]{width:22px;margin-right:5px}.rh-data-center__popover[data-v-a3a35657]{position:fixed;z-index:3000;box-sizing:border-box}.responsive-info-grid[data-v-85b5413b]{display:grid;grid-template-columns:repeat(var(--responsive-info-grid-columns),minmax(0,1fr));gap:var(--responsive-info-grid-gap)}@media (max-width: 1200px){.responsive-info-grid[data-v-85b5413b]{grid-template-columns:repeat(var(--responsive-info-grid-tablet-columns),minmax(0,1fr))}}@media (max-width: 768px){.responsive-info-grid[data-v-85b5413b]{grid-template-columns:repeat(var(--responsive-info-grid-mobile-columns),minmax(0,1fr))}}.responsive-info-grid-item[data-v-67645283]{min-width:0;color:#333;font-size:14px;line-height:22px;word-break:break-all;display:flex}.responsive-info-grid-item__title[data-v-67645283]{display:inline-block;color:#777;white-space:nowrap}.responsive-info-grid-item__content[data-v-67645283]{display:inline}@media (max-width: 768px){.responsive-info-grid-item[data-v-67645283]{grid-column:span 1!important}}
+:root{--rh-ui-data-center-primary: #00828a;--rh-ui-data-center-primary-soft: #cfe8ea;--rh-ui-data-center-panel-width: 606px;--rh-ui-data-center-panel-height: 500px;--rh-ui-data-center-text: #333;--rh-ui-data-center-secondary-text: #999;--rh-ui-data-center-border: #e9e9e9}.rh-data-center-panel{width:var(--rh-ui-data-center-panel-width);height:var(--rh-ui-data-center-panel-height);display:flex;overflow:hidden;box-sizing:border-box;background:#fff;border:1px solid var(--rh-ui-data-center-border);border-radius:8px;box-shadow:0 12px 32px #0f172a29}.rh-data-center-panel__sidebar{width:124px;flex:0 0 124px;box-sizing:border-box;padding:16px 10px;border-right:1px solid var(--rh-ui-data-center-border)}.rh-data-center-panel__main{min-width:0;flex:1;padding:16px 0 10px 15px}.rh-data-center-panel__title{display:flex;align-items:center;justify-content:space-between;margin:0 10px 15px 0;color:var(--rh-ui-data-center-text);font-size:16px;font-weight:600}.rh-data-center-panel__category{width:100%;min-height:32px;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;margin:10px 0;padding:0 10px;border-radius:3px;color:#666;cursor:pointer;font-size:14px;-webkit-user-select:none;user-select:none;transition:background-color .15s ease,color .15s ease}.rh-data-center-panel__category:hover{background:#f3f7f7;color:var(--rh-ui-data-center-primary)}.rh-data-center-panel__category:focus-visible{outline:2px solid rgba(0,130,138,.35);outline-offset:1px}.rh-data-center-panel__category.is-active{background:var(--rh-ui-data-center-primary-soft);color:var(--rh-ui-data-center-primary);font-weight:600}.rh-data-center-panel__categoryCount{color:#999;font-size:12px;font-weight:400}.rh-data-center-panel__category.is-active .rh-data-center-panel__categoryCount{color:var(--rh-ui-data-center-primary)}.rh-data-center-panel__scroll{height:calc(100% - 48px);padding-right:10px;overflow-y:auto}.rh-data-center-panel__task{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;box-sizing:border-box;min-height:84px;margin-bottom:10px;padding:0 10px 10px 0;border-bottom:1px solid var(--rh-ui-data-center-border)}.rh-data-center-panel__taskMain{min-width:0;flex:1}.rh-data-center-panel__taskTitle{overflow:hidden;color:var(--rh-ui-data-center-text);font-size:14px;line-height:20px;text-overflow:ellipsis;white-space:nowrap}.rh-data-center-panel__taskTag{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:12px;background:#f5f6f7;color:#999;font-size:12px;line-height:20px;vertical-align:1px}.rh-data-center-panel__progress{width:100%;height:4px;margin:7px 0 5px;overflow:hidden;border-radius:4px;background:#edf0f1}.rh-data-center-panel__progressBar{height:100%;border-radius:inherit;background:var(--rh-ui-data-center-primary);transition:width .3s ease}.rh-data-center-panel__progressBar.is-failed{background:#f04444}.rh-data-center-panel__meta,.rh-data-center-panel__message{color:var(--rh-ui-data-center-secondary-text);font-size:11px;line-height:18px}.rh-data-center-panel__message.is-failed{color:#f04444;font-size:12px}.rh-data-center-panel__actions{flex:0 0 auto;display:flex;align-items:flex-end;gap:10px;min-height:56px;padding-bottom:1px}.rh-data-center-panel__action{padding:0;border:0;background:transparent;color:#008ae6;cursor:pointer;font-size:12px;white-space:nowrap}.rh-data-center-panel__action:disabled{color:#bbb;cursor:not-allowed}.rh-data-center-panel__state{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--rh-ui-data-center-secondary-text);font-size:14px}.rh-data-center-panel__retry{border:0;background:transparent;color:var(--rh-ui-data-center-primary);cursor:pointer}.rh-data-center-panel__footer{display:flex;justify-content:space-between;box-sizing:border-box;padding:8px 10px 0 0;color:var(--rh-ui-data-center-secondary-text);font-size:12px}.rh-data-center-tip__content{display:flex;flex-direction:column;align-items:center;color:var(--rh-ui-data-center-text)}.rh-data-center-tip__minutes{color:var(--rh-ui-data-center-primary);font-size:18px}.rh-data-center-tip__description{margin:15px 0 30px;font-size:14px;line-height:22px}.rh-data-center-tip__guide{width:120px;height:56px;position:relative;margin:-20px auto 8px;border-radius:50%;background:radial-gradient(circle at 50% 55%,rgba(0,130,138,.18),transparent 65%)}.rh-data-center-tip__guide:after{content:">";position:absolute;top:0;right:15px;color:var(--rh-ui-data-center-primary);font-size:32px;animation:rh-data-center-guide 1.5s ease-in-out infinite}@keyframes rh-data-center-guide{0%,to{transform:translate(-8px,5px)}50%{transform:translate(0)}}.rh-data-center[data-v-47bfdbe2]{position:relative;display:inline-flex;align-items:center}.rh-data-center__trigger[data-v-47bfdbe2]{display:inline-flex;align-items:center;min-height:30px;padding:0 8px;border-radius:4px;color:var(--rh-ui-data-center-text);cursor:pointer;transition:background-color .2s ease,color .2s ease}.rh-data-center__trigger[data-v-47bfdbe2]:hover,.rh-data-center__trigger.is-active[data-v-47bfdbe2]{background:rgba(0,130,138,.08);color:var(--rh-ui-data-center-primary)}.rh-data-center__icon[data-v-47bfdbe2]{width:22px;margin-right:5px}.rh-data-center__popover[data-v-47bfdbe2]{position:fixed;z-index:3000;box-sizing:border-box}.responsive-info-grid[data-v-85b5413b]{display:grid;grid-template-columns:repeat(var(--responsive-info-grid-columns),minmax(0,1fr));gap:var(--responsive-info-grid-gap)}@media (max-width: 1200px){.responsive-info-grid[data-v-85b5413b]{grid-template-columns:repeat(var(--responsive-info-grid-tablet-columns),minmax(0,1fr))}}@media (max-width: 768px){.responsive-info-grid[data-v-85b5413b]{grid-template-columns:repeat(var(--responsive-info-grid-mobile-columns),minmax(0,1fr))}}.responsive-info-grid-item[data-v-67645283]{min-width:0;color:#333;font-size:14px;line-height:22px;word-break:break-all;display:flex}.responsive-info-grid-item__title[data-v-67645283]{display:inline-block;color:#777;white-space:nowrap}.responsive-info-grid-item__content[data-v-67645283]{display:inline}@media (max-width: 768px){.responsive-info-grid-item[data-v-67645283]{grid-column:span 1!important}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rhjy-ui",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Vue 3 and Element Plus business UI components",
   "type": "module",
   "publishConfig": {