From d699077d45e043c61f8bfd5bc1ecebd4b4ee2850 Mon Sep 17 00:00:00 2001
From: "min.jiang" <min.jiang02@weimob.com>
Date: Tue, 2 Jul 2024 05:52:58 +0800
Subject: [PATCH] update

---
 frontend/src/components/FreeleapsEditor.vue | 202 +++++++++++---------
 frontend/src/pages/guest/FrontDoor.vue      |   3 -
 2 files changed, 114 insertions(+), 91 deletions(-)

diff --git a/frontend/src/components/FreeleapsEditor.vue b/frontend/src/components/FreeleapsEditor.vue
index 1b1a6aa..00c1961 100644
--- a/frontend/src/components/FreeleapsEditor.vue
+++ b/frontend/src/components/FreeleapsEditor.vue
@@ -11,96 +11,99 @@
       @mouseup.stop="selectionEnd"
     />
     <div v-if="!disabled" class="editor-control" :style="editorCtrlStyle">
-      <template v-if="!inputing">
-        <div v-for="(item, index) in iconList" :key="index" class="editor-item">
-          <button
-            class="item-icon"
-            :class="{
-              activity: commandStates.indexOf(item.type) !== -1,
-              last: index === iconList.length - 1
-            }"
-            :data-info="item.name"
-            @click="iconClick($event, item.type)"
-            :data-bs-toggle="item.drop ? 'dropdown' : ''"
-            data-bs-auto-close="outside"
-            aria-expanded="false"
-          >
-            <svg-icon :icon="item.icon" class-name="icon" />
-          </button>
-          <div class="dropmenu drop-style" v-if="item.type === 'style'">
-            <ul>
-              <li>
-                <a href="#" @click="iconClick($event, 'p', 'style')"><p>Text</p></a>
-              </li>
-              <li>
-                <a href="#" @click="iconClick($event, 'pre', 'style')"><pre>code</pre></a>
-              </li>
-              <li>
-                <a href="#" @click="iconClick($event, 'blockquote', 'style')"
-                  ><blockquote>引用</blockquote></a
-                >
-              </li>
-              <li>
-                <a href="#" @click="iconClick($event, 'h1', 'style')"><h1>Caption 1</h1></a>
-              </li>
-              <li>
-                <a href="#" @click="iconClick($event, 'h2', 'style')"><h2>Caption 2</h2></a>
-              </li>
-              <li>
-                <a href="#" @click="iconClick($event, 'h3', 'style')"><h3>Caption 3</h3></a>
-              </li>
-              <li>
-                <a href="#" @click="iconClick($event, 'h4', 'style')"><h4>Caption 4</h4></a>
-              </li>
-              <li>
-                <a href="#" @click="iconClick($event, 'h5', 'style')"><h5>Caption 5</h5></a>
-              </li>
-              <li>
-                <a href="#" @click="iconClick($event, 'h6', 'style')"><h6>Caption 6</h6></a>
-              </li>
-            </ul>
+      <transition-group appear name="fade-transform" mode="out-in">
+        <template v-if="!inputing">
+          <div v-for="(item, index) in iconList" :key="index" class="editor-item">
+            <button
+              class="item-icon"
+              :class="{
+                activity: commandStates.indexOf(item.type) !== -1,
+                last: index === iconList.length - 1
+              }"
+              :data-info="item.name"
+              @click="iconClick($event, item.type)"
+              :data-bs-toggle="item.drop ? 'dropdown' : ''"
+              data-bs-auto-close="outside"
+              aria-expanded="false"
+            >
+              <svg-icon :icon="item.icon" class-name="icon" />
+            </button>
+            <div class="dropmenu drop-style" v-if="item.type === 'style'">
+              <ul>
+                <li>
+                  <a href="#" @click="iconClick($event, 'p', 'style')"><p>Text</p></a>
+                </li>
+                <li>
+                  <a href="#" @click="iconClick($event, 'pre', 'style')"><pre>code</pre></a>
+                </li>
+                <li>
+                  <a href="#" @click="iconClick($event, 'blockquote', 'style')"
+                    ><blockquote>引用</blockquote></a
+                  >
+                </li>
+                <li>
+                  <a href="#" @click="iconClick($event, 'h1', 'style')"><h1>Caption 1</h1></a>
+                </li>
+                <li>
+                  <a href="#" @click="iconClick($event, 'h2', 'style')"><h2>Caption 2</h2></a>
+                </li>
+                <li>
+                  <a href="#" @click="iconClick($event, 'h3', 'style')"><h3>Caption 3</h3></a>
+                </li>
+                <li>
+                  <a href="#" @click="iconClick($event, 'h4', 'style')"><h4>Caption 4</h4></a>
+                </li>
+                <li>
+                  <a href="#" @click="iconClick($event, 'h5', 'style')"><h5>Caption 5</h5></a>
+                </li>
+                <li>
+                  <a href="#" @click="iconClick($event, 'h6', 'style')"><h6>Caption 6</h6></a>
+                </li>
+              </ul>
+            </div>
+            <div class="dropmenu drop-style" v-if="item.type === 'alignjustify'">
+              <ul>
+                <li>
+                  <a href="#" @click="iconClick($event, 'justifyCenter', 'alignjustify')">
+                    <i class="iconfont icon-aligncenter"></i>
+                    <span>middle</span>
+                  </a>
+                </li>
+                <li>
+                  <a href="#" @click="iconClick($event, 'justifyLeft', 'alignjustify')">
+                    <i class="iconfont icon-alignleft"></i>
+                    <span>left aligned</span>
+                  </a>
+                </li>
+                <li>
+                  <a href="#" @click="iconClick($event, 'justifyRight', 'alignjustify')">
+                    <i class="iconfont icon-alignright"></i>
+                    <span>right aligned</span>
+                  </a>
+                </li>
+                <li>
+                  <a href="#" @click="iconClick($event, 'justifyFull', 'alignjustify')">
+                    <i class="iconfont icon-alignjustify"></i>
+                    <span>default aligned</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
           </div>
