zhui-plus 1.0.0 → 1.0.10

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

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+  import { useNamespace } from '../../../utils/hooks/hooks.util'
+  import { computed, nextTick, ref } from 'vue'
+
+  const props = defineProps({
+    modelValue: {
+      type: [Boolean, Number, String],
+      default: false
+    },
+    activeValue: {
+      type: [Boolean, Number, String],
+      default: true
+    },
+    inactiveValue: {
+      type: [Boolean, Number, String],
+      default: false
+    },
+    activeColor: {
+      type: String,
+      default: '#409EFF'
+    },
+    inactiveColor: {
+      type: String,
+      default: '#DCDFE6'
+    },
+    activeText: {
+      type: String
+    },
+    inactiveText: {
+      type: String
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    inlinePrompt: {
+      type: Boolean,
+      default: false
+    }
+  })
+  const $emit = defineEmits(['update:modelValue', 'change'])
+  const ns = useNamespace('switch')
+  // 是否被选中
+  const checked = computed(() => props.modelValue === props.activeValue)
+  const bgColorStyle = computed(() => {
+    return checked.value
+      ? ns.sy(props.activeColor, 'backgroundColor')
+      : ns.sy(props.inactiveColor, 'backgroundColor')
+  })
+  const textStyle = computed(() => (is: Boolean) => {
+    const is_ = is ? checked.value : !checked.value
+    return ns.is_sy(is_, ns.sy(props.activeColor, 'color'))
+  })
+  const input = ref()
+  const handleInput = () => {
+    const val = checked.value ? props.inactiveValue : props.activeValue
+    $emit('update:modelValue', val)
+    $emit('change', val)
+    nextTick(() => {
+      input.value!.checked = checked.value
+    })
+  }
+  const switchValue = () => {
+    if (props.disabled || props.loading) return
+    handleInput()
+  }
+</script>
+
+<template>
+  <div
+    :class="[
+      ns.b(),
+      ns.is(checked, 'checked'),
+      ns.is(disabled, 'disabled'),
+      ns.is(loading, 'loading')
+    ]"
+    @click.prevent="switchValue"
+  >
+    <input
+      id="zh-switch__input"
+      ref="input"
+      type="checkbox"
+      class="absolute w-0 h-0 m-0"
+      :checked="checked"
+      :disabled="disabled"
+      @change="handleInput"
+    />
+    <span v-if="!inlinePrompt && activeText" class="mr-2" :style="textStyle(false)">{{
+      activeText
+    }}</span>
+
+    <span class="zh-switch__main-core" :style="bgColorStyle">
+      <span v-if="checked && inlinePrompt && activeText" class="zh-switch__in left-1.5">{{
+        activeText[0]
+      }}</span>
+      <div class="zh-switch__action">
+        <zh-icon
+          v-if="loading"
+          name="loading"
+          class="text-gray-400 animate-spin"
+          :style="textStyle(loading)"
+        />
+      </div>
+      <span v-if="!checked && inlinePrompt && inactiveText" class="zh-switch__in right-1.5">{{
+        inactiveText[0]
+      }}</span>
+    </span>
+
+    <span v-if="!inlinePrompt && inactiveText" class="ml-2" :style="textStyle(true)">{{
+      inactiveText
+    }}</span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .zh-switch {
+    height: 32px;
+    margin: 0;
+    @apply inline-flex items-center align-middle;
+  }
+  #zh-switch__input {
+    opacity: 0;
+  }
+  .zh-switch__main-core {
+    height: 20px;
+    width: 40px;
+    transition: all 0.3s ease-in-out;
+    @apply inline-block relative rounded-full cursor-pointer;
+  }
+  .zh-switch__action {
+    height: 16px;
+    width: 16px;
+    top: 1.5px;
+    left: 1px;
+    transition: all 0.3s ease-in-out;
+    @apply rounded-full bg-white absolute flex justify-center items-center;
+  }
+  .zh-switch.is-checked .zh-switch__action {
+    left: 100% !important;
+    margin-left: -17px;
+  }
+  .zh-switch + .zh-switch {
+    margin-left: 12px;
+  }
+  .is-disabled {
+    @apply opacity-60;
+  }
+  .is-loading {
+    @extend .is-disabled;
+  }
+  .is-disabled .zh-switch__main-core {
+    @apply cursor-not-allowed;
+  }
+  .zh-switch__in {
+    font-size: 12px;
+    @apply absolute text-white;
+  }
+</style>

