优化下来效果

ais_search/web/src/views/ai-search/ai-search.vue

@@ -91,15 +91,16 @@
             <div class="result">
               <template v-if="askType === 'zcfg'">
                 <div class="tabs" style="position: relative">
-                  <div
-                    :class="`tab${activeTab === t.key ? ' tab-active' : ''}`"
-                    v-for="t in tabs"
-                    :key="t.key"
-                    @click="changeTab(t.key)"
-                  >
-                    <div class="title">{{ t.name }}</div>
-                    <div class="bottom"></div>
-                  </div>
+                  <template v-for="(t,index) in tabs" :key="index">
+                    <div
+                      :class="`tab${activeTab === t.key ? ' tab-active' : ''}`"
+                      v-if="t.key === activeTab"
+                      @click="changeTab(t.key)"
+                    >
+                      <div class="title">{{ t.name }}</div>
+                      <div class="bottom"></div>
+                    </div>
+                  </template>
                   <div
                     class="scope-type"
                     style="
@@ -120,14 +121,6 @@
                       <a-radio value="1">深入</a-radio>
                       <a-radio value="2">研究</a-radio>
                     </a-radio-group>
-                    <div class="ds-box">
-                      <div @click="onChange('1')" :class="{active: dsChecked === true}">
-                        <i class="iconfont icon-deepsee"></i>
-                      </div>
-                      <div @click="onChange('0')" :class="{active: dsChecked === false}">
-                        <i class="iconfont icon-tongyi"></i>
-                      </div>
-                    </div>
                   </div>
                 </div>
                 <div class="result-view">
@@ -508,16 +501,15 @@ const indicator = h(LoadingOutlined, {
   spin: true
 });
 const props = defineProps({
-  searchType: '',
   askType: {
     type: String,
     default: 'zcfg'
   }
 });
-
+const {query} = useRoute()
 const answerType = ref('0');
 const dsChecked = ref(true);
