mod: base demo

src/views/demo/base/dialog/index.vue

@@ -1,19 +0,0 @@
-<template>
-  <CommonPage :show-header="false">
-    <n-button type="error" @click="handleDelete"> <icon-mi:delete mr-5 />删除</n-button>
-  </CommonPage>
-</template>
-
-<script setup name="TestDialog">
-const handleDelete = function () {
-  $dialog.confirm({
-    content: '确认删除？',
-    confirm() {
-      $message.success('删除成功')
-    },
-    cancel() {
-      $message.warning('已取消')
-    },
-  })
-}
-</script>

src/views/demo/base/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <CommonPage show-footer>
+    <n-space size="large">
+      <n-card title="按钮 Button">
+        <n-space>
+          <n-button>Default</n-button>
+          <n-button type="tertiary"> Tertiary </n-button>
+          <n-button type="primary"> Primary </n-button>
+          <n-button type="info"> Info </n-button>
+          <n-button type="success"> Success </n-button>
+          <n-button type="warning"> Warning </n-button>
+          <n-button type="error"> Error </n-button>
+        </n-space>
+      </n-card>
+
+      <n-card title="带 Icon 的按钮">
+        <n-space>
+          <n-button type="info"> <TheIcon icon="material-symbols:add" :size="18" class="mr-5" /> 新增 </n-button>
+          <n-button type="error">
+            <TheIcon icon="material-symbols:delete-outline" :size="18" class="mr-5" /> 删除
+          </n-button>
+          <n-button type="warning">
+            <TheIcon icon="material-symbols:edit-outline" :size="18" class="mr-5" /> 编辑
+          </n-button>
+          <n-button type="primary"> <TheIcon icon="majesticons:eye-line" :size="18" class="mr-5" /> 查看 </n-button>
+        </n-space>
+      </n-card>
+    </n-space>
+
+    <n-space size="large" mt-30>
+      <n-card min-w-340 title="通知 Notification">
+        <n-space>
+          <n-button @click="notify('info')"> 信息 </n-button>
+          <n-button @click="notify('success')"> 成功 </n-button>
+          <n-button @click="notify('warning')"> 警告 </n-button>
+          <n-button @click="notify('error')"> 错误 </n-button>
+        </n-space>
+      </n-card>
+
+      <n-card min-w-340 title="确认弹窗 Dialog">
+        <n-button type="error" @click="handleDelete"> <icon-mi:delete mr-5 />删除</n-button>
+      </n-card>
+
+      <n-card min-w-340 title="消息提醒 Message">
+        <n-button :loading="loading" type="primary" @click="handleLogin">
+          <icon-mdi:login v-show="!loading" mr-5 />
+          登陆
+        </n-button>
+      </n-card>
+    </n-space>
+  </CommonPage>
+</template>
+
+<script setup>
+const handleDelete = function () {
+  $dialog.confirm({
+    content: '确认删除？',
+    confirm() {
+      $message.success('删除成功')
+    },
+    cancel() {
+      $message.warning('已取消')
+    },
+  })
+}
+
+const loading = ref(false)
+function handleLogin() {
+  loading.value = true
+  $message.loading('登陆中...')
+  setTimeout(() => {
+    $message.error('登陆失败')
+    $message.loading('正在尝试重新登陆...')
+    setTimeout(() => {
+      $message.success('登陆成功')
+      loading.value = false
+    }, 2000)
+  }, 2000)
+}
+
+function notify(type) {
+  $notification[type]({
+    content: '说点啥呢',
+    meta: '想不出来',
+    duration: 2500,
+    keepAliveOnHover: true,
+  })
+}
+</script>

src/views/demo/base/keep-alive/index.vue

@@ -1,8 +1,9 @@
 <template>
-  <CommonPage>
+  <CommonPage show-footer>
     <div w-350>
       <n-input v-model:value="inputVal" />
       <n-input-number v-model:value="number" mt-30 />
+      <p mt-20 text-center color-gray text-14>注：右击标签重新加载可重置keep-alive</p>
     </div>
   </CommonPage>
 </template>

src/views/demo/base/message/index.vue

@@ -1,21 +0,0 @@
-<template>
-  <CommonPage title="我是自定义Title">
-    <n-button type="primary" @click="handleLogin">
-      <icon-mdi:login mr-5 />
-      登陆
-    </n-button>
-  </CommonPage>
-</template>
-
-<script setup>
-function handleLogin() {
-  $message.loading('登陆中...')
-  setTimeout(() => {
-    $message.error('登陆失败')
-    $message.loading('正在尝试重新登陆...')
-    setTimeout(() => {
-      $message.success('登陆成功')
-    }, 2000)
-  }, 2000)
-}
-</script>

src/views/demo/base/route.js

@@ -4,37 +4,28 @@ export default {
   name: 'Test',
   path: '/base',
   component: Layout,
-  redirect: '/base/unocss',
+  redirect: '/base/index',
   meta: {
     title: '基础功能',
-    customIcon: 'logo',
+    icon: 'majesticons:compass-line',
     order: 1,
   },
   children: [
+    {
+      name: 'BaseComponents',
+      path: 'idnex',
+      component: () => import('./index.vue'),
+      meta: {
+        title: '基础组件',
+        icon: 'material-symbols:auto-awesome-outline-rounded',
+      },
+    },
     {
       name: 'Unocss',
       path: 'unocss',
       component: () => import('./unocss/index.vue'),
       meta: {
-        title: '测试unocss',
+        title: 'Unocss',
-        icon: 'material-symbols:auto-awesome-outline-rounded',
-      },
-    },
-    {
-      name: 'Message',
-      path: 'message',
-      component: () => import('./message/index.vue'),
-      meta: {
-        title: '测试Message',
-        icon: 'material-symbols:auto-awesome-outline-rounded',
-      },
-    },
-    {
-      name: 'Dialog',
-      path: 'dialog',
-      component: () => import('./dialog/index.vue'),
-      meta: {
-        title: '测试Dialog',
         icon: 'material-symbols:auto-awesome-outline-rounded',
       },
     },

src/views/demo/base/unocss/index.vue

@@ -61,6 +61,6 @@
         </div>
       </div>
     </div>
-    <h2 font-normal text-18 text-center w-350 mt-10 color-gray-400>Flex 骰子</h2>
+    <h2 font-normal text-14 text-center w-350 mt-10 color-gray>Flex 骰子</h2>
   </CommonPage>
 </template>