u

code/base-project/base-vue/packages/ao-design/src/notification/index.scss

@@ -12,9 +12,9 @@ $notification-prefix: #{$prefix}-notification;
 }
 
 .#{$notification-prefix} {
-  width: 360px;
+  min-width: 360px;
   padding: 12px 16px;
-  border-radius: $border-radius;
+  border-radius: 4px;
   background-color: $bg-color-container;
   color: $text-color-base;
   box-shadow: $shadow-overlay;
@@ -24,6 +24,7 @@ $notification-prefix: #{$prefix}-notification;
   border: 0;
   margin: 0;
   display: flex;
+  background-color: #ecf7ec;
 
   &-icon {
     text-align: center;
@@ -37,21 +38,26 @@ $notification-prefix: #{$prefix}-notification;
 
   &-title-wrapper {
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    word-break: break-all;
+    box-sizing: border-box;
+    line-height: 20px;
   }
 
   &-title {
     font-size: 16px;
-    font-weight: bold;
+    font-weight: 600;
+    line-height: 1;
+
     small {
-      margin-left: 4px;
+      margin: 0px 6px;
+      font-size: 14px;
     }
   }
 
   &-close {
     flex-shrink: 0;
-    margin-left: 6px;
+    margin-left: auto;
     color: $text-color-assist;
     cursor: pointer;
     border-radius: $border-radius;

code/base-project/base-vue/packages/ao-design/src/notification/index.ts

@@ -50,12 +50,16 @@ function getContainer(placement: Placement = 'top-end') {
 }
 
 function getTransform(placement: Placement, hidden: boolean) {
-  if (placement.startsWith('top'))
+  switch (placement) {
-    return hidden ? 'translateY(-10px)' : 'translateY(0)'
+    case 'top-start':
-  if (placement.startsWith('bottom'))
+    case 'bottom-start':
-    return hidden ? 'translateY(10px)' : 'translateY(0)'
+      return hidden ? 'translateX(-10px)' : 'translateX(0)'
-
+    case 'top-end':
-  return hidden ? 'translateY(-10px)' : 'translateY(0)'
+    case 'bottom-end':
+      return hidden ? 'translateX(10px)' : 'translateX(0)'
+    default:
+      return hidden ? 'translateX(-10px)' : 'translateX(0)'
+  }
 }
 
 export function useNotification(): MessageFn {

code/base-project/base-vue/packages/ao-design/src/notification/item.tsx

@@ -42,7 +42,7 @@ export default defineComponent({
       >
         <Icon
           icon={iconMap[props.type ?? 'info']}
-          size={26}
+          size={22}
           class={`${prefixCls}-icon ${prefixCls}-${props.type ?? 'info'}`}
           spin={props.type === 'loading'}
         />
@@ -50,10 +50,8 @@ export default defineComponent({
         <div class={`${prefixCls}-main`}>
           <div class={`${prefixCls}-title-wrapper`}>
             <span class={`${prefixCls}-title`}>
-              <div>
+              {props.title}
-                {props.title}
+              <small>{props.subTitle}</small>
-                <small>{props.subTitle}</small>
-              </div>
             </span>
             {props.showClose
               ? (

code/base-project/base-vue/src/App.vue

@@ -6,12 +6,10 @@ const notification = useNotification()
 
 function showCustomMessage() {
   notification.success({
-    title: '自定义消息',
+    title: '测试',
+    subTitle: '测试2222222222222222222222222222222222222222222222222',
     message: () =>
       h('div', { style: { color: 'red', position: 'relative' } }, [
-        h('p', {}, '这里是自定义内容，可以是任意 VNode'),
-        h('strong', {}, '加粗文本'),
-        // 右下角按钮容器
         h(
           'div',
           {