feat: support bases

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

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 .
@@ -20,9 +29,17 @@ In the future, it will gradually expand with more practical features to help use
 	- **Pagination**: Optimizes browsing experience for large datasets.
 	- **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.

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

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,11 +190,35 @@ 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 (
+			<ConfigProvider
+				locale={enUS}
+				theme={{
+					algorithm: isDarkTheme ? theme.darkAlgorithm : theme.defaultAlgorithm,
+					// token: {
+					// 	colorPrimary: isDarkTheme ? "#1E90FF" : "#1890FF", // 自定义主色
+					// 	colorBgBase: isDarkTheme ? "#1F1F1F" : "#FFFFFF", // 自定义背景色
+					// 	colorText: isDarkTheme ? "#E0E0E0" : "#000000",  // 自定义文本颜色
+					// },
+				}}
+			>
 				<ProTable
 					scroll={{x: 'max-content'}}
 					cardBordered
@@ -230,6 +259,7 @@ const
 						});
 					}}
 				/>
+			</ConfigProvider>
 		);
 	};