npmapps 1.1.5 → 1.2.0

package/app/{wujie-vue2-child → wujie-wk/wujie-vue2-child}/src/components/EventCalendar/index.vue

@@ -6,6 +6,179 @@
     @mouseenter="handleMouseEnter"
     @mouseleave="handleMouseLeave"
   >
+    <!-- 开发/业务配置工具栏：默认关闭；改完点「复制配置」，把 JSON 发给研发即可 -->
+    <section
+      v-if="showConfigToolbar"
+      class="ec__config"
+      aria-label="日历布局配置"
+    >
+      <div class="ec__config-head">
+        <div>
+          <strong class="ec__config-title">布局配置</strong>
+          <span class="ec__config-caption">调整后点「复制配置」，粘贴发给研发即可</span>
+        </div>
+        <div class="ec__config-actions">
+          <button
+            type="button"
+            class="ec__config-btn is-primary"
+            @click="copyLayoutConfig"
+          >复制配置</button>
+        </div>
+      </div>
+
+      <div class="ec__config-list">
+        <div
+          v-for="field in configFields"
+          :key="field.key"
+          class="ec__config-block"
+          :class="'ec__config-block--' + field.kind"
+          :title="field.kind === 'spacing' ? '当前简写：' + spacingShorthand(field.key) : undefined"
+        >
+          <!-- 分段选项：条目对齐 / 溢出方式 -->
+          <template v-if="field.kind === 'seg'">
+            <p class="ec__config-label">
+              <span class="ec__config-priority">P{{ field.priority }}</span>{{ field.label }}
+              <button
+                type="button"
+                class="ec__config-reset"
+                :title="'还原「' + field.label + '」为初始值'"
+                @click="resetField(field.key)"
+              >还原</button>
+            </p>
+            <div class="ec__config-segment">
+              <button
+                v-for="option in field.options"
+                :key="option.value"
+                type="button"
+                :class="{ 'is-active': configDraft[field.key] === option.value }"
+                :aria-pressed="configDraft[field.key] === option.value ? 'true' : 'false'"
+                @click="updateLayoutConfig(field.key, option.value)"
+              >{{ option.label }}</button>
+            </div>
+          </template>
+
+          <!-- 间距：上下 / 左右两块步进 -->
+          <template v-else-if="field.kind === 'spacing'">
+            <p class="ec__config-label">
+              <span class="ec__config-priority">P{{ field.priority }}</span>{{ field.label }}
+              <code class="ec__config-shorthand">{{ spacingShorthand(field.key) }}</code>
+              <button
+                type="button"
+                class="ec__config-reset"
+                :title="'还原「' + field.label + '」为初始值'"
+                @click="resetField(field.key)"
+              >还原</button>
+            </p>
+            <div class="ec__spacing">
+              <div v-for="axis in spacingAxes" :key="axis.key" class="ec__spacing-row">
+                <span class="ec__spacing-row-label">{{ axis.label }}</span>
+                <span class="ec__stepper">
+                  <button
+                    type="button"
+                    class="ec__step-btn"
+                    :aria-label="field.label + '，' + axis.label + '减 1'"
+                    title="减 1（按住 Shift ±5）"
+                    @click="nudgeSpacingAxis(field.key, axis.key, -1, $event)"
+                  >−</button>
+                  <label class="ec__stepper-input">
+                    <input
+                      type="number"
+                      min="0"
+                      step="1"
+                      :value="spacingAxisValue(field.key, axis.key)"
+                      :aria-label="field.label + '，' + axis.label + '（px）'"
+                      @change="updateSpacingAxis(field.key, axis.key, $event)"
+                    />
+                    <span class="ec__stepper-unit" aria-hidden="true">px</span>
+                  </label>
+                  <button
+                    type="button"
+                    class="ec__step-btn"
+                    :aria-label="field.label + '，' + axis.label + '加 1'"
+                    title="加 1（按住 Shift ±5）"
+                    @click="nudgeSpacingAxis(field.key, axis.key, 1, $event)"
+                  >+</button>
+                </span>
+              </div>
+            </div>
+          </template>
+
+          <!-- 单值数值：输入框左右包 −/+ -->
+          <template v-else-if="field.kind === 'number'">
+            <p class="ec__config-label">
+              <span class="ec__config-priority">P{{ field.priority }}</span>{{ field.label }}
+              <button
+                type="button"
+                class="ec__config-reset"
+                :title="'还原「' + field.label + '」为初始值'"
+                @click="resetField(field.key)"
+              >还原</button>
+            </p>
+            <span class="ec__stepper">
+              <button
+                type="button"
+                class="ec__step-btn"
+                :aria-label="field.label + '减 1'"
+                :title="'减 ' + (field.step || 1) + '（按住 Shift ×5）'"
+                @click="nudgeNumber(field.key, -1, $event)"
+              >−</button>
+              <label class="ec__stepper-input">
+                <input
+                  type="number"
+                  :min="typeof field.min === 'number' ? field.min : 0"
+                  :step="field.step || 1"
+                  :value="configDraft[field.key]"
+                  :aria-label="field.label + '（' + field.unit + '）'"
+                  @change="updateLayoutConfig(field.key, $event.target.value, 'number')"
+                />
+                <span v-if="field.unit" class="ec__stepper-unit" aria-hidden="true">{{ field.unit }}</span>
+              </label>
+              <button
+                type="button"
+                class="ec__step-btn"
+                :aria-label="field.label + '加 1'"
+                :title="'加 ' + (field.step || 1) + '（按住 Shift ×5）'"
+                @click="nudgeNumber(field.key, 1, $event)"
+              >+</button>
+            </span>
+          </template>
+
+          <!-- 颜色 -->
+          <template v-else-if="field.kind === 'color'">
+            <label class="ec__color-swatch" :title="field.label">
+              <input
+                type="color"
+                :value="colorValue(field.key)"
+                :aria-label="field.label"
+                @input="updateLayoutConfig(field.key, $event.target.value)"
+              />
+            </label>
+            <span class="ec__color-meta">
+              <span class="ec__config-label">
+                <span class="ec__config-priority">P{{ field.priority }}</span>{{ field.label }}
+              </span>
+              <code class="ec__color-hex">{{ colorValue(field.key) }}</code>
+            </span>
+            <button
+              type="button"
+              class="ec__reset-btn"
+              title="还原为默认配色"
+              :disabled="!configDraft[field.key]"
+              @click="resetColor(field.key)"
+            >还原</button>
+          </template>
+        </div>
+      </div>
+
+      <div class="ec__config-output">
+        <pre class="ec__config-json">{{ configJsonText }}</pre>
+      </div>
+
+      <div class="ec__config-feedback" role="status" aria-live="polite">
+        {{ copyStatus }}
+      </div>
+    </section>
+
     <!-- ==================== 顶部区域 ==================== -->
     <div v-if="showHeader" class="ec__header">
       <!-- 左侧：完全交给使用者的插槽，未传时回落到 title / subtitle -->
