🔧 GPT 请求过程中不可输入命令

tychozzz · Jun 13, 2023 · c21adb7 · c21adb7
1 parent dba95a3
commit c21adb7
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 3 deletions.
diff --git a/src/components/gpt-terminal/ContentOutput.vue b/src/components/gpt-terminal/ContentOutput.vue
@@ -7,6 +7,8 @@
       <span v-if="output.type === 'text'" v-html="smartText(output.text)" />
     </template>
     <component
+      @start="handleStart"
+      @finish="handleFinish"
       :is="output.component"
       v-if="output.type === 'component'"
       v-bind="output.props ?? {}"
@@ -17,7 +19,7 @@
 <script setup lang="ts">
 import smartText from "../../utils/smartText";
 import OutputType = GptTerminal.OutputType;
-import { computed, toRefs } from "vue";
+import { computed, toRefs, defineEmits } from "vue";
 
 interface OutputProps {
   output: OutputType;
@@ -44,6 +46,18 @@ const outputTagColor = computed((): string => {
       return "";
   }
 });
+
+const emit = defineEmits(['start', 'finish'])
+
+// gpt 输出开始时的回调
+const handleStart = () => {
+  emit('start')
+}
+
+// gpt 输出结束后的回调
+const handleFinish = () => {
+  emit('finish')
+}
 </script>
 
 <style scoped>

diff --git a/src/components/gpt-terminal/GptTerminal.vue b/src/components/gpt-terminal/GptTerminal.vue
@@ -26,7 +26,7 @@
                 <span>{{ output.text }}</span>
               </div>
               <div v-for="(result, idx) in output?.resultList" :key="idx" class="terminal-row">
-                <content-output :output="result" />
+                <content-output @start="handleStart" @finish="handleFinish" :output="result" />
               </div>
             </template>
             <!-- 打印信息 -->
@@ -182,6 +182,18 @@ const doSubmitCommand = async () => {
   isRunning.value = false;
 };
 
+// 处理 GPT 请求开始时的操作
+const handleStart = () => {
+  console.log("gpt 请求开始")
+  isRunning.value = true
+}
+
+// 处理 GPT 请求结束后的操作
+const handleFinish = () => {
+  console.log("gpt 请求结束")
+  isRunning.value = false
+}
+
 // 输入框内容改变时，触发输入提示
 watchEffect(() => {
   debounceSetHint(inputCommand.value.text);
@@ -194,6 +206,17 @@ const prompt = computed(() => {
   return `[${user.value.username}]$`;
 });
 
+/**
+ * 命令样式
+ */
+const commandInputClass = () => {
+  const classNames = ['command-input'];
+  if (inputCommand.value.text.includes(' ')) {
+    classNames.push('white-background-text');
+  }
+  return classNames.join(' ');
+}
+
 /**
  * 终端主样式
  */

diff --git a/src/core/commands/gpt/subCommands/ChatBox.vue b/src/core/commands/gpt/subCommands/ChatBox.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, toRefs, ref } from "vue";
+import { computed, onMounted, toRefs, ref, defineEmits } from "vue";
 import { marked } from 'marked'
 import hljs from "highlight.js";
 
@@ -36,10 +36,13 @@ const result = computed(() => {
   return marked(output.value)
 })
 
+const emit = defineEmits(['start', 'finish']);
+
 onMounted(async () => {
   console.log("message -", message)
   console.log("role -", role)
 
+  emit('start')
   const response = await fetch('http://127.0.0.1:7345/api/gpt/get', {
     method: "POST",
     headers: {
@@ -60,6 +63,7 @@ onMounted(async () => {
     console.log("received data -", value)
     output.value += value?.replace('undefined', '')
   }
+  emit('finish')
 });
 </script>