customization.vue 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <script setup lang="tsx">
  2. import { CheckCircleOutlined, MoreOutlined } from '@ant-design/icons-vue';
  3. import { Button, Card, Typography } from 'ant-design-vue';
  4. import { ThoughtChain, type ThoughtChainItem, type ThoughtChainProps } from 'ant-design-x-vue';
  5. import { cloneVNode, isVNode } from 'vue';
  6. defineOptions({ name: 'AXThoughtChainCustomization' });
  7. const { Paragraph, Text } = Typography;
  8. const customizationProps: ThoughtChainItem = {
  9. title: 'Thought Chain Item Title',
  10. description: 'description',
  11. icon: <CheckCircleOutlined />,
  12. extra: <Button type="text" icon={<MoreOutlined />} />,
  13. footer: <Button block>Thought Chain Item Footer</Button>,
  14. content: (
  15. <Typography>
  16. <Paragraph>
  17. In the process of internal desktop applications development, many different design specs and
  18. implementations would be involved, which might cause designers and developers difficulties
  19. and duplication and reduce the efficiency of development.
  20. </Paragraph>
  21. <Paragraph>
  22. After massive project practice and summaries, Ant Design, a design language for background
  23. applications, is refined by Ant UED Team, which aims to{' '}
  24. <Text strong>
  25. uniform the user interface specs for internal background projects, lower the unnecessary
  26. cost of design differences and implementation and liberate the resources of design and
  27. front-end development
  28. </Text>
  29. </Paragraph>
  30. </Typography>
  31. ),
  32. };
  33. const cloneCustomizationProps = (op: ThoughtChainItem) => {
  34. return Object.fromEntries(Object.entries(op).map(([k, v]) => {
  35. return [k, isVNode(v) ? cloneVNode(v): v];
  36. }));
  37. }
  38. const items: ThoughtChainProps['items'] = [
  39. {
  40. ...cloneCustomizationProps(customizationProps),
  41. status: 'success',
  42. },
  43. {
  44. ...cloneCustomizationProps(customizationProps),
  45. status: 'error',
  46. },
  47. {
  48. ...cloneCustomizationProps(customizationProps),
  49. status: 'pending',
  50. },
  51. ];
  52. defineRender(() => {
  53. return (
  54. <Card style={{ width: '500px' }}>
  55. <ThoughtChain items={items} />
  56. </Card>
  57. )
  58. })
  59. </script>