tsai
/
ant-design-pro
mirror of https://github.com/ant-design/ant-design-pro
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

style: enable antd cssVar and add AlibabaSans as default font family (#11499)

pull/11500/head
afc163 9 months ago
committed by GitHub
parent
c422d35cf8
commit
71bb762489
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
4 changed files with 75 additions and 33 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      config/config.ts
  2. 5
      src/app.tsx
  3. 43
      src/global.less
  4. 50
      src/pages/User/Login/__snapshots__/login.test.tsx.snap

10
config/config.ts
View File

@ -117,8 +117,14 @@ export default defineConfig({
* @doc https://umijs.org/docs/max/antd#antd
*/
antd: {
styleProvider: {
cssVar: true,
appConfig: {},
configProvider: {
theme: {
cssVar: true,
token: {
fontFamily: 'AlibabaSans, sans-serif',
},
},
},
},
/**

5
src/app.tsx
View File

@ -3,7 +3,6 @@ import type { Settings as LayoutSettings } from '@ant-design/pro-components';
import { SettingDrawer } from '@ant-design/pro-components';
import type { RunTimeLayoutConfig } from '@umijs/max';
import { history, Link } from '@umijs/max';
import { App } from 'antd';
import React from 'react';
import {
AvatarDropdown,
@ -149,7 +148,3 @@ export const layout: RunTimeLayoutConfig = ({
export const request = {
...errorConfig,
};
export function rootContainer(container: React.ReactNode) {
return <App>{container}</App>;
}

43
src/global.less
View File

@ -1,3 +1,44 @@
@font-face {
font-family: "AlibabaSans";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("//mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*1GSgSYDD_aIAAAAAQsAAAAgAegCCAQ/AlibabaSans-Light.woff2")
format("woff2");
}
@font-face {
font-family: "AlibabaSans";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("//mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*2zEUQqnPNesAAAAAQtAAAAgAegCCAQ/AlibabaSans-Regular.woff2")
format("woff2");
}
@font-face {
font-family: "AlibabaSans";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("//mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*E_cxRbMlZqUAAAAAQuAAAAgAegCCAQ/AlibabaSans-Medium.woff2")
format("woff2");
}
@font-face {
font-family: "AlibabaSans";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("//mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*E_cxRbMlZqUAAAAAQuAAAAgAegCCAQ/AlibabaSans-Bold.woff2")
format("woff2");
}
@font-face {
font-family: "AlibabaSans";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("//mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*E_cxRbMlZqUAAAAAQuAAAAgAegCCAQ/AlibabaSans-Heavy.woff2")
format("woff2");
}
html,
body,
#root {
@ -5,7 +46,7 @@ body,
margin: 0;
padding: 0;
font-family:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
AlibabaSans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

50
src/pages/User/Login/__snapshots__/login.test.tsx.snap
View File

@ -3,7 +3,7 @@
exports[`Login Page should login success 1`] = `
<DocumentFragment>
<div
class="ant-app"
class="ant-app css-var-«r7»"
>
<div
class="ant-design-pro ant-pro-layout screen-md ant-pro-layout-fix-siderbar ant-pro-layout-mix"
@ -25,14 +25,14 @@ exports[`Login Page should login success 1`] = `
/>
</div>
<div
class="ant-layout ant-layout-has-sider"
class="ant-layout ant-layout-has-sider css-var-«re»"
style="min-height: 100%; flex-direction: row;"
>
<div
style="width: 256px; overflow: hidden; flex: 0 0 256px; max-width: 256px; min-width: 256px; transition: all 0.2s ease 0s;"
/>
<aside
class="ant-layout-sider ant-layout-sider-dark ant-pro-sider ant-pro-sider-fixed ant-pro-sider-fixed-mix ant-pro-sider-layout-mix ant-pro-sider-light ant-pro-sider-mix"
class="ant-layout-sider ant-layout-sider-dark ant-pro-sider ant-pro-sider-fixed ant-pro-sider-fixed-mix ant-pro-sider-layout-mix ant-pro-sider-light ant-pro-sider-mix css-var-«rh»"
style="flex: 0 0 256px; max-width: 256px; min-width: 256px; width: 256px;"
>
<div
@ -42,7 +42,7 @@ exports[`Login Page should login success 1`] = `
style="flex: 1; overflow-y: auto; overflow-x: hidden;"
>
<ul
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light ant-pro-sider-menu ant-pro-base-menu-inline"
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light ant-pro-sider-menu ant-pro-base-menu-inline css-var-«rh» ant-menu-css-var"
data-menu-list="true"
dir="ltr"
role="menu"
@ -153,7 +153,7 @@ exports[`Login Page should login success 1`] = `
class="ant-pro-sider-links"
>
<ul
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light ant-pro-sider-link-menu"
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light ant-pro-sider-link-menu css-var-«rh» ant-menu-css-var"
data-menu-list="true"
dir="ltr"
role="menu"
@ -186,11 +186,11 @@ exports[`Login Page should login success 1`] = `
style="position: relative;"
>
<header
class="ant-layout-header"
class="ant-layout-header css-var-«rm»"
style="height: 56px; line-height: 56px; background-color: transparent; z-index: 19;"
/>
<header
class="ant-layout-header ant-pro-layout-header ant-pro-layout-header-fixed-header ant-pro-layout-header-mix ant-pro-layout-header-fixed-header-action ant-pro-layout-header-header"
class="ant-layout-header ant-pro-layout-header ant-pro-layout-header-fixed-header ant-pro-layout-header-mix ant-pro-layout-header-fixed-header-action ant-pro-layout-header-header css-var-«rm»"
>
<div
class="ant-pro-global-header"
@ -296,7 +296,7 @@ exports[`Login Page should login success 1`] = `
class="ant-dropdown-trigger"
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-image"
class="ant-avatar ant-avatar-circle ant-avatar-image css-var-«rm» ant-avatar-css-var"
style="width: 28px; height: 28px; font-size: 18px;"
>
<img
@ -321,7 +321,7 @@ exports[`Login Page should login success 1`] = `
</div>
</header>
<main
class="ant-layout-content ant-pro-layout-content ant-pro-layout-has-header ant-pro-layout-content-has-page-container"
class="ant-layout-content ant-pro-layout-content ant-pro-layout-has-header ant-pro-layout-content-has-page-container css-var-«re»"
>
<div
class="ant-pro-page-container"
@ -358,7 +358,7 @@ exports[`Login Page should login success 1`] = `
class="ant-pro-page-container-children-container"
>
<div
class="ant-card ant-card-bordered"
class="ant-card ant-card-bordered css-var-«re»"
style="border-radius: 8px;"
>
<div
@ -491,7 +491,7 @@ exports[`Login Page should login success 1`] = `
</div>
</main>
<footer
class="ant-layout-footer"
class="ant-layout-footer css-var-«re»"
style="padding: 0px; background: none;"
>
<div
@ -582,7 +582,7 @@ exports[`Login Page should login success 1`] = `
exports[`Login Page should show login form 1`] = `
<DocumentFragment>
<div
class="ant-app"
class="ant-app css-var-«r0»"
>
<div
class="acss-trkbkn"
@ -656,14 +656,14 @@ exports[`Login Page should show login form 1`] = `
>
<form
autocomplete="off"
class="ant-form ant-form-vertical ant-pro-form"
class="ant-form ant-form-vertical css-var-«r0» ant-form-css-var ant-pro-form"
>
<input
style="display: none;"
type="text"
/>
<div
class="ant-tabs ant-tabs-top ant-tabs-centered"
class="ant-tabs ant-tabs-top ant-tabs-centered css-var-«r0» ant-tabs-css-var"
>
<div
aria-orientation="horizontal"
@ -765,13 +765,13 @@ exports[`Login Page should show login form 1`] = `
</div>
</div>
<div
class="ant-form-item"
class="ant-form-item css-var-«r0» ant-form-css-var"
>
<div
class="ant-row ant-form-item-row"
class="ant-row ant-form-item-row css-var-«r0»"
>
<div
class="ant-col ant-form-item-control"
class="ant-col ant-form-item-control css-var-«r0»"
>
<div
class="ant-form-item-control-input"
@ -780,7 +780,7 @@ exports[`Login Page should show login form 1`] = `
class="ant-form-item-control-input-content"
>
<span
class="ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-outlined"
class="ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-outlined css-var-«r0» ant-input-css-var"
>
<span
class="ant-input-prefix"
@ -849,13 +849,13 @@ exports[`Login Page should show login form 1`] = `
</div>
</div>
<div
class="ant-form-item"
class="ant-form-item css-var-«r0» ant-form-css-var"
>
<div
class="ant-row ant-form-item-row"
class="ant-row ant-form-item-row css-var-«r0»"
>
<div
class="ant-col ant-form-item-control"
class="ant-col ant-form-item-control css-var-«r0»"
>
<div
class="ant-form-item-control-input"
@ -864,7 +864,7 @@ exports[`Login Page should show login form 1`] = `
class="ant-form-item-control-input-content"
>
<span
class="ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-outlined ant-input-password ant-input-password-large"
class="ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-outlined ant-input-password ant-input-password-large css-var-«r0» ant-input-css-var"
>
<span
class="ant-input-prefix"
@ -932,7 +932,7 @@ exports[`Login Page should show login form 1`] = `
style="margin-bottom: 24px;"
>
<label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked css-var-«r0» ant-checkbox-css-var"
>
<span
class="ant-checkbox ant-wave-target ant-checkbox-checked"
@ -960,7 +960,7 @@ exports[`Login Page should show login form 1`] = `
</a>
</div>
<button
class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-lg"
class="ant-btn css-var-«r0» ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-lg"
style="width: 100%;"
type="button"
>
@ -1036,7 +1036,7 @@ exports[`Login Page should show login form 1`] = `
</div>
</div>
<footer
class="ant-layout-footer"
class="ant-layout-footer css-var-«r0»"
style="padding: 0px; background: none;"
>
<div

Write Preview
Loading…
Cancel
Save