zhui-plus 1.0.0 → 1.0.10

package/packages/components/searchForm/src/zh-search-form.vue

@@ -0,0 +1,340 @@
+<template>
+  <el-form
+      :model="formData"
+      :label-width="labelWidth"
+      :size="size"
+      class="search-form"
+  >
+    <el-row :gutter="gutter">
+      <!-- 第一行固定显示项 -->
+      <el-col
+          v-for="item in firstRowItems"
+          :key="item.prop"
+          :span="item.span || defaultSpan"
+      >
+        <el-form-item :label="item.label" :prop="item.prop">
+          <!-- 自定义插槽（具名插槽名为 prop） -->
+          <slot
+              v-if="$slots[item.prop]"
+              :name="item.prop"
+              :value="formData[item.prop]"
+              :update="(val: any) => updateForm(item.prop, val)"
+          />
+          <!-- 内置控件 -->
+          <template v-else>
+            <!-- 输入框 -->
+            <el-input
+                v-if="item.type === 'input'"
+                v-model="formData[item.prop]"
+                :placeholder="item.placeholder || '请输入'"
+                :clearable="item.clearable ?? true"
+                v-bind="item.attrs"
+            />
+            <!-- 下拉框（支持远程/本地搜索） -->
+            <el-select
+                v-else-if="item.type === 'select'"
+                v-model="formData[item.prop]"
+                :placeholder="item.placeholder || '请选择'"
+                :clearable="item.clearable ?? true"
+                :filterable="item.remote ? true : (item.filterable ?? true)"
+                :remote="item.remote ?? false"
+                :remote-method="item.remote ? item.remoteMethod : undefined"
+                :loading="item.remote ? item.loading : false"
+                v-bind="item.attrs"
+            >
+              <el-option
+                  v-for="opt in item.options"
+                  :key="opt.value"
+                  :label="opt.label"
+                  :value="opt.value"
+              />
+            </el-select>
+            <!-- 日期选择器 -->
+            <el-date-picker
+                v-else-if="item.type === 'date'"
+                v-model="formData[item.prop]"
+                :type="item.dateType || 'date'"
+                :placeholder="item.placeholder || '请选择日期'"
+                :clearable="item.clearable ?? true"
+                v-bind="item.attrs"
+            />
+          </template>
+        </el-form-item>
+      </el-col>
+
+      <!-- 折叠区域（带过渡动画） -->
+      <Transition name="search-form-collapse">
+        <el-col
+            v-if="!collapsed && overflowItems.length > 0"
+            :span="24"
+            class="collapse-col"
+        >
+          <el-row :gutter="gutter">
+            <el-col
+                v-for="item in overflowItems"
+                :key="item.prop"
+                :span="item.span || defaultSpan"
+            >
+              <el-form-item :label="item.label" :prop="item.prop">
+                <slot
+                    v-if="$slots[item.prop]"
+                    :name="item.prop"
+                    :value="formData[item.prop]"
+                    :update="(val: any) => updateForm(item.prop, val)"
+                />
+                <template v-else>
+                  <!-- 此处与第一行逻辑一致，已抽取为可复用函数，为简洁未重复写出 -->
+                  <el-input
+                      v-if="item.type === 'input'"
+                      v-model="formData[item.prop]"
+                      :placeholder="item.placeholder || '请输入'"
+                      :clearable="item.clearable ?? true"
+                      v-bind="item.attrs"
+                  />
+                  <el-select
+                      v-else-if="item.type === 'select'"
+                      v-model="formData[item.prop]"
+                      :placeholder="item.placeholder || '请选择'"
+                      :clearable="item.clearable ?? true"
+                      :filterable="item.remote ? true : (item.filterable ?? true)"
+                      :remote="item.remote ?? false"
+                      :remote-method="item.remote ? item.remoteMethod : undefined"
+                      :loading="item.remote ? item.loading : false"
+                      v-bind="item.attrs"
+                  >
+                    <el-option
+                        v-for="opt in item.options"
+                        :key="opt.value"
+                        :label="opt.label"
+                        :value="opt.value"
+                    />
+                  </el-select>
+                  <el-date-picker
+                      v-else-if="item.type === 'date'"
+                      v-model="formData[item.prop]"
+                      :type="item.dateType || 'date'"
+                      :placeholder="item.placeholder || '请选择日期'"
+                      :clearable="item.clearable ?? true"
+                      v-bind="item.attrs"
+                  />
+                </template>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-col>
+      </Transition>
+
+      <!-- 按钮区域（始终显示） -->
+      <el-col :span="24" v-if="showButtons">
+        <div class="search-form__buttons" :class="buttonAlignClass">
+          <slot
+              v-if="$slots.buttons"
+              name="buttons"
+              :search="handleSearch"
+              :reset="handleReset"
+              :toggle-collapse="toggleCollapse"
+              :collapsed="collapsed"
+              :export="handleExport"
+              :import="handleImport"
+          />
+          <template v-else>
+            <div class="left">
+              <el-button
+                  v-if="showCollapse && items.length > cols"
+                  text
+                  type="primary"
+                  @click="toggleCollapse"
+              >
+                {{ collapsed ? collapseTexts[0] : collapseTexts[1] }}
+                <el-icon class="ml-1">
+                  <ArrowUp v-if="!collapsed" />
+                  <ArrowDown v-else />
+                </el-icon>
+              </el-button>
+            </div>
+            <div class="right">
+              <el-button v-if="showSearch" type="primary" @click="handleSearch">
+                {{ searchText }}
+              </el-button>
+              <el-button v-if="showReset" @click="handleReset">
+                {{ resetText }}
+              </el-button>
+              <el-button v-if="showExport" @click="handleExport">
+                {{ exportText }}
+              </el-button>
+              <el-button v-if="showImport" @click="handleImport">
+                {{ importText }}
+              </el-button>
+            </div>
+          </template>
+        </div>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, useSlots } from 'vue'
+import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
+import type { SearchFormItem } from '../../../types'
+
+// -------------------- Props --------------------
+interface Props {
+  modelValue: Record<string, any>
+  items: SearchFormItem[]
+  cols?: number
+  gutter?: number
+  showSearch?: boolean
+  showReset?: boolean
+  showCollapse?: boolean
+  showExport?: boolean
+  showImport?: boolean
+  searchText?: string
+  resetText?: string
+  collapseTexts?: [string, string]
+  exportText?: string
+  importText?: string
+  labelWidth?: string
+  size?: 'large' | 'default' | 'small'
+  defaultValues?: Record<string, any>
+  buttonAlign?: 'right' | 'space-between'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  cols: 3,
+  gutter: 20,
+  showSearch: true,
+  showReset: true,
+  showCollapse: true,
+  showExport: false,
+  showImport: false,
+  searchText: '查询',
+  resetText: '重置',
+  collapseTexts: () => ['展开', '收起'],
+  exportText: '导出',
+  importText: '导入',
+  labelWidth: '100px',
+  size: 'default',
+  defaultValues: () => ({}),
+  buttonAlign: 'right'
+})
+
+// -------------------- Emits --------------------
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: Record<string, any>): void
+  (e: 'search', value: Record<string, any>): void
+  (e: 'reset', value: Record<string, any>): void
+  (e: 'export'): void
+  (e: 'import'): void
+  (e: 'collapse-change', collapsed: boolean): void
+}>()
+
+const slots = useSlots()
+
+// -------------------- 内部状态 --------------------
+const collapsed = ref(true)
+
+// 表单双向绑定
+const formData = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+// 默认每列栅格数
+const defaultSpan = computed(() => Math.floor(24 / props.cols))
+
+// 第一行显示的项
+const firstRowItems = computed(() => props.items.slice(0, props.cols))
+
+// 超出折叠的项
+const overflowItems = computed(() => props.items.slice(props.cols))
+
+// 是否显示按钮区域
+const showButtons = computed(() => {
+  return (
+      props.showSearch ||
+      props.showReset ||
+      props.showExport ||
+      props.showImport ||
+      (props.showCollapse && props.items.length > props.cols) ||
+      slots.buttons
+  )
+})
+
+// 按钮对齐样式
+const buttonAlignClass = computed(() =>
+    props.buttonAlign === 'space-between' ? 'is-space-between' : 'is-right'
+)
+
+// -------------------- 方法 --------------------
+const updateForm = (prop: string, value: any) => {
+  formData.value = { ...formData.value, [prop]: value }
+}
+
+const handleSearch = () => emit('search', { ...formData.value })
+
+const handleReset = () => {
+  const resetData = { ...props.defaultValues }
+  formData.value = resetData
+  emit('reset', resetData)
+}
+
+const toggleCollapse = () => {
+  collapsed.value = !collapsed.value
+  emit('collapse-change', collapsed.value)
+}
+
+const handleExport = () => emit('export')
+const handleImport = () => emit('import')
+</script>
+
+<style scoped lang="scss">
+.search-form {
+  &__buttons {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    width: 100%;
+    padding: 8px 0;
+    &.is-space-between {
+      justify-content: space-between;
+    }
+    .left {
+      flex-shrink: 0;
+    }
+    .right {
+      display: flex;
+      gap: 12px;
+    }
+  }
+}
+
+.ml-1 {
+  margin-left: 4px;
+}
+
+/* ---------- 折叠过渡动画 ---------- */
+.collapse-col {
+  overflow: hidden;
+}
+
+.search-form-collapse-enter-active,
+.search-form-collapse-leave-active {
+  transition: all 0.3s ease;
+  overflow: hidden;
+}
+.search-form-collapse-enter-from,
+.search-form-collapse-leave-to {
+  max-height: 0;
+  opacity: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.search-form-collapse-enter-to,
+.search-form-collapse-leave-from {
+  max-height: 600px; /* 足够大，能容纳所有展开项 */
+  opacity: 1;
+}
+</style>

package/packages/components/signature/index.ts

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

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

@@ -0,0 +1,355 @@
+<!-- SignaturePad.vue -->
+<template>
+  <div class="signature-pad" :class="{ 'is-disabled': disabled }">
+    <canvas
+        ref="canvasRef"
+        class="signature-canvas"
+        :width="width"
+        :height="height"
+        :style="{ width: '100%', height: 'auto', cursor: disabled ? 'not-allowed' : 'crosshair' }"
+        @mousedown="startDrawing"
+        @mousemove="draw"
+        @mouseup="endDrawing"
+        @mouseleave="endDrawing"
+        @touchstart="startDrawing"
+        @touchmove="draw"
+        @touchend="endDrawing"
+        @touchcancel="endDrawing"
+    ></canvas>
+
+    <div v-if="showControls" class="signature-controls">
+      <button type="button" @click="clear" :disabled="disabled">清除</button>
+      <button v-if="showUndo" type="button" @click="undo" :disabled="disabled || !canUndo">撤销</button>
+      <button v-if="showSaveBtn" type="button" @click="saveAsImage" :disabled="disabled">保存为图片</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
+
+// ---------- 组件 Props ----------
+interface Props {
+  modelValue?: string | null
+  width?: number
+  height?: number
+  penColor?: string
+  penWidth?: number
+  bgColor?: string
+  disabled?: boolean
+  showControls?: boolean
+  maxHistorySteps?: number
+  showUndo?: boolean
+  showSaveBtn?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  width: 800,
+  height: 400,
+  penColor: '#000000',
+  penWidth: 2,
+  bgColor: '#ffffff',
+  disabled: false,
+  showControls: true,
+  maxHistorySteps: 30,
+  showUndo: true,
+  showSaveBtn: true
+})
+
+// ---------- Emits ----------
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | null): void
+  (e: 'change', value: string | null): void
+}>()
+
+// ---------- DOM ----------
+const canvasRef = ref<HTMLCanvasElement | null>(null)
+let ctx: CanvasRenderingContext2D | null = null
+
+// ---------- 绘制状态 ----------
+let isDrawing = false
+let lastX = 0
+let lastY = 0
+
+// ---------- 历史记录（重点修复：将 currentHistoryIndex 改为 ref）----------
+interface HistoryItem {
+  imageData: ImageData
+}
+const historyStack = ref<HistoryItem[]>([])
+const currentHistoryIndex = ref(-1)   // ✅ 改为响应式变量
+const canUndo = ref(true)            // 可直接计算，但保留用于模板
+
+function updateCanUndo() {
+  canUndo.value = currentHistoryIndex.value > 0
+}
+
+// 保存当前画布状态到历史
+function saveToHistory() {
+  if (!ctx || !canvasRef.value) return
+
+  // 如果当前不在历史末尾，则丢弃后面的所有历史
+  if (currentHistoryIndex.value < historyStack.value.length - 1) {
+    historyStack.value = historyStack.value.slice(0, currentHistoryIndex.value + 1)
+  }
+
+  const imageData = ctx.getImageData(0, 0, props.width, props.height)
+  historyStack.value.push({ imageData })
+
+  // 限制历史长度
+  while (historyStack.value.length > props.maxHistorySteps) {
+    historyStack.value.shift()
+    if (currentHistoryIndex.value > 0) currentHistoryIndex.value--
+  }
+  currentHistoryIndex.value = historyStack.value.length - 1
+  console.log( currentHistoryIndex.value,historyStack.value)
+  updateCanUndo()
+}
+
+// 恢复到指定历史索引
+function restoreFromHistory(index: number) {
+  if (!ctx || !canvasRef.value || index < 0 || index >= historyStack.value.length) return
+  const item = historyStack.value[index]
+  ctx.putImageData(item.imageData, 0, 0)
+  currentHistoryIndex.value = index
+  updateCanUndo()
+  emitUpdateValue()
+}
+
+// 撤销
+function undo() {
+  if (props.disabled || !canUndo.value || !currentHistoryIndex.value) return
+  restoreFromHistory(currentHistoryIndex.value - 1)
+}
+
+// 清空
+function clear() {
+  if (props.disabled) return
+  clearCanvas(true)
+}
+
+function clearCanvas(resetHistory = true) {
+  currentHistoryIndex.value=-1
+  if (!ctx) return
+  fillBackground()
+  if (resetHistory) {
+    saveToHistory()
+  }
+  emitUpdateValue()
+}
+
+// ---------- 辅助函数 ----------
+function getCanvasCoords(e: MouseEvent | TouchEvent): { x: number; y: number } {
+  const canvas = canvasRef.value
+  if (!canvas) return { x: 0, y: 0 }
+  const rect = canvas.getBoundingClientRect()
+  const scaleX = canvas.width / rect.width
+  const scaleY = canvas.height / rect.height
+
+  let clientX: number, clientY: number
+  if ('touches' in e) {
+    if (e.touches.length === 0) return { x: 0, y: 0 }
+    clientX = e.touches[0].clientX
+    clientY = e.touches[0].clientY
+  } else {
+    clientX = e.clientX
+    clientY = e.clientY
+  }
+
+  const offsetX = clientX - rect.left
+  const offsetY = clientY - rect.top
+  return {
+    x: Math.max(0, Math.min(canvas.width, offsetX * scaleX)),
+    y: Math.max(0, Math.min(canvas.height, offsetY * scaleY))
+  }
+}
+
+function fillBackground() {
+  if (!ctx) return
+  ctx.save()
+  ctx.globalCompositeOperation = 'source-over'
+  ctx.fillStyle = props.bgColor
+  ctx.fillRect(0, 0, props.width, props.height)
+  ctx.restore()
+}
+
+function emitUpdateValue() {
+  if (!canvasRef.value) return
+  const dataURL = canvasRef.value.toDataURL('image/png')
+  emit('update:modelValue', dataURL)
+  emit('change', dataURL)
+}
+
+async function loadImageFromDataURL(dataURL: string | null) {
+  if (!ctx || !canvasRef.value || !dataURL) return
+  const img = new Image()
+  img.crossOrigin = 'Anonymous'
+  return new Promise<void>((resolve, reject) => {
+    img.onload = () => {
+      fillBackground()
+      ctx!.drawImage(img, 0, 0, props.width, props.height)
+      // 重置历史
+      historyStack.value = []
+      saveToHistory()  // 内部会 push 当前图片状态并更新索引
+      resolve()
+    }
+    img.onerror = () => reject(new Error('加载签名图片失败'))
+    img.src = dataURL
+  }).catch(err => {
+    console.warn('加载签名图片失败', err)
+    clearCanvas(true)
+  })
+}
+
+// ---------- 绘图核心 ----------
+function startDrawing(e: MouseEvent | TouchEvent) {
+  if (props.disabled) return
+  e.preventDefault()
+  const { x, y } = getCanvasCoords(e)
+  isDrawing = true
+  lastX = x
+  lastY = y
+  if (!ctx) return
+  ctx.beginPath()
+  ctx.moveTo(x, y)
+  ctx.lineTo(x + 0.1, y + 0.1)
+  ctx.stroke()
+}
+
+function draw(e: MouseEvent | TouchEvent) {
+  if (!isDrawing || props.disabled) return
+  e.preventDefault()
+  const { x, y } = getCanvasCoords(e)
+  if (!ctx) return
+  ctx.save()
+  ctx.strokeStyle = props.penColor
+  ctx.lineWidth = props.penWidth
+  ctx.lineCap = 'round'
+  ctx.lineJoin = 'round'
+  ctx.beginPath()
+  ctx.moveTo(lastX, lastY)
+  ctx.lineTo(x, y)
+  ctx.stroke()
+  lastX = x
+  lastY = y
+  ctx.restore()
+}
+
+function endDrawing() {
+  if (!isDrawing || props.disabled) return
+  isDrawing = false
+  if (ctx) {
+    ctx.closePath()
+    saveToHistory()   // 绘制结束保存状态
+    emitUpdateValue()
+  }
+}
+
+function saveAsImage(filename = 'signature.png') {
+  if (!canvasRef.value) return
+  const link = document.createElement('a')
+  link.download = filename
+  link.href = canvasRef.value.toDataURL('image/png')
+  link.click()
+}
+
+// ---------- 生命周期与监听 ----------
+onMounted(() => {
+  if (!canvasRef.value) return
+  ctx = canvasRef.value.getContext('2d')
+  if (!ctx) return
+  fillBackground()
+  if (props.modelValue) {
+    loadImageFromDataURL(props.modelValue).then(() => updateCanUndo())
+  } else {
+    saveToHistory()
+  }
+  updateCanUndo()
+})
+
+watch(
+    () => props.modelValue,
+    async (newVal, oldVal) => {
+      if (newVal === oldVal) return
+      if (newVal && typeof newVal === 'string') {
+       !currentHistoryIndex.value && await loadImageFromDataURL(newVal)
+      } else if (!newVal) {
+        clearCanvas(true)
+      }
+      updateCanUndo()
+    }
+)
+
+watch([() => props.bgColor, () => props.penColor, () => props.penWidth], () => {
+  if (!ctx || !canvasRef.value) return
+  const currentImageData = ctx.getImageData(0, 0, props.width, props.height)
+  fillBackground()
+  ctx.putImageData(currentImageData, 0, 0)
+})
+
+watch([() => props.width, () => props.height], () => {
+  nextTick(() => {
+    if (!ctx || !canvasRef.value) return
+    fillBackground()
+    if (props.modelValue) {
+      loadImageFromDataURL(props.modelValue)
+    } else {
+      saveToHistory()
+    }
+  })
+})
+
+onUnmounted(() => {
+  // 无需额外清理
+})
+defineExpose({
+  undo,
+  saveAsImage
+})
+</script>
+
+<style scoped>
+/* 样式同前，保持不变 */
+.signature-pad {
+  display: inline-block;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background: #f9f9f9;
+  padding: 8px;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.signature-canvas {
+  display: block;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  touch-action: none;
+}
+.signature-controls {
+  margin-top: 12px;
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+}
+.signature-controls button {
+  padding: 6px 16px;
+  font-size: 14px;
+  border: none;
+  background: #2c3e50;
+  color: white;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: 0.2s;
+}
+.signature-controls button:hover:not(:disabled) {
+  background: #1e2b36;
+}
+.signature-controls button:disabled {
+  background: #b0bec5;
+  cursor: not-allowed;
+}
+.is-disabled .signature-canvas {
+  opacity: 0.7;
+  filter: grayscale(0.1);
+}
+</style>

package/packages/components/switch/index.ts

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