status.vue 2.6 KB

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