github
/
halo-admin
mirror of https://github.com/halo-dev/halo-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

feat: add user personal access token settings page 

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/581/head
Ryan Wang 2022-05-31 11:34:48 +08:00
parent 5c9fd988f5
commit 839024435d
8 changed files with 527 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/core/icons.ts
View File

@ -77,6 +77,8 @@ import IconUpload from "~icons/ri/upload-cloud-2-line";
import IconShieldUser from "~icons/ri/shield-user-line";
// @ts-ignore
import IconGitBranch from "~icons/ri/git-branch-line";
// @ts-ignore
import IconStopCircle from "~icons/ri/stop-circle-line";
export {
IconDashboard,
@ -118,4 +120,5 @@ export {
IconUpload,
IconShieldUser,
IconGitBranch,
IconStopCircle,
};

5
src/layouts/UserProfileLayout.vue
View File

@ -13,6 +13,11 @@ const tabs = [
label: "详情",
routeName: "UserDetail",
},
{
id: "tokens",
label: "个人令牌",
routeName: "PersonalAccessTokens",
},
{
id: "profile-modification",
label: "资料修改",

6
src/router/routes.config.ts
View File

@ -28,6 +28,7 @@ import RoleDetail from "../views/system/roles/RoleDetail.vue";
import UserDetail from "../views/system/users/UserDetail.vue";
import ProfileModification from "../views/system/users/ProfileModification.vue";
import PasswordChange from "../views/system/users/PasswordChange.vue";
import PersonalAccessTokens from "../views/system/users/PersonalAccessTokens.vue";
import GeneralSettings from "../views/system/settings/GeneralSettings.vue";
import NotificationSettings from "../views/system/settings/NotificationSettings.vue";
@ -199,6 +200,11 @@ export const routes: Array<RouteRecordRaw> = [
name: "PasswordChange",
component: PasswordChange,
},
{
path: "tokens",
name: "PersonalAccessTokens",
component: PersonalAccessTokens,
},
],
},
{

193
src/views/system/roles/RoleDetail.vue
View File

@ -73,6 +73,14 @@ const handleRouteToUser = (username: string) => {
{{ role.name }}
</dd>
</div>
<div
class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
>
<dt class="text-sm font-medium text-gray-900">别名</dt>
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
{{ role.slug }}
</dd>
</div>
<div
class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
>
@ -154,6 +162,191 @@ const handleRouteToUser = (username: string) => {
</dl>
</div>
</div>
<div v-if="roleActiveId === 'permissions'">
<div>
<dl class="divide-y divide-gray-100">
<div
class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
>
<dt class="text-sm font-medium text-gray-900">
Posts Management
</dt>
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<ul class="space-y-2">
<li>
<div
class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
/>
<div class="inline-flex flex-col gap-y-3">
<span class="font-medium text-gray-900">
Posts Management
</span>
<span class="text-xs text-gray-400">
依赖于 Posts View
</span>
</div>
</div>
</li>
<li>
<div
class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-themeable-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
/>
<div class="inline-flex flex-col gap-y-3">
<span class="font-medium text-gray-900">
Posts View
</span>
</div>
</div>
</li>
</ul>
</dd>
</div>
<div
class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
>
<dt class="text-sm font-medium text-gray-900">
Categories Management
</dt>
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<ul class="space-y-2">
<li>
<div
class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
/>
<div class="inline-flex flex-col gap-y-3">
<span class="font-medium text-gray-900">
Categories Management
</span>
<span class="text-xs text-gray-400">
依赖于 Categories View
</span>
</div>
</div>
</li>
<li>
<div
class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-themeable-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
/>
<div class="inline-flex flex-col gap-y-3">
<span class="font-medium text-gray-900">
Categories View
</span>
</div>
</div>
</li>
</ul>
</dd>
</div>
<div
class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
>
<dt class="text-sm font-medium text-gray-900">Tags Management</dt>
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<ul class="space-y-2">
<li>
<div
class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
/>
<div class="inline-flex flex-col gap-y-3">
<span class="font-medium text-gray-900">
Tags Management
</span>
<span class="text-xs text-gray-400">
依赖于 Tags View
</span>
</div>
</div>
</li>
<li>
<div
class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-themeable-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
/>
<div class="inline-flex flex-col gap-y-3">
<span class="font-medium text-gray-900">
Tags View
</span>
</div>
</div>
</li>
</ul>
</dd>
</div>
<div
class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
>
<dt class="text-sm font-medium text-gray-900">
Plugins Management
</dt>
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<ul class="space-y-2">
<li>
<div
class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
/>
<div class="inline-flex flex-col gap-y-3">
<span class="font-medium text-gray-900">
Plugins Management
</span>
<span class="text-xs text-gray-400">
依赖于 Plugins View
</span>
</div>
</div>
</li>
<li>
<div
class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-themeable-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
/>
<div class="inline-flex flex-col gap-y-3">
<span class="font-medium text-gray-900">
Plugins View
</span>
</div>
</div>
</li>
</ul>
</dd>
</div>
</dl>
<div class="p-4">
<VButton type="secondary">保存</VButton>
</div>
</div>
</div>
</VCard>
</div>
</template>

8
src/views/system/roles/RoleList.vue
View File

@ -4,6 +4,7 @@ import { VButton } from "@/components/base/button";
import { VCard } from "@/components/base/card";
import { VInput } from "@/components/base/input";
import { VTag } from "@/components/base/tag";
import { VModal } from "@/components/base/modal";
import { VSpace } from "@/components/base/space";
import {
IconAddCircle,
@ -13,6 +14,9 @@ import {
} from "@/core/icons";
import { roles } from "./roles-mock";
import { useRouter } from "vue-router";
import { ref } from "vue";
const createVisible = ref(false);
const router = useRouter();
@ -21,12 +25,14 @@ const handleRouteToDetail = (id: number) => {
};
</script>
<template>
<VModal v-model:visible="createVisible" title="新建角色"></VModal>
<VPageHeader title="角色">
<template #icon>
<IconShieldUser class="mr-2 self-center" />
</template>
<template #actions>
<VButton type="secondary">
<VButton type="secondary" @click="createVisible = true">
<template #icon>
<IconAddCircle class="h-full w-full" />
</template>

4
src/views/system/roles/roles-mock.ts
View File

@ -2,24 +2,28 @@ export const roles = [
{
id: 1,
name: "Super Administrator",
slug: "super-administrator",
permissions: 100,
users: 10,
},
{
id: 2,
name: "Administrator",
slug: "administrator",
permissions: 32,
users: 5,
},
{
id: 3,
name: "Editor",
slug: "editor",
permissions: 10,
users: 3,
},
{
id: 4,
name: "Guest",
slug: "guest",
permissions: 5,
users: 10232,
},

308
src/views/system/users/PersonalAccessTokens.vue Normal file
View File

@ -0,0 +1,308 @@
<script lang="ts" setup>
import { VButton } from "@/components/base/button";
import { VSpace } from "@/components/base/space";
import { VModal } from "@/components/base/modal";
import { VInput } from "@/components/base/input";
import { VTabItem, VTabs } from "@/components/base/tabs";
import { IconAddCircle, IconDeleteBin, IconStopCircle } from "@/core/icons";
import { ref } from "vue";
const createVisible = ref(false);
const createActiveId = ref("general");
const tokens = ref([
{
id: 1,
name: "小程序",
token: "...SlR6vi_BkwqjYcVgHrhA",
},
{
id: 2,
name: "App",
token: "...SlR6vi_BkwqjYcVgHrhA",
},
{
id: 3,
name: "Raycast",
token: "...SlR6vi_BkwqjYcVgHrhA",
},
]);
</script>
<template>
<VModal v-model:visible="createVisible" :width="720" title="创建个人令牌">
<VTabs v-model:active-id="createActiveId" type="outline">
<VTabItem id="general" label="基础信息">
<form>
<div class="space-y-6 divide-y-0 sm:divide-y sm:divide-gray-200">
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
<label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
>
名称
</label>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<VInput></VInput>
</div>
</div>
<div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
<label
class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
>
失效日期
</label>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<VInput></VInput>
</div>
</div>
</div>
</form>
</VTabItem>
<VTabItem id="permissions" label="权限">
<div>
<dl class="divide-y divide-gray-100">
<div
class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
>
<dt class="text-sm font-medium text-gray-900">
Posts Management
</dt>
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<ul class="space-y-2">
<li>
<div
class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
/>
<div class="inline-flex flex-col gap-y-3">
<span class="font-medium text-gray-900">
Posts Management
</span>
<span class="text-xs text-gray-400">
依赖于 Posts View
</span>
</div>
</div>
</li>
<li>
<div
class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-themeable-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
/>
<div class="inline-flex flex-col gap-y-3">
<span class="font-medium text-gray-900">
Posts View
</span>
</div>
</div>
</li>
</ul>
</dd>
</div>
<div
class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
>
<dt class="text-sm font-medium text-gray-900">
Categories Management
</dt>
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<ul class="space-y-2">
<li>
<div
class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
/>
<div class="inline-flex flex-col gap-y-3">
<span class="font-medium text-gray-900">
Categories Management
</span>
<span class="text-xs text-gray-400">
依赖于 Categories View
</span>
</div>
</div>
</li>
<li>
<div
class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-themeable-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
/>
<div class="inline-flex flex-col gap-y-3">
<span class="font-medium text-gray-900">
Categories View
</span>
</div>
</div>
</li>
</ul>
</dd>
</div>
<div
class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
>
<dt class="text-sm font-medium text-gray-900">Tags Management</dt>
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<ul class="space-y-2">
<li>
<div
class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
/>
<div class="inline-flex flex-col gap-y-3">
<span class="font-medium text-gray-900">
Tags Management
</span>
<span class="text-xs text-gray-400">
依赖于 Tags View
</span>
</div>
</div>
</li>
<li>
<div
class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-themeable-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
/>
<div class="inline-flex flex-col gap-y-3">
<span class="font-medium text-gray-900">
Tags View
</span>
</div>
</div>
</li>
</ul>
</dd>
</div>
<div
class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
>
<dt class="text-sm font-medium text-gray-900">
Plugins Management
</dt>
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<ul class="space-y-2">
<li>
<div
class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
/>
<div class="inline-flex flex-col gap-y-3">
<span class="font-medium text-gray-900">
Plugins Management
</span>
<span class="text-xs text-gray-400">
依赖于 Plugins View
</span>
</div>
</div>
</li>
<li>
<div
class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-themeable-primary"
>
<input
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
/>
<div class="inline-flex flex-col gap-y-3">
<span class="font-medium text-gray-900">
Plugins View
</span>
</div>
</div>
</li>
</ul>
</dd>
</div>
</dl>
</div>
</VTabItem>
</VTabs>
<template #footer>
<VButton type="secondary">创建</VButton>
</template>
</VModal>
<div class="mt-5 flex justify-end">
<VSpace>
<VButton size="sm" type="danger">
<template #icon>
<IconStopCircle class="h-full w-full" />
</template>
禁用所有
</VButton>
<VButton type="secondary" @click="createVisible = true">
<template #icon>
<IconAddCircle class="h-full w-full" />
</template>
创建
</VButton>
</VSpace>
</div>
<ul
class="mt-5 box-border h-full w-full divide-y divide-gray-100"
role="list"
>
<li v-for="(token, index) in tokens" :key="index">
<div
class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
>
<div class="relative flex flex-row items-center">
<div class="flex-1">
<div class="flex flex-row items-center">
<span class="mr-2 truncate text-sm font-medium text-gray-900">
{{ token.name }}
</span>
</div>
<div class="mt-2 flex">
<span class="text-xs text-gray-500">
{{ token.token }}
</span>
</div>
</div>
<div class="flex">
<div
class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
>
<div class="flex flex-col gap-1">
<time class="text-xs text-gray-500" datetime="2020-01-07">
创建日期：2020-01-07 12:00:00
</time>
<time class="text-xs text-gray-500" datetime="2020-01-07">
失效日期：永久
</time>
</div>
<span class="cursor-pointer hover:text-red-600">
<IconStopCircle />
</span>
<span class="cursor-pointer hover:text-red-600">
<IconDeleteBin />
</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</template>

2
src/views/system/users/UserDetail.vue
View File

@ -42,7 +42,7 @@ const router = useRouter();
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<VTag @click="router.push({ name: 'RoleDetail', params: { id: 1 } })">
<template #leftIcon>
<IconUserSettings class="h-full w-full" />
<IconUserSettings />
</template>
{{ user.role }}
</VTag>