up

package.json

@@ -10,7 +10,7 @@
         "axios": "^0.27.2",
         "crypto-js": "^4.1.1",
         "echarts": "^5.3.3",
-        "element-plus": "^2.2.12",
+        "element-plus": "^2.2.13",
         "js-base64": "^3.7.2",
         "js-cookie": "^3.0.1",
         "js-md5": "^0.7.3",
@@ -20,11 +20,11 @@
         "pinia": "^2.0.18",
         "vue": "^3.2.37",
         "vue-router": "^4.1.3",
-        "vue-utils-plus": "^0.0.63",
+        "vue-utils-plus": "^1.0.0",
         "vuedraggable": "^4.1.0"
     },
     "devDependencies": {
-        "@vitejs/plugin-vue": "^3.0.1",
+        "@vitejs/plugin-vue": "^3.0.3",
         "@vue/compiler-sfc": "^3.2.37",
         "autoprefixer": "^10.4.7",
         "nprogress": "^0.2.0",
@@ -34,7 +34,7 @@
         "unplugin-auto-import": "^0.11.1",
         "unplugin-vue-components": "^0.22.4",
         "vfonts": "^0.0.3",
-        "vite": "^3.0.5",
+        "vite": "^3.0.7",
         "vooks": "^0.2.12"
     }
 }

src/App.vue

@@ -1,14 +1,13 @@
 <template>
-    <el-config-provider :locale="zhCn">
+    <AppConfig>
         <router-view/>
-    </el-config-provider>
+    </AppConfig>
 </template>
 
 <script setup>
 import {nextTick, ref, watch} from "vue";
 import {useAppStore} from "~src/store/index";
-import zhCn from 'element-plus/es/locale/lang/zh-cn'
-import { ElMessage, ElLoading, ElNotification,ElMessageBox } from 'element-plus'
+import AppConfig from "~com/AppConfig/index.vue";
 import {setMainColor} from "~src/utils/tools";
 import config from '~src/config/index';
 import {useOsTheme} from 'vooks'
@@ -18,16 +17,6 @@ const appStore = useAppStore()
 const UserTheme = ref(appStore.getTheme)
 const appColor = ref(appStore.getColor);
 
