搜索框

src/views/chat/components/avatar.vue

@@ -3,19 +3,7 @@
     <div class="-1m1-20px"  v-if="!inversion">
       <img class="w-120px h-120px" src="@/assets/images/aiball.png" alt="" srcset="" />
     </div>
-    <img v-else class="w-50px h-50px object-contain" :src="defaultAvatar" />
+    <img v-else class="w-50px h-50px object-contain rounded-full" :src="avatar" />
-    <!-- <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 32 32"
-      aria-hidden="true"
-      width="1em"
-      height="1em"
-    >
-      <path
-        d="M29.71,13.09A8.09,8.09,0,0,0,20.34,2.68a8.08,8.08,0,0,0-13.7,2.9A8.08,8.08,0,0,0,2.3,18.9,8,8,0,0,0,3,25.45a8.08,8.08,0,0,0,8.69,3.87,8,8,0,0,0,6,2.68,8.09,8.09,0,0,0,7.7-5.61,8,8,0,0,0,5.33-3.86A8.09,8.09,0,0,0,29.71,13.09Zm-12,16.82a6,6,0,0,1-3.84-1.39l.19-.11,6.37-3.68a1,1,0,0,0,.53-.91v-9l2.69,1.56a.08.08,0,0,1,.05.07v7.44A6,6,0,0,1,17.68,29.91ZM4.8,24.41a6,6,0,0,1-.71-4l.19.11,6.37,3.68a1,1,0,0,0,1,0l7.79-4.49V22.8a.09.09,0,0,1,0,.08L13,26.6A6,6,0,0,1,4.8,24.41ZM3.12,10.53A6,6,0,0,1,6.28,7.9v7.57a1,1,0,0,0,.51.9l7.75,4.47L11.85,22.4a.14.14,0,0,1-.09,0L5.32,18.68a6,6,0,0,1-2.2-8.18Zm22.13,5.14-7.78-4.52L20.16,9.6a.08.08,0,0,1,.09,0l6.44,3.72a6,6,0,0,1-.9,10.81V16.56A1.06,1.06,0,0,0,25.25,15.67Zm2.68-4-.19-.12-6.36-3.7a1,1,0,0,0-1.05,0l-7.78,4.49V9.2a.09.09,0,0,1,0-.09L19,5.4a6,6,0,0,1,8.91,6.21ZM11.08,17.15,8.38,15.6a.14.14,0,0,1-.05-.08V8.1a6,6,0,0,1,9.84-4.61L18,3.6,11.61,7.28a1,1,0,0,0-.53.91ZM12.54,14,16,12l3.47,2v4L16,20l-3.47-2Z"
-        fill="currentColor"
-      />
-    </svg> -->
   </div>
 </template>
 <script setup>
@@ -31,6 +19,6 @@ const props = defineProps({
 })
 
 const avatar = computed(() => {
-  return userInfo?.userInfo?.avatar || defaultAvatar;
+  return userInfo?.userData?.avatar || defaultAvatar;
 })
 </script>

src/views/chat/components/slider.vue

@@ -2,7 +2,10 @@
   <div
     class="w-74px border-t-7px border-[#3662FE] bg-gradient-to-b to-[#101011] from-[#414548] h-full flex items-center pt-26px flex-col"
   >
-    <div class="h-full flex items-center pt-26px flex-col" @click.prevent.stop="show = true">
+    <div
+      class="h-full flex items-center pt-26px flex-col"
+      @click.prevent.stop="show = true"
+    >
       <SvgIcon class="text-white text-35px mb-46px" name="dp"></SvgIcon>
       <SvgIcon class="text-white text-35px mb-46px" name="xx"></SvgIcon>
       <SvgIcon
@@ -21,7 +24,7 @@
         <div
           class="bg-gradient-to-b to-[#101011] from-[#414548] flex-1 border-t-7px border-[#3662FE] flex flex-col items-center overflow-y-auto"
         >
-          <SilderBtn  @click="openTemplateModal">
+          <SilderBtn @click="openTemplateModal">
             <template #icon>
               <SvgIcon class="text-white text-35px" name="dp"></SvgIcon>
             </template>
@@ -30,6 +33,32 @@
           <van-divider
             class="text-[#414548] w-full !my-0 opacity-25"
           ></van-divider>
+          <div class="w-full">
+            <van-field
+              class="cu-field h-80px !px-30px"
+              v-model="filterValue"
+              right-icon="search"
+              autocomplete="off"
+              placeholder="搜索模版"
+              @click-right-icon="onFilter"
+            />
+          </div>
+          <van-divider
+            class="text-[#414548] w-full !my-0 opacity-25"
+          ></van-divider>
+          <div class="w-full px-8px py-18px">
+            
+            <div class="grid grid-cols-2 gap-y-10px gap-x-14px" v-if="filterList.length">
+              <TemplateItem
+                v-for="(item, i) in filterList"
+                :key="i"
+                :data="item"
+              />
+            </div>
+            <div v-else class="h-100px flex items-center justify-center">
+              <div class="text-22px">暂无搜索结果</div>
+            </div>
+          </div>
           <SilderBtn>
             <template #icon>
               <SvgIcon class="text-white text-35px" name="xx"></SvgIcon>
