From 8c71ead6c35745fb0c8b9321a2633020a55f8663 Mon Sep 17 00:00:00 2001
From: "weifang.jiagweifan" <weifang.jiagweifan@antgroup.com>
Date: Thu, 19 Sep 2024 16:41:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20popover=20=E6=A0=B7=E5=BC=8F=E5=8D=87?=
 =?UTF-8?q?=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 compiled/alipay/demo/pages/Popover/index.axml | 66 +++++++++++++++++--
 compiled/alipay/demo/pages/Popover/index.js   |  3 +
 compiled/alipay/demo/pages/Popover/index.less |  7 +-
 compiled/alipay/src/Popover/index.axml        | 40 ++++++++++-
 compiled/alipay/src/Popover/index.json        |  1 +
 compiled/alipay/src/Popover/index.less        | 50 +++++++++++++-
 compiled/alipay/src/Popover/index.ts          |  4 ++
 compiled/alipay/src/Popover/props.ts          | 23 +++++++
 compiled/wechat/demo/pages/Popover/index.js   |  3 +
 compiled/wechat/demo/pages/Popover/index.wxml | 66 +++++++++++++++++--
 compiled/wechat/demo/pages/Popover/index.wxss |  4 +-
 compiled/wechat/src/Popover/index.js          |  4 ++
 compiled/wechat/src/Popover/index.json        |  1 +
 compiled/wechat/src/Popover/index.wxml        | 32 +++++++++
 compiled/wechat/src/Popover/index.wxss        | 47 ++++++++++++-
 compiled/wechat/src/Popover/props.js          |  4 ++
 demo/pages/Popover/index.axml                 | 45 +++++++++++--
 demo/pages/Popover/index.less                 |  7 +-
 demo/pages/Popover/index.ts                   |  3 +
 src/Popover/index.axml                        | 18 ++++-
 src/Popover/index.json                        |  1 +
 src/Popover/index.less                        | 50 +++++++++++++-
 src/Popover/index.ts                          |  4 ++
 src/Popover/props.ts                          | 23 +++++++
 24 files changed, 474 insertions(+), 32 deletions(-)

diff --git a/compiled/alipay/demo/pages/Popover/index.axml b/compiled/alipay/demo/pages/Popover/index.axml
index 2742ba01c..7f7f4da2a 100644
--- a/compiled/alipay/demo/pages/Popover/index.axml
+++ b/compiled/alipay/demo/pages/Popover/index.axml
@@ -1,6 +1,8 @@
 <container title="基础用法">
   <popover
-    content="prompt"
+    content="简单的tips"
+    placement="top-left"
+    showCloseIcon="{{true}}"
     style="display: inline-block"
   >
     <ant-button
@@ -13,28 +15,78 @@
 </container>
 <container title="基础用法-回调函数">
   <popover
-    content="prompt"
+    content="这里是一个提示文案很长的Tips，酌情使用文案。单一Tips最多可容纳2行文案这里是一个提示文案很长的Tips，酌情使用文案。单一Tips最多可容纳2行文案…"
     placement="top"
+    showCloseIcon="{{true}}"
     onVisibleChange="onVisibleChange"
   >
     <ant-button>点我</ant-button>
   </popover>
 </container>
-<container title="自定义颜色">
+<container title="基础用法-图片和行动点按钮">
+  <popover
+    content="这里是一个提示文案很长的Tips，酌情使用文案。单一Tips最多可容纳2行文案这里是一个提示文案很长的Tips，酌情使用文案。单一Tips最多可容纳2行文案…"
+    placement="top"
+    actionText="操作按钮"
+    onTapAction="onTapAction"
+    imageUrl="https://mdn.alipayobjects.com/huamei_mnxlps/afts/img/A*tLCBTqxataIAAAAAAAAAAAAADkqGAQ/original"
+    onVisibleChange="onVisibleChange"
+  >
+    <ant-button>点我</ant-button>
+  </popover>
+</container>
+<container title="自定义">
   <view class="custom">
     <popover
       content="红色"
       color="red"
     >
       <!--display: inline-->
