@veltra/desktop 1.7.13 → 1.7.16

package/src/components/batch-edit/batch-edit.vue

@@ -9,15 +9,29 @@
     @focusin="handleFocusIn"
     @focusout="handleFocusOut"
     @keydown.capture="handleKeydown"
+    v-bind="$attrs"
   >
     <!-- 编辑列表 -->
     <BatchEditList :slots="slots" />
 
     <!-- 编辑表单 -->
-    <BatchEditForm ref="form" v-slot="scoped">
+    <BatchEditForm v-if="props.formMode === 'panel'" ref="form" v-slot="scoped">
       <slot name="form" v-bind="scoped" />
     </BatchEditForm>
   </u-layout>
+
+  <!-- 弹框模式：表单经 UDialog 呈现（teleport 到 body），快捷键监听落在弹框上，Esc 与弹框自带的 keyup.esc 去重 -->
+  <u-dialog
+    v-if="props.formMode === 'dialog'"
+    v-model="state.formVisible"
+    :class="cls.e('form-dialog')"
+    @keydown.capture="handleKeydown"
+    @keyup.esc.stop
+  >
+    <BatchEditForm ref="form" v-slot="scoped">
+      <slot name="form" v-bind="scoped" />
+    </BatchEditForm>
+  </u-dialog>
 </template>
 
 <script lang="ts" setup>
@@ -25,6 +39,7 @@ import { bem } from '@veltra/utils'
 import { computed, provide, useTemplateRef } from 'vue'
 
 import type { BatchEditEmits, BatchEditProps, BatchEditSlots, FormExposed } from '../../types'
+import { UDialog } from '../dialog'
 import { ULayout } from '../layout'
 import BatchEditForm from './batch-edit-form.vue'
 import BatchEditList from './batch-edit-list.vue'
@@ -34,9 +49,12 @@ import { useFeatures } from './use-features'
 import { useHandlers } from './use-handlers'
 import { useShortcutKey } from './use-shortcut-key'
 
-defineOptions({ name: 'UBatchEdit' })
+defineOptions({ name: 'UBatchEdit', inheritAttrs: false })
 
-const props = withDefaults(defineProps<BatchEditProps>(), { cols: () => ['1fr', '420px'] })
+const props = withDefaults(defineProps<BatchEditProps>(), {
+  cols: () => ['1fr', '420px'],
+  formMode: 'panel'
+})
 
 const emit = defineEmits<BatchEditEmits>()
 
@@ -61,7 +79,7 @@ const { handleFocusIn, handleFocusOut, handleKeydown, focused } = useShortcutKey
 })
 
 const cols = computed(() => {
-  return state.formVisible ? props.cols : undefined
+  return props.formMode === 'panel' && state.formVisible ? props.cols : undefined
 })
 
 provide(BatchEditDIKey, {

package/src/components/batch-edit/style.scss

@@ -52,6 +52,14 @@ $root-name: batch-edit;
     overflow: hidden;
     isolation: isolate;
     min-height: 0;
+
+    // 弹框模式：背景 / 圆角 / 阴影由弹框外壳提供，表单只保留内部布局并限高滚动
+    @include m.is(dialog) {
+      max-height: min(600px, 80vh);
+      background-color: transparent;
+      border-radius: 0;
+      box-shadow: none;
+    }
   }
 
   @include m.e(form-header) {
@@ -171,3 +179,15 @@ $root-name: batch-edit;
     flex-shrink: 0;
   }
 }
+
+// ---------- 弹框模式 ----------
+// 弹框 teleport 到 body，不在 .u-batch-edit 内，样式置于顶层
+#{fn.bem(batch-edit, form-dialog)} {
+  width: 560px;
+  max-width: calc(100vw - 32px);
+
+  // 表单自带头部（图标 / 标题 / 关闭按钮），弹框头部不再展示
+  #{fn.bem(dialog, header)} {
+    display: none;
+  }
+}

package/src/components/batch-edit/style.ts

@@ -1,5 +1,6 @@
 import '../action/style'
 import '../button/style'
+import '../dialog/style'
 import '../form/style'
 import '../icon/style'
 import '../layout/style'

package/src/components/batch-edit/use-dialog-effect.ts

