From c325db93020bee724c5ce411eb49523ba5230bcb Mon Sep 17 00:00:00 2001
From: xiaohuohumax <1915970986@qq.com>
Date: Thu, 3 Oct 2024 18:11:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20:bug:=20=E6=A0=B7=E5=BC=8F=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/web/CHANGELOG.md                          |  6 ++
 app/web/package.json                          |  2 +-
 app/web/src/App.vue                           |  3 +-
 app/web/src/components/CSubTitle.vue          |  2 +-
 app/web/src/style/index.css                   | 13 ++--
 app/web/src/views/VAbout.vue                  | 24 +++----
 app/web/src/views/VAlbum.vue                  | 45 ++++---------
 app/web/src/views/VAlbumDetails.vue           |  2 +-
 app/web/src/views/VArticle.vue                |  2 +-
 app/web/src/views/VHistory.vue                | 10 +--
 app/web/src/views/VLink.vue                   | 66 +++++++------------
 app/web/src/views/VMessage.vue                | 10 +--
 app/web/src/views/VTag.vue                    | 10 +--
 app/web/src/views/components/CAlbumCard.vue   | 36 +++++-----
 app/web/src/views/components/CArticleCard.vue |  2 +-
 app/web/src/views/components/CBanner.vue      |  2 +-
 app/web/src/views/components/CComment.vue     |  2 +-
 .../src/views/components/CHeaderSearch.vue    |  2 +-
 app/web/src/views/components/CLinkCard.vue    | 63 ++++++++++++------
 app/web/src/views/layout/LHeader.vue          |  4 +-
 20 files changed, 153 insertions(+), 153 deletions(-)

diff --git a/app/web/CHANGELOG.md b/app/web/CHANGELOG.md
index a285a79..f277de7 100644
--- a/app/web/CHANGELOG.md
+++ b/app/web/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @xiaohuohumax/miaoji-web
 
+## 1.4.1
+
+### Minor Changes
+
+- 样式布局调整
+
 ## 1.4.0
 
 ### Minor Changes
diff --git a/app/web/package.json b/app/web/package.json
index fe9222f..f50497d 100644
--- a/app/web/package.json
+++ b/app/web/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@xiaohuohumax/miaoji-web",
   "type": "module",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "private": true,
   "description": "MiaoJi web client",
   "author": {
diff --git a/app/web/src/App.vue b/app/web/src/App.vue
index b696fb0..ac69bbd 100644
--- a/app/web/src/App.vue
+++ b/app/web/src/App.vue
@@ -47,12 +47,13 @@ const themeOverrides: GlobalThemeOverrides = {
   },
   Card: {
     color: 'transparent',
+    borderColor: 'transparent',
   },
 }
 </script>
 
 <template>
-  <CPointBackground class="-z-50 fixed left-0 top-0 hidden sm:block opacity-60" />
+  <CPointBackground class="-z-20 fixed left-0 top-0 hidden sm:block opacity-60" />
   <NLoadingBarProvider>
     <NConfigProvider
       :theme-overrides="themeOverrides" :theme="appStore.theme.naiveTheme" :locale="tm('naiveUi.locale')"
diff --git a/app/web/src/components/CSubTitle.vue b/app/web/src/components/CSubTitle.vue
index c4807dc..5ee9c3a 100644
--- a/app/web/src/components/CSubTitle.vue
+++ b/app/web/src/components/CSubTitle.vue
@@ -1,5 +1,5 @@
 <template>
-  <h2 class="text-lg mb-2 dark:text-green-300 text-orange-500">
+  <h2 class="text-lg dark:text-green-300 text-orange-500">
     <slot />
   </h2>
 </template>
diff --git a/app/web/src/style/index.css b/app/web/src/style/index.css
index 60f3cc3..2b7e78f 100644
--- a/app/web/src/style/index.css
+++ b/app/web/src/style/index.css
@@ -9,7 +9,7 @@
 
 html.dark:root{
   --text-color: rgb(134 239 172);
-  --bg-color: #101010;
+  --bg-color: #18181c;
 }
 
 /* tailwindcss 与 naive-ui 基础样式冲突 */
@@ -64,24 +64,19 @@ menu {
   list-style: initial !important;
 }
 
