zhui-plus 1.0.0 → 1.0.10

package/packages/styles/_variable.scss

@@ -0,0 +1,136 @@
+@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;
+
+$headerHeight: 72px;
+$iconBarWidth: 80px;
+$menuWidth: 336px;
+$menuBackground: #fafafa;
+$iconBackground: #f0f2f5;
+$fontColor1: #000;
+$fontColor2: #262626;
+$fontColor3: #585858;
+$fontColor4: #8c8c8c;
+$fontColor5: #bebebe;
+$activeColor: #1890ff;
+$borderColor: rgb(244, 244, 244);
+$transitionTime: 0.6s;
+$breadcrumbHeight: 98px;
+$mapPageMenuWidth: 256px;
+$mapPageCloseMenuWidth: 70px;
+
+@keyframes topo-dash {
+  from {
+    stroke-dashoffset: 10;
+  }
+
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+:root {
+  --sw-green: #70c877;
+  --sw-orange: #e6a23c;
+  --sw-topo-animation: topo-dash 0.3s linear infinite;
+}
+
+html {
+  --el-color-primary: #409eff;
+  --el-color-info-light-9: #666;
+  --theme-background: #fff;
+  --font-color: #3d444f;
+  --disabled-color: #ccc;
+  --dashboard-tool-bg: rgb(240 242 245);
+  --text-color-placeholder: #666;
+  --border-color: #dcdfe6;
+  --border-color-primary: #eee;
+  --layout-background: #f7f9fa;
+  --box-shadow-color: #ccc;
+  --sw-bg-color-overlay: #fff;
+  --sw-border-color-light: #e4e7ed;
+  --popper-hover-bg: #eee;
+  --sw-icon-btn-bg: #eee;
+  --sw-icon-btn-color: #666;
+  --sw-icon-btn-border: #ccc;
+  --sw-table-col: #fff;
+  --sw-config-header: aliceblue;
+  --sw-topology-color: #666;
+  --vis-tooltip-bg: #fff;
+  --sw-topology-switch-icon: rgba(0, 0, 0, 0.3);
+  --sw-topology-box-shadow: #eee 1px 2px 10px;
+  --sw-topology-setting-bg: #fff;
+  --sw-topology-border: 1px solid #999;
+  --sw-trace-success: rgb(46 47 51 / 10%);
+  --sw-trace-list-border: rgb(0 0 0 / 10%);
+  --sw-list-selected: #ededed;
+  --sw-table-header: #f3f4f9;
+  --sw-list-hover: rgb(0 0 0 / 4%);
+  --sw-setting-color: #606266;
+  --sw-alarm-tool: #f0f2f5;
+  --sw-alarm-tool-border: #c1c5ca41;
+  --sw-table-color: #000;
+  --sw-event-vis-selected: #1a1a1a;
+  --sw-time-axis-text: #4d4d4d;
+  --sw-drawer-header: #72767b;
+  --sw-marketplace-border: #dedfe0;
+  --sw-grid-item-active: #d4d7de;
+  --sw-trace-line: #999;
+}
+
+html.dark {
+  --el-color-primary: #409eff;
+  --el-color-info-light-9: #333;
+  --theme-background: #212224;
+  --font-color: #fafbfc;
+  --disabled-color: #999;
+  --dashboard-tool-bg: #000;
+  --text-color-placeholder: #ccc;
+  --border-color: #262629;
+  --border-color-primary: #4b4b52;
+  --layout-background: #000;
+  --box-shadow-color: #606266;
+  --sw-bg-color-overlay: #1d1e1f;
+  --sw-border-color-light: #414243;
+  --popper-hover-bg: rgb(64, 158, 255, 0.1);
+  --sw-icon-btn-bg: #222;
+  --sw-icon-btn-color: #ccc;
+  --sw-icon-btn-border: #999;
+  --sw-table-col: none;
+  --sw-config-header: #303133;
+  --sw-topology-color: #ccc;
+  --vis-tooltip-bg: #414243;
+  --sw-topology-switch-icon: #999;
+  --sw-topology-box-shadow: 0 0 2px 0 #444;
+  --sw-topology-setting-bg: #333;
+  --sw-topology-border: 1px solid #666;
+  --sw-trace-success: #aaa;
+  --sw-trace-list-border: #333133;
+  --sw-list-hover: #262629;
+  --sw-table-header: #303133;
+  --sw-list-selected: #3d444f;
+  --sw-setting-color: #eee;
+  --sw-alarm-tool: #303133;
+  --sw-alarm-tool-border: #444;
+  --sw-table-color: #fff;
+  --sw-event-vis-selected: #fff;
+  --sw-time-axis-text: #aaa;
+  --sw-drawer-header: #e9e9eb;
+  --sw-marketplace-border: #606266;
+  --sw-grid-item-active: #73767a;
+  --sw-trace-line: #e8e8e8;
+}
+
+$tool-icon-btn-bg: var(--sw-icon-btn-bg);
+$tool-icon-btn-color: var(--sw-icon-btn-color);
+$popper-hover-bg-color: var(--popper-hover-bg);
+$box-shadow-color: var(--box-shadow-color);
+$border-color-primary: var(--border-color-primary);
+$layout-background: var(--layout-background);
+$border-color: var(--border-color);
+$dashboard-tool-bg-color: var(--dashboard-tool-bg);
+$font-color: var(--font-color);
+$text-color: var(--theme-background);
+$disabled-color: var(--disabled-color);
+$active-color: var(--el-color-primary);
+$theme-background: var(--theme-background);
+$active-background: var(--el-color-primary);
+$font-size-smaller: 12px;
+$font-size-normal: 14px;

package/packages/styles/index.scss

@@ -0,0 +1,3 @@
+@use "./_variable.scss" as *;
+@use "./_element.scss" as *;
+

package/packages/tokens/tokens.ts

@@ -0,0 +1,2 @@
+import { ComputedRef, InjectionKey } from 'vue'
+export const rowGutter: InjectionKey<ComputedRef<number>> = Symbol()

package/packages/types/form.ts

@@ -0,0 +1,205 @@
+import type { CSSProperties } from 'vue'
+import type { FormItemRule, UploadUserFile } from 'element-plus'
+import any = jasmine.any;
+
+// 基础配置
+export interface BaseFieldConfig {
+    field: string
+    label: string
+    type: FieldType
+    placeholder?: string
+    disabled?: boolean
+    rules?: FormItemRule | FormItemRule[]
+    colSpan?: number
+    formItemProps?: Record<string, any>
+    style?: CSSProperties
+    events?: Record<string, (...args: any[]) => void>
+}
+
+// 所有控件类型
+export type FieldType =
+    | 'input'
+    | 'textarea'
+    | 'password'
+    | 'number'
+    | 'select'
+    | 'radio'
+    | 'checkbox'
+    | 'switch'
+    | 'date'
+    | 'time'
+    | 'datetime'
+    | 'upload'
+    | 'cascader'
+    | 'treeSelect'
+    | 'slider'
+    | 'rate'
+    | 'color'
+    | 'html'
+    | 'custom'
+
+// 输入类
+export interface InputConfig extends BaseFieldConfig {
+    type: 'input' | 'textarea' | 'password'
+    inputType?: 'text' | 'password'
+    maxlength?: number
+    showWordLimit?: boolean
+    clearable?: boolean
+    rows?: number
+    autosize?: boolean | { minRows: number; maxRows: number }
+}
+
+// 数字输入
+export interface NumberConfig extends BaseFieldConfig {
+    type: 'number'
+    min?: number
+    max?: number
+    step?: number
+    precision?: number
+    controls?: boolean
+}
+
+// 选择器
+export interface SelectConfig extends BaseFieldConfig {
+    type: 'select'
+    options?: { label: string; value: any; disabled?: boolean }[]
+    filterable?: boolean
+    remote?: boolean
+    remoteMethod?: (query: string) => Promise<void> | void
+    loading?: boolean
+    multiple?: boolean
+    clearable?: boolean
+}
+
+// 单选
+export interface RadioConfig extends BaseFieldConfig {
+    type: 'radio'
+    options?: { label: string; value: any; disabled?: boolean }[]
+    radioType?: 'radio' | 'button'
+}
+
+// 多选
+export interface CheckboxConfig extends BaseFieldConfig {
+    type: 'checkbox'
+    options?: { label: string; value: any; disabled?: boolean }[]
+    min?: number
+    max?: number
+}
+
+// 开关
+export interface SwitchConfig extends BaseFieldConfig {
+    type: 'switch'
+    activeText?: string
+    inactiveText?: string
+    activeValue?: any
+    inactiveValue?: any
+    inlinePrompt?: boolean
+}
+
+// 日期 / 时间
+export interface DateConfig extends BaseFieldConfig {
+    type: 'date' | 'time' | 'datetime'
+    format?: string
+    valueFormat?: string
+    clearable?: boolean
+    editable?: boolean
+    isRange?: boolean
+    // date 专属
+    dateType?: 'date' | 'week' | 'month' | 'year'
+}
+
+// 上传
+export interface UploadConfig extends BaseFieldConfig {
+    type: 'upload'
+    accept?: string
+    maxSize?: number
+    maxCount?: number
+    customRequest?: (option: any) => void
+    autoUpload?: boolean
+    uploadTrigger?: 'button' | 'dragger'
+    listType?: 'text' | 'picture' | 'picture-card'
+    buttonText?: string
+    draggerSlot?: string
+    fileCardSlot?: string
+    buttonStyle?: CSSProperties
+    buttonPosition?: 'left' | 'center' | 'right'
+    clearValidateOnSuccess?: boolean
+}
+
+// 级联
+export interface CascaderConfig extends BaseFieldConfig {
+    type: 'cascader'
+    options?: any[]
+    props?: Record<string, any>
+    filterable?: boolean
+    clearable?: boolean
+    showAllLevels?: boolean
+}
+
+// 树选择
+export interface TreeSelectConfig extends BaseFieldConfig {
+    type: 'treeSelect'
+    data?: any[]
+    props?: Record<string, any>
+    filterable?: boolean
+    checkStrictly?: boolean
+    multiple?: boolean
+    clearable?: boolean
+}
+
+// 滑块
+export interface SliderConfig extends BaseFieldConfig {
+    type: 'slider'
+    min?: number
+    max?: number
+    step?: number
+    showInput?: boolean
+    range?: boolean
+}
+
+// 评分
+export interface RateConfig extends BaseFieldConfig {
+    type: 'rate'
+    max?: number
+    allowHalf?: boolean
+    showText?: boolean
+    texts?: string[]
+}
+
+// 颜色选择器
+export interface ColorConfig extends BaseFieldConfig {
+    type: 'color'
+    showAlpha?: boolean
+    colorFormat?: 'hsl' | 'hsv' | 'hex' | 'rgb'
+    predefine?: string[]
+}
+
+// HTML 片段
+export interface HtmlConfig extends BaseFieldConfig {
+    type: 'html'
+    htmlContent: string
+}
+
+// 自定义插槽
+export interface CustomConfig extends BaseFieldConfig {
+    type: 'custom'
+    customSlot: string
+}
+
+// 联合类型
+export type FormFieldConfig =
+    | InputConfig
+    | NumberConfig
+    | SelectConfig
+    | RadioConfig
+    | CheckboxConfig
+    | SwitchConfig
+    | DateConfig
+    | UploadConfig
+    | CascaderConfig
+    | TreeSelectConfig
+    | SliderConfig
+    | RateConfig
+    | ColorConfig
+    | HtmlConfig
+    | CustomConfig

package/packages/types/index.ts

@@ -0,0 +1,4 @@
+export * from "./form"
+export * from "./searchForm"
+export * from "./provider"
+export * from "./player"

package/packages/types/player.ts

@@ -0,0 +1,80 @@
+// types.ts
+export type PlayerMode = 'DHPlayer' | 'WSPlayer'
+export type WindowType = 0 | 1           // 0-实时预览，1-录像回放
+export type PlayerStatus = 'idle' | 'loading' | 'playing' | 'paused' | 'error' | 'stopped'
+export type StreamType = 1 | 2 | 3        // 主码流/辅码流/辅码流2
+export type LayoutType = 1 | 4 | 9 | 16 | 25
+
+export interface ShowIcons {
+    streamChangeSelect?: boolean
+    talkIcon?: boolean
+    localRecordIcon?: boolean
+    audioIcon?: boolean
+    snapshotIcon?: boolean
+    closeIcon?: boolean
+}
+
+export interface RealPlayOptions {
+    channelId: string
+    streamType?: StreamType
+    path?: string
+    token?: string
+    stdRtsp?: boolean
+}
+
+export interface PlaybackOptions {
+    channelId: string
+    beginTime: string               // yyyy-MM-dd HH:mm:ss
+    endTime: string
+    recordSource?: 2 | 3            // 2-设备，3-中心服务器（默认）
+    streamType?: StreamType
+    path?: string
+    token?: string
+}
+
+export interface PlayerConfig {
+    mode: PlayerMode
+    containerId: string             // 容器 DOM ID（页面内需唯一）
+    windowType: WindowType
+    layout?: LayoutType
+    showControl?: boolean
+    showIcons?: ShowIcons
+    openIvs?: boolean
+    useH265MSE?: boolean
+    autoPlay?: boolean
+    muted?: boolean
+    scale?: number
+
+    // --- 资源路径配置（可选） ---
+    /** WSPlayer 资源根路径，默认 /static/WSPlayer/ */
+    wsBasePath?: string
+    /** DHPlayer 桥接文件 URL（如需动态加载） */
+    dhPluginJs?: string
+}
+
+export interface PlayerError {
+    code: number | string
+    message: string
+    type: 'permission' | 'connection' | 'decode' | 'timeout' | 'unknown'
+    raw?: any
+}
+
+export interface DahuaPlayerProps {
+    config: PlayerConfig
+    width?: string | number
+    height?: string | number
+    customClass?: string
+    showLoading?: boolean
+    showErrorMask?: boolean
+}
+
+export interface DahuaPlayerEmits {
+    (e: 'ready', playerInstance?: any): void
+    (e: 'play'): void
+    (e: 'pause'): void
+    (e: 'stop'): void
+    (e: 'error', error?: PlayerError): void
+    (e: 'timeUpdate', time?: number): void
+    (e: 'statusChange', status?: PlayerStatus): void
+    (e: 'snapshot', base64?: string): void
+}

package/packages/types/provider.ts

@@ -0,0 +1,4 @@
+// src/components/Permission/types.ts
+export interface PermissionMap {
+    [key: string]: boolean;
+}

package/packages/types/searchForm.ts

@@ -0,0 +1,24 @@
+export interface SelectOption {
+    label: string
+    value: any
+    [key: string]: any
+}
+
+export interface SearchFormItem {
+    type: 'input' | 'select' | 'date'   // 可继续扩展
+    prop: string
+    label: string
+    placeholder?: string
+    clearable?: boolean
+    span?: number                        // 自定义栅格占位，不传则按 cols 自动计算
+    /* 下拉专用 */
+    options?: SelectOption[]
+    remote?: boolean
+    remoteMethod?: (query: string) => Promise<SelectOption[]>
+    loading?: boolean                    // 远程搜索时的加载状态
+    filterable?: boolean
+    /* 日期专用 */
+    dateType?: 'year' | 'month' | 'date' | 'dates' | 'datetime' | 'datetimerange' | 'daterange'
+    /* 其他透传属性 */
+    attrs?: Record<string, any>
+}

package/packages/utils/common/__tests__/common.test.ts

@@ -0,0 +1,12 @@
+import { fromPairs } from '../common'
+
+describe('通用工具函数测试', () => {
+  test('test---fromPairs', () => {
+    const testData = [
+      ['fred', 30],
+      ['barney', 40]
+    ]
+    const resData = { fred: 30, barney: 40 }
+    expect(fromPairs(testData)).toStrictEqual(resData)
+  })
+})

package/packages/utils/common/common.ts

@@ -0,0 +1,68 @@
+/**
+ * 二维数组转对象工具函数
+ * */
+export function fromPairs(pairs: (string | any)[][]) {
+  return pairs.reduce((item, next) => {
+    // @ts-ignore
+    return {
+      ...item,
+      ...{
+        [next[0]]: next[1]
+      }
+    }
+  }, {} as { [key in string]: any })
+}
+
+// 防抖
+let timer: any = null
+export function debounce(func: Function, wait: number, immediate = true) {
+  return (...args: any[]) => {
+    //如果timer不为null, 清除定时器
+    if (timer) clearTimeout(timer)
+
+    //如果是立即执行
+    if (immediate) {
+      //定义callNow = !timer
+      const callNow = !timer
+      //定义wait时间后把timer变为null
+      //即在wait时间之后事件才会有效
+      timer = setTimeout(() => {
+        timer = null
+      }, wait)
+      //如果callNow为true,即原本timer为null
+      //那么执行func函数
+      if (callNow) {
+        // @ts-ignore
+        func.apply(this, args)
+      }
+    } else {
+      //如果是不立即执行
+      //那就是每次重新定时
+      timer = setTimeout(() => {
+        // @ts-ignore
+        func.apply(this, args)
+      }, wait)
+    }
+  }
+}
+
+// 节流
+export const throttle = (fn: Function, rateTime: number) => {
+  let prev = Date.now() - rateTime
+  return (...args: any[]) => {
+    if (Date.now() - prev >= rateTime) {
+      fn.apply(this, args)
+      prev = Date.now()
+    }
+  }
+}
+
+// 返回顶部
+export function gotoTopUtils() {
+  // window.scrollTo(0, 0)
+  const topOffset = document.documentElement.scrollTop || document.body.scrollTop
+  if (topOffset > 0) {
+    window.requestAnimationFrame(gotoTopUtils)
+    window.scrollTo(0, topOffset - topOffset / 6)
+  }
+}

package/packages/utils/constant.ts

@@ -0,0 +1,12 @@
+export const MACARON_COLORS = [
+    '#F7B6D2', // 樱花粉
+    '#A8E6CF', // 薄荷绿
+    '#FFD3B6', // 奶油橘
+    '#D4A5E6', // 薰衣草紫
+    '#B5EAD7', // 浅海绿
+    '#FFC8A2', // 蜜桃色
+    '#C7CEE6', // 淡蓝灰
+    '#E2F0CB', // 嫩芽绿
+    '#FEC8D8', // 淡玫瑰
+    '#C4E0D9'  // 雾霾蓝
+]

package/packages/utils/copy.ts

@@ -0,0 +1,20 @@
+import { ElNotification } from "element-plus";
+
+export default (text: string): void => {
+  navigator.clipboard
+    .writeText(text)
+    .then(() => {
+      ElNotification({
+        title: "Success",
+        message: "Copied",
+        type: "success",
+      });
+    })
+    .catch((err) => {
+      ElNotification({
+        title: "Error",
+        message: err,
+        type: "warning",
+      });
+    });
+};

package/packages/utils/data.ts

@@ -0,0 +1,62 @@
+export enum TimeType {
+  MINUTE_TIME = "MINUTE",
+  HOUR_TIME = "HOUR",
+  DAY_TIME = "DAY",
+}
+
+export const Languages = [
+  { label: "English", value: "en" },
+  { label: "Chinese", value: "zh" },
+  { label: "Spanish", value: "es" },
+];
+
+export enum Themes {
+  Dark = "dark",
+  Light = "light",
+}
+export type LegendOptions = {
+  show: boolean;
+  total: boolean;
+  min: boolean;
+  max: boolean;
+  mean: boolean;
+  asTable: boolean;
+  toTheRight: boolean;
+  width: number;
+  asSelector: boolean;
+};
+export interface LineConfig extends AreaConfig {
+  type?: string;
+  smooth?: boolean;
+  showSymbol?: boolean;
+  step?: boolean;
+  showXAxis?: boolean;
+  showYAxis?: boolean;
+  smallTips?: boolean;
+  showlabels?: boolean;
+  noTooltips?: boolean;
+}
+
+export interface AreaConfig {
+  type?: string;
+  opacity?: number;
+  legend?: LegendOptions;
+}
+
+export type EventParams = {
+  componentType: string;
+  seriesType: string;
+  seriesIndex: number;
+  seriesName: string;
+  name: string;
+  dataIndex: number;
+  data: Record<string, unknown>;
+  dataType: string;
+  value: number | number[];
+  color: string;
+  event: any
+};
+export interface Option {
+  value: string;
+  label: string;
+}

package/packages/utils/echarts/echarts.ts

@@ -0,0 +1,34 @@
+import * as echarts from "echarts/core";
+
+import { BarChart, LineChart, HeatmapChart, SankeyChart } from "echarts/charts";
+
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  DataZoomComponent,
+  VisualMapComponent,
+  TimelineComponent,
+  MarkAreaComponent,
+} from "echarts/components";
+
+import { SVGRenderer } from "echarts/renderers";
+
+echarts.use([
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  BarChart,
+  LineChart,
+  HeatmapChart,
+  SankeyChart,
+  SVGRenderer,
+  DataZoomComponent,
+  VisualMapComponent,
+  TimelineComponent,
+  MarkAreaComponent,
+]);
+
+export default echarts;