mirror of
https://github.com/m-xlsea/ruoyi-plus-soybean.git
synced 2025-09-24 07:49:47 +08:00
feat(projects): 引入soybean-admin-tab、去除vite-plugin-svg-icons,用unplugin-icons实现自定义svg的iconify写法、代码优化
This commit is contained in:
@ -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>
|
@ -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>
|
@ -1,3 +0,0 @@
|
||||
import SvgRadiusBg from './SvgRadiusBg.vue';
|
||||
|
||||
export { SvgRadiusBg };
|
@ -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>
|
@ -3,7 +3,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import WebSiteLink from '../WebSiteLink/index.vue';
|
||||
import WebSiteLink from './WebSiteLink.vue';
|
||||
|
||||
interface Props {
|
||||
/** github链接 */
|
@ -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>
|
@ -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>
|
@ -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 };
|
||||
|
Reference in New Issue
Block a user