prompts.vue 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <script setup lang="tsx">
  2. import SemanticPreview from '../.vitepress/vitepress/components/semantic/preview.vue'
  3. import { Prompts, type PromptsProps } from 'ant-design-x-vue'
  4. import { Flex } from 'ant-design-vue';
  5. import { BulbOutlined, InfoCircleOutlined, RocketOutlined } from '@ant-design/icons-vue'
  6. const items: PromptsProps['items'] = [
  7. {
  8. key: '1',
  9. icon: <BulbOutlined style={{ color: '#FFD700' }} />,
  10. label: 'Ignite Your Creativity',
  11. description: 'Got any sparks for a new project?',
  12. disabled: false,
  13. },
  14. {
  15. key: '2',
  16. icon: <InfoCircleOutlined style={{ color: '#1890FF' }} />,
  17. label: 'Uncover Background Info',
  18. description: 'Help me understand the background of this topic.',
  19. disabled: false,
  20. },
  21. {
  22. key: '3',
  23. icon: <RocketOutlined style={{ color: '#722ED1' }} />,
  24. label: 'Efficiency Boost Battle',
  25. description: 'How can I work faster and better?',
  26. disabled: false,
  27. },
  28. ];
  29. const nestItems: PromptsProps['items'] = [
  30. {
  31. key: '1',
  32. label: '🔥 Ignite Your Creativity',
  33. children: [
  34. {
  35. key: '1-1',
  36. description: 'What sparks your creativity?',
  37. },
  38. {
  39. key: '1-2',
  40. description: 'How do you get inspired?',
  41. },
  42. ],
  43. },
  44. {
  45. key: '2',
  46. label: '🎨 Uncover Background Info',
  47. children: [
  48. {
  49. key: '2-1',
  50. description: 'What is the background of this topic?',
  51. },
  52. {
  53. key: '2-2',
  54. description: 'Why is this important?',
  55. },
  56. ],
  57. },
  58. ];
  59. defineRender(() => {
  60. return (
  61. <Flex vertical>
  62. <SemanticPreview semantics={[
  63. { name: 'title', desc: '标题容器' },
  64. { name: 'list', desc: '列表容器' },
  65. { name: 'item', desc: '列表项' },
  66. { name: 'itemContent', desc: '标题项内容' },
  67. ]}
  68. >
  69. {({ classNames }) => {
  70. return (
  71. <Prompts classNames={classNames} title="✨ Inspirational Sparks and Marvelous Tips" items={items} />
  72. )
  73. }
  74. }
  75. </SemanticPreview>
  76. <SemanticPreview semantics={[
  77. { name: 'subList', desc: '子列表容器' },
  78. { name: 'subItem', desc: '子列表项' },
  79. ]}
  80. >
  81. {({ classNames }) => {
  82. return (
  83. <Prompts classNames={classNames} title="✨ Nested Prompts" items={nestItems} />
  84. )
  85. }
  86. }
  87. </SemanticPreview>
  88. </Flex>
  89. )
  90. })
  91. </script>