From c1020dc5fff9ae823dc60beb199074c66deac9c0 Mon Sep 17 00:00:00 2001
From: caiyuchao <caiyuchao@agrandtech.com>
Date: Fri, 19 Sep 2025 17:18:14 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E7=94=A8shadow=20dom=E9=9A=94?=
 =?UTF-8?q?=E7=A6=BBhtml=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/shadow-container/index.ts  |  1 +
 .../shadow-container/shadow-container.vue     | 47 +++++++++++++++++++
 .../license/project/comment/child-comment.vue | 14 +++++-
 .../src/views/report/progress/data.ts         |  5 +-
 .../views/report/progress/modules/project.vue | 13 ++++-
 5 files changed, 75 insertions(+), 5 deletions(-)
 create mode 100644 apps/web-antd/src/components/shadow-container/index.ts
 create mode 100644 apps/web-antd/src/components/shadow-container/shadow-container.vue

diff --git a/apps/web-antd/src/components/shadow-container/index.ts b/apps/web-antd/src/components/shadow-container/index.ts
new file mode 100644
index 0000000..ad52b46
--- /dev/null
+++ b/apps/web-antd/src/components/shadow-container/index.ts
@@ -0,0 +1 @@
+export { default as ShadowContainer } from './shadow-container.vue';
diff --git a/apps/web-antd/src/components/shadow-container/shadow-container.vue b/apps/web-antd/src/components/shadow-container/shadow-container.vue
new file mode 100644
index 0000000..b34f410
--- /dev/null
+++ b/apps/web-antd/src/components/shadow-container/shadow-container.vue
@@ -0,0 +1,47 @@
+<script setup>
+import { onMounted, ref, watch } from 'vue';
+
+const props = defineProps({
+  content: {
+    type: String,
+    default: '',
+  },
+  // 可以传递样式字符串来自定义内部样式
+  styles: {
+    type: String,
+    default: '',
+  },
+});
+
+const shadowHost = ref(null);
+
+const initShadow = () => {
+  if (shadowHost.value && !shadowHost.value.shadowRoot) {
+    const shadowRoot = shadowHost.value.attachShadow({ mode: 'open' });
+
+    shadowRoot.innerHTML = `
+      <style>
+        :host {
+          all: initial;
+          display: block;
+          contain: content;
+          
+          ${props.styles}
+        }
+
+      </style>
+      <div class="shadow-content">${props.content}</div>
+    `;
+  } else if (shadowHost.value && shadowHost.value.shadowRoot) {
+    shadowHost.value.shadowRoot.querySelector('.shadow-content').innerHTML =
+      props.content;
+  }
+};
+
+onMounted(initShadow);
+watch(() => props.content, initShadow);
+</script>
+
+<template>
+  <div ref="shadowHost"></div>
+</template>
diff --git a/apps/web-antd/src/views/license/project/comment/child-comment.vue b/apps/web-antd/src/views/license/project/comment/child-comment.vue
index b4391e8..3883c84 100644
--- a/apps/web-antd/src/views/license/project/comment/child-comment.vue
+++ b/apps/web-antd/src/views/license/project/comment/child-comment.vue
@@ -10,6 +10,7 @@ import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 
 import { deleteComment } from '#/api/license/comment';
+import { ShadowContainer } from '#/components/shadow-container';
 import { $t } from '#/locales';
 
 import CreateComment from './create-comment.vue';
@@ -104,7 +105,11 @@ const formatContent = computed(() => {
     <template #content>
       <div>
         <!-- eslint-disable-next-line vue/no-v-html -->
-        <span class="rich-text-comment-content" v-html="formatContent"></span>
+        <!-- <span class="rich-text-comment-content" v-html="formatContent"></span> -->
+        <ShadowContainer
+          :content="formatContent"
+          styles="font-family: Helvetica,Arial,sans-serif; font-size:16px;"
+        />
       </div>
     </template>
     <template #actions>
@@ -194,6 +199,11 @@ const formatContent = computed(() => {
 </template>
 <style>
 :where(.css-dev-only-do-not-override-14589v).ant-comment .ant-comment-actions {
-  margin-top: 16px;
+  margin-top: 0;
+}
+
+:where(.css-dev-only-do-not-override-14589v).ant-comment
+  .ant-comment-content-author {
+  margin-bottom: -2px;
 }
 </style>
diff --git a/apps/web-antd/src/views/report/progress/data.ts b/apps/web-antd/src/views/report/progress/data.ts
index ad65f1c..a12cd19 100644
--- a/apps/web-antd/src/views/report/progress/data.ts
+++ b/apps/web-antd/src/views/report/progress/data.ts
@@ -149,12 +149,13 @@ export function useProjectGridColumns(): VxeTableGridOptions<ProgressApi.Progres
     {
       field: 'content',
       title: '进展记录',
-      type: 'html',
-      className: 'rich-text-comment-content-table',
+      // type: 'html',
+      // className: 'rich-text-comment-content-table',
       showOverflow: false,
       align: 'left',
       // headerAlign: 'center',
       minWidth: 600,
+      slots: { default: 'contentDefault' },
     },
     {
       field: 'updateTime',
diff --git a/apps/web-antd/src/views/report/progress/modules/project.vue b/apps/web-antd/src/views/report/progress/modules/project.vue
index 4d973d2..cd19c86 100644
--- a/apps/web-antd/src/views/report/progress/modules/project.vue
+++ b/apps/web-antd/src/views/report/progress/modules/project.vue
@@ -7,6 +7,7 @@ import dayjs from 'dayjs';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { exportProject, getProgressByProjectPage } from '#/api/report/progress';
+import { ShadowContainer } from '#/components/shadow-container';
 
 import { useProjectGridColumns, useProjectGridFormSchema } from '../data';
 
@@ -149,5 +150,15 @@ const [Grid, gridApi] = useVbenVxeGrid({
 </script>
 
 <template>
-  <Grid table-title="项目进展" />
+  <Grid table-title="项目进展">
+    <template #contentDefault="{ row }">
+      <!-- <div v-html="row.content" style="white-space: pre-wrap"></div> -->
+      <ShadowContainer
+        :content="row.content"
+        styles="font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue',
+    arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';"
+      />
+    </template>
+  </Grid>
 </template>