R2m1liA
84b99deef6
All checks were successful
deploy to server / build-and-deploy (push) Successful in 2m56s
- 提取页面部分为SearchHeader与SearchTabs组件
79 lines
1.6 KiB
Vue
79 lines
1.6 KiB
Vue
<template>
|
|
<div class="search-header">
|
|
<h1 class="page-title">{{ $t('search.title') }}</h1>
|
|
<div class="search-bar">
|
|
<el-input
|
|
v-model="keyword"
|
|
class="search-input"
|
|
:placeholder="$t('search-placeholder')"
|
|
:prefix-icon="Search"
|
|
clearable
|
|
@keyup.enter="navigateToQuery(keyword)"
|
|
@clear="handleClear"
|
|
/>
|
|
<el-button
|
|
type="primary"
|
|
class="search-button"
|
|
@click="navigateToQuery(keyword)"
|
|
>
|
|
{{ $t('search.search-button') }}
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Search } from '@element-plus/icons-vue';
|
|
|
|
const keyword = defineModel<string>({ default: '' });
|
|
const localePath = useLocalePath();
|
|
const router = useRouter();
|
|
|
|
const navigateToQuery = (value: string) => {
|
|
const trimmed = value.trim();
|
|
if (!trimmed) return;
|
|
navigateTo({
|
|
path: localePath('/search'),
|
|
query: { query: trimmed },
|
|
});
|
|
};
|
|
|
|
const handleClear = () => {
|
|
keyword.value = '';
|
|
router.replace(localePath({ path: '/search' }));
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.search-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 2.25rem;
|
|
font-weight: 600;
|
|
color: var(--el-text-color-primary);
|
|
}
|
|
|
|
.search-bar {
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
height: 50px;
|
|
}
|
|
|
|
.search-button {
|
|
height: 50px;
|
|
width: 100px;
|
|
font-size: 16px;
|
|
}
|
|
</style>
|