🚸 fix: improve plugin ux

lobehub · Jan 18, 2024 · b5136ca · b5136ca
1 parent 926b6d0
commit b5136ca
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 19 deletions.
diff --git a/public/manifest-dev.json b/public/manifest-dev.json
@@ -22,7 +22,7 @@
   "meta": {
     "avatar": "https://cdn.discordapp.com/icons/662267976984297473/39128f6c9fc33f4c95a27d4c601ad7db.webp",
     "tags": ["midjourney", "draw"],
-    "title": "Midjourney",
+    "title": "Midjourney DEV",
     "description": "midjourney plugin"
   },
   "settings": {

diff --git a/src/features/Input.tsx b/src/features/Input.tsx
@@ -1,6 +1,7 @@
 import { TextArea } from '@lobehub/ui';
 import { Button, Flex } from 'antd';
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 
 import { useStore } from '@/store';
 
@@ -23,18 +24,11 @@ const PromptInput = memo(() => {
         type={'block'}
         value={prompts}
       />
-      <Flex gap={8} vertical>
+      <Flexbox direction={'vertical-reverse'} gap={8}>
         <Button onClick={() => createImagineTask()} type={'primary'}>
           生成
         </Button>
-        <Button
-          onClick={() => {
-            updatePrompts('');
-          }}
-        >
-          重置
-        </Button>
-      </Flex>
+      </Flexbox>
     </Flex>
   );
 });

diff --git a/src/features/Preview/Actions.tsx b/src/features/Preview/Actions.tsx
@@ -29,16 +29,14 @@ const Actions = memo<{ setMask: (mask: boolean) => void }>(({ setMask }) => {
   const content = useMemo(() => {
     switch (currentTask?.action) {
       case 'VARIATION':
+      case 'REROLL':
       case 'IMAGINE': {
         return <ImagineAction id={currentTask.id || ''} setMask={setMask} />;
       }
       case 'UPSCALE': {
         break;
       }
 
-      case 'REROLL': {
-        break;
-      }
       case 'DESCRIBE': {
         break;
       }

diff --git a/src/features/Preview/ImagineAction.tsx b/src/features/Preview/ImagineAction.tsx
@@ -1,5 +1,7 @@
+import { Icon } from '@lobehub/ui';
 import { Button } from 'antd';
 import { createStyles } from 'antd-style';
+import { LucideScaling, LucideWand, RefreshCwIcon } from 'lucide-react';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -44,6 +46,8 @@ const useStyles = createStyles(({ css, cx }) => {
       left: 50%;
       transform: translateX(-50%);
 
+      opacity: 0;
+
       transition: opacity 0.3s;
     `,
   };
@@ -58,8 +62,7 @@ interface ImageActionProps {
 const ImageAction = memo<ImageActionProps>(({ setMask, id }) => {
   const { styles, cx } = useStyles();
 
-  const [inLobeChat, createSimpleChangeTask, isSuccess] = useStore((s) => [
-    s.inLobeChat,
+  const [createSimpleChangeTask, isSuccess] = useStore((s) => [
     s.createChangeTask,
     midjourneySelectors.getTaskById(id)(s)?.status === 'SUCCESS',
   ]);
@@ -79,6 +82,7 @@ const ImageAction = memo<ImageActionProps>(({ setMask, id }) => {
             <Flexbox className={styles.item} height={'50%'} key={index} width={'50%'}>
               <Flexbox className={styles.buttonCtn} gap={16} horizontal>
                 <Button
+                  icon={<Icon icon={LucideScaling} />}
                   onClick={(e) => {
                     e.stopPropagation();
 
@@ -91,6 +95,7 @@ const ImageAction = memo<ImageActionProps>(({ setMask, id }) => {
                   高清化
                 </Button>
                 <Button
+                  icon={<Icon icon={LucideWand} />}
                   onClick={(e) => {
                     e.stopPropagation();
 
@@ -105,8 +110,9 @@ const ImageAction = memo<ImageActionProps>(({ setMask, id }) => {
             </Flexbox>
           ))}
         </Flexbox>
-        <div className={cx('action-reroll', inLobeChat ? styles.rerollInLobeChat : styles.reroll)}>
+        <div className={cx('action-reroll', styles.reroll)}>
           <Button
+            icon={<Icon icon={RefreshCwIcon} />}
             onClick={(e) => {
               e.stopPropagation();
 

diff --git a/src/features/Preview/index.tsx b/src/features/Preview/index.tsx
@@ -40,6 +40,7 @@ const Preview = memo(() => {
   const currentTask = useStore(midjourneySelectors.currentActiveTask);
 
   const showImage = taskLoading || currentTask?.imageUrl;
+
   return (
     <Flexbox
       className={styles.container}

diff --git a/src/features/TaskList/index.tsx b/src/features/TaskList/index.tsx
@@ -2,15 +2,16 @@ import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { useStore } from '@/store';
+import { midjourneySelectors, useStore } from '@/store';
 
 import TaskItem from './TaskItem';
 
 const TaskList = memo(() => {
   const tasks = useStore((s) => s.tasks.map((t) => t.id), isEqual);
+  const hasMultiTasks = useStore(midjourneySelectors.hasMultiTasks);
 
   return (
-    tasks.length > 1 && (
+    hasMultiTasks && (
       <Flexbox gap={6} height={64} horizontal>
         {tasks.map((task) => (
           <TaskItem id={task} key={task} />

diff --git a/src/store/action.ts b/src/store/action.ts
@@ -204,7 +204,9 @@ export const actions: StateCreator<
           if (data) get().updateAppState(data, 'initApp');
 
           // 如果第一次在 LobeChat 中触发插件，则创建 imagine 任务
-          if (data.inLobeChat && data.tasks?.length === 0 && !!data.prompts) {
+          const noTask = data.tasks?.length === 0 || !data.tasks;
+
+          if (data.inLobeChat && noTask && !!data.prompts) {
             get().createImagineTask();
           }
         },

diff --git a/src/store/selectors.ts b/src/store/selectors.ts
@@ -31,12 +31,14 @@ const isCurrentTaskRunning = (s: MidjourneyStore) => {
 const isTaskActive = (id: string) => (s: MidjourneyStore) => {
   return getTaskById(id)(s)?.id === s.activeTaskId;
 };
+const hasMultiTasks = (s: MidjourneyStore) => s.tasks.length > 1;
 const isInLobeChat = (s: MidjourneyStore) => s.inLobeChat;
 
 export const midjourneySelectors = {
   currentActiveTask,
   currentTaskProgress,
   getTaskById,
+  hasMultiTasks,
   isAnyTaskRunning,
   isCurrentTaskRunning,
   isInLobeChat,