From ccbd8732040614650a483f1cd01b5dd4ff97bdaf Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Fri, 21 Feb 2025 22:15:59 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96AI=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/js/pages/manage/application.vue    | 47 +++++++++------
 resources/assets/sass/pages/page-apply.scss   | 59 ++++++++++++++-----
 2 files changed, 72 insertions(+), 34 deletions(-)

diff --git a/resources/assets/js/pages/manage/application.vue b/resources/assets/js/pages/manage/application.vue
index 15fa3d9b9..9684620c6 100644
--- a/resources/assets/js/pages/manage/application.vue
+++ b/resources/assets/js/pages/manage/application.vue
@@ -46,17 +46,12 @@
             <Report v-if="workReportShow" v-model="workReportTabs" @on-read="$store.dispatch('getReportUnread', 1000)" />
         </DrawerOverlay>
 
-        <!--AI 机器人-->
-        <DrawerOverlay v-model="aibotShow" placement="right" :size="950">
-            <div class="ivu-modal-wrap-apply">
-                <div class="ivu-modal-wrap-apply-title">
-                    {{ $L('AI 机器人') }}
-                    <p @click="aibotType = aibotType == 1 ? 2 : 1" v-if="userIsAdmin">
-                        {{ aibotType == 1 ? $L('机器人设置') : $L('返回') }}
-                    </p>
-                </div>
-                <div class="ivu-modal-wrap-apply-body">
-                    <ul class="ai-list" v-if="aibotType == 1">
+        <!--AI 列表-->
+        <DrawerOverlay v-model="aibotShow" placement="right" :size="720">
+            <div v-if="aibotShow" class="ivu-modal-wrap-apply">
+                <div class="ivu-modal-wrap-apply-title">{{ $L('AI 列表') }}</div>
+                <div class="ivu-modal-wrap-apply-body ai-body">
+                    <ul class="ai-list">
                         <li v-for="(item, key) in aibotList"  :key="key">
                             <div class="ai-img">
                                 <img :src="item.src">
@@ -69,11 +64,23 @@
                                     <li>22</li>
                                     <li>cc</li>
                                 </ul>
-                                <Button type="primary" :loading="aibotDialogSearchLoad == item.value" @click="onGoToChat(item.value)">{{ $L('开始聊天') }}</Button>
+                                <div class="ai-btn">
+                                    <Button icon="md-chatbubbles" :loading="aibotDialogSearchLoad == item.value" @click="onGoToChat(item.value)">{{ $L('开始聊天') }}</Button>
+                                    <Button icon="md-settings" @click="applyClick({value: 'robot-setting'}, item.value)">{{ $L('设置') }}</Button>
+                                </div>
                             </div>
                         </li>
                     </ul>
-                    <Tabs v-else v-model="aibotTabAction" class="ai-tabs">
+                </div>
+            </div>
+        </DrawerOverlay>
+
+        <!--AI 设置-->
+        <DrawerOverlay v-model="aibotSettingShow" placement="right" :size="950">
+            <div v-if="aibotSettingShow" class="ivu-modal-wrap-apply">
+                <div class="ivu-modal-wrap-apply-title">{{ $L('AI 设置') }}</div>
+                <div class="ivu-modal-wrap-apply-body">
+                    <Tabs v-model="aibotTabAction" :animated="false" class="ai-tabs">
                         <TabPane label="ChatGPT" name="openai">
                             <div class="aibot-warp">
                                 <SystemAibot :type="aibotTabAction" v-if="aibotTabAction == 'openai'" />
@@ -315,20 +322,20 @@ export default {
                 },
                 {
                     value: "qianwen",
-                    label: "Qianwen",
+                    label: "通义千问",
                     src: $A.mainUrl('avatar/%E9%80%9A%E4%B9%89%E5%8D%83%E9%97%AE.png'),
                     desc: this.$L('我是达摩院自主研发的超大规模语言模型，能够回答问题、创作文字，还能表达观点、撰写代码。')
                 },
                 {
                     value: "wenxin",
-                    label: "Wenxin",
+                    label: "文心一言",
                     src: $A.mainUrl('avatar/%E6%96%87%E5%BF%83.png'),
                     desc: this.$L('我是文心一言，英文名是ERNIE Bot。我能够与人对话互动，回答问题，协助创作，高效便捷地帮助人们获取信息、知识和灵感。')
                 },
             ],
