@c2-markdown-ui/vue 0.0.0-stage → 0.4.3

package/src/lib/widgets/Cascader.vue

@@ -0,0 +1,475 @@
+<template>
+  <div class="selector widget-cascader" ref="rootEl">
+    <div v-if="label || hint || required" class="widget-label-row">
+      <span v-if="required" class="widget-required-mark" aria-hidden="true">*</span>
+      <label v-if="label">{{ label }}</label>
+      <span v-if="hint" class="widget-hint" :data-hint="hint">ⓘ</span>
+    </div>
+    <div class="widget-field-content">
+      <button
+        type="button"
+        class="cas-input"
+        :class="{ 'widget-input-error': !!error }"
+        :disabled="disabled"
+        :aria-expanded="open"
+        @click="toggleOpen"
+      >
+        <span class="cas-input-text" :class="{ 'cas-placeholder': selected.length === 0 }">
+          {{ loading ? '加载中…' : selected.length > 0 ? displayText(selected) : placeholder || '请选择' }}
+        </span>
+        <span
+          v-if="!disabled && selected.length > 0"
+          class="cas-clear"
+          role="button"
+          tabindex="-1"
+          aria-label="清空"
+          @click.stop="clearValue"
+        >×</span>
+        <span v-else-if="!disabled" class="cas-arrow" :class="{ 'cas-arrow-open': open }" aria-hidden="true">▾</span>
+      </button>
+      <div v-if="error" class="widget-error-text" role="alert">{{ error }}</div>
+
+      <div v-if="open" class="cas-panel">
+        <div v-if="levelCount === 0" class="cas-empty">{{ loading ? '加载中…' : '暂无数据' }}</div>
+        <template v-else>
+          <div v-for="level in levelCount" :key="level" class="cas-menu" role="menu">
+            <button
+              v-for="node in levelNodes(level - 1)"
+              :key="node.value"
+              type="button"
+              class="cas-option"
+              :class="{ 'cas-option-active': active[level - 1] === node.value }"
+              @click="pick(level - 1, node)"
+            >
+              <span class="cas-option-label">{{ node.label }}</span>
+              <span v-if="!node.isLeaf" class="cas-option-arrow" aria-hidden="true">›</span>
+            </button>
+            <div v-if="levelNodes(level - 1).length === 0" class="cas-empty">
+              {{ loadingPath && active.join('/').startsWith(loadingPath) ? '加载中…' : '暂无数据' }}
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+
+interface CascadeNode {
+  value?: string | number
+  /** value 的别名（key:label 风格数据源） */
+  key?: string | number
+  label?: string | number
+  children?: CascadeNode[]
+  /** lazy 模式：子级是否已请求过（请求返回空数组时为真叶子，标记避免重复请求） */
+  loaded?: boolean
+  [extra: string]: any
+}
+
+interface CasNode {
+  /** 段 key（无 key:label 时即段文本） */
+  value: string
+  /** 段显示文案 */
+  label: string
+  children: CasNode[]
+  /** 是否叶子（完整路径；lazy 模式下无 children 视为待加载，非叶子） */
+  isLeaf: boolean
+  /** lazy 模式：子级是否已请求过（请求返回空数组时为真叶子，标记避免重复请求） */
+  loaded?: boolean
+}
+
+interface CascaderProps {
+  choices: string[]
+  /** 嵌套对象树数据源（与扁平路径 choices 兼容共存，优先于 choices） */
+  data?: CascadeNode[]
+  /** 远端数据源 URL：设置后运行时 fetch 拉取嵌套树，data/choices 作为初始/后备 */
+  url?: string
+  /** 懒加载模式（url 存在时生效）：首次只拉根级，点击父级后以 url?parent=<value> 逐级请求子级 */
+  lazy?: boolean
+  label?: string
+  default?: string
+  placeholder?: string
+  hint?: string
+  required?: boolean
+  /** 校验失败提示文案 */
+  message?: string
+  /** 外部（form 提交时）传入的错误信息 */
+  error?: string
+  /** 是否禁用 */
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<CascaderProps>(), {
+  data: undefined,
+  url: '',
+  lazy: false,
+  label: '',
+  default: '',
+  placeholder: '',
+  hint: '',
+  required: false,
+  message: '',
+  error: '',
+  disabled: false
+})
+
+const emit = defineEmits<{
+  change: [value: string]
+}>()
+
+// ---------- 路径解析与树构建 ----------
+/** 解析一段文本：key:label → {value:key, label:label}；无冒号则 value=label=段文本 */
+function parseSeg(seg: string): { value: string; label: string } {
+  const idx = seg.indexOf(':')
+  if (idx > 0) {
+    const v = seg.slice(0, idx).trim()
+    const l = seg.slice(idx + 1).trim()
+    if (v && l) return { value: v, label: l }
+  }
+  return { value: seg.trim(), label: seg.trim() }
+}
+
+/** 嵌套对象树 → 内部 CasNode 树（label 缺省回退 value，children 缺省/空视为叶子）
+ *  lazy 模式下无 children 的节点视为"待加载"（isLeaf=false），子级点击父级时请求；
+ *  节点上已有的 loaded 标记（lazy 子级请求返回空数组的真叶子）需保留，避免重复请求 */
+function nodesToTree(nodes: CascadeNode[] | undefined, lazy = false): CasNode[] {
+  if (!Array.isArray(nodes)) return []
+  return nodes.map(n => {
+    const v = n.value ?? n.key
+    const children = n.children
+    const hasChildren = Array.isArray(children) && children.length > 0
+    const wasLoaded = n.loaded === true
+    return {
+      value: String(v ?? ''),
+      label: String(n.label ?? v ?? ''),
+      children: hasChildren ? nodesToTree(children, lazy) : [],
+      isLeaf: lazy ? !hasChildren && wasLoaded : !hasChildren,
+      loaded: hasChildren || wasLoaded
+    }
+  })
+}
+
+/**
+ * 兼容常见远端嵌套树响应并归一化为 CascadeNode[]：
+ * - [{value,label,children}]（直接树数组）
+ * - {data|options|choices|items|tree|treeData:[...]} 包裹
+ */
+function normalizeRemoteTree(json: any): CascadeNode[] {
+  let list = json
+  if (!Array.isArray(json)) {
+    list = Array.isArray(json?.data) ? json.data
+      : Array.isArray(json?.options) ? json.options
+      : Array.isArray(json?.choices) ? json.choices
+      : Array.isArray(json?.items) ? json.items
+      : Array.isArray(json?.tree) ? json.tree
+      : Array.isArray(json?.treeData) ? json.treeData
+      : []
+  }
+  const map = (arr: any[]): CascadeNode[] =>
+    (arr || [])
+      .map((it: any): CascadeNode | null => {
+        if (!it || typeof it !== 'object') return null
+        const value = it.value ?? it.key
+        if (value === undefined || value === null || value === '') return null
+        const node: CascadeNode = { value: String(value) }
+        const label = it.label ?? it.name ?? it.text
+        if (label !== undefined && label !== null) node.label = String(label)
+        if (Array.isArray(it.children) && it.children.length > 0) {
+          node.children = map(it.children)
+        }
+        return node
+      })
+      .filter((n: CascadeNode | null): n is CascadeNode => n !== null)
+  return map(list)
+}
+
+// ---------- 远端与静态数据源 ----------
+/** 远端拉取的嵌套树（成功后覆盖本地 data/choices；lazy 模式下仅根级，子级逐步填充）
+ *  加载失败静默处理：回落本地 data/choices，均无数据时面板显示灰色"暂无数据" */
+const remoteData = ref<CascadeNode[] | null>(null)
+const loading = ref(false)
+/** lazy 模式：正在加载子级的父级路径串（/ 连接），空 = 无进行中的子级请求 */
+const loadingPath = ref('')
+
+// 静态 tree：data 优先于 choices（兼容共存），远端拉取成功时以远端为准
+const tree = computed<CasNode[]>(() => {
+  if (remoteData.value) return nodesToTree(remoteData.value, props.lazy)
+  if (Array.isArray(props.data) && props.data.length > 0) return nodesToTree(props.data, props.lazy)
+  // 回退：扁平路径数组 → 多级树（公共前缀合并）
+  const root: CasNode[] = []
+  for (const path of props.choices) {
+    if (!path) continue
+    const segs = path.split('/').map(s => s.trim()).filter(Boolean)
+    if (segs.length === 0) continue
+    let level = root
+    for (let i = 0; i < segs.length; i++) {
+      const { value, label } = parseSeg(segs[i])
+      let node = level.find(n => n.value === value)
+      if (!node) {
+        node = { value, label, children: [], isLeaf: i === segs.length - 1 }
+        level.push(node)
+      }
+      level = node.children
+    }
+  }
+  return root
+})
+
+/** 默认路径（value 串，/ 分隔）→ 逐级 value 数组；支持 key:label 段与 label 串回退 */
+function pathToValues(path: string | undefined, t: CasNode[]): string[] {
+  if (!path) return []
+  const segs = path.split('/').map(s => s.trim()).filter(Boolean)
+  const values: string[] = []
+  let level = t
+  for (const seg of segs) {
+    const { value: segVal, label: segLabel } = parseSeg(seg)
+    const node = level.find(n => n.value === segVal || n.value === seg || n.label === segLabel || n.label === seg)
+    if (!node) return values
+    values.push(node.value)
+    level = node.children
+  }
+  return values
+}
+
+// ---------- 状态 ----------
+const selected = ref<string[]>(pathToValues(props.default, tree.value))
+const active = ref<string[]>([])
+const open = ref(false)
+
+const rootEl = ref<HTMLElement | null>(null)
+
+function onDocClick(e: MouseEvent) {
+  if (rootEl.value && !rootEl.value.contains(e.target as Node)) open.value = false
+}
+onMounted(() => document.addEventListener('mousedown', onDocClick))
+onBeforeUnmount(() => document.removeEventListener('mousedown', onDocClick))
+
+// url 远程模式：非 lazy 一次拉整棵树，lazy 只拉根级（子级点击父级时按需请求），竞态用 cancelled 保护
+if (props.url) {
+  let cancelled = false
+  loading.value = true
+  ;(async () => {
+    try {
+      const res = await fetch(props.url)
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      const json: any = await res.json()
+      if (cancelled) return
+      const list = normalizeRemoteTree(json)
+      if (list.length === 0) throw new Error('响应中没有可用选项')
+      remoteData.value = list
+      // 用户尚未选择时回填默认路径（远端加载完成后触发；lazy 模式默认路径仅能回填根级）
+      if (selected.value.length === 0) selected.value = pathToValues(props.default, nodesToTree(list, props.lazy))
+    } catch {
+      // 加载失败：静默回落本地 data/choices（空态显示灰色"暂无数据"）
+    } finally {
+      if (!cancelled) loading.value = false
+    }
+  })()
+}
+
+/** lazy 模式：按路径在原始树中找到节点并填充其子级（返回新树，目标节点打 loaded 标记） */
+function fillChildren(treeNodes: CascadeNode[], path: string[], children: CascadeNode[]): CascadeNode[] {
+  return treeNodes.map(node => {
+    const v = String(node.value ?? node.key ?? '')
+    if (v !== path[0]) return node
+    if (path.length === 1) {
+      // 目标节点：填充子级；空数组 = 真叶子（loaded 防止重复请求）
+      return { ...node, children, loaded: true }
+    }
+    return { ...node, children: fillChildren(node.children || [], path.slice(1), children) }
+  })
+}
+
+/** lazy 模式：请求某父级的子级（url?parent=<value>），成功后填充进树 */
+async function loadChildren(node: CasNode, path: string[]) {
+  if (!props.url || !node || node.loaded) return
+  loadingPath.value = path.join('/')
+  try {
+    const sep = props.url.includes('?') ? '&' : '?'
+    const res = await fetch(`${props.url}${sep}parent=${encodeURIComponent(node.value)}`)
+    if (!res.ok) throw new Error(`HTTP ${res.status}`)
+    const json: any = await res.json()
+    const list = normalizeRemoteTree(json)
+    // 递归更新 remoteData（不可变更新；children 为空时该节点确认为真叶子）
+    if (remoteData.value) remoteData.value = fillChildren(remoteData.value, path, list)
+  } catch {
+    // 子级加载失败：静默处理，子层级面板显示灰色"暂无数据"
+  } finally {
+    loadingPath.value = ''
+  }
+}
+
+// ---------- 展示与交互 ----------
+/** 当前激活层级对应的子节点列表（level 0 用树根） */
+function levelNodes(level: number): CasNode[] {
+  let nodes = tree.value
+  for (let i = 0; i < level; i++) {
+    const v = active.value[i]
+    const node = nodes.find(n => n.value === v)
+    if (!node) return []
+    nodes = node.children
+  }
+  return nodes
+}
+
+/** 展开层级总数（含当前激活最深一层；lazy 模式下未加载的节点也占一层，展示加载态） */
+const levelCount = computed(() => {
+  if (!open.value) return 0
+  let count = 1
+  let nodes = tree.value
+  for (const v of active.value) {
+    const node = nodes.find(n => n.value === v)
+    if (!node || node.isLeaf) break
+    nodes = node.children
+    count++
+  }
+  return count
+})
+
+/** 选中节点 value 数组 → 展示文案串（label 用 / 连接） */
+function displayText(values: string[]): string {
+  let nodes = tree.value
+  const labels: string[] = []
+  for (const v of values) {
+    const node = nodes.find(n => n.value === v)
+    if (!node) break
+    labels.push(node.label)
+    nodes = node.children
+  }
+  return labels.join(' / ')
+}
+
+function toggleOpen() {
+  if (props.disabled) return
+  open.value = !open.value
+  if (open.value) {
+    // 打开时激活层级同步到已选路径
+    active.value = selected.value.length > 0 ? selected.value.slice(0, -1) : []
+  }
+}
+
+/** 点击某层选项：叶子 → 完成选择并关闭；待加载（lazy）→ 请求子级后展开 */
+function pick(level: number, node: CasNode) {
+  if (props.disabled) return
+  const next = active.value.slice(0, level)
+  next.push(node.value)
+  if (node.isLeaf) {
+    // 叶子节点：完成选择
+    selected.value = next
+    active.value = []
+    open.value = false
+    emit('change', next.join('/'))
+  } else {
+    // 展开下一层；lazy 模式下未加载时先请求子级
+    active.value = next
+    if (props.lazy && props.url && !node.loaded) {
+      void loadChildren(node, next)
+    }
+  }
+}
+
+function clearValue() {
+  selected.value = []
+  active.value = []
+  open.value = false
+  emit('change', '')
+}
+</script>
+
+<style scoped>
+.widget-cascader {
+  position: relative;
+}
+
+.cas-input {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  background-color: #ffffff;
+  cursor: pointer;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  text-align: left;
+}
+.cas-input:hover { border-color: #4096ff; }
+.cas-input:focus {
+  outline: none;
+  border-color: #1677ff;
+  box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
+}
+/* 禁用态：置灰 + 禁止交互 */
+.cas-input:disabled {
+  background-color: #f5f5f5;
+  color: rgba(0, 0, 0, 0.25);
+  border-color: #d9d9d9;
+  cursor: not-allowed;
+}
+.cas-input:disabled:hover { border-color: #d9d9d9; }
+
+.cas-input-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
+.cas-placeholder { color: rgba(0, 0, 0, 0.45); }
+.cas-arrow { color: rgba(0, 0, 0, 0.45); font-size: 0.75rem; transition: transform 0.2s ease; }
+.cas-arrow-open { transform: rotate(180deg); }
+.cas-clear {
+  padding: 0 0.25rem;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 1rem;
+  line-height: 1;
+}
+.cas-clear:hover { color: rgba(0, 0, 0, 0.88); }
+
+/* 级联面板：横向多级菜单并排 */
+.cas-panel {
+  position: absolute;
+  z-index: 50;
+  top: calc(100% + 4px);
+  left: 0;
+  display: flex;
+  background: #ffffff;
+  border: 1px solid #d9d9d9;
+  border-radius: 8px;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+}
+.cas-menu {
+  width: 160px;
+  max-height: 240px;
+  overflow-y: auto;
+  padding: 0.375rem;
+}
+.cas-menu + .cas-menu {
+  border-left: 1px solid #f0f0f0;
+}
+.cas-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  font-size: 0.875rem;
+  color: rgba(0, 0, 0, 0.88);
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.15s ease;
+}
+.cas-option:hover { background: #f5f5f5; }
+.cas-option-active { background: #e6f4ff; color: #1677ff; font-weight: 500; }
+.cas-option-active:hover { background: #bae0ff; }
+.cas-option-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cas-option-arrow { color: rgba(0, 0, 0, 0.45); font-size: 0.875rem; flex: 0 0 auto; }
+.cas-empty {
+  padding: 0.75rem 0.5rem;
+  font-size: 0.8125rem;
+  color: rgba(0, 0, 0, 0.45);
+  text-align: center;
+}
+</style>