feat(buyer): 统一全站页面顶部为现代TopBar与SearchHeader，支持商品/店铺双模搜索与占位词规范

2026-11-06 17:09:08 +08:00 · 2026-10-29 17:05:53 +08:00
parent d113f5c553
commit 5973d43b9d
15 changed files with 579 additions and 181 deletions
--- a/buyer/src/components/header/Header.vue
+++ b/buyer/src/components/header/Header.vue
@@ -245,10 +245,11 @@ function getCartList() {

 .box {
  width: 100%;
-  font-size: 14px;
+  font-size: 12px;
  height: 40px;
-  background: #333;
-  color: #fff;
+  background: #f8fafc;
+  border-bottom: 1px solid #e2e8f0;
+  color: #64748b;
  display: flex;
  align-items: center;
 }
@@ -281,14 +282,19 @@ function getCartList() {

 .nav a,
 .nav-item {
-  font-size: 14px;
+  font-size: 12px;
  font-weight: normal;
  text-decoration: none;
  cursor: pointer;
-  color: #fff;
+  color: #64748b;
  display: inline-flex;
  align-items: center;
  line-height: 1;
+  transition: color 0.15s ease;
+
+  &:hover {
+    color: #409EFF;
+  }
 }

 .nav-item {
--- a/buyer/src/components/header/hoverSearch.vue
+++ b/buyer/src/components/header/hoverSearch.vue
@@ -1,131 +1,251 @@
 <template>
  <div class="scroll-show">
    <div class="content">
-      <cateNav
-        class="cate"
-        :hover="true"
-        :showNavBar="false"
-        useClass="fixed-show"
-      />
-      <Search
-        class="search-con"
-        :hover="true"
-        ref="search"
-        :showLogo="false"
-        :showTag="false"
-        useClass="fixed-show"
-      />
-      <div class="cart">
-        <span @mouseenter="getCartList">
-          <el-icon class="cart-icon" :size="20" @click="goCartList"><ShoppingCart /></el-icon>
-        </span>
-        <i class="cart-badge">{{ Number(cartNum) > 99 ? "99+" : cartNum }}</i>
+      <!-- 1. 左侧区域：商城 Logo -->
+      <div class="left-section">
+        <router-link to="/" class="logo-link">
+          <img v-if="logoSrc" :src="logoSrc" alt="Logo" class="site-logo" />
+          <span v-else class="text-logo">LiliShop</span>
+        </router-link>
+      </div>
+
+      <!-- 2. 中间搜索区域：与 SearchHeader 样式完全一致（蓝底色、圆角4px、搜索按钮） -->
+      <div class="search-main">
+        <div class="search-box">
+          <input
+            v-model="keyword"
+            type="text"
+            class="search-input"
+            :placeholder="placeholderText"
+            @keyup.enter="handleSearch"
+          />
+          <button type="button" class="search-btn" @click="handleSearch">
+            <el-icon><Search /></el-icon>
+            <span>搜索</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- 3. 右侧“我的购物车”胶囊入口：与 SearchHeader 样式完全一致 -->
+      <div class="cart-entry">
+        <router-link to="/cart" class="cart-btn" @mouseenter="getCartList">
+          <el-icon class="cart-icon"><ShoppingCart /></el-icon>
+          <span class="cart-text">{{ options.cartText || '我的购物车' }}</span>
+          <span class="cart-count">{{ Number(cartNum) > 99 ? '99+' : cartNum }}</span>
+        </router-link>
      </div>
    </div>
  </div>
 </template>
+
 <script setup>
-import { computed, onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
-import Search from '@/components/Search.vue'
-import cateNav from '@/components/nav/CateNav.vue'
-import { cartCount } from '@/api/cart.js'
-import storage from '@/plugins/storage.js'
-import { ShoppingCart } from '@element-plus/icons-vue'
-import { useAppStore } from '@/stores/app'
+import { computed, onMounted, ref, watch } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { cartCount } from '@/api/cart.js';
+import storage from '@/plugins/storage.js';
+import { ShoppingCart, Search } from '@element-plus/icons-vue';
+import { useAppStore } from '@/stores/app';

-const router = useRouter()
-const appStore = useAppStore()
+const props = defineProps({
+  options: {
+    type: Object,
+    default: () => ({})
+  }
+});

-const userInfo = ref({})
-const cartNum = computed(() => appStore.cartNum)
+const router = useRouter();
+const route = useRoute();
+const appStore = useAppStore();

-function goCartList() {
-  router.push('/cart')
+const keyword = ref(route.query.keyword || '');
+const cartNum = computed(() => appStore.cartNum || 0);
+
+watch(() => route.query.keyword, (v) => {
+  keyword.value = v || '';
+});
+
+const logoSrc = computed(() => {
+  return props.options?.logoUrl || appStore.logoImg || '';
+});
+
+const placeholderText = computed(() => {
+  const ph = props.options?.placeholder;
+  if (!ph || ph === '搜索品牌或商品' || ph === '请输入商品名称、品牌或型号') {
+    return '请输入商品名称';
+  }
+  return ph;
+});
+
+function handleSearch() {
+  const kw = (keyword.value || '').trim();
+  if (route.path === '/goodsList') {
+    const nextQuery = { ...route.query };
+    if (kw) {
+      nextQuery.keyword = kw;
+    } else {
+      delete nextQuery.keyword;
+    }
+    router.push({ path: '/goodsList', query: nextQuery });
+  } else {
+    router.push({ path: '/goodsList', query: kw ? { keyword: kw } : {} });
+  }
 }

 function getCartList() {
  if (storage.getItem('userInfo')) {
    cartCount().then((res) => {
-      appStore.setCartNum(res.result)
-      storage.setItem('cartNum', res.result)
-    })
+      appStore.setCartNum(res.result);
+      storage.setItem('cartNum', res.result);
+    });
  }
 }

 onMounted(() => {
-  if (storage.getItem('userInfo')) {
-    userInfo.value = JSON.parse(storage.getItem('userInfo'))
-  }
-})
+  getCartList();
+});
 </script>
-<style lang="scss" scoped>
-$side-col-width: 263.2px;
-$col-gap: 10px;
-$cart-col-width: 40px;

+<style lang="scss" scoped>
 .scroll-show {
  height: 60px;
-  overflow: visible;
+  width: 100%;
+  background: #ffffff;
 }

 .content {
  width: 1200px;
+  max-width: 100%;
  height: 60px;
  margin: 0 auto;
-  display: grid;
-  grid-template-columns: $side-col-width 1fr $cart-col-width;
-  column-gap: $col-gap;
-  align-items: center;
-}
-
-.cate {
-  min-width: 0;
-
-  :deep(.cate-nav) {
-    width: 100%;
-    margin: 0;
-  }
-
-  :deep(.nav-con) {
-    height: 60px;
-  }
-}
-
-.search-con {
-  min-width: 0;
-  width: 100%;
-}
-
-.cart {
  display: flex;
  align-items: center;
-  justify-content: center;
-  height: 60px;
-  position: relative;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 0 10px;
 }

-.cart-icon {
-  font-size: 25px;
-  color: $theme_color;
-  cursor: pointer;
+.left-section {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+
+  .logo-link {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    height: 40px;
+
+    .site-logo {
+      max-height: 36px;
+      max-width: 160px;
+      object-fit: contain;
+      display: block;
+    }
+
+    .text-logo {
+      font-size: 22px;
+      font-weight: 800;
+      color: #409EFF;
+      letter-spacing: -0.5px;
+      line-height: 1;
+    }
+  }
 }

-.cart-badge {
-  position: absolute;
-  font-style: normal;
-  top: 12px;
-  right: -2px;
-  display: block;
-  background-color: $theme_color;
-  color: #fff;
-  font-size: 12px;
-  min-width: 17px;
-  height: 17px;
-  padding: 0 4px;
-  border-radius: 10px;
-  line-height: 17px;
-  text-align: center;
-  z-index: 5;
+.search-main {
+  width: 560px;
+  flex-shrink: 0;
+
+  .search-box {
+    display: flex;
+    border: 2px solid #409EFF;
+    border-radius: 4px;
+    overflow: hidden;
+    height: 38px;
+    box-sizing: border-box;
+    background: #ffffff;
+
+    .search-input {
+      flex: 1;
+      min-width: 0;
+      border: none;
+      padding: 0 14px;
+      font-size: 13px;
+      color: #334155;
+      outline: none;
+      background: #ffffff;
+
+      &::placeholder {
+        color: #94a3b8;
+      }
+    }
+
+    .search-btn {
+      background: #409EFF;
+      color: #ffffff;
+      border: none;
+      padding: 0 22px;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: background 0.15s;
+      flex-shrink: 0;
+
+      &:hover {
+        background: #66b1ff;
+      }
+    }
+  }
+}
+
+.cart-entry {
+  flex-shrink: 0;
+
+  .cart-btn {
+    height: 38px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 16px;
+    border: 1px solid #e2e8f0;
+    border-radius: 4px;
+    font-size: 13px;
+    color: #334155;
+    background: #ffffff;
+    text-decoration: none;
+    cursor: pointer;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
+    transition: all 0.15s ease;
+    box-sizing: border-box;
+
+    .cart-icon {
+      font-size: 16px;
+      color: #409EFF;
+    }
+
+    .cart-text {
+      font-weight: 500;
+      white-space: nowrap;
+    }
+
+    .cart-count {
+      background: #409EFF;
+      color: #ffffff;
+      font-size: 11px;
+      font-weight: 700;
+      padding: 0 6px;
+      height: 18px;
+      line-height: 18px;
+      border-radius: 9px;
+    }
+
+    &:hover {
+      border-color: #409EFF;
+      color: #409EFF;
+    }
+  }
 }
 </style>
--- a/buyer/src/components/indexDecorate/components/SearchHeader.vue
+++ b/buyer/src/components/indexDecorate/components/SearchHeader.vue
@@ -14,10 +14,28 @@
        </router-link>
      </div>

-      <!-- 2. 搜索核心区（紧凑居中，含搜索框和热门推荐词） -->
+      <!-- 2. 搜索核心区（紧凑居中，含商品/店铺 Tab、搜索框和热门推荐词） -->
      <div class="search-main">
+        <!-- 搜索类型切换：商品 / 店铺 -->
+        <div class="search-tabs" v-if="options.showSearchTypes !== false">
+          <span
+            class="tab-item"
+            :class="{ active: currentSearchType === 'goods' }"
+            @click="switchSearchType('goods')"
+          >
+            商品
+          </span>
+          <span
+            class="tab-item"
+            :class="{ active: currentSearchType === 'store' }"
+            @click="switchSearchType('store')"
+          >
+            店铺
+          </span>
+        </div>
+
        <!-- 搜索输入框与按钮 -->
-        <div class="search-box">
+        <div class="search-box" :class="{ 'tab-store-active': currentSearchType === 'store' }">
          <input
            v-model="keyword"
            type="text"
@@ -32,7 +50,7 @@
        </div>

        <!-- 热门推荐词 -->
-        <div class="hot-words" v-if="options.showHotWords !== false && hotWordsList.length">
+        <div class="hot-words" v-if="options.showHotWords !== false && currentSearchType === 'goods' && hotWordsList.length">
          <span
            v-for="(word, idx) in hotWordsList"
            :key="idx"
@@ -57,10 +75,12 @@
 </template>

 <script setup>
-import { ref, computed } from 'vue';
-import { useRouter } from 'vue-router';
+import { ref, computed, watch, onMounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
 import { Search, ShoppingCart } from '@element-plus/icons-vue';
 import { useAppStore } from '@/stores/app.js';
+import { cartCount as fetchCartCount } from '@/api/cart.js';
+import storage from '@/plugins/storage.js';

 const props = defineProps({
  options: {
@@ -73,16 +93,54 @@ const props = defineProps({
  }
 });

+const emit = defineEmits(['search']);
+
 const router = useRouter();
+const route = useRoute();
 const appStore = useAppStore();
-const keyword = ref('');
+
+const currentSearchType = ref(
+  route.path === '/storeList'
+    ? 'store'
+    : (props.options?.defaultSearchType || 'goods')
+);
+
+watch(
+  () => route.path,
+  (p) => {
+    if (p === '/storeList') {
+      currentSearchType.value = 'store';
+    } else if (p === '/goodsList') {
+      currentSearchType.value = 'goods';
+    }
+  }
+);
+
+function switchSearchType(type) {
+  currentSearchType.value = type;
+}
+
+const keyword = ref(route.query?.keyword || '');
+
+watch(() => route.query?.keyword, (v) => {
+  keyword.value = v || '';
+});

 const logoSrc = computed(() => {
  return props.options?.logoUrl || appStore.logoImg || '';
 });

 const placeholderText = computed(() => {
-  return props.options?.placeholder || '请输入商品名称、品牌或型号';
+  if (currentSearchType.value === 'store') {
+    const sph = props.options?.storePlaceholder;
+    if (!sph || sph === '请输入店铺名称、品牌或经营范围') return '请输入店铺名称';
+    return sph;
+  }
+  const ph = props.options?.placeholder;
+  if (!ph || ph === '搜索品牌或商品' || ph === '请输入商品名称、品牌或型号') {
+    return '请输入商品名称';
+  }
+  return ph;
 });

 const hotWordsList = computed(() => {
@@ -97,11 +155,32 @@ const cartCount = computed(() => {
 });

 function handleSearch() {
-  const kw = keyword.value.trim();
-  if (kw) {
-    router.push({ path: '/goodsList', query: { keyword: kw } });
-  } else if (props.options?.placeholder) {
-    router.push({ path: '/goodsList', query: { keyword: props.options.placeholder } });
+  const kw = (keyword.value || '').trim();
+  emit('search', kw);
+  if (currentSearchType.value === 'store') {
+    if (route.path === '/storeList') {
+      const nextQuery = { ...route.query };
+      if (kw) {
+        nextQuery.keyword = kw;
+      } else {
+        delete nextQuery.keyword;
+      }
+      router.push({ path: '/storeList', query: nextQuery });
+    } else {
+      router.push({ path: '/storeList', query: kw ? { keyword: kw } : {} });
+    }
+  } else {
+    if (route.path === '/goodsList') {
+      const nextQuery = { ...route.query };
+      if (kw) {
+        nextQuery.keyword = kw;
+      } else {
+        delete nextQuery.keyword;
+      }
+      router.push({ path: '/goodsList', query: nextQuery });
+    } else {
+      router.push({ path: '/goodsList', query: kw ? { keyword: kw } : {} });
+    }
  }
 }

@@ -110,11 +189,24 @@ function quickSearch(word) {
  handleSearch();
 }

+function getCartList() {
+  if (storage.getItem('userInfo')) {
+    fetchCartCount().then((res) => {
+      appStore.setCartNum(res.result);
+      storage.setItem('cartNum', res.result);
+    }).catch(() => {});
+  }
+}
+
+onMounted(() => {
+  getCartList();
+});
+
 const customStyle = computed(() => {
  const s = props.componentStyle || {};
  return {
    backgroundColor: s.backgroundColor || '#ffffff',
-    minHeight: `${s.height || 90}px`
+    minHeight: `${s.height || 120}px`
  };
 });

@@ -135,16 +227,17 @@ const cartBtnStyle = computed(() => {
  align-items: center;
  justify-content: center;
  background: #ffffff;
+  border-bottom: 1px solid #f1f5f9;

  .header-inner {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
-    padding: 18px 20px 14px;
+    padding: 16px 0 14px 0;
+    box-sizing: border-box;
    display: flex;
-    align-items: flex-start;
-    justify-content: center; /* 紧凑聚拢居中，杜绝两侧过度留白 */
-    gap: 42px; /* Logo、搜索框、购物车紧密贴近 */
+    align-items: center;
+    justify-content: space-between;

    .logo-area {
      height: 40px;
@@ -160,9 +253,8 @@ const cartBtnStyle = computed(() => {

      .site-logo {
        max-height: 40px;
-        max-width: 200px;
+        max-width: 180px;
        object-fit: contain;
-        display: block;
      }

      .text-logo {
@@ -170,29 +262,65 @@ const cartBtnStyle = computed(() => {
        font-weight: 800;
        color: #409EFF;
        letter-spacing: -0.5px;
-        line-height: 1;
      }
    }

    .search-main {
-      width: 560px;
-      flex-shrink: 0;
+      width: 580px;
+      max-width: 50%;
+      display: flex;
+      flex-direction: column;
+
+      .search-tabs {
+        display: flex;
+        align-items: flex-end;
+        gap: 4px;
+        margin-bottom: 0px;
+        padding-left: 2px;
+        z-index: 2;
+
+        .tab-item {
+          padding: 4px 16px;
+          font-size: 13px;
+          font-weight: 500;
+          color: #64748b;
+          cursor: pointer;
+          border-radius: 4px 4px 0 0;
+          transition: all 0.15s ease;
+          user-select: none;
+
+          &:hover {
+            color: #409EFF;
+          }
+
+          &.active {
+            color: #ffffff;
+            background: #409EFF;
+            font-weight: 600;
+          }
+        }
+      }

      .search-box {
        display: flex;
        border: 2px solid #409EFF;
-        border-radius: 4px;
+        border-radius: 0 4px 4px 4px;
        overflow: hidden;
        height: 40px;
+        background: #ffffff;
        box-sizing: border-box;

+        &.tab-store-active {
+          border-radius: 4px;
+        }
+
        .search-input {
          flex: 1;
          border: none;
          padding: 0 14px;
-          font-size: 13px;
-          color: #334155;
+          font-size: 14px;
          outline: none;
+          color: #334155;
          background: #ffffff;

          &::placeholder {
@@ -208,10 +336,11 @@ const cartBtnStyle = computed(() => {
          display: flex;
          align-items: center;
          gap: 4px;
-          font-size: 14px;
+          font-size: 15px;
          font-weight: 600;
          cursor: pointer;
-          transition: background 0.15s;
+          transition: background 0.2s;
+          flex-shrink: 0;

          &:hover {
            background: #66b1ff;
@@ -220,17 +349,15 @@ const cartBtnStyle = computed(() => {
      }

      .hot-words {
-        margin-top: 8px;
+        margin-top: 6px;
        display: flex;
-        align-items: center;
+        flex-wrap: wrap;
        gap: 12px;
        font-size: 12px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        color: #94a3b8;
+        line-height: 1.4;

        .hot-w {
-          color: #94a3b8;
          cursor: pointer;
          transition: color 0.15s;

@@ -249,7 +376,7 @@ const cartBtnStyle = computed(() => {
        display: flex;
        align-items: center;
        gap: 8px;
-        padding: 0 16px;
+        padding: 0 18px;
        border: 1px solid #e2e8f0;
        border-radius: 4px;
        font-size: 13px;
@@ -258,16 +385,17 @@ const cartBtnStyle = computed(() => {
        text-decoration: none;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
-        transition: all 0.15s ease;
+        transition: all 0.2s ease;
        box-sizing: border-box;

        .cart-icon {
-          font-size: 16px;
+          font-size: 18px;
          color: #409EFF;
        }

        .cart-text {
          font-weight: 500;
+          white-space: nowrap;
        }

        .cart-count {
@@ -284,6 +412,7 @@ const cartBtnStyle = computed(() => {
        &:hover {
          border-color: #409EFF;
          color: #409EFF;
+          box-shadow: 0 2px 6px rgba(64, 158, 255, 0.15);
        }
      }
    }
--- a/buyer/src/components/indexDecorate/components/TopBar.vue
+++ b/buyer/src/components/indexDecorate/components/TopBar.vue
@@ -82,11 +82,11 @@ const customStyle = computed(() => {
  const fontSize = opt.fontSize ? `${opt.fontSize}px` : '12px';

  return {
-    backgroundColor: s.backgroundColor || 'transparent',
+    backgroundColor: s.backgroundColor || '#f8fafc',
    color: textColor,
    fontSize: fontSize,
-    height: `${s.height || 36}px`,
-    lineHeight: `${s.height || 36}px`
+    height: `${s.height || 40}px`,
+    lineHeight: `${s.height || 40}px`
  };
 });
 </script>
@@ -98,19 +98,23 @@ const customStyle = computed(() => {
  box-sizing: border-box;
  font-size: 12px;
  overflow: hidden;
+  background-color: #f8fafc;
+  border-bottom: 1px solid #e2e8f0;

  *, *::before, *::after {
    box-sizing: border-box;
  }

  .top-bar-inner {
-    width: 100%;
+    width: 1200px;
    max-width: 100%;
-    padding: 0 24px;
+    margin: 0 auto;
+    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
+    height: 100%;

    .bar-left {
      display: flex;
@@ -129,7 +133,7 @@ const customStyle = computed(() => {
        white-space: nowrap;

        .auth-item {
-          color: #ff6a00;
+          color: #409EFF;
          text-decoration: none;
          cursor: pointer;

@@ -149,7 +153,7 @@ const customStyle = computed(() => {
          text-decoration: none;

          &:hover {
-            color: #ff6a00;
+            color: #409EFF;
          }
        }
      }
@@ -168,7 +172,7 @@ const customStyle = computed(() => {
        white-space: nowrap;

        &:hover {
-          color: #ff6a00;
+          color: #409EFF;
        }
      }
    }
--- a/buyer/src/pages/GoodsDetail.vue
+++ b/buyer/src/pages/GoodsDetail.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="goods-detail-page">
-    <BaseHeader></BaseHeader>
-    <Search></Search>
+    <TopBar></TopBar>
+    <SearchHeader></SearchHeader>
    <div class="shop-item-path">
      <div class="shop-nav-container">
        <el-breadcrumb>
@@ -44,7 +44,8 @@ import { ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { Message } from "@/utils/message";
 import storage from "@/plugins/storage.js";
-import Search from "@/components/Search";
+import TopBar from '@/components/indexDecorate/components/TopBar.vue';
+import SearchHeader from '@/components/indexDecorate/components/SearchHeader.vue';
 import ShowGoods from "@/components/goodsDetail/ShowGoods";
 import empty from "@/components/empty/Main";
 import ShowGoodsDetail from "@/components/goodsDetail/ShowGoodsDetail";
--- a/buyer/src/pages/GoodsList.vue
+++ b/buyer/src/pages/GoodsList.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="wrapper">
-    <BaseHeader></BaseHeader>
-    <Search @search="handleSearch"></Search>
+    <TopBar></TopBar>
+    <SearchHeader @search="handleSearch"></SearchHeader>

    <div class="container">
      <!-- 商品筛选栏 -->
@@ -115,6 +115,8 @@ import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
 import GoodsClassNav from "@/components/nav/GoodsClassNav";
 import GoodsThumb from "@/components/goods/GoodsThumb.vue";
 import * as apiGoods from "@/api/goods";
+import TopBar from '@/components/indexDecorate/components/TopBar.vue';
+import SearchHeader from '@/components/indexDecorate/components/SearchHeader.vue';

 const route = useRoute();
 const router = useRouter();
--- a/buyer/src/pages/Index.vue
+++ b/buyer/src/pages/Index.vue
@@ -22,16 +22,21 @@
        </el-dialog>

    <!-- 固定头部 -->
-    <hover-search class="hover-search" :class="{show: topSearchShow}"></hover-search>
+    <hover-search class="hover-search" :class="{show: topSearchShow}" :options="searchHeaderOptions"></hover-search>
    <!-- 顶部广告 -->
    <FixedTopPage :data="topAdvert" v-if="!isVersion2"></FixedTopPage>
    <!-- 头部 包括登录，我的订单等 -->
    <BaseHeader v-if="!hasComponentInV2('topBar')"></BaseHeader>
    <!-- 搜索框、logo -->
    <Search v-if="!hasComponentInV2('searchHeader')"></Search>
-    <div class="index-main">
-      <!-- 商品分类 + 楼层装修（同一宽度容器，保证与分类栏左缘对齐） -->
-      <cateNav :showAlways="true" v-if="!isVersion2 && showNav" :large="carouselLarge" :opacity="carouselOpacity"></cateNav>
+    <!-- Version 2 页面装修：全宽自由响应容器，由各行独立配置 rowStyle.width（如 100%、1920、1400、1200）实现全宽或精准居中 -->
+    <div v-if="isVersion2" class="v2-index-main">
+      <model-form :data="modelFormData"></model-form>
+    </div>
+
+    <!-- Version 1 历史旧版：保持 1200px 传统固定容器与分类栏 -->
+    <div v-else class="index-main">
+      <cateNav :showAlways="true" v-if="showNav" :large="carouselLarge" :opacity="carouselOpacity"></cateNav>
      <model-form :data="modelFormData"></model-form>
    </div>
    <!-- 底部栏 -->
@@ -74,6 +79,19 @@ const isVersion2 = computed(() => {
  return modelFormData.value?.version === 2 || modelFormData.value?.version === '2.0';
 });

+const searchHeaderOptions = computed(() => {
+  if (!Array.isArray(modelFormData.value?.list)) return {};
+  for (const row of modelFormData.value.list) {
+    if (Array.isArray(row.components)) {
+      const target = row.components.find(c => c && c.type === 'searchHeader');
+      if (target?.options) {
+        return target.options;
+      }
+    }
+  }
+  return {};
+});
+
 const hasComponentInV2 = (type) => {
  if (!isVersion2.value || !Array.isArray(modelFormData.value?.list)) return false;
  return modelFormData.value.list.some(r => r.components && r.components.some(c => c.type === type));
@@ -240,6 +258,11 @@ onUnmounted(() => {
 .container {
  @include sub_background_color($light_background_color);
 }
+.v2-index-main {
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+}
 </style>
 <style>
 .hover-search {
@@ -250,7 +273,8 @@ onUnmounted(() => {
  position: fixed;
  top: 0;
  z-index: 9999;
-  box-shadow:0 0 10px 2px rgb(90 90 90 / 60%);
+  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
+  border-bottom: 1px solid #f1f5f9;
  transition: 0.35s;
 }
 .show {
--- a/buyer/src/pages/Merchant.vue
+++ b/buyer/src/pages/Merchant.vue
@@ -1,8 +1,8 @@
 <template>
  <div class="merchant">
-    <BaseHeader/>
+    <TopBar></TopBar>
    <!-- 搜索栏 -->
-    <Search :storeId="storeMsg.storeId || $route.query.id" @search="search"></Search>
+    <SearchHeader @search="search"></SearchHeader>
    <div class="store-head">
      <div class="store-head-main">
        <div class="shop-info">
@@ -129,7 +129,8 @@ import {
  isStoreCollection,
 } from "@/api/member";
 import {goodsList as goodsListApi} from "@/api/goods";
-import Search from "@/components/Search";
+import TopBar from '@/components/indexDecorate/components/TopBar.vue';
+import SearchHeader from '@/components/indexDecorate/components/SearchHeader.vue';
 import ModelForm from "@/components/indexDecorate/ModelForm";
 import storage from "@/plugins/storage";
 import {getFloorStoreData} from "@/api/index.js";
--- a/buyer/src/pages/NotFound.vue
+++ b/buyer/src/pages/NotFound.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="not-found-page">
-    <BaseHeader></BaseHeader>
-    <Search :show-tag="false"></Search>
+    <TopBar></TopBar>
+    <SearchHeader :options="{ showHotWords: false }"></SearchHeader>
    <div class="not-found">
      <h1>页面不存在</h1>
      <p>你访问的地址没有对应页面</p>
@@ -12,6 +12,9 @@
 </template>

 <script setup>
+import TopBar from '@/components/indexDecorate/components/TopBar.vue';
+import SearchHeader from '@/components/indexDecorate/components/SearchHeader.vue';
+
 defineOptions({ name: "NotFound" });
 </script>

--- a/buyer/src/pages/ShoppingCart.vue
+++ b/buyer/src/pages/ShoppingCart.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
-    <BaseHeader></BaseHeader>
-    <Search></Search>
+    <TopBar></TopBar>
+    <SearchHeader></SearchHeader>

    <!-- 添加成功提示 -->
    <div class="add-info-box-container">
@@ -50,6 +50,8 @@ export default {

 <script setup>
 import { onMounted, ref } from "vue";
+import TopBar from '@/components/indexDecorate/components/TopBar.vue';
+import SearchHeader from '@/components/indexDecorate/components/SearchHeader.vue';
 import { useRoute } from "vue-router";

 const route = useRoute();
--- a/buyer/src/pages/article/index.vue
+++ b/buyer/src/pages/article/index.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
-    <BaseHeader></BaseHeader>
-    <Search></Search>
+    <TopBar></TopBar>
+    <SearchHeader></SearchHeader>

    <div class="container width_1200">
      <h1 class="page-title">文章帮助中心</h1>
@@ -50,6 +50,8 @@

 <script setup>
 import { onMounted, reactive, ref } from 'vue'
+import TopBar from '@/components/indexDecorate/components/TopBar.vue';
+import SearchHeader from '@/components/indexDecorate/components/SearchHeader.vue';
 import { useRoute } from 'vue-router'
 import { articleCateList, articleDetail, articleList as fetchArticleList } from '@/api/common.js'

--- a/buyer/src/pages/promotion/PointGoodsDetail.vue
+++ b/buyer/src/pages/promotion/PointGoodsDetail.vue
@@ -1,7 +1,7 @@
 <template>
  <div style="background:#fff;">
-    <BaseHeader></BaseHeader>
-    <Search style="border-bottom:2px solid red;"></Search>
+    <TopBar></TopBar>
+    <SearchHeader></SearchHeader>
    <div class="base-width cate-container">
      <el-breadcrumb>
        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
@@ -106,7 +106,8 @@ export default {
 import { ref, computed, onMounted, nextTick } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { Message } from "@/utils/message";
-import Search from "@/components/Search";
+import TopBar from '@/components/indexDecorate/components/TopBar.vue';
+import SearchHeader from '@/components/indexDecorate/components/SearchHeader.vue';
 import { addCartGoods } from "@/api/cart.js";
 import { pointGoodsDetail } from "@/api/promotion";
 import {
--- a/buyer/src/pages/promotion/PointMall.vue
+++ b/buyer/src/pages/promotion/PointMall.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="point-mall">
-    <BaseHeader></BaseHeader>
-    <Search></Search>
+    <TopBar></TopBar>
+    <SearchHeader></SearchHeader>
    <cateNav></cateNav>
    <h3 class="promotion-decorate">积分商品</h3>
    <el-select @select="selectCate" size="small" class="cate-select-con" v-model="cateId">
@@ -46,6 +46,8 @@
 </template>
 <script setup>
 import { onMounted, reactive, ref } from "vue";
+import TopBar from '@/components/indexDecorate/components/TopBar.vue';
+import SearchHeader from '@/components/indexDecorate/components/SearchHeader.vue';
 import { useRoute, useRouter } from "vue-router";
 import { pointGoods, pointGoodsCategory } from "@/api/promotion.js";

--- a/manager/src/views/page-decoration/pc/config-panel/PanelSearchHeader.vue
+++ b/manager/src/views/page-decoration/pc/config-panel/PanelSearchHeader.vue
@@ -45,7 +45,7 @@
      <div class="section-title">搜索设置</div>
      <div class="form-row">
        <span class="row-label">搜索占位</span>
-        <el-input v-model="options.placeholder" size="small" placeholder="请输入商品名称、品牌或型号" class="flex-1" />
+        <el-input v-model="options.placeholder" size="small" placeholder="请输入商品名称" class="flex-1" />
      </div>

      <div class="form-row mt-10 flex-between">
@@ -57,6 +57,24 @@
        <span class="row-label">显示热门推荐词</span>
        <el-switch v-model="options.showHotWords" size="small" />
      </div>
+
+      <div class="form-row mt-10 flex-between">
+        <span class="row-label">商品/店铺搜索切换</span>
+        <el-switch v-model="options.showSearchTypes" size="small" />
+      </div>
+
+      <div class="form-row mt-10" v-if="options.showSearchTypes !== false">
+        <span class="row-label">默认搜索类型</span>
+        <el-radio-group v-model="options.defaultSearchType" size="small">
+          <el-radio-button label="goods">商品</el-radio-button>
+          <el-radio-button label="store">店铺</el-radio-button>
+        </el-radio-group>
+      </div>
+
+      <div class="form-row mt-10" v-if="options.showSearchTypes !== false">
+        <span class="row-label">店铺占位文案</span>
+        <el-input v-model="options.storePlaceholder" size="small" placeholder="请输入店铺名称" class="flex-1" />
+      </div>
    </div>


@@ -147,9 +165,19 @@ const props = defineProps({
    required: true
  }
 });
+if (props.options.showSearchTypes === undefined) {
+  props.options.showSearchTypes = true;
+}
+if (!props.options.defaultSearchType) {
+  props.options.defaultSearchType = 'goods';
+}
+if (!props.options.storePlaceholder) {
+  props.options.storePlaceholder = '请输入店铺名称';
+}
+

 if (props.options.logoLink === undefined) props.options.logoLink = '/';
-if (props.options.placeholder === undefined) props.options.placeholder = '请输入商品名称、品牌或型号';
+if (props.options.placeholder === undefined) props.options.placeholder = '请输入商品名称';
 if (props.options.showCart === undefined) props.options.showCart = true;
 if (props.options.showHotWords === undefined) props.options.showHotWords = true;
 if (props.options.cartText === undefined) props.options.cartText = '购物车';
--- a/manager/src/views/page-decoration/pc/template/TplSearchHeader.vue
+++ b/manager/src/views/page-decoration/pc/template/TplSearchHeader.vue
@@ -12,10 +12,28 @@
        <span v-else class="text-logo">LiliShop</span>
      </div>

-      <!-- 2. 搜索核心区（紧凑居中，含搜索框和热门推荐词） -->
+      <!-- 2. 搜索核心区（紧凑居中，含商品/店铺 Tab、搜索框和热门推荐词） -->
      <div class="search-main">
+        <!-- 搜索类型切换：商品 / 店铺 -->
+        <div class="search-tabs" v-if="options.showSearchTypes !== false">
+          <span
+            class="tab-item"
+            :class="{ active: (activeTab || options.defaultSearchType || 'goods') === 'goods' }"
+            @click.stop="activeTab = 'goods'"
+          >
+            商品
+          </span>
+          <span
+            class="tab-item"
+            :class="{ active: (activeTab || options.defaultSearchType || 'goods') === 'store' }"
+            @click.stop="activeTab = 'store'"
+          >
+            店铺
+          </span>
+        </div>
+
        <!-- 搜索输入框与按钮 -->
-        <div class="search-box">
+        <div class="search-box" :class="{ 'tab-store-active': (activeTab || options.defaultSearchType || 'goods') === 'store' }">
          <input
            type="text"
            class="mock-input"
@@ -29,7 +47,7 @@
        </div>

        <!-- 热门推荐词 -->
-        <div class="hot-words" v-if="options.showHotWords !== false && hotWordsList.length">
+        <div class="hot-words" v-if="options.showHotWords !== false && (activeTab || options.defaultSearchType || 'goods') === 'goods' && hotWordsList.length">
          <span
            v-for="(w, idx) in hotWordsList"
            :key="idx"
@@ -55,7 +73,7 @@
 </template>

 <script setup>
-import { computed } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { Search, ShoppingCart } from '@element-plus/icons-vue';

 const props = defineProps({
@@ -69,8 +87,27 @@ const props = defineProps({
  }
 });

+const activeTab = ref(props.options?.defaultSearchType || 'goods');
+
+watch(
+  () => props.options?.defaultSearchType,
+  (v) => {
+    if (v) activeTab.value = v;
+  }
+);
+
 const placeholderText = computed(() => {
-  return props.options?.placeholder || '请输入商品名称、品牌或型号';
+  const currentType = activeTab.value || props.options?.defaultSearchType || 'goods';
+  if (currentType === 'store') {
+    const sph = props.options?.storePlaceholder;
+    if (!sph || sph === '请输入店铺名称、品牌或经营范围') return '请输入店铺名称';
+    return sph;
+  }
+  const ph = props.options?.placeholder;
+  if (!ph || ph === '搜索品牌或商品' || ph === '请输入商品名称、品牌或型号') {
+    return '请输入商品名称';
+  }
+  return ph;
 });

 const hotWordsList = computed(() => {
@@ -84,7 +121,7 @@ const customStyle = computed(() => {
  const s = props.componentStyle || {};
  return {
    backgroundColor: s.backgroundColor || '#ffffff',
-    minHeight: `${s.height || 90}px`
+    minHeight: `${s.height || 120}px`
  };
 });

@@ -110,11 +147,12 @@ const cartBtnStyle = computed(() => {
  .header-inner {
    width: 1200px;
    max-width: 100%;
-    padding: 18px 20px 14px;
+    margin: 0 auto;
+    padding: 16px 0 14px 0;
+    box-sizing: border-box;
    display: flex;
-    align-items: flex-start;
-    justify-content: center; /* 紧凑聚拢居中，Logo、搜索框、购物车不向大屏两端散落 */
-    gap: 42px; /* Logo、搜索框、购物车三者紧凑贴近 */
+    align-items: center;
+    justify-content: space-between;

    .logo-area {
      height: 40px;
@@ -140,17 +178,52 @@ const cartBtnStyle = computed(() => {
    }

    .search-main {
-      width: 560px;
+      width: 580px;
      flex-shrink: 0;
+      margin: 0 auto;
+
+      .search-tabs {
+        display: flex;
+        align-items: flex-end;
+        gap: 4px;
+        margin-bottom: 0px;
+        padding-left: 2px;
+        z-index: 2;
+
+        .tab-item {
+          padding: 4px 16px;
+          font-size: 13px;
+          font-weight: 500;
+          color: #64748b;
+          cursor: pointer;
+          border-radius: 4px 4px 0 0;
+          transition: all 0.15s ease;
+          user-select: none;
+
+          &:hover {
+            color: #409EFF;
+          }
+
+          &.active {
+            color: #ffffff;
+            background: #409EFF;
+            font-weight: 600;
+          }
+        }
+      }

      .search-box {
        display: flex;
        border: 2px solid #409EFF;
-        border-radius: 4px;
+        border-radius: 0 4px 4px 4px;
        overflow: hidden;
        height: 40px;
        box-sizing: border-box;

+        &.tab-store-active {
+          border-radius: 4px;
+        }
+
        .mock-input {
          flex: 1;
          border: none;
@@ -185,7 +258,7 @@ const cartBtnStyle = computed(() => {
      }

      .hot-words {
-        margin-top: 8px;
+        margin-top: 6px;
        display: flex;
        align-items: center;
        gap: 12px;