npm - npmapps - Versions diffs - 1.1.5 → 1.2.0 - Mend

npmapps 1.1.5 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (115) hide show

package/app/wujie-wk/t.html ADDED Viewed

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>vue.draggable vue3例子</title>
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
+    <script src="https://www.itxst.com/package/vue3/vue.global.js"></script>
+    <script src="https://www.itxst.com/package/sortable/Sortable.min.js"></script>
+    <script src="https://www.itxst.com/package/vuedraggablenext/vuedraggable.umd.min.js"></script>
+</head>
+<body style="padding:10px;">
+    <div id="app" class="demo">
+        <draggable :list="list" ghost-class="ghost" :force-fallback="true" chosen-class="chosenClass" animation="300"
+            @start="onStart" @end="onEnd">
+            <template #item="{ element }">
+                <div class="item">
+                    {{ element.name }}
+                </div>
+            </template>
+        </draggable>
+    </div>
+    <script>
+        const app = {
+            data() {
+                return {
+                    //需要拖拽的数据
+                    list: [
+                        { name: "www.itxst.com", id: 0 },
+                        { name: "www.baidu.com", id: 1 },
+                        { name: "www.google.com", id: 2 },
+                    ]
+                }
+            },
+            //注册draggable组件
+            components: {
+                'draggable': window.vuedraggable
+            },
+            methods: {
+                //开始拖拽事件
+                onStart() {
+                },
+                //结束拖拽事件
+                onEnd() {
+                }
+            }
+        }
+        Vue.createApp(app).mount('#app')
+    </script>
+       <style>
+        .itxst {
+            width: 600px;
+            display: flex;
+        }
+        .itxst>div:nth-of-type(1) {
+            flex: 1;
+        }
+        .itxst>div:nth-of-type(2) {
+            width: 270px;
+            padding-left: 20px;
+        }
+        .item {
+            border: solid 1px #eee;
+            padding: 6px 10px;
+            text-align: left;
+        }
+        .item:hover {
+            cursor: move;
+        }
+        .item+.item {
+            margin-top: 10px;
+        }
+        .ghost {
+            border: solid 1px rgb(19, 41, 239) !important;
+        }
+        .chosenClass {
+            background-color: #eee;
+            opacity: 1;
+            border: solid 1px red;
+        }
+        .fallbackClass {
+            background-color: aquamarine;
+        }
+    </style>
+</body>
+</html>

package/app/{wujie-vue2-child → wujie-wk/wujie-vue2-child}/src/components/EventCalendar/README.md RENAMED Viewed

@@ -15,13 +15,15 @@ EventCalendar/
 ├── CalendarSkeleton.vue # 骨架屏
 ├── CodeBlock.vue        # 示例页用的代码块（业务中可删）
 ├── utils.js             # 日期计算与字段映射工具
+├── recruitmentAdapter.js # NodeQ mock 响应 -> EventCalendar 数据
 ├── mockData.js          # 模拟数据（setTimeout 模拟异步接口）
-├── example.vue          # 完整示例集合（12 个 demo + API 文档）
+├── example.vue          # 完整示例集合（14 个 demo + API 文档）
 └── README.md
 ```
-真正接入业务时，**必需**的只有 `index.vue`、`MonthSelect.vue`、`CalendarSkeleton.vue`、`utils.js`。
-`mockData.js` / `example.vue` / `CodeBlock.vue` 是演示用的，可以删掉。
+真正接入普通日历时，**必需**的只有 `index.vue`、`MonthSelect.vue`、`CalendarSkeleton.vue`、`utils.js`。
+接 NodeQ 招聘接口时再加入 `recruitmentAdapter.js`。`mockData.js` / `example.vue` / `CodeBlock.vue`
+是演示用的，可以删掉。
 ## 快速开始
@@ -78,6 +80,7 @@ export default {
           {
             id: 'a1',
             label: '香港中文大学（深圳）',  // 主文案
+            address: '深圳市南山区校区报告厅', // 地址，为空时不显示地址行
             badge: '宣讲',                 // 右上角角标
             type: 'talk'                   // 类型，决定配色
           }
@@ -99,6 +102,88 @@ export default {
 ]
 ```
