style(projects): unify card border radius, 16px to 8px

src/views/_builtin/constant-page/index.vue

@@ -4,7 +4,7 @@
     <router-link :to="{ name: routeHomePath }">
       <n-button type="primary">回到首页</n-button>
     </router-link>
-    <n-card :bordered="false" size="small" class="mt-24px rounded-16px shadow-sm">
+    <n-card :bordered="false" size="small" class="mt-24px rounded-8px shadow-sm">
       <div class="flex-center py-12px">
         <n-button type="primary" class="mr-24px" :disabled="isMoving" @click="startMove">开始</n-button>
         <n-button type="error" @click="endMove">暂停</n-button>

src/views/about/components/dev-dependency.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card title="开发环境依赖" :bordered="false" size="small" class="rounded-16px shadow-sm">
+  <n-card title="开发环境依赖" :bordered="false" size="small" class="rounded-8px shadow-sm">
     <n-descriptions label-placement="left" bordered size="small">
       <n-descriptions-item v-for="item in devDependencies" :key="item.name" :label="item.name">
         {{ item.version }}

src/views/about/components/pro-dependency.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card title="生产环境依赖" :bordered="false" size="small" class="rounded-16px shadow-sm">
+  <n-card title="生产环境依赖" :bordered="false" size="small" class="rounded-8px shadow-sm">
     <n-descriptions label-placement="left" bordered size="small">
       <n-descriptions-item v-for="item in dependencies" :key="item.name" :label="item.name">
         {{ item.version }}

src/views/about/components/project-info.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card title="项目信息" :bordered="false" size="small" class="rounded-16px shadow-sm">
+  <n-card title="项目信息" :bordered="false" size="small" class="rounded-8px shadow-sm">
     <n-descriptions label-placement="left" bordered size="small" :column="2">
       <n-descriptions-item label="版本">
         <n-tag type="primary">{{ version }}</n-tag>

src/views/about/components/project-introduction.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card title="关于" :bordered="false" size="large" class="rounded-16px shadow-sm">
+  <n-card title="关于" :bordered="false" size="large" class="rounded-8px shadow-sm">
     <p class="leading-24px">
       Soybean Admin 是一个基于 Vue3、Vite、Naive UI、TypeScript
       的中后台解决方案，它使用了最新的前端技术栈，并提炼了典型的业务模型，页面，包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能，它可以帮助你快速搭建企业级中后台项目，相信不管是从新技术使用还是其他方面，都能帮助到你。

src/views/auth-demo/permission/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-full">
-    <n-card title="权限切换" class="h-full shadow-sm rounded-16px">
+    <n-card title="权限切换" :bordered="false" class="h-full rounded-8px shadow-sm">
       <div class="pb-12px">
         <n-gradient-text type="primary" :size="20">当前用户的权限：{{ auth.userInfo.userRole }}</n-gradient-text>
       </div>

src/views/auth-demo/super/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-full">
-    <n-card title="当前页面只有super才能看到" class="h-full shadow-sm rounded-16px"></n-card>
+    <n-card title="当前页面只有super才能看到" :bordered="false" class="h-full rounded-8px shadow-sm"></n-card>
   </div>
 </template>
 

src/views/component/button/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <n-card title="按钮" class="h-full shadow-sm rounded-16px">
+    <n-card title="按钮" :bordered="false" class="h-full rounded-8px shadow-sm">
       <n-grid cols="s:1 m:2" responsive="screen" :x-gap="16" :y-gap="16">
         <n-grid-item v-for="item in buttonExample" :key="item.id">
           <n-card :title="item.label" class="min-h-180px">

src/views/component/card/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <n-card title="卡片" class="h-full shadow-sm rounded-16px">
+    <n-card title="卡片" :bordered="false" class="h-full rounded-8px shadow-sm">
       <n-space :vertical="true">
         <n-card title="基本用法">
           <p class="pb-16px">基础卡片</p>

src/views/component/table/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-full overflow-hidden">
-    <n-card title="表格" class="h-full shadow-sm rounded-16px">
+    <n-card title="表格" :bordered="false" class="h-full rounded-8px shadow-sm">
       <n-space :vertical="true">
         <n-space>
           <n-button @click="getDataSource">有数据</n-button>