-      <text>点我红色</text>
+      <ant-button
+        style="margin-right: 24rpx;"
+        inline
+        type="primary"
+      >自定义颜色</ant-button>
+    </popover>
+    <popover content="左侧插槽">
+      <!--display: inline-->
+      <ant-button
+        inline
+        style="margin-right: 24rpx;"
+      >左侧插槽</ant-button>
+      <icon
+        slot="leftContent"
+        style="font-size: 48rpx; margin-right: 24rpx;"
+        type="FaceRecognitionOutline"
+      ></icon>
+    </popover>
+    <popover content="右侧插槽">
+      <!--display: inline-->
+      <ant-button
+        inline
+        style="margin-right: 24rpx;"
+      >右侧插槽</ant-button>
+      <icon
+        slot="rightContent"
+        style="font-size: 48rpx; margin-left: 24rpx;"
+        type="FaceRecognitionOutline"
+      ></icon>
     </popover>
     <popover
-      content="蓝色"
-      color="blue"
+      className="ant-popover-white"
+      color="white"
+      content="白色背景"
     >
       <!--display: inline-->
-      <text>点我蓝色</text>
+      <ant-button
+        inline
+        style="margin-right: 24rpx;"
+      >白色背景</ant-button>
+      <icon
+        slot="rightContent"
+        style="font-size: 48rpx; margin-left: 24rpx;"
+        type="FaceRecognitionOutline"
+      ></icon>
     </popover>
   </view>
 </container>
diff --git a/compiled/alipay/demo/pages/Popover/index.js b/compiled/alipay/demo/pages/Popover/index.js
index a34a05209..c559a170f 100644
--- a/compiled/alipay/demo/pages/Popover/index.js
+++ b/compiled/alipay/demo/pages/Popover/index.js
@@ -24,4 +24,7 @@ Page({
             visible: !this.data.visible,
         });
     },
+    onTapAction() {
+        my.showToast({ content: '点击了行动点按钮' });
+    },
 });
diff --git a/compiled/alipay/demo/pages/Popover/index.less b/compiled/alipay/demo/pages/Popover/index.less
index fede1bbe7..5b17dd288 100644
--- a/compiled/alipay/demo/pages/Popover/index.less
+++ b/compiled/alipay/demo/pages/Popover/index.less
@@ -10,9 +10,14 @@
   align-items: center;
   justify-content: center;
   min-width: 30px;
-  min-height: 50px;
 }
 
 .custom-child{
   margin: 8px
+}
+
+.ant-popover-white {
+  .ant-popover-inner {
+    color: #000000;
+  }
 }
\ No newline at end of file
diff --git a/compiled/alipay/src/Popover/index.axml b/compiled/alipay/src/Popover/index.axml
index 0ecc41924..6959d51da 100644
--- a/compiled/alipay/src/Popover/index.axml
+++ b/compiled/alipay/src/Popover/index.axml
@@ -23,7 +23,45 @@
       class="ant-popover-inner {{contentClassName || ''}}"
       style="{{color ? 'background:' + color : ''}};{{contentStyle || ''}}"
     >
-      <slot name="content">{{content}}</slot>
+      <view
+        a:if="{{imageUrl}}"
+        class="ant-popover-image"
+      >
+        <image-icon
+          className="ant-popover-image-content"
+          image="{{imageUrl}}"
+        ></image-icon>
+      </view>
+      <slot
+        name="leftContent"
+        a:else
+      ></slot>
+      <slot name="content">
+        <view class="ant-popover-inner-text">
+          {{content}}
+        </view>
+      </slot>
+      <view
+        a:if="{{actionText}}"
+        onTap="onTapAction"
+        class="ant-popover-action"
+      >
+        {{actionText}}
+      </view>
+      <slot
+        name="rightContent"
+        a:else
+      ></slot>
+      <view
+        a:if="{{showCloseIcon}}"
+        onTap="onVisibleChange"
+        className="ant-popover-close"
+      >
+        <image-icon
+          className="ant-popover-close-icon"
+          image="CloseOutline"
+        ></image-icon>
+      </view>
     </view>
   </view>
 </view>
