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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendesign-plus-test/components",
-  "version": "0.0.1-rc.48",
+  "version": "0.0.1-rc.49",
   "type": "module",
   "publishConfig": {
     "access": "public",
@@ -31,8 +31,8 @@
     "dayjs": "^1.11.13",
     "video.js": "^8.23.7",
     "vue-dompurify-html": "^3.1.2",
-    "@opendesign-plus/composables": "0.0.1-rc.8",
-    "@opendesign-plus/styles": "0.0.1-rc.2"
+    "@opendesign-plus/styles": "0.0.1-rc.2",
+    "@opendesign-plus/composables": "0.0.1-rc.8"
   },
   "peerDependencies": {
     "@opensig/opendesign": ">=1.0.0"

package/src/components/OHeaderSearch.vue

@@ -55,6 +55,8 @@ export interface OHeaderSearchPropsT {
   /** Show "no data" empty state in suggest section while typing */
   showSuggestEmpty?: boolean;
   allowedImageTypes?: string[];
+  /** 强制指定移动端模式，不传时由内部 lePadV 断点自动判断 */
+  mobile?: boolean;
 }
 
 const props = withDefaults(defineProps<OHeaderSearchPropsT>(), {
@@ -105,6 +107,9 @@ const emit = defineEmits<{
 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);
@@ -149,7 +154,7 @@ watch(innerValue, (val) => emitInputDebounced(val));
 
 // click outside (desktop only)
 onClickOutside(wrapperRef, () => {
-  if (lePadV.value) return;
+  if (isMobileMode.value) return;
   closeDrawer();
 });
 
@@ -158,7 +163,7 @@ const openDrawer = () => {
 };
 
 const closeDrawer = () => {
-  if (lePadV.value) return;
+  if (isMobileMode.value) return;
   isShowDrawer.value = false;
 };
 
@@ -284,20 +289,20 @@ defineExpose({
 </script>
 
 <template>
-  <div class="o-header-search">
+  <div class="o-header-search" :class="{ 'is-mobile-mode': isMobileMode }">
     <div
       ref="wrapperRef"
       class="o-header-search-pos"
       :class="{
-        'is-pc': !lePadV,
-        'is-mobile': lePadV,
+        '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="lePadV && isShowDrawer" class="o-header-search-back-icon" @click="handleBack">
+        <OIcon v-if="isMobileMode && isShowDrawer" class="o-header-search-back-icon" @click="handleBack">
           <IconBack />
         </OIcon>
 
@@ -334,7 +339,7 @@ defineExpose({
           </template>
         </SearchImageInput>
 
-        <span v-if="lePadV && isShowDrawer" class="o-header-search-text" @click="runSearch">
+        <span v-if="isMobileMode && isShowDrawer" class="o-header-search-text" @click="runSearch">
           {{ searchTextMobile ?? t('search') }}
         </span>
       </div>
@@ -410,7 +415,7 @@ defineExpose({
       </Transition>
     </div>
 
-    <OIcon v-if="lePadV" class="o-header-search-mobile-icon" @click="openDrawer">
+    <OIcon v-if="isMobileMode" class="o-header-search-mobile-icon" @click="openDrawer">
       <IconSearch />
     </OIcon>
   </div>
@@ -580,4 +585,38 @@ defineExpose({
 .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>