From 8b3035aae7a6126f8d65f65200a01d7e2bf4deab Mon Sep 17 00:00:00 2001
From: ihzero <ihzero@163.com>
Date: Thu, 17 Aug 2023 21:31:31 +0800
Subject: [PATCH] =?UTF-8?q?ai=E5=8A=A9=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/tip-icon-blue.png          | Bin 0 -> 2618 bytes
 src/icons/svg/ic_copy.svg                    |   9 +
 src/views/chat/components/slider.vue         |  10 +-
 src/views/chat/components/template-card.vue  |  22 +-
 src/views/chat/components/template-modal.vue | 205 +++++++++++++------
 5 files changed, 171 insertions(+), 75 deletions(-)
 create mode 100644 src/assets/images/tip-icon-blue.png
 create mode 100644 src/icons/svg/ic_copy.svg

diff --git a/src/assets/images/tip-icon-blue.png b/src/assets/images/tip-icon-blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..06ba9fdd1ad37e08784df5fcc4033722cf7d6936
GIT binary patch
literal 2618
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

literal 0
HcmV?d00001

diff --git a/src/icons/svg/ic_copy.svg b/src/icons/svg/ic_copy.svg
new file mode 100644
index 0000000..d328fa5
--- /dev/null
+++ b/src/icons/svg/ic_copy.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1691821825409" class="icon" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" p-id="5851" xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="200" height="200">
+  <path
+    d="M640 160 256 160C220.64 160 192 188.64 192 224L192 672 256 672 256 224 640 224 640 160 640 160ZM736 288 384 288C348.64 288 320 316.672 320 352L320 800C320 835.328 348.64 864 384 864L736 864C771.328 864 800 835.328 800 800L800 352C800 316.672 771.328 288 736 288L736 288ZM384 352 736 352 736 800 384 800 384 352Z"
+    fill="currentColor" p-id="5852"></path>
+</svg>
\ No newline at end of file
diff --git a/src/views/chat/components/slider.vue b/src/views/chat/components/slider.vue
index 22af1e3..ab8125f 100644
--- a/src/views/chat/components/slider.vue
+++ b/src/views/chat/components/slider.vue
@@ -14,14 +14,14 @@
       <SvgIcon class="text-white text-40px mb-46px" name="人工客服"></SvgIcon>
       <SvgIcon class="text-white text-40px mb-46px" name="疑问"></SvgIcon>
     </div>
+
     <van-popup v-model:show="show" position="left" class="slider-class">
       <div class="w-479px h-full flex flex-col">
         <div class="h-100px"></div>
         <div
           class="bg-gradient-to-b to-[#101011] from-[#414548] flex-1 border-t-7px border-[#3662FE] flex flex-col items-center"
         >
-          <!-- @click="openTemplateModal" -->
-          <SilderBtn>
+          <SilderBtn  @click="openTemplateModal">
             <template #icon>
               <SvgIcon class="text-white text-35px" name="dp"></SvgIcon>
             </template>
@@ -56,7 +56,7 @@
             </div>
           </div>
 
-          <SilderBtn>
+          <SilderBtn @click="handleNewChat">
             <template #icon>
               <SvgIcon
                 class="text-white text-35px transform rotate-45"
@@ -97,6 +97,8 @@
         </div>
       </div>
     </van-popup>
+
+    <TemplateModal v-model:show="open" />
   </div>
 </template>
 
@@ -106,7 +108,7 @@ import TemplateItem from './template-item.vue'
 import GroupItem from './group-item.vue'
 import ScrollContainer from '@/components/ScrollContainer/index.vue'
 
-// import TemplateModal from './template-modal.vue'
+import TemplateModal from './template-modal.vue'
 import { ref, computed, onMounted } from 'vue'
 import { useChat } from '@/stores'
 import http from '@/io/request'
diff --git a/src/views/chat/components/template-card.vue b/src/views/chat/components/template-card.vue
index bffaeec..91615c0 100644
--- a/src/views/chat/components/template-card.vue
+++ b/src/views/chat/components/template-card.vue
@@ -1,25 +1,27 @@
 <template>
-  <div class="py-3 px-4 bg-[#414548] w-79 h-122 rounded-4px">
+  <div
+    class="py-18px px-24px bg-[#414548] bg-opacity-40 w-431px h-665px rounded-2px flex-none box-content overflow-hidden flex flex-col"
+  >
     <div class="flex items-center">
-      <div class="flex-1 text-xl">{{ data.title }}</div>
+      <div class="flex-1 text-27px">{{ data.title }}</div>
       <div
