Feat Conversations (#1388)

* feat: init copilot conversations * feat: dev copilot conversations * feat: dev copilot conversations * feat: dev copilot conversations * feat: dev copilot conversations * feat: dev copilot conversations * feat: dev copilot conversations
ant-design · Jan 23, 2025 · ddaf664 · ddaf664
1 parent 3c21d95
commit ddaf664
Show file tree

Hide file tree

Showing 17 changed files with 592 additions and 12 deletions.
diff --git a/copilot-demo/pages/Conversations/index.axml b/copilot-demo/pages/Conversations/index.axml
@@ -0,0 +1,46 @@
+<view class="navigation-bar"/>
+
+<ant-container title="基础用法">
+  <ant-conversations
+    items="{{items}}"
+    menus="{{menus}}"
+    onItemTap="handleItemTap"
+    onMenuItemTap="handleMenuItemTap"
+  />
+</ant-container>
+
+<!-- #if ALIPAY -->
+<ant-container title="自定义插槽">
+  <ant-conversations
+    items="{{items.slice(2,5)}}"
+    menus="{{menus}}"
+    onItemTap="handleItemTap"
+    onMenuItemTap="handleMenuItemTap"
+  >
+    <view slot-scope="props">
+      <view style="color: #1677ff;">{{props.item.label}}</view>
+      <view style="color: #bbbbbb;">{{props.item.description}}</view>
+    </view>
+  </ant-conversations>
+</ant-container>
+<!-- #endif -->
+
+<ant-container title="抽屉中展示">
+  <ant-button onTap="handleOpenHistory" inline size="small">历史记录</ant-button>
+  <ant-popup
+    className="history-popup"
+    visible="{{ visible }}"
+    height="{{ 250 }}"
+    width="{{ 250 }}"
+    position="left"
+    animation
+    onClose="handlePopupClose"
+  >
+    <ant-conversations
+      items="{{items}}"
+      menus="{{menus}}"
+      onItemTap="handleItemTap"
+      onMenuItemTap="handleMenuItemTap"
+    />
+  </ant-popup>
+</ant-container>
diff --git a/copilot-demo/pages/Conversations/index.json5 b/copilot-demo/pages/Conversations/index.json5
@@ -0,0 +1,18 @@
+{
+  /// #if WECHAT
+  "navigationBarTitleText": "Conversations",
+  /// #endif
+
+  /// #if ALIPAY
+  "defaultTitle": "Conversations",
+  "transparentTitle": "auto",
+  "titlePenetrate": "YES",
+  /// #endif
+
+  "usingComponents": {
+    "ant-container": "../../../src/Container/index",
+    "ant-conversations": "../../../src/Conversations/index",
+    "ant-popup": "../../../src/Popup/index",
+    "ant-button": "../../../src/Button/index"
+  }
+}
diff --git a/copilot-demo/pages/Conversations/index.less b/copilot-demo/pages/Conversations/index.less
@@ -0,0 +1,7 @@
+.history-popup {
+  .ant-popup-transform-left {
+    /// #if ALIPAY
+    padding-top: 90px;
+    /// #endif
+  }
+}
diff --git a/copilot-demo/pages/Conversations/index.ts b/copilot-demo/pages/Conversations/index.ts
@@ -0,0 +1,100 @@
+Page({
+  data: {
+    visible: false,
+    items: [
+      {
+        key: '1',
+        label: '给我推荐一首歌',
+        description: '这是会话的部分富文本信息描述',
+        icon: 'https://randomuser.me/api/portraits/thumb/women/4.jpg',
+        timestamp: '10:23',
+        disabled: false,
+      },
+      {
+        key: '2',
+        label: '请根据图片里的提示，写一篇小学二年级的数学题目',
+        description:
+          '这首歌来自英国歌手艾德·希兰旋律轻快，歌曲写自上个世纪落日',
+        icon: '',
+        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: [
+      {
+        text: '编辑',
+        bgColor: '#FFA91B',
+        color: '#fff',
+        width: 160,
+      },
+      {
+        text: '删除',
+        bgColor: '#FF2B00',
+        color: '#fff',
+        width: 160,
+      },
+    ],
+  },
+  handleItemTap(i) {
+    let item = i;
+    /// #if ALIPAY
+    console.log(item);
+    my.showToast({ content: item.key });
+    /// #endif
+    /// #if WECHAT
+    item = i.detail[0];
+    console.log(item);
+    // @ts-ignore
+    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
+  },
+
+  handleOpenHistory() {
+    this.setData({
+      visible: true,
+    });
+  },
+  handlePopupClose() {
+    this.setData({
+      visible: false,
+    });
+  },
+});
diff --git a/copilot-demo/utils/constants.ts b/copilot-demo/utils/constants.ts
diff --git a/copilot/Conversations/index.axml b/copilot/Conversations/index.axml
@@ -0,0 +1,44 @@
+<view class="ant-copilot-conversations {{className}}" style="{{style}}">
+  <block
+    a:for="{{items}}"
+    a:for-index="index"
+    a:for-item="item"
+    a:key="key">
+    <view class="ant-copilot-conversations-swipe-item">
+      <ant-swipe-action
+        data-item="{{item}}"
+        data-index="{{index}}"
+        rightButtons="{{menus}}"
+        elasticity="{{true}}"
+        disabled="{{item.disabledMenu}}"
+        onButtonTap="onButtonTap"
+      >
+        <view
+          class="ant-copilot-conversations-swipe-item-view"
+          hover-start-time="{{20}}"
+          hover-stay-time="{{40}}"
+          hover-class="{{item.disabled ? '' : 'ant-copilot-conversations-hover'}}"
+          onTouchStart="{{item.disabled ? '' : 'onTouchStart'}}"
+          onTouchEnd="{{item.disabled ? '' : 'onItemTap'}}"
+          data-item="{{item}}"
+          data-index="{{index}}"
+        >
+          <!-- #if ALIPAY -->
+          <slot item="{{item}}" index="{{index}}">
+          <!-- #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>
+</view>
diff --git a/copilot/Conversations/index.en.md b/copilot/Conversations/index.en.md
diff --git a/copilot/Conversations/index.json b/copilot/Conversations/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "ant-swipe-action": "../../src/SwipeAction/index"
+  }
+}
diff --git a/copilot/Conversations/index.less b/copilot/Conversations/index.less
@@ -0,0 +1,61 @@
+@import (reference) './variable.less';
+
+@buttonPrefix: ant-copilot-conversations;
+
+.@{buttonPrefix} {
+  &-hover {
+    opacity: 0.6;
+  }
+  &-swipe-item {
+    height: @conversations-swipe-item-height;
+    &-view {
+      height: 100%;
+      width: @conversations-swipe-item-view-width;
+      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: @conversations-swipe-item-view-label-color;
+        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: @conversations-swipe-item-view-timestamp-color;
+      }
+      &-desc {
+        font-size: 24 * @rpx;
+        line-height: 48 * @rpx;
+        height: 48 * @rpx;
+        color: @conversations-swipe-item-view-desc-color;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}