fix: 兼容 Chrome 90 前端运行环境

- 为管理端与用户中心补齐旧浏览器运行时 API 和回归测试

- 增加现代 CSS 与选择器降级，保持现有界面效果

- 固定 Chrome 90 构建目标并补充兼容依赖

easyflow-ui-admin/app/src/views/ai/agents/components/AgentInspectorPanel.vue

@@ -181,6 +181,7 @@ const selectedToolOptions = computed(() => {
   width: min(420px, calc(100vw - 320px));
   min-height: 0;
   overflow: hidden;
+  background: var(--el-bg-color);
   background: color-mix(in srgb, var(--el-bg-color) 94%, transparent);
   border: 1px solid var(--el-border-color-lighter);
   border-radius: 8px;

easyflow-ui-admin/app/src/views/ai/agents/components/AgentWelcomeState.vue

@@ -2,6 +2,7 @@
 import { computed, ref, watch } from 'vue';
 
 import { ArrowRight } from '@element-plus/icons-vue';
+import { useResizeObserver } from '@vueuse/core';
 import { ElIcon } from 'element-plus';
 
 const props = defineProps<{
@@ -17,8 +18,17 @@ const emit = defineEmits<{
 }>();
 
 const avatarFailed = ref(false);
+const welcomeRef = ref<HTMLElement>();
+const legacyCompact = ref(false);
 const headingId = `agent-welcome-${Math.random().toString(36).slice(2, 9)}`;
 const initial = computed(() => [...props.agentName.trim()][0] || 'A');
+const needsContainerQueryFallback =
+  typeof CSS === 'undefined' || !CSS.supports('container-type', 'inline-size');
+
+useResizeObserver(welcomeRef, ([entry]) => {
+  if (!needsContainerQueryFallback || !entry) return;
+  legacyCompact.value = entry.contentRect.width <= 560;
+});
 
 watch(
   () => props.avatar,
@@ -29,7 +39,12 @@ watch(
 </script>
 
 <template>
-  <section class="agent-welcome" :aria-labelledby="headingId">
+  <section
+    ref="welcomeRef"
+    class="agent-welcome"
+    :class="{ 'is-legacy-compact': legacyCompact }"
+    :aria-labelledby="headingId"
+  >
     <div class="agent-welcome__content">
       <div class="agent-welcome__avatar" aria-hidden="true">
         <img
@@ -213,6 +228,15 @@ watch(
   }
 }
 
+.agent-welcome.is-legacy-compact .agent-welcome__suggestions-grid {
+  grid-template-columns: 1fr;
+  gap: var(--space-2);
+}
+
+.agent-welcome.is-legacy-compact .agent-welcome__message {
+  font-size: 16px;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .agent-welcome__question,
   .agent-welcome__question .el-icon {

easyflow-ui-admin/app/src/views/ai/agents/components/agent-studio/AgentStudioCanvas.vue

@@ -378,6 +378,7 @@ onBeforeUnmount(() => {
 }
 
 .agent-studio-canvas :deep(.tf-flow-line-path) {
+  stroke: var(--el-border-color);
   stroke: color-mix(
     in srgb,
     var(--el-color-primary) 30%,

easyflow-ui-admin/app/src/views/ai/agents/components/agent-studio/AgentStudioEdgeLayer.vue

@@ -31,6 +31,7 @@ defineProps<{
 
 .agent-studio-edge-layer__path {
   fill: none;
+  stroke: var(--el-border-color);
   stroke: color-mix(
     in srgb,
     var(--el-color-primary) 30%,

easyflow-ui-admin/app/src/views/ai/agents/components/agent-studio/AgentStudioNode.vue

@@ -60,6 +60,7 @@ const iconComponent = computed(() => {
   color: var(--el-text-color-primary);
   text-align: left;
   cursor: pointer;
+  background: var(--el-bg-color);
   background: color-mix(in srgb, var(--el-bg-color) 96%, transparent);
   border: 1px solid var(--el-border-color-lighter);
   border-radius: 16px;
@@ -73,6 +74,7 @@ const iconComponent = computed(() => {
 
 .agent-studio-node:hover {
   background: var(--el-bg-color);
+  border-color: var(--el-color-primary-light-7);
   border-color: color-mix(
     in srgb,
     var(--el-color-primary) 26%,
@@ -88,11 +90,13 @@ const iconComponent = computed(() => {
 }
 
 .agent-studio-node.is-selected {
+  background: var(--el-color-primary-light-9);
   background: color-mix(
     in srgb,
     var(--el-color-primary-light-9) 54%,
     var(--el-bg-color)
   );
+  border-color: var(--el-color-primary-light-5);
   border-color: color-mix(
     in srgb,
     var(--el-color-primary) 42%,
@@ -132,6 +136,7 @@ const iconComponent = computed(() => {
   width: 50px;
   height: 50px;
   font-size: 28px;
+  background: var(--el-color-primary-light-8);
   background: color-mix(
     in srgb,
     var(--el-color-primary-light-8) 74%,
@@ -174,6 +179,7 @@ const iconComponent = computed(() => {
   font-size: 11px;
   line-height: 16px;
   color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
   background: color-mix(
     in srgb,
     var(--el-color-primary-light-9) 74%,
@@ -193,4 +199,14 @@ const iconComponent = computed(() => {
   color: var(--el-text-color-regular);
   -webkit-box-orient: vertical;
 }
+
+@supports not (color: color-mix(in srgb, red, blue)) {
+  .agent-studio-node:hover {
+    border-color: var(--el-color-primary-light-7);
+  }
+
+  .agent-studio-node.is-selected {
+    border-color: var(--el-color-primary-light-5);
+  }
+}
 </style>