|
|
@@ -4,6 +4,8 @@ import { ref } from "vue";
|
|
|
import type { PropType } from "vue";
|
|
|
import type { SearchResult } from "@/types/search.types";
|
|
|
import type { Pagination, ResultMode } from "@/types/search.types";
|
|
|
+import IconSimpleList from "@/components/icons/IconSimpleList.vue";
|
|
|
+import IconDetailList from "@/components/icons/IconDetailList.vue";
|
|
|
|
|
|
// 排序选择项列表
|
|
|
const sortOptions = ref<SelectProps["options"]>([
|
|
|
@@ -51,7 +53,10 @@ function onPageChange(size: string, page: string) {
|
|
|
emits("paginationChange", size, page);
|
|
|
}
|
|
|
|
|
|
+const resultMode = ref('brief');
|
|
|
+
|
|
|
function onModeChange(mode: ResultMode) {
|
|
|
+ resultMode.value = mode;
|
|
|
emits("modeChange", mode);
|
|
|
}
|
|
|
</script>
|
|
|
@@ -61,12 +66,14 @@ function onModeChange(mode: ResultMode) {
|
|
|
<a-space>
|
|
|
<span>搜索结果:共 {{ data.total }} 条</span>
|
|
|
<a-divider type="vertical"></a-divider>
|
|
|
- <span>
|
|
|
+ <span style="display: flex; justify-items: center; align-items: center;">
|
|
|
<span>显示:</span>
|
|
|
- <a-space>
|
|
|
- <a href="#" @click="onModeChange('brief')">简洁</a>
|
|
|
- <a href="#" @click="onModeChange('detail')">详细</a>
|
|
|
- </a-space>
|
|
|
+ <span @click="onModeChange('brief')" class="list-icon" :class="{'list-icon-active': resultMode == 'brief'}">
|
|
|
+ <IconSimpleList style="cursor: pointer;" />
|
|
|
+ </span>
|
|
|
+ <span @click="onModeChange('detail')" class="list-icon" :class="{'list-icon-active': resultMode == 'detail'}">
|
|
|
+ <IconDetailList style="cursor: pointer;" />
|
|
|
+ </span>
|
|
|
</span>
|
|
|
<a-divider type="vertical"></a-divider>
|
|
|
<a-select
|
|
|
@@ -95,4 +102,13 @@ function onModeChange(mode: ResultMode) {
|
|
|
padding-top: 5px;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
+
|
|
|
+.list-icon {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ &.list-icon-active {
|
|
|
+ color: #0079C2;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|