完善SSL模块的页面状态

2 years ago · 8f1a866e10
7 changed files with 1364 additions and 1333 deletions
--- a/src/components/status/Status.tsx
+++ b/src/components/status/Status.tsx
@ -23,7 +23,7 @@ const getColor = (status: string) => {
    case 'removing':
      return 'warning'
    default:
-            return 'primary'
+      return 'default'
  }
 }

--- a/src/pages/websites/ssl/acme/AcmeList.tsx
+++ b/src/pages/websites/ssl/acme/AcmeList.tsx
@ -1,11 +1,17 @@
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { BetaSchemaForm, ProColumns, ProFormColumnsType, ProTable } from '@ant-design/pro-components'
 import { useTranslation } from '@/i18n.ts'
-import { AcmeAccountTypes, acmeListAtom, acmePageAtom, AcmeType, saveOrUpdateAcmeAtom } from '@/store/websites/acme.ts'
+import {
+  AcmeAccountTypes,
+  acmeListAtom,
+  acmePageAtom,
+  AcmeType,
+  deleteAcmeAtom,
+  saveOrUpdateAcmeAtom
+} from '@/store/websites/acme.ts'
 import { useAtom, useAtomValue } from 'jotai'
 import { Alert, Button, Form, Popconfirm } from 'antd'
 import { KeyTypeEnum, KeyTypes } from '@/store/websites/ssl.ts'