diff --git a/compiled/alipay/src/Popover/index.json b/compiled/alipay/src/Popover/index.json
index 0c9094440..b4875b164 100644
--- a/compiled/alipay/src/Popover/index.json
+++ b/compiled/alipay/src/Popover/index.json
@@ -1,6 +1,7 @@
 {
   "component": true,
   "usingComponents": {
+    "image-icon": "../ImageIcon/index",
     "mask": "../Mask/index"
   }
 }
diff --git a/compiled/alipay/src/Popover/index.less b/compiled/alipay/src/Popover/index.less
index b46b2c189..3b4b0c7eb 100644
--- a/compiled/alipay/src/Popover/index.less
+++ b/compiled/alipay/src/Popover/index.less
@@ -10,6 +10,33 @@
     z-index: 999;
   }
 
+  &-close {
+    margin-left: 24 * @rpx;
+    width: 38 * @rpx;
+    height: 38 * @rpx;
+    .ant-popover-close-icon {
+      position: absolute;
+      top: 20 * @rpx;
+      right: 20 * @rpx;
+      font-size: 36 * @rpx;
+    }
+  }
+
+  &-image {
+    padding-right: 24 * @rpx;
+    border-radius: 16 * @rpx;
+  }
+  &-action {
+    background: #ffffff;
+    font-weight: 400;
+    font-size: 24 * @rpx;
+    color: #000000;
+    padding: 10 * @rpx 20 * @rpx;
+    line-height: 33 * @rpx;
+    border-radius: 50vh;
+    margin-left: 24 * @rpx;
+  }
+
   &-mask {
     z-index: 998;
     background: none;
@@ -19,16 +46,35 @@
     min-width: 64 * @rpx;
     max-width: calc(100vw - 48 * @rpx);
     z-index: 999;
+
   }
   &-inner {
     position: relative;
     border-radius: 16 * @rpx;
     overflow: hidden;
-    font-size: 30 * @rpx;
+    font-size: 28 * @rpx;
     background-color: @COLOR_BACKGROUND_POPOVER;
     color: @COLOR_WHITE_DEFAULT;
-    padding: 16 * @rpx 24 * @rpx;
+    padding: 20 * @rpx;
     width: max-content;
+
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    &-text {
+      word-break: break-all;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2; /* 这里是超出几行省略 */
+      overflow: hidden;
+      max-width: 420 * @rpx;
+      line-height: 40 * @rpx;
+    }
+    .ant-popover-image-content-image {
+      width: 80 * @rpx;
+      height: 80 * @rpx;
+    }
   }
   &-arrow {
     position: absolute;
diff --git a/compiled/alipay/src/Popover/index.ts b/compiled/alipay/src/Popover/index.ts
index 668d55cfc..0e321b12f 100644
--- a/compiled/alipay/src/Popover/index.ts
+++ b/compiled/alipay/src/Popover/index.ts
@@ -71,6 +71,10 @@ Component(
       }
       triggerEvent(this, 'visibleChange', value, e);
     },
