feat(pinia): add expand/collapse functionality for store data structures

[ZKunZhang]

🚀 Feature Overview

This PR implements the requested expand/collapse functionality for Pinia Store data structures as requested in issue #467.

✨ What's Implemented

1. One-Click Operations for All Stores

• Expand All: Recursively expands all tree nodes and state properties
• Collapse All: Collapses all expanded nodes to provide a clean view
• Added expand/collapse buttons in both tree panel and state panel headers

2. Node-Level Hover Interactions

• Quick Actions on Hover: When hovering over tree nodes with children, quick action buttons appear
• Individual Node Control: Each node can be expanded/collapsed independently
• Visual Feedback: Consistent hover states and tooltip guidance

3. Enhanced Search & Auto-Expansion

• Search Auto-Expand: Automatically expands all levels when searching to reveal matching content
• Store Search: Filter stores by name with auto-expansion
• State Search: Filter state properties with maintained expansion context

4. Deep Nesting Support

• 30-Level Depth: Supports expansion of deeply nested data structures
• Performance Optimized: Efficient handling of complex state objects
• Error Resilient: Graceful handling of circular references and edge cases

🎯 Addresses Issue Requirements

✅ Support for expanding/collapsing Pinia Store data structures with a single click ✅ One-click operation for all Stores ✅ Expand/collapse operations for specific Store nodes (with hover interaction) ✅ Pinia Store key-value pair retrieval (at the top of Store panel) ✅ Enhanced UX compared to Components Tree management

🔧 Technical Implementation

Core Files Modified:

• packages/applet/src/modules/pinia/components/store/Index. vue - Main store panel logic
• packages/applet/src/components/tree/TreeViewer.vue - Tree hover interactions
• packages/applet/src/components/state/ChildStateViewer.vue
• State viewer enhancements

Key Features:

• Context-Aware Expansion: Maintains separate expansion contexts for tree and state
• Search Integration: Seamless integration with existing search functionality
• Performance Optimized: Efficient node traversal and state management
• Accessibility: Proper tooltips and keyboard navigation support

🧪 Testing

The implementation has been thoroughly tested with:

• Simple and complex nested store structures
• Deep object hierarchies (up to 30 levels)
• Array and object combinations
• Search functionality with auto-expansion
• Hover interactions and visual feedback

📸 Visual Demo

The functionality can be tested by:

1. Opening Vue DevTools Pinia panel
2. Using expand/collapse buttons in panel headers
3. Hovering over tree nodes to see quick actions
4. Searching to trigger auto-expansion
5. Testing with deeply nested store data

🎉 Result

This implementation provides the exact functionality requested in issue #467, offering users intuitive and efficient ways to navigate complex Pinia store structures, significantly improving the development experience when working with large state trees.

Closes #467

[netlify[bot]]

✅ Deploy Preview for vue-devtools-docs canceled.

Name	Link
🔨 Latest commit	bdf7340219878df7772e51b5b377a53230ad8422
🔍 Latest deploy log	https://app.netlify.com/projects/vue-devtools-docs/deploys/68dd2dd27557ef00082b2aae