package/packages/components/table/index.ts

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

package/packages/components/table/src/types.ts

@@ -0,0 +1,62 @@
+import type {VNode, Component} from 'vue';
+
+export interface Column {
+    prop: string;                             // 字段名
+    label: string;                            // 列标题
+    width?: string | number;
+    minWidth?: string | number;
+    fixed?: 'left' | 'right';
+    align?: 'left' | 'center' | 'right';
+    headerAlign?: 'left' | 'center' | 'right';
+    showOverflowTooltip?: boolean;
+    sortable?: boolean | 'custom';
+
+    /** 多级表头 */
+    children?: Column[];
+
+    /** 文本格式化（返回字符串） */
+    formatter?: (row: any, column: Column, cellValue: any, index: number) => string;
+
+    /** JSX / h 渲染函数 */
+    render?: (scope: { row: any; column: Column; $index: number }) => VNode | string;
+
+    /** 动态组件 */
+    component?: string | Component;
+    /** 动态组件的 props，支持函数以获取当前行数据 */
+    componentProps?: (scope: { row: any; $index: number }) => Record<string, any>;
+    /** 动态组件的事件绑定 */
+    componentEvents?: (scope: { row: any; $index: number }) => Record<string, (...args: any[]) => void>;
+
+    /** 合并方式：'auto' 同列相邻相同值自动合并，或自定义合并函数 */
+    merge?: 'auto' | ((data: any[], currentRow: any, currentIndex: number) => { rowspan: number; colspan: number });
+}
+
+export interface PaginationConfig {
+    show?: boolean;
+    /** 分页模式：前端假分页或后端分页 */
+    type?: 'front' | 'backend';
+    align?: 'left' | 'center' | 'right';
+    currentPage?: number;
+    pageSize?: number;
+    total?: number;
+    style?: any;
+    pageSizes?: number[];
+    layout?: string;
+    /** 页码或页大小改变时触发 */
+    onChange?: (page: number, size: number) => void;
+}
+
+export interface ProTableProps {
+    columns: Column[];
+    data: any[];
+    pagination?: PaginationConfig | boolean;   // true 等价于默认分页
+    spanMethod?: (data: any) => any;           // 自定义 span-method
+    loading?: boolean;
+    border?: boolean;
+    stripe?: boolean;
+    height?: string | number;
+    maxHeight?: string | number;
+    rowKey?: string;
+    paginationLayout?: any
+    // ... 其它 el-table 原生属性均可透传
+}

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