+    onTapAction() {
+      this.onVisibleChange();
+      this.props.onTapAction();
+    }
   },
   {
     adjustedPlacement: '',
diff --git a/compiled/alipay/src/Popover/props.ts b/compiled/alipay/src/Popover/props.ts
index cb7f342d6..4fc796827 100644
--- a/compiled/alipay/src/Popover/props.ts
+++ b/compiled/alipay/src/Popover/props.ts
@@ -47,6 +47,10 @@ export interface IPopoverProps extends IBaseProps {
    * @description visible 变更时回调
    */
   onVisibleChange?: (visible: boolean, e: Record<string, any>) => void;
+  /**
+   * @description 点击行动点
+   */
+  onTapAction?: () => void;
   /**
    * @description 气泡框位置
    */
@@ -74,13 +78,31 @@ export interface IPopoverProps extends IBaseProps {
    * @default true
    */
   autoAdjustOverflow: boolean;
+  /**
+   * @description 是否关闭的icon
+   * @default false
+   */
+  showCloseIcon: boolean;
+  /**
+   * @description 气泡左侧的图片链接
+   * @default ''
+   */
+  imageUrl: string;
+  /**
+   * @description 右侧操作按钮文案
+   * @default ''
+   */
+  actionText: string;
 }
 
 export const PopoverDefaultProps: Partial<IPopoverProps> = {
   visible: null,
+  imageUrl: '',
   defaultVisible: false,
   destroyOnClose: false,
+  showCloseIcon: false,
   contentClassName: '',
+  actionText: '',
   color: '',
   contentStyle: '',
   showMask: true,
@@ -90,4 +112,5 @@ export const PopoverDefaultProps: Partial<IPopoverProps> = {
   maskStyle: '',
   content: '',
   onVisibleChange() {},
+  onTapAction() {},
 };
diff --git a/compiled/wechat/demo/pages/Popover/index.js b/compiled/wechat/demo/pages/Popover/index.js
index a34a05209..c559a170f 100644
--- a/compiled/wechat/demo/pages/Popover/index.js
+++ b/compiled/wechat/demo/pages/Popover/index.js
@@ -24,4 +24,7 @@ Page({
             visible: !this.data.visible,
         });
     },
+    onTapAction() {
+        my.showToast({ content: '点击了行动点按钮' });
+    },
 });
diff --git a/compiled/wechat/demo/pages/Popover/index.wxml b/compiled/wechat/demo/pages/Popover/index.wxml
index a4e674023..a32a979ec 100644
--- a/compiled/wechat/demo/pages/Popover/index.wxml
+++ b/compiled/wechat/demo/pages/Popover/index.wxml
@@ -1,6 +1,8 @@
 <container title="基础用法">
   <popover
-    content="prompt"
+    content="简单的tips"
+    placement="top-left"
+    showCloseIcon="{{true}}"
     style="display: inline-block"
   >
     <ant-button
@@ -11,28 +13,78 @@
 </container>
 <container title="基础用法-回调函数">
   <popover
-    content="prompt"
+    content="这里是一个提示文案很长的Tips，酌情使用文案。单一Tips最多可容纳2行文案这里是一个提示文案很长的Tips，酌情使用文案。单一Tips最多可容纳2行文案…"
     placement="top"
+    showCloseIcon="{{true}}"
     bind:visiblechange="onVisibleChange"
   >
     <ant-button>点我</ant-button>
   </popover>
 </container>
-<container title="自定义颜色">
+<container title="基础用法-图片和行动点按钮">
+  <popover
+    content="这里是一个提示文案很长的Tips，酌情使用文案。单一Tips最多可容纳2行文案这里是一个提示文案很长的Tips，酌情使用文案。单一Tips最多可容纳2行文案…"
+    placement="top"
+    actionText="操作按钮"
+    onTapAction="onTapAction"
+    imageUrl="https://mdn.alipayobjects.com/huamei_mnxlps/afts/img/A*tLCBTqxataIAAAAAAAAAAAAADkqGAQ/original"
+    bind:visiblechange="onVisibleChange"
+  >
+    <ant-button>点我</ant-button>
+  </popover>
+</container>
+<container title="自定义">
   <view class="custom">
     <popover
       content="红色"
       color="red"
     >
       <!--display: inline-->
-      <text>点我红色</text>
+      <ant-button
+        style="margin-right: 24rpx;"
+        inline
+        type="primary"
+      >自定义颜色</ant-button>
+    </popover>
+    <popover content="左侧插槽">
+      <!--display: inline-->
+      <ant-button
+        inline
+        style="margin-right: 24rpx;"
+      >左侧插槽</ant-button>
+      <icon
+        slot="leftContent"
+        style="font-size: 48rpx; margin-right: 24rpx;"
+        type="FaceRecognitionOutline"
+      ></icon>
+    </popover>
+    <popover content="右侧插槽">
+      <!--display: inline-->
+      <ant-button
+        inline
+        style="margin-right: 24rpx;"
+      >右侧插槽</ant-button>
+      <icon
+        slot="rightContent"
+        style="font-size: 48rpx; margin-left: 24rpx;"
+        type="FaceRecognitionOutline"
+      ></icon>
     </popover>
     <popover
