完善提取页地区选择功能，添加城市数据和组合框组件

src/components/composites/extract/index.tsx

@@ -14,10 +14,10 @@ import {useStatus} from '@/lib/states'
 import {allResource} from '@/actions/resource'
 import {Resource, name} from '@/lib/models'
 import {format, intlFormatDistance} from 'date-fns'
-import {usePathname} from 'next/navigation'
 import {toast} from 'sonner'
 import {merge} from '@/lib/utils'
-
+import {Combobox} from '@/components/ui/combobox'
+import cities from './_assets/cities.json'
 
 type ExtractProps = {
   className?: string
@@ -34,7 +34,7 @@ export default function Extract(props: ExtractProps) {
     regionType: z.enum(['unlimited', 'specific']).default('unlimited'),
     isp: z.enum(['all', '1', '2', '3'], {required_error: '请选择运营商'}),
     proto: z.enum(['all', '1', '2', '3'], {required_error: '请选择协议'}),
-    authType: z.enum([ '1', '2'], {required_error: '请选择认证方式'}),
+    authType: z.enum(['1', '2'], {required_error: '请选择认证方式'}),
     distinct: z.enum(['1', '0'], {required_error: '请选择去重选项'}),
     format: z.enum(['text', 'json'], {required_error: '请选择导出格式'}),
     separator: z.string({required_error: '请选择分隔符'}),
@@ -78,8 +78,10 @@ export default function Extract(props: ExtractProps) {
     if (resource) sp.set('i', String(resource))
     if (authType) sp.set('t', authType)
     if (proto != 'all') sp.set('x', proto)
+
     if (prov) sp.set('a', prov)
     if (city) sp.set('b', city)
+
     if (isp != 'all') sp.set('s', isp)
     sp.set('d', distinct)
     sp.set('rt', formatType)
@@ -88,7 +90,7 @@ export default function Extract(props: ExtractProps) {
     sp.set('n', String(count))
 
     return `/proxies?${sp.toString()}`
-  }, [resource, prov, city, isp, proto, distinct, formatType, separator, breaker, count])
+  }, [resource, authType, proto, isp, distinct, formatType, separator, breaker, count, prov, city])
 
   const onSubmit = (values: z.infer<typeof schema>) => {
     console.log(values)
@@ -112,8 +114,17 @@ export default function Extract(props: ExtractProps) {
 
   useEffect(() => {
     getResources().then()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  // ======================
+  // form 中间变量
+  // ======================
+
+  // ======================
+  // render
+  // ======================
+
   return (
     <Form
       form={form}
@@ -166,7 +177,7 @@ export default function Extract(props: ExtractProps) {
                     </div>
                   ) : resources.map((resource, i) => (<>
                     <SelectItem
-                      key={`${resource.id}`} value={String(resource.id)} className={`p-3`}>
+                      key={`${resource.id}-${i}`} 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`}>
@@ -204,7 +215,13 @@ export default function Extract(props: ExtractProps) {
           <FormField name="regionType" label={`地区筛选`}>
             {({id, field}) => (
               <RadioGroup
-                onValueChange={field.onChange}
+                onValueChange={(e) => {
+                  field.onChange(e)
+                  if (e === 'unlimited') {
+                    form.setValue('prov', '')
+                    form.setValue('city', '')
+                  }
+                }}
                 defaultValue={field.value}
                 className="flex gap-4"
               >
@@ -221,51 +238,16 @@ export default function Extract(props: ExtractProps) {
           </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>
+            <Combobox
+              className={`w-84`}
+              placeholder={`请选择地区`}
+              options={cities.options}
+              value={[prov || '', city || '']}
+              onChange={value => {
+                form.setValue('prov', value[0])
+                form.setValue('city', value[1])
+              }}
+            />
           )}
         </div>
 
@@ -463,7 +445,7 @@ export default function Extract(props: ExtractProps) {
         `border-t`,
       )}>
         {/* 展示链接地址 */}
-        <div className={`bg-card text-card-foreground p-4 rounded-md`}>
+        <div className={`bg-card text-card-foreground p-4 rounded-md break-all`}>
           {params}
         </div>
 
@@ -472,6 +454,7 @@ export default function Extract(props: ExtractProps) {
           <Button
             type="submit"
             onClick={async () => {
+              if (!form.formState.isValid) return
               const url = new URL(window.location.href).origin
               await navigator.clipboard.writeText(`${url}${params}`)
               toast.success('链接已复制到剪贴板')
@@ -483,7 +466,9 @@ export default function Extract(props: ExtractProps) {
           <Button
             type="submit"
             onClick={async () => {
+              if (!form.formState.isValid) return
               window.open(params, '_blank')
+
             }}
           >
             <ExternalLinkIcon/>