src/views/dashboard/analysis/components/bottom-part/index.vue

@@ -1,14 +1,14 @@
 <template>
   <n-grid :x-gap="16" :y-gap="16" :item-responsive="true">
     <n-grid-item span="0:24 640:24 1024:8">
-      <n-card title="时间线" :bordered="false" class="h-full rounded-16px shadow-sm">
+      <n-card title="时间线" :bordered="false" class="h-full rounded-8px shadow-sm">
         <n-timeline>
           <n-timeline-item v-for="item in timelines" :key="item.type" v-bind="item" />
         </n-timeline>
       </n-card>
     </n-grid-item>
     <n-grid-item span="0:24 640:24 1024:16">
-      <n-card title="表格" :bordered="false" class="h-full rounded-16px shadow-sm">
+      <n-card title="表格" :bordered="false" class="h-full rounded-8px shadow-sm">
         <n-data-table size="small" :columns="columns" :data="tableData" />
       </n-card>
     </n-grid-item>

src/views/dashboard/analysis/components/data-card/components/gradient-bg.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-16px rounded-16px text-white" :style="{ backgroundImage: gradientStyle }">
+  <div class="p-16px rounded-8px text-white" :style="{ backgroundImage: gradientStyle }">
     <slot></slot>
   </div>
 </template>

src/views/dashboard/analysis/components/data-card/index.vue

@@ -1,20 +1,22 @@
 <template>
-  <n-grid cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16">
+  <n-card :bordered="false" class="h-full rounded-8px shadow-sm">
-    <n-grid-item v-for="item in cardData" :key="item.id">
+    <n-grid cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16">
-      <gradient-bg class="h-100px" :start-color="item.colors[0]" :end-color="item.colors[1]">
+      <n-grid-item v-for="item in cardData" :key="item.id">
-        <h3 class="text-16px">{{ item.title }}</h3>
+        <gradient-bg class="h-100px" :start-color="item.colors[0]" :end-color="item.colors[1]">
-        <div class="flex justify-between pt-12px">
+          <h3 class="text-16px">{{ item.title }}</h3>
-          <svg-icon :icon="item.icon" class="text-32px" />
+          <div class="flex justify-between pt-12px">
-          <count-to
+            <svg-icon :icon="item.icon" class="text-32px" />
-            :prefix="item.unit"
+            <count-to
-            :start-value="1"
+              :prefix="item.unit"
-            :end-value="item.value"
+              :start-value="1"
-            class="text-30px text-white dark:text-dark"
+              :end-value="item.value"
-          />
+              class="text-30px text-white dark:text-dark"
-        </div>
+            />
-      </gradient-bg>
+          </div>
-    </n-grid-item>
+        </gradient-bg>
-  </n-grid>
+      </n-grid-item>
+    </n-grid>
+  </n-card>
 </template>
 
 <script setup lang="ts">

src/views/dashboard/analysis/components/top-chart/index.vue

@@ -1,7 +1,7 @@
 <template>
   <n-grid :x-gap="16" :y-gap="16" :item-responsive="true">
     <n-grid-item span="0:24 640:24 1024:6">
-      <n-card :bordered="false" class="rounded-16px shadow-sm">
+      <n-card :bordered="false" class="rounded-8px shadow-sm">
         <div class="w-full h-360px py-12px">
           <h3 class="text-16px font-bold">Dashboard</h3>
           <p class="text-#aaa">Overview Of Lasted Month</p>
@@ -18,12 +18,12 @@
       </n-card>
     </n-grid-item>
     <n-grid-item span="0:24 640:24 1024:10">
-      <n-card :bordered="false" class="rounded-16px shadow-sm">
+      <n-card :bordered="false" class="rounded-8px shadow-sm">
         <div ref="lineRef" class="w-full h-360px"></div>
       </n-card>
     </n-grid-item>
     <n-grid-item span="0:24 640:24 1024:8">
