perf: 支持微信扫码登录

packages/ui/certd-client/src/locales/langs/en-US/certd.ts

@@ -766,7 +766,10 @@ export default {
       oauthProviders: "OAuth2 Login Providers",
       oauthType: "OAuth2 Login Type",
       oauthConfig: "OAuth2 Login Config",
-      oauthProviderSelectorPlaceholder: "Please select OAuth2 login provider",
+      oauthProviderSelectorPlaceholder: "Not Configured",
+      oauthCallback: "Callback URL",
+      oauthCallbackHelper: "Copy this URL to the callback address of the OAuth2 login provider",
+      oauthCallbackCopy: "Copy Callback URL",
     },
   },
   modal: {

packages/ui/certd-client/src/locales/langs/zh-CN/certd.ts

@@ -767,7 +767,10 @@ export default {
       oauthProviders: "第三方登录提供商",
       oauthType: "第三方登录类型",
       oauthConfig: "第三方登录配置",
-      oauthProviderSelectorPlaceholder: "请选择第三方登录提供商",
+      oauthProviderSelectorPlaceholder: "未配置",
+      oauthCallback: "回调地址",
+      oauthCallbackHelper: "复制回调地址，配置到对应提供商的回调地址中",
+      oauthCallbackCopy: "复制回调地址",
     },
   },
   modal: {

packages/ui/certd-client/src/views/certd/addon/addon-selector/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="addon-selector">
-    <div class="flex-o w-100">
+    <div class="flex-o w-100 inner">
       <!--      <fs-dict-select class="flex-1" :value="modelValue" :dict="optionsDictRef" :disabled="disabled" :render-label="renderLabel" :slots="selectSlots" :allow-clear="true" v-bind="select" @update:value="onChange" />-->
       <span v-if="modelValue" class="mr-5 cd-flex-inline">
         <a-tag class="mr-5" color="green">{{ target?.name || modelValue }}</a-tag>
@@ -175,5 +175,9 @@ async function doRefresh() {
 <style lang="less">
 .addon-selector {
   width: 100%;
+  .inner {
+    display: flex;
+    align-items: center;
+  }
 }
 </style>

packages/ui/certd-client/src/views/certd/addon/common.tsx

@@ -121,7 +121,14 @@ export function getCommonColumnDefine(crudExpose: any, typeRef: any, api: any, a
       },
       editForm: {
         component: {
-          disabled: false,
+          disabled: true,
+        },
+      },
+      addForm: {
+        component: {
+          disabled: compute(({ form }) => {
+            return form.type ? true : false;
+          }),
         },
       },
       form: {

packages/ui/certd-client/src/views/certd/addon/crud.tsx

@@ -40,6 +40,12 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
         editRequest,
         delRequest,
       },
+      search: {
+        initialForm: {
+          addonType: addonType,
+          type: type,
+        },
+      },
       form: {
         labelCol: {
           //固定label宽度

packages/ui/certd-client/src/views/framework/oauth/api.ts

@@ -2,13 +2,14 @@ import { request } from "/src/api/service";
 
 const apiPrefix = "/oauth";
 
-export async function OauthLogin(type: string, forType?: string) {
+export async function OauthLogin(type: string, forType?: string, from?: string) {
   return await request({
     url: apiPrefix + `/login`,
     method: "post",
     data: {
       type,
       forType: forType || "login",
+      from: from || "web",
     },
   });
 }

packages/ui/certd-client/src/views/framework/oauth/oauth-footer.vue

@@ -3,11 +3,13 @@
     <div class="oauth-title">
       <div class="oauth-title-text">其他方式登录</div>
     </div>
-    <div v-for="item in oauthList" :key="item.type">
-      <div class="oauth-icon-button pointer" @click="goOauthLogin(item.name)">
-        <div><fs-icon :icon="item.icon" class="text-blue-600 text-40" /></div>
-        <div>{{ item.title }}</div>
-      </div>
+    <div class="flex justify-center items-center gap-4">
+      <template v-for="item in oauthProviderList" :key="item.type">
+        <div v-if="item.addonId" class="oauth-icon-button pointer" @click="goOauthLogin(item.name)">
+          <div><fs-icon :icon="item.icon" class="text-blue-600 text-40" /></div>
+          <div>{{ item.addonTitle || item.title }}</div>
+        </div>
+      </template>
     </div>
   </div>
 </template>
@@ -15,15 +17,16 @@
 import { onMounted, ref } from "vue";
 import * as api from "./api";
 
-const oauthList = ref([]);
+const oauthProviderList = ref([]);
 
 onMounted(async () => {
-  oauthList.value = await api.GetOauthProviders();
+  oauthProviderList.value = await api.GetOauthProviders();
 });
 
 async function goOauthLogin(type: string) {
   //获取第三方登录URL
-  const res = await api.OauthLogin(type);
+  const from = "web";
+  const res = await api.OauthLogin(type, from);
   const loginUrl = res.loginUrl;
   window.location.href = loginUrl;
 }

packages/ui/certd-client/src/views/sys/settings/api.ts

@@ -114,7 +114,7 @@ export async function GetSmsTypeDefine(type: string) {
 
 export async function GetOauthProviders() {
   return await request({
-    url: apiPrefix + "/oauth/providers",
+    url: "/oauth/providers",
     method: "post",
   });
 }

packages/ui/certd-client/src/views/sys/settings/tabs/register.vue

@@ -67,8 +67,9 @@
           <table class="w-full table-auto border-collapse border border-gray-400">
             <thead>
               <tr>
-                <th class="border border-gray-300 px-4 py-2 w-1/2">{{ t("certd.sys.setting.oauthType") }}</th>
-                <th class="border border-gray-300 px-4 py-2 w-1/2">{{ t("certd.sys.setting.oauthConfig") }}</th>
+                <th class="border border-gray-300 px-4 py-2 w-1/3">{{ t("certd.sys.setting.oauthType") }}</th>
+                <th class="border border-gray-300 px-4 py-2 w-1/3">{{ t("certd.sys.setting.oauthCallback") }}</th>
+                <th class="border border-gray-300 px-4 py-2 w-1/3">{{ t("certd.sys.setting.oauthConfig") }}</th>
               </tr>
             </thead>
             <tbody>
@@ -79,6 +80,11 @@
                     {{ item.title }}
                   </div>
                 </td>
+                <td class="border border-gray-300 px-4 py-2 overflow-ellipsis" :title="t('certd.sys.setting.oauthCallbackHelper')">
+                  <fs-copyable :model-value="buildCallbackUrl(item.name)">
+                    {{ t("certd.sys.setting.oauthCallbackCopy") }}
+                  </fs-copyable>
+                </td>
                 <td class="border border-gray-300 px-4 py-2">
                   <AddonSelector v-model:model-value="item.addonId" addon-type="oauth" from="sys" :type="item.name" :placeholder="t('certd.sys.setting.oauthProviderSelectorPlaceholder')" />
                 </td>
@@ -96,14 +102,14 @@
 </template>
 
 <script setup lang="tsx">
-import { computed, reactive, ref, Ref } from "vue";
-import { GetSmsTypeDefine, SysSettings } from "/@/views/sys/settings/api";
-import * as api from "/@/views/sys/settings/api";
-import { merge } from "lodash-es";
-import { useSettingStore } from "/@/store/settings";
 import { notification } from "ant-design-vue";
-import { useI18n } from "/src/locales";
+import { merge } from "lodash-es";
+import { reactive, ref, Ref } from "vue";
 import AddonSelector from "../../../certd/addon/addon-selector/index.vue";
+import { useSettingStore } from "/@/store/settings";
+import * as api from "/@/views/sys/settings/api";
+import { SysSettings } from "/@/views/sys/settings/api";
+import { useI18n } from "/src/locales";
 const { t } = useI18n();
 
 defineOptions({
@@ -192,15 +198,7 @@ async function loadTypeDefine(type: string) {
 
 const oauthProviders = ref([]);
 async function loadOauthProviders() {
-  let list: any = await api.GetOauthProviders();
-  oauthProviders.value = list;
-  for (const item of list) {
-    const type = item.name;
-    const provider = formState.public.oauthProviders?.[type];
-    if (provider) {
-      item.addonId = provider.addonId;
-    }
-  }
+  oauthProviders.value = await api.GetOauthProviders();
 }
 
 function fillOauthProviders(form: any) {
@@ -251,8 +249,19 @@ const onFinish = async (form: any) => {
     saveLoading.value = false;
   }
 };
+
+function buildCallbackUrl(type: string) {
+  return `${window.location.origin}/api/oauth/callback/${type}`;
+}
 </script>
 <style lang="less">
-.sys-settings-site {
+.sys-settings-register {
+  width: 1000px !important;
+
+  .addon-selector {
+    .inner {
+      justify-content: space-between;
+    }
+  }
 }
 </style>