lambo-design-bi 0.0.248 → 0.0.251

package/bi/widget/bulletin/bulletin-widget.vue

@@ -1,9 +1,19 @@
 <!-- eslint-disable -->
 <template>
   <div class="bulletin-widget">
-    <div class="bulletin-header" v-if="hasTitle">
-      <div class="bulletin-title">{{ cardTitle }}</div>
-      <div class="bulletin-subtitle" v-if="subTitle">{{ subTitle }}</div>
+    <div class="bulletin-header" v-if="hasTitle || previewUrl">
+      <div class="bulletin-title-wrap" v-if="hasTitle">
+        <div class="bulletin-title">{{ cardTitle }}</div>
+        <div class="bulletin-subtitle" v-if="subTitle">{{ subTitle }}</div>
+      </div>
+      <div
+        v-if="previewUrl"
+        class="bulletin-download-btn"
+        title="下载简报"
+        @click="doDownload">
+        <Icon type="md-download" class="btn-icon" />
+        <span class="btn-text">下载</span>
+      </div>
     </div>
 
     <div
@@ -21,25 +31,19 @@
         <p>尚未发布简报</p>
         <p class="hint">该期间/组织暂无已发布的简报成品</p>
       </div>
-      <template v-else>
-        <div
-          class="bulletin-download-fab"
-          title="下载简报"
-          @click="doDownload">
-          <Icon type="md-download" />
-        </div>
-        <lambo-doc-word
-          :url="previewUrl"
-          :key="previewUrl"
-          :report="summary" />
-      </template>
+      <lambo-doc-word
+        v-else
+        :url="previewUrl"
+        :key="previewUrl"
+        :report="summary"
+        :publish-time="publishTime" />
     </div>
   </div>
 </template>
 <script>
 import LamboDocWord from '../../../pub/doc/word/index.vue'
 import { parseStyleStr } from '../util/css-util'
-import { getBulletinSummary, listBulletinPublishDoc } from './api/bulletin'
+import { listBulletinPublishDoc } from './api/bulletin'
 import { fileGetUrl } from '../api/config'
 
 // 统一日志前缀，便于在控制台按关键字过滤简报组件的关键过程
