mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-06-09 11:39:31 +08:00
feat: add few icons
This commit is contained in:
@@ -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,
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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' },
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user