@ebiz/designer-components 0.0.57 → 0.0.59

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

@@ -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>