u

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

@@ -12,26 +12,50 @@ $popup-prefix: '#{$prefix}-popup';
   border-radius: 2px;
   z-index: 1000;
   box-sizing: border-box;
-  box-shadow: $shadow-popup;
   text-align: center;
   &-arrow {
     position: absolute;
     width: 8px;
     height: 8px;
     z-index: 1;
+
     &::before {
-      position: absolute;
       content: '';
-      width: 8px;
-      height: 8px;
+      position: absolute;
+      inset: 0;
+      background: $bg-color-container;
       transform: rotate(45deg);
-      // background: $bg-color-container;
-      background: red;
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
+      transform-origin: center;
     }
   }
+  // 上方弹出，阴影主方向靠下（轻微），边缘明显
+  &[data-popup-placement^='top'] {
+    box-shadow:
+      0 4px 8px rgba(0, 0, 0, 0.06),
+      0 0 4px rgba(0, 0, 0, 0.12); //
+  }
+
+  // 下方弹出，阴影主方向靠上，边缘明显
+  &[data-popup-placement^='bottom'] {
+    box-shadow:
+      0 -4px 8px rgba(0, 0, 0, 0.06),
+      0 0 4px rgba(0, 0, 0, 0.12);
+  }
+
+  // 左侧弹出，阴影主方向靠右，边缘明显
+  &[data-popup-placement^='left'] {
+    box-shadow:
+      4px 0 8px rgba(0, 0, 0, 0.06),
+      0 0 4px rgba(0, 0, 0, 0.12);
+  }
+
+  // 右侧弹出，阴影主方向靠左，边缘明显
+  &[data-popup-placement^='right'] {
+    box-shadow:
+      -4px 0 8px rgba(0, 0, 0, 0.06),
+      0 0 4px rgba(0, 0, 0, 0.12);
+  }
+
   // 上方弹出，箭头在底部
   &[data-popup-placement^='top'] > &-arrow {
     bottom: -4px;

code/base-project/base-vue/packages/ao-design/src/popup/index.tsx

@@ -262,7 +262,7 @@ export default defineComponent({
                   >
                     {slots.content ? slots.content() : props.content}
                     {props.showArrow && (
-                      <div
+                      <span
                         class={`${prefixCls}-arrow`}
                         ref={arrowRef}
                         style={{