From 5e40239bdcc435b0bbbe41267ca01db300caaee1 Mon Sep 17 00:00:00 2001
From: Evan <skcy@vip.qq.com>
Date: Sun, 4 Jun 2023 13:46:41 +0800
Subject: [PATCH 01/11] Update issue templates (#23)

---
 .github/ISSUE_TEMPLATE/bug_report.md          | 71 ++++++++++++++++
 .../ISSUE_TEMPLATE/pull_request_template.md   | 84 +++++++++++++++++++
 2 files changed, 155 insertions(+)
 create mode 100644 .github/ISSUE_TEMPLATE/bug_report.md
 create mode 100644 .github/ISSUE_TEMPLATE/pull_request_template.md

diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
new file mode 100644
index 00000000..b04d1c68
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,71 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+name: Bug Report
+description: File a bug report
+title: "[Bug]: "
+labels: ["bug", "triage"]
+assignees:
+  - octocat
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this bug report!
+  - type: input
+    id: contact
+    attributes:
+      label: Contact Details
+      description: How can we get in touch with you if we need more info?
+      placeholder: ex. email@example.com
+    validations:
+      required: false
+  - type: textarea
+    id: what-happened
+    attributes:
+      label: What happened?
+      description: Also tell us, what did you expect to happen?
+      placeholder: Tell us what you see!
+      value: "A bug happened!"
+    validations:
+      required: true
+  - type: dropdown
+    id: version
+    attributes:
+      label: Version
+      description: What version of our software are you running?
+      options:
+        - 1.0.2 (Default)
+        - 1.0.3 (Edge)
+    validations:
+      required: true
+  - type: dropdown
+    id: browsers
+    attributes:
+      label: What browsers are you seeing the problem on?
+      multiple: true
+      options:
+        - Firefox
+        - Chrome
+        - Safari
+        - Microsoft Edge
+  - type: textarea
+    id: logs
+    attributes:
+      label: Relevant log output
+      description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks.
+      render: shell
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Code of Conduct
+      description: By submitting this issue, you agree to follow our [Code of Conduct](https://example.com)
+      options:
+        - label: I agree to follow this project's Code of Conduct
+          required: true
diff --git a/.github/ISSUE_TEMPLATE/pull_request_template.md b/.github/ISSUE_TEMPLATE/pull_request_template.md
new file mode 100644
index 00000000..0bbafd1d
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/pull_request_template.md
@@ -0,0 +1,84 @@
+---
+name: PULL_REQUEST_TEMPLATE
+about: PR 模板
+title: "[Feat]"
+labels: ''
+assignees: Evansy
+
+---
+
+<!--
+首先，感谢你的贡献！😄
+
+新特性请提交至 feature 分支，其余可提交至 master 分支。
+在维护者审核通过后会合并。
+请确保填写以下 pull request 的信息，谢谢！~
+-->
+
+### 🤔 这个变动的性质是？
+
+- [ ] 新特性提交
+- [ ] 日常 bug 修复
+- [ ] 站点、文档改进
+- [ ] 演示代码改进
+- [ ] 组件样式/交互改进
+- [ ] TypeScript 定义更新
+- [ ] 包体积优化
+- [ ] 性能优化
+- [ ] 功能增强
+- [ ] 国际化改进
+- [ ] 重构
+- [ ] 代码风格优化
+- [ ] 测试用例
+- [ ] 分支合并
+- [ ] 工作流程
+- [ ] 其他改动（是关于什么的改动？）
+
+### 🔗 相关 Issue
+
+<!--
+1. 描述相关需求的来源，如相关的 issue 讨论链接。
+2. 例如 close #xxxx、 fix #xxxx
+-->
+
+### 💡 需求背景和解决方案
+
+<!--
+1. 要解决的具体问题。
+2. 列出最终的 API 实现和用法。
+3. 涉及UI/交互变动需要有截图或 GIF。
+-->
+
+### 📝 更新日志
+
+<!--
+从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
+-->
+
+| 语言    | 更新描述 |
+| ------- | -------- |
+| 🇺🇸 英文 |          |
+| 🇨🇳 中文 |          |
+
+### ☑️ 请求合并前的自查清单
+
+⚠️ 请自检并全部**勾选全部选项**。⚠️
+
+- [ ] 文档已补充或无须补充
+- [ ] 代码演示已提供或无须提供
+- [ ] TypeScript 定义已补充或无须补充
+- [ ] Changelog 已提供或无须提供
+
+---
+
+<!--
+以下为 copilot 自动生成的 CR 结果，请勿修改
+-->
+
+### 🚀 概述
+
+copilot:summary
+
+### 🔍 实现细节
+
+copilot:walkthrough

From f9b5b519636373dbcebcb5f7aab26141364d683a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=A7=E8=A1=A5?=
 <38815121+AuYuHui@users.noreply.github.com>
Date: Sun, 4 Jun 2023 21:47:42 +0800
Subject: [PATCH 02/11] =?UTF-8?q?feat:=20=E5=8F=B3=E9=94=AE=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E5=A4=8D=E5=88=B6=E6=96=87=E6=9C=AC=E5=86=85=E5=AE=B9?=
 =?UTF-8?q?=20(#26)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 右键菜单复制文本内容

* fix: 修复未登录前emoji标签可输入

* fix: 聊天操作显示时滚动可能会超出列表

* fix: 移动端 msgOption, 宽度太小溢出
---
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 15 +++++++++-
 src/main.ts                                   |  1 +
 src/utils/copy.ts                             | 19 +++++++++++++
 src/views/Home/components/ChatBox/index.vue   |  7 ++++-
 .../components/ChatList/MsgItem/index.vue     | 28 +++++++++++++++----
 6 files changed, 64 insertions(+), 7 deletions(-)
 create mode 100644 src/utils/copy.ts

diff --git a/package.json b/package.json
index 6dd2b056..c5984095 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
   "dependencies": {
     "@alova/scene-vue": "^1.0.4",
     "@element-plus/icons-vue": "^2.1.0",
+    "@imengyu/vue3-context-menu": "^1.2.10",
     "alova": "^2.3.0",
     "dayjs": "^1.11.7",
     "dompurify": "^3.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index baf1a6bc..ce86b788 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,4 +1,8 @@
-lockfileVersion: '6.0'
+lockfileVersion: '6.1'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
 
 dependencies:
   '@alova/scene-vue':
@@ -7,6 +11,9 @@ dependencies:
   '@element-plus/icons-vue':
     specifier: ^2.1.0
     version: registry.npmmirror.com/@element-plus/icons-vue@2.1.0(vue@3.2.47)
+  '@imengyu/vue3-context-menu':
+    specifier: ^1.2.10
+    version: registry.npmmirror.com/@imengyu/vue3-context-menu@1.2.10
   alova:
     specifier: ^2.3.0
     version: registry.npmmirror.com/alova@2.3.0
@@ -1166,6 +1173,12 @@ packages:
       - supports-color
     dev: true
 
+  registry.npmmirror.com/@imengyu/vue3-context-menu@1.2.10:
+    resolution: {integrity: sha512-L+qIoqcewQ8SPk2PMvsaMD9HWxFouij0JAqYwn19Fz7giqz0rLpWMf9aJRpQ3ysOySEKPdilg8dLYYB96QmGHA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@imengyu/vue3-context-menu/-/vue3-context-menu-1.2.10.tgz}
+    name: '@imengyu/vue3-context-menu'
+    version: 1.2.10
+    dev: false
+
   registry.npmmirror.com/@jridgewell/gen-mapping@0.3.3:
     resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz}
     name: '@jridgewell/gen-mapping'
diff --git a/src/main.ts b/src/main.ts
index b96be10f..f08fd7a0 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import dayjs from 'dayjs'
 import 'dayjs/locale/zh-cn'
 import weekday from 'dayjs/plugin/weekday'
+import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
 // import 'element-plus/dist/index.css'
 import { createPinia } from 'pinia'
 
diff --git a/src/utils/copy.ts b/src/utils/copy.ts
new file mode 100644
index 00000000..456f2fa1
--- /dev/null
+++ b/src/utils/copy.ts
@@ -0,0 +1,19 @@
+export function copyToClip(text: string) {
+  return new Promise((resolve, reject) => {
+    try {
+      const input: HTMLTextAreaElement = document.createElement('textarea')
+      input.setAttribute('readonly', 'readonly')
+      input.value = text
+      input.style.zIndex = '-1'
+      document.body.appendChild(input)
+      input.select()
+      if (document.execCommand('copy'))
+        document.execCommand('copy')
+      document.body.removeChild(input)
+      resolve(text)
+    }
+    catch (error) {
+      reject(error)
+    }
+  })
+}
diff --git a/src/views/Home/components/ChatBox/index.vue b/src/views/Home/components/ChatBox/index.vue
index 7f1c2bcf..b666b9c5 100644
--- a/src/views/Home/components/ChatBox/index.vue
+++ b/src/views/Home/components/ChatBox/index.vue
@@ -140,7 +140,12 @@ const insertText = (emoji: string) => {
                   <button class="emoji-button">😊</button>
                 </template>
                 <ul class="emoji-list">
-                  <li class="emoji-item" v-for="(emoji, $index) of emojis" :key="$index" @click="insertText(emoji)">
+                  <li
+                    class="emoji-item"
+                    v-for="(emoji, $index) of emojis"
+                    :key="$index"
+                    v-login="() => insertText(emoji)"
+                  >
                     {{ emoji }}
                   </li>
                 </ul>
diff --git a/src/views/Home/components/ChatList/MsgItem/index.vue b/src/views/Home/components/ChatList/MsgItem/index.vue
index 24403db8..b72c3a41 100644
--- a/src/views/Home/components/ChatList/MsgItem/index.vue
+++ b/src/views/Home/components/ChatList/MsgItem/index.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, ref, type PropType } from 'vue'
+import ContextMenu from '@imengyu/vue3-context-menu'
 import { useUserStore } from '@/stores/user'
 import { formatTimestamp } from '@/utils/computedTime'
 import type { MessageItemType } from '@/services/types'
-import type { PropType } from 'vue'
 import defaultAvatar from '@/assets/avatars/default.png'
 import RenderMsg from '@/components/RenderMsg'
 import MsgOption from '../MsgOption/index.vue'
 import type { TooltipTriggerType } from 'element-plus/es/components/tooltip/src/trigger'
+import { copyToClip } from '@/utils/copy'
 
 const props = defineProps({
   // 消息体
@@ -50,12 +51,29 @@ const renderMsgRef = ref<HTMLElement | null>(null)
 const boxRef = ref<HTMLElement | null>(null)
 const tooltipPlacement = ref()
 
+/** 右键菜单 */
+function handleRightClick(e: MouseEvent, msg: MessageItemType) {
+  ContextMenu.showContextMenu({
+    theme: 'mac dark',
+    items: [
+      {
+        label: '复制',
+        onClick: () => copyToClip(msg.message.content),
+      },
+    ],
+    zIndex: 3,
+    minWidth: 230,
+    x: e.x,
+    y: e.y,
+  })
+}
+
 onMounted(() => {
   nextTick(() => {
     if (renderMsgRef.value && boxRef.value) {
       const renderMsgWidth = renderMsgRef.value.clientWidth
       const boxWidth = boxRef.value.clientWidth
-      if (renderMsgWidth + 85 <= boxWidth) {
+      if (renderMsgWidth + 100 <= boxWidth) {
         tooltipPlacement.value = 'right-end'
       } else if (props.msg.message.reply) {
         tooltipPlacement.value = 'top-end'
@@ -98,12 +116,12 @@ onMounted(() => {
         :offset="0"
         :hide-after="0"
         :show-arrow="false"
-        :appendToBody="false"
+        :teleported="false"
       >
         <template #content>
           <MsgOption :msg="msg" />
         </template>
-        <div class="chat-item-content" ref="renderMsgRef">
+        <div class="chat-item-content" ref="renderMsgRef" @contextmenu.prevent.stop="handleRightClick($event, msg)">
           <RenderMsg :text="msg.message.content.trim()" :url-map="msg.message.urlTitleMap" :is-me="isCurrentUser" />
         </div>
       </el-tooltip>

From 069b4c7ad67d75ea3be82f40633eccf0ae970954 Mon Sep 17 00:00:00 2001
From: Evan <skcy@vip.qq.com>
Date: Sun, 4 Jun 2023 23:35:05 +0800
Subject: [PATCH 03/11] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=9B=9E?=
 =?UTF-8?q?=E5=A4=8D=E8=B7=B3=E8=BD=AC=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/operate-icons/to_top.svg           |   1 +
 src/services/types.ts                         | 141 +++++++++---------
 src/stores/chat.ts                            |  15 +-
 .../components/ChatList/MsgItem/index.vue     |  44 +++++-
 .../components/ChatList/MsgItem/styles.scss   |  28 +++-
 src/views/Home/components/ChatList/index.vue  |   5 +-
 6 files changed, 148 insertions(+), 86 deletions(-)
 create mode 100644 src/assets/operate-icons/to_top.svg

diff --git a/src/assets/operate-icons/to_top.svg b/src/assets/operate-icons/to_top.svg
new file mode 100644
index 00000000..78645853
--- /dev/null
+++ b/src/assets/operate-icons/to_top.svg
@@ -0,0 +1 @@
+<svg class="prefix__icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M535.467 241.067c-12.8-8.534-27.734-8.534-40.534 0L183.467 488.533c-6.4 6.4-12.8 14.934-12.8 23.467 0 2.133 0 6.4 2.133 8.533 2.133 12.8 14.933 21.334 27.733 21.334h155.734V864c0 19.2 12.8 29.867 32 29.867h249.6C659.2 893.867 672 881.067 672 864V544h151.467c12.8 0 25.6-8.533 27.733-21.333s0-25.6-8.533-34.134l-307.2-247.466zM864 96H160c-17.067 0-32 14.933-32 32s14.933 32 32 32h704c17.067 0 32-14.933 32-32s-14.933-32-32-32z" fill="#fff"/></svg>
diff --git a/src/services/types.ts b/src/services/types.ts
index 97bcc285..64a78177 100644
--- a/src/services/types.ts
+++ b/src/services/types.ts
@@ -70,6 +70,77 @@ export enum MessageType {
   Danger,
 }
 
+export type MessageReplyType = {
+  /**
+   * 是否可消息跳转 0否 1是
+   */
+  canCallback: number
+  /**
+   * 是否可消息跳转 0否 1是
+   */
+  content: string
+  /**
+   * 跳转间隔的消息条数
+   */
+  gapCount: number
+  /**
+   * 消息id
+   */
+  id: number
+  /**
+   * 用户名称
+   */
+  username: string
+}
+
+export type MessageItemContentType = {
+  /**
+   * 消息内容
+   */
+  content: string
+  /**
+   * 消息id
+   */
+  id: number
+  /**
+   * 消息标记
+   */
+  messageMark: {
+    /**
+     * 点赞数
+     */
+    likeCount: number
+    /**
+     * 该用户是否已经点赞 0否 1是
+     */
+    userLike: IsYet
+    /**
+     * 点赞数
+     */
+    dislikeCount: number
+    /**
+     * 到赞数
+     */
+    userDislike: IsYet
+  }
+  /**
+   * 父消息，如果没有父消息，返回的是null
+   */
+  reply: MessageReplyType | null
+  /**
+   * 消息发送时间
+   */
+  sendTime: number
+  /**
+   * 消息类型 1正常文本 2.爆赞 （点赞超过10）3.危险发言（举报超5）
+   */
+  type: MessageType
+  /**
+   * 消息中的链接
+   */
+  urlTitleMap: Record<string, string>
+}
+
 export type MessageItemType = {
   /**
    * 发送者信息
@@ -108,74 +179,8 @@ export type MessageItemType = {
   /**
    * 消息详情
    */
-  message: {
-    /**
-     * 消息内容
-     */
-    content: string
-    /**
-     * 消息id
-     */
-    id: number
-    /**
-     * 消息标记
-     */
-    messageMark: {
-      /**
-       * 点赞数
-       */
-      likeCount: number
-      /**
-       * 该用户是否已经点赞 0否 1是
-       */
-      userLike: IsYet
-      /**
-       * 点赞数
-       */
-      dislikeCount: number
-      /**
-       * 到赞数
-       */
-      userDislike: IsYet
-    }
-    /**
-     * 父消息，如果没有父消息，返回的是null
-     */
-    reply: {
-      /**
-       * 是否可消息跳转 0否 1是
-       */
-      canCallback: number
-      /**
-       * 是否可消息跳转 0否 1是
-       */
-      content: string
-      /**
-       * 跳转间隔的消息条数
-       */
-      gapCount: number
-      /**
-       * 消息id
-       */
-      id: number
-      /**
-       * 用户名称
-       */
-      username: string
-    } | null
-    /**
-     * 消息发送时间
-     */
-    sendTime: number
-    /**
-     * 消息类型 1正常文本 2.爆赞 （点赞超过10）3.危险发言（举报超5）
-     */
-    type: MessageType
-    /**
-     * 消息中的链接
-     */
-    urlTitleMap: Record<string, string>
-  }
+  message: MessageItemContentType
+
   // 是否显示时间，有值才显示
   timeBlock?: string
 }
diff --git a/src/stores/chat.ts b/src/stores/chat.ts
index 387d6234..82bcbeb7 100644
--- a/src/stores/chat.ts
+++ b/src/stores/chat.ts
@@ -22,9 +22,9 @@ export const useChatStore = defineStore('chat', () => {
   // 当前消息回复
   const currentMsgReply = reactive<Partial<MessageItemType>>({})
 
-  const getMsgList = async () => {
+  const getMsgList = async (size = pageSize) => {
     isLoading.value = true
-    const data = await apis.getMsgList({ params: { pageSize, cursor: cursor.value, roomId: 1 } }).send()
+    const data = await apis.getMsgList({ params: { pageSize: size, cursor: cursor.value, roomId: 1 } }).send()
     if (!data) return
     chatMessageList.value = [...computedTimeBlock(data.list), ...chatMessageList.value]
     cursor.value = data.cursor
@@ -62,16 +62,23 @@ export const useChatStore = defineStore('chat', () => {
     chatMessageList.value = chatMessageList.value.filter((item) => item.fromUser.uid !== uid)
   }
 
-  const loadMore = async () => {
+  const loadMore = async (size?: number) => {
     if (isLast.value && isLoading.value) return
-    await getMsgList()
+    await getMsgList(size)
   }
 
   const clearNewMsgCount = () => {
     newMsgCount.value = 0
   }
 
+  // 查找消息在列表里面的索引，倒过来的索引
+  const getMsgIndex = (msgId: number) => {
+    if (!msgId || isNaN(Number(msgId))) return -1
+    return chatMessageList.value.findIndex((item) => item.message.id === msgId)
+  }
+
   return {
+    getMsgIndex,
     chatMessageList,
     pushMsg,
     clearNewMsgCount,
diff --git a/src/views/Home/components/ChatList/MsgItem/index.vue b/src/views/Home/components/ChatList/MsgItem/index.vue
index 24403db8..71f53111 100644
--- a/src/views/Home/components/ChatList/MsgItem/index.vue
+++ b/src/views/Home/components/ChatList/MsgItem/index.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, ref, type Ref, type PropType, inject } from 'vue'
+import ContextMenu from '@imengyu/vue3-context-menu'
 import { useUserStore } from '@/stores/user'
+import { useChatStore, pageSize } from '@/stores/chat'
 import { formatTimestamp } from '@/utils/computedTime'
-import type { MessageItemType } from '@/services/types'
-import type { PropType } from 'vue'
+import type { MessageItemType, MessageItemContentType } from '@/services/types'
 import defaultAvatar from '@/assets/avatars/default.png'
 import RenderMsg from '@/components/RenderMsg'
 import MsgOption from '../MsgOption/index.vue'
@@ -38,6 +39,7 @@ const props = defineProps({
 })
 
 const userStore = useUserStore()
+const chatStore = useChatStore()
 const myBadge = computed(() => userStore?.userInfo.badge)
 const isCurrentUser = computed(() => props.msg?.fromUser.uid === userStore?.userInfo.uid)
 const chatCls = computed(() => ({
@@ -49,6 +51,28 @@ const chatCls = computed(() => ({
 const renderMsgRef = ref<HTMLElement | null>(null)
 const boxRef = ref<HTMLElement | null>(null)
 const tooltipPlacement = ref()
+const virtualListRef = inject<Ref>('virtualListRef')
+
+// 滚动到消息
+const scrollToMsg = async (msg: MessageItemContentType) => {
+  const { reply, id } = msg
+  // 不允许跳转不跳转，目前是 100 条(后端配置)以内允许跳转
+  if (!reply || !reply.canCallback) return
+  // 如果消息已经加载过了，就直接跳转
+  const index = chatStore.getMsgIndex(reply.id)
+  if (index > -1) {
+    virtualListRef?.value?.scrollToIndex(index)
+  } else {
+    // 如果没有加载过，就先加载，然后跳转
+    const curMsgIndex = chatStore.getMsgIndex(id)
+    // 先计算大概要加载多少个 pageSize 固定倍数的。
+    const needLoadPageSize = Math.ceil((reply.gapCount - curMsgIndex) / pageSize) * pageSize
+    // 加载数据
+    await chatStore.loadMore(needLoadPageSize)
+    // 跳转
+    setTimeout(virtualListRef?.value?.scrollToIndex(chatStore.getMsgIndex(reply.id)), 0)
+  }
+}
 
 onMounted(() => {
   nextTick(() => {
@@ -107,7 +131,13 @@ onMounted(() => {
           <RenderMsg :text="msg.message.content.trim()" :url-map="msg.message.urlTitleMap" :is-me="isCurrentUser" />
         </div>
       </el-tooltip>
-      <div v-if="msg.message.reply" class="chat-item-reply">
+      <div
+        v-if="msg.message.reply"
+        class="chat-item-reply"
+        :class="{ pointer: msg.message.reply.canCallback }"
+        @click="scrollToMsg(msg.message)"
+      >
+        <i class="can-scroll-icon" v-if="msg.message.reply.canCallback" />
         <span class="ellipsis"> {{ msg.message.reply.username }}: {{ msg.message.reply.content }} </span>
       </div>
     </div>
@@ -118,10 +148,10 @@ onMounted(() => {
 
 <style lang="scss">
 .option-tooltip {
-  color: #fff;
+  z-index: 3;
   padding: 0;
-  border: none !important;
+  color: #fff;
   background: none !important;
-  z-index: 3;
+  border: none !important;
 }
 </style>
diff --git a/src/views/Home/components/ChatList/MsgItem/styles.scss b/src/views/Home/components/ChatList/MsgItem/styles.scss
index e6f87d45..edd80986 100644
--- a/src/views/Home/components/ChatList/MsgItem/styles.scss
+++ b/src/views/Home/components/ChatList/MsgItem/styles.scss
@@ -72,19 +72,21 @@
   }
 
   &-reply {
+    display: flex;
+    align-items: center;
     width: fit-content;
+    padding: 4px 12px;
     margin-top: 4px;
     margin-right: auto;
+    overflow: hidden;
+    font-size: 12px;
+    color: var(--font-light);
+    background-color: #424656;
+    border-radius: 8px;
 
     .ellipsis {
       display: -webkit-inline-box;
-      padding: 4px 12px;
-      overflow: hidden;
-      font-size: 12px;
-      color: var(--font-light);
       text-overflow: ellipsis;
-      background-color: #424656;
-      border-radius: 8px;
       -webkit-line-clamp: 4;
       -webkit-box-orient: vertical;
     }
@@ -122,6 +124,10 @@
   .chat-item-reply {
     margin-right: 0;
     margin-left: auto;
+
+    &.pointer {
+      cursor: pointer;
+    }
   }
 }
 
@@ -148,3 +154,13 @@
 .is-me .chat-item-content {
   background-color: var(--color-primary);
 }
+
+.can-scroll-icon {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  margin-right: 4px;
+  background-image: url('@/assets/operate-icons/to_top.svg');
+  background-position: center;
+  background-size: contain;
+}
diff --git a/src/views/Home/components/ChatList/index.vue b/src/views/Home/components/ChatList/index.vue
index f87f7a90..5ce91657 100644
--- a/src/views/Home/components/ChatList/index.vue
+++ b/src/views/Home/components/ChatList/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, nextTick } from 'vue'
+import { ref, onMounted, nextTick, provide } from 'vue'
 import throttle from 'lodash/throttle'
 import { useChatStore } from '@/stores/chat'
 import type { MessageItemType } from '@/services/types'
@@ -17,6 +17,9 @@ const goToBottom = () => {
   }
 }
 
+// 提供虚拟列表 ref 给子组件使用
+provide('virtualListRef', virtualListRef)
+
 onMounted(() => {
   nextTick(() => {
     chatStore.chatListToBottomAction = () => {

From 813943566077934d60f60c09fc8fa7c3cb993fbc Mon Sep 17 00:00:00 2001
From: Evan <skcy@vip.qq.com>
Date: Sun, 4 Jun 2023 23:37:05 +0800
Subject: [PATCH 04/11] =?UTF-8?q?Merge=20branch=20'feature/=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E5=9B=9E=E5=A4=8D=E8=B7=B3=E8=BD=AC=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?'=20into=20develop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/operate-icons/to_top.svg           |   1 +
 src/services/types.ts                         | 141 +++++++++---------
 src/stores/chat.ts                            |  15 +-
 src/utils/copy.ts                             |   6 +-
 .../components/ChatList/MsgItem/index.vue     |  42 +++++-
 .../components/ChatList/MsgItem/styles.scss   |  28 +++-
 src/views/Home/components/ChatList/index.vue  |   5 +-
 7 files changed, 149 insertions(+), 89 deletions(-)
 create mode 100644 src/assets/operate-icons/to_top.svg

diff --git a/src/assets/operate-icons/to_top.svg b/src/assets/operate-icons/to_top.svg
new file mode 100644
index 00000000..78645853
--- /dev/null
+++ b/src/assets/operate-icons/to_top.svg
@@ -0,0 +1 @@
+<svg class="prefix__icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M535.467 241.067c-12.8-8.534-27.734-8.534-40.534 0L183.467 488.533c-6.4 6.4-12.8 14.934-12.8 23.467 0 2.133 0 6.4 2.133 8.533 2.133 12.8 14.933 21.334 27.733 21.334h155.734V864c0 19.2 12.8 29.867 32 29.867h249.6C659.2 893.867 672 881.067 672 864V544h151.467c12.8 0 25.6-8.533 27.733-21.333s0-25.6-8.533-34.134l-307.2-247.466zM864 96H160c-17.067 0-32 14.933-32 32s14.933 32 32 32h704c17.067 0 32-14.933 32-32s-14.933-32-32-32z" fill="#fff"/></svg>
diff --git a/src/services/types.ts b/src/services/types.ts
index 97bcc285..64a78177 100644
--- a/src/services/types.ts
+++ b/src/services/types.ts
@@ -70,6 +70,77 @@ export enum MessageType {
   Danger,
 }
 
+export type MessageReplyType = {
+  /**
+   * 是否可消息跳转 0否 1是
+   */
+  canCallback: number
+  /**
+   * 是否可消息跳转 0否 1是
+   */
+  content: string
+  /**
+   * 跳转间隔的消息条数
+   */
+  gapCount: number
+  /**
+   * 消息id
+   */
+  id: number
+  /**
+   * 用户名称
+   */
+  username: string
+}
+
+export type MessageItemContentType = {
+  /**
+   * 消息内容
+   */
+  content: string
+  /**
+   * 消息id
+   */
+  id: number
+  /**
+   * 消息标记
+   */
+  messageMark: {
+    /**
+     * 点赞数
+     */
+    likeCount: number
+    /**
+     * 该用户是否已经点赞 0否 1是
+     */
+    userLike: IsYet
+    /**
+     * 点赞数
+     */
+    dislikeCount: number
+    /**
+     * 到赞数
+     */
+    userDislike: IsYet
+  }
+  /**
+   * 父消息，如果没有父消息，返回的是null
+   */
+  reply: MessageReplyType | null
+  /**
+   * 消息发送时间
+   */
+  sendTime: number
+  /**
+   * 消息类型 1正常文本 2.爆赞 （点赞超过10）3.危险发言（举报超5）
+   */
+  type: MessageType
+  /**
+   * 消息中的链接
+   */
+  urlTitleMap: Record<string, string>
+}
+
 export type MessageItemType = {
   /**
    * 发送者信息
@@ -108,74 +179,8 @@ export type MessageItemType = {
   /**
    * 消息详情
    */
-  message: {
-    /**
-     * 消息内容
-     */
-    content: string
-    /**
-     * 消息id
-     */
-    id: number
-    /**
-     * 消息标记
-     */
-    messageMark: {
-      /**
-       * 点赞数
-       */
-      likeCount: number
-      /**
-       * 该用户是否已经点赞 0否 1是
-       */
-      userLike: IsYet
-      /**
-       * 点赞数
-       */
-      dislikeCount: number
-      /**
-       * 到赞数
-       */
-      userDislike: IsYet
-    }
-    /**
-     * 父消息，如果没有父消息，返回的是null
-     */
-    reply: {
-      /**
-       * 是否可消息跳转 0否 1是
-       */
-      canCallback: number
-      /**
-       * 是否可消息跳转 0否 1是
-       */
-      content: string
-      /**
-       * 跳转间隔的消息条数
-       */
-      gapCount: number
-      /**
-       * 消息id
-       */
-      id: number
-      /**
-       * 用户名称
-       */
-      username: string
-    } | null
-    /**
-     * 消息发送时间
-     */
-    sendTime: number
-    /**
-     * 消息类型 1正常文本 2.爆赞 （点赞超过10）3.危险发言（举报超5）
-     */
-    type: MessageType
-    /**
-     * 消息中的链接
-     */
-    urlTitleMap: Record<string, string>
-  }
+  message: MessageItemContentType
+
   // 是否显示时间，有值才显示
   timeBlock?: string
 }
diff --git a/src/stores/chat.ts b/src/stores/chat.ts
index 387d6234..82bcbeb7 100644
--- a/src/stores/chat.ts
+++ b/src/stores/chat.ts
@@ -22,9 +22,9 @@ export const useChatStore = defineStore('chat', () => {
   // 当前消息回复
   const currentMsgReply = reactive<Partial<MessageItemType>>({})
 
-  const getMsgList = async () => {
+  const getMsgList = async (size = pageSize) => {
     isLoading.value = true
-    const data = await apis.getMsgList({ params: { pageSize, cursor: cursor.value, roomId: 1 } }).send()
+    const data = await apis.getMsgList({ params: { pageSize: size, cursor: cursor.value, roomId: 1 } }).send()
     if (!data) return
     chatMessageList.value = [...computedTimeBlock(data.list), ...chatMessageList.value]
     cursor.value = data.cursor
@@ -62,16 +62,23 @@ export const useChatStore = defineStore('chat', () => {
     chatMessageList.value = chatMessageList.value.filter((item) => item.fromUser.uid !== uid)
   }
 
-  const loadMore = async () => {
+  const loadMore = async (size?: number) => {
     if (isLast.value && isLoading.value) return
-    await getMsgList()
+    await getMsgList(size)
   }
 
   const clearNewMsgCount = () => {
     newMsgCount.value = 0
   }
 
+  // 查找消息在列表里面的索引，倒过来的索引
+  const getMsgIndex = (msgId: number) => {
+    if (!msgId || isNaN(Number(msgId))) return -1
+    return chatMessageList.value.findIndex((item) => item.message.id === msgId)
+  }
+
   return {
+    getMsgIndex,
     chatMessageList,
     pushMsg,
     clearNewMsgCount,
diff --git a/src/utils/copy.ts b/src/utils/copy.ts
index 456f2fa1..f15a5472 100644
--- a/src/utils/copy.ts
+++ b/src/utils/copy.ts
@@ -7,12 +7,10 @@ export function copyToClip(text: string) {
       input.style.zIndex = '-1'
       document.body.appendChild(input)
       input.select()
-      if (document.execCommand('copy'))
-        document.execCommand('copy')
+      if (document.execCommand('copy')) document.execCommand('copy')
       document.body.removeChild(input)
       resolve(text)
-    }
-    catch (error) {
+    } catch (error) {
       reject(error)
     }
   })
diff --git a/src/views/Home/components/ChatList/MsgItem/index.vue b/src/views/Home/components/ChatList/MsgItem/index.vue
index b72c3a41..4a454d12 100644
--- a/src/views/Home/components/ChatList/MsgItem/index.vue
+++ b/src/views/Home/components/ChatList/MsgItem/index.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, type PropType } from 'vue'
+import { computed, nextTick, onMounted, ref, type Ref, type PropType, inject } from 'vue'
 import ContextMenu from '@imengyu/vue3-context-menu'
 import { useUserStore } from '@/stores/user'
+import { useChatStore, pageSize } from '@/stores/chat'
 import { formatTimestamp } from '@/utils/computedTime'
-import type { MessageItemType } from '@/services/types'
+import type { MessageItemType, MessageItemContentType } from '@/services/types'
 import defaultAvatar from '@/assets/avatars/default.png'
 import RenderMsg from '@/components/RenderMsg'
 import MsgOption from '../MsgOption/index.vue'
@@ -39,6 +40,7 @@ const props = defineProps({
 })
 
 const userStore = useUserStore()
+const chatStore = useChatStore()
 const myBadge = computed(() => userStore?.userInfo.badge)
 const isCurrentUser = computed(() => props.msg?.fromUser.uid === userStore?.userInfo.uid)
 const chatCls = computed(() => ({
@@ -50,6 +52,28 @@ const chatCls = computed(() => ({
 const renderMsgRef = ref<HTMLElement | null>(null)
 const boxRef = ref<HTMLElement | null>(null)
 const tooltipPlacement = ref()
+const virtualListRef = inject<Ref>('virtualListRef')
+
+// 滚动到消息
+const scrollToMsg = async (msg: MessageItemContentType) => {
+  const { reply, id } = msg
+  // 不允许跳转不跳转，目前是 100 条(后端配置)以内允许跳转
+  if (!reply || !reply.canCallback) return
+  // 如果消息已经加载过了，就直接跳转
+  const index = chatStore.getMsgIndex(reply.id)
+  if (index > -1) {
+    virtualListRef?.value?.scrollToIndex(index)
+  } else {
+    // 如果没有加载过，就先加载，然后跳转
+    const curMsgIndex = chatStore.getMsgIndex(id)
+    // 先计算大概要加载多少个 pageSize 固定倍数的。
+    const needLoadPageSize = Math.ceil((reply.gapCount - curMsgIndex) / pageSize) * pageSize
+    // 加载数据
+    await chatStore.loadMore(needLoadPageSize)
+    // 跳转
+    setTimeout(virtualListRef?.value?.scrollToIndex(chatStore.getMsgIndex(reply.id)), 0)
+  }
+}
 
 /** 右键菜单 */
 function handleRightClick(e: MouseEvent, msg: MessageItemType) {
@@ -125,7 +149,13 @@ onMounted(() => {
           <RenderMsg :text="msg.message.content.trim()" :url-map="msg.message.urlTitleMap" :is-me="isCurrentUser" />
         </div>
       </el-tooltip>
-      <div v-if="msg.message.reply" class="chat-item-reply">
+      <div
+        v-if="msg.message.reply"
+        class="chat-item-reply"
+        :class="{ pointer: msg.message.reply.canCallback }"
+        @click="scrollToMsg(msg.message)"
+      >
+        <i class="can-scroll-icon" v-if="msg.message.reply.canCallback" />
         <span class="ellipsis"> {{ msg.message.reply.username }}: {{ msg.message.reply.content }} </span>
       </div>
     </div>
@@ -136,10 +166,10 @@ onMounted(() => {
 
 <style lang="scss">
 .option-tooltip {
-  color: #fff;
+  z-index: 3;
   padding: 0;
-  border: none !important;
+  color: #fff;
   background: none !important;
-  z-index: 3;
+  border: none !important;
 }
 </style>
diff --git a/src/views/Home/components/ChatList/MsgItem/styles.scss b/src/views/Home/components/ChatList/MsgItem/styles.scss
index e6f87d45..edd80986 100644
--- a/src/views/Home/components/ChatList/MsgItem/styles.scss
+++ b/src/views/Home/components/ChatList/MsgItem/styles.scss
@@ -72,19 +72,21 @@
   }
 
   &-reply {
+    display: flex;
+    align-items: center;
     width: fit-content;
+    padding: 4px 12px;
     margin-top: 4px;
     margin-right: auto;
+    overflow: hidden;
+    font-size: 12px;
+    color: var(--font-light);
+    background-color: #424656;
+    border-radius: 8px;
 
     .ellipsis {
       display: -webkit-inline-box;
-      padding: 4px 12px;
-      overflow: hidden;
-      font-size: 12px;
-      color: var(--font-light);
       text-overflow: ellipsis;
-      background-color: #424656;
-      border-radius: 8px;
       -webkit-line-clamp: 4;
       -webkit-box-orient: vertical;
     }
@@ -122,6 +124,10 @@
   .chat-item-reply {
     margin-right: 0;
     margin-left: auto;
+
+    &.pointer {
+      cursor: pointer;
+    }
   }
 }
 
@@ -148,3 +154,13 @@
 .is-me .chat-item-content {
   background-color: var(--color-primary);
 }
+
+.can-scroll-icon {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  margin-right: 4px;
+  background-image: url('@/assets/operate-icons/to_top.svg');
+  background-position: center;
+  background-size: contain;
+}
diff --git a/src/views/Home/components/ChatList/index.vue b/src/views/Home/components/ChatList/index.vue
index f87f7a90..5ce91657 100644
--- a/src/views/Home/components/ChatList/index.vue
+++ b/src/views/Home/components/ChatList/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, nextTick } from 'vue'
+import { ref, onMounted, nextTick, provide } from 'vue'
 import throttle from 'lodash/throttle'
 import { useChatStore } from '@/stores/chat'
 import type { MessageItemType } from '@/services/types'
@@ -17,6 +17,9 @@ const goToBottom = () => {
   }
 }
 
+// 提供虚拟列表 ref 给子组件使用
+provide('virtualListRef', virtualListRef)
+
 onMounted(() => {
   nextTick(() => {
     chatStore.chatListToBottomAction = () => {

From 1d4080e8154682055acf624d8ef8e84cfb140621 Mon Sep 17 00:00:00 2001
From: Evan <skcy@vip.qq.com>
Date: Mon, 5 Jun 2023 00:08:54 +0800
Subject: [PATCH 05/11] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20pointer=20?=
 =?UTF-8?q?=E5=B7=A6=E8=BE=B9=E4=B8=8D=E7=94=9F=E6=95=88=EF=BC=8C=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E5=88=B0=E6=B6=88=E6=81=AF=E6=9C=89=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C=EF=BC=8C=E4=BC=98=E5=8C=96=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/VirtualList/index.tsx              | 15 ++++++++-------
 .../Home/components/ChatList/MsgItem/index.vue    |  7 ++++---
 .../Home/components/ChatList/MsgItem/styles.scss  |  8 ++++----
 src/views/Home/components/ChatList/styles.scss    |  4 +++-
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/VirtualList/index.tsx b/src/components/VirtualList/index.tsx
index e5c97397..0add0b96 100644
--- a/src/components/VirtualList/index.tsx
+++ b/src/components/VirtualList/index.tsx
@@ -178,12 +178,12 @@ export default defineComponent({
      * @param index 索引值
      * @description 如果索引值大于等于数据长度说明到底了则滚动到底部
      */
-    const scrollToIndex = (index: number) => {
+    const scrollToIndex = (index: number, smooth?: boolean) => {
       if (index >= props.data.length - 1) {
         scrollToBottom()
       } else {
         const offset = virtual.getOffset(index)
-        scrollToOffset(offset)
+        scrollToOffset(offset, smooth)
       }
     }
 
@@ -191,9 +191,10 @@ export default defineComponent({
      * 滚动到指定偏移量
      * @param offset 滚动条偏移量
      */
-    const scrollToOffset = (offset: number) => {
+    const scrollToOffset = (offset: number, smooth = false) => {
       if (rootRef.value) {
-        rootRef.value.scrollTop = offset
+        // rootRef.value.scrollTop = offset
+        rootRef.value.scroll({ left: 0, top: offset, behavior: smooth ? 'smooth' : 'auto' })
       }
     }
 
@@ -236,13 +237,13 @@ export default defineComponent({
     }
 
     // 滚动到底部
-    const scrollToBottom = () => {
+    const scrollToBottom = (smooth?: boolean) => {
       if (shepherd.value) {
         const offset = shepherd.value.offsetTop
-        scrollToOffset(offset)
+        scrollToOffset(offset, smooth)
         setTimeout(() => {
           if (getOffset() + getClientSize() < getScrollSize()) {
-            scrollToBottom()
+            scrollToBottom(smooth)
           }
         }, 3)
       }
diff --git a/src/views/Home/components/ChatList/MsgItem/index.vue b/src/views/Home/components/ChatList/MsgItem/index.vue
index 71f53111..bcccbf06 100644
--- a/src/views/Home/components/ChatList/MsgItem/index.vue
+++ b/src/views/Home/components/ChatList/MsgItem/index.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, ref, type Ref, type PropType, inject } from 'vue'
-import ContextMenu from '@imengyu/vue3-context-menu'
 import { useUserStore } from '@/stores/user'
 import { useChatStore, pageSize } from '@/stores/chat'
 import { formatTimestamp } from '@/utils/computedTime'
@@ -66,11 +65,13 @@ const scrollToMsg = async (msg: MessageItemContentType) => {
     // 如果没有加载过，就先加载，然后跳转
     const curMsgIndex = chatStore.getMsgIndex(id)
     // 先计算大概要加载多少个 pageSize 固定倍数的。
-    const needLoadPageSize = Math.ceil((reply.gapCount - curMsgIndex) / pageSize) * pageSize
+    // +1 是在 reply.gapCount - curMsgIndex 刚好是 pageSize 倍数的时候，跳转到的是第一条消息，会触发加载更多，样式会乱掉
+    const needLoadPageSize = Math.ceil((reply.gapCount - curMsgIndex + 1) / pageSize) * pageSize
     // 加载数据
     await chatStore.loadMore(needLoadPageSize)
     // 跳转
-    setTimeout(virtualListRef?.value?.scrollToIndex(chatStore.getMsgIndex(reply.id)), 0)
+    setTimeout(virtualListRef?.value?.scrollToIndex(chatStore.getMsgIndex(reply.id), true), 0)
+    // TODO 跳转到的消息 高亮一下
   }
 }
 
diff --git a/src/views/Home/components/ChatList/MsgItem/styles.scss b/src/views/Home/components/ChatList/MsgItem/styles.scss
index edd80986..e8b9ff8b 100644
--- a/src/views/Home/components/ChatList/MsgItem/styles.scss
+++ b/src/views/Home/components/ChatList/MsgItem/styles.scss
@@ -84,6 +84,10 @@
     background-color: #424656;
     border-radius: 8px;
 
+    &.pointer {
+      cursor: pointer;
+    }
+
     .ellipsis {
       display: -webkit-inline-box;
       text-overflow: ellipsis;
@@ -124,10 +128,6 @@
   .chat-item-reply {
     margin-right: 0;
     margin-left: auto;
-
-    &.pointer {
-      cursor: pointer;
-    }
   }
 }
 
diff --git a/src/views/Home/components/ChatList/styles.scss b/src/views/Home/components/ChatList/styles.scss
index 8d4145a3..f98ba046 100644
--- a/src/views/Home/components/ChatList/styles.scss
+++ b/src/views/Home/components/ChatList/styles.scss
@@ -5,7 +5,7 @@
   flex-direction: column;
   width: 100%;
   height: 100%;
-  padding: 20px 20px 0;
+  padding: 0;
   overflow: hidden;
   overflow-y: auto;
 
@@ -76,5 +76,7 @@
   position: relative;
   width: 100%;
   height: 100%;
+  padding-right: 20px;
+  padding-left: 20px;
   overflow-y: auto;
 }

From 1c6669269aa5ce8f4c6953f1c60735d0fc4b05ef Mon Sep 17 00:00:00 2001
From: Evan <skcy@vip.qq.com>
Date: Mon, 5 Jun 2023 00:33:22 +0800
Subject: [PATCH 06/11] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Home/components/ChatList/MsgItem/index.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/views/Home/components/ChatList/MsgItem/index.vue b/src/views/Home/components/ChatList/MsgItem/index.vue
index bcccbf06..5f6368de 100644
--- a/src/views/Home/components/ChatList/MsgItem/index.vue
+++ b/src/views/Home/components/ChatList/MsgItem/index.vue
@@ -60,7 +60,7 @@ const scrollToMsg = async (msg: MessageItemContentType) => {
   // 如果消息已经加载过了，就直接跳转
   const index = chatStore.getMsgIndex(reply.id)
   if (index > -1) {
-    virtualListRef?.value?.scrollToIndex(index)
+    virtualListRef?.value?.scrollToIndex(index, true)
   } else {
     // 如果没有加载过，就先加载，然后跳转
     const curMsgIndex = chatStore.getMsgIndex(id)
@@ -70,7 +70,8 @@ const scrollToMsg = async (msg: MessageItemContentType) => {
     // 加载数据
     await chatStore.loadMore(needLoadPageSize)
     // 跳转
-    setTimeout(virtualListRef?.value?.scrollToIndex(chatStore.getMsgIndex(reply.id), true), 0)
+    // FIXME 这时候新加载消息了，所以会有滚动冲突，故不加动画效果，否则会很怪异。
+    setTimeout(virtualListRef?.value?.scrollToIndex(chatStore.getMsgIndex(reply.id), false), 0)
     // TODO 跳转到的消息 高亮一下
   }
 }

From eb2bf16ffe529e2014abed06444491fd4a126238 Mon Sep 17 00:00:00 2001
From: Evan <skcy@vip.qq.com>
Date: Mon, 5 Jun 2023 00:53:28 +0800
Subject: [PATCH 07/11] =?UTF-8?q?chore:=20=E5=88=A0=E9=99=A4=E6=97=A0?=
 =?UTF-8?q?=E7=94=A8template?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ISSUE_TEMPLATE/pull_request_template.md   | 84 -------------------
 1 file changed, 84 deletions(-)
 delete mode 100644 .github/ISSUE_TEMPLATE/pull_request_template.md

diff --git a/.github/ISSUE_TEMPLATE/pull_request_template.md b/.github/ISSUE_TEMPLATE/pull_request_template.md
deleted file mode 100644
index 0bbafd1d..00000000
--- a/.github/ISSUE_TEMPLATE/pull_request_template.md
+++ /dev/null
@@ -1,84 +0,0 @@
----
-name: PULL_REQUEST_TEMPLATE
-about: PR 模板
-title: "[Feat]"
-labels: ''
-assignees: Evansy
-
----
-
-<!--
-首先，感谢你的贡献！😄
-
-新特性请提交至 feature 分支，其余可提交至 master 分支。
-在维护者审核通过后会合并。
-请确保填写以下 pull request 的信息，谢谢！~
--->
-
-### 🤔 这个变动的性质是？
-
-- [ ] 新特性提交
-- [ ] 日常 bug 修复
-- [ ] 站点、文档改进
-- [ ] 演示代码改进
-- [ ] 组件样式/交互改进
-- [ ] TypeScript 定义更新
-- [ ] 包体积优化
-- [ ] 性能优化
-- [ ] 功能增强
-- [ ] 国际化改进
-- [ ] 重构
-- [ ] 代码风格优化
-- [ ] 测试用例
-- [ ] 分支合并
-- [ ] 工作流程
-- [ ] 其他改动（是关于什么的改动？）
-
-### 🔗 相关 Issue
-
-<!--
-1. 描述相关需求的来源，如相关的 issue 讨论链接。
-2. 例如 close #xxxx、 fix #xxxx
--->
-
-### 💡 需求背景和解决方案
-
-<!--
-1. 要解决的具体问题。
-2. 列出最终的 API 实现和用法。
-3. 涉及UI/交互变动需要有截图或 GIF。
--->
-
-### 📝 更新日志
-
-<!--
-从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
--->
-
-| 语言    | 更新描述 |
-| ------- | -------- |
-| 🇺🇸 英文 |          |
-| 🇨🇳 中文 |          |
-
-### ☑️ 请求合并前的自查清单
-
-⚠️ 请自检并全部**勾选全部选项**。⚠️
-
-- [ ] 文档已补充或无须补充
-- [ ] 代码演示已提供或无须提供
-- [ ] TypeScript 定义已补充或无须补充
-- [ ] Changelog 已提供或无须提供
-
----
-
-<!--
-以下为 copilot 自动生成的 CR 结果，请勿修改
--->
-
-### 🚀 概述
-
-copilot:summary
-
-### 🔍 实现细节
-
-copilot:walkthrough

From d86dcfecce783198d8617e402a5041fc3599f4ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Mon, 5 Jun 2023 21:28:25 +0800
Subject: [PATCH 08/11] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=82=B9?=
 =?UTF-8?q?=E8=B5=9E=E6=93=8D=E4=BD=9C=E5=AE=9E=E6=97=B6=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92=E5=B1=95=E7=A4=BA=E5=8A=9F=E8=83=BD=20(#28)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components.d.ts                           |  3 +
 src/components/icons/iconDislike.vue          |  9 +++
 src/components/icons/iconLike.vue             | 11 +++
 src/hooks/useLikeToggle.ts                    | 67 +++++++++++++++
 src/services/types.ts                         | 23 ++++++
 src/stores/chat.ts                            | 21 ++++-
 src/utils/websocket.ts                        |  8 +-
 src/utils/wsType.ts                           |  4 +
 .../components/ChatList/MsgItem/index.vue     | 20 +++++
 .../components/ChatList/MsgItem/styles.scss   | 81 +++++++++++++++++++
 .../components/ChatList/MsgOption/index.vue   | 39 ++-------
 .../components/ChatList/MsgOption/styles.scss | 13 +--
 12 files changed, 252 insertions(+), 47 deletions(-)
 create mode 100644 src/components/icons/iconDislike.vue
 create mode 100644 src/components/icons/iconLike.vue
 create mode 100644 src/hooks/useLikeToggle.ts

diff --git a/src/components.d.ts b/src/components.d.ts
index 990a61fa..a611c034 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -19,8 +19,10 @@ declare module '@vue/runtime-core' {
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     IconCommunity: typeof import('./components/icons/IconCommunity.vue')['default']
+    IconDislike: typeof import('./components/icons/iconDislike.vue')['default']
     IconDocumentation: typeof import('./components/icons/IconDocumentation.vue')['default']
     IconEcosystem: typeof import('./components/icons/IconEcosystem.vue')['default']
+    IconLike: typeof import('./components/icons/iconLike.vue')['default']
     IconSupport: typeof import('./components/icons/IconSupport.vue')['default']
     IconTooling: typeof import('./components/icons/IconTooling.vue')['default']
     IEpArrowDownBold: typeof import('~icons/ep/arrow-down-bold')['default']
@@ -33,6 +35,7 @@ declare module '@vue/runtime-core' {
     IEpLock: typeof import('~icons/ep/lock')['default']
     IEpMale: typeof import('~icons/ep/male')['default']
     IEpSuccessFilled: typeof import('~icons/ep/success-filled')['default']
+    LikeButton: typeof import('./components/LikeButton/index.vue')['default']
     LoginBox: typeof import('./components/LoginBox/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/src/components/icons/iconDislike.vue b/src/components/icons/iconDislike.vue
new file mode 100644
index 00000000..4f4e1519
--- /dev/null
+++ b/src/components/icons/iconDislike.vue
@@ -0,0 +1,9 @@
+<template>
+  <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+    <path
+      d="M8.331 6.612l1.24 1.005c.08.065.12.166.107.267l-.222 1.71c-.014.11.12.178.203.1l1.954-1.857a.294.294 0 00.036-.386l-.582-.806a.293.293 0 01-.03-.295l.763-1.655.356-.67A3.06 3.06 0 0112.55 4C14.44 4 16 5.504 16 7.723c0 2.462-2.093 4.906-5.297 6.968-.246.163-.522.309-.706.309-.184 0-.454-.146-.7-.31C6.093 12.63 4 10.186 4 7.724 4 5.503 5.56 4 7.45 4c.402 0 .768.075 1.095.211l-.06.382-.26 1.747a.295.295 0 00.106.272z"
+      fill="currentColor"
+      fill-opacity="0.8"
+    ></path>
+  </svg>
+</template>
diff --git a/src/components/icons/iconLike.vue b/src/components/icons/iconLike.vue
new file mode 100644
index 00000000..41fd66a3
--- /dev/null
+++ b/src/components/icons/iconLike.vue
@@ -0,0 +1,11 @@
+<template>
+  <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M10.106 5.412c.571-.814 1.51-1.244 2.542-1.244 1.966 0 3.602 1.706 3.602 3.734l-.002.134V8.1a.03.03 0 00.002.009c-.008.427-.081.78-.212 1.245-.074.084-.143.241-.212.415-.108.168-.15.25-.212.415a8.504 8.504 0 01-.298.464c-.488.71-1.108 1.414-1.734 2.05-1.13 1.154-2.304 2.121-2.806 2.535-.134.11-.22.182-.245.206-.177.177-.354.177-.531.177h-.025c-.338-.009-.51-.182-.683-.355a1.39 1.39 0 00-.083-.07 25.514 25.514 0 01-3.037-2.685c-.814-.845-1.582-1.799-2.014-2.732-.177-.354-.398-1.197-.408-1.665.004-.004.003-.026.002-.071l-.002-.136c0-2.03 1.634-3.734 3.602-3.734 1.03 0 1.97.43 2.754 1.244z"
+      fill="currentColor"
+      opacity="0.9"
+    ></path>
+  </svg>
+</template>
diff --git a/src/hooks/useLikeToggle.ts b/src/hooks/useLikeToggle.ts
new file mode 100644
index 00000000..10f5656c
--- /dev/null
+++ b/src/hooks/useLikeToggle.ts
@@ -0,0 +1,67 @@
+import { computed } from 'vue'
+import apis from '@/services/apis'
+import { ActType, MarkType, IsYet } from '@/services/types'
+import type { MessageItemType } from '@/services/types'
+
+/**
+ * 统一点赞倒赞操作Hook
+ * @param message 消息
+ * @description 引入该Hook后，可直接使用isLike(是否已点赞)、isDisLike(是否已倒赞)、onLike(点赞方法)、onDisLike(倒赞方法)
+ */
+export const useLikeToggle = (message: MessageItemType['message']) => {
+  const isLike = computed(() => message.messageMark.userLike === IsYet.Yes)
+  const isDisLike = computed(() => message.messageMark.userDislike === IsYet.Yes)
+  const likeCount = computed(() => message.messageMark.likeCount)
+  const dislikeCount = computed(() => message.messageMark.dislikeCount)
+
+  /**
+   * 点赞\取消点赞
+   * @description 根据是否已经点赞控制更新点赞状态
+   */
+  const onLike = async () => {
+    const actType = isLike.value ? ActType.Cancel : ActType.Confirm
+    await apis.markMsg({ actType, markType: MarkType.Like, msgId: message.id }).send()
+
+    // 根据actType类型去更新本地点赞状态-点赞数
+    const { likeCount } = message.messageMark
+    const isConfirm = actType === ActType.Confirm
+    message.messageMark.userLike = isConfirm ? IsYet.Yes : IsYet.No
+    message.messageMark.likeCount = isConfirm ? likeCount + 1 : likeCount - 1
+    // 互斥操作
+    if (isDisLike.value) {
+      message.messageMark.userDislike = IsYet.No
+      message.messageMark.dislikeCount = dislikeCount.value - 1
+    }
+  }
+
+  /**
+   * 倒赞\取消倒赞
+   * @description 根据是否已经倒赞控制更新倒赞状态
+   */
+  const onDisLike = async () => {
+    const actType = isDisLike.value ? ActType.Cancel : ActType.Confirm
+    await apis.markMsg({ actType, markType: MarkType.DisLike, msgId: message.id }).send()
+
+    // 根据actType类型去更新本地倒赞状态-倒赞数
+    const { dislikeCount } = message.messageMark
+    const isConfirm = actType === ActType.Confirm
+    message.messageMark.userDislike = isConfirm ? IsYet.Yes : IsYet.No
+    message.messageMark.dislikeCount = isConfirm ? dislikeCount + 1 : dislikeCount - 1
+    // 互斥操作
+    if (isLike.value) {
+      message.messageMark.userLike = IsYet.No
+      message.messageMark.likeCount = likeCount.value - 1
+    }
+  }
+
+  return {
+    isLike,
+    isDisLike,
+    likeCount,
+    dislikeCount,
+    onLike,
+    onDisLike,
+  }
+}
+
+export default useLikeToggle
diff --git a/src/services/types.ts b/src/services/types.ts
index 64a78177..98980923 100644
--- a/src/services/types.ts
+++ b/src/services/types.ts
@@ -265,3 +265,26 @@ export type BadgeType = {
   // 是否佩戴 0否 1是
   wearing: IsYet
 }
+
+export type MarkItemType = {
+  /**
+   * 操作用户
+   */
+  uid: number
+  /**
+   * 消息id
+   */
+  msgId: number
+  /**
+   * 操作类型 1点赞 2举报
+   */
+  markType: MarkType
+  /**
+   * 数量
+   */
+  markCount: number
+  /**
+   * 动作类型 1确认 2取消
+   */
+  actType: ActType
+}
diff --git a/src/stores/chat.ts b/src/stores/chat.ts
index 82bcbeb7..55968782 100644
--- a/src/stores/chat.ts
+++ b/src/stores/chat.ts
@@ -1,7 +1,8 @@
 import { ref, reactive } from 'vue'
 import { defineStore } from 'pinia'
 import apis from '@/services/apis'
-import type { MessageItemType } from '@/services/types'
+import type { MessageItemType, MarkItemType } from '@/services/types'
+import { MarkType } from '@/services/types'
 import { computedTimeBlock } from '@/utils/computedTime'
 import shakeTitle from '@/utils/shakeTitle'
 
@@ -77,11 +78,29 @@ export const useChatStore = defineStore('chat', () => {
     return chatMessageList.value.findIndex((item) => item.message.id === msgId)
   }
 
+  // 更新点赞、举报数
+  const updateMarkCount = (markList: MarkItemType[]) => {
+    // 循环更新点赞数
+    markList.forEach((mark: MarkItemType) => {
+      const { msgId, markType, markCount } = mark
+
+      const msgItem = chatMessageList.value.find((item) => item.message.id === msgId)
+      if (msgItem) {
+        if (markType === MarkType.Like) {
+          msgItem.message.messageMark.likeCount = markCount
+        } else if (markType === MarkType.DisLike) {
+          msgItem.message.messageMark.dislikeCount = markCount
+        }
+      }
+    })
+  }
+
   return {
     getMsgIndex,
     chatMessageList,
     pushMsg,
     clearNewMsgCount,
+    updateMarkCount,
     chatListToBottomAction,
     newMsgCount,
     isLoading,
diff --git a/src/utils/websocket.ts b/src/utils/websocket.ts
index 9167e419..b11e8747 100644
--- a/src/utils/websocket.ts
+++ b/src/utils/websocket.ts
@@ -4,7 +4,7 @@ import { useChatStore } from '@/stores/chat'
 import { useGroupStore } from '@/stores/group'
 import { WsResponseMessageType, WsRequestMsgType } from './wsType'
 import type { LoginSuccessResType, LoginInitResType, WsReqMsgContentType, OnStatusChangeType } from './wsType'
-import type { MessageItemType } from '@/services/types'
+import type { MessageItemType, MarkItemType } from '@/services/types'
 import { OnlineStatus } from '@/services/types'
 import { worker } from './initWorker'
 import shakeTitle from '@/utils/shakeTitle'
@@ -177,6 +177,12 @@ class WS {
         groupStore.filterUser(data.uid)
         break
       }
+      // 点赞、倒赞消息通知
+      case WsResponseMessageType.WSMsgMarkItem: {
+        const data = params.data as { markList: MarkItemType[] }
+        chatStore.updateMarkCount(data.markList)
+        break
+      }
       default: {
         console.log('接收到未处理类型的消息:', params)
         break
diff --git a/src/utils/wsType.ts b/src/utils/wsType.ts
index ca8aa2a4..350d8678 100644
--- a/src/utils/wsType.ts
+++ b/src/utils/wsType.ts
@@ -30,6 +30,10 @@ export enum WsResponseMessageType {
    * 7.禁用的用户
    */
   InValidUser,
+  /**
+   * 8.点赞、倒赞更新通知
+   */
+  WSMsgMarkItem,
 }
 
 /**
diff --git a/src/views/Home/components/ChatList/MsgItem/index.vue b/src/views/Home/components/ChatList/MsgItem/index.vue
index 0bd25879..06224691 100644
--- a/src/views/Home/components/ChatList/MsgItem/index.vue
+++ b/src/views/Home/components/ChatList/MsgItem/index.vue
@@ -10,6 +10,7 @@ import RenderMsg from '@/components/RenderMsg'
 import MsgOption from '../MsgOption/index.vue'
 import type { TooltipTriggerType } from 'element-plus/es/components/tooltip/src/trigger'
 import { copyToClip } from '@/utils/copy'
+import { useLikeToggle } from '@/hooks/useLikeToggle'
 
 const props = defineProps({
   // 消息体
@@ -53,6 +54,7 @@ const renderMsgRef = ref<HTMLElement | null>(null)
 const boxRef = ref<HTMLElement | null>(null)
 const tooltipPlacement = ref()
 const virtualListRef = inject<Ref>('virtualListRef')
+const { isLike, isDisLike, likeCount, dislikeCount, onLike, onDisLike } = useLikeToggle(props.msg.message)
 
 // 滚动到消息
 const scrollToMsg = async (msg: MessageItemContentType) => {
@@ -160,6 +162,24 @@ onMounted(() => {
         <i class="can-scroll-icon" v-if="msg.message.reply.canCallback" />
         <span class="ellipsis"> {{ msg.message.reply.username }}: {{ msg.message.reply.content }} </span>
       </div>
+      <div v-if="likeCount + dislikeCount > 0" class="extra">
+        <transition name="fade">
+          <span v-if="likeCount > 0" :class="['extra-item like', { active: isLike }]" @click="onLike">
+            <IconLike />
+            <transition name="count-up" mode="out-in">
+              <span class="count" :key="likeCount">{{ likeCount }}</span>
+            </transition>
+          </span>
+        </transition>
+        <transition name="fade">
+          <span v-if="dislikeCount > 0" :class="['extra-item dlike', { active: isDisLike }]" @click="onDisLike">
+            <IconDislike />
+            <transition name="count-up" mode="out-in">
+              <span class="count" :key="dislikeCount">{{ dislikeCount }}</span>
+            </transition>
+          </span>
+        </transition>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/views/Home/components/ChatList/MsgItem/styles.scss b/src/views/Home/components/ChatList/MsgItem/styles.scss
index e8b9ff8b..1834b144 100644
--- a/src/views/Home/components/ChatList/MsgItem/styles.scss
+++ b/src/views/Home/components/ChatList/MsgItem/styles.scss
@@ -95,6 +95,56 @@
       -webkit-box-orient: vertical;
     }
   }
+
+  .extra {
+    width: fit-content;
+    margin-top: 4px;
+    user-select: none !important;
+
+    &-item {
+      display: inline-flex;
+      align-items: center;
+      padding: 0 6px;
+      margin-right: 4px;
+      cursor: pointer;
+      background-color: #2b2d31;
+      border: 1px solid #2b2d31;
+      border-radius: 8px;
+
+      svg {
+        width: 20px;
+        height: 20px;
+        transition: transform 0.2s;
+      }
+
+      .count {
+        margin: 0 4px 0 2px;
+        font-size: 12px;
+      }
+
+      &:hover {
+        svg {
+          transform: scale(1.2);
+        }
+
+        &.dlike svg {
+          transform: scale(0.9);
+        }
+      }
+    }
+
+    .active {
+      &.like {
+        color: #fe2c55;
+        border-color: #b52c47;
+      }
+
+      &.dlike {
+        color: #989898;
+        border-color: var(--el-color-info);
+      }
+    }
+  }
 }
 
 .right {
@@ -125,6 +175,7 @@
     border-radius: 20px 5px 20px 20px;
   }
 
+  .extra,
   .chat-item-reply {
     margin-right: 0;
     margin-left: auto;
@@ -164,3 +215,33 @@
   background-position: center;
   background-size: contain;
 }
+
+.fade-enter-leave,
+.fade-enter-active {
+  animation: fade 0.5s;
+}
+
+@keyframes fade {
+  0% {
+    transform: translateY(100%);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.count-up-enter-active,
+.count-up-leave-active {
+  transition: all 0.25s ease-out;
+}
+
+.count-up-enter-from {
+  opacity: 0;
+  transform: translateY(5px);
+}
+
+.count-up-leave-to {
+  opacity: 0;
+  transform: translateY(-5px);
+}
diff --git a/src/views/Home/components/ChatList/MsgOption/index.vue b/src/views/Home/components/ChatList/MsgOption/index.vue
index 5e3661d9..274d9aab 100644
--- a/src/views/Home/components/ChatList/MsgOption/index.vue
+++ b/src/views/Home/components/ChatList/MsgOption/index.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { computed, inject } from 'vue'
-import apis from '@/services/apis'
+import { inject } from 'vue'
+import { useLikeToggle } from '@/hooks/useLikeToggle'
 import { useChatStore } from '@/stores/chat'
 import type { PropType } from 'vue'
 import type { MessageItemType } from '@/services/types'
-import { ActType, MarkType, IsYet } from '@/services/types'
 
 const props = defineProps({
   msg: {
@@ -16,25 +15,7 @@ const props = defineProps({
 const focusMsgInput = inject<() => void>('focusMsgInput')
 const chatStore = useChatStore()
 
-/**
- * 点赞或取消点赞
- */
-const onLikeMsg = async (actType: ActType, msg: MessageItemType['message']) => {
-  await apis.markMsg({ actType, markType: MarkType.Like, msgId: msg.id }).send()
-  const { likeCount } = msg.messageMark
-  msg.messageMark.userLike = actType === ActType.Confirm ? IsYet.Yes : IsYet.No
-  msg.messageMark.likeCount = actType === ActType.Confirm ? likeCount + 1 : likeCount - 1
-}
-
-/**
- * 倒赞或取消倒赞
- */
-const onDisLikeMsg = async (actType: ActType, msg: MessageItemType['message']) => {
-  await apis.markMsg({ actType, markType: MarkType.DisLike, msgId: msg.id }).send()
-  const { dislikeCount } = msg.messageMark
-  msg.messageMark.userDislike = actType === ActType.Confirm ? IsYet.Yes : IsYet.No
-  msg.messageMark.dislikeCount = actType === ActType.Confirm ? dislikeCount + 1 : dislikeCount - 1
-}
+const { isLike, isDisLike, onLike, onDisLike } = useLikeToggle(props.msg.message)
 
 /**
  * 回复消息
@@ -44,10 +25,6 @@ const onReplyMsg = async (msgFromUser: MessageItemType) => {
   chatStore.currentMsgReply = msgFromUser
   focusMsgInput?.()
 }
-
-// 是否已经点赞、倒赞
-const isLikeActive = computed(() => props.msg.message.messageMark.userLike === IsYet.Yes)
-const isDisLikeActive = computed(() => props.msg.message.messageMark.userDislike === IsYet.Yes)
 </script>
 
 <template>
@@ -56,17 +33,11 @@ const isDisLikeActive = computed(() => props.msg.message.messageMark.userDislike
       <i class="icon reply" v-login="() => onReplyMsg(msg)" />
     </span>
     <span class="msg-option-item" title="点赞">
-      <i
-        :class="['icon like', { 'like-active': isLikeActive }]"
-        v-login="() => onLikeMsg(isLikeActive ? ActType.Cancel : ActType.Confirm, msg.message)"
-      />
+      <IconLike :class="['icon', { 'like-active': isLike }]" v-login="() => onLike()" />
       {{ msg.message.messageMark.likeCount }}
     </span>
     <span class="msg-option-item" title="不喜欢">
-      <i
-        :class="['icon dislike', { 'dislike-active': isDisLikeActive }]"
-        v-login="() => onDisLikeMsg(isDisLikeActive ? ActType.Cancel : ActType.Confirm, msg.message)"
-      />
+      <IconDislike :class="['icon', { 'dislike-active': isDisLike }]" v-login="() => onDisLike()" />
       {{ msg.message.messageMark.dislikeCount }}
     </span>
   </div>
diff --git a/src/views/Home/components/ChatList/MsgOption/styles.scss b/src/views/Home/components/ChatList/MsgOption/styles.scss
index a3901bc1..6cb69db1 100644
--- a/src/views/Home/components/ChatList/MsgOption/styles.scss
+++ b/src/views/Home/components/ChatList/MsgOption/styles.scss
@@ -28,20 +28,11 @@
     background-image: url('@/assets/icons/icon_reply.svg');
   }
 
-  .like {
-    background-image: url('@/assets/icons/icon_like.svg');
-  }
-
   .like-active {
-    background-image: url('@/assets/icons/icon_liked.svg');
-  }
-
-  .dislike {
-    background-image: url('@/assets/icons/icon_like.svg');
-    transform: rotate(180deg);
+    color: #fe2c55;
   }
 
   .dislike-active {
-    background-image: url('@/assets/icons/icon_liked.svg');
+    color: #bebebe;
   }
 }

From 7cbf11d83915052d70dda09311b36f881a1527e2 Mon Sep 17 00:00:00 2001
From: lhf <redfly256@163.com>
Date: Thu, 8 Jun 2023 17:37:24 +0800
Subject: [PATCH 09/11] =?UTF-8?q?feat:=20dev=E5=88=86=E6=94=AF-=E5=AE=9A?=
 =?UTF-8?q?=E4=BD=8D=E5=9B=9E=E5=A4=8D=E6=B6=88=E6=81=AF-=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E9=97=AA=E7=83=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/RenderMsg.module.scss          | 17 +++++++++++++++++
 src/components/RenderMsg.tsx                  | 11 ++++++++---
 src/stores/chat.ts                            | 14 ++++++++++++++
 .../components/ChatList/MsgItem/index.vue     | 15 +++++++++++++--
 .../components/ChatList/MsgItem/styles.scss   | 19 +++++++++++++++++++
 5 files changed, 71 insertions(+), 5 deletions(-)
 create mode 100644 src/components/RenderMsg.module.scss

diff --git a/src/components/RenderMsg.module.scss b/src/components/RenderMsg.module.scss
new file mode 100644
index 00000000..897a5c54
--- /dev/null
+++ b/src/components/RenderMsg.module.scss
@@ -0,0 +1,17 @@
+@keyframes flash {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.3;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.is-flash {
+  animation: flash 1s infinite;
+}
diff --git a/src/components/RenderMsg.tsx b/src/components/RenderMsg.tsx
index 3558af8d..93946c86 100644
--- a/src/components/RenderMsg.tsx
+++ b/src/components/RenderMsg.tsx
@@ -1,11 +1,16 @@
 import { defineComponent } from 'vue'
 import DOMPurify from 'dompurify'
+import styles from './RenderMsg.module.scss'
 
+/**
+ * @param {isFlash} props 是否是闪烁的消息,这里是单纯文字闪烁
+ */
 export default defineComponent({
-  props: ['urlMap', 'text', 'isMe'],
+  props: ['urlMap', 'text', 'isMe', 'isFlash'],
   setup(props) {
     return () => {
-      if (!props.urlMap || Object.keys(props.urlMap).length === 0) return props.text
+      if (!props.urlMap || Object.keys(props.urlMap).length === 0)
+        return <div class={props.isFlash ? styles['is-flash'] : ''}>{props.text}</div>
 
       // 先过滤所有标签
       const clean = DOMPurify.sanitize(props.text, { ALLOWED_TAGS: [], ALLOWED_ATTR: [] })
@@ -20,7 +25,7 @@ export default defineComponent({
           };" href="${url.includes('http') ? url : `//${url}`}">${title}</a>`,
         )
       }
-      return <div v-html={result} />
+      return <div v-html={result} class={props.isFlash ? styles['is-flash'] : ''} />
     }
   },
 })
diff --git a/src/stores/chat.ts b/src/stores/chat.ts
index 55968782..de6c04ba 100644
--- a/src/stores/chat.ts
+++ b/src/stores/chat.ts
@@ -16,6 +16,18 @@ export const useChatStore = defineStore('chat', () => {
   const isLoading = ref(false) // 是否正在加载
   const isStartCount = ref(false) // 是否开始计数
   const cursor = ref()
+  const flashMsgId = ref<number | null>(null) // 记录当前回复的消息id 用于当前消息的闪烁
+  let timer: any = null // 消息闪烁计时器
+
+  // 开始闪烁
+  const startFlash = (replyId: number) => {
+    flashMsgId.value = replyId
+    // 以最后一次为准，清除上一次的定时器
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      flashMsgId.value = null
+    }, 2000)
+  }
 
   // 新消息计数
   const newMsgCount = ref(0)
@@ -109,5 +121,7 @@ export const useChatStore = defineStore('chat', () => {
     loadMore,
     currentMsgReply,
     filterUser,
+    startFlash,
+    flashMsgId,
   }
 })
diff --git a/src/views/Home/components/ChatList/MsgItem/index.vue b/src/views/Home/components/ChatList/MsgItem/index.vue
index 06224691..b4c88f2b 100644
--- a/src/views/Home/components/ChatList/MsgItem/index.vue
+++ b/src/views/Home/components/ChatList/MsgItem/index.vue
@@ -64,7 +64,10 @@ const scrollToMsg = async (msg: MessageItemContentType) => {
   // 如果消息已经加载过了，就直接跳转
   const index = chatStore.getMsgIndex(reply.id)
   if (index > -1) {
+    // chatStore 记录一下点击的当前消息的 replyId 并在2s后清空 replyId, 开始消息闪烁
     virtualListRef?.value?.scrollToIndex(index, true)
+    // 跳转到回复的消息 高亮一下
+    chatStore.startFlash(reply.id)
   } else {
     // 如果没有加载过，就先加载，然后跳转
     const curMsgIndex = chatStore.getMsgIndex(id)
@@ -75,7 +78,8 @@ const scrollToMsg = async (msg: MessageItemContentType) => {
     // 跳转
     // FIXME 这时候新加载消息了，所以会有滚动冲突，故不加动画效果，否则会很怪异。
     setTimeout(virtualListRef?.value?.scrollToIndex(chatStore.getMsgIndex(reply.id), false), 0)
-    // TODO 跳转到的消息 高亮一下
+    // 跳转到回复的消息 高亮一下
+    chatStore.startFlash(reply.id)
   }
 }
 
@@ -149,7 +153,14 @@ onMounted(() => {
         <template #content>
           <MsgOption :msg="msg" />
         </template>
-        <div class="chat-item-content" ref="renderMsgRef" @contextmenu.prevent.stop="handleRightClick($event, msg)">
+        <!-- class: is-flash 可设置文字以及气泡框的闪烁 -->
+        <div
+          class="chat-item-content"
+          ref="renderMsgRef"
+          @contextmenu.prevent.stop="handleRightClick($event, msg)"
+          :class="{ 'is-flash': chatStore.flashMsgId === props.msg?.message.id }"
+        >
+          <!-- 没有设置单纯文字的闪烁 props -->
           <RenderMsg :text="msg.message.content.trim()" :url-map="msg.message.urlTitleMap" :is-me="isCurrentUser" />
         </div>
       </el-tooltip>
diff --git a/src/views/Home/components/ChatList/MsgItem/styles.scss b/src/views/Home/components/ChatList/MsgItem/styles.scss
index 1834b144..82aad7dc 100644
--- a/src/views/Home/components/ChatList/MsgItem/styles.scss
+++ b/src/views/Home/components/ChatList/MsgItem/styles.scss
@@ -81,6 +81,7 @@
     overflow: hidden;
     font-size: 12px;
     color: var(--font-light);
+    word-break: break-all;
     background-color: #424656;
     border-radius: 8px;
 
@@ -245,3 +246,21 @@
   opacity: 0;
   transform: translateY(-5px);
 }
+
+@keyframes flash {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.3;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.is-flash {
+  animation: flash 1s infinite;
+}

From be82455c7ff01c573d6d241a5f647516fb192c86 Mon Sep 17 00:00:00 2001
From: lhf <redfly256@163.com>
Date: Thu, 8 Jun 2023 18:28:33 +0800
Subject: [PATCH 10/11] =?UTF-8?q?feat:=20dev=E5=88=86=E6=94=AF-=E5=AE=9A?=
 =?UTF-8?q?=E4=BD=8D=E5=9B=9E=E5=A4=8D=E6=B6=88=E6=81=AF-=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E9=97=AA=E7=83=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/RenderMsg.module.scss            | 17 -----------------
 src/components/RenderMsg.tsx                    |  8 +++-----
 .../Home/components/ChatList/MsgItem/index.vue  |  7 ++-----
 3 files changed, 5 insertions(+), 27 deletions(-)
 delete mode 100644 src/components/RenderMsg.module.scss

diff --git a/src/components/RenderMsg.module.scss b/src/components/RenderMsg.module.scss
deleted file mode 100644
index 897a5c54..00000000
--- a/src/components/RenderMsg.module.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@keyframes flash {
-  0% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 0.3;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-.is-flash {
-  animation: flash 1s infinite;
-}
diff --git a/src/components/RenderMsg.tsx b/src/components/RenderMsg.tsx
index 93946c86..ea63a360 100644
--- a/src/components/RenderMsg.tsx
+++ b/src/components/RenderMsg.tsx
@@ -1,16 +1,14 @@
 import { defineComponent } from 'vue'
 import DOMPurify from 'dompurify'
-import styles from './RenderMsg.module.scss'
 
 /**
  * @param {isFlash} props 是否是闪烁的消息,这里是单纯文字闪烁
  */
 export default defineComponent({
-  props: ['urlMap', 'text', 'isMe', 'isFlash'],
+  props: ['urlMap', 'text', 'isMe'],
   setup(props) {
     return () => {
-      if (!props.urlMap || Object.keys(props.urlMap).length === 0)
-        return <div class={props.isFlash ? styles['is-flash'] : ''}>{props.text}</div>
+      if (!props.urlMap || Object.keys(props.urlMap).length === 0) return props.text
 
       // 先过滤所有标签
       const clean = DOMPurify.sanitize(props.text, { ALLOWED_TAGS: [], ALLOWED_ATTR: [] })
@@ -25,7 +23,7 @@ export default defineComponent({
           };" href="${url.includes('http') ? url : `//${url}`}">${title}</a>`,
         )
       }
-      return <div v-html={result} class={props.isFlash ? styles['is-flash'] : ''} />
+      return <div v-html={result} />
     }
   },
 })
diff --git a/src/views/Home/components/ChatList/MsgItem/index.vue b/src/views/Home/components/ChatList/MsgItem/index.vue
index b4c88f2b..c3d73156 100644
--- a/src/views/Home/components/ChatList/MsgItem/index.vue
+++ b/src/views/Home/components/ChatList/MsgItem/index.vue
@@ -66,8 +66,6 @@ const scrollToMsg = async (msg: MessageItemContentType) => {
   if (index > -1) {
     // chatStore 记录一下点击的当前消息的 replyId 并在2s后清空 replyId, 开始消息闪烁
     virtualListRef?.value?.scrollToIndex(index, true)
-    // 跳转到回复的消息 高亮一下
-    chatStore.startFlash(reply.id)
   } else {
     // 如果没有加载过，就先加载，然后跳转
     const curMsgIndex = chatStore.getMsgIndex(id)
@@ -78,9 +76,9 @@ const scrollToMsg = async (msg: MessageItemContentType) => {
     // 跳转
     // FIXME 这时候新加载消息了，所以会有滚动冲突，故不加动画效果，否则会很怪异。
     setTimeout(virtualListRef?.value?.scrollToIndex(chatStore.getMsgIndex(reply.id), false), 0)
-    // 跳转到回复的消息 高亮一下
-    chatStore.startFlash(reply.id)
   }
+  // 跳转到回复的消息 高亮一下
+  chatStore.startFlash(reply.id)
 }
 
 /** 右键菜单 */
@@ -160,7 +158,6 @@ onMounted(() => {
           @contextmenu.prevent.stop="handleRightClick($event, msg)"
           :class="{ 'is-flash': chatStore.flashMsgId === props.msg?.message.id }"
         >
-          <!-- 没有设置单纯文字的闪烁 props -->
           <RenderMsg :text="msg.message.content.trim()" :url-map="msg.message.urlTitleMap" :is-me="isCurrentUser" />
         </div>
       </el-tooltip>

From c199a8843de8d82a9a24b91dabc8c50fb3d34198 Mon Sep 17 00:00:00 2001
From: lhf <redfly256@163.com>
Date: Thu, 8 Jun 2023 18:29:18 +0800
Subject: [PATCH 11/11] =?UTF-8?q?feat:=20dev=E5=88=86=E6=94=AF-=E5=AE=9A?=
 =?UTF-8?q?=E4=BD=8D=E5=9B=9E=E5=A4=8D=E6=B6=88=E6=81=AF-=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E9=97=AA=E7=83=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/RenderMsg.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/RenderMsg.tsx b/src/components/RenderMsg.tsx
index ea63a360..3558af8d 100644
--- a/src/components/RenderMsg.tsx
+++ b/src/components/RenderMsg.tsx
@@ -1,9 +1,6 @@
 import { defineComponent } from 'vue'
 import DOMPurify from 'dompurify'
 
-/**
- * @param {isFlash} props 是否是闪烁的消息,这里是单纯文字闪烁
- */
 export default defineComponent({
   props: ['urlMap', 'text', 'isMe'],
   setup(props) {