update mobile adapter

app/router/index.ts

@@ -1,5 +1,5 @@
 import {createRouter, createWebHistory} from "vue-router";
-import HomeView from "../views/HomeView.vue";
+import HomeView from "../src/views/HomeView.vue";
 
 const router = createRouter({  //@ts-ignore
   history: createWebHistory(import.meta.env.BASE_URL),

app/src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 
+import Login from "./components/icons/login.vue";
 </script>
 
 <template>
@@ -9,6 +10,12 @@
         <img src="/favicon.ico" alt="">
         <span>Chat Nio</span>
       </div>
+      <div class="login">
+        <button><login />
+          <span>登录</span>
+        </button>
+      </div>
+      <div class="grow" />
     </aside>
     <div class="container">
       <router-view />
@@ -29,7 +36,7 @@
   border-radius: 16px;
   box-shadow: 0 0 16px var(--card-shadow);
   width: calc(100% - 32px);
-  height: 100vh;
+  height: 100%;
   max-width: 1000px;
   max-height: 600px;
 }
@@ -44,6 +51,10 @@ aside {
   width: max-content;
 }
 
+.grow {
+  flex-grow: 1;
+}
+
 .logo {
   display: flex;
   align-items: center;
@@ -56,6 +67,7 @@ aside {
   width: 46px;
   height: 46px;
   border-radius: 12px;
+  user-select: none;
 }
 
 .logo span {
@@ -64,6 +76,38 @@ aside {
   white-space: nowrap;
 }
 
+.login {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 12px 48px;
+}
+
+.login button {
+  display: flex;
+  user-select: none;
+  width: 114px;
+  height: 46px;
+  background: var(--card-button);
+  border: 1px solid var(--card-button-hover);
+  border-radius: 12px;
+  color: var(--card-text);
+  font-size: 18px;
+  outline: none;
+  transition: .5s;
+}
+
+.login button:hover {
+  background: var(--card-button-hover);
+}
+
+.login button svg {
+  width: 24px;
+  height: 24px;
+  fill: var(--card-text);
+  margin-right: 8px;
+}
+
 .container {
   display: flex;
   flex-grow: 1;
@@ -76,7 +120,7 @@ aside {
   .card {
     flex-direction: column;
     box-shadow: none;
-    max-height: calc(100vh - 24px);
+    max-height: calc(100% - 24px);
   }
 
   aside {

app/src/assets/style/base.css

@@ -17,6 +17,9 @@
   --card-input: rgb(88, 166, 255, 0.04);
   --card-input-border: rgb(88, 166, 255, 0.12);
   --card-input-border-hover: rgb(88, 166, 255, 0.24);
+  --card-button: rgb(88, 166, 255, 0.08);
+  --card-button-hover: rgb(88, 166, 255, 0.16);
+  --card-button-text: rgb(88, 166, 255, 0.87);
   --card--element: rgb(50,50,50);
   --aside-background: rgba(88, 166, 255, 0.02);
   --card-border: rgba(255, 255, 255, 0.12);

app/src/components/icons/login.vue

@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m10.998 16 5-4-5-4v3h-9v2h9z"></path><path d="M12.999 2.999a8.938 8.938 0 0 0-6.364 2.637L8.049 7.05c1.322-1.322 3.08-2.051 4.95-2.051s3.628.729 4.95 2.051S20 10.13 20 12s-.729 3.628-2.051 4.95-3.08 2.051-4.95 2.051-3.628-.729-4.95-2.051l-1.414 1.414c1.699 1.7 3.959 2.637 6.364 2.637s4.665-.937 6.364-2.637C21.063 16.665 22 14.405 22 12s-.937-4.665-2.637-6.364a8.938 8.938 0 0 0-6.364-2.637z"></path></svg>
+</template>

app/src/views/HomeView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import Post from "../src/components/icons/post.vue";
-import Openai from "../src/components/icons/openai.vue";
-import {Conversation} from "../src/assets/script/conversation";
+import Post from "../components/icons/post.vue";
+import Openai from "../components/icons/openai.vue";
+import {Conversation} from "../assets/script/conversation";
 import {nextTick, onMounted, ref} from "vue";
 
 const conversation = new Conversation(1);
@@ -14,15 +14,20 @@ async function send() {
   let val = input.value.trim();
   if (val) {
     input.value = "";
+    refreshScrollbar();
     await conversation.send(val);
-    await nextTick(() => {
-      if (!chatEl.value) return;
-      const el = chatEl.value as HTMLElement;
-      el.scrollTop = el.scrollHeight;
-    })
+    refreshScrollbar();
   }
 }
 
+function refreshScrollbar() {
+  nextTick(() => {
+    if (!chatEl.value) return;
+    const el = chatEl.value as HTMLElement;
+    el.scrollTop = el.scrollHeight;
+  })
+}
+
 onMounted(() => {
   if (!inputEl.value) return;
   (inputEl.value as HTMLElement).addEventListener("keydown", async (e) => {
@@ -56,14 +61,14 @@ onMounted(() => {
 </template>
 
 <style scoped>
-@import "../src/assets/style/anim.css";
+@import "../assets/style/anim.css";
 .chat-wrapper {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   width: 100%;
   height: calc(100% - 86px);
-  max-height: calc(100vh - 86px);
+  max-height: calc(100% - 86px);
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -169,9 +174,9 @@ onMounted(() => {
   border-radius: 12px;
   padding: 12px 18px;
   font-size: 16px;
-  text-align: center;
   outline: none;
   transition: .5s;
+  text-align: left;
 }
 
 .message .content:hover {
@@ -190,6 +195,7 @@ onMounted(() => {
 .message.user .content {
   background: var(--card--element);
   border: 1px solid var(--card-border);
+  text-align: right;
 }
 
 .message.user .content:hover {

app/tsconfig.node.json

@@ -4,7 +4,9 @@
     "module": "ESNext",
     "moduleResolution": "Node",
     "allowSyntheticDefaultImports": true,
-    "typeRoots": ["node_modules/@types", "src/assets/types", "types"]
+    "typeRoots": ["node_modules/@types", "src/assets/types",
+      "src/types"
+    ]
   },
   "include": ["vite.config.ts"]
 }