@ -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' > < Input / > < / Form.Item >
) } >
< Form.Item name = 'snippetId' className = 'hidden' >
< 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' ,
} ,
] }
>
{ / * < L e x i c a l E d i t o r
{ ... { isRichText : true , editorRef } }
onChange = { ( ) => {
console . info ( 'onChange' )
} }
initialValue = { editorContent }
/> */ }
] } >
< LexicalEditorInput / >
< / Form.Item >
< / Modal >
@ -165,24 +183,52 @@ function SnippetList() {
) }
/ >
< / Col >
< Col
span = { 16 }
< Col span = { 16 } >
< div className = 'border-solid border rounded border-gray-300'
< Space
direction = "vertical"
size = "middle"
direction = 'vertical'
size = 'middle'
style = { {
display : 'flex' ,
} }
>
< div
className = 'border-solid border rounded border-gray-300' >
< pre className = 'whitespace-pre-wrap break-words' >
< 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 >
} } >
< pre className = 'whitespace-pre-wrap break-words ps-6 pe-6' >
< 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 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 >
Jimmy Liow
11 months ago