-            aibotTabAction: "openai",
             aibotShow: false,
-            aibotType: 1,
+            aibotSettingShow: false,
+            aibotTabAction: "openai",
             aibotDialogSearchLoad: "",
             //
             signInShow: false,
@@ -476,10 +483,12 @@ export default {
                     this.workReportShow = true;
                     break;
                 case 'robot':
-                    this.aibotType = 1;
-                    this.aibotTabAction = "openai";
                     this.aibotShow = true;
                     break;
+                case 'robot-setting':
+                    this.aibotTabAction = area;
+                    this.aibotSettingShow = true;
+                    break;
                 case 'signin':
                     this.signInType = 1;
                     this.signInShow = true;
diff --git a/resources/assets/sass/pages/page-apply.scss b/resources/assets/sass/pages/page-apply.scss
index cceca1654..5db01d28a 100644
--- a/resources/assets/sass/pages/page-apply.scss
+++ b/resources/assets/sass/pages/page-apply.scss
@@ -335,7 +335,7 @@
                 text-align: center;
                 margin-right: 10px;
                 margin-bottom: 10px;
-                border-radius: 5px;
+                border-radius: 6px;
 
                 .apply-icon {
                     display: block;
@@ -406,26 +406,30 @@
             list-style-type: none;
             overflow: hidden;
             border-radius: 3px;
-            margin-right: -10px;
+            padding: 10px;
+            margin: -10px;
 
             > li {
                 border: 1px solid #eeeeee;
                 padding: 16px;
                 position: relative;
                 margin-bottom: 12px;
-                border-radius: 5px;
+                border-radius: 10px;
                 display: flex;
                 align-items: flex-start;
 
+                &:hover {
+                    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+                }
+
                 .ai-img {
                     margin-right: 20px;
                     flex-shrink: 0;
 
                     > img {
-                        width: 60px;
-                        height: 60px;
-                        border-radius: 8px;
-                        object-fit: cover;
+                        width: 52px;
+                        height: 52px;
+                        border-radius: 26px;
                     }
                 }
 
@@ -436,7 +440,7 @@
                         font-size: 18px;
                         color: #333;
                         margin: 0 0 10px 0;
-                        line-height: 24px;
+                        line-height: 1.2;
                         font-weight: 500;
                     }
 
@@ -444,7 +448,12 @@
                         font-size: 14px;
                         color: #666;
                         line-height: 1.6;
-                        margin-bottom: 15px;
+                        margin-bottom: 12px;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        display: -webkit-box;
+                        -webkit-box-orient: vertical;
+                        -webkit-line-clamp: 2;
                     }
 
                     .ai-modal {
@@ -457,16 +466,17 @@
                         > li {
                             padding: 4px 12px;
                             background: #f5f5f5;
-                            border-radius: 15px;
+                            border-radius: 12px;
                             font-size: 13px;
                             color: #666;
                             border: none;
                             margin: 0;
+                        }
+                    }
 
-                            &:hover {
-                                background: #e8e8e8;
-                                color: #333;
-                            }
+                    .ai-btn {
+                        button + button {
+                            margin-left: 12px;
                         }
                     }
                 }
@@ -474,7 +484,6 @@
 
         }
 
-        // 机器人
         .ai-tabs {
             position: absolute;
             top: 0;
@@ -493,12 +502,32 @@
                 height: 0;
                 flex: 1;
 
+                .ivu-tabs-tabpane {
+                    height: 100%;
+                }
+
                 .aibot-warp {
                     position: relative;
                     height: 100%;
                 }
             }
         }
+
+        &.ai-body {
+            @media (max-width: 500px) {
+                padding: 8px 0;
+                .ai-list {
+                    > li {
+                        border: 0;
+                        border-top: 1px solid #eeeeee;
+                        border-radius: 0;
+                        &:hover {
+                            box-shadow: none;
+                        }
+                    }
+                }
+            }
+        }
     }
 }