add oauth loginlog & fix bugs

src/api/group.js

@@ -36,11 +36,3 @@ export function remove (data) {
     data,
   })
 }
-
-export function changePwd (data) {
-  return request({
-    url: '/group/changePwd',
-    method: 'post',
-    data,
-  })
-}

src/api/login_log.js

@@ -0,0 +1,16 @@
+import request from '@/utils/request'
+
+export function list (params) {
+  return request({
+    url: '/login_log/list',
+    params,
+  })
+}
+
+export function remove (data) {
+  return request({
+    url: '/login_log/delete',
+    method: 'post',
+    data,
+  })
+}

src/api/oauth.js

@@ -0,0 +1,76 @@
+import request from '@/utils/request'
+
+export function info (params) {
+  return request({
+    url: '/oauth/info',
+    params,
+  })
+
+}
+
+export function confirm (data) {
+  return request({
+    url: '/oauth/confirm',
+    method: 'post',
+    data,
+  })
+}
+
+export function bind (data) {
+  return request({
+    url: '/oauth/bind',
+    method: 'post',
+    data,
+  })
+}
+
+export function bindConfirm (data) {
+  return request({
+    url: '/oauth/bindConfirm',
+    method: 'post',
+    data,
+  })
+}
+export function unbind (data) {
+  return request({
+    url: '/oauth/unbind',
+    method: 'post',
+    data,
+  })
+}
+export function list (params) {
+  return request({
+    url: '/oauth/list',
+    params,
+  })
+}
+
+export function detail (id) {
+  return request({
+    url: `/oauth/detail/${id}`,
+  })
+}
+
+export function create (data) {
+  return request({
+    url: '/oauth/create',
+    method: 'post',
+    data,
+  })
+}
+
+export function update (data) {
+  return request({
+    url: '/oauth/update',
+    method: 'post',
+    data,
+  })
+}
+
+export function remove (data) {
+  return request({
+    url: '/oauth/delete',
+    method: 'post',
+    data,
+  })
+}

src/api/peer.js

@@ -36,11 +36,3 @@ export function remove (data) {
     data,
   })
 }
-
-export function changePwd (data) {
-  return request({
-    url: '/peer/changePwd',
-    method: 'post',
-    data,
-  })
-}

src/api/tag.js

@@ -37,10 +37,3 @@ export function remove (data) {
   })
 }
 
-export function changePwd (data) {
-  return request({
-    url: '/tag/changePwd',
-    method: 'post',
-    data,
-  })
-}

src/api/user.js

@@ -67,3 +67,10 @@ export function changeCurPwd (data) {
     data,
   })
 }
+
+export function myOauth () {
+  return request({
+    url: '/user/myOauth',
+    method: 'post',
+  })
+}

src/components/changePwdDialog.vue

