Преглед изворни кода

历史记录界面与交互

Kevin Jiang пре 3 година
родитељ
комит
8d279c36fe

+ 49 - 0
src/views/history/DocumentHistoryView.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import HistoryList from "./components/HistoryList.vue";
+import HistoryToolbar from "./components/HistoryToolbar.vue";
+
+const data = [
+  {
+    id: 1,
+    label: '检索',
+    text: 'TP=(建筑)',
+    link: '/history/1'
+  }
+];
+
+const currentPage = ref(1);
+
+function handleDelete(id: number) {
+  console.log("delete", id);
+}
+</script>
+
+<template>
+  <HistoryToolbar />
+  <HistoryList :data="data" @delete="handleDelete" class="history-list-wrap" />
+  <div class="pagination">
+    <a-pagination v-model:current="currentPage" simple :total="50">
+      <template #itemRender="{ type, originalElement }">
+        <a-button v-if="type === 'prev'" size="small"> 上一页</a-button>
+        <a-button v-else-if="type === 'next'" size="small">下一页</a-button>
+        <component :is="originalElement" v-else></component>
+      </template>
+    </a-pagination>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.history-list-wrap {
+  margin-top: 16px;
+}
+
+.pagination {
+  margin-top: 16px;
+  text-align: right;
+
+  .ant-pagination {
+    height: 28px;
+  }
+}
+</style>

+ 17 - 0
src/views/history/HistoryView.vue

@@ -1,12 +1,29 @@
 <script setup lang="ts">
+import { ref } from "vue";
+import DocumentHistoryView from "./DocumentHistoryView.vue";
+import SearchHistoryView from "./SearchHistoryView.vue";
+
+const activeKey = ref('search');
 </script>
 
 <template>
   <h1 class="title">历史记录</h1>
+  <a-tabs v-model:activeKey="activeKey">
+    <a-tab-pane key="search" tab="检索记录">
+      <SearchHistoryView />
+    </a-tab-pane>
+    <a-tab-pane key="document" tab="浏览记录">
+      <DocumentHistoryView />
+    </a-tab-pane>
+  </a-tabs>
 </template>
 
 <style scoped lang="scss">
 .title {
   font-size: 1.75em;
 }
+
+.history-list-wrap {
+  margin-top: 16px;
+}
 </style>

+ 55 - 0
src/views/history/SearchHistoryView.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import HistoryList from "./components/HistoryList.vue";
+import HistoryToolbar from "./components/HistoryToolbar.vue";
+
+const data = ref([
+  {
+    id: 1,
+    label: '检索',
+    text: 'TP=(建筑)',
+    link: '/history/1'
+  },
+  {
+    id: 2,
+    label: '检索',
+    text: 'TP=(建筑)',
+    link: '/history/2'
+  }
+]);
+
+const currentPage = ref(1);
+
+function handleDelete(id: number) {
+  console.log("delete", id);
+}
+</script>
+
+<template>
+  <HistoryToolbar />
+  <HistoryList :data="data" @delete="handleDelete" class="history-list-wrap" />
+  <div class="pagination">
+    <a-pagination v-model:current="currentPage" simple :total="50">
+      <template #itemRender="{ type, originalElement }">
+        <a-button v-if="type === 'prev'" size="small"> 上一页</a-button>
+        <a-button v-else-if="type === 'next'" size="small">下一页</a-button>
+        <component :is="originalElement" v-else></component>
+      </template>
+    </a-pagination>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.history-list-wrap {
+  margin-top: 16px;
+}
+
+.pagination {
+  margin-top: 16px;
+  text-align: right;
+
+  .ant-pagination {
+    height: 28px;
+  }
+}
+</style>

+ 53 - 0
src/views/history/components/HistoryItem.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { DeleteOutlined } from "@ant-design/icons-vue";
+import type { PropType } from "vue";
+import type { HistoryItem } from "../history-component.type"
+
+const props = defineProps({
+  data: {
+    type: Object as PropType<HistoryItem>,
+    required: true,
+  }
+});
+
+const emits = defineEmits<{
+  (e: "delete", id: number): void;
+}>();
+
+function handleDelete() {
+  emits("delete", props.data.id);
+}
+</script>
+
+<template>
+  <div class="history-item-wrap">
+    <a-row type="flex" justify="space-between" :gutter="8">
+      <a-col flex="1" class="item-content">
+        <span>{{ data.label }}:</span>
+        <a :href="data.link">{{ data.text }}</a>
+      </a-col>
+      <a-col>
+        <a-button type="text" @click="handleDelete">
+          <template #icon><delete-outlined /></template>
+        </a-button>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.history-item-wrap {
+  padding: 8px 16px;
+  border: 1px solid #e0e0e0;
+  border-radius: 5px;
+
+  &:hover {
+    background-color: #fcfcfc;
+  }
+
+  .item-content {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

+ 42 - 0
src/views/history/components/HistoryList.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type { HistoryItem } from "../history-component.type";
+import HistoryItemComp from "./HistoryItem.vue";
+
+defineProps({
+  data: {
+    type: Object as PropType<HistoryItem[]>,
+    required: true,
+  }
+});
+
+const emits = defineEmits<{
+  (e: "delete", id: number): void;
+}>();
+
+function handleDelete(id: number) {
+  emits('delete', id);
+}
+</script>
+
+<template>
+  <div class="histories">
+    <HistoryItemComp
+      v-for="(item, i) in data"
+      :data="item"
+      :key="i"
+      @delete="handleDelete"
+      class="history-item-comp"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.history-item-comp {
+  margin-top: 8px;
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+</style>

+ 55 - 0
src/views/history/components/HistoryToolbar.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { SelectProps } from "ant-design-vue";
+import { ref } from "vue";
+
+const options = ref<SelectProps['options']>([
+  {
+    value: '3',
+    label: '三天内',
+  },
+  {
+    value: '7',
+    label: '一周内',
+  },
+  {
+    value: '30',
+    label: '一个月内',
+  },
+  {
+    value: '365',
+    label: '一年内',
+  },
+]);
+
+const filterValue = ref("3");
+
+const emits = defineEmits<{
+  (e: "filterChange", value: string): void;
+  (e: "deleteAll"): void;
+}>();
+
+function handleChange(value: string) {
+  emits("filterChange", value);
+}
+
+function handleDeleteAll() {
+  emits("deleteAll");
+}
+</script>
+
+<template>
+  <a-row justify="space-between">
+    <a-col>
+      <a-select
+        ref="select"
+        v-model:value="filterValue"
+        style="width: 120px"
+        :options="options"
+        @change="handleChange"
+      ></a-select>
+    </a-col>
+    <a-col>
+      <a-button @click="handleDeleteAll">清除所有记录</a-button>
+    </a-col>
+  </a-row>
+</template>

+ 6 - 0
src/views/history/history-component.type.ts

@@ -0,0 +1,6 @@
+export interface HistoryItem {
+  id: number;
+  label: string;
+  text: string;
+  link: string;
+}