更换组件

package.json

@@ -8,35 +8,36 @@
         "node:build": "node ./scripts/build.js && vite build && node ./scripts/restore.js && node ./scripts/zip.js"
     },
     "dependencies": {
-        "axios": "^1.3.6",
+        "axios": "^1.4.0",
         "crypto-js": "^4.1.1",
         "dayjs": "^1.11.7",
         "echarts": "^5.4.2",
         "element-plus": "2.3.4",
+        "hc-vue3-ui": "^1.1.6",
         "js-base64": "^3.7.5",
         "js-cookie": "^3.0.5",
         "js-fast-way": "^0.1.0",
         "js-md5": "^0.7.3",
-        "js-web-screen-shot": "^1.9.5",
+        "js-web-screen-shot": "^1.9.7-rc.1",
         "nprogress": "^0.2.0",
-        "pinia": "^2.0.35",
-        "remixicon": "^3.1.1",
+        "pinia": "^2.1.1",
+        "remixicon": "^3.3.0",
         "split.js": "^1.6.5",
-        "vue": "^3.2.47",
-        "vue-router": "^4.1.6",
+        "vue": "^3.3.4",
+        "vue-router": "^4.2.0",
         "vuedraggable": "^4.1.0"
     },
     "devDependencies": {
-        "@vitejs/plugin-vue": "^4.2.1",
-        "@vue/compiler-sfc": "^3.2.47",
+        "@vitejs/plugin-vue": "^4.2.3",
+        "@vue/compiler-sfc": "^3.3.4",
         "archiver": "^5.3.1",
         "autoprefixer": "^10.4.14",
         "postcss": "^8.4.23",
         "sass": "^1.62.1",
         "tailwindcss": "3.3.2",
-        "unplugin-auto-import": "^0.15.2",
+        "unplugin-auto-import": "^0.16.0",
         "unplugin-vue-components": "^0.24.1",
-        "vite": "^4.3.2",
+        "vite": "^4.3.8",
         "z-element-plus": "^1.1.3",
         "z-vfonts": "^0.0.1"
     }

src/App.vue

@@ -1,14 +1,13 @@
 <template>
-    <AppConfig>
+    <HcAppConfig>
         <router-view/>
-    </AppConfig>
+    </HcAppConfig>
 </template>
 
 <script setup>
 import {nextTick, ref, watch} from "vue";
 import {useAppStore} from "~src/store";
-import AppConfig from "~com/AppConfig/index.vue";
-import {useOsTheme} from '~src/plugins/useOsTheme';
+import {useOsTheme} from 'hc-vue3-ui'
 import {setElementMainColor, ulog, getObjValue} from "js-fast-way"
 import config from '~src/config/index';
 
@@ -45,7 +44,7 @@ const setUserTheme = (theme, appColor) => {
     //设置主题
     let val = UserTheme.value
     if (val === 'auto') {
-        theme = useOsTheme().value;
+        theme = useOsTheme();
     }
     if (theme === '') {
         theme = val;

src/components/AppConfig/index.vue

@@ -1,30 +0,0 @@
-<template>
-    <slot></slot>
-</template>
-
-<script setup>
-import { onMounted } from 'vue';
-import {ElMessage, ElLoading, ElNotification, ElMessageBox} from 'element-plus'
-import {HcLog} from '~uti/tools'
-
-//获取系统平台
-const userAgent = navigator.userAgent
-const isWin = userAgent.indexOf("Win") !== -1;
-const isMac = userAgent.indexOf("Mac") !== -1;
-
-onMounted(() => {
-    // 将ui的函数挂载在windows对象上
-    window['$loading'] = ElLoading;
-    window['$messageBox'] = ElMessageBox;
-    window['$message'] = ElMessage;
-    window['$notification'] = ElNotification;
-
-    //扩展方法函数
-    window['$HcLog'] = HcLog;
-
-    //检测系统平台
-    window['isWin'] = isWin
-    window['isMac'] = isMac
-    window['isCtrl'] = isMac ? 'Meta' : 'Control';
-})
-</script>

src/components/drag-node/index.vue

@@ -1,255 +0,0 @@
-<template>
-    <div class="hc-drag-node-box">
-        <div class="hc-drag-node-mousewheel" @mousewheel="dragNodeMousewheel">
-            <div :id="'drag-node-' + uuid" :style="{zoom: zoomRef + '%'}" class="hc-drag-node-content"
-                 @mousedown="dragNodeMouseDown">
-                <slot></slot>
-            </div>
-        </div>
-        <div class="hc-drag-node-tools">
-            <div class="hc-drag-node__actions__inner">
-                <el-tooltip content="放大" placement="top" popper-class="z-9999">
-                    <div class="icon-view" @click="enlargeClick">
-                        <HcIcon name="add-circle"/>
-                    </div>
-                </el-tooltip>
-                <el-tooltip content="缩小" placement="top" popper-class="z-9999">
-                    <div class="icon-view" @click="shrinkClick">
-                        <HcIcon name="indeterminate-circle"/>
-                    </div>
-                </el-tooltip>
-                <el-tooltip :content="scaleType === 'mouse'?'切换为手动缩放模式':'切换为滚轮缩放模式'"
-                            placement="top" popper-class="z-9999">
-                    <div class="icon-view" @click="scaleTypeClick">
-                        <HcIcon v-if="scaleType === 'mouse'" name="navigation"/>
-                        <HcIcon v-else name="mouse"/>
-                    </div>
-                </el-tooltip>
-                <div :class="moreMenus.length > 0 ? 'is-border':''" class="icon-view-more">
-                    <template v-for="item in moreMenus" :key="item.key">
-                        <el-tooltip v-if="item.name" :content="item.name" placement="top" popper-class="z-9999">
-                            <div class="icon-view" @click="moreMenusClick(item)">
-                                <HcIcon :name="item.icon"/>
-                            </div>
-                        </el-tooltip>
-                        <div v-else class="icon-view" @click="moreMenusClick(item)">
-                            <HcIcon :name="item.icon"/>
-                        </div>
-                    </template>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import {ref, watch} from "vue"
-import {getRandom} from "js-fast-way"
-
-//初始
-const props = defineProps({
-    moreMenu: {
-        type: Array,
-        default: () => ([])
-    }
-})
-
-//变量
-const uuid = getRandom()
-const moreMenus = ref(props.moreMenu)
-
-//监听
-watch(() => [
-    props.moreMenu,
-], ([menu]) => {
-    moreMenus.value = menu
-})
-
-//事件
-const emit = defineEmits(['menuTap'])
-
-//菜单被点击
-const moreMenusClick = (item) => {
-    emit('menuTap', item)
-}
-
-//缩放模式
-const scaleType = ref('mouse')
-const scaleTypeClick = () => {
-    scaleType.value = scaleType.value === 'mouse' ? 'navigation' : 'mouse'
-}
-
-const zoomRef = ref(100)
-
-//放大
-const enlargeClick = () => {
-    // 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小
-    let zoom = parseInt(zoomRef.value + '') || 100
-    zoom += 10
-    // 最小范围 和 最大范围 的图片缩放尺度
-    if (zoom >= 40 && zoom < 300) {
-        zoomRef.value = zoom
-    }
-}
-
-//缩小
-const shrinkClick = () => {
-    // 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小
-    let zoom = parseInt(zoomRef.value + '') || 100
-    zoom -= 10
-    // 最小范围 和 最大范围 的图片缩放尺度
-    if (zoom >= 40 && zoom < 300) {
-        zoomRef.value = zoom
-    }
-}
-
-//滚轮放大缩小
-const dragNodeMousewheel = (event) => {
-    if (scaleType.value === 'mouse') {
-        // 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小
-        let zoom = parseInt(zoomRef.value + '') || 100
-        // event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动
-        zoom += event.wheelDelta / 12
-        // 最小范围 和 最大范围 的图片缩放尺度
-        if (zoom >= 40 && zoom < 300) {
-            zoomRef.value = zoom
-        }
-        return false
-    }
-}
-
-//拖动
-const isDown = ref(false)
-const dragNodeMouseDown = (event) => {
-    // 阻止默认事件和冒泡
-    //event.preventDefault()
-    event.stopPropagation()
-    //获取相关dom元素
-    let dom = document.getElementById('drag-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;
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-.hc-drag-node-box {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    border-radius: 5px;
-    background-color: #c4c4c4;
-    .hc-drag-node-mousewheel {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        overflow: auto;
-        /* 滚动条的宽度 */
-        &::-webkit-scrollbar {
-            width: 0;
-            height: 0;
-        }
-        .hc-drag-node-content {
-            display: table;
-            text-align: center;
-            position: absolute;
-            left: 50%;
-            transform: translate(-50%, 0);
-        }
-    }
-    .hc-drag-node-tools {
-        position: absolute;
-        z-index: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        opacity: 0.8;
-        cursor: default;
-        box-sizing: border-box;
-        user-select: none;
-        left: 50%;
-        bottom: 10px;
-        transform: translate(-50%);
-        height: 44px;
-        background-color: #606266;
-        padding: 0 23px;
-        border-color: rgb(255, 255, 255);
-        border-radius: 22px;
-        .hc-drag-node__actions__inner {
-            width: 100%;
-            height: 100%;
-            text-align: justify;
-            cursor: default;
-            font-size: 23px;
-            color: rgb(255, 255, 255);
-            display: flex;
-            align-items: center;
-            justify-content: space-around;
-            .icon-view {
-                font-size: inherit;
-                cursor: pointer;
-                height: 1em;
-                width: 1em;
-                line-height: 1em;
-                display: inline-flex;
-                justify-content: center;
-                align-items: center;
-                position: relative;
-                fill: currentcolor;
-                color: inherit;
-                border-radius: 3px;
-                margin: 0 8px;
-                transition: color .2s, background-color .2s;
-                &:hover {
-                    color: var(--el-color-primary);
-                    background-color: white;
-                }
-            }
-            .icon-view-more {
-                position: relative;
-                display: inline-flex;
-                justify-content: center;
-                align-items: center;
-                font-size: inherit;
-                height: 1em;
-                fill: currentcolor;
-                color: inherit;
-                &.is-border {
-                    padding-left: 10px;
-                    margin-left: 10px;
-                    border-left: 1px solid #a7a7a7;
-                }
-            }
-        }
-    }
-}
-</style>

src/global/components/hc-auto-complete/index.vue

@@ -1,74 +0,0 @@
-<template>
-    <el-autocomplete :class="[block ? 'block' : '', ui]" v-model="modelValues" :fetch-suggestions="queryFetch" :value-key="keys" :placeholder="placeholder" @select="handleFetchSelect" @change="handleFetchChange"/>
-</template>
-
-<script setup>
-import {ref,watch} from "vue";
-const props = defineProps({
-    ui: {
-        type: String,
-        default: ''
-    },
-    modelValue: {
-        type: String,
-        default: ''
-    },
-    datas: {
-        type: Array,
-        default: () => ([])
-    },
-    keys: {
-        type: String,
-        default: 'userName'
-    },
-    placeholder: {
-        type: String,
-        default: '请选择或输入'
-    },
-    block: {
-        type: Boolean,
-        default: true
-    },
-})
-
-//初始变量
-const queryData = ref(props.datas)
-const modelValues = ref(props.modelValue)
-
-//监听
-watch(() => [
-    props.datas,
-    props.modelValue,
-], ([datas, val]) => {
-    queryData.value = datas;
-    modelValues.value = val;
-})
-
-//数据筛选处理
-const queryFetch = (key, cb) => {
-    const results = key ? queryData.value.filter(createFilter(key)) : queryData.value
-    cb(results)
-}
-const createFilter = (key) => {
-    return (item) => {
-        const str = item[props.keys]
-        return (str.toLowerCase().indexOf(key.toLowerCase()) === 0)
-    }
-}
-
-//事件
-const emit = defineEmits(['change', 'update:modelValue'])
-
-//被选择
-const handleFetchSelect = (item) => {
-    const str = item[props.keys]
-    emit('update:modelValue', str)
-    emit('change', str)
-}
-
-//失去焦点
-const handleFetchChange = (val) => {
-    emit('update:modelValue', val)
-    emit('change', val)
-}
-</script>

src/global/components/hc-card/index.vue

@@ -1,174 +0,0 @@
-<template>
-    <el-card class="hc-card-box" shadow="never"
-             :class="[
-                 (isSlotHeader || title || isSlotExtra || extraText)?'is-header':'',
-                  isSlotSearchBar?'is-search-bar':'',
-                   `is-action-${actionSize}`,
-                   ui
-             ]"
-    >
-        <template #header v-if="isSlotHeader || title || isSlotExtra || extraText">
-            <div class="hc-card-header-box">
-                <div class="hc-card-header">
-                    <div class="title text-lg" v-if="!isSlotHeader && title">{{ title }}</div>
-                    <slot v-if="isSlotHeader" name='header'/>
-                </div>
-                <div class="hc-card-header-extra" v-if="isSlotExtra || extraText">
-                    <div class="extra" v-if="!isSlotExtra && extraText">{{ extraText }}</div>
-                    <slot v-if="isSlotExtra" name='extra'/>
-                </div>
-            </div>
-        </template>
-        <div class="hc-card-search-bar" v-if="isSlotSearchBar">
-            <slot name='search'/>
-        </div>
-        <div class="hc-card-main-box" :id="idRef" :class="isSlotAction?'is-action':''">
-            <template v-if="scrollbar">
-                <el-scrollbar>
-                    <slot></slot>
-                </el-scrollbar>
-            </template>
-            <template v-else>
-                <slot></slot>
-            </template>
-        </div>
-        <div class="hc-card-action-box" :class="actionUi" v-if="isSlotAction">
-            <slot name='action'/>
-        </div>
-    </el-card>
-</template>
-
-<script setup>
-import {ref,useSlots} from "vue";
-const props = defineProps({
-    ui: {
-        type: String,
-        default: ''
-    },
-    title: {
-        type: [String,Number],
-        default: ''
-    },
-    extraText: {
-        type: [String,Number],
-        default: ''
-    },
-    scrollbar: {
-        type: Boolean,
-        default: false
-    },
-    actionSize: {
-        type: [String,Number],
-        default: 'lg'
-    },
-    idRef: {
-        type: [String,Number],
-        default: ''
-    },
-    actionUi: {
-        type: String,
-        default: ''
-    },
-})
-
-const slots = useSlots()
-
-//判断<slot>是否有传值
-const isSlotHeader = ref(!!slots.header);
-const isSlotExtra = ref(!!slots.extra);
-const isSlotAction = ref(!!slots.action);
-const isSlotSearchBar = ref(!!slots.search);
-</script>
-
-<style lang="scss">
-.hc-card-box.el-card {
-    height: 100%;
-    position: relative;
-    --el-card-padding: 24px;
-    --el-card-bg-color: #f1f5f8;
-    --el-card-border-radius: 10px;
-    --el-text-color-primary: #1A1A1A;
-    box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
-    border: 0;
-    .el-card__header {
-        height: 70px;
-        padding: 14px 24px;
-        border-bottom: 1px solid #e9e9e9;
-        overflow-x: auto;
-        overflow-y: hidden;
-    }
-    .hc-card-header-box {
-        position: relative;
-        display: flex;
-        align-items: center;
-        height: 100%;
-        .hc-card-header {
-            position: relative;
-            flex: 1;
-            display: flex;
-            align-items: center;
-        }
-        .hc-card-header-extra {
-            position: relative;
-            display: flex;
-            align-items: center;
-            margin-left: 24px;
-        }
-    }
-    .el-card__body {
-        position: relative;
-        height: 100%;
-        .hc-card-search-bar {
-            position: relative;
-            margin-bottom: 20px;
-            display: flex;
-            align-items: center;
-            overflow-x: auto;
-            overflow-y: hidden;
-        }
-        .hc-card-main-box {
-            position: relative;
-            height: 100%;
-        }
-        .hc-card-action-box {
-            position: absolute;
-            height: auto;
-            margin: -24px;
-            width: 100%;
-            bottom: 24px;
-            padding: 20px 24px;
-            border-top: 1px solid #e9e9e9;
-            background-color: #f1f5f8;
-        }
-    }
-    &.is-header .el-card__body {
-        height: calc(100% - 70px);
-    }
-    &.is-header .el-card__body .hc-card-main-box:not(.is-action) {
-        height: 100%;
-    }
-    &.is-action-df .el-card__body .hc-card-main-box.is-action {
-        height: calc(100% - 63.5px);
-    }
-    &.is-action-lg .el-card__body .hc-card-main-box.is-action {
-        height: calc(100% - 80px);
-    }
-    &.is-search-bar.is-action-df .el-card__body .hc-card-main-box {
-        height: calc(100% - 40px);
-        &.is-action {
-            height: calc(100% - 124px);
-        }
-    }
-    &.is-search-bar.is-action-lg .el-card__body .hc-card-main-box {
-        height: calc(100% - 40px);
-        &.is-action {
-            height: calc(100% - 124px);
-        }
-    }
-}
-.hc-card-box.el-card:not(.is-header) {
-    .el-card__body {
-        height: 100%;
-    }
-}
-</style>

src/global/components/hc-context-menu/index.vue

@@ -1,192 +0,0 @@
-<template>
-    <div v-if="isBody" class="hc-context-menu-hide">
-        <Teleport :disabled="!isBody" to="#app">
-            <div :id="uuid" v-click-outside="onClickOutside" :class="ui" class="hc-context-menu-box">
-                <template v-for="item in menus">
-                    <div class="hc-context-menu-item" @click.stop="optionClicked(item)">
-                        <slot v-if="item.isSlot" :item="item" :name='item.key'/>
-                        <template v-else>
-                            <HcIcon v-if="item.icon" :name="item.icon" class="menu-item-icon"/>
-                            <span class="menu-item-name">{{ item.label }}</span>
-                        </template>
-                    </div>
-                </template>
-            </div>
-        </Teleport>
-    </div>
-</template>
-
-<script setup>
-import {ref, useSlots, watch, nextTick, onMounted, onBeforeUnmount} from "vue";
-import {ClickOutside as vClickOutside} from 'element-plus'
-import {getRandom, deepClone} from "js-fast-way"
-
-const props = defineProps({
-    ui: {
-        type: String,
-        default: ''
-    },
-    datas: {
-        type: Array,
-        default: () => ([])
-    }
-})
-
-//初始变量
-const uuid = getRandom()
-const menus = ref(props.datas)
-const isBody = ref(false)
-
-//监听表头
-watch(() => [
-    props.datas
-], ([datas]) => {
-    setIsSlots(datas)
-})
-
-//加载完成
-nextTick(() => {
-    //页面渲染完成后，再让 vue3 的 Teleport，把弹出框挂载到外部节点上。
-    isBody.value = true
-    setIsSlots(props.datas)
-})
-
-//渲染完成
-onMounted(() => {
-    document.body.addEventListener('keyup', onEscKeyRelease);
-})
-
-//判断<slot>是否有传值
-const slots = useSlots()
-const setIsSlots = (datas) => {
-    let arr = deepClone(datas)
-    for (let i = 0; i < arr.length; i++) {
-        arr[i].isSlot = !!slots[arr[i].key]
-    }
-    menus.value = arr
-}
-
-const isContextmenu = ref(false)
-const isMouseup = ref(false)
-
-//显示菜单
-const showMenu = (event, contextmenu = true) => {
-    let menu = document.getElementById(uuid);
-    if (!menu) return;
-    isContextmenu.value = contextmenu
-    //取宽高
-    menu.style.visibility = 'hidden';
-    menu.style.display = 'block';
-    let menuWidth = menu.offsetWidth;
-    let menuHeight = menu.offsetHeight;
-    menu.removeAttribute('style');
-    //宽
-    if (menuWidth + event.pageX >= window.innerWidth) {
-        menu.style.left = event.pageX - menuWidth + 2 + 'px';
-    } else {
-        menu.style.left = event.pageX - 2 + 'px';
-    }
-    //高
-    if (menuHeight + event.pageY >= window.innerHeight) {
-        menu.style.top = event.pageY - menuHeight + 2 + 'px';
-    } else {
-        menu.style.top = event.pageY - 2 + 'px';
-    }
-    menu.classList.add('active');
-    //处理鼠标事件
-    if (!contextmenu && !isMouseup.value) {
-        isMouseup.value = true
-        setTimeout(() => {
-            isMouseup.value = false
-        }, 500)
-    }
-}
-
-//事件
-const emit = defineEmits(['closed', 'item-click'])
-
-const hideContextMenu = () => {
-    const element = document.getElementById(uuid);
-    if (element) {
-        element.classList.remove('active');
-        emit('closed')
-    }
-}
-
-const onClickOutside = (event) => {
-    if (isContextmenu.value) {
-        hideContextMenu()
-    } else {
-        if (!isMouseup.value) {
-            hideContextMenu()
-        }
-    }
-}
-
-//菜单被点击
-const optionClicked = (item) => {
-    hideContextMenu()
-    emit('item-click', item)
-}
-
-const onEscKeyRelease = (event) => {
-    if (event.keyCode === 27) {
-        hideContextMenu()
-    }
-}
-
-//卸载之前
-onBeforeUnmount(() => {
-    document.removeEventListener('keyup', onEscKeyRelease);
-})
-
-// 暴露出去
-defineExpose({
-    showMenu
-})
-</script>
-
-<style lang="scss" scoped>
-.hc-context-menu-box {
-    position: fixed;
-    background-color: #fff;
-    border-radius: 4px;
-    width: max-content;
-    display: none;
-    left: 0;
-    top: 0;
-    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-    z-index: 999999;
-    &.active {
-        display: block;
-    }
-    .hc-context-menu-item {
-        align-items: center;
-        padding: 5px 15px;
-        display: flex;
-        cursor: pointer;
-        position: relative;
-        height: 40px;
-        font-size: 16px;
-        color: #333639;
-        .menu-item-icon {
-            margin-right: 6px;
-        }
-        &:hover {
-            background-color: #f3f3f5;
-        }
-        &:first-of-type {
-            margin-top: 4px;
-        }
-        &:last-of-type {
-            margin-bottom: 4px;
-        }
-    }
-}
-</style>
-
-<style lang="scss">
-.hc-context-menu-box .hc-context-menu-item .menu-item-icon {
-    margin-right: 6px;
-}
-</style>

src/global/components/hc-counter/index.vue

@@ -1,154 +0,0 @@
-<template>
-    <div class="hc-counter-box" :class="[block?'hc-counter-block':'', size, ui]">
-        <div class="counter-box">
-            <div class="counter-btn first" :disabled="modelValues <= 1" @click="moveBtnClick">-</div>
-            <div class='counter-val w-20'>
-                <span>{{modelValues}}</span>
-                <span class="ml-2" v-if="text">{{text}}</span>
-            </div>
-            <div class="counter-btn end" @click="addBtnClick">+</div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import {nextTick, ref, watch} from "vue";
-const props = defineProps({
-    ui: {
-        type: String,
-        default: ''
-    },
-    modelValue: {
-        type: [String,Number],
-        default: 1
-    },
-    text: {
-        type: String,
-        default: ''
-    },
-    block: {
-        type: Boolean,
-        default: false
-    },
-    size: {
-        type: String,
-        default: ''
-    },
-})
-
-const modelValues = ref(1)
-
-nextTick(() => {
-    setModelVal(props.modelValue)
-})
-
-//监听
-watch(() => [
-    props.modelValue,
-], ([val]) => {
-    setModelVal(val)
-})
-
-//转换
-const setModelVal = (val) => {
-    modelValues.value = Number(val)
-    setEmitData(val)
-}
-
-const emit = defineEmits(['update:modelValue','addClick','moveClick', 'change'])
-
-//减少
-const moveBtnClick = () => {
-    let val = modelValues.value - 1;
-    if (val < 1) {
-        modelValues.value =  1;
-    } else {
-        modelValues.value =  val;
-        setEmitData(val)
-    }
-}
-
-//增加
-const addBtnClick = () => {
-    let val = modelValues.value + 1;
-    modelValues.value =  val;
-    setEmitData(val)
-}
-
-//事件
-const setEmitData = (val) => {
-    emit('update:modelValue', val)
-    emit('addClick', val)
-    emit('change', val)
-}
-
-</script>
-
-<style lang="scss" scoped>
-.hc-counter-box {
-    position: relative;
-    display: inline-block;
-    height: 32px;
-    .counter-box {
-        display: flex;
-        align-items: center;
-        height: inherit;
-        color: #000000;
-        .counter-btn {
-            height: 32px;
-            width: 32px;
-            border: 1px solid #dddfe6;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 22px;
-            font-weight: 100;
-            cursor: pointer;
-            user-select: none;
-            background-color: white;
-            transition: color 0.2s, background-color 0.2s;
-            &.first {
-                border-radius: 4px 0 0 4px;
-            }
-            &.end {
-                border-radius: 0 4px 4px 0;
-            }
-            &:hover {
-                color: var(--el-color-primary);
-                background-color: var(--el-color-primary-light-8);
-            }
-            &[disabled=true] {
-                cursor: not-allowed;
-                color: #c5c5c5;
-                background-color: #f3f3f3;
-            }
-        }
-        .counter-val {
-            height: inherit;
-            border-top: 1px solid #dddfe6;
-            border-bottom: 1px solid #dddfe6;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-    }
-    &.hc-counter-block {
-        width: 100%;
-        .counter-box {
-            width: 100%;
-            .counter-val {
-                width: auto;
-                flex: 1;
-            }
-        }
-    }
-    &.large {
-        height: 40px;
-        .counter-btn {
-            height: 40px;
-            width: 40px;
-            font-size: 26px;
-        }
-    }
-}
-</style>

src/global/components/hc-date-picker/index.vue

@@ -1,68 +0,0 @@
-<template>
-    <el-date-picker v-model="betweenDate" :clearable="isClearable" :type="isType" :value-format="isFormat"
-                    class="hc-date-picker" end-placeholder="结束日期" range-separator="至"
-                    start-placeholder="开始日期" @change="betweenDateUpdate"/>
-</template>
-
-<script setup>
-import {ref, watch} from "vue";
-import {ElDatePicker} from 'element-plus'
-
-const props = defineProps({
-    dates: {
-        type: Array,
-        default: () => ([])
-    },
-    clearable: {
-        type: Boolean,
-        default: false
-    },
-    type: {
-        type: String,
-        default: 'daterange'
-    },
-    format: {
-        type: String,
-        default: 'YYYY-MM-DD'
-    },
-})
-
-//初始变量
-const betweenDate = ref(props.dates)
-const isType = ref(props.type)
-const isFormat = ref(props.format)
-const isClearable = ref(props.clearable)
-
-//监听
-watch(() => [
-    props.dates,
-    props.type,
-    props.format,
-    props.clearable,
-], ([dates, type, format, clearable]) => {
-    betweenDate.value = dates
-    isType.value = type
-    isFormat.value = format
-    isClearable.value = clearable
-})
-
-//事件
-const emit = defineEmits(['change'])
-const betweenDateUpdate = (arr) => {
-    let res = arr ?? [], query = '';
-    let obj = {start: null, end: null}
-    if (res.length > 0) {
-        obj = {start: res[0], end: res[1]}
-    }
-    if (obj['start'] && obj['end']) {
-        query = `${obj['start']}~${obj['end']}`
-    }
-    emit('change', {val: obj, arr: res, query})
-}
-</script>
-
-<style lang="scss">
-.hc-date-picker.el-range-editor.el-input__wrapper {
-    width: 100%;
-}
-</style>

src/global/components/hc-dialog/index.vue

@@ -1,209 +0,0 @@
-<template>
-    <el-dialog :id="uuid"
-               v-model="isShow"
-               :append-to-body="isToBody"
-               :before-close="beforeClose"
-               :class="[isTable?'hc-modal-table':'', isSlotExtra?'hc-modal-header-extra':'', padding ? '':'hc-modal-no-padding', ui]"
-               :close-on-click-modal="false" :destroy-on-close="!isLoading"
-               :show-close="isClose" :style="isBgColor?'--el-dialog-bg-color:' + isBgColor:''" :title="title"
-               :width="isWidth"
-               class="hc-modal-border"
-               close-on-press-escape
-               draggable
-    >
-        <template v-if="isSlotHeader || isSlotExtra" #header>
-            <slot v-if="isSlotHeader" name='header'/>
-            <div v-if="!isSlotHeader && isSlotExtra" class="el-dialog__title" role="heading">{{ title }}</div>
-            <slot v-if="isSlotExtra" name='extra'/>
-        </template>
-        <slot></slot>
-        <template v-if="footer" #footer>
-            <slot v-if="isSlotFooter" name='footer'/>
-            <div v-else-if="isRowFooter" class="lr-dialog-footer">
-                <div class="left">
-                    <slot name='leftRowFooter'/>
-                </div>
-                <div class="right flex">
-                    <slot name='rightRowFooter'/>
-                </div>
-            </div>
-            <div v-else :class="isFooterCenter?'text-center':''" class="dialog-footer">
-                <el-button :disabled="isLoading" size="large" @click="dialogClosed">
-                    <HcIcon name="close"/>
-                    <span>取消</span>
-                </el-button>
-                <el-button :loading="isLoading" hc-btn type="primary" @click="buttonSaveClick">
-                    <HcIcon name="check"/>
-                    <span>{{ saveText }}</span>
-                </el-button>
-            </div>
-        </template>
-    </el-dialog>
-</template>
-
-<script setup>
-import {ref, watch, useSlots, onMounted} from "vue";
-import {getRandom} from "js-fast-way"
-
-const props = defineProps({
-    ui: {
-        type: String,
-        default: ''
-    },
-    show: {
-        type: Boolean,
-        default: false
-    },
-    title: {
-        type: [String, Number],
-        default: 'dialog'
-    },
-    widths: {
-        type: String,
-        default: '38rem'
-    },
-    loading: {
-        type: Boolean,
-        default: false
-    },
-    loadingText: {
-        type: String,
-        default: '请求中，请耐心等待...'
-    },
-    footer: {
-        type: Boolean,
-        default: true
-    },
-    saveText: {
-        type: [String, Number],
-        default: '提交'
-    },
-    bgColor: {
-        type: [String, Number],
-        default: '#f1f5f8'
-    },
-    isTable: {
-        type: Boolean,
-        default: false
-    },
-    isRowFooter: {
-        type: Boolean,
-        default: false
-    },
-    isClose: {
-        type: Boolean,
-        default: true
-    },
-    padding: {
-        type: Boolean,
-        default: true
-    },
-    isFooterCenter: {
-        type: Boolean,
-        default: false
-    },
-    isToBody: {
-        type: Boolean,
-        default: false
-    },
-})
-
-//变量
-const uuid = getRandom()
-const isShow = ref(props.show)
-const isWidth = ref(props.widths)
-const isLoading = ref(props.loading)
-const isBgColor = ref(props.bgColor)
-const loadingText = ref(props.loadingText)
-
-onMounted(() => {
-    setLoading(props.loading)
-})
-
-//监听
-watch(() => [
-    props.show,
-    props.widths,
-    props.loading,
-    props.bgColor,
-    props.loadingText,
-], ([show, width, loading, bgColor, loadingText1]) => {
-    isShow.value = show
-    isWidth.value = width
-    isLoading.value = loading
-    isBgColor.value = bgColor
-    loadingText.value = loadingText1
-    setLoading(loading)
-})
-
-//判断<slot>是否有传值
-const slots = useSlots()
-const isSlotHeader = ref(!!slots.header);
-const isSlotExtra = ref(!!slots.extra);
-const isSlotFooter = ref(!!slots.footer);
-
-const emit = defineEmits(['close', 'save'])
-
-const loadingInstance = ref(null);
-const setLoading = (val) => {
-    if (val) {
-        const dom = document.getElementById(uuid)
-        loadingInstance.value = window.$loading.service({
-            target: dom,
-            text: loadingText.value,
-        })
-    } else {
-        if (loadingInstance.value) {
-            loadingInstance.value.close()
-        }
-    }
-}
-
-//关闭
-const dialogClosed = () => {
-    isShow.value = false
-    emit('close', false)
-}
-
-const beforeClose = (done) => {
-    if (!isLoading.value) {
-        isShow.value = false
-        done()
-        emit('close', false)
-    }
-}
-
-//按钮保存
-const buttonSaveClick = () => {
-    emit('save')
-}
-</script>
-
-<style lang="scss">
-.el-overlay-dialog {
-    .el-dialog.hc-modal-border.hc-modal-header-extra,
-    .el-dialog.hc-modal-header-extra {
-        .el-dialog__header {
-            position: relative;
-            display: flex;
-            align-items: center;
-            padding: 8px var(--el-dialog-padding-primary);
-            .el-dialog__title {
-                flex: 1;
-            }
-            .el-dialog__headerbtn {
-                position: relative;
-                top: initial;
-                right: initial;
-                width: auto;
-                height: inherit;
-                margin-left: 24px;
-                font-size: 18px;
-            }
-        }
-    }
-    .el-dialog.hc-modal-no-padding .el-dialog__body {
-        padding: 0;
-    }
-}
-</style>

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

@@ -1,364 +0,0 @@
-<template>
-    <div v-if="isBody" class="ui-drag-modal-box-hide">
-        <Teleport :disabled="!isBody" to="#app">
-            <div :id="'drag-modal-' + uuid"
-                 :class="[isModalShow?'ui-drag-modal-show':'']"
-                 :style="{
-                     left: dragModalLeft + 'px',
-                     top: dragModalTop + 'px',
-                     width: widthVal + 'px',
-                     height: heightVal + 'px',
-                     zIndex: isModalShow ? zIndex: -1
-                 }"
-                 class="ui-drag-modal-box"
-                 @click.capture="dragModalCapture">
-                <div :class="[bg,ui]" :style="{width: widthVal + 'px', height: heightVal + 'px'}"
-                     class="ui-drag-modal-dialog shadow-xl"
-                     @mousedown="dragModalMouseDown">
-                    <div :class="titleBorder?'border-bottom':''" class="ui-drag-modal-dialog-header">
-                        <div :class="titleUi" class="ui-drag-modal-dialog-title text-lg">
-                            <span v-if="title">{{ title }}</span>
-                        </div>
-                        <div class="ui-drag-modal-dialog-extra">
-                            <template v-for="item in closeIconData">
-                                <el-tooltip :content="item.name" placement="top" popper-class="z-9999">
-                                    <div class="dialog-icon" @click="_closeIconClick(item)">
-                                        <HcIcon :name="item.icon"/>
-                                    </div>
-                                </el-tooltip>
-                            </template>
-                            <el-tooltip :content="isFullscreen?'退出全屏':'窗口全屏'" placement="top"
-                                        popper-class="z-9999">
-                                <div class="dialog-icon" @click="_fullscreenClick()">
-                                    <HcIcon :name="isFullscreen?'fullscreen-exit':'fullscreen'"/>
-                                </div>
-                            </el-tooltip>
-                            <el-tooltip v-if="closeIcon" content="关闭窗口" placement="top" popper-class="z-9999">
-                                <div class="dialog-icon" @click="_closeClick()">
-                                    <HcIcon name="close"/>
-                                </div>
-                            </el-tooltip>
-                        </div>
-                    </div>
-                    <div v-loading="isLoading" :element-loading-text="isLoadingText"
-                         class="ui-drag-modal-dialog-body"
-                         @mousedown.stop="dragModalBodyMouseDown">
-                        <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, deepClone} from "js-fast-way"
-import {useAppStore} from "~src/store";
-
-const useAppState = useAppStore()
-//参数
-const props = defineProps({
-    ui: {
-        type: String,
-        default: ''
-    },
-    bg: {
-        type: String,
-        default: ''
-    },
-    widths: {
-        type: [Number, String],
-        default: 960
-    },
-    title: {
-        type: String,
-        default: ''
-    },
-    titleUi: {
-        type: [String, Object, Array],
-        default: ''
-    },
-    titleBorder: {
-        type: Boolean,
-        default: false
-    },
-    closeIcon: {
-        type: Boolean,
-        default: true
-    },
-    isShow: {
-        type: Boolean,
-        default: false
-    },
-    lefts: {
-        type: [Number, String],
-        default: 120
-    },
-    tops: {
-        type: [Number, String],
-        default: 80
-    },
-    height: {
-        type: [Number, String],
-        default: 440
-    },
-    //是否排序置顶
-    isSortTop: {
-        type: Boolean,
-        default: false
-    },
-    eid: {
-        type: [Number, String],
-        default: ''
-    },
-    //关闭时销毁
-    isCloseDestroy: {
-        type: Boolean,
-        default: true
-    },
-    loading: {
-        type: Boolean,
-        default: false
-    },
-    loadingText: {
-        type: [Number, String],
-        default: '加载中...'
-    },
-    closeIconArr: {
-        type: Array,
-        default: () => ([])
-    }
-})
-
-//变量
-const isBody = ref(false)
-const isModalShow = ref(props.isShow)
-const uuid = props.eid || getRandom()
-const dragModalLeft = ref(parseInt(props.lefts + ''))
-const dragModalTop = ref(parseInt(props.tops + ''))
-const widthVal = ref(parseInt(props.widths + ''))
-const heightVal = ref(parseInt(props.height))
-const closeIconData = ref(props.closeIconArr)
-
-const isLoading = ref(props.loading)
-const isLoadingText = ref(props.loadingText)
-
-//监听
-watch(() => [
-    props.isShow,
-    props.loading,
-    props.loadingText,
-    props.closeIconArr
-], ([isShow, loading, loadingText, closeIcon]) => {
-    isModalShow.value = isShow
-    isLoading.value = loading
-    isLoadingText.value = loadingText
-    closeIconData.value = closeIcon
-})
-
-//深度监听弹窗排序列表变化
-const dragModalSortTopList = ref(useAppState.dragModalSortTop)
-watch(() => [
-    useAppState.dragModalSortTop
-], ([sortTopList]) => {
-    dragModalSortTopList.value = sortTopList
-    setModalIndex(sortTopList)
-}, {deep: true})
-
-//设置窗口层级
-const zIndex = ref(2000)
-const setModalIndex = (sortTopList) => {
-    if (props.isSortTop) {
-        const index = sortTopList.indexOf(uuid)
-        zIndex.value = 2000 + (index + 1)
-    }
-}
-
-//页面渲染完成
-nextTick(() => {
-    //页面渲染完成后，再让 vue3 的 Teleport，把弹出框挂载到外部节点上。
-    isBody.value = true
-    if (props.isSortTop) {
-        const sortTopList = dragModalSortTopList.value
-        let index = sortTopList.indexOf(uuid)
-        if (index === -1) {
-            sortTopList.push(uuid)
-            index = sortTopList.length - 1
-        }
-        useAppState.setDragModalSortTop(sortTopList)
-        setModalIndex(sortTopList)
-        //窗口位置偏移，防止重叠在一起，误导用户
-        dragModalLeft.value = dragModalLeft.value + (index * 20)
-        dragModalTop.value = dragModalTop.value + (index * 20)
-    }
-})
-
-//弹窗拖动
-const dragModalMouseDown = (event) => {
-    dragModalCapture()
-    // 阻止默认事件和冒泡
-    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;
-    const lefts = body.clientWidth - dom.clientWidth, tops = body.clientHeight - dom.clientHeight;
-    document.onmousemove = (ve) => {
-        // 通过事件委托，计算移动的距离
-        let left = ve.clientX - disX, top = ve.clientY - disY
-        // 判断是否超出可视区
-        if (left <= 0) left = 0
-        if (left > lefts) {
-            left = lefts
-        }
-
-        if (top <= 0) top = 0
-        if (top > tops) {
-            top = tops
-        }
-        // 移动当前元素
-        dragModalLeft.value = left
-        dragModalTop.value = top
-    }
-    document.onmouseup = () => {
-        document.onmousemove = null;
-        document.onmouseup = null;
-    }
-}
-
-//禁止拖动
-const dragModalBodyMouseDown = () => {
-    dragModalCapture()
-}
-
-//弹窗改变宽高
-const dragModalResizeMouseDown = (event) => {
-    dragModalCapture()
-    // 阻止默认事件和冒泡
-    event.preventDefault()
-    event.stopPropagation()
-    //获取相关dom元素
-    let body = document.body, dom = document.getElementById('drag-modal-' + uuid)
-    let clientX = event.clientX, clientY = event.clientY;
-    let offsetWidth = dom.offsetWidth, clientHeight = dom.clientHeight;
-    document.onmousemove = (e) => {
-        //拖拽时为了对宽和高 限制一下范围，定义两个变量
-        let W = e.clientX - clientX + offsetWidth;
-        let H = e.clientY - clientY + clientHeight;
-
-        if (body.offsetWidth - e.clientX < 0) {
-            W = body.offsetWidth - parseInt(dom.style.marginLeft);
-        }
-        if (body.offsetHeight - e.clientY < 0) {
-            H = body.offsetHeight - parseInt(dom.style.marginTop);
-        }
-
-        widthVal.value = W;// 拖拽后物体的宽
-        heightVal.value = H;// 拖拽后物体的高
-    }
-    document.onmouseup = () => {
-        document.onmousemove = null;
-        document.onmouseup = null;
-    }
-}
-
-//事件
-const emit = defineEmits(['close', 'closeIconTap'])
-const show = () => {
-    isModalShow.value = true;
-}
-const hide = () => {
-    isModalShow.value = false;
-    if (props.isCloseDestroy) {
-        destroyModal()
-    }
-}
-const _closeClick = () => {
-    if (!isLoading.value) {
-        emit('close')
-    }
-}
-
-const _closeIconClick = (item) => {
-    if (!isLoading.value) {
-        emit('closeIconTap', item)
-    }
-}
-
-//关闭弹窗
-const closeFunc = () => {
-    hide();
-}
-
-//缓存样式
-const cacheStyleJson = ref({})
-const isFullscreen = ref(false)
-
-//全屏
-const _fullscreenClick = () => {
-    if (isFullscreen.value) {
-        const styleJson = deepClone(cacheStyleJson.value)
-        dragModalLeft.value = styleJson.left
-        dragModalTop.value = styleJson.top
-        widthVal.value = styleJson.width
-        heightVal.value = styleJson.height
-        isFullscreen.value = false
-    } else {
-        const {clientWidth, clientHeight} = document.body
-        cacheStyleJson.value = deepClone({
-            width: widthVal.value,
-            height: heightVal.value,
-            left: dragModalLeft.value,
-            top: dragModalTop.value
-        })
-        dragModalLeft.value = 0
-        dragModalTop.value = 0
-        widthVal.value = clientWidth
-        heightVal.value = clientHeight
-        isFullscreen.value = true
-    }
-}
-
-//弹窗被点击
-const dragModalCapture = () => {
-    if (props.isSortTop) {
-        const sortTopList = dragModalSortTopList.value
-        const index = sortTopList.indexOf(uuid)
-        if (index === -1) {
-            //检查是否已经存在，不存在则添加
-            sortTopList.push(uuid)
-            useAppState.setDragModalSortTop(sortTopList)
-        } else if (index !== sortTopList.length - 1) {
-            //检查是否在最上层，不在则置顶，可以解决多次点击时，频繁更改全局状态的问题
-            sortTopList.splice(index, 1)
-            sortTopList.push(uuid)
-            useAppState.setDragModalSortTop(sortTopList)
-        }
-    }
-}
-
-//销毁此弹窗
-const destroyModal = () => {
-    isBody.value = false;
-    if (props.isSortTop) {
-        const sortTopList = dragModalSortTopList.value
-        const index = sortTopList.indexOf(uuid)
-        if (index !== -1) {
-            sortTopList.splice(index, 1)
-        }
-    }
-}
-
-// 暴露出去
-defineExpose({
-    destroyModal,
-    closeFunc
-})
-</script>
-
-<style lang="scss" scoped>
-@import './modal.scss';
-</style>

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

@@ -1,72 +0,0 @@
-.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: 2001;
-        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-extra {
-                display: flex;
-                align-items: center;
-                justify-content: flex-end;
-                margin-right: 15px;
-                font-size: 20px;
-                height: 100%;
-                .dialog-icon {
-                    cursor: pointer;
-                    transition: opacity 0.3s;
-                    line-height: 1;
-                    &:hover {
-                        opacity: .6;
-                    }
-                }
-                .dialog-icon + .dialog-icon {
-                    margin-left: 14px;
-                }
-            }
-        }
-        .ui-drag-modal-dialog-body {
-            position: relative;
-            height: calc(100% - 75px);
-            margin: 14px;
-        }
-        .ui-drag-modal-resize {
-            position: absolute;
-            width: 15px;
-            height: 15px;
-            right: 0;
-            bottom: 0;
-            cursor: se-resize;
-            border: 1px dashed #8f8f8f;
-            border-left: 0;
-            border-top: 0;
-            border-radius: 0 0 4px 0;
-        }
-    }
-    &.ui-drag-modal-show {
-        opacity: 1;
-        z-index: 2000;
-    }
-}