-import { deleteDNSAtom } from '@/store/websites/dns.ts'
 import { WebSite } from '@/types'

 const AcmeList = () => {
@ -13,9 +19,9 @@ const AcmeList = () => {
  const { t } = useTranslation()
  const [ form ] = Form.useForm()
  const [ page, setPage ] = useAtom(acmePageAtom)
-    const { data, isLoading, refetch } = useAtomValue(acmeListAtom)
+  const { data, isLoading, isFetching, refetch } = useAtomValue(acmeListAtom)
  const { mutate: saveOrUpdate, isPending: isSubmitting, isSuccess } = useAtomValue(saveOrUpdateAcmeAtom)
-    const { mutate: deleteDNS, isPending: isDeleting } = useAtomValue(deleteDNSAtom)
+  const { mutate: deleteAcme, isPending: isDeleting } = useAtomValue(deleteAcmeAtom)
  const [ open, setOpen ] = useState(false)

  const columns = useMemo<ProColumns<WebSite.IAcmeAccount>[]>(() => {
@ -53,7 +59,7 @@ const AcmeList = () => {
      },
      {
        title: t('website.ssl.acme.columns.keyType', '密钥算法'),
-                dataIndex: 'keyType',
+        dataIndex: 'key_type',
        valueType: 'select',
        fieldProps: {
          options: KeyTypes
@ -71,15 +77,16 @@ const AcmeList = () => {
        ellipsis: true, // 文本溢出省略
        hideInForm: true,
      }, {
-                title: '操作',
+        title: t('website.ssl.acme.columns.option', '操作'),
        valueType: 'option',
+        fixed: 'right',
        render: (_, record) => {
          return [
            <Popconfirm
              key={'del_confirm'}
              disabled={isDeleting}
              onConfirm={() => {
-                                    deleteDNS(record.id)
+                deleteAcme(record.id)
              }}
              title={t('message.deleteConfirm')}>
              <a key="del">
@ -92,6 +99,12 @@ const AcmeList = () => {
    ]
  }, [])

+  useEffect(() => {
+    if (isSuccess) {
+      setOpen(false)
+    }
+  }, [ isSuccess ])
+
  return (
    <>
      <Alert message={t('website.ssl.acme.tip', 'Acme账户用于申请免费证书')}/>
@ -114,7 +127,7 @@ const AcmeList = () => {
            }}
            type={'primary'}>{t('website.ssl.acme.add', '添加Acme帐户')}</Button>
        }
-                        loading={isLoading}
+        loading={isLoading || isFetching}
        dataSource={data?.rows ?? []}
        columns={columns}
        search={false}
@ -161,7 +174,7 @@ const AcmeList = () => {
        onFinish={async (values) => {
          // console.log('values', values)
          saveOrUpdate(values)
-                            return isSuccess
+
        }}
        columns={columns as ProFormColumnsType[]}/>
    </>
--- a/src/pages/websites/ssl/ca/CAList.tsx
+++ b/src/pages/websites/ssl/ca/CAList.tsx
@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { BetaSchemaForm, ProColumns, ProFormColumnsType, ProTable } from '@ant-design/pro-components'
 import { useTranslation } from '@/i18n.ts'
 import { deleteCaAtom } from '@/store/websites/ca.ts'
@ -16,7 +16,7 @@ const CAList = () => {
  const { t } = useTranslation()
  const [ form ] = Form.useForm()
  const [ page, setPage ] = useAtom(caPageAtom)
-    const { data, isLoading, refetch } = useAtomValue(caListAtom)
+  const { data, isLoading, isFetching, refetch } = useAtomValue(caListAtom)
  const { mutate: saveOrUpdate, isPending: isSubmitting, isSuccess } = useAtomValue(saveOrUpdateCaAtom)
  const { mutate: deleteCA, isPending: isDeleting } = useAtomValue(deleteCaAtom)
  const [ open, setOpen ] = useState(false)
@ -165,6 +165,12 @@ const CAList = () => {
    ]
  }, [])

+  useEffect(() => {
+    if (isSuccess) {
+      setOpen(false)
+    }
+  }, [ isSuccess ])
+
  return (
    <>
      <ProTable<WebSite.ICA>
@ -186,7 +192,7 @@ const CAList = () => {
            }}
            type={'primary'}>{t('website.ssl.ca.add', '创建机构')}</Button>
        }
-                        loading={isLoading}
+        loading={isLoading || isFetching}
        dataSource={data?.rows ?? []}
        columns={columns}
        search={false}
@ -233,7 +239,6 @@ const CAList = () => {
        onFinish={async (values) => {
          // console.log('values', values)
          saveOrUpdate(values)
-                            return isSuccess
        }}
        columns={columns as ProFormColumnsType[]}/>
      <Detail/>
--- a/src/pages/websites/ssl/dns/DNSList.tsx
+++ b/src/pages/websites/ssl/dns/DNSList.tsx
@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { BetaSchemaForm, ProColumns, ProFormColumnsType, ProTable } from '@ant-design/pro-components'
 import { useTranslation } from '@/i18n.ts'
 import { useAtom, useAtomValue } from 'jotai'
@ -14,7 +14,7 @@ import {
 import { WebSite } from '@/types'

 const getKeyColumn = (type: string, t) => {
-    const columns: ProColumns<IDnsAccount>[] = []
+  const columns: ProColumns<WebSite.IDnsAccount>[] = []
  switch (type) {
    case DNSTypeEnum.AliYun: {
      columns.push(...[
@ -150,7 +150,7 @@ const DNSList = () => {
  const { t } = useTranslation()
  const [ form ] = Form.useForm()
  const [ page, setPage ] = useAtom(dnsPageAtom)
-    const { data, isLoading, refetch } = useAtomValue(dnsListAtom)
+  const { data, isLoading, isFetching, refetch } = useAtomValue(dnsListAtom)
  const { mutate: saveOrUpdate, isPending: isSubmitting, isSuccess } = useAtomValue(saveOrUpdateDNSAtom)
  const { mutate: deleteDNS, isPending: isDeleting } = useAtomValue(deleteDNSAtom)
  const [ open, setOpen ] = useState(false)
@ -219,6 +219,12 @@ const DNSList = () => {
    ]
  }, [])

+  useEffect(() => {
+    if (isSuccess) {
+      setOpen(false)
+    }
+  }, [ isSuccess ])
+
  return (
    <>
      <ProTable<WebSite.IDnsAccount>
@ -239,7 +245,7 @@ const DNSList = () => {
            }}
            type={'primary'}>{t('website.ssl.dns.add', '添加DNS帐户')}</Button>
        }
-                        loading={isLoading}
+        loading={isLoading || isFetching}
        dataSource={data?.rows ?? []}
        columns={columns}
        search={false}
@ -286,7 +292,6 @@ const DNSList = () => {
        onFinish={async (values) => {
          // console.log('values', values)
          saveOrUpdate(values)
-                            return isSuccess
        }}
        columns={columns as ProFormColumnsType[]}/>
    </>
--- a/src/pages/websites/ssl/index.tsx
+++ b/src/pages/websites/ssl/index.tsx
@ -11,7 +11,7 @@ import {
 } from '@/store/websites/ssl.ts'
 import ListPageLayout from '@/layout/ListPageLayout.tsx'
 import { BetaSchemaForm, ProColumns, ProFormColumnsType, ProTable } from '@ant-design/pro-components'
-import { memo, useMemo, useRef, useState } from 'react'
+import { memo, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from '@/i18n.ts'
 import { Button, Form, Popconfirm, Space } from 'antd'
 import { PlusOutlined } from '@ant-design/icons'
@ -161,7 +161,7 @@ const SSL = () => {
              },
              fieldProps: {
                loading: dnsLoading,
-                                options: dnsData?.rows.map(item => ({
+                options: dnsData?.rows?.map(item => ({
                  label: `${item.name} [${getDNSTypeName(item.type)}]`,
                  value: item.id
                }))
@ -283,7 +283,14 @@ const SSL = () => {
        ],
      },
    ]
-    }, [])
+
+  }, [ acmeData, dnsData ])
+
+  useEffect(() => {
+    if (isSuccess) {
+      setOpen(false)
+    }
+  }, [ isSuccess ])

  return (
    <ListPageLayout>
@ -401,7 +408,6 @@ const SSL = () => {
        onFinish={async (values) => {
          // console.log('values', values)
          saveOrUpdate(values)
-                            return isSuccess
        }}
        columns={columns as ProFormColumnsType[]}/>
      <DrawerPicker
--- a/src/routes.tsx
+++ b/src/routes.tsx
@ -315,3 +315,5 @@ export const RootProvider = memo((props: { context: Partial<IRootContext> }) =>
    </QueryClientProvider>
  )
 })
+
+export default RootProvider
--- a/src/store/websites/acme.ts
+++ b/src/store/websites/acme.ts
@ -9,7 +9,7 @@ import { WebSite } from '@/types'
 export enum AcmeType {
  LetsEncrypt = 'LetsEncrypt',
  //zerossl
-    ZeroSSl = 'ZeroSSl',
+  ZeroSSl = 'ZeroSsl',
  //buypass
  Buypass = 'Buypass',
  //google
@ -43,7 +43,7 @@ export const acmeListAtom = atomWithQuery(get => ({
 }))

 //saveOrUpdate
-export const saveOrUpdateAcmeAtom = atomWithMutation<any, WebSite.IAcmeAccount>(get => ({
+export const saveOrUpdateAcmeAtom = atomWithMutation<IApiResult, WebSite.IAcmeAccount>(get => ({
  mutationKey: [ 'saveOrUpdateAcme' ],
  mutationFn: async (data: WebSite.IAcmeAccount) => {
    if (data.id > 0) {