From 506dd9ed37c62e6f0ec8ddc1f17801b09306cc94 Mon Sep 17 00:00:00 2001
From: cheng <1240800450@qq.com>
Date: Wed, 22 May 2024 23:42:40 +0800
Subject: [PATCH] feat: add triad.vue

---
 package.json                 |   1 +
 pnpm-lock.yaml               |  11 +-
 src/api/qa.ts                |  84 ++++++++
 src/main.ts                  |   5 +
 src/views/qa/triad/index.vue | 381 +++++++++++++++++++++++++++++++++--
 5 files changed, 458 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index 8b530d2..f686fa8 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "not op_mini all"
   ],
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
     "@pureadmin/descriptions": "^1.1.1",
     "@pureadmin/table": "^2.3.2",
     "@pureadmin/utils": "^1.9.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b49132f..a7655cd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  "@element-plus/icons-vue":
+    specifier: ^2.3.1
+    version: 2.3.1(vue@3.3.4)
   "@pureadmin/descriptions":
     specifier: ^1.1.1
     version: 1.1.1(element-plus@2.3.6)
@@ -1225,10 +1228,10 @@ packages:
     engines: { node: ">=10" }
     dev: false
 
-  /@element-plus/icons-vue@2.1.0(vue@3.3.4):
+  /@element-plus/icons-vue@2.3.1(vue@3.3.4):
     resolution:
       {
-        integrity: sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA==
+        integrity: sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==
       }
     peerDependencies:
       vue: ^3.2.0
@@ -1853,7 +1856,7 @@ packages:
     peerDependencies:
       element-plus: ^2.0.0
     dependencies:
-      "@element-plus/icons-vue": 2.1.0(vue@3.3.4)
+      "@element-plus/icons-vue": 2.3.1(vue@3.3.4)
       element-plus: 2.3.6(vue@3.3.4)
       vue: 3.3.4
     dev: false
@@ -4164,7 +4167,7 @@ packages:
       vue: ^3.2.0
     dependencies:
       "@ctrl/tinycolor": 3.6.0
-      "@element-plus/icons-vue": 2.1.0(vue@3.3.4)
+      "@element-plus/icons-vue": 2.3.1(vue@3.3.4)
       "@floating-ui/dom": 1.4.2
       "@popperjs/core": /@sxzz/popperjs-es@2.11.7
       "@types/lodash": 4.14.195
diff --git a/src/api/qa.ts b/src/api/qa.ts
index 88c8454..2d5e6b3 100644
--- a/src/api/qa.ts
+++ b/src/api/qa.ts
@@ -1,5 +1,6 @@
 import { http } from "@/utils/http";
 
