diff --git a/src/modules/Comment/index.vue b/src/modules/Comment/index.vue index b8673b2..3e4ae7b 100644 --- a/src/modules/Comment/index.vue +++ b/src/modules/Comment/index.vue @@ -2,35 +2,40 @@
- -
-
- - - - - - - - - + + + +
+
+ + + + + + + + + +
+ + + +
- - - - -
+
@@ -127,7 +132,7 @@
{{ formatTime(reply.time) }} -
{{ reply.content }}
+
@@ -153,13 +158,17 @@ class="inline-publisher" >
+ +
@@ -174,7 +183,9 @@ link @click="submitReply" > - +
@@ -194,8 +205,9 @@ import EmojiPicker from "./EmojiPicker.vue"; import NameAvatar from "@/components/nameAvatar/index.vue"; import { useI18n } from "vue-i18n"; import { useUserStore } from "@/store"; -import { useRelativeTime } from '@/hooks/useRelativeTime' -const { formatTime } = useRelativeTime() +import { useRelativeTime } from "@/hooks/useRelativeTime"; +import mentionEditor from "./mentionEditor.vue"; +const { formatTime } = useRelativeTime(); const userStore = useUserStore(); const { t } = useI18n(); // 当前用户信息 @@ -272,47 +284,60 @@ const cancelReply = () => { activeReply.groupId = null; }; -// @ 识别解析函数 -const parseMention = (text) => { - if (!text) return ""; - // 基础转义 - let safeText = text.replace(//g, ">"); - // 正则匹配 @用户,包裹为 span - return safeText.replace( - /@([\u4e00-\u9fa5\w-]+)/g, - '@$1' - ); -}; -// @提及 圈人操作 -const handleMentionAction = (name) => { - const mentionStr = typeof name === "string" ? `@${name} ` : "@"; - mainInput.value += mentionStr; +// @圈人的操作 +const userList = [ + { id: 1, nickname: "李星倩" }, + { id: 2, nickname: "冯娜" }, + { id: 3, nickname: "张三" } +]; + +const onUserMentioned = (user) => { + console.log('Mentioned:', user.nickname); }; const submitMainComment = () => { if (!mainInput.value.trim()) return ElMessage.warning("内容不能为空"); + + const formattedContent = mainInput.value.replace( + /@([^\s@]+)/g, + '@$1' + ); + commentData.value.unshift({ id: Date.now(), ...currentUser.value, - content: mainInput.value, + content: formattedContent, time: new Date().valueOf(), canDelete: true, children: [], }); + mainInput.value = ""; }; -const submitReply = () => { - const targetGroup = commentData.value.find( - (i) => i.id === activeReply.groupId +// 通用的内容转换函数 +const parseMention = (text) => { + if (!text) return ""; + return text.replace( + /@([^\s@]+)/g, + '@$1' ); +}; + +const submitReply = () => { + const targetGroup = commentData.value.find(i => i.id === activeReply.groupId); if (targetGroup) { + const formattedReply = replyInput.value.replace( + /@([^\s@]+)/g, + '@$1' + ); + targetGroup.children.push({ id: Date.now(), ...currentUser.value, replyTo: activeReply.targetName, - content: replyInput.value, - time: "刚刚", + content: formattedReply, // 使用处理后的 HTML + time: new Date().valueOf(), }); cancelReply(); } @@ -506,6 +531,23 @@ $color-white: #fff; margin-top: 8px; } } + + /* 在 style 标签内添加 */ + :deep(.mention-highlight) { + background-color: rgba(64, 158, 255, 0.1); /* 浅蓝色背景 */ + color: #409eff; /* 蓝色文字 */ + padding: 2px 4px; + border-radius: 4px; + font-weight: 500; + margin: 0 2px; + cursor: pointer; + display: inline-block; + + &:hover { + background-color: rgba(64, 158, 255, 0.2); + text-decoration: underline; + } + } } // 评论组件骨架屏 diff --git a/src/modules/Comment/mentionEditor.vue b/src/modules/Comment/mentionEditor.vue new file mode 100644 index 0000000..e6a58cf --- /dev/null +++ b/src/modules/Comment/mentionEditor.vue @@ -0,0 +1,235 @@ + + + + + \ No newline at end of file diff --git a/src/pages/stage/dict/dictFieldConfig.vue b/src/pages/stage/dict/dictFieldConfig.vue index 6b4e771..3348e8f 100644 --- a/src/pages/stage/dict/dictFieldConfig.vue +++ b/src/pages/stage/dict/dictFieldConfig.vue @@ -183,11 +183,13 @@ const columns = computed(()=>[ prop: "label", label: "字典名称", align: "center", + showOverflowTooltip:true, slot: "labelName", }, { prop: "value", label: "字典值", + showOverflowTooltip:true, align: "center", }, { @@ -206,7 +208,6 @@ const columns = computed(()=>[ label: "更新时间", align: "center", showOverflowTooltip: true, - width:200, formatter: (val) => { return val.updateTime ? dayjs(val.updateTime).format("YYYY-MM-DD HH:mm") @@ -217,7 +218,7 @@ const columns = computed(()=>[ prop: "actions", label: "操作", align: "right", - width: "300", + width:200, actions:[ { label: "添加二级字段", @@ -381,7 +382,7 @@ defineExpose({ hasChild.value = item.hasChild ?? false; // 处理子集的弹窗 if (hasChild.value) { - size.value = "60%"; + size.value = "65%"; childId.value = item.id; if (item.onClose) { onCloseCallback.value = item.onClose; diff --git a/src/pages/stage/origanization/addOrgan.vue b/src/pages/stage/origanization/addOrgan.vue index d0a35cd..05d5401 100644 --- a/src/pages/stage/origanization/addOrgan.vue +++ b/src/pages/stage/origanization/addOrgan.vue @@ -29,7 +29,7 @@ @@ -95,7 +95,8 @@