@ebiz/designer-components 0.1.0 → 0.1.1

package/src/assets/base.css

@@ -1,86 +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;
-}
+/* 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

@@ -1 +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>
+<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/components/Button.vue

@@ -1,150 +1,150 @@
-<template>
-    <t-button :disabled="disabled || loading" :theme="type" :size="size" @click="click">
-        <slot>{{ text }}</slot>
-    </t-button>
-</template>
-
-
-<script lang='js'>
-export default {
-    name: "EbizButton"
-}
-</script>
-
-<script lang='js' setup>
-
-import { ref, reactive, computed, toRef, toRefs } from 'vue';
-import { Button as TButton } from 'tdesign-vue-next';
-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'
-        type: String,
-        default: 'primary'
-    },
-    size: {//'large' | 'medium' | 'small'
-        type: String,
-        default: 'medium'
-    },
-    apiConfig: {//接口配置
-        type: Object,
-        default: () => ({
-            key: null,
-            apiId: null,
-            apiType: ''
-        })
-    },
-    data: {
-        type: Object,
-        default: () => ({})
-    },
-    onClick: {
-        type: Function,
-        default: () => { }
-    },
-    onPrepare: {//调用接口前置事件
-        type: Function,
-        default: () => true // 默认返回true，允许继续执行
-    },
-    onFinish: {//调用接口后置事件
-        type: Function,
-        default: () => { }
-    },
-    onError: {
-        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', 'success', 'error', 'loading', 'prepare'])
-
-const { text, isNormal, disabled, type, size, variant, apiConfig, data } = toRefs(props)
-
-const tooltipText = ref('请先设置接口配置')
-const loading = ref(false)
-
-// 检查API配置是否有效
-const isValidApiConfig = () => {
-    return apiConfig.value && apiConfig.value.apiId &&
-        typeof apiConfig.value.apiType === 'number' &&
-        apiConfig.value.apiType >= 0 &&
-        apiConfig.value.apiType < apiMap.length;
-}
-
-const click = async (e) => {
-    // 总是调用onClick回调
-    props.onClick()
-    emit('click', e)
-
-    // 如果是普通按钮或API配置无效，不调用接口
-    if (isNormal.value) {
-        return
-    }
-
-    try {
-        // 设置加载状态
-        loading.value = true
-        emit('loading', true)
-
-        // 调用前置处理并获取返回值
-        const shouldContinue = await Promise.resolve(props.onPrepare())
-        emit('prepare', shouldContinue)
-
-        // 只有当返回值明确为false时才中断，undefined或其他值都继续执行
-        if (shouldContinue === false) {
-            return null
-        }
-
-        // 调用接口
-        const apiType = apiMap[apiConfig.value.apiType]
-        const res = await dataService.fetch(data.value, {
-            key: apiConfig.value.key,
-            apiId: apiConfig.value.apiId,
-            apiType
-        })
-
-        // 成功处理
-        emit('success', res)
-        props.onFinish(res)
-
-        return res
-    } catch (error) {
-        // 错误处理
-        emit('error', error)
-        props.onError(error)
-
-        return null
-    } finally {
-        // 清除加载状态
-        loading.value = false
-        emit('loading', false)
-    }
-}
-</script>
-
+<template>
+    <t-button :disabled="disabled || loading" :theme="type" :size="size" @click="click">
+        <slot>{{ text }}</slot>
+    </t-button>
+</template>
+
+
+<script lang='js'>
+export default {
+    name: "EbizButton"
+}
+</script>
+
+<script lang='js' setup>
+
+import { ref, reactive, computed, toRef, toRefs } from 'vue';
+import { Button as TButton } from 'tdesign-vue-next';
+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'
+        type: String,
+        default: 'primary'
+    },
+    size: {//'large' | 'medium' | 'small'
+        type: String,
+        default: 'medium'
+    },
+    apiConfig: {//接口配置
+        type: Object,
+        default: () => ({
+            key: null,
+            apiId: null,
+            apiType: ''
+        })
+    },
+    data: {
+        type: Object,
+        default: () => ({})
+    },
+    onClick: {
+        type: Function,
+        default: () => { }
+    },
+    onPrepare: {//调用接口前置事件
+        type: Function,
+        default: () => true // 默认返回true，允许继续执行
+    },
+    onFinish: {//调用接口后置事件
+        type: Function,
+        default: () => { }
+    },
+    onError: {
+        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', 'success', 'error', 'loading', 'prepare'])
+
+const { text, isNormal, disabled, type, size, variant, apiConfig, data } = toRefs(props)
+
+const tooltipText = ref('请先设置接口配置')
+const loading = ref(false)
+
+// 检查API配置是否有效
+const isValidApiConfig = () => {
+    return apiConfig.value && apiConfig.value.apiId &&
+        typeof apiConfig.value.apiType === 'number' &&
+        apiConfig.value.apiType >= 0 &&
+        apiConfig.value.apiType < apiMap.length;
+}
+
+const click = async (e) => {
+    // 总是调用onClick回调
+    props.onClick()
+    emit('click', e)
+
+    // 如果是普通按钮或API配置无效，不调用接口
+    if (isNormal.value) {
+        return
+    }
+
+    try {
+        // 设置加载状态
+        loading.value = true
+        emit('loading', true)
+
+        // 调用前置处理并获取返回值
+        const shouldContinue = await Promise.resolve(props.onPrepare())
+        emit('prepare', shouldContinue)
+
+        // 只有当返回值明确为false时才中断，undefined或其他值都继续执行
+        if (shouldContinue === false) {
+            return null
+        }
+
+        // 调用接口
+        const apiType = apiMap[apiConfig.value.apiType]
+        const res = await dataService.fetch(data.value, {
+            key: apiConfig.value.key,
+            apiId: apiConfig.value.apiId,
+            apiType
+        })
+
+        // 成功处理
+        emit('success', res)
+        props.onFinish(res)
+
+        return res
+    } catch (error) {
+        // 错误处理
+        emit('error', error)
+        props.onError(error)
+
+        return null
+    } finally {
+        // 清除加载状态
+        loading.value = false
+        emit('loading', false)
+    }
+}
+</script>
+
 <style lang='less' scoped></style>

package/src/components/DataContainer.vue

@@ -1,40 +1,40 @@
-<template>
-    <div>
-        <slot></slot>
-        <slot v-if="$slots.content" 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>
+<template>
+    <div>
+        <slot></slot>
+        <slot v-if="$slots.content" 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>