chore(platform): add subtitle to list

DevCloudFE · Mar 2, 2023 · dd2130e · dd2130e
1 parent 98c8dec
commit dd2130e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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);
   }
 }