-.n-card {
-  background-color: var(--bg-color);
-}
-
 @keyframes card {
   0% {
     opacity: 0;
-    transform: translateY(1em);
   }
 
   100% {
     opacity: 1;
-    transform: translateY(0);
   }
 }
 
 .n-card {
-  animation: card .6s ease-in;
+  animation: card .3s ease-in;
+  background-color: var(--bg-color);
 }
 
 .n-icon {
@@ -90,4 +85,4 @@ menu {
 
 .n-loading-bar-container .n-loading-bar:not(.n-loading-bar--error){
   background-color: var(--text-color) !important;
- }
+}
diff --git a/app/web/src/views/VAbout.vue b/app/web/src/views/VAbout.vue
index affef2c..c937c02 100644
--- a/app/web/src/views/VAbout.vue
+++ b/app/web/src/views/VAbout.vue
@@ -29,18 +29,18 @@ async function queryDataFunc(): Promise<Issue> {
 
 <template>
   <NSpace :vertical="true">
-    <NCard :bordered="false">
-      <NSpace :vertical="true">
-        <CSubTitle>
-          {{ t('page.about.title') }}
-        </CSubTitle>
-        <CLoadData v-model:data="issue" :query-data-func="queryDataFunc">
-          <template #success="{ data }">
-            <CMarkdown :id="data.number" :content="data.body" />
-            <CReactions :reaction="data.reactions" :issue-url="data.html_url" />
-          </template>
-        </CLoadData>
-      </NSpace>
+    <NCard size="small">
+      <CSubTitle>
+        {{ t('page.about.title') }}
+      </CSubTitle>
+    </NCard>
+    <NCard size="small">
+      <CLoadData v-model:data="issue" :query-data-func="queryDataFunc">
+        <template #success="{ data }">
+          <CMarkdown :id="data.number" :content="data.body" />
+          <CReactions :reaction="data.reactions" :issue-url="data.html_url" />
+        </template>
+      </CLoadData>
     </NCard>
   </NSpace>
 </template>
diff --git a/app/web/src/views/VAlbum.vue b/app/web/src/views/VAlbum.vue
index eb556c8..d1ab450 100644
--- a/app/web/src/views/VAlbum.vue
+++ b/app/web/src/views/VAlbum.vue
@@ -1,8 +1,6 @@
 <script setup lang='ts'>
-import type { Album } from './components/CAlbumCard.vue'
 import type { QueryFuncRes } from './components/CLoadPages.vue'
 import CSubTitle from '@/CSubTitle.vue'
-import { markdown, steam } from '@xiaohuohumax/miaoji-util'
 import { NCard, NGrid, NGridItem, NSpace } from 'naive-ui'
 import type { Issue } from '~/api/module/issue'
 import issueApi from '~/api/module/issue'
@@ -23,39 +21,24 @@ async function queryPagesFunc(page: number, perPage: number): Promise<QueryFuncR
     hasNext: data.length === perPage,
   }
 }
-
-function issueToAlbum(issues: Issue[]): Album[] {
-  return issues.map((issue) => {
-    if (!issue.body) {
-      return null
-    }
-    const images = markdown.parseImages(issue.body)
-    if (images.length === 0) {
-      return null
-    }
-    return {
-      images,
-      issue,
-    }
-  }).filter(steam.filterNullFunc)
-}
 </script>
 
 <template>
-  <NCard :bordered="false">
-    <NSpace :vertical="true">
+  <NSpace :vertical="true">
+    <NCard size="small">
       <CSubTitle>
         {{ t('page.album.title') }}
       </CSubTitle>
-      <CLoadPages :query-pages-func="queryPagesFunc">
-        <template #default="{ datas }">
-          <NGrid cols="1 s:2 m:3 l:3 xl:4" responsive="screen" :x-gap="12" :y-gap="12">
-            <NGridItem v-for="album in issueToAlbum(datas)" :key="album.issue.number">
-              <CPhotoCard v-bind="album" />
-            </NGridItem>
-          </NGrid>
-        </template>
-      </CLoadPages>
-    </NSpace>
-  </NCard>
+    </NCard>
+    <CLoadPages :query-pages-func="queryPagesFunc">
+      <template #default="{ datas }">
+        <NGrid cols="1 s:2 m:3 l:3 xl:4" responsive="screen" :x-gap="12" :y-gap="12">
+          <NGridItem v-for="issue in datas" :key="issue.number">
+            <CPhotoCard :issue="issue" />
+            <div class="mt-4" />
+          </NGridItem>
+        </NGrid>
+      </template>
+    </CLoadPages>
+  </NSpace>
 </template>
