图标问题，用户消费显示按次按量

package.json

@@ -17,7 +17,10 @@
   },
   },
   "dependencies": {
   "dependencies": {
     "@element-plus/icons-vue": "2.3.1",
     "@element-plus/icons-vue": "2.3.1",
+    "@iconify/json": "^2.2.486",
+    "@iconify/vue": "^5.0.1",
     "@lobehub/icons": "^5.10.0",
     "@lobehub/icons": "^5.10.0",
+    "@lobehub/icons-static-svg": "^1.91.0",
     "@vueup/vue-quill": "1.2.0",
     "@vueup/vue-quill": "1.2.0",
     "@vueuse/core": "10.6.1",
     "@vueuse/core": "10.6.1",
     "axios": "0.27.2",
     "axios": "0.27.2",

src/components/LobeIcon/index.vue

 <template>
 <template>
-  <svg
-      v-if="paths"
-      :width="size"
-      :height="size"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      :class="['lobe-icon', { 'lobe-icon-rounded': rounded }]"
-  >
-    <!-- 部分厂商（Qwen / ChatGLM / Wenxin / Stability 等）用 linearGradient 做渐变填充 -->
-    <defs v-if="gradient">
-      <linearGradient
-          :id="gradientId"
-          :x1="gradient.x1"
-          :x2="gradient.x2"
-          :y1="gradient.y1"
-          :y2="gradient.y2"
-      >
-        <stop
-            v-for="(s, idx) in gradient.stops"
-            :key="idx"
-            :offset="s.offset"
-            :stop-color="s.stopColor"
-            :stop-opacity="s.stopOpacity"
-        />
-      </linearGradient>
-    </defs>
-    <path
-        v-for="(p, idx) in paths"
-        :key="idx"
-        :d="p.d"
-        :fill="resolvePathFill(p.fill)"
+  <div class="lobe-icon" :style="wrapperStyle">
+    <img
+        v-if="svgSrc"
+        :src="svgSrc"
+        :alt="name"
+        class="lobe-icon__img"
     />
     />
-  </svg>
-  <span
-      v-else
-      :class="['lobe-icon-fallback', { 'lobe-icon-rounded': rounded }]"
-      :style="fallbackStyle"
-  >{{ fallbackLetter }}</span>
+    <div v-else class="lobe-icon__fallback" :style="fallbackStyle">
+      {{ firstChar }}
+    </div>
+  </div>
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-import { computed, getCurrentInstance } from 'vue'
-
-const instance = getCurrentInstance()
-const uid = instance?.uid ?? Math.floor(Math.random() * 1e9)
+import { computed, ref, watch } from 'vue'
 
 
 const props = defineProps({
 const props = defineProps({
   name: { type: String, default: '' },
   name: { type: String, default: '' },
   variant: { type: String, default: 'Color' },
   variant: { type: String, default: 'Color' },
-  size: { type: [Number, String], default: 24 },
-  color: { type: String, default: '' },
-  rounded: { type: Boolean, default: true }
+  size: { type: Number, default: 30 }
 })
 })
 
 
-// 加载 lobehub 包 Color + Mono 组件源文件
-const sources = import.meta.glob(
-    [
-      '@lobehub/icons-es/*/components/Color.js',
-      '@lobehub/icons-es/*/components/Mono.js'
-    ],
-    { eager: true, query: '?raw', import: 'default' }
-)
+const svgSrc = ref('')
 
 
-// 提 path：d: "x"  +  fill: "x" 或 fill: 变量
-function extractPaths(raw) {
-  // 三种 fill 写法都要匹配：字面字符串 / 变量名（fill / fill0 / 其他）
-  const tokenRe = /d:\s*"([^"]+)"|fill:\s*"([^"]+)"|fill:\s*([A-Za-z_$][\w$]*)/g
-  const tokens = []
-  let m
-  while ((m = tokenRe.exec(raw)) !== null) {
-    if (m[1] != null) tokens.push({ type: 'd', value: m[1] })
-    else if (m[2] != null) tokens.push({ type: 'fill', value: m[2], isVar: false })
-    else if (m[3] != null) tokens.push({ type: 'fill', value: m[3], isVar: true })
-  }
-  const paths = []
-  let pending = null
-  for (const t of tokens) {
-    if (t.type === 'd') {
-      if (pending) paths.push(pending)
-      pending = { d: t.value, fill: t.isVar ? 'useFillId' : t.value, fillIsVar: t.isVar }
-    } else if (pending) {
-      pending.fill = t.isVar ? 'useFillId' : t.value
-      pending.fillIsVar = t.isVar
-    }
-  }
-  if (pending) paths.push(pending)
-  return paths
+function normalize(name) {
+  return name
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^a-z0-9-]/g, '')
 }
 }
 
 
