代码编辑器添加AI助手，支持AI代码编写

src/components/composer/ai/AskAIEditor.vue

@@ -1,42 +1,26 @@
 <template>
   <div>
-    <q-select
-      v-if="apiOptions.length > 0"
-      :model-value="argvs.apiConfig"
-      @update:model-value="updateArgvs('apiConfig', $event)"
-      :options="apiOptions"
-      map-options
-      emit-value
-      dense
-      options-dense
-      filled
-      label="API模型"
-      class="q-mb-sm"
-    />
-    <q-field filled dense v-else class="q-mb-sm">
-      <template #control>
-        <div class="flex items-center justify-center full-width text-warning">
-          <q-icon name="warning" class="q-mr-sm" />
-          <div>
-            未配置API模型，配置方法：命令配置界面-右下角菜单按钮-API配置
-          </div>
-        </div>
-      </template>
-    </q-field>
-    <ButtonGroup
-      :model-value="argvs.content.presetPrompt"
-      @update:modelValue="updateArgvs('content.presetPrompt', $event)"
-      :options="presetPromptOptions"
-      height="26px"
-      class="q-mb-sm"
-    />
-    <VariableInput
-      :model-value="argvs.content.prompt"
-      @update:modelValue="updateArgvs('content.prompt', $event)"
-      label="提示词"
-      type="textarea"
-      autogrow
-    />
+    <div class="q-pt-sm">
+      <AISelector
+        :model-value="argvs.apiConfig"
+        @update:modelValue="updateArgvs('apiConfig', $event)"
+        class="q-mb-sm"
+      />
+      <ButtonGroup
+        :model-value="argvs.content.role"
+        @update:modelValue="updateArgvs('content.role', $event)"
+        :options="roleOptions"
+        height="26px"
+        class="q-mb-sm"
+      />
+      <VariableInput
+        :model-value="argvs.content.prompt"
+        @update:modelValue="updateArgvs('content.prompt', $event)"
+        label="提示词"
+        type="textarea"
+        autogrow
+      />
+    </div>
   </div>
 </template>
 
@@ -46,8 +30,7 @@ import ButtonGroup from "components/composer/common/ButtonGroup.vue";
 import { newVarInputVal } from "js/composer/varInputValManager";
 import VariableInput from "components/composer/common/VariableInput.vue";
 import { parseFunction, stringifyArgv } from "js/composer/formatString";
-import { dbManager } from "js/utools.js";
-
+import AISelector from "components/ai/AISelector.vue";
 export default defineComponent({
   name: "AskAIEditor",
   props: {
@@ -56,25 +39,26 @@ export default defineComponent({
   components: {
     VariableInput,
     ButtonGroup,
+    AISelector,
   },
   emits: ["update:modelValue"],
   data() {
     return {
+      showAIConfig: false,
       defaultArgvs: {
         content: {
           prompt: newVarInputVal("str"),
-          presetPrompt: "",
+          role: "",
         },
         apiConfig: {},
       },
-      apiOptions: [],
-      presetPromptOptions: [
-        { label: "自由问答", value: "" },
+      roleOptions: [
+        { label: "无", value: "" },
         { label: "翻译", value: "translate" },
         { label: "总结", value: "summarize" },
-        { label: "执行shell命令", value: "shell" },
+        { label: "生成shell命令", value: "shell" },
       ],
-      modelTypeOptions: [
+      apiTypeOptions: [
         { label: "OpenAI", value: "openai" },
         { label: "Ollama", value: "ollama" },
       ],
@@ -125,23 +109,6 @@ export default defineComponent({
       });
     },
   },
-  mounted() {
-    const apiConfigs = dbManager.getStorage("cfg_aiConfigs");
-    this.apiOptions = apiConfigs
-      ? apiConfigs.map((config) => {
-          return {
-            label: config.name,
-            value: config,
-          };
-        })
-      : [];
-    this.defaultArgvs.apiConfig = apiConfigs?.[0] || {};
-
-    const argvs = this.modelValue.argvs || this.defaultArgvs;
-    if (!this.modelValue.code) {
-      this.updateModelValue(argvs);
-    }
-  },
 });
 </script>