feat: add filters dropdown ui

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

package.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "@halo-dev/admin-api": "^1.0.0",
     "@vueuse/core": "^8.5.0",
+    "floating-vue": "2.0.0-beta.16",
     "pinia": "^2.0.14",
     "tippy.js": "^6.3.7",
     "vue": "^3.2.36",

pnpm-lock.yaml

@@ -21,6 +21,7 @@ specifiers:
   eslint: ^8.16.0
   eslint-plugin-cypress: ^2.12.1
   eslint-plugin-vue: ^8.7.1
+  floating-vue: 2.0.0-beta.16
   histoire: ^0.4.6
   husky: ^8.0.1
   jsdom: ^19.0.0
@@ -47,6 +48,7 @@ specifiers:
 dependencies:
   '@halo-dev/admin-api': 1.0.0
   '@vueuse/core': 8.5.0_vue@3.2.36
+  floating-vue: 2.0.0-beta.16_vue@3.2.36
   pinia: 2.0.14_7gwbvmtszsbbeay4sidijbp26i
   tippy.js: 6.3.7
   vue: 3.2.36
@@ -1397,13 +1399,11 @@ packages:
 
   /@floating-ui/core/0.3.1:
     resolution: {integrity: sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g==}
-    dev: true
 
   /@floating-ui/dom/0.1.10:
     resolution: {integrity: sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==}
     dependencies:
       '@floating-ui/core': 0.3.1
-    dev: true
 
   /@halo-dev/admin-api/1.0.0:
     resolution: {integrity: sha512-DkuNK91Let+jPLx9YclhaU0XWKMA96LJNzGtYUq3e5VGuvPYqPY8AJKfQ8DNLA/3gmkF2b20nUCSDsZRz/ZObQ==}
@@ -3912,7 +3912,6 @@ packages:
       '@floating-ui/dom': 0.1.10
       vue: 3.2.36
       vue-resize: 2.0.0-alpha.1_vue@3.2.36
-    dev: true
 
   /follow-redirects/1.14.9:
     resolution: {integrity: sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==}
@@ -6573,7 +6572,6 @@ packages:
       vue: ^3.0.0
     dependencies:
       vue: 3.2.36
-    dev: true
 
   /vue-router/4.0.15_vue@3.2.36:
     resolution: {integrity: sha512-xa+pIN9ZqORdIW1MkN2+d9Ui2pCM1b/UMgwYUCZOiFYHAvz/slKKBDha8DLrh5aCG/RibtrpyhKjKOZ85tYyWg==}

src/App.vue