@@ -0,0 +1,220 @@
+<template>
+  <div class="zh-table">
+    <el-table
+        v-bind="$attrs"
+        :data="displayData"
+        :border="border"
+        :stripe="stripe"
+        :height="height"
+        :max-height="maxHeight"
+        :span-method="computedSpanMethod"
+        :loading="loading"
+        :row-key="rowKey"
+        v-on="tableEvents"
+    >
+      <!-- 递归渲染多级列 -->
+      <template v-for="col in columns" :key="col.prop">
+        <el-table-column v-bind="getColumnProps(col)">
+          <!-- 多级表头 -->
+          <template v-if="col.children">
+            <el-table-column
+                v-for="child in col.children"
+                :key="child.prop"
+                v-bind="getColumnProps(child)"
+                :column="child"
+                :scope="{}"
+            />
+          </template>
+          <!-- 自定义单元格内容 -->
+          <template v-if="!col.children" #default="scope">
+            <!-- 优先使用具名插槽 -->
+            <slot
+                :name="`column-${col.prop}`"
+                :row="scope.row"
+                :column="col"
+                :$index="scope.$index"
+            >
+              <!-- render 函数（JSX） -->
+              <component
+                  v-if="col.render"
+                  :is="renderWrapper(col.render, { row: scope.row, column: col, $index: scope.$index })"
+              />
+              <!-- 动态组件（内嵌 switch、rate、chart 等） -->
+              <component
+                  v-else-if="col.component"
+                  :is="col.component"
+                  v-bind="col.componentProps ? col.componentProps({ row: scope.row, $index: scope.$index }) : {}"
+                  v-on="col.componentEvents ? col.componentEvents({ row: scope.row, $index: scope.$index }) : {}"
+              />
+              <!-- formatter 格式化 -->
+              <span v-else-if="col.formatter">
+                {{ col.formatter(scope.row, col, scope.row[col.prop], scope.$index) }}
+              </span>
+              <!-- 默认直接显示字段 -->
+              <span v-else>{{ scope.row[col.prop] }}</span>
+            </slot>
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+
+    <!-- 分页 -->
+    <div v-if="paginationConfig.show"
+         class="zh-pagination_wrapper"
+         :style="{'justify-content':POSITION[paginationConfig.align],...paginationConfig.style}">
+      <el-pagination
+          v-model:current-page="internalCurrentPage"
+          v-model:page-size="internalPageSize"
+          :total="paginationConfig.total ?? totalForFront"
+          :page-sizes="paginationConfig.pageSizes ?? [10, 20, 50, 100]"
+          :layout="paginationConfig.layout ?? 'total, sizes, prev, pager, next, jumper'"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, watch, type VNode} from 'vue';
+import type {ProTableProps, Column, PaginationConfig} from './types';
+
+const POSITION = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end'
+}
+const props = withDefaults(defineProps<ProTableProps>(), {
+  border: true,
+  stripe: false,
+  rowKey: 'id',
+  loading: false,
+  pagination: undefined,
+  height: 'auto',
+  maxHeight: '100%',
+});
+
+const emit = defineEmits<{
+  (e: 'page-change', page: number, size: number): void;
+  (e: 'update:data', data: any[]): void;
+}>();
+
+// ---------- 分页内部状态 ----------
+const defaultPageSize = 20;
+const internalCurrentPage = ref(1);
+const internalPageSize = ref(defaultPageSize);
+
+// 解析分页配置
+const paginationConfig = computed<PaginationConfig>(() => {
+  if (props.pagination === false || props.pagination === undefined) {
+    return {show: false};
+  }
+  if (props.pagination === true) {
+    return {show: true, align: 'right', type: 'front',style:{}, currentPage: 1, pageSize: defaultPageSize};
+  }
+  return {
+    show: true,
+    type: 'front',
+    align: 'right',
+    style:{},
+    currentPage: 1,
+    pageSize: defaultPageSize,
+    ...props.pagination,
+  };
+});
+
+// 同步外部页数（若外部受控）
+watch(() => paginationConfig.value.currentPage, (val) => {
+  if (val !== undefined) internalCurrentPage.value = val;
+}, {immediate: true});
+watch(() => paginationConfig.value.pageSize, (val) => {
+  if (val !== undefined) internalPageSize.value = val;
+}, {immediate: true});
+
+// 前端模式下 total 自动取数据长度
+const totalForFront = computed(() => props.data.length);
+
+// 计算展示的数据（前端切片）
+const displayData = computed(() => {
+  if (paginationConfig.value.type === 'backend' || !paginationConfig.value.show) {
+    return props.data;
+  }
+  const start = (internalCurrentPage.value - 1) * internalPageSize.value;
+  const end = start + internalPageSize.value;
+  console.log('props.data', props.data)
+  return props.data.slice(start, end);
+});
+
+// 分页事件处理
+const handleSizeChange = (size: number) => {
+  internalCurrentPage.value = 1;
+  emit('page-change', internalCurrentPage.value, size);
+};
+const handleCurrentChange = (page: number) => {
+  emit('page-change', page, internalPageSize.value);
+};
+
+// ---------- 合并单元格 ----------
+const computedSpanMethod = computed(() => {
+  // 如果用户传了自定义 spanMethod，优先使用
+  if (props.spanMethod) return props.spanMethod;
+
+  // 收集所有需要自动合并的列
+  const autoMergeCols = props.columns.filter(col => col.merge === 'auto');
+  if (autoMergeCols.length === 0) return undefined;
+
+  // 生成合并信息映射
+  return ({row, column, rowIndex}: any) => {
+    const colConfig = props.columns.find(c => c.prop === column.property);
+    if (!colConfig || colConfig.merge !== 'auto') return {rowspan: 1, colspan: 1};
+
+    // 查找同列相邻相同值的范围
+    const currentValue = row[column.property];
+    const allData = displayData.value;
+    let rowspan = 1;
+    // 向上保留第一个
+    for (let i = rowIndex - 1; i >= 0; i--) {
+      if (allData[i][column.property] === currentValue) {
+        return {rowspan: 0, colspan: 0}; // 已被上方合并，隐藏
+      } else {
+        break;
+      }
+    }
+    // 向下扩展
+    for (let i = rowIndex + 1; i < allData.length; i++) {
+      if (allData[i][column.property] === currentValue) {
+        rowspan++;
+      } else {
+        break;
+      }
+    }
+    return {rowspan, colspan: 1};
+  };
+});
+
+// 递归 props 转 el-table-column 属性
+const getColumnProps = (col: Column) => {
+  const {render, component, componentProps, componentEvents, formatter, merge, children, ...rest} = col;
+  return rest;
+};
+
+// 包装 render 函数为 Vue 可渲染的内容
+const renderWrapper = (renderFn: Function, scope: any): VNode | string => {
+  return renderFn(scope);
+};
+
+// 透传原生 el-table 事件
+const tableEvents = {
+  // 可选择性绑定
+};
+</script>
+<style lang="scss" scoped>
+.zh-pagination_wrapper {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  padding: 24px 0;
+  text-align: right;
+}
+</style>
+

