refactor: modify interaction logic of the prompt editing box

Signed-off-by: DingChil <[email protected]>
webpilot-ai · Nov 2, 2023 · 9e578c2 · 9e578c2
1 parent a72db27
commit 9e578c2
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 38 deletions.
diff --git a/assets/locales/en/messages.json b/assets/locales/en/messages.json
@@ -122,6 +122,9 @@
   "SEO": {
     "message": "SEO"
   },
+  "Set_a_prompt_here": {
+    "message": "Set a prompt here"
+  },
   "Set_up_API": {
     "message": "Set up API"
   },

diff --git a/assets/locales/zh_CN/messages.json b/assets/locales/zh_CN/messages.json
@@ -122,6 +122,9 @@
   "SEO": {
     "message": "SEO"
   },
+  "Set_a_prompt_here": {
+    "message": "提词写这里"
+  },
   "Set_up_API": {
     "message": "设置 API"
   },

diff --git a/scripts/i18n/gettextOutput/messages.pot b/scripts/i18n/gettextOutput/messages.pot
@@ -41,8 +41,8 @@ msgstr ""
 msgid "Ask a question about this webpage"
 msgstr ""
 
-#: src/components/FloatControlButtons.vue:20
-#: src/components/FloatControlButtons.vue:21
+#: src/components/FloatControlButtons.vue:14
+#: src/components/FloatControlButtons.vue:15
 #: src/components/PromptMenu.vue:19
 #: src/components/PromptMenu.vue:20
 #: src/components/PromptMenu.vue:29
@@ -75,8 +75,8 @@ msgstr ""
 msgid "Click"
 msgstr ""
 
-#: src/components/FloatControlButtons.vue:10
-#: src/components/FloatControlButtons.vue:9
+#: src/components/FloatControlButtons.vue:6
+#: src/components/FloatControlButtons.vue:7
 #: src/components/PromptMenu.vue:19
 #: src/components/PromptMenu.vue:20
 #: src/components/PromptMenu.vue:29
@@ -89,8 +89,8 @@ msgstr ""
 msgid "Confirm"
 msgstr ""
 
-#: src/components/FloatControlButtons.vue:42
-#: src/components/FloatControlButtons.vue:43
+#: src/components/FloatControlButtons.vue:30
+#: src/components/FloatControlButtons.vue:31
 msgid "Copy"
 msgstr ""
 
@@ -220,13 +220,17 @@ msgstr ""
 msgid "SEO"
 msgstr ""
 
+#: src/components/PromptEditor.vue:15
+msgid "Set a prompt here"
+msgstr ""
+
 #: src/tabs/components/StepTwo.vue:2
 #: src/tabs/components/StepTwo.vue:3
 msgid "Set up API"
 msgstr ""
 
-#: src/components/FloatControlButtons.vue:31
-#: src/components/FloatControlButtons.vue:32
+#: src/components/FloatControlButtons.vue:22
+#: src/components/FloatControlButtons.vue:23
 msgid "Settings"
 msgstr ""
 

diff --git a/scripts/i18n/gettextOutput/translations.json b/scripts/i18n/gettextOutput/translations.json
@@ -40,6 +40,7 @@
     "Save Changes": "Save Changes",
     "Select text, and press ": "Select text, and press ",
     "SEO": "SEO",
+    "Set a prompt here": "Set a prompt here",
     "Set up API": "Set up API",
     "Settings": "Settings",
     "Setup your own API key, to enjoy more": "Setup your own API key, to enjoy more",

diff --git a/src/components/FloatControlButtons.vue b/src/components/FloatControlButtons.vue
@@ -3,9 +3,6 @@
     <li v-show="!showBack" :class="$style.box">
       <Popper hover offset-distance="14" offset-skid="-4" placement="right">
         <InteractiveIcon :class="$style.btn" type="close" @click="popupClose" />
-        <!-- <div :class="$style.btn">
-          <InteractiveIcon :class="$style.ico" type="close" @click="popupClose" />
-        </div> -->
         <template #content>
           <span :class="$style.popover">{{ $gettext('Close') }}</span>
         </template>
@@ -14,9 +11,6 @@
     <li v-show="showBack" :class="$style.box">
       <Popper hover offset-distance="14" offset-skid="-4" placement="right">
         <InteractiveIcon :class="$style.btn" type="previous" @click="popupBack" />
-        <!-- <div :class="$style.btn">
-          <InteractiveIcon :class="$style.ico" type="previous" @click="popupBack" />
-        </div> -->
         <template #content>
           <span :class="$style.popover">{{ $gettext('Back') }}</span>
         </template>