@@ -35,4 +35,8 @@ body {
 *::-webkit-scrollbar-thumb:hover {
   background-color: #bbb;
 }
+
+.v-popper__popper {
+  outline: none;
+}
 </style>

src/core/icons.ts

@@ -7,6 +7,10 @@ import IconArrowRight from "~icons/ri/arrow-right-s-line";
 // @ts-ignore
 import IconArrowDown from "~icons/ri/arrow-down-s-fill";
 // @ts-ignore
+import IconArrowUpLine from "~icons/ri/arrow-up-s-line";
+// @ts-ignore
+import IconArrowDownLine from "~icons/ri/arrow-down-s-line";
+// @ts-ignore
 import IconBookRead from "~icons/ri/book-read-line";
 // @ts-ignore
 import IconPages from "~icons/ri/pages-line";
@@ -82,4 +86,6 @@ export {
   IconList,
   IconGrid,
   IconCheckboxFill,
+  IconArrowUpLine,
+  IconArrowDownLine,
 };

src/main.ts

@@ -4,10 +4,19 @@ import { createPinia } from "pinia";
 import App from "./App.vue";
 import router from "./router";
 import "@/styles/tailwind.css";
+import { Dropdown, Menu, Tooltip, VClosePopper, VTooltip } from "floating-vue";
+import "floating-vue/dist/style.css";
 
 const app = createApp(App);
 
 app.use(createPinia());
 app.use(router);
 
+app.directive("tooltip", VTooltip);
+app.directive("close-popper", VClosePopper);
+
+app.component("FloatingDropdown", Dropdown);
+app.component("FloatingTooltip", Tooltip);
+app.component("FloatingMenu", Menu);
+
 app.mount("#app");

src/views/contents/attachments/AttachmentList.vue

@@ -5,7 +5,9 @@ import { VModal } from "@/components/base/modal";
 import { VCard } from "@/components/base/card";
 import { VSpace } from "@/components/base/space";
 import { VInput } from "@/components/base/input";
+import { VTag } from "@/components/base/tag";
 import { ref } from "vue";
+import { users } from "@/views/system/users/users-mock";
 import {
   IconArrowDown,
   IconArrowLeft,
@@ -299,14 +301,62 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
                 </div>
                 <div class="mt-4 sm:mt-0 flex">
                   <VSpace spacing="lg">
-                    <div
+                    <FloatingDropdown>
-                      class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                      <div
-                    >
+                        class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none"
-                      <span class="mr-0.5">上传者</span>
+                      >
-                      <span>
+                        <span class="mr-0.5">上传者</span>
-                        <IconArrowDown />
+                        <span>
-                      </span>
+                          <IconArrowDown />
-                    </div>
+                        </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>
                     <div
                       class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
                     >
@@ -323,14 +373,42 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
                         <IconArrowDown />
                       </span>
                     </div>
-                    <div
+                    <FloatingDropdown>
-                      class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                      <div
-                    >
+                        class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none"
-                      <span class="mr-0.5">排序</span>
+                      >
-                      <span>
+                        <span class="mr-0.5">排序</span>
-                        <IconArrowDown />
+                        <span>
-                      </span>
+                          <IconArrowDown />
-                    </div>
+                        </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>
+                          </ul>
+                        </div>
+                      </template>
+                    </FloatingDropdown>
                     <div class="flex flex-row gap-2">
                       <div
                         v-for="(item, index) in viewTypes"

src/views/contents/posts/PostList.vue

@@ -20,6 +20,7 @@ import { posts } from "./posts-mock";
 import { computed, ref } from "vue";
 import { useRouter } from "vue-router";
 import type { Post } from "@halo-dev/admin-api";
+import { users } from "@/views/system/users/users-mock";
 
 const postsRef = ref(
   // eslint-disable-next-line
@@ -344,38 +345,138 @@ const handleRouteToEditor = (post: any) => {
             </div>
             <div class="mt-4 sm:mt-0 flex">
               <VSpace spacing="lg">
-                <div
+                <FloatingDropdown>
-                  class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                  <div
-                >
+                    class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none"
-                  <span class="mr-0.5">分类</span>
+                  >
-                  <span>
+                    <span class="mr-0.5">分类</span>
-                    <IconArrowDown />
+                    <span>
-                  </span>
+                      <IconArrowDown />
-                </div>
+                    </span>
-                <div
+                  </div>
-                  class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                  <template #popper>
-                >
+                    <div class="p-4 w-80 h-96">
-                  <span class="mr-0.5">标签</span>
+                      <VInput placeholder="根据关键词搜索"></VInput>
-                  <span>
+                    </div>
-                    <IconArrowDown />
+                  </template>
-                  </span>
+                </FloatingDropdown>
-                </div>
+                <FloatingDropdown>
-                <div
+                  <div
-                  class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                    class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none"
-                >
+                  >
-                  <span class="mr-0.5">作者</span>
+                    <span class="mr-0.5">标签</span>
-                  <span>
+                    <span>
-                    <IconArrowDown />
+                      <IconArrowDown />
-                  </span>
+                    </span>
-                </div>
+                  </div>
-                <div
+                  <template #popper>
-                  class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                    <div class="p-4 w-80 h-96">
-                >
+                      <VInput placeholder="根据关键词搜索"></VInput>
-                  <span class="mr-0.5">排序</span>
+                    </div>
-                  <span>
+                  </template>
-                    <IconArrowDown />
+                </FloatingDropdown>
-                  </span>
+                <FloatingDropdown>
-                </div>
+                  <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>

src/views/system/plugins/PluginList.vue

@@ -69,38 +69,118 @@ const handleRouteToDetail = (plugin: any) => {
             </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-52">
+                      <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>
+                      </ul>
+                    </div>
+                  </template>
+                </FloatingDropdown>
                 <div
-                  class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                  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>
-                <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
+                <FloatingDropdown>
-                  class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                  <div
-                >
+                    class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none"
-                  <span class="mr-0.5">提供方</span>
+                  >
-                  <span>
+                    <span class="mr-0.5">提供方</span>
-                    <IconArrowDown />
+                    <span>
-                  </span>
+                      <IconArrowDown />
-                </div>
+                    </span>
-                <div
+                  </div>
-                  class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                  <template #popper>
-                >
+                    <div class="p-4 w-80 h-96">
-                  <span class="mr-0.5">排序</span>
+                      <div class="bg-white">
-                  <span>
+                        <!--TODO: Auto Focus-->
-                    <IconArrowDown />
+                        <VInput placeholder="根据关键词搜索"></VInput>
-                  </span>
+                      </div>
-                </div>
+                      <div class="mt-2">
+                        <ul class="divide-y divide-gray-200" role="list">
+                          <li 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="halo-dev"
+                                  class="h-10 w-10 rounded"
+                                  src="https://halo.run/logo"
+                                />
+                              </div>
+                              <div class="flex-1 min-w-0">
+                                <p
+                                  class="text-sm font-medium text-gray-900 truncate"
+                                >
+                                  Halo
+                                </p>
+                                <p class="text-sm text-gray-500 truncate">
+                                  https://halo.run
+                                </p>
+                              </div>
+                              <div>
+                                <VTag>2 个</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>
+                      </ul>
+                    </div>
+                  </template>
+                </FloatingDropdown>
               </VSpace>
             </div>
           </div>

src/views/system/users/UserList.vue

@@ -65,14 +65,32 @@ const handleRouteToDetail = (username: string) => {
             </div>
             <div class="mt-4 sm:mt-0 flex">
               <VSpace spacing="lg">
-                <div
+                <FloatingDropdown>
-                  class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                  <div
-                >
+                    class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none"
-                  <span class="mr-0.5">状态</span>
+                  >
-                  <span>
+                    <span class="mr-0.5">状态</span>
-                    <IconArrowDown />
+                    <span>
-                  </span>
+                      <IconArrowDown />
-                </div>
+                    </span>
+                  </div>
+                  <template #popper>
+                    <div class="p-4 w-52">
+                      <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>
+                      </ul>
+                    </div>
+                  </template>
+                </FloatingDropdown>
                 <div
                   class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
                 >
@@ -81,14 +99,32 @@ const handleRouteToDetail = (username: string) => {
                     <IconArrowDown />
                   </span>
                 </div>
-                <div
+                <FloatingDropdown>
-                  class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                  <div
-                >
+                    class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none"
-                  <span class="mr-0.5">排序</span>
+                  >
-                  <span>
+                    <span class="mr-0.5">排序</span>
-                    <IconArrowDown />
+                    <span>
-                  </span>
+                      <IconArrowDown />
-                </div>
+                    </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>
+                      </ul>
+                    </div>
+                  </template>
+                </FloatingDropdown>
               </VSpace>
             </div>
           </div>