first1

src/views/project/cpns/ProjectToolbar.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+/**
+ * 项目中心右侧搜索条（按设计稿：关键字输入框 + 重置 + 搜索）。
+ *
+ * <p>输入框比两侧按钮更高（设计稿实测 37 vs 26），三者按中线对齐。</p>
+ */
+
+interface Props {
+  keyword: string
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:keyword': [keyword: string]
+  search: []
+  reset: []
+}>()
+
+const keyword = computed({
+  get: () => props.keyword,
+  set: (value: string) => emit('update:keyword', value),
+})
+</script>
+
+<template>
+  <div class="project-toolbar">
+    <label class="project-toolbar__field">
+      <svg
+        class="project-toolbar__icon"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+        aria-hidden="true"
+      >
+        <circle
+          cx="6.8"
+          cy="6.8"
+          r="5.2"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.4"
+        />
+        <line
+          x1="10.8"
+          y1="10.8"
+          x2="14.6"
+          y2="14.6"
+          stroke="currentColor"
+          stroke-width="1.4"
+          stroke-linecap="round"
+        />
+      </svg>
+      <input
+        v-model="keyword"
+        class="project-toolbar__input"
+        type="text"
+        placeholder="关键字搜索"
+        @keyup.enter="emit('search')"
+      >
+    </label>
+
+    <button
+      type="button"
+      class="project-toolbar__btn"
+      @click="emit('reset')"
+    >
+      重置
+    </button>
+    <button
+      type="button"
+      class="project-toolbar__btn project-toolbar__btn--primary"
+      @click="emit('search')"
+    >
+      搜索
+    </button>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.project-toolbar {
+  .flex(row, flex-start, center);
+  gap: 24px;
+
+  &__field {
+    .flex(row, flex-start, center);
+    position: relative;
+    flex: 0 1 380px;
+    min-width: 0;
+    height: 37px;
+    border-radius: @radius-round;
+    background: @input-bg;
+  }
+
+  &__icon {
+    position: absolute;
+    left: 16px;
+    color: @text-color-disabled;
+    pointer-events: none;
+  }
+
+  &__input {
+    width: 100%;
+    height: 100%;
+    padding: 0 @spacing-base 0 42px;
+    border: none;
+    border-radius: @radius-round;
+    background: transparent;
+    color: @heading-color;
+    font-size: @font-size-base;
+    outline: none;
+
+    &::placeholder {
+      color: @text-color-secondary;
+    }
+  }
+
+  &__btn {
+    flex-shrink: 0;
+    height: 26px;
+    padding: 0 22px;
+    border-radius: @radius-round;
+    background: @pill-bg;
+    color: @text-color;
+    font-size: @font-size-base;
+    transition: color 0.2s, background-color 0.2s;
+
+    &:hover {
+      color: @primary-color;
+    }
+
+    &--primary {
+      background: @primary-color;
+      color: @white;
+
+      &:hover {
+        background: @primary-hover;
+        color: @white;
+      }
+    }
+  }
+}
+</style>