zhui-plus 1.0.0 → 1.0.10

package/packages/components/noData/index.ts

@@ -0,0 +1,9 @@
+import ZhNoData from './src/zh-no-data.vue'
+import { App } from 'vue'
+
+export default {
+  install(app: App) {
+    app.component('ZhNoData', ZhNoData)
+  }
+}
+export { ZhNoData }

package/packages/components/noData/src/zh-no-data.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="nodata">
+    <img v-if="!icon" :style="$attrs.imgStyle" :src="src" alt="">
+    <zh-icon v-else :name="icon" :color="color" :size="size" />
+    <p v-if="showText" :style="$attrs.textStyle">{{text}}</p>
+  </div>
+</template>
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import noDataIcon from "@/assets/images/no_data.svg"
+const props = withDefaults(defineProps<{
+  src?:string,
+  showText?:boolean,
+  text?:string,
+  icon?:any,
+  size?:number,
+  color?:string,
+}>(),{
+  src:noDataIcon,
+  showText:true,
+  text:'暂无数据',
+  icon:'',
+  size:50,
+  color:'#ccc'
+})
+</script>
+<style lang="scss" scoped>
+.nodata {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  color: rgba(0, 0, 0, 0.25);
+
+  img {
+    width: 100px;
+    margin-bottom: 20px;
+  }
+}
+</style>

package/packages/components/operationColumn/index.ts

@@ -0,0 +1,9 @@
+import ZhOperationColumn from './src/zh-operationColumn.vue'
+import { App } from 'vue'
+
+export default {
+  install(app: App) {
+    app.component('ZhOperationColumn', ZhOperationColumn)
+  }
+}
+export { ZhOperationColumn }

package/packages/components/operationColumn/src/zh-operationColumn.vue

@@ -0,0 +1,113 @@
+<template>
+  <el-table-column
+    :label="label"
+    :fixed="fixed"
+    :align="align"
+    :show-overflow-tooltip="showOverflowTooltip"
+    :width="finalWidth"
+  >
+    <template #default="{ row }">
+      <div v-auto-width  :class="'operation-buttons'+id">
+        <slot :row="row"></slot>
+      </div>
+    </template>
+  </el-table-column>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, ref, computed } from "vue";
+
+const id = ref('operation-buttons'+Math.random().toString(36).substr(2, 9));
+const props = defineProps({
+  listDataLength: {
+    type: Number,
+    default: () => 80
+  },
+  label: {
+    type: String,
+    default: () => "操作"
+  },
+  fixed: {
+    type: String,
+    default: () => "right"
+  },
+  align: {
+    type: String,
+    default: () => "center"
+  },
+  minWidth: {
+    type: Number,
+    default: () => 80
+  },
+  showOverflowTooltip: {
+    type: Boolean,
+    default: () => false
+  }
+});
+
+const count = ref(0);
+const operationWidth = ref(props.minWidth || 80);
+
+// 计算操作列宽度
+const calculateWidth = () => {
+  count.value++;
+
+  if (count.value !== props.listDataLength) return;
+  const maxWidth = getOperationMaxWidth();
+  operationWidth.value = Math.max(maxWidth, props.minWidth);
+  count.value = 0;
+};
+
+// 计算最终宽度
+const finalWidth = computed(() => {
+  return operationWidth.value || props.minWidth;
+});
+
+// 自适应宽度指令
+const vAutoWidth = {
+  mounted() {
+    // 初次挂载的时候计算一次
+    calculateWidth();
+  },
+  updated() {
+    // 数据更新时重新计算一次
+    calculateWidth();
+  }
+};
+
+/**
+ * 获取按钮数量和宽带来获取操作组的最大宽度
+ * 注意使用时需要使用 `class="operation-buttons"` 的标签包裹操作按钮
+ * @returns {number} 返回操作组的最大宽度
+ */
+const getOperationMaxWidth = () => {
+  const el = document.getElementsByClassName('operation-buttons'+id.value);
+  // 取操作组的最大宽度
+  let maxWidth = 0;
+  let totalWidth = 0;
+  Array.prototype.forEach.call(el, (item) => {
+    // 获取每个item的dom
+    const buttons = item.querySelectorAll(".el-button");
+    const contexts = item.querySelectorAll(".context-item");
+    // 获取每行按钮的总宽度
+    if(buttons){
+      totalWidth = Array.from(buttons).reduce((acc, button:any) => {
+        return acc + button.scrollWidth + 20; // 每个按钮的宽度加上预留宽度
+      }, 0) as number;
+      // alert('buttons'+totalWidth)
+    }
+    if(contexts){
+      console.log(contexts)
+      totalWidth += Array.from(contexts).reduce((acc, context:any) => {
+        console.log('context',context.offsetWidth)
+        return acc + context.offsetWidth + 20; // 每个按钮的宽度加上预留宽度
+      }, 0) as number;
+      // console.log('contexts'+totalWidth)
+    }
+    // 获取最大的宽度
+    if (totalWidth > maxWidth) maxWidth = totalWidth;
+  });
+
+  return maxWidth;
+};
+</script>

