@scx-js/scx-admin 0.0.3

package/components/easy-ckeditor/default-editor-config.js

@@ -0,0 +1,199 @@
+import {
+    Alignment,
+    AutoImage,
+    AutoLink,
+    BlockQuote,
+    Bold,
+    Code,
+    CodeBlock,
+    Essentials,
+    FindAndReplace,
+    Font,
+    Heading,
+    Highlight,
+    HorizontalLine,
+    Image,
+    ImageCaption,
+    ImageInsert,
+    ImageResize,
+    ImageStyle,
+    ImageToolbar,
+    ImageUpload,
+    Indent,
+    IndentBlock,
+    Italic,
+    Link,
+    LinkImage,
+    List,
+    ListProperties,
+    MediaEmbed,
+    PasteFromOffice,
+    PictureEditing,
+    RemoveFormat,
+    SourceEditing,
+    Strikethrough,
+    Subscript,
+    Superscript,
+    Table,
+    TableCaption,
+    TableCellProperties,
+    TableColumnResize,
+    TableProperties,
+    TableToolbar,
+    Underline,
+    WordCount,
+} from "ckeditor5";
+import zhCNTranslations from "ckeditor5/translations/zh-cn.js";
+
+const defaultEditorConfig = {
+    plugins: [
+        Alignment,
+        AutoImage,
+        AutoLink,
+        BlockQuote,
+        Bold,
+        Code,
+        CodeBlock,
+        List,
+        Heading,
+        Image,
+        ImageCaption,
+        ImageStyle,
+        ImageToolbar,
+        Indent,
+        Italic,
+        Link,
+        MediaEmbed,
+        Table,
+        TableToolbar,
+        Essentials,
+        FindAndReplace,
+        Font,
+        Highlight,
+        HorizontalLine,
+        ImageInsert,
+        ImageResize,
+        ImageUpload,
+        IndentBlock,
+        LinkImage,
+        ListProperties,
+        PasteFromOffice,
+        PictureEditing,
+        RemoveFormat,
+        SourceEditing,
+        Strikethrough,
+        Subscript,
+        Superscript,
+        TableCaption,
+        TableCellProperties,
+        TableColumnResize,
+        TableProperties,
+        Underline,
+        WordCount,
+    ],
+    extraPlugins: [],
+    toolbar: {
+        items: [
+            "undo", "redo",
+            "|",
+            "findAndReplace", "selectAll",
+            "|",
+            "heading",
+            "|",
+            "fontSize", "fontFamily", "fontColor", "fontBackgroundColor",
+            "|",
+            "alignment",
+            "|",
+            "bulletedList", "numberedList", "outdent", "indent",
+            "-",
+            "bold", "italic", "underline",
+            {
+                label: "Formatting",
+                icon: "text",
+                items: ["strikethrough", "subscript", "superscript", "code", "|", "removeFormat"],
+            },
+            "|",
+            "horizontalLine",
+            "|",
+            "link", "insertImage", "insertTable",
+            "|",
+            "highlight", "blockQuote", "mediaEmbed", "codeBlock",
+            "|",
+            "sourceEditing",
+        ],
+        shouldNotGroupWhenFull: true,
+    },
+    fontFamily: {
+        supportAllValues: true,
+    },
+    fontSize: {
+        options: [10, 12, 14, "default", 18, 20, 22],
+        supportAllValues: true,
+    },
+    htmlEmbed: {
+        showPreviews: true,
+    },
+    image: {
+        styles: [
+            "alignCenter",
+            "alignLeft",
+            "alignRight",
+        ],
+        resizeOptions: [
+            {
+                name: "resizeImage:original",
+                label: "Original",
+                value: null,
+            },
+            {
+                name: "resizeImage:25",
+                label: "25%",
+                value: "25",
+            },
+            {
+                name: "resizeImage:50",
+                label: "50%",
+                value: "50",
+            },
+            {
+                name: "resizeImage:75",
+                label: "75%",
+                value: "75",
+            },
+        ],
+        toolbar: [
+            "imageTextAlternative", "toggleImageCaption", "|",
+            "imageStyle:inline", "imageStyle:wrapText", "imageStyle:breakText", "imageStyle:side", "|",
+            "resizeImage",
+        ],
+    },
+    list: {
+        properties: {
+            styles: true,
+            startIndex: true,
+            reversed: true,
+        },
+    },
+    link: {
+        decorators: {
+            addTargetToExternalLinks: true,
+            defaultProtocol: "https://",
+            toggleDownloadable: {
+                mode: "manual",
+                label: "Downloadable",
+                attributes: {
+                    download: "file",
+                },
+            },
+        },
+    },
+    placeholder: "请输入内容 !!!",
+    table: {
+        contentToolbar: [
+            "tableColumn", "tableRow", "mergeTableCells", "tableProperties", "tableCellProperties", "toggleTableCaption",
+        ],
+    },
+    translations: [zhCNTranslations],
+};
+
+export {defaultEditorConfig};

