blackteay/nova-admin
1
0
Fork 0
mirror of https://github.com/chansee97/nova-admin.git synced 2025-04-05 19:41:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(projects): 增加svg图标支持

Browse Source
This commit is contained in:
‘chen.home’ 2022-08-10 22:53:18 +08:00
parent 42bd20ae66
commit a9a9358c67
15 changed files with 153 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.js
View File

@ -31,7 +31,7 @@ module.exports = {
// TSESLint docs https://typescript-eslint.io/rules/ // TSESLint docs https://typescript-eslint.io/rules/
'no-var': 'error', // 禁止使用var 'no-var': 'error', // 禁止使用var
'no-unused-vars': 'off', // 允许声明不使用的值 'no-unused-vars': 'off', // 允许声明不使用的值
'no-console': 'warn', // 禁止出现console 'no-console': 'off', // 允许出现console
'no-debugger': 'off', // 关闭debugger警告 'no-debugger': 'off', // 关闭debugger警告
'vue/multi-word-component-names': 0, // 关闭文件名多单词 'vue/multi-word-component-names': 0, // 关闭文件名多单词
// 'import/no-unresolved': ['error', { ignore: ['~icons/*'] }], // 'import/no-unresolved': ['error', { ignore: ['~icons/*'] }],

2
README.md
View File

@ -1,5 +1,5 @@
<div align="center"> <div align="center">
<img src="./public/favicon.svg"/> <img src="./public/logo.svg"/>
<h1>Ench Admin</h1> <h1>Ench Admin</h1>
</div> </div>

10
build/plugins/unplugin.ts
View File

@ -2,6 +2,8 @@ import Components from 'unplugin-vue-components/vite';
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'; import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
import Icons from 'unplugin-icons/vite'; import Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver'; 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 [ export default [
Components({ Components({
@ -11,4 +13,12 @@ export default [
Icons({ Icons({
/* options */ /* options */
}), }),
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]',
inject: 'body-last',
customDomId: '__svg__icons__dom__',
}),
]; ];

2
index.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= title %></title> <title><%= title %></title>
</head> </head>

3
package.json
View File

@ -32,7 +32,7 @@
"devDependencies": { "devDependencies": {
"@commitlint/cli": "^17.0.3", "@commitlint/cli": "^17.0.3",
"@commitlint/config-conventional": "^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", "@iconify/vue": "^3.2.1",
"@types/mockjs": "^1.0.6", "@types/mockjs": "^1.0.6",
"@types/node": "^18.6.5", "@types/node": "^18.6.5",
@ -66,6 +66,7 @@
"vite-plugin-compression": "^0.5.1", "vite-plugin-compression": "^0.5.1",
"vite-plugin-html": "^3.2.0", "vite-plugin-html": "^3.2.0",
"vite-plugin-mock": "^2.9.6", "vite-plugin-mock": "^2.9.6",
"vite-plugin-svg-icons": "^2.0.1",
"vue-tsc": "^0.38.4" "vue-tsc": "^0.38.4"
} }
} }

0
public/favicon.svg → public/logo.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

4
src/App.vue
View File

@ -2,9 +2,7 @@
// import { darkTheme } from 'naive-ui'; // import { darkTheme } from 'naive-ui';
import { zhCN, dateZhCN, GlobalThemeOverrides } from 'naive-ui'; import { zhCN, dateZhCN, GlobalThemeOverrides } from 'naive-ui';
import json from './theme.json'; import json from './theme.json';
// import { useLoadingBar } from 'naive-ui';
// const loadingBar = useLoadingBar();
// loadingBar.start();
const locale = zhCN; const locale = zhCN;
const dateLocale = dateZhCN; const dateLocale = dateZhCN;

1
src/assets/svg/logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

24
src/components/SvgIcon.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<svg aria-hidden="true">
<use :xlink:href="symbolId" :fill="color" />
</svg>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
const props = defineProps({
prefix: {
type: String,
default: 'icon',
},
name: {
type: String,
required: true,
},
color: {
type: String,
default: '#333',
},
});
const symbolId = computed(() => `#${props.prefix}-${props.name}`);
</script>

