Skip to content

Commit b393a0a

Browse files
tangjinzhoutangjinzhou
committed
doc: refactor doc
1 parent 2b80870 commit b393a0a

31 files changed

+368
-276
lines changed

‎components/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { App } from 'vue';
33
import * as components from './components';
44
import { default as version } from './version';
55
export * from './components';
6-
6+
export { default as theme } from './theme';
77
export const install = function (app: App) {
88
Object.keys(components).forEach(key => {
99
const component = components[key];

‎site/src/App.vue

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import type { Ref } from 'vue';
1010
import { useRoute } from 'vue-router';
1111
import { useI18n } from 'vue-i18n';
1212
import useMediaQuery from './hooks/useMediaQuery';
13+
import useSiteToken from './hooks/useSiteToken';
1314
import { GLOBAL_CONFIG } from './SymbolKey';
1415
import enUS from '../../components/locale/en_US';
1516
import zhCN from '../../components/locale/zh_CN';
@@ -27,6 +28,7 @@ export interface GlobalConfig {
2728
}
2829
export default defineComponent({
2930
setup() {
31+
useSiteToken();
3032
const route = useRoute();
3133
const i18n = useI18n();
3234
const colSize = useMediaQuery();

‎site/src/components/surelyVue.vue

+3-1
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,16 @@ export default defineComponent({
3737
.wrap {
3838
display: flex;
3939
background-color: #f4f8fa;
40-
padding: 10px 30px;
40+
padding: 0px 30px;
41+
box-sizing: border-box;
4142
position: absolute;
4243
top: 0;
4344
left: 0;
4445
z-index: 9;
4546
width: 100%;
4647
height: 100px;
4748
overflow: hidden;
49+
align-items: center;
4850
}
4951
.placeholder {
5052
height: 100px;

‎site/src/hooks/useSiteToken.ts

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import { TinyColor } from '@ctrl/tinycolor';
2+
import { computed, watch } from 'vue';
3+
import { theme } from '../../../components';
4+
import { useConfigContextInject } from '../../../components/config-provider/context';
5+
6+
const { useToken } = theme;
7+
8+
const useSiteToken = () => {
9+
const result = useToken();
10+
const { getPrefixCls, iconPrefixCls } = useConfigContextInject();
11+
const rootPrefixCls = computed(() => getPrefixCls());
12+
const { token } = result;
13+
14+
const mergedToken = computed(() => ({
15+
theme: result.theme.value,
16+
hashId: result.hashId.value,
17+
token: {
18+
...token.value,
19+
headerHeight: 64,
20+
menuItemBorder: 2,
21+
mobileMaxWidth: 767.99,
22+
siteMarkdownCodeBg: token.value.colorFillTertiary,
23+
antCls: `.${rootPrefixCls.value}`,
24+
iconCls: `.${iconPrefixCls.value}`,
25+
/** 56 */
26+
marginFarXS: (token.value.marginXXL / 6) * 7,
27+
/** 80 */
28+
marginFarSM: (token.value.marginXXL / 3) * 5,
29+
/** 96 */
30+
marginFar: token.value.marginXXL * 2,
31+
codeFamily: `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace`,
32+
},
33+
}));
34+
let styleDom: HTMLStyleElement | null = null;
35+
watch(
36+
mergedToken,
37+
() => {
38+
styleDom = styleDom || document.createElement('style');
39+
const tokenValue = mergedToken.value.token;
40+
const demoGridColor = token.colorPrimary;
41+
styleDom.innerHTML = `
42+
:root {
43+
--header-height: ${tokenValue.headerHeight}px;
44+
--menu-item-border: ${tokenValue.menuItemBorder}px;
45+
--mobile-max-width: ${tokenValue.mobileMaxWidth}px;
46+
47+
--primary-color: ${tokenValue.colorPrimary};
48+
--component-background: ${tokenValue.colorBgContainer};
49+
--body-background: ${tokenValue.colorBgContainer};
50+
--site-text-color: ${tokenValue.colorText};
51+
--demo-grid-color: ${demoGridColor};
52+
--demo-grid-color-65: ${new TinyColor(demoGridColor).setAlpha(0.75).toHex8String()};
53+
--demo-grid-color-75: ${new TinyColor(demoGridColor).setAlpha(0.75).toHex8String()};
54+
--site-text-color-secondary: ${tokenValue.colorTextSecondary};
55+
--site-border-color-split: ${tokenValue.colorSplit};
56+
--border-radius-base: ${tokenValue.borderRadius};
57+
--font-size-base: ${tokenValue.fontSize};
58+
--font-size-max: ${Math.max(tokenValue.fontSize - 1, 12)}px;
59+
--font-family: ${tokenValue.fontFamily};
60+
--code-family: ${tokenValue.codeFamily};
61+
62+
--border-color-base: ${tokenValue.colorBorder};
63+
--purple-3: ${tokenValue['purple-3']};
64+
--purple-6: ${tokenValue['purple-6']};
65+
--text-color: ${tokenValue.colorText};
66+
--search-icon-color: #ced4d9;
67+
--ease-in-out-circ: ${tokenValue.motionEaseInOutCirc};
68+
--shadow-2: ${tokenValue.boxShadowSecondary};
69+
--link-color: ${tokenValue.colorLink};
70+
--error-color: ${tokenValue.colorError};
71+
--white: ${tokenValue.colorWhite};
72+
--green-6: ${tokenValue['green-6']};
73+
--gray-8: ${tokenValue['gray-8']};
74+
--magenta-7: ${tokenValue['magenta-7']};
75+
--line-height-base: ${tokenValue.lineHeight};
76+
--screen-md-min: ${tokenValue.screenMDMin}px;
77+
--screen-sm-min: ${tokenValue.screenSMMin}px;
78+
--screen-lg: ${tokenValue.screenLG}px;
79+
--mobile-max-width: ${tokenValue.mobileMaxWidth}px;
80+
--box-shadow-base: ${tokenValue.boxShadow}
81+
--animation-duration-base: ${tokenValue.motionDurationSlow};
82+
--ease-in-out: ${tokenValue.motionEaseInOut};
83+
--shadow-1-down: ${tokenValue.boxShadowCard};
84+
}
85+
`;
86+
if (styleDom && !document.body.contains(styleDom)) {
87+
document.body.appendChild(styleDom);
88+
}
89+
},
90+
{ immediate: true },
91+
);
92+
93+
return mergedToken;
94+
};
95+
96+
export default useSiteToken;

‎site/src/layouts/UserLayout.less

-69
This file was deleted.

‎site/src/layouts/UserLayout.vue

-27
This file was deleted.

‎site/src/layouts/header/Logo.vue

+4-5
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,12 @@ export default defineComponent({
2323
@import './index.less';
2424
2525
#logo {
26-
height: @header-height;
26+
height: var(--header-height);
2727
padding-left: 40px;
2828
overflow: hidden;
29-
color: @site-heading-color;
29+
color: var(--site-text-color);
3030
font-size: 18px;
31-
font-family: Avenir, @font-family, sans-serif;
32-
line-height: @header-height;
31+
line-height: var(--header-height);
3332
white-space: nowrap;
3433
text-decoration: none;
3534
@@ -52,7 +51,7 @@ export default defineComponent({
5251
}
5352
}
5453
55-
@media only screen and (max-width: @mobile-max-width) {
54+
@media only screen and (max-width: var(--mobile-max-width)) {
5655
#logo {
5756
padding-right: 0;
5857
padding-left: 0;

‎site/src/layouts/header/Navigation.vue

+6-7
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,6 @@ export default defineComponent({
130130
#nav {
131131
height: 100%;
132132
font-size: 14px;
133-
font-family: Avenir, @font-family, sans-serif;
134133
border: 0;
135134
136135
&.ant-menu-horizontal {
@@ -139,17 +138,17 @@ export default defineComponent({
139138
& > .ant-menu-item,
140139
& > .ant-menu-submenu {
141140
min-width: (40px + 12px * 2);
142-
height: @header-height;
141+
height: var(--header-height);
143142
padding-right: 12px;
144143
padding-left: 12px;
145-
line-height: @header-height;
144+
line-height: var(--header-height);
146145
147146
&::after {
148147
top: 0;
149148
right: 12px;
150149
bottom: auto;
151150
left: 12px;
152-
border-width: @menu-item-border;
151+
border-width: var(--menu-item-border);
153152
}
154153
}
155154
@@ -159,7 +158,7 @@ export default defineComponent({
159158
160159
& > .ant-menu-item-selected {
161160
a {
162-
color: @primary-color;
161+
color: var(--primary-color);
163162
}
164163
}
165164
}
@@ -171,11 +170,11 @@ export default defineComponent({
171170
}
172171
173172
.header-link {
174-
color: @site-text-color;
173+
color: var(--site-text-color);
175174
}
176175
177176
.ant-menu-item-active .header-link {
178-
color: @primary-color;
177+
color: var(--primary-color);
179178
}
180179
181180
// Popover menu is only used for mobile

‎site/src/layouts/header/SearchBox.less

+5-7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@search-icon-color: #ced4d9;
2-
31
#search-box {
42
position: relative;
53
display: flex;
@@ -10,14 +8,14 @@
108
padding-left: 16px;
119
line-height: 22px;
1210
white-space: nowrap;
13-
border-left: 1px solid @site-border-color-split;
11+
border-left: 1px solid var(--site-border-color-split);
1412
transition: width 0.5s;
1513

1614
.ant-row-rtl & {
1715
margin: 0 0 0 auto !important;
1816
padding-right: 16px;
1917
padding-left: 0;
20-
border-right: 1px solid @site-border-color-split;
18+
border-right: 1px solid var(--site-border-color-split);
2119
border-left: none;
2220
}
2321

@@ -30,7 +28,7 @@
3028
top: 50%;
3129
z-index: 1;
3230
flex: none;
33-
color: @search-icon-color;
31+
color: var(--search-icon-color);
3432
transform: translateY(-50%);
3533
pointer-events: none;
3634
}
@@ -91,7 +89,7 @@
9189
width: 500px;
9290

9391
.anticon {
94-
color: @search-icon-color;
92+
color: var(--search-icon-color);
9593
}
9694

9795
input {
@@ -127,7 +125,7 @@
127125
}
128126
}
129127

130-
@media only screen and (max-width: @mobile-max-width) {
128+
@media only screen and (max-width: var(--mobile-max-width)) {
131129
#search-box {
132130
display: none;
133131
}

‎site/src/layouts/header/index.less

+4-8
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
@import './SearchBox.less';
22

3-
@header-height: 64px;
4-
@menu-item-border: 2px;
5-
@mobile-max-width: 767.99px;
6-
73
#header {
84
position: relative;
95
z-index: 10;
106
max-width: 100%;
11-
background: @component-background;
7+
background: var(--component-background);
128
box-shadow: 0 2px 8px rgba(240, 241, 242, 65);
139

1410
.menu-row {
@@ -41,12 +37,12 @@
4137

4238
// Buttons
4339
.header-button {
44-
color: @text-color;
45-
border-color: @border-color-base;
40+
color: var(--text-color);
41+
border-color: var(--border-color-base);
4642
}
4743
}
4844

49-
@media only screen and (max-width: @mobile-max-width) {
45+
@media only screen and (max-width: var(--mobile-max-width)) {
5046
#header {
5147
text-align: center;
5248
}

0 commit comments

Comments
 (0)