项目实训——聊天界面选择器

为了提高丰富和个性化的用户体验，添加模式选择功能，在输入问题后，可选择不同的模式进行对话。

选择不同的聊天模型

<div class="flex items-start p-2">
            <select v-model="model" @change="onChange"
              class="p-1 pr-3 rounded-md text-gray-500 hover:bg-gray-100 dark:hover:text-gray-400 dark:hover:bg-gray-900 disabled:hover:bg-transparent dark:disabled:hover:bg-transparent min-w-[100px]">
              <option disabled value="">model</option>
              <option v-for="option in modelOptions" :key="option.value" :value="option.value">
                {{ option.text }}
              </option>
            </select>
          </div>

 选择默认模式或对话模式

<div class="flex items-start p-2">
            <select v-model="choose" @change="onChange"
              class="p-1 pr-3 rounded-md text-gray-500 hover:bg-gray-100 dark:hover:text-gray-400 dark:hover:bg-gray-900 disabled:hover:bg-transparent dark:disabled:hover:bg-transparent min-w-[100px]">
              <option disabled value="">choose</option>
              <option v-for="option in dialogselect" :key="option.value" :value="option.value">
                {{ option.text }}
              </option>
            </select>
          </div>

其他多选框 

<div class="dropdown-container flex flex-col items-start p-2 relative">
            <button @click="toggleDropdown"
              class="mb-2 p-1 pr-3 rounded-md text-gray-500 hover:bg-gray-100 dark:hover:text-gray-400 dark:hover:bg-gray-900 disabled:hover:bg-transparent dark:disabled:hover:bg-transparent min-w-[100px]">
              Options
            </button>
            <div v-show="dropdownOpen" class="dropdown-content flex flex-col items-start absolute bottom-full mb-2">
              <div v-for="option in selectOptions" :key="option.value" class="flex items-center">
                <input type="checkbox" :id="option.value" @change="selectOption(option)" v-model="option.selected"
                  :value="option.value" class="p-1 rounded-md hover:bg-gray-100 dark:hover:bg-gray-900">
                <label :for="option.value" class="ml-2 text-gray-500 dark:text-gray-400">{{ option.text }}</label>
              </div>
            </div>
          </div>

整个data函数返回的对象定义了Vue组件的各种数据状态，这些状态可能会在用户交互和组件渲染中使用。这些数据属性可以通过Vue的响应式系统自动更新到视图中。 

data() {
    return {
      model: 'GLM3',
      modelOptions: [
        { value: 'GLM3', text: 'GLM3' },
        { value: 'GLM4', text: 'GLM4' },
      ],
      //chatMsg: "",
      convLoading: false,
      source: undefined,
      rsource: undefined,
 
      choose: 'default',
      dialogselect: [
        { value: 'default', text: '默认模式' },
        { value: 'dialog', text: '对话模式' },
      ],
      select: [], // 存储折叠面板的状态
      checkList: [], // 存储用户选择的复选框值
      selectOptions: [
        { value: 'option1', text: 'Option 1' },
        { value: 'option2', text: 'Option 2' },
        { value: 'option3', text: 'Option 3' }
      ],
      dropdownOpen: false
    }
  },