Skip to content

phsl / client

Go to a project
Commit b501a72d by renyizhao
Options

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

parent 113f2ac4
Showing with 375 additions and 143 deletions
package.json
......@@ -17,7 +17,10 @@
},
"dependencies": {
"@element-plus/icons-vue": "2.3.1",
"@iconify/json": "^2.2.486",
"@iconify/vue": "^5.0.1",
"@lobehub/icons": "^5.10.0",
"@lobehub/icons-static-svg": "^1.91.0",
"@vueup/vue-quill": "1.2.0",
"@vueuse/core": "10.6.1",
"axios": "0.27.2",
......
src/components/LobeIcon/index.vue
<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>
<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({
name: { type: String, default: '' },
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(() => ({
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>
<style scoped lang="scss">
.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;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #4e6ef2, #6b8aff);
color: #fff;
font-weight: 600;
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-form-item>
<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-form-item>
</el-form>
......
src/views/console/tokenLog.vue
......@@ -61,6 +61,13 @@
</template>
</el-table-column>
<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">
<template #default="scope">
<span>{{ scope.row.prompt_tokens || 0 }}</span>
......@@ -294,6 +301,20 @@ function extractRechargeAmount(content) {
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(() => {
refresh()
})
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment