✨ feat: Add model icon support across backend and UI; prefer model icon over vendor; add icon column in Models table

Backend:
- Model: Add `icon` field to `model.Model` (gorm: varchar(128)); auto-migrated via GORM.
- Pricing API: Extend `model.Pricing` with `icon` and populate from model meta in `GetPricing()`.

Frontend:
- EditModelModal: Add `icon` input (with @lobehub/icons helper link); wire into init/load/submit flows.
- ModelHeader / PricingCardView: Prefer rendering `model.icon`; fallback to `vendor_icon`; final fallback to initials avatar.
- Models table: Add leading “Icon” column, rendering `model.icon` or `vendor` icon via `getLobeHubIcon`.

Notes:
- Backward-compatible. Existing data without `icon` remain unaffected.
- No manual SQL needed; column is added by AutoMigrate.

Affected files:
- model/model_meta.go
- model/pricing.go
- web/src/components/table/models/modals/EditModelModal.jsx
- web/src/components/table/model-pricing/modal/components/ModelHeader.jsx
- web/src/components/table/model-pricing/view/card/PricingCardView.jsx
- web/src/components/table/models/ModelsColumnDefs.js

web/src/components/table/model-pricing/modal/components/ModelHeader.jsx

@@ -29,9 +29,19 @@ const CARD_STYLES = {
 };
 
 const ModelHeader = ({ modelData, vendorsMap = {}, t }) => {
-  // 获取模型图标（使用供应商图标）
+  // 获取模型图标（优先模型图标，其次供应商图标）
   const getModelIcon = () => {
-    // 优先使用供应商图标
+    // 1) 优先使用模型自定义图标
+    if (modelData?.icon) {
+      return (
+        <div className={CARD_STYLES.container}>
+          <div className={CARD_STYLES.icon}>
+            {getLobeHubIcon(modelData.icon, 32)}
+          </div>
+        </div>
+      );
+    }
+    // 2) 退化为供应商图标
     if (modelData?.vendor_icon) {
       return (
         <div className={CARD_STYLES.container}>

web/src/components/table/model-pricing/view/card/PricingCardView.jsx

@@ -81,7 +81,17 @@ const PricingCardView = ({
         </div>
       );
     }
-    // 优先使用供应商图标
+    // 1) 优先使用模型自定义图标
+    if (model.icon) {
+      return (
+        <div className={CARD_STYLES.container}>
+          <div className={CARD_STYLES.icon}>
+            {getLobeHubIcon(model.icon, 32)}
+          </div>
+        </div>
+      );
+    }
+    // 2) 退化为供应商图标
     if (model.vendor_icon) {
       return (
         <div className={CARD_STYLES.container}>

web/src/components/table/models/ModelsColumnDefs.js

@@ -33,6 +33,17 @@ function renderTimestamp(timestamp) {
   return <>{timestamp2string(timestamp)}</>;
 }
 
+// Render model icon column: prefer model.icon, then fallback to vendor icon
+const renderModelIconCol = (record, vendorMap) => {
+  const iconKey = record?.icon || vendorMap[record?.vendor_id]?.icon;
+  if (!iconKey) return '-';
+  return (
+    <div className="flex items-center justify-center">
+      {getLobeHubIcon(iconKey, 20)}
+    </div>
+  );
+};
+
 // Render vendor column with icon
 const renderVendorTag = (vendorId, vendorMap, t) => {
   if (!vendorId || !vendorMap[vendorId]) return '-';
@@ -222,6 +233,13 @@ export const getModelsColumns = ({
   vendorMap,
 }) => {
   return [
+    {
+      title: t('图标'),
+      dataIndex: 'icon',
+      width: 70,
+      align: 'center',
+      render: (text, record) => renderModelIconCol(record, vendorMap),
+    },
     {
       title: t('模型名称'),
       dataIndex: 'model_name',

web/src/components/table/models/modals/EditModelModal.jsx

@@ -33,6 +33,7 @@ import {
   Row,
 } from '@douyinfe/semi-ui';
 import { Save, X, FileText } from 'lucide-react';
+import { IconLink } from '@douyinfe/semi-icons';
 import { API, showError, showSuccess } from '../../../../helpers';
 import { useTranslation } from 'react-i18next';
 import { useIsMobile } from '../../../../hooks/common/useIsMobile';
@@ -112,6 +113,7 @@ const EditModelModal = (props) => {
   const getInitValues = () => ({
     model_name: props.editingModel?.model_name || '',
     description: '',
+    icon: '',
     tags: [],
     vendor_id: undefined,
     vendor: '',
@@ -314,6 +316,27 @@ const EditModelModal = (props) => {
                     />
                   </Col>
 
+                  <Col span={24}>
+                    <Form.Input
+                      field='icon'
+                      label={t('模型图标')}
+                      placeholder={t('请输入图标名称')}
+                      extraText={
+                        <span>
+                          {t('图标使用@lobehub/icons库，如：OpenAI、Claude.Color，支持链式参数：OpenAI.Avatar.type={\'platform\'}、OpenRouter.Avatar.shape={\'square\'}，查询所有可用图标请 ')}
+                          <Typography.Text
+                            link={{ href: 'https://icons.lobehub.com/components/lobe-hub', target: '_blank' }}
+                            icon={<IconLink />}
+                            underline
+                          >
+                            {t('请点击我')}
+                          </Typography.Text>
+                        </span>
+                      }
+                      showClear
+                    />
+                  </Col>
+
                   <Col span={24}>
                     <Form.TextArea
                       field='description'