@open-feishu-card/renderer 0.1.1 → 0.2.0

package/dist/styles.css

@@ -25,6 +25,167 @@
   max-width: 605px;
   box-sizing: border-box;
   box-shadow: 0 4px 14px rgba(31, 35, 41, 0.08);
+  /* BEGIN PALETTE VARS (auto-generated from constants.ts PALETTE) */
+  /* 正文 color:var(--O400) 等依赖这些变量；与飞书 :root light 色阶对齐 */
+  --B50: #f0f4ff;
+  --B100: #e0e9ff;
+  --B200: #c2d4ff;
+  --B300: #94b4ff;
+  --B350: #7aa2ff;
+  --B400: #5083fb;
+  --B500: #336df4;
+  --B600: #1456f0;
+  --B700: #0442d2;
+  --B800: #002f9e;
+  --B900: #002270;
+  --C50: #fef0f8;
+  --C100: #fee2f2;
+  --C200: #f8c4e1;
+  --C300: #f598cc;
+  --C350: #eb78b8;
+  --C400: #df58a5;
+  --C500: #cc398c;
+  --C600: #b82879;
+  --C700: #9d1562;
+  --C800: #730744;
+  --C900: #550c35;
+  --G50: #e4fae1;
+  --G100: #d0f5ce;
+  --G200: #95e599;
+  --G300: #5cd168;
+  --G350: #35bd4b;
+  --G400: #32a645;
+  --G500: #258832;
+  --G600: #1a7526;
+  --G700: #0b6017;
+  --G800: #04430c;
+  --G900: #022c07;
+  --I50: #f2f3fd;
+  --I100: #e9eafb;
+  --I200: #cccff9;
+  --I300: #abb0f2;
+  --I350: #959bee;
+  --I400: #757df0;
+  --I500: #5b65f5;
+  --I600: #4752e6;
+  --I700: #333dcc;
+  --I800: #1e27a4;
+  --I900: #151b70;
+  --L50: #f2f8d3;
+  --L100: #e3f0a3;
+  --L200: #c8dd5f;
+  --L300: #a2c10b;
+  --L350: #91ad00;
+  --L400: #7b9207;
+  --L500: #6b7f06;
+  --L600: #5c6d08;
+  --L700: #4a5804;
+  --L800: #333d00;
+  --L900: #262e00;
+  --N00: #ffffff;
+  --N50: #f5f6f7;
+  --N100: #f2f3f5;
+  --N200: #eff0f1;
+  --N300: #dee0e3;
+  --N350: #d0d3d6;
+  --N400: #bbbfc4;
+  --N500: #8f959e;
+  --N600: #646a73;
+  --N650: #51565d;
+  --N700: #373c43;
+  --N800: #2b2f36;
+  --N900: #1f2329;
+  --N950: #0f1114;
+  --N1000: #000000;
+  --O50: #fff3e5;
+  --O100: #fee7cd;
+  --O200: #fec48b;
+  --O300: #ff9d4c;
+  --O350: #ff811a;
+  --O400: #ed6d0c;
+  --O500: #c25705;
+  --O600: #a44904;
+  --O700: #853a05;
+  --O800: #642b02;
+  --O900: #3b1a02;
+  --P50: #f5f0fe;
+  --P100: #efe6fe;
+  --P200: #dcc9fd;
+  --P300: #c8a9fc;
+  --P350: #b791fa;
+  --P400: #9f6ff1;
+  --P500: #8d55ed;
+  --P600: #7a35f0;
+  --P700: #611fd6;
+  --P800: #4811a6;
+  --P900: #2f0080;
+  --R50: #fef0f0;
+  --R100: #fee3e2;
+  --R200: #fdc6c4;
+  --R300: #f89e9b;
+  --R350: #ff7570;
+  --R400: #f54a45;
+  --R500: #e22e28;
+  --R600: #c02a26;
+  --R700: #a11c17;
+  --R800: #741915;
+  --R900: #590603;
+  --S50: #ffffdb;
+  --S100: #fffca3;
+  --S200: #fff67a;
+  --S300: #fff258;
+  --S350: #ffe928;
+  --S400: #e5ce00;
+  --S500: #c2a800;
+  --S600: #8f7c00;
+  --S700: #5c4f00;
+  --S800: #423700;
+  --S900: #2c2502;
+  --T50: #e2f8f5;
+  --T100: #c4f2ec;
+  --T200: #6fe8d8;
+  --T300: #33d6c0;
+  --T350: #2dbeab;
+  --T400: #10a893;
+  --T500: #0f8575;
+  --T600: #067062;
+  --T700: #045d51;
+  --T800: #03443b;
+  --T900: #02312a;
+  --V50: #fceefc;
+  --V100: #f9e2f9;
+  --V200: #f3c4f3;
+  --V300: #e59ce5;
+  --V350: #de81de;
+  --V400: #cf5ecf;
+  --V500: #bf3dbf;
+  --V600: #a630a6;
+  --V700: #872787;
+  --V800: #6a116a;
+  --V900: #520052;
+  --W50: #e7f8fe;
+  --W100: #caeffc;
+  --W200: #97dcfc;
+  --W300: #3ec3f7;
+  --W350: #25b0e7;
+  --W400: #1295ca;
+  --W500: #047fb0;
+  --W600: #076a94;
+  --W700: #0f587a;
+  --W800: #06415c;
+  --W900: #072b3d;
+  --Y50: #fbf4df;
+  --Y100: #faedc2;
+  --Y200: #fcdf7e;
+  --Y300: #fad355;
+  --Y350: #ffc60a;
+  --Y400: #d99904;
+  --Y500: #ad7a03;
+  --Y600: #865b03;
+  --Y700: #6f4a01;
+  --Y800: #573601;
+  --Y900: #382201;
+  /* END PALETTE VARS */
 }
 .universal-card-root *,
 .universal-card-root *::before,
