|
|
@@ -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>
|