初始化

src/assets/images/icon_password.svg

@@ -0,0 +1 @@
+<svg id="77f9cb32-4d4e-497c-9080-fb95c9ac6461" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>登录页</title><path d="M17.09,7.94a2.57,2.57,0,0,0-1.85-.77h-.87V5.22A4.3,4.3,0,0,0,10,1,4.3,4.3,0,0,0,5.63,5.22v2H4.76a2.61,2.61,0,0,0-2.6,2.6v6.65A2.6,2.6,0,0,0,4.76,19H15.24a2.6,2.6,0,0,0,2.6-2.58V9.75A2.52,2.52,0,0,0,17.09,7.94ZM6.66,5.22A3.27,3.27,0,0,1,10,2a3.27,3.27,0,0,1,3.34,3.19V7.05H6.66ZM16.82,16.41A1.57,1.57,0,0,1,15.24,18H4.76a1.57,1.57,0,0,1-1.57-1.56V9.77A1.57,1.57,0,0,1,4.76,8.2H15.24a1.57,1.57,0,0,1,1.58,1.56Z" style="fill:#333"/><path d="M10,11a.51.51,0,0,0-.51.51v3.09a.51.51,0,0,0,.51.51.52.52,0,0,0,.52-.51V11.54A.52.52,0,0,0,10,11Z" style="fill:#333"/></svg>

src/assets/images/icon_user.svg

@@ -0,0 +1 @@
+<svg id="bc91e014-d5db-43d3-af08-e2a010022434" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>登录页</title><path d="M12.83,10.56l-.26-.08.23-.16a5.09,5.09,0,1,0-5.6,0l.23.16-.26.08A8.42,8.42,0,0,0,1,18.48a.52.52,0,1,0,1,0c0-4,3.57-7.31,8-7.31s8,3.28,8,7.31a.52.52,0,0,0,1,0A8.42,8.42,0,0,0,12.83,10.56ZM6,6.09a4.05,4.05,0,1,1,4.05,4A4.05,4.05,0,0,1,6,6.09Z" style="fill:#333"/></svg>

src/assets/styles/login.scss

@@ -34,6 +34,9 @@ $buttonHeight: $buttonH * 1px;
 
 // - - - - - 页面基础设置
 .container {
+  position: relative;
+  background-image: url("~@/assets/images/login_bg.jpg") ;
+  background-size: 100%;
   .login-code {
     width: 33%;
     height: 38px;
@@ -44,14 +47,8 @@ $buttonHeight: $buttonH * 1px;
       vertical-align: middle;
     }
   }
-  // 元素
-  width: inherit;
-  height: inherit;
-  min-width: 1080px;
-  min-height: 620px;
-  background-color: $containerBgColor;
-  background-image: url($containerBgImage);
-  background-size: cover;
+  width: 100%;
+ height: 100vh;
   // 定位
   position: relative;
   display: flex;
@@ -73,13 +70,12 @@ $buttonHeight: $buttonH * 1px;
     left: 50%;
     margin-left: -$logoWidth/2;
   }
