feat: 用户管理 表单管理 收缩 支持

src/views/flow/form/index.vue

@@ -1,7 +1,11 @@
 <template>
 	<div class="pageWrap bgc">
-		<div class="h-full mr-2">
-			<el-card :body-style="{ height: '100%', width: '300px' }" class="h-full border-none menu-card" shadow="hidden">
+		<div :class="['h-full mr-2 aside-wrap', isCollapsed ? 'aside-wrap--collapsed' : '']">
+			<div :class="['trigger-bar', isCollapsed ? 'trigger-bar--collapsed' : '']" @click="isCollapsed = !isCollapsed">
+				<div class="bar__top"></div>
+				<div class="bar__bottom"></div>
+			</div>
+			<el-card class="h-full border-none menu-card" shadow="hidden">
 				<template #header>
 					<div class="flex justify-between">
 						<div class="card-header">
@@ -135,6 +139,7 @@ import DesignForm from './designForm.vue'
 import { statusOptions, templateForms, typeOptions, typeOptions_config } from './data.tsx'
 import post from '@/api/system/post'
 const treeParentName = '所有'
+const isCollapsed = ref(false)
 const visible = ref(false) // 弹窗显示隐藏
 const visibleTemplate = ref(false) // 弹窗显示隐藏
 const visibleDesignForm = ref(false) // 弹窗显示隐藏
@@ -606,4 +611,19 @@ watch(
 .custom-tree-node:hover .do {
 	display: inline-block;
 }
+.menu-card {
+	:deep(.el-card__body) {
+		width: 300px;
+	}
+}
+.content-warp {
+	// 300 + 28
+	width: calc(100% - 328px);
+}
+.aside-wrap--collapsed {
+	margin-left: -10px;
+	.menu-card {
+		width: 0;
+	}
+}
 </style>

src/views/setting/user/index.vue

@@ -1,7 +1,11 @@
 <template>
 	<div class="pageWrap bgc">
-		<div class="h-full mr-2">
-			<el-card :body-style="{ height: '100%', width: '300px' }" class="h-full border-none menu-card" shadow="hidden">
+		<div :class="['h-full mr-2 aside-wrap', isCollapsed ? 'aside-wrap--collapsed' : '']">
+			<div :class="['trigger-bar', isCollapsed ? 'trigger-bar--collapsed' : '']" @click="isCollapsed = !isCollapsed">
+				<div class="bar__top"></div>
+				<div class="bar__bottom"></div>
+			</div>
+			<el-card class="h-full border-none menu-card" shadow="hidden">
 				<template #header>
 					<div class="flex justify-between">
 						<div class="card-header">
@@ -109,7 +113,7 @@ import { useTablePage } from '@/hooks/useTablePage'
 import { Plus, Delete, Key, Connection, User } from '@element-plus/icons-vue'
 import AssignRoleDialog from './assign-role.vue'
 import ResetPwd from './reset-pwd.vue'
-
+const isCollapsed = ref(false)
 const visible = ref(false) // 弹窗显示隐藏
 const isCreate = ref(true)
 const activeData = ref({})
@@ -528,4 +532,20 @@ watch(groupFilterText, val => {
 		margin-right: 5px;
 	}
 }
+
+.menu-card {
+	:deep(.el-card__body) {
+		width: 300px;
+	}
+}
+.content-warp {
+	// 300 + 28
+	width: calc(100% - 328px);
+}
+.aside-wrap--collapsed {
+	margin-left: -10px;
+	.menu-card {
+		width: 0;
+	}
+}
 </style>