调整页面

src/App.css

@@ -22,3 +22,11 @@
 .ant-drawer .ant-drawer-footer{
   background-color: #fcfcfc;
 }
+
+.hover{
+  cursor: pointer;
+  &:hover{
+
+    color: #1c7ed6;
+  }
+}

src/components/dialog/index.tsx

@@ -0,0 +1,95 @@
+import { Modal, ModalProps } from 'antd'
+import { useStyle } from './style'
+import {
+  useState,
+  forwardRef,
+  ReactNode,
+  useImperativeHandle,
+  useCallback, useRef
+} from 'react'
+
+export { useDialog } from './useDialog'
+
+export interface DialogRef {
+  show: (data?: any) => void
+  close: () => void
+
+  get data()
+}
+
+export interface DialogProps extends Omit<ModalProps, 'onCancel' | 'onOk'> {
+  target?: ReactNode | JSX.Element
+  ref?: DialogRef
+  onCancel?: () => boolean | void
+  onOk?: (data?: any) => Promise<boolean | void> | boolean | void
+}
+
+const Dialog = forwardRef<DialogRef, DialogProps>(({ open, destroyOnClose, target, ...props }: DialogProps, ref) => {
+
+  const { styles, cx } = useStyle()
+  const [ innerOpen, setOpen ] = useState(() => open ?? false)
+  const [ submitting, setSubmitting ] = useState(false)
+
+  const dataRef = useRef<any>()
+
+  useImperativeHandle(ref, () => {
+    return {
+      show: (data?: any) => {
+        dataRef.current = data
+        setOpen(true)
+      },
+      close: () => {
+        setOpen(false)
+      },
+      get data() {
+        return dataRef.current
+      }
+    }
+  }, [ setOpen ])
+
+  const renderTarget = useCallback(() => {
+    if (target) {
+      return <span onClick={() => {
+        setOpen(true)
+      }}>
+        {target}
+      </span>
+    }
+    return null
+
+  }, [ target ])
+
+  return (
+          <div className={styles.container}>
+            {renderTarget()}
+            <Modal
+                    destroyOnClose={destroyOnClose ?? true}
+                    {...props}
+                    wrapClassName={cx(styles.wrap, props.wrapClassName)}
+                    confirmLoading={submitting}
+                    open={innerOpen}
+                    onCancel={() => {
+                      if (props.onCancel?.() === false) {
+                        return
+                      }
+                      setOpen(false)
+                    }}
+                    onOk={async () => {
+                      if (props.onOk) {
+                        setSubmitting(true)
+                        const res = await props.onOk(dataRef.current)
+                        setSubmitting(false)
+                        if (res === false) {
+                          return
+                        }
+                      }
+                      setOpen(false)
+                    }}
+            >
+              {props.children}
+            </Modal>
+          </div>
+  )
+})
+
+export default Dialog

src/components/dialog/style.ts

@@ -0,0 +1,33 @@
+import { createStyles } from '@/theme'
+
+export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any) => {
+    const prefix = `${prefixCls}-${token?.proPrefix}-dialog-component`
+
+    const container = css`
+
+    `
+
+  const wrap = css`
+    .ant-modal-content{
+      padding: 20px 0 15px 0;
+      
+      .ant-modal-header{
+        padding: 0 24px 10px;
+        border-bottom: 1px solid #eee;
+      }
+      .ant-modal-body{
+        padding: 10px 24px;
+      }
+      .ant-modal-footer{
+        background-color: #fcfcfc;
+        padding: 15px 24px 0;
+        border-top: 1px solid #eee;
+      }
+    }
+  `
+
+    return {
+        container: cx(prefix, props?.className, container),
+      wrap,
+    }
+})

src/components/dialog/useDialog.tsx

@@ -0,0 +1,26 @@
+import Dialog, { DialogProps, DialogRef } from './index.tsx'
+import { useRef, useCallback, useMemo } from 'react'
+
+export const useDialog = (props: DialogProps) => {
+  const dialogRef = useRef<DialogRef | undefined>()
+
+  const openDialog = useCallback((data?: any) => {
+    if (dialogRef.current) {
+      dialogRef.current.show(data)
+    } else {
+      console.error('Dialog ref is not defined')
+    }
+  }, [])
+
+  const closeDialog = useCallback(() => {
+    if (dialogRef.current) {
+      dialogRef.current.close()
+    } else {
+      console.error('Dialog ref is not defined')
+    }
+  }, [])
+
+  const dialog = useMemo(() => <Dialog {...props} ref={dialogRef as any}/>, [ props ])
+
+  return [ dialogRef, dialog, openDialog, closeDialog ] as const
+}

