@ebiz/designer-components 0.0.18-kzy.1 → 0.0.18-kzy.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.0.18-kzy.1",
+  "version": "0.0.18-kzy.2",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/EbizRemoteSelect.vue

@@ -158,8 +158,8 @@ const handleRemoteSearch = async (keyword) => {
         const res = await dataService.fetch(params, props.apiConfig);
 
         options.value = res.data.map(item => ({
-            label: labelField ? item[labelField] : item.name,
-            value: valueField ? item[valueField] : item.id
+            label: labelField.value ? item[labelField.value] : item.name,
+            value: valueField.value ? item[valueField.value] : item.id
         }));
     } catch (error) {
         console.error('远程搜索失败:', error);
@@ -207,8 +207,8 @@ onMounted(async () => {
 
             console.log('res', res)
             options.value = res.data.map(item => ({
-                label: labelField ? item[labelField] : item.name,
-                value: valueField ? item[valueField] : item.id
+                label: labelField.value ? item[labelField.value] : item.name,
+                value: valueField.value ? item[valueField.value] : item.id
             }));
         } catch (error) {
             console.error('加载默认选项失败:', error);

package/src/components/EbizStatusBadge.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="ebiz-status-badge" :style="containerStyle">
+    <div class="status-indicator" :style="indicatorStyle"></div>
+    <div class="status-text" v-if="showText">{{ text }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "EbizStatusBadge"
+}
+</script>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  /**
+   * 状态类型
+   */
+  status: {
+    type: String,
+    default: 'default',
+    validator: (val) => ['default', 'success', 'warning', 'error', 'processing'].includes(val)
+  },
+  /**
+   * 自定义颜色
+   */
+  color: {
+    type: String,
+    default: ''
+  },
+  /**
+   * 自定义预设颜色映射
+   */
+  colorMap: {
+    type: Object,
+    default: () => ({})
+  },
+  /**
+   * 指示点大小
+   */
+  size: {
+    type: [String, Number],
+    default: 'small',
+    validator: (val) => ['small', 'medium', 'large'].includes(val) || typeof val === 'number'
+  },
+  /**
+   * 是否显示文字
+   */
+  showText: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 状态文字
+   */
+  text: {
+    type: String,
+    default: ''
+  },
+  /**
+   * 状态点位置
+   */
+  position: {
+    type: String,
+    default: 'left',
+    validator: (val) => ['left', 'right', 'top', 'bottom'].includes(val)
+  },
+  /**
+   * 闪烁效果
+   */
+  pulse: {
+    type: Boolean,
+    default: false
+  }
+});
+
+// 获取预设状态颜色
+const getStatusColor = (status) => {
+  const defaultColorMap = {
+    default: '#999999',
+    success: '#35c613',
+    warning: '#ed7b2f',
+    error: '#e34d59',
+    processing: '#0052d9'
+  };
+  
+  // 优先使用props.color，其次使用用户提供的colorMap，最后使用默认颜色
+  return props.color || props.colorMap[status] || defaultColorMap[status];
+};
+
+// 获取点大小
+const getSize = () => {
+  if (typeof props.size === 'number') {
+    return `${props.size}px`;
+  }
+  
+  const sizeMap = {
+    small: '6px',
+    medium: '10px',
+    large: '14px'
+  };
+  
+  return sizeMap[props.size];
+};
+
+// 计算指示器样式
+const indicatorStyle = computed(() => {
+  const style = {
+    backgroundColor: getStatusColor(props.status),
+    width: getSize(),
+    height: getSize(),
+    animationName: props.pulse ? 'ebiz-status-pulse' : 'none'
+  };
+  
+  return style;
+});
+
+// 计算容器样式
+const containerStyle = computed(() => {
+  const style = {
+    flexDirection: 'row', // 默认水平排列
+  };
+  
+  // 根据位置调整排列方向
+  if (props.position === 'top' || props.position === 'bottom') {
+    style.flexDirection = props.position === 'top' ? 'column-reverse' : 'column';
+  } else {
+    style.flexDirection = props.position === 'left' ? 'row' : 'row-reverse';
+  }
+  
+  return style;
+});
+</script>
+
+<style scoped>
+.ebiz-status-badge {
+  display: inline-flex;
+  align-items: center;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.status-indicator {
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.status-text {
+  margin-left: 8px;
+}
+
+.ebiz-status-badge[style*="column"] .status-text {
+  margin-left: 0;
+  margin-top: 4px;
+}
+
+.ebiz-status-badge[style*="row-reverse"] .status-text {
+  margin-left: 0;
+  margin-right: 8px;
+}
+
+@keyframes ebiz-status-pulse {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(1.2);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.status-indicator[style*="ebiz-status-pulse"] {
+  animation: ebiz-status-pulse 1.5s infinite ease-in-out;
+}
+</style> 

package/src/index.js

@@ -49,6 +49,7 @@ import EbizEmployeeInfo from "./components/EbizEmployeeInfo.vue";
 import EbizAlert from "./components/TdesignAlert.vue";
 import EbizDialog from "./components/TdesignDialog.vue";
 import EbizTable from "./components/EbizTable.vue";
+import EbizStatusBadge from "./components/EbizStatusBadge.vue";
 import { MessagePlugin as EbizMessage } from 'tdesign-vue-next';
 
 // 导入简洁数据服务
@@ -148,5 +149,7 @@ export {
   // 对话框组件
   EbizDialog,
   // 表格组件
-  EbizTable
+  EbizTable,
+  // 状态标记组件
+  EbizStatusBadge
 };

package/src/router/index.js

@@ -240,6 +240,12 @@ const routes = [
     name: 'TableDemo',
     component: () => import('../views/TableDemo.vue'),
     meta: { title: 'Ebiz表格组件示例' }
+  },
+  {
+    path: '/status-badge',
+    name: 'StatusBadge',
+    component: () => import('../views/StatusBadgeExample.vue'),
+    meta: { title: 'Ebiz状态标记组件示例' }
   }
 ]
 

package/src/views/Home.vue

@@ -54,7 +54,8 @@ export default {
       { path: '/ebiz-employee-info', title: 'Ebiz员工信息组件示例' },
       { path: '/tdesign-alert', title: 'TDesign提示组件示例' },
       { path: '/tdesign-dialog', title: 'TDesign对话框组件示例' },
-      { path: '/table-demo', title: 'Ebiz表格组件示例' }
+      { path: '/table-demo', title: 'Ebiz表格组件示例' },
+      { path: '/status-badge', title: 'Ebiz状态标记组件示例' }
     ]
 
     return {

package/src/views/StatusBadgeExample.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="example-container">
+    <h2>状态标记组件示例</h2>
+    
+    <div class="example-section">
+      <h3>不同状态类型</h3>
+      <div class="example-row">
+        <EbizStatusBadge status="default" text="默认状态" />
+        <EbizStatusBadge status="success" text="成功状态" />
+        <EbizStatusBadge status="warning" text="警告状态" />
+        <EbizStatusBadge status="error" text="错误状态" />
+        <EbizStatusBadge status="processing" text="处理中状态" />
+      </div>
+    </div>
+
+    <div class="example-section">
+      <h3>自定义颜色</h3>
+      <div class="example-row">
+        <EbizStatusBadge color="#8B5CF6" text="紫色状态" />
+        <EbizStatusBadge color="#EC4899" text="粉色状态" />
+        <EbizStatusBadge color="#14B8A6" text="青色状态" />
+        <EbizStatusBadge color="#F59E0B" text="橙色状态" />
+      </div>
+    </div>
+
+    <div class="example-section">
+      <h3>预设颜色映射</h3>
+      <div class="example-row">
+        <EbizStatusBadge 
+          status="success" 
+          text="自定义预设颜色" 
+          :colorMap="customColorMap" 
+        />
+        <EbizStatusBadge 
+          status="error" 
+          text="自定义预设颜色" 
+          :colorMap="customColorMap" 
+        />
+        <EbizStatusBadge 
+          status="warning" 
+          text="自定义预设颜色" 
+          :colorMap="customColorMap" 
+        />
+        <EbizStatusBadge 
+          status="processing" 
+          text="自定义预设颜色" 
+          :colorMap="customColorMap" 
+        />
+      </div>
+    </div>
+
+    <div class="example-section">
+      <h3>不同尺寸</h3>
+      <div class="example-row">
+        <EbizStatusBadge size="small" text="小尺寸" />
+        <EbizStatusBadge size="medium" text="中尺寸" />
+        <EbizStatusBadge size="large" text="大尺寸" />
+        <EbizStatusBadge :size="20" text="自定义尺寸(20px)" />
+      </div>
+    </div>
+
+    <div class="example-section">
+      <h3>不同位置</h3>
+      <div class="example-row">
+        <EbizStatusBadge position="left" text="左侧" />
+        <EbizStatusBadge position="right" text="右侧" />
+        <EbizStatusBadge position="top" text="顶部" />
+        <EbizStatusBadge position="bottom" text="底部" />
+      </div>
+    </div>
+
+    <div class="example-section">
+      <h3>脉冲动画</h3>
+      <div class="example-row">
+        <EbizStatusBadge status="processing" :pulse="true" text="处理中" />
+        <EbizStatusBadge status="success" :pulse="true" text="成功" />
+        <EbizStatusBadge status="error" :pulse="true" text="错误" />
+      </div>
+    </div>
+
+    <div class="example-section">
+      <h3>只显示状态点（无文本）</h3>
+      <div class="example-row">
+        <EbizStatusBadge status="default" :showText="false" />
+        <EbizStatusBadge status="success" :showText="false" />
+        <EbizStatusBadge status="warning" :showText="false" />
+        <EbizStatusBadge status="error" :showText="false" />
+        <EbizStatusBadge status="processing" :showText="false" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { EbizStatusBadge } from '../index.js';
+import { ref } from 'vue';
+
+export default {
+  name: 'StatusBadgeExample',
+  components: {
+    EbizStatusBadge
+  },
+  setup() {
+    // 自定义预设颜色映射
+    const customColorMap = ref({
+      success: '#6EE7B7', // 浅绿色
+      error: '#F87171',   // 浅红色
+      warning: '#FCD34D', // 浅黄色
+      processing: '#60A5FA', // 浅蓝色
+      default: '#A1A1AA'  // 浅灰色
+    });
+
+    return {
+      customColorMap
+    };
+  }
+}
+</script>
+
+<style scoped>
+.example-container {
+  padding: 20px;
+  font-family: Arial, sans-serif;
+}
+
+.example-section {
+  margin-bottom: 30px;
+  border: 1px solid #eee;
+  border-radius: 6px;
+  padding: 16px;
+}
+
+.example-section h3 {
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-size: 16px;
+  color: #333;
+}
+
+.example-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  align-items: center;
+}
+</style>