fix bug

添加锁屏时enter键解除锁屏

CHANGELOG.md

@@ -1,3 +1,15 @@
+# 1.5.3 (2021-08-09)
+### 🐛 Bug Fixes
+- 修复顶部菜单，选中联动
+- 修复混合菜单模式，切换其他模式菜单未重置
+- 实例基础列表，和表格组件实例，开启横向滚动特性
+- `naiveui` 升级成最新版
+
+- ### ✨ Features
+- table组件，默认开启 `ellipsis` 特性
+
+
+
 # 1.5.2 (2021-08-06)
 ### 🐛 Bug Fixes
 - 修复已知bug

README.md

@@ -12,13 +12,13 @@
 
 
 ## 在线预览
-- [naive-ui-admin](https://jekip.github.io)
+- [naive-ui-admin](https://naive-ui-admin.vercel.app)
 
 账号：admin，密码：123456（随意）
 
 ## 文档
 
-[文档地址](https://jekip.github.io/docs/) 
+[文档地址](https://naive-ui-admin-docs.vercel.app) 
 
 ## 准备
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui-admin",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "author": {
     "name": "Ahjung",
     "email": "735878602@qq.com",
@@ -38,7 +38,7 @@
     "makeit-captcha": "^1.2.5",
     "mitt": "^2.1.0",
     "mockjs": "^1.1.0",
-    "naive-ui": "^2.16.0",
+    "naive-ui": "^2.16.2",
     "pinia": "^2.0.0-beta.3",
     "qs": "^6.10.1",
     "vfonts": "^0.1.0",

src/components/Lockscreen/Lockscreen.vue

@@ -49,6 +49,7 @@
           type="password"
           autofocus
           v-model:value="loginParams.password"
+          @keyup.enter="onLogin"
           placeholder="请输入登录密码"
         >
           <template #suffix>

src/components/Table/src/Table.vue

@@ -233,9 +233,6 @@
         getCacheColumns,
         setCacheColumnsField,
         emit,
-        getSize: () => {
-          return unref(getBindValues).size;
-        },
       };
 
       const getCanResize = computed(() => {
@@ -288,7 +285,6 @@
         densitySelect,
         updatePage,
         updatePageSize,
-        updateCheckedRowKeys,
         pagination,
         tableAction,
       };

src/components/Table/src/hooks/useColumns.ts

@@ -52,6 +52,8 @@ export function useColumns(propsRef: ComputedRef<BasicTableProps>) {
         return hasPermission(column.auth) && isIfShow(column);
       })
       .map((column) => {
+        //默认 ellipsis 为true
+        column.ellipsis = typeof column.ellipsis === 'undefined' ? { tooltip: true } : false;
         const { edit } = column;
         if (edit) {
           column.render = renderEditCell(column);

src/layout/components/Header/ProjectSetting.vue

@@ -278,11 +278,7 @@
 
       function togNavMode(mode) {
         settingStore.navMode = mode;
-        // if (mode === 'header-dark') {
+        settingStore.menuSetting.mixMenu = false;
-        //   settingStore.setNavTheme('dark');
-        // } else {
-        //   settingStore.setNavTheme('light');
-        // }
       }
 
       return {

src/layout/components/Menu/index.vue

@@ -20,6 +20,7 @@
   import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
   import { generatorMenu, generatorMenuMix } from '@/utils';
   import { useProjectSettingStore } from '@/store/modules/projectSetting';
+  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
 
   export default defineComponent({
     name: 'Menu',
@@ -40,7 +41,8 @@
         default: 'left',
       },
     },
-    setup(props) {
+    emits: ['update:collapsed'],
+    setup(props, { emit }) {
       // 当前路由
       const currentRoute = useRoute();
       const router = useRouter();
@@ -50,6 +52,10 @@
       const selectedKeys = ref<string>(currentRoute.name as string);
       const headerMenuSelectKey = ref<string>('');
 
+      const { getNavMode } = useProjectSetting();
+
+      const navMode = getNavMode;
+
       // 获取当前打开的子菜单
       const matched = currentRoute.matched;
 
@@ -64,7 +70,10 @@
       });
 
       const getSelectedKeys = computed(() => {
-        return props.location === 'left' ? unref(selectedKeys) : unref(headerMenuSelectKey);
+        let location = props.location;
+        return location === 'left' || (location === 'header' && unref(navMode) === 'horizontal')
+          ? unref(selectedKeys)
+          : unref(headerMenuSelectKey);
       });
 
       // 监听分割菜单
@@ -72,6 +81,9 @@
         () => settingStore.menuSetting.mixMenu,
         () => {
           updateMenu();
+          if (props.collapsed) {
+            emit('update:collapsed', !props.collapsed);
+          }
         }
       );
 
@@ -92,6 +104,7 @@
           const matched = currentRoute.matched;
           state.openKeys = matched.map((item) => item.name);
           const activeMenu: string = (currentRoute.meta?.activeMenu as string) || '';
+          console.log(currentRoute);
           selectedKeys.value = activeMenu ? (activeMenu as string) : (currentRoute.name as string);
         }
       );

src/layout/components/TagsView/index.vue

@@ -59,7 +59,7 @@
           placement="bottom-end"
           :options="TabsMenuOptions"
         >
-          <div class="tabs-close-btn" @click.prevent>
+          <div class="tabs-close-btn">
             <n-icon size="16" color="#515a6e">
               <DownOutlined />
             </n-icon>
@@ -371,6 +371,7 @@
             break;
         }
         updateNavScroll();
+        state.showDropdown = false;
       };
 
       function getCurrentScrollOffset() {

src/router/modules/docs.ts

@@ -6,7 +6,7 @@ import { renderIcon } from '@/utils/index';
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/external',
-    name: 'https://jekip.github.io/docs/',
+    name: 'https://naive-ui-admin-docs.vercel.app',
     component: Layout,
     meta: {
       title: '项目文档',

src/utils/index.ts

@@ -81,7 +81,7 @@ export function generatorMenuMix(routerMap: Array<any>, routerName: string, loca
  * 递归组装子菜单
  * */
 export function getChildrenRouter(routerMap: Array<any>) {
-  return routerMap.map((item) => {
+  return filterRouter(routerMap).map((item) => {
     const isRoot = isRootRouter(item);
     const info = isRoot ? item.children[0] : item;
     const currentMenu = {

src/views/about/index.vue

@@ -22,12 +22,16 @@
         </n-descriptions-item>
         <n-descriptions-item label="文档地址">
           <div class="flex items-center">
-            <a href="https://jekip.github.io/docs/" class="py-2" target="_blank">查看文档地址</a>
+            <a href="https://naive-ui-admin-docs.vercel.app" class="py-2" target="_blank"
+              >查看文档地址</a
+            >
           </div>
         </n-descriptions-item>
         <n-descriptions-item label="预览地址">
           <div class="flex items-center">
-            <a href="https://jekip.github.io/" class="py-2" target="_blank">查看预览地址</a>
+            <a href="https://naive-ui-admin.vercel.app" class="py-2" target="_blank"
+              >查看预览地址</a
+            >
           </div>
         </n-descriptions-item>
         <n-descriptions-item label="Github">

src/views/comp/table/CellColumns.ts

@@ -5,10 +5,12 @@ export const columns = [
   {
     title: 'id',
     key: 'id',
+    width: 100,
   },
   {
     title: '编码',
     key: 'no',
+    width: 100,
   },
   {
     title: '名称',
@@ -22,6 +24,7 @@ export const columns = [
   {
     title: '头像',
     key: 'avatar',
+    width: 100,
     render(row) {
       return h(NAvatar, {
         size: 48,
@@ -47,29 +50,33 @@ export const columns = [
     },
     edit: true,
     width: 200,
+    ellipsis: false,
   },
   {
     title: '开始日期',
     key: 'beginTime',
     edit: true,
-    width: 250,
+    width: 160,
     editComponent: 'NDatePicker',
     editComponentProps: {
       type: 'datetime',
       format: 'yyyy-MM-dd HH:mm:ss',
     },
+    ellipsis: false,
   },
   {
     title: '结束日期',
     key: 'endTime',
-    width: 200,
+    width: 160,
   },
   {
     title: '创建时间',
     key: 'date',
+    width: 160,
   },
   {
     title: '停留时间',
     key: 'time',
+    width: 80,
   },
 ];

src/views/comp/table/basic.vue

@@ -8,6 +8,7 @@
       :row-key="(row) => row.id"
       ref="actionRef"
       :actionColumn="actionColumn"
+      :scroll-x="1360"
       @update:checked-row-keys="onCheckedRow"
     >
       <template #toolbar>

src/views/comp/table/basicColumns.ts

@@ -5,19 +5,22 @@ export const columns = [
   {
     title: 'id',
     key: 'id',
+    width: 100,
   },
   {
     title: '编码',
     key: 'no',
+    width: 100,
   },
   {
     title: '名称',
     key: 'name',
-    width: 200,
+    width: 100,
   },
   {
     title: '头像',
     key: 'avatar',
+    width: 100,
     render(row) {
       return h(NAvatar, {
         size: 48,
@@ -28,21 +31,22 @@ export const columns = [
   {
     title: '地址',
     key: 'address',
-    width: 200,
+    width: 150,
   },
   {
     title: '开始日期',
     key: 'beginTime',
-    width: 200,
+    width: 160,
   },
   {
     title: '结束日期',
     key: 'endTime',
-    width: 200,
+    width: 160,
   },
   {
     title: '状态',
     key: 'status',
+    width: 100,
     render(row) {
       return h(
         NTag,
@@ -58,9 +62,11 @@ export const columns = [
   {
     title: '创建时间',
     key: 'date',
+    width: 160,
   },
   {
     title: '停留时间',
     key: 'time',
+    width: 80,
   },
 ];

src/views/comp/table/editCell.vue

@@ -7,10 +7,10 @@
       :request="loadDataTable"
       :row-key="(row) => row.id"
       ref="actionRef"
-      :actionColumn="actionColumn"
       @edit-end="editEnd"
       @edit-change="onEditChange"
       @update:checked-row-keys="onCheckedRow"
+      :scroll-x="1360"
     >
       <template #toolbar>
         <n-button type="primary" @click="reloadTable">刷新数据</n-button>
@@ -35,19 +35,6 @@
           pageSize: 5,
           name: 'xiaoMa',
         },
-        actionColumn: {
-          width: 150,
-          title: '操作',
-          key: 'action',
-          fixed: 'right',
-          align: 'center',
-          render(record) {
-            return h(TableAction, {
-              style: 'button',
-              actions: createActions(record),
-            });
-          },
-        },
       });
 
       function handleEdit(record) {

src/views/comp/table/editRow.vue

@@ -11,6 +11,7 @@
       @edit-end="editEnd"
       @edit-change="onEditChange"
       @update:checked-row-keys="onCheckedRow"
+      :scroll-x="1510"
     >
       <template #toolbar>
         <n-button type="primary" @click="reloadTable">刷新数据</n-button>

src/views/comp/table/rowColumns.ts

@@ -5,10 +5,12 @@ export const columns = [
   {
     title: 'id',
     key: 'id',
+    width: 100,
   },
   {
     title: '编码',
     key: 'no',
+    width: 100,
   },
   {
     title: '名称',
@@ -23,6 +25,7 @@ export const columns = [
   {
     title: '头像',
     key: 'avatar',
+    width: 100,
     render(row) {
       return h(NAvatar, {
         size: 48,
@@ -49,23 +52,25 @@ export const columns = [
     },
     edit: true,
     width: 200,
+    ellipsis: false,
   },
   {
     title: '开始日期',
     key: 'beginTime',
     editRow: true,
     edit: true,
-    width: 250,
+    width: 160,
     editComponent: 'NDatePicker',
     editComponentProps: {
       type: 'datetime',
       format: 'yyyy-MM-dd HH:mm:ss',
     },
+    ellipsis: false,
   },
   {
     title: '结束日期',
     key: 'endTime',
-    width: 200,
+    width: 160,
   },
   {
     title: '状态',
@@ -81,9 +86,11 @@ export const columns = [
   {
     title: '创建时间',
     key: 'date',
+    width: 160,
   },
   {
     title: '停留时间',
     key: 'time',
+    width: 80,
   },
 ];

src/views/dashboard/workplace/workplace.vue

@@ -33,14 +33,7 @@
         </n-grid>
       </n-card>
     </div>
-    <n-grid
+    <n-grid class="mt-4" cols="2 s:1 m:1 l:2 xl:2 2xl:2" responsive="screen" :x-gap="12" :y-gap="9">
-      class="mt-4"
-      cols="2 s:1 m:1 l:2 xl:2 2xl:2"
-      responsive="screen"
-      :x-gap="12"
-      :y-gap="9"
-      :cols="2"
-    >
       <n-gi>
         <n-card
           :segmented="{ content: 'hard' }"
@@ -75,7 +68,7 @@
             >
               <div class="flex">
                 <span>
-                  <n-icon size="30" style="color: #42b983">
+                  <n-icon size="30" color="#42b983">
                     <LogoVue />
                   </n-icon>
                 </span>
@@ -91,7 +84,7 @@
             >
               <div class="flex">
                 <span>
-                  <n-icon size="30" style="color: #e44c27">
+                  <n-icon size="30" color="#e44c27">
                     <Html5Outlined />
                   </n-icon>
                 </span>
@@ -107,7 +100,7 @@
             >
               <div class="flex">
                 <span>
-                  <n-icon size="30" style="color: #dd0031">
+                  <n-icon size="30" color="#dd0031">
                     <LogoAngular />
                   </n-icon>
                 </span>
@@ -123,7 +116,7 @@
             >
               <div class="flex">
                 <span>
-                  <n-icon size="30" style="color: #61dafb">
+                  <n-icon size="30" color="#61dafb">
                     <LogoReact />
                   </n-icon>
                 </span>
@@ -238,7 +231,7 @@
             <n-card size="small" class="cursor-pointer project-card-item" hoverable>
               <div class="flex flex-col justify-center text-gray-500">
                 <span class="text-center">
-                  <n-icon size="30" style="color: #68c755">
+                  <n-icon size="30" color="#68c755">
                     <DashboardOutlined />
                   </n-icon>
                 </span>
@@ -248,7 +241,7 @@
             <n-card size="small" class="cursor-pointer project-card-item" hoverable>
               <div class="flex flex-col justify-center text-gray-500">
                 <span class="text-center">
-                  <n-icon size="30" style="color: #fab251">
+                  <n-icon size="30" color="#fab251">
                     <ProfileOutlined />
                   </n-icon>
                 </span>
@@ -258,7 +251,7 @@
             <n-card size="small" class="cursor-pointer project-card-item" hoverable>
               <div class="flex flex-col justify-center text-gray-500">
                 <span class="text-center">
-                  <n-icon size="30" style="color: #1890ff">
+                  <n-icon size="30" color="#1890ff">
                     <FileProtectOutlined />
                   </n-icon>
                 </span>
@@ -268,7 +261,7 @@
             <n-card size="small" class="cursor-pointer project-card-item" hoverable>
               <div class="flex flex-col justify-center text-gray-500">
                 <span class="text-center">
-                  <n-icon size="30" style="color: #f06b96">
+                  <n-icon size="30" color="#f06b96">
                     <ApartmentOutlined />
                   </n-icon>
                 </span>
@@ -278,7 +271,7 @@
             <n-card size="small" class="cursor-pointer project-card-item" hoverable>
               <div class="flex flex-col justify-center text-gray-500">
                 <span class="text-center">
-                  <n-icon size="30" style="color: #7238d1">
+                  <n-icon size="30" color="#7238d1">
                     <SettingOutlined />
                   </n-icon>
                 </span>

src/views/list/basicList/columns.ts

@@ -5,14 +5,17 @@ export const columns = [
   {
     title: 'id',
     key: 'id',
+    width: 100,
   },
   {
     title: '名称',
     key: 'name',
+    width: 100,
   },
   {
     title: '头像',
     key: 'avatar',
+    width: 100,
     render(row) {
       return h(NAvatar, {
         size: 48,
@@ -27,48 +30,21 @@ export const columns = [
     ifShow: (_column) => {
       return true; // 根据业务控制是否显示
     },
+    width: 150,
   },
   {
     title: '开始日期',
     key: 'beginTime',
+    width: 160,
   },
   {
     title: '结束日期',
     key: 'endTime',
+    width: 160,
   },
   {
     title: '创建时间',
     key: 'date',
+    width: 100,
   },
-  // {
-  //     title: '操作',
-  //     key: 'actions',
-  //     width: 150,
-  //     //简单写一下例子，不建议这么写，过段时间，这里封二次封装
-  //     render() {
-  //         return [
-  //             h(
-  //                 NButton,
-  //                 {
-  //                     size: 'small',
-  //                     type: 'error',
-  //                     style: 'margin-right:10px',
-  //                     onClick: () => {
-  //                     }
-  //                 },
-  //                 { default: () => '删除' }
-  //             ),
-  //             h(
-  //                 NButton,
-  //                 {
-  //                     size: 'small',
-  //                     onClick: () => {
-  //
-  //                     }
-  //                 },
-  //                 { default: () => '编辑' }
-  //             )
-  //         ]
-  //     }
-  // }
 ];

src/views/list/basicList/index.vue

@@ -13,6 +13,7 @@
       ref="actionRef"
       :actionColumn="actionColumn"
       @update:checked-row-keys="onCheckedRow"
+      :scroll-x="1010"
     >
       <template #tableTitle>
         <n-button type="primary" @click="addTable">
@@ -230,7 +231,7 @@
           name: 'xiaoMa',
         },
         actionColumn: {
-          width: 250,
+          width: 140,
           title: '操作',
           key: 'action',
           fixed: 'right',

tsconfig.json

@@ -16,18 +16,9 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "experimentalDecorators": true,
-    "lib": [
+    "lib": ["dom", "esnext"],
-      "dom",
+    "types": ["vite/client", "jest"],
-      "esnext"
+    "typeRoots": ["./node_modules/@types/", "./types"],
-    ],
-    "types": [
-      "vite/client",
-      "jest"
-    ],
-    "typeRoots": [
-      "./node_modules/@types/",
-      "./types"
-    ],
     "noImplicitAny": false,
     "skipLibCheck": true,
     "paths": {
@@ -40,7 +31,6 @@
     "src/**/*.d.ts",
     "src/**/*.tsx",
     "src/**/*.vue",
-    "types/*.ts",
     "types/**/*.d.ts",
     "types/**/*.ts",
     "build/**/*.ts",
@@ -48,9 +38,5 @@
     "mock/**/*.ts",
     "vite.config.ts"
   ],
-  "exclude": [
+  "exclude": ["node_modules", "dist", "**/*.js"]
-    "node_modules",
-    "dist",
-    "**/*.js"
-  ]
 }

yarn.lock

@@ -4999,10 +4999,10 @@ mute-stream@0.0.7:
   resolved "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
   integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=
 
-naive-ui@^2.16.0:
+naive-ui@^2.16.2:
-  version "2.16.0"
+  version "2.16.2"
-  resolved "https://registry.nlark.com/naive-ui/download/naive-ui-2.16.0.tgz#42d8b6120ab061e46a316ac074c5b788139cd744"
+  resolved "https://registry.nlark.com/naive-ui/download/naive-ui-2.16.2.tgz#f7d4b84f15529bc8f367644edcdb2c14c7912372"
-  integrity sha1-Qti2EgqwYeRqMWrAdMW3iBOc10Q=
+  integrity sha1-99S4TxVSm8jzZ2RO3NssFMeRI3I=
   dependencies:
     "@css-render/plugin-bem" "^0.15.4"
     "@css-render/vue3-ssr" "^0.15.4"