feat: add user list page

Signed-off-by: Ryan Wang <i@ryanc.cc>
2022-05-24 15:10:16 +08:00 · 2022-05-24 15:10:16 +08:00 · ced9ede9af
parent 7d4f0ff11f
commit ced9ede9af
10 changed files with 363 additions and 28 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -24,11 +24,6 @@ body {
  border-radius: 2em;
 }

-*::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
 *::-webkit-scrollbar-thumb {
  background-color: #ddd;
  background-clip: padding-box;
--- a/src/layouts/BasicLayout.vue
+++ b/src/layouts/BasicLayout.vue
@ -25,6 +25,7 @@
        </div>
        <div
          class="profile-control transition-all hover:bg-gray-100 rounded cursor-pointer p-1"
+          @click="handleRouteToProfile"
        >
          <IconMore />
        </div>
@ -139,6 +140,10 @@ const router = useRouter();

 const moreMenuVisible = ref(false);
 const moreMenuRootVisible = ref(false);
+
+const handleRouteToProfile = () => {
+  router.push({ name: "Profile" });
+};
 </script>

 <style lang="scss">
--- a/src/router/menus.config.ts
+++ b/src/router/menus.config.ts
@ -91,7 +91,7 @@ export const menus: MenuGroupType[] = [
      },
      {
        name: "用户",
-        path: "/users/profile",
+        path: "/users",
        icon: IconUserSettings,
      },
      {
--- a/src/router/routes.config.ts
+++ b/src/router/routes.config.ts
@ -165,6 +165,11 @@ export const routes: Array<RouteRecordRaw> = [
        name: "Users",
        component: UserList,
      },
+      {
+        path: ":username",
+        name: "UserDetail",
+        component: Profile,
+      },
      {
        path: "profile",
        name: "Profile",
--- a/src/views/contents/posts/PostList.vue
+++ b/src/views/contents/posts/PostList.vue
@ -18,6 +18,7 @@ import {
 } from "@/core/icons";
 import { posts } from "./posts-mock";
 import { computed, ref } from "vue";
+import { useRouter } from "vue-router";
 import type { Post } from "@halo-dev/admin-api";

 const postsRef = ref(
@ -30,6 +31,7 @@ const postsRef = ref(
  })
 );

+const router = useRouter();
 const checkAll = ref(false);
 const postSettings = ref(false);
 const settingActiveId = ref("general");
@ -66,6 +68,16 @@ const handleSelectNext = () => {
    selected.value = posts[currentIndex + 1];
  }
 };
+
+// eslint-disable-next-line
+const handleRouteToEditor = (post: any) => {
+  router.push({
+    name: "PostEditor",
+    params: {
+      id: post.id,
+    },
+  });
+};
 </script>
 <template>
  <VModal v-model:visible="postSettings" :width="680" title="文章设置">
@ -370,7 +382,11 @@ const handleSelectNext = () => {
        </div>
      </template>
      <ul class="divide-y divide-gray-100 box-border w-full h-full" role="list">
-        <li v-for="(post, index) in postsRef" :key="index">
+        <li
+          v-for="(post, index) in postsRef"
+          :key="index"
+          @click="handleRouteToEditor(post)"
+        >
          <div
            :class="{
              'bg-gray-100': selected.id === post.id || post.checked,
@ -425,7 +441,7 @@ const handleSelectNext = () => {
                    2020-01-07
                  </time>
                  <span class="cursor-pointer">
-                    <IconSettings @click="handleSelect(post)" />
+                    <IconSettings @click.stop="handleSelect(post)" />
                  </span>
                </div>
              </div>
--- a/src/views/system/plugins/PluginDetail.vue
+++ b/src/views/system/plugins/PluginDetail.vue
@ -39,7 +39,7 @@ console.log(plugin);
      <div class="border-t border-gray-200">
        <dl>
          <div
-            class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+            class="bg-white px-4 py-5 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:mt-0 sm:col-span-2">
@ -93,7 +93,7 @@ console.log(plugin);
            </dd>
          </div>
          <div
-            class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+            class="bg-white px-4 py-5 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:mt-0 sm:col-span-2">无</dd>
--- a/src/views/system/plugins/PluginList.vue
+++ b/src/views/system/plugins/PluginList.vue
@ -77,6 +77,14 @@ const handleRouteToDetail = (plugin: any) => {
                    <IconArrowDown />
                  </span>
                </div>
+                <div
+                  class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                >
+                  <span class="mr-0.5">类别</span>
+                  <span>
+                    <IconArrowDown />
+                  </span>
+                </div>
                <div
                  class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
                >
--- a/src/views/system/users/Profile.vue
+++ b/src/views/system/users/Profile.vue
@ -1,3 +1,25 @@
+<script lang="ts" setup>
+import { VButton } from "@/components/base/button";
+import { VInput } from "@/components/base/input";
+import { VTextarea } from "@/components/base/textarea";
+import { VTag } from "@/components/base/tag";
+import { VTabItem, VTabs } from "@/components/base/tabs";
+import { IconUserSettings } from "@/core/icons";
+import { ref } from "vue";
+import { useRoute } from "vue-router";
+import { users } from "./users-mock";
+
+const activeTab = ref("general");
+const user = ref();
+
+const route = useRoute();
+
+if (route.params.username) {
+  user.value = users.find((u) => u.username === route.params.username);
+} else {
+  user.value = users[0];
+}
+</script>
 <template>
  <header class="bg-white">
    <div class="h-48 bg-gradient-to-r from-gray-800 to-red-500"></div>
@ -5,9 +27,9 @@
      <div class="-mt-12 sm:-mt-16 flex items-end space-x-5">
        <div class="flex">
          <img
+            :src="user.avatar"
            alt="Avatar"
            class="h-24 w-24 rounded-full ring-4 ring-white sm:h-32 sm:w-32 drop-shadow-lg"
-            src="https://ryanc.cc/avatar"
          />
        </div>
        <div
@ -15,12 +37,12 @@
        >
          <div class="block mt-6 min-w-0 flex-1">
            <h1 class="text-xl font-bold text-gray-900 truncate">
-              <span class="mr-1">Ryan Wang</span>
+              <span class="mr-1">{{ user.name }}</span>
              <VTag theme="default">
                <template #leftIcon>
                  <IconUserSettings />
                </template>
-                管理员
+                {{ user.role }}
              </VTag>
            </h1>
          </div>
@ -49,7 +71,7 @@
                </label>
                <div class="mt-1 sm:mt-0 sm:col-span-2">
                  <div class="max-w-lg flex shadow-sm">
-                    <VInput modelValue="ryanwang" />
+                    <VInput :modelValue="user.username" />
                  </div>
                </div>
              </div>
@ -63,7 +85,7 @@
                </label>
                <div class="mt-1 sm:mt-0 sm:col-span-2">
                  <div class="max-w-lg flex shadow-sm">
-                    <VInput modelValue="Ryan Wang" />
+                    <VInput :modelValue="user.name" />
                  </div>
                </div>
              </div>
@ -78,7 +100,7 @@
                </label>
                <div class="mt-1 sm:mt-0 sm:col-span-2">
                  <div class="max-w-lg flex shadow-sm">
-                    <VInput modelValue="i@ryanc.cc" />
+                    <VInput :modelValue="user.email" />
                  </div>
                </div>
              </div>
@ -166,14 +188,3 @@
    </VTabs>
  </section>
 </template>
-<script lang="ts" setup>
-import { VButton } from "@/components/base/button";
-import { VInput } from "@/components/base/input";
-import { VTextarea } from "@/components/base/textarea";
-import { VTag } from "@/components/base/tag";
-import { VTabItem, VTabs } from "@/components/base/tabs";
-import { IconUserSettings } from "@/core/icons";
-import { ref } from "vue";
-
-const activeTab = ref("general");
-</script>
--- a/src/views/system/users/UserList.vue
+++ b/src/views/system/users/UserList.vue
@ -1 +1,246 @@
-<template>User</template>
+<script lang="ts" setup>
+import { VPageHeader } from "@/components/base/header";
+import { VButton } from "@/components/base/button";
+import { VCard } from "@/components/base/card";
+import { VInput } from "@/components/base/input";
+import { VSpace } from "@/components/base/space";
+import { VTag } from "@/components/base/tag";
+import { users } from "./users-mock";
+import { useRouter } from "vue-router";
+import {
+  IconAddCircle,
+  IconArrowDown,
+  IconSettings,
+  IconUserSettings,
+} from "@/core/icons";
+import { ref } from "vue";
+
+const checkAll = ref(false);
+
+const router = useRouter();
+
+const handleRouteToDetail = (username: string) => {
+  router.push({ name: "UserDetail", params: { username } });
+};
+</script>
+<template>
+  <VPageHeader title="用户">
+    <template #icon>
+      <IconUserSettings class="self-center mr-2" />
+    </template>
+    <template #actions>
+      <VButton type="secondary">
+        <template #icon>
+          <IconAddCircle class="w-full h-full" />
+        </template>
+        添加用户
+      </VButton>
+    </template>
+  </VPageHeader>
+
+  <div class="m-0 md:m-4">
+    <VCard :body-class="['!p-0']">
+      <template #header>
+        <div class="px-4 py-3 block w-full bg-gray-50">
+          <div
+            class="flex flex-col sm:flex-row items-start sm:items-center relative"
+          >
+            <div class="hidden sm:flex items-center mr-4">
+              <input
+                v-model="checkAll"
+                class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                type="checkbox"
+              />
+            </div>
+            <div class="w-full sm:w-auto flex flex-1">
+              <VInput
+                v-if="!checkAll"
+                class="w-full sm:w-72"
+                placeholder="输入关键词搜索"
+              />
+              <VSpace v-else>
+                <VButton type="default">设置</VButton>
+                <VButton type="danger">删除</VButton>
+              </VSpace>
+            </div>
+            <div class="mt-4 sm:mt-0 flex">
+              <VSpace spacing="lg">
+                <div
+                  class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                >
+                  <span class="mr-0.5">状态</span>
+                  <span>
+                    <IconArrowDown />
+                  </span>
+                </div>
+                <div
+                  class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                >
+                  <span class="mr-0.5">角色</span>
+                  <span>
+                    <IconArrowDown />
+                  </span>
+                </div>
+                <div
+                  class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                >
+                  <span class="mr-0.5">排序</span>
+                  <span>
+                    <IconArrowDown />
+                  </span>
+                </div>
+              </VSpace>
+            </div>
+          </div>
+        </div>
+      </template>
+      <ul class="divide-y divide-gray-100 box-border w-full h-full" role="list">
+        <li
+          v-for="(user, index) in users"
+          :key="index"
+          @click="handleRouteToDetail(user.username)"
+        >
+          <div
+            :class="{
+              'bg-gray-100': checkAll,
+            }"
+            class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all relative"
+          >
+            <div
+              v-show="checkAll"
+              class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
+            ></div>
+            <div class="flex flex-row items-center relative">
+              <div class="hidden mr-4 sm:flex items-center">
+                <input
+                  v-model="checkAll"
+                  class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                  type="checkbox"
+                />
+              </div>
+              <div v-if="user.avatar" class="mr-4">
+                <div
+                  class="w-12 h-12 border rounded hover:shadow-sm bg-white overflow-hidden"
+                >
+                  <img
+                    :alt="user.name"
+                    :src="user.avatar"
+                    class="w-full h-full"
+                  />
+                </div>
+              </div>
+              <div class="flex-1">
+                <div class="flex flex-row items-center">
+                  <span class="mr-2 text-sm font-medium truncate text-gray-900">
+                    {{ user.name }}
+                  </span>
+                  <VTag class="sm:hidden">{{ user.role }}</VTag>
+                </div>
+                <div class="flex mt-1">
+                  <VSpace align="start" direction="column" spacing="xs">
+                    <span class="text-xs text-gray-500">
+                      {{ user.username }}
+                    </span>
+                  </VSpace>
+                </div>
+              </div>
+              <div class="flex">
+                <div
+                  class="inline-flex flex-col items-end gap-4 flex-col-reverse sm:flex-row sm:items-center sm:gap-6"
+                >
+                  <span class="hidden sm:block">
+                    <VTag>
+                      {{ user.role }}
+                    </VTag>
+                  </span>
+                  <time class="text-sm text-gray-500" datetime="2020-01-07">
+                    2020-01-07
+                  </time>
+                  <span class="cursor-pointer">
+                    <IconSettings />
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
+
+      <template #footer>
+        <div class="bg-white flex items-center justify-end">
+          <div class="flex-1 flex items-center justify-end">
+            <div>
+              <nav
+                aria-label="Pagination"
+                class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
+              >
+                <a
+                  class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                  href="#"
+                >
+                  <span class="sr-only">Previous</span>
+                  <svg
+                    aria-hidden="true"
+                    class="h-5 w-5"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      clip-rule="evenodd"
+                      d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </a>
+                <a
+                  aria-current="page"
+                  class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                  href="#"
+                >
+                  1
+                </a>
+                <a
+                  class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                  href="#"
+                >
+                  2
+                </a>
+                <span
+                  class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
+                >
+                  ...
+                </span>
+                <a
+                  class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium"
+                  href="#"
+                >
+                  4
+                </a>
+                <a
+                  class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                  href="#"
+                >
+                  <span class="sr-only">Next</span>
+                  <svg
+                    aria-hidden="true"
+                    class="h-5 w-5"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      clip-rule="evenodd"
+                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </a>
+              </nav>
+            </div>
+          </div>
+        </div>
+      </template>
+    </VCard>
+  </div>
+</template>
--- a/src/views/system/users/users-mock.ts
+++ b/src/views/system/users/users-mock.ts
@ -0,0 +1,50 @@
+export const users = [
+  {
+    id: 1,
+    name: "Ryan Wang",
+    username: "ryanwang",
+    role: "Super Administrator",
+    email: "i@ryanc.cc",
+    avatar: "https://ryanc.cc/avatar",
+  },
+  {
+    id: 2,
+    name: "JohnNiang",
+    username: "johnniang",
+    role: "Super Administrator",
+    email: "johnniang@halo.run",
+    avatar: "https://johnniang.me/avatar",
+  },
+  {
+    id: 3,
+    name: "guqing",
+    username: "guqing",
+    role: "Super Administrator",
+    email: "guqing@halo.run",
+    avatar: "https://guqing.xyz/avatar",
+  },
+  {
+    id: 4,
+    name: "Johnson",
+    username: "johnson",
+    role: "Administrator",
+    email: "",
+    avatar: "https://i.pravatar.cc/300?name=johnson",
+  },
+  {
+    id: 5,
+    name: "Mary Jane",
+    username: "maryjane",
+    role: "Editor",
+    email: "",
+    avatar: "https://i.pravatar.cc/300?name=maryjane",
+  },
+  {
+    id: 5,
+    name: "Berry Allen",
+    username: "flash",
+    role: "Guest",
+    email: "",
+    avatar: "https://i.pravatar.cc/300?name=flash",
+  },
+];