package/packages/components/provider/index.ts

@@ -0,0 +1,11 @@
+import ZhAuthControl from './src/zh-authControl.vue'
+import ZhAuthProvider from './src/zh-authProvider.vue'
+import { App } from 'vue'
+
+export default {
+  install(app: App) {
+    app.component('ZhAuthControl', ZhAuthControl)
+    app.component('ZhAuthProvider', ZhAuthProvider)
+  }
+}
+export { ZhAuthControl,ZhAuthProvider }

package/packages/components/provider/src/zh-authControl.vue

@@ -0,0 +1,28 @@
+<!-- src/components/Permission/PermissionControl.vue -->
+<template>
+  <template v-if="mode === 'hide' && !hasPerm">
+    <!-- 无权限时隐藏 -->
+  </template>
+  <template v-else>
+    <!-- 有权限或禁用模式下渲染，同时通过插槽抛出状态 -->
+    <slot :hasPermission="hasPerm" :disabled="!hasPerm" />
+  </template>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { usePermission } from '../../../utils/hooks/usePermission';
+
+const props = withDefaults(
+    defineProps<{
+      /** 所需权限名 */
+      permission: string;
+      /** 控制模式：hide-隐藏；disable-禁用但可见 */
+      mode?: 'hide' | 'disable';
+    }>(),
+    { mode: 'hide' }
+);
+
+const { hasPermission } = usePermission();
+const hasPerm = computed(() => hasPermission(props.permission));
+</script>

package/packages/components/provider/src/zh-authProvider.vue

@@ -0,0 +1,36 @@
+<!-- src/components/Permission/PermissionProvider.vue -->
+<template>
+  <slot />
+</template>
+
+<script setup lang="ts">
+import { computed, provide, inject, type InjectionKey, type ComputedRef } from 'vue';
+import type { PermissionMap } from '../../../types';
+
+// 注入键（只在当前文件内使用，不导出）
+const PERMISSION_KEY: InjectionKey<ComputedRef<PermissionMap>> = Symbol('permission');
+
+const props = withDefaults(
+    defineProps<{
+      /** 当前层级的权限集 */
+      permissions: PermissionMap;
+      /** 是否合并父级权限（默认合并，子级可覆盖父级） */
+      merge?: boolean;
+    }>(),
+    { merge: true }
+);
+
+// 注入父级的权限集（如果存在）
+const parentPermissions = inject(PERMISSION_KEY, undefined);
+
+// 合并后的最终权限
+const mergedPermissions = computed<PermissionMap>(() => {
+  if (props.merge && parentPermissions) {
+    // 浅合并，子级覆盖父级
+    return { ...parentPermissions.value, ...props.permissions };
+  }
+  return { ...props.permissions };
+});
+
+provide(PERMISSION_KEY, mergedPermissions);
+</script>

package/packages/components/qrcode/index.ts

