From e32e2e55ec8f1ce776a3de92db10a62178e5a7a1 Mon Sep 17 00:00:00 2001 From: liufree Date: Sat, 8 Mar 2025 18:15:57 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=E6=90=9C=E7=B4=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 8 ++- src/main.tsx | 4 ++ src/pages/ReactDemo.tsx | 2 +- src/pages/TableDemo.tsx | 153 ++++++++++++++++++++++++++++++++++++---- tsconfig.json | 2 +- 5 files changed, 149 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index b3be7c2..2c33cd0 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "description": "This is a sample plugin for Obsidian (https://obsidian.md)", "main": "main.js", "scripts": { + "dev": "vite build --watch --mode development", "build": "vite build", "version": "node version-bump.mjs && git add manifest.json versions.json" }, @@ -13,22 +14,23 @@ "dependencies": { "@ant-design/icons": "^5.0.1", "@ant-design/pro-components": "^2.4.4", - "obsidian-dataview": "^0.5.67", "umi-request": "^1.4.0" }, "devDependencies": { + "@types/luxon": "^3.4.2", "@types/node": "^22.13.8", "@types/react": "^18.0.33", "@types/react-dom": "^18.0.11", "@typescript-eslint/eslint-plugin": "5.29.0", "@typescript-eslint/parser": "5.29.0", + "@vitejs/plugin-react": "^4.3.4", "builtin-modules": "3.3.0", "husky": "^9", "lint-staged": "^13.2.0", "obsidian": "latest", + "obsidian-dataview": "^0.5.67", "tslib": "2.4.0", "vite": "^6.2.0", - "vite-plugin-css-injected-by-js": "^3.5.2", - "@vitejs/plugin-react": "^4.3.4" + "vite-plugin-css-injected-by-js": "^3.5.2" } } diff --git a/src/main.tsx b/src/main.tsx index 807e8d2..4e9aeae 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -92,6 +92,10 @@ export default class MyPlugin extends Plugin { // 代码块中标注table的绘制成sampleView this.registerMarkdownCodeBlockProcessor('sample', (source, el, ctx) => { + + console.log("start") + console.log('source',source) + console.log('ctx',ctx) // 插入一个div const container = el.createDiv(); diff --git a/src/pages/ReactDemo.tsx b/src/pages/ReactDemo.tsx index d845613..8da9b7f 100644 --- a/src/pages/ReactDemo.tsx +++ b/src/pages/ReactDemo.tsx @@ -25,6 +25,6 @@ export default class ReactComponent extends MarkdownRenderChild { // 使用 createRoot 渲染 React 组件 const root = createRoot(this.container); - root.render(); + root.render(); } } diff --git a/src/pages/TableDemo.tsx b/src/pages/TableDemo.tsx index 789c02d..4d390a9 100644 --- a/src/pages/TableDemo.tsx +++ b/src/pages/TableDemo.tsx @@ -5,8 +5,9 @@ import {Button, Dropdown, Space, Tag} from 'antd'; import {useEffect, useRef} from 'react'; import React from 'react'; import request from 'umi-request'; -import {getAPI} from 'obsidian-dataview'; -import {App,Workspace} from "obsidian"; +import { getAPI} from 'obsidian-dataview'; +import {App, Workspace} from "obsidian"; +import {continuedIndent} from "@codemirror/language"; export const waitTimePromise = async (time: number = 100) => { return new Promise((resolve) => { @@ -43,19 +44,116 @@ type GithubIssueItem = { interface MyReactComponentProps { app: any; // Obsidian的App对象 + source: string; // 当前文件的路径 } -const MyReactComponent: React.FC = ({ app }) => { + +const MyReactComponent: React.FC = ({app, source}) => { const actionRef = useRef(); - const dataviewAPI = getAPI(); + const dv = getAPI(app); const [data, setData] = React.useState([]); + function parseTableResult(value: any, params:any): Array> { + const headers: string[] = value.headers; + + const rows: Array> = []; + console.log("params1", params); + + + + value.values.forEach((row) => { + const values: Record = {}; + + let flag = [] + headers.forEach((header, index) => { + + const searchParam = params[header]; + console.log("searchParam",searchParam); + + + const value = row[index]; + // 如果字符串value中不包含searchParam，则排除 + if(searchParam){ + flag[index] = value.indexOf(searchParam) > -1; + }else{ + flag[index] = true; + } + + console.log("header",header) + console.log("row.value",value) + values[header] = value; + }); + rows.push(values); + }); + + + // params参数去除current和pageSize + delete params.current; + delete params.pageSize; + + const filteredData = rows.filter(item => { + return Object.keys(params).every(key => { + console.log("key", key); + console.log("params[key]", params[key]); + console.log("item[key]", item[key]); + if (params[key]) { + // If item[key] is empty, return false directly. + if (item[key]) { + return item[key].toString().toLowerCase().includes(params[key].toString().toLowerCase()); + }else{ + return true; + } + } + return true; + }); + }); + + + console.log("rows2", rows); + console.log("keyParams", Object.keys(params)); + console.log("params2", params); + + return filteredData; + } + + const executeTableQuery=async (dvApi: any,source:any,params:any) => { + // 定义查询语句 + const sql = source; + + // 使用 Dataview API 执行查询 + const queryResult = await dvApi.query(sql); + console.log("Query Result:", queryResult); + console.log("Query Result1:", queryResult.successful); + console.log("Query Result2:", queryResult.value); + + const tableData:any =parseTableResult(queryResult.value,params); + + + console.log("tableData:", tableData); + + // 处理查询结果 + if (queryResult.successful) { + const tableData = queryResult.value; + console.log("Query Result:", tableData); + // 在这里可以对查询结果进行进一步处理 + tableData.values.forEach(row => { + console.log("Row:", row); + }); + } else { + console.error("Query failed:", queryResult.error); + } + return tableData; + + } + useEffect(() => { - const data = dataviewAPI.pages().file.lists.values; - console.log("data",data); - setData(data); + //executeTableQuery(dv,source,{}); + + // const data = dv.pages().file.lists.values; + //console.log("data", data); + // setData(data); }, []); const columns: ProColumns[] = [ @@ -66,16 +164,17 @@ const MyReactComponent: React.FC = ({ app }) => { }, { title: '标题', + dataIndex: 'file.name', render: (_, record) => ( - console.log("record",_), - { + console.log("record,{},text", _,record), + { // 调用 Obsidian API - const file = app.vault.getAbstractFileByPath(record.header.path); + const file = app.vault.getAbstractFileByPath(record.File.path); if (file) { app.workspace.activeLeaf?.openFile(file); } - }} > - {record.header.path} + }}> + {record.File.path} ), @@ -87,7 +186,21 @@ const MyReactComponent: React.FC = ({ app }) => { onFilter: true, ellipsis: true, render: (_, record) => ( - console.log("record",record), + console.log("record", record), + + {record.text} + + + ), + }, + { + title: '文本1', + dataIndex: 'file.ctime', + filters: true, + onFilter: true, + ellipsis: true, + render: (_, record) => ( + console.log("record", record), {record.text} @@ -104,7 +217,7 @@ const MyReactComponent: React.FC = ({ app }) => { editable={{ type: 'multiple', }} - dataSource={data} + // dataSource={data} columnsState={{ persistenceKey: 'pro-table-singe-demos', persistenceType: 'localStorage', @@ -115,7 +228,7 @@ const MyReactComponent: React.FC = ({ app }) => { console.log('value: ', value); }, }} - rowKey="id" + rowKey="title" search={{ labelWidth: 'auto', }} @@ -142,6 +255,16 @@ const MyReactComponent: React.FC = ({ app }) => { }} dateFormatter="string" headerTitle="高级表格" + request={async (params, sort, filter) => { + console.log('params:', params); + const response = await executeTableQuery(dv,source,params); + console.log("response1",response); + return { + data: response, + success: true, + total: response.length, + }; + }} toolBarRender={() => [