@ebiz/designer-components 0.0.18-beta.1

package/src/assets/base.css

@@ -0,0 +1,86 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

package/src/assets/main.css

@@ -0,0 +1 @@
+@import './base.css';

package/src/assets/styles/charts/main.less

@@ -0,0 +1,30 @@
+/**
+ * Import all chart less files
+ */
+
+// Import main charts less file
+@import '../../../components/charts/index.less';
+
+// Import chart features
+@import '../../../components/charts/feature/drag/index.less';
+@import '../../../components/charts/feature/card/index.less';
+@import '../../../components/charts/feature/expandLegend/index.less';
+
+// Import chart components
+@import '../../../components/charts/components/FlowChart/index.less';
+@import '../../../components/charts/components/GanttChart/index.less';
+@import '../../../components/charts/components/HoneycombChart/index.less';
+@import '../../../components/charts/components/OrganizationChart/index.less';
+@import '../../../components/charts/components/RiverChart/index.less';
+@import '../../../components/charts/components/SnowFlakeChart/index.less';
+@import '../../../components/charts/components/TerraceChart/index.less';
+@import '../../../components/charts/components/TimelineChart/index.less';
+@import '../../../components/charts/components/WaveChart/index.less';
+@import '../../../components/charts/components/MilestoneChart/index.less';
+
+// Import chart framework modules
+@import '../../../components/charts/framework/charts/MindmapChart/index.less';
+@import '../../../components/charts/framework/module/line/index.less';
+@import '../../../components/charts/framework/module/connector/index.less';
+@import '../../../components/charts/framework/module/canvas/index.less';
+@import '../../../components/charts/framework/module/contextmenu/index.less'; 

package/src/components/Button.vue

