group-sort.vue 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <script setup lang="tsx">
  2. import { CommentOutlined } from '@ant-design/icons-vue';
  3. import { Space, theme } from 'ant-design-vue';
  4. import { Conversations, type ConversationsProps } from 'ant-design-x-vue';
  5. import { computed } from 'vue';
  6. defineOptions({ name: 'AXConversationsGroupSort' });
  7. const items: ConversationsProps['items'] = Array.from({ length: 6 }).map((_, index) => {
  8. const timestamp = index <= 3 ? 1732204800000 : 1732204800000 - 60 * 60 * 24;
  9. return {
  10. key: `item${index + 1}`,
  11. label: `Conversation ${timestamp + index * 60 * 60}`,
  12. timestamp: timestamp + index * 60 * 60,
  13. group: index <= 3 ? 'Today' : 'Yesterday',
  14. };
  15. });
  16. const { token } = theme.useToken();
  17. // Customize the style of the container
  18. const style = computed(() => ({
  19. width: '272px',
  20. background: token.value.colorBgContainer,
  21. borderRadius: token.value.borderRadius,
  22. }));
  23. const groupable: ConversationsProps['groupable'] = {
  24. sort(a, b) {
  25. if (a === b) return 0;
  26. return a === 'Today' ? -1 : 1;
  27. },
  28. title: (group, { components: { GroupTitle } }) =>
  29. group ? (
  30. <GroupTitle>
  31. <Space>
  32. <CommentOutlined />
  33. <span>{group}</span>
  34. </Space>
  35. </GroupTitle>
  36. ) : (
  37. <GroupTitle />
  38. ),
  39. };
  40. defineRender(() => {
  41. return (
  42. <Conversations style={style.value} groupable={groupable} defaultActiveKey="demo1" items={items} />
  43. )
  44. });
  45. </script>