{"type":"entity","name":"shihuashishuo-ui Refactoring Pattern: Container-List-Card","entityType":"ArchitecturalPattern","observations":["For complex list views with multiple item types, the preferred refactoring pattern is a three-tier structure: Container (View), List, and Card.","The Container component manages state, logic, and layout.","List components receive data arrays and are responsible for looping and rendering Card components.","Card components are atomic, purely presentational, and receive a single data object as a prop.","This pattern was successfully applied to refactor SearchResultView.vue."]}
{"type":"entity","name":"Refactoring Strategy: Bottom-Up Implementation","entityType":"DevelopmentProcess","observations":["When refactoring a large component into smaller ones, a 'bottom-up' strategy is effective and low-risk.","This involves building and verifying the most atomic components (e.g., Cards) first, then composing them into larger components (e.g., Lists), and finally integrating them into the main view.","This approach ensures each layer is built on a solid foundation."]}
{"type":"entity","name":"TypeScript Rule: verbatimModuleSyntax","entityType":"TechnicalDetail","observations":["When the 'verbatimModuleSyntax' rule is enabled in tsconfig, any import used only for type annotations must be imported using 'import type'.","Example: 'import type { Component } from 'vue';'.","Failure to do so will result in a compilation error."]}