@peng_kai/kit 0.2.9 → 0.2.10

package/admin/components/2fa/src/Setting2FA.vue

@@ -11,6 +11,7 @@ import {
   QRCode as AQrcode,
 } from 'ant-design-vue';
 import { useAntdForm } from '../../../../antd/hooks/useAntdForm';
+import { vFocus } from './helpers';
 
 export { setDeps };
 
@@ -116,7 +117,7 @@ async function onSubmit() {
 
       <AForm v-bind="form.props" class="ml4 flex-1" layout="vertical" @submit="onSubmit()">
         <AFormItem v-bind="form.itemProps.password" label="账户密码">
-          <AInputPassword v-model:value="form.state.password" size="large">
+          <AInputPassword v-model:value="form.state.password" v-focus size="large">
             <template #prefix>
               <i class="i-ant-design:lock-outlined" />
             </template>

package/admin/components/2fa/src/Verify2FA.vue

@@ -10,6 +10,7 @@ import {
 } from 'ant-design-vue';
 import { hasToken } from '../../../../utils';
 import { useAntdForm } from '../../../../antd/hooks/useAntdForm';
+import { vFocus } from './helpers';
 
 export { setDeps };
 
@@ -70,14 +71,14 @@ async function onSubmit() {
   <div>
     <AForm v-bind="form.props" @submit="onSubmit()">
       <AFormItem v-if="props.requirePassword" v-bind="form.itemProps.password">
-        <AInputPassword v-model:value="form.state.password" size="large" placeholder="请输入账户密码">
+        <AInputPassword v-model:value="form.state.password" v-focus size="large" placeholder="请输入账户密码">
           <template #prefix>
             <i class="i-ant-design:lock-outlined" />
           </template>
         </AInputPassword>
       </AFormItem>
       <AFormItem v-bind="form.itemProps.security_code">
-        <AInput v-model:value="form.state.security_code" size="large" placeholder="请输入安全码">
+        <AInput v-model:value="form.state.security_code" v-focus size="large" placeholder="请输入安全码">
           <template #prefix>
             <i class="i-ant-design:safety-outlined" />
           </template>

package/admin/components/2fa/src/helpers.ts

@@ -0,0 +1,8 @@
+import type { Directive } from 'vue';
+
+export const vFocus: Directive = {
+  mounted(el) {
+    const $input: HTMLInputElement = el.nodeName === 'INPUT' ? el : el.getElementsByTagName('input')?.[0];
+    $input?.focus();
+  },
+};

package/admin/styles/classCover.scss

@@ -8,11 +8,11 @@
   .ant-form-show-help {
     position: relative;
 
-    + div {
+    +div {
       display: none;
     }
 
-    > div {
+    >div {
       position: absolute;
       z-index: 2;
       top: 7px;
@@ -56,6 +56,46 @@
   align-content: flex-start;
 }
 
+// 查询器表单基本样式
+.ant-form.ant-form__filter {
+  display: flex;
+  flex-wrap: wrap;
+  --uno: 'gap-4 mb-4';
+
+  .ant-form-item-label {
+    line-height: 1.2em;
+    width: 4.8em;
+    text-align: start;
+    overflow: unset;
+    white-space: unset;
+
+    >label::after {
+      // display: none;
+      content: "";
+    }
+  }
+
+  .ant-form-item {
+    margin-bottom: 0;
+    min-width: 250px;
+    width: 300px;
+    max-width: 380px;
+    flex: 1 1 auto;
+  }
+}
+
+// 使 Table 组件中的 Pagination 底部粘性
+.ant-table-wrapper.antd-cover__table-sticky-pagination .ant-table-pagination {
+  --pagination-bg-color: var(--antd-colorBgContainer);
+
+  position: sticky;
+  bottom: 16px;
+  z-index: 2;
+  margin-bottom: -9px;
+  background-color: var(--pagination-bg-color);
+  box-shadow: 0 0 0 16px var(--pagination-bg-color);
+}
+
 // 弹窗的基本款样式
 .ant-modal-wrap.antd-cover__basic-modal {
   --padding-size: 22px;
@@ -111,11 +151,11 @@
 // 抽屉的基本款样式
 .ant-drawer.antd-cover__basic-drawer {
   --padding-size: 22px;
-  
+
   // --min-body-height: ;
   // --max-body-height: ;
   // --body-height: ;
-  
+
   @media bp-lt-mobilel {
     --padding-size: 16px;
   }
@@ -167,7 +207,7 @@
     margin: 0;
     border-top: 1px solid var(--antd-colorBorderSecondary);
 
-    & > *:not(:first-of-type) {
+    &>*:not(:first-of-type) {
       margin-left: 8px;
     }
   }
@@ -178,11 +218,11 @@
   .ant-card-actions {
     justify-content: flex-end !important;
     padding: 0 24px;
-  
-    > li {
+
+    >li {
       width: auto !important;
       border-inline-end: none !important;
-  
+
       &:not(:last-child) {
         margin-right: 8px;
       }
@@ -190,33 +230,6 @@
   }
 }
 
-// 查询器表单基本样式
-.ant-form.ant-form__filter {
-  display: flex;
-  flex-wrap: wrap;
-  --uno: 'gap-4 mb-4';
-
-  .ant-form-item-label {
-    line-height: 1.2em;
-    width: 4.8em;
-    text-align: start;
-    overflow: unset;
-    white-space: unset;
-
-    > label::after {
-      // display: none;
-      content: "";
-    }
-  }
-
-  .ant-form-item {
-    margin-bottom: 0;
-    min-width: 250px;
-    width: 300px;
-    max-width: 380px;
-    flex: 1 1 auto;
-  }
-}
 
 // Modal 组件中的 Card 组件样式（为了和原 Modal 组件一样）
 .ant-card.antd-cover__card-in-modal {
@@ -312,7 +325,7 @@
     padding: 0 var(--padding-size);
     background-color: var(--antd-colorBgElevated);
 
-    > li {
+    >li {
       width: auto !important;
       margin: 0;
       border-inline-end: none !important;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peng_kai/kit",
   "type": "module",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "",
   "author": "",
   "license": "ISC",
@@ -36,7 +36,7 @@
     "axios": "^1.6.7",
     "bignumber.js": "^9.1.2",
     "chokidar": "^3.6.0",
-    "crypto-js": "^4.2.0",
+    "crypto-es": "^2.1.0",
     "dayjs": "^1.11.10",
     "echarts": "^5.4.3",
     "execa": "^8.0.1",

package/tsconfig.json

@@ -1,9 +1,10 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ESNext",
     "jsx": "preserve",
     "jsxFactory": "h",
     "jsxFragmentFactory": "Fragment",
+    "jsxImportSource": "vue",
     "lib": [
       "ESNext",
       "DOM",
@@ -11,22 +12,19 @@
     ],
     "useDefineForClassFields": true,
     "module": "ESNext",
-
-    /* Bundler mode */
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "allowImportingTsExtensions": true,
-
-    /* Linting */
     "strict": true,
     "noFallthroughCasesInSwitch": true,
-    "noImplicitAny": false,
+    "noImplicitThis": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noEmit": true,
-    "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
     "isolatedModules": true,
+    "verbatimModuleSyntax": true,
     "skipLibCheck": true
   },
   "include": [

package/utils/index.ts

@@ -1,4 +1,7 @@
-import CryptoJS from 'crypto-js';
+import { Utf8 as cryptUtf8 } from 'crypto-es/lib/core';
+import { AES as cryptoAES } from 'crypto-es/lib/aes';
+import { ECB as cryptoModeECB } from 'crypto-es/lib/mode-ecb';
+import { Pkcs7 as cryptoPkcs7 } from 'crypto-es/lib/cipher-core';
 import { at as objAt } from 'lodash-es';
 
 export { desensitize, randomString } from './string';
@@ -79,11 +82,11 @@ export function createSelfKeyProxy<T extends object>() {
  */
 export function encryptPassword(a: string, b: string[]) {
   const c = objAt(window, b).map((i: any) => i()).join('');
-  const key = CryptoJS.enc.Utf8.parse(c);
-  const srcs = CryptoJS.enc.Utf8.parse(a);
-  const encrypted = CryptoJS.AES.encrypt(srcs, key, {
-    mode: CryptoJS.mode.ECB,
-    padding: CryptoJS.pad.Pkcs7,
+  const key = cryptUtf8.parse(c);
+  const srcs = cryptUtf8.parse(a);
+  const encrypted = cryptoAES.encrypt(srcs, key, {
+    mode: cryptoModeECB,
+    padding: cryptoPkcs7,
   });
 
   return encrypted.toString();