feat: support bases

2026-07-22 05:41:49 +00:00 · 2025-10-12 15:57:13 +08:00 · 2025-10-12 15:57:13 +08:00 · 5b7fc9e016
commit 5b7fc9e016
parent c94d29bc84
5 changed files with 117 additions and 50 deletions
--- a/README-zh.md
+++ b/README-zh.md
@ -1,5 +1,7 @@
+**Obsidian Bases Table View Support**

-
+QueryDash now supports views powered by the Obsidian Bases plugin. Thanks to the open API provided by Bases, users can
+seamlessly display and interact with Bases data in a flexible format.

 **项目目标**  
 QueryDash的目标是开发一款类似Notion Database的Obsidian插件，但不仅限于数据库功能。
@ -19,8 +21,14 @@ QueryDash的目标是开发一款类似Notion Database的Obsidian插件，但不
 	- **分页**：优化大数据量下的浏览体验。
    - **任务**：支持任务管理，包括任务编辑。

-**使用教程**
+# **使用教程**

+## bases
+
+
+![DashTableView.png](docs/DashTableView.png)
+
+## dataview

 ~~~markdown
 ```querydash
--- a/README.md
+++ b/README.md
@ -1,15 +1,24 @@
+**Obsidian Bases Table View Support**
+
+QueryDash now supports views powered by the Obsidian Bases plugin. Thanks to the open API provided by Bases, users can
+seamlessly display and interact with Bases data in a flexible format.
+
 **Project Objective**  
-The goal of QueryDash is to develop an Obsidian plugin similar to Notion Database, but not limited to database functionality.
+The goal of QueryDash is to develop an Obsidian plugin similar to Notion Database, but not limited to database
+functionality.
 **Since the API of Dataview is used, the Dataview plugin must be enabled.**
-In the future, it will gradually expand with more practical features to help users manage knowledge, tasks, and life more efficiently.
+In the future, it will gradually expand with more practical features to help users manage knowledge, tasks, and life
+more efficiently.

 **If you are interested in this project, please consider starring it. Thank you very much, it means a lot to me.**

 **language**
+
 - [English](README.md)
 - [简体中文](README-zh.md)

 **Current Features**
+
 1. **Multi-view Support**: Provides table and list views to meet different scenario needs.
 	- **timeline**: use timeline view to display data.
 2. **Dataview SQL Support**: Compatible with Dataview's SQL syntax .
@ -18,11 +27,19 @@ In the future, it will gradually expand with more practical features to help use
 	- **Filter**: Screen data based on conditions.
 	- **Aggregation**: Supports data summary statistics.
 	- **Pagination**: Optimizes browsing experience for large datasets.
-    - **Task**: Supports task management, including task editing.
+	- **Task**: Supports task management, including task editing.

-**Tutorial**
+# **Tutorial**
+
+## bases
+
+
+![DashTableView.png](docs/DashTableView.png)
+
+## dataview 

 **table**
+
 ~~~markdown
 ```querydash
 table file.name , file.outlinks as "links" ,file.ctime as "ctime",
@ -33,6 +50,7 @@ file.mtime as "mtime" ,file.tags as "tags" from #clippings
 ![demo.gif](docs/demo.gif)

 **task**
+
 ~~~markdown
 ```querydash
 task
@ -44,15 +62,18 @@ task
 **timeline**

 **simple mode**
+
 ~~~markdown
 ```querydash
 timeline  from #start
 ```
 ~~~
+
 ![timeline.png](docs/timeline.png)
 **full mode**

 If you want to append the time later, alias a specific field as "time".
+
 ~~~markdown
 ```querydash
 timeline file.ctime as "time" from #start where file.ctime<=date(today) sort file.mtime desc
@ -60,6 +81,7 @@ timeline file.ctime as "time" from #start where file.ctime<=date(today) sort fil
 ~~~

 **Future Vision**
+
 1. **Homepage**: Integrate frequently used functions into the homepage for one-stop convenience.
 2. **Multi-view Support**: Supports timeline, gallery, table, and other views to meet diverse scenario needs.
 3. **Review Cards**: Built-in review function to help users efficiently consolidate knowledge.
@ -67,18 +89,25 @@ timeline file.ctime as "time" from #start where file.ctime<=date(today) sort fil
 5. **More Features**: Continuous development to enrich plugin functionality and enhance user experience.

 **Reference Projects**