+// chat
 export type ChatResult = {
   status: string;
   chat_history: Array<{
@@ -36,3 +37,86 @@ export const terminateModel = () => {
     "http://127.0.0.1:5005/qa/terminate_model"
   );
 };
+
+// ---------------------------------------------
+// traid
+export type Triple = {
+  subject: string;
+  relation: string;
+  object: string;
+};
+
+export type GetTriplesResult = {
+  data: Triple[];
+  total: number;
+};
+
+export type AddOrUpdateResult = {
+  message: string;
+};
+
+export type DeleteResult = {
+  message: string;
+};
+
+/** 获取三元组 */
+export const getTraids = (page = 1, limit = 10) => {
+  return http.request<GetTriplesResult>(
+    "get",
+    "http://127.0.0.1:5005/traid/get_traids",
+    {
+      params: { page, limit }
+    }
+  );
+};
+
+/** 搜索三元组 */
+export const searchTraid = (keyword: string) => {
+  return http.request<GetTriplesResult>(
+    "get",
+    "http://127.0.0.1:5005/traid/search",
+    {
+      params: { keyword }
+    }
+  );
+};
+
+/** 添加三元组 */
+export const addTraid = (data: Triple) => {
+  return http.request<AddOrUpdateResult>(
+    "post",
+    "http://127.0.0.1:5005/traid/add",
+    {
+      data
+    }
+  );
+};
+
+/** 更新三元组 */
+export const updateTraid = (data: {
+  old_subject: string;
+  old_relation: string;
+  old_object: string;
+  new_subject: string;
+  new_relation: string;
+  new_object: string;
+}) => {
+  return http.request<AddOrUpdateResult>(
+    "put",
+    "http://127.0.0.1:5005/traid/update",
+    {
+      data
+    }
+  );
+};
+
+/** 删除三元组 */
+export const deleteTraid = (data: Triple) => {
+  return http.request<DeleteResult>(
+    "delete",
+    "http://127.0.0.1:5005/traid/delete",
+    {
+      data
+    }
+  );
+};
diff --git a/src/main.ts b/src/main.ts
index 60db439..8f51b39 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,6 +7,7 @@ import { createApp, Directive } from "vue";
 import { MotionPlugin } from "@vueuse/motion";
 // import { useEcharts } from "@/plugins/echarts";
 import { injectResponsiveStorage } from "@/utils/responsive";
+import * as ElementPlusIconsVue from "@element-plus/icons-vue";
 
 // import Table from "@pureadmin/table";
 // import PureDescriptions from "@pureadmin/descriptions";
@@ -55,3 +56,7 @@ getServerConfig(app).then(async config => {
   // .use(PureDescriptions);
   app.mount("#app");
 });
+
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component);
+}
diff --git a/src/views/qa/triad/index.vue b/src/views/qa/triad/index.vue
index 186f593..890692b 100644
--- a/src/views/qa/triad/index.vue
+++ b/src/views/qa/triad/index.vue
@@ -1,27 +1,368 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { getHelloMessage } from "@/api/routes";
+<template>
+  <div class="container">
+    <div class="title">
+      <el-icon style="font-size: 30px"><Setting /></el-icon>
+      <h1>三元组管理</h1>
+    </div>
+    <div class="search-container">
+      <el-input
+        v-model="keyword"
+        placeholder="输入关键词搜索"
+        @input="searchTriples"
+        clearable
+        class="search-input"
+        style="width: 300px"
+      />
+      <el-button @click="searchTriples" type="primary">搜索</el-button>
+      <el-button @click="openAddDialog" type="success">新增</el-button>
+    </div>
+    <el-table :data="triples" style="width: 100%" stripe>
+      <el-table-column prop="subject" label="主体">
+        <template #default="scope">
+          <el-tooltip
+            class="item"
+            effect="dark"
+            :content="scope.row.subject"
+            placement="top"
+          >
+            <span class="ellipsis">{{ scope.row.subject }}</span>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column prop="relation" label="关系">
+        <template #default="scope">
+          <el-tooltip
+            class="item"
+            effect="dark"
+            :content="scope.row.relation"
+            placement="top"
+          >
+            <span class="ellipsis">{{ scope.row.relation }}</span>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column prop="object" label="客体">
+        <template #default="scope">
+          <el-tooltip
+            class="item"
+            effect="dark"
+            :content="scope.row.object"
+            placement="top"
+          >
+            <span class="ellipsis">{{ scope.row.object }}</span>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作">
+        <template #default="scope">
+          <el-button
+            @click="openUpdateDialog(scope.row)"
+            type="primary"
+            size="small"
+            >修改</el-button
+          >
+          <el-button
+            @click="confirmDelete(scope.row)"
+            type="danger"
+            size="small"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination">
+      <el-pagination
+        @current-change="handlePageChange"
+        :current-page="page"
+        :page-size="limit"
+        layout="prev, pager, next"
+        :total="total"
+      />
+    </div>
+    <!-- 删除确认对话框 -->
+    <el-dialog
+      title="确认删除"
+      v-model="deleteDialogVisible"
+      width="30%"
+      @close="resetDeleteDialog"
+    >
+      <span>确认要删除这个三元组吗？</span>
+      <template #footer>
+        <el-button @click="deleteDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="deleteTraidConfirm">确认</el-button>
+      </template>
+    </el-dialog>
+    <!-- 修改对话框 -->
+    <el-dialog
+      title="修改三元组"
+      v-model="updateDialogVisible"
+      width="50%"
+      @close="resetUpdateDialog"
+    >
+      <el-form :model="updateForm">
+        <el-form-item label="主体" :label-width="formLabelWidth">
+          <el-input v-model="updateForm.new_subject" />
+        </el-form-item>
+        <el-form-item label="关系" :label-width="formLabelWidth">
+          <el-input v-model="updateForm.new_relation" />
+        </el-form-item>
+        <el-form-item label="客体" :label-width="formLabelWidth">
+          <el-input v-model="updateForm.new_object" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="updateDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="updateTraidConfirm">确认</el-button>
+      </template>
+    </el-dialog>
+    <!-- 新增对话框 -->
+    <el-dialog
+      title="新增三元组"
+      v-model="addDialogVisible"
+      width="50%"
+      @close="resetAddDialog"
+    >
+      <el-form :model="addForm">
+        <el-form-item label="主体" :label-width="formLabelWidth">
+          <el-input v-model="addForm.subject" />
+        </el-form-item>
+        <el-form-item label="关系" :label-width="formLabelWidth">
+          <el-input v-model="addForm.relation" />
+        </el-form-item>
+        <el-form-item label="客体" :label-width="formLabelWidth">
+          <el-input v-model="addForm.object" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="addDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="addTraidConfirm">确认</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
 
-defineOptions({
-  name: "QAtriad"
-});
+<script>
+import { ref, onMounted } from "vue";
+import {
+  getTraids,
+  searchTraid,
+  updateTraid,
+  deleteTraid,
+  addTraid
+} from "@/api/qa";
+import { ElMessage } from "element-plus";
 