@@ -0,0 +1,9 @@
+import ZhQrcode from './src/zh-qrcode.vue'
+import { App } from 'vue'
+
+export default {
+  install(app: App) {
+    app.component('ZhQrcode', ZhQrcode)
+  }
+}
+export { ZhQrcode }

package/packages/components/qrcode/src/zh-qrcode.vue

@@ -0,0 +1,271 @@
+<!--
+  二维码生成器组件 - QrCodeWithLogo.vue
+  功能：生成带Logo的二维码，支持微信、QQ、支付宝等主流应用扫码识别
+  特性：
+  - 可配置二维码内容URL
+  - 可配置中心Logo图片
+  - 高容错级别（H级，30%纠错能力），确保带Logo仍可扫描
+  - Logo自动添加白色背景层，提升扫码成功率
+  - 响应式尺寸、颜色配置
+  - TypeScript类型安全
+-->
+
+<template>
+  <div class="qr-code-container" :style="{ width: `${size}px`, height: `${size}px` }">
+    <canvas ref="canvasRef" :width="size" :height="size" style="display: block"></canvas>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted, type PropType } from 'vue';
+import QRCode from 'qrcode';
+
+// 定义组件属性
+const props = defineProps({
+  // 必填：二维码内容（URL或任意文本）
+  value: {
+    type: String,
+    required: true,
+  },
+  // 可选：Logo图片地址（支持网络URL、Base64、本地路径）
+  logo: {
+    type: String,
+    default: '',
+  },
+  // 二维码尺寸（像素）
+  size: {
+    type: Number,
+    default: 200,
+  },
+  // Logo占二维码尺寸的比例（0-0.3，推荐0.2-0.25，过大可能影响扫码）
+  logoSizeRatio: {
+    type: Number,
+    default: 0.2,
+    validator: (val: number) => val >= 0 && val <= 0.3,
+  },
+  // Logo背景颜色
+  logoBackgroundColor: {
+    type: String,
+    default: '#ffffff',
+  },
+  // Logo背景圆角（像素）
+  logoBackgroundRadius: {
+    type: Number,
+    default: 8,
+  },
+  // Logo背景内边距（像素）
+  logoPadding: {
+    type: Number,
+    default: 4,
+  },
+  // 二维码深色块颜色
+  colorDark: {
+    type: String,
+    default: '#000000',
+  },
+  // 二维码浅色块颜色（背景）
+  colorLight: {
+    type: String,
+    default: '#ffffff',
+  },
+  // 纠错级别：L(7%) M(15%) Q(25%) H(30%)，带Logo必须使用H
+  errorCorrectionLevel: {
+    type: String as PropType<'L' | 'M' | 'Q' | 'H'>,
+    default: 'H',
+    validator: (val: string) => ['L', 'M', 'Q', 'H'].includes(val),
+  },
+  // 二维码边距（模块数）
+  margin: {
+    type: Number,
+    default: 2,
+  },
+});
+
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+// 用于防止异步绘制过程中的竞态条件
+let generationId = 0;
+
+/**
+ * 绘制Logo到二维码上
+ * @param canvas Canvas元素
+ * @param logoUrl Logo图片地址
+ * @param logoSize  Logo实际绘制尺寸（像素）
+ * @param backgroundColor 背景颜色
+ * @param borderRadius 背景圆角
+ * @param padding 背景内边距
+ * @param currentGenId 当前生成ID，用于校验是否是最新调用
+ */
+const drawLogo = (
+    canvas: HTMLCanvasElement,
+    logoUrl: string,
+    logoSize: number,
+    backgroundColor: string,
+    borderRadius: number,
+    padding: number,
+    currentGenId: number
+): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    // 如果当前生成ID与全局ID不符，放弃绘制
+    if (currentGenId !== generationId) {
+      reject(new Error('Generation outdated'));
+      return;
+    }
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+      reject(new Error('Failed to get canvas context'));
+      return;
+    }
+
+    const img = new Image();
+    // 设置跨域属性（如果图片支持CORS，可防止canvas被污染；即使不支持，扫码仍正常）
+    img.crossOrigin = 'Anonymous';
+    img.onload = () => {
+      // 再次检查是否过期
+      if (currentGenId !== generationId) {
+        reject(new Error('Generation outdated'));
+        return;
+      }
+
+      // 计算Logo绘制区域（中心点）
+      const centerX = canvas.width / 2;
+      const centerY = canvas.height / 2;
+      const logoWidth = logoSize;
+      const logoHeight = logoSize;
+
+      // 背景区域尺寸（加上内边距）
+      const bgWidth = logoWidth + padding * 2;
+      const bgHeight = logoHeight + padding * 2;
+      const bgX = centerX - bgWidth / 2;
+      const bgY = centerY - bgHeight / 2;
+
+      // 绘制圆角背景矩形
+      ctx.save();
+      ctx.shadowBlur = 0; // 避免阴影干扰扫码
+      ctx.beginPath();
+      ctx.moveTo(bgX + borderRadius, bgY);
+      ctx.lineTo(bgX + bgWidth - borderRadius, bgY);
+      ctx.quadraticCurveTo(bgX + bgWidth, bgY, bgX + bgWidth, bgY + borderRadius);
+      ctx.lineTo(bgX + bgWidth, bgY + bgHeight - borderRadius);
+      ctx.quadraticCurveTo(bgX + bgWidth, bgY + bgHeight, bgX + bgWidth - borderRadius, bgY + bgHeight);
+      ctx.lineTo(bgX + borderRadius, bgY + bgHeight);
+      ctx.quadraticCurveTo(bgX, bgY + bgHeight, bgX, bgY + bgHeight - borderRadius);
+      ctx.lineTo(bgX, bgY + borderRadius);
+      ctx.quadraticCurveTo(bgX, bgY, bgX + borderRadius, bgY);
+      ctx.closePath();
+      ctx.fillStyle = backgroundColor;
+      ctx.fill();
+
+      // 绘制Logo图片（保持宽高比，居中显示）
+      const imgWidth = logoWidth;
+      const imgHeight = logoHeight;
+      const imgX = centerX - imgWidth / 2;
+      const imgY = centerY - imgHeight / 2;
+      ctx.drawImage(img, imgX, imgY, imgWidth, imgHeight);
+      ctx.restore();
+      resolve();
+    };
+    img.onerror = () => {
+      console.error('QR Code Logo failed to load:', logoUrl);
+      reject(new Error('Logo image load failed'));
+    };
+    img.src = logoUrl;
+  });
+};
+
+/**
+ * 生成二维码（包括基础二维码和Logo绘制）
+ */
+const generateQRCode = async () => {
+  if (!canvasRef.value) return;
+  const canvas = canvasRef.value;
+  const currentGenId = ++generationId;
+
+  try {
+    // 1. 生成基础二维码（高纠错级别）
+    await QRCode.toCanvas(canvas, props.value, {
+      width: props.size,
+      margin: props.margin,
+      errorCorrectionLevel: props.errorCorrectionLevel,
+      color: {
+        dark: props.colorDark,
+        light: props.colorLight,
+      },
+    });
+
+    // 再次检查是否仍然是最新调用（避免在生成二维码过程中props改变）
+    if (currentGenId !== generationId) return;
+
+    // 2. 如果有Logo，绘制Logo
+    if (props.logo && props.logo.trim() !== '') {
+      // 计算Logo实际尺寸（像素）
+      const logoSizePx = props.size * props.logoSizeRatio;
+      // 最小Logo尺寸限制（避免过小）
+      const finalLogoSize = Math.max(16, Math.min(logoSizePx, props.size * 0.3));
+
+      await drawLogo(
+          canvas,
+          props.logo,
+          finalLogoSize,
+          props.logoBackgroundColor,
+          props.logoBackgroundRadius,
+          props.logoPadding,
+          currentGenId
+      );
+    }
+  } catch (error) {
+    console.error('QR Code generation failed:', error);
+    // 降级：如果生成失败，在canvas上显示错误提示（可选）
+    if (currentGenId === generationId && canvasRef.value) {
+      const ctx = canvasRef.value.getContext('2d');
+      if (ctx) {
+        ctx.clearRect(0, 0, props.size, props.size);
+        ctx.fillStyle = '#f0f0f0';
+        ctx.fillRect(0, 0, props.size, props.size);
+        ctx.fillStyle = '#ff0000';
+        ctx.font = '12px Arial';
+        ctx.fillText('二维码生成失败', 10, 20);
+      }
+    }
+  }
+};
+
+// 监听属性变化，重新生成二维码
+watch(
+    () => [
+      props.value,
+      props.logo,
+      props.size,
+      props.logoSizeRatio,
+      props.logoBackgroundColor,
+      props.logoBackgroundRadius,
+      props.logoPadding,
+      props.colorDark,
+      props.colorLight,
+      props.errorCorrectionLevel,
+      props.margin,
+    ],
+    () => {
+      generateQRCode();
+    },
+    { deep: false, immediate: false }
+);
+
+// 组件挂载时生成
+onMounted(() => {
+  generateQRCode();
+});
+
+// 组件卸载前清理（没有额外需要清理的定时器，但可重置generationId避免后续回调）
+onUnmounted(() => {
+  generationId++; // 使任何待处理的异步绘制任务失效
+});
+</script>
+
+<style scoped>
+.qr-code-container {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

package/packages/components/radio/index.ts

@@ -0,0 +1,10 @@
+import ZhRadio from './src/zh-radio.vue'
+import { App } from 'vue'
+
+export default {
+  install(app: App) {
+    app.component('ZhRadio', ZhRadio)
+  }
+}
+
+export { ZhRadio }

package/packages/components/radio/src/zh-radio.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { useNamespace } from '../../../utils/hooks/hooks.util'
+
+  const props = defineProps({
+    modelValue: {
+      type: String,
+      default: ''
+    },
+    label: {
+      type: [String, Number, Boolean]
+    },
+    size: {
+      type: String,
+      validator: (value: string) => {
+        return ['default', 'large', 'small'].includes(value)
+      }
+    },
+    name: {
+      type: String
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    border: {
+      type: Boolean,
+      default: false
+    }
+  })
+  const ns = useNamespace('radio')
+  const $emit = defineEmits(['update:modelValue', 'change'])
+  const selected = computed(() => props.modelValue === props.label)
+  const changeRadio = () => {
+    if (!props.disabled) {
+      $emit('update:modelValue', props.label)
+      $emit('change', props.label)
+    }
+  }
+</script>
+
+<template>
+  <label
+    :class="[
+      ns.b(),
+      ns.is(border, 'border'),
+      ns.is(disabled, 'disabled'),
+      selected && !disabled ? 'selected' : ''
+    ]"
+    class="cursor-pointer"
+    @click="changeRadio"
+  >
+    <span class="flex items-center">
+      <input
+        class="cursor-pointer"
+        type="radio"
+        :value="label"
+        :name="name"
+        :checked="selected"
+        :disabled="disabled"
+      />
+      <span class="ml-1.5 text-sm"><slot /></span>
+    </span>
+  </label>
+</template>
+
+<style scoped>
+  .zh-radio {
+    @apply inline-block p-2;
+  }
+  .selected {
+    @apply text-primary;
+  }
+  .is-border {
+    @apply border rounded;
+  }
+  .is-disabled {
+    @apply text-gray-400;
+  }
+  .is-border.selected {
+    @apply border-primary;
+  }
+  .zh-radio + .zh-radio {
+    margin-left: 12px;
+  }
+</style>

package/packages/components/searchForm/index.ts

@@ -0,0 +1,9 @@
+import ZhSearchForm from './src/zh-search-form.vue'
+import { App } from 'vue'
+
+export default {
+  install(app: App) {
+    app.component('ZhSearchForm', ZhSearchForm)
+  }
+}
+export { ZhSearchForm }