feat: 创建ai robot页面

src/styles/icons/iconfont.css

@@ -1,9 +1,9 @@
 @font-face {
   font-family: "font_family"; /* Project id 4672385 */
-  src: url('iconfont.woff2?t=1740548496100') format('woff2'),
-       url('iconfont.woff?t=1740548496100') format('woff'),
-       url('iconfont.ttf?t=1740548496100') format('truetype'),
-       url('iconfont.svg?t=1740548496100#font_family') format('svg');
+  src: url('iconfont.woff2?t=1744961152220') format('woff2'),
+       url('iconfont.woff?t=1744961152220') format('woff'),
+       url('iconfont.ttf?t=1744961152220') format('truetype'),
+       url('iconfont.svg?t=1744961152220#font_family') format('svg');
 }
 
 .font_family {
@@ -14,6 +14,50 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-icon_send_b:before {
+  content: "\e712";
+}
+
+.icon-icon_sidebar__window_b:before {
+  content: "\e70f";
+}
+
+.icon-icon_maximized__window_b:before {
+  content: "\e710";
+}
+
+.icon-icon_collapsed__to_widget_b:before {
+  content: "\e711";
+}
+
+.icon-icon_theme_colors_b:before {
+  content: "\e70e";
+}
+
+.icon-icon_delay_b1:before {
+  content: "\e70b";
+}
+
+.icon-icon_collapse_b1:before {
+  content: "\e70c";
+}
+
+.icon-icon_cancel_b2:before {
+  content: "\e70d";
+}
+
+.icon-icon_ai_api_log_b:before {
+  content: "\e70a";
+}
+
+.icon-icon_collapse__sidebar_b:before {
+  content: "\e708";
+}
+
+.icon-icon_dashboard_title_b:before {
+  content: "\e709";
+}
+
 .icon-icon_collapse_b:before {
   content: "\e707";
 }

src/styles/icons/iconfont.svg

@@ -14,6 +14,28 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="icon_send_b" unicode="&#59154;" d="M678.272 424.256l-460.928 225.92 56.32-225.92h404.608z m-403.712-76.8l-57.216-229.568 468.352 229.568H274.56z m601.664 65.28a32 32 0 0 0 0-57.472L164.672 6.592a32 32 0 0 0-45.184 36.48l83.072 333.184a32 32 0 0 1 0 15.488L119.488 724.992a32 32 0 0 0 45.184 36.48L876.16 412.736z"  horiz-adv-x="1088" />
+      
+      <glyph glyph-name="icon_sidebar__window_b" unicode="&#59151;" d="M740.352 809.28h132.16v-76.8h-132.16v76.8z m-72.448-102.592a25.6 25.6 0 0 0 25.6 25.6v76.8H119.04a102.4 102.4 0 0 1-102.4-102.4v-645.376a102.4 102.4 0 0 1 102.4-102.4H693.504v76.8a25.6 25.6 0 0 0-25.6 25.6v80.64h-76.8v-80.64c0-8.832 1.088-17.408 3.2-25.6H119.04a25.6 25.6 0 0 0-25.6 25.6V706.688c0 14.08 11.456 25.6 25.6 25.6h475.264c-2.112-8.192-3.2-16.768-3.2-25.6v-80.64h76.8v80.64z m251.072 25.6a25.6 25.6 0 0 0 25.6-25.6v-80.64h76.8v80.64a102.4 102.4 0 0 1-102.4 102.4v-76.8zM667.904 410.88V572.16h-76.8v-161.28h76.8z m276.672 161.28v-161.28h76.8V572.16h-76.8z m-276.672-376.384v161.28h-76.8v-161.28h76.8z m276.672 161.28v-161.28h76.8v161.28h-76.8z m0-215.04v-80.64a25.6 25.6 0 0 0-25.6-25.6v-76.8a102.4 102.4 0 0 1 102.4 102.4v80.64h-76.8zM541.632 406.592L433.28 514.944l-45.248-45.248 53.76-53.76H186.88v-64h254.784l-53.696-53.696 45.248-45.248 108.352 108.352a32 32 0 0 1 0 45.248z m330.88-370.88h-132.16v-76.8h132.16v76.8z"  horiz-adv-x="1088" />
+      
+      <glyph glyph-name="icon_maximized__window_b" unicode="&#59152;" d="M944.64 706.688a25.6 25.6 0 0 1-25.6 25.6h-224.96a25.6 25.6 0 0 1-25.6-25.6v-645.376c0-14.08 11.52-25.6 25.6-25.6h224.896a25.6 25.6 0 0 1 25.6 25.6V706.688z m-25.6 102.4a102.4 102.4 0 0 0 102.4-102.4v-645.376a102.4 102.4 0 0 0-102.4-102.4h-224.96a102.4 102.4 0 0 0-102.4 102.4V706.688a102.4 102.4 0 0 0 102.4 102.4h224.896z m-490.624-76.8h148.352v76.8H428.416v-76.8z m-220.48 0h162.944v76.8H207.936v-76.8z m-88.96 0h36.544v76.8h-36.48a102.4 102.4 0 0 1-102.4-102.4v-80.64h76.8v80.64c0 14.08 11.456 25.6 25.6 25.6z m-25.6-321.408V572.16H16.64v-161.28h76.8z m0-215.104v161.28H16.64v-161.28h76.8z m0-134.4v80.64H16.64v-80.64a102.4 102.4 0 0 1 102.4-102.4h36.544v76.8h-36.48a25.6 25.6 0 0 0-25.6 25.6z m483.392-25.6H428.416v-76.8h148.352v76.8z m-205.952 0H208v-76.8h162.944v76.8zM164.352 406.528L272.64 514.944l45.248-45.248-53.696-53.76h254.784v-64H264.192l53.696-53.696-45.248-45.248-108.352 108.352a32 32 0 0 0 0 45.248z"  horiz-adv-x="1088" />
+      
+      <glyph glyph-name="icon_collapsed__to_widget_b" unicode="&#59153;" d="M928.768 813.504c55.488 0 100.48-44.992 100.48-100.48v-327.808h-75.392V712.96a25.152 25.152 0 0 1-25.088 25.152H111.744a25.152 25.152 0 0 1-25.152-25.152v-659.84c0-13.888 11.264-25.152 25.152-25.152h488.768v-75.456H111.744A100.544 100.544 0 0 0 11.2 53.12V712.96c0 55.552 44.992 100.544 100.544 100.544h817.024z m-216.832-571.84c0 15.616 12.672 28.288 28.288 28.288h62.848v69.12h-62.848c-53.76 0-97.408-43.648-97.408-97.408v-62.848h69.12v62.848z m153.984 28.288h62.848c15.616 0 28.224-12.672 28.224-28.288v-62.848h69.12v62.848c0 53.76-43.52 97.408-97.344 97.408h-62.848v-69.12z m-153.984-216.832v62.848h-69.12v-62.848c0-53.76 43.584-97.408 97.408-97.408h62.848v69.12h-62.848a28.288 28.288 0 0 0-28.288 28.288z m245.12 62.848v-62.848a28.288 28.288 0 0 0-28.288-28.288h-62.848v-69.12h62.848c53.76 0 97.408 43.584 97.408 97.408v62.848h-69.12z m-418.304 258.56a31.36 31.36 0 0 1-0.256 2.56l-19.2 154.048-62.4-7.808 9.92-79.104L260.416 604.8l-38.592-49.6L428.16 394.56l-79.104-9.856 7.808-62.4 152.96 19.136a31.36 31.36 0 0 1 28.928 32.96z"  horiz-adv-x="1088" />
+      
+      <glyph glyph-name="icon_theme_colors_b" unicode="&#59150;" d="M454.4 722.432L388.096 788.8l54.336 54.336 492.288-492.288-425.92-425.92-425.856 425.92L454.4 722.432z m54.4-54.336L191.424 350.848l317.248-317.312 317.312 317.312-317.312 317.248zM880.32 350.848L508.8-20.736 137.216 350.848l53.056 53.12h636.992l53.12-53.12zM1033.152 166.592a76.416 76.416 0 1 0-152.832 0c0 42.24 76.416 131.584 76.416 131.584s76.416-89.408 76.416-131.584z"  horiz-adv-x="1088" />
+      
+      <glyph glyph-name="icon_delay_b1" unicode="&#59147;" d="M487.04 676.032a64 64 0 0 0 108.224-0.192l324.544-515.456a64 64 0 0 0-54.144-98.112H213.76a64 64 0 0 0-54.016 98.304l327.296 515.456z m54.08-34.304L213.76 126.272h651.84L541.12 641.728z m30.528-165.12v-203.456h-64v203.52h64z m0-309.376v52.992h-64v-52.992h64z"  horiz-adv-x="1088" />
+      
+      <glyph glyph-name="icon_collapse_b1" unicode="&#59148;" d="M160 769.088a102.4 102.4 0 0 1-102.4-102.4v-565.376a102.4 102.4 0 0 1 102.4-102.4h704a102.4 102.4 0 0 1 102.4 102.4V666.688a102.4 102.4 0 0 1-102.4 102.4h-704z m-25.6-102.4c0 14.08 11.52 25.6 25.6 25.6h244.288v-616.576H160a25.6 25.6 0 0 0-25.6 25.6V666.688z m346.688-590.976V692.288H864c14.08 0 25.6-11.52 25.6-25.6v-565.376a25.6 25.6 0 0 0-25.6-25.6H481.088z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="icon_cancel_b2" unicode="&#59149;" d="M201.152 743.936c0 14.08 11.52 25.6 25.6 25.6h554.56c14.08 0 25.6-11.52 25.6-25.6v-458.24h76.8v458.24a102.4 102.4 0 0 1-102.4 102.4H226.752a102.4 102.4 0 0 1-102.4-102.4v-704a102.4 102.4 0 0 1 102.4-102.4h277.312v76.8H226.752a25.6 25.6 0 0 0-25.6 25.6v704z m428.224-497.728l107.968-107.968 107.968 107.904 54.336-54.272-107.968-107.968 107.968-107.968-54.336-54.272-107.968 107.968-107.968-108.032-54.336 54.336 108.032 107.968-108.032 107.968 54.336 54.336z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="icon_ai_api_log_b" unicode="&#59146;" d="M305.28 659.84h429.952v76.8H305.28v-76.8z m-51.84-513.28h532.544V543.36H253.44v-396.864zM176.64 556.16a64 64 0 0 0 64 64h558.144a64 64 0 0 0 64-64v-422.464a64 64 0 0 0-64-64H240.64a64 64 0 0 0-64 64V556.16z m164.8-262.4v102.4h128v-102.4h-128z m241.728 102.4v-102.4h128v102.4h-128z m313.408-136V430.272h76.8v-170.176h-76.8z m-832 170.112v-170.176h76.8V430.336h-76.8z"  horiz-adv-x="1088" />
+      
+      <glyph glyph-name="icon_collapse__sidebar_b" unicode="&#59144;" d="M142.08 769.088a38.4 38.4 0 0 1-38.4-38.4v-693.376a38.4 38.4 0 0 1 38.4-38.4h832a38.4 38.4 0 0 1 38.4 38.4V730.688a38.4 38.4 0 0 1-38.4 38.4h-832z m38.4-693.376V692.288h269.824v-616.576H180.48z m346.624 0V692.288h408.512v-616.576H527.104z"  horiz-adv-x="1088" />
+      
+      <glyph glyph-name="icon_dashboard_title_b" unicode="&#59145;" d="M863.2064 384c0-183.808-148.992-332.8-332.8-332.8s-332.8 148.992-332.8 332.8 148.992 332.8 332.8 332.8 332.8-148.992 332.8-332.8z m-332.8-1.6128l262.3232 60.4416C765.952 562.9952 658.6624 652.8 530.432 652.8v-270.4128z"  horiz-adv-x="1049" />
+      
       <glyph glyph-name="icon_collapse_b" unicode="&#59143;" d="M199.111111 726.300444a91.022222 91.022222 0 0 1-91.022222-91.022222v-502.556444a91.022222 91.022222 0 0 1 91.022222-91.022222h625.777778a91.022222 91.022222 0 0 1 91.022222 91.022222V635.278222a91.022222 91.022222 0 0 1-91.022222 91.022222h-625.777778z m-22.755555-91.022222c0 12.515556 10.24 22.755556 22.755555 22.755556h217.144889v-548.067556H199.111111a22.755556 22.755556 0 0 0-22.755555 22.755556V635.278222z m308.167111-525.312V658.033778H824.888889c12.515556 0 22.755556-10.24 22.755555-22.755556v-502.556444a22.755556 22.755556 0 0 0-22.755555-22.755556H484.522667z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="icon_cancel_b1" unicode="&#59142;" d="M235.690667 704c0 12.515556 10.24 22.755556 22.755555 22.755556h492.942222c12.515556 0 22.755556-10.24 22.755556-22.755556v-407.324444h68.266667v407.324444a91.022222 91.022222 0 0 1-91.022223 91.022222H258.446222a91.022222 91.022222 0 0 1-91.022222-91.022222v-625.777778a91.022222 91.022222 0 0 1 91.022222-91.022222h246.499556v68.266667H258.446222a22.755556 22.755556 0 0 0-22.755555 22.755555v625.777778z m380.643555-442.424889l95.971556-96.028444 95.971555 95.971555 48.241778-48.241778-95.914667-95.971555 95.971556-95.971556-48.298667-48.241777-95.971555 95.914666-95.971556-95.971555-48.298666 48.298666 96.028444 95.971556-96.028444 95.971555 48.298666 48.298667z"  horiz-adv-x="1024" />

src/views/AIRobotChat/index.ts

@@ -0,0 +1 @@
+export { default } from './src/AIRobotChat.vue'

src/views/AIRobotChat/src/AIRobotChat.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+const modalSize = ref('large')
+</script>
+
+<template>
+  <div class="ai-robot">
+    <div class="top-section">
+      <div class="header">
+        <span class="welcome">Hi! I'm your Freight Assistant</span>
+        <div class="option-icon">
+          <span
+            v-if="modalSize === 'large'"
+            class="font_family icon-icon_sidebar__window_b"
+            @click="modalSize = 'small'"
+          ></span>
+          <span
+            v-else-if="modalSize !== 'large'"
+            class="font_family icon-icon_maximized__window_b"
+            @click="modalSize = 'large'"
+          ></span>
+          <span class="font_family icon-icon_collapsed__to_widget_b"></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.ai-robot {
+  position: absolute;
+  top: 74px;
+  right: 24px;
+  width: 1000px;
+  height: calc(100% - 98px);
+  z-index: 4000;
+  border-radius: 12px;
+  box-shadow: 4px 4px 32px 0px rgba(0, 0, 0, 0.2);
+  background-color: #fff;
+  overflow: hidden;
+  .top-section {
+    height: 150px;
+    background: linear-gradient(to bottom, #eaecff 10%, #eaecff 10%, #fefdff 100%);
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 64px;
+      padding: 0 16px;
+      .welcome {
+        font-size: 18px;
+        font-weight: 700;
+      }
+      .option-icon {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        .font_family {
+          font-size: 16px;
+          cursor: pointer;
+          &:hover {
+            color: var(--color-theme);
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/Layout/src/LayoutView.vue

@@ -5,6 +5,7 @@ import Menu from './components/Menu/MenuView.vue'
 import Logo from './images/logo.png'
 import ScoringGrade from '@/components/ScoringGrade'
 import AIRobot from '@/components/AIRobot'
+import AIRobotChat from '@/views/AIRobotChat/src/AIRobotChat.vue'
 import LogoMenu from './images/logo_menu.png'
 
 const leftAsideWidth = ref('232px')
@@ -43,6 +44,7 @@ const handleMenuCollapse = (val: boolean) => {
       </el-main>
     </el-container>
     <!-- <AIRobot></AIRobot> -->
+    <!-- <AIRobotChat></AIRobotChat> -->
     <ScoringGrade></ScoringGrade>
   </el-container>
 </template>