@@ -25,9 +19,6 @@
     <li v-show="showSetting" :class="$style.box">
       <Popper hover offset-distance="14" offset-skid="-4" placement="right">
         <InteractiveIcon :class="$style.btn" type="setting" @click="openSettingPage" />
-        <!-- <div :class="$style.btn">
-          <InteractiveIcon :class="$style.ico" type="setting" @click="openSettingPage" />
-        </div> -->
         <template #content>
           <span :class="$style.popover">{{ $gettext('Settings') }}</span>
         </template>
@@ -36,9 +27,6 @@
     <li v-show="showCopy" :class="$style.box">
       <Popper hover offset-distance="14" offset-skid="-4" placement="right">
         <InteractiveIcon :class="$style.btn" type="copy" @click="handleCopy" />
-        <!-- <div :class="$style.btn">
-          <InteractiveIcon :class="$style.ico" type="setting" @click="openSettingPage" />
-        </div> -->
         <template #content>
           <span :class="$style.popover">{{ $gettext('Copy') }}</span>
         </template>
@@ -97,7 +85,7 @@ const handleCopy = () => {
   position: absolute;
   top: 8px;
   right: -44px;
-  margin: 0 !important;
+  margin: 0;
   padding: 0;
 }
 
@@ -106,11 +94,7 @@ const handleCopy = () => {
   list-style: none;
 
   .btn {
-    box-sizing: content-box !important;
-
-    // display: flex;
-    // width: 36px;
-    // height: 36px;
+    box-sizing: content-box;
     width: 24px;
     height: 24px;
     padding: 6px;
@@ -121,11 +105,6 @@ const handleCopy = () => {
   }
 }
 
-// .ico {
-//   flex: 1;
-//   filter: brightness(var(--webpilot-theme-brightness-number));
-// }
-
 .popover {
   padding: 4px 8px;
   color: #fff;

diff --git a/src/components/PromptEditor.vue b/src/components/PromptEditor.vue
@@ -7,15 +7,15 @@
         :class="$style.content__send"
         @click="handleSendCommand"
       /> -->
-      <InteractiveIcon :class="$style.content__send" type="send" @click="handleSendCommand" />
+      <!-- <InteractiveIcon :class="$style.content__send" type="send" @click="handleSendCommand" /> -->
       <textarea
         ref="textareaRef"
         v-model="command"
         :class="$style.content__textarea"
         :placeholder="prompt.command || $gettext('Set a prompt here')"
       />
       <article :class="$style.content__back">
-        <InteractiveIcon type="previous" @click="handleHideEditor" />
+        <InteractiveIcon type="close" @click="handleHideEditor" />
       </article>
     </section>
     <section :class="$style.container__footer">
@@ -31,7 +31,7 @@
         <input
           v-model="title"
           :class="$style['form-name__txt']"
-          :placeholder="prompt.title || $gettext('Add prompt name')"
+          :placeholder="prompt.title || $gettext('Add name')"
           type="text"
         />
         <!-- <InteractiveIcon :hover-state="title === '' ? 1 : 2" :size="18" type="pencil" /> -->
@@ -103,6 +103,7 @@ watch(command, () => {
 })
 
 const handleSave = () => {
+  if (!command.value && !command.value.length) return
   if (!title.value) title.value = 'Prompt'
   emits('onSave', {
     title: title.value,
@@ -121,9 +122,9 @@ const handleHideEditor = () => {
   emits('onHide')
 }
 
-const handleSendCommand = () => {
-  emits('onSend', command.value)
-}
+// const handleSendCommand = () => {
+//   emits('onSend', command.value)
+// }
 
 watchEffect(() => {
   title.value = props.prompt.title
@@ -219,7 +220,7 @@ watchEffect(() => {
   margin-right: auto;
   padding: 0 5px;
   border: 1px solid var(--webpilot-theme-stoke-and-hover-status, #dcdee1);
-  border-radius: 10px;
+  border-radius: 5px;
 }
 
 .form-name__txt {

diff --git a/src/csui/Index/ThePopupBox/ThePopupBox.vue b/src/csui/Index/ThePopupBox/ThePopupBox.vue
@@ -402,6 +402,8 @@ const handleDeletePrompt = () => {
 }
 
 const handleCreatePrompt = () => {
+  selectedPrompt.index = currentPromptsList.value ? currentPromptsList.value.length : 0
+  selectedPrompt.prompt = {title: '', command: ''}
   handleShowEditor()
 }