From 418fc1df8962dd63851cdeff801e32cf99c644d3 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Sat, 23 Dec 2023 20:25:58 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/9888

---
 app/appearance/langs/zh_CN.json            |  1 +
 app/src/protyle/render/av/col.ts           |  2 +-
 app/src/protyle/render/av/openMenuPanel.ts |  7 ++
 app/src/protyle/render/av/relation.ts      | 89 ++++++++++++++++++++++
 app/src/types/index.d.ts                   |  6 +-
 5 files changed, 103 insertions(+), 2 deletions(-)
 create mode 100644 app/src/protyle/render/av/relation.ts

diff --git a/app/appearance/langs/zh_CN.json b/app/appearance/langs/zh_CN.json
index e54129749..09460ca15 100644
--- a/app/appearance/langs/zh_CN.json
+++ b/app/appearance/langs/zh_CN.json
@@ -1,4 +1,5 @@
 {
+  "relatedTo": "关联至",
   "relation": "关联",
   "rollup": "查询引用",
   "replaceTypes": {
diff --git a/app/src/protyle/render/av/col.ts b/app/src/protyle/render/av/col.ts
index 4bda7cb62..b5ba506cd 100644
--- a/app/src/protyle/render/av/col.ts
+++ b/app/src/protyle/render/av/col.ts
@@ -149,7 +149,7 @@ export const getEditHTML = (options: {
 </button>`;
     } else if (colData.type === "relation") {
         const databaseName = "TODO"
-        html += `<button class="b3-menu__item" data-type="goUpdateColType">
+        html += `<button class="b3-menu__item" data-type="goSearchAV">
     <span class="b3-menu__label">${window.siyuan.languages.relatedTo}</span>
     <span class="fn__space"></span>
     <svg class="b3-menu__icon"><use xlink:href="#iconDatabase"></use></svg>
diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts
index 9e8cec174..1eee816b4 100644
--- a/app/src/protyle/render/av/openMenuPanel.ts
+++ b/app/src/protyle/render/av/openMenuPanel.ts
@@ -26,6 +26,7 @@ import {removeBlock} from "../../wysiwyg/remove";
 import {getEditorRange} from "../../util/selection";
 import {avRender} from "./render";
 import {setPageSize} from "./row";
+import {openSearchAV} from "./relation";
 
 export const openMenuPanel = (options: {
     protyle: IProtyle,
@@ -738,6 +739,12 @@ export const openMenuPanel = (options: {
                     event.preventDefault();
                     event.stopPropagation();
                     break;
+                } else if (type === "goSearchAV") {
+                    openSearchAV();
+                    setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
                 } else if (type === "goEditCol") {
                     const editMenuElement = hasClosestByClassName(target, "b3-menu");
                     if (editMenuElement) {
diff --git a/app/src/protyle/render/av/relation.ts b/app/src/protyle/render/av/relation.ts
new file mode 100644
index 000000000..3829c3914
--- /dev/null
+++ b/app/src/protyle/render/av/relation.ts
@@ -0,0 +1,89 @@
+import {Menu} from "../../../plugin/Menu";
+import {isMobile} from "../../../util/functions";
+import {hasClosestByAttribute, hasClosestByClassName} from "../../util/hasClosest";
+import {renderAssetsPreview} from "../../../asset/renderAssets";
+import {upDownHint} from "../../../util/upDownHint";
+import {hintRenderAssets} from "../../hint/extend";
+import {focusByRange} from "../../util/selection";
+import {fetchPost} from "../../../util/fetch";
+
+const genSearchList = (element: HTMLElement, keyword: string) => {
+    fetchPost("/api/av/searchAttributeView", {keyword}, (response) => {
+        let html = ""
+        response.data.forEach((item) => {
+            html += `<div class="b3-list-item" data-value="${item.url}">`
+        });
+        element.lastElementChild.innerHTML = html;
+    })
+}
+
+export const openSearchAV = () => {
+    window.siyuan.menus.menu.remove();
+    const menu = new Menu();
+    menu.addItem({
+        iconHTML: "",
+        type: "readonly",
+        label: `<div class="fn__flex-column" style = "min-width: 260px;max-width:420px;max-height: 50vh">
+    <input class="b3-text-field fn__flex-1"/>
+    <div class="b3-list fn__flex-1 b3-list--background" style="position: relative">
+        <img style="margin: 0 auto;display: block;width: 64px;height: 64px" src="/stage/loading-pure.svg">
+    </div>
+</div>`,
+        bind(element) {
+            const listElement = element.querySelector(".b3-list");
+            const inputElement = element.querySelector("input");
+            inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
+                if (event.isComposing) {
+                    return;
+                }
+                const isEmpty = element.querySelector(".b3-list--empty");
+                if (!isEmpty) {
+                    const currentElement = upDownHint(listElement, event);
+                    if (currentElement) {
+                        event.stopPropagation();
+                    }
+                }
+
+                if (event.key === "Enter") {
+                    if (!isEmpty) {
+                        const currentURL = element.querySelector(".b3-list-item--focus").getAttribute("data-value");
+
+                    } else {
+                        window.siyuan.menus.menu.remove();
+                        // focusByRange(protyle.toolbar.range);
+                    }
+                    // 空行处插入 mp3 会多一个空的 mp3 块
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+            });
+            inputElement.addEventListener("input", (event) => {
+                event.stopPropagation();
+                genSearchList(element, inputElement.value);
+            });
+            element.lastElementChild.addEventListener("click", (event) => {
+                const target = event.target as HTMLElement;
+                const previousElement = hasClosestByAttribute(target, "data-type", "previous");
+                if (previousElement) {
+                    inputElement.dispatchEvent(new KeyboardEvent("keydown", {key: "ArrowUp"}));
+                    event.stopPropagation();
+                    return;
+                }
+                const nextElement = hasClosestByAttribute(target, "data-type", "next");
+                if (nextElement) {
+                    inputElement.dispatchEvent(new KeyboardEvent("keydown", {key: "ArrowDown"}));
+                    event.stopPropagation();
+                    return;
+                }
+                const listItemElement = hasClosestByClassName(target, "b3-list-item");
+                if (listItemElement) {
+                    event.stopPropagation();
+                    const currentURL = listItemElement.getAttribute("data-value");
+                    //  hintRenderAssets(currentURL, protyle);
+                    window.siyuan.menus.menu.remove();
+                }
+            });
+            genSearchList(element, "");
+        }
+    });
+}
diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts
index d50b2c0e4..ce7e3a76a 100644
--- a/app/src/types/index.d.ts
+++ b/app/src/types/index.d.ts
@@ -1080,7 +1080,11 @@ interface IAVColumn {
     options?: {
         name: string,
         color: string,
-    }[]
+    }[],
+    relationAvID: string    // 关联的属性视图 ID
+    isBiRelation: string    // 是否双向关联
+    backRelationKeyID: string   // 双向关联时回链关联列的 ID
+    rollupKeyID: string // 汇总列 ID
 }
 
 interface IAVRow {