-// 将ui的函数挂载在windows对象上
-function registerElTools () {
-    window['$ElLoading'] = ElLoading;
-    window['$ElMessageBox'] = ElMessageBox;
-    window['$ElMessage'] = ElMessage;
-    window['$ElNotification'] = ElNotification;
-}
-
-registerElTools()
-
 //监听
 watch(() => [
     appStore.getTheme,

src/components/AppConfig/index.vue

@@ -0,0 +1,20 @@
+<template>
+    <el-config-provider :locale="zhCn">
+        <slot></slot>
+    </el-config-provider>
+</template>
+
+<script setup>
+import { ElMessage, ElLoading, ElNotification,ElMessageBox } from 'element-plus'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+
+// 将ui的函数挂载在windows对象上
+function registerElTools () {
+    window['$ElLoading'] = ElLoading;
+    window['$ElMessageBox'] = ElMessageBox;
+    window['$ElMessage'] = ElMessage;
+    window['$ElNotification'] = ElNotification;
+}
+
+registerElTools()
+</script>

src/components/Application/index.js

@@ -1,2 +0,0 @@
-import AppProvider from './index.vue';
-export { AppProvider };

src/components/Application/index.vue

@@ -1,17 +0,0 @@
-<template>
-    <n-loading-bar-provider>
-        <n-dialog-provider>
-            <n-notification-provider>
-                <n-message-provider>
-                    <slot></slot>
-                    <NaiveUseWindow/>
-                </n-message-provider>
-            </n-notification-provider>
-        </n-dialog-provider>
-    </n-loading-bar-provider>
-</template>
-
-<script setup>
-import { NLoadingBarProvider , NDialogProvider , NMessageProvider ,NNotificationProvider } from 'naive-ui'
-import NaiveUseWindow from './useWindow.vue';
-</script>

src/components/Application/useWindow.vue

@@ -1,17 +0,0 @@
-<template>
-    <div></div>
-</template>
-
-<script setup>
-import {useDialog, useMessage, useLoadingBar, useNotification} from 'naive-ui';
-
-// 将naive ui的函数挂载在windows对象上
-function registerNaiveTools () {
-    window['$loadingBar'] = useLoadingBar();
-    window['$dialog'] = useDialog();
-    window['$message'] = useMessage();
-    window['$notification'] = useNotification();
-}
-
-registerNaiveTools()
-</script>

src/components/data-fill/ListItem.vue

@@ -1,619 +0,0 @@
-<template>
-    <div class="data-fill-list-box">
-        <n-collapse accordion @update:expanded-names="updateExpandedNames">
-            <template v-for="(item,index) in listDatas" :key="item?.pkeyId">
-                <n-collapse-item display-directive="show" :id="`item-${index}-${item?.pkeyId}`" :name="`item-${index}-${item?.pkeyId}`">
-                    <template #header>
-                        <div class="text-lg truncate item-title">{{item.name}}</div>
-                    </template>
-                    <template #header-extra>
-                        <div class="flex items-center hc-extra-text-box">
-                            <n-popover trigger="hover" :disabled="!bubbleVal || !btn_copy_table?.textInfo" v-if="btn_copy_table">
-                                <template #trigger>
-                                    <div class="text-main extra-text-item" @click.stop="copyClick(item,index)">
-                                        <i class="hcicon-a-Frame3"/>
-                                        <span class="ml-1">复制本表</span>
-                                    </div>
-                                </template>
-                                <span>{{btn_copy_table?.textInfo}}</span>
-                            </n-popover>
-                            <n-popover trigger="hover" :disabled="!bubbleVal || !btn_hide_table?.textInfo" v-if="btn_hide_table">
-                                <template #trigger>
-                                    <div class="text-gray-400 ml-8 extra-text-item" @click.stop="hideClick(item,index)">
-                                        <i class="hcicon-a-Frame4"/>
-                                        <span class="ml-1">隐藏本表</span>
-                                    </div>
-                                </template>
-                                <span>{{btn_hide_table?.textInfo}}</span>
-                            </n-popover>
-                            <n-popover trigger="hover" :disabled="!bubbleVal || !btn_pre_table?.textInfo" v-if="btn_pre_table">
-                                <template #trigger>
-                                    <div class="text-gray-400 ml-8 extra-text-item" @click.stop="previewClick(item,index)">
-                                        <i class="hcicon-Frame"/>
-                                        <span class="ml-1">预览</span>
-                                    </div>
-                                </template>
-                                <span>{{btn_pre_table?.textInfo}}</span>
-                            </n-popover>
-                            <n-popover trigger="hover" :disabled="!bubbleVal || !btn_up_table?.textInfo" v-if="btn_up_table">
-                                <template #trigger>
-                                    <div class="text-main ml-8 extra-text-item" @click.stop="uploadClick(item,index)">
-                                        <i class="hcicon-shangchuan"/>
-                                        <span class="ml-1">上传</span>
-                                    </div>
-                                </template>
-                                <span>{{btn_up_table?.textInfo}}</span>
-                            </n-popover>
-                        </div>
-                    </template>
-                    <div class="data-fill-list-item-content">
-                        <div class="data-fill-table-form-box">
-                            <div :id="`table-form-${item?.pkeyId}`"></div>
-                            <div class="hc-no-table-form" v-if="item?.isTableForm === false">
-                                <div class="table-form-no">
-                                    <img :src="notableform" alt=""/>
-                                    <div class="desc">暂无表单数据</div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="data-fill-table-tip-box">
-                            <div class="text-orange tip-title">
-                                <i class="_icon-info-o"/>
-                                <span class="ml-1">提示</span>
-                            </div>
-                            <div class="text-gray-400 tip-item">1、灰色框代表可通过系统识别计算，公式自动引用，可通过公式计算少量数据，(表头数据及简单)，也可只填写白色框数据</div>
-                            <div class="text-gray-400 tip-item">2、系统支持键盘中，shift + tab键向上一个填报框切换，tab向下一个填报框切换。暂不支持上下按键切换输入框</div>
-                            <div class="table-tip-foot">
-                                <div class="tip-left-btn">
-                                    <n-popover trigger="hover" :disabled="!bubbleVal || !btn_impo_table?.textInfo" v-if="btn_impo_table">
-                                        <template #trigger>
-                                            <div class="text-gray-400 dow-text">
-                                                <i class="hcicon-Frame1"/>
-                                                <span class="ml-1">导入列表数据</span>
-                                            </div>
-                                        </template>
-                                        <span>{{btn_impo_table?.textInfo}}</span>
-                                    </n-popover>
-                                    <n-popover trigger="hover" :disabled="!bubbleVal || !btn_down_table?.textInfo" v-if="btn_down_table">
-                                        <template #trigger>
-                                            <div class="text-main dow-text">
-                                                <i class="hcicon-a-Frame11"/>
-                                                <span class="ml-1">下载导入模板</span>
-                                            </div>
-                                        </template>
-                                        <span>{{btn_down_table?.textInfo}}</span>
-                                    </n-popover>
-                                </div>
-                                <div class="tip-right-btn">
-                                    <n-popover trigger="hover" :disabled="!bubbleVal || !btn_save_table?.textInfo" v-if="btn_save_table">
-                                        <template #trigger>
-                                            <n-button type="primary" strong secondary size="large" @click="tableFormSaveClick(item,index)">保存</n-button>
-                                        </template>
-                                        <span>{{btn_save_table?.textInfo}}</span>
-                                    </n-popover>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </n-collapse-item>
-            </template>
-        </n-collapse>
-    </div>
-    <!--鼠标右键菜单-->
-    <n-dropdown placement="bottom" inverted trigger="manual" :x="tableFormMenuX" :y="tableFormMenuY" size="huge" :options="tableFormMenu" :show="tableFormMenuShow" @clickoutside="onClickoutside" @select="handleMenuSelect"/>
-    <!--插入设计值/频率-->
-    <n-modal v-model:show="IDVFModal" class="hc-custom-card" title="插入设计值/频率" preset="card" style="width: 600px;" :segmented="{content: 'soft', footer: 'soft'}">
-        <div class="text-base mb-6 ml-16 pl-1">填写完设计值和频率，系统自动计算实测值</div>
-        <n-form ref="formIDVFRef" :model="formIDVFModel" :rules="formIDVFRules" label-placement="left" label-width="auto" size="large">
-            <n-form-item label="设计值" path="designValue">
-                <n-input v-model:value="formIDVFModel.designValue" placeholder="请输入设计值"/>
-            </n-form-item>
-            <n-form-item label="频率" path="frequency">
-                <n-input v-model:value="formIDVFModel.frequency" placeholder="请输入频率"/>
-            </n-form-item>
-        </n-form>
-        <template #footer>
-            <div class="text-center">
-                <n-button @click="IDVFModal = false">取消</n-button>
-                <n-button type="primary" class="ml-6">确认插入</n-button>
-            </div>
-        </template>
-    </n-modal>
-    <!--插入特殊字符-->
-    <n-modal v-model:show="specialModal" class="hc-custom-card" title="插入特殊字符" preset="card" style="width: 600px;" :segmented="{content: 'soft', footer: 'soft'}">
-        <n-input ref="specialRef" id="specialId" class="font-EUDC mb-6" v-model:value="specialValue" size="large" placeholder="请选择特殊字符代码" clearable autofocus/>
-        <n-grid :x-gap="10" :y-gap="10" :cols="8">
-            <n-grid-item v-for="item in specialCharacters" :key="item">
-                <div class="special-box" @click="specialClick">
-                    <span class="font-EUDC" :title="`字符代码(C):${item !== 'K̅'?item.slice(2,7):'K̅'}`" v-html="item"/>
-                </div>
-            </n-grid-item>
-        </n-grid>
-        <template #footer>
-            <div class="text-center">
-                <n-button @click="specialModal = false">取消</n-button>
-                <n-button type="primary" class="ml-6" @click="specialNodeClick">确认插入</n-button>
-            </div>
-        </template>
-    </n-modal>
-    <!--关联试验数据-->
-    <n-modal v-model:show="CTDModal" class="hc-custom-card" title="关联试验数据" preset="card" style="width: 850px;" :segmented="{content: 'soft', footer: 'soft'}">
-        123456
-        <template #footer>
-            <div class="text-center">
-                <n-button @click="CTDModal = false">取消</n-button>
-                <n-button type="primary" class="ml-6">确认插入</n-button>
-            </div>
-        </template>
-    </n-modal>
-</template>
-
-<script setup>
-import {ref,watch,nextTick} from "vue";
-import {useAppStore} from "~src/store/index";
-import wbsApi from "~api/data-fill/wbs"
-import {ElInput,ElDatePicker} from 'element-plus'
-import {createApp} from "vue/dist/vue.esm-bundler.js";
-import {isString} from "~src/utils/lib/isApp";
-import notableform from '~src/assets/view/notableform.svg';
-
-//初始
-const useAppState = useAppStore()
-const props = defineProps({
-    datas: {
-        type: Array,
-        default: () => ([])
-    },
-    projectId: {
-        type: [String,Number],
-        default: ''
-    },
-    contractId: {
-        type: [String,Number],
-        default: ''
-    },
-    classify: {
-        type: [String,Number],
-        default: ''
-    },
-})
-
-//按钮气泡开关
-const bubbleVal = ref(useAppState.getBubble);
-const projectId = ref(props.projectId)
-const contractId = ref(props.contractId)
-const listDatas = ref(props.datas)
-const classify = ref(props.classify)
-
-//监听
-watch(() => [
-    props.datas,
-    props.projectId,
-    props.contractId,
-    useAppState.getBubble,
-    props.classify,
-], ([datas, pid, cid, Bubble,classifyVal]) => {
-    listDatas.value = datas
-    bubbleVal.value = Bubble
-    projectId.value = pid
-    contractId.value = cid
-    classify.value = classifyVal
-    setFormDataNum(datas)
-})
-
-//获取气泡数据
-const getButtonsVal = (value) => {
-    return useAppState.getButtonsVal(value)
-}
-
-const btn_copy_table = ref(getButtonsVal('wbs_copy_table')) //复制本表
-const btn_hide_table = ref(getButtonsVal('wbs_hide_table')) //隐藏本表
-const btn_pre_table = ref(getButtonsVal('wbs_preview_table')) //预览本表
-const btn_up_table = ref(getButtonsVal('wbs_upload_table')) //上传
-
-const btn_down_table = ref(getButtonsVal('wbs_download_table')) //下载导入模板
-const btn_impo_table = ref(getButtonsVal('wbs_import_table')) //导入列表数据
-const btn_save_table = ref(getButtonsVal('wbs_save_table'))//保存本表
-
-//事件
-const emit = defineEmits(['uploadTap','itemTap','copyTap','hideTap','previewTap','offsetTop'])
-
-nextTick(() => {
-    setFormDataNum(props.datas)
-})
-
-//展开事件
-const updateExpandedNames = (name) => {
-    const keys = name.length > 0 ? name[0]:'';
-    const names = name.length > 0 ? name[0].split('-'): []
-    if (names.length > 0) {
-        getOffsetTop(keys)
-        const index = names[1]
-        const item = listDatas.value[index]
-        if (!item.isTableFormRender) {
-            getExcelHtml(item,index)
-        }
-    } else {
-        emit('offsetTop', {offsetTop: 0, dom: null})
-    }
-}
-
-//获取模板标签数据
-const getExcelHtml = (item,index) => {
-    if (item.pkeyId !== 0) {
-        wbsApi.getExcelHtml({
-            pkeyId: item.pkeyId + ''
-        }).then(({data}) => {
-            const res = isString(data.data)?data.data:''
-            if (res) {
-                item.isTableForm = true
-                HTableForm(res, item, index)
-            } else {
-                item.isTableForm = false
-                window?.$message?.warning('清表内容是空的')
-            }
-        }).catch(() => {
-            item.isTableForm = false
-        })
-    } else {
-        item.isTableForm = false
-        window?.$message?.warning('pkeyId为空')
-    }
-}
-
-//渲染模板标签
-const formData = ref([])
-
-//设置表单对象的数量
-const setFormDataNum = (datas) => {
-    if(datas.length > 0) {
-        datas.forEach(item => {
-            formData.value.push({
-                projectId: projectId.value,
-                contractId: contractId.value
-            })
-        })
-    }
-}
-
-//渲染表格表单
-const HTableForm = (templateData,item,index) => {
-    const app = createApp({
-        data() {
-            return {
-                formData: formData.value[index],
-            }
-        },
-        template: templateData,
-        components: {ElInput,ElDatePicker},
-        methods: {
-            RightClick(a,b,c,d,e,f,event) {
-                event.preventDefault();
-                const key = event?.target?.getAttribute('keyname') || ''
-                onRightClick(event,key,index)
-            },
-            getInformation(a,b,c) {
-
-            },
-        }
-    })
-    app.mount(`#table-form-${item.pkeyId}`)
-    item.isTableFormRender = true
-}
-
-//树的菜单相关变量
-const tableFormMenuShow = ref(false)
-const tableFormItemNode = ref({})
-const tableFormMenuX = ref(0);
-const tableFormMenuY = ref(0);
-
-//树的菜单数据
-const tableFormMenu = ref([
-    {label: '插入设计值/频率', key: "IDVF"},
-    {label: '插入特殊字符', key: "special"},
-    {label: '关联试验数据', key: "CTD"},
-])
-
-//鼠标右键事件
-const onRightClick = (event,key,index) => {
-    //取光标位置
-    let specialDom = document.getElementById(key + "");
-    let startPos = specialDom?.selectionStart, endPos = specialDom?.selectionEnd;
-    //存储临时信息
-    tableFormItemNode.value = {key, index, startPos, endPos}
-    //取坐标
-    nextTick().then(() => {
-        tableFormMenuShow.value = true;
-        tableFormMenuX.value = event.clientX;
-        tableFormMenuY.value = event.clientY;
-    });
-}
-
-//鼠标右键菜单被点击
-const handleMenuSelect = (key) => {
-    //const item = tableFormItemNode.value;
-    tableFormMenuShow.value = false;
-    if (key === 'IDVF') {
-        IDVFModal.value = true
-    } else if (key === 'special') {
-        specialModalShow()
-    } else if (key === 'CTD') {
-        CTDModal.value = true
-    }
-}
-
-const onClickoutside = () => {
-    tableFormItemNode.value = {};
-    tableFormMenuShow.value = false;
-}
-
-//单个保存
-const tableFormSaveClick = (item,index) => {
-    wbsApi.saveExcelBussData({
-        pkeyId: item.pkeyId,
-        classify: classify.value,
-        ...formData.value[index]
-    }).then(({data}) => {
-        if(data.code === 200) {
-            window?.$message?.success('保存成功')
-        } else {
-            window?.$message?.warning(data.msg || '保存失败')
-        }
-    })
-}
-
-//复制本表
-const copyClick = (item,index) => {
-    emit('copyTap', {item,index})
-}
-//隐藏本表
-const hideClick = (item,index) => {
-    emit('hideTap', {item,index})
-}
-//预览
-const previewClick = (item,index) => {
-    emit('previewTap', {item,index})
-}
-//上传被点击
-const uploadClick = (item,index) => {
-    emit('uploadTap', {item,index})
-}
-
-//上传被点击
-const getOffsetTop = (key) => {
-    const dom = document.getElementById(key)
-    emit('offsetTop', dom.offsetTop)
-}
-
-//插入设计值/频率
-const IDVFModal = ref(false)
-const formIDVFRef = ref(null)
-const formIDVFModel = ref({
-    designValue: '', frequency: ''
-})
-const formIDVFRules = {
-    designValue: {
-        required: true,
-        trigger: ["blur", "input"],
-        message: "请输入设计值"
-    },
-    frequency: {
-        required: true,
-        trigger: ["blur", "input"],
-        message: "请输入频率"
-    }
-}
-
-//插入特殊字符
-const specialModal = ref(false)
-const specialCharacters = ref([
-    '&#57344;', "&#57345;", "&#57346;", "&#57347;", '&#8804;', '&#8805;', '&#8451;',
-    '&#9312;', '&#9313;', '&#9314;', '&#9315;', '&#9316;', '&#9317;', '&#9318;', '&#9319;', '&#9320;', '&#9321;', '&#9322;', '&#9323;',
-    '&#9324;', '&#9325;', '&#9326;', '&#9327;', '&#9328;', '&#9329;', '&#9330;', '&#9331;',
-    "&#8544;", "&#8545;", "&#8546;", "&#8547;", "&#8548;", "&#8549;", "&#8550;", "&#8551;", "&#8552;", "&#8553;", "&#8554;", "&#8555;","K̅"
-])
-const specialRef = ref(null)
-const specialValue = ref('')
-const specialModalShow = () => {
-    specialValue.value = ''
-    specialModal.value = true
-    nextTick(() => {
-        specialRef.value?.focus();
-    })
-}
-const specialClick = (event) => {
-    inputInsertValue("specialId", event.target.innerText)
-}
-//输入框插入内容
-const inputInsertValue = (Id,val) => {
-    let specialDom = document.getElementById(Id + "").getElementsByTagName('input')[0];
-    let startPos = specialDom?.selectionStart, endPos = specialDom?.selectionEnd;
-    if (startPos || startPos === 0) {
-        let specialVal = specialValue.value;
-        specialValue.value = specialVal.substring(0, startPos) + val + specialVal.substring(endPos, specialVal.length)
-        specialDom?.focus();
-        //设置光标位置
-        let posVal = startPos + val.length;
-        nextTick(() => {
-            specialDom?.setSelectionRange(posVal,posVal)
-        })
-    } else {
-        specialValue.value += val;
-        specialDom?.focus();
-    }
-}
-
-//插入内容
-const inputPosInsert = (dom,startPos,endPos,special,value) => {
-    let val = value || '', specialVal = special || ''
-    console.log(startPos,endPos)
-    if (startPos || startPos === 0) {
-        val = val.substring(0, startPos) + specialVal + val.substring(endPos, val.length)
-        dom?.focus();
-        //设置光标位置
-        let posVal = startPos + specialVal.length;
-        nextTick(() => {
-            dom?.setSelectionRange(posVal,posVal)
-        })
-    } else {
-        val += specialVal;
-        dom?.focus();
-    }
-    return val
-}
-
-//确认插入
-const specialNodeClick = () => {
-    const item = tableFormItemNode.value;
-    const form = formData.value[item.index]
-    let keyDom = document.getElementById(item.key);
-    const res = inputPosInsert(keyDom,item.startPos,item.endPos,specialValue.value,form[item.key])
-    formData.value[item.index][item.key] = res
-    specialModal.value = false
-}
-
-//关联试验数据
-const CTDModal = ref(false)
-
-</script>
-
-<style lang="scss" scoped>
-.data-fill-list-box {
-    position: relative;
-    .item-title {
-        position: relative;
-        padding-left: 10px;
-        user-select: none;
-    }
-    .hc-extra-text-box .extra-text-item {
-        font-size: 16px;
-        user-select: none;
-    }
-    .data-fill-list-item-content {
-        position: relative;
-        display: flex;
-        .data-fill-table-form-box {
-            position: relative;
-            padding: 24px 20px;
-            height: calc(100vh - 380px);
-            overflow: auto;
-            flex: 1;
-            .hc-no-table-form {
-                position: relative;
-                height: 100%;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                .table-form-no {
-                    position: relative;
-                    img {
-                        width: 350px;
-                    }
-                    .desc {
-                        text-align: center;
-                        font-size: 20px;
-                        color: #aaa;
-                    }
-                }
-            }
-        }
-        .data-fill-table-tip-box {
-            width: 240px;
-            position: relative;
-            border-left: 1px solid #e4e4e4;
-            padding: 20px 15px 80px;
-            .tip-title {
-                font-size: 16px;
-                margin-bottom: 10px;
-            }
-            .tip-item {
-                margin-bottom: 20px;
-            }
-            .table-tip-foot {
-                position: absolute;
-                bottom: 15px;
-                right: 0;
-                left: 0;
-                display: flex;
-                align-items: center;
-                padding: 0 15px;
-                .tip-left-btn {
-                    flex: 1;
-                    .dow-text {
-                        cursor: pointer;
-                    }
-                }
-            }
-        }
-    }
-}
-.special-box {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: 1px solid #eee;
-    border-radius: 3px;
-    height: 60px;
-    cursor: default;
-    user-select: none;
-    transition: color .3s, background-color .3s;
-    &:hover {
-        color: var(--hc-primary);
-        background-color: var(--hc-primary-light-1);
-    }
-    .font-EUDC {
-        font-size: 30px;
-        cursor: default;
-    }
-}
-</style>
-
-<style lang="scss">
-.data-fill-list-box {
-    .n-collapse .n-collapse-item {
-        border: 1px solid #ddd;
-        border-radius: 3px;
-        margin: 0 0 15px;
-        background-color: white;
-        .n-collapse-item__header {
-            padding: 0;
-            transition: color .3s var(--n-bezier), background-color .3s;
-            border-radius: 3px 3px 0 0;
-            .n-collapse-item__header-main {
-                padding: 15px 20px;
-            }
-            .n-collapse-item__header-extra {
-                padding-right: 20px;
-            }
-            &.n-collapse-item__header--active {
-                background-color: #F9F9F9;
-                border-bottom: 1px solid #ddd;
-            }
-        }
-        .n-collapse-item__content-wrapper .n-collapse-item__content-inner {
-            padding-top: 0;
-        }
-    }
-}
-//设置表单样式
-.data-fill-table-form-box {
-    td {
-        padding: 6px;
-        font-family: "EUDC", 宋体, v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
-        .el-input {
-            background-color: #ffffff !important;
-            border-radius: 3px;
-            .el-input__wrapper {
-                background-color: inherit;
-            }
-            .el-input__wrapper.is-focus, .el-input__wrapper:hover {
-                box-shadow: 0 0 0 1.5px var(--el-input-focus-border-color) inset;
-                background-color: #eddac4;
-            }
-            //公式 #dcdcdc
-            //焦点 #eddac4
-        }
-    }
-}
-</style>

src/components/data-fill/nodeTree/children.vue

@@ -1,275 +0,0 @@
-<template>
-    <div class="cu-tree-node-children">
-        <div class="cu-tree-node-view is-leaf" v-for="item in nodes" :key="item[format.key]">
-            <div class="cu-tree-node-label">
-                <div class="cu-tree-node-label-text">
-                    <div class="cu-tree-node-label-name" :id="`node-tree-${item.key}`" @click="nodeLabelClick(item)" @dblclick="nodeLabelDblClick(item)" @contextmenu="nodeLabelContextMenu($event,item)">
-                        <template v-if="TreeIsColor">
-                            <el-button hc-btn color="#0081ff" :loading="item.loading" v-if="item?.colorStatus === 2">{{item.label}}</el-button>
-                            <el-button hc-btn color="#f37b1d" :loading="item.loading" v-else-if="item?.colorStatus === 3">{{item.label}}</el-button>
-                            <el-button type="primary" hc-btn :loading="item.loading" v-else-if="item?.colorStatus === 4">{{item.label}}</el-button>
-                            <el-button type="info" hc-btn :loading="item.loading" v-else>{{item.label}}</el-button>
-                        </template>
-                        <template v-if="!TreeIsColor">
-                            <el-button type="info" hc-btn :loading="item.loading">{{item.label}}</el-button>
-                        </template>
-                    </div>
-                    <span class="cu-tree-node-label-btn" :class="[ifExpanded(item)?'expanded':'']" v-if="isExpanded(item)" @click="expandedClick(item)"/>
-                </div>
-            </div>
-            <TreeNodeChildren :data="item.childNodes" :format="format" :menus="menusData" :isMark="menuMark" :parentNodes="item" v-if="ifExpanded(item)" :isColor="TreeIsColor"
-                              @expandClick="ChildrenExpandedClick" @nodeClick="ChildrenNodeLabelClick" @nodeDblClick="ChildrenNodeLabelDblClick" @menuClick="ChildrenCpoverMenuClick"/>
-        </div>
-    </div>
-    <!--菜单-->
-    <n-dropdown placement="bottom" trigger="manual" :x="x" :y="y" size="huge" :options="menusData" :show="showDropdown" @clickoutside="onClickoutside" @select="handleMenuSelect"/>
-</template>
-
-<script setup>
-import {ref,watch,onMounted,nextTick} from "vue";
-import TreeNodeChildren from "./children.vue"
-import {hIconJs} from "~src/plugins/renderele";
-import {isType} from "vue-utils-plus"
-import { NDropdown } from 'naive-ui';
-
-const { isObject, isBoolean } = isType()
-const props = defineProps({
-    data: {
-        type: Array,
-        default: () => ([])
-    },
-    parentNodes: {
-        type: Object,
-        default: () => ({})
-    },
-    format: {
-        type: Object,
-        default: () => ({
-            key: "key",
-            label: "label",
-            children: "children",
-        })
-    },
-    menus: {
-        type: Array,
-        default: () => ([])
-    },
-    isMark: {
-        type: Boolean,
-        default: false
-    },
-    accordion: {
-        type: Boolean,
-        default: false
-    },
-    isColor: {
-        type: Boolean,
-        default: false
-    },
-})
-
-//初始数据
-const datas = ref(props.data)
-const parent = ref(props.parentNodes)
-const menusData = ref(props.menus)
-const menuMark = ref(props.isMark)
-const nodes = ref([])
-const TreeIsColor = ref(props.isColor)
-
-//树的菜单相关变量
-const showDropdown = ref(false)
-const menuRefItem = ref(null)
-const x = ref(0);
-const y = ref(0);
-
-//监听
-watch(() => [
-    props.data,
-    props.parentNodes,
-    props.menus,
-    props.isMark,
-    props.isColor,
-], ([val,Nodes,menus,isMark,isColor]) => {
-    datas.value = val
-    menusData.value = menus
-    menuMark.value = isMark
-    TreeIsColor.value = isColor
-    if (isDataType(Nodes)) {
-        parent.value = Nodes
-        setDatasToNodes()
-    } else {
-        parent.value = {}
-    }
-})
-
-//渲染完成
-onMounted(()=> {
-    if (isDataType(props.parentNodes)) {
-        parent.value = props.parentNodes
-        setDatasToNodes()
-    } else {
-        parent.value = {}
-    }
-})
-
-//检查数据类型
-const isDataType = (data) => {
-    if (isObject(data)) {
-        return Object.keys(data).length !== 0;
-    } else {
-        return false
-    }
-}
-
-//处理为node节点类型的数据
-const setDatasToNodes = () => {
-    let nodesArr = [];
-    const {key,label,children} = props.format
-    const deepData = datas.value
-    for (let i = 0; i < deepData.length; i++) {
-        let childNodes = deepData[i][children] //子级数据
-        let ifChildren = !!(childNodes && childNodes.length > 0);
-        nodesArr.push({
-            childNodes: childNodes, //子节点原始数据
-            childrenNodes: [],      //子节点node封装数据
-            data: deepData[i],      //节点主要数据
-            parentNodes: parent.value,  //父节点数据
-            expanded: ifChildren || deepData[i]['expanded'] || false,  //是否展开
-            isExpand: ifChildren || deepData[i]['isExpand'] || false,   //是否能展开
-            isLeaf: deepData[i]['isLeaf'] || false,     //是否为最后一节
-            loading: deepData[i]['loading'] || false,   //加载状态
-            colorStatus: deepData[i]['colorStatus'] || 1,   //颜色状态
-            key: deepData[i][key],      //节点的key
-            label: deepData[i][label]   //节点显示的名称
-        })
-    }
-    nodes.value = nodesArr //渲染使用
-    parent.value['childrenNodes'] = nodes.value //把当前节点数据，存入父节点的数据里。
-}
-
-const emit = defineEmits(['expandClick','nodeMouseover','nodeMouseout', 'nodeClick', 'nodeDblClick', 'menuClick'])
-
-//下级数据是否存在
-const isChildren = (item) => {
-    return !!(item.childNodes && item.childNodes.length > 0);
-}
-//是否显示展开和隐藏按钮
-const isExpanded = (item) => {
-    let ifChildren = isChildren(item);
-    if (isBoolean(item['expanded'])) {
-        let res = !!(item['expanded'] && ifChildren);
-        item['expanded'] = res;
-        return res;
-    } else {
-        item['expanded'] = false;
-        return false;
-    }
-}
-//处理展开和隐藏的样式
-const ifExpanded = (item) => {
-    let ifChildren = isChildren(item);
-    if (isBoolean(item['isExpand'])) {
-        let res = !!(item['isExpand'] && ifChildren);
-        item['isExpand'] = res;
-        return res;
-    } else {
-        item['isExpand'] = ifChildren;
-        return ifChildren;
-    }
-}
-//展开和隐藏按钮被点击
-const expandedClick = (item) => {
-    emit('expandClick', {
-        node: item,
-        data: item.data
-    })
-}
-const ChildrenExpandedClick = ({node,data}) => {
-    emit('expandClick', {node,data})
-}
-
-
-//鼠标左键单击事件
-const nodeLabelClick = (item) => {
-    emit('nodeClick', {
-        node: item,
-        data: item.data
-    })
-}
-const ChildrenNodeLabelClick = ({node,data}) => {
-    emit('nodeClick', {node,data})
-}
-
-//双击事件
-const nodeLabelDblClick = (item) => {
-    emit('nodeDblClick', {
-        node: item,
-        data: item.data
-    })
-}
-const ChildrenNodeLabelDblClick = ({node,data}) => {
-    emit('nodeDblClick', {node,data})
-}
-
-//鼠标右键事件
-const nodeLabelContextMenu = (e,item) => {
-    const rows = menusData.value || [];
-    if (rows.length > 0) {
-        e.preventDefault();
-        menuRefItem.value = item;
-        if (menuMark.value) {
-            setMenuMarkVal(rows, item)
-        }
-        nextTick().then(() => {
-            showDropdown.value = true;
-            x.value = e.clientX;
-            y.value = e.clientY;
-        });
-    }
-}
-
-//设置菜单标记状态
-const setMenuMarkVal = (rows,item) => {
-    for (let i = 0; i < rows.length; i++) {
-        if (rows[i].key === 'mark' || rows[i].key === 'cancel_mark') {
-            if (item?.data?.isFirst) {
-                menusData.value[i].label = '取消标记为首件';
-                menusData.value[i].key = 'cancel_mark';
-                menusData.value[i].icon = hIconJs({
-                    name: 'grade', fill: true
-                });
-            } else {
-                menusData.value[i].label = '标记为首件';
-                menusData.value[i].key = 'mark';
-                menusData.value[i].icon = hIconJs({name: 'grade'});
-            }
-            break;
-        }
-    }
-}
-
-const onClickoutside = () => {
-    menuRefItem.value = null;
-    showDropdown.value = false;
-}
-
-//鼠标右键菜单被点击
-const handleMenuSelect = (key) => {
-    const item = menuRefItem.value;
-    showDropdown.value = false;
-    emit('menuClick', {
-        key,
-        node: item,
-        data: item.data
-    })
-}
-
-//菜单被点击
-const ChildrenCpoverMenuClick = ({key,node,data}) => {
-    emit('menuClick', {key,node,data})
-}
-</script>
-
-<style lang="scss" scoped>
-@import "style";
-</style>

src/components/data-fill/nodeTree/index.vue

@@ -1,221 +0,0 @@
-<template>
-    <div class="cu-tree-node-container" @mousewheel.prevent="treeNodeMousewheel">
-        <div class="cu-tree-node-box horizontal collapsable" :id="'tree-node-' + uuid" @mousedown="treeNodeMouseDown" :style="{zoom: zoomRef + '%'}" v-if="!!nodes.label">
-            <div class="cu-tree-node-view">
-                <div class="cu-tree-node-label">
-                    <div class="cu-tree-node-label-text">
-                        <div class="cu-tree-node-label-name" :id="`node-tree-${nodes.key}`">
-                            <el-button type="primary" hc-btn :loading="nodes.loading">{{nodes.label}}</el-button>
-                        </div>
-                    </div>
-                </div>
-                <TreeNodeChildren :data="nodes.childNodes" :format="format" :menus="menus" :parentNodes="nodes" :isMark="isMark" :isColor="TreeIsColor"
-                                  @expandClick="expandClick" @nodeClick="nodeLabelClick" @nodeDblClick="nodeLabelDblClick" @menuClick="poverMenuClick"/>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import {watch,ref,onMounted} from "vue";
-import TreeNodeChildren from "./children.vue";
-import {isType,utilsRandom} from "vue-utils-plus"
-
-const { isObject } = isType()
-const { getRandom } = utilsRandom()
-const props = defineProps({
-    data: {
-        type: Object,
-        default: () => ({})
-    },
-    format: {
-        type: Object,
-        default: () => ({
-            key: "key",
-            label: "label",
-            children: "children",
-        })
-    },
-    autoExpandKeys: {
-        type: Array,
-        default: () => ([])
-    },
-    menus: {
-        type: Array,
-        default: () => ([])
-    },
-    isMark: {
-        type: Boolean,
-        default: false
-    },
-    accordion: {
-        type: Boolean,
-        default: false
-    },
-    isColor: {
-        type: Boolean,
-        default: false
-    },
-})
-
-//初始数据
-const uuid = getRandom()
-const datas = ref(props.data)
-const nodes = ref({})
-const TreeExpandKey = ref(props.autoExpandKeys)
-const TreeIsColor = ref(props.isColor)
-
-//监听
-watch(() => [
-    props.data,
-    props.autoExpandKeys,
-    props.isColor,
-], ([val,expandKeys,isColor]) => {
-    TreeIsColor.value = isColor
-    if (isDataType(val)) {
-        datas.value = val
-        setDatasToNodes()
-    } else {
-        datas.value = {}
-        nodes.value = {}
-    }
-    TreeExpandKey.value = expandKeys
-    if (expandKeys?.length > 0) {
-        setTreeAutoExpandKey()
-    }
-})
-
-//渲染完成
-onMounted(()=> {
-    if (isDataType(props.data)) {
-        datas.value = props.data
-        setDatasToNodes()
-    } else {
-        datas.value = {}
-        nodes.value = {}
-    }
-    if (TreeExpandKey.value?.length > 0) {
-        setTreeAutoExpandKey()
-    }
-})
-
-//检查数据类型
-const isDataType = (data) => {
-    if (isObject(data)) {
-        return Object.keys(data).length !== 0;
-    } else {
-        return false
-    }
-}
-
-//处理为node节点类型的数据
-const setDatasToNodes = () => {
-    const {key,label,children} = props.format
-    const deepData = datas.value
-    let childNodes = deepData[children]
-    nodes.value = {
-        childNodes: childNodes,
-        childrenNodes: [],
-        data: deepData,
-        parentNodes: {},
-        expanded: deepData['expanded'] || false,
-        isExpand: deepData['isExpand'] || false,
-        isLeaf: deepData['isLeaf'] || false,
-        loading: deepData['loading'] || false,
-        key: deepData[key],
-        label: deepData[label]
-    }
-}
-
-//懒加载tree，自动展开上次记忆的节点
-const setTreeAutoExpandKey = () => {
-    const keys = TreeExpandKey.value || []
-    let num = 0, numMax = keys.length;
-    let timer = setInterval(() => {
-        if(num < numMax) {
-            document.getElementById(`node-tree-${keys[num]}`)?.click()
-            num++;
-        } else {
-            clearInterval(timer);
-        }
-    }, 800);
-}
-
-//放大缩小
-const zoomRef = ref(100)
-const treeNodeMousewheel = (event) => {
-    /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */
-    let zoom = parseInt(zoomRef.value + '') || 100
-    /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动 */
-    zoom += event.wheelDelta / 12
-    /* 最小范围 和 最大范围 的图片缩放尺度 */
-    if (zoom >= 10 && zoom < 200) {
-        zoomRef.value = zoom
-    }
-    return false
-}
-
-const isDown = ref(false)
-const treeNodeMouseDown = (event) => {
-    // 阻止默认事件和冒泡
-    event.preventDefault()
-    event.stopPropagation()
-    //获取相关dom元素
-    let dom = document.getElementById('tree-node-' + uuid)
-    //获取x坐标和y坐标
-    let clientX = event.clientX, clientY = event.clientY;
-
-    //获取左部和顶部的偏移量
-    let offsetLeft = dom.offsetLeft, offsetTop = dom.offsetTop;
-    //开关打开
-    isDown.value = true;
-
-    //设置样式
-    dom.style.cursor = 'move';
-
-    document.onmousemove = (e) => {
-        if (isDown.value === false) {
-            return;
-        }
-        //获取x和y
-        let nx = e.clientX;
-        let ny = e.clientY;
-        //计算移动后的左偏移量和顶部的偏移量
-        let nl = nx - (clientX - offsetLeft);
-        let nt = ny - (clientY - offsetTop);
-
-        dom.style.left = nl + 'px';
-        dom.style.top = nt + 'px';
-    }
-    document.onmouseup = () => {
-        //开关关闭
-        isDown.value = false;
-        dom.style.cursor = 'default';
-        document.onmousemove = null;
-        document.onmouseup = null;
-    }
-}
-
-
-const emit = defineEmits(['expand', 'nodeClick', 'nodeDblClick','menuClick']);
-
-const expandClick = (item) => {
-    emit('expand', item)
-}
-//鼠标左键单击事件
-const nodeLabelClick = (item) => {
-    emit('nodeClick', item)
-}
-//双击事件
-const nodeLabelDblClick = (item) => {
-    emit('nodeDblClick', item)
-}
-//菜单被点击
-const poverMenuClick = (item) => {
-    emit('menuClick', item)
-}
-</script>
-
-<style lang="scss">
-@import "style";
-</style>

src/components/data-fill/nodeTree/style.scss

@@ -1,210 +0,0 @@
-.cu-tree-node-container {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    .cu-tree-node-box {
-        display: table;
-        text-align: center;
-        &:before, &:after {
-            content: '';
-            display: table;
-        }
-        &:after {
-            clear: both;
-        }
-        &.horizontal {
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            transform: translate(-50%, -50%);
-        }
-        .cu-tree-node-view, .cu-tree-node-children {
-            position: relative;
-            margin: 0;
-            padding: 0;
-            list-style-type: none;
-            &:before, &:after {
-                transition: all .35s;
-            }
-        }
-        .cu-tree-node-view {
-            padding-top: 40px;
-            display: table-cell;
-            vertical-align: top;
-            &.is-leaf, &.collapsed {
-                padding-left: 10px;
-                padding-right: 10px;
-            }
-            &:before, &:after {
-                content: '';
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 50%;
-                height: 40px;
-            }
-            &:after {
-                left: 50%;
-                border-left: 1.5px solid #999999;
-            }
-            &:not(:first-child):before,
-            &:not(:last-child):after {
-                border-top: 1.5px solid #999999;
-            }
-            .cu-tree-node-label {
-                position: relative;
-                display: inline-block;
-                z-index: 20;
-                .cu-tree-node-label-text {
-                    position: relative;
-                    text-align: center;
-                    .cu-tree-node-label-name {
-                        white-space: nowrap;
-                        &:before {
-                            content: "";
-                            display: block;
-                            background: inherit;
-                            filter: blur(5px);
-                            position: absolute;
-                            width: 100%;
-                            height: 100%;
-                            top: 0;
-                            left: 0;
-                            z-index: -1;
-                            opacity: var(--ui-Shadow-opacity-lg);
-                            transform-origin: 0 0;
-                            border-radius: inherit;
-                            transform: scale(1);
-                        }
-                        .el-button[hc-btn] {
-                            box-shadow: 4px 4px 8px 0 rgb(54 92 167 / 15%);
-                        }
-                    }
-                }
-            }
-        }
-        .cu-tree-node-label-btn {
-            position: absolute;
-            top: 100%;
-            left: 50%;
-            width: 20px;
-            height: 20px;
-            z-index: 10;
-            background-color: #ffffff;
-            border: 1px solid #999999;
-            border-radius: 50%;
-            box-shadow: 0 0 2px rgba(0, 0, 0, .15);
-            cursor: pointer;
-            transition: all .35s ease;
-            &:hover {
-                background-color: #e7e8e9;
-                transform: scale(1.15);
-            }
-            &:before, &:after {
-                content: '';
-                position: absolute;
-            }
-            &:before {
-                top: 50%;
-                left: 4px;
-                right: 4px;
-                height: 0;
-                border-top: 1px solid #999999;
-            }
-            &:after {
-                top: 4px;
-                left: 50%;
-                bottom: 4px;
-                width: 0;
-                border-left: 1px solid #999999;
-            }
-            &.expanded:after {
-                border: none;
-            }
-        }
-        .cu-tree-node-children {
-            padding-top: 40px;
-            display: table;
-            &:before {
-                content: '';
-                position: absolute;
-                top: 0;
-                left: 50%;
-                width: 0;
-                height: 40px;
-                border-left: 1.5px solid #999999;
-            }
-            &:after {
-                content: '';
-                display: table;
-                clear: both;
-            }
-        }
-        &.horizontal {
-            .cu-tree-node-view {
-                display: table-cell;
-                float: none;
-                padding-top: 0;
-                padding-left: 40px;
-                &.is-leaf {
-                    padding-top: 10px;
-                    padding-bottom: 10px;
-                }
-                &:before, &:after {
-                    width: 40px;
-                    height: 50%;
-                }
-                &:after {
-                    top: 50%;
-                    left: 0;
-                    border-left: 0;
-                }
-                &:only-child:before {
-                    top: 1px;
-                    border-bottom: 1.5px solid #999999;
-                }
-                &:not(:first-child):before,
-                &:not(:last-child):after {
-                    border-top: 0;
-                    border-left: 1.5px solid #999999;
-                }
-                &:not(:only-child):after {
-                    border-top: 1.5px solid #999999;
-                }
-            }
-            .cu-tree-node-label {
-                display: table-cell;
-                vertical-align: middle;
-            }
-            & > .cu-tree-node-view:only-child:before {
-                border-bottom: 0;
-            }
-            .cu-tree-node-children {
-                display: table-cell;
-                padding-top: 0;
-                padding-left: 40px;
-                &:before {
-                    top: 50%;
-                    left: 0;
-                    width: 40px;
-                    height: 0;
-                    border-left: 0;
-                    border-top: 1.5px solid #999999;
-                }
-                &:after {
-                    display: none;
-                }
-                & > .cu-tree-node-view {
-                    display: block;
-                }
-            }
-            .cu-tree-node-label-btn {
-                top: 50%;
-                left: 100%;
-                margin-top: -10.1px;
-                margin-left: 10px;
-            }
-        }
-    }
-}

src/components/imgPreview/index.vue

@@ -14,41 +14,41 @@
             <div class="preview-tools-box">
                 <div class="preview-tools-flex">
                     <div v-if="srcs.length > 0" :class="isThumb?'cur':''" class="preview-tools-item" @click="thumbClick">
-                        <i class="_icon_thumbnail"/>
+                        <HcIcon name="art_track"/>
                     </div>
                     <div class="preview-tools-item" @click="leftRotationClick">
-                        <i class="_icon_left-rotation"/>
+                        <HcIcon name="rotate_90_degrees_ccw"/>
                     </div>
                     <div class="preview-tools-item" @click="rightRotationClick">
-                        <i class="_icon_right-rotation"/>
+                        <HcIcon name="rotate_90_degrees_cw"/>
                     </div>
                     <div class="preview-tools-item" @click="enlargeClick">
-                        <i class="_icon_magnify"/>
+                        <HcIcon name="add_circle"/>
                     </div>
                     <div class="preview-tools-item" @click="shrinkClick">
-                        <i class="_icon_decrease"/>
+                        <HcIcon name="do_not_disturb_on"/>
                     </div>
 
                     <div class="preview-tools-item" @click="scaleClick">
-                        <i class="_icon_scale"/>
+                        <HcIcon name="looks_one"/>
                     </div>
 
                     <div v-if="srcs.length > 0" class="preview-tools-item" @click="topClick">
-                        <i class="_icon_previous-page"/>
+                        <HcIcon name="arrow_back"/>
                     </div>
                     <div v-if="srcs.length > 0" class="preview-tools-item" @click="nextClick">
-                        <i class="_icon_next-page"/>
+                        <HcIcon name="arrow_forward"/>
                     </div>
                     <div v-if="enlarge" class="preview-tools-item">
                         <i class="_icon_enlarge"/>
                     </div>
 
                     <div v-for="item in tools" class="preview-tools-item" @click="toolsClick(item)">
-                        <i :class="item.icon"/>
+                        <HcIcon :name="item.icon"/>
                     </div>
 
                     <div class="preview-tools-item" v-if="!isDom" @click="closeClick">
-                        <i class="_icon-close"/>
+                        <HcIcon name="close"/>
                     </div>
                 </div>
             </div>

src/components/imgPreview/style.scss

@@ -67,7 +67,7 @@
                 border: 2px solid #005ea5;
             }
             &.cur {
-                border: 2px solid $blue;
+                border: 2px solid var(--el-color-primary);
             }
         }
         .cu-img-thumb-item + .cu-img-thumb-item {
@@ -84,10 +84,11 @@
         align-items: center;
         .preview-tools-box {
             position: relative;
-            background: $white;
+            background: #F5F6F8;
             display: inline-block;
-            padding: 5px 10px;
-            border-radius: 5px 5px 0 0;
+            border-radius: 6px;
+            padding: 0 5px;
+            user-select: none;
             .preview-tools-flex {
                 display: flex;
                 position: relative;
@@ -98,32 +99,15 @@
                     display: flex;
                     justify-content: center;
                     align-items: center;
-                    padding: 10px;
                     color: #8799a3;
                     cursor: pointer;
-                    border-radius: 5px;
+                    height: 36px;
+                    width: 36px;
+                    font-size: 22px;
                     transition: background-color, color 0.2s;
-
-                    i {
-                        font-size: 22px;
-                    }
-
                     &:hover, &.cur {
                         background-color: rgba(0, 129, 255, .1);
-                        color: $blue;
-                    }
-                }
-            }
-        }
-        &.cu-img-preview-tools-sm {
-            .preview-tools-box {
-                padding: 3px 10px;
-                border-radius: 3px 3px 0 0;
-                .preview-tools-item {
-                    padding: 5px;
-                    border-radius: 3px;
-                    i {
-                        font-size: 18px;
+                        color: var(--el-color-primary);
                     }
                 }
             }
@@ -135,7 +119,10 @@
         left: initial;
         z-index: initial;
         border-radius: 5px;
-        background: rgba(0, 0, 0, .2);
+        background: #ffffff;
+        box-shadow: 0 0 6px 0 rgba(0,0,0,0.10);
+        display: flex;
+        flex-direction: column;
         .cu-img-preview-box {
             height: 100%;
             top: 0;
@@ -150,7 +137,7 @@
         }
         .cu-img-preview-tools-box {
             position: relative;
-            margin-top: 15px;
+            margin: 16px 0;
         }
     }
 }

