From b881a32e5ddba1cc4bd81fc3178159c20b1300aa Mon Sep 17 00:00:00 2001
From: sakurayinfei <970412446@qq.com>
Date: Fri, 10 Oct 2025 17:18:11 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat(message):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E7=9A=AE=E8=82=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/message/style/style.scss          | 2 +-
 packages/opendesign/src/message/style/theme-ascend.scss   | 8 ++++++++
 packages/opendesign/src/message/style/theme-common.scss   | 7 +++++++
 packages/opendesign/src/message/style/theme-kunpeng.scss  | 8 ++++++++
 .../opendesign/src/message/style/theme-openeuler.scss     | 8 ++++++++
 packages/opendesign/src/message/style/var.scss            | 1 +
 6 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 packages/opendesign/src/message/style/theme-common.scss

diff --git a/packages/opendesign/src/message/style/style.scss b/packages/opendesign/src/message/style/style.scss
index b18580a9..037d702c 100644
--- a/packages/opendesign/src/message/style/style.scss
+++ b/packages/opendesign/src/message/style/style.scss
@@ -53,7 +53,7 @@
 
 .o-message-list {
   position: fixed;
-  z-index: 1001;
+  z-index: var(--z-index);
   left: 50%;
   transform: translateX(-50%);
   display: flex;
diff --git a/packages/opendesign/src/message/style/theme-ascend.scss b/packages/opendesign/src/message/style/theme-ascend.scss
index e69de29b..9df9f601 100644
--- a/packages/opendesign/src/message/style/theme-ascend.scss
+++ b/packages/opendesign/src/message/style/theme-ascend.scss
@@ -0,0 +1,8 @@
+@use './theme-common.scss' as *;
+
+.o-message-info {
+  --message-icon-color: #058ef0;
+  &.o-message-colorful {
+    --message-bg-color: #e8f9ff;
+  }
+}
diff --git a/packages/opendesign/src/message/style/theme-common.scss b/packages/opendesign/src/message/style/theme-common.scss
new file mode 100644
index 00000000..799cb159
--- /dev/null
+++ b/packages/opendesign/src/message/style/theme-common.scss
@@ -0,0 +1,7 @@
+.c-message-align-top {
+  --message-align: flex-start;
+  --message-text-height: var(--message-icon-size);
+}
+.o-message-list {
+  --z-index: 1008;
+}
diff --git a/packages/opendesign/src/message/style/theme-kunpeng.scss b/packages/opendesign/src/message/style/theme-kunpeng.scss
index e69de29b..9df9f601 100644
--- a/packages/opendesign/src/message/style/theme-kunpeng.scss
+++ b/packages/opendesign/src/message/style/theme-kunpeng.scss
@@ -0,0 +1,8 @@
+@use './theme-common.scss' as *;
+
+.o-message-info {
+  --message-icon-color: #058ef0;
+  &.o-message-colorful {
+    --message-bg-color: #e8f9ff;
+  }
+}
diff --git a/packages/opendesign/src/message/style/theme-openeuler.scss b/packages/opendesign/src/message/style/theme-openeuler.scss
index e69de29b..ce1e5deb 100644
--- a/packages/opendesign/src/message/style/theme-openeuler.scss
+++ b/packages/opendesign/src/message/style/theme-openeuler.scss
@@ -0,0 +1,8 @@
+@use './theme-common.scss' as *;
+
+.o-message-info {
+  --message-icon-color: #058ef0;
+  &.o-message-colorful {
+    --message-bg-color: #cedbf5;
+  }
+}
diff --git a/packages/opendesign/src/message/style/var.scss b/packages/opendesign/src/message/style/var.scss
index 7c8cdd76..779cf28a 100644
--- a/packages/opendesign/src/message/style/var.scss
+++ b/packages/opendesign/src/message/style/var.scss
@@ -72,4 +72,5 @@
   --message-list-offset: 32px;
   --message-list-top-offset: var(--message-list-offset);
   --message-list-bottom-offset: var(--message-list-offset);
+  --z-index: 1001;
 }
-- 
Gitee


