完善 ip 提取功能，优化更新主题样式

src/components/composites/extract/index.tsx

@@ -0,0 +1,392 @@
+'use client'
+import {z} from 'zod'
+import {zodResolver} from '@hookform/resolvers/zod'
+import {Form, FormField, FormLabel} from '@/components/ui/form'
+import {RadioGroup, RadioGroupItem} from '@/components/ui/radio-group'
+import {Input} from '@/components/ui/input'
+import {Select, SelectContent, SelectItem, SelectSeparator, SelectTrigger, SelectValue} from '@/components/ui/select'
+import {Button} from '@/components/ui/button'
+import {useForm} from 'react-hook-form'
+import {Alert, AlertTitle} from '@/components/ui/alert'
+import {Box, CircleAlert, Loader, Timer} from 'lucide-react'
+import {useEffect, useState} from 'react'
+import {useStatus} from '@/lib/states'
+import {allResource} from '@/actions/resource'
+import {Resource, name} from '@/lib/models'
+import {format, intlFormatDistance} from 'date-fns'
+
+
+type ExtractProps = {}
+
+export default function Extract(props: ExtractProps) {
+  const [resources, setResources] = useState<Resource[]>([])
+  const [status, setStatus] = useStatus()
+
+  const schema = z.object({
+    resource: z.number().optional(),
+    prov: z.string().optional(),
+    city: z.string().optional(),
+    regionType: z.enum(['unlimited', 'specific']).default('unlimited'),
+    isp: z.enum(['all', '1', '2', '3']),
+    proto: z.enum(['all', '1', '2', '3']),
+    distinct: z.enum(['1', '0']),
+    format: z.enum(['text', 'json']),
+    separator: z.string(),
+    breaker: z.string(),
+    count: z.number().min(1),
+  })
+
+  type Schema = z.infer<typeof schema>
+
+  const form = useForm<Schema>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      regionType: 'unlimited',
+      isp: 'all',
+      proto: 'all',
+      count: 1,
+      distinct: '1',
+      format: 'text',
+      breaker: '\\n',
+      separator: '|',
+    },
+  })
+
+  const regionType = form.watch('regionType')
+
+  const onSubmit = (values: z.infer<typeof schema>) => {
+    console.log(values)
+  }
+
+  const getResources = async () => {
+    setStatus('load')
+    try {
+      const resp = await allResource()
+      if (!resp.success) {
+        throw new Error('Unable to fetch packages.')
+      }
+      setResources(resp.data)
+      setStatus('done')
+    }
+    catch (error) {
+      console.error('Error fetching packages:', error)
+      setStatus('fail')
+    }
+  }
+
+  useEffect(() => {
+    getResources().then()
+  }, [])
+
+  return (
+    <Form
+      form={form}
+      onSubmit={onSubmit}
+      className={`p-4 bg-white flex flex-col gap-4 rounded-md`}
+    >
+      <Alert variant={`warn`}>
+        <CircleAlert/>
+        <AlertTitle>提取IP前需要将本机IP添加到白名单后才可使用</AlertTitle>
+      </Alert>
+
+      <div className={`flex flex-col gap-y-6`}>
+        {/* 选择套餐 */}
+        <div className="flex items-center">
+          <FormField name="resource" label={`选择套餐`}>
+            {({field}) => (
+              <Select
+                value={field.value ? String(field.value) : undefined}
+                onValueChange={value => field.onChange(Number(value))}
+              >
+                <SelectTrigger className={`min-h-10 h-auto w-84`}>
+                  <SelectValue placeholder={`选择套餐`}/>
+                </SelectTrigger>
+                <SelectContent>
+                  {status === 'load' ? (
+                    <div className={`p-4 flex gap-1 items-center`}>
+                      <Loader className={`animate-spin`} size={20}/>
+                      <span>加载中...</span>
+                    </div>
+                  ) : resources.length === 0 ? (
+                    <SelectItem value="0">
+                      暂无可用套餐
+                    </SelectItem>
+                  ) : resources.map((resource, i) => (<>
+                    <SelectItem
+                      key={`${resource.id}`} value={String(resource.id)} className={`p-3`}>
+                      <div className={`flex flex-col gap-2 w-72`}>
+                        {resource.type === 1 && resource.pss.type === 1 && (<>
+                          <div className={`flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md text-sm`}>
+                            <Timer size={20}/>
+                            <span>{name(resource)}</span>
+                          </div>
+                          <div className={`flex justify-between gap-2 text-xs text-weak`}>
+                            <span>到期时间：{format(resource.pss.expire, 'yyyy-MM-dd HH:mm')}</span>
+                            <span>{intlFormatDistance(resource.pss.expire, new Date())}</span>
+                          </div>
+                        </>)}
+                        {resource.type === 1 && resource.pss.type === 2 && (<>
+                          <div className={`flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md text-sm`}>
+                            <Box size={20}/>
+                            <span>{name(resource)}</span>
+                          </div>
+                          <div className={`flex justify-between gap-2 text-xs text-weak`}>
+                            <span>提取数量：{resource.pss.used} / {resource.pss.quota}</span>
+                            <span>剩余 {resource.pss.quota - resource.pss.used}</span>
+                          </div>
+                        </>)}
+                      </div>
+                    </SelectItem>
+                    {i < resources.length - 1 && <SelectSeparator className={`m-2`}/>}
+                  </>))
+                  }
+                </SelectContent>
+              </Select>
+            )}
+          </FormField>
+        </div>
+
+        {/* 地区筛选 */}
+        <div className="flex flex-col gap-4">
+          <FormField name="regionType" label={`地区筛选`}>
+            {({id, field}) => (
+              <RadioGroup
+                onValueChange={field.onChange}
+                defaultValue={field.value}
+                className="flex gap-4"
+              >
+                <FormLabel htmlFor={`${id}-v-unlimited`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+                  <RadioGroupItem value="unlimited" id={`${id}-v-unlimited`} className="mr-2"/>
+                  <span>不限地区</span>
+                </FormLabel>
+                <FormLabel htmlFor={`${id}-v-specific`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+                  <RadioGroupItem value="specific" id={`${id}-v-specific`} className="mr-2"/>
+                  <span>指定地区</span>
+                </FormLabel>
+              </RadioGroup>
+            )}
+          </FormField>
+
+          {regionType === 'specific' && (
+            <div className="flex gap-4">
+              <FormField name="prov" label="">
+                {({field}) => (
+                  <Select
+                    value={field.value}
+                    onValueChange={field.onChange}
+                  >
+                    <SelectTrigger className="w-40">
+                      <SelectValue placeholder="选择省份"/>
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="bj">北京</SelectItem>
+                      <SelectItem value="sh">上海</SelectItem>
+                      <SelectItem value="gd">广东</SelectItem>
+                      {/* 更多省份... */}
+                    </SelectContent>
+                  </Select>
+                )}
+              </FormField>
+
+              <FormField name="city" label="">
+                {({field}) => (
+                  <Select
+                    value={field.value}
+                    onValueChange={field.onChange}
+                    disabled={!form.watch('prov')}
+                  >
+                    <SelectTrigger className="w-40">
+                      <SelectValue placeholder="选择城市"/>
+                    </SelectTrigger>
+                    <SelectContent>
+                      {form.watch('prov') === 'bj' && <SelectItem value="bj01">北京市</SelectItem>}
+                      {form.watch('prov') === 'sh' && <SelectItem value="sh01">上海市</SelectItem>}
+                      {form.watch('prov') === 'gd' && (
+                        <>
+                          <SelectItem value="gz">广州</SelectItem>
+                          <SelectItem value="sz">深圳</SelectItem>
+                        </>
+                      )}
+                      {/* 更多城市... */}
+                    </SelectContent>
+                  </Select>
+                )}
+              </FormField>
+            </div>
+          )}
+        </div>
+
+        {/* 运营商筛选 */}
+        <div className="flex items-center">
+          <FormField name="isp" label={`运营商筛选`}>
+            {({id, field}) => (
+              <RadioGroup
+                onValueChange={field.onChange}
+                defaultValue={field.value}
+                className="flex gap-4">
+                <FormLabel htmlFor={`${id}-v-all`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+                  <RadioGroupItem value="all" id={`${id}-v-all`}/>
+                  <span>不限</span>
+                </FormLabel>
+                <FormLabel htmlFor={`${id}-v-telecom`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+                  <RadioGroupItem value="1" id={`${id}-v-telecom`}/>
+                  <span>电信</span>
+                </FormLabel>
+                <FormLabel htmlFor={`${id}-v-mobile`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+                  <RadioGroupItem value="2" id={`${id}-v-mobile`}/>
+                  <span>移动</span>
+                </FormLabel>
+                <FormLabel htmlFor={`${id}-v-unicom`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+                  <RadioGroupItem value="3" id={`${id}-v-unicom`}/>
+                  <span>联通</span>
+                </FormLabel>
+              </RadioGroup>
+            )}
+          </FormField>
+        </div>
+
+        {/* 协议类型 */}
+        <div className="flex items-center">
+          <FormField name="proto" label={`协议类型`}>
+            {({id, field}) => (
+              <RadioGroup
+                onValueChange={field.onChange}
+                defaultValue={field.value}
+                className="flex gap-4">
+                <FormLabel htmlFor={`${id}-v-all`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+                  <RadioGroupItem value="all" id={`${id}-v-all`} className="mr-2"/>
+                  <span>不限</span>
+                </FormLabel>
+                <FormLabel htmlFor={`${id}-v-http`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+                  <RadioGroupItem value="1" id={`${id}-v-http`} className="mr-2"/>
+                  <span>HTTP</span>
+                </FormLabel>
+                <FormLabel htmlFor={`${id}-v-https`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+                  <RadioGroupItem value="2" id={`${id}-v-https`} className="mr-2"/>
+                  <span>HTTPS</span>
+                </FormLabel>
+                <FormLabel htmlFor={`${id}-v-socks5`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+                  <RadioGroupItem value="3" id={`${id}-v-socks5`} className="mr-2"/>
+                  <span>SOCKS5</span>
+                </FormLabel>
+              </RadioGroup>
+            )}
+          </FormField>
+        </div>
+
+        {/* 去重选项 */}
+        <div className="flex items-center">
+          <FormField name="distinct" label={`去重选项`}>
+            {({id, field}) => (
+              <RadioGroup
+                onValueChange={field.onChange}
+                defaultValue={field.value}
+                className="flex gap-4">
+                <FormLabel htmlFor={`${id}-v-true`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+                  <RadioGroupItem value="1" id={`${id}-v-true`} className="mr-2"/>
+                  <span>去重</span>
+                </FormLabel>
+                <FormLabel htmlFor={`${id}-v-false`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+                  <RadioGroupItem value="0" id={`${id}-v-false`} className="mr-2"/>
+                  <span>不去重</span>
+                </FormLabel>
+              </RadioGroup>
+            )}
+          </FormField>
+        </div>
+
+        {/* 导出格式 */}
+        <div className="flex items-center">
+          <FormField name="format" label={`导出格式`}>
+            {({id, field}) => (
+              <RadioGroup
+                onValueChange={field.onChange}
+                defaultValue={field.value}
+                className="flex gap-4"
+              >
+                <FormLabel htmlFor={`${id}-v-txt`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+                  <RadioGroupItem value="text" id={`${id}-v-txt`} className="mr-2"/>
+                  <span>TXT 格式</span>
+                </FormLabel>
+                <FormLabel htmlFor={`${id}-v-json`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+                  <RadioGroupItem value="json" id={`${id}-v-json`} className="mr-2"/>
+                  <span>JSON 格式</span>
+                </FormLabel>
+              </RadioGroup>
+            )}
+          </FormField>
+        </div>
+
+        {/* 分隔符 */}
+        <div className="flex items-center">
+          <FormField name="separator" label={`分隔符`}>
+            {({id, field}) => (
+              <RadioGroup
+                onValueChange={field.onChange}
+                defaultValue={field.value}
+                className="flex gap-4">
+                <FormLabel htmlFor={`${id}-v-comma`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+                  <RadioGroupItem value="|" id={`${id}-v-comma`} className="mr-2"/>
+                  <span>竖线 ( | )</span>
+                </FormLabel>
+                <FormLabel htmlFor={`${id}-v-semicolon`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+                  <RadioGroupItem value=":" id={`${id}-v-semicolon`} className="mr-2"/>
+                  <span>冒号 ( : )</span>
+                </FormLabel>
+                <FormLabel htmlFor={`${id}-v-space`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+                  <RadioGroupItem value="\t" id={`${id}-v-space`} className="mr-2"/>
+                  <span>制表符 ( \t )</span>
+                </FormLabel>
+              </RadioGroup>
+            )}
+          </FormField>
+        </div>
+
+        {/* 换行符 */}
+        <div className="flex items-center">
+          <FormField name="breaker" label={`换行符`}>
+            {({id, field}) => (
+              <RadioGroup
+                onValueChange={field.onChange}
+                defaultValue={field.value}
+                className="flex gap-4">
+                <FormLabel htmlFor={`${id}-v-newline`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+                  <RadioGroupItem value="\n" id={`${id}-v-newline`} className="mr-2"/>
+                  <span>换行 ( \n )</span>
+                </FormLabel>
+                <FormLabel htmlFor={`${id}-v-newline3`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+                  <RadioGroupItem value="\r" id={`${id}-v-newline3`} className="mr-2"/>
+                  <span>回车 ( \r )</span>
+                </FormLabel>
+                <FormLabel htmlFor={`${id}-v-newline2`} className={`px-3 h-10 border rounded-md flex items-center w-40 text-sm`}>
+                  <RadioGroupItem value="\r\n" id={`${id}-v-newline2`} className="mr-2"/>
+                  <span>回车换行 ( \r\n )</span>
+                </FormLabel>
+              </RadioGroup>
+            )}
+          </FormField>
+        </div>
+
+        {/* 提取数量 */}
+        <div className="flex items-center">
+          <FormField name="count" label={`提取数量`}>
+            {({id, field}) => (
+              <Input
+                {...field}
+                id={id}
+                type="number"
+                onChange={e => field.onChange(Number(e.target.value))}
+                className="h-10 w-84"
+                placeholder="输入提取数量"
+              />
+            )}
+          </FormField>
+        </div>
+      </div>
+
+      <div className="flex mt-6 justify-center">
+        <Button type="submit" className="w-40 h-10 bg-blue-500 text-white rounded-md">生成链接</Button>
+      </div>
+    </Form>
+  )
+}