feat: implement layout store management and add API documentation modal

src/pages/view/list.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useStudioStore } from '../studio/store.ts';
-import { Search, RotateCw, Plus, MoreHorizontal, Layout, Edit2, Trash2, MousePointer2 } from "lucide-react";
+import { Search, RotateCw, Plus, MoreHorizontal, Layout, Edit2, Trash2, MousePointer2, Book } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import {
@@ -14,7 +14,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import { ViewEditor } from "@/pages/view/components/ViewEditor.tsx";
 import { toast } from "sonner";
 import { useShallow } from "zustand/shallow";
-
+import { DocsModal } from './components/DocsModal.tsx'
 const ViewItem = ({ view, onEdit, onDelete, onDeleteViewItem }: { view: any; onEdit: (view: any) => void; onDelete: (id: string) => void; onDeleteViewItem: (id: string, viewId: string) => void }) => {
   const [expanded, setExpanded] = useState(false);
   const studioStore = useStudioStore(useShallow((state) => ({
@@ -158,22 +158,29 @@ const ViewItem = ({ view, onEdit, onDelete, onDeleteViewItem }: { view: any; onE
   </div>
 }
 export const ViewList = () => {
-  const { routeViewList, updateRouteView, deleteRouteView, deleteRouteViewItem, getViewList } = useStudioStore();
+  const store = useStudioStore(useShallow((state) => ({
+    routeViewList: state.routeViewList,
+    updateRouteView: state.updateRouteView,
+    deleteRouteView: state.deleteRouteView,
+    deleteRouteViewItem: state.deleteRouteViewItem,
+    getViewList: state.getViewList,
+    setShowApiDocs: state.setShowApiDocs,
+  })));
   const [searchTerm, setSearchTerm] = useState("");
   const [editorOpen, setEditorOpen] = useState(false);
   const [editingView, setEditingView] = useState<any>(null);
 
-  const filteredViews = routeViewList.filter(view =>
+  const filteredViews = store.routeViewList.filter(view =>
     (view.title || '未命名视图').toLowerCase().includes(searchTerm.toLowerCase()) ||
     (view.description || '').toLowerCase().includes(searchTerm.toLowerCase())
   );
   useEffect(() => {
-    getViewList();
+    store.getViewList();
   }, [])
 
   const handleRefresh = async () => {
     const toastId = toast.loading('正在刷新视图列表...');
-    await getViewList();
+    await store.getViewList();
     // toast.update(toastId, { render: '视图列表已刷新', type: 'success', id: false, autoClose: 1000 });
     toast.success('视图列表已刷新', { duration: 1000 });
     toast.dismiss(toastId);
@@ -190,17 +197,20 @@ export const ViewList = () => {
 
   const handleDelete = (id: string) => {
     if (confirm('确定要删除这个视图吗？')) {
-      deleteRouteView(id);
+      store.deleteRouteView(id);
     }
   };
 
   const handleSaveView = (viewData: any) => {
-    updateRouteView(viewData);
+    store.updateRouteView(viewData);
   };
 
   return (
     <div className="w-full h-full max-w-4xl p-4 border border-gray-200 rounded-md shadow-sm">
       <div className="flex items-center space-x-2 mb-4">
+        <Button onClick={() => store.setShowApiDocs(true)} title='文档' variant="outline" size="icon" className="h-8 w-8 cursor-pointer border-gray-300">
+          <Book size={16} />
+        </Button>
         <div className="relative flex-1">
           <Input
             placeholder="搜索视图..."
@@ -230,7 +240,7 @@ export const ViewList = () => {
               view={view}
               onEdit={handleEdit}
               onDelete={handleDelete}
-              onDeleteViewItem={deleteRouteViewItem}
+              onDeleteViewItem={store.deleteRouteViewItem}
             />
           ))
         )}
@@ -242,6 +252,7 @@ export const ViewList = () => {
         data={editingView}
         onSave={handleSaveView}
       />
+      <DocsModal />
     </div>
   );
 }