From df6f5471df548b2b08f22a8b461ecbcd79d1e865 Mon Sep 17 00:00:00 2001
From: dualwind <dualwind@qq.com>
Date: Sun, 21 Jan 2024 00:48:04 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=A4=9A=E4=B8=AA=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=EF=BC=88=E4=BB=8E=E6=9C=AC=E7=89=88=E6=9C=AC=E5=BC=80?=
 =?UTF-8?q?=E5=A7=8B=EF=BC=8C=E9=80=90=E6=AD=A5=E5=BC=95=E5=85=A5=E5=A4=9A?=
 =?UTF-8?q?=E7=A7=8D=E6=A6=82=E5=BF=B5=E3=80=81=E5=B1=9E=E6=80=A7=E5=88=A4?=
 =?UTF-8?q?=E5=AE=9A=E6=96=B9=E6=B3=95=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                     |   4 +-
 plugin.json                      |  27 ++-----
 src/VueApp.vue                   |  56 ++++++++------
 src/components/SelectTag.vue     |  75 +++++++++----------
 src/components/Table.vue         |   6 +-
 src/components/TableData_Tag.vue | 125 +++++++++++++++++++++----------
 6 files changed, 170 insertions(+), 123 deletions(-)

diff --git a/package.json b/package.json
index d0e50bb..5dd8f3d 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
   "name": "siyuan-plugin-table-view",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
-  "description": "This is a sample plugin based on vite and svelte for Siyuan (https://b3log.org/siyuan)",
+  "description": "抽取笔记内容生成表格，汇总概念及其属性",
   "repository": "",
   "homepage": "",
   "author": "",
diff --git a/plugin.json b/plugin.json
index 33956c9..1c43804 100644
--- a/plugin.json
+++ b/plugin.json
@@ -2,37 +2,24 @@
   "name": "siyuan-plugin-table-view",
   "author": "dualwind",
   "url": "https://github.com/etchnight/siyuan-plugin-table-view",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "minAppVersion": "2.11.4",
-  "backends": [
-    "windows",
-    "linux",
-    "darwin",
-    "ios",
-    "android"
-  ],
-  "frontends": [
-    "desktop",
-    "browser-desktop",
-    "desktop-window"
-  ],
+  "backends": ["windows", "linux", "darwin", "ios", "android"],
+  "frontends": ["desktop", "browser-desktop", "desktop-window"],
   "displayName": {
     "en_US": "Table View",
     "zh_CN": "表格预览"
   },
   "description": {
-    "en_US": "Use tags to generate a table of note content",
-    "zh_CN": "利用标签生成笔记内容表格"
+    "en_US": "Extract the content of the notes to generate a table that summarizes concepts and their attributes",
+    "zh_CN": "抽取笔记内容生成表格，汇总概念及其属性"
   },
   "readme": {
     "en_US": "README_en_US.md",
     "zh_CN": "README.md"
   },
   "funding": {
-    "custom": [
-    ]
+    "custom": []
   },
-  "keywords": [
-    "plugin", "sample", "插件样例"
-  ]
+  "keywords": ["plugin", "sample", "插件样例"]
 }
diff --git a/src/VueApp.vue b/src/VueApp.vue
index 31a1d9c..1374fbf 100644
--- a/src/VueApp.vue
+++ b/src/VueApp.vue
@@ -1,36 +1,50 @@
 <template>
-  <el-row>
-    <el-col :span="24">
-      <SelectTag
-        @tagSelected="
-          (tag, tagChildren) => {
-            selectedTag = tag;
-            selectedTagChildren = tagChildren;
-          }
-        "
+  <el-form :inline="true">
+    <el-form-item v-for="(domain, index) in tagDomains">
+      <SelectTag v-model="tagDomains[index]" />
+      <el-button
+        :icon="Delete"
+        type="info"
+        circle
+        @click.prevent="removeTagDomain(index)"
       />