@@ -10,12 +10,18 @@ interface Options {
 /**
  * 在表单上的副作用。
  * 包括：关闭表单
+ *
+ * sync 触发：弹框关闭会随即卸载表单组件，默认 pre 时序下 watcher 可能随组件卸载被丢弃
  */
 export function useDialogEffect(options: Options) {
   const dialogCtx = inject(DialogDIKey, undefined)
   if (!dialogCtx) return
 
-  watch(dialogCtx.visible, (visible) => {
-    !visible && options.closeForm?.()
-  })
+  watch(
+    dialogCtx.visible,
+    (visible) => {
+      !visible && options.closeForm?.()
+    },
+    { flush: 'sync' }
+  )
 }

package/src/components/batch-edit/use-edit-state.ts

@@ -1,4 +1,4 @@
-import { o } from '@cat-kit/core'
+import { copy, o } from '@cat-kit/core'
 import { nextTick, shallowReactive, shallowRef, watch, type ShallowRef } from 'vue'
 
 import type { BatchEditProps, BatchEditStates, FormExposed } from '../../types'
@@ -24,9 +24,37 @@ export function useEditState(options: Options) {
   /** 是否正在以编程方式重置/回显表单，此期间禁止 quick-edit 回写行数据 */
   const syncing = shallowRef(false)
 
+  /**
+   * model 初始快照。
+   * 面板模式由常驻挂载的 UForm 自行维护快照；dialog 模式表单随弹框卸载，
+   * UForm 快照会在每次打开时按已回显的 model 重拍，故这里单独保留一份供恢复
+   */
+  const initialModel = shallowRef<Record<string, any>>()
+
+  watch(
+    () => props.model,
+    (model) => {
+      initialModel.value = props.formMode === 'dialog' && model ? copy(model) : undefined
+    },
+    { immediate: true }
+  )
+
+  /** 重置表单数据到 model 初始快照 */
+  function resetModel() {
+    if (props.formMode !== 'dialog') {
+      formRef.value?.reset()
+      return
+    }
+
+    formRef.value?.clearValidate()
+    if (!props.model || !initialModel.value) return
+    for (const key of Object.keys(initialModel.value)) {
+      o(props.model).set(key, copy(initialModel.value[key]))
+    }
+  }
+
   function resetState() {
-    // 表单常驻挂载，重置即恢复到 model 初始快照
-    formRef.value?.reset()
+    resetModel()
 
     if (state.row) {
       state.row.isCurrent = false
@@ -47,7 +75,7 @@ export function useEditState(options: Options) {
       // 先重置回 model 初始快照，再同步回显行数据。
       // 同一 tick 内的连续写入会被表单字段 watcher 合并，
       // 重置产生的默认值不会触发 field:update 回写行数据
-      formRef.value?.reset()
+      resetModel()
 
       if (row) {
         if (props.model) {

package/src/components/batch-edit/use-handlers.ts

@@ -170,6 +170,12 @@ export function useHandlers(options: Options): EditReturned {
       }
       insert(item)
 
+      // 弹框模式保存成功即关闭，不走面板的连续新增
+      if (props.formMode === 'dialog') {
+        resetState()
+        return
+      }
+
       // 推进插入点，便于连续新增；并重置表单到初始默认值
       const next = last(state.indexPath) + 1
       state.indexPath = [...state.indexPath.slice(0, -1), next]
@@ -190,6 +196,10 @@ export function useHandlers(options: Options): EditReturned {
       Object.keys(item).forEach((key) => {
         o(row.data).set(key, o(item).get(key))
       })
+
+    if (props.formMode === 'dialog') {
+      resetState()
+    }
   })
 
   const handleDelete = runWithLoading(async (row: TableRow) => {

package/src/components/batch-edit/use-shortcut-key.ts

@@ -38,12 +38,16 @@ export function useShortcutKey(options: Options) {
   }
 
   /**
-   * 键盘快捷键（仅组件获焦时生效）：
+   * 键盘快捷键：
    * - Esc          关闭表单
    * - ⌘/Ctrl + S   保存（快速编辑模式下编辑行时除外）
+   *
+   * 面板模式仅组件获焦时生效；弹框模式表单被 teleport 到 body，
+   * 组件聚焦状态覆盖不到，改为弹框打开期间生效
    */
   function handleKeydown(e: KeyboardEvent) {
-    if (!focused.value) return
+    const active = props.formMode === 'dialog' ? state.formVisible : focused.value
+    if (!active) return
     if (props.readonly && e.key !== 'Escape') return
 
     if (e.key === 'Escape') return runEscape(e)

package/src/components/button/button.vue

@@ -58,8 +58,9 @@ const classList = computed(() => {
 })
 
 const ripple = computed(() => {
-  if (props.disabled || props.loading || props.text) return false
-  if (props.plain && props.type) {
+  if (props.disabled || props.loading) return false
+  // plain / text 变体无底色，波纹用类型色才能看清
+  if ((props.plain || props.text) && props.type) {
     return bem.is(`ripple-${props.type}`)
   }
   return true

package/src/components/file-viewer/__test__/helper.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest'
+
+import { FILE_VIEWER_KIND_LABEL, inferKind } from '../helper'
+
+describe('file-viewer helper', () => {
+  it('.ofd 按 OFD 类别识别，不落入 text 兜底', () => {
+    expect(inferKind('invoice.ofd')).toBe('ofd')
+  })
+
+  it('OFD 类别的展示标签为 OFD', () => {
+    expect(FILE_VIEWER_KIND_LABEL.ofd).toBe('OFD')
+  })
+})

package/src/components/file-viewer/file-viewer.vue

@@ -169,7 +169,7 @@
                     :class="isTransformable ? cls.e('previewer') : undefined"
                     :style="previewerStyle"
                     @error="handleChildError"
-                    @zoom-change="handlePdfZoomChange"
+                    @zoom-change="handlePreviewerZoomChange"
                   />
                 </div>
                 <div v-else :class="cls.e('empty')">
@@ -238,10 +238,12 @@ const MIN_SCALE = 0.5
 const MAX_SCALE = 3
 /** 每次缩放固定增减 10% */
 const SCALE_STEP = 0.1
-/** 使用 CSS transform 缩放的类型（PDF 由 EmbedPDF zoom 插件处理） */
+/** 使用 CSS transform 缩放的类型（PDF / OFD 由各自 previewer 内部缩放） */
 const TRANSFORMABLE_KINDS = new Set<FileViewerKind>(['image'])
 /** 工具栏显示缩放控件的类型 */
-const ZOOMABLE_KINDS = new Set<FileViewerKind>(['image', 'pdf'])
+const ZOOMABLE_KINDS = new Set<FileViewerKind>(['image', 'pdf', 'ofd'])
+/** 缩放由 previewer 内部实现、组件只透传命令并回显级别的类型 */
+const DELEGATED_ZOOM_KINDS = new Set<FileViewerKind>(['pdf', 'ofd'])
 
 const activeId = defineModel<string | undefined>('modelValue', { default: undefined })
 const openModel = defineModel<boolean | undefined>('open', { default: undefined })
@@ -253,7 +255,7 @@ const previewerRef = shallowRef<{
   resetZoom?: () => void
 }>()
 const scale = ref(1)
-const pdfZoomLevel = ref(1)
+const previewerZoomLevel = ref(1)
 const offsetX = ref(0)
 const offsetY = ref(0)
 const isDragging = ref(false)
@@ -268,6 +270,7 @@ const PreviewerMap: Record<FileViewerKind, ReturnType<typeof defineAsyncComponen
   pdf: defineAsyncComponent(() => import('./previewers/pdf-previewer.vue')),
   sheet: defineAsyncComponent(() => import('./previewers/sheet-previewer.vue')),
   docx: defineAsyncComponent(() => import('./previewers/docx-previewer.vue')),
+  ofd: defineAsyncComponent(() => import('./previewers/ofd-previewer.vue')),
   text: defineAsyncComponent(() => import('./previewers/text-previewer.vue'))
 }
 
@@ -312,11 +315,15 @@ const isTransformable = computed(
 
 const isZoomable = computed(() => !!activeFile.value && ZOOMABLE_KINDS.has(activeFile.value.kind))
 
-const isPdfActive = computed(() => activeFile.value?.kind === 'pdf')
+const isDelegatedZoom = computed(
+  () => !!activeFile.value && DELEGATED_ZOOM_KINDS.has(activeFile.value.kind)
+)
 
 const canPan = computed(() => isTransformable.value && scale.value > 1)
 
-const displayZoomLevel = computed(() => (isPdfActive.value ? pdfZoomLevel.value : scale.value))
+const displayZoomLevel = computed(() =>
+  isDelegatedZoom.value ? previewerZoomLevel.value : scale.value
+)
 
 const zoomPercent = computed(() => `${Math.round(displayZoomLevel.value * 100)}%`)
 
@@ -325,8 +332,8 @@ const zoomInDisabled = computed(() => !isZoomable.value || displayZoomLevel.valu
 const zoomOutDisabled = computed(() => !isZoomable.value || displayZoomLevel.value <= MIN_SCALE)
 
 const isTransformReset = computed(() => {
-  if (isPdfActive.value) {
-    return Math.abs(pdfZoomLevel.value - 1) < 0.02
+  if (isDelegatedZoom.value) {
+    return Math.abs(previewerZoomLevel.value - 1) < 0.02
   }
   return scale.value === 1 && offsetX.value === 0 && offsetY.value === 0
 })
@@ -378,7 +385,7 @@ function setScale(value: number) {
 
 function zoomIn() {
   if (!isZoomable.value) return
-  if (isPdfActive.value) {
+  if (isDelegatedZoom.value) {
     previewerRef.value?.zoomIn?.()
     return
   }
@@ -387,7 +394,7 @@ function zoomIn() {
 
 function zoomOut() {
   if (!isZoomable.value) return
-  if (isPdfActive.value) {
+  if (isDelegatedZoom.value) {
     previewerRef.value?.zoomOut?.()
     return
   }
@@ -395,9 +402,9 @@ function zoomOut() {
 }
 
 function resetTransform() {
-  if (isPdfActive.value) {
+  if (isDelegatedZoom.value) {
     previewerRef.value?.resetZoom?.()
-    pdfZoomLevel.value = 1
+    previewerZoomLevel.value = 1
     return
   }
   scale.value = 1
@@ -407,8 +414,8 @@ function resetTransform() {
   isDragging.value = false
 }
 
-function handlePdfZoomChange(level: number) {
-  pdfZoomLevel.value = level
+function handlePreviewerZoomChange(level: number) {
+  previewerZoomLevel.value = level
 }
 
 function isZoomWheel(e: WheelEvent): boolean {
@@ -462,7 +469,7 @@ function handleViewportPointerEnd(e: PointerEvent) {
 }
 
 function handleViewportDblclick() {
-  if (isPdfActive.value) return
+  if (isDelegatedZoom.value) return
   if (!isTransformable.value) return
   if (scale.value === 1) {
     setScale(2)
@@ -521,7 +528,7 @@ watch(
 watch(
   () => activeFile.value?.id,
   async () => {
-    pdfZoomLevel.value = 1
+    previewerZoomLevel.value = 1
     await nextTick()
     resetTransform()
   }

package/src/components/file-viewer/helper.ts

@@ -47,6 +47,7 @@ export function inferKind(name: string, explicit?: FileViewerKind): FileViewerKi
   if (ext === 'pdf') return 'pdf'
   if (SHEET_EXTS.has(ext)) return 'sheet'
   if (ext === 'docx') return 'docx'
+  if (ext === 'ofd') return 'ofd'
   if (TEXT_EXTS.has(ext)) return 'text'
   return 'text'
 }
@@ -57,6 +58,7 @@ export const FILE_VIEWER_KIND_LABEL: Record<FileViewerKind, string> = {
   pdf: 'PDF',
   sheet: 'XLS',
   docx: 'DOC',
+  ofd: 'OFD',
   text: 'TXT'
 }
 

package/src/components/file-viewer/previewers/ofd-previewer.vue

@@ -0,0 +1,216 @@
+<template>
+  <div :class="cls.e('ofd')">
+    <div ref="scroll" :class="cls.e('ofd-scroll')">
+      <div
+        v-for="(page, i) in pages"
+        :key="i"
+        :data-index="i"
+        :class="cls.e('ofd-page')"
+        :style="{
+          width: page.widthPx * zoomLevel + 'px',
+          height: page.heightPx * zoomLevel + 'px'
+        }"
+      >
+        <div v-if="page.svg" :class="cls.e('ofd-page-body')" v-html="page.svg" />
+      </div>
+      <div v-if="!pages.length && !loading" :class="cls.e('empty')">
+        <u-empty text="该文件没有可预览的页面" :size="32" />
+      </div>
+    </div>
+    <div v-if="loading" :class="cls.e('loading')">正在解析 OFD…</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { bem } from '@veltra/utils'
+import { nextTick, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'
+
+import type { FileViewerItem } from '../../../types/file-viewer'
+import { UEmpty } from '../../empty'
+import { toArrayBuffer } from '../helper'
+
+defineOptions({ name: 'UFileViewerOfdPreviewer' })
+
+/** 仅类型查询；运行时动态 import 按需加载，构建时随 alwaysBundle 内联进 dist */
+type OfdCoreModule = typeof import('@veltra/ofd-core')
+type OfdContainer = import('@veltra/ofd-core').OfdContainer
+type OfdZip = import('@veltra/ofd-core').OfdZip
+
+/** OFD 毫米 → CSS 像素（96dpi），与内核 SVG 输出的换算一致 */
+const PX_PER_MM = 96 / 25.4
+
+const MIN_ZOOM = 0.5
+const MAX_ZOOM = 3
+/** 每次缩放固定增减 10%，对齐 pdf 缩放配置 */
+const ZOOM_STEP = 0.1
+/** 可视区上下各预渲染一个视口高度的页 */
+const RENDER_MARGIN = '100% 0px'
+
+interface OfdPageView {
+  docIndex: number
+  pageIndex: number
+  /** 页面基准尺寸（缩放 1 时），毫米按 96dpi 换算为像素 */
+  widthPx: number
+  heightPx: number
+  /** null = 未渲染；'' = 已尝试但渲染失败，不再重试 */
+  svg: string | null
+}
+
+const props = defineProps<{ file: FileViewerItem }>()
+
+const emit = defineEmits<{
+  (e: 'error', err: unknown): void
+  (e: 'zoom-change', level: number): void
+}>()
+
+const cls = bem('file-viewer')
+const scrollEl = useTemplateRef<HTMLDivElement>('scroll')
+const loading = ref(true)
+const pages = ref<OfdPageView[]>([])
+const zoomLevel = ref(1)
+
+let controller: AbortController | undefined
+/** 递增 token：防止切文件后旧解析/渲染结果落地 */
+let loadToken = 0
+let ofdCore: OfdCoreModule | undefined
+let observer: IntersectionObserver | undefined
+let activeZip: OfdZip | undefined
+let activeContainer: OfdContainer | undefined
+/** 已进入渲染流程（进行中或已完成）的页，防止滚动重复触发 */
+const scheduledPages = new Set<number>()
+
+// ---- 缩放：作用于页面容器尺寸，滚动高度随之自适应 ----
+
+function clampZoom(value: number): number {
+  return Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, Math.round(value * 100) / 100))
+}
+
+function setZoom(value: number) {
+  const next = clampZoom(value)
+  if (zoomLevel.value === next) return
+  zoomLevel.value = next
+  emit('zoom-change', next)
+}
+
+function zoomIn() {
+  setZoom(zoomLevel.value + ZOOM_STEP)
+}
+
+function zoomOut() {
+  setZoom(zoomLevel.value - ZOOM_STEP)
+}
+
+function resetZoom() {
+  setZoom(1)
+}
+
+defineExpose({ zoomIn, zoomOut, resetZoom })
+
+// ---- 解析与懒渲染 ----
+
+/** 动态加载 ofd-core chunk；首次加载后缓存模块复用 */
+async function resolveOfdCore(): Promise<OfdCoreModule> {
+  const mod = ofdCore ?? (await import('@veltra/ofd-core'))
+  ofdCore = mod
+  return mod
+}
+
+function teardownRender() {
+  observer?.disconnect()
+  observer = undefined
+  activeZip = undefined
+  activeContainer = undefined
+  scheduledPages.clear()
+}
+
+function observePages() {
+  const root = scrollEl.value
+  if (!root || typeof IntersectionObserver === 'undefined') return
+  observer = new IntersectionObserver(
+    (entries) => {
+      const token = loadToken
+      for (const entry of entries) {
+        if (!entry.isIntersecting) continue
+        observer?.unobserve(entry.target)
+        const index = Number((entry.target as HTMLElement).dataset.index)
+        if (Number.isNaN(index) || scheduledPages.has(index)) continue
+        scheduledPages.add(index)
+        void renderPage(index, token)
+      }
+    },
+    { root, rootMargin: RENDER_MARGIN }
+  )
+  for (const el of root.querySelectorAll<HTMLElement>('[data-index]')) {
+    observer.observe(el)
+  }
+}
+
+/** 渲染单页 SVG；失败置空串避免滚动时反复重试同一页 */
+async function renderPage(index: number, token: number) {
+  const page = pages.value[index]
+  const core = ofdCore
+  if (!page || page.svg !== null || !core || !activeZip || !activeContainer) return
+  try {
+    const svg = await core.pageToSvg(activeZip, activeContainer, page.docIndex, page.pageIndex)
+    if (token !== loadToken) return
+    pages.value[index] = { ...page, svg }
+  } catch (err) {
+    if (token !== loadToken) return
+    pages.value[index] = { ...page, svg: '' }
+    emit('error', err)
+  }
+}
+
+async function load() {
+  const token = ++loadToken
+  controller?.abort()
+  controller = new AbortController()
+  teardownRender()
+  loading.value = true
+  pages.value = []
+
+  try {
+    const core = await resolveOfdCore()
+    if (token !== loadToken) return
+
+    const buf = await toArrayBuffer(props.file.src, controller.signal)
+    if (token !== loadToken) return
+    const zip = core.openOfdZip(new Uint8Array(buf))
+    const container = await core.parseOfdContainer(zip)
+    if (token !== loadToken) return
+
+    activeZip = zip
+    activeContainer = container
+    // 未声明尺寸时按 A4 兜底，与内核 pageToSvg 的兜底一致
+    pages.value = container.docs.flatMap((doc, docIndex) =>
+      doc.pages.map((page) => {
+        const size = page.size ?? doc.pageSize ?? { width: 210, height: 297 }
+        return {
+          docIndex,
+          pageIndex: page.index,
+          widthPx: Math.round(size.width * PX_PER_MM),
+          heightPx: Math.round(size.height * PX_PER_MM),
+          svg: null
+        }
+      })
+    )
+    await nextTick()
+    if (token !== loadToken) return
+    observePages()
+  } catch (err) {
+    if (token !== loadToken) return
+    if ((err as { name?: string })?.name === 'AbortError') return
+    emit('error', err)
+  } finally {
+    if (token === loadToken) loading.value = false
+  }
+}
+
+watch(() => props.file, load, { immediate: true })
+
+onBeforeUnmount(() => {
+  controller?.abort()
+  teardownRender()
+  pages.value = []
+})
+</script>

package/src/components/file-viewer/style.scss

@@ -302,6 +302,12 @@
     --u-file-viewer-kind-bg: rgba(100, 116, 139, 0.1);
   }
 
+  @include m.em(badge, ofd) {
+    --u-file-viewer-kind: #7c3aed;
+    --u-file-viewer-kind-border: rgba(124, 58, 237, 0.28);
+    --u-file-viewer-kind-bg: rgba(124, 58, 237, 0.1);
+  }
+
   @include m.e(stage) {
     display: flex;
     flex: 1;
@@ -686,6 +692,33 @@
       0 0 0 1px rgba(255, 255, 255, 0.04);
   }
 
+  @include m.e(ofd) {
+    position: absolute;
+    inset: 0;
+  }
+
+  @include m.e(ofd-scroll) {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+  }
+
+  @include m.e(ofd-page) {
+    margin: 24px auto;
+    background: #fff;
+    box-shadow: var(--u-file-viewer-page-shadow);
+
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &.is-modal &__ofd-page {
+    margin: clamp(24px, 3vw, 44px) auto;
+  }
+
   @include m.e(docx) {
     position: absolute;
     inset: 0;

package/src/components/form-item/style.scss

@@ -52,7 +52,17 @@ $root-name: form-item;
     #{fn.bem(multi-tree-select)},
     #{fn.bem(auto-complete)},
     #{fn.bem(textarea--more)} {
-      border-color: fn.use-var(color, danger);
+      // hover 的 primary 描边与错误态同权重，按源序分胜负：错误态显式压住，避免悬浮时描边回蓝
+      &,
+      &:hover,
+      &.is-focus {
+        border-color: fn.use-var(color, danger);
+      }
+
+      // 聚焦光晕与描边同色，错误态转红
+      &.is-focus {
+        box-shadow: fn.use-var(focus-ring, danger);
+      }
     }
   }