feat: add user personal access token settings page

Signed-off-by: Ryan Wang <i@ryanc.cc>

src/core/icons.ts

@@ -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,
 };

src/layouts/UserProfileLayout.vue

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

src/router/routes.config.ts

@@ -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,
+          },
         ],
       },
       {

src/views/system/roles/RoleDetail.vue

@@ -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>

src/views/system/roles/RoleList.vue

@@ -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>

src/views/system/roles/roles-mock.ts

@@ -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,
   },

src/views/system/users/PersonalAccessTokens.vue

@@ -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>

src/views/system/users/UserDetail.vue

@@ -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>