src/global/components/hc-drawer/index.vue

@@ -1,138 +0,0 @@
-<template>
-    <Suspense v-if="isBody">
-        <Teleport :to="`#${toId}`">
-            <el-drawer ref="drawerRef" :modal-class="uis" :class="`hc-drawer-box ${ui}`" v-model="isShow" :with-header="false" :direction="direction" :size="size" destroy-on-close @closed="drawerClosed">
-                <HcCard :title="title" :extraText="extraText" :actionSize="actionSize" :scrollbar="scrollbar" :actionUi="actionUi" v-if="isCard">
-                    <template #header v-if="isSlotHeader">
-                        <slot name='header'/>
-                    </template>
-                    <template #extra v-if="isSlotExtra">
-                        <slot name='extra'/>
-                    </template>
-                    <template #search v-if="isSlotSearchBar">
-                        <slot name='search'/>
-                    </template>
-                    <template #action v-if="isSlotAction">
-                        <slot name='action'/>
-                    </template>
-                    <slot></slot>
-                </HcCard>
-                <slot v-if="!isCard"></slot>
-            </el-drawer>
-        </Teleport>
-    </Suspense>
-</template>
-
-<script setup>
-import {ref, nextTick, watch, useSlots} from "vue";
-const props = defineProps({
-    uis: {
-        type: String,
-        default: ''
-    },
-    ui: {
-        type: String,
-        default: ''
-    },
-    show: {
-        type: Boolean,
-        default: false
-    },
-    toId: {
-        type: [String,Number],
-        default: ''
-    },
-    title: {
-        type: [String,Number],
-        default: ''
-    },
-    //rtl / ltr / ttb / btt
-    direction: {
-        type: String,
-        default: 'ttb'
-    },
-    scrollbar: {
-        type: Boolean,
-        default: false
-    },
-    extraText: {
-        type: [String,Number],
-        default: ''
-    },
-    actionSize: {
-        type: [String,Number],
-        default: 'lg'
-    },
-    size: {
-        type: [String,Number],
-        default: '100%'
-    },
-    isCard: {
-        type: Boolean,
-        default: true
-    },
-    actionUi: {
-        type: String,
-        default: ''
-    },
-})
-
-//变量
-const isShow = ref(props.show)
-const isBody = ref(false)
-
-//监听
-watch(() => [
-    props.show
-], ([show]) => {
-    isShow.value = show
-})
-
-//渲染完成
-nextTick(()=> {
-    //页面渲染完成后，再让 vue3 的 Teleport，挂载到指定节点
-    isBody.value = true
-})
-
-//判断<slot>是否有传值
-const slots = useSlots()
-const isSlotHeader = ref(!!slots.header);
-const isSlotExtra = ref(!!slots.extra);
-const isSlotAction = ref(!!slots.action);
-const isSlotSearchBar = ref(!!slots.search);
-
-const drawerRef = ref(null)
-const emit = defineEmits(['close'])
-
-//关闭
-const drawerClosed = () => {
-    isShow.value = false
-    emit('close', false)
-}
-
-const handleClose = () => {
-    drawerRef.value?.handleClose()
-}
-
-// 暴露出去
-defineExpose({
-    handleClose
-})
-</script>
-
-<style lang="scss">
-.hc-card-box.el-card .el-card__body .hc-card-main-box .el-overlay {
-    position: absolute;
-    .hc-drawer-box.el-drawer {
-        background-color: transparent;
-        box-shadow: initial;
-        .el-drawer__body {
-            padding: 24px;
-            overflow: hidden;
-            .data-fill-list-box .el-collapse .el-collapse-item__wrap .el-collapse-item__content .data-fill-list-item-content {
-                height: calc(100vh - 545px);
-            }
-        }
-    }
-}
-</style>

src/global/components/hc-icon/index.vue

@@ -1,43 +0,0 @@
-<template>
-    <i class="hc-icon-i" :class="[`ri-${nameVal}${isFill ? '-fill' : line ? '-line' : ''}`, hui]"></i>
-</template>
-
-<script setup>
-import { ref,watch } from "vue"
-const props = defineProps({
-    ui: {
-        type: String,
-        default: ''
-    },
-    //图标名
-    name: {
-        type: [String,Number],
-        default: ''
-    },
-    //是否填充
-    fill: {
-        type: Boolean,
-        default: false
-    },
-    line: {
-        type: Boolean,
-        default: true
-    },
-})
-
-//初始变量
-const hui = ref(props.ui)
-const nameVal = ref(props.name)
-const isFill = ref(props.fill)
-
-//监听
-watch(() => [
-    props.ui,
-    props.name,
-    props.fill,
-], ([ui,name,fill]) => {
-    hui.value = ui;
-    nameVal.value = name;
-    isFill.value = fill;
-})
-</script>

src/global/components/hc-img/index.vue

@@ -1,28 +0,0 @@
-<template>
-    <ElImage :class="ui" :src="src" :previewSrcList="srcs" :initial-index="index" :fit="fit" crossOrigin="anonymous"/>
-</template>
-
-<script setup>
-defineProps({
-    ui: {
-        type: String,
-        default: ''
-    },
-    src: {
-        type: String,
-        default: ''
-    },
-    srcs: {
-        type: Array,
-        default: () => ([])
-    },
-    index: {
-        type: [String,Number],
-        default: -1
-    },
-    fit: {
-        type: String,
-        default: 'cover'
-    },
-})
-</script>

src/global/components/hc-menu-simple/index.vue

