@ebiz/designer-components 0.1.0 → 0.1.2

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/EbizDropdown.vue

@@ -0,0 +1,117 @@
+<template>
+    <t-dropdown :disabled="disabled" :direction="direction" :hideAfterItemClick="hideAfterItemClick"
+        :max-column-width="maxColumnWidth" :max-height="maxHeight" :min-column-width="minColumnWidth" :options="options"
+        :placement="placement" :popupProps="popupProps" :trigger="trigger" @click="handleClick"
+        @visible-change="handleVisibleChange">
+        <!-- 默认触发器内容插槽 -->
+        <template v-if="$slots.default" #default>
+            <slot></slot>
+        </template>
+
+        <!-- 下拉菜单插槽 -->
+        <template v-if="$slots.dropdown" #dropdown>
+            <slot name="dropdown"></slot>
+        </template>
+
+        <!-- 自定义选项内容插槽 -->
+        <template v-if="$slots.options" #options>
+            <slot name="options"></slot>
+        </template>
+    </t-dropdown>
+</template>
+
+<script>
+export default {
+    name: "EbizDropdown"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Dropdown as TDropdown } from 'tdesign-vue-next';
+
+defineProps({
+    // 是否禁用组件
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    // 多层级操作时，子层级展开方向
+    direction: {
+        type: String,
+        default: 'right',
+        validator: (val) => ['left', 'right'].includes(val)
+    },
+    // 点击选项后是否自动隐藏弹层
+    hideAfterItemClick: {
+        type: Boolean,
+        default: true
+    },
+    // 选项最大宽度，内容超出时，显示为省略号
+    maxColumnWidth: {
+        type: String,
+        default: '100px'
+    },
+    // 弹窗最大高度，单位：px
+    maxHeight: {
+        type: Number,
+        default: 300
+    },
+    // 选项最小宽度
+    minColumnWidth: {
+        type: String,
+        default: '10px'
+    },
+    // 下拉操作项
+    options: {
+        type: Array,
+        default: () => []
+    },
+    // 弹窗出现位置
+    placement: {
+        type: String,
+        default: 'bottom-left',
+        validator: (val) => [
+            'top', 'top-left', 'top-right',
+            'bottom', 'bottom-left', 'bottom-right',
+            'left', 'left-top', 'left-bottom',
+            'right', 'right-top', 'right-bottom'
+        ].includes(val)
+    },
+    // 透传 Popup 组件属性
+    popupProps: {
+        type: Object,
+        default: () => ({})
+    },
+    // 触发下拉显示的方式
+    trigger: {
+        type: String,
+        default: 'hover',
+        validator: (val) => ['hover', 'click', 'focus', 'context-menu'].includes(val)
+    }
+});
+
+const emit = defineEmits(['click', 'visible-change']);
+
+const handleClick = (data) => {
+    emit('click', data);
+};
+
+const handleVisibleChange = (visible, context) => {
+    emit('visible-change', visible, context);
+};
+</script>
+
+<style lang="less" scoped>
+/* TDesign主题样式定制 */
+:deep(.t-dropdown) {
+    .t-dropdown__trigger {
+        cursor: pointer;
+    }
+}
+
+:deep(.t-dropdown__menu) {
+    max-height: 300px;
+    overflow-y: auto;
+}
+</style>

package/src/components/EbizDropdownItem.vue

@@ -0,0 +1,81 @@
+<template>
+    <t-dropdown-item :content="content" :disabled="disabled" :divider="divider" :value="value" @click="handleClick">
+        <!-- 默认内容插槽 -->
+        <template v-if="$slots.default" #default>
+            <slot></slot>
+        </template>
+
+        <!-- 前缀图标插槽 -->
+        <template v-if="$slots.prefixIcon" #prefixIcon>
+            <slot name="prefixIcon"></slot>
+        </template>
+
+        <!-- 后缀图标插槽 -->
+        <template v-if="$slots.suffixIcon" #suffixIcon>
+            <slot name="suffixIcon"></slot>
+        </template>
+    </t-dropdown-item>
+</template>
+
+<script>
+export default {
+    name: "EbizDropdownItem"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { DropdownItem as TDropdownItem } from 'tdesign-vue-next';
+
+defineProps({
+    // 下拉操作项内容
+    content: {
+        type: [String, Function],
+        default: ''
+    },
+    // 是否禁用
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    // 是否显示操作项之间的分隔线（分隔线默认在下方）
+    divider: {
+        type: Boolean,
+        default: false
+    },
+    // 下拉操作项唯一标识
+    value: {
+        type: [String, Number, Object],
+        default: undefined
+    }
+});
+
+const emit = defineEmits(['click']);
+
+const handleClick = (data, context) => {
+    emit('click', data, context);
+};
+</script>
+
+<style lang="less" scoped>
+/* TDesign主题样式定制 */
+:deep(.t-dropdown-item) {
+    &:hover {
+        background-color: var(--td-bg-color-container-hover);
+    }
+
+    &.t-is-disabled {
+        color: var(--td-text-color-disabled);
+        cursor: not-allowed;
+
+        &:hover {
+            background-color: transparent;
+        }
+    }
+}
+
+:deep(.t-dropdown-item__divider) {
+    margin: 4px 0;
+    border-bottom: 1px solid var(--td-border-level-1-color);
+}
+</style>

package/src/components/EbizEmployeeInfo.vue

@@ -1,139 +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;
-  }
-}
+<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>