diff --git a/components.d.ts b/components.d.ts index 9e46a16..fb241d1 100644 --- a/components.d.ts +++ b/components.d.ts @@ -80,6 +80,7 @@ declare module 'vue' { Xxxx: typeof import('./src/components/xxxx/index.vue')['default'] } export interface GlobalDirectives { + vInfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll'] vLoading: typeof import('element-plus/es')['ElLoadingDirective'] } } diff --git a/src/modules/Comment/index.scss b/src/modules/Comment/index.scss index 0fa968b..461a559 100644 --- a/src/modules/Comment/index.scss +++ b/src/modules/Comment/index.scss @@ -128,6 +128,12 @@ $color-white: #fff; } } } + .comment-loading-status{ + display: flex; + justify-content: center; + align-items: center; + padding: 5px 0; + } // 3. 子评论卡片样式 .sub-container { diff --git a/src/modules/Comment/index.vue b/src/modules/Comment/index.vue index 4d59740..c85ddcf 100644 --- a/src/modules/Comment/index.vue +++ b/src/modules/Comment/index.vue @@ -2,182 +2,191 @@
- -
-
- - + +
-
- - +
@@ -206,7 +215,7 @@ - + { if (!mainInput.value.includes(mentionStr)) { mainInput.value = mentionStr + mainInput.value; } - - // 3. 聚焦到输入框 - nextTick(() => { - const textarea = document.querySelector(".fixed-publisher textarea"); - textarea?.focus(); - // 飞书细节：光标移到最后 - textarea.selectionStart = textarea.value.length; - }); }; // 删除回复-删除评论 @@ -350,11 +351,8 @@ const deleteMainComment = (target) => { }; // emoji输入框选择 -const onSelectEmoji = (emoji, type) => { - console.log("emoji", emoji, type); - if (type === "main") { - mainInput.value += emoji; - } +const onSelectEmoji = (emoji) => { + mainInput.value += emoji; }; // 取消评论 @@ -374,7 +372,7 @@ const userList = [ // TODO:@ 获取选中的用户信息 const onUserMentioned = (user) => { - console.log("Mentioned:", user.nickname); + console.log("Mentioned:", user); }; /** @@ -470,15 +468,40 @@ const updateUIAfterSend = (type, params) => { }; // TODO:展开 -const loadingReply = ref(false); +const MOCK_REPLIES_POOL = Array.from({ length: 20 }, (_, i) => ({ + id: 200 + i, + content: `这是模拟的第 ${i + 1} 条回复内容，用于测试分页加载。`, + createTime: Date.now() - i * 100000, + employee: { + id: 10 + i, + name: `同事${i + 1}`, + avatar: "", + }, + reply: null, +})); const loadReplies = async (item) => { - if(!loadingReply.value) return; - loadingReply.value = true; + if (item.loading) return; + item.loading = true; try { // 后端获取最终的数据信息 // const res = await xxxxxx() + // 模拟延迟 + await new Promise((resolve) => setTimeout(resolve, 800)); const res = []; - const combined = [...(item.localReplies || []), ...res, ...item.children]; + + // 模拟的数据 + const currentLength = item.children.length; + const pageSize = 3; + const nextBatch = MOCK_REPLIES_POOL.slice( + currentLength, + currentLength + pageSize + ); + const combined = [ + ...(item.localReplies || []), + ...res, + ...item.children, + ...nextBatch, + ]; item.children = combined.filter( (v, i, a) => a.findIndex((t) => t.id === v.id) === i ); @@ -487,14 +510,17 @@ const loadReplies = async (item) => { } catch (error) { console.log("error", error); } finally { - loading.value = false; + item.loading = false; } }; // 收起 const collapseReplies = (item) => { item.showAllReplies = false; - // nextTick(() => scrollIntoView(item.id)); + nextTick(() => { + const el = document.getElementById(`comment-${item.id}`); + el?.scrollIntoView({ behavior: "smooth", block: "nearest" }); + }); }; /** @@ -523,6 +549,56 @@ const parseMention = (text, atUsers = userList) => { return result; }; +// FIXME:加载更多 +const page = ref(1); +const loadingMore = ref(false); // 分页加载状态 +const noMore = ref(false); // 是否全部加载完毕 +const totalCount = ref(20); // 模拟后端返回的总评论数 +const disabled = computed(() => loadingMore.value || noMore.value); +const loadMore = async () => { + if (disabled.value) return; + + loadingMore.value = true; + + // 模拟接口请求 + await new Promise((resolve) => setTimeout(resolve, 1000)); + + try { + // 模拟构造下一页 Mock 数据 + const nextBatch = [ + { + id: Date.now(), + content: `这是第 ${page.value + 1} 页的评论内容`, + createTime: new Date().toISOString(), + employee: { id: 88, name: "滚动测试员", avatar: "" }, + childrenCount: 2, + children: [], + }, + { + id: Date.now() + 1, + content: "多拉出一条数据", + createTime: new Date().toISOString(), + employee: { id: 89, name: "张三", avatar: "" }, + childrenCount: 0, + children: [], + }, + ]; + + // 合并数据 + commentData.value.push(...nextBatch); + page.value++; + + // 判断是否加载完（模拟） + if (commentData.value.length >= totalCount.value) { + noMore.value = true; + } + } catch (error) { + console.error("加载失败", error); + } finally { + loadingMore.value = false; + } +}; + // 初始化 onMounted(() => { setTimeout(() => { diff --git a/src/pages/stage/origanization/addOrgan.vue b/src/pages/stage/origanization/addOrgan.vue index 05d5401..6e7afd3 100644 --- a/src/pages/stage/origanization/addOrgan.vue +++ b/src/pages/stage/origanization/addOrgan.vue @@ -29,7 +29,7 @@ @@ -81,9 +81,9 @@