-const message = ref(""); // 响应式变量，用于存储返回的消息
+export default {
+  setup() {
+    const triples = ref([]);
+    const page = ref(1);
+    const limit = ref(10);
+    const keyword = ref("");
+    const total = ref(0);
 
-const handleClick = async () => {
-  try {
-    const response = await getHelloMessage();
-    message.value = response.message; // 更新消息
-  } catch (error) {
-    console.error("Error fetching message:", error);
-    message.value = "Error fetching message";
+    const deleteDialogVisible = ref(false);
+    const updateDialogVisible = ref(false);
+    const addDialogVisible = ref(false);
+
+    const deleteForm = ref({});
+    const updateForm = ref({
+      old_subject: "",
+      old_relation: "",
+      old_object: "",
+      new_subject: "",
+      new_relation: "",
+      new_object: ""
+    });
+    const addForm = ref({
+      subject: "",
+      relation: "",
+      object: ""
+    });
+
+    const formLabelWidth = "80px";
+
+    const fetchTriples = async () => {
+      try {
+        const response = await getTraids(page.value, limit.value);
+        triples.value = response.data;
+        total.value = response.total;
+      } catch (error) {
+        console.error("Failed to fetch triples:", error);
+        ElMessage.error("获取三元组失败");
+      }
+    };
+
+    const searchTriples = async () => {
+      try {
+        if (keyword.value) {
+          const response = await searchTraid(keyword.value);
+          triples.value = response.data;
+          total.value = response.total;
+        } else {
+          fetchTriples();
+        }
+      } catch (error) {
+        console.error("Failed to search triples:", error);
+        ElMessage.error("搜索三元组失败");
+      }
+    };
+
+    const handlePageChange = newPage => {
+      page.value = newPage;
+      fetchTriples();
+    };
+
+    const confirmDelete = row => {
+      deleteForm.value = { ...row };
+      deleteDialogVisible.value = true;
+    };
+
+    const deleteTraidConfirm = async () => {
+      try {
+        await deleteTraid(deleteForm.value);
+        ElMessage.success("删除成功");
+        deleteDialogVisible.value = false;
+        fetchTriples();
+      } catch (error) {
+        console.error("Failed to delete triple:", error);
+        ElMessage.error("删除失败");
+      }
+    };
+
+    const openUpdateDialog = row => {
+      updateForm.value.old_subject = row.subject;
+      updateForm.value.old_relation = row.relation;
+      updateForm.value.old_object = row.object;
+      updateForm.value.new_subject = row.subject;
+      updateForm.value.new_relation = row.relation;
+      updateForm.value.new_object = row.object;
+      updateDialogVisible.value = true;
+    };
+
+    const updateTraidConfirm = async () => {
+      try {
+        await updateTraid(updateForm.value);
+        ElMessage.success("修改成功");
+        updateDialogVisible.value = false;
+        fetchTriples();
+      } catch (error) {
+        console.error("Failed to update triple:", error);
+        ElMessage.error("修改失败");
+      }
+    };
+
+    const openAddDialog = () => {
+      addDialogVisible.value = true;
+    };
+
+    const addTraidConfirm = async () => {
+      try {
+        await addTraid(addForm.value);
+        ElMessage.success("新增成功");
+        addDialogVisible.value = false;
+        fetchTriples();
+      } catch (error) {
+        console.error("Failed to add triple:", error);
+        ElMessage.error("新增失败");
+      }
+    };
+
+    const resetDeleteDialog = () => {
+      deleteForm.value = {};
+    };
+
+    const resetUpdateDialog = () => {
+      updateForm.value = {
+        old_subject: "",
+        old_relation: "",
+        old_object: "",
+        new_subject: "",
+        new_relation: "",
+        new_object: ""
+      };
+    };
+
+    const resetAddDialog = () => {
+      addForm.value = {
+        subject: "",
+        relation: "",
+        object: ""
+      };
+    };
+
+    onMounted(() => {
+      fetchTriples();
+    });
+
+    return {
+      triples,
+      page,
+      limit,
+      keyword,
+      total,
+      deleteDialogVisible,
+      updateDialogVisible,
+      addDialogVisible,
+      deleteForm,
+      updateForm,
+      addForm,
+      formLabelWidth,
+      fetchTriples,
+      searchTriples,
+      handlePageChange,
+      confirmDelete,
+      deleteTraidConfirm,
+      openUpdateDialog,
+      updateTraidConfirm,
+      openAddDialog,
+      addTraidConfirm,
+      resetDeleteDialog,
+      resetUpdateDialog,
+      resetAddDialog
+    };
   }
 };
 </script>
 
-<template>
-  <h1>三元组管理</h1>
-  <button @click="handleClick">获取消息</button>
-  <p v-if="message">{{ message }}</p>
-  <!-- 显示消息 -->
-</template>
+<style scoped>
+.container {
+  width: 100%;
+  margin: 0 auto;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.title el-icon {
+  margin-right: 10px;
+}
+
+.search-container {
+  /* display: flex; */
+
+  /* align-items: center; */
+  float: right;
+  margin-bottom: 20px;
+}
+
+.search-input {
+  flex-grow: 1;
+  margin-right: 10px;
+}
+
+.pagination {
+  float: right;
+  margin-top: 20px;
+}
+
+.ellipsis {
+  display: inline-block;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>