From a9a9358c6775ae6c2a14a070dc4dea0a67fd9cdb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=98chen=2Ehome=E2=80=99?= <1147347984@qq.com> Date: Wed, 10 Aug 2022 22:53:18 +0800 Subject: [PATCH] =?UTF-8?q?chore(projects):=20=E5=A2=9E=E5=8A=A0svg?= =?UTF-8?q?=E5=9B=BE=E6=A0=87=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.js | 2 +- README.md | 2 +- build/plugins/unplugin.ts | 10 ++++ index.html | 2 +- package.json | 3 +- public/{favicon.svg => logo.svg} | 0 src/App.vue | 4 +- src/assets/svg/logo.svg | 1 + src/components/SvgIcon.vue | 24 ++++++++++ src/layouts/BasicLayout/index.vue | 19 +++++--- src/layouts/components/logo.vue | 21 +++++++++ src/plugins/assets.ts | 1 + src/styles/css/index.css | 1 + src/styles/css/transition.css | 76 +++++++++++++++++++++++++++++++ src/views/login/index.vue | 2 +- 15 files changed, 153 insertions(+), 15 deletions(-) rename public/{favicon.svg => logo.svg} (100%) create mode 100644 src/assets/svg/logo.svg create mode 100644 src/components/SvgIcon.vue create mode 100644 src/layouts/components/logo.vue create mode 100644 src/styles/css/transition.css diff --git a/.eslintrc.js b/.eslintrc.js index 505f26b..737bdb9 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -31,7 +31,7 @@ module.exports = { // TSESLint docs https://typescript-eslint.io/rules/ 'no-var': 'error', // 禁止使用var 'no-unused-vars': 'off', // 允许声明不使用的值 - 'no-console': 'warn', // 禁止出现console + 'no-console': 'off', // 允许出现console 'no-debugger': 'off', // 关闭debugger警告 'vue/multi-word-component-names': 0, // 关闭文件名多单词 // 'import/no-unresolved': ['error', { ignore: ['~icons/*'] }], diff --git a/README.md b/README.md index 3b15a57..1a3a1a0 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@
- +

Ench Admin

diff --git a/build/plugins/unplugin.ts b/build/plugins/unplugin.ts index fa9e57d..31f63fe 100644 --- a/build/plugins/unplugin.ts +++ b/build/plugins/unplugin.ts @@ -2,6 +2,8 @@ import Components from 'unplugin-vue-components/vite'; import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'; import Icons from 'unplugin-icons/vite'; import IconsResolver from 'unplugin-icons/resolver'; +import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'; // https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/README.zh_CN.md +import path from 'path'; export default [ Components({ @@ -11,4 +13,12 @@ export default [ Icons({ /* options */ }), + createSvgIconsPlugin({ + // 指定需要缓存的图标文件夹 + iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')], + // 指定symbolId格式 + symbolId: 'icon-[dir]-[name]', + inject: 'body-last', + customDomId: '__svg__icons__dom__', + }), ]; diff --git a/index.html b/index.html index c256275..10a2deb 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + <%= title %> diff --git a/package.json b/package.json index 10e03e5..c699831 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "devDependencies": { "@commitlint/cli": "^17.0.3", "@commitlint/config-conventional": "^17.0.3", - "@iconify-json/icon-park": "^1.1.5", + "@iconify-icons/icon-park-outline": "^1.2.5", "@iconify/vue": "^3.2.1", "@types/mockjs": "^1.0.6", "@types/node": "^18.6.5", @@ -66,6 +66,7 @@ "vite-plugin-compression": "^0.5.1", "vite-plugin-html": "^3.2.0", "vite-plugin-mock": "^2.9.6", + "vite-plugin-svg-icons": "^2.0.1", "vue-tsc": "^0.38.4" } } diff --git a/public/favicon.svg b/public/logo.svg similarity index 100% rename from public/favicon.svg rename to public/logo.svg diff --git a/src/App.vue b/src/App.vue index 02e711a..ec81238 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,9 +2,7 @@ // import { darkTheme } from 'naive-ui'; import { zhCN, dateZhCN, GlobalThemeOverrides } from 'naive-ui'; import json from './theme.json'; -// import { useLoadingBar } from 'naive-ui'; -// const loadingBar = useLoadingBar(); -// loadingBar.start(); + const locale = zhCN; const dateLocale = dateZhCN; diff --git a/src/assets/svg/logo.svg b/src/assets/svg/logo.svg new file mode 100644 index 0000000..ab038cd --- /dev/null +++ b/src/assets/svg/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/SvgIcon.vue b/src/components/SvgIcon.vue new file mode 100644 index 0000000..4966ad8 --- /dev/null +++ b/src/components/SvgIcon.vue @@ -0,0 +1,24 @@ + + + diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue index ba1d203..a055e4e 100644 --- a/src/layouts/BasicLayout/index.vue +++ b/src/layouts/BasicLayout/index.vue @@ -1,5 +1,5 @@ @@ -38,6 +42,7 @@ import type { MenuOption } from 'naive-ui'; import { h, ref } from 'vue'; import { useRouter } from 'vue-router'; import { Icon } from '@iconify/vue'; +import Logo from '../components/logo.vue'; const router = useRouter(); const collapsed = ref(false); @@ -46,7 +51,7 @@ function renderIcon(icon: string) { return () => h(Icon, { icon }); } const activeKey = ref(''); -const handleClickMenu = (key: string, item: MenuOption) => { +const handleClickMenu = (key: string, _item: MenuOption) => { router.push(key); }; const menuOptions: MenuOption[] = [ diff --git a/src/layouts/components/logo.vue b/src/layouts/components/logo.vue new file mode 100644 index 0000000..bd162f7 --- /dev/null +++ b/src/layouts/components/logo.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/src/plugins/assets.ts b/src/plugins/assets.ts index 724607d..0058504 100644 --- a/src/plugins/assets.ts +++ b/src/plugins/assets.ts @@ -1,6 +1,7 @@ // 全局引入的静态资源 import 'uno.css'; import '@/styles/css/index.css'; +import 'virtual:svg-icons-register'; export default function setupAssets() { // diff --git a/src/styles/css/index.css b/src/styles/css/index.css index 69b897a..1c4aecc 100644 --- a/src/styles/css/index.css +++ b/src/styles/css/index.css @@ -1,4 +1,5 @@ @import './reset.css'; +@import './transition.css'; html, body, diff --git a/src/styles/css/transition.css b/src/styles/css/transition.css new file mode 100644 index 0000000..5c77cf1 --- /dev/null +++ b/src/styles/css/transition.css @@ -0,0 +1,76 @@ +/* fade */ +.fade-enter-active, +.fade-leave-active { + transition: opacity 0.3s ease-in-out; +} +.fade-enter-from, +.fade-leave-to { + opacity: 0; +} + +/* fade-slide */ +.fade-slide-leave-active, +.fade-slide-enter-active { + transition: all 0.3s; +} +.fade-slide-enter-from { + opacity: 0; + transform: translateX(-30px); +} +.fade-slide-leave-to { + opacity: 0; + transform: translateX(30px); +} + +/* fade-bottom */ +.fade-bottom-enter-active, +.fade-bottom-leave-active { + transition: opacity 0.25s, transform 0.3s; +} +.fade-bottom-enter-from { + opacity: 0; + transform: translateY(-10%); +} +.fade-bottom-leave-to { + opacity: 0; + transform: translateY(10%); +} + +/* fade-scale */ +.fade-scale-leave-active, +.fade-scale-enter-active { + transition: all 0.28s; +} +.fade-scale-enter-from { + opacity: 0; + transform: scale(1.2); +} +.fade-scale-leave-to { + opacity: 0; + transform: scale(0.8); +} + +/* zoom-fade */ +.zoom-fade-enter-active, +.zoom-fade-leave-active { + transition: transform 0.2s, opacity 0.3s ease-out; +} +.zoom-fade-enter-from { + opacity: 0; + transform: scale(0.92); +} +.zoom-fade-leave-to { + opacity: 0; + transform: scale(1.06); +} + +/* zoom-out */ +.zoom-out-enter-active, +.zoom-out-leave-active { + transition: opacity 0.1s ease-in-out, transform 0.15s ease-out; +} +.zoom-out-enter-from, +.zoom-out-leave-to { + opacity: 0; + transform: scale(0); +} diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 3a4d310..e4dfab6 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -40,7 +40,7 @@ import { FormInst } from 'naive-ui'; import { useRouter } from 'vue-router'; import { ref } from 'vue'; import { Icon } from '@iconify/vue'; -// import IconParkAdProduct from '~icons/icon-park/ad-product'; + const router = useRouter(); const swiperList = ref([ 'https://images.unsplash.com/photo-1659991689791-db84493f8544?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80',