-    </el-col>
-  </el-row>
+    </el-form-item>
+    <el-form-item>
+      <el-button :icon="Plus" type="info" circle @click="addTagDomain" />
+    </el-form-item>
+  </el-form>
   <el-row>
     <el-col :span="24">
-      <TableData_Tag
-        :tag="selectedTag.value"
-        :tagChildren="selectedTagChildren"
-      />
+      <TableData_Tag :tags="tagDomains" />
     </el-col>
   </el-row>
-  <el-row>
-    <el-col :span="24"> <div id="protyle"></div> </el-col>
-  </el-row>
 </template>
 
 <script lang="ts" setup>
 import { ref } from "vue";
+import { Delete, Plus } from "@element-plus/icons-vue";
 import SelectTag from "./components/SelectTag.vue";
-import TableData_Tag from "./components/TableData_Tag.vue";
+import TableData_Tag, { TagSelectedItem } from "./components/TableData_Tag.vue";
+const tagDomains = ref<TagSelectedItem[]>([
+  {
+    tag: {
+      value: "",
+    },
+    children: [],
+  },
+]);
 
-const selectedTag = ref({ value: "没有标签" });
-const selectedTagChildren = ref([]);
+const addTagDomain = () => {
+  tagDomains.value.push({
+    tag: {
+      value: "",
+    },
+    children: [],
+  });
+};
+const removeTagDomain = (index: number) => {
+  tagDomains.value.splice(index, 1);
+};
 </script>
 <style>
 .el-row {
diff --git a/src/components/SelectTag.vue b/src/components/SelectTag.vue
index f027bb7..5b5906a 100644
--- a/src/components/SelectTag.vue
+++ b/src/components/SelectTag.vue
@@ -1,45 +1,40 @@
 <template>
-  <el-form>
-    <el-form-item>
-      <el-autocomplete
-        v-model="state"
-        :fetch-suggestions="querySearchAsync"
-        :placeholder="placeholderText"
-        @select="handleSelect"
-        :disabled="disableInput"
-      >
-      </el-autocomplete>
-      <el-icon class="is-loading" v-if="loading"><Loading /></el-icon>
-      <el-button :icon="Delete" type="info" circle @click="clearInput" />
-    </el-form-item>
-  </el-form>
+  <el-autocomplete
+    v-model="model.tag.value"
+    :fetch-suggestions="querySearchAsync"
+    :placeholder="placeholderText"
+    @select="handleSelect"
+    :disabled="model.tag.value !== '' || loading"
+  >
+  </el-autocomplete>
+  <el-icon class="is-loading" v-if="loading"><Loading /></el-icon>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, ref } from "vue";
 import { searchTag } from "../../lib/siyuanPlugin-common/siyuan-api/search";
-import { Delete, Loading } from "@element-plus/icons-vue";
+import { Loading } from "@element-plus/icons-vue";
 
-const state = ref("");
-const disableInput = ref(false);
+const model = defineModel<{
+  tag: TagItem;
+  children: TagItem[];
+}>();
 const loading = ref(true);
-//let tags = [];
 const tagsRef = ref([]);