@@ -115,8 +288,8 @@
           <slot name="loading" v-bind="{ rows: skeletonRows }">
             <CalendarSkeleton
               :rows="skeletonRows"
-              :min-row-height="minRowHeight"
-              :item-height="itemHeight"
+              :min-row-height="cfgMinRowHeight"
+              :item-height="cfgItemHeight"
             />
           </slot>
         </div>
@@ -179,15 +352,26 @@
                         :class="{
                           'is-disabled': entry.disabled,
                           'has-badge': !!entry.badge,
-                          'is-colorful': colorful && entry.type
+                          'is-colorful': colorful && entry.type && !cfgItemBgColor && cfgItemBgHover,
+                          'is-bg-gradient': cfgItemBgGradient,
+                          'is-bg-gradient-h': cfgItemBgGradient && cfgGradientDir === 'to-right'
                         }"
                         :style="itemStyle(entry)"
-                        :title="entry.label"
+                        :title="itemTitle(entry)"
                         @click.stop="handleItemClick(entry, cell, i, $event)"
                       >
                         <!-- 单条自定义 -->
                         <slot name="item" v-bind="itemScope(entry, cell, i)">
-                          <span class="ec__item-label">{{ entry.label }}</span>
+                          <div class="ec__item-content">
+                            <span
+                              class="ec__item-label"
+                              :class="{ 'is-long': isLongItemLabel(entry.label) }"
+                            >{{ entry.label }}</span>
+                            <span
+                              v-if="hasText(entry.address)"
+                              class="ec__item-address"
+                            >{{ entry.address }}</span>
+                          </div>
                           <span
                             v-if="entry.badge"
                             class="ec__item-badge"
@@ -253,6 +437,128 @@ const BUILTIN_TYPE_COLORS = {
   default: { color: '#6b7280', bg: 'rgba(107, 114, 128, 0.10)' }
 }
 
