style: 优化ai聊天界面

opentdp · Mar 29, 2024 · 58e8549 · 58e8549
1 parent 47f4fb3
commit 58e8549
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/webview/src/apps/welcome/index.html b/webview/src/apps/welcome/index.html
@@ -1,9 +1,9 @@
 <layout-header></layout-header>
 
 <div class="container-xl mb-3">
-    <div class="row g-3">
+    <div class="main row g-3">
 
-        <div class="col-md-4">
+        <div class="col-md-5 col-lg-4">
             <div class="card p-3 mb-3">
                 <form class="row gy-3" (ngSubmit)="submitForm()" #myform="ngForm">
                     <div class="col-12">
@@ -20,19 +20,21 @@
             </div>
 
             @if (!islogin && loginqr) {
-            <div class="container-xl mb-3">
+            <div class="card d-flex justify-content-center align-items-center p-3 mb-3">
                 @if (loginqr.result) {
-                <qr-code [value]="loginqr.result" [size]="300" [margin]="0"></qr-code>
+                <qr-code [value]="loginqr.result" [size]="260" [margin]="0"></qr-code>
                 <div>间隔 200 秒自动刷新</div>
                 } @else {
                 <div>未获取到二维码，稍后自动重试</div>
                 }
             </div>
             }
 
-            @if (islogin && user && avatar) {
-            <div class="card mb-3">
+            @if (islogin && user) {
+            <div class="card">
+                @if (avatar) {
                 <img [src]="avatar.big_head_img_url" class="card-img-top" />
+                }
                 <ul class="list-group list-group-flush">
                     <li class="list-group-item text-truncate">
                         <b>Wxid</b> {{user.wxid}}
@@ -51,7 +53,7 @@
             }
         </div>
 
-        <div class="col-md-8 mb-3">
+        <div class="col-md-7 col-lg-8">
             <layout-aichat></layout-aichat>
         </div>
 

diff --git a/webview/src/apps/welcome/index.scss b/webview/src/apps/welcome/index.scss
@@ -1,3 +1,8 @@
+.main>div {
+    height: calc(100vh - 88px);
+    overflow: hidden;
+}
+
 .list-group-item b {
     width: 60px;
     display: inline-block;

diff --git a/webview/src/layouts/aichat/index.ts b/webview/src/layouts/aichat/index.ts
@@ -40,6 +40,7 @@ export class LayoutAichatComponent implements OnDestroy {
         // 请求结果
         return SundryApi.aichatText({ wxid: 'webui', message: this.content }).then((data) => {
             aiwait.content = data || '未知错误';
+            this.content = '';
         }).catch((err) => {
             aiwait.content = err || '未知错误';
         }).finally(() => {