首页布局优化前

desktop/src/components/Settings/SettingsLayout.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { useGatewayStore } from '../../store/gatewayStore';
 import {
   Settings as SettingsIcon,
   BarChart3,
@@ -28,6 +29,7 @@ import { About } from './About';
 import { Credits } from './Credits';
 import { AuditLogsPanel } from '../AuditLogsPanel';
 import { SecurityStatus } from '../SecurityStatus';
+import { SecurityLayersPanel } from '../SecurityLayersPanel';
 import { TaskList } from '../TaskList';
 
 interface SettingsLayoutProps {
@@ -69,6 +71,7 @@ const menuItems: { id: SettingsPage; label: string; icon: React.ReactNode }[] =
 
 export function SettingsLayout({ onBack }: SettingsLayoutProps) {
   const [activePage, setActivePage] = useState<SettingsPage>('general');
+  const { securityStatus } = useGatewayStore();
 
   const renderPage = () => {
     switch (activePage) {
@@ -82,9 +85,22 @@ export function SettingsLayout({ onBack }: SettingsLayoutProps) {
       case 'workspace': return <Workspace />;
       case 'privacy': return <Privacy />;
       case 'security': return (
-        <div className="max-w-3xl">
-          <h1 className="text-xl font-bold text-gray-900 mb-6">安全状态</h1>
-          <SecurityStatus />
+        <div className="space-y-6">
+          <div>
+            <h1 className="text-xl font-bold text-gray-900 mb-4">安全状态</h1>
+            <SecurityStatus />
+          </div>
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900 mb-4">安全架构详情</h2>
+            <SecurityLayersPanel
+              status={securityStatus || {
+                layers: [],
+                enabledCount: 0,
+                totalCount: 16,
+                securityLevel: 'low',
+              }}
+            />
+          </div>
         </div>
       );
       case 'audit': return <AuditLogsPanel />;