From 05c7ef7403f38a3dccf0f4e22ce2dc84fc364973 Mon Sep 17 00:00:00 2001
From: cp3hnu <cp3hnu@gmail.com>
Date: Mon, 13 May 2024 12:52:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20table=20column=20=E6=B7=BB=E5=8A=A0=20e?=
 =?UTF-8?q?llipsis?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 react-ui/src/app.tsx                          |  12 +-
 .../src/components/CommonTableCell/index.tsx  |  12 +-
 react-ui/src/pages/Mirror/info.tsx            |   6 +-
 react-ui/src/pages/Mirror/list.tsx            |   8 +-
 react-ui/src/pages/User/Login/index.tsx       | 413 +++++++++---------
 react-ui/src/pages/User/Login/login.less      |  55 +--
 react-ui/src/requestConfig.ts                 |   1 -
 react-ui/src/utils/ui.tsx                     |   6 +-
 8 files changed, 266 insertions(+), 247 deletions(-)

diff --git a/react-ui/src/app.tsx b/react-ui/src/app.tsx
index 66005f50..becc1abc 100644
--- a/react-ui/src/app.tsx
+++ b/react-ui/src/app.tsx
@@ -184,10 +184,14 @@ export function render(oldRender: () => void) {
     oldRender();
     return;
   }
-  getRoutersInfo().then((res) => {
-    setRemoteMenu(res);
-    oldRender();
-  });
+  getRoutersInfo()
+    .then((res) => {
+      setRemoteMenu(res);
+      oldRender();
+    })
+    .catch(() => {
+      oldRender();
+    });
 }
 
 // 主题修改
diff --git a/react-ui/src/components/CommonTableCell/index.tsx b/react-ui/src/components/CommonTableCell/index.tsx
index 65a1dff2..6c2f35b0 100644
--- a/react-ui/src/components/CommonTableCell/index.tsx
+++ b/react-ui/src/components/CommonTableCell/index.tsx
@@ -4,8 +4,18 @@
  * @Description: 自定义 Table 单元格，没有数据时展示 --
  */
 
