@ebiz/designer-components 0.0.18 → 0.0.19

package/src/components/EbizAvatar.vue

@@ -0,0 +1,116 @@
+<template>
+  <t-avatar
+    :alt="alt"
+    :badge-props="badgeProps"
+    :content="content"
+    :hide-on-load-error="hideOnLoadError"
+    :image="image"
+    :image-props="imageProps"
+    :shape="shape"
+    :size="size"
+    :style="customStyle"
+    @error="handleError"
+  >
+    <!-- 图标插槽 -->
+    <template v-if="$slots.icon" #icon>
+      <slot name="icon"></slot>
+    </template>
+    
+    <!-- 内容插槽 -->
+    <template v-if="$slots.content" #content>
+      <slot name="content"></slot>
+    </template>
+    
+    <!-- 默认插槽 -->
+    <slot>{{ content }}</slot>
+  </t-avatar>
+</template>
+
+<script>
+export default {
+  name: "EbizAvatar"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue';
+import { Avatar as TAvatar } from 'tdesign-vue-next';
+
+const props = defineProps({
+  // 头像替代文本
+  alt: {
+    type: String,
+    default: ''
+  },
+  // 徽标属性
+  badgeProps: {
+    type: Object,
+    default: () => ({})
+  },
+  // 头像内容
+  content: {
+    type: [String, Function],
+    default: ''
+  },
+  // 图片加载失败时是否隐藏
+  hideOnLoadError: {
+    type: Boolean,
+    default: false
+  },
+  // 头像图片地址
+  image: {
+    type: String,
+    default: ''
+  },
+  // 图片属性
+  imageProps: {
+    type: Object,
+    default: () => ({})
+  },
+  // 头像形状
+  shape: {
+    type: String,
+    default: 'circle',
+    validator: (val) => ['circle', 'round'].includes(val)
+  },
+  // 头像尺寸
+  size: {
+    type: String,
+    default: 'medium',
+    validator: (val) => ['small', 'medium', 'large'].includes(val) || /^(\d+px|\d+em|\d+rem|\d+%)$/.test(val)
+  },
+  // 自定义宽度
+  width: {
+    type: [String, Number],
+    default: ''
+  },
+  // 自定义高度
+  height: {
+    type: [String, Number],
+    default: ''
+  }
+});
+
+const emit = defineEmits(['error']);
+
+// 处理图片加载错误事件
+const handleError = (context) => {
+  emit('error', 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/EbizCheckbox.vue

@@ -0,0 +1,94 @@
+<template>
+    <t-checkbox
+        :checked="modelValue"
+        :default-checked="defaultChecked"
+        :disabled="disabled"
+        :indeterminate="indeterminate"
+        :label="label"
+        :name="name"
+        :readonly="readonly"
+        :value="value"
+        :check-all="checkAll"
+        :lazy-load="lazyLoad"
+        @change="handleChange"
+    >
+        <!-- 默认插槽 -->
+        <slot>{{ label }}</slot>
+    </t-checkbox>
+</template>
+
+<script>
+export default {
+    name: "EbizCheckbox"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Checkbox as TCheckbox } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 是否选中 (v-model)
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    // 默认是否选中
+    defaultChecked: {
+        type: Boolean,
+        default: false
+    },
+    // 是否禁用组件
+    disabled: {
+        type: Boolean,
+        default: undefined
+    },
+    // 是否为半选
+    indeterminate: {
+        type: Boolean,
+        default: false
+    },
+    // 主文案
+    label: {
+        type: String,
+        default: ''
+    },
+    // HTML 元素原生属性
+    name: {
+        type: String,
+        default: ''
+    },
+    // 只读状态
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    // 单个选项的值
+    value: {
+        type: [String, Number, Boolean],
+        default: undefined
+    },
+    // 用于标识是否为「全选选项」
+    checkAll: {
+        type: Boolean,
+        default: false
+    },
+    // 是否启用懒加载
+    lazyLoad: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits(['change', 'update:modelValue']);
+
+// 选中状态变化事件
+const handleChange = (checked, context) => {
+    emit('update:modelValue', checked);
+    emit('change', checked, context);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/EbizCheckboxGroup.vue

@@ -0,0 +1,70 @@
+<template>
+    <t-checkbox-group
+        :disabled="disabled"
+        :value="modelValue"
+        :default-value="defaultValue"
+        :options="options"
+        :max="max"
+        :name="name"
+        @change="handleChange"
+    >
+        <!-- 默认插槽 -->
+        <slot></slot>
+    </t-checkbox-group>
+</template>
+
+<script>
+export default {
+    name: "EbizCheckboxGroup"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { CheckboxGroup as TCheckboxGroup } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 是否禁用组件
+    disabled: {
+        type: Boolean,
+        default: undefined
+    },
+    // 选中值 (v-model)
+    modelValue: {
+        type: Array,
+        default: () => []
+    },
+    // 默认选中值
+    defaultValue: {
+        type: Array,
+        default: () => []
+    },
+    // 最大可选数量
+    max: {
+        type: Number,
+        default: undefined
+    },
+    // HTML 元素原生属性
+    name: {
+        type: String,
+        default: ''
+    },
+    // 以配置形式设置子元素
+    options: {
+        type: Array,
+        default: () => []
+    }
+});
+
+const emit = defineEmits(['change', 'update:modelValue']);
+
+// 选中值变化事件
+const handleChange = (value, context) => {
+    emit('update:modelValue', value);
+    emit('change', value, context);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/EbizDetailBlock.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="ebiz-detail-block">
+        <t-row v-for="(item, index) in detailItems" :key="index" class="detail-item">
+            <t-col :span="6" class="label" :style="labelStyle">{{ item.label }}</t-col>
+            <t-col :span="18" class="value" :style="valueStyle">{{ item.value }}</t-col>
+        </t-row>
+    </div>
+</template>
+
+<script lang="js" setup>
+import { computed, toRefs } from 'vue'
+import { Row as TRow, Col as TCol } from 'tdesign-vue-next'
+
+const props = defineProps({
+    model: {
+        type: Object,
+        default: () => { }
+    },
+    labelMap: {
+        type: Object,
+        default: () => { }
+    },
+    gap: {
+        type: [String, Number],
+        default: '0'
+    },
+    labelSize: {
+        type: [String, Number],
+        default: '14'
+    },
+    labelColor: {
+        type: String,
+        default: '#86909C'
+    },
+    valueSize: {
+        type: [String, Number],
+        default: '14'
+    },
+    valueColor: {
+        type: String,
+        default: '#0A0A0A'
+    }
+})
+
+const { model, labelMap, gap, labelSize, labelColor, valueSize, valueColor } = toRefs(props)
+
+const labelStyle = computed(() => ({
+    fontSize: typeof labelSize.value === 'number' ? `${labelSize.value}px` : labelSize.value,
+    color: labelColor.value,
+    marginBottom: typeof gap.value === 'number' ? `${gap.value}px` : gap.value
+}))
+
+const valueStyle = computed(() => ({
+    fontSize: typeof valueSize.value === 'number' ? `${valueSize.value}px` : valueSize.value,
+    color: valueColor.value
+}))
+
+const detailItems = computed(() => {
+    return Object.entries(model.value).map(([key, value]) => ({
+        label: labelMap.value[key] || key,
+        value: value || '--'
+    }))
+})
+</script>
+
+<style scoped>
+.ebiz-detail-block {
+    padding: 16px;
+}
+
+.detail-item {
+    line-height: 32px;
+}
+
+.label {
+    width: 50%;
+}
+
+.value {
+    width: 50%;
+}
+</style>

package/src/components/EbizDialog.vue

@@ -1,61 +1,249 @@
+<template>
+    <t-dialog
+        v-model:visible="dialogVisible"
+        :attach="attach"
+        :body-class="bodyClass"
+        :body-scroll-lock="bodyScrollLock"
+        :cancel-btn="cancelBtn"
+        :class-prefix="classPrefix"
+        :close-btn="closeBtn"
+        :close-on-esc-keydown="closeOnEscKeydown"
+        :close-on-overlay-click="closeOnOverlayClick"
+        :confirm-btn="confirmBtn"
+        :content="content"
+        :default-visible="defaultVisible"
+        :destroy-on-close="destroyOnClose"
+        :dialog-class="dialogClass"
+        :draggable="draggable"
+        :footer="footer"
+        :header="header"
+        :mode="mode"
+        :placement="placement"
+        :prevent-scroll-through="preventScrollThrough"
+        :show-overlay="showOverlay"
+        :top="top"
+        :width="width"
+        :zIndex="zIndex"
+        @cancel="handleCancel"
+        @close="handleClose"
+        @closed="handleClosed"
+        @confirm="handleConfirm"
+        @opened="handleOpened"
+        @overlay-click="handleOverlayClick"
+        @update:visible="handleUpdateVisible"
+    >
+        <!-- 默认插槽 -->
+        <slot></slot>
+        
+        <!-- 页脚插槽 -->
+        <template v-if="$slots.footer" #footer>
+            <slot name="footer"></slot>
+        </template>
+        
+        <!-- 头部插槽 -->
+        <template #header>
+            <slot name="header">{{ title }}</slot>
+        </template>
+    </t-dialog>
+</template>
+
+<script>
+export default {
+    name: "EbizDialog"
+}
+</script>
+
 <script setup>
-import { computed } from 'vue';
-import { TinyDialogBox } from '@opentiny/vue';
+import { ref, defineProps, defineEmits, watch } from 'vue';
+import { Dialog as TDialog } from 'tdesign-vue-next';
+
+// 定义组件接收的属性
 const props = defineProps({
-  title: {
-    type: String,
-    default: '弹窗标题'
-  },
-  slotHeader:{
-    type:Boolean,
-    default:false
-  },
-  width:{
-    type:String,
-    default:'30%'
-  },
-  // 开发值
-  devShow:{
-    type:Boolean,
-    default:true
-  },
-  // 绑定值
-  bindShow:{
-    type:Boolean,
-    default:false
-  },
-  center:{
-    type:Boolean,
-    default:false
-  },
-  showClose:{
-    type:Boolean,
-    default:true
-  },
-  draggable:{
-    type:Boolean,
-    default:false
-  },
-  // 是否绑定到body（嵌套的dialog必须设置为true）
-  appendToBody:{
-    type:Boolean,
-    default:false
-  }
-})
-const show = computed(()=>props.devShow || props.bindShow)
-</script>
+    // 对话框挂载的节点
+    attach: {
+        type: [String, Function, Element],
+        default: 'body'
+    },
+    // 对话框内容的类名
+    bodyClass: {
+        type: String,
+        default: ''
+    },
+    // 是否锁定body滚动
+    bodyScrollLock: {
+        type: Boolean,
+        default: true
+    },
+    // 取消按钮配置
+    cancelBtn: {
+        type: [String, Object, Boolean],
+        default: null
+    },
+    // 类名前缀
+    classPrefix: {
+        type: String,
+        default: 't'
+    },
+    // 关闭按钮配置
+    closeBtn: {
+        type: [String, Object, Boolean],
+        default: true
+    },
+    // 是否支持按ESC键关闭对话框
+    closeOnEscKeydown: {
+        type: Boolean,
+        default: true
+    },
+    // 点击蒙层是否关闭
+    closeOnOverlayClick: {
+        type: Boolean,
+        default: true
+    },
+    // 确认按钮配置
+    confirmBtn: {
+        type: [String, Object, Boolean],
+        default: '确认'
+    },
+    // 对话框内容
+    content: {
+        type: [String, Function],
+        default: ''
+    },
+    // 默认是否显示对话框
+    defaultVisible: {
+        type: Boolean,
+        default: false
+    },
+    // 关闭时是否销毁对话框
+    destroyOnClose: {
+        type: Boolean,
+        default: false
+    },
+    // 对话框样式类
+    dialogClass: {
+        type: String,
+        default: ''
+    },
+    // 是否可拖拽
+    draggable: {
+        type: Boolean,
+        default: false
+    },
+    // 底部内容
+    footer: {
+        type: [Boolean, Function],
+        default: true
+    },
+    // 头部内容
+    header: {
+        type: [Boolean, Function],
+        default: true
+    },
+    // 对话框类型
+    mode: {
+        type: String,
+        default: 'modal',
+        validator: (val) => ['modal', 'modeless', 'full-screen'].includes(val)
+    },
+    // 对话框位置
+    placement: {
+        type: String,
+        default: 'top',
+        validator: (val) => ['top', 'center'].includes(val)
+    },
+    // 防止滚动穿透
+    preventScrollThrough: {
+        type: Boolean,
+        default: true
+    },
+    // 是否显示遮罩层
+    showOverlay: {
+        type: Boolean,
+        default: true
+    },
+    // 对话框标题
+    title: {
+        type: [String, Function],
+        default: ''
+    },
+    // 距离顶部的位置
+    top: {
+        type: [String, Number],
+        default: '15%'
+    },
+    // 对话框可见性
+    visible: {
+        type: Boolean,
+        default: undefined
+    },
+    // 对话框宽度
+    width: {
+        type: [String, Number],
+        default: '500px'
+    },
+    // 对话框层级
+    zIndex: {
+        type: Number,
+        default: 2500
+    }
+});
 
-<template>
-  <div>
-    <tiny-dialog-box v-model:visible="show" :draggable="props.draggable" :close-on-click-modal="props.showClose" :showClose="props.showClose" :center="props.center" :appendToBody="props.appendToBody" :title="props.title" :width="props.width">
-      <template #title>
-        <slot name="title"></slot>
-      </template>
-      <slot name="content"></slot>
-    </tiny-dialog-box>
-  </div>
-</template>
+// 定义组件的事件
+const emit = defineEmits([
+    'cancel', 
+    'close', 
+    'closed',
+    'confirm',
+    'opened',
+    'overlay-click',
+    'update:visible'
+]);
 
-<style scoped lang="less">
+// 内部维护的可见性状态
+const dialogVisible = ref(props.visible !== undefined ? props.visible : props.defaultVisible);
+
+// 监听visible属性变化
+watch(() => props.visible, (newValue) => {
+    dialogVisible.value = newValue;
+});
+
+// 取消按钮点击事件
+const handleCancel = (e) => {
+    emit('cancel', e);
+};
+
+// 关闭事件
+const handleClose = (e) => {
+    emit('close', e);
+};
+
+// 关闭动画结束后触发
+const handleClosed = () => {
+    emit('closed');
+};
+
+// 确认按钮点击事件
+const handleConfirm = (e) => {
+    emit('confirm', e);
+};
+
+// 对话框打开动画结束后触发
+const handleOpened = () => {
+    emit('opened');
+};
+
+// 点击遮罩层触发
+const handleOverlayClick = (context) => {
+    emit('overlay-click', context);
+};
+
+// 可见性变化事件
+const handleUpdateVisible = (visible) => {
+    dialogVisible.value = visible;
+    emit('update:visible', visible);
+};
+</script>
 
-</style>
+<style lang="less" scoped>
+/* 自定义样式 */
+</style>