u

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

@@ -9,10 +9,11 @@ $popup-prefix: '#{$prefix}-popup';
   color: $text-color-base;
   padding: 4px 8px;
   font-size: 13px;
-  border-radius: 2px;
+  border-radius: $border-radius;
   z-index: 1000;
   box-sizing: border-box;
   text-align: center;
+  box-shadow: $shadow-popup, $shadow-inset-top, $shadow-inset-right, $shadow-inset-bottom, $shadow-inset-left;
   &-arrow {
     position: absolute;
     width: 8px;
@@ -28,53 +29,38 @@ $popup-prefix: '#{$prefix}-popup';
       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;
   }
+  &[data-popup-placement^='top'] > &-arrow::before {
+    box-shadow: $shadow-inset-left, $shadow-inset-bottom;
+  }
 
   // 下方弹出，箭头在顶部
   &[data-popup-placement^='bottom'] > &-arrow {
     top: -4px;
   }
+  &[data-popup-placement^='bottom'] > &-arrow::before {
+    box-shadow: $shadow-inset-top, $shadow-inset-right;
+  }
 
   // 左侧弹出，箭头在右侧
   &[data-popup-placement^='left'] > &-arrow {
     right: -4px;
   }
+  &[data-popup-placement^='left'] > &-arrow::before {
+    box-shadow: $shadow-inset-left, $shadow-inset-top;
+  }
 
   // 右侧弹出，箭头在左侧
   &[data-popup-placement^='right'] > &-arrow {
     left: -4px;
   }
+  &[data-popup-placement^='right'] > &-arrow::before {
+    box-shadow: $shadow-inset-right, $shadow-inset-bottom;
+  }
 }
 
 /* 普通淡入淡出动画 */

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

@@ -1,4 +1,4 @@
-import type { PropType, VNode } from 'vue'
+import type { PropType } from 'vue'
 import { arrow, autoUpdate, flip, offset, useFloating } from '@floating-ui/vue'
 
 import {