Refactor(setting-model): Refactor the model management interface and optimize the component structure. #10703 (#10905)

### What problem does this PR solve?

Refactor(setting-model): Refactor the model management interface and
optimize the component structure. #10703

### Type of change

- [x] Refactoring

web/src/pages/user-setting/setting-model/components/used-model.tsx

@@ -0,0 +1,27 @@
+import { LlmItem, useSelectLlmList } from '@/hooks/llm-hooks';
+import { ModelProviderCard } from './modal-card';
+
+export const UsedModel = ({
+  handleAddModel,
+  handleEditModel,
+}: {
+  handleAddModel: (factory: string) => void;
+  handleEditModel: (model: any, factory: LlmItem) => void;
+}) => {
+  const { factoryList, myLlmList: llmList, loading } = useSelectLlmList();
+  return (
+    <div className="flex flex-col w-full">
+      <div className="text-text-primary text-2xl mb-4 mt-4">Added models</div>
+      {llmList.map((llm) => {
+        return (
+          <ModelProviderCard
+            key={llm.name}
+            item={llm}
+            clickApiKey={handleAddModel}
+            handleEditModel={handleEditModel}
+          />
+        );
+      })}
+    </div>
+  );
+};