copilot新样式完成

ui/packages/ai/AiCopilot.vue

@@ -1,6 +1,7 @@
 <script>
 import ChatContent from "./components/chatContent.vue";
 import ThinkingBar from "./components/thinkingBar.vue";
+import {mapState} from "vuex";
 
 export default {
   name: "AiCopilot",
@@ -26,11 +27,34 @@ export default {
         //       "著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。",
         //   uid: "me"
         // },
+      ],
+      apps: [
+        {label: "日常助理", icon: "https://cdn.sinoecare.com/i/2024/07/04/66864da37fc2b.png"},
+        {label: "文本助理", icon: "https://cdn.sinoecare.com/i/2024/07/04/66864da1684ad.png"},
+      ],
+      filter: "",
+      conversations: [
+        {content: "请对“city不city”一词进行深入分析"},
+        {content: "请对“city不city”一词进行深入分析"},
+        {content: "请对“city不city”一词进行深入分析"},
       ]
     }
   },
   computed: {
-    expandBtn: v => v.expand ? "收起" : "展开"
+    ...mapState(["user"]),
+    profile: v => v.user.info || {},
+    expandBtn: v => v.expand ? "收起" : "展开",
+    btns: () => [
+      {
+        label: "文件", icon: "https://cdn.sinoecare.com/i/2024/07/04/668663436e46e.png", click: () => {
+        }
+      }
+    ],
+    rowBtns: () => [
+      {icon: "https://cdn.sinoecare.com/i/2024/07/04/66866edc2910a.png", click: row => 0},
+      {icon: "https://cdn.sinoecare.com/i/2024/07/04/66866ed734540.png", click: row => 0},
+      {icon: "https://cdn.sinoecare.com/i/2024/07/04/66866eda99e4d.png", click: row => 0},
+    ]
   },
   components: {ThinkingBar, ChatContent},
   methods: {
@@ -86,13 +110,35 @@ export default {
       </div>
       <thinking-bar v-show="loading"/>
       <div class="flex content">
-        <div class="left" :class="{expand}"></div>
+        <div class="left" :class="{expand}">
+          <div class="profile">
+            <div v-text="profile.name"/>
+            <span v-text="profile.girdName"/>
+          </div>
+          <div class="apps flex">
+            <div v-for="(item,i) in apps" :key="i" class="app pointer" :style="{backgroundImage: `url(${item.icon})`}" v-text="item.label"/>
+          </div>
+          <div class="conversation">
+            <el-input class="search" v-model="filter" placeholder="搜索历史对话记录" size="small" suffix-icon="el-icon-search" clearable/>
+            <div class="item pointer" v-for="item in conversations" :key="item.id">
+              {{ item.content }}
+              <div class="operation flex">
+                <div v-for="(btn,i) in rowBtns" :key="i" class="pointer" :style="{backgroundImage: `url(${btn.icon})`}"/>
+              </div>
+            </div>
+          </div>
+        </div>
         <div class="right flex column gap-14">
           <chat-content class="fill" :list="history"/>
-          <div class="sendBox flex gap-14">
+          <div class="sendBox">
-            <el-input type="textarea" class="fill input" autosize resize="none" v-model="prompt" placeholder="请输入..."
+            <div class="topBar flex">
-                      @keydown.native="handleHotkey" :disabled="loading" :placeholder="loading?'正在思考中...':'请输入'"/>
+              <div v-for="(btn,i) in btns" :key="i" class="btn pointer" :style="{backgroundImage: `url(${btn.icon})`}" v-text="btn.label" @click="btn.click"/>
-            <div class="sendBtn" @click="handleSend"/>
+            </div>
+            <div class="flex end">
+              <el-input type="textarea" class="fill input" autosize resize="none" v-model="prompt" placeholder="请输入..." :rows="2"
+                        @keydown.native="handleHotkey" :disabled="loading" :placeholder="loading?'正在思考中...':'请输入'"/>
+              <div class="sendBtn" @click="handleSend"/>
+            </div>
           </div>
         </div>
       </div>
@@ -157,15 +203,128 @@ export default {
         width: 0;
         height: 100%;
         transition: width 1s;
+        padding: 14px 0;
+        overflow: hidden;
+
+        & > * {
+          margin: 0 14px;
+        }
 
         &.expand {
           width: 260px;
 
-
           & + .right {
             border-left-color: #ddd;
           }
         }
+
+        .profile {
+          padding: 18px 14px;
+          height: 88px;
+          background: url("https://cdn.sinoecare.com/i/2024/06/04/665ed2bc580fa.png") no-repeat;
+          background-size: 100%;
+          font-size: 14px;
+          color: #222222;
+          letter-spacing: 0;
+          line-height: 20px;
+
+          & > div {
+            font-weight: bold;
+            font-size: 20px;
+            line-height: 28px;
+          }
+        }
+
+        .apps {
+          color: #333;
+          font-size: 14px;
+          margin-top: 18px;
+          padding-top: 29px;
+          position: relative;
+
+          &:before {
+            content: "常用功能";
+            font-weight: bold;
+            position: absolute;
+            top: 0;
+            left: 0;
+          }
+
+          .app {
+            font-size: 13px;
+            line-height: 18px;
+            text-align: center;
+            width: 72px;
+            height: 72px;
+            padding-top: 47px;
+            background-repeat: no-repeat;
+            background-position: center 7px;
+            background-size: 36px 36px;
+            border-radius: 4px;
+
+
+            &:hover {
+              background-color: #286ffd14;
+            }
+          }
+        }
+
+        .conversation {
+          margin-top: 17px;
+
+          :deep(.search) {
+            margin-bottom: 10px;
+
+            input {
+              border-radius: 32px;
+              border: none;
+              background: #F4F6FA;
+            }
+          }
+
+          .item {
+            height: 32px;
+            border-radius: 16px;
+            font-size: 14px;
+            color: #666666;
+            line-height: 32px;
+            padding: 0 14px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            position: relative;
+
+            .operation {
+              position: absolute;
+              top: 0;
+              right: 0;
+              height: 32px;
+              background-image: linear-gradient(90deg, #e1ebff00 0%, #E2EBFF 14%);
+              border-radius: 0 16px 16px 0;
+              gap: 10px;
+              padding: 0 12px 0 20px;
+              display: none;
+
+              .pointer {
+                width: 14px;
+                height: 14px;
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+
+                &:hover {
+                  opacity: .8;
+                }
+              }
+            }
+
+            &:hover {
+              background: #2b71fd24;
+
+              .operation {
+                display: flex;
+              }
+            }
+          }
+        }
       }
 
       .right {
@@ -176,10 +335,10 @@ export default {
         border-left: 1px solid transparent;
 
         .sendBtn {
-          width: 40px;
+          width: 36px;
-          height: 40px;
+          height: 24px;
-          border-radius: 50%;
+          border-radius: 24px;
-          background: url("https://cdn.sinoecare.com/i/2024/06/04/665ed2bbdeb27.png") no-repeat center;
+          background: url("https://cdn.sinoecare.com/i/2024/07/04/668650935514e.png") no-repeat center;
           background-size: 100% 100%;
           cursor: pointer;
         }
@@ -190,17 +349,40 @@ export default {
       }
 
       :deep(.sendBox) {
-        width: 100%;
+        width: calc(100% - 14px);
-        padding-right: 14px;
+        margin-right: 14px;
+        padding: 8px 14px;
+        background: #F4F6FA;
+        align-items: flex-end;
+        border-radius: 4px;
+
+        .topBar {
+          width: 100%;
+          height: 25px;
+          border-bottom: 1px solid #E0E0E0;
+          margin-bottom: 10px;
+
+          .btn {
+            font-size: 12px;
+            color: #525F7A;
+            padding-left: 16px;
+            background-repeat: no-repeat;
+            background-position: left center;
+            background-size: 14px 14px;
+
+            &:hover {
+              opacity: .8;
+            }
+          }
+        }
 
         .input > textarea {
           width: 100%;
-          line-height: 40px;
+          line-height: 20px;
-          border-radius: 22px;
+          padding: 0 5px 0 0;
-          border: 1px solid #ddd;
+          border: none;
-          padding: 0 14px;
           box-sizing: border-box;
-          background: #F4F6FA;
+          background: transparent;
         }
       }
     }