doc: update site

site/debugger/demo/demo.vue

@@ -1,31 +1,6 @@
 <template>
-  <div>
+  <a-tooltip>
-    <a-radio v-model:checked="checked1" :disabled="disabled">Disabled</a-radio>
+    <template #title>prompt text</template>
-    <a-radio v-model:checked="checked2" :disabled="disabled">Disabled</a-radio>
+    Tooltip will show when mouse enter.
-    <br />
+  </a-tooltip>
-    <div style="margin-top: 16px">
-      <a-button type="primary" @click="toggleDisabled">Toggle disabled</a-button>
-    </div>
-  </div>
 </template>
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
-export default defineComponent({
-  setup() {
-    const disabled = ref<boolean>(true);
-    const checked1 = ref<boolean>(false);
-    const checked2 = ref<boolean>(false);
-
-    const toggleDisabled = () => {
-      disabled.value = !disabled.value;
-    };
-
-    return {
-      disabled,
-      checked1,
-      checked2,
-      toggleDisabled,
-    };
-  },
-});
-</script>

site/src/App.vue

@@ -1,6 +1,8 @@
 <template>
-  <a-config-provider :locale="locale">
+  <a-config-provider :locale="locale" :theme="themeConfig">
-    <router-view />
+    <SiteToken>
+      <router-view />
+    </SiteToken>
   </a-config-provider>
 </template>
 
@@ -10,12 +12,13 @@ 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';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
+import { theme as antdTheme } from 'ant-design-vue';
+import SiteToken from './SiteToken.vue';
 function isZhCN(name: string) {
   return /-cn\/?$/.test(name);
 }
@@ -26,14 +29,32 @@ export interface GlobalConfig {
   responsive: Ref<null | 'narrow' | 'crowded'>;
   blocked: Ref<boolean>;
 }
