EasyFlow-Tech-Dev/EasyFlow
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

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

- 固定 Chrome 90 构建目标并补充兼容依赖
This commit is contained in:
陈子默
2026-07-16 14:50:06 +08:00
parent 705e0faab6
commit 27e50a7624
34 changed files with 793 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;

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

@@ -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 {

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

@@ -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%,

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

@@ -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%,

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

@@ -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>

21
easyflow-ui-admin/app/src/views/ai/documentCollection/ChunkDocumentTable.vue
View File

@@ -357,11 +357,13 @@ const getChunkHeaderLabel = (row: any) => {
position: relative;
padding: 20px 20px 18px;
overflow: hidden;
background: var(--el-fill-color-blank);
background: linear-gradient(
135deg,
color-mix(in srgb, var(--el-color-primary-light-9) 80%, white) 0%,
var(--el-fill-color-blank) 38%
);
border: 1px solid var(--el-border-color-light);
border: 1px solid color-mix(in srgb, var(--el-border-color-light) 78%, white);
border-radius: 18px;
box-shadow: 0 18px 40px rgb(15 23 42 / 6%);
@@ -372,6 +374,7 @@ const getChunkHeaderLabel = (row: any) => {
inset: 0 auto 0 0;
width: 4px;
content: '';
background: var(--el-color-primary);
background: linear-gradient(
180deg,
var(--el-color-primary),
@@ -393,7 +396,9 @@ const getChunkHeaderLabel = (row: any) => {
width: 34px;
height: 34px;
color: var(--el-color-primary);
background: var(--el-color-primary-light-9);
background: color-mix(in srgb, var(--el-color-primary-light-9) 66%, white);
border: 1px solid var(--el-color-primary-light-8);
border: 1px solid
color-mix(in srgb, var(--el-color-primary-light-8) 72%, white);
box-shadow: 0 8px 18px rgb(37 99 235 / 10%);
@@ -402,6 +407,7 @@ const getChunkHeaderLabel = (row: any) => {
.chunk-card__action--ghost {
color: var(--el-text-color-secondary);
background: rgb(255 255 255 / 86%);
border-color: var(--el-border-color-light);
border-color: color-mix(in srgb, var(--el-border-color-light) 86%, white);
box-shadow: none;
}
@@ -429,6 +435,7 @@ const getChunkHeaderLabel = (row: any) => {
height: 8px;
border-radius: 999px;
background: var(--el-color-primary);
box-shadow: 0 0 0 4px var(--el-color-primary-light-9);
box-shadow: 0 0 0 4px
color-mix(in srgb, var(--el-color-primary-light-8) 50%, transparent);
}
@@ -594,4 +601,18 @@ const getChunkHeaderLabel = (row: any) => {
font-size: 12px;
}
}
@supports not (color: color-mix(in srgb, red, blue)) {
.chunk-card {
border-color: var(--el-border-color-light);
}
.chunk-card__action {
border-color: var(--el-color-primary-light-8);
}
.chunk-card__action--ghost {
border-color: var(--el-border-color-light);
}
}
</style>

8
easyflow-ui-admin/app/src/views/ai/documentCollection/SegmenterDoc.vue
View File

@@ -492,7 +492,9 @@ watch(
font-size: 13px;
line-height: 1.7;
color: var(--el-color-danger-dark-2);
background: var(--el-color-danger-light-9);
background: color-mix(in srgb, var(--el-color-danger-light-9) 88%, white);
border: 1px solid var(--el-color-danger-light-8);
border: 1px solid color-mix(in srgb, var(--el-color-danger) 14%, white);
border-radius: 16px;
}
@@ -554,4 +556,10 @@ watch(
min-height: auto;
}
}
@supports not (color: color-mix(in srgb, red, blue)) {
.workbench__error {
border-color: var(--el-color-danger-light-8);
}
}
</style>

1
easyflow-ui-admin/app/src/views/ai/documentCollection/SplitterDocPreview.vue
View File

@@ -297,6 +297,7 @@ const isActiveChunk = (chunk: ChunkItem) =>
padding: 15px 16px 14px;
cursor: pointer;
user-select: none;
background: var(--el-fill-color-blank);
background: color-mix(in srgb, var(--el-fill-color-blank) 92%, white);
border: 1px solid rgb(15 23 42 / 7%);
border-radius: 14px;