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,17 +133,18 @@ const { copy, copied } = useClipboard()
   cursor: pointer;
   z-index: 9999999;
 }
-.chat-header {
+.zijing-chat {
+  .chat-header {
     display: flex;
     align-items: center;
     justify-content: center;
     column-gap: 10px;
-}
-.chat-message {
+  }
+  .chat-message {
     display: flex;
     flex-direction: row;
-}
-.chat-message-item {
+  }
+  .chat-message-item {
     max-width: 100%;
     padding: 12px 16px;
     margin: 10px 0;
@@ -146,74 +152,74 @@ const { copy, copied } = useClipboard()
     color: #000;
     background-color: #f5f5f5;
     word-break: break-word;
-}
-.chat-message-item.user {
+  }
+  .chat-message-item.user {
     color: #fff;
     background-color: #06f;
-}
-.chat-footer {
+  }
+  .chat-footer {
     display: flex;
     align-items: center;
     column-gap: 10px;
-}
+  }
 
-.chat-message-extra .arco-popover-content {
+  .chat-message-extra .arco-popover-content {
     margin: 0;
-}
+  }
 
-.chat-message-extra .arco-popover-popup-content {
+  .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 {
+  }
+  .chat-message-extra .arco-popover-popup-arrow {
     display: none;
-}
-.chat-message-extra .arco-btn {
+  }
+  .chat-message-extra .arco-btn {
     border-radius: 12px;
-}
+  }
 
-.dot-flashing {
+  .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,
-.dot-flashing:after,
-.dot-flashing:before {
+  .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,
-.dot-flashing:before {
+  .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:before {
+  .dot-flashing:before {
     left: -15px;
     animation-delay: -0.4s;
-}
+  }
 
-.dot-flashing:after {
+  .dot-flashing:after {
     left: 15px;
     animation-delay: 0s;
-}
+  }
 
-@keyframes dot-flashing {
+  @keyframes dot-flashing {
     0% {
       background-color: #000;
     }
@@ -225,5 +231,6 @@ const { copy, copied } = useClipboard()
     to {
       background-color: #000;
     }
+  }
 }
 </style>