koishi-plugin-ll-bns-fortune 0.2.3 → 0.3.0

package/lib/data.js

@@ -90,26 +90,38 @@ export const DEFAULT_MAPS = [
 /**
  * 排版模板：{xxx} 会被替换成实际内容。
  *
- * 行首可以加的标记：
+ * 行首可以加的标记（可以叠加，顺序随意）：
  *   [left] / [center]   指定这一行的对齐方式（默认跟随 panel.align）
  *   [size=0.85]         指定这一行的字号倍率（默认 1）
+ *   [card]              这一行当「卡头」渲染：
+ *                       左边画一个圆角徽章（字与颜色见「卡片样式」设置），
+ *                       标题排在徽章右侧，下面画一条分隔线
  *
  * 字号层级（size 标记 = 相对整体字号的倍率）：
  *   五角星  —— 由 panel.starSize 单独控制
- *   标题行  0.86 —— 比正文大一点，作为抬头
- *   正文    0.74 —— 比标题小，避免抢戏
- * 所以整体字号（panel.charsPerLine 决定的那个）应当按「最大的一行」去调。
+ *   抬头    0.82 —— 「今日运势指数为」这类说明
+ *   卡头    1.0  —— 宜 / 忌 / 地图 的标题，最大
+ *   说明    0.72 —— 卡头下面的小字
  */
 export const DEFAULT_FORMAT = [
-  '[center][size=0.86]您今日的运势指数为：',
+  '[center][size=0.82]您今日的运势指数为：',
   '[center]{stars}',
-  '[size=0.74]今日幸运频道：{channel}',
-  '[size=0.74]宜{good}：{goodText}',
-  '[size=0.74]忌{bad}：{badText}',
-  '[size=0.74]今日最佳玄学地图是：{map}',
-  '[size=0.74]{mapText}',
+  '[card]{good}',
+  '[size=0.72]{goodText}',
+  '[card]{bad}',
+  '[size=0.72]{badText}',
+  '[card]地图 {map}',
+  '[size=0.72]{mapText}',
 ].join('\n')
 
+/** 卡片徽章的默认字与颜色（设置页里「卡片样式」可覆盖） */
+export const DEFAULT_CARDS = {
+  good: { badge: '宜', color: '#2E7D6B' },
+  bad: { badge: '忌', color: '#3E4A5A' },
+  map: { badge: '图', color: '#8C5A2B' },
+  summary: { badge: '', color: '#C8434F' },
+}
+
 /** 地图下面的那句补充说明。留空则模板里的 {mapText} 一行自动省略 */
 export const DEFAULT_MAP_TEXT = ''
 

package/lib/index.js

@@ -62,7 +62,7 @@ function assetPath (name) {
   return candidates[0]
 }
 
-const DEFAULT_BG = assetPath('bg.png')
+const DEFAULT_BG = assetPath('bg-panel.png')
 
 /* ------------------------------------------------------------------ *
  * 配置
@@ -73,7 +73,7 @@ const panelSchema = Schema.object({
     Schema.const('left').description('左对齐（和参考排版一致）'),
     Schema.const('center').description('居中'),
   ]).default('left').description('整体对齐方式。想单独控制某一行，可在模板行首写 [left]/[center]'),
-  charsPerLine: Schema.number().role('slider').min(6).max(40).step(1).default(14)
+  charsPerLine: Schema.number().role('slider').min(6).max(40).step(1).default(18)
     .description('字号大小：每行大约放几个字。<b>这是最常调的一项</b>，调小字更大'),
   blockFill: Schema.number().role('slider').min(1).max(1.5).step(0.01).default(1.08)
     .description('松紧度：1 = 撑满面板，调大四周留白更多（嫌挤就往大调）'),
@@ -86,12 +86,12 @@ const panelSchema = Schema.object({
 
   // ↓ 换底图才需要动，折叠起来
   geometry: Schema.object({
-    x: Schema.number().role('ratio').default(0.607).description('面板左边缘：占整图宽度的比例'),
-    y: Schema.number().role('ratio').default(0.180).description('面板上边缘：占整图高度的比例'),
-    w: Schema.number().role('ratio').default(0.312).description('面板宽度：占整图宽度的比例'),
-    h: Schema.number().role('ratio').default(0.668).description('面板高度：占整图高度的比例'),
-    paddingX: Schema.number().role('ratio').default(0.035).description('面板内左右留白：占面板宽度的比例'),
-    paddingY: Schema.number().role('ratio').default(0.035).description('面板内上下留白：占面板高度的比例'),
+    x: Schema.number().role('ratio').default(0.556).description('面板左边缘：占整图宽度的比例'),
+    y: Schema.number().role('ratio').default(0.163).description('面板上边缘：占整图高度的比例'),
+    w: Schema.number().role('ratio').default(0.375).description('面板宽度：占整图宽度的比例'),
+    h: Schema.number().role('ratio').default(0.697).description('面板高度：占整图高度的比例'),
+    paddingX: Schema.number().role('ratio').default(0.045).description('面板内左右留白：占面板宽度的比例'),
+    paddingY: Schema.number().role('ratio').default(0.05).description('面板内上下留白：占面板高度的比例'),
     measureRatio: Schema.number().min(0.5).max(1).step(0.01).default(0.98)
       .description('文字块最大宽度占面板宽度的比例'),
   }).collapse().description('面板位置（默认已按内置底图量好，换底图时才需要改）'),
@@ -106,6 +106,18 @@ const starColorsSchema = Schema.object({
     .description('未点亮星星的描边颜色，按顺序循环取用'),
 }).description('五角星配色')
 
+const cardThemeSchema = Schema.object({
+  badge: Schema.string().default('').description('徽章里的字（留空 = 只画一个空轮廓）'),
+  color: Schema.string().role('color').default('#3E4A5A').description('徽章颜色（分隔线也用这个色）'),
+}).description('单张卡片的样式')
+
+const cardSchema = Schema.object({
+  good: cardThemeSchema.default({ badge: '宜', color: '#2E7D6B' }).description('「宜」那一张'),
+  bad: cardThemeSchema.default({ badge: '忌', color: '#3E4A5A' }).description('「忌」那一张'),
+  map: cardThemeSchema.default({ badge: '图', color: '#8C5A2B' }).description('「地图」那一张'),
+  summary: cardThemeSchema.default({ badge: '', color: '#C8434F' }).description('「小结」那一张（模板里用 [card] 触发）'),
+}).description('卡片徽章与颜色。模板里给某一行加 [card] 就会按这里的样式渲染')
+
 const starWeightSchema = Schema.object({
   maxStars: Schema.number().role('slider').min(3).max(10).step(1).default(data.DEFAULT_MAX_STARS)
     .description('一共有几颗星（满星 = 这个数），改这里等于改满分'),
@@ -207,11 +219,12 @@ exports.Config = Schema.intersect([
     panel: panelSchema,
     colors: colorsSchema,
     starColors: starColorsSchema,
+    cards: cardSchema,
 
     renderAdvanced: Schema.object({
       background: Schema.string().role('textarea').default(DEFAULT_BG)
         .description('底图：支持 http(s) 直链、绝对路径、插件相对路径。留空则用内置底图'),
-      outputWidth: Schema.number().role('slider').min(0).max(2560).step(10).default(1280)
+      outputWidth: Schema.number().role('slider').min(0).max(2560).step(10).default(1520)
         .description('输出图片宽度（像素）。默认 1280 出图最快；想要更锐利的文字可调到 1920'),
       imageFormat: Schema.union([
         Schema.const('jpeg').description('JPEG（编码最快，推荐）'),
@@ -310,12 +323,16 @@ function adv (config) {
 
 function renderCfg (config) {
   return Object.assign({
-    background: DEFAULT_BG, outputWidth: 1280, imageFormat: 'jpeg', imageQuality: 92,
+    background: DEFAULT_BG, outputWidth: 1520, imageFormat: 'jpeg', imageQuality: 92,
     renderScale: 2, fallbackText: true, showPanelBackground: false, panelColor: '#F6E7DA',
     panelOpacity: 0, decorations: [], fontFamilies: renderer.defaultFamilies(),
   }, config && config.renderAdvanced)
 }
 
+function cardCfg (config) {
+  return Object.assign({}, data.DEFAULT_CARDS, config && config.cards)
+}
+
 function storageCfg (config) {
   return Object.assign({ databaseCache: true }, config && config.storage)
 }
@@ -330,8 +347,8 @@ function kwMore (config) {
 /** 面板几何（折叠组，缺省用内置底图量好的值） */
 function panelGeom (config) {
   return Object.assign({
-    x: 0.607, y: 0.180, w: 0.312, h: 0.668,
-    paddingX: 0.035, paddingY: 0.035, measureRatio: 0.98,
+    x: 0.556, y: 0.163, w: 0.375, h: 0.697,
+    paddingX: 0.06, paddingY: 0.05, measureRatio: 0.98,
   }, config && config.panel && config.panel.geometry)
 }
 
@@ -533,6 +550,7 @@ exports.apply = function apply (ctx, config) {
   // ⚠️ 必须定义在所有使用者之前：const 有暂时性死区，
   //    放到后面会在启动时直接抛 "Cannot access 'xxx' before initialization"。
   const geom = panelGeom(config)
+  const cardTheme = cardCfg(config)
   const render = renderCfg(config)
   const storage = storageCfg(config)
   const keywordMore = kwMore(config)
@@ -672,6 +690,7 @@ exports.apply = function apply (ctx, config) {
         starSpacing: Number(config.panel.starSpacing),
         starColors: (config.starColors && config.starColors.fill) || null,
         starEmptyColors: (config.starColors && config.starColors.empty) || null,
+        cards: cardTheme,
         outputWidth: Number(render.outputWidth) || 0,
         color: render.panelColor,
         opacity: render.showPanelBackground ? Number(render.panelOpacity) : 0,

package/lib/render.js

@@ -174,16 +174,46 @@ async function loadImageBuffer (ctx, target, relativeBase) {
 /** 这些占位符即使和上一行重复也不要删（否则整行都会消失） */
 const SINGLE_TOKEN_BLOCKLIST = ['stars', 'map', 'mapText', 'date', 'userId']
 
+/** 徽章尺寸 = 字号 × 这个比例（1.55 约等于参考图里的比例） */
+const CARD_BADGE_RATIO = 1.55
+
+/** 卡片主题默认值：徽章上的字 + 颜色。可在设置页覆盖 */
+const DEFAULT_CARDS = {
+  good: { badge: '宜', color: '#2E7D6B', titleColor: null },
+  bad: { badge: '忌', color: '#3E4A5A', titleColor: null },
+  map: { badge: '', color: '#B0306A', titleColor: null },
+  summary: { badge: '', color: '#C8434F', titleColor: null },
+}
+
+/** 根据这一行用的占位符，挑对应的卡片主题（徽章字/颜色） */
+function cardStyle (tokens, theme) {
+  const has = (k) => tokens.indexOf(k) !== -1
+  if (has('good') || has('goodText')) return Object.assign({}, DEFAULT_CARDS.good, theme.good)
+  if (has('bad') || has('badText')) return Object.assign({}, DEFAULT_CARDS.bad, theme.bad)
+  if (has('map')) return Object.assign({}, DEFAULT_CARDS.map, theme.map)
+  if (has('mapText')) return Object.assign({}, DEFAULT_CARDS.summary, theme.summary)
+  return Object.assign({}, DEFAULT_CARDS.summary, theme.summary)
+}
+
 /** 模板行首的对齐标记：'[left]xxx' / '[center]xxx'，中文「[左]」「[中]」也行 */
 const ALIGN_MARKER = /^\[(left|center|左|中)\]/i
 /** 行首的字号倍率标记：'[size=0.85]xxx'，让某一行比整体字号小一点 */
 const SIZE_MARKER = /^\[size\s*=\s*([\d.]+)\]/i
+/** 行首的卡片标记：'[card]xxx' —— 这一行当卡头渲染（圆角徽章 + 大标题 + 下划分隔线） */
+const CARD_MARKER = /^\[card\]/i
 
 function parseLineMarkers (line, fallbackAlign, fallbackSize) {
   let text = line
   let align = fallbackAlign
   let size = fallbackSize
-  for (let i = 0; i < 4; i++) {
+  let card = false
+  for (let i = 0; i < 5; i++) {
+    const cardMatched = text.match(CARD_MARKER)
+    if (cardMatched) {
+      card = true
+      text = text.slice(cardMatched[0].length)
+      continue
+    }
     const alignMatched = text.match(ALIGN_MARKER)
     if (alignMatched) {
       const raw = alignMatched[1].toLowerCase()
@@ -200,7 +230,45 @@ function parseLineMarkers (line, fallbackAlign, fallbackSize) {
     }
     break
   }
-  return { align, size, text }
+  return { align, size, card, text }
+}
+
+/**
+ * 画一个圆角方形徽章。
+ * text 为空时只画轮廓（无字徽章，用于「小结」那种）。
+ */
+function drawBadge (ctx, x, centerY, size, color, text, fontFamilyList) {
+  const radius = size * 0.28
+  const left = x
+  const top = centerY - size / 2
+  ctx.save()
+  ctx.beginPath()
+  ctx.moveTo(left + radius, top)
+  ctx.lineTo(left + size - radius, top)
+  ctx.quadraticCurveTo(left + size, top, left + size, top + radius)
+  ctx.lineTo(left + size, top + size - radius)
+  ctx.quadraticCurveTo(left + size, top + size, left + size - radius, top + size)
+  ctx.lineTo(left + radius, top + size)
+  ctx.quadraticCurveTo(left, top + size, left, top + size - radius)
+  ctx.lineTo(left, top + radius)
+  ctx.quadraticCurveTo(left, top, left + radius, top)
+  ctx.closePath()
+
+  if (text) {
+    ctx.fillStyle = color
+    ctx.fill()
+    ctx.fillStyle = '#FFFFFF'
+    ctx.font = buildFont(size * 0.56, 'bold', fontFamilyList)
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    ctx.fillText(text, left + size / 2, centerY + size * 0.03)
+    ctx.textAlign = 'left'
+  } else {
+    ctx.strokeStyle = color
+    ctx.lineWidth = Math.max(1, size * 0.1)
+    ctx.stroke()
+  }
+  ctx.restore()
 }
 
 /**
@@ -233,6 +301,7 @@ function detectLabelToken (segments) {
 function buildLines (template, values, colors, ratio, options) {
   const opts = options || {}
   const fallbackAlign = opts.align === 'center' ? 'center' : 'left'
+  const cardTheme = opts.cards || DEFAULT_CARDS
   const lines = []
   let lastToken = null
   let lastValue = null
@@ -304,6 +373,7 @@ function buildLines (template, values, colors, ratio, options) {
       size: marked.size,
       align: marked.align,
       isStars: tokens.length === 1 && tokens[0] === 'stars',
+      card: marked.card ? cardStyle(tokens, cardTheme) : null,
     })
   }
   return lines
@@ -591,6 +661,7 @@ async function renderFortune (ctx, options) {
 
   // 整图对齐方式：left（默认，和参考排版一致）/ center
   const align = panel.align === 'center' ? 'center' : 'left'
+  const cardTheme = Object.assign({}, DEFAULT_CARDS, panel.cards)
   const starOptions = {
     size: Number(panel.starSize) || 1.15,
     spacing: Number(panel.starSpacing) || 1.32,
@@ -613,9 +684,24 @@ async function renderFortune (ctx, options) {
   const buildAndMeasure = (fontSize) => {
     const laid = []
     let finalWidth = measureWidth
-    for (const line of buildLines(template, values, colors, 1, { align })) {
+    let lastCard = null
+    for (const line of buildLines(template, values, colors, 1, { align, cards: cardTheme })) {
       const spec = fontSize * (line.ratio || 1) * (line.size || 1)
 
+      // 卡头：左边留出徽章的位置，标题在其右侧起排
+      let indent = 0
+      let badge = null
+      if (line.card) {
+        const badgeSize = spec * CARD_BADGE_RATIO
+        indent = badgeSize + spec * 0.42
+        badge = {
+          size: badgeSize,
+          color: line.card.color,
+          text: line.card.badge || '',
+          dividerColor: line.card.divider || line.card.color,
+        }
+      }
+
       // 整行星：不排版文字，交给绘制阶段画彩色五角星
       if (line.isStars) {
         // 星星行必须自己兜住宽度：整行星不参与换行，字号再大也只会把星行撑出面板，
@@ -630,22 +716,27 @@ async function renderFortune (ctx, options) {
           height: sprite.h * 1.5,
           align: 'center',
           isStars: true,
+          badge: null,
+          indent: 0,
+          divider: false,
         })
+        lastCard = null
         continue
       }
 
-      let chunks = layoutParagraph(line, finalWidth, g, spec)
+      const lineWidth = Math.max(40, finalWidth - indent)
+      let chunks = layoutParagraph(line, lineWidth, g, spec)
 
       // 孤字控制：如果最后一行只剩一两个字，被硬挤下来会很难看，
       // 就把排版宽度一点点收窄，逼出更均衡的断行（最多试 25 次）
       if (chunks.length > 1) {
-        const natural = layoutParagraph(line, measureWidth, g, spec)
+        const natural = layoutParagraph(line, lineWidth, g, spec)
         const tail = natural[natural.length - 1].map(run => run.char).join('')
         if (tail.length <= 2 && natural.length <= 4) {
-          finalWidth = measureWidth
+          finalWidth = lineWidth
           for (let i = 0; i < 25; i++) {
-            finalWidth -= Math.max(1, measureWidth * 0.02)
-            if (finalWidth < measureWidth * 0.55) break
+            finalWidth -= Math.max(1, lineWidth * 0.02)
+            if (finalWidth < lineWidth * 0.55) break
             const attempt = layoutParagraph(line, finalWidth, g, spec)
             const attemptTail = attempt[attempt.length - 1].map(run => run.char).join('')
             if (attemptTail.length > 2 || attempt.length > natural.length + 1) {
@@ -657,6 +748,9 @@ async function renderFortune (ctx, options) {
         }
       }
 
+      // 卡头下方的分隔线：只在「接下来还有内容」时画，最后一段不画
+      const divider = !!(line.card && lastCard !== null)
+
       for (let i = 0; i < chunks.length; i++) {
         laid.push({
           runs: chunks[i],
@@ -665,23 +759,46 @@ async function renderFortune (ctx, options) {
           height: spec * lineHeightRatio,
           align: line.align,
           isStars: false,
+          badge: i === 0 ? badge : null,
+          indent,
+          divider: divider && i === 0,
         })
       }
+      lastCard = line.card ? true : null
     }
     const total = laid.reduce((sum, line) => sum + line.gap * fontSize + line.height, 0)
     return { lines: laid, total }
   }
 
   // 先按 baseFont 量一次，再二分放大。
-  // 上限给到 baseFont 的 2.4 倍：baseFont 是「每行几个字」的估算值，内容少的时候
-  // （比如宜忌没写详细文案）可以放得更大，把面板填得更饱满；放大会触发换行，
-  // 换行后总高会变，所以二分本身会收敛到一个合适的值。
+  // 两条约束同时生效：
+  //   ① 高度：撑满可用高度（内容少时字就大，填满面板）
+  //   ② 宽度：不许把「内容最长的那一行」撑到换行 —— 没有这条的话，
+  //      自动放大只看高度，长地图名会被硬挤成两行
   const MAX_FONT_SCALE = 2.4
-  // 只允许撑到可用高度的 97%：留一点余量，避免笔画降部顶到纸框上
   const FIT_LIMIT = 0.97
-  const unit = buildAndMeasure(baseFont)
-  let fontSize = baseFont
-  if (unit.total > 0 && unit.total < textHeight) {
+  const fitsWidth = (fs) => {
+    // 注意：不能量 buildAndMeasure 的结果 —— 那里已经按宽度换过行了，
+    // 每段必然「不超宽」，等于没检查。要量的是「这一行原始内容」的自然宽度。
+    for (const line of buildLines(template, values, colors, 1, { align, cards: cardTheme })) {
+      if (line.isStars) continue
+      const spec = fs * (line.ratio || 1) * (line.size || 1)
+      let natural = 0
+      for (const segment of line.segments) {
+        g.font = buildFont(spec * (segment.size || 1), segment.bold ? 'bold' : '', currentFamilies)
+        natural += g.measureText(segment.text).width
+      }
+      const indent = line.card ? spec * CARD_BADGE_RATIO + spec * 0.42 : 0
+      if (natural > Math.max(40, measureWidth - indent) + 0.5) return false
+    }
+    return true
+  }
+  const findFontSize = () => {
+    const unit = buildAndMeasure(baseFont)
+    if (unit.total <= 0) return baseFont
+    if (unit.total >= textHeight) {
+      return baseFont * Math.max(0.5, (textHeight * FIT_LIMIT) / unit.total)
+    }
     let low = 1
     let high = MAX_FONT_SCALE
     for (let i = 0; i < 14; i++) {
@@ -689,10 +806,15 @@ async function renderFortune (ctx, options) {
       if (buildAndMeasure(baseFont * mid).total <= textHeight * FIT_LIMIT) low = mid
       else high = mid
     }
-    fontSize = baseFont * low
-  } else if (unit.total > textHeight) {
-    fontSize = baseFont * Math.max(0.5, (textHeight * FIT_LIMIT) / unit.total)
+    let fs = baseFont * low
+    // 宽度回退：每次退 2%，最多退到 baseFont 的 45%
+    for (let i = 0; i < 30 && !fitsWidth(fs); i++) {
+      fs *= 0.98
+      if (fs < baseFont * 0.45) break
+    }
+    return fs
   }
+  const fontSize = findFontSize()
 
   const fitted = buildAndMeasure(fontSize)
   const lines = fitted.lines
@@ -708,12 +830,13 @@ async function renderFortune (ctx, options) {
     const rowCenter = cursorY + line.height / 2
     const lineWidth = line.runs.reduce((sum, run) => sum + run.w, 0)
 
-    // 对齐：center 居中（扣掉行尾整角标点占的空白），left 从面板左内侧起排
+    // 对齐：center 居中（扣掉行尾整角标点占的空白），left 从面板左内侧起排（卡头再缩进徽章宽度）
     const lineAlign = line.align === 'center' ? 'center' : align
     const trim = lineAlign === 'center' ? trailingPunctWidth(line.runs) : 0
+    const indent = line.indent || 0
     let x = lineAlign === 'center'
       ? panelRect.x + panelRect.w / 2 - (lineWidth - trim) / 2
-      : panelRect.x + paddingX
+      : panelRect.x + paddingX + indent
 
     if (line.isStars) {
       // 整行星：五角星在面板里居中（paintStarSprite 的 x 参数是第 1 颗星的左沿）
@@ -724,6 +847,12 @@ async function renderFortune (ctx, options) {
       continue
     }
 
+    // 卡头左边的圆角徽章
+    if (line.badge) {
+      drawBadge(g, panelRect.x + paddingX, rowCenter,
+        line.badge.size, line.badge.color, line.badge.text, currentFamilies)
+    }
+
     for (const run of line.runs) {
       if (run.sprite) {
         paintStarSprite(g, run, x, rowCenter)
@@ -735,6 +864,23 @@ async function renderFortune (ctx, options) {
       g.fillText(run.char, x, rowCenter)
       x += run.w
     }
+
+    // 卡头下方的分隔线（只在后面还有内容时画）
+    if (line.divider) {
+      const left = panelRect.x + paddingX + indent
+      const right = panelRect.x + panelRect.w - paddingX
+      const y = cursorY + line.height * 0.98
+      g.save()
+      // 0.28 在宣纸上几乎看不见，加到 0.5 才有参考图那种分隔感
+      g.strokeStyle = withAlpha(line.badge ? line.badge.dividerColor : colors.text, 0.5)
+      g.lineWidth = Math.max(1, line.font * 0.06)
+      g.beginPath()
+      g.moveTo(left, y)
+      g.lineTo(right, y)
+      g.stroke()
+      g.restore()
+    }
+
     cursorY += line.height
   }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "koishi-plugin-ll-bns-fortune",
   "description": "剑灵怀旧服每日运势：宜/忌、玄学地图、彩色五角星运势指数，自定义底图出图",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "main": "lib/index.js",
   "files": [
     "lib",