@manohub/ui 0.10.4 → 1.0.0

package/dist/styles/components/card.css

@@ -1,198 +1,198 @@
-/**
- * Card（卡片容器：底 / 弱描边 / 圆角 / 内距 / 悬浮与选中反馈）—— **卡片外观的唯一实现**。
- *
- * 依据：@aihub/theme 的 components/card.css（圆角 8 · 内距 20 · 弱描边）+ portal 技能市场卡片实测，见下方原注释。
- */
-
-/* ===== Card（卡片容器：底 / 弱描边 / 圆角 / 内距 / 悬浮与选中反馈）=====
-   几何来源：portal 技能市场卡片实测（apps/portal/src/views/skills/index.tsx 的 SkillCard），
-   逐项落令牌：圆角 8（原型 rounded-lg）、内距 20（原型 p-5）、
-   底 Ne12/base-100、弱描边 base-300（原型 border-border）、
-   悬浮主色描边 + 主色 12% 阴影（原型 hover:border-primary + hover:shadow-[0_4px_10px_…]）。
-   卡片外观在本仓**只有这一处定义**：消费方（含 ListView.CardItem）不得自绘这四类属性。 */
-
-.mh-card {
-  /* 组件变量先铺一层，形态类只决定用哪几个（同 .mh-badge 手法） */
-  --mh-card-bg: var(--ui-base-100);
-  --mh-card-border: var(--ui-base-300);
-  --mh-card-radius: var(--ui-radius-md);
-  /* 卡片内距：**吃在各段上**（根件不出内距），故用同一个变量下发给分件与内建头 / 操作行 ——
-     整卡统一改它即可，单段微调传该段的 `padding` */
-  --mh-card-padding: var(--ui-space-5);
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var(--mh-card-border);
-  border-radius: var(--mh-card-radius);
-  background: var(--mh-card-bg);
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-
-/* ===== 内距归属（改这几条规则前务必先读）=====
- *
- * 1. **根件不出内距**：根件只出面（底 / 描边 / 圆角），也不出段间距 ——
- *    根件若也吃内距，就会与段的内距叠成两层留白（故面无「根件让出内距」的修饰类）。
- * 2. **段的纵向只吃上边**（`padding-block-start`）：一段只负责**与自己上方之间的距离**，
- *    下一段的上内距就是「段间距」。于是头部 + body、body + footer 相邻时**不会**叠成两份
- *    （各吃四边就会变成 20 + 20 = 40，这正是要避免的）。
- * 3. **卡片下沿由最后一段补**（下方那条 `:last-child` 规则）：段不吃下边，底边得有人兜。
- *    段的位置由组件保证（裸内容自动成段、封面不吃内距也不是段），故 `:last-child` 必定落在段上。
- * 4. 横向每段恒吃 `--mh-card-padding`（`padding-inline`）。
- *
- * ⚠️ 以上 2 / 3 / 4 是**不给 `padding` 时的缺省口径**。分件一旦显式传了 `padding`，
- * 组件就落行内样式（`{ y, x }` 两维都给时是 `padding: y x` 简写），**整段四边由消费方定价** ——
- * 行内样式盖过这里的类规则，`:last-child` 那条下沿兜底也随之失效（这是有意的：消费方显式给了就说得清）。
- * 要保留兜底就不要给那一段传 `padding`。
- *
- * 直接写的内容（没包 `Card.Body` 的裸子节点）由组件自动补一层 Body，所以
- * 「不给分件」（`<Card>正文</Card>`）与显式分段得到的是同一套几何。 */
-
-/* 头部：**分件 `Card.Header` 与 `Card` 上的内建头共用这一类**（四件：图标 / 标题 / 副标题 + 右端 extra）。
-   行 + 两端对齐：左「左侧区域」、右「extra」；四个位一个都不给时退化为纯自排容器。 */
-
-.mh-card__header {
-  display: flex;
-  flex: none;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--ui-space-2);
-  min-width: 0;
-  padding-block-start: var(--mh-card-padding);
-  padding-inline: var(--mh-card-padding);
-}
-
-/* 左侧区域：图标 + 文字块（标题 / 副标题）+ 自排内容 */
-
-.mh-card__header-main {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  gap: var(--ui-space-3);
-  min-width: 0;
-}
-
-/* 图标位 36×36（与 ListView.CardItem 同一档），圆角取控件档 6；图片按方框自裁 */
-
-.mh-card__header-icon {
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  overflow: hidden;
-  border-radius: var(--ui-radius-control);
-}
-
-.mh-card__header-icon-img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-/* 文字块：标题在上、副标题在下（两行都单行省略） */
-
-.mh-card__header-text {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ui-space-1);
-  min-width: 0;
-}
-
-.mh-card__header-title {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: var(--ui-font-heading);
-  line-height: var(--ui-line-heading);
-  font-weight: var(--ui-weight-medium);
-  color: var(--ui-base-content);
-}
-
-.mh-card__header-subtitle {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: var(--ui-font-caption);
-  line-height: var(--ui-line-caption);
-  color: var(--ui-base-content-muted);
-}
-
-/* 右端：状态胶囊 / 行内按钮 / 统计（不抢左侧宽度） */
-
-.mh-card__header-extra {
-  flex: none;
-  font-size: var(--ui-font-caption);
-  color: var(--ui-base-content-muted);
-}
-
-.mh-card__body {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  /* 卡内纵向间距 16（原型 gap-4）：内容段落的节奏原来由根件的 gap 给，内距下放到段后归这里 */
-  gap: var(--ui-space-4);
-  min-width: 0;
-  min-height: 0;
-  padding-block-start: var(--mh-card-padding);
-  padding-inline: var(--mh-card-padding);
-}
-
-/* 尾部贴卡片底部：卡片被拉伸（网格等高 / min-height）时尾部不悬空 */
-
-.mh-card__footer {
-  display: flex;
-  flex: none;
-  flex-direction: column;
-  gap: var(--ui-space-2);
-  min-width: 0;
-  margin-top: auto;
-  padding-block-start: var(--mh-card-padding);
-  padding-inline: var(--mh-card-padding);
-}
-
-/* 卡片下沿：不给 `padding` 时纵向只吃上边（见上），底边由**最后一段**补，否则内容贴卡片边。
-   （传了 `padding` 的段由行内样式接管，这里的兜底对那一段不再生效。） */
-
-.mh-card > .mh-card__header:last-child,
-.mh-card > .mh-card__body:last-child,
-.mh-card > .mh-card__footer:last-child,
-.mh-card > .mh-card__actions:last-child {
-  padding-block-end: var(--mh-card-padding);
-}
-
-.mh-card--plain {
-  border-color: transparent;
-}
-
-.mh-card--interactive {
-  cursor: pointer;
-}
-
-.mh-card--interactive:hover {
-  border-color: var(--ui-primary);
-  box-shadow: var(--ui-shadow-card-hover);
-}
-
-.mh-card--selected {
-  border-color: var(--ui-primary);
-  background: var(--ui-primary-subtle);
-}
-
-.mh-card--disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-/* ===== 底部操作行（与段同族，头部那一类的规则见上）=====
- * 内距与段同口径：各吃一份段内距，`margin-top: auto` 贴卡片底部。 */
-.mh-card__actions {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-2);
-  margin-top: auto;
-  padding-block-start: var(--mh-card-padding);
-  padding-inline: var(--mh-card-padding);
-}
+/**
+ * Card（卡片容器：底 / 弱描边 / 圆角 / 内距 / 悬浮与选中反馈）—— **卡片外观的唯一实现**。
+ *
+ * 依据：@aihub/theme 的 components/card.css（圆角 8 · 内距 20 · 弱描边）+ portal 技能市场卡片实测，见下方原注释。
+ */
+
+/* ===== Card（卡片容器：底 / 弱描边 / 圆角 / 内距 / 悬浮与选中反馈）=====
+   几何来源：portal 技能市场卡片实测（apps/portal/src/views/skills/index.tsx 的 SkillCard），
+   逐项落令牌：圆角 8（原型 rounded-lg）、内距 20（原型 p-5）、
+   底 Ne12/base-100、弱描边 base-300（原型 border-border）、
+   悬浮主色描边 + 主色 12% 阴影（原型 hover:border-primary + hover:shadow-[0_4px_10px_…]）。
+   卡片外观在本仓**只有这一处定义**：消费方（含 ListView.CardItem）不得自绘这四类属性。 */
+
+.mh-card {
+  /* 组件变量先铺一层，形态类只决定用哪几个（同 .mh-badge 手法） */
+  --mh-card-bg: var(--ui-base-100);
+  --mh-card-border: var(--ui-base-300);
+  --mh-card-radius: var(--ui-radius-md);
+  /* 卡片内距：**吃在各段上**（根件不出内距），故用同一个变量下发给分件与内建头 / 操作行 ——
+     整卡统一改它即可，单段微调传该段的 `padding` */
+  --mh-card-padding: var(--ui-space-5);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--mh-card-border);
+  border-radius: var(--mh-card-radius);
+  background: var(--mh-card-bg);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+/* ===== 内距归属（改这几条规则前务必先读）=====
+ *
+ * 1. **根件不出内距**：根件只出面（底 / 描边 / 圆角），也不出段间距 ——
+ *    根件若也吃内距，就会与段的内距叠成两层留白（故面无「根件让出内距」的修饰类）。
+ * 2. **段的纵向只吃上边**（`padding-block-start`）：一段只负责**与自己上方之间的距离**，
+ *    下一段的上内距就是「段间距」。于是头部 + body、body + footer 相邻时**不会**叠成两份
+ *    （各吃四边就会变成 20 + 20 = 40，这正是要避免的）。
+ * 3. **卡片下沿由最后一段补**（下方那条 `:last-child` 规则）：段不吃下边，底边得有人兜。
+ *    段的位置由组件保证（裸内容自动成段、封面不吃内距也不是段），故 `:last-child` 必定落在段上。
+ * 4. 横向每段恒吃 `--mh-card-padding`（`padding-inline`）。
+ *
+ * ⚠️ 以上 2 / 3 / 4 是**不给 `padding` 时的缺省口径**。分件一旦显式传了 `padding`，
+ * 组件就落行内样式（`{ y, x }` 两维都给时是 `padding: y x` 简写），**整段四边由消费方定价** ——
+ * 行内样式盖过这里的类规则，`:last-child` 那条下沿兜底也随之失效（这是有意的：消费方显式给了就说得清）。
+ * 要保留兜底就不要给那一段传 `padding`。
+ *
+ * 直接写的内容（没包 `Card.Body` 的裸子节点）由组件自动补一层 Body，所以
+ * 「不给分件」（`<Card>正文</Card>`）与显式分段得到的是同一套几何。 */
+
+/* 头部：**分件 `Card.Header` 与 `Card` 上的内建头共用这一类**（四件：图标 / 标题 / 副标题 + 右端 extra）。
+   行 + 两端对齐：左「左侧区域」、右「extra」；四个位一个都不给时退化为纯自排容器。 */
+
+.mh-card__header {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ui-space-2);
+  min-width: 0;
+  padding-block-start: var(--mh-card-padding);
+  padding-inline: var(--mh-card-padding);
+}
+
+/* 左侧区域：图标 + 文字块（标题 / 副标题）+ 自排内容 */
+
+.mh-card__header-main {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: var(--ui-space-3);
+  min-width: 0;
+}
+
+/* 图标位 36×36（与 ListView.CardItem 同一档），圆角取控件档 6；图片按方框自裁 */
+
+.mh-card__header-icon {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  overflow: hidden;
+  border-radius: var(--ui-radius-control);
+}
+
+.mh-card__header-icon-img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* 文字块：标题在上、副标题在下（两行都单行省略） */
+
+.mh-card__header-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-1);
+  min-width: 0;
+}
+
+.mh-card__header-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--ui-font-heading);
+  line-height: var(--ui-line-heading);
+  font-weight: var(--ui-weight-medium);
+  color: var(--ui-base-content);
+}
+
+.mh-card__header-subtitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--ui-font-caption);
+  line-height: var(--ui-line-caption);
+  color: var(--ui-base-content-muted);
+}
+
+/* 右端：状态胶囊 / 行内按钮 / 统计（不抢左侧宽度） */
+
+.mh-card__header-extra {
+  flex: none;
+  font-size: var(--ui-font-caption);
+  color: var(--ui-base-content-muted);
+}
+
+.mh-card__body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  /* 卡内纵向间距 16（原型 gap-4）：内容段落的节奏原来由根件的 gap 给，内距下放到段后归这里 */
+  gap: var(--ui-space-4);
+  min-width: 0;
+  min-height: 0;
+  padding-block-start: var(--mh-card-padding);
+  padding-inline: var(--mh-card-padding);
+}
+
+/* 尾部贴卡片底部：卡片被拉伸（网格等高 / min-height）时尾部不悬空 */
+
+.mh-card__footer {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  gap: var(--ui-space-2);
+  min-width: 0;
+  margin-top: auto;
+  padding-block-start: var(--mh-card-padding);
+  padding-inline: var(--mh-card-padding);
+}
+
+/* 卡片下沿：不给 `padding` 时纵向只吃上边（见上），底边由**最后一段**补，否则内容贴卡片边。
+   （传了 `padding` 的段由行内样式接管，这里的兜底对那一段不再生效。） */
+
+.mh-card > .mh-card__header:last-child,
+.mh-card > .mh-card__body:last-child,
+.mh-card > .mh-card__footer:last-child,
+.mh-card > .mh-card__actions:last-child {
+  padding-block-end: var(--mh-card-padding);
+}
+
+.mh-card--plain {
+  border-color: transparent;
+}
+
+.mh-card--interactive {
+  cursor: pointer;
+}
+
+.mh-card--interactive:hover {
+  border-color: var(--ui-primary);
+  box-shadow: var(--ui-shadow-card-hover);
+}
+
+.mh-card--selected {
+  border-color: var(--ui-primary);
+  background: var(--ui-primary-subtle);
+}
+
+.mh-card--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* ===== 底部操作行（与段同族，头部那一类的规则见上）=====
+ * 内距与段同口径：各吃一份段内距，`margin-top: auto` 贴卡片底部。 */
+.mh-card__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  margin-top: auto;
+  padding-block-start: var(--mh-card-padding);
+  padding-inline: var(--mh-card-padding);
+}