feat: 图文集增加操作按钮

src/views/accounts/Profile.jsx

@@ -56,35 +56,35 @@ function Profile() {
             <Descriptions.Item label='商业号身份'>
             <Space>
               <Select
-                defaultValue='jack'
+                defaultValue='GH 顾问'
                 style={{
                   width: 200,
                 }}
                 options={[
                   {
-                    value: 'GH 顾问',
+                    value: '18741256987',
                     label: 'GH 顾问(18741256987)',
                   },
                   {
-                    value: 'GH 客服',
+                    value: '13845214785',
                     label: 'GH 客服(13845214785)',
                   },
                   {
-                    value: 'GH 客运',
+                    value: '191477856351',
                     label: 'GH 客运(191477856351)',
                   },
                   {
-                    value: '国际事业部',
+                    value: '0',
                     label: '国际事业部(无)',
                     disabled: true,
                   },
                   {
-                    value: 'CT 事业部',
+                    value: '0',
                     label: 'CT 事业部(无)',
                     disabled: true,
                   },
                   {
-                    value: '花梨鹰事业部',
+                    value: '0',
                     label: '花梨鹰事业部(无)',
                     disabled: true,
                   },

src/views/accounts/SnippetList.jsx

@@ -1,6 +1,17 @@
-import { Row, Col, Tag, List, Form, Input, Button, Space, Modal } from 'antd'
+import {
+  Flex,
+  Row,
+  Col,
+  Tag,
+  List,
+  Form,
+  Input,
+  Button,
+  Space,
+  Modal,
+  Select
+} from 'antd'
 import { useState, useRef } from 'react'
-import LexicalEditor from '@/components/LexicalEditor'
 import LexicalEditorInput from './LexicalEditorInput'
 
 function SnippetList() {
@@ -9,9 +20,9 @@ function SnippetList() {
   const editorRef = useRef(null)
 
   const [isSnippetModalOpen, setSnippetModalOpen] = useState(false)
-  const [editorContent, setEditorContent] = useState("<p>Discover the best of the world with one of the <strong>best-rated tour companies for personalized travel</strong>. With over <strong>10,000+ reviews and a 98.8% 5-star rating</strong>, we focus on streamlining your planning and ensuring joyful travels. Whether it's a milestone celebration or a relaxing getaway, let us help create your beautiful journey.</p>")
+  const [editorContent, setEditorContent] = useState(
-
+    "<p>Discover the best of the world with one of the <strong>best-rated tour companies for personalized travel</strong>. With over <strong>10,000+ reviews and a 98.8% 5-star rating</strong>, we focus on streamlining your planning and ensuring joyful travels. Whether it's a milestone celebration or a relaxing getaway, let us help create your beautiful journey.</p>",
-
+  )
 
   const onSnippetFinish = (values) => {
     console.log('onSnippetFinish:', values)
@@ -33,9 +44,9 @@ function SnippetList() {
           htmlType: 'submit',
         }}
         width={800}
-        zIndex={996}
         title={'图文'}
-        open={isSnippetModalOpen} onCancel={() => setSnippetModalOpen(false)}
+        open={isSnippetModalOpen}
+        onCancel={() => setSnippetModalOpen(false)}
         destroyOnClose
         forceRender
         modalRender={(dom) => (
@@ -46,13 +57,13 @@ function SnippetList() {
             className='max-w-4xl'
             onFinish={onSnippetFinish}
             onFinishFailed={onSnippetFailed}
-            autoComplete='off'
+            autoComplete='off'>
-          >
             {dom}
           </Form>
-        )}
+        )}>
-      >
+        <Form.Item name='snippetId' className='hidden'>
-        <Form.Item name='snippetId' className='hidden' ><Input /></Form.Item>
+          <Input />
+        </Form.Item>
         <Form.Item
           label='标题'
           name='title'
@@ -61,10 +72,25 @@ function SnippetList() {
               required: true,
               message: 'title required',
             },
-          ]}
+          ]}>
-        >
           <Input />
         </Form.Item>
+        <Form.Item
+          label='类型'
+          name='category'
+          rules={[
+            {
+              required: true,
+              message: 'title required',
+            },
+          ]}>
+          <Select>
+            <Select.Option value="收款">收款</Select.Option>
+            <Select.Option value="西藏">西藏</Select.Option>
+            <Select.Option value="催信">催信</Select.Option>
+            <Select.Option value="提醒">提醒</Select.Option>
+          </Select>
+        </Form.Item>
         <Form.Item
           label='内容'
           name='content'
@@ -73,15 +99,7 @@ function SnippetList() {
               required: true,
               message: 'content required',
             },
-          ]}
+          ]}>
-        >
-          {/* <LexicalEditor
-              {...{ isRichText: true, editorRef }}
-              onChange={() => {
-                console.info('onChange')
-              }}
-              initialValue={editorContent}
-            /> */}
           <LexicalEditorInput />
         </Form.Item>
       </Modal>
@@ -165,24 +183,52 @@ function SnippetList() {
               )}
             />
           </Col>
-          <Col
+          <Col span={16}>
-            span={16}>
+            <div className='border-solid border rounded border-gray-300'>
               <Space
-    direction="vertical"
+                direction='vertical'
-    size="middle"
+                size='middle'
                 style={{
                   display: 'flex',
-    }}
+                }}>
-  >
+                <pre className='whitespace-pre-wrap break-words ps-6 pe-6'>
-              <div
+                  <p>
-            className='border-solid border rounded border-gray-300'>
+                    Discover China with the <strong>award-winning</strong> and{' '}
-            <pre className='whitespace-pre-wrap break-words'>
+                    <strong>best-rated</strong> tour company for{' '}
-          <p>Discover China with the <strong>award-winning</strong> and <strong>best-rated</strong> tour company for <strong>personalized travel in China</strong>. Honored as <strong>China's Leading Tour Operator</strong> by the <strong>World Travel Awards</strong>, we boast <strong>10,000+ reviews</strong> and a remarkable <strong>98.8% 5-star rating</strong>. Our expertise in customizing personalized China explorations is backed by our company-managed local services across China. Explore and kickstart your personalized travel experience with just a click!</p>
+                    <strong>personalized travel in China</strong>. Honored as{' '}
+                    <strong>China is Leading Tour Operator</strong> by the{' '}
+                    <strong>World Travel Awards</strong>, we boast{' '}
+                    <strong>10,000+ reviews</strong> and a remarkable{' '}
+                    <strong>98.8% 5-star rating</strong>. Our expertise in
+                    customizing personalized China explorations is backed by our
+                    company-managed local services across China. Explore and
+                    kickstart your personalized travel experience with just a
+                    click!
+                  </p>
                 </pre>
-            </div>
+                <Flex gap='middle' justify='flex-end' wrap className='p-6'>
-
+                  <Button
-
+                    onClick={() => {
+                      setSnippetModalOpen(true)
+                    }}>
+                    编辑
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      //
+                    }}>
+                    复制
+                  </Button>
+                  <Button
+                    danger
+                    onClick={() => {
+                      //
+                    }}>
+                    删除
+                  </Button>
+                </Flex>
               </Space>
+            </div>
           </Col>
         </Row>
       </Space>