src/components/icon/index.tsx

@@ -4,13 +4,51 @@ import * as AntIcons from '@ant-design/icons/es/icons'
 
 import IconItem from './picker/IconRender.tsx'
 import { IconUnit } from './types.ts'
+import { createStyles } from '@/theme'
 
 
 type Prefix = 'antd:' | 'park:';
 type IconType = `${Prefix}${string}`;
 
+const useStyles = createStyles(({ css, cx }, props: any) => {
+
+  const keyframes = css`
+    @keyframes rotating {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  `
+
+  const container = css`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  `
+
+  const size = props.size ? css`
+    height: ${props.size}px;
+    width: ${props.size}px;
+    line-height: ${props.size}px;
+  ` : ''
+
+  const isLoading = css`
+    animation: rotating 2s linear infinite;
+  `
+  return {
+    container: cx( container, size, props.className),
+    isLoading: cx(keyframes, size, isLoading)
+  }
+})
+
 interface IconProps extends Pick<IconUnit, 'type'> {
   type: IconType | IconUnit['type']
+  isLoading?: boolean
+
+  [key: string]: any
 }
 
 function isAntdOrParkIcon(value: string): value is IconType {
@@ -18,7 +56,10 @@ function isAntdOrParkIcon(value: string): value is IconType {
 }
 
 export function Icon(props: IconProps) {
-  const { type, ...other } = props
+
+  const { styles, cx } = useStyles(props)
+
+  const { type, isLoading, ...other } = props
   if (type && isAntdOrParkIcon(type)) {
     const [ t, c ] = type.split(':')
     return <IconItem {...other as any} type={t} componentName={c}/>
@@ -42,7 +83,13 @@ export function Icon(props: IconProps) {
   return (
           <Fragment>
             <IconAll type={type as IconType}
-               theme="outline" size="20" fill="#868686" strokeWidth={3}
+                     className={cx(styles.container, {
+                       [styles.isLoading]: isLoading,
+                     })}
+                     theme="outline"
+                     size={other.size ?? 20}
+                     // fill="#868686"
+                     strokeWidth={3}
                      {...other}/>
           </Fragment>
   )

src/layout/RootLayout.tsx

@@ -116,7 +116,7 @@ export default () => {
                           return document.getElementById('crazy-pro-layout') || document.body
                         }}
                 >
-                  <Watermark {
+                  <div {
                                ...{
                                  rotate: -31,
                                  content: currentUser?.nickname,
@@ -247,6 +247,7 @@ export default () => {
                                     items={convertToMenu((childMenuRef.current || []), (item => {
                                       return {
                                         data: item,
+                                        icon: item.icon,
                                         key: item.path || item.meta.name,
                                         label: item.title,
                                       }
@@ -332,7 +333,7 @@ export default () => {
                     >
                     </ProLayout>*/}
                     </ProLayout>
-                  </Watermark>
+                  </div>
                 </ConfigProvider>
               </ProConfigProvider>
             </CatchBoundary>

src/locales/lang/pages/websites/zh-CN.ts

@@ -0,0 +1,21 @@
+export default {
+  status: {
+    /**
+     * StatusSuccess StatusEnum = "success" // 成功
+     *    StatusFail    StatusEnum = "fail"    // 失败
+     *    StatusEnable  StatusEnum = "enable"  // 启用
+     *    StatusPending StatusEnum = "pending" // 等待
+     *    StatusDelete  StatusEnum = "delete"  // 删除
+     *    StatusDisable StatusEnum = "disable" // 禁用
+     *    StatusSyncing StatusEnum = "syncing" // 同步
+     */
+    success: '成功',
+    fail: '失败',
+    enable: '启用',
+    pending: '等待',
+    delete: '删除',
+    disable: '禁用',
+    syncing: '同步',
+
+  }
+}

src/locales/lang/zh-CN.ts

@@ -7,6 +7,7 @@ import video from './pages/cms/video/zh-CN.ts'
 import videoCloud from './pages/cms/videoCloud/zh-CN.ts'
 import videoMagnet from './pages/cms/videoMagnet/zh-CN.ts'
 import list from './pages/videos/list/zh-CN.ts'
+import websites from './pages/websites/zh-CN.ts'
 
 export default {
   ...antdZh,
@@ -46,7 +47,11 @@ export default {
   home: {
     welcome: '欢迎使用'
   },
-
+  websites:{
+    common: {
+      ...websites,
+    },
+  },
   system: {
     menus,
     roles

src/pages/websites/dns/DNSList.tsx

@@ -220,7 +220,7 @@ const DNSList = () => {
                     }}>{t('actions.sync', '同步')}</Action>,
             <Popconfirm
                     key={'del_confirm'}
-                    disabled={isDeleting || record.status === 2}
+                    disabled={isDeleting || record.status === 0 || record.status === 2}
                     onConfirm={() => {
                       deleteDNS(record.id)
                     }}

src/pages/websites/domain/index.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from '@/i18n.ts'
-import { Button, Form, Divider, Space, Tooltip, Badge } from 'antd'
+import { Button, Form, Divider, Space, Tooltip, Badge, Tag, Input } from 'antd'
 import { useAtom, useAtomValue } from 'jotai'
 import {
   deleteWebsiteDomainAtom,
@@ -19,8 +19,12 @@ import { getValueCount } from '@/utils'
 import { Table as ProTable } from '@/components/table'
 import { Link } from '@tanstack/react-router'
 import Popconfirm from '@/components/popconfirm'
+import { accountStatus, accountStatusColor } from '@/store/websites/dns_account.ts'
+import Icon from '@/components/icon'
+import { useDialog } from '@/components/dialog'
+import { dnsListAtom } from '@/store/websites/dns.ts'
 
-const i18nPrefix = 'websiteDomains.list'
+const i18nPrefix = 'websites.domain.list'
 
 const WebsiteDomain = () => {
 
@@ -33,11 +37,27 @@ const WebsiteDomain = () => {
   const [ currentWebsiteDomain, setWebsiteDomain ] = useAtom(websiteDomainAtom)
   const { data, isFetching, isLoading, refetch } = useAtomValue(websiteDomainsAtom)
   const { mutate: deleteWebsiteDomain, isPending: isDeleting } = useAtomValue(deleteWebsiteDomainAtom)
+  const { data: dnsData } = useAtomValue(dnsListAtom)
 
   const [ open, setOpen ] = useState(false)
   const [ openFilter, setFilterOpen ] = useState(false)
   const [ searchKey, setSearchKey ] = useState(search?.title)
 
+  const [ , dialog, openDialog ] = useDialog({
+    title: '编辑备注',
+    children: <Form form={form}>
+      <Form.Item name={'remark'}
+                 label={t(`${i18nPrefix}.domain.columns.remark`, '备注信息')}>
+        <Input/>
+      </Form.Item>
+    </Form>,
+    onOk: () => {
+      const id = form.getFieldValue('id')
+      const remark = form.getFieldValue('remark')
+      return saveOrUpdate({ remark, id } as any)
+    }
+  })
+
   const columns = useMemo(() => {
     return [
       {
@@ -51,16 +71,51 @@ const WebsiteDomain = () => {
         title: t(`${i18nPrefix}.columns.name`, '域名'),
         dataIndex: 'name',
         render(_text, record) {
-          return <Link to={'/websites/record'}>{record.name}</Link>
+          const edit = <Icon className={'hover'}
+                             onClick={() => {
+                               form.setFieldsValue(record)
+                               openDialog(record)
+                             }}
+                             style={{ paddingBlockStart: 0 }} type={'EditTwo'} size={14}/>
+          return <Space>
+            <Link to={'/websites/record'}>{record.name}</Link>
+            {edit}
+          </Space>
         }
       },
       {
         title: t(`${i18nPrefix}.columns.dns_account_id`, 'DNS账号'),
         dataIndex: 'dns_account_id',
+        valueType: 'select',
+        fieldProps: {
+          options: dnsData?.rows?.map?.(item => {
+            return {
+              data: item,
+              label: item.name,
+              value: item.id,
+            }
+          })
+        }
       },
       {
         title: t(`${i18nPrefix}.columns.status`, '状态'),
         dataIndex: 'status',
+        hideInForm: true,
+        valueType: 'select',
+        valueEnum: accountStatus,
+        render(_dom, record) {
+          const loading = [ 'pending', 'syncing' ].includes(record.status) ?
+                  <Icon type={'LoadingTwo'} size={14} isLoading={true}/> : null
+          return <Tag
+                  style={{ paddingInline: 5 }}
+                  color={accountStatusColor[record.status]}>
+            <div style={{ display: 'inline-flex', justifyContent: 'center', alignItems: 'center' }}>
+                <span style={{ paddingInlineEnd: 3 }}> {t(`websites.common.status.${record.status!}`, record.status + '')}
+                </span>
+              {loading}
+            </div>
+          </Tag>
+        }
       },
       {
         title: t(`${i18nPrefix}.columns.nameservers`, 'nameservers'),
@@ -69,10 +124,8 @@ const WebsiteDomain = () => {
       {
         title: t(`${i18nPrefix}.columns.created`, '创建时间'),
         dataIndex: 'created',
-      },
-      {
-        title: t(`${i18nPrefix}.columns.modified`, '修改时间'),
-        dataIndex: 'modified',
+        hideInSearch: true,
+        hideInForm: true,
       },
       {
         title: t(`${i18nPrefix}.columns.option`, '操作'),
@@ -87,6 +140,14 @@ const WebsiteDomain = () => {
                     setOpen(true)
                   }}>{t('actions.edit')}</Action>,
           <Divider type={'vertical'}/>,
+          <Action key="sync"
+                  as={'a'}
+                  disabled={record.status === 'syncing'}
+                  onClick={() => {
+
+                  }}>{t('actions.sync', '同步')}</Action>,
+
+          <Divider type={'vertical'}/>,
           <Popconfirm
                   key={'del_confirm'}
                   disabled={isDeleting}
@@ -99,7 +160,7 @@ const WebsiteDomain = () => {
         ]
       }
     ] as ProColumns[]
-  }, [ isDeleting, currentWebsiteDomain, search ])
+  }, [ isDeleting, currentWebsiteDomain, search, dnsData ])
 
   useEffect(() => {
 
@@ -287,6 +348,9 @@ const WebsiteDomain = () => {
 
                     }}
                     columns={columns.filter(item => !item.hideInSearch) as ProFormColumnsType[]}/>
+            {
+              dialog
+            }
           </ListPageLayout>
   )
 }

src/store/websites/dns_account.ts

@@ -13,6 +13,36 @@ type SearchParams = IPage & {
   [key: string]: any
 }
 
+export const accountStatusColor = {
+  /**
+   * StatusSuccess StatusEnum = "success" // 成功
+   *    StatusFail    StatusEnum = "fail"    // 失败
+   *    StatusEnable  StatusEnum = "enable"  // 启用
+   *    StatusPending StatusEnum = "pending" // 等待
+   *    StatusDelete  StatusEnum = "delete"  // 删除
+   *    StatusDisable StatusEnum = "disable" // 禁用
+   *    StatusSyncing StatusEnum = "syncing" // 同步
+   */
+  success: 'green',
+  fail: 'red',
+  enable: 'blue',
+  pending: 'blue',
+  delete: 'red',
+  disable: 'gray',
+  syncing: 'blue',
+}
+
+export const accountStatus = [
+  { label: t(`websites.common.status.success`, 'success'), value: 'success' },
+  { label: t(`websites.common.status.fail`, 'fail'), value: 'fail' },
+  { label: t(`websites.common.status.enable`, 'enable'), value: 'enable' },
+  { label: t(`websites.common.status.pending`, 'pending'), value: 'pending' },
+  { label: t(`websites.common.status.delete`, 'delete'), value: 'delete' },
+  { label: t(`websites.common.status.disable`, 'disable'), value: 'disable' },
+  { label: t(`websites.common.status.syncing`, 'syncing'), value: 'syncing' },
+]
+
+
 export const websiteDnsAccountIdAtom = atom(0)
 
 export const websiteDnsAccountIdsAtom = atom<number[]>([])