freeleaps_product/freeleaps_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
min.jiang 2024-07-02 05:52:58 +08:00
parent 73ea1e43e6
commit d699077d45
2 changed files with 114 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
frontend/src/components/FreeleapsEditor.vue
View File

@ -11,96 +11,99 @@
@mouseup.stop="selectionEnd" @mouseup.stop="selectionEnd"
/> />
<div v-if="!disabled" class="editor-control" :style="editorCtrlStyle"> <div v-if="!disabled" class="editor-control" :style="editorCtrlStyle">
<template v-if="!inputing"> <transition-group appear name="fade-transform" mode="out-in">
<div v-for="(item, index) in iconList" :key="index" class="editor-item"> <template v-if="!inputing">
<button <div v-for="(item, index) in iconList" :key="index" class="editor-item">
class="item-icon" <button
:class="{ class="item-icon"
activity: commandStates.indexOf(item.type) !== -1, :class="{
last: index === iconList.length - 1 activity: commandStates.indexOf(item.type) !== -1,
}" last: index === iconList.length - 1
:data-info="item.name" }"
@click="iconClick($event, item.type)" :data-info="item.name"
:data-bs-toggle="item.drop ? 'dropdown' : ''" @click="iconClick($event, item.type)"
data-bs-auto-close="outside" :data-bs-toggle="item.drop ? 'dropdown' : ''"
aria-expanded="false" data-bs-auto-close="outside"
> aria-expanded="false"
<svg-icon :icon="item.icon" class-name="icon" /> >
</button> <svg-icon :icon="item.icon" class-name="icon" />
<div class="dropmenu drop-style" v-if="item.type === 'style'"> </button>
<ul> <div class="dropmenu drop-style" v-if="item.type === 'style'">
<li> <ul>
<a href="#" @click="iconClick($event, 'p', 'style')"><p>Text</p></a> <li>
</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, 'pre', 'style')"><pre>code</pre></a>
<li> </li>
<a href="#" @click="iconClick($event, 'blockquote', 'style')" <li>
><blockquote>引用</blockquote></a <a href="#" @click="iconClick($event, 'blockquote', 'style')"
> ><blockquote>引用</blockquote></a
</li> >
<li> </li>
<a href="#" @click="iconClick($event, 'h1', 'style')"><h1>Caption 1</h1></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, '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, '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, '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, 'h5', 'style')"><h5>Caption 5</h5></a>
<li> </li>
<a href="#" @click="iconClick($event, 'h6', 'style')"><h6>Caption 6</h6></a> <li>
</li> <a href="#" @click="iconClick($event, 'h6', 'style')"><h6>Caption 6</h6></a>
</ul> </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>
<div class="dropmenu drop-style" v-if="item.type === 'alignjustify'"> </template>
<ul> <template v-if="inputing">
<li> <div class="editor-item">
<a href="#" @click="iconClick($event, 'justifyCenter', 'alignjustify')"> <button class="item-icon item-icon-back" @click="backAction" data-info="back">
<i class="iconfont icon-aligncenter"></i> <svg-icon icon="fe-back" class-name="icon" />
<span>middle</span> </button>
</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> <div class="editor-item">
</template> <input type="text" v-model="linkUrl" autofocus @keydown.enter="inputAction">
<template v-if="inputing"> <svg-icon icon="msg-enter" class-name="item-enter-icon" />
<div class="editor-item"> </div>
<button class="item-icon item-icon-back" @click="backAction"> </template>
<svg-icon icon="fe-back" class-name="icon" /> </transition-group>
</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> </div>
</div> </div>
</template> </template>
@ -225,6 +228,8 @@ export default {
} else { } else {
this.selectedRange = null this.selectedRange = null
this.editorCtrlStyle = { display: 'none' } this.editorCtrlStyle = { display: 'none' }
this.inputing = false
this.linkUrl = ''
// this.commandStates = [] // this.commandStates = []
} }
}, },
@ -267,6 +272,7 @@ export default {
}, },
backAction() { backAction() {
this.inputing = false this.inputing = false
this.linkUrl = ''
this.$refs.editor.focus() this.$refs.editor.focus()
this.restoreSelection() this.restoreSelection()
}, },
@ -281,6 +287,7 @@ export default {
this.selectedRange.surroundContents(a_node) this.selectedRange.surroundContents(a_node)
this.backAction() this.backAction()
this.$refs.editor.blur() this.$refs.editor.blur()
this.linkUrl = ''
this.editorCtrlStyle = { display: 'none' } this.editorCtrlStyle = { display: 'none' }
}, },
getSelect() { getSelect() {
@ -593,4 +600,23 @@ export default {
.editor-body ol { .editor-body ol {
padding-left: 40px; 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> </style>

3
frontend/src/pages/guest/FrontDoor.vue
View File

@ -25,7 +25,6 @@
<p class="error-msg">{{ message }}</p> <p class="error-msg">{{ message }}</p>
</div> </div>
</div> </div>
<freeleaps-editor v-model:content="message" style="margin-top: 20px" />
</template> </template>
<script> <script>
@ -35,10 +34,8 @@ import {
// userProfileValidator, // userProfileValidator,
} from '@/utils/index' } from '@/utils/index'
import { signinActionEnum } from '@/types/index' import { signinActionEnum } from '@/types/index'
import FreeleapsEditor from '../../components/FreeleapsEditor.vue'
export default { export default {
components: { FreeleapsEditor },
name: 'FrontDoor', name: 'FrontDoor',
props: {}, props: {},
data() { data() {