From 2fa8a84050610a183a6bc16320cebcc12165bc40 Mon Sep 17 00:00:00 2001
From: Takagi <1103069291@qq.com>
Date: Thu, 22 Feb 2024 11:46:10 +0800
Subject: [PATCH] pref: optimize the ui in moment editing mode (#83)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind improvement

#### What this PR does / why we need it:

优化编辑状态下的瞬间列表样式

#### How to test it?

测试瞬间整体功能未发生变化即可。

#### Does this PR introduce a user-facing change?
```release-note
优化编辑状态下的瞬间列表样式
```
---
 console/src/components/MomentItem.vue    | 124 ++++++++++++---
 console/src/components/MomentPreview.vue | 187 ++++++-----------------
 console/src/views/MomentsList.vue        |   4 +-
 3 files changed, 152 insertions(+), 163 deletions(-)

diff --git a/console/src/components/MomentItem.vue b/console/src/components/MomentItem.vue
index 8a654b4..457a881 100644
--- a/console/src/components/MomentItem.vue
+++ b/console/src/components/MomentItem.vue
@@ -5,6 +5,18 @@ import { ref } from "vue";
 import MomentEdit from "./MomentEdit.vue";
 import MomentPreview from "./MomentPreview.vue";
 import type { Contributor } from "@halo-dev/api-client/index";
+import {
+  Dialog,
+  Toast,
+  VAvatar,
+  VDropdown,
+  VDropdownItem,
+  IconEyeOff,
+} from "@halo-dev/components";
+import { formatDatetime, relativeTimeTo } from "@/utils/date";
+import LucideMoreHorizontal from "~icons/lucide/more-horizontal";
+
+import apiClient from "@/utils/api-client";
 
 const props = withDefaults(
   defineProps<{
@@ -38,8 +50,24 @@ const handlerUpdate = (moment: Moment) => {
   emit("update", moment);
 };
 
-const handlerRemove = (moment: Moment) => {
-  emit("remove", moment);
+const deleteMoment = () => {
+  Dialog.warning({
+    title: "确定要删除该瞬间吗？",
+    description: "该操作不可逆",
+    confirmType: "danger",
+    onConfirm: async () => {
+      try {
+        const { data } = await apiClient.delete(
+          `/apis/moment.halo.run/v1alpha1/moments/${props.moment.metadata.name}`
+        );
+
+        Toast.success("删除成功");
+        emit("remove", data);
+      } catch (error) {
+        console.error("Failed to delete comment", error);
+      }
+    },
+  });
 };
 
 const handlerCancel = () => {
@@ -48,21 +76,81 @@ const handlerCancel = () => {
 </script>
 <template>
   <div>
-    <MomentEdit
-      v-if="editing"
-      :moment="editingMoment"
-      @save="handlerSave"
-      @update="handlerUpdate"
-      @cancel="handlerCancel"
-    ></MomentEdit>
-    <template v-else>
-      <MomentPreview
-        :moment="previewMoment"
-        :owner="owner"
-        @remove="handlerRemove"
-        @editor="editing = true"
-        @dblclick="editing = true"
-      />
-    </template>
+    <div
+      class="preview card moments-bg-white moments-shrink moments-py-6 moments-relative moments-border-t-[1px] moments-border-gray-300"
+    >
+      <div
+        class="header moments-flex moments-justify-between moments-items-center"
+      >
+        <div
+          class="moments-flex moments-justify-center moments-items-center moments-space-x-3"
+        >
+          <VAvatar
+            :alt="owner?.displayName"
+            :src="owner?.avatar"
+            size="md"
+            circle
+          ></VAvatar>
+          <div>
+            <b> {{ owner?.displayName }} </b>
+          </div>
+          <div
+            v-if="props.moment.spec.visible == 'PRIVATE'"
+            v-tooltip="{
+              content: '私有访问',
+            }"
+          >
+            <IconEyeOff class="moments-text-xs moments-text-gray-500" />
+          </div>
+        </div>
+        <div
+          class="moments-absolute moments-right-0 moments-flex moments-justify-center moments-items-center"
+        >
+          <div
+            class="moments-text-xs moments-text-gray-500 moments-mr-2 moments-cursor-default"
+          >
+            <span
+              v-tooltip="{
+                content: formatDatetime(moment?.spec.releaseTime),
+              }"
+            >
+              {{ relativeTimeTo(moment?.spec.releaseTime) }}
+            </span>
+          </div>
+          <VDropdown
+            v-permission="['plugin:moments:manage']"
+            compute-transform-origin
+          >
+            <div
+              class="moments-p-2 moments-group hover:moments-bg-sky-600/10 moments-cursor-pointer moments-rounded-full moments-flex moments-items-center moments-justify-center"
+            >
+              <LucideMoreHorizontal
+                class="h-full w-full moments-text-md moments-text-gray-600 group-hover:moments-text-sky-600 moments-cursor-pointer"
+              />
+            </div>
+            <template #popper>
+              <VDropdownItem @click="editing = true"> 编辑 </VDropdownItem>
+              <VDropdownItem type="danger" @click="deleteMoment">
+                删除
+              </VDropdownItem>
+            </template>
+          </VDropdown>
+        </div>
+      </div>
+      <div class="moments-pl-14 moments-pt-3">
+        <MomentEdit
+          v-if="editing"
+          :moment="editingMoment"
+          @save="handlerSave"
+          @update="handlerUpdate"
+          @cancel="handlerCancel"
+        ></MomentEdit>
+        <MomentPreview
+          v-else
+          :moment="previewMoment"
+          @switch-edit-mode="editing = true"
+        />
+      </div>
+    </div>
   </div>
 </template>
diff --git a/console/src/components/MomentPreview.vue b/console/src/components/MomentPreview.vue
index 5be3c3d..93479f2 100644
--- a/console/src/components/MomentPreview.vue
+++ b/console/src/components/MomentPreview.vue
@@ -1,29 +1,16 @@
 <script lang="ts" setup>
 import type { Moment } from "@/types";
-import apiClient from "@/utils/api-client";
-import { formatDatetime, relativeTimeTo } from "@/utils/date";
-import {
-  Dialog,
-  Toast,
-  IconArrowLeft,
-  IconArrowRight,
-  VDropdown,
-  VDropdownItem,
-  VAvatar,
-} from "@halo-dev/components";
+import { IconArrowLeft, IconArrowRight } from "@halo-dev/components";
 import { computed, inject, ref } from "vue";
 import LucideFileVideo from "~icons/lucide/file-video";
 import PreviewDetailModal from "./PreviewDetailModal.vue";
 import hljs from "highlight.js/lib/common";
 import xml from "highlight.js/lib/languages/xml";
-import LucideMoreHorizontal from "~icons/lucide/more-horizontal";
-import type { Contributor } from "@halo-dev/api-client/index";
 
 hljs.registerLanguage("xml", xml);
 
 const props = defineProps<{
   moment: Moment;
-  owner?: Contributor;
 }>();
 
 const { updateTagQuery } = inject("tag") as {
@@ -32,11 +19,7 @@ const { updateTagQuery } = inject("tag") as {
 };
 
 const emit = defineEmits<{
-  (event: "editor"): void;
-  (event: "remove", moment: Moment): void;
-  (event: "cancel"): void;
-  (event: "dblclick"): void;
-  (event: "tagClick", tagName: string): void;
+  (event: "switchEditMode"): void;
 }>();
 
 const vHighlight = {
@@ -79,7 +62,6 @@ const vTag = {
         event.preventDefault();
         let tagName = node.textContent;
         if (tagName) {
-          emit("tagClick", node.textContent || "");
           updateTagQuery(node.textContent || "");
         }
       });
@@ -97,32 +79,8 @@ const selectedMedia = computed(() => {
   return mediums.value[selectedIndex.value];
 });
 
-const deleteMoment = () => {
-  Dialog.warning({
-    title: "确定要删除该瞬间吗？",
-    description: "该操作不可逆",
-    confirmType: "danger",
-    onConfirm: async () => {
-      try {
-        const { data } = await apiClient.delete(
-          `/apis/moment.halo.run/v1alpha1/moments/${props.moment.metadata.name}`
-        );
-
-        Toast.success("删除成功");
-        emit("remove", data);
-      } catch (error) {
-        console.error("Failed to delete comment", error);
-      }
-    },
-  });
-};
-
-const handlerEditor = () => {
-  emit("editor");
-};
-
-const handleDblclick = () => {
-  emit("dblclick");
+const handleSwitchEdit = () => {
+  emit("switchEditMode");
 };
 
 const handleClickMedium = (index: number) => {
@@ -162,110 +120,53 @@ const getExtname = (type: string) => {
     </template>
   </PreviewDetailModal>
   <div
-    class="preview card moments-bg-white moments-shrink moments-py-6 moments-relative moments-border-t-[1px] moments-border-gray-300"
-    @dblclick="handleDblclick"
+    class="moment-preview-html markdown-body moments-overflow-hidden moments-relative"
+    @dblclick="handleSwitchEdit"
   >
-    <div class="header moments-flex moments-justify-between">
-      <div
-        class="moments-flex moments-justify-center moments-items-center moments-space-x-4"
-      >
-        <VAvatar
-          :alt="owner?.displayName"
-          :src="owner?.avatar"
-          size="md"
-          circle
-        ></VAvatar>
-        <div>
-          <b> {{ owner?.displayName }} </b>
-        </div>
-      </div>
-      <div
-        v-permission="['plugin:moments:manage']"
-        class="moments-absolute moments-right-0 moments-flex moments-justify-center moments-items-center"
-      >
-        <div class="moments-text-xs moments-text-gray-500 moments-mr-2">
-          <span
-            v-tooltip="{
-              content: formatDatetime(moment.spec.releaseTime),
-            }"
-          >
-            {{ relativeTimeTo(moment.spec.releaseTime) }}
-          </span>
-        </div>
-        <VDropdown
-          compute-transform-origin
-          :triggers="['click']"
-          :popper-triggers="['click']"
-        >
-          <div
-            class="moments-p-2 moments-group hover:moments-bg-sky-600/10 moments-cursor-pointer moments-rounded-full moments-flex moments-items-center moments-justify-center"
-          >
-            <LucideMoreHorizontal
-              class="h-full w-full moments-text-md moments-text-gray-600 group-hover:moments-text-sky-600 moments-cursor-pointer"
-            />
-          </div>
-          <template #popper>
-            <VDropdownItem @click="handlerEditor"> 编辑 </VDropdownItem>
-            <VDropdownItem type="danger" @click="deleteMoment">
-              删除
-            </VDropdownItem>
-          </template>
-        </VDropdown>
-      </div>
-    </div>
+    <div v-highlight v-lazy v-tag v-html="props.moment.spec.content.html"></div>
+
     <div
-      class="moment-preview-html markdown-body moments-overflow-hidden moments-relative moments-pt-3 moments-pl-14"
+      v-if="
+        !!props.moment.spec.content.medium &&
+        props.moment.spec.content.medium.length > 0
+      "
+      class="img-box moments-flex moments-pt-2"
     >
-      <div
-        v-highlight
-        v-lazy
-        v-tag
-        v-html="props.moment.spec.content.html"
-      ></div>
-
-      <div
-        v-if="
-          !!props.moment.spec.content.medium &&
-          props.moment.spec.content.medium.length > 0
-        "
-        class="img-box moments-flex moments-pt-2"
+      <ul
+        class="moments-grid moments-grid-cols-3 moments-gap-1.5 moments-w-full sm:moments-w-1/2 !moments-pl-0"
+        role="list"
       >
-        <ul
-          class="moments-grid moments-grid-cols-3 moments-gap-1.5 moments-w-full sm:moments-w-1/2 !moments-pl-0"
-          role="list"
+        <li
+          v-for="(media, index) in props.moment.spec.content.medium"
+          :key="index"
+          class="moments-rounded-md moments-border moments-overflow-hidden moments-inline-block moments-cursor-pointer"
         >
-          <li
-            v-for="(media, index) in props.moment.spec.content.medium"
-            :key="index"
-            class="moments-rounded-md moments-border moments-overflow-hidden moments-inline-block moments-cursor-pointer"
+          <div
+            class="moments-aspect-w-1 moments-aspect-h-1"
+            @click="handleClickMedium(index)"
           >
-            <div
-              class="moments-aspect-w-1 moments-aspect-h-1"
-              @click="handleClickMedium(index)"
-            >
-              <template v-if="media.type == 'PHOTO'">
-                <img
-                  :src="media.url"
-                  class="moments-object-cover"
-                  loading="lazy"
-                />
-              </template>
-              <template v-else-if="media.type == 'VIDEO'">
-                <div
-                  class="moments-flex moments-h-full moments-w-full moments-flex-col moments-items-center moments-justify-center moments-space-y-1 moments-bg-gray-100"
+            <template v-if="media.type == 'PHOTO'">
+              <img
+                :src="media.url"
+                class="moments-object-cover"
+                loading="lazy"
+              />
+            </template>
+            <template v-else-if="media.type == 'VIDEO'">
+              <div
+                class="moments-flex moments-h-full moments-w-full moments-flex-col moments-items-center moments-justify-center moments-space-y-1 moments-bg-gray-100"
+              >
+                <LucideFileVideo />
+                <span
+                  class="moments-font-sans moments-text-xs moments-text-gray-500"
                 >
-                  <LucideFileVideo />
-                  <span
-                    class="moments-font-sans moments-text-xs moments-text-gray-500"
-                  >
-                    {{ getExtname(media.originType) }}
-                  </span>
-                </div>
-              </template>
-            </div>
-          </li>
-        </ul>
-      </div>
+                  {{ getExtname(media.originType) }}
+                </span>
+              </div>
+            </template>
+          </div>
+        </li>
+      </ul>
     </div>
   </div>
 </template>
diff --git a/console/src/views/MomentsList.vue b/console/src/views/MomentsList.vue
index d82ac4b..f500bb3 100644
--- a/console/src/views/MomentsList.vue
+++ b/console/src/views/MomentsList.vue
@@ -144,14 +144,14 @@ provide("tag", {
       <MingcuteMomentsLine class="moments-mr-2 moments-self-center" />
     </template>
   </VPageHeader>
-  <VCard class="moments-m-0 md:moments-m-4">
+  <VCard class="moments-m-0 md:moments-m-4 moments-flex-1">
     <div class="moments-container moments-mx-auto">
       <div
         class="moments-content moments-my-2 md:moments-my-4 moments-flex moments-flex-col moments-space-y-2"
       >
         <MomentEdit @save="refetch()" />
 
-        <div class="moment-header moments-pt-4 moments-pb-2">
+        <div class="moment-header moments-pt-8 moments-pb-2">
           <div
             class="moments-flex moments-flex-col moments-justify-between sm:moments-flex-row moments-space-x-2"
           >