kevisual-center/skills/page/references/page.tsx

'use client';
import { useEffect } from 'react';
import { appDomainStatus, useDomainStore } from './store/index ';
import { useForm, Controller } from 'react-hook-form';
import { pick } from 'es-toolkit';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Plus, Pencil, Trash2 } from 'lucide-react';
import { LayoutUser } from '@/modules/layout/LayoutUser';
import { LayoutMain } from '@/modules/layout';

const TableList = () => {
  const { list, setShowEditModal, setFormData, deleteDomain } = useDomainStore();
  useEffect(() => {
    // Initial load is handled by the parent component
  }, []);

  return (
    <div className="rounded-md border">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>ID</TableHead>
            <TableHead>域名</TableHead>
            <TableHead>应用ID</TableHead>
            <TableHead>UID</TableHead>
            <TableHead>状态</TableHead>
            <TableHead>操作</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {list.map((domain) => (
            <TableRow key={domain.id}>
              <TableCell>{domain.id}</TableCell>
              <TableCell>{domain.domain}</TableCell>
              <TableCell>{domain.appId}</TableCell>
              <TableCell>{domain.uid}</TableCell>
              <TableCell>{domain.status}</TableCell>
              <TableCell className="flex gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => {
                    setShowEditModal(true);
                    setFormData(domain);
                  }}>
                  <Pencil className="w-4 h-4 mr-1" />
                  编辑
                </Button>
                <Button
                  variant="destructive"
                  size="sm"
                  onClick={() => deleteDomain(domain)}>
                  <Trash2 className="w-4 h-4 mr-1" />
                  删除
                </Button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
};

const FomeModal = () => {
  const { showEditModal, setShowEditModal, formData, updateDomain } = useDomainStore();
  const {
    handleSubmit,
    formState: { errors },
    reset,
    control,
    setValue,
  } = useForm();

  useEffect(() => {
    if (!showEditModal) return;
    if (formData?.id) {
      reset(formData);
    } else {
      reset({
        status: 'running',
      });
    }
  }, [formData, showEditModal, reset]);

  const onSubmit = async (data: any) => {
    const _formData = pick(data, ['domain', 'appId', 'status', 'id']);
    if (formData.id) {
      _formData.id = formData.id;
    }
    const res = await updateDomain(_formData);
    if (res.code === 200) {
      setShowEditModal(false);
    }
  };

  return (
    <Dialog open={showEditModal} onOpenChange={setShowEditModal}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>添加域名</DialogTitle>
        </DialogHeader>
        <div className="p-4">
          <form className="w-full flex flex-col gap-4" onSubmit={handleSubmit(onSubmit)}>
            <div className="flex flex-col gap-2">
              <label className="text-sm font-medium">域名</label>
              <Input
                {...control.register('domain', { required: '请输入域名' })}
                placeholder="请输入域名"
                className={errors.domain ? "border-red-500" : ""}
              />
              {errors.domain && <span className="text-xs text-red-500">{errors.domain.message as string}</span>}
            </div>
            <div className="flex flex-col gap-2">
              <label className="text-sm font-medium">应用ID</label>
              <Input
                {...control.register('appId', { required: '请输入应用ID' })}
                placeholder="请输入应用ID"
                className={errors.appId ? "border-red-500" : ""}
              />
              {errors.appId && <span className="text-xs text-red-500">{errors.appId.message as string}</span>}
            </div>
            <div className="flex flex-col gap-2">
              <label className="text-sm font-medium">状态</label>
              <Controller
                name="status"
                control={control}
                defaultValue=""
                render={({ field }) => (
                  <Select value={field.value || ''} onValueChange={field.onChange}>
                    <SelectTrigger>
                      <SelectValue placeholder="请选择状态" />
                    </SelectTrigger>
                    <SelectContent>
                      {appDomainStatus.map((item) => (
                        <SelectItem key={item} value={item}>{item}</SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                )}
              />
            </div>
            <Button type="submit">提交</Button>
          </form>
        </div>
      </DialogContent>
    </Dialog>
  );
};

export const List = () => {
  const { getDomainList, setShowEditModal, setFormData } = useDomainStore();

  useEffect(() => {
    getDomainList();
  }, [getDomainList]);

  return (
    <div className="p-4 w-full h-full">
      <div className="flex mb-4">
        <Dialog>
          <DialogTrigger asChild>
            <Button
              onClick={() => {
                setShowEditModal(true);
                setFormData({});
              }}>
              <Plus className="w-4 h-4 mr-1" />
              添加
            </Button>
          </DialogTrigger>
        </Dialog>
      </div>
      <TableList />
      <FomeModal />
    </div>
  );
};

export default () => {
  return <LayoutMain><List /></LayoutMain>;
}