rhjy-ui 0.1.0 → 0.2.0

package/README.md

@@ -1,109 +1,133 @@
-# rhjy-ui
-
-`rhjy-ui` is a Vue 3 and Element Plus business UI component library. The first release contains a configurable data-center suite for displaying asynchronous import, export, generation and other background tasks.
-
-## Install
-
-```bash
-pnpm add rhjy-ui vue element-plus @element-plus/icons-vue
-```
-
-Import the package stylesheet once in the application entrypoint:
-
-```ts
-import 'rhjy-ui/style.css'
-```
-
-## Data center panel
-
-`rhjy-ui` never receives an API URL. Each application supplies a `loadTasks` function and converts its own response into the standard task model.
-
-```vue
-<script setup lang="ts">
-import { RhDataCenter } from 'rhjy-ui'
-import type {
-  RhDataCenterCategory,
-  RhDataCenterLoadTasks,
-} from 'rhjy-ui/data-center'
-
-const categories: RhDataCenterCategory[] = [
-  { key: 'all', label: '全部任务' },
-  { key: 'generate', label: '数据生成' },
-  { key: 'import', label: '数据导入' },
-  { key: 'export', label: '数据导出' },
-]
-
-const loadTasks: RhDataCenterLoadTasks = async ({ category }) => {
-  const response = await requestTaskList({
-    taskType: category.key === 'all' ? undefined : category.key,
-  })
-
-  return {
-    items: response.list,
-    total: response.total,
-  }
-}
-
-const handleTaskAction = ({ action, task }) => {
-  if (action === 'download') {
-    window.open(task.raw.fileUrl)
-  }
-}
-</script>
-
-<template>
-  <RhDataCenter
-    :categories="categories"
-    :load-tasks="loadTasks"
-    @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.
-
-## Task tip flow
-
-Use `useRhDataCenter` after a page successfully creates a background task:
-
-```vue
-<script setup lang="ts">
-import { RhDataCenterTip, useRhDataCenter } from 'rhjy-ui'
-
-const { tipVisible, tipConfig, showTip } = useRhDataCenter()
-
-const startExport = async () => {
-  const result = await createExportTask()
-  showTip({
-    type: 'export',
-    minutes: Number(result.minutes),
-    title: '导出文件生成中，大概需要',
-    content: '现在你可关闭弹框，去做其他事情了。',
-  })
-}
-</script>
-
-<template>
-  <RhDataCenterTip v-model="tipVisible" v-bind="tipConfig" />
-</template>
-```
-
-## Standard task model
-
-The adapter returns `id`, `categoryKey`, `title`, `createdAt`, `progress`, and one of `waiting`, `processing`, `success`, or `failed`. Optional `tag`, `message`, `actions`, and `raw` provide display and application action context.
-
-## Styling
-
-Override CSS variables at the application root when needed:
-
-```css
-:root {
-  --rh-ui-data-center-primary: #00828a;
-  --rh-ui-data-center-panel-width: 606px;
-  --rh-ui-data-center-panel-height: 500px;
-}
-```
-
-## Releases
-
-The package is published with compiled `dist` output. Consumers should use an explicit version such as `rhjy-ui@0.1.0`; application-specific API adapters remain in the consuming project.
+# rhjy-ui
+
+`rhjy-ui` is a Vue 3 and Element Plus business UI component library. The first release contains a configurable data-center suite for displaying asynchronous import, export, generation and other background tasks.
+
+## Install
+
+```bash
+pnpm add rhjy-ui vue element-plus @element-plus/icons-vue
+```
+
+Import the package stylesheet once in the application entrypoint:
+
+```ts
+import 'rhjy-ui/style.css'
+```
+
+## Responsive Info Grid
+
+Responsive Info Grid arranges title-content pairs in a configurable grid and switches column counts at the 1200px and 768px breakpoints.
+
+```vue
+<script setup lang="ts">
+import {
+  RhResponsiveInfoGrid,
+  RhResponsiveInfoGridItem,
+} from 'rhjy-ui'
+</script>
+
+<template>
+  <RhResponsiveInfoGrid>
+    <RhResponsiveInfoGridItem title="Project: " content="Smart Campus" />
+    <RhResponsiveInfoGridItem title="Owner: " content="Operations Team" />
+    <RhResponsiveInfoGridItem title="Devices: " :content="128" />
+    <RhResponsiveInfoGridItem title="Summary: " content="All systems operational" :span="2" />
+  </RhResponsiveInfoGrid>
+</template>
+```
+
+See the [Responsive Info Grid component README](https://unpkg.com/rhjy-ui@0.2.0/src/responsive-info-grid/README.md) for subpath imports, the complete props and slots reference, responsive behavior, and more examples.
+
+## Data center panel
+
+`rhjy-ui` never receives an API URL. Each application supplies a `loadTasks` function and converts its own response into the standard task model.
+
+```vue
+<script setup lang="ts">
+import { RhDataCenter } from 'rhjy-ui'
+import type {
+  RhDataCenterCategory,
+  RhDataCenterLoadTasks,
+} from 'rhjy-ui/data-center'
+
+const categories: RhDataCenterCategory[] = [
+  { key: 'all', label: '全部任务' },
+  { key: 'generate', label: '数据生成' },
+  { key: 'import', label: '数据导入' },
+  { key: 'export', label: '数据导出' },
+]
+
+const loadTasks: RhDataCenterLoadTasks = async ({ category }) => {
+  const response = await requestTaskList({
+    taskType: category.key === 'all' ? undefined : category.key,
+  })
+
+  return {
+    items: response.list,
+    total: response.total,
+  }
+}
+
+const handleTaskAction = ({ action, task }) => {
+  if (action === 'download') {
+    window.open(task.raw.fileUrl)
+  }
+}
+</script>
+
+<template>
+  <RhDataCenter
+    :categories="categories"
+    :load-tasks="loadTasks"
+    @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.
+
+## Task tip flow
+
+Use `useRhDataCenter` after a page successfully creates a background task:
+
+```vue
+<script setup lang="ts">
+import { RhDataCenterTip, useRhDataCenter } from 'rhjy-ui'
+
+const { tipVisible, tipConfig, showTip } = useRhDataCenter()
+
+const startExport = async () => {
+  const result = await createExportTask()
+  showTip({
+    type: 'export',
+    minutes: Number(result.minutes),
+    title: '导出文件生成中，大概需要',
+    content: '现在你可关闭弹框，去做其他事情了。',
+  })
+}
+</script>
+
+<template>
+  <RhDataCenterTip v-model="tipVisible" v-bind="tipConfig" />
+</template>
+```
+
+## Standard task model
+
+The adapter returns `id`, `categoryKey`, `title`, `createdAt`, `progress`, and one of `waiting`, `processing`, `success`, or `failed`. Optional `tag`, `message`, `actions`, and `raw` provide display and application action context.
+
+## Styling
+
+Override CSS variables at the application root when needed:
+
+```css
+:root {
+  --rh-ui-data-center-primary: #00828a;
+  --rh-ui-data-center-panel-width: 606px;
+  --rh-ui-data-center-panel-height: 500px;
+}
+```
+
+## Releases
+
+The package is published with compiled `dist` output. Consumers should use an explicit version such as `rhjy-ui@0.2.0`; application-specific API adapters remain in the consuming project.