-function CommonTableCell(text?: string | null) {
+import { Tooltip } from 'antd';
+
+function renderCell(text?: string | null) {
   return <span>{text ?? '--'}</span>;
 }
 
+function CommonTableCell(ellipsis: boolean = false) {
+  if (ellipsis) {
+    return (text?: string | null) => <Tooltip title={text}>{renderCell(text)}</Tooltip>;
+  } else {
+    return renderCell;
+  }
+}
+
 export default CommonTableCell;
diff --git a/react-ui/src/pages/Mirror/info.tsx b/react-ui/src/pages/Mirror/info.tsx
index 8f26dd9f..a2c806ab 100644
--- a/react-ui/src/pages/Mirror/info.tsx
+++ b/react-ui/src/pages/Mirror/info.tsx
@@ -161,13 +161,13 @@ function MirrorInfo() {
       dataIndex: 'tag_name',
       key: 'tag_name',
       width: '25%',
-      render: CommonTableCell,
+      render: CommonTableCell(),
     },
     {
       title: '镜像地址',
       dataIndex: 'url',
       key: 'url',
-      render: CommonTableCell,
+      render: CommonTableCell(),
     },
     {
       title: '状态',
@@ -181,7 +181,7 @@ function MirrorInfo() {
       dataIndex: 'file_size',
       key: 'file_size',
       width: 150,
-      render: CommonTableCell,
+      render: CommonTableCell(),
     },
     {
       title: '创建时间',
diff --git a/react-ui/src/pages/Mirror/list.tsx b/react-ui/src/pages/Mirror/list.tsx
index 24932f6d..16bfeb1a 100644
--- a/react-ui/src/pages/Mirror/list.tsx
+++ b/react-ui/src/pages/Mirror/list.tsx
@@ -166,21 +166,21 @@ function MirrorList() {
       dataIndex: 'name',
       key: 'name',
       width: '30%',
-      render: CommonTableCell,
+      render: CommonTableCell(),
     },
     {
       title: '版本数据',
       dataIndex: 'version_count',
       key: 'version_count',
       width: 100,
-      render: CommonTableCell,
+      render: CommonTableCell(),
     },
     {
       title: '镜像描述',
       dataIndex: 'description',
       key: 'description',
-      render: CommonTableCell,
-      ellipsis: true,
+      render: CommonTableCell(true),
+      ellipsis: { showTitle: false },
     },
     {
       title: '创建时间',
diff --git a/react-ui/src/pages/User/Login/index.tsx b/react-ui/src/pages/User/Login/index.tsx
index 6e043763..0dd3a282 100644
--- a/react-ui/src/pages/User/Login/index.tsx
+++ b/react-ui/src/pages/User/Login/index.tsx
@@ -289,216 +289,217 @@ const Login: React.FC = () => {
           >
             账号登录
           </div>
-          <LoginForm
-            title=""
-            className={styles.loginForm}
-            initialValues={{
-              autoLogin: true,
-            }}
-            // actions={[
-            //   <FormattedMessage
-            //     key="loginWith"
-            //     id="pages.login.loginWith"
-            //     defaultMessage="其他登录方式"
-            //   />,
-            //   <ActionIcons key="icons" />,
-            // ]}
-            onFinish={async (values) => {
-              await handleSubmit(values as API.LoginParams);
-            }}
-          >
-            {code !== 200 && loginType === 'account' && (
-              <LoginMessage
-                content={intl.formatMessage({
-                  id: 'pages.login.accountLogin.errorMessage',
-                  defaultMessage: '账户或密码错误(admin/admin123)',
-                })}
-              />
-            )}
-            {type === 'account' && (
-              <>
-                <ProFormText
-                  name="username"
-                  initialValue="admin"
-                  fieldProps={{
-                    size: 'large',
-                    prefix: <UserOutlined />,
-                  }}
-                  placeholder={intl.formatMessage({
-                    id: 'pages.login.username.placeholder',
-                    defaultMessage: '用户名: admin',
-                  })}
-                  rules={[
-                    {
-                      required: true,
-                      message: (
-                        <FormattedMessage
-                          id="pages.login.username.required"
-                          defaultMessage="请输入用户名!"
-                        />
-                      ),
-                    },
-                  ]}
-                />
-                <ProFormText.Password
-                  name="password"
-                  initialValue="admin123"
-                  fieldProps={{
-                    size: 'large',
-                    prefix: <LockOutlined />,
-                  }}
-                  placeholder={intl.formatMessage({
-                    id: 'pages.login.password.placeholder',
-                    defaultMessage: '密码: admin123',
+          <div className={styles.loginForm}>
+            <LoginForm
+              title=""
+              initialValues={{
+                autoLogin: true,
+              }}
+              // actions={[
+              //   <FormattedMessage
+              //     key="loginWith"
+              //     id="pages.login.loginWith"
+              //     defaultMessage="其他登录方式"
+              //   />,
+              //   <ActionIcons key="icons" />,
+              // ]}
+              onFinish={async (values) => {
+                await handleSubmit(values as API.LoginParams);
+              }}
+            >
+              {code !== 200 && loginType === 'account' && (
+                <LoginMessage
+                  content={intl.formatMessage({
+                    id: 'pages.login.accountLogin.errorMessage',
+                    defaultMessage: '账户或密码错误(admin/admin123)',
                   })}
-                  rules={[
-                    {
-                      required: true,
-                      message: (
-                        <FormattedMessage
-                          id="pages.login.password.required"
-                          defaultMessage="请输入密码！"
-                        />
-                      ),
-                    },
-                  ]}
                 />
-                <Row>
-                  <Col flex={4}>
-                    <ProFormText
-                      style={{
-                        float: 'right',
-                      }}
-                      name="code"
-                      placeholder={intl.formatMessage({
-                        id: 'pages.login.captcha.placeholder',
-                        defaultMessage: '请输入验证',
-                      })}
-                      rules={[
-                        {
-                          required: true,
-                          message: (
-                            <FormattedMessage
-                              id="pages.searchTable.updateForm.ruleName.nameRules"
-                              defaultMessage="请输入验证啊"
-                            />
-                          ),
-                        },
-                      ]}
-                    />
-                  </Col>
-                  <Col>
-                    <Image
-                      src={captchaCode}
-                      alt="验证码"
-                      style={{
-                        display: 'inline-block',
-                        verticalAlign: 'top',
-                        cursor: 'pointer',
-                        paddingLeft: '22px',
-                        width: '170px',
-                        height: '66px',
-                      }}
-                      preview={false}
-                      onClick={() => getCaptchaCode()}
-                    />
-                  </Col>
-                </Row>
-              </>
-            )}
+              )}
+              {type === 'account' && (
+                <>
+                  <ProFormText
+                    name="username"
+                    initialValue="admin"
+                    fieldProps={{
+                      size: 'large',
+                      prefix: <UserOutlined />,
+                    }}
+                    placeholder={intl.formatMessage({
+                      id: 'pages.login.username.placeholder',
+                      defaultMessage: '用户名: admin',
+                    })}
+                    rules={[
+                      {
+                        required: true,
+                        message: (
+                          <FormattedMessage
+                            id="pages.login.username.required"
+                            defaultMessage="请输入用户名!"
+                          />
+                        ),
+                      },
+                    ]}
+                  />
+                  <ProFormText.Password
+                    name="password"
+                    initialValue="admin123"
+                    fieldProps={{
+                      size: 'large',
+                      prefix: <LockOutlined />,
+                    }}
+                    placeholder={intl.formatMessage({
+                      id: 'pages.login.password.placeholder',
+                      defaultMessage: '密码: admin123',
+                    })}
+                    rules={[
+                      {
+                        required: true,
+                        message: (
+                          <FormattedMessage
+                            id="pages.login.password.required"
+                            defaultMessage="请输入密码！"
+                          />
+                        ),
+                      },
+                    ]}
+                  />
+                  <Row>
+                    <Col flex={4}>
+                      <ProFormText
+                        style={{
+                          float: 'right',
+                        }}
+                        name="code"
+                        placeholder={intl.formatMessage({
+                          id: 'pages.login.captcha.placeholder',
+                          defaultMessage: '请输入验证',
+                        })}
+                        rules={[
+                          {
+                            required: true,
+                            message: (
+                              <FormattedMessage
+                                id="pages.searchTable.updateForm.ruleName.nameRules"
+                                defaultMessage="请输入验证啊"
+                              />
+                            ),
+                          },
+                        ]}
+                      />
+                    </Col>
+                    <Col>
+                      <Image
+                        src={captchaCode}
+                        alt="验证码"
+                        style={{
+                          display: 'inline-block',
+                          verticalAlign: 'top',
+                          cursor: 'pointer',
+                          paddingLeft: '22px',
+                          width: '170px',
+                          height: '66px',
+                        }}
+                        preview={false}
+                        onClick={() => getCaptchaCode()}
+                      />
+                    </Col>
+                  </Row>
+                </>
+              )}
 
-            {code !== 200 && loginType === 'mobile' && <LoginMessage content="验证码错误" />}
-            {type === 'mobile' && (
-              <>
-                <ProFormText
-                  fieldProps={{
-                    size: 'large',
-                    prefix: <MobileOutlined />,
-                  }}
-                  name="mobile"
-                  placeholder={intl.formatMessage({
-                    id: 'pages.login.phoneNumber.placeholder',
-                    defaultMessage: '手机号',
-                  })}
-                  rules={[
-                    {
-                      required: true,
-                      message: (
-                        <FormattedMessage
-                          id="pages.login.phoneNumber.required"
-                          defaultMessage="请输入手机号！"
-                        />
-                      ),
-                    },
-                    {
-                      pattern: /^1\d{10}$/,
-                      message: (
-                        <FormattedMessage
-                          id="pages.login.phoneNumber.invalid"
-                          defaultMessage="手机号格式错误！"
-                        />
-                      ),
-                    },
-                  ]}
-                />
-                <ProFormCaptcha
-                  fieldProps={{
-                    size: 'large',
-                    prefix: <LockOutlined />,
-                  }}
-                  captchaProps={{
-                    size: 'large',
-                  }}
-                  placeholder={intl.formatMessage({
-                    id: 'pages.login.captcha.placeholder',
-                    defaultMessage: '请输入验证码',
-                  })}
-                  captchaTextRender={(timing, count) => {
-                    if (timing) {
-                      return `${count} ${intl.formatMessage({
-                        id: 'pages.getCaptchaSecondText',
+              {code !== 200 && loginType === 'mobile' && <LoginMessage content="验证码错误" />}
+              {type === 'mobile' && (
+                <>
+                  <ProFormText
+                    fieldProps={{
+                      size: 'large',
+                      prefix: <MobileOutlined />,
+                    }}
+                    name="mobile"
+                    placeholder={intl.formatMessage({
+                      id: 'pages.login.phoneNumber.placeholder',
+                      defaultMessage: '手机号',
+                    })}
+                    rules={[
+                      {
+                        required: true,
+                        message: (
+                          <FormattedMessage
+                            id="pages.login.phoneNumber.required"
+                            defaultMessage="请输入手机号！"
+                          />
+                        ),
+                      },
+                      {
+                        pattern: /^1\d{10}$/,
+                        message: (
+                          <FormattedMessage
+                            id="pages.login.phoneNumber.invalid"
+                            defaultMessage="手机号格式错误！"
+                          />
+                        ),
+                      },
+                    ]}
+                  />
+                  <ProFormCaptcha
+                    fieldProps={{
+                      size: 'large',
+                      prefix: <LockOutlined />,
+                    }}
+                    captchaProps={{
+                      size: 'large',
+                    }}
+                    placeholder={intl.formatMessage({
+                      id: 'pages.login.captcha.placeholder',
+                      defaultMessage: '请输入验证码',
+                    })}
+                    captchaTextRender={(timing, count) => {
+                      if (timing) {
+                        return `${count} ${intl.formatMessage({
+                          id: 'pages.getCaptchaSecondText',
+                          defaultMessage: '获取验证码',
+                        })}`;
+                      }
+                      return intl.formatMessage({
+                        id: 'pages.login.phoneLogin.getVerificationCode',
                         defaultMessage: '获取验证码',
-                      })}`;
-                    }
-                    return intl.formatMessage({
-                      id: 'pages.login.phoneLogin.getVerificationCode',
-                      defaultMessage: '获取验证码',
-                    });
-                  }}
-                  name="captcha"
-                  rules={[
-                    {
-                      required: true,
-                      message: (
-                        <FormattedMessage
-                          id="pages.login.captcha.required"
-                          defaultMessage="请输入验证码！"
-                        />
-                      ),
-                    },
-                  ]}
-                  onGetCaptcha={async (phone) => {
-                    const result = await getFakeCaptcha({
-                      phone,
-                    });
-                    if (!result) {
-                      return;
-                    }
-                    message.success('获取验证码成功！验证码为：1234');
-                  }}
-                />
-              </>
-            )}
-            <div
-              style={{
-                marginBottom: 24,
-              }}
-            >
-              <ProFormCheckbox noStyle name="autoLogin">
-                <FormattedMessage id="pages.login.rememberMe" defaultMessage="记住密码" />
-              </ProFormCheckbox>
-            </div>
-          </LoginForm>
+                      });
+                    }}
+                    name="captcha"
+                    rules={[
+                      {
+                        required: true,
+                        message: (
+                          <FormattedMessage
+                            id="pages.login.captcha.required"
+                            defaultMessage="请输入验证码！"
+                          />
+                        ),
+                      },
+                    ]}
+                    onGetCaptcha={async (phone) => {
+                      const result = await getFakeCaptcha({
+                        phone,
+                      });
+                      if (!result) {
+                        return;
+                      }
+                      message.success('获取验证码成功！验证码为：1234');
+                    }}
+                  />
+                </>
+              )}
+              <div
+                style={{
+                  marginBottom: 24,
+                }}
+              >
+                <ProFormCheckbox noStyle name="autoLogin">
+                  <FormattedMessage id="pages.login.rememberMe" defaultMessage="记住密码" />
+                </ProFormCheckbox>
+              </div>
+            </LoginForm>
+          </div>
         </div>
       </div>
       {/* <Helmet>
diff --git a/react-ui/src/pages/User/Login/login.less b/react-ui/src/pages/User/Login/login.less
index cf66dc93..88fa4035 100644
--- a/react-ui/src/pages/User/Login/login.less
+++ b/react-ui/src/pages/User/Login/login.less
@@ -1,28 +1,31 @@
 .loginForm {
-  width: 520px;
-}
-:global .ant-pro-form-login-main {
-  margin: unset;
-}
-:global .ant-input-affix-wrapper-lg {
-  padding: 19px 11px;
-  color: rgba(29, 29, 32, 0.6);
-  font-size: 18px;
-  font-family: 'Alibaba';
-  border-radius: 13px;
-}
-:global .ant-input-affix-wrapper {
-  padding: 19px 11px;
-  color: rgba(29, 29, 32, 0.6);
-  font-size: 18px;
-  font-family: 'Alibaba';
-  border-radius: 13px;
-}
-:global .ant-btn.ant-btn-lg {
-  height: 76px;
-  color: #ffffff;
-  font-size: 20px;
-  font-family: 'Alibaba';
-  background: #1664ff;
-  border-radius: 41px;
+  :global {
+    .ant-pro-form-login-main {
+      width: auto !important;
+      max-width: auto !important;
+      margin: unset;
+    }
+    .ant-input-affix-wrapper-lg {
+      padding: 19px 11px;
+      color: rgba(29, 29, 32, 0.6);
+      font-size: 18px;
+      font-family: 'Alibaba';
+      border-radius: 13px;
+    }
+    .ant-input-affix-wrapper {
+      padding: 19px 11px;
+      color: rgba(29, 29, 32, 0.6);
+      font-size: 18px;
+      font-family: 'Alibaba';
+      border-radius: 13px;
+    }
+    .ant-btn.ant-btn-lg {
+      height: 76px;
+      color: #ffffff;
+      font-size: 20px;
+      font-family: 'Alibaba';
+      background: @primary-color;
+      border-radius: 41px;
+    }
+  }
 }
diff --git a/react-ui/src/requestConfig.ts b/react-ui/src/requestConfig.ts
index fe9cd44d..3c067e88 100644
--- a/react-ui/src/requestConfig.ts
+++ b/react-ui/src/requestConfig.ts
@@ -32,7 +32,6 @@ export const requestConfig: RequestConfig = {
   responseInterceptors: [
     (response: any) => {
       const { status, data } = response || {};
-      console.log('response2', response);
       if (status >= 200 && status < 300) {
         if (data && (data instanceof Blob || data.code === 200)) {
           return response;
diff --git a/react-ui/src/utils/ui.tsx b/react-ui/src/utils/ui.tsx
index b1c456e3..9a1ff626 100644
--- a/react-ui/src/utils/ui.tsx
+++ b/react-ui/src/utils/ui.tsx
@@ -53,8 +53,10 @@ export const gotoLoginPage = (toHome: boolean = true) => {
   const { pathname, search } = window.location;
   const urlParams = new URLSearchParams();
   urlParams.append('redirect', pathname + search);
-  const newSearch = toHome && pathname && pathname !== PageEnum.LOGIN ? '' : urlParams.toString();
-  console.log('gotoLoginPage', pathname, search);
+  const newSearch =
+    toHome && pathname !== PageEnum.LOGIN && pathname !== '/' ? '' : urlParams.toString();
+  console.log('pathname', pathname);
+  console.log('search', search);
   if (window.location.pathname !== PageEnum.LOGIN) {
     history.replace({
       pathname: PageEnum.LOGIN,