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

src/views/system/config/index.vue

@@ -265,23 +265,7 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.page-shell {
-  display: flex;
-  flex-direction: column;
-}
+@use '@/assets/styles/components/page-shell' as pageShell;
 
-.data-table {
-  :deep(.el-button.is-link) {
-    width: 32px;
-    height: 32px;
-    border-radius: 10px;
-    background: rgba(53, 109, 255, 0.08);
-  }
-}
-
-@media (max-width: 900px) {
-  .toolbar-shell {
-    align-items: flex-start;
-  }
-}
+@include pageShell.table-crud-page;
 </style>

src/views/system/dept/index.vue

@@ -330,23 +330,7 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.page-shell {
-  display: flex;
-  flex-direction: column;
-}
+@use '@/assets/styles/components/page-shell' as pageShell;
 
-.data-table {
-  :deep(.el-button.is-link) {
-    width: 32px;
-    height: 32px;
-    border-radius: 10px;
-    background: rgba(53, 109, 255, 0.08);
-  }
-}
-
-@media (max-width: 900px) {
-  .toolbar-shell {
-    align-items: flex-start;
-  }
-}
+@include pageShell.table-crud-page;
 </style>

src/views/system/menu/index.vue

@@ -562,10 +562,9 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.page-shell {
-  display: flex;
-  flex-direction: column;
-}
+@use '@/assets/styles/components/page-shell' as pageShell;
+
+@include pageShell.table-crud-page;
 
 .data-table {
   .menu-name-cell {
@@ -578,19 +577,6 @@ onMounted(() => {
   .menu-name-text {
     min-width: 0;
   }
-
-  :deep(.el-button.is-link) {
-    width: 32px;
-    height: 32px;
-    border-radius: 10px;
-    background: rgba(53, 109, 255, 0.08);
-  }
-}
-
-@media (max-width: 900px) {
-  .toolbar-shell {
-    align-items: flex-start;
-  }
 }
 </style>
 

src/views/system/notice/index.vue

@@ -253,23 +253,7 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.page-shell {
-  display: flex;
-  flex-direction: column;
-}
+@use '@/assets/styles/components/page-shell' as pageShell;
 
-.data-table {
-  :deep(.el-button.is-link) {
-    width: 32px;
-    height: 32px;
-    border-radius: 10px;
-    background: rgba(53, 109, 255, 0.08);
-  }
-}
-
-@media (max-width: 900px) {
-  .toolbar-shell {
-    align-items: flex-start;
-  }
-}
+@include pageShell.table-crud-page;
 </style>

src/views/system/oss/config.vue

@@ -349,23 +349,7 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.page-shell {
-  display: flex;
-  flex-direction: column;
-}
+@use '@/assets/styles/components/page-shell' as pageShell;
 
-.data-table {
-  :deep(.el-button.is-link) {
-    width: 32px;
-    height: 32px;
-    border-radius: 10px;
-    background: rgba(53, 109, 255, 0.08);
-  }
-}
-
-@media (max-width: 900px) {
-  .toolbar-shell {
-    align-items: flex-start;
-  }
-}
+@include pageShell.table-crud-page;
 </style>

src/views/system/oss/index.vue

@@ -336,23 +336,7 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.page-shell {
-  display: flex;
-  flex-direction: column;
-}
+@use '@/assets/styles/components/page-shell' as pageShell;
 
-.data-table {
-  :deep(.el-button.is-link) {
-    width: 32px;
-    height: 32px;
-    border-radius: 10px;
-    background: rgba(53, 109, 255, 0.08);
-  }
-}
-
-@media (max-width: 900px) {
-  .toolbar-shell {
-    align-items: flex-start;
-  }
-}
+@include pageShell.table-crud-page;
 </style>

src/views/system/post/index.vue

@@ -374,33 +374,7 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.page-shell {
-  display: flex;
-  flex-direction: column;
-}
+@use '@/assets/styles/components/page-shell' as pageShell;
 
-.content-main {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.dept-tree {
-  padding-top: 6px;
-}
-
-.data-table {
-  :deep(.el-button.is-link) {
-    width: 32px;
-    height: 32px;
-    border-radius: 10px;
-    background: rgba(53, 109, 255, 0.08);
-  }
-}
-
-@media (max-width: 900px) {
-  .toolbar-shell {
-    align-items: flex-start;
-  }
-}
+@include pageShell.tree-table-crud-page;
 </style>

src/views/system/role/index.vue

@@ -508,23 +508,7 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.page-shell {
-  display: flex;
-  flex-direction: column;
-}
+@use '@/assets/styles/components/page-shell' as pageShell;
 
-.data-table {
-  :deep(.el-button.is-link) {
-    width: 32px;
-    height: 32px;
-    border-radius: 10px;
-    background: rgba(53, 109, 255, 0.08);
-  }
-}
-
-@media (max-width: 900px) {
-  .toolbar-shell {
-    align-items: flex-start;
-  }
-}
+@include pageShell.table-crud-page;
 </style>

src/views/system/role/selectUser.vue

@@ -143,15 +143,12 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-.select-user-shell {
-  gap: 12px;
-}
+@use '@/assets/styles/components/selector-dialog' as selectorDialog;
+
+@include selectorDialog.shell-gap('.select-user-shell');
+@include selectorDialog.dialog-body-padding('select-user-dialog');
 
 .select-user-card :deep(.el-card__body) {
   padding: 14px 16px !important;
 }
-
-.select-user-dialog :deep(.el-dialog__body) {
-  padding-top: 12px;
-}
 </style>

src/views/system/user/index.vue

@@ -703,33 +703,7 @@ async function handleDeptChange(value: number | string) {
 </script>
 
 <style lang="scss" scoped>
-.page-shell {
-  display: flex;
-  flex-direction: column;
-}
+@use '@/assets/styles/components/page-shell' as pageShell;
 
-.content-main {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.dept-tree {
-  padding-top: 6px;
-}
-
-.data-table {
-  :deep(.el-button.is-link) {
-    width: 32px;
-    height: 32px;
-    border-radius: 10px;
-    background: rgba(53, 109, 255, 0.08);
-  }
-}
-
-@media (max-width: 900px) {
-  .toolbar-shell {
-    align-items: flex-start;
-  }
-}
+@include pageShell.tree-table-crud-page;
 </style>