@@ -0,0 +1,115 @@
+<template>
+  <el-dialog v-model="visible" width="50%">
+    <el-form ref="cpwd" :model="changePwdForm" :rules="chagePwdRules" label-width="120px" style="margin-top: 20px">
+      <el-form-item label="旧密码" prop="old_password">
+        <el-input v-model="changePwdForm.old_password" show-password></el-input>
+      </el-form-item>
+      <el-form-item label="新密码" prop="new_password">
+        <el-input v-model="changePwdForm.new_password" show-password></el-input>
+      </el-form-item>
+      <el-form-item label="确认密码" prop="confirmPwd">
+        <el-input v-model="changePwdForm.confirmPwd" show-password></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="cancelChangePwd">取消</el-button>
+        <el-button type="primary" @click="changePassword">确定</el-button>
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script setup>
+
+  import { reactive, ref } from 'vue'
+  import { ElMessageBox } from 'element-plus'
+  import { changeCurPwd } from '@/api/user'
+  import { useUserStore } from '@/store/user'
+
+  const props = defineProps({
+    visible: Boolean,
+  })
+
+  const emit = defineEmits(['update:visible'])
+
+  // Watch for changes to the prop and emit an event if necessary
+  // watch(() => props.visible, (newVal) => {
+  //   emit('update:visible', newVal);
+  // });
+  const showChangePwd = () => {
+    emit('update:visible', true)
+    changePwdForm.old_password = ''
+    changePwdForm.new_password = ''
+    changePwdForm.confirmPwd = ''
+  }
+  const changePwdForm = reactive({
+    old_password: '',
+    new_password: '',
+    confirmPwd: '',
+  })
+  const chagePwdRules = reactive({
+    old_password: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
+    new_password: [
+      { required: true, message: '请输入新密码', trigger: 'blur' },
+      {
+        validator: (rule, value, callback) => {
+          if (value === changePwdForm.old_password) {
+            callback(new Error('新密码不能与旧密码相同'))
+          } else {
+            callback()
+          }
+        },
+        trigger: 'blur',
+      }],
+    confirmPwd: [
+      { required: true, message: '请再次输入新密码', trigger: 'blur' },
+      {
+        validator: (rule, value, callback) => {
+          if (value !== changePwdForm.new_password) {
+            callback(new Error('两次输入密码不一致'))
+          } else {
+            callback()
+          }
+        },
+        trigger: 'blur',
+      },
+    ],
+  })
+  const cpwd = ref(null)
+  const cancelChangePwd = () => {
+    emit('update:visible', false)
+  }
+
+  const userStore = useUserStore()
+
+  const changePassword = async () => {
+    //验证
+    const valid = await cpwd.value.validate().catch(_ => false)
+    if (!valid) {
+      return
+    }
+    console.log('changePassword')
+    const confirm = await ElMessageBox.confirm('确定修改密码么？', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+    }).catch(_ => false)
+    if (!confirm) {
+      return
+    }
+    const res = await changeCurPwd(changePwdForm).catch(_ => false)
+    if (!res) {
+      return
+    }
+    ElMessageBox.alert('修改成功', '修改密码', {
+      autofocus: true,
+      confirmButtonText: 'OK',
+      callback: (action) => {
+        userStore.logout()
+        window.location.reload()
+      },
+    })
+  }
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/layout/components/setting/index.vue

@@ -16,31 +16,14 @@
         </el-dropdown-menu>
       </template>
     </el-dropdown>
-    <el-dialog v-model="changePwdVisible" width="50%">
+    <changePwdDialog v-model:visible="changePwdVisible"></changePwdDialog>
-      <el-form ref="cpwd" :model="changePwdForm" :rules="chagePwdRules" label-width="120px" style="margin-top: 20px">
-        <el-form-item label="旧密码" prop="old_password">
-          <el-input v-model="changePwdForm.old_password" show-password></el-input>
-        </el-form-item>
-        <el-form-item label="新密码" prop="new_password">
-          <el-input v-model="changePwdForm.new_password" show-password></el-input>
-        </el-form-item>
-        <el-form-item label="确认密码" prop="confirmPwd">
-          <el-input v-model="changePwdForm.confirmPwd" show-password></el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-button @click="changePwdVisible=false">取消</el-button>
-          <el-button type="primary" @click="changePassword">确定</el-button>
-        </el-form-item>
-      </el-form>
-    </el-dialog>
   </div>
 </template>
 
 <script setup>
   import { useUserStore } from '@/store/user'
-  import { changeCurPwd } from '@/api/user'
+  import changePwdDialog from '@/components/changePwdDialog.vue'
-  import { ElMessage, ElMessageBox } from 'element-plus'
+  import { ref } from 'vue'
-  import { reactive, ref } from 'vue'
 
   const userStore = useUserStore()
   const user = userStore
@@ -53,69 +36,6 @@
   const changePwdVisible = ref(false)
   const showChangePwd = () => {
     changePwdVisible.value = true
-    changePwdForm.old_password = ''
-    changePwdForm.new_password = ''
-    changePwdForm.confirmPwd = ''
-  }
-  const changePwdForm = reactive({
-    old_password: '',
-    new_password: '',
-    confirmPwd: '',
-  })
-  const chagePwdRules = reactive({
-    old_password: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
-    new_password: [
-      { required: true, message: '请输入新密码', trigger: 'blur' },
-      {
-        validator: (rule, value, callback) => {
-          if (value === changePwdForm.old_password) {
-            callback(new Error('新密码不能与旧密码相同'))
-          } else {
-            callback()
-          }
-        },
-        trigger: 'blur',
-      }],
-    confirmPwd: [
-      { required: true, message: '请再次输入新密码', trigger: 'blur' },
-      {
-        validator: (rule, value, callback) => {
-          if (value !== changePwdForm.new_password) {
-            callback(new Error('两次输入密码不一致'))
-          } else {
-            callback()
-          }
-        },
-        trigger: 'blur',
-      },
-    ],
-  })
-  const cpwd = ref(null)
-  const changePassword = async () => {
-    //验证
-    const valid = await cpwd.value.validate().catch(_ => false)
-    if (!valid) {
-      return
-    }
-    console.log('changePassword')
-    const confirm = await ElMessageBox.confirm('确定修改密码么？', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-    }).catch(_ => false)
-    if (!confirm) {
-      return
-    }
-    const res = await changeCurPwd(changePwdForm).catch(_ => false)
-    if (!res) {
-      return
-    }
-    ElMessageBox.alert('修改成功', '修改密码', {
-      autofocus: true,
-      confirmButtonText: 'OK',
-      callback: (action) => {
-        logout()
-      },
-    })
   }
 </script>
 