+## NodeQ mock 数据转换
+转换方法只负责把当前 mock 响应中的 `data.nbcbRecAnnJourneyMaps` 映射为组件默认结构，
+不包含字段猜测或展示配置：
+```js
+import EventCalendar from '@/components/EventCalendar/index.vue'
+import { transformNodeqCalendarResponse } from '@/components/EventCalendar/recruitmentAdapter'
+const data = transformNodeqCalendarResponse(response)
+```
+```vue
+<EventCalendar
+  :data="data"
+  item-align="center"
+  :item-horizontal-padding="0"
+  :item-height="40"
+/>
+```
+转换后条目固定包含 `id`、`label`、`address`、`badge`、`type`、`disabled`。
+mock 中没有的值使用空字符串或 `false`。`address` 为空时，日历组件不会渲染地址行。
+大学名称不超过 7 个字符时为 14px，超过 7 个字符时为 12px；地址统一为 12px。
+`item-align` 控制靠左或居中，`item-horizontal-padding="0"` 可去掉条目左右内边距。
+## 原生布局配置工具栏
+外边距、内边距、条目、溢出与行高、角标缩放等均为组件原生 Props。开启工具栏后，
+改完点「复制配置」，把 JSON 粘回 `layoutConfig` 再 `v-bind` 即可：
+```vue
+<EventCalendar
+  :data="data"
+  v-bind="layoutConfig"
+  :show-config-toolbar="isDevelopment"
+/>
+```
+```js
+export default {
+  data() {
+    return {
+      isDevelopment: process.env.NODE_ENV !== 'production',
+      // 结构与工具栏「复制配置」得到的 JSON 一致，可直接赋值应用
+      layoutConfig: {
+        itemAlign: 'center',
+        calendarMargin: 0,
+        calendarPadding: 0,
+        headerPadding: '4px 4px 16px',
+        cellPadding: '12px 10px',
+        mobileCellPadding: '8px 6px',
+        itemHorizontalPadding: 0,
+        itemVerticalPadding: 4,
+        itemGap: 6,
+        itemLineGap: 2,
+        itemBgGradient: false,
+        itemBgGradientDir: 'to-bottom',
+        itemBgHover: true,
+        overflowMode: 'scroll',
+        maxVisibleItems: 4,
+        itemHeight: 28,
+        minRowHeight: 118,
+        badgeScale: 0.75,
+        // 条目色留空表示沿用 type/主题配色
+        itemTextColor: '',
+        itemBgColor: ''
+      }
+    }
+  }
+}
+```
+`show-config-toolbar` 默认是 `false`。开启后组件顶部会出现配置工具栏（P1～P14）：
+条目对齐、日期格/窄屏日期格内边距（各拆「上下 / 左右」两块）、条目左右/上下内边距与间距、
+名称与地址间距、单格最多显示、条目高度、条目背景效果（纯色/渐变，方向可上下或左右）、
+悬浮加深（可关闭）与条目文字色/背景色；每张卡片右上角都有「还原」可回到初始值。
+选定条目背景色后，鼠标悬浮会自动把背景调淡一档，不喜欢可在「悬浮加深」里关闭。
+底部实时显示当前配置 JSON，右上角「复制配置」一键复制。用户把复制出的 JSON 发回后，
+研发直接把它赋给 `layoutConfig` 通过 `v-bind` 应用即可。
 ## 字段映射（后端字段不一致时）
 **不需要改数据**，传 `field-names` 即可。字段路径支持 `'a.b.c'` 形式。
