nest.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <script setup lang="tsx">
  2. import { CommentOutlined, FireOutlined, HeartOutlined, ReadOutlined, RocketOutlined, SmileOutlined } from '@ant-design/icons-vue';
  3. import { App, Card, ConfigProvider, Space, theme } from 'ant-design-vue';
  4. import { Prompts, type PromptsProps } from 'ant-design-x-vue';
  5. import { type VNode } from 'vue';
  6. defineOptions({ name: 'AXPromptsNest' });
  7. const renderTitle = (icon: VNode, title: string) => (
  8. <Space align="start">
  9. {icon}
  10. <span>{title}</span>
  11. </Space>
  12. );
  13. const items: PromptsProps['items'] = [
  14. {
  15. key: '1',
  16. label: renderTitle(<FireOutlined style={{ color: '#FF4D4F' }} />, 'Hot Topics'),
  17. description: 'What are you interested in?',
  18. children: [
  19. {
  20. key: '1-1',
  21. description: `What's new in X?`,
  22. },
  23. {
  24. key: '1-2',
  25. description: `What's AGI?`,
  26. },
  27. {
  28. key: '1-3',
  29. description: `Where is the doc?`,
  30. },
  31. ],
  32. },
  33. {
  34. key: '2',
  35. label: renderTitle(<ReadOutlined style={{ color: '#1890FF' }} />, 'Design Guide'),
  36. description: 'How to design a good product?',
  37. children: [
  38. {
  39. key: '2-1',
  40. icon: <HeartOutlined />,
  41. description: `Know the well`,
  42. },
  43. {
  44. key: '2-2',
  45. icon: <SmileOutlined />,
  46. description: `Set the AI role`,
  47. },
  48. {
  49. key: '2-3',
  50. icon: <CommentOutlined />,
  51. description: `Express the feeling`,
  52. },
  53. ],
  54. },
  55. {
  56. key: '3',
  57. label: renderTitle(<RocketOutlined style={{ color: '#722ED1' }} />, 'Start Creating'),
  58. description: 'How to start a new project?',
  59. children: [
  60. {
  61. key: '3-1',
  62. label: 'Fast Start',
  63. description: `Install Ant Design X`,
  64. },
  65. {
  66. key: '3-2',
  67. label: 'Online Playground',
  68. description: `Play on the web without installing`,
  69. },
  70. ],
  71. },
  72. ];
  73. const Demo = () => {
  74. const { message } = App.useApp();
  75. return (
  76. <ConfigProvider
  77. theme={{
  78. algorithm: theme.defaultAlgorithm,
  79. }}
  80. >
  81. <Card style={{ borderRadius: 0, border: 0 }}>
  82. <Prompts
  83. title="Do you want?"
  84. items={items}
  85. wrap
  86. styles={{
  87. item: {
  88. flex: 'none',
  89. width: 'calc(30% - 6px)',
  90. backgroundImage: `linear-gradient(137deg, #e5f4ff 0%, #efe7ff 100%)`,
  91. border: 0,
  92. },
  93. subItem: {
  94. background: 'rgba(255,255,255,0.45)',
  95. border: '1px solid #FFF',
  96. },
  97. }}
  98. onItemClick={(info) => {
  99. message.success(`You clicked a prompt: ${info.data.key}`);
  100. }}
  101. />
  102. </Card>
  103. </ConfigProvider>
  104. );
  105. };
  106. defineRender(() => {
  107. return (
  108. <App>
  109. <Demo />
  110. </App>
  111. )
  112. });
  113. </script>