chore: add demos

Author: likui628

apps/web-naive/src/views/demos/naive/index.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import type { NotificationType } from 'naive-ui';
+import { Page } from '@vben/common-ui';
 
+import { type NotificationType } from 'naive-ui';
 import { NButton, NCard, NSpace, useMessage, useNotification } from 'naive-ui';
 
 const notification = useNotification();
@@ -33,12 +34,8 @@ function notify(type: NotificationType) {
 </script>
 
 <template>
-  <div class="p-5">
-    <div class="card-box p-5">
-      <h1 class="text-xl font-semibold">naive组件使用演示</h1>
-      <div class="text-foreground/80 mt-2">支持多语言，主题功能集成切换等</div>
-    </div>
-
+  <Page :header-sticky="true" title="naive组件使用演示">
+    <template #headerContent> 支持多语言，主题功能集成切换等 </template>
     <div class="card-box mt-5 p-5">
       <div class="mb-3">
         <span class="text-lg font-semibold">按钮</span>
@@ -87,5 +84,5 @@ function notify(type: NotificationType) {
         <NButton type="primary" @click="notify('info')"> 加载中 </NButton>
       </div>
     </div>
-  </div>
+  </Page>
 </template>

apps/web-naive/src/views/demos/table/index.vue

@@ -27,7 +27,13 @@ const data = [
 </script>
 
 <template>
-  <Page>
+  <Page title="NDataTable">
+    <template #headerContent>
+      表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。
+    </template>
+    <template #footerContent>
+      <div>Footer Content</div>
+    </template>
     <NDataTable :columns="columns" :data="data" />
   </Page>
 </template>