@ebiz/designer-components 0.0.18

package/src/components/EbizSelect.vue

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <tiny-select
+      v-model="value3"
+      filterable
+      remote
+      :remote-config="{ autoSearch: true }"
+      :remote-method="remoteMethod3"
+      :loading="loading3"
+      loading-text="Loading..."
+      @change="onChange"
+    >
+      <tiny-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, toRefs} from 'vue'
+import { TinySelect, TinyOption } from '@opentiny/vue'
+import request from '@/apiService/simpleDataService';
+const props = defineProps({
+  apiConfig: {
+    type: Object,
+    default: {
+        apiId: null,
+        apiType: ''
+    }
+  }
+})
+const emit = defineEmits(['formSubmitted'])
+
+onMounted(() => {
+  remoteMethod3('')
+})
+
+const loading3 = ref(false)
+const value3 = ref('')
+const options3 = ref([])
+const list = ref([])
+
+{/* const url = ('http://192.168.0.247:9002/api/appdata/select') */}
+
+const { apiConfig } = toRefs(props);
+
+const remoteMethod3 = (query) => {
+  request.fetch({
+    "queryParams":{"name": query}
+  },{
+    apiId: apiConfig.value.apiId,
+  },'/appdata/select',).then((val) => {
+    console.log("val.data11111", val.data)
+    options3.value = val.data.map((item) => {
+      return { value: item.name, label: item.name }
+    })
+    console.log("options3.value", options3.value)
+
+  }).catch((err) => {
+    console.log("err111111", err)
+  })
+}
+const onChange = () => {
+  emit('formSubmitted', value3.value);
+}
+
+
+{/* const url = ('http://localhost:3000/admin/product/getHomeProList') */}
+
+
+{/* onMounted(async() => {
+    // await axios.get(url).then((val) => {
+    //     console.log('val', val.data.data)
+    //     list.value = val.data.data.map((item) => {
+    //         return { value: item.name, label: item.name }
+    //       })
+    // })
+
+
+    //  post请求  参数：  apiId: 372, queryParams: {"type": 1}
+    await axios.post(url, { apiId: params.apiId, queryParams: { type: 1 } }).then((val) => {
+      list.value = val.data.data.map((item) => {
+        return { value: item.name, label: item.name }
+      })
+    })
+
+}) */}
+
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

package/src/components/EbizStatsCard.vue

