优化页面布局，调整组件样式和容器宽度，增强虚拟模型管理界面的可读性

frontend/src/components/layout/PageLayout.jsx

@@ -4,8 +4,8 @@ const PageLayout = ({ tabs }) => {
   const [activeTab, setActiveTab] = useState(0);
 
   return (
-    <div className="container mx-auto p-4">
-      <header className="mb-6">
+    <div className="p-6">
+      <header className="mb-6 max-w-7xl mx-auto">
         <h1 className="text-2xl font-bold mb-4">AI Gateway Config</h1>
         
         {/* 标签页导航 */}

frontend/src/features/virtual-models/index.jsx

@@ -36,7 +36,7 @@ const VirtualModelsPage = () => {
   };
 
   return (
-    <div>
+    <div className="space-y-6">
       {/* 创建虚拟模型弹窗 */}
       <Modal
         isOpen={isCreating}
@@ -65,7 +65,7 @@ const VirtualModelsPage = () => {
         />
       </Modal>
 
-      <div className="flex justify-between items-center mb-4">
+      <div className="flex justify-between items-center max-w-7xl mx-auto px-4">
         <h2 className="text-xl font-semibold">虚拟模型管理</h2>
         <button
           className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
@@ -75,7 +75,9 @@ const VirtualModelsPage = () => {
         </button>
       </div>
       
-      <VirtualModelList key={key} onEdit={handleEdit} />
+      <div className="px-4">
+        <VirtualModelList key={key} onEdit={handleEdit} />
+      </div>
     </div>
   );
 };