🎨 refactor: standardize model tag rendering across components

Refactor model tag rendering to ensure consistency throughout the application:

- Replace direct Tag component in ModelPricing with centralized renderModelTag function
- Update renderModelTag in render.js to use stringToColor for consistent color generation
- Remove redundant stringToColor calls in LogsTable.js renderModelName function

This change improves UI consistency by ensuring all model tags have the same styling, iconography, and color generation logic. Model tags now automatically display appropriate vendor icons based on the model name pattern.

web/src/components/table/LogsTable.js

@@ -200,7 +200,6 @@ const LogsTable = () => {
       other?.upstream_model_name !== '';
     if (!modelMapped) {
       return renderModelTag(record.model_name, {
-        color: stringToColor(record.model_name),
         onClick: (event) => {
           copyText(event, record.model_name).then((r) => { });
         }
@@ -216,7 +215,6 @@ const LogsTable = () => {
                     <div className="flex items-center">
                       <Text strong style={{ marginRight: 8 }}>{t('请求并计费模型')}:</Text>
                       {renderModelTag(record.model_name, {
-                        color: stringToColor(record.model_name),
                         onClick: (event) => {
                           copyText(event, record.model_name).then((r) => { });
                         }
@@ -225,7 +223,6 @@ const LogsTable = () => {
                     <div className="flex items-center">
                       <Text strong style={{ marginRight: 8 }}>{t('实际模型')}:</Text>
                       {renderModelTag(other.upstream_model_name, {
-                        color: stringToColor(other.upstream_model_name),
                         onClick: (event) => {
                           copyText(event, other.upstream_model_name).then((r) => { });
                         }
@@ -236,7 +233,6 @@ const LogsTable = () => {
               }
             >
               {renderModelTag(record.model_name, {
-                color: stringToColor(record.model_name),
                 onClick: (event) => {
                   copyText(event, record.model_name).then((r) => { });
                 },

web/src/components/table/ModelPricing.js

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useRef, useMemo, useState } from 'react';
-import { API, copy, showError, showInfo, showSuccess, getModelCategories } from '../../helpers/index.js';
+import { API, copy, showError, showInfo, showSuccess, getModelCategories, renderModelTag } from '../../helpers/index.js';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -120,18 +120,11 @@ const ModelPricing = () => {
       title: t('模型名称'),
       dataIndex: 'model_name',
       render: (text, record, index) => {
-        return (
-          <Tag
-            color='green'
-            size='large'
-            shape='circle'
-            onClick={() => {
-              copyText(text);
-            }}
-          >
-            {text}
-          </Tag>
-        );
+        return renderModelTag(text, {
+          onClick: () => {
+            copyText(text);
+          }
+        });
       },
       onFilter: (value, record) =>
         record.model_name.toLowerCase().includes(value.toLowerCase()),

web/src/helpers/render.js

@@ -313,7 +313,7 @@ export function renderModelTag(modelName, options = {}) {
 
   return (
     <Tag
-      color={color || modelToColor(modelName)}
+      color={color || stringToColor(modelName)}
       prefixIcon={icon}
       suffixIcon={suffixIcon}
       size={size}