@@ -67,6 +71,24 @@ const PERIOD_KEY_CANDIDATES = {
 const COM_ID_CANDIDATES = ['comId', 'com_id']
 const DIST_CT_ID_CANDIDATES = ['distCtId', 'dist_ct_id']
 
+// 规范化 publishTime 字符串：兼容后端可能返回的多种格式
+// - "2026-07-30 17:14:22" / "2026-07-30T17:14:22" → 原样
+// - "20260730171422" 14 位紧凑 → "2026-07-30 17:14:22"
+// - 其他 → 原样
+function normalizePublishTime(v) {
+  if (v == null) return ""
+  const s = String(v).trim()
+  if (!s) return ""
+  // 已经是带分隔符的格式
+  if (/[-/]/.test(s)) return s
+  // 14 位紧凑：YYYYMMDDHHmmss
+  const m = /^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/.exec(s)
+  if (m) {
+    return `${m[1]}-${m[2]}-${m[3]} ${m[4]}:${m[5]}:${m[6]}`
+  }
+  return s
+}
+
 // 从 params 里按候选 key 取首个非空项，返回命中的 { key, value }；均未命中返回 null
 function firstNonBlankEntry(obj, keys) {
   if (!obj || !Array.isArray(keys)) return null
@@ -101,10 +123,11 @@ export default {
       previewUrl: '',
       lastDocId: '',
       lastFileName: '',
+      // 简报生成时间（plat_bulletin_publish_doc.publish_time）
+      publishTime: '',
       // 空态原因：'' 无 / 'invalid' 查询条件不足（校验未过）/ 'empty' 已查询但无成品
       emptyReason: '',
-      // 摘要（data 阶段）
-      summaryLoading: false,
+      // 摘要：取自已发布成品行的 sum_json（plat_bulletin_publish_doc.sum_json），缺省为 null
       summaryData: null
     }
   },
@@ -121,8 +144,8 @@ export default {
     // 右侧摘要数据源：data 阶段拉取的 summaryData，缺省用空骨架
     summary() {
       const s = this.summaryData
-      if (!s || typeof s !== 'object') return { ...EMPTY_SUMMARY, title: this.cardTitle }
-      return Object.assign({}, EMPTY_SUMMARY, { title: this.cardTitle }, s)
+      if (!s || typeof s !== 'object') return { ...EMPTY_SUMMARY, title: '摘要' }
+      return Object.assign({}, EMPTY_SUMMARY, s, { title: '摘要' })
     }
   },
   watch: {
@@ -160,6 +183,7 @@ export default {
       this.lastDocId = ''
       this.lastFileName = ''
       this.previewUrl = ''
+      this.publishTime = ''
       this.emptyReason = reason || ''
     },
     loadDoc(params) {
@@ -225,11 +249,13 @@ export default {
             console.log(LOG, 'loadDoc 命中已发布成品，直接渲染', { docId: doc.docId, docName: doc.docName })
             this.lastDocId = doc.docId
             this.lastFileName = doc.docName || (this.cardTitle + '.docx')
+            // 与右侧摘要 meta 保持统一格式（左侧语义为"简报发布时间"：数据源 plat_bulletin_publish_doc.publish_time）
+            this.publishTime = doc.publishTime ? `简报发布时间：${normalizePublishTime(doc.publishTime)}` : ''
             this.previewUrl = fileGetUrl + doc.docId
             this.emptyReason = ''
             this.$Message.success({ content: '查询到已发布的简报', duration: 1.8 })
-            // 命中成品后才拉右侧摘要
-            this.loadSummary(params)
+            // 命中成品：直接用该行的 sum_json 作为右侧摘要，不再另发请求
+            this.applySummaryFromDoc(doc)
             return
           }
           // 未命中已发布成品 → 空态，同时清空摘要（不再查摘要）
@@ -264,42 +290,37 @@ export default {
       console.log(LOG, 'resolvePeriodEntry', { periodType, candidates, entry })
       return entry
     },
-    // data 阶段之二：获取右侧摘要（单接口，后端已聚合四段）
-    loadSummary(params) {
-      const bulletinWidgetId = this.widget && this.widget.id
-      if (!bulletinWidgetId) {
-        console.warn(LOG, 'loadSummary 中止：简报id为空')
+    // data 阶段之二：从已发布成品行读取右侧摘要（plat_bulletin_publish_doc.sum_json）
+    // sum_json 是发布时缓存的摘要快照；为空/解析失败则摘要置空（右侧面板自动隐藏）
+    applySummaryFromDoc(doc) {
+      const raw = doc && doc.sumJson
+      if (!raw || typeof raw !== 'string') {
+        console.log(LOG, 'applySummaryFromDoc 摘要为空，置空', { docId: doc && doc.docId })
         this.summaryData = null
         return
       }
-      console.log(LOG, 'loadSummary 请求摘要', { bulletinWidgetId, params })
-      this.summaryLoading = true
-      getBulletinSummary(bulletinWidgetId, params || {})
-        .then(res => {
-          const body = res && res.data
-          if (!body || body.code !== 1) {
-            console.warn(LOG, 'loadSummary 失败：', body)
-            this.summaryData = null
-            return
-          }
-          this.summaryData = (body.data && typeof body.data === 'object') ? body.data : null
-          const s = this.summaryData || {}
-          console.log(LOG, 'loadSummary 成功', {
-            conclusions: (s.conclusions || []).length,
-            metrics: (s.metrics || []).length,
-            highlights: (s.highlights || []).length,
-            risks: (s.risks || []).length,
-            advices: (s.advices || []).length,
-            warnings: (s.warnings || []).length
-          })
-        })
-        .catch(err => {
-          console.error(LOG, 'loadSummary 异常：', err)
+      try {
+        const parsed = JSON.parse(raw)
+        if (!parsed || typeof parsed !== 'object') {
           this.summaryData = null
+          return
+        }
+        // 库内 meta 是生成时的"统计时间"，发布后以发布人为准（发布时间已在左侧目录下方展示）
+        const publisher = doc.publishUserName ? String(doc.publishUserName).trim() : ''
+        parsed.meta = publisher ? ('发布人：' + publisher) : ''
+        this.summaryData = parsed
+        console.log(LOG, 'applySummaryFromDoc 摘要已加载', {
+          docId: doc.docId,
+          conclusions: (parsed.conclusions || []).length,
+          metrics: (parsed.metrics || []).length,
+          highlights: (parsed.highlights || []).length,
+          risks: (parsed.risks || []).length,
+          advices: (parsed.advices || []).length
         })
-        .finally(() => {
-          this.summaryLoading = false
-        })
+      } catch (e) {
+        console.warn(LOG, 'applySummaryFromDoc sum_json 解析失败，置空：', e)
+        this.summaryData = null
+      }
     },
     // 下载：用当前展示的已发布成品 docId
     doDownload() {
@@ -349,9 +370,16 @@ export default {
 .bulletin-widget {
   width: 100%;
 }
-/* 自绘标题栏：无边框，仅与下方内容留间距 */
+/* 自绘标题栏：左标题右按钮，无边框，仅与下方内容留间距 */
 .bulletin-header {
-  padding: 0 0 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 0 0 3px;
+}
+.bulletin-title-wrap {
+  min-width: 0;
 }
 .bulletin-title {
   font-size: 16px;
@@ -367,44 +395,30 @@ export default {
 }
 .bulletin-body {
   width: 100%;
-  /* 定位上下文：悬浮下载按钮相对本容器绝对定位 */
-  position: relative;
-  /* 有文档预览时给 lambo-doc-word 一个明确的高度基线，其内部 word-preview 使用 height:100% */
-  height: 720px;
+  /* 视口自适应高度：吃满屏幕剩余空间，大屏不留白；减去的值覆盖页头/查询栏/简报标题栏/边距 */
+  height: calc(100vh - 210px);
   min-height: 480px;
 }
-/* 悬浮下载按钮：自定义 FAB，悬浮在预览区右上角上层，hover 点亮为主题蓝 */
-.bulletin-download-fab {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  z-index: 10;
-  width: 40px;
-  height: 40px;
-  display: flex;
+/* 下载按钮：标题栏右侧，文字链接式，主题蓝可点，hover 加深 */
+.bulletin-download-btn {
+  flex-shrink: 0;
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  font-size: 20px;
+  gap: 4px;
+  font-size: 13px;
+  font-weight: 500;
   color: #2d8cf0;
   cursor: pointer;
-  border-radius: 6px;
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 247, 255, 0.9));
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  border: 1px solid rgba(45, 140, 240, 0.15);
-  box-shadow: 0 4px 14px rgba(31, 45, 61, 0.12);
-  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: color 0.18s ease;
+}
+.bulletin-download-btn .btn-icon {
+  font-size: 16px;
 }
-.bulletin-download-fab:hover {
-  color: #fff;
-  background: linear-gradient(135deg, #2d8cf0, #57a3f3);
-  border-color: transparent;
-  transform: translateY(-2px);
-  box-shadow: 0 8px 20px rgba(45, 140, 240, 0.4);
+.bulletin-download-btn:hover {
+  color: #57a3f3;
 }
-.bulletin-download-fab:active {
-  transform: translateY(0);
-  box-shadow: 0 3px 10px rgba(45, 140, 240, 0.35);
+.bulletin-download-btn:active {
+  color: #2372c8;
 }
 /* 空态/加载态：无文档时高度自适应内容，避免撑出大片空白 */
 .bulletin-body.is-empty {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lambo-design-bi",
-  "version": "0.0.248",
+  "version": "0.0.251",
   "description": "Vue2 BI 数据可视化组件库",
   "main": "index.js",
   "author": "finch",

package/pub/doc/word/index.vue

@@ -1,8 +1,14 @@
 <template>
   <div class="word-preview">
-    <!-- 左侧：目录（从真实文档动态提取） -->
-    <aside class="word-nav">
-      <div class="word-nav-title">文档目录</div>
+    <!-- 左侧：目录（可折叠） -->
+    <aside class="word-nav" v-if="!navCollapsed">
+      <div class="word-nav-head">
+        <div class="word-nav-title">文档目录</div>
+        <span class="panel-collapse-btn" title="收起目录" @click="toggleNav">
+          <Icon type="ios-arrow-back" />
+        </span>
+      </div>
+      <div class="word-nav-publish" v-if="publishTime">{{ publishTime }}</div>
       <div v-if="!ready" class="word-nav-empty">解析中…</div>
       <div v-else-if="!toc.length" class="word-nav-empty">未识别到章节目录</div>
       <a
@@ -13,6 +19,11 @@
         @click="scrollTo(item)"
       >{{ item.text }}</a>
     </aside>
+    <!-- 左侧折叠窄条 -->
+    <div class="word-rail word-rail-left" v-else title="展开目录" @click="toggleNav">
+      <Icon type="ios-arrow-forward" class="rail-arrow" />
+      <span class="rail-text">文档目录</span>
+    </div>
 
     <!-- 中间：真实 Word 预览 -->
     <div class="word-doc">
@@ -23,8 +34,17 @@
       ></js-preview-docx>
     </div>
 
-    <!-- 右侧：摘要（四部分全空时隐藏，中间预览区自动扩展） -->
-    <aside class="word-aside" v-if="!summaryEmpty">
+    <!-- 右侧折叠窄条（摘要非空且已折叠时显示） -->
+    <div class="word-rail word-rail-right" v-if="!summaryEmpty && asideCollapsed" title="展开摘要" @click="toggleAside">
+      <Icon type="ios-arrow-back" class="rail-arrow" />
+      <span class="rail-text">文档摘要</span>
+    </div>
+
+    <!-- 右侧：摘要（四部分全空时隐藏，中间预览区自动扩展；可折叠） -->
+    <aside class="word-aside" v-if="!summaryEmpty && !asideCollapsed">
+      <span class="panel-collapse-btn panel-collapse-btn-float" title="收起摘要" @click="toggleAside">
+        <Icon type="ios-arrow-forward" />
+      </span>
       <div class="paper-title" v-if="internalReport.title">{{ internalReport.title }}</div>
       <div class="paper-meta" v-if="internalReport.meta">{{ internalReport.meta }}</div>
 
@@ -81,6 +101,10 @@
 import JsPreviewDocx from "../preview/components/JsPreviewDocx.vue"
 import JSZip from "jszip"
 
+// 折叠状态在 localStorage 的存储 key
+const NAV_COLLAPSE_KEY = "lambo-doc-word-nav-collapsed"
+const ASIDE_COLLAPSE_KEY = "lambo-doc-word-aside-collapsed"
+
 export default {
   name: "LamboDocWord",
   components: {
@@ -96,6 +120,11 @@ export default {
     report: {
       type: Object,
       default: null
+    },
+    // 简报生成时间（plat_bulletin_publish_doc.publish_time），展示在目录下方
+    publishTime: {
+      type: String,
+      default: ""
     }
   },
   data() {
@@ -144,7 +173,10 @@ export default {
       scrollEl: null,
       // 右侧摘要（优先使用外部 report prop，缺失时回退到内置模拟数据）
       internalReport: this.report || defaultReport,
-      defaultReport: defaultReport
+      defaultReport: defaultReport,
+      // 折叠状态（从 localStorage 恢复，容错降级为默认展开）
+      navCollapsed: this.readCollapsed(NAV_COLLAPSE_KEY),
+      asideCollapsed: this.readCollapsed(ASIDE_COLLAPSE_KEY)
     };
   },
   watch: {
@@ -183,6 +215,34 @@ export default {
     }
   },
   methods: {
+    // 读取 localStorage 中的折叠状态；不可用或无值时默认展开(false)
+    readCollapsed(key) {
+      try {
+        return typeof window !== "undefined" && window.localStorage
+          ? window.localStorage.getItem(key) === "1"
+          : false;
+      } catch (e) {
+        return false;
+      }
+    },
+    // 写入折叠状态到 localStorage（容错，不阻断切换）
+    writeCollapsed(key, val) {
+      try {
+        if (typeof window !== "undefined" && window.localStorage) {
+          window.localStorage.setItem(key, val ? "1" : "0");
+        }
+      } catch (e) {
+        // ignore
+      }
+    },
+    toggleNav() {
+      this.navCollapsed = !this.navCollapsed;
+      this.writeCollapsed(NAV_COLLAPSE_KEY, this.navCollapsed);
+    },
+    toggleAside() {
+      this.asideCollapsed = !this.asideCollapsed;
+      this.writeCollapsed(ASIDE_COLLAPSE_KEY, this.asideCollapsed);
+    },
     // JsPreviewDocx 渲染完成，root 为其容器 DOM（.vue-office-docx，即滚动容器）
     async onRendered(root) {
       this.docRoot = root;
@@ -400,7 +460,7 @@ export default {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  padding: 6px;
+  padding: 5px;
   background: #f3f4f6;
   color: #1e293b;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
@@ -417,9 +477,77 @@ export default {
   background: #fff;
   border: 1px solid #e2e8f0;
   border-radius: 6px;
-  padding: 14px;
+  padding: 7px 8px;
   box-sizing: border-box;
   overflow-y: auto;
+  transition: flex-basis 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+    width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+/* 目录标题行：标题 + 收起按钮 */
+.word-nav-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+.word-nav-head .word-nav-title {
+  margin-bottom: 0;
+}
+/* 摘要收起按钮：悬浮右上角，不占文档流，避免挤压标题到第二行 */
+.panel-collapse-btn-float {
+  position: absolute;
+  top: 7px;
+  right: 8px;
+  z-index: 2;
+}
+/* 面板内收起按钮：纯图标，克制 */
+.panel-collapse-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  color: #94a3b8;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background 0.15s, color 0.15s;
+}
+.panel-collapse-btn:hover {
+  background: #f0f7ff;
+  color: #2d8cf0;
+}
+/* 折叠窄条：竖排标题 + 箭头，点击整条展开 */
+.word-rail {
+  flex: 0 0 32px;
+  width: 32px;
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 0;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  cursor: pointer;
+  color: #64748b;
+  transition: background 0.15s, color 0.15s;
+}
+.word-rail:hover {
+  background: #f0f7ff;
+  color: #2d8cf0;
+}
+.word-rail .rail-arrow {
+  font-size: 16px;
+  flex-shrink: 0;
+}
+.word-rail .rail-text {
+  writing-mode: vertical-rl;
+  letter-spacing: 2px;
+  font-size: 13px;
+  font-weight: 600;
+  user-select: none;
 }
 .word-nav-title {
   font-size: 14px;
@@ -467,6 +595,13 @@ export default {
   color: #1e40af;
   font-weight: 700;
 }
+/* 文档目录标题下方：简报发布时间，与右侧 .paper-meta 同一套样式 */
+.word-nav-publish {
+  margin: 4px 0 6px;
+  font-size: 11px;
+  color: #64748b;
+  line-height: 1.6;
+}
 
 /* 中间 Word 预览 */
 .word-doc {
@@ -475,7 +610,6 @@ export default {
   display: flex;
   flex-direction: column;
   background: #fff;
-  border: 1px solid #e2e8f0;
   border-radius: 6px;
   overflow: hidden;
   box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
@@ -493,26 +627,31 @@ export default {
 
 /* 右侧摘要 */
 .word-aside {
-  flex: 0 0 300px;
-  width: 300px;
+  position: relative;
+  flex: 0 0 290px;
+  width: 290px;
   align-self: stretch;
   background: #fff;
   border: 1px solid #e2e8f0;
   border-radius: 6px;
-  padding: 16px;
+  padding: 7px 8px;
   box-sizing: border-box;
   overflow-y: auto;
+  transition: flex-basis 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+    width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .paper-title {
   font-size: 14px;
   font-weight: 700;
   color: #0f172a;
-  margin-bottom: 4px;
+  margin-bottom: 6px;
+  /* 给右上角悬浮收起按钮让位 */
+  padding-right: 26px;
 }
 .paper-meta {
-  font-size: 12px;
+  font-size: 11px;
   color: #64748b;
-  margin-bottom: 16px;
+  margin-bottom: 6px;
 }
 /* 摘要分区 */
 .summary-section {

package/pub/flow/submit/flow-submit.vue

@@ -277,10 +277,10 @@ export default {
       }
     },
     handleSubmit() {
-      if (!this.applyDescription.trim()) {
-        this.$Message.warning({ content: '请输入申请描述', duration: 2.5 })
-        return
-      }
+      // if (!this.applyDescription.trim()) {
+      //   this.$Message.warning({ content: '请输入申请描述', duration: 2.5 })
+      //   return
+      // }
       this.submitting = true
       this.$emit('submit', {
         applyDescription: this.applyDescription,

package/pub/table/status-flow-col/index.js

@@ -0,0 +1,3 @@
+import LamboTableStatusFlowCol from './index.vue'
+export default LamboTableStatusFlowCol
+export { LamboTableStatusFlowCol }

package/pub/table/status-flow-col/index.vue

@@ -0,0 +1,320 @@
+<!--
+  LamboTableStatusFlowCol 表格状态流转列组件
+
+  用途：
+    在表格单元格中以「节点1 › 节点2 › 节点3 ...」的横向流转条形式展示业务单据的当前状态，
+    并支持点击打开抽屉查看完整的状态流转时间线（含每一步的时间、操作人、备注等历史信息）。
+
+  展示规则：
+    - 总状态数 <= 3：全部节点展开显示。
+    - 总状态数 > 3：当前节点之前仅保留一个直接前置（多个折叠为 +N），
+      当前节点之后最多显示一个直接后置（剩余 1 个显示名称，多个折叠为 +N）。
+    - 已完成节点使用成功色（绿色），待处理节点使用表格常规文字色，当前节点高亮。
+
+  Props：
+    - statuses {Array<{ K: string|number, V: string }>} 状态节点列表，按流转顺序排列，
+      K 为状态值（与业务数据中的状态字段对应），V 为状态显示名称，K 需唯一。
+      示例：
+        [
+          { K: '10', V: '新建' },
+          { K: '20', V: '审批中' },
+          { K: '30', V: '已通过' },
+          { K: '40', V: '已完成' }
+        ]
+    - current  {string|number} 当前单据所处的状态值，需与 statuses 中某项的 K 相等
+      （比较时会做 String() 转换，数字与字符串形式可互通）。示例：'20' 或 20。
+    - history  {Array<{ K: string|number, time?: string, operator?: string, comment?: string }>}
+      可选，各状态节点的历史记录，用于在抽屉时间线中展示时间/操作人/备注；
+      K 需与 statuses 中的 K 对应，相同 K 默认只取一条。示例：
+        [
+          { K: '10', time: '2026-08-01 09:00', operator: '张三', comment: '提交申请' },
+          { K: '20', time: '2026-08-01 10:30', operator: '李四', comment: '审批中' }
+        ]
+
+  用法示例：
+    <LamboTableStatusFlowCol
+      :statuses="[
+        { K: '10', V: '新建' },
+        { K: '20', V: '审批中' },
+        { K: '30', V: '已通过' }
+      ]"
+      current="20"
+      :history="[
+        { K: '10', time: '2026-08-01 09:00', operator: '张三', comment: '提交申请' }
+      ]"
+    />
+
+  事件：无。
+-->
+<template>
+  <div class="status-flow-wrapper">
+    <div class="status-flow" title="点击查看完整流转" @click="drawerVisible = true">
+      <template v-if="currentIndex >= 0">
+        <!-- 总状态数 <=3：全部展开，不折叠 -->
+        <template v-if="expandAll">
+          <span
+            v-for="(node, i) in statuses"
+            :key="node.K"
+            :class="i < currentIndex ? 'collapsed-prev' : (i === currentIndex ? 'current' : 'normal')"
+          >{{ node.V }}<span v-if="i < statuses.length - 1" class="arrow">›</span></span>
+        </template>
+
+        <!-- 总状态数 >3：前置/后置按规则折叠 -->
+        <template v-else>
+          <!-- 前置节点：1 个直接显示名称，多个折叠为 +N（成功色，已完成） -->
+          <template v-if="currentIndex > 0">
+            <span v-if="currentIndex === 1" class="collapsed-prev">{{ prevName }}</span>
+            <span v-else class="collapsed-prev">+{{ currentIndex }}</span>
+            <span class="arrow">›</span>
+          </template>
+
+          <!-- 当前状态 - 成功色 -->
+          <span class="current">{{ currentName }}</span>
+
+          <!-- 后置：紧挨的下一个直接显示；剩余 1 个显示名称，多个折叠为 +N -->
+          <template v-if="nextIndex < statuses.length">
+            <span class="arrow">›</span>
+            <span class="normal">{{ nextName }}</span>
+
+            <template v-if="remainingCount === 1">
+              <span class="arrow">›</span>
+              <span class="normal">{{ remainingName }}</span>
+            </template>
+            <template v-else-if="remainingCount > 1">
+              <span class="arrow">›</span>
+              <span class="collapsed-next">+{{ remainingCount }}</span>
+            </template>
+          </template>
+        </template>
+      </template>
+      <span v-else>-</span>
+    </div>
+
+    <Drawer
+      v-model="drawerVisible"
+      title="完整状态流转"
+      :width="400"
+      :mask-closable="true"
+    >
+      <div class="timeline">
+        <div v-for="(node, i) in statuses" :key="node.K" class="timeline-item">
+          <div
+            class="timeline-dot"
+            :class="{ completed: i < currentIndex, current: i === currentIndex }"
+          ></div>
+          <div class="timeline-label">
+            {{ node.V }}
+            <span
+              class="badge"
+              :class="badgeClass(i)"
+            >{{ badgeText(i) }}</span>
+          </div>
+          <div v-if="historyMap[node.K]" class="timeline-meta">
+            <div v-if="historyMap[node.K].time" class="meta-line">
+              时间：{{ historyMap[node.K].time }}
+            </div>
+            <div v-if="historyMap[node.K].operator" class="meta-line">
+              操作人：{{ historyMap[node.K].operator }}
+            </div>
+            <div v-if="historyMap[node.K].comment" class="meta-line">
+              备注：{{ historyMap[node.K].comment }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Drawer>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LamboTableStatusFlowCol',
+  props: {
+    statuses: {
+      type: Array,
+      required: true
+      // [{ K: '10', V: '新建' }, ...]
+    },
+    current: {
+      type: [String, Number],
+      required: true
+    },
+    history: {
+      type: Array,
+      default: () => []
+      // [{ K: '20', time: '...', operator: '...', comment: '...' }]
+    }
+  },
+  data() {
+    return {
+      drawerVisible: false
+    }
+  },
+  computed: {
+    currentIndex() {
+      return this.statuses.findIndex(s => String(s.K) === String(this.current))
+    },
+    expandAll() {
+      return this.statuses.length <= 3
+    },
+    nextIndex() {
+      return this.currentIndex + 1
+    },
+    remainingCount() {
+      return Math.max(0, this.statuses.length - this.currentIndex - 2)
+    },
+    currentName() {
+      const node = this.statuses[this.currentIndex]
+      return node ? node.V : ''
+    },
+    nextName() {
+      const node = this.statuses[this.nextIndex]
+      return node ? node.V : ''
+    },
+    prevName() {
+      const node = this.statuses[this.currentIndex - 1]
+      return node ? node.V : ''
+    },
+    remainingName() {
+      const node = this.statuses[this.nextIndex + 1]
+      return node ? node.V : ''
+    },
+    historyMap() {
+      const map = {}
+      this.history.forEach(h => {
+        map[h.K] = h
+      })
+      return map
+    }
+  },
+  methods: {
+    badgeClass(i) {
+      if (i < this.currentIndex) return 'badge-completed'
+      if (i === this.currentIndex) return 'badge-processing'
+      return 'badge-pending'
+    },
+    badgeText(i) {
+      if (i < this.currentIndex) return '已完成'
+      if (i === this.currentIndex) return '进行中'
+      return '待处理'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.status-flow {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 0;
+  transition: opacity 0.3s;
+  font-size: 14px;
+  color: #515a6e;
+}
+
+.status-flow:hover {
+  opacity: 0.7;
+}
+
+/* 前置折叠 - 成功色（已完成） */
+.collapsed-prev {
+  color: #19be6b;
+}
+
+/* 后置折叠 - 与表格文字一致（待处理） */
+.collapsed-next {
+  color: #515a6e;
+}
+
+/* 箭头 */
+.arrow {
+  color: #c5c8ce;
+  margin: 0 2px;
+}
+
+/* 当前状态 - 成功色 */
+.current {
+  color: #19be6b;
+}
+
+/* 下一节点 - 与表格文字一致 */
+.normal {
+  color: #515a6e;
+}
+
+/* 抽屉内时间线 */
+.timeline {
+  position: relative;
+  padding-left: 30px;
+}
+
+.timeline::before {
+  content: '';
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  bottom: 10px;
+  width: 2px;
+  background: #e8eaec;
+}
+
+.timeline-item {
+  position: relative;
+  margin-bottom: 25px;
+}
+
+.timeline-item:last-child {
+  margin-bottom: 0;
+}
+
+.timeline-dot {
+  position: absolute;
+  left: -25px;
+  top: 5px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #c5c8ce;
+  border: 2px solid white;
+  box-shadow: 0 0 0 2px #c5c8ce;
+}
+
+.timeline-dot.completed,
+.timeline-dot.current {
+  background: #19be6b;
+  box-shadow: 0 0 0 2px #19be6b;
+}
+
+.timeline-label {
+  font-size: 14px;
+  color: #333;
+}
+
+.badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  margin-left: 8px;
+}
+
+.badge-processing,
+.badge-completed {
+  background: #e8f8ef;
+  color: #19be6b;
+}
+
+.badge-pending {
+  background: #f5f5f5;
+  color: #999;
+}
+
+.timeline-meta {
+  margin-top: 6px;
+  font-size: 12px;
+  color: #999;
+  line-height: 1.8;
+}
+</style>