+  .form-cont{width: 350px; .icon{width: 16px;margin-left: 5px;}}
   .content {
     // 元素
-    width: $contentWidth;
+    width: 29vw;
     height: $contentHeight;
-    background-color: #ffffff;
-    box-shadow: 0px 16px 40px rgba(0, 0, 0, 0.07);
-    border-radius: 20px;
+.pc-welcome{margin-bottom: 30px; text-align: center; font-size: 18px; font-weight: bold}
     // 定位
     position: relative;
     .pic {
@@ -105,7 +101,7 @@ $buttonHeight: $buttonH * 1px;
       display:flex;
       justify-content: center;
       align-items: center;
-      .pc-title{ width: 100%; clear: both;}
+      .pc-title{ width: 100%;font-size: 24px; font-weight: bold; margin-bottom: 20px;text-align: center; img{width: 30px;}}
       .mobile-title,
       .mobile-switch {
         display: none;

src/views/components/v-menu/index.vue

@@ -2,7 +2,8 @@
   <div class="v-menu">
     <div class="v-menu-logo row flex-align-center flex-justify-center">
       <span class="logo"></span>
-      <span class="text">AI智能体助手</span></div>
+      <span class="text">AI智能体助手</span>
+    </div>
     <div class="v-menu-list">
       <template v-for="(item,index) in menuList">
         <div class="v-menu-list-item">
@@ -17,12 +18,26 @@
         </div>
       </template>
     </div>
+    <div class="v-menu-bot row flex-align-center flex-justify-center">
+      <img src="@/assets/ai-images/aie.png" class="user-avatar"/>
+      <span v-if="nickname" class="user-nickname">{{ nickname }}</span>
+    </div>
   </div>
 </template>
 
 <script>
+import {mapGetters} from "vuex";
+
 export default {
   name: 'Index',
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar',
+      'nickname',
+      'device'
+    ]),
+  },
   props: {
     menuIndex: {
       type: String,
@@ -76,6 +91,21 @@ export default {
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 100%);
 }
 
+.v-menu-bot {
+  position: absolute;
+  z-index: 99;
+  width: 90%;
+  left: 5%;
+  height: 35px;
+  background-color: rgba(0,0,0,.05);
+  border-radius: 35px;
+  bottom: 20px;
+
+  .user-avatar {
+    width: 30px;margin-right: 5px;
+  }
+}
+
 .v-menu-logo {
   margin: 0 0 10px 0;
   height: 56px;

src/views/login.vue

@@ -1,25 +1,13 @@
 <template xmlns="">
   <div class="container">
-    <div class="logo"></div>
     <!-- 登录区域 -->
     <div class="content">
-      <!-- 配图 -->
-      <div class="pic"></div>
       <!-- 表单 -->
       <div class="field">
-        <!-- [移动端]标题 -->
-        <h2 class="mobile-title">
-          <h3 class="title">AI智能体助手后台管理系统</h3>
-        </h2>
-
         <!-- 表单 -->
         <div class="form-cont">
-          <el-tabs class="form" v-model="loginForm.loginType" style=" float:none;">
-            <el-tab-pane label="账号密码登录" name="uname">
-            </el-tab-pane>
-            <el-tab-pane label="短信验证码登录" name="sms">
-            </el-tab-pane>
-          </el-tabs>
+          <h3 class="pc-title row flex-justify-center"><img slot="prefix" src="@/assets/images/logo_blue.svg" class="img" />AI智能体助手系统</h3>
+          <h3 class="pc-welcome">欢迎登录</h3>
           <div>
             <el-form ref="loginForm" :model="loginForm" :rules="LoginRules" class="login-form">
               <el-form-item style="display: none;;" prop="tenantName" v-if="tenantEnable">
@@ -31,39 +19,19 @@
               <div v-if="loginForm.loginType === 'uname'">
                 <el-form-item prop="username">
                   <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
-                    <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
+                    <img slot="prefix" src="@/assets/images/icon_user.svg" class="icon" />
                   </el-input>
                 </el-form-item>
                 <el-form-item prop="password">
                   <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
                             @keyup.enter.native="getCode">
-                    <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
+                    <img slot="prefix" src="@/assets/images/icon_password.svg" class="icon" />
                   </el-input>
                 </el-form-item>
                 <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">记住密码</el-checkbox>
               </div>
 
-              <!-- 短信验证码登录 -->
-              <div v-if="loginForm.loginType === 'sms'">
-                <el-form-item prop="mobile">
-                  <el-input v-model="loginForm.mobile" type="text" auto-complete="off" placeholder="请输入手机号">
-                    <svg-icon slot="prefix" icon-class="phone" class="el-input__icon input-icon"/>
-                  </el-input>
-                </el-form-item>
-                <el-form-item prop="mobileCode">
-                  <el-input v-model="loginForm.mobileCode" type="text" auto-complete="off" placeholder="短信验证码"
-                            class="sms-login-mobile-code-prefix"
-                            @keyup.enter.native="handleLogin">
-                    <template>
-                      <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
-                    </template>
-                    <template slot="append">
-                      <span v-if="mobileCodeTimer <= 0" class="getMobileCode" @click="getSmsCode" style="cursor: pointer;">获取验证码</span>
-                      <span v-if="mobileCodeTimer > 0" class="getMobileCode">{{ mobileCodeTimer }}秒后可重新获取</span>
-                    </template>
-                  </el-input>
-                </el-form-item>
-              </div>
+
 
               <!-- 下方的登录按钮 -->
               <el-form-item style="width:100%;">
@@ -73,24 +41,6 @@
                   <span v-else>登 录 中...</span>
                 </el-button>
               </el-form-item>
-
-              <!--  社交登录 -->
-             <el-form-item style="width:100%;">
-                  <div class="oauth-login" style="display:flex">
-                    <div class="oauth-login-item" v-for="item in SysUserSocialTypeEnum" :key="item.type" @click="doSocialLogin(item)">
-                      <img :src="item.img" height="25px" width="25px" alt="登录" >
-                      <span>{{item.title}}</span>
-                    </div>
-                </div>
-              </el-form-item>
-
-              <!-- 教程说明 -->
-              <el-form-item style="width:100%; margin-top:-25px">
-                <el-link href="https://doc.iocoder.cn/" target="_blank">📚开发指南</el-link>
-                <el-link href="https://doc.iocoder.cn/video/" target="_blank" style="padding-left: 10px">🔥视频教程</el-link>
-                <el-link href="https://www.iocoder.cn/Interview/good-collection/" target="_blank" style="padding-left: 10px">⚡面试手册</el-link>
-                <el-link href="http://static.yudao.iocoder.cn/mp/Aix9975.jpeg" target="_blank" style="padding-left: 10px">🤝外包咨询</el-link>
-              </el-form-item>
             </el-form>
           </div>
         </div>
@@ -100,11 +50,6 @@
     <!-- 图形验证码 -->
     <Verify ref="verify" :captcha-type="'blockPuzzle'" :img-size="{width:'400px',height:'200px'}"
             @success="handleLogin" />
-
-    <!-- footer -->
-    <div class="footer">
-      Copyright © 2020-2022 iocoder.cn All Rights Reserved.
-    </div>
   </div>
 </template>
 
@@ -256,7 +201,7 @@ export default {
           // 发起登陆
           // console.log("发起登录", this.loginForm);
           this.$store.dispatch(this.loginForm.loginType === "sms" ? "SmsLogin" : "Login", this.loginForm).then(() => {
-            this.$router.push({path: this.redirect || "/"}).catch(() => {
+            this.$router.push({path: this.redirect || "/index"}).catch(() => {
             });
           }).catch(() => {
             this.loading = false;
@@ -325,7 +270,6 @@ export default {
 <style lang="scss" scoped>
 @import "~@/assets/styles/login.scss";
 
-
 .oauth-login {
   display: flex;
   align-items: center;

src/views/pages/AI-Data-Analysis/dialog.vue

@@ -19,9 +19,18 @@
         <!-- 对话主体 -->
         <div class="ai-dialog">
           <div class="ai-dialog-item">
+            <!-- 对话 回答 -->
+            <div class="ai-dialog-answer row">
+              <div class="answer-top">
+                <div class="answer-icon"><img class="img" src="@/views/pages/AI-Data-Analysis/images/AI.svg"/></div>
+              </div>
+              <div class="answer-contnet">
+                <p>您好，我是您的智能助手，有什么可以帮您的？</p>
+              </div>
+            </div>
             <!-- 对话 提问 -->
             <div class="ai-dialog-ask">
-              <div class="ask-contnet">前端工程师</div>
+              <div class="ask-contnet">河北省五一假期客流数据分析报告，生成数据图表分析一下</div>
             </div>
             <!-- 对话 回答 -->
             <div class="ai-dialog-answer">
@@ -33,7 +42,38 @@
                   <i class="el-icon-arrow-down"></i></div>
               </div>
               <div class="answer-contnet">
-                <p>第三方”是一个广泛使用的术语，具体含义取决于上下文。以下是不同领域中的常见解释：</p>
+                <p>以下是根据河北省五一假期相关客流数据生成的数据图表及分析：</p>
+                <h2>整体客流情况</h2>
+                <el-table
+                  class="ai-data-table"
+                  :data="tableData"
+                  style="width: 100%">
+                  <el-table-column
+                    prop="date"
+                    label="交通方式"
+                    width="180">
+                  </el-table-column>
+                  <el-table-column
+                    prop="name"
+                    label="人员流动量"
+                    width="180">
+                  </el-table-column>
+                  <el-table-column
+                    prop="address"
+                    label="日均流动量">
+                  </el-table-column>
+                  <el-table-column
+                    prop="address"
+                    label="同比增长">
+                  </el-table-column>
+                </el-table>
+                <p>
+                  从图表可以看出，公路是五一假期人员流动的主要方式，其人员流动量远远超过铁路和机场。同时，各类交通方式的客流量均呈现出一定的增长</p>
+                <h2>热门城市及景区情况</h2>
+                <p>
+                  热门城市：根据中国移动梧桐大数据测算，石家庄市、保定市、邯郸市稳居热门城市目的地前三。省外客源占比超三成，北京市、天津市、山</p>
+                <p> 热门景区：如保定易县易水湖、狼牙山接待量同比增长超两成。迁安市重点景区单日接待量最高突破 1.5
+                  万余人次，创历史新高，白羊</p>
               </div>
             </div>
           </div>
@@ -66,7 +106,23 @@ export default {
     return {
       textareaAsk: "",
       historyDialog: [],
-      activeHistory: 0
+      activeHistory: 0,
+      tableData: [{
+        date: '11915.4万',
+        name: '公路',
+        address: '2383.08万',
+        name1: '6.67%'
+      }, {
+        date: '270.24万',
+        name: '铁路',
+        address: '54.05万',
+        name1: '3.7%'
+      }, {
+        date: '20.65万',
+        name: '机场',
+        address: '4.13万',
+        name1: '3.48%'
+      }]
     }
   },
   mounted() {
@@ -79,9 +135,9 @@ export default {
       let api_key = 'cjy-dade97a59d0f4fcfa3f2bb256b77a187'
       let app_code = 'fe602e3d-3b88-11f0-8d1b-00e04f309c26'
       let url = `${base_url}?api_key=${api_key}&app_code=${app_code}&user_input=${this.textareaAsk}`
-      axios({method:'get',url:url,responseType:"blob"}).then(function (response) {
-          console.log(response);
-        })
+      axios({method: 'get', url: url, responseType: "blob"}).then(function (response) {
+        console.log(response);
+      })
         .catch(function (error) {
           console.log(error);
         });
@@ -89,11 +145,10 @@ export default {
     /** 关闭 WebSocket连接 **/
     getHistoryDialog() {
       this.historyDialog = [
-        {name: "Vue项目DOCX转Markdown方案"},
-        {name: "列表加载完成提示方式总结"},
-        {name: "JS实现DOCX转HTML保留样式"},
-        {name: "流式Markdown转HTML方案"},
-        {name: "JS实现DOCX转Markdown方法"},
+        {name: "河北省五一假期客流数据分析报告"},
+        {name: "保定市今年与去年旅游数据对比"},
+        {name: "石家庄三月游客消费和客流统计"},
+        {name: "河北省春节消费数据分析报告"},
       ]
     }
   }
@@ -101,6 +156,37 @@ export default {
 </script>
 
 <style scoped lang="scss">
+:deep .el-table {
+  margin: 10px 0;
+  border-left: 1px solid rgba(255, 255, 255, .2);
+  border-top: 1px solid rgba(255, 255, 255, .2);
+  border-right: 1px solid rgba(255, 255, 255, .2);
+  background-color: #535559 !important;
+
+  tr {
+    background-color: #131E2D !important;
+  }
+
+  .el-table__row:hover {
+    background-color: rgba(255, 255, 255, .2) !important;
+  }
+
+  .el-table__header-wrapper th {
+    background-color: #404245 !important;
+  }
+
+  th.el-table__cell.is-leaf, td.el-table__cell {
+    border-bottom-color: rgba(255, 255, 255, .2);
+    color: #F7FAFF!important;
+  }
+
+  .el-table__cell {
+    border-right-color: rgba(255, 255, 255, .2)!important;
+  }
+  .el-table__body tr:hover > td.el-table__cell {
+    background-color:#404245
+  }
+}
 
 .ai-pages-warp {
   display: flex;
@@ -125,7 +211,7 @@ export default {
   }
 
   .ai-dialog-history-name {
-    margin:  10px 0;
+    margin: 10px 0;
     padding: 0 15px;
     font-size: 13px;
     color: #555;
@@ -176,8 +262,9 @@ export default {
       &.active {
         background-color: rgb(73 73 73)
       }
+
       &:hover {
-        background-color: rgba(73, 73,73,.5)
+        background-color: rgba(73, 73, 73, .5)
       }
     }
   }
@@ -257,6 +344,8 @@ export default {
 
 /* 编辑页面 Ai对话 */
 .ai-dialog {
+  padding-left: 40px;
+
   .ai-dialog-item {
     .ai-dialog-ask {
       display: flex;
@@ -273,10 +362,13 @@ export default {
 
     .ai-dialog-answer {
       .answer-top {
+        position: relative;
         display: flex;
         align-items: center;
 
         .answer-icon {
+          position: absolute;
+          left: -40px;
           width: 34px;
           height: 34px;
           text-align: center;
@@ -312,9 +404,13 @@ export default {
       }
 
       .answer-contnet {
-        margin: 20px 0 20px 50px;
+        margin-top: 20px;
         font-size: 16px;
         color: #fff;
+
+        h2 {
+          font-weight: bold
+        }
       }
 
     }