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

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

View File

@ -1,71 +0,0 @@
<template>
<div
class="relative flex-center h-30px pl-14px border-1px border-[#e5e7eb] dark:border-[#ffffff3d] rounded-2px cursor-pointer transition-colors duration-300 ease-in-out"
:class="[closable ? 'pr-6px' : 'pr-14px']"
:style="buttonStyle"
@mouseenter="setTrue"
@mouseleave="setFalse"
>
<span class="whitespace-nowrap">
<slot></slot>
</span>
<div v-if="closable" class="pl-10px">
<icon-close :is-active="isIconActive" :primary-color="primaryColor" @click="handleClose" />
</div>
</div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { useBoolean } from '@/hooks';
import { addColorAlpha } from '@/utils';
import IconClose from '../IconClose/index.vue';
interface Props {
/** 激活状态 */
isActive?: boolean;
/** 主题颜色 */
primaryColor?: string;
/** 是否显示关闭图标 */
closable?: boolean;
/** 暗黑模式 */
darkMode?: boolean;
}
interface Emits {
/** 点击关闭图标 */
(e: 'close'): void;
}
const props = withDefaults(defineProps<Props>(), {
isActive: false,
primaryColor: '#1890ff',
closable: true,
darkMode: false
});
const emit = defineEmits<Emits>();
const { bool: isHover, setTrue, setFalse } = useBoolean();
const isIconActive = computed(() => props.isActive || isHover.value);
const buttonStyle = computed(() => {
const style: Record<string, string> = {};
if (isIconActive.value) {
style.color = props.primaryColor;
style.borderColor = addColorAlpha(props.primaryColor, 0.3);
if (props.isActive) {
const alpha = props.darkMode ? 0.15 : 0.1;
style.backgroundColor = addColorAlpha(props.primaryColor, alpha);
}
}
return style;
});
function handleClose(e: MouseEvent) {
e.stopPropagation();
emit('close');
}
</script>
<style scoped></style>

View File

@ -1,79 +0,0 @@
<template>
<svg>
<defs>
<symbol id="geometry-left" viewBox="0 0 214 36">
<path d="M17 0h197v36H0v-2c4.5 0 9-3.5 9-8V8c0-4.5 3.5-8 8-8z"></path>
</symbol>
<symbol id="geometry-right" viewBox="0 0 214 36">
<use xlink:href="#geometry-left"></use>
</symbol>
<clipPath>
<rect width="100%" height="100%" x="0"></rect>
</clipPath>
</defs>
<svg width="52%" height="100%">
<use
xlink:href="#geometry-left"
width="214"
height="36"
:fill="fill"
class="transition-fill duration-300 ease-in-out"
></use>
</svg>
<g transform="scale(-1, 1)">
<svg width="52%" height="100%" x="-100%" y="0">
<use
xlink:href="#geometry-right"
width="214"
height="36"
:fill="fill"
class="transition-fill duration-300 ease-in-out"
></use>
</svg>
</g>
</svg>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { mixColor } from '@/utils';
interface Props {
/** 激活状态 */
isActive?: boolean;
/** 鼠标悬浮状态 */
isHover?: boolean;
/** 主题颜色 */
primaryColor?: string;
/** 暗黑模式 */
darkMode?: boolean;
}
/** 填充的背景颜色: [默认颜色, 暗黑主题颜色] */
type FillColor = [string, string];
const props = withDefaults(defineProps<Props>(), {
isActive: false,
isHover: false,
primaryColor: '#409EFF',
darkMode: false
});
const defaultColor: FillColor = ['#fff', '#18181c'];
const hoverColor: FillColor = ['#dee1e6', '#3f3c37'];
const mixColors: FillColor = ['#ffffff', '#000000'];
const fill = computed(() => {
const index = Number(props.darkMode);
let color = defaultColor[index];
if (props.isHover) {
color = hoverColor[index];
}
if (props.isActive) {
const alpha = props.darkMode ? 0.1 : 0.15;
color = mixColor(mixColors[index], props.primaryColor, alpha);
}
return color;
});
</script>
<style scoped></style>

View File

@ -1,3 +0,0 @@
import SvgRadiusBg from './SvgRadiusBg.vue';
export { SvgRadiusBg };

View File

