From b393a0a2dd4e1034895b10f432c891683576acf8 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Fri, 24 Feb 2023 23:58:46 +0800 Subject: [PATCH] doc: refactor doc --- components/index.ts | 2 +- site/src/App.vue | 2 + site/src/components/surelyVue.vue | 4 +- site/src/hooks/useSiteToken.ts | 96 ++++++++++++++++++++++++++ site/src/layouts/UserLayout.less | 69 ------------------ site/src/layouts/UserLayout.vue | 27 -------- site/src/layouts/header/Logo.vue | 9 ++- site/src/layouts/header/Navigation.vue | 13 ++-- site/src/layouts/header/SearchBox.less | 12 ++-- site/src/layouts/header/index.less | 12 ++-- site/src/theme/static/common.less | 35 +++++----- site/src/theme/static/demo.less | 58 ++++++++-------- site/src/theme/static/docsearch.less | 10 +-- site/src/theme/static/footer.less | 5 +- site/src/theme/static/header.less | 2 +- site/src/theme/static/highlight.less | 6 +- site/src/theme/static/home.less | 2 - site/src/theme/static/icons.less | 2 +- site/src/theme/static/index.less | 20 +++++- site/src/theme/static/markdown.less | 74 ++++++++++---------- site/src/theme/static/not-found.less | 4 +- site/src/theme/static/nprogress.less | 8 +-- site/src/theme/static/page-nav.less | 10 +-- site/src/theme/static/preview-img.less | 16 ++--- site/src/theme/static/reset.css | 49 +++++++++++++ site/src/theme/static/resource.less | 8 +-- site/src/theme/static/responsive.less | 12 ++-- site/src/theme/static/theme.less | 10 --- site/src/theme/static/toc.less | 16 ++--- site/src/theme/static/var.less | 45 ++++++++++++ site/src/views/ComponentOverview.less | 6 +- 31 files changed, 368 insertions(+), 276 deletions(-) create mode 100644 site/src/hooks/useSiteToken.ts delete mode 100755 site/src/layouts/UserLayout.less delete mode 100644 site/src/layouts/UserLayout.vue delete mode 100644 site/src/theme/static/home.less create mode 100644 site/src/theme/static/reset.css delete mode 100644 site/src/theme/static/theme.less create mode 100644 site/src/theme/static/var.less diff --git a/components/index.ts b/components/index.ts index 717f66732..a7edf0591 100644 --- a/components/index.ts +++ b/components/index.ts @@ -3,7 +3,7 @@ import type { App } from 'vue'; import * as components from './components'; import { default as version } from './version'; export * from './components'; - +export { default as theme } from './theme'; export const install = function (app: App) { Object.keys(components).forEach(key => { const component = components[key]; diff --git a/site/src/App.vue b/site/src/App.vue index fe46528e2..5d2a8d2e8 100644 --- a/site/src/App.vue +++ b/site/src/App.vue @@ -10,6 +10,7 @@ import type { Ref } from 'vue'; import { useRoute } from 'vue-router'; import { useI18n } from 'vue-i18n'; import useMediaQuery from './hooks/useMediaQuery'; +import useSiteToken from './hooks/useSiteToken'; import { GLOBAL_CONFIG } from './SymbolKey'; import enUS from '../../components/locale/en_US'; import zhCN from '../../components/locale/zh_CN'; @@ -27,6 +28,7 @@ export interface GlobalConfig { } export default defineComponent({ setup() { + useSiteToken(); const route = useRoute(); const i18n = useI18n(); const colSize = useMediaQuery(); diff --git a/site/src/components/surelyVue.vue b/site/src/components/surelyVue.vue index dd3c63f54..3644c1d92 100644 --- a/site/src/components/surelyVue.vue +++ b/site/src/components/surelyVue.vue @@ -37,7 +37,8 @@ export default defineComponent({ .wrap { display: flex; background-color: #f4f8fa; - padding: 10px 30px; + padding: 0px 30px; + box-sizing: border-box; position: absolute; top: 0; left: 0; @@ -45,6 +46,7 @@ export default defineComponent({ width: 100%; height: 100px; overflow: hidden; + align-items: center; } .placeholder { height: 100px; diff --git a/site/src/hooks/useSiteToken.ts b/site/src/hooks/useSiteToken.ts new file mode 100644 index 000000000..5e4990dbf --- /dev/null +++ b/site/src/hooks/useSiteToken.ts @@ -0,0 +1,96 @@ +import { TinyColor } from '@ctrl/tinycolor'; +import { computed, watch } from 'vue'; +import { theme } from '../../../components'; +import { useConfigContextInject } from '../../../components/config-provider/context'; + +const { useToken } = theme; + +const useSiteToken = () => { + const result = useToken(); + const { getPrefixCls, iconPrefixCls } = useConfigContextInject(); + const rootPrefixCls = computed(() => getPrefixCls()); + const { token } = result; + + const mergedToken = computed(() => ({ + theme: result.theme.value, + hashId: result.hashId.value, + token: { + ...token.value, + headerHeight: 64, + menuItemBorder: 2, + mobileMaxWidth: 767.99, + siteMarkdownCodeBg: token.value.colorFillTertiary, + antCls: `.${rootPrefixCls.value}`, + iconCls: `.${iconPrefixCls.value}`, + /** 56 */ + marginFarXS: (token.value.marginXXL / 6) * 7, + /** 80 */ + marginFarSM: (token.value.marginXXL / 3) * 5, + /** 96 */ + marginFar: token.value.marginXXL * 2, + codeFamily: `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace`, + }, + })); + let styleDom: HTMLStyleElement | null = null; + watch( + mergedToken, + () => { + styleDom = styleDom || document.createElement('style'); + const tokenValue = mergedToken.value.token; + const demoGridColor = token.colorPrimary; + styleDom.innerHTML = ` + :root { + --header-height: ${tokenValue.headerHeight}px; + --menu-item-border: ${tokenValue.menuItemBorder}px; + --mobile-max-width: ${tokenValue.mobileMaxWidth}px; + + --primary-color: ${tokenValue.colorPrimary}; + --component-background: ${tokenValue.colorBgContainer}; + --body-background: ${tokenValue.colorBgContainer}; + --site-text-color: ${tokenValue.colorText}; + --demo-grid-color: ${demoGridColor}; + --demo-grid-color-65: ${new TinyColor(demoGridColor).setAlpha(0.75).toHex8String()}; + --demo-grid-color-75: ${new TinyColor(demoGridColor).setAlpha(0.75).toHex8String()}; + --site-text-color-secondary: ${tokenValue.colorTextSecondary}; + --site-border-color-split: ${tokenValue.colorSplit}; + --border-radius-base: ${tokenValue.borderRadius}; + --font-size-base: ${tokenValue.fontSize}; + --font-size-max: ${Math.max(tokenValue.fontSize - 1, 12)}px; + --font-family: ${tokenValue.fontFamily}; + --code-family: ${tokenValue.codeFamily}; + + --border-color-base: ${tokenValue.colorBorder}; + --purple-3: ${tokenValue['purple-3']}; + --purple-6: ${tokenValue['purple-6']}; + --text-color: ${tokenValue.colorText}; + --search-icon-color: #ced4d9; + --ease-in-out-circ: ${tokenValue.motionEaseInOutCirc}; + --shadow-2: ${tokenValue.boxShadowSecondary}; + --link-color: ${tokenValue.colorLink}; + --error-color: ${tokenValue.colorError}; + --white: ${tokenValue.colorWhite}; + --green-6: ${tokenValue['green-6']}; + --gray-8: ${tokenValue['gray-8']}; + --magenta-7: ${tokenValue['magenta-7']}; + --line-height-base: ${tokenValue.lineHeight}; + --screen-md-min: ${tokenValue.screenMDMin}px; + --screen-sm-min: ${tokenValue.screenSMMin}px; + --screen-lg: ${tokenValue.screenLG}px; + --mobile-max-width: ${tokenValue.mobileMaxWidth}px; + --box-shadow-base: ${tokenValue.boxShadow} + --animation-duration-base: ${tokenValue.motionDurationSlow}; + --ease-in-out: ${tokenValue.motionEaseInOut}; + --shadow-1-down: ${tokenValue.boxShadowCard}; + } + `; + if (styleDom && !document.body.contains(styleDom)) { + document.body.appendChild(styleDom); + } + }, + { immediate: true }, + ); + + return mergedToken; +}; + +export default useSiteToken; diff --git a/site/src/layouts/UserLayout.less b/site/src/layouts/UserLayout.less deleted file mode 100755 index a48757d36..000000000 --- a/site/src/layouts/UserLayout.less +++ /dev/null @@ -1,69 +0,0 @@ -.container { - display: flex; - flex-direction: column; - height: 100vh; - overflow: auto; - background: @layout-body-background; -} - -.lang { - width: 100%; - height: 40px; - line-height: 44px; - text-align: right; - :global(.ant-dropdown-trigger) { - margin-right: 24px; - } -} - -.content { - flex: 1; - padding: 32px 0; -} - -@media (min-width: @screen-md-min) { - .container { - background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg'); - background-repeat: no-repeat; - background-position: center 110px; - background-size: 100%; - } - - .content { - padding: 32px 0 24px 0; - } -} - -.top { - text-align: center; -} - -.header { - height: 44px; - line-height: 44px; - a { - text-decoration: none; - } -} - -.logo { - height: 44px; - margin-right: 16px; - vertical-align: top; -} - -.title { - position: relative; - top: 2px; - color: @heading-color; - font-weight: 600; - font-size: 33px; - font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif; -} - -.desc { - margin-top: 12px; - margin-bottom: 40px; - color: @text-color-secondary; - font-size: @font-size-base; -} diff --git a/site/src/layouts/UserLayout.vue b/site/src/layouts/UserLayout.vue deleted file mode 100644 index 6e7789061..000000000 --- a/site/src/layouts/UserLayout.vue +++ /dev/null @@ -1,27 +0,0 @@ - - - -