feat: add few icons

This commit is contained in:
tim
2025-09-06 11:25:44 +08:00
parent da47d37dc5
commit 6ad7e951fe
27 changed files with 117 additions and 123 deletions

View File

@@ -19,13 +19,7 @@
class="option-icon"
:alt="label.name"
/>
<component
v-else-if="isIconComponent(label.icon)"
:is="label.icon"
class="option-icon"
:size="16"
/>
<i v-else :class="['option-icon', label.icon]"></i>
<component v-else :is="label.icon" class="option-icon" :size="16" />
</template>
<span>{{ label.name }}</span>
</div>
@@ -44,13 +38,7 @@
class="option-icon"
:alt="selectedLabels[0].name"
/>
<component
v-else-if="isIconComponent(selectedLabels[0].icon)"
:is="selectedLabels[0].icon"
class="option-icon"
:size="16"
/>
<i v-else :class="['option-icon', selectedLabels[0].icon]"></i>
<component v-else :is="selectedLabels[0].icon" class="option-icon" :size="16" />
</template>
<span>{{ selectedLabels[0].name }}</span>
</div>
@@ -87,13 +75,7 @@
class="option-icon"
:alt="o.name"
/>
<component
v-else-if="isIconComponent(o.icon)"
:is="o.icon"
class="option-icon"
:size="16"
/>
<i v-else :class="['option-icon', o.icon]"></i>
<component v-else :is="o.icon" class="option-icon" :size="16" />
</template>
<span>{{ o.name }}</span>
</slot>
@@ -129,13 +111,7 @@
class="option-icon"
:alt="o.name"
/>
<component
v-else-if="isIconComponent(o.icon)"
:is="o.icon"
class="option-icon"
:size="16"
/>
<i v-else :class="['option-icon', o.icon]"></i>
<component v-else :is="o.icon" class="option-icon" :size="16" />
</template>
<span>{{ o.name }}</span>
</slot>
@@ -273,10 +249,6 @@ export default {
return /^https?:\/\//.test(icon) || icon.startsWith('/')
}
const isIconComponent = (icon) => {
return typeof icon === 'string' && !icon.includes(' ')
}
expose({ toggle, close })
return {
@@ -291,7 +263,6 @@ export default {
isSelected,
loading,
isImageIcon,
isIconComponent,
setSearch,
isMobile,
}

View File

@@ -2,7 +2,7 @@
<div class="invite-code-activity">
<div class="invite-code-description">
<div class="invite-code-description-title">
<info />
<info-icon />
<span class="invite-code-description-title-text">邀请规则说明</span>
</div>
<div class="invite-code-description-content">

View File

@@ -10,7 +10,7 @@
<span class="prize-row-title">奖品图片</span>
<label class="prize-container">
<BaseImage v-if="data.prizeIcon" :src="data.prizeIcon" class="prize-preview" alt="prize" />
<i v-else class="fa-solid fa-image default-prize-icon"></i>
<image-files v-else class="default-prize-icon" />
<div class="prize-overlay">上传奖品图片</div>
<input type="file" class="prize-input" accept="image/*" @change="onPrizeIconChange" />
</label>

View File

@@ -34,7 +34,7 @@
to="/about"
@click="handleItemClick"
>
<info class="menu-item-icon" />
<info-icon class="menu-item-icon" />
<span class="menu-item-text">关于</span>
</NuxtLink>
<NuxtLink

View File

@@ -6,7 +6,7 @@
<div class="message-bottom-container">
<div class="message-submit" :class="{ disabled: isDisabled }" @click="submit">
<template v-if="!loading"> 发送 </template>
<template v-else> <i class="fa-solid fa-spinner fa-spin"></i> 发送中... </template>
<template v-else> <loading-four /> 发送中... </template>
</div>
</div>
</div>

View File

@@ -3,20 +3,10 @@
<iframe :src="iframeSrc" frameborder="0" ref="iframeRef" @load="injectBaseTag"></iframe>
<div class="float-actions">
<i
class="fas fa-chevron-down"
v-if="floatHeight !== MINI_HEIGHT"
title="收起至 100px"
@click="collapseToMini"
></i>
<i
class="fas fa-chevron-up"
v-if="floatHeight !== DEFAULT_HEIGHT"
title="回弹至 60vh"
@click="reboundToDefault"
></i>
<i class="fas fa-expand" title="在页面中打开" @click="expand"></i>
<i class="fas fa-times" title="关闭" @click="close"></i>
<down v-if="floatHeight !== MINI_HEIGHT" title="收起至 100px" @click="collapseToMini" />
<up v-if="floatHeight !== DEFAULT_HEIGHT" title="回弹至 60vh" @click="reboundToDefault" />
<expand-up title="在页面中打开" @click="expand" />
<close-icon title="关闭" @click="close" />
</div>
</div>
</template>

View File

@@ -2,7 +2,7 @@
<div class="milk-tea-activity">
<div class="milk-tea-description">
<div class="milk-tea-description-title">
<i class="fas fa-info-circle"></i>
<info-icon />
<span class="milk-tea-description-title-text">升级规则说明</span>
</div>
<div class="milk-tea-description-content">
@@ -29,7 +29,7 @@
/>
</div>
<div v-else class="user-level">
<div class="user-level-text"><i class="fas fa-user-circle"></i> 请登录查看自身等级</div>
<div class="user-level-text"><user-icon /> 请登录查看自身等级</div>
</div>
</div>
<div

View File

@@ -10,13 +10,13 @@
:src="lottery.prizeIcon"
alt="prize"
/>
<i v-else class="fa-solid fa-gift default-prize-icon"></i>
<gift v-else class="default-prize-icon" />
</div>
<div class="prize-name">{{ lottery.prizeDescription }}</div>
<div class="prize-count">x {{ lottery.prizeCount }}</div>
</div>
<div class="prize-end-time prize-info-right">
<i v-if="!lotteryEnded" class="fas fa-stopwatch prize-end-time-icon"></i>
<stopwatch v-if="!lotteryEnded" class="prize-end-time-icon" />
<div v-if="!isMobile && !lotteryEnded" class="prize-end-time-title">离结束</div>
<div class="prize-end-time-value">{{ countdown }}</div>
<div v-if="!isMobile" class="join-prize-button-container-desktop">
@@ -26,7 +26,8 @@
@click="joinLottery"
>
<div class="join-prize-button-text">
参与抽奖 <i class="fas fa-coins"></i> {{ lottery.pointCost }}
参与抽奖 <paper-money-two class="join-prize-button-text-icon" />
{{ lottery.pointCost }}
</div>
</div>
<div v-else-if="hasJoined" class="join-prize-button-disabled">
@@ -43,7 +44,7 @@
@click="joinLottery"
>
<div class="join-prize-button-text">
参与抽奖 <i class="fas fa-coins"></i> {{ lottery.pointCost }}
参与抽奖 <paper-money-two class="join-prize-button-text-icon" /> {{ lottery.pointCost }}
</div>
</div>
<div v-else-if="hasJoined" class="join-prize-button-disabled">
@@ -61,7 +62,7 @@
@click="gotoUser(p.id)"
/>
<div v-if="lotteryEnded && lotteryWinners.length" class="prize-member-winner">
<i class="fas fa-medal medal-icon"></i>
<medal-one class="medal-icon"></medal-one>
<span class="prize-member-winner-name">获奖者: </span>
<BaseImage
v-for="w in lotteryWinners"

View File

@@ -34,7 +34,7 @@
<div class="poll-option-title" v-else>单选</div>
<div class="poll-left-time">
<i class="fas fa-stopwatch poll-left-time-icon"></i>
<stopwatch class="poll-left-time-icon" />
<div class="poll-left-time-title">离结束</div>
<div class="poll-left-time-value">{{ countdown }}</div>
</div>
@@ -55,9 +55,7 @@
</div>
<div class="multi-selection-container">
<div class="join-poll-button" @click="submitMultiPoll">
<i class="fas fa-check"></i> 确认投票
</div>
<div class="join-poll-button" @click="submitMultiPoll"><check /> 确认投票</div>
</div>
</template>
<template v-else>
@@ -77,9 +75,7 @@
</div>
<div class="single-selection-container">
<div class="join-poll-button" @click="submitSinglePoll">
<i class="fas fa-check"></i> 确认投票
</div>
<div class="join-poll-button" @click="submitSinglePoll"><check /> 确认投票</div>
</div>
</template>
</div>
@@ -95,22 +91,20 @@
class="poll-option-button"
@click="showPollResult = false"
>
<i class="fas fa-chevron-left"></i> 投票
<arrow-left /> 投票
</div>
<div
v-else-if="!pollEnded && !hasVoted"
class="poll-option-button"
@click="showPollResult = true"
>
<i class="fas fa-chart-bar"></i> 结果
</div>
<div v-else-if="pollEnded" class="poll-option-hint">
<i class="fas fa-stopwatch"></i> 投票已结束
<chart-histogram /> 结果
</div>
<div v-else-if="pollEnded" class="poll-option-hint"><stopwatch /> 投票已结束</div>
<div v-else class="poll-option-hint">
<div>您已投票等待结束查看结果</div>
<div class="poll-left-time">
<i class="fas fa-stopwatch poll-left-time-icon"></i>
<stopwatch class="poll-left-time-icon" />
<div class="poll-left-time-title">离结束</div>
<div class="poll-left-time-value">{{ countdown }}</div>
</div>

View File

@@ -31,9 +31,9 @@ export default {
const fetchTypes = async () => {
return [
{ id: 'NORMAL', name: '普通帖子', icon: 'fa-regular fa-file' },
{ id: 'LOTTERY', name: '抽奖帖子', icon: 'fa-solid fa-gift' },
{ id: 'POLL', name: '投票帖子', icon: 'fa-solid fa-square-poll-vertical' },
{ id: 'NORMAL', name: '普通帖子', icon: 'file-text' },
{ id: 'LOTTERY', name: '抽奖帖子', icon: 'gift' },
{ id: 'POLL', name: '投票帖子', icon: 'ranking-list' },
]
}

View File

@@ -42,7 +42,7 @@
@click="toggleReaction('LIKE')"
>
<like v-if="!userReacted('LIKE')" />
<i v-else class="fas fa-heart"></i>
<like v-else theme="filled" />
<span class="reactions-count" v-if="likeCount">{{ likeCount }}</span>
</div>
<slot></slot>

View File

@@ -13,7 +13,7 @@
>
<template #display="{ setSearch }">
<div class="search-input">
<i class="search-input-icon fas fa-search"></i>
<search-icon class="search-input-icon" />
<input
class="text-input"
v-model="keyword"
@@ -24,7 +24,7 @@
</template>
<template #option="{ option }">
<div class="search-option-item">
<i :class="['result-icon', iconMap[option.type] || 'fas fa-question']"></i>
<i :class="['result-icon', iconMap[option.type]]"></i>
<div class="result-body">
<div class="result-main" v-html="highlight(option.text)"></div>
<div v-if="option.subText" class="result-sub" v-html="highlight(option.subText)"></div>

View File

@@ -13,7 +13,7 @@
>
<template #display="{ setSearch }">
<div class="search-input">
<i class="search-input-icon fas fa-search"></i>
<search-icon class="search-input-icon" />
<input
class="text-input"
v-model="keyword"