优化：社交登录、用户的管理

src/api/system/social/user/index.ts

@@ -22,13 +22,3 @@ export const getSocialUserPage = async (params) => {
 export const getSocialUser = async (id: number) => {
   return await request.get({ url: `/system/social-user/get?id=` + id })
 }
-
-// 修改社交用户
-export const updateSocialUser = async (data: SocialUserVO) => {
-  return await request.put({ url: `/system/social-user/update`, data })
-}
-
-// 删除社交用户
-export const deleteSocialUser = async (id: number) => {
-  return await request.delete({ url: `/system/social-user/delete?id=` + id })
-}

src/utils/dict.ts

@@ -116,7 +116,7 @@ export enum DICT_TYPE {
   SYSTEM_OAUTH2_GRANT_TYPE = 'system_oauth2_grant_type',
   SYSTEM_MAIL_SEND_STATUS = 'system_mail_send_status',
   SYSTEM_NOTIFY_TEMPLATE_TYPE = 'system_notify_template_type',
-  SYSTEM_SOCIAL_CLIENT_TYPE = 'system_social_client_type',
+  SYSTEM_SOCIAL_TYPE = 'system_social_type',
 
   // ========== INFRA 模块 ==========
   INFRA_BOOLEAN_STRING = 'infra_boolean_string',

src/views/system/loginlog/LoginLogDetail.vue

@@ -34,7 +34,7 @@ defineOptions({ name: 'SystemLoginLogDetail' })
 
 const dialogVisible = ref(false) // 弹窗的是否展示
 const detailLoading = ref(false) // 表单的加载中
-const detailData = ref() // 详情数据
+const detailData = ref({}) // 详情数据
 
 /** 打开弹窗 */
 const open = async (data: LoginLogApi.LoginLogVO) => {

src/views/system/social/client/SocialClientForm.vue

@@ -13,7 +13,7 @@
       <el-form-item label="社交平台" prop="socialType">
         <el-radio-group v-model="formData.socialType">
           <el-radio
-            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_SOCIAL_CLIENT_TYPE)"
+            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_SOCIAL_TYPE)"
             :key="dict.value"
             :label="dict.value"
           >
@@ -41,8 +41,8 @@
           placeholder="请输入客户端密钥,对应各平台的appSecret"
         />
       </el-form-item>
-      <el-form-item label="agentId" prop="agentId">
-        <el-input v-model="formData.agentId" placeholder="授权方的网页应用ID,有则填" />
+      <el-form-item label="agentId" prop="agentId" v-if="formData!.socialType === 30">
+        <el-input v-model="formData.agentId" placeholder="授权方的网页应用 ID，有则填" />
       </el-form-item>
       <el-form-item label="状态" prop="status">
         <el-radio-group v-model="formData.status">

src/views/system/social/client/index.vue

@@ -25,7 +25,7 @@
           placeholder="请选择社交平台"
         >
           <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_SOCIAL_CLIENT_TYPE)"
+            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_SOCIAL_TYPE)"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
@@ -56,15 +56,6 @@
           @keyup.enter="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="客户端密钥" prop="clientSecret">
-        <el-input
-          v-model="queryParams.clientSecret"
-          class="!w-240px"
-          clearable
-          placeholder="请输入客户端密钥"
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
       <el-form-item label="状态" prop="status">
         <el-select v-model="queryParams.status" class="!w-240px" clearable placeholder="请选择状态">
           <el-option
@@ -75,17 +66,6 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="创建时间" prop="createTime">
-        <el-date-picker
-          v-model="queryParams.createTime"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-240px"
-          end-placeholder="结束日期"
-          start-placeholder="开始日期"
-          type="daterange"
-          value-format="YYYY-MM-DD HH:mm:ss"
-        />
-      </el-form-item>
       <el-form-item>
         <el-button @click="handleQuery">
           <Icon class="mr-5px" icon="ep:search" />