-//const emit = defineEmits(["tagSelected"]);
-const emit = defineEmits<{
+/*const emit = defineEmits<{
   tagSelected: [tag: TagItem, children: TagItem[]]; // 具名元组语法
-}>();
+}>();*/
 const placeholderText = ref("正在加载标签");
 
 export interface TagItem {
-  value: string;
+  value: string; //由于autocomplete组件的原因，返回值必须含有value字段
 }
-const clearInput = () => {
-  state.value = "";
-  disableInput.value = false;
-};
 
-//let timeout: ReturnType<typeof setTimeout>;
+/**
+ * @description 由于autocomplete组件的原因，返回值必须含有value字段
+ * @param queryString
+ * @param cb
+ */
 const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
   const results = queryString
     ? tagsRef.value.filter(createFilter(queryString))
@@ -53,27 +48,31 @@ const createFilter = (queryString: string) => {
 };
 
 const handleSelect = (item: TagItem) => {
-  disableInput.value = true;
+  //disableInput.value = true;
   let children = tagsRef.value.filter((tag) => {
     return tag.value.indexOf(item.value) === 0 && tag.value !== item.value;
   });
-  emit("tagSelected", item, children);
+  //emit("tagSelected", item, children);
+  model.value = {
+    tag: item,
+    children: children,
+  };
 };
-
 //加载标签
 onMounted(async () => {
   placeholderText.value = "正在加载标签";
-  disableInput.value = true;
-  const res = await searchTag("");
+  loading.value = true;
   let tags = [];
-  for (let tag of res.tags) {
-    tags.push({
-      value: tag,
-    });
+  if (model.value.tag.value === "") {
+    const res = await searchTag("");
+    for (let tag of res.tags) {
+      tags.push({
+        value: tag,
+      });
+    }
+    tagsRef.value = tags;
   }
   loading.value = false;
-  disableInput.value = false;
   placeholderText.value = "请输入标签";
-  tagsRef.value = tags;
 });
 </script>
diff --git a/src/components/Table.vue b/src/components/Table.vue
index d32d736..c65433c 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -12,12 +12,11 @@
       fixed="left"
       align="center"
     />
-    <TableColumn v-for="prop in props.columnProps" :child="prop">
-    </TableColumn>
+    <TableColumn v-for="prop in props.columnProps" :child="prop"> </TableColumn>
   </el-table>
 </template>
 <script lang="ts" setup>
-import TableColumn from "./TableColumn.vue"
+import TableColumn from "./TableColumn.vue";
 const props = defineProps<{
   tableData: Data[];
   columnProps: Head[];
@@ -34,5 +33,6 @@ export interface Head {
   value: string;
   label: string;
   children: Head[];
+  path: string[];
 }
 </script>
diff --git a/src/components/TableData_Tag.vue b/src/components/TableData_Tag.vue
index 261a8c9..edae75f 100644
--- a/src/components/TableData_Tag.vue
+++ b/src/components/TableData_Tag.vue
@@ -1,12 +1,13 @@
 <template>
+  <el-button type="primary" @click="submit">生成</el-button>
   <Table
     :loading="loading"
     :tableData="tableDataRef"
-    :columnProps="tableHead.children"
+    :columnProps="tableHeadRef.children"
   ></Table>
 </template>
 <script lang="ts" setup>
-import { ref, watch } from "vue";
+import { ref } from "vue";
 import {
   queryBlocksByTag,
   queryDescendantBlocks,
@@ -15,79 +16,124 @@ import {
 import { Block } from "../../lib/siyuanPlugin-common/types/siyuan-api";
 import { Data, Head } from "./Table.vue";
 import Table from "./Table.vue";
+import { TagItem } from "./SelectTag.vue";
 
-const props = defineProps<{
-  tag: string;
-  tagChildren: { value: string }[];
-}>();
-
+const props = defineProps<{ tags: TagSelectedItem[] }>();
+export interface TagSelectedItem {
+  tag: TagItem;
+  children: TagItem[];
+}
 //let tableDate = [];
 const tableDataRef = ref([]);
 const loading = ref(false);
-const tableHead = ref<Head>({
+const tableHeadRef = ref<Head>({
   value: "",
   label: "",
   children: [],
+  path: [],
 });
 
 const recurList2Tree = (parent: Head, list: { value: string }[]) => {
   let children: Head[] = [];
-  const parentLevel = parent.value.split("/").length;
   for (let item of list) {
     let itemPath = item.value.split("/");
-    if (
-      itemPath.length == parentLevel + 1 &&
-      item.value.indexOf(parent.value) == 0
-    ) {
+    let isChild = true;
+    if (itemPath.length !== parent.path.length + 1) {
+      isChild = false;
+    } else {
+      for (let i = 0; i < parent.path.length; i++) {
+        if (itemPath[i] !== parent.path[i]) {
+          isChild = false;
+          break;
+        }
+      }
+    }
+
+    if (isChild) {
       children.push({
         value: item.value,
         label: itemPath[itemPath.length - 1],
         children: [],
+        path: itemPath,
       });
     }
   }
-  parent.children = children;
+  parent.children = parent.children.concat(children);
   for (let child of parent.children) {
     recurList2Tree(child, list);
   }
 };
-
+const buildHead = (props: TagSelectedItem[]) => {
+  /*构建表头*/
+  tableHeadRef.value.children = [];
+  tableHeadRef.value.label = "";
+  for (const item of props) {
+    tableHeadRef.value.value = item.tag.value;
+    tableHeadRef.value.path = item.tag.value.split("/");
+    recurList2Tree(tableHeadRef.value, item.children);
+  }
+};
 //?是否可以不用watch
 //主程序入口
-watch(props, async (newProps) => {
+const submit = async () => {
+  //console.log(props.tags);
   loading.value = true;
-  const tag = newProps.tag;
-  const columnProps = newProps.tagChildren;
-  /*构建表头*/
-  let tagTree: Head = {
-    value: tag,
-    label: tag,
-    children: [],
-  };
-  recurList2Tree(tagTree, columnProps);
-  tableHead.value = tagTree;
-  /*构建表格主体
+  //去重
+  let tags: string[] = [];
+  let propDeduplication: TagSelectedItem[] = [];
+  for (let item of props.tags) {
+    if (item.tag.value === "") {
+      continue;
+    }
+    if (tags.indexOf(item.tag.value) !== -1) {
+      continue;
+    }
+    tags.push(item.tag.value);
+    propDeduplication.push(item);
+  }
+  buildHead(propDeduplication);
+  //console.log(tableHeadRef.value);
+  //构建表格主体
+  //查找后代块
+  const dataSourceGroup = await Promise.all(
+    propDeduplication.map(async (item) => {
+      const tag = item.tag.value;
+      const nameBlocks = await queryBlocksByTag(tag);
+      let children = await Promise.all(
+        nameBlocks.map(async (block: Block) => {
+          const childBlocks = await queryDescendantBlocks(block);
+          return {
+            tag: tag,
+            columnProps: item.children,
+            childBlocks: childBlocks,
+            nameBlock: block,
+          };
+        })
+      );
+      return children;
+    })
+  );
+  /*
   第一列为名称，值为tag所在block的content
   其余列根据tag表示的属性，分别从后代block中查找*/
-  const nameBlocks = await queryBlocksByTag(tag);
-  tableDataRef.value = await Promise.all(
-    nameBlocks.map(async (block: Block) => {
+  tableDataRef.value = [];
+  for (const itemGroup of dataSourceGroup) {
+    for (const item of itemGroup) {
       let data: Data = {
         //todo 简单去除方法，未考虑行内代码等包含标签关键字情况
-        name: block.content.replace("#" + tag + "#", ""),
+        name: item.nameBlock.content.replace("#" + item.tag + "#", ""),
       };
-      const childBlocks = await queryDescendantBlocks(block);
       //const childBlocksReverse = childBlocks.toReversed();
-      for (let prop of columnProps) {
+      for (let prop of item.columnProps) {
         /*查找到的block需满足以下条件
        - 如果不是段落，直接满足
        - 如果是段落，则必须是父级的第一个子块，并且父级content是含有标签的块
        */
-        let propBlock = childBlocks.find((e) => {
+        let propBlock = item.childBlocks.find((e) => {
           return e.fcontent.indexOf(prop.value) > -1 && e.type !== "l";
         });
         if (!propBlock) {
-          propBlock = childBlocks.find((e) => {
+          propBlock = item.childBlocks.find((e) => {
             return e.content.indexOf(prop.value) > -1 && e.type == "p";
           });
         }
@@ -96,9 +142,10 @@ watch(props, async (newProps) => {
         }
       }
 
-      return data;
-    })
-  );
+      tableDataRef.value.push(data);
+    }
+  }
+  //console.log(tableDataRef.value);
   loading.value = false;
-});
+};
 </script>