@@ -112,6 +197,7 @@ const fieldNames = {
   items:        'activityList',
   itemKey:      'activityId',
   itemLabel:    'schoolName',
+  itemAddress:  'rawAddress',
   itemBadge:    'activityTypeName',
   itemType:     'activityType',
   itemDisabled: 'expired'
@@ -152,6 +238,9 @@ const fieldNames = {
 | `scroll`（默认） | 格内出现细滚动条，滚动区高度 = `n × item-height + (n-1) × item-gap` |
 | `collapse` | 只显示前 n-1 条，末尾出现「还有 N 项」，可监听 `more-click` |
+大学名称不超过 7 个字符时使用 14px，超过 7 个字符时使用 12px；地址行统一使用 12px，
+地址为空时不渲染。
 `min-row-height` 保证没有条目的行不会塌陷。
 ### 3. 轮播与暂停
@@ -213,6 +302,22 @@ const fieldNames = {
 | overflow-mode | 溢出处理：`scroll` / `collapse` | String | `'scroll'` |
 | item-height | 单条条目高度（px） | Number | `28` |
 | item-gap | 条目间距（px） | Number | `6` |
+| item-align | 条目内容对齐方式：`left` / `center` | String | `'left'` |
+| calendar-margin | 日历根节点外边距；Number 按 px 处理，String 支持 CSS 简写 | Number / String | `0` |
+| calendar-padding | 日历根节点内边距；Number 按 px 处理，String 支持 CSS 简写 | Number / String | `0` |
+| header-padding | 顶部区域内边距，支持 CSS 简写 | Number / String | `'4px 4px 16px'` |
+| cell-padding | 日期格内边距，支持 CSS 简写 | Number / String | `'12px 10px'` |
+| mobile-cell-padding | 768px 及以下日期格内边距 | Number / String | `'8px 6px'` |
+| item-horizontal-padding | 条目左右内边距（px），传 0 可去除 | Number | `8` |
+| item-vertical-padding | 条目上下内边距（px） | Number | `4` |
+| item-line-gap | 条目内名称与地址的行间距（px） | Number | `2` |
+| item-bg-gradient | 条目背景是否启用渐变（在底色上叠柔和渐变） | Boolean | `false` |
+| item-bg-gradient-dir | 渐变方向：to-bottom 上到下 | to-right 左到右 | String | `'to-bottom'` |
+| item-bg-hover | 悬浮时是否自动把条目背景调淡一档 | Boolean | `true` |
+| badge-scale | 右上角角标整体缩放倍率（越小越紧凑） | Number | `0.75` |
+| show-config-toolbar | 显示原生布局配置工具栏 | Boolean | `false` |
+| item-bg-color | 条目(.ec__item)背景色覆盖；空串按 type/主题配色（工具栏可取色） | String | `''` |
+| item-text-color | 条目(.ec__item)文字色覆盖；空串按 type/主题配色（工具栏可取色） | String | `''` |
 | min-row-height | 单元格最小高度（px） | Number | `118` |
 | show-adjacent-items | 补位日期是否也渲染条目 | Boolean | `true` |
 | highlight-today | 高亮今天 | Boolean | `true` |
@@ -237,6 +342,7 @@ const fieldNames = {
 | autoplay-toggle | 点击播放/暂停按钮 | `(playing: Boolean)` |
 | autoplay-end | `loop=false` 时播到最后一个月 | — |
 | transition-end | 月份切换动画结束 | `(month)` |
+| config-change | 工具栏配置变化（编辑每一项都会触发） | `(config)` |
 `month-change` 的 `source` 表明触发来源：`select` / `arrow` / `autoplay` / `prop` / `api`。
@@ -292,6 +398,7 @@ const fieldNames = {
 | `goTo(index)` | 切到第 index 个月（从 0 开始） |
 | `setMonth(month)` | 切到指定月份，如 `setMonth('2026-10')` |
 | `restartAutoplay()` | 重置轮播计时 |
+| `getLayoutConfig()` | 获取可直接通过 `v-bind` 应用的当前布局配置 |
 ## 主题定制
@@ -339,9 +446,13 @@ import {
   fetchCalendarDataV2,  // 字段名完全不同，配合 ALT_FIELD_NAMES 演示映射
   fetchCrossYearData,   // 2025-12 / 2026-01 / 2026-02，验证跨年补全
   fetchEmptyData,       // 空数据
+  fetchNodeqCalendarData, // NodeQ mock 响应（三个月、每天 3～5 条）
+  NODEQ_MOCK_RESPONSE,  // 同一份响应的同步版本
+  createNodeqMockResponse,
   SIMPLE_DATA,          // 一份写死的小数据
   ALT_FIELD_NAMES
 } from './mockData'
+import { transformNodeqCalendarResponse } from './recruitmentAdapter'
 const data = await fetchCalendarData({
   months: ['2026-09', '2026-10'],
@@ -349,15 +460,21 @@ const data = await fetchCalendarData({
   maxItems: 6,
   density: 0.62
 })
+const nodeqResponse = await fetchNodeqCalendarData()
+const nodeqData = transformNodeqCalendarResponse(nodeqResponse)
 ```
 数据用固定种子的伪随机生成，**每次刷新结果一致**，方便调样式和截图对比。
+`createNodeqMockResponse()` 默认生成 2026 年 9～11 月，每个月 14 个有安排的日期，
+每天 3～5 条 NodeQ mock 记录。转换方法只按这份 mock 的固定字段做映射。
 ## 示例页
-`example.vue` 是按 UI 组件库文档形式组织的完整示例集合，包含 12 个可交互 demo
+`example.vue` 是按 UI 组件库文档形式组织的完整示例集合，包含 14 个可交互 demo
 （基础用法、异步骨架屏、多月切换、自动轮播、切换动效、跨年补全、字段映射、
-溢出与行高、插槽定制、事件、主题、空状态）与完整 API 表格。
+溢出与行高、插槽定制、事件、主题、空状态、NodeQ 后端适配、布局配置与 JSON 导出）
+与完整 API 表格。
 本项目中已挂到路由 `/calendar`。

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

@@ -237,7 +237,7 @@
           <p class="demo__desc">
             后端字段名和组件默认约定不一致时，<strong>不需要改数据</strong>，
             传一个 <code>field-names</code> 即可。下面这份数据用的是
-            <code>ym / dateList / dayStr / activityList / schoolName / activityTypeName</code>，
+            <code>ym / dateList / dayStr / activityList / schoolName / rawAddress</code>，
             字段路径还支持 <code>'a.b.c'</code> 形式。
           </p>
           <div class="demo__cols">
@@ -337,7 +337,7 @@
                   </div>
                   <div class="custom-item__row custom-item__row--sub">
                     <span class="custom-item__addr">{{ item.address || '地点待定' }}</span>
-                    <span class="custom-item__tag">{{ badge }}</span>
+                    <span v-if="badge" class="custom-item__tag">{{ badge }}</span>
                   </div>
                 </div>
               </template>
@@ -454,6 +454,86 @@
           </div>
         </section>
+        <!-- ------------------------------------------------------------ -->
+        <!-- 13. NodeQ 后端数据适配                                         -->
+        <!-- ------------------------------------------------------------ -->
+        <section id="nodeq" class="demo">
+          <h2 class="demo__title">13. NodeQ 后端数据适配</h2>
+          <p class="demo__desc">
+            mock 响应先通过简单转换方法得到标准日历数据，再直接传给
+            <code>EventCalendar</code>。地址、居中和左右内边距均由组件原生支持。
+          </p>
+          <div class="demo__toolbar">
+            <span class="doc__hint">条目对齐：</span>
+            <button
+              v-for="opt in nodeqAlignmentOptions"
+              :key="opt.value"
+              class="doc__seg"
+              :class="{ 'is-active': nodeqAlignment === opt.value }"
+              @click="nodeqAlignment = opt.value"
+            >{{ opt.label }}</button>
+            <label class="doc__check">
+              <input v-model="nodeqNoHorizontalPadding" type="checkbox" />
+              <span>去除条目左右内边距</span>
+            </label>
+          </div>
+          <div class="demo__stage">
+            <EventCalendar
+              :data="nodeqData"
+              :active-month.sync="nodeqActiveMonth"
+              :item-align="nodeqAlignment"
+              :item-horizontal-padding="nodeqNoHorizontalPadding ? 0 : 8"
+              :item-height="40"
+              :max-visible-items="5"
+              :min-row-height="142"
+              show-arrows
+              title="宣讲日历（NodeQ）"
+              subtitle="三个月模拟数据 · 每个有安排的日期 3～5 条"
+            />
+          </div>
+          <CodeBlock :code="code.nodeq" />
+        </section>
+        <!-- ------------------------------------------------------------ -->
+        <!-- 14. 原生布局配置与 JSON 导出                                  -->
+        <!-- ------------------------------------------------------------ -->
+        <section id="layout-config" class="demo">
+          <h2 class="demo__title">14. 原生布局配置与一键复制</h2>
+          <p class="demo__desc">
+            配置工具栏属于 <code>EventCalendar</code> 自身能力，按 P1～P14 排列常用项：
+            条目对齐、日期格/窄屏日期格内边距（各拆「上下 / 左右」两块）、条目边距与间距、
+            名称与地址间距、单格最多显示、条目高度、条目背景效果（纯色/渐变，方向可上下或左右）、
+            悬浮加深（可关闭）与条目背景/文字色；选定背景色后悬浮会自动调淡一档。
+            每张卡片右上角的「还原」可回到初始值，调整后点「复制配置」，JSON 直接进剪贴板，发给研发即可。
+            生产环境保持默认隐藏，开发配置时再传入 <code>show-config-toolbar</code>。
+          </p>
+          <div class="demo__toolbar">
+            <label class="doc__check">
+              <input v-model="layoutToolbarVisible" type="checkbox" />
+              <span>显示组件内配置工具栏</span>
+            </label>
+            <span class="doc__hint">
+              当前参数：<code>show-config-toolbar="{{ layoutToolbarVisible }}"</code>
+            </span>
+          </div>
+          <div class="demo__stage">
+            <EventCalendar
+              :data="nodeqData"
+              :active-month.sync="layoutActiveMonth"
+              v-bind="savedLayoutConfig"
+              :show-config-toolbar="layoutToolbarVisible"
+              :item-height="40"
+              :max-visible-items="5"
+              :min-row-height="142"
+              show-arrows
+              title="可配置宣讲日历"
+              subtitle="配置结果点「复制配置」，粘贴发给研发即可"
+            />
+          </div>
+          <CodeBlock :code="code.layoutConfig" />
+        </section>
         <!-- ------------------------------------------------------------ -->
         <!-- API                                                           -->
         <!-- ------------------------------------------------------------ -->
@@ -543,8 +623,10 @@ import {
   ALT_FIELD_NAMES,
   fetchCalendarData,
   fetchCalendarDataV2,
-  fetchCrossYearData
+  fetchCrossYearData,
+  NODEQ_MOCK_RESPONSE
 } from './mockData'
+import { transformNodeqCalendarResponse } from './recruitmentAdapter'
 export default {
   name: 'EventCalendarExample',
@@ -553,7 +635,7 @@ export default {
   data() {
     return {
-      heroTags: ['零依赖', '自动补月', '轮播动效', '字段可配', '插槽定制', '骨架屏'],
+      heroTags: ['零依赖', '自动补月', '轮播动效', '字段可配', '布局配置', 'NodeQ 适配', '插槽定制', '骨架屏'],
       sections: [
         { id: 'basic', title: '1. 基础用法' },
@@ -568,6 +650,8 @@ export default {
         { id: 'events', title: '10. 事件' },
         { id: 'theme', title: '11. 主题定制' },
         { id: 'empty', title: '12. 空状态' },
+        { id: 'nodeq', title: '13. NodeQ 后端适配' },
+        { id: 'layout-config', title: '14. 布局配置与导出' },
         { id: 'api', title: 'API' }
       ],
       activeSection: 'basic',
@@ -631,6 +715,37 @@ export default {
       /* -------- 10. 事件 -------- */
       logs: [],
+      /* -------- 13. NodeQ 后端形状 -------- */
+      nodeqData: transformNodeqCalendarResponse(NODEQ_MOCK_RESPONSE),
+      nodeqAlignment: 'left',
+      nodeqNoHorizontalPadding: false,
+      nodeqActiveMonth: '2026-09',
+      nodeqAlignmentOptions: [
+        { label: '靠左', value: 'left' },
+        { label: '居中', value: 'center' }
+      ],
+      /* -------- 14. 原生布局配置 -------- */
+      layoutToolbarVisible: true,
+      layoutActiveMonth: '2026-09',
+      savedLayoutConfig: {
+        itemAlign: 'left',
+        calendarMargin: 0,
+        calendarPadding: 0,
+        headerPadding: '4px 4px 16px',
+        cellPadding: '12px 10px',
+        mobileCellPadding: '8px 6px',
+        itemHorizontalPadding: 8,
+        itemVerticalPadding: 4,
+        itemGap: 6,
+        itemLineGap: 2,
+        itemBgGradient: false,
+        itemBgGradientDir: 'to-bottom',
+        itemBgHover: true,
+        itemTextColor: '',
+        itemBgColor: ''
+      },
       /* -------- 11. 主题 -------- */
       themeName: 'default',
       colorful: true,
@@ -761,6 +876,7 @@ onMonthChange(month, info) {
     activityList: [{
       activityId: 1,
       schoolName: '南方科技大学',
+      rawAddress: '深圳市南山区校区报告厅',
       activityTypeName: '宣讲',
       activityType: 'talk',
       expired: false
@@ -776,6 +892,7 @@ onMonthChange(month, info) {
   items:        'activityList',
   itemKey:      'activityId',
   itemLabel:    'schoolName',
+  itemAddress:  'rawAddress',
   itemBadge:    'activityTypeName',
   itemType:     'activityType',
   itemDisabled: 'expired'
@@ -822,13 +939,69 @@ onDayClick(scope, event) {
   // scope = { day, date, dateKey, items, raw, isCurrentMonth, isToday, ... }
 }
 onItemClick(scope, event) {
-  // scope = { item, label, badge, type, index, day, dateKey }
+  // scope = { item, label, address, badge, type, index, day, dateKey }
   // item 是后端返回的原始对象，字段齐全
 }
 onTagClick(scope, event) {
   // 点角标；未监听时会自动退化成 item-click
 }`,
+        nodeq: `import EventCalendar from '@/components/EventCalendar/index.vue'
+import { fetchNodeqCalendarData } from '@/components/EventCalendar/mockData'
+import { transformNodeqCalendarResponse } from '@/components/EventCalendar/recruitmentAdapter'
+// 后端原始响应：response.data.nbcbRecAnnJourneyMaps
+const response = await fetchNodeqCalendarData()
+const data = transformNodeqCalendarResponse(response)
+<EventCalendar
+  :data="data"
+  item-align="center"
+  :item-horizontal-padding="0"
+  :item-height="40"
+/>
+// address 为空时，组件不会渲染地址行。`,
+        layoutConfig: `<!-- 默认不显示工具栏；建议只在开发环境开启 -->
+<EventCalendar
+  :data="data"
+  v-bind="layoutConfig"
+  :show-config-toolbar="isDevelopment"
+/>
+<!-- 工具栏里改完点「复制配置」，把 JSON 粘回来赋给 layoutConfig 即可 -->
+export default {
+  data() {
+    return {
+      isDevelopment: process.env.NODE_ENV !== 'production',
+      // 结构同工具栏「复制配置」得到的 JSON，可直接 v-bind 应用
+      layoutConfig: {
+        itemAlign: 'center',
+        calendarMargin: 0,
+        calendarPadding: 0,
+        headerPadding: '4px 4px 16px',
+        cellPadding: '12px 10px',
+        mobileCellPadding: '8px 6px',
+        itemHorizontalPadding: 0,
+        itemVerticalPadding: 4,
+        itemGap: 6,
+        itemLineGap: 2,
+        itemBgGradient: false,
+        itemBgGradientDir: 'to-bottom',
+        itemBgHover: true,
+        overflowMode: 'scroll',
+        maxVisibleItems: 4,
+        itemHeight: 28,
+        minRowHeight: 118,
+        badgeScale: 0.75,
+        // 条目色留空表示沿用 type/主题配色
+        itemTextColor: '',
+        itemBgColor: ''
+      }
+    }
+  }
+}`,
         theme: `<EventCalendar
   :data="data"
   :theme="{
@@ -868,6 +1041,22 @@ onTagClick(scope, event) {
         ['overflow-mode', '溢出处理：scroll / collapse', 'String', "'scroll'"],
         ['item-height', '单条条目高度（px）', 'Number', '28'],
         ['item-gap', '条目间距（px）', 'Number', '6'],
+        ['item-align', '条目内容对齐方式：left / center', 'String', "'left'"],
+        ['calendar-margin', '日历根节点外边距，Number 按 px 处理，String 支持 CSS 简写', 'Number / String', '0'],
+        ['calendar-padding', '日历根节点内边距，Number 按 px 处理，String 支持 CSS 简写', 'Number / String', '0'],
+        ['header-padding', '顶部区域内边距，支持 CSS 简写', 'Number / String', "'4px 4px 16px'"],
+        ['cell-padding', '日期格内边距，支持 CSS 简写', 'Number / String', "'12px 10px'"],
+        ['mobile-cell-padding', '768px 及以下的日期格内边距', 'Number / String', "'8px 6px'"],
+        ['item-horizontal-padding', '条目左右内边距（px），传 0 可去除', 'Number', '8'],
+        ['item-vertical-padding', '条目上下内边距（px）', 'Number', '4'],
+        ['item-line-gap', '条目内名称与地址的行间距（px）', 'Number', '2'],
+        ['item-bg-gradient', '条目背景是否启用渐变（在底色上叠柔和渐变）', 'Boolean', 'false'],
+        ['item-bg-gradient-dir', '渐变方向：to-bottom 上到下 | to-right 左到右', 'String', "'to-bottom'"],
+        ['item-bg-hover', '悬浮时是否自动把条目背景调淡一档', 'Boolean', 'true'],
+        ['badge-scale', '右上角角标整体缩放倍率（越小越紧凑）', 'Number', '0.75'],
+        ['show-config-toolbar', '显示原生布局配置工具栏，生产环境默认隐藏', 'Boolean', 'false'],
+        ['item-bg-color', '条目(.ec__item)背景色覆盖，空串按 type/主题配色（工具栏可取色）', 'String', "''"],
+        ['item-text-color', '条目(.ec__item)文字色覆盖，空串按 type/主题配色（工具栏可取色）', 'String', "''"],
         ['min-row-height', '单元格最小高度（px）', 'Number', '118'],
         ['show-adjacent-items', '补位日期是否也渲染条目', 'Boolean', 'true'],
         ['highlight-today', '高亮今天', 'Boolean', 'true'],
@@ -888,7 +1077,8 @@ onTagClick(scope, event) {
         ['update:activeMonth', '配合 v-model / .sync', '(month)'],
         ['autoplay-toggle', '点击播放/暂停按钮', '(playing: Boolean)'],
         ['autoplay-end', 'loop=false 时播到最后一个月', '—'],
-        ['transition-end', '月份切换动画结束', '(month)']
+        ['transition-end', '月份切换动画结束', '(month)'],
+        ['config-change', '工具栏配置变化', '(config)']
       ],
       apiSlots: [
         ['header-left', '顶部左侧（设计稿的标题区）', '{ month, monthLabel, monthIndex, monthCount, prev, next, goTo }'],
@@ -907,7 +1097,8 @@ onTagClick(scope, event) {
         ['next()', '切到下一个月'],
         ['goTo(index)', '切到第 index 个月（从 0 开始）'],
         ['setMonth(month)', '切到指定月份，如 setMonth("2026-10")'],
-        ['restartAutoplay()', '重置轮播计时']
+        ['restartAutoplay()', '重置轮播计时'],
+        ['getLayoutConfig()', '获取可直接通过 v-bind 应用的当前布局配置']
       ]
     }
   },
@@ -1310,6 +1501,7 @@ onTagClick(scope, event) {
   color: #3d6cf0 !important;
 }
 /* ------------------------------ 事件日志 ------------------------------ */
 .event-log {
   flex: none;
@@ -1517,6 +1709,10 @@ onTagClick(scope, event) {
   font-size: 10px;
 }
+.custom-item__tag:empty {
+  display: none;
+}
 .custom-empty {
   padding: 6px 0;
   color: #dcdfe6;