update 重构 将scss文件拆解 按具体功能细分文件 便于后续维护

src/assets/styles/components/_page-shell.scss

@@ -0,0 +1,81 @@
+/* Shared vertical page shell spacing helpers. */
+
+.p-2 {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.page-shell {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.app-main > .page-shell,
+.app-main > .page-shell.p-2 {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+.p-2 > .el-row,
+.p-2 > .el-card,
+.p-2 > .search-wrap,
+.p-2 > div,
+.p-2 > section {
+  margin-bottom: 0 !important;
+}
+
+.page-shell > .el-row,
+.page-shell > .el-card,
+.page-shell > .search-wrap,
+.page-shell > div,
+.page-shell > section {
+  margin-bottom: 0 !important;
+}
+
+/* Scoped mixins for CRUD pages so view-level styles stay focused on page-specific rules. */
+
+@mixin action-link-buttons($background: rgba(53, 109, 255, 0.08)) {
+  .data-table {
+    :deep(.el-button.is-link) {
+      width: 32px;
+      height: 32px;
+      border-radius: 10px;
+      background: $background;
+    }
+  }
+}
+
+@mixin toolbar-responsive($mobile-breakpoint: 900px) {
+  @media (max-width: $mobile-breakpoint) {
+    .toolbar-shell {
+      align-items: flex-start;
+    }
+  }
+}
+
+@mixin content-stack($gap: 12px) {
+  .content-main {
+    display: flex;
+    flex-direction: column;
+    gap: $gap;
+  }
+}
+
+@mixin dept-tree-panel($padding-top: 6px) {
+  .dept-tree {
+    padding-top: $padding-top;
+  }
+}
+
+@mixin table-crud-page($mobile-breakpoint: 900px, $background: rgba(53, 109, 255, 0.08)) {
+  @include action-link-buttons($background);
+  @include toolbar-responsive($mobile-breakpoint);
+}
+
+@mixin tree-table-crud-page($mobile-breakpoint: 900px, $gap: 12px, $tree-padding-top: 6px, $background: rgba(53, 109, 255, 0.08)) {
+  @include content-stack($gap);
+  @include dept-tree-panel($tree-padding-top);
+  @include table-crud-page($mobile-breakpoint, $background);
+}