From da89383824fa03f0e0dc42d3139ab1bef1b5cad6 Mon Sep 17 00:00:00 2001
From: sakurayinfei <970412446@qq.com>
Date: Wed, 15 Oct 2025 15:05:05 +0800
Subject: [PATCH 2/2] =?UTF-8?q?doc:=20=E6=96=B0=E5=A2=9Emessage=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/src/App.vue                     |  5 +-
 .../__docs__/__case__/MessageClose.vue        | 47 +++++++++++++++
 .../__docs__/__case__/MessageMethod.vue       | 60 +++++++++++++++++++
 .../__docs__/__case__/MessageTheme.vue        | 58 ++++++++++++++++++
 .../__docs__/__case__/MessageUsage.vue        | 36 +++++++++++
 .../src/message/__docs__/index.en-US.md       | 53 ++++++++++++++++
 .../src/message/__docs__/index.zh-CN.md       | 53 ++++++++++++++++
 packages/opendesign/src/message/types.ts      | 25 +++++---
 8 files changed, 329 insertions(+), 8 deletions(-)
 create mode 100644 packages/opendesign/src/message/__docs__/__case__/MessageClose.vue
 create mode 100644 packages/opendesign/src/message/__docs__/__case__/MessageMethod.vue
 create mode 100644 packages/opendesign/src/message/__docs__/__case__/MessageTheme.vue
 create mode 100644 packages/opendesign/src/message/__docs__/__case__/MessageUsage.vue
 create mode 100644 packages/opendesign/src/message/__docs__/index.en-US.md
 create mode 100644 packages/opendesign/src/message/__docs__/index.zh-CN.md

