mirror of
https://github.com/chansee97/nova-admin.git
synced 2025-04-05 19:41:59 +08:00
chore(projects): 增加svg图标支持
This commit is contained in:
‘chen.home’
parent
42bd20ae66
commit
a9a9358c67
@ -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/*'] }],
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div align="center">
|
||||
<img src="./public/favicon.svg"/>
|
||||
<img src="./public/logo.svg"/>
|
||||
<h1>Ench Admin</h1>
|
||||
</div>
|
||||
|
||||
|
||||
@ -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__',
|
||||
}),
|
||||
];
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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" />
|
||||
<title><%= title %></title>
|
||||
</head>
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
@ -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;
|
||||
|
||||
|
||||
1
src/assets/svg/logo.svg
Normal file
1
src/assets/svg/logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
24
src/components/SvgIcon.vue
Normal file
24
src/components/SvgIcon.vue
Normal 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>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-layout has-sider wh-full>
|
||||
<n-layout has-sider class="wh-full">
|
||||
<n-layout-sider
|
||||
bordered
|
||||
show-trigger
|
||||
@ -9,7 +9,7 @@
|
||||
@collapse="collapsed = true"
|
||||
@expand="collapsed = false"
|
||||
>
|
||||
<div h-60px text-4xl flex-center>Logo</div>
|
||||
<Logo :collapsed="collapsed" />
|
||||
<n-menu
|
||||
:value="activeKey"
|
||||
:collapsed="collapsed"
|
||||
@ -21,14 +21,18 @@
|
||||
/>
|
||||
</n-layout-sider>
|
||||
|
||||
<n-layout h-full bg-hex-f3f4f6 :native-scrollbar="false">
|
||||
<n-layout-header bordered text-2xl h-60px flex-y-center>layout-page</n-layout-header>
|
||||
<div p-16px>
|
||||
<n-layout class="h-full bg-hex-f3f4f6" :native-scrollbar="false">
|
||||
<n-layout-header bordered class="text-2xl h-60px flex-y-center">
|
||||
<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>
|
||||
<router-view></router-view>
|
||||
</n-layout-content>
|
||||
</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>
|
||||
</template>
|
||||
@ -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[] = [
|
||||
|
||||
21
src/layouts/components/logo.vue
Normal file
21
src/layouts/components/logo.vue
Normal 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,6 +1,7 @@
|
||||
// 全局引入的静态资源
|
||||
import 'uno.css';
|
||||
import '@/styles/css/index.css';
|
||||
import 'virtual:svg-icons-register';
|
||||
|
||||
export default function setupAssets() {
|
||||
//
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import './reset.css';
|
||||
@import './transition.css';
|
||||
|
||||
html,
|
||||
body,
|
||||
|
||||
76
src/styles/css/transition.css
Normal file
76
src/styles/css/transition.css
Normal 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);
|
||||
}
|
||||
@ -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',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user