mirror of
https://github.com/0xJacky/nginx-ui.git
synced 2025-05-12 10:55:51 +02:00
feat: added animations
This commit is contained in:
0xJacky
parent
dab2915ab5
commit
69cdef4f6d
16 changed files with 77 additions and 77 deletions
|
|
@ -12,6 +12,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons-vue": "^6.1.0",
|
||||
"@formkit/auto-animate": "^1.0.0-beta.6",
|
||||
"@types/lodash": "^4.14.188",
|
||||
"@types/marked": "^4.0.8",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
|
|
|
|||
|
|
@ -71,7 +71,11 @@ const lang = computed(() => {
|
|||
<a-layout-content>
|
||||
<page-header/>
|
||||
<div class="router-view">
|
||||
<router-view/>
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<transition name="slide-fade">
|
||||
<component :is="Component" :key="route.path"/>
|
||||
</transition>
|
||||
</router-view>
|
||||
</div>
|
||||
</a-layout-content>
|
||||
|
||||
|
|
@ -122,6 +126,20 @@ const lang = computed(() => {
|
|||
</style>
|
||||
|
||||
<style lang="less">
|
||||
.slide-fade-enter-active {
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
|
||||
.slide-fade-leave-active {
|
||||
transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
|
||||
}
|
||||
|
||||
.slide-fade-enter-from, .slide-fade-enter-to, .slide-fade-leave-to
|
||||
/* .slide-fade-leave-active for below version 2.1.8 */ {
|
||||
transform: translateX(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: unset !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import router from './routes'
|
|||
//import 'ant-design-vue/dist/antd.less'
|
||||
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
|
||||
import {useSettingsStore} from '@/pinia'
|
||||
import {autoAnimatePlugin} from '@formkit/auto-animate/vue'
|
||||
|
||||
|
||||
const pinia = createPinia()
|
||||
|
|
@ -19,6 +20,6 @@ app.use(gettext)
|
|||
const settings = useSettingsStore()
|
||||
gettext.current = settings.language || 'en'
|
||||
|
||||
app.use(router).mount('#app')
|
||||
app.use(router).use(autoAnimatePlugin).mount('#app')
|
||||
|
||||
export default app
|
||||
|
|
|
|||
|
|
@ -44,9 +44,8 @@ watch(route, () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<inspect-config ref="inspect_config"/>
|
||||
|
||||
<a-card :title="$gettext('Configurations')">
|
||||
<inspect-config ref="inspect_config"/>
|
||||
<std-table
|
||||
:key="update"
|
||||
ref="table"
|
||||
|
|
|
|||
|
|
@ -72,10 +72,10 @@ const chat_md = computed(() => history_chatgpt_record?.value?.length > 1 ? 8 : 2
|
|||
|
||||
|
||||
<template>
|
||||
<inspect-config ref="inspect_config"/>
|
||||
<a-row :gutter="16">
|
||||
<a-col :xs="24" :sm="24" :md="editor_md">
|
||||
<a-card :title="$gettext('Edit Configuration')">
|
||||
<inspect-config ref="inspect_config"/>
|
||||
<code-editor v-model:content="configText"/>
|
||||
<footer-tool-bar>
|
||||
<a-space>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ defineExpose({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<a-card class="inspect-container" :title="$gettext('Inspect Configurations')">
|
||||
<div class="inspect-container">
|
||||
<a-alert :message="$gettext('Configuration file is test successful')" type="success"
|
||||
show-icon v-if="data?.level<logLevel.Debug"/>
|
||||
<a-alert
|
||||
|
|
@ -50,7 +50,7 @@ defineExpose({
|
|||
{{ data.message }}
|
||||
</template>
|
||||
</a-alert>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -280,14 +280,14 @@ const chat_md = computed(() => history_chatgpt_record?.value?.length > 1 ? 8 : 2
|
|||
}
|
||||
|
||||
.slide-fade-enter-active {
|
||||
transition: all .5s ease-in-out;
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
|
||||
.slide-fade-leave-active {
|
||||
transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
|
||||
transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
|
||||
}
|
||||
|
||||
.slide-fade-enter, .slide-fade-leave-to
|
||||
.slide-fade-enter-from, .slide-fade-enter-to, .slide-fade-leave-to
|
||||
/* .slide-fade-leave-active for below version 2.1.8 */ {
|
||||
transform: translateX(10px);
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -131,8 +131,8 @@ function handle_click_duplicate(name: string) {
|
|||
</a-popconfirm>
|
||||
</template>
|
||||
</std-table>
|
||||
<site-duplicate v-model:visible="show_duplicator" :name="target" @duplicated="table.get_list()"/>
|
||||
</a-card>
|
||||
<site-duplicate v-model:visible="show_duplicator" :name="target" @duplicated="table.get_list()"/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -198,7 +198,7 @@ function add_server() {
|
|||
</div>
|
||||
|
||||
</a-tab-pane>
|
||||
|
||||
|
||||
<template #rightExtra>
|
||||
<a-button @click="add_server" type="link" size="small">
|
||||
<PlusOutlined/>
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ function onSave(idx: number) {
|
|||
class="list-group"
|
||||
ghost-class="ghost"
|
||||
handle=".anticon-holder"
|
||||
v-auto-animate
|
||||
>
|
||||
<template #item="{ element: directive, index }">
|
||||
<directive-editor-item @click="current_idx=index"
|
||||
|
|
@ -38,11 +39,12 @@ function onSave(idx: number) {
|
|||
:current_idx="current_idx" :index="index"
|
||||
:ngx_directives="ngx_directives"
|
||||
:readonly="readonly"
|
||||
v-auto-animate
|
||||
/>
|
||||
</template>
|
||||
</draggable>
|
||||
|
||||
<directive-add v-if="!readonly" :ngx_directives="ngx_directives"/>
|
||||
<directive-add v-if="!readonly" :ngx_directives="ngx_directives" v-auto-animate/>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -68,24 +68,22 @@ function save() {
|
|||
</a-button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
<transition name="slide">
|
||||
<div v-if="current_idx===index" class="directive-editor-extra">
|
||||
<div class="extra-content">
|
||||
<a-form layout="vertical">
|
||||
<a-form-item :label="$gettext('Comments')">
|
||||
<a-textarea v-model:value="directive.comments"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$gettext('Content')" v-if="directive.directive==='include'">
|
||||
<code-editor v-model:content="content"
|
||||
defaultHeight="200px" style="width: 100%;"/>
|
||||
<div class="save-btn">
|
||||
<a-button @click="save">{{ $gettext('Save') }}</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<div v-if="current_idx===index" class="directive-editor-extra">
|
||||
<div class="extra-content">
|
||||
<a-form layout="vertical">
|
||||
<a-form-item :label="$gettext('Comments')">
|
||||
<a-textarea v-model:value="directive.comments"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$gettext('Content')" v-if="directive.directive==='include'">
|
||||
<code-editor v-model:content="content"
|
||||
defaultHeight="200px" style="width: 100%;"/>
|
||||
<div class="save-btn">
|
||||
<a-button @click="save">{{ $gettext('Save') }}</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
|
@ -117,19 +115,6 @@ function save() {
|
|||
}
|
||||
}
|
||||
|
||||
.slide-enter-active, .slide-leave-active {
|
||||
transition: max-height .2s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slide-enter-from, .slide-leave-to {
|
||||
max-height: 0;
|
||||
}
|
||||
|
||||
.slide-enter-to, .slide-leave-from {
|
||||
max-height: 600px;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
|
|
|||
|
|
@ -167,12 +167,12 @@ const computedBuffer = computed(() => {
|
|||
<pre class="nginx-log-container" ref="logContainer"
|
||||
@scroll="debounce(on_scroll_log,100, null)()" v-html="computedBuffer"/>
|
||||
</a-card>
|
||||
<footer-tool-bar v-if="control.type==='site'">
|
||||
<a-button @click="router.go(-1)">
|
||||
<translate>Back</translate>
|
||||
</a-button>
|
||||
</footer-tool-bar>
|
||||
</a-card>
|
||||
<footer-tool-bar v-if="control.type==='site'">
|
||||
<a-button @click="router.go(-1)">
|
||||
<translate>Back</translate>
|
||||
</a-button>
|
||||
</footer-tool-bar>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
|
|
|
|||
|
|
@ -115,12 +115,12 @@ function save() {
|
|||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<footer-tool-bar>
|
||||
<a-button type="primary" @click="save">
|
||||
{{ $gettext('Save') }}
|
||||
</a-button>
|
||||
</footer-tool-bar>
|
||||
</a-card>
|
||||
<footer-tool-bar>
|
||||
<a-button type="primary" @click="save">
|
||||
{{ $gettext('Save') }}
|
||||
</a-button>
|
||||
</footer-tool-bar>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -101,20 +101,20 @@ async function perform_upgrade() {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<a-modal
|
||||
:title="$gettext('Core Upgrade')"
|
||||
v-model:visible="modalVisible"
|
||||
:mask-closable="false"
|
||||
:footer="null" :closable="modalClosable" force-render>
|
||||
<a-progress
|
||||
:stroke-color="progressStrokeColor"
|
||||
:percent="progressPercent"
|
||||
:status="progressStatus"
|
||||
/>
|
||||
|
||||
<div class="core-upgrade-log-container" ref="logContainer"/>
|
||||
</a-modal>
|
||||
<a-card :title="$gettext('Upgrade')">
|
||||
<a-modal
|
||||
:title="$gettext('Core Upgrade')"
|
||||
v-model:visible="modalVisible"
|
||||
:mask-closable="false"
|
||||
:footer="null" :closable="modalClosable" force-render>
|
||||
<a-progress
|
||||
:stroke-color="progressStrokeColor"
|
||||
:percent="progressPercent"
|
||||
:status="progressStatus"
|
||||
/>
|
||||
|
||||
<div class="core-upgrade-log-container" ref="logContainer"/>
|
||||
</a-modal>
|
||||
<div class="upgrade-container">
|
||||
<p>{{ $gettext('You can check Nginx UI upgrade at this page.') }}</p>
|
||||
<h3>{{ $gettext('Current Version') }}: v{{ version.version }}</h3>
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -609,6 +609,11 @@
|
|||
resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.16.17.tgz#c5a1a4bfe1b57f0c3e61b29883525c6da3e5c091"
|
||||
integrity sha512-y+EHuSchhL7FjHgvQL/0fnnFmO4T1bhvWANX6gcnqTjtnKWbTvUMCpGnv2+t+31d7RzyEAYAd4u2fnIhHL6N/Q==
|
||||
|
||||
"@formkit/auto-animate@^1.0.0-beta.6":
|
||||
version "1.0.0-beta.6"
|
||||
resolved "https://registry.yarnpkg.com/@formkit/auto-animate/-/auto-animate-1.0.0-beta.6.tgz#ed7f8bc47d774a7764756646e9e3432e8be51cb3"
|
||||
integrity sha512-PVDhLAlr+B4Xb7e+1wozBUWmXa6BFU8xUPR/W/E+TsQhPS1qkAdAsJ25keEnFrcePSnXHrOsh3tiFbEToOzV9w==
|
||||
|
||||
"@jridgewell/gen-mapping@^0.1.0":
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue