fix: filter role list problem (#34)

src/components/Input/components/RoleList.vue

@@ -11,20 +11,21 @@ import type { RolePayload } from '@/types'
 
 const roleStore = useRoleStore()
 const { getRoleList, updateRole, deleteRole, addRole } = roleStore
-const { currentRole, roleList, filterRoleList, popoverVisible } =
+const { currentRole, roleList, filterRoleList, popoverVisible, isEdit } =
   storeToRefs(roleStore)
 
 const { sessionDataList } = storeToRefs(useSessionStore())
 
 const isAdd = ref(false)
-const isEdit = computed(() => roleList.value.some((item) => item.isEdit))
 
 const renderList = computed(() =>
   filterRoleList.value.length && !isAdd.value
     ? filterRoleList.value
     : roleList.value
 )
 
+watch(renderList, () => handleVisible(!!renderList.value.length))
+
 const handleVisible = (value: boolean) => {
   if (sessionDataList.value.length || isAdd.value || isEdit.value) return
 
@@ -33,12 +34,11 @@ const handleVisible = (value: boolean) => {
 
 const handleAdd = () => {
   isAdd.value = true
+  filterRoleList.value = []
   roleList.value = [{ name: '', description: '', isEdit: true }]
 }
 
 const handleClick = () => {
-  getRoleList()
-
   if (sessionDataList.value.length) {
     Message.info({ content: '每个会话只能选择一个对话角色' })
 
@@ -108,7 +108,6 @@ const handleClose = () => {
 </script>
 
 <!-- TODO: 优化代码 -->
-<!-- 修改和添加后期可优化为modal，会省去很多代码和 bug -->
 <template>
   <a-popover
     title="请选择对话的角色"

src/components/Input/index.vue

@@ -8,13 +8,10 @@ const recordStore = useSessionStore()
 const { isThinking } = storeToRefs(recordStore)
 
 const roleStore = useRoleStore()
-const { getFilterRoleList } = roleStore
-const { currentRole, isEdit } = storeToRefs(roleStore)
+const { currentRole, isEdit, textAreaValue } = storeToRefs(roleStore)
 
 const textAreaElement = ref<HTMLTextAreaElement | null>(null)
 
-const textAreaValue = ref('')
-
 const onKeydown = (event: KeyboardEvent) => {
   if (event.key === 'Enter') {
     if (isEdit.value) {
@@ -67,10 +64,9 @@ onMounted(() => {
       class="bordered bg-transparent!"
       :placeholder="isThinking ? 'AI 正在思考...' : '有什么问题尽管问我'"
       v-model="textAreaValue"
-      :disabled="isThinking"
+      :disabled="isThinking || isEdit"
       auto-size
       clearable
-      @input="getFilterRoleList"
       @keydown="onKeydown"
     ></a-textarea>
   </div>

src/stores/role.ts

@@ -1,9 +1,8 @@
-import { selectSQL, insertSQL, updateSQL, deleteSQL, executeSQL } from '@/sqls'
+import { selectSQL, insertSQL, updateSQL, deleteSQL } from '@/sqls'
 import { useSessionStore } from '.'
 import { Message } from '@arco-design/web-vue'
 import type { RolePayload } from '@/types'
 
-// BUG: useRoleStore 使用地方过多，在获取到角色列表然后如果没有当前角色赋值为第 0 个时出问题了，即便存储了 currentRole，但也是获取到 undefined
 export const useRoleStore = defineStore(
   'roleStore',
   () => {
@@ -15,9 +14,26 @@ export const useRoleStore = defineStore(
     const filterRoleList = ref<RolePayload[]>([])
     // 显示角色列表弹框
     const popoverVisible = ref(false)
+    // 检索角色列表的输入框值
+    const textAreaValue = ref('')
     // 是否有角色正在编辑
     const isEdit = computed(() => roleList.value.some((item) => item.isEdit))
 
+    watch(roleList, () => {
+      getFilterRoleList()
+    })
+
+    watch(textAreaValue, () => {
+      getFilterRoleList()
+    })
+
+    watch(popoverVisible, (val) => {
+      if (val) return getRoleList()
+
+      roleList.value.length = 0
+      filterRoleList.value.length = 0
+    })
+
     // 获取角色列表
     const getRoleList = async () => {
       const result = await selectSQL('role')
@@ -26,29 +42,14 @@ export const useRoleStore = defineStore(
     }
 
     // 检索角色列表
-    // BUG：检索出来后点击了编辑后的一系列问题
-    const getFilterRoleList = (value: string) => {
-      if (value.startsWith('/')) {
+    const getFilterRoleList = () => {
+      if (textAreaValue.value.startsWith('/')) {
+        popoverVisible.value = true
+        filterRoleList.value.length = 0
         filterRoleList.value = roleList.value.filter((item) =>
-          item.name.includes(value.slice(1))
+          item.name.includes(textAreaValue.value.slice(1))
         )
-
-        console.log('filterRoleList.value ', filterRoleList.value)
-
-        popoverVisible.value = !!filterRoleList.value.length
-
-        return
       }
-
-      if (isEdit.value) {
-        Message.info('请先完成角色的编辑')
-
-        return
-      }
-
-      filterRoleList.value = []
-
-      popoverVisible.value = false
     }
 
     // 添加角色
@@ -94,13 +95,12 @@ export const useRoleStore = defineStore(
       )[0]
     }
 
-    onMounted(getRoleList)
-
     return {
       currentRole,
       roleList,
       filterRoleList,
       popoverVisible,
+      textAreaValue,
       isEdit,
       getRoleList,
       getFilterRoleList,