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

package/src/index.js

@@ -1,52 +1,65 @@
-import MyComponent from "./components/MyComponent.vue";
-import MyTable from "./components/Table.vue";
-import EbizFormContainer from "./components/Form.vue";
-import EbizButton from "./components/Button.vue";
-import EbizTdesignButton from "./components/TdesignButton.vue";
-import EbizTdesignIcon from "./components/TdesignIcon.vue";
-import EbizTdesignInput from "./components/TdesignInput.vue";
-import EbizTdesignSelect from "./components/TdesignSelect.vue";
-import EbizTdesignForm from "./components/TdesignForm.vue";
-import EbizTdesignFormItem from "./components/TdesignFormItem.vue";
-import EbizTdesignDatePicker from "./components/TdesignDatePicker.vue";
-import EbizTdesignCard from "./components/TdesignCard.vue";
-import EbizTdesignImage from "./components/TdesignImage.vue";
-import EbizTdesignImageViewer from "./components/TdesignImageViewer.vue";
-import EbizDataContainer from "./components/DataContainer.vue";
-import EbizTitle from "./components/EbizTitle.vue";
-import EbizDivider from "./components/EbizDivider.vue";
-import EbizStatsCard from "./components/EbizStatsCard.vue";
-import EbizOkrTree from "./components/EbizOkrTree.vue";
-import EbizRemoteSelect from "./components/EbizRemoteSelect.vue";
-import EbizMindmap from "./components/EbizMindmap/index.vue";
-import EbizRouteBreadcrumb from "./components/EbizRouteBreadcrumb.vue";
-import EbizFileUpload from "./components/EbizFileUpload.vue";
-import EbizTabHeader from "./components/EbizTabHeader.vue";
-import TdesignCalendar from "./components/TdesignCalendar/index.vue";
-import TdesignCollapse from "./components/TdesignCollapse.vue";
-import TdesignCollapsePanel from "./components/TdesignCollapsePanel.vue";
-import EbizTag from "./components/TdesignTag.vue";
-import EbizSwiper from "./components/EbizSwiper.vue";
-import EbizSwiperItem from "./components/EbizSwiperItem.vue";
-import EbizSpace from "./components/EbizSpace.vue";
-import EbizPagination from "./components/EbizPagination.vue";
-import EbizCheckbox from "./components/EbizCheckbox.vue";
-import EbizCheckboxGroup from "./components/EbizCheckboxGroup.vue";
-import EbizRadio from "./components/EbizRadio.vue";
-import EbizRadioGroup from "./components/EbizRadioGroup.vue";
-import EbizSwitch from "./components/EbizSwitch.vue";
-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 MyComponent from './components/MyComponent.vue'
+import MyTable from './components/Table.vue'
+import EbizFormContainer from './components/Form.vue'
+import EbizButton from './components/Button.vue'
+import EbizTdesignButton from './components/TdesignButton.vue'
+import EbizTdesignIcon from './components/TdesignIcon.vue'
+import EbizTdesignInput from './components/TdesignInput.vue'
+import EbizTdesignSelect from './components/TdesignSelect.vue'
+import EbizTdesignForm from './components/TdesignForm.vue'
+import EbizTdesignFormItem from './components/TdesignFormItem.vue'
+import EbizTdesignDatePicker from './components/TdesignDatePicker.vue'
+import EbizTdesignCard from './components/TdesignCard.vue'
+import EbizTdesignImage from './components/TdesignImage.vue'
+import EbizTdesignImageViewer from './components/TdesignImageViewer.vue'
+import EbizDataContainer from './components/DataContainer.vue'
+import EbizTitle from './components/EbizTitle.vue'
+import EbizDivider from './components/EbizDivider.vue'
+import EbizStatsCard from './components/EbizStatsCard.vue'
+import EbizOkrTree from './components/EbizOkrTree.vue'
+import EbizRemoteSelect from './components/EbizRemoteSelect.vue'
+import EbizMindmap from './components/EbizMindmap/index.vue'
+import EbizRouteBreadcrumb from './components/EbizRouteBreadcrumb.vue'
+import EbizFileUpload from './components/EbizFileUpload.vue'
+import EbizTabHeader from './components/EbizTabHeader.vue'
+import TdesignCalendar from './components/TdesignCalendar/index.vue'
+import TdesignCollapse from './components/TdesignCollapse.vue'
+import TdesignCollapsePanel from './components/TdesignCollapsePanel.vue'
+import EbizTag from './components/TdesignTag.vue'
+import EbizSwiper from './components/EbizSwiper.vue'
+import EbizSwiperItem from './components/EbizSwiperItem.vue'
+import EbizSpace from './components/EbizSpace.vue'
+import EbizPagination from './components/EbizPagination.vue'
+import EbizCheckbox from './components/EbizCheckbox.vue'
+import EbizCheckboxGroup from './components/EbizCheckboxGroup.vue'
+import EbizRadio from './components/EbizRadio.vue'
+import EbizRadioGroup from './components/EbizRadioGroup.vue'
+import EbizSwitch from './components/EbizSwitch.vue'
+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 EbizDialog from './components/TdesignDialog.vue'
+import { MessagePlugin as EbizMessage } from 'tdesign-vue-next'
 
 // 导入简洁数据服务
