fix: perfect menu

src/views/demo/editor/rich/index.vue

@@ -23,7 +23,7 @@ const active = ref(false)
         </template>
       </n-switch>
       <n-space :size="12">
-        <div class="h-2xl">
+        <div class="h-300px">
           <RichTextEditor v-model="text" :disabled="active" />
         </div>
         <div>

src/views/setting/menu/index.vue

@@ -15,6 +15,10 @@ function deleteData(id: number) {
 const tableModalRef = ref()
 
 const columns: DataTableColumns<AppRoute.RowRoute> = [
+  {
+    type: 'selection',
+    width: 30,
+  },
   {
     title: '名称',
     key: 'name',
@@ -79,6 +83,7 @@ const columns: DataTableColumns<AppRoute.RowRoute> = [
     title: '操作',
     align: 'center',
     key: 'actions',
+    width: '15em',
     render: (row) => {
       const rowData = row as unknown as CommonList.UserList
       return (
@@ -118,6 +123,11 @@ async function getAllRoutes() {
   tableData.value = arrayToTree(data)
   endLoading()
 }
+
+const checkedRowKeys = ref<number[]>([])
+async function handlePositiveClick() {
+  window.$message.success(`批量删除id:${checkedRowKeys.value.join(',')}`)
+}
 </script>
 
 <template>
@@ -130,10 +140,34 @@ async function getAllRoutes() {
           </template>
           新建
         </NButton>
+
+        <NButton type="primary" secondary class="ml-auto" @click="getAllRoutes">
+          <template #icon>
+            <icon-park-outline-refresh />
+          </template>
+          刷新
+        </NButton>
+
+        <NPopconfirm
+          @positive-click="handlePositiveClick"
+        >
+          <template #trigger>
+            <NButton type="error" secondary>
+              <template #icon>
+                <icon-park-outline-delete-five />
+              </template>
+              批量删除
+            </NButton>
+          </template>
+          确认删除所有选中菜单？
+        </NPopconfirm>
       </div>
       <n-data-table
+        v-model:checked-row-keys="checkedRowKeys"
         :row-key="(row:AppRoute.RowRoute) => row.id" :columns="columns" :data="tableData"
         :loading="loading"
+        size="small"
+        :scroll-x="1200"
       />
       <TableModal ref="tableModalRef" :all-routes="tableData" modal-name="菜单" />
     </n-flex>