@scx-js/scx-ui 0.0.1 → 0.0.3

package/scx-upload-list/index.vue

@@ -1,228 +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>
+<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

@@ -1,13 +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};
+/**
+ * 修改主题
+ * @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

@@ -1,59 +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;
-
-}
+/* 此处重写项目中最基础的 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;
+
+}