style: no resource modal

2025-12-17 19:58:28 +08:00
parent 30536cb04a
commit e4bd753355
10 changed files with 218 additions and 123 deletions
@@ -0,0 +1,135 @@
+import IconFont from '@/components/icon-font';
+import ScrollerModal from '@/components/scroller-modal/index';
+import useClusterList from '@/pages/cluster-management/hooks/use-cluster-list';
+import { useIntl, useNavigate } from '@umijs/max';
+import { Button } from 'antd';
+import { useMemo, useState } from 'react';
+import styled from 'styled-components';
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 32px auto 0px;
+  .title {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 12px;
+  }
+  .tips,
+  .sub-title {
+    color: var(--ant-color-text-tertiary);
+  }
+  .icon {
+    font-size: 32px;
+    width: 64px;
+    height: 64px;
+    border-radius: 32px;
+    margin-bottom: 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--ant-color-primary);
+    background-color: var(--ant-color-primary-bg);
+  }
+  .desc {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+  }
+  .btn-wrapper {
+    width: 100%;
+    padding: 0 16px;
+    margin-top: 32px;
+    display: flex;
+    gap: 16px;
+    justify-content: center;
+    align-items: center;
+  }
+`;
+
+export default function useAddResource() {
+  const intl = useIntl();
+  const navigate = useNavigate();
+
+  const { fetchAll, clusterList, workerList, clustersAtom, workersAtom } =
+    useClusterList();
+
+  const [hiddenModal, setHiddenModal] = useState(false);
+  const [loadingStatus, setLoadingStatus] = useState({
+    loading: false,
+    loadend: false
+  });
+
+  const isNoResource = useMemo(() => {
+    const noResource = workerList.length === 0 || clusterList.length === 0;
+    return noResource && !loadingStatus.loading && loadingStatus.loadend;
+  }, [workersAtom.length, clustersAtom.length, loadingStatus]);
+
+  const contentInfo = useMemo(() => {
+    if (clusterList.length === 0) {
+      return {
+        title: intl.formatMessage({ id: 'noresult.cluster.title' }),
+        subTitle: intl.formatMessage({ id: 'noresult.resources.cluster' }),
+        btnText: intl.formatMessage({ id: 'noresult.resources.gotocluster' })
+      };
+    }
+    return {
+      title: intl.formatMessage({ id: 'noresult.workers.title' }),
+      subTitle: intl.formatMessage({ id: 'noresult.resources.worker' }),
+      btnText: intl.formatMessage({ id: 'noresult.workers.button.add' })
+    };
+  }, [clusterList.length, workerList.length, intl]);
+
+  const open: boolean = useMemo(() => {
+    return isNoResource && !hiddenModal;
+  }, [isNoResource, hiddenModal]);
+
+  const handleCreate = () => {};
+
+  const handleCancel = () => {
+    setHiddenModal(true);
+  };
+
+  const Modal = (
+    <ScrollerModal
+      open={open}
+      footer={null}
+      maskClosable={false}
+      closeIcon={null}
+      onCancel={handleCancel}
+    >
+      <Content>
+        <div className="icon">
+          <IconFont type="icon-dashboard" />
+        </div>
+        <div className="title">{contentInfo.title}</div>
+        <div className="desc">
+          <div className="sub-title">{contentInfo.subTitle}</div>
+        </div>
+        <div className="btn-wrapper">
+          <Button onClick={handleCancel} type="default" style={{ flex: 1 }}>
+            {intl.formatMessage({ id: 'clusters.create.skipfornow' })}
+          </Button>
+          <Button onClick={handleCreate} type="primary" style={{ flex: 1 }}>
+            {contentInfo.btnText}
+          </Button>
+        </div>
+      </Content>
+    </ScrollerModal>
+  );
+
+  return {
+    open,
+    contentInfo,
+    loadingStatus,
+    clusterList,
+    Modal,
+    handleCreate,
+    setLoadingStatus,
+    handleCancel,
+    fetchAll
+  };
+}