sync

src/config/__init__.py

@@ -154,7 +154,7 @@ MODEL_NAMES = {
         "ERNIE-Speed-128K",
         "ERNIE-Tiny-8K",
         "ERNIE-Lite-8K",
-        "ERNIE-4.0-8K-Latest"
+        "ERNIE-4.0-8K-Latest",
         "Yi-34B-Chat",
     ],
 

web/package.json

@@ -19,8 +19,10 @@
     "d3": "^7.8.3",
     "echarts": "^5.4.2",
     "echarts-gl": "^2.0.9",
+    "highlight.js": "^11.10.0",
     "less": "^4.1.3",
     "marked": "^13.0.2",
+    "marked-highlight": "^2.1.4",
     "pinia": "^2.0.32",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"

web/src/assets/base.css

@@ -1,5 +1,16 @@
 /* color palette from <https://github.com/vuejs/theme> */
 :root {
+  --main-900: #003A51;
+  --main-800: #004F69;
+  --main-700: #00637F;
+  --main-600: #1B7796;
+  --main-500: #2C86A8;
+  --main-400: #4e99b9;
+  --main-300: #6AADCB;
+  --main-200: #8CC6E1;
+  --main-100: #ABE0F7;
+  --main-50: #CDF5FF;
+
   --c-white: #ffffff;
   --c-white-soft: #f8f8f8;
   --c-white-mute: #f2f2f2;
@@ -8,60 +19,28 @@
   --c-black-soft: #222222;
   --c-black-mute: #282828;
 
-  --c-indigo: #2c3e50;
-
   --c-black-light-1: #333333;
   --c-black-light-2: #454545;
   --c-black-light-3: #666666;
   --c-black-light-4: #999999;
 
-  --c-text-light-1: var(--c-indigo);
+  --c-text-light-1: var(--c-black);
-  --c-text-light-2: rgba(60, 66, 70, 0.66);
+  --c-text-dark-1: #0D0D0D;
-  --c-text-dark-1: var(--c-white);
   --c-text-dark-2: #b8b8b8;
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--c-white);
-  --color-background-soft: var(--c-white-soft);
-  --color-background-mute: var(--c-white-mute);
-
-  --color-border: var(--c-black-light-2);
-  --color-border-hover: var(--c-black-light-1);
-
-  --color-heading: var(--c-text-light-1);
   --color-text: var(--c-black);
 
-  --section-gap: 160px;
+  --main-color: var(--main-700);
-
-  --main-color: #005f77;
   --main-color-dark: #004d5c;
-  --main-light-1: #007f96;
+  --main-light-1: #0076AB;
-  --main-light-2: #D3EAED;
+  --main-light-2: #DAEAED;
-  --main-light-3: #EDF4F5;
+  --main-light-3: #EDF0F1;
-  --main-light-4: #F2F6F7;
+  --main-light-4: #F2F5F5;
   --main-light-5: #F7FAFB;
   --main-light-6: #FAFDFD;
   --min-width: 400px;
-  --min-header-width: 80px;
   --error-color: #f50a0d;
 }
 
