feat: add MessagePlacementSelector

Author: mengshouer

src/shared/components/Button.tsx

@@ -78,7 +78,6 @@ export function Button({
 }: ButtonProps) {
   const { theme } = useTheme();
 
-  // 缓存计算结果以避免重复计算
   const variantStyles = (() => {
     const variantConfig = buttonVariants[variant];
     return typeof variantConfig === "function" ? variantConfig(theme) : variantConfig;

src/shared/components/LanguageSelector.tsx

@@ -19,10 +19,6 @@ export function LanguageSelector({ className, style }: LanguageSelectorProps) {
     { value: "en", label: "English" },
   ];
 
-  const handleLanguageChange = (value: string) => {
-    setLocale(value as Locale);
-  };
-
   return (
     <div
       className={className}
@@ -38,7 +34,7 @@ export function LanguageSelector({ className, style }: LanguageSelectorProps) {
       >
         {t("common.language")}:
       </label>
-      <Select value={locale} options={languages} onChange={handleLanguageChange} />
+      <Select value={locale} options={languages} onChange={(value) => setLocale(value as Locale)} />
     </div>
   );
 }

src/shared/components/Message.tsx

@@ -34,23 +34,24 @@ const MessageContainer = styled("div")`
   }
 
   &.message-success {
-    background-color: rgba(34, 197, 94, 0.4);
-    border: 1px solid rgba(34, 197, 94, 0.7);
+    --msg-color: 34, 197, 94;
   }
 
   &.message-error {
-    background-color: rgba(239, 68, 68, 0.4);
-    border: 1px solid rgba(239, 68, 68, 0.7);
+    --msg-color: 239, 68, 68;
   }
 
   &.message-warning {
-    background-color: rgba(245, 158, 11, 0.4);
-    border: 1px solid rgba(245, 158, 11, 0.7);
+    --msg-color: 245, 158, 11;
   }
 
   &.message-info {
-    background-color: rgba(59, 130, 246, 0.4);
-    border: 1px solid rgba(59, 130, 246, 0.7);
+    --msg-color: 59, 130, 246;
+  }
+
+  &[class*="message-"] {
+    background-color: rgba(var(--msg-color), 0.4);
+    border: 1px solid rgba(var(--msg-color), 0.7);
   }
 `;
 
@@ -123,9 +124,9 @@ export function Message({
     <MessageContainer
       className={`message-${type} ${className || ""}`}
       style={style}
-      onClick={() => onClose?.()}
-      onMouseEnter={() => pauseTimer()}
-      onMouseLeave={() => resumeTimer()}
+      onClick={onClose}
+      onMouseEnter={pauseTimer}
+      onMouseLeave={resumeTimer}
     >
       {content}
       <CloseIcon>×</CloseIcon>

src/shared/components/MessagePlacementSelector.tsx

@@ -0,0 +1,62 @@
+import { useTheme } from "../hooks/useTheme";
+import { useI18n } from "../i18n";
+import { Select } from "./Select";
+
+export type MessagePlacement =
+  | "top"
+  | "bottom"
+  | "top-left"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-right";
+
+interface MessagePlacementSelectorProps {
+  value: MessagePlacement;
+  onChange: (placement: MessagePlacement) => void;
+  className?: string;
+  style?: {
+    [key: string]: string | number;
+  };
+}
+
+export function MessagePlacementSelector({
+  value,
+  onChange,
+  className,
+  style,
+}: MessagePlacementSelectorProps) {
+  const { theme } = useTheme();
+  const { t } = useI18n();
+
+  const placements = [
+    { value: "top", label: t("common.messagePlacement.top") },
+    { value: "bottom", label: t("common.messagePlacement.bottom") },
+    { value: "top-left", label: t("common.messagePlacement.topLeft") },
+    { value: "top-right", label: t("common.messagePlacement.topRight") },
+    { value: "bottom-left", label: t("common.messagePlacement.bottomLeft") },
+    { value: "bottom-right", label: t("common.messagePlacement.bottomRight") },
+  ];
+
+  const handlePlacementChange = (newValue: string) => {
+    onChange(newValue as MessagePlacement);
+  };
+
+  return (
+    <div
+      className={className}
+      style={{ display: "flex", alignItems: "center", gap: "8px", ...style }}
+    >
+      <label
+        style={{
+          fontSize: "14px",
+          fontWeight: 500,
+          color: theme.textColor,
+          marginBottom: "0",
+        }}
+      >
+        {t("common.messagePlacement.label")}:
+      </label>
+      <Select value={value} options={placements} onChange={handlePlacementChange} />
+    </div>
+  );
+}

src/shared/components/index.ts

@@ -3,5 +3,6 @@ export { Checkbox } from "./Checkbox";
 export { Input } from "./Input";
 export { LanguageSelector } from "./LanguageSelector";
 export { Message } from "./Message";
+export { MessagePlacementSelector } from "./MessagePlacementSelector";
 export { Modal } from "./Modal";
 export { Select } from "./Select";

src/shared/i18n/locales/en.ts

@@ -13,6 +13,15 @@ export const enTranslations: LocaleData = {
     warning: "Warning",
     info: "Info",
     language: "Language",
+    messagePlacement: {
+      label: "Message Placement",
+      top: "Top Center",
+      bottom: "Bottom Center",
+      topLeft: "Top Left",
+      topRight: "Top Right",
+      bottomLeft: "Bottom Left",
+      bottomRight: "Bottom Right",
+    },
   },
   button: {
     download: "Download",

src/shared/i18n/locales/zh.ts

@@ -13,6 +13,15 @@ export const zhTranslations: LocaleData = {
     warning: "警告",
     info: "信息",
     language: "语言",
+    messagePlacement: {
+      label: "消息弹窗位置",
+      top: "顶部居中",
+      bottom: "底部居中",
+      topLeft: "左上角",
+      topRight: "右上角",
+      bottomLeft: "左下角",
+      bottomRight: "右下角",
+    },
   },
   button: {
     download: "下载",

src/shared/index.ts

@@ -20,4 +20,5 @@ export { Modal } from "./components/Modal";
 export { Input } from "./components/Input";
 export { Checkbox } from "./components/Checkbox";
 export { LanguageSelector } from "./components/LanguageSelector";
+export { MessagePlacementSelector } from "./components/MessagePlacementSelector";
 export { Select } from "./components/Select";

src/shared/types.ts

@@ -55,6 +55,13 @@ export interface DownloaderSettings extends BaseSettings {
   readonly showVideoDownloadButton: boolean;
   readonly showUniversalDownloadButton: boolean;
   readonly autoLikeOnDownload: boolean;
+  readonly messagePlacement:
+    | "top"
+    | "bottom"
+    | "top-left"
+    | "top-right"
+    | "bottom-left"
+    | "bottom-right";
 }
 
 // === 组件通用类型 ===