style(AiRichTextEditor): 更新编辑器样式以匹配设计规范

董国庆

2026-04-29 ef8c64c116073d6330c90545934e2004797b8136

style(AiRichTextEditor): 更新编辑器样式以匹配设计规范

- 定义CSS自定义属性统一管理主题颜色
- 调整容器边框、圆角和溢出处理
- 优化头部样式，移除多余边框并更新图标颜色
- 设置内容区域内边距和文本颜色
- 统一空状态占位符颜色

 src/components/custom/Editor/AiRichTextEditor/index.vue

@@ -361,10 +361,22 @@
  width: 100%;
  border-radius: 4px;
  background: #fff;
  --aie-border-color: rgba(23, 31, 38, 0.15);
  --aie-text-color: #171f26;
  --aie-text-placeholder-color: rgba(23, 31, 38, 0.3);
  --aie-button-bg-color: #f4f6f8;
  --aie-button-border-color: #f4f6f8;
  --aie-button-hover-bg-color: #e9edf2;
  --aie-button-hover-border-color: #e9edf2;
  --aie-menus-bg-color: #f4f6f8;
  --aie-menus-text-color: #74797d;
  --aie-menus-svg-color: #74797d;
  --aie-menus-divider-color: rgba(23, 31, 38, 0.1);
}

.ai-editor-host {
  width: 100%;
  min-height: v-bind(height);
}

:deep(aie-footer) {
@@ -373,9 +385,39 @@

:deep(.aie-container) {
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(23, 31, 38, 0.15);
  box-sizing: border-box;
}

:deep(.aie-container aie-header) {
  background: #f4f6f8;
  border-bottom: 1px solid rgba(23, 31, 38, 0.15);
}

:deep(.aie-container aie-header > div) {
  border-bottom: none !important;
}

:deep(.aie-container aie-header .aie-menu-item) {
  color: #74797d;
}

:deep(.aie-container aie-header .aie-menu-item svg) {
  fill: #74797d;
}

:deep(.aie-main) {
  min-height: v-bind(height);
}

:deep(.aie-content) {
  padding: 12px;
  color: #171f26;
  box-sizing: border-box;
}

:deep(.aie-content p.is-editor-empty:first-child:before) {
  color: rgba(23, 31, 38, 0.3) !important;
}
</style>