rjl
41f7ba7b8a
- 调整倒计时音效触发时机为剩余5秒并添加新音频文件 - 为SvgIcon组件增加size属性以支持自定义图标尺寸 - 优化ActionButton组件的动画效果和视觉反馈 - 修复游戏页面组件卸载时未停止计时器的问题 - 重构音频控制器，改进音频预加载和播放逻辑 - 优化团队选择页面的卷轴动画和布局跳转逻辑 - 改进小组选择页面的视觉样式和响应式布局 - 增强CompetitionLayout组件的标题动画和内容显示逻辑
60 lines
1.5 KiB
Vue
60 lines
1.5 KiB
Vue
<script setup lang="ts">
|
||
import { Icon } from '@iconify/vue'
|
||
import { computed, useAttrs } from 'vue'
|
||
|
||
defineOptions({ name: 'SvgIcon', inheritAttrs: false })
|
||
|
||
const props = defineProps<Props>()
|
||
|
||
/**
|
||
* 属性
|
||
*
|
||
* - 支持 iconify 和本地 svg 图标
|
||
* - 如果同时传递了 icon 和 localIcon，将优先渲染 localIcon
|
||
*/
|
||
interface Props {
|
||
/** Iconify 图标名称 */
|
||
icon?: string
|
||
/** 本地 svg 图标名称 */
|
||
localIcon?: string
|
||
/** 图标大小 */
|
||
size?: string | number
|
||
}
|
||
|
||
const attrs = useAttrs()
|
||
|
||
const bindAttrs = computed<{ class: string, style: string }>(() => ({
|
||
class: (attrs.class as string) || '',
|
||
style: (attrs.style as string) || '',
|
||
}))
|
||
|
||
// 本地 svg 图标 id 格式：#icon-local-{icon}
|
||
const symbolId = computed(() => {
|
||
const { VITE_ICON_LOCAL_PREFIX: prefix } = import.meta.env // icon-local
|
||
|
||
const defaultLocalIcon = 'no-icon'
|
||
|
||
const icon = props.localIcon || defaultLocalIcon
|
||
|
||
return `#${prefix}-${icon}`
|
||
})
|
||
|
||
/** 如果传递了 localIcon，则优先渲染 localIcon */
|
||
const renderLocalIcon = computed(() => props.localIcon || !props.icon)
|
||
</script>
|
||
|
||
<template>
|
||
<!-- 渲染本地 svg 图标 -->
|
||
<template v-if="renderLocalIcon">
|
||
<svg aria-hidden="true" :width="size || '1em'" :height="size || '1em'" v-bind="bindAttrs">
|
||
<use :xlink:href="symbolId" fill="currentColor" />
|
||
</svg>
|
||
</template>
|
||
<template v-else>
|
||
<!-- 渲染 iconify 图标 -->
|
||
<Icon v-if="icon" :icon="icon" :width="size" :height="size" v-bind="bindAttrs" />
|
||
</template>
|
||
</template>
|
||
|
||
<style scoped></style>
|