@@ -115,7 +95,7 @@
       <el-table-column align="center" label="应用名" prop="name" />
       <el-table-column align="center" label="社交平台" prop="socialType">
         <template #default="scope">
-          <dict-tag :type="DICT_TYPE.SYSTEM_SOCIAL_CLIENT_TYPE" :value="scope.row.socialType" />
+          <dict-tag :type="DICT_TYPE.SYSTEM_SOCIAL_TYPE" :value="scope.row.socialType" />
         </template>
       </el-table-column>
       <el-table-column align="center" label="用户类型" prop="userType">
@@ -123,8 +103,7 @@
           <dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType" />
         </template>
       </el-table-column>
-      <el-table-column align="center" label="客户端编号" prop="clientId" />
-      <el-table-column align="center" label="客户端密钥" prop="clientSecret" />
+      <el-table-column align="center" label="客户端编号" prop="clientId" width="180px" />
       <el-table-column align="center" label="状态" prop="status">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
@@ -192,9 +171,7 @@ const queryParams = reactive({
   socialType: null,
   userType: null,
   clientId: null,
-  clientSecret: null,
-  status: null,
-  createTime: []
+  status: null
 })
 const queryFormRef = ref() // 搜索的表单
 

src/views/system/social/user/SocialUserDetail.vue