-      <n-card :bordered="false" class="rounded-16px shadow-sm">
+      <n-card :bordered="false" class="rounded-8px shadow-sm">
         <div ref="pieRef" class="w-full h-360px"></div>
       </n-card>
     </n-grid-item>

src/views/dashboard/workbench/components/workbench-header/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card :bordered="false" class="rounded-16px shadow-sm">
+  <n-card :bordered="false" class="rounded-8px shadow-sm">
     <div class="flex-y-center justify-between">
       <div class="flex-y-center">
         <icon-local-avatar class="text-70px" />

src/views/dashboard/workbench/components/workbench-main/index.vue

@@ -2,7 +2,7 @@
   <n-grid :item-responsive="true" :x-gap="16" :y-gap="16">
     <n-grid-item span="0:24 640:24 1024:16">
       <n-space :vertical="true" :size="16">
-        <n-card title="项目主要技术栈" :bordered="false" size="small" class="shadow-sm rounded-16px">
+        <n-card title="项目主要技术栈" :bordered="false" size="small" class="rounded-8px shadow-sm">
           <template #header-extra>
             <a class="text-primary" href="javascript:;">更多技术栈</a>
           </template>
@@ -12,7 +12,7 @@
             </n-grid-item>
           </n-grid>
         </n-card>
-        <n-card title="动态" :bordered="false" size="small" class="shadow-sm rounded-16px">
+        <n-card title="动态" :bordered="false" size="small" class="rounded-8px shadow-sm">
           <template #header-extra>
             <a class="text-primary" href="javascript:;">更多动态</a>
           </template>
@@ -29,14 +29,14 @@
     </n-grid-item>
     <n-grid-item span="0:24 640:24 1024:8">
       <n-space :vertical="true" :size="16">
-        <n-card title="快捷操作" :bordered="false" size="small" class="shadow-sm rounded-16px">
+        <n-card title="快捷操作" :bordered="false" size="small" class="rounded-8px shadow-sm">
           <n-grid :item-responsive="true" responsive="screen" cols="m:2 l:3" :x-gap="8" :y-gap="8">
             <n-grid-item v-for="item in shortcuts" :key="item.id">
               <shortcuts-card v-bind="item" />
             </n-grid-item>
           </n-grid>
         </n-card>
-        <n-card title="创意" :bordered="false" size="small" class="shadow-sm rounded-16px">
+        <n-card title="创意" :bordered="false" size="small" class="rounded-8px shadow-sm">
           <div class="flex-center h-380px">
             <icon-local-banner class="text-400px sm:text-320px text-primary" />
           </div>

src/views/function/tab-detail/index.vue

@@ -1,6 +1,6 @@
 <template>
   <n-space :vertical="true" :size="16">
-    <n-card title="Tab Detail" :bordered="false" size="small" class="shadow-sm rounded-16px">
+    <n-card title="Tab Detail" :bordered="false" size="small" class="rounded-8px shadow-sm">
       <n-space :vertical="true" :size="12">
         <div>当前路由的描述数据(meta)：</div>
         <div>{{ route.meta }}</div>

src/views/function/tab-multi-detail/index.vue

@@ -1,6 +1,6 @@
 <template>
   <n-space :vertical="true" :size="16">
-    <n-card title="Tab Detail" :bordered="false" size="small" class="shadow-sm rounded-16px">
+    <n-card title="Tab Detail" :bordered="false" size="small" class="rounded-8px shadow-sm">
       <n-space :vertical="true" :size="12">
         <div>当前路由的描述数据(meta)：</div>
         <div>{{ route.meta }}</div>

src/views/function/tab/index.vue

@@ -1,6 +1,6 @@
 <template>
   <n-space :vertical="true" :size="16">
-    <n-card title="Tab Home" :bordered="false" size="small" class="shadow-sm rounded-16px">
+    <n-card title="Tab Home" :bordered="false" size="small" class="rounded-8px shadow-sm">
       <n-space :vertical="true" :size="12">
         <n-button @click="handleToTabDetail">跳转Tab Detail</n-button>
         <n-button @click="handleToTabMultiDetail(1)">跳转Tab Multi Detail 1</n-button>

