@opendesign-plus/components 0.0.1-rc.3 → 0.0.1-rc.31

package/src/components/header-search/OHeaderSearch.vue

@@ -0,0 +1,628 @@
+<script setup lang="ts">
+import { computed, ref, toRef, watch } from 'vue';
+import { OIcon } from '@opensig/opendesign';
+import { onClickOutside, useDebounceFn } from '@vueuse/core';
+import { useScreen } from '@opendesign-plus/composables';
+
+import SearchImageInput from '../search/internal/SearchImageInput.vue';
+import SearchPanel from '../search/internal/SearchPanel.vue';
+import { useSearchHistory } from '../search/composables/useSearchHistory';
+import { useI18n } from '@/i18n';
+import type {
+  OSearchPayload,
+  OSearchRecommendItem,
+  OSearchUploadImageFn,
+} from '../search/types';
+
+import IconSearch from '~icons/components/icon-header-search.svg';
+import IconBack from '~icons/components/icon-header-back.svg';
+
+export interface OHeaderSearchPropsT {
+  /** ---- Backward-compatible props ---- */
+  modelValue?: string;
+  placeholder?: string; // 搜索框默认提示
+  expandedPlaceholder?: string; // 搜索框展开后提示
+  expandDirection?: 'left' | 'right'; // 搜索框展开方向，默认为 left
+  clearable?: boolean; // 是否显示清除按钮，默认显示
+  historyItems?: string[]; // 搜索历史记录
+  maxHistoryCount?: number; // 最多保存的搜索历史记录数，默认 6 条
+  storeHistory?: boolean; // 是否使用 localStorage 存储搜索历史记录，存储之后初始化时会自动加载搜索历史记录，默认为 false
+  historyTitle?: string; // 历史记录标题
+  storageKey?: string; // localStorage 存储搜索历史记录的 key，默认为 search-history
+  hotItems?: string[]; // 热门搜索
+  hotTitle?: string; // 推荐搜索标题
+  /** Legacy plain-string recommend list. Shown when input is empty. */
+  recommendItems?: string[];
+  searchUrl?: string;
+  searchUrlOpenBlank?: boolean;
+  searchTextMobile?: string;
+  imagePlaceholder?: string;
+  enableImageSearch?: boolean;
+  imageUrl?: string;
+  uploadImage?: OSearchUploadImageFn;
+  maxImageSize?: number;
+  imageUploadTooltip?: string;
+  suggestItems?: OSearchRecommendItem[];
+  onestepItems?: OSearchRecommendItem[];
+  suggestTitle?: string;
+  onestepTitle?: string;
+  noDataText?: string;
+  highlightKeyword?: boolean;
+  /** Debounce ms for the `input` event */
+  debounce?: number;
+  /** Auto-record history on search; default true */
+  autoSaveHistory?: boolean;
+  /** Show "no data" empty state in suggest section while typing */
+  showSuggestEmpty?: boolean;
+  allowedImageTypes?: string[];
+  /** 强制指定移动端模式，不传时由内部 lePadV 断点自动判断 */
+  mobile?: boolean;
+}
+
+const props = withDefaults(defineProps<OHeaderSearchPropsT>(), {
+  modelValue: '',
+  expandDirection: 'left',
+  clearable: true,
+  historyItems: () => [],
+  maxHistoryCount: 6,
+  storeHistory: false,
+  storageKey: 'search-history',
+  hotItems: () => [],
+  recommendItems: () => [],
+  searchUrlOpenBlank: true,
+  enableImageSearch: false,
+  imageUrl: '',
+  maxImageSize: 10 * 1024 * 1024,
+  suggestItems: () => [],
+  onestepItems: () => [],
+  highlightKeyword: true,
+  debounce: 300,
+  autoSaveHistory: true,
+  showSuggestEmpty: true,
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+  (e: 'update:historyItems', value: string[]): void;
+  (e: 'update:imageUrl', url: string): void;
+  (e: 'focus'): void;
+  (e: 'blur'): void;
+  (e: 'input', val: string): void;
+  (e: 'clear'): void;
+  /** Backward compatible: previously `(val: string)`. Now emits payload. */
+  (e: 'search', payload: OSearchPayload): void;
+  (e: 'recommend-click', item: OSearchRecommendItem | string): void;
+  (e: 'onestep-click', item: OSearchRecommendItem): void;
+  (e: 'history-click', val: string): void;
+  (e: 'hot-click', val: string): void;
+  (e: 'hot-refresh'): void;
+  (e: 'delete-history', value: string[]): void;
+  (e: 'delete-history-item', value: string): void;
+  (e: 'image-upload-start', file: File): void;
+  (e: 'image-upload-success', url: string, file: File): void;
+  (e: 'image-upload-error', error: unknown, file: File): void;
+  (e: 'image-validate-error', reason: 'size' | 'type', file: File): void;
+}>();
+
+const { lePadV } = useScreen();
+const { t } = useI18n();
+
+// mobile=true → 强制移动端；未传或 false → 回退到内部断点 lePadV
+const isMobileMode = computed(() => props.mobile === true || lePadV.value);
+
+const wrapperRef = ref<HTMLElement | null>(null);
+const inputRef = ref<InstanceType<typeof SearchImageInput>>();
+const isShowDrawer = ref(false);
+const internalImageStaged = ref(false);
+const internalImageUrl = ref('');
+const hasImage = computed(() => !!props.imageUrl || internalImageStaged.value);
+
+const innerValue = computed({
+  get: () => props.modelValue,
+  set: (val: string) => emit('update:modelValue', val),
+});
+
+const historyItemsRef = toRef(props, 'historyItems');
+const storageKeyRef = toRef(props, 'storageKey');
+const storeHistoryRef = toRef(props, 'storeHistory');
+const maxHistoryRef = toRef(props, 'maxHistoryCount');
+
+const history = useSearchHistory({
+  initial: historyItemsRef,
+  storageKey: storageKeyRef,
+  storeHistory: storeHistoryRef,
+  maxHistoryCount: maxHistoryRef,
+  onChange: (items) => emit('update:historyItems', items),
+});
+
+const placeholder = computed(() => {
+  if (props.imageUrl) {
+    return props.imagePlaceholder ?? t('search.extendedPlaceholder');
+  }
+  if (isShowDrawer.value && props.enableImageSearch) {
+    return props.imagePlaceholder ?? t('search.imagePlaceholder');
+  }
+  if (isShowDrawer.value) {
+    return props.expandedPlaceholder ?? t('search.expandedPlaceholder');
+  }
+  return props.placeholder ?? t('search.placeholder');
+});
+
+// debounce input event
+const emitInputDebounced = useDebounceFn((val: string) => emit('input', val), () => props.debounce);
+watch(innerValue, (val) => emitInputDebounced(val));
+
+// click outside (desktop only)
+onClickOutside(wrapperRef, () => {
+  if (isMobileMode.value) return;
+  closeDrawer();
+});
+
+const openDrawer = () => {
+  isShowDrawer.value = true;
+};
+
+const closeDrawer = () => {
+  if (isMobileMode.value) return;
+  isShowDrawer.value = false;
+};
+
+const handleFocus = () => {
+  openDrawer();
+  emit('focus');
+};
+
+const handleBlur = () => {
+  emit('blur');
+};
+
+const runSearch = async (overrideKeyword?: string) => {
+  if (inputRef.value?.getIsUploading?.()) {
+    await inputRef.value.awaitUpload?.();
+  }
+  const keyword = overrideKeyword !== undefined ? overrideKeyword.trim() : innerValue.value.trim();
+  const imageUrl = internalImageUrl.value || inputRef.value?.getUploadedUrl?.() || props.imageUrl;
+
+  if (!keyword && !imageUrl) return;
+
+  if (props.autoSaveHistory && keyword) {
+    history.push(keyword);
+  }
+
+  emit('search', { keyword, imageUrl: imageUrl || undefined });
+  inputRef.value?.blur?.();
+  isShowDrawer.value = false;
+
+  if (props.searchUrl) {
+    const params = new URLSearchParams();
+    if (keyword) params.set('q', keyword);
+    if (imageUrl) params.set('imageUrl', imageUrl);
+    const sep = props.searchUrl.includes('?') ? '&' : '?';
+    const url = `${props.searchUrl}${sep}${params.toString()}`;
+    if (typeof window !== 'undefined') {
+      window.open(url, props.searchUrlOpenBlank ? '_blank' : '_self', props.searchUrlOpenBlank ? 'noopener,noreferrer' : '');
+    }
+  }
+};
+
+const handleClear = () => {
+  innerValue.value = '';
+  emit('clear');
+  inputRef.value?.focus?.();
+};
+
+const handleSuggestClick = (item: OSearchRecommendItem) => {
+  emit('recommend-click', item);
+  innerValue.value = item.key;
+  runSearch(item.key ?? '');
+};
+
+const handleRecommendClick = (val: string) => {
+  emit('recommend-click', val);
+  runSearch(val);
+};
+
+const handleOnestepClick = (item: OSearchRecommendItem) => {
+  emit('onestep-click', item);
+  if (item.path && typeof window !== 'undefined') {
+    window.open(item.path, '_blank', 'noopener,noreferrer');
+  }
+};
+
+const handleHistoryClick = (val: string) => {
+  emit('history-click', val);
+  runSearch(val);
+};
+
+const handleHotClick = (val: string) => {
+  emit('hot-click', val);
+  runSearch(val);
+};
+
+const handleHistoryRemove = (val: string) => {
+  history.remove(val);
+  emit('delete-history-item', val);
+};
+
+const handleHistoryClear = () => {
+  const removed = [...history.items.value];
+  history.clearAll();
+  emit('delete-history', removed);
+};
+
+const handleBack = () => {
+  innerValue.value = '';
+  internalImageStaged.value = false;
+  emit('update:imageUrl', '');
+  isShowDrawer.value = false;
+};
+
+const handleImageUploadStart = (file: File) => {
+  internalImageStaged.value = true;
+  internalImageUrl.value = '';
+  emit('image-upload-start', file);
+};
+
+const handleImageUploadSuccess = (url: string, file: File) => {
+  internalImageUrl.value = url;
+  emit('update:imageUrl', url);
+  emit('image-upload-success', url, file);
+};
+
+const handleImageClear = () => {
+  internalImageStaged.value = false;
+  internalImageUrl.value = '';
+  emit('update:imageUrl', '');
+};
+
+const showPanel = computed(() => {
+  if (!isShowDrawer.value) return false;
+  if (hasImage.value) return false;
+  return true;
+});
+
+defineExpose({
+  focus: () => inputRef.value?.focus?.(),
+  blur: () => inputRef.value?.blur?.(),
+  open: openDrawer,
+  close: closeDrawer,
+  search: runSearch,
+});
+</script>
+
+<template>
+  <div class="o-header-search" :class="{ 'is-mobile-mode': isMobileMode }">
+    <div
+      ref="wrapperRef"
+      class="o-header-search-pos"
+      :class="{
+        'is-pc': !isMobileMode,
+        'is-mobile': isMobileMode,
+        'is-left': expandDirection === 'left',
+        'is-right': expandDirection === 'right',
+        'is-focus': isShowDrawer,
+      }"
+    >
+      <div class="o-header-search-row" :class="{ 'is-focus': isShowDrawer }">
+        <OIcon v-if="isMobileMode && isShowDrawer" class="o-header-search-back-icon" @click="handleBack">
+          <IconBack />
+        </OIcon>
+
+        <SearchImageInput
+          ref="inputRef"
+          v-model="innerValue"
+          :image-url="imageUrl"
+          :placeholder="placeholder"
+          :enable-image-search="enableImageSearch"
+          :upload-image="uploadImage"
+          :max-image-size="maxImageSize"
+          :image-upload-tooltip="imageUploadTooltip"
+          :clearable="clearable && isShowDrawer"
+          :expanded="isShowDrawer && hasImage"
+          :allowed-image-types="allowedImageTypes"
+          size="medium"
+          class="o-header-search-input"
+          :class="{ 'is-collapsed': !isShowDrawer }"
+          @update:imageUrl="(url: string) => emit('update:imageUrl', url)"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @enter="runSearch"
+          @clear="handleClear"
+          @image-clear="handleImageClear"
+          @image-upload-start="handleImageUploadStart"
+          @image-upload-success="handleImageUploadSuccess"
+          @image-upload-error="(error: unknown, file: File) => emit('image-upload-error', error, file)"
+          @image-validate-error="(reason: 'size' | 'type', file: File) => emit('image-validate-error', reason, file)"
+        >
+          <template #prefix><slot name="input-prefix" /></template>
+          <template #suffix="slotProps"><slot name="input-suffix" v-bind="slotProps" /></template>
+          <template v-if="$slots['image-preview']" #preview="slotProps">
+            <slot name="image-preview" v-bind="slotProps" />
+          </template>
+        </SearchImageInput>
+
+        <span v-if="isMobileMode && isShowDrawer" class="o-header-search-text" @click="runSearch">
+          {{ searchTextMobile ?? t('search') }}
+        </span>
+      </div>
+
+      <Transition name="o-header-search-drawer">
+        <div v-if="showPanel" class="o-header-search-drawer">
+          <slot
+            name="drawer"
+            :recommend-items="recommendItems"
+            :history-items="history.items.value"
+            :hot-items="hotItems"
+            :suggest-items="suggestItems"
+            :onestep-items="onestepItems"
+            :keyword="modelValue"
+          >
+            <SearchPanel
+              :keyword="modelValue"
+              :onestep-items="onestepItems"
+              :onestep-title="onestepTitle"
+              :suggest-items="suggestItems"
+              :suggest-title="suggestTitle"
+              :recommend-items="recommendItems"
+              :history-items="history.items.value"
+              :history-title="historyTitle"
+              :hot-items="hotItems"
+              :hot-title="hotTitle"
+              :no-data-text="noDataText"
+              :highlight-keyword="highlightKeyword"
+              :hide-on-keyword="true"
+              :show-suggest-empty="showSuggestEmpty"
+              @onestep-click="handleOnestepClick"
+              @suggest-click="handleSuggestClick"
+              @recommend-click="handleRecommendClick"
+              @history-click="handleHistoryClick"
+              @history-remove="handleHistoryRemove"
+              @history-clear="handleHistoryClear"
+              @hot-click="handleHotClick"
+              @hot-refresh="emit('hot-refresh')"
+            >
+              <template v-if="$slots['recommend-header']" #recommend-header="slotProps">
+                <slot name="recommend-header" v-bind="slotProps" />
+              </template>
+              <template v-if="$slots['recommend-content']" #recommend-content="slotProps">
+                <slot name="recommend-content" v-bind="slotProps" />
+              </template>
+              <template v-if="$slots['onestep-header']" #onestep-header="slotProps">
+                <slot name="onestep-header" v-bind="slotProps" />
+              </template>
+              <template v-if="$slots['onestep-content']" #onestep-content="slotProps">
+                <slot name="onestep-content" v-bind="slotProps" />
+              </template>
+              <template v-if="$slots['suggest-header']" #suggest-header="slotProps">
+                <slot name="suggest-header" v-bind="slotProps" />
+              </template>
+              <template v-if="$slots['suggest-content']" #suggest-content="slotProps">
+                <slot name="suggest-content" v-bind="slotProps" />
+              </template>
+              <template v-if="$slots['history-header']" #history-header="slotProps">
+                <slot name="history-header" v-bind="slotProps" />
+              </template>
+              <template v-if="$slots['history-content']" #history-content="slotProps">
+                <slot name="history-content" v-bind="slotProps" />
+              </template>
+              <template v-if="$slots['hot-header']" #hot-header="slotProps">
+                <slot name="hot-header" v-bind="slotProps" />
+              </template>
+              <template v-if="$slots['hot-content']" #hot-content="slotProps">
+                <slot name="hot-content" v-bind="slotProps" />
+              </template>
+            </SearchPanel>
+          </slot>
+        </div>
+      </Transition>
+    </div>
+
+    <OIcon v-if="isMobileMode" class="o-header-search-mobile-icon" @click="openDrawer">
+      <IconSearch />
+    </OIcon>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.o-header-search {
+  position: relative;
+  width: 160px;
+  height: 32px;
+
+  @include respond-to('<=laptop') {
+    width: 120px;
+  }
+
+  @include respond-to('<=pad_v') {
+    width: 24px;
+    height: 24px;
+    margin-left: auto;
+  }
+}
+
+.o-header-search-pos {
+  position: absolute;
+  top: 0;
+  width: fit-content;
+  background-color: var(--o-color-fill2);
+  z-index: 100;
+
+  &.is-left {
+    right: 0;
+  }
+  &.is-right {
+    left: 0;
+  }
+  &.is-mobile {
+    display: none;
+  }
+  &.is-pc.is-focus {
+    box-shadow: var(--o-shadow-2);
+    top: calc(-1 * var(--o-gap-4));
+    border-radius: var(--o-radius-xs);
+  }
+
+  &.is-mobile.is-focus {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    display: block;
+    height: 100vh;
+    background-color: var(--o-color-fill2);
+    z-index: 100;
+    overflow-y: auto;
+  }
+}
+
+.o-header-search-row {
+  display: flex;
+  align-items: start;
+
+  &.is-focus {
+    padding: var(--o-gap-4);
+    border-radius: var(--o-radius-xs);
+
+    @include respond-to('<=pad_v') {
+      gap: var(--o-gap-4);
+      padding: 10px var(--o-gap-4) var(--o-gap-4) var(--o-gap-4);
+      border-radius: unset;
+    }
+  }
+}
+
+.o-header-search-input {
+  width: 160px;
+  transition: width var(--o-duration-m2) var(--o-easing-standard-in);
+
+  @include respond-to('<=laptop') {
+    width: 120px;
+  }
+}
+
+.o-header-search-row.is-focus .o-header-search-input {
+  width: 480px;
+
+  @include respond-to('laptop') {
+    width: 360px;
+  }
+
+  @include respond-to('pad_h') {
+    width: 272px;
+  }
+
+  @include respond-to('<=pad_v') {
+    flex: 1;
+    width: auto;
+  }
+}
+
+.o-header-search-back-icon {
+  cursor: pointer;
+  color: var(--o-color-info1);
+  font-size: 20px;
+  height: 30px;
+}
+
+.o-header-search-text {
+  white-space: nowrap;
+  font-size: 16px;
+  line-height: 24px;
+  cursor: pointer;
+  color: var(--o-color-info1);
+  height: 30px;
+
+  @include hover {
+    color: var(--o-color-primary1);
+  }
+}
+
+.o-header-search-drawer {
+  position: absolute;
+  width: 100%;
+  padding: var(--o-gap-4);
+  padding-top: 0;
+  background-color: var(--o-color-fill2);
+  box-shadow: var(--o-shadow-2);
+  border-radius: 0 0 var(--o-radius-xs) var(--o-radius-xs);
+
+  @include respond-to('<=pad_v') {
+    position: static;
+    height: calc(100vh - 50px);
+    padding-top: 0;
+    overflow-y: auto;
+    box-shadow: unset;
+    border-radius: unset;
+  }
+}
+
+.o-header-search-drawer::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(-1 * var(--o-gap-4));
+  height: calc(var(--o-gap-4) + 1px);
+  background-color: var(--o-color-fill2);
+
+  @include respond-to('<=pad_v') {
+    display: none;
+  }
+}
+
+.o-header-search-mobile-icon {
+  font-size: 24px;
+  line-height: 28px;
+  color: var(--o-color-info1);
+  cursor: pointer;
+  display: none;
+
+  @include respond-to('<=pad_v') {
+    display: block;
+  }
+}
+
+.o-header-search-drawer-enter-active {
+  transition: opacity var(--o-duration-m1);
+}
+
+.o-header-search-drawer-enter-from {
+  opacity: 0;
+}
+
+// 外部传入 mobile=true 时，复制 <=pad_v 的全部样式，不依赖媒体查询
+.o-header-search.is-mobile-mode {
+  width: 24px;
+  height: 24px;
+
+  .o-header-search-mobile-icon {
+    display: block;
+  }
+
+  .o-header-search-row.is-focus {
+    gap: var(--o-gap-4);
+    padding: 10px var(--o-gap-4) var(--o-gap-4) var(--o-gap-4);
+    border-radius: unset;
+  }
+
+  .o-header-search-row.is-focus .o-header-search-input {
+    flex: 1;
+    width: auto;
+  }
+
+  .o-header-search-drawer {
+    position: static;
+    height: calc(100vh - 50px);
+    padding-top: 0;
+    overflow-y: auto;
+    box-shadow: unset;
+    border-radius: unset;
+
+    &::before {
+      display: none;
+    }
+  }
+}
+</style>

package/src/components/header-search/index.ts

@@ -0,0 +1,10 @@
+import _OHeaderSearch from './OHeaderSearch.vue';
+import type { App } from 'vue';
+
+const OHeaderSearch = Object.assign(_OHeaderSearch, {
+  install(app: App) {
+    app.component('OHeaderSearch', _OHeaderSearch);
+  },
+});
+
+export { OHeaderSearch };