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:
2026-05-03 04:25:34 +08:00
parent 1f7dfd17a7
commit c653ed071d
101 changed files with 910 additions and 769 deletions
+4 -4
View File
@@ -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>
+4 -4
View File
@@ -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">
+2 -2
View File
@@ -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>
+4 -4
View File
@@ -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">
+5 -5
View File
@@ -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"
/>
+10 -10
View File
@@ -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>
+3 -3
View File
@@ -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>