支持多个标签（从本版本开始，逐步引入多种概念、属性判定方法）

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": "",

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", "插件样例"]
 }

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 {

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>

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>