From bcb44b892d54d7ecac908d5d445cfa31d2c3a3a8 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Sun, 29 May 2022 21:22:37 +0800
Subject: [PATCH] perf: improve sheets management page ui

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 src/core/icons.ts                       |   5 +-
 src/views/contents/posts/PostList.vue   |   2 +-
 src/views/contents/sheets/SheetList.vue | 345 +++++++++++++++++-------
 src/views/system/users/UserList.vue     |  21 +-
 4 files changed, 265 insertions(+), 108 deletions(-)

diff --git a/src/core/icons.ts b/src/core/icons.ts
index b7b9f517..50f659a9 100644
--- a/src/core/icons.ts
+++ b/src/core/icons.ts
@@ -65,6 +65,8 @@ import IconComputer from "~icons/ri/computer-line";
 import IconPhone from "~icons/ri/smartphone-line";
 // @ts-ignore
 import IconTablet from "~icons/ri/tablet-line";
+// @ts-ignore
+import IconUserFollow from "~icons/ri/user-follow-line";
 
 export {
   IconDashboard,
@@ -99,5 +101,6 @@ export {
   IconSearch,
   IconComputer,
   IconPhone,
-  IconTablet
+  IconTablet,
+  IconUserFollow,
 };
diff --git a/src/views/contents/posts/PostList.vue b/src/views/contents/posts/PostList.vue
index 386a89fb..1594db97 100644
--- a/src/views/contents/posts/PostList.vue
+++ b/src/views/contents/posts/PostList.vue
@@ -522,7 +522,7 @@ const handleRouteToEditor = (post: any) => {
                 <div class="flex mt-1">
                   <VSpace>
                     <span class="text-xs text-gray-500"
-                      >阅读 {{ post.visits }}</span
+                      >访问量 {{ post.visits }}</span
                     >
                     <span class="text-xs text-gray-500"
                       >评论 {{ post.commentCount }}</span
diff --git a/src/views/contents/sheets/SheetList.vue b/src/views/contents/sheets/SheetList.vue
index c1be3580..9ce34d78 100644
--- a/src/views/contents/sheets/SheetList.vue
+++ b/src/views/contents/sheets/SheetList.vue
@@ -3,32 +3,58 @@ import { VButton } from "@/components/base/button";
 import { VCard } from "@/components/base/card";
 import { VSpace } from "@/components/base/space";
 import { VTag } from "@/components/base/tag";
-import { VTabs } from "@/components/base/tabs";
+import { VTabItem, VTabs } from "@/components/base/tabs";
 import { VInput } from "@/components/base/input";
 import { VPageHeader } from "@/components/base/header";
-import { IconPages, IconSettings } from "@/core/icons";
-import { posts } from "../posts/posts-mock";
+import { IconArrowDown, IconPages, IconSettings } from "@/core/icons";
 import { ref } from "vue";
-import TabItem from "@/components/base/tabs/TabItem.vue";
+import { users } from "@/views/system/users/users-mock";
+import halo from "@/assets/logo-mock/halo.png";
 
-const postsRef = ref(
-  posts.map((item) => {
-    return {
-      ...item,
-      checked: false,
-    };
-  })
-);
+const sheetsRef = ref([
+  {
+    title: "关于我们",
+    url: "/about",
+    views: "31231",
+    commentCount: "32",
+  },
+  {
+    title: "案例中心",
+    url: "/case",
+    views: "11431",
+    commentCount: "35",
+  },
+  {
+    title: "我们的产品",
+    url: "/products",
+    views: "11431",
+    commentCount: "35",
+  },
+]);
+
+const advancedSheets = ref([
+  {
+    name: "友情链接",
+    author: "halo-dev",
+    logo: halo,
+    url: "/links",
+  },
+  {
+    name: "图库",
+    author: "halo-dev",
+    logo: halo,
+    url: "/photos",
+  },
+  {
+    name: "社区",
+    author: "halo-dev",
+    logo: halo,
+    url: "/community",
+  },
+]);
 
 const checkAll = ref(false);
 const activeId = ref("advanced");
-
-const handleCheckAll = () => {
-  postsRef.value.forEach((item) => {
-    item.checked = checkAll.value;
-  });
-};
-handleCheckAll();
 </script>
 <template>
   <VPageHeader title="页面">
@@ -42,21 +68,178 @@ handleCheckAll();
 
   <div class="m-0 md:m-4">
     <VTabs v-model:active-id="activeId" type="outline">
-      <TabItem id="advanced" label="功能页面"></TabItem>
-      <TabItem id="custom" label="自定义页面">
+      <VTabItem id="advanced" label="功能页面">
+        <VCard :body-class="['!p-0']">
+          <ul
+            class="divide-y divide-gray-100 box-border w-full h-full"
+            role="list"
+          >
+            <li v-for="(sheet, index) in advancedSheets" :key="index">
+              <div
+                class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all relative"
+              >
+                <div class="flex flex-row items-center relative">
+                  <div class="flex-1">
+                    <div class="flex flex-row">
+                      <span
+                        class="mr-0 sm:mr-2 text-sm font-medium truncate text-gray-900"
+                      >
+                        {{ sheet.name }}
+                      </span>
+                      <VTag>{{ sheet.url }}</VTag>
+                    </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"
+                    >
+                      <img
+                        v-tooltip="`由${sheet.name}插件提供`"
+                        :src="sheet.logo"
+                        class="hidden sm:inline-block h-6 w-6 rounded-full ring-2 ring-white"
+                      />
+                      <span class="cursor-pointer">
+                        <IconSettings />
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </VCard>
+      </VTabItem>
+      <VTabItem id="custom" label="自定义页面">
         <VCard :body-class="['!p-0']">
           <template #header>
-            <div
-              class="flex flex-col w-full p-4 items-stretch sm:flex-row sm:items-center"
-            >
-              <div class="flex-1">
-                <VInput placeholder="输入关键词搜索" />
-              </div>
-              <div class="flex flex-row gap-3">
-                <div>分类</div>
-                <div>标签</div>
-                <div>作者</div>
-                <div>排序</div>
+            <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">
+                    <FloatingDropdown>
+                      <div
+                        class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none"
+                      >
+                        <span class="mr-0.5">作者</span>
+                        <span>
+                          <IconArrowDown />
+                        </span>
+                      </div>
+                      <template #popper>
+                        <div class="p-4 w-80 h-96">
+                          <div class="bg-white">
+                            <!--TODO: Auto Focus-->
+                            <VInput placeholder="根据关键词搜索"></VInput>
+                          </div>
+                          <div class="mt-2">
+                            <ul class="divide-y divide-gray-200" role="list">
+                              <li
+                                v-for="(user, index) in users"
+                                :key="index"
+                                class="py-4 cursor-pointer hover:bg-gray-50"
+                              >
+                                <div class="flex items-center space-x-4">
+                                  <div class="flex items-center">
+                                    <input
+                                      class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                                      type="checkbox"
+                                    />
+                                  </div>
+                                  <div class="flex-shrink-0">
+                                    <img
+                                      :alt="user.name"
+                                      :src="user.avatar"
+                                      class="h-10 w-10 rounded"
+                                    />
+                                  </div>
+                                  <div class="flex-1 min-w-0">
+                                    <p
+                                      class="text-sm font-medium text-gray-900 truncate"
+                                    >
+                                      {{ user.name }}
+                                    </p>
+                                    <p class="text-sm text-gray-500 truncate">
+                                      @{{ user.username }}
+                                    </p>
+                                  </div>
+                                  <div>
+                                    <VTag>{{ index + 1 }} 篇</VTag>
+                                  </div>
+                                </div>
+                              </li>
+                            </ul>
+                          </div>
+                        </div>
+                      </template>
+                    </FloatingDropdown>
+                    <FloatingDropdown>
+                      <div
+                        class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none"
+                      >
+                        <span class="mr-0.5">排序</span>
+                        <span>
+                          <IconArrowDown />
+                        </span>
+                      </div>
+                      <template #popper>
+                        <div class="p-4 w-72">
+                          <ul class="space-y-1">
+                            <li
+                              class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                            >
+                              <span class="truncate">较近发布</span>
+                            </li>
+                            <li
+                              class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                            >
+                              <span class="truncate">较晚发布</span>
+                            </li>
+                            <li
+                              class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                            >
+                              <span class="truncate">浏览量最多</span>
+                            </li>
+                            <li
+                              class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                            >
+                              <span class="truncate">浏览量最少</span>
+                            </li>
+                            <li
+                              class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                            >
+                              <span class="truncate">评论量最多</span>
+                            </li>
+                            <li
+                              class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                            >
+                              <span class="truncate">评论量最少</span>
+                            </li>
+                          </ul>
+                        </div>
+                      </template>
+                    </FloatingDropdown>
+                  </VSpace>
+                </div>
               </div>
             </div>
           </template>
@@ -64,35 +247,42 @@ handleCheckAll();
             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="(sheet, index) in sheetsRef" :key="index">
               <div
-                class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all"
+                :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 class="flex-1">
-                    <div class="flex flex-col sm:flex-row">
+                    <div class="flex flex-row">
                       <span
                         class="mr-0 sm:mr-2 text-sm font-medium truncate text-gray-900"
                       >
-                        {{ post.title }}
+                        {{ sheet.title }}
                       </span>
-                      <VSpace class="mt-1 sm:mt-0">
-                        <VTag
-                          v-for="(tag, tagIndex) in post.tags"
-                          :key="tagIndex"
-                        >
-                          {{ tag.name }}
-                        </VTag>
-                      </VSpace>
+                      <VTag>{{ sheet.url }}</VTag>
                     </div>
                     <div class="flex mt-1">
                       <VSpace>
-                        <span class="text-xs text-gray-500"
-                          >阅读 {{ post.visits }}</span
-                        >
-                        <span class="text-xs text-gray-500"
-                          >评论 {{ post.commentCount }}</span
-                        >
+                        <span class="text-xs text-gray-500">
+                          访问量 {{ sheet.views }}
+                        </span>
+                        <span class="text-xs text-gray-500">
+                          评论 {{ sheet.commentCount }}
+                        </span>
                       </VSpace>
                     </div>
                   </div>
@@ -107,7 +297,7 @@ handleCheckAll();
                       <time class="text-sm text-gray-500" datetime="2020-01-07">
                         2020-01-07
                       </time>
-                      <span>
+                      <span class="cursor-pointer">
                         <IconSettings />
                       </span>
                     </div>
@@ -118,35 +308,8 @@ handleCheckAll();
           </ul>
 
           <template #footer>
-            <div class="bg-white flex items-center justify-between">
-              <div class="flex-1 flex justify-between sm:hidden">
-                <a
-                  class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
-                  href="#"
-                >
-                  Previous
-                </a>
-                <a
-                  class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
-                  href="#"
-                >
-                  Next
-                </a>
-              </div>
-              <div
-                class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"
-              >
-                <div>
-                  <p class="text-sm text-gray-700">
-                    Showing
-                    <span class="font-medium">1</span>
-                    to
-                    <span class="font-medium">10</span>
-                    of
-                    <span class="font-medium">97</span>
-                    results
-                  </p>
-                </div>
+            <div class="bg-white flex items-center justify-end">
+              <div class="flex-1 flex items-center justify-end">
                 <div>
                   <nav
                     aria-label="Pagination"
@@ -184,12 +347,6 @@ handleCheckAll();
                     >
                       2
                     </a>
-                    <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="#"
-                    >
-                      3
-                    </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"
                     >
@@ -199,19 +356,7 @@ handleCheckAll();
                       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="#"
                     >
-                      8
-                    </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="#"
-                    >
-                      9
-                    </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="#"
-                    >
-                      10
+                      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"
@@ -238,7 +383,7 @@ handleCheckAll();
             </div>
           </template>
         </VCard>
-      </TabItem>
+      </VTabItem>
     </VTabs>
   </div>
 </template>
diff --git a/src/views/system/users/UserList.vue b/src/views/system/users/UserList.vue
index 4b696ee1..b372d019 100644
--- a/src/views/system/users/UserList.vue
+++ b/src/views/system/users/UserList.vue
@@ -11,6 +11,7 @@ import {
   IconAddCircle,
   IconArrowDown,
   IconSettings,
+  IconUserFollow,
   IconUserSettings,
 } from "@/core/icons";
 import { ref } from "vue";
@@ -29,12 +30,20 @@ const handleRouteToDetail = (username: string) => {
       <IconUserSettings class="self-center mr-2" />
     </template>
     <template #actions>
-      <VButton type="secondary">
-        <template #icon>
-          <IconAddCircle class="w-full h-full" />
-        </template>
-        添加用户
-      </VButton>
+      <VSpace>
+        <VButton size="sm" type="default">
+          <template #icon>
+            <IconUserFollow class="w-full h-full" />
+          </template>
+          角色管理
+        </VButton>
+        <VButton type="secondary">
+          <template #icon>
+            <IconAddCircle class="w-full h-full" />
+          </template>
+          添加用户
+        </VButton>
+      </VSpace>
     </template>
   </VPageHeader>