1.7.0

CHANGELOG.md

@@ -1,5 +1,17 @@
 # CHANGELOG
 
+## 1.7.0 (2022-02-04)
+
+### 🐛 Bug Fixes
+- 移除 `登录页面` 滑动验证组件
+- 修复 `BasicUpload` 组件，回显问题
+- 修复 `ts类型` 配置缺陷
+- 修复 `登录页面` message 交互缺陷
+- 修复 `表格编辑` 时间格式化异常 [#92](https://github.com/jekip/naive-ui-admin/issues/92)
+
+- ### ✨ Features
+- 依赖升级
+
 ## 1.6.1 (2022-01-06)
 
 ### 🐛 Bug Fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui-admin",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "author": {
     "name": "Ahjung",
     "email": "735878602@qq.com",
@@ -28,71 +28,70 @@
     "@vicons/antd": "^0.10.0",
     "@vicons/ionicons5": "^0.10.0",
     "@vueup/vue-quill": "^1.0.0-beta.7",
-    "@vueuse/core": "^5.0.3",
-    "axios": "^0.21.1",
-    "blueimp-md5": "^2.18.0",
-    "date-fns": "^2.23.0",
-    "echarts": "^5.1.2",
-    "element-resize-detector": "^1.2.3",
+    "@vueuse/core": "^5.3.0",
+    "axios": "^0.21.4",
+    "blueimp-md5": "^2.19.0",
+    "date-fns": "^2.28.0",
+    "echarts": "^5.3.0",
+    "element-resize-detector": "^1.2.4",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
-    "makeit-captcha": "^1.2.5",
     "mitt": "^2.1.0",
     "mockjs": "^1.1.0",
-    "naive-ui": "^2.23.2",
-    "pinia": "^2.0.0-rc.4",
-    "qs": "^6.10.1",
+    "naive-ui": "^2.25.2",
+    "pinia": "^2.0.11",
+    "qs": "^6.10.3",
     "vfonts": "^0.1.0",
-    "vue": "^3.2.16",
-    "vue-router": "^4.0.11",
-    "vue-types": "^4.1.0",
-    "vuedraggable": "^4.0.3"
+    "vue": "^3.2.31",
+    "vue-router": "^4.0.12",
+    "vue-types": "^4.1.1",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^12.1.4",
     "@commitlint/config-conventional": "^12.1.4",
-    "@types/lodash": "^4.14.170",
-    "@types/node": "^15.12.2",
-    "@typescript-eslint/eslint-plugin": "^4.31.2",
-    "@typescript-eslint/parser": "^4.31.2",
-    "@vitejs/plugin-vue": "^1.9.1",
-    "@vitejs/plugin-vue-jsx": "^1.1.8",
-    "@vue/compiler-sfc": "^3.2.16",
+    "@types/lodash": "^4.14.178",
+    "@types/node": "^15.14.9",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "@vitejs/plugin-vue": "^1.10.2",
+    "@vitejs/plugin-vue-jsx": "^1.3.5",
+    "@vue/compiler-sfc": "^3.2.31",
     "@vue/eslint-config-typescript": "^7.0.0",
-    "autoprefixer": "^10.3.1",
+    "autoprefixer": "^10.4.2",
     "commitizen": "^4.2.4",
-    "core-js": "^3.14.0",
+    "core-js": "^3.21.0",
     "dotenv": "^10.0.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-define-config": "1.1.2",
-    "eslint-plugin-jest": "^24.4.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-vue": "^7.18.0",
+    "eslint-plugin-jest": "^24.7.0",
+    "eslint-plugin-prettier": "^3.4.1",
+    "eslint-plugin-vue": "^7.20.0",
     "esno": "^0.7.3",
-    "gh-pages": "^3.2.0",
+    "gh-pages": "^3.2.3",
     "husky": "^6.0.0",
-    "jest": "^27.0.6",
-    "less": "^4.1.1",
-    "less-loader": "^9.0.0",
-    "lint-staged": "^11.0.0",
-    "postcss": "^8.3.5",
-    "prettier": "^2.3.1",
-    "pretty-quick": "^3.1.0",
+    "jest": "^27.5.1",
+    "less": "^4.1.2",
+    "less-loader": "^9.1.0",
+    "lint-staged": "^11.2.6",
+    "postcss": "^8.4.6",
+    "prettier": "^2.5.1",
+    "pretty-quick": "^3.1.3",
     "rimraf": "^3.0.2",
     "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^22.0.0",
     "stylelint-order": "^4.1.0",
-    "stylelint-scss": "^3.19.0",
-    "tailwindcss": "^2.2.7",
-    "typescript": "^4.4.3",
-    "unplugin-vue-components": "^0.17.2",
-    "vite": "^2.5.10",
-    "vite-plugin-compression": "^0.3.1",
-    "vite-plugin-html": "^2.0.7",
-    "vite-plugin-mock": "^2.9.3",
-    "vite-plugin-style-import": "^1.0.1",
+    "stylelint-scss": "^3.21.0",
+    "tailwindcss": "^2.2.19",
+    "typescript": "^4.5.5",
+    "unplugin-vue-components": "^0.17.18",
+    "vite": "^2.8.1",
+    "vite-plugin-compression": "^0.3.6",
+    "vite-plugin-html": "^2.1.2",
+    "vite-plugin-mock": "^2.9.6",
+    "vite-plugin-style-import": "^1.4.1",
     "vue-eslint-parser": "^7.11.0"
   },
   "lint-staged": {

src/components/Table/src/components/editable/EditableCell.vue

@@ -11,7 +11,6 @@
         <CellComponent
           v-bind="getComponentProps"
           :component="getComponent"
-          :style="getWrapperStyle"
           :popoverVisible="getRuleVisible"
           :ruleMessage="ruleMessage"
           :rule="getRule"
@@ -33,7 +32,7 @@
   </div>
 </template>
 <script lang="ts">
-  import type { CSSProperties, PropType } from 'vue';
+  import type { PropType } from 'vue';
   import type { BasicColumn } from '../../types/table';
   import type { EditRecordRow } from './index';
 
@@ -51,7 +50,8 @@
   import { set, omit } from 'lodash-es';
   import { EventEnum } from '@/components/Table/src/componentMap';
 
-  import { milliseconds, format } from 'date-fns';
+  import { parseISO, format } from 'date-fns';
+  import { Fn, LabelValueOptions } from '/#/index';
 
   export default defineComponent({
     name: 'EditableCell',
@@ -105,16 +105,28 @@
 
         const isCheckValue = unref(getIsCheckComp);
 
-        const valueField = isCheckValue ? 'checked' : 'value';
+        let valueField = isCheckValue ? 'checked' : 'value';
         const val = unref(currentValueRef);
 
         let value = isCheckValue ? (isNumber(val) && isBoolean(val) ? val : !!val) : val;
 
-        if (isString(value) && component === 'NDatePicker') {
-          value = milliseconds(value as Duration);
-        } else if (isArray(value) && component === 'NDatePicker') {
-          value = value.map((item) => milliseconds(item));
+        //TODO 特殊处理 NDatePicker 可能要根据项目 规范自行调整代码
+        if (component === 'NDatePicker') {
+          if (isString(value)) {
+            if (compProps.valueFormat) {
+              valueField = 'formatted-value';
+            } else {
+              value = parseISO(value as any).getTime();
+            }
+          } else if (isArray(value)) {
+            if (compProps.valueFormat) {
+              valueField = 'formatted-value';
+            } else {
+              value = value.map((item) => parseISO(item).getTime());
+            }
+          }
         }
+
         const onEvent: any = editComponent ? EventEnum[editComponent] : undefined;
 
         return {
@@ -146,15 +158,6 @@
         return option?.label ?? value;
       });
 
-      const getWrapperStyle = computed((): CSSProperties => {
-        // if (unref(getIsCheckComp) || unref(getRowEditable)) {
-        //   return {};
-        // }
-        return {
-          width: 'calc(100% - 48px)',
-        };
-      });
-
       const getWrapperClass = computed(() => {
         const { align = 'center' } = props.column;
         return `edit-cell-align-${align}`;
@@ -188,6 +191,7 @@
 
       async function handleChange(e: any) {
         const component = unref(getComponent);
+        const compProps = props.column?.editComponentProps ?? {};
         if (!e) {
           currentValueRef.value = e;
         } else if (e?.target && Reflect.has(e.target, 'value')) {
@@ -198,10 +202,20 @@
           currentValueRef.value = e;
         }
 
-        //TODO 根据组件格式化值
-        // if (component === 'NDatePicker') {
-        //   currentValueRef.value = format(currentValueRef.value,'yyyy-MM-dd HH:mm:ss');
-        // }
+        //TODO 特殊处理 NDatePicker 可能要根据项目 规范自行调整代码
+        if (component === 'NDatePicker') {
+          if (isNumber(currentValueRef.value)) {
+            if (compProps.valueFormat) {
+              currentValueRef.value = format(currentValueRef.value, compProps.valueFormat);
+            }
+          } else if (isArray(currentValueRef.value)) {
+            if (compProps.valueFormat) {
+              currentValueRef.value = currentValueRef.value.map((item) => {
+                format(item, compProps.valueFormat);
+              });
+            }
+          }
+        }
 
         const onChange = props.column?.editComponentProps?.onChange;
         if (onChange && isFunction(onChange)) onChange(...arguments);
@@ -355,7 +369,6 @@
      getRuleVisible,
      getComponentProps,
      handleOptionsChange,
-     getWrapperStyle,
      getWrapperClass,
      getRowEditable,
      getValues,

src/components/Upload/src/BasicUpload.vue

@@ -14,10 +14,10 @@
               <img :src="item" />
             </div>
             <div class="img-box-actions">
-              <n-icon size="18" class="action-icon mx-2" @click="preview(item)">
+              <n-icon size="18" class="mx-2 action-icon" @click="preview(item)">
                 <EyeOutlined />
               </n-icon>
-              <n-icon size="18" class="action-icon mx-2" @click="remove(index)">
+              <n-icon size="18" class="mx-2 action-icon" @click="remove(index)">
                 <DeleteOutlined />
               </n-icon>
             </div>
@@ -36,7 +36,7 @@
             @before-upload="beforeUpload"
             @finish="finish"
           >
-            <div class="flex justify-center flex-col">
+            <div class="flex flex-col justify-center">
               <n-icon size="18" class="m-auto">
                 <PlusOutlined />
               </n-icon>
@@ -68,7 +68,7 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, toRefs, reactive, computed } from 'vue';
+  import { defineComponent, toRefs, reactive, computed, watch } from 'vue';
   import { EyeOutlined, DeleteOutlined, PlusOutlined } from '@vicons/antd';
   import { basicProps } from './props';
   import { useMessage, useDialog } from 'naive-ui';
@@ -106,11 +106,14 @@
       });
 
       //赋值默认图片显示
-      if (props.value.length) {
-        state.imgList = props.value.map((item) => {
-          return getImgUrl(item);
-        });
-      }
+      watch(
+        () => props.value,
+        () => {
+          imgList.value = props.value.map((item) => {
+            return getImgUrl(item);
+          });
+        }
+      );
 
       //预览
       function preview(url: string) {

src/main.ts

@@ -3,8 +3,6 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import router, { setupRouter } from './router';
 import { setupStore } from '@/store';
-import MakeitCaptcha from 'makeit-captcha';
-import 'makeit-captcha/dist/captcha.min.css';
 import { setupNaive, setupDirectives } from '@/plugins';
 import { AppProvider } from '@/components/Application';
 
@@ -13,8 +11,6 @@ async function bootstrap() {
 
   const app = createApp(App);
 
-  app.use(MakeitCaptcha);
-
   // 注册全局常用的 naive-ui 组件
   setupNaive(app);
 

src/views/comp/table/CellColumns.ts

@@ -61,6 +61,7 @@ export const columns = [
     editComponentProps: {
       type: 'datetime',
       format: 'yyyy-MM-dd HH:mm:ss',
+      valueFormat: 'yyyy-MM-dd HH:mm:ss',
     },
     ellipsis: false,
   },

src/views/comp/table/rowColumns.ts

@@ -64,6 +64,7 @@ export const columns = [
     editComponentProps: {
       type: 'datetime',
       format: 'yyyy-MM-dd HH:mm:ss',
+      valueFormat: 'yyyy-MM-dd HH:mm:ss',
     },
     ellipsis: false,
   },

src/views/login/index.vue

@@ -39,11 +39,6 @@
               </template>
             </n-input>
           </n-form-item>
-          <n-form-item path="isCaptcha">
-            <div class="w-full">
-              <mi-captcha width="384" theme-color="#2d8cf0" :logo="logo" @success="onAuthCode" />
-            </div>
-          </n-form-item>
           <n-form-item class="default-color">
             <div class="flex justify-between">
               <div class="flex-initial">
@@ -95,8 +90,8 @@
   import { useUserStore } from '@/store/modules/user';
   import { useMessage } from 'naive-ui';
   import { ResultEnum } from '@/enums/httpEnum';
-  import logo from '@/assets/images/logo.png';
   import { PersonOutline, LockClosedOutline, LogoGithub, LogoFacebook } from '@vicons/ionicons5';
+  import { PageEnum } from '@/enums/pageEnum';
 
   interface FormState {
     username: string;
@@ -107,23 +102,17 @@
   const message = useMessage();
   const loading = ref(false);
   const autoLogin = ref(true);
+  const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME;
 
   const formInline = reactive({
     username: 'admin',
     password: '123456',
-    isCaptcha: false,
+    isCaptcha: true,
   });
 
   const rules = {
     username: { required: true, message: '请输入用户名', trigger: 'blur' },
     password: { required: true, message: '请输入密码', trigger: 'blur' },
-    isCaptcha: {
-      required: true,
-      type: 'boolean',
-      trigger: 'change',
-      message: '请点击按钮进行验证码校验',
-      validator: (_, value) => value === true,
-    },
   };
 
   const userStore = useUserStore();
@@ -144,28 +133,26 @@
           password,
         };
 
-        const { code, message: msg } = await userStore.login(params);
-
-        if (code == ResultEnum.SUCCESS) {
-          const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
-          message.success('登录成功！');
-          router.replace(toPath).then((_) => {
-            if (route.name == 'login') {
+        try {
+          const { code, message: msg } = await userStore.login(params);
+          message.destroyAll();
+          if (code == ResultEnum.SUCCESS) {
+            const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
+            message.success('登录成功，即将进入系统');
+            if (route.name === LOGIN_NAME) {
               router.replace('/');
-            }
-          });
-        } else {
-          message.info(msg || '登录失败');
+            } else router.replace(toPath);
+          } else {
+            message.info(msg || '登录失败');
+          }
+        } finally {
+          loading.value = false;
         }
       } else {
         message.error('请填写完整信息，并且进行验证码校验');
       }
     });
   };
-
-  const onAuthCode = () => {
-    formInline.isCaptcha = true;
-  }
 </script>
 
 <style lang="less" scoped>

tsconfig.json

@@ -38,7 +38,7 @@
       ]
     }
   },
-  "includes": [
+  "include": [
     "src/**/*.ts",
     "src/**/*.d.ts",
     "src/**/*.tsx",