@ebiz/designer-components 0.0.18-beta.2 → 0.0.18-beta.3

package/src/components/EbizCheckbox.vue

@@ -1,94 +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>
-/* 自定义样式 */
+<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

@@ -1,70 +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>
-/* 自定义样式 */
+<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/EbizDivider.vue

@@ -1,97 +1,97 @@
-<template>
-    <div class="ebiz-divider" :style="dividerStyle">
-        <div v-if="showText && text" class="divider-text" :style="textStyle">
-            <slot>{{ text }}</slot>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { defineProps, computed } from 'vue';
-
-/**
- * EbizDivider 组件 - 可自定义颜色的分隔线组件
- * 支持自定义分隔线颜色、粗细、间距和文本
- */
-const props = defineProps({
-    /**
-     * 分隔线颜色
-     */
-    color: {
-        type: String,
-        default: '#e8e8e8'
-    },
-    /**
-     * 分隔线粗细
-     */
-    thickness: {
-        type: Number,
-        default: 1
-    },
-    /**
-     * 分隔线上下边距
-     */
-    margin: {
-        type: Number,
-        default: 24
-    },
-    /**
-     * 分隔线文本
-     */
-    text: {
-        type: String,
-        default: ''
-    },
-    /**
-     * 是否显示文本
-     */
-    showText: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 文本颜色
-     */
-    textColor: {
-        type: String,
-        default: '#333'
-    }
-});
-
-// 计算分隔线样式
-const dividerStyle = computed(() => {
-    return {
-        borderTop: `${props.thickness}px solid ${props.color}`,
-        margin: `${props.margin}px 0`,
-        position: props.showText ? 'relative' : 'inherit',
-        textAlign: 'center'
-    };
-});
-
-// 计算文本样式
-const textStyle = computed(() => {
-    return {
-        position: 'absolute',
-        top: '50%',
-        transform: 'translateY(-50%)',
-        backgroundColor: '#fff',
-        padding: '0 10px',
-        color: props.textColor
-    };
-});
-</script>
-
-<style scoped>
-.ebiz-divider {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-}
-
-.divider-text {
-    font-size: 14px;
-    font-weight: 500;
-}
+<template>
+    <div class="ebiz-divider" :style="dividerStyle">
+        <div v-if="showText && text" class="divider-text" :style="textStyle">
+            <slot>{{ text }}</slot>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { defineProps, computed } from 'vue';
+
+/**
+ * EbizDivider 组件 - 可自定义颜色的分隔线组件
+ * 支持自定义分隔线颜色、粗细、间距和文本
+ */
+const props = defineProps({
+    /**
+     * 分隔线颜色
+     */
+    color: {
+        type: String,
+        default: '#e8e8e8'
+    },
+    /**
+     * 分隔线粗细
+     */
+    thickness: {
+        type: Number,
+        default: 1
+    },
+    /**
+     * 分隔线上下边距
+     */
+    margin: {
+        type: Number,
+        default: 24
+    },
+    /**
+     * 分隔线文本
+     */
+    text: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 是否显示文本
+     */
+    showText: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 文本颜色
+     */
+    textColor: {
+        type: String,
+        default: '#333'
+    }
+});
+
+// 计算分隔线样式
+const dividerStyle = computed(() => {
+    return {
+        borderTop: `${props.thickness}px solid ${props.color}`,
+        margin: `${props.margin}px 0`,
+        position: props.showText ? 'relative' : 'inherit',
+        textAlign: 'center'
+    };
+});
+
+// 计算文本样式
+const textStyle = computed(() => {
+    return {
+        position: 'absolute',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        backgroundColor: '#fff',
+        padding: '0 10px',
+        color: props.textColor
+    };
+});
+</script>
+
+<style scoped>
+.ebiz-divider {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+}
+
+.divider-text {
+    font-size: 14px;
+    font-weight: 500;
+}
 </style> 

package/src/components/EbizEmployeeInfo.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="ebiz-employee-info" :style="customStyle">
+    <div class="employee-avatar">
+      <ebiz-avatar
+        :image="employeeInfo.avatar"
+        :content="avatarContent"
+        :size="avatarSize"
+        :shape="avatarShape"
+        :alt="employeeInfo.name"
+        @error="handleAvatarError"
+      />
+    </div>
+    <div class="employee-details">
+      <div class="employee-name">{{ employeeInfo.name }}</div>
+      <div class="employee-id" v-if="employeeInfo.id">ID: {{ employeeInfo.id }}</div>
+      <div class="employee-department" v-if="employeeInfo.department">{{ employeeInfo.department }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "EbizEmployeeInfo"
+}
+</script>
+
+<script setup>
+import { computed, defineProps, defineEmits } from 'vue';
+import EbizAvatar from './EbizAvatar.vue';
+
+const props = defineProps({
+  // 员工信息对象，包含头像、名称、工号、部门
+  info: {
+    type: Object,
+    required: true,
+    default: () => ({
+      avatar: '',
+      name: '',
+      id: '',
+      department: ''
+    })
+  },
+  // 头像尺寸
+  avatarSize: {
+    type: String,
+    default: 'medium',
+    validator: (val) => ['small', 'medium', 'large'].includes(val) || /^(\d+px|\d+em|\d+rem|\d+%)$/.test(val)
+  },
+  // 头像形状
+  avatarShape: {
+    type: String,
+    default: 'circle',
+    validator: (val) => ['circle', 'round'].includes(val)
+  },
+  // 自定义宽度
+  width: {
+    type: [String, Number],
+    default: ''
+  },
+  // 自定义高度
+  height: {
+    type: [String, Number],
+    default: ''
+  }
+});
+
+const emit = defineEmits(['avatar-error']);
+
+// 从props获取员工信息，提供默认值
+const employeeInfo = computed(() => {
+  return {
+    avatar: props.info.avatar || '',
+    name: props.info.name || '未知',
+    id: props.info.id || '',
+    department: props.info.department || ''
+  };
+});
+
+// 生成头像内容（当没有提供头像图片时使用员工姓名首字母）
+const avatarContent = computed(() => {
+  if (employeeInfo.value.name) {
+    return employeeInfo.value.name.charAt(0);
+  }
+  return '';
+});
+
+// 处理头像加载错误
+const handleAvatarError = (context) => {
+  emit('avatar-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>
+.ebiz-employee-info {
+  display: flex;
+  align-items: center;
+
+  .employee-avatar {
+    margin-right: 16px;
+  }
+
+  .employee-details {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .employee-name {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 4px;
+  }
+
+  .employee-id {
+    font-size: 13px;
+    color: #666;
+    margin-bottom: 2px;
+  }
+
+  .employee-department {
+    font-size: 13px;
+    color: #666;
+  }
+}
+</style>