@peng_kai/kit 0.2.5 → 0.2.6-base.0

package/admin/components/2fa/index.ts

@@ -0,0 +1,31 @@
+import { defineAsyncComponent } from 'vue';
+import { useAntdModal } from '../../../antd/hooks/useAntdModal';
+
+export { default as Setting2FA, setDeps as setSetting2FADeps } from './src/Setting2FA.vue';
+export { default as Verify2FA, setDeps as setVerify2FADeps } from './src/Verify2FA.vue';
+
+export function createSetting2FAModal() {
+  return useAntdModal(
+    { type: 'modal', is: defineAsyncComponent(() => import('./src/Setting2FA.vue')) },
+    { width: 550, footer: null },
+  );
+}
+
+export function createVerify2FAModal() {
+  const verify2FAModal = useAntdModal(
+    defineAsyncComponent(() => import('./src/Verify2FA.vue')),
+    { title: '双重身份验证', width: 350, footer: null },
+  );
+
+  return {
+    PresetComponent: verify2FAModal.PresetComponent,
+    open: (requirePassword = false) => {
+      return new Promise<{ password: string, security_code: string }>((resolve, reject) => {
+        verify2FAModal.open(
+          { onConfirm: resolve, requirePassword },
+          { onCancel: reject },
+        );
+      });
+    },
+  };
+}

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

@@ -0,0 +1,139 @@
+<script lang="ts">
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query';
+import { computed, nextTick } from 'vue';
+import { useAntdForm } from '../../../../antd/hooks/useAntdForm';
+
+export { setDeps };
+
+interface IDeps {
+  adminInfoApi: Api.Request
+  qrCodeApi: Api.Request
+  authSwitchApi: Api.Request
+  encryptPassword?: (pwd: string) => string
+}
+
+let _deps = {} as Required<IDeps>;
+
+function setDeps(deps: IDeps) {
+  _deps = {
+    encryptPassword: pwd => pwd,
+    ...deps,
+  };
+}
+</script>
+
+<script setup lang="ts">
+const emits = defineEmits<{
+  close: []
+}>();
+
+const queryClient = useQueryClient();
+const userInfoQry = useQuery({
+  queryKey: [_deps.adminInfoApi.id],
+  queryFn: () => _deps.adminInfoApi(undefined),
+});
+const enableAuth = computed(() => userInfoQry.data.value?.enable_authenticator);
+const authQRcodeQry = useQuery({
+  enabled: computed(() => enableAuth.value === 0),
+  queryKey: [_deps.qrCodeApi.id],
+  queryFn: () => _deps.qrCodeApi(undefined),
+  gcTime: 0,
+});
+const switch2FAMut = useMutation({
+  mutationKey: [_deps.authSwitchApi.id],
+  mutationFn: _deps.authSwitchApi.setDefaultConfig({ successMessage: true }),
+  onSuccess() {
+    queryClient.invalidateQueries({
+      queryKey: [_deps.adminInfoApi.id],
+      exact: false,
+    });
+    form.$form.resetFields?.();
+  },
+});
+const title = computed(() => {
+  const _enableAuth = enableAuth.value;
+  const title = '双重认证';
+
+  return _enableAuth === 1 ? `解绑${title}` : _enableAuth === 0 ? `绑定${title}` : title;
+});
+
+const form = useAntdForm({
+  security_code: {
+    value: '',
+    rules: [
+      { required: true, type: 'string', len: 6, message: '请输入6位数字的安全码' },
+    ],
+  },
+  password: {
+    value: '',
+    rules: [
+      { required: true },
+    ],
+  },
+});
+
+async function onSubmit() {
+  await nextTick();
+  const state = await form.$form.validate?.()?.catch(() => {});
+
+  if (!state)
+    return;
+
+  const _enableAuth = enableAuth.value === 1 ? 0 : 1;
+  await switch2FAMut.mutateAsync({ requestBody: {
+    password: _deps.encryptPassword(state.password),
+    security_code: state.security_code,
+    enable_authenticator: _enableAuth,
+  } });
+
+  if (_enableAuth)
+    emits('close');
+}
+</script>
+
+<template>
+  <ACard class="antd-cover__card-in-modal bg-$antd-colorBgElevated" :loading="userInfoQry.isLoading.value" :title="title">
+    <template #extra>
+      <div class="close-btn" @click="emits('close')" />
+    </template>
+    <div class="flex">
+      <AQrcode
+        v-if="enableAuth === 0"
+        :status="authQRcodeQry.data.value ? 'active' : 'loading'"
+        :size="207"
+        :value="authQRcodeQry.data.value?.qr_code ?? ''"
+        style="flex: none"
+      />
+
+      <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">
+            <template #prefix>
+              <i class="i-ant-design:lock-outlined" />
+            </template>
+          </AInputPassword>
+        </AFormItem>
+        <AFormItem v-bind="form.itemProps.security_code" label="安全码">
+          <AInput v-model:value="form.state.security_code" size="large">
+            <template #prefix>
+              <i class="i-ant-design:safety-outlined" />
+            </template>
+          </AInput>
+          <template #extra>
+            <span v-if="enableAuth">请使用身份验证器APP，获取6位数字安全码</span>
+            <span v-else>请使用身份验证器APP扫描左侧二维码，获取6位数字安全码</span>
+          </template>
+        </AFormItem>
+        <button class="hidden" type="submit">
+          提交
+        </button>
+      </AForm>
+    </div>
+
+    <template v-if="userInfoQry.isSuccess.value" #actions>
+      <AButton type="primary" @click="onSubmit">
+        {{ enableAuth ? '解绑' : '绑定' }}
+      </AButton>
+    </template>
+  </ACard>
+</template>

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