+export type ThemeName = 'light' | 'dark' | 'compact';
+const getAlgorithm = (themes: ThemeName[] = []) =>
+  themes.map(theme => {
+    if (theme === 'dark') {
+      return antdTheme.darkAlgorithm;
+    }
+    if (theme === 'compact') {
+      return antdTheme.compactAlgorithm;
+    }
+    return antdTheme.defaultAlgorithm;
+  });
+
 export default defineComponent({
+  components: {
+    SiteToken,
+  },
   setup() {
-    useSiteToken();
     const route = useRoute();
     const i18n = useI18n();
     const colSize = useMediaQuery();
     const isMobile = computed(() => colSize.value === 'sm' || colSize.value === 'xs');
-    const theme = ref(localStorage.getItem('theme') || 'default');
+    const theme = ref<ThemeName>((localStorage.getItem('theme') as ThemeName) || 'light');
+    const themeConfig = computed(() => {
+      return { algorithm: getAlgorithm([theme.value]) };
+    });
+    // useSiteToken();
     const responsive = computed(() => {
       if (colSize.value === 'xs') {
         return 'crowded';
@@ -49,7 +70,7 @@ export default defineComponent({
       isZhCN: computed(() => i18n.locale.value === 'zh-CN'),
       blocked: ref(false),
     };
-    const changeTheme = (t: string) => {
+    const changeTheme = (t: ThemeName) => {
       theme.value = t;
       localStorage.setItem('theme', t);
     };
@@ -100,7 +121,7 @@ export default defineComponent({
       },
       { immediate: true },
     );
-    return { globalConfig, locale };
+    return { globalConfig, locale, themeConfig };
   },
 });
 </script>

site/src/SiteToken.vue

@@ -0,0 +1,7 @@
+<template>
+  <slot></slot>
+</template>
+<script lang="ts" setup>
+import useSiteToken from './hooks/useSiteToken';
+useSiteToken();
+</script>

site/src/components/DemoBox.vue

@@ -209,7 +209,7 @@ export default defineComponent({
         title,
       });
     });
-    const theme = computed(() => inject('themeMode', { theme: ref('default') }).theme.value);
+    const theme = computed(() => inject('themeMode', { theme: ref('light') }).theme.value);
     return {
       docHtml,
       iframeDemo,

site/src/components/antdv-token-previewer/hooks/useControlledTheme.tsx

@@ -10,11 +10,11 @@ import getValueByPath from '../utils/getValueByPath';
 
 const { darkAlgorithm: defaultDark, compactAlgorithm, defaultAlgorithm } = antTheme;
 
-export type ThemeCode = 'default' | 'dark' | 'compact';
+export type ThemeCode = 'light' | 'dark' | 'compact';
 export const themeMap: Record<ThemeCode, DerivativeFunc<any, any>> = {
   dark: defaultDark,
   compact: compactAlgorithm,
-  default: defaultAlgorithm,
+  light: defaultAlgorithm,
 };
 
 export type SetThemeState = (theme: Theme, modifiedPath: string[], updated?: boolean) => void;

site/src/components/antdv-token-previewer/previewer.tsx

@@ -141,10 +141,10 @@ const Previewer = defineComponent({
     );
 
     const shownThemes = ref<string[]>(
-      showTheme.value && !theme.value ? ['default', 'dark'] : [themes.value[0].key],
+      showTheme.value && !theme.value ? ['light', 'dark'] : [themes.value[0].key],
     );
     const enabledThemes = ref<string[]>(
-      showTheme.value && !theme.value ? ['default', 'dark'] : [themes.value[0].key],
+      showTheme.value && !theme.value ? ['light', 'dark'] : [themes.value[0].key],
     );
 
     watchEffect(() => {

site/src/components/antdv-token-previewer/token-panel-pro/TokenContent.tsx

@@ -506,7 +506,7 @@ const MapTokenCollapse = defineComponent({
       const grouped: Record<string, string[]> = {};
       if (groupFn.value) {
         group.value.mapToken?.forEach(token => {
-          const key = groupFn.value(token) ?? 'default';
+          const key = groupFn.value(token) ?? 'light';
           grouped[key] = [...(grouped[key] ?? []), token];
         });
       }

site/src/hooks/useSiteToken.ts

@@ -54,7 +54,7 @@ const useSiteToken = () => {
         --site-text-color-secondary: ${tokenValue.colorTextSecondary};
         --site-border-color-split: ${tokenValue.colorSplit};
         --border-radius-base: ${tokenValue.borderRadius};
-        --font-size-base: ${tokenValue.fontSize};
+        --font-size-base: ${tokenValue.fontSize}px;
         --font-size-max: ${Math.max(tokenValue.fontSize - 1, 12)}px;
         --font-family: ${tokenValue.fontFamily};
         --code-family: ${tokenValue.codeFamily};
@@ -81,6 +81,7 @@ const useSiteToken = () => {
         --animation-duration-base: ${tokenValue.motionDurationSlow};
         --ease-in-out: ${tokenValue.motionEaseInOut};
         --shadow-1-down: ${tokenValue.boxShadowCard};
+        --box-shadow: ${tokenValue.boxShadow};
       }
     `;
       if (styleDom && !document.body.contains(styleDom)) {

site/src/layouts/header/Logo.vue

@@ -20,8 +20,6 @@ export default defineComponent({
 </script>
 
 <style lang="less" scoped>
-@import './index.less';
-
 #logo {
   height: var(--header-height);
   padding-left: 40px;

site/src/layouts/header/Navigation.vue

@@ -125,8 +125,6 @@ export default defineComponent({
 });
 </script>
 <style lang="less">
-@import './index.less';
-
 #nav {
   height: 100%;
   font-size: 14px;

site/src/layouts/header/index.less

@@ -5,7 +5,7 @@
   z-index: 10;
   max-width: 100%;
   background: var(--component-background);
-  box-shadow: 0 2px 8px rgba(240, 241, 242, 65);
+  box-shadow: var(--box-shadow);
 
   .menu-row {
     display: flex;

site/src/layouts/header/index.vue

@@ -17,7 +17,7 @@
       <CloseOutlined class="close-icon" @click="visibleAdblockBanner = false" />
     </div>
     <div v-if="visibleAlertBanner && isZhCN" class="alert-banner">
-      Surely Form 1.0 发布，快速搭建在线问卷，无缝嵌入各种系统，限时限量加群，记得扫码哦
+      Surely Form 2.0 发布，快速搭建在线问卷，无缝嵌入各种系统
       <a href="https://form.antdv.com">立即体验</a>
 
       <CloseOutlined class="close-icon" @click="visibleAlertBanner = false" />
@@ -128,10 +128,10 @@ export default defineComponent({
     watch(globalConfig?.blocked, val => {
       visibleAdblockBanner.value = val;
     });
-    const visibleAlertBanner = ref(!localStorage.getItem('surelyform'));
+    const visibleAlertBanner = ref(!localStorage.getItem('surelyform2'));
     watch(visibleAlertBanner, () => {
       if (!visibleAlertBanner.value) {
-        localStorage.setItem('surelyform', version);
+        localStorage.setItem('surelyform2', version);
       }
     });
     return {
@@ -162,10 +162,9 @@ export default defineComponent({
   line-height: 28px;
   color: #8590a6;
   text-align: center;
-  background-color: #ebebeb;
+  background-color: #141414;
 }
 .alert-banner {
-  background-color: var(--ant-primary-color);
   color: #fff;
   padding: 5px;
 }

site/src/layouts/index.vue

@@ -139,7 +139,7 @@ export default defineComponent({
     });
 
     const themeMode = inject('themeMode', {
-      theme: ref('default'),
+      theme: ref('light'),
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       changeTheme: (_key: any) => void 0,
     });

site/src/theme/en-US.js

@@ -1,6 +1,6 @@
 export default {
-  'app.theme.switch.default': 'Default theme',
+  'app.theme.switch.default': 'Light',
-  'app.theme.switch.dark': 'Dark theme',
+  'app.theme.switch.dark': 'Dark',
   'app.theme.switch.compact': 'Compact theme',
   'app.header.search': 'Search...',
   'app.header.menu.documentation': 'Docs',