@ebiz/designer-components 0.0.18-beta.9 → 0.0.18-kzy.2

package/package.json

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

package/src/apiService/simpleDataService.js

@@ -8,7 +8,7 @@ import axios from 'axios'
 import { TinyNotify } from '@opentiny/vue'
 
 // 从环境变量获取API基础URL
-const API_BASE_URL = 'http://' +  window.location.host + "/api";
+const API_BASE_URL = "http://localhost:8090/api";
 
 /**
  * 创建axios实例
@@ -30,7 +30,7 @@ axiosInstance.interceptors.request.use(
     // 添加认证信息
     const token = localStorage.getItem('token')
     if (token) {
-      config.headers['Authorization'] = `Bearer ${token}`
+      config.headers['AppDataAuthorization'] = `Bearer ${token}`
     }
 
     // 如果是FormData格式，不设置Content-Type，让浏览器自动设置

package/src/components/Button.vue

@@ -19,7 +19,7 @@ export default {
 
 import { ref, reactive, computed, toRef, toRefs } from 'vue';
 import { TinyButton, TinyTooltip, TinyNotify } from '@opentiny/vue';
-import dataServiceAppData from '../apiService/simpleDataServiceAppData';
+import dataService from '../apiService/simpleDataService';
 
 
 const props = defineProps({
@@ -92,7 +92,7 @@ const click = () => {
     props.onClick()
     if (!isNormal.value && apiConfig.value.apiId) {
         props.onPrepare()
-        dataServiceAppData.fetch(data.value, { key: apiConfig.value.key, apiId: apiConfig.value.apiId, apiType: apiMap[apiConfig.value.apiType] }).then((res) => {
+        dataService.fetch(data.value, { key: apiConfig.value.key, apiId: apiConfig.value.apiId, apiType: apiMap[apiConfig.value.apiType] }).then((res) => {
             emit('click', res)
             props.onFinish()
         })

package/src/components/EbizRemoteSelect.vue

@@ -21,7 +21,7 @@ export default {
 <script setup>
 import { ref, onMounted, toRefs, computed } from 'vue';
 import { Select as TSelect } from 'tdesign-vue-next';
-import dataServiceAppData from '../apiService/simpleDataServiceAppData';
+import dataService from '../apiService/simpleDataService';
 
 const props = defineProps({
     /**
@@ -81,12 +81,13 @@ const props = defineProps({
     /**
      * 选项配置
      */