-        class="bg-[#3662FE] w-7 h-7 rounded-4px flex items-center justify-center"
+        class="bg-[#3662FE] w-40px h-40px rounded-4px flex items-center justify-center"
       >
         <SvgIcon
           @click="onCopy"
-          class="text-white text-lg cursor-pointer"
+          class="text-white text-20px cursor-pointer"
           name="ic_copy"
         ></SvgIcon>
       </div>
     </div>
-    <div class="mt-8 text-base leading-24px">
+    <div class="mt-56px text-22px leading-33px flex-1 overflow-y-auto">
       {{ data.content }}
     </div>
   </div>
 </template>
 <script setup>
 import { copyToClip } from '@/utils/copy'
-import { message } from 'ant-design-vue'
+import { showToast } from 'vant'
 import { getCurrentInstance } from 'vue'
 const props = defineProps({
   data: {
@@ -28,16 +30,16 @@ const props = defineProps({
   },
 })
 
-const { proxy } = getCurrentInstance();
+const { proxy } = getCurrentInstance()
 
 const onCopy = () => {
   copyToClip(props.data.content)
     .then((res) => {
-      proxy.$mitt.emit('temp-copy', props.data.content);
-      message.success('复制成功～')
+      proxy.$mitt.emit('temp-copy', props.data.content)
+      showToast('复制成功～')
     })
     .catch(() => {
-      message.error('复制失败～')
+      showToast('复制失败～')
     })
 }
 </script>
diff --git a/src/views/chat/components/template-modal.vue b/src/views/chat/components/template-modal.vue
index ebd6600..3bab271 100644
--- a/src/views/chat/components/template-modal.vue
+++ b/src/views/chat/components/template-modal.vue
@@ -1,55 +1,78 @@
 <template>
-  <a-modal
+  <van-popup
     v-bind="getBindValue"
     centered
     :title="null"
     :footer="null"
-    width="85.81rem"
+    :style="{ background: '#16171890' }"
     wrapClassName="template-modal"
   >
-    <div class="text-white">
+    <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>
+      </div>
       <div class="flex items-center justify-center">
         <img
-          class="w-10.5"
+          class="w-31px"
           src="@/assets/images/tip-icon-blue.png"
           alt=""
           srcset=""
         />
-        <div class="text-2xl">海兔AIGC提示模板大全</div>
+        <div class="text-27px">海兔AIGC提示模板大全</div>
       </div>
-      <div class="mt-2.25 opacity-40 text-center">
+      <div class="mt-30px text-22px opacity-40 text-center">
         Haitu AIGC Writing Inspiration Complete Works
       </div>
-      <div class="my-6 flex items-center justify-center">
-        <a-cascader
-          :allowClear="false"
-          class="cu-cascader w-100"
-          :fieldNames="{ label: 'title', value: 'id' }"
-          v-model:value="value"
-          :options="options"
-          placeholder="请选择"
-          @change="changeCategories"
-          popupClassName="cu-cascader-popup"
-        />
+      <div class="my-40px flex items-center justify-center">
+        <van-popover v-model:show="popovershow" class="cu-popover" overlay>
+          <div class="w-600px">
+            <van-cascader
+              @finish="onFinish"
+              v-model="value"
+              title=""
+              @close="popovershow = false"
+              :options="options"
+            />
+          </div>
+          <template #reference>
+            <van-field
+              readonly
+              :border="false"
+              class="h-72px cu-field-se !w-600px"
+              v-model="fieldValue"
+              placeholder="请选择"
+            ></van-field>
+          </template>
+        </van-popover>
       </div>
-      <div
-        ref="scrollbarRef"
-        @scroll="handleScroll"
-        class="max-h-36.5rem overflow-hidden overflow-y-auto"
-      >
-        <div
-          class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
-        >
-          <TemplateCard
-            class="mx-auto"
-            v-for="(item, i) in templates"
-            :key="i"
-            :data="item"
-          ></TemplateCard>
-        </div>
+      <div class="overflow-x-scroll flex px-34px" ref="scrollbarRef">
+        <TemplateCard
+          class="mr-25px"
+          v-for="(item, i) in templates"
+          :key="i"
+          :data="item"
+        ></TemplateCard>
+      </div>
+      <div class="flex justify-center mt-20px">
+        <SvgIcon
+          :class="{ 'opacity-40': pageNum <= 1 }"
+          @click="handleP"
+          class="text-white text-50px cursor-pointer mx-60px"
+          name="right-arrow"
+        ></SvgIcon>
+        <SvgIcon
+          :class="{ 'opacity-40': !isMore }"
+          @click="handleN"
+          class="text-white text-50px cursor-pointer transform rotate-180 mx-60px"
+          name="right-arrow"
+        ></SvgIcon>
       </div>
     </div>
-  </a-modal>
+  </van-popup>
 </template>
 <script>
 import { ref, computed, unref, defineComponent, onMounted, nextTick } from 'vue'
@@ -61,18 +84,22 @@ export default defineComponent({
     ScrollContainer,
     TemplateCard,
   },
-  setup(props, { attrs }) {
+  setup(props, { attrs,emit }) {
     const pageNum = ref(1)
 
     const scrollbarRef = ref(null)
 
     const templates = ref([])
 
+    const popovershow = ref(false)
+
     const options = ref([])
 
-    const value = ref([])
+    const value = ref('')
 
-    const isLoading = ref(false)
+    const fieldValue = ref('')
+
+    const isMore = ref(true)
 
     const modelOpen = ref(false)
 
@@ -87,56 +114,73 @@ export default defineComponent({
       return attr
     })
 
+    const handleClose = () => {
+      emit('update:show', false)
+    }
+
     const getCategories = () => {
       http.get('/api/prompt-categories').then((res) => {
+        changeId2(res, 'id', 'value')
+        changeId2(res, 'title', 'text')
         options.value = res
       })
     }
 
+    const onFinish = ({ selectedOptions }) => {
+      fieldValue.value = selectedOptions.map((option) => option.text).join('/')
+      popovershow.value = false
+      console.log(value.value);
+      changeCategories()
+    }
+
+    function changeId2(objAry, key, newkey) {
+      if (objAry != null) {
+        objAry.forEach((item) => {
+          Object.assign(item, {
+            [newkey]: item[key],
+          })
+          delete item[key]
+          changeId2(item.children, key, newkey)
+        })
+      }
+    }
+
     const getTemplates = () => {
       http
         .get('/api/prompt-templates', {
           params: {
-            per_page: 20,
+            per_page: 10,
             page: pageNum.value,
-            category_id: value.value[value.value.length - 1] ?? null,
+            category_id: value.value,
           },
         })
         .then((res) => {
-          if (pageNum.value == 1) templates.value = []
-          templates.value = templates.value.concat(res.data)
-          pageNum.value++
-          isLoading.value = false
+          templates.value = res.data
+          isMore.value = true
+          scrollbarRef.value.scrollLeft = 0
           if (templates.value.length >= res.total) {
-            isLoading.value = true
+            isMore.value = false
           }
         })
-        .catch((e) => {
-          isLoading.value = true
-        })
+        .catch((e) => {})
     }
 
     const changeCategories = async (e) => {
       pageNum.value = 1
-      isLoading.value = false
       getTemplates()
       await nextTick()
-      scrollbarRef.value.scrollTop = 0
     }
 
-    const handleScroll = (e) => {
-      if (isLoading.value) return
-      const container = scrollbarRef.value
-      const scrollHeight = container.scrollHeight
-      const scrollTop = container.scrollTop
-      const clientHeight = container.clientHeight
-      const extra = 20
-      if (scrollTop < 100) return
+    const handleP = () => {
+      if (pageNum.value == 1) return
+      pageNum.value--
+      getTemplates()
+    }
 
-      if (scrollHeight - scrollTop - extra <= clientHeight) {
-        isLoading.value = true
-        // loadMore()
-      }
+    const handleN = () => {
+      if (!isMore.value) return
+      pageNum.value++
+      getTemplates()
     }
 
     const loadMore = () => {
@@ -149,13 +193,20 @@ export default defineComponent({
     })
 
     return {
+      popovershow,
       value,
       options,
       getBindValue,
       templates,
       scrollbarRef,
-      handleScroll,
+      handleN,
+      handleP,
+      isMore,
+      pageNum,
+      handleClose,
       changeCategories,
+      fieldValue,
+      onFinish,
     }
   },
 })
@@ -219,4 +270,36 @@ export default defineComponent({
     color: white;
   }
 }
+.cu-field-se {
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  background-color: #414548;
+  input {
+    color: white !important;
+  }
+}
+.cu-popover {
+  .van-popover__arrow {
+    color: #27292b !important;
+  }
+  .van-cascader__options {
+    height: 500px;
+  }
+  .van-popover__content {
+    background: #27292b;
+  }
+  .van-tabs__nav {
+    background: #27292b;
+  }
+  .van-cascader__option {
+    color: white;
+    &:active {
+      background-color: transparent;
+    }
+  }
+  .van-cascader__tab {
+    color: white;
+  }
+}
 </style>