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

package/src/components/TdesignAlert.vue

@@ -0,0 +1,116 @@
+<template>
+    <t-alert
+        :theme="theme"
+        :title="title"
+        :message="message"
+        :icon="icon"
+        :close="close"
+        :maxLine="maxLine"
+        :operation="operation"
+        :description="description"
+        :close-btn="closeBtn"
+        :default-open="defaultOpen"
+        @close="handleClose"
+    >
+        <!-- 标题插槽 -->
+        <template v-if="$slots.title" #title>
+            <slot name="title"></slot>
+        </template>
+        
+        <!-- 内容插槽 -->
+        <template v-if="$slots.default">
+            <slot></slot>
+        </template>
+        
+        <!-- 操作区插槽 -->
+        <template v-if="$slots.operation" #operation>
+            <slot name="operation"></slot>
+        </template>
+        
+        <!-- 关闭按钮插槽 -->
+        <template v-if="$slots['close-btn']" #close-btn>
+            <slot name="close-btn"></slot>
+        </template>
+        
+        <!-- 图标插槽 -->
+        <template v-if="$slots.icon" #icon>
+            <slot name="icon"></slot>
+        </template>
+    </t-alert>
+</template>
+
+<script>
+export default {
+    name: "EbizAlert"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Alert as TAlert } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 主题
+    theme: {
+        type: String,
+        default: 'info',
+        validator: (val) => ['success', 'info', 'warning', 'error'].includes(val)
+    },
+    // 标题
+    title: {
+        type: String,
+        default: ''
+    },
+    // 内容
+    message: {
+        type: String,
+        default: ''
+    },
+    // 图标
+    icon: {
+        type: [Boolean, Function],
+        default: true
+    },
+    // 关闭按钮
+    close: {
+        type: Boolean,
+        default: false
+    },
+    // 内容显示最大行数
+    maxLine: {
+        type: Number,
+        default: 0
+    },
+    // 操作区内容
+    operation: {
+        type: [String, Function],
+        default: ''
+    },
+    // 描述内容
+    description: {
+        type: String,
+        default: ''
+    },
+    // 关闭按钮内容
+    closeBtn: {
+        type: [String, Function, Boolean],
+        default: undefined
+    },
+    // 默认是否显示打开
+    defaultOpen: {
+        type: Boolean,
+        default: true
+    }
+});
+
+const emit = defineEmits(['close']);
+
+// 关闭事件
+const handleClose = (e) => {
+    emit('close', e);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/TdesignTimeline.vue

@@ -0,0 +1,58 @@
+<template>
+    <t-timeline
+        :layout="layout"
+        :labelAlign="labelAlign"
+        :mode="mode"
+        :reverse="reverse"
+        :theme="theme"
+    >
+        <slot></slot>
+    </t-timeline>
+</template>
+
+<script>
+export default {
+    name: "EbizTimeline"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Timeline as TTimeline } from 'tdesign-vue-next';
+
+defineProps({
+    // 布局方向
+    layout: {
+        type: String,
+        default: 'vertical',
+        validator: (val) => ['horizontal', 'vertical'].includes(val)
+    },
+    // 标签位置
+    labelAlign: {
+        type: String,
+        default: 'auto',
+        validator: (val) => ['left', 'right', 'top', 'bottom', 'auto'].includes(val)
+    },
+    // 展示类型
+    mode: {
+        type: String,
+        default: 'alternate',
+        validator: (val) => ['alternate', 'same', 'left', 'right'].includes(val)
+    },
+    // 是否倒序排列
+    reverse: {
+        type: Boolean,
+        default: false
+    },
+    // 主题风格
+    theme: {
+        type: String,
+        default: 'default',
+        validator: (val) => ['default', 'dot'].includes(val)
+    }
+});
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style>

package/src/components/TdesignTimelineItem.vue

@@ -0,0 +1,72 @@
+<template>
+    <t-timeline-item
+        :content="content"
+        :dot="dot"
+        :dotColor="dotColor"
+        :label="label"
+        :labelAlign="labelAlign"
+        :loading="loading"
+    >
+        <!-- 时间轴点内容插槽 -->
+        <template v-if="$slots.dot" #dot>
+            <slot name="dot"></slot>
+        </template>
+        
+        <!-- 标签内容插槽 -->
+        <template v-if="$slots.label" #label>
+            <slot name="label"></slot>
+        </template>
+        
+        <!-- 默认插槽 -->
+        <slot>{{ content }}</slot>
+    </t-timeline-item>
+</template>
+
+<script>
+export default {
+    name: "EbizTimelineItem"
+}
+</script>
+
+<script setup>
+import { defineProps } from 'vue';
+import { TimelineItem as TTimelineItem } from 'tdesign-vue-next';
+
+defineProps({
+    // 内容
+    content: {
+        type: String,
+        default: ''
+    },
+    // 时间轴点内容，可以是组件
+    dot: {
+        type: [String, Function],
+        default: ''
+    },
+    // 时间轴点颜色，内置 primary/warning/error/default 四种色值
+    dotColor: {
+        type: String,
+        default: ''
+    },
+    // 标签文本内容
+    label: {
+        type: String,
+        default: ''
+    },
+    // 标签位置，优先级高于 Timeline 中的 labelAlign
+    labelAlign: {
+        type: String,
+        default: '',
+        validator: (val) => ['left', 'right', 'top', 'bottom', 'auto', ''].includes(val)
+    },
+    // 是否处于加载状态
+    loading: {
+        type: Boolean,
+        default: false
+    }
+});
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/TdesignWatermark.vue

@@ -0,0 +1,108 @@
+<template>
+    <t-watermark
+        :alpha="alpha"
+        :watermark-content="watermarkContent"
+        :width="width"
+        :height="height"
+        :x="x"
+        :y="y"
+        :rotate="rotate"
+        :zIndex="zIndex"
+        :isRepeat="isRepeat"
+        :movable="movable"
+        :gapX="gapX"
+        :gapY="gapY"
+        :offset="offset"
+        :lineSpace="lineSpace"
+    >
+        <slot></slot>
+    </t-watermark>
+</template>
+
+<script>
+export default {
+    name: "EbizWatermark"
+}
+</script>
+
+<script setup>
+import { defineProps } from 'vue';
+import { Watermark as TWatermark } from 'tdesign-vue-next';
+
+defineProps({
+    // 水印透明度
+    alpha: {
+        type: Number,
+        default: 1
+    },
+    // 水印内容
+    watermarkContent: {
+        type: [String, Object],
+        default: () => ({ text: '' })
+    },
+    // 水印宽度
+    width: {
+        type: Number,
+        default: 120
+    },
+    // 水印高度
+    height: {
+        type: Number,
+        default: 64
+    },
+    // 水印x轴偏移量
+    x: {
+        type: Number,
+        default: 0
+    },
+    // 水印y轴偏移量
+    y: {
+        type: Number,
+        default: 0
+    },
+    // 水印旋转角度
+    rotate: {
+        type: Number,
+        default: -22
+    },
+    // 水印层级
+    zIndex: {
+        type: Number,
+        default: 9
+    },
+    // 水印是否重复铺满整个页面
+    isRepeat: {
+        type: Boolean,
+        default: true
+    },
+    // 水印是否可移动
+    movable: {
+        type: Boolean,
+        default: false
+    },
+    // 水印之间的水平间距
+    gapX: {
+        type: Number,
+        default: 212
+    },
+    // 水印之间的垂直间距
+    gapY: {
+        type: Number,
+        default: 222
+    },
+    // 水印整体的偏移量
+    offset: {
+        type: Array,
+        default: () => [0, 0]
+    },
+    // 多行水印的行间距
+    lineSpace: {
+        type: Number,
+        default: 16
+    }
+});
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/index.js

@@ -39,6 +39,14 @@ import EbizTextarea from "./components/TdesignTextarea.vue";
 import EbizUpload from "./components/TdesignUpload.vue";
 import EbizGrid from "./components/TdesignGrid.vue";
 import EbizCol from "./components/TdesignCol.vue";
+import EbizTabs from "./components/EbizTabs.vue";
+import EbizTabPanel from "./components/EbizTabPanel.vue";
+import EbizStatistic from "./components/EbizStatistic.vue";
+import EbizWatermark from "./components/TdesignWatermark.vue";
+import EbizAvatar from "./components/EbizAvatar.vue";
+import EbizEmployeeInfo from "./components/EbizEmployeeInfo.vue";
+import EbizAlert from "./components/TdesignAlert.vue";
+import { MessagePlugin as EbizMessage } from 'tdesign-vue-next';
 
 // 导入简洁数据服务
 import dataService from "./apiService/simpleDataService";
@@ -48,6 +56,10 @@ import "tdesign-vue-next/es/style/index.css";
 // 导入图表样式
 import "./assets/styles/charts/main.less";
 
+// 时间轴组件
+import EbizTimeline from "./components/TdesignTimeline.vue";
+import {TimelineItem as EbizTimelineItem} from 'tdesign-vue-next';
+
 // 导出组件
 export {
   MyComponent,
@@ -110,4 +122,23 @@ export {
   EbizGrid,
   // 栅格列组件
   EbizCol,
+  // 选项卡组件
+  EbizTabs,
+  // 选项卡面板组件
+  EbizTabPanel,
+  // 统计数值组件
+  EbizStatistic,
+  // 消息插件
+  EbizMessage,
+  // 时间轴组件
+  EbizTimeline,
+  EbizTimelineItem,
+  // 水印组件
+  EbizWatermark,
+  // 头像组件
+  EbizAvatar,
+  // 员工信息组件
+  EbizEmployeeInfo,
+  // 提示组件
+  EbizAlert
 };

package/src/router/index.js

@@ -186,6 +186,48 @@ const routes = [
     name: 'Grid',
     component: () => import('../views/GridDemo.vue'),
     meta: { title: 'TDesign栅格组件示例' }
+  },
+  {
+    path: '/tabs',
+    name: 'Tabs',
+    component: () => import('../views/TabsDemo.vue'),
+    meta: { title: 'Ebiz选项卡组件示例' }
+  },
+  {
+    path: '/statistic',
+    name: 'Statistic',
+    component: () => import('../views/StatisticDemo.vue'),
+    meta: { title: 'Ebiz统计数值组件示例' }
+  },
+  {
+    path: '/timeline',
+    name: 'Timeline',
+    component: () => import('../views/TimelineDemo.vue'),
+    meta: { title: 'Ebiz时间轴组件示例' }
+  },
+  {
+    path: '/watermark',
+    name: 'Watermark',
+    component: () => import('../views/WatermarkDemo.vue'),
+    meta: { title: 'TDesign水印组件示例' }
+  },
+  {
+    path: '/ebiz-avatar',
+    name: 'EbizAvatar',
+    component: () => import('../views/EbizAvatar.vue'),
+    meta: { title: 'Ebiz头像组件示例' }
+  },
+  {
+    path: '/ebiz-employee-info',
+    name: 'EbizEmployeeInfo',
+    component: () => import('../views/EbizEmployeeInfo.vue'),
+    meta: { title: 'Ebiz员工信息组件示例' }
+  },
+  {
+    path: '/tdesign-alert',
+    name: 'TdesignAlert',
+    component: () => import('../views/TdesignAlert.vue'),
+    meta: { title: 'TDesign提示组件示例' }
   }
 ]
 

package/src/views/EbizAvatar.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="container">
+    <h1>EbizAvatar 头像组件示例</h1>
+    
+    <div class="section">
+      <h2>基础用法</h2>
+      <div class="example-block">
+        <ebiz-avatar content="用户" />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;ebiz-avatar content="用户" /&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>不同形状</h2>
+      <div class="example-block avatar-shape-container">
+        <div v-for="shape in shapeList" :key="shape" class="avatar-shape-item">
+          <ebiz-avatar
+            content="用户"
+            :shape="shape"
+          />
+          <div class="avatar-shape-text">shape: {{ shape }}</div>
+        </div>
+      </div>
+      <div class="code-block">
+        <pre><code>// 可选值: circle（默认）, round
+&lt;ebiz-avatar
+  content="用户"
+  shape="round"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>不同尺寸</h2>
+      <div class="example-block avatar-size-container">
+        <div v-for="size in sizeList" :key="size" class="avatar-size-item">
+          <ebiz-avatar
+            content="用户"
+            :size="size"
+          />
+          <div class="avatar-size-text">size: {{ size }}</div>
+        </div>
+      </div>
+      <div class="code-block">
+        <pre><code>// 可选值: small, medium（默认）, large
+&lt;ebiz-avatar
+  content="用户"
+  size="large"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>图片头像</h2>
+      <div class="example-block">
+        <ebiz-avatar
+          image="https://tdesign.tencent.com/vue-next/assets/image1.jpg"
+          alt="用户头像"
+        />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;ebiz-avatar
+  image="https://tdesign.tencent.com/vue-next/assets/image1.jpg"
+  alt="用户头像"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>自定义尺寸</h2>
+      <div class="example-block">
+        <ebiz-avatar
+          content="用户"
+          width="100px"
+          height="100px"
+        />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;ebiz-avatar
+  content="用户"
+  width="100px"
+  height="100px"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>带徽标的头像</h2>
+      <div class="example-block">
+        <ebiz-avatar
+          content="用户"
+          :badge-props="{ count: 5 }"
+        />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;ebiz-avatar
+  content="用户"
+  :badge-props="{ count: 5 }"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>图标头像</h2>
+      <div class="example-block">
+        <ebiz-avatar>
+          <template #icon>
+            <t-icon name="user" />
+          </template>
+        </ebiz-avatar>
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;ebiz-avatar&gt;
+  &lt;template #icon&gt;
+    &lt;t-icon name="user" /&gt;
+  &lt;/template&gt;
+&lt;/ebiz-avatar&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>图片加载失败处理</h2>
+      <div class="example-block">
+        <ebiz-avatar
+          image="https://non-existent-image.jpg"
+          content="用户"
+          :hide-on-load-error="false"
+          @error="handleError"
+        />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;ebiz-avatar
+  image="https://non-existent-image.jpg"
+  content="用户"
+  :hide-on-load-error="false"
+  @error="handleError"
+/&gt;</code></pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { EbizAvatar } from '../index.js'
+import { Icon as TIcon } from 'tdesign-vue-next'
+
+export default {
+  name: 'EbizAvatarDemo',
+  components: {
+    EbizAvatar,
+    TIcon
+  },
+  data() {
+    return {
+      shapeList: ['circle', 'round'],
+      sizeList: ['small', 'medium', 'large']
+    }
+  },
+  methods: {
+    handleError(context) {
+      console.log('图片加载失败', context)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+  padding: 20px;
+  
+  h1 {
+    margin-bottom: 20px;
+  }
+  
+  .section {
+    margin-bottom: 30px;
+    
+    h2 {
+      margin-bottom: 15px;
+    }
+    
+    .example-block {
+      margin-bottom: 15px;
+      padding: 20px;
+      border: 1px solid #eee;
+      border-radius: 4px;
+    }
+    
+    .code-block {
+      background-color: #f5f5f5;
+      padding: 15px;
+      border-radius: 4px;
+      
+      pre {
+        margin: 0;
+        white-space: pre-wrap;
+      }
+    }
+  }
+  
+  .avatar-shape-container,
+  .avatar-size-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+  }
+  
+  .avatar-shape-item,
+  .avatar-size-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .avatar-shape-text,
+  .avatar-size-text {
+    margin-top: 10px;
+    font-size: 14px;
+    color: #666;
+  }
+}
+</style>