@ebiz/designer-components 0.0.18

package/src/components/EbizMindmap/index.vue

@@ -0,0 +1,383 @@
+<template>
+    <div class="doc-playground">
+
+        <MindmapLayout :option="options" :layoutoption="layoutoption"></MindmapLayout>
+    </div>
+
+
+</template>
+
+<script>
+import MindmapLayout from './components/vueNode.vue';
+import { Slider, Switch, Radio, Numeric, Select, Option, } from '@opentiny/vue'
+
+const options = {
+    theme: 'hdesign-light',
+    layout: {
+        type: 'mindmap',
+        direction: 'LR',
+        nodeShape: 'rect',
+        vGap: 10,
+        hGap: 100,
+        bufferRender: true
+    },
+    node: {
+        width: 200,
+        height: 100,
+    },
+    legend: {
+        render(parmas) {
+            const { name, dataIndex } = parmas
+            const colors = ['#E02128', '#2070F3', '#09AA71', '#F4840C']
+            const color = colors[dataIndex]
+            return `<div class="demo-legend-container">
+      <div class="demo-legend-icon">
+        <div class="demo-legend-state" style="background-color:${color}"></div>
+      </div>
+      <div class="demo-legend-label">${name}</div>
+    </div>`
+        },
+        data: [
+            {
+                name: '岗位',
+            },
+            {
+                name: '部门',
+            }
+        ]
+    },
+    line: {
+        type: 'Bezier',
+        style: {
+            active: {
+                color: 'red',
+                width: 2,
+            },
+            disable: {
+                color: 'blue'
+            }
+        }
+    },
+    canvas: {
+        show: true,
+        grid: {
+            size: 20,
+            show: true,
+            type: 'dot',
+            config: {
+                color: '#aaaaaa',
+                unitSize: 1,
+            }
+        }
+    },
+    connector: {
+        startSharing: 'merge',
+        endSharing: 'merge',
+        type: 'expand',
+        show: true
+    },
+    data: {
+        id: 'root',
+        text: '产品研发中心',
+        peopleNum: 100,
+        more: {
+            introduction: '部门介绍:产品研发',
+            address: '部门地址:xx',
+            iphone: '部门电话:xx',
+            email: '部门邮箱:xxx',
+            contact: '部门联系人:xx'
+        },
+        children: [
+            {
+                id: 'R&DDept1',
+                text: '研发部',
+                peopleNum: 20,
+                more: {
+                    introduction: '部门介绍:研发部',
+                    address: '部门地址:xx',
+                    iphone: '部门电话:xx',
+                    email: '部门邮箱:xxx',
+                    contact: '部门联系人:xx'
+                },
+                children: [
+                    {
+                        id: 'frontend1',
+                        text: '研发一部',
+                        peopleNum: 8,
+                        more: {
+                            introduction: '部门介绍:研发一部',
+                            address: '部门地址:xx',
+                            iphone: '部门电话:xx',
+                            email: '部门邮箱:xxx',
+                            contact: '部门联系人:xx'
+                        },
+                    },
+                    {
+                        id: 'backend1',
+                        text: '研发二部',
+                        peopleNum: 12,
+                        more: {
+                            introduction: '部门介绍:研发二部',
+                            address: '部门地址:xx',
+                            iphone: '部门电话:xx',
+                            email: '部门邮箱:xxx',
+                            contact: '部门联系人:xx'
+                        },
+                    },
+                    {
+                        id: 'backend11',
+                        text: '研发三部',
+                        peopleNum: 12,
+                        more: {
+                            introduction: '部门介绍:研发二部',
+                            address: '部门地址:xx',
+                            iphone: '部门电话:xx',
+                            email: '部门邮箱:xxx',
+                            contact: '部门联系人:xx'
+                        },
+                    }
+                ]
+            },
+            {
+                id: 'designDept2',
+                text: '设计部',
+                peopleNum: 60,
+                more: {
+                    introduction: '部门介绍:设计部',
+                    address: '部门地址:xx',
+                    iphone: '部门电话:xx',
+                    email: '部门邮箱:xxx',
+                    contact: '部门联系人:xx'
+                },
+                children: [
+                    {
+                        id: 'UI2',
+                        text: '设计一部',
+                        peopleNum: 20,
+                        more: {
+                            introduction: '部门介绍:设计一部',
+                            address: '部门地址:xx',
+                            iphone: '部门电话:xx',
+                            email: '部门邮箱:xxx',
+                            contact: '部门联系人:xx'
+                        },
+                    },
+                    {
+                        id: 'UX2',
+                        text: '设计二部',
+                        peopleNum: 40,
+                        more: {
+                            introduction: '部门介绍:设计二部',
+                            address: '部门地址:xx',
+                            iphone: '部门电话:xx',
+                            email: '部门邮箱:xxx',
+                            contact: '部门联系人:xx'
+                        },
+                    },
+                    {
+                        id: 'UX22',
+                        text: '设计三部',
+                        peopleNum: 40,
+                        more: {
+                            introduction: '部门介绍:设计二部',
+                            address: '部门地址:xx',
+                            iphone: '部门电话:xx',
+                            email: '部门邮箱:xxx',
+                            contact: '部门联系人:xx'
+                        },
+                    },
+                    {
+                        id: 'UX222',
+                        text: '设计四部',
+                        peopleNum: 40,
+                        more: {
+                            introduction: '部门介绍:设计二部',
+                            address: '部门地址:xx',
+                            iphone: '部门电话:xx',
+                            email: '部门邮箱:xxx',
+                            contact: '部门联系人:xx'
+                        },
+                    },
+                ]
+            },
+            {
+                id: 'productDept3',
+                text: '产品部',
+                peopleNum: 20,
+                more: {
+                    introduction: '部门介绍:产品部',
+                    address: '部门地址:xx',
+                    iphone: '部门电话:xx',
+                    email: '部门邮箱:xxx',
+                    contact: '部门联系人:xx'
+                },
+                children: [
+                    {
+                        id: 'productManager3',
+                        text: '产品一部',
+                        peopleNum: 11,
+                        more: {
+                            introduction: '部门介绍:产品一部',
+                            address: '部门地址:xx',
+                            iphone: '部门电话:xx',
+                            email: '部门邮箱:xxx',
+                            contact: '部门联系人:xx'
+                        },
+                    },
+                    {
+                        id: 'productOperation3',
+                        text: '产品二部',
+                        peopleNum: 9,
+                        more: {
+                            introduction: '部门介绍:产品二部',
+                            address: '部门地址:xx',
+                            iphone: '部门电话:xx',
+                            email: '部门邮箱:xxx',
+                            contact: '部门联系人:xx'
+                        },
+                    }
+                ]
+            }
+        ]
+    },
+    menu: {
+        node: {
+            data: [
+                { icon: './image/charts/contextmenu/delete.svg', label: '删除节点', value: 'delete' },
+                { icon: './image/charts/contextmenu/copy.svg', label: '复制节点', value: 'copy' },
+                { icon: './image/charts/contextmenu/merge.svg', label: '合并节点', value: 'merge' },
+                { icon: './image/charts/contextmenu/setting.svg', label: '数据配置', value: 'setting' },
+                { icon: './image/charts/contextmenu/add.svg', label: '新增子节点', value: 'add' },
+            ],
+            onclick: (itemData, targetId, e) => {
+                // console.log('node--------', itemData, targetId, e)
+            }
+        },
+        canvas: {
+            data: [
+                { icon: './image/charts/contextmenu/broom.svg', label: '清除', value: 'clear' },
+                { icon: './image/charts/contextmenu/resetting.svg', label: '重置', value: 'reset' },
+            ],
+            onclick: (itemData, el) => {
+                // console.log('canvas------', itemData, el)
+            }
+        },
+        line: {
+            data: [
+                { icon: './image/charts/contextmenu/paint.svg', label: '线条', value: 'line' },
+            ],
+            itemRender: (itemData, targetId) => {
+                return `<div style="display: flex; align-item: center;">
+        <img style="width: 20px; height: 20px; margin-right: 6px;" src=${itemData.icon} alt="" />
+        <p>${itemData.label}高亮</p>
+        <div>`
+            },
+            onclick: (itemData, targetId, e) => {
+                // console.log('line--------', itemData, targetId)
+            }
+        },
+        legend: {
+            data: [
+                { label: '高亮', value: 'highlight' },
+            ],
+            onclick: (itemData, targetId, e) => {
+                // console.log('legend--------', itemData, targetId)
+            }
+        }
+    }
+};
+
+export default {
+    name: 'Card',
+    components: {
+        MindmapLayout,
+        TinySlider: Slider,
+        TinySwitch: Switch,
+        TinyRadio: Radio,
+        TinyNumeric: Numeric,
+        TinySelect: Select,
+        TinyOption: Option,
+    },
+    data() {
+        return {
+            chartCode: [],
+            options: options,
+            chartData: ['CardChart'],
+            activeName: 'DEMO',
+            theme: localStorage.getItem('chartTheme') || 'hdesign-light',
+            directionTypes: [{
+                value: 'LR',
+                label: 'LR--由左到右布局'
+            }, {
+                value: 'RL',
+                label: 'RL--由右到左布局'
+            }, {
+                value: 'TB',
+                label: 'TB--由上到下布局'
+            }, {
+                value: 'BT',
+                label: 'BT--由下到上布局'
+            }, {
+                value: 'H',
+                label: 'H--左右布局'
+            }, {
+                value: 'V',
+                label: 'V--上下布局'
+            }],
+            layoutoption: {
+                direction: 'LR',
+                vGap: 40,
+                hGap: 100,
+                oneSide: ['designDept'],
+                oneSideString: 'designDept'
+            },
+            backGroundColor: ''
+        }
+
+    },
+    watch: {
+
+    },
+    mounted() {
+        this.chartData.forEach((item, index) => {
+            this.axios.get(`quick_start/${item}.md`).then(res => {
+                this.chartCode[index] = res.data.replaceAll("{{VITE_BASECOPYRIGHTSPAT}}", import.meta.env.VITE_BASECOPYRIGHTSPAT);
+            })
+        })
+        this.setTheme(this.theme?.indexOf('light') > -1);
+        this.$bus.on('themeChange', (val) => {
+            this.setTheme(val.indexOf('light') > -1)
+        })
+
+        this.backGroundColor = this.theme.toLowerCase().includes('light') ? '#ffffff' : '#191919';
+
+
+    },
+    watch: {
+        theme: function (newVal) {
+            this.setTheme(newVal.indexOf('light') > -1)
+        },
+
+    },
+    methods: {
+
+        setTheme(val) {
+            this.tabsBtnACtiveBg = val ? '#ffffff' : '#1c1c1c';
+            this.tabsBtnACtiveColor = val ? '#000' : '#f1f0f0';
+            this.tabsBtnBg = val ? '#f2f2f2' : '#414141';
+            this.tabsBtnColor = val ? '#777777' : '#c9c3c5';
+        },
+    }
+}
+</script>
+<style lang="less" scoped>
+.chart-container {
+    border: 1px solid var(--ti-base-color-common-1);
+}
+
+.doc-playground .doc-split-pane .doc-editor .control-item.normal {
+    .radio {
+        display: flex;
+    }
+}
+</style>