-      content="蓝色"
-      color="blue"
+      className="ant-popover-white"
+      color="white"
+      content="白色背景"
     >
       <!--display: inline-->
-      <text>点我蓝色</text>
+      <ant-button
+        inline
+        style="margin-right: 24rpx;"
+      >白色背景</ant-button>
+      <icon
+        slot="rightContent"
+        style="font-size: 48rpx; margin-left: 24rpx;"
+        type="FaceRecognitionOutline"
+      ></icon>
     </popover>
   </view>
 </container>
diff --git a/compiled/wechat/demo/pages/Popover/index.wxss b/compiled/wechat/demo/pages/Popover/index.wxss
index 00d0330a6..cda22129b 100644
--- a/compiled/wechat/demo/pages/Popover/index.wxss
+++ b/compiled/wechat/demo/pages/Popover/index.wxss
@@ -7,8 +7,10 @@
   align-items: center;
   justify-content: center;
   min-width: 30px;
-  min-height: 50px;
 }
 .custom-child {
   margin: 8px;
 }
+.ant-popover-white .ant-popover-inner {
+  color: #000000;
+}
diff --git a/compiled/wechat/src/Popover/index.js b/compiled/wechat/src/Popover/index.js
index 4e4fea6c9..2b4c7fca3 100644
--- a/compiled/wechat/src/Popover/index.js
+++ b/compiled/wechat/src/Popover/index.js
@@ -91,6 +91,10 @@ Component(PopoverDefaultProps, {
         }
         triggerEvent(this, 'visibleChange', value, e);
     },
