@xilonglab/vue-main 0.7.8

package/packages/XlSideBar.vue

@@ -0,0 +1,135 @@
+<script setup>
+defineOptions({
+  name: 'XlSideBar',
+});
+
+const props = defineProps({
+  logo: {
+    type: String,
+  },
+  menuItems: {
+    type: Array,
+    default: () => [],
+  },
+  defaultOpeneds: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emits = defineEmits(["select"]);
+
+const triggers = {
+  select(val) {
+    let path;
+    let [submenuIndex, itemIndex] = val.split("-");
+    if (itemIndex) {
+      path = props.menuItems[submenuIndex].children[itemIndex].path;
+    } else {
+      path = props.menuItems[submenuIndex].path;
+    }
+    emits("select", path);
+  }
+}
+</script>
+
+
+<template>
+  <div class="xl-side-bar">
+    <el-menu class="side-bar-menu" :default-openeds="defaultOpeneds" @select="triggers.select" text-color="#BCD1C7"
+      active-text-color="#F0F0F0">
+      <slot />
+      <template v-for="(item, index) in menuItems">
+
+        <el-sub-menu class="sub-menu" v-if="item.children" :key="index" :index="String(index)">
+          <template #title>
+            <i class="iconfont" v-html="item.iconCode"></i>
+            <span>{{ item.name }}</span>
+          </template>
+          <el-menu-item-group>
+            <el-menu-item v-for="(child, childIndex) in item.children" :index="index + '-' + childIndex"
+              :key="childIndex">
+              <span>{{ child.name }}</span>
+            </el-menu-item>
+          </el-menu-item-group>
+        </el-sub-menu>
+        <el-menu-item v-else :index="String(index)" :key="`${index}1`">
+          <template #title>
+            <i class="iconfont" v-html="item.iconCode"></i>
+            <span>{{ item.name }}</span>
+          </template>
+        </el-menu-item>
+      </template>
+    </el-menu>
+  </div>
+
+</template>
+
+
+<style lang="less">
+@sidebar-background: rgb(0 0 0 / 40%);
+@sidebar-color: #f0f0f0;
+@sidebar-active-background: rgb(0 0 0 / 30%);
+@transition-function: width 0.7s cubic-bezier(0.17, 0.67, 0.84, 0.66);
+
+.xl-side-bar {
+  overflow-y: scroll;
+  scrollbar-width: none;
+  border-right: 0 !important;
+  height: 100%;
+
+  .side-bar-menu {
+    margin: 5px;
+    background: @sidebar-background;
+    height: calc(~"100% - 10px");
+    border-radius: 7px;
+    border: 0;
+    overflow: hidden;
+  
+    overflow: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .el-menu {
+      background: transparent;
+    }
+  }
+
+  .el-sub-menu__title,
+  .el-menu-item {
+    background: @sidebar-background;
+  }
+
+  .el-menu-item {
+    transition: @transition-function;
+    -moz-transition: @transition-function;
+    -webkit-transition: @transition-function;
+    -o-transition: @transition-function;
+    background: transparent;
+
+    &:hover {
+      color: @sidebar-color !important;
+
+      i {
+        color: @sidebar-color !important;
+      }
+    }
+
+    &.is-active {
+      background: @sidebar-active-background !important;
+    }
+  }
+
+  .el-menu-item-group__title {
+    display: none;
+  }
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>

package/packages/button/XlAsyncButton.vue

@@ -0,0 +1,67 @@
+<script setup>
+defineOptions({ name: "XlAsyncButton" })
+
+import { ref } from 'vue'
+
+const props = defineProps({
+    api: {
+        type: Function,
+        default: () => ({}),
+    },
+    l: {
+        type: String,
+        default: ''
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    type: {
+        type: String,
+    },
+    width: {
+        type: Number,
+    },
+    icon: {
+        type: String,
+        default: "",
+    },
+});
+
+
+const btnRef = ref(null)
+const loading = ref(false)
+
+async function handleClick() {
+    loading.value = true;
+    try {
+        await props.api();
+        loading.value = false;
+        setTimeout(() => {
+            loading.value = false;
+        }, 450);
+    } catch (e) {
+        loading.value = false;
+    }
+}
+
+function click() {
+    btnRef.value.$el.click()
+}
+
+defineExpose({ click })
+</script>
+
+
+<template>
+    <el-button class="xl-button xl-async-button" ref="btnRef" :type="type" :disabled="disabled" :loading="loading"
+        :icon="icon" @click="handleClick">
+        <span v-if="!loading">
+            {{ l }}
+            <slot />
+        </span>
+    </el-button>
+</template>
+
+
+<style></style>

package/packages/button/XlButton.vue

@@ -0,0 +1,25 @@
+<script setup>
+defineOptions({ name: "XlButton" })
+
+const props = defineProps({
+    type: {},
+    l: {
+        type: String,
+        default: ''
+    },
+    disabled: {},
+    loading: {},
+    icon: {},
+});
+</script>
+
+
+<template>
+    <el-button class="xl-button" :type="type" :disabled="disabled" :loading="loading" :icon="icon">
+        <span>{{ l }}</span>
+        <slot />
+    </el-button>
+</template>
+
+
+<style lang="less"></style>

package/packages/button/XlDeleteButton.vue

@@ -0,0 +1,22 @@
+<script setup>
+defineOptions({ name: "XlDeleteButton" })
+
+const emits = defineEmits('click')
+
+const props = defineProps({
+    disabled: {},
+    loading: {},
+    icon: {},
+    l: {}
+});
+</script>
+
+<template>
+    <xl-button type="danger" v-bind="$props" @click="() => emits('click')">
+        <el-icon>
+            <Delete />
+        </el-icon>
+    </xl-button>
+</template>
+
+<style lang="less"></style>

package/packages/button/XlEditButton.vue

@@ -0,0 +1,22 @@
+<script setup>
+defineOptions({ name: "XlEditButton" })
+
+const emits = defineEmits('click')
+
+const props = defineProps({
+    disabled: {},
+    loading: {},
+    icon: {},
+    l: {}
+});
+</script>
+
+<template>
+    <xl-button type="primary" v-bind="$props" @click="() => emits('click')">
+        <el-icon>
+            <Edit />
+        </el-icon>
+    </xl-button>
+</template>
+
+<style lang="less"></style>

package/packages/button/XlIconButton.vue

@@ -0,0 +1,22 @@
+<script setup>
+defineOptions({ name: "XlIconButton" })
+
+const emits = defineEmits('click')
+
+const props = defineProps({
+    type: {},
+    code: {},
+    disabled: {},
+    loading: {},
+    icon: {},
+    l: {}
+});
+</script>
+
+<template>
+    <xl-button v-bind="$props" @click="() => emits('click')">
+        <i class="iconfont" v-html="code"/>
+    </xl-button>
+</template>
+
+<style lang="less"></style>

package/packages/button/XlUploadButton.vue

@@ -0,0 +1,109 @@
+<script setup>
+defineOptions({ name: "XlUploadButton" })
+
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus'
+
+
+const emits = defineEmits(['uploaded'])
+
+const props = defineProps({
+    api: {
+        type: Function,
+        default: () => { },
+    },
+    l: {
+        type: String,
+        default: ''
+    },
+    params: {
+        type: Object,
+        default() {
+            return {};
+        },
+    },
+    text: {
+        type: String,
+        default: "上传",
+    },
+    allowedTypes: {
+        type: Array,
+        default() {
+            return [];
+        },
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    type: {
+        type: String,
+        default: "",
+    },
+})
+
+const headers = { token: localStorage.getItem("accessToken") }
+const loading = ref(false)
+
+const handlers = {
+    validateFileType(fileType) {
+        const { allowedTypes } = props;
+        if (allowedTypes.length == 0) {
+            return true;
+        } else {
+            if (allowedTypes.indexOf(fileType) < 0) {
+                return false;
+            } else {
+                return true;
+            }
+        }
+    },
+    beforeUpload(file) {
+        loading.value = true;
+    },
+    upload(option) {
+        const { params } = props
+        let formData = new FormData();
+        const file = option.file;
+        const filename = file.name;
+        const fileType = file.type;
+        if (!handlers.validateFileType(fileType)) {
+            ElMessage.error(`文件类型错误`)
+            loading.value = false;
+            return;
+        }
+        formData.append("file", file);
+        formData.append("file_name", filename);
+        for (let key in params) {
+            formData.append(key, params[key]);
+        }
+        return props.api(formData);
+    },
+    onSuccess(data, file, filelist) {
+        loading.value = false;
+        emits("uploaded", data);
+    },
+}
+</script>
+
+
+<template>
+    <el-upload class="xl-upload-button" ref="uploader" action="" :headers="headers" :http-request="handlers.upload"
+        :before-upload="handlers.beforeUpload" :on-success="handlers.onSuccess" :show-file-list="false"
+        :disabled="disabled">
+        <xl-button :loading="loading" :l="l" :type="type">
+            <slot />
+        </xl-button>
+    </el-upload>
+</template>
+
+
+<style lang="less">
+.xl-upload-button {
+    display: inline-block;
+
+    .el-upload {
+        display: inline-block;
+    }
+}
+</style>

package/packages/dialog/XlDialog.vue

@@ -0,0 +1,116 @@
+<script setup>
+defineOptions({ name: "XlDialog" })
+
+import { ref } from 'vue';
+
+
+const emits = defineEmits(['confirm', 'finish', 'cancel', 'close'])
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: "提示",
+    },
+    width: {
+        default: 30,
+    },
+    draggable: {
+        type: Boolean,
+        default: false
+    },
+    validate: {
+        type: Function,
+        default() {
+            return true
+        }
+    },
+    callback: {
+        type: Function,
+        default: async () => 0
+    }
+});
+
+const visible = ref(false);
+
+const onConfirm = async () => {
+    const validation = await props.validate()
+    if (validation) {
+        emits('confirm');
+        const code = await props.callback()
+        if (code) {
+            hide();
+            emits('finish');
+        }
+    }
+};
+
+const onCancel = () => {
+    hide();
+    emits('cancel');
+};
+
+const onClose = () => {
+    emits('close');
+};
+
+const show = () => {
+    visible.value = true;
+};
+
+const hide = () => {
+    console.log('before hide')
+    visible.value = false;
+    console.log('after hide')
+    console.log(visible.value)
+};
+
+defineExpose({ show })
+</script>
+
+
+<template>
+    <el-dialog class="xl-dialog" :title="title" :draggable="draggable" v-model="visible" @close="onClose" :width="width + '%'">
+        <slot />
+        <div style="text-align: center; padding: 10px; margin-top: 20px">
+            <span slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="onConfirm">确定</el-button>
+                <el-button @click="onCancel">取消</el-button>
+            </span>
+        </div>
+    </el-dialog>
+</template>
+
+
+<style lang="less">
+.xl-dialog {
+    text-align: left;
+
+    border-radius: 10px 10px 7px 7px !important;
+    padding: 0;
+
+    .el-dialog__header {
+        border-radius: 7px 7px 0 0;
+        padding: 14px 20px 10px;
+        margin: 0!important;
+        background: transparent linear-gradient(90deg, #073052 0%, rgb(100, 100, 100) 100%) 0% 0% no-repeat padding-box !important;
+
+        .el-dialog__headerbtn {
+            top: 14px;
+        }
+
+        .el-dialog__title,
+        .el-dialog__close {
+            color: rgb(245, 245, 245) !important;
+        }
+
+        .el-dialog__headerbtn {
+            top: 3px !important;
+        }
+
+    }
+
+    .el-dialog__body {
+        padding: 10px 10px 5px 10px;
+    }
+}
+</style>

package/packages/dialog/XlEditReviewDialog.vue

@@ -0,0 +1,81 @@
+<script setup>
+defineOptions({ name: "XlEditReviewDialog" })
+
+import { ref, computed } from 'vue'
+
+
+const emits = defineEmits(['confirm', 'pass', 'reject'])
+
+const props = defineProps({
+    title: {},
+    width: {},
+    data: {},
+    ruleMap: {
+        default() {
+            return {}
+        }
+    },
+    labelWidth: {
+        default: 70
+    },
+    passCallback: {
+        type: Function,
+        default: () => { },
+    },
+    rejectCallback: {
+        type: Function,
+        default: () => { },
+    }
+})
+
+const refs = {
+    dialog: ref(null),
+    form: ref(null),
+}
+
+function convertRuleMapToRules(ruleMap) {
+    const rules = {};
+
+    for (const key in ruleMap) {
+        rules[key] = [{ required: true, message: `请输�?{ruleMap[key]}`, trigger: "blur" }];
+    }
+
+    return rules;
+}
+
+const rules = computed(() => convertRuleMapToRules(props.ruleMap));
+
+async function validate() {
+    let flag = 0
+    await refs.form.value.validate(function (valid) {
+        flag = valid
+    })
+    return flag
+}
+
+defineExpose({
+    show() {
+        refs.dialog.value.show()
+    }
+})
+</script>
+
+
+<template>
+    <xl-review-dialog class="xl-edit-review-dialog xl-dialog" :ref="refs.dialog" :title="title" :width="width"
+        :validate="validate" :pass-callback="passCallback" :reject-callback="rejectCallback" @pass="emits('pass')"
+        @reject="emits('reject')">
+        <el-form :ref="refs.form" :model="data" :rules="rules" :label-width="`${labelWidth}px`">
+            <slot />
+        </el-form>
+    </xl-review-dialog>
+</template>
+
+
+<style lang="less">
+.xl-edit-review-dialog {
+    .xl-form-item {
+        width: 100% !important;
+    }
+}
+</style>

package/packages/dialog/XlFormDialog.vue

@@ -0,0 +1,79 @@
+<script setup>
+defineOptions({ name: "XlFormDialog" })
+
+import { ref, computed } from 'vue'
+
+const emits = defineEmits(['confirm', 'finish'])
+
+const props = defineProps({
+    title: {},
+    draggable: {
+        type: Boolean,
+        default: false
+    },
+    width: {},
+    data: {},
+    ruleMap: {
+        default() {
+            return {}
+        }
+    },
+    labelWidth: {
+        default: 70
+    },
+    callback: {
+        type: Function,
+        default: () => { },
+    }
+})
+
+const refs = {
+    dialog: ref(null),
+    form: ref(null),
+}
+
+function convertRuleMapToRules(ruleMap) {
+    const rules = {};
+
+    for (const key in ruleMap) {
+        rules[key] = [{ required: true, message: `请输入${ruleMap[key]}`, trigger: "blur" }];
+    }
+
+    return rules;
+}
+
+const rules = computed(() => convertRuleMapToRules(props.ruleMap));
+
+async function validate() {
+    let flag = 0
+    await refs.form.value.validate(function (valid) {
+        flag = valid
+    })
+    return flag
+}
+
+defineExpose({
+    show() {
+        refs.dialog.value.show()
+    }
+})
+</script>
+
+
+<template>
+    <xl-dialog class="xl-form-dialog xl-dialog" :ref="refs.dialog" :title="title" :draggable="draggable" :width="width" :validate="validate"
+        :callback="callback" @finish="emits('finish')">
+        <el-form :ref="refs.form" :model="data" :rules="rules" :label-width="`${labelWidth}px`">
+            <slot />
+        </el-form>
+    </xl-dialog>
+</template>
+
+
+<style lang="less">
+.xl-form-dialog {
+    .xl-form-item {
+        width: 100% !important;
+    }
+}
+</style>