Convert App.vue and theme generator components to script setup

Co-authored-by: liweijie0812 <10710889+liweijie0812@users.noreply.github.com>

Author: Copilot

packages/theme-generator/src/Generator.vue

@@ -18,7 +18,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, provide, onMounted } from 'vue';
 import {
   applyThemeFromLocal,
   DEFAULT_THEME,
@@ -38,62 +39,58 @@ const activeTabMap = {
   size: 4,
 };
 
-export default {
-  name: 'ThemeGenerator',
-  components: {
-    PanelDrawer,
-    Dock,
+const props = defineProps({
+  propsTop: String,
+  showSetting: {
+    type: [Boolean, String],
   },
-  props: {
-    propsTop: String,
-    showSetting: {
-      type: [Boolean, String],
-    },
-    device: {
-      type: String,
-      default: 'web',
-    },
-  },
-  provide() {
-    return {
-      device: this.device,
-    };
-  },
-  data() {
-    return {
-      activeTabMap,
-      refresh: false,
-      visible: 0,
-      activeTabIdx: activeTabMap.color,
-      theme: DEFAULT_THEME,
-    };
-  },
-  mounted() {
-    const localTheme = getOptionFromLocal('color') ?? DEFAULT_THEME.value;
-    generateNewTheme(localTheme, undefined, this.device);
-    syncThemeToIframe(this.device);
-    applyThemeFromLocal(this.device);
-  },
-  methods: {
-    handleChangeTheme(theme) {
-      this.theme = theme;
-    },
-    handleRefreshContent() {
-      this.refresh = !this.refresh;
-    },
-    handleTriggerVisible() {
-      this.visible = true;
-    },
-    handleDrawerVisible(v) {
-      this.visible = v;
-      this.$emit('panel-drawer-visible', v);
-    },
-    handleClickSetting() {
-      this.$emit('click-setting');
-      this.visible = false;
-    },
+  device: {
+    type: String,
+    default: 'web',
   },
+});
+
+const emit = defineEmits(['click-setting', 'panel-drawer-visible']);
+
+// Provide device to child components
+provide('device', props.device);
+
+// Data
+const refresh = ref(false);
+const visible = ref(0);
+const activeTabIdx = ref(activeTabMap.color);
+const theme = ref(DEFAULT_THEME);
+
+// Methods
+const handleChangeTheme = (newTheme) => {
+  theme.value = newTheme;
 };
+
+const handleRefreshContent = () => {
+  refresh.value = !refresh.value;
+};
+
+const handleTriggerVisible = () => {
+  visible.value = true;
+};
+
+const handleDrawerVisible = (v) => {
+  visible.value = v;
+  emit('panel-drawer-visible', v);
+};
+
+const handleClickSetting = () => {
+  emit('click-setting');
+  visible.value = false;
+};
+
+// Lifecycle hooks
+onMounted(() => {
+  const localTheme = getOptionFromLocal('color') ?? DEFAULT_THEME.value;
+  generateNewTheme(localTheme, undefined, props.device);
+  syncThemeToIframe(props.device);
+  applyThemeFromLocal(props.device);
+});
 </script>
 
 <style lang="less" scoped>

packages/theme-generator/src/common/SizeSlider/index.vue

@@ -24,56 +24,51 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, onMounted } from 'vue';
 import { InputNumber as TInputNumber, Slider as TSlider } from 'tdesign-vue';
 import { handleAttach } from '../../common/utils';
 
-export default {
-  name: 'SizeSlider',
-  props: {
-    sizeValue: [String, Number],
-    title: String,
-    step: Number,
-    min: Number,
-    max: Number,
-    disabled: Boolean,
-    needInteger: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  components: {
-    TSlider,
-    TInputNumber,
-  },
-  emit: ['changeFontSize'],
-  data() {
-    return {
-      size: null,
-    };
-  },
-  methods: {
-    format(val) {
-      return `${val}px`;
-    },
-    handleAttach,
-    handleInputChange(v) {
-      if (
-        v === this.size ||
-        v < this.min ||
-        v > this.max ||
-        this.disabled ||
-        (this.needInteger && !Number.isInteger(Number(v)))
-      )
-        return;
-      this.size = v;
-      this.$emit('changeFontSize', v);
-    },
-  },
-  mounted() {
-    this.size = this.needInteger ? parseInt(this.sizeValue, 10) : this.sizeValue;
+const props = defineProps({
+  sizeValue: [String, Number],
+  title: String,
+  step: Number,
+  min: Number,
+  max: Number,
+  disabled: Boolean,
+  needInteger: {
+    type: Boolean,
+    default: true,
   },
+});
+
+const emit = defineEmits(['changeFontSize']);
+
+// Data
+const size = ref(null);
+
+// Methods
+const format = (val) => {
+  return `${val}px`;
 };
+
+const handleInputChange = (v) => {
+  if (
+    v === size.value ||
+    v < props.min ||
+    v > props.max ||
+    props.disabled ||
+    (props.needInteger && !Number.isInteger(Number(v)))
+  )
+    return;
+  size.value = v;
+  emit('changeFontSize', v);
+};
+
+// Lifecycle hooks
+onMounted(() => {
+  size.value = props.needInteger ? parseInt(props.sizeValue, 10) : props.sizeValue;
+});
 </script>
 <style lang="less" scoped>
 .panel {

site/src/App.vue

@@ -5,61 +5,58 @@
   </td-doc-layout>
 </template>
 
-<script>
-export default {
-  computed: {
-    headerStyle () {
-      const { name } = this.$route
-      const fixedHeaderList = ['home', 'home-en', 'source', 'source-en', 'trade']
-      if (fixedHeaderList.includes(name)) {
-        return {
-          position: 'fixed',
-          top: 0,
-          left: 0,
-          width: '100%',
-          zIndex: 1200,
-          '--bg-color-secondarypage': 'var(--bg-color-navigation)',
-          '--bg-color-secondarypage-hover': 'var(--bg-color-navigation-hover)',
-          '--bg-color-secondarypage-select': 'var(--bg-color-navigation-select)'
-        }
-      }
-      return { display: 'none' }
-    }
-  },
+<script setup>
+import { computed, onMounted, onBeforeUnmount, watch } from 'vue';
+import { useRoute } from 'vue-router';
 
-  mounted () {
-    window.addEventListener('load', this.handleHashScroll)
-  },
+const route = useRoute();
 
-  beforeDestroy () {
-    window.removeEventListener('load', this.handleHashScroll)
-  },
+// Computed
+const headerStyle = computed(() => {
+  const { name } = route;
+  const fixedHeaderList = ['home', 'home-en', 'source', 'source-en', 'trade'];
+  if (fixedHeaderList.includes(name)) {
+    return {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      width: '100%',
+      zIndex: 1200,
+      '--bg-color-secondarypage': 'var(--bg-color-navigation)',
+      '--bg-color-secondarypage-hover': 'var(--bg-color-navigation-hover)',
+      '--bg-color-secondarypage-select': 'var(--bg-color-navigation-select)'
+    };
+  }
+  return { display: 'none' };
+});
+
+// Methods
+const handleHashScroll = () => {
+  const hash = decodeURIComponent(route.hash);
+  requestAnimationFrame(() => {
+    const id = hash.slice(1);
+    const anchorEl = document.getElementById(id);
+    if (!anchorEl) return;
+
+    requestAnimationFrame(() => {
+      window.scrollTo({ top: anchorEl.offsetTop - 88 });
+    });
+  });
+};
 
-  watch: {
-    $route: {
-      immediate: true,
-      handler (route) {
-        if (route.meta) {
-          document.title = route.meta.documentTitle || 'TDesign'
-        }
-      }
-    }
-  },
+// Lifecycle hooks
+onMounted(() => {
+  window.addEventListener('load', handleHashScroll);
+});
 
-  methods: {
-    handleHashScroll () {
-      const { $route } = this
-      const hash = decodeURIComponent($route.hash)
-      requestAnimationFrame(() => {
-        const id = hash.slice(1)
-        const anchorEl = document.getElementById(id)
-        if (!anchorEl) return
+onBeforeUnmount(() => {
+  window.removeEventListener('load', handleHashScroll);
+});
 
-        requestAnimationFrame(() => {
-          window.scrollTo({ top: anchorEl.offsetTop - 88 })
-        })
-      })
-    }
+// Watch
+watch(route, (newRoute) => {
+  if (newRoute.meta) {
+    document.title = newRoute.meta.documentTitle || 'TDesign';
   }
-}
+}, { immediate: true });
 </script>

site/src/pages/design/icon_zh-CN.vue

@@ -199,12 +199,53 @@
   </div>
 </template>
 
-<script>
-import AllIcons from '@/components/all-icons.vue'
-import anchorMixin from '../mixins/anchor'
-
-export default {
-  components: { AllIcons },
-  mixins: [anchorMixin]
-}
+<script setup>
+import { ref, onMounted } from 'vue';
+import AllIcons from '@/components/all-icons.vue';
+
+// Template refs
+const article = ref(null);
+
+// Data (from mixin)
+const catalog = ref([]);
+
+// Methods (from mixin)
+const genAnchor = () => {
+  if (!article.value) return;
+  const articleContent = article.value;
+  const nodes = ['H2', 'H3'];
+  const titles = [];
+  articleContent.childNodes.forEach((e, index) => {
+    if (nodes.includes(e.nodeName)) {
+      const id = `header-${index}`;
+      e.setAttribute('id', id);
+      titles.push({
+        id,
+        title: e.innerHTML,
+        level: Number(e.nodeName.substring(1, 2)),
+        nodeName: e.nodeName,
+        children: []
+      });
+    }
+  });
+
+  const isEveryLevel3 = titles.every(t => t.level === 3);
+  catalog.value = titles.reduce((acc, curr) => {
+    if (isEveryLevel3) {
+      acc.push(curr);
+    } else {
+      if (curr.level === 2) {
+        acc.push(curr);
+      } else if (curr.level === 3) {
+        acc[acc.length - 1].children.push(curr);
+      }
+    }
+    return acc;
+  }, []);
+};
+
+// Lifecycle hooks
+onMounted(() => {
+  genAnchor();
+});
 </script>