fix(models): 区分价格状态与渠道标识

web/src/components/ui/StatusBadge.vue

@@ -4,6 +4,7 @@ import {
   CircleCheck,
   CircleHelp,
   CircleOff,
+  Info,
   LoaderCircle,
   PencilLine,
 } from '@lucide/vue'
@@ -50,6 +51,7 @@ const resolvedIcon = computed<StatusIcon>(() => {
   const statusIcon = presentation.value.icon as StatusIcon | undefined
   if (statusIcon) return statusIcon
   if (resolvedTone.value === 'success') return 'check'
+  if (resolvedTone.value === 'info') return 'info'
   if (resolvedTone.value === 'warning') return 'alert'
   if (resolvedTone.value === 'danger') return 'off'
   return 'help'
@@ -57,6 +59,7 @@ const resolvedIcon = computed<StatusIcon>(() => {
 const iconComponent = computed(() => {
   if (resolvedIcon.value === 'progress') return LoaderCircle
   if (resolvedIcon.value === 'check') return CircleCheck
+  if (resolvedIcon.value === 'info') return Info
   if (resolvedIcon.value === 'alert') return CircleAlert
   if (resolvedIcon.value === 'off') return CircleOff
   if (resolvedIcon.value === 'edit') return PencilLine
@@ -87,6 +90,9 @@ const iconComponent = computed(() => {
 .status-badge--success {
   background: var(--color-success-bg);
 }
+.status-badge--info {
+  background: var(--color-info-bg);
+}
 .status-badge--neutral {
   background: var(--color-neutral-bg);
 }
@@ -103,6 +109,7 @@ const iconComponent = computed(() => {
   font-weight: 600;
 }
 .status-badge--success,
+.status-badge--info,
 .status-badge--neutral,
 .status-badge--warning,
 .status-badge--danger {
@@ -114,6 +121,9 @@ const iconComponent = computed(() => {
 .status-badge--success svg {
   color: var(--color-success);
 }
+.status-badge--info svg {
+  color: var(--color-info);
+}
 .status-badge--warning svg {
   color: var(--color-warning);
 }

web/src/components/ui/status-presenter.ts

@@ -1,5 +1,5 @@
-export type StatusTone = 'success' | 'warning' | 'danger' | 'neutral'
-export type StatusIcon = 'check' | 'alert' | 'off' | 'progress' | 'help' | 'edit'
+export type StatusTone = 'success' | 'info' | 'warning' | 'danger' | 'neutral'
+export type StatusIcon = 'check' | 'info' | 'alert' | 'off' | 'progress' | 'help' | 'edit'
 
 export type OperationalStatus =
   'available' | 'cooldown' | 'blacklisted' | 'disabled' | 'unavailable' | 'unknown'

web/src/features/models/ModelPriceStatusBadge.vue

@@ -17,7 +17,7 @@ const presentation = computed<{ icon: StatusIcon; label: string; tone: StatusTon
   switch (props.price.method) {
     case 'auto_sync':
       return props.price.match_source === 'provider_priority_fallback'
-        ? { icon: 'alert', label: t('modelPrices.method.reference_price'), tone: 'warning' }
+        ? { icon: 'info', label: t('modelPrices.method.reference_price'), tone: 'info' }
         : { icon: 'check', label: t('modelPrices.method.auto_sync'), tone: 'success' }
     case 'user_set':
       return { icon: 'edit', label: t('modelPrices.method.user_set'), tone: 'neutral' }

web/src/features/models/ModelUpstreamDrawer.vue

@@ -142,8 +142,8 @@ defineExpose({ requestClose, confirmDiscardSwitch, discardChanges, hasUnsavedCha
         <div>
           <dt>{{ t('models.drawer.pricingChannel') }}</dt>
           <dd>
-            <span>{{ price.channel_name }}</span>
-            <code>{{ price.channel_id }}</code>
+            <span class="upstream-drawer__channel-name">{{ price.channel_name }}</span>
+            <code class="upstream-drawer__channel-id">{{ price.channel_id }}</code>
           </dd>
         </div>
         <div>
@@ -321,6 +321,22 @@ defineExpose({ requestClose, confirmDiscardSwitch, discardChanges, hasUnsavedCha
   overflow-wrap: anywhere;
 }
 
+.upstream-drawer__channel-name {
+  color: var(--color-text);
+  font-size: var(--text-body);
+}
+
+.upstream-drawer__identity .upstream-drawer__channel-id {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-tag);
+  background: var(--color-surface-sunken);
+  padding: 1px 5px;
+  color: var(--color-text-muted);
+  line-height: var(--line-compact);
+}
+
 .upstream-drawer__faint {
   color: var(--color-text-faint);
   font-size: var(--text-label-xs);

web/src/styles/tokens.css

@@ -23,6 +23,8 @@
   --color-code: #15181b;
   --color-success: #1a6b3f;
   --color-success-bg: #e6f3ec;
+  --color-info: #1c4f6e;
+  --color-info-bg: #e8eff4;
   --color-warning: #8f6212;
   --color-warning-bg: #f8f0dd;
   --color-danger: #d03b3b;
@@ -186,6 +188,8 @@
   --color-code: #e8eaec;
   --color-success: #4fb178;
   --color-success-bg: #112a1d;
+  --color-info: #6fb2d6;
+  --color-info-bg: #142633;
   --color-warning: #d5a341;
   --color-warning-bg: #241d10;
   --color-danger: #e66767;
@@ -224,6 +228,8 @@
     --color-code: #e8eaec;
     --color-success: #4fb178;
     --color-success-bg: #112a1d;
+    --color-info: #6fb2d6;
+    --color-info-bg: #142633;
     --color-warning: #d5a341;
     --color-warning-bg: #241d10;
     --color-danger: #e66767;