@@ -43,8 +204,8 @@
   padding: 12px;
   background-repeat: no-repeat;
   background-position: 0 0;
-  /* 图宽=header宽，使纹理自身的左右暗边落在 header 两端、亮带居中 */
-  background-size: 100% 140px;
+  /* 对齐飞书：max(100%, 605px) 140px，窄卡不把高光拉稀 */
+  background-size: max(100%, 605px) 140px;
 }
 /* 内容行：左侧图标 + 右侧标题区（对齐网页版 header__content = row） */
 .universal-card-header__content {
@@ -141,7 +302,7 @@
   margin: 8px 0;
 }
 
-/* ---- div ---- */
+/* ---- div / note ---- */
 .universal-card-div > * + * { margin-top: 8px; }
 /* div 带前置图标：icon 在左、文本在右排成一行（复刻网页版 .universal-card-div 布局） */
 .universal-card-div--with-icon {
@@ -153,6 +314,10 @@
   display: flex; align-items: center; overflow: hidden;
 }
 .universal-card-div__content { flex: 1; min-width: 0; }
+.universal-card-note {
+  font-size: 12px;
+  color: #8f959e;
+}
 
 /* ---- 布局：column_set / column ---- */
 .universal-card-column-set { display: flex; }
@@ -312,6 +477,10 @@
   word-break: break-word;
   white-space: break-spaces;
 }
+/* textStyle.attributes → BEM 修饰类（对齐真机 bold/italic/through） */
+.universal-card-text--bold { font-weight: 600; }
+.universal-card-text--italic { font-style: italic; }
+.universal-card-text--through { text-decoration: line-through; }
 /* 勾选态：删除线 / 透明度由 :has(:checked) 驱动，本地切换无需 JS */
 .universal-card-checker--strike:has(.universal-card-checker__input:checked) .universal-card-checker__content {
   text-decoration-line: line-through;
@@ -383,8 +552,22 @@
 /* ---- 人员 person_v1 / person_list（对齐网页版 universal-card-person*）---- */
 .universal-card-person {
   display: inline-flex; align-items: center; width: auto; max-width: 100%;
+}
+/* 有头像：网页版就是 vertical-align:bottom。middle 按拉丁 x-height 居中，
+ * 中文行里整盒（头像 18 + 姓名 22）会视觉偏下。
+ * 仅姓名：跟正文基线对齐，不要 bottom/middle。 */
+.universal-card-markdown .universal-card-person--avatar,
+.universal-card-person--avatar {
   vertical-align: bottom;
 }
+.universal-card-markdown .universal-card-person:not(.universal-card-person--avatar) {
+  vertical-align: baseline;
+  align-items: baseline;
+}
+.universal-card-markdown .universal-card-person:not(.universal-card-person--avatar) .universal-card-person__content,
+.universal-card-markdown .universal-card-person:not(.universal-card-person--avatar) .universal-card-person__name {
+  align-items: baseline;
+}
 .universal-card-person__content {
   display: flex; align-items: center; max-width: 100%; cursor: default;
 }
@@ -410,9 +593,11 @@
   display: inline-flex; align-items: center; min-width: 0;
   color: #1f2329; max-width: 100%;
 }
