chore: update selector style

web/src/components/MemoEditor.tsx

@@ -243,9 +243,19 @@ const MemoEditor: React.FC<Props> = () => {
             <div className="action-btn tag-action">
               <Icon.Hash className="icon-img" />
               <div ref={tagSeletorRef} className="tag-list" onClick={handleTagSeletorClick}>
-                {tags.map((t) => {
-                  return <span key={t}>{t}</span>;
-                })}
+                {tags.length > 0 ? (
+                  tags.map((tag) => {
+                    return (
+                      <span className="item-container" key={tag}>
+                        {tag}
+                      </span>
+                    );
+                  })
+                ) : (
+                  <p className="tip-text" onClick={(e) => e.stopPropagation()}>
+                    {t("common.null")}
+                  </p>
+                )}
               </div>
             </div>
             <button className="action-btn">

web/src/components/common/Selector.tsx

@@ -1,4 +1,5 @@
 import { memo, useEffect, useRef } from "react";
+import useI18n from "../../hooks/useI18n";
 import useToggle from "../../hooks/useToggle";
 import Icon from "../Icon";
 import "../../less/common/selector.less";
@@ -22,6 +23,7 @@ const nullItem = {
 
 const Selector: React.FC<Props> = (props: Props) => {
   const { className, dataSource, handleValueChanged, value } = props;
+  const { t } = useI18n();
   const [showSelector, toggleSelectorStatus] = useToggle(false);
 
   const seletorElRef = useRef<HTMLDivElement>(null);
@@ -70,19 +72,23 @@ const Selector: React.FC<Props> = (props: Props) => {
       </div>
 
       <div className={`items-wrapper ${showSelector ? "" : "!hidden"}`}>
-        {dataSource.map((d) => {
-          return (
-            <div
-              className={`item-container ${d.value === value ? "selected" : ""}`}
-              key={d.value}
-              onClick={() => {
-                handleItemClick(d);
-              }}
-            >
-              {d.text}
-            </div>
-          );
-        })}
+        {dataSource.length > 0 ? (
+          dataSource.map((d) => {
+            return (
+              <div
+                className={`item-container ${d.value === value ? "selected" : ""}`}
+                key={d.value}
+                onClick={() => {
+                  handleItemClick(d);
+                }}
+              >
+                {d.text}
+              </div>
+            );
+          })
+        ) : (
+          <p className="tip-text">{t("common.null")}</p>
+        )}
       </div>
     </div>
   );

web/src/less/common/selector.less

@@ -39,5 +39,9 @@
         color: @text-green;
       }
     }
+
+    > .tip-text {
+      @apply px-3 py-1 text-sm text-gray-600;
+    }
   }
 }

web/src/less/memo-editor.less

@@ -52,9 +52,13 @@
       > .tag-list {
         @apply hidden flex-col justify-start items-start absolute top-6 left-0 mt-1 p-1 z-1 rounded w-32 max-h-52 overflow-auto bg-black;
 
-        > span {
+        > .item-container {
           @apply w-full text-white cursor-pointer rounded text-sm leading-6 px-2 hover:bg-gray-700;
         }
+
+        > .tip-text {
+          @apply w-full text-sm text-gray-200 leading-6 px-2 cursor-default;
+        }
       }
     }
   }

web/src/locales/en.json

@@ -16,6 +16,7 @@
     "edit": "Edit",
     "restore": "Restore",
     "delete": "Delete",
+    "null": "Null",
     "share": "Share",
     "mark": "Mark",
     "archive": "Archive",

web/src/locales/zh.json

@@ -16,6 +16,7 @@
     "edit": "编辑",
     "restore": "恢复",
     "delete": "删除",
+    "null": "空",
     "share": "分享",
     "mark": "标注",
     "archive": "归档",