add customize article modal

components/popover/modal/index.tsx

@@ -14,7 +14,7 @@ export declare type ModalProps = ComponentProps<{ show?: boolean; onClose?: () =
 const ModalContent = (props: ModalProps) => {
   const { onClose, className, style, children } = props;
   return (
-    <div>
+    <div className={styles.wrapper}>
       <div className={concat(className, styles.modal)} style={style}>
         <Card style={{ background: 'var(--background)' }}>
           {!!onClose ? (

components/popover/modal/modal.module.scss

@@ -1,9 +1,13 @@
 .modal {
   position: fixed;
   z-index: 6;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
+  // left: 50%;
+  // top: 50%;
+  // transform: translate(-50%, -50%);
+  animation-name: scaleDraw; /*关键帧名称*/
+  animation-timing-function: ease-in-out; /*动画的速度曲线*/
+  animation-iteration-count: 1;  /*动画播放的次数*/
+  animation-duration: 0.5s; /*动画所花费的时间*/
 }
 
 .dimmed {
@@ -18,3 +22,32 @@
   animation-fill-mode: forwards;
   z-index: 5;
 }
+.wrapper{
+  position: absolute;
+  z-index: 6;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
+  // 0%{
+  //   transform: scale(0.5) translate(-100%, -100%);  /*开始为原始大小*/
+  // } 
+  0%{
+    transform: scale(0);
+  }
+  50%{
+      transform: scale(1.2); /*放大1.1倍*/
+  }
+  100%{
+      transform: scale(1);
+  }
+  // 75%{
+  //     transform: scale(1.1) translate(-50%, -50%);
+  // }
+}

components/post_content.tsx

@@ -27,7 +27,6 @@ interface PostContentProps {
 
 interface PostContentState {
   travel?: Blotter.Travel;
-  disgusting?: boolean;
 }
 
 class PostContent extends Component<PostContentProps, PostContentState> {
@@ -35,7 +34,7 @@ class PostContent extends Component<PostContentProps, PostContentState> {
   context!: React.ContextType<typeof Context>;
   constructor(props) {
     super(props);
-    this.state = {travel: undefined,disgusting:false};
+    this.state = {travel: undefined};
   }
   resetImage() {
     const containers = document.getElementsByClassName('image');
@@ -75,13 +74,23 @@ class PostContent extends Component<PostContentProps, PostContentState> {
     this.resetImage();
     this.resetTable();
     this.drawMermaid();
-    if (this.isDisgust){
-      this.setState({disgusting:true});
-    }
-    if (this.isTravel()) {
+      
+    if (!!this.isTravel()) {
       this.getTravelData();
     }
+    if (!!this.props.post.poptext){
+      var poptext = this.props.post.poptext.replace(/\n/g, '<br/>');
+      Modal.info({children:<div
+        style={{ wordBreak: 'break-all' ,display:'flex',
+              justifyContent:'center',alignItems:'center',
+              minWidth: '20em' , minHeight: '5em',
+              textAlign: 'center', lineHeight: '1.5em',}}
+        dangerouslySetInnerHTML={{ __html:  poptext }}
+      ></div>}
+      )
+    }
   }
+  
   componentDidUpdate() {
     this.resetImage();
     this.resetTable();
@@ -95,11 +104,6 @@ class PostContent extends Component<PostContentProps, PostContentState> {
     );
   };
 
-  isDisgust = () => {
-    return (
-      this.props.post.url.substring(-8) === 'disgust1' 
-    );
-  };
 
   getTravelData = () => {
     travels_get_url(this.props.post.url)
@@ -159,10 +163,10 @@ class PostContent extends Component<PostContentProps, PostContentState> {
         <Flex direction="TB" fullWidth>
           <PostCard post={this.props.post} inset inPost />
           {!!this.context.ad_text && <AD setting={this.context.ad_text} />}
-          <Modal show={this.state.disgusting} onClose={() => this.setState({disgusting:false})} style={{ maxWidth: 500, width: '90%' }}>
-                <p>欢迎来看我最深最阴暗最恶心的角落</p>
-                <p>Welcome to the darkest part of me</p>
-          </Modal>
+          {/* <Modal show={this.state.popfilter} onClose={() => this.setState({popfilter:false})} style={{ maxWidth: 500, width: '90%' }}>
+            
+            </Modal> */}
+          
           {this.props.prefix}
           {this.renderTravel()}
           {!!this.props.post.images && this.props.post.images.length > 0 ? (

pages/admin/post/index.tsx

@@ -75,6 +75,8 @@ class PostEdit extends React.Component<PostEditProps, PostEditState> {
       title: '',
       url: '',
       abstract: '',
+      pop:false,
+      poptext:'',
       head_image: '',
       view: 0,
       publish_time: now,
@@ -200,6 +202,8 @@ class PostEdit extends React.Component<PostEditProps, PostEditState> {
       keywords: this.state.keywords,
       status: this.state.status,
       abstract: this.state.abstract,
+      pop: this.state.pop,
+      poptext: this.state.poptext,
       view: this.state.view,
       head_image: this.state.head_image,
       tags: this.state.tags,
@@ -367,6 +371,18 @@ class PostEdit extends React.Component<PostEditProps, PostEditState> {
           >
             导入图片
           </Button>
+          
+          <CheckBox
+            
+            switchStyle={true}
+            checkText="使用弹窗"
+            uncheckText="不使用弹窗"
+            value={!!this.state.pop}
+            onChange={(value) =>
+              this.setState({pop:value})
+            }
+          />
+            
         </Flex>
 
         <TagSearch onAdd={this.tagOnAdd} onDelete={this.tagOnDelete} tags={this.state.tags} />
@@ -380,6 +396,15 @@ class PostEdit extends React.Component<PostEditProps, PostEditState> {
           onChange={(abstract) => this.setState({ abstract })}
         />
 
+        <TextArea
+          label="弹窗文字"
+          rows={4}
+          spellCheck="false"
+          placeholder="弹窗文字"
+          value={this.state.poptext}
+          onChange={(poptext) => this.setState({ poptext })}
+        />
+        
         <Flex
           direction="TB"
           subAxis="flex-end"

types/typings.d.ts

@@ -74,6 +74,8 @@ declare namespace Blotter {
     tags: Tag[];
     head_image: string;
     length: number;
+    pop:boolean;
+    poptext:string;
   }
   interface Post extends PostCard {
     content: string;