-const scope = ref('net');
+const scope = ref(query.scope);
 watch(
   () => router.currentRoute.value,
   (value) => {
@@ -550,15 +542,11 @@ watch(
   }
 );
 
-watch(props.searchType, (val) => {
-  activeTab.value = val;
-});
-
 const question = ref('国有土地的使用方式有哪些？');
 const followQuestion = ref('');
 const statusText = ref('检索中');
 const activeIndex = ref(0);
-const activeTab = ref(props.searchType);
+const activeTab = ref(query.scope);
 let ctr = null;
 const aiTextAreaRef = ref(null);
 const searchRef = ref(null);
@@ -646,9 +634,9 @@ const streamToAnswer = () => {
 };
 
 const tabs = [
-  { key: 'knowledge', name: '知识库' }
+  { key: 'knowledge', name: '知识库' },
   // { key: 'paper', name: '学术' },
-  // { key: 'net', name: '全网' }
+  { key: 'net', name: '全网' }
 ];
 
 const steps = ref([
@@ -1097,7 +1085,6 @@ const quest = async (isFllow) => {
   };
   activeIndex.value = 0;
   getQuestionKeyWords();
-
   if (activeTab.value === 'net') {
     questionUrl = '/chat/bing_chat';
   } else {

ais_search/web/src/views/home/home.vue

@@ -24,12 +24,16 @@
               </div>
             </div>
             <div class="ds-box">
-              <div @click="dsChange('1')" :class="{active: isDeepSeek === '1'}">
+              <a-select v-model:value="scope.name" class="select">
+                <a-select-option value="knowledge">DeepSeek R1</a-select-option>
+                <a-select-option value="net">联网搜索</a-select-option>
+              </a-select>
+              <!-- <div @click="dsChange('1')" :class="{active: isDeepSeek === '1'}">
                 <i class="iconfont icon-deepsee"></i>
               </div>
               <div @click="dsChange('0')" :class="{active: isDeepSeek === '0'}">
                 <i class="iconfont icon-tongyi"></i>
-              </div>
+              </div> -->
             </div>
           </div>
           <div class="search-input">
@@ -41,7 +45,6 @@
             />
             <a-select v-model:value="scope.name" class="select" v-if="false">
               <a-select-option value="knowledge">知识库</a-select-option>
-              <a-select-option value="paper">学术</a-select-option>
               <a-select-option value="net">全网</a-select-option>
             </a-select>
             <a-select v-model:value="scopeQt.name" class="select" v-if="typeIndex == 1">
@@ -50,18 +53,9 @@
             <a-select v-model:value="scopeQt.name" class="select" v-if="typeIndex == 2">
               <a-select-option value="title">关键词</a-select-option>
             </a-select>
-            <div class="line" v-if="false"></div>
             <button class="search-btn" @click="search" v-login-required>搜索</button>
           </div>
           <div class="scopes">
-            <div class="scope scope-name" v-if="false">
-              <div class="label">搜索范围：</div>
-              <a-radio-group v-model:value="scope.name" name="radioGroup">
-                <a-radio value="knowledge">知识库</a-radio>
-                <a-radio value="paper">学术</a-radio>
-                <a-radio value="net">全网</a-radio>
-              </a-radio-group>
-            </div>
 
             <div class="questions" v-if="typeIndex == 0">
               <slider-card-up-down @ask="jumpToSearch" />
@@ -209,10 +203,12 @@ const dsChange = (type) => {
           display: flex;
           margin-bottom: 10px;
           justify-content: space-between;
+          position: relative;
           >.scope-type-box {
             display: flex;
             background: #FFFFFF;
             border-radius: 20px;
+            height: 35px;
             >.item {
               color: #4A4F55;
               border-radius: 18px;
@@ -228,55 +224,32 @@ const dsChange = (type) => {
               }
             }
           }
-          .ds-box {
-            display: flex;
-            height: 36px;
-            align-items: center;
+          >.ds-box {
             border: 1px solid #E3E4E4;
             background: #f0f0f0;
             border-radius: 5px;
-            overflow: hidden;
-            >div {
-              height: 100%;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              width: 108px;
-              cursor: pointer;
-              &.active {
-                background: #fff;
-                &:nth-child(1) {
-                  .iconfont {
-                    color: #4f6bfe;
-                  }
-                }
-                &:nth-child(2) {
-                  .iconfont {
-                    color: #605BEC;
-                  }
-                }
-              }
-              .iconfont {
-                color: #898D93;
-                margin-top: 2px;
-              }
-              &:nth-child(1) {
-                .iconfont {
-                  font-size: 16px;
-                }
-              }
-              &:nth-child(2) {
-                .iconfont {
-                  font-size: 22px;
-                }
+            position: absolute;
+            right: 0px;
+            bottom: 0px;
+            .select {
+              width: 135px;
+              height: 36px;
+              border-radius: 8px 8px 8px 8px;
+              :deep(.ant-select-selector) {
+                border: none;
+                height: 36px;
+                line-height: 36px;
+                box-shadow: none;
               }
-            }
-            .sw {
-              :deep(.ant-switch) {
-                background-color: #eaeaea;
+              :deep(.ant-select-selection-item) {
+                line-height: 36px;
+                font-family: PingFang SC, PingFang SC;
+                font-size: 14px;
+                color: #333b46;
+                text-align: center;
               }
-              :deep(.ant-switch-handle::before) {
-                background-color: #fff;
+              :deep(.ant-select-arrow) {
+                margin-left: 10px;
               }
             }
           }
@@ -297,7 +270,6 @@ const dsChange = (type) => {
             border: 2px solid #0E83F8;
             padding: 0 21px 0px 21px;
             font-family: PingFang SC, PingFang SC;
-
             &:hover,
             &:focus,
             &:focus-visible {
@@ -307,38 +279,6 @@ const dsChange = (type) => {
               //box-shadow: 2px 2px 2px 2px rgba(14, 131, 248, 0.4);
             }
           }
-          .select {
-            height: 62px;
-            position: absolute;
-            left: 2px;
-            border-radius: 8px 8px 8px 8px;
-            width: 100px;
-            top: 2px;
-            :deep(.ant-select-selector) {
-              border: none;
-              height: 62px;
-              line-height: 62px;
-              box-shadow: none;
-            }
-            :deep(.ant-select-selection-item) {
-              line-height: 62px;
-              font-family: PingFang SC, PingFang SC;
-              font-size: 16px;
-              color: #333b46;
-              text-align: center;
-            }
-            :deep(.ant-select-arrow) {
-              inset-inline-end: 20px;
-            }
-          }
-          .line {
-            width: 1px;
-            height: 30px;
-            position: absolute;
-            top: 18px;
-            left: 101px;
-            border: 1px solid #e1e5eb;
-          }
           .search-btn {
             width: 130px;
             height: 52px;