@@ -0,0 +1,60 @@
+<template>
+  <Dialog v-model="dialogVisible" title="详情" width="800">
+    <el-descriptions :column="1" border>
+      <el-descriptions-item label="社交平台" min-width="160">
+        <dict-tag :type="DICT_TYPE.SYSTEM_SOCIAL_TYPE" :value="detailData.type" />
+      </el-descriptions-item>
+      <el-descriptions-item label="用户昵称" min-width="120">
+        {{ detailData.nickname }}
+      </el-descriptions-item>
+      <el-descriptions label="用户头像" min-width="120">
+        <el-image :src="detailData.avatar" class="h-30px w-30px" />
+      </el-descriptions>
+      <el-descriptions-item label="社交 token" min-width="120">
+        {{ detailData.token }}
+      </el-descriptions-item>
+      <el-descriptions-item label="原始 Token 数据" min-width="120">
+        <el-input
+          v-model="detailData.rawTokenInfo"
+          :autosize="{ maxRows: 20 }"
+          :readonly="true"
+          type="textarea"
+        />
+      </el-descriptions-item>
+      <el-descriptions-item label="原始 User 数据" min-width="120">
+        <el-input
+          v-model="detailData.rawUserInfo"
+          :autosize="{ maxRows: 20 }"
+          :readonly="true"
+          type="textarea"
+        />
+      </el-descriptions-item>
+      <el-descriptions-item label="最后一次的认证 code" min-width="120">
+        {{ detailData.code }}
+      </el-descriptions-item>
+      <el-descriptions-item label="最后一次的认证 state" min-width="120">
+        {{ detailData.state }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE } from '@/utils/dict'
+import * as SocialUserApi from '@/api/system/social/user'
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const detailLoading = ref(false) // 表单的加载中
+const detailData = ref({}) // 详情数据
+
+/** 打开弹窗 */
+const open = async (id: number) => {
+  dialogVisible.value = true
+  // 设置数据
+  try {
+    detailData.value = await SocialUserApi.getSocialUser(id)
+  } finally {
+    detailLoading.value = false
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>

src/views/system/social/user/SocialUserForm.vue

@@ -1,139 +0,0 @@
-<template>
-  <Dialog v-model="dialogVisible" :title="dialogTitle">
-    <el-form
-      ref="formRef"
-      v-loading="formLoading"
-      :model="formData"
-      :rules="formRules"
-      label-width="150px"
-    >
-      <el-form-item label="社交平台" prop="type">
-        <el-radio-group v-model="formData.type">
-          <el-radio
-            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_SOCIAL_CLIENT_TYPE)"
-            :key="dict.value"
-            :label="dict.value"
-          >
-            {{ dict.label }}
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="社交 openid" prop="openid">
-        <el-input v-model="formData.openid" placeholder="请输入社交 openid" />
-      </el-form-item>
-      <el-form-item label="社交 token" prop="token">
-        <el-input v-model="formData.token" placeholder="请输入社交 token" />
-      </el-form-item>
-      <el-form-item label="原始 Token 数据" prop="rawTokenInfo">
-        <el-input v-model="formData.rawTokenInfo" placeholder="请输入原始 Token 数据" />
-      </el-form-item>
-      <el-form-item label="用户昵称" prop="nickname">
-        <el-input v-model="formData.nickname" placeholder="请输入用户昵称" />
-      </el-form-item>
-      <el-form-item label="用户头像" prop="avatar">
-        <el-input v-model="formData.avatar" placeholder="请输入用户头像" />
-      </el-form-item>
-      <el-form-item label="原始用户数据" prop="rawUserInfo">
-        <el-input v-model="formData.rawUserInfo" placeholder="请输入原始用户数据" />
-      </el-form-item>
-      <el-form-item label="最后一次的认证 code" prop="code">
-        <el-input v-model="formData.code" placeholder="请输入最后一次的认证 code" />
-      </el-form-item>
-      <el-form-item label="最后一次的认证 state" prop="state">
-        <el-input v-model="formData.state" placeholder="请输入最后一次的认证 state" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script lang="ts" setup>
-import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import * as SocialUserApi from '@/api/system/social/user'
-
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
-
-const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const formData = ref({
-  id: undefined,
-  type: undefined,
-  openid: undefined,
-  token: undefined,
-  rawTokenInfo: undefined,
-  nickname: undefined,
-  avatar: undefined,
-  rawUserInfo: undefined,
-  code: undefined,
-  state: 0
-})
-const formRules = reactive({
-  type: [{ required: true, message: '社交平台不能为空', trigger: 'blur' }],
-  openid: [{ required: true, message: '社交 openid 不能为空', trigger: 'blur' }],
-  nickname: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }]
-})
-const formRef = ref() // 表单 Ref
-
-/** 打开弹窗 */
-const open = async (type: string, id?: number) => {
-  dialogVisible.value = true
-  dialogTitle.value = t('action.' + type)
-  formType.value = type
-  resetForm()
-  // 修改时，设置数据
-  if (id) {
-    formLoading.value = true
-    try {
-      formData.value = await SocialUserApi.getSocialUser(id)
-    } finally {
-      formLoading.value = false
-    }
-  }
-}
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
-  // 提交请求
-  formLoading.value = true
-  try {
-    const data = formData.value as unknown as SocialUserApi.SocialUserVO
-    if (formType.value === 'update') {
-      await SocialUserApi.updateSocialUser(data)
-      message.success(t('common.updateSuccess'))
-    }
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: undefined,
-    type: undefined,
-    openid: undefined,
-    token: undefined,
-    rawTokenInfo: undefined,
-    nickname: undefined,
-    avatar: undefined,
-    rawUserInfo: undefined,
-    code: undefined,
-    state: 0
-  }
-  formRef.value?.resetFields()
-}
-</script>

src/views/system/social/user/index.vue

@@ -6,7 +6,7 @@
       :inline="true"
       :model="queryParams"
       class="-mb-15px"
-      label-width="68px"
+      label-width="120px"
     >
       <el-form-item label="社交平台" prop="type">
         <el-select
@@ -16,7 +16,7 @@
           placeholder="请选择社交平台"
         >
           <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_SOCIAL_CLIENT_TYPE)"
+            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_SOCIAL_TYPE)"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
@@ -32,6 +32,15 @@
           @keyup.enter="handleQuery"
         />
       </el-form-item>
+      <el-form-item label="社交 openid" prop="openid">
+        <el-input
+          v-model="queryParams.openid"
+          class="!w-240px"
+          clearable
+          placeholder="请输入社交 openid"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
       <el-form-item label="创建时间" prop="createTime">
         <el-date-picker
           v-model="queryParams.createTime"