@@ -0,0 +1,114 @@
+<template>
+    <div class="ebiz-stats-card" :style="cardStyle">
+        <div class="card-title">{{ title }}</div>
+        <div class="card-value">{{ value }}</div>
+    </div>
+</template>
+
+<script setup>
+import { defineProps, computed } from 'vue';
+
+/**
+ * EbizStatsCard 组件 - 统计数据卡片组件
+ * 支持自定义背景色、标题文本和数值
+ */
+const props = defineProps({
+    /**
+     * 卡片标题
+     */
+    title: {
+        type: String,
+        default: '标题'
+    },
+    /**
+     * 卡片数值
+     */
+    value: {
+        type: [String, Number],
+        default: '0'
+    },
+    /**
+     * 卡片背景色
+     */
+    backgroundColor: {
+        type: String,
+        default: '#f5f5f5'
+    },
+    /**
+     * 卡片边框颜色
+     */
+    borderColor: {
+        type: String,
+        default: '#d9d9d9'
+    },
+    /**
+     * 卡片宽度
+     */
+    width: {
+        type: String,
+        default: '240px'
+    },
+    /**
+     * 卡片高度
+     */
+    height: {
+        type: String,
+        default: '80px'
+    },
+    /**
+     * 卡片边框圆角
+     */
+    borderRadius: {
+        type: String,
+        default: '8px'
+    },
+    /**
+     * 标题颜色
+     */
+    titleColor: {
+        type: String,
+        default: '#333'
+    },
+    /**
+     * 数值颜色
+     */
+    valueColor: {
+        type: String,
+        default: '#000'
+    }
+});
+
+// 计算卡片样式
+const cardStyle = computed(() => {
+    return {
+        backgroundColor: props.backgroundColor,
+        border: `1px solid ${props.borderColor}`,
+        width: props.width,
+        height: props.height,
+        borderRadius: props.borderRadius
+    };
+});
+</script>
+
+<style scoped>
+.ebiz-stats-card {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+    box-sizing: border-box;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.card-title {
+    font-size: 16px;
+    font-weight: 500;
+    color: v-bind('props.titleColor');
+}
+
+.card-value {
+    font-size: 24px;
+    font-weight: bold;
+    color: v-bind('props.valueColor');
+}
+</style> 

package/src/components/EbizTabs.vue

@@ -0,0 +1,101 @@
+<template>
+  <tiny-tabs v-model="showTab" :tab-style="props.tabStyle" activeColor="#5e7ce0" @click="tabChange">
+    <tiny-tab-item activeColor="#5e7ce0" v-for="i in showTabs" :key="i.value" :title="i.label" :name="i.value.toString()">
+      <slot></slot>
+    </tiny-tab-item>
+  </tiny-tabs>
+</template>
+
+<script setup lang="jsx">
+import { ref,computed,watch} from 'vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
+import {dataService} from "../index.js";
+const emit = defineEmits(['tabChange'])
+const props = defineProps({
+  // 远程请求的配置
+  apiConfig: {
+    type: Object,
+    default:()=>({
+      apiId: null,
+      apiType: 'MULTIPLE_DATA_SEARCH',
+    }),
+  },
+  // 不使用用远程的tabs
+  tabs:{
+    type:Array,
+    default:()=>[],
+  },
+  // tab名称对应的字段
+  labelKey:{
+    type:String,
+    default:'name'
+  },
+  // tab value对应的字段
+  valueKey:{
+    type:String,
+    default:'id'
+  },
+  // 标签卡样式
+  tabStyle:{
+    type:String,
+    default:''
+  },
+  // 展示值
+  showTab:{
+    type:String,
+    default:''
+  },
+  // 绑定值
+  currentTab:{
+    type:String,
+    default:''
+  },
+})
+// 远程请求的tabs
+const remoteTabs = ref([]);
+// 展示的tabs
+const showTabs = computed(()=>{
+  if(remoteTabs.value.length) return [{label:'全部',value:'0'},...remoteTabs.value];
+  if(props.tabs.length) return props.tabs;
+  return [{label:'全部',value:'0'}];
+})
+
+// 展示的值
+const showTab = computed(()=>{
+  if(props.showTab) return props.showTab;
+  return props.currentTab || '0';
+})
+// methods
+const tabChange= (e)=>{
+  emit('tabChange',e.name === '0'?'':e.name);
+}
+// init
+watch(()=>showTabs.value,()=>{
+  tabChange({name:showTab.value})
+})
+watch(()=>props.apiConfig,(nVal) => {
+  if(!nVal?.apiId) return;
+  dataService.fetch({ }, {apiId:nVal.apiId,apiType:'MULTIPLE_DATA_SEARCH'}).then(res => {
+    remoteTabs.value = (res.data ?? []).map(i=>({
+      label:i[props.labelKey],
+      value:i[props.valueKey],
+    }))
+  })
+},{immediate:true})
+</script>
+
+<style scoped>
+.pc-demo .tiny-tabs__content {
+  line-height: 2;
+}
+</style>
+
+<style scoped lang="less">
+:deep(.tiny-tabs__item.is-active){
+  color:#5e7ce0;
+}
+:deep(.tiny-tabs__active-bar){
+  background:#5e7ce0;
+  height:4px;
+}
+</style>

package/src/components/EbizTitle.vue

@@ -0,0 +1,99 @@
+<template>
+    <div class="ebiz-title">
+        <div class="color-block" :style="{ backgroundColor: color, width: `${blockWidth}px` }"></div>
+        <h2 class="title-text">
+            <slot name="title">
+                {{ displayTitle }}
+            </slot>
+        </h2>
+    </div>
+</template>
+
+<script setup>
+import { defineProps, computed } from 'vue';
+
+/**
+ * EbizTitle 组件 - 带有色块的标题组件
+ * 支持自定义标题文本、色块颜色和色块宽度
+ * 包含一个按钮，点击时在标题后添加点号并触发事件
+ * 支持通过插槽自定义标题内容
+ */
+const props = defineProps({
+    apiConfig: {
+        type: Object,
+        default: () => ({
+            apiId: 0,
+            apiType: 'select-list',
+        })
+    },
+    /**
+     * 标题文本 (当不使用插槽时显示)
+     */
+    title: {
+        type: String,
+        default: '标题'
+    },
+    /**
+     * 色块颜色，支持任何有效的CSS颜色值
+     */
+    color: {
+        type: String,
+        default: '#1890ff'
+    },
+    /**
+     * 色块宽度，单位为像素
+     */
+    blockWidth: {
+        type: Number,
+        default: 10
+    }
+});
+
+// 计算属性：根据点号数量生成显示的标题
+const displayTitle = computed(() => {
+    return props.title;
+});
+</script>
+
+<style scoped>
+.ebiz-title {
+    display: flex;
+    align-items: center;
+    margin: 16px 0;
+}
+
+.color-block {
+    height: 20px;
+    border-radius: 2px;
+    margin-right: 8px;
+}
+
+.title-text {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 500;
+    color: #333;
+    line-height: 1.5;
+    margin-right: 8px;
+}
+
+.title-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    background-color: #f0f0f0;
+    border: 1px solid #d9d9d9;
+    cursor: pointer;
+    font-size: 14px;
+    transition: all 0.3s;
+}
+
+.title-button:hover {
+    background-color: #e6f7ff;
+    border-color: #1890ff;
+    color: #1890ff;
+}
+</style>