@@ -0,0 +1,103 @@
+<template>
+    <tiny-tooltip :content="!isNormal && !apiConfig.apiId ? tooltipText : ''" placement="top">
+
+        <tiny-button :disabled="disabled" :type="type" :size="size" @click="click">
+            <slot>{{ text }}</slot>
+        </tiny-button>
+
+    </tiny-tooltip>
+</template>
+
+
+<script lang='js'>
+export default {
+    name: "EbizButton"
+}
+</script>
+
+<script lang='js' setup>
+
+import { ref, reactive, computed, toRef, toRefs } from 'vue';
+import { TinyButton, TinyTooltip, TinyNotify } from '@opentiny/vue';
+import dataService from '../apiService/simpleDataService';
+
+
+const props = defineProps({
+    text: {
+        type: String,
+        default: ''
+    },
+    isNormal: {//是否为普通按钮
+        type: Boolean,
+        default: false
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    type: {//'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
+        type: String,
+        default: 'default'
+    },
+    size: {//'large' | 'medium' | 'small' | 'mini'
+        type: String,
+        default: 'medium'
+    },
+    apiConfig: {//接口配置
+        type: Object,
+        default: {
+            apiId: null,
+            apiType: ''
+        }
+    },
+    data: {
+        type: Object,
+        default: {}
+    },
+    onClick: {
+        type: Function,
+        default: () => { }
+    },
+    onPrepare: {//调用接口前置事件
+        type: Function,
+        default: () => { }
+    },
+    onFinish: {//调用接口后置事件
+        type: Function,
+        default: () => { }
+    }
+})
+
+const apiMap = [
+    'MULTIPLE_DATA_SEARCH',
+    'DETAILS_DATA',
+    'INTERFACE_PLUGIN',
+    'DATA_INSERT',
+    'BATCH_DATA_INSERT',
+    'DATA_MODIFY',
+    'BATCH_DATA_MODIFY',
+    'DEL_DATA',
+    'BATCH_DEL_DATA',
+    'MULTIPLE_DATA_LINK_SEARCH'
+];
+
+const emit = defineEmits(['click'])
+
+const { text, isNormal, disabled, type, size, apiConfig, data, isUseMethod } = toRefs(props)
+
+const tooltipText = ref('请先设置接口配置')
+
+const click = () => {
+    props.onClick()
+    if (!isNormal.value && apiConfig.value.apiId) {
+        props.onPrepare()
+        dataService.fetch(data.value, { apiId: apiConfig.value.apiId, apiType: apiMap[apiConfig.value.apiType] }).then((res) => {
+            emit('click', res)
+            props.onFinish()
+        })
+    }
+}
+
+</script>
+
+<style lang='less' scoped></style>

package/src/components/DataContainer.vue

@@ -0,0 +1,39 @@
+<template>
+    <div>
+        <slot name="content" :row="data"></slot>
+    </div>
+</template>
+
+<script setup>
+
+import { ref, defineProps, onMounted } from "vue";
+
+const props = defineProps(['apiConfig']);
+
+const data = ref({
+    listData: [
+        { id: 1, name: "用户1", age: 25, email: "user1@example.com" },
+        { id: 2, name: "用户2", age: 30, email: "user2@example.com" },
+        { id: 3, name: "用户3", age: 22, email: "user3@example.com" },
+        { id: 4, name: "用户4", age: 28, email: "user4@example.com" },
+        { id: 5, name: "用户5", age: 35, email: "user5@example.com" },
+        { id: 6, name: "用户6", age: 27, email: "user6@example.com" },
+        { id: 7, name: "用户7", age: 24, email: "user7@example.com" },
+        { id: 8, name: "用户8", age: 29, email: "user8@example.com" },
+        { id: 9, name: "用户9", age: 31, email: "user9@example.com" },
+        { id: 10, name: "用户10", age: 26, email: "user10@example.com" },
+    ],
+    pageConfig: {
+        total: 10,
+        current: 1,
+        size: 10,
+    },
+});
+
+onMounted(() => {
+    console.log("DataContainer component has been mounted.");
+    // You can add any initialization logic here
+    // 加载数据
+
+});
+</script>

package/src/components/EbizCheckbox.vue

@@ -0,0 +1,94 @@
+<template>
+    <t-checkbox
+        :checked="modelValue"
+        :default-checked="defaultChecked"
+        :disabled="disabled"
+        :indeterminate="indeterminate"
+        :label="label"
+        :name="name"
+        :readonly="readonly"
+        :value="value"
+        :check-all="checkAll"
+        :lazy-load="lazyLoad"
+        @change="handleChange"
+    >
+        <!-- 默认插槽 -->
+        <slot>{{ label }}</slot>
+    </t-checkbox>
+</template>
+
+<script>
+export default {
+    name: "EbizCheckbox"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Checkbox as TCheckbox } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 是否选中 (v-model)
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    // 默认是否选中
+    defaultChecked: {
+        type: Boolean,
+        default: false
+    },
+    // 是否禁用组件
+    disabled: {
+        type: Boolean,
+        default: undefined
+    },
+    // 是否为半选
+    indeterminate: {
+        type: Boolean,
+        default: false
+    },
+    // 主文案
+    label: {
+        type: String,
+        default: ''
+    },
+    // HTML 元素原生属性
+    name: {
+        type: String,
+        default: ''
+    },
+    // 只读状态
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    // 单个选项的值
+    value: {
+        type: [String, Number, Boolean],
+        default: undefined
+    },
+    // 用于标识是否为「全选选项」
+    checkAll: {
+        type: Boolean,
+        default: false
+    },
+    // 是否启用懒加载
+    lazyLoad: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits(['change', 'update:modelValue']);
+
+// 选中状态变化事件
+const handleChange = (checked, context) => {
+    emit('update:modelValue', checked);
+    emit('change', checked, context);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/EbizCheckboxGroup.vue

@@ -0,0 +1,70 @@
+<template>
+    <t-checkbox-group
+        :disabled="disabled"
+        :value="modelValue"
+        :default-value="defaultValue"
+        :options="options"
+        :max="max"
+        :name="name"
+        @change="handleChange"
+    >
+        <!-- 默认插槽 -->
+        <slot></slot>
+    </t-checkbox-group>
+</template>
+
+<script>
+export default {
+    name: "EbizCheckboxGroup"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { CheckboxGroup as TCheckboxGroup } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 是否禁用组件
+    disabled: {
+        type: Boolean,
+        default: undefined
+    },
+    // 选中值 (v-model)
+    modelValue: {
+        type: Array,
+        default: () => []
+    },
+    // 默认选中值
+    defaultValue: {
+        type: Array,
+        default: () => []
+    },
+    // 最大可选数量
+    max: {
+        type: Number,
+        default: undefined
+    },
+    // HTML 元素原生属性
+    name: {
+        type: String,
+        default: ''
+    },
+    // 以配置形式设置子元素
+    options: {
+        type: Array,
+        default: () => []
+    }
+});
+
+const emit = defineEmits(['change', 'update:modelValue']);
+
+// 选中值变化事件
+const handleChange = (value, context) => {
+    emit('update:modelValue', value);
+    emit('change', value, context);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/EbizDivider.vue

@@ -0,0 +1,97 @@
+<template>
+    <div class="ebiz-divider" :style="dividerStyle">
+        <div v-if="showText && text" class="divider-text" :style="textStyle">
+            <slot>{{ text }}</slot>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { defineProps, computed } from 'vue';
+
+/**
+ * EbizDivider 组件 - 可自定义颜色的分隔线组件
+ * 支持自定义分隔线颜色、粗细、间距和文本
+ */
+const props = defineProps({
+    /**
+     * 分隔线颜色
+     */
+    color: {
+        type: String,
+        default: '#e8e8e8'
+    },
+    /**
+     * 分隔线粗细
+     */
+    thickness: {
+        type: Number,
+        default: 1
+    },
+    /**
+     * 分隔线上下边距
+     */
+    margin: {
+        type: Number,
+        default: 24
+    },
+    /**
+     * 分隔线文本
+     */
+    text: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 是否显示文本
+     */
+    showText: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 文本颜色
+     */
+    textColor: {
+        type: String,
+        default: '#333'
+    }
+});
+
+// 计算分隔线样式
+const dividerStyle = computed(() => {
+    return {
+        borderTop: `${props.thickness}px solid ${props.color}`,
+        margin: `${props.margin}px 0`,
+        position: props.showText ? 'relative' : 'inherit',
+        textAlign: 'center'
+    };
+});
+
+// 计算文本样式
+const textStyle = computed(() => {
+    return {
+        position: 'absolute',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        backgroundColor: '#fff',
+        padding: '0 10px',
+        color: props.textColor
+    };
+});
+</script>
+
+<style scoped>
+.ebiz-divider {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+}
+
+.divider-text {
+    font-size: 14px;
+    font-weight: 500;
+}
+</style>