rhjy-ui 0.1.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +133 -109
- package/dist/_plugin-vue_export-helper-dad06003.js +9 -0
- package/dist/_plugin-vue_export-helper-f246444f.cjs +1 -0
- package/dist/data-center/index.cjs +1 -1
- package/dist/data-center/index.js +147 -151
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +8 -4
- package/dist/responsive-info-grid/RhResponsiveInfoGrid.vue.d.ts +53 -0
- package/dist/responsive-info-grid/RhResponsiveInfoGridItem.vue.d.ts +49 -0
- package/dist/responsive-info-grid/index.cjs +1 -0
- package/dist/responsive-info-grid/index.d.ts +2 -0
- package/dist/responsive-info-grid/index.js +54 -0
- package/dist/style.css +1 -1
- package/package.json +53 -47
- package/src/responsive-info-grid/README.md +137 -0
package/README.md
CHANGED
|
@@ -1,109 +1,133 @@
|
|
|
1
|
-
# rhjy-ui
|
|
2
|
-
|
|
3
|
-
`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.
|
|
4
|
-
|
|
5
|
-
## Install
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
pnpm add rhjy-ui vue element-plus @element-plus/icons-vue
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
Import the package stylesheet once in the application entrypoint:
|
|
12
|
-
|
|
13
|
-
```ts
|
|
14
|
-
import 'rhjy-ui/style.css'
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
##
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
```vue
|
|
22
|
-
<script setup lang="ts">
|
|
23
|
-
import {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
</
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
1
|
+
# rhjy-ui
|
|
2
|
+
|
|
3
|
+
`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.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm add rhjy-ui vue element-plus @element-plus/icons-vue
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Import the package stylesheet once in the application entrypoint:
|
|
12
|
+
|
|
13
|
+
```ts
|
|
14
|
+
import 'rhjy-ui/style.css'
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Responsive Info Grid
|
|
18
|
+
|
|
19
|
+
Responsive Info Grid arranges title-content pairs in a configurable grid and switches column counts at the 1200px and 768px breakpoints.
|
|
20
|
+
|
|
21
|
+
```vue
|
|
22
|
+
<script setup lang="ts">
|
|
23
|
+
import {
|
|
24
|
+
RhResponsiveInfoGrid,
|
|
25
|
+
RhResponsiveInfoGridItem,
|
|
26
|
+
} from 'rhjy-ui'
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<template>
|
|
30
|
+
<RhResponsiveInfoGrid>
|
|
31
|
+
<RhResponsiveInfoGridItem title="Project: " content="Smart Campus" />
|
|
32
|
+
<RhResponsiveInfoGridItem title="Owner: " content="Operations Team" />
|
|
33
|
+
<RhResponsiveInfoGridItem title="Devices: " :content="128" />
|
|
34
|
+
<RhResponsiveInfoGridItem title="Summary: " content="All systems operational" :span="2" />
|
|
35
|
+
</RhResponsiveInfoGrid>
|
|
36
|
+
</template>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
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.
|
|
40
|
+
|
|
41
|
+
## Data center panel
|
|
42
|
+
|
|
43
|
+
`rhjy-ui` never receives an API URL. Each application supplies a `loadTasks` function and converts its own response into the standard task model.
|
|
44
|
+
|
|
45
|
+
```vue
|
|
46
|
+
<script setup lang="ts">
|
|
47
|
+
import { RhDataCenter } from 'rhjy-ui'
|
|
48
|
+
import type {
|
|
49
|
+
RhDataCenterCategory,
|
|
50
|
+
RhDataCenterLoadTasks,
|
|
51
|
+
} from 'rhjy-ui/data-center'
|
|
52
|
+
|
|
53
|
+
const categories: RhDataCenterCategory[] = [
|
|
54
|
+
{ key: 'all', label: '全部任务' },
|
|
55
|
+
{ key: 'generate', label: '数据生成' },
|
|
56
|
+
{ key: 'import', label: '数据导入' },
|
|
57
|
+
{ key: 'export', label: '数据导出' },
|
|
58
|
+
]
|
|
59
|
+
|
|
60
|
+
const loadTasks: RhDataCenterLoadTasks = async ({ category }) => {
|
|
61
|
+
const response = await requestTaskList({
|
|
62
|
+
taskType: category.key === 'all' ? undefined : category.key,
|
|
63
|
+
})
|
|
64
|
+
|
|
65
|
+
return {
|
|
66
|
+
items: response.list,
|
|
67
|
+
total: response.total,
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
const handleTaskAction = ({ action, task }) => {
|
|
72
|
+
if (action === 'download') {
|
|
73
|
+
window.open(task.raw.fileUrl)
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
</script>
|
|
77
|
+
|
|
78
|
+
<template>
|
|
79
|
+
<RhDataCenter
|
|
80
|
+
:categories="categories"
|
|
81
|
+
:load-tasks="loadTasks"
|
|
82
|
+
@task-action="handleTaskAction"
|
|
83
|
+
/>
|
|
84
|
+
</template>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
The “全部任务” rule is application-owned. It may omit `taskType`, pass a fixed value, or combine multiple requests without changing the component.
|
|
88
|
+
|
|
89
|
+
## Task tip flow
|
|
90
|
+
|
|
91
|
+
Use `useRhDataCenter` after a page successfully creates a background task:
|
|
92
|
+
|
|
93
|
+
```vue
|
|
94
|
+
<script setup lang="ts">
|
|
95
|
+
import { RhDataCenterTip, useRhDataCenter } from 'rhjy-ui'
|
|
96
|
+
|
|
97
|
+
const { tipVisible, tipConfig, showTip } = useRhDataCenter()
|
|
98
|
+
|
|
99
|
+
const startExport = async () => {
|
|
100
|
+
const result = await createExportTask()
|
|
101
|
+
showTip({
|
|
102
|
+
type: 'export',
|
|
103
|
+
minutes: Number(result.minutes),
|
|
104
|
+
title: '导出文件生成中,大概需要',
|
|
105
|
+
content: '现在你可关闭弹框,去做其他事情了。',
|
|
106
|
+
})
|
|
107
|
+
}
|
|
108
|
+
</script>
|
|
109
|
+
|
|
110
|
+
<template>
|
|
111
|
+
<RhDataCenterTip v-model="tipVisible" v-bind="tipConfig" />
|
|
112
|
+
</template>
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
## Standard task model
|
|
116
|
+
|
|
117
|
+
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.
|
|
118
|
+
|
|
119
|
+
## Styling
|
|
120
|
+
|
|
121
|
+
Override CSS variables at the application root when needed:
|
|
122
|
+
|
|
123
|
+
```css
|
|
124
|
+
:root {
|
|
125
|
+
--rh-ui-data-center-primary: #00828a;
|
|
126
|
+
--rh-ui-data-center-panel-width: 606px;
|
|
127
|
+
--rh-ui-data-center-panel-height: 500px;
|
|
128
|
+
}
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
## Releases
|
|
132
|
+
|
|
133
|
+
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.
|
|
@@ -0,0 +1 @@
|
|
|
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;
|
|
@@ -1 +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;
|
|
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"},$=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({}),C=e.ref({}),u=e.computed(()=>i.categories.find(a=>a.key===c.value)||i.categories[0]),E=e.computed(()=>{var a;return String(((a=u.value)==null?void 0:a.key)??"")}),_=e.computed(()=>h.value[E.value]),b=e.computed(()=>p.value[E.value]===!0),B=e.computed(()=>k.value[E.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(C.value[n]&&!a)return;C.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||E.value!==n)return;h.value[n]=g}catch(g){if(y.value[n]!==l||E.value!==n)return;k.value[n]=g,d("error",g,s)}finally{y.value[n]===l&&(p.value[n]=!1,C.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,[b.value&&!_.value?(e.openBlock(),e.createBlock($,{key:0,text:"加载中..."})):B.value&&!_.value?e.renderSlot(a.$slots,"error",{key:1,error:B.value,retry:V},()=>[e.createVNode($,{text:"任务加载失败",retryable:!0,onRetry:V})]):(n=_.value)!=null&&n.items.length?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:2},e.renderList(_.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:_.value,category:u.value},()=>{var l;return[t.showTotal?(e.openBlock(),e.createElementBlock("div",se,[e.createElementVNode("span",null,e.toDisplayString(((l=_.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(),C=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),_=r=>typeof r=="number"?`${r}px`:r,b=r=>typeof r=="number"?r:Number.parseFloat(r)||0,B=()=>{const r=c.value,f=h.value;if(!r||!f)return;const m=r.getBoundingClientRect(),D=f.offsetWidth||b(o.width),x=b(o.panelRight),T=8,A=m.right-D-x,P=Math.min(Math.max(T,A),Math.max(T,window.innerWidth-D-T)),z=Math.min(m.bottom+8,Math.max(T,window.innerHeight-f.offsetHeight-T));k.value={top:`${z}px`,left:`${P}px`,width:_(o.width),"--rh-ui-data-center-panel-height":_(o.panelHeight)}},R=()=>{C.value||(C.value=!0,window.addEventListener("resize",B),window.addEventListener("scroll",B,!0))},V=()=>{C.value&&(C.value=!1,window.removeEventListener("resize",B),window.removeEventListener("scroll",B,!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(),B(),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}])},[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: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-94eef479"]]),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;
|