From ec56216fe1aa871e3a8325a4ce3de2d174c4d14e Mon Sep 17 00:00:00 2001 From: ruotongyu Date: Sun, 16 Jun 2024 12:01:44 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E6=B7=BB=E5=8A=A0(mockjs)=EF=BC=9A?= =?UTF-8?q?=E5=8D=87=E7=BA=A7=E5=88=B01.1.0=E7=89=88=E6=9C=AC=20=20=20?= =?UTF-8?q?=F0=9F=94=A7=20=E6=B7=BB=E5=8A=A0(mockjs)=EF=BC=9A=E6=9B=B4?= =?UTF-8?q?=E6=96=B0package-lock.json=E5=92=8Cpackage.json=E4=BB=A5?= =?UTF-8?q?=E5=8C=B9=E9=85=8D1.1.0=E7=89=88=E6=9C=AC=20=20=20=F0=9F=94=A7?= =?UTF-8?q?=20=E6=B7=BB=E5=8A=A0(main/db/tables.ts)=EF=BC=9A=E5=AF=BC?= =?UTF-8?q?=E5=85=A5mockjs=E4=B8=AD=E7=9A=84Random=E6=A8=A1=E5=9D=97?= =?UTF-8?q?=E4=BB=A5=E7=94=9F=E6=88=90=E9=9A=8F=E6=9C=BA=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=20=20=20=E2=9C=A8=20=E6=B7=BB=E5=8A=A0(renderer/src/pages/Cate?= =?UTF-8?q?gory)=EF=BC=9A=E6=96=B0=E5=A2=9ECategoryLoader=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E4=BB=A5=E4=BB=8E=E6=95=B0=E6=8D=AE=E5=BA=93=E5=8A=A0?= =?UTF-8?q?=E8=BD=BD=E7=B1=BB=E5=88=AB=E4=BF=A1=E6=81=AF=20=20=20?= =?UTF-8?q?=F0=9F=93=9D=20=E6=B7=BB=E5=8A=A0(types.d.ts)=EF=BC=9A=E5=AE=9A?= =?UTF-8?q?=E4=B9=89CategoryType=E6=8E=A5=E5=8F=A3=E4=BB=A5=E6=8F=8F?= =?UTF-8?q?=E8=BF=B0=E7=B1=BB=E5=88=AB=E5=AF=B9=E8=B1=A1=E7=9A=84=E5=B1=9E?= =?UTF-8?q?=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/autoMate/package-lock.json | 19 ++++++++++++++++++- ui/autoMate/package.json | 2 ++ ui/autoMate/src/main/db/tables.ts | 8 +++++++- .../src/pages/Category/CategoryLoader.ts | 3 +++ .../renderer/src/pages/Category/category.scss | 5 ++++- .../src/renderer/src/pages/Category/index.tsx | 10 ++++++++-- ui/autoMate/src/renderer/src/router/index.tsx | 2 ++ ui/autoMate/types.d.ts | 6 ++++++ 8 files changed, 50 insertions(+), 5 deletions(-) create mode 100644 ui/autoMate/src/renderer/src/pages/Category/CategoryLoader.ts 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