From a4942062de348dab1a69d5b89c75f7204211eb8d Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Wed, 4 Jun 2025 20:13:02 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20refactor:=20standardize=20model?=
 =?UTF-8?q?=20tag=20rendering=20across=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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    |  4 ----
 web/src/components/table/ModelPricing.js | 19 ++++++-------------
 web/src/helpers/render.js                |  2 +-
 3 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/web/src/components/table/LogsTable.js b/web/src/components/table/LogsTable.js
index ad28992e..50c02c2b 100644
--- a/web/src/components/table/LogsTable.js
+++ b/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) => { });
                 },
diff --git a/web/src/components/table/ModelPricing.js b/web/src/components/table/ModelPricing.js
index a7955c2c..8c76b049 100644
--- a/web/src/components/table/ModelPricing.js
+++ b/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()),
diff --git a/web/src/helpers/render.js b/web/src/helpers/render.js
index 72374ef6..b548217c 100644
--- a/web/src/helpers/render.js
+++ b/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}