diff --git a/app/web/src/views/VAlbumDetails.vue b/app/web/src/views/VAlbumDetails.vue
index 0a7f1bd..01e6586 100644
--- a/app/web/src/views/VAlbumDetails.vue
+++ b/app/web/src/views/VAlbumDetails.vue
@@ -41,7 +41,7 @@ async function queryDataFunc(): Promise<IssueImage> {
 
 <template>
   <NSpace :vertical="true">
-    <NCard :bordered="false">
+    <NCard>
       <CLoadData v-model:data="issueImage" :query-data-func="queryDataFunc">
         <template #success="{ data: { issue, images } }">
           <NSpace :vertical="true">
diff --git a/app/web/src/views/VArticle.vue b/app/web/src/views/VArticle.vue
index c75499c..d3f17d9 100644
--- a/app/web/src/views/VArticle.vue
+++ b/app/web/src/views/VArticle.vue
@@ -32,7 +32,7 @@ async function queryDataFunc(): Promise<Issue> {
 
 <template>
   <NSpace :vertical="true">
-    <NCard :bordered="false">
+    <NCard size="small">
       <CLoadData v-model:data="issue" :query-data-func="queryDataFunc">
         <template #success="{ data }">
           <NSpace :vertical="true">
diff --git a/app/web/src/views/VHistory.vue b/app/web/src/views/VHistory.vue
index 353aa54..92d7919 100644
--- a/app/web/src/views/VHistory.vue
+++ b/app/web/src/views/VHistory.vue
@@ -34,11 +34,13 @@ function getHistoryColor(issue: Issue) {
 </script>
 
 <template>
-  <NCard :bordered="false">
-    <NSpace :vertical="true">
+  <NSpace :vertical="true">
+    <NCard size="small">
       <CSubTitle>
         {{ t('page.history.title') }}
       </CSubTitle>
+    </NCard>
+    <NCard size="small">
       <CLoadPages :query-pages-func="queryPagesFunc">
         <template #default="{ datas }">
           <NTimeline>
@@ -59,6 +61,6 @@ function getHistoryColor(issue: Issue) {
           </NTimeline>
         </template>
       </CLoadPages>
-    </NSpace>
-  </NCard>
+    </NCard>
+  </NSpace>
 </template>
diff --git a/app/web/src/views/VLink.vue b/app/web/src/views/VLink.vue
index 5fee5f1..fd2f7a2 100644
--- a/app/web/src/views/VLink.vue
+++ b/app/web/src/views/VLink.vue
@@ -1,9 +1,7 @@
 <script setup lang='ts'>
-import type { Link } from './components/CLinkCard.vue'
 import type { QueryFuncRes } from './components/CLoadPages.vue'
 import CLink from '@/CLink.vue'
 import CSubTitle from '@/CSubTitle.vue'
-import { markdown, steam } from '@xiaohuohumax/miaoji-util'
 import { NButton, NCard, NGrid, NGridItem, NSpace } from 'naive-ui'
 import { computed } from 'vue'
 import type { Issue } from '~/api/module/issue'
@@ -26,56 +24,38 @@ async function queryPagesFunc(page: number, perPage: number): Promise<QueryFuncR
   }
 }
 
-function issueToLink(issues: Issue[]): Link[] {
-  return issues.map((issue) => {
-    if (!issue.body) {
-      return null
-    }
-    const links = markdown.parseLinks(issue.body)
-    if (links.length === 0) {
-      return null
-    }
-    return {
-      title: links[0].content,
-      href: links[0].href,
-      issue,
-    }
-  }).filter(steam.filterNullFunc)
-}
-
 const applyHref = computed(() => {
-  return [
+  return encodeURI([
     appConfig.repository,
     '/issues/new?title=',
-    encodeURIComponent(t('page.link.applyTitle')),
+    t('page.link.applyTitle'),
     '&body=',
-    encodeURIComponent(t('page.link.applyContent')),
-  ].join('')
+    t('page.link.applyContent'),
+  ].join(''))
 })
 </script>
 
 <template>
   <NSpace :vertical="true">
-    <NCard :bordered="false">
-      <NSpace :vertical="true">
-        <CSubTitle>
-          {{ t('page.link.title') }}
-        </CSubTitle>
-        <CLoadPages :query-pages-func="queryPagesFunc">
-          <template #default="{ datas }">
-            <NGrid cols="1 s:2 m:3 l:4 xl:5 2xl:6" responsive="screen" :x-gap="12" :y-gap="12">
-              <NGridItem v-for="link in issueToLink(datas)" :key="link.issue.number">
-                <CLinkCard v-bind="link" />
-              </NGridItem>
-            </NGrid>
-          </template>
-        </CLoadPages>
-        <CLink :href="applyHref" target="_blank">
-          <NButton class="w-full" secondary type="info">
-            {{ t('page.link.toApply') }}
-          </NButton>
-        </CLink>
-      </NSpace>
+    <NCard size="small">
+      <CSubTitle>
+        {{ t('page.link.title') }}
+      </CSubTitle>
     </NCard>
+    <CLoadPages :query-pages-func="queryPagesFunc">
+      <template #default="{ datas }">
+        <NGrid cols="1 s:2 m:3 l:3 xl:4" responsive="screen" :x-gap="12" :y-gap="12">
+          <NGridItem v-for="issue in datas" :key="issue.number">
+            <CLinkCard :issue="issue" />
+          </NGridItem>
+        </NGrid>
+        <div class="mt-4" />
+      </template>
+    </CLoadPages>
+    <CLink :href="applyHref" target="_blank">
+      <NButton class="w-full" secondary type="info">
+        {{ t('page.link.toApply') }}
+      </NButton>
+    </CLink>
   </NSpace>
 </template>
diff --git a/app/web/src/views/VMessage.vue b/app/web/src/views/VMessage.vue
index 87c9e3d..2164fd1 100644
--- a/app/web/src/views/VMessage.vue
+++ b/app/web/src/views/VMessage.vue
@@ -30,19 +30,21 @@ async function queryDataFunc(): Promise<Issue> {
 
 <template>
   <NSpace :vertical="true">
-    <NCard :bordered="false">
-      <NSpace :vertical="true">
+    <NSpace :vertical="true">
+      <NCard size="small">
         <CSubTitle>
           {{ t('page.message.title') }}
         </CSubTitle>
+      </NCard>
+      <NCard size="small">
         <CLoadData v-model:data="issue" :query-data-func="queryDataFunc">
           <template #success="{ data }">
             <CMarkdown :id="data.number" :content="data.body" />
             <CReactions :reaction="data.reactions" :issue-url="data.html_url" />
           </template>
         </CLoadData>
-      </NSpace>
-    </NCard>
+      </NCard>
+    </NSpace>
     <CComment :issue="issue" />
   </NSpace>
 </template>
diff --git a/app/web/src/views/VTag.vue b/app/web/src/views/VTag.vue
index ec25414..75add8b 100644
--- a/app/web/src/views/VTag.vue
+++ b/app/web/src/views/VTag.vue
@@ -10,13 +10,15 @@ const appStore = useAppStore()
 </script>
 
 <template>
-  <NCard :bordered="false">
-    <NSpace :vertical="true">
+  <NSpace :vertical="true">
+    <NCard size="small">
       <CSubTitle>
         {{ t('page.tag.title') }}
       </CSubTitle>
+    </NCard>
+    <NCard size="small">
       <CLabels v-if="appStore.labels.length > 0" :labels="appStore.labels" :show-icon="false" />
       <NEmpty v-else />
-    </NSpace>
-  </NCard>
+    </NCard>
+  </NSpace>
 </template>
diff --git a/app/web/src/views/components/CAlbumCard.vue b/app/web/src/views/components/CAlbumCard.vue
index d65b456..ebcafea 100644
--- a/app/web/src/views/components/CAlbumCard.vue
+++ b/app/web/src/views/components/CAlbumCard.vue
@@ -1,33 +1,39 @@
 <script setup lang='ts'>
-import type { markdown } from '@xiaohuohumax/miaoji-util'
 import CAuthor from '@/CAuthor.vue'
 import CRelativeTime from '@/CRelativeTime.vue'
+import { markdown } from '@xiaohuohumax/miaoji-util'
 import { NCard, NIcon, NImage, NSpace } from 'naive-ui'
+import { computed } from 'vue'
 import type { Issue } from '~/api/module/issue'
 import { IAperture } from '~/icons'
 import { RouteName } from '~/router/routes'
 import CReactions from './CReactions.vue'
 
-export interface Album {
-  images: markdown.MarkdownImage[]
+const props = defineProps<{
   issue: Issue
-}
+}>()
 
-defineProps<Album>()
+const images = computed(() => {
+  return props.issue.body
+    ? markdown.parseImages(props.issue.body)
+    : []
+})
 </script>
 
 <template>
   <RouterLink :to="{ name: RouteName.AlbumDetail, params: { id: issue.number } }">
-    <NCard size="small" :bordered="false">
-      <NImage :src="images[0].src" :alt="images[0].alt" :preview-disabled="true" lazy>
-        <template #placeholder>
-          <div class="text-center p-2">
-            <NIcon size="30">
-              <IAperture class="animate-spin inline-block" />
-            </NIcon>
-          </div>
-        </template>
-      </NImage>
+    <NCard size="small" class="hover:scale-[1.02] transition-transform duration-200 ease-in-out">
+      <template v-if="images.length > 0" #cover>
+        <NImage class="w-full" :src="images[0].src" :alt="images[0].alt" :preview-disabled="true" lazy>
+          <template #placeholder>
+            <div class="flex items-center justify-center w-full py-20">
+              <NIcon size="30">
+                <IAperture class="animate-spin inline-block" />
+              </NIcon>
+            </div>
+          </template>
+        </NImage>
+      </template>
       <NSpace vertical size="small">
         <div class="text-lg">
           {{ issue.title }}
diff --git a/app/web/src/views/components/CArticleCard.vue b/app/web/src/views/components/CArticleCard.vue
index 64dec5b..fce05d4 100644
--- a/app/web/src/views/components/CArticleCard.vue
+++ b/app/web/src/views/components/CArticleCard.vue
@@ -19,7 +19,7 @@ const config = markdown.parseConfig<ArticleMarkdownConfig>(props.issue.body || '
 
 <template>
   <RouterLink :to="{ name: RouteName.Article, params: { id: issue.number } }">
-    <NCard :bordered="false">
+    <NCard size="small" class="hover:scale-[1.02] transition-transform duration-200 ease-in-out">
       <NSpace :vertical="true">
         <h1 class="text-xl dark:text-green-300 text-orange-500">
           {{ issue.title }}
diff --git a/app/web/src/views/components/CBanner.vue b/app/web/src/views/components/CBanner.vue
index cecf318..93be73d 100644
--- a/app/web/src/views/components/CBanner.vue
+++ b/app/web/src/views/components/CBanner.vue
@@ -18,7 +18,7 @@ const appStore = useAppStore()
         />
       </div>
     </NCarousel>
-    <NCard :bordered="false" class="absolute w-full h-full top-0 left-0 -z-10" />
+    <NCard class="absolute w-full h-full top-0 left-0 -z-10" />
   </div>
 </template>
 
diff --git a/app/web/src/views/components/CComment.vue b/app/web/src/views/components/CComment.vue
index e38580b..f513bbf 100644
--- a/app/web/src/views/components/CComment.vue
+++ b/app/web/src/views/components/CComment.vue
@@ -48,7 +48,7 @@ watch(() => props.issue, () => {
 </script>
 
 <template>
-  <NCard :bordered="false">
+  <NCard size="small">
     <NSpace :vertical="true">
       <CSubTitle>
         {{ t('component.comment.title') }}
diff --git a/app/web/src/views/components/CHeaderSearch.vue b/app/web/src/views/components/CHeaderSearch.vue
index 06bed9c..2840b06 100644
--- a/app/web/src/views/components/CHeaderSearch.vue
+++ b/app/web/src/views/components/CHeaderSearch.vue
@@ -85,7 +85,7 @@ watch(() => mode.value, () => {
   </CLink>
   <NModal :show="show" :mask-closable="true" display-directive="show" @mask-click="show = false">
     <div class="flex" style="margin-top: calc(100svh / 6);">
-      <NCard aria-modal="true" :bordered="false">
+      <NCard aria-modal="true">
         <NSpace :vertical="true">
           <NInputGroup>
             <NSelect
diff --git a/app/web/src/views/components/CLinkCard.vue b/app/web/src/views/components/CLinkCard.vue
index db90190..da6ce10 100644
--- a/app/web/src/views/components/CLinkCard.vue
+++ b/app/web/src/views/components/CLinkCard.vue
@@ -1,33 +1,56 @@
 <script setup lang='ts'>
 import CLink from '@/CLink.vue'
-import { NImage, NThing } from 'naive-ui'
+import { markdown } from '@xiaohuohumax/miaoji-util'
+import { NCard, NImage, NThing } from 'naive-ui'
+import { computed } from 'vue'
 import type { Issue } from '~/api/module/issue'
 
-export interface Link {
+const props = defineProps<{
+  issue: Issue
+}>()
+
+interface Link {
   title: string
   href: string
-  issue: Issue
 }
 
-defineProps<Link>()
+const link = computed(() => {
+  const defaultLink: Link = {
+    title: props.issue.user?.login || 'Unknown',
+    href: props.issue.user?.html_url || '#',
+  }
+  if (!props.issue.body) {
+    return defaultLink
+  }
+  const links = markdown.parseLinks(props.issue.body)
+  if (links.length === 0) {
+    return defaultLink
+  }
+  return {
+    title: links[0].content,
+    href: links[0].href,
+  }
+})
 </script>
 
 <template>
-  <CLink :href="href" target="_blank">
-    <NThing>
-      <template #avatar>
-        <NImage :src="issue.user?.avatar_url" class="w-16 h-16 rounded-md" />
-      </template>
-      <template #header>
-        <CLink :href="href" target="_blank">
-          {{ title }}
-        </CLink>
-      </template>
-      <template #description>
-        <CLink v-if="issue.user" :href="issue.user.html_url" target="_blank">
-          {{ issue.user.login }}
-        </CLink>
-      </template>
-    </NThing>
+  <CLink :href="link.href" target="_blank">
+    <NCard size="small" class="hover:scale-[1.02] transition-transform duration-200 ease-in-out">
+      <NThing>
+        <template #avatar>
+          <NImage :src="issue.user?.avatar_url" class="w-16 h-16 rounded-md" />
+        </template>
+        <template #header>
+          <CLink :href="link.href" target="_blank">
+            {{ link.title }}
+          </CLink>
+        </template>
+        <template #description>
+          <CLink v-if="issue.user" :href="issue.user.html_url" target="_blank">
+            {{ issue.user.login }}
+          </CLink>
+        </template>
+      </NThing>
+    </NCard>
   </CLink>
 </template>
diff --git a/app/web/src/views/layout/LHeader.vue b/app/web/src/views/layout/LHeader.vue
index 12aac85..239d49d 100644
--- a/app/web/src/views/layout/LHeader.vue
+++ b/app/web/src/views/layout/LHeader.vue
@@ -33,7 +33,7 @@ watch(() => route.name, () => {
 <template>
   <div class="header sticky top-0 z-50 font-bold">
     <div class="container mx-auto px-2">
-      <NCard size="small" :bordered="false" class="rounded-t-none">
+      <NCard size="small" class="rounded-t-none">
         <NSpace justify="space-between" align="center">
           <div class="text-lg">
             <RouterLink :to="{ name: RouteName.Home }" class="flex items-center group">
@@ -67,7 +67,7 @@ watch(() => route.name, () => {
               <IMenu :size="30" @click="toggleDrawer" />
             </CLink>
             <div v-show="drawer" class="absolute left-0 top-full w-full h-screen">
-              <NCard :bordered="false" class="h-full mt-2">
+              <NCard class="h-full mt-2">
                 <NSpace :vertical="true">
                   <NMenu v-model:value="menu" :options="appStore.menuOptions" :root-indent="8" :indent="8" />
                   <NDivider />