@@ -1,219 +0,0 @@
-<template>
-    <div :class="ui" class="hc-menu-simple-box">
-        <template v-for="item in datas" :key="item[menuProps.key]">
-            <div :class="item[menuProps.key] === keysValue ? 'active' : ''" class="item-box" @click="MenuClick(item)"
-                 @contextmenu.prevent.stop="menuLabelContextMenu($event,item)">
-                <div v-if="item[menuProps.icon]" class="icon-box">
-                    <HcIcon :name="item[menuProps.icon]" fill/>
-                </div>
-                <div class="label-box truncate">{{ item[menuProps.label] }}</div>
-                <el-badge v-if="item[menuProps.badge] > 0" :value="item[menuProps.badge]"/>
-                <!--操作菜单-->
-                <div v-if="menusData.length > 0 && !item.isNoContextMenu" :class="item.showMenuIcon?'show':''"
-                     class="menu-icon">
-                    <div class="menu-popover-icon" @click.prevent.stop="menuLabelContextMenu($event,item)">
-                        <HcIcon name="apps" ui="text-2xl"/>
-                    </div>
-                </div>
-                <!--操作菜单 END-->
-            </div>
-        </template>
-        <!--右键菜单-->
-        <HcContextMenu v-if="menusData.length > 0" ref="contextMenuRef" :datas="menusData"
-                       @closed="handleMenuClosed" @item-click="handleMenuSelect"/>
-    </div>
-</template>
-
-<script setup>
-import {nextTick, ref, watch} from "vue";
-import {getObjValue, getObjVal} from "js-fast-way"
-
-const props = defineProps({
-    ui: {
-        type: String,
-        default: ''
-    },
-    datas: {
-        type: Array,
-        default: () => ([])
-    },
-    keys: {
-        type: [String, Number],
-        default: ''
-    },
-    menus: {
-        type: Array,
-        default: () => ([])
-    },
-    props: {
-        type: Object,
-        default: () => ({})
-    },
-})
-
-//初始变量
-const keysValue = ref(props.keys)
-const menusData = ref(props.menus)
-const menuItemData = ref({})
-const menuProps = ref({})
-
-//监听
-watch(() => [
-    props.keys,
-    props.menus,
-    props.props,
-], ([keys, menus, prop]) => {
-    menusData.value = menus
-    keysValue.value = keys
-    setMenuProps(prop)
-})
-
-nextTick(() => {
-    setMenuProps(props.props)
-})
-
-
-//设置属性
-const setMenuProps = (prop) => {
-    const obj = getObjValue(prop)
-    menuProps.value = {
-        key: obj.key ?? 'key',
-        icon: obj.icon ?? 'icon',
-        label: obj.label ?? 'label',
-        badge: obj.badge ?? 'badge'
-    }
-}
-
-//事件
-const emit = defineEmits(['change', 'menuTap'])
-const MenuClick = (item) => {
-    const keys = menuProps.value
-    if (item[keys.key] !== keysValue.value) {
-        emit('change', item)
-    }
-}
-
-//鼠标右键事件
-const contextMenuRef = ref(null)
-const menuLabelContextMenu = (e, item) => {
-    const rows = menusData.value || [];
-    if (rows.length > 0 && !item.isNoContextMenu) {
-        e.preventDefault();
-        menuItemData.value = item;
-        item.showMenuIcon = true
-        //展开菜单
-        contextMenuRef.value?.showMenu(e)
-    } else {
-        menuItemData.value = false;
-        item.showMenuIcon = false
-    }
-}
-
-//鼠标右键菜单被点击
-const handleMenuSelect = ({key}) => {
-    const item = getObjValue(menuItemData.value);
-    emit('menuTap', {key, item})
-}
-
-//菜单关闭
-const handleMenuClosed = () => {
-    const item = menuItemData.value;
-    if (getObjVal(item)) {
-        menuItemData.value.showMenuIcon = false
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-.hc-menu-simple-box {
-    position: relative;
-    padding: 20px;
-    .item-box {
-        position: relative;
-        display: flex;
-        align-items: center;
-        background: #f1f5f8;
-        border-radius: 6px;
-        padding: 8px 14px;
-        margin-bottom: 10px;
-        transition: 0.2s;
-        .icon-box {
-            position: relative;
-            width: 22px;
-            height: 22px;
-            border-radius: 5px;
-            background-color: var(--el-color-primary-light-8);
-            color: var(--el-color-primary-light-5);
-            font-size: 16px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-right: 14px;
-            transition: 0.2s;
-        }
-        .label-box {
-            position: relative;
-            color: #838791;
-            font-size: 14px;
-            transition: 0.2s;
-            flex: 1;
-        }
-        .menu-icon {
-            position: relative;
-            pointer-events: none;
-            transition: opacity 0.2s;
-            background: rgba(255, 255, 255, 0.25);
-            border-radius: 2px;
-            opacity: 0;
-            .menu-popover-icon {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                color: #878787;
-            }
-            &.show {
-                opacity: 1;
-                pointer-events: all;
-                cursor: context-menu;
-            }
-        }
-        &:not(.active) {
-            cursor: pointer;
-        }
-        &:hover {
-            .icon-box {
-                color: #ffffff;
-                background-color: var(--el-color-primary);
-            }
-            .label-box {
-                color: #1a1a1a;
-                font-weight: 500;
-            }
-            .menu-icon {
-                opacity: 1;
-                pointer-events: all;
-                cursor: context-menu;
-            }
-        }
-        &.active {
-            box-shadow: var(--hc-shadow);
-            .icon-box {
-                color: #ffffff;
-                background-color: var(--el-color-primary);
-            }
-            .label-box {
-                color: #1a1a1a;
-                font-weight: 500;
-            }
-        }
-    }
-}
-</style>
-
-<style lang="scss" scoped>
-.hc-menu-simple-box .item-box .el-badge {
-    position: absolute;
-    display: flex;
-    right: 12px;
-}
-</style>

src/global/components/hc-new-switch/index.vue

@@ -1,109 +0,0 @@
-<template>
-    <div class="hc-new-switch" :class="[`size-${size ?? 'large'}`, round ? 'round' : '', isDisabled ? 'disabled' : '']">
-        <template v-for="item in datas">
-            <div class="switch-bg" :class="item?.key == keyVal?'dots':''" @click="switchClick(item)">{{item?.name}}</div>
-        </template>
-    </div>
-</template>
-
-<script setup>
-import {ref,watch} from "vue";
-const props = defineProps({
-    datas: {
-        type: Array,
-        default: () => ([])
-    },
-    keys: {
-        type: [String,Number],
-        default: ''
-    },
-    size: { //large / default /small
-        type: [String,Number],
-        default: 'large'
-    },
-    round: {
-        type: Boolean,
-        default: true
-    },
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-})
-
-//监听
-const keyVal = ref(props.keys)
-const isDisabled = ref(props.disabled)
-
-//监听
-watch(() => [
-    props.keys,
-    props.disabled
-], ([keys, disabled]) => {
-    keyVal.value = keys;
-    isDisabled.value = disabled;
-})
-
-//事件
-const emit = defineEmits(['change'])
-const switchClick = (item) => {
-    if (!isDisabled.value) {
-        if (item?.key == keyVal.value) return;
-        emit('change', item)
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-.hc-new-switch {
-    isolation: isolate;
-    position: relative;
-    overflow: hidden;
-    height: 40px;
-    font-size: 14px;
-    background: #f1f5f8;
-    border-radius: 4px;
-    display: inline-flex;
-    align-items: center;
-    padding: 0 4px;
-    user-select: none;
-    box-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15) inset, -4px -4px 8px 0 #ffffff inset;
-    .switch-bg {
-        color: #838791;
-        padding: 0 14px;
-        border-radius: 4px;
-        height: 30px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        &.dots {
-            color: #ffffff;
-            background: linear-gradient(90deg,var(--el-color-primary-light-5), var(--el-color-primary) 100%);
-            box-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15), -3px -2px 8px 0 #ffffff;
-            transition: .1s;
-        }
-        &:not(.dots) {
-            cursor: pointer;
-        }
-    }
-    &.round {
-        border-radius: 40px;
-        .switch-bg {
-            border-radius: 80px;
-        }
-    }
-    &.size-default {
-        height: 32px;
-        font-size: 13px;
-        .switch-bg {
-            height: 25px;
-        }
-    }
-    &.disabled {
-        .switch-bg {
-            opacity: 0.5;
-            cursor: no-drop;
-        }
-    }
-}
-</style>

src/global/components/hc-new-switchtype/index.vue

@@ -1,111 +0,0 @@
-<template>
-    <div class="hc-new-switch" :class="[`size-${size ?? 'large'}`, round ? 'round' : '', isDisabled ? 'disabled' : '']">
-        <template v-for="item in datas">
-            <div class="switch-bg" :class="item?.key == keyVal?'dots':''" @click="switchClick(item)">{{item?.name}}</div>
-        </template>
-    </div>
-</template>
-
-<script setup>
-import {ref,watch} from "vue";
-const props = defineProps({
-    datas: {
-        type: Array,
-        default: () => ([])
-    },
-    keys: {
-        type: [String,Number],
-        default: ''
-    },
-    size: { //large / default /small
-        type: [String,Number],
-        default: 'large'
-    },
-    round: {
-        type: Boolean,
-        default: true
-    },
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-})
-
-//监听
-const keyVal = ref(props.keys)
-const isDisabled = ref(props.disabled)
-
-//监听
-watch(() => [
-    props.keys,
-    props.disabled
-], ([keys, disabled]) => {
-    keyVal.value = keys;
-    isDisabled.value = disabled;
-})
-
-//事件
-const emit = defineEmits(['change'])
-const switchClick = (item) => {
-    if (!isDisabled.value) {
-        if (item?.key == keyVal.value) return;
-        emit('change', item)
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-.hc-new-switch {
-    isolation: isolate;
-    position: relative;
-    overflow: hidden;
-    // height: 40px;
-    font-size: 14px;
-    background: #f1f5f8;
-    border-radius: 4px;
-    display: inline-flex;
-    align-items: center;
-    padding: 0 0px;
-    border:1px solid var(--el-color-primary-light-7);
-    // box-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15) inset, -4px -4px 8px 0 #ffffff inset;
-    .switch-bg {
-        color: #838791;
-        padding: 0 14px;
-        border-radius: 0px;
-        height: 30px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        &.dots {
-            color:var(--el-color-primary);
-            border:1px solid var(--el-color-primary-light-7);
-           background-color:  var(--el-color-primary-light-9);
-            // box-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15), -3px -2px 8px 0 #ffffff;
-            transition: .1s;
-        }
-        &:not(.dots) {
-            cursor: pointer;
-        }
-    }
-    // &.round {
-    //     border-radius: 40px;
-    //     .switch-bg {
-    //         border-radius: 80px;
-    //     }
-    // }
-    &.size-default {
-        height: 32px;
-        font-size: 13px;
-        .switch-bg {
-            height: 25px;
-        }
-    }
-    &.disabled {
-        .switch-bg {
-            opacity: 0.5;
-            cursor: no-drop;
-        }
-    }
-}
-
-</style>

src/global/components/hc-no-data/index.vue

@@ -1,46 +0,0 @@
-<template>
-    <div class="hc-no-data-box">
-        <div class="no-data-c">
-            <img :src="src?src:notableform" alt=""/>
-            <div class="desc">{{tip}}</div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import notableform from '~src/assets/view/notableform.svg';
-const props = defineProps({
-    src: {
-        type: [String,Number],
-        default: ''
-    },
-    tip: {
-        type: [String,Number],
-        default: '暂无数据'
-    },
-})
-</script>
-
-<style lang="scss" scoped>
-.hc-no-data-box {
-    position: relative;
-    height: 100%;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .no-data-c {
-        position: relative;
-        width: 160px;
-        img {
-            width: 100%;
-            height: 100%;
-        }
-        .desc {
-            text-align: center;
-            font-size: 12px;
-            color: #9cbdf7;
-        }
-    }
-}
-</style>

src/global/components/hc-page-header/index.vue

@@ -1,28 +0,0 @@
-<template>
-    <Suspense v-if="isBody">
-        <Teleport to="#hc-header-page-name">
-            <div class="hc-header-page-extra">
-                <slot></slot>
-            </div>
-        </Teleport>
-    </Suspense>
-</template>
-
-<script setup>
-import {nextTick, ref} from "vue";
-const isBody = ref(false)
-
-//渲染完成
-nextTick(()=> {
-    //页面渲染完成后，再让 vue3 的 Teleport，挂载到指定节点
-    isBody.value = true
-})
-
-</script>
-
-<style lang="scss">
-.hc-header-page-extra {
-    position: relative;
-    margin-left: 24px;
-}
-</style>

src/global/components/hc-page/index.vue

@@ -1,91 +0,0 @@
-<template>
-    <div class="card-page-box" :style="`justify-content:${align};`">
-        <el-pagination background layout="total, prev, pager, next, sizes, jumper" :page-sizes="sizes" :total="totalv" :page-size="sizev" :current-page="currentv" @size-change="sizesUpdate" @current-change="pagesUpdate"/>
-    </div>
-</template>
-
-<script setup>
-import {ref,watch} from "vue";
-const props = defineProps({
-    sizes: {
-        type: Array,
-        default: () => ([10, 20, 30, 40, 50])
-    },
-    pages: {
-        type: Object,
-        default: () => ({
-            current: 1,
-            size: 10,
-            total: 0
-        })
-    },
-    align: {
-        type: String,
-        default: 'flex-end'
-    },
-})
-
-//变量
-const objData = ref(JSON.parse(JSON.stringify(props.pages)))
-const currentv = ref(objData.value?.current ?? 0)
-const sizev = ref(objData.value?.size ?? 0)
-const totalv = ref(objData.value?.total ?? 0)
-
-//监听
-watch(() => [
-    props.pages?.current,
-    props.pages?.size,
-    props.pages?.total
-], ([current, size, total]) => {
-    currentv.value = current ?? 0;
-    sizev.value = size ?? 0;
-    totalv.value = total ?? 0;
-})
-
-//事件
-const emit = defineEmits(['change'])
-const pagesUpdate = (val) => {
-    //currentv.value = val;
-    emit('change', {
-        current: val,
-        size: sizev.value
-    })
-}
-
-//条数改变
-const sizesUpdate = (val) => {
-    //sizev.value = val;
-    emit('change', {
-        current: currentv.value,
-        size: val
-    })
-}
-</script>
-
-<style lang="scss" scoped>
-.card-page-box {
-    position: relative;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    flex: 1;
-}
-</style>
-
-<style lang="scss">
-.card-page-box {
-    .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
-        border: 1px solid #e2e2e2;
-    }
-    .el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
-        border: 1px solid var(--el-color-primary);
-    }
-    .el-pagination .el-select .el-input {
-        width: 100px;
-    }
-    .el-pagination__sizes {
-        margin: 0 0 0 16px;
-    }
-}
-
-</style>

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

@@ -31,11 +31,10 @@
                 <div class="form-item-div">{{ linkUserJoinString }}</div>
             </el-form-item>
             <el-form-item label="上报批次">
-                <HcCounter v-model:value="formModel.batch" @update:modelValue="batchUpdateValue"/>
+                <HcCounter v-model="formModel.batch"/>
             </el-form-item>
             <el-form-item label="限定审批时间">
-                <HcCounter v-model:value="formModel.restrictDay" text="(天)"
-                           @update:modelValue="restrictDayUpdateValue"/>
+                <HcCounter v-model="formModel.restrictDay" text="(天)"/>
             </el-form-item>
         </el-form>
         <template #footer>

src/global/components/hc-status/index.vue

@@ -1,76 +0,0 @@
-<template>
-    <div class="hc-page-status-box" :class="ui">
-        <div class="page-status">
-            <img class="page-status-img" :src="nowebp" alt="" v-if="isType === 'NoForm'"/>
-            <div class="page-status-text" v-if="isText">{{isText}}</div>
-            <div class="page-status-desc" v-if="isDesc">{{isDesc}}</div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import {ref,watch} from "vue";
-import nowebp from '~src/assets/view/Web2x_x.webp';
-
-const props = defineProps({
-    ui: {
-        type: String,
-        default: ""
-    },
-    text: {
-        type: String,
-        default: "暂无相关数据"
-    },
-    desc: {
-        type: String,
-        default: ""
-    },
-    type: {
-        type: String,
-        default: "NoForm"
-    },
-})
-
-//变量
-const isType = ref(props.type)
-const isText = ref(props.text)
-const isDesc = ref(props.desc)
-
-//监听
-watch(() => [
-    props.type,
-    props.text,
-    props.desc,
-], ([type, text, desc]) => {
-    isType.value = type
-    isText.value = text
-    isDesc.value = desc
-})
-</script>
-
-<style lang="scss" scoped>
-.hc-page-status-box {
-    position: relative;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .page-status {
-        position: relative;
-        .page-status-img {
-            width: 350px;
-        }
-        .page-status-text {
-            text-align: center;
-            font-size: 20px;
-            color: #aaa;
-        }
-        .page-status-desc {
-            text-align: center;
-            font-size: 14px;
-            color: #c5c5c5;
-            margin-top: 8px;
-        }
-    }
-}
-</style>

src/global/components/hc-table/index.vue

@@ -1,209 +0,0 @@
-<template>
-    <div class="hc-table-ref-box" :class="ui">
-        <el-table ref="tableRef" hc :data="tableData" height="100%" v-loading="isLoading" stripe :row-key="rowKey" :border="isBorder"
-                  @selection-change="tableSelectionChange"
-                  @select="tableSelect"
-                  @select-all="tableSelectAll"
-                  @row-click="tableRowClick"
-                  @row-dblclick="tableRowDblClick"
-                  @row-contextmenu="tableRowContextmenu"
-                  @cell-click="tableCellClick"
-                  @cell-dblclick="tableCellDblClick"
-                  @cell-contextmenu="tableCellContextmenu"
-                  style="width: 100%;"
-                
-                 :cell-style="{ textAlign: 'center' }"
-                 :header-cell-style="{ 'text-align': 'center' }" >
-            <el-table-column type="selection" width="50" v-if="isCheck"/>
-            <el-table-column type="index" prop="num" label="序号" width="80" v-if="isIndex"  />
-            <template v-for="item in columns">
-                <el-table-column :prop="item.key" :label="item.name" :align="item.align ?? 'left'" :width="item.width ?? ''" :fixed="item.fixed ?? false" >
-                    <template #default="scope" v-if="item.isSlot">
-                        <slot :name='item.key' :row="scope.row" :index="scope.$index"></slot>
-                    </template>
-                </el-table-column>
-            </template>
-        </el-table>
-    </div>
-</template>
-
-<script setup>
-import {ref,watch,nextTick,useSlots} from "vue";
-const props = defineProps({
-    ui: {
-        type: String,
-        default: ''
-    },
-    column: {
-        type: Array,
-        default: () => ([])
-    },
-    datas: {
-        type: Array,
-        default: () => ([])
-    },
-    loading: {
-        type: Boolean,
-        default: false
-    },
-    isCheck: {
-        type: Boolean,
-        default: false
-    },
-    isIndex: {
-        type: Boolean,
-        default: true
-    },
-    rowKey: {
-        type: String,
-        default: 'id'
-    },
-    border: {
-        type: Boolean,
-        default: false
-    },
-  
-})
-
-//初始变量
-const tableRef = ref(null)
-const columns = ref(props.column)
-const tableData = ref(props.datas)
-const isLoading = ref(props.loading)
-const isBorder = ref(props.border)
-
-//监听
-watch(() => [
-    props.datas,
-    props.loading,
-    props.border,
-], ([datas, loading, border]) => {
-    tableData.value = datas;
-    isLoading.value = loading;
-    isBorder.value = border;
-})
-
-//监听表头
-watch(() => [
-    props.column
-], ([column]) => {
-    columns.value = column;
-    setIsSlots()
-})
-
-//加载完成
-nextTick(()=>{
-    setIsSlots()
-})
-
-//判断<slot>是否有传值
-const slots = useSlots()
-const setIsSlots = () => {
-    let arr = columns.value
-    for (let i = 0; i < arr.length; i++) {
-        arr[i].isSlot = !!slots[arr[i].key]
-    }
-    columns.value = arr
-}
-
-//事件
-const emit = defineEmits([
-    'selection-change',
-    'row-click', 'row-dblclick', 'row-contextmenu',
-    'cell-click', 'cell-dblclick', 'cell-contextmenu'
-])
-
-//清空多选
-const clearSelection = () => {
-    tableRef.value?.clearSelection()
-    emit('selection-change', [])
-}
-//返回当前选中的行
-const getSelectionRows = () => {
-    tableRef.value?.getSelectionRows()
-}
-
-//用于多选表格，切换某一行的选中状态， 如果使用了第二个参数，则可直接设置这一行选中与否
-const toggleRowSelection = (row, selected) => {
-    tableRef.value?.toggleRowSelection(row, selected)
-}
-
-//多选
-const tableSelectionChange = (rows) => {
-    let tableRows = rows.filter((item) => {
-        return (item??'') !== '';
-    })
-    emit('selection-change', tableRows)
-}
-
-const tableSelect = (selection, row) => {
-    emit('select', {selection, row})
-}
-
-const tableSelectAll = (rows) => {
-    emit('select-all', rows)
-}
-
-//当某一行被点击时会触发该事件
-const tableRowClick = (row, column, event) => {
-    emit('row-click', {row, column, event})
-}
-
-//当某一行被双击时会触发该事件
-const tableRowDblClick = (row, column, event) => {
-    emit('row-dblclick', {row, column, event})
-}
-
-//当某一行被鼠标右键点击时会触发该事件
-const tableRowContextmenu = (row, column, event) => {
-    emit('row-contextmenu', {row, column, event})
-}
-
-//当某个单元格被点击时会触发该事件
-const tableCellClick = (row, column, cell, event) => {
-    emit('cell-click', {row, column, cell, event})
-}
-
-//当某个单元格被双击击时会触发该事件
-const tableCellDblClick = (row, column, cell, event) => {
-    emit('cell-dblclick', {row, column, cell, event})
-}
-
-//当某个单元格被鼠标右键点击时会触发该事件
-const tableCellContextmenu = (row, column, cell, event) => {
-    emit('cell-contextmenu', {row, column, cell, event})
-}
-
-// 暴露出去
-defineExpose({
-    clearSelection,
-    getSelectionRows,
-    toggleRowSelection
-})
-</script>
-
-<style lang="scss">
-.hc-table-ref-box {
-    height: 100%;
-    .el-scrollbar .el-scrollbar__bar.is-vertical {
-        right: 0;
-    }
-    .el-scrollbar .el-scrollbar__bar.is-horizontal {
-        bottom: 2px;
-    }
-    .el-table__body-wrapper tr td.el-table-fixed-column--left,
-    .el-table__body-wrapper tr td.el-table-fixed-column--right,
-    .el-table__body-wrapper tr th.el-table-fixed-column--left,
-    .el-table__body-wrapper tr th.el-table-fixed-column--right,
-    .el-table__footer-wrapper tr td.el-table-fixed-column--left,
-    .el-table__footer-wrapper tr td.el-table-fixed-column--right,
-    .el-table__footer-wrapper tr th.el-table-fixed-column--left,
-    .el-table__footer-wrapper tr th.el-table-fixed-column--right,
-    .el-table__header-wrapper tr td.el-table-fixed-column--left,
-    .el-table__header-wrapper tr td.el-table-fixed-column--right,
-    .el-table__header-wrapper tr th.el-table-fixed-column--left,
-    .el-table__header-wrapper tr th.el-table-fixed-column--right {
-        --el-bg-color: #ebeef0;
-    }
-}
-</style>

src/global/components/hc-tabs-simple/index.vue

@@ -1,184 +0,0 @@
-<template>
-    <div class="hc-sb-table">
-        <svg class="svg-tabs" height="45px" width="40px" xmlns="http://www.w3.org/2000/svg"
-             xmlns:xlink="http://www.w3.org/1999/xlink">
-            <clipPath id="tabs">
-                <path d="M40,45C15,36,33,0,0,0v45H40z" fill-rule="evenodd"/>
-            </clipPath>
-        </svg>
-        <el-tabs v-model="curKey" :class="curIndex === 0 ? 'first' : curIndex === datas.length-1 ? 'fourth' : ''"
-                 @tab-change="tabClick">
-            <el-tab-pane v-for="item in datas" :label="item.label" :name="item.key">
-                <template #label>
-                    <HcIcon v-if="item.icon" :name="item.icon" class="icon"/>
-                    <span class="name">{{ item.label }}</span>
-                </template>
-                <slot :name='`tab-${item.key}`'/>
-            </el-tab-pane>
-        </el-tabs>
-    </div>
-</template>
-
-<script setup>
-import {nextTick, ref, watch} from "vue";
-import {arrIndex} from "js-fast-way"
-
-const props = defineProps({
-    datas: {
-        type: Array,
-        default: () => []
-    },
-    cur: {
-        type: [String, Number],
-        default: ''
-    }
-})
-
-//初始变量
-const curKey = ref(props.cur)
-const curIndex = ref(0)
-
-//监听
-watch(() => [
-    props.cur,
-    props.datas
-], ([cur, datas]) => {
-    curKey.value = cur
-    getCurIndex(datas, cur)
-})
-
-//挂载完成
-nextTick(() => {
-    getCurIndex(props.datas, props.cur)
-})
-
-//获取索引
-const getCurIndex = (datas, key) => {
-    curIndex.value = arrIndex(datas, 'key', key)
-}
-
-//事件
-const emit = defineEmits(['tabClick'])
-const tabClick = (key) => {
-    curKey.value = key;
-    getCurIndex(props.datas, key)
-    emit('tabClick', key)
-}
-</script>
-
-<style lang="scss" scoped>
-.hc-sb-table {
-    position: relative;
-    height: 100%;
-    .svg-tabs {
-        opacity: 0;
-        width: 0;
-        height: 0;
-    }
-}
-</style>
-
-<style lang="scss">
-.hc-sb-table .el-tabs {
-    position: relative;
-    margin-top: -18px;
-    height: 100%;
-    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
-    .el-tabs__header {
-        margin-bottom: 0;
-        .el-tabs__nav-wrap::after {
-            background-color: transparent;
-        }
-        .el-tabs__nav {
-            height: 45px;
-            .el-tabs__item {
-                margin-top: 5px;
-                padding: 0 20px;
-                user-select: none;
-                display: inline-flex;
-                align-content: center;
-                --el-text-color-primary: #838791;
-                background-color: #E5EBEF;
-                &::after {
-                    content: '';
-                    position: absolute;
-                    width: 1px;
-                    height: 15px;
-                    background-color: #CCCCCC;
-                    top: 12px;
-                    left: 0;
-                }
-                .hc-icon-i {
-                    margin-right: 5px;
-                }
-                .hc-icon-i, .name {
-                    position: relative;
-                    z-index: 10;
-                }
-            }
-            .el-tabs__item:nth-child(2) {
-                border-radius: 10px 0 0 0;
-                &::after {
-                    display: none;
-                }
-            }
-            .el-tabs__item:last-child {
-                border-radius: 0 10px 0 0;
-            }
-        }
-    }
-    .el-tabs__active-bar {
-        position: absolute;
-        height: 45px;
-        background: #f1f5f8;
-        &::after,
-        &::before {
-            content: '';
-            background: #f1f5f8;
-            width: 40px;
-            position: absolute;
-            height: 45px;
-            top: 0px;
-            clip-path: url(#tabs);
-            right: -40px;
-        }
-        &::before {
-            left: -40px;
-            right: auto;
-            // 水平翻转
-            transform: scaleX(-1);
-        }
-    }
-    &.first .el-tabs__active-bar {
-        &::before {
-            transform: scaleX(1);
-            left: -20px;
-            clip-path: none;
-            border-radius: 15px 0 0 0;
-        }
-    }
-    &.fourth .el-tabs__active-bar {
-        &::after {
-            transform: scaleX(-1);
-            right: -20px;
-            clip-path: none;
-            border-radius: 15px 0 0 0;
-        }
-    }
-    .el-tabs__content {
-        padding: 0;
-        background: #f1f5f8;
-        border-radius: 0 10px 10px 10px;
-        height: calc(100vh - 140px);
-        .el-tab-pane {
-            position: relative;
-            height: 100%;
-            .hc-card-box.el-card {
-                height: 100%;
-                box-shadow: none;
-                border-radius: initial;
-            }
-        }
-    }
-}
-</style>

src/global/components/index.js

@@ -1,54 +1,18 @@
-import HcImg from './hc-img/index.vue'
-import HcIcon from './hc-icon/index.vue'
-import HcCard from './hc-card/index.vue'
-import HcTable from './hc-table/index.vue'
-import HcPages from './hc-page/index.vue'
-import HcDrawer from './hc-drawer/index.vue'
-import HcDialog from './hc-dialog/index.vue'
-import HcUploads from './hc-uploads/index.vue'
-import HcCounter from './hc-counter/index.vue'
 import HcTooltip from './hc-tooltip/index.vue'
 import HcTipItem from './hc-tooltip/item.vue'
-import HcSmsAuth from './hc-sms-auth/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 HcNewSwitchtype from './hc-new-switchtype/index.vue'
-import HcDragModal from './hc-drag-modal/index.vue'
 import HcReportModal from './hc-report-modal/index.vue'
 import HcTasksUser from './hc-tasks-user/index.vue'
-import HcContextMenu from './hc-context-menu/index.vue'
-import HcTabsSimple from './hc-tabs-simple/index.vue'
-import HcStatus from './hc-status/index.vue'
-import HcPageHeader from './hc-page-header/index.vue'
-import HcNoData from './hc-no-data/index.vue'
-import hcAutoComplete from './hc-auto-complete/index.vue'
+import HcTableForm from './table-form/index.vue'
+import HcUploads from './hc-uploads/index.vue'
+import HcSmsAuth from './hc-sms-auth/index.vue'
 
 //注册全局组件
 export const setupComponents = (App) => {
-    App.component('HcImg', HcImg)
-    App.component('HcIcon', HcIcon)
-    App.component('HcCard', HcCard)
-    App.component('HcTable', HcTable)
-    App.component('HcPages', HcPages)
-    App.component('HcDrawer', HcDrawer)
-    App.component('HcDialog', HcDialog)
-    App.component('HcUploads', HcUploads)
-    App.component('HcCounter', HcCounter)
     App.component('HcTooltip', HcTooltip)
     App.component('HcTipItem', HcTipItem)
-    App.component('HcSmsAuth', HcSmsAuth)
-    App.component('HcMenuSimple', HcMenuSimple)
-    App.component('HcDatePicker', HcDatePicker)
-    App.component('HcNewSwitch', HcNewSwitch)
-    App.component('HcNewSwitchtype', HcNewSwitchtype)
-    App.component('HcDragModal', HcDragModal)
     App.component('HcReportModal', HcReportModal)
     App.component('HcTasksUser', HcTasksUser)
-    App.component('HcContextMenu', HcContextMenu)
-    App.component('HcTabsSimple', HcTabsSimple)
-    App.component('HcStatus', HcStatus)
-    App.component('HcPageHeader', HcPageHeader)
-    App.component('HcNoData', HcNoData)
-    App.component('hcAutoComplete', hcAutoComplete)
+    App.component('HcTableForm', HcTableForm)
+    App.component('HcUploads', HcUploads)
+    App.component('HcSmsAuth', HcSmsAuth)
 }

src/main.js

@@ -8,29 +8,45 @@ import App from './App.vue'
 //饿了么UI
 import ElementPlus from 'element-plus'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
-import 'element-plus/dist/index.css'
-import 'element-plus/theme-chalk/dark/css-vars.css'
 import 'dayjs/locale/zh-cn'
 
+//hc-vue3-ui
+import HcVue3UI from 'hc-vue3-ui'
+import 'hc-vue3-ui/dist/index.css'
+
 //挂载全局
 import {setupComponents} from './global/index'
 
 //导入其它样式
 import "./styles/font/index.scss"
 import 'remixicon/fonts/remixicon.css'
-import "./styles/icon/index.scss"
+//import "./styles/icon/index.scss"
 import "./styles/index.scss"
 
 //创建实例
 async function bootstrap() {
     const app = createApp(App);
-    app.use(setupPinia)         // 挂载状态管理
-    setupComponents(app);       // 组件注册全局
-    await setupRouter(app);     // 挂载路由
-    await router.isReady();     // 路由准备就绪后挂载APP实例
+
+    // 挂载状态管理
+    app.use(setupPinia)
+
+    // 挂载路由
+    await setupRouter(app);
+
+    // 路由准备就绪后挂载APP实例
+    await router.isReady();
+
+    // 饿了么UI框架
     app.use(ElementPlus, {
         locale: zhCn,
-    })  //饿了么UI框架
+    })
+
+    // hc-vue3-ui
+    app.use(HcVue3UI)
+
+    // 组件注册全局
+    setupComponents(app);
+
     app.mount('#app');
 }
 

src/plugins/useOsTheme.js

@@ -1,75 +0,0 @@
-import {ref, onBeforeMount, onBeforeUnmount, getCurrentInstance} from 'vue'
-
-let usedCount = 0, darks, lights, managable = true
-
-const osTheme = ref(null)
-const supportMatchMedia = typeof window !== 'undefined' && window.matchMedia !== undefined
-
-//获取系统主题
-export const useOsTheme = () => {
-    if (process.env.NODE_ENV !== 'test' && !supportMatchMedia) {
-        return osTheme.value
-    }
-    if (process.env.NODE_ENV === 'test' && window.matchMedia === undefined) {
-        return osTheme.value
-    }
-    if (usedCount === 0) init()
-    if (managable && (managable = hasInstance())) {
-        onBeforeMount(() => {
-            usedCount += 1
-        })
-        onBeforeUnmount(() => {
-            usedCount -= 1
-            if (usedCount === 0) clean()
-        })
-    }
-    return osTheme.value
-}
-
-const handleDarkMqlChange = (e) => {
-    if (e.matches) {
-        osTheme.value = 'dark'
-    }
-}
-
-const handleLightMqlChange = (e) => {
-    if (e.matches) {
-        osTheme.value = 'light'
-    }
-}
-
-const init = () => {
-    darks = window.matchMedia('(prefers-color-scheme: dark)')
-    lights = window.matchMedia('(prefers-color-scheme: light)')
-    if (darks.matches) {
-        osTheme.value = 'dark'
-    } else if (lights.matches) {
-        osTheme.value = 'light'
-    } else {
-        osTheme.value = null
-    }
-    if (darks.addEventListener) {
-        darks.addEventListener('change', handleDarkMqlChange)
-        lights.addEventListener('change', handleLightMqlChange)
-    } else if (darks.addListener) {
-        darks.addListener(handleDarkMqlChange)
-        lights.addListener(handleLightMqlChange)
-    }
-}
-
-const clean = () => {
-    if ('removeEventListener' in darks) {
-        darks.removeEventListener('change', handleDarkMqlChange)
-        lights?.removeEventListener('change', handleLightMqlChange)
-    } else if ('removeListener' in darks) {
-        darks?.removeListener(handleDarkMqlChange)
-        lights?.removeListener(handleLightMqlChange)
-    }
-
-    darks = undefined
-    lights = undefined
-}
-
-export const hasInstance = () => {
-    return getCurrentInstance() !== null
-}

src/store/modules/user.js

@@ -8,7 +8,7 @@ import {setStoreValue} from "~src/utils/storage";
 import {userLogin, refreshToken, logout} from '~api/user';
 import {userConfigInfo, userConfigSave} from "~api/other";
 import {ArrToOneObj, getArrValue, arrIndex, getObjValue} from "js-fast-way"
-import {useOsTheme} from '~src/plugins/useOsTheme';
+import {useOsTheme} from 'hc-vue3-ui'
 
 //初始变量
 const store = useAppStore(pinia)
@@ -45,7 +45,7 @@ export const initUserConfigInfo = async () => {
         store.setTheme(theme)
         //设置模式
         if (theme === 'auto') {
-            store.setThemeVal(useOsTheme().value)
+            store.setThemeVal(useOsTheme())
         } else {
             store.setThemeVal(theme)
         }

src/styles/app/_var.scss

@@ -1,707 +0,0 @@
-//饿了么UI组件的样式重绘
-.el-button[block] {
-    width: 100%;
-}
-.el-button .hc-icon-i {
-    margin-right: 4px;
-}
-.el-button.is-loading .hc-icon-i {
-    display: none;
-}
-//主色
-.el-button--primary.is-link,
-.el-button--primary.is-plain,
-.el-button--primary.is-text {
-    --el-button-border-color: transparent;
-    --el-button-hover-text-color: var(--el-color-primary);
-    --el-button-hover-bg-color: var(--el-color-primary-light-8);
-    --el-button-hover-border-color: transparent;
-}
-//红色
-.el-button--danger.is-link,
-.el-button--danger.is-plain,
-.el-button--danger.is-text {
-    --el-button-border-color: transparent;
-    --el-button-hover-text-color: var(--el-color-danger);
-    --el-button-hover-bg-color: var(--el-color-danger-light-8);
-    --el-button-hover-border-color: transparent;
-}
-//绿色
-.el-button--success.is-link,
-.el-button--success.is-plain,
-.el-button--success.is-text {
-    --el-button-border-color: transparent;
-    --el-button-hover-text-color: var(--el-color-success);
-    --el-button-hover-bg-color: var(--el-color-success-light-8);
-    --el-button-hover-border-color: transparent;
-}
-.el-button + .el-button {
-    margin-left: 20px;
-}
-.el-button--small + .el-button--small {
-    margin-left: 5px;
-}
-
-//单选框、多选框
-.el-checkbox.size-xl .el-checkbox__inner,
-.el-radio.size-xl .el-radio__inner {
-    width: 18px;
-    height: 18px;
-}
-.el-checkbox.size-xl .el-checkbox__label,
-.el-radio.size-xl .el-radio__label {
-    font-size: 16px;
-    font-weight: 400;
-}
-
-.el-checkbox.size-xl .el-checkbox__inner::after {
-    height: 10px;
-    left: 6px;
-    top: 1px;
-}
-.el-radio.size-xl .el-radio__inner::after {
-    width: 8px;
-    height: 8px;
-}
-
-//消息提示
-.el-message {
-    --el-message-padding: 10px 20px;
-    border: 0;
-    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.012), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-}
-
-//按钮重绘
-.el-button[hc-btn] {
-    border-radius: 6px;
-    padding: 8px 20px;
-    font-weight: 400;
-    height: 40px;
-    border: 1px solid #f1f5f8;
-    box-shadow: var(--hc-shadow);
-    &.el-button--small {
-        height: 26px;
-        padding: 5px 11px;
-        font-size: 12px;
-    }
-    &[_icon] .hc-icon-i {
-        margin-right: 0;
-    }
-    &[_icon].el-button--small {
-        height: 26px;
-        width: 26px;
-        padding: 3px;
-        font-size: 18px;
-        border-radius: 3px;
-    }
-    &[text-white] {
-        --el-button-text-color: white !important;
-        --el-button-hover-text-color: white !important;
-    }
-    &.el-button--primary {
-        background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary), var(--el-color-primary-dark-2));
-        background-size: 200%;
-        transition: background-position .5s;
-        &:hover {
-            background-position: 100% 0;
-        }
-    }
-    &.is-loading:not([class*='el-button--']) {
-        --el-button-bg-color: #f3f3f3;
-        --el-button-text-color: #8c9099;
-    }
-    &.is-disabled:not([class*='el-button--']) {
-        --el-button-disabled-text-color: #bfbfbf;
-        --el-button-disabled-bg-color: #f3f3f3;
-    }
-    &:not([class*='el-button--']) {
-        --el-button-bg-color: #f1f5f8;
-        --el-button-text-color: #838791;
-        --el-button-hover-text-color: #838791;
-        --el-button-active-text-color: #838791;
-        --el-button-hover-bg-color: var(--el-color-primary-light-9);
-        --el-button-active-bg-color: var(--el-color-primary-light-8);
-    }
-    &.el-button--primary.is-plain {
-        --el-button-text-color: var(--el-color-primary);
-        --el-button-bg-color: var(--el-color-primary-light-9);
-        --el-button-hover-text-color: var(--el-color-primary);
-        --el-button-hover-bg-color: var(--el-color-primary-light-8);
-        --el-button-active-text-color: var(--el-color-primary);
-        --el-button-active-bg-color: var(--el-color-primary-light-7);
-    }
-    &.is-disabled, &.is-disabled:focus, &.is-disabled:hover {
-        color: var(--el-button-disabled-text-color);
-        cursor: not-allowed;
-        background-image: none;
-        background-color: var(--el-button-disabled-bg-color);
-        border-color: var(--el-button-disabled-border-color);
-    }
-}
-
-//表单
-.el-form {
-    position: relative;
-    overflow: hidden;
-    .hc-form-item {
-        position: relative;
-        display: flex;
-        .el-form-item {
-            flex: 1;
-            margin-right: 24px;
-        }
-        .el-form-item + .el-form-item {
-            margin-left: 24px;
-        }
-        .el-form-item:last-child {
-            margin-right: 0;
-        }
-    }
-    &.el-form--label-top .hc-form-item .el-form-item .el-form-item__label {
-        position: relative;
-        .solt-label {
-            position: relative;
-            width: calc(100% - 50px);
-        }
-        .solt-extra {
-            position: absolute;
-            right: 0;
-            top: 0;
-        }
-    }
-}
-
-//滚动条
-.el-scrollbar {
-    overflow: initial;
-    .el-scrollbar__bar.is-vertical {
-        //right: -16px;
-    }
-    .el-scrollbar__bar.is-horizontal {
-        //bottom: -20px;
-    }
-}
-
-.el-date-editor.el-input.block,
-.el-date-editor.block .el-input__wrapper {
-    width: 100%;
-}
-
-.el-autocomplete.block {
-    width: 100%;
-}
-
-//个人中心项目列表
-.hc-project-menu.el-menu {
-    --el-menu-level: 0;
-    background-color: initial;
-    border: initial;
-    .el-sub-menu {
-        border: 1px solid #e9e9e9;
-        border-radius: 3px;
-        margin-bottom: 20px;
-        .el-sub-menu__title .hc-menu-icon {
-            font-size: 20px;
-            margin-right: 10px;
-        }
-        &.is-opened .el-sub-menu__title {
-            color: var(--el-color-primary);
-            background-color: var(--el-color-primary-light-8);
-        }
-        .el-menu {
-            background-color: initial;
-        }
-        .el-menu-item {
-            padding-left: 50px;
-        }
-    }
-    .el-menu-item.is-active {
-        color: var(--el-menu-active-color);
-        background-color: var(--el-color-primary-light-9);
-        .hc-menu-icon {
-            position: absolute;
-            font-size: 16px;
-            left: 22px;
-        }
-    }
-}
-
-//表格
-.el-table[hc] {
-    --el-table-bg-color: initial;
-    --el-table-header-bg-color: #DAE8F3;
-    --el-table-header-text-color: #50545E;
-    --el-table-tr-bg-color: #F1F5F8;
-    --el-fill-color-lighter: #E7EEF4;
-    --el-table-text-color: #666666;
-    --el-table-row-hover-bg-color: var(--el-color-primary-light-9);
-    th.el-table__cell > .cell {
-        font-weight: 400;
-    }
-    .el-table__cell {
-        padding: 12px 0;
-        .el-checkbox {
-            --el-checkbox-input-height: 18px;
-            --el-checkbox-input-width: 18px;
-            --el-checkbox-font-size: 16px;
-            --el-checkbox-border-radius: 3px;
-            .el-checkbox__inner::after {
-                top: 3px;
-                left: 6px;
-            }
-        }
-        .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
-            top: 7px;
-        }
-    }
-    &.el-table--border {
-        --el-table-border-color: #e9e9e9;
-    }
-}
-.el-table[hc]:not([class*='el-table--border']) {
-    .el-table__inner-wrapper::before {
-        background-color: transparent;
-    }
-}
-
-//下拉框
-.el-select[block] {
-    width: 100%;
-}
-
-//工单服务的时间轴
-.time-line-box .el-timeline.hc-time-line {
-    padding-left: 5px;
-    padding-top: 5px;
-    .el-timeline-item {
-        padding-bottom: 24px;
-        .el-timeline-item__tail {
-            top: 28px;
-            left: 6px;
-            height: calc(100% - 36px);
-            border-width: 1px;
-            border-color: #838791;
-        }
-        .el-timeline-item__node {
-            display: none;
-        }
-        .el-timeline-item__wrapper {
-            padding-left: 38px;
-            .el-timeline-item__content {
-                .timeline-item-icon {
-                    position: absolute;
-                    width: 24px;
-                    height: 24px;
-                    left: -5px;
-                    border: 1px solid #838791;
-                    border-radius: 50px;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    color: #838791;
-                    .check-icon {
-                        font-size: 18px;
-                    }
-                }
-                .reply-name {
-                    color: #838791;
-                    font-size: 18px;
-                }
-                .reply-content {
-                    color: #838791;
-                    margin-top: 5px;
-                }
-            }
-        }
-        &.success {
-            .el-timeline-item__tail {
-                border-color: var(--el-color-primary);
-            }
-            .el-timeline-item__wrapper .el-timeline-item__content .timeline-item-icon {
-                color: var(--el-color-primary);
-                border: 1px solid var(--el-color-primary);
-            }
-        }
-        &.primary {
-            .el-timeline-item__wrapper .el-timeline-item__content {
-                .reply-name {
-                    color: #1A1A1A;
-                }
-                .timeline-item-icon {
-                    background-color: var(--el-color-primary);
-                    border: 1px solid var(--el-color-primary);
-                    color: #ffffff;
-                }
-            }
-        }
-    }
-}
-
-//滚动条
-/*.el-scrollbar {
-    scroll-behavior: smooth;
-    .el-scrollbar__wrap--hidden-default {
-        scroll-behavior: smooth;
-    }
-}*/
-
-//弹窗
-.el-overlay-dialog {
-    .el-dialog.hc-modal-border {
-        .el-dialog__header {
-            padding-bottom: var(--el-dialog-padding-primary);
-            border-bottom: 1px solid #EEEEEE;
-            margin-right: 0;
-        }
-        .el-dialog__footer {
-            border-top: 1px solid #EEEEEE;
-            padding-top: var(--el-dialog-padding-primary);
-        }
-    }
-    .el-dialog.hc-modal-nop {
-        .el-dialog__body {
-            padding: 0;
-        }
-    }
-}
-
-//上传
-.el-upload-list.el-upload-list--picture-card {
-    --el-upload-list-picture-card-size: 88px;
-    .el-upload--picture-card {
-        --el-upload-picture-card-size: 88px;
-        .hc-upload-icon {
-            font-size: 39px;
-        }
-    }
-}
-
-//头像
-.el-avatar {
-    color: initial !important;
-    background: initial !important;
-}
-
-//表格
-.hc-table-ref-box {
-    position: relative;
-    display: inline-grid;
-    border: 1px solid #e9e9e9;
-    width: 100%;
-}
-
-//naiveui 鼠标右键菜单的图标
-.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__prefix.n-dropdown-option-body__prefix--show-icon {
-    font-size: 22px;
-}
-
-//树
-.el-tree.hc-tree-node, .el-tree.hc-tree-node-v2 {
-    --el-fill-color-blank: transparent;
-    --el-tree-node-hover-bg-color: var(--el-color-primary-light-9);
-    --el-tree-text-color: #50545E;
-    --el-tree-expand-icon-color: #838791;
-    background: var(--el-fill-color-blank);
-    color: var(--el-tree-text-color);
-    .el-tree-node__content {
-        border-radius: 2px;
-    }
-    &.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
-        background-color: var(--el-color-primary-light-7);
-    }
-    .el-tree-node__expand-icon {
-        font-size: 16px;
-    }
-    .el-tree-node__children {
-        overflow: visible !important;
-    }
-}
-.el-alert .el-alert__icon {
-    vertical-align: middle;
-}
-//弹窗提示
-.el-dialog .el-dialog__body {
-    position: relative;
-    max-height: 60vh;
-    overflow: auto;
-    .el-alert {
-        margin-top: -10px;
-        margin-bottom: 20px;
-    }
-
-}
-.el-dialog.hc-modal-table .el-dialog__body {
-    height: 60vh;
-}
-
-//上传文件列表
-.hc-upload-border {
-    .hc-upload-loading {
-        position: relative;
-    }
-    .el-upload-list {
-        border-top: 1px solid #f1f1f1;
-        margin-top: 24px;
-        padding-top: 24px;
-    }
-}
-
-//伪表单
-.el-form-item--large .el-form-item__content {
-    .form-item-div, .form-item-dashed {
-        position: relative;
-        color: #606266;
-        font-size: 14px;
-        padding: 0 12px;
-        height: 40px;
-        width: 100%;
-        border-radius: 4px;
-        display: flex;
-        align-items: center;
-        &.hover {
-            cursor: pointer;
-            transition: border 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)
-        }
-    }
-    .form-item-div {
-        border: 1px solid #dddfe6;
-    }
-    .form-item-dashed {
-        border: 1px dashed #dddfe6;
-    }
-    .form-item-div.hover, .form-item-dashed.hover {
-        &:hover {
-            border-color: var(--el-color-primary);
-        }
-    }
-}
-
-//无名称
-.el-form-item[no-label] .el-form-item__label-wrap {
-    margin-left: 0 !important;
-}
-
-.el-form--large.el-form--label-top .el-form-item .el-form-item__label {
-    min-height: 22px;
-}
-
-.el-form-item--large.mb-0 {
-    margin-bottom: 0;
-}
-
-//输入框验证问题
-.el-input.is-error .el-input__wrapper {
-    box-shadow: 0 0 0 1px var(--el-color-danger) inset;
-}
-
-//表单输入框和按钮组合
-.el-form-item.hc-input-button-group .el-form-item__content {
-    .el-input {
-        flex: 1;
-        .el-input__wrapper {
-            border-radius: 4px 0 0 4px;
-        }
-    }
-    .el-button {
-        border-radius: 0 4px 4px 0;
-    }
-}
-
-//设置表单的上传
-.hc-upload-table-form {
-    position: relative;
-    height: inherit;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .el-upload {
-        position: relative;
-        flex: 1;
-        height: inherit;
-        color: #ccc;
-        .hc-table-form-icon {
-            font-size: 24px;
-            font-weight: 100;
-        }
-        .hc-table-form-img {
-            width: 100%;
-            height: inherit;
-        }
-        .hc-table-form-del {
-            position: absolute;
-            right: 0;
-            top: 0;
-        }
-    }
-}
-
-//表单提示样式
-.el-popper.is-customized {
-    padding: 6px 12px;
-    background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
-}
-
-.el-popper.is-customized .el-popper__arrow::before {
-    background: linear-gradient(45deg, #b2e68d, #bce689);
-    right: 0;
-}
-
-// 树样式
-.hc-tree-node, .el-tree.hc-tree-node-v2 {
-    .data-custom-tree-node {
-        position: relative;
-        display: flex;
-        align-items: center;
-        width: 100%;
-        color: var(--el-text-color-primary);
-        .label {
-            flex: auto;
-            font-size: 16px;
-            .hc-tree-node-type {
-                display: inline-block;
-                background: #7729F5;
-                font-size: 14px;
-                color: white;
-                width: 20px;
-                height: 20px;
-                border-radius: 5px;
-                text-align: center;
-                line-height: 20px;
-                margin-right: 8px;
-            }
-        }
-        .label.level-name {
-            font-size: 18px;
-            font-weight: bold;
-        }
-    }
-    .el-tree-node__content {
-        height: 28px;
-    }
-    .el-tree-node__label {
-        flex: 1;
-        user-select: none;
-    }
-    &.tree-line .el-tree-node.is-expanded.is-current.is-focusable {
-        background: #cacaca;
-        border-radius: 4px;
-    }
-}
-
-.ui-drag-modal-box .hc-image-preview-box.ui-drag-modal-dialog .ui-drag-modal-dialog-body {
-    .hc-image-preview-view {
-        position: relative;
-        overflow: hidden;
-        height: 100%;
-        width: 100%;
-        .el-image-viewer__wrapper {
-            position: relative;
-            width: 100%;
-            height: 100%;
-            .el-image-viewer__mask {
-                border-radius: 3px;
-                box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.10);
-            }
-            .el-image-viewer__close {
-                display: none;
-            }
-            .el-image-viewer__actions {
-                bottom: 10px;
-            }
-        }
-    }
-}
-
-//下拉框的滚动条
-.el-select__popper.el-popper .el-select-dropdown .el-scrollbar .el-scrollbar__bar.is-vertical {
-    right: 1px;
-}
-
-.el-loading-mask {
-    z-index: 99999;
-}
-
-.scroll-bar-right-16.el-scrollbar {
-    .el-scrollbar__bar {
-        right: -16px;
-    }
-}
-
-//设置表单样式
-.hc-excel-table-form-view {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    table {
-        // width: 100%;
-    }
-    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;
-            color: #606266;
-            .el-input__wrapper {
-                background-color: inherit;
-                caret-color: var(--el-color-primary);
-            }
-            .el-input__suffix-inner {
-                width: 18px;
-            }
-        }
-        .el-textarea {
-            width: 100%;
-            height: 100%;
-            .el-textarea__inner {
-                min-height: initial !important;
-                background-color: #ffffff;
-                border-radius: 3px;
-                color: #606266;
-                height: 100%;
-                caret-color: var(--el-color-primary);
-            }
-        }
-        //日期选择框
-        .el-date-editor.el-input .el-input__wrapper,
-        .el-date-editor.el-date-editor--datetimerange.el-input__wrapper {
-            height: 100%;
-            width: 100%;
-        }
-        //焦点
-        .el-input .el-input__wrapper.is-focus, .el-input .el-input__wrapper:hover,
-        .el-textarea .el-textarea__inner:hover {
-            box-shadow: 0 0 0 1.5px var(--el-input-focus-border-color) inset;
-            background-color: #eddac4;
-        }
-        //公式
-        &[gscolor] {
-            .el-input, .el-textarea .el-textarea__inner {
-                background-color: #dcdcdc !important;
-            }
-        }
-        //文本选中颜色
-        .el-input .el-input__wrapper input,
-        .el-textarea textarea {
-            &::selection {
-                background: var(--el-color-primary-light-9);
-                color: var(--el-color-primary);
-            }
-            &::-moz-selection {
-                background: var(--el-color-primary-light-9);
-                color: var(--el-color-primary);
-            }
-        }
-        //下拉框
-        .el-select {
-            width: 100%;
-            height: 100%;
-        }
-    }
-    //非输入框颜色
-    td:not([titlexx]), td[titlexx*=''],
-    td:not([title]), td[title*=''] {
-        background-color: #f1f5f8 !important;
-    }
-}
-

src/styles/app/main.scss

@@ -2,252 +2,81 @@ html, body, #app {
     height: 100%;
     background-color: #F1F5F8;
 }
-* {
-    padding: 0;
-    margin: 0;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    /* 滚动条凹槽的颜色，还可以设置边框属性 */
-    &::-webkit-scrollbar-track-piece {
-        background-color: #f8f8f8;
-        -webkit-border-radius: 2em;
-        -moz-border-radius: 2em;
-        border-radius: 2em;
-    }
-    /* 滚动条的宽度 */
-    &::-webkit-scrollbar {
-        width: 9px;
-        height: 9px;
-    }
-    /* 滚动条的设置 */
-    &::-webkit-scrollbar-thumb {
-        background-color: #ddd;
-        background-clip: padding-box;
-        -webkit-border-radius: 2em;
-        -moz-border-radius: 2em;
-        border-radius: 2em;
-    }
-    /* 滚动条鼠标移上去 */
-    &::-webkit-scrollbar-thumb:hover {
-        background-color: #bbb;
-    }
-}
 
