remilia/jinshen-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 为文档库/相关问题页面添加类型筛选功能 #92

Manually merged
remilia merged 10 commits from feat/support-category into master 2025-12-03 18:00:13 +08:00
Conversation 0 Commits 10 Files Changed 17 +510 -101
17 changed files with 510 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 3c6bff4d31 - Show all commits

149
app/components/shared/ProductFilter.vue
View File

@ -1,149 +0,0 @@
<template>
<div class="question-category">
<el-row class="hide-on-mobile" :gutter="12">
<el-col :span="8">
<span class="select-label">{{
$t('product-filter.product-type')
}}</span>
<el-select
v-model="model.selectedType"
:placeholder="$t('product-filter.select-product-type')"
clearable
>
<el-option
v-for="type in productTypeOptions"
:key="type.id"
:label="type.name"
:value="type.id"
/>
</el-select>
</el-col>
<el-col :span="8">
<span class="select-label">{{
$t('product-filter.product-model')
}}</span>
<el-select
v-model="model.selectedProduct"
:placeholder="$t('product-filter.select-product-model')"
clearable
>
<el-option
v-for="product in productOptions"
:key="product.id"
:label="product.name"
:value="product.id"
/>
</el-select>
</el-col>
<el-col :span="8">
<span class="select-label">{{ $t('product-filter.keyword') }}</span>
<el-input
v-model="model.keyword"
:placeholder="$t('product-filter.enter-keyword')"
clearable
:prefix-icon="Search"
/>
</el-col>
</el-row>
<el-row class="display-on-mobile" :gutter="12">
<el-col :span="12">
<span class="select-label">{{
$t('product-filter.product-type')
}}</span>
<el-select
v-model="model.selectedType"
:placeholder="$t('product-filter.select-product-type')"
clearable
>
<el-option
v-for="type in productTypeOptions"
:key="type.id"
:label="type.name"
:value="type.id"
/>
</el-select>
</el-col>
<el-col :span="12">
<span class="select-label">{{
$t('product-filter.product-model')
}}</span>
<el-select
v-model="model.selectedProduct"
:placeholder="$t('product-filter.select-product-model')"
clearable
>
<el-option
v-for="product in productOptions"
:key="product.id"
:label="product.name"
:value="product.id"
/>
</el-select>
</el-col>
</el-row>
<el-row class="display-on-mobile">
<span class="select-label">{{ $t('product-filter.keyword') }}</span>
<el-input
v-model="model.keyword"
:placeholder="$t('product-filter.enter-keyword')"
clearable
:prefix-icon="Search"
/>
</el-row>
</div>
</template>
<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
defineProps({
productTypeOptions: {
type: Array as () => Array<{ id: string; name: string }>,
default: () => [],
},
productOptions: {
type: Array as () => Array<{ id: string; name: string }>,
default: () => [],
},
});
const model = defineModel<{
keyword: string;
selectedType: string | null;
selectedProduct: string | null;
}>();
</script>
<style scoped>
.question-category {
margin-bottom: 1rem;
}
.select-label {
color: var(--el-text-color-secondary);
font-size: 0.9rem;
}
:deep(.el-select__wrapper),
:deep(.el-input__wrapper) {
height: 40px;
font-size: 0.9rem;
}
.display-on-mobile {
display: none;
}
@media (max-width: 768px) {
.hide-on-mobile {
display: none;
}
.display-on-mobile {
display: flex;
margin-bottom: 1rem;
}
}
</style>