diff --git a/packages/docs/src/App.vue b/packages/docs/src/App.vue
index b8869ff5..38ea127a 100644
--- a/packages/docs/src/App.vue
+++ b/packages/docs/src/App.vue
@@ -130,10 +130,13 @@ router.beforeEach((to) => {
 </template>
 
 <style lang="scss">
-.app-wrapper {
+:root {
   --app-header-height: 48px;
   --app-header-margin: var(--o3-gap-4);
 }
+.o-message-list {
+  --message-list-top-offset: calc(var(--app-header-height) + 32px);
+}
 .app-header {
   position: fixed;
   left: 0;
diff --git a/packages/opendesign/src/message/__docs__/__case__/MessageClose.vue b/packages/opendesign/src/message/__docs__/__case__/MessageClose.vue
new file mode 100644
index 00000000..3896f317
--- /dev/null
+++ b/packages/opendesign/src/message/__docs__/__case__/MessageClose.vue
@@ -0,0 +1,47 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+#### 关闭消息
+
+每种消息方法都会返回一个用于关闭当前消息的函数，可用于手动关闭
+
+<!-- en-US -->
+
+#### Close Message
+
+Each message method returns a function that can be used to manually close the current message.
+</docs>
+<script setup lang="ts">
+import { shallowReactive, ref } from 'vue';
+import { useMessage, OButton } from '@opensig/opendesign';
+
+const count = ref(1);
+const message = useMessage();
+const messages = shallowReactive<Record<string, () => void>>({});
+const addMessage = () => {
+  const currentCount = count.value++;
+  const close = message.info({
+    content: `${currentCount} You can close me by clicking the close button`,
+    // 0: The message will not be closed automatically
+    duration: 0,
+  });
+  messages[currentCount] = () => {
+    close();
+    delete messages[currentCount];
+  };
+};
+</script>
+<template>
+  <OButton variant="solid" color="primary" @click="addMessage">Show info {{ count }}</OButton>
+  <div class="close-btns">
+    <OButton v-for="[index, close] in Object.entries(messages)" :key="index" @click="close">Close {{ index }}</OButton>
+  </div>
+</template>
+<style scoped lang="scss">
+.close-btns {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 16px;
+}
+</style>
diff --git a/packages/opendesign/src/message/__docs__/__case__/MessageMethod.vue b/packages/opendesign/src/message/__docs__/__case__/MessageMethod.vue
new file mode 100644
index 00000000..0e275536
--- /dev/null
+++ b/packages/opendesign/src/message/__docs__/__case__/MessageMethod.vue
@@ -0,0 +1,60 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+#### 设置消息位置
+
+- 调用 `useMessage` 时，可传入 `target` 参数，用于指定消息显示在哪个元素附近。
+- 每种消息方法（如 `info`、`success` 等）都支持传入配置对象，其中可设置以下位置属性：
+  - `position`：指定消息出现在目标元素的 `top`（顶部）或 `bottom`（底部）。
+  - `targetAlign`：设置消息框与目标元素的对齐方式，支持 `center`（居中）、`left`（左对齐）和 `right`（右对齐）。
+  - **注意**：仅当指定了 `target` 元素时，`targetAlign` 才会生效。
+
+<!-- en-US -->
+
+#### Set Message Position
+
+- When calling `useMessage`, you can pass a `target` parameter to specify which element the message should appear near.
+- Each message method (e.g., `info`, `success`, etc.) supports passing a configuration object, which can include the following positioning properties:
+  - `position`: Specifies whether the message appears at the `top` or `bottom` of the target element.
+  - `targetAlign`: Sets the alignment of the message box relative to the target element, supporting `center`, `left`, and `right`.
+  - **Note**: `targetAlign` will only take effect when a `target` element is specified.
+</docs>
+<script setup lang="ts">
+import { useTemplateRef } from 'vue';
+import { OTextarea, OButton, useMessage } from '@opensig/opendesign';
+
+const container = useTemplateRef('feedback-container');
+const message = useMessage(container);
+const submit = () => {
+  message.success({
+    content: 'Thanks for your feedback',
+    position: 'bottom',
+    targetAlign: 'right',
+  });
+};
+</script>
+<template>
+  <div ref="feedback-container" class="feedback">
+    <OTextarea placeholder="feedback..." class="feedback-textarea" />
+    <div class="operations">
+      <OButton @click="submit">Submit</OButton>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.feedback {
+  width: 300px;
+  padding: 12px;
+  border: 1px solid var(--o-color-control1);
+  background-color: var(--o-color-control-light);
+}
+.feedback-textarea {
+  width: 100%;
+  height: 200px;
+}
+.operations {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/packages/opendesign/src/message/__docs__/__case__/MessageTheme.vue b/packages/opendesign/src/message/__docs__/__case__/MessageTheme.vue
new file mode 100644
index 00000000..e1f9c255
--- /dev/null
+++ b/packages/opendesign/src/message/__docs__/__case__/MessageTheme.vue
@@ -0,0 +1,58 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 主题规范
+
+鲲鹏、昇腾及欧拉主题规范中要求图标与文字顶部对齐，可给`OMessage`组件添加 `c-message-align-top` 实现该效果；要求文字左对齐，可覆盖 CSS 变量 `--message-text-align: left`。
+
+<!-- en-US -->
+
+### Theming Specifications
+
+The Kunpeng, Ascend, and openEuler theming specifications require icons to be top-aligned with text.
+This can be achieved by adding the `c-message-align-top` class to the `OMessage` component.
+Additionally, left-aligned text is required and can be implemented by overriding the CSS variable `--message-text-align: left`.
+</docs>
+
+<script setup lang="ts">
+import { OMessage } from '@opensig/opendesign';
+
+const status = ['info', 'success', 'warning', 'danger', 'loading'] as const;
+</script>
+<template>
+  <div class="message-group">
+    <div class="global">
+      <OMessage v-for="(s, index) in status" :key="s" :status="s" :duration="5000 + 1000 * index">Disappear after {{ 5 + index }} seconds</OMessage>
+    </div>
+    <div class="inline">
+      <OMessage v-for="s in status" :key="s" :status="s" colorful>{{ s }}</OMessage>
+      <OMessage status="success" closable colorful>You can close the message</OMessage>
+      <OMessage status="info" colorful class="c-message-align-top text-align-left">
+        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti vero rem quod natus incidunt quaerat quia doloremque ullam reiciendis facere porro,
+        repellat beatae quas saepe consequuntur id voluptatibus exercitationem atque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam veritatis
+        veniam tempore assumenda aperiam repudiandae voluptates enim voluptatibus nobis neque itaque quis autem, similique fuga pariatur aut ratione
+        perspiciatis illum?
+      </OMessage>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.message-group {
+  display: flex;
+}
+.global {
+  flex-shrink: 0;
+}
+.global:has(.o-message) {
+  margin-right: 24px;
+}
+.global,
+.inline {
+  :deep(.o-message + .o-message) {
+    margin-top: 16px;
+  }
+}
+.text-align-left {
+  --message-text-align: left;
+}
+</style>
diff --git a/packages/opendesign/src/message/__docs__/__case__/MessageUsage.vue b/packages/opendesign/src/message/__docs__/__case__/MessageUsage.vue
new file mode 100644
index 00000000..1c06ea48
--- /dev/null
+++ b/packages/opendesign/src/message/__docs__/__case__/MessageUsage.vue
@@ -0,0 +1,36 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 内联
+
+<!-- en-US -->
+
+### Inline
+
+</docs>
+<script setup lang="ts">
+import { DocDemoSchema, DocDemoTemplate } from '../../../_demo/types';
+import { propsToAttrStr } from '../../../_demo/utils';
+
+const _schema = {
+  status: {
+    type: 'list',
+    list: ['info', 'success', 'warning', 'danger', 'loading'],
+    default: 'info',
+  },
+  closable: {
+    type: 'boolean',
+    default: false,
+  },
+  colorful: {
+    type: 'boolean',
+    default: false,
+  },
+} satisfies Record<string, DocDemoSchema>;
+
+const _template: DocDemoTemplate<typeof _schema> = (props) => {
+  return `<OMessage ${propsToAttrStr(props)}>${props.status}</OMessage>`;
+};
+
+const _ctx = {};
+</script>
diff --git a/packages/opendesign/src/message/__docs__/index.en-US.md b/packages/opendesign/src/message/__docs__/index.en-US.md
new file mode 100644
index 00000000..85e247d4
--- /dev/null
+++ b/packages/opendesign/src/message/__docs__/index.en-US.md
@@ -0,0 +1,53 @@
+---
+sidebar: OMessage
+kind: feedback
+---
+
+# OMessage
+
+## Demo
+
+<!-- @usage MessageUsage -->
+<!-- @case MessageMethod -->
+<!-- @case MessageClose -->
+<!-- @case:a|k|e MessageTheme -->
+
+## API
+
+<!-- @api OMessage -->
+
+### useMessage
+
+```ts
+type MessageTarget = string | ComponentPublicInstance | HTMLElement | null | undefined;
+type MessageParamsT = Partial<
+  // MessagePropsT: The type of props for the OMessage component
+  MessagePropsT & {
+    // Message content
+    content: string | VNode | Component;
+    // Position where the message is displayed
+    position: 'top' | 'bottom';
+    // Horizontal alignment of the message box relative to `target`
+    targetAlign?: 'center' | 'left' | 'right';
+    // Icon for the message
+    icon: VNode | Component;
+    // Duration for which the message is displayed
+    onDurationEnd: () => void;
+    // Click event for the message box's own close button
+    onClose: (ev?: MouseEvent) => void;
+  }
+>;
+function useMessage(target?: Ref<MessageTarget> | MessageTarget): {
+  /** @return Returns a function that closes this message */
+  show: (params: MessageParamsT) => () => void;
+  info: (params: Omit<MessageParamsT, 'status'>) => () => void;
+  success: (params: Omit<MessageParamsT, 'status'>) => () => void;
+  warning: (params: Omit<MessageParamsT, 'status'>) => () => void;
+  danger: (params: Omit<MessageParamsT, 'status'>) => () => void;
+  loading: (params: Omit<MessageParamsT, 'status'>) => () => void;
+  // Closes all messages rendered by this useMessage instance
+  close: () => void;
+  // Closes all messages rendered by all instances
+  closeAll: () => void;
+};
+```
diff --git a/packages/opendesign/src/message/__docs__/index.zh-CN.md b/packages/opendesign/src/message/__docs__/index.zh-CN.md
new file mode 100644
index 00000000..045f74f0
--- /dev/null
+++ b/packages/opendesign/src/message/__docs__/index.zh-CN.md
@@ -0,0 +1,53 @@
+---
+sidebar: OMessage 消息
+kind: feedback
+---
+
+# OMessage 消息
+
+## 示例
+
+<!-- @usage MessageUsage -->
+<!-- @case MessageMethod -->
+<!-- @case MessageClose -->
+<!-- @case:a|k|e MessageTheme -->
+
+## API
+
+<!-- @api OMessage -->
+
+### useMessage
+
+```ts
+type MessageTarget = string | ComponentPublicInstance | HTMLElement | null | undefined;
+type MessageParamsT = Partial<
+  // MessagePropsT: OMessage组件的props的类型
+  MessagePropsT & {
+    // 消息内容
+    content: string | VNode | Component;
+    // 消息显示的位置
+    position: 'top' | 'bottom';
+    // 消息框与 `target` 的水平对齐方式
+    targetAlign?: 'center' | 'left' | 'right';
+    // 消息的图标
+    icon: VNode | Component;
+    // 消息显示的持续时间
+    onDurationEnd: () => void;
+    // 消息框自身关闭按钮的点击事件
+    onClose: (ev?: MouseEvent) => void;
+  }
+>;
+function useMessage(target?: Ref<MessageTarget> | MessageTarget): {
+  /** @return 关闭该条消息框的函数 */
+  show: (params: MessageParamsT) => () => void;
+  info: (params: Omit<MessageParamsT, 'status'>) => () => void;
+  success: (params: Omit<MessageParamsT, 'status'>) => () => void;
+  warning: (params: Omit<MessageParamsT, 'status'>) => () => void;
+  danger: (params: Omit<MessageParamsT, 'status'>) => () => void;
+  loading: (params: Omit<MessageParamsT, 'status'>) => () => void;
+  // 关闭本 useMessage 实例渲染的所有消息
+  close: () => void;
+  // 关闭所有实例渲染的所有消息
+  closeAll: () => void;
+};
+```
diff --git a/packages/opendesign/src/message/types.ts b/packages/opendesign/src/message/types.ts
index 21b1807d..693970e4 100644
--- a/packages/opendesign/src/message/types.ts
+++ b/packages/opendesign/src/message/types.ts
@@ -7,48 +7,59 @@ export type MessagePositionT = 'top' | 'bottom';
 
 export const messageProps = {
   /**
-   * 消息是否可见 v-model
+   * @zh-CN 消息是否可见 v-model
+   * @en-US Message is visible v-model
    */
   visible: {
     type: Boolean,
     default: undefined,
   },
   /**
-   * 非受控模式，消息是否默认可见
+   * @zh-CN 非受控模式，消息是否默认可见
+   * @en-US Non-controlled mode, message is visible by default
+   * @default true
    */
   defaultVisible: {
     type: Boolean,
     default: true,
   },
   /**
-   * 状态 MessageStatusT
+   * @zh-CN 状态
+   * @en-US Status
+   * @default 'info'
    */
   status: {
     type: String as PropType<MessageStatusT>,
     default: 'info',
   },
   /**
-   * 预置背景（跟随状态）
+   * @zh-CN 是否是彩色背景（跟随 status 变化）
+   * @en-US Is colored background (follows the status change)
+   * @default false
    */
   colorful: {
     type: Boolean,
     default: false,
   },
   /**
-   * 消息显示的持续时间，函数式调用时，默认值为3000
+   * @zh-CN 消息显示的持续时间（单位ms）。未设置或小于等于0时，消息将不会自动关闭
+   * @en-US The duration for which the message is displayed (unit: ms). If not set or less than or equal to 0, the message will not close automatically
    */
   duration: {
     type: Number,
   },
   /**
-   * 是否可手动关闭
+   * @zh-CN 是否可手动关闭
+   * @en-US Whether to manually close
+   * @default false
    */
   closable: {
     type: Boolean,
     default: false,
   },
   /**
-   * 关闭前的钩子函数
+   * @zh-CN 关闭前的钩子函数
+   * @en-US Hook function before closing
    */
   beforeClose: {
     type: Function as PropType<() => Promise<boolean> | boolean>,
-- 
Gitee