From 177bd8aefc71b351b143893c3dc97b247cbc6f56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8F=9C=E5=BE=97=E8=AE=A9=E4=BA=BA=E5=8F=91=E6=AF=9B?= <2328204591@qq.com> Date: Mon, 8 Dec 2025 17:12:10 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat(OMessage):=20=E6=8C=89=E6=96=87?= =?UTF-8?q?=E6=A1=A3=E8=A7=84=E8=8C=83=E8=B0=83=E6=95=B4OMessage=E5=B8=83?= =?UTF-8?q?=E5=B1=80=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/opendesign/src/message/OMessage.vue | 15 +++++-- .../src/message/__demo__/MessageColorful.vue | 20 +++++----- .../opendesign/src/message/style/media.scss | 18 ++++++--- .../opendesign/src/message/style/style.scss | 39 ++++++++++++++++--- .../opendesign/src/message/style/var.scss | 34 ++++++++++------ packages/opendesign/src/message/types.ts | 6 +++ 6 files changed, 95 insertions(+), 37 deletions(-) diff --git a/packages/opendesign/src/message/OMessage.vue b/packages/opendesign/src/message/OMessage.vue index 59946966..d2ca84d6 100644 --- a/packages/opendesign/src/message/OMessage.vue +++ b/packages/opendesign/src/message/OMessage.vue @@ -24,7 +24,7 @@ watch( if (!isUndefined(val)) { isVisible.value = val; } - } + }, ); const emits = defineEmits<{ @@ -98,9 +98,16 @@ defineExpose({ - - - +
+ + + {{ props.title }} + + + + + +
diff --git a/packages/opendesign/src/message/__demo__/MessageColorful.vue b/packages/opendesign/src/message/__demo__/MessageColorful.vue index ef60f8b7..4f0dfaba 100644 --- a/packages/opendesign/src/message/__demo__/MessageColorful.vue +++ b/packages/opendesign/src/message/__demo__/MessageColorful.vue @@ -7,19 +7,19 @@ import { OMessage } from '../index';

内联使用

- 用于表示普通操作信息提示 - 用于表示操作顺利达成 - 用于表示操作引起一定后果 - 用于表示操作引起严重的后果 - 排队中，请稍后 + 用于表示普通操作信息提示 + 用于表示操作顺利达成 + 用于表示操作引起一定后果 + 用于表示操作引起严重的后果 + 排队中，请稍后
- 用于表示普通操作信息提示（提示常驻，可手动关闭） - 用于表示操作顺利达成（提示3秒后消失） - 用于表示操作引起一定后果（提示5秒后消失） - 用于表示操作引起严重的后果（提示8秒后消失） - 排队中，请稍后（提示10秒后消失） + 用于表示普通操作信息提示（提示常驻，可手动关闭） + 用于表示操作顺利达成（提示3秒后消失） + 用于表示操作引起一定后果（提示5秒后消失） + 用于表示操作引起严重的后果（提示8秒后消失） + 排队中，请稍后（提示10秒后消失）
diff --git a/packages/opendesign/src/message/style/media.scss b/packages/opendesign/src/message/style/media.scss index 4acfb5fa..10f10007 100644 --- a/packages/opendesign/src/message/style/media.scss +++ b/packages/opendesign/src/message/style/media.scss @@ -1,12 +1,14 @@ @use '../../_styles/mixin.scss' as *; +@include respond-to('pad_v-pc_s') { + .o-message.o-message-colorful { + --message-padding: 4px 8px 8px; + } +} + @include respond-to('laptop') { .o-message { - --message-text-size: var(--o-font_size-tip1); - --message-text-height: var(--o-line_height-tip1); --message-padding: 7px 12px; - --message-icon-size: var(--o-icon_size_control-s); - --message-icon-gap: 8px; --message-gap: 12px; } } @@ -16,8 +18,12 @@ --message-text-size: var(--o-font_size-tip2); --message-text-height: var(--o-line_height-tip2); --message-padding: 7px 12px; - --message-icon-size: var(--o-icon_size_control-xs); - --message-icon-gap: 8px; --message-gap: 8px; } } + +@include respond-to('<=pad_v') { + .o-message-colorful { + --message-padding: 4px 12px 8px; + } +} \ No newline at end of file diff --git a/packages/opendesign/src/message/style/style.scss b/packages/opendesign/src/message/style/style.scss index f7c630b7..58ee0446 100644 --- a/packages/opendesign/src/message/style/style.scss +++ b/packages/opendesign/src/message/style/style.scss @@ -13,10 +13,32 @@ text-align: center; } -.o-message-content { +.o-message-colorful:not(.o-message-loading) { + overflow: hidden; + position: relative; + background-color: rgba(var(--message-bg-color), 0.05); + + &:after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 4px; + height: 100%; + background-color: rgb(var(--message-bg-color)); + } +} + +.o-message-main { + display: flex; + flex-direction: column; + align-items: flex-start; font-size: var(--message-text-size); line-height: var(--message-text-height); color: var(--message-color); +} + +.o-message-content { overflow: hidden; text-overflow: ellipsis; text-align: var(--message-text-align); @@ -26,6 +48,11 @@ -webkit-box-orient: vertical; } +.o-message-title { + margin-bottom: var(--message-title-gap); + font-weight: 600; +} + .o-message-icon { font-size: var(--message-icon-size); color: var(--message-icon-color); @@ -38,7 +65,7 @@ display: inline-flex; align-items: center; cursor: pointer; - margin-left: calc(var(--message-icon-gap) * 2); + margin-left: var(--message-icon-gap); font-size: var(--message-icon-size); color: var(--message-icon-close-color); transition: color var(--o-duration-s) var(--o-easing-standard); @@ -64,14 +91,16 @@ .o-message-list-top { top: var(--message-list-offset); - .o-message + .o-message { + + .o-message+.o-message { margin-top: var(--message-gap); } } .o-message-list-bottom { bottom: var(--message-list-offset); - .o-message + .o-message { + + .o-message+.o-message { margin-top: var(--message-gap); } } @@ -87,4 +116,4 @@ .o-message-fade-leave-to { opacity: 0; -} +} \ No newline at end of file diff --git a/packages/opendesign/src/message/style/var.scss b/packages/opendesign/src/message/style/var.scss index 1597d6d0..ab6a7253 100644 --- a/packages/opendesign/src/message/style/var.scss +++ b/packages/opendesign/src/message/style/var.scss @@ -1,8 +1,8 @@ .o-message { - --message-color: var(--o-color-info1); + --message-color: var(--o-color-info2); - --message-text-size: var(--o-font_size-text1); - --message-text-height: var(--o-line_height-text1); + --message-text-size: var(--o-font_size-tip1); + --message-text-height: var(--o-line_height-tip1); --message-bg-color: var(--o-color-fill2); @@ -26,42 +26,52 @@ --message-content-max-row: 0; --message-gap: 16px; + --message-title-gap: 4px; } .o-message-colorful { --message-shadow: none; + --message-padding: 4px 12px 8px; + + --message-align: start; + --message-text-align: left; } .o-message-info { - --message-icon-color: var(--o-color-primary1); + --message-icon-color: var(--o-color-auxiliary5, rgb(var(--o-blue-6))); + &.o-message-colorful { - --message-bg-color: var(--o-color-primary4-light); + --message-bg-color: var(--o-blue-6); } } .o-message-success { - --message-icon-color: var(--o-color-success1); + --message-icon-color: var(--o-color-success1, rgb(var(--o-green-6))); + &.o-message-colorful { - --message-bg-color: var(--o-color-success4-light); + --message-bg-color: var(--o-green-6); } } .o-message-warning { - --message-icon-color: var(--o-color-warning1); + --message-icon-color: var(--o-color-warning1, rgb(var(--o-orange-6))); + &.o-message-colorful { - --message-bg-color: var(--o-color-warning4-light); + --message-bg-color: var(--o-orange-6); } } .o-message-danger { - --message-icon-color: var(--o-color-danger1); + --message-icon-color: var(--o-color-danger1, rgb(var(--o-red-6))); + &.o-message-colorful { - --message-bg-color: var(--o-color-danger4-light); + --message-bg-color: var(--o-red-6); } } .o-message-loading { --message-icon-color: var(--o-color-info1); + &.o-message-colorful { --message-bg-color: var(--o-color-primary4-light); } @@ -69,4 +79,4 @@ .o-message-list { --message-list-offset: 32px; -} +} \ No newline at end of file diff --git a/packages/opendesign/src/message/types.ts b/packages/opendesign/src/message/types.ts index a262e907..38654b5a 100644 --- a/packages/opendesign/src/message/types.ts +++ b/packages/opendesign/src/message/types.ts @@ -53,6 +53,12 @@ export const messageProps = { beforeClose: { type: Function as PropType<() => Promise | boolean>, }, + /** + * 消息标题 + */ + title: { + type: String, + }, }; export const messageListProps = { -- Gitee From 28a6de3d0d5119775a2220308a20e52327c472af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8F=9C=E5=BE=97=E8=AE=A9=E4=BA=BA=E5=8F=91=E6=AF=9B?= <2328204591@qq.com> Date: Tue, 9 Dec 2025 16:58:07 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat(OMessage):=20=E6=96=B0=E5=A2=9Etitle?= =?UTF-8?q?=E5=AD=97=E4=BD=93=E8=A1=8C=E9=AB=98=E5=8F=98=E9=87=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/opendesign/src/message/style/media.scss | 4 ++++ packages/opendesign/src/message/style/style.scss | 2 ++ packages/opendesign/src/message/style/var.scss | 3 +++ 3 files changed, 9 insertions(+) diff --git a/packages/opendesign/src/message/style/media.scss b/packages/opendesign/src/message/style/media.scss index 10f10007..46cbfb7a 100644 --- a/packages/opendesign/src/message/style/media.scss +++ b/packages/opendesign/src/message/style/media.scss @@ -17,6 +17,10 @@ .o-message { --message-text-size: var(--o-font_size-tip2); --message-text-height: var(--o-line_height-tip2); + + --message-title-size: var(--o-font_size-tip2); + --message-title-height: var(--o-line_height-tip2); + --message-padding: 7px 12px; --message-gap: 8px; } diff --git a/packages/opendesign/src/message/style/style.scss b/packages/opendesign/src/message/style/style.scss index 58ee0446..e6b7b184 100644 --- a/packages/opendesign/src/message/style/style.scss +++ b/packages/opendesign/src/message/style/style.scss @@ -50,6 +50,8 @@ .o-message-title { margin-bottom: var(--message-title-gap); + font-size: var(--message-title-size); + line-height: var(--message-title-height); font-weight: 600; } diff --git a/packages/opendesign/src/message/style/var.scss b/packages/opendesign/src/message/style/var.scss index ab6a7253..d67346e3 100644 --- a/packages/opendesign/src/message/style/var.scss +++ b/packages/opendesign/src/message/style/var.scss @@ -4,6 +4,9 @@ --message-text-size: var(--o-font_size-tip1); --message-text-height: var(--o-line_height-tip1); + --message-title-size: var(--o-font_size-tip1); + --message-title-height: var(--o-line_height-tip1); + --message-bg-color: var(--o-color-fill2); --message-shadow: var(--o-shadow-2); -- Gitee