feat: 1.封装多行标签展开收起组件； 2.首页开发

src/views/home/index.vue

@@ -1,7 +1,8 @@
-<script lang="jsx">
+<script lang="tsx">
 import HistoryConversationDrawer from './components/history-conversation-drawer';
 import { Sender } from 'ant-design-x-vue';
 import { message } from 'ant-design-vue';
+import ExpandableTags from '@/components/expandable-tags';
 
 import { useSharedDataStore } from '@/stores/modules/share-data';
 
@@ -17,7 +18,30 @@ export default {
     };
 
     const handleSearch = () => {
-      message.info('handleSearch');
+      message.info('handleSearch----' + searchValue.value);
+    };
+
+    const tagList = [
+      '人工智能',
+      '人工智能与应用',
+      '行业分析与市场数据',
+      '标签标签标签标签标签标签标签',
+      '标签标签标签标签标签标签标签',
+      '标签标签标签标签标签标签标签',
+      '标签标签标签标签标签标签标签',
+      '标签A',
+      '啊啊啊',
+      '宝宝贝贝',
+      '微信',
+      '吧啊啊',
+      '哦哦哦哦哦哦哦哦',
+      '人工智能',
+      '人工智能与应用',
+    ];
+
+    const handleTagClick = (tag: string) => {
+      searchValue.value = tag;
+      handleSearch();
     };
 
     onMounted(() => {
@@ -56,7 +80,8 @@ export default {
                 </div>
               )}
             />
-            <p class="cts">可以试试这样下发任务：</p>
+            <p class="cts mb-6px">可以试试这样下发任务：</p>
+            <ExpandableTags tags={tagList} clickable onTagClick={handleTagClick} />
           </div>
         </div>
 

src/views/home/style.scss

@@ -31,6 +31,12 @@
           linear-gradient(113deg, #6d4cfe 0%, #b93bf0 100%);
       }
     }
+    :deep(.expandable-tags-container) {
+      .tag-list {
+        row-gap: 6px;
+        column-gap: 12px;
+      }
+    }
   }
   .history-conversation-btn {
     border-radius: 8px 0 0 8px;