package/components/easy-ckeditor/easy-ckeditor-lazy.css

@@ -0,0 +1,17 @@
+:root {
+    --ck-z-modal: 9999999;
+}
+
+.easy-ckeditor-lazy {
+    border: 1px solid var(--scx-text-placeholder-color);
+    border-radius: 2px;
+    width: 100%;
+    min-width: 200px;
+    min-height: 100px;
+    padding: 0 0.6em;
+    background-color: white;
+}
+
+.easy-ckeditor-lazy.ck-content:not(.ck-focused) {
+    border-color: var(--scx-text-placeholder-color);
+}

package/components/easy-ckeditor/easy-ckeditor-lazy.vue

@@ -0,0 +1,106 @@
+<template>
+    <div ref="editorRef" class="easy-ckeditor-lazy" @click="initCkEditor()">
+
+    </div>
+</template>
+
+<script>
+import "./easy-ckeditor-lazy.css";
+import {onMounted, ref, watch} from "vue";
+import {createScxUploadAdapterPlugin} from "./plugins/scx-upload-adapter.js";
+import {useScxFSS} from "scx-ui/scx/scx-fss";
+import {InlineEditor} from "ckeditor5";
+import {debounce} from "lodash-es";
+import {defaultEditorConfig} from "./default-editor-config.js";
+
+export default {
+    name: "easy-ckeditor-lazy",
+    props: {
+        modelValue: {
+            type: String,
+            default: "",
+        },
+        config: {}
+    },
+    setup(props, ctx) {
+
+        const editorRef = ref();
+
+        const fss = useScxFSS();
+
+        const scxUploadAdapterPlugin = createScxUploadAdapterPlugin(fss);
+
+        defaultEditorConfig.extraPlugins = [scxUploadAdapterPlugin];
+
+        const editorConfig = Object.assign(defaultEditorConfig, props.config);
+
+        let instance = null;
+
+        let isInit = false;
+
+        let lastEditorData = null;
+
+        function initCkEditor() {
+            if (isInit) {
+                return;
+            } else {
+                isInit = true;
+            }
+            InlineEditor
+                    .create(editorRef.value, editorConfig)
+                    .then(editor => {
+
+                        instance = editor;
+
+                        setUpEditorEvents();
+
+                        editor.data.set(props.modelValue);
+
+                    })
+                    .catch(err => {
+                        console.error(err);
+                    });
+        }
+
+        function setUpEditorEvents() {
+
+            const emitDebouncedInputEvent = debounce(evt => {
+
+                const data = lastEditorData = instance.data.get();
+
+                ctx.emit("update:modelValue", data, evt, instance);
+                ctx.emit("input", data, evt, instance);
+            }, 300, {leading: true});
+
+            instance.model.document.on("change:data", emitDebouncedInputEvent);
+
+        }
+
+        onMounted(() => {
+            watch(() => props.modelValue, (value) => {
+
+                if (isInit) {
+                    if (instance && value !== lastEditorData) {
+                        instance.data.set(value);
+                    }
+
+                } else {
+                    editorRef.value.innerHTML = value;
+                }
+
+            }, {immediate: true});
+        });
+
+        return {
+            editorRef,
+            initCkEditor,
+            InlineEditor,
+            editorConfig
+        };
+    }
+};
+</script>
+
+<style>
+
+</style>

package/components/easy-ckeditor/index.css

@@ -0,0 +1,3 @@
+:root {
+    --ck-z-modal: 9999999;
+}

package/components/easy-ckeditor/index.vue

@@ -0,0 +1,58 @@
+<template>
+    <ckeditor v-model="editorData" :config="editorConfig" :editor="ClassicEditor"/>
+</template>
+
+<script>
+import "./index.css";
+import {Ckeditor} from "@ckeditor/ckeditor5-vue";
+import {computed} from "vue";
+import {createScxUploadAdapterPlugin} from "./plugins/scx-upload-adapter.js";
+import {ClassicEditor, InlineEditor} from "ckeditor5";
+import "ckeditor5/ckeditor5.css";
+import {defaultEditorConfig} from "./default-editor-config.js";
+import {useScxFSS} from "scx-ui/scx/scx-fss";
+
+export default {
+    name: "easy-ckeditor",
+    components: {
+        ckeditor: Ckeditor
+    },
+    props: {
+        modelValue: {
+            type: String,
+            default: "",
+        },
+        config: {}
+    },
+    setup(props, ctx) {
+
+        const fss = useScxFSS();
+
+        const scxUploadAdapterPlugin = createScxUploadAdapterPlugin(fss);
+
+        defaultEditorConfig.extraPlugins = [scxUploadAdapterPlugin];
+
+        const editorConfig = Object.assign(defaultEditorConfig, props.config);
+
+        const editorData = computed({
+            get() {
+                return props.modelValue;
+            },
+            set(value) {
+                ctx.emit("update:modelValue", value);
+            }
+        });
+
+        return {
+            ClassicEditor,
+            InlineEditor,
+            editorData,
+            editorConfig
+        };
+    }
+};
+</script>
+
+<style>
+
+</style>

