xinyin025/soybean-admin
1
0
Fork 0
mirror of https://github.com/soybeanjs/soybean-admin.git synced 2025-12-26 17:55:58 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(projects): 引入soybean-admin-tab、去除vite-plugin-svg-icons，用unplugin-icons实现自定义svg的iconify写法、代码优化

Browse Source
This commit is contained in:
Soybean
2022-03-05 01:55:21 +08:00
parent b298af1ddb
commit a1a57a185c
93 changed files with 266 additions and 6700 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/dashboard/workbench/components/WorkbenchHeader/index.vue
View File

@@ -2,7 +2,7 @@
<n-card :bordered="false" class="rounded-16px shadow-sm">
<div class="flex-y-center justify-between">
<div class="flex-y-center">
<img src="@/assets/svg/common/avatar01.svg" alt="" class="w-70px h-70px" />
<icon-custom-avatar class="text-70px" />
<div class="pl-12px">
<h3 class="text-18px font-semibold">早安，{{ auth.userInfo.userName }}, 今天又是充满活力的一天！</h3>
<p class="leading-30px text-[#999]">今日多云转晴，20℃ - 25℃！</p>

7
src/views/dashboard/workbench/components/WorkbenchMain/index.vue
View File

@@ -19,9 +19,7 @@
<n-list>
<n-list-item v-for="item in activity" :key="item.id">
<template #prefix>
<div class="w-48px h-48px">
<img src="@/assets/svg/common/avatar01.svg" alt="" class="wh-full" />
</div>
<icon-custom-avatar class="text-48px" />
</template>
<n-thing :title="item.content" :description="item.time" />
</n-list-item>
@@ -39,7 +37,7 @@
</n-grid>
</n-card>
<n-card title="创意" :bordered="false" size="small" class="shadow-sm rounded-16px">
<svg-banner class="text-primary" />
<icon-custom-banner class="text-400px text-primary" />
</n-card>
</n-space>
</n-grid-item>
@@ -47,7 +45,6 @@
</template>
<script setup lang="ts">
import { SvgBanner } from '@/components';
import { TechnologyCard, ShortcutsCard } from './components';
interface Technology {

10
src/views/plugin/icon/icons.ts
View File

@@ -30,3 +30,13 @@ export const icons = [
'ic:baseline-filter-9',
'ic:baseline-filter-9-plus'
];
// const assetsSvg = import.meta.glob('../../../assets/svg/*.svg');
// const PATH_PREFFIX = '../../../assets/svg/';
// const SUFFIX = '.svg';
// const CUSTOM_ICONIFY_PREFFIX = 'custom-';
// export const svgIcons = Object.keys(assetsSvg).map(key => {
// const svgKey = key.replace(PATH_PREFFIX, '').replace(SUFFIX, '');
// return CUSTOM_ICONIFY_PREFFIX + svgKey;
// });

29
src/views/plugin/icon/index.vue
View File

@@ -10,19 +10,33 @@
</div>
<div class="mt-50px">
<h1 class="mb-20px text-18px font-500">Icon图标选择器</h1>
<icon-select v-model:value="selectVal" :icons="icons" />
<icon-select v-model:value="selectValue" :icons="icons" />
</div>
<template #footer>
<web-site-link label="iconify地址：" link="https://icones.js.org/" class="mt-10px" />
</template>
</n-card>
<n-card title="SvgIcon 示例" class="mt-10px shadow-sm rounded-16px">
<div class="pb-12px text-16px">在src/assets下的svg文件，通过在template里面以 icon-custom-{文件名} 渲染</div>
<div class="grid grid-cols-10">
<template v-for="item in svgIcons" :key="item">
<div class="mt-5px flex-x-center">
<svg-icon :name="item" class="text-30px" />
</div>
</template>
<div class="mt-5px flex-x-center">
<icon-custom-activity class="text-30px" />
</div>
<div class="mt-5px flex-x-center">
<icon-custom-at-sign class="text-30px text-primary" />
</div>
<div class="mt-5px flex-x-center">
<icon-custom-cast class="text-18px text-info" />
</div>
<div class="mt-5px flex-x-center">
<icon-custom-chrome class="text-48px text-success" />
</div>
<div class="mt-5px flex-x-center">
<icon-custom-copy class="text-30px text-error" />
</div>
<div class="mt-5px flex-x-center">
<icon-custom-wind class="text-30px text-warning" />
</div>
</div>
</n-card>
</div>
@@ -33,8 +47,7 @@ import { ref } from 'vue';
import { Icon } from '@iconify/vue';
import { IconSelect, WebSiteLink } from '@/components';
import { icons } from './icons';
import { svgIcons } from './svg-icons';
const selectVal = ref('');
const selectValue = ref('');
</script>
<style scoped></style>

4
src/views/plugin/icon/svg-icons.ts
View File

@@ -1,4 +0,0 @@
const importSvgIcons = import.meta.glob('../../../assets/svg/**/*.svg');
export const svgIcons = Object.keys(importSvgIcons).map(k => {
return k.split('/svg/')[1].replaceAll('/', '-').replace('.svg', '');
});

21
src/views/system-view/components/ExceptionBase.vue
View File

@@ -1,7 +1,9 @@
<template>
<div class="flex-col-center wh-full">
<div class="w-400px h-400px text-primary">
<component :is="active" />
<div class="text-400px text-primary">
<icon-custom-no-permission v-if="type === '403'" />
<icon-custom-not-found v-if="type === '404'" />
<icon-custom-service-error v-if="type === '500'" />
</div>
<router-link :to="{ name: routeHomePath }">
<n-button type="primary">回到首页</n-button>
@@ -10,9 +12,6 @@
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import type { Component } from 'vue';
import { SvgNoPermission, SvgNotFound, SvgServiceError } from '@/components';
import { routeName } from '@/router';
type ExceptionType = '403' | '404' | '500';
@@ -22,18 +21,8 @@ interface Props {
type: ExceptionType;
}
type ExceptionComponent = Record<ExceptionType, Component>;
const props = defineProps<Props>();
defineProps<Props>();
const routeHomePath = routeName('root');
const exceptions: ExceptionComponent = {
'403': SvgNoPermission,
'404': SvgNotFound,
'500': SvgServiceError
};
const active = computed(() => exceptions[props.type]);
</script>
<style scoped></style>

2
src/views/system-view/login/index.vue
View File

@@ -9,7 +9,7 @@
<div class="w-360px">
<header class="flex-y-center justify-between">
<div class="w-70px h-70px rounded-35px overflow-hidden">
<system-logo class="wh-full text-primary" :fill="true" />
<system-logo class="text-70px text-primary" :fill="true" />
</div>
<n-gradient-text type="primary" :size="28">{{ title }}</n-gradient-text>
</header>