完善域名页面

src/pages/websites/domain/index.tsx

@@ -1,9 +1,13 @@
 import { useTranslation } from '@/i18n.ts'
-import { Button, Form, Divider, Space, Tooltip, Badge, Tag, Input } from 'antd'
+import { Button, Form, Divider, Space, Tooltip, Badge, Tag, Input, Flex, Select } from 'antd'
 import { useAtom, useAtomValue } from 'jotai'
 import {
   deleteWebsiteDomainAtom,
-  saveOrUpdateWebsiteDomainAtom, websiteDomainAtom, websiteDomainsAtom, websiteDomainSearchAtom,
+  saveOrUpdateWebsiteDomainAtom, updateGroupWebsiteDomainAtom,
+  updateRemarkWebsiteDomainAtom, updateTagWebsiteDomainAtom,
+  websiteDomainAtom,
+  websiteDomainsAtom,
+  websiteDomainSearchAtom,
 } from '@/store/websites/domain'
 import { useEffect, useMemo, useState } from 'react'
 import Action from '@/components/action/Action.tsx'
@@ -23,6 +27,9 @@ import { accountStatus, accountStatusColor } from '@/store/websites/dns_account.
 import Icon from '@/components/icon'
 import { useDialog } from '@/components/dialog'
 import { dnsListAtom } from '@/store/websites/dns.ts'
+import ModalPro from '@/components/modal-pro'
+import { domainGroupsAtom } from '@/store/websites/domain_groups.ts'
+import NameServer from '@/pages/websites/domain/components/NameServer.tsx'
 
 const i18nPrefix = 'websites.domain.list'
 
@@ -33,9 +40,14 @@ const WebsiteDomain = () => {
   const [ form ] = Form.useForm()
   const [ filterForm ] = Form.useForm()
   const { mutate: saveOrUpdate, isPending: isSubmitting, isSuccess } = useAtomValue(saveOrUpdateWebsiteDomainAtom)
+  const { mutate: updateRemark } = useAtomValue(updateRemarkWebsiteDomainAtom)
+  const { mutate: updateTags } = useAtomValue(updateTagWebsiteDomainAtom)
+  const { mutate: updateGroup } = useAtomValue(updateGroupWebsiteDomainAtom)
   const [ search, setSearch ] = useAtom(websiteDomainSearchAtom)
   const [ currentWebsiteDomain, setWebsiteDomain ] = useAtom(websiteDomainAtom)
   const { data, isFetching, isLoading, refetch } = useAtomValue(websiteDomainsAtom)
+  const { data: groupData, isFetching: isGroupLoading } = useAtomValue(domainGroupsAtom)
+
   const { mutate: deleteWebsiteDomain, isPending: isDeleting } = useAtomValue(deleteWebsiteDomainAtom)
   const { data: dnsData } = useAtomValue(dnsListAtom)
 
@@ -54,7 +66,7 @@ const WebsiteDomain = () => {
     onOk: () => {
       const id = form.getFieldValue('id')
       const remark = form.getFieldValue('remark')
-      return saveOrUpdate({ remark, id } as any)
+      return updateRemark({ remark, id } as any)
     }
   })
 