package/dist/_plugin-vue_export-helper-dad06003.js

@@ -0,0 +1,9 @@
+const s = (t, r) => {
+  const o = t.__vccOpts || t;
+  for (const [c, e] of r)
+    o[c] = e;
+  return o;
+};
+export {
+  s as _
+};

package/dist/_plugin-vue_export-helper-f246444f.cjs

@@ -0,0 +1 @@
+"use strict";const e=(t,o)=>{const c=t.__vccOpts||t;for(const[r,s]of o)c[r]=s;return c};exports._export_sfc=e;

package/dist/data-center/index.cjs

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

package/dist/data-center/index.js

@@ -1,82 +1,83 @@
-import { defineComponent as S, openBlock as l, createElementBlock as c, createElementVNode as h, toDisplayString as g, createCommentVNode as C, computed as D, normalizeClass as K, normalizeStyle as Q, Fragment as U, renderList as q, ref as p, onMounted as Z, renderSlot as T, createTextVNode as X, createBlock as Y, createVNode as O, onBeforeUnmount as ee, watch as oe, nextTick as le, withModifiers as j, Teleport as re, withCtx as L, normalizeProps as N, guardReactiveProps as H, resolveComponent as J } from "vue";
-const ie = { class: "rh-data-center-panel__state" }, W = /* @__PURE__ */ S({
+import { defineComponent as O, openBlock as l, createElementBlock as i, createElementVNode as h, toDisplayString as g, createCommentVNode as C, computed as D, normalizeClass as K, normalizeStyle as Q, Fragment as U, renderList as q, ref as m, onMounted as Z, renderSlot as T, createTextVNode as X, createBlock as Y, createVNode as S, onBeforeUnmount as ee, watch as oe, nextTick as le, withModifiers as j, Teleport as re, withCtx as L, normalizeProps as N, guardReactiveProps as H, 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__ */ O({
   __name: "RhDataCenterState",
   props: {
     text: {},
     retryable: { type: Boolean, default: !1 }
   },
   emits: ["retry"],
-  setup(e, { emit: m }) {
-    const t = m;
-    return (i, u) => (l(), c("div", ie, [
+  setup(e, { emit: p }) {
+    const t = p;
+    return (c, d) => (l(), i("div", ce, [
       h("span", null, g(e.text), 1),
-      e.retryable ? (l(), c("button", {
+      e.retryable ? (l(), i("button", {
         key: 0,
         type: "button",
         class: "rh-data-center-panel__retry",
-        onClick: u[0] || (u[0] = (d) => t("retry"))
+        onClick: d[0] || (d[0] = (u) => t("retry"))
       }, " 重新加载 ")) : C("", !0)
     ]));
   }
-}), ce = { class: "rh-data-center-panel__task" }, ue = { class: "rh-data-center-panel__taskMain" }, de = { class: "rh-data-center-panel__taskTitle" }, ve = {
+}), ue = { class: "rh-data-center-panel__task" }, de = { class: "rh-data-center-panel__taskMain" }, ve = { class: "rh-data-center-panel__taskTitle" }, fe = {
   key: 0,
   class: "rh-data-center-panel__taskTag"
-}, fe = {
+}, he = {
   key: 0,
   class: "rh-data-center-panel__progress"
-}, he = { class: "rh-data-center-panel__meta" }, me = {
+}, me = { class: "rh-data-center-panel__meta" }, pe = {
   key: 0,
   class: "rh-data-center-panel__actions"
-}, pe = ["disabled", "onClick"], ye = /* @__PURE__ */ S({
+}, ye = ["disabled", "onClick"], _e = /* @__PURE__ */ O({
   __name: "RhDataCenterTaskItem",
   props: {
     task: {}
   },
   emits: ["action"],
-  setup(e, { emit: m }) {
-    const t = e, i = m, u = D(() => {
-      const d = Number(t.task.progress || 0);
-      return Math.min(100, Math.max(0, d));
+  setup(e, { emit: p }) {
+    const t = e, c = p, d = D(() => {
+      const u = Number(t.task.progress || 0);
+      return Math.min(100, Math.max(0, u));
     });
-    return (d, b) => {
+    return (u, b) => {
       var y;
-      return l(), c("div", ce, [
-        h("div", ue, [
-          h("div", de, [
+      return l(), i("div", ue, [
+        h("div", de, [
+          h("div", ve, [
             h("span", null, g(e.task.title), 1),
-            e.task.tag ? (l(), c("span", ve, g(e.task.tag), 1)) : C("", !0)
+            e.task.tag ? (l(), i("span", fe, g(e.task.tag), 1)) : C("", !0)
           ]),
-          e.task.status !== "success" ? (l(), c("div", fe, [
+          e.task.status !== "success" ? (l(), i("div", he, [
             h("div", {
               class: K(["rh-data-center-panel__progressBar", { "is-failed": e.task.status === "failed" }]),
-              style: Q({ width: `${u.value}%` })
+              style: Q({ width: `${d.value}%` })
             }, null, 6)
           ])) : C("", !0),
-          h("div", he, g(e.task.createdAt), 1),
-          e.task.message ? (l(), c("div", {
+          h("div", me, g(e.task.createdAt), 1),
+          e.task.message ? (l(), i("div", {
             key: 1,
             class: K(["rh-data-center-panel__message", { "is-failed": e.task.status === "failed" }])
           }, g(e.task.message), 3)) : C("", !0)
         ]),
-        (y = e.task.actions) != null && y.length ? (l(), c("div", me, [
-          (l(!0), c(U, null, q(e.task.actions, (k) => (l(), c("button", {
+        (y = e.task.actions) != null && y.length ? (l(), i("div", pe, [
+          (l(!0), i(U, null, q(e.task.actions, (k) => (l(), i("button", {
             key: k.key,
             type: "button",
             class: "rh-data-center-panel__action",
             disabled: k.disabled,
-            onClick: (w) => i("action", k.key)
-          }, g(k.label), 9, pe))), 128))
+            onClick: (w) => c("action", k.key)
+          }, g(k.label), 9, ye))), 128))
         ])) : C("", !0)
       ]);
     };
   }
-}), _e = "数据处理中心", ke = 606, ge = 500, Ce = 1e3, be = "-此处仅展示近15天内的数据-", Te = { class: "rh-data-center-panel" }, we = { class: "rh-data-center-panel__sidebar" }, $e = ["onClick"], Re = {
+}), ke = "数据处理中心", ge = 606, Ce = 500, be = 1e3, Te = "-此处仅展示近15天内的数据-", we = { class: "rh-data-center-panel" }, $e = { class: "rh-data-center-panel__sidebar" }, Re = ["onClick"], Ee = {
   key: 0,
   class: "rh-data-center-panel__categoryCount"
-}, Ee = { class: "rh-data-center-panel__main" }, Ae = { class: "rh-data-center-panel__title" }, De = { class: "rh-data-center-panel__scroll" }, Le = {
+}, Ae = { class: "rh-data-center-panel__main" }, De = { class: "rh-data-center-panel__title" }, Le = { class: "rh-data-center-panel__scroll" }, Ve = {
   key: 0,
   class: "rh-data-center-panel__footer"
-}, Ve = /* @__PURE__ */ S({
+}, xe = /* @__PURE__ */ O({
   __name: "RhDataCenterPanel",
   props: {
     categories: {},
@@ -84,11 +85,11 @@ const ie = { class: "rh-data-center-panel__state" }, W = /* @__PURE__ */ S({
     activeCategoryKey: { default: void 0 },
     closeable: { type: Boolean, default: !0 },
     showTotal: { type: Boolean, default: !0 },
-    recentDaysText: { default: be }
+    recentDaysText: { default: Te }
   },
   emits: ["close", "refresh", "task-action", "error"],
-  setup(e, { expose: m, emit: t }) {
-    const i = e, u = t, d = p(i.activeCategoryKey), b = p({}), y = p({}), k = p({}), w = p({}), R = p({}), v = D(() => i.categories.find((n) => n.key === d.value) || i.categories[0]), E = D(() => {
+  setup(e, { expose: p, emit: t }) {
+    const c = e, d = t, u = m(c.activeCategoryKey), b = m({}), y = m({}), k = m({}), w = m({}), R = m({}), v = D(() => c.categories.find((n) => n.key === u.value) || c.categories[0]), E = D(() => {
       var n;
       return String(((n = v.value) == null ? void 0 : n.key) ?? "");
     }), V = D(() => b.value[E.value]), M = D(() => y.value[E.value] === !0), A = D(() => k.value[E.value]), z = (n) => {
@@ -104,58 +105,58 @@ const ie = { class: "rh-data-center-panel__state" }, W = /* @__PURE__ */ S({
         return;
       R.value[a] = !0, y.value[a] = !0, k.value[a] = void 0;
       const s = (w.value[a] || 0) + 1;
-      w.value[a] = s, u("refresh", r);
+      w.value[a] = s, d("refresh", r);
       try {
-        const $ = await i.loadTasks({ category: r });
+        const $ = await c.loadTasks({ category: r });
         if (w.value[a] !== s || E.value !== a)
           return;
         b.value[a] = $;
       } catch ($) {
         if (w.value[a] !== s || E.value !== a)
           return;
-        k.value[a] = $, u("error", $, r);
+        k.value[a] = $, d("error", $, r);
       } finally {
         w.value[a] === s && (y.value[a] = !1, R.value[a] = !1);
       }
     }, B = async (n) => {
-      d.value !== n.key && (d.value = n.key, await x());
+      u.value !== n.key && (u.value = n.key, await x());
     }, P = (n, r) => {
       const a = v.value;
-      a && u("task-action", { action: n, task: r, category: a });
+      a && d("task-action", { action: n, task: r, category: a });
     };
     return Z(() => {
       var n;
-      d.value === void 0 && (d.value = (n = i.categories[0]) == null ? void 0 : n.key);
-    }), m({
+      u.value === void 0 && (u.value = (n = c.categories[0]) == null ? void 0 : n.key);
+    }), p({
       refresh: x
     }), (n, r) => {
       var a;
-      return l(), c("div", Te, [
-        h("aside", we, [
+      return l(), i("div", we, [
+        h("aside", $e, [
           r[1] || (r[1] = h("div", { class: "rh-data-center-panel__title" }, "数据类型", -1)),
-          (l(!0), c(U, null, q(e.categories, (s) => (l(), c("button", {
+          (l(!0), i(U, null, q(e.categories, (s) => (l(), i("button", {
             key: s.key,
             type: "button",
-            class: K(["rh-data-center-panel__category", { "is-active": d.value === s.key }]),
+            class: K(["rh-data-center-panel__category", { "is-active": u.value === s.key }]),
             onClick: ($) => B(s)
           }, [
             h("span", null, g(s.label), 1),
-            z(s) !== void 0 ? (l(), c("span", Re, g(z(s)), 1)) : C("", !0)
-          ], 10, $e))), 128))
+            z(s) !== void 0 ? (l(), i("span", Ee, g(z(s)), 1)) : C("", !0)
+          ], 10, Re))), 128))
         ]),
-        h("section", Ee, [
-          h("div", Ae, [
+        h("section", Ae, [
+          h("div", De, [
             T(n.$slots, "header", { category: v.value }, () => [
               r[2] || (r[2] = X("数据处理进度", -1))
             ]),
-            e.closeable ? (l(), c("button", {
+            e.closeable ? (l(), i("button", {
               key: 0,
               type: "button",
               class: "rh-data-center-panel__action",
-              onClick: r[0] || (r[0] = (s) => u("close"))
+              onClick: r[0] || (r[0] = (s) => d("close"))
             }, "关闭")) : C("", !0)
           ]),
-          h("div", De, [
+          h("div", Le, [
             M.value ? (l(), Y(W, {
               key: 0,
               text: "加载中..."
@@ -164,18 +165,18 @@ const ie = { class: "rh-data-center-panel__state" }, W = /* @__PURE__ */ S({
               error: A.value,
               retry: x
             }, () => [
-              O(W, {
+              S(W, {
                 text: "任务加载失败",
                 retryable: !0,
                 onRetry: x
               })
-            ]) : (a = V.value) != null && a.items.length ? (l(!0), c(U, { key: 2 }, q(V.value.items, (s) => T(n.$slots, "task", {
+            ]) : (a = V.value) != null && a.items.length ? (l(!0), i(U, { key: 2 }, q(V.value.items, (s) => T(n.$slots, "task", {
               key: s.id,
               task: s,
               category: v.value,
               action: P
             }, () => [
-              O(ye, {
+              S(_e, {
                 task: s,
                 onAction: ($) => P($, s)
               }, null, 8, ["task", "onAction"])
@@ -183,7 +184,7 @@ const ie = { class: "rh-data-center-panel__state" }, W = /* @__PURE__ */ S({
               key: 3,
               category: v.value
             }, () => [
-              O(W, { text: "暂无任务" })
+              S(W, { text: "暂无任务" })
             ])
           ]),
           T(n.$slots, "footer", {
@@ -192,7 +193,7 @@ const ie = { class: "rh-data-center-panel__state" }, W = /* @__PURE__ */ S({
           }, () => {
             var s;
             return [
-              e.showTotal ? (l(), c("div", Le, [
+              e.showTotal ? (l(), i("div", Ve, [
                 h("span", null, g(((s = V.value) == null ? void 0 : s.total) || 0) + "条记录", 1),
                 h("span", null, g(e.recentDaysText), 1)
               ])) : C("", !0)
@@ -202,37 +203,37 @@ const ie = { class: "rh-data-center-panel__state" }, W = /* @__PURE__ */ S({
       ]);
     };
   }
-}), xe = (e) => typeof e == "function" ? e() : e.value, Be = (e, m) => {
-  const t = (i) => {
-    const u = i.target;
-    if (!u)
+}), Be = (e) => typeof e == "function" ? e() : e.value, Pe = (e, p) => {
+  const t = (c) => {
+    const d = c.target;
+    if (!d)
       return;
     e.some((b) => {
       var y;
-      return (y = xe(b)) == null ? void 0 : y.contains(u);
-    }) || m();
+      return (y = Be(b)) == null ? void 0 : y.contains(d);
+    }) || p();
   };
   Z(() => document.addEventListener("click", t, !0)), ee(() => document.removeEventListener("click", t, !0));
-}, Pe = ["src"], Ie = /* @__PURE__ */ S({
+}, Ie = ["src"], Ne = /* @__PURE__ */ O({
   __name: "RhDataCenter",
   props: {
     modelValue: { type: Boolean, default: void 0 },
     categories: {},
     loadTasks: {},
-    label: { default: _e },
-    width: { default: ke },
-    panelHeight: { default: ge },
+    label: { default: ke },
+    width: { default: ge },
+    panelHeight: { default: Ce },
     panelRight: { default: 0 },
-    pollInterval: { default: Ce },
+    pollInterval: { default: be },
     refreshOnOpen: { type: Boolean, default: !0 },
     closeOnClickOutside: { type: Boolean, default: !0 },
     icon: { default: "" },
     activeIcon: { default: "" }
   },
   emits: ["update:modelValue", "open", "close", "refresh", "task-action", "error"],
-  setup(e, { emit: m }) {
-    const t = e, i = m, u = p(!1), d = p(null), b = p(null), y = p(null), k = p({}), w = p(), R = p(!1), v = D(() => t.modelValue === void 0 ? u.value : t.modelValue), E = D(() => v.value ? t.activeIcon || t.icon : t.icon || t.activeIcon), V = (o) => typeof o == "number" ? `${o}px` : o, M = (o) => typeof o == "number" ? o : Number.parseFloat(o) || 0, A = () => {
-      const o = d.value, _ = b.value;
+  setup(e, { emit: p }) {
+    const t = e, c = p, d = m(!1), u = m(null), b = m(null), y = m(null), k = m({}), w = m(), R = m(!1), v = D(() => t.modelValue === void 0 ? d.value : t.modelValue), E = D(() => v.value ? t.activeIcon || t.icon : t.icon || t.activeIcon), V = (o) => typeof o == "number" ? `${o}px` : o, M = (o) => typeof o == "number" ? o : Number.parseFloat(o) || 0, A = () => {
+      const o = u.value, _ = b.value;
       if (!o || !_)
         return;
       const f = o.getBoundingClientRect(), F = _.offsetWidth || M(t.width), te = M(t.panelRight), I = 8, ae = f.right - F - te, ne = Math.min(
@@ -260,11 +261,11 @@ const ie = { class: "rh-data-center-panel__state" }, W = /* @__PURE__ */ S({
     }, n = () => {
       B(), !(!v.value || t.pollInterval <= 0) && (w.value = window.setInterval(P, t.pollInterval));
     }, r = (o) => {
-      t.modelValue === void 0 && (u.value = o), i("update:modelValue", o);
+      t.modelValue === void 0 && (d.value = o), c("update:modelValue", o);
     }, a = () => {
-      v.value || (r(!0), i("open"));
+      v.value || (r(!0), c("open"));
     }, s = () => {
-      v.value && (r(!1), i("close"));
+      v.value && (r(!1), c("close"));
     }, $ = () => v.value ? s() : a(), G = () => {
       if (document.visibilityState === "hidden") {
         B();
@@ -278,14 +279,14 @@ const ie = { class: "rh-data-center-panel__state" }, W = /* @__PURE__ */ S({
         return;
       }
       await le(), A(), z(), document.addEventListener("visibilitychange", G), t.refreshOnOpen && P(), n();
-    }, { immediate: !0 }), Be([d, b], () => {
+    }, { immediate: !0 }), Pe([u, b], () => {
       t.closeOnClickOutside && v.value && s();
     }), ee(() => {
       B(), x(), document.removeEventListener("visibilitychange", G);
-    }), (o, _) => (l(), c(U, null, [
+    }), (o, _) => (l(), i(U, null, [
       h("div", {
         ref_key: "triggerRef",
-        ref: d,
+        ref: u,
         class: "rh-data-center",
         onClick: j($, ["stop"])
       }, [
@@ -298,18 +299,18 @@ const ie = { class: "rh-data-center-panel__state" }, W = /* @__PURE__ */ S({
           h("span", {
             class: K(["rh-data-center__trigger", { "is-active": v.value }])
           }, [
-            E.value ? (l(), c("img", {
+            E.value ? (l(), i("img", {
               key: 0,
               src: E.value,
               class: "rh-data-center__icon",
               alt: ""
-            }, null, 8, Pe)) : C("", !0),
+            }, null, 8, Ie)) : C("", !0),
             h("span", null, g(e.label), 1)
           ], 2)
         ], !0)
       ], 512),
       (l(), Y(re, { to: "body" }, [
-        v.value ? (l(), c("div", {
+        v.value ? (l(), i("div", {
           key: 0,
           ref_key: "contentRef",
           ref: b,
@@ -318,16 +319,16 @@ const ie = { class: "rh-data-center-panel__state" }, W = /* @__PURE__ */ S({
           onClick: _[3] || (_[3] = j(() => {
           }, ["stop"]))
         }, [
-          O(Ve, {
+          S(xe, {
             ref_key: "panelRef",
             ref: y,
             categories: e.categories,
             "load-tasks": e.loadTasks,
             closeable: !0,
             onClose: s,
-            onRefresh: _[0] || (_[0] = (f) => i("refresh", f)),
-            onTaskAction: _[1] || (_[1] = (f) => i("task-action", f)),
-            onError: _[2] || (_[2] = (f, F) => i("error", f, F))
+            onRefresh: _[0] || (_[0] = (f) => c("refresh", f)),
+            onTaskAction: _[1] || (_[1] = (f) => c("task-action", f)),
+            onError: _[2] || (_[2] = (f, F) => c("error", f, F))
           }, {
             header: L((f) => [
               T(o.$slots, "header", N(H(f)), () => [
@@ -353,21 +354,16 @@ const ie = { class: "rh-data-center-panel__state" }, W = /* @__PURE__ */ S({
     ], 64));
   }
 });
-const Ne = (e, m) => {
-  const t = e.__vccOpts || e;
-  for (const [i, u] of m)
-    t[i] = u;
-  return t;
-}, Fe = /* @__PURE__ */ Ne(Ie, [["__scopeId", "data-v-b6caa4d9"]]), He = {
+const Ke = /* @__PURE__ */ ie(Ne, [["__scopeId", "data-v-b6caa4d9"]]), He = {
   key: 0,
   class: "rh-data-center-tip__guide"
-}, Oe = { class: "rh-data-center-tip__content" }, Se = {
+}, Se = { class: "rh-data-center-tip__content" }, Oe = {
   key: 0,
   class: "rh-data-center-tip__minutes"
 }, Me = {
   key: 1,
   class: "rh-data-center-tip__description"
-}, Ke = /* @__PURE__ */ S({
+}, Ue = /* @__PURE__ */ O({
   __name: "RhDataCenterTip",
   props: {
     modelValue: { type: Boolean, default: !1 },
@@ -379,50 +375,50 @@ const Ne = (e, m) => {
     showGuideAnimation: { type: Boolean, default: !0 }
   },
   emits: ["update:modelValue", "close"],
-  setup(e, { emit: m }) {
-    const t = m, i = () => {
+  setup(e, { emit: p }) {
+    const t = p, c = () => {
       t("update:modelValue", !1), t("close");
     };
-    return (u, d) => {
+    return (d, u) => {
       const b = J("el-button"), y = J("el-dialog");
       return l(), Y(y, {
         "model-value": e.modelValue,
         title: e.title || "提示",
         width: e.width,
         "append-to-body": "",
-        "onUpdate:modelValue": d[0] || (d[0] = (k) => t("update:modelValue", k)),
-        onClose: i
+        "onUpdate:modelValue": u[0] || (u[0] = (k) => t("update:modelValue", k)),
+        onClose: c
       }, {
         footer: L(() => [
-          O(b, {
+          S(b, {
             type: "primary",
-            onClick: i
+            onClick: c
           }, {
-            default: L(() => [...d[1] || (d[1] = [
+            default: L(() => [...u[1] || (u[1] = [
               X("关闭弹框", -1)
             ])]),
             _: 1
           })
         ]),
         default: L(() => [
-          e.showGuideAnimation ? (l(), c("div", He)) : C("", !0),
-          h("div", Oe, [
-            e.minutes !== void 0 ? (l(), c("span", Se, g((e.title || "任务处理中，大概需要") + e.minutes + "分钟"), 1)) : C("", !0),
-            e.content ? (l(), c("div", Me, g(e.content), 1)) : C("", !0),
-            T(u.$slots, "extra")
+          e.showGuideAnimation ? (l(), i("div", He)) : C("", !0),
+          h("div", Se, [
+            e.minutes !== void 0 ? (l(), i("span", Oe, g((e.title || "任务处理中，大概需要") + e.minutes + "分钟"), 1)) : C("", !0),
+            e.content ? (l(), i("div", Me, g(e.content), 1)) : C("", !0),
+            T(d.$slots, "extra")
           ])
         ]),
         _: 3
       }, 8, ["model-value", "title", "width"]);
     };
   }
-}), Ue = () => {
-  const e = p(!1), m = p({});
+}), Ge = () => {
+  const e = m(!1), p = m({});
   return {
     tipVisible: e,
-    tipConfig: m,
-    showTip: (u) => {
-      m.value = { ...u }, e.value = !0;
+    tipConfig: p,
+    showTip: (d) => {
+      p.value = { ...d }, e.value = !0;
     },
     closeTip: () => {
       e.value = !1;
@@ -430,8 +426,8 @@ const Ne = (e, m) => {
   };
 };
 export {
-  Fe as RhDataCenter,
-  Ve as RhDataCenterPanel,
-  Ke as RhDataCenterTip,
-  Ue as useRhDataCenter
+  Ke as RhDataCenter,
+  xe as RhDataCenterPanel,
+  Ue as RhDataCenterTip,
+  Ge as useRhDataCenter
 };

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./data-center/index.cjs");require("vue");exports.RhDataCenter=e.RhDataCenter;exports.RhDataCenterPanel=e.RhDataCenterPanel;exports.RhDataCenterTip=e.RhDataCenterTip;exports.useRhDataCenter=e.useRhDataCenter;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./data-center/index.cjs"),t=require("./responsive-info-grid/index.cjs");require("vue");require("./_plugin-vue_export-helper-f246444f.cjs");exports.RhDataCenter=e.RhDataCenter;exports.RhDataCenterPanel=e.RhDataCenterPanel;exports.RhDataCenterTip=e.RhDataCenterTip;exports.useRhDataCenter=e.useRhDataCenter;exports.RhResponsiveInfoGrid=t.RhResponsiveInfoGrid;exports.RhResponsiveInfoGridItem=t.RhResponsiveInfoGridItem;

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 
 export * from './data-center';
+export * from './responsive-info-grid';

package/dist/index.js

@@ -1,8 +1,12 @@
-import { RhDataCenter as r, RhDataCenterPanel as n, RhDataCenterTip as h, useRhDataCenter as C } from "./data-center/index.js";
+import { RhDataCenter as a, RhDataCenterPanel as n, RhDataCenterTip as R, useRhDataCenter as i } from "./data-center/index.js";
+import { RhResponsiveInfoGrid as h, RhResponsiveInfoGridItem as m } from "./responsive-info-grid/index.js";
 import "vue";
+import "./_plugin-vue_export-helper-dad06003.js";
 export {
-  r as RhDataCenter,
+  a as RhDataCenter,
   n as RhDataCenterPanel,
-  h as RhDataCenterTip,
-  C as useRhDataCenter
+  R as RhDataCenterTip,
+  h as RhResponsiveInfoGrid,
+  m as RhResponsiveInfoGridItem,
+  i as useRhDataCenter
 };

package/dist/responsive-info-grid/RhResponsiveInfoGrid.vue.d.ts

@@ -0,0 +1,53 @@
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    columns?: number;
+    tabletColumns?: number;
+    mobileColumns?: number;
+    gap?: string;
+}>, {
+    columns: number;
+    tabletColumns: number;
+    mobileColumns: number;
+    gap: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    columns?: number;
+    tabletColumns?: number;
+    mobileColumns?: number;
+    gap?: string;
+}>, {
+    columns: number;
+    tabletColumns: number;
+    mobileColumns: number;
+    gap: string;
+}>>> & Readonly<{}>, {
+    columns: number;
+    tabletColumns: number;
+    mobileColumns: number;
+    gap: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/responsive-info-grid/RhResponsiveInfoGridItem.vue.d.ts

@@ -0,0 +1,49 @@
+declare function __VLS_template(): {
+    title?(_: {}): any;
+    content?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    title?: string;
+    content?: string | number;
+    span?: number;
+}>, {
+    title: string;
+    content: string;
+    span: number;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    title?: string;
+    content?: string | number;
+    span?: number;
+}>, {
+    title: string;
+    content: string;
+    span: number;
+}>>> & Readonly<{}>, {
+    span: number;
+    title: string;
+    content: string | number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/responsive-info-grid/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),o=require("../_plugin-vue_export-helper-f246444f.cjs"),i=e.defineComponent({__name:"RhResponsiveInfoGrid",props:{columns:{default:4},tabletColumns:{default:2},mobileColumns:{default:1},gap:{default:"15px 15px"}},setup(t){return(n,s)=>(e.openBlock(),e.createElementBlock("div",{class:"responsive-info-grid",style:e.normalizeStyle({"--responsive-info-grid-columns":String(t.columns),"--responsive-info-grid-tablet-columns":String(t.tabletColumns),"--responsive-info-grid-mobile-columns":String(t.mobileColumns),"--responsive-info-grid-gap":t.gap})},[e.renderSlot(n.$slots,"default",{},void 0,!0)],4))}});const l=o._export_sfc(i,[["__scopeId","data-v-85b5413b"]]),r={class:"responsive-info-grid-item__title"},d={class:"responsive-info-grid-item__content"},a=e.defineComponent({__name:"RhResponsiveInfoGridItem",props:{title:{default:""},content:{default:""},span:{default:1}},setup(t){return(n,s)=>(e.openBlock(),e.createElementBlock("div",{class:"responsive-info-grid-item",style:e.normalizeStyle({gridColumn:t.span>1?`span ${t.span}`:void 0})},[e.createElementVNode("div",r,[e.renderSlot(n.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(t.title),1)],!0)]),e.createElementVNode("div",d,[e.renderSlot(n.$slots,"content",{},()=>[e.createTextVNode(e.toDisplayString(t.content),1)],!0)])],4))}});const c=o._export_sfc(a,[["__scopeId","data-v-67645283"]]);exports.RhResponsiveInfoGrid=l;exports.RhResponsiveInfoGridItem=c;

package/dist/responsive-info-grid/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RhResponsiveInfoGrid } from './RhResponsiveInfoGrid.vue';
+export { default as RhResponsiveInfoGridItem } from './RhResponsiveInfoGridItem.vue';

package/dist/responsive-info-grid/index.js

@@ -0,0 +1,54 @@
+import { defineComponent as l, openBlock as r, createElementBlock as d, normalizeStyle as a, renderSlot as n, createElementVNode as o, createTextVNode as s, toDisplayString as i } from "vue";
+import { _ as c } from "../_plugin-vue_export-helper-dad06003.js";
+const u = /* @__PURE__ */ l({
+  __name: "RhResponsiveInfoGrid",
+  props: {
+    columns: { default: 4 },
+    tabletColumns: { default: 2 },
+    mobileColumns: { default: 1 },
+    gap: { default: "15px 15px" }
+  },
+  setup(e) {
+    return (t, m) => (r(), d("div", {
+      class: "responsive-info-grid",
+      style: a({
+        "--responsive-info-grid-columns": String(e.columns),
+        "--responsive-info-grid-tablet-columns": String(e.tabletColumns),
+        "--responsive-info-grid-mobile-columns": String(e.mobileColumns),
+        "--responsive-info-grid-gap": e.gap
+      })
+    }, [
+      n(t.$slots, "default", {}, void 0, !0)
+    ], 4));
+  }
+});
+const R = /* @__PURE__ */ c(u, [["__scopeId", "data-v-85b5413b"]]), p = { class: "responsive-info-grid-item__title" }, _ = { class: "responsive-info-grid-item__content" }, f = /* @__PURE__ */ l({
+  __name: "RhResponsiveInfoGridItem",
+  props: {
+    title: { default: "" },
+    content: { default: "" },
+    span: { default: 1 }
+  },
+  setup(e) {
+    return (t, m) => (r(), d("div", {
+      class: "responsive-info-grid-item",
+      style: a({ gridColumn: e.span > 1 ? `span ${e.span}` : void 0 })
+    }, [
+      o("div", p, [
+        n(t.$slots, "title", {}, () => [
+          s(i(e.title), 1)
+        ], !0)
+      ]),
+      o("div", _, [
+        n(t.$slots, "content", {}, () => [
+          s(i(e.content), 1)
+        ], !0)
+      ])
+    ], 4));
+  }
+});
+const I = /* @__PURE__ */ c(f, [["__scopeId", "data-v-67645283"]]);
+export {
+  R as RhResponsiveInfoGrid,
+  I as RhResponsiveInfoGridItem
+};

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-b6caa4d9]{position:relative;display:inline-flex;align-items:center}.rh-data-center__trigger[data-v-b6caa4d9]{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-b6caa4d9]:hover,.rh-data-center__trigger.is-active[data-v-b6caa4d9]{background:rgba(0,130,138,.08);color:var(--rh-ui-data-center-primary)}.rh-data-center__icon[data-v-b6caa4d9]{width:22px;margin-right:5px}.rh-data-center__popover[data-v-b6caa4d9]{position:fixed;z-index:3000;box-sizing:border-box}
+: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-b6caa4d9]{position:relative;display:inline-flex;align-items:center}.rh-data-center__trigger[data-v-b6caa4d9]{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-b6caa4d9]:hover,.rh-data-center__trigger.is-active[data-v-b6caa4d9]{background:rgba(0,130,138,.08);color:var(--rh-ui-data-center-primary)}.rh-data-center__icon[data-v-b6caa4d9]{width:22px;margin-right:5px}.rh-data-center__popover[data-v-b6caa4d9]{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,47 +1,53 @@
-{
-  "name": "rhjy-ui",
-  "version": "0.1.0",
-  "description": "Vue 3 and Element Plus business UI components",
-  "type": "module",
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org"
-  },
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    },
-    "./data-center": {
-      "types": "./dist/data-center/index.d.ts",
-      "import": "./dist/data-center/index.js",
-      "require": "./dist/data-center/index.cjs"
-    },
-    "./style.css": "./dist/style.css"
-  },
-  "scripts": {
-    "typecheck": "tsc --noEmit",
-    "package": "vite build",
-    "pack:check": "npm pack --dry-run"
-  },
-  "peerDependencies": {
-    "@element-plus/icons-vue": "^2.3.2",
-    "element-plus": "^2.14.0",
-    "vue": "^3.5.0"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^4.1.0",
-    "sass": "^1.63.6",
-    "typescript": "^5.0.2",
-    "vite": "^4.3.9",
-    "vite-plugin-dts": "^3.8.3"
-  }
-}
+{
+  "name": "rhjy-ui",
+  "version": "0.2.0",
+  "description": "Vue 3 and Element Plus business UI components",
+  "type": "module",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "src/responsive-info-grid/README.md"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./data-center": {
+      "types": "./dist/data-center/index.d.ts",
+      "import": "./dist/data-center/index.js",
+      "require": "./dist/data-center/index.cjs"
+    },
+    "./responsive-info-grid": {
+      "types": "./dist/responsive-info-grid/index.d.ts",
+      "import": "./dist/responsive-info-grid/index.js",
+      "require": "./dist/responsive-info-grid/index.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "package": "vite build",
+    "pack:check": "npm pack --dry-run"
+  },
+  "peerDependencies": {
+    "@element-plus/icons-vue": "^2.3.2",
+    "element-plus": "^2.14.0",
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.1.0",
+    "sass": "^1.63.6",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.9",
+    "vite-plugin-dts": "^3.8.3"
+  }
+}

package/src/responsive-info-grid/README.md

@@ -0,0 +1,137 @@
+# Responsive Info Grid
+
+Responsive Info Grid 用于按响应式网格展示标题与内容组成的信息项，适合详情页、概览卡片和只读表单等场景。组件包含布局容器 `RhResponsiveInfoGrid` 和信息项 `RhResponsiveInfoGridItem`。
+
+请在应用入口引入一次组件库样式：
+
+```ts
+import 'rhjy-ui/style.css'
+```
+
+## 导入方式
+
+从主入口导入：
+
+```ts
+import {
+  RhResponsiveInfoGrid,
+  RhResponsiveInfoGridItem,
+} from 'rhjy-ui'
+```
+
+也可以从 Responsive Info Grid 子入口导入：
+
+```ts
+import {
+  RhResponsiveInfoGrid,
+  RhResponsiveInfoGridItem,
+} from 'rhjy-ui/responsive-info-grid'
+```
+
+两种方式提供相同的组件，可根据项目的导入规范选择。
+
+## RhResponsiveInfoGrid
+
+`RhResponsiveInfoGrid` 负责定义网格列数和间距。
+
+### Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `columns` | `number` | `4` | 宽度大于 1200px 时的列数 |
+| `tabletColumns` | `number` | `2` | 宽度不大于 1200px 且大于 768px 时的列数 |
+| `mobileColumns` | `number` | `1` | 宽度不大于 768px 时的列数 |
+| `gap` | `string` | `'15px 15px'` | CSS Grid 的 `gap` 值，可同时设置行间距和列间距 |
+
+### 插槽
+
+| 插槽 | 说明 |
+| --- | --- |
+| `default` | 网格内容，通常放置一个或多个 `RhResponsiveInfoGridItem` |
+
+### 响应式断点
+
+组件根据视口宽度切换列数：
+
+| 视口宽度 | 使用的属性 |
+| --- | --- |
+| 大于 1200px | `columns` |
+| 不大于 1200px 且大于 768px | `tabletColumns` |
+| 不大于 768px | `mobileColumns` |
+
+## RhResponsiveInfoGridItem
+
+`RhResponsiveInfoGridItem` 展示一组标题和内容，并可横跨多列。
+
+### Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `title` | `string` | `''` | 标题文字；提供 `title` 插槽时作为后备内容 |
+| `content` | `string \| number` | `''` | 内容文字或数字；提供 `content` 插槽时作为后备内容 |
+| `span` | `number` | `1` | 大于 `1` 时横跨指定列数；不大于 `1` 时占一列 |
+
+### 插槽
+
+| 插槽 | 说明 |
+| --- | --- |
+| `title` | 自定义标题区域；未提供时显示 `title` 属性 |
+| `content` | 自定义内容区域；未提供时显示 `content` 属性 |
+
+在视口宽度不大于 768px 时，每个信息项都会强制占一列，`span` 不再横跨多列，以避免移动端内容溢出。
+
+## 基础文字内容
+
+```vue
+<script setup lang="ts">
+import {
+  RhResponsiveInfoGrid,
+  RhResponsiveInfoGridItem,
+} from 'rhjy-ui'
+import 'rhjy-ui/style.css'
+</script>
+
+<template>
+  <RhResponsiveInfoGrid :columns="3" :tablet-columns="2" :mobile-columns="1">
+    <RhResponsiveInfoGridItem title="项目名称：" content="智慧园区" />
+    <RhResponsiveInfoGridItem title="负责人：" content="张三" />
+    <RhResponsiveInfoGridItem title="设备数量：" :content="128" />
+    <RhResponsiveInfoGridItem title="项目说明：" content="覆盖园区全部楼栋" :span="2" />
+  </RhResponsiveInfoGrid>
+</template>
+```
+
+## 自定义插槽
+
+```vue
+<script setup lang="ts">
+import { ElTag } from 'element-plus'
+import {
+  RhResponsiveInfoGrid,
+  RhResponsiveInfoGridItem,
+} from 'rhjy-ui/responsive-info-grid'
+import 'rhjy-ui/style.css'
+</script>
+
+<template>
+  <RhResponsiveInfoGrid gap="20px 24px">
+    <RhResponsiveInfoGridItem>
+      <template #title>
+        <strong>运行状态：</strong>
+      </template>
+      <template #content>
+        <ElTag type="success">正常</ElTag>
+      </template>
+    </RhResponsiveInfoGridItem>
+
+    <RhResponsiveInfoGridItem :span="2">
+      <template #title>
+        <strong>最近更新：</strong>
+      </template>
+      <template #content>
+        <time datetime="2026-09-09T10:30:00+08:00">2026-09-09 10:30</time>
+      </template>
+    </RhResponsiveInfoGridItem>
+  </RhResponsiveInfoGrid>
+</template>
+```