@scx-js/scx-ui 0.0.1

package/scx-upload/index.vue

@@ -0,0 +1,235 @@
+<template>
+    <div class="scx-upload">
+
+        <!-- 隐藏的 input 用于触发点击上传事件 -->
+        <input ref="hiddenInputRef" placeholder="file" style="display: none" type="file" @change="onHiddenInputChange"/>
+
+        <!-- 有文件时预览文件 -->
+        <div v-if="proxyModelValue" class="preview">
+            <!-- 有预览图时显示预览图 -->
+            <img v-if="uploadInfo.previewURL" :src="uploadInfo.previewURL" alt="img" class="preview-image">
+            <!-- 没有预览图但是有文件名时显示文件名 -->
+            <div v-else-if="uploadInfo.fileName" class="preview-text">
+                <div>{{ uploadInfo.fileName }}</div>
+            </div>
+            <!-- 都没有时显示文件 id -->
+            <div v-else class="preview-text">
+                <div>{{ proxyModelValue }}</div>
+            </div>
+            <!-- 操作项 -->
+            <div class="operation">
+                <a :href="uploadInfo.downloadURL" class="item-download">
+                    下载
+                </a>
+                <div v-if="!disabled" class="item-replace" @click="selectFile">
+                    替换
+                </div>
+                <div v-if="!disabled" class="item-delete" @click="deleteFile">
+                    删除
+                </div>
+            </div>
+        </div>
+
+        <!-- 没有文件且允许上传时显示 -->
+        <div v-else-if="!disabled" :class="dragover ?'dragover ':''" class="no-preview" @click="selectFile"
+             @dragleave="callDragleave"
+             @dragover="callDragover" @drop="callDrop">
+            <scx-icon icon="outlined-plus-circle"/>
+            <span>点击或拖拽</span>
+        </div>
+
+        <!-- 没有文件且不允许上传时 -->
+        <div v-else class="no-preview">
+            <scx-icon icon="outlined-question"/>
+            <span>无图片</span>
+        </div>
+
+        <img v-if="uploadInfo.progressVisible" :src="uploadInfo.previewURL" alt="img" class="progress-preview">
+
+        <div v-if="uploadInfo.progressVisible" class="progress">
+            <div class="temp-file-name">
+                <div>
+                    {{ uploadInfo.fileName }}
+                </div>
+            </div>
+            <div class="progress-state">
+                <div class="progress-state-text">
+                    {{ uploadInfo.progressState }}
+                </div>
+                <!-- 以下为进度条 -->
+                <scx-progress v-model="uploadInfo.progressValue"/>
+            </div>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+import "./index.css";
+import {computed, reactive, ref, watch} from "vue";
+import {percentage} from "@scx-js/scx-common";
+import {ScxFSSHelper, UploadInfo} from "./helper.js";
+import {useScxFSS} from "@scx-js/scx-app-x";
+import ScxProgress from "../scx-progress/index.vue";
+import ScxIcon from "../scx-icon/index.vue";
+
+export default {
+    name: "scx-upload",
+    components: {
+        ScxProgress,
+        ScxIcon
+    },
+    props: {
+        modelValue: {
+            type: String,
+            default: null
+        },
+        uploadHandler: {
+            type: Function,
+            default: null
+        },
+        fileInfoHandler: {
+            type: Function,
+            default: null
+        },
+        beforeUpload: {
+            type: Function,
+            default: null
+        },
+        onError: {
+            type: Function,
+            default: null
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        beforeDelete: {
+            type: Function,
+            default: null
+        }
+    },
+    setup(props, ctx) {
+        const scxFSS = useScxFSS();
+        const scxFSSHelper = new ScxFSSHelper(scxFSS);
+
+        function getFileInfoHandler() {
+            return props.fileInfoHandler ? props.fileInfoHandler : (fileID) => scxFSSHelper.fileInfoHandler(fileID);
+        }
+
+        function getUploadHandler() {
+            return props.uploadHandler ? props.uploadHandler : (needUploadFile, progress) => scxFSSHelper.uploadHandler(needUploadFile, progress);
+        }
+
+        function getOnError() {
+            return props.onError ? props.onError : (error, file) => console.error(error, file);
+        }
+
+        const hiddenInputRef = ref(null);
+
+        function selectFile() {
+            hiddenInputRef.value.click();
+        }
+
+        function onHiddenInputChange(e) {
+            const needUploadFile = e.target.files[0];
+            //重置 上传 input 的值 保证即使点击重复文件也可以上传
+            hiddenInputRef.value.value = null;
+            callUploadHandler(needUploadFile);
+        }
+
+        const proxyModelValue = computed({
+            get() {
+                return props.modelValue;
+            },
+            set(value) {
+                ctx.emit("update:modelValue", value);
+            }
+        });
+
+        async function deleteFile() {
+            if (props.beforeDelete) {
+                const result = await props.beforeDelete(uploadInfo.copy());
+                if (!result) {
+                    return;
+                }
+            }
+            proxyModelValue.value = "";
+        }
+
+        const uploadInfo = reactive(new UploadInfo());
+
+        async function callUploadHandler(needUploadFile) {
+            if (props.beforeUpload) {
+                const result = await props.beforeUpload(needUploadFile);
+                if (!result) {
+                    return;
+                }
+            }
+            //设定初始值
+            uploadInfo.progressVisible = true;
+            uploadInfo.fileName = needUploadFile.name;
+            uploadInfo.previewURL = URL.createObjectURL(needUploadFile);
+            //上传回调函数
+            const progress = (v, s = "上传中") => {
+                //处理一下百分比的格式防止  33.33333333333339 这种情况出现
+                uploadInfo.progressState = s;
+                uploadInfo.progressValue = percentage(v, 100);
+            };
+            //开始上传
+            try {
+                proxyModelValue.value = await getUploadHandler()(needUploadFile, progress);
+                uploadInfo.progressState = "上传完毕";
+                uploadInfo.progressVisible = false;
+                uploadInfo.progressValue = 0;
+            } catch (e) {
+                getOnError()(e, needUploadFile);
+                uploadInfo.progressState = "上传失败";
+            }
+        }
+
+        function callFileInfoHandler(fileID) {
+            if (fileID) {
+                getFileInfoHandler()(fileID).then(item => uploadInfo.fill(item));
+            } else {
+                uploadInfo.reset();
+            }
+        }
+
+        //我们根据 proxyModelValue 实时更新 fileInfo
+        watch(proxyModelValue, (newVal) => callFileInfoHandler(newVal), {immediate: true});
+        const dragover = ref(false);
+
+        function callDrop(e) {
+            e.preventDefault();
+            dragover.value = false;
+            const needUploadFile = e.dataTransfer.files[0];
+            callUploadHandler(needUploadFile);
+        }
+
+        function callDragover(e) {
+            e.preventDefault();
+            dragover.value = true;
+        }
+
+        function callDragleave(e) {
+            e.preventDefault();
+            dragover.value = false;
+        }
+
+        return {
+            hiddenInputRef,
+            proxyModelValue,
+            uploadInfo,
+            dragover,
+            onHiddenInputChange,
+            selectFile,
+            deleteFile,
+            callDrop,
+            callDragover,
+            callDragleave
+        };
+    }
+};
+</script>

package/scx-upload-list/index.css

@@ -0,0 +1,89 @@
+.scx-upload-list {
+    width: 100%;
+}
+
+.scx-upload-list > .scx-group {
+    padding: 0;
+}
+
+.scx-upload-list .scx-group-item {
+    border-radius: 4px;
+    overflow: hidden;
+    border: 1px solid var(--scx-theme);
+    padding: 5px;
+    display: flex;
+    column-gap: 10px;
+}
+
+.scx-upload-list .scx-group-item:hover {
+    background: var(--scx-theme-secondary);
+}
+
+.scx-upload-list .upload-button {
+    align-self: start;
+}
+
+.scx-upload-list .preview-image {
+    height: 60px;
+    width: 60px;
+    flex-shrink: 0;
+    border: 1px solid var(--scx-theme);
+    border-radius: 4px;
+    box-sizing: border-box;
+}
+
+.scx-upload-list .preview-text {
+    display: flex;
+    position: relative;
+    width: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+    overflow: hidden;
+    line-height: normal;
+}
+
+.scx-upload-list .file-name {
+    max-width: calc(100% - 70px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--scx-theme);
+    font-weight: 600;
+    font-size: 16px;
+}
+
+.scx-upload-list .preview-text > a {
+    text-decoration: unset;
+}
+
+.scx-upload-list .preview-text > a:hover {
+    text-decoration: underline;
+}
+
+.scx-upload-list .progress-state {
+    display: flex;
+    align-items: center;
+    column-gap: 10px;
+    width: 100%;
+}
+
+.scx-upload-list .progress-state > .progress-state-text {
+    flex-shrink: 0;
+    font-weight: 600;
+    font-size: 14px;
+}
+
+.scx-upload-list .progress-state > .scx-progress {
+    width: 100%;
+}
+
+.scx-upload-list .item-info {
+    display: flex;
+    font-weight: 600;
+    font-size: 14px;
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+}

package/scx-upload-list/index.vue

@@ -0,0 +1,228 @@
+<template>
+    <div class="scx-upload-list">
+
+        <!-- 隐藏的 input 用于触发点击上传事件 -->
+        <input ref="hiddenInputRef" multiple placeholder="file" style="display: none" type="file"
+               @change="onHiddenInputChange">
+
+        <scx-group v-model="uploadInfoList"
+                   :before-remove="beforeRemove"
+                   :show-move-button="!disabled"
+                   :show-remove-button="!disabled">
+            <template v-if="!disabled" #before>
+                <!-- 上传按钮 -->
+                <button class="upload-button" type="button" @click="selectFile">
+                    点击上传, 当前共 {{ proxyModelValue.length }} 个文件
+                </button>
+            </template>
+            <template #default="{index,item}">
+                <slot :index="index" :item="item">
+                    <img :src="item.previewURL" alt="img" class="preview-image">
+                    <div class="preview-text">
+                        <a v-if="item.downloadURL" :href="item.downloadURL" class="file-name">{{ item.fileName }}</a>
+                        <span v-else class="file-name">{{ item.fileName }}</span>
+                        <div v-if="item.progressVisible" class="progress-state">
+                            <div class="progress-state-text">{{ item.progressState }}</div>
+                            <scx-progress v-model="item.progressValue"/>
+                        </div>
+                        <div v-else class="item-info">
+                            上传时间 : {{ item.uploadTime }} 文件大小 : {{ item.fileSizeDisplay }}
+                        </div>
+                    </div>
+                </slot>
+            </template>
+        </scx-group>
+
+    </div>
+</template>
+
+<script>
+import "./index.css";
+import {computed, reactive, ref, watch} from "vue";
+import {arrayEquals, percentage} from "@scx-js/scx-common";
+import {ScxFSSHelper, UploadInfo} from "../scx-upload/helper.js";
+import {useScxFSS} from "@scx-js/scx-app-x";
+import ScxGroup from "../scx-group/index.vue";
+import ScxProgress from "../scx-progress/index.vue";
+
+export default {
+    name: "scx-upload-list",
+    components: {
+        ScxGroup,
+        ScxProgress
+    },
+    props: {
+        modelValue: {
+            type: Array,
+            default: null
+        },
+        uploadHandler: {
+            type: Function,
+            default: null
+        },
+        fileInfoHandler: {
+            type: Function,
+            default: null
+        },
+        beforeUpload: {
+            type: Function,
+            default: null
+        },
+        onError: {
+            type: Function,
+            default: null
+        },
+        disabled: { //若为 true 则只具有展示效果 不能上传删除和排序
+            type: Boolean,
+            default: false
+        },
+        beforeDelete: {
+            type: Function,
+            default: null
+        }
+    },
+    setup(props, ctx) {
+        const scxFSS = useScxFSS();
+        const scxFSSHelper = new ScxFSSHelper(scxFSS);
+
+        function getFileInfoHandler() {
+            return props.fileInfoHandler ? props.fileInfoHandler : (fileID) => scxFSSHelper.fileInfoHandler(fileID);
+        }
+
+        function getUploadHandler() {
+            return props.uploadHandler ? props.uploadHandler : (needUploadFile, progress) => scxFSSHelper.uploadHandler(needUploadFile, progress);
+        }
+
+        function getOnError() {
+            return props.onError ? props.onError : (error, file) => console.error(error, file);
+        }
+
+        const hiddenInputRef = ref(null);
+
+        function selectFile() {
+            hiddenInputRef.value.click();
+        }
+
+        function onHiddenInputChange(e) {
+            const needUploadFiles = Array.from(e.target.files);
+            //重置 上传 input 的值 保证即使点击重复文件也可以上传
+            hiddenInputRef.value.value = null;
+            callUploadHandler(needUploadFiles);
+        }
+
+        const proxyModelValue = computed({
+            get() {
+                //处理有时外部数据为 null 或 undefined 的情况
+                return props.modelValue ? props.modelValue : [];
+            },
+            set(value) {
+                ctx.emit("update:modelValue", value);
+            }
+        });
+        /**
+         * 已上传的信息列表
+         * @type {Ref<UnwrapRef<UploadInfo[]>>}
+         */
+        const uploadInfoList = ref([]);
+        /**
+         * 当前是否有上传任务 防止多次点击上传文件按钮上传时产生多次上传任务
+         * @type {boolean}
+         */
+        let hasUploadTask = false;
+
+        //上传文件
+        async function callUploadHandler(needUploadFiles) {
+            if (props.beforeUpload) {
+                const result = await props.beforeUpload(needUploadFiles);
+                if (!result) {
+                    return;
+                }
+            }
+            for (const needUploadFile of needUploadFiles) {
+                const i = new UploadInfo();
+                i.fileName = needUploadFile.name;
+                i.file = needUploadFile;
+                i.progressState = "等待中";
+                i.progressVisible = true;
+                i.progressValue = 0;
+                i.previewURL = URL.createObjectURL(needUploadFile);
+                uploadInfoList.value.push(i);
+            }
+            //如果当前没有上传任务 则进行递归上传
+            if (!hasUploadTask) {
+                await callUploadHandler0();
+            }
+        }
+
+        /**
+         * 这里我们为了减少服务器的压力并不采取批量上传 而是一条传完再传下一条
+         * @returns {Promise<void>}
+         */
+        async function callUploadHandler0() {
+            hasUploadTask = true;
+            const nextNeedUpload = uploadInfoList.value.find(u => u.progressState === "等待中");
+            if (nextNeedUpload) {
+                const progress = (v, s = "上传中") => {
+                    //处理一下百分比的格式防止  33.33333333333339 这种情况出现
+                    nextNeedUpload.progressState = s;
+                    nextNeedUpload.progressValue = percentage(v, 100);
+                };
+                try {
+                    nextNeedUpload.fileID = await getUploadHandler()(nextNeedUpload.file, progress);
+                    nextNeedUpload.progressVisible = false;
+                } catch (e) {
+                    getOnError()(e, nextNeedUpload.file);
+                    nextNeedUpload.progressState = "上传失败";
+                }
+                const item = await getFileInfoHandler()(nextNeedUpload.fileID);
+                nextNeedUpload.fill(item);
+                nextNeedUpload.file = null;
+                nextNeedUpload.progressValue = 0;
+                //进行下一次上传
+                await callUploadHandler0();
+            } else {
+                hasUploadTask = false;
+            }
+        }
+
+        function getFileIDs(l) {
+            return l.map(d => d.fileID).filter(d => d);
+        }
+
+        function callFileInfoHandler(fileIDs) {
+            if (!arrayEquals(fileIDs, getFileIDs(uploadInfoList.value))) {
+                console.log("外部发生变化 !!!");
+                uploadInfoList.value = fileIDs.map(fileID => {
+                    const u = reactive(new UploadInfo());
+                    u.fileID = fileID;
+                    u.fileName = fileID;
+                    getFileInfoHandler()(u.fileID).then(item => u.fill(item));
+                    return u;
+                });
+            }
+        }
+
+        //我们根据 proxyModelValue 实时更新 fileInfo
+        watch(proxyModelValue, (newVal) => callFileInfoHandler(newVal), {immediate: true});
+
+        function callProxyModelHandler(list) {
+            const fileIDs = getFileIDs(list);
+            if (!arrayEquals(fileIDs, proxyModelValue.value)) {
+                console.log("内部发生变化  !!!");
+                proxyModelValue.value = fileIDs;
+            }
+        }
+
+        watch(uploadInfoList, (newVal) => callProxyModelHandler(newVal), {deep: true});
+        const beforeRemove = props.beforeDelete ? (info) => props.beforeDelete(info.copy()) : null;
+        return {
+            hiddenInputRef,
+            uploadInfoList,
+            proxyModelValue,
+            beforeRemove,
+            onHiddenInputChange,
+            selectFile,
+        };
+    }
+};
+</script>

package/style/changeTheme.js

@@ -0,0 +1,13 @@
+/**
+ * 修改主题
+ * @param value {boolean} 传入 true 或 false
+ */
+function changeTheme(value) {
+    if (value) {
+        document.documentElement.classList.add("dark");
+    } else {
+        document.documentElement.classList.remove("dark");
+    }
+}
+
+export {changeTheme};

package/style/dark.css

@@ -0,0 +1,59 @@
+/* 此处重写项目中最基础的 css 变量 */
+html.dark {
+
+    /* 主要强调色 */
+    --scx-theme: rgb(72, 147, 73);
+    /* 用于背景强调色 或 hover 背景色 */
+    --scx-theme-bg: rgb(0, 71, 25, 0.2);
+    /* 次要强调色 */
+    --scx-theme-secondary: rgba(72, 147, 73, 0.5);
+    /* 主要背景 (也可以为图片) */
+    --scx-bg: #2b2b2b;
+    /* 主要文字颜色 */
+    --scx-text-color: whitesmoke;
+    /* 次要文字颜色 */
+    --scx-text-secondary-color: #909399;
+    /* 占位文字颜色 */
+    --scx-text-placeholder-color: #a8abb2;
+
+    /* 滚动条背景 */
+    --scx-scrollbar-bg: rgb(20, 20, 20);
+    /* 滚动条拖动滑块背景 */
+    --scx-scrollbar-thumb-bg: rgba(72, 147, 73, 0.4);
+    /* 滚动条拖动滑块背景 (hover) */
+    --scx-scrollbar-thumb-hover-bg: rgba(72, 147, 73, 0.8);
+
+    /* 强调内容背景 */
+    --scx-overlay-bg: #3c3c3c;
+
+    /* 磨砂玻璃背景 */
+    --scx-glass-bg: rgba(50, 50, 50, 0.8);
+    /* 背景滤镜 */
+    --scx-glass-bg-filter: blur(8px);
+
+    /* 通用的阴影 分别是 [颜色, X 偏移量, Y 偏移量, 模糊, 扩张] */
+    --scx-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 3px 0px;
+    /* 没有偏移量的阴影 */
+    --scx-box-shadow-center: rgba(0, 0, 0, 0.4) 0 0 3px 1px;
+    /* 只需要上方有阴影 */
+    --scx-box-shadow-top: rgba(0, 0, 0, 0.4) 0 -1px 3px 0px;
+    /* 只需要左边有阴影 */
+    --scx-box-shadow-left: rgba(0, 0, 0, 0.4) -1px 0 3px 0px;
+    /* 只需要下方有阴影 */
+    --scx-box-shadow-bottom: rgba(0, 0, 0, 0.4) 0 1px 3px 0px;
+    /* 只需要右边有阴影 */
+    --scx-box-shadow-right: rgba(0, 0, 0, 0.4) 1px 0 3px 0px;
+
+    /* 输入框 */
+    --scx-input_bg: rgba(255, 255, 255, 0.2);
+    --scx-input_box-shadow: rgba(180, 180, 180, 0.6) 0 0 1px 1px;
+    --scx-input-hover_box-shadow: rgba(44, 170, 46, 0.6) 0 0 2px 2px;
+
+    /* scx-panel 组件 */
+    --scx-panel-item_bg: rgba(255, 255, 255, 0.2);
+    --scx-panel-item_border-color: transparent;
+    --scx-panel-item_hover-bg: rgb(72, 147, 73);
+    --scx-panel-item_hover-border-color: transparent;
+    --scx-panel-item_hover-color: whitesmoke;
+
+}