-import dataService from "./apiService/simpleDataService";
+import dataService from './apiService/simpleDataService'
 
-import "tdesign-vue-next/es/style/index.css";
+import 'tdesign-vue-next/es/style/index.css'
 
 // 导入图表样式
-import "./assets/styles/charts/main.less";
+import './assets/styles/charts/main.less'
+
+// 时间轴组件
+import EbizTimeline from './components/TdesignTimeline.vue'
+import { TimelineItem as EbizTimelineItem } from 'tdesign-vue-next'
 
 // 导出组件
 export {
@@ -110,4 +123,25 @@ export {
   EbizGrid,
   // 栅格列组件
   EbizCol,
-};
+  // 选项卡组件
+  EbizTabs,
+  // 选项卡面板组件
+  EbizTabPanel,
+  // 统计数值组件
+  EbizStatistic,
+  // 消息插件
+  EbizMessage,
+  // 时间轴组件
+  EbizTimeline,
+  EbizTimelineItem,
+  // 水印组件
+  EbizWatermark,
+  // 头像组件
+  EbizAvatar,
+  // 员工信息组件
+  EbizEmployeeInfo,
+  // 提示组件
+  EbizAlert,
+  // 对话框组件
+  EbizDialog
+}

package/src/main.js

@@ -23,8 +23,8 @@ import {
   dataService
 } from './index.js'
 
-import "tdesign-vue-next/es/style/index.css"
-import "./assets/styles/charts/main.less"
+import 'tdesign-vue-next/es/style/index.css'
+import './assets/styles/charts/main.less'
 
 const app = createApp(App)
 

package/src/router/index.js

@@ -186,6 +186,54 @@ 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提示组件示例' }
+  },
+  {
+    path: '/tdesign-dialog',
+    name: 'TdesignDialog',
+    component: () => import('../views/DialogDemo.vue'),
+    meta: { title: 'TDesign对话框组件示例' }
   }
 ]
 

