01

设计系统

核心思路是隔离：所有样式作用域到 .prismglass， 组件类用 .prismglass .btn 这样的高优先级选择器覆盖站点全局同名类， 元素级规则则用 :where() 降权，避免污染评论组件等第三方样式。

:root {
  --bg-deep: #0b1020;
  --glass-medium: rgba(255, 255, 255, 0.06);
  --accent-cyan: #22d3ee;
  --z-sticky: 200;
}
"设计系统的价值在于复用，复用的前提是隔离——改一处而不影响他处。"
02

组件拆分

按照原 HTML 的区块边界拆成 20 个组件：基础组件负责视觉（按钮、卡片、徽章）， 交互组件负责行为（弹窗、提示、进度条），全部通过 props 暴露配置项。

  • 基础组件：GlassPanel / Button / Badge / Card / InputField / GlassTable / Navbar……
  • 交互组件：Modal / Toast / Tooltip / Dropdown / Progress / Spinner……
  • 运行时：PrismGlassRuntime（事件委托，单例保护）
GlassPanel Button Modal Toast
03

交互运行时

页面上不需要手写任何 JS：打开弹窗、弹 toast、切换下拉都靠 data-pg-* 属性声明，运行时在 document 上做一次事件委托即可。

import PrismGlassLayout from '../../layouts/PrismGlassLayout.astro';
import Button from '../../components/PrismGlass/Button.astro';

<!-- 交互靠 data-pg-* 属性驱动，无需写 JS -->
<Button data-pg-open="demoModal">打开弹窗</Button>