feat(docs): add migration guides and enhance theme configuration

- Introduced migration guides for Bubble and Kit components, detailing changes from v0.3.x to v0.4.x.
- Updated theme configuration to include a new sidebar item for the migration guide.
- Enhanced demo examples with improved styling and updated properties for better user experience.
- Refactored demo components to align with the latest API changes and best practices.
- Added new CSS variables for consistent styling across components.

Author: gene9831

docs/.vitepress/themeConfig.ts

@@ -45,6 +45,7 @@ const sharedSidebarItems = [
 const nav = [
   { text: '指南', link: '/guide/quick-start', activeMatch: '/guide/' },
   { text: '演示', link: '/examples/assistant', activeMatch: '/examples/' },
+  { text: '迁移指南', link: '/migration/bubble-migration', activeMatch: '/migration/' },
 ]
 
 const sidebar = {
@@ -58,6 +59,16 @@ const sidebar = {
       items: [{ text: '综合示例', link: 'assistant' }],
     },
   ],
+  '/migration/': [
+    {
+      text: '迁移指南',
+      base: '/migration/',
+      items: [
+        { text: 'Bubble 气泡', link: 'bubble-migration' },
+        { text: 'Kit 工具集', link: 'kit-migration' },
+      ],
+    },
+  ],
 }
 
 export const themeConfig = { nav, sidebar }

docs/demos/bubble/list-auto-scroll.vue

@@ -12,7 +12,12 @@
       ref="containerRef"
       style="height: 300px; border: 1px solid #ddd; border-radius: 4px; overflow-y: auto; padding: 8px"
     >
-      <tr-bubble-list :messages="messages" :role-configs="roles" :auto-scroll="autoScroll"></tr-bubble-list>
+      <tr-bubble-list
+        :messages="messages"
+        :role-configs="roles"
+        :auto-scroll="autoScroll"
+        style="max-height: 100%"
+      ></tr-bubble-list>
     </div>
   </div>
 </template>

docs/demos/bubble/list.vue

@@ -31,6 +31,6 @@ const roles: Record<string, BubbleRoleConfig> = {
 
 <style scoped>
 :deep([data-role='user']) {
-  --tr-bubble-content-bg: var(--tr-color-primary-light);
+  --tr-bubble-box-bg: var(--tr-color-primary-light);
 }
 </style>