分类面板修改

locales/en.json

@@ -18,7 +18,8 @@
         "requestFailed": "Request failed, please check the network or API configuration",
         "noFileSelected": "No file selected",
         "titleOrContentCannotBeEmpty": "Title or content cannot be empty",
-        "readFileError": "Read file error, please check the file content"
+        "readFileError": "Read file error, please check the file content",
+        "noTypechoUser": "No Typecho user, please input the user who uses the operation"
     },
     "field": {
         "title": "title",

locales/zh.json

@@ -18,7 +18,8 @@
         "requestFailed": "请求失败，请检查网络或 API 配置",
         "noFileSelected": "未选择文件",
         "titleOrContentCannotBeEmpty": "标题或内容不能为空",
-        "readFileError": "读取文件错误，请检查文件内容"
+        "readFileError": "读取文件错误，请检查文件内容",
+        "noTypechoUser": "未设置 Typecho 用户"
     },
     "field": {
         "title": "标题",

main.ts

@@ -1,7 +1,7 @@
 import { Plugin, addIcon } from "obsidian";
 import { settingTab } from "./setting/setting_tab";
 import { PushModal } from "./view/push_modal";
-import { ArticleView, VIEW_TYPE as ArticleViewType } from "./view/article_view";
+import { CategoryView, VIEW_TYPE as ArticleViewType } from "./view/categories";
 import {
 	TypechoPluginSettings,
 	DEFAULT_SETTINGS,
@@ -28,7 +28,7 @@ export default class TypechoPlugin extends Plugin {
 			}
 		);
 
-		this.registerView(ArticleViewType, (leaf) => new ArticleView(leaf));
+		this.registerView(ArticleViewType, (leaf) => new CategoryView(leaf));
 		this.openPluginView();
 	}
 

styles.css

@@ -1,17 +1,24 @@
 .tree-container {
-	font-family: sans-serif;
-	color: #ccc;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+		sans-serif;
+	color: #e0e0e0;
+	padding: 8px;
 }
+
 .tree-node-list {
 	list-style: none;
 	padding-left: 0;
-}
-.tree-children {
-	margin-top: 4px;
+	margin: 0;
 }
 
