style(styles): 修改了示例页的样式

src/layouts/BasicLayout/index.vue

@@ -11,7 +11,7 @@
     >
       <n-menu :collapsed="collapsed" :collapsed-width="64" :collapsed-icon-size="22" :options="menuOptions" />
     </n-layout-sider>
-    <n-layout h-full bg-hex-f3-f4-f6 :native-scrollbar="false">
+    <n-layout h-full bg-hex-f3f4f6 :native-scrollbar="false">
       <n-layout-header bordered text-2xl h-60px flex-y-center>layout-page</n-layout-header>
       <div p-16px>
         <n-layout-content>
@@ -46,7 +46,7 @@ const menuOptions: MenuOption[] = [
         { default: () => 'test1' },
       ),
     key: 'test1',
-    icon: renderIcon('icon-park:ad-product'),
+    icon: renderIcon('icon-park-outline:alarm'),
   },
   {
     label: () =>
@@ -60,7 +60,7 @@ const menuOptions: MenuOption[] = [
         { default: () => 'test2' },
       ),
     key: 'test2',
-    icon: renderIcon('icon-park:ad-product'),
+    icon: renderIcon('icon-park-outline:alarm'),
   },
   {
     label: () =>
@@ -74,7 +74,7 @@ const menuOptions: MenuOption[] = [
         { default: () => 'test3' },
       ),
     key: 'test3',
-    icon: renderIcon('icon-park:ad-product'),
+    icon: renderIcon('icon-park-outline:alarm'),
   },
   {
     label: () =>
@@ -88,12 +88,12 @@ const menuOptions: MenuOption[] = [
         { default: () => '登录页' },
       ),
     key: '登录页',
-    icon: renderIcon('icon-park:ad-product'),
+    icon: renderIcon('icon-park-outline:alarm'),
   },
   {
     label: '舞，舞，舞',
     key: 'dance-dance-dance',
-    icon: renderIcon('icon-park:arithmetic'),
+    icon: renderIcon('icon-park-outline:alarm'),
     children: [
       {
         label: '饮品',

src/views/test/test1.vue

@@ -1,30 +1,35 @@
 <template>
-  <div text-center c-blue>I prove that you have made the jump test1.</div>
+  <div>
-  <div text-center cursor-pointer>
+    <n-space>
-    <div hover:c-blue @click="pinter">click check env</div>
+      <n-button strong secondary type="success" @click="pinter">check env</n-button>
-    <div hover:c-blue @click="get">click to get</div>
+      <n-button strong secondary type="success" @click="get">to get</n-button>
-    <div hover:c-blue @click="post">click to post</div>
+      <n-button strong secondary type="success" @click="post">to post</n-button>
-    <div hover:c-blue @click="delete2">click to delete</div>
+      <n-button strong secondary type="success" @click="delete2">to delete</n-button>
-    <div hover:c-blue @click="put">click to put</div>
+      <n-button strong secondary type="success" @click="put">to put</n-button>
-    <div hover:c-blue @click="patch">click to patch</div>
+      <n-button strong secondary type="success" @click="patch">to patch</n-button>
-    <div hover:c-blue @click="mock">click to use mock</div>
+      <n-button strong secondary type="success" @click="mock">to use mock</n-button>
+    </n-space>
+
+    {{ msg }}
   </div>
 </template>
 
 <script setup lang="ts">
 import { fetachGet, fetachPost, fetachDelete, fetachPut, fetachPatch, fetchMock } from '@/service/api';
-
+import { ref } from 'vue';
+const msg = ref();
 const pinter = () => {
+  msg.value = import.meta.env;
   console.log('打印环境配置', import.meta.env);
 };
 const get = () => {
   fetachGet().then((res) => {
-    console.log(res);
+    msg.value = res;
   });
 };
 const delete2 = () => {
   fetachDelete().then((res) => {
-    console.log(res);
+    msg.value = res;
   });
 };
 const post = () => {
@@ -32,7 +37,7 @@ const post = () => {
     data: '2022-2-2',
   };
   fetachPost(params).then((res) => {
-    console.log(res);
+    msg.value = res;
   });
 };
 const put = () => {
@@ -40,7 +45,7 @@ const put = () => {
     data: '2022-2-2',
   };
   fetachPut(params).then((res) => {
-    console.log(res);
+    msg.value = res;
   });
 };
 const patch = () => {
@@ -48,12 +53,12 @@ const patch = () => {
     data: '2022-2-2',
   };
   fetachPatch(params).then((res) => {
-    console.log(res);
+    msg.value = res;
   });
 };
 const mock = () => {
   fetchMock().then((res) => {
-    console.log(res);
+    msg.value = res;
   });
 };
 </script>