diff --git a/ui/autoMate/package-lock.json b/ui/autoMate/package-lock.json index 035109f..0368a97 100644 --- a/ui/autoMate/package-lock.json +++ b/ui/autoMate/package-lock.json @@ -13,11 +13,13 @@ "@electron-toolkit/utils": "^3.0.0", "@icon-park/react": "^1.4.2", "@types/better-sqlite3": "^7.6.10", + "@types/mockjs": "^1.0.10", "antd": "^5.18.0", "better-sqlite3": "^11.0.0", "electron-updater": "^6.1.7", "localforage": "^1.10.0", "match-sorter": "^6.3.4", + "mockjs": "^1.1.0", "react-router-dom": "^6.23.1", "sort-by": "^0.0.2", "zustand": "^4.5.2" @@ -2183,6 +2185,11 @@ "@types/node": "*" } }, + "node_modules/@types/mockjs": { + "version": "1.0.10", + "resolved": "https://registry.npmmirror.com/@types/mockjs/-/mockjs-1.0.10.tgz", + "integrity": "sha512-SXgrhajHG7boLv6oU93CcmdDm0HYRiceuz6b+7z+/2lCJPTWDv0V5YiwFHT2ejE4bQqgSXQiVPQYPWv7LGsK1g==" + }, "node_modules/@types/ms": { "version": "0.7.34", "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.34.tgz", @@ -3867,7 +3874,6 @@ "version": "5.1.0", "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz", "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==", - "dev": true, "engines": { "node": ">= 6" } @@ -7985,6 +7991,17 @@ "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz", "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==" }, + "node_modules/mockjs": { + "version": "1.1.0", + "resolved": "https://registry.npmmirror.com/mockjs/-/mockjs-1.1.0.tgz", + "integrity": "sha512-eQsKcWzIaZzEZ07NuEyO4Nw65g0hdWAyurVol1IPl1gahRwY+svqzfgfey8U8dahLwG44d6/RwEzuK52rSa/JQ==", + "dependencies": { + "commander": "*" + }, + "bin": { + "random": "bin/random" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", diff --git a/ui/autoMate/package.json b/ui/autoMate/package.json index 5f4d1e2..a492c21 100644 --- a/ui/autoMate/package.json +++ b/ui/autoMate/package.json @@ -25,11 +25,13 @@ "@electron-toolkit/utils": "^3.0.0", "@icon-park/react": "^1.4.2", "@types/better-sqlite3": "^7.6.10", + "@types/mockjs": "^1.0.10", "antd": "^5.18.0", "better-sqlite3": "^11.0.0", "electron-updater": "^6.1.7", "localforage": "^1.10.0", "match-sorter": "^6.3.4", + "mockjs": "^1.1.0", "react-router-dom": "^6.23.1", "sort-by": "^0.0.2", "zustand": "^4.5.2" diff --git a/ui/autoMate/src/main/db/tables.ts b/ui/autoMate/src/main/db/tables.ts index 0b35bcb..32daa6d 100644 --- a/ui/autoMate/src/main/db/tables.ts +++ b/ui/autoMate/src/main/db/tables.ts @@ -1,3 +1,4 @@ +import { Random } from "mockjs"; import { db } from "./connect"; db.exec(` @@ -17,4 +18,9 @@ CREATE TABLE IF NOT EXISTS contents ( category_id INTEGER, created_at TEXT not null ); -`) \ No newline at end of file +`) + +// for (let i = 0; i < 20; i++) { +// const name = Random.title(5, 10) +// db.exec(`insert into categories (name, created_at) values('${name}', datetime())`) +// } \ No newline at end of file diff --git a/ui/autoMate/src/renderer/src/pages/Category/CategoryLoader.ts b/ui/autoMate/src/renderer/src/pages/Category/CategoryLoader.ts new file mode 100644 index 0000000..8f9672d --- /dev/null +++ b/ui/autoMate/src/renderer/src/pages/Category/CategoryLoader.ts @@ -0,0 +1,3 @@ +export default () => { + return window.api.sql("SELECT * FROM categories", "findAll") +} \ No newline at end of file diff --git a/ui/autoMate/src/renderer/src/pages/Category/category.scss b/ui/autoMate/src/renderer/src/pages/Category/category.scss index 8d4bb09..5ef1be2 100644 --- a/ui/autoMate/src/renderer/src/pages/Category/category.scss +++ b/ui/autoMate/src/renderer/src/pages/Category/category.scss @@ -7,8 +7,11 @@ .categories{ - @apply border-r bg-slate-100 text-xs text-slate-700; + @apply border-r bg-slate-100 text-xs text-slate-700 overflow-y-auto; grid-area: categories; + .item{ + @apply p-1 py-1 truncate cursor-pointer; + } } .nav { diff --git a/ui/autoMate/src/renderer/src/pages/Category/index.tsx b/ui/autoMate/src/renderer/src/pages/Category/index.tsx index a610a98..42265ce 100644 --- a/ui/autoMate/src/renderer/src/pages/Category/index.tsx +++ b/ui/autoMate/src/renderer/src/pages/Category/index.tsx @@ -1,11 +1,17 @@ -import { Outlet } from "react-router-dom" +import { Outlet, useLoaderData } from "react-router-dom" import "./category.scss" import { Add, DatabaseConfig } from "@icon-park/react" export const Category = () => { + const categories = useLoaderData() as CategoryType[] return (
-
vue.js
+
+ {categories.map((category) => ( +
{category.name}
+ ))} +
+
diff --git a/ui/autoMate/src/renderer/src/router/index.tsx b/ui/autoMate/src/renderer/src/router/index.tsx index d123ddf..32e7ee5 100644 --- a/ui/autoMate/src/renderer/src/router/index.tsx +++ b/ui/autoMate/src/renderer/src/router/index.tsx @@ -3,6 +3,7 @@ import Home from "@renderer/pages/Home"; import { createHashRouter } from "react-router-dom"; import {Category} from "@renderer/pages/Category"; import { Content } from "@renderer/pages/Content"; +import CategoryLoader from "@renderer/pages/Category/CategoryLoader"; const router = createHashRouter([ { @@ -17,6 +18,7 @@ const router = createHashRouter([ path: "", // 界面第一次打开时，默认显示的页面 element: , + loader: CategoryLoader, children: [ { index: true, diff --git a/ui/autoMate/types.d.ts b/ui/autoMate/types.d.ts index 773b590..d325c05 100644 --- a/ui/autoMate/types.d.ts +++ b/ui/autoMate/types.d.ts @@ -1 +1,7 @@ type SqlActionType = 'findAll' | 'findOne' | 'create' | 'update' | 'del' + +type CategoryType = { + id: number + name: string + createdAt: string +} \ No newline at end of file