🚀 feat: Introduce full Model & Vendor Management suite (backend + frontend) and UI refinements

Backend
• Add `model/model_meta.go` and `model/vendor_meta.go` defining Model & Vendor entities with CRUD helpers, soft-delete and time stamps
• Create corresponding controllers `controller/model_meta.go`, `controller/vendor_meta.go` and register routes in `router/api-router.go`
• Auto-migrate new tables in DB startup logic

Frontend
• Build complete “Model Management” module under `/console/models`
  - New pages, tables, filters, actions, hooks (`useModelsData`) and dynamic vendor tabs
  - Modals `EditModelModal.jsx` & unified `EditVendorModal.jsx`; latter now uses default confirm/cancel footer and mobile-friendly modal sizing (`full-width` / `small`) via `useIsMobile`
• Update sidebar (`SiderBar.js`) and routing (`App.js`) to surface the feature
• Add helper updates (`render.js`) incl. `stringToColor`, dynamic LobeHub icon retrieval, and tag color palettes

Table UX improvements
• Replace separate status column with inline Enable / Disable buttons in operation column (matching channel table style)
• Limit visible tags to max 3; overflow represented as “+x” tag with padded `Popover` showing remaining tags
• Color all tags deterministically using `stringToColor` for consistent theming
• Change vendor column tag color to white for better contrast

Misc
• Minor layout tweaks, compact-mode toggle relocation, lint fixes and TypeScript/ESLint clean-up

These changes collectively deliver end-to-end model & vendor administration while unifying visual language across management tables.

web/src/components/table/models/index.jsx

@@ -0,0 +1,140 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import CardPro from '../../common/ui/CardPro';
+import ModelsTable from './ModelsTable.jsx';
+import ModelsActions from './ModelsActions.jsx';
+import ModelsFilters from './ModelsFilters.jsx';
+import ModelsTabs from './ModelsTabs.jsx';
+import EditModelModal from './modals/EditModelModal.jsx';
+import EditVendorModal from './modals/EditVendorModal.jsx';
+import { useModelsData } from '../../../hooks/models/useModelsData';
+import { useIsMobile } from '../../../hooks/common/useIsMobile';
+import { createCardProPagination } from '../../../helpers/utils';
+
+const ModelsPage = () => {
+  const modelsData = useModelsData();
+  const isMobile = useIsMobile();
+
+  const {
+    // Edit state
+    showEdit,
+    editingModel,
+    closeEdit,
+    refresh,
+
+    // Actions state
+    selectedKeys,
+    setEditingModel,
+    setShowEdit,
+    batchDeleteModels,
+
+    // Filters state
+    formInitValues,
+    setFormApi,
+    searchModels,
+    loading,
+    searching,
+
+    // Description state
+    compactMode,
+    setCompactMode,
+
+    // Vendor state
+    showAddVendor,
+    setShowAddVendor,
+    showEditVendor,
+    setShowEditVendor,
+    editingVendor,
+    setEditingVendor,
+    loadVendors,
+
+    // Translation
+    t,
+  } = modelsData;
+
+  return (
+    <>
+      <EditModelModal
+        refresh={refresh}
+        editingModel={editingModel}
+        visiable={showEdit}
+        handleClose={closeEdit}
+      />
+
+      <EditVendorModal
+        visible={showAddVendor || showEditVendor}
+        handleClose={() => {
+          setShowAddVendor(false);
+          setShowEditVendor(false);
+          setEditingVendor({ id: undefined });
+        }}
+        editingVendor={showEditVendor ? editingVendor : { id: undefined }}
+        refresh={() => {
+          loadVendors();
+          refresh();
+        }}
+      />
+
+      <CardPro
+        type="type3"
+        tabsArea={<ModelsTabs {...modelsData} />}
+        actionsArea={
+          <div className="flex flex-col md:flex-row justify-between items-center gap-2 w-full">
+            <ModelsActions
+              selectedKeys={selectedKeys}
+              setEditingModel={setEditingModel}
+              setShowEdit={setShowEdit}
+              batchDeleteModels={batchDeleteModels}
+              compactMode={compactMode}
+              setCompactMode={setCompactMode}
+              t={t}
+            />
+
+            <div className="w-full md:w-full lg:w-auto order-1 md:order-2">
+              <ModelsFilters
+                formInitValues={formInitValues}
+                setFormApi={setFormApi}
+                searchModels={searchModels}
+                loading={loading}
+                searching={searching}
+                t={t}
+              />
+            </div>
+          </div>
+        }
+        paginationArea={createCardProPagination({
+          currentPage: modelsData.activePage,
+          pageSize: modelsData.pageSize,
+          total: modelsData.modelCount,
+          onPageChange: modelsData.handlePageChange,
+          onPageSizeChange: modelsData.handlePageSizeChange,
+          isMobile: isMobile,
+          t: modelsData.t,
+        })}
+        t={modelsData.t}
+      >
+        <ModelsTable {...modelsData} />
+      </CardPro>
+    </>
+  );
+};
+
+export default ModelsPage;