-    optionsConfig: {
-        type: Object,
-        default: () => ({
-            labelField: '',
-            valueField: ''
-        })
+    labelField: {
+        type: String,
+        default: ''
+    },
+    valueField: {
+        type: String,
+        default: ''
     },
     /**
      * 组件尺寸
@@ -112,9 +113,9 @@ const props = defineProps({
     }
 });
 
-const { modelValue, apiConfig, queryParams } = toRefs(props)
+const { modelValue, apiConfig, labelField, valueField, queryParams } = toRefs(props)
 
-const emit = defineEmits(['update:modelValue', 'change', 'focus', 'blur']);
+const emit = defineEmits(['update:modelValue', 'change', 'selectOption', 'focus', 'blur']);
 
 // 选中的值
 const selectedValue = computed({
@@ -154,12 +155,11 @@ const handleRemoteSearch = async (keyword) => {
                 keyword
             }
         };
-        const res = await dataServiceAppData.fetch(params, props.apiConfig);
-        const { labelField, valueField } = props.optionsConfig;
+        const res = await dataService.fetch(params, props.apiConfig);
 
         options.value = res.data.map(item => ({
-            label: labelField ? item[labelField] : (item.label || item.name),
-            value: valueField ? item[valueField] : (item.value || item.id)
+            label: labelField.value ? item[labelField.value] : item.name,
+            value: valueField.value ? item[valueField.value] : item.id
         }));
     } catch (error) {
         console.error('远程搜索失败:', error);
@@ -188,6 +188,7 @@ const handleBlur = (value, context) => {
 const handleChange = (value, context) => {
     emit('update:modelValue', value);
     emit('change', value, context);
+    emit('selectOption', options.value.find(item => item.value === value));
 };
 
 // 组件挂载时，如果有默认值则加载对应的选项
@@ -198,16 +199,16 @@ onMounted(async () => {
             const params = {
                 queryParams: queryParams.value
             };
-            const res = await dataServiceAppData.fetch(params, {
+            const res = await dataService.fetch(params, {
                 key: props.apiConfig.key,
                 apiId: props.apiConfig.apiId,
                 apiType: 'MULTIPLE_DATA_SEARCH'
             });
-            const { labelField, valueField } = props.optionsConfig;
 
+            console.log('res', res)
             options.value = res.data.map(item => ({
-                label: labelField ? item[labelField] : (item.label || item.name),
-                value: valueField ? item[valueField] : (item.value || 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/EbizRichTextEditor.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="ebiz-rich-text-editor">
+    <tiny-fluent-editor
+      v-model="editorContent"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :height="height"
+      :menu-bar="toolbar !== false"
+      :toolbar="toolbar !== false ? toolbar : undefined"
+      @ready="handleReady"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @change="handleChange">
+    </tiny-fluent-editor>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "EbizRichTextEditor"
+}
+</script>
+
+<script setup>
+import { ref, watch, computed } from 'vue';
+import { TinyFluentEditor } from '@opentiny/vue';
+import dataService from "../apiService/simpleDataService";
+
+const props = defineProps({
+  /**
+   * 编辑器内容
+   */
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  /**
+   * 是否禁用
+   */
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 占位符文本
+   */
+  placeholder: {
+    type: String,
+    default: '请输入内容...'
+  },
+  /**
+   * 编辑器高度
+   */
+  height: {
+    type: [String, Number],
+    default: '600px'
+  },
+  /**
+   * 图片上传API配置
+   */
+  imageUploadConfig: {
+    type: Object,
+    default: () => ({
+      url: '/api/file/upload'
+    })
+  },
+  /**
+   * 工具栏配置，传入false则不显示工具栏
+   */
+  toolbar: {
+    type: [Array, Boolean],
+    default: () => [
+      ['fontFamily', 'fontSize', 'bold', 'italic', 'underline', 'strikeThrough'],
+      ['color', 'bgColor'],
+      ['alignment'],
+      ['bulletedList', 'numberedList', 'indent', 'outdent'],
+      ['link', 'image', 'table'],
+      ['clean']
+    ]
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'change', 'ready', 'focus', 'blur']);
+
+// 实际的编辑器内容，作为一个计算属性，允许双向绑定
+const editorContent = computed({
+  get: () => props.modelValue,
+  set: (val) => {
+    emit('update:modelValue', val);
+  }
+});
+
+// 编辑器实例
+const editorInstance = ref(null);
+
+// 处理编辑器就绪事件
+const handleReady = (editor) => {
+  editorInstance.value = editor;
+  
+  // 配置图片上传
+  if (props.imageUploadConfig.url) {
+    configureImageUpload(editor);
+  }
+  
+  emit('ready', editor);
+};
+
+// 配置图片上传功能
+const configureImageUpload = (editor) => {
+  // 获取编辑器实例的上传配置
+  if (editor && editor.setImageAction) {
+    editor.setImageAction({
+      customUploader: async (file) => {
+        try {
+          const formData = new FormData();
+          formData.append('file', file);
+          
+          // 使用 dataService 上传图片
+          const response = await dataService.upload(formData, props.imageUploadConfig);
+          
+          if (response && response.data && response.data.url) {
+            // 返回图片URL，编辑器会自动插入
+            return response.data.url;
+          } else {
+            throw new Error('上传失败');
+          }
+        } catch (error) {
+          console.error('图片上传失败:', error);
+          return null;
+        }
+      }
+    });
+  }
+};
+
+// 处理内容变化事件
+const handleChange = (content) => {
+  emit('change', content);
+};
+
+// 处理焦点事件
+const handleFocus = (event) => {
+  emit('focus', event);
+};
+
+// 处理失焦事件
+const handleBlur = (event) => {
+  emit('blur', event);
+};
+
+// 监听禁用状态变化
+watch(() => props.imageUploadConfig, (newConfig) => {
+  if (editorInstance.value && (newConfig.apiId || newConfig.url)) {
+    configureImageUpload(editorInstance.value);
+  }
+}, { deep: true });
+</script>
+
+<style scoped>
+.ebiz-rich-text-editor {
+  width: 100%;
+}
+
+/* 使用@opentiny/vue的样式变量保持一致性 */
+:deep(.tiny-editor-container) {
+  border: 1px solid var(--ti-common-color-line-normal, #dcdfe6);
+  border-radius: 4px;
+}
+
+:deep(.tiny-editor-toolbar) {
+  border-bottom: 1px solid var(--ti-common-color-line-normal, #dcdfe6);
+  background-color: var(--ti-common-color-bg-normal, #f5f7fa);
+}
+</style> 

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/components/EbizTabHeader.vue

@@ -8,7 +8,7 @@
 <script setup>
 import { ref, computed, watch } from 'vue'
 import { TinyTabs, TinyTabItem } from '@opentiny/vue'
-import { dataServiceAppData } from "../index.js"
+import { dataService } from "../index.js"
 
 const emit = defineEmits(['tabChange'])
 
@@ -83,7 +83,7 @@ watch(() => showTabs.value, () => {
 
 watch(() => props.apiConfig, (nVal) => {
   if (!nVal?.apiId) return
-  dataServiceAppData.fetch({}, { key: nVal.key, apiId: nVal.apiId, apiType: 'MULTIPLE_DATA_SEARCH' }).then(res => {
+  dataService.fetch({}, { key: nVal.key, apiId: nVal.apiId, apiType: 'MULTIPLE_DATA_SEARCH' }).then(res => {
     remoteTabs.value = (res.data ?? []).map(i => ({
       label: i[props.labelKey],
       value: i[props.valueKey],