update

package.json

@@ -23,12 +23,17 @@
     "@astrojs/react": "^4.4.2",
     "@astrojs/sitemap": "^3.6.0",
     "@astrojs/vue": "^5.1.3",
+    "@hookform/resolvers": "^5.2.2",
     "@kevisual/context": "^0.0.4",
     "@kevisual/query": "^0.0.35",
     "@kevisual/query-login": "^0.0.7",
     "@kevisual/registry": "^0.0.1",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.4",
     "@tailwindcss/vite": "^4.1.18",
+    "@uiw/react-codemirror": "^4.25.4",
     "@uiw/react-md-editor": "^4.0.11",
     "antd": "^6.1.3",
     "astro": "^5.16.6",
@@ -44,9 +49,12 @@
     "nanoid": "^5.1.6",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
+    "react-hook-form": "^7.70.0",
     "react-toastify": "^11.0.5",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "vue": "^3.5.26",
+    "zod": "^4.3.5",
     "zustand": "^5.0.9"
   },
   "publishConfig": {

readme.md

@@ -4,14 +4,8 @@
 
 ## 使用方法
 
-### simple-lit-vite
+### simple-astro-template
 
 ```sh
 ev sync clone -i https://kevisual.cn/root/ai/kevisual/frontend/simple-astro-template/kevisual.json
 ```
-
-### simple-slide
-
-```sh
-ev sync clone -i https://kevisual.cn/root/ai/kevisual/frontend/simple-astro-template/kevisual.json
-```

src/apps/xhs-tags/index.tsx

@@ -0,0 +1,90 @@
+import { useAppStore } from './store';
+import { useShallow } from 'zustand/shallow';
+import { useEffect } from 'react';
+import { Table } from 'antd';
+import { Button } from '@/components/ui/button';
+import { ConfigProvider } from 'antd';
+import { Toaster } from 'sonner'
+import { FormModal } from './modules/Form';
+import { DetailModal } from './modules/Detail';
+export const App = () => {
+  const store = useAppStore(useShallow((state) => ({
+    list: state.list,
+    queryList: state.queryList,
+    setPagination: state.setPagination,
+    pagination: state.pagination,
+    deleteItem: state.deleteItem,
+    formData: state.formData,
+    setFormData: state.setFormData,
+    open: state.open,
+    setOpen: state.setOpen,
+    openDetail: state.openDetail,
+    setOpenDetail: state.setOpenDetail,
+  })));
+  useEffect(() => {
+    store.queryList();
+  }, []);
+
+  const columns = [
+    { title: 'ID', dataIndex: 'id', key: 'id' },
+    { title: '标题', dataIndex: 'title', key: 'title' },
+    { title: '描述', dataIndex: 'description', key: 'description' },
+    {
+      title: '操作',
+      dataIndex: 'action',
+      render: (_, record) => {
+        return (
+          <div className='flex gap-2'>
+            <Button
+              className='cursor-pointer'
+              onClick={() => {
+                store.setFormData(record);
+                store.setOpenDetail(true)
+              }}
+            >查看</Button>
+            <Button
+              className='cursor-pointer'
+              onClick={() => {
+                store.setFormData(record);
+                store.setOpen(true);
+              }}>编辑</Button>
+            <Button className='bg-red-300 cursor-pointer' onClick={() => {
+              store.deleteItem(record.id)
+            }}>删除</Button>
+          </div>
+        )
+      }
+    }
+  ];
+  return (
+    <>
+      <Table
+        dataSource={store.list}
+        columns={columns}
+        pagination={
+          {
+            ...store.pagination,
+            onChange: (page, pageSize) => {
+              store.setPagination({
+                current: page,
+                pageSize: pageSize,
+                total: store.pagination?.total || 0,
+              });
+              store.queryList();
+            },
+          }
+        }
+        rowKey="id"
+      />
+    </>
+  );
+}
+
+export const AppProvider = () => {
+  return <ConfigProvider>
+    <App />
+    <FormModal />
+    <DetailModal />
+    <Toaster />
+  </ConfigProvider>;
+}

src/apps/xhs-tags/modules/Detail.tsx

@@ -0,0 +1,41 @@
+import CodeMirror from '@uiw/react-codemirror';
+import { useAppStore } from '../store';
+import { useShallow } from 'zustand/shallow';
+import { useMemo } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+
+export const Detail = ({ content }: { content: string }) => {
+  return (
+    <div className="p-4 w-full overflow-auto">
+      <CodeMirror
+        value={content}
+        height="600px"
+        extensions={[]}
+        readOnly={true}
+      />
+    </div>
+  );
+}
+
+export const DetailModal = () => {
+  const store = useAppStore(useShallow((state) => ({
+    formData: state.formData,
+    open: state.openDetail,
+    setOpen: state.setOpenDetail,
+  })));
+
+  const text = useMemo(() => {
+    if (store.formData) {
+      return JSON.stringify(store.formData, null, 2);
+    }
+    return "";
+  }, [store.formData]);
+  return (<Dialog open={store.open} onOpenChange={store.setOpen}>
+    <DialogContent className="!max-w-[50rem] overflow-auto border-gray-300" >
+      <DialogHeader>
+        <DialogTitle>详情</DialogTitle>
+      </DialogHeader>
+      <Detail content={text} />
+    </DialogContent>
+  </Dialog>);
+}

src/apps/xhs-tags/modules/Form.tsx

@@ -0,0 +1,90 @@
+import { useForm } from "react-hook-form"
+import { useAppStore } from "../store";
+import { useShallow } from "zustand/shallow";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+
+type FormData = {
+  title: string;
+  description: string;
+}
+
+export const FormEdit = () => {
+  const store = useAppStore(useShallow((state) => ({
+    formData: state.formData,
+    setFormData: state.setFormData,
+    createOrUpdateItem: state.createOrUpdateItem,
+    setOpen: state.setOpen,
+  })));
+
+  const { register, handleSubmit } = useForm<FormData>({
+    defaultValues: {
+      title: store.formData?.title || "",
+      description: store.formData?.description || "",
+    }
+  });
+
+  const onSubmit = async (data: FormData) => {
+    await store.createOrUpdateItem({
+      ...store.formData,
+      ...data
+    });
+    store.setOpen(false);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="title">Title</Label>
+        <Input
+          id="title"
+          {...register("title")}
+          placeholder="Enter title"
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="description">Description</Label>
+        <Textarea
+          id="description"
+          {...register("description")}
+          placeholder="Enter description"
+          rows={4}
+        />
+      </div>
+
+      <DialogFooter>
+        <Button type="submit">Save</Button>
+      </DialogFooter>
+    </form>
+  )
+}
+
+export const FormModal = () => {
+  const store = useAppStore(useShallow((state) => ({
+    formData: state.formData,
+    open: state.open,
+    setOpen: state.setOpen,
+  })));
+  const isEdit = !!store.formData?.id;
+
+  return (
+    <Dialog open={store.open} onOpenChange={store.setOpen}>
+      <DialogContent className="max-w-2xl border-gray-300">
+        <DialogHeader>
+          <DialogTitle>{isEdit ? "编辑" : "创建"}</DialogTitle>
+        </DialogHeader>
+        <FormEdit />
+      </DialogContent>
+    </Dialog>
+  )
+}

src/apps/xhs-tags/store/index.ts

@@ -0,0 +1,74 @@
+import { create } from 'zustand';
+import { query } from '@/modules/query'
+import { toast } from 'sonner';
+
+type Pagination = { current?: number; pageSize?: number; total?: number; }
+type State = {
+  pagination?: Pagination;
+  setPagination: (pagination: Pagination) => void;
+  list: any[];
+  setList: (list: any[]) => void;
+  open?: boolean;
+  setOpen: (open: boolean) => void;
+  openDetail?: boolean;
+  setOpenDetail: (open: boolean) => void;
+  formData?: any;
+  setFormData: (formData: any) => void;
+
+  queryList: (pagination?: Pagination) => Promise<void>;
+  deleteItem: (id: string) => Promise<void>;
+  createOrUpdateItem: (data: any) => Promise<void>;
+}
+export const useAppStore = create<State>((set, get) => ({
+  pagination: undefined,
+  setPagination: (pagination) => set({ pagination }),
+  list: [],
+  setList: (list) => set({ list }),
+  open: false,
+  setOpen: (open) => set({ open }),
+  openDetail: false,
+  setOpenDetail: (open) => set({ openDetail: open }),
+  
+  formData: undefined,
+  setFormData: (formData) => set({ formData }),
+  queryList: async (pagination) => {
+    const { pagination: statePagination } = get();
+    const res = await query.post({
+      path: 'xhs-tags',
+      key: 'list',
+      page: pagination?.current || statePagination?.current || 1,
+      pageSize: pagination?.pageSize || statePagination?.pageSize || 30,
+    });
+    if (res.code === 200 && res?.data) {
+      let list = res.data.list || [];
+      set({ list: list });
+      set({
+        pagination: res.data.pagination || {}
+      });
+    }
+  },
+  deleteItem: async (id: string) => {
+    const res = await query.post({
+      path: 'xhs-tags',
+      key: 'delete',
+      data: { id }
+    });
+    if (res.code === 200) {
+      await get().queryList();
+    } else {
+      toast.error('删除失败' + (res.message ? `：${res.message}` : ''));
+    }
+  },
+  createOrUpdateItem: async (data: any) => {
+    const res = await query.post({
+      path: 'xhs-tags',
+      key: 'update',
+      data
+    });
+    if (res.code === 200) {
+      await get().queryList();
+    } else {
+      toast.error('操作失败' + (res.message ? `：${res.message}` : ''));
+    }
+  },
+}));

src/apps/xhs-tags/store/types.ts

@@ -0,0 +1,8 @@
+export type TagItem = {
+  id: string;
+  title: string;
+  description: string;
+  userId: string;
+  createdAt: number;
+  updatedAt: number;
+}

src/apps/xhs-users/index.tsx

@@ -0,0 +1,93 @@
+import { useAppStore } from './store';
+import { useShallow } from 'zustand/shallow';
+import { useEffect } from 'react';
+import { Table } from 'antd';
+import { Button } from '@/components/ui/button';
+import { ConfigProvider } from 'antd';
+import { Image } from 'antd';
+import { Toaster } from 'sonner'
+import { FormModal } from './modules/Form';
+import { DetailModal } from './modules/Detail';
+import { render } from 'vue';
+export const App = () => {
+  const store = useAppStore(useShallow((state) => ({
+    list: state.list,
+    queryList: state.queryList,
+    setPagination: state.setPagination,
+    pagination: state.pagination,
+    deleteItem: state.deleteItem,
+    formData: state.formData,
+    setFormData: state.setFormData,
+    open: state.open,
+    setOpen: state.setOpen,
+    openDetail: state.openDetail,
+    setOpenDetail: state.setOpenDetail,
+  })));
+  useEffect(() => {
+    store.queryList();
+  }, []);
+
+  const columns = [
+    { title: '用户ID', dataIndex: 'id', key: 'id' },
+    { title: '昵称', dataIndex: 'nickname', key: 'nickname' },
+    { title: '头像', dataIndex: 'avatar', key: 'avatar', render: (text) => <Image src={text} style={{ width: 50, height: 50 }} /> },
+    { title: '链接', dataIndex: 'link', key: 'link', render: (text) => <a href={text} target='_blank'>链接</a> },
+    {
+      title: '操作',
+      dataIndex: 'action',
+      render: (_, record) => {
+        return (
+          <div className='flex gap-2'>
+            <Button
+              className='cursor-pointer'
+              onClick={() => {
+                store.setFormData(record);
+                store.setOpenDetail(true)
+              }}
+            >查看</Button>
+            <Button
+              className='cursor-pointer'
+              onClick={() => {
+                store.setFormData(record);
+                store.setOpen(true);
+              }}>编辑</Button>
+            <Button className='bg-red-300 cursor-pointer' onClick={() => {
+              store.deleteItem(record.id)
+            }}>删除</Button>
+          </div>
+        )
+      }
+    }
+  ];
+  return (
+    <>
+      <Table
+        dataSource={store.list}
+        columns={columns}
+        pagination={
+          {
+            ...store.pagination,
+            onChange: (page, pageSize) => {
+              store.setPagination({
+                current: page,
+                pageSize: pageSize,
+                total: store.pagination?.total || 0,
+              });
+              store.queryList();
+            },
+          }
+        }
+        rowKey="user_id"
+      />
+    </>
+  );
+}
+
+export const AppProvider = () => {
+  return <ConfigProvider>
+    <App />
+    <FormModal />
+    <DetailModal />
+    <Toaster />
+  </ConfigProvider>;
+}

src/apps/xhs-users/modules/Detail.tsx

@@ -0,0 +1,41 @@
+import CodeMirror from '@uiw/react-codemirror';
+import { useAppStore } from '../store';
+import { useShallow } from 'zustand/shallow';
+import { useMemo } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+
+export const Detail = ({ content }: { content: string }) => {
+  return (
+    <div className="p-4 w-full overflow-auto">
+      <CodeMirror
+        value={content}
+        height="600px"
+        extensions={[]}
+        readOnly={true}
+      />
+    </div>
+  );
+}
+
+export const DetailModal = () => {
+  const store = useAppStore(useShallow((state) => ({
+    formData: state.formData,
+    open: state.openDetail,
+    setOpen: state.setOpenDetail,
+  })));
+
+  const text = useMemo(() => {
+    if (store.formData) {
+      return JSON.stringify(store.formData, null, 2);
+    }
+    return "";
+  }, [store.formData]);
+  return (<Dialog open={store.open} onOpenChange={store.setOpen}>
+    <DialogContent className="!max-w-[50rem] overflow-auto border-gray-300" >
+      <DialogHeader>
+        <DialogTitle>详情</DialogTitle>
+      </DialogHeader>
+      <Detail content={text} />
+    </DialogContent>
+  </Dialog>);
+}

src/apps/xhs-users/modules/Form.tsx

@@ -0,0 +1,113 @@
+import { useForm } from "react-hook-form"
+import { useAppStore } from "../store";
+import { useShallow } from "zustand/shallow";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+
+type FormData = {
+  username: string;
+  nickname: string;
+  avatar: string;
+  xsecToken: string;
+}
+
+export const FormEdit = () => {
+  const store = useAppStore(useShallow((state) => ({
+    formData: state.formData,
+    setFormData: state.setFormData,
+    createOrUpdateItem: state.createOrUpdateItem,
+    setOpen: state.setOpen,
+  })));
+
+  const { register, handleSubmit } = useForm<FormData>({
+    defaultValues: {
+      username: store.formData?.username || "",
+      nickname: store.formData?.nickname || "",
+      avatar: store.formData?.avatar || "",
+      xsecToken: store.formData?.xsecToken || "",
+    }
+  });
+
+  const onSubmit = async (data: FormData) => {
+    await store.createOrUpdateItem({
+      ...store.formData,
+      ...data
+    });
+    store.setOpen(false);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="username">Username</Label>
+        <Input
+          id="username"
+          {...register("username")}
+          placeholder="Enter username"
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="nickname">Nickname</Label>
+        <Input
+          id="nickname"
+          {...register("nickname")}
+          placeholder="Enter nickname"
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="avatar">Avatar</Label>
+        <Textarea
+          id="avatar"
+          {...register("avatar")}
+          placeholder="Enter avatar URL"
+          rows={2}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="xsecToken">Xsec Token</Label>
+        <Textarea
+          id="xsecToken"
+          {...register("xsecToken")}
+          placeholder="Enter xsec token"
+          rows={3}
+        />
+      </div>
+
+      <DialogFooter>
+        <Button type="submit">Save</Button>
+      </DialogFooter>
+    </form>
+  )
+}
+
+export const FormModal = () => {
+  const store = useAppStore(useShallow((state) => ({
+    formData: state.formData,
+    open: state.open,
+    setOpen: state.setOpen,
+  })));
+  const isEdit = !!store.formData?.id;
+
+  return (
+    <Dialog open={store.open} onOpenChange={store.setOpen}>
+      <DialogContent className="max-w-2xl border-gray-300">
+        <DialogHeader>
+          <DialogTitle>{isEdit ? "编辑" : "创建"}</DialogTitle>
+        </DialogHeader>
+        <FormEdit />
+      </DialogContent>
+    </Dialog>
+  )
+}

src/apps/xhs-users/store/index.ts

@@ -0,0 +1,74 @@
+import { create } from 'zustand';
+import { query } from '@/modules/query'
+import { toast } from 'sonner';
+
+type Pagination = { current?: number; pageSize?: number; total?: number; }
+type State = {
+  pagination?: Pagination;
+  setPagination: (pagination: Pagination) => void;
+  list: any[];
+  setList: (list: any[]) => void;
+  open?: boolean;
+  setOpen: (open: boolean) => void;
+  openDetail?: boolean;
+  setOpenDetail: (open: boolean) => void;
+  formData?: any;
+  setFormData: (formData: any) => void;
+
+  queryList: (pagination?: Pagination) => Promise<void>;
+  deleteItem: (id: string) => Promise<void>;
+  createOrUpdateItem: (data: any) => Promise<void>;
+}
+export const useAppStore = create<State>((set, get) => ({
+  pagination: undefined,
+  setPagination: (pagination) => set({ pagination }),
+  list: [],
+  setList: (list) => set({ list }),
+  open: false,
+  setOpen: (open) => set({ open }),
+  openDetail: false,
+  setOpenDetail: (open) => set({ openDetail: open }),
+  
+  formData: undefined,
+  setFormData: (formData) => set({ formData }),
+  queryList: async (pagination) => {
+    const { pagination: statePagination } = get();
+    const res = await query.post({
+      path: 'xhs-users',
+      key: 'list',
+      page: pagination?.current || statePagination?.current || 1,
+      pageSize: pagination?.pageSize || statePagination?.pageSize || 30,
+    });
+    if (res.code === 200 && res?.data) {
+      let list = res.data.list || [];
+      set({ list: list });
+      set({
+        pagination: res.data.pagination || {}
+      });
+    }
+  },
+  deleteItem: async (id: string) => {
+    const res = await query.post({
+      path: 'xhs-users',
+      key: 'delete',
+      data: { id }
+    });
+    if (res.code === 200) {
+      await get().queryList();
+    } else {
+      toast.error('删除失败' + (res.message ? `：${res.message}` : ''));
+    }
+  },
+  createOrUpdateItem: async (data: any) => {
+    const res = await query.post({
+      path: 'xhs-users',
+      key: 'update',
+      data
+    });
+    if (res.code === 200) {
+      await get().queryList();
+    } else {
+      toast.error('操作失败' + (res.message ? `：${res.message}` : ''));
+    }
+  },
+}));

src/apps/xhs-users/store/types.ts

@@ -0,0 +1,9 @@
+export type UserItem = {
+  id: string;
+  xsecToken: string;
+  username: string;
+  nickname: string;
+  avatar: string;
+  createdAt: number;
+  updatedAt: number;
+}

src/apps/xhs/index.tsx

@@ -0,0 +1,100 @@
+import { useAppStore } from './store';
+import { useShallow } from 'zustand/shallow';
+import { useEffect } from 'react';
+import { Table } from 'antd';
+import { Button } from '@/components/ui/button';
+import { ConfigProvider } from 'antd';
+import { Image } from 'antd';
+import { Toaster } from 'sonner'
+import { FormModal } from './modules/Form';
+import { DetailModal } from './modules/Detail';
+export const App = () => {
+  const store = useAppStore(useShallow((state) => ({
+    list: state.list,
+    queryList: state.queryList,
+    setPagination: state.setPagination,
+    pagination: state.pagination,
+    deleteItem: state.deleteItem,
+    formData: state.formData,
+    setFormData: state.setFormData,
+    open: state.open,
+    setOpen: state.setOpen,
+    openDetail: state.openDetail,
+    setOpenDetail: state.setOpenDetail,
+  })));
+  useEffect(() => {
+    store.queryList();
+  }, []);
+
+  console.log('store.list', store.pagination);
+  const columns = [
+    // { title: 'ID', dataIndex: 'id', key: 'id' },
+    { title: '标题', dataIndex: 'title', key: 'title' },
+    { title: '封面', dataIndex: 'cover', key: 'cover', render: (text) => <Image src={text} style={{ width: 50, height: 50 }} /> },
+    { title: '描述', dataIndex: 'description', key: 'description' },
+    { title: '作者', dataIndex: 'authorUrl', key: 'authorUrl', render: (text) => <a href={text} target="_blank" rel="noreferrer">作者链接</a> },
+    { title: '链接', dataIndex: 'link', render: (text) => <a href={text} target="_blank" rel="noreferrer">笔记链接</a> },
+    {
+      title: '作者', dataIndex: 'data', render: (data) => {
+        return data?.user?.nickname || '';
+      }
+    },
+    {
+      title: '操作',
+      dataIndex: 'action',
+      render: (_, record) => {
+        return (
+          <div className='flex gap-2'>
+            <Button
+              className='cursor-pointer'
+              onClick={() => {
+                store.setFormData(record);
+                store.setOpenDetail(true)
+              }}
+            >查看</Button>
+            <Button
+              className='cursor-pointer'
+              onClick={() => {
+                store.setFormData(record);
+                store.setOpen(true);
+              }}>编辑</Button>
+            <Button className='bg-red-300 cursor-pointer' onClick={() => {
+              store.deleteItem(record.id)
+            }}>删除</Button>
+          </div>
+        )
+      }
+    }
+  ];
+  return (
+    <>
+      <Table
+        dataSource={store.list}
+        columns={columns}
+        pagination={
+          {
+            ...store.pagination,
+            onChange: (page, pageSize) => {
+              store.setPagination({
+                current: page,
+                pageSize: pageSize,
+                total: store.pagination?.total || 0,
+              });
+              store.queryList();
+            },
+          }
+        }
+        rowKey="id"
+      />
+    </>
+  );
+}
+
+export const AppProvider = () => {
+  return <ConfigProvider>
+    <App />
+    <FormModal />
+    <DetailModal />
+    <Toaster />
+  </ConfigProvider>;
+}

src/apps/xhs/modules/Detail.tsx

@@ -0,0 +1,43 @@
+import CodeMirror from '@uiw/react-codemirror';
+import { useAppStore } from '../store';
+import { useShallow } from 'zustand/shallow';
+import { useMemo } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+
+export const Detail = ({ content }: { content: string }) => {
+  return (
+    <div className="p-4 w-full overflow-auto">
+      <CodeMirror
+        value={content}
+        height="600px"
+        extensions={[]}
+        readOnly={true}
+      />
+    </div>
+  );
+
+
+}
+
+export const DetailModal = () => {
+  const store = useAppStore(useShallow((state) => ({
+    formData: state.formData,
+    open: state.openDetail,
+    setOpen: state.setOpenDetail,
+  })));
+
+  const text = useMemo(() => {
+    if (store.formData) {
+      return JSON.stringify(store.formData, null, 2);
+    }
+    return "";
+  }, [store.formData]);
+  return (<Dialog open={store.open} onOpenChange={store.setOpen}>
+    <DialogContent className="!max-w-[50rem] overflow-auto border-gray-300" >
+      <DialogHeader>
+        <DialogTitle>详情</DialogTitle>
+      </DialogHeader>
+      <Detail content={text} />
+    </DialogContent>
+  </Dialog>);
+}

src/apps/xhs/modules/Form.tsx

@@ -0,0 +1,128 @@
+import { set, useForm } from "react-hook-form"
+import { useAppStore } from "../store";
+import { useShallow } from "zustand/shallow";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+type FormData = {
+  title: string;
+  description: string;
+  summary: string;
+  status: string;
+}
+
+export const FormEdit = () => {
+  const store = useAppStore(useShallow((state) => ({
+    formData: state.formData,
+    setFormData: state.setFormData,
+    createOrUpdateItem: state.createOrUpdateItem,
+    setOpen: state.setOpen,
+  })));
+
+  const { register, handleSubmit, setValue } = useForm<FormData>({
+    defaultValues: {
+      title: store.formData?.title || "",
+      description: store.formData?.description || "",
+      summary: store.formData?.summary || "",
+      status: store.formData?.status || "",
+    }
+  });
+
+  const onSubmit = async (data: FormData) => {
+    await store.createOrUpdateItem({
+      ...store.formData,
+      ...data
+    });
+    store.setOpen(false);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="title">Title</Label>
+        <Input
+          id="title"
+          {...register("title")}
+          placeholder="Enter title"
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="description">Description</Label>
+        <Textarea
+          id="description"
+          {...register("description")}
+          placeholder="Enter description"
+          rows={4}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="summary">Summary</Label>
+        <Textarea
+          id="summary"
+          {...register("summary")}
+          placeholder="Enter summary"
+          rows={3}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="status">Status</Label>
+        <Select
+          value={store.formData?.status || ""}
+          onValueChange={(value) => setValue("status", value)}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select status" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="draft">Draft</SelectItem>
+            <SelectItem value="published">Published</SelectItem>
+            <SelectItem value="archived">Archived</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <DialogFooter>
+        <Button type="submit">Save</Button>
+      </DialogFooter>
+    </form>
+  )
+}
+
+export const FormModal = () => {
+  const store = useAppStore(useShallow((state) => ({
+    formData: state.formData,
+    open: state.open,
+    setOpen: state.setOpen,
+  })));
+  const isEdit = !!store.formData?.id;
+
+  return (
+    <Dialog open={store.open} onOpenChange={store.setOpen}>
+      <DialogContent className="max-w-2xl border-gray-300">
+        <DialogHeader>
+          <DialogTitle>{isEdit ? "编辑" : "创建"}</DialogTitle>
+        </DialogHeader>
+        <FormEdit />
+      </DialogContent>
+    </Dialog>
+  )
+}

src/apps/xhs/store/index.ts

@@ -0,0 +1,88 @@
+import { create } from 'zustand';
+import { query } from '@/modules/query'
+import { toast } from 'sonner';
+
+type Pagination = { current?: number; pageSize?: number; total?: number; }
+type State = {
+  pagination?: Pagination;
+  setPagination: (pagination: Pagination) => void;
+  list: any[];
+  setList: (list: any[]) => void;
+  open?: boolean;
+  setOpen: (open: boolean) => void;
+  openDetail?: boolean;
+  setOpenDetail: (open: boolean) => void;
+  formData?: any;
+  setFormData: (formData: any) => void;
+
+  // queryList
+  queryList: (pagination?: Pagination) => Promise<void>;
+  deleteItem: (id: string) => Promise<void>;
+  createOrUpdateItem: (data: any) => Promise<void>;
+}
+export const useAppStore = create<State>((set, get) => ({
+  pagination: undefined,
+  setPagination: (pagination) => set({ pagination }),
+  list: [],
+  setList: (list) => set({ list }),
+  open: false,
+  setOpen: (open) => set({ open }),
+  openDetail: false,
+  setOpenDetail: (open) => set({ openDetail: open }),
+  
+  formData: undefined,
+  setFormData: (formData) => set({ formData }),
+  queryList: async (pagination) => {
+    const { pagination: statePagination } = get();
+    const res = await query.post({
+      path: 'xhs',
+      key: 'list',
+      page: pagination?.current || statePagination?.current || 1,
+      pageSize: pagination?.pageSize || statePagination?.pageSize || 30,
+    });
+    if (res.code === 200 && res?.data) {
+      let list = res.data.list || [];
+      list = list.map((item: any) => {
+        if (typeof item.data === 'string') {
+          try {
+            item.data = JSON.parse(item.data);
+          } catch (e) {
+            item.data = {};
+          }
+        }
+        return item;
+      });
+      const pagination = res.data.pagination || {}
+      set({ list: list });
+      set({
+        pagination: pagination
+      });
+    }
+  },
+  deleteItem: async (id: string) => {
+    const res = await query.post({
+      path: 'xhs',
+      key: 'delete',
+      data: { id }
+    });
+    if (res.code === 200) {
+      // 删除成功，重新查询列表
+      await get().queryList();
+    } else {
+      toast.error('删除失败' + (res.message ? `：${res.message}` : ''));
+    }
+  },
+  createOrUpdateItem: async (data: any) => {
+    const res = await query.post({
+      path: 'xhs',
+      key: 'update',
+      data
+    });
+    if (res.code === 200) {
+      // 创建或更新成功，重新查询列表
+      await get().queryList();
+    } else {
+      toast.error('操作失败' + (res.message ? `：${res.message}` : ''));
+    }
+  },
+}));

src/apps/xhs/store/types.ts

@@ -0,0 +1,20 @@
+export type ListItem = {
+  id: string;
+  title: string;
+  summary: string;
+  description: string;
+  link: string;
+  data: string;
+  tags: string;
+  status: string;
+  authorUrl: string;
+  cover: string;
+  syncStatus: number;
+  syncAt: number;
+  star: number | null;
+  userId: string | null;
+  pushedAt: number | null;
+  createdAt: number;
+  updatedAt: number;
+  deletedAt: number | null;
+}

src/components/ui/dialog.tsx

@@ -0,0 +1,141 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

src/components/ui/label.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

src/components/ui/select.tsx

@@ -0,0 +1,190 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

src/modules/query.ts

@@ -11,5 +11,9 @@ const getUrl = () => {
 }
 
 export const query = new Query({
-  url: getUrl()
+  url: '/api/router'
+});
+
+export const clientQuery = new Query({
+  url: '/client/router'
 });

src/pages/index.astro

@@ -1,47 +1,10 @@
 ---
-// import { query } from '@/modules/query.ts';
+import Html from '@/components/html.astro';
-console.log('Hello from index.astro');
+import { AppProvider } from '@/apps/xhs';
-import '../styles/global.css';
 ---
 
-<html lang='en'>
+<Html title='Light Code'>
-  <head>
+  <main>
-    <title>My Homepage</title>
+    <AppProvider client:only />
-  </head>
+  </main>
-  <body>
+</Html>
-    <h1 onclick="{onClick}">Welcome to my website!</h1>
-    <div class='bg-amber-50 w-20 h-20 rounded-full'></div>
-    <div id='root'></div>
-    <script type='importmap' data-vite-ignore is:inline>
-      {
-        "imports": {
-          "react": "https://esm.sh/react@19.1.0",
-          "react-dom": "https://esm.sh/react-dom@19.1.0/client.js",
-          "react-toastify": "https://esm.sh/react-toastify@11.0.5"
-        }
-      }
-    </script>
-    <script type='module' data-vite-ignore is:inline>
-      import { Button, message } from 'https://esm.sh/antd?standalone';
-      import React from 'react';
-      import { ToastContainer, toast } from 'react-toastify';
-      import { createRoot } from 'react-dom';
-      setTimeout(() => {
-        toast.loading('Hello from index.astro');
-        window.toast = toast;
-        console.log('message', toast);
-      }, 1000);
-      console.log('Hello from index.astro', Button);
-      const root = document.getElementById('root');
-      const render = createRoot(root);
-      const App = () => {
-        const button = React.createElement(Button, null, 'Hello');
-        const messageEl = React.createElement(ToastContainer, null, 'Hello');
-        const wrapperMessage = React.createElement('div', null, [button, messageEl]);
-        return wrapperMessage;
-      };
-      // render.render(React.createElement(Button, null, 'Hello'), root);
-      render.render(App(), root);
-    </script>
-  </body>
-</html>

src/pages/xhs-tags.astro

@@ -0,0 +1,10 @@
+---
+import Html from '@/components/html.astro';
+import { AppProvider } from '@/apps/xhs-tags';
+---
+
+<Html title='Light Code'>
+  <main>
+    <AppProvider client:only />
+  </main>
+</Html>

src/pages/xhs-users.astro

@@ -0,0 +1,10 @@
+---
+import Html from '@/components/html.astro';
+import { AppProvider } from '@/apps/xhs-users';
+---
+
+<Html title='Light Code'>
+  <main>
+    <AppProvider client:only />
+  </main>
+</Html>