@ebiz/designer-components 0.0.18 → 0.0.19

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> 

package/src/components/EbizFileUpload.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="ebiz-file-upload">
+    <tiny-pop-upload
+      ref="uploadRef"
+      v-model="fileList"
+      :action="uploadUrl"
+      :headers="headers"
+      :multiple="multiple"
+      :accept="accept"
+      :size-limit="sizeLimit"
+      :disabled="disabled"
+      :draggable="draggable"
+      :theme="theme"
+      :tips="tips"
+      :show-upload-progress="showUploadProgress"
+      :before-upload="handleBeforeUpload"
+      :on-success="handleSuccess"
+      :on-error="handleError"
+      :button-text="buttonText"
+      :button-size="buttonSize"
+      :button-type="buttonType"
+      :button-plain="buttonPlain"
+      @change="handleChange"
+    >
+      <template #default v-if="customTrigger">
+        <slot name="trigger"></slot>
+      </template>
+    </tiny-pop-upload>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, defineProps, defineEmits } from 'vue';
+import { PopUpload as TinyPopUpload } from '@opentiny/vue';
+
+/**
+ * EbizFileUpload 组件 - 基于 OpenTiny PopUpload 的文件上传组件
+ * 支持自定义上传地址、文件类型限制、大小限制、多文件上传等
+ * 提供成功和失败的回调处理
+ */
+const props = defineProps({
+  /**
+   * 上传地址
+   */
+  action: {
+    type: String,
+    default: '/api/file/upload'
+  },
+  /**
+   * 上传请求头信息
+   */
+  headers: {
+    type: Object,
+    default: () => ({})
+  },
+  /**
+   * 是否允许多文件上传
+   */
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 接受上传的文件类型
+   */
+  accept: {
+    type: String,
+    default: '*'
+  },
+  /**
+   * 文件大小限制，单位 KB
+   */
+  sizeLimit: {
+    type: Number,
+    default: 5 * 1024  // 默认5MB
+  },
+  /**
+   * 是否禁用上传
+   */
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 是否支持拖拽上传
+   */
+  draggable: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 上传组件主题
+   */
+  theme: {
+    type: String,
+    default: 'text',
+    validator: (val) => ['text', 'button', 'both'].includes(val)
+  },
+  /**
+   * 上传按钮文本
+   */
+  buttonText: {
+    type: String,
+    default: '上传文件'
+  },
+  /**
+   * 上传提示文本
+   */
+  tips: {
+    type: String,
+    default: ''
+  },
+  /**
+   * 是否显示上传进度
+   */
+  showUploadProgress: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 初始文件列表
+   */
+  initialFiles: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * 按钮大小
+   */
+  buttonSize: {
+    type: String,
+    default: 'medium',
+    validator: (val) => ['medium', 'small', 'mini'].includes(val)
+  },
+  /**
+   * 按钮类型
+   */
+  buttonType: {
+    type: String,
+    default: 'primary',
+    validator: (val) => ['default', 'primary', 'success', 'warning', 'danger', 'info', 'text'].includes(val)
+  },
+  /**
+   * 按钮是否为朴素按钮
+   */
+  buttonPlain: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 是否使用自定义触发器
+   */
+  customTrigger: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['update:files', 'success', 'error', 'change']);
+
+// 文件列表状态
+const fileList = ref(props.initialFiles || []);
+
+// 计算上传地址
+const uploadUrl = computed(() => props.action);
+
+// 上传前处理
+const handleBeforeUpload = (_file) => {
+  // 可以在这里添加文件校验逻辑
+  return true;
+};
+
+// 上传成功处理
+const handleSuccess = (response, file, fileList) => {
+  emit('success', { file, response, fileList });
+};
+
+// 上传失败处理
+const handleError = (error, file, fileList) => {
+  emit('error', { file, error, fileList });
+};
+
+// 文件变更处理
+const handleChange = (file, fileList) => {
+  emit('update:files', fileList);
+  emit('change', { file, fileList });
+};
+
+// 监听initialFiles变化更新文件列表
+watch(() => props.initialFiles, (newFiles) => {
+  if (newFiles && newFiles.length > 0) {
+    fileList.value = [...newFiles];
+  }
+});
+</script>
+
+<style scoped>
+.ebiz-file-upload {
+  width: 100%;
+  margin: 16px 0;
+}
+</style> 

package/src/components/EbizPageHeader.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="ebiz-page-header">
+    <div>
+      <div style="display: flex; align-items: center;">
+        <t-breadcrumb>
+          <t-breadcrumb-item :to="{ path: '/' }">
+            <template #icon><t-icon name="home" /></template>首页
+          </t-breadcrumb-item>
+          <t-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
+            <template #icon v-if="item.icon">
+              <t-icon :name="item.icon" />
+            </template>
+            {{ item.title }}
+          </t-breadcrumb-item>
+        </t-breadcrumb>
+      </div>
+      <slot></slot>
+    </div>
+    <div style="display: flex; align-items: center;">
+      <slot name="right"></slot>
+      <div class="help-doc" @click="goToHelp">
+        <t-icon name="chat-bubble-help-filled"></t-icon>
+        <span>帮助文档</span>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { Breadcrumb as TBreadcrumb, BreadcrumbItem as TBreadcrumbItem, Icon as TIcon } from "tdesign-vue-next"
+
+const router = useRouter()
+const route = useRoute()
+
+const breadcrumbList = ref([])
+
+// 计算面包屑导航列表
+const generateBreadcrumb = () => {
+  const matched = route.matched
+  if (!matched.length) return
+
+  const result = []
+  matched.forEach(route => {
+    if (route.meta && route.meta.title) {
+      result.push({
+        title: route.meta.title,
+        icon: route.meta.icon || '',
+        path: route.path
+      })
+    }
+  })
+
+  breadcrumbList.value = result
+}
+
+// 跳转到帮助文档页面
+const goToHelp = () => {
+  router.push(`/help?route=${route.path}`)
+}
+
+// 监听路由变化
+watch(() => route.path, () => {
+  generateBreadcrumb()
+}, { immediate: true })
+
+onMounted(() => {
+  generateBreadcrumb()
+})
+</script>
+
+<style scoped>
+.ebiz-page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.help-doc {
+  display: flex;
+  align-items: center;
+  color: var(--td-brand-color);
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.help-doc:hover {
+  opacity: 0.8;
+}
+
+.help-doc span {
+  margin-left: 4px;
+}
+</style> 

package/src/components/EbizPagination.vue

@@ -0,0 +1,163 @@
+<template>
+    <t-pagination
+        :current="current"
+        :defaultCurrent="defaultCurrent"
+        :defaultPageSize="defaultPageSize"
+        :disabled="disabled"
+        :foldedMaxPageBtn="foldedMaxPageBtn"
+        :hideOnSinglePage="hideOnSinglePage"
+        :maxPageBtn="maxPageBtn"
+        :pageEllipsisMode="pageEllipsisMode"
+        :pageSize="pageSize"
+        :pageSizeOptions="pageSizeOptions"
+        :selectProps="selectProps"
+        :showFirstAndLastPageBtn="showFirstAndLastPageBtn"
+        :showJumper="showJumper"
+        :showPageNumber="showPageNumber"
+        :showPageSize="showPageSize"
+        :showPreviousAndNextBtn="showPreviousAndNextBtn"
+        :size="size"
+        :theme="theme"
+        :total="total"
+        :totalContent="totalContent"
+        @change="handleChange"
+    >
+        <!-- 如果有totalContent插槽，使用插槽内容 -->
+        <template v-if="$slots.totalContent" #totalContent>
+            <slot name="totalContent"></slot>
+        </template>
+        
+        <!-- 如果有pageNumber插槽，使用插槽内容 -->
+        <template v-if="$slots.pageNumber" #pageNumber>
+            <slot name="pageNumber"></slot>
+        </template>
+    </t-pagination>
+</template>
+
+<script>
+export default {
+    name: "EbizPagination"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Pagination as TPagination } from 'tdesign-vue-next';
+
+defineProps({
+    // 当前页
+    current: {
+        type: Number,
+        default: undefined
+    },
+    // 默认当前页
+    defaultCurrent: {
+        type: Number,
+        default: 1
+    },
+    // 默认每页显示条数
+    defaultPageSize: {
+        type: Number,
+        default: 10
+    },
+    // 是否禁用分页
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    // 折叠时最多显示的页码按钮数
+    foldedMaxPageBtn: {
+        type: Number,
+        default: 5
+    },
+    // 当只有一页时是否隐藏分页
+    hideOnSinglePage: {
+        type: Boolean,
+        default: false
+    },
+    // 最多显示的页码按钮数
+    maxPageBtn: {
+        type: Number,
+        default: 10
+    },
+    // 页码数量超出时的省略模式
+    pageEllipsisMode: {
+        type: String,
+        default: 'mid',
+        validator: (val) => ['mid', 'both-ends'].includes(val)
+    },
+    // 每页显示条数
+    pageSize: {
+        type: Number,
+        default: 10
+    },
+    // 分页大小控制器选项
+    pageSizeOptions: {
+        type: Array,
+        default: () => [5, 10, 20, 50]
+    },
+    // 透传Select组件属性
+    selectProps: {
+        type: Object,
+        default: () => ({})
+    },
+    // 是否显示跳转首页尾页页码控制器
+    showFirstAndLastPageBtn: {
+        type: Boolean,
+        default: false
+    },
+    // 是否显示跳转页码控制器
+    showJumper: {
+        type: Boolean,
+        default: false
+    },
+    // 是否显示页码控制器
+    showPageNumber: {
+        type: Boolean,
+        default: true
+    },
+    // 是否显示分页数量控制器
+    showPageSize: {
+        type: Boolean,
+        default: true
+    },
+    // 是否显示跳转前后页页码控制器
+    showPreviousAndNextBtn: {
+        type: Boolean,
+        default: true
+    },
+    // 分页组件尺寸
+    size: {
+        type: String,
+        default: 'medium',
+        validator: (val) => ['small', 'medium'].includes(val)
+    },
+    // 分页组件风格
+    theme: {
+        type: String,
+        default: 'default',
+        validator: (val) => ['default', 'simple'].includes(val)
+    },
+    // 数据总条数
+    total: {
+        type: Number,
+        default: 0
+    },
+    // 用于自定义总条数呈现内容
+    totalContent: {
+        type: [Boolean, Function],
+        default: true
+    }
+});
+
+const emit = defineEmits(['change']);
+
+// 分页变化事件
+const handleChange = (pageInfo) => {
+    emit('change', pageInfo);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/EbizRadio.vue

@@ -0,0 +1,87 @@
+<template>
+    <t-radio
+        :allowUncheck="allowUncheck"
+        :checked="modelValue"
+        :defaultChecked="defaultChecked"
+        :disabled="disabled"
+        :label="label"
+        :name="name"
+        :readonly="readonly"
+        :value="value"
+        @change="handleChange"
+        @click="handleClick"
+    >
+        <slot>{{ label }}</slot>
+    </t-radio>
+</template>
+
+<script>
+export default {
+    name: "EbizRadio"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Radio as TRadio } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 是否允许取消选中
+    allowUncheck: {
+        type: Boolean,
+        default: false
+    },
+    // 是否选中 (v-model)
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    // 默认是否选中
+    defaultChecked: {
+        type: Boolean,
+        default: false
+    },
+    // 是否禁用组件
+    disabled: {
+        type: Boolean,
+        default: undefined
+    },
+    // 主文案
+    label: {
+        type: String,
+        default: ''
+    },
+    // HTML 元素原生属性
+    name: {
+        type: String,
+        default: ''
+    },
+    // 只读状态
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    // 单选按钮的值
+    value: {
+        type: [String, Number, Boolean],
+        default: undefined
+    }
+});
+
+const emit = defineEmits(['change', 'click', 'update:modelValue']);
+
+// 选中状态变化事件
+const handleChange = (checked, context) => {
+    emit('update:modelValue', checked);
+    emit('change', checked, context);
+};
+
+// 点击事件
+const handleClick = (context) => {
+    emit('click', context);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style>