package/components/easy-ckeditor/plugins/scx-upload-adapter.js

@@ -0,0 +1,39 @@
+class ScxUploadAdapter {
+
+    constructor(loader, fss) {
+        this.loader = loader;
+        this.fss = fss;
+    }
+
+    async upload() {
+
+        const needUploadFile = await this.loader.file;
+
+        const c = await this.fss.upload(needUploadFile, (type, v) => {
+            //这里为了使计算 md5 和 上传各占一半的进度所以这里做一点特殊的计算
+            if (type === "checking-md5") {
+                this.loader.uploadedPercent = v / 2;
+            } else if (type === "uploading") {
+                this.loader.uploadedPercent = 50 + v / 2;
+            }
+        });
+
+        this.loader.uploadedPercent = 100;
+
+        return {
+            default: this.fss.joinImageURL(c.item.fssObjectID),
+        };
+    }
+}
+
+function createScxUploadAdapterPlugin(fss) {
+    return function (editor) {
+        return editor.plugins.get("FileRepository").createUploadAdapter = function (loader) {
+            return new ScxUploadAdapter(loader, fss);
+        };
+    };
+}
+
+export {
+    createScxUploadAdapterPlugin,
+};

package/components/easy-form-item/index.vue

@@ -0,0 +1,168 @@
+<template>
+    <el-form-item :label="easyLabel" :prop="easyProp" :rules="easyRules">
+        <slot/>
+    </el-form-item>
+</template>
+
+<script>
+import {computed} from "vue";
+import {notBlank} from "@scx-js/scx-common";
+import {checkIDCard, checkPhoneNumber, useCrudContext,} from "../../index.js";
+
+export default {
+    name: "easy-form-item",
+    props: {
+        //是否使用标注在 easy-form-item 上的 model
+        //默认使用 el-form 上的
+        useModel: {
+            type: Boolean,
+            default: false
+        },
+        //若代校验数据不属于 el-form :model 中的数据
+        //则可以直接赋值给 model
+        model: {
+            type: [String, Number, Array, Object],
+            default: null
+        },
+        required: {
+            type: Boolean,
+            default: false
+        },
+        trigger: {
+            type: String,
+            default: "blur"
+        },
+        label: {
+            type: String,
+            default: null
+        },
+        prop: {
+            type: String,
+            required: false,
+            default: null
+        },
+        unique: {
+            type: Boolean,
+            default: false
+        },
+        checkIDCard: {
+            type: Boolean,
+            default: false
+        },
+        checkPhoneNumber: {
+            type: Boolean,
+            default: false
+        },
+        validator: {
+            default: null
+        }
+    },
+    setup(props, context) {
+
+        const crudContext = useCrudContext();
+
+        const easyProp = computed(() => props.prop ? props.prop : getUUID());
+
+        const easyLabel = computed(() => {
+            if (props.label) {
+                const l = props.label.trim();
+                return l.endsWith(":") ? l : l + " :";
+            } else {
+                return props.label;
+            }
+        });
+
+        const fieldLabel = computed(() => props.label ? props.label : props.prop);
+
+        /**
+         * 获取校验值
+         */
+        function getFinalValue(v) {
+            return props.useModel ? props.model : v;
+        }
+
+        function getRequiredRule() {
+            return {
+                validator: (a, b, callback) => {
+                    if (notBlank(getFinalValue(b))) {
+                        callback();
+                    } else {
+                        callback(new Error());
+                    }
+                },
+                required: true,
+                message: fieldLabel.value + "不能为空 !!!",
+                trigger: props.trigger
+            };
+        }
+
+        function getUniqueRule() {
+            return {
+                validator: (a, b, c) => crudContext.checkUnique(a, getFinalValue(b), c, fieldLabel.value),
+                required: false,
+                trigger: props.trigger
+            };
+        }
+
+        function getCheckPhoneNumberRule() {
+            return {
+                validator: (a, b, c) => checkPhoneNumber(a, getFinalValue(b), c, fieldLabel.value),
+                required: false,
+                trigger: props.trigger
+            };
+        }
+
+        function getCheckIDCardRule() {
+            return {
+                validator: (a, b, c) => checkIDCard(a, getFinalValue(b), c, fieldLabel.value),
+                required: false,
+                trigger: props.trigger
+            };
+        }
+
+        function getValidatorRule() {
+            const vList = Array.isArray(props.validator) ? props.validator : [props.validator];
+            return vList.filter(v => v instanceof Function).map(v => {
+                return {
+                    validator: (a, b, c) => v(a, getFinalValue(b), c, fieldLabel.value),
+                    trigger: props.trigger
+                };
+            });
+        }
+
+        const easyRules = computed(() => {
+            const tempRules = [];
+            if (props.required) {
+                tempRules.push(getRequiredRule());
+            }
+            if (props.unique) {
+                if (crudContext == null) {
+                    console.error("未找到能够注入的 crudContext 对象, 无法实现 unique");
+                } else {
+                    tempRules.push(getUniqueRule());
+                }
+            }
+            if (props.checkPhoneNumber) {
+                tempRules.push(getCheckPhoneNumberRule());
+            }
+            if (props.checkIDCard) {
+                tempRules.push(getCheckIDCardRule());
+            }
+            if (props.validator) {
+                tempRules.push(...getValidatorRule());
+            }
+            return tempRules;
+        });
+
+        return {
+            easyProp,
+            easyLabel,
+            easyRules
+        };
+    }
+};
+</script>
+
+<style scoped>
+
+</style>

