diff --git a/package.json b/package.json index 6913100..b3be7c2 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,6 @@ "dependencies": { "@ant-design/icons": "^5.0.1", "@ant-design/pro-components": "^2.4.4", - "antd": "^5.4.0", "obsidian-dataview": "^0.5.67", "umi-request": "^1.4.0" }, @@ -24,15 +23,12 @@ "@typescript-eslint/eslint-plugin": "5.29.0", "@typescript-eslint/parser": "5.29.0", "builtin-modules": "3.3.0", - "esbuild": "0.17.3", "husky": "^9", "lint-staged": "^13.2.0", "obsidian": "latest", - "prettier": "^2.8.7", - "prettier-plugin-organize-imports": "^3.2.2", - "prettier-plugin-packagejson": "^2.4.3", "tslib": "2.4.0", - "typescript": "^5.0.3", - "vite": "^6.2.0" + "vite": "^6.2.0", + "vite-plugin-css-injected-by-js": "^3.5.2", + "@vitejs/plugin-react": "^4.3.4" } } diff --git a/src/pages/AntdTableDemo.tsx b/src/pages/AntdTableDemo.tsx new file mode 100644 index 0000000..57926b7 --- /dev/null +++ b/src/pages/AntdTableDemo.tsx @@ -0,0 +1,207 @@ +import React from 'react'; +import { InboxOutlined, UploadOutlined } from '@ant-design/icons'; +import { + Button, + Checkbox, + Col, + ColorPicker, + Form, + InputNumber, + Radio, + Rate, + Row, + Select, + Slider, + Space, + Switch, + Upload, +} from 'antd'; + +const { Option } = Select; + +const formItemLayout = { + labelCol: { span: 6 }, + wrapperCol: { span: 14 }, +}; + +const normFile = (e: any) => { + console.log('Upload event:', e); + if (Array.isArray(e)) { + return e; + } + return e?.fileList; +}; + +const onFinish = (values: any) => { + console.log('Received values of form: ', values); +}; + +const App: React.FC = () => ( +
+ + China + + + + + + + + + + + + + + + machines + + + + + + + + + + + + + + item 1 + item 2 + item 3 + + + + + + item 1 + item 2 + item 3 + + + + + + + + + A + + + + + B + + + + + C + + + + + D + + + + + E + + + + + F + + + + + + + + + + + + + + + + + + +

+ +

+

Click or drag file to this area to upload

+

Support for a single or bulk upload.

+ + + + + + + + + + + + + +
+); + +export default App; diff --git a/src/pages/TableDemo.module.css b/src/pages/TableDemo.module.css new file mode 100644 index 0000000..bdcf80e --- /dev/null +++ b/src/pages/TableDemo.module.css @@ -0,0 +1,3 @@ +.container { + all: initial; /* 重置容器内的样式 */ +} diff --git a/src/pages/TableDemo.tsx b/src/pages/TableDemo.tsx index 70ba129..03f556b 100644 --- a/src/pages/TableDemo.tsx +++ b/src/pages/TableDemo.tsx @@ -6,7 +6,6 @@ import {useEffect, useRef} from 'react'; import React from 'react'; import request from 'umi-request'; import { getAPI } from 'obsidian-dataview'; -// import 'antd/dist/antd.css'; export const waitTimePromise = async (time: number = 100) => { return new Promise((resolve) => { diff --git a/src/sampleView.ts b/src/sampleView.ts index 3e27198..3435ab7 100644 --- a/src/sampleView.ts +++ b/src/sampleView.ts @@ -2,9 +2,11 @@ import {HoverPopover, ItemView, WorkspaceLeaf} from 'obsidian'; import React from 'react'; import ReactDOM from 'react-dom'; import type MyPlugin from './main'; +import { createRoot } from 'react-dom/client'; import FormDemo from "./pages/FormDemo"; import TableDemo from "./pages/TableDemo"; +import AntdTableDemo from "./pages/AntdTableDemo"; export class SampleView extends ItemView { plugin: MyPlugin; @@ -32,10 +34,10 @@ export class SampleView extends ItemView { async onOpen(): Promise { - this.sampleComponent = React.createElement(TableDemo); + this.sampleComponent = React.createElement(AntdTableDemo); + const root = createRoot(this.contentEl as HTMLElement); + root.render(this.sampleComponent); - // eslint-disable-next-line @typescript-eslint/no-explicit-any - ReactDOM.render(this.sampleComponent, (this as any).contentEl); } async onClose() { diff --git a/vite.config.js b/vite.config.js index 2ff3c7c..6fe77a9 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,27 +1,30 @@ import path from 'path'; -import { defineConfig } from 'vite'; +import {defineConfig} from 'vite'; +import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'; +import react from '@vitejs/plugin-react' -export default defineConfig(({ mode }) => { - return { - build: { - sourcemap: mode === 'development' ? 'inline' : false, - minify: false, - // Use Vite lib mode https://vitejs.dev/guide/build.html#library-mode - lib: { - entry: path.resolve(__dirname, './src/main.ts'), - formats: ['cjs'], - }, - rollupOptions: { - output: { - // Overwrite default Vite output fileName - entryFileNames: 'main.js', - assetFileNames: 'styles.css', - }, - external: ['obsidian','antd/dist/antd.css'], - }, - // Use root as the output dir - emptyOutDir: false, - outDir: '.', - }, - }; +export default defineConfig(({mode}) => { + return { + plugins: [react(),cssInjectedByJsPlugin()], + build: { + sourcemap: mode === 'development' ? 'inline' : false, + minify: false, + // Use Vite lib mode https://vitejs.dev/guide/build.html#library-mode + lib: { + entry: path.resolve(__dirname, './src/main.ts'), + formats: ['cjs'], + }, + rollupOptions: { + output: { + // Overwrite default Vite output fileName + entryFileNames: 'main.js', + assetFileNames: 'styles.css', + }, + external: ['obsidian'], + }, + // Use root as the output dir + emptyOutDir: false, + outDir: '.', + }, + }; });