<template>
  <div class="search-bar-wrapper">
    <div class="search-bar">
      <div class="search-icon">
        <!-- 搜索图标（矢量） -->
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
      </div>
      <input type="text" placeholder="输入搜索内容" />
    </div>
  </div>
</template>

<script setup lang="ts">
// 搜索逻辑后续补充
</script>

<style lang="scss" scoped>

@import '@/styles/tokens.scss';

.search-bar-wrapper {
  width: 100%;
  max-width: var(--search-max-width); // 与设计稿一致
  margin-bottom: var(--search-margin-bottom);
}

.search-bar {
  height: var(--search-height);
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 var(--search-padding-x);
  background-color: $color-surface-1;
  backdrop-filter: blur($backdrop-filter-blur) saturate($backdrop-filter-saturation);
  border-radius: $border-radius-large;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: $shadow-lg;
  transition: background-color $motion-duration-sm;

  &:hover, &:focus-within {
    background-color: $color-surface-2;
  }
}

.search-icon {
  color: $color-text-secondary;
  margin-right: 12px;
}

input {
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  outline: none;
  color: $color-text-primary;
  font-size: 16px;

  &::placeholder {
    color: $color-text-secondary;
  }
}
</style>