@@ -0,0 +1,89 @@
+<script lang="ts">
+import { nextTick } from 'vue';
+import { hasToken } from '../../../../utils';
+import { useAntdForm } from '../../../../antd/hooks/useAntdForm';
+
+export { setDeps };
+
+interface IDeps {
+  setting2FA: any
+  encryptPassword?: (pwd: string) => string
+}
+
+let _deps = {} as Required<IDeps>;
+
+function setDeps(deps: IDeps) {
+  _deps = {
+    encryptPassword: pwd => pwd,
+    ...deps,
+  };
+}
+</script>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  requirePassword?: boolean
+}>(), {
+  requirePassword: false,
+});
+
+const emits = defineEmits<{
+  confirm: [{ password: string, security_code: string }]
+  close: []
+}>();
+
+const form = useAntdForm({
+  password: {
+    value: '',
+    rules: [
+      { required: true },
+    ],
+  },
+  security_code: {
+    value: '',
+    rules: [
+      { required: true, type: 'string', len: 6, message: '请输入6位数字的安全码' },
+    ],
+  },
+});
+
+async function onSubmit() {
+  await nextTick();
+  const state = await form.$form.validate?.().catch(err => console.log(err));
+
+  if (state) {
+    emits('confirm', { ...form.state, password: _deps.encryptPassword(state.password) });
+    emits('close');
+  }
+}
+</script>
+
+<template>
+  <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="请输入账户密码">
+          <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="请输入安全码">
+          <template #prefix>
+            <i class="i-ant-design:safety-outlined" />
+          </template>
+        </AInput>
+        <template #extra>
+          <span>请输入身份验证器上显示的6位数字安全码</span>
+        </template>
+      </AFormItem>
+      <AButton type="primary" size="large" block htmlType="submit">
+        验证
+      </AButton>
+      <AButton v-if="hasToken()" class="mt2 -mb2" type="link" block @click="_deps.setting2FA?.open?.()">
+        没有安全码？去绑定
+      </AButton>
+    </AForm>
+  </div>
+</template>

package/admin/stores/createUsePageStore.ts

@@ -2,15 +2,14 @@ import { usePrevious } from '@vueuse/core';
 import type { RouteLocationNormalizedLoaded } from 'vue-router';
 import { defineStore } from 'pinia';
 import { computed, reactive, readonly, ref, shallowRef, watch } from 'vue';
-import type { VNode } from 'vue';
+import type { DeepReadonly, VNode } from 'vue';
 import { getTitle } from '../defines/route';
 import { adminPlugin } from '../adminPlugin';
 import type { TMenu } from './createUseMenuStore';
 
 export { createUsePageStore };
-export type { TPageState, TUsePageStore, IBreadcrumb };
+export type { TUsePageStore, IBreadcrumb, IPageState };
 
