✨ 添加(dayjs): 升级版本至1.11.11

🔧 修改(package-lock.json, package.json): 更新dayjs的源为registry.npmmirror.com
📝 添加(content.scss): 添加内容页面的样式
🌐 重命名(content.scss -> contentList.scss): 调整页面样式文件名
✨ 添加(index.tsx): 引入dayjs库并格式化日期
📝 修改(types.d.ts): 将ContentType接口字段createdAt改为created_at

ui/autoMate/package-lock.json

@@ -16,6 +16,7 @@
         "@types/mockjs": "^1.0.10",
         "antd": "^5.18.0",
         "better-sqlite3": "^11.0.0",
+        "dayjs": "^1.11.11",
         "electron-updater": "^6.1.7",
         "localforage": "^1.10.0",
         "match-sorter": "^6.3.4",
@@ -4117,7 +4118,7 @@
     },
     "node_modules/dayjs": {
       "version": "1.11.11",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.11.tgz",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.11.tgz",
       "integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg=="
     },
     "node_modules/debug": {

ui/autoMate/package.json

@@ -28,6 +28,7 @@
     "@types/mockjs": "^1.0.10",
     "antd": "^5.18.0",
     "better-sqlite3": "^11.0.0",
+    "dayjs": "^1.11.11",
     "electron-updater": "^6.1.7",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.4",

ui/autoMate/src/renderer/src/pages/Content/Content.tsx

@@ -1,6 +1,11 @@
 import { useLoaderData } from "react-router-dom"
-
+import "./content.scss"
 export const Content = () => {
     const content = useLoaderData() as ContentType
-    return <div>{content.content}</div>
+    return (
+    <main className="content-page">
+        <h1>{content.title}</h1>
+        <div className="content">{content.content}</div>
+    </main>
+    )
 }

ui/autoMate/src/renderer/src/pages/Content/content.scss

@@ -0,0 +1,10 @@
+.content-page{
+    @apply p-3;
+    h1{
+        @apply text-base font-bold text-slate-600 opacity-95;
+    }
+
+    .content{
+        @apply text-sm text-slate-500 opacity-95 leading-relaxed;
+    }
+}

ui/autoMate/src/renderer/src/pages/ContentList/contentList.scss

@@ -1,4 +1,4 @@
-.content-page{
+.contentList-page{
     @apply h-screen  text-xs text-slate-700;
     display: grid;
     grid-template: "list content" auto / 150px auto;
@@ -6,7 +6,7 @@
         @apply bg-slate-50 border-r overflow-y-auto;
         grid-area: list;
         a {
-            @apply block truncate py-1 px-1 cursor-pointer;
+            @apply truncate py-1 px-1 cursor-pointer flex items-center gap-1 border-b mx-2;
             &.active{
                 // mx-1 外边距
                 @apply bg-blue-700 text-white mx-1 rounded-md;

ui/autoMate/src/renderer/src/pages/ContentList/index.tsx

@@ -1,6 +1,7 @@
 import { NavLink, Outlet, useLoaderData, useNavigate } from "react-router-dom"
-import "./content.scss"
+import "./contentList.scss"
 import { useEffect } from "react"
+import dayjs from "dayjs"
 
 export const ContentList = () => {
     const contentList = useLoaderData() as ContentType[]
@@ -10,13 +11,16 @@ export const ContentList = () => {
             navigate(`/config/category/contentList/${contentList[0].category_id}/content/${contentList[0].id}`)
         }
     }, [contentList])
-    return (<main className="content-page">
+    return (<main className="contentList-page">
         <div className="list">
             {contentList.map(content => (
                 <NavLink 
                    key={content.id} 
                    to={`/config/category/contentList/${content.category_id}/content/${content.id}`}
-                   className={({ isActive }) => `${isActive ? "active" : ""}`}> {content.title} </NavLink>
+                   className={({ isActive }) => `${isActive ? "active" : ""}`}> 
+                   <div className="truncate">{content.title}</div>
+                   <div className="text-[10px] opacity-80 ">{dayjs(content.created_at).format("YYYY/MM/DD")}</div>
+                   </NavLink>
             ))}
         </div>
         <div className="content">

ui/autoMate/types.d.ts

@@ -11,5 +11,5 @@ type ContentType = {
     title: string
     content: string
     category_id: string
-    createdAt: string
+    created_at: string
 }