@ -1,65 +0,0 @@
<template>
<div
class="relative flex-y-center h-34px px-24px -mr-18px cursor-pointer"
:class="{ 'z-10': isActive, 'z-9': isHover }"
@mouseenter="setTrue"
@mouseleave="setFalse"
>
<div class="absolute-lb wh-full overflow-hidden">
<svg-radius-bg
class="wh-full"
:is-active="isActive"
:is-hover="isHover"
:dark-mode="darkMode"
:primary-color="primaryColor"
/>
</div>
<span class="relative whitespace-nowrap z-2">
<slot></slot>
</span>
<div v-if="closable" class="pl-18px">
<icon-close :is-active="isActive" :primary-color="primaryColor" @click="handleClose" />
</div>
<n-divider v-if="!isHover && !isActive" :vertical="true" class="absolute right-0 !bg-[#a4abb8] z-2" />
</div>
</template>
<script setup lang="ts">
import { useBoolean } from '@/hooks';
import IconClose from '../IconClose/index.vue';
import { SvgRadiusBg } from './components';
interface Props {
/** 激活状态 */
isActive?: boolean;
/** 主题颜色 */
primaryColor?: string;
/** 是否显示关闭图标 */
closable?: boolean;
/** 暗黑模式 */
darkMode?: boolean;
}
interface Emits {
/** 点击关闭图标 */
(e: 'close'): void;
}
withDefaults(defineProps<Props>(), {
isActive: false,
primaryColor: '#409EFF',
closable: true,
darkMode: false,
isLast: false
});
const emit = defineEmits<Emits>();
const { bool: isHover, setTrue, setFalse } = useBoolean();
function handleClose(e: MouseEvent) {
e.stopPropagation();
emit('close');
}
</script>
<style scoped></style>

View File

@ -3,7 +3,7 @@
</template>
<script setup lang="ts">
import WebSiteLink from '../WebSiteLink/index.vue';
import WebSiteLink from './WebSiteLink.vue';
interface Props {
/** github链接 */

View File

@ -1,35 +0,0 @@
<template>
<div
class="relative flex-center w-18px h-18px text-14px"
:style="{ color: isActive ? primaryColor : defaultColor }"
@mouseenter="setTrue"
@mouseleave="setFalse"
>
<transition name="fade">
<icon-mdi:close-circle v-if="isHover" key="hover" class="absolute" />
<icon-mdi:close v-else key="unhover" class="absolute" />
</transition>
</div>
</template>
<script lang="ts" setup>
import { useBoolean } from '@/hooks';
interface Props {
/** 激活状态 */
isActive?: boolean;
/** 主题颜色 */
primaryColor?: string;
/** 默认颜色 */
defaultColor?: string;
}
withDefaults(defineProps<Props>(), {
isPrimary: false,
primaryColor: '#1890ff',
defaultColor: '#9ca3af'
});
const { bool: isHover, setTrue, setFalse } = useBoolean();
</script>
<style scoped></style>

View File

@ -1,32 +0,0 @@
<template>
<svg class="svg-icon" aria-hidden="true">
<use :xlink:href="symbolId" :fill="fill" />
</svg>
</template>
<script setup lang="ts">
import { computed } from 'vue';
interface Props {
/** icon前缀 */
prefix?: string;
/** icon 名称 */
name: string;
/** 填充颜色 */
color?: string;
}
const props = withDefaults(defineProps<Props>(), {
prefix: 'icon',
name: '',
color: ''
});
const fill = computed(() => props.color || 'currentColor');
const symbolId = computed(() => `#${props.prefix}-${props.name}`);
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
overflow: hidden;
}
</style>

View File

@ -1,10 +1,8 @@
import BetterScroll from './BetterScroll/index.vue';
import ButtonTab from './ButtonTab/index.vue';
import ChromeTab from './ChromeTab/index.vue';
import CountTo from './CountTo/index.vue';
import ImageVerify from './ImageVerify/index.vue';
import WebSiteLink from './WebSiteLink/index.vue';
import GithubLink from './GithubLink/index.vue';
import IconSelect from './IconSelect/index.vue';
import BetterScroll from './BetterScroll.vue';
import CountTo from './CountTo.vue';
import ImageVerify from './ImageVerify.vue';
import WebSiteLink from './WebSiteLink.vue';
import GithubLink from './GithubLink.vue';
import IconSelect from './IconSelect.vue';
export { BetterScroll, ButtonTab, ChromeTab, CountTo, ImageVerify, WebSiteLink, GithubLink, IconSelect };
export { BetterScroll, CountTo, ImageVerify, WebSiteLink, GithubLink, IconSelect };