src/router/index.js

@@ -13,7 +13,16 @@ const constantRoutes = [
     component: () => import('@/views/error-page/404.vue'),
     hidden: true,
   },
-
+  {
+    path: '/oauth/:code',
+    component: () => import('@/views/oauth/login.vue'),
+    hidden: true,
+  },
+  {
+    path: '/oauth/bind/:code',
+    component: () => import('@/views/oauth/bind.vue'),
+    hidden: true,
+  },
 ]
 export const asyncRoutes = [
   // {
@@ -35,18 +44,24 @@ export const asyncRoutes = [
   {
     path: '/my',
     name: 'My',
-    redirect: '/my/tag/index',
+    redirect: '/my/info',
     meta: { title: '我的', icon: 'UserFilled' },
     component: () => import('@/layout/index.vue'),
     children: [
       {
         path: '/',
+        name: 'MyInfo',
+        meta: { title: '个人信息', icon: 'User' /*keepAlive: true*/ },
+        component: () => import('@/views/my/info.vue'),
+      },
+      {
+        path: 'address_book',
         name: 'MyAddressBookList',
         meta: { title: '地址簿管理', icon: 'Notebook' /*keepAlive: true*/ },
         component: () => import('@/views/my/address_book/index.vue'),
       },
       {
-        path: 'tag/index',
+        path: 'tag',
         name: 'MyTagList',
         meta: { title: '标签管理', icon: 'CollectionTag' /*keepAlive: true*/ },
         component: () => import('@/views/my/tag/index.vue'),
@@ -103,7 +118,18 @@ export const asyncRoutes = [
         meta: { title: '标签管理', icon: 'CollectionTag' /*keepAlive: true*/ },
         component: () => import('@/views/tag/index.vue'),
       },
-
+      {
+        path: '/oauth',
+        name: 'Oauth',
+        meta: { title: 'Oauth管理', icon: 'Link' /*keepAlive: true*/ },
+        component: () => import('@/views/oauth/index.vue'),
+      },
+      {
+        path: '/loginLog',
+        name: 'LoginLog',
+        meta: { title: '登录日志', icon: 'List' /*keepAlive: true*/ },
+        component: () => import('@/views/login/log.vue'),
+      },
     ],
   },
 ]

src/views/login/log.js

@@ -0,0 +1,61 @@
+import { reactive } from 'vue'
+import { list, remove } from '@/api/login_log'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useRoute } from 'vue-router'
+
+export function useRepositories () {
+  const route = useRoute()
+  const user_id = route.query?.user_id
+
+  const listRes = reactive({
+    list: [], total: 0, loading: false,
+  })
+  const listQuery = reactive({
+    page: 1,
+    page_size: 10,
+    is_my: 0,
+    user_id: user_id ? parseInt(user_id) : null,
+  })
+
+  const getList = async () => {
+    listRes.loading = true
+    const res = await list(listQuery).catch(_ => false)
+    listRes.loading = false
+    if (res) {
+      listRes.list = res.data.list
+      listRes.total = res.data.total
+    }
+  }
+  const handlerQuery = () => {
+    if (listQuery.page === 1) {
+      getList()
+    } else {
+      listQuery.page = 1
+    }
+  }
+
+  const del = async (row) => {
+    const cf = await ElMessageBox.confirm('确定删除么?', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }).catch(_ => false)
+    if (!cf) {
+      return false
+    }
+
+    const res = await remove({ id: row.id }).catch(_ => false)
+    if (res) {
+      ElMessage.success('操作成功')
+      getList()
+    }
+  }
+
+  return {
+    listRes,
+    listQuery,
+    getList,
+    handlerQuery,
+    del,
+  }
+}