@@ -125,8 +154,27 @@ const pageNum = ref(1)
 
 const open = ref(false)
 
+const filterValue = ref('')
+
 const templates = ref([])
 
+const filterList = ref([])
+
+function onFilter() {
+  if(!filterValue.value){
+    filterList.value = []
+    return
+  }
+  http.get('/api/prompt-templates',{
+    params:{
+      search:filterValue.value,
+      per_page: 2000,
+    }
+  }).then(res=>{
+    filterList.value = res.data
+  })
+}
+
 function openTemplateModal() {
   open.value = true
 }
@@ -167,4 +215,19 @@ onMounted(() => {
   // background: linear-gradient(0deg, #101011 0%, #414548 100%);
   background: transparent;
 }
+.cu-field{
+  background-color: transparent;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  input{
+    color: white;
+    font-size: 27px;
+    &::placeholder{
+      color: #707070;
+      font-size: 27px;
+    }
+  }
+}
 </style>

src/views/chat/components/template-modal.vue

@@ -7,13 +7,15 @@
     :style="{ background: '#16171890' }"
     wrapClassName="template-modal"
   >
-    <div class="text-white py-48px w-680px border border-[#5E6369] rounded-6px relative">
+    <div
+      class="text-white py-48px w-680px border border-[#5E6369] rounded-6px relative"
+    >
       <div class="absolute right-30px top-30px">
         <SvgIcon
           @click="handleClose"
           class="text-white text-50px cursor-pointer text-30px"
           name="qx"
-          ></SvgIcon>
+        ></SvgIcon>
       </div>
       <div class="flex items-center justify-center">
         <img
@@ -27,7 +29,7 @@
       <div class="mt-30px text-22px opacity-40 text-center">
         Haitu AIGC Writing Inspiration Complete Works
       </div>
-      <div class="my-40px flex items-center justify-center">
+      <div class="my-20px flex items-center justify-center">
         <van-popover v-model:show="popovershow" class="cu-popover" overlay>
           <div class="w-600px">
             <van-cascader
@@ -49,7 +51,21 @@
           </template>
         </van-popover>
       </div>
-      <div class="overflow-x-scroll flex px-34px" ref="scrollbarRef">
+      <div class="flex items-center justify-center w-full my-20px">
+        <van-field
+        class="h-72px cu-field-se !w-600px"
+          v-model="filterValue"
+          right-icon="search"
+          autocomplete="off"
+          placeholder="搜索模版"
+          @click-right-icon="onFilter"
+        />
+      </div>
+      <div
+        v-if="templates.length"
+        class="overflow-x-scroll flex px-34px"
+        ref="scrollbarRef"
+      >
         <TemplateCard
           class="mr-25px"
           v-for="(item, i) in templates"
@@ -57,6 +73,9 @@
           :data="item"
         ></TemplateCard>
       </div>
+      <div v-else class="h-100px flex items-center justify-center">
+        <div class="text-22px">暂无搜索结果</div>
+      </div>
       <div class="flex justify-center mt-20px">
         <SvgIcon
           :class="{ 'opacity-40': pageNum <= 1 }"
@@ -84,11 +103,13 @@ export default defineComponent({
     ScrollContainer,
     TemplateCard,
   },
-  setup(props, { attrs,emit }) {
+  setup(props, { attrs, emit }) {
     const pageNum = ref(1)
 
     const scrollbarRef = ref(null)
 
+    const filterValue = ref('')
+
     const templates = ref([])
 
     const popovershow = ref(false)
@@ -129,7 +150,7 @@ export default defineComponent({
     const onFinish = ({ selectedOptions }) => {
       fieldValue.value = selectedOptions.map((option) => option.text).join('/')
       popovershow.value = false
-      console.log(value.value);
+      console.log(value.value)
       changeCategories()
     }
 
@@ -145,10 +166,16 @@ export default defineComponent({
       }
     }
 
+    function onFilter() {
+      pageNum.value = 1
+      getTemplates()
+    }
+
     const getTemplates = () => {
       http
         .get('/api/prompt-templates', {
           params: {
+            search: filterValue.value,
             per_page: 10,
             page: pageNum.value,
             category_id: value.value,
@@ -207,6 +234,8 @@ export default defineComponent({
       changeCategories,
       fieldValue,
       onFinish,
+      filterValue,
+      onFilter,
     }
   },
 })