-
- {{ currentReplyUser?.name }}: {{ currentMsgReply.message?.body.content }}
-
-
-
+
+
+
+
+ {{ currentReplyUser?.name }}: {{ currentMsgReply.message?.body.content }}
+
+
+
+
+
diff --git a/src/views/Home/components/ChatBox/styles.scss b/src/views/Home/components/ChatBox/styles.scss
index 19876c76..e04640d3 100644
--- a/src/views/Home/components/ChatBox/styles.scss
+++ b/src/views/Home/components/ChatBox/styles.scss
@@ -2,7 +2,7 @@
display: flex;
flex: 1;
align-items: stretch;
- padding: 16px;
+ padding: 20px 20px 20px 0;
overflow: hidden;
}
@@ -12,6 +12,7 @@
flex: 1;
align-items: center;
justify-content: center;
+ margin-right: 20px;
}
.chat {
@@ -19,27 +20,128 @@
flex: 1;
flex-direction: column;
height: 100%;
+ padding-bottom: 16px;
background-color: var(--background-secondary);
border-radius: 8px;
}
-.chat-msg-send {
- padding: 10px 20px 20px;
- font-size: 0;
+.chat-edit {
+ position: relative;
+ padding: 0 16px;
word-break: break-all;
+ .msg-input {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ padding: 6px;
+ font-size: 14px;
+ color: var(--font-main);
+ background-color: var(--background-3);
+ border-radius: 12px;
+
+ .action {
+ display: flex;
+ align-items: center;
+ padding: 4px;
+ line-height: 1;
+ cursor: pointer;
+ background-color: var(--background-3);
+ border-radius: 4px;
+ }
+
+ .action:hover {
+ background-color: var(--hover-bg-2);
+ }
+
+ .send {
+ transition: all 0.3s ease;
+ }
+
+ .is-edit {
+ background-color: var(--background-2);
+ }
+
+ .is-edit .send {
+ transform: rotate(45deg);
+ }
+
+ .disabled {
+ color: var(--font-light);
+ pointer-events: none;
+ }
+
+ .divider {
+ position: relative;
+ display: inline-block;
+ width: 1px;
+ height: 1.2em;
+ margin: 0 4px;
+ vertical-align: middle;
+ border-left: 1px solid var(--background-2);
+ }
+
+ :deep(.el-textarea__inner) {
+ padding: 0;
+ font-size: 14px;
+ color: var(--font-main);
+ resize: none;
+ background-color: var(--background-3);
+ border: none;
+ box-shadow: none;
+ transition: 0.2s;
+ }
+
+ .recorded {
+ position: relative;
+ z-index: 20;
+ display: inline-flex;
+ justify-content: center;
+ width: 100%;
+ cursor: pointer;
+ user-select: none;
+ border-radius: 12px;
+
+ &-tips {
+ animation: scale-in-center 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+
+ @keyframes scale-in-center {
+ 0% {
+ opacity: 1;
+ transform: scale(0);
+ }
+
+ 100% {
+ opacity: 1;
+ transform: scale(1);
+ }
+ }
+ }
+
+ &:active {
+ margin: 0 10px;
+ font-weight: bolder;
+ line-height: 2em;
+ color: #ffb357;
+ box-shadow: 0 0 12px 10px var(--background-2);
+ transition: all 0.2s ease;
+ transform: scaleY(1.1);
+ }
+ }
+ }
+
.reply-msg-wrapper {
display: flex;
column-gap: 12px;
align-items: center;
padding: 4px 12px;
- margin-bottom: 12px;
+ margin-bottom: 4px;
font-size: 12px;
color: var(--font-light);
word-wrap: break-all;
white-space: pre-wrap;
background-color: var(--background-3);
- border-radius: 8px;
+ border-radius: 12px;
}
.reply-msg-content {
@@ -60,81 +162,17 @@
}
}
- .msg-input-box {
- display: flex;
- align-items: center;
- }
-
- .chat-not-login-mask {
+ .tips {
position: absolute;
- inset: 0;
- display: flex;
+ top: 0;
+ left: 0;
+ display: inline-flex;
align-items: center;
justify-content: center;
- font-size: 14px;
- user-select: none;
- }
-
- .login-link {
- margin-right: 4px;
- margin-left: 4px;
- color: var(--color-primary);
- }
-
- .msg-input-wrapper {
- position: relative;
- flex: 1;
- margin: 0;
- margin-right: 20px;
- }
-
- .msg-input {
- :deep(.el-textarea__inner) {
- box-sizing: border-box;
- width: 100%;
- padding: 10px;
- font-size: 14px;
- color: var(--font-main);
- resize: none;
- background-color: var(--background-3);
- border: none;
- border-radius: 16px;
- box-shadow: none;
- transition: 0.2s;
-
- &:focus {
- outline: 2px solid var(--hover-primary);
- }
- }
- }
-
- .emoji-button {
- margin-right: 10px;
- }
-
- .emoji-button,
- .send-button {
- width: 40px;
- height: 40px;
- padding: 0;
- padding-top: 4px;
- font-size: 24px;
- color: var(--font-main);
+ width: 100%;
+ height: 100%;
cursor: pointer;
- background-color: var(--color-primary);
- border: 0;
- border-radius: 12px;
- box-shadow: 0 0 5px 0 var(--hover-primary);
- transition: 0.3s;
-
- &:hover {
- box-shadow: 0 0 10px 0 var(--hover-primary);
- }
-
- &:disabled {
- cursor: not-allowed;
- opacity: 0.3;
- }
+ backdrop-filter: saturate(90%) blur(2px);
}
}
@@ -162,13 +200,30 @@
}
}
-@media only screen and (min-width: 640px) {
+@keyframes audio-wave {
+ 0% {
+ transform: scaleY(1);
+ }
+
+ 50% {
+ transform: scaleY(0.8);
+ }
+
+ 100% {
+ transform: scaleY(1);
+ }
+}
+
+.audio {
+ animation: audio-wave 1s infinite;
+}
+
+@media only screen and (max-width: 640px) {
.chat-box {
- padding: 20px;
- padding-left: 0;
+ padding: 8px 0 0;
}
.chat-wrapper {
- margin-right: 20px;
+ margin-right: 0;
}
}
diff --git a/src/views/Home/components/ChatList/ContextMenu/index.vue b/src/views/Home/components/ChatList/ContextMenu/index.vue
index 398599d3..1461ce52 100644
--- a/src/views/Home/components/ChatList/ContextMenu/index.vue
+++ b/src/views/Home/components/ChatList/ContextMenu/index.vue
@@ -11,6 +11,7 @@ import { useUserStore } from '@/stores/user'
import { copyToClip } from '@/utils/copy'
import { useChatStore } from '@/stores/chat'
import { PowerType, type MessageType } from '@/services/types'
+import { MsgEnum } from '@/enums'
const props = defineProps({
// 消息体
@@ -52,6 +53,18 @@ const copyContent = () => {
copyToClip(content)
}
+// 下载
+const download = () => {
+ const { body } = props.msg.message
+ const url = body?.url
+ if (!url) return
+ const a = document.createElement('a')
+ a.href = url
+ a.download = body.fileName || '未知文件'
+ a.click()
+ a.remove()
+}
+
const onDelete = () => chatStore.deleteMsg(props.msg.message.id)
@@ -64,25 +77,34 @@ const onDelete = () => chatStore.deleteMsg(props.msg.message.id)
...props.options,
}"
>
-
+
-
+
-
+
+
+
+
+
+
-
+
-
+
diff --git a/src/views/Home/components/ChatList/ContextMenu/styles.scss b/src/views/Home/components/ChatList/ContextMenu/styles.scss
index 8642a8c6..7479109a 100644
--- a/src/views/Home/components/ChatList/ContextMenu/styles.scss
+++ b/src/views/Home/components/ChatList/ContextMenu/styles.scss
@@ -23,16 +23,11 @@
padding-right: 4px;
}
- .icon {
- width: 14px;
- height: 14px;
- }
-
.mx-context-menu-item-sperator {
background-color: var(--background-3);
}
.mx-context-menu-item-sperator::after {
- background-color: var(--background-3);
+ background-color: var(--background-2);
}
}
diff --git a/src/views/Home/components/ChatList/MsgItem/index.vue b/src/views/Home/components/ChatList/MsgItem/index.vue
index adf79edd..f221b33d 100644
--- a/src/views/Home/components/ChatList/MsgItem/index.vue
+++ b/src/views/Home/components/ChatList/MsgItem/index.vue
@@ -5,8 +5,6 @@ import { useChatStore, pageSize } from '@/stores/chat'
import { formatTimestamp } from '@/utils/computedTime'
import { useUserInfo, useBadgeInfo } from '@/hooks/useCached'
import type { MessageType, MsgType } from '@/services/types'
-import defaultAvatar from '@/assets/avatars/default.png'
-import RenderMsg from '@/components/RenderMsg.vue'
import MsgOption from '../MsgOption/index.vue'
import ContextMenu from '../ContextMenu/index.vue'
import type { TooltipTriggerType } from 'element-plus/es/components/tooltip/src/trigger'
@@ -126,9 +124,7 @@ onMounted(() => {
{{ message.body }}
-
-
![]()
-
+
{
:trigger="tooltipTrigger"
:placement="tooltipPlacement || 'bottom-end'"
:offset="2"
- :hide-after="30"
:show-arrow="false"
:teleported="false"
>
@@ -158,24 +153,21 @@ onMounted(() => {
-
+
+
-
+
{{ message.body.reply.username }}: {{ message.body.reply.body }}
@@ -187,7 +179,7 @@ onMounted(() => {
:class="['extra-item like', { active: isLike }]"
@click="onLike"
>
-
+
{{ likeCount }}
@@ -199,7 +191,7 @@ onMounted(() => {
:class="['extra-item dlike', { active: isDisLike }]"
@click="onDisLike"
>
-
+
{{ dislikeCount }}
@@ -212,7 +204,7 @@ onMounted(() => {
-
+