chore: update memo style (#1581)

web/src/components/Memo.tsx

@@ -2,9 +2,10 @@ import { getRelativeTimeString } from "@/helpers/datetime";
 import { memo, useEffect, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { useEditorStore, useFilterStore, useMemoStore, useUserStore } from "@/store/module";
 import Tooltip from "./kit/Tooltip";
+import Divider from "./kit/Divider";
 import { showCommonDialog } from "./Dialog/CommonDialog";
 import Icon from "./Icon";
 import MemoContent from "./MemoContent";
@@ -22,7 +23,6 @@ interface Props {
 const Memo: React.FC<Props> = (props: Props) => {
   const { memo, readonly } = props;
   const { t, i18n } = useTranslation();
-  const navigate = useNavigate();
   const editorStore = useEditorStore();
   const filterStore = useFilterStore();
   const userStore = useUserStore();
@@ -44,10 +44,6 @@ const Memo: React.FC<Props> = (props: Props) => {
     };
   }, [i18n.language]);
 
-  const handleViewMemoDetailPage = () => {
-    navigate(`/m/${memo.id}`);
-  };
-
   const handleTogglePinMemoBtnClick = async () => {
     try {
       if (memo.pinned) {
@@ -213,34 +209,26 @@ const Memo: React.FC<Props> = (props: Props) => {
               <Icon.MoreHorizontal className="icon-img" />
             </span>
             <div className="more-action-btns-wrapper">
-              <div className="more-action-btns-container">
-                <div className="w-full flex flex-row justify-between px-3 py-2 mb-1 border-b dark:border-zinc-700">
-                  <Tooltip title={memo.pinned ? t("common.unpin") : t("common.pin")} side="top">
-                    <div onClick={handleTogglePinMemoBtnClick}>
-                      {memo.pinned ? (
-                        <Icon.Bookmark className="w-4 h-auto cursor-pointer rounded text-green-600" />
-                      ) : (
-                        <Icon.BookmarkPlus className="w-4 h-auto cursor-pointer rounded dark:text-gray-400" />
-                      )}
-                    </div>
-                  </Tooltip>
-                  <Tooltip title={t("common.edit")} side="top">
-                    <Icon.Edit3 className="w-4 h-auto cursor-pointer rounded dark:text-gray-400" onClick={handleEditMemoClick} />
-                  </Tooltip>
-                  <Tooltip title={t("common.share")} side="top">
-                    <Icon.Share
-                      className="w-4 h-auto cursor-pointer rounded dark:text-gray-400"
-                      onClick={handleGenerateMemoImageBtnClick}
-                    />
-                  </Tooltip>
-                </div>
-                <span className="btn" onClick={handleViewMemoDetailPage}>
-                  {t("memo.view-detail")}
+              <div className="more-action-btns-container min-w-[6em]">
+                <span className="btn" onClick={handleTogglePinMemoBtnClick}>
+                  {memo.pinned ? <Icon.BookmarkMinus className="w-4 h-auto mr-2" /> : <Icon.BookmarkPlus className="w-4 h-auto mr-2" />}
+                  {memo.pinned ? t("common.unpin") : t("common.pin")}
                 </span>
+                <span className="btn" onClick={handleEditMemoClick}>
+                  <Icon.Edit3 className="w-4 h-auto mr-2" />
+                  {t("common.edit")}
+                </span>
+                <span className="btn" onClick={handleGenerateMemoImageBtnClick}>
+                  <Icon.Share className="w-4 h-auto mr-2" />
+                  {t("common.share")}
+                </span>
+                <Divider />
                 <span className="btn text-orange-500" onClick={handleArchiveMemoClick}>
+                  <Icon.Archive className="w-4 h-auto mr-2" />
                   {t("common.archive")}
                 </span>
                 <span className="btn text-red-600" onClick={handleDeleteMemoClick}>
+                  <Icon.Trash className="w-4 h-auto mr-2" />
                   {t("common.delete")}
                 </span>
               </div>

web/src/components/kit/Divider.tsx

@@ -0,0 +1,9 @@
+interface Props {
+  className?: string;
+}
+
+const Divider = ({ className }: Props) => {
+  return <hr className={`${className} block my-1 border-gray-200 dark:border-gray-600`} />;
+};
+
+export default Divider;

web/src/less/memo.less

@@ -50,28 +50,8 @@
           @apply w-auto h-auto p-1 z-1 whitespace-nowrap rounded-lg bg-white dark:bg-zinc-800;
           box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
 
-          > .btns-container {
-            @apply w-full flex flex-row justify-around items-center border-b border-gray-100 dark:border-zinc-600 p-1 mb-1;
-
-            > .btn {
-              @apply relative w-6 h-6 p-1 text-gray-600 dark:text-gray-300 cursor-pointer select-none;
-
-              &:hover > .tip-text {
-                @apply block;
-              }
-
-              > .icon-img {
-                @apply w-5 h-auto;
-              }
-
-              > .tip-text {
-                @apply hidden absolute top-0 p-1 px-2 rounded text-xs leading-6 -mt-9 bg-black text-white shadow opacity-70;
-              }
-            }
-          }
-
           > .btn {
-            @apply w-full text-sm leading-6 py-1 px-3 rounded justify-start cursor-pointer dark:text-gray-300;
+            @apply w-full text-sm leading-6 py-1 px-3 rounded justify-start cursor-pointer select-none dark:text-gray-300;
 
             &.archive-btn {
               @apply text-orange-600;

web/src/locales/zh-Hans.json

@@ -55,7 +55,7 @@
     "avatar": "头像",
     "rename": "改名",
     "upload": "上传",
-    "visibility": "能见度",
+    "visibility": "可见性",
     "preview": "预览",
     "name": "姓名",
     "clear": "清除"
@@ -326,4 +326,4 @@
   "router": {
     "back-to-home": "回到首页"
   }
-}
+}