@someray-ui/components 0.0.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 +67 -0
- package/dist/components/SrAppHeader.vue.d.ts +119 -0
- package/dist/components/SrResourceTree.vue.d.ts +33 -0
- package/dist/components/SrVideoWall.vue.d.ts +21 -0
- package/dist/components/headerConfig.d.ts +21 -0
- package/dist/index.d.ts +12 -0
- package/dist/sr-ui.css +1 -0
- package/dist/sr-ui.js +492 -0
- package/package.json +47 -0
package/README.md
ADDED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
# @someray-ui/components
|
|
2
|
+
|
|
3
|
+
Someray 内部 Vue3 通用组件库。当前导出:`SrAppHeader`、`SrResourceTree`、`SrVideoWall`,
|
|
4
|
+
以及顶栏类型与默认配置(`NavItem` / `MenuItem` / `Weather` / `DEFAULT_MENUS` / `DEFAULT_USER_MENUS`)。
|
|
5
|
+
|
|
6
|
+
## 依赖(peer,由你的工程提供)
|
|
7
|
+
|
|
8
|
+
- `vue` ^3.4、`vue-router` ^4.3
|
|
9
|
+
- `@arco-design/web-vue` ^2.58(需 `app.use(ArcoVue)`、`app.use(ArcoVueIcon)`)
|
|
10
|
+
- `@arco-themes/vue-someray-light` ^0.0.2(提供底层设计令牌 `--primary-*` 等)
|
|
11
|
+
|
|
12
|
+
## 安装
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install @someray-ui/components
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## 接入(main.ts)
|
|
19
|
+
|
|
20
|
+
```ts
|
|
21
|
+
import { createApp } from 'vue'
|
|
22
|
+
import ArcoVue from '@arco-design/web-vue'
|
|
23
|
+
import ArcoVueIcon from '@arco-design/web-vue/es/icon'
|
|
24
|
+
import '@arco-themes/vue-someray-light/css/arco.css' // 1) someray 主题令牌
|
|
25
|
+
import '@someray-ui/components/style.css' // 2) 本库样式 + 语义令牌
|
|
26
|
+
import SrUI from '@someray-ui/components'
|
|
27
|
+
|
|
28
|
+
const app = createApp(App)
|
|
29
|
+
app.use(ArcoVue)
|
|
30
|
+
app.use(ArcoVueIcon)
|
|
31
|
+
app.use(router) // SrAppHeader 用到 <router-link>
|
|
32
|
+
app.use(SrUI) // 注册 SrAppHeader / SrResourceTree / SrVideoWall
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
> 样式加载顺序:someray 主题 → 本库 style.css(语义令牌映射到主题令牌)。
|
|
36
|
+
|
|
37
|
+
## 用法
|
|
38
|
+
|
|
39
|
+
```vue
|
|
40
|
+
<sr-app-header
|
|
41
|
+
:title="'某某平台'"
|
|
42
|
+
:menus="[{ key:'home', label:'首页', to:'/home', icon:'icon-home' }]"
|
|
43
|
+
:bell-count="5"
|
|
44
|
+
:user-menus="[{ key:'profile', label:'个人中心' }, { divider:true }, { key:'logout', label:'退出登录', danger:true }]"
|
|
45
|
+
@menu-select="onMenu"
|
|
46
|
+
>
|
|
47
|
+
<template #bell> …告警列表… </template>
|
|
48
|
+
</sr-app-header>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
也可用 PascalCase 标签 `<SrAppHeader>`,等价。
|
|
52
|
+
|
|
53
|
+
### SrAppHeader 主要 props / slots / events
|
|
54
|
+
|
|
55
|
+
- props:`logo` `title` `subtitle` `menus` `activeKey` `showWeather` `weather` `showDivider` `showClock` `showBell` `bellCount` `userName` `userMenus`
|
|
56
|
+
- slots:`#bell`(铃铛弹窗内容)、`#brand`(整体替换左侧品牌)
|
|
57
|
+
- events:`@menu-select(key)`、`@bell-click`、`@nav-select(item)`
|
|
58
|
+
|
|
59
|
+
> 菜单/用户菜单的 `icon` 可传 Arco 图标名(`'icon-home'`)或原始 SVG 字符串(`'<svg…>'`)。
|
|
60
|
+
> 本库已去除对 `/assets` 的硬依赖:logo 经 `logo` prop 或 `#brand` 插槽提供,"更多"按钮为内联图标。
|
|
61
|
+
|
|
62
|
+
## 构建
|
|
63
|
+
|
|
64
|
+
```bash
|
|
65
|
+
npm install
|
|
66
|
+
npm run build # 产出 dist/sr-ui.js、dist/sr-ui.css、dist/*.d.ts
|
|
67
|
+
```
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import { NavItem, MenuItem, Weather } from './headerConfig';
|
|
2
|
+
|
|
3
|
+
declare function __VLS_template(): {
|
|
4
|
+
brand?(_: {}): any;
|
|
5
|
+
bell?(_: {}): any;
|
|
6
|
+
};
|
|
7
|
+
declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
8
|
+
logo?: string;
|
|
9
|
+
title?: string;
|
|
10
|
+
subtitle?: string;
|
|
11
|
+
menus?: NavItem[];
|
|
12
|
+
activeKey?: string | number;
|
|
13
|
+
showWeather?: boolean;
|
|
14
|
+
weather?: Weather;
|
|
15
|
+
showDivider?: boolean;
|
|
16
|
+
showClock?: boolean;
|
|
17
|
+
showBell?: boolean;
|
|
18
|
+
bellCount?: number;
|
|
19
|
+
userName?: string;
|
|
20
|
+
userMenus?: MenuItem[];
|
|
21
|
+
}>, {
|
|
22
|
+
logo: string;
|
|
23
|
+
title: string;
|
|
24
|
+
subtitle: string;
|
|
25
|
+
menus: () => NavItem[];
|
|
26
|
+
activeKey: undefined;
|
|
27
|
+
showWeather: boolean;
|
|
28
|
+
weather: () => {
|
|
29
|
+
temp: string;
|
|
30
|
+
condition: string;
|
|
31
|
+
windDir: string;
|
|
32
|
+
windLevel: string;
|
|
33
|
+
};
|
|
34
|
+
showDivider: boolean;
|
|
35
|
+
showClock: boolean;
|
|
36
|
+
showBell: boolean;
|
|
37
|
+
bellCount: number;
|
|
38
|
+
userName: string;
|
|
39
|
+
userMenus: () => MenuItem[];
|
|
40
|
+
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
41
|
+
"nav-select": (item: NavItem) => void;
|
|
42
|
+
"bell-click": () => void;
|
|
43
|
+
"menu-select": (key: string) => void;
|
|
44
|
+
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
45
|
+
logo?: string;
|
|
46
|
+
title?: string;
|
|
47
|
+
subtitle?: string;
|
|
48
|
+
menus?: NavItem[];
|
|
49
|
+
activeKey?: string | number;
|
|
50
|
+
showWeather?: boolean;
|
|
51
|
+
weather?: Weather;
|
|
52
|
+
showDivider?: boolean;
|
|
53
|
+
showClock?: boolean;
|
|
54
|
+
showBell?: boolean;
|
|
55
|
+
bellCount?: number;
|
|
56
|
+
userName?: string;
|
|
57
|
+
userMenus?: MenuItem[];
|
|
58
|
+
}>, {
|
|
59
|
+
logo: string;
|
|
60
|
+
title: string;
|
|
61
|
+
subtitle: string;
|
|
62
|
+
menus: () => NavItem[];
|
|
63
|
+
activeKey: undefined;
|
|
64
|
+
showWeather: boolean;
|
|
65
|
+
weather: () => {
|
|
66
|
+
temp: string;
|
|
67
|
+
condition: string;
|
|
68
|
+
windDir: string;
|
|
69
|
+
windLevel: string;
|
|
70
|
+
};
|
|
71
|
+
showDivider: boolean;
|
|
72
|
+
showClock: boolean;
|
|
73
|
+
showBell: boolean;
|
|
74
|
+
bellCount: number;
|
|
75
|
+
userName: string;
|
|
76
|
+
userMenus: () => MenuItem[];
|
|
77
|
+
}>>> & Readonly<{
|
|
78
|
+
"onNav-select"?: ((item: NavItem) => any) | undefined;
|
|
79
|
+
"onBell-click"?: (() => any) | undefined;
|
|
80
|
+
"onMenu-select"?: ((key: string) => any) | undefined;
|
|
81
|
+
}>, {
|
|
82
|
+
logo: string;
|
|
83
|
+
title: string;
|
|
84
|
+
subtitle: string;
|
|
85
|
+
menus: NavItem[];
|
|
86
|
+
activeKey: string | number;
|
|
87
|
+
showWeather: boolean;
|
|
88
|
+
weather: Weather;
|
|
89
|
+
showDivider: boolean;
|
|
90
|
+
showClock: boolean;
|
|
91
|
+
showBell: boolean;
|
|
92
|
+
bellCount: number;
|
|
93
|
+
userName: string;
|
|
94
|
+
userMenus: MenuItem[];
|
|
95
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
96
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
|
|
97
|
+
export default _default;
|
|
98
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
99
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
100
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
101
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
102
|
+
} : {
|
|
103
|
+
type: import('vue').PropType<T[K]>;
|
|
104
|
+
required: true;
|
|
105
|
+
};
|
|
106
|
+
};
|
|
107
|
+
type __VLS_WithDefaults<P, D> = {
|
|
108
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
109
|
+
default: D[K];
|
|
110
|
+
}> : P[K];
|
|
111
|
+
};
|
|
112
|
+
type __VLS_Prettify<T> = {
|
|
113
|
+
[K in keyof T]: T[K];
|
|
114
|
+
} & {};
|
|
115
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
116
|
+
new (): {
|
|
117
|
+
$slots: S;
|
|
118
|
+
};
|
|
119
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
2
|
+
showPtz?: boolean;
|
|
3
|
+
}>, {
|
|
4
|
+
showPtz: boolean;
|
|
5
|
+
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
6
|
+
select: (name: string) => void;
|
|
7
|
+
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
8
|
+
showPtz?: boolean;
|
|
9
|
+
}>, {
|
|
10
|
+
showPtz: boolean;
|
|
11
|
+
}>>> & Readonly<{
|
|
12
|
+
onSelect?: ((name: string) => any) | undefined;
|
|
13
|
+
}>, {
|
|
14
|
+
showPtz: boolean;
|
|
15
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
16
|
+
export default _default;
|
|
17
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
18
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
19
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
20
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
21
|
+
} : {
|
|
22
|
+
type: import('vue').PropType<T[K]>;
|
|
23
|
+
required: true;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
type __VLS_WithDefaults<P, D> = {
|
|
27
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
28
|
+
default: D[K];
|
|
29
|
+
}> : P[K];
|
|
30
|
+
};
|
|
31
|
+
type __VLS_Prettify<T> = {
|
|
32
|
+
[K in keyof T]: T[K];
|
|
33
|
+
} & {};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
2
|
+
count: number;
|
|
3
|
+
active: number;
|
|
4
|
+
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
5
|
+
"update:active": (i: number) => void;
|
|
6
|
+
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
7
|
+
count: number;
|
|
8
|
+
active: number;
|
|
9
|
+
}>>> & Readonly<{
|
|
10
|
+
"onUpdate:active"?: ((i: number) => any) | undefined;
|
|
11
|
+
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
12
|
+
export default _default;
|
|
13
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
14
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
15
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
16
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
17
|
+
} : {
|
|
18
|
+
type: import('vue').PropType<T[K]>;
|
|
19
|
+
required: true;
|
|
20
|
+
};
|
|
21
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export interface NavItem {
|
|
2
|
+
key?: string | number;
|
|
3
|
+
label: string;
|
|
4
|
+
icon?: string;
|
|
5
|
+
to?: string;
|
|
6
|
+
}
|
|
7
|
+
export interface MenuItem {
|
|
8
|
+
key?: string;
|
|
9
|
+
label?: string;
|
|
10
|
+
icon?: string;
|
|
11
|
+
danger?: boolean;
|
|
12
|
+
divider?: boolean;
|
|
13
|
+
}
|
|
14
|
+
export interface Weather {
|
|
15
|
+
temp?: string;
|
|
16
|
+
condition?: string;
|
|
17
|
+
windDir?: string;
|
|
18
|
+
windLevel?: string;
|
|
19
|
+
}
|
|
20
|
+
export declare const DEFAULT_MENUS: NavItem[];
|
|
21
|
+
export declare const DEFAULT_USER_MENUS: MenuItem[];
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { App } from 'vue';
|
|
2
|
+
import { default as SrAppHeader } from './components/SrAppHeader.vue';
|
|
3
|
+
import { default as SrResourceTree } from './components/SrResourceTree.vue';
|
|
4
|
+
import { default as SrVideoWall } from './components/SrVideoWall.vue';
|
|
5
|
+
|
|
6
|
+
export { SrAppHeader, SrResourceTree, SrVideoWall };
|
|
7
|
+
export * from './components/headerConfig';
|
|
8
|
+
/** Vue 插件:app.use(SrUI) 一次性注册全部 Sr* 组件 */
|
|
9
|
+
declare const _default: {
|
|
10
|
+
install(app: App): void;
|
|
11
|
+
};
|
|
12
|
+
export default _default;
|
package/dist/sr-ui.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
body{--app: var(--color-fill-1);--panel: var(--color-bg-1);--panel2: var(--color-fill-2);--panel3: var(--color-fill-1);--line: var(--color-border-2);--line2: var(--color-border-1);--txt: var(--color-text-1);--txt2: var(--color-text-2);--sub: var(--color-text-3);--mute: var(--color-text-4);--accent: rgb(var(--primary-6));--accent-soft: rgb(var(--primary-1));--accent-deep: rgb(var(--primary-7));--success: rgb(var(--green-6));--warning: rgb(var(--orange-6));--danger: rgb(var(--red-6));--topbar: rgb(var(--primary-6));--video: var(--color-fill-2);--video-line: var(--color-border-1);--scroll: var(--color-border-3);--header-h: 76px;--header-pad: 28px;--sider-w: 256px;--rpanel-w: 272px;--ops-side-w: 200px;--nav-min-w: 240px}.cv6h[data-v-9d23d618]{flex:none;width:100%;height:var(--header-h);z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--header-pad);background:var(--topbar)}.cv6h__left[data-v-9d23d618]{flex:0 0 auto;display:flex;align-items:center;gap:12px}.cv6h__logo[data-v-9d23d618]{display:inline-flex;align-items:center;line-height:0}.cv6h__logo img[data-v-9d23d618]{display:block;height:32px;width:auto}.cv6h__brand[data-v-9d23d618]{display:flex;flex-direction:column;justify-content:center}.cv6h__title[data-v-9d23d618]{margin:0;font-size:26px;font-weight:700;letter-spacing:.04em;color:#fff;line-height:1.1;white-space:nowrap}.cv6h__sub[data-v-9d23d618]{margin:4px 0 0;font-size:8px;font-weight:400;letter-spacing:.2em;color:#ffffffbf;text-transform:uppercase;white-space:nowrap}.cv6h__nav[data-v-9d23d618]{flex:1 1 auto;display:flex;justify-content:center;align-items:center;min-width:var(--nav-min-w);overflow:hidden}.cv6h__navframe[data-v-9d23d618]{display:flex;align-items:center;gap:6px;flex:none}.cv6h__item[data-v-9d23d618]{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:7px 15px;border-radius:8px;background:transparent;color:#fff;font-size:14px;font-weight:500;line-height:1.6;letter-spacing:.02em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}.cv6h__item[data-v-9d23d618]:hover{background:#ffffff1a;color:#fff}.cv6h__item.router-link-active[data-v-9d23d618],.cv6h__item.is-active[data-v-9d23d618]{background:var(--accent-deep);color:#fff}.cv6h__ico[data-v-9d23d618]{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}.cv6h__ico[data-v-9d23d618] svg{display:block;width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.cv6h__ico[data-v-9d23d618] .pl{fill:currentColor;stroke:none}.cv6h__right[data-v-9d23d618]{flex:0 0 auto;display:flex;align-items:center;gap:14px}.cv6h__weather[data-v-9d23d618]{display:flex;align-items:center;gap:8px;color:#fff}.cv6h__wico svg[data-v-9d23d618]{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.cv6h__wtext[data-v-9d23d618]{display:flex;flex-direction:column;gap:2px;line-height:1.15}.cv6h__temp[data-v-9d23d618]{font-size:18px;color:#fff;white-space:nowrap}.cv6h__cond[data-v-9d23d618]{font-size:14px;color:#ffffffeb;white-space:nowrap}.cv6h__wind[data-v-9d23d618]{display:flex;flex-direction:column;gap:2px;line-height:1.15;color:#fff}.cv6h__wdir[data-v-9d23d618]{font-size:14px;color:#fff;white-space:nowrap}.cv6h__wlvl[data-v-9d23d618]{font-size:14px;color:#ffffffeb;white-space:nowrap}.cv6h__div[data-v-9d23d618]{width:1px;height:36px;background:#ffffff59;flex-shrink:0}.cv6h__clock[data-v-9d23d618]{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;color:#fff}.cv6h__time[data-v-9d23d618]{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;color:#fff;letter-spacing:.03em}.cv6h__date[data-v-9d23d618]{margin-top:2px;font-size:9px;color:#ffffffd9;letter-spacing:.03em}.cv6h__bellwrap[data-v-9d23d618]{position:relative;display:inline-flex;align-items:center}.cv6h__bell[data-v-9d23d618]{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}.cv6h__bell svg[data-v-9d23d618]{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.cv6h__bellwrap[data-v-9d23d618] .arco-badge-number,.cv6h__bellwrap[data-v-9d23d618] .arco-badge-text{min-width:20px;height:14px;padding:0 6px;color:var(--color-white);font-weight:500;font-size:10px;line-height:14px;background-color:rgb(var(--danger-6));box-shadow:0 0 0 2px var(--color-bg-2)}.cv6h__bellpop[data-v-9d23d618]{position:absolute;top:calc(100% + 12px);right:-8px;min-width:320px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 40px #0f2e592e;overflow:hidden;z-index:40}.cv6h__bell-empty[data-v-9d23d618]{padding:40px 16px;text-align:center;color:var(--mute);font-size:13px}.cv6h__tools[data-v-9d23d618]{position:relative;display:flex;align-items:center}.cv6h__menubtn[data-v-9d23d618]{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:transparent;cursor:pointer;border-radius:6px;transition:background .15s}.cv6h__menubtn[data-v-9d23d618]:hover{background:#ffffff1f}.cv6h__menubtn img[data-v-9d23d618]{display:block;width:24px;height:24px;object-fit:contain}.cv6h__menubtn svg[data-v-9d23d618]{width:30px;height:30px;fill:#fff}.cv6h__menu[data-v-9d23d618]{position:absolute;top:calc(100% + 10px);right:0;min-width:176px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px #0f2e5926;padding:6px;z-index:40}.cv6h__mhead[data-v-9d23d618]{padding:8px 12px 6px;font-size:12px;color:var(--sub)}.cv6h__msep[data-v-9d23d618]{height:1px;background:var(--line2);margin:5px 8px}.cv6h__mitem[data-v-9d23d618]{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:7px;font-size:13.5px;color:var(--txt2);cursor:pointer;white-space:nowrap}.cv6h__mitem[data-v-9d23d618]:hover{background:var(--accent-soft);color:var(--accent)}.cv6h__mitem.danger[data-v-9d23d618]{color:var(--danger)}.cv6h__mitem.danger[data-v-9d23d618]:hover{background:rgb(var(--red-1));color:var(--danger)}.cv6h__mico[data-v-9d23d618]{display:inline-flex}.cv6h__mico[data-v-9d23d618] svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.res[data-v-05bca26c]{flex:none;width:256px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.res-tabs[data-v-05bca26c]{flex:none;display:flex;border-bottom:1px solid var(--line)}.res-tabs a[data-v-05bca26c]{flex:1;text-align:center;padding:13px 0;font-size:13.5px;color:var(--sub);cursor:pointer;position:relative}.res-tabs a.active[data-v-05bca26c]{color:var(--accent);font-weight:600}.res-tabs a.active[data-v-05bca26c]:after{content:"";position:absolute;left:50%;bottom:-1px;transform:translate(-50%);width:26px;height:2px;border-radius:2px;background:var(--accent)}.res-pad[data-v-05bca26c]{padding:12px 12px 4px;display:flex;flex-direction:column;gap:10px}.res-listhead[data-v-05bca26c]{display:flex;align-items:center;padding:6px 12px 8px;font-size:13px;color:var(--sub)}.res-listhead b[data-v-05bca26c]{font-weight:600}.res-acts[data-v-05bca26c]{margin-left:auto;display:flex;gap:12px;color:var(--mute);font-size:15px}.res-acts[data-v-05bca26c] svg{cursor:pointer}.res-acts[data-v-05bca26c] svg:hover{color:var(--accent)}.res-tree[data-v-05bca26c]{flex:1;overflow-y:auto;padding:0 6px 8px}.res-cnt[data-v-05bca26c]{color:var(--mute);font-size:12px}.ptz[data-v-05bca26c]{flex:none;border-top:1px solid var(--line);padding:12px 14px 16px}.ptz-head[data-v-05bca26c]{display:flex;align-items:center;font-size:13px;color:var(--sub);margin-bottom:12px}.ptz-chev[data-v-05bca26c]{margin-left:auto}.joy[data-v-05bca26c]{width:120px;height:120px;margin:0 auto;border-radius:50%;background:var(--panel2);border:1px solid var(--line);position:relative;display:flex;align-items:center;justify-content:center}.joy[data-v-05bca26c]:before{content:"";position:absolute;top:14px;right:14px;bottom:14px;left:14px;border-radius:50%;border:1px dashed var(--line)}.joy .knob[data-v-05bca26c]{width:46px;height:46px;border-radius:50%;background:var(--panel);border:1px solid var(--line);box-shadow:0 2px 8px #1432641f}.joy .ar[data-v-05bca26c]{position:absolute;color:var(--mute);display:flex;cursor:pointer}.joy .ar[data-v-05bca26c]:hover{color:var(--accent)}.joy .up[data-v-05bca26c]{top:7px;left:50%;transform:translate(-50%)}.joy .dn[data-v-05bca26c]{bottom:7px;left:50%;transform:translate(-50%)}.joy .lf[data-v-05bca26c]{left:8px;top:50%;transform:translateY(-50%)}.joy .rt[data-v-05bca26c]{right:8px;top:50%;transform:translateY(-50%)}.speed[data-v-05bca26c]{margin-top:14px;font-size:12px;color:var(--sub);display:flex;align-items:center;gap:10px}.speed b[data-v-05bca26c]{color:var(--accent);font-weight:600}.zoom[data-v-05bca26c]{margin-top:12px;display:flex;gap:10px}.wall[data-v-6ebd5cbf]{width:100%;height:100%;display:grid;gap:0;background:var(--app)}.cell[data-v-6ebd5cbf]{background:var(--video);border:1px solid var(--video-line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--sub);position:relative;overflow:hidden;cursor:pointer}.cell.active[data-v-6ebd5cbf]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.nosrc[data-v-6ebd5cbf]{width:55%;max-width:170px;aspect-ratio:24 / 15;background:center / contain no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNDAgMTUwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj4KICA8cGF0aCBkPSJNIDMwIDgwIEwgMzIgODUgTCAzNyA4NyBMIDMyIDg5IEwgMzAgOTQgTCAyOCA4OSBMIDIzIDg3IEwgMjggODUgWiIgZmlsbD0iIzliYzFmZiIgb3BhY2l0eT0iMC42Ii8+CiAgPHBhdGggZD0iTSAxNzAgNTAgTCAxNzEuNSA1NCBMIDE3NS41IDU1LjUgTCAxNzEuNSA1NyBMIDE3MCA2MSBMIDE2OC41IDU3IEwgMTY0LjUgNTUuNSBMIDE2OC41IDU0IFoiIGZpbGw9IiM5YmMxZmYiIG9wYWNpdHk9IjAuNiIvPgoKICA8ZWxsaXBzZSBjeD0iOTAiIGN5PSIxMjUiIHJ4PSI0NSIgcnk9IjUiIGZpbGw9IiNkMmRhZjAiIG9wYWNpdHk9IjAuNCIgLz4KCiAgPGcgaWQ9ImNhbWVyYSI+CiAgICA8cGF0aCBkPSJNIDYwIDEyMCBDIDYwIDExNSwgMTIwIDExNSwgMTIwIDEyMCBaIiBmaWxsPSIjYTliYWQ2IiAvPgogICAgPHJlY3QgeD0iNjUiIHk9IjEyMCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjQiIHJ4PSIyIiBmaWxsPSIjOGNhMmM0IiAvPgogICAgPHJlY3QgeD0iODUiIHk9IjEwMCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjE2IiBmaWxsPSIjOGNhMmM0IiAvPgogICAgPGNpcmNsZSBjeD0iOTAiIGN5PSI2NSIgcj0iNDAiIGZpbGw9IiNjYmQ3ZWIiIC8+CiAgICA8Y2lyY2xlIGN4PSI5MCIgY3k9IjY1IiByPSIzMiIgZmlsbD0iIzRhNjE4NSIgLz4KICAgIDxjaXJjbGUgY3g9IjkwIiBjeT0iNjUiIHI9IjIwIiBmaWxsPSIjOWJjMWZmIiAvPgogICAgPGNpcmNsZSBjeD0iOTAiIGN5PSI2NSIgcj0iMTAiIGZpbGw9IiMxYzRjZGUiIC8+CiAgICA8Y2lyY2xlIGN4PSI4NyIgY3k9IjYyIiByPSI0IiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIwLjgiIC8+CiAgPC9nPgoKICA8ZyBpZD0iY2FibGUtYW5kLXBsdWciPgogICAgPHBhdGggZD0iTSAxMTUgMTIwIFEgMTQwIDEyMCwgMTUwIDk1IFQgMTk1IDk1IiBmaWxsPSJub25lIiBzdHJva2U9IiNhOWJhZDYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiAvPgogICAgPHJlY3QgeD0iMTk1IiB5PSI5MiIgd2lkdGg9IjYiIGhlaWdodD0iNiIgZmlsbD0iIzhjYTJjNCIgLz4KICAgIDxyZWN0IHg9IjIwMSIgeT0iODciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcng9IjIiIGZpbGw9IiNjYmQ3ZWIiIC8+CiAgICA8cmVjdCB4PSIyMTciIHk9IjkwIiB3aWR0aD0iNiIgaGVpZ2h0PSIzIiBmaWxsPSIjNjA3OTlmIiAvPgogICAgPHJlY3QgeD0iMjE3IiB5PSIxMDAiIHdpZHRoPSI2IiBoZWlnaHQ9IjMiIGZpbGw9IiM2MDc5OWYiIC8+CiAgPC9nPgoKICA8ZyBpZD0iZXJyb3Itc3RhdHVzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOTUsIDEwMCkiPgogICAgPGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjEyIiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIwLjMiLz4KICAgIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIxMSIgZmlsbD0iIzFjNGNkZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIiIC8+CiAgICA8Y2lyY2xlIGN4PSIwIiBjeT0iMCIgcj0iOCIgZmlsbD0iIzJmN2RmZiIgLz4KICAgIDxwYXRoIGQ9Ik0gLTQgLTQgTCA0IDQgTSA0IC00IEwgLTQgNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgLz4KICA8L2c+Cjwvc3ZnPgo=)}.cap[data-v-6ebd5cbf]{font-size:13px;color:var(--sub)}
|
package/dist/sr-ui.js
ADDED
|
@@ -0,0 +1,492 @@
|
|
|
1
|
+
import { defineComponent as R, ref as M, watch as X, onMounted as Z, onUnmounted as ee, resolveComponent as d, openBlock as o, createElementBlock as l, createElementVNode as e, renderSlot as P, createVNode as n, withCtx as u, createCommentVNode as p, toDisplayString as v, Fragment as B, renderList as E, createBlock as I, resolveDynamicComponent as U, normalizeClass as L, withModifiers as W, withDirectives as j, vShow as q, createTextVNode as C, computed as O, normalizeStyle as te } from "vue";
|
|
2
|
+
import { useRoute as se } from "vue-router";
|
|
3
|
+
const oe = [
|
|
4
|
+
{ key: "/home", label: "首页", to: "/home", icon: '<svg viewBox="0 0 24 24"><path d="M4 11l8-7 8 7"/><path d="M6 10v9h12v-9"/></svg>' },
|
|
5
|
+
{ key: "/live", label: "实时预览", to: "/live", icon: '<svg viewBox="0 0 24 24"><path class="pl" d="M8 5l11 7-11 7z"/></svg>' },
|
|
6
|
+
{ key: "/playback", label: "视频回放", to: "/playback", icon: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M12 8v4l3 2"/></svg>' },
|
|
7
|
+
{ key: "/ops", label: "运维管理", to: "/ops", icon: '<svg viewBox="0 0 24 24"><path d="M3 12h4l3 7 4-14 3 7h4"/></svg>' },
|
|
8
|
+
{ key: "/map", label: "地图模式", to: "/map", icon: '<svg viewBox="0 0 24 24"><path d="M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2z"/><path d="M9 4v14M15 6v14"/></svg>' }
|
|
9
|
+
], le = [
|
|
10
|
+
{ key: "profile", label: "个人中心", icon: '<svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 20c1.5-4 4.5-6 8-6s6.5 2 8 6"/></svg>' },
|
|
11
|
+
{ key: "theme", label: "切换主题", icon: '<svg viewBox="0 0 24 24"><path d="M4 9h13"/><path d="M14 6l3 3-3 3"/><path d="M20 15H7"/><path d="M10 12l-3 3 3 3"/></svg>' },
|
|
12
|
+
{ key: "system", label: "系统管理", icon: '<svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 20h8M12 17v3"/></svg>' },
|
|
13
|
+
{ divider: !0 },
|
|
14
|
+
{ key: "logout", label: "退出登录", danger: !0, icon: '<svg viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>' }
|
|
15
|
+
], ne = { class: "cv6h" }, ce = { class: "cv6h__left" }, ae = ["src"], ie = { class: "cv6h__brand" }, de = { class: "cv6h__title" }, re = {
|
|
16
|
+
key: 0,
|
|
17
|
+
class: "cv6h__sub"
|
|
18
|
+
}, ue = {
|
|
19
|
+
class: "cv6h__nav",
|
|
20
|
+
"aria-label": "主导航"
|
|
21
|
+
}, ve = { class: "cv6h__navframe" }, _e = ["innerHTML"], he = {
|
|
22
|
+
key: 1,
|
|
23
|
+
class: "cv6h__ico"
|
|
24
|
+
}, pe = { class: "cv6h__right" }, me = { class: "cv6h__weather" }, ke = { class: "cv6h__wtext" }, ge = { class: "cv6h__temp" }, ye = { class: "cv6h__cond" }, fe = {
|
|
25
|
+
key: 0,
|
|
26
|
+
class: "cv6h__div"
|
|
27
|
+
}, we = { class: "cv6h__wind" }, be = { class: "cv6h__wdir" }, xe = { class: "cv6h__wlvl" }, Me = {
|
|
28
|
+
key: 1,
|
|
29
|
+
class: "cv6h__div"
|
|
30
|
+
}, $e = {
|
|
31
|
+
key: 1,
|
|
32
|
+
class: "cv6h__clock"
|
|
33
|
+
}, Ce = { class: "cv6h__time" }, Be = { class: "cv6h__date" }, Se = { class: "cv6h__bellpop" }, ze = { class: "cv6h__menu" }, Ve = { class: "cv6h__mhead" }, De = {
|
|
34
|
+
key: 0,
|
|
35
|
+
class: "cv6h__msep"
|
|
36
|
+
}, Ee = ["onClick"], Le = ["innerHTML"], Ne = {
|
|
37
|
+
key: 1,
|
|
38
|
+
class: "cv6h__mico"
|
|
39
|
+
}, Te = /* @__PURE__ */ R({
|
|
40
|
+
__name: "SrAppHeader",
|
|
41
|
+
props: {
|
|
42
|
+
logo: { default: "/assets/interface.svg" },
|
|
43
|
+
title: { default: "视频汇聚平台 V3" },
|
|
44
|
+
subtitle: { default: "VIDEO CONVERGENCE PLATFORM" },
|
|
45
|
+
menus: { default: () => oe },
|
|
46
|
+
activeKey: { default: void 0 },
|
|
47
|
+
showWeather: { type: Boolean, default: !0 },
|
|
48
|
+
weather: { default: () => ({ temp: "26°C", condition: "多云", windDir: "东南风", windLevel: "3级" }) },
|
|
49
|
+
showDivider: { type: Boolean, default: !0 },
|
|
50
|
+
showClock: { type: Boolean, default: !0 },
|
|
51
|
+
showBell: { type: Boolean, default: !0 },
|
|
52
|
+
bellCount: { default: 0 },
|
|
53
|
+
userName: { default: "超级管理员(someray)" },
|
|
54
|
+
userMenus: { default: () => le }
|
|
55
|
+
},
|
|
56
|
+
emits: ["nav-select", "bell-click", "menu-select"],
|
|
57
|
+
setup(s, { emit: m }) {
|
|
58
|
+
const _ = m, w = (a) => !!a && /^\s*</.test(a), h = M(!1), k = M(!1), b = () => {
|
|
59
|
+
k.value = !1, h.value = !h.value, _("bell-click");
|
|
60
|
+
}, x = () => {
|
|
61
|
+
h.value = !1, k.value = !k.value;
|
|
62
|
+
}, i = (a) => {
|
|
63
|
+
k.value = !1, a.key && _("menu-select", a.key);
|
|
64
|
+
}, z = () => {
|
|
65
|
+
h.value = !1, k.value = !1;
|
|
66
|
+
}, D = M("--:--:--"), S = M("----");
|
|
67
|
+
let t;
|
|
68
|
+
const f = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], y = (a) => String(a).padStart(2, "0"), $ = () => {
|
|
69
|
+
const a = /* @__PURE__ */ new Date();
|
|
70
|
+
D.value = y(a.getHours()) + ":" + y(a.getMinutes()) + ":" + y(a.getSeconds()), S.value = a.getFullYear() + "-" + y(a.getMonth() + 1) + "-" + y(a.getDate()) + " " + f[a.getDay()];
|
|
71
|
+
}, N = se();
|
|
72
|
+
return X(() => N.fullPath, z), Z(() => {
|
|
73
|
+
$(), t = window.setInterval($, 1e3), document.addEventListener("click", z);
|
|
74
|
+
}), ee(() => {
|
|
75
|
+
t && clearInterval(t), document.removeEventListener("click", z);
|
|
76
|
+
}), (a, r) => {
|
|
77
|
+
const T = d("router-link"), A = d("a-badge");
|
|
78
|
+
return o(), l("header", ne, [
|
|
79
|
+
e("div", ce, [
|
|
80
|
+
P(a.$slots, "brand", {}, () => [
|
|
81
|
+
n(T, {
|
|
82
|
+
class: "cv6h__logo",
|
|
83
|
+
to: "/home",
|
|
84
|
+
"aria-label": "首页"
|
|
85
|
+
}, {
|
|
86
|
+
default: u(() => [
|
|
87
|
+
s.logo ? (o(), l("img", {
|
|
88
|
+
key: 0,
|
|
89
|
+
src: s.logo,
|
|
90
|
+
alt: ""
|
|
91
|
+
}, null, 8, ae)) : p("", !0)
|
|
92
|
+
]),
|
|
93
|
+
_: 1
|
|
94
|
+
}),
|
|
95
|
+
e("div", ie, [
|
|
96
|
+
e("h1", de, v(s.title), 1),
|
|
97
|
+
s.subtitle ? (o(), l("p", re, v(s.subtitle), 1)) : p("", !0)
|
|
98
|
+
])
|
|
99
|
+
], !0)
|
|
100
|
+
]),
|
|
101
|
+
e("nav", ue, [
|
|
102
|
+
e("div", ve, [
|
|
103
|
+
(o(!0), l(B, null, E(s.menus, (c, V) => (o(), I(U(c.to ? "router-link" : "a"), {
|
|
104
|
+
key: c.key ?? V,
|
|
105
|
+
class: L(["cv6h__item", { "is-active": s.activeKey != null && c.key === s.activeKey }]),
|
|
106
|
+
to: c.to,
|
|
107
|
+
onClick: (H) => _("nav-select", c)
|
|
108
|
+
}, {
|
|
109
|
+
default: u(() => [
|
|
110
|
+
w(c.icon) ? (o(), l("span", {
|
|
111
|
+
key: 0,
|
|
112
|
+
class: "cv6h__ico",
|
|
113
|
+
innerHTML: c.icon
|
|
114
|
+
}, null, 8, _e)) : c.icon ? (o(), l("span", he, [
|
|
115
|
+
(o(), I(U(c.icon)))
|
|
116
|
+
])) : p("", !0),
|
|
117
|
+
e("span", null, v(c.label), 1)
|
|
118
|
+
]),
|
|
119
|
+
_: 2
|
|
120
|
+
}, 1032, ["class", "to", "onClick"]))), 128))
|
|
121
|
+
])
|
|
122
|
+
]),
|
|
123
|
+
e("div", pe, [
|
|
124
|
+
s.showWeather ? (o(), l(B, { key: 0 }, [
|
|
125
|
+
e("div", me, [
|
|
126
|
+
r[2] || (r[2] = e("span", { class: "cv6h__wico" }, [
|
|
127
|
+
e("svg", { viewBox: "0 0 24 24" }, [
|
|
128
|
+
e("path", { d: "M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z" }),
|
|
129
|
+
e("circle", {
|
|
130
|
+
cx: "17",
|
|
131
|
+
cy: "8",
|
|
132
|
+
r: "2.5",
|
|
133
|
+
fill: "currentColor",
|
|
134
|
+
stroke: "none"
|
|
135
|
+
})
|
|
136
|
+
])
|
|
137
|
+
], -1)),
|
|
138
|
+
e("div", ke, [
|
|
139
|
+
e("span", ge, v(s.weather.temp), 1),
|
|
140
|
+
e("span", ye, v(s.weather.condition), 1)
|
|
141
|
+
])
|
|
142
|
+
]),
|
|
143
|
+
s.showDivider ? (o(), l("span", fe)) : p("", !0),
|
|
144
|
+
e("div", we, [
|
|
145
|
+
e("span", be, v(s.weather.windDir), 1),
|
|
146
|
+
e("span", xe, v(s.weather.windLevel), 1)
|
|
147
|
+
]),
|
|
148
|
+
s.showDivider ? (o(), l("span", Me)) : p("", !0)
|
|
149
|
+
], 64)) : p("", !0),
|
|
150
|
+
s.showClock ? (o(), l("div", $e, [
|
|
151
|
+
e("span", Ce, v(D.value), 1),
|
|
152
|
+
e("span", Be, v(S.value), 1)
|
|
153
|
+
])) : p("", !0),
|
|
154
|
+
s.showBell ? (o(), l("div", {
|
|
155
|
+
key: 2,
|
|
156
|
+
class: "cv6h__bellwrap",
|
|
157
|
+
onClick: r[0] || (r[0] = W(() => {
|
|
158
|
+
}, ["stop"]))
|
|
159
|
+
}, [
|
|
160
|
+
n(A, {
|
|
161
|
+
count: s.bellCount,
|
|
162
|
+
"max-count": 99
|
|
163
|
+
}, {
|
|
164
|
+
default: u(() => [
|
|
165
|
+
e("span", {
|
|
166
|
+
class: "cv6h__bell",
|
|
167
|
+
title: "告警",
|
|
168
|
+
onClick: b
|
|
169
|
+
}, [...r[3] || (r[3] = [
|
|
170
|
+
e("svg", { viewBox: "0 0 24 24" }, [
|
|
171
|
+
e("path", { d: "M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6" }),
|
|
172
|
+
e("path", { d: "M10 19a2 2 0 0 0 4 0" })
|
|
173
|
+
], -1)
|
|
174
|
+
])])
|
|
175
|
+
]),
|
|
176
|
+
_: 1
|
|
177
|
+
}, 8, ["count"]),
|
|
178
|
+
j(e("div", Se, [
|
|
179
|
+
P(a.$slots, "bell", {}, () => [
|
|
180
|
+
r[4] || (r[4] = e("div", { class: "cv6h__bell-empty" }, "暂无告警", -1))
|
|
181
|
+
], !0)
|
|
182
|
+
], 512), [
|
|
183
|
+
[q, h.value]
|
|
184
|
+
])
|
|
185
|
+
])) : p("", !0),
|
|
186
|
+
e("div", {
|
|
187
|
+
class: "cv6h__tools",
|
|
188
|
+
onClick: r[1] || (r[1] = W(() => {
|
|
189
|
+
}, ["stop"]))
|
|
190
|
+
}, [
|
|
191
|
+
e("button", {
|
|
192
|
+
class: "cv6h__menubtn",
|
|
193
|
+
"aria-label": "更多",
|
|
194
|
+
onClick: x
|
|
195
|
+
}, [...r[5] || (r[5] = [
|
|
196
|
+
e("svg", {
|
|
197
|
+
class: "cv6h__moreico",
|
|
198
|
+
viewBox: "0 0 24 24"
|
|
199
|
+
}, [
|
|
200
|
+
e("rect", {
|
|
201
|
+
x: "3",
|
|
202
|
+
y: "5",
|
|
203
|
+
width: "18",
|
|
204
|
+
height: "2.4",
|
|
205
|
+
rx: "1.2"
|
|
206
|
+
}),
|
|
207
|
+
e("rect", {
|
|
208
|
+
x: "3",
|
|
209
|
+
y: "10.8",
|
|
210
|
+
width: "18",
|
|
211
|
+
height: "2.4",
|
|
212
|
+
rx: "1.2"
|
|
213
|
+
}),
|
|
214
|
+
e("rect", {
|
|
215
|
+
x: "3",
|
|
216
|
+
y: "16.6",
|
|
217
|
+
width: "18",
|
|
218
|
+
height: "2.4",
|
|
219
|
+
rx: "1.2"
|
|
220
|
+
})
|
|
221
|
+
], -1)
|
|
222
|
+
])]),
|
|
223
|
+
j(e("div", ze, [
|
|
224
|
+
s.userName ? (o(), l(B, { key: 0 }, [
|
|
225
|
+
e("div", Ve, v(s.userName), 1),
|
|
226
|
+
r[6] || (r[6] = e("div", { class: "cv6h__msep" }, null, -1))
|
|
227
|
+
], 64)) : p("", !0),
|
|
228
|
+
(o(!0), l(B, null, E(s.userMenus, (c, V) => (o(), l(B, {
|
|
229
|
+
key: c.key ?? V
|
|
230
|
+
}, [
|
|
231
|
+
c.divider ? (o(), l("div", De)) : (o(), l("a", {
|
|
232
|
+
key: 1,
|
|
233
|
+
class: L(["cv6h__mitem", { danger: c.danger }]),
|
|
234
|
+
onClick: (H) => i(c)
|
|
235
|
+
}, [
|
|
236
|
+
w(c.icon) ? (o(), l("span", {
|
|
237
|
+
key: 0,
|
|
238
|
+
class: "cv6h__mico",
|
|
239
|
+
innerHTML: c.icon
|
|
240
|
+
}, null, 8, Le)) : c.icon ? (o(), l("span", Ne, [
|
|
241
|
+
(o(), I(U(c.icon)))
|
|
242
|
+
])) : p("", !0),
|
|
243
|
+
e("span", null, v(c.label), 1)
|
|
244
|
+
], 10, Ee))
|
|
245
|
+
], 64))), 128))
|
|
246
|
+
], 512), [
|
|
247
|
+
[q, k.value]
|
|
248
|
+
])
|
|
249
|
+
])
|
|
250
|
+
])
|
|
251
|
+
]);
|
|
252
|
+
};
|
|
253
|
+
}
|
|
254
|
+
}), F = (s, m) => {
|
|
255
|
+
const _ = s.__vccOpts || s;
|
|
256
|
+
for (const [w, h] of m)
|
|
257
|
+
_[w] = h;
|
|
258
|
+
return _;
|
|
259
|
+
}, Ae = /* @__PURE__ */ F(Te, [["__scopeId", "data-v-9d23d618"]]), He = { class: "res" }, Ie = { class: "res-tabs" }, Ue = ["onClick"], Oe = { class: "res-pad" }, Re = { class: "res-listhead" }, Fe = { class: "res-acts" }, Ke = { class: "res-tree" }, Pe = {
|
|
260
|
+
key: 0,
|
|
261
|
+
class: "res-cnt"
|
|
262
|
+
}, We = {
|
|
263
|
+
key: 0,
|
|
264
|
+
class: "ptz"
|
|
265
|
+
}, je = { class: "ptz-head" }, qe = { class: "joy" }, Ge = { class: "ar up" }, Ye = { class: "ar dn" }, Je = { class: "ar lf" }, Qe = { class: "ar rt" }, Xe = { class: "speed" }, Ze = { class: "zoom" }, et = /* @__PURE__ */ R({
|
|
266
|
+
__name: "SrResourceTree",
|
|
267
|
+
props: {
|
|
268
|
+
showPtz: { type: Boolean, default: !1 }
|
|
269
|
+
},
|
|
270
|
+
emits: ["select"],
|
|
271
|
+
setup(s, { emit: m }) {
|
|
272
|
+
const _ = m, w = [
|
|
273
|
+
{ k: "dev", label: "设备" },
|
|
274
|
+
{ k: "group", label: "分组" },
|
|
275
|
+
{ k: "view", label: "视图" }
|
|
276
|
+
], h = M("group"), k = M([]), b = M(9), x = M(["c1"]), i = (S, t) => ({ key: S, title: t, isLeaf: !0, cam: !0 }), z = [
|
|
277
|
+
{
|
|
278
|
+
key: "g1",
|
|
279
|
+
title: "齐鲁软件园",
|
|
280
|
+
count: "(6/6)",
|
|
281
|
+
children: [
|
|
282
|
+
i("c1", "齐鲁软件园北(可控)"),
|
|
283
|
+
i("c2", "齐鲁软件园东(可控)"),
|
|
284
|
+
i("c3", "CD中间全景摄像机2"),
|
|
285
|
+
i("c4", "软件园站西侧工地"),
|
|
286
|
+
i("c5", "软件园站东侧工地"),
|
|
287
|
+
i("c6", "B座A区室外全景南照联动球机")
|
|
288
|
+
]
|
|
289
|
+
},
|
|
290
|
+
{ key: "g2", title: "混凝土", count: "(43/48)", children: [i("g2a", "混凝土车间东"), i("g2b", "混凝土搅拌站")] },
|
|
291
|
+
{ key: "g3", title: "建材", count: "(40/52)", children: [i("g3a", "建材仓库南门"), i("g3b", "建材装卸区")] },
|
|
292
|
+
{ key: "g4", title: "玻璃制品", count: "(1/2)", children: [i("g4a", "玻璃制品质检区")] },
|
|
293
|
+
{ key: "g5", title: "生物质发电", count: "(0/8)", children: [i("g5a", "发电主控室")] },
|
|
294
|
+
{ key: "g6", title: "鹊华机场", count: "(2/2)", children: [i("g6a", "鹊华机场北跑道")] },
|
|
295
|
+
{ key: "g7", title: "河流断面", count: "(4/4)", children: [i("g7a", "小清河断面")] },
|
|
296
|
+
{ key: "g8", title: "视频融合", count: "(39/42)", children: [i("g8a", "融合大屏-01")] },
|
|
297
|
+
{ key: "g9", title: "AI识别", count: "(43/45)", children: [i("g9a", "AI识别-机房")] }
|
|
298
|
+
], D = (S, t) => {
|
|
299
|
+
var y;
|
|
300
|
+
const f = (y = t == null ? void 0 : t.selectedNodes) == null ? void 0 : y[0];
|
|
301
|
+
f != null && f.cam && (x.value = [f.key], _("select", f.title));
|
|
302
|
+
};
|
|
303
|
+
return (S, t) => {
|
|
304
|
+
const f = d("icon-search"), y = d("a-input"), $ = d("a-option"), N = d("a-select"), a = d("icon-refresh"), r = d("a-tooltip"), T = d("icon-folder-add"), A = d("a-tree"), c = d("icon-up"), V = d("icon-down"), H = d("icon-left"), G = d("icon-right"), Y = d("a-slider"), J = d("icon-zoom-in"), K = d("a-button"), Q = d("icon-zoom-out");
|
|
305
|
+
return o(), l("aside", He, [
|
|
306
|
+
e("div", Ie, [
|
|
307
|
+
(o(), l(B, null, E(w, (g) => e("a", {
|
|
308
|
+
key: g.k,
|
|
309
|
+
class: L({ active: h.value === g.k }),
|
|
310
|
+
onClick: (ct) => h.value = g.k
|
|
311
|
+
}, v(g.label), 11, Ue)), 64))
|
|
312
|
+
]),
|
|
313
|
+
e("div", Oe, [
|
|
314
|
+
n(y, {
|
|
315
|
+
placeholder: "按名称搜索",
|
|
316
|
+
"allow-clear": "",
|
|
317
|
+
class: "res-search"
|
|
318
|
+
}, {
|
|
319
|
+
prefix: u(() => [
|
|
320
|
+
n(f)
|
|
321
|
+
]),
|
|
322
|
+
_: 1
|
|
323
|
+
}),
|
|
324
|
+
n(N, {
|
|
325
|
+
modelValue: k.value,
|
|
326
|
+
"onUpdate:modelValue": t[0] || (t[0] = (g) => k.value = g),
|
|
327
|
+
placeholder: "请选择标签",
|
|
328
|
+
multiple: "",
|
|
329
|
+
"allow-clear": "",
|
|
330
|
+
"max-tag-count": 1,
|
|
331
|
+
class: "res-tagsel"
|
|
332
|
+
}, {
|
|
333
|
+
default: u(() => [
|
|
334
|
+
n($, { value: "key" }, {
|
|
335
|
+
default: u(() => [...t[2] || (t[2] = [
|
|
336
|
+
C("重点监控", -1)
|
|
337
|
+
])]),
|
|
338
|
+
_: 1
|
|
339
|
+
}),
|
|
340
|
+
n($, { value: "ptz" }, {
|
|
341
|
+
default: u(() => [...t[3] || (t[3] = [
|
|
342
|
+
C("可控云台", -1)
|
|
343
|
+
])]),
|
|
344
|
+
_: 1
|
|
345
|
+
}),
|
|
346
|
+
n($, { value: "alarm" }, {
|
|
347
|
+
default: u(() => [...t[4] || (t[4] = [
|
|
348
|
+
C("联网报警", -1)
|
|
349
|
+
])]),
|
|
350
|
+
_: 1
|
|
351
|
+
}),
|
|
352
|
+
n($, { value: "ai" }, {
|
|
353
|
+
default: u(() => [...t[5] || (t[5] = [
|
|
354
|
+
C("AI 识别", -1)
|
|
355
|
+
])]),
|
|
356
|
+
_: 1
|
|
357
|
+
})
|
|
358
|
+
]),
|
|
359
|
+
_: 1
|
|
360
|
+
}, 8, ["modelValue"])
|
|
361
|
+
]),
|
|
362
|
+
e("div", Re, [
|
|
363
|
+
t[6] || (t[6] = e("b", null, "资源列表", -1)),
|
|
364
|
+
e("span", Fe, [
|
|
365
|
+
n(r, { content: "刷新" }, {
|
|
366
|
+
default: u(() => [
|
|
367
|
+
n(a)
|
|
368
|
+
]),
|
|
369
|
+
_: 1
|
|
370
|
+
}),
|
|
371
|
+
n(r, { content: "新建文件夹" }, {
|
|
372
|
+
default: u(() => [
|
|
373
|
+
n(T)
|
|
374
|
+
]),
|
|
375
|
+
_: 1
|
|
376
|
+
})
|
|
377
|
+
])
|
|
378
|
+
]),
|
|
379
|
+
e("div", Ke, [
|
|
380
|
+
n(A, {
|
|
381
|
+
data: z,
|
|
382
|
+
"default-expanded-keys": ["g1"],
|
|
383
|
+
"selected-keys": x.value,
|
|
384
|
+
"block-node": "",
|
|
385
|
+
onSelect: D
|
|
386
|
+
}, {
|
|
387
|
+
extra: u((g) => [
|
|
388
|
+
g.count ? (o(), l("span", Pe, v(g.count), 1)) : p("", !0)
|
|
389
|
+
]),
|
|
390
|
+
_: 1
|
|
391
|
+
}, 8, ["selected-keys"])
|
|
392
|
+
]),
|
|
393
|
+
s.showPtz ? (o(), l("div", We, [
|
|
394
|
+
e("div", je, [
|
|
395
|
+
t[7] || (t[7] = C("云台控制 ", -1)),
|
|
396
|
+
n(c, { class: "ptz-chev" })
|
|
397
|
+
]),
|
|
398
|
+
e("div", qe, [
|
|
399
|
+
e("span", Ge, [
|
|
400
|
+
n(c)
|
|
401
|
+
]),
|
|
402
|
+
e("span", Ye, [
|
|
403
|
+
n(V)
|
|
404
|
+
]),
|
|
405
|
+
e("span", Je, [
|
|
406
|
+
n(H)
|
|
407
|
+
]),
|
|
408
|
+
e("span", Qe, [
|
|
409
|
+
n(G)
|
|
410
|
+
]),
|
|
411
|
+
t[8] || (t[8] = e("span", { class: "knob" }, null, -1))
|
|
412
|
+
]),
|
|
413
|
+
e("div", Xe, [
|
|
414
|
+
t[9] || (t[9] = e("span", null, "云台速度", -1)),
|
|
415
|
+
n(Y, {
|
|
416
|
+
modelValue: b.value,
|
|
417
|
+
"onUpdate:modelValue": t[1] || (t[1] = (g) => b.value = g),
|
|
418
|
+
min: 1,
|
|
419
|
+
max: 10,
|
|
420
|
+
style: { flex: 1 }
|
|
421
|
+
}, null, 8, ["modelValue"]),
|
|
422
|
+
e("b", null, v(b.value), 1)
|
|
423
|
+
]),
|
|
424
|
+
e("div", Ze, [
|
|
425
|
+
n(K, {
|
|
426
|
+
long: "",
|
|
427
|
+
size: "small"
|
|
428
|
+
}, {
|
|
429
|
+
icon: u(() => [
|
|
430
|
+
n(J)
|
|
431
|
+
]),
|
|
432
|
+
default: u(() => [
|
|
433
|
+
t[10] || (t[10] = C("放大", -1))
|
|
434
|
+
]),
|
|
435
|
+
_: 1
|
|
436
|
+
}),
|
|
437
|
+
n(K, {
|
|
438
|
+
long: "",
|
|
439
|
+
size: "small"
|
|
440
|
+
}, {
|
|
441
|
+
icon: u(() => [
|
|
442
|
+
n(Q)
|
|
443
|
+
]),
|
|
444
|
+
default: u(() => [
|
|
445
|
+
t[11] || (t[11] = C("缩小", -1))
|
|
446
|
+
]),
|
|
447
|
+
_: 1
|
|
448
|
+
})
|
|
449
|
+
])
|
|
450
|
+
])) : p("", !0)
|
|
451
|
+
]);
|
|
452
|
+
};
|
|
453
|
+
}
|
|
454
|
+
}), tt = /* @__PURE__ */ F(et, [["__scopeId", "data-v-05bca26c"]]), st = ["onClick"], ot = /* @__PURE__ */ R({
|
|
455
|
+
__name: "SrVideoWall",
|
|
456
|
+
props: {
|
|
457
|
+
count: {},
|
|
458
|
+
active: {}
|
|
459
|
+
},
|
|
460
|
+
emits: ["update:active"],
|
|
461
|
+
setup(s) {
|
|
462
|
+
const m = s, _ = O(() => m.count === 6 ? 3 : Math.ceil(Math.sqrt(m.count))), w = O(() => Math.ceil(m.count / _.value)), h = O(() => ({
|
|
463
|
+
gridTemplateColumns: `repeat(${_.value}, 1fr)`,
|
|
464
|
+
gridTemplateRows: `repeat(${w.value}, 1fr)`
|
|
465
|
+
}));
|
|
466
|
+
return (k, b) => (o(), l("div", {
|
|
467
|
+
class: "wall",
|
|
468
|
+
style: te(h.value)
|
|
469
|
+
}, [
|
|
470
|
+
(o(!0), l(B, null, E(s.count, (x) => (o(), l("div", {
|
|
471
|
+
key: x,
|
|
472
|
+
class: L(["cell", { active: x - 1 === s.active }]),
|
|
473
|
+
onClick: (i) => k.$emit("update:active", x - 1)
|
|
474
|
+
}, [...b[0] || (b[0] = [
|
|
475
|
+
e("span", { class: "nosrc" }, null, -1),
|
|
476
|
+
e("span", { class: "cap" }, "未接入视频源", -1)
|
|
477
|
+
])], 10, st))), 128))
|
|
478
|
+
], 4));
|
|
479
|
+
}
|
|
480
|
+
}), lt = /* @__PURE__ */ F(ot, [["__scopeId", "data-v-6ebd5cbf"]]), nt = { SrAppHeader: Ae, SrResourceTree: tt, SrVideoWall: lt }, dt = {
|
|
481
|
+
install(s) {
|
|
482
|
+
for (const [m, _] of Object.entries(nt)) s.component(m, _);
|
|
483
|
+
}
|
|
484
|
+
};
|
|
485
|
+
export {
|
|
486
|
+
oe as DEFAULT_MENUS,
|
|
487
|
+
le as DEFAULT_USER_MENUS,
|
|
488
|
+
Ae as SrAppHeader,
|
|
489
|
+
tt as SrResourceTree,
|
|
490
|
+
lt as SrVideoWall,
|
|
491
|
+
dt as default
|
|
492
|
+
};
|
package/package.json
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@someray-ui/components",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "Someray 内部 Vue3 通用组件库(SrAppHeader / SrResourceTree / SrVideoWall),配合 @arco-themes/vue-someray-light 主题",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"files": [
|
|
7
|
+
"dist"
|
|
8
|
+
],
|
|
9
|
+
"main": "./dist/sr-ui.js",
|
|
10
|
+
"module": "./dist/sr-ui.js",
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"types": "./dist/index.d.ts",
|
|
15
|
+
"import": "./dist/sr-ui.js",
|
|
16
|
+
"default": "./dist/sr-ui.js"
|
|
17
|
+
},
|
|
18
|
+
"./style.css": "./dist/sr-ui.css",
|
|
19
|
+
"./dist/*": "./dist/*",
|
|
20
|
+
"./*": "./*"
|
|
21
|
+
},
|
|
22
|
+
"sideEffects": [
|
|
23
|
+
"**/*.css"
|
|
24
|
+
],
|
|
25
|
+
"scripts": {
|
|
26
|
+
"build": "vite build"
|
|
27
|
+
},
|
|
28
|
+
"peerDependencies": {
|
|
29
|
+
"vue": "^3.4.0",
|
|
30
|
+
"vue-router": "^4.3.0",
|
|
31
|
+
"@arco-design/web-vue": "^2.58.0",
|
|
32
|
+
"@arco-themes/vue-someray-light": "^0.0.2"
|
|
33
|
+
},
|
|
34
|
+
"devDependencies": {
|
|
35
|
+
"@vitejs/plugin-vue": "^5.0.4",
|
|
36
|
+
"typescript": "^5.4.5",
|
|
37
|
+
"vite": "^5.2.11",
|
|
38
|
+
"vite-plugin-dts": "^3.9.1",
|
|
39
|
+
"vue": "^3.4.27",
|
|
40
|
+
"vue-router": "^4.3.2"
|
|
41
|
+
},
|
|
42
|
+
"license": "MIT",
|
|
43
|
+
"publishConfig": {
|
|
44
|
+
"access": "public",
|
|
45
|
+
"registry": "https://registry.npmjs.org/"
|
|
46
|
+
}
|
|
47
|
+
}
|