+/** 布局配置全部对应 EventCalendar 原生 Props，可直接用于 v-bind。 */
+const DEFAULT_LAYOUT_CONFIG = Object.freeze({
+  itemAlign: 'left',
+  calendarMargin: 0,
+  calendarPadding: 0,
+  headerPadding: '4px 4px 16px',
+  cellPadding: '12px 10px',
+  mobileCellPadding: '8px 6px',
+  itemHorizontalPadding: 8,
+  itemVerticalPadding: 4,
+  itemGap: 6,
+  // 溢出 / 行高 / 角标缩放：同样是对应原生 Props
+  overflowMode: 'scroll',
+  maxVisibleItems: 4,
+  itemHeight: 28,
+  minRowHeight: 118,
+  badgeScale: 0.75,
+  // 条目内部排版与外观
+  itemLineGap: 2,           // 名称与地址之间的行间距（px）
+  itemBgGradient: false,    // 条目背景是否启用渐变效果
+  itemBgGradientDir: 'to-bottom', // 渐变方向：to-bottom 上到下 | to-right 左到右
+  itemBgHover: true,        // 悬浮时是否在底色上自动加深
+  // 条目(.ec__item)颜色覆盖：空串 = 按 type/主题配色走
+  itemTextColor: '',
+  itemBgColor: ''
+})
+
+/**
+ * 工具栏统一字段表：按展示顺序排列。
+ * kind: seg=分段选项 | spacing=上下/左右两块 | number=单值步进 | color=取色
+ */
+const CONFIG_FIELDS = Object.freeze([
+  { kind: 'seg', key: 'itemAlign', label: '条目对齐', priority: 1, options: [
+    { label: '靠左', value: 'left' },
+    { label: '居中', value: 'center' }
+  ] },
+
+  { kind: 'spacing', key: 'cellPadding', label: '日期格内边距', priority: 2 },
+  { kind: 'spacing', key: 'mobileCellPadding', label: '窄屏日期格内边距', priority: 3 },
+
+  { kind: 'number', key: 'itemHorizontalPadding', label: '条目左右内边距', priority: 4, unit: 'px', step: 1 },
+  { kind: 'number', key: 'itemVerticalPadding', label: '条目上下内边距', priority: 5, unit: 'px', step: 1 },
+  { kind: 'number', key: 'itemGap', label: '条目间距', priority: 6, unit: 'px', step: 1 },
+
+  { kind: 'number', key: 'maxVisibleItems', label: '单格最多显示', priority: 7, unit: '条', step: 1, min: 1 },
+  { kind: 'number', key: 'itemHeight', label: '条目高度', priority: 8, unit: 'px', step: 1 },
+  { kind: 'number', key: 'itemLineGap', label: '名称地址间距', priority: 9, unit: 'px', step: 1 },
+
+  { kind: 'seg', key: 'itemBgGradient', label: '条目背景效果', priority: 10, options: [
+    { label: '纯色', value: false },
+    { label: '渐变', value: true }
+  ] },
+  { kind: 'seg', key: 'itemBgGradientDir', label: '渐变方向', priority: 11, options: [
+    { label: '上到下', value: 'to-bottom' },
+    { label: '左到右', value: 'to-right' }
+  ] },
+  { kind: 'seg', key: 'itemBgHover', label: '悬浮加深', priority: 12, options: [
+    { label: '开启', value: true },
+    { label: '关闭', value: false }
+  ] },
+
+  { kind: 'color', key: 'itemTextColor', label: '条目文字色', priority: 13, default: '#606266' },
+  { kind: 'color', key: 'itemBgColor', label: '条目背景色', priority: 14, default: '#f5f7fa' }
+])
+
+/** 间距控件的两个轴：vertical=上下(top/bottom)，horizontal=左右(left/right) */
+const CONFIG_SPACING_AXES = Object.freeze([
+  { key: 'vertical', label: '上下', sides: ['top', 'bottom'] },
+  { key: 'horizontal', label: '左右', sides: ['left', 'right'] }
+])
+
+function createLayoutConfig(vm) {
+  return Object.keys(DEFAULT_LAYOUT_CONFIG).reduce((config, key) => {
+    config[key] = vm[key]
+    return config
+  }, {})
+}
+
+function toCssSpacing(value, fallback) {
+  if (typeof value === 'number' && Number.isFinite(value)) return `${Math.max(0, value)}px`
+  if (typeof value === 'string' && value.trim()) return value.trim()
+  return typeof fallback === 'number' ? `${fallback}px` : fallback
+}
+
+/**
+ * 把 CSS 简写（或数字）解析成 { top, right, bottom, left } 的 px 数值。
+ * 支持 1~4 个值，如 '12px 10px' -> { top:12, right:10, bottom:12, left:10 }。
+ * 解析失败返回全 0，避免方向控件拿不到数。
+ */
+function parseSpacingToSides(value) {
+  const zero = { top: 0, right: 0, bottom: 0, left: 0 }
+  let nums = null
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    nums = [value, value, value, value]
+  } else if (typeof value === 'string') {
+    const tokens = value.trim().split(/\s+/).filter(Boolean)
+    const parsed = tokens.map((token) => {
+      const m = /^(-?\d+(?:\.\d+)?)(?:px)?$/i.exec(token)
+      return m ? Number(m[1]) : null
+    })
+    if (parsed.length && parsed.every((n) => n != null && Number.isFinite(n))) nums = parsed
+  }
+  if (!nums) return zero
+  const top = nums[0]
+  const right = nums.length >= 2 ? nums[1] : top
+  const bottom = nums.length >= 3 ? nums[2] : top
+  const left = nums.length >= 4 ? nums[3] : right
+  return { top, right, bottom, left }
+}
+
+/** 4 个方向的 px 合成 CSS 简写：全等/上下左右两两相等时尽量压缩成 1 项或 2 项 */
+function spacingFromSides(sides) {
+  const px = (v) => `${Math.max(0, Math.round(v))}px`
+  const top = sides.top
+  const right = sides.right
+  const bottom = sides.bottom
+  const left = sides.left
+  if (top === right && right === bottom && bottom === left) return px(top)
+  if (top === bottom && right === left) return `${px(top)} ${px(right)}`
+  return `${px(top)} ${px(right)} ${px(bottom)} ${px(left)}`
+}
+
 export default {
   name: 'EventCalendar',
 
@@ -405,11 +711,86 @@ export default {
       type: Number,
       default: 6
     },
+    /** 条目内容对齐方式 */
+    itemAlign: {
+      type: String,
+      default: 'left',
+      validator: (v) => ['left', 'center'].includes(v)
+    },
+    /** 日历根节点外边距；Number 按 px 处理，String 支持 CSS 简写 */
+    calendarMargin: {
+      type: [Number, String],
+      default: DEFAULT_LAYOUT_CONFIG.calendarMargin
+    },
+    /** 日历根节点内边距；Number 按 px 处理，String 支持 CSS 简写 */
+    calendarPadding: {
+      type: [Number, String],
+      default: DEFAULT_LAYOUT_CONFIG.calendarPadding
+    },
+    /** 顶部区域内边距；支持 CSS 简写 */
+    headerPadding: {
+      type: [Number, String],
+      default: DEFAULT_LAYOUT_CONFIG.headerPadding
+    },
+    /** 日期格内边距；支持 CSS 简写 */
+    cellPadding: {
+      type: [Number, String],
+      default: DEFAULT_LAYOUT_CONFIG.cellPadding
+    },
+    /** 768px 及以下日期格内边距；支持 CSS 简写 */
+    mobileCellPadding: {
+      type: [Number, String],
+      default: DEFAULT_LAYOUT_CONFIG.mobileCellPadding
+    },
+    /** 条目左右内边距（px），传 0 可去除 */
+    itemHorizontalPadding: {
+      type: Number,
+      default: 8,
+      validator: (v) => v >= 0
+    },
+    /** 条目上下内边距（px） */
+    itemVerticalPadding: {
+      type: Number,
+      default: DEFAULT_LAYOUT_CONFIG.itemVerticalPadding,
+      validator: (v) => v >= 0
+    },
+    /** 显示内置布局配置工具栏；生产环境默认隐藏 */
+    showConfigToolbar: {
+      type: Boolean,
+      default: false
+    },
     /** 单元格最小高度（px），保证空行不塌陷 */
     minRowHeight: {
       type: Number,
       default: 118
     },
+    /** 右上角角标整体缩放倍率（transform scale，越小越紧凑） */
+    badgeScale: {
+      type: Number,
+      default: 0.75
+    },
+    /** 条目内名称与地址之间的行间距（px） */
+    itemLineGap: {
+      type: Number,
+      default: 2,
+      validator: (v) => v >= 0
+    },
+    /** 条目背景是否启用渐变效果（在所选底色上叠柔和渐变） */
+    itemBgGradient: {
+      type: Boolean,
+      default: false
+    },
+    /** 渐变方向：to-bottom 上到下 | to-right 左到右（仅渐变开启时生效） */
+    itemBgGradientDir: {
+      type: String,
+      default: 'to-bottom',
+      validator: (v) => ['to-bottom', 'to-right'].includes(v)
+    },
+    /** 悬浮时是否自动把条目背景调淡一档（false 则保持原色） */
+    itemBgHover: {
+      type: Boolean,
+      default: true
+    },
     /** 相邻月份补位格子是否也渲染条目 */
     showAdjacentItems: {
       type: Boolean,
@@ -450,6 +831,16 @@ export default {
       type: Boolean,
       default: false
     },
+    /** 条目(.ec__item)文字色覆盖，空串 = 按 type/主题配色 */
+    itemTextColor: {
+      type: String,
+      default: ''
+    },
+    /** 条目(.ec__item)背景色覆盖，空串 = 按 type/主题配色 */
+    itemBgColor: {
+      type: String,
+      default: ''
+    },
     /** 主题变量覆盖，如 { primary: '#10a37f', radius: '12px' } */
     theme: {
       type: Object,
@@ -476,7 +867,13 @@ export default {
       /** 每次切换 +1，用于重置进度条 CSS 动画 */
       progressKey: 0,
       /** 骨架屏 -> 内容 的首次切换用淡入，避免莫名其妙的滑动 */
-      useFadeOnce: true
+      useFadeOnce: true,
+      /** 配置工具栏只编辑本地草稿，还原时以此为初始快照 */
+      configDraft: createLayoutConfig(this),
+      /** 初始配置快照：每个「还原」按钮回到这里 */
+      configDefaults: createLayoutConfig(this),
+      /** 复制配置按钮的即时反馈文案 */
+      copyStatus: ''
     }
   },
 
@@ -486,6 +883,63 @@ export default {
       return { ...DEFAULT_FIELD_NAMES, ...this.fieldNames }
     },
 
+    externalLayoutConfig() {
+      return createLayoutConfig(this)
+    },
+
+    effectiveLayoutConfig() {
+      return this.showConfigToolbar ? this.configDraft : this.externalLayoutConfig
+    },
+
+    /** 工具栏统一字段表（seg / spacing / number / color） */
+    configFields() {
+      // 渐变方向只在启用渐变时才显示
+      return CONFIG_FIELDS.filter((f) => !(f.key === 'itemBgGradientDir' && !this.configDraft.itemBgGradient))
+    },
+
+    /** 间距控件的「上下 / 左右」两组方向定义 */
+    spacingAxes() {
+      return CONFIG_SPACING_AXES
+    },
+
+    /** 实时生成的配置 JSON 文本（复制给用户 / 供展示） */
+    configJsonText() {
+      return JSON.stringify(this.getLayoutConfig(), null, 2)
+    },
+
+    /** 下面几个值统一从布局配置取：工具栏可见时用草稿，否则回落 Props */
+    cfgItemHeight() {
+      return this.effectiveLayoutConfig.itemHeight
+    },
+
+    cfgMaxVisibleItems() {
+      return this.effectiveLayoutConfig.maxVisibleItems
+    },
+
+    cfgOverflowMode() {
+      return this.effectiveLayoutConfig.overflowMode
+    },
+
+    cfgMinRowHeight() {
+      return this.effectiveLayoutConfig.minRowHeight
+    },
+
+    cfgItemBgColor() {
+      return this.effectiveLayoutConfig.itemBgColor
+    },
+
+    cfgItemBgGradient() {
+      return this.effectiveLayoutConfig.itemBgGradient
+    },
+
+    cfgGradientDir() {
+      return this.effectiveLayoutConfig.itemBgGradientDir
+    },
+
+    cfgItemBgHover() {
+      return this.effectiveLayoutConfig.itemBgHover
+    },
+
     /* --------------------------- 数据归一化 --------------------------- */
     /**
      * 把外部数据统一整理成 [{ month, label, raw }]，
@@ -598,16 +1052,17 @@ export default {
             ? String(getByPath(raw, f.itemKey))
             : `${cell.dateKey}-${i}`,
           label: getByPath(raw, f.itemLabel),
+          address: getByPath(raw, f.itemAddress),
           badge: getByPath(raw, f.itemBadge),
           type: getByPath(raw, f.itemType),
           disabled: !!getByPath(raw, f.itemDisabled),
           raw
         }))
 
-        const overflowed = items.length > this.maxVisibleItems
-        const collapse = this.overflowMode === 'collapse' && overflowed
+        const overflowed = items.length > this.cfgMaxVisibleItems
+        const collapse = this.cfgOverflowMode === 'collapse' && overflowed
         // collapse 模式留一行给「还有 N 项」
-        const visibleItems = collapse ? items.slice(0, this.maxVisibleItems - 1) : items
+        const visibleItems = collapse ? items.slice(0, this.cfgMaxVisibleItems - 1) : items
 
         return {
           ...cell,
@@ -616,7 +1071,7 @@ export default {
           visibleItems,
           moreCount: collapse ? items.length - visibleItems.length : 0,
           /** scroll 模式下是否真的会出现滚动条 */
-          scrollable: this.overflowMode === 'scroll' && overflowed
+          scrollable: this.cfgOverflowMode === 'scroll' && overflowed
         }
       })
     },
