refactor: refactor the ui of moments interface and remove the search …

…feature (#79)

console/package.json

@@ -31,7 +31,7 @@
   },
   "devDependencies": {
     "@halo-dev/ui-plugin-bundler-kit": "^2.12.0",
-    "@iconify/json": "^2.2.31",
+    "@iconify/json": "^2.2.180",
     "@rushstack/eslint-patch": "^1.2.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@types/jsdom": "^16.2.15",

console/src/components/MomentEdit.vue

@@ -8,8 +8,8 @@ import { computed, onMounted, ref, toRaw } from "vue";
 import MediaCard from "./MediaCard.vue";
 import TextEditor from "./TextEditor.vue";
 import SendMoment from "~icons/ic/sharp-send";
-import MdiFileImageBox from "~icons/mdi/file-image-box";
 import cloneDeep from "lodash.clonedeep";
+import TablerPhoto from "~icons/tabler/photo";
 
 const props = withDefaults(
   defineProps<{
@@ -322,36 +322,43 @@ function handleKeydown(event: KeyboardEvent) {
       class="moments-bg-white moments-flex moments-justify-between moments-px-3.5 moments-py-2"
     >
       <div class="moments-h-fit">
-        <VButton
-          size="sm"
-          type="primary"
-          @click="addMediumVerify() && (attachmentSelectorModal = true)"
+        <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"
         >
-          <template #icon>
-            <MdiFileImageBox class="h-full w-full" />
-          </template>
-        </VButton>
+          <TablerPhoto
+            class="h-full w-full moments-text-md moments-text-gray-600 group-hover:moments-text-sky-600"
+            @click="addMediumVerify() && (attachmentSelectorModal = true)"
+          />
+        </div>
       </div>
 
       <div class="moments-flex moments-items-center moments-space-x-2.5">
-        <button
+        <div
           v-tooltip="{
             content:
               formState.spec.visible === 'PRIVATE' ? `私有访问` : '公开访问',
           }"
-          class="moments-cursor-pointer moments-inline-flex moments-text-gray-500 hover:moments-text-gray-900 moments-items-center moments-rounded moments-h-7 hover:moments-bg-teal-100 moments-px-3"
+          class="moments-p-2 moments-group moments-cursor-pointer moments-rounded-full moments-flex moments-items-center moments-justify-center"
+          :class="
+            formState.spec.visible === 'PRIVATE'
+              ? 'hover:moments-bg-red-600/10'
+              : 'hover:moments-bg-green-600/10'
+          "
           @click="handleToggleVisible()"
         >
           <IconEyeOff
             v-if="formState.spec.visible === 'PRIVATE'"
-            class="moments-h-4 moments-w-4"
+            class="h-full w-full moments-text-md moments-text-gray-600 group-hover:moments-text-red-600"
           />
-          <IconEye v-else class="moments-h-4 moments-w-4" />
-        </button>
+          <IconEye
+            v-else
+            class="h-full w-full moments-text-md moments-text-gray-600 group-hover:moments-text-green-600"
+          />
+        </div>
 
         <button
           v-if="isUpdateMode"
-          class="moments-cursor-pointer moments-text-gray-500 hover:moments-text-gray-900 moments-inline-flex moments-items-center moments-rounded moments-h-7 hover:moments-bg-teal-100 moments-px-3"
+          class="moments-cursor-pointer moments-text-gray-600 hover:moments-text-sky-600 moments-inline-flex moments-items-center moments-rounded moments-h-7 hover:moments-bg-sky-600/10 moments-px-3"
           @click="handlerCancel"
         >
           <span class="moments-text-xs"> 取消 </span>
@@ -366,7 +373,7 @@ function handleKeydown(event: KeyboardEvent) {
             @click="handlerCreateOrUpdateMoment"
           >
             <template #icon>
-              <SendMoment class="h-full w-full" />
+              <SendMoment class="moments-scale-[1.35] h-full w-full" />
             </template>
           </VButton>
         </div>

console/src/components/MomentItem.vue

@@ -4,13 +4,16 @@ import cloneDeep from "lodash.clonedeep";
 import { ref } from "vue";
 import MomentEdit from "./MomentEdit.vue";
 import MomentPreview from "./MomentPreview.vue";
+import type { Contributor } from "@halo-dev/api-client/index";
 
 const props = withDefaults(
   defineProps<{
     moment: Moment;
+    owner: Contributor;
   }>(),
   {
     moment: undefined,
+    owner: undefined,
   }
 );
 
@@ -55,6 +58,7 @@ const handlerCancel = () => {
     <template v-else>
       <MomentPreview
         :moment="previewMoment"
+        :owner="owner"
         @remove="handlerRemove"
         @editor="editing = true"
         @dblclick="editing = true"

console/src/components/MomentPreview.vue

@@ -1,26 +1,29 @@
 <script lang="ts" setup>
 import type { Moment } from "@/types";
 import apiClient from "@/utils/api-client";
-import { formatDatetime } from "@/utils/date";
+import { formatDatetime, relativeTimeTo } from "@/utils/date";
 import {
   Dialog,
   Toast,
-  IconMore,
   IconArrowLeft,
   IconArrowRight,
   VDropdown,
   VDropdownItem,
-  IconEyeOff,
+  VAvatar,
 } 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 {
@@ -159,32 +162,48 @@ const getExtname = (type: string) => {
     </template>
   </PreviewDetailModal>
   <div
-    class="preview card moments-bg-white moments-shrink moments-border moments-rounded-md moments-p-3.5 moments-relative"
+    class="preview card moments-bg-white moments-shrink moments-py-6 moments-relative moments-border-t-[1px] moments-border-gray-300"
     @dblclick="handleDblclick"
   >
-    <div
-      class="header moments-flex moments-items-center moments-justify-between moments-h-5"
-    >
-      <div class="moments-flex moments-items-center">
-        <div class="moments-block moments-text-xs moments-text-gray-500">
-          <span>{{ formatDatetime(props.moment.spec.releaseTime) }}</span>
-        </div>
-
-        <div v-if="props.moment.spec.visible == 'PRIVATE'" class="moments-ml-2">
-          <IconEyeOff class="moments-text-xs moments-text-gray-500" />
+    <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-3.5"
+        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']"
         >
-          <IconMore class="moments-text-gray-500 moments-cursor-pointer" />
+          <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">
@@ -195,57 +214,58 @@ const getExtname = (type: string) => {
       </div>
     </div>
     <div
-      class="moment-preview-html markdown-body moments-overflow-hidden moments-relative moments-pt-1"
+      class="moment-preview-html markdown-body moments-overflow-hidden moments-relative moments-pt-3 moments-pl-14"
     >
       <div
         v-highlight
         v-lazy
         v-tag
         v-html="props.moment.spec.content.html"
       ></div>
-    </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"
-        role="list"
+
+      <div
+        v-if="
+          !!props.moment.spec.content.medium &&
+          props.moment.spec.content.medium.length > 0
+        "
+        class="img-box moments-flex moments-pt-2"
       >
-        <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"
+        <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"
         >
-          <div
-            class="moments-aspect-w-1 moments-aspect-h-1"
-            @click="handleClickMedium(index)"
+          <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"
           >
-            <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"
+            <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"
                 >
-                  {{ getExtname(media.originType) }}
-                </span>
-              </div>
-            </template>
-          </div>
-        </li>
-      </ul>
+                  <LucideFileVideo />
+                  <span
+                    class="moments-font-sans moments-text-xs moments-text-gray-500"
+                  >
+                    {{ getExtname(media.originType) }}
+                  </span>
+                </div>
+              </template>
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </template>