feat: add input search role (#4)

Synaptrix · Mar 17, 2023 · f6232f5 · f6232f5
1 parent 6ea9426
commit f6232f5
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 8 deletions.
diff --git a/src/components/Input/components/RoleList.vue b/src/components/Input/components/RoleList.vue
@@ -99,6 +99,7 @@ const handleClose = () => {
 </script>
 
 <!-- TODO: 优化代码 -->
+<!-- 修改和添加后期可优化为modal，会省去很多代码和 bug -->
 <template>
   <a-popover
     title="请选择对话的角色"

diff --git a/src/components/Input/index.vue b/src/components/Input/index.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { appWindow } from '@tauri-apps/api/window'
+import { Message } from '@arco-design/web-vue'
 import { useSessionStore, useRoleStore } from '@/stores'
 import { getAiMessage } from '@/utils'
 
@@ -8,14 +9,20 @@ const { isThinking } = storeToRefs(recordStore)
 
 const roleStore = useRoleStore()
 const { getFilterRoleList } = roleStore
-const { currentRole, popoverVisible } = storeToRefs(roleStore)
+const { currentRole, isEdit } = storeToRefs(roleStore)
 
 const textAreaElement = ref<HTMLTextAreaElement | null>(null)
 
 const textAreaValue = ref('')
 
 const onKeydown = (event: KeyboardEvent) => {
   if (event.key === 'Enter') {
+    if (isEdit.value) {
+      Message.info('请先完成角色的编辑')
+
+      return
+    }
+
     if (!event.shiftKey && event.which !== 229 && !event.isComposing) {
       event.preventDefault()
 
@@ -31,10 +38,6 @@ const onKeydown = (event: KeyboardEvent) => {
   }
 }
 
-watch(textAreaValue, (value) => {
-  getFilterRoleList(value)
-})
-
 watch(currentRole, () => {
   textAreaValue.value = ''
   textAreaElement.value?.focus()
@@ -56,9 +59,10 @@ onMounted(() => {
       class="bordered bg-transparent!"
       :placeholder="isThinking ? 'AI 正在思考...' : '有什么问题尽管问我'"
       v-model="textAreaValue"
-      :disabled="popoverVisible || isThinking"
+      :disabled="isThinking"
       auto-size
       clearable
+      @input="getFilterRoleList"
       @keydown="onKeydown"
     ></a-textarea>
   </div>

diff --git a/src/components/Session/components/NoSession.vue b/src/components/Session/components/NoSession.vue
@@ -21,5 +21,9 @@ const { shortcutKeys } = storeToRefs(useSettingsStore())
     </span>
     <!-- 发送消息 -->
     <span><a-typography-text code>Enter</a-typography-text> 发送消息</span>
+
+    <span>
+      开头输入 <a-typography-text code>/</a-typography-text> 搜索角色列表
+    </span>
   </div>
 </template>
diff --git a/src/stores/role.ts b/src/stores/role.ts
@@ -15,6 +15,8 @@ export const useRoleStore = defineStore(
     const filterRoleList = ref<RolePayload[]>([])
     // 显示角色列表弹框
     const popoverVisible = ref(false)
+    // 是否有角色正在编辑
+    const isEdit = computed(() => roleList.value.some((item) => item.isEdit))
 
     // 获取角色列表
     const getRoleList = async () => {
@@ -24,14 +26,27 @@ export const useRoleStore = defineStore(
     }
 
     // 检索角色列表
+    // BUG：检索出来后点击了编辑后的一系列问题
     const getFilterRoleList = (value: string) => {
       if (value.startsWith('/')) {
-        filterRoleList.value = roleList.value.filter(
-          (item) => item.name === value.slice(1)
+        filterRoleList.value = roleList.value.filter((item) =>
+          item.name.includes(value.slice(1))
         )
 
         popoverVisible.value = !!filterRoleList.value.length
+
+        return
+      }
+
+      if (isEdit.value) {
+        Message.info('请先完成角色的编辑')
+
+        return
       }
+
+      filterRoleList.value = []
+
+      popoverVisible.value = false
     }
 
     // 添加角色
@@ -82,7 +97,9 @@ export const useRoleStore = defineStore(
     return {
       currentRole,
       roleList,
+      filterRoleList,
       popoverVisible,
+      isEdit,
       getRoleList,
       getFilterRoleList,
       addRole,