在卡片组件中应使用具名插槽实现图标与标题的分发渲染：定义<slot name="icon">和<slot name="title">两个插槽，支持父组件精准注入结构化内容，并提供默认fallback及flex布局保障样式隔离与自适应。
用具名插槽划分图标和标题区域
子组件里不能只写一个 <slot></slot>，得分别定义两个带名字的插槽：
-
<slot name="icon"></slot>—— 专供插入图标（比如<svg>、<i class="icon-home"></i>或自定义 icon 组件） -
<slot name="title"></slot>—— 专供插入标题（支持文本、带样式的<h2>、甚至带响应式逻辑的表达式）
这两个插槽可以并列放在卡片头部区域，样式上各自独立定位，比如图标左对齐、标题居中或紧邻图标右侧。
父组件按需注入，不依赖 props 传字符串
不用再通过 iconName 或 titleText 这类 prop 去控制显示什么——直接把结构交由父组件决定：
- 想用 SVG 图标？直接写
<template #icon><svg>...</svg></template> - 想让标题带 badge？写
<template #title><h3>设置<span class="badge">新</span></h3></template> - 想图标和标题联动（比如标题 hover 时图标变色）？把它们一起放进
#title插槽里，由父组件统一组织 DOM 结构
提供合理默认内容，兼顾可用性
每个具名插槽都可设 fallback，默认情况下不显眼但功能完整：
立即学习“前端免费学习笔记（深入）”；
-
<slot name="icon"><i class="default-icon"></i></slot>—— 渲染一个中性灰色小图标 -
<slot name="title">未命名卡片</slot>—— 显示简洁占位文本
这样即使父组件没传任何插槽内容，卡片也能正常显示基础信息，不会留白或报错。
样式隔离与布局建议
卡片头部容器建议用 flex 布局，给图标和标题插槽分配明确的 flex 项：
- 图标插槽设
flex-shrink: 0防止被压缩 - 标题插槽设
flex: 1占满剩余空间，支持文本换行或 ellipsis - 用
gap控制两者间距，避免硬编码 margin
这样无论父组件传入的是纯文本、复杂元素还是空内容，布局都能稳定撑开或自动收缩。
