From dd2130e0df4359fdcf6d522875a96cd9d8afb015 Mon Sep 17 00:00:00 2001
From: xiejay97 <xiejay97@gmail.com>
Date: Thu, 2 Mar 2023 17:16:52 +0800
Subject: [PATCH] chore(platform): add subtitle to list

---
 packages/platform/src/app/components/list/List.tsx       | 4 +++-
 .../routes/layout/header/notification/Notification.tsx   | 3 ++-
 packages/platform/src/styles/components/list.scss        | 9 ++++++---
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/platform/src/app/components/list/List.tsx b/packages/platform/src/app/components/list/List.tsx
index 6c1d4124..d11c2d56 100644
--- a/packages/platform/src/app/components/list/List.tsx
+++ b/packages/platform/src/app/components/list/List.tsx
@@ -7,6 +7,7 @@ export interface AppListProps extends Omit<React.HTMLAttributes<HTMLUListElement
   aList: {
     avatar?: React.ReactNode;
     title?: React.ReactNode;
+    subtitle?: React.ReactNode;
     description?: React.ReactNode;
     props?: React.HTMLAttributes<HTMLLIElement>;
   }[];
@@ -23,12 +24,13 @@ export function AppList(props: AppListProps): JSX.Element | null {
 
   return (
     <ul {...restProps} className={getClassName(restProps.className, 'app-list')}>
-      {aList.map(({ avatar, title, description, props }, index) => (
+      {aList.map(({ avatar, title, subtitle, description, props }, index) => (
         <React.Fragment key={index}>
           <li {...props} className={getClassName(props?.className, 'app-list__item')}>
             {checkNodeExist(avatar) && <div className="app-list__avatar">{avatar}</div>}
             <div className="app-list__content">
               {checkNodeExist(title) && <div className="app-list__title">{title}</div>}
+              {checkNodeExist(subtitle) && <div className="app-list__subtitle">{subtitle}</div>}
               {checkNodeExist(description) && <div className="app-list__description">{description}</div>}
             </div>
           </li>
diff --git a/packages/platform/src/app/routes/layout/header/notification/Notification.tsx b/packages/platform/src/app/routes/layout/header/notification/Notification.tsx
index 2596de3e..b3f7e3fb 100644
--- a/packages/platform/src/app/routes/layout/header/notification/Notification.tsx
+++ b/packages/platform/src/app/routes/layout/header/notification/Notification.tsx
@@ -46,9 +46,10 @@ export function AppNotification(props: React.ButtonHTMLAttributes<HTMLButtonElem
                 title: notify.title,
                 panel: (
                   <AppList
-                    aList={notify.list.map((item) => ({
+                    aList={notify.list.map((item, index) => ({
                       avatar: <DAvatar dImg={{ src: '/assets/imgs/avatar.png', alt: 'avatar' }}></DAvatar>,
                       title: 'name',
+                      subtitle: index === 0 && new Date().toLocaleString(),
                       description: item.message,
                       props: {
                         className: getClassName(styles['app-notification__item'], {
diff --git a/packages/platform/src/styles/components/list.scss b/packages/platform/src/styles/components/list.scss
index cc163135..2f3f9799 100644
--- a/packages/platform/src/styles/components/list.scss
+++ b/packages/platform/src/styles/components/list.scss
@@ -19,13 +19,16 @@
 
   @include e(title) {
     font-weight: 500;
+  }
 
-    & + .app-list__description {
-      margin-top: 4px;
-    }
+  @include e(subtitle) {
+    /* stylelint-disable-next-line declaration-property-value-allowed-list */
+    font-size: 10px;
+    color: var(--#{$rd-prefix}text-color-sub);
   }
 
   @include e(description) {
+    margin-top: 4px;
     color: var(--#{$rd-prefix}text-color-sub);
   }
 }