src/views/login/log.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <el-card class="list-query" shadow="hover">
+      <el-form inline label-width="60px">
+        <el-form-item label="用户">
+          <el-select v-model="listQuery.user_id" clearable>
+            <el-option
+                v-for="item in allUsers"
+                :key="item.id"
+                :label="item.username"
+                :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handlerQuery">筛选</el-button>
+          <el-button type="danger" @click="toAdd">添加</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card class="list-body" shadow="hover">
+      <!--      <el-tag type="danger" style="margin-bottom: 10px">不建议在此操作地址簿，可能会造成数据不同步</el-tag>-->
+      <el-table :data="listRes.list" v-loading="listRes.loading" border>
+        <el-table-column prop="id" label="id" align="center" width="100"/>
+        <el-table-column label="所属用户" align="center" width="120">
+          <template #default="{row}">
+            <span v-if="row.user_id"> <el-tag>{{ allUsers?.find(u => u.id === row.user_id)?.username }}</el-tag> </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="client" label="client" align="center" width="120"/>
+        <el-table-column prop="uuid" label="uuid" align="center"/>
+        <el-table-column prop="ip" label="ip" align="center" width="150"/>
+        <el-table-column prop="type" label="type" align="center" width="100"/>
+        <el-table-column prop="platform" label="platform" align="center" width="120"/>
+        <el-table-column prop="created_at" label="时间" align="center"/>
+        <el-table-column label="操作" align="center" width="400">
+          <template #default="{row}">
+            <el-button type="danger" @click="del(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-card class="list-page" shadow="hover">
+      <el-pagination background
+                     layout="prev, pager, next, sizes, jumper"
+                     :page-sizes="[10,20,50,100]"
+                     v-model:page-size="listQuery.page_size"
+                     v-model:current-page="listQuery.page"
+                     :total="listRes.total">
+      </el-pagination>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+  import { onActivated, onMounted, watch } from 'vue'
+  import { loadAllUsers } from '@/global'
+  import { useRepositories } from '@/views/login/log.js'
+
+  const { allUsers, getAllUsers } = loadAllUsers()
+  getAllUsers()
+
+  const {
+    listRes,
+    listQuery,
+    getList,
+    handlerQuery,
+    del,
+  } = useRepositories()
+
+  onMounted(getList)
+  onActivated(getList)
+
+  watch(() => listQuery.page, getList)
+
+  watch(() => listQuery.page_size, handlerQuery)
+
+</script>
+
+<style scoped lang="scss">
+.list-query .el-select {
+  --el-select-width: 160px;
+}
+
+
+</style>

src/views/login/login.vue

@@ -28,9 +28,22 @@
       const userStore = useUserStore()
       const route = useRoute()
       const router = useRouter()
