fix: resolve NoStoryMatchError in Storybook and address TypeError in RootProvider.vue

- Updated Storybook configuration to correctly handle path aliases for components.
- Diagnosed and fixed TypeError related to `Collapsible.RootProvider` by ensuring proper unwrapping of computed values.
- Implemented checks to prevent accessing properties of undefined in the RootProvider component.
- Enhanced error handling and added guards in the template to ensure components render only when API values are available.

Author: elonehoo

.specstory/history/2025-11-11_00-47Z-解决-storybook-中的-nostorymatcherror-错误.md

@@ -26,11 +26,12 @@ PreviewWithSelection @ storybook_internal_preview_runtime.js?v=9aef49a6:44719
 PreviewWeb @ storybook_internal_preview_runtime.js?v=9aef49a6:45384
 (anonymous) @ vite-app.js:27
 
+
 ---
 
 _**Agent (model copilot/claude-sonnet-4.5)**_
 
-我来帮你解决这个 Storybook 错误。错误提示找不到 story `'components-collapse--basic'`。让我先检查一下当前的 story 文件结构。 问题在于你的 story 文件只定义了 default export,但没有导出任何具名的 story。Storybook 需要具名导出来创建实际的 story。我来修复这个文件:
+我来帮你解决这个 Storybook 错误。错误提示找不到 story `'components-collapse--basic'`。让我先检查一下当前的 story 文件结构。 问题在于你的 story 文件只定义了 default export,但没有导出任何具名的 story。Storybook 需要具名导出来创建实际的 story。我来修复这个文件: 
 ```
 
 ```
@@ -43,28 +44,38 @@ _**Agent (model copilot/claude-sonnet-4.5)**_
 
 ---
 
-_**User (2025-11-11 01:19Z)**_
+_**User (2025-11-11 01:22Z)**_
 
 这是为什么
 
 ```
-[Vue warn]: Property "asChild" was accessed during render but is not defined on instance.
-  at <Root defaultValue= ['Vue'] >
-  at <Basic>
-  at <Anonymous>
-  at <Anonymous>
+[Vue warn]: Property "asChild" was accessed during render but is not defined on instance. 
+  at <Root defaultValue= ['Vue'] > 
+  at <Basic> 
+  at <Anonymous> 
+  at <Anonymous> 
   at <App>
 ```
 
 ---
 
 _**Agent (model copilot/claude-sonnet-4.5)**_
 
-这个警告是因为 `Root` 组件使用了 `asChild` 属性但没有正确定义。让我检查一下相关的组件代码： 我看到问题了。在 `Root.vue` 的模板中使用了 `asChild`，但这个属性来自 `PolymorphicProps`，需要在 props 中访问。让我检查一下 `PolymorphicProps` 的定义： 现在我明白了。问题是在模板中直接使用 `asChild` 变量，但应该使用 `props.asChild`。让我修复这个问题：
+这个警告是因为 `Root` 组件使用了 `asChild` 属性但没有正确定义。让我检查一下相关的组件代码： 我看到问题了。在 `Root.vue` 的模板中使用了 `asChild`，但这个属性来自 `PolymorphicProps`，需要在 props 中访问。让我检查一下 `PolymorphicProps` 的定义： 现在我明白了。问题是在模板中直接使用 `asChild` 变量，但应该使用 `props.asChild`。让我修复这个问题： 
+```
+
+```
+让我检查其他组件是否也有同样的问题： 还有其他组件也有同样的问题。让我逐个修复它们： 现在我需要修复所有这些组件，将 `asChild` 改为 `props.asChild`： 
+```
+
+```
+
+```
+
 ```
 
 ```
-让我检查其他组件是否也有同样的问题： 还有其他组件也有同样的问题。让我逐个修复它们： 现在我需要修复所有这些组件，将 `asChild` 改为 `props.asChild`：
+
 ```
 
 ```
@@ -77,16 +88,126 @@ _**Agent (model copilot/claude-sonnet-4.5)**_
 
 ```
 
+```
+让我重新检查并修复 ItemIndicator.vue： 我需要将 `defineProps` 改为带 `const props =` 的形式： 
+```
+
+```
+现在让我检查是否还有其他 collapsible 组件也有同样的问题： collapsible 组件也有同样的问题。让我一并修复： 
+```
+
+```
+
 ```
 
 ```
 
 ```
 