+
 - [Dataview](https://github.com/blacksmithgu/obsidian-dataview): A powerful data query and management tool.
 - [Project](https://github.com/marcusolsson/obsidian-projects): A task and project management plugin.

 **Project Introduction**  
-As a deep user of Obsidian, I found that existing plugins could not fully meet my needs in terms of search, review, and editing/deleting Dataview tables. Therefore, I decided to develop a brand-new view system based on Ant Design, aiming to enhance the Obsidian experience and better assist daily life and work.
+As a deep user of Obsidian, I found that existing plugins could not fully meet my needs in terms of search, review, and
+editing/deleting Dataview tables. Therefore, I decided to develop a brand-new view system based on Ant Design, aiming to
+enhance the Obsidian experience and better assist daily life and work.

-Currently, the project is in its early stages, but I will continue to invest in development to gradually improve and expand its features. I believe that through continuous iteration, this project will become increasingly practical and powerful.
+Currently, the project is in its early stages, but I will continue to invest in development to gradually improve and
+expand its features. I believe that through continuous iteration, this project will become increasingly practical and
+powerful.

 **About Sponsorship**  
-This project is entirely developed out of personal interest. If you find it helpful and are willing to support my work, every sponsorship will be a motivation for me to continue developing. Thank you very much!
+This project is entirely developed out of personal interest. If you find it helpful and are willing to support my work,
+every sponsorship will be a motivation for me to continue developing. Thank you very much!

 **Future Plans**
+
 - Improve existing features to enhance user experience.
 - Add more practical features, such as advanced search and intelligent review.
 - Optimize performance to ensure system stability.
--- a/docs/DashTableView.png
+++ b/docs/DashTableView.png
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
 	"name": "obsidian-querydash",
-	"description": "Refer to Dataview and add search, sorting, and pagination functions, just like Notion.",
+	"description": "The new view for bases refers to an updated or additional interface that allows users to interact with base data in a different way, such as through enhanced search, sorting, and pagination features, similar to Notion. This improves usability and data management within your application. It was originally a new view for dataview, but now its functionality has been extended to bases.",
 	"main": "main.js",
 	"scripts": {
 		"dev": "vite build --watch --mode development",
--- a/src/pages/bases/DashTableView.tsx
+++ b/src/pages/bases/DashTableView.tsx
@ -1,10 +1,11 @@
 import {BasesPropertyId, BasesView, MarkdownRenderer, parsePropertyId, QueryController} from 'obsidian';
 import {createRoot} from "react-dom/client";
-import React, {useEffect} from "react";
+import React, {useEffect, useState} from "react";
 import {ViewProps} from "../../models/ViewProps";
 import {ProColumns, ProTable} from "@ant-design/pro-components";
 import {ellipsisDisplay, ellipsisLink, externalLink} from "../GenerateColumns";
-import {List, Tag} from "antd";
+import {ConfigProvider, List, Tag, theme} from "antd";
+import enUS from "antd/locale/en_US";

 export const TableViewType = 'dash-table-view';

@ -152,6 +153,10 @@ export class DashTableView extends BasesView {
 const
 	TableView: React.FC<any> = ({columnsHead, data}) => {

+		const [isDarkTheme, setIsDarkTheme] = useState<boolean>(
+			document.body.classList.contains("theme-dark")
+		);
+
 		const [columns, setColumns] = React.useState<ProColumns<any>[]>([]);

 		function parseTableResult(rows: any, params: any): Array<Record<string, any>> {
@ -185,51 +190,76 @@ const
 		}

 		useEffect(() => {
-			//	console.log("source", source);
+			// Detect Obsidian's theme
+			const updateTheme = () => {
+				const isDark = document.body.classList.contains("theme-dark");
+				setIsDarkTheme(isDark);
+			};
+
+			// Initial theme detection
+			updateTheme();
+
+			// Listen for theme changes
+			const observer = new MutationObserver(updateTheme);
+			observer.observe(document.body, {attributes: true, attributeFilter: ["class"]});
+
+			return () => observer.disconnect();
 		}, []);


 		return (
-			<ProTable
-				scroll={{x: 'max-content'}}
-				cardBordered
-				editable={{
-					type: 'multiple',
+			<ConfigProvider
+				locale={enUS}
+				theme={{
+					algorithm: isDarkTheme ? theme.darkAlgorithm : theme.defaultAlgorithm,
+					// token: {
+					// 	colorPrimary: isDarkTheme ? "#1E90FF" : "#1890FF", // 自定义主色
+					// 	colorBgBase: isDarkTheme ? "#1F1F1F" : "#FFFFFF", // 自定义背景色
+					// 	colorText: isDarkTheme ? "#E0E0E0" : "#000000",  // 自定义文本颜色
+					// },
 				}}
-				columns={columns}
-				//	dataSource={data}
-				columnsState={{
-					persistenceKey: 'pro-table-singe-demos',
-					persistenceType: 'localStorage',
-					defaultValue: {
-						option: {fixed: 'right', disable: true},
-					},
-					onChange(value) {
-						//	console.log('value: ', value);
-					},
-				}}
-				//rowKey={(record) => record.key}
-				search={{
-					labelWidth: 'auto',
-				}}
-				pagination={{
-					showSizeChanger: true,
-				}}
-				headerTitle="TableView"
-				request={async (params, sort, filter) => {
-					//	console.log('params:', params);
-					const response = await executeTableQuery(data, params);
+			>
+				<ProTable
+					scroll={{x: 'max-content'}}
+					cardBordered
+					editable={{
+						type: 'multiple',
+					}}
+					columns={columns}
+					//	dataSource={data}
+					columnsState={{
+						persistenceKey: 'pro-table-singe-demos',
+						persistenceType: 'localStorage',
+						defaultValue: {
+							option: {fixed: 'right', disable: true},
+						},
+						onChange(value) {
+							//	console.log('value: ', value);
+						},
+					}}
+					//rowKey={(record) => record.key}
+					search={{
+						labelWidth: 'auto',
+					}}
+					pagination={{
+						showSizeChanger: true,
+					}}
+					headerTitle="TableView"
+					request={async (params, sort, filter) => {
+						//	console.log('params:', params);
+						const response = await executeTableQuery(data, params);

-					const {tableData, columns} = response;
+						const {tableData, columns} = response;

-					setColumns(columns);
-					return Promise.resolve({
-						data: tableData,
-						success: true,
-						total: tableData.length,
-					});
-				}}
-			/>
+						setColumns(columns);
+						return Promise.resolve({
+							data: tableData,
+							success: true,
+							total: tableData.length,
+						});
+					}}
+				/>
+			</ConfigProvider>
 		);
 	};