改进 移动端显示

src/components/settings/AssistantSettings.vue

@@ -43,7 +43,11 @@
     </n-result>
   </div>
   <div>
-    <n-drawer placement="left" v-model:show="showSettingsDialog" :width="600">
+    <n-drawer
+      placement="left"
+      v-model:show="showSettingsDialog"
+      :width="drawerWidth"
+    >
       <n-drawer-content closable title="编辑助理">
         <div v-if="currentAssistant">
           <n-form>
@@ -121,13 +125,11 @@
                     {{ c.token }}
                   </div>
                   <div>
-                    <n-popconfirm @positive-click="deleteAssistantShare(c.id ?? 0)">
+                    <n-popconfirm
+                      @positive-click="deleteAssistantShare(c.id ?? 0)"
+                    >
                       <template #trigger>
-                        <n-button
-                          quaternary
-                          circle
-                          type="warning"
-                        >
+                        <n-button quaternary circle type="warning">
                           <template #icon>
                             <n-icon size="16" class="cursor-pointer">
                               <TrashBinOutline />
@@ -135,9 +137,7 @@
                           </template>
                         </n-button>
                       </template>
-                      <div>
-                       删除后，应用将无法访问此助理。
-                      </div>
+                      <div>删除后，应用将无法访问此助理。</div>
                     </n-popconfirm>
                   </div>
                 </div>
@@ -187,7 +187,6 @@ import { useDialog } from "naive-ui";
 import { TrashBinOutline, SettingsOutline } from "@vicons/ionicons5";
 import getApi from "@/plugins/api";
 import { useChatStore } from "@/stores/chat";
-import router from "@/router";
 import { ref } from "vue";
 import {
   EntityAssistant,
@@ -196,6 +195,7 @@ import {
   EntityLibrary,
   EntityTool,
 } from "@/api";
+import { useIsMobile } from "@/utils/composables";
 
 const dialog = useDialog();
 const chatStore = useChatStore();
@@ -210,6 +210,15 @@ const librarySelects: any = ref([]);
 const libraries: Ref<EntityLibrary[]> = ref([]);
 const assistantShares: Ref<EntityAssistantShare[]> = ref([]);
 
+const isMobile = useIsMobile();
+const drawerWidth = computed(() => {
+  if (isMobile.value) {
+    return 300;
+  } else {
+    return 600;
+  }
+});
+
 async function getChats() {
   chatStore.chats = (await getApi().Chat.apiV1ChatsGet()).data.data;
 }

src/components/settings/ChatSettings.vue

@@ -48,10 +48,14 @@
     </n-result>
   </div>
   <div>
-    <n-drawer placement="left" v-model:show="showSettingsDialog" :width="600">
+    <n-drawer
+      placement="left"
+      v-model:show="showSettingsDialog"
+      :width="drawerWidth"
+    >
       <n-drawer-content closable title="编辑对话">
         <div v-if="currentChat">
-          <n-form >
+          <n-form>
             <n-form-item label="对话名称">
               <n-input
                 v-model:value="currentChat.name"
@@ -76,19 +80,23 @@
 </template>
 
 <script lang="ts" setup>
-import { NMenu, useDialog } from "naive-ui";
-import { useRoute } from "vue-router";
-import { leftMenuOptions } from "../../plugins/menus/left";
-import {
-  ChatboxOutline,
-  TrashBinOutline,
-  SettingsOutline,
-} from "@vicons/ionicons5";
+import { useDialog } from "naive-ui";
+import { TrashBinOutline, SettingsOutline } from "@vicons/ionicons5";
 import getApi from "../../plugins/api";
 import { useChatStore } from "../../stores/chat";
 import router from "@/router";
 import { ref } from "vue";
 import { EntityAssistant, EntityChat } from "@/api";
+import { useIsMobile } from "@/utils/composables";
+
+const isMobile = useIsMobile();
+const drawerWidth = computed(() => {
+  if (isMobile.value) {
+    return 300;
+  } else {
+    return 600;
+  }
+});
 
 const dialog = useDialog();
 const chatStore = useChatStore();

src/components/settings/ToolSettings.vue

@@ -14,7 +14,11 @@
     </div>
   </div>
   <div>
-    <n-drawer placement="left" v-model:show="showCreateDialog" :width="600">
+    <n-drawer
+      placement="left"
+      v-model:show="showCreateDialog"
+      :width="drawerWidth"
+    >
       <n-drawer-content closable title="新建工具">
         <n-form>
           <n-form-item label="名称">
@@ -47,6 +51,7 @@
 import { EntityTool, SchemaToolCreateRequest } from "@/api";
 import getApi from "@/plugins/api";
 import { useToolStore } from "@/stores/tools";
+import { useIsMobile } from "@/utils/composables";
 import { HammerOutline } from "@vicons/ionicons5";
 
 const toolStore = useToolStore();
@@ -59,6 +64,15 @@ const createToolRequest: Ref<SchemaToolCreateRequest> = ref({
   url: "",
 });
 
+const isMobile = useIsMobile();
+const drawerWidth = computed(() => {
+  if (isMobile.value) {
+    return 300;
+  } else {
+    return 600;
+  }
+});
+
 const getTools = async () => {
   toolStore.tools = (await getApi().Tool.apiV1ToolsGet()).data.data ?? [];
 };