+
+      let platform = window.navigator.platform
+      if (navigator.platform.indexOf('Mac') === 0) {
+        platform = 'mac'
+      } else if (navigator.platform.indexOf('Win') === 0) {
+        platform = 'windows'
+      } else if (navigator.platform.indexOf('Linux armv') === 0) {
+        platform = 'android'
+      } else if (navigator.platform.indexOf('Linux') === 0) {
+        platform = 'linux'
+      }
+
       const form = reactive({
         username: '',
         password: '',
+        platform: platform,
       })
       const redirect = route.query?.redirect
       const login = async () => {
@@ -50,12 +63,13 @@
 </script>
 
 <style scoped lang="scss">
-  .login {
+.login {
   width: 100vw;
   height: 100vh;
   background-color: #2d3a4b;
-    padding-top: 200px;
+  padding-top: 25vh;
   box-sizing: border-box;
+
   .tips {
     font-size: 12px;
     color: #fff;
@@ -63,11 +77,12 @@
   }
 
   .login-card {
-      width: 500px;
+    max-width: 500px;
     background-color: #283342;
     color: #fff;
     border: none;
     margin: 0 auto;
+
     .el-form-item {
 
       ::v-deep(.el-form-item__label) {
@@ -87,5 +102,5 @@
       }
     }
   }
-  }
+}
 </style>

src/views/my/info.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <el-card title="个人信息">
+      <el-form class="info-form" ref="form" label-width="120px" label-suffix="：">
+        <el-form-item label="用户名">
+          <div>{{ userStore.username }}</div>
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-button type="danger" @click="showChangePwd">修改密码</el-button>
+        </el-form-item>
+        <el-form-item label="OIDC">
+          <el-table :data="oidcData" border fit>
+            <el-table-column label="平台" prop="third_type" align="center"></el-table-column>
+            <el-table-column label="状态" prop="status" align="center">
+              <template #default="{ row }">
+                <el-tag v-if="row.status === 1" type="success">已绑定</el-tag>
+                <el-tag v-else type="danger">未绑定</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" width="200">
+              <template #default="{ row }">
+                <el-button v-if="row.status === 1" type="danger" size="small" @click="toUnBind(row)">解除绑定</el-button>
+                <el-button v-else type="success" size="small" @click="toBind(row)">去绑定</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <changePwdDialog v-model:visible="changePwdVisible"></changePwdDialog>
+  </div>
+</template>
+
+<script setup>
+  import changePwdDialog from '@/components/changePwdDialog.vue'
+  import { ref } from 'vue'
+  import { useUserStore } from '@/store/user'
+  import { bind, unbind } from '@/api/oauth'
+  import { myOauth } from '@/api/user'
+  import { ElMessageBox } from 'element-plus'
+
+  const userStore = useUserStore()
+  const changePwdVisible = ref(false)
+  const showChangePwd = () => {
+    changePwdVisible.value = true
+  }
+  const oidcData = ref([])
+  const getMyOauth = async () => {
+    const res = await myOauth().catch(_ => false)
+    if (res) {
+      oidcData.value = res.data
+    }
+
+  }
+  getMyOauth()
+  const toBind = async (row) => {
+    const res = await bind({ op: row.third_type }).catch(_ => false)
+    if (res) {
+      const { code, url } = res.data
+      window.open(url)
+    }
+  }
+  const toUnBind = async (row) => {
+    const cf = await ElMessageBox.confirm('确定解除绑定么?', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }).catch(_ => false)
+    if (!cf) {
+      return false
+    }
+    const res = await unbind({ op: row.third_type }).catch(_ => false)
+    if (res) {
+      getMyOauth()
+    }
+
+  }
+</script>
+
+<style scoped lang="scss">
+.info-form {
+  width: 600px;
+  margin: 0 auto;
+
+}
+</style>

src/views/oauth/bind.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="oauth">
+    <el-card class="card">
+      <h2>您正在授权绑定</h2>
+      <el-form class="info" label-width="100px">
+        <el-form-item label="平台">
+          <div class="impt">{{ oauthInfo.op }}</div>
+        </el-form-item>
+        <el-form-item label="用户名">
+          <div class="impt">{{ oauthInfo.third_name }}</div>
+        </el-form-item>
+        <el-form-item label-width="0">
+          <el-button style="width: 100%" v-if="!resStatus" type="success" size="large" @click="toConfirm">绑定</el-button>
+        </el-form-item>
+        <el-form-item label-width="0">
+          <el-button style="width: 100%" size="large" @click="out">关闭页面</el-button>
+        </el-form-item>
+      </el-form>
+      如果不是您操作的授权，请直接关闭页面
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+  import { ref, onMounted } from 'vue'
+  import { info, confirm, bindConfirm } from '@/api/oauth'
+  import { useRoute, useRouter } from 'vue-router'
+  import { ElMessage } from 'element-plus'
+
+  const oauthInfo = ref({})
+  const route = useRoute()
+  const router = useRouter()
+  const code = route.params?.code
+  if (!code) {
+    router.push('/')
+  }
+  const getInfo = async () => {
+    const res = await info({ code }).catch(_ => false)
+    if (res) {
+      oauthInfo.value = res.data
+    } else {
+      router.push('/')
+    }
+  }
+  getInfo()
+  const resStatus = ref(0)
+  const toConfirm = async () => {
+    const res = await bindConfirm({ code }).catch(_ => false)
+    if (res) {
+      resStatus.value = 1
+      ElMessage.success('操作成功,3秒后将自动关闭本页面')
+      setTimeout(_ => {
+        out()
+      }, 3000)
+    }
+  }
+  const out = () => {
+    window.close()
+  }
+</script>
+
+<style scoped lang="scss">
+.oauth {
+  width: 100vw;
+  height: 100vh;
+  background-color: #2d3a4b;
+  padding-top: 25vh;
+  box-sizing: border-box;
+
+  .card {
+    max-width: 500px;
+    background-color: #283342;
+    color: #fff;
+    border: none;
+    margin: 0 auto;
+    text-align: center;
+
+    .info {
+      display: block;
+      line-height: 30px;
+      margin-bottom: 50px;
+
+      ::v-deep(.el-form-item__label) {
+        color: #fff;
+      }
+    }
+
+    .impt {
+      font-weight: bold;
+      font-size: 20px;
+    }
+  }
+}
+</style>