-type TPageState = ReturnType<typeof getPageState>;
 type TUsePageStore = ReturnType<typeof createUsePageStore>;
 
 interface IBreadcrumb {
@@ -29,7 +28,7 @@ function storeSetup() {
   const currentPageNode = shallowRef<VNode>();
   const currentPageKey = ref('');
   const pageCacheList = reactive<string[]>([]);
-  const pageStateMap = new Map<string, TPageState>();
+  const pageStateMap = new Map<string, IPageState>();
   const currentPageState = computed(() => pageStateMap.get(currentPageKey.value));
   const previousPageState = usePrevious(currentPageState);
 
@@ -103,7 +102,14 @@ function storeSetup() {
   };
 }
 
-function getPageState(route: RouteLocationNormalizedLoaded) {
+interface IPageState {
+  title: string
+  icon?: VNode
+  breadcrumbs: IBreadcrumb[]
+  readonly route: DeepReadonly<RouteLocationNormalizedLoaded>
+}
+
+function getPageState(route: RouteLocationNormalizedLoaded): IPageState {
   const menuStore = adminPlugin.deps.useMenuStore()!;
   const appName = adminPlugin.meta.appName;
   const menuPath = menuStore.getMenuPath(route.name as string);

package/admin/stores/createUsePageTabStore.ts

@@ -1,11 +1,14 @@
 import { defineStore, storeToRefs } from 'pinia';
-import { computed, ref, watch } from 'vue';
+import { type ComputedRef, type Ref, computed, ref, watch } from 'vue';
+import type { Simplify } from 'type-fest';
 import { adminPlugin } from '../adminPlugin';
+import type { IPageState } from './createUsePageStore';
 
 export { createUsePageTabStore };
 export type { TUsePageTabStore };
 
 type TUsePageTabStore = ReturnType<typeof createUsePageTabStore>;
+type TTab = Simplify<Pick<IPageState, 'title' | 'icon'> & { key: string }>;
 
 function createUsePageTabStore() {
   return defineStore('appPageTab', () => storeSetup());
@@ -13,14 +16,16 @@ function createUsePageTabStore() {
 
 function storeSetup() {
   const pageStore = adminPlugin.deps.usePageStore!();
-  const { currentPageKey } = storeToRefs(pageStore);
+  const pageRefs = storeToRefs(pageStore);
+  const activeTab: Ref<string> = pageRefs.currentPageKey;
   const tabKeyList = ref<string[]>([]);
-  const tabList = computed(() => tabKeyList.value.map((key) => {
+  const tabList: ComputedRef<TTab[]> = computed(() => tabKeyList.value.map((key) => {
     const state = pageStore.pageStateMap.get(key);
 
     return state ? { key, title: state.title, icon: state.icon } : undefined!;
   }).filter(tab => !!tab));
 
+  const openTab: (key: string) => void = pageStore.openPage;
   const closeTab = (key: string) => {
     const i = tabKeyList.value.indexOf(key);
 
@@ -30,14 +35,15 @@ function storeSetup() {
     }
   };
 
-  watch(
-    () => pageStore.currentPageKey,
-    (key) => {
-      if (!tabKeyList.value.includes(key))
-        tabKeyList.value.push(key);
-    },
-    { immediate: true },
-  );
+  watch(activeTab, (key) => {
+    if (!tabKeyList.value.includes(key))
+      tabKeyList.value.push(key);
+  }, { immediate: true });
 
-  return { activeTab: currentPageKey, tabList, closeTab, openTab: pageStore.openPage };
+  return {
+    activeTab,
+    tabList,
+    closeTab,
+    openTab,
+  };
 }

package/admin/stores/index.ts

@@ -3,6 +3,6 @@ export { createUseMenuStore } from './createUseMenuStore';
 export { createUsePageTabStore } from './createUsePageTabStore';
 export { createUsePermissionStore } from './createUsePermissionStore';
 
-export type { TPageState, TUsePageStore, IBreadcrumb } from './createUsePageStore';
+export type { IPageState, TUsePageStore, IBreadcrumb } from './createUsePageStore';
 export type { TUseMenuStore } from './createUseMenuStore';
 export type { TUsePageTabStore } from './createUsePageTabStore';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peng_kai/kit",
   "type": "module",
-  "version": "0.2.5",
+  "version": "0.2.6-base.0",
   "description": "",
   "author": "",
   "license": "ISC",