src/views/management/user/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-full overflow-hidden">
-    <n-card title="用户管理" :bordered="false" class="rounded-16px shadow-sm">
+    <n-card title="用户管理" :bordered="false" class="rounded-8px shadow-sm">
       <n-space class="pb-12px" justify="space-between">
         <n-space>
           <n-button type="primary" @click="handleAddTable">

src/views/multi-menu/first/second-new/third/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-full">
-    <n-card title="多级菜单 - 三级菜单" class="h-full shadow-sm rounded-16px"></n-card>
+    <n-card title="多级菜单 - 三级菜单" :bordered="false" class="h-full rounded-8px shadow-sm"></n-card>
   </div>
 </template>
 

src/views/multi-menu/first/second/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-full">
-    <n-card title="多级菜单 - 二级菜单" class="h-full shadow-sm rounded-16px"></n-card>
+    <n-card title="多级菜单 - 二级菜单" :bordered="false" class="h-full rounded-8px shadow-sm"></n-card>
   </div>
 </template>
 

src/views/plugin/charts/antv/index.vue

@@ -1,21 +1,21 @@
 <template>
   <n-space :vertical="true" :size="16">
-    <n-card :bordered="false" class="rounded-16px shadow-sm">
+    <n-card :bordered="false" class="rounded-8px shadow-sm">
       <div ref="pieRef" class="h-400px"></div>
     </n-card>
-    <n-card :bordered="false" class="rounded-16px shadow-sm">
+    <n-card :bordered="false" class="rounded-8px shadow-sm">
       <div ref="lineRef" class="h-400px"></div>
     </n-card>
-    <n-card :bordered="false" class="rounded-16px shadow-sm">
+    <n-card :bordered="false" class="rounded-8px shadow-sm">
       <div ref="barRef" class="h-400px"></div>
     </n-card>
-    <n-card :bordered="false" class="rounded-16px shadow-sm">
+    <n-card :bordered="false" class="rounded-8px shadow-sm">
       <div ref="scatterRef" class="h-400px"></div>
     </n-card>
-    <n-card :bordered="false" class="rounded-16px shadow-sm">
+    <n-card :bordered="false" class="rounded-8px shadow-sm">
       <div ref="areaRef" class="h-400px"></div>
     </n-card>
-    <n-card :bordered="false" class="rounded-16px shadow-sm">
+    <n-card :bordered="false" class="rounded-8px shadow-sm">
       <div ref="radarRef" class="h-400px"></div>
     </n-card>
   </n-space>

src/views/plugin/charts/echarts/index.vue

@@ -1,24 +1,24 @@
 <template>
   <n-space :vertical="true" :size="16">
-    <n-card :bordered="false" class="rounded-16px shadow-sm">
+    <n-card :bordered="false" class="rounded-8px shadow-sm">
       <div ref="pieRef" class="h-400px"></div>
     </n-card>
-    <n-card :bordered="false" class="rounded-16px shadow-sm">
+    <n-card :bordered="false" class="rounded-8px shadow-sm">
       <div ref="lineRef" class="h-400px"></div>
     </n-card>
-    <n-card :bordered="false" class="rounded-16px shadow-sm">
+    <n-card :bordered="false" class="rounded-8px shadow-sm">
       <div ref="barRef" class="h-400px"></div>
     </n-card>
-    <n-card :bordered="false" class="rounded-16px shadow-sm">
+    <n-card :bordered="false" class="rounded-8px shadow-sm">
       <div ref="pictorialBarRef" class="h-600px"></div>
     </n-card>
-    <n-card :bordered="false" class="rounded-16px shadow-sm">
+    <n-card :bordered="false" class="rounded-8px shadow-sm">
       <div ref="scatterRef" class="h-600px"></div>
     </n-card>
-    <n-card :bordered="false" class="rounded-16px shadow-sm">
+    <n-card :bordered="false" class="rounded-8px shadow-sm">
       <div ref="radarRef" class="h-400px"></div>
     </n-card>