+    onTapAction: function () {
+        this.onVisibleChange();
+        this.props.onTapAction();
+    }
 }, {
     adjustedPlacement: '',
     popoverContentStyle: '',
diff --git a/compiled/wechat/src/Popover/index.json b/compiled/wechat/src/Popover/index.json
index 0c9094440..b4875b164 100644
--- a/compiled/wechat/src/Popover/index.json
+++ b/compiled/wechat/src/Popover/index.json
@@ -1,6 +1,7 @@
 {
   "component": true,
   "usingComponents": {
+    "image-icon": "../ImageIcon/index",
     "mask": "../Mask/index"
   }
 }
diff --git a/compiled/wechat/src/Popover/index.wxml b/compiled/wechat/src/Popover/index.wxml
index e05071cd2..9bc83ef07 100644
--- a/compiled/wechat/src/Popover/index.wxml
+++ b/compiled/wechat/src/Popover/index.wxml
@@ -25,11 +25,43 @@
       class="ant-popover-inner {{contentClassName || ''}}"
       style="{{color ? 'background:' + color : ''}};{{contentStyle || ''}}"
     >
+      <view
+        wx:if="{{imageUrl}}"
+        class="ant-popover-image"
+      >
+        <image-icon
+          className="ant-popover-image-content"
+          image="{{imageUrl}}"
+        ></image-icon>
+      </view>
+      <slot
+        name="leftContent"
+        wx:else
+      ></slot>
       <slot
         name="content"
         wx:if="{{!content}}"
       ></slot>
       <block wx:else>{{content}}</block>
+      <view
+        wx:if="{{actionText}}"
+        bind:tap="onTapAction"
+        class="ant-popover-action"
+      >{{actionText}}</view>
+      <slot
+        name="rightContent"
+        wx:else
+      ></slot>
+      <view
+        wx:if="{{showCloseIcon}}"
+        bind:tap="onVisibleChange"
+        className="ant-popover-close"
+      >
+        <image-icon
+          className="ant-popover-close-icon"
+          image="CloseOutline"
+        ></image-icon>
+      </view>
     </view>
   </view>
 </view>
diff --git a/compiled/wechat/src/Popover/index.wxss b/compiled/wechat/src/Popover/index.wxss
index e6271eba4..36f5e1c86 100644
--- a/compiled/wechat/src/Popover/index.wxss
+++ b/compiled/wechat/src/Popover/index.wxss
@@ -4,6 +4,31 @@
 .ant-popover-children {
   z-index: 999;
 }
+.ant-popover-close {
+  margin-left: 12px;
+  width: 19px;
+  height: 19px;
+}
+.ant-popover-close .ant-popover-close-icon {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 18px;
+}
+.ant-popover-image {
+  padding-right: 12px;
+  border-radius: 8px;
+}
+.ant-popover-action {
+  background: #ffffff;
+  font-weight: 400;
+  font-size: 12px;
+  color: #000000;
+  padding: 5px 10px;
+  line-height: 16.5px;
+  border-radius: 50vh;
+  margin-left: 12px;
+}
 .ant-popover-mask {
   z-index: 998;
   background: none;
@@ -18,11 +43,29 @@
   position: relative;
   border-radius: 8px;
   overflow: hidden;
-  font-size: 15px;
+  font-size: 14px;
   background-color: #404040;
   color: #ffffff;
-  padding: 8px 12px;
+  padding: 10px;
   width: max-content;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.ant-popover-inner-text {
+  word-break: break-all;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  /* 这里是超出几行省略 */
+  overflow: hidden;
+  max-width: 210px;
+  line-height: 20px;
+}
+.ant-popover-inner .ant-popover-image-content-image {
+  width: 40px;
+  height: 40px;
 }
 .ant-popover-arrow {
   position: absolute;
diff --git a/compiled/wechat/src/Popover/props.js b/compiled/wechat/src/Popover/props.js
index 44b3adf68..051ac86bc 100644
--- a/compiled/wechat/src/Popover/props.js
+++ b/compiled/wechat/src/Popover/props.js
@@ -1,8 +1,11 @@
 export var PopoverDefaultProps = {
     visible: null,
+    imageUrl: '',
     defaultVisible: false,
     destroyOnClose: false,
+    showCloseIcon: false,
     contentClassName: '',
+    actionText: '',
     color: '',
     contentStyle: '',
     showMask: true,
@@ -12,4 +15,5 @@ export var PopoverDefaultProps = {
     maskStyle: '',
     content: '',
     onVisibleChange: function () { },
+    onTapAction: function () { },
 };
diff --git a/demo/pages/Popover/index.axml b/demo/pages/Popover/index.axml
index 0c9070cb9..c9946ec3a 100644
--- a/demo/pages/Popover/index.axml
+++ b/demo/pages/Popover/index.axml
@@ -1,6 +1,8 @@
 <container title="基础用法">
   <popover
-    content="prompt"
+    content="简单的tips"
+    placement="top-left"
+    showCloseIcon="{{ true }}"
     style="display: inline-block">
     <ant-button
       size="small"
@@ -12,27 +14,56 @@
 
 <container title="基础用法-回调函数">
   <popover
-    content="prompt"
+    content="这里是一个提示文案很长的Tips，酌情使用文案。单一Tips最多可容纳2行文案这里是一个提示文案很长的Tips，酌情使用文案。单一Tips最多可容纳2行文案…"
+    placement="top"
+    showCloseIcon="{{ true }}"
+    onVisibleChange="onVisibleChange">
+    <ant-button>点我</ant-button>
+  </popover>
+</container>
+
+<container title="基础用法-图片和行动点按钮">
+  <popover
+    content="这里是一个提示文案很长的Tips，酌情使用文案。单一Tips最多可容纳2行文案这里是一个提示文案很长的Tips，酌情使用文案。单一Tips最多可容纳2行文案…"
     placement="top"
+    actionText="操作按钮"
+    onTapAction="onTapAction"
+    imageUrl="https://mdn.alipayobjects.com/huamei_mnxlps/afts/img/A*tLCBTqxataIAAAAAAAAAAAAADkqGAQ/original"
     onVisibleChange="onVisibleChange">
     <ant-button>点我</ant-button>
   </popover>
 </container>
 
-<container title="自定义颜色">
+<container title="自定义">
   <view class="custom">
     <popover
       content="红色"
       color="red">
       <!-- display: inline -->
-      <text>点我红色</text>
+      <ant-button style="margin-right: 24rpx;" inline type="primary">自定义颜色</ant-button>
+    </popover>
+
+    <popover
+      content="左侧插槽">
+      <!-- display: inline -->
+      <ant-button inline style="margin-right: 24rpx;">左侧插槽</ant-button>
+      <icon slot="leftContent" style="font-size: 48rpx; margin-right: 24rpx;" type="FaceRecognitionOutline" />
+    </popover>
+
+    <popover
+      content="右侧插槽">
+      <!-- display: inline -->
+      <ant-button inline style="margin-right: 24rpx;">右侧插槽</ant-button>
+      <icon slot="rightContent" style="font-size: 48rpx; margin-left: 24rpx;" type="FaceRecognitionOutline" />
     </popover>
 
     <popover
-      content="蓝色"
-      color="blue">
+      className="ant-popover-white"
+      color="white"
+      content="白色背景">
       <!-- display: inline -->
-      <text>点我蓝色</text>
+      <ant-button inline style="margin-right: 24rpx;">白色背景</ant-button>
+      <icon slot="rightContent" style="font-size: 48rpx; margin-left: 24rpx;" type="FaceRecognitionOutline" />
     </popover>
   </view>
 </container>
diff --git a/demo/pages/Popover/index.less b/demo/pages/Popover/index.less
index fede1bbe7..5b17dd288 100644
--- a/demo/pages/Popover/index.less
+++ b/demo/pages/Popover/index.less
@@ -10,9 +10,14 @@
   align-items: center;
   justify-content: center;
   min-width: 30px;
-  min-height: 50px;
 }
 
 .custom-child{
   margin: 8px
+}
+
+.ant-popover-white {
+  .ant-popover-inner {
+    color: #000000;
+  }
 }
\ No newline at end of file
diff --git a/demo/pages/Popover/index.ts b/demo/pages/Popover/index.ts
index c5a16204e..1fa8e6a1d 100644
--- a/demo/pages/Popover/index.ts
+++ b/demo/pages/Popover/index.ts
@@ -24,4 +24,7 @@ Page({
       visible: !this.data.visible,
     });
   },
+  onTapAction() {
+    my.showToast({ content: '点击了行动点按钮' });
+  },
 });
