perf: optimized the ui style of the role component (#3)

src-tauri/src/main.rs

@@ -10,11 +10,11 @@ fn main() {
     folder::create_folder();
 
     tauri::Builder::default()
-        .setup(|app| {
-            // Make the docker NOT to have an active app when started
-            app.set_activation_policy(tauri::ActivationPolicy::Accessory);
-            Ok(())
-        })
+        // .setup(|app| {
+        //     // Make the docker NOT to have an active app when started
+        //     app.set_activation_policy(tauri::ActivationPolicy::Accessory);
+        //     Ok(())
+        // })
         .system_tray(tray::main_menu())
         .plugin(tauri_plugin_sql::Builder::default().build())
         .plugin(tauri_plugin_autostart::init(

src-tauri/tauri.conf.json

@@ -54,7 +54,7 @@
         "resizable": false,
         "maximized": false,
         "title": "ChatGPT",
-        "alwaysOnTop": true,
+        "alwaysOnTop": false,
         "decorations": false,
         "transparent": true
       }

src/App.vue

@@ -3,8 +3,6 @@ import { appWindow } from '@tauri-apps/api/window'
 import { initSQL } from '@/sqls'
 import { useSettingsStore } from '@/stores'
 
-initSQL()
-
 const { themeClass, isFix } = storeToRefs(useSettingsStore())
 
 const isLoading = ref(true)

src/assets/css/global.scss

@@ -62,10 +62,6 @@ body {
 }
 
 .mark {
-  color: rgb(var(--arcoblue-6));
+  color: rgb(var(--primary-6));
   background-color: transparent;
 }
-
-.arco-popover-content {
-  margin-top: 0;
-}

src/assets/css/reset.scss

@@ -37,7 +37,3 @@ ol {
 a {
   text-decoration: none;
 }
-
-textarea {
-  resize: none !important;
-}

src/components/Input/components/RoleList.vue

@@ -1,122 +1,181 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import {
   IconEdit,
   IconCheck,
   IconDelete,
   IconClose
 } from '@arco-design/web-vue/es/icon'
+import { Message } from '@arco-design/web-vue'
 import { useRoleStore, useSessionStore } from '@/stores'
 import type { RolePayload } from '@/types'
 
 const roleStore = useRoleStore()
-const { updateRole, deleteRole, addRole, getRoleList } = roleStore
-const { currentRole, showList, isShow, isAddNew } = storeToRefs(roleStore)
+const { getRoleList, updateRole, deleteRole, addRole } = roleStore
+const { currentRole, roleList, popoverVisible } = storeToRefs(roleStore)
 
 const { sessionDataList } = storeToRefs(useSessionStore())
 
-const handleUpdate = (item: RolePayload) => {
-  if (isAddNew.value) {
-    const { name, description } = item
-    addRole({ name, description })
-  } else {
-    if (!item.id) return
-    item.isEdit = false
-    updateRole(item)
+const isAdd = ref(false)
+const isEdit = computed(() => roleList.value.some((item) => item.isEdit))
+
+const handleVisible = (value: boolean) => {
+  if (sessionDataList.value.length || isAdd.value || isEdit.value) return
+
+  popoverVisible.value = value
+}
+
+const handleAdd = () => {
+  isAdd.value = true
+  roleList.value = [{ name: '', description: '', isEdit: true }]
+}
+
+const handleClick = () => {
+  if (sessionDataList.value.length) {
+    Message.info({ content: '每个会话只能选择一个对话角色' })
+
+    return
+  }
+
+  if (isAdd.value || isEdit.value) {
+    const action = isAdd.value ? '添加' : '编辑'
+
+    Message.info(`有角色正在${action}，无法关闭`)
+
+    return
   }
+
+  popoverVisible.value = !popoverVisible.value
 }
 
-const handleSelect = (role: RolePayload) => {
-  isShow.value = false
-  currentRole.value = role
+const handleSelect = (item: RolePayload) => {
+  if (item.isEdit) return
+
+  if (isEdit.value) {
+    Message.info(`有角色正在编辑，无法进行切换`)
+
+    return
+  }
+
+  currentRole.value = item
+
+  popoverVisible.value = false
 }
 
-const handleAdd = () => {
-  isAddNew.value = true
-  // TODO 这里需要优化，自动聚焦到输入框
+const handleEdit = (item: RolePayload) => {
+  if (isEdit.value) {
+    Message.info(`一次只能编辑一个角色`)
+
+    return
+  }
+
+  item.isEdit = true
 }
 
-const handleHide = (value: boolean) => {
-  // 判断是否有正在编辑的角色
-  const isEdit = showList.value.some((item) => item.isEdit)
-  if (isEdit) return
+const handleUpdate = (item: RolePayload) => {
+  const { name, description } = item
+
+  if (!name.trim() || !description.trim()) {
+    Message.error('角色信息不能为空')
 
-  isShow.value = value
+    return
+  }
+
+  if (isAdd.value) {
+    addRole({ name, description })
+
+    isAdd.value = false
+  } else {
+    delete item.isEdit
+
+    updateRole(item)
+  }
+}
+
+const handleClose = () => {
+  isAdd.value = false
+
+  getRoleList()
 }
 </script>
-<!-- TODO:优化代码和 css 样式 -->
-<!-- TODO:输入内容的非空判断 -->
-<!-- TODO:修改当前选中的，有 bug -->
+
+<!-- TODO: 优化代码 -->
 <template>
   <a-popover
     title="请选择对话的角色"
     class="role-popover w-full"
     trigger="click"
-    :popup-visible="isShow && !sessionDataList.length"
-    @click="isShow = !isShow"
-    @popup-visible-change="handleHide"
+    :popup-visible="popoverVisible"
+    @popup-visible-change="handleVisible"
   >
     <template #title>
       <div class="flex items-center justify-between">
-        <span>{{ isAddNew ? '请填写信息' : '请选择对话的角色' }}</span>
-        <a-button type="outline" @click="handleAdd" v-if="!isAddNew"
-          >添加角色</a-button
-        >
+        <span>{{ isAdd ? '请填写角色信息' : '请选择对话的角色' }}</span>
+        <a-button type="outline" @click="handleAdd" v-if="!isAdd">
+          添加角色
+        </a-button>
       </div>
     </template>
 
     <a-tooltip content="对话角色" position="tl">
-      <Avatar class="w-12! cursor-pointer" :value="currentRole?.name" />
+      <Avatar
+        class="w-12! cursor-pointer"
+        :value="currentRole?.name"
+        @click="handleClick"
+      />
     </a-tooltip>
 
     <template #content>
-      <ul class="role-list">
+      <ul>
         <li
-          class="flex cursor-pointer items-center gap-4 rounded-t bg-transparent p-4 text-[var(--color-text-1)] hover:bg-red-100"
+          v-for="item in roleList"
+          class="flex cursor-pointer items-center gap-4 bg-transparent p-4 text-[var(--color-text-1)] transition hover:bg-[var(--color-fill-2)]"
           :class="{
-            'bg-blue-200!': currentRole?.id === item.id
+            'bg-[rgb(var(--blue-6))]!': currentRole?.id === item.id,
+            'bg-transparent!': item.isEdit,
+            'text-white': currentRole?.id === item.id && !item.isEdit
           }"
-          v-for="item in showList"
           :key="item.id"
-          @click="item.isEdit ? '' : handleSelect(item)"
+          @click="handleSelect(item)"
         >
           <div class="flex flex-1 items-center gap-4">
             <Avatar class="w-10!" :value="item.name" />
 
             <div class="flex flex-1 flex-col gap-2">
-              <a-input
-                v-model="item.name"
-                placeholder="请输入角色名称"
-                allow-clear
-                v-if="item.isEdit"
-                @click.stop
-              />
-              <span v-else>
-                {{ item.name }}
-              </span>
-
-              <a-textarea
-                v-model="item.description"
-                placeholder="请输入角色描述"
-                auto-size
-                allow-clear
-                v-if="item.isEdit"
-                @click.stop
-              ></a-textarea>
-              <span v-else>
-                {{ item.description }}
-              </span>
+              <template v-if="!item.isEdit">
+                <span>
+                  {{ item.name }}
+                </span>
+                <span>
+                  {{ item.description }}
+                </span>
+              </template>
+
+              <template v-else>
+                <a-input
+                  v-model="item.name"
+                  placeholder="请输入角色名称"
+                  allow-clear
+                  auto-focus
+                />
+
+                <a-textarea
+                  v-model="item.description"
+                  placeholder="请输入角色描述"
+                  auto-size
+                  allow-clear
+                />
+              </template>
             </div>
           </div>
 
-          <!-- TODO 这里我在在表里新增一个字is_default，更方便处理 -->
           <div v-if="!item.is_default" @click.stop>
             <div v-if="!item.isEdit" class="text-5 flex gap-5">
-              <IconEdit @click="item.isEdit = true" />
+              <IconEdit @click="handleEdit(item)" />
               <IconDelete @click="deleteRole(item.id!)" />
             </div>
             <div v-else class="text-5 flex gap-5">
               <IconCheck @click="handleUpdate(item)" />
-              <IconClose @click="getRoleList" />
+              <IconClose @click="handleClose" />
             </div>
           </div>
         </li>
@@ -135,7 +194,7 @@ const handleHide = (value: boolean) => {
     }
 
     .arco-popover-content {
-      @apply flex-1 overflow-auto;
+      @apply mt-0 flex-1 overflow-auto;
     }
   }
 }

src/components/Input/index.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { appWindow } from '@tauri-apps/api/window'
 import { useSessionStore, useRoleStore } from '@/stores'
 import { getAiMessage } from '@/utils'
 
@@ -7,7 +8,7 @@ const { isThinking } = storeToRefs(recordStore)
 
 const roleStore = useRoleStore()
 const { getFilterRoleList } = roleStore
-const { currentRole } = storeToRefs(roleStore)
+const { currentRole, popoverVisible } = storeToRefs(roleStore)
 
 const textAreaElement = ref<HTMLTextAreaElement | null>(null)
 
@@ -40,9 +41,9 @@ watch(currentRole, () => {
 })
 
 onMounted(() => {
-  // appWindow.onFocusChanged(() => {
-  //   textAreaElement.value?.focus()
-  // })
+  appWindow.onFocusChanged(() => {
+    textAreaElement.value?.focus()
+  })
 })
 </script>
 
@@ -55,10 +56,10 @@ onMounted(() => {
       class="bordered bg-transparent!"
       :placeholder="isThinking ? 'AI 正在思考...' : '有什么问题尽管问我'"
       v-model="textAreaValue"
-      :disabled="isThinking"
-      @keydown="onKeydown"
+      :disabled="popoverVisible || isThinking"
       auto-size
       clearable
+      @keydown="onKeydown"
     ></a-textarea>
   </div>
 </template>

src/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import App from './App.vue'
+import '@arco-design/web-vue/es/message/style/css.js'
 import 'uno.css'
 import '@kidonng/daisyui/index.css'
 import './assets/css/global.scss'

src/sqls/index.ts

@@ -53,7 +53,7 @@ export const executeSQL = async (sql: string) => {
         break
     }
 
-    dialogErrorMessage(`${action}数据时遇到了问题，请重试~`)
+    dialogErrorMessage(`${action}数据时遇到了问题，请重试！`)
   }
 }
 
@@ -64,7 +64,7 @@ export const initSQL = async () => {
   await executeSQL(
     `
     CREATE TABLE IF NOT EXISTS session (id TEXT, title TEXT, role_id INTEGER);
-    CREATE TABLE IF NOT EXISTS session_data (id INTEGER PRIMARY KEY AUTOINCREMENT, session_id TEXT, is_ask INTEGER, is_memory INTEGER, message TEXT, message_type TEXT DEFAULT 'text', time TIMESTAMP DEFAULT CURRENT_TIMESTAMP);
+    CREATE TABLE IF NOT EXISTS session_data (id INTEGER PRIMARY KEY AUTOINCREMENT, session_id TEXT, message TEXT, is_ask INTEGER, is_memory INTEGER, message_type TEXT, time TIMESTAMP DEFAULT CURRENT_TIMESTAMP);
     CREATE TABLE IF NOT EXISTS role (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, description TEXT, is_default INTEGER DEFAULT false);
     CREATE TABLE IF NOT EXISTS credit (id INTEGER PRIMARY KEY AUTOINCREMENT, history_id INTEGER, token_cost INTEGER, api_key TEXT);
     `