src/views/oauth/index.vue

@@ -0,0 +1,177 @@
+<template>
+  <div>
+    <el-card class="list-query" shadow="hover">
+      <el-form inline label-width="60px">
+        <el-form-item>
+          <el-button type="primary" @click="handlerQuery">筛选</el-button>
+          <el-button type="danger" @click="toAdd">添加</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card class="list-body" shadow="hover">
+      <el-table :data="listRes.list" v-loading="listRes.loading" border>
+        <el-table-column prop="id" label="id" align="center"/>
+        <el-table-column prop="op" label="名称" align="center"/>
+        <el-table-column prop="auto_register" label="自动注册" align="center"/>
+        <el-table-column prop="created_at" label="创建时间" align="center"/>
+        <el-table-column prop="updated_at" label="更新时间" align="center"/>
+        <el-table-column label="操作" align="center">
+          <template #default="{row}">
+            <el-button @click="toEdit(row)">编辑</el-button>
+            <el-button type="danger" @click="del(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-card class="list-page" shadow="hover">
+      <el-pagination background
+                     layout="prev, pager, next, sizes, jumper"
+                     :page-sizes="[10,20,50,100]"
+                     v-model:page-size="listQuery.page_size"
+                     v-model:current-page="listQuery.page"
+                     :total="listRes.total">
+      </el-pagination>
+    </el-card>
+    <el-dialog v-model="formVisible" :title="!formData.id?'创建':'修改'" width="800">
+      <el-form class="dialog-form" ref="form" :model="formData" :rules="rules" label-width="120px">
+        <el-form-item label="ClientId" prop="client_id">
+          <el-input v-model="formData.client_id"></el-input>
+        </el-form-item>
+        <el-form-item label="ClientSecret" prop="client_secret">
+          <el-input v-model="formData.client_secret"></el-input>
+        </el-form-item>
+        <el-form-item label="RedirectUrl" prop="redirect_url">
+          <el-input v-model="formData.redirect_url"></el-input>
+        </el-form-item>
+        <el-form-item label="类型" prop="op" >
+          <el-radio-group v-model="formData.op" :disabled="!!formData.id">
+            <el-radio v-for="item in ops" :key="item.value" :label="item.value" style="display: block">
+              {{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="自动注册" prop="open_auto_register">
+          <el-switch v-model="formData.auto_register"
+                     :active-value="true"
+                     :inactive-value="false"
+          ></el-switch>
+          <div style="display: block;margin-left: 10px">如果开启,当用户使用oauth登录而没绑定时,会自动注册一个账号</div>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="formVisible = false">取消</el-button>
+          <el-button @click="submit" type="primary">提交</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+  import { onMounted, reactive, watch, ref, onActivated } from 'vue'
+  import { list, create, update, detail, remove } from '@/api/oauth'
+  import { ElMessage, ElMessageBox } from 'element-plus'
+
+  const listRes = reactive({
+    list: [], total: 0, loading: false,
+  })
+  const listQuery = reactive({
+    page: 1,
+    page_size: 10,
+  })
+  const ops = [
+    { value: 'github', label: 'Github' },
+  ]
+  const getList = async () => {
+    listRes.loading = true
+    const res = await list(listQuery).catch(_ => false)
+    listRes.loading = false
+    if (res) {
+      listRes.list = res.data.list
+      listRes.total = res.data.total
+    }
+  }
+  const handlerQuery = () => {
+    if (listQuery.page === 1) {
+      getList()
+    } else {
+      listQuery.page = 1
+    }
+  }
+
+  const del = async (row) => {
+    const cf = await ElMessageBox.confirm('确定删除么?', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }).catch(_ => false)
+    if (!cf) {
+      return false
+    }
+
+    const res = await remove({ id: row.id }).catch(_ => false)
+    if (res) {
+      ElMessage.success('操作成功')
+      getList()
+    }
+  }
+  onMounted(getList)
+  onActivated(getList)
+
+  watch(() => listQuery.page, getList)
+
+  watch(() => listQuery.page_size, handlerQuery)
+
+  const formVisible = ref(false)
+  const formData = reactive({
+    id: 0,
+    op: '',
+    client_id: '',
+    client_secret: '',
+    redirect_url: '',
+    auto_register: false,
+  })
+  const rules = {
+    client_id: [{ required: true, message: '请输入ClientId', trigger: 'blur' }],
+    client_secret: [{ required: true, message: '请输入ClientSecret', trigger: 'blur' }],
+    redirect_url: [{ required: true, message: '请输入RedirectUrl', trigger: 'blur' }],
+    op: [{ required: true, message: '请选择类型', trigger: 'blur' }],
+  }
+  const toEdit = (row) => {
+    formVisible.value = true
+    formData.id = row.id
+    formData.op = row.op
+    formData.client_id = row.client_id
+    formData.client_secret = row.client_secret
+    formData.redirect_url = row.redirect_url
+    formData.auto_register = row.auto_register
+
+  }
+  const toAdd = () => {
+    formVisible.value = true
+    formData.id = 0
+    formData.op = ''
+    formData.client_id = ''
+    formData.client_secret = ''
+    formData.redirect_url = ''
+    formData.auto_register = false
+  }
+  const form = ref(null)
+  const submit = async () => {
+    const v = await form.value.validate().catch(err => false)
+    if (!v) {
+      return
+    }
+    const api = formData.id ? update : create
+    const res = await api(formData).catch(_ => false)
+    if (res) {
+      ElMessage.success('操作成功')
+      formVisible.value = false
+      getList()
+    }
+  }
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/oauth/login.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="oauth">
+    <el-card class="card">
+      <h2>您正在授权登录</h2>
+      <el-form class="info" label-width="100px">
+        <el-form-item label="设备">
+          <div class="impt">{{ oauthInfo.device_name }}</div>
+        </el-form-item>
+        <el-form-item label="ID">
+          <div class="impt">{{ oauthInfo.id }}</div>
+        </el-form-item>
+        <el-form-item label-width="0">
+          <el-button style="width: 100%" v-if="!resStatus" type="success" size="large" @click="toConfirm">授权登录</el-button>
+        </el-form-item>
+        <el-form-item label-width="0">
+          <el-button style="width: 100%" size="large" @click="out">关闭页面</el-button>
+        </el-form-item>
+      </el-form>
+      如果不是您操作的授权，请直接关闭页面
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+  import { ref, onMounted } from 'vue'
+  import { info, confirm } from '@/api/oauth'
+  import { useRoute, useRouter } from 'vue-router'
+  import { ElMessage } from 'element-plus'
+
+  const oauthInfo = ref({})
+  const route = useRoute()
+  const router = useRouter()
+  const code = route.params?.code
+  if (!code) {
+    // router.push('/')
+  }
+  const getInfo = async () => {
+    const res = await info({ code }).catch(_ => false)
+    if (res) {
+      oauthInfo.value = res.data
+    } else {
+      // router.push('/')
+    }
+  }
+  getInfo()
+  const resStatus = ref(0)
+  const toConfirm = async () => {
+    const res = await confirm({ code }).catch(_ => false)
+    if (res) {
+      resStatus.value = 1
+      ElMessage.success('操作成功,3秒后将自动关闭本页面')
+      setTimeout(_ => {
+        out()
+      }, 3000)
+    }
+  }
+  const out = () => {
+    window.close()
+  }
+
+</script>
+
+<style scoped lang="scss">
+.oauth {
+  width: 100vw;
+  height: 100vh;
+  background-color: #2d3a4b;
+  padding-top: 25vh;
+  box-sizing: border-box;
+
+  .card {
+    max-width: 500px;
+    background-color: #283342;
+    color: #fff;
+    border: none;
+    margin: 0 auto;
+    text-align: center;
+
+    .info {
+      display: block;
+      line-height: 30px;
+      margin-bottom: 50px;
+
+      ::v-deep(.el-form-item__label) {
+        color: #fff;
+      }
+    }
+
+    .impt {
+      font-weight: bold;
+      font-size: 20px;
+    }
+  }
+}
+</style>