CHANGELOG 修改

修复 类型“ComputedRef<{ bgColor: string; fixed: boolean; show: boolean; }…

CHANGELOG.md

@@ -1,5 +1,26 @@
 # CHANGELOG
 
+## 1.7.0 (2022-02-14)
+
+### 🐛 Bug Fixes
+- 移除 `登录页面` 滑动验证组件
+- 修复 `BasicUpload` 组件，回显问题
+- 修复 `ts类型` 配置缺陷
+- 修复 `登录页面` message 交互缺陷
+- 修复 `表格编辑` 时间格式化异常 [#92](https://github.com/jekip/naive-ui-admin/issues/92)
+
+- ### ✨ Features
+- 依赖升级
+
+## 1.6.1 (2022-01-06)
+
+### 🐛 Bug Fixes
+- 修复 `项目配置` 打开空白
+- 修复 `多标签` 背景和字体色变量丢失
+
+- ### ✨ Features
+- 依赖升级
+
 ## 1.6.0 (2021-12-24)
 
 ### 🐛 Bug Fixes

README.md

@@ -1,5 +1,5 @@
 ## 留步
-少侠留步，早知如此绊人心，何如当初莫相识，右上角免费的 `Star` 点一点，帮我们突破一下 `1.5k`，谢谢！O(∩_∩)O
+少侠留步，早知如此绊人心，何如当初莫相识，右上角免费的 `Star` 点一点，帮我们突破一下 `2k`，谢谢！O(∩_∩)O
 
 ## 简介
 
@@ -45,7 +45,7 @@
 
 ## 文档
 
-[v1文档地址](https://naive-ui-admin-docs.vercel.app) 
+[v1文档地址](https://naive-ui-admin-docs.vercel.app)
 
 ## 准备
 
@@ -137,11 +137,16 @@ yarn build
 
 ## 交流
 
-`Naive Ui Admin` 在帮助开发者更方便地进行中大型管理系统开发，同时也提供 QQ 交流群使用问题欢迎在群内提问。
+`Naive Ui Admin` 使用或者其他问题，都可以在群内讨论或提问。
 
 - QQ 群 `328347666`
 
+![(2O3HZAL78@@6H G9XTVM%9](https://user-images.githubusercontent.com/19426584/150084502-9783bf65-28e8-4435-95bf-3bae3bc63d99.png)
+
+
 ## 赞助
 #### 如果你觉得这个项目帮助到了你，你可以帮作者买一杯果汁表示鼓励 🍹。
 
 ![donate](https://jekip.github.io/docs/images/sponsor.png)
+
+[Paypal Me](https://www.paypal.com/paypalme/majunping)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui-admin",
-  "version": "1.6.0",
+  "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.1",
-    "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.0.9",
-    "eslint-plugin-jest": "^24.4.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-vue": "^7.18.0",
+    "eslint-define-config": "1.0.9",
+    "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/Table/src/hooks/useDataSource.ts

@@ -47,6 +47,7 @@ export function useDataSource(
     try {
       setLoading(true);
       const { request, pagination }: any = unref(propsRef);
+      if (!request) return;
       //组装分页信息
       const pageField = APISETTING.pageField;
       const sizeField = APISETTING.sizeField;

src/components/Table/src/props.ts

@@ -16,7 +16,7 @@ export const basicProps = {
     type: String,
     default: 'medium',
   },
-  tableData: {
+  dataSource: {
     type: [Object],
     default: () => [],
   },
@@ -28,7 +28,6 @@ export const basicProps = {
   request: {
     type: Function as PropType<(...arg: any[]) => Promise<any>>,
     default: null,
-    required: true,
   },
   rowKey: {
     type: [String, Function] as PropType<string | ((record) => string)>,

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/layout/components/Header/ProjectSetting.vue

@@ -1,10 +1,10 @@
 <template>
-  <n-drawer v-model:show="isDrawer" :width="width" :placement="placement" :native-scrollbar="false">
-    <n-drawer-content :title="title">
+  <n-drawer v-model:show="isDrawer" :width="width" :placement="placement">
+    <n-drawer-content :title="title" :native-scrollbar="false">
       <div class="drawer">
         <n-divider title-placement="center">主题</n-divider>
 
-        <div class="drawer-setting-item justify-center dark-switch">
+        <div class="justify-center drawer-setting-item dark-switch">
           <n-tooltip placement="bottom">
             <template #trigger>
               <n-switch v-model:value="designStore.darkTheme" class="dark-theme-switch">
@@ -116,9 +116,7 @@
             </n-tooltip>
             <n-badge dot color="#19be6b" v-if="settingStore.navTheme === 'light'" />
           </div>
-        </div>
 
-        <div class="drawer-setting-item align-items-top">
           <div class="drawer-setting-item-style">
             <n-tooltip placement="top">
               <template #trigger>
@@ -133,7 +131,6 @@
             <n-badge dot color="#19be6b" v-if="settingStore.navTheme === 'header-dark'" />
           </div>
         </div>
-
         <n-divider title-placement="center">界面功能</n-divider>
 
         <div class="drawer-setting-item">
@@ -361,7 +358,7 @@
         border-radius: 2px;
         margin: 0 5px 5px 0;
         text-align: center;
-
+        line-height: 14px;
         .n-icon {
           color: #fff;
         }

src/layout/components/TagsView/index.vue

@@ -115,6 +115,7 @@
   import elementResizeDetectorMaker from 'element-resize-detector';
   import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
   import { useProjectSettingStore } from '@/store/modules/projectSetting';
+  import { useThemeVars } from 'naive-ui';
 
   export default defineComponent({
     name: 'TabsView',
@@ -145,6 +146,16 @@
       const navWrap: any = ref(null);
       const isCurrent = ref(false);
 
+      const themeVars = useThemeVars();
+
+      const getCardColor = computed(() => {
+        return themeVars.value.cardColor;
+      });
+
+      const getBaseColor = computed(() => {
+        return themeVars.value.textColor1;
+      });
+
       const state = reactive({
         activeKey: route.fullPath,
         scrollable: false,
@@ -247,8 +258,8 @@
           window.pageYOffset ||
           document.body.scrollTop; // 滚动条偏移量
         state.isMultiHeaderFixed = !!(
-          !getHeaderSetting.fixed &&
-          getMultiTabsSetting.fixed &&
+          !getHeaderSetting.value.fixed &&
+          getMultiTabsSetting.value.fixed &&
           scrollTop >= 64
         );
       }
@@ -505,6 +516,8 @@
         onClickOutside,
         getDarkTheme,
         getAppTheme,
+        getCardColor,
+        getBaseColor,
       };
     },
   });
@@ -565,8 +578,8 @@
           overflow: hidden;
 
           &-item {
-            background: var(--color);
-            color: var(--text-color);
+            background: v-bind(getCardColor);
+            color: v-bind(getBaseColor);
             height: 32px;
             padding: 6px 16px 4px;
             border-radius: 3px;

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

@@ -29,7 +29,7 @@
             <n-input
               v-model:value="formInline.password"
               type="password"
-              show-password-toggle
+              showPasswordOn="click"
               placeholder="请输入密码"
             >
               <template #prefix>
@@ -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>

src/views/result/fail.vue

@@ -37,10 +37,17 @@
   </n-card>
 </template>
 <script lang="ts" setup>
+  import { computed } from 'vue';
+  import { useThemeVars } from 'naive-ui';
   import { useRouter } from 'vue-router';
   import { InfoCircleOutlined } from '@vicons/antd';
 
   const router = useRouter();
+  const themeVars = useThemeVars();
+
+  const getTableHeaderColor = computed(() => {
+    return themeVars.value.tableHeaderColor;
+  });
 
   function goHome() {
     router.push('/');
@@ -56,7 +63,7 @@
     &-extra {
       padding: 24px 40px;
       text-align: left;
-      background: #f8f8f9;
+      background: v-bind(getTableHeaderColor);
       border-radius: 4px;
     }
   }

src/views/result/info.vue

@@ -41,10 +41,17 @@
   </n-card>
 </template>
 <script lang="ts" setup>
+  import { computed } from 'vue';
+  import { useThemeVars } from 'naive-ui';
   import { useRouter } from 'vue-router';
   import { CheckCircleOutlined } from '@vicons/antd';
 
   const router = useRouter();
+  const themeVars = useThemeVars();
+
+  const getTableHeaderColor = computed(() => {
+    return themeVars.value.tableHeaderColor;
+  });
 
   function goHome() {
     router.push('/');
@@ -60,7 +67,7 @@
     &-extra {
       padding: 24px 40px;
       text-align: left;
-      background: #f8f8f9;
+      background: v-bind(getTableHeaderColor);
       border-radius: 4px;
     }
   }

src/views/result/success.vue

@@ -23,9 +23,16 @@
   </n-card>
 </template>
 <script lang="ts" setup>
+  import { computed } from 'vue';
   import { useRouter } from 'vue-router';
+  import { useThemeVars } from 'naive-ui';
 
   const router = useRouter();
+  const themeVars = useThemeVars();
+
+  const getTableHeaderColor = computed(() => {
+    return themeVars.value.tableHeaderColor;
+  });
 
   function goHome() {
     router.push('/');
@@ -41,7 +48,7 @@
     &-extra {
       padding: 24px 40px;
       text-align: left;
-      background: #f8f8f9;
+      background: v-bind(getTableHeaderColor);
       border-radius: 4px;
     }
   }

tsconfig.json

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