✨ 添加(mockjs)：升级到1.1.0版本

🔧 添加(mockjs)：更新package-lock.json和package.json以匹配1.1.0版本
  🔧 添加(main/db/tables.ts)：导入mockjs中的Random模块以生成随机数据
  ✨ 添加(renderer/src/pages/Category)：新增CategoryLoader组件以从数据库加载类别信息
  📝 添加(types.d.ts)：定义CategoryType接口以描述类别对象的属性

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

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"

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
 );
-`)
+`)
+
+// for (let i = 0; i < 20; i++) {
+//     const name = Random.title(5, 10)
+//     db.exec(`insert into categories (name, created_at) values('${name}', datetime())`)
+// }

ui/autoMate/src/renderer/src/pages/Category/CategoryLoader.ts

@@ -0,0 +1,3 @@
+export default () => {
+    return window.api.sql("SELECT * FROM categories", "findAll")
+}

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 {

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 (
     <main className="category-page">
-        <div className="categories">vue.js</div>
+        <div className="categories">
+            {categories.map((category) => (
+                <div key={category.id} className="item">{category.name}</div>
+            ))}
+        </div>
+
         <div className="nav">
         <Add theme="outline" size="20" fill="#333"/>
         <DatabaseConfig theme="outline" size="20" fill="#333"/>

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: <Category />,
+        loader: CategoryLoader,
         children: [
           {
             index: true,

ui/autoMate/types.d.ts

@@ -1 +1,7 @@
 type SqlActionType = 'findAll' | 'findOne' | 'create' | 'update' | 'del'
+
+type CategoryType = {
+    id: number
+    name: string
+    createdAt: string
+}