@opendesign-plus-test/components 0.0.1-rc.45 → 0.0.1-rc.46

package/src/components/OHeaderSearch.vue

@@ -1,24 +1,18 @@
 <script setup lang="ts">
-import { computed, ref, toRef, watch } from 'vue';
-import { OIcon } from '@opensig/opendesign';
-import { onClickOutside, useDebounceFn } from '@vueuse/core';
+import { computed, onMounted, ref, watch } from 'vue';
+import { OIcon, OInput, ODivider } from '@opensig/opendesign';
+import { onClickOutside } 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 IconClose from '~icons/components/icon-close.svg';
 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; // 搜索框展开后提示
@@ -26,36 +20,27 @@ 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; // 推荐搜索标题
-  /** 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[];
+  recommendItems?: string[]; // 推荐搜索
+  searchUrl?: string; // 搜索页面 url，不为空点击热门搜索、历史记录、推荐搜索和回车搜索时自动打开页面
+  searchUrlOpenBlank?: boolean; // 是否在新窗口打开搜索页面，默认为 true
+  searchTextMobile?: 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: '',
@@ -68,349 +53,235 @@ 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<{
-  (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 emit = defineEmits<OHeaderSearchEmitsT>();
 
-const wrapperRef = ref<HTMLElement | null>(null);
-const inputRef = ref<InstanceType<typeof SearchImageInput>>();
+const searchInput = ref(props.modelValue);
+const searchHistoryItems = ref(props.historyItems);
 const isShowDrawer = ref(false);
-const internalImageStaged = ref(false);
-const internalImageUrl = ref('');
-const hasImage = computed(() => !!props.imageUrl || internalImageStaged.value);
+const inputRef = ref();
 
-const innerValue = computed({
-  get: () => props.modelValue,
-  set: (val: string) => emit('update:modelValue', val),
+const isShowClearIcon = computed(() => {
+  return (!lePadV.value && isShowDrawer.value) || (lePadV.value && searchInput.value);
 });
 
-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');
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (searchInput.value !== val) {
+      searchInput.value = val;
+    }
   }
-  if (isShowDrawer.value) {
-    return props.expandedPlaceholder ?? t('search.expandedPlaceholder');
+);
+
+watch(
+  () => searchInput.value,
+  (val) => {
+    emit('update:modelValue', val);
   }
-  return props.placeholder ?? t('search.placeholder');
-});
+);
 
-// debounce input event
-const emitInputDebounced = useDebounceFn((val: string) => emit('input', val), () => props.debounce);
-watch(innerValue, (val) => emitInputDebounced(val));
+watch(
+  () => props.historyItems,
+  (val) => {
+    if (searchHistoryItems.value !== val) {
+      searchHistoryItems.value = val;
+    }
+  }
+);
 
-// click outside (desktop only)
-onClickOutside(wrapperRef, () => {
-  if (lePadV.value) return;
-  closeDrawer();
+watch(
+  () => searchHistoryItems.value,
+  (val) => {
+    emit('update:historyItems', val);
+  }
+);
+
+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
+    }
+  }
 });
 
-const openDrawer = () => {
+const onShowDrawer = () => {
   isShowDrawer.value = true;
 };
 
-const closeDrawer = () => {
-  if (lePadV.value) return;
-  isShowDrawer.value = false;
-};
-
-const handleFocus = () => {
-  openDrawer();
-  emit('focus');
-};
-
-const handleBlur = () => {
-  emit('blur');
-};
-
-const runSearch = async () => {
-  if (inputRef.value?.getIsUploading?.()) {
-    await inputRef.value.awaitUpload?.();
+const onSearch = () => {
+  const input = searchInput.value.trim();
+  if (!input) {
+    return;
   }
-  const keyword = innerValue.value.trim();
-  const imageUrl = internalImageUrl.value || inputRef.value?.getUploadedUrl?.() || props.imageUrl;
-
-  if (!keyword && !imageUrl) return;
 
-  if (props.autoSaveHistory && keyword) {
-    history.push(keyword);
+  isShowDrawer.value = false;
+  searchHistoryItems.value.unshift(input);
+  searchHistoryItems.value = Array.from(new Set(searchHistoryItems.value));
+  if (searchHistoryItems.value.length > props.maxHistoryCount) {
+    searchHistoryItems.value.pop();
   }
 
-  isShowDrawer.value = false;
-  emit('search', { keyword, imageUrl: imageUrl || undefined });
+  if (props.storeHistory && props.storeHistory) {
+    localStorage.setItem(props.storageKey, JSON.stringify(searchHistoryItems.value));
+  }
+  emit('search', input);
 
   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', 'noopener,noreferrer');
-    }
+    window.open(props.searchUrl + input, props.searchUrlOpenBlank ? '_blank' : '_self', 'noopener noreferrer');
   }
 };
 
-const handleClear = () => {
-  innerValue.value = '';
+const onClear = () => {
+  searchInput.value = '';
   emit('clear');
-  inputRef.value?.focus?.();
-};
-
-const handleSuggestClick = (item: OSearchRecommendItem) => {
-  emit('recommend-click', item);
-  innerValue.value = item.key;
-  runSearch();
-};
-
-const handleRecommendClick = (val: string) => {
-  emit('recommend-click', val);
-  innerValue.value = val;
-  runSearch();
+  if (!lePadV.value) {
+    isShowDrawer.value = false;
+  }
 };
 
-const handleOnestepClick = (item: OSearchRecommendItem) => {
-  emit('onestep-click', item);
-  if (item.path && typeof window !== 'undefined') {
-    window.open(item.path, '_blank', 'noopener,noreferrer');
+const onDeleteHistory = () => {
+  const history = [...searchHistoryItems.value];
+  searchHistoryItems.value = [];
+  if (props.storeHistory && props.storeHistory) {
+    localStorage.removeItem(props.storageKey);
   }
-};
 
-const handleHistoryClick = (val: string) => {
-  emit('history-click', val);
+  emit('delete-history', history);
 };
 
-const handleHotClick = (val: string) => {
-  emit('hot-click', val);
-};
+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 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 onWordSearch = (val: string) => {
+  searchInput.value = val;
+  onSearch();
 };
 
-const handleBack = () => {
-  innerValue.value = '';
-  internalImageStaged.value = false;
-  emit('update:imageUrl', '');
+const onBack = () => {
+  searchInput.value = '';
   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,
-});
+const posWrapper = ref();
+onClickOutside(posWrapper, onClear);
 </script>
 
 <template>
   <div class="o-header-search">
     <div
-      ref="wrapperRef"
-      class="o-header-search-pos"
+      ref="posWrapper"
       :class="{
-        'is-pc': !lePadV,
-        'is-mobile': lePadV,
-        'is-left': expandDirection === 'left',
-        'is-right': expandDirection === 'right',
-        'is-focus': isShowDrawer,
+        '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,
       }"
     >
-      <div class="o-header-search-row" :class="{ 'is-focus': isShowDrawer }">
-        <OIcon v-if="lePadV && isShowDrawer" class="o-header-search-back-icon" @click="handleBack">
+      <div class="o-header-search-input-wrapper" :class="{ focus: isShowDrawer }">
+        <OIcon v-if="lePadV && isShowDrawer" class="o-header-search-icon" @click="onBack">
           <IconBack />
         </OIcon>
 
-        <SearchImageInput
+        <OInput
           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"
+          v-model="searchInput"
           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)"
+          :placeholder="isShowDrawer ? expandedPlaceholder ?? t('search.expandedPlaceholder') : placeholder ?? t('search.placeholder')"
+          @focus="onShowDrawer"
+          @keyup.enter="onSearch"
         >
-          <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 #prefix>
+            <slot name="input-prefix">
+              <OIcon class="o-header-search-icon">
+                <IconSearch />
+              </OIcon>
+            </slot>
+          </template>
+
+          <template #suffix>
+            <slot name="input-suffix">
+              <OIcon v-if="clearable && isShowClearIcon" class="o-header-search-icon close" @click="onClear">
+                <IconClose />
+              </OIcon>
+            </slot>
           </template>
-        </SearchImageInput>
+        </OInput>
 
-        <span v-if="lePadV && isShowDrawer" class="o-header-search-text" @click="runSearch">
-          {{ searchTextMobile ?? t('search') }}
-        </span>
+        <span v-if="lePadV && isShowDrawer" class="o-header-search-text" @click="onSearch">{{ 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 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>
     </div>
 
-    <OIcon v-if="lePadV" class="o-header-search-mobile-icon" @click="openDrawer">
+    <OIcon v-if="lePadV" class="o-header-search-icon-mobile" @click="onShowDrawer">
       <IconSearch />
     </OIcon>
   </div>
@@ -426,108 +297,115 @@ defineExpose({
     width: 120px;
   }
 
-  @include respond-to('<=pad_v') {
+  @media screen and (max-width: 1080px) {
     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;
+.o-header-search-icon {
+  cursor: pointer;
+  color: var(--o-color-info1);
+  @include h4;
 
-  &.is-left {
-    right: 0;
-  }
-  &.is-right {
-    left: 0;
-  }
-  &.is-mobile {
-    display: none;
+  @include respond-to('<=pad_v') {
+    font-size: 20px;
   }
-  &.is-pc.is-focus {
-    box-shadow: var(--o-shadow-2);
-    top: calc(-1 * var(--o-gap-4));
-    border-radius: var(--o-radius-xs);
+
+  .close {
+    @include x-svg-hover;
   }
+}
 
-  &.is-mobile.is-focus {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
+.o-header-search-icon-mobile {
+  font-size: 24px;
+  line-height: 28px;
+  color: var(--o-color-info1);
+  cursor: pointer;
+  display: none;
+
+  @include respond-to('<=pad_v') {
     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;
+.o-header-search-input-pc-wrapper {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: fit-content;
+  background-color: var(--o-color-fill2);
+  z-index: 100;
+}
 
-  &.is-focus {
-    padding: var(--o-gap-4);
-    border-radius: var(--o-radius-xs);
+.o-header-search-input-pc-wrapper-left {
+  right: 0;
+}
 
-    @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-pc-wrapper-right {
+  left: 0;
 }
 
-.o-header-search-input {
-  width: 160px;
-  transition: width var(--o-duration-m2) var(--o-easing-standard-in);
+.o-header-search-input-pc-wrapper.focus {
+  box-shadow: var(--o-shadow-2);
+  top: calc(-1 * var(--o-gap-4));
+}
 
-  @include respond-to('<=laptop') {
-    width: 120px;
-  }
+.o-header-search-input-mobile-wrapper {
+  display: none;
+}
+
+.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.is-focus .o-header-search-input {
-  width: 480px;
+.o-header-search-input-wrapper {
+  .o-header-search-input {
+    width: 160px;
+    transition: width var(--o-easing-standard-in) var(--o-duration-m2);
 
-  @include respond-to('<=laptop') {
-    width: 240px;
+    @include respond-to('<=laptop') {
+      width: 120px;
+    }
   }
+}
+
+.o-header-search-input-wrapper.focus {
+  padding: var(--o-gap-4);
 
   @include respond-to('<=pad_v') {
-    flex: 1;
-    width: auto;
+    display: flex;
+    align-items: center;
+    gap: var(--o-gap-4);
+    padding: 10px var(--o-gap-4) var(--o-gap-4) var(--o-gap-4);
   }
-}
 
-.o-header-search-back-icon {
-  cursor: pointer;
-  color: var(--o-color-info1);
-  font-size: 20px;
-  height: 30px;
-}
+  .o-header-search-input {
+    width: 480px;
 
-.o-header-search-text {
-  white-space: nowrap;
-  font-size: 16px;
-  line-height: 24px;
-  cursor: pointer;
-  color: var(--o-color-info1);
-  height: 30px;
+    @include respond-to('<=laptop') {
+      width: 240px;
+    }
 
-  @include hover {
-    color: var(--o-color-primary1);
+    @include respond-to('<=pad_v') {
+      flex: 1;
+    }
   }
 }
 
+.o-header-search-icon.close {
+  @include x-svg-hover;
+}
+
 .o-header-search-drawer {
   position: absolute;
   width: 100%;
@@ -535,7 +413,6 @@ defineExpose({
   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-to('<=pad_v') {
     position: static;
@@ -543,7 +420,6 @@ defineExpose({
     padding-top: 0;
     overflow-y: auto;
     box-shadow: unset;
-    border-radius: unset;
   }
 }
 
@@ -555,29 +431,171 @@ defineExpose({
   top: -14px;
   height: 14px;
   background-color: var(--o-color-fill2);
+  box-shadow: unset;
+
+  @include respond-to('<=laptop') {
+    top: -10px;
+    height: 10px;
+  }
+
+  @include respond-to('<=pad') {
+    top: -8px;
+    height: 8px;
+  }
 
   @include respond-to('<=pad_v') {
     display: none;
   }
 }
 
-.o-header-search-mobile-icon {
-  font-size: 24px;
-  line-height: 28px;
+.o-header-search-recommend-container {
   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-to('<=pad_v') {
+    font-size: 12px;
+    line-height: 18px;
+  }
+
+  & + & {
+    margin-top: var(--o-gap-3);
+  }
+}
+
+.o-header-search-history-container {
+  @include respond-to('<=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-to('<=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-mixedgray-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-to('<=pad_v') {
-    display: block;
+    @include text1;
   }
 }
 
-.o-header-search-drawer-enter-active {
-  transition: opacity var(--o-duration-m1);
+.o-header-search-drawer-divider {
+  --o-divider-gap: var(--o-gap-4);
+
+  @include respond-to('<=pad_v') {
+    display: none;
+  }
+}
+
+.o-header-search-hot-header {
+  color: var(--o-color-info3);
+  @include tip2;
+
+  @include respond-to('<=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-to('<=pad_v') {
+    flex-direction: column;
+    gap: 12px;
+    font-size: 12px;
+    line-height: 18px;
+  }
 }
 
-.o-header-search-drawer-enter-from {
-  opacity: 0;
+.o-header-search-hot-item {
+  color: var(--o-color-info1);
+  cursor: pointer;
+
+  @include hover {
+    color: var(--o-color-primary1);
+  }
+}
+
+.o-header-search-text {
+  font-size: 16px;
+  line-height: 24px;
 }
 </style>