@ -1,4 +1,4 @@
import { Box , Button , Flex , useColorMode , useColorModeValue , useDisclosure , useRadioGroup , useToast , chakra , Input , HStack , IconButton , Heading , Divider } from '@chakra-ui/react' ;
import { Box , Button , Flex , useColorMode , useColorModeValue , useDisclosure , useRadioGroup , useToast , chakra , Input , HStack , IconButton , Heading , Divider , AlertDialog , AlertDialogOverlay , AlertDialogContent , AlertDialogHeader , AlertDialogBody , AlertDialogFooter , Text } from '@chakra-ui/react' ;
import React , { useEffect , useState } from 'react' ;
import { MarkdownEditor } from 'components/markdown-editor/editor' ;
import PageContainer from 'layouts/page-container' ;
@ -16,13 +16,14 @@ import RadioCard from 'components/radio-card';
import { useViewportScroll } from 'framer-motion' ;
import Card from 'components/card' ;
import { Tag } from 'src/types/tag' ;
import { ReserveUrls } from 'src/data/reserve-urls' ;
function PostEditPage() {
const router = useRouter ( )
const { id } = router . query
const [ editMode , setEditMode ] = useState ( EditMode . Edit )
const [ tag , setTag ] : [ Tag , any ] = useState ( {
const [ tag , setTag ] : [ Tag , any ] = useState ( {
md : ` 标签介绍, 支持markdown ` ,
title : ''
} )
@ -88,22 +89,22 @@ function PostEditPage() {
< Heading size = "xs" >
Title
< / Heading >
< Input value = { tag . title } onChange = { ( e ) = > { tag . title = e . target . value ; onChange ( ) } } mt = "4" variant = "flushed" size = "sm" placeholder = "Tag title..." focusBorderColor = "teal.400" / >
< Input value = { tag . title } onChange = { ( e ) = > { tag . title = e . target . value ; onChange ( ) } } mt = "4" variant = "flushed" size = "sm" placeholder = "Tag title..." focusBorderColor = "teal.400" / >
< Heading size = "xs" mt = "8" >
Name
< / Heading >
< Input value = { tag . name } onChange = { ( e ) = > { tag . name = e . target . value ; onChange ( ) } } mt = "4" variant = "flushed" size = "sm" placeholder = "Tag name..." focusBorderColor = "teal.400" / >
< Input value = { tag . name } onChange = { ( e ) = > { tag . name = e . target . value ; onChange ( ) } } mt = "4" variant = "flushed" size = "sm" placeholder = "Tag name..." focusBorderColor = "teal.400" / >
< Heading size = "xs" mt = "8" >
封 面
< / Heading >
< Input value = { tag . cover } onChange = { ( e ) = > { tag . cover = e . target . value ; onChange ( ) } } mt = "4" variant = "flushed" size = "sm" placeholder = "图片链接, 你可以用github当图片存储服务" focusBorderColor = "teal.400" / >
< Input value = { tag . cover } onChange = { ( e ) = > { tag . cover = e . target . value ; onChange ( ) } } mt = "4" variant = "flushed" size = "sm" placeholder = "图片链接, 你可以用github当图片存储服务" focusBorderColor = "teal.400" / >
< Heading size = "xs" mt = "8" >
图 标
< / Heading >
< Input value = { tag . icon } onChange = { ( e ) = > { tag . icon = e . target . value ; onChange ( ) } } mt = "4" variant = "flushed" size = "sm" placeholder = "图片链接" focusBorderColor = "teal.400" / >
< Input value = { tag . icon } onChange = { ( e ) = > { tag . icon = e . target . value ; onChange ( ) } } mt = "4" variant = "flushed" size = "sm" placeholder = "图片链接" focusBorderColor = "teal.400" / >
< / Card >
< / HStack >
< / PageContainer >
@ -113,10 +114,12 @@ function PostEditPage() {
export default PostEditPage
function HeaderContent ( props : any ) {
const [ delOpen , setDelOpen ] = React . useState ( false )
const cancelRef = React . useRef ( )
const { toggleColorMode : toggleMode } = useColorMode ( )
const text = useColorModeValue ( "dark" , "light" )
const SwitchIcon = useColorModeValue ( FaMoon , FaSun )
const router = useRouter ( )
const editOptions = [ EditMode . Edit , EditMode . Preview ]
const { getRootProps , getRadioProps } = useRadioGroup ( {
name : "framework" ,
@ -128,6 +131,8 @@ function HeaderContent(props: any) {
const group = getRootProps ( )
const onDelete = async ( ) = > {
await requestApi . delete ( ` /tag/ ${ props . tagID } ` )
setDelOpen ( false )
router . push ( ` ${ ReserveUrls . Admin } /tags ` )
}
return (
@ -171,9 +176,35 @@ function HeaderContent(props: any) {
icon = { < SwitchIcon / > }
/ >
< Button layerStyle = "colorButton" ml = "2" onClick = { props . publish } > 发 布 < / Button >
< Button colorScheme = "red" ml = "2" onClick = { onDelete } > 删 除 < / Button >
< Button colorScheme = "red" ml = "2" onClick = { ( ) = > setDelOpen ( true ) } > 删 除 < / Button >
< / Box >
< / Flex >
< AlertDialog
isOpen = { delOpen }
leastDestructiveRef = { cancelRef }
onClose = { ( ) = > setDelOpen ( false ) }
>
< AlertDialogOverlay >
< AlertDialogContent >
< AlertDialogHeader fontSize = "lg" fontWeight = "bold" >
Delete Tag
< / AlertDialogHeader >
< AlertDialogBody >
< Text color = "red" > 删 除 Tag 将 删 除 所 有 相 关 的 信 息 , 同 时 该 操 作 不 可 逆 , 请 慎 重 < / Text >
< / AlertDialogBody >
< AlertDialogFooter >
< Button ref = { cancelRef } onClick = { ( ) = > setDelOpen ( false ) } >
Cancel
< / Button >
< Button colorScheme = "red" onClick = { onDelete } ml = { 3 } >
Delete
< / Button >
< / AlertDialogFooter >
< / AlertDialogContent >
< / AlertDialogOverlay >
< / AlertDialog >
< / >
)
}