chore: update

package.json

@@ -26,6 +26,7 @@
     "chalk": "^5.4.1",
     "eslint": "^8.57.1",
     "eslint-plugin-vue": "^9.32.0",
+    "sass": "^1.84.0",
     "unplugin-auto-import": "^19.0.0",
     "unplugin-vue-components": "^28.0.0",
     "vite": "^5.4.14",

src/App.vue

@@ -74,7 +74,12 @@ const { copy, copied } = useClipboard()
     <li>雷军</li>
   </ul>
   <div id="tooltip-box" ref="floating" :style="floatingStyles" @click="handleSearch">AI搜索</div>
-  <a-drawer v-model:visible="dialogVisible" :mask-closable="false" width="500px" style="z-index: 1000">
+  <a-drawer
+    v-model:visible="dialogVisible"
+    :mask-closable="false"
+    width="500px"
+    style="z-index: 1000"
+    class="zijing-chat">
     <template #title>
       <div class="chat-header">
         <img src="https://webapp-pub.ezijing.com/plugins/sky-agents/ai.png" width="34px" />紫荆AI助手
@@ -112,7 +117,7 @@ const { copy, copied } = useClipboard()
   </a-drawer>
 </template>
 
-<style>
+<style lang="scss">
 #tooltip-box {
   display: none;
   width: max-content;
@@ -128,102 +133,104 @@ const { copy, copied } = useClipboard()
   cursor: pointer;
   z-index: 9999999;
 }
-.chat-header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  column-gap: 10px;
-}
-.chat-message {
-  display: flex;
-  flex-direction: row;
-}
-.chat-message-item {
-  max-width: 100%;
-  padding: 12px 16px;
-  margin: 10px 0;
-  border-radius: 16px;
-  color: #000;
-  background-color: #f5f5f5;
-  word-break: break-word;
-}
-.chat-message-item.user {
-  color: #fff;
-  background-color: #06f;
-}
-.chat-footer {
-  display: flex;
-  align-items: center;
-  column-gap: 10px;
-}
-
-.chat-message-extra .arco-popover-content {
-  margin: 0;
-}
-
-.chat-message-extra .arco-popover-popup-content {
-  padding: 2px;
-  border: 0;
-  border-radius: 12px;
-  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.12);
-}
-.chat-message-extra .arco-popover-popup-arrow {
-  display: none;
-}
-.chat-message-extra .arco-btn {
-  border-radius: 12px;
-}
+.zijing-chat {
+  .chat-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    column-gap: 10px;
+  }
+  .chat-message {
+    display: flex;
+    flex-direction: row;
+  }
+  .chat-message-item {
+    max-width: 100%;
+    padding: 12px 16px;
+    margin: 10px 0;
+    border-radius: 16px;
+    color: #000;
+    background-color: #f5f5f5;
+    word-break: break-word;
+  }
+  .chat-message-item.user {
+    color: #fff;
+    background-color: #06f;
+  }
+  .chat-footer {
+    display: flex;
+    align-items: center;
+    column-gap: 10px;
+  }
 
-.dot-flashing {
-  animation: dot-flashing 0.8s infinite alternate;
-  animation-delay: -0.2s;
-  animation-timing-function: ease;
-  margin: 7px 18px;
-  overflow: visible !important;
-  position: relative;
-}
+  .chat-message-extra .arco-popover-content {
+    margin: 0;
+  }
 
-.dot-flashing,
-.dot-flashing:after,
-.dot-flashing:before {
-  background-color: rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
-  color: rgba(0, 0, 0, 0.1);
-  height: 8px;
-  width: 8px;
-}
+  .chat-message-extra .arco-popover-popup-content {
+    padding: 2px;
+    border: 0;
+    border-radius: 12px;
+    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.12);
+  }
+  .chat-message-extra .arco-popover-popup-arrow {
+    display: none;
+  }
+  .chat-message-extra .arco-btn {
+    border-radius: 12px;
+  }
 
-.dot-flashing:after,
-.dot-flashing:before {
-  animation: dot-flashing 0.8s infinite alternate;
-  animation-timing-function: ease;
-  content: '';
-  display: inline-block;
-  position: absolute;
-  top: 0;
-}
+  .dot-flashing {
+    animation: dot-flashing 0.8s infinite alternate;
+    animation-delay: -0.2s;
+    animation-timing-function: ease;
+    margin: 7px 18px;
+    overflow: visible !important;
+    position: relative;
+  }
 
-.dot-flashing:before {
-  left: -15px;
-  animation-delay: -0.4s;
-}
+  .dot-flashing,
+  .dot-flashing:after,
+  .dot-flashing:before {
+    background-color: rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    color: rgba(0, 0, 0, 0.1);
+    height: 8px;
+    width: 8px;
+  }
 
-.dot-flashing:after {
-  left: 15px;
-  animation-delay: 0s;
-}
+  .dot-flashing:after,
+  .dot-flashing:before {
+    animation: dot-flashing 0.8s infinite alternate;
+    animation-timing-function: ease;
+    content: '';
+    display: inline-block;
+    position: absolute;
+    top: 0;
+  }
 
-@keyframes dot-flashing {
-  0% {
-    background-color: #000;
+  .dot-flashing:before {
+    left: -15px;
+    animation-delay: -0.4s;
   }
 
-  50% {
-    background-color: rgba(0, 0, 0, 0.1);
+  .dot-flashing:after {
+    left: 15px;
+    animation-delay: 0s;
   }
 
-  to {
-    background-color: #000;
+  @keyframes dot-flashing {
+    0% {
+      background-color: #000;
+    }
+
+    50% {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+
+    to {
+      background-color: #000;
+    }
   }
 }
 </style>