From 9755463cdcabb96c93a4c33ca6b89fbd7011d1a5 Mon Sep 17 00:00:00 2001
From: lq <workerqi@163.com>
Date: Sat, 12 Apr 2025 17:03:31 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AE=8C=E6=88=90:=20=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/package.json                    |   1 +
 apps/web-antd/src/layouts/basic.vue           |   4 +-
 apps/web-antd/src/views/notice/api/index.ts   |  15 +
 .../src/views/notice/compoents/detail-o.vue   | 311 +++++++
 .../src/views/notice/compoents/detail.vue     | 264 ++++--
 .../src/views/notice/compoents/send-o.vue     | 344 ++++++++
 .../src/views/notice/compoents/send.vue       | 456 ++++++++++
 apps/web-antd/src/views/notice/index.vue      | 107 ++-
 package.json                                  |   9 +-
 pnpm-lock.yaml                                | 802 ++++++++++++++++++
 10 files changed, 2177 insertions(+), 136 deletions(-)
 create mode 100644 apps/web-antd/src/views/notice/compoents/detail-o.vue
 create mode 100644 apps/web-antd/src/views/notice/compoents/send-o.vue
 create mode 100644 apps/web-antd/src/views/notice/compoents/send.vue

diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index 981d0038..68aaacd5 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -44,6 +44,7 @@
     "@vueuse/core": "catalog:",
     "ant-design-vue": "catalog:",
     "dayjs": "catalog:",
+    "markdown-it": "^14.1.0",
     "pinia": "catalog:",
     "vue": "catalog:",
     "vue-router": "catalog:"
diff --git a/apps/web-antd/src/layouts/basic.vue b/apps/web-antd/src/layouts/basic.vue
index d2837e24..06ffb8a3 100644
--- a/apps/web-antd/src/layouts/basic.vue
+++ b/apps/web-antd/src/layouts/basic.vue
@@ -91,11 +91,11 @@ const getNoticeList = async () => {
         color: typeColors[item.type],
         isRead: item.status
       }));
+    } else {
+      notifications.value = [];
     }
-
   } catch (error) {
     console.error('获取消息列表失败:', error);
-  } finally {
   }
 };
 getNoticeList();
diff --git a/apps/web-antd/src/views/notice/api/index.ts b/apps/web-antd/src/views/notice/api/index.ts
index b1b8229c..bf746698 100644
--- a/apps/web-antd/src/views/notice/api/index.ts
+++ b/apps/web-antd/src/views/notice/api/index.ts
@@ -8,6 +8,12 @@ const prefix = 'notice/';
 export async function getNoticeListApi(data: any) {
   return requestClient.get<any>(`${prefix}list`, { params: data });
 }
+/**
+ * 获取接受消息用户下拉列表
+ */
+export async function getUserOptionApi() {
+  return requestClient.get<any>(`${prefix}user-option`);
+}
 /**
  * 查询通知详情
  * @param id
@@ -46,3 +52,12 @@ export async function readAllApi() {
   );
   return result;
 }
+
+
+/**
+ * 群发消息
+ * @param data
+ */
+export async function sendNoticeApi(data: any) {
+  return requestClient.post<any>(`${prefix}send`, data);
+}
diff --git a/apps/web-antd/src/views/notice/compoents/detail-o.vue b/apps/web-antd/src/views/notice/compoents/detail-o.vue
new file mode 100644
index 00000000..fda129be
--- /dev/null
+++ b/apps/web-antd/src/views/notice/compoents/detail-o.vue
@@ -0,0 +1,311 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+
+import {Button} from 'ant-design-vue'
+
+import {
+  ArrowLeft,
+  Bell,
+  CalendarClock,
+  Clock,
+  Megaphone,
+  User,
+} from 'lucide-vue-next';
+
+import { formatTimeToRelative } from '#/util/tool';
+import { getNoticeDetailApi } from '#/views/notice/api';
+
+const router = useRouter();
+const route = useRoute();
+const noticeId = ref(route.params.id);
+
+const notice = ref(null);
+const loading = ref(true);
+const error = ref(null);
+
+const { setTabTitle } = useTabs();
+
+// 消息类型定义
+const messageTypes = [
+  {
+    id: 0,
+    name: '系统公告',
+    icon: Megaphone,
+    color: 'text-sky-500',
+    darkColor: 'dark:text-sky-400',
+    bgColor: 'bg-sky-50',
+    darkBgColor: 'dark:bg-sky-900/30',
+    borderColor: 'border-sky-200',
+    darkBorderColor: 'dark:border-sky-800',
+  },
+  {
+    id: 1,
+    name: '系统通知',
+    icon: Bell,
+    color: 'text-amber-500',
+    darkColor: 'dark:text-amber-400',
+    bgColor: 'bg-amber-50',
+    darkBgColor: 'dark:bg-amber-900/30',
+    borderColor: 'border-amber-200',
+    darkBorderColor: 'dark:border-amber-800',
+  },
+  {
+    id: 2,
+    name: '周报提醒',
+    icon: CalendarClock,
+    color: 'text-emerald-500',
+    darkColor: 'dark:text-emerald-400',
+    bgColor: 'bg-emerald-50',
+    darkBgColor: 'dark:bg-emerald-900/30',
+    borderColor: 'border-emerald-200',
+    darkBorderColor: 'dark:border-emerald-800',
+  },
+];
+
+// 获取通知详情
+const getNoticeDetail = async () => {
+  loading.value = true;
+  error.value = null;
+
+  try {
+    const res = await getNoticeDetailApi(noticeId.value);
+    notice.value = res;
+    setTabTitle(`通知详情-【${res.id}】`);
+    loading.value = false;
+  } catch (error_) {
+    console.error('获取通知详情失败:', error_);
+    error.value = '获取通知详情失败，请稍后重试';
+    loading.value = false;
+  }
+};
+
+// 返回列表
+const goBack = () => {
+  router.push('/notice');
+};
+
+// 获取类型信息
+const getTypeInfo = (typeId) => {
+  return messageTypes.find((t) => t.id === typeId) || messageTypes[0];
+};
+
+// 格式化内容，将换行符转换为<br>
+const formatContent = (content) => {
+  return content ? content.replaceAll('\n', '<br>') : '';
+};
+
+onMounted(() => {
+  getNoticeDetail();
+});
+
+const showUnreadList = () => {
+  alert('未实现')
+}
+</script>
+
+<template>
+  <Page>
+    <template #title>
+      <div class="flex items-center gap-2">
+        <button
+          class="flex h-8 w-8 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
+          @click="goBack"
+        >
+          <ArrowLeft class="h-5 w-5" />
+        </button>
+        <h1 class="text-xl font-semibold text-gray-900 dark:text-gray-100">
+          通知详情
+        </h1>
+      </div>
+    </template>
+
+    <div class="mx-auto max-w-3xl">
+      <!-- 加载状态 -->
+      <div v-if="loading" class="flex justify-center py-20">
+        <div
+          class="h-10 w-10 animate-spin rounded-full border-4 border-gray-200 border-t-sky-500 dark:border-gray-700 dark:border-t-sky-400"
+        ></div>
+      </div>
+
+      <!-- 错误状态 -->
+      <div
+        v-else-if="error"
+        class="rounded-lg border border-red-200 bg-red-50 p-4 text-center text-red-600 transition-colors dark:border-red-800 dark:bg-red-900/20 dark:text-red-400"
+      >
+        {{ error }}
+        <button
+          class="mt-2 rounded-md bg-red-100 px-3 py-1 text-sm font-medium text-red-700 transition-colors hover:bg-red-200 dark:bg-red-900/30 dark:text-red-300 dark:hover:bg-red-900/50"
+          @click="getNoticeDetail"
+        >
+          重试
+        </button>
+      </div>
+
+      <!-- 通知详情 -->
+      <div v-else-if="notice" class="space-y-6">
+        <!-- 标题和类型 -->
+        <div
+          class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-colors dark:border-gray-700 dark:bg-gray-800"
+        >
+          <div class="mb-4 flex items-start justify-between">
+            <h2
+              class="text-xl font-bold text-gray-900 transition-colors dark:text-gray-100"
+            >
+              {{ notice.title }}
+            </h2>
+            <div
+              :class="[
+                getTypeInfo(notice.type).bgColor,
+                getTypeInfo(notice.type).darkBgColor,
+              ]"
+              class="flex items-center gap-1.5 rounded-full px-3 py-1 transition-colors"
+            >
+              <component
+                :is="getTypeInfo(notice.type).icon"
+                :class="[
+                  getTypeInfo(notice.type).color,
+                  getTypeInfo(notice.type).darkColor,
+                ]"
+                class="h-4 w-4"
+              />
+              <span
+                :class="[
+                  getTypeInfo(notice.type).color,
+                  getTypeInfo(notice.type).darkColor,
+                ]"
+                class="text-xs font-medium"
+              >
+                {{ getTypeInfo(notice.type).name }}
+              </span>
+            </div>
+          </div>
+
+          <!-- 元信息 -->
+          <div
+            class="mb-6 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-gray-500 transition-colors dark:text-gray-400"
+          >
+            <div class="flex items-center gap-1.5">
+              来自:
+              <User class="h-4 w-4" />
+              <span>萧康云医</span>
+            </div>
+
+            <div class="flex items-center gap-1.5">
+              收件人:
+              <User class="h-4 w-4" />
+              <span>{{ notice.admin?.nick_name || '系统' }}</span>
+            </div>
+          </div>
+
+          <div
+            class="mb-6 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-gray-500 transition-colors dark:text-gray-400"
+          >
+            <div v-html="formatContent(notice.detail)"></div>
+            <div class="flex items-center gap-1.5" style="margin-left: auto">
+              <Clock class="h-4 w-4" />
+              <span>{{ notice.created_at }}({{
+                  formatTimeToRelative(notice.created_at)
+                }})</span>
+            </div>
+          </div>
+
+          <!-- 分隔线 -->
+          <div
+            class="mb-6 h-px w-full bg-gray-100 transition-colors dark:bg-gray-700"
+          ></div>
+
+          <!-- 内容 -->
+          <div
+            class="rounded-lg bg-gray-50 p-4 transition-colors dark:bg-gray-700"
+          >
+            <div
+              v-if="notice.edit_type === 0"
+              class="prose prose-sm dark:prose-invert max-w-none text-gray-700 transition-colors dark:text-gray-300"
+              v-html="formatContent(notice.content)"
+            ></div>
+          </div>
+        </div>
+
+        <!-- 操作按钮 -->
+        <div class="flex justify-between">
+          <button
+            class="flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+            @click="goBack"
+          >
+            <ArrowLeft class="h-4 w-4" />
+            返回列表
+          </button>
+
+          <div class="flex gap-2">
+            <!-- 这里可以添加其他操作按钮，如删除、转发等 -->
+
+            <button
+              v-if="notice.is_my === 1"
+              class="flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+              @click="showUnreadList"
+            >
+              {{
+                notice.is_all_read === 1
+                  ? '全部已读'
+                  : `有 ${notice.unread_count} 人未读`
+              }}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 通知不存在 -->
+      <div
+        v-else
+        class="rounded-lg border border-gray-200 bg-white p-8 text-center shadow-sm transition-colors dark:border-gray-700 dark:bg-gray-800"
+      >
+        <Bell class="mx-auto mb-4 h-12 w-12 text-gray-300 dark:text-gray-600" />
+        <h3
+          class="mb-2 text-lg font-medium text-gray-900 transition-colors dark:text-gray-100"
+        >
+          通知不存在
+        </h3>
+        <p class="mb-4 text-gray-500 transition-colors dark:text-gray-400">
+          该通知可能已被删除或您没有权限查看
+        </p>
+        <button
+          class="rounded-md bg-sky-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-sky-600 dark:bg-sky-600 dark:hover:bg-sky-500"
+          @click="goBack"
+        >
+          返回通知列表
+        </button>
+      </div>
+    </div>
+  </Page>
+</template>
+
+<style scoped>
+/* 平滑过渡效果 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* 确保内容中的换行正确显示 */
+:deep(.prose) {
+  white-space: pre-line;
+}
+
+/* 暗黑模式特有样式 */
+.dark .bg-gray-750 {
+  background-color: #1e293b;
+}
+
+.dark .bg-gray-650 {
+  background-color: #334155;
+}
+</style>
diff --git a/apps/web-antd/src/views/notice/compoents/detail.vue b/apps/web-antd/src/views/notice/compoents/detail.vue
index 8e33d12b..6878884c 100644
--- a/apps/web-antd/src/views/notice/compoents/detail.vue
+++ b/apps/web-antd/src/views/notice/compoents/detail.vue
@@ -1,108 +1,128 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue"
-import { useRouter } from "vue-router"
-import { useRoute } from "vue-router"
-import { Page } from "@vben/common-ui"
-import { ArrowLeft, Bell, CalendarClock, Clock, Megaphone, User } from "lucide-vue-next"
-import { formatTimeToRelative } from "#/util/tool"
-import { getNoticeDetailApi } from "#/views/notice/api"
-import { useTabs } from "@vben/hooks"
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
-const router = useRouter()
-const route = useRoute()
-const noticeId = ref(route.params.id)
+import { Page } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
 
-const notice = ref(null)
-const loading = ref(true)
-const error = ref(null)
+import {Button} from 'ant-design-vue'
 
