@ebiz/designer-components 0.0.18 → 0.0.19

package/src/components/TdesignFormItem.vue

@@ -0,0 +1,106 @@
+<template>
+    <t-form-item
+        :for="htmlFor"
+        :help="help"
+        :label="label"
+        :label-align="labelAlign"
+        :label-width="labelWidth"
+        :name="name"
+        :required-mark="requiredMark"
+        :rules="rules"
+        :show-error-message="showErrorMessage"
+        :status="status"
+        :success-border="successBorder"
+        :status-icon="statusIcon"
+    >
+        <template v-if="$slots.label" #label>
+            <slot name="label"></slot>
+        </template>
+        
+        <template v-if="$slots.help" #help>
+            <slot name="help"></slot>
+        </template>
+        
+        <slot></slot>
+    </t-form-item>
+</template>
+
+<script>
+export default {
+    name: "EbizTdesignFormItem"
+}
+</script>
+
+<script setup>
+import { defineProps } from 'vue';
+import { FormItem as TFormItem } from 'tdesign-vue-next';
+
+defineProps({
+    // label原生属性
+    htmlFor: {
+        type: String,
+        default: ''
+    },
+    // 表单项说明内容
+    help: {
+        type: String,
+        default: ''
+    },
+    // 字段标签名称
+    label: {
+        type: String,
+        default: ''
+    },
+    // 表单字段标签对齐方式
+    labelAlign: {
+        type: String,
+        default: undefined,
+        validator: (val) => ['left', 'right', 'top'].includes(val)
+    },
+    // 标签宽度
+    labelWidth: {
+        type: [String, Number],
+        default: undefined
+    },
+    // 表单字段名称
+    name: {
+        type: String,
+        default: ''
+    },
+    // 是否显示必填符号
+    requiredMark: {
+        type: Boolean,
+        default: false
+    },
+    // 表单字段校验规则
+    rules: {
+        type: Array,
+        default: () => []
+    },
+    // 校验不通过时，是否显示错误提示信息
+    showErrorMessage: {
+        type: Boolean,
+        default: undefined
+    },
+    // 校验状态
+    status: {
+        type: String,
+        default: '',
+        validator: (val) => ['', 'success', 'warning', 'error', 'validating'].includes(val)
+    },
+    // 是否显示校验成功的边框
+    successBorder: {
+        type: Boolean,
+        default: false
+    },
+    // 是否显示校验状态图标
+    statusIcon: {
+        type: [Boolean, Function],
+        default: undefined
+    }
+});
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/TdesignGrid.vue

@@ -0,0 +1,56 @@
+<template>
+    <t-row
+        :align="align"
+        :justify="justify"
+        :gutter="gutter"
+        :tag="tag"
+        :gap="gap"
+    >
+        <slot></slot>
+    </t-row>
+</template>
+
+<script>
+export default {
+    name: "EbizGrid"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Row as TRow } from 'tdesign-vue-next';
+
+defineProps({
+    // 垂直对齐方式
+    align: {
+        type: String,
+        default: undefined,
+        validator: (val) => ['start', 'end', 'center', 'stretch', 'baseline'].includes(val)
+    },
+    // 水平排列方式
+    justify: {
+        type: String,
+        default: undefined,
+        validator: (val) => ['start', 'end', 'center', 'space-around', 'space-between'].includes(val)
+    },
+    // 栅格间隔，示例：16、[16, 16]
+    gutter: {
+        type: [Number, Array, Object],
+        default: 0
+    },
+    // 自定义元素标签
+    tag: {
+        type: String,
+        default: 'div'
+    },
+    // 间隔，示例：'0'、'xs' 或 { xs: '4px', sm: '6px', md: '12px' }
+    gap: {
+        type: [String, Number, Object, Array],
+        default: undefined
+    }
+});
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/TdesignIcon.vue

