test buble

src/app.less

@@ -440,5 +440,34 @@
   height: 16px;
   border-radius: 4px;
 }
+z
 
+.bubble-wrapper {
+  position: relative;
+  display: inline-block;
+  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.15)); /* 🔑 关键：父级统一阴影 */
+}
+
+.bubble {
+  position: relative;
+  background: white;
+  border-radius: 12px;
+  padding: 16px 20px;
+  max-width: 300px;
+  font-size: 16px;
+  /* ❌ 移除了 box-shadow */
+}
+
+.bubble::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 24px;
+  width: 16px;
+  height: 16px;
+  background: white;
+  border-radius: 3px;
+  transform: translateY(-50%) rotate(45deg);
+  /* ❌ 移除了 box-shadow 和 z-index */
+}
 

src/components/AgentPage/index.tsx

@@ -70,6 +70,11 @@ export default function Index({ agentId }: IProps) {
       <NavBarNormal blur scrollFadeIn scrollFadeInDelta={240} leftColumn={Logo}></NavBarNormal>
       {renderDefaultPlaceholder()}
       <View className="blur-rounded-container">
+        <view className="bubble-wrapper">
+          <view className="bubble">
+            这是一个带阴影的圆润气泡框
+          </view>
+        </view>
         {(!!agent) ? <AgentActionBar isVisitor={false} agent={agent}></AgentActionBar> : <></>}
         <View className={`flex flex-col gap-12 w-full p-16`}>
           <ComponentList components={components}></ComponentList>