package/packages/components/upload/index.ts

@@ -0,0 +1,15 @@
+import ZhUpload from './src/zh-upload.vue'
+import ZhUploadCard from "./src/zh-uploadCard.vue";
+import ZhUploadDialog from './src/zh-uploadDialog.vue'
+import ZhCupload from './src/zh-cupload.vue'
+import { App } from 'vue'
+
+export default {
+  install(app: App) {
+    app.component('ZhUpload', ZhUpload)
+    app.component('ZhUploadCard', ZhUploadCard)
+    app.component('ZhUploadDialog', ZhUploadDialog)
+    app.component('ZhCupload', ZhCupload)
+  }
+}
+export { ZhUpload,ZhUploadCard,ZhUploadDialog,ZhCupload }

package/packages/components/upload/src/zh-cupload.vue

@@ -0,0 +1,147 @@
+<template>
+  <div :style="{ textAlign: field.buttonPosition ?? 'left',width:'100%',height:'100%' }">
+    <el-upload style="width: 100%"
+               :ref="setUploadRef"
+               :file-list="fileList"
+               :accept="field.accept"
+               :http-request="field.customRequest"
+               :list-type="field.listType ?? 'text'"
+               :limit="field.maxCount"
+               :disabled="disabled"
+               :drag="field.uploadTrigger === 'dragger'"
+               :auto-upload="autoUpload"
+               :before-upload="handleBeforeUpload"
+               :on-success="handleSuccess"
+               :on-remove="handleRemove"
+               v-bind="field.events"
+    >
+      <!-- 拖拽区域 -->
+      <template v-if="field.uploadTrigger === 'dragger'">
+        <slot v-if="field.draggerSlot" :name="field.draggerSlot" :field="field"/>
+        <div v-else class="zh-upload-dragger-default">
+          <el-icon>
+            <upload-filled/>
+          </el-icon>
+          <div>拖拽文件到此处或<em>点击上传</em></div>
+        </div>
+      </template>
+      <!-- 按钮形式 -->
+      <template v-else>
+        <el-button :style="field.buttonStyle" :disabled="disabled" type="primary">
+          {{ field.buttonText || '点击上传' }}
+        </el-button>
+      </template>
+
+      <!-- 文件卡片插槽 -->
+      <template v-if="field.listType === 'picture-card'" #file="{ file }">
+        <slot v-if="field.fileCardSlot" :name="field.fileCardSlot" :file="file"/>
+        <template v-else>
+          <img class="el-upload-list__item-thumbnail" :src="file.url"/>
+          <span class="el-upload-list__item-actions">
+            <span class="el-upload-list__item-preview" @click="handlePreview(file)">
+              <el-icon><zoom-in/></el-icon>
+            </span>
+            <span class="el-upload-list__item-delete" @click="handleRemove(file)">
+              <el-icon><delete/></el-icon>
+            </span>
+          </span>
+        </template>
+      </template>
+    </el-upload>
+
+    <!-- 手动上传按钮 -->
+    <div v-if="!autoUpload && fileList.length" style="margin-top:8px">
+      <el-button type="success" @click="triggerUpload">
+        开始上传 {{ field.label }}
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref, watch, inject, onUnmounted} from 'vue'
+import {ElMessage} from 'element-plus'
+import type {UploadInstance, UploadUserFile} from 'element-plus'
+import type {UploadConfig} from '../../../types'
+import {UploadFilled} from "@element-plus/icons-vue";
+
+const props = defineProps<{
+  field: UploadConfig
+  modelValue: any[]
+  disabled: boolean
+}>()
+
+const emit = defineEmits(['update:modelValue', 'fieldEvent'])
+
+const uploadRefMap = inject<Map<string, UploadInstance>>('uploadRefMap')
+const formRef = inject<any>('formRef')
+
+const autoUpload = props.field.autoUpload ?? false
+const fileList = ref<UploadUserFile[]>(props.modelValue || [])
+const uploadRef = ref<UploadInstance>()
+
+const setUploadRef = (el: any) => {
+  uploadRef.value = el
+  if (uploadRefMap && el) {
+    uploadRefMap.set(props.field.field, el)
+  }
+}
+
+onUnmounted(() => {
+  if (uploadRefMap) {
+    uploadRefMap.delete(props.field.field)
+  }
+})
+
+watch(() => props.modelValue, (val) => {
+  fileList.value = val || []
+})
+
+const triggerUpload = () => {
+  uploadRef.value?.submit()
+}
+
+const handleBeforeUpload = (file: File) => {
+  if (props.field.maxSize) {
+    const isLt = file.size / 1024 / 1024 < props.field.maxSize
+    if (!isLt) {
+      ElMessage.error(`文件大小不能超过 ${props.field.maxSize}MB`)
+      return false
+    }
+  }
+  return true
+}
+
+const handleSuccess = (response: any, uploadFile: UploadUserFile) => {
+  const newList = [...fileList.value]
+  const index = newList.findIndex(f => f.uid === uploadFile.uid)
+  if (index !== -1) newList.splice(index, 1, uploadFile)
+  else newList.push(uploadFile)
+  emit('update:modelValue', newList)
+
+  if (props.field.clearValidateOnSuccess && formRef) {
+    formRef.clearValidate(props.field.field)
+  }
+}
+
+const handleRemove = (uploadFile: UploadUserFile) => {
+  const newList = fileList.value.filter(f => f.uid !== uploadFile.uid)
+  emit('update:modelValue', newList)
+}
+
+const handlePreview = (file: UploadUserFile) => {
+  window.open(file.url!, '_blank')
+}
+</script>
+<style lang="scss" scoped>
+.zh-upload-dragger-default {
+  min-width: 100%;
+  min-height: 100%;
+}
+
+:deep(.el-upload-list),
+:deep(.el-upload.is-drag) {
+  width: 100%;
+  height: 100%;
+}
+</style>