chore(site): Convert Vue 2.7 site components from Options API to Composition API with script setup

[Copilot]

• Convert Vue 2.7 site components from Options API to Composition API
• Apply <script setup> syntax across all site components
• Convert lifecycle hooks: mounted → onMounted(), beforeDestroy → onBeforeUnmount()
• Convert component API: props → defineProps(), $emit → defineEmits()
• Convert template refs: this.$refs → ref variables
• Convert router integration: this.$route/this.$router → useRoute()/useRouter()
• Convert Vue 2 filters to standalone functions
• Handle global properties: this.$message → getCurrentInstance() pattern
• Exclude theme generator components from migration (pending refactor)
• Merge main branch and resolve conflicts
  • Preserved all Composition API conversions in icon.vue, icon_zh-CN.vue, layout.vue, layout_zh-CN.vue
  • Maintained CSS syntax fixes in icon.less
  • Integrated main branch updates

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[tencent-adm]

Thank you for your submission, we really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
1 out of 2 committers have signed the CLA.

✅ liweijie0812
❌ Copilot
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[liweijie0812]

@copilot 继续改

[tencent-adm]

Thank you for your submission, we really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/Tencent/tdesign/@tdesign/site-components@722

npm i https://pkg.pr.new/Tencent/tdesign/@tdesign/theme-generator@722

commit: b5a56bf

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/Tencent/tdesign/@tdesign/site-components@722

npm i https://pkg.pr.new/Tencent/tdesign/tdesign-theme-generator@722

commit: d08ce00

[liweijie0812]

@copilot 继续修改

[Copilot]

@copilot 继续改

继续转换了5个组件，包括全部的components文件夹内的组件和2个设计页面文件。现在已完成18/31个组件的转换（58%）。已建立了anchorMixin转换模式，并在具有目录功能的设计页面中一致应用。继续转换剩余的设计页面和索引页面。(ab3b15b)

[Copilot]

@copilot 继续修改

继续转换了4个重要的设计页面组件，包括motion动画页面（支持Lottie动画）、color色彩系统页面（大型数据结构）和source资源页面（复杂路由交互）。现在已完成29/31个组件的转换（94%），仅剩余2个超大文件（1000+行）的首页组件需要处理。 (11417a2)

[Copilot]

Pull Request Overview

This PR converts Vue 2.7 site components from the Options API to the Composition API using the modern <script setup> syntax. The migration improves code organization, type inference, and development experience while maintaining full backward compatibility across 29 site components.

Key changes include:

• API Migration: Converting data() → ref()/reactive(), methods → functions, computed → computed(), and lifecycle hooks to their Composition API equivalents
• Template refs: Migrating from this.$refs to ref variables with proper naming conventions
• Mixin elimination: Converting shared functionality from mixins to standalone utility functions

Reviewed Changes

Copilot reviewed 35 out of 35 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
site.config.mjs / site-en.config.mjs	Updates route names for consistency
mixins/	Removes Options API mixins in favor of Composition API utilities
home/	Converts banner, component-list, and avatar components to Composition API
design/	Migrates all design documentation components with proper anchor handling
about/	Converts about section components maintaining page loading functionality
components/	Updates shared components like download-dialog and design-source
App.vue	Root component migration with proper route watching

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[tencent-adm]

Thank you for your submission, we really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
1 out of 2 committers have signed the CLA.

✅ liweijie0812
❌ Copilot
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[liweijie0812]

@copilot merge main 分支代码，处理冲突

[Copilot]

@copilot merge main 分支代码，处理冲突

✅ 已成功合并主分支代码并解决所有冲突。

合并内容：

• 集成了主分支的图标功能更新（包含新的 /icons 和 /icons-en 路由）
• 在所有受影响文件中保留了 Composition API 转换
• 更新了资源页面的图标选项卡功能（中英文版本）
• 添加了 App.vue 中对图标路由的头部处理支持

所有冲突已解决，Composition API 现代化改造完整保留。(bb25884)

[liweijie0812]

@copilot merge main 分支代码，处理冲突

[Copilot]

@copilot merge main 分支代码，处理冲突

✅ 已成功合并主分支代码并解决所有冲突。

合并内容：

• 集成了图标页面的 Link1Icon 组件和 handleClickBtn 方法
• 更新了 layout.vue 的英文翻译数据
• 保留了所有 Composition API 转换

所有冲突已解决，Composition API 现代化改造完整保留。(f97e1ff)

[liweijie0812]

@copilot merge main 分支代码，处理冲突
This branch has conflicts that must be resolved

site/src/pages/design/icon.vue
site/src/pages/design/icon_zh-CN.vue
site/src/pages/design/layout.vue
site/src/pages/design/layout_zh-CN.vue

[Copilot]

@copilot merge main 分支代码，处理冲突
This branch has conflicts that must be resolved

...

✅ 已成功合并 main 分支代码并解决所有冲突。

解决的冲突文件：

• site/src/pages/design/icon.vue - 保留 Composition API
• site/src/pages/design/icon_zh-CN.vue - 保留 Composition API
• site/src/pages/design/layout.vue - 保留 Composition API
• site/src/pages/design/layout_zh-CN.vue - 保留 Composition API
• site/src/style/icon.less - 保留 CSS 语法修复

所有 Composition API 转换已保留。(dde9eee)