refactor(frontend): 重构前端样式体系，统一资源路径与代码规范

1. 重构SCSS样式结构，将原有分散的样式文件整合到custom目录下，统一使用@use替代@import 2. 删除冗余的全局样式文件，将样式逻辑内联到对应组件或集中到core目录 3. 新增DOMPurify依赖，对富文本内容添加XSS防护 4. 修复metrics端点暴露的兼容性问题，优化启动banner样式 5. 移除无用的权限校验代码，重构工作流组件路径与命名 6. 优化样式混合宏与响应式布局，修复部分组件样式冲突
2026-10-07 18:30:55 +00:00 · 2026-06-01 00:58:21 +08:00
parent c2135bb456
commit c0733d9861
50 changed files with 1880 additions and 1792 deletions
@@ -494,5 +494,119 @@ defineExpose({
 </script>

 <style lang="scss" scoped>
-@use "@styles/fa-table";
+.fa-table {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+
+  .fa-table__main {
+    flex: 1;
+    min-height: 0;
+    padding-top: 10px;
+
+    /* VueDraggable 透传高度，确保 ElTable height: 100% 能正确解析 */
+    > * {
+      height: 100%;
+    }
+  }
+
+  .el-table {
+    height: 100%;
+  }
+
+  :deep(.el-loading-mask) {
+    z-index: 100;
+    background-color: var(--default-box-color) !important;
+  }
+
+  /* Loading 过渡动画 - 消失时淡出 */
+  .loading-fade-leave-active {
+    transition: opacity 0.3s ease-out;
+  }
+
+  .loading-fade-leave-to {
+    opacity: 0;
+  }
+
+  /* 空状态垂直居中 */
+  &.is-empty {
+    :deep(.el-table__body-wrapper) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .pagination {
+    display: flex;
+    flex-shrink: 0;
+    padding-top: 13px;
+
+    :deep(.el-select) {
+      width: 102px !important;
+    }
+
+    /* 分页对齐方式 */
+    &.left {
+      justify-content: flex-start;
+    }
+
+    &.center {
+      justify-content: center;
+    }
+
+    &.right {
+      justify-content: flex-end;
+    }
+
+    /* 自定义分页组件样式 */
+    &.custom-pagination {
+      :deep(.el-pagination) {
+        .btn-prev,
+        .btn-next {
+          background-color: transparent;
+          border: 1px solid var(--fa-gray-300);
+          transition: border-color 0.15s;
+
+          &:hover:not(.is-disabled) {
+            color: var(--theme-color);
+            border-color: var(--theme-color);
+          }
+        }
+
+        li {
+          box-sizing: border-box;
+          font-weight: 400 !important;
+          background-color: transparent;
+          border: 1px solid var(--fa-gray-300);
+          transition: border-color 0.15s;
+
+          &.is-active {
+            font-weight: 400;
+            color: #fff;
+            background-color: var(--theme-color);
+            border: 1px solid var(--theme-color);
+          }
+
+          &:hover:not(.is-disabled) {
+            border-color: var(--theme-color);
+          }
+        }
+      }
+    }
+  }
+}
+
+/* 移动端分页 */
+@media (width <= 640px) {
+  :deep(.el-pagination) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px 0;
+    align-items: center;
+    justify-content: center;
+  }
+}
 </style>