改进 抽屉

src/components/settings/AssistantSettings.vue

@@ -1,36 +1,38 @@
 <template>
-  <div class="mb-3">
-    <n-button tertiary @click="showCreateDialog = true"> 新建助理 </n-button>
+  <div v-if="assistants.length">
+    <div class="mb-3">
+      <n-button tertiary @click="showCreateDialog = true"> 新建助理 </n-button>
+    </div>
+    <n-list hoverable clickable>
+      <n-list-item
+        v-for="c in assistants"
+        :key="c.id"
+        @click="showEditAssistant(c.id ?? 0)"
+      >
+        <n-thing>
+          <div class="flex justify-between items-center">
+            <div>
+              {{ c.name }}
+            </div>
+            <div>
+              <n-button
+                quaternary
+                circle
+                type="info"
+                @click.stop="showEditAssistant(c.id ?? 0)"
+              >
+                <template #icon>
+                  <n-icon size="16" class="cursor-pointer">
+                    <SettingsOutline />
+                  </n-icon>
+                </template>
+              </n-button>
+            </div>
+          </div>
+        </n-thing>
+      </n-list-item>
+    </n-list>
   </div>
-  <n-list hoverable clickable v-if="assistants.length">
-    <n-list-item
-      v-for="c in assistants"
-      :key="c.id"
-      @click="showEditAssistant(c.id ?? 0)"
-    >
-      <n-thing>
-        <div class="flex justify-between items-center">
-          <div>
-            {{ c.name }}
-          </div>
-          <div>
-            <n-button
-              quaternary
-              circle
-              type="info"
-              @click.stop="showEditAssistant(c.id ?? 0)"
-            >
-              <template #icon>
-                <n-icon size="16" class="cursor-pointer">
-                  <SettingsOutline />
-                </n-icon>
-              </template>
-            </n-button>
-          </div>
-        </div>
-      </n-thing>
-    </n-list-item>
-  </n-list>
   <div v-else class="text-center">
     <n-result
       status="404"
@@ -148,7 +150,7 @@
       </n-drawer-content>
     </n-drawer>
 
-    <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="新建助理">
         <div v-if="currentAssistant">
           <n-form>
@@ -213,7 +215,7 @@ const assistantShares: Ref<EntityAssistantShare[]> = ref([]);
 const isMobile = useIsMobile();
 const drawerWidth = computed(() => {
   if (isMobile.value) {
-    return 300;
+    return 400;
   } else {
     return 600;
   }

src/components/settings/ChatSettings.vue

@@ -92,7 +92,7 @@ import { useIsMobile } from "@/utils/composables";
 const isMobile = useIsMobile();
 const drawerWidth = computed(() => {
   if (isMobile.value) {
-    return 300;
+    return 400;
   } else {
     return 600;
   }

src/components/settings/ToolSettings.vue

@@ -67,7 +67,7 @@ const createToolRequest: Ref<SchemaToolCreateRequest> = ref({
 const isMobile = useIsMobile();
 const drawerWidth = computed(() => {
   if (isMobile.value) {
-    return 300;
+    return 400;
   } else {
     return 600;
   }

src/layouts/DefaultLayout.vue

@@ -4,7 +4,6 @@ import { useUserStore } from "../stores/user";
 import Guest from "../pages/guest/index.vue";
 import router from "../router";
 import Header from "./Header.vue";
-import { useAppStore } from "@/stores/app";
 import element from "@/config/element";
 import { useIsMobile } from "@/utils/composables";
 const currentRoute = computed(() => router.currentRoute.value.name);

src/layouts/Header.vue

@@ -135,17 +135,13 @@ import leaflowpng from "@/assets/images/leaflow.png";
 const userStore = useUserStore();
 const isMobile = useIsMobile();
 const showDrawer = ref(false);
-const width = ref(200);
-// const chatStore = useChatStore();
-
-// 如果是手机，则 width 为全屏
-if (isMobile.value) {
-  // 获取屏幕宽度
-  width.value = window.innerWidth - 100;
-} else {
-  // 获取当前屏幕宽度 40% 的宽度
-  width.value = window.innerWidth * 0.4;
-}
+const width = computed(() => {
+  if (isMobile.value) {
+    return window.innerWidth - 100;
+  } else {
+    return window.innerWidth * 0.5;
+  }
+})
 
 const userPlacement = ref("bottom");
 if (isMobile.value) {