@@ -0,0 +1,68 @@
+<template>
+  <t-icon
+    :name="name"
+    :size="size"
+    :url="url"
+    :style="customStyle"
+    @click="handleClick"
+  />
+</template>
+
+<script>
+export default {
+  name: "EbizTdesignIcon"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue';
+import { Icon as TIcon } from 'tdesign-vue-next';
+
+const props = defineProps({
+  // 图标名称
+  name: {
+    type: String,
+    required: true
+  },
+  // 图标尺寸
+  size: {
+    type: String,
+    default: 'medium',
+    validator: (val) => ['small', 'medium', 'large'].includes(val) || /^(\d+px|\d+em|\d+rem|\d+%)$/.test(val)
+  },
+  // 图标颜色
+  color: {
+    type: String,
+    default: ''
+  },
+  // 图标地址
+  url: {
+    type: [String, Array],
+    default: undefined
+  },
+  // 是否加载组件库内置图标
+  loadDefaultIcons: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const emit = defineEmits(['click']);
+
+// 处理点击事件
+const handleClick = (e) => {
+  emit('click', { e });
+};
+
+// 计算样式
+const customStyle = computed(() => {
+  if (props.color) {
+    return { color: props.color };
+  }
+  return {};
+});
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/TdesignImage.vue

@@ -0,0 +1,163 @@
+<template>
+    <t-image 
+        :alt="alt"
+        :error="error"
+        :fit="fit"
+        :gallery="gallery"
+        :lazy="lazy"
+        :loading="loading"
+        :overlay-content="overlayContent"
+        :overlay-trigger="overlayTrigger"
+        :placeholder="placeholder"
+        :position="position"
+        :referrer-policy="referrerPolicy"
+        :shape="shape"
+        :src="src"
+        :style="customStyle"
+        @error="handleError"
+        @load="handleLoad"
+        @click="handleClick"
+    >
+        <!-- 默认插槽 -->
+        <slot></slot>
+        
+        <!-- 加载中占位内容插槽 -->
+        <template v-if="$slots.loading" #loading>
+            <slot name="loading"></slot>
+        </template>
+        
+        <!-- 加载失败占位内容插槽 -->
+        <template v-if="$slots.error" #error>
+            <slot name="error"></slot>
+        </template>
+        
+        <!-- 自定义悬浮内容插槽 -->
+        <template v-if="$slots.overlayContent" #overlay-content>
+            <slot name="overlayContent"></slot>
+        </template>
+        
+        <!-- 自定义占位符插槽 -->
+        <template v-if="$slots.placeholder" #placeholder>
+            <slot name="placeholder"></slot>
+        </template>
+    </t-image>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue';
+import { Image as TImage } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 图片描述
+    alt: {
+        type: String,
+        default: ''
+    },
+    // 图片加载失败时显示的内容，默认为空
+    error: {
+        type: [String, Function],
+        default: ''
+    },
+    // 图片填充模式
+    fit: {
+        type: String,
+        default: 'fill',
+        validator: (val) => ['contain', 'cover', 'fill', 'none', 'scale-down'].includes(val)
+    },
+    // 是否展示为图集模式
+    gallery: {
+        type: Boolean,
+        default: false
+    },
+    // 是否开启图片懒加载
+    lazy: {
+        type: Boolean,
+        default: false
+    },
+    // 图片加载中时显示的内容，默认为空
+    loading: {
+        type: [String, Function],
+        default: ''
+    },
+    // 自定义图片的宽度
+    width: {
+        type: [String, Number],
+        default: ''
+    },
+    // 自定义图片的高度
+    height: {
+        type: [String, Number],
+        default: ''
+    },
+    // 悬浮显示的内容
+    overlayContent: {
+        type: [String, Function],
+        default: ''
+    },
+    // 悬浮内容出现的时机
+    overlayTrigger: {
+        type: String,
+        default: 'hover',
+        validator: (val) => ['hover', 'always'].includes(val)
+    },
+    // 占位符
+    placeholder: {
+        type: [String, Function],
+        default: ''
+    },
+    // 等同于原生的 object-position
+    position: {
+        type: String,
+        default: 'center'
+    },
+    // 等同于原生的 referrerPolicy
+    referrerPolicy: {
+        type: String,
+        default: ''
+    },
+    // 图片圆角类型
+    shape: {
+        type: String,
+        default: 'square',
+        validator: (val) => ['circle', 'round', 'square'].includes(val)
+    },
+    // 图片链接
+    src: {
+        type: String,
+        default: ''
+    }
+});
+
+const emit = defineEmits(['error', 'load', 'click']);
+
+// 处理加载失败事件
+const handleError = (context) => {
+    emit('error', context);
+};
+
+// 处理加载成功事件
+const handleLoad = (context) => {
+    emit('load', context);
+};
+
+// 处理点击事件
+const handleClick = (context) => {
+    emit('click', context);
+};
+
+// 计算样式
+const customStyle = computed(() => {
+    const style = {};
+    if (props.width) {
+        style.width = typeof props.width === 'number' ? `${props.width}px` : props.width;
+    }
+    if (props.height) {
+        style.height = typeof props.height === 'number' ? `${props.height}px` : props.height;
+    }
+    return style;
+});
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/TdesignImageViewer.vue

@@ -0,0 +1,201 @@
+<template>
+    <div>
+        <!-- 触发器 -->
+        <div @click="toggleShow" class="image-viewer-trigger">
+            <slot>
+                <t-button v-if="!triggerElement" theme="primary">
+                    {{ triggerText }}
+                </t-button>
+            </slot>
+        </div>
+        
+        <!-- 图片查看器 -->
+        <t-image-viewer
+            v-model:visible="visible"
+            :closeBtn="closeBtn"
+            :closeOnEscKeydown="closeOnEscKeydown"
+            :closeOnOverlay="closeOnOverlay"
+            :draggable="draggable"
+            :imageReferrerpolicy="imageReferrerpolicy"
+            :imageScale="imageScale"
+            :images="images"
+            :index="currentIndex"
+            :mode="mode"
+            :showOverlay="showOverlay"
+            :title="title"
+            :viewerScale="viewerScale"
+            :zIndex="zIndex"
+            @change="handleChange"
+            @close="handleClose"
+            @scale="handleScale"
+        >
+            <!-- 控制按钮插槽 -->
+            <template v-if="$slots.control" #control>
+                <slot name="control"></slot>
+            </template>
+            
+            <!-- 额外操作按钮插槽 -->
+            <template v-if="$slots.operation" #operation>
+                <slot name="operation"></slot>
+            </template>
+            
+            <!-- 缩略图底部插槽 -->
+            <template v-if="$slots.thumbnailsBottom" #thumbnails-bottom>
+                <slot name="thumbnailsBottom"></slot>
+            </template>
+            
+            <!-- 标题插槽 -->
+            <template v-if="$slots.title" #title>
+                <slot name="title"></slot>
+            </template>
+        </t-image-viewer>
+    </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, ref, watch } from 'vue';
+import { ImageViewer as TImageViewer, Button as TButton } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 是否显示关闭按钮
+    closeBtn: {
+        type: Boolean,
+        default: true
+    },
+    // 按下 ESC 时是否触发图片预览器关闭
+    closeOnEscKeydown: {
+        type: Boolean,
+        default: true
+    },
+    // 点击遮罩层时是否触发关闭
+    closeOnOverlay: {
+        type: Boolean,
+        default: true
+    },
+    // 缩略图默认显示下标
+    defaultIndex: {
+        type: Number,
+        default: 0
+    },
+    // 是否允许拖拽调整位置
+    draggable: {
+        type: Boolean,
+        default: true
+    },
+    // 图片预览中的图片引用策略
+    imageReferrerpolicy: {
+        type: String,
+        default: 'never'
+    },
+    // 图片缩放相关配置
+    imageScale: {
+        type: Object,
+        default: () => ({
+            max: 3,
+            min: 0.1,
+            step: 0.1
+        })
+    },
+    // 图片数组
+    images: {
+        type: Array,
+        default: () => []
+    },
+    // 特殊的模式，包括常规模式和简洁模式
+    mode: {
+        type: String,
+        default: 'normal',
+        validator: (val) => ['normal', 'simple'].includes(val)
+    },
+    // 是否显示遮罩层
+    showOverlay: {
+        type: Boolean,
+        default: true
+    },
+    // 自定义触发元素
+    triggerElement: {
+        type: [String, Function],
+        default: ''
+    },
+    // 触发按钮文本
+    triggerText: {
+        type: String,
+        default: '查看图片'
+    },
+    // 标题
+    title: {
+        type: [String, Function],
+        default: ''
+    },
+    // 是否显示（非受控）
+    defaultVisible: {
+        type: Boolean,
+        default: false
+    },
+    // 是否显示（受控）
+    visible: {
+        type: Boolean,
+        default: undefined
+    },
+    // 查看器缩放相关配置
+    viewerScale: {
+        type: Object,
+        default: () => ({
+            max: 10,
+            min: 0.1,
+            step: 0.1
+        })
+    },
+    // 层级
+    zIndex: {
+        type: Number,
+        default: 2000
+    }
+});
+
+const emit = defineEmits(['change', 'close', 'scale', 'update:visible']);
+
+// 内部可见状态
+const visible = ref(props.defaultVisible);
+
+// 同步外部visible和内部visible
+watch(() => props.visible, (newValue) => {
+    if (newValue !== undefined) {
+        visible.value = newValue;
+    }
+});
+
+// 当前索引
+const currentIndex = ref(props.defaultIndex);
+
+// 切换显示状态
+const toggleShow = () => {
+    visible.value = !visible.value;
+    emit('update:visible', visible.value);
+};
+
+// 处理图片切换事件
+const handleChange = (index, context) => {
+    currentIndex.value = index;
+    emit('change', index, context);
+};
+
+// 处理关闭事件
+const handleClose = (context) => {
+    visible.value = false;
+    emit('update:visible', false);
+    emit('close', context);
+};
+
+// 处理缩放事件
+const handleScale = (scale, context) => {
+    emit('scale', scale, context);
+};
+</script>
+
+<style lang="less" scoped>
+.image-viewer-trigger {
+    display: inline-block;
+    cursor: pointer;
+}
+</style>