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

1.  重构SCSS样式结构，将原有分散的样式文件整合到custom目录下，统一使用@use替代@import
2.  删除冗余的全局样式文件，将样式逻辑内联到对应组件或集中到core目录
3.  新增DOMPurify依赖，对富文本内容添加XSS防护
4.  修复metrics端点暴露的兼容性问题，优化启动banner样式
5.  移除无用的权限校验代码，重构工作流组件路径与命名
6.  优化样式混合宏与响应式布局，修复部分组件样式冲突

frontend/web/src/styles/core/app.scss

@@ -302,6 +302,15 @@
   transform: none !important;
 }
 
+// 表格按钮悬浮效果
+.hover-btn {
+  &:hover {
+    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+    filter: brightness(1.1);
+    transform: translateY(-2px) scale(1.05);
+  }
+}
+
 // 去除移动端点击背景色
 @media screen and (width <= 1180px) {
   * {

frontend/web/src/styles/core/crud.scss

@@ -1,18 +0,0 @@
-// CRUD 页面通用样式
-// 从各 module_system 视图文件中提取的重复样式
-
-// FaForm 在 Dialog 中的布局优化：隐藏最后一列操作按钮、内容区域自适应宽度
-.crud-dialog-art-form {
-  :deep(.el-row > .el-col:last-child) {
-    display: none;
-  }
-
-  :deep(.el-form-item__content) {
-    max-width: 100%;
-  }
-}
-
-// 表格操作列按钮垂直居中
-:deep(.inline-flex) {
-  vertical-align: middle;
-}

frontend/web/src/styles/core/el-light.scss

@@ -1,40 +0,0 @@
-// https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss
-// 自定义Element 亮色主题
-
-@forward "element-plus/theme-chalk/src/common/var.scss" with (
-  $colors: (
-    "white": #ffffff,
-    "black": #000000,
-    "primary": (
-      "base": #4080FF,
-    ),
-    "success": (
-      "base": #13deb9,
-    ),
-    "warning": (
-      "base": #ffae1f,
-    ),
-    "danger": (
-      "base": #ff4d4f,
-    ),
-    "error": (
-      "base": #fa896b,
-    ),
-    "info": (
-      "base": #909399,
-    ),
-  ),
-  $button: (
-    "hover-bg-color": var(--el-color-primary-light-9),
-    "hover-border-color": var(--el-color-primary),
-    "border-color": var(--el-color-primary),
-    "text-color": var(--el-color-primary),
-  ),
-  $messagebox: (
-    "border-radius": "12px",
-  ),
-  $popover: (
-    "padding": "14px",
-    "border-radius": "10px",
-  )
-);

frontend/web/src/styles/core/mixin.scss

@@ -55,7 +55,6 @@
   -o-animation: $animate;
   animation: $animate;
 
-  /* stylelint-disable-next-line at-rule-prelude-no-invalid */
   @keyframes #{$name} {
     from {
       @each $key, $value in $from {
@@ -69,6 +68,20 @@
       }
     }
   }
+
+  @keyframes #{$name} {
+    from {
+      @each $key, $value in $from {
+        $key: $value;
+      }
+    }
+
+    to {
+      @each $key, $value in $to {
+        $key: $value;
+      }
+    }
+  }
 }
 
 // 圆形盒子
@@ -83,13 +96,18 @@
 
 // placeholder
 @mixin placeholder($color: #bbb) {
+  // Firefox
   &::placeholder {
     color: $color;
     opacity: 1;
   }
 
-  // Safari and Chrome (legacy)
-  /* stylelint-disable-next-line selector-no-vendor-prefix */
+  // Internet Explorer 10+
+  &:-ms-input-placeholder {
+    color: $color;
+  }
+
+  // Safari and Chrome
   &::-webkit-input-placeholder {
     color: $color;
   }
@@ -99,6 +117,26 @@
   }
 }
 
+//背景透明，文字不透明。兼容IE8
+@mixin betterTransparentize($color, $alpha) {
+  $c: rgba($color, $alpha);
+  $ie_c: ie_hex_str($c);
+
+  zoom: 1;
+  background: rgba($color, 1);
+  background: $c;
+  background: transparent \9;
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_c}, endColorstr=#{$ie_c})";
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_c}, endColorstr=#{$ie_c});
+}
+
+//添加浏览器前缀
+@mixin browserPrefix($propertyName, $value) {
+  @each $prefix in -webkit-, -moz-, -ms-, -o-, "" {
+    #{$prefix}#{$propertyName}: $value;
+  }
+}
+
 // 边框
 @mixin border($color: red) {
   border: 1px solid $color;

frontend/web/src/styles/core/theme-animation.scss

@@ -6,6 +6,10 @@ $bg-animation-duration: 0.5s;
 html {
   --bg-animation-color: #{$bg-animation-color-light};
 
+  &.dark {
+    --bg-animation-color: #{$bg-animation-color-dark};
+  }
+
   // View transition styles
   &::view-transition-old(*) {
     animation: none;
@@ -24,8 +28,6 @@ html {
   }
 
   &.dark {
-    --bg-animation-color: #{$bg-animation-color-dark};
-
     &::view-transition-old(*) {
       animation: clip $bg-animation-duration ease-in reverse both;
     }

frontend/web/src/styles/core/variables.scss

@@ -0,0 +1,53 @@
+/**
+ * Element Plus 功能性颜色覆写 CSS 变量。
+ *
+ * 默认主色请与 src/config/setting.ts 中 themeColorPresets 首项保持一致。
+ *
+ * 注意：primary 颜色由运行时 setElementThemeColor() 动态写入，此处只覆写
+ * success / warning / danger / error / info 等编译期确定的功能性颜色。
+ * 这些变量无法通过 SCSS `@forward ... with()` 传递到 Element Plus 组件编译链，
+ * 因为 Dart Sass 模块隔离机制下 Element Plus 组件内部 `@use 'common/var'` 获得的是独立模块实例。
+ */
+
+@use "sass:map";
+@use "element-plus/theme-chalk/src/common/var.scss" as ep with (
+  $colors: (
+    "white": #ffffff,
+    "black": #000000,
+    "primary": (
+      "base": #4080ff,
+    ),
+    "success": (
+      "base": #13deb9,
+    ),
+    "warning": (
+      "base": #ffae1f,
+    ),
+    "danger": (
+      "base": #ff4d4f,
+    ),
+    "error": (
+      "base": #fa896b,
+    ),
+    "info": (
+      "base": #909399,
+    ),
+  )
+);
+
+:root {
+  @each $type in (success, warning, danger, error, info) {
+    --el-color-#{$type}: #{map.get(ep.$colors, $type, "base")} !important;
+
+    @each $i in (3, 5, 7, 8, 9) {
+      --el-color-#{$type}-light-#{$i}: #{map.get(ep.$colors, $type, "light-#{$i}")} !important;
+    }
+
+    --el-color-#{$type}-dark-2: #{map.get(ep.$colors, $type, "dark-2")} !important;
+  }
+}
+
+/** 暗黑主题 */
+html.dark {
+  --el-color-primary: #{map.get(ep.$colors, "primary", "base")} !important;
+}