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

package/src/components/EbizTableColumn.vue

@@ -0,0 +1,117 @@
+<script setup>
+import { computed, inject, onMounted, getCurrentInstance } from 'vue';
+
+const props = defineProps({
+  // 列唯一标识
+  colKey: {
+    type: String,
+    required: true
+  },
+  // 列标题
+  title: {
+    type: String,
+    default: ''
+  },
+  // 列宽度
+  width: {
+    type: [String, Number],
+    default: ''
+  },
+  // 最小列宽
+  minWidth: {
+    type: [String, Number],
+    default: ''
+  },
+  // 水平对齐方式
+  align: {
+    type: String,
+    default: 'left',
+    validator: (val) => ['left', 'center', 'right'].includes(val)
+  },
+  // 固定列位置
+  fixed: {
+    type: String,
+    default: '',
+    validator: (val) => ['', 'left', 'right'].includes(val)
+  },
+  // 列类型
+  type: {
+    type: String,
+    default: '',
+    validator: (val) => ['', 'multiple', 'single', 'index', 'expand'].includes(val)
+  },
+  // 超出省略
+  ellipsis: {
+    type: Boolean,
+    default: false
+  },
+  // 标题超出省略
+  ellipsisTitle: {
+    type: Boolean,
+    default: false
+  },
+  // 是否支持排序
+  sorter: {
+    type: Boolean,
+    default: false
+  },
+  // 过滤配置
+  filter: {
+    type: Object,
+    default: null
+  },
+  // 自定义类名
+  className: {
+    type: String,
+    default: ''
+  },
+  // 是否禁用
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+
+// 获取父级表格组件实例
+const tableCtx = inject('tableCtx', null);
+const instance = getCurrentInstance();
+
+// 格式化列配置对象
+const columnConfig = computed(() => {
+  return {
+    colKey: props.colKey,
+    title: props.title,
+    width: props.width,
+    minWidth: props.minWidth,
+    align: props.align,
+    fixed: props.fixed || '',
+    type: props.type || '',
+    ellipsis: props.ellipsis,
+    ellipsisTitle: props.ellipsisTitle,
+    sorter: props.sorter,
+    filter: props.filter,
+    className: props.className,
+    disabled: props.disabled,
+    cell: instance.slots.default ? props.colKey : undefined,
+    title: instance.slots.title ? `title-${props.colKey}` : undefined
+  };
+});
+
+// 在组件挂载时将列配置注册到表格组件
+onMounted(() => {
+  if (tableCtx && typeof tableCtx.registerColumn === 'function') {
+    tableCtx.registerColumn(columnConfig.value);
+  } else {
+    console.warn('EbizTableColumn必须在EbizTable内部使用');
+  }
+});
+</script>
+
+<template>
+  <template v-if="$slots.default">
+    <slot></slot>
+  </template>
+  <template v-if="$slots.title">
+    <slot name="title"></slot>
+  </template>
+</template> 

package/src/components/EbizTableSort.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="ebiz-table-sort">
+    <t-popup :visible="sortVisible" trigger="click" placement="bottom-right" :overlay-style="{ width: '450px' }"
+      @visible-change="handleVisibleChange" :destroy-on-close="false">
+      <template #content>
+        <t-card :title="popupTitle" size="small" :bordered="false">
+          <div class="sort-content">
+            <div class="sort-item" v-for="(item, index) in sortItems" :key="index">
+              <div class="sort-item-content" style="display: flex; margin-bottom: 12px;">
+                <t-select v-model="item.type" :placeholder="fieldPlaceholder" :options="fieldOptions" :clearable="false"
+                  :style="{ width: '170px' }" @change="handleSortChange" />
+                <t-select v-model="item.sort" :placeholder="orderPlaceholder" :options="orderOptions" :clearable="false"
+                  :style="{ width: '170px', marginLeft: '8px' }" @change="handleSortChange" />
+                <t-button theme="default" variant="text" shape="circle" @click="removeSortItem(index)"
+                  v-if="sortItems.length > 1" :style="{ marginLeft: '8px', flexShrink: 0 }">
+                  <template #icon>
+                    <t-icon name="close" />
+                  </template>
+                </t-button>
+              </div>
+            </div>
+            <div class="sort-footer">
+              <t-button theme="default" variant="outline" @click="addSortItem"
+                v-if="sortItems.length < maxSortItems">
+                <template #icon>
+                  <t-icon name="add" />
+                </template>
+                {{ addConditionText }}
+              </t-button>
+            </div>
+          </div>
+        </t-card>
+      </template>
+      <t-button block variant="outline" :title="title">
+        <template #icon>
+          <t-icon :name="icon" />
+        </template>
+        <div v-if="buttonText">
+          {{ buttonText }}
+        </div>
+      </t-button>
+    </t-popup>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "EbizTableSort"
+}
+</script>
+
+<script setup>
+import { ref, computed, defineProps, defineEmits, watch } from 'vue';
+import { Button as TButton, Popup as TPopup, Card as TCard, Select as TSelect, Icon as TIcon } from 'tdesign-vue-next';
+
+const props = defineProps({
+  // v-model绑定值
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  // 按钮图标
+  icon: {
+    type: String,
+    default: 'sort'
+  },
+  // 按钮文本
+  buttonText: {
+    type: String,
+    default: ''
+  },
+  // 按钮标题
+  title: {
+    type: String,
+    default: '排序'
+  },
+  // 弹出层标题
+  popupTitle: {
+    type: String,
+    default: '排序'
+  },
+  // 字段选项
+  fieldOptions: {
+    type: Array,
+    default: () => []
+  },
+  // 字段占位符
+  fieldPlaceholder: {
+    type: String,
+    default: '选择字段'
+  },
+  // 排序选项
+  orderOptions: {
+    type: Array,
+    default: () => [
+      { value: 'asc', label: '升序 ↑' },
+      { value: 'desc', label: '降序 ↓' }
+    ]
+  },
+  // 排序占位符
+  orderPlaceholder: {
+    type: String,
+    default: '选择排序'
+  },
+  // 最大排序条件数量
+  maxSortItems: {
+    type: Number,
+    default: 5
+  },
+  // 添加条件文本
+  addConditionText: {
+    type: String,
+    default: '添加排序条件'
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'sort', 'visible-change']);
+
+// 排序弹出层显示状态
+const sortVisible = ref(false);
+
+// 排序条件列表
+const sortItems = ref([]);
+
+// 监听modelValue变化
+watch(() => props.modelValue, (newVal) => {
+  if (newVal && newVal.length > 0) {
+    sortItems.value = JSON.parse(JSON.stringify(newVal));
+  } else {
+    // 默认添加一个空的排序条件
+    sortItems.value = [{ type: '', sort: 'desc' }];
+  }
+}, { immediate: true });
+
+// 添加排序条件
+const addSortItem = () => {
+  if (sortItems.value.length < props.maxSortItems) {
+    sortItems.value.push({ type: '', sort: 'desc' });
+  }
+};
+
+// 移除排序条件
+const removeSortItem = (index) => {
+  sortItems.value.splice(index, 1);
+  handleSortChange();
+};
+
+// 处理排序变更
+const handleSortChange = () => {
+  // 过滤有效的排序条件（字段和排序方向都不为空）
+  const validSortItems = sortItems.value.filter(item => item.type && item.sort);
+  emit('update:modelValue', validSortItems);
+  emit('sort', validSortItems);
+};
+
+// 弹出层可见性变化
+const handleVisibleChange = (visible) => {
+  sortVisible.value = visible;
+  emit('visible-change', visible);
+};
+</script>
+
+<style lang="less" scoped>
+.ebiz-table-sort {
+  display: inline-block;
+  
+  .sort-content {
+    min-width: 400px;
+    width: 100%;
+  }
+
+  .sort-footer {
+    margin-top: 16px;
+  }
+
+  .sort-actions {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>

package/src/index.js

@@ -49,6 +49,9 @@ 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 EbizTableColumn from './components/EbizTableColumn.vue';
+import EbizTableSort from './components/EbizTableSort.vue';
+import EbizStatusBadge from "./components/EbizStatusBadge.vue";
 import { MessagePlugin as EbizMessage } from 'tdesign-vue-next';
 
 // 导入简洁数据服务
@@ -148,5 +151,10 @@ export {
   // 对话框组件
   EbizDialog,
   // 表格组件
-  EbizTable
+  EbizTable,
+  EbizTableColumn,
+  // 表格排序组件
+  EbizTableSort,
+  // 状态标记组件
+  EbizStatusBadge
 };

package/src/router/index.js

@@ -1,10 +1,13 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import Home from '../views/Home.vue'
+import ButtonView from '../views/Button.vue'
+import TableView from '../views/TableView.vue'
 
 const routes = [
   {
     path: '/',
     name: 'Home',
-    component: () => import('../views/Home.vue'),
+    component: Home,
     meta: { title: '首页' }
   },
   {
@@ -15,10 +18,16 @@ const routes = [
   },
   {
     path: '/table',
-    name: 'Table',
-    component: () => import('../views/Table.vue'),
+    name: 'table',
+    component: TableView,
     meta: { title: '表格组件示例' }
   },
+  {
+    path: '/table-column',
+    name: 'table-column',
+    component: TableView,
+    meta: { title: '表格列组件示例' }
+  },
   {
     path: '/form',
     name: 'Form',
@@ -27,8 +36,8 @@ const routes = [
   },
   {
     path: '/button',
-    name: 'Button',
-    component: () => import('../views/Button.vue'),
+    name: 'button',
+    component: ButtonView,
     meta: { title: '按钮组件示例' }
   },
   {
@@ -240,6 +249,18 @@ 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状态标记组件示例' }
+  },
+  {
+    path: '/table-sort',
+    name: 'TableSort',
+    component: () => import('../views/TableSortDemo.vue'),
+    meta: { title: 'Ebiz表格排序组件示例' }
   }
 ]
 

package/src/views/Home.vue

@@ -54,7 +54,10 @@ 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状态标记组件示例' },
+      { path: '/table-column', title: 'Ebiz表格列组件示例' },
+      { path: '/table-sort', 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> 

package/src/views/TableSortDemo.vue

@@ -0,0 +1,144 @@
+<template>
+    <div class="container">
+        <h1>表格排序组件演示</h1>
+
+        <div class="demo-section">
+            <h2>基础用法</h2>
+            <div class="demo-item">
+                <EbizTableSort icon="filter-sort" :field-options="fieldOptions" @sort="handleSort"
+                    @reset="handleReset" />
+            </div>
+            <div class="result" v-if="sortResult.length > 0">
+                <h3>排序结果：</h3>
+                <pre>{{ JSON.stringify(sortResult, null, 2) }}</pre>
+            </div>
+        </div>
+
+        <div class="demo-section">
+            <h2>自定义按钮</h2>
+            <div class="demo-item">
+                <EbizTableSort icon="filter" button-text="自定义排序" :field-options="fieldOptions" @sort="handleSort2" />
+            </div>
+            <div class="result" v-if="sortResult2.length > 0">
+                <h3>排序结果：</h3>
+                <pre>{{ JSON.stringify(sortResult2, null, 2) }}</pre>
+            </div>
+        </div>
+
+        <div class="demo-section">
+            <h2>预设排序条件</h2>
+            <div class="demo-item">
+                <EbizTableSort :field-options="fieldOptions" :default-sort="defaultSort" @sort="handleSort3" />
+            </div>
+            <div class="result" v-if="sortResult3.length > 0">
+                <h3>排序结果：</h3>
+                <pre>{{ JSON.stringify(sortResult3, null, 2) }}</pre>
+            </div>
+        </div>
+
+        <div class="demo-section">
+            <h2>多条件排序</h2>
+            <div class="demo-item">
+                <EbizTableSort :field-options="fieldOptions" :max-sort-items="3" @sort="handleSort4" />
+            </div>
+            <div class="result" v-if="sortResult4.length > 0">
+                <h3>排序结果：</h3>
+                <pre>{{ JSON.stringify(sortResult4, null, 2) }}</pre>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizTableSort } from '../index.js';
+
+// 字段选项
+const fieldOptions = [
+    { value: 'name', label: '姓名' },
+    { value: 'age', label: '年龄' },
+    { value: 'address', label: '地址' },
+    { value: 'createTime', label: '创建时间' },
+    { value: 'status', label: '状态' }
+];
+
+// 默认排序条件
+const defaultSort = [
+    { field: 'age', order: 'desc' }
+];
+
+// 排序结果
+const sortResult = ref([]);
+const sortResult2 = ref([]);
+const sortResult3 = ref([]);
+const sortResult4 = ref([]);
+
+// 处理排序
+const handleSort = (sort) => {
+    sortResult.value = sort;
+    console.log('排序条件：', sort);
+};
+
+const handleSort2 = (sort) => {
+    sortResult2.value = sort;
+    console.log('排序条件2：', sort);
+};
+
+const handleSort3 = (sort) => {
+    sortResult3.value = sort;
+    console.log('排序条件3：', sort);
+};
+
+const handleSort4 = (sort) => {
+    sortResult4.value = sort;
+    console.log('排序条件4：', sort);
+};
+
+// 处理重置
+const handleReset = () => {
+    sortResult.value = [];
+    console.log('重置排序');
+};
+</script>
+
+<style lang="less" scoped>
+.container {
+    padding: 20px;
+
+    h1 {
+        margin-bottom: 20px;
+    }
+
+    .demo-section {
+        margin-bottom: 30px;
+        padding: 20px;
+        border: 1px solid #eee;
+        border-radius: 6px;
+
+        h2 {
+            margin-bottom: 16px;
+            font-size: 18px;
+        }
+
+        .demo-item {
+            margin-bottom: 16px;
+        }
+
+        .result {
+            margin-top: 20px;
+            padding: 16px;
+            background-color: #f9f9f9;
+            border-radius: 4px;
+
+            h3 {
+                margin-bottom: 8px;
+                font-size: 16px;
+            }
+
+            pre {
+                font-family: monospace;
+            }
+        }
+    }
+}
+</style>