package/src/components/Form.vue

@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <slot name="content"></slot>
+    </div>
+</template>
+
+<script setup>
+
+import { ref, defineProps, onMounted } from "vue";
+
+const props = defineProps({
+    apiConfig: {
+        type: Object,
+        default: {
+            apiId: null,
+            apiType: ''
+        }
+    }
+})
+
+onMounted(() => {
+    console.log("FormContainer component has been mounted.");
+    // You can add any initialization logic here
+    // 加载数据
+
+});
+</script>

package/src/components/MyComponent.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="my-component">
+    <t-input v-model="value" placeholder="请输入内容" @update:modelValue="change"></t-input>
+    <t-button size="small">查询数据</t-button>
+  </div>
+</template>
+
+<script>
+import { Input as TInput } from 'tdesign-vue-next';
+import { ref } from "vue";
+
+export default {
+  name: 'MyComponent',
+  components: {
+    TInput
+  },
+  props: {
+    modelValue: {
+      type: String
+    },
+    name: String
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const value = ref(props.modelValue)
+
+    const change = (val) => {
+      value.value = val
+      console.log(val)
+      emit('update:modelValue', value.value)
+    }
+
+    return {
+      value,
+      change
+    }
+  }
+}
+</script>

package/src/components/Table.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="my-component">
+    {{ value }}
+    <t-table row-key="key" :data="tableData" :columns="columns"></t-table>
+    <slot></slot>
+    <t-button @click="changeValue"> 修改数据</t-button>
+  </div>
+</template>
+
+<script setup>
+
+import { ref, defineEmits, defineProps, watch } from "vue";
+
+const props = defineProps(['modelValue', 'dataSource']);
+
+const tableData = ref([
+  { id: 1, name: '张三', age: 18 },
+  { id: 2, name: '李四', age: 20 },
+  { id: 3, name: '王五', age: 22 },
+]);
+const columns = [
+  { colKey: 'id', title: 'ID', width: '100' },
+  { colKey: 'name', title: '姓名', ellipsis: true },
+  { colKey: 'age', title: '年龄' },
+];
+
+const emit = defineEmits("update:modelValue");
+
+watch(() => props.dataSource, (val) => {
+  version.value = 0;
+  changeValue()
+})
+const value = ref(props.modelValue)
+
+const change = (val) => {
+  value.value = val
+  emit('update:modelValue', value.value)
+}
+
+const version = ref(0);
+const changeValue = () => {
+  change(props.dataSource + ' : ' + (version.value++))
+}
+
+</script>