package/components/easy-image/index.css

@@ -0,0 +1,24 @@
+.easy-image-preview {
+    width: 100px;
+    height: 100px;
+    border-radius: 6px;
+    border: 3px dashed rgba(114, 114, 114, 0.5);
+    /* 修复element 默认 el-image 中 display: inline-block 导致元素高度被撑开的问题 */
+    display: flex;
+    box-sizing: border-box;
+}
+
+.easy-image-no-preview {
+    width: 100px;
+    height: 100px;
+    display: flex;
+    background: var(--scx-overlay-bg);
+    color: var(--scx-text-placeholder-color);
+    border-radius: 6px;
+    justify-content: center;
+    align-items: center;
+    font-size: 20px;
+    font-weight: 600;
+    border: 3px dashed rgba(114, 114, 114, 0.5);
+    box-sizing: border-box;
+}

package/components/easy-image/index.vue

@@ -0,0 +1,75 @@
+<template>
+    <el-image v-if="listModelValue.length>0" :preview-src-list="previewSrcList"
+              :preview-teleported="true"
+              :src="src"
+              class="easy-image-preview"
+              style=""/>
+    <div v-else class="easy-image-no-preview">
+        无图片
+    </div>
+</template>
+
+<script>
+import "./index.css";
+import {computed} from "vue";
+import {useAliOSS} from "../../index.js";
+import {useScxFSS} from "@scx-js/scx-app-x";
+
+
+export default {
+    name: "easy-image",
+    props: {
+        modelValue: {
+            type: [String, Array],
+            default: null
+        },
+        uploadHandlerType: {
+            type: String,
+            default: "scx-fss" // 取值 scx-fss ali-oss
+        },
+    },
+    setup(props) {
+        const scxFSS = useScxFSS();
+
+        const aliOSS = useAliOSS();
+
+        const listModelValue = computed(() => {
+            if (props.modelValue) {
+                return Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue];
+            } else {
+                return [];
+            }
+        });
+
+        const previewSrcList = computed(() => {
+            switch (props.uploadHandlerType) {
+                case "scx-fss":
+                    return listModelValue.value.map(d => scxFSS.joinImageURL(d));
+                case "ali-oss":
+                    return listModelValue.value.map(d => aliOSS.joinURL(d));
+                default:
+                    throw new Error("未知的 uploadHandlerType : " + props.uploadHandlerType);
+            }
+        });
+
+        const src = computed(() => {
+            const first = previewSrcList.value[0];
+            switch (props.uploadHandlerType) {
+                case "scx-fss":
+                    return first + "?w=100&h=100";
+                case "ali-oss":
+                    return first + "?x-oss-process=image/resize,w_100";
+                default:
+                    throw new Error("未知的 uploadHandlerType : " + props.uploadHandlerType);
+            }
+        });
+
+        return {
+            previewSrcList,
+            src,
+            listModelValue
+        };
+
+    }
+};
+</script>

package/components/easy-monaco-editor/index.css

@@ -0,0 +1,8 @@
+.easy-monaco-editor {
+    min-height: 200px;
+    max-height: 600px;
+    max-width: 100%;
+    min-width: 400px;
+    resize: both;
+    overflow: hidden;
+}