src/global/components/hc-drag-modal/index.vue

@@ -0,0 +1,160 @@
+<template>
+    <div class="ui-drag-modal-box-hide" v-if="isBody">
+        <Teleport to="#app">
+            <div class="ui-drag-modal-box" :class="[isModalShow?'ui-drag-modal-show':'']" :id="'drag-modal-' + uuid"
+                 :style="{left: dragModalLeft + 'px', top: dragModalTop + 'px'}">
+                <div class="ui-drag-modal-dialog shadow-xl" :class="[bg,ui]" :style="{width: widthVal + 'px', height: heightVal + 'px'}">
+                    <div class="ui-drag-modal-dialog-header" :class="titleBorder?'border-bottom':''">
+                        <div class="ui-drag-modal-dialog-title text-lg" :class="titleUi" @mousedown="dragModalMouseDown">
+                            <span v-if="title">{{title}}</span>
+                        </div>
+                        <div class="ui-drag-modal-dialog-close" v-if="closeIcon" @click="_closeClick()">
+                            <HcIcon name="close"/>
+                        </div>
+                    </div>
+                    <div class="ui-drag-modal-dialog-body">
+                        <slot></slot>
+                    </div>
+                    <span class="ui-drag-modal-resize" @mousedown="dragModalResizeMouseDown"/>
+                </div>
+            </div>
+        </Teleport>
+    </div>
+</template>
+
+<script setup>
+import { ref,nextTick,watch } from "vue"
+import { getRandom } from "vue-utils-plus"
+//参数
+const props = defineProps({
+    ui: {
+        type: String,
+        default: ''
+    },
+    bg: {
+        type: String,
+        default: ''
+    },
+    widths: {
+        type: [Number,String],
+        default: 340
+    },
+    title: {
+        type: String,
+        default: ''
+    },
+    titleUi: {
+        type: [String,Object,Array],
+        default: ''
+    },
+    titleBorder: {
+        type: Boolean,
+        default: false
+    },
+    closeIcon: {
+        type: Boolean,
+        default: false
+    },
+    isShow: {
+        type: Boolean,
+        default: false
+    },
+    lefts: {
+        type: [Number,String],
+        default: 0
+    },
+    tops: {
+        type: [Number,String],
+        default: 0
+    },
+})
+
+//变量
+const uuid = getRandom()
+const isBody = ref(false)
+const isModalShow = ref(props.isShow)
+const dragModalLeft = ref(parseInt(props.lefts + ''))
+const dragModalTop = ref(parseInt(props.tops + ''))
+const widthVal = ref(parseInt(props.widths + ''))
+const heightVal = ref(440)
+
+//监听
+watch(() => props.isShow, (isShow) => {
+    isModalShow.value = isShow;
+})
+
+//
+nextTick(()=> {
+    //页面渲染完成后，再让 vue3 的 Teleport，把弹出框挂载到外部节点上。
+    isBody.value = true
+})
+
+//弹窗拖动
+const dragModalMouseDown = (event) => {
+    // 阻止默认事件和冒泡
+    event.preventDefault()
+    event.stopPropagation()
+    //获取相关dom元素
+    let body = document.body, dom = document.getElementById('drag-modal-' + uuid)
+    // 鼠标按下，计算当前元素距离可视区的距离
+    const disX = event.clientX - dom.offsetLeft, disY = event.clientY - dom.offsetTop
+    document.onmousemove = (ve) => {
+        // 通过事件委托，计算移动的距离
+        let left = ve.clientX - disX, top = ve.clientY - disY
+        // 判断是否超出可视区
+        if (left < 0) left = 0
+        if (left > body.clientWidth - dom.clientWidth) {
+            left = body.clientWidth - dom.clientWidth
+        }
+
+        if (top < 0) top = 0
+        if (top > body.clientHeight - dom.clientHeight) {
+            top = body.clientHeight - dom.clientHeight
+        }
+        // 移动当前元素
+        dragModalLeft.value = left
+        dragModalTop.value = top
+    }
+    document.onmouseup = () => {
+        document.onmousemove = null;
+        document.onmouseup = null;
+    }
+}
+
+//弹窗改变宽高
+const dragModalResizeMouseDown = (event) => {
+    // 阻止默认事件和冒泡
+    event.preventDefault()
+    event.stopPropagation()
+    //获取相关dom元素
+    let dom = document.getElementById('drag-modal-' + uuid)
+    let clientX = event.clientX, clientY = event.clientY;
+    let offsetWidth = dom.offsetWidth, clientHeight = dom.clientHeight;
+    document.onmousemove = (e) => {
+        widthVal.value = e.clientX - clientX + offsetWidth
+        heightVal.value = e.clientY - clientY + clientHeight
+    }
+    document.onmouseup = () => {
+        document.onmousemove = null;
+        document.onmouseup = null;
+    }
+}
+
+
+//事件
+const emit = defineEmits(['close'])
+const show = () => {
+    isModalShow.value = true;
+}
+const hide = () => {
+    isModalShow.value = false;
+}
+const _closeClick = () => {
+    hide();
+    emit('close', false)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './modal.scss';
+</style>

src/global/components/hc-drag-modal/modal.scss

@@ -0,0 +1,61 @@
+.ui-drag-modal-box-hide {
+    display: none;
+}
+.ui-drag-modal-box {
+    position: fixed;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    z-index: -1024;
+    transition: opacity 0.3s, z-index 0.3s;
+    .ui-drag-modal-dialog {
+        position: relative;
+        min-width: 340px;
+        min-height: 380px;
+        display: inline-block;
+        border-radius: 5px;
+        z-index: 8001;
+        background: #f5f6f8;
+        box-shadow: 0 16px 24px 0 rgba(26,26,26,0.12), 0 2px 12px 0 rgba(26,26,26,0.10);
+        .ui-drag-modal-dialog-header {
+            position: relative;
+            display: flex;
+            align-items: center;
+            .ui-drag-modal-dialog-title {
+                flex: 1;
+                cursor: all-scroll;
+                user-select: none;
+                padding: 15px 14px 2px;
+            }
+            .ui-drag-modal-dialog-close {
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+                cursor: pointer;
+                margin-right: 15px;
+                font-size: 20px;
+                transition: opacity 0.3s;
+                &:hover {
+                    opacity: .6;
+                }
+            }
+        }
+        .ui-drag-modal-dialog-body {
+            position: relative;
+            height: calc(100% - 58px);
+            padding: 14px;
+        }
+        .ui-drag-modal-resize {
+            position: absolute;
+            width: 15px;
+            height: 15px;
+            right: 0;
+            bottom: 0;
+            cursor: se-resize;
+        }
+    }
+    &.ui-drag-modal-show {
+        opacity: 1;
+        z-index: 8000;
+    }
+}

src/global/components/index.js

@@ -5,6 +5,7 @@ import HcPages from './hc-page/index.vue'
 import HcMenuSimple from './hc-menu-simple/index.vue'
 import HcDatePicker from './hc-date-picker/index.vue'
 import HcNewSwitch from './hc-new-switch/index.vue'
+import HcDragModal from './hc-drag-modal/index.vue'
 
 //注册全局组件
 export const setupComponents = (App) => {
@@ -15,4 +16,5 @@ export const setupComponents = (App) => {
     App.component('HcMenuSimple', HcMenuSimple)
     App.component('HcDatePicker', HcDatePicker)
     App.component('HcNewSwitch', HcNewSwitch)
+    App.component('HcDragModal', HcDragModal)
 }

src/layout/modules/HelpInfoBar.vue

@@ -36,20 +36,17 @@
 </template>
 
 <script setup>
-import {ref,watch,nextTick} from "vue";
-import {useRouter,useRoute} from 'vue-router'
-import website from '~src/config/index'
-import {useAppStore} from "~src/store/index";
+import { ref,watch,nextTick } from "vue";
+import { useRouter,useRoute } from 'vue-router'
+import { useAppStore } from "~src/store/index";
 import ScreenShot from "js-web-screen-shot";
-import {isType,utilsArray,utilsStore} from "vue-utils-plus"
+import { getStoreData }  from '~src/utils/storage'
+import { getOneObjValue, getObjValue } from "vue-utils-plus"
 
 //初始变量
 const router = useRouter()
 const useRoutes = useRoute()
 const useAppState = useAppStore()
-const {getStoreData} = utilsStore(website.key)
-const {getOneObjValue} = utilsArray()
-const {getObjValue} = isType()
 
 //相关变量
 const route = getObjValue(getStoreData('route'))

src/router/index.js

@@ -3,13 +3,10 @@ import baseData from "./modules/base";
 import config from '~src/config/index'
 import authStore from '~src/api/util/auth'
 import {getRouterData} from './routers'
-import {utilsArray} from "vue-utils-plus"
+import {isItem} from "vue-utils-plus"
 import NProgress from "nprogress";
 import "~src/styles/app/nprogress.scss";
 
-//初始变量
-const { isItem } = utilsArray()
-
 //设置路由数据
 const router = vueRouter.createRouter({
     history: vueRouter.createWebHashHistory(),

src/router/routers.js

@@ -1,15 +1,12 @@
 import pinia from "~src/store/init"
 import {getRoutes} from '~api/menu';
-import tokenData  from "./modules/token";
-import website from '~src/config/index'
+import tokenData from "./modules/token";
 import {useAppStore} from "~src/store/index";
-import {utilsStore, utilsArray, isType} from "vue-utils-plus"
+import { getStoreData, setStoreData }  from '~src/utils/storage'
+import { getArrValue, getObjNullValue, ArrToOneObj } from "vue-utils-plus"
 
 //变量初始化
 const userStore = useAppStore(pinia)
-const { getStoreData, setStoreData } = utilsStore(website.key)
-const { getArrValue, getObjNullValue } = isType()
-const { ArrToOneObj } = utilsArray()
 
 //获取路由菜单
 export const getRouterData = async () => {

src/store/index.js

@@ -1,10 +1,8 @@
-import {defineStore} from 'pinia'
+import { defineStore } from 'pinia'
 import pinia from "~src/store/init"
-import website from '~src/config/index'
 import appConfig from '~src/config/app';
 import authStore from '~src/api/util/auth'
-import { utilsStore } from "vue-utils-plus"
-const { getStoreData, setStoreData, clearStoreAll } = utilsStore(website.key)
+import { getStoreData, setStoreData, clearStoreAll }  from '~src/utils/storage'
 
 export const useAppStore = defineStore('main', {
     state: () =>({

src/store/modules/app.js

@@ -1,14 +1,11 @@
 import pinia from "~src/store/init"
-import {useAppStore} from "~src/store/index";
-import {getButtons} from '~api/menu';
-import {getProjectAndContract} from '~api/user';
-import website from '~src/config/index'
-import {utilsStore,utilsArray,isType} from "vue-utils-plus"
+import { useAppStore } from "~src/store/index";
+import { getButtons } from '~api/menu';
+import { getProjectAndContract } from '~api/user';
+import { getStoreData }  from '~src/utils/storage'
+import { ArrToOneObj, getArrValue } from "vue-utils-plus"
 
 const store = useAppStore(pinia)
-const { getStoreData } = utilsStore(website.key)
-const { ArrToOneObj } = utilsArray()
-const { getArrValue } = isType()
 
 //项目合同段初始化
 export const initProjectContract = async () => {

src/store/modules/user.js

@@ -4,12 +4,10 @@ import {useAppStore} from "~src/store/index";
 import {userLogin,refreshToken,logout} from '~api/user';
 import {userConfigInfo, userConfigSave} from "~api/other";
 import themeData from '~src/config/theme';
-import {utilsArray,isType} from "vue-utils-plus"
+import {getIndex, getObjValue} from "vue-utils-plus"
 import {useOsTheme} from 'vooks'
 
 const store = useAppStore(pinia)
-const { getIndex } = utilsArray()
-const { getObjValue } = isType()
 
 //登录
 export const useAppLogin = async (form) => {

src/utils/storage.js

@@ -0,0 +1,4 @@
+import website from '~src/config/index'
+import { utilsStore } from "vue-utils-plus";
+const { getStoreData, setStoreData, delStoreData, clearStoreAll } = utilsStore(website.key)
+export { getStoreData, setStoreData, delStoreData, clearStoreAll }

src/views/data-fill/components/WbsTree.vue

@@ -26,12 +26,9 @@
 import {ref,nextTick,watch} from "vue";
 import {hIconJs} from "~src/plugins/renderele";
 import dataFillQuery from '~api/data-fill/query';
-import {utilsArray} from "vue-utils-plus"
+import {isItem} from "vue-utils-plus"
 import {NDropdown} from 'naive-ui';
 
-//初始变量
-const { isItem } = utilsArray()
-
 //参数
 const props = defineProps({
     menus: {

src/views/data-fill/components/nodeTree/children.vue

@@ -24,9 +24,8 @@
 import {ref,watch,onMounted,nextTick} from "vue";
 import TreeNodeChildren from "./children.vue"
 import {hIconJs} from "~src/plugins/renderele";
-import {isType} from "vue-utils-plus"
-import { NDropdown } from 'naive-ui';
-const { isObject, isBoolean } = isType()
+import {isObject,isBoolean} from "vue-utils-plus"
+import {NDropdown} from 'naive-ui';
 const props = defineProps({
     data: {
         type: Array,

src/views/data-fill/components/nodeTree/index.vue

@@ -19,11 +19,8 @@
 import {watch,ref,onMounted,nextTick} from "vue";
 import wbsApi from "~api/data-fill/wbs"
 import TreeNodeChildren from "./children.vue";
-import {isType, utilsArray, utilsRandom} from "vue-utils-plus"
-//初始变量
+import {isType, getRandom, isItem} from "vue-utils-plus"
 const {getObjValue,getArrValue} = isType()
-const {getRandom} = utilsRandom()
-const {isItem} = utilsArray()
 //参数
 const props = defineProps({
     autoExpandKeys: {

src/views/data-fill/wbs.vue

@@ -76,12 +76,12 @@
                             <span>保存</span>
                         </el-button>
                         <el-button hc-btn>
-                            <HcIcon name="e911_emergency"/>
-                            <span>预览</span>
+                            <HcIcon name="drive_folder_upload"/>
+                            <span>上报</span>
                         </el-button>
                         <el-button hc-btn>
-                            <HcIcon name="engineering"/>
-                            <span>上报</span>
+                            <HcIcon name="visibility"/>
+                            <span>预览</span>
                         </el-button>
                     </template>
                 </HcCard>
@@ -93,6 +93,12 @@
                 <div id="upload-drawing">上传图纸</div>
             </el-upload>
         </div>
+        <!--查看图纸-->
+        <HcDragModal title="查看图纸" :isShow="drawingsShow" closeIcon tops="100" lefts="145" widths="380px" @close="drawingsClose">
+            <div class="img-preview-box">
+                <ImgPreview :src="nodeDataInfo.fileUrl" isDom toolsSm/>
+            </div>
+        </HcDragModal>
         <!--编辑节点-->
         <el-dialog v-model="editNodeModal" title="编辑节点" width="600px" custom-class="hc-modal-border">
             <el-form ref="formEditNodeRef" :model="formEditNodeModel" :rules="formEditNodeRules" label-width="auto" size="large">
@@ -132,9 +138,9 @@ import {hIconJs} from "~src/plugins/renderele";
 import HcTabs from "~com/plugins/naive/HcTabs.vue"
 import HcTree from "~com/plugins/element/HcTree.vue"
 import BtnTab from "~com/btnTab/index.vue"
-import ListItem from "~com/data-fill/ListItem.vue"
+//import ListItem from "~com/data-fill/ListItem.vue"
 import NodeTree from "./components/nodeTree/index.vue"
-import DragModal from "~com/dragModal/index.vue"
+//import DragModal from "~com/dragModal/index.vue"
 import ImgPreview from "~com/imgPreview/index.vue"
 import HcReportModal from "~com/reportModal/index.vue"
 import HcTreeNode from "./components/HcTreeNode.vue"
@@ -143,16 +149,14 @@ import wbsApi from "~api/data-fill/wbs"
 import {deepClone} from "~src/utils/lib/util";
 import {getTokenHeader} from '~src/api/request/header';
 import {isArray,isObjNull} from "~src/utils/lib/isApp";
-import {isType, utilsStore} from "vue-utils-plus"
-import {formValidate} from "~src/utils/tools";
+import { getStoreData, setStoreData }  from '~src/utils/storage'
+import {getObjValue, getArrValue, formValidate} from "vue-utils-plus"
 import Draggable from "vuedraggable";
 import md5 from "js-md5";
 
 //初始变量
 const useRoutes = useRoute()
 const useAppState = useAppStore()
-const {getStoreData, setStoreData} = utilsStore(website.key)
-const {getObjValue, getArrValue} = isType()
 
 //全局变量
 const projectId = ref(useAppState.getProjectId);
@@ -980,11 +984,5 @@ html.theme-dark {
     position: relative;
     height: 100%;
     width: 100%;
-    .cu-img-preview.cu-img-preview-dom .cu-img-preview-box {
-        height: calc(100% - 60px);
-    }
-    .cu-img-preview.cu-img-preview-dom .cu-img-preview-tools-box{
-        position: absolute;
-    }
 }
 </style>

src/views/home/config.vue

@@ -95,7 +95,7 @@
 
 <script setup>
 import {ref,watch,nextTick} from "vue";
-import { useRouter, useRoute } from 'vue-router'
+import {useRouter, useRoute} from 'vue-router'
 import {useAppStore} from "~src/store/index";
 import themeData from '~src/config/theme';
 import {userConfigSave} from "~api/other";

src/views/other/order-service.vue

@@ -176,13 +176,10 @@ import {getTokenHeader} from '~src/api/request/header';
 import avatarPng from '~src/assets/images/avatar.png';
 import Web515Png from '~src/assets/images/Web515.png';
 import {userConfigSave} from "~api/other";
-import {isType, utilsFile, utilsArray} from "vue-utils-plus"
+import {isArray, isSize, base64ToFile, getIndex} from "vue-utils-plus"
 import oss from "~api/oss";
 
 //初始变量
-const { isArray } = isType()
-const { isSize, base64ToFile } = utilsFile()
-const { getIndex } = utilsArray()
 const useAppState = useAppStore()
 const projectId = ref(useAppState.getProjectId);
 const contractId = ref(useAppState.getContractId);

src/views/user/index.vue

@@ -194,14 +194,13 @@ import {useAppStore} from "~src/store/index";
 import avatarPng from '~src/assets/images/avatar.png';
 import {getTokenHeader} from '~src/api/request/header';
 import userApi from "~api/userInfo/index"
-import {utilsArray} from "vue-utils-plus"
+import {getIndex} from "vue-utils-plus"
 import md5 from 'js-md5';
 
 //初始变量
 const router = useRouter()
 const useRoutes = useRoute()
 const useAppState = useAppStore()
-const { getIndex } = utilsArray()
 
 //全局变量信息
 const userInfo = ref(useAppState.getUserInfo);

yarn.lock

@@ -110,10 +110,10 @@
   resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz#94e175b53623384bff1f354cdb3197a8d63cdbe5"
   integrity sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A==
 
-"@vitejs/plugin-vue@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-3.0.1.tgz#b6af8f782485374bbb5fe09edf067a845bf4caae"
-  integrity sha512-Ll9JgxG7ONIz/XZv3dssfoMUDu9qAnlJ+km+pBA0teYSXzwPCIzS/e1bmwNYl5dcQGs677D21amgfYAnzMl17A==
+"@vitejs/plugin-vue@^3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-3.0.3.tgz#7e3e401ccb30b4380d2279d9849281413f1791ef"
+  integrity sha512-U4zNBlz9mg+TA+i+5QPc3N5lQvdUXENZLO2h0Wdzp56gI1MWhqJOv+6R+d4kOzoaSSq6TnGPBdZAXKOe4lXy6g==
 
 "@vue/compiler-core@3.2.37":
   version "3.2.37"
@@ -475,10 +475,10 @@ electron-to-chromium@^1.4.202:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.206.tgz#580ff85b54d7ec0c05f20b1e37ea0becdd7b0ee4"
   integrity sha512-h+Fadt1gIaQ06JaIiyqPsBjJ08fV5Q7md+V8bUvQW/9OvXfL2LRICTz2EcnnCP7QzrFTS6/27MRV6Bl9Yn97zA==
 
-element-plus@^2.2.12:
-  version "2.2.12"
-  resolved "https://registry.yarnpkg.com/element-plus/-/element-plus-2.2.12.tgz#b6c4e298e02ba9b904d70daa54def27b2de8c43c"
-  integrity sha512-g/hIHj3b+dND2R3YRvyvCJtJhQvR7lWvXqhJaoxaQmajjNWedoe4rttxG26fOSv9YCC2wN4iFDcJHs70YFNgrA==
+element-plus@^2.2.13:
+  version "2.2.13"
+  resolved "https://registry.yarnpkg.com/element-plus/-/element-plus-2.2.13.tgz#9ec3a9fa6587c93a87bb0d30c200ac8ee4f69c8b"
+  integrity sha512-dKQ7BPZC8deUPhv+6s4GgOL0GyGj3KpUarywxm6s1nWnHjH6FqeZlUcxPqBvJd7W/d81POayx3B13GP+rfkG9g==
   dependencies:
     "@ctrl/tinycolor" "^3.4.1"
     "@element-plus/icons-vue" "^2.0.6"
@@ -1111,10 +1111,10 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-rollup@^2.75.6:
-  version "2.77.2"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.77.2.tgz#6b6075c55f9cc2040a5912e6e062151e42e2c4e3"
-  integrity sha512-m/4YzYgLcpMQbxX3NmAqDvwLATZzxt8bIegO78FZLl+lAgKJBd1DRAOeEiZcKOIOPjxE6ewHWHNgGEalFXuz1g==
+"rollup@>=2.75.6 <2.77.0 || ~2.77.0":
+  version "2.77.3"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.77.3.tgz#8f00418d3a2740036e15deb653bed1a90ee0cc12"
+  integrity sha512-/qxNTG7FbmefJWoeeYJFbHehJ2HNWnjkAFRKzWN/45eNBBF/r8lo992CwcJXEzyVxs5FmfId+vTSTQDb+bxA+g==
   optionalDependencies:
     fsevents "~2.3.2"
 
@@ -1324,15 +1324,15 @@ vfonts@^0.0.3:
   resolved "https://registry.yarnpkg.com/vfonts/-/vfonts-0.0.3.tgz#999d66fecea18efee3f2b966c81101ae8ce01a29"
   integrity sha512-nguyw8L6Un8eelg1vQ31vIU2ESxqid7EYmy8V+MDeMaHBqaRSkg3dTBToC1PR00D89UzS/SLkfYPnx0Wf23IQQ==
 
-vite@^3.0.5:
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-3.0.5.tgz#56b8d52e00bbbd5f21d02f0868dc613b3246ecc6"
-  integrity sha512-bRvrt9Tw8EGW4jj64aYFTnVg134E8hgDxyl/eEHnxiGqYk7/pTPss6CWlurqPOUzqvEoZkZ58Ws+Iu8MB87iMA==
+vite@^3.0.7:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-3.0.7.tgz#f1e379857e9c5d652126f8b20d371e1365eb700f"
+  integrity sha512-dILhvKba1mbP1wCezVQx/qhEK7/+jVn9ciadEcyKMMhZpsuAi/eWZfJRMkmYlkSFG7Qq9NvJbgFq4XOBxugJsA==
   dependencies:
     esbuild "^0.14.47"
     postcss "^8.4.16"
     resolve "^1.22.1"
-    rollup "^2.75.6"
+    rollup ">=2.75.6 <2.77.0 || ~2.77.0"
   optionalDependencies:
     fsevents "~2.3.2"
 
@@ -1355,10 +1355,10 @@ vue-router@^4.1.3:
   dependencies:
     "@vue/devtools-api" "^6.1.4"
 
-vue-utils-plus@^0.0.63:
-  version "0.0.63"
-  resolved "https://registry.yarnpkg.com/vue-utils-plus/-/vue-utils-plus-0.0.63.tgz#e3bb0bd6ba41a893d9f02a8db8c7c203a51c0ebf"
-  integrity sha512-R9r8q44O3Ij+MouapUDHl6ZfH4TJZDfAd63GJ96oiHaYq77Pbc9DzEqm1IcK4jQ/b//siyOaW2JIrXYpxod/NQ==
+vue-utils-plus@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/vue-utils-plus/-/vue-utils-plus-1.0.0.tgz#4fd9a678e608c9ed67b18a8b04409e56be94de5a"
+  integrity sha512-n7gBvB+UBv4wanX/Mtizb3zXIg/mzxC2AFzL+xv/TSC2msU2Z+QOahLChV3ljZiZ3yqmd4zgh9cAnr8sovwjjg==
 
 vue@^3.2.37:
   version "3.2.37"