主要变更: 1. 重构API目录结构,采用模块化设计,适配5.x后端接口规范 2. 优化布局组件,提升用户界面体验 3. 增强国际化支持,完善多语言配置 4. 新增权限控制功能,支持前端路由权限管理 5. 优化认证流程,支持JWT认证机制 6. 新增中间件和插件,提升系统扩展性 7. 优化状态管理,采用更清晰的模块化设计 8. 新增搜索框、广告等组件,丰富页面功能 9. 更改包管理工具从npm到pnpm,提升依赖管理效率 10. 完善配置系统,支持多环境配置 适配5.x后端特性: - 采用新的API接口规范 - 支持JWT认证机制 - 适配后端权限控制体系 - 支持后端国际化接口 - 优化数据交互方式
50 lines
1.2 KiB
Vue
50 lines
1.2 KiB
Vue
<template>
|
|
<i class="iconfont-sys" v-if="iconType === 'unicode'" v-html="icon"></i>
|
|
<i :class="`iconfont-sys ${icon}`" v-else-if="iconType === 'className'"></i>
|
|
<ElIcon class="m-icon" v-else-if="typeof icon === 'string'">
|
|
<Icon :icon="icon" :width="width" :height="height" :color="color"></Icon>
|
|
</ElIcon>
|
|
<ElIcon class="m-icon" v-else-if="typeof icon === 'object'"
|
|
><component :is="icon" :width="width" :height="height" :color="color"></component
|
|
></ElIcon>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Icon } from '@iconify/vue'
|
|
import type { VNode } from 'vue'
|
|
import { ElIcon } from 'element-plus'
|
|
|
|
const props = defineProps({
|
|
icon: {
|
|
type: [String, Object] as PropType<string | VNode>
|
|
},
|
|
width: {
|
|
type: [String, Number],
|
|
default: '1em'
|
|
},
|
|
height: {
|
|
type: [String, Number],
|
|
default: '1em'
|
|
},
|
|
color: {
|
|
type: String,
|
|
default: undefined
|
|
}
|
|
})
|
|
|
|
const iconType = computed(() => {
|
|
if (props.icon?.toString().startsWith('iconsys-')) {
|
|
return 'className'
|
|
} else if (props.icon?.toString().includes(':')) {
|
|
return 'iconify'
|
|
}
|
|
return 'unicode'
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.m-icon {
|
|
width: auto !important;
|
|
}
|
|
</style>
|