@opendesign-plus-test/components 0.0.1-rc.47 → 0.0.1-rc.48

package/src/components/OHeaderSearch.vue

@@ -1,18 +1,24 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
-import { OIcon, OInput, ODivider } from '@opensig/opendesign';
-import { onClickOutside } from '@vueuse/core';
+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 IconClose from '~icons/components/icon-close.svg';
+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 IconDelete from '~icons/components/icon-header-delete.svg';
-import IconDeleteAll from '~icons/components/icon-delete.svg';
 import IconBack from '~icons/components/icon-header-back.svg';
 
-import { useI18n } from '@/i18n';
-
 export interface OHeaderSearchPropsT {
+  /** ---- Backward-compatible props ---- */
   modelValue?: string;
   placeholder?: string; // 搜索框默认提示
   expandedPlaceholder?: string; // 搜索框展开后提示
@@ -20,28 +26,37 @@ export interface OHeaderSearchPropsT {
   clearable?: boolean; // 是否显示清除按钮，默认显示
   historyItems?: string[]; // 搜索历史记录
   maxHistoryCount?: number; // 最多保存的搜索历史记录数，默认 6 条
-  storeHistory?: boolean; // 是否使用 localStorage 存储搜索历史记录，存储之后初始化时会自动加载搜索历史记录，默认为 false，
+  storeHistory?: boolean; // 是否使用 localStorage 存储搜索历史记录，存储之后初始化时会自动加载搜索历史记录，默认为 false
   historyTitle?: string; // 历史记录标题
   storageKey?: string; // localStorage 存储搜索历史记录的 key，默认为 search-history
   hotItems?: string[]; // 热门搜索
   hotTitle?: string; // 推荐搜索标题
-  recommendItems?: string[]; // 推荐搜索
-  searchUrl?: string; // 搜索页面 url，不为空点击热门搜索、历史记录、推荐搜索和回车搜索时自动打开页面
-  searchUrlOpenBlank?: boolean; // 是否在新窗口打开搜索页面，默认为 true
-  searchTextMobile?: 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[];
 }
 
-export interface OHeaderSearchEmitsT {
-  (e: 'update:modelValue', value: string): void;
-  (e: 'update:historyItems', value: string[]): void;
-  (e: 'clear'): void;
-  (e: 'search', value: string): void;
-  (e: 'delete-history', value: string[]): void;
-  (e: 'delete-history-item', value: string): void;
-}
-const { lePadV } = useScreen();
-const { t } = useI18n();
-
 const props = withDefaults(defineProps<OHeaderSearchPropsT>(), {
   modelValue: '',
   expandDirection: 'left',
@@ -53,235 +68,349 @@ const props = withDefaults(defineProps<OHeaderSearchPropsT>(), {
   hotItems: () => [],
   recommendItems: () => [],
   searchUrlOpenBlank: true,
+  enableImageSearch: false,
+  imageUrl: '',
+  maxImageSize: 10 * 1024 * 1024,
+  suggestItems: () => [],
+  onestepItems: () => [],
+  highlightKeyword: true,
+  debounce: 300,
+  autoSaveHistory: true,
+  showSuggestEmpty: true,
 });
 
-const emit = defineEmits<OHeaderSearchEmitsT>();
+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();
 
-const searchInput = ref(props.modelValue);
-const searchHistoryItems = ref(props.historyItems);
+const wrapperRef = ref<HTMLElement | null>(null);
+const inputRef = ref<InstanceType<typeof SearchImageInput>>();
 const isShowDrawer = ref(false);
-const inputRef = ref();
+const internalImageStaged = ref(false);
+const internalImageUrl = ref('');
+const hasImage = computed(() => !!props.imageUrl || internalImageStaged.value);
 
-const isShowClearIcon = computed(() => {
-  return (!lePadV.value && isShowDrawer.value) || (lePadV.value && searchInput.value);
+const innerValue = computed({
+  get: () => props.modelValue,
+  set: (val: string) => emit('update:modelValue', val),
 });
 
-watch(
-  () => props.modelValue,
-  (val) => {
-    if (searchInput.value !== val) {
-      searchInput.value = val;
-    }
-  }
-);
-
-watch(
-  () => searchInput.value,
-  (val) => {
-    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),
+});
 
-watch(
-  () => props.historyItems,
-  (val) => {
-    if (searchHistoryItems.value !== val) {
-      searchHistoryItems.value = val;
-    }
+const placeholder = computed(() => {
+  if (props.imageUrl) {
+    return props.imagePlaceholder ?? t('search.extendedPlaceholder');
   }
-);
-
-watch(
-  () => searchHistoryItems.value,
-  (val) => {
-    emit('update:historyItems', val);
+  if (isShowDrawer.value && props.enableImageSearch) {
+    return props.imagePlaceholder ?? t('search.imagePlaceholder');
   }
-);
-
-onMounted(() => {
-  if (props.storeHistory && props.storageKey) {
-    try {
-      const history = JSON.parse(localStorage.getItem(props.storageKey) || '[]');
-      if (Array.isArray(history) && history.length) {
-        searchHistoryItems.value = Array.from(new Set([...searchHistoryItems.value, ...history]));
-      }
-    } catch {
-      // nothing
-    }
+  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 (lePadV.value) return;
+  closeDrawer();
 });
 
-const onShowDrawer = () => {
+const openDrawer = () => {
   isShowDrawer.value = true;
 };
 
-const onSearch = () => {
-  const input = searchInput.value.trim();
-  if (!input) {
-    return;
-  }
-
+const closeDrawer = () => {
+  if (lePadV.value) return;
   isShowDrawer.value = false;
-  searchHistoryItems.value.unshift(input);
-  searchHistoryItems.value = Array.from(new Set(searchHistoryItems.value));
-  if (searchHistoryItems.value.length > props.maxHistoryCount) {
-    searchHistoryItems.value.pop();
+};
+
+const handleFocus = () => {
+  openDrawer();
+  emit('focus');
+};
+
+const handleBlur = () => {
+  emit('blur');
+};
+
+const runSearch = async () => {
+  if (inputRef.value?.getIsUploading?.()) {
+    await inputRef.value.awaitUpload?.();
   }
+  const keyword = innerValue.value.trim();
+  const imageUrl = internalImageUrl.value || inputRef.value?.getUploadedUrl?.() || props.imageUrl;
+
+  if (!keyword && !imageUrl) return;
 
-  if (props.storeHistory && props.storeHistory) {
-    localStorage.setItem(props.storageKey, JSON.stringify(searchHistoryItems.value));
+  if (props.autoSaveHistory && keyword) {
+    history.push(keyword);
   }
-  emit('search', input);
+
+  isShowDrawer.value = false;
+  emit('search', { keyword, imageUrl: imageUrl || undefined });
 
   if (props.searchUrl) {
-    window.open(props.searchUrl + input, props.searchUrlOpenBlank ? '_blank' : '_self', 'noopener noreferrer');
+    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', 'noopener,noreferrer');
+    }
   }
 };
 
-const onClear = () => {
-  searchInput.value = '';
+const handleClear = () => {
+  innerValue.value = '';
   emit('clear');
-  if (!lePadV.value) {
-    isShowDrawer.value = false;
-  }
+  inputRef.value?.focus?.();
 };
 
-const onDeleteHistory = () => {
-  const history = [...searchHistoryItems.value];
-  searchHistoryItems.value = [];
-  if (props.storeHistory && props.storeHistory) {
-    localStorage.removeItem(props.storageKey);
-  }
+const handleSuggestClick = (item: OSearchRecommendItem) => {
+  emit('recommend-click', item);
+  innerValue.value = item.key;
+  runSearch();
+};
 
-  emit('delete-history', history);
+const handleRecommendClick = (val: string) => {
+  emit('recommend-click', val);
+  innerValue.value = val;
+  runSearch();
 };
 
-const onDeleteHistoryItem = (val: string) => {
-  searchHistoryItems.value = searchHistoryItems.value.filter((item) => item !== val);
-  if (props.storeHistory && props.storeHistory) {
-    if (searchHistoryItems.value.length) {
-      localStorage.setItem(props.storageKey, JSON.stringify(searchHistoryItems.value));
-    } else {
-      localStorage.removeItem(props.storageKey);
-    }
+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);
+};
+
+const handleHotClick = (val: string) => {
+  emit('hot-click', val);
+};
 
+const handleHistoryRemove = (val: string) => {
+  history.remove(val);
   emit('delete-history-item', val);
 };
 
-const onWordSearch = (val: string) => {
-  searchInput.value = val;
-  onSearch();
+const handleHistoryClear = () => {
+  const removed = [...history.items.value];
+  history.clearAll();
+  emit('delete-history', removed);
 };
 
-const onBack = () => {
-  searchInput.value = '';
+const handleBack = () => {
+  innerValue.value = '';
+  internalImageStaged.value = false;
+  emit('update:imageUrl', '');
   isShowDrawer.value = false;
 };
 
-const posWrapper = ref();
-onClickOutside(posWrapper, onClear);
+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">
     <div
-      ref="posWrapper"
+      ref="wrapperRef"
+      class="o-header-search-pos"
       :class="{
-        'o-header-search-input-pc-wrapper': !lePadV,
-        'o-header-search-input-pc-wrapper-left': !lePadV && expandDirection === 'left',
-        'o-header-search-input-pc-wrapper-right': !lePadV && expandDirection === 'right',
-        'o-header-search-input-mobile-wrapper': lePadV,
-        focus: isShowDrawer,
+        'is-pc': !lePadV,
+        'is-mobile': lePadV,
+        'is-left': expandDirection === 'left',
+        'is-right': expandDirection === 'right',
+        'is-focus': isShowDrawer,
       }"
     >
-      <div class="o-header-search-input-wrapper" :class="{ focus: isShowDrawer }">
-        <OIcon v-if="lePadV && isShowDrawer" class="o-header-search-icon" @click="onBack">
+      <div class="o-header-search-row" :class="{ 'is-focus': isShowDrawer }">
+        <OIcon v-if="lePadV && isShowDrawer" class="o-header-search-back-icon" @click="handleBack">
           <IconBack />
         </OIcon>
 
-        <OInput
+        <SearchImageInput
           ref="inputRef"
-          v-model="searchInput"
+          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"
-          :placeholder="isShowDrawer ? expandedPlaceholder ?? t('search.expandedPlaceholder') : placeholder ?? t('search.placeholder')"
-          @focus="onShowDrawer"
-          @keyup.enter="onSearch"
+          :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">
-              <OIcon class="o-header-search-icon">
-                <IconSearch />
-              </OIcon>
-            </slot>
+          <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>
 
-          <template #suffix>
-            <slot name="input-suffix">
-              <OIcon v-if="clearable && isShowClearIcon" class="o-header-search-icon close" @click="onClear">
-                <IconClose />
-              </OIcon>
-            </slot>
-          </template>
-        </OInput>
-
-        <span v-if="lePadV && isShowDrawer" class="o-header-search-text" @click="onSearch">{{ searchTextMobile ?? t('search') }}</span>
+        <span v-if="lePadV && isShowDrawer" class="o-header-search-text" @click="runSearch">
+          {{ searchTextMobile ?? t('search') }}
+        </span>
       </div>
 
-      <div v-show="isShowDrawer" class="o-header-search-drawer">
-        <slot name="drawer" :recommend-items="recommendItems" :history-items="searchHistoryItems" :hot-items="hotItems">
-          <!-- 搜索推荐 -->
-          <div v-if="recommendItems.length" class="o-header-search-recommend-container">
-            <slot name="recommend-header" :recommend="recommendItems" />
-            <slot name="recommend-content" :recommend="recommendItems">
-              <div v-for="item in recommendItems" class="o-header-search-recommend-item" :key="item" @click="onWordSearch(item)">
-                {{ item }}
-              </div>
-            </slot>
-          </div>
-
-          <!-- 历史记录 -->
-          <div v-else-if="searchHistoryItems.length" class="o-header-search-history-container">
-            <slot name="history-header" :history="searchHistoryItems">
-              <div class="o-header-search-history-header">
-                <span class="o-header-search-history-header-title">{{ historyTitle ?? t('search.history') }}</span>
-                <OIcon class="o-header-search-icon" @click="onDeleteHistory">
-                  <IconDeleteAll />
-                </OIcon>
-              </div>
-            </slot>
-
-            <slot name="history-content" :history="searchHistoryItems">
-              <div class="o-header-search-history-item-container">
-                <div v-for="item in searchHistoryItems" :key="item" class="o-header-search-history-item" @click="onWordSearch(item)">
-                  <span class="o-header-search-history-item-text">{{ item }}</span>
-                  <OIcon class="o-header-search-history-item-icon" @click.stop="onDeleteHistoryItem(item)">
-                    <IconDelete class="icon-delete" />
-                  </OIcon>
-                </div>
-              </div>
-            </slot>
-          </div>
-
-          <ODivider v-if="(recommendItems.length || searchHistoryItems.length) && hotItems.length" class="o-header-search-drawer-divider" />
-
-          <!-- 热门搜索 -->
-          <div v-if="hotItems.length" class="o-header-search-hot-container">
-            <slot name="hot-header" :hot="hotItems">
-              <div class="o-header-search-hot-header">{{ hotTitle ?? t('search.hot') }}</div>
-            </slot>
-
-            <slot name="hot-content" :hot="hotItems">
-              <div class="o-header-search-hot-item-container">
-                <div v-for="item in hotItems" :key="item" class="o-header-search-hot-item" @click="onWordSearch(item)">{{ item }}</div>
-              </div>
-            </slot>
-          </div>
-        </slot>
-      </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="lePadV" class="o-header-search-icon-mobile" @click="onShowDrawer">
+    <OIcon v-if="lePadV" class="o-header-search-mobile-icon" @click="openDrawer">
       <IconSearch />
     </OIcon>
   </div>
@@ -293,117 +422,110 @@ onClickOutside(posWrapper, onClear);
   width: 160px;
   height: 32px;
 
-  @include respond('<=laptop') {
+  @include respond-to('<=laptop') {
     width: 120px;
   }
 
-  @media screen and (max-width: 1080px) {
+  @include respond-to('<=pad_v') {
     width: 24px;
     height: 24px;
+    margin-left: auto;
   }
 }
 
-.o-header-search-icon {
-  cursor: pointer;
-  color: var(--o-color-info1);
-  @include h4;
-
-  @include respond('<=pad_v') {
-    font-size: 20px;
-  }
-
-  .close {
-    @include x-svg-hover;
-  }
-}
-
-.o-header-search-icon-mobile {
-  font-size: 24px;
-  line-height: 28px;
-  color: var(--o-color-info1);
-  cursor: pointer;
-  display: none;
-
-  @include respond('<=pad_v') {
-    display: block;
-  }
-}
-
-.o-header-search-input-pc-wrapper {
+.o-header-search-pos {
   position: absolute;
-  right: 0;
   top: 0;
   width: fit-content;
   background-color: var(--o-color-fill2);
   z-index: 100;
-}
-
-.o-header-search-input-pc-wrapper-left {
-  right: 0;
-}
 
-.o-header-search-input-pc-wrapper-right {
-  left: 0;
-}
-
-.o-header-search-input-pc-wrapper.focus {
-  box-shadow: var(--o-shadow-2);
-  top: calc(-1 * var(--o-gap-4));
-}
+  &.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);
+  }
 
-.o-header-search-input-mobile-wrapper {
-  display: none;
+  &.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-input-mobile-wrapper.focus {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: block;
-  height: 100vh;
-  background-color: var(--o-color-fill2);
-  z-index: 100;
-  overflow: hidden;
-}
+.o-header-search-row {
+  display: flex;
+  align-items: start;
 
-.o-header-search-input-wrapper {
-  .o-header-search-input {
-    width: 160px;
-    transition: width var(--o-easing-standard-in) var(--o-duration-m2);
+  &.is-focus {
+    padding: var(--o-gap-4);
+    border-radius: var(--o-radius-xs);
 
-    @include respond('<=laptop') {
-      width: 120px;
+    @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-wrapper.focus {
-  padding: var(--o-gap-4);
+.o-header-search-input {
+  width: 160px;
+  transition: width var(--o-duration-m2) var(--o-easing-standard-in);
 
-  @include respond('<=pad_v') {
-    display: flex;
-    align-items: center;
-    gap: var(--o-gap-4);
-    padding: 10px var(--o-gap-4) var(--o-gap-4) var(--o-gap-4);
+  @include respond-to('<=laptop') {
+    width: 120px;
   }
+}
 
-  .o-header-search-input {
-    width: 480px;
+.o-header-search-row.is-focus .o-header-search-input {
+  width: 480px;
 
-    @include respond('<=laptop') {
-      width: 240px;
-    }
+  @include respond-to('<=laptop') {
+    width: 240px;
+  }
 
-    @include respond('<=pad_v') {
-      flex: 1;
-    }
+  @include respond-to('<=pad_v') {
+    flex: 1;
+    width: auto;
   }
 }
 
-.o-header-search-icon.close {
-  @include x-svg-hover;
+.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 {
@@ -413,13 +535,15 @@ onClickOutside(posWrapper, onClear);
   padding-top: var(--o-gap-2);
   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('<=pad_v') {
+  @include respond-to('<=pad_v') {
     position: static;
     height: calc(100vh - 50px);
     padding-top: 0;
     overflow-y: auto;
     box-shadow: unset;
+    border-radius: unset;
   }
 }
 
@@ -431,171 +555,29 @@ onClickOutside(posWrapper, onClear);
   top: -14px;
   height: 14px;
   background-color: var(--o-color-fill2);
-  box-shadow: unset;
 
-  @include respond('<=laptop') {
-    top: -10px;
-    height: 10px;
-  }
-
-  @include respond('<=pad') {
-    top: -8px;
-    height: 8px;
-  }
-
-  @include respond('<=pad_v') {
+  @include respond-to('<=pad_v') {
     display: none;
   }
 }
 
-.o-header-search-recommend-container {
+.o-header-search-mobile-icon {
+  font-size: 24px;
+  line-height: 28px;
   color: var(--o-color-info1);
-  margin-bottom: var(--o-gap-3);
-}
-
-.o-header-search-recommend-item {
   cursor: pointer;
-  @include tip2;
-
-  @include hover {
-    color: var(--o-color-primary1);
-  }
-
-  @include respond('<=pad_v') {
-    font-size: 12px;
-    line-height: 18px;
-  }
-
-  & + & {
-    margin-top: var(--o-gap-3);
-  }
-}
-
-.o-header-search-history-container {
-  @include respond('<=pad_v') {
-    margin-bottom: var(--o-gap-5);
-  }
-}
-
-.o-header-search-history-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.o-header-search-history-header-title {
-  @include tip2;
-  color: var(--o-color-info3);
-
-  @include respond('<=pad_v') {
-    @include text2;
-    color: var(--o-color-info1);
-  }
-}
-
-.o-header-search-history-item-container {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-  margin-top: var(--o-gap-2);
-}
-
-.o-header-search-history-item-icon {
-  position: absolute;
-  right: -8px;
-  top: -8px;
   display: none;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background-color: rgb(var(--o-grey-9));
-
-  .icon-delete {
-    height: 16px;
-    width: 16px;
-    color: var(--o-color-white);
-  }
-}
 
-.o-header-search-history-item {
-  position: relative;
-  display: flex;
-  align-items: center;
-  max-width: 224px;
-  height: 24px;
-  padding: 0 var(--o-gap-3);
-  background-color: var(--o-color-fill3);
-  border-radius: var(--o-radius-xs);
-  cursor: pointer;
-
-  @include hover {
-    background-color: var(--o-color-control2-light);
-    color: var(--o-color-primary1);
-
-    .o-header-search-history-item-icon {
-      display: flex;
-    }
-  }
-}
-
-.o-header-search-history-item-text {
-  max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  @include tip2;
-
-  @include respond('<=pad_v') {
-    @include text1;
-  }
-}
-
-.o-header-search-drawer-divider {
-  --o-divider-gap: var(--o-gap-4);
-
-  @include respond('<=pad_v') {
-    display: none;
-  }
-}
-
-.o-header-search-hot-header {
-  color: var(--o-color-info3);
-  @include tip2;
-
-  @include respond('<=pad_v') {
-    margin-bottom: var(--o-gap-3);
-    @include text2;
-  }
-}
-
-.o-header-search-hot-item-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--o-gap-4);
-  margin-top: var(--o-gap-3);
-  @include tip2;
-
-  @include respond('<=pad_v') {
-    flex-direction: column;
-    gap: 12px;
-    font-size: 12px;
-    line-height: 18px;
+  @include respond-to('<=pad_v') {
+    display: block;
   }
 }
 
-.o-header-search-hot-item {
-  color: var(--o-color-info1);
-  cursor: pointer;
-
-  @include hover {
-    color: var(--o-color-primary1);
-  }
+.o-header-search-drawer-enter-active {
+  transition: opacity var(--o-duration-m1);
 }
 
-.o-header-search-text {
-  font-size: 16px;
-  line-height: 24px;
+.o-header-search-drawer-enter-from {
+  opacity: 0;
 }
 </style>