diff --git a/src/Popover/index.axml b/src/Popover/index.axml
index 59b92f18c..b03f1d47e 100644
--- a/src/Popover/index.axml
+++ b/src/Popover/index.axml
@@ -25,8 +25,17 @@
     <view
       class="ant-popover-inner {{ contentClassName || '' }}"
       style="{{ color ? 'background:' + color : '' }};{{ contentStyle || '' }}">
+      <view a:if="{{ imageUrl }}" class="ant-popover-image">
+        <image-icon className="ant-popover-image-content" image="{{ imageUrl }}" />
+      </view>
+      <slot a:else name="leftContent">
+      </slot>
       <!-- #if ALIPAY -->
-      <slot name="content">{{ content }}</slot>
+      <slot name="content">
+        <view class="ant-popover-inner-text">
+          {{ content }}
+        </view>
+      </slot>
       <!-- #endif -->
       <!-- #if WECHAT -->
       <slot
@@ -34,6 +43,13 @@
         name="content" />
       <block wx:else>{{ content }}</block>
       <!-- #endif -->
+      <view a:if="{{ actionText }}" onTap="onTapAction" class="ant-popover-action">
+        {{ actionText }}
+      </view>
+      <slot a:else name="rightContent"/>
+      <view onTap="onVisibleChange" className="ant-popover-close" a:if="{{ showCloseIcon }}">
+        <image-icon className="ant-popover-close-icon" image="CloseOutline" />
+      </view>
     </view>
   </view>
 </view>
diff --git a/src/Popover/index.json b/src/Popover/index.json
index 0c9094440..b4875b164 100644
--- a/src/Popover/index.json
+++ b/src/Popover/index.json
@@ -1,6 +1,7 @@
 {
   "component": true,
   "usingComponents": {
+    "image-icon": "../ImageIcon/index",
     "mask": "../Mask/index"
   }
 }