-.tree-node-label {
-	font-size: 14px;
+.tree-node-item {
+	position: relative;
+	margin-bottom: 4px;
+}
+
+.tree-children {
+	margin-top: 4px;
+	transition: all 0.2s ease-in-out;
 }
 
 .tree-node-wrapper {
@@ -19,21 +26,86 @@
 	align-items: center;
 	cursor: pointer;
 	user-select: none;
+	padding: 6px 8px;
+	border-radius: 6px;
+	transition: background-color 0.2s ease-in-out;
 }
 
-.tree-file-icon {
-	margin-right: 8px;
-	font-size: 14px;
-	color: #888;
+.tree-node-wrapper:hover {
+	background-color: #2a2a2a;
 }
 
 .tree-toggle-icon {
 	margin-right: 8px;
 	font-size: 12px;
-	user-select: none;
+	color: #888;
+	transition: transform 0.2s ease-in-out;
 	cursor: pointer;
 }
 
+.tree-toggle-icon.expanded {
+	transform: rotate(90deg);
+	color: #bbb;
+}
+
+.tree-article-icon {
+	margin-right: 6px;
+	color: #66afee;
+	font-size: 14px;
+	transition: color 0.2s ease-in-out;
+}
+
+.tree-node-wrapper:hover .tree-article-icon {
+	color: #88caff;
+}
+
+.tree-link-icon {
+	margin-right: 6px;
+	color: #3c9cf0;
+	font-size: 14px;
+	transition: color 0.2s ease-in-out;
+}
+
+.tree-node-wrapper:hover .tree-link-icon {
+	color: #008cff;
+}
+
 .tree-node-label {
 	font-size: 14px;
+	flex: 1;
+	transition: color 0.2s ease-in-out;
+}
+
+.tree-indent {
+	position: absolute;
+	left: 0;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 16px;
+	height: 16px;
+}
+
+.tree-indent::before {
+	content: "";
+	position: absolute;
+	bottom: 0;
+	left: 8px;
+	width: 1px;
+	background: #444;
+}
+
+.tree-node-list ul {
+	padding-left: 16px;
+	position: relative;
+}
+
+.tree-node-list ul::before {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 8px;
+	bottom: 0;
+	width: 1px;
+	background: #333;
+	border-left: 1px dashed #444;
 }

utils/util.ts

@@ -0,0 +1,79 @@
+// 定义树节点接口
+export interface TreeNode {
+    id?: number;
+    [key: string]: any;
+    children: TreeNode[];
+    parent?: TreeNode;
+}
+
+export const Util = {
+    // tree
+    treeUtil: {
+        generateTreeData: function<T extends Record<string, any>>(
+            data: T[], 
+            nodeId: keyof T, 
+            parentNodeKey: keyof T
+        ): TreeNode[] {
+            // 将数据存储为以 nodeId 为 KEY 的 map 索引数据列
+            const map: Record<string | number, TreeNode> = {};
+            data.forEach((item) => {
+                (item as unknown as TreeNode).children = [];
+                map[item[nodeId] as string | number] = item as unknown as TreeNode;
+            });
+
+            // 遍历数据，构建树形结构
+            const rootNodes: TreeNode[] = [];
+            data.forEach((item) => {
+                const parent = map[item[parentNodeKey] as string | number];
+                if (parent) {
+                    parent.children.push(item as unknown as TreeNode);
+                    (item as unknown as TreeNode).parent = parent;
+                } else {
+                    rootNodes.push(item as unknown as TreeNode);
+                }
+            });
+
+            return rootNodes;
+        },
+        // 在树形结构中查找指定id节点
+        findNodeInTree: function(tree: TreeNode[], id: number): TreeNode | undefined {
+            for (let i = 0; i < tree.length; i++) {
+                if (tree[i].id === id) {
+                    return tree[i];
+                } else {
+                    if (tree[i].children) {
+                        const node = this.findNodeInTree(tree[i].children, id);
+                        if (node) {
+                            return node;
+                        }
+                    }
+                }
+            }
+            return undefined;
+        },
+        // 在树形结构中查找指定id节点的上一个父节点
+        findParentNodeInTree: function(tree: TreeNode[], id: number): TreeNode | null {
+            // Id等于0的节点为根节点，没有父节点
+            // id找到了的话，往上找一层父节点返回
+            if (id === 0) {
+                return null;
+            }
+            for (let i = 0; i < tree.length; i++) {
+                if (tree[i].id === id) {
+                    return tree[i].parent || null;
+                } else {
+                    if (tree[i].children) {
+                        const node = this.findParentNodeInTree(
+                            tree[i].children,
+                            id
+                        );
+                        if (node) {
+                            return node;
+                        }
+                    }
+                }
+            }
+            return null;
+        },
+    },
+};

view/article_view.ts

@@ -1,104 +0,0 @@
-// main.ts
-import { ItemView } from "obsidian";
-import i18n from "../utils/i18n";
-import { mockTreeData } from "./mockData";
-
-const VIEW_TYPE = "article-view";
-
-class ArticleView extends ItemView {
-	getViewType(): string {
-		return VIEW_TYPE;
-	}
-
-	getDisplayText() {
-		return "我的插件面板";
-	}
-
-	getIcon(): string {
-		return "typecho";
-	}
-
-	async onOpen() {
-		const container = this.containerEl.children[1];
-		container.empty();
-
-		// 标题
-		container.createEl("h4", { text: i18n.t("field.article") });
-
-		// 渲染树结构
-		const treeContainer = container.createDiv({ cls: "tree-container" });
-		this.renderTree(treeContainer, mockTreeData);
-	}
-
-	renderTree(container: HTMLElement, nodes: any[], depth = 0) {
-		const ul = container.createEl("ul", { cls: "tree-node-list" });
-
-		for (const node of nodes) {
-			const li = ul.createEl("li");
-			const wrapper = li.createDiv({ cls: "tree-node-wrapper" });
-
-			// 缩进
-			const indent = wrapper.createSpan({ cls: "tree-indent" });
-			indent.style.paddingLeft = `${depth * 16}px`;
-
-			// 判断并添加展开/折叠图标
-			if (node.children && node.children.length > 0) {
-				const toggleIcon = wrapper.createEl("span", {
-					text: node.isExpanded ? "▼" : "▶",
-					cls: "tree-toggle-icon",
-				});
-
-				toggleIcon.addEventListener("click", (e) => {
-					e.stopPropagation();
-					node.isExpanded = !node.isExpanded;
-					toggleIcon.setText(node.isExpanded ? "▼" : "▶");
-
-					if (node.isExpanded) {
-						const childContainer =
-							li.querySelector(".tree-children") ||
-							li.createEl("div", { cls: "tree-children" });
-						childContainer.empty();
-						this.renderTree(
-							childContainer,
-							node.children,
-							depth + 1
-						);
-					} else {
-						const childContainer =
-							li.querySelector(".tree-children");
-						if (childContainer) childContainer.remove();
-					}
-				});
-
-				// 判断并添加文件图标（仅当 count > 0）
-				if (node.count && node.count > 0) {
-					const fileIcon = wrapper.createEl("span", {
-						cls: "tree-file-icon",
-					});
-					fileIcon.setAttr("aria-label", `含 ${node.count} 个文件`);
-					fileIcon.setText("📄"); // 替换为 Obsidian 图标："file"
-				}
-			}
-
-			// 显示节点标签
-			const label = wrapper.createEl("span", {
-				text: node.label,
-				cls: "tree-node-label",
-			});
-
-			// 初始展开
-			if (node.children && node.children.length > 0 && node.isExpanded) {
-				const childContainer = li.createEl("div", {
-					cls: "tree-children",
-				});
-				this.renderTree(childContainer, node.children, depth + 1);
-			}
-		}
-	}
-
-	async onClose() {
-		// 清理资源
-	}
-}
-
-export { ArticleView, VIEW_TYPE };

view/categories.ts

@@ -0,0 +1,150 @@
+// main.ts
+import { ItemView, setIcon } from "obsidian";
+import i18n from "../utils/i18n";
+import { getSettings } from "../main";
+import { HttpUtils } from "../utils/request";
+import { Util } from "../utils/util";
+
+const VIEW_TYPE = "category-view";
+
+class CategoryView extends ItemView {
+	getViewType(): string {
+		return VIEW_TYPE;
+	}
+
+	getDisplayText() {
+		return i18n.t("field.category");
+	}
+
+	getIcon(): string {
+		return "typecho";
+	}
+
+	async onOpen() {
+		const container = this.containerEl.children[1];
+		container.empty();
+
+		// 标题
+		container.createEl("h4", { text: i18n.t("field.category") });
+
+		const refreshButton = container.createEl("button", {
+			cls: "refresh-button",
+		});
+		setIcon(refreshButton, "rotate-ccw");
+		refreshButton.addEventListener("click", () => {
+			this.initCategory(container);
+		});
+
+		this.initCategory(container);
+	}
+
+	async initCategory(container: Element) {
+		for (let i = 0; i < container.children.length; i++) {
+			if (i != 0 && i != 1) {
+				container.children[i].remove();
+			}
+		}
+
+		// 校验是否选择操作用户
+		if (!getSettings().User) {
+			container.createEl("p", {
+				text: i18n.t("error.noTypechoUser"),
+			});
+		} else {
+			const response = await HttpUtils.get("/categories", {});
+			const data = Util.treeUtil.generateTreeData(
+				response.data,
+				"mid",
+				"parent"
+			);
+			// 渲染树结构
+			const treeContainer = container.createDiv({
+				cls: "tree-container",
+			});
+			this.renderTree(treeContainer, data);
+		}
+	}
+	renderTree(container: Element, nodes: any[], depth = 0) {
+		const ul = container.createEl("ul", { cls: "tree-node-list" });
+
+		for (const node of nodes) {
+			const li = ul.createEl("li");
+			const wrapper = li.createDiv({ cls: "tree-node-wrapper" });
+
+			// 缩进
+			const indent = wrapper.createSpan({ cls: "tree-indent" });
+			indent.style.paddingLeft = `${depth * 16}px`;
+
+			// 判断并添加展开/折叠图标
+			if (node.children && node.children.length > 0) {
+				const toggleIcon = wrapper.createEl("span", {
+					text: node.isExpanded ? "▼" : "▶",
+					cls: "tree-toggle-icon",
+				});
+
+				toggleIcon.addEventListener("click", (e) => {
+					e.stopPropagation();
+					node.isExpanded = !node.isExpanded;
+					toggleIcon.setText(node.isExpanded ? "▼" : "▶");
+
+					if (node.isExpanded) {
+						const childContainer =
+							li.querySelector(".tree-children") ||
+							li.createEl("div", { cls: "tree-children" });
+						childContainer.empty();
+						this.renderTree(
+							childContainer,
+							node.children,
+							depth + 1
+						);
+					} else {
+						const childContainer =
+							li.querySelector(".tree-children");
+						if (childContainer) childContainer.remove();
+					}
+				});
+			}
+
+			const linkIcon = wrapper.createEl("span", {
+				cls: "tree-link-icon",
+			});
+			setIcon(linkIcon, "link");
+			linkIcon.addEventListener("click", (e) => {
+				e.stopPropagation();
+				window.open(node.url);
+			})
+			// 显示节点标签
+			wrapper.createEl("span", {
+				text: node.name,
+				cls: "tree-node-label",
+			});
+
+			// 判断并添加文件图标（仅当 count > 0）
+			if (node.count && node.count > 0) {
+				const articleIcon = wrapper.createEl("span", {
+					cls: "tree-article-icon",
+				});
+				setIcon(articleIcon, "newspaper");
+
+				articleIcon.addEventListener("click", (e) => {
+					console.log(e)
+					console.log(node)
+				})
+			}
+
+			// 初始展开
+			if (node.children && node.children.length > 0 && node.isExpanded) {
+				const childContainer = li.createEl("div", {
+					cls: "tree-children",
+				});
+				this.renderTree(childContainer, node.children, depth + 1);
+			}
+		}
+	}
+
+	async onClose() {
+		// 清理资源
+	}
+}
+
+export { CategoryView, VIEW_TYPE };

view/mockData.ts

@@ -1,31 +0,0 @@
-// mockData.ts
-
-export const mockTreeData = [
-    {
-      id: '1',
-      label: '根节点',
-      isExpanded: true,
-      count: 5, // 文件数
-      children: [
-        {
-          id: '1-1',
-          label: '子节点1',
-          count: 0, // 无文件
-          isExpanded: false,
-          children: [
-            { id: '1-1-1', label: '孙节点A', count: 3 },
-            { id: '1-1-2', label: '孙节点B' }, // 未设置 count，默认视为 0
-          ],
-        },
-        {
-          id: '1-2',
-          label: '子节点2',
-          count: 2,
-          isExpanded: true,
-          children: [
-            { id: '1-2-1', label: '孙节点C', count: 0 },
-          ],
-        },
-      ],
-    },
-  ];