ci4s
/
ci4sManagement-cloud
Not watched
1
0
Fork 0
Code
Releases 1 Wiki evaluate Activity
Issues 0 Pull Requests 0 Datasets Model Cloudbrain HPC
Browse Source

feat: table column 添加 ellipsis

pull/46/head
cp3hnu 1 year ago
parent
6c4926c7ed
commit
05c7ef7403
8 changed files with 266 additions and 247 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +8
    -4
      react-ui/src/app.tsx
  2. +11
    -1
      react-ui/src/components/CommonTableCell/index.tsx
  3. +3
    -3
      react-ui/src/pages/Mirror/info.tsx
  4. +4
    -4
      react-ui/src/pages/Mirror/list.tsx
  5. +207
    -206
      react-ui/src/pages/User/Login/index.tsx
  6. +29
    -26
      react-ui/src/pages/User/Login/login.less
  7. +0
    -1
      react-ui/src/requestConfig.ts
  8. +4
    -2
      react-ui/src/utils/ui.tsx

+ 8
- 4
react-ui/src/app.tsx View File

@@ -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();
});
}

// 主题修改


+ 11
- 1
react-ui/src/components/CommonTableCell/index.tsx View File

@@ -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;

+ 3
- 3
react-ui/src/pages/Mirror/info.tsx View File

@@ -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: '创建时间',


+ 4
- 4
react-ui/src/pages/Mirror/list.tsx View File

@@ -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: '创建时间',


+ 207
- 206
react-ui/src/pages/User/Login/index.tsx View File

@@ -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>


+ 29
- 26
react-ui/src/pages/User/Login/login.less View File

@@ -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;
}
}
}

+ 0
- 1
react-ui/src/requestConfig.ts View File

@@ -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;


+ 4
- 2
react-ui/src/utils/ui.tsx View File

@@ -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,


Write Preview
Loading…
Cancel
Save