From 77d0d188f0b1b99f80476541862110f7ca7d6fa4 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Mon, 13 Mar 2023 11:58:59 +0800
Subject: [PATCH] doc: format code

---
 components/space/demo/compact.vue              |  2 +-
 .../antdv-token-previewer/ColorPanel.tsx       |  4 ++--
 .../antdv-token-previewer/IconSwitch.tsx       |  3 ++-
 .../component-panel/ComponentCard.tsx          |  4 ++--
 .../component-panel/ComponentDemoGroup.tsx     |  2 +-
 .../component-panel/ComponentTokenDrawer.tsx   | 17 +++++++++--------
 .../hooks/useControlledTheme.tsx               |  2 +-
 .../antdv-token-previewer/interface.ts         |  2 +-
 .../antdv-token-previewer/previewer.tsx        |  2 +-
 .../token-panel-pro/AliasPanel.tsx             |  5 ++---
 .../token-panel-pro/TokenContent.tsx           |  7 +++----
 .../token-panel-pro/TokenDetail.tsx            |  3 +--
 .../token-panel-pro/TokenPreview.tsx           |  4 ++--
 .../token-panel-pro/index.tsx                  |  7 +++----
 .../antdv-token-previewer/utils/statistic.ts   |  3 ++-
 .../vue-colorful/components/HexColorPicker.tsx |  2 +-
 .../components/RgbaColorPicker.tsx             |  2 +-
 .../vue-colorful/hooks/useColorManipulation.ts |  5 +++--
 .../components/vue-colorful/utils/compare.ts   |  2 +-
 .../components/vue-colorful/utils/convert.ts   |  4 ++--
 .../views/theme-editor/JSONEditor/index.vue    |  2 +-
 site/src/views/theme-editor/index.vue          | 18 +++++++++---------
 22 files changed, 51 insertions(+), 51 deletions(-)

diff --git a/components/space/demo/compact.vue b/components/space/demo/compact.vue
index 5ecb593b9..4ba52bf54 100644
--- a/components/space/demo/compact.vue
+++ b/components/space/demo/compact.vue
@@ -17,7 +17,7 @@ Compact Mode for form component.
 </docs>
 
 <template>
-  <div className="site-space-compact-wrapper">
+  <div class="site-space-compact-wrapper">
     <a-space-compact block>
       <a-input :style="{ width: '20%' }" default-value="0571" />
       <a-input :style="{ width: '30%' }" default-value="26888888" />
diff --git a/site/src/components/antdv-token-previewer/ColorPanel.tsx b/site/src/components/antdv-token-previewer/ColorPanel.tsx
index 67940fa2f..aa7e3fc92 100644
--- a/site/src/components/antdv-token-previewer/ColorPanel.tsx
+++ b/site/src/components/antdv-token-previewer/ColorPanel.tsx
@@ -94,7 +94,7 @@ export type HexColorInputProps = {
   alpha?: boolean;
 };
 