-.us-se-no {
-    user-select: none;
-}
-
-.lr-dialog-footer {
+//设置表单样式
+.hc-excel-table-form-view {
     position: relative;
     display: flex;
-    align-items: flex-end;
-    justify-content: space-between;
-    .left {
-        .el-button + .el-button {
-            margin-left: 10px;
-        }
+    justify-content: center;
+    table {
+        // width: 100%;
     }
-}
-
-.hc-flex-column {
-    display: flex;
-    flex-direction: column;
-}
-
-.hc-sticky-box {
-    position: sticky;
-    z-index: 99;
-    top: 0;
-}
-
-.pover-menu-list {
-    position: relative;
-    .list-item {
-        position: relative;
-        border-radius: 5px;
-        padding: 10px 14px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        transition: color 0.3s, background-color 0.3s;
-        .text {
-            flex: auto;
-            margin-left: 0;
-            margin-right: 20px;
-        }
-        i {
-            font-size: 22px;
-        }
-        &:hover {
-            color: var(--el-color-primary);
-            background-color: var(--el-color-primary-light-7);
-        }
-    }
-}
-
-#toolPanel, #optionPanel {
-    border-radius: 5px;
-    box-shadow: 0 .5em 1em rgba(0, 0, 0, 0.15);
-}
-
-.el-radio-group .el-radio {
-    margin-right: 10px;
-}
-
-.bg-card-main {
-    background-color: var(--hc-bg-color);
-}
-
-.hc-list-box {
-    position: relative;
-    .item {
-        position: relative;
-        display: flex;
-        align-items: center;
-        .label {
-            flex: 1;
-        }
-        &.item {
-            margin-top: 15px;
+    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;
+            color: #606266;
+            .el-input__wrapper {
+                background-color: inherit;
+                caret-color: var(--el-color-primary);
+            }
+            .el-input__suffix-inner {
+                width: 18px;
+            }
         }
-    }
-}
-
-.fade-enter-active,
-.fade-leave-active {
-    transition: opacity 0.5s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-    opacity: 0;
-}
-
-/* fade-transform */
-.fade-transform-leave-active,
-.fade-transform-enter-active {
-    transition: all 0.5s;
-}
-
-.fade-transform-enter-from {
-    opacity: 0;
-    transform: translateX(-30px);
-}
-
-.fade-transform-leave-to {
-    opacity: 0;
-    transform: translateX(30px);
-}
-
-.hc-page-layout-box {
-    display: flex;
-    position: relative;
-    height: 100%;
-    .hc-layout-left-box {
-        width: 382px;
-        position: relative;
-        background: #f1f5f8;
-        border-radius: 10px;
-        margin-right: 24px;
-        box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
-        .horizontal-drag-line {
-            position: absolute;
-            right: 0;
-            top: 0;
-            width: 4px;
+        .el-textarea {
+            width: 100%;
             height: 100%;
-            user-select: none;
-            cursor: col-resize;
-            background-color: #00000000;
-        }
-        .hc-project-box {
-            position: relative;
-            padding: 15px 24px;
-            display: flex;
-            align-items: flex-start;
-            border-bottom: 1px solid #E9E9E9;
-            .hc-project-icon-box {
-                font-size: 30px;
-                color: var(--el-color-primary);
-            }
-            .project-name-box {
-                flex: auto;
-                position: relative;
-                overflow: hidden;
-                .project-alias {
-                    color: var(--el-color-primary);
-                }
-                .project-name {
-                    margin-top: 6px;
-                    color: #838791;
-                }
+            .el-textarea__inner {
+                min-height: initial !important;
+                background-color: #ffffff;
+                border-radius: 3px;
+                color: #606266;
+                height: 100%;
+                caret-color: var(--el-color-primary);
             }
         }
-        .hc-tree-box {
-            position: relative;
-            padding: 15px 20px;
-            height: calc(100% - 80px);
+        //日期选择框
+        .el-date-editor.el-input .el-input__wrapper,
+        .el-date-editor.el-date-editor--datetimerange.el-input__wrapper {
+            height: 100%;
+            width: 100%;
+        }
+        //焦点
+        .el-input .el-input__wrapper.is-focus, .el-input .el-input__wrapper:hover,
+        .el-textarea .el-textarea__inner:hover {
+            box-shadow: 0 0 0 1.5px var(--el-input-focus-border-color) inset;
+            background-color: #eddac4;
         }
-        .hc-tree-search-box {
-            position: relative;
-            padding: 15px 20px;
-            height: calc(100% - 187px);
-            .hc-search-tree-val {
-                position: relative;
-                margin-bottom: 24px;
-            }
-            .hc-tree-scrollbar {
-                position: relative;
-                height: calc(100% - 68px);
+        //公式
+        &[gscolor] {
+            .el-input, .el-textarea .el-textarea__inner {
+                background-color: #dcdcdc !important;
             }
         }
-        &.menu {
-            width: 240px;
-            .hc-menu-header-box {
-                position: relative;
-                padding: 15px 18px;
-                display: flex;
-                align-items: center;
-                border-bottom: 1px solid #E9E9E9;
-                .name {
-                    flex: auto;
-                    position: relative;
-                }
+        //文本选中颜色
+        .el-input .el-input__wrapper input,
+        .el-textarea textarea {
+            &::selection {
+                background: var(--el-color-primary-light-9);
+                color: var(--el-color-primary);
             }
-            .hc-menu-contents-box {
-                position: relative;
-                //padding: 15px 18px;
-                height: calc(100% - 60px);
+            &::-moz-selection {
+                background: var(--el-color-primary-light-9);
+                color: var(--el-color-primary);
             }
         }
+        //下拉框
+        .el-select {
+            width: 100%;
+            height: 100%;
+        }
     }
-    .hc-page-content-box {
-        flex: 1;
-        position: relative;
+    //非输入框颜色
+    td:not([titlexx]), td[titlexx*=''],
+    td:not([title]), td[title*=''] {
+        background-color: #f1f5f8 !important;
     }
 }
-
-.hc-page-box {
-    position: relative;
-    height: 100%;
-}
-.z-9999 {
-    z-index: 9999 !important;
-}
-
-//分割的样式
-.gutter {
-    background-color: #f1f5f8;
-    background-repeat: no-repeat;
-    background-position: 50%;
-}
-
-.gutter.gutter-vertical {
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
-    cursor: row-resize;
-}
-
-.gutter.gutter-horizontal {
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
-    cursor: col-resize;
-}

src/styles/index.scss

@@ -1,5 +1,3 @@
-@import './app/color';
-@import './app/text';
 @import './app/main';
 @import './app/element';
 @import './app/theme';

src/styles_bak/app/_var.scss

@@ -0,0 +1,74 @@
+$white:   	#ffffff;
+$blue:   	#0081ff;
+$cyan:   	#37c0fe;
+$green:   	#1ECC95;
+$purple:   	#8044de;
+$mauve:   	#b745cb;
+$pink:   	#e03997;
+$red:   	#e54d42;
+$orange:   	#f37b1d;
+$yellow:   	#fbbd08;
+$brown:   	#a5673f;
+$grey:   	#8799a3;
+
+//基础颜色数组
+$colors: (
+    'white':    $white,
+    'blue':  	$blue,
+    'cyan':  	$cyan,
+    'green':  	$green,
+    'purple':  	$purple,
+    'mauve':  	$mauve,
+    'pink':  	$pink,
+    'red':  	$red,
+    'orange':  	$orange,
+    'yellow':  	$yellow,
+    'brown':  	$brown,
+    'grey':  	$grey
+);
+
+$gray-a:	#aaaaaa;
+$gray-b:    #bbbbbb;
+$gray-c:    #cccccc;
+$gray-d:    #dddddd;
+$gray-e:    #eeeeee;
+$gray-f: 	#f8f9fa;
+$gray-g: 	#f8fafc;
+
+$grays: (
+    'gray':  	$gray-a,
+    'gray-a':  	$gray-a,
+    'gray-b':  	$gray-b,
+    'gray-c':  	$gray-c,
+    'gray-d':  	$gray-d,
+    'gray-e':  	$gray-e,
+    'gray-f':  	$gray-f,
+    'gray-g':  	$gray-g
+);
+
+//灰度
+$dark-1:    #111111;
+$dark-2:    #222222;
+$dark-3:    #333333;
+$dark-4:    #444444;
+$dark-5:    #555555;
+$dark-6:    #666666;
+$dark-7:    #777777;
+$dark-8:    #888888;
+$dark-9:    #999999;
+
+$darks: (
+    'dark':  	$dark-1,
+    'dark-1':  	$dark-1,
+    'dark-2':  	$dark-2,
+    'dark-3':  	$dark-3,
+    'dark-4':  	$dark-4,
+    'dark-5':  	$dark-5,
+    'dark-6':  	$dark-6,
+    'dark-7':  	$dark-7,
+    'dark-8':  	$dark-8,
+    'dark-9':  	$dark-9
+);
+
+$inherits: inherit !important;
+$initials: initial !important;

src/styles_bak/app/element.scss

@@ -0,0 +1,707 @@
+//饿了么UI组件的样式重绘
+.el-button[block] {
+    width: 100%;
+}
+.el-button .hc-icon-i {
+    margin-right: 4px;
+}
+.el-button.is-loading .hc-icon-i {
+    display: none;
+}
+//主色
+.el-button--primary.is-link,
+.el-button--primary.is-plain,
+.el-button--primary.is-text {
+    --el-button-border-color: transparent;
+    --el-button-hover-text-color: var(--el-color-primary);
+    --el-button-hover-bg-color: var(--el-color-primary-light-8);
+    --el-button-hover-border-color: transparent;
+}
+//红色
+.el-button--danger.is-link,
+.el-button--danger.is-plain,
+.el-button--danger.is-text {
+    --el-button-border-color: transparent;
+    --el-button-hover-text-color: var(--el-color-danger);
+    --el-button-hover-bg-color: var(--el-color-danger-light-8);
+    --el-button-hover-border-color: transparent;
+}
+//绿色
+.el-button--success.is-link,
+.el-button--success.is-plain,
+.el-button--success.is-text {
+    --el-button-border-color: transparent;
+    --el-button-hover-text-color: var(--el-color-success);
+    --el-button-hover-bg-color: var(--el-color-success-light-8);
+    --el-button-hover-border-color: transparent;
+}
+.el-button + .el-button {
+    margin-left: 20px;
+}
+.el-button--small + .el-button--small {
+    margin-left: 5px;
+}
+
+//单选框、多选框
+.el-checkbox.size-xl .el-checkbox__inner,
+.el-radio.size-xl .el-radio__inner {
+    width: 18px;
+    height: 18px;
+}
+.el-checkbox.size-xl .el-checkbox__label,
+.el-radio.size-xl .el-radio__label {
+    font-size: 16px;
+    font-weight: 400;
+}
+
+.el-checkbox.size-xl .el-checkbox__inner::after {
+    height: 10px;
+    left: 6px;
+    top: 1px;
+}
+.el-radio.size-xl .el-radio__inner::after {
+    width: 8px;
+    height: 8px;
+}
+
+//消息提示
+.el-message {
+    --el-message-padding: 10px 20px;
+    border: 0;
+    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.012), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}
+
+//按钮重绘
+.el-button[hc-btn] {
+    border-radius: 6px;
+    padding: 8px 20px;
+    font-weight: 400;
+    height: 40px;
+    border: 1px solid #f1f5f8;
+    box-shadow: var(--hc-shadow);
+    &.el-button--small {
+        height: 26px;
+        padding: 5px 11px;
+        font-size: 12px;
+    }
+    &[_icon] .hc-icon-i {
+        margin-right: 0;
+    }
+    &[_icon].el-button--small {
+        height: 26px;
+        width: 26px;
+        padding: 3px;
+        font-size: 18px;
+        border-radius: 3px;
+    }
+    &[text-white] {
+        --el-button-text-color: white !important;
+        --el-button-hover-text-color: white !important;
+    }
+    &.el-button--primary {
+        background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary), var(--el-color-primary-dark-2));
+        background-size: 200%;
+        transition: background-position .5s;
+        &:hover {
+            background-position: 100% 0;
+        }
+    }
+    &.is-loading:not([class*='el-button--']) {
+        --el-button-bg-color: #f3f3f3;
+        --el-button-text-color: #8c9099;
+    }
+    &.is-disabled:not([class*='el-button--']) {
+        --el-button-disabled-text-color: #bfbfbf;
+        --el-button-disabled-bg-color: #f3f3f3;
+    }
+    &:not([class*='el-button--']) {
+        --el-button-bg-color: #f1f5f8;
+        --el-button-text-color: #838791;
+        --el-button-hover-text-color: #838791;
+        --el-button-active-text-color: #838791;
+        --el-button-hover-bg-color: var(--el-color-primary-light-9);
+        --el-button-active-bg-color: var(--el-color-primary-light-8);
+    }
+    &.el-button--primary.is-plain {
+        --el-button-text-color: var(--el-color-primary);
+        --el-button-bg-color: var(--el-color-primary-light-9);
+        --el-button-hover-text-color: var(--el-color-primary);
+        --el-button-hover-bg-color: var(--el-color-primary-light-8);
+        --el-button-active-text-color: var(--el-color-primary);
+        --el-button-active-bg-color: var(--el-color-primary-light-7);
+    }
+    &.is-disabled, &.is-disabled:focus, &.is-disabled:hover {
+        color: var(--el-button-disabled-text-color);
+        cursor: not-allowed;
+        background-image: none;
+        background-color: var(--el-button-disabled-bg-color);
+        border-color: var(--el-button-disabled-border-color);
+    }
+}
+
+//表单
+.el-form {
+    position: relative;
+    overflow: hidden;
+    .hc-form-item {
+        position: relative;
+        display: flex;
+        .el-form-item {
+            flex: 1;
+            margin-right: 24px;
+        }
+        .el-form-item + .el-form-item {
+            margin-left: 24px;
+        }
+        .el-form-item:last-child {
+            margin-right: 0;
+        }
+    }
+    &.el-form--label-top .hc-form-item .el-form-item .el-form-item__label {
+        position: relative;
+        .solt-label {
+            position: relative;
+            width: calc(100% - 50px);
+        }
+        .solt-extra {
+            position: absolute;
+            right: 0;
+            top: 0;
+        }
+    }
+}
+
+//滚动条
+.el-scrollbar {
+    overflow: initial;
+    .el-scrollbar__bar.is-vertical {
+        //right: -16px;
+    }
+    .el-scrollbar__bar.is-horizontal {
+        //bottom: -20px;
+    }
+}
+
+.el-date-editor.el-input.block,
+.el-date-editor.block .el-input__wrapper {
+    width: 100%;
+}
+
+.el-autocomplete.block {
+    width: 100%;
+}
+
+//个人中心项目列表
+.hc-project-menu.el-menu {
+    --el-menu-level: 0;
+    background-color: initial;
+    border: initial;
+    .el-sub-menu {
+        border: 1px solid #e9e9e9;
+        border-radius: 3px;
+        margin-bottom: 20px;
+        .el-sub-menu__title .hc-menu-icon {
+            font-size: 20px;
+            margin-right: 10px;
+        }
+        &.is-opened .el-sub-menu__title {
+            color: var(--el-color-primary);
+            background-color: var(--el-color-primary-light-8);
+        }
+        .el-menu {
+            background-color: initial;
+        }
+        .el-menu-item {
+            padding-left: 50px;
+        }
+    }
+    .el-menu-item.is-active {
+        color: var(--el-menu-active-color);
+        background-color: var(--el-color-primary-light-9);
+        .hc-menu-icon {
+            position: absolute;
+            font-size: 16px;
+            left: 22px;
+        }
+    }
+}
+
+//表格
+.el-table[hc] {
+    --el-table-bg-color: initial;
+    --el-table-header-bg-color: #DAE8F3;
+    --el-table-header-text-color: #50545E;
+    --el-table-tr-bg-color: #F1F5F8;
+    --el-fill-color-lighter: #E7EEF4;
+    --el-table-text-color: #666666;
+    --el-table-row-hover-bg-color: var(--el-color-primary-light-9);
+    th.el-table__cell > .cell {
+        font-weight: 400;
+    }
+    .el-table__cell {
+        padding: 12px 0;
+        .el-checkbox {
+            --el-checkbox-input-height: 18px;
+            --el-checkbox-input-width: 18px;
+            --el-checkbox-font-size: 16px;
+            --el-checkbox-border-radius: 3px;
+            .el-checkbox__inner::after {
+                top: 3px;
+                left: 6px;
+            }
+        }
+        .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
+            top: 7px;
+        }
+    }
+    &.el-table--border {
+        --el-table-border-color: #e9e9e9;
+    }
+}
+.el-table[hc]:not([class*='el-table--border']) {
+    .el-table__inner-wrapper::before {
+        background-color: transparent;
+    }
+}
+
+//下拉框
+.el-select[block] {
+    width: 100%;
+}
+
+//工单服务的时间轴
+.time-line-box .el-timeline.hc-time-line {
+    padding-left: 5px;
+    padding-top: 5px;
+    .el-timeline-item {
+        padding-bottom: 24px;
+        .el-timeline-item__tail {
+            top: 28px;
+            left: 6px;
+            height: calc(100% - 36px);
+            border-width: 1px;
+            border-color: #838791;
+        }
+        .el-timeline-item__node {
+            display: none;
+        }
+        .el-timeline-item__wrapper {
+            padding-left: 38px;
+            .el-timeline-item__content {
+                .timeline-item-icon {
+                    position: absolute;
+                    width: 24px;
+                    height: 24px;
+                    left: -5px;
+                    border: 1px solid #838791;
+                    border-radius: 50px;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    color: #838791;
+                    .check-icon {
+                        font-size: 18px;
+                    }
+                }
+                .reply-name {
+                    color: #838791;
+                    font-size: 18px;
+                }
+                .reply-content {
+                    color: #838791;
+                    margin-top: 5px;
+                }
+            }
+        }
+        &.success {
+            .el-timeline-item__tail {
+                border-color: var(--el-color-primary);
+            }
+            .el-timeline-item__wrapper .el-timeline-item__content .timeline-item-icon {
+                color: var(--el-color-primary);
+                border: 1px solid var(--el-color-primary);
+            }
+        }
+        &.primary {
+            .el-timeline-item__wrapper .el-timeline-item__content {
+                .reply-name {
+                    color: #1A1A1A;
+                }
+                .timeline-item-icon {
+                    background-color: var(--el-color-primary);
+                    border: 1px solid var(--el-color-primary);
+                    color: #ffffff;
+                }
+            }
+        }
+    }
+}
+
+//滚动条
+/*.el-scrollbar {
+    scroll-behavior: smooth;
+    .el-scrollbar__wrap--hidden-default {
+        scroll-behavior: smooth;
+    }
+}*/
+
+//弹窗
+.el-overlay-dialog {
+    .el-dialog.hc-modal-border {
+        .el-dialog__header {
+            padding-bottom: var(--el-dialog-padding-primary);
+            border-bottom: 1px solid #EEEEEE;
+            margin-right: 0;
+        }
+        .el-dialog__footer {
+            border-top: 1px solid #EEEEEE;
+            padding-top: var(--el-dialog-padding-primary);
+        }
+    }
+    .el-dialog.hc-modal-nop {
+        .el-dialog__body {
+            padding: 0;
+        }
+    }
+}
+
+//上传
+.el-upload-list.el-upload-list--picture-card {
+    --el-upload-list-picture-card-size: 88px;
+    .el-upload--picture-card {
+        --el-upload-picture-card-size: 88px;
+        .hc-upload-icon {
+            font-size: 39px;
+        }
+    }
+}
+
+//头像
+.el-avatar {
+    color: initial !important;
+    background: initial !important;
+}
+
+//表格
+.hc-table-ref-box {
+    position: relative;
+    display: inline-grid;
+    border: 1px solid #e9e9e9;
+    width: 100%;
+}
+
+//naiveui 鼠标右键菜单的图标
+.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__prefix.n-dropdown-option-body__prefix--show-icon {
+    font-size: 22px;
+}
+
+//树
+.el-tree.hc-tree-node, .el-tree.hc-tree-node-v2 {
+    --el-fill-color-blank: transparent;
+    --el-tree-node-hover-bg-color: var(--el-color-primary-light-9);
+    --el-tree-text-color: #50545E;
+    --el-tree-expand-icon-color: #838791;
+    background: var(--el-fill-color-blank);
+    color: var(--el-tree-text-color);
+    .el-tree-node__content {
+        border-radius: 2px;
+    }
+    &.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+        background-color: var(--el-color-primary-light-7);
+    }
+    .el-tree-node__expand-icon {
+        font-size: 16px;
+    }
+    .el-tree-node__children {
+        overflow: visible !important;
+    }
+}
+.el-alert .el-alert__icon {
+    vertical-align: middle;
+}
+//弹窗提示
+.el-dialog .el-dialog__body {
+    position: relative;
+    max-height: 60vh;
+    overflow: auto;
+    .el-alert {
+        margin-top: -10px;
+        margin-bottom: 20px;
+    }
+
+}
+.el-dialog.hc-modal-table .el-dialog__body {
+    height: 60vh;
+}
+
+//上传文件列表
+.hc-upload-border {
+    .hc-upload-loading {
+        position: relative;
+    }
+    .el-upload-list {
+        border-top: 1px solid #f1f1f1;
+        margin-top: 24px;
+        padding-top: 24px;
+    }
+}
+
+//伪表单
+.el-form-item--large .el-form-item__content {
+    .form-item-div, .form-item-dashed {
+        position: relative;
+        color: #606266;
+        font-size: 14px;
+        padding: 0 12px;
+        height: 40px;
+        width: 100%;
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        &.hover {
+            cursor: pointer;
+            transition: border 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)
+        }
+    }
+    .form-item-div {
+        border: 1px solid #dddfe6;
+    }
+    .form-item-dashed {
+        border: 1px dashed #dddfe6;
+    }
+    .form-item-div.hover, .form-item-dashed.hover {
+        &:hover {
+            border-color: var(--el-color-primary);
+        }
+    }
+}
+
+//无名称
+.el-form-item[no-label] .el-form-item__label-wrap {
+    margin-left: 0 !important;
+}
+
+.el-form--large.el-form--label-top .el-form-item .el-form-item__label {
+    min-height: 22px;
+}
+
+.el-form-item--large.mb-0 {
+    margin-bottom: 0;
+}
+
+//输入框验证问题
+.el-input.is-error .el-input__wrapper {
+    box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+}
+
+//表单输入框和按钮组合
+.el-form-item.hc-input-button-group .el-form-item__content {
+    .el-input {
+        flex: 1;
+        .el-input__wrapper {
+            border-radius: 4px 0 0 4px;
+        }
+    }
+    .el-button {
+        border-radius: 0 4px 4px 0;
+    }
+}
+
+//设置表单的上传
+.hc-upload-table-form {
+    position: relative;
+    height: inherit;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .el-upload {
+        position: relative;
+        flex: 1;
+        height: inherit;
+        color: #ccc;
+        .hc-table-form-icon {
+            font-size: 24px;
+            font-weight: 100;
+        }
+        .hc-table-form-img {
+            width: 100%;
+            height: inherit;
+        }
+        .hc-table-form-del {
+            position: absolute;
+            right: 0;
+            top: 0;
+        }
+    }
+}
+
+//表单提示样式
+.el-popper.is-customized {
+    padding: 6px 12px;
+    background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
+}
+
+.el-popper.is-customized .el-popper__arrow::before {
+    background: linear-gradient(45deg, #b2e68d, #bce689);
+    right: 0;
+}
+
+// 树样式
+.hc-tree-node, .el-tree.hc-tree-node-v2 {
+    .data-custom-tree-node {
+        position: relative;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        color: var(--el-text-color-primary);
+        .label {
+            flex: auto;
+            font-size: 16px;
+            .hc-tree-node-type {
+                display: inline-block;
+                background: #7729F5;
+                font-size: 14px;
+                color: white;
+                width: 20px;
+                height: 20px;
+                border-radius: 5px;
+                text-align: center;
+                line-height: 20px;
+                margin-right: 8px;
+            }
+        }
+        .label.level-name {
+            font-size: 18px;
+            font-weight: bold;
+        }
+    }
+    .el-tree-node__content {
+        height: 28px;
+    }
+    .el-tree-node__label {
+        flex: 1;
+        user-select: none;
+    }
+    &.tree-line .el-tree-node.is-expanded.is-current.is-focusable {
+        background: #cacaca;
+        border-radius: 4px;
+    }
+}
+
+.ui-drag-modal-box .hc-image-preview-box.ui-drag-modal-dialog .ui-drag-modal-dialog-body {
+    .hc-image-preview-view {
+        position: relative;
+        overflow: hidden;
+        height: 100%;
+        width: 100%;
+        .el-image-viewer__wrapper {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            .el-image-viewer__mask {
+                border-radius: 3px;
+                box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.10);
+            }
+            .el-image-viewer__close {
+                display: none;
+            }
+            .el-image-viewer__actions {
+                bottom: 10px;
+            }
+        }
+    }
+}
+
+//下拉框的滚动条
+.el-select__popper.el-popper .el-select-dropdown .el-scrollbar .el-scrollbar__bar.is-vertical {
+    right: 1px;
+}
+
+.el-loading-mask {
+    z-index: 99999;
+}
+
+.scroll-bar-right-16.el-scrollbar {
+    .el-scrollbar__bar {
+        right: -16px;
+    }
+}
+
+//设置表单样式
+.hc-excel-table-form-view {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    table {
+        // width: 100%;
+    }
+    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;
+            color: #606266;
+            .el-input__wrapper {
+                background-color: inherit;
+                caret-color: var(--el-color-primary);
+            }
+            .el-input__suffix-inner {
+                width: 18px;
+            }
+        }
+        .el-textarea {
+            width: 100%;
+            height: 100%;
+            .el-textarea__inner {
+                min-height: initial !important;
+                background-color: #ffffff;
+                border-radius: 3px;
+                color: #606266;
+                height: 100%;
+                caret-color: var(--el-color-primary);
+            }
+        }
+        //日期选择框
+        .el-date-editor.el-input .el-input__wrapper,
+        .el-date-editor.el-date-editor--datetimerange.el-input__wrapper {
+            height: 100%;
+            width: 100%;
+        }
+        //焦点
+        .el-input .el-input__wrapper.is-focus, .el-input .el-input__wrapper:hover,
+        .el-textarea .el-textarea__inner:hover {
+            box-shadow: 0 0 0 1.5px var(--el-input-focus-border-color) inset;
+            background-color: #eddac4;
+        }
+        //公式
+        &[gscolor] {
+            .el-input, .el-textarea .el-textarea__inner {
+                background-color: #dcdcdc !important;
+            }
+        }
+        //文本选中颜色
+        .el-input .el-input__wrapper input,
+        .el-textarea textarea {
+            &::selection {
+                background: var(--el-color-primary-light-9);
+                color: var(--el-color-primary);
+            }
+            &::-moz-selection {
+                background: var(--el-color-primary-light-9);
+                color: var(--el-color-primary);
+            }
+        }
+        //下拉框
+        .el-select {
+            width: 100%;
+            height: 100%;
+        }
+    }
+    //非输入框颜色
+    td:not([titlexx]), td[titlexx*=''],
+    td:not([title]), td[title*=''] {
+        background-color: #f1f5f8 !important;
+    }
+}
+

src/styles_bak/app/main.scss

@@ -0,0 +1,253 @@
+html, body, #app {
+    height: 100%;
+    background-color: #F1F5F8;
+}
+* {
+    padding: 0;
+    margin: 0;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    /* 滚动条凹槽的颜色，还可以设置边框属性 */
+    &::-webkit-scrollbar-track-piece {
+        background-color: #f8f8f8;
+        -webkit-border-radius: 2em;
+        -moz-border-radius: 2em;
+        border-radius: 2em;
+    }
+    /* 滚动条的宽度 */
+    &::-webkit-scrollbar {
+        width: 9px;
+        height: 9px;
+    }
+    /* 滚动条的设置 */
+    &::-webkit-scrollbar-thumb {
+        background-color: #ddd;
+        background-clip: padding-box;
+        -webkit-border-radius: 2em;
+        -moz-border-radius: 2em;
+        border-radius: 2em;
+    }
+    /* 滚动条鼠标移上去 */
+    &::-webkit-scrollbar-thumb:hover {
+        background-color: #bbb;
+    }
+}
+
+.us-se-no {
+    user-select: none;
+}
+
+.lr-dialog-footer {
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    .left {
+        .el-button + .el-button {
+            margin-left: 10px;
+        }
+    }
+}
+
+.hc-flex-column {
+    display: flex;
+    flex-direction: column;
+}
+
+.hc-sticky-box {
+    position: sticky;
+    z-index: 99;
+    top: 0;
+}
+
+.pover-menu-list {
+    position: relative;
+    .list-item {
+        position: relative;
+        border-radius: 5px;
+        padding: 10px 14px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        transition: color 0.3s, background-color 0.3s;
+        .text {
+            flex: auto;
+            margin-left: 0;
+            margin-right: 20px;
+        }
+        i {
+            font-size: 22px;
+        }
+        &:hover {
+            color: var(--el-color-primary);
+            background-color: var(--el-color-primary-light-7);
+        }
+    }
+}
+
+#toolPanel, #optionPanel {
+    border-radius: 5px;
+    box-shadow: 0 .5em 1em rgba(0, 0, 0, 0.15);
+}
+
+.el-radio-group .el-radio {
+    margin-right: 10px;
+}
+
+.bg-card-main {
+    background-color: var(--hc-bg-color);
+}
+
+.hc-list-box {
+    position: relative;
+    .item {
+        position: relative;
+        display: flex;
+        align-items: center;
+        .label {
+            flex: 1;
+        }
+        &.item {
+            margin-top: 15px;
+        }
+    }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+    transition: all 0.5s;
+}
+
+.fade-transform-enter-from {
+    opacity: 0;
+    transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+    opacity: 0;
+    transform: translateX(30px);
+}
+
+.hc-page-layout-box {
+    display: flex;
+    position: relative;
+    height: 100%;
+    .hc-layout-left-box {
+        width: 382px;
+        position: relative;
+        background: #f1f5f8;
+        border-radius: 10px;
+        margin-right: 24px;
+        box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
+        .horizontal-drag-line {
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 4px;
+            height: 100%;
+            user-select: none;
+            cursor: col-resize;
+            background-color: #00000000;
+        }
+        .hc-project-box {
+            position: relative;
+            padding: 15px 24px;
+            display: flex;
+            align-items: flex-start;
+            border-bottom: 1px solid #E9E9E9;
+            .hc-project-icon-box {
+                font-size: 30px;
+                color: var(--el-color-primary);
+            }
+            .project-name-box {
+                flex: auto;
+                position: relative;
+                overflow: hidden;
+                .project-alias {
+                    color: var(--el-color-primary);
+                }
+                .project-name {
+                    margin-top: 6px;
+                    color: #838791;
+                }
+            }
+        }
+        .hc-tree-box {
+            position: relative;
+            padding: 15px 20px;
+            height: calc(100% - 80px);
+        }
+        .hc-tree-search-box {
+            position: relative;
+            padding: 15px 20px;
+            height: calc(100% - 187px);
+            .hc-search-tree-val {
+                position: relative;
+                margin-bottom: 24px;
+            }
+            .hc-tree-scrollbar {
+                position: relative;
+                height: calc(100% - 68px);
+            }
+        }
+        &.menu {
+            width: 240px;
+            .hc-menu-header-box {
+                position: relative;
+                padding: 15px 18px;
+                display: flex;
+                align-items: center;
+                border-bottom: 1px solid #E9E9E9;
+                .name {
+                    flex: auto;
+                    position: relative;
+                }
+            }
+            .hc-menu-contents-box {
+                position: relative;
+                //padding: 15px 18px;
+                height: calc(100% - 60px);
+            }
+        }
+    }
+    .hc-page-content-box {
+        flex: 1;
+        position: relative;
+    }
+}
+
+.hc-page-box {
+    position: relative;
+    height: 100%;
+}
+.z-9999 {
+    z-index: 9999 !important;
+}
+
+//分割的样式
+.gutter {
+    background-color: #f1f5f8;
+    background-repeat: no-repeat;
+    background-position: 50%;
+}
+
+.gutter.gutter-vertical {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
+    cursor: row-resize;
+}
+
+.gutter.gutter-horizontal {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
+    cursor: col-resize;
+}

src/styles_bak/app/nprogress.scss

@@ -0,0 +1,73 @@
+/* Make clicks pass-through */
+#nprogress {
+    pointer-events: none;
+}
+
+#nprogress .bar {
+    background: var(--el-color-primary);
+
+    position: fixed;
+    z-index: 1031;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+    display: block;
+    position: absolute;
+    right: 0;
+    width: 100px;
+    height: 100%;
+    box-shadow: 0 0 10px var(--el-color-primary), 0 0 5px var(--el-color-primary);
+    opacity: 1.0;
+
+    -webkit-transform: rotate(3deg) translate(0px, -4px);
+    -ms-transform: rotate(3deg) translate(0px, -4px);
+    transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+    display: block;
+    position: fixed;
+    z-index: 1031;
+    top: 15px;
+    right: 15px;
+}
+
+#nprogress .spinner-icon {
+    width: 18px;
+    height: 18px;
+    box-sizing: border-box;
+
+    border: solid 2px transparent;
+    border-top-color: var(--el-color-primary);
+    border-left-color: var(--el-color-primary);
+    border-radius: 50%;
+
+    -webkit-animation: nprogress-spinner 400ms linear infinite;
+    animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+    overflow: hidden;
+    position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+    position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+    0%   { -webkit-transform: rotate(0deg); }
+    100% { -webkit-transform: rotate(360deg); }
+}
+@keyframes nprogress-spinner {
+    0%   { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}

src/styles_bak/app/tailwind.scss

@@ -0,0 +1,3 @@
+//@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/styles_bak/app/theme.scss

@@ -0,0 +1,593 @@
+//通用样式
+html {
+    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s, background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;
+    --hc-body-bg-color: #F5F5F5;
+    --hc-bg-color: #ffffff;
+    --hc-text-color: #333333;
+    --hc-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15), -4px -4px 8px 0 #ffffff;
+    //左侧菜单
+    .hc-layout-box .hc-aside-box .hc-aside-logo-box .logo-img-1 {
+        &.white {
+            display: block;
+        }
+        &.dark {
+            display: none;
+        }
+    }
+}
+
+//深色主题设置
+html.dark {
+    --hc-body-bg-color: #101014;
+    --hc-bg-color: #292929;
+    --hc-text-color: rgba(255, 255, 255, 0.82);
+    --hc-shadow: 4px 4px 8px 0 rgba(0,0,0,0.15), -4px -4px 8px 0 #3d3d3d;
+    --el-bg-color-overlay: #393939;
+    --hc-border-color: #474646;
+    --hc-label-color: #8f9eb2;
+    html, body, #app {
+        background: var(--el-bg-color-overlay);
+    }
+    //首页背景
+    .hc-layout-box .hc-layout-bg-box {
+        opacity: .1;
+    }
+    //左侧菜单
+    .hc-layout-box .hc-aside-box {
+        color: var(--el-text-color-primary);
+        background: var(--el-bg-color-overlay);
+        box-shadow: initial;
+        border: 1px solid var(--hc-border-color);
+        border-left: 0;
+        border-bottom: 0;
+        &.home-index {
+            color: var(--el-text-color-primary);
+            background: var(--el-bg-color-overlay);
+            backdrop-filter: initial;
+            -webkit-backdrop-filter: initial;
+        }
+        .hc-aside-logo-box .logo-img-1 {
+            &.white {
+                display: none;
+            }
+            &.dark {
+                display: block;
+            }
+        }
+        //菜单
+        .el-menu-item, .el-sub-menu__title {
+            color: var(--hc-label-color);
+        }
+        .el-menu-item.is-active {
+            color: inherit;
+        }
+        .hc-aside-bar-box:before {
+            background-image: linear-gradient(90deg, rgba(102, 102, 102, 0) 11%, #474646 35%, #474646 64%, rgba(102, 102, 102, 0) 86%);
+        }
+    }
+    //左栏
+    .hc-layout-box .hc-layout-left-box {
+        color: var(--el-text-color-primary);
+        background: var(--el-bg-color-overlay);
+        box-shadow: initial;
+        border: 1px solid var(--hc-border-color);
+    }
+    .hc-layout-box .hc-layout-left {
+        background: var(--el-bg-color-overlay);
+        border: 1px solid var(--hc-border-color);
+        color: var(--hc-label-color);
+        box-shadow: initial;
+    }
+    .hc-table-form-content .hc-table-forem-box,
+    .hc-table-form-content .hc-fixed-page,
+    .hc-table-form-content .hc-right-pian-box,
+    .hc-table-form-content .hc-footer-box {
+        background: var(--el-bg-color-overlay);
+        border: 1px solid var(--hc-border-color);
+        color: var(--hc-label-color);
+        box-shadow: initial;
+    }
+    //小图标时的菜单
+    .aside-menu-popper.el-popper .el-menu--vertical .el-menu {
+        background-color: #393939;
+        color: #8f9eb2;
+    }
+    //卡片
+    .hc-card-box.el-card {
+        box-shadow: initial;
+        color: var(--hc-text-color);
+        border: 1px solid var(--hc-border-color);
+        .el-card__header {
+            border-bottom: 1px solid var(--hc-border-color);
+        }
+        .el-card__body .hc-card-action-box {
+            border-top: 1px solid var(--hc-border-color);
+            background-color: var(--el-bg-color-overlay);
+        }
+    }
+    //设置里的副标题
+    .hc-screenshot-box .item .label {
+        color: var(--hc-label-color);
+    }
+    //设置里的选择卡片
+    .hc-theme-box .item {
+        border: 1px solid var(--hc-border-color);
+        background-color: var(--el-bg-color-overlay);
+        &.active {
+            box-shadow: 4px 4px 8px 0 rgba(61,60,60,0.15), 0 0 8px 0 #1d1d1d;
+        }
+        .action {
+            background-color: var(--hc-bg-color);
+            border-top: 1px solid var(--hc-border-color);
+        }
+    }
+
+    //顶部项目合同下拉框
+    .hc-layout-box .hc-container-view .hc-header-view .hc-header-content .hc-header-cascader-box .el-cascader .el-input .el-input__wrapper {
+        background: #696969;
+    }
+    .hc-layout-box .hc-container-view .hc-header-view .hc-header-content .hc-header-cascader-box .el-cascader .el-input.is-focus .el-input__wrapper {
+        box-shadow: var(--hc-shadow);
+    }
+    .hc-layout-box .hc-container-view .hc-header-view .hc-header-content .hc-header-cascader-box .el-cascader .el-input .el-input__wrapper .el-input__inner,
+    .hc-layout-box .hc-container-view .hc-header-view .hc-header-content .hc-header-cascader-box .el-cascader .el-input .el-input__wrapper .el-input__suffix {
+        color: var(--hc-text-color);
+    }
+    //顶部图标按钮
+    .header-icon-bar {
+        background: #696969;
+        color: var(--hc-text-color);
+    }
+    //顶部用户信息
+    .user-info-bar {
+        .user-name, .arrow-icon {
+            color: var(--hc-text-color);
+        }
+        &:before {
+            border-color: var(--hc-border-color);
+        }
+    }
+
+    //按钮
+    .el-button[hc-btn] {
+        border-color: var(--hc-border-color);
+    }
+    .el-button[hc-btn].is-disabled:not([class*=el-button--]) {
+        --el-button-disabled-text-color: var(--el-color-info-light-5);
+        --el-button-disabled-bg-color: var(--el-color-info-light-9);
+    }
+
+    //日期范围
+    .el-date-editor .el-range-separator {
+        color: #89898a;
+    }
+
+    //切换卡片
+    .hc-sb-table .el-tabs .el-tabs__header .el-tabs__nav .el-tabs__item {
+        background: var(--hc-bg-color);
+        --el-text-color-primary: var(--hc-label-color);
+        &:after {
+            background-color: var(--hc-border-color);
+        }
+    }
+    .hc-sb-table .el-tabs .el-tabs__active-bar {
+        background: var(--el-bg-color-overlay);
+        &:after, &:before {
+            background: var(--el-bg-color-overlay);
+        }
+    }
+
+    //表格
+    .hc-table-ref-box {
+        border-color: var(--hc-border-color);
+        .el-table[hc] {
+            --el-table-bg-color: initial;
+            --el-table-header-bg-color: var(--hc-bg-color);
+            --el-table-header-text-color: var(--hc-label-color);
+            --el-table-tr-bg-color: var(--el-bg-color-overlay);
+            --el-fill-color-lighter: #363535;
+            --el-table-text-color: var(--hc-text-color);
+            --el-table-row-hover-bg-color: #454545;
+        }
+        .el-table[hc].el-table--border {
+            --el-table-border-color: var(--hc-border-color);
+        }
+        .el-table__body-wrapper tr td.el-table-fixed-column--left,
+        .el-table__body-wrapper tr td.el-table-fixed-column--right,
+        .el-table__body-wrapper tr th.el-table-fixed-column--left,
+        .el-table__body-wrapper tr th.el-table-fixed-column--right,
+        .el-table__footer-wrapper tr td.el-table-fixed-column--left,
+        .el-table__footer-wrapper tr td.el-table-fixed-column--right,
+        .el-table__footer-wrapper tr th.el-table-fixed-column--left,
+        .el-table__footer-wrapper tr th.el-table-fixed-column--right,
+        .el-table__header-wrapper tr td.el-table-fixed-column--left,
+        .el-table__header-wrapper tr td.el-table-fixed-column--right,
+        .el-table__header-wrapper tr th.el-table-fixed-column--left,
+        .el-table__header-wrapper tr th.el-table-fixed-column--right {
+            --el-bg-color: #444444;
+        }
+    }
+
+    //分页
+    .card-page-box .el-pagination.is-background .btn-next, .card-page-box .el-pagination.is-background .btn-prev, .card-page-box .el-pagination.is-background .el-pager li {
+        border-color: var(--hc-border-color);
+    }
+    //弹窗
+    .el-overlay-dialog .el-dialog {
+        background: var(--el-bg-color-overlay);
+        &.hc-modal-border {
+            .el-dialog__header {
+                border-color: var(--hc-border-color);
+            }
+            .el-dialog__footer {
+                border-color: var(--hc-border-color);
+            }
+        }
+    }
+    .el-message-box {
+        background: var(--el-bg-color-overlay);
+    }
+
+    //表单
+    .el-form-item--large .el-form-item__content .form-item-dashed {
+        border-color: #4c4d4f;
+    }
+
+    //步进器
+    .hc-counter-box .counter-box {
+        color: var(--hc-text-color);
+        .counter-btn {
+            border-color: var(--hc-border-color);
+            color: var(--hc-text-color);
+            background-color: var(--el-bg-color-overlay);
+        }
+        .counter-btn[disabled=true] {
+            color: var(--hc-label-color);
+            background-color: var(--hc-bg-color);
+        }
+        .counter-val {
+            border-color: var(--hc-border-color);
+        }
+    }
+    //工单服务
+    .hc-order-service .order-service-content .content-box .comment-card-box {
+        border: 1px solid var(--hc-border-color);
+        background: var(--el-bg-color-overlay);
+        .card-content-box .user-info-box .text-lg {
+            color: var(--hc-text-color);
+        }
+        .card-content-box .desc_para {
+            color: var(--hc-text-color);
+        }
+        .collapse-comment-box .user-comment-info-box .user-comment-box .user-comment-content-box {
+            color: var(--hc-text-color);
+        }
+    }
+
+    //选择任务人
+    .hc-tasks-user .tasks-user-box {
+        border-color: var(--hc-border-color);
+    }
+    .hc-tasks-user-modal-content-box .user-box .y-user-list-box .title-box,
+    .hc-tasks-user-modal-content-box .user-box .s-user-list-box .title-box {
+        border-color: var(--hc-border-color);
+        background-color: var(--hc-bg-color);
+        color: var(--hc-label-color);
+    }
+    .hc-tasks-user-modal-content-box .user-box .s-user-list-box {
+        border-color: var(--hc-border-color);
+    }
+    .hc-tasks-user-modal-content-box .user-box .y-user-list-box .user-list .user-item + .user-item,
+    .hc-tasks-user-modal-content-box .user-box .s-user-list-box .user-list .user-item + .user-item {
+        border-color: var(--hc-border-color);
+    }
+    .hc-tasks-user-modal-content-box .tree-box {
+        border-color: var(--hc-border-color);
+        .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+            background-color: #454545;
+            color: #ffffff;
+        }
+    }
+    .sort-node-body-box.list-group {
+        border-color: var(--hc-border-color);
+        .list-group-item + .list-group-item{
+            border-color: var(--hc-border-color);
+        }
+    }
+    .sort-node-body-box.list-group.header .list-group-item {
+        background-color: var(--hc-bg-color);
+        color: var(--hc-label-color);
+    }
+    //左侧小菜单栏
+    .hc-menu-simple-box .item-box {
+        border: 1px solid var(--hc-border-color);
+        background: var(--el-bg-color-overlay);
+        .icon-box {
+            background-color: var(--hc-bg-color);
+            color: var(--hc-label-color);
+        }
+        .label-box {
+            color: var(--hc-label-color);
+        }
+        &.active {
+            .label-box {
+                color: var(--hc-text-color);
+            }
+        }
+        &:hover:not(.active) {
+            .icon-box {
+                color: var(--hc-text-color);
+                background-color: var(--hc-bg-color);
+            }
+            .label-box {
+                color: var(--hc-text-color);
+                font-weight: 500;
+            }
+        }
+    }
+    //树
+    .el-tree.hc-tree-node {
+        --el-tree-node-hover-bg-color: var(--hc-bg-color);
+    }
+    .hc-tree-node.tree-line .el-tree-node.is-expanded.is-current.is-focusable {
+        background: var(--hc-bg-color);
+    }
+    .data-custom-tree-node .menu-icon {
+        background: initial;
+        color: var(--el-bg-color-overlay);
+    }
+    .hc-tree-node .data-custom-tree-node {
+        color: var(--hc-label-color);
+    }
+    .el-tree.hc-tree-node.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+        background-color: var(--hc-bg-color);
+        .data-custom-tree-node {
+            color: var(--hc-text-color);
+        }
+    }
+    //工程划分树
+    .hc-page-layout-box .hc-layout-left-box .hc-project-box {
+        border-color: var(--hc-border-color);
+    }
+    .hc-page-content-box.hc-division-page .project-info {
+        height: calc(100% - 346px);
+    }
+    .hc-page-content-box.hc-division-page .footer-box {
+        color: var(--el-text-color-primary);
+        background: var(--el-bg-color-overlay);
+        border: 1px solid var(--hc-border-color);
+        box-shadow: initial;
+    }
+    .hc-import-temp-box .hc-import-node-tree-box .import-node-tree-box,
+    .hc-import-temp-box .hc-import-node-tree-box .import-node-tree-box .hc-tree-title-box {
+        border-color: var(--hc-border-color);
+    }
+    .hc-layout-box .hc-layout-left-box .hc-project-box,
+    .hc-layout-box .hc-layout-left-box .hc-tree-foot-tip-box {
+        border-color: var(--hc-border-color);
+    }
+
+    .copy-node-many-box, .copy-node-many-box .copy-node-many-tree {
+        border-color: var(--hc-border-color);
+    }
+
+    .data-fill-list-box .el-collapse .el-collapse-item {
+        background-color: var(--el-bg-color-overlay);
+        border-color: var(--hc-border-color);
+        .hc-collapse-item-header .item-title {
+            color: var(--hc-label-color);
+        }
+        .el-collapse-item__header .el-collapse-item__arrow {
+            color: var(--hc-label-color);
+        }
+    }
+    .data-fill-list-box .el-collapse .el-collapse-item.is-active .el-collapse-item__header.is-active {
+        background: var(--hc-bg-color);
+        .item-title, .el-collapse-item__arrow {
+            color: var(--hc-text-color);
+        }
+    }
+    .data-fill-list-box .data-fill-list-item-content .data-fill-table-tip-box {
+        border-color: var(--hc-border-color);
+    }
+
+    //切换按钮
+    .hc-new-switch {
+        background: var(--hc-bg-color);
+        box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.15) inset, -4px -4px 8px 0 var(--hc-bg-color) inset;
+        .switch-bg {
+            color: var(--hc-label-color);
+        }
+        .switch-bg.dots {
+            color: var(--hc-text-color);
+            box-shadow: 4px 4px 8px 0 rgba(54, 92, 167, 0.15), -3px -2px 8px 0 var(--hc-bg-color);
+        }
+    }
+    //多级菜单
+    .hc-ledger-query-menu.el-menu {
+        --el-menu-text-color: var(--hc-label-color);
+        .el-sub-menu .el-menu-item.is-active {
+            background: var(--hc-bg-color);
+            border: 1px solid var(--hc-border-color);
+            color: var(--hc-text-color);
+            box-shadow: initial;
+        }
+        .el-sub-menu__title, .el-menu-item {
+            border-radius: 6px;
+            &:hover {
+                background: var(--hc-bg-color);
+                color: var(--hc-text-color);
+            }
+        }
+    }
+
+    //日历
+    .hc-date-calendar-box {
+        .hc-date-picker-box {
+            border-color: var(--hc-border-color);
+            .hc-date-btn-box .hc-div-btn {
+                box-shadow: initial;
+                border: 1px solid var(--hc-border-color);
+                background-color: var(--el-bg-color-overlay);
+                &:hover {
+                    background: var(--hc-bg-color);
+                }
+            }
+        }
+        .hc-date-dates {
+            .hc-date-dates-day {
+                color: var(--hc-label-color);
+                &:hover:not([class*='choice']):not([class*='excluded']):not([class*='selected']):not([class*='cur']) {
+                    background-color: var(--hc-bg-color);
+                    border: 2px solid var(--hc-border-color);
+                }
+            }
+            .hc-date-dates-day.selected {
+                border-color: var(--hc-border-color);
+            }
+            .hc-date-dates-day.choice {
+                box-shadow: initial;
+                border-color: var(--hc-border-color);
+            }
+            .hc-date-dates-day.excluded {
+                color: #5a5a5a;
+            }
+        }
+    }
+    .hc-user-time-box .tree-box {
+        border-color: var(--hc-border-color);
+    }
+    //进度统计
+    .hc-layout-box .hc-chart-content-box {
+        background: var(--el-bg-color-overlay);
+        border: 1px solid var(--hc-border-color);
+        color: var(--hc-label-color);
+        box-shadow: initial;
+    }
+    .hc-layout-box .hc-round-chart-card-box,
+    .hc-layout-box .hc-report-chart-card-box,
+    .hc-layout-box .hc-media-chart-card-box {
+        background: var(--el-bg-color-overlay);
+        border: 1px solid var(--hc-border-color);
+        color: var(--hc-label-color);
+        box-shadow: initial;
+    }
+    .hc-layout-box .hc-chart-flex .hc-report-chart-card-box .hc-report-chart-box,
+    .hc-layout-box .hc-chart-flex .hc-media-chart-card-box .hc-report-chart-box {
+        background: var(--el-bg-color-overlay);
+        border: 1px solid var(--hc-border-color);
+    }
+    .hc-layout-box .hc-chart-flex .hc-report-chart-card-box .hc-media-chart-box,
+    .hc-layout-box .hc-chart-flex .hc-media-chart-card-box .hc-media-chart-box {
+        background: var(--el-bg-color-overlay);
+        border: 1px solid var(--hc-border-color);
+    }
+    .hc-layout-box .hc-round-chart .hc-round-chart-card-box .hc-card-content-box .card-title {
+        color: var(--hc-label-color);
+    }
+    .hc-layout-box .hc-round-chart .hc-round-chart-card-box .hc-card-content-box .card-ratio-box .ratio-num,
+    .hc-layout-box .hc-round-chart .hc-round-chart-card-box .hc-card-content-box .card-ratio-box .ratio-text .unit{
+        color: var(--hc-text-color);
+    }
+    .hc-layout-box .hc-round-chart .hc-round-chart-card-box .hc-card-content-box .card-amount-box .amount-item .num {
+        color: var(--hc-label-color);
+    }
+    .hc-layout-box .hc-chart-flex .hc-report-chart-card-box .hc-chart-title .title,
+    .hc-layout-box .hc-chart-flex .hc-media-chart-card-box .hc-chart-title .title {
+        color: var(--hc-text-color);
+    }
+    .hc-layout-box .hc-chart-flex .hc-media-chart-card-box .hc-media-chart-box .hc-media-pian-box {
+        background: var(--hc-bg-color);
+        border-color: var(--hc-border-color);
+    }
+    .hc-layout-box .hc-chart-flex .hc-media-chart-card-box .hc-media-chart-box .hc-media-pian-box .item .num {
+        color: var(--hc-label-color);
+    }
+    //影像资料
+    .hc-layout-box .hc-layout-content-box .hc-table-col-item .content-box .title {
+        color: var(--hc-text-color);
+    }
+    //平曲线右上角图标按钮
+    .hc-layout-box .hc-extra-icon-btn {
+        color: var(--hc-label-color);
+    }
+
+    //首件工程
+    .hc-first-item-node-layout .node-action,
+    .hc-first-item-node-layout .node-content .node-form,
+    .hc-first-item-node-layout .node-content .node-file {
+        background: var(--el-bg-color-overlay);
+        border: 1px solid var(--hc-border-color);
+        color: var(--hc-label-color);
+        box-shadow: initial;
+    }
+
+    //个人中心
+    .hc-layout-box .hc-layout-left-box .user-avatar-box .user-avatar {
+        border: 1px solid var(--hc-border-color);
+        box-shadow: initial;
+    }
+    .hc-layout-box .hc-layout-left-box .user-avatar-box .user-name {
+        color: var(--hc-text-color);
+    }
+    .hc-layout-box .hc-layout-content-box .hc-card-foot-box {
+        background: var(--el-bg-color-overlay);
+        border: 1px solid var(--hc-border-color);
+        color: var(--hc-label-color);
+        box-shadow: initial;
+        border-bottom: 0;
+    }
+    .hc-project-menu.el-menu .el-sub-menu {
+        border-color: var(--hc-border-color);
+        .el-sub-menu__title {
+            color: var(--hc-label-color);
+        }
+    }
+    .hc-project-menu.el-menu .el-sub-menu.is-opened .el-sub-menu__title {
+        background: var(--hc-bg-color);
+        color: var(--hc-text-color);
+    }
+    .hc-project-menu.el-menu .el-menu-item.is-active {
+        background: #4e4e4e;
+        color: var(--hc-text-color);
+    }
+    .hc-project-menu.el-menu .el-sub-menu .el-sub-menu__title,
+    .hc-project-menu.el-menu .el-sub-menu .el-menu-item {
+        &:hover {
+            background: var(--hc-bg-color);
+            color: var(--hc-text-color);
+        }
+    }
+
+    //材料进场
+    .hc-switch-tab-content {
+        border-color: var(--hc-border-color);
+    }
+    .hc-links-sample-modal-box .hc-links-sample-tree-box {
+        border-color: var(--hc-border-color);
+    }
+
+    //月报汇总表格
+    .hc-table-ref-box .el-table.hc-table-diy-box {
+        --el-table-bg-color: initial;
+        --el-table-header-bg-color: var(--hc-bg-color);
+        --el-table-header-text-color: var(--hc-label-color);
+        --el-table-tr-bg-color: var(--el-bg-color-overlay);
+        --el-fill-color-light: #363535;
+        --el-table-text-color: var(--hc-text-color);
+        --el-table-row-hover-bg-color: #454545;
+    }
+    .hc-table-ref-box .el-table.hc-table-diy-box.el-table--border {
+        --el-table-border-color: var(--hc-border-color);
+    }
+    .hc-table-ref-box .el-table.hc-table-diy-box thead.is-group tr:last-of-type th:nth-of-type(2)::before {
+        background-color: var(--hc-border-color);
+    }
+
+    .hc-page-layout-box .hc-layout-left-box.menu .hc-menu-header-box {
+        border-color: var(--hc-border-color);
+    }
+    .hc-menu-simple-box .item-box .menu-icon {
+        background: initial;
+    }
+}