19
src/layouts/BasicLayout/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<n-layout has-sider wh-full> <n-layout has-sider class="wh-full">
<n-layout-sider <n-layout-sider
bordered bordered
show-trigger show-trigger
@ -9,7 +9,7 @@
@collapse="collapsed = true" @collapse="collapsed = true"
@expand="collapsed = false" @expand="collapsed = false"
> >
<div h-60px text-4xl flex-center>Logo</div> <Logo :collapsed="collapsed" />
<n-menu <n-menu
:value="activeKey" :value="activeKey"
:collapsed="collapsed" :collapsed="collapsed"
@ -21,14 +21,18 @@
/> />
</n-layout-sider> </n-layout-sider>
<n-layout h-full bg-hex-f3f4f6 :native-scrollbar="false"> <n-layout class="h-full bg-hex-f3f4f6" :native-scrollbar="false">
<n-layout-header bordered text-2xl h-60px flex-y-center>layout-page</n-layout-header> <n-layout-header bordered class="text-2xl h-60px flex-y-center">
<div p-16px> <div class="hover:bg-hex-F3F4F6 h-full px-2 flex-center cursor-pointer">
<Icon icon="icon-park-outline:mindmap-list" />
</div>
</n-layout-header>
<div class="p-16px">
<n-layout-content> <n-layout-content>
<router-view></router-view> <router-view></router-view>
</n-layout-content> </n-layout-content>
</div> </div>
<n-layout-footer position="absolute" text-center op-80 bg-transparent>Ench admin</n-layout-footer> <n-layout-footer position="absolute" class="text-center op-80 bg-transparent">Ench admin</n-layout-footer>
</n-layout> </n-layout>
</n-layout> </n-layout>
</template> </template>
@ -38,6 +42,7 @@ import type { MenuOption } from 'naive-ui';
import { h, ref } from 'vue'; import { h, ref } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { Icon } from '@iconify/vue'; import { Icon } from '@iconify/vue';
import Logo from '../components/logo.vue';
const router = useRouter(); const router = useRouter();
const collapsed = ref(false); const collapsed = ref(false);
@ -46,7 +51,7 @@ function renderIcon(icon: string) {
return () => h(Icon, { icon }); return () => h(Icon, { icon });
} }
const activeKey = ref(''); const activeKey = ref('');
const handleClickMenu = (key: string, item: MenuOption) => { const handleClickMenu = (key: string, _item: MenuOption) => {
router.push(key); router.push(key);
}; };
const menuOptions: MenuOption[] = [ const menuOptions: MenuOption[] = [

21
src/layouts/components/logo.vue Normal file
View File

@ -0,0 +1,21 @@
<template>
<div class="h-60px text-2xl flex-center">
<SvgIcon name="logo" class="w-9 h-9" />
<span v-show="!props.collapsed" class="font-bold mx-5">{{ props.title }}</span>
</div>
</template>
<script setup lang="ts">
const props = defineProps({
title: {
type: String,
default: 'Logo2',
},
collapsed: {
type: Boolean,
default: false,
},
});
</script>
<style scoped></style>

1
src/plugins/assets.ts
View File

@ -1,6 +1,7 @@
// 全局引入的静态资源 // 全局引入的静态资源
import 'uno.css'; import 'uno.css';
import '@/styles/css/index.css'; import '@/styles/css/index.css';
import 'virtual:svg-icons-register';
export default function setupAssets() { export default function setupAssets() {
// //

1
src/styles/css/index.css
View File

@ -1,4 +1,5 @@
@import './reset.css'; @import './reset.css';
@import './transition.css';
html, html,
body, body,

76
src/styles/css/transition.css Normal file
View File

@ -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);
}

2
src/views/login/index.vue
View File

@ -40,7 +40,7 @@ import { FormInst } from 'naive-ui';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { ref } from 'vue'; import { ref } from 'vue';
import { Icon } from '@iconify/vue'; import { Icon } from '@iconify/vue';
// import IconParkAdProduct from '~icons/icon-park/ad-product';
const router = useRouter(); const router = useRouter();
const swiperList = ref([ 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', 'https://images.unsplash.com/photo-1659991689791-db84493f8544?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80',