perf: add subtitle for each page

web/src/app/home/components/home-sidebar/HomeSidebarChild.tsx

@@ -5,6 +5,7 @@ export interface ISidebarChildVO {
   icon: React.ReactNode;
   name: string;
   route: string;
+  description: string;
 }
 
 export class SidebarChildVO {
@@ -12,12 +13,14 @@ export class SidebarChildVO {
   icon: React.ReactNode;
   name: string;
   route: string;
+  description: string;
 
   constructor(props: ISidebarChildVO) {
     this.id = props.id;
     this.icon = props.icon;
     this.name = props.name;
     this.route = props.route;
+    this.description = props.description;
   }
 }
 

web/src/app/home/components/home-sidebar/sidbarConfigList.tsx

@@ -16,6 +16,7 @@ export const sidebarConfigList = [
       </svg>
     ),
     route: '/home/bots',
+    description: '创建和管理机器人，这是 LangBot 与各个平台连接的入口',
   }),
   new SidebarChildVO({
     id: 'models',
@@ -31,6 +32,7 @@ export const sidebarConfigList = [
       </svg>
     ),
     route: '/home/models',
+    description: '配置和管理可在流水线中使用的模型',
   }),
   new SidebarChildVO({
     id: 'pipelines',
@@ -46,6 +48,7 @@ export const sidebarConfigList = [
       </svg>
     ),
     route: '/home/pipelines',
+    description: '流水线定义了对消息事件的处理流程，用于绑定到机器人',
   }),
   new SidebarChildVO({
     id: 'plugins',
@@ -61,5 +64,6 @@ export const sidebarConfigList = [
       </svg>
     ),
     route: '/home/plugins',
+    description: '安装和配置用于扩展 LangBot 功能的插件',
   }),
 ];

web/src/app/home/components/home-titlebar/HomeTitleBar.tsx

@@ -1,9 +1,16 @@
 import styles from './HomeTittleBar.module.css';
 
-export default function HomeTitleBar({ title }: { title: string }) {
+export default function HomeTitleBar({
+  title,
+  subtitle,
+}: {
+  title: string;
+  subtitle: string;
+}) {
   return (
     <div className={`${styles.titleBarContainer}`}>
       <div className={`${styles.titleText}`}>{title}</div>
+      <div className={`${styles.subtitleText}`}>{subtitle}</div>
     </div>
   );
 }

web/src/app/home/components/home-titlebar/HomeTittleBar.module.css

@@ -5,14 +5,20 @@
     opacity: 1;
     font-size: 20px;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
-    align-items: center;
+    align-items: flex-start;
-    background-color: #fafafa;
+    justify-content: center;
 }
 
 .titleText {
     margin-left: 3.2rem;
-    font-size: 1.6rem;
+    font-size: 1.4rem;
     font-weight: 500;
     color: #585858;
+}
+
+.subtitleText {
+    margin-left: 3.2rem;
+    font-size: 0.8rem;
+    color: #808080;
 }

web/src/app/home/layout.tsx

@@ -12,8 +12,10 @@ export default function HomeLayout({
   children: React.ReactNode;
 }>) {
   const [title, setTitle] = useState<string>('');
+  const [subtitle, setSubtitle] = useState<string>('');
   const onSelectedChangeAction = (child: SidebarChildVO) => {
     setTitle(child.name);
+    setSubtitle(child.description);
   };
 
   return (
@@ -23,7 +25,7 @@ export default function HomeLayout({
       </aside>
 
       <div className={styles.main}>
-        <HomeTitleBar title={title} />
+        <HomeTitleBar title={title} subtitle={subtitle} />
 
         <main className={styles.mainContent}>{children}</main>
       </div>