status.vue 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <script setup lang="tsx">
  2. import { CheckCircleOutlined, InfoCircleOutlined, LoadingOutlined } from '@ant-design/icons-vue';
  3. import { Button, Card } from 'ant-design-vue';
  4. import { ThoughtChain, type ThoughtChainItem } from 'ant-design-x-vue';
  5. import { ref } from 'vue';
  6. defineOptions({ name: 'AXThoughtChainStatus' });
  7. function getStatusIcon(status: ThoughtChainItem['status']) {
  8. switch (status) {
  9. case 'success':
  10. return <CheckCircleOutlined />;
  11. case 'error':
  12. return <InfoCircleOutlined />;
  13. case 'pending':
  14. return <LoadingOutlined />;
  15. default:
  16. return undefined;
  17. }
  18. }
  19. const mockServerResponseData: ThoughtChainItem[] = [
  20. {
  21. title: 'Thought Chain Item - 1',
  22. status: 'success',
  23. description: 'status: success',
  24. icon: getStatusIcon('success'),
  25. },
  26. {
  27. title: 'Thought Chain Item - 2',
  28. status: 'error',
  29. description: 'status: error',
  30. icon: getStatusIcon('error'),
  31. },
  32. ];
  33. const delay = (ms: number) => {
  34. return new Promise<void>((resolve) => {
  35. const timer: NodeJS.Timeout = setTimeout(() => {
  36. clearTimeout(timer);
  37. resolve();
  38. }, ms);
  39. });
  40. };
  41. function addChainItem() {
  42. mockServerResponseData.push({
  43. title: `Thought Chain Item - ${mockServerResponseData.length + 1}`,
  44. status: 'pending',
  45. icon: getStatusIcon('pending'),
  46. description: 'status: pending',
  47. });
  48. }
  49. async function updateChainItem(status: ThoughtChainItem['status']) {
  50. await delay(800);
  51. mockServerResponseData[mockServerResponseData.length - 1].status = status;
  52. mockServerResponseData[mockServerResponseData.length - 1].icon = getStatusIcon(status);
  53. mockServerResponseData[mockServerResponseData.length - 1].description = `status: ${status}`;
  54. }
  55. const items = ref<ThoughtChainItem[]>(mockServerResponseData);
  56. const loading = ref(false);
  57. const mockStatusChange = async () => {
  58. await updateChainItem('error');
  59. items.value = [...mockServerResponseData];
  60. await updateChainItem('pending');
  61. items.value = [...mockServerResponseData];
  62. await updateChainItem('success');
  63. items.value = [...mockServerResponseData];
  64. };
  65. const onClick = async () => {
  66. loading.value = true;
  67. addChainItem();
  68. items.value = [...mockServerResponseData];
  69. await mockStatusChange();
  70. loading.value = false;
  71. };
  72. defineRender(() => {
  73. return (
  74. <Card style={{ width: '500px' }}>
  75. <Button onClick={onClick} style={{ marginBottom: '16px' }} loading={loading.value}>
  76. {loading.value ? 'Running' : 'Run Next'}
  77. </Button>
  78. <ThoughtChain items={items.value} />
  79. </Card>
  80. )
  81. });
  82. </script>