-          <div class="dropmenu drop-style" v-if="item.type === 'alignjustify'">
-            <ul>
-              <li>
-                <a href="#" @click="iconClick($event, 'justifyCenter', 'alignjustify')">
-                  <i class="iconfont icon-aligncenter"></i>
-                  <span>middle</span>
-                </a>
-              </li>
-              <li>
-                <a href="#" @click="iconClick($event, 'justifyLeft', 'alignjustify')">
-                  <i class="iconfont icon-alignleft"></i>
-                  <span>left aligned</span>
-                </a>
-              </li>
-              <li>
-                <a href="#" @click="iconClick($event, 'justifyRight', 'alignjustify')">
-                  <i class="iconfont icon-alignright"></i>
-                  <span>right aligned</span>
-                </a>
-              </li>
-              <li>
-                <a href="#" @click="iconClick($event, 'justifyFull', 'alignjustify')">
-                  <i class="iconfont icon-alignjustify"></i>
-                  <span>default aligned</span>
-                </a>
-              </li>
-            </ul>
+        </template>
+        <template v-if="inputing">
+          <div class="editor-item">
+            <button class="item-icon item-icon-back" @click="backAction" data-info="back">
+              <svg-icon icon="fe-back" class-name="icon" />
+            </button>
           </div>
-        </div>
-      </template>
-      <template v-if="inputing">
-        <div class="editor-item">
-          <button class="item-icon item-icon-back" @click="backAction">
-            <svg-icon icon="fe-back" class-name="icon" />
-          </button>
-        </div>
-        <div class="editor-item">
-          <input type="text" v-model="linkUrl" autofocus @keydown.enter="inputAction">
-          <svg-icon icon="msg-enter" class-name="item-enter-icon" />
-        </div>
-      </template>
+          <div class="editor-item">
+            <input type="text" v-model="linkUrl" autofocus @keydown.enter="inputAction">
+            <svg-icon icon="msg-enter" class-name="item-enter-icon" />
+          </div>
+        </template>
+      </transition-group>
+      
     </div>
   </div>
 </template>
@@ -225,6 +228,8 @@ export default {
       } else {
         this.selectedRange = null
         this.editorCtrlStyle = { display: 'none' }
+        this.inputing = false
+        this.linkUrl = ''
         // this.commandStates = []
       }
     },
@@ -267,6 +272,7 @@ export default {
     },
     backAction() {
       this.inputing = false
+      this.linkUrl = ''
       this.$refs.editor.focus()
       this.restoreSelection()
     },
@@ -281,6 +287,7 @@ export default {
       this.selectedRange.surroundContents(a_node)
       this.backAction()
       this.$refs.editor.blur()
+      this.linkUrl = ''
       this.editorCtrlStyle = { display: 'none' }
     },
     getSelect() {
@@ -593,4 +600,23 @@ export default {
 .editor-body ol {
   padding-left: 40px;
 }
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all 300;
+}
+
+.fade-transform-enter-from {
+  opacity: 0;
+  transform: translateX(-50px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(50px);
+}
+.fade-transform-active {
+  position: absolute;
+}
 </style>
diff --git a/frontend/src/pages/guest/FrontDoor.vue b/frontend/src/pages/guest/FrontDoor.vue
index 9d43f88..2fb1b0f 100644
--- a/frontend/src/pages/guest/FrontDoor.vue
+++ b/frontend/src/pages/guest/FrontDoor.vue
@@ -25,7 +25,6 @@
       <p class="error-msg">{{ message }}</p>
     </div>
   </div>
-  <freeleaps-editor v-model:content="message" style="margin-top: 20px" />
 </template>
 
 <script>
@@ -35,10 +34,8 @@ import {
   // userProfileValidator,
 } from '@/utils/index'
 import { signinActionEnum } from '@/types/index'
-import FreeleapsEditor from '../../components/FreeleapsEditor.vue'
 
 export default {
-  components: { FreeleapsEditor },
   name: 'FrontDoor',
   props: {},
   data() {