@ebiz/designer-components 0.0.18-tj.1 → 0.0.19-beta.1

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> 

package/src/views/EbizDetailBlockDemo.vue

@@ -0,0 +1,31 @@
+<template>
+    <div>
+        <ebiz-route-breadcrumb />
+        <ebiz-detail-block :model="model" :labelMap="labelMap" :gap="10" :labelSize="20" :labelColor="'#000'" :valueSize="20" :valueColor="'#000'"/>
+    </div>
+</template>
+
+<script>
+import { EbizDetailBlock } from '@/index.js'
+
+export default {
+    name: 'EbizDetailBlockDemo',
+    components: {
+        EbizDetailBlock
+    },
+    data() {
+        return {
+            model: {
+                "name": "张三",
+                "sex": "男"
+            },
+            labelMap:{
+                "name": "姓名",
+                "sex": "性别"
+            }
+        }
+    },
+}
+</script>
+
+<style scoped></style>

package/src/views/EbizEmployeeInfo.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="container">
+    <h1>EbizEmployeeInfo 员工信息组件示例</h1>
+    
+    <div class="section">
+      <h2>基础用法</h2>
+      <div class="example-block">
+        <ebiz-employee-info
+          :info="basicEmployee"
+        />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;ebiz-employee-info
+  :info="{
+    avatar: 'https://tdesign.tencent.com/vue-next/assets/avatar-1.jpg',
+    name: '张三',
+    id: 'EMP10086',
+    department: '研发部'
+  }"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>不同头像尺寸</h2>
+      <div class="example-block">
+        <div class="avatar-size-container">
+          <div v-for="size in avatarSizes" :key="size" class="avatar-size-item">
+            <ebiz-employee-info
+              :info="basicEmployee"
+              :avatar-size="size"
+            />
+            <div class="size-label">size: {{ size }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;ebiz-employee-info
+  :info="employeeInfo"
+  avatar-size="large"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>方形头像</h2>
+      <div class="example-block">
+        <ebiz-employee-info
+          :info="basicEmployee"
+          avatar-shape="round"
+        />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;ebiz-employee-info
+  :info="employeeInfo"
+  avatar-shape="round"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>无头像处理</h2>
+      <div class="example-block">
+        <ebiz-employee-info
+          :info="noAvatarEmployee"
+        />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;ebiz-employee-info
+  :info="{
+    name: '李四',
+    id: 'EMP10087',
+    department: '市场部'
+  }"
+/&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>自定义样式</h2>
+      <div class="example-block">
+        <ebiz-employee-info
+          :info="basicEmployee"
+          width="350px"
+          class="custom-employee-info"
+        />
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;ebiz-employee-info
+  :info="employeeInfo"
+  width="350px"
+  class="custom-employee-info"
+/&gt;
+
+&lt;style&gt;
+.custom-employee-info {
+  background-color: #f0f8ff;
+  border: 1px solid #d1e9ff;
+}
+&lt;/style&gt;</code></pre>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h2>多个员工信息</h2>
+      <div class="example-block">
+        <div class="employee-list">
+          <ebiz-employee-info
+            v-for="(employee, index) in employeeList"
+            :key="index"
+            :info="employee"
+            class="employee-list-item"
+          />
+        </div>
+      </div>
+      <div class="code-block">
+        <pre><code>&lt;div class="employee-list"&gt;
+  &lt;ebiz-employee-info
+    v-for="(employee, index) in employeeList"
+    :key="index"
+    :info="employee"
+    class="employee-list-item"
+  /&gt;
+&lt;/div&gt;</code></pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { EbizEmployeeInfo } from '../index.js'
+
+export default {
+  name: 'EbizEmployeeInfoDemo',
+  components: {
+    EbizEmployeeInfo
+  },
+  data() {
+    return {
+      basicEmployee: {
+        avatar: 'https://tdesign.tencent.com/vue-next/assets/avatar-1.jpg',
+        name: '张三',
+        id: 'EMP10086',
+        department: '研发部'
+      },
+      noAvatarEmployee: {
+        name: '李四',
+        id: 'EMP10087',
+        department: '市场部'
+      },
+      avatarSizes: ['small', 'medium', 'large'],
+      employeeList: [
+        {
+          avatar: 'https://tdesign.tencent.com/vue-next/assets/avatar-1.jpg',
+          name: '张三',
+          id: 'EMP10086',
+          department: '研发部'
+        },
+        {
+          avatar: 'https://tdesign.tencent.com/vue-next/assets/avatar-2.jpg',
+          name: '李四',
+          id: 'EMP10087',
+          department: '市场部'
+        },
+        {
+          avatar: 'https://tdesign.tencent.com/vue-next/assets/avatar-3.jpg',
+          name: '王五',
+          id: 'EMP10088',
+          department: '产品部'
+        },
+        {
+          name: '赵六',
+          id: 'EMP10089',
+          department: '设计部'
+        }
+      ]
+    }
+  }
+}
+</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-size-container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+  
+  .avatar-size-item {
+    position: relative;
+    
+    .size-label {
+      position: absolute;
+      right: 20px;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 14px;
+      color: #666;
+    }
+  }
+  
+  .employee-list {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+  }
+  
+  .employee-list-item {
+    border: 1px solid #eaeaea;
+  }
+  
+  .custom-employee-info {
+    background-color: #f0f8ff;
+    border: 1px solid #d1e9ff;
+  }
+}
+</style> 