package/src/components/charts/chart.js

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import core from './core';
+import Register from './register';
+import { isFunction } from './util/type';
+
+// 图表核心对象，通过 Register 全量引入图表给 HuiCharts 渲染，打包容量较大
+export default class HuiCharts extends core {
+  constructor() {
+    super();
+    // 图表名称
+    this.chartName = null;
+  }
+
+  /**
+   * 传入配置项
+   * @param {图表类型, 当为string型时需要转换为对应图表class} chart 
+   * @param {配置项} iChartOption 
+   * @param {三方插件} plugins 
+   * @param {是否初始渲染} isInit 
+   */
+  setSimpleOption(chart, iChartOption, plugins = {}, isInit = true) {
+    let ChartClass = null; 
+    if(isFunction(chart)){
+      this.chartName = chart.name;
+      ChartClass = chart;
+    } else {
+      this.chartName = chart;
+      ChartClass = this.getChartClass(chart);
+    }
+    super.setSimpleOption(ChartClass, iChartOption, plugins, isInit);
+  }
+
+  // 获取图表类
+  getChartClass(name) {
+    return Register.getRegisteredComp(name);
+  }
+}

package/src/components/charts/components/AssembleBubbleChart/BaseOption.js

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+const BaseOption = {
+  dataset: [
+    {
+      source: [],
+    },
+  ],
+  // 图例颜色
+  color: [],
+  legend: {
+    data: [],
+    icon: 'circle',
+    left: 'center',
+    bottom: 0,
+    textStyle: {},
+  },
+  hoverLayerThreshold: Infinity,
+  series: [
+    {
+      type: 'custom',
+      colorBy: 'data',
+      renderItem: "",
+      name: 'custom',
+      coordinateSystem: 'none',
+      encode: {
+        tooltip: 'value',
+        itemName: 'id',
+      },
+    },
+  ],
+};
+
+const CHARTTYPE = {
+  NON_NESTED: 'non-nested', // 非嵌套式
+  NON_NESTED_AGGREGATE: 'non-nested-aggregate', // 非嵌套聚合式
+  NESTED: 'nested', // 嵌套式
+};
+
+export default BaseOption;
+export { CHARTTYPE };

package/src/components/charts/components/AssembleBubbleChart/chartToken.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import Token from '../../feature/token';
+import {CHART_TYPE} from '../../util/constants'
+
+const chartToken = Token.getTokenByName(CHART_TYPE.ASSEMBLE_BUBBLE)
+
+export default chartToken;

package/src/components/charts/components/AssembleBubbleChart/handleOption.js

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import defendXSS from '../../util/defendXSS';
+import { CHARTTYPE } from './BaseOption';
+import cloneDeep from '../../util/cloneDeep';
+
+// 配置默认鼠标悬浮提示框
+export function defaultTooltipFormatter(baseOpt) {
+  if (!baseOpt.tooltip.formatter) {
+    baseOpt.tooltip.formatter = params => {
+      let htmlString = '';
+      const bgColor = params.data.borderColor || params.data.color;
+      htmlString +=
+        `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color
+          :${defendXSS(bgColor)};">` +
+        '</span>' +
+        `<span style="display:inline-block;margin-left:5px">${defendXSS(params.data.type)}</span>` +
+        '<br/>' +
+        `<span style="display:inline-block;">${defendXSS(params.data.label)}</span>` +
+        `<span style="display:inline-block;margin-left:10px;">${defendXSS(params.data.value)}</span>` +
+        '<br/>';
+      return htmlString;
+    };
+  }
+}
+
+const judgeType = (that) => {
+  const { iChartOption: { type, data } } = that;
+  if (!data || !data.length) throw new Error('聚合气泡图必须定义data数据');
+  const noChild = data.every(item => !item.children || !item.children.length);
+  for (let i in CHARTTYPE) {
+    if (type === CHARTTYPE[i]) {
+      that.chartType = CHARTTYPE[i];
+    }
+  }
+  if (!that.chartType) {
+    that.chartType = CHARTTYPE[noChild ? 'NON_NESTED' : 'NESTED'];
+  }
+};
+
+const bindLegendEvent = (baseOpt, chartInstance) => {
+  let originSource = cloneDeep(baseOpt.dataset[0].source);
+  chartInstance.on('legendselectchanged', function (params) {
+    let newSource = [originSource[0]];
+    for (let type in params.selected) {
+      if (params.selected[type]) {
+        newSource = newSource.concat(originSource.filter(v => v.type === type));
+      }
+    }
+    baseOpt.dataset[0].source = newSource;
+    setTimeout(() => {
+      chartInstance.setOption(baseOpt);
+    }, 20);
+  });
+};
+
+export { judgeType, bindLegendEvent };