-const { setTabTitle } = useTabs()
+import {
+  ArrowLeft,
+  Bell,
+  CalendarClock,
+  Clock,
+  Megaphone,
+  User,
+} from 'lucide-vue-next';
+
+import { formatTimeToRelative } from '#/util/tool';
+import { getNoticeDetailApi } from '#/views/notice/api';
+
+// 新增 Markdown 解析相关依赖
+// eslint-disable-next-line n/no-extraneous-import
+import { marked } from 'marked';
+// eslint-disable-next-line n/no-extraneous-import
+import DOMPurify from 'dompurify';
+
+const router = useRouter();
+const route = useRoute();
+const noticeId = ref(route.params.id);
+
+const notice = ref(null);
+const loading = ref(true);
+const error = ref(null);
+
+const { setTabTitle } = useTabs();
 
 // 消息类型定义
 const messageTypes = [
   {
     id: 0,
-    name: "系统公告",
+    name: '系统公告',
     icon: Megaphone,
-    color: "text-sky-500",
-    darkColor: "dark:text-sky-400",
-    bgColor: "bg-sky-50",
-    darkBgColor: "dark:bg-sky-900/30",
-    borderColor: "border-sky-200",
-    darkBorderColor: "dark:border-sky-800",
+    color: 'text-sky-500',
+    darkColor: 'dark:text-sky-400',
+    bgColor: 'bg-sky-50',
+    darkBgColor: 'dark:bg-sky-900/30',
+    borderColor: 'border-sky-200',
+    darkBorderColor: 'dark:border-sky-800',
   },
   {
     id: 1,
-    name: "系统通知",
+    name: '系统通知',
     icon: Bell,
-    color: "text-amber-500",
-    darkColor: "dark:text-amber-400",
-    bgColor: "bg-amber-50",
-    darkBgColor: "dark:bg-amber-900/30",
-    borderColor: "border-amber-200",
-    darkBorderColor: "dark:border-amber-800",
+    color: 'text-amber-500',
+    darkColor: 'dark:text-amber-400',
+    bgColor: 'bg-amber-50',
+    darkBgColor: 'dark:bg-amber-900/30',
+    borderColor: 'border-amber-200',
+    darkBorderColor: 'dark:border-amber-800',
   },
   {
     id: 2,
-    name: "周报提醒",
+    name: '周报提醒',
     icon: CalendarClock,
-    color: "text-emerald-500",
-    darkColor: "dark:text-emerald-400",
-    bgColor: "bg-emerald-50",
-    darkBgColor: "dark:bg-emerald-900/30",
-    borderColor: "border-emerald-200",
-    darkBorderColor: "dark:border-emerald-800",
+    color: 'text-emerald-500',
+    darkColor: 'dark:text-emerald-400',
+    bgColor: 'bg-emerald-50',
+    darkBgColor: 'dark:bg-emerald-900/30',
+    borderColor: 'border-emerald-200',
+    darkBorderColor: 'dark:border-emerald-800',
   },
-]
+];
 
 // 获取通知详情
 const getNoticeDetail = async () => {
-  loading.value = true
-  error.value = null
+  loading.value = true;
+  error.value = null;
 
   try {
-    const res = await getNoticeDetailApi(noticeId.value)
-    notice.value = res
-    setTabTitle(`通知详情-【${res.id}】`)
-    loading.value = false
-  } catch (err) {
-    console.error("获取通知详情失败:", err)
-    error.value = "获取通知详情失败，请稍后重试"
-    loading.value = false
+    const res = await getNoticeDetailApi(noticeId.value);
+    notice.value = res;
+    setTabTitle(`通知详情-【${res.id}】`);
+    loading.value = false;
+  } catch (error_) {
+    console.error('获取通知详情失败:', error_);
+    error.value = '获取通知详情失败，请稍后重试';
+    loading.value = false;
   }
-}
-
-// 标记通知为已读
-const markAsRead = async () => {
-  try {
-    // 实际项目中应该调用API
-    // await markNoticeReadApi(noticeId);
-    if (notice.value) {
-      notice.value.status = 1
-    }
-  } catch (err) {
-    console.error("标记已读失败:", err)
-  }
-}
+};
 
 // 返回列表
 const goBack = () => {
-  router.push("/notice")
-}
+  router.push('/notice');
+};
 
 // 获取类型信息
 const getTypeInfo = (typeId) => {
-  return messageTypes.find((t) => t.id === typeId) || messageTypes[0]
-}
+  return messageTypes.find((t) => t.id === typeId) || messageTypes[0];
+};
+
+// 新增 Markdown 解析方法
+const parseMarkdown = (content) => {
+  if (!content) return '';
+  // 配置 marked（可选）
+  marked.setOptions({
+    gfm: true, // 启用 GitHub Flavored Markdown
+    breaks: false, // 转换换行符为 <br>
+  });
+  // 安全净化 HTML
+  return DOMPurify.sanitize(marked.parse(content));
+};
 
 // 格式化内容，将换行符转换为<br>
 const formatContent = (content) => {
-  return content ? content.replace(/\n/g, "<br>") : ""
-}
+  return content ? content.replaceAll('\n', '<br>') : '';
+};
 
 onMounted(() => {
-  getNoticeDetail()
-})
+  getNoticeDetail();
+});
+
+const showUnreadList = () => {
+  alert('未实现')
+}
 </script>
 
 <template>