package/src/components/EbizOkrTree.vue

@@ -0,0 +1,99 @@
+<template>
+    <div>
+        123412
+        <!-- <VueOkrTree :data="calcData" showNodeNum :defaultExpandAll="defaultExpanded" :showCollapsable="showCollapsable"
+            :direction="horizontal ? 'horizontal' : 'vertical'" :label-class-name="formatClass"
+            :renderContent="renderContent" @node-click="nodeClick" /> -->
+    </div>
+
+</template>
+
+<script setup>
+import { h, ref } from 'vue';
+// import { VueOkrTree } from 'vue-okr-tree-vue3';
+// import 'vue-okr-tree-vue3/dist/vue-okr-tree.css';
+
+const props = defineProps({
+    // 数据源
+    data: {
+        type: Array,
+        default: () => []
+    },
+    // 是否默认展开
+    defaultExpanded: {
+        type: Boolean,
+        default: true
+    },
+    // 是否显示折叠按钮
+    showCollapsable: {
+        type: Boolean,
+        default: true
+    },
+    // 是否水平
+    horizontal: {
+        type: Boolean,
+        default: false
+    },
+    // 节点文本key
+    labelKey: {
+        type: String,
+        default: 'label'
+    },
+    // 子节点key   
+    childrenKey: {
+        type: String,
+        default: 'children'
+    },
+    // 圆角的判定key
+    circleKey: {
+        type: String,
+        default: 'isCircle'
+    },
+    // 二级文本内容key
+    contentKey: {
+        type: String,
+        default: 'content'
+    }
+
+})
+
+const calcData = computed(() => props.data.map(item => ({
+    label: item[props.labelKey],
+    isCircle: item[props.circleKey],
+    content: item[props.contentKey],
+    children: item[props.childrenKey]
+})))
+
+const emit = defineEmits(['nodeClick']);
+
+const formatClass = (node) => node.data.isCircle ? 'okrTreeCircle' : '';
+
+const renderContent = (e) => h('div', { class: 'okrTreeDiv' }, [
+    h('div', e.node.data.label),
+    h('div', { class: 'okrTreeContent' }, e.node.data.content)
+])
+
+const nodeClick = (e) => {
+    emit('nodeClick', e);
+}
+
+</script>
+
+<style>
+.okrTreeCircle {
+    padding: 5px 20px !important;
+    border-radius: 34px;
+}
+
+.okrTreeDiv {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.okrTreeContent {
+    font-size: 14px;
+    color: #666;
+}
+</style>

package/src/components/EbizRemoteSelect.vue

@@ -0,0 +1,155 @@
+<template>
+    <tiny-select v-model="selectedValue" :options="options" :loading="loading" :remote="true"
+        :remote-method="handleRemoteSearch" :multiple="multiple" :placeholder="placeholder" :clearable="clearable"
+        :disabled="disabled" @change="handleChange" @focus="handleRemoteSearch">
+        <template #prefix>
+            <slot name="prefix"></slot>
+        </template>
+        <template #suffix>
+            <slot name="suffix"></slot>
+        </template>
+    </tiny-select>
+</template>
+
+<script>
+export default {
+    name: "EbizRemoteSelect"
+}
+</script>
+
+<script setup>
+import { ref, onMounted, toRefs, computed } from 'vue';
+import { Select as TinySelect } from '@opentiny/vue';
+import dataService from "../apiService/simpleDataService";
+
+const props = defineProps({
+    /**
+     * API配置
+     */
+    apiConfig: {
+        type: Object,
+        required: true,
+        default: () => ({
+            apiId: null,
+            apiType: ''
+        })
+    },
+    /**
+     * 查询参数
+     */
+    queryParams: {
+        type: Object,
+        default: {}
+    },
+    /**
+     * 是否多选
+     */
+    multiple: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 占位符文本
+     */
+    placeholder: {
+        type: String,
+        default: '请选择'
+    },
+    /**
+     * 是否可清空
+     */
+    clearable: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 是否禁用
+     */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 默认值
+     */
+    modelValue: {
+        type: [String, Number],
+        default: ''
+    },
+    optionsConfig: {
+        labelField: '',//作为label的字段
+        valueField: ''//作为value的字段
+    }
+});
+
+const { modelValue, apiConfig, queryParams } = toRefs(props)
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+// 选中的值
+const selectedValue = computed(() => modelValue.value)
+
+// 选项列表
+const options = ref([]);
+
+// 加载状态
+const loading = ref(false);
+
+// 远程搜索处理函数
+const handleRemoteSearch = async () => {
+    if (options.value?.length > 0) return
+
+    loading.value = true;
+    if (apiConfig.value.apiId && apiConfig.value.apiType >= 0) {
+        try {
+            const params = {
+                queryParams: queryParams.value
+            };
+            const res = await dataService.fetch(params, { apiId: props.apiConfig.apiId, apiType: 'MULTIPLE_DATA_SEARCH' });
+            options.value = res.data.map(item => ({
+                label: item.label || item.name,
+                value: item.value || item.id
+            }));
+        } catch (error) {
+            console.error('远程搜索失败:', error);
+            options.value = [];
+        } finally {
+            loading.value = false;
+        }
+    }
+};
+
+// 值变化处理函数
+const handleChange = (value) => {
+    emit('update:modelValue', value);
+    emit('change', value);
+};
+
+// 组件挂载时，如果有默认值则加载对应的选项
+onMounted(async () => {
+    if (apiConfig.value.apiId && apiConfig.value.apiType >= 0) {
+        loading.value = true;
+        try {
+            const params = {
+                queryParams: queryParams.value
+            };
+            const res = await dataService.fetch(params, { apiId: props.apiConfig.apiId, apiType: 'MULTIPLE_DATA_SEARCH' });
+            options.value = res.data.map(item => ({
+                label: item.label || item.name,
+                value: item.value || item.id
+            }));
+        } catch (error) {
+            console.error('加载默认选项失败:', error);
+        } finally {
+            loading.value = false;
+        }
+    }
+
+});
+</script>
+
+<style scoped>
+.tiny-select {
+    width: 100%;
+}
+</style>

package/src/components/EbizRouteBreadcrumb.vue

@@ -0,0 +1,47 @@
+<template>
+  <tiny-breadcrumb>
+    <tiny-breadcrumb-item :to="{ path: '/' }">首页</tiny-breadcrumb-item>
+    <tiny-breadcrumb-item
+      v-for="(item, index) in breadcrumbItems"
+      :key="index"
+      :to="item.path"
+    >
+      {{ item.title }}
+    </tiny-breadcrumb-item>
+  </tiny-breadcrumb>
+</template>
+
+<script>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { TinyBreadcrumb, TinyBreadcrumbItem } from '@opentiny/vue'
+
+export default {
+  name: 'EbizRouteBreadcrumb',
+  components: {
+    TinyBreadcrumb,
+    TinyBreadcrumbItem
+  },
+  setup() {
+    const route = useRoute()
+    
+    const breadcrumbItems = computed(() => {
+      const matched = route.matched.filter(item => item.meta && item.meta.title)
+      return matched.map(item => ({
+        title: item.meta.title,
+        path: item.path
+      }))
+    })
+
+    return {
+      breadcrumbItems
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-breadcrumb {
+  margin: 16px 0;
+}
+</style>