refactor: 将 @iconify/vue 图标替换为 lucide-vue-next 本地组件
- 所有 lucide: 前缀的图标字符串替换为 lucide-vue-next 组件直接引用
- 动态图标绑定改为 <component :is> 渲染
- h(Icon, { icon: 'lucide:xxx' }) 改为 h(Xxx, { class: ... })
- app-card.vue 的 icon_url 改为 <img> 标签(实际是图片路径)
- 修复 Webhook 标识符冲突(重命名为 WebhookIcon)
- payment-channels 保留 @iconify/vue 用于品牌图标(支付宝、微信、Stripe、PayPal、USDT)
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { AlertCircle, Box, Loader2 } from 'lucide-vue-next'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
@@ -30,13 +30,13 @@ onMounted(async () => {
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<div v-if="loading" class="flex items-center justify-center py-12">
|
||||
<Icon icon="lucide:loader-2" class="size-8 animate-spin text-muted-foreground" />
|
||||
<Loader2 class="size-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<template v-else-if="app">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="size-16 rounded-xl bg-primary/10 flex items-center justify-center">
|
||||
<Icon icon="lucide:box" class="size-8 text-primary" />
|
||||
<Box class="size-8 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold">
|
||||
@@ -92,7 +92,7 @@ onMounted(async () => {
|
||||
</template>
|
||||
|
||||
<div v-else class="text-center py-12 text-muted-foreground">
|
||||
<Icon icon="lucide:alert-circle" class="size-16 mx-auto mb-4 opacity-30" />
|
||||
<AlertCircle class="size-16 mx-auto mb-4 opacity-30" />
|
||||
<p>应用不存在或无权访问</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { Box, Boxes, Loader2 } from 'lucide-vue-next'
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
import api from '@/services/api'
|
||||
@@ -50,11 +50,11 @@ function formatDate(dateStr: string) {
|
||||
<UiCard>
|
||||
<UiCardContent class="p-0">
|
||||
<div v-if="loading" class="flex items-center justify-center py-12">
|
||||
<Icon icon="lucide:loader-2" class="size-8 animate-spin text-muted-foreground" />
|
||||
<Loader2 class="size-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="apps.length === 0" class="text-center py-12 text-muted-foreground">
|
||||
<Icon icon="lucide:boxes" class="size-16 mx-auto mb-4 opacity-30" />
|
||||
<Boxes class="size-16 mx-auto mb-4 opacity-30" />
|
||||
<p>暂无授权应用</p>
|
||||
</div>
|
||||
|
||||
@@ -66,7 +66,7 @@ function formatDate(dateStr: string) {
|
||||
>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="size-12 rounded-xl bg-primary/10 flex items-center justify-center">
|
||||
<Icon icon="lucide:box" class="size-6 text-primary" />
|
||||
<Box class="size-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-medium">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { Loader2 } from 'lucide-vue-next'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { toast } from 'vue-sonner'
|
||||
@@ -165,7 +165,7 @@ async function handleGenerate() {
|
||||
:disabled="loading || !form.app_id || !form.card_type_id"
|
||||
@click="handleGenerate"
|
||||
>
|
||||
<Icon v-if="loading" icon="lucide:loader-2" class="mr-2 h-4 w-4 animate-spin" />
|
||||
<Loader2 v-if="loading" class="mr-2 h-4 w-4 animate-spin" />
|
||||
{{ loading ? '生成中...' : '生成卡密' }}
|
||||
</UiButton>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { Key, Loader2, Plus } from 'lucide-vue-next'
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
import api from '@/services/api'
|
||||
@@ -60,7 +60,7 @@ function getStatusBadge(status: string) {
|
||||
</div>
|
||||
<UiButton as-child>
|
||||
<router-link to="/agent/cards/create">
|
||||
<Icon icon="lucide:plus" class="mr-2 h-4 w-4" />
|
||||
<Plus class="mr-2 h-4 w-4" />
|
||||
生成卡密
|
||||
</router-link>
|
||||
</UiButton>
|
||||
@@ -69,11 +69,11 @@ function getStatusBadge(status: string) {
|
||||
<UiCard>
|
||||
<UiCardContent class="p-0">
|
||||
<div v-if="loading" class="flex items-center justify-center py-12">
|
||||
<Icon icon="lucide:loader-2" class="size-8 animate-spin text-muted-foreground" />
|
||||
<Loader2 class="size-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="cards.length === 0" class="text-center py-12 text-muted-foreground">
|
||||
<Icon icon="lucide:key" class="size-16 mx-auto mb-4 opacity-30" />
|
||||
<Key class="size-16 mx-auto mb-4 opacity-30" />
|
||||
<p>暂无卡密记录</p>
|
||||
<UiButton class="mt-4" as-child>
|
||||
<router-link to="/agent/cards/create">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { ArrowDownLeft, ArrowUpRight, Loader2, Receipt, RotateCcw } from 'lucide-vue-next'
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
import api from '@/services/api'
|
||||
@@ -86,11 +86,11 @@ function getTypeClass(type: string) {
|
||||
</UiCardHeader>
|
||||
<UiCardContent class="p-0">
|
||||
<div v-if="loading" class="flex items-center justify-center py-12">
|
||||
<Icon icon="lucide:loader-2" class="size-8 animate-spin text-muted-foreground" />
|
||||
<Loader2 class="size-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="transactions.length === 0" class="text-center py-12 text-muted-foreground">
|
||||
<Icon icon="lucide:receipt" class="size-16 mx-auto mb-4 opacity-30" />
|
||||
<Receipt class="size-16 mx-auto mb-4 opacity-30" />
|
||||
<p>暂无交易记录</p>
|
||||
</div>
|
||||
|
||||
@@ -105,8 +105,8 @@ function getTypeClass(type: string) {
|
||||
class="size-10 rounded-xl flex items-center justify-center"
|
||||
:class="tx.type === 'recharge' ? 'bg-green-500/10' : tx.type === 'refund' ? 'bg-blue-500/10' : 'bg-red-500/10'"
|
||||
>
|
||||
<Icon
|
||||
:icon="tx.type === 'recharge' ? 'lucide:arrow-down-left' : tx.type === 'refund' ? 'lucide:rotate-ccw' : 'lucide:arrow-up-right'"
|
||||
<component
|
||||
:is="tx.type === 'recharge' ? ArrowDownLeft : tx.type === 'refund' ? RotateCcw : ArrowUpRight"
|
||||
:class="getTypeClass(tx.type)"
|
||||
class="size-5"
|
||||
/>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { Boxes, CreditCard, DollarSign, Key, Plus, Users } from 'lucide-vue-next'
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
import api from '@/services/api'
|
||||
@@ -63,7 +63,7 @@ onMounted(async () => {
|
||||
<UiCardTitle class="text-sm font-medium">
|
||||
授权应用
|
||||
</UiCardTitle>
|
||||
<Icon icon="lucide:boxes" class="size-4 text-muted-foreground" />
|
||||
<Boxes class="size-4 text-muted-foreground" />
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
@@ -80,7 +80,7 @@ onMounted(async () => {
|
||||
<UiCardTitle class="text-sm font-medium">
|
||||
卡密总数
|
||||
</UiCardTitle>
|
||||
<Icon icon="lucide:key" class="size-4 text-muted-foreground" />
|
||||
<Key class="size-4 text-muted-foreground" />
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
@@ -97,7 +97,7 @@ onMounted(async () => {
|
||||
<UiCardTitle class="text-sm font-medium">
|
||||
用户总数
|
||||
</UiCardTitle>
|
||||
<Icon icon="lucide:users" class="size-4 text-muted-foreground" />
|
||||
<Users class="size-4 text-muted-foreground" />
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
@@ -114,7 +114,7 @@ onMounted(async () => {
|
||||
<UiCardTitle class="text-sm font-medium">
|
||||
累计收入
|
||||
</UiCardTitle>
|
||||
<Icon icon="lucide:dollar-sign" class="size-4 text-muted-foreground" />
|
||||
<DollarSign class="size-4 text-muted-foreground" />
|
||||
</UiCardHeader>
|
||||
<UiCardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
@@ -135,25 +135,25 @@ onMounted(async () => {
|
||||
<UiCardContent class="grid gap-4 sm:grid-cols-2">
|
||||
<router-link to="/agent/cards/create">
|
||||
<UiButton variant="outline" class="w-full h-20 flex-col gap-2">
|
||||
<Icon icon="lucide:plus" class="size-5" />
|
||||
<Plus class="size-5" />
|
||||
<span>生成卡密</span>
|
||||
</UiButton>
|
||||
</router-link>
|
||||
<router-link to="/agent/apps">
|
||||
<UiButton variant="outline" class="w-full h-20 flex-col gap-2">
|
||||
<Icon icon="lucide:boxes" class="size-5" />
|
||||
<Boxes class="size-5" />
|
||||
<span>应用管理</span>
|
||||
</UiButton>
|
||||
</router-link>
|
||||
<router-link to="/agent/users">
|
||||
<UiButton variant="outline" class="w-full h-20 flex-col gap-2">
|
||||
<Icon icon="lucide:users" class="size-5" />
|
||||
<Users class="size-5" />
|
||||
<span>用户管理</span>
|
||||
</UiButton>
|
||||
</router-link>
|
||||
<router-link to="/agent/finance">
|
||||
<UiButton variant="outline" class="w-full h-20 flex-col gap-2">
|
||||
<Icon icon="lucide:credit-card" class="size-5" />
|
||||
<CreditCard class="size-5" />
|
||||
<span>财务管理</span>
|
||||
</UiButton>
|
||||
</router-link>
|
||||
@@ -181,7 +181,7 @@ onMounted(async () => {
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-center py-8 text-muted-foreground">
|
||||
<Icon icon="lucide:key" class="size-12 mx-auto mb-2 opacity-30" />
|
||||
<Key class="size-12 mx-auto mb-2 opacity-30" />
|
||||
<p>暂无卡密记录</p>
|
||||
</div>
|
||||
</UiCardContent>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { Loader2, Users } from 'lucide-vue-next'
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
import api from '@/services/api'
|
||||
@@ -50,11 +50,11 @@ function formatDate(dateStr: string | null) {
|
||||
<UiCard>
|
||||
<UiCardContent class="p-0">
|
||||
<div v-if="loading" class="flex items-center justify-center py-12">
|
||||
<Icon icon="lucide:loader-2" class="size-8 animate-spin text-muted-foreground" />
|
||||
<Loader2 class="size-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="users.length === 0" class="text-center py-12 text-muted-foreground">
|
||||
<Icon icon="lucide:users" class="size-16 mx-auto mb-4 opacity-30" />
|
||||
<Users class="size-16 mx-auto mb-4 opacity-30" />
|
||||
<p>暂无用户记录</p>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user