Pre Merge pull request !4 from 严家纯/main

.gitpod.yml

@@ -3,4 +3,4 @@ ports:
     onOpen: open-preview
 tasks:
   - init: pnpm install
-    command: pnpm dev
+    command: pnpm run dev

.husky/lintstagedrc.js

@@ -1,8 +0,0 @@
-module.exports = {
-  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
-  '{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': ['prettier --write--parser json'],
-  'package.json': ['prettier --write'],
-  '*.vue': ['eslint --fix', 'prettier --write', 'stylelint --fix'],
-  '*.{scss,less,styl,html}': ['stylelint --fix', 'prettier --write'],
-  '*.md': ['prettier --write'],
-};

.vscode/extensions.json

@@ -1,6 +1,6 @@
 {
   "recommendations": [
-    "octref.vetur",
+    "johnsoncodehk.volar",
     "dbaeumer.vscode-eslint",
     "stylelint.vscode-stylelint",
     "esbenp.prettier-vscode",

index.html

@@ -8,7 +8,6 @@
       name="viewport"
       content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
     />
-
     <title><%= title %></title>
     <link rel="icon" href="/favicon.ico" />
   </head>
@@ -30,7 +29,7 @@
         }
 
         html[data-theme='dark'] .app-loading .app-loading-title {
-          color: rgba(255, 255, 255, 0.85);
+          color: rgb(255 255 255 / 85%);
         }
 
         .app-loading {
@@ -48,7 +47,6 @@
           top: 50%;
           left: 50%;
           display: flex;
-          -webkit-transform: translate3d(-50%, -50%, 0);
           transform: translate3d(-50%, -50%, 0);
           justify-content: center;
           align-items: center;
@@ -66,7 +64,7 @@
           display: flex;
           margin-top: 30px;
           font-size: 30px;
-          color: rgba(0, 0, 0, 0.85);
+          color: rgb(0 0 0 / 85%);
           justify-content: center;
           align-items: center;
         }
@@ -97,7 +95,7 @@
           height: 20px;
           background-color: #0065cc;
           border-radius: 100%;
-          opacity: 0.3;
+          opacity: 30%;
           transform: scale(0.75);
           animation: antSpinMove 1s infinite linear alternate;
           transform-origin: 50% 50%;
@@ -111,43 +109,38 @@
         .dot i:nth-child(2) {
           top: 0;
           right: 0;
-          -webkit-animation-delay: 0.4s;
           animation-delay: 0.4s;
         }
 
         .dot i:nth-child(3) {
           right: 0;
           bottom: 0;
-          -webkit-animation-delay: 0.8s;
           animation-delay: 0.8s;
         }
 
         .dot i:nth-child(4) {
           bottom: 0;
           left: 0;
-          -webkit-animation-delay: 1.2s;
           animation-delay: 1.2s;
         }
         @keyframes antRotate {
           to {
-            -webkit-transform: rotate(405deg);
             transform: rotate(405deg);
           }
         }
-        @-webkit-keyframes antRotate {
+        @keyframes antRotate {
           to {
-            -webkit-transform: rotate(405deg);
             transform: rotate(405deg);
           }
         }
         @keyframes antSpinMove {
           to {
-            opacity: 1;
+            opacity: 100%;
           }
         }
-        @-webkit-keyframes antSpinMove {
+        @keyframes antSpinMove {
           to {
-            opacity: 1;
+            opacity: 100%;
           }
         }
       </style>

package.json

@@ -23,7 +23,7 @@
     "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
     "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
     "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
-    "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
+    "lint:lint-staged": "lint-staged",
     "test:unit": "jest",
     "test:unit-coverage": "jest --coverage",
     "test:gzip": "npx http-server dist --cors --gzip -c-1",
@@ -159,5 +159,29 @@
   "homepage": "https://github.com/anncwb/vue-vben-admin",
   "engines": {
     "node": "^12 || >=14"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
+      "prettier --write--parser json"
+    ],
+    "package.json": [
+      "prettier --write"
+    ],
+    "*.vue": [
+      "eslint --fix",
+      "prettier --write",
+      "stylelint --fix"
+    ],
+    "*.{scss,less,styl,html}": [
+      "stylelint --fix",
+      "prettier --write"
+    ],
+    "*.md": [
+      "prettier --write"
+    ]
   }
 }

src/components/Table/src/components/settings/ColumnSetting.vue

@@ -43,7 +43,7 @@
           <CheckboxGroup v-model:value="checkedList" @change="onChange" ref="columnListRef">
             <template v-for="item in plainOptions" :key="item.value">
               <div :class="`${prefixCls}__check-item`" v-if="!('ifShow' in item && !item.ifShow)">
-                <DragOutlined class="table-coulmn-drag-icon" />
+                <DragOutlined class="table-column-drag-icon" />
                 <Checkbox :value="item.value">
                   {{ item.label }}
                 </Checkbox>
@@ -120,7 +120,7 @@
   import { useSortable } from '/@/hooks/web/useSortable';
   import { isFunction, isNullAndUnDef } from '/@/utils/is';
   import { getPopupContainer as getParentContainer } from '/@/utils';
-  import { omit } from 'lodash-es';
+  import { cloneDeep, omit } from 'lodash-es';
 
   interface State {
     checkAll: boolean;
@@ -250,16 +250,15 @@
 
       const indeterminate = computed(() => {
         const len = plainOptions.value.length;
-        let checkdedLen = state.checkedList.length;
+        let checkedLen = state.checkedList.length;
-        unref(checkIndex) && checkdedLen--;
+        unref(checkIndex) && checkedLen--;
-        return checkdedLen > 0 && checkdedLen < len;
+        return checkedLen > 0 && checkedLen < len;
       });
 
       // Trigger when check/uncheck a column
       function onChange(checkedList: string[]) {
-        const len = plainOptions.value.length;
+        const len = plainSortOptions.value.length;
         state.checkAll = checkedList.length === len;
-
         const sortList = unref(plainSortOptions).map((item) => item.value);
         checkedList.sort((prev, next) => {
           return sortList.indexOf(prev) - sortList.indexOf(next);
@@ -286,14 +285,14 @@
           if (!el) return;
           // Drag and drop sort
           const { initSortable } = useSortable(el, {
-            handle: '.table-coulmn-drag-icon ',
+            handle: '.table-column-drag-icon',
             onEnd: (evt) => {
               const { oldIndex, newIndex } = evt;
               if (isNullAndUnDef(oldIndex) || isNullAndUnDef(newIndex) || oldIndex === newIndex) {
                 return;
               }
               // Sort column
-              const columns = getColumns();
+              const columns = cloneDeep(plainSortOptions.value);
 
               if (oldIndex > newIndex) {
                 columns.splice(newIndex, 0, columns[oldIndex]);
@@ -304,7 +303,6 @@
               }
 
               plainSortOptions.value = columns;
-              plainOptions.value = columns;
               setColumns(columns);
             },
           });
@@ -347,7 +345,7 @@
 
       function setColumns(columns: BasicColumn[] | string[]) {
         table.setColumns(columns);
-        const data: ColumnChangeParam[] = unref(plainOptions).map((col) => {
+        const data: ColumnChangeParam[] = unref(plainSortOptions).map((col) => {
           const visible =
             columns.findIndex(
               (c: BasicColumn | string) =>
@@ -390,7 +388,7 @@
 <style lang="less">
   @prefix-cls: ~'@{namespace}-basic-column-setting';
 
-  .table-coulmn-drag-icon {
+  .table-column-drag-icon {
     margin: 0 5px;
     cursor: move;
   }

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

@@ -216,25 +216,17 @@ export function useColumns(
       const columnKeys = columns as string[];
       const newColumns: BasicColumn[] = [];
       cacheColumns.forEach((item) => {
-        if (columnKeys.includes(item.dataIndex! || (item.key as string))) {
+        newColumns.push({
-          newColumns.push({
+          ...item,
-            ...item,
+          defaultHidden: !columnKeys.includes(item.dataIndex! || (item.key as string)),
-            defaultHidden: false,
+        });
-          });
-        } else {
-          newColumns.push({
-            ...item,
-            defaultHidden: true,
-          });
-        }
       });
-
       // Sort according to another array
       if (!isEqual(cacheKeys, columns)) {
         newColumns.sort((prev, next) => {
           return (
-            cacheKeys.indexOf(prev.dataIndex as string) -
+            columnKeys.indexOf(prev.dataIndex as string) -
-            cacheKeys.indexOf(next.dataIndex as string)
+            columnKeys.indexOf(next.dataIndex as string)
           );
         });
       }

src/components/Upload/src/UploadModal.vue

@@ -54,7 +54,7 @@
   import { basicProps } from './props';
   import { createTableColumns, createActionColumn } from './data';
   // utils
-  import { checkFileType, checkImgType, getBase64WithFile } from './helper';
+  import { checkImgType, getBase64WithFile } from './helper';
   import { buildUUID } from '/@/utils/uuid';
   import { isFunction } from '/@/utils/is';
   import { warn } from '/@/utils/log';
@@ -84,7 +84,7 @@
       const { t } = useI18n();
       const [register, { closeModal }] = useModalInner();
 
-      const { getAccept, getStringAccept, getHelpText } = useUploadType({
+      const { getStringAccept, getHelpText } = useUploadType({
         acceptRef: accept,
         helpTextRef: helpText,
         maxNumberRef: maxNumber,
@@ -124,18 +124,12 @@
       function beforeUpload(file: File) {
         const { size, name } = file;
         const { maxSize } = props;
-        const accept = unref(getAccept);
         // 设置最大值，则判断
         if (maxSize && file.size / 1024 / 1024 >= maxSize) {
           createMessage.error(t('component.upload.maxSizeMultiple', [maxSize]));
           return false;
         }
 
-        // 设置类型,则判断
-        if (accept.length > 0 && !checkFileType(file, accept)) {
-          createMessage.error!(t('component.upload.acceptUpload', [accept.join(',')]));
-          return false;
-        }
         const commonItem = {
           uuid: buildUUID(),
           file,

src/layouts/default/header/components/Breadcrumb.vue

@@ -101,8 +101,8 @@
           if (!meta) {
             return !!name;
           }
-          const { title, hideBreadcrumb } = meta;
+          const { title, hideBreadcrumb, hideMenu } = meta;
-          if (!title || hideBreadcrumb) {
+          if (!title || hideBreadcrumb || hideMenu) {
             return false;
           }
           return true;

src/utils/dateUtil.ts

@@ -4,7 +4,7 @@
 import dayjs from 'dayjs';
 
 const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
-const DATE_FORMAT = 'YYYY-MM-DD ';
+const DATE_FORMAT = 'YYYY-MM-DD';
 
 export function formatToDateTime(
   date: dayjs.Dayjs | undefined = undefined,

src/utils/file/base64Conver.ts

@@ -5,7 +5,7 @@ export function dataURLtoBlob(base64Buf: string): Blob {
   const arr = base64Buf.split(',');
   const typeItem = arr[0];
   const mime = typeItem.match(/:(.*?);/)![1];
-  const bstr = atob(arr[1]);
+  const bstr = window.atob(arr[1]);
   let n = bstr.length;
   const u8arr = new Uint8Array(n);
   while (n--) {

stylelint.config.js

@@ -71,9 +71,10 @@ module.exports = {
   ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
   overrides: [
     {
-      files: ['*.vue', '**/*.vue'],
+      files: ['*.vue', '**/*.vue', '*.html', '**/*.html'],
       extends: ['stylelint-config-recommended', 'stylelint-config-html'],
       rules: {
+        'keyframes-name-pattern': null,
         'selector-pseudo-class-no-unknown': [
           true,
           {

windi.config.ts

@@ -27,7 +27,7 @@ export default defineConfig({
  * Used for animation when the element is displayed
  * @param maxOutput The larger the maxOutput output, the larger the generated css volume
  */
-function createEnterPlugin(maxOutput = 7) {
+function createEnterPlugin(maxOutput = 6) {
   const createCss = (index: number, d = 'x') => {
     const upd = d.toUpperCase();
     return {