feat: dev copilot conversations

ant-design · Jan 22, 2025 · bbbe7a8 · bbbe7a8
1 parent 12d94f9
commit bbbe7a8
Show file tree

Hide file tree

Showing 7 changed files with 165 additions and 39 deletions.
diff --git a/copilot-demo/pages/Conversations/index.axml b/copilot-demo/pages/Conversations/index.axml
@@ -4,5 +4,7 @@
   <ant-conversations
     items="{{items}}"
     menus="{{menus}}"
+    onItemTap="handleItemTap"
+    onMenuItemTap="handleMenuItemTap"
   />
 </ant-container>
diff --git a/copilot-demo/pages/Conversations/index.ts b/copilot-demo/pages/Conversations/index.ts
@@ -5,7 +5,7 @@ Page({
         key: '1',
         label: '给我推荐一首歌',
         description: '这是会话的部分富文本信息描述',
-        icon: '',
+        icon: 'https://randomuser.me/api/portraits/thumb/women/4.jpg',
         timestamp: '10:23',
         disabled: false,
       },
@@ -15,9 +15,34 @@ Page({
         description:
           '这首歌来自英国歌手艾德·希兰旋律轻快，歌曲写自上个世纪落日',
         icon: '',
-        timestamp: '10:23',
+        timestamp: '10:22',
+        disabled: false,
+      },
+      {
+        key: '3',
+        label: '禁用无法点击此条',
+        description: '这是会话的部分富文本信息描述',
+        icon: '',
+        timestamp: '10:21',
         disabled: true,
       },
+      {
+        key: '4',
+        label: '菜单禁用无法滑动',
+        description: '这是会话的部分富文本信息描述',
+        icon: '',
+        timestamp: '10:18',
+        disabled: false,
+        disabledMenu: true,
+      },
+      {
+        key: '5',
+        label: '给我推荐一首歌',
+        description: '这是会话的部分富文本信息描述',
+        icon: '',
+        timestamp: '09:11',
+        disabled: false,
+      },
     ],
     menus: [
       {
@@ -34,7 +59,7 @@ Page({
       },
     ],
   },
-  onItemTap(i) {
+  handleItemTap(i) {
     let item = i;
     /// #if ALIPAY
     console.log(item);
@@ -47,4 +72,17 @@ Page({
     wx.showToast({ title: item.key });
     /// #endif
   },
+  handleMenuItemTap(menuItem, item) {
+    /// #if ALIPAY
+    console.log(menuItem, item);
+    my.showToast({ content: `菜单${menuItem.index}_列表项${item.key}` });
+    /// #endif
+    /// #if WECHAT
+    console.log(menuItem.detail[0], menuItem.detail[1]);
+    // @ts-ignore
+    wx.showToast({
+      title: `菜单${menuItem.detail[0].index}_列表项${menuItem.detail[1].key}`,
+    });
+    /// #endif
+  },
 });
diff --git a/copilot/Conversations/index.axml b/copilot/Conversations/index.axml
@@ -1,19 +1,42 @@
-<view class="ant-copilot-conversations {{ className }}" style="{{ style }}">
+<view class="ant-copilot-conversations {{className}}" style="{{style}}">
     <block
-      a:for="{{ items }}"
+      a:for="{{items}}"
       a:for-index="index"
       a:for-item="item"
       a:key="key">
-      <view class="t-swipe-item-con">
+      <view class="ant-copilot-conversations-swipe-item">
         <ant-swipe-action
-          data-item="{{ item }}"
-          rightButtons="{{ menus }}"
-          elasticity="{{ true }}"
+          data-item="{{item}}"
+          data-index="{{index}}"
+          rightButtons="{{menus}}"
+          elasticity="{{true}}"
+          disabled="{{item.disabledMenu}}"
           onButtonTap="onButtonTap"
         >
-          <slot>
-            <view class="t-swipe-item-con-view">{{item.label}}</view>
-          </slot>
+          <view
+            class="ant-copilot-conversations-swipe-item-view"
+            hover-start-time="{{20}}"
+            hover-stay-time="{{40}}"
+            hover-class="{{item.disabled ? '' : 'ant-copilot-conversations-hover'}}"
+            onTouchEnd="{{item.disabled ? '' : 'onItemTap'}}"
+            data-item="{{item}}"
+            data-index="{{index}}"
+          >
+            <!-- #if ALIPAY -->
+            <slot>
+            <!-- #endif -->
+              <image a:if="{{item.icon}}" class="ant-copilot-conversations-swipe-item-view-icon" src="{{item.icon}}" />
+              <view class="ant-copilot-conversations-swipe-item-view-main">
+                <view class="ant-copilot-conversations-swipe-item-view-main-top">
+                  <view a:if="{{item.label}}" class="ant-copilot-conversations-swipe-item-view-label">{{item.label}}</view>
+                  <view a:if="{{item.timestamp}}" class="ant-copilot-conversations-swipe-item-view-timestamp">{{item.timestamp}}</view>
+                </view>
+                <view a:if="{{item.description}}" class="ant-copilot-conversations-swipe-item-view-desc">{{item.description}}</view>
+              </view>
+            <!-- #if ALIPAY -->
+            </slot>
+            <!-- #endif -->
+          </view>
         </ant-swipe-action>
       </view>
     </block>

diff --git a/copilot/Conversations/index.less b/copilot/Conversations/index.less
@@ -3,33 +3,68 @@
 @buttonPrefix: ant-copilot-conversations;
 
 .@{buttonPrefix} {
-}
-
-.t-swipe {
-  &-item {
-    &-con {
-      height: 130 * @rpx;
-      line-height: 130 * @rpx;
-      width: 100%;
-      &-view {
-        background-color: var(--color-card);
-        text-indent: 1em;
-        position: relative;
-        height: 100%;
-        color: var(--color-text-primary);
-        &::after {
-          content: '';
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          width: 100%;
-          height: 1px;
-          max-height: 1px;
-          min-height: 1px;
-          transform: scaleY(0.5);
-          background-color: var(--color-border);
+  &-hover {
+    opacity: 0.6;
+  }
+  &-swipe-item {
+    height: 130 * @rpx;
+    line-height: 130 * @rpx;
+    /// #if WECHAT
+    .ant-swipe-action-movable {
+      // pointer-events: none;
+      &-content {
+        pointer-events: auto;
+      }
+    }
+    /// #endif
+    &-view {
+      height: 100%;
+      width: calc(100% - 300rpx);
+      padding: 24 * @rpx 32 * @rpx;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      &-main {
+        flex-grow: 1;
+        overflow: hidden;
+        &-top {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
         }
       }
+      &-icon {
+        flex-shrink: 0;
+        width: 72 * @rpx;
+        height: 72 * @rpx;
+        border-radius: 50%;
+        margin-right: 24 * @rpx;
+      }
+      &-label {
+        font-size: 28 * @rpx;
+        line-height: 40 * @rpx;
+        height: 40 * @rpx;
+        color: rgba(0, 0, 0, 0.88);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      &-timestamp {
+        flex-shrink: 0;
+        margin-left: 28 * @rpx;
+        font-size: 28 * @rpx;
+        line-height: 44 * @rpx;
+        color: #848484;
+      }
+      &-desc {
+        font-size: 24 * @rpx;
+        line-height: 48 * @rpx;
+        height: 48 * @rpx;
+        color: rgba(0, 0, 0, 0.45);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
   }
 }
diff --git a/copilot/Conversations/index.ts b/copilot/Conversations/index.ts
@@ -1,9 +1,28 @@
-import { Component, triggerEventValues } from '../../src/_util/simply';
+import {
+  Component,
+  getValueFromProps,
+  triggerEventValues,
+} from '../../src/_util/simply';
 import { ConversationsProps } from './props';
 
 Component(ConversationsProps, {
   onItemTap(e) {
     const { item, index } = e.currentTarget.dataset;
     triggerEventValues(this, 'itemTap', [item, index], e);
   },
+  onButtonTap(menu, e) {
+    const menus = getValueFromProps(this, 'menus');
+    let menuInfo, itemInfo;
+    /// #if ALIPAY
+    const { item, index } = e.currentTarget.dataset;
+    menuInfo = { ...menus[menu.btnIdx], index: menu.btnIdx };
+    itemInfo = { ...item, index };
+    /// #endif
+    /// #if WECHAT
+    const { item: itemW, index: indexW } = menu.currentTarget.dataset;
+    menuInfo = { ...menus[menu.detail.btnIdx], index: menu.detail.btnIdx };
+    itemInfo = { ...itemW, index: indexW };
+    /// #endif
+    triggerEventValues(this, 'menuItemTap', [menuInfo, itemInfo], e);
+  },
 });
diff --git a/copilot/Conversations/props.ts b/copilot/Conversations/props.ts
@@ -23,9 +23,13 @@ interface Conversation {
    */
   timestamp?: string;
   /**
-   * @description 是否禁用
+   * @description 是否禁用点击
    */
   disabled?: boolean;
+  /**
+   * @description 是否菜单禁用滑动
+   */
+  disabledMenu?: boolean;
 }
 
 interface MenuItem {
@@ -74,4 +78,5 @@ export const ConversationsProps: Partial<IPromptsProps> = {
   items: [],
   menus: [],
   onItemTap() {},
+  onMenuItemTap() {},
 };
diff --git a/scripts/axml/mapping.ts b/scripts/axml/mapping.ts
@@ -198,4 +198,8 @@ export const wechatCustomMapping = {
   'ant-prompts': {
     onItemTap: 'binditemtap',
   },
+  'ant-conversations': {
+    onItemTap: 'binditemtap',
+    onMenuItemTap: 'bindmenuitemtap',
+  },
 };