@@ -61,21 +70,16 @@
     <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
       <el-table-column align="center" label="社交平台" prop="type">
         <template #default="scope">
-          <dict-tag :type="DICT_TYPE.SYSTEM_SOCIAL_CLIENT_TYPE" :value="scope.row.type" />
+          <dict-tag :type="DICT_TYPE.SYSTEM_SOCIAL_TYPE" :value="scope.row.type" />
         </template>
       </el-table-column>
       <el-table-column align="center" label="社交 openid" prop="openid" />
-      <el-table-column align="center" label="社交 token" prop="token" />
-      <el-table-column align="center" label="原始 Token 数据" prop="rawTokenInfo" />
       <el-table-column align="center" label="用户昵称" prop="nickname" />
       <el-table-column align="center" label="用户头像" prop="avatar">
         <template #default="{ row }">
           <el-image :src="row.avatar" class="h-30px w-30px" @click="imagePreview(row.avatar)" />
         </template>
       </el-table-column>
-      <el-table-column align="center" label="原始用户数据" prop="rawUserInfo" />
-      <el-table-column align="center" label="最后一次的认证 code" prop="code" />
-      <el-table-column align="center" label="最后一次的认证 state" prop="state" />
       <el-table-column
         :formatter="dateFormatter"
         align="center"
@@ -83,23 +87,22 @@
         prop="createTime"
         width="180px"
       />
+      <el-table-column
+        :formatter="dateFormatter"
+        align="center"
+        label="更新时间"
+        prop="updateTime"
+        width="180px"
+      />
       <el-table-column align="center" fixed="right" label="操作">
         <template #default="scope">
           <el-button
-            v-hasPermi="['system:social-user:update']"
+            v-hasPermi="['system:social-user:query']"
             link
             type="primary"
-            @click="openForm('update', scope.row.id)"
+            @click="openDetail(scope.row.id)"
           >
-            编辑
-          </el-button>
-          <el-button
-            v-hasPermi="['system:social-user:delete']"
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-          >
-            删除
+            详情
           </el-button>
         </template>
       </el-table-column>
@@ -113,15 +116,15 @@
     />
   </ContentWrap>
 
-  <!-- 表单弹窗：添加/修改 -->
-  <SocialUserForm ref="formRef" @success="getList" />
+  <!-- 表单弹窗：详情 -->
+  <SocialUserDetail ref="detailRef" />
 </template>
 
 <script lang="ts" setup>
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as SocialUserApi from '@/api/system/social/user'
-import SocialUserForm from './SocialUserForm.vue'
+import SocialUserDetail from './SocialUserDetail.vue'
 import { createImageViewer } from '@/components/ImageViewer'
 
 defineOptions({ name: 'SocialUser' })
@@ -137,13 +140,7 @@ const queryParams = reactive({
   pageSize: 10,
   type: undefined,
   openid: undefined,
-  token: undefined,
-  rawTokenInfo: undefined,
   nickname: undefined,
-  avatar: undefined,
-  rawUserInfo: undefined,
-  code: undefined,
-  state: undefined,
   createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
@@ -178,23 +175,10 @@ const imagePreview = (imgUrl: string) => {
   })
 }
 
-/** 修改操作 */
-const formRef = ref()
-const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
-}
-
-/** 删除按钮操作 */
-const handleDelete = async (id: number) => {
-  try {
-    // 删除的二次确认
-    await message.delConfirm()
-    // 发起删除
-    await SocialUserApi.deleteSocialUser(id)
-    message.success(t('common.delSuccess'))
-    // 刷新列表
-    await getList()
-  } catch {}
+/** 详情操作 */
+const detailRef = ref()
+const openDetail = (id: number) => {
+  detailRef.value.open(id)
 }
 
 /** 初始化 **/