add avatar and fix pad style adapter

README.md

@@ -1,2 +1,9 @@
-# chatnio
-👋 Lightweight ChatGPT chat site
+<div align="center">
+
+# [Chat Nio](https://nio.fystart.cn)
+
+👋 轻量级 ChatGPT 聊天平台
+
+👋 Lightweight ChatGPT Chat Platform
+
+</div>

app/src/App.vue

@@ -120,6 +120,12 @@ aside {
   align-items: center;
 }
 
+@media (max-width: 600px) {
+  .container {
+    max-height: calc(100% - 112px);
+  }
+}
+
 @media screen and (max-width: 600px) {
   .card {
     flex-direction: column;
@@ -139,10 +145,6 @@ aside {
     margin-right: 16px !important;
   }
 
-  .container {
-    max-height: 90%;
-  }
-
   aside {
     width: 100%;
     height: max-content;

app/src/assets/style/base.css

@@ -30,6 +30,10 @@
   --card-text-secondary: rgba(255, 255, 255, 0.54);
 }
 
+* {
+  outline: none;
+}
+
 a {
   font-weight: 500;
   text-decoration: inherit;

app/src/views/HomeView.vue

@@ -41,10 +41,14 @@ onMounted(() => {
     <div class="conversation" v-if="length">
       <div class="message" v-for="(message, index) in messages" :key="index" :class="{'user': message.role === 'user'}">
         <div class="grow" v-if="message.role === 'user'"></div>
+        <div class="avatar openai" v-else><openai /></div>
         <div class="content">
           <span v-if="message.role === 'user'">{{ message.content }}</span>
           <md-preview v-model="message.content" theme="dark" v-else />
         </div>
+        <div class="avatar user" v-if="message.role === 'user'">
+          <img src="https://zmh-program.site/avatar/zmh-program.webp">
+        </div>
       </div>
     </div>
     <div class="preview" v-else>
@@ -71,8 +75,7 @@ onMounted(() => {
   flex-direction: column;
   justify-content: space-between;
   width: 100%;
-  height: calc(80vh - 86px);
-  max-height: calc(80vh - 86px);
+  flex-grow: 1;
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -84,7 +87,7 @@ onMounted(() => {
   flex-direction: row;
   justify-content: space-between;
   width: 100%;
-  height: 86px;
+  height: 74px;
 }
 
 .preview {
@@ -212,6 +215,59 @@ onMounted(() => {
   fill: var(--card-text-hover);
 }
 
+.avatar {
+  width: 42px;
+  height: 42px;
+  border-radius: 8px;
+  background: var(--card-input);
+  border: 1px solid var(--card-input-border);
+  transition: .5s;
+  flex-shrink: 0;
+}
+
+.avatar.user {
+  margin-left: 12px;
+  background: var(--card--element);
+  border: 1px solid var(--card-border);
+}
+
+.avatar.user img {
+  width: 42px;
+  height: 42px;
+  border-radius: 8px;
+  transition: .5s;
+}
+
+.avatar.user:hover {
+  border: 1px solid var(--card-border-hover);
+}
+
+.avatar.user:hover + .content {
+  border: 1px solid var(--card-border-hover);
+}
+
+.avatar.user:hover + .content:hover {
+  border: 1px solid var(--card-border-hover);
+}
+
+.avatar.openai {
+  margin-right: 12px;
+  background: var(--card--element);
+  border: 1px solid var(--card-border);
+}
+
+.avatar.openai svg {
+  padding: 6px;
+  fill: var(--card-text);
+  background: var(--card-input);
+  border: 1px solid var(--card-input-border);
+  transition: .5s;
+}
+
+.avatar.openai:hover {
+  border: 1px solid var(--card-border-hover);
+}
+
 @media (max-width: 600px) {
   .preview h1 {
     font-size: 32px;
@@ -224,9 +280,6 @@ onMounted(() => {
 }
 
 @media screen and (max-width: 560px) {
-  .chat-wrapper {
-    height: calc(70vh - 86px);
-    max-height: calc(70vh - 86px);
-  }
+
 }
 </style>