密码修改

src/components/tree/index.vue

@@ -1,37 +1,66 @@
 <template>
-    <div class="cn-tree">
-        <el-input v-model="filterText" placeholder="请输入内容" clearable style="margin-bottom: 10px">
-            <template #prefix>
-                <Icon name="el-icon-Search" style="font-size: 16px" />
-            </template>
-        </el-input>
-        <el-tree
-            style="flex: 1;overflow: auto;"
-            ref="treeRef"
-            :props="defaultProps"
-            v-bind="$attrs"
-            highlight-current
-            default-expand-all
-            :filter-node-method="filterNode"
-            node-key="id"
-        >
-            <template #default="{ node, data }">
-                <span class="custom-tree-node">
-                    <Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }" v-if="data.icon" />
-                    <span style="margin-left: 4px">{{ node.label }}</span>
-                </span>
-            </template>
-        </el-tree>
+    <div :style="{ width: menuCollapse ? '40px' : '280px' }" style="transition: all .3s; overflow: hidden;" >
+        <Icon
+            v-show="menuCollapse"
+            @click="onMenuCollapse"
+            :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
+            :class="menuCollapse ? 'unfold' : ''"
+            size="18"
+            class="fold ml10 mt20  menu-collapse"
+            style="cursor: pointer"
+        />
+        <div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
+            <div style="display: flex; align-items: center" class="mb10">
+                <el-input v-model="filterText" placeholder="请输入内容" clearable>
+                    <template #prefix>
+                        <Icon name="el-icon-Search" style="font-size: 16px" />
+                    </template>
+                </el-input>
+                <Icon
+                    @click="onMenuCollapse"
+                    :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
+                    :class="menuCollapse ? 'unfold' : ''"
+                    size="18"
+                    class="fold ml10 menu-collapse"
+                    style="cursor: pointer"
+                />
+            </div>
+            <el-tree
+                style="flex: 1; overflow: auto"
+                ref="treeRef"
+                :props="defaultProps"
+                v-bind="$attrs"
+                highlight-current
+                default-expand-all
+                :filter-node-method="filterNode"
+                node-key="id"
+            >
+                <template #default="{ node, data }">
+                    <span class="custom-tree-node">
+                        <Icon
+                            :name="data.icon"
+                            style="font-size: 16px"
+                            :style="{ color: data.color }"
+                            v-if="data.icon"
+                        />
+                        <span style="margin-left: 4px">{{ node.label }}</span>
+                    </span>
+                </template>
+            </el-tree>
+        </div>
     </div>
 </template>
 
 <script lang="ts" setup>
-import { ElTree } from 'element-plus';
+import useCurrentInstance from '@/utils/useCurrentInstance'
+import { ElTree } from 'element-plus'
 import { ref, watch } from 'vue'
 
 defineOptions({
     name: 'govern/tree'
 })
+const { proxy } = useCurrentInstance()
+const menuCollapse = ref(false)
 const filterText = ref('')
 const defaultProps = {
     label: 'name',
@@ -40,6 +69,10 @@ const defaultProps = {
 watch(filterText, val => {
     treeRef.value!.filter(val)
 })
+const onMenuCollapse = () => {
+    menuCollapse.value = !menuCollapse.value
+    proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
+}
 const filterNode = (value: string, data: any) => {
     if (!value) return true
     return data.name.includes(value)
@@ -47,6 +80,7 @@ const filterNode = (value: string, data: any) => {
 const treeRef = ref<InstanceType<typeof ElTree>>()
 defineExpose({ treeRef })
 </script>
+
 <style lang="scss" scoped>
 .cn-tree {
     flex-shrink: 0;
@@ -57,11 +91,14 @@ defineExpose({ treeRef })
     height: 100%;
     width: 280px;
     :deep(.el-tree) {
-        background: #efeff0;
+        border: 1px solid var(--el-border-color);
     }
     :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
         background-color: var(--el-color-primary-light-7);
     }
+    .menu-collapse {
+        color: var(--el-color-primary);
+    }
 }
 .custom-tree-node {
     display: flex;