diff --git a/vue-admin-wonderful-next/package.json b/vue-admin-wonderful-next/package.json index ba14cd1..4fb1842 100644 --- a/vue-admin-wonderful-next/package.json +++ b/vue-admin-wonderful-next/package.json @@ -6,7 +6,7 @@ "build": "vite build" }, "dependencies": { - "element-plus": "^v1.0.1-beta.20", + "element-plus": "^v1.0.1-beta.23", "mitt": "^2.1.0", "sortablejs": "^1.10.2", "vue": "^3.0.5", diff --git a/vue-admin-wonderful-next/src/App.vue b/vue-admin-wonderful-next/src/App.vue index de035a9..d75c68a 100644 --- a/vue-admin-wonderful-next/src/App.vue +++ b/vue-admin-wonderful-next/src/App.vue @@ -9,7 +9,7 @@ export default { name: "app", setup() { onBeforeMount(() => { - setIconfont(["//at.alicdn.com/t/font_2298093_8wsrw2zw3rg.css"]); + setIconfont(["//at.alicdn.com/t/font_2298093_0fmefamqzj4a.css"]); }); }, }; diff --git a/vue-admin-wonderful-next/src/router/index.ts b/vue-admin-wonderful-next/src/router/index.ts index 0f3ed89..1bc9ba2 100644 --- a/vue-admin-wonderful-next/src/router/index.ts +++ b/vue-admin-wonderful-next/src/router/index.ts @@ -7,16 +7,14 @@ const staticRoutes: Array = [ component: () => import('/@/views/layout/index.vue'), redirect: '/home', meta: { - title: '首页', - index: 0 + title: '首页' }, children: [{ path: '/home', name: 'home', component: () => import('/@/views/home/index.vue'), meta: { - title: '首页', - index: 0 + title: '首页' } }, { @@ -24,8 +22,7 @@ const staticRoutes: Array = [ name: 'docs', component: () => import('/@/views/docs/index.vue'), meta: { - title: '文档', - index: 1 + title: '文档' } }, { @@ -33,8 +30,7 @@ const staticRoutes: Array = [ name: 'docs1', component: () => import('/@/views/docs copy 1/index.vue'), meta: { - title: '文档1', - index: 2 + title: '文档1' } }, { @@ -42,8 +38,7 @@ const staticRoutes: Array = [ name: 'docs2', component: () => import('/@/views/docs copy 2/index.vue'), meta: { - title: '文档2', - index: 3 + title: '文档2' } }, { @@ -51,8 +46,7 @@ const staticRoutes: Array = [ name: 'docs3', component: () => import('/@/views/docs copy 3/index.vue'), meta: { - title: '文档3', - index: 4 + title: '文档3' } }] }, diff --git a/vue-admin-wonderful-next/src/store/index.ts b/vue-admin-wonderful-next/src/store/index.ts index 91c9751..7d0b1b8 100644 --- a/vue-admin-wonderful-next/src/store/index.ts +++ b/vue-admin-wonderful-next/src/store/index.ts @@ -30,7 +30,9 @@ export interface RootStateTypes { isGrayscale: boolean, isInvert: boolean, isWartermark: boolean, - wartermarkText: string + wartermarkText: string, + tagsStyle: string, + animation: string } } diff --git a/vue-admin-wonderful-next/src/theme/common/transition.scss b/vue-admin-wonderful-next/src/theme/common/transition.scss index 59c98a6..e23f4d2 100644 --- a/vue-admin-wonderful-next/src/theme/common/transition.scss +++ b/vue-admin-wonderful-next/src/theme/common/transition.scss @@ -22,6 +22,16 @@ .slide-left-leave-to { @extend .slide-right-enter-from; } +.opacitys-enter-active, +.opacitys-leave-active { + will-change: transform; + transition: all 0.3s ease; + position: absolute; +} +.opacitys-enter-from, +.opacitys-leave-to { + opacity: 0; +} /* Breadcrumb 面包屑过渡动画 ------------------------------- */ diff --git a/vue-admin-wonderful-next/src/theme/element.scss b/vue-admin-wonderful-next/src/theme/element.scss index 9f64499..b8ff7d9 100644 --- a/vue-admin-wonderful-next/src/theme/element.scss +++ b/vue-admin-wonderful-next/src/theme/element.scss @@ -11,6 +11,9 @@ color: set-color(primary-light-3); } } +.el-button--text:active { + color: set-color(primary-light-3); +} // default .el-button--default:hover, .el-button--default:focus { @@ -20,6 +23,9 @@ .el-button--default.is-plain:focus { @include Button(primary, whites, primary-light-1); } +.el-button--default:active { + @include Button(primary, whites, primary-light-1); +} // primary .el-button--primary { @include Button(whites, primary, primary); @@ -41,6 +47,10 @@ .el-button--primary.is-disabled:hover { @include Button(whites, primary-light-7, primary-light-7); } +.el-button--primary.is-active, +.el-button--primary:active { + @include Button(whites, primary, primary); +} // success .el-button--success { @include Button(whites, success, success); @@ -56,6 +66,10 @@ @include Button(whites, success, success); } } +.el-button--success.is-active, +.el-button--success:active { + @include Button(whites, success, success); +} // info .el-button--info { @include Button(whites, info, info); @@ -71,6 +85,10 @@ @include Button(whites, info, info); } } +.el-button--info.is-active, +.el-button--info:active { + @include Button(whites, info, info); +} // warning .el-button--warning { @include Button(whites, warning, warning); @@ -86,6 +104,10 @@ @include Button(whites, warning, warning); } } +.el-button--warning.is-active, +.el-button--warning:active { + @include Button(whites, warning, warning); +} // danger .el-button--danger { @include Button(whites, danger, danger); @@ -101,6 +123,10 @@ @include Button(whites, danger, danger); } } +.el-button--danger.is-active, +.el-button--danger:active { + @include Button(whites, danger, danger); +} /* Link 文字链接 ------------------------------- */ diff --git a/vue-admin-wonderful-next/src/utils/themeConfig.ts b/vue-admin-wonderful-next/src/utils/themeConfig.ts index 8d8b54b..c0def4d 100644 --- a/vue-admin-wonderful-next/src/utils/themeConfig.ts +++ b/vue-admin-wonderful-next/src/utils/themeConfig.ts @@ -27,5 +27,7 @@ export default { isGrayscale: false, isInvert: false, isWartermark: false, - wartermarkText: 'small@小柒' + wartermarkText: 'small@小柒', + tagsStyle: 'tagsStyleOne', + animation: 'slideRight' } \ No newline at end of file diff --git a/vue-admin-wonderful-next/src/views/docs/index.vue b/vue-admin-wonderful-next/src/views/docs/index.vue index 822eeaf..b54b130 100644 --- a/vue-admin-wonderful-next/src/views/docs/index.vue +++ b/vue-admin-wonderful-next/src/views/docs/index.vue @@ -1,3 +1,3 @@ \ No newline at end of file diff --git a/vue-admin-wonderful-next/src/views/layout/component/main.vue b/vue-admin-wonderful-next/src/views/layout/component/main.vue index a9160ea..2cc46b5 100644 --- a/vue-admin-wonderful-next/src/views/layout/component/main.vue +++ b/vue-admin-wonderful-next/src/views/layout/component/main.vue @@ -3,7 +3,7 @@ - +
@@ -25,7 +25,7 @@ import { getCurrentInstance, watch, } from "vue"; -import { useRoute, onBeforeRouteUpdate } from "vue-router"; +import { useRoute } from "vue-router"; import { useStore } from "/@/store/index.ts"; import Footer from "/@/views/layout/footer/index.vue"; export default defineComponent({ @@ -39,14 +39,19 @@ export default defineComponent({ transitionName: "slide-right", headerHeight: "84px", }); + const setTransitionName = computed(() => { + let { animation } = store.state.themeConfig; + if (animation === "slideRight") + return (state.transitionName = "slide-right"); + else if (animation === "slideLeft") + return (state.transitionName = "slide-left"); + else if (animation === "opacitys") + return (state.transitionName = "opacitys"); + }); const getThemeConfig = computed(() => { return store.state.themeConfig; }); const key = computed(() => route.path); - onBeforeRouteUpdate((to, from) => { - state.transitionName = - to.meta.index > from.meta.index ? "slide-right" : "slide-left"; - }); watch(store.state.themeConfig, (val) => { state.headerHeight = val.isTagsview ? "84px" : "50px"; if (val.isFixedHeaderChange !== val.isFixedHeader) { @@ -55,6 +60,7 @@ export default defineComponent({ }); return { getThemeConfig, + setTransitionName, key, ...toRefs(state), }; diff --git a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue index 421f7e8..ce196e4 100644 --- a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue +++ b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue @@ -182,20 +182,21 @@
Tagsview 风格
- - - - + + + + +
主页面切换动画
- - - - + + + +
@@ -488,6 +489,8 @@ export default defineComponent({ .el-circular { border-radius: 2px; overflow: hidden; + border: 1px solid transparent; + transition: all 0.3s ease-in-out; } .drawer-layout-active { border: 1px solid; @@ -495,6 +498,7 @@ export default defineComponent({ } .layout-tips-warp, .layout-tips-warp-active { + transition: all 0.3s ease-in-out; position: absolute; left: 50%; top: 50%; @@ -504,6 +508,7 @@ export default defineComponent({ border-radius: 100%; padding: 4px; .layout-tips-box { + transition: inherit; width: 30px; height: 30px; z-index: 9; @@ -511,6 +516,7 @@ export default defineComponent({ border-color: var(--color-primary-light-4); border-radius: 100%; .layout-tips-txt { + transition: inherit; position: relative; top: 5px; font-size: 12px; @@ -540,6 +546,26 @@ export default defineComponent({ } } } + &:hover { + .el-circular { + transition: all 0.3s ease-in-out; + border: 1px solid; + border-color: var(--color-primary); + } + .layout-tips-warp { + transition: all 0.3s ease-in-out; + border-color: var(--color-primary); + .layout-tips-box { + transition: inherit; + border-color: var(--color-primary); + .layout-tips-txt { + transition: inherit; + color: var(--color-primary) !important; + background-color: #e9eef3 !important; + } + } + } + } } } .copy-config { diff --git a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/user.vue b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/user.vue index 7c1f59e..10924da 100644 --- a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/user.vue +++ b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/user.vue @@ -4,7 +4,7 @@
- +
diff --git a/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue b/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue index ca5f60b..481c523 100644 --- a/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue +++ b/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue @@ -1,7 +1,7 @@