@@ -626,6 +1081,7 @@ export default {
       return {
         'ec--loading': this.loading,
         'ec--stagger': this.cellStagger && !this.loading,
+        'ec--item-center': this.effectiveLayoutConfig.itemAlign === 'center',
         [`ec--effect-${this.transitionEffect}`]: true
       }
     },
@@ -633,8 +1089,9 @@ export default {
     /** 主题：全部走 CSS 变量，方便外部覆盖 */
     cssVars() {
       const t = this.theme || {}
-      const n = this.maxVisibleItems
-      return {
+      const n = this.cfgMaxVisibleItems
+      const layout = this.effectiveLayoutConfig
+      const vars = {
         '--ec-primary': t.primary || '#3d6cf0',
         '--ec-primary-ghost': t.primaryGhost || 'rgba(61, 108, 240, 0.12)',
         '--ec-border': t.border || '#e4e7ed',
@@ -643,16 +1100,31 @@ export default {
         '--ec-text-secondary': t.textSecondary || '#606266',
         '--ec-text-placeholder': t.textPlaceholder || '#c0c4cc',
         '--ec-muted': t.muted || '#c8ccd4',
-        '--ec-item-bg': t.itemBg || '#f5f7fa',
+        // 条目颜色：工具栏配置的条目色优先于 theme，theme 优先于默认
+        '--ec-item-bg': layout.itemBgColor || t.itemBg || '#f5f7fa',
         '--ec-cell-hover': t.cellHover || '#fafbfd',
         '--ec-radius': t.radius || '8px',
         '--ec-duration': this.transitionDuration + 'ms',
-        '--ec-item-h': this.itemHeight + 'px',
-        '--ec-item-gap': this.itemGap + 'px',
-        '--ec-min-row-h': this.minRowHeight + 'px',
+        '--ec-item-h': this.cfgItemHeight + 'px',
+        '--ec-badge-scale': Number.isFinite(Number(layout.badgeScale)) ? Number(layout.badgeScale) : 0.75,
+        '--ec-calendar-margin': toCssSpacing(layout.calendarMargin, DEFAULT_LAYOUT_CONFIG.calendarMargin),
+        '--ec-calendar-padding': toCssSpacing(layout.calendarPadding, DEFAULT_LAYOUT_CONFIG.calendarPadding),
+        '--ec-header-padding': toCssSpacing(layout.headerPadding, DEFAULT_LAYOUT_CONFIG.headerPadding),
+        '--ec-cell-padding': toCssSpacing(layout.cellPadding, DEFAULT_LAYOUT_CONFIG.cellPadding),
+        '--ec-cell-padding-mobile': toCssSpacing(layout.mobileCellPadding, DEFAULT_LAYOUT_CONFIG.mobileCellPadding),
+        '--ec-item-gap': layout.itemGap + 'px',
+        '--ec-item-padding-x': layout.itemHorizontalPadding + 'px',
+        '--ec-item-padding-y': layout.itemVerticalPadding + 'px',
+        '--ec-item-line-gap': layout.itemLineGap + 'px',
+        // 悬浮自动调淡一档（白色叠层）；关闭则为透明
+        '--ec-item-hover-mask': layout.itemBgHover === false ? 'transparent' : 'rgba(255, 255, 255, 0.18)',
+        '--ec-min-row-h': this.cfgMinRowHeight + 'px',
         // 滚动区域最大高度 = n 个条目 + (n-1) 个间距
-        '--ec-items-max-h': `${n * this.itemHeight + (n - 1) * this.itemGap}px`
+        '--ec-items-max-h': `${n * this.cfgItemHeight + (n - 1) * layout.itemGap}px`
       }
+      // 条目文字色只在显式配置时覆盖；未配置时走 --ec-text-secondary（hover 走 --ec-text）
+      if (layout.itemTextColor) vars['--ec-item-text'] = layout.itemTextColor
+      return vars
     },
 
     stageStyle() {
@@ -661,7 +1133,7 @@ export default {
 
     itemsStyle() {
       // collapse 模式不限制高度（本来就已经截断了），scroll 模式限高触发滚动条
-      return this.overflowMode === 'scroll'
+      return this.cfgOverflowMode === 'scroll'
         ? { maxHeight: 'var(--ec-items-max-h)' }
         : {}
     },
@@ -737,6 +1209,14 @@ export default {
       if (val && val !== this.innerMonth) this.setMonth(val, 'prop')
     },
 
+    /** 父组件通过 v-bind 更新已保存配置时，同步到工具栏草稿。 */
+    externalLayoutConfig: {
+      deep: true,
+      handler(val) {
+        this.configDraft = { ...val }
+      }
+    },
+
     /** 数据变化后校正当前月份（比如接口返回了新的月份列表） */
     monthOptions: {
       immediate: true,
@@ -794,6 +1274,123 @@ export default {
   },
 
   methods: {
+    /* ========================= 布局配置 ========================= */
+    /** 间距字段某个轴的当前 px 值（vertical 取上下、horizontal 取左右） */
+    spacingAxisValue(key, axisKey) {
+      const sides = parseSpacingToSides(this.configDraft[key])
+      const axis = this.spacingAxes.find((a) => a.key === axisKey)
+      return axis ? sides[axis.sides[0]] : 0
+    },
+
+    /** 间距字段的可读简写，如 12px 10px（也用于标题 tooltip） */
+    spacingShorthand(key) {
+      return spacingFromSides(parseSpacingToSides(this.configDraft[key]))
+    },
+
+    /** 按「上下 / 左右」整轴步进 ±delta px */
+    nudgeSpacingAxis(key, axisKey, delta, event) {
+      const step = event && event.shiftKey ? 5 : 1
+      const sides = parseSpacingToSides(this.configDraft[key])
+      const axis = this.spacingAxes.find((a) => a.key === axisKey)
+      if (!axis) return
+      const current = sides[axis.sides[0]] || 0
+      const next = Math.max(0, Math.round(current + delta * step))
+      if (next === current) return
+      axis.sides.forEach((side) => { sides[side] = next })
+      this.updateLayoutConfig(key, spacingFromSides(sides))
+    },
+
+    /** 直接输入间距字段某个轴（上下/左右）的值，两端一起生效 */
+    updateSpacingAxis(key, axisKey, event) {
+      const raw = Number(event.target.value)
+      const sides = parseSpacingToSides(this.configDraft[key])
+      const axis = this.spacingAxes.find((a) => a.key === axisKey)
+      if (!axis) return
+      const next = Number.isFinite(raw) ? Math.max(0, Math.round(raw)) : 0
+      axis.sides.forEach((side) => { sides[side] = next })
+      this.updateLayoutConfig(key, spacingFromSides(sides))
+    },
+
+    /** 数值字段步进：步长取字段 step（整数 ±1、角标缩放 ±0.05），按住 Shift ×5 */
+    nudgeNumber(key, delta, event) {
+      const field = CONFIG_FIELDS.find((f) => f.key === key)
+      const unit = field && Number(field.step) ? Number(field.step) : 1
+      const multi = event && event.shiftKey ? 5 : 1
+      const current = Number(this.configDraft[key])
+      const base = Number.isFinite(current) ? current : 0
+      this.updateLayoutConfig(key, base + delta * unit * multi, 'number')
+    },
+
+    /** 取色器展示值：未配置（空串）时给一个与默认主题一致的兜底色 */
+    colorValue(key) {
+      const hit = CONFIG_FIELDS.find((f) => f.key === key && f.kind === 'color')
+      return this.configDraft[key] || (hit ? hit.default : '#000000')
+    },
+
+    /** 还原颜色为默认配色（存空串） */
+    resetColor(key) {
+      this.updateLayoutConfig(key, '')
+    },
+
+    /** 还原某个配置项到初始快照（configDefaults） */
+    resetField(key) {
+      if (!Object.prototype.hasOwnProperty.call(this.configDefaults, key)) return
+      this.$set(this.configDraft, key, this.configDefaults[key])
+      this.copyStatus = ''
+      this.$emit('config-change', this.getLayoutConfig())
+    },
+
+    updateLayoutConfig(key, value, inputType) {
+      let nextValue = value
+      if (inputType === 'number') {
+        const parsed = Number(value)
+        const field = CONFIG_FIELDS.find((f) => f.key === key)
+        const min = field && typeof field.min === 'number' ? field.min : 0
+        nextValue = Number.isFinite(parsed)
+          ? Math.max(min, Math.round(parsed * 100) / 100)
+          : min
+      }
+      this.$set(this.configDraft, key, nextValue)
+      this.copyStatus = ''
+      this.$emit('config-change', this.getLayoutConfig())
+    },
+
+    /** 返回可直接 <EventCalendar v-bind="config" /> 的配置对象。 */
+    getLayoutConfig() {
+      return { ...this.effectiveLayoutConfig }
+    },
+
+    /** 复制当前配置 JSON 到剪贴板（用户直接粘贴发回，研发贴到组件上即可） */
+    copyLayoutConfig() {
+      const json = this.configJsonText
+      const fallback = () => {
+        if (typeof document === 'undefined') {
+          this.copyStatus = '已复制，可粘贴发送给研发。'
+          return
+        }
+        const ta = document.createElement('textarea')
+        ta.value = json
+        ta.setAttribute('readonly', '')
+        ta.style.position = 'fixed'
+        ta.style.opacity = '0'
+        document.body.appendChild(ta)
+        ta.select()
+        let ok = false
+        try { ok = document.execCommand('copy') } catch (e) { ok = false }
+        document.body.removeChild(ta)
+        this.copyStatus = ok
+          ? '已复制，可粘贴发送给研发。'
+          : '复制失败，请手动全选下方 JSON 后复制。'
+      }
+      if (typeof navigator !== 'undefined' && navigator.clipboard && window.isSecureContext) {
+        navigator.clipboard.writeText(json).then(() => {
+          this.copyStatus = '已复制，可粘贴发送给研发。'
+        }, fallback)
+      } else {
+        fallback()
+      }
+    },
+
     /* ========================= 月份切换 ========================= */
     /**
      * 切换到指定月份
@@ -1050,6 +1647,7 @@ export default {
         item: entry.raw,
         raw: entry.raw,
         label: entry.label,
+        address: entry.address,
         badge: entry.badge,
         type: entry.type,
         disabled: entry.disabled,
@@ -1082,6 +1680,22 @@ export default {
       this.$emit('more-click', this.cellScope(cell), event)
     },
 
+    hasText(value) {
+      return value !== undefined && value !== null && String(value).trim() !== ''
+    },
+
+    itemTitle(entry) {
+      const label = this.hasText(entry.label) ? String(entry.label) : ''
+      const address = this.hasText(entry.address) ? `\n${entry.address}` : ''
+      return label + address
+    },
+
+    /** 大学名称超过 7 个字符时使用 12px，否则使用 14px。 */
+    isLongItemLabel(label) {
+      const text = label == null ? '' : String(label)
+      return text.length > 7
+    },
+
     /* ========================= 配色 ========================= */
     resolveTypeColor(type) {
       const merged = { ...BUILTIN_TYPE_COLORS, ...this.typeColors }
@@ -1113,13 +1727,415 @@ export default {
 .ec {
   position: relative;
   box-sizing: border-box;
-  width: 100%;
+  width: auto;
+  margin: var(--ec-calendar-margin);
+  padding: var(--ec-calendar-padding);
   color: var(--ec-text);
   font-size: 14px;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
 }
 
+/* -------------------------- 布局配置工具栏 -------------------------- */
+.ec__config {
+  margin-bottom: 16px;
+  padding: 14px;
+  border: 1px solid var(--ec-border);
+  border-radius: calc(var(--ec-radius) + 2px);
+  background: #f8fafc;
+}
+
+.ec__config-head,
+.ec__config-actions,
+.ec__config-segment {
+  display: flex;
+  align-items: center;
+}
+
+.ec__config-head {
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.ec__config-title {
+  color: var(--ec-text);
+  font-size: 14px;
+}
+
+.ec__config-caption {
+  margin-left: 8px;
+  color: var(--ec-text-secondary);
+  font-size: 12px;
+}
+
+.ec__config-actions {
+  gap: 8px;
+}
+
+.ec__config-btn,
+.ec__config-segment button {
+  min-height: 34px;
+  border: 1px solid var(--ec-border);
+  border-radius: 6px;
+  background: #fff;
+  color: var(--ec-text-secondary);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  transition: color 0.18s, border-color 0.18s, background-color 0.18s;
+}
+
+.ec__config-btn {
+  padding: 0 12px;
+}
+
+.ec__config-btn.is-primary,
+.ec__config-segment button.is-active {
+  border-color: var(--ec-primary);
+  background: var(--ec-primary);
+  color: #fff;
+}
+
+.ec__config-btn:hover,
+.ec__config-segment button:hover {
+  border-color: var(--ec-primary);
+  color: var(--ec-primary);
+}
+
+.ec__config-btn.is-primary:hover,
+.ec__config-segment button.is-active:hover {
+  color: #fff;
+  opacity: 0.9;
+}
+
+.ec__config-btn:focus-visible,
+.ec__config-segment button:focus-visible,
+.ec__stepper:focus-within,
+.ec__reset-btn:focus-visible,
+.ec__config input[type='color']:focus-visible {
+  outline: 2px solid var(--ec-primary);
+  outline-offset: 2px;
+}
+
+/* 自带 +/− 步进按钮，隐藏数字框原生上下箭头 */
+.ec__config input[type='number'] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+.ec__config input[type='number']::-webkit-outer-spin-button,
+.ec__config input[type='number']::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* 取色器只保留色块 */
+.ec__config input[type='color'] {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  cursor: pointer;
+}
+
+.ec__config input[type='color']::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.ec__config input[type='color']::-webkit-color-swatch,
+.ec__config input[type='color']::-moz-color-swatch {
+  border: 1px solid var(--ec-border);
+  border-radius: 8px;
+}
+
+/* 字段网格：默认 5 列一排，卡片更小更矮 */
+.ec__config-list {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 8px;
+}
+
+/* 每个字段一张白色小卡片 */
+.ec__config-block {
+  min-width: 0;
+  margin: 0;
+  padding: 8px;
+  border: 1px solid var(--ec-border);
+  border-radius: 8px;
+  background: #fff;
+}
+
+.ec__config-block--seg {
+  display: flex;
+  flex-direction: column;
+}
+
+.ec__config-label {
+  display: flex;
+  align-items: baseline;
+  gap: 3px;
+  flex-wrap: wrap;
+  margin: 0 0 6px;
+  color: var(--ec-text-secondary);
+  font-size: 11px;
+  line-height: 16px;
+}
+
+.ec__config-block--color .ec__config-label {
+  margin: 0;
+}
+
+.ec__config-priority {
+  color: var(--ec-primary);
+  font-weight: 600;
+}
+
+.ec__config-shorthand {
+  margin-left: 6px;
+  max-width: 55%;
+  overflow: hidden;
+  color: var(--ec-text-placeholder);
+  font-family: Consolas, Monaco, monospace;
+  font-size: 10px;
+  font-weight: 400;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ec__config-segment button {
+  min-height: 28px;
+  flex: 1;
+  padding: 0 8px;
+}
+
+.ec__config-segment button + button {
+  margin-left: 6px;
+}
+
+/* ------------ 间距控件：每个字段只拆「上下」「左右」两大块 ------------ */
+.ec__spacing {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.ec__spacing-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.ec__spacing-row-label {
+  flex: none;
+  width: 30px;
+  color: var(--ec-text-secondary);
+  font-size: 11px;
+}
+
+.ec__spacing-row .ec__stepper {
+  flex: 1;
+  min-width: 0;
+}
+
+/* ------------ 单值数值字段：输入框左右包 −/+ ------------ */
+.ec__stepper {
+  display: flex;
+  align-items: stretch;
+  height: 30px;
+  border: 1px solid var(--ec-border);
+  border-radius: 6px;
+  background: #fff;
+}
+
+.ec__step-btn {
+  flex: none;
+  width: 27px;
+  border: 0;
+  background: transparent;
+  color: var(--ec-text-secondary);
+  font-size: 15px;
+  line-height: 1;
+  cursor: pointer;
+  transition: color 0.16s, background-color 0.16s;
+}
+
+.ec__step-btn:first-child {
+  border-right: 1px solid var(--ec-border-light);
+}
+
+.ec__step-btn:last-child {
+  border-left: 1px solid var(--ec-border-light);
+}
+
+.ec__step-btn:hover {
+  color: var(--ec-primary);
+  background: var(--ec-primary-ghost);
+}
+
+.ec__stepper-input {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+}
+
+.ec__stepper-input input {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  outline: 0;
+  padding: 0 22px 0 4px;
+  background: transparent;
+  color: var(--ec-text);
+  font: inherit;
+  font-size: 11px;
+  text-align: center;
+}
+
+.ec__stepper-unit {
+  position: absolute;
+  top: 50%;
+  right: 6px;
+  transform: translateY(-50%);
+  color: var(--ec-text-placeholder);
+  font-size: 10px;
+  pointer-events: none;
+}
+
+/* ------------ 颜色控件（并入字段网格的小卡片） ------------ */
+.ec__config-block--color {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.ec__config-block--color input[type='color'] {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+}
+
+.ec__color-swatch {
+  flex: none;
+  width: 30px;
+  height: 30px;
+}
+
+.ec__color-meta {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.ec__color-hex {
+  margin-top: 1px;
+  color: var(--ec-text);
+  font-family: Consolas, Monaco, monospace;
+  font-size: 11px;
+}
+
+.ec__reset-btn {
+  flex: none;
+  height: 24px;
+  padding: 0 7px;
+  border: 1px solid var(--ec-border);
+  border-radius: 6px;
+  background: #fff;
+  color: var(--ec-text-secondary);
+  font-size: 10px;
+  cursor: pointer;
+}
+
+.ec__reset-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.ec__reset-btn:hover:not(:disabled) {
+  border-color: var(--ec-primary);
+  color: var(--ec-primary);
+}
+
+/* 卡片标题行右上角的「还原」 */
+.ec__config-reset {
+  flex: none;
+  align-self: center;
+  margin-left: auto;
+  padding: 0 6px;
+  height: 20px;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--ec-text-placeholder);
+  font-size: 10px;
+  line-height: 1;
+  cursor: pointer;
+  transition: color 0.16s, border-color 0.16s, background-color 0.16s;
+}
+
+.ec__config-reset:hover {
+  border-color: var(--ec-border);
+  background: #fff;
+  color: var(--ec-primary);
+}
+
+/* ------------ 配置 JSON 输出区 ------------ */
+.ec__config-output {
+  margin-top: 10px;
+}
+
+.ec__config-json {
+  max-height: 170px;
+  margin: 0;
+  padding: 10px 12px;
+  overflow: auto;
+  border-radius: 8px;
+  background: #111827;
+  color: #e5e7eb;
+  font: 11px/1.6 Consolas, Monaco, monospace;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.ec__config-feedback {
+  min-height: 16px;
+  margin-top: 6px;
+  color: #059669;
+  font-size: 12px;
+}
+
+@media (max-width: 1100px) {
+  .ec__config-list {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 900px) {
+  .ec__config-list {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .ec__config-list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .ec__spacing-row-label {
+    width: 26px;
+  }
+}
+
+@media (max-width: 420px) {
+  .ec__config-list {
+    grid-template-columns: 1fr;
+  }
+}
+
 .ec *,
 .ec *::before,
 .ec *::after {
@@ -1132,7 +2148,7 @@ export default {
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  padding: 4px 4px 16px;
+  padding: var(--ec-header-padding);
 }
 
 .ec__header-left {
@@ -1263,7 +2279,7 @@ export default {
   display: flex;
   flex-direction: column;
   min-width: 0;
-  padding: 12px 10px;
+  padding: var(--ec-cell-padding);
   border-right: 1px solid var(--ec-border-light);
   border-bottom: 1px solid var(--ec-border-light);
   transition: background-color 0.2s;
@@ -1372,31 +2388,52 @@ export default {
   display: flex;
   align-items: center;
   min-height: var(--ec-item-h);
-  padding: 4px 8px;
+  padding: var(--ec-item-padding-y) var(--ec-item-padding-x);
   border-radius: 4px;
   background: var(--ec-item-bg);
-  color: var(--ec-text-secondary);
-  font-size: 13px;
+  /* 未显式配置文字色时沿用次要文字色；hover 回落到主文字色 */
+  color: var(--ec-item-text, var(--ec-text-secondary));
   cursor: pointer;
   transition: background-color 0.18s, color 0.18s, box-shadow 0.18s;
 }
 
-/* 有角标时右侧让位，没有角标则占满，避免留白 */
-.ec__item.has-badge {
-  padding-right: 30px;
-}
-
 /* 注意：外层 .ec__items 有 overflow-x: hidden（滚动条需要），
- * 所以 hover 不能用水平位移，否则会被裁切；这里改用内阴影描边。 */
+ * 所以 hover 不能用水平位移，否则会被裁切；这里改用内阴影。
+ * 悬浮背景 = 在底色上叠一层半透明白（--ec-item-hover-mask），自动调淡一档；
+ * 文字画在阴影之上，不受影响。item-bg-hover=false 时 mask 为透明。 */
 .ec__item:hover {
-  color: var(--ec-text);
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+  color: var(--ec-item-text, var(--ec-text));
+  box-shadow:
+    inset 0 0 0 9999px var(--ec-item-hover-mask, rgba(255, 255, 255, 0.18)),
+    inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+}
+
+/* 渐变背景：纯色底上叠一层白色，默认上→下 */
+.ec__item.is-bg-gradient {
+  background-image: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.55) 0%,
+    rgba(255, 255, 255, 0.12) 46%,
+    rgba(255, 255, 255, 0) 74%
+  );
+}
+
+/* 渐变方向：左→右 */
+.ec__item.is-bg-gradient.is-bg-gradient-h {
+  background-image: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.55) 0%,
+    rgba(255, 255, 255, 0.12) 46%,
+    rgba(255, 255, 255, 0) 74%
+  );
 }
 
 .ec__item.is-colorful:hover {
   background: var(--ec-item-accent-bg, var(--ec-item-bg));
-  color: var(--ec-item-accent, var(--ec-text));
-  box-shadow: inset 0 0 0 1px var(--ec-item-accent-bg, transparent);
+  color: var(--ec-item-text, var(--ec-item-accent, var(--ec-text)));
+  box-shadow:
+    inset 0 0 0 9999px rgba(255, 255, 255, 0.15),
+    inset 0 0 0 1px var(--ec-item-accent-bg, transparent);
 }
 
 .ec__item.is-disabled {
@@ -1408,14 +2445,48 @@ export default {
   box-shadow: none;
 }
 
-.ec__item-label {
+.ec__item-content {
+  display: flex;
   flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.ec--item-center .ec__item {
+  justify-content: center;
+}
+
+.ec--item-center .ec__item-content {
+  align-items: center;
+  text-align: center;
+}
+
+.ec__item-label,
+.ec__item-address {
+  display: block;
   min-width: 0;
+  max-width: 100%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
+.ec__item-label {
+  font-size: 14px;
+  line-height: 16px;
+}
+
+.ec__item-label.is-long {
+  font-size: 12px;
+}
+
+.ec__item-address {
+  /* 名称与地址的行间距可配（item-line-gap） */
+  margin-top: var(--ec-item-line-gap, 2px);
+  font-size: 12px;
+  line-height: 16px;
+}
+
 /* 角标：贴在条目右上角，与设计图一致 */
 .ec__item-badge {
   position: absolute;
@@ -1425,10 +2496,14 @@ export default {
   border-radius: 0 4px 0 4px;
   background: rgba(0, 0, 0, 0.06);
   color: var(--ec-text-placeholder);
-  font-size: 11px;
+  font-size: 12px;
   line-height: 16px;
   white-space: nowrap;
   cursor: pointer;
+  /* 字号保持 12px 渲染，scale 倍率由配置 badge-scale 控制（默认 0.75）；
+   * 锚点在右上角，缩放后仍紧贴条目右上角，不占内容宽度 */
+  transform: scale(var(--ec-badge-scale, 0.75));
+  transform-origin: top right;
   transition: filter 0.18s;
 }
 
@@ -1618,6 +2693,17 @@ export default {
 
 /* ------------------------------ 响应式 ------------------------------ */
 @media (max-width: 768px) {
+  .ec__config-head {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+  .ec__config-actions {
+    width: 100%;
+  }
+  .ec__config-btn {
+    flex: 1;
+    min-height: 40px;
+  }
   .ec__header {
     flex-direction: column;
     align-items: stretch;
@@ -1627,20 +2713,8 @@ export default {
     justify-content: flex-end;
   }
   .ec__cell {
-    padding: 8px 6px;
-  }
-  .ec__item {
-    font-size: 12px;
-  }
-  /* 窄屏下角标改为常规内联，不再绝对定位，因此收回右侧让位的内边距。
-   * 这里必须带 .has-badge，否则选择器权重低于上面的 .ec__item.has-badge。 */
-  .ec__item.has-badge {
-    padding-right: 8px;
-  }
-  .ec__item-badge {
-    position: static;
-    margin-left: 6px;
-    border-radius: 3px;
+    padding: var(--ec-cell-padding-mobile);
   }
+  /* 角标在任何屏宽下都绝对定位、悬浮于条目右上角，不占内容宽度 */
 }
 </style>