更新依赖，新主题，先不要发版

package.json

@@ -18,7 +18,7 @@
         "dayjs": "^1.11.10",
         "echarts": "^5.4.2",
         "element-plus": "^2.4.1",
-        "hc-vue3-ui": "^2.4.4",
+        "hc-vue3-ui": "^2.4.6",
         "js-base64": "^3.7.5",
         "js-cookie": "^3.0.5",
         "js-fast-way": "^0.3.0",

src/styles/app/theme.scss

@@ -240,6 +240,9 @@ html.dark {
             border-color: var(--el-color-primary);
         }
     }
+    .el-card.hc-new-card-box .hc-card-header-box .hc-card-header .title {
+        color: white;
+    }
     //穿梭框
     .hc-moves-transfer-box .hc-moves-transfer-panel {
         background: transparent;

src/styles/page/custody/early.scss

@@ -0,0 +1,83 @@
+.hc-custody-early-page {
+    .hc-custody-early-left {
+        position: relative;
+        height: 100%;
+        .hc-custody-early-expire {
+            position: relative;
+            height: 112px;
+            margin-bottom: 14px;
+            .hc-early-num-box {
+                position: relative;
+                display: grid;
+                grid-template-columns: 33.33% 33.33% 33.33%;
+                text-align: center;
+                margin-bottom: 10px;
+                .early-num-item {
+                    position: relative;
+                    .num-box {
+                        position: relative;
+                        font-size: 20px;
+                        font-weight: bold;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        .num {
+                            margin-left: 6px;
+                        }
+                    }
+                    .text {
+                        margin-top: 10px;
+                        color: #C4C7C4;
+                    }
+                }
+            }
+        }
+        .hc-custody-early-project {
+            position: relative;
+            .hc-project-box {
+                position: relative;
+                display: flex;
+                align-items: flex-start;
+                .hc-project-icon-box {
+                    font-size: 28px;
+                    color: var(--el-color-primary);
+                }
+                .project-name {
+                    flex: auto;
+                    position: relative;
+                    overflow: hidden;
+                    font-size: 15px;
+                    color: var(--el-color-primary);
+                }
+            }
+            .hc-tree-box {
+                position: relative;
+                height: 100%;
+                .el-scrollbar__bar.is-vertical {
+                    right: -8px;
+                }
+            }
+        }
+        &.is-header .hc-custody-early-project {
+            height: calc(100% - 126px);
+        }
+    }
+    .ledger-write-box {
+        position: relative;
+        height: 100%;
+        .hc-sb-table .el-tabs .el-tabs__content {
+            height: calc(100vh - 152px);
+        }
+    }
+    &.is-no-tree .hc-page-split {
+        .hc-page-split-left, .gutter {
+            display: none;
+        }
+    }
+}
+
+html.dark {
+    .hc-custody-early-page .hc-custody-early-left .hc-custody-early-expire .hc-early-num-box .early-num-item .num-box .num {
+        color: white;
+    }
+}

src/views/custody/early.vue

@@ -1,88 +1,85 @@
 <template>
-    <div class="hc-page-layout-box">
-        <div class="hc-layout-early-left-box" :style="'width:' + leftWidth + 'px;'" v-if="sbTableKey !== 'spite'">
-            <div class="hc-layout-header-box" v-if="sbTableKey === 'expire'">
-                <div class="header">到期档案预警</div>
-                <div class="hc-early-num-box">
-                    <div class="early-num-item">
-                        <div class="num-box">
-                            <HcIcon name="notification-2" ui="text-red" fill/>
-                            <span class="num">291</span>
+    <hc-body class="hc-custody-early-page" split :class="sbTableKey === 'spite' ? 'is-no-tree' : ''">
+        <template #left>
+            <div v-if="sbTableKey !== 'spite'" class="hc-custody-early-left" :class="sbTableKey === 'expire' ? 'is-header' : ''">
+                <hc-new-card v-if="sbTableKey === 'expire'" class="hc-custody-early-expire" title="到期档案预警">
+                    <div class="hc-early-num-box">
+                        <div class="early-num-item">
+                            <div class="num-box">
+                                <HcIcon name="notification-2" ui="text-red" fill />
+                                <span class="num">291</span>
+                            </div>
+                            <div class="text">本周到期</div>
                         </div>
-                        <div class="text">本周到期</div>
-                    </div>
-                    <div class="early-num-item">
-                        <div class="num-box">
-                            <HcIcon name="notification-3" ui="text-orange" fill/>
-                            <span class="num">291</span>
+                        <div class="early-num-item">
+                            <div class="num-box">
+                                <HcIcon name="notification-3" ui="text-orange" fill />
+                                <span class="num">291</span>
+                            </div>
+                            <div class="text">1个月到期</div>
                         </div>
-                        <div class="text">1个月到期</div>
-                    </div>
-                    <div class="early-num-item">
-                        <div class="num-box">
-                            <HcIcon name="notification-4" ui="text-blue" fill/>
-                            <span class="num">2291</span>
+                        <div class="early-num-item">
+                            <div class="num-box">
+                                <HcIcon name="notification-4" ui="text-blue" fill />
+                                <span class="num">2291</span>
+                            </div>
+                            <div class="text">半年到期</div>
                         </div>
-                        <div class="text">半年到期</div>
-                    </div>
-                </div>
-            </div>
-            <div class="hc-layout-left-box" :class="sbTableKey === 'expire' ? 'is-header' : ''">
-                <div class="hc-project-box">
-                    <div class="hc-project-icon-box">
-                        <HcIcon name="stack"/>
                     </div>
-                    <div class="ml-2 project-name-box">
-                        <span class="text-xl text-cut project-alias">{{projectInfo['projectAlias']}}</span>
-                        <div class="text-xs text-cut project-name">{{projectInfo['name']}}</div>
+                </hc-new-card>
+                <hc-new-card class="hc-custody-early-project">
+                    <template #header>
+                        <div class="hc-project-box">
+                            <div class="hc-project-icon-box">
+                                <HcIcon name="stack" />
+                            </div>
+                            <div class="ml-2 project-name">{{ projectInfo.name }}</div>
+                        </div>
+                    </template>
+                    <div v-loading="treeLoading" class="hc-tree-box" element-loading-text="加载中...">
+                        <el-scrollbar>
+                            <HcTree :project-id="projectId" :contract-id="contractId" :auto-expand-keys="treeAutoExpandKeys" @nodeTap="projectTreeClick" @nodeLoading="treeNodeLoading" @menuTap="ElTreeMenuClick" />
+                        </el-scrollbar>
                     </div>
-                </div>
-                <div class="hc-tree-box" v-loading="treeLoading" element-loading-text="加载中...">
-                    <el-scrollbar>
-                        <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="projectTreeClick" @nodeLoading="treeNodeLoading" @menuTap="ElTreeMenuClick" :autoExpandKeys="treeAutoExpandKeys"/>
-                    </el-scrollbar>
-                </div>
-                <!--左右拖动-->
-                <div class="horizontal-drag-line" @mousedown="onmousedown"/>
+                </hc-new-card>
             </div>
-        </div>
-        <div class="hc-page-content-box ledger-write-box">
-            <HcTabsSimple :datas="sbTableData" :cur="sbTableKey" @tabClick="sbTableClick">
+        </template>
+        <div class="ledger-write-box">
+            <hc-tabs-simple :datas="sbTableData" :cur="sbTableKey" @tabClick="sbTableClick">
                 <template #tab-reform>
-                    <TabReform :projectId="projectId" :contractId="contractId" :treeData="nodeDataInfo" v-if="sbTableKey === 'reform'" ref="tabReform"/>
+                    <TabReform v-if="sbTableKey === 'reform'" ref="tabReform" :project-id="projectId" :contract-id="contractId" :tree-data="nodeDataInfo" />
                 </template>
                 <template #tab-expire>
-                    <TabExpire :projectId="projectId" :contractId="contractId" :treeData="nodeDataInfo" v-if="sbTableKey === 'expire'"/>
+                    <TabExpire v-if="sbTableKey === 'expire'" :project-id="projectId" :contract-id="contractId" :tree-data="nodeDataInfo" />
                 </template>
                 <template #tab-spite>
-                    <TabSpite :projectId="projectId" :contractId="contractId" :treeData="nodeDataInfo" v-if="sbTableKey === 'spite'"/>
+                    <TabSpite v-if="sbTableKey === 'spite'" :project-id="projectId" :contract-id="contractId" :tree-data="nodeDataInfo" />
                 </template>
-            </HcTabsSimple>
+            </hc-tabs-simple>
         </div>
-    </div>
+    </hc-body>
 </template>
 
 <script setup>
-import {ref, watch, onMounted} from "vue";
-import {useAppStore} from "~src/store";
-//import HcTree from "./components/hc-tree.vue"
-import HcTree from "~src/components/tree/hc-tree.vue"
-import TabReform from "./components/tab-reform.vue"
-import TabExpire from "./components/tab-expire.vue"
-import TabSpite from "./components/tab-spite.vue"
-import {getStoreValue, setStoreValue} from '~src/utils/storage'
+import { onMounted, ref, watch } from 'vue'
+import { useAppStore } from '~src/store'
+import HcTree from '~src/components/tree/hc-tree.vue'
+import TabReform from './components/tab-reform.vue'
+import TabExpire from './components/tab-expire.vue'
+import TabSpite from './components/tab-spite.vue'
+import { getStoreValue, setStoreValue } from '~src/utils/storage'
 
 
 //变量
 const useAppState = useAppStore()
-const projectId = ref(useAppState.getProjectId);
-const contractId = ref(useAppState.getContractId);
-const projectInfo = ref(useAppState.getProjectInfo);
+const projectId = ref(useAppState.getProjectId)
+const contractId = ref(useAppState.getContractId)
+const projectInfo = ref(useAppState.getProjectInfo)
 const isCollapse = ref(useAppState.getCollapse)
 
 //监听
 watch(() => [
-    useAppState.getCollapse
+    useAppState.getCollapse,
 ], ([Collapse]) => {
     isCollapse.value = Collapse
 })
@@ -101,9 +98,9 @@ const treeNodeLoading = () => {
 //类型处理
 const sbTableKey = ref('reform')
 const sbTableData = ref([
-    {icon: 'edit-2', label: '档案整改', key: 'reform'},
-    {icon: 'timer-2', label: '档案到期', key: 'expire'},
-    {icon: 'spam', label: '恶意访问记录', key: 'spite'},
+    { icon: 'edit-2', label: '档案整改', key: 'reform' },
+    { icon: 'timer-2', label: '档案到期', key: 'expire' },
+    { icon: 'spam', label: '恶意访问记录', key: 'spite' },
 ])
 const sbTableClick = (key) => {
     sbTableKey.value = key
@@ -111,49 +108,26 @@ const sbTableClick = (key) => {
 
 //树操作
 const nodeDataInfo = ref({})
-const tabReform=ref(null)
+const tabReform = ref(null)
 //自动展开缓存
 const treeAutoExpandKeys = ref(getStoreValue('earlyExpandKeys') || [])
-const projectTreeClick = ({key, node, data, keys}) => {
-    nodeDataInfo.value=data
+const projectTreeClick = ({ key, node, data, keys }) => {
+    nodeDataInfo.value = data
       //缓存展开的节点
       setStoreValue('earlyExpandKeys', keys)
         treeAutoExpandKeys.value = keys || []
-       if(sbTableKey.value==='reform'){
+       if (sbTableKey.value === 'reform') {
         // tabReform?.value?.getTableData()
        }
-      
+
 }
 //树菜单被点击
-const ElTreeMenuClick = async ({key, node, data, keys}) => {
+const ElTreeMenuClick = async ({ key, node, data, keys }) => {
     setStoreValue('earlyExpandKeys', keys)
     treeAutoExpandKeys.value = keys || []
 }
-
-//左右拖动，改变树形结构宽度
-const leftWidth = ref(382);
-const onmousedown = () => {
-    const leftNum = isCollapse.value ? 142 : 272
-    document.onmousemove = (ve) => {
-        let diffVal = ve.clientX - leftNum;
-        if(diffVal >= 310 && diffVal <= 900) {
-            leftWidth.value = diffVal;
-        }
-    }
-    document.onmouseup = () => {
-        document.onmousemove = null;
-        document.onmouseup = null;
-    }
-}
 </script>
 
-<style lang="scss" scoped>
-@import '~style/custody/scoped/early.scss';
-</style>
-
 <style lang="scss">
-.hc-page-layout-box .hc-page-content-box.ledger-write-box .hc-card-box.el-card {
-    border-radius: 0 var(--el-card-border-radius) var(--el-card-border-radius) var(--el-card-border-radius);
-    height: calc(100% - 44px);
-}
+@import '~style/custody/early.scss';
 </style>

yarn.lock

@@ -1329,10 +1329,10 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hc-vue3-ui@^2.4.4:
-  version "2.4.4"
-  resolved "http://47.110.251.215:9000/hc-vue3-ui/-/hc-vue3-ui-2.4.4.tgz#8e3b5a4bc5ba6c3abc1c164f3995c289cc6a665f"
-  integrity sha512-dZS9E51Eu2nTkH6SjFZssypr5GXylgblrHpPENkor/AsOn7Fgq2W5pTenjFH7Q0bS1IfQhXVbrDNJa3h48SZzQ==
+hc-vue3-ui@^2.4.6:
+  version "2.4.6"
+  resolved "http://47.110.251.215:9000/hc-vue3-ui/-/hc-vue3-ui-2.4.6.tgz#798e99e6d16e410f30cf184ff967b43624ca6092"
+  integrity sha512-6s3G8B1wtIbqdk8k8Jfi9tiQR5jYWxoOC28SbcRuXKdakUibnUu2nkQshVHlNHrjOD6CLXYXBh+oVIxYJEMhOQ==
   dependencies:
     axios "^1.6.0"
     dayjs "^1.11.10"