foucui 1.0.1

package/components/QiuCascader/index.vue

@@ -0,0 +1,879 @@
+<template>
+  <div
+    ref="rootRef"
+    class="qiu-cascader"
+    :class="[
+      `qiu-cascader--${resolvedSize}`,
+      {
+        'is-disabled': disabled,
+        'is-focused': visible,
+        'is-multiple': isMultiple,
+      },
+    ]"
+  >
+    <div
+      class="qiu-cascader__wrapper"
+      tabindex="0"
+      @click="toggleDropdown"
+      @keydown.enter.prevent="toggleDropdown"
+      @keydown.space.prevent="toggleDropdown"
+      @keydown.esc="closeDropdown"
+      @keydown.down.prevent="openDropdown"
+    >
+      <div class="qiu-cascader__tags" v-if="isMultiple && selectedTags.length">
+        <span
+          v-for="tag in displayTags"
+          :key="String(tag.value)"
+          class="qiu-cascader__tag"
+        >
+          <span class="qiu-cascader__tag-text">{{ tag.label }}</span>
+          <button
+            type="button"
+            class="qiu-cascader__tag-close"
+            tabindex="-1"
+            @mousedown.prevent
+            @click.stop="removeTag(tag.value)"
+          >
+            ×
+          </button>
+        </span>
+        <span v-if="hiddenTagCount > 0" class="qiu-cascader__tag is-collapse">
+          +{{ hiddenTagCount }}
+        </span>
+      </div>
+      <span
+        v-else
+        class="qiu-cascader__selected"
+        :class="{ 'is-placeholder': !displayText }"
+      >
+        {{ displayText || placeholder }}
+      </span>
+      <span class="qiu-cascader__suffix">
+        <button
+          v-if="clearable && hasValue && !disabled"
+          type="button"
+          class="qiu-cascader__clear"
+          tabindex="-1"
+          @mousedown.prevent
+          @click.stop="clear"
+        >
+          ×
+        </button>
+        <span class="qiu-cascader__caret" :class="{ 'is-open': visible }">▾</span>
+      </span>
+    </div>
+
+    <Teleport to="body">
+      <Transition name="qiu-cascader-fade">
+        <div
+          v-show="visible"
+          ref="panelRef"
+          class="qiu-cascader__dropdown"
+          :style="dropdownStyle"
+          @mousedown.prevent
+        >
+          <div v-if="filterable" class="qiu-cascader__filter">
+            <input
+              v-model="filterText"
+              class="qiu-cascader__filter-input"
+              :placeholder="filterPlaceholder"
+              @click.stop
+            />
+          </div>
+
+          <div v-if="filterText.trim()" class="qiu-cascader__suggestions">
+            <div
+              v-for="item in filteredSuggestions"
+              :key="item.pathKey"
+              class="qiu-cascader__suggestion"
+              :class="{
+                'is-selected': isPathSelected(item.pathValues),
+                'is-disabled': item.disabled,
+              }"
+              @click="!item.disabled && pickSuggestion(item)"
+            >
+              {{ item.pathLabels.join(separator) }}
+            </div>
+            <div v-if="!filteredSuggestions.length" class="qiu-cascader__empty">无匹配数据</div>
+          </div>
+
+          <div v-else class="qiu-cascader__menus">
+            <ul
+              v-for="(menu, level) in menus"
+              :key="level"
+              class="qiu-cascader__menu"
+            >
+              <li
+                v-for="opt in menu"
+                :key="String(getOptValue(opt, cfg))"
+                class="qiu-cascader__node"
+                :class="{
+                  'is-active': isActiveAt(level, opt),
+                  'is-selected': isNodeSelected(opt, level),
+                  'is-disabled': isOptDisabled(opt, cfg),
+                }"
+                @click="onNodeClick(opt, level)"
+                @mouseenter="onNodeHover(opt, level)"
+              >
+                <label
+                  v-if="isMultiple || checkStrictly"
+                  class="qiu-cascader__check"
+                  @click.stop
+                >
+                  <input
+                    type="checkbox"
+                    :checked="isNodeChecked(opt)"
+                    :disabled="isOptDisabled(opt, cfg) || (!checkStrictly && hasChildren(opt))"
+                    @change="onCheckChange(opt, level)"
+                  />
+                </label>
+                <span class="qiu-cascader__label">{{ getOptLabel(opt, cfg) }}</span>
+                <span v-if="hasChildren(opt)" class="qiu-cascader__arrow">›</span>
+              </li>
+              <li v-if="!menu.length" class="qiu-cascader__empty-item">无数据</li>
+            </ul>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  getOptChildren,
+  getOptLabel,
+  getOptValue,
+  isOptDisabled,
+  type QiuCascaderOption,
+  type QiuCascaderPropsConfig,
+  type QiuCascaderValue,
+} from './types'
+
+defineOptions({ name: 'QiuCascader' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: QiuCascaderValue
+    options?: QiuCascaderOption[]
+    props?: QiuCascaderPropsConfig
+    placeholder?: string
+    clearable?: boolean
+    disabled?: boolean
+    filterable?: boolean
+    filterPlaceholder?: string
+    showAllLevels?: boolean
+    separator?: string
+    collapseTags?: boolean
+    maxCollapseTags?: number
+    size?: 'large' | 'default' | 'small'
+  }>(),
+  {
+    modelValue: null,
+    options: () => [],
+    props: () => ({}),
+    placeholder: '请选择',
+    clearable: false,
+    disabled: false,
+    filterable: false,
+    filterPlaceholder: '输入关键字搜索',
+    showAllLevels: true,
+    separator: ' / ',
+    collapseTags: false,
+    maxCollapseTags: 1,
+    size: 'default',
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [QiuCascaderValue]
+  change: [QiuCascaderValue]
+  clear: []
+  visibleChange: [boolean]
+  'expand-change': [(string | number)[]]
+}>()
+
+const rootRef = ref<HTMLElement | null>(null)
+const panelRef = ref<HTMLElement | null>(null)
+const visible = ref(false)
+const filterText = ref('')
+const activePath = ref<QiuCascaderOption[]>([])
+const dropdownStyle = ref<Record<string, string>>({})
+
+const cfg = computed<QiuCascaderPropsConfig>(() => ({
+  value: 'value',
+  label: 'label',
+  children: 'children',
+  disabled: 'disabled',
+  multiple: false,
+  checkStrictly: false,
+  emitPath: true,
+  expandTrigger: 'click',
+  ...props.props,
+}))
+
+const isMultiple = computed(() => Boolean(cfg.value.multiple))
+const checkStrictly = computed(() => Boolean(cfg.value.checkStrictly))
+const emitPath = computed(() => cfg.value.emitPath !== false)
+const expandTrigger = computed(() => cfg.value.expandTrigger || 'click')
+const resolvedSize = computed(() => props.size || 'default')
+
+const hasChildren = (opt: QiuCascaderOption) => {
+  const children = getOptChildren(opt, cfg.value)
+  return Boolean(children?.length)
+}
+
+const menus = computed(() => {
+  const result: QiuCascaderOption[][] = [props.options || []]
+  for (const node of activePath.value) {
+    const children = getOptChildren(node, cfg.value)
+    if (children?.length) result.push(children)
+    else break
+  }
+  return result
+})
+
+type FlatItem = {
+  option: QiuCascaderOption
+  path: QiuCascaderOption[]
+  pathValues: (string | number)[]
+  pathLabels: string[]
+  pathKey: string
+  disabled: boolean
+}
+
+const flattenOptions = (
+  nodes: QiuCascaderOption[],
+  parent: QiuCascaderOption[] = []
+): FlatItem[] => {
+  const out: FlatItem[] = []
+  for (const opt of nodes) {
+    const path = [...parent, opt]
+    const pathValues = path.map((n) => getOptValue(n, cfg.value))
+    const pathLabels = path.map((n) => getOptLabel(n, cfg.value))
+    const disabled = path.some((n) => isOptDisabled(n, cfg.value))
+    const children = getOptChildren(opt, cfg.value)
+    const leafOrStrict = !children?.length || checkStrictly.value
+    if (leafOrStrict) {
+      out.push({
+        option: opt,
+        path,
+        pathValues,
+        pathLabels,
+        pathKey: pathValues.join('/'),
+        disabled,
+      })
+    }
+    if (children?.length) out.push(...flattenOptions(children, path))
+  }
+  return out
+}
+
+const flatList = computed(() => flattenOptions(props.options || []))
+
+const filteredSuggestions = computed(() => {
+  const kw = filterText.value.trim().toLowerCase()
+  if (!kw) return []
+  return flatList.value.filter((item) =>
+    item.pathLabels.some((l) => l.toLowerCase().includes(kw))
+  )
+})
+
+const normalizeSingle = (val: QiuCascaderValue): (string | number)[] => {
+  if (val == null || val === '') return []
+  if (Array.isArray(val)) {
+    if (!val.length) return []
+    if (Array.isArray(val[0])) return []
+    return val as (string | number)[]
+  }
+  return [val as string | number]
+}
+
+const normalizeMultiple = (val: QiuCascaderValue): (string | number)[][] => {
+  if (val == null || val === '') return []
+  if (!Array.isArray(val)) return [[val as string | number]]
+  if (!val.length) return []
+  if (Array.isArray(val[0])) return val as (string | number)[][]
+  // 多选且 emitPath=false：一维数组表示多个末级值
+  return (val as (string | number)[]).map((v) => [v])
+}
+
+const selectedPaths = computed<(string | number)[][]>(() => {
+  if (isMultiple.value) return normalizeMultiple(props.modelValue ?? null)
+  const single = normalizeSingle(props.modelValue ?? null)
+  return single.length ? [single] : []
+})
+
+const findPathByValues = (values: (string | number)[]): QiuCascaderOption[] | null => {
+  if (!values.length) return null
+  // emitPath=false：只存末级，在树中查找完整路径
+  if (!emitPath.value && values.length === 1) {
+    const hit = flatList.value.find((f) => getOptValue(f.option, cfg.value) === values[0])
+    return hit?.path || null
+  }
+  let nodes = props.options || []
+  const path: QiuCascaderOption[] = []
+  for (const v of values) {
+    const found = nodes.find((n) => getOptValue(n, cfg.value) === v)
+    if (!found) return null
+    path.push(found)
+    nodes = getOptChildren(found, cfg.value) || []
+  }
+  return path
+}
+
+const pathToValue = (path: QiuCascaderOption[]): string | number | (string | number)[] => {
+  const values = path.map((n) => getOptValue(n, cfg.value))
+  return emitPath.value ? values : values[values.length - 1]
+}
+
+const isPathSelected = (pathValues: (string | number)[]) => {
+  const key = pathValues.join('/')
+  const last = pathValues[pathValues.length - 1]
+  return selectedPaths.value.some((p) => {
+    if (emitPath.value) return p.join('/') === key
+    return p[p.length - 1] === last
+  })
+}
+
+const isNodeChecked = (opt: QiuCascaderOption) => {
+  const v = getOptValue(opt, cfg.value)
+  return selectedPaths.value.some((p) => {
+    if (emitPath.value) return p[p.length - 1] === v
+    return p.includes(v) || p[p.length - 1] === v
+  })
+}
+
+const isActiveAt = (level: number, opt: QiuCascaderOption) => {
+  const cur = activePath.value[level]
+  return cur ? getOptValue(cur, cfg.value) === getOptValue(opt, cfg.value) : false
+}
+
+const isNodeSelected = (opt: QiuCascaderOption, level: number) => {
+  const v = getOptValue(opt, cfg.value)
+  return selectedPaths.value.some((p) => p[level] === v || (!emitPath.value && p[p.length - 1] === v))
+}
+
+const selectedTags = computed(() =>
+  selectedPaths.value
+    .map((values) => {
+      const path = findPathByValues(values)
+      if (!path?.length) {
+        return {
+          value: values[values.length - 1],
+          label: String(values[values.length - 1] ?? ''),
+          pathValues: values,
+        }
+      }
+      const labels = path.map((n) => getOptLabel(n, cfg.value))
+      return {
+        value: getOptValue(path[path.length - 1], cfg.value),
+        label: props.showAllLevels ? labels.join(props.separator) : labels[labels.length - 1],
+        pathValues: values,
+      }
+    })
+    .filter(Boolean)
+)
+
+const displayTags = computed(() => {
+  if (!props.collapseTags) return selectedTags.value
+  return selectedTags.value.slice(0, props.maxCollapseTags)
+})
+
+const hiddenTagCount = computed(() => {
+  if (!props.collapseTags) return 0
+  return Math.max(0, selectedTags.value.length - props.maxCollapseTags)
+})
+
+const displayText = computed(() => {
+  if (isMultiple.value) return ''
+  const paths = selectedPaths.value
+  if (!paths.length) return ''
+  const path = findPathByValues(paths[0])
+  if (!path?.length) return String(paths[0][paths[0].length - 1] ?? '')
+  const labels = path.map((n) => getOptLabel(n, cfg.value))
+  return props.showAllLevels ? labels.join(props.separator) : labels[labels.length - 1]
+})
+
+const hasValue = computed(() => selectedPaths.value.length > 0)
+
+const syncActiveFromModel = () => {
+  const paths = selectedPaths.value
+  if (!paths.length) {
+    activePath.value = []
+    return
+  }
+  const path = findPathByValues(paths[0])
+  if (path?.length) {
+    // 展开到选中路径的父级
+    activePath.value = path.slice(0, -1)
+  }
+}
+
+const updateDropdownPosition = () => {
+  const el = rootRef.value
+  if (!el) return
+  const rect = el.getBoundingClientRect()
+  const spaceBelow = window.innerHeight - rect.bottom
+  const preferUp = spaceBelow < 240 && rect.top > spaceBelow
+  dropdownStyle.value = {
+    position: 'fixed',
+    left: `${rect.left}px`,
+    top: preferUp ? 'auto' : `${rect.bottom + 4}px`,
+    bottom: preferUp ? `${window.innerHeight - rect.top + 4}px` : 'auto',
+    minWidth: `${Math.max(rect.width, 180)}px`,
+    zIndex: '4000',
+  }
+}
+
+const openDropdown = () => {
+  if (props.disabled) return
+  syncActiveFromModel()
+  filterText.value = ''
+  updateDropdownPosition()
+  visible.value = true
+  emit('visibleChange', true)
+}
+
+const closeDropdown = () => {
+  if (!visible.value) return
+  visible.value = false
+  filterText.value = ''
+  emit('visibleChange', false)
+}
+
+const toggleDropdown = () => {
+  if (props.disabled) return
+  visible.value ? closeDropdown() : openDropdown()
+}
+
+const emitValue = (next: QiuCascaderValue) => {
+  emit('update:modelValue', next)
+  emit('change', next)
+}
+
+const expandTo = (opt: QiuCascaderOption, level: number) => {
+  const next = activePath.value.slice(0, level)
+  next[level] = opt
+  // 截断到当前层（展开子级由 menus 计算）
+  activePath.value = next.slice(0, level + 1)
+  emit('expand-change', activePath.value.map((n) => getOptValue(n, cfg.value)))
+}
+
+const selectPath = (path: QiuCascaderOption[]) => {
+  if (!path.length) return
+  if (isMultiple.value) {
+    const values = path.map((n) => getOptValue(n, cfg.value))
+    const key = values.join('/')
+    const last = values[values.length - 1]
+    const exists = selectedPaths.value.some((p) =>
+      emitPath.value ? p.join('/') === key : p[p.length - 1] === last
+    )
+    let nextPaths = [...selectedPaths.value]
+    if (exists) {
+      nextPaths = nextPaths.filter((p) =>
+        emitPath.value ? p.join('/') !== key : p[p.length - 1] !== last
+      )
+    } else {
+      nextPaths.push(emitPath.value ? values : [last])
+    }
+    const payload: QiuCascaderValue = emitPath.value
+      ? nextPaths
+      : nextPaths.map((p) => p[p.length - 1])
+    emitValue(payload)
+  } else {
+    emitValue(pathToValue(path) as QiuCascaderValue)
+    closeDropdown()
+  }
+}
+
+const onNodeClick = (opt: QiuCascaderOption, level: number) => {
+  if (isOptDisabled(opt, cfg.value)) return
+  const children = getOptChildren(opt, cfg.value)
+  if (children?.length) {
+    expandTo(opt, level)
+    // checkStrictly 单选：点击任意级即可选中；多选仍走 checkbox
+    if (checkStrictly.value && !isMultiple.value) {
+      selectPath([...activePath.value.slice(0, level), opt])
+    }
+    return
+  }
+  // 叶子节点
+  const path = [...activePath.value.slice(0, level), opt]
+  selectPath(path)
+}
+
+const onNodeHover = (opt: QiuCascaderOption, level: number) => {
+  if (expandTrigger.value !== 'hover') return
+  if (isOptDisabled(opt, cfg.value)) return
+  if (hasChildren(opt)) expandTo(opt, level)
+}
+
+const onCheckChange = (opt: QiuCascaderOption, level: number) => {
+  if (isOptDisabled(opt, cfg.value)) return
+  const path = [...activePath.value.slice(0, level), opt]
+  if (!checkStrictly.value && hasChildren(opt)) return
+  selectPath(path)
+  if (!isMultiple.value) closeDropdown()
+}
+
+const pickSuggestion = (item: FlatItem) => {
+  selectPath(item.path)
+}
+
+const removeTag = (value: string | number) => {
+  const nextPaths = selectedPaths.value.filter((p) => p[p.length - 1] !== value)
+  const payload: QiuCascaderValue = emitPath.value
+    ? nextPaths
+    : nextPaths.map((p) => p[p.length - 1])
+  emitValue(nextPaths.length ? payload : null)
+}
+
+const clear = () => {
+  emitValue(null)
+  emit('clear')
+  activePath.value = []
+}
+
+const onDocClick = (e: MouseEvent) => {
+  const t = e.target as Node
+  if (rootRef.value?.contains(t)) return
+  if (panelRef.value?.contains(t)) return
+  closeDropdown()
+}
+
+const onWinScroll = () => {
+  if (visible.value) updateDropdownPosition()
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', onDocClick)
+  window.addEventListener('resize', onWinScroll)
+  window.addEventListener('scroll', onWinScroll, true)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mousedown', onDocClick)
+  window.removeEventListener('resize', onWinScroll)
+  window.removeEventListener('scroll', onWinScroll, true)
+})
+
+watch(
+  () => props.modelValue,
+  () => {
+    if (!visible.value) syncActiveFromModel()
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+.qiu-cascader {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  vertical-align: middle;
+  font-size: 14px;
+
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.65;
+
+    .qiu-cascader__wrapper {
+      pointer-events: none;
+      background: var(--qiu-disabled-bg-color, #f5f7fa);
+    }
+  }
+
+  &--small {
+    font-size: 12px;
+
+    .qiu-cascader__wrapper {
+      min-height: 24px;
+      padding: 0 8px;
+    }
+  }
+
+  &--large .qiu-cascader__wrapper {
+    min-height: 40px;
+    padding: 0 15px;
+  }
+
+  &__wrapper {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 32px;
+    padding: 1px 11px;
+    cursor: pointer;
+    background: var(--qiu-fill-color-blank, #fff);
+    border: 1px solid var(--qiu-border-color, #dcdfe6);
+    border-radius: var(--qiu-border-radius-base, 4px);
+    transition: border-color 0.2s;
+
+    &:hover {
+      border-color: var(--qiu-border-color-hover, #c0c4cc);
+    }
+  }
+
+  &.is-focused .qiu-cascader__wrapper {
+    border-color: var(--qiu-color-primary);
+    outline: none;
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--qiu-color-primary) 20%, transparent);
+  }
+
+  &__selected {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--qiu-text-color-primary, #303133);
+
+    &.is-placeholder {
+      color: var(--qiu-text-color-placeholder, #a8abb2);
+    }
+  }
+
+  &__tags {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    gap: 4px;
+    align-items: center;
+    min-width: 0;
+    padding: 2px 0;
+  }
+
+  &__tag {
+    display: inline-flex;
+    gap: 2px;
+    align-items: center;
+    max-width: 100%;
+    padding: 0 6px;
+    font-size: 12px;
+    line-height: 20px;
+    color: var(--qiu-text-color-regular);
+    background: var(--qiu-fill-color, #f0f2f5);
+    border-radius: 4px;
+
+    &.is-collapse {
+      color: var(--qiu-color-primary);
+      background: var(--qiu-color-primary-light-9);
+    }
+  }
+
+  &__tag-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__tag-close {
+    padding: 0;
+    font-size: 14px;
+    line-height: 1;
+    color: var(--qiu-text-color-secondary);
+    cursor: pointer;
+    background: none;
+    border: 0;
+
+    &:hover {
+      color: var(--qiu-color-primary);
+    }
+  }
+
+  &__suffix {
+    display: inline-flex;
+    flex-shrink: 0;
+    gap: 4px;
+    align-items: center;
+    color: var(--qiu-text-color-placeholder);
+  }
+
+  &__clear {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    font-size: 14px;
+    line-height: 1;
+    color: var(--qiu-text-color-placeholder);
+    cursor: pointer;
+    background: var(--qiu-fill-color);
+    border: 0;
+    border-radius: 50%;
+
+    &:hover {
+      color: var(--qiu-text-color-secondary);
+    }
+  }
+
+  &__caret {
+    display: inline-block;
+    transition: transform 0.2s;
+
+    &.is-open {
+      transform: rotate(180deg);
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.qiu-cascader__dropdown {
+  box-sizing: border-box;
+  overflow: hidden;
+  background: var(--qiu-bg-color-overlay, #fff);
+  border: 1px solid var(--qiu-border-color-light, #e4e7ed);
+  border-radius: var(--qiu-border-radius-base, 4px);
+  box-shadow: var(--qiu-box-shadow-light, 0 2px 12px 0 rgb(0 0 0 / 10%));
+}
+
+.qiu-cascader__filter {
+  padding: 8px;
+  border-bottom: 1px solid var(--qiu-border-color-lighter, #ebeef5);
+}
+
+.qiu-cascader__filter-input {
+  box-sizing: border-box;
+  width: 100%;
+  height: 28px;
+  padding: 0 8px;
+  font-size: 13px;
+  color: var(--qiu-text-color-primary);
+  outline: none;
+  background: var(--qiu-fill-color-blank, #fff);
+  border: 1px solid var(--qiu-border-color, #dcdfe6);
+  border-radius: 4px;
+
+  &:focus {
+    border-color: var(--qiu-color-primary);
+  }
+}
+
+.qiu-cascader__menus {
+  display: flex;
+  max-height: 280px;
+}
+
+.qiu-cascader__menu {
+  min-width: 160px;
+  max-width: 220px;
+  max-height: 280px;
+  padding: 6px 0;
+  margin: 0;
+  overflow: auto;
+  list-style: none;
+  border-right: 1px solid var(--qiu-border-color-lighter, #ebeef5);
+
+  &:last-child {
+    border-right: 0;
+  }
+}
+
+.qiu-cascader__node {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  padding: 0 12px;
+  font-size: 14px;
+  line-height: 34px;
+  color: var(--qiu-text-color-regular, #606266);
+  cursor: pointer;
+  user-select: none;
+
+  &:hover {
+    background: var(--qiu-fill-color-light, #f5f7fa);
+  }
+
+  &.is-active,
+  &.is-selected {
+    color: var(--qiu-color-primary);
+    font-weight: 500;
+    background: var(--qiu-color-primary-light-9);
+  }
+
+  &.is-disabled {
+    color: var(--qiu-text-color-disabled, #c0c4cc);
+    cursor: not-allowed;
+    background: transparent;
+  }
+}
+
+.qiu-cascader__check {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  margin: 0;
+  cursor: pointer;
+
+  input {
+    margin: 0;
+    cursor: pointer;
+  }
+}
+
+.qiu-cascader__label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.qiu-cascader__arrow {
+  flex-shrink: 0;
+  color: var(--qiu-text-color-placeholder);
+  font-size: 16px;
+  line-height: 1;
+}
+
+.qiu-cascader__suggestions {
+  max-height: 280px;
+  overflow: auto;
+}
+
+.qiu-cascader__suggestion {
+  padding: 0 12px;
+  font-size: 14px;
+  line-height: 34px;
+  color: var(--qiu-text-color-regular);
+  cursor: pointer;
+
+  &:hover {
+    background: var(--qiu-fill-color-light, #f5f7fa);
+  }
+
+  &.is-selected {
+    color: var(--qiu-color-primary);
+    font-weight: 500;
+  }
+
+  &.is-disabled {
+    color: var(--qiu-text-color-disabled);
+    cursor: not-allowed;
+  }
+}
+
+.qiu-cascader__empty,
+.qiu-cascader__empty-item {
+  padding: 12px;
+  font-size: 13px;
+  color: var(--qiu-text-color-secondary);
+  text-align: center;
+  list-style: none;
+}
+
+.qiu-cascader-fade-enter-active,
+.qiu-cascader-fade-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.qiu-cascader-fade-enter-from,
+.qiu-cascader-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+</style>