src/styles_bak/app/tree.scss

@@ -0,0 +1,190 @@
+// 树的线样式
+.tree-line {
+    :deep(.el-tree-node) {
+        position: relative;
+        padding-left: 12px; // 缩进量
+    }
+    :deep(.el-tree-node__children) {
+        padding-left: 12px; // 缩进量
+    }
+    // 竖线
+    :deep(.el-tree-node::before) {
+        content:"";
+        height: 100%;
+        width: 1px;
+        position: absolute;
+        left: 1px;
+        top: 0;
+        border-width: 1px;
+        border-left: 2px dashed var(--el-color-primary);
+    }
+    // 当前层最后⼀个节点的竖线⾼度固定
+    :deep(.el-tree-node:last-child::before) {
+        height: 15px; // 可以⾃⼰调节到合适数值
+    }
+    // 横线
+    :deep(.el-tree-node::after) {
+        content:"";
+        width: 16px;
+        height: 20px;
+        position: absolute;
+        left: 2px;
+        top: 12px;
+        border-width: 1px;
+        border-top: 2px dashed var(--el-color-primary);
+    }
+    // 去掉最顶层的虚线，放最下⾯样式才不会被上⾯的覆盖了
+    & > :deep(.el-tree-node::after) {
+        border-top: none !important;
+        border-top: 0 !important;
+    }
+    & > :deep(.el-tree-node::before) {
+        border-left: none;
+    }
+    // 展开关闭的icon
+    :deep(.el-tree-node__expand-icon) {
+        font-size: 16px;
+        &.is-leaf {
+            color: transparent;
+            font-size: 0px;
+        }
+    }
+    :deep(.el-tree__empty-block) {
+      min-width: 300px;
+
+    }
+}
+
+.tree-line1 {
+    :deep(.el-tree-node) {
+        position: relative;
+        padding-left: 12px; // 缩进量
+        width: 100%;
+    }
+    :deep(.el-tree-node__children) {
+        padding-left: 12px; // 缩进量
+    }
+    // 竖线
+    :deep(.el-tree-node::before) {
+        content:"";
+        height: 100%;
+        width: 1px;
+        position: absolute;
+        left: 1px;
+        top: 0px;
+        border-width: 1px;
+        border-left: 2px dashed var(--el-color-primary);
+    }
+    // 当前层最后⼀个节点的竖线⾼度固定
+    :deep(.el-tree-node:last-child::before){
+        height: 15px; // 可以⾃⼰调节到合适数值
+    }
+    // 横线
+    :deep(.el-tree-node::after) {
+        content:"";
+        width: 16px;
+        height: 20px;
+        position: absolute;
+        left: 2px;
+        top: 12px;
+        border-width: 1px;
+        border-top: 2px dashed var(--el-color-primary);
+    }
+    // 去掉最顶层的虚线，放最下⾯样式才不会被上⾯的覆盖了
+    & > :deep(.el-tree-node::after) {
+        border-top: none !important;
+        border-top: 0 !important;
+    }
+    & > :deep(.el-tree-node::before) {
+        border-left: none;
+    }
+    // 展开关闭的icon
+    :deep(.el-tree-node__expand-icon) {
+        font-size: 16px;
+        &.is-leaf {
+            color: transparent;
+            font-size: 0;
+        }
+    }
+    :deep(.el-tree__empty-block) {
+      min-width: 300px;
+    }
+}
+
+//虚拟树
+.hc-tree-node-v2.tree-line1 {
+    :deep(.el-virtual-scrollbar) {
+        right: -12px !important;
+    }
+    :deep(.el-tree-node) {
+        padding-left: 0;
+    }
+    :deep(.el-tree-node:first-child::before) {
+        border-left: none;
+    }
+    :deep(.el-tree-node:first-child::after) {
+        border-top: none !important;
+        border-top: 0 !important;
+    }
+    // 竖线
+    :deep(.el-tree-node::before) {
+        left: 12px;
+    }
+    // 横线
+    :deep(.el-tree-node::after) {
+        left: 14px;
+    }
+    :deep([class*='line-i-']) {
+        position: relative;
+        //竖线
+        &::before {
+            content:"";
+            height: 26px;
+            width: 1px;
+            position: absolute;
+            left: 12px;
+            top: 0;
+            border-width: 1px;
+            border-left: 2px dashed var(--el-color-primary);
+        }
+        //横线
+        &::after {
+            content:"";
+            width: 16px;
+            height: 20px;
+            position: absolute;
+            left: 14px;
+            top: 12px;
+            border-width: 1px;
+            border-top: 2px dashed var(--el-color-primary);
+        }
+    }
+    //自动生成子级线条
+    @for $i from 1 through 20 {
+        //竖线
+        :deep(.line-i-#{$i}::before) {
+            left: #{(($i + 1) * 24) - 11}px;
+        }
+        //横线
+        :deep(.line-i-#{$i}::after) {
+            left: #{(($i + 1) * 24) - 9}px;
+        }
+
+        //消除非主要线条
+        @if $i >= 3 {
+            :deep(.el-tree-node[level="#{$i}"]) {
+                &::after {
+                    display: none;
+                }
+                @if $i >= 4 {
+                    @for $x from 1 through ($i - 3) {
+                        .line-i-#{$x}::after {
+                            display: none;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+}

src/styles_bak/data-fill/division.scss

@@ -0,0 +1,193 @@
+.hc-page-content-box.hc-division-page {
+    .basic-info {
+        position: relative;
+        margin-bottom: 24px;
+    }
+    .project-info {
+        position: relative;
+        margin-bottom: 24px;
+        height: calc(100% - 342px);
+    }
+    .footer-box {
+        position: relative;
+        height: 80px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 20px 24px;
+        overflow: hidden;
+        background: #f1f5f8;
+        border-radius: 10px;
+        box-shadow: -2px 0px 10px 0px rgba(32,37,50,0.03), 0px 10px 21px 20px rgba(32,37,50,0.03);
+    }
+}
+
+.lr-dialog-footer {
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    .left {
+        .el-button + .el-button {
+            margin-left: 10px;
+        }
+    }
+}
+
+.copy-node-many-box {
+    position: relative;
+    height: 53vh;
+    display: flex;
+    margin-top: 24px;
+    margin-bottom: -30px;
+    border-top: 1px solid #efeff5;
+    .copy-node-many-tree {
+        position: relative;
+        flex: 1;
+        height: 100%;
+        padding: 20px 20px 20px 0;
+        border-right: 1px solid #efeff5;
+    }
+    .copy-node-many-table {
+        position: relative;
+        flex: 1;
+        height: 100%;
+        padding: 20px 0 20px 20px;
+    }
+}
+
+.sort-node-body-box.list-group {
+    position: relative;
+    min-height: 20px;
+    border: 1px solid #EEEEEE;
+    .list-group-item {
+        position: relative;
+        display: flex;
+        align-items: center;
+        padding: 6px 15px;
+        cursor: move;
+        transition: background 0.2s;
+        .index-box {
+            position: relative;
+            width: 50px;
+        }
+        .title-box {
+            position: relative;
+            padding-right: 24px;
+            flex: 1;
+        }
+        .icon-box {
+            position: relative;
+            font-size: 18px;
+            display: flex;
+            align-items: center;
+            .icon {
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+            }
+        }
+        &:first-child .icon-box i:last-child,
+        &:last-child .icon-box i:first-child {
+            cursor: default;
+            color: #aaaaaa;
+        }
+        &:hover {
+            background: var(--el-color-primary-light-9);
+        }
+    }
+    .list-group-item + .list-group-item {
+        border-top: 1px solid #EEEEEE;
+    }
+    &.header {
+        border-bottom: 0;
+        .list-group-item {
+            cursor: default;
+            padding: 8px 15px;
+            background-color: #F8F8F8;
+            .index-box, .title-box, .icon-box {
+                font-size: 14px;
+            }
+        }
+    }
+}
+.flip-list-move {
+    transition: transform 0.5s;
+}
+.no-move {
+    transition: transform 0s;
+}
+
+.hc-import-temp-box {
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+    .hc-choose-type-box {
+        position: relative;
+        height: 60px;
+        margin-bottom: 20px;
+        .hc-type-box .el-radio-group .el-radio {
+            margin-right: 24px;
+        }
+    }
+    .hc-import-node-tree-box {
+        position: relative;
+        height: 100%;//calc(100% - 80px);
+        overflow: hidden;
+        display: flex;
+        .import-node-tree-box {
+            position: relative;
+            height: 100%;
+            flex: 1;
+            border: 1px solid #EEEEEE;
+            border-radius: 4px;
+            overflow: hidden;
+            margin-right: 10px;
+            .hc-tree-title-box {
+                text-align: center;
+                font-weight: bold;
+                padding: 12px 0;
+                border-bottom: 1px solid #EEEEEE;
+            }
+            .hc-tree-bar-box {
+                position: relative;
+                height: calc(100% - 60px);
+                overflow: hidden;
+            }
+        }
+        .import-node-tree-box + .import-node-tree-box {
+            margin-left: 10px;
+            margin-right: 0;
+        }
+    }
+}
+
+//引用元素表
+.adding-form-dialog-box {
+    position: relative;
+    height: 100%;
+    display: flex;
+    .dialog-tree-box {
+        position: relative;
+        border-right: 1px solid #EEEEEE;
+        width: 500px;
+        height: 100%
+    }
+    .dialog-table-box {
+        position: relative;
+        flex: 1;
+        height: 100%;
+        padding: 18px;
+        .dialog-search {
+            position: relative;
+        }
+        .dialog-table {
+            position: relative;
+            height: calc(100% - 68px);
+            padding: 18px 0;
+        }
+        .dialog-pages {
+            position: relative;
+        }
+    }
+}

src/styles_bak/data-fill/query.scss

@@ -0,0 +1,140 @@
+.hc-layout-box {
+    display: flex;
+    position: relative;
+    height: 100%;
+    .hc-layout-left-box {
+        width: 382px;
+        position: relative;
+        background: #f1f5f8;
+        border-radius: 10px;
+        box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
+        .horizontal-drag-line {
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 4px;
+            height: 100%;
+            user-select: none;
+            cursor: col-resize;
+            background-color: #00000000;
+        }
+        .hc-project-box {
+            position: relative;
+            padding: 15px 24px;
+            display: flex;
+            align-items: flex-start;
+            border-bottom: 1px solid #E9E9E9;
+            .hc-project-icon-box {
+                font-size: 30px;
+                color: var(--el-color-primary);
+            }
+            .project-name-box {
+                flex: auto;
+                position: relative;
+                overflow: hidden;
+                .project-alias {
+                    color: var(--el-color-primary);
+                }
+                .project-name {
+                    margin-top: 6px;
+                    color: #838791;
+                }
+            }
+        }
+        .hc-tree-box {
+            position: relative;
+            padding: 15px 20px;
+            height: calc(100% - 187px);
+            .hc-search-tree-val {
+                position: relative;
+                margin-bottom: 24px;
+            }
+            .hc-tree-scrollbar {
+                position: relative;
+                height: calc(100% - 68px);
+            }
+        }
+        .hc-tree-foot-tip-box {
+            position: absolute;
+            border-top: 1px solid #E9E9E9;
+            padding: 15px 24px;
+            width: 100%;
+            bottom: 0;
+            .dot-view {
+                position: relative;
+                display: inline-flex;
+                width: 50%;
+                align-items: center;
+                padding-left: 24px;
+                margin-top: 15px;
+                &:before {
+                    position: absolute;
+                    left: 0;
+                    content: "";
+                    width: 15px;
+                    height: 15px;
+                    background-color: inherit;
+                    border-radius: 25px;
+                }
+                &.green:before {
+                    background-color: #1ECC95;
+                }
+                &.black:before {
+                    background-color: #111111;
+                }
+                &.orange:before {
+                    background-color: #f37b1d;
+                }
+                &.blue:before {
+                    background-color: #0081ff;
+                }
+            }
+        }
+    }
+    .hc-layout-content-box {
+        flex: 1;
+        display: inline-grid;
+        position: relative;
+        margin-left: 24px;
+        .hc-card-max-h-box {
+            position: relative;
+            height: calc(100% - 56px);
+            overflow-y: auto;
+            scroll-behavior: smooth;
+            &.node-tree {
+                height: 100%;
+                .hc-tree-foot-tip-box {
+                    padding: 15px 0;
+                    text-align: center;
+                    border: 0;
+                    z-index: 11;
+                    .dot-view {
+                        width: auto;
+                        margin-top: 0;
+                    }
+                    .dot-view + .dot-view {
+                        margin-left: 80px;
+                    }
+                }
+            }
+            &::-webkit-scrollbar {
+                width: 0;
+            }
+        }
+        .data-fill-foot-box {
+            position: absolute;
+            bottom: 0;
+            right: 24px;
+            padding: 24px;
+            left: 20px;
+            box-shadow: 0px -3px 6px rgb(0 0 0 / 6%);
+            text-align: center;
+        }
+    }
+}
+.flip-list-move {
+    transition: transform 0.5s;
+}
+.no-move {
+    transition: transform 0s;
+}

src/styles_bak/data-fill/wbs.scss

@@ -0,0 +1,305 @@
+.hc-layout-box {
+    display: flex;
+    position: relative;
+    height: 100%;
+    .hc-layout-left-box {
+        width: 382px;
+        position: relative;
+        background: #f1f5f8;
+        border-radius: 10px;
+        transition: 0.2s;
+        margin-right: 24px;
+        margin-left: -24px;
+        visibility: hidden;
+        box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
+        .horizontal-drag-line {
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 4px;
+            height: 100%;
+            user-select: none;
+            cursor: col-resize;
+            background-color: #00000000;
+        }
+        .hc-project-box {
+            position: relative;
+            padding: 15px 24px;
+            display: flex;
+            align-items: flex-start;
+            border-bottom: 1px solid #E9E9E9;
+            .hc-project-icon-box {
+                font-size: 30px;
+                color: var(--el-color-primary);
+            }
+            .project-name-box {
+                flex: auto;
+                position: relative;
+                overflow: hidden;
+                .project-alias {
+                    color: var(--el-color-primary);
+                }
+                .project-name {
+                    margin-top: 6px;
+                    color: #838791;
+                }
+            }
+        }
+        .hc-tree-box {
+            position: relative;
+            padding: 15px 20px;
+            height: calc(100% - 187px);
+            .hc-search-tree-val {
+                position: relative;
+                margin-bottom: 24px;
+            }
+            .hc-tree-scrollbar {
+                position: relative;
+                height: calc(100% - 68px);
+            }
+        }
+        .hc-tree-foot-tip-box {
+            position: absolute;
+            border-top: 1px solid #E9E9E9;
+            padding: 15px 24px;
+            width: 100%;
+            bottom: 0;
+            .dot-view {
+                position: relative;
+                display: inline-flex;
+                width: 50%;
+                align-items: center;
+                padding-left: 24px;
+                margin-top: 15px;
+                &:before {
+                    position: absolute;
+                    left: 0;
+                    content: "";
+                    width: 15px;
+                    height: 15px;
+                    background-color: inherit;
+                    border-radius: 25px;
+                }
+                &.green:before {
+                    background-color: #1ECC95;
+                }
+                &.black:before {
+                    background-color: #111111;
+                }
+                &.orange:before {
+                    background-color: #f37b1d;
+                }
+                &.blue:before {
+                    background-color: #0081ff;
+                }
+            }
+        }
+        &.on-transition {
+            transition: none;
+        }
+        &.show {
+            margin-left: 0;
+            visibility: visible;
+        }
+    }
+    .hc-layout-content-box {
+        flex: 1;
+        display: inline-grid;
+        position: relative;
+        .data-fill-foot-box {
+            position: absolute;
+            bottom: 0;
+            right: 24px;
+            padding: 24px;
+            left: 20px;
+            box-shadow: 0px -3px 6px rgb(0 0 0 / 6%);
+            text-align: center;
+        }
+    }
+}
+
+.hc-tree-mp-tip-box {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .dot-view {
+        position: relative;
+        display: flex;
+        align-items: center;
+        &:before {
+            position: relative;
+            left: 0;
+            content: "";
+            width: 15px;
+            height: 15px;
+            background-color: inherit;
+            border-radius: 25px;
+            margin-right: 6px;
+        }
+        &.green:before {
+            background-color: #1ECC95;
+        }
+        &.black:before {
+            background-color: #111111;
+        }
+        &.orange:before {
+            background-color: #f37b1d;
+        }
+        &.blue:before {
+            background-color: #0081ff;
+        }
+        & + .dot-view {
+            margin-left: 80px;
+        }
+    }
+}
+.upload-drawing {
+    display: none;
+}
+
+.lr-dialog-footer {
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    .left {
+        .el-button + .el-button {
+            margin-left: 10px;
+        }
+    }
+}
+
+.copy-node-many-box {
+    position: relative;
+    height: 51vh;
+    display: flex;
+    // margin-top: 24px;
+    margin-bottom: -30px;
+    border-top: 1px solid #efeff5;
+    .copy-node-many-tree {
+        position: relative;
+        flex: 1;
+        height: 100%;
+        padding: 20px 20px 20px 0;
+        border-right: 1px solid #efeff5;
+    }
+    .copy-node-many-table {
+        position: relative;
+        flex: 1;
+        height: 100%;
+        padding: 20px 0 20px 20px;
+    }
+}
+
+.sort-node-body-box.list-group {
+    position: relative;
+    min-height: 20px;
+    border: 1px solid #EEEEEE;
+    .list-group-item {
+        position: relative;
+        display: flex;
+        align-items: center;
+        padding: 6px 15px;
+        cursor: move;
+        transition: background 0.2s;
+        .index-box {
+            position: relative;
+            width: 50px;
+        }
+        .title-box {
+            position: relative;
+            padding-right: 24px;
+            flex: 1;
+        }
+        .icon-box {
+            position: relative;
+            font-size: 18px;
+            display: flex;
+            align-items: center;
+            .icon {
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+            }
+        }
+        &:first-child .icon-box i:last-child,
+        &:last-child .icon-box i:first-child {
+            cursor: default;
+            color: #aaaaaa;
+        }
+        &:hover {
+            background: var(--el-color-primary-light-9);
+        }
+    }
+    .list-group-item + .list-group-item {
+        border-top: 1px solid #EEEEEE;
+    }
+    &.header {
+        border-bottom: 0;
+        .list-group-item {
+            cursor: default;
+            padding: 8px 15px;
+            background-color: #F8F8F8;
+            .index-box, .title-box, .icon-box {
+                font-size: 14px;
+            }
+        }
+    }
+}
+.flip-list-move {
+    transition: transform 0.5s;
+}
+.no-move {
+    transition: transform 0s;
+}
+
+.hc-attachment-card {
+    position: relative;
+    .hc-attachment-header {
+        position: relative;
+        background: #E7EEF4;
+        font-size: 18px;
+        padding: 10px 18px;
+        border-radius: 4px 4px 0 0;
+    }
+    .hc-attachment-content {
+        position: relative;
+        background: white;
+        padding: 2px;
+        border-radius: 0 0 4px 4px;
+        .hc-attachment-item {
+            position: relative;
+            padding: 8px 16px;
+            display: flex;
+            align-items: center;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: background 0.2s;
+            .hc-attachment-file-name {
+                position: relative;
+                flex: 1;
+                display: flex;
+                align-items: center;
+                .name {
+                    position: relative;
+                    flex: 1;
+                    margin-left: 6px;
+                }
+            }
+            .hc-attachment-btn-box {
+                position: relative;
+            }
+            &:hover {
+                background: var(--el-color-primary-light-9);
+            }
+        }
+        .hc-attachment-item + .hc-attachment-item {
+            border-top: 1px dashed #efeded;
+        }
+    }
+}
+.hc-attachment-card + .hc-attachment-card {
+    margin-top: 24px;
+}
+

src/styles_bak/error/style.scss

@@ -0,0 +1,40 @@
+.error-page {
+    background: #f0f2f5;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .img {
+        margin-right: 80px;
+        height: 360px;
+        width: 100%;
+        max-width: 430px;
+        background-repeat: no-repeat;
+        background-position: 50% 50%;
+        background-size: contain;
+    }
+    .content {
+        h1 {
+            color: #434e59;
+            font-size: 72px;
+            font-weight: 600;
+            line-height: 72px;
+            margin-bottom: 24px;
+        }
+        .desc {
+            color: rgba(0, 0, 0, 0.45);
+            font-size: 20px;
+            line-height: 28px;
+            margin-bottom: 16px;
+        }
+    }
+}
+
+html.theme-dark {
+    .error-page {
+        background: var(--hc-bg-color);
+        .content .desc {
+            color: var(--hc-text-color);
+        }
+    }
+}

src/styles_bak/font/index.scss

@@ -0,0 +1,20 @@
+// 通用字体
+@import 'z-vfonts/Lato.css';
+// 等宽字体
+@import 'z-vfonts/FiraCode.css';
+
+html, body, * {
+    font-family: v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+//特殊符号
+@font-face {
+    font-family: "EUDC";
+    src: url('./EUDC.ttf') format('truetype');
+    font-display: swap;
+}
+
+//特殊字符代码的字体
+.font-EUDC {
+    font-family: 'EUDC', serif;
+}

src/styles_bak/gauge/bezier.scss

@@ -0,0 +1,27 @@
+.hc-layout-box {
+    position: relative;
+    height: 100%;
+    .hc-extra-icon-btn {
+        height: 40px;
+        width: 40px;
+        font-size: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 10px;
+        color: #50545E;
+        cursor: pointer;
+        transition: 0.2s;
+        &:hover {
+            color: var(--el-color-primary);
+        }
+    }
+    .hc-extra-icon-btn + .hc-extra-icon-btn {
+        margin-left: 0;
+    }
+}
+
+.admin-part-data-table {
+    position: relative;
+    max-height: 400px;
+}

src/styles_bak/gauge/station.scss

@@ -0,0 +1,27 @@
+.hc-layout-box {
+    position: relative;
+    height: 100%;
+}
+
+.hc-import-modal-box {
+    .tip-box {
+        position: relative;
+        margin-bottom: 28px;
+    }
+    .upload-box {
+        position: relative;
+    }
+    .text-orange {
+        position: relative;
+        margin-top: 30px;
+        margin-bottom: 5px;
+    }
+    .demo-img-box {
+        position: relative;
+        width: 100%;
+        img {
+            width: 100%;
+        }
+    }
+}
+

src/styles_bak/index.scss

@@ -0,0 +1,5 @@
+@import './app/color';
+@import './app/text';
+@import './app/main';
+@import './app/element';
+@import './app/theme';

src/styles_bak/ledger/query.scss

@@ -0,0 +1,20 @@
+.hc-layout-box {
+    position: relative;
+    height: 100%;
+    display: flex;
+    .hc-layout-left {
+        position: relative;
+        width: 260px;
+        height: 100%;
+        color: #1A1A1A;
+        border-radius: 10px;
+        background-color: #f1f5f8;
+        box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
+    }
+    /*.hc-layout-content {
+        flex: 1;
+        position: relative;
+        margin-left: 24px;
+        height: 100%;
+    }*/
+}

src/styles_bak/ledger/write.scss

@@ -0,0 +1,57 @@
+.hc-layout-box {
+    display: flex;
+    position: relative;
+    height: 100%;
+    .hc-layout-left-box {
+        width: 382px;
+        position: relative;
+        background: #f1f5f8;
+        border-radius: 10px;
+        margin-right: 24px;
+        box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
+        .horizontal-drag-line {
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 2px;
+            height: 100%;
+            user-select: none;
+            cursor: col-resize;
+            background-color: #00000000;
+        }
+        .hc-project-box {
+            position: relative;
+            padding: 15px 24px;
+            display: flex;
+            align-items: flex-start;
+            border-bottom: 1px solid #E9E9E9;
+            .hc-project-icon-box {
+                font-size: 30px;
+                color: var(--el-color-primary);
+            }
+            .project-name-box {
+                flex: auto;
+                position: relative;
+                overflow: hidden;
+                .project-alias {
+                    color: var(--el-color-primary);
+                }
+                .project-name {
+                    margin-top: 6px;
+                    color: #838791;
+                }
+            }
+        }
+        .hc-tree-box {
+            position: relative;
+            padding: 15px 20px;
+            height: 100%;
+        }
+    }
+    .hc-layout-content-box {
+        flex: 1;
+        height: 100%;
+        display: inline-grid;
+        position: relative;
+    }
+}

src/styles_bak/other-file/image-data.scss

@@ -0,0 +1,196 @@
+.hc-layout-box {
+    display: flex;
+    position: relative;
+    height: calc(100% - 60px);
+    .hc-layout-left-box {
+        position: relative;
+        background: white;
+        overflow: auto;
+        border-top: 1px solid #EEEEEE;
+        border-right: 1px solid #EEEEEE;
+        width: 382px;
+        .horizontal-drag-line {
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 4px;
+            height: 100%;
+            user-select: none;
+            cursor: col-resize;
+            background-color: #e4e4e4;
+            transition: background-color 0.2s;
+            &:hover {
+                background-color: rgba(119, 119, 119, .5);
+            }
+        }
+        .hc-project-box {
+            position: relative;
+            padding: 15px 24px;
+            border-bottom: 1px solid #EEEEEE;
+            .project-alias-box {
+                position: relative;
+                color: var(--hc-primary);
+            }
+            .project-name {
+                position: relative;
+                color: #999999;
+                margin-top: 10px;
+            }
+        }
+        .hc-el-tree-box {
+            position: relative;
+            padding: 15px 20px;
+            height: calc(100% - 85px);
+            overflow: auto;
+        }
+        &.view-wbs-type .hc-el-tree-box {
+            height: calc(100% - 85px);
+        }
+        &.view-date-type .hc-el-tree-box {
+            height: 100%;
+        }
+    }
+    .hc-layout-content-box {
+        flex: 1;
+        overflow: auto;
+        position: relative;
+        display: inline-grid;
+        padding: 0 24px 15px 20px;
+    }
+}
+.hc-card-header {
+    position: relative;
+    font-size: initial;
+    font-weight: initial;
+}
+.hc-img-list-box {
+    position: relative;
+    .img-list-item {
+        position: relative;
+        display: flex;
+        padding: 15px 0;
+        .img-box {
+            position: relative;
+            height: 150px;
+            width: 150px;
+            margin-right: 24px;
+            .el-image-box {
+                height: 150px;
+                width: 150px;
+                background-color: #fdfdfd;
+                border-radius: 4px;
+            }
+            video {
+                height: 150px;
+                width: 150px;
+                border-radius: 4px;
+            }
+        }
+        .content-box {
+            position: relative;
+            height: 150px;
+            flex: 1;
+            .title-box {
+                position: relative;
+                display: flex;
+                align-items: center;
+                .text-title {
+                    position: relative;
+                    flex: 1;
+                }
+                .icon-box {
+                    position: relative;
+                    font-size: 24px;
+                    height: 28px;
+                    display: flex;
+                    align-items: center;
+                    .icon-item {
+                        cursor: pointer;
+                    }
+                    .icon-item + .icon-item {
+                        margin-left: 20px;
+                    }
+                }
+            }
+            .text-content {
+                position: relative;
+                margin: 12px 0;
+                line-height: 1.7;
+                height: 71.4px;
+                display: flex;
+                align-items: center;
+            }
+            .foot-text-box {
+                position: relative;
+                font-size: 16px;
+            }
+        }
+        &:first-child {
+            padding-top: 0;
+        }
+        &:last-child {
+            padding-bottom: 0;
+        }
+    }
+    .img-list-item + .img-list-item {
+        border-top: 1px solid #eeeeee;
+    }
+}
+.hc-card-content-box {
+    position: relative;
+    display: flex;
+    .hc-form-box {
+        position: relative;
+    }
+    .card-right-table-box {
+        position: relative;
+        flex: 1;
+        margin-left: 50px;
+        height: 610px;
+        overflow: auto;
+    }
+}
+
+.modal-card-box {
+    .title-box {
+        position: relative;
+        i {
+            font-size: 20px;
+            position: absolute;
+            right: 0;
+            cursor: pointer;
+            color: #717171;
+            transition: color .3s;
+            &:hover {
+                color: var(--hc-primary);
+            }
+        }
+    }
+    .data-table-box {
+        position: relative;
+        max-height: 400px;
+        overflow: auto;
+        margin-bottom: 10px;
+    }
+}
+.preview-video {
+    width: 100%;
+}
+
+html.theme-dark {
+    .hc-layout-box .hc-layout-left-box {
+        background: var(--hc-bg-color);
+        border-top: 1px solid #303030;
+        border-right: 1px solid #303030;
+    }
+    .hc-layout-box .hc-layout-left-box .hc-project-box {
+        border-bottom: 1px solid #303030;
+    }
+    .hc-layout-box .hc-tree-foot-tip-box {
+        border-top: 1px solid #303030;
+    }
+    .hc-layout-box .hc-layout-left-box .horizontal-drag-line {
+        background-color: #303030;
+    }
+}
+

src/styles_bak/other-file/image-form.scss

@@ -0,0 +1,56 @@
+.hc-layout-box {
+    display: flex;
+    position: relative;
+    height: 100%;
+    .hc-layout-left-box {
+        width: 382px;
+        position: relative;
+        background: #f1f5f8;
+        border-radius: 10px;
+        margin-right: 24px;
+        box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
+        .horizontal-drag-line {
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 4px;
+            height: 100%;
+            user-select: none;
+            cursor: col-resize;
+            background-color: #00000000;
+        }
+        .hc-project-box {
+            position: relative;
+            padding: 15px 24px;
+            display: flex;
+            align-items: flex-start;
+            border-bottom: 1px solid #E9E9E9;
+            .hc-project-icon-box {
+                font-size: 30px;
+                color: var(--el-color-primary);
+            }
+            .project-name-box {
+                flex: auto;
+                position: relative;
+                overflow: hidden;
+                .project-alias {
+                    color: var(--el-color-primary);
+                }
+                .project-name {
+                    margin-top: 6px;
+                    color: #838791;
+                }
+            }
+        }
+        .hc-tree-box {
+            position: relative;
+            padding: 15px 20px;
+            height: calc(100% - 80px);
+        }
+    }
+    .hc-layout-content-box {
+        flex: 1;
+        display: inline-grid;
+        position: relative;
+    }
+}

src/styles_bak/other-file/image-view.scss

@@ -0,0 +1,105 @@
+.hc-layout-box {
+    display: flex;
+    position: relative;
+    height: 100%;
+    .hc-layout-left-box {
+        width: 382px;
+        position: relative;
+        background: #f1f5f8;
+        border-radius: 10px;
+        box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
+        .horizontal-drag-line {
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 4px;
+            height: 100%;
+            user-select: none;
+            cursor: col-resize;
+            background-color: #00000000;
+        }
+        .hc-project-box {
+            position: relative;
+            padding: 15px 24px;
+            display: flex;
+            align-items: flex-start;
+            border-bottom: 1px solid #E9E9E9;
+            .hc-project-icon-box {
+                font-size: 30px;
+                color: var(--el-color-primary);
+            }
+            .project-name-box {
+                flex: auto;
+                position: relative;
+                overflow: hidden;
+                .project-alias {
+                    color: var(--el-color-primary);
+                }
+                .project-name {
+                    margin-top: 6px;
+                    color: #838791;
+                }
+            }
+        }
+        .hc-tree-box {
+            position: relative;
+            padding: 15px 20px;
+            height: calc(100% - 80px);
+            &.date-tree {
+                height: 100%;
+            }
+        }
+    }
+    .hc-layout-content-box {
+        flex: 1;
+        display: inline-grid;
+        position: relative;
+        margin-left: 24px;
+        .hc-table-col-item {
+            position: relative;
+            display: flex;
+            .img-box {
+                height: 90px;
+                width: 90px;
+                margin-right: 16px;
+                .hc-image {
+                    height: 90px;
+                    width: 90px;
+                    border-radius: 5px;
+                }
+                video {
+                    height: 90px;
+                    width: 90px;
+                    border-radius: 5px;
+                    object-fit: fill;
+                }
+            }
+            .content-box {
+                flex: 1;
+                position: relative;
+                height: 90px;
+                .title {
+                    color: #1a1a1a;
+                    font-weight: bold;
+                    font-size: 14px;
+                }
+                .shootingUser {
+                    font-size: 12px;
+                }
+                .shootingTimeStr {
+                    color: #a1a1a1;
+                    font-size: 12px;
+                }
+                .fileSize {
+                    color: #a1a1a1;
+                    font-size: 12px;
+                }
+            }
+        }
+    }
+}
+
+.preview-video {
+    width: 100%;
+    max-height: 500px;
+}

src/styles_bak/other-file/project-scanning.scss

@@ -0,0 +1,95 @@
+.hc-layout-box {
+    display: flex;
+    position: relative;
+    height: 100%;
+    .hc-layout-left-box {
+        width: 382px;
+        position: relative;
+        background: #f1f5f8;
+        border-radius: 10px;
+        box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
+        .horizontal-drag-line {
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 4px;
+            height: 100%;
+            user-select: none;
+            cursor: col-resize;
+            background-color: #00000000;
+        }
+        .hc-project-box {
+            position: relative;
+            padding: 15px 24px;
+            display: flex;
+            align-items: flex-start;
+            border-bottom: 1px solid #E9E9E9;
+            .hc-project-icon-box {
+                font-size: 30px;
+                color: var(--el-color-primary);
+            }
+            .project-name-box {
+                flex: auto;
+                position: relative;
+                overflow: hidden;
+                .project-alias {
+                    color: var(--el-color-primary);
+                }
+                .project-name {
+                    margin-top: 6px;
+                    color: #838791;
+                }
+            }
+        }
+        .hc-tree-box {
+            position: relative;
+            padding: 15px 20px;
+            height: calc(100% - 80px);
+        }
+    }
+    .hc-layout-content-box {
+        flex: 1;
+        display: inline-grid;
+        position: relative;
+        margin-left: 24px;
+    }
+}
+
+.hc-card-body-flex {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    .flex-table {
+        position: relative;
+        margin-right: 24px;
+        width: 40%;
+        height: 100%;
+    }
+    .flex-iframe {
+        flex: 1;
+        position: relative;
+        height: 100%;
+        border: 1px solid #777;
+        overflow: hidden;
+        iframe {
+            height: 100%;
+        }
+        &.hc-no-table-form {
+            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;
+                }
+            }
+        }
+    }
+}

src/styles_bak/other/first-item.scss

@@ -0,0 +1,107 @@
+.hc-layout-box {
+    display: flex;
+    position: relative;
+    height: 100%;
+    .hc-layout-left-box {
+        width: 382px;
+        position: relative;
+        background: #f1f5f8;
+        border-radius: 10px;
+        box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
+        .horizontal-drag-line {
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 4px;
+            height: 100%;
+            user-select: none;
+            cursor: col-resize;
+            background-color: #00000000;
+        }
+        .hc-project-box {
+            position: relative;
+            padding: 15px 24px;
+            display: flex;
+            align-items: flex-start;
+            border-bottom: 1px solid #E9E9E9;
+            .hc-project-icon-box {
+                font-size: 30px;
+                color: var(--el-color-primary);
+            }
+            .project-name-box {
+                flex: auto;
+                position: relative;
+                overflow: hidden;
+                .project-alias {
+                    color: var(--el-color-primary);
+                }
+                .project-name {
+                    margin-top: 6px;
+                    color: #838791;
+                }
+            }
+        }
+        .hc-tree-box {
+            position: relative;
+            padding: 15px 20px;
+            height: calc(100% - 80px);
+        }
+    }
+    .hc-layout-content-box {
+        flex: 1;
+        display: inline-grid;
+        position: relative;
+        margin-left: 24px;
+    }
+}
+
+.hc-first-item-node-layout {
+    .node-content {
+        flex: 1;
+        display: flex;
+        position: relative;
+        margin-bottom: 24px;
+        height: calc(100% - 105px);
+        .node-form {
+            flex: 1;
+            padding: 24px;
+            margin-right: 24px;
+            position: relative;
+            background: #f1f5f8;
+            border-radius: 10px;
+            box-shadow: -2px 0px 10px 0px rgba(32, 37, 50, 0.03), 0px 10px 21px 20px rgba(32, 37, 50, 0.03);
+        }
+        .node-file {
+            width: 440px;
+            position: relative;
+            padding: 24px 20px;
+            background: #f1f5f8;
+            border-radius: 10px;
+            box-shadow: -2px 0px 10px 0px rgba(32, 37, 50, 0.03), 0px 10px 21px 20px rgba(32, 37, 50, 0.03);
+            .title {
+                position: relative;
+                margin-bottom: 14px;
+                font-size: 16px;
+                font-weight: 500;
+            }
+            .node-upload-box {
+                position: relative;
+            }
+            .hc-table-node-file-box {
+                position: relative;
+                height: calc(100% - 245px);
+            }
+        }
+    }
+    .node-action {
+        position: relative;
+        height: 80px;
+        background: #f1f5f8;
+        border-radius: 10px;
+        display: flex;
+        align-items: center;
+        padding: 20px 24px;
+        box-shadow: -2px 0px 10px 0 rgba(32, 37, 50, 0.03), 0 -10px 21px 3px rgba(32, 37, 50, 0.03);
+        overflow: hidden;
+    }
+}

src/styles_bak/other/order-service.scss

@@ -0,0 +1,247 @@
+.hc-order-service {
+    position: relative;
+    height: 100%;
+    display: flex;
+    .order-service-content {
+        position: relative;
+        flex: 1 1 auto;
+        height: 105%;
+        margin: -24px;
+        margin-top: -10px;
+        .content-box {
+            position: relative;
+            padding: 24px;
+            .comment-card-box {
+                background: #f1f5f8;
+                border-radius: 10px;
+                margin-bottom: 24px;
+                padding: 24px;
+                position: relative;
+                box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
+                display: flex;
+                align-items: flex-start;
+                .user-avatar-box {
+                    margin-right: 18px;
+                }
+                .card-content-box {
+                    position: relative;
+                    flex: 1;
+                    .user-info-box {
+                        position: relative;
+                        line-height: 1.6;
+                        .text-lg {
+                            color: #1A1A1A;
+                        }
+                        .text-gray {
+                            color: #838791;
+                        }
+                    }
+                    .desc_para {
+                        margin: 20px 0 10px;
+                        color: #50545E;
+                    }
+                    .image_desc {
+                        display: flex;
+                        .hc-image-box {
+                            margin-right: 10px;
+                            .hc-image {
+                                display: flex;
+                                width: 120px;
+                                height: 120px;
+                                border-radius: 6px;
+                            }
+                        }
+                    }
+                    .foot-tools-box {
+                        position: relative;
+                        display: flex;
+                        align-items: center;
+                        margin-top: 24px;
+                        .icon-box {
+                            position: relative;
+                            height: 38px;
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                            font-size: 20px;
+                            cursor: pointer;
+                            color: #838791;
+                            transition: color 0.3s;
+                            .badge {
+                                margin-left: 5px;
+                                font-size: 13px;
+                            }
+                            &.active {
+                                color: var(--el-color-primary);
+                            }
+                            &:hover {
+                                color: #282828;
+                            }
+                        }
+                        .icon-box + .icon-box {
+                            margin-left: 30px;
+                        }
+                    }
+                }
+                .code-status-box {
+                    position: absolute;
+                    width: 140px;
+                    right: 0;
+                    top: 0;
+                    .widget {
+                        width: 140px;
+                        height: 140px;
+                        display: inline-flex;
+                    }
+                }
+                .collapse-comment-box {
+                    position: relative;
+                    margin-top: 20px;
+                    .comment-reply-content-box {
+                        position: relative;
+                        display: flex;
+                        align-items: flex-end;
+                        width: 600px;
+                        margin-bottom: 20px;
+                    }
+                    .user-comment-info-box {
+                        position: relative;
+                        display: flex;
+                        padding: 16px 0;
+                        .user-comment-box {
+                            position: relative;
+                            margin-left: 15px;
+                            flex: auto;
+                            .user-info-box {
+                                position: relative;
+                                .user-name {
+                                    font-size: 16px;
+                                    margin-right: 10px;
+                                    color: var(--el-color-primary);
+                                }
+                                .create-time {
+                                    color: #838791;
+                                    font-size: 12px;
+                                }
+                            }
+                            .user-comment-content-box {
+                                position: relative;
+                                margin-top: 5px;
+                                color: #50545E;
+                                font-size: 14px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .page-top-btn {
+            position: absolute;
+            z-index: 10;
+            bottom: 8px;
+            right: -20px;
+            width: 40px;
+            height: 40px;
+            font-size: 22px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            background-color: white;
+            color: #333639;
+            cursor: pointer;
+            box-shadow: rgba(0, 0, 0, .12) 0 2px 8px 0;
+        }
+    }
+    .order-service-data {
+        position: relative;
+        height: 100%;
+        width: 500px;
+        margin-left: 50px;
+        .time-line-box {
+            position: relative;
+            padding-top: 2px;
+            height: calc(100% - 60px);
+        }
+        .time-line-box.time-height {
+            height: calc(100% - 376px);
+        }
+        .evaluation-box {
+            position: relative;
+            padding-top: 15px;
+            display: none;
+            border-top: 1px solid #e4e4e4;
+            .tip-box {
+                margin: 12px 0;
+                color: #50545E;
+            }
+            .radio-group-box {
+                position: relative;
+                margin-bottom: 15px;
+                line-height: 2.5;
+                .radio-group {
+                    display: inline-block;
+                }
+            }
+            .btn-box {
+                position: relative;
+                text-align: right;
+                right: 10px;
+            }
+            &.show {
+                display: block;
+            }
+        }
+        .hc-add-icon {
+            position: relative;
+            width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 6px;
+            padding: 0;
+        }
+        .hc-add-icon.el-button[hc-btn] .material-symbols-rounded {
+            font-size: 24px;
+            margin-right: 0;
+        }
+        .horizontal-drag-line {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 4px;
+            height: 100%;
+            user-select: none;
+            cursor: col-resize;
+            background-color: transparent;
+        }
+    }
+}
+
+.modal-checkbox-box {
+    position: relative;
+    line-height: 2.5;
+    .checkbox-item {
+        position: relative;
+    }
+}
+.foot-btn-box {
+    position: relative;
+    text-align: center;
+    margin-top: 50px;
+    border-top: 1px solid #e6e9f1;
+    padding-top: 24px;
+}
+
+.tip-modal-icon-box {
+    font-size: 126px;
+    text-align: center;
+    position: relative;
+    color: var(--el-color-primary);
+}
+.tip-modal-text-box {
+    position: relative;
+    font-size: 28px;
+    color: #1A1A1A;
+}

src/styles_bak/schedule/hc-data.scss

@@ -0,0 +1,171 @@
+.hc-layout-box {
+    position: relative;
+    height: 100%;
+    .hc-round-chart {
+        position: relative;
+        margin-bottom: 24px;
+        height: 177px;
+        .hc-round-chart-card-box {
+            display: flex;
+            align-items: center;
+            .hc-card-content-box {
+                position: relative;
+                flex: 1;
+                .card-title {
+                    color: #50545E;
+                    font-weight: 500;
+                }
+                .card-ratio-box {
+                    position: relative;
+                    align-items: center;
+                    display: flex;
+                    margin: 10px 0;
+                    .ratio-num {
+                        font-size: 40px;
+                        color: #1a1a1a;
+                    }
+                    .ratio-text {
+                        position: relative;
+                        margin-left: 10px;
+                        .unit {
+                            color: #1a1a1a;
+                            font-size: 16px;
+                        }
+                        .text {
+                            font-size: 12px;
+                            color: #999999;
+                            margin-top: 2px;
+                        }
+                    }
+                }
+                .card-amount-box {
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                    .amount-item {
+                        position: relative;
+                        text-align: center;
+                        .text {
+                            font-size: 12px;
+                            color: #999999;
+                        }
+                        .num {
+                            font-size: 14px;
+                            color: #50545e;
+                            font-weight: 500;
+                            margin-top: 5px;
+                        }
+                    }
+                    .amount-divider {
+                        position: relative;
+                        width: 1px;
+                        height: 35px;
+                        margin: 0 20px;
+                        background-color: #CCD0DE;
+                    }
+                }
+            }
+            .hc-card-chart-box {
+                position: relative;
+                height: 129px;
+                width: 129px;
+                display: block;
+                .text-num {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    pointer-events: none;
+                    color: var(--el-color-primary);
+                }
+            }
+        }
+    }
+    .hc-round-chart-card-box,
+    .hc-report-chart-card-box,
+    .hc-media-chart-card-box {
+        position: relative;
+        background: #f1f5f8;
+        border-radius: 10px;
+        padding: 24px;
+        box-shadow: -2px 0px 10px 0px rgba(32,37,50,0.03), 0px 10px 21px 20px rgba(32,37,50,0.03);
+    }
+    .hc-chart-flex {
+        position: relative;
+        height: calc(100% - 200px);
+        .hc-report-chart-card-box, .hc-media-chart-card-box {
+            position: relative;
+            height: 100%;
+            overflow: hidden;
+            .hc-chart-title {
+                position: relative;
+                .title {
+                    color: #333333;
+                    font-size: 18px;
+                    font-weight: 500;
+                }
+                .hc-chart-text {
+                    color: #999999;
+                    font-size: 14px;
+                    margin-left: 16px;
+                }
+            }
+            .hc-report-chart-box {
+                position: relative;
+                height: calc(100% - 55px);
+                margin-top: 30px;
+                background: #E7EEF4;
+                border-radius: 10px;
+            }
+            .hc-media-chart-box {
+                position: relative;
+                height: calc(100% - 70px);
+                margin-top: 30px;
+                background: #E7EEF4;
+                border-radius: 10px;
+            }
+        }
+        .hc-media-chart-card-box {
+            .hc-chart-title {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            }
+            .hc-media-chart-box .hc-media-pian-box {
+                position: absolute;
+                background: linear-gradient(0deg,rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.00) 100%);
+                border: 1px solid #ffffff;
+                border-radius: 10px;
+                color: #838791;
+                padding: 10px;
+                font-size: 14px;
+                top: 16px;
+                left: 16px;
+                .item {
+                    display: flex;
+                    align-items: center;
+                    .name {
+                        margin-right: 10px;
+                    }
+                    .num {
+                        color: #1A1A1A;
+                        font-size: 16px;
+                    }
+                    .num.c1 {
+                        color: #FF8F3E;
+                    }
+                    .num.c2 {
+                        color: #1573FF;
+                    }
+                    &+.item {
+                        margin-top: 8px;
+                    }
+                }
+            }
+        }
+    }
+}

src/styles_bak/schedule/hc-table.scss

@@ -0,0 +1,4 @@
+.hc-layout-box {
+    position: relative;
+    height: 100%;
+}

src/styles_bak/schedule/write.scss

@@ -0,0 +1,59 @@
+.hc-layout-box {
+    display: flex;
+    position: relative;
+    height: 100%;
+    .hc-layout-left-box {
+        width: 382px;
+        position: relative;
+        background: #f1f5f8;
+        border-radius: 10px;
+        box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
+        .horizontal-drag-line {
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 4px;
+            height: 100%;
+            user-select: none;
+            cursor: col-resize;
+            background-color: #00000000;
+        }
+        .hc-project-box {
+            position: relative;
+            padding: 15px 24px;
+            display: flex;
+            align-items: flex-start;
+            border-bottom: 1px solid #E9E9E9;
+            .hc-project-icon-box {
+                font-size: 30px;
+                color: var(--el-color-primary);
+            }
+            .project-name-box {
+                flex: auto;
+                position: relative;
+                overflow: hidden;
+                .project-alias {
+                    color: var(--el-color-primary);
+                }
+                .project-name {
+                    margin-top: 6px;
+                    color: #838791;
+                }
+            }
+        }
+        .hc-tree-box {
+            position: relative;
+            padding: 15px 20px;
+            height: calc(100% - 80px);
+        }
+    }
+    .hc-chart-content-box {
+        flex: 1;
+        position: relative;
+        margin-left: 24px;
+        background: #f1f5f8;
+        border-radius: 10px;
+        padding-top: 24px;
+        box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
+    }
+}

src/styles_bak/tasks/hc-data.scss

@@ -0,0 +1,68 @@
+.hc-layout-box {
+    position: relative;
+    height: 100%;
+    .hc-content-box {
+        position: relative;
+        height: calc(100% - 45px);
+    }
+}
+
+.obj-item-cell {
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin-top: 24px;
+    .label {
+        margin-right: 20px;
+        width: 126px;
+    }
+}
+
+.hc-card-body-flex {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    .flex-iframe {
+        flex: 1;
+        position: relative;
+        height: 100%;
+        border:1px solid #777;
+        overflow: hidden;
+        iframe {
+            height: 100%;
+        }
+        &.hc-no-table-form {
+            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;
+                }
+            }
+        }
+    }
+    .flex-table {
+        position: relative;
+        margin-left: 24px;
+        width: 40%;
+        height: 100%;
+        .data-table {
+            position: relative;
+            height: calc(100% - 125px);
+        }
+        .radio-group-box {
+            margin: 10px 0;
+        }
+        &.vh .data-table {
+            height: 100%;
+        }
+    }
+}

src/styles_bak/tasks/message.scss

@@ -0,0 +1,18 @@
+.hc-layout-box {
+    position: relative;
+    height: 100%;
+    display: flex;
+    .hc-layout-left-box {
+        width: 260px;
+        position: relative;
+        background: #f1f5f8;
+        border-radius: 10px;
+        box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
+    }
+    .hc-layout-content-box {
+        flex: 1;
+        display: inline-grid;
+        position: relative;
+        margin-left: 24px;
+    }
+}

src/styles_bak/tentative/detect/test-form.scss

@@ -0,0 +1,36 @@
+.hc-search-top-form {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+.hc-links-relate-tree-box {
+    position: relative;
+    height: 100%;
+    .hc-search-tree-val {
+        position: relative;
+        margin-bottom: 24px;
+    }
+    .hc-tree-scrollbar {
+        position: relative;
+        height: calc(100% - 50px);
+    }
+}
+
+.hc-links-sample-modal-box {
+    position: relative;
+    height: 100%;
+    display: flex;
+    .hc-links-sample-tree-box,
+    .hc-links-sample-table-box {
+        position: relative;
+        width: 300px;
+        height: 100%;
+    }
+    .hc-links-sample-tree-box {
+        margin-right: 24px;
+        border: 1px solid #EEEEEE;
+    }
+    .hc-links-sample-table-box {
+        flex: 1;
+    }
+}

src/styles_bak/tentative/detect/test.scss

@@ -0,0 +1,28 @@
+.hc-switch-tab-content {
+    position: relative;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    border: 1px solid #e9e9e9;
+    border-radius: 4px;
+    .hc-no-table-form {
+        position: relative;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .table-form-no {
+            position: relative;
+            text-align: center;
+            img {
+                width: 200px;
+            }
+            .desc {
+                text-align: center;
+                font-size: 16px;
+                color: #aaa;
+                margin-bottom: 24px;
+            }
+        }
+    }
+}

src/styles_bak/tentative/detect/third.scss

@@ -0,0 +1,19 @@
+.hc-links-sample-modal-box {
+    position: relative;
+    height: 100%;
+    display: flex;
+    .hc-links-sample-tree-box,
+    .hc-links-sample-table-box {
+        position: relative;
+        height: 100%;
+    }
+    .hc-links-sample-tree-box {
+        margin-right: 24px;
+        border: 1px solid #EEEEEE;
+        width: 300px;
+    }
+    .hc-links-sample-table-box {
+        display: inline-grid;
+        flex: 1;
+    }
+}

src/styles_bak/tentative/material/approach.scss

@@ -0,0 +1,28 @@
+.hc-switch-tab-content {
+    position: relative;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    border: 1px solid #e9e9e9;
+    border-radius: 4px;
+    .hc-no-table-form {
+        position: relative;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .table-form-no {
+            position: relative;
+            text-align: center;
+            img {
+                width: 200px;
+            }
+            .desc {
+                text-align: center;
+                font-size: 16px;
+                color: #aaa;
+                margin-bottom: 24px;
+            }
+        }
+    }
+}

src/styles_bak/user/index.scss

@@ -0,0 +1,91 @@
+.hc-layout-box {
+    position: relative;
+    height: 100%;
+    display: flex;
+    .hc-layout-left-box {
+        position: relative;
+        width: 260px;
+        height: 100%;
+        color: #1A1A1A;
+        border-radius: 10px;
+        background-color: #f1f5f8;
+        box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
+        .user-avatar-box {
+            position: relative;
+            text-align: center;
+            padding: 24px;
+            .user-avatar {
+                position: relative;
+                height: 100px;
+                width: 100px;
+                border-radius: 50%;
+                background: #d8d8d8;
+                margin: 24px auto auto;
+                border: 2px solid #ffffff;
+                box-shadow: 7px 7px 8px 0 rgba(54,92,167,0.15), -7px -7px 8px 0 #ffffff, 4px 4px 8px 0 rgba(54,92,167,0.15), -4px -4px 8px 0 #ffffff;
+                img {
+                    display: block;
+                    object-fit: cover;
+                    height: 100%;
+                    width: 100%;
+                    border-radius: 50%;
+                }
+                .user-avatar-upload {
+                    position: absolute;
+                    right: 0;
+                    bottom: 0;
+                    width: 24px;
+                    height: 24px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    background: #f1f5f8;
+                    border-radius: 50%;
+                    color: #838791;
+                    cursor: pointer;
+                    box-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15);
+                    transition: color 0.2s;
+                    &:hover {
+                        color: var(--el-color-primary);
+                    }
+                }
+            }
+            .user-name {
+                position: relative;
+                margin-top: 18px;
+                font-weight: bold;
+                color: #1a1a1a;
+                font-size: 16px;
+            }
+        }
+        .user-menu-box {
+            position: relative;
+            height: calc(100% - 230px);
+        }
+    }
+    .hc-layout-content-box {
+        flex: 1;
+        display: inline-grid;
+        position: relative;
+        margin-left: 24px;
+        .basic-hight {
+            height: calc(100% - 75px);
+        }
+        .hc-card-foot-box {
+            position: absolute;
+            height: 80px;
+            width: 100%;
+            bottom: -24px;
+            background: #f1f5f8;
+            border-radius: 8px 8px 0 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 -10px 21px 3px rgba(32,37,50,0.03);
+        }
+        .foot-recycle {
+            position: relative;
+            display: flex;
+        }
+    }
+}

src/styles_bak/view/config.scss

@@ -0,0 +1,87 @@
+.hc-theme-box {
+    position: relative;
+    .item {
+        position: relative;
+        width: 233px;
+        height: 133px;
+        border: 1px solid #e8e8e8;
+        border-radius: 5px;
+        background-color: white;
+        display: inline-block;
+        margin-right: 20px;
+        .demo {
+            position: relative;
+            height: 90px;
+            background-color: white;
+            border-radius: 5px 5px 0 0;
+            img {
+                width: 100%;
+            }
+            &.auto {
+                background: linear-gradient(-45deg, #333333 115px,#ffffff 0);
+                img {
+                    opacity: 0.8;
+                }
+            }
+            &.light {
+                img {
+                    opacity: 0.3;
+                }
+            }
+            &.dark {
+                background-color: #333333;
+            }
+        }
+        .action {
+            position: relative;
+            background-color: white;
+            border-top: 1px solid #e8e8e8;
+            border-radius: 0 0 5px 5px;
+            padding: 0 16px;
+            transition: background-color 0.2s;
+            cursor: pointer;
+        }
+        &.active {
+            box-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15), 0 0 8px 0 #ffffff;
+            .action {
+                cursor: default;
+                background-color: var(--el-color-primary-light-9);
+            }
+        }
+    }
+    &.color-box .item {
+        height: 137.5px;
+        .demo {
+            height: 94.5px;
+        }
+    }
+    &.home-bg-box .item {
+        display: inline-flex;
+        width: 160px;
+        height: 100px;
+        border-radius: 8px;
+        border: 3px solid #00000000;
+        transition: border-color 0.2s;
+        cursor: pointer;
+        img {
+            width: 100%;
+            border-radius: 5px;
+        }
+        &.active {
+            border: 3px solid var(--el-color-primary);
+        }
+    }
+}
+
+.hc-screenshot-box {
+    position: relative;
+    .item {
+        display: inline-flex;
+        align-items: center;
+        margin-right: 50px;
+        .label {
+            color: #50545E;
+        }
+    }
+}
+

src/styles_bak/view/home.scss

@@ -0,0 +1,49 @@
+.home-styles-box {
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+    .hc-home-input-box {
+        position: relative;
+        height: 100%;
+        z-index: 2;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .hc-home-content {
+            position: relative;
+            margin-top: -20rem;
+            width: 45rem;
+            .hc-slogan-icon {
+                position: relative;
+                text-align: center;
+                font-size: 3.5rem;
+                color: white;
+                img {
+                    height: 60px;
+                }
+            }
+            .home-link-box {
+                position: relative;
+                margin-top: 1.5rem;
+                padding: 0 4rem;
+                display: flex;
+                align-items: center;
+                font-size: 14px;
+                color: white;
+                .home-link {
+                    cursor: pointer;
+                    border: 1px solid white;
+                    border-radius: 50px;
+                    padding: 2px 10px;
+                    margin-left: 15px;
+                    transition: 0.2s;
+                    &:hover {
+                        color: var(--el-color-primary);
+                        border-color: var(--el-color-primary);
+                        background-color: var(--el-color-primary-light-9);
+                    }
+                }
+            }
+        }
+    }
+}

src/styles_bak/view/login.scss

@@ -0,0 +1,130 @@
+.login-body {
+    position: relative;
+    background-color: #F0FBFF;
+    width: 100%;
+    height: 100vh;
+    padding: 50px 0;
+    min-height: 730px;
+    .left-logo {
+        position: absolute;
+        left: 30px;
+        top: 30px;
+        user-select: none;
+        img {
+            height: 40px;
+        }
+        #logo-icon {
+            height: 36px;
+        }
+        #logo-name {
+            margin-left: 6px;
+        }
+    }
+    .left-pic-container {
+        position: absolute;
+        width: 750px;
+        left: 10%;
+        top: 50%;
+        height: 630px;
+        margin-top: -315px;
+
+    }
+    .right-container {
+        right: 18.667%;
+        position: absolute;
+        background: #ffffff;
+        border-radius: 16px;
+        transform: translateY(-50%);
+        padding: 50px;
+        width: 92%;
+        top: 54%;
+        max-width: 470px;
+        margin: 0 auto;
+        box-shadow: 0 21.2px 31.8px 0 rgba(26,26,26,0.12);
+        .right-app-title {
+            position: absolute;
+            top: -80px;
+            left: 18px;
+            font-size: 43px;
+            font-weight: 400;
+            color: $green;
+        }
+        .sign-list {
+            position: relative;
+            h1 {
+                font-size: 40px;
+                line-height: 48px;
+                margin-bottom: 32px;
+            }
+            .title-tab {
+                overflow: hidden;
+                padding-bottom: 16px;
+                div {
+                    float: left;
+                    line-height: 32px;
+                    font-size: 20px;
+                    color: #8C8889;
+                    transition: 0.3s;
+                    position: relative;
+                    padding-top: 16px;
+                    margin-left: 32px;
+                    user-select: none;
+                    &::before {
+                        content: '';
+                        width: 0;
+                        height: 2px;
+                        position: absolute;
+                        left: 50%;
+                        transform: translateX(-50%);
+                        bottom: 0;
+                        background: #1ECC95;
+                        border-radius: 3px;
+                        transition: 0.3s;
+                    }
+                    &:first-child {
+                        margin-left: 0;
+                    }
+                    &:not(.active) {
+                        cursor: pointer;
+                    }
+                    &.active {
+                        color: #353030;
+                        font-weight: bold;
+                        &::before {
+                            width: 100%;
+                        }
+                    }
+                }
+            }
+            .form-box {
+                position: relative;
+                .el-input--large {
+                    --el-input-height: 48px;
+                    --el-input-border-radius: 8px;
+                    font-size: 16px;
+                    .el-input__wrapper {
+                        padding: 1px 16px;
+                    }
+                }
+                .clickable-text {
+                    color: #686565;
+                    cursor: pointer;
+                    transition: 0.2s;
+                    font-size: 14px;
+                    &:hover {
+                        color: #1ECC95
+                    }
+                }
+                .el-button--large {
+                    --el-button-size: 48px;
+                    height: 48px;
+                    padding: 12px 19px;
+                    font-size: 16px;
+                    border: 0;
+                    border-radius: 6px;
+                    background: linear-gradient(90deg,#1fd4af, #1ecc95 100%);
+                }
+            }
+        }
+    }
+}

src/views/data-fill/collapse-form/index.vue

@@ -9,16 +9,20 @@
                         <div class="text-lg truncate item-title"> {{ item.nodeName }}</div>
                         <div class="hc-extra-text-box">
                             <HcTooltip v-if="item['isCopeTab'] === 2 || item['isCopeTab'] === 3" keys="wbs_del_table">
-                                <el-button :disabled="item['isBussShow'] === 2" :loading="tableFormDelLoading" plain
-                                           type="danger"
-                                           @click.stop="delClick(item)">删除本表
-                                </el-button>
+                                <el-button
+                                    :disabled="item['isBussShow'] === 2"
+                                    :loading="tableFormDelLoading"
+                                    plain
+                                    type="danger"
+                                    @click.stop="delClick(item)"
+                                >删除本表</el-button>
                             </HcTooltip>
                             <HcTooltip keys="wbs_copy_table">
                                 <el-button
                                     v-if="item['isLinkTable'] === 1"
                                     disabled plain
-                                    type="info">
+                                    type="info"
+                                >
                                     复制本表
                                 </el-button>
                                 <el-button v-else :loading="copyClickLoading" plain type="primary"
@@ -45,8 +49,7 @@
                             </HcTooltip>
                             <HcTooltip keys="wbs_upload_table">
                                 <el-button :disabled="item['isBussShow'] === 2"
-                                           :type="item['tabFileType'] === 2?'success':'primary'"
-                                           plain
+                                           :type="item['tabFileType'] === 2?'success':'primary'" plain
                                            @click.stop="uploadClick(item,index)">
                                     <template v-if="item['tabFileType'] === 2">已上传</template>
                                     <template v-else>上传</template>
@@ -261,11 +264,10 @@
               widths="84%" @close="copyModalClose"
               @save="copySaveClick">
         <HcCopy v-if="showcopyModal" ref="copyRefs"  :contractId="contract_id" :projectId="projectId"  :classify="classifys"
-        :tree_AutoExpandKeys="tree_AutoExpandKeys"
-        :treenodeDataInfo="treenodeDataInfo"
-        :copyItems="copyItems"
-        :CopyModalType="CopyModalType"
-        />
+                :tree_AutoExpandKeys="tree_AutoExpandKeys"
+                :treenodeDataInfo="treenodeDataInfo"
+                :copyItems="copyItems"
+                :CopyModalType="CopyModalType"/>
         <template #footer>
                 <div class="lr-dialog-footer">
                     <div class="left flex items-center">
@@ -277,8 +279,7 @@
                     </div>
                     <div class="right">
                         <el-button size="large" @click="showcopyModal = false">取消</el-button>
-                        <el-button :loading="copyClickModalLoading" hc-btn type="primary" @click="copySaveClick">确认复制
-                        </el-button>
+                        <el-button :loading="copyClickModalLoading" hc-btn type="primary" @click="copySaveClick">确认复制</el-button>
                     </div>
                 </div>
         </template>
@@ -298,7 +299,6 @@ import HcTestData from "./test-data.vue"
 import HcTestFile from "./test-file.vue"
 import HcFormula from "./formula.vue"
 import HcCopy from './test-copy.vue'
-import HcDragNode from "~com/drag-node/index.vue"
 import NoDataSvg from '~src/assets/view/no-data.svg'
 import {
     getArrValue, getObjValue, getObjVal,

src/views/data-fill/collapse-form/table-form-item.vue

@@ -19,7 +19,6 @@
 import {ref, watch, onMounted} from "vue"
 import {useAppStore} from "~src/store";
 import wbsApi from "~api/data-fill/wbs";
-import HcTableForm from "~com/table-form/index.vue"
 import {deepClone, getArrValue, getObjVal, isString} from "js-fast-way"
 
 //初始

src/views/data-fill/collapse-form/test-copy.vue

@@ -5,7 +5,14 @@
     <div class="copy-node-many-box" v-if="CopyModalType==='1'">
         <div class="copy-node-many-tree">
             <el-scrollbar>
-                <WbsTree
+                <HcLazyTree
+                    ref="copywbstree" isType
+                    :autoExpandKeys="treeautokeys"
+                    @load="treeLoadNode"
+                    @nodeLoading="ElTreeNodeLoading"
+                    @nodeTap="wbsElTreeClick"
+                />
+                <!--WbsTree
                     :treeKey="wbstreeKey"
                     :classifyType="classify"
                     :contractId="contractId"
@@ -14,7 +21,7 @@
                     @nodeTap="wbsElTreeClick"
                     ref="copywbstree"
                     :autoExpandKeys="treeautokeys"
-                />
+                /-->
             </el-scrollbar>
         </div>
         <div class="copy-node-many-table">
@@ -36,8 +43,8 @@
 <script setup>
 import {ref, watch, onMounted, nextTick} from "vue";
 import {getArrValue, getObjValue, setPosInsert} from "js-fast-way"
+import queryApi from '~api/data-fill/query';
 import wbsApi from "~api/data-fill/wbs"
-import WbsTree from "../components/WbsTree.vue"
 
 const props = defineProps({
     projectId: [String, Number],
@@ -65,11 +72,11 @@ watch(() => [
     props.projectId,
     props.contractId,
     props.CopyModalType
-   
+
 ], ([pid, cid, CopyModaltype]) => {
     projectId.value = pid
     contractId.value = cid
-   
+
     CopyModalType.value = CopyModaltype
 })
 //树加载完成
@@ -80,6 +87,28 @@ const ElTreeNodeLoading = () => {
 const wbstreeKey = ref(Math.random())
 const nodeItemInfo=ref({})
 const nodeDataInfo=ref({})
+
+//懒加载的数据
+const treeLoadNode = async ({node, item, level},resolve) => {
+    let contractIdRelation = '', parentId = '', primaryKeyId = '';
+    if (level !== 0) {
+        const nodeData = getObjValue(item);
+        contractIdRelation = nodeData?.contractIdRelation || ''
+        parentId = contractIdRelation ? nodeData?.primaryKeyId : nodeData?.id
+        primaryKeyId = nodeData?.id || ''
+    }
+    //获取数据
+    const {data} = await queryApi.queryWbsTreeData({
+        contractId: contractId.value || '',
+        contractIdRelation,
+        primaryKeyId,
+        parentId,
+        classifyType: classify.value
+    })
+    resolve(getArrValue(data))
+}
+
+
 //树被点击
 const wbsElTreeClick = ({node, data, keys}) => {
     nodeItemInfo.value = node
@@ -111,7 +140,7 @@ const copyModalTableCheck = async (item) => {
 const treeautokeys=ref([])
 
 const changeCopyModalType=(val)=>{
-   
+
 }
 </script>
 
@@ -119,4 +148,4 @@ const changeCopyModalType=(val)=>{
 .mtop5{
     margin-top: 5px;
 }
-</style>
+</style>

src/views/data-fill/collapse-form/testTree.vue

@@ -1,25 +1,16 @@
 <template>
-    <ElTree key="primaryKeyId" ref="ElTreeRef" :autoExpandKeys="autoExpandKeys"
-            :default-expanded-keys="defaultExpandedCids"
-            :indent="0"
-            :load="ElTreeLoadNode" :props="ElTreeProps"
-            accordion class="hc-tree-node tree-line"
-            highlight-current lazy
-            node-key="primaryKeyId" @node-click="ElTreeClick">
-        <template #default="{ node, data }">
-            <div :id="`test-tree-${data['primaryKeyId']}`" class="data-custom-tree-node">
-                <!--树组件，节点名称-->
-                <div :class="node.level === 1?'level-name':''" class="label">
-                    <span>{{ node.label }}</span>
-                </div>
-            </div>
-        </template>
-    </ElTree>
+    <HcLazyTree ref="ElTreeRef"
+                :autoExpandKeys="autoExpandKeys"
+                :defaultCheckedKeys="defaultExpandedCids"
+                :hProps="ElTreeProps"
+                @load="ElTreeLoadNode"
+                @nodeTap="ElTreeClick"
+    />
 </template>
 
 <script setup>
-import {ref, nextTick, watch} from "vue";
-import {isArrItem, getArrValue} from "js-fast-way"
+import {ref, watch} from "vue";
+import {getArrValue} from "js-fast-way"
 import samplingApi from "~api/tentative/material/sampling";
 
 //参数
@@ -74,85 +65,25 @@ const emit = defineEmits(['nodeTap', 'nodeLoading'])
 
 //树形结构异步加载数据
 const defaultExpandedCids = ref([])
-const ElTreeLoadNode = async (node, resolve) => {
+const ElTreeLoadNode = async ({node, item, level}, resolve) => {
     let parentId = '0';
-    if (node.level !== 0) {
-        parentId = node?.data?.id
+    if (level !== 0) {
+        parentId = item?.id
     }
     //获取数据
-    const {error, code, data} = await samplingApi.queryLazyTree({
+    const {data} = await samplingApi.queryLazyTree({
         wbsId: wbsTempId.value,
         tenantId: tenant_id.value,
         projectId: projectId.value,
         parentId,
         wbsType: wbs_type.value
     })
-    //处理数据
-    if (!error && code === 200) {
-        let clickKey = '', defaultExpandedArr = [];
-        const keys = autoExpandKeys.value || []
-        const resData = getArrValue(data)
-        for (let i = 0; i < resData.length; i++) {
-            resData[i].hasChildren = !resData[i].hasChildren
-        }
-        if (keys.length > 0) {
-            let lastKey = keys[keys.length - 1];
-            for (const item of resData) {
-                //自动展开
-                if (isArrItem(keys, item?.primaryKeyId)) {
-                    defaultExpandedArr.push(item?.primaryKeyId)
-                }
-                //最后一个，选中点击
-                if (item?.primaryKeyId === lastKey) {
-                    clickKey = item?.primaryKeyId
-                }
-            }
-        } else if (node.level === 0) {
-            defaultExpandedArr.push(resData[0]?.primaryKeyId)
-        }
-        //自动展开
-        defaultExpandedCids.value = defaultExpandedArr
-        if (node.level === 0) {
-            emit('nodeLoading')
-            if (resData.length <= 0) {
-                window?.$message?.warning('该项目未使用试验系统，无法获取数据')
-            }
-        }
-        resolve(resData)
-        //最后一个，执行点击
-        if (clickKey) {
-            await nextTick(() => {
-                document.getElementById(`test-tree-${clickKey}`)?.click()
-            })
-        }
-    } else {
-        if (node.level === 0) {
-            emit('nodeLoading')
-        }
-        resolve([])
-    }
+    resolve(getArrValue(data))
+    emit('nodeLoading')
 }
 
 //节点被点击
-const ElTreeClick = async (data, node) => {
-    let autoKeysArr = []
-    await getNodeExpandKeys(node, autoKeysArr)
-    const autoKeys = autoKeysArr.reverse()
-    emit('nodeTap', {node, data, keys: autoKeys})
-}
-
-//处理自动展开的节点KEY
-const getNodeExpandKeys = async (node, newKeys) => {
-    const parent = node?.parent ?? []
-    const primaryKeyId = node?.data?.primaryKeyId ?? ''
-    if (primaryKeyId) {
-        newKeys.push(primaryKeyId)
-        await getNodeExpandKeys(parent, newKeys)
-    }
+const ElTreeClick = async ({node, data, keys}) => {
+    emit('nodeTap', {node, data, keys: keys})
 }
-
 </script>
-
-<style lang="scss" scoped>
-@import "~src/styles/app/tree.scss";
-</style>

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

@@ -1,23 +1,28 @@
 <template>
-    <ElTree ref="ElTreeRef" :check-strictly="isStrictly" :data="ElTreeData" :expand-on-click-node="false"
-            :indent="0" :node-key="nodeKey" :props="ElTreeProps" accordion
-            class="hc-tree-node-box hc-tree-node tree-line" highlight-current show-checkbox @check="ElTreeCheckChange"  v-loading="isElTreeLoadNode">
-        <template #default="{ node, data }">
-            <div class="custom-tree-node">
-                <div class="label" @dblclick="ElTreeDblClick(data)">
-                    <el-input v-if="data.isInputName" v-model="data.nodeName" size="small" @blur="ElTreeBtnClick(data)"
-                              @keyup="keyUpEvent($event,data)">
-                        <template #append>
-                            <el-button plain size="small" type="primary" @click="ElTreeBtnClick(data)">
-                                <HcIcon name="check"/>
-                            </el-button>
-                        </template>
-                    </el-input>
-                    <span v-else>{{ data.nodeName }}</span>
+    <div v-loading="isElTreeLoadNode">
+        <HcDataTree ref="ElTreeRef"
+                    :hProps="ElTreeProps"
+                    :datas="ElTreeData"
+                    :check-strictly="isStrictly"
+                    show-checkbox
+                    @check="ElTreeCheckChange"
+        >
+            <template #default="{node, data}">
+                <div class="custom-tree-node">
+                    <div class="label" @dblclick="ElTreeDblClick(data)">
+                        <el-input v-if="data.isInputName" v-model="data.nodeName" size="small" @blur="ElTreeBtnClick(data)" @keyup="keyUpEvent($event,data)">
+                            <template #append>
+                                <el-button plain size="small" type="primary" @click="ElTreeBtnClick(data)">
+                                    <HcIcon name="check"/>
+                                </el-button>
+                            </template>
+                        </el-input>
+                        <span v-else>{{ data.nodeName }}</span>
+                    </div>
                 </div>
-            </div>
-        </template>
-    </ElTree>
+            </template>
+        </HcDataTree>
+    </div>
 </template>
 
 <script setup>
@@ -63,8 +68,12 @@ const projectId = ref(props.projectId)
 const contractId = ref(props.contractId)
 const isStrictly = ref(props.strictly)
 const wbsId=ref(props.wbsId)
-const ElTreeProps = ref({label: 'nodeName', children: 'children', isLeaf: 'notExsitChild'})
-const  isElTreeLoadNode=ref(false)
+const ElTreeProps = ref({
+    label: 'nodeName',
+    children: 'children',
+    isLeaf: 'notExsitChild'
+})
+const  isElTreeLoadNode = ref(false)
 
 //监听
 watch(() => [
@@ -104,7 +113,6 @@ const ElTreeLoadNode = async () => {
         await nextTick(() => {
             ElTreeCheckedKeys()
         })
-       
     }
     isElTreeLoadNode.value=false
 }
@@ -116,8 +124,8 @@ const ElTreeCheckChange = (_, nodes) => {
 
 //处理节点
 const ElTreeCheckedKeys = () => {
-    const Nodes = ElTreeRef.value.getCheckedNodes() || []
-    const HalfNodes = ElTreeRef.value.getHalfCheckedNodes() || []
+    const Nodes = ElTreeRef.value?.treeRef?.getCheckedNodes() || []
+    const HalfNodes = ElTreeRef.value?.treeRef?.getHalfCheckedNodes() || []
     emit('check-change', {
         checkedNodes: Nodes,
         halfCheckedNodes: HalfNodes
@@ -144,17 +152,3 @@ const ElTreeBtnClick = (item) => {
     }
 }
 </script>
-
-<style lang="scss" scoped>
-@import "../../../styles/app/tree.scss";
-.custom-tree-node {
-    position: relative;
-    width: 100%;
-}
-</style>
-
-<style lang="scss">
-.hc-tree-node-box .el-tree-node__content {
-    height: 32px !important;
-}
-</style>

src/views/data-fill/components/division/HcTreeData.vue

@@ -39,5 +39,5 @@ const ElTreeClick = async (data,node) => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../../../styles/app/tree.scss";
+//@import "../../../../styles/app/tree.scss";
 </style>

src/views/data-fill/components/HcTreeData.vue → src/views/data-fill/del_bak/HcTreeData.vue

@@ -284,7 +284,7 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-@import "../../../styles/app/tree.scss";
+//@import "../../../styles/app/tree.scss";
 .el-radio-group {
     width: 100% !important;
     display: inline-grid;

src/views/data-fill/components/HcTreeDataV2.vue → src/views/data-fill/del_bak/HcTreeDataV2.vue

@@ -316,7 +316,7 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-@import "../../../styles/app/tree.scss";
+//@import "../../../styles/app/tree.scss";
 .el-radio-group {
     width: 100% !important;
     display: inline-grid;

src/views/data-fill/del_bak/HcTreeNode.vue

@@ -0,0 +1,154 @@
+<template>
+    <div v-loading="isElTreeLoadNode">
+        <HcDataTree ref="ElTreeRef"
+                    :hProps="ElTreeProps"
+                    :datas="ElTreeData"
+                    :check-strictly="isStrictly"
+                    show-checkbox
+                    @check="ElTreeCheckChange"
+        >
+            <template #default="{node, data}">
+                <div class="custom-tree-node">
+                    <div class="label" @dblclick="ElTreeDblClick(data)">
+                        <el-input v-if="data.isInputName" v-model="data.nodeName" size="small" @blur="ElTreeBtnClick(data)" @keyup="keyUpEvent($event,data)">
+                            <template #append>
+                                <el-button plain size="small" type="primary" @click="ElTreeBtnClick(data)">
+                                    <HcIcon name="check"/>
+                                </el-button>
+                            </template>
+                        </el-input>
+                        <span v-else>{{ data.nodeName }}</span>
+                    </div>
+                </div>
+            </template>
+        </HcDataTree>
+    </div>
+</template>
+
+<script setup>
+import {nextTick, onMounted, ref, watch} from "vue";
+import {getArrValue} from "js-fast-way"
+import wbsApi from '~api/data-fill/wbs';
+
+//参数
+const props = defineProps({
+    projectId: {
+        type: [String, Number],
+        default: ''
+    },
+    contractId:{
+        type: [String, Number],
+        default: ''
+    },
+    nodeKey: {
+        type: String,
+        default: 'primaryKeyId'
+    },
+    nodeId: {
+        type: [String, Number],
+        default: ''
+    },
+    oldId: {
+        type: [String, Number],
+        default: ''
+    },
+    strictly: {
+        type: Boolean,
+        default: false
+    },
+    wbsId:{
+        type: [String, Number],
+        default: ''
+    }
+})
+
+//变量
+const ElTreeRef = ref(null)
+const projectId = ref(props.projectId)
+const contractId = ref(props.contractId)
+const isStrictly = ref(props.strictly)
+const wbsId=ref(props.wbsId)
+const ElTreeProps = ref({
+    label: 'nodeName',
+    children: 'children',
+    isLeaf: 'notExsitChild'
+})
+const  isElTreeLoadNode = ref(false)
+
+//监听
+watch(() => [
+    props.projectId,
+    props.strictly,
+    props.contractId,
+    props.wbsId
+], ([pid, strictly,cid,wid]) => {
+    projectId.value = pid
+    contractId.value = cid
+    isStrictly.value = strictly
+    wbsId.value=wid
+
+})
+
+//渲染完成
+onMounted(() => {
+    ElTreeLoadNode()
+})
+
+//事件
+const emit = defineEmits(['check-change'])
+
+//树形结构异步加载数据
+const ElTreeData = ref([])
+const ElTreeLoadNode = async () => {
+    isElTreeLoadNode.value=true
+    let nodeId = props.nodeId || ''
+    const {error, code, data} = await wbsApi.queryWbsTreeContractByContractIdAndId({
+        pKeyId: nodeId,
+        contractId: contractId.value,
+        projectId: projectId.value,
+    })
+    if (!error && code === 200) {
+        isElTreeLoadNode.value=false
+        ElTreeData.value = getArrValue(data)
+        await nextTick(() => {
+            ElTreeCheckedKeys()
+        })
+    }
+    isElTreeLoadNode.value=false
+}
+
+//被选择的
+const ElTreeCheckChange = (_, nodes) => {
+    emit('check-change', nodes)
+}
+
+//处理节点
+const ElTreeCheckedKeys = () => {
+    const Nodes = ElTreeRef.value?.treeRef?.getCheckedNodes() || []
+    const HalfNodes = ElTreeRef.value?.treeRef?.getHalfCheckedNodes() || []
+    emit('check-change', {
+        checkedNodes: Nodes,
+        halfCheckedNodes: HalfNodes
+    })
+}
+
+//更改节点名称
+const ElTreeDblClick = (item) => {
+    item.isInputName = true;
+}
+//回车
+const keyUpEvent = (e, item) => {
+    if (e.key === "Enter") {
+        ElTreeBtnClick(item)
+    }
+}
+//更改节点名称完成
+const ElTreeBtnClick = (item) => {
+    if (!item?.nodeName) {
+        window?.$message?.warning('节点名称不能为空')
+    } else {
+        item.isInputName = false;
+        ElTreeCheckedKeys()
+    }
+}
+</script>

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

@@ -1,4 +1,5 @@
 <template>
+
     <ElTree :key="treeKey" ref="ElTreeRef"
             :class="[ui,submitCounts?'tree-line1':'']" :default-expanded-keys="defaultExpandedCids" :indent="0"
             :load="ElTreeLoadNode"
@@ -325,7 +326,7 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-@import "../../../styles/app/tree.scss";
+//@import "../../../styles/app/tree.scss";
 .el-radio-group {
     width: 100% !important;
     display: inline-grid;

src/views/data-fill/division.vue

@@ -12,11 +12,10 @@
             </div>
             <div v-loading="treeLoading" class="hc-tree-box" element-loading-text="加载中...">
                 <el-scrollbar>
-                    <WbsTree :autoExpandKeys="treeAutoExpandKeys" :classifyType="classifyType" :contractId="contractId"
-                             :menus="ElTreeMenu"
-                             :projectId="projectId"
-                             :submitCounts="true" isColor ui="page-division-tree" @menuTap="ElTreeMenuClick"
-                             @nodeLoading="treeNodeLoading" @nodeTap="wbsElTreeClick"/>
+                    <HcLazyTree :autoExpandKeys="treeAutoExpandKeys" isCounts isType
+                                :menus="ElTreeMenu" ui="page-division-tree" @load="treeLoadNode"
+                                @menuTap="ElTreeMenuClick" @nodeLoading="treeNodeLoading" @nodeTap="wbsElTreeClick"
+                    />
                 </el-scrollbar>
             </div>
             <!--左右拖动-->
@@ -150,9 +149,9 @@
 
                 <div class="copy-node-many-tree">
                     <el-scrollbar>
-                        <WbsTree :autoExpandKeys="TreeAutoExpandKeys" :contractId="contractId" :isAutoClick="false"
-                                 :isAutoKeys="false" :projectId="projectId" :classifyType="classifyType" 
-                                 idPrefix="tree-node-copy-" @nodeTap="copyNodeElTreeClick"/>
+                        <HcLazyTree :autoExpandKeys="TreeAutoExpandKeys" isType
+                                   @load="treeLoadNode" @nodeTap="copyNodeElTreeClick"
+                        />
                     </el-scrollbar>
                 </div>
                 <div class="copy-node-many-table">
@@ -382,16 +381,16 @@
 import {ref, watch, onMounted, nextTick} from "vue";
 import {useAppStore} from "~src/store";
 import {useRouter, useRoute} from 'vue-router'
-import WbsTree from "./components/WbsTree.vue"
 import HcUpload from "./components/division/HcUpload.vue"
 import HcTreeData from "./components/division/HcTreeData.vue"
 import HcTreeData1 from "./components/division/HcTreeData1.vue"
 import DivisionTree from "./components/division/DivisionTree.vue"
 import HcTreeNode from "./components/HcTreeNode.vue"
-import {getArrValue, deepClone, formValidate, arrIndex, arrToId} from "js-fast-way"
+import {getArrValue, deepClone, formValidate, arrIndex, arrToId, getObjValue} from "js-fast-way"
 import {getStoreValue, setStoreValue} from '~src/utils/storage'
 import {getDictionary} from "~api/other"
 import wbsApi from "~api/data-fill/wbs";
+import queryApi from '~api/data-fill/query';
 import divisionApi from "~api/data-fill/division";
 import Draggable from "vuedraggable";
 
@@ -518,6 +517,26 @@ const getRowTableOwnerType = (type) => {
     }
 }
 
+//懒加载的数据
+const treeLoadNode = async ({node, item, level},resolve) => {
+    let contractIdRelation = '', parentId = '', primaryKeyId = '';
+    if (level !== 0) {
+        const nodeData = getObjValue(item);
+        contractIdRelation = nodeData?.contractIdRelation || ''
+        parentId = contractIdRelation ? nodeData?.primaryKeyId : nodeData?.id
+        primaryKeyId = nodeData?.id || ''
+    }
+    //获取数据
+    const {data} = await queryApi.queryWbsTreeData({
+        contractId: contractId.value || '',
+        contractIdRelation,
+        primaryKeyId,
+        parentId,
+        classifyType: classifyType.value
+    })
+    resolve(getArrValue(data))
+}
+
 //树被点击
 const treeNodeInfo = ref({})
 const treeItemInfo = ref({})
@@ -719,7 +738,7 @@ const copyNodeElTreeClick = ({data,node}) => {
     if(data['colorStatus']===2||data['colorStatus']==1){//已上报的工序不能点击
         if (data['id'] !== formCopyNodeModel.value.id) {//不能复制到本身节点下
             //只能往上一级点击，不能跨层级点击
-            
+
                 //如果选择的是父级节点，那不能复制到子级节点
                 if (type === 6 && (data['type'] === 4 || data['type'] === 5 || data['type'] == 6)) {
                     setCopyNodeTable(data, title)
@@ -739,14 +758,14 @@ const copyNodeElTreeClick = ({data,node}) => {
                 if (type === 1 && data['type'] === 1) {
                     setCopyNodeTable(data, title, partitionCode)
                 }
-           
-             
+
+
         }
     }else{
         window?.$message?.warning('该节点已存在上报数据，不允许复制')
     }
-   
-      
+
+
     } else if (TabKey === '3') {
         console.log(1111111);
         setCopyNodeTable(data, data?.title)

src/views/data-fill/query.vue

@@ -20,30 +20,35 @@
                     </el-input>
                 </div>
                 <div v-loading="treeLoading" id="hc-tree-scrollbar" class="hc-tree-scrollbar" element-loading-text="获取数据中...">
-                        <HcTreeDataV2
+                    <HcTreeV2
+                        :isShow="isSearchTree"
+                        :datas="searchTreeData"
+                        :height="searchTreeHeight"
+                        :searchVal="searchTreeVal"
+                        isCounts
+                        isType
+                        @nodeTap="wbsElTreeClick"
+                    />
+                        <!--HcTreeDataV2
                             :isShow="isSearchTree"
                             :datas="searchTreeData"
                             :height="searchTreeHeight"
-                           
                             :searchTreeVal="searchTreeVal"
                             :submitCounts="true"
                             :ElTreeLoadNode="searchElTreeLoadNode"
                             isColor
                             @changeSearch="changeisSearch"
                             @changetreelaod="changetreelaod"
-                          
-                            @nodeTap="wbsElTreeClick"/>
+                            @nodeTap="wbsElTreeClick"/-->
                         <el-scrollbar class="scroll-bar-right-16" v-show="!isSearchTree">
-                            <WbsTree
-                            ref="wbstree"
-                                    :autoExpandKeys="treeAutoExpandKeys"
-                                    :classifyType="contractTypeTabKey"
-                                    :contractId="contractId"
-                                    :projectId="projectId"
-                                    :submitCounts="true"
-                                    :treeKey="wbstreeKey"
-                                    isColor
-                                    @nodeTap="wbsElTreeClick"/>
+                            <HcLazyTree
+                                ref="wbstree"
+                                :autoExpandKeys="treeAutoExpandKeys"
+                                isCounts
+                                isType
+                                @load="treeLoadNode"
+                                @nodeTap="wbsElTreeClick"
+                            />
                         </el-scrollbar>
                 </div>
             </div>
@@ -201,13 +206,10 @@
 <script setup>
 import {ref, watch, onMounted} from "vue";
 import {useAppStore} from "~src/store";
-import WbsTree from "./components/WbsTree.vue"
-import HcTreeData from "./components/HcTreeData.vue"
 import {getStoreValue, setStoreValue} from '~src/utils/storage'
 import {downloadBlob, isString, getObjValue, getArrValue, arrToId} from "js-fast-way"
 import queryApi from '~api/data-fill/query';
 import {eVisaTaskCheckApi} from "~api/other"
-import HcTreeDataV2 from "./components/HcTreeDataV2.vue"
 
 //变量
 const useAppState = useAppStore()
@@ -307,15 +309,19 @@ const searchTreeKeyUp = (e) => {
 }
 
 const searchTreeClick = async () => {
-    searchTreeHeight.value = document.getElementById('hc-tree-scrollbar').offsetHeight;
-    isSearchTree.value = true
-    //treeLoading.value = true
-    if (searchElTreeLoadNode.value === true) {
-        treeLoading.value = true
-        window?.$message?.warning('请加载完数据再次进行搜索')
-        searchTreeVal.value=''
-    } else {
+    if (searchTreeVal.value) {
+        searchTreeHeight.value = document.getElementById('hc-tree-scrollbar').offsetHeight;
         isSearchTree.value = true
+        //treeLoading.value = true
+        if (searchElTreeLoadNode.value === true) {
+            treeLoading.value = true
+            window?.$message?.warning('请加载完数据再次进行搜索')
+            searchTreeVal.value=''
+        } else {
+            isSearchTree.value = true
+        }
+    } else {
+        isSearchTree.value = false
     }
 }
 
@@ -330,6 +336,26 @@ const changetreelaod = (val) => {
     treeLoading.value = val
 }
 
+//懒加载的数据
+const treeLoadNode = async ({node, item, level},resolve) => {
+    let contractIdRelation = '', parentId = '', primaryKeyId = '';
+    if (level !== 0) {
+        const nodeData = getObjValue(item);
+        contractIdRelation = nodeData?.contractIdRelation || ''
+        parentId = contractIdRelation ? nodeData?.primaryKeyId : nodeData?.id
+        primaryKeyId = nodeData?.id || ''
+    }
+    //获取数据
+    const {data} = await queryApi.queryWbsTreeData({
+        contractId: contractId.value || '',
+        contractIdRelation,
+        primaryKeyId,
+        parentId,
+        classifyType: contractTypeTabKey.value
+    })
+    resolve(getArrValue(data))
+}
+
 //树被点击
 const wbsElTreeClick = ({node, data, keys}) => {
     nodeItemInfo.value = node

src/views/data-fill/wbs.vue

@@ -1,108 +1,5 @@
 <template>
     <div class="h-full">
-        <HcCard v-if="wbsTypeTabKey === 'map'" id-ref="wbs-node-tree-card-target">
-            <template #header>
-                <HcTooltip keys="wbs_views_division_btn">
-                    <el-button class="mr-10" hc-btn type="primary" @click="divisionClick">
-                        <HcIcon :line="false" name="node-tree"/>
-                        <span>划分变更</span>
-                    </el-button>
-                </HcTooltip>
-                <HcNewSwitch v-if="isDrawer" :datas="authBtnTabdata" :keys="authBtnTabKey" :round="false"
-                             size="default" @change="authBtnTabClick"/>
-            </template>
-            <template #extra>
-                <HcNewSwitch :datas="wbsTypeTab" :keys="wbsTypeTabKey" @change="wbsTypeTabChange"/>
-            </template>
-            <NodeTree
-                ref="NodeTreeRef"
-                :accordion='NodeTreeAccordion'
-                :autoExpandKeys="TreeAutoExpandKeys"
-                :contractId="contractId"
-                :isMark="TreeMark"
-                :menus="ElTreeMenu"
-                :projectId="projectId"
-                @menuClick="NodeTreeMenuClick"
-                @nodeClick="NodeTreeClick"
-                @nodeDblClick="NodeTreeDblClick"/>
-            <template #action>
-                <div class="hc-tree-mp-tip-box">
-                    <div class="dot-view green">已审批</div>
-                    <div class="dot-view black">未填报</div>
-                    <div class="dot-view orange">已填报-待审批</div>
-                    <div class="dot-view blue">已填报-未上报</div>
-                </div>
-            </template>
-            <HcDrawer :show="isDrawer" actionUi="text-center" to-id="wbs-node-tree-card-target" @close="drawerClose">
-                <!--清表列表-->
-                <el-scrollbar v-if="ListItemDatas.length > 0" ref="ListItemScrollRef">
-                    <CollapseForm ref="ListItemsRef"
-                                  :classify="authBtnTabKey"
-                                  :contractId="contractId"
-                                  :datas="ListItemDatas"
-                                  :drawType="isDrawType"
-                                  :primaryKeyId="primaryKeyId"
-                                  :status="NodeStatus"
-                                  :tenantId="userInfo?.tenant_id"
-                                  :wbsTempId="projectInfo?.referenceWbsTemplateIdTrial"
-                                  :wbsType="2"
-                                  @offsetTop="ListItemOffsetTop"
-                                  @renew="getTableDataAll"/>
-                </el-scrollbar>
-                <HcStatus v-else text="暂无表单"/>
-                <!--底部按钮区域-->
-                <template #action>
-                    <HcTooltip v-if="NodeStatus !== '3'" keys="wbs_save">
-                        <el-button :disabled="NodeStatus === '3' || ListItemDatas.length <= 0"
-                                   :loading="tableFormSaveLoading"
-                                   hc-btn
-                                   type="primary"
-                                   @click="tableFormSaveClick">
-                            <HcIcon name="save"/>
-                            <span>保存</span>
-                        </el-button>
-                    </HcTooltip>
-                    <HcTooltip v-if="NodeStatus !== '3'" keys="wbs_report">
-                        <el-button :disabled="NodeStatus === '3' || NodeStatus === '1'"
-                                   :loading="reportLoading"
-                                   hc-btn
-                                   @click="reportModalClick">
-                            <HcIcon name="send-plane-2"/>
-                            <span>上报</span>
-                        </el-button>
-                    </HcTooltip>
-                    <HcTooltip keys="wbs_preview">
-                        <el-button :disabled="NodeStatus === '1'"
-                                   :loading="bussPdfsLoading"
-                                   hc-btn
-                                   @click="bussPdfsClick">
-                            <HcIcon name="eye"/>
-                            <span>预览</span>
-                        </el-button>
-                    </HcTooltip>
-                    <HcTooltip v-if="NodeStatus === '3'" keys="wbs_abolish">
-                        <el-button hc-btn>
-                            <HcIcon name="arrow-go-back"/>
-                            <span>撤回上报流程</span>
-                        </el-button>
-                    </HcTooltip>
-                    <HcTooltip keys="wbs_views_drawings">
-                        <el-button :disabled="!nodeDataInfo?.fileUrl" hc-btn @click="viewsDrawings">
-                            <HcIcon name="image"/>
-                            <span>图纸</span>
-                        </el-button>
-                    </HcTooltip>
-                    <el-button hc-btn>
-                        <HcIcon name="file"/>
-                        <span>附件</span>
-                    </el-button>
-                    <el-button hc-btn @click="drawerClose">
-                        <HcIcon name="close"/>
-                        <span>关闭填报页面</span>
-                    </el-button>
-                </template>
-            </HcDrawer>
-        </HcCard>
         <div v-if="wbsTypeTabKey === 'tree'" class="hc-layout-box">
             <div id="wbs-left-tree" :class="[isWbsTreeShow?'show':'', isMouseTree ? 'on-transition':'']"
                  :style="'width:' + (isWbsTreeShow ? leftWidth : 0) + 'px;'"
@@ -126,35 +23,31 @@
                         </el-input>
                     </div>
                     <div v-loading="treeLoading" id="hc-tree-scrollbar" class="hc-tree-scrollbar" element-loading-text="获取数据中...">
-                        <HcTreeDataV2
+                        <HcTreeV2
                             :isShow="isSearchTree"
                             :datas="searchTreeData"
                             :height="searchTreeHeight"
                             :isMark="TreeMark"
                             :menus="ElTreeMenu"
-                            :searchTreeVal="searchTreeVal"
-                            :submitCounts="true"
-                            :ElTreeLoadNode="searchElTreeLoadNode"
-                            isColor
-                            @changeSearch="changeisSearch"
-                            @changetreelaod="changetreelaod"
+                            :searchVal="searchTreeVal"
+                            isCounts
+                            isType
                             @menuTap="ElTreeMenuClick"
-                            @nodeTap="wbsElTreeClick"/>
+                            @nodeTap="wbsElTreeClick"
+                        />
                         <el-scrollbar class="scroll-bar-right-16" v-show="!isSearchTree">
-                            <WbsTree
+                            <HcLazyTree
                                 ref="wbstree"
                                 :autoExpandKeys="TreeAutoExpandKeys"
-                                :classifyType="authBtnTabKey"
-                                :contractId="contractId"
                                 :isMark="TreeMark"
                                 :menus="ElTreeMenu"
-                                :projectId="projectId"
-                                :submitCounts="true"
-                                :treeKey="wbstreeKey"
-                                isColor
+                                isCounts
+                                isType
+                                @load="treeLoadNode"
                                 @menuTap="ElTreeMenuClick"
                                 @nodeLoading="ElTreeNodeLoading"
-                                @nodeTap="wbsElTreeClick"/>
+                                @nodeTap="wbsElTreeClick"
+                            />
                         </el-scrollbar>
                     </div>
                 </div>
@@ -259,14 +152,118 @@
                 </HcCard>
             </div>
         </div>
+        <HcCard v-if="wbsTypeTabKey === 'map'" id-ref="wbs-node-tree-card-target">
+            <template #header>
+                <HcTooltip keys="wbs_views_division_btn">
+                    <el-button class="mr-10" hc-btn type="primary" @click="divisionClick">
+                        <HcIcon :line="false" name="node-tree"/>
+                        <span>划分变更</span>
+                    </el-button>
+                </HcTooltip>
+                <HcNewSwitch v-if="isDrawer" :datas="authBtnTabdata" :keys="authBtnTabKey" :round="false"
+                             size="default" @change="authBtnTabClick"/>
+            </template>
+            <template #extra>
+                <HcNewSwitch :datas="wbsTypeTab" :keys="wbsTypeTabKey" @change="wbsTypeTabChange"/>
+            </template>
+            <NodeTree
+                ref="NodeTreeRef"
+                :accordion='NodeTreeAccordion'
+                :autoExpandKeys="TreeAutoExpandKeys"
+                :contractId="contractId"
+                :isMark="TreeMark"
+                :menus="ElTreeMenu"
+                :projectId="projectId"
+                @menuClick="NodeTreeMenuClick"
+                @nodeClick="NodeTreeClick"
+                @nodeDblClick="NodeTreeDblClick"/>
+            <template #action>
+                <div class="hc-tree-mp-tip-box">
+                    <div class="dot-view green">已审批</div>
+                    <div class="dot-view black">未填报</div>
+                    <div class="dot-view orange">已填报-待审批</div>
+                    <div class="dot-view blue">已填报-未上报</div>
+                </div>
+            </template>
+            <HcDrawer :show="isDrawer" actionUi="text-center" to-id="wbs-node-tree-card-target" @close="drawerClose">
+                <!--清表列表-->
+                <el-scrollbar v-if="ListItemDatas.length > 0" ref="ListItemScrollRef">
+                    <CollapseForm ref="ListItemsRef"
+                                  :classify="authBtnTabKey"
+                                  :contractId="contractId"
+                                  :datas="ListItemDatas"
+                                  :drawType="isDrawType"
+                                  :primaryKeyId="primaryKeyId"
+                                  :status="NodeStatus"
+                                  :tenantId="userInfo?.tenant_id"
+                                  :wbsTempId="projectInfo?.referenceWbsTemplateIdTrial"
+                                  :wbsType="2"
+                                  @offsetTop="ListItemOffsetTop"
+                                  @renew="getTableDataAll"/>
+                </el-scrollbar>
+                <HcStatus v-else text="暂无表单"/>
+                <!--底部按钮区域-->
+                <template #action>
+                    <HcTooltip v-if="NodeStatus !== '3'" keys="wbs_save">
+                        <el-button :disabled="NodeStatus === '3' || ListItemDatas.length <= 0"
+                                   :loading="tableFormSaveLoading"
+                                   hc-btn
+                                   type="primary"
+                                   @click="tableFormSaveClick">
+                            <HcIcon name="save"/>
+                            <span>保存</span>
+                        </el-button>
+                    </HcTooltip>
+                    <HcTooltip v-if="NodeStatus !== '3'" keys="wbs_report">
+                        <el-button :disabled="NodeStatus === '3' || NodeStatus === '1'"
+                                   :loading="reportLoading"
+                                   hc-btn
+                                   @click="reportModalClick">
+                            <HcIcon name="send-plane-2"/>
+                            <span>上报</span>
+                        </el-button>
+                    </HcTooltip>
+                    <HcTooltip keys="wbs_preview">
+                        <el-button :disabled="NodeStatus === '1'"
+                                   :loading="bussPdfsLoading"
+                                   hc-btn
+                                   @click="bussPdfsClick">
+                            <HcIcon name="eye"/>
+                            <span>预览</span>
+                        </el-button>
+                    </HcTooltip>
+                    <HcTooltip v-if="NodeStatus === '3'" keys="wbs_abolish">
+                        <el-button hc-btn>
+                            <HcIcon name="arrow-go-back"/>
+                            <span>撤回上报流程</span>
+                        </el-button>
+                    </HcTooltip>
+                    <HcTooltip keys="wbs_views_drawings">
+                        <el-button :disabled="!nodeDataInfo?.fileUrl" hc-btn @click="viewsDrawings">
+                            <HcIcon name="image"/>
+                            <span>图纸</span>
+                        </el-button>
+                    </HcTooltip>
+                    <el-button hc-btn>
+                        <HcIcon name="file"/>
+                        <span>附件</span>
+                    </el-button>
+                    <el-button hc-btn @click="drawerClose">
+                        <HcIcon name="close"/>
+                        <span>关闭填报页面</span>
+                    </el-button>
+                </template>
+            </HcDrawer>
+        </HcCard>
 
-        <!--上传图纸-->
-        <div class="upload-drawing">
-            <el-upload :accept="accept" :action="action" :before-upload="beforeUpload" :headers="getTokenHeader()"
-                       :on-error="uploadError" :on-success="uploadFinish">
-                <div id="upload-drawing">上传图纸</div>
-            </el-upload>
-        </div>
+        <!--上传文件-->
+        <HcUploadFile ref="HcUploadFileRef"
+                      :options="uploadFileOptions"
+                      :params="uploadFileParams"
+                      :echoParams="uploadFileEchoParams"
+                      @success="uploadFileSuccess"
+                      @item="uploadFileItem"
+        />
 
         <!--查看图纸-->
         <HcDragModal :isShow="drawingsShow" closeIcon lefts="145" title="查看图纸" tops="100" ui="hc-image-preview-box"
@@ -356,12 +353,9 @@
                 </el-form>
             </div>
             <div v-if="copyNodeTabKey !== '1'" class="copy-node-many-box">
-
                 <div class="copy-node-many-tree">
                     <el-scrollbar>
-                        <WbsTree :autoExpandKeys="TreeAutoExpandKeys" :contractId="contractId" :isAutoClick="false"
-                                 :isAutoKeys="false" :projectId="projectId"  :classifyType="authBtnTabKey"
-                                 idPrefix="tree-node-copy-" @nodeTap="copyNodeElTreeClick"/>
+                        <HcLazyTree :autoExpandKeys="TreeAutoExpandKeys" isType @load="treeLoadNode" @nodeTap="copyNodeElTreeClick"/>
                     </el-scrollbar>
                 </div>
                 <div class="copy-node-many-table">
@@ -425,11 +419,22 @@
                   widths="720px" @close="addNodeModal = false">
             <el-alert :closable="false" title="双击节点，可编辑节点名称，编辑完成后，请按回车或输入框消失后，再点提交"
                       type="warning"/>
-            <HcTreeNode v-if="addTreeNodeType === '1'" :nodeId="addTreeNodeId" :oldId="addTreeNodeOldId"   :contractId="contractId" :wbsId="projectInfo.referenceWbsTemplateId"
-                        :projectId="projectId" @check-change="addTreeNodeCheckChange"/>
-            <HcTreeNode v-if="addTreeNodeType === '2'" :nodeId="addTreeNodeId" :oldId="addTreeNodeOldId"    :contractId="contractId" :wbsId="projectInfo.referenceWbsTemplateId"
+            <HcTreeNode v-if="addTreeNodeType === '1'"
+                        :nodeId="addTreeNodeId"
+                        :oldId="addTreeNodeOldId"
+                        :contractId="contractId"
+                        :wbsId="projectInfo.referenceWbsTemplateId"
                         :projectId="projectId"
-                        strictly @check-change="addTreeNodeCheckChange"/>
+                        @check-change="addTreeNodeCheckChange"
+            />
+            <HcTreeNode v-if="addTreeNodeType === '2'"
+                        :nodeId="addTreeNodeId"
+                        :oldId="addTreeNodeOldId"
+                        :contractId="contractId"
+                        :wbsId="projectInfo.referenceWbsTemplateId"
+                        :projectId="projectId"
+                        strictly @check-change="addTreeNodeCheckChange"
+            />
             <template #footer>
                 <div class="lr-dialog-footer">
                     <div class="left flex items-center">
@@ -667,9 +672,6 @@ import {HcIsButton} from "~src/plugins/IsButtons";
 import CollapseForm from "./collapse-form/index.vue"
 import NodeTree from "./components/nodeTree/index.vue"
 import HcTreeNode from "./components/HcTreeNode.vue"
-import HcTreeData from "./components/HcTreeData.vue"
-import HcTreeDataV2 from "./components/HcTreeDataV2.vue"
-import WbsTree from "./components/WbsTree.vue"
 import {getTokenHeader} from '~src/api/request/header';
 import {getStoreValue, setStoreValue} from '~src/utils/storage'
 import {deepClone, formValidate, setCopyText, getObjValue, getArrValue, getObjVal, isString} from "js-fast-way"
@@ -707,7 +709,8 @@ const searchTreeHeight = ref()
 
 const getSearchTreeData = async () => {
     searchElTreeLoadNode.value = true
-    if (contractInfo.value?.contractType == 2 || contractInfo.value?.contractType == 3) {
+    const contractType = Number(contractInfo.value?.contractType)
+    if (contractType === 2 || contractType === 3) {
         const {error, code, data} = await queryApi.getTreeallJl({
             contractId: contractId.value,
         })
@@ -733,7 +736,7 @@ const getSearchTreeData = async () => {
         const {error, code, data} = await queryApi.getTreeall({
             contractId: contractId.value,
             projectId: projectId.value,
-            wbsId: projectInfo?.value.referenceWbsTemplateId
+            wbsId: projectInfo.value?.referenceWbsTemplateId
         })
         //判断状态
         if (!error && code === 200) {
@@ -835,8 +838,50 @@ const wbsTypeTabChange = (item) => {
 }
 
 //上传文件的
-const action = ref("/api/blade-resource/oss/endpoint/put-file")
-const accept = ref("image/png,image/jpg,image/jpeg")
+const HcUploadFileRef = ref(null)
+const uploadFileOptions = ref({})
+const uploadFileParams = ref({})
+const uploadFileEchoParams = ref({})
+//上传成功
+const uploadFileSuccess = ({echoParams, resData}) => {
+    if (echoParams['type'] === 'upload-drawing' && resData?.link) {
+        setUploadDrawingsData(echoParams, resData?.link)
+    } else {
+        window?.$message?.error('文件上传失败')
+    }
+}
+
+//点击使用文件
+const uploadFileItem = ({item}) => {
+    const {echoParams, resData} = item
+    if (echoParams['type'] === 'upload-drawing' && resData?.link) {
+        setUploadDrawingsData(echoParams, resData?.link)
+    } else {
+        window?.$message?.error('文件上传失败')
+    }
+}
+
+//设置图纸数据
+const setUploadDrawingsData = async (echoParams, link) => {
+    const info = nodeDataInfo.value;
+    const {error, code, data} = await wbsApi.saveContractTreeDrawings({
+        fileUrl: link,
+        id: echoParams['drawingsId'],
+        primaryKeyId: echoParams['primaryKeyId']
+    }, false)
+    //处理数据
+    if (!error && code === 200) {
+        if (info['primaryKeyId'] === echoParams['primaryKeyId']) {
+            nodeDataInfo.value['drawingsId'] = data
+            nodeDataInfo.value['fileUrl'] = link
+            window?.$message?.success('图纸上传成功')
+        } else {
+            window?.$message?.success('图纸上传成功，由于您切换了其他节点，需要手动刷新才能查看到图纸')
+        }
+    } else {
+        window?.$message?.error('图纸保存失败')
+    }
+}
 
 const NodeTreeAccordion = ref(true)
 
@@ -897,24 +942,25 @@ const searchTreeKeyUp = (e) => {
         searchTreeClick()
     }
 }
-const changeisSearch = () => {
-    isSearchTree.value = false
-}
+
 const changetreelaod = (val) => {
     treeLoading.value = val
-
 }
 const treeLoading = ref(false)
 const searchTreeClick = async () => {
-    searchTreeHeight.value = document.getElementById('hc-tree-scrollbar').offsetHeight;
-    isSearchTree.value = true
-    //treeLoading.value = true
-    if (searchElTreeLoadNode.value === true) {
-        treeLoading.value = true
-        window?.$message?.warning('请加载完数据再次进行搜索')
-        searchTreeVal.value=''
-    } else {
+    if (searchTreeVal.value) {
+        searchTreeHeight.value = document.getElementById('hc-tree-scrollbar').offsetHeight;
         isSearchTree.value = true
+        //treeLoading.value = true
+        if (searchElTreeLoadNode.value === true) {
+            treeLoading.value = true
+            window?.$message?.warning('请加载完数据再次进行搜索')
+            searchTreeVal.value=''
+        } else {
+            isSearchTree.value = true
+        }
+    } else {
+        isSearchTree.value = false
     }
 }
 
@@ -938,6 +984,25 @@ const searchTreeClick = async () => {
 //     isSearchTree.value = false
 // }
 
+//懒加载的数据
+const treeLoadNode = async ({node, item, level},resolve) => {
+    let contractIdRelation = '', parentId = '', primaryKeyId = '';
+    if (level !== 0) {
+        const nodeData = getObjValue(item);
+        contractIdRelation = nodeData?.contractIdRelation || ''
+        parentId = contractIdRelation ? nodeData?.primaryKeyId : nodeData?.id
+        primaryKeyId = nodeData?.id || ''
+    }
+    //获取数据
+    const {data} = await queryApi.queryWbsTreeData({
+        contractId: contractId.value || '',
+        contractIdRelation,
+        primaryKeyId,
+        parentId,
+        classifyType: authBtnTabKey.value
+    })
+    resolve(getArrValue(data))
+}
 
 //树被点击
 const wbsElTreeClick = ({node, data, keys}) => {
@@ -1032,7 +1097,22 @@ const setTreeMenuDataClick = ({key, node, data}) => {
         addNodeLoading.value = false
         addNodeModal.value = true
     } else if (key === 'upload') {
-        document.getElementById('upload-drawing').click()
+        const info = nodeDataInfo.value;
+        //上传的配置
+        uploadFileOptions.value = {
+            url: '/api/blade-resource/oss/endpoint/put-file',
+            accept: 'image/png,image/jpg,image/jpeg',
+            accept_tip: "png、jpg、jpeg",
+            headers: getTokenHeader(),
+            multiple: false
+        }
+        uploadFileEchoParams.value = {
+            type: 'upload-drawing',
+            drawingsId: info['drawingsId'],
+            primaryKeyId: info['primaryKeyId'],
+        }
+        uploadFileParams.value = {}
+        HcUploadFileRef.value?.selectFile()
     } else if (key === 'del') {
         if (data['colorStatus'] === 1 || data['colorStatus'] === 2) {
             delModalClick()
@@ -1072,46 +1152,6 @@ const getPathName = (node, pathArr) => {
     }
 }
 
-//上传前
-const loadingReactive = ref(null)
-const beforeUpload = () => {
-    loadingReactive.value = window.$loading?.service({
-        lock: true,
-        text: '图纸上传中...',
-        background: 'rgba(0, 0, 0, 0.7)',
-    })
-    return true
-}
-//上传完成
-const uploadFinish = async (response) => {
-    const res = getObjValue(response.data)
-    const info = nodeDataInfo.value;
-    if (res?.link) {
-        const {error, code, data} = await wbsApi.saveContractTreeDrawings({
-            fileUrl: res?.link,
-            id: info['drawingsId'],
-            primaryKeyId: info['primaryKeyId']
-        }, false)
-        //处理数据
-        loadingReactive.value.close();
-        if (!error && code === 200) {
-            nodeDataInfo.value['drawingsId'] = data
-            nodeDataInfo.value['fileUrl'] = res?.link
-            window?.$message?.success('图纸上传成功')
-        } else {
-            window?.$message?.error('图纸保存失败')
-        }
-    } else {
-        loadingReactive.value.close();
-        window?.$message?.error('图纸上传失败')
-    }
-}
-//上传失败
-const uploadError = () => {
-    loadingReactive.value.close();
-    window?.$message?.error('图纸上传失败')
-}
-
 //确认标记为首件
 const firstItemBox = () => {
     const info = nodeDataInfo.value;
@@ -1233,9 +1273,9 @@ const copyNodeElTreeClick = ({data,node}) => {
 //         //只能往上一级点击，不能跨层级点击
 //         //已上报的工序节点不能点击选择
 //         //如果选择的是父级节点，那不能复制到子级节点
-    if(data['colorStatus']===2||data['colorStatus']==1){//已上报的工序不能点击
-        if (data['id'] !== formCopyNodeModel.value.id) {//不能复制到本身节点下
-            //只能往上一级点击，不能跨层级点击
+        if(data['colorStatus']===2||data['colorStatus']==1){//已上报的工序不能点击
+            if (data['id'] !== formCopyNodeModel.value.id) {//不能复制到本身节点下
+                //只能往上一级点击，不能跨层级点击
                 //如果选择的是父级节点，那不能复制到子级节点
                 if (type === 6 && (data['type'] === 4 || data['type'] === 5 || data['type'] == 6)) {
                     setCopyNodeTable(data, title)
@@ -1257,10 +1297,10 @@ const copyNodeElTreeClick = ({data,node}) => {
                 }
 
 
+            }
+        }else{
+            window?.$message?.warning('该节点已存在上报数据，不允许复制')
         }
-    }else{
-        window?.$message?.warning('该节点已存在上报数据，不允许复制')
-    }
 
 
     } else if (TabKey === '3') {
@@ -1339,9 +1379,24 @@ const copyNodeClick = async () => {
             }
         })
     }
-  if(isCopyData.value===1){
-    if (classify) {
-        //效验数据
+    if(isCopyData.value===1){
+        if (classify) {
+            //效验数据
+            if (type === '1') {
+                const validate = await formValidate(formCopyNodeModelRef.value)
+                if (validate) await copyContractTreeNode(type, form, [], classify)
+            } else if (type === '2') {
+                if (table.length > 0) {
+                    const validate = await formValidate(copyNodeTableRef.value)
+                    if (validate) await copyContractTreeNode(type, form, table, classify)
+                } else {
+                    window?.$message?.warning('请先在左侧选择要复制到的节点')
+                }
+            }
+        } else {
+            window?.$message?.warning('请选择所属方')
+        }
+    }else{
         if (type === '1') {
             const validate = await formValidate(formCopyNodeModelRef.value)
             if (validate) await copyContractTreeNode(type, form, [], classify)
@@ -1353,22 +1408,7 @@ const copyNodeClick = async () => {
                 window?.$message?.warning('请先在左侧选择要复制到的节点')
             }
         }
-    } else {
-        window?.$message?.warning('请选择所属方')
     }
-  }else{
-    if (type === '1') {
-            const validate = await formValidate(formCopyNodeModelRef.value)
-            if (validate) await copyContractTreeNode(type, form, [], classify)
-    } else if (type === '2') {
-            if (table.length > 0) {
-                const validate = await formValidate(copyNodeTableRef.value)
-                if (validate) await copyContractTreeNode(type, form, table, classify)
-            } else {
-                window?.$message?.warning('请先在左侧选择要复制到的节点')
-            }
-     }
-  }
 }
 //单个复制、多份复制请求
 const copyContractTreeNode = async (type, form, table, classify) => {

src/views/home/config.vue

@@ -119,7 +119,7 @@ import {userConfigSave} from "~api/other";
 import ImgTheme from "~src/assets/images/theme.png";
 import ImgColor from "~src/assets/images/color.png";
 import {setElementMainColor} from "js-fast-way"
-import {useOsTheme} from '~src/plugins/useOsTheme';
+import {useOsTheme} from 'hc-vue3-ui'
 
 //初始变量
 const router = useRouter()
@@ -161,7 +161,7 @@ const ThemeTabsUpdate = (val) => {
     UserTheme.value = val
     useAppState.setTheme(val)
     if (val === 'auto') {
-        useAppState.setThemeVal(useOsTheme().value)
+        useAppState.setThemeVal(useOsTheme())
     } else {
         useAppState.setThemeVal(val)
     }

src/views/ledger/components/table-form.vue

@@ -144,7 +144,7 @@
 import {ref, watch, onMounted, onActivated, onDeactivated, onUnmounted} from "vue";
 import {getObjValue, isString, getArrValue, isNullES, getObjVal, arrToId} from "js-fast-way"
 import DateCalendar from "./dateCalendar/index.vue"
-import HcTableForm from "~com/table-form/index.vue";
+//import HcTableForm from "~com/table-form/index.vue";
 import HTableForm from "~src/plugins/HTableForm"
 import wbsQueryApi from '~api/data-fill/query';
 import queryApi from '~api/ledger/query';

src/views/schedule/write.vue

@@ -12,8 +12,9 @@
             </div>
             <div class="hc-tree-box">
                 <el-scrollbar>
-                    <WbsTree :autoExpandKeys="treeAutoExpandKeys" :classifyType="classifyType" :contractId="contractId"
-                             :projectId="projectId" @nodeTap="wbsElTreeClick"/>
+                    <HcLazyTree :autoExpandKeys="treeAutoExpandKeys" isType @load="treeLoadNode" @nodeTap="wbsElTreeClick"/>
+                    <!--WbsTree :autoExpandKeys="treeAutoExpandKeys" :classifyType="classifyType" :contractId="contractId"
+                             :projectId="projectId" @nodeTap="wbsElTreeClick"/-->
                 </el-scrollbar>
             </div>
             <!--左右拖动-->
@@ -28,11 +29,12 @@
 <script setup>
 import {ref, watch} from 'vue'
 import {useAppStore} from "~src/store";
-import WbsTree from "../data-fill/components/WbsTree.vue"
 import {getStoreValue, setStoreValue} from '~src/utils/storage'
 import BarChart from "./components/echarts/BarChart.vue"
+import {getArrValue, getObjValue} from "js-fast-way"
 import DataApi from "~api/schedule/data"
-import {getArrValue} from "js-fast-way"
+import queryApi from '~api/data-fill/query';
+
 
 //变量
 const useAppState = useAppStore()
@@ -55,6 +57,26 @@ watch(() => [
 const treeAutoExpandKeys = ref(getStoreValue('scheduleTreeKeys') || [])
 const barChartRef = ref(null)
 
+//懒加载的数据
+const treeLoadNode = async ({node, item, level},resolve) => {
+    let contractIdRelation = '', parentId = '', primaryKeyId = '';
+    if (level !== 0) {
+        const nodeData = getObjValue(item);
+        contractIdRelation = nodeData?.contractIdRelation || ''
+        parentId = contractIdRelation ? nodeData?.primaryKeyId : nodeData?.id
+        primaryKeyId = nodeData?.id || ''
+    }
+    //获取数据
+    const {data} = await queryApi.queryWbsTreeData({
+        contractId: contractId.value || '',
+        contractIdRelation,
+        primaryKeyId,
+        parentId,
+        classifyType: classifyType.value
+    })
+    resolve(getArrValue(data))
+}
+
 //树被点击
 const treeItemInfo = ref({})
 const wbsElTreeClick = ({data, keys}) => {

src/views/tasks/hc-data.vue

@@ -89,7 +89,7 @@
             </div>
             <div class="obj-item-cell">
                 <div class="label">默认处理时间（时）</div>
-                <HcCounter v-model:value="formReport.date" @update:modelValue="dateUpdateValue"/>
+                <HcCounter v-model="formReport.date" @update:modelValue="dateUpdateValue"/>
             </div>
             <div class="obj-item-cell">
                 <div class="label">开启系统自动电签</div>

src/views/tentative/material/approach.vue

@@ -196,16 +196,11 @@
             </template>
             <div class="hc-switch-tab-content">
                 <div class="h-full w-full">
-                    <div v-if="tableRowData[tabTypeKey]" style="text-align:center;height:100%">
+                    <div v-if="tableRowData[tabTypeKey]" style="text-align:center">
                         <iframe v-if="tableRowData[tabTypeKey]&&ispdf!==-1" :src="tableRowData[tabTypeKey]" allow="display-capture" frameborder='1'
-                                height='100%' style="height: 100%;"
+                                height='100%' style="height:500px;width:90%"
                                 width='100%'/>
 
-                        <el-button hc-btn size="small" type="primary" @click="deleteFile" v-if="tableRowData[tabTypeKey]&&ispdf!==-1">
-                            <HcIcon name="delete-bin-2"/>
-                            <span>删除</span>
-                        </el-button>
-
                         <div v-if="ispdf==-1" class="hc-no-table-form">
                             <div class="table-form-no" style="margin-top:100px">
                                 <!-- <img :src="notableform" alt=""/>
@@ -218,15 +213,13 @@
                                 <el-link :href="tableRowData[tabTypeKey]" style="margin-top:10px" type="primary">
                                     {{ splitFileName(tableRowData[tabTypeKey]) }}
                                 </el-link>
-                                <el-button hc-btn size="small" type="primary" @click="deleteFile">
-                                    <HcIcon name="delete-bin-2"/>
-                                    <span>删除</span>
-                                </el-button>
                             </div>
-
-                         
                         </div>
 
+                        <el-button hc-btn size="small" type="primary" @click="deleteFile">
+                            <HcIcon name="delete-bin-2"/>
+                            <span>删除</span>
+                        </el-button>
 
                     </div>
 

yarn.lock

@@ -12,10 +12,10 @@
   resolved "https://registry.yarnpkg.com/@antfu/utils/-/utils-0.7.2.tgz#3bb6f37a6b188056fe9e2f363b6aa735ed65d7ca"
   integrity sha512-vy9fM3pIxZmX07dL+VX1aZe7ynZ+YyB0jY+jE6r3hOK6GNY2t6W8rzpFC4tgpbXUYABkFQwgJq2XYXlxbXAI0g==
 
-"@babel/parser@^7.16.4":
-  version "7.21.4"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.4.tgz#94003fdfc520bbe2875d4ae557b43ddb6d880f17"
-  integrity sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw==
+"@babel/parser@^7.20.15", "@babel/parser@^7.21.3":
+  version "7.21.8"
+  resolved "http://47.110.251.215:9000/@babel/parser/-/parser-7.21.8.tgz#642af7d0333eab9c0ad70b14ac5e76dbde7bfdf8"
+  integrity sha512-6zavDGdzG3gUqAdWvlLFfk+36RilI+Pwyuuh7HItyeScCWP3k6i8vKclAQ0bM/0y/Kz/xiwvxhMv9MgTJP5gmA==
 
 "@ctrl/tinycolor@^3.4.1":
   version "3.6.0"
@@ -243,105 +243,105 @@
   resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz#1d12873a8e49567371f2a75fe3e7f7edca6662d8"
   integrity sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==
 
-"@vitejs/plugin-vue@^4.2.1":
-  version "4.2.1"
-  resolved "http://47.110.251.215:9000/@vitejs/plugin-vue/-/plugin-vue-4.2.1.tgz#c3ccce9956e8cdca946f465188777e4e3e488f6a"
-  integrity sha512-ZTZjzo7bmxTRTkb8GSTwkPOYDIP7pwuyV+RV53c9PYUouwcbkIZIvWvNWlX2b1dYZqtOv7D6iUAnJLVNGcLrSw==
+"@vitejs/plugin-vue@^4.2.3":
+  version "4.2.3"
+  resolved "http://47.110.251.215:9000/@vitejs/plugin-vue/-/plugin-vue-4.2.3.tgz#ee0b6dfcc62fe65364e6395bf38fa2ba10bb44b6"
+  integrity sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==
 
-"@vue/compiler-core@3.2.47":
-  version "3.2.47"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.47.tgz#3e07c684d74897ac9aa5922c520741f3029267f8"
-  integrity sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==
+"@vue/compiler-core@3.3.4":
+  version "3.3.4"
+  resolved "http://47.110.251.215:9000/@vue/compiler-core/-/compiler-core-3.3.4.tgz#7fbf591c1c19e1acd28ffd284526e98b4f581128"
+  integrity sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==
   dependencies:
-    "@babel/parser" "^7.16.4"
-    "@vue/shared" "3.2.47"
+    "@babel/parser" "^7.21.3"
+    "@vue/shared" "3.3.4"
     estree-walker "^2.0.2"
-    source-map "^0.6.1"
-
-"@vue/compiler-dom@3.2.47":
-  version "3.2.47"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz#a0b06caf7ef7056939e563dcaa9cbde30794f305"
-  integrity sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==
-  dependencies:
-    "@vue/compiler-core" "3.2.47"
-    "@vue/shared" "3.2.47"
-
-"@vue/compiler-sfc@3.2.47", "@vue/compiler-sfc@^3.2.47":
-  version "3.2.47"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz#1bdc36f6cdc1643f72e2c397eb1a398f5004ad3d"
-  integrity sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==
-  dependencies:
-    "@babel/parser" "^7.16.4"
-    "@vue/compiler-core" "3.2.47"
-    "@vue/compiler-dom" "3.2.47"
-    "@vue/compiler-ssr" "3.2.47"
-    "@vue/reactivity-transform" "3.2.47"
-    "@vue/shared" "3.2.47"
+    source-map-js "^1.0.2"
+
+"@vue/compiler-dom@3.3.4":
+  version "3.3.4"
+  resolved "http://47.110.251.215:9000/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz#f56e09b5f4d7dc350f981784de9713d823341151"
+  integrity sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==
+  dependencies:
+    "@vue/compiler-core" "3.3.4"
+    "@vue/shared" "3.3.4"
+
+"@vue/compiler-sfc@3.3.4", "@vue/compiler-sfc@^3.3.4":
+  version "3.3.4"
+  resolved "http://47.110.251.215:9000/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz#b19d942c71938893535b46226d602720593001df"
+  integrity sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==
+  dependencies:
+    "@babel/parser" "^7.20.15"
+    "@vue/compiler-core" "3.3.4"
+    "@vue/compiler-dom" "3.3.4"
+    "@vue/compiler-ssr" "3.3.4"
+    "@vue/reactivity-transform" "3.3.4"
+    "@vue/shared" "3.3.4"
     estree-walker "^2.0.2"
-    magic-string "^0.25.7"
+    magic-string "^0.30.0"
     postcss "^8.1.10"
-    source-map "^0.6.1"
+    source-map-js "^1.0.2"
 
-"@vue/compiler-ssr@3.2.47":
-  version "3.2.47"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz#35872c01a273aac4d6070ab9d8da918ab13057ee"
-  integrity sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==
+"@vue/compiler-ssr@3.3.4":
+  version "3.3.4"
+  resolved "http://47.110.251.215:9000/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz#9d1379abffa4f2b0cd844174ceec4a9721138777"
+  integrity sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==
   dependencies:
-    "@vue/compiler-dom" "3.2.47"
-    "@vue/shared" "3.2.47"
+    "@vue/compiler-dom" "3.3.4"
+    "@vue/shared" "3.3.4"
 
-"@vue/devtools-api@^6.4.5", "@vue/devtools-api@^6.5.0":
+"@vue/devtools-api@^6.5.0":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz#98b99425edee70b4c992692628fa1ea2c1e57d07"
   integrity sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==
 
-"@vue/reactivity-transform@3.2.47":
-  version "3.2.47"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz#e45df4d06370f8abf29081a16afd25cffba6d84e"
-  integrity sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==
+"@vue/reactivity-transform@3.3.4":
+  version "3.3.4"
+  resolved "http://47.110.251.215:9000/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz#52908476e34d6a65c6c21cd2722d41ed8ae51929"
+  integrity sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==
   dependencies:
-    "@babel/parser" "^7.16.4"
-    "@vue/compiler-core" "3.2.47"
-    "@vue/shared" "3.2.47"
+    "@babel/parser" "^7.20.15"
+    "@vue/compiler-core" "3.3.4"
+    "@vue/shared" "3.3.4"
     estree-walker "^2.0.2"
-    magic-string "^0.25.7"
+    magic-string "^0.30.0"
 
-"@vue/reactivity@3.2.47":
-  version "3.2.47"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.47.tgz#1d6399074eadfc3ed35c727e2fd707d6881140b6"
-  integrity sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==
+"@vue/reactivity@3.3.4":
+  version "3.3.4"
+  resolved "http://47.110.251.215:9000/@vue/reactivity/-/reactivity-3.3.4.tgz#a27a29c6cd17faba5a0e99fbb86ee951653e2253"
+  integrity sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==
   dependencies:
-    "@vue/shared" "3.2.47"
+    "@vue/shared" "3.3.4"
 
-"@vue/runtime-core@3.2.47":
-  version "3.2.47"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.47.tgz#406ebade3d5551c00fc6409bbc1eeb10f32e121d"
-  integrity sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==
+"@vue/runtime-core@3.3.4":
+  version "3.3.4"
+  resolved "http://47.110.251.215:9000/@vue/runtime-core/-/runtime-core-3.3.4.tgz#4bb33872bbb583721b340f3088888394195967d1"
+  integrity sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==
   dependencies:
-    "@vue/reactivity" "3.2.47"
-    "@vue/shared" "3.2.47"
+    "@vue/reactivity" "3.3.4"
+    "@vue/shared" "3.3.4"
 
-"@vue/runtime-dom@3.2.47":
-  version "3.2.47"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.47.tgz#93e760eeaeab84dedfb7c3eaf3ed58d776299382"
-  integrity sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==
+"@vue/runtime-dom@3.3.4":
+  version "3.3.4"
+  resolved "http://47.110.251.215:9000/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz#992f2579d0ed6ce961f47bbe9bfe4b6791251566"
+  integrity sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==
   dependencies:
-    "@vue/runtime-core" "3.2.47"
-    "@vue/shared" "3.2.47"
-    csstype "^2.6.8"
+    "@vue/runtime-core" "3.3.4"
+    "@vue/shared" "3.3.4"
+    csstype "^3.1.1"
 
-"@vue/server-renderer@3.2.47":
-  version "3.2.47"
-  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.47.tgz#8aa1d1871fc4eb5a7851aa7f741f8f700e6de3c0"
-  integrity sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==
+"@vue/server-renderer@3.3.4":
+  version "3.3.4"
+  resolved "http://47.110.251.215:9000/@vue/server-renderer/-/server-renderer-3.3.4.tgz#ea46594b795d1536f29bc592dd0f6655f7ea4c4c"
+  integrity sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==
   dependencies:
-    "@vue/compiler-ssr" "3.2.47"
-    "@vue/shared" "3.2.47"
+    "@vue/compiler-ssr" "3.3.4"
+    "@vue/shared" "3.3.4"
 
-"@vue/shared@3.2.47":
-  version "3.2.47"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.47.tgz#e597ef75086c6e896ff5478a6bfc0a7aa4bbd14c"
-  integrity sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==
+"@vue/shared@3.3.4":
+  version "3.3.4"
+  resolved "http://47.110.251.215:9000/@vue/shared/-/shared-3.3.4.tgz#06e83c5027f464eef861c329be81454bc8b70780"
+  integrity sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==
 
 "@vueuse/core@^9.1.0":
   version "9.13.0"
@@ -444,10 +444,10 @@ autoprefixer@^10.4.14:
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
 
-axios@^1.3.6:
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-1.3.6.tgz#1ace9a9fb994314b5f6327960918406fa92c6646"
-  integrity sha512-PEcdkk7JcdPiMDkvM4K6ZBRYq9keuVJsToxm2zQIM70Qqo2WHTdJZMXcG9X+RmRp2VPNUQC8W1RAGbgt6b1yMg==
+axios@^1.4.0:
+  version "1.4.0"
+  resolved "http://47.110.251.215:9000/axios/-/axios-1.4.0.tgz#38a7bf1224cd308de271146038b551d725f0be1f"
+  integrity sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==
   dependencies:
     follow-redirects "^1.15.0"
     form-data "^4.0.0"
@@ -614,10 +614,10 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-csstype@^2.6.8:
-  version "2.6.21"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
-  integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
+csstype@^3.1.1:
+  version "3.1.2"
+  resolved "http://47.110.251.215:9000/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
+  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
 dayjs@^1.11.3, dayjs@^1.11.7:
   version "1.11.7"
@@ -659,7 +659,7 @@ electron-to-chromium@^1.4.284:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.367.tgz#d9ddc529ba2315fc852b722c359e4a40e86aa742"
   integrity sha512-mNuDxb+HpLhPGUKrg0hSxbTjHWw8EziwkwlJNkFUj3W60ypigLDRVz04vU+VRsJPi8Gub+FDhYUpuTm9xiEwRQ==
 
-element-plus@2.3.4:
+element-plus@2.3.4, element-plus@^2.3.4:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/element-plus/-/element-plus-2.3.4.tgz#4319f6b0a1096cfac9c53b69da2fe23ac5aea63e"
   integrity sha512-SQr0J9z7N4z48WYk/l9NE2tizl8Q7j2OhqlpTc42k4pGncry3+rVX6dsmcsglFynn6vt3NzYxWJqmLFyDKQq+g==
@@ -849,6 +849,22 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+hc-vue3-ui@^1.1.6:
+  version "1.1.6"
+  resolved "http://47.110.251.215:9000/hc-vue3-ui/-/hc-vue3-ui-1.1.6.tgz#62900139f18330beeb301750458259785d8d42bb"
+  integrity sha512-Q8a69Ct455uqfvfUWNCLdfg3pU7kugQweYNO4cZ6lbOEWM2SJ6FL/YR6TwkMfqsVC9YAl0yeZ6GMfflcg1SUpA==
+  dependencies:
+    axios "^1.4.0"
+    dayjs "^1.11.7"
+    element-plus "^2.3.4"
+    js-fast-way "^0.1.0"
+    js-md5 "^0.7.3"
+    remixicon "^3.3.0"
+    simple-uploader.js "^0.6.0"
+    sortablejs "^1.15.0"
+    vue "^3.3.4"
+    vuedraggable "^2.24.3"
+
 html2canvas@1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.4.1.tgz#7cef1888311b5011d507794a066041b14669a543"
@@ -941,10 +957,10 @@ js-md5@^0.7.3:
   resolved "https://registry.yarnpkg.com/js-md5/-/js-md5-0.7.3.tgz#b4f2fbb0b327455f598d6727e38ec272cd09c3f2"
   integrity sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ==
 
-js-web-screen-shot@^1.9.5:
-  version "1.9.5"
-  resolved "https://registry.yarnpkg.com/js-web-screen-shot/-/js-web-screen-shot-1.9.5.tgz#cc5cc482df4718604152a2ca2556f8f06a27d6f6"
-  integrity sha512-sWWKosav8TdB+9qU8hjLu2rlpcUl8tZSiILMpTJjrALY6E0ml6pb/pEqRYYfmDa8sUmtCycFs1owvhCaOKrdKg==
+js-web-screen-shot@^1.9.7-rc.1:
+  version "1.9.7-rc.1"
+  resolved "http://47.110.251.215:9000/js-web-screen-shot/-/js-web-screen-shot-1.9.7-rc.1.tgz#e9ece9f41a276be546dc13909cb091f6ec30f954"
+  integrity sha512-aw/yu1MEDKZDjGKZOJvqDQ9lTUh2qy+VeqhHcANm1Fyu/GUVGP4oxX9kY9wm3+iFDa4tJsuuSKqEx+0czF88dA==
   dependencies:
     html2canvas "1.4.1"
 
@@ -1015,13 +1031,6 @@ lodash@^4.17.21:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-magic-string@^0.25.7:
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
-  integrity sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==
-  dependencies:
-    sourcemap-codec "^1.4.8"
-
 magic-string@^0.30.0:
   version "0.30.0"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.0.tgz#fd58a4748c5c4547338a424e90fa5dd17f4de529"
@@ -1188,13 +1197,13 @@ pify@^2.3.0:
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
   integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
 
-pinia@^2.0.35:
-  version "2.0.35"
-  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.0.35.tgz#aa2597038bb55ea14ad689f83065d2814ebb8c10"
-  integrity sha512-P1IKKQWhxGXiiZ3atOaNI75bYlFUbRxtJdhPLX059Z7+b9Z04rnTZdSY8Aph1LA+/4QEMAYHsTQ638Wfe+6K5g==
+pinia@^2.1.1:
+  version "2.1.1"
+  resolved "http://47.110.251.215:9000/pinia/-/pinia-2.1.1.tgz#542c6bb8a7c27b342082f431bccd6124b63c5b55"
+  integrity sha512-Y2CgpcUtD8Ogdvo5LW5g20ykSZgnVDMgTSZFr40EvO6HB8axQk+0lHa1UrRah9wworFaxjovwRlY/wRICWj/KQ==
   dependencies:
     "@vue/devtools-api" "^6.5.0"
-    vue-demi "*"
+    vue-demi ">=0.14.2"
 
 pirates@^4.0.1:
   version "4.0.5"
@@ -1254,7 +1263,7 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.1.10, postcss@^8.4.21:
+postcss@^8.1.10:
   version "8.4.22"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.22.tgz#c29e6776b60ab3af602d4b513d5bd2ff9aa85dc1"
   integrity sha512-XseknLAfRHzVWjCEtdviapiBtfLdgyzExD50Rg2ePaucEesyh8Wv4VPdW0nbyDa1ydbrAxV19jvMT4+LFmcNUA==
@@ -1330,10 +1339,10 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
-remixicon@^3.1.1:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/remixicon/-/remixicon-3.2.0.tgz#7c3f4c0a073bc4d1f9e8e9941f37a2961de5b561"
-  integrity sha512-ADh4EQE4UGtm9GHqD+TIfVp1b0zeWso6efaMAnejdB6/7Z1W02Ka5K8khQaz+LNgIqC6dSZxCvXMWNalYWHiNQ==
+remixicon@^3.3.0:
+  version "3.3.0"
+  resolved "http://47.110.251.215:9000/remixicon/-/remixicon-3.3.0.tgz#2d610706a98a4bed093e9d5c2a28551632b11c68"
+  integrity sha512-iNeRbwVgd8Ef467IjMd/+joFWSBOYfqsLtxtSzsS8fWn75a1H7sgGu5uWE4c3NLjP2C1giFlx8gw63qZd96yJQ==
 
 resolve@^1.1.7, resolve@^1.22.1, resolve@^1.22.2:
   version "1.22.2"
@@ -1387,26 +1396,31 @@ scule@^1.0.0:
   resolved "https://registry.yarnpkg.com/scule/-/scule-1.0.0.tgz#895e6f4ba887e78d8b9b4111e23ae84fef82376d"
   integrity sha512-4AsO/FrViE/iDNEPaAQlb77tf0csuq27EsVpy6ett584EcRTp6pTDLoGWVxCD77y5iU5FauOvhsI4o1APwPoSQ==
 
+simple-uploader.js@^0.6.0:
+  version "0.6.0"
+  resolved "http://47.110.251.215:9000/simple-uploader.js/-/simple-uploader.js-0.6.0.tgz#55724264c89ff70df4a9855bcd28eb92f0b88ced"
+  integrity sha512-EXN+o+LD6PVnfzTq/usP8k8yYrI6wKrAx8e+fPcPLVzzttonkyn1KT+Ycx5JnPBSnp6lpiVhNG4JhDJucdPnhA==
+
+sortablejs@1.10.2:
+  version "1.10.2"
+  resolved "http://47.110.251.215:9000/sortablejs/-/sortablejs-1.10.2.tgz#6e40364d913f98b85a14f6678f92b5c1221f5290"
+  integrity sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==
+
 sortablejs@1.14.0:
   version "1.14.0"
   resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.14.0.tgz#6d2e17ccbdb25f464734df621d4f35d4ab35b3d8"
   integrity sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==
 
+sortablejs@^1.15.0:
+  version "1.15.0"
+  resolved "http://47.110.251.215:9000/sortablejs/-/sortablejs-1.15.0.tgz#53230b8aa3502bb77a29e2005808ffdb4a5f7e2a"
+  integrity sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w==
+
 "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
-source-map@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
-sourcemap-codec@^1.4.8:
-  version "1.4.8"
-  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
-  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
-
 split.js@^1.6.5:
   version "1.6.5"
   resolved "https://registry.yarnpkg.com/split.js/-/split.js-1.6.5.tgz#f7f61da1044c9984cb42947df4de4fadb5a3f300"
@@ -1551,10 +1565,10 @@ unimport@^3.0.6:
     strip-literal "^1.0.1"
     unplugin "^1.3.1"
 
-unplugin-auto-import@^0.15.2:
-  version "0.15.3"
-  resolved "https://registry.yarnpkg.com/unplugin-auto-import/-/unplugin-auto-import-0.15.3.tgz#abf5f1bf42f8c181e9dd1067bd5645aad727df6e"
-  integrity sha512-RLT8SqbPn4bT7yBshZId0uPSofKWnwr66RyDaxWaFb/+f7OTDOWAsVNz+hOQLBWSjvbekr2xZY9ccS8TDHJbCQ==
+unplugin-auto-import@^0.16.0:
+  version "0.16.0"
+  resolved "http://47.110.251.215:9000/unplugin-auto-import/-/unplugin-auto-import-0.16.0.tgz#53f1aeee06631d9aa2105b7bf3e3107bd21ce7e0"
+  integrity sha512-AbeGl3kzoGyqh2uWwwSVYCXy2ouvSbHfBc2u7xmNBpOosWa7SIAz+nQx3f1JpMXunEZ9TTChXkor4WcGrpkc7Q==
   dependencies:
     "@antfu/utils" "^0.7.2"
     "@rollup/pluginutils" "^5.0.2"
@@ -1610,13 +1624,13 @@ utrie@^1.0.2:
   dependencies:
     base64-arraybuffer "^1.0.2"
 
-vite@^4.3.2:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-4.3.2.tgz#95a5e0ebee80ae218849312019318aa9e3a05c26"
-  integrity sha512-9R53Mf+TBoXCYejcL+qFbZde+eZveQLDYd9XgULILLC1a5ZwPaqgmdVpL8/uvw2BM/1TzetWjglwm+3RO+xTyw==
+vite@^4.3.8:
+  version "4.3.8"
+  resolved "http://47.110.251.215:9000/vite/-/vite-4.3.8.tgz#70cd6a294ab52d7fb8f37f5bc63d117dd19e9918"
+  integrity sha512-uYB8PwN7hbMrf4j1xzGDk/lqjsZvCDbt/JC5dyfxc19Pg8kRm14LinK/uq+HSLNswZEoKmweGdtpbnxRtrAXiQ==
   dependencies:
     esbuild "^0.17.5"
-    postcss "^8.4.21"
+    postcss "^8.4.23"
     rollup "^3.21.0"
   optionalDependencies:
     fsevents "~2.3.2"
@@ -1626,23 +1640,35 @@ vue-demi@*:
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.0.tgz#dcfd9a9cf9bb62ada1582ec9042372cf67ca6190"
   integrity sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==
 
-vue-router@^4.1.6:
-  version "4.1.6"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.1.6.tgz#b70303737e12b4814578d21d68d21618469375a1"
-  integrity sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==
+vue-demi@>=0.14.2:
+  version "0.14.4"
+  resolved "http://47.110.251.215:9000/vue-demi/-/vue-demi-0.14.4.tgz#e3e634eece46ad39e391523cde5b395d22f6cf33"
+  integrity sha512-YR9bCmtIYgsqNVRG3MLLWlhbZ9tTNMuWHPd7yx0pHS3NDX17MeVNHgKTOClYE8pBjsfNe4CMaReP7zQtHDIbiA==
+
+vue-router@^4.2.0:
+  version "4.2.0"
+  resolved "http://47.110.251.215:9000/vue-router/-/vue-router-4.2.0.tgz#558f31978a21ce3accf5122ffdf2cec34a5d2517"
+  integrity sha512-c+usESa6ZoWsm4PPdzRSyenp5A4dsUtnDJnrI03fY1IpIihA9TK3x5ffgkFDpjhLJZewsXoKURapNLFdZjuqTg==
+  dependencies:
+    "@vue/devtools-api" "^6.5.0"
+
+vue@^3.3.4:
+  version "3.3.4"
+  resolved "http://47.110.251.215:9000/vue/-/vue-3.3.4.tgz#8ed945d3873667df1d0fcf3b2463ada028f88bd6"
+  integrity sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==
   dependencies:
-    "@vue/devtools-api" "^6.4.5"
+    "@vue/compiler-dom" "3.3.4"
+    "@vue/compiler-sfc" "3.3.4"
+    "@vue/runtime-dom" "3.3.4"
+    "@vue/server-renderer" "3.3.4"
+    "@vue/shared" "3.3.4"
 
-vue@^3.2.47:
-  version "3.2.47"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.47.tgz#3eb736cbc606fc87038dbba6a154707c8a34cff0"
-  integrity sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==
+vuedraggable@^2.24.3:
+  version "2.24.3"
+  resolved "http://47.110.251.215:9000/vuedraggable/-/vuedraggable-2.24.3.tgz#43c93849b746a24ce503e123d5b259c701ba0d19"
+  integrity sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==
   dependencies:
-    "@vue/compiler-dom" "3.2.47"
-    "@vue/compiler-sfc" "3.2.47"
-    "@vue/runtime-dom" "3.2.47"
-    "@vue/server-renderer" "3.2.47"
-    "@vue/shared" "3.2.47"
+    sortablejs "1.10.2"
 
 vuedraggable@^4.1.0:
   version "4.1.0"