Refactor code structure and remove redundant changes

pages/toolbox/components/search.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <header class="h-90px">
+      <div class="mx-a h-full flex items-center justify-center">
+        <!-- 搜索区域 -->
+        <div class="relative w-647px px4 p-r-0px!">
+          <div class="search-input relative w-100%">
+            <el-input
+              v-model="searchQuery"
+              type="text"
+              placeholder="搜一搜"
+              :prefix-icon="Search"
+              class="no-right-border box-border h40 w-100% rounded-bl-4px rounded-br-0px rounded-tl-4px rounded-tr-0px bg-[#F8F8F8] text-14px outline-#999"
+              @keyup.enter="search"
+            />
+          </div>
+        </div>
+        <!-- 按钮区域 -->
+        <div class="flex items-center">
+          <button
+            class="h-40px w-111px cursor-pointer border-width-1px border-color-#1A65FF rounded-bl-0px rounded-br-4px rounded-tl-0px rounded-tr-4px border-none border-solid text-center text-14px color-#fff bg-#1A65FF!"
+            @click="search"
+          >
+            搜索
+          </button>
+          <button
+            class="m-l-16px h-40px w-111px cursor-pointer border-width-1px border-color-#E7B03B rounded-bl-6px rounded-br-6px rounded-tl-4px rounded-tr-6px border-none border-solid text-14px color-#fff bg-#E7B03B!"
+            @click="handleUpload"
+          >
+            上传工具
+          </button>
+        </div>
+      </div>
+    </header>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { Search } from '@element-plus/icons-vue'
+  import useUserStore from '@/store/user'
+  const userStore = useUserStore()
+
+  const emits = defineEmits(['search'])
+
+  const searchQuery = ref('')
+
+  const handleUpload = () => {
+    // 是否登录
+    if (!userStore.token) return ElMessage.error('请先登录')
+    // 新开窗口 用router跳转 新窗口打开
+    window.open('/toolbox-publish', '_blank')
+  }
+
+  const search = () => {
+    emits('search', searchQuery.value)
+  }
+</script>
+<style scoped>
+  .no-right-border :deep(.el-input__wrapper) {
+    border-right: none !important;
+    /* box-shadow: -1px 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset !important; */
+  }
+
+  /* 如果需要调整右侧圆角，可以添加 */
+  .no-right-border :deep(.el-input__wrapper) {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+</style>