+/* 真机 --line-1 是 block + nowrap，不是 -webkit-box clamp；
+ * clamp 会破坏 inline-flex 基线，姓名在正文里看起来靠下。 */
 .universal-card-person__name .universal-card-text--line-1 {
-  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
-  overflow: hidden; word-break: break-all;
+  display: block; white-space: nowrap;
+  overflow: hidden; text-overflow: ellipsis;
 }
 .universal-card-person .universal-card-text { line-height: inherit; }
 
@@ -517,6 +702,225 @@
   vertical-align: -0.125em;
 }
 
+/* ---- video 视频 ---- */
+/* 对齐飞书 .universal-card-video：有 src 时原生 <video controls>；无 src 时封面 + 播放钮。 */
+.universal-card-video {
+  position: relative;
+  display: block;
+  width: 100%;
+  min-width: 96px;
+  min-height: 54px;
+  aspect-ratio: 16 / 9;
+  background-color: rgba(0, 0, 0, 0.8);
+  overflow: hidden;
+  cursor: default;
+  border-radius: 4px;
+  object-fit: contain;
+  box-sizing: border-box;
+}
+.universal-card-video__cover {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.universal-card-video__host-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.universal-card-video__default-cover {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #2b2f36 0%, #1f2329 100%);
+}
+.universal-card-video__play-btn {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 40px;
+  height: 40px;
+  margin: -20px 0 0 -20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  font-size: 18px;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.4);
+  box-sizing: border-box;
+  pointer-events: none;
+}
+.universal-card-video__duration {
+  position: absolute;
+  bottom: 6px;
+  right: 6px;
+  padding: 0 4px;
+  height: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 10px;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.55);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  user-select: none;
+  box-sizing: border-box;
+}
+
+/* ---- audio 音频 ---- */
+/* 对齐飞书 .universal-card-audio__*：自定义播放条，非原生 controls。
+ * 顶层 audio = 块级圆角条；markdown_audio = --inline 胶囊（padding/圆角/扁平图标不同）。 */
+.universal-card-audio__wrapper {
+  position: relative;
+  align-self: flex-start;
+  background: var(--universal-card-audio-bg, #f5f6f7);
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  border: 1px solid #dee0e3;
+  border-radius: 8px;
+  padding: 12px;
+  box-sizing: border-box;
+  max-width: 100%;
+}
+.universal-card-audio__wrapper--disabled {
+  background: #eff0f1;
+  cursor: default;
+  opacity: 0.7;
+}
+.universal-card-audio__wrapper:hover:not(.universal-card-audio__wrapper--disabled) {
+  background: var(--universal-card-audio-hover-bg, var(--universal-card-audio-bg, #eff0f1));
+}
+/* markdown 内嵌：行内容胶囊（真机 --inline） */
+.universal-card-audio__wrapper--inline {
+  display: inline-flex;
+  margin: 0 3px;
+  padding: 4px 7px;
+  border-radius: 30px;
+}
+.universal-card-audio__native {
+  display: none;
+}
+.universal-card-audio__component {
+  max-width: 100%;
+  position: relative;
+}
+.universal-card-audio__control {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  column-gap: 12px;
+  box-sizing: border-box;
+  user-select: none;
+  color: #8f959e;
+}
+.universal-card-audio__wrapper--inline .universal-card-audio__control {
+  position: relative;
+  column-gap: 0;
+  padding-left: calc(var(--universal-card-audio-icon-size, 0) + 2px);
+  height: var(--universal-card-audio-icon-size, 16px);
+}
+.universal-card-audio__ctrl {
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: var(--universal-card-audio-icon-size, 20px);
+  height: var(--universal-card-audio-icon-size, 20px);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--universal-card-audio-fill-color, #1f2329);
+}
+.universal-card-audio__wrapper--inline .universal-card-audio__ctrl {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.universal-card-audio__ctrl-icon {
+  font-size: var(--universal-card-audio-icon-size, 20px);
+  line-height: 1;
+  display: inline-flex;
+  color: inherit;
+  position: relative;
+}
+.universal-card-audio__wrapper--inline .universal-card-audio__ctrl-icon {
+  left: 8%;
+  transform: scale(0.85);
+}
+.universal-card-audio__icon {
+  display: inline-flex;
+  color: inherit;
+}
+.universal-card-audio__icon--pause { display: none; }
+/* 播放中：隐藏播放钮、显示暂停钮（由 hydrate 给 wrapper 加 --playing） */
+.universal-card-audio__wrapper--playing .universal-card-audio__icon--play { display: none; }
+.universal-card-audio__wrapper--playing .universal-card-audio__icon--pause { display: inline-flex; }
+.universal-card-audio__ctrl-icon svg,
+.universal-card-audio__icon svg {
+  display: block;
+  width: 1em;
+  height: 1em;
+}
+.universal-card-audio__slider {
+  position: relative;
+  flex-grow: 1;
+  min-width: 32px;
+  height: 6px;
+  cursor: pointer;
+}
+.universal-card-audio__slider-bg {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  height: 1px;
+  background-color: rgba(31, 35, 41, 0.3);
+  margin-top: -1px;
+  width: 100%;
+}
+.universal-card-audio__process {
+  background-color: var(--universal-card-audio-fill-color, #1f2329);
+  width: 0;
+  height: 100%;
+  left: 0;
+}
+.universal-card-audio__slider-strip {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  margin-top: -8px;
+  margin-left: -8px;
+  border-radius: 8px;
+  box-sizing: border-box;
+  background-color: #fff;
+  top: 50%;
+  left: 0;
+  cursor: pointer;
+  box-shadow: 0 0 8px 0 rgba(31, 35, 41, 0.16);
+  transform: scale(0.5);
+  transition: transform 0.3s ease;
+}
+.universal-card-audio__wrapper:hover:not(.universal-card-audio__wrapper--disabled) .universal-card-audio__slider-strip {
+  transform: scale(1);
+}
+.universal-card-audio__time {
+  color: var(--universal-card-audio-fill-color, #1f2329);
+  position: relative;
+  width: 38px;
+  flex-grow: 0;
+  flex-shrink: 0;
+  font-size: var(--universal-card-audio-time-font-size, 12px);
+  font-weight: 500;
+  text-align: center;
+}
+.universal-card-audio__wrapper--inline .universal-card-audio__time {
+  width: calc(var(--universal-card-audio-time-font-size, 12px) * 3);
+}
+
 /* ---- chart 图表 ---- */
 /* 挂载容器：aspect-ratio / height 由内联 style 给（来自 aspect_ratio）。
    VChart 水合后会往 __vchart 里塞 <canvas>；水合前显示 loading 占位。 */
@@ -603,3 +1007,4 @@
 }
 .universal-card-root.theme-dark .universal-card-markdown { color: #d6d6d6; }
 .universal-card-root.theme-dark .universal-card-hr { background-color: #2e2e30; }
+.universal-card-root.theme-dark .universal-card-note { color: #8a8a8a; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-feishu-card/renderer",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "零框架依赖的飞书卡片渲染引擎：Web / DOM / SSR，输入 RAW 或公开 DSL，输出真实 DOM 或 HTML 字符串",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -28,7 +28,7 @@
     "./dist/*.cjs"
   ],
   "dependencies": {
-    "@open-feishu-card/adapter": "0.1.1"
+    "@open-feishu-card/adapter": "0.2.0"
   },
   "devDependencies": {
     "tsup": "^8.3.5",
@@ -45,8 +45,8 @@
     "directory": "packages/renderer"
   },
   "scripts": {
-    "build": "tsup",
+    "build": "node scripts/gen-base-styles.mjs && tsup",
     "typecheck": "tsc --noEmit -p tsconfig.json",
-    "test": "node --test test/*.test.mjs"
+    "test": "node --test \"test/**/*.test.mjs\""
   }
 }