-const getHexValue = (value: string, alpha: boolean = false) => {
+const getHexValue = (value: string, alpha = false) => {
   return alpha ? tinycolor(value).toHex8() : tinycolor(value).toHex();
 };
 const HexColorInput = defineComponent({
@@ -231,12 +231,12 @@ const getColorStr = (color: any, mode: ColorMode) => {
 };
 const ColorPanel = defineComponent({
   name: 'ColorPanel',
+  inheritAttrs: false,
   props: {
     color: { type: String },
     onChange: { type: Function as PropType<(color: string) => void> },
     alpha: { type: Boolean },
   },
-  inheritAttrs: false,
   setup(props, { attrs }) {
     const { color, alpha } = toRefs(props);
 
diff --git a/site/src/components/antdv-token-previewer/IconSwitch.tsx b/site/src/components/antdv-token-previewer/IconSwitch.tsx
index 120376f2e..e6fc946de 100644
--- a/site/src/components/antdv-token-previewer/IconSwitch.tsx
+++ b/site/src/components/antdv-token-previewer/IconSwitch.tsx
@@ -1,6 +1,7 @@
 import classNames from 'ant-design-vue/es/_util/classNames';
 import makeStyle from './utils/makeStyle';
-import { defineComponent, PropType, toRefs } from 'vue';
+import type { PropType } from 'vue';
+import { defineComponent, toRefs } from 'vue';
 
 const useStyle = makeStyle('IconSwitch', () => {
   const activeBackground = '#314659';
diff --git a/site/src/components/antdv-token-previewer/component-panel/ComponentCard.tsx b/site/src/components/antdv-token-previewer/component-panel/ComponentCard.tsx
index 7e1a3ec79..9a958b6a4 100644
--- a/site/src/components/antdv-token-previewer/component-panel/ComponentCard.tsx
+++ b/site/src/components/antdv-token-previewer/component-panel/ComponentCard.tsx
@@ -1,7 +1,7 @@
 import type { PropType } from 'vue';
 import { defineComponent, toRefs, ref } from 'vue';
-import { Button, CardProps } from 'ant-design-vue';
-import { Card } from 'ant-design-vue';
+import type { CardProps } from 'ant-design-vue';
+import { Button, Card } from 'ant-design-vue';
 import { Control } from '../icons';
 import makeStyle from '../utils/makeStyle';
 import classNames from 'ant-design-vue/es/_util/classNames';
diff --git a/site/src/components/antdv-token-previewer/component-panel/ComponentDemoGroup.tsx b/site/src/components/antdv-token-previewer/component-panel/ComponentDemoGroup.tsx
index 478cbacaf..72aeb70bd 100644
--- a/site/src/components/antdv-token-previewer/component-panel/ComponentDemoGroup.tsx
+++ b/site/src/components/antdv-token-previewer/component-panel/ComponentDemoGroup.tsx
@@ -66,7 +66,7 @@ export const ComponentDemoBlock = defineComponent({
     size: { type: String as PropType<'small' | 'middle' | 'large'>, default: 'middle' },
     disabled: { type: Boolean, default: false },
     demos: {
-      type: Object as PropType<(ComponentDemo & { active?: boolean })[]>,
+      type: Array as PropType<(ComponentDemo & { active?: boolean })[]>,
       default: () => [],
     },
     theme: { type: Object as PropType<MutableTheme> },
diff --git a/site/src/components/antdv-token-previewer/component-panel/ComponentTokenDrawer.tsx b/site/src/components/antdv-token-previewer/component-panel/ComponentTokenDrawer.tsx
index 852cf7b8c..8c4545125 100644
--- a/site/src/components/antdv-token-previewer/component-panel/ComponentTokenDrawer.tsx
+++ b/site/src/components/antdv-token-previewer/component-panel/ComponentTokenDrawer.tsx
@@ -115,16 +115,17 @@ const ComponentTokenDrawer = defineComponent({
 
     const [, hashId] = useStyle();
 
-    const { component: componentToken, global: aliasTokenNames } = getComponentToken(
-      component.value,
-    ) || {
-      global: [],
-    };
+    const componentToken = computed(
+      () =>
+        getComponentToken(component.value) || {
+          global: [],
+        },
+    );
 
-    const componentTokenData = computed(() => Object.keys(componentToken.value ?? {}));
+    const componentTokenData = computed(() => Object.keys(componentToken.value.component ?? {}));
 
     const aliasTokenData = computed(() => {
-      return aliasTokenNames.sort();
+      return componentToken.value.global.slice().sort();
     });
 
     const handleComponentTokenChange = (token: string, value: TokenValue) => {
@@ -177,7 +178,7 @@ const ComponentTokenDrawer = defineComponent({
                 tokenArr={componentTokenData.value}
                 tokenPath={['components', component.value]}
                 themes={[theme.value]}
-                fallback={() => componentToken.value}
+                fallback={() => componentToken.value.component}
                 onTokenChange={(_, tokenName, value) =>
                   handleComponentTokenChange(tokenName, value)
                 }
diff --git a/site/src/components/antdv-token-previewer/hooks/useControlledTheme.tsx b/site/src/components/antdv-token-previewer/hooks/useControlledTheme.tsx
index b975b66a6..4910b989c 100644
--- a/site/src/components/antdv-token-previewer/hooks/useControlledTheme.tsx
+++ b/site/src/components/antdv-token-previewer/hooks/useControlledTheme.tsx
@@ -41,7 +41,7 @@ const useControlledTheme: UseControlledTheme = ({ theme: customTheme, defaultThe
 
   const getNewTheme = (newTheme: Theme, force?: boolean): Theme => {
     const newToken = { ...newTheme.config.token };
-    if (infoFollowPrimary || force) {
+    if (infoFollowPrimary.value || force) {
       newToken.colorInfo = getDesignToken(newTheme.config).colorPrimary;
     }
     return { ...newTheme, config: { ...newTheme.config, token: newToken } };
diff --git a/site/src/components/antdv-token-previewer/interface.ts b/site/src/components/antdv-token-previewer/interface.ts
index 71d0f5ca7..59b4fab6f 100644
--- a/site/src/components/antdv-token-previewer/interface.ts
+++ b/site/src/components/antdv-token-previewer/interface.ts
@@ -1,5 +1,5 @@
 import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
-import { VueNode } from 'ant-design-vue/es/_util/type';
+import type { VueNode } from 'ant-design-vue/es/_util/type';
 
 export type Theme = {
   name: string;
diff --git a/site/src/components/antdv-token-previewer/previewer.tsx b/site/src/components/antdv-token-previewer/previewer.tsx
index 452b98879..24dccc2b4 100644
--- a/site/src/components/antdv-token-previewer/previewer.tsx
+++ b/site/src/components/antdv-token-previewer/previewer.tsx
@@ -1,8 +1,8 @@
 import { Button, Layout, message, theme as antdTheme } from 'ant-design-vue';
 import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
 import classNames from 'ant-design-vue/es/_util/classNames';
-import { PropType } from 'vue';
 import { defineComponent, toRefs, watchEffect, computed, ref } from 'vue';
+import type { PropType } from 'vue';
 import ComponentPanel from './component-panel';
 import type { FilterMode } from './FilterPanel';
 import FilterPanel from './FilterPanel';
diff --git a/site/src/components/antdv-token-previewer/token-panel-pro/AliasPanel.tsx b/site/src/components/antdv-token-previewer/token-panel-pro/AliasPanel.tsx
index d23936f6c..5f5a9dd28 100644
--- a/site/src/components/antdv-token-previewer/token-panel-pro/AliasPanel.tsx
+++ b/site/src/components/antdv-token-previewer/token-panel-pro/AliasPanel.tsx
@@ -5,13 +5,12 @@ import {
   ShrinkOutlined,
 } from '@ant-design/icons-vue';
 import { Button, Collapse, Empty, Tooltip } from 'ant-design-vue';
-import type { MutableTheme } from '../interface';
+import type { MutableTheme, AliasToken, SelectedToken } from '../interface';
 import classNames from 'ant-design-vue/es/_util/classNames';
 import useMergedState from 'ant-design-vue/es/_util/hooks/useMergedState';
-import { PropType, Ref } from 'vue';
 import { defineComponent, toRefs, computed } from 'vue';
+import type { PropType, Ref } from 'vue';
 import { Pick } from '../icons';
-import type { AliasToken, SelectedToken } from '../interface';
 import { mapRelatedAlias, seedRelatedAlias } from '../meta/TokenRelation';
 import makeStyle from '../utils/makeStyle';
 import { getRelatedComponents } from '../utils/statistic';
diff --git a/site/src/components/antdv-token-previewer/token-panel-pro/TokenContent.tsx b/site/src/components/antdv-token-previewer/token-panel-pro/TokenContent.tsx
index 576641942..57591ddf6 100644
--- a/site/src/components/antdv-token-previewer/token-panel-pro/TokenContent.tsx
+++ b/site/src/components/antdv-token-previewer/token-panel-pro/TokenContent.tsx
@@ -9,21 +9,20 @@ import {
   Tooltip,
   Typography,
 } from 'ant-design-vue';
-import type { MutableTheme } from '../interface';
+import type { MutableTheme, SelectedToken } from '../interface';
 import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
 import seed from 'ant-design-vue/es/theme/themes/seed';
 import tokenMeta from 'ant-design-vue/es/version/token-meta.json';
 import classNames from 'ant-design-vue/es/_util/classNames';
 
-import { PropType, toRefs } from 'vue';
-import { defineComponent, watchEffect, computed, watch, ref } from 'vue';
+import type { PropType } from 'vue';
+import { toRefs, defineComponent, watchEffect, computed, watch, ref } from 'vue';
 import { debounce } from 'lodash';
 
 import type { ThemeCode } from '../hooks/useControlledTheme';
 import { themeMap } from '../hooks/useControlledTheme';
 import { CompactTheme, DarkTheme, Light, Pick } from '../icons';
 
-import type { SelectedToken } from '../interface';
 import { useInjectLocaleContext } from '../locale';
 import type { TokenCategory, TokenGroup } from '../meta/interface';
 import getDesignToken from '../utils/getDesignToken';
diff --git a/site/src/components/antdv-token-previewer/token-panel-pro/TokenDetail.tsx b/site/src/components/antdv-token-previewer/token-panel-pro/TokenDetail.tsx
index 4623db517..2705e5430 100644
--- a/site/src/components/antdv-token-previewer/token-panel-pro/TokenDetail.tsx
+++ b/site/src/components/antdv-token-previewer/token-panel-pro/TokenDetail.tsx
@@ -1,10 +1,9 @@
 import { Tooltip } from 'ant-design-vue';
-import type { MutableTheme } from '../interface';
+import type { MutableTheme, TokenValue } from '../interface';
 import tokenMeta from 'ant-design-vue/es/version/token-meta.json';
 import classNames from 'ant-design-vue/es/_util/classNames';
 import type { PropType } from 'vue';
 import { defineComponent, computed, toRefs } from 'vue';
-import type { TokenValue } from '../interface';
 import { useInjectLocaleContext } from '../locale';
 import { mapRelatedAlias } from '../meta/TokenRelation';
 import TokenInput from '../TokenInput';
diff --git a/site/src/components/antdv-token-previewer/token-panel-pro/TokenPreview.tsx b/site/src/components/antdv-token-previewer/token-panel-pro/TokenPreview.tsx
index 4d44d717d..05cc3dc0c 100644
--- a/site/src/components/antdv-token-previewer/token-panel-pro/TokenPreview.tsx
+++ b/site/src/components/antdv-token-previewer/token-panel-pro/TokenPreview.tsx
@@ -1,6 +1,6 @@
 import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
-import { PropType, toRefs } from 'vue';
-import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
+import { toRefs, defineComponent } from 'vue';
 
 import getColorBgImg from '../utils/getColorBgImg';
 import getDesignToken from '../utils/getDesignToken';
diff --git a/site/src/components/antdv-token-previewer/token-panel-pro/index.tsx b/site/src/components/antdv-token-previewer/token-panel-pro/index.tsx
index 077f886ee..c513466b4 100644
--- a/site/src/components/antdv-token-previewer/token-panel-pro/index.tsx
+++ b/site/src/components/antdv-token-previewer/token-panel-pro/index.tsx
@@ -1,9 +1,8 @@
 import { Tabs } from 'ant-design-vue';
-import type { Theme } from '../interface';
+import type { Theme, SelectedToken } from '../interface';
 import classNames from 'ant-design-vue/es/_util/classNames';
-import { PropType, toRefs } from 'vue';
-import { defineComponent, watchEffect, computed, ref } from 'vue';
-import type { SelectedToken } from '../interface';
+import type { PropType } from 'vue';
+import { toRefs, defineComponent, watchEffect, computed, ref } from 'vue';
 import { useInjectLocaleContext } from '../locale';
 import { tokenCategory } from '../meta';
 import type { TokenGroup } from '../meta/interface';
diff --git a/site/src/components/antdv-token-previewer/utils/statistic.ts b/site/src/components/antdv-token-previewer/utils/statistic.ts
index ce8ee3ce6..853fdb2f6 100644
--- a/site/src/components/antdv-token-previewer/utils/statistic.ts
+++ b/site/src/components/antdv-token-previewer/utils/statistic.ts
@@ -26,4 +26,5 @@ export const getRelatedComponents = (token: string | string[]): string[] => {
   );
 };
 
-export const getComponentToken = (component: string) => (tokenStatistic as any)[component];
+export const getComponentToken = (component: string) =>
+  tokenStatistic[component] as { component?: Record<string, any>; global: string[] };
diff --git a/site/src/components/vue-colorful/components/HexColorPicker.tsx b/site/src/components/vue-colorful/components/HexColorPicker.tsx
index 310f65385..65f2253a6 100644
--- a/site/src/components/vue-colorful/components/HexColorPicker.tsx
+++ b/site/src/components/vue-colorful/components/HexColorPicker.tsx
@@ -2,7 +2,7 @@ import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
 
 import { ColorPicker } from './common/ColorPicker';
-import { ColorModel } from '../types';
+import type { ColorModel } from '../types';
 import { equalHex } from '../utils/compare';
 import { hexToHsva, hsvaToHex } from '../utils/convert';
 
diff --git a/site/src/components/vue-colorful/components/RgbaColorPicker.tsx b/site/src/components/vue-colorful/components/RgbaColorPicker.tsx
index b34492d74..66081d454 100644
--- a/site/src/components/vue-colorful/components/RgbaColorPicker.tsx
+++ b/site/src/components/vue-colorful/components/RgbaColorPicker.tsx
@@ -2,7 +2,7 @@ import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
 
 import { AlphaColorPicker } from './common/AlphaColorPicker';
-import { ColorModel, RgbaColor } from '../types';
+import type { ColorModel, RgbaColor } from '../types';
 import { equalColorObjects } from '../utils/compare';
 import { rgbaToHsva, hsvaToRgba } from '../utils/convert';
 
diff --git a/site/src/components/vue-colorful/hooks/useColorManipulation.ts b/site/src/components/vue-colorful/hooks/useColorManipulation.ts
index 5e87ba3b9..0cec9091a 100644
--- a/site/src/components/vue-colorful/hooks/useColorManipulation.ts
+++ b/site/src/components/vue-colorful/hooks/useColorManipulation.ts
@@ -1,5 +1,6 @@
-import { Ref, ref, watch } from 'vue';
-import { ColorModel, AnyColor, HsvaColor } from '../types';
+import type { Ref } from 'vue';
+import { ref, watch } from 'vue';
+import type { ColorModel, AnyColor, HsvaColor } from '../types';
 import { equalColorObjects } from '../utils/compare';
 import { useEventCallback } from './useEventCallback';
 
diff --git a/site/src/components/vue-colorful/utils/compare.ts b/site/src/components/vue-colorful/utils/compare.ts
index 712ea1015..adf0d28b7 100644
--- a/site/src/components/vue-colorful/utils/compare.ts
+++ b/site/src/components/vue-colorful/utils/compare.ts
@@ -1,5 +1,5 @@
 import { hexToRgba } from './convert';
-import { ObjectColor } from '../types';
+import type { ObjectColor } from '../types';
 
 export const equalColorObjects = (first: ObjectColor, second: ObjectColor): boolean => {
   if (first === second) return true;
diff --git a/site/src/components/vue-colorful/utils/convert.ts b/site/src/components/vue-colorful/utils/convert.ts
index 9d7013030..7ac86b0cb 100644
--- a/site/src/components/vue-colorful/utils/convert.ts
+++ b/site/src/components/vue-colorful/utils/convert.ts
@@ -1,5 +1,5 @@
 import { round } from './round';
-import { RgbaColor, RgbColor, HslaColor, HslColor, HsvaColor, HsvColor } from '../types';
+import type { RgbaColor, RgbColor, HslaColor, HslColor, HsvaColor, HsvColor } from '../types';
 
 /**
  * Valid CSS <angle> units.
@@ -58,7 +58,7 @@ export const hslaToHsva = ({ h, s, l, a }: HslaColor): HsvaColor => {
   s *= (l < 50 ? l : 100 - l) / 100;
 
   return {
-    h: h,
+    h,
     s: s > 0 ? ((2 * s) / (l + s)) * 100 : 0,
     v: l + s,
     a,
diff --git a/site/src/views/theme-editor/JSONEditor/index.vue b/site/src/views/theme-editor/JSONEditor/index.vue
index b7dfd3a3f..cbadcd920 100644
--- a/site/src/views/theme-editor/JSONEditor/index.vue
+++ b/site/src/views/theme-editor/JSONEditor/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div className="svelte-jsoneditor-vue" ref="editor"></div>
+  <div ref="editor" class="svelte-jsoneditor-vue"></div>
 </template>
 
 <script>
diff --git a/site/src/views/theme-editor/index.vue b/site/src/views/theme-editor/index.vue
index 0c12a1d78..d4b14d45e 100644
--- a/site/src/views/theme-editor/index.vue
+++ b/site/src/views/theme-editor/index.vue
@@ -12,7 +12,7 @@
             v-model:open="editModelOpen"
             :title="locale.editModelTitle"
             :width="600"
-            :okText="locale.save"
+            :ok-text="locale.save"
             @ok="editSave"
             @cancel="editModelClose"
           >
@@ -25,19 +25,19 @@
               <template #default>
                 <JSONEditor
                   :content="themeConfigContent"
-                  :onChange="handleEditConfigChange"
-                  :mainMenuBar="false"
+                  :on-change="handleEditConfigChange"
+                  :main-menu-bar="false"
                 />
               </template>
             </Suspense>
           </a-modal>
-          <a-button @click="handleExport" class="theme-editor-header-actions">
+          <a-button class="theme-editor-header-actions" @click="handleExport">
             {{ locale.export }}
           </a-button>
-          <a-button @click="handleEditConfig" class="theme-editor-header-actions">
+          <a-button class="theme-editor-header-actions" @click="handleEditConfig">
             {{ locale.edit }}
           </a-button>
-          <a-button type="primary" @click="handleSave" class="theme-editor-header-actions">
+          <a-button type="primary" class="theme-editor-header-actions" @click="handleSave">
             {{ locale.save }}
           </a-button>
         </div>
@@ -45,8 +45,8 @@
       <ThemeEditor
         :theme="{ name: 'Custom Theme', key: 'test', config: theme }"
         :style="{ height: 'calc(100vh - 64px - 56px)' }"
-        @themeChange="handleThemeChange"
         :locale="lang === 'cn' ? zhCN : enUS"
+        @themeChange="handleThemeChange"
       />
     </a-config-provider>
   </div>
@@ -58,7 +58,7 @@ import { message } from 'ant-design-vue';
 import { useLocale } from '../../i18n';
 import locales from './locales';
 
-import Header from '../../layouts/Header/index.vue';
+import Header from '../../layouts/header/index.vue';
 
 // antd换肤编辑器
 import { enUS, ThemeEditor, zhCN } from '../../components/antdv-token-previewer';
@@ -108,7 +108,7 @@ export default defineComponent({
     };
 
     const editSave = () => {
-      if (!editThemeFormatRight) {
+      if (!editThemeFormatRight.value) {
         message.error(locale.value.editJsonContentTypeError);
         return;
       }