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

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 src/modules/contents/posts/tags/TagList.vue   | 143 +++++++++++++++++-
 .../posts/tags/components/TagEditingModal.vue |  52 +++++++
 2 files changed, 194 insertions(+), 1 deletion(-)
 create mode 100644 src/modules/contents/posts/tags/components/TagEditingModal.vue

diff --git a/src/modules/contents/posts/tags/TagList.vue b/src/modules/contents/posts/tags/TagList.vue
index eaafe4d7b..241bc3dce 100644
--- a/src/modules/contents/posts/tags/TagList.vue
+++ b/src/modules/contents/posts/tags/TagList.vue
@@ -1 +1,142 @@
-<template>Tags</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import {
+  IconAddCircle,
+  IconBookRead,
+  IconGrid,
+  IconList,
+  IconSettings,
+  VButton,
+  VCard,
+  VPageHeader,
+  VSpace,
+  VTag,
+} from "@halo-dev/components";
+import TagEditingModal from "./components/TagEditingModal.vue";
+
+const editingModal = ref(false);
+const viewTypes = [
+  {
+    name: "list",
+    icon: IconList,
+  },
+  {
+    name: "grid",
+    icon: IconGrid,
+  },
+];
+
+const viewType = ref("list");
+</script>
+<template>
+  <TagEditingModal v-model:visible="editingModal" />
+  <VPageHeader title="文章标签">
+    <template #icon>
+      <IconBookRead class="mr-2 self-center" />
+    </template>
+    <template #actions>
+      <VSpace>
+        <VButton type="secondary" @click="editingModal = true">
+          <template #icon>
+            <IconAddCircle class="h-full w-full" />
+          </template>
+          新建
+        </VButton>
+      </VSpace>
+    </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="flex flex-row gap-2">
+              <div
+                v-for="(item, index) in viewTypes"
+                :key="index"
+                :class="{
+                  'bg-gray-200 font-bold text-black': viewType === item.name,
+                }"
+                class="cursor-pointer rounded p-1 hover:bg-gray-200"
+                @click="viewType = item.name"
+              >
+                <component :is="item.icon" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+      <ul
+        v-if="viewType === 'list'"
+        class="box-border h-full w-full divide-y divide-gray-100"
+        role="list"
+      >
+        <li v-for="i in 10" :key="i">
+          <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-col sm:flex-row">
+                  <VTag>主题</VTag>
+                </div>
+                <div class="mt-1 flex">
+                  <span class="text-xs text-gray-500">
+                    https://halo.run/tags/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"
+                              @click="editingModal = true"
+                            >
+                              修改
+                            </VButton>
+                            <VButton v-close-popper block type="danger">
+                              删除
+                            </VButton>
+                          </VSpace>
+                        </div>
+                      </template>
+                    </FloatingDropdown>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
+
+      <div v-else class="flex flex-wrap gap-3 p-4" role="list">
+        <VTag v-for="i in 100" :key="i">主题(10)</VTag>
+      </div>
+    </VCard>
+  </div>
+</template>
diff --git a/src/modules/contents/posts/tags/components/TagEditingModal.vue b/src/modules/contents/posts/tags/components/TagEditingModal.vue
new file mode 100644
index 000000000..fa7b57ecd
--- /dev/null
+++ b/src/modules/contents/posts/tags/components/TagEditingModal.vue
@@ -0,0 +1,52 @@
+<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,
+  },
+  tag: {
+    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="tag-form" type="form">
+      <FormKit label="名称" type="text" validation="required"></FormKit>
+      <FormKit
+        help="通常作为标签访问地址标识"
+        label="别名"
+        type="text"
+        validation="required"
+      ></FormKit>
+      <FormKit help="需要主题适配以支持" label="颜色" type="color"></FormKit>
+      <FormKit help="需要主题适配以支持" label="封面图" type="text"></FormKit>
+    </FormKit>
+    <template #footer>
+      <VSpace>
+        <VButton type="secondary" @click="$formkit.submit('tag-form')">
+          提交 ⌘ + ↵
+        </VButton>
+        <VButton @click="onVisibleChange(false)">取消 Esc</VButton>
+      </VSpace>
+    </template>
+  </VModal>
+</template>