改进 输入组件

src/components/Container.vue

@@ -8,15 +8,20 @@ const userStore = useUserStore();
 </script>
 
 <template>
-  <Header v-show="userStore.logined" style="min-height: var(--header-height)"></Header>
+  <Header
+    v-show="userStore.logined"
+    style="min-height: var(--header-height)"
+  ></Header>
 
-  <router-view v-slot="{ Component }">
+  <div class="p-4">
-    <transition mode="out-in" name="fade">
+    <router-view v-slot="{ Component }">
-      <div>
+      <transition mode="out-in" name="fade">
-        <component :is="Component" />
+        <div>
-      </div>
+          <component :is="Component" />
-    </transition>
+        </div>
-  </router-view>
+      </transition>
+    </router-view>
+  </div>
 
   <!-- <router-view></router-view> -->
 </template>

src/components/chat/chat.vue

@@ -1,17 +1,101 @@
 <template>
-  <div class="mt-3 mb-1 text-5xl">
+  <div
-    <n-gradient-text type="info" class="p-3">
+    class="relative flex flex-col h-[calc(100vh-var(--header-height)*1.9)]"
-      你好，{{ userStore.user.name }}
+    style="--header-height: 48px"
-    </n-gradient-text>
+  >
-    <br />
+    <div class="flex-grow mt-3 mb-1 text-5xl">
-    <n-text depth="3"> 有什么我可以帮您的吗？ </n-text>
+      <n-gradient-text type="info" class="pr-3">
+        你好，{{ userStore.user.name }}
+      </n-gradient-text>
+      <br />
+      <div class="pr-3 mt-8 text-2xl">
+        <n-text depth="3"> 有什么我可以帮您的吗？ </n-text>
+      </div>
+    </div>
+
+    <div class="absolute bottom-0 left-0 right-0 pb-5">
+      <div
+        ref="inputContainer"
+        class="mx-auto w-full max-w-2xl outline-none input-text input-bg rounded-full flex pl-5 pr-5 bg-white shadow-lg items-center"
+      >
+        <div class="overflow-x-hidden h-full w-full flex items-center">
+          <n-scrollbar>
+            <div
+              ref="inputText"
+              contenteditable="true"
+              class="input-text max-w-full outline-none"
+              @input="updateInputHeight"
+            >
+              <p>content</p>
+            </div>
+          </n-scrollbar>
+        </div>
+        <div>
+          <button>按钮</button>
+        </div>
+      </div>
+    </div>
   </div>
-  <div></div>
 </template>
 
 <script setup lang="ts">
 import { useMessage } from "naive-ui";
 import { useUserStore } from "../../stores/user";
+import { InputHTMLAttributes, onMounted, ref } from "vue";
+
 const message = useMessage();
 const userStore = useUserStore();
+
+const inputMessage = ref("");
+const inputContainer: any = ref(null);
+const inputText: InputHTMLAttributes | null = ref(null);
+
+function updateInputHeight() {
+  if (!inputText?.value || !inputContainer.value) {
+    return;
+  }
+
+  const input = inputText.value;
+  const container = inputContainer.value;
+
+  // 获取元素实际占用高度
+  const height = input.scrollHeight;
+
+  const lines = input.innerText.split("\n").length;
+
+  if (lines > 2 || height > 50) {
+    container.classList.add("rounded-lg");
+    container.classList.remove("rounded-full");
+    container.classList.add("p-4")
+  } else {
+    container.classList.remove("rounded-lg");
+    container.classList.add("rounded-full");
+    container.classList.remove("p-4")
+  }
+}
+
+onMounted(() => {
+  updateInputHeight();
+});
 </script>
+
+<style scoped>
+.input-text {
+  color: #d4d4d4;
+}
+.input-bg {
+  background-color: #1e1f20;
+}
+.input-text {
+  flex-grow: 1;
+  padding-right: 10px; /* 为按钮区域留出一些空间 */
+}
+button {
+  padding: 5px 10px;
+  border: none;
+  background-color: #007bff;
+  color: white;
+  border-radius: 5px;
+  cursor: pointer;
+}
+</style>

src/layouts/DefaultLayout.vue

@@ -19,9 +19,9 @@ const menuCollapsed = ref({
 </script>
 
 <template>
-  <n-layout :position="isMobile ? 'static' : 'absolute'" :has-sider="true">
+  <n-layout position="absolute" :has-sider="true">
     <n-layout-sider
-      v-if="userStore.logined"
+      v-if="userStore.logined && !isMobile"
       :collapsed-width="0"
       :native-scrollbar="false"
       :show-collapsed-content="false"
@@ -33,7 +33,7 @@ const menuCollapsed = ref({
       @collapse="menuCollapsed.left = true"
       @expand="menuCollapsed.left = false"
     >
-      <Menu></Menu>
+      <Menu v-show="!isMobile"></Menu>
     </n-layout-sider>
     <n-layout-content>
       <!-- <Guest v-if="!userStore.logined && currentRoute != '/auth/login'" />

src/layouts/Header.vue

@@ -4,7 +4,14 @@
       <n-grid cols="2" class="header-height">
         <n-grid-item class="flex items-center justify-start mr-1.5">
           <!-- 左侧 -->
-           <p>你好, {{ userStore.user.name }}。</p>
+          <n-popover placement="bottom" trigger="click" style="padding: 0; width: 288px" v-if="isMobile">
+            <template #trigger>
+              <n-icon size="20" style="margin-left: 12px">
+                <menu-outline />
+              </n-icon>
+            </template>
+            <Menu></Menu>
+          </n-popover>
         </n-grid-item>
 
         <n-grid-item class="flex items-center justify-end mr-1.5">
@@ -17,7 +24,9 @@
 
 <script setup lang="ts">
 import { useUserStore } from "../stores/user";
-
+import { useIsMobile, useIsTablet } from "../utils/composables";
+import {MenuOutline} from "@vicons/ionicons5"
 const userStore = useUserStore();
+const isMobile = useIsMobile();
+const isTablet = useIsTablet();
 </script>
-

src/style.css

@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
+:root {
   --header-height: 48px;
 }