xk-admin/apps/web-antd/src/components/canvas-spreadsheet/toolbar/SpreadsheetFindBar.vue

<script lang="ts" setup>
import { nextTick, ref, watch } from 'vue';

import { Button, Input } from 'ant-design-vue';

import MIcon from '#/components/icon/icon.vue';

const props = defineProps<{
  open: boolean;
  query: string;
  matchCount: number;
  activeIndex: number;
  isDark?: boolean;
}>();

const emit = defineEmits<{
  'update:query': [value: string];
  close: [];
  next: [];
  prev: [];
}>();

const inputRef = ref<InstanceType<typeof Input> | null>(null);

watch(
  () => props.open,
  (v) => {
    if (v) {
      void nextTick(() => {
        const el = inputRef.value?.$el?.querySelector?.('input') as
          | HTMLInputElement
          | undefined;
        el?.focus();
        el?.select();
      });
    }
  },
);

function onInput(v: string) {
  emit('update:query', v);
}

function onKeydown(e: KeyboardEvent) {
  if (e.key === 'Escape') {
    e.preventDefault();
    e.stopPropagation();
    emit('close');
    return;
  }
  if (e.key === 'Enter') {
    e.preventDefault();
    if (e.shiftKey) emit('prev');
    else emit('next');
  }
}

const countLabel = () => {
  if (!props.query.trim()) return '';
  if (props.matchCount === 0) return '无匹配';
  const current = props.activeIndex >= 0 ? props.activeIndex + 1 : 0;
  return `${current} / ${props.matchCount}`;
};
</script>

<template>
  <div
    v-if="open"
    class="spreadsheet-find-bar"
    :class="{ 'is-dark': isDark }"
    @mousedown.stop
  >
    <Input
      ref="inputRef"
      class="find-input"
      :value="query"
      placeholder="查找"
      size="small"
      allow-clear
      @update:value="onInput"
      @keydown="onKeydown"
    />
    <span class="find-count">{{ countLabel() }}</span>
    <Button
      class="find-nav-btn"
      size="small"
      type="text"
      title="上一个 (Shift+Enter)"
      :disabled="matchCount === 0"
      @click="emit('prev')"
    >
      <MIcon icon="mdi:chevron-up" />
    </Button>
    <Button
      class="find-nav-btn"
      size="small"
      type="text"
      title="下一个 (Enter)"
      :disabled="matchCount === 0"
      @click="emit('next')"
    >
      <MIcon icon="mdi:chevron-down" />
    </Button>
    <Button
      class="find-close-btn"
      size="small"
      type="text"
      title="关闭 (Esc)"
      @click="emit('close')"
    >
      <MIcon icon="mdi:close" />
    </Button>
  </div>
</template>

<style scoped lang="scss">
.spreadsheet-find-bar {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: #fff;
  border: 1px solid #e5e6eb;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

  &.is-dark {
    background: #1f1f1f;
    border-color: #424242;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }
}

.find-input {
  width: 180px;
}

.find-count {
  min-width: 52px;
  font-size: 12px;
  color: #86909c;
  text-align: center;
  white-space: nowrap;

  .is-dark & {
    color: rgba(255, 255, 255, 0.45);
  }
}

.find-nav-btn,
.find-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
</style>