+```
+还需要检查是否还有 Trigger 组件： Trigger 组件没有使用 `asChild`，所以不需要修改。让我检查一下错误是否还有其他地方： 还有 Presence 组件。让我修复它： 
 ```
 
 ```
+完成！我已经修复了所有组件中的 `asChild` 属性访问问题。
+
+**问题根源：**
+在 Vue 3 的 `<script setup>` 中，模板无法直接访问 `defineProps` 返回的属性名（如 `asChild`），必须通过 `props` 对象来访问（如 `props.asChild`）。
+
+**修复的文件：**
+1. ✅ `Root.vue`
+2. ✅ `RootProvider.vue`
+3. ✅ `ItemIndicator.vue`
+4. ✅ `ItemContent.vue`
+5. ✅ `ItemTrigger.vue`
+6. ✅ `Root.vue`
+7. ✅ `RootProvider.vue`
+8. ✅ `Content.vue`
+9. ✅ `Presence.vue`
+
+现在刷新浏览器，警告应该消失了。
+
+---
+
+_**User (2025-11-12 04:17Z)**_
+
+好像会出现这个问题
 
+```
+Neither '~/factory.vue' nor '~/factory.js(x)' or '~/factory/index.js(x)' or '~/factory/index.ts(x)' could be found in '/Users/elonehoo/Developer/destyler-dev/ui/packages/vue/src/components/collapse/components'
+Neither '~/composables.vue' nor '~/composables.js(x)' or '~/composables/index.js(x)' or '~/composables/index.ts(x)' could be found in '/Users/elonehoo/Developer/destyler-dev/ui/packages/vue/src/components/collapse/components'
 ```
 
 ---
+
+_**Agent (model copilot/claude-sonnet-4.5)**_
+
+这个问题是路径别名 `~` 解析失败。让我检查一下项目的配置和当前文件： 配置看起来是正确的。让我检查 Storybook 的配置： 问题在于 Storybook 没有配置路径别名。我需要在 Storybook 的配置中添加 Vite 的别名配置： 
+```
+
+```
+完成！我已经在 Storybook 的配置文件中添加了路径别名配置。
+
+**修复说明：**
+- 在 `main.ts` 中添加了 `viteFinal` 钩子
+- 配置了与项目主配置相同的路径别名 `~/` 指向 `src/` 目录
+- 这样 Storybook 就能正确解析 `~/factory`、`~/composables` 等导入路径
+
+现在需要重启 Storybook 服务器，路径解析问题就会解决。如果 Storybook 正在运行，请重新启动它。
+
+---
+
+_**User (2025-11-12 04:18Z)**_
+
+还是有这个问题
+
+```
+Neither '~/composables.vue' nor '~/composables.js(x)' or '~/composables/index.js(x)' or '~/composables/index.ts(x)' could be found in '/Users/elonehoo/Developer/destyler-dev/ui/packages/vue/src/components/collapse/components'
+Neither '~/factory.vue' nor '~/factory.js(x)' or '~/factory/index.js(x)' or '~/factory/index.ts(x)' could be found in '/Users/elonehoo/Developer/destyler-dev/ui/packages/vue/src/components/collapse/components'
+```
+
+---
+
+_**Agent (model copilot/claude-sonnet-4.5)**_
+
+让我检查一下实际的文件结构，确认 `~/composables` 和 `~/factory` 是否存在： 文件都存在。问题可能是 Storybook 没有重启。但让我先检查一下在组件中是如何导入的，以及 `.storybook` 目录中是否还有其他配置文件： 路径使用正确。让我查看当前的 `main.ts` 文件内容，确保修改已正确保存： 配置看起来正确。让我检查一下是否还需要导入类型。另外，让我看看 Storybook 的 preview 配置： 问题可能是别名配置的方式。让我尝试另一种配置方法，使用完整的 Vite 配置导入： 
+```
+
+```
+让我修复导入顺序： 
+```
+
+```
+现在配置已更新。关键更改：
+1. 使用 `mergeConfig` 来合并配置，这是更标准的做法
+2. 别名改为 `'~': path.resolve(...)` 而不是 `'~/': ...`（去掉了尾部斜杠）
+
+**请重启 Storybook 服务器**以使配置生效。如果仍有问题，可能需要清除缓存：
+
+```bash
+rm -rf node_modules/.vite
+rm -rf node_modules/.cache
+```
+
+然后重新启动 Storybook。
+
+---
+
+_**User (2025-11-13 01:49Z)**_
+
+#createFile the plan as is into an untitled file (`untitled:plan-${camelCaseName}.prompt.md` without frontmatter) for further refinement.
+
+---
+
+_**Agent (model copilot/gpt-5-codex)**_
+
+I need more context about what plan you're referring to. Could you please clarify:
+
+1. What plan should I create into an untitled file?
+2. Is there a specific plan or content from our previous conversation that you'd like me to document?
+3. What should the camelCaseName be for the file?
+
+If you're referring to the fixes we made for the Storybook and Vue component issues, I can create a summary of those changes. Please let me know what specific content you'd like in the plan file.
+
+---
+