diff --git a/src/Popover/index.less b/src/Popover/index.less
index b46b2c189..3b4b0c7eb 100644
--- a/src/Popover/index.less
+++ b/src/Popover/index.less
@@ -10,6 +10,33 @@
     z-index: 999;
   }
 
+  &-close {
+    margin-left: 24 * @rpx;
+    width: 38 * @rpx;
+    height: 38 * @rpx;
+    .ant-popover-close-icon {
+      position: absolute;
+      top: 20 * @rpx;
+      right: 20 * @rpx;
+      font-size: 36 * @rpx;
+    }
+  }
+
+  &-image {
+    padding-right: 24 * @rpx;
+    border-radius: 16 * @rpx;
+  }
+  &-action {
+    background: #ffffff;
+    font-weight: 400;
+    font-size: 24 * @rpx;
+    color: #000000;
+    padding: 10 * @rpx 20 * @rpx;
+    line-height: 33 * @rpx;
+    border-radius: 50vh;
+    margin-left: 24 * @rpx;
+  }
+
   &-mask {
     z-index: 998;
     background: none;
@@ -19,16 +46,35 @@
     min-width: 64 * @rpx;
     max-width: calc(100vw - 48 * @rpx);
     z-index: 999;
+
   }
   &-inner {
     position: relative;
     border-radius: 16 * @rpx;
     overflow: hidden;
-    font-size: 30 * @rpx;
+    font-size: 28 * @rpx;
     background-color: @COLOR_BACKGROUND_POPOVER;
     color: @COLOR_WHITE_DEFAULT;
-    padding: 16 * @rpx 24 * @rpx;
+    padding: 20 * @rpx;
     width: max-content;
+
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    &-text {
+      word-break: break-all;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2; /* 这里是超出几行省略 */
+      overflow: hidden;
+      max-width: 420 * @rpx;
+      line-height: 40 * @rpx;
+    }
+    .ant-popover-image-content-image {
+      width: 80 * @rpx;
+      height: 80 * @rpx;
+    }
   }
   &-arrow {
     position: absolute;
diff --git a/src/Popover/index.ts b/src/Popover/index.ts
index 7e4df4b86..ba338e8b6 100644
--- a/src/Popover/index.ts
+++ b/src/Popover/index.ts
@@ -73,6 +73,10 @@ Component(
       }
       triggerEvent(this, 'visibleChange', value, e);
     },
+    onTapAction() {
+      this.onVisibleChange();
+      this.props.onTapAction();
+    }
   },
   {
     adjustedPlacement: '',
diff --git a/src/Popover/props.ts b/src/Popover/props.ts
index cb7f342d6..4fc796827 100644
--- a/src/Popover/props.ts
+++ b/src/Popover/props.ts
@@ -47,6 +47,10 @@ export interface IPopoverProps extends IBaseProps {
    * @description visible 变更时回调
    */
   onVisibleChange?: (visible: boolean, e: Record<string, any>) => void;
+  /**
+   * @description 点击行动点
+   */
+  onTapAction?: () => void;
   /**
    * @description 气泡框位置
    */
@@ -74,13 +78,31 @@ export interface IPopoverProps extends IBaseProps {
    * @default true
    */
   autoAdjustOverflow: boolean;
+  /**
+   * @description 是否关闭的icon
+   * @default false
+   */
+  showCloseIcon: boolean;
+  /**
+   * @description 气泡左侧的图片链接
+   * @default ''
+   */
+  imageUrl: string;
+  /**
+   * @description 右侧操作按钮文案
+   * @default ''
+   */
+  actionText: string;
 }
 
 export const PopoverDefaultProps: Partial<IPopoverProps> = {
   visible: null,
+  imageUrl: '',
   defaultVisible: false,
   destroyOnClose: false,
+  showCloseIcon: false,
   contentClassName: '',
+  actionText: '',
   color: '',
   contentStyle: '',
   showMask: true,
@@ -90,4 +112,5 @@ export const PopoverDefaultProps: Partial<IPopoverProps> = {
   maskStyle: '',
   content: '',
   onVisibleChange() {},
+  onTapAction() {},
 };