@ebiz/designer-components 0.1.1 → 0.1.4

package/src/views/EbizEmployeeInfo.vue

@@ -1,250 +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;
-  }
-}
+<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/EbizEmployeeSelector.vue

@@ -1,84 +1,84 @@
-<template>
-  <div class="component-demo-container">
-    <h2>员工选择器组件示例</h2>
-    
-    <div class="demo-section">
-      <h3>基础用法</h3>
-      <div class="demo-block">
-        <EbizEmployeeSelector v-model="selectedEmployees" />
-        
-        <div class="demo-info" v-if="selectedEmployees.length > 0">
-          <h4>已选员工：</h4>
-          <pre>{{ JSON.stringify(selectedEmployees, null, 2) }}</pre>
-        </div>
-      </div>
-    </div>
-    
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { EbizEmployeeSelector } from '../index.js';
-import { Button as TButton } from 'tdesign-vue-next';
-
-// 演示数据
-const selectedEmployees = ref([]);
-const singleEmployee = ref([]);
-const roleEmployees = ref([]);
-const limitedEmployees = ref([]);
-const presetEmployees = ref([]);
-
-// 设置预选员工
-const presetEmployeeIds = () => {
-  // 设置一些预定义的员工ID
-  presetEmployees.value = ['1001', '1002', '1003'];
-};
-</script>
-
-<style scoped>
-.component-demo-container {
-  padding: 20px;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.demo-section {
-  margin-bottom: 40px;
-}
-
-h2 {
-  font-size: 24px;
-  margin-bottom: 20px;
-}
-
-h3 {
-  font-size: 18px;
-  margin-bottom: 16px;
-  border-bottom: 1px solid #eee;
-  padding-bottom: 8px;
-}
-
-.demo-block {
-  padding: 20px;
-  border: 1px solid #eee;
-  border-radius: 4px;
-  margin-bottom: 20px;
-}
-
-.demo-info {
-  margin-top: 20px;
-  padding: 10px;
-  background-color: #f5f7fa;
-  border-radius: 4px;
-}
-
-pre {
-  white-space: pre-wrap;
-  word-break: break-all;
-  margin: 0;
-  padding: 10px;
-  background-color: #f9f9f9;
-  border-radius: 4px;
-}
+<template>
+  <div class="component-demo-container">
+    <h2>员工选择器组件示例</h2>
+    
+    <div class="demo-section">
+      <h3>基础用法</h3>
+      <div class="demo-block">
+        <EbizEmployeeSelector v-model="selectedEmployees" />
+        
+        <div class="demo-info" v-if="selectedEmployees.length > 0">
+          <h4>已选员工：</h4>
+          <pre>{{ JSON.stringify(selectedEmployees, null, 2) }}</pre>
+        </div>
+      </div>
+    </div>
+    
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizEmployeeSelector } from '../index.js';
+import { Button as TButton } from 'tdesign-vue-next';
+
+// 演示数据
+const selectedEmployees = ref([]);
+const singleEmployee = ref([]);
+const roleEmployees = ref([]);
+const limitedEmployees = ref([]);
+const presetEmployees = ref([]);
+
+// 设置预选员工
+const presetEmployeeIds = () => {
+  // 设置一些预定义的员工ID
+  presetEmployees.value = ['1001', '1002', '1003'];
+};
+</script>
+
+<style scoped>
+.component-demo-container {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.demo-section {
+  margin-bottom: 40px;
+}
+
+h2 {
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+
+h3 {
+  font-size: 18px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 8px;
+}
+
+.demo-block {
+  padding: 20px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+.demo-info {
+  margin-top: 20px;
+  padding: 10px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+}
+
+pre {
+  white-space: pre-wrap;
+  word-break: break-all;
+  margin: 0;
+  padding: 10px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+}
 </style>