@@ -110,27 +130,34 @@ onMounted(() => {
     <template #title>
       <div class="flex items-center gap-2">
         <button
+          class="flex h-8 w-8 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
           @click="goBack"
-          class="flex h-8 w-8 items-center justify-center rounded-full text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
         >
           <ArrowLeft class="h-5 w-5" />
         </button>
-        <h1 class="text-xl font-semibold text-gray-900 dark:text-gray-100">通知详情</h1>
+        <h1 class="text-xl font-semibold text-gray-900 dark:text-gray-100">
+          通知详情
+        </h1>
       </div>
     </template>
 
     <div class="mx-auto max-w-3xl">
       <!-- 加载状态 -->
       <div v-if="loading" class="flex justify-center py-20">
-        <div class="h-10 w-10 animate-spin rounded-full border-4 border-gray-200 dark:border-gray-700 border-t-sky-500 dark:border-t-sky-400"></div>
+        <div
+          class="h-10 w-10 animate-spin rounded-full border-4 border-gray-200 border-t-sky-500 dark:border-gray-700 dark:border-t-sky-400"
+        ></div>
       </div>
 
       <!-- 错误状态 -->
-      <div v-else-if="error" class="rounded-lg border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 p-4 text-center text-red-600 dark:text-red-400 transition-colors">
+      <div
+        v-else-if="error"
+        class="rounded-lg border border-red-200 bg-red-50 p-4 text-center text-red-600 transition-colors dark:border-red-800 dark:bg-red-900/20 dark:text-red-400"
+      >
         {{ error }}
         <button
+          class="mt-2 rounded-md bg-red-100 px-3 py-1 text-sm font-medium text-red-700 transition-colors hover:bg-red-200 dark:bg-red-900/30 dark:text-red-300 dark:hover:bg-red-900/50"
           @click="getNoticeDetail"
-          class="mt-2 rounded-md bg-red-100 dark:bg-red-900/30 px-3 py-1 text-sm font-medium text-red-700 dark:text-red-300 hover:bg-red-200 dark:hover:bg-red-900/50 transition-colors"
         >
           重试
         </button>
@@ -139,9 +166,15 @@ onMounted(() => {
       <!-- 通知详情 -->
       <div v-else-if="notice" class="space-y-6">
         <!-- 标题和类型 -->
-        <div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-6 shadow-sm transition-colors">
+        <div
+          class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-colors dark:border-gray-700 dark:bg-gray-800"
+        >
           <div class="mb-4 flex items-start justify-between">
-            <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 transition-colors">{{ notice.title }}</h2>
+            <h2
+              class="text-xl font-bold text-gray-900 transition-colors dark:text-gray-100"
+            >
+              {{ notice.title }}
+            </h2>
             <div
               :class="[
                 getTypeInfo(notice.type).bgColor,
@@ -157,17 +190,22 @@ onMounted(() => {
                 ]"
                 class="h-4 w-4"
               />
-              <span :class="[
+              <span
+                :class="[
                   getTypeInfo(notice.type).color,
                   getTypeInfo(notice.type).darkColor,
-                ]" class="text-xs font-medium">
+                ]"
+                class="text-xs font-medium"
+              >
                 {{ getTypeInfo(notice.type).name }}
               </span>
             </div>
           </div>
 
           <!-- 元信息 -->
-          <div class="mb-6 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-gray-500 dark:text-gray-400 transition-colors">
+          <div
+            class="mb-6 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-gray-500 transition-colors dark:text-gray-400"
+          >
             <div class="flex items-center gap-1.5">
               来自:
               <User class="h-4 w-4" />
@@ -180,28 +218,47 @@ onMounted(() => {
               <span>{{ notice.admin?.nick_name || '系统' }}</span>
             </div>
           </div>
-          <div class="mb-6 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-gray-500 dark:text-gray-400 transition-colors">
+
+          <div
+            class="mb-6 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-gray-500 transition-colors dark:text-gray-400"
+          >
             <div v-html="formatContent(notice.detail)"></div>
-            <div class="flex items-center gap-1.5" style="margin-left: auto;">
+            <div class="flex items-center gap-1.5" style="margin-left: auto">
               <Clock class="h-4 w-4" />
-              <span>{{ notice.created_at }}({{ formatTimeToRelative(notice.created_at) }})</span>
+              <span>{{ notice.created_at }}({{
+                  formatTimeToRelative(notice.created_at)
+                }})</span>
             </div>
           </div>
 
           <!-- 分隔线 -->
-          <div class="mb-6 h-px w-full bg-gray-100 dark:bg-gray-700 transition-colors"></div>
+          <div
+            class="mb-6 h-px w-full bg-gray-100 transition-colors dark:bg-gray-700"
+          ></div>
 
           <!-- 内容 -->
-          <div class="rounded-lg bg-gray-50 dark:bg-gray-700 p-4 transition-colors">
-            <div class="prose prose-sm dark:prose-invert max-w-none text-gray-700 dark:text-gray-300 transition-colors" v-html="formatContent(notice.content)"></div>
+          <div
+            class="rounded-lg bg-gray-50 p-4 transition-colors dark:bg-gray-700"
+          >
+            <div
+              v-if="notice.edit_type === 0"
+              class="prose prose-sm dark:prose-invert max-w-none text-gray-700 transition-colors dark:text-gray-300"
+              v-html="formatContent(notice.content)"
+            ></div>
+            <div
+              v-else-if="notice.edit_type === 1"
+              class="markdown-body prose-sm dark:prose-invert max-w-none text-gray-700 transition-colors dark:text-gray-300"
+              v-html="parseMarkdown(notice.content)"
+            ></div>
           </div>
+
         </div>
 
         <!-- 操作按钮 -->
         <div class="flex justify-between">
           <button
+            class="flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
             @click="goBack"
-            class="flex items-center gap-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
           >
             <ArrowLeft class="h-4 w-4" />
             返回列表
@@ -209,18 +266,39 @@ onMounted(() => {
 
           <div class="flex gap-2">
             <!-- 这里可以添加其他操作按钮，如删除、转发等 -->
+
+            <button
+              v-if="notice.is_my === 1"
+              class="flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+              @click="showUnreadList"
+            >
+              {{
+                notice.is_all_read === 1
+                  ? '全部已读'
+                  : `有 ${notice.unread_count} 人未读`
+              }}
+            </button>
           </div>
         </div>
       </div>
 
       <!-- 通知不存在 -->
-      <div v-else class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-8 text-center shadow-sm transition-colors">
+      <div
+        v-else
+        class="rounded-lg border border-gray-200 bg-white p-8 text-center shadow-sm transition-colors dark:border-gray-700 dark:bg-gray-800"
+      >
         <Bell class="mx-auto mb-4 h-12 w-12 text-gray-300 dark:text-gray-600" />
-        <h3 class="mb-2 text-lg font-medium text-gray-900 dark:text-gray-100 transition-colors">通知不存在</h3>
-        <p class="mb-4 text-gray-500 dark:text-gray-400 transition-colors">该通知可能已被删除或您没有权限查看</p>
+        <h3
+          class="mb-2 text-lg font-medium text-gray-900 transition-colors dark:text-gray-100"
+        >
+          通知不存在
+        </h3>
+        <p class="mb-4 text-gray-500 transition-colors dark:text-gray-400">
+          该通知可能已被删除或您没有权限查看
+        </p>
         <button
+          class="rounded-md bg-sky-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-sky-600 dark:bg-sky-600 dark:hover:bg-sky-500"
           @click="goBack"
-          class="rounded-md bg-sky-500 dark:bg-sky-600 px-4 py-2 text-sm font-medium text-white hover:bg-sky-600 dark:hover:bg-sky-500 transition-colors"
         >
           返回通知列表
         </button>
@@ -230,6 +308,12 @@ onMounted(() => {
 </template>
 
 <style scoped>
+/* 新增 Markdown 样式（如果使用 GitHub 风格） */
+
+/* 调整 Markdown 容器样式 */
+.markdown-body {
+  padding: 20px;
+}
 /* 平滑过渡效果 */
 .fade-enter-active,
 .fade-leave-active {
diff --git a/apps/web-antd/src/views/notice/compoents/send-o.vue b/apps/web-antd/src/views/notice/compoents/send-o.vue
new file mode 100644
index 00000000..24dec7c2
--- /dev/null
+++ b/apps/web-antd/src/views/notice/compoents/send-o.vue
@@ -0,0 +1,344 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { QuillEditor } from '@vueup/vue-quill';
+import {
+  Button,
+  Card,
+  Input,
+  message,
+  Select,
+  SelectOption,
+  Textarea,
+} from 'ant-design-vue';
+
+import { uploadFile } from '#/api/core/upload';
+import { getUserOptionApi, sendNoticeApi } from '#/views/notice/api';
+
+// eslint-disable-next-line n/no-extraneous-import
+import '@vueup/vue-quill/dist/vue-quill.snow.css';
+
+// 基础数据定义
+const title = ref('');
+const detail = ref('');
+const content = ref('');
+const type = ref(0);
+const userIds = ref([]);
+const typeOption = ref([
+  {
+    label: '公告',
+    value: 0,
+  },
+  {
+    label: '周报',
+    value: 2,
+  },
+]);
+
+// 用户选项数据
+const userOption = ref([]);
+
+// 创建对QuillEditor的引用，用于后续获取Quill实例
+const quillEditorRef = ref(null);
+
+// 获取用户选项数据的函数
+const getUserOption = () => {
+  getUserOptionApi().then((res) => {
+    userOption.value = res;
+  });
+};
+getUserOption();
+
+// 发送消息的函数
+const send = () => {
+  sendNoticeApi({
+    title: title.value,
+    type: type.value,
+    detail: detail.value,
+    content: content.value,
+    user_ids: userIds.value,
+  }).then(() => {
+    detail.value = '';
+    content.value = '';
+    userIds.value = [];
+    title.value = '';
+    // 清除富文本编辑器内容
+    quillEditorRef.value?.getQuill().setContents([]);
+    message.success('发送成功');
+  });
+};
+const isUpload = ref(false);
+
+// 富文本编辑器配置选项
+const editorOptions = {
+  theme: 'snow',
+  modules: {
+    toolbar: [
+      ['bold', 'italic', 'underline', 'strike'],
+      ['blockquote', 'code-block'],
+      [{ header: 1 }, { header: 2 }],
+      [{ list: 'ordered' }, { list: 'bullet' }],
+      [{ script: 'sub' }, { script: 'super' }],
+      [{ indent: '-1' }, { indent: '+1' }],
+      [{ direction: 'rtl' }],
+      [{ size: ['small', false, 'large', 'huge'] }],
+      [{ header: [1, 2, 3, 4, 5, 6, false] }],
+      [{ color: [] }, { background: [] }],
+      [{ font: [] }],
+      [{ align: [] }],
+      ['clean'],
+      ['link', 'image', 'video'],
+    ],
+  },
+  placeholder: '请输入消息内容',
+};
+
+/**
+ * 图片上传函数
+ * @param {File} file - 要上传的图片文件
+ * @returns {Promise<string>} - 返回上传后的图片URL
+ */
+const uploadImage = async (file: File): Promise<string> => {
+  try {
+    // 创建FormData对象，用于发送文件数据
+    const formData = new FormData();
+    formData.append('file', file);
+
+    // 显示上传中的提示
+    message.loading({ content: '图片上传中...', key: 'imageUpload' });
+
+    return uploadFile({
+      file,
+    }).then((data: any) => {
+      message.success({ content: '图片上传成功', key: 'imageUpload', duration: 2 });
+      isUpload.value = false;
+      return data.url;
+    });
+  } catch (error) {
+    // 处理上传错误
+    console.error('图片上传错误:', error);
+    message.error({ content: '图片上传失败', key: 'imageUpload', duration: 2 });
+    return '';
+  }
+};
+
+/**
+ * 从剪贴板数据中提取图片文件
+ * @param {ClipboardEvent} event - 剪贴板事件
+ * @returns {File|null} - 返回图片文件或null
+ */
+const getImageFromClipboard = (event: ClipboardEvent): File | null => {
+  const clipboardData = event.clipboardData;
+  if (!clipboardData) return null;
+
+  // 遍历剪贴板中的所有项目
+  const items = clipboardData.items;
+  for (const item of items) {
+    // 检查是否是图片类型
+    if (item.type.includes('image')) {
+      return item.getAsFile();
+    }
+  }
+
+  return null;
+};
+
+/**
+ * 在编辑器中插入图片
+ * @param {any} quill - Quill编辑器实例
+ * @param {string} imageUrl - 图片URL
+ */
+const insertImageToEditor = (quill: any, imageUrl: string): void => {
+  if (!quill) return;
+
+  // 获取当前光标位置
+  const range = quill.getSelection();
+
+  if (range) {
+    // 在光标位置插入图片
+    quill.insertEmbed(range.index, 'image', imageUrl);
+    // 将光标移动到图片后面
+    quill.setSelection(range.index + 1);
+  } else {
+    // 如果没有选择范围，则在文档末尾插入
+    const length = quill.getLength();
+    quill.insertEmbed(length - 1, 'image', imageUrl);
+    quill.setSelection(length);
+  }
+};
+
+// 组件挂载后设置剪贴板事件监听
+onMounted(() => {
+  // 等待DOM更新后获取编辑器元素
+  setTimeout(() => {
+    // 获取Quill编辑器实例
+    const quill = quillEditorRef.value?.getQuill();
+
+    if (!quill) {
+      console.error('无法获取Quill编辑器实例');
+      return;
+    }
+
+    // 为编辑器添加粘贴事件监听器
+    const editorElement = document.querySelector('.ql-editor');
+    if (editorElement) {
+      editorElement.addEventListener('paste', async (event) => {
+        // 从剪贴板获取图片
+        const imageFile = getImageFromClipboard(event as ClipboardEvent);
+
+        if (imageFile) {
+          // 阻止默认粘贴行为，以便我们可以自定义处理
+          event.preventDefault();
+
+          if (isUpload.value === true) {
+            return;
+          }
+          isUpload.value = true;
+          alert('2')
+          // 上传图片到服务器
+          const imageUrl = await uploadImage(imageFile);
+
+          // 如果成功获取到图片URL，则将图片插入到编辑器中
+          if (imageUrl) {
+            insertImageToEditor(quill, imageUrl);
+          }
+        }
+        // 如果不是图片，则让默认粘贴行为继续
+      });
+
+      console.log('已设置编辑器粘贴事件监听器');
+    } else {
+      console.error('无法找到编辑器元素');
+    }
+  }, 500); // 给予足够的时间让编辑器渲染完成
+});
+
+/**
+ * 直接处理编辑器的粘贴事件
+ * 这是一个备用方法，通过Quill的clipboard模块直接处理粘贴事件
+ */
+const setupQuillPasteHandler = () => {
+  // 确保编辑器已经挂载
+  if (!quillEditorRef.value) return;
+
+  const quill = quillEditorRef.value.getQuill();
+  if (!quill) return;
+
+  // 获取Quill的clipboard模块
+  const clipboard = quill.getModule('clipboard');
+
+  // 保存原始的粘贴处理函数
+  const originalMatchers = clipboard.matchers;
+
+  // 重写粘贴处理函数
+  clipboard.addMatcher('img', (node: any, delta: any) => {
+    // 这里可以处理HTML中的img标签
+    // 但对于直接粘贴的图片文件，这个方法不会被触发
+    return delta;
+  });
+
+  // 监听编辑器的paste事件
+  quill.root.addEventListener('paste', async (e: ClipboardEvent) => {
+    const imageFile = getImageFromClipboard(e);
+
+    if (imageFile) {
+      e.preventDefault();
+
+      if (isUpload.value === true) {
+        return;
+      }
+      isUpload.value = true;
+      const imageUrl = await uploadImage(imageFile);
+
+      if (imageUrl) {
+        insertImageToEditor(quill, imageUrl);
+      }
+    }
+  });
+};
+</script>
+
+<template>
+  <Page title="通知群发">
+    <Card class="w-1/2" style="margin: 0 auto" title="发送消息">
+      <!-- 消息标题输入框 -->
+      <Input v-model:value="title" placeholder="请输入消息标题" />
+
+      <!-- 消息类型选择器 -->
+      <Select
+        v-model:value="type"
+        class="mt-5 w-full"
+        placeholder="请选择消息类型"
+      >
+        <template v-for="item in typeOption" :key="item.value">
+          <SelectOption :value="item.value">{{ item.label }}</SelectOption>
+        </template>
+      </Select>
+
+      <!-- 用户选择器，仅在类型为2时显示 -->
+      <Select
+        v-if="type === 2"
+        v-model:value="userIds"
+        class="mt-5 w-full"
+        mode="multiple"
+        placeholder="请选择接受消息的用户"
+      >
+        <template v-for="item in userOption" :key="item.value">
+          <SelectOption :value="item.id">{{ item.nick_name }}</SelectOption>
+        </template>
+      </Select>
+
+      <!-- 消息简介输入框 -->
+      <Textarea
+        v-model:value="detail"
+        class="mt-5"
+        placeholder="请输入消息简介"
+      />
+
+      <!-- 富文本编辑器 -->
+      <div class="mt-5">
+        <!--
+          使用ref属性获取编辑器实例
+          content-type="html"表示内容以HTML格式存储
+          theme="snow"使用雪主题样式
+        -->
+        <QuillEditor
+          ref="quillEditorRef"
+          v-model:content="content"
+          :options="editorOptions"
+          class="editor-container"
+          content-type="html"
+          theme="snow"
+          @ready="setupQuillPasteHandler"
+        />
+      </div>
+
+      <!-- 发送按钮 -->
+      <Button class="mt-5 w-full" type="primary" @click="send">发送</Button>
+    </Card>
+  </Page>
+</template>
+
+<style scoped>
+/* 编辑器容器样式 */
+.editor-container {
+  height: 250px;
+  margin-bottom: 40px;
+  /* 确保编辑器有足够的空间显示工具栏和内容区域 */
+}
+
+/* 可以添加额外的样式来自定义编辑器外观 */
+:deep(.ql-editor) {
+  min-height: 200px;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+/* 确保图片在编辑器中显示正常 */
+:deep(.ql-editor img) {
+  max-width: 100%;
+  height: auto;
+}
+</style>
diff --git a/apps/web-antd/src/views/notice/compoents/send.vue b/apps/web-antd/src/views/notice/compoents/send.vue
new file mode 100644
index 00000000..dbf0a49e
--- /dev/null
+++ b/apps/web-antd/src/views/notice/compoents/send.vue
@@ -0,0 +1,456 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { QuillEditor } from '@vueup/vue-quill';
+import {
+  Button,
+  Card,
+  Input,
+  message,
+  Radio,
+  RadioGroup,
+  Select,
+  SelectOption,
+  Textarea,
+} from 'ant-design-vue';
+
+import { uploadFile } from '#/api/core/upload';
+import { getUserOptionApi, sendNoticeApi } from '#/views/notice/api';
+
+// Import Markdown editor (using a popular Vue 3 Markdown editor)
+import { config, MdEditor } from 'md-editor-v3';
+
+import 'md-editor-v3/lib/style.css';
+
+// eslint-disable-next-line n/no-extraneous-import
+import '@vueup/vue-quill/dist/vue-quill.snow.css';
+
+// 基础数据定义
+const title = ref('');
+const detail = ref('');
+const content = ref('');
+const markdownContent = ref(''); // For 1 content
+const type = ref(0);
+const userIds = ref([]);
+const editorMode = ref(0); // 0 or 1
+const typeOption = ref([
+  {
+    label: '公告',
+    value: 0,
+  },
+  {
+    label: '周报',
+    value: 2,
+  },
+]);
+
+// 用户选项数据
+const userOption = ref([]);
+
+// 创建对QuillEditor的引用，用于后续获取Quill实例
+const quillEditorRef = ref(null);
+
+// 获取用户选项数据的函数
+const getUserOption = () => {
+  getUserOptionApi().then((res) => {
+    userOption.value = res;
+  });
+};
+getUserOption();
+
+// Watch for editor mode changes to convert content between formats
+watch(editorMode, (newMode, oldMode) => {
+  if (newMode === oldMode) return;
+
+  if (newMode === 1 && oldMode === 0) {
+    // Convert HTML to Markdown (simplified conversion)
+    // In a real app, you would use a proper HTML-to-Markdown converter library
+    try {
+      // This is a placeholder - you should use a proper library like turndown
+      const tempDiv = document.createElement('div');
+      tempDiv.innerHTML = content.value;
+      markdownContent.value = tempDiv.textContent || '';
+      message.info('已切换到Markdown编辑模式');
+    } catch (error) {
+      console.error('转换HTML到Markdown失败:', error);
+    }
+  } else if (newMode === 0 && oldMode === 1) {
+    // Convert Markdown to HTML (simplified conversion)
+    // In a real app, you would use a proper Markdown-to-HTML converter library
+    try {
+      // This is a placeholder - you should use a proper library like marked
+      content.value = markdownContent.value;
+      message.info('已切换到富文本编辑模式');
+    } catch (error) {
+      console.error('转换Markdown到HTML失败:', error);
+    }
+  }
+});
+
+// 发送消息的函数
+const send = () => {
+  // Use the appropriate content based on editor mode
+  const finalContent =
+    editorMode.value === 1 ? markdownContent.value : content.value;
+
+  sendNoticeApi({
+    title: title.value,
+    type: type.value,
+    edit_type: editorMode.value,
+    detail: detail.value,
+    content: finalContent,
+    content_type: editorMode.value, // Add content type to API
+    user_ids: userIds.value,
+  }).then(() => {
+    detail.value = '';
+    content.value = '';
+    markdownContent.value = '';
+    userIds.value = [];
+    title.value = '';
+    // 清除富文本编辑器内容
+    if (quillEditorRef.value?.getQuill()) {
+      quillEditorRef.value.getQuill().setContents([]);
+    }
+    message.success('发送成功');
+  });
+};
+const isUpload = ref(false);
+
+// 富文本编辑器配置选项
+const editorOptions = {
+  theme: 'snow',
+  modules: {
+    toolbar: [
+      ['bold', 'italic', 'underline', 'strike'],
+      ['blockquote', 'code-block'],
+      [{ header: 1 }, { header: 2 }],
+      [{ list: 'ordered' }, { list: 'bullet' }],
+      [{ script: 'sub' }, { script: 'super' }],
+      [{ indent: '-1' }, { indent: '+1' }],
+      [{ direction: 'rtl' }],
+      [{ size: ['small', false, 'large', 'huge'] }],
+      [{ header: [1, 2, 3, 4, 5, 6, false] }],
+      [{ color: [] }, { background: [] }],
+      [{ font: [] }],
+      [{ align: [] }],
+      ['clean'],
+      ['link', 'image', 'video'],
+    ],
+  },
+  placeholder: '请输入消息内容',
+};
+
+/**
+ * 图片上传函数
+ * @param {File} file - 要上传的图片文件
+ * @returns {Promise<string>} - 返回上传后的图片URL
+ */
+const uploadImage = async (file: File): Promise<string> => {
+  try {
+    // 创建FormData对象，用于发送文件数据
+    const formData = new FormData();
+    formData.append('file', file);
+
+    // 显示上传中的提示
+    message.loading({ content: '图片上传中...', key: 'imageUpload' });
+
+    return uploadFile({
+      file,
+    }).then((data: any) => {
+      message.success({
+        content: '图片上传成功',
+        key: 'imageUpload',
+        duration: 2,
+      });
+      isUpload.value = false;
+      return data.url;
+    });
+  } catch (error) {
+    // 处理上传错误
+    console.error('图片上传错误:', error);
+    message.error({ content: '图片上传失败', key: 'imageUpload', duration: 2 });
+    return '';
+  }
+};
+
+/**
+ * 从剪贴板数据中提取图片文件
+ * @param {ClipboardEvent} event - 剪贴板事件
+ * @returns {File|null} - 返回图片文件或null
+ */
+const getImageFromClipboard = (event: ClipboardEvent): File | null => {
+  const clipboardData = event.clipboardData;
+  if (!clipboardData) return null;
+
+  // 遍历剪贴板中的所有项目
+  const items = clipboardData.items;
+  for (const item of items) {
+    // 检查是否是图片类型
+    if (item.type.includes('image')) {
+      return item.getAsFile();
+    }
+  }
+
+  return null;
+};
+
+/**
+ * 在编辑器中插入图片
+ * @param {any} quill - Quill编辑器实例
+ * @param {string} imageUrl - 图片URL
+ */
+const insertImageToEditor = (quill: any, imageUrl: string): void => {
+  if (!quill) return;
+
+  // 获取当前光标位置
+  const range = quill.getSelection();
+
+  if (range) {
+    // 在光标位置插入图片
+    quill.insertEmbed(range.index, 'image', imageUrl);
+    // 将光标移动到图片后面
+    quill.setSelection(range.index + 1);
+  } else {
+    // 如果没有选择范围，则在文档末尾插入
+    const length = quill.getLength();
+    quill.insertEmbed(length - 1, 'image', imageUrl);
+    quill.setSelection(length);
+  }
+};
+
+// 处理Markdown编辑器的图片上传
+const handleMdImageUpload = async (
+  files: FileList,
+  callback: (urls: string[]) => void,
+) => {
+  if (!files || files.length === 0) return;
+
+  const urls = [];
+  for (const file of files) {
+    if (isUpload.value === true) continue;
+
+    isUpload.value = true;
+    const url = await uploadImage(file);
+    if (url) urls.push(url);
+    isUpload.value = false;
+  }
+
+  callback(urls);
+};
+
+// 组件挂载后设置剪贴板事件监听
+onMounted(() => {
+  // 等待DOM更新后获取编辑器元素
+  setTimeout(() => {
+    // 获取Quill编辑器实例
+    const quill = quillEditorRef.value?.getQuill();
+
+    if (!quill) {
+      console.error('无法获取Quill编辑器实例');
+      return;
+    }
+
+    // 为编辑器添加粘贴事件监听器
+    const editorElement = document.querySelector('.ql-editor');
+    if (editorElement) {
+      editorElement.addEventListener('paste', async (event) => {
+        // 从剪贴板获取图片
+        const imageFile = getImageFromClipboard(event as ClipboardEvent);
+
+        if (imageFile) {
+          // 阻止默认粘贴行为，以便我们可以自定义处理
+          event.preventDefault();
+
+          if (isUpload.value === true) {
+            return;
+          }
+          isUpload.value = true;
+
+          // 上传图片到服务器
+          const imageUrl = await uploadImage(imageFile);
+
+          // 如果成功获取到图片URL，则将图片插入到编辑器中
+          if (imageUrl) {
+            insertImageToEditor(quill, imageUrl);
+          }
+        }
+        // 如果不是图片，则让默认粘贴行为继续
+      });
+
+      console.log('已设置编辑器粘贴事件监听器');
+    } else {
+      console.error('无法找到编辑器元素');
+    }
+  }, 500); // 给予足够的时间让编辑器渲染完成
+});
+
+/**
+ * 直接处理编辑器的粘贴事件
+ * 这是一个备用方法，通过Quill的clipboard模块直接处理粘贴事件
+ */
+const setupQuillPasteHandler = () => {
+  // 确保编辑器已经挂载
+  if (!quillEditorRef.value) return;
+
+  const quill = quillEditorRef.value.getQuill();
+  if (!quill) return;
+
+  // 获取Quill的clipboard模块
+  const clipboard = quill.getModule('clipboard');
+
+  // 保存原始的粘贴处理函数
+  const originalMatchers = clipboard.matchers;
+
+  // 重写粘贴处理函数
+  clipboard.addMatcher('img', (node: any, delta: any) => {
+    // 这里可以处理HTML中的img标签
+    // 但对于直接粘贴的图片文件，这个方法不会被触发
+    return delta;
+  });
+
+  // 监听编辑器的paste事件
+  quill.root.addEventListener('paste', async (e: ClipboardEvent) => {
+    const imageFile = getImageFromClipboard(e);
+
+    if (imageFile) {
+      e.preventDefault();
+
+      if (isUpload.value === true) {
+        return;
+      }
+      isUpload.value = true;
+      const imageUrl = await uploadImage(imageFile);
+
+      if (imageUrl) {
+        insertImageToEditor(quill, imageUrl);
+      }
+    }
+  });
+};
+</script>
+
+<template>
+  <Page title="通知群发">
+    <Card class="w-1/2" style="margin: 0 auto" title="发送消息">
+      <!-- 消息标题输入框 -->
+      <Input v-model:value="title" placeholder="请输入消息标题" />
+
+      <!-- 消息类型选择器 -->
+      <Select
+        v-model:value="type"
+        class="mt-5 w-full"
+        placeholder="请选择消息类型"
+      >
+        <template v-for="item in typeOption" :key="item.value">
+          <SelectOption :value="item.value">{{ item.label }}</SelectOption>
+        </template>
+      </Select>
+
+      <!-- 用户选择器，仅在类型为2时显示 -->
+      <Select
+        v-if="type === 2"
+        v-model:value="userIds"
+        class="mt-5 w-full"
+        mode="multiple"
+        placeholder="请选择接受消息的用户"
+      >
+        <template v-for="item in userOption" :key="item.value">
+          <SelectOption :value="item.id">{{ item.nick_name }}</SelectOption>
+        </template>
+      </Select>
+
+      <!-- 消息简介输入框 -->
+      <Textarea
+        v-model:value="detail"
+        class="mt-5"
+        placeholder="请输入消息简介"
+      />
+
+      <!-- 编辑器类型选择 -->
+      <div class="mt-5">
+        <RadioGroup v-model:value="editorMode" button-style="solid">
+          <Radio :value="0">富文本编辑器</Radio>
+          <Radio :value="1">Markdown编辑器</Radio>
+        </RadioGroup>
+      </div>
+
+      <!-- 富文本编辑器 - 仅在富文本模式下显示 -->
+      <div v-if="editorMode === 0" class="mt-5">
+        <QuillEditor
+          ref="quillEditorRef"
+          v-model:content="content"
+          :options="editorOptions"
+          class="editor-container"
+          content-type="html"
+          theme="snow"
+          @ready="setupQuillPasteHandler"
+        />
+      </div>
+
+      <!-- Markdown编辑器 - 仅在Markdown模式下显示 -->
+      <div v-if="editorMode === 1" class="mt-5">
+<!--        <MdEditor-->
+<!--          v-model="markdownContent"-->
+<!--          :theme="prefersDarkMode ? 'dark' : 'light'"-->
+<!--          :toolbars-exclude="['github']"-->
+<!--          class="md-editor-container"-->
+<!--          editor-id="notice-md-editor"-->
+<!--          preview-only-->
+<!--          @on-upload-img="handleMdImageUpload"-->
+<!--        />-->
+        <MdEditor
+          v-model="markdownContent"
+          :toolbars-exclude="['github']"
+          class="md-editor-container"
+          editor-id="notice-md-editor"
+          preview-only
+          theme="dark"
+          @on-upload-img="handleMdImageUpload"
+        />
+      </div>
+
+      <!-- 发送按钮 -->
+      <Button class="mt-5 w-full" type="primary" @click="send">发送</Button>
+    </Card>
+  </Page>
+</template>
+
+<style scoped>
+/* 编辑器容器样式 */
+.editor-container {
+  height: 250px;
+  margin-bottom: 40px;
+  /* 确保编辑器有足够的空间显示工具栏和内容区域 */
+}
+
+/* Markdown编辑器样式 */
+.md-editor-container {
+  height: 350px;
+  margin-bottom: 40px;
+}
+
+/* 可以添加额外的样式来自定义编辑器外观 */
+:deep(.ql-editor) {
+  min-height: 200px;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+/* 确保图片在编辑器中显示正常 */
+:deep(.ql-editor img) {
+  max-width: 100%;
+  height: auto;
+}
+
+/* 自定义 Markdown 编辑器样式 */
+:deep(.md-editor) {
+  border-radius: 4px;
+}
+
+:deep(.md-editor-dark) {
+  --md-bk-color: #1e1e1e;
+  --md-border-color: #333;
+}
+</style>
diff --git a/apps/web-antd/src/views/notice/index.vue b/apps/web-antd/src/views/notice/index.vue
index 5c74fc4f..603a7df7 100644
--- a/apps/web-antd/src/views/notice/index.vue
+++ b/apps/web-antd/src/views/notice/index.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
-import { computed, ref, watch, onMounted } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
+
 import { Page } from '@vben/common-ui';
+
+import { notification, Tag } from 'ant-design-vue';
 import {
   Bell,
   CalendarClock,
@@ -15,8 +18,8 @@ import {
   Search,
   X,
 } from 'lucide-vue-next';
-import { getNoticeListApi, readAllApi, readApi } from "#/views/notice/api";
-import { notification } from "ant-design-vue";
+
+import { getNoticeListApi, readAllApi, readApi } from '#/views/notice/api';
 
 const router = useRouter();
 
@@ -52,7 +55,7 @@ const getNoticeList = async () => {
       title: searchQuery.value || undefined,
     });
 
-    messages.value = res.items.map(item => ({
+    messages.value = res.items.map((item) => ({
       ...item,
       // 将API返回的数据映射到组件需要的格式
       type_txt: getMessageTypeName(item.type),
@@ -71,7 +74,7 @@ const getNoticeList = async () => {
 
 // 根据类型ID获取类型名称
 const getMessageTypeName = (typeId) => {
-  const type = messageTypes.find(t => t.id === typeId);
+  const type = messageTypes.find((t) => t.id === typeId);
   return type ? type.name : '未知类型';
 };
 
@@ -93,7 +96,7 @@ onMounted(() => {
 
 // 未读消息数量
 const unreadCount = computed(() => {
-  return messages.value.filter(msg => msg.status === 0).length;
+  return messages.value.filter((msg) => msg.status === 0).length;
 });
 
 // 样式相关
@@ -147,7 +150,7 @@ const markAsRead = async (event, item) => {
 const markAllAsRead = async () => {
   try {
     await readAllApi();
-    messages.value.forEach(msg => {
+    messages.value.forEach((msg) => {
       msg.status = 1;
     });
     // 成功后可以重新获取数据或者直接更新本地状态
@@ -186,7 +189,7 @@ const goToPage = (page) => {
 
 // 获取当前选中的筛选类型名称
 const currentFilterName = computed(() => {
-  const type = messageTypes.find(t => t.id === filterType.value);
+  const type = messageTypes.find((t) => t.id === filterType.value);
   return type ? type.name : '全部消息';
 });
 
@@ -205,7 +208,7 @@ const toggleExpand = (event, id) => {
         <span class="text-gray-500 dark:text-gray-400">共 {{ total }} 条消息</span>
         <span
           v-if="unreadCount > 0"
-          class="rounded-full bg-red-500 dark:bg-red-600 px-2 py-0.5 text-xs font-medium text-white"
+          class="rounded-full bg-red-500 px-2 py-0.5 text-xs font-medium text-white dark:bg-red-600"
         >
           {{ unreadCount }} 未读
         </span>
@@ -220,7 +223,7 @@ const toggleExpand = (event, id) => {
         <!-- 筛选下拉菜单 -->
         <div class="relative">
           <button
-            class="flex items-center gap-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-sky-500 dark:focus:ring-sky-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors"
+            class="flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:focus:ring-sky-400 dark:focus:ring-offset-gray-900"
             @click="toggleFilterDropdown"
           >
             <Filter class="h-4 w-4" />
@@ -230,7 +233,7 @@ const toggleExpand = (event, id) => {
 
           <div
             v-if="showFilterDropdown"
-            class="absolute left-0 top-full z-10 mt-1 w-56 origin-top-left rounded-md bg-white dark:bg-gray-800 shadow-lg ring-1 ring-black ring-opacity-5 dark:ring-white dark:ring-opacity-10 focus:outline-none"
+            class="absolute left-0 top-full z-10 mt-1 w-56 origin-top-left rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 dark:ring-white dark:ring-opacity-10"
           >
             <div class="py-1">
               <button
@@ -238,10 +241,10 @@ const toggleExpand = (event, id) => {
                 :key="type.id"
                 :class="
                   filterType === type.id
-                    ? 'bg-gray-50 dark:bg-gray-700 font-medium text-sky-600 dark:text-sky-400'
+                    ? 'bg-gray-50 font-medium text-sky-600 dark:bg-gray-700 dark:text-sky-400'
                     : 'text-gray-700 dark:text-gray-200'
                 "
-                class="flex w-full items-center gap-2 px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                class="flex w-full items-center gap-2 px-4 py-2 text-left text-sm transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
                 @click="selectFilterType(type.id)"
               >
                 <component
@@ -265,7 +268,7 @@ const toggleExpand = (event, id) => {
           </div>
           <input
             v-model="searchQuery"
-            class="block w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 py-2 pl-10 pr-10 text-sm text-gray-700 dark:text-gray-200 focus:border-sky-500 dark:focus:border-sky-400 focus:outline-none focus:ring-1 focus:ring-sky-500 dark:focus:ring-sky-400 transition-colors"
+            class="block w-full rounded-lg border border-gray-200 bg-white py-2 pl-10 pr-10 text-sm text-gray-700 transition-colors focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-sky-400 dark:focus:ring-sky-400"
             placeholder="搜索消息..."
             type="text"
           />
@@ -274,14 +277,16 @@ const toggleExpand = (event, id) => {
             class="absolute inset-y-0 right-0 flex items-center pr-3"
             @click="clearSearch"
           >
-            <X class="h-4 w-4 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors" />
+            <X
+              class="h-4 w-4 text-gray-400 transition-colors hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
+            />
           </button>
         </div>
 
         <!-- 标记全部已读按钮 -->
         <button
           v-if="unreadCount > 0"
-          class="flex items-center gap-1 rounded-lg bg-white dark:bg-gray-800 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 shadow-sm ring-1 ring-gray-200 dark:ring-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+          class="flex items-center gap-1 rounded-lg bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm ring-1 ring-gray-200 transition-colors hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-200 dark:ring-gray-700 dark:hover:bg-gray-700"
           @click="markAllAsRead"
         >
           <CheckCircle2 class="h-4 w-4 text-gray-500 dark:text-gray-400" />
@@ -291,11 +296,13 @@ const toggleExpand = (event, id) => {
 
       <!-- 消息列表 -->
       <div
-        class="overflow-hidden rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm"
+        class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800"
       >
         <!-- 加载状态 -->
         <div v-if="loading" class="flex justify-center py-12">
-          <div class="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 dark:border-gray-700 border-t-sky-500 dark:border-t-sky-400"></div>
+          <div
+            class="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-sky-500 dark:border-gray-700 dark:border-t-sky-400"
+          ></div>
         </div>
 
         <!-- 空状态 -->
@@ -318,7 +325,11 @@ const toggleExpand = (event, id) => {
           <li
             v-for="item in messages"
             :key="item.id"
-            :class="[item.status === 0 ? 'bg-gray-50 dark:bg-gray-900' : 'bg-gray-50 dark:bg-gray-800']"
+            :class="[
+              item.status === 0
+                ? 'bg-gray-50 dark:bg-gray-900'
+                : 'bg-gray-50 dark:bg-gray-800',
+            ]"
             class="group relative cursor-pointer transition-all duration-200"
             @click="handleItemClick(item)"
           >
@@ -327,16 +338,17 @@ const toggleExpand = (event, id) => {
               <div
                 :class="[
                   item.status === 1
-                    ? 'bg-gray-100 dark:bg-gray-700 '
+                    ? 'bg-gray-100 dark:bg-gray-700'
                     : typeBgColors[item.type],
                 ]"
                 class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full transition-all duration-200"
+                style="margin: auto 0;"
               >
                 <component
                   :is="typeIcons[item.type]"
                   :class="[
                     item.status === 1
-                      ? 'text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300'
+                      ? 'text-gray-400 group-hover:text-gray-600 dark:text-gray-500 dark:group-hover:text-gray-300'
                       : typeColors[item.type],
                   ]"
                   class="h-5 w-5 transition-all duration-200"
@@ -350,7 +362,7 @@ const toggleExpand = (event, id) => {
                     :class="[
                       item.status === 0
                         ? 'font-semibold text-gray-900 dark:text-white'
-                        : 'text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-white',
+                        : 'text-gray-700 group-hover:text-gray-900 dark:text-gray-300 dark:group-hover:text-white',
                     ]"
                     class="text-sm font-medium transition-all duration-200 sm:text-base"
                   >
@@ -358,14 +370,14 @@ const toggleExpand = (event, id) => {
                   </h3>
                   <span
                     class="shrink-0 whitespace-nowrap text-xs text-gray-400 dark:text-gray-500"
-                  >{{ item.date }}</span>
+                    >{{ item.date }}</span>
                 </div>
 
                 <div class="mt-1 flex flex-wrap items-center gap-2">
                   <span
                     :class="[
                       item.status === 1
-                        ? 'border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400'
+                        ? 'border-gray-200 text-gray-500 dark:border-gray-700 dark:text-gray-400'
                         : `${typeColors[item.type]} ${typeBorderColors[item.type]}`,
                     ]"
                     class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium transition-all duration-200"
@@ -377,7 +389,9 @@ const toggleExpand = (event, id) => {
                   <div class="mt-1 w-full">
                     <p
                       :class="[
-                        item.status === 1 ? 'text-gray-500 dark:text-gray-400' : 'text-gray-700 dark:text-gray-300',
+                        item.status === 1
+                          ? 'text-gray-500 dark:text-gray-400'
+                          : 'text-gray-700 dark:text-gray-300',
                         expandedMessage === item.id ? '' : 'line-clamp-1',
                       ]"
                       class="text-xs transition-all duration-200"
@@ -387,14 +401,21 @@ const toggleExpand = (event, id) => {
 
                     <!-- 展开/收起按钮 -->
                     <button
-                      v-if="item.detail && item.detail.length > 50"
-                      class="mt-1 flex items-center gap-1 text-xs text-sky-500 dark:text-sky-400 hover:text-sky-600 dark:hover:text-sky-300 transition-colors"
+                      v-if="item.detail && item.detail.length > 70"
+                      class="mt-1 flex items-center gap-1 text-xs text-sky-500 transition-colors hover:text-sky-600 dark:text-sky-400 dark:hover:text-sky-300"
                       @click="toggleExpand($event, item.id)"
                     >
                       <Eye class="h-3 w-3" />
                       {{ expandedMessage === item.id ? '收起' : '展开' }}
                     </button>
                   </div>
+
+                  <span
+                    v-if="item.is_my === 1"
+                    style="position: absolute; bottom: 10px; right: 10px"
+                  >
+                    我发布的 （{{ item.is_all_read === 1 ? '全部已读' : `有 ${item.unread_count} 人未读` }}）
+                  </span>
                 </div>
               </div>
 
@@ -402,14 +423,14 @@ const toggleExpand = (event, id) => {
               <div class="flex shrink-0 items-center gap-2">
                 <button
                   v-if="item.status === 0"
-                  class="rounded-full p-1.5 text-gray-400 dark:text-gray-500 transition-all duration-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-600 dark:hover:text-gray-300"
+                  class="rounded-full p-1.5 text-gray-400 transition-all duration-200 hover:bg-gray-100 hover:text-gray-600 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-gray-300"
                   title="标记为已读"
                   @click="markAsRead($event, item)"
                 >
                   <CheckCircle2 class="h-5 w-5" />
                 </button>
                 <ChevronRight
-                  class="h-5 w-5 text-gray-300 dark:text-gray-600 transition-all duration-200 group-hover:text-gray-400 dark:group-hover:text-gray-500"
+                  class="h-5 w-5 text-gray-300 transition-all duration-200 group-hover:text-gray-400 dark:text-gray-600 dark:group-hover:text-gray-500"
                 />
               </div>
             </div>
@@ -426,17 +447,17 @@ const toggleExpand = (event, id) => {
         <!-- 分页控件 -->
         <div
           v-if="totalPages > 1"
-          class="flex items-center justify-between border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-750 px-4 py-3 sm:px-6"
+          class="dark:bg-gray-750 flex items-center justify-between border-t border-gray-200 bg-gray-50 px-4 py-3 sm:px-6 dark:border-gray-700"
         >
           <div class="flex flex-1 justify-between sm:hidden">
             <button
               :class="[
                 currentPage === 1
                   ? 'text-gray-300 dark:text-gray-600'
-                  : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700',
+                  : 'text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-700',
               ]"
               :disabled="currentPage === 1"
-              class="relative inline-flex items-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2 text-sm font-medium transition-colors"
+              class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium transition-colors dark:border-gray-600 dark:bg-gray-800"
               @click="goToPage(currentPage - 1)"
             >
               上一页
@@ -445,10 +466,10 @@ const toggleExpand = (event, id) => {
               :class="[
                 currentPage === totalPages
                   ? 'text-gray-300 dark:text-gray-600'
-                  : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700',
+                  : 'text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-700',
               ]"
               :disabled="currentPage === totalPages"
-              class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2 text-sm font-medium transition-colors"
+              class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium transition-colors dark:border-gray-600 dark:bg-gray-800"
               @click="goToPage(currentPage + 1)"
             >
               下一页
@@ -461,12 +482,12 @@ const toggleExpand = (event, id) => {
               <p class="text-sm text-gray-700 dark:text-gray-300">
                 显示第
                 <span class="font-medium">{{
-                    (currentPage - 1) * pageSize + 1
-                  }}</span>
+                  (currentPage - 1) * pageSize + 1
+                }}</span>
                 至
                 <span class="font-medium">{{
-                    Math.min(currentPage * pageSize, total)
-                  }}</span>
+                  Math.min(currentPage * pageSize, total)
+                }}</span>
                 条， 共
                 <span class="font-medium">{{ total }}</span>
                 条
@@ -484,7 +505,7 @@ const toggleExpand = (event, id) => {
                       : 'hover:text-gray-500 dark:hover:text-gray-300'
                   "
                   :disabled="currentPage === 1"
-                  class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 dark:text-gray-500 ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 focus:z-20 focus:outline-offset-0 transition-colors"
+                  class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 transition-colors hover:bg-gray-50 focus:z-20 focus:outline-offset-0 dark:text-gray-500 dark:ring-gray-600 dark:hover:bg-gray-700"
                   @click="goToPage(currentPage - 1)"
                 >
                   <span class="sr-only">上一页</span>
@@ -502,8 +523,8 @@ const toggleExpand = (event, id) => {
                     "
                     :class="[
                       page === currentPage
-                        ? 'z-10 bg-sky-500 dark:bg-sky-600 text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500 dark:focus-visible:outline-sky-400'
-                        : 'text-gray-900 dark:text-gray-200 ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 focus:z-20 focus:outline-offset-0',
+                        ? 'z-10 bg-sky-500 text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500 dark:bg-sky-600 dark:focus-visible:outline-sky-400'
+                        : 'text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 dark:text-gray-200 dark:ring-gray-600 dark:hover:bg-gray-700',
                     ]"
                     class="relative inline-flex items-center px-4 py-2 text-sm font-semibold transition-colors"
                     @click="goToPage(page)"
@@ -517,7 +538,7 @@ const toggleExpand = (event, id) => {
                       (page === 2 && currentPage > 3) ||
                       (page === totalPages - 1 && currentPage < totalPages - 2)
                     "
-                    class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 dark:text-gray-300 ring-1 ring-inset ring-gray-300 dark:ring-gray-600"
+                    class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 dark:text-gray-300 dark:ring-gray-600"
                   >
                     ...
                   </span>
@@ -530,7 +551,7 @@ const toggleExpand = (event, id) => {
                       : 'hover:text-gray-500 dark:hover:text-gray-300'
                   "
                   :disabled="currentPage === totalPages"
-                  class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 dark:text-gray-500 ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 focus:z-20 focus:outline-offset-0 transition-colors"
+                  class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 transition-colors hover:bg-gray-50 focus:z-20 focus:outline-offset-0 dark:text-gray-500 dark:ring-gray-600 dark:hover:bg-gray-700"
                   @click="goToPage(currentPage + 1)"
                 >
                   <span class="sr-only">下一页</span>
diff --git a/package.json b/package.json
index a66187a9..57c6d799 100644
--- a/package.json
+++ b/package.json
@@ -116,9 +116,16 @@
     ]
   },
   "dependencies": {
+    "@types/dompurify": "^3.2.0",
+    "@types/marked": "^6.0.0",
+    "@vueup/vue-quill": "^1.2.0",
+    "dompurify": "^3.2.5",
+    "github-markdown-css": "^5.8.1",
     "html2canvas": "^1.4.1",
     "js-base64": "^3.7.7",
     "lodash-es": "^4.17.21",
-    "lucide-vue-next": "^0.487.0"
+    "lucide-vue-next": "^0.487.0",
+    "marked": "^15.0.8",
+    "md-editor-v3": "^5.4.5"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8ee8e36d..da902edf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -469,6 +469,21 @@ importers:
 
   .:
     dependencies:
+      '@types/dompurify':
+        specifier: ^3.2.0
+        version: 3.2.0
+      '@types/marked':
+        specifier: ^6.0.0
+        version: 6.0.0
+      '@vueup/vue-quill':
+        specifier: ^1.2.0
+        version: 1.2.0(vue@3.5.13(typescript@5.6.3))
+      dompurify:
+        specifier: ^3.2.5
+        version: 3.2.5
+      github-markdown-css:
+        specifier: ^5.8.1
+        version: 5.8.1
       html2canvas:
         specifier: ^1.4.1
         version: 1.4.1
@@ -481,6 +496,12 @@ importers:
       lucide-vue-next:
         specifier: ^0.487.0
         version: 0.487.0(vue@3.5.13(typescript@5.6.3))
+      marked:
+        specifier: ^15.0.8
+        version: 15.0.8
+      md-editor-v3:
+        specifier: ^5.4.5
+        version: 5.4.5(vue@3.5.13(typescript@5.6.3))
     devDependencies:
       '@changesets/changelog-github':
         specifier: 'catalog:'
@@ -638,6 +659,9 @@ importers:
       dayjs:
         specifier: 'catalog:'
         version: 1.11.13
+      markdown-it:
+        specifier: ^14.1.0
+        version: 14.1.0
       pinia:
         specifier: 2.2.2
         version: 2.2.2(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2))
@@ -2341,6 +2365,93 @@ packages:
     resolution: {integrity: sha512-YLPHc8yASwjNkmcDMQMY35yiWjoKAKnhUbPRszBRS0YgH+IXtsMp61j+yTcnCE3oO2DgP0U3iejLC8FTtKDC8Q==}
     engines: {node: '>=16.13'}
 
+  '@codemirror/autocomplete@6.18.6':
+    resolution: {integrity: sha512-PHHBXFomUs5DF+9tCOM/UoW6XQ4R44lLNNhRaW9PKPTU0D7lIjRg3ElxaJnTwsl/oHiR93WSXDBrekhoUGCPtg==}
+
+  '@codemirror/commands@6.8.1':
+    resolution: {integrity: sha512-KlGVYufHMQzxbdQONiLyGQDUW0itrLZwq3CcY7xpv9ZLRHqzkBSoteocBHtMCoY7/Ci4xhzSrToIeLg7FxHuaw==}
+
+  '@codemirror/lang-angular@0.1.3':
+    resolution: {integrity: sha512-xgeWGJQQl1LyStvndWtruUvb4SnBZDAu/gvFH/ZU+c0W25tQR8e5hq7WTwiIY2dNxnf+49mRiGI/9yxIwB6f5w==}
+
+  '@codemirror/lang-cpp@6.0.2':
+    resolution: {integrity: sha512-6oYEYUKHvrnacXxWxYa6t4puTlbN3dgV662BDfSH8+MfjQjVmP697/KYTDOqpxgerkvoNm7q5wlFMBeX8ZMocg==}
+
+  '@codemirror/lang-css@6.3.1':
+    resolution: {integrity: sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==}
+
+  '@codemirror/lang-go@6.0.1':
+    resolution: {integrity: sha512-7fNvbyNylvqCphW9HD6WFnRpcDjr+KXX/FgqXy5H5ZS0eC5edDljukm/yNgYkwTsgp2busdod50AOTIy6Jikfg==}
+
+  '@codemirror/lang-html@6.4.9':
+    resolution: {integrity: sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==}
+
+  '@codemirror/lang-java@6.0.1':
+    resolution: {integrity: sha512-OOnmhH67h97jHzCuFaIEspbmsT98fNdhVhmA3zCxW0cn7l8rChDhZtwiwJ/JOKXgfm4J+ELxQihxaI7bj7mJRg==}
+
+  '@codemirror/lang-javascript@6.2.3':
+    resolution: {integrity: sha512-8PR3vIWg7pSu7ur8A07pGiYHgy3hHj+mRYRCSG8q+mPIrl0F02rgpGv+DsQTHRTc30rydOsf5PZ7yjKFg2Ackw==}
+
+  '@codemirror/lang-json@6.0.1':
+    resolution: {integrity: sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==}
+
+  '@codemirror/lang-less@6.0.2':
+    resolution: {integrity: sha512-EYdQTG22V+KUUk8Qq582g7FMnCZeEHsyuOJisHRft/mQ+ZSZ2w51NupvDUHiqtsOy7It5cHLPGfHQLpMh9bqpQ==}
+
+  '@codemirror/lang-liquid@6.2.3':
+    resolution: {integrity: sha512-yeN+nMSrf/lNii3FJxVVEGQwFG0/2eDyH6gNOj+TGCa0hlNO4bhQnoO5ISnd7JOG+7zTEcI/GOoyraisFVY7jQ==}
+
+  '@codemirror/lang-markdown@6.3.2':
+    resolution: {integrity: sha512-c/5MYinGbFxYl4itE9q/rgN/sMTjOr8XL5OWnC+EaRMLfCbVUmmubTJfdgpfcSS2SCaT7b+Q+xi3l6CgoE+BsA==}
+
+  '@codemirror/lang-php@6.0.1':
+    resolution: {integrity: sha512-ublojMdw/PNWa7qdN5TMsjmqkNuTBD3k6ndZ4Z0S25SBAiweFGyY68AS3xNcIOlb6DDFDvKlinLQ40vSLqf8xA==}
+
+  '@codemirror/lang-python@6.1.7':
+    resolution: {integrity: sha512-mZnFTsL4lW5p9ch8uKNKeRU3xGGxr1QpESLilfON2E3fQzOa/OygEMkaDvERvXDJWJA9U9oN/D4w0ZuUzNO4+g==}
+
+  '@codemirror/lang-rust@6.0.1':
+    resolution: {integrity: sha512-344EMWFBzWArHWdZn/NcgkwMvZIWUR1GEBdwG8FEp++6o6vT6KL9V7vGs2ONsKxxFUPXKI0SPcWhyYyl2zPYxQ==}
+
+  '@codemirror/lang-sass@6.0.2':
+    resolution: {integrity: sha512-l/bdzIABvnTo1nzdY6U+kPAC51czYQcOErfzQ9zSm9D8GmNPD0WTW8st/CJwBTPLO8jlrbyvlSEcN20dc4iL0Q==}
+
+  '@codemirror/lang-sql@6.8.0':
+    resolution: {integrity: sha512-aGLmY4OwGqN3TdSx3h6QeA1NrvaYtF7kkoWR/+W7/JzB0gQtJ+VJxewlnE3+VImhA4WVlhmkJr109PefOOhjLg==}
+
+  '@codemirror/lang-vue@0.1.3':
+    resolution: {integrity: sha512-QSKdtYTDRhEHCfo5zOShzxCmqKJvgGrZwDQSdbvCRJ5pRLWBS7pD/8e/tH44aVQT6FKm0t6RVNoSUWHOI5vNug==}
+
+  '@codemirror/lang-wast@6.0.2':
+    resolution: {integrity: sha512-Imi2KTpVGm7TKuUkqyJ5NRmeFWF7aMpNiwHnLQe0x9kmrxElndyH0K6H/gXtWwY6UshMRAhpENsgfpSwsgmC6Q==}
+
+  '@codemirror/lang-xml@6.1.0':
+    resolution: {integrity: sha512-3z0blhicHLfwi2UgkZYRPioSgVTo9PV5GP5ducFH6FaHy0IAJRg+ixj5gTR1gnT/glAIC8xv4w2VL1LoZfs+Jg==}
+
+  '@codemirror/lang-yaml@6.1.2':
+    resolution: {integrity: sha512-dxrfG8w5Ce/QbT7YID7mWZFKhdhsaTNOYjOkSIMt1qmC4VQnXSDSYVHHHn8k6kJUfIhtLo8t1JJgltlxWdsITw==}
+
+  '@codemirror/language-data@6.5.1':
+    resolution: {integrity: sha512-0sWxeUSNlBr6OmkqybUTImADFUP0M3P0IiSde4nc24bz/6jIYzqYSgkOSLS+CBIoW1vU8Q9KUWXscBXeoMVC9w==}
+
+  '@codemirror/language@6.11.0':
+    resolution: {integrity: sha512-A7+f++LodNNc1wGgoRDTt78cOwWm9KVezApgjOMp1W4hM0898nsqBXwF+sbePE7ZRcjN7Sa1Z5m2oN27XkmEjQ==}
+
+  '@codemirror/legacy-modes@6.5.0':
+    resolution: {integrity: sha512-dNw5pwTqtR1giYjaJyEajunLqxGavZqV0XRtVZyMJnNOD2HmK9DMUmuCAr6RMFGRJ4l8OeQDjpI/us+R09mQsw==}
+
+  '@codemirror/lint@6.8.5':
+    resolution: {integrity: sha512-s3n3KisH7dx3vsoeGMxsbRAgKe4O1vbrnKBClm99PU0fWxmxsx5rR2PfqQgIt+2MMJBHbiJ5rfIdLYfB9NNvsA==}
+
+  '@codemirror/search@6.5.10':
+    resolution: {integrity: sha512-RMdPdmsrUf53pb2VwflKGHEe1XVM07hI7vV2ntgw1dmqhimpatSJKva4VA9h4TLUDOD4EIF02201oZurpnEFsg==}
+
+  '@codemirror/state@6.5.2':
+    resolution: {integrity: sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==}
+
+  '@codemirror/view@6.36.5':
+    resolution: {integrity: sha512-cd+FZEUlu3GQCYnguYm3EkhJ8KJVisqqUsCOKedBoAt/d9c76JUUap6U0UrpElln5k6VyrEOYliMuDAKIeDQLg==}
+
   '@commitlint/cli@19.6.1':
     resolution: {integrity: sha512-8hcyA6ZoHwWXC76BoC8qVOSr8xHy00LZhZpauiD0iO0VYbVhMnED0da85lTfIULxl7Lj4c6vZgF0Wu/ed1+jlQ==}
     engines: {node: '>=v18'}
@@ -3237,6 +3348,57 @@ packages:
   '@jspm/import-map@1.1.0':
     resolution: {integrity: sha512-vmk583YnMi4fmqeXbWIBiyzFu+vqVZ5VCoaa6H4xeSQy5E6JAWtmcq72OAMFTeSTqw7xxHQIJFq2OlHKdUWitQ==}
 
+  '@lezer/common@1.2.3':
+    resolution: {integrity: sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==}
+
+  '@lezer/cpp@1.1.3':
+    resolution: {integrity: sha512-ykYvuFQKGsRi6IcE+/hCSGUhb/I4WPjd3ELhEblm2wS2cOznDFzO+ubK2c+ioysOnlZ3EduV+MVQFCPzAIoY3w==}
+
+  '@lezer/css@1.1.11':
+    resolution: {integrity: sha512-FuAnusbLBl1SEAtfN8NdShxYJiESKw9LAFysfea1T96jD3ydBn12oYjaSG1a04BQRIUd93/0D8e5CV1cUMkmQg==}
+
+  '@lezer/go@1.0.0':
+    resolution: {integrity: sha512-co9JfT3QqX1YkrMmourYw2Z8meGC50Ko4d54QEcQbEYpvdUvN4yb0NBZdn/9ertgvjsySxHsKzH3lbm3vqJ4Jw==}
+
+  '@lezer/highlight@1.2.1':
+    resolution: {integrity: sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==}
+
+  '@lezer/html@1.3.10':
+    resolution: {integrity: sha512-dqpT8nISx/p9Do3AchvYGV3qYc4/rKr3IBZxlHmpIKam56P47RSHkSF5f13Vu9hebS1jM0HmtJIwLbWz1VIY6w==}
+
+  '@lezer/java@1.1.3':
+    resolution: {integrity: sha512-yHquUfujwg6Yu4Fd1GNHCvidIvJwi/1Xu2DaKl/pfWIA2c1oXkVvawH3NyXhCaFx4OdlYBVX5wvz2f7Aoa/4Xw==}
+
+  '@lezer/javascript@1.4.21':
+    resolution: {integrity: sha512-lL+1fcuxWYPURMM/oFZLEDm0XuLN128QPV+VuGtKpeaOGdcl9F2LYC3nh1S9LkPqx9M0mndZFdXCipNAZpzIkQ==}
+
+  '@lezer/json@1.0.3':
+    resolution: {integrity: sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==}
+
+  '@lezer/lr@1.4.2':
+    resolution: {integrity: sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==}
+
+  '@lezer/markdown@1.4.2':
+    resolution: {integrity: sha512-iYewCigG/517D0xJPQd7RGaCjZAFwROiH8T9h7OTtz0bRVtkxzFhGBFJ9JGKgBBs4uuo1cvxzyQ5iKhDLMcLUQ==}
+
+  '@lezer/php@1.0.2':
+    resolution: {integrity: sha512-GN7BnqtGRpFyeoKSEqxvGvhJQiI4zkgmYnDk/JIyc7H7Ifc1tkPnUn/R2R8meH3h/aBf5rzjvU8ZQoyiNDtDrA==}
+
+  '@lezer/python@1.1.17':
+    resolution: {integrity: sha512-Iz0doICPko9uv2chIfSsViNSugNa4PWhxs17jtFd0ZMt+OieDq3wxtFOdmj7wtst3FWDeJkB0CxWNot0BlYixw==}
+
+  '@lezer/rust@1.0.2':
+    resolution: {integrity: sha512-Lz5sIPBdF2FUXcWeCu1//ojFAZqzTQNRga0aYv6dYXqJqPfMdCAI0NzajWUd4Xijj1IKJLtjoXRPMvTKWBcqKg==}
+
+  '@lezer/sass@1.0.7':
+    resolution: {integrity: sha512-8HLlOkuX/SMHOggI2DAsXUw38TuURe+3eQ5hiuk9QmYOUyC55B1dYEIMkav5A4IELVaW4e1T4P9WRiI5ka4mdw==}
+
+  '@lezer/xml@1.0.6':
+    resolution: {integrity: sha512-CdDwirL0OEaStFue/66ZmFSeppuL6Dwjlk8qk153mSQwiSH/Dlri4GNymrNWnUmPl2Um7QfV1FO9KFUyX3Twww==}
+
+  '@lezer/yaml@1.0.3':
+    resolution: {integrity: sha512-GuBLekbw9jDBDhGur82nuwkxKQ+a3W5H0GfaAthDXcAu+XdpS43VlnxA9E9hllkpSP5ellRDKjLLj7Lu9Wr6xA==}
+
   '@manypkg/find-root@1.1.0':
     resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
 
@@ -3260,6 +3422,9 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  '@marijn/find-cluster-break@1.0.2':
+    resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
+
   '@microsoft/api-extractor-model@7.29.6':
     resolution: {integrity: sha512-gC0KGtrZvxzf/Rt9oMYD2dHvtN/1KPEYsrQPyMKhLHnlVuO/f4AFN3E4toqZzD2pt4LhkKoYmL2H9tX3yCOyRw==}
 
@@ -3780,6 +3945,10 @@ packages:
   '@types/doctrine@0.0.9':
     resolution: {integrity: sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==}
 
+  '@types/dompurify@3.2.0':
+    resolution: {integrity: sha512-Fgg31wv9QbLDA0SpTOXO3MaxySc4DKGLi8sna4/Utjo4r3ZRPdCt4UQee8BWr+Q5z21yifghREPJGYaEOEIACg==}
+    deprecated: This is a stub types definition. dompurify provides its own type definitions, so you do not need this installed.
+
   '@types/eslint@9.6.1':
     resolution: {integrity: sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==}
 
@@ -3804,6 +3973,9 @@ packages:
   '@types/jsonfile@6.1.4':
     resolution: {integrity: sha512-D5qGUYwjvnNNextdU59/+fI+spnwtTFmyQP0h+PfIOSkNfpU6AOICUOkm4i0OnSk+NyjdPJrxCDro0sJsWlRpQ==}
 
+  '@types/linkify-it@5.0.0':
+    resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
+
   '@types/lodash.clonedeep@4.5.9':
     resolution: {integrity: sha512-19429mWC+FyaAhOLzsS8kZUsI+/GmBAQ0HFiCPsKGU+7pBXOQWhyrY6xNNDwUSX8SMZMJvuFVMF9O5dQOlQK9Q==}
 
@@ -3816,6 +3988,16 @@ packages:
   '@types/lodash@4.17.13':
     resolution: {integrity: sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==}
 
+  '@types/markdown-it@14.1.2':
+    resolution: {integrity: sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==}
+
+  '@types/marked@6.0.0':
+    resolution: {integrity: sha512-jmjpa4BwUsmhxcfsgUit/7A9KbrC48Q0q8KvnY107ogcjGgTFDlIL3RpihNpx2Mu1hM4mdFQjoVc4O6JoGKHsA==}
+    deprecated: This is a stub types definition. marked provides its own type definitions, so you do not need this installed.
+
+  '@types/mdurl@2.0.0':
+    resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
+
   '@types/minimatch@3.0.5':
     resolution: {integrity: sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==}
 
@@ -3929,6 +4111,12 @@ packages:
     resolution: {integrity: sha512-Vj0WLm5/ZsD013YeUKn+K0y8p1M0jPpxOkKdbD1wB0ns53a5piVY02zjf072TblEweAbcYiFiPoSMF3kp+VhhQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@vavt/copy2clipboard@1.0.1':
+    resolution: {integrity: sha512-XkULyKbB4KeYOn2q2JxMbhu2+UiSrwMU745dfwaYC/oFPsYaXPdGed/zV34xGP59+fgI2VqeQ2xmfKkMSvRvzw==}
+
+  '@vavt/util@2.1.0':
+    resolution: {integrity: sha512-YIfAvArSFVXmWvoF+DEGD0FhkhVNcCtVWWkfYtj76eSrwHh/wuEEFhiEubg1XLNM3tChO8FH8xJCT/hnizjgFQ==}
+
   '@vee-validate/zod@4.14.7':
     resolution: {integrity: sha512-UD0Tfyz1cKKd7BinnUztqKL+oeMjg/T4ZEguN/uZV4DsR9z7gdrD0lOuOU7aVl9UpVK6NM7MhDka35Lj7b/DTw==}
 
@@ -4073,6 +4261,11 @@ packages:
   '@vue/test-utils@2.4.6':
     resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}
 
+  '@vueup/vue-quill@1.2.0':
+    resolution: {integrity: sha512-kd5QPSHMDpycklojPXno2Kw2JSiKMYduKYQckTm1RJoVDA557MnyUXgcuuDpry4HY/Rny9nGNcK+m3AHk94wag==}
+    peerDependencies:
+      vue: ^3.5.13
+
   '@vueuse/core@10.11.1':
     resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
 
@@ -4619,6 +4812,10 @@ packages:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
 
+  clone@2.1.2:
+    resolution: {integrity: sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==}
+    engines: {node: '>=0.8'}
+
   clsx@2.1.1:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
@@ -4627,6 +4824,9 @@ packages:
     resolution: {integrity: sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==}
     engines: {node: '>=0.10.0'}
 
+  codemirror@6.0.1:
+    resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -4799,6 +4999,9 @@ packages:
     resolution: {integrity: sha512-piICUB6ei4IlTv1+653yq5+KoqfBYmj9bw6LqXoOneTMDXk5nM1qt12mFW1caG3LlJXEKW1Bp0WggEmIfQB34g==}
     engines: {node: '>= 14'}
 
+  crelt@1.0.6:
+    resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
+
   croner@9.0.0:
     resolution: {integrity: sha512-onMB0OkDjkXunhdW9htFjEhqrD54+M94i6ackoUkjHKbRnXdyEyKRelp4nJ1kAz32+s27jP1FsebpJCVl0BsvA==}
     engines: {node: '>=18.0'}
@@ -4919,6 +5122,9 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  cssfilter@0.0.10:
+    resolution: {integrity: sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==}
+
   cssnano-preset-default@7.0.6:
     resolution: {integrity: sha512-ZzrgYupYxEvdGGuqL+JKOY70s7+saoNlHSCK/OGn1vB2pQK8KSET8jvenzItcY+kA7NoWvfbb/YhlzuzNKjOhQ==}
     engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
@@ -5031,6 +5237,10 @@ packages:
     resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
     engines: {node: '>=6'}
 
+  deep-equal@1.1.2:
+    resolution: {integrity: sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==}
+    engines: {node: '>= 0.4'}
+
   deep-extend@0.6.0:
     resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
     engines: {node: '>=4.0.0'}
@@ -5159,6 +5369,9 @@ packages:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
 
+  dompurify@3.2.5:
+    resolution: {integrity: sha512-mLPd29uoRe9HpvwP2TxClGQBzGXeEC/we/q+bFlmPPmj2p2Ugl3r6ATu/UU1v77DXNcehiBg9zsr1dREyA/dJQ==}
+
   domutils@2.8.0:
     resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
 
@@ -5570,6 +5783,9 @@ packages:
     resolution: {integrity: sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==}
     engines: {node: '>=6'}
 
+  eventemitter3@2.0.3:
+    resolution: {integrity: sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==}
+
   eventemitter3@5.0.1:
     resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
 
@@ -5593,6 +5809,9 @@ packages:
     resolution: {integrity: sha512-bFi65yM+xZgk+u/KRIpekdSYkTB5W1pEf0Lt8Q8Msh7b+eQ7LXVtIB1Bkm4fvclDEL1b2CZkMhv2mOeF8tMdkA==}
     engines: {node: '>=12.0.0'}
 
+  extend@3.0.2:
+    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+
   extendable-error@0.1.7:
     resolution: {integrity: sha512-UOiS2in6/Q0FK0R0q6UY9vYpQ21mr/Qn1KOnte7vsACuNJf514WvCCUHSRCPcgjPT2bAhNIJdlE6bVap1GKmeg==}
 
@@ -5603,6 +5822,12 @@ packages:
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
+  fast-diff@1.1.2:
+    resolution: {integrity: sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==}
+
+  fast-diff@1.2.0:
+    resolution: {integrity: sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==}
+
   fast-diff@1.3.0:
     resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
 
@@ -5833,6 +6058,10 @@ packages:
     engines: {node: '>=16'}
     hasBin: true
 
+  github-markdown-css@5.8.1:
+    resolution: {integrity: sha512-8G+PFvqigBQSWLQjyzgpa2ThD9bo7+kDsriUIidGcRhXgmcaAWUIpCZf8DavJgc+xifjbCG+GvMyWr0XMXmc7g==}
+    engines: {node: '>=10'}
+
   glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -6144,6 +6373,10 @@ packages:
   iron-webcrypto@1.2.1:
     resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==}
 
+  is-arguments@1.2.0:
+    resolution: {integrity: sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==}
+    engines: {node: '>= 0.4'}
+
   is-array-buffer@3.0.5:
     resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
     engines: {node: '>= 0.4'}
@@ -6571,6 +6804,9 @@ packages:
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
+  linkify-it@5.0.0:
+    resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
+
   lint-staged@15.2.11:
     resolution: {integrity: sha512-Ev6ivCTYRTGs9ychvpVw35m/bcNDuBN+mnTeObCL5h+boS5WzBEC6LHI4I9F/++sZm1m+J2LEiy0gxL/R9TBqQ==}
     engines: {node: '>=18.12.0'}
@@ -6697,6 +6933,11 @@ packages:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
 
+  lucide-vue-next@0.453.0:
+    resolution: {integrity: sha512-5zmv83vxAs9SVoe22veDBi8Dw0Fh2F+oTngWgKnKOkrZVbZjceXLQ3tescV2boB0zlaf9R2Sd9RuUP2766xvsQ==}
+    peerDependencies:
+      vue: ^3.5.13
+
   lucide-vue-next@0.469.0:
     resolution: {integrity: sha512-EjOap+vY3xEzCMrnaccDHO4BH3k3Lr+sOyvzRQCaayYxkxKla0w6Jr4h3cHAzA4vMSp63Dcy7vDiGeCPcCY+Gg==}
     peerDependencies:
@@ -6724,6 +6965,27 @@ packages:
     resolution: {integrity: sha512-EsS89h6l4vbfJEtBZnENTOFk8mCRpY5ru36Xe5bcX1KYIli2mkSHqoFsp5O1wMDvTJJzxe/4THpCTtygjeeGWQ==}
     engines: {node: '>= 10'}
 
+  markdown-it-image-figures@2.1.1:
+    resolution: {integrity: sha512-mwXSQ2nPeVUzCMIE3HlLvjRioopiqyJLNph0pyx38yf9mpqFDhNGnMpAXF9/A2Xv0oiF2cVyg9xwfF0HNAz05g==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      markdown-it: '*'
+
+  markdown-it-sub@2.0.0:
+    resolution: {integrity: sha512-iCBKgwCkfQBRg2vApy9vx1C1Tu6D8XYo8NvevI3OlwzBRmiMtsJ2sXupBgEA7PPxiDwNni3qIUkhZ6j5wofDUA==}
+
+  markdown-it-sup@2.0.0:
+    resolution: {integrity: sha512-5VgmdKlkBd8sgXuoDoxMpiU+BiEt3I49GItBzzw7Mxq9CxvnhE/k09HFli09zgfFDRixDQDfDxi0mgBCXtaTvA==}
+
+  markdown-it@14.1.0:
+    resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
+    hasBin: true
+
+  marked@15.0.8:
+    resolution: {integrity: sha512-rli4l2LyZqpQuRve5C0rkn6pj3hT8EWPC+zkAxFTAJLxRbENfTAhEQq9itrmf1Y81QtAX5D/MYlGlIomNgj9lA==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -6731,6 +6993,11 @@ packages:
   mathml-tag-names@2.1.3:
     resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
 
+  md-editor-v3@5.4.5:
+    resolution: {integrity: sha512-Vw0mjlhGArlCt5aG15a2/W3BoQJLCACUGROgR64uVvRzepsh/26Pj1C3oGlU2lis4FrlnX7rzAN+m8g76eVFRA==}
+    peerDependencies:
+      vue: ^3.5.13
+
   mdn-data@2.0.28:
     resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
 
@@ -6743,6 +7010,12 @@ packages:
   mdn-data@2.14.0:
     resolution: {integrity: sha512-QjcSiIvUHjmXp5wNLClRjQeU0Zp+I2Dag+AhtQto0nyKYZ3IF/pUzCuHe7Bv77EC92XE5t3EXeEiEv/to2Bwig==}
 
+  mdurl@2.0.0:
+    resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
+
+  medium-zoom@1.1.0:
+    resolution: {integrity: sha512-ewyDsp7k4InCUp3jRmwHBRFGyjBimKps/AJLjRSox+2q/2H4p/PNpQf+pwONWlJiOudkBXtbdmVbFjqyybfTmQ==}
+
   meow@12.1.1:
     resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
     engines: {node: '>=16.10'}
@@ -7058,6 +7331,10 @@ packages:
     resolution: {integrity: sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==}
     engines: {node: '>= 0.4'}
 
+  object-is@1.1.6:
+    resolution: {integrity: sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==}
+    engines: {node: '>= 0.4'}
+
   object-keys@1.1.1:
     resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
     engines: {node: '>= 0.4'}
@@ -7169,6 +7446,9 @@ packages:
   param-case@3.0.4:
     resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==}
 
+  parchment@1.1.4:
+    resolution: {integrity: sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==}
+
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -7889,6 +8169,10 @@ packages:
     engines: {node: '>=16'}
     hasBin: true
 
+  punycode.js@2.3.1:
+    resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
+    engines: {node: '>=6'}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -7908,6 +8192,16 @@ packages:
   queue-tick@1.0.1:
     resolution: {integrity: sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==}
 
+  quill-delta@3.6.3:
+    resolution: {integrity: sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==}
+    engines: {node: '>=0.10'}
+
+  quill-delta@4.2.2:
+    resolution: {integrity: sha512-qjbn82b/yJzOjstBgkhtBjN2TNK+ZHP/BgUQO+j6bRhWQQdmj2lH6hXG7+nwwLF41Xgn//7/83lxs9n2BkTtTg==}
+
+  quill@1.3.7:
+    resolution: {integrity: sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==}
+
   radix-vue@1.9.11:
     resolution: {integrity: sha512-C+MtJ66jf8J28DO5bKgNwhGCi6WQYuEosD/tY/Orry9BTDcuF/Mps4HlFd2Tq4YlXF44BEPLQ2Paz89Mz70ZgA==}
     peerDependencies:
@@ -8494,6 +8788,9 @@ packages:
   stubborn-fs@1.2.5:
     resolution: {integrity: sha512-H2N9c26eXjzL/S/K+i/RHHcFanE74dptvvjM8iwzwbVcWY/zjBbgRqF3K0DY4+OD+uTTASTBvDoxPDaPN02D7g==}
 
+  style-mod@4.1.2:
+    resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==}
+
   style-search@0.1.0:
     resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==}
 
@@ -8849,6 +9146,9 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  uc.micro@2.1.0:
+    resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
+
   ufo@1.5.4:
     resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
 
@@ -9269,6 +9569,9 @@ packages:
   vxe-table@4.9.33:
     resolution: {integrity: sha512-KhLUYeCSL4319rcSS8SFkWeFf+pzCBtHm8ytmwiGnj45M7pYoXWR2fpmvR10pEdKsQgM8MDHxqrxdMejT6yKyw==}
 
+  w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+
   warning@4.0.3:
     resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
 
@@ -9434,6 +9737,11 @@ packages:
     resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
     engines: {node: '>=12'}
 
+  xss@1.0.15:
+    resolution: {integrity: sha512-FVdlVVC67WOIPvfOwhoMETV72f6GbW7aOabBC3WxN/oUdoEMDyLz4OgRv5/gck2ZeNqEQu+Tb0kloovXOfpYVg==}
+    engines: {node: '>= 0.10.0'}
+    hasBin: true
+
   y18n@4.0.3:
     resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
 
@@ -10456,6 +10764,244 @@ snapshots:
     dependencies:
       mime: 3.0.0
 
+  '@codemirror/autocomplete@6.18.6':
+    dependencies:
+      '@codemirror/language': 6.11.0
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.5
+      '@lezer/common': 1.2.3
+
+  '@codemirror/commands@6.8.1':
+    dependencies:
+      '@codemirror/language': 6.11.0
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.5
+      '@lezer/common': 1.2.3
+
+  '@codemirror/lang-angular@0.1.3':
+    dependencies:
+      '@codemirror/lang-html': 6.4.9
+      '@codemirror/lang-javascript': 6.2.3
+      '@codemirror/language': 6.11.0
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@codemirror/lang-cpp@6.0.2':
+    dependencies:
+      '@codemirror/language': 6.11.0
+      '@lezer/cpp': 1.1.3
+
+  '@codemirror/lang-css@6.3.1':
+    dependencies:
+      '@codemirror/autocomplete': 6.18.6
+      '@codemirror/language': 6.11.0
+      '@codemirror/state': 6.5.2
+      '@lezer/common': 1.2.3
+      '@lezer/css': 1.1.11
+
+  '@codemirror/lang-go@6.0.1':
+    dependencies:
+      '@codemirror/autocomplete': 6.18.6
+      '@codemirror/language': 6.11.0
+      '@codemirror/state': 6.5.2
+      '@lezer/common': 1.2.3
+      '@lezer/go': 1.0.0
+
+  '@codemirror/lang-html@6.4.9':
+    dependencies:
+      '@codemirror/autocomplete': 6.18.6
+      '@codemirror/lang-css': 6.3.1
+      '@codemirror/lang-javascript': 6.2.3
+      '@codemirror/language': 6.11.0
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.5
+      '@lezer/common': 1.2.3
+      '@lezer/css': 1.1.11
+      '@lezer/html': 1.3.10
+
+  '@codemirror/lang-java@6.0.1':
+    dependencies:
+      '@codemirror/language': 6.11.0
+      '@lezer/java': 1.1.3
+
+  '@codemirror/lang-javascript@6.2.3':
+    dependencies:
+      '@codemirror/autocomplete': 6.18.6
+      '@codemirror/language': 6.11.0
+      '@codemirror/lint': 6.8.5
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.5
+      '@lezer/common': 1.2.3
+      '@lezer/javascript': 1.4.21
+
+  '@codemirror/lang-json@6.0.1':
+    dependencies:
+      '@codemirror/language': 6.11.0
+      '@lezer/json': 1.0.3
+
+  '@codemirror/lang-less@6.0.2':
+    dependencies:
+      '@codemirror/lang-css': 6.3.1
+      '@codemirror/language': 6.11.0
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@codemirror/lang-liquid@6.2.3':
+    dependencies:
+      '@codemirror/autocomplete': 6.18.6
+      '@codemirror/lang-html': 6.4.9
+      '@codemirror/language': 6.11.0
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.5
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@codemirror/lang-markdown@6.3.2':
+    dependencies:
+      '@codemirror/autocomplete': 6.18.6
+      '@codemirror/lang-html': 6.4.9
+      '@codemirror/language': 6.11.0
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.5
+      '@lezer/common': 1.2.3
+      '@lezer/markdown': 1.4.2
+
+  '@codemirror/lang-php@6.0.1':
+    dependencies:
+      '@codemirror/lang-html': 6.4.9
+      '@codemirror/language': 6.11.0
+      '@codemirror/state': 6.5.2
+      '@lezer/common': 1.2.3
+      '@lezer/php': 1.0.2
+
+  '@codemirror/lang-python@6.1.7':
+    dependencies:
+      '@codemirror/autocomplete': 6.18.6
+      '@codemirror/language': 6.11.0
+      '@codemirror/state': 6.5.2
+      '@lezer/common': 1.2.3
+      '@lezer/python': 1.1.17
+
+  '@codemirror/lang-rust@6.0.1':
+    dependencies:
+      '@codemirror/language': 6.11.0
+      '@lezer/rust': 1.0.2
+
+  '@codemirror/lang-sass@6.0.2':
+    dependencies:
+      '@codemirror/lang-css': 6.3.1
+      '@codemirror/language': 6.11.0
+      '@codemirror/state': 6.5.2
+      '@lezer/common': 1.2.3
+      '@lezer/sass': 1.0.7
+
+  '@codemirror/lang-sql@6.8.0':
+    dependencies:
+      '@codemirror/autocomplete': 6.18.6
+      '@codemirror/language': 6.11.0
+      '@codemirror/state': 6.5.2
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@codemirror/lang-vue@0.1.3':
+    dependencies:
+      '@codemirror/lang-html': 6.4.9
+      '@codemirror/lang-javascript': 6.2.3
+      '@codemirror/language': 6.11.0
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@codemirror/lang-wast@6.0.2':
+    dependencies:
+      '@codemirror/language': 6.11.0
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@codemirror/lang-xml@6.1.0':
+    dependencies:
+      '@codemirror/autocomplete': 6.18.6
+      '@codemirror/language': 6.11.0
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.5
+      '@lezer/common': 1.2.3
+      '@lezer/xml': 1.0.6
+
+  '@codemirror/lang-yaml@6.1.2':
+    dependencies:
+      '@codemirror/autocomplete': 6.18.6
+      '@codemirror/language': 6.11.0
+      '@codemirror/state': 6.5.2
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+      '@lezer/yaml': 1.0.3
+
+  '@codemirror/language-data@6.5.1':
+    dependencies:
+      '@codemirror/lang-angular': 0.1.3
+      '@codemirror/lang-cpp': 6.0.2
+      '@codemirror/lang-css': 6.3.1
+      '@codemirror/lang-go': 6.0.1
+      '@codemirror/lang-html': 6.4.9
+      '@codemirror/lang-java': 6.0.1
+      '@codemirror/lang-javascript': 6.2.3
+      '@codemirror/lang-json': 6.0.1
+      '@codemirror/lang-less': 6.0.2
+      '@codemirror/lang-liquid': 6.2.3
+      '@codemirror/lang-markdown': 6.3.2
+      '@codemirror/lang-php': 6.0.1
+      '@codemirror/lang-python': 6.1.7
+      '@codemirror/lang-rust': 6.0.1
+      '@codemirror/lang-sass': 6.0.2
+      '@codemirror/lang-sql': 6.8.0
+      '@codemirror/lang-vue': 0.1.3
+      '@codemirror/lang-wast': 6.0.2
+      '@codemirror/lang-xml': 6.1.0
+      '@codemirror/lang-yaml': 6.1.2
+      '@codemirror/language': 6.11.0
+      '@codemirror/legacy-modes': 6.5.0
+
+  '@codemirror/language@6.11.0':
+    dependencies:
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.5
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+      style-mod: 4.1.2
+
+  '@codemirror/legacy-modes@6.5.0':
+    dependencies:
+      '@codemirror/language': 6.11.0
+
+  '@codemirror/lint@6.8.5':
+    dependencies:
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.5
+      crelt: 1.0.6
+
+  '@codemirror/search@6.5.10':
+    dependencies:
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.5
+      crelt: 1.0.6
+
+  '@codemirror/state@6.5.2':
+    dependencies:
+      '@marijn/find-cluster-break': 1.0.2
+
+  '@codemirror/view@6.36.5':
+    dependencies:
+      '@codemirror/state': 6.5.2
+      style-mod: 4.1.2
+      w3c-keyname: 2.2.8
+
   '@commitlint/cli@19.6.1(@types/node@22.10.2)(typescript@5.7.2)':
     dependencies:
       '@commitlint/format': 19.5.0
@@ -11334,6 +11880,99 @@ snapshots:
 
   '@jspm/import-map@1.1.0': {}
 
+  '@lezer/common@1.2.3': {}
+
+  '@lezer/cpp@1.1.3':
+    dependencies:
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@lezer/css@1.1.11':
+    dependencies:
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@lezer/go@1.0.0':
+    dependencies:
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@lezer/highlight@1.2.1':
+    dependencies:
+      '@lezer/common': 1.2.3
+
+  '@lezer/html@1.3.10':
+    dependencies:
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@lezer/java@1.1.3':
+    dependencies:
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@lezer/javascript@1.4.21':
+    dependencies:
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@lezer/json@1.0.3':
+    dependencies:
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@lezer/lr@1.4.2':
+    dependencies:
+      '@lezer/common': 1.2.3
+
+  '@lezer/markdown@1.4.2':
+    dependencies:
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+
+  '@lezer/php@1.0.2':
+    dependencies:
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@lezer/python@1.1.17':
+    dependencies:
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@lezer/rust@1.0.2':
+    dependencies:
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@lezer/sass@1.0.7':
+    dependencies:
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@lezer/xml@1.0.6':
+    dependencies:
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
+  '@lezer/yaml@1.0.3':
+    dependencies:
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
   '@manypkg/find-root@1.1.0':
     dependencies:
       '@babel/runtime': 7.26.0
@@ -11378,6 +12017,8 @@ snapshots:
       - encoding
       - supports-color
 
+  '@marijn/find-cluster-break@1.0.2': {}
+
   '@microsoft/api-extractor-model@7.29.6(@types/node@22.10.2)':
     dependencies:
       '@microsoft/tsdoc': 0.15.1
@@ -11920,6 +12561,10 @@ snapshots:
 
   '@types/doctrine@0.0.9': {}
 
+  '@types/dompurify@3.2.0':
+    dependencies:
+      dompurify: 3.2.5
+
   '@types/eslint@9.6.1':
     dependencies:
       '@types/estree': 1.0.6
@@ -11948,6 +12593,8 @@ snapshots:
       '@types/node': 22.10.2
     optional: true
 
+  '@types/linkify-it@5.0.0': {}
+
   '@types/lodash.clonedeep@4.5.9':
     dependencies:
       '@types/lodash': 4.17.13
@@ -11962,6 +12609,17 @@ snapshots:
 
   '@types/lodash@4.17.13': {}
 
+  '@types/markdown-it@14.1.2':
+    dependencies:
+      '@types/linkify-it': 5.0.0
+      '@types/mdurl': 2.0.0
+
+  '@types/marked@6.0.0':
+    dependencies:
+      marked: 15.0.8
+
+  '@types/mdurl@2.0.0': {}
+
   '@types/minimatch@3.0.5': {}
 
   '@types/node@12.20.55': {}
@@ -12111,6 +12769,10 @@ snapshots:
       '@typescript-eslint/types': 8.18.1
       eslint-visitor-keys: 4.2.0
 
+  '@vavt/copy2clipboard@1.0.1': {}
+
+  '@vavt/util@2.1.0': {}
+
   '@vee-validate/zod@4.14.7(vue@3.5.13(typescript@5.7.2))':
     dependencies:
       type-fest: 4.30.2
@@ -12378,6 +13040,12 @@ snapshots:
       js-beautify: 1.15.1
       vue-component-type-helpers: 2.1.10
 
+  '@vueup/vue-quill@1.2.0(vue@3.5.13(typescript@5.6.3))':
+    dependencies:
+      quill: 1.3.7
+      quill-delta: 4.2.2
+      vue: 3.5.13(typescript@5.6.3)
+
   '@vueuse/core@10.11.1(vue@3.5.13(typescript@5.7.2))':
     dependencies:
       '@types/web-bluetooth': 0.0.20
@@ -13005,10 +13673,22 @@ snapshots:
       strip-ansi: 6.0.1
       wrap-ansi: 7.0.0
 
+  clone@2.1.2: {}
+
   clsx@2.1.1: {}
 
   cluster-key-slot@1.1.2: {}
 
+  codemirror@6.0.1:
+    dependencies:
+      '@codemirror/autocomplete': 6.18.6
+      '@codemirror/commands': 6.8.1
+      '@codemirror/language': 6.11.0
+      '@codemirror/lint': 6.8.5
+      '@codemirror/search': 6.5.10
+      '@codemirror/state': 6.5.2
+      '@codemirror/view': 6.36.5
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -13165,6 +13845,8 @@ snapshots:
       crc-32: 1.2.2
       readable-stream: 4.6.0
 
+  crelt@1.0.6: {}
+
   croner@9.0.0: {}
 
   cross-env@7.0.3:
@@ -13335,6 +14017,8 @@ snapshots:
 
   cssesc@3.0.0: {}
 
+  cssfilter@0.0.10: {}
+
   cssnano-preset-default@7.0.6(postcss@8.4.49):
     dependencies:
       browserslist: 4.24.3
@@ -13435,6 +14119,15 @@ snapshots:
 
   deep-eql@5.0.2: {}
 
+  deep-equal@1.1.2:
+    dependencies:
+      is-arguments: 1.2.0
+      is-date-object: 1.1.0
+      is-regex: 1.2.1
+      object-is: 1.1.6
+      object-keys: 1.1.1
+      regexp.prototype.flags: 1.5.3
+
   deep-extend@0.6.0: {}
 
   deep-is@0.1.4: {}
@@ -13558,6 +14251,10 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
 
+  dompurify@3.2.5:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
   domutils@2.8.0:
     dependencies:
       dom-serializer: 1.4.1
@@ -14088,6 +14785,8 @@ snapshots:
 
   event-target-shim@5.0.1: {}
 
+  eventemitter3@2.0.3: {}
+
   eventemitter3@5.0.1: {}
 
   events@3.3.0: {}
@@ -14125,6 +14824,8 @@ snapshots:
 
   expect-type@1.1.0: {}
 
+  extend@3.0.2: {}
+
   extendable-error@0.1.7: {}
 
   external-editor@3.1.0:
@@ -14135,6 +14836,10 @@ snapshots:
 
   fast-deep-equal@3.1.3: {}
 
+  fast-diff@1.1.2: {}
+
+  fast-diff@1.2.0: {}
+
   fast-diff@1.3.0: {}
 
   fast-equals@5.0.1: {}
@@ -14371,6 +15076,8 @@ snapshots:
       meow: 12.1.1
       split2: 4.2.0
 
+  github-markdown-css@5.8.1: {}
+
   glob-parent@5.1.2:
     dependencies:
       is-glob: 4.0.3
@@ -14719,6 +15426,11 @@ snapshots:
 
   iron-webcrypto@1.2.1: {}
 
+  is-arguments@1.2.0:
+    dependencies:
+      call-bound: 1.0.3
+      has-tostringtag: 1.0.2
+
   is-array-buffer@3.0.5:
     dependencies:
       call-bind: 1.0.8
@@ -15072,6 +15784,10 @@ snapshots:
 
   lines-and-columns@1.2.4: {}
 
+  linkify-it@5.0.0:
+    dependencies:
+      uc.micro: 2.1.0
+
   lint-staged@15.2.11:
     dependencies:
       chalk: 5.3.0
@@ -15211,6 +15927,10 @@ snapshots:
     dependencies:
       yallist: 4.0.0
 
+  lucide-vue-next@0.453.0(vue@3.5.13(typescript@5.6.3)):
+    dependencies:
+      vue: 3.5.13(typescript@5.6.3)
+
   lucide-vue-next@0.469.0(vue@3.5.13(typescript@5.7.2)):
     dependencies:
       vue: 3.5.13(typescript@5.7.2)
@@ -15260,10 +15980,47 @@ snapshots:
       - bluebird
       - supports-color
 
+  markdown-it-image-figures@2.1.1(markdown-it@14.1.0):
+    dependencies:
+      markdown-it: 14.1.0
+
+  markdown-it-sub@2.0.0: {}
+
+  markdown-it-sup@2.0.0: {}
+
+  markdown-it@14.1.0:
+    dependencies:
+      argparse: 2.0.1
+      entities: 4.5.0
+      linkify-it: 5.0.0
+      mdurl: 2.0.0
+      punycode.js: 2.3.1
+      uc.micro: 2.1.0
+
+  marked@15.0.8: {}
+
   math-intrinsics@1.1.0: {}
 
   mathml-tag-names@2.1.3: {}
 
+  md-editor-v3@5.4.5(vue@3.5.13(typescript@5.6.3)):
+    dependencies:
+      '@codemirror/lang-markdown': 6.3.2
+      '@codemirror/language-data': 6.5.1
+      '@types/markdown-it': 14.1.2
+      '@vavt/copy2clipboard': 1.0.1
+      '@vavt/util': 2.1.0
+      codemirror: 6.0.1
+      lru-cache: 11.0.2
+      lucide-vue-next: 0.453.0(vue@3.5.13(typescript@5.6.3))
+      markdown-it: 14.1.0
+      markdown-it-image-figures: 2.1.1(markdown-it@14.1.0)
+      markdown-it-sub: 2.0.0
+      markdown-it-sup: 2.0.0
+      medium-zoom: 1.1.0
+      vue: 3.5.13(typescript@5.6.3)
+      xss: 1.0.15
+
   mdn-data@2.0.28: {}
 
   mdn-data@2.0.30: {}
@@ -15272,6 +16029,10 @@ snapshots:
 
   mdn-data@2.14.0: {}
 
+  mdurl@2.0.0: {}
+
+  medium-zoom@1.1.0: {}
+
   meow@12.1.1: {}
 
   meow@13.2.0: {}
@@ -15634,6 +16395,11 @@ snapshots:
 
   object-inspect@1.13.3: {}
 
+  object-is@1.1.6:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+
   object-keys@1.1.1: {}
 
   object.assign@4.1.7:
@@ -15771,6 +16537,8 @@ snapshots:
       dot-case: 3.0.4
       tslib: 2.8.1
 
+  parchment@1.1.4: {}
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -16421,6 +17189,8 @@ snapshots:
       picocolors: 1.1.1
       sade: 1.8.1
 
+  punycode.js@2.3.1: {}
+
   punycode@2.3.1: {}
 
   pupa@3.1.0:
@@ -16437,6 +17207,27 @@ snapshots:
 
   queue-tick@1.0.1: {}
 
+  quill-delta@3.6.3:
+    dependencies:
+      deep-equal: 1.1.2
+      extend: 3.0.2
+      fast-diff: 1.1.2
+
+  quill-delta@4.2.2:
+    dependencies:
+      fast-diff: 1.2.0
+      lodash.clonedeep: 4.5.0
+      lodash.isequal: 4.5.0
+
+  quill@1.3.7:
+    dependencies:
+      clone: 2.1.2
+      deep-equal: 1.1.2
+      eventemitter3: 2.0.3
+      extend: 3.0.2
+      parchment: 1.1.4
+      quill-delta: 3.6.3
+
   radix-vue@1.9.11(vue@3.5.13(typescript@5.7.2)):
     dependencies:
       '@floating-ui/dom': 1.6.12
@@ -17104,6 +17895,8 @@ snapshots:
 
   stubborn-fs@1.2.5: {}
 
+  style-mod@4.1.2: {}
+
   style-search@0.1.0: {}
 
   stylehacks@7.0.4(postcss@8.4.49):
@@ -17511,6 +18304,8 @@ snapshots:
 
   typescript@5.7.2: {}
 
+  uc.micro@2.1.0: {}
+
   ufo@1.5.4: {}
 
   unbox-primitive@1.1.0:
@@ -17999,6 +18794,8 @@ snapshots:
     transitivePeerDependencies:
       - vue
 
+  w3c-keyname@2.2.8: {}
+
   warning@4.0.3:
     dependencies:
       loose-envify: 1.4.0
@@ -18245,6 +19042,11 @@ snapshots:
 
   xml-name-validator@4.0.0: {}
 
+  xss@1.0.15:
+    dependencies:
+      commander: 2.20.3
+      cssfilter: 0.0.10
+
   y18n@4.0.3: {}
 
   y18n@5.0.8: {}