From 006370798b6cf6a4a5594fa4a0e80716f59a11b5 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Thu, 5 Jun 2025 21:18:36 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20tinymce+=E8=A1=A8=E5=8D=95=20?=
 =?UTF-8?q?=E6=A0=A1=E9=AA=8C=E5=A4=B1=E8=B4=A5=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/settings.json                         |  1 +
 .../src/components/tinymce/src/editor.vue     | 38 +++++++++++++++++--
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 61432be6..be085c18 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -241,6 +241,7 @@
     "napi",
     "nolebase",
     "rollup",
+    "tinymce",
     "vitest"
   ]
 }
diff --git a/apps/web-antd/src/components/tinymce/src/editor.vue b/apps/web-antd/src/components/tinymce/src/editor.vue
index 708a5416..a6f0be8a 100644
--- a/apps/web-antd/src/components/tinymce/src/editor.vue
+++ b/apps/web-antd/src/components/tinymce/src/editor.vue
@@ -202,10 +202,21 @@ const events = computed(() => {
 </template>
 
 <style lang="scss">
-/***
-由于modal/drawer的zIndex升级后为2000
-这里会造成遮挡 修改为更高的zIndex
-*/
+@mixin tinymce-valid-fail($color) {
+  .app-tinymce {
+    // 最外层的tinymce容器
+    .tox-tinymce {
+      border-color: $color;
+    }
+    // focus样式
+    .tox .tox-edit-area::before {
+      border-color: $color;
+      border-right: none;
+      border-left: none;
+    }
+  }
+}
+
 .tox.tox-silver-sink.tox-tinymce-aux {
   /** 该样式默认为1300的zIndex  */
   z-index: 2025;
@@ -218,5 +229,24 @@ const events = computed(() => {
   .tox-promotion {
     display: none;
   }
+
+  /** 保持focus时与primary色一致 */
+  .tox .tox-edit-area::before {
+    border-color: hsl(var(--primary));
+  }
+}
+
+// antd原生表单 校验失败样式
+.ant-form-item:has(.ant-form-item-explain-error) {
+  $error-color: #ff3860;
+
+  @include tinymce-valid-fail($error-color);
+}
+
+// useVbenForm 校验失败样式
+.form-valid-error {
+  $error-color: hsl(var(--destructive));
+
+  @include tinymce-valid-fail($error-color);
 }
 </style>