package/src/views/DialogDemo.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="dialog-demo">
+    <h1>TDesign Dialog 组件示例</h1>
+
+    <h2>基础对话框</h2>
+    <div class="demo-section">
+      <EbizButton theme="primary" @click="showBasicDialog = true">打开基础对话框</EbizButton>
+      <EbizDialog v-model:visible="showBasicDialog" header="基础对话框" :body="'这是一个基础对话框，用于展示简单的信息或进行简单的操作。'"
+        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
+    </div>
+
+    <h2>不同模式的对话框</h2>
+    <div class="demo-section">
+      <EbizButton @click="showModalDialog = true" style="margin-right: 16px;">模态对话框</EbizButton>
+      <EbizButton @click="showModelessDialog = true" style="margin-right: 16px;">非模态对话框</EbizButton>
+      <EbizButton @click="showFullscreenDialog = true">全屏对话框</EbizButton>
+
+      <!-- 模态对话框 -->
+      <EbizDialog v-model:visible="showModalDialog" header="模态对话框" mode="modal" :body="'模态对话框会阻止用户与页面的其他部分交互，直到对话框关闭。'"
+        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
+
+      <!-- 非模态对话框 -->
+      <EbizDialog v-model:visible="showModelessDialog" header="非模态对话框" mode="modeless"
+        :body="'非模态对话框不会阻止用户与页面的其他部分交互，可以同时进行其他操作。'" :confirm-btn="{ content: '确认', theme: 'primary' }"
+        cancel-btn="取消" />
+
+      <!-- 全屏对话框 -->
+      <EbizDialog v-model:visible="showFullscreenDialog" header="全屏对话框" mode="full-screen"
+        :body="'全屏对话框会占据整个屏幕，通常用于需要用户完全专注于某项任务的场景。'" :confirm-btn="{ content: '确认', theme: 'primary' }"
+        cancel-btn="取消" />
+    </div>
+
+    <h2>自定义内容的对话框</h2>
+    <div class="demo-section">
+      <EbizButton @click="showCustomDialog = true">打开自定义内容对话框</EbizButton>
+      <EbizDialog v-model:visible="showCustomDialog" header="自定义内容" :width="500">
+        <template #body>
+          <div style="padding: 20px;">
+            <h3>这是自定义的内容区域</h3>
+            <p>可以在这里放置任何你想要展示的内容，包括表单、图表、列表等。</p>
+            <div style="margin-top: 20px;">
+              <EbizTdesignInput v-model="customInput" placeholder="请输入内容" />
+            </div>
+          </div>
+        </template>
+        <template #footer>
+          <div style="display: flex; justify-content: flex-end;">
+            <EbizButton @click="showCustomDialog = false" style="margin-right: 8px;">取消</EbizButton>
+            <EbizButton theme="primary" @click="handleCustomConfirm">确认</EbizButton>
+          </div>
+        </template>
+      </EbizDialog>
+    </div>
+
+    <h2>可拖拽的对话框</h2>
+    <div class="demo-section">
+      <EbizButton @click="showDraggableDialog = true">打开可拖拽对话框</EbizButton>
+      <EbizDialog v-model:visible="showDraggableDialog" header="可拖拽对话框" :draggable="true" :body="'这个对话框可以通过拖拽标题栏进行移动。'"
+        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
+    </div>
+
+    <h2>不同位置的对话框</h2>
+    <div class="demo-section">
+      <EbizButton @click="showTopDialog = true" style="margin-right: 16px;">顶部对话框</EbizButton>
+      <EbizButton @click="showCenterDialog = true">居中对话框</EbizButton>
+
+      <!-- 顶部对话框 -->
+      <EbizDialog v-model:visible="showTopDialog" header="顶部对话框" placement="top" :body="'这个对话框位于顶部。'"
+        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
+
+      <!-- 居中对话框 -->
+      <EbizDialog v-model:visible="showCenterDialog" header="居中对话框" placement="center" :body="'这个对话框位于页面中央。'"
+        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizDialog, EbizButton, EbizTdesignInput } from '../index.js';
+
+// 基础对话框
+const showBasicDialog = ref(false);
+
+// 不同模式的对话框
+const showModalDialog = ref(false);
+const showModelessDialog = ref(false);
+const showFullscreenDialog = ref(false);
+
+// 自定义内容的对话框
+const showCustomDialog = ref(false);
+const customInput = ref('');
+
+// 可拖拽的对话框
+const showDraggableDialog = ref(false);
+
+// 不同位置的对话框
+const showTopDialog = ref(false);
+const showCenterDialog = ref(false);
+
+// 自定义确认处理函数
+const handleCustomConfirm = () => {
+  // 在实际应用中，这里可以添加表单验证或数据处理逻辑
+  console.log('自定义确认按钮点击，输入内容：', customInput.value);
+  showCustomDialog.value = false;
+};
+</script>
+
+<style lang="less" scoped>
+.dialog-demo {
+  padding: 20px;
+  
+  h1 {
+    margin-bottom: 20px;
+  }
+  
+  h2 {
+    margin-top: 30px;
+    margin-bottom: 16px;
+  }
+  
+  .demo-section {
+    margin-bottom: 24px;
+  }
+}
+</style> 

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>