-    <n-card :bordered="false" class="rounded-16px shadow-sm">
+    <n-card :bordered="false" class="rounded-8px shadow-sm">
       <div ref="gaugeRef" class="h-640px"></div>
     </n-card>
   </n-space>

src/views/plugin/copy/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-full">
-    <n-card title="文本复制" class="h-full shadow-sm rounded-16px">
+    <n-card title="文本复制" :bordered="false" class="h-full rounded-8px shadow-sm">
       <n-input-group>
         <n-input v-model:value="source" placeholder="请输入要复制的内容吧" />
         <n-button type="primary" @click="handleCopy">复制</n-button>

src/views/plugin/editor/markdown/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-full">
-    <n-card title="markdown插件" class="shadow-sm rounded-16px">
+    <n-card title="markdown插件" :bordered="false" class="rounded-8px shadow-sm">
       <div ref="domRef"></div>
       <template #footer>
         <github-link link="https://github.com/Vanessa219/vditor" />

src/views/plugin/editor/quill/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-full">
-    <n-card title="富文本插件" class="shadow-sm rounded-16px">
+    <n-card title="富文本插件" :bordered="false" class="rounded-8px shadow-sm">
       <div ref="domRef" class="bg-white dark:bg-dark"></div>
       <template #footer>
         <github-link link="https://github.com/wangeditor-team/wangEditor" />

src/views/plugin/icon/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-full">
-    <n-card title="Icon组件示例" class="shadow-sm rounded-16px">
+    <n-card title="Icon组件示例" :bordered="false" class="rounded-8px shadow-sm">
       <div class="grid grid-cols-10">
         <template v-for="item in icons" :key="item">
           <div class="mt-5px flex-x-center">
@@ -16,7 +16,7 @@
         <web-site-link label="iconify地址：" link="https://icones.js.org/" class="mt-10px" />
       </template>
     </n-card>
-    <n-card title="自定义图标示例" class="mt-10px shadow-sm rounded-16px">
+    <n-card title="自定义图标示例" :bordered="false" class="mt-10px rounded-8px shadow-sm">
       <div class="pb-12px text-16px">
         在src/assets/svg-icon文件夹下的svg文件，通过在template里面以 icon-local-{文件名} 直接渲染,
         其中icon-local为.env文件里的 VITE_ICON_LOCAL_PREFFIX

src/views/plugin/map/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-full">
-    <n-card title="地图插件" class="h-full shadow-sm rounded-16px" content-style="overflow:hidden">
+    <n-card title="地图插件" :bordered="false" class="h-full rounded-8px shadow-sm" content-style="overflow:hidden">
       <n-tabs type="line" class="flex-col-stretch h-full" pane-class="flex-1-hidden">
         <n-tab-pane v-for="item in maps" :key="item.id" :name="item.id" :tab="item.label">
           <component :is="item.component" />

src/views/plugin/print/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-full">
-    <n-card title="打印" class="shadow-sm rounded-16px">
+    <n-card title="打印" :bordered="false" class="rounded-8px shadow-sm">
       <n-button type="primary" class="mr-10px" @click="printTable">打印表格</n-button>
       <n-button type="primary" @click="printImage">打印图片</n-button>
       <template #footer>

src/views/plugin/swiper/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <n-card title="Swiper插件" class="shadow-sm rounded-16px">
+    <n-card title="Swiper插件" :bordered="false" class="rounded-8px shadow-sm">
       <n-space :vertical="true">
         <github-link link="https://github.com/nolimits4web/swiper" />
         <web-site-link label="vue3版文档地址：" link="https://swiperjs.com/vue" />

src/views/plugin/video/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-full">
-    <n-card title="视频播放器插件" class="h-full shadow-sm rounded-16px">
+    <n-card title="视频播放器插件" :bordered="false" class="h-full rounded-8px shadow-sm">
       <div ref="domRef" class=""></div>
     </n-card>
   </div>
@@ -9,6 +9,7 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue';
 import Player from 'xgplayer';
+import 'xgplayer/dist/index.min.css';
 
 const domRef = ref<HTMLElement>();
 const player = ref<Player>();