@@ -70,6 +82,10 @@ const WebsiteDomain = () => {
       {
         title: t(`${i18nPrefix}.columns.name`, '域名'),
         dataIndex: 'name',
+        width: 300,
+        fieldProps: {
+          style: { width: '100%' }
+        },
         render(_text, record) {
           const edit = <Icon className={'hover'}
                              onClick={() => {
@@ -77,13 +93,22 @@ const WebsiteDomain = () => {
                                openDialog(record)
                              }}
                              style={{ paddingBlockStart: 0 }} type={'EditTwo'} size={14}/>
-          return <Space>
-            <Link to={`/websites/record?id=${record.id}`}>{record.name}</Link>
-            {edit}
-          </Space>
+          return <Flex vertical={true} style={{ paddingInlineStart: 5 }}>
+            <Space>
+              <Link to={`/websites/record?id=${record.id}`}>{record.name}</Link>
+              {edit}
+            </Space>
+            <Flex className={'color-gray'}>{record.remark}</Flex>
+          </Flex>
         }
       },
       {
+        title: t(`${i18nPrefix}.columns.record_count`, '记录数'),
+        dataIndex: 'record_count',
+        hideInForm: true,
+        hideInSearch: true,
+      },
+      {
         title: t(`${i18nPrefix}.columns.dns_account_id`, 'DNS账号'),
         dataIndex: 'dns_account_id',
         valueType: 'select',
@@ -118,8 +143,14 @@ const WebsiteDomain = () => {
         }
       },
       {
-        title: t(`${i18nPrefix}.columns.nameservers`, 'nameservers'),
+        title: t(`${i18nPrefix}.columns.nameservers`, 'DNS服务器地址'),
         dataIndex: 'nameservers',
+        width: 150,
+        hideInSearch: true,
+        hideInForm: true,
+        render(_dom, record) {
+          return <NameServer data={record}/>
+        }
       },
       {
         title: t(`${i18nPrefix}.columns.created`, '创建时间'),
@@ -133,12 +164,15 @@ const WebsiteDomain = () => {
         valueType: 'option',
         fixed: 'right',
         render: (_, record) => [
-          <Action key="edit"
+          <Link to={`/websites/record?id=${record.id}`}>解析设置</Link>,
+
+          /*<Action key="edit"
                   as={'a'}
                   onClick={() => {
-                    form.setFieldsValue(record)
-                    setOpen(true)
-                  }}>{t('actions.edit')}</Action>,
+                    // form.setFieldsValue(record)
+                    // setOpen(true)
+
+                  }}>{t('actions.recordSet', '解析设置')}</Action>,*/
           <Divider type={'vertical'}/>,
           <Action key="sync"
                   as={'a'}
@@ -192,6 +226,58 @@ const WebsiteDomain = () => {
                                 type={'primary'}>{t(`${i18nPrefix}.add`, '添加域名')}</Button>
                       </Space>
                     }
+                    tableAlertRender={(props) => {
+                      return <Space>
+                        <ModalPro
+                                alterType={'confirm'}
+                                title={'删除域名提示'}
+                                content={<span>确认删除此域名？<br/>删除域名，解析记录会同步删除，且无法恢复。</span>}
+                                onOk={() => {
+                                  deleteWebsiteDomain(props.selectedRows?.map(item => item.id))
+                                }}
+                        >
+                          <Button disabled={props.selectedRows?.length == 0}>{t('actions.delete', '删除')}</Button>
+                        </ModalPro>
+                        <ModalPro
+                                alterType={'dialog'}
+                                title={t(`${i18nPrefix}.group.title`, '移动分组')}
+                                content={<>
+                                  <Form form={form}>
+                                    <Form.Item
+                                            name={'group_id'}
+                                            label={t(`${i18nPrefix}.group.columns.group`, '移动分组')}>
+                                      <Select
+                                              loading={isGroupLoading}
+                                              options={
+                                                [
+                                                  {
+                                                    label: t(`${i18nPrefix}.group.default`, '默认分组'),
+                                                    value: 0,
+                                                  },
+                                                  ...(groupData?.rows?.map(item => {
+                                                    return {
+                                                      label: item.name,
+                                                      value: item.id,
+                                                    }
+                                                  }) ?? [])
+                                                ]
+                                              }/>
+                                    </Form.Item>
+                                  </Form>
+                                </>}
+                                onLoad={() => {
+                                  form.setFieldsValue({ group_id: 0 })
+                                }}
+                                onOk={() => {
+                                  const group_id = form.getFieldValue('group_id')
+                                  updateGroup({ id: props.selectedRows?.map(item => item.id), group_id })
+                                }}
+                        >
+                          <Button disabled={props.selectedRows?.length == 0}>{t(`${i18nPrefix}.actions.changeGroup`, '更换分组')}</Button>
+                        </ModalPro>
+                      </Space>
+                    }}
+                    tableAlertOptionRender={false}
                     toolbar={{
                       search: {
                         loading: isFetching && !!search?.title,
@@ -237,6 +323,10 @@ const WebsiteDomain = () => {
                         }
                       }
                     }}
+                    rowSelection={{
+                      type: 'checkbox',
+                      alwaysShowAlert: true,
+                    }}
                     dateFormatter="string"
                     loading={isLoading || isFetching}
                     dataSource={data?.rows ?? []}