Thu Jul 6 06:58:00 UTC 2023 inscode

src/App.vue

@@ -90,6 +90,12 @@
             <div class="w-full h-10 flex">
                 <input v-model="prompt" class="flex-auto ring-0	outline-0	pl-2 bg-slate-200 h-10" v-on:keyup.enter="query" placeholder="提示词" />
 
+                <t-dropdown :options="options" @click="clickHandler" class="ml-4 mt-1">
+                  <t-button theme="default" variant="text" shape="square"> 
+                    <t-icon :name="modeImage" size="24" class="w-6 h-6 text-cyan-800 font-bold hover:text-cyan-600 cursor-pointer"/>
+                  </t-button>
+                </t-dropdown>
+              
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" 
                 @click="showMoreSetting=!showMoreSetting"
                 class="w-6 mx-2 ml-4 mt-2 h-6 flex-none text-cyan-800 font-bold hover:text-cyan-600 cursor-pointer">
@@ -104,9 +110,6 @@
                   <path stroke-linecap="round" stroke-linejoin="round"
                     d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
                 </svg>
-
-                
-
             </div>
             <div class="w-full h-10 mt-2 flex gap-2" v-if="showMoreSetting">
                 <input v-model="negative_prompt" class="flex-auto ring-0	outline-0	pl-2 bg-slate-200 h-10" v-on:keyup.enter="query" placeholder="逆向提示词" />
@@ -153,6 +156,7 @@ export default {
       userAvatarList: [],
       robotAvatarList: [],
       mode: 'draw',
+      modeImage: 'chart-bubble',
       message: [
         // {"user": "User", "message": "创建一个用户表，要求分区"},
         // {"user": "AI", "message": "在GaussDB数据库中创建一个带有分区的用户表可以使用以下语句：在GaussDB数据库中创建一个带有分区的用户表可以使用以下语句：在GaussDB数据库中创建一个带有分区的用户表可以使用以下语句：在GaussDB数据库中创建一个带有分区的用户表可以使用以下语句："},
@@ -169,6 +173,11 @@ export default {
       speaking: false, // 是否正在输出语音
       autoSpeech: false, // 是否自动开始语音
       speech: null, // 语音object
+      options: [
+        { content: '绘图模式', value: 'draw' },
+        { content: '聊天模式', value: 'chat' },
+        { content: '自动模式', value: 'auto' },
+      ],
       showProfileSetting: false, //是否显示角色设置模块
       width: 512,
       height: 512,