-// 提 linearGradient（lobehub 用 useFillId 生成 id，raw 里 id 是变量）
-function extractGradient(raw) {
-  if (!/linearGradient/.test(raw)) return null
-  const xy = raw.match(/x1:\s*"([^"]*)"[\s\S]*?x2:\s*"([^"]*)"[\s\S]*?y1:\s*"([^"]*)"[\s\S]*?y2:\s*"([^"]*)"/)
-  if (!xy) return null
-  const stops = []
-  const stopRe = /offset:\s*"([^"]*)"[\s\S]*?stopColor:\s*"([^"]+)"[\s\S]*?stopOpacity:\s*"?([\d.]+)"?/g
-  let m
-  while ((m = stopRe.exec(raw)) !== null) {
-    stops.push({ offset: m[1], stopColor: m[2], stopOpacity: m[3] })
-  }
-  if (!stops.length) return null
-  return { x1: xy[1], x2: xy[2], y1: xy[3], y2: xy[4], stops }
+const svgSrcMap = {
+  ace: () => import('@lobehub/icons-static-svg/icons/ace.svg'),
+  adobe: () => import('@lobehub/icons-static-svg/icons/adobe-color.svg'),
+  adobefirefly: () => import('@lobehub/icons-static-svg/icons/adobefirefly-color.svg'),
+  agentvoice: () => import('@lobehub/icons-static-svg/icons/agentvoice-color.svg'),
+  agui: () => import('@lobehub/icons-static-svg/icons/agui-text.svg'),
+  ai2: () => import('@lobehub/icons-static-svg/icons/ai2-color.svg'),
+  ai21: () => import('@lobehub/icons-static-svg/icons/ai21-brand-color.svg'),
+  ai302: () => import('@lobehub/icons-static-svg/icons/ai302-color.svg'),
+  ai360: () => import('@lobehub/icons-static-svg/icons/ai360-color.svg'),
+  aihubmix: () => import('@lobehub/icons-static-svg/icons/aihubmix-color.svg'),
+  aimass: () => import('@lobehub/icons-static-svg/icons/aimass-color.svg'),
+  aionlabs: () => import('@lobehub/icons-static-svg/icons/aionlabs-color.svg'),
+  airjelly: () => import('@lobehub/icons-static-svg/icons/airjelly-color.svg'),
+  aistudio: () => import('@lobehub/icons-static-svg/icons/aistudio.svg'),
+  akashchat: () => import('@lobehub/icons-static-svg/icons/akashchat-color.svg'),
+  alephalpha: () => import('@lobehub/icons-static-svg/icons/alephalpha-text.svg'),
+  antgroup: () => import('@lobehub/icons-static-svg/icons/antgroup-brand-color.svg'),
+  anthropic: () => import('@lobehub/icons-static-svg/icons/anthropic-text.svg'),
+  antigravity: () => import('@lobehub/icons-static-svg/icons/antigravity-color.svg'),
+  anyscale: () => import('@lobehub/icons-static-svg/icons/anyscale-color.svg'),
+  apertis: () => import('@lobehub/icons-static-svg/icons/apertis-color.svg'),
+  apple: () => import('@lobehub/icons-static-svg/icons/apple-text.svg'),
+  arcee: () => import('@lobehub/icons-static-svg/icons/arcee-color.svg'),
+  askverdict: () => import('@lobehub/icons-static-svg/icons/askverdict-color.svg'),
+  assemblyai: () => import('@lobehub/icons-static-svg/icons/assemblyai-color.svg'),
+  atlascloud: () => import('@lobehub/icons-static-svg/icons/atlascloud-text.svg'),
+  automatic: () => import('@lobehub/icons-static-svg/icons/automatic-color.svg'),
+  aws: () => import('@lobehub/icons-static-svg/icons/aws-brand-color.svg'),
+  aya: () => import('@lobehub/icons-static-svg/icons/aya-color.svg'),
+  azure: () => import('@lobehub/icons-static-svg/icons/azure-color.svg'),
+  azureai: () => import('@lobehub/icons-static-svg/icons/azureai-color.svg'),
+  baai: () => import('@lobehub/icons-static-svg/icons/baai-text.svg'),
+  baichuan: () => import('@lobehub/icons-static-svg/icons/baichuan-color.svg'),
+  baidu: () => import('@lobehub/icons-static-svg/icons/baidu-brand-color.svg'),
+  baiducloud: () => import('@lobehub/icons-static-svg/icons/baiducloud-color.svg'),
+  bailian: () => import('@lobehub/icons-static-svg/icons/bailian-color.svg'),
+  baseten: () => import('@lobehub/icons-static-svg/icons/baseten-text.svg'),
+  bedrock: () => import('@lobehub/icons-static-svg/icons/bedrock-color.svg'),
+  bfl: () => import('@lobehub/icons-static-svg/icons/bfl-text.svg'),
+  bilibili: () => import('@lobehub/icons-static-svg/icons/bilibili-color.svg'),
+  bilibiliindex: () => import('@lobehub/icons-static-svg/icons/bilibiliindex-text.svg'),
+  bing: () => import('@lobehub/icons-static-svg/icons/bing-color.svg'),
+  briaai: () => import('@lobehub/icons-static-svg/icons/briaai-color.svg'),
+  burncloud: () => import('@lobehub/icons-static-svg/icons/burncloud-color.svg'),
+  bytedance: () => import('@lobehub/icons-static-svg/icons/bytedance-brand-color.svg'),
+  capcut: () => import('@lobehub/icons-static-svg/icons/capcut-text.svg'),
+  centml: () => import('@lobehub/icons-static-svg/icons/centml-brand-color.svg'),
+  cerebras: () => import('@lobehub/icons-static-svg/icons/cerebras-brand-color.svg'),
+  chatglm: () => import('@lobehub/icons-static-svg/icons/chatglm-color.svg'),
+  cherrystudio: () => import('@lobehub/icons-static-svg/icons/cherrystudio-color.svg'),
+  civitai: () => import('@lobehub/icons-static-svg/icons/civitai-color.svg'),
+  claude: () => import('@lobehub/icons-static-svg/icons/claude-color.svg'),
+  claudecode: () => import('@lobehub/icons-static-svg/icons/claudecode-color.svg'),
+  cline: () => import('@lobehub/icons-static-svg/icons/cline-text.svg'),
+  clipdrop: () => import('@lobehub/icons-static-svg/icons/clipdrop-text.svg'),
+  cloudflare: () => import('@lobehub/icons-static-svg/icons/cloudflare-color.svg'),
+  codebuddy: () => import('@lobehub/icons-static-svg/icons/codebuddy-color.svg'),
+  codeflicker: () => import('@lobehub/icons-static-svg/icons/codeflicker-color.svg'),
+  codegeex: () => import('@lobehub/icons-static-svg/icons/codegeex-color.svg'),
+  codex: () => import('@lobehub/icons-static-svg/icons/codex-color.svg'),
+  cogvideo: () => import('@lobehub/icons-static-svg/icons/cogvideo-color.svg'),
+  cogview: () => import('@lobehub/icons-static-svg/icons/cogview-color.svg'),
+  cohere: () => import('@lobehub/icons-static-svg/icons/cohere-color.svg'),
+  colab: () => import('@lobehub/icons-static-svg/icons/colab-color.svg'),
+  cometapi: () => import('@lobehub/icons-static-svg/icons/cometapi-color.svg'),
+  comfyui: () => import('@lobehub/icons-static-svg/icons/comfyui-color.svg'),
+  commanda: () => import('@lobehub/icons-static-svg/icons/commanda-color.svg'),
+  copilot: () => import('@lobehub/icons-static-svg/icons/copilot-color.svg'),
+  copilotkit: () => import('@lobehub/icons-static-svg/icons/copilotkit-color.svg'),
+  coqui: () => import('@lobehub/icons-static-svg/icons/coqui-color.svg'),
+  coze: () => import('@lobehub/icons-static-svg/icons/coze-text.svg'),
+  crewai: () => import('@lobehub/icons-static-svg/icons/crewai-brand-color.svg'),
+  crusoe: () => import('@lobehub/icons-static-svg/icons/crusoe-color.svg'),
+  cursor: () => import('@lobehub/icons-static-svg/icons/cursor-text.svg'),
+  cybercut: () => import('@lobehub/icons-static-svg/icons/cybercut-text.svg'),
+  dalle: () => import('@lobehub/icons-static-svg/icons/dalle-color.svg'),
+  dbrx: () => import('@lobehub/icons-static-svg/icons/dbrx-brand-color.svg'),
+  deepai: () => import('@lobehub/icons-static-svg/icons/deepai-text.svg'),
+  deepcogito: () => import('@lobehub/icons-static-svg/icons/deepcogito-color.svg'),
+  deepinfra: () => import('@lobehub/icons-static-svg/icons/deepinfra-color.svg'),
+  deepl: () => import('@lobehub/icons-static-svg/icons/deepl-color.svg'),
+  deepmind: () => import('@lobehub/icons-static-svg/icons/deepmind-color.svg'),
+  deepseek: () => import('@lobehub/icons-static-svg/icons/deepseek-color.svg'),
+  devin: () => import('@lobehub/icons-static-svg/icons/devin-color.svg'),
+  dify: () => import('@lobehub/icons-static-svg/icons/dify-color.svg'),
+  doc2x: () => import('@lobehub/icons-static-svg/icons/doc2x-color.svg'),
+  docsearch: () => import('@lobehub/icons-static-svg/icons/docsearch-color.svg'),
+  dolphin: () => import('@lobehub/icons-static-svg/icons/dolphin-text.svg'),
+  doubao: () => import('@lobehub/icons-static-svg/icons/doubao-color.svg'),
+  dreammachine: () => import('@lobehub/icons-static-svg/icons/dreammachine-text.svg'),
+  elevenlabs: () => import('@lobehub/icons-static-svg/icons/elevenlabs-text.svg'),
+  elevenx: () => import('@lobehub/icons-static-svg/icons/elevenx-text.svg'),
+  essentialai: () => import('@lobehub/icons-static-svg/icons/essentialai-color.svg'),
+  exa: () => import('@lobehub/icons-static-svg/icons/exa-color.svg'),
+  fal: () => import('@lobehub/icons-static-svg/icons/fal-color.svg'),
+  fastgpt: () => import('@lobehub/icons-static-svg/icons/fastgpt-color.svg'),
+  featherless: () => import('@lobehub/icons-static-svg/icons/featherless-color.svg'),
+  figma: () => import('@lobehub/icons-static-svg/icons/figma-color.svg'),
+  fireworks: () => import('@lobehub/icons-static-svg/icons/fireworks-color.svg'),
+  fishaudio: () => import('@lobehub/icons-static-svg/icons/fishaudio-text.svg'),
+  flora: () => import('@lobehub/icons-static-svg/icons/flora-text.svg'),
+  flowith: () => import('@lobehub/icons-static-svg/icons/flowith-text.svg'),
+  flux: () => import('@lobehub/icons-static-svg/icons/flux-text.svg'),
+  friendli: () => import('@lobehub/icons-static-svg/icons/friendli-text.svg'),
+  gemini: () => import('@lobehub/icons-static-svg/icons/gemini-color.svg'),
+  geminicli: () => import('@lobehub/icons-static-svg/icons/geminicli-color.svg'),
+  gemma: () => import('@lobehub/icons-static-svg/icons/gemma-color.svg'),
+  giteeai: () => import('@lobehub/icons-static-svg/icons/giteeai-text.svg'),
+  github: () => import('@lobehub/icons-static-svg/icons/github-text.svg'),
+  githubcopilot: () => import('@lobehub/icons-static-svg/icons/githubcopilot-text.svg'),
+  glama: () => import('@lobehub/icons-static-svg/icons/glama-text.svg'),
+  glif: () => import('@lobehub/icons-static-svg/icons/glif-text.svg'),
+  glmv: () => import('@lobehub/icons-static-svg/icons/glmv-color.svg'),
+  google: () => import('@lobehub/icons-static-svg/icons/google-color.svg'),
+  googlecloud: () => import('@lobehub/icons-static-svg/icons/googlecloud-brand-color.svg'),
+  goose: () => import('@lobehub/icons-static-svg/icons/goose-text.svg'),
+  gradio: () => import('@lobehub/icons-static-svg/icons/gradio-color.svg'),
+  greptile: () => import('@lobehub/icons-static-svg/icons/greptile-color.svg'),
+  grok: () => import('@lobehub/icons-static-svg/icons/grok-text.svg'),
+  groq: () => import('@lobehub/icons-static-svg/icons/groq-text.svg'),
+  hailuo: () => import('@lobehub/icons-static-svg/icons/hailuo-color.svg'),
+  haiper: () => import('@lobehub/icons-static-svg/icons/haiper-text.svg'),
+  hedra: () => import('@lobehub/icons-static-svg/icons/hedra-text.svg'),
+  hermesagent: () => import('@lobehub/icons-static-svg/icons/hermesagent-text.svg'),
+  higress: () => import('@lobehub/icons-static-svg/icons/higress-color.svg'),
+  huawei: () => import('@lobehub/icons-static-svg/icons/huawei-color.svg'),
+  huaweicloud: () => import('@lobehub/icons-static-svg/icons/huaweicloud-color.svg'),
+  huggingface: () => import('@lobehub/icons-static-svg/icons/huggingface-color.svg'),
+  hunyuan: () => import('@lobehub/icons-static-svg/icons/hunyuan-color.svg'),
+  hyperbolic: () => import('@lobehub/icons-static-svg/icons/hyperbolic-color.svg'),
+  ibm: () => import('@lobehub/icons-static-svg/icons/ibm-text.svg'),
+  ideogram: () => import('@lobehub/icons-static-svg/icons/ideogram-text.svg'),
+  iflytekcloud: () => import('@lobehub/icons-static-svg/icons/iflytekcloud-color.svg'),
+  inception: () => import('@lobehub/icons-static-svg/icons/inception-text.svg'),
+  inference: () => import('@lobehub/icons-static-svg/icons/inference-text.svg'),
+  infermatic: () => import('@lobehub/icons-static-svg/icons/infermatic-color.svg'),
+  infinigence: () => import('@lobehub/icons-static-svg/icons/infinigence-color.svg'),
+  inflection: () => import('@lobehub/icons-static-svg/icons/inflection-text.svg'),
+  internlm: () => import('@lobehub/icons-static-svg/icons/internlm-color.svg'),
+  jimeng: () => import('@lobehub/icons-static-svg/icons/jimeng-color.svg'),
+  jina: () => import('@lobehub/icons-static-svg/icons/jina-text.svg'),
+  junie: () => import('@lobehub/icons-static-svg/icons/junie-color.svg'),
+  kilocode: () => import('@lobehub/icons-static-svg/icons/kilocode-text.svg'),
+  kimi: () => import('@lobehub/icons-static-svg/icons/kimi-color.svg'),
+  kiro: () => import('@lobehub/icons-static-svg/icons/kiro-color.svg'),
+  kling: () => import('@lobehub/icons-static-svg/icons/kling-color.svg'),
+  kluster: () => import('@lobehub/icons-static-svg/icons/kluster-color.svg'),
+  kolors: () => import('@lobehub/icons-static-svg/icons/kolors-color.svg'),
+  krea: () => import('@lobehub/icons-static-svg/icons/krea-text.svg'),
+  kwaikat: () => import('@lobehub/icons-static-svg/icons/kwaikat-text-color.svg'),
+  kwaipilot: () => import('@lobehub/icons-static-svg/icons/kwaipilot-color.svg'),
+  lambda: () => import('@lobehub/icons-static-svg/icons/lambda-text.svg'),
+  langchain: () => import('@lobehub/icons-static-svg/icons/langchain-color.svg'),
+  langfuse: () => import('@lobehub/icons-static-svg/icons/langfuse-color.svg'),
+  langgraph: () => import('@lobehub/icons-static-svg/icons/langgraph-color.svg'),
+  langsmith: () => import('@lobehub/icons-static-svg/icons/langsmith-color.svg'),
+  leptonai: () => import('@lobehub/icons-static-svg/icons/leptonai-color.svg'),
+  lg: () => import('@lobehub/icons-static-svg/icons/lg-color.svg'),
+  llamava: () => import('@lobehub/icons-static-svg/icons/llava-color.svg'),
+  llama: () => import('@lobehub/icons-static-svg/icons/llava-color.svg'),
+  lmstudio: () => import('@lobehub/icons-static-svg/icons/lmstudio.svg'),
+  lobehub: () => import('@lobehub/icons-static-svg/icons/lobehub-color.svg'),
+  longcat: () => import('@lobehub/icons-static-svg/icons/longcat-text.svg'),
+  lovable: () => import('@lobehub/icons-static-svg/icons/lovable-text.svg'),
+  lovart: () => import('@lobehub/icons-static-svg/icons/lovart-text.svg'),
+  luma: () => import('@lobehub/icons-static-svg/icons/luma-text.svg'),
+  mcp: () => import('@lobehub/icons-static-svg/icons/mcp.svg'),
+  magic: () => import('@lobehub/icons-static-svg/icons/magic-text.svg'),
+  make: () => import('@lobehub/icons-static-svg/icons/make-color.svg'),
+  manus: () => import('@lobehub/icons-static-svg/icons/manus-text.svg'),
+  mastra: () => import('@lobehub/icons-static-svg/icons/mastra-text.svg'),
+  mcpeso: () => import('@lobehub/icons-static-svg/icons/mcpso-color.svg'),
+  menlo: () => import('@lobehub/icons-static-svg/icons/menlo-color.svg'),
+  meshy: () => import('@lobehub/icons-static-svg/icons/meshy-color.svg'),
+  meta: () => import('@lobehub/icons-static-svg/icons/meta-color.svg'),
+  metaai: () => import('@lobehub/icons-static-svg/icons/metaai-color.svg'),
+  metagpt: () => import('@lobehub/icons-static-svg/icons/metagpt-text.svg'),
+  microsoft: () => import('@lobehub/icons-static-svg/icons/microsoft-color.svg'),
+  midjourney: () => import('@lobehub/icons-static-svg/icons/midjourney-text.svg'),
+  minimax: () => import('@lobehub/icons-static-svg/icons/minimax-color.svg'),
+  mistral: () => import('@lobehub/icons-static-svg/icons/mistral-text.svg'),
+  modelcontextprotocol: () => import('@lobehub/icons-static-svg/icons/mcp.svg'),
+  modelscope: () => import('@lobehub/icons-static-svg/icons/modelscope-color.svg'),
+  monica: () => import('@lobehub/icons-static-svg/icons/monica-color.svg'),
+  moonshot: () => import('@lobehub/icons-static-svg/icons/moonshot-text.svg'),
+  morph: () => import('@lobehub/icons-static-svg/icons/morph-text.svg'),
+  moxt: () => import('@lobehub/icons-static-svg/icons/moxt-color.svg'),
+  myshell: () => import('@lobehub/icons-static-svg/icons/myshell-text.svg'),
+  n8n: () => import('@lobehub/icons-static-svg/icons/n8n-color.svg'),
+  nebius: () => import('@lobehub/icons-static-svg/icons/nebius.svg'),
+  newapi: () => import('@lobehub/icons-static-svg/icons/newapi-color.svg'),
+  notebooklm: () => import('@lobehub/icons-static-svg/icons/notebooklm-text.svg'),
+  nousresearch: () => import('@lobehub/icons-static-svg/icons/nousresearch-text.svg'),
+  novelai: () => import('@lobehub/icons-static-svg/icons/novelai-text.svg'),
+  novitaai: () => import('@lobehub/icons-static-svg/icons/novita-color.svg'),
+  nvidia: () => import('@lobehub/icons-static-svg/icons/nvidia-color.svg'),
+  obsidian: () => import('@lobehub/icons-static-svg/icons/obsidian-text.svg'),
+  ollama: () => import('@lobehub/icons-static-svg/icons/ollama-text.svg'),
+  openai: () => import('@lobehub/icons-static-svg/icons/openai.svg'),
+  openchat: () => import('@lobehub/icons-static-svg/icons/openchat-color.svg'),
+  openclaw: () => import('@lobehub/icons-static-svg/icons/openclaw-color.svg'),
+  opencode: () => import('@lobehub/icons-static-svg/icons/opencode-text.svg'),
+  openhands: () => import('@lobehub/icons-static-svg/icons/openhands-text.svg'),
+  openhuman: () => import('@lobehub/icons-static-svg/icons/openhuman-text.svg'),
+  openrouter: () => import('@lobehub/icons-static-svg/icons/openrouter.svg'),
+  openwebui: () => import('@lobehub/icons-static-svg/icons/openwebui-text.svg'),
+  pa: () => import('@lobehub/icons-static-svg/icons/palm-text.svg'),
+  palm: () => import('@lobehub/icons-static-svg/icons/palm-text.svg'),
+  perplexity: () => import('@lobehub/icons-static-svg/icons/perplexity-color.svg'),
+  phidata: () => import('@lobehub/icons-static-svg/icons/phidata-color.svg'),
+  phind: () => import('@lobehub/icons-static-svg/icons/phind-text.svg'),
+  pika: () => import('@lobehub/icons-static-svg/icons/pika-text.svg'),
+  pixverse: () => import('@lobehub/icons-static-svg/icons/pixverse-text.svg'),
+  player2: () => import('@lobehub/icons-static-svg/icons/player2-text.svg'),
+  poe: () => import('@lobehub/icons-static-svg/icons/poe-color.svg'),
+  pollinations: () => import('@lobehub/icons-static-svg/icons/pollinations-text.svg'),
+  prunaai: () => import('@lobehub/icons-static-svg/icons/prunaai-color.svg'),
+  pydanticai: () => import('@lobehub/icons-static-svg/icons/pydanticai-color.svg'),
+  qingyan: () => import('@lobehub/icons-static-svg/icons/qingyan-color.svg'),
+  qiniu: () => import('@lobehub/icons-static-svg/icons/qiniu-color.svg'),
+  qoder: () => import('@lobehub/icons-static-svg/icons/qoder-color.svg'),
+  qwen: () => import('@lobehub/icons-static-svg/icons/qwen-color.svg'),
+  replicate: () => import('@lobehub/icons-static-svg/icons/replicate.svg'),
+  replit: () => import('@lobehub/icons-static-svg/icons/replit-color.svg'),
+  reve: () => import('@lobehub/icons-static-svg/icons/reve-text.svg'),
+  rwkv: () => import('@lobehub/icons-static-svg/icons/rwkv-text.svg'),
+  sambanova: () => import('@lobehub/icons-static-svg/icons/sambanova.svg'),
+  siloconcloud: () => import('@lobehub/icons-static-svg/icons/siliconcloud-color.svg'),
+  silocon: () => import('@lobehub/icons-static-svg/icons/siliconcloud-color.svg'),
+  sillytavern: () => import('@lobehub/icons-static-svg/icons/sillytavern-text.svg'),
+  skywork: () => import('@lobehub/icons-static-svg/icons/skywork-text.svg'),
+  slock: () => import('@lobehub/icons-static-svg/icons/slock.svg'),
+  smithery: () => import('@lobehub/icons-static-svg/icons/smithery-color.svg'),
+  snowflake: () => import('@lobehub/icons-static-svg/icons/snowflake-color.svg'),
+  sophnet: () => import('@lobehub/icons-static-svg/icons/sophnet-color.svg'),
+  sora: () => import('@lobehub/icons-static-svg/icons/sora-color.svg'),
+  spark: () => import('@lobehub/icons-static-svg/icons/spark-color.svg'),
+  speedai: () => import('@lobehub/icons-static-svg/icons/speedai-color.svg'),
+  stability: () => import('@lobehub/icons-static-svg/icons/stability-text.svg'),
+  statecloud: () => import('@lobehub/icons-static-svg/icons/statecloud-color.svg'),
+  stepfun: () => import('@lobehub/icons-static-svg/icons/stepfun-color.svg'),
+  straico: () => import('@lobehub/icons-static-svg/icons/straico-color.svg'),
+  streamlake: () => import('@lobehub/icons-static-svg/icons/streamlake-color.svg'),
+  suno: () => import('@lobehub/icons-static-svg/icons/suno-text.svg'),
+  synic: () => import('@lobehub/icons-static-svg/icons/sync.svg'),
+  tencent: () => import('@lobehub/icons-static-svg/icons/tencent-color.svg'),
+  tencentcloud: () => import('@lobehub/icons-static-svg/icons/tencentcloud-color.svg'),
+  tiangong: () => import('@lobehub/icons-static-svg/icons/tiangong-color.svg'),
+  togetherai: () => import('@lobehub/icons-static-svg/icons/together-color.svg'),
+  topazlabs: () => import('@lobehub/icons-static-svg/icons/topazlabs-text.svg'),
+  tra: () => import('@lobehub/icons-static-svg/icons/trae-color.svg'),
+  traee: () => import('@lobehub/icons-static-svg/icons/trae-text.svg'),
+  tripo: () => import('@lobehub/icons-static-svg/icons/tripo-text.svg'),
+  turix: () => import('@lobehub/icons-static-svg/icons/turix-text.svg'),
+  udio: () => import('@lobehub/icons-static-svg/icons/udio-color.svg'),
+  unstructured: () => import('@lobehub/icons-static-svg/icons/unstructured-color.svg'),
+  upstage: () => import('@lobehub/icons-static-svg/icons/upstage-color.svg'),
+  v0: () => import('@lobehub/icons-static-svg/icons/v0.svg'),
+  vectorizerai: () => import('@lobehub/icons-static-svg/icons/vectorizerai-text.svg'),
+  venice: () => import('@lobehub/icons-static-svg/icons/venice-color.svg'),
+  vercel: () => import('@lobehub/icons-static-svg/icons/vercel.svg'),
+  vertexai: () => import('@lobehub/icons-static-svg/icons/vertexai-color.svg'),
+  vidu: () => import('@lobehub/icons-static-svg/icons/vidu-color.svg'),
+  viggle: () => import('@lobehub/icons-static-svg/icons/viggle-text.svg'),
+  vllm: () => import('@lobehub/icons-static-svg/icons/vllm-text.svg'),
+  volcengine: () => import('@lobehub/icons-static-svg/icons/volcengine-text.svg'),
+  voyage: () => import('@lobehub/icons-static-svg/icons/voyage-text.svg'),
+  wenxin: () => import('@lobehub/icons-static-svg/icons/wenxin-color.svg'),
+  winds: () => import('@lobehub/icons-static-svg/icons/windsurf-text.svg'),
+  workersai: () => import('@lobehub/icons-static-svg/icons/workersai-color.svg'),
+  xai: () => import('@lobehub/icons-static-svg/icons/xai-text.svg'),
+  xuanyuan: () => import('@lobehub/icons-static-svg/icons/xuanyuan-color.svg'),
+  yandex: () => import('@lobehub/icons-static-svg/icons/yandex.svg'),
+  yi: () => import('@lobehub/icons-static-svg/icons/yi-text.svg'),
+  youmind: () => import('@lobehub/icons-static-svg/icons/youmind-text.svg'),
+  yuanbao: () => import('@lobehub/icons-static-svg/icons/yuanbao-text.svg'),
+  zai: () => import('@lobehub/icons-static-svg/icons/zai-text.svg'),
+  zapier: () => import('@lobehub/icons-static-svg/icons/zapier-color.svg'),
+  zeabur: () => import('@lobehub/icons-static-svg/icons/zeabur-color.svg'),
+  zenmux: () => import('@lobehub/icons-static-svg/icons/zenmux-text.svg'),
+  zencoder: () => import('@lobehub/icons-static-svg/icons/zencoder-color.svg'),
+  zerooneai: () => import('@lobehub/icons-static-svg/icons/zeroone-color.svg'),
+  zhipu: () => import('@lobehub/icons-static-svg/icons/zhipu-color.svg'),
 }
 }
 
 
-const pathMap = {}
-for (const [filePath, raw] of Object.entries(sources)) {
-  const m = filePath.match(/\/([^/]+)\/components\/(Mono|Color)\.js$/)
-  if (!m) continue
-  const [, vendor, variant] = m
-  const paths = extractPaths(raw)
-  if (!paths.length) continue
-  const gradient = extractGradient(raw)
-  if (!pathMap[vendor]) pathMap[vendor] = {}
-  pathMap[vendor][variant] = { paths, gradient }
+async function loadSvg() {
+  if (!props.name) {
+    svgSrc.value = ''
+    return
+  }
+  const key = normalize(props.name)
+  const loader = svgSrcMap[key]
+  if (loader) {
+    try {
+      const mod = await loader()
+      svgSrc.value = mod.default || mod
+    } catch {
+      svgSrc.value = ''
+    }
+  } else {
+    svgSrc.value = ''
+  }
 }
 }
 
 
-const iconData = computed(() => {
-  if (!props.name) return null
-  return pathMap[props.name]?.[props.variant] || null
-})
-
-const paths = computed(() => iconData.value?.paths || null)
-const gradient = computed(() => iconData.value?.gradient || null)
-
-const gradientId = computed(() => `lobe-grad-${props.name}-${uid}`)
+watch(() => props.name, loadSvg, { immediate: true })
 
 
-// 解析 path 的 fill：
-// - 传 color prop：所有 path 全部用 color 覆盖
-// - 变量 fill（lobehub useFillId 生成的 url(#xxx)）：用 url(#我们的 id) 引用 defs
-// - 字面颜色：原样
-function resolvePathFill(rawFill) {
-  if (props.color) return props.color || 'currentColor'
-  if (rawFill === 'useFillId') return `url(#${gradientId.value})`
-  return rawFill || 'currentColor'
-}
+const firstChar = computed(() => (props.name || '').charAt(0).toUpperCase())
 
 
-const fallbackLetter = computed(() => (props.name || 'AI').charAt(0).toUpperCase())
-
-const sizePx = computed(() =>
-    typeof props.size === 'number' ? props.size + 'px' : props.size
-)
+const wrapperStyle = computed(() => ({
+  width: `${props.size}px`,
+  height: `${props.size}px`
+}))
 
 
 const fallbackStyle = computed(() => ({
 const fallbackStyle = computed(() => ({
-  width: sizePx.value,
-  height: sizePx.value,
-  fontSize: `calc(${sizePx.value} * 0.5)`,
-  lineHeight: sizePx.value
+  width: `${props.size}px`,
+  height: `${props.size}px`,
+  fontSize: `${Math.round(props.size * 0.45)}px`
 }))
 }))
 </script>
 </script>
 
 
 <style scoped lang="scss">
 <style scoped lang="scss">
 .lobe-icon {
 .lobe-icon {
-  display: inline-block;
-  vertical-align: middle;
-  flex-shrink: 0;
-  overflow: hidden;
-}
-
-.lobe-icon-rounded {
-  border-radius: 20%;
-}
-
-.lobe-icon-fallback {
   display: inline-flex;
   display: inline-flex;
   align-items: center;
   align-items: center;
   justify-content: center;
   justify-content: center;
-  background: linear-gradient(135deg, #4e6ef2, #6b8aff);
-  color: #fff;
-  font-weight: 600;
   flex-shrink: 0;
   flex-shrink: 0;
+
+  .lobe-icon__img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  .lobe-icon__fallback {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: #fff;
+    font-weight: 600;
+    font-family: 'Arial', sans-serif;
+    user-select: none;
+    flex-shrink: 0;
+  }
 }
 }
-</style>
+</style>
\ No newline at end of file

src/views/console/components/token.vue

@@ -14,8 +14,8 @@
           </el-tooltip>
           </el-tooltip>
         </el-form-item>
         </el-form-item>
         <el-form-item label="服务地址：">
         <el-form-item label="服务地址：">
-          <el-tooltip effect="dark" :content="baseUrl" placement="top">
-            <span class="secret-text">{{ baseUrl }}</span>
+          <el-tooltip effect="dark" content="http://phslgld.hnluchuan.com:3000/" placement="top">
+            <span class="secret-text">http://phslgld.hnluchuan.com:3000/</span>
           </el-tooltip>
           </el-tooltip>
         </el-form-item>
         </el-form-item>
       </el-form>
       </el-form>

src/views/console/tokenLog.vue

@@ -61,6 +61,13 @@
               </template>
               </template>
             </el-table-column>
             </el-table-column>
             <el-table-column label="模型" align="center" prop="model_name" min-width="180" />
             <el-table-column label="模型" align="center" prop="model_name" min-width="180" />
+            <el-table-column label="计费方式" align="center" width="100">
+              <template #default="scope">
+                <el-tag :type="getBillingType(scope.row.other) === '按次' ? 'success' : 'primary'" size="small">
+                  {{ getBillingType(scope.row.other) }}
+                </el-tag>
+              </template>
+            </el-table-column>
             <el-table-column label="输入" align="center" prop="prompt_tokens" width="120">
             <el-table-column label="输入" align="center" prop="prompt_tokens" width="120">
               <template #default="scope">
               <template #default="scope">
                 <span>{{ scope.row.prompt_tokens || 0 }}</span>
                 <span>{{ scope.row.prompt_tokens || 0 }}</span>
@@ -294,6 +301,20 @@ function extractRechargeAmount(content) {
   return Number(match[1]).toFixed(2)
   return Number(match[1]).toFixed(2)
 }
 }
 
 
+/** 解析计费方式：按次(model_ratio===0 && model_price!==-1) vs 按量 */
+function getBillingType(other) {
+  if (!other) return '-'
+  try {
+    const info = typeof other === 'string' ? JSON.parse(other) : other
+    const ratio = Number(info.model_ratio)
+    const price = Number(info.model_price)
+    if (isNaN(ratio) || isNaN(price)) return '-'
+    return ratio === 0 && price !== -1 ? '按次' : '按量'
+  } catch {
+    return '-'
+  }
+}
+
 onMounted(() => {
 onMounted(() => {
   refresh()
   refresh()
 })
 })