From 4833ac20256eebddddde1f442ae3f420f66bd61a Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 15 Aug 2022 16:11:48 +0800
Subject: [PATCH] feat: refine category management page ui

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 src/modules/contents/posts/PostList.vue       |   8 +-
 .../posts/categories/CategoryList.vue         | 110 +++++++++++++++++-
 .../components/CategoryEditingModal.vue       |  53 +++++++++
 3 files changed, 163 insertions(+), 8 deletions(-)
 create mode 100644 src/modules/contents/posts/categories/components/CategoryEditingModal.vue

diff --git a/src/modules/contents/posts/PostList.vue b/src/modules/contents/posts/PostList.vue
index 1c74bde02..ae64e5560 100644
--- a/src/modules/contents/posts/PostList.vue
+++ b/src/modules/contents/posts/PostList.vue
@@ -3,7 +3,6 @@ import {
   IconAddCircle,
   IconArrowDown,
   IconBookRead,
-  IconDeleteBin,
   IconSettings,
   VButton,
   VCard,
@@ -107,12 +106,7 @@ onMounted(() => {
     </template>
     <template #actions>
       <VSpace>
-        <VButton size="sm">
-          <template #icon>
-            <IconDeleteBin class="h-full w-full" />
-          </template>
-          回收站
-        </VButton>
+        <VButton :route="{ name: 'Categories' }" size="sm">分类</VButton>
         <VButton :route="{ name: 'PostEditor' }" type="secondary">
           <template #icon>
             <IconAddCircle class="h-full w-full" />
diff --git a/src/modules/contents/posts/categories/CategoryList.vue b/src/modules/contents/posts/categories/CategoryList.vue
index 5a7a4474c..e7ec07d54 100644
--- a/src/modules/contents/posts/categories/CategoryList.vue
+++ b/src/modules/contents/posts/categories/CategoryList.vue
@@ -1 +1,109 @@
-<template>Categories</template>
+<script lang="ts" setup>
+import {
+  IconBookRead,
+  IconList,
+  IconSettings,
+  VButton,
+  VCard,
+  VPageHeader,
+  VSpace,
+} from "@halo-dev/components";
+import CategoryEditingModal from "./components/CategoryEditingModal.vue";
+
+import { ref } from "vue";
+
+const editingModal = ref(false);
+</script>
+<template>
+  <CategoryEditingModal v-model:visible="editingModal" />
+  <VPageHeader title="文章分类">
+    <template #icon>
+      <IconBookRead class="mr-2 self-center" />
+    </template>
+  </VPageHeader>
+  <div class="m-0 md:m-4">
+    <VCard :body-class="['!p-0']">
+      <template #header>
+        <div class="block w-full bg-gray-50 px-4 py-3">
+          <div
+            class="relative flex flex-col items-start sm:flex-row sm:items-center"
+          >
+            <div class="flex w-full flex-1 sm:w-auto">
+              <span class="text-base font-medium"> {{ 10 }} 个分类 </span>
+            </div>
+            <div class="mt-4 flex sm:mt-0">
+              <VSpace>
+                <VButton size="xs" type="default" @click="editingModal = true">
+                  新增
+                </VButton>
+              </VSpace>
+            </div>
+          </div>
+        </div>
+      </template>
+      <ul class="box-border h-full w-full divide-y divide-gray-100" role="list">
+        <li v-for="i in 10" :key="i">
+          <div
+            class="group relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
+          >
+            <div
+              class="drag-element absolute inset-y-0 left-0 flex hidden w-3.5 cursor-move items-center bg-gray-100 transition-all hover:bg-gray-200 group-hover:flex"
+            >
+              <IconList class="h-3.5 w-3.5" />
+            </div>
+            <div class="relative flex flex-row items-center">
+              <div class="flex-1">
+                <div class="flex flex-col sm:flex-row">
+                  <span
+                    class="mr-0 truncate text-sm font-medium text-gray-900 sm:mr-2"
+                  >
+                    主题
+                  </span>
+                  <VSpace class="mt-1 sm:mt-0"></VSpace>
+                </div>
+                <div class="mt-1 flex">
+                  <span class="text-xs text-gray-500">
+                    https://halo.run/categories/themes
+                  </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="cursor-pointer text-sm text-gray-500 hover:text-gray-900"
+                  >
+                    20 篇文章
+                  </div>
+                  <time class="text-sm text-gray-500" datetime="2020-01-07">
+                    2020-01-07
+                  </time>
+                  <span class="cursor-pointer">
+                    <FloatingDropdown>
+                      <IconSettings
+                        class="cursor-pointer transition-all hover:text-blue-600"
+                      />
+                      <template #popper>
+                        <div class="w-48 p-2">
+                          <VSpace class="w-full" direction="column">
+                            <VButton v-close-popper block type="secondary">
+                              修改
+                            </VButton>
+                            <VButton v-close-popper block type="danger">
+                              删除
+                            </VButton>
+                          </VSpace>
+                        </div>
+                      </template>
+                    </FloatingDropdown>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </VCard>
+  </div>
+</template>
diff --git a/src/modules/contents/posts/categories/components/CategoryEditingModal.vue b/src/modules/contents/posts/categories/components/CategoryEditingModal.vue
new file mode 100644
index 000000000..e4f238720
--- /dev/null
+++ b/src/modules/contents/posts/categories/components/CategoryEditingModal.vue
@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { VButton, VModal, VSpace } from "@halo-dev/components";
+import type { PropType } from "vue";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  category: {
+    type: Object as PropType<unknown | null>,
+    default: null,
+  },
+});
+
+const emit = defineEmits(["update:visible", "close"]);
+
+const onVisibleChange = (visible: boolean) => {
+  emit("update:visible", visible);
+  if (!visible) {
+    emit("close");
+  }
+};
+</script>
+<template>
+  <VModal
+    :visible="visible"
+    :width="600"
+    title="编辑文章分类"
+    @update:visible="onVisibleChange"
+  >
+    <FormKit id="category-form" type="form">
+      <FormKit label="名称" type="text" validation="required"></FormKit>
+      <FormKit
+        help="通常作为分类访问地址标识"
+        label="别名"
+        type="text"
+        validation="required"
+      ></FormKit>
+      <FormKit label="上级目录" type="select"></FormKit>
+      <FormKit help="需要主题适配以支持" label="封面图" type="text"></FormKit>
+      <FormKit help="需要主题适配以支持" label="描述" type="textarea"></FormKit>
+    </FormKit>
+    <template #footer>
+      <VSpace>
+        <VButton type="secondary" @click="$formkit.submit('category-form')">
+          提交 ⌘ + ↵
+        </VButton>
+        <VButton @click="onVisibleChange(false)">取消 Esc</VButton>
+      </VSpace>
+    </template>
+  </VModal>
+</template>