package/src/views/EbizRadioDemo.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="radio-demo">
+    <h2>Radio 单选框组件</h2>
+
+    <h3>基础单选框</h3>
+    <div class="demo-section">
+      <ebiz-radio label="未选中项" />
+      <ebiz-radio label="允许取消选中项" :allowUncheck="true" v-model="radio1" />
+      <ebiz-radio label="选中项" v-model="radio2" />
+      <ebiz-radio label="选中禁用态" disabled v-model="radioDisabled" />
+      <ebiz-radio label="未选中禁用态" disabled />
+    </div>
+
+    <h3>按钮单选框组</h3>
+    <div class="demo-section">
+      <h4>边框型单选按钮</h4>
+      <ebiz-radio-group v-model="group1" variant="outline">
+        <ebiz-radio value="1" label="选项一" />
+        <ebiz-radio value="2" label="选项二" />
+        <ebiz-radio value="3" label="选项三" />
+        <ebiz-radio value="4" label="选项四" />
+        <ebiz-radio value="5" label="选项五" />
+      </ebiz-radio-group>
+
+      <h4>填充型单选按钮</h4>
+      <ebiz-radio-group v-model="group2" variant="primary-filled">
+        <ebiz-radio value="1" label="选项一" />
+        <ebiz-radio value="2" label="选项二" />
+        <ebiz-radio value="3" label="选项三" />
+        <ebiz-radio value="4" label="选项四" />
+        <ebiz-radio value="5" label="选项五" />
+      </ebiz-radio-group>
+
+      <h4>带禁用状态的单选按钮</h4>
+      <ebiz-radio-group v-model="group3">
+        <ebiz-radio value="1" label="选项一" />
+        <ebiz-radio value="2" label="选项二" />
+        <ebiz-radio value="3" label="选项三" />
+        <ebiz-radio value="4" label="选中禁用态" disabled />
+        <ebiz-radio value="5" label="未选中禁用态" disabled />
+      </ebiz-radio-group>
+    </div>
+
+    <h3>不同尺寸的单选按钮</h3>
+    <div class="demo-section">
+      <h4>大尺寸</h4>
+      <ebiz-radio-group v-model="groupSize1" size="large">
+        <ebiz-radio value="1" label="选项一" />
+        <ebiz-radio value="2" label="选项二" />
+        <ebiz-radio value="3" label="选项三" />
+        <ebiz-radio value="4" label="选项四" />
+      </ebiz-radio-group>
+
+      <h4>中尺寸（默认）</h4>
+      <ebiz-radio-group v-model="groupSize2" size="medium">
+        <ebiz-radio value="1" label="选项一" />
+        <ebiz-radio value="2" label="选项二" />
+        <ebiz-radio value="3" label="选项三" />
+        <ebiz-radio value="4" label="选项四" />
+      </ebiz-radio-group>
+
+      <h4>小尺寸</h4>
+      <ebiz-radio-group v-model="groupSize3" size="small">
+        <ebiz-radio value="1" label="选项一" />
+        <ebiz-radio value="2" label="选项二" />
+        <ebiz-radio value="3" label="选项三" />
+        <ebiz-radio value="4" label="选项四" />
+      </ebiz-radio-group>
+    </div>
+
+    <h3>使用options配置的单选框组</h3>
+    <div class="demo-section">
+      <ebiz-radio-group 
+        :options="[
+          { label: '选项一', value: '1' },
+          { label: '选项二', value: '2' },
+          { label: '选项三', value: '3' },
+          { label: '禁用选项', value: '4', disabled: true }
+        ]"
+        v-model="optionsGroup"
+      />
+    </div>
+
+    <h3>可取消选中的单选框组</h3>
+    <div class="demo-section">
+      <ebiz-radio-group 
+        :allowUncheck="true"
+        :options="[
+          { label: '可取消选中项一', value: '1' },
+          { label: '可取消选中项二', value: '2' },
+          { label: '可取消选中项三', value: '3' }
+        ]"
+        v-model="uncheckGroup"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EbizRadioDemo'
+}
+</script>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizRadio, EbizRadioGroup } from '../index.js';
+
+// 单选框状态
+const radio1 = ref(true);
+const radio2 = ref(true);
+const radioDisabled = ref(true);
+
+// 单选组状态
+const group1 = ref('1');
+const group2 = ref('1');
+const group3 = ref('1');
+
+// 不同尺寸的单选组
+const groupSize1 = ref('1');
+const groupSize2 = ref('1');
+const groupSize3 = ref('1');
+
+// options配置的单选组
+const optionsGroup = ref('1');
+
+// 可取消选中的单选组
+const uncheckGroup = ref('1');
+</script>
+
+<style scoped>
+.radio-demo {
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 30px;
+  border: 1px solid #eee;
+  padding: 16px;
+  border-radius: 6px;
+}
+
+h3 {
+  margin-top: 24px;
+  margin-bottom: 16px;
+}
+
+h4 {
+  margin-top: 16px;
+  margin-bottom: 8px;
+}
+</style>