-/* @media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--c-black);
-    --color-background-soft: var(--c-black-soft);
-    --color-background-mute: var(--c-black-mute);
-
-    --color-border: var(--c-black-dark-2);
-    --color-border-hover: var(--c-black-dark-1);
-
-    --color-heading: var(--c-text-dark-1);
-    --color-text: var(--c-text-dark-2);
-  }
-} */
-
 *,
 *::before,
 *::after {

web/src/assets/theme.js

@@ -2,6 +2,6 @@ export const themeConfig = {
     token: {
         colorPrimary: '#005F77',
         colorInfo: '#191919',
-        wireframe: true
+        fontFamily: "'HarmonyOS Sans SC', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;"
     },
 }

web/src/components/ChatComponent.vue

@@ -14,7 +14,7 @@
           class="newchat nav-btn"
           @click="$emit('newconv')"
         >
-          <PlusCircleOutlined /> <span class="text">新对话</span>
+          <PlusCircleOutlined /> <span class="text">新对话 {{ configStore.config?.model_name }}</span>
         </div>
       </div>
       <div class="header__right">
@@ -107,8 +107,13 @@
         :class="message.role"
       >
         <p v-if="message.role=='sent'" style="white-space: pre-line" class="message-text">{{ message.text }}</p>
+        <div v-else-if="message.text.length == 0"  class="loading-dots">
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
         <p v-else
-          v-html="renderMarkdown(message.text)"
+          v-html="renderMarkdown(message)"
           class="message-md"
           @click="consoleMsg(message)"></p>
 
@@ -149,6 +154,7 @@
                     <a-progress :percent="(res.rerank_score * 100).toFixed(2)" stroke-color="#1677FF" :size="[200, 10]"/>
                   </div>
                 </p>
+                <a-divider />
                 <p class="result-text">{{ res.entity.text }}</p>
               </div>
             </a-drawer>
@@ -169,7 +175,7 @@
           <template #icon> <SendOutlined v-if="!isStreaming" /> <LoadingOutlined v-else/> </template>
         </a-button>
       </div>
-      <p class="note">即便强如雅典娜也可能会出错，请注意辨别内容的可靠性 模型供应商：{{ configStore.config?.model_provider }}:{{ configStore.config?.model_name }}</p>
+      <p class="note">请注意辨别内容的可靠性 模型供应商：{{ configStore.config?.model_provider }}: {{ configStore.config?.model_name }}</p>
     </div>
   </div>
 </template>
@@ -192,8 +198,11 @@ import {
   FolderOpenOutlined,
 } from '@ant-design/icons-vue'
 import { onClickOutside } from '@vueuse/core'
-import { marked } from 'marked';
+import { Marked } from 'marked';
+import { markedHighlight } from 'marked-highlight';
 import { useConfigStore } from '@/stores/config'
+import hljs from 'highlight.js';
+import 'highlight.js/styles/github.css';
 
 const props = defineProps({
   conv: Object,
@@ -232,16 +241,30 @@ const meta = reactive(JSON.parse(localStorage.getItem('meta')) || {
   history_round: 5,
 })
 
-// 更多选项可以在 marked 文档中找到：https://marked.js.org/
+const marked = new Marked(
-marked.setOptions({
+  {
-  gfm: true,
+    gfm: true,
-  breaks: true,
+    breaks: true,
-  tables: true,
+    tables: true,
-});
+  },
+  markedHighlight({
+    langPrefix: 'hljs language-',
+    highlight(code) {
+      return hljs.highlightAuto(code).value;
+    }
+  })
+);
+
 
-const renderMarkdown = (text) => marked(text)
 const consoleMsg = (message) => console.log(message)
 onClickOutside(panel, () => setTimeout(() => opts.showPanel = false, 30))
+const renderMarkdown = (message) => {
+  if (message.status === 'loading') {
+    return marked.parse(message.text + '🟢')
+  } else {
+    return marked.parse(message.text)
+  }
+}
 
 const handleKeyDown = (e) => {
   if (e.key === 'Enter' && !e.shiftKey) {
@@ -313,16 +336,17 @@ const appendAiMessage = (message, refs=null) => {
 }
 
 const updateMessage = (text, id, refs, status) => {
-  const message = conv.value.messages.find((message) => message.id === id)
+  const message = conv.value.messages.find((message) => message.id === id);
   if (message) {
-    message.text = text
+    message.refs = refs;
-    message.refs = refs
+    message.status = status;
-    message.status = status
+    message.text = text;
   } else {
-    console.error('Message not found')
+    console.error('Message not found');
   }
-  scrollToBottom()
+  scrollToBottom();
-}
+};
+
 
 const updateStatus = (id, status) => {
   const message = conv.value.messages.find((message) => message.id === id)
@@ -332,7 +356,6 @@ const updateStatus = (id, status) => {
     console.error('Message not found')
   }
 
-  console.log("updateStatus", message, message.refs.knowledge_base.results.length > 0)
   if (message.refs.knowledge_base.results.length > 0) {
     message.groupedResults = message.refs.knowledge_base.results.reduce((acc, result) => {
       const { filename } = result.file;
@@ -373,7 +396,7 @@ const sendMessage = () => {
   if (user_input) {
     isStreaming.value = true
     appendUserMessage(user_input)
-    appendAiMessage("···", null)
+    appendAiMessage("", null)
     const cur_res_id = conv.value.messages[conv.value.messages.length - 1].id
     conv.value.inputText = ''
     meta.db_name = opts.databases[meta.selectedKB]?.metaname
@@ -585,7 +608,7 @@ watch(
 
 .chat-box {
   width: 100%;
-  max-width: 1100px;
+  max-width: 900px;
   margin: 0 auto;
   flex-grow: 1;
   padding: 1rem;
@@ -593,25 +616,24 @@ watch(
   flex-direction: column;
 
   .message-box {
-    max-width: 95%;
     display: inline-block;
-    border-radius: 0.8rem;
+    border-radius: 1.5rem;
     margin: 0.8rem 0;
-    padding: 1rem;
+    padding: 0.625rem 1.25rem;
     user-select: text;
     word-break: break-word;
     font-size: 16px;
     font-variation-settings: 'wght' 400, 'opsz' 10.5;
     font-weight: 400;
     box-sizing: border-box;
-    color: #0D0D0D;
+    color: black;
     /* box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.16); */
     /* animation: slideInUp 0.1s ease-in; */
   }
 
   .message-box.sent {
-    background-color: #efefef;
     line-height: 24px;
+    max-width: 95%;
     background: var(--main-light-3);
     align-self: flex-end;
   }
@@ -620,10 +642,9 @@ watch(
     color: initial;
     width: fit-content;
     padding-top: 16px;
-    background-color: #F5F7F8;
     text-align: left;
     word-wrap: break-word;
-    margin-bottom: 0;
+    margin: 0;
     padding-bottom: 0;
     text-align: justify;
   }
@@ -651,21 +672,23 @@ watch(
 .retrieval-detail {
   .fileinfo {
     margin-bottom: 20px;
-    padding: 10px;
+    padding: 1rem;
-    background: var(--main-light-3);
+    background: var(--main-50);
+    color: var(--main-800);
     border-radius: 8px;
+    // border: 1px solid var(--main-100);
     p {
-      margin: 0;
+      margin: 10px;
       line-height: 1.5;
     }
   }
 
   .result-item {
     margin-bottom: 20px;
-    padding: 10px;
+    padding: 24px 16px 10px 16px;
     border: 1px solid #e8e8e8;
     border-radius: 8px;
-    background: var(--main-light-4);
+    background: var(--main-light-6);
 
     .result-id,
     .result-distance,
@@ -696,23 +719,23 @@ watch(
   bottom: 0;
   width: 100%;
   margin: 0 auto;
-  padding: 0.5rem 2rem;
+  padding: 4px 2rem 0 2rem;
   background: white;
 
 
   .input-box {
     display: flex;
     width: 100%;
-    max-width: 1100px;
+    max-width: 900px;
     margin: 0 auto;
     align-items: flex-end;
-    background-color: #F5F7F8;
+    background-color: var(--main-light-4);
     border-radius: 2rem;
     height: auto;
     padding: 0.5rem;
 
     &:focus-within {
-      background-color: #F2F2F2;
+      background-color: #ECF1F2;
     }
 
     .user-input {
@@ -762,9 +785,10 @@ watch(
   background-color: transparent;
   border: none;
   height: 2.5rem;
-  background-color: black;
+  background-color: var(--main-color);
   border-radius: 3rem;
   color: white;
+  transition: background-color 0.3s;
 
   &:hover {
     color: white;
@@ -772,7 +796,7 @@ watch(
 }
 
 button:disabled {
-  background: #D7D7D7;
+  background: #E0E0E0;
   cursor: not-allowed;
 }
 
@@ -803,8 +827,37 @@ button:disabled {
   border-radius: 4px;
 }
 
-.slide-out-left{-webkit-animation:slide-out-left .5s cubic-bezier(.55,.085,.68,.53) both;animation:slide-out-left .5s cubic-bezier(.55,.085,.68,.53) both}
+.loading-dots {
-.swing-in-top-fwd {-webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;}
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loading-dots div {
+  width: 10px;
+  height: 10px;
+  margin: 0 5px;
+  background-color: #333;
+  border-radius: 50%;
+  animation: loading 0.8s infinite ease-in-out both;
+}
+
+.loading-dots div:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.loading-dots div:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.loading-dots div:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes loading {0%,80%,100%{transform:scale(0.5);}40%{transform:scale(1);}}
+
+.slide-out-left{-webkit-animation:slide-out-left .2s cubic-bezier(.55,.085,.68,.53) both;animation:slide-out-left .5s cubic-bezier(.55,.085,.68,.53) both}
+.swing-in-top-fwd {-webkit-animation: swing-in-top-fwd 0.2s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;}
 @-webkit-keyframes swing-in-top-fwd{0%{-webkit-transform:rotateX(-100deg);transform:rotateX(-100deg);-webkit-transform-origin:top;transform-origin:top;opacity:0}100%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:top;transform-origin:top;opacity:1}}@keyframes swing-in-top-fwd{0%{-webkit-transform:rotateX(-100deg);transform:rotateX(-100deg);-webkit-transform-origin:top;transform-origin:top;opacity:0}100%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:top;transform-origin:top;opacity:1}}
 @-webkit-keyframes slide-out-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}}@keyframes slide-out-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}}
 
@@ -851,3 +904,16 @@ button:disabled {
   }
 }
 </style>
+
+<style lang="less">
+.message-box pre {
+  border-radius: 8px;
+  font-size: 14px;
+  border: 1px solid var(--main-light-3);
+  padding: 1rem;
+
+  &:has(code.hljs) {
+    padding: 0;
+  }
+}
+</style>

web/src/layouts/AppLayout.vue

@@ -9,6 +9,8 @@ import {
   BookOutlined,
   BookFilled,
   GithubOutlined,
+  DatabaseOutlined,
+  DatabaseFilled,
 } from '@ant-design/icons-vue'
 import { themeConfig } from '@/assets/theme'
 import { useConfigStore } from '@/stores/config'
@@ -55,7 +57,7 @@ console.log(route)
           <component class="icon" :is="route.path === '/chat' ? MessageFilled : MessageOutlined" />
         </RouterLink>
         <RouterLink to="/database" class="nav-item" active-class="active">
-          <component class="icon" :is="route.path.startsWith('/database') ? BookFilled : BookOutlined" />
+          <component class="icon" :is="route.path.startsWith('/database') ? DatabaseFilled : DatabaseOutlined" />
         </RouterLink>
       </div>
       <div class="fill" style="flex-grow: 1;"></div>
@@ -111,13 +113,13 @@ div.header, #app-router-view {
 .header {
   display: flex;
   flex-direction: column;
-  flex: 0 0 80px;
+  flex: 0 0 70px;
   justify-content: flex-start;
   align-items: center;
-  background-color: var(--main-light-4);
+  background-color: var(--main-light-3);
   height: 100%;
-  width: 80px;
+  width: 70px;
-  border-right: 1px solid var(--main-light-2);
+  border-right: 1px solid var(--main-light-3);
 
   .logo {
     width: 40px;
@@ -150,12 +152,12 @@ div.header, #app-router-view {
 
     &.active {
       font-weight: bold;
-      color: var(--main-color);
+      color: var(--main-600);
-      background-color: var(--main-light-2);
+      background-color: #E6E8E9;
     }
 
     &:hover {
-      background-color: var(--main-light-2);
+      background-color: #E6E8E9;
       cursor: pointer;
     }
   }
@@ -205,7 +207,7 @@ div.header, #app-router-view {
     .nav-item {
       text-decoration: none;
       width: 40px;
-      color: var(--c-text-light-2);
+      color: var(--c-black-soft);
       font-size: 1rem;
       font-weight: bold;
       transition: color 0.1s ease-in-out, font-size 0.1s ease-in-out;

web/src/views/ChatView.vue

@@ -6,13 +6,15 @@
          <span style="font-weight: bold;">对话历史</span>
         <div class="action close" @click="state.isSidebarOpen = false"><MenuOutlined /></div>
       </div>
-      <div class="conversation"
+      <div class="conversation-list">
-        v-for="(state, index) in convs"
+        <div class="conversation"
-        :key="index"
+          v-for="(state, index) in convs"
-        :class="{ active: curConvId === index }"
+          :key="index"
-        @click="goToConversation(index)">
+          :class="{ active: curConvId === index }"
-        <div class="conversation__title">{{ state.title }}</div>
+          @click="goToConversation(index)">
-        <div class="conversation__delete" @click.stop="delConv(index)"><DeleteOutlined /></div>
+          <div class="conversation__title">{{ state.title }}</div>
+          <div class="conversation__delete" @click.stop="delConv(index)"><DeleteOutlined /></div>
+        </div>
       </div>
     </div>
     <ChatComponent
@@ -132,17 +134,12 @@ onMounted(() => {
   flex: 1 1 auto; /* 当侧边栏打开时，占据可用空间 */
 }
 .conversations {
-  display: flex;
-  flex-direction: column;
   width: 230px; /* 初始宽度 */
-  height: 100%;
   max-width: 230px;
-  overflow-y: auto;
   border-right: 1px solid var(--main-light-3);
-  background-color: #FAFCFD;
   overflow: hidden; /* 确保内容不溢出 */
-  white-space: nowrap; /* 防止文本换行 */
+  max-height: 100%;
-  transition: all 0.2s ease-out;
+  background-color: #FAFCFD;
 
   & .actions {
     height: var(--header-height);
@@ -150,10 +147,8 @@ onMounted(() => {
     justify-content: space-between;
     align-items: center;
     padding: 16px;
-    position: sticky;
-    top: 0;
-    background-color: #FAFCFD;
     z-index: 9;
+    border-bottom: 1px solid var(--main-light-3);
 
     .action {
       font-size: 1.2rem;
@@ -172,7 +167,14 @@ onMounted(() => {
     }
   }
 
-  .conversation {
+  .conversation-list {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    max-height: 100%;
+  }
+
+  .conversation-list .conversation {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -199,12 +201,12 @@ onMounted(() => {
     }
 
     &.active {
-      border-left: 3px solid var(--main-color);
+      border-left: 3px solid var(--main-600);
       padding-left: 13px;
       background-color: var(--main-light-3);
 
       & .conversation__title {
-        color: var(--c-black-light-1);
+        color: var(--main-900);
       }
     }
 
@@ -218,33 +220,33 @@ onMounted(() => {
   }
 }
 
-.conversations::-webkit-scrollbar {
+.conversation-list::-webkit-scrollbar {
   position: absolute;
   width: 4px;
 }
 
-.conversations::-webkit-scrollbar-track {
+.conversation-list::-webkit-scrollbar-track {
   background: transparent;
   border-radius: 4px;
 }
 
-.conversations::-webkit-scrollbar-thumb {
+.conversation-list::-webkit-scrollbar-thumb {
   background: var(--c-text-dark-2);
   border-radius: 4px;
 }
 
-.conversations::-webkit-scrollbar-thumb:hover {
+.conversation-list::-webkit-scrollbar-thumb:hover {
   background: rgb(100, 100, 100);
   border-radius: 4px;
 }
 
-.conversations::-webkit-scrollbar-thumb:active {
+.conversation-list::-webkit-scrollbar-thumb:active {
   background: rgb(68, 68, 68);
   border-radius: 4px;
 }
 
 @media (max-width: 520px) {
-  .conversations {
+  .conversation {
     position: absolute;
     z-index: 101;
     width: 300px;

web/src/views/DataBaseInfoView.vue

@@ -19,12 +19,12 @@
       </div>
       <a-divider/>
       <div class="pagebtns">
-        <a-button @click="state.curPage='add'" :class="{ 'active': state.curPage === 'add' }">
+        <div @click="state.curPage='add'" :class="{ 'active': state.curPage === 'add' }">
           <CloudUploadOutlined />添加文件
-        </a-button>
+        </div>
-        <a-button @click="state.curPage='query-test'" :class="{ 'active': state.curPage === 'query-test' }">
+        <div @click="state.curPage='query-test'" :class="{ 'active': state.curPage === 'query-test' }">
           <SearchOutlined />检索测试
-        </a-button>
+        </div>
       </div>
       <div class="query-params" v-if="state.curPage == 'query-test'">
         <p style="text-align: center; margin: 0;"><strong>参数配置</strong></p>
@@ -494,18 +494,31 @@ onMounted(() => {
     flex-direction: column;
     gap: 16px;
 
-    button {
+    > div {
+      gap: 1rem;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
       padding: 10px 16px;
       height: auto;
-      border-radius: 8px;
+      border-radius: 4px;
       border: none;
-      background: var(--main-light-4);
+      background: var(--main-light-5);
+      letter-spacing: 4px;
+      border-radius: 8px;
+      border: 1px solid var(--main-light-2);
+
+      &:hover {
+        cursor: pointer;
+        background: var(--main-light-3);
+      }
     }
 
     .active {
-      font-weight: bold;
       color: var(--main-color);
-      background: var(--main-light-2);
+      background: var(--main-light-3);
+      font-weight: bold;
     }
   }
 

web/src/views/HomeView.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="welcome">
-    <header>江南大学人工智能与计算机学院</header>
+    <header class="glass-header">江南大学人工智能与计算机学院</header>
     <h1>{{ title }}</h1>
+    <p>大模型驱动的知识库管理工具</p>
     <button class="home-btn" @click="goToChat">开始对话</button>
     <img src="/home.png" alt="Placeholder Image" />
-    <footer>© 江南语析 2024</footer>
+    <footer>© 江南语析 2024 [WIP] v0.12.138</footer>
   </div>
 </template>
 
@@ -12,7 +13,7 @@
 import { reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
-const title = ref('Athena ✨')
+const title = ref('📢 Athena ✨')
 const router = useRouter()
 
 const goToChat = () => {
@@ -21,45 +22,46 @@ const goToChat = () => {
 
 </script>
 
-<style scoped>
+
+<style lang="less" scoped>
 .welcome {
   display: flex;
   flex-direction: column;
   align-items: center;
-  /* margin-top: 50px; */
+  min-height: 100vh;
   color: #333;
   text-align: center;
+  background: linear-gradient(168deg, #ffd6eb, #ffe7ca, #d3fffb, #dbebff, #ffd8ff);
+  background-size: 1000% 1000%;
+  animation: animateBackground 20s ease infinite;
 }
 
+
+
 header {
-  background-color: var(--main-color);
   font-size: 1.2rem;
   font-weight: bold;
-  color: aliceblue;
+  color: var(--main-color);
   width: 100%;
   padding: 1rem 0;
+  backdrop-filter: blur(10px);
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.25);
+  border-bottom: 2px solid var(--main-color);
 }
 
 h1 {
   font-size: 48px;
-  font-weight: bold;
+  font-weight: 600;
   margin-top: calc(20vh - 80px);
+  margin-bottom: 0;
 }
 
 p {
-  font-size: 24px;
+  font-size: 18px;
   text-align: center;
 }
 
-img {
-  width: 700px;
-  height: auto;
-  object-fit: cover;
-  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);
-  border-radius: 1rem;
-  max-width: 90%;
-}
-
 button.home-btn {
   padding: 0.5rem 2rem;
   font-size: 24px;
@@ -70,12 +72,42 @@ button.home-btn {
   border-radius: 3rem;
   cursor: pointer;
   transition: all 0.3s;
+  margin-top: 20px;
   margin-bottom: calc(15vh - 80px);
+  transition: all 0.3s;
+
+  &:hover {
+    background-color: #555;
+    transform: translateY(-2px);
+    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
+  }
+}
+
+img {
+  width: 700px;
+  height: auto;
+  object-fit: cover;
+  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);
+  border-radius: 1rem;
+  max-width: 90%;
 }
 
 footer {
   font-size: 1rem;
   color: #666;
-  margin-top: 20px;
+  margin-top: auto;
+  padding: 1rem 0;
+}
+/* 动态背景动画 */
+@keyframes animateBackground {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
 }
 </style>