支持获取模板传入参数

src/utils/request.ts

@@ -40,16 +40,16 @@ service.interceptors.response.use(
                 duration: 5 * 1000,
                 showClose: true,
             })
-            if (res.httpCode === 403 || res.httpCode === 401 || res.httpCode === 50014) {
-                // to re-login
-                ElMessageBox.confirm('您已注销，可以取消以留在此页，或重新登录', '确认？', {
-                    confirmButtonText: '重新登录',
-                    cancelButtonText: '取消',
-                    type: 'warning'
-                }).then(() => {
-                    location.reload()
-                })
-            }
+            // if (res.httpCode === 403 || res.httpCode === 401 || res.httpCode === 50014) {
+            //     // to re-login
+            //     ElMessageBox.confirm('您已注销，可以取消以留在此页，或重新登录', '确认？', {
+            //         confirmButtonText: '重新登录',
+            //         cancelButtonText: '取消',
+            //         type: 'warning'
+            //     }).then(() => {
+            //         location.reload()
+            //     })
+            // }
             return Promise.reject(res)
         } else {
             return res

src/views/Editor/CanvasCenter/index.vue

@@ -54,8 +54,16 @@ const getTemplateDetail = async (pk: number) => {
   //     })
   //   }
   // }
+
+  //todo 传参测试
+  const templateParams = {
+    backgroundWidth: 250.0,
+    backgroundHeight: 300.0,
+    backgroundColor: 'rgba(200, 100, 100, 1)'
+  }
   const params = {
-    id: pk
+    id: pk,
+    params: JSON.stringify(templateParams)
   }
   const res = await getDesignTemplateEdit(params)
 

src/views/Editor/CanvasRight/CanvasStylePanel/index.vue

@@ -7,38 +7,38 @@
       <el-row class="size-row">
         <el-col :span="11">
           <el-input
-            v-model="canvasWidth"
-            :value="Math.round(canvasWidth * 100) / 100"
-            @change="changeTemplateWidth"
-            oninput="value=value.replace(/[^\d.]/g,'')"
+              v-model="canvasWidth"
+              :value="pageSizeWidth"
+              @change="changeTemplateWidth"
+              oninput="value=value.replace(/[^\d.]/g,'')"
           >
             <template #prepend>{{ t("style.w") }}</template>
           </el-input>
         </el-col>
         <el-col :span="2" class="fixed-ratio">
           <el-tooltip
-            effect="dark"
-            placement="top"
-            :content="t('style.unlockAspectRatio')"
-            v-if="isFixed"
+              effect="dark"
+              placement="top"
+              :content="t('style.unlockAspectRatio')"
+              v-if="isFixed"
           >
-            <IconLock class="icon-btn" @click="changeFixedRatio(false)" />
+            <IconLock class="icon-btn" @click="changeFixedRatio(false)"/>
           </el-tooltip>
           <el-tooltip
-            effect="dark"
-            placement="top"
-            :content="t('style.lockAspectRatio')"
-            v-else
+              effect="dark"
+              placement="top"
+              :content="t('style.lockAspectRatio')"
+              v-else
           >
-            <IconUnlock class="icon-btn" @click="changeFixedRatio(true)" />
+            <IconUnlock class="icon-btn" @click="changeFixedRatio(true)"/>
           </el-tooltip>
         </el-col>
         <el-col :span="11">
           <el-input
-            v-model="canvasHeight"
-            :value="Math.round(canvasHeight * 100) / 100"
-            @change="changeTemplateHeight"
-            oninput="value=value.replace(/[^\d.]/g,'')"
+              v-model="canvasHeight"
+              :value="pageSizeHeight"
+              @change="changeTemplateHeight"
+              oninput="value=value.replace(/[^\d.]/g,'')"
           >
             <template #prepend>{{ t("style.h") }}</template>
           </el-input>
@@ -49,54 +49,54 @@
       <el-row>
         <el-col :span="11">
           <el-input
-            v-model="clip"
-            @change="changeTemplateClip"
-            oninput="value=value.replace(/[^\d]/g,'')"
-            :disabled="unitMode === 1"
+              v-model="clip"
+              @change="changeTemplateClip"
+              oninput="value=value.replace(/[^\d]/g,'')"
+              :disabled="unitMode === 1"
           >
             <template #prepend>
               <el-tooltip
-                placement="top"
-                :hide-after="0"
-                :content="t('style.bleedingLine')"
+                  placement="top"
+                  :hide-after="0"
+                  :content="t('style.bleedingLine')"
               >
-                <IconCuttingOne />
+                <IconCuttingOne/>
               </el-tooltip>
             </template>
           </el-input>
         </el-col>
         <el-col :span="2" class="fixed-ratio">
           <el-tooltip
-            effect="dark"
-            placement="top"
-            :content="t('style.fillet')"
-            v-if="isRound"
+              effect="dark"
+              placement="top"
+              :content="t('style.fillet')"
+              v-if="isRound"
           >
-            <IconRound class="icon-btn" @click="changeWorkRound(false)" />
+            <IconRound class="icon-btn" @click="changeWorkRound(false)"/>
           </el-tooltip>
           <el-tooltip
-            effect="dark"
-            placement="top"
-            :content="t('style.rightAngle')"
-            v-else
+              effect="dark"
+              placement="top"
+              :content="t('style.rightAngle')"
+              v-else
           >
-            <IconRightAngle class="icon-btn" @click="changeWorkRound(true)" />
+            <IconRightAngle class="icon-btn" @click="changeWorkRound(true)"/>
           </el-tooltip>
         </el-col>
         <el-col :span="11">
           <el-input
-            v-model="safe"
-            @change="changeTemplateSafe"
-            oninput="value=value.replace(/[^\d]/g,'')"
-            :disabled="unitMode === 1"
+              v-model="safe"
+              @change="changeTemplateSafe"
+              oninput="value=value.replace(/[^\d]/g,'')"
+              :disabled="unitMode === 1"
           >
             <template #prepend>
               <el-tooltip
-                placement="top"
-                :hide-after="0"
-                :content="t('style.safetyLine')"
+                  placement="top"
+                  :hide-after="0"
+                  :content="t('style.safetyLine')"
               >
-                <IconShield />
+                <IconShield/>
               </el-tooltip>
             </template>
           </el-input>
@@ -109,46 +109,46 @@
           <el-select v-model="unitMode" @change="changeUnitMode">
             <template #prefix>
               <el-tooltip
-                placement="top"
-                :hide-after="0"
-                :content="t('style.unit')"
+                  placement="top"
+                  :hide-after="0"
+                  :content="t('style.unit')"
               >
-                <IconRuler />
+                <IconRuler/>
               </el-tooltip>
             </template>
             <el-option
-              v-for="item in DesignUnitMode"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
+                v-for="item in DesignUnitMode"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
             ></el-option>
           </el-select>
         </el-col>
         <el-col :span="2"></el-col>
-<!--        <el-col :span="11">-->
-<!--          <el-select v-model="sizeMode">-->
-<!--            <template #prefix>-->
-<!--              <el-tooltip-->
-<!--                placement="top"-->
-<!--                :hide-after="0"-->
-<!--                :content="t('style.template')"-->
-<!--              >-->
-<!--                <IconIdCard />-->
-<!--              </el-tooltip>-->
-<!--            </template>-->
-<!--            <el-option-->
-<!--              v-for="item in DesignSizeMode"-->
-<!--              :key="item.id"-->
-<!--              :label="item.name"-->
-<!--              :value="item.id"-->
-<!--              :disabled="item.disabled"-->
-<!--            ></el-option>-->
-<!--          </el-select>-->
-<!--        </el-col>-->
+        <!--        <el-col :span="11">-->
+        <!--          <el-select v-model="sizeMode">-->
+        <!--            <template #prefix>-->
+        <!--              <el-tooltip-->
+        <!--                placement="top"-->
+        <!--                :hide-after="0"-->
+        <!--                :content="t('style.template')"-->
+        <!--              >-->
+        <!--                <IconIdCard />-->
+        <!--              </el-tooltip>-->
+        <!--            </template>-->
+        <!--            <el-option-->
+        <!--              v-for="item in DesignSizeMode"-->
+        <!--              :key="item.id"-->
+        <!--              :label="item.name"-->
+        <!--              :value="item.id"-->
+        <!--              :disabled="item.disabled"-->
+        <!--            ></el-option>-->
+        <!--          </el-select>-->
+        <!--        </el-col>-->
       </el-row>
     </div>
 
-    <el-divider style="margin: 12px 0" />
+    <el-divider style="margin: 12px 0"/>
 
     <div class="title">
       <b>{{ t("style.canvasFill") }}</b>
@@ -156,13 +156,13 @@
     <div class="row">
       <el-button class="full-row" @click="changeAllBackgroud">{{ t("style.applyCanvasToAll") }}</el-button>
     </div>
-    <Backgrounds />
+    <Backgrounds/>
 
-    <el-divider style="margin: 12px 0" />
+    <el-divider style="margin: 12px 0"/>
 
-    <Watermark />
+    <Watermark/>
 
-    <el-divider style="margin: 12px 0" />
+    <el-divider style="margin: 12px 0"/>
 
     <div class="title">
       <b>{{ t("style.canvasMask") }}</b>
@@ -178,13 +178,13 @@
 </template>
 
 <script lang="ts" setup>
-import { Rect } from "fabric";
-import { storeToRefs } from "pinia";
-import { ElMessage } from "element-plus";
-import { ref, watch, onMounted, computed } from "vue";
-import { mm2px, px2mm } from "@/utils/image";
+import {Rect} from "fabric";
+import {storeToRefs} from "pinia";
+import {ElMessage} from "element-plus";
+import {ref, watch, onMounted, computed} from "vue";
+import {mm2px, px2mm} from "@/utils/image";
 import useI18n from "@/hooks/useI18n";
-import { useFabricStore, useMainStore, useTemplatesStore } from "@/store";
+import {useFabricStore, useMainStore, useTemplatesStore} from "@/store";
 import {
   WorkSpaceClipType,
   WorkSpaceDrawType,
@@ -202,16 +202,23 @@ import Watermark from "./Watermark/index.vue";
 import useHistorySnapshot from "@/hooks/useHistorySnapshot";
 import useCanvasScale from '@/hooks/useCanvasScale'
 
-const { t } = useI18n();
+const {t} = useI18n();
 
 const mainStore = useMainStore();
 const templatesStore = useTemplatesStore();
 const fabricStore = useFabricStore();
-const { addHistorySnapshot } = useHistorySnapshot();
-const { sizeMode, unitMode } = storeToRefs(mainStore);
-const { currentTemplate } = storeToRefs(templatesStore);
-const { clip, safe, zoom, opacity } = storeToRefs(fabricStore);
-const { setCanvasSize, resetCanvas } = useCanvasScale()
+const {addHistorySnapshot} = useHistorySnapshot();
+const {sizeMode, unitMode} = storeToRefs(mainStore);
+const {currentTemplate} = storeToRefs(templatesStore);
+const {clip, safe, zoom, opacity} = storeToRefs(fabricStore);
+const {setCanvasSize, resetCanvas} = useCanvasScale()
+
+const pageSizeWidth = computed(() => {
+  return Math.round(templateWidth.value * 100) / 100
+})
+const pageSizeHeight = computed(() => {
+  return Math.round(templateHeight.value * 100) / 100
+})
 
 const templateWidth = computed(() => {
   // const [ canvas ] = useCanvas()
@@ -244,23 +251,23 @@ const gridColorRecent = ref<[string[]]>([[]]);
 // 获取画布尺寸
 const getCanvasSize = () => {
   let width =
-    unitMode.value === 0 ? mm2px(canvasWidth.value) : canvasWidth.value;
+      unitMode.value === 0 ? mm2px(canvasWidth.value) : canvasWidth.value;
   let height =
-    unitMode.value === 0 ? mm2px(canvasHeight.value) : canvasHeight.value;
+      unitMode.value === 0 ? mm2px(canvasHeight.value) : canvasHeight.value;
   width = width * zoom.value;
   height = height * zoom.value;
-  return { width, height };
+  return {width, height};
 };
 
 // 修改画布宽度
 const changeTemplateWidth = () => {
   const [canvas] = useCanvas();
   const workSpaceDraw = canvas
-    .getObjects()
-    .filter((item) => item.id === WorkSpaceDrawType)[0];
+      .getObjects()
+      .filter((item) => item.id === WorkSpaceDrawType)[0];
   if (!workSpaceDraw) return;
   const ratio = currentTemplate.value.height / currentTemplate.value.width;
-  let { width, height } = getCanvasSize();
+  let {width, height} = getCanvasSize();
   if (width / zoom.value < mm2px(MinSize)) {
     ElMessage({
       message: t("style.minimumSizeLimit") + MinSize,
@@ -276,7 +283,7 @@ const changeTemplateWidth = () => {
     width = mm2px(MaxSize) * zoom.value;
   }
   height = isFixed.value ? width * ratio : height;
-  workSpaceDraw.set({ width: width / zoom.value, height: height / zoom.value });
+  workSpaceDraw.set({width: width / zoom.value, height: height / zoom.value});
   templatesStore.setSize(width, height, zoom.value);
   sizeMode.value = 2;
   canvas.renderAll();
@@ -288,11 +295,11 @@ const changeTemplateWidth = () => {
 const changeTemplateHeight = () => {
   const [canvas] = useCanvas();
   const workSpaceDraw = canvas
-    .getObjects()
-    .filter((item) => item.id === WorkSpaceDrawType)[0];
+      .getObjects()
+      .filter((item) => item.id === WorkSpaceDrawType)[0];
   if (!workSpaceDraw) return;
   const ratio = currentTemplate.value.height / currentTemplate.value.width;
-  let { width, height } = getCanvasSize();
+  let {width, height} = getCanvasSize();
   if (height / zoom.value < mm2px(MinSize)) {
     ElMessage({
       message: t("style.minimumSizeLimit") + MinSize,
@@ -308,7 +315,7 @@ const changeTemplateHeight = () => {
     height = mm2px(MaxSize) * zoom.value;
   }
   width = isFixed.value ? height / ratio : width;
-  workSpaceDraw.set({ width: width / zoom.value, height: height / zoom.value });
+  workSpaceDraw.set({width: width / zoom.value, height: height / zoom.value});
   templatesStore.setSize(width, height, zoom.value);
   sizeMode.value = 2;
   canvas.renderAll();
@@ -337,15 +344,15 @@ const changeFixedRatio = (fixedStatus: boolean) => {
 const changeWorkRound = (roundStatus: boolean) => {
   const [canvas] = useCanvas();
   const workSpaceclip = canvas
-    .getObjects()
-    .filter(
-      (item) => WorkSpaceClipType === item.id && item.isType("Rect")
-    )[0] as Rect;
+      .getObjects()
+      .filter(
+          (item) => WorkSpaceClipType === item.id && item.isType("Rect")
+      )[0] as Rect;
   let rx = 0,
-    ry = 0;
+      ry = 0;
   isRound.value = roundStatus;
   if (isRound.value) rx = ry = 10;
-  workSpaceclip.set({ rx, ry });
+  workSpaceclip.set({rx, ry});
   canvas.renderAll();
 };
 
@@ -372,10 +379,10 @@ const changeAllBackgroud = () => {
   templatesStore.templates.forEach((item) => {
     item.workSpace = currentTemplate.value.workSpace;
     const currentWorkSpace = currentTemplate.value.objects.filter(
-      (ele) => ele.id === WorkSpaceDrawType
+        (ele) => ele.id === WorkSpaceDrawType
     )[0];
     item.objects = item.objects.map((ele) =>
-      ele.id === WorkSpaceDrawType ? currentWorkSpace : ele
+        ele.id === WorkSpaceDrawType ? currentWorkSpace : ele
     ) as any;
   });
 };
@@ -388,19 +395,19 @@ onMounted(() => {
 
 // 保存缓存最近添加的网格
 watch(
-  gridColorRecent,
-  () => {
-    const recentGridCache = JSON.stringify(gridColorRecent.value);
-    localStorage.setItem(RECENT_GRIDS, recentGridCache);
-  },
-  { deep: true }
+    gridColorRecent,
+    () => {
+      const recentGridCache = JSON.stringify(gridColorRecent.value);
+      localStorage.setItem(RECENT_GRIDS, recentGridCache);
+    },
+    {deep: true}
 );
 
 const changeMaskOpacity = () => {
   const [canvas] = useCanvas();
   const workMask = canvas
-    .getObjects()
-    .filter((ele) => ele.id === WorkSpaceMaskType)[0];
+      .getObjects()
+      .filter((ele) => ele.id === WorkSpaceMaskType)[0];
   if (!workMask) return;
   workMask.set("opacity", opacity.value);
   canvas.renderAll();
@@ -411,15 +418,18 @@ const changeMaskOpacity = () => {
 .icon-btn {
   cursor: pointer;
 }
+
 .canvas-design-panel {
   user-select: none;
 }
+
 .row {
   width: 100%;
   display: flex;
   align-items: center;
   margin-bottom: 10px;
 }
+
 .title {
   margin-bottom: 10px;
 }
@@ -430,6 +440,7 @@ const changeMaskOpacity = () => {
   align-items: center;
   justify-content: center;
 }
+
 .slider-name {
   display: flex;
   align-items: center;
@@ -438,6 +449,7 @@ const changeMaskOpacity = () => {
 .mb-10 {
   margin-bottom: 10px;
 }
+
 .full-row {
   flex: 1;
   width: 100%;
@@ -446,6 +458,7 @@ const changeMaskOpacity = () => {
 .full-group {
   display: flex;
   flex: 1;
+
   .el-button {
     width: 50%;
   }
@@ -454,9 +467,11 @@ const changeMaskOpacity = () => {
 .full-ratio {
   display: flex;
   flex: 1;
+
   .el-radio-button {
     width: 50%;
   }
+
   .el-radio-button__inner {
     width: 100%;
   }
@@ -491,6 +506,7 @@ const changeMaskOpacity = () => {
 .theme-list {
   @include flex-grid-layout();
 }
+
 .theme-item {
   @include flex-grid-layout-children(2, 48%);
 
@@ -512,9 +528,11 @@ const changeMaskOpacity = () => {
   .text {
     font-size: 16px;
   }
+
   .colors {
     display: flex;
   }
+
   .color-block {
     margin-top: 8px;
     width: 12px;
@@ -535,6 +553,7 @@ const changeMaskOpacity = () => {
     display: none;
     background-color: rgba($color: #000, $alpha: 0.25);
   }
+
   .btn {
     width: 72px;
     padding: 5px 0;
@@ -569,12 +588,15 @@ const changeMaskOpacity = () => {
 :deep(.el-input .el-input-group__prepend) {
   padding: 0 5px;
 }
+
 :deep(.el-input .el-input-group__append) {
   padding: 0 5px;
 }
+
 :deep(.full-ratio .el-radio-button__inner) {
   width: 100%;
 }
+
 :deep(.size-row .el-input-group__prepend) {
   min-width: 24px;
 }

src/views/Editor/CanvasRight/index.vue

@@ -79,6 +79,7 @@ import {useTemplatesStore} from "@/store";
 import useCanvasExport from "@/hooks/useCanvasExport";
 import {updateDesignTemplate} from "@/api/template";
 import {ElMessage, FormInstance} from "element-plus";
+import {getToken} from "@/utils/js-cookie";
 
 const templatesStore = useTemplatesStore()
 const {getJSONData} = useCanvasExport()
@@ -113,6 +114,11 @@ const exportFile = () => {
 }
 
 const onSaveTemplate = () => {
+  if (!getToken('token')) {
+    ElMessage.error('当前用户未登录,设计无法保存')
+    return
+  }
+
   formData.templateName = templatesStore.templateName
   showSaveDlg.value = true
 }

src/views/Editor/computer.vue

@@ -47,7 +47,7 @@ const mainStore = useMainStore();
 onMounted(async () => {
   const query = router.currentRoute.value.query
   if (!query.virtualCode){
-    ElMessage.error('当前用户未登录,设计将无法保存')
+    ElMessage.error('当前用户未登录,设计无法保存')
     return
   }
   const param = {
@@ -56,7 +56,8 @@ onMounted(async () => {
 
   getCurrentUserTokenInfo(param).then((response) => {
     if (response.httpCode == 200) {
-      setToken('token', response.data.token)
+      console.log(response.data)
+      setToken('token', response.data.itemValue)
       setToken('supplierCode', response.data.supplierCode)
       setToken('dataSourceId', response.data.dataSourceId)
     }

src/views/Home/components/MainSearch.vue

@@ -1,11 +1,11 @@
 <template>
   <el-row :gutter="20" class="h-[100px] flex items-center row-home">
     <el-col :span="10" :offset="7">
-      <el-input class="h-[40px]" :prefix-icon="Search" placeholder="五一假期">
+      <el-input class="h-[40px]" :prefix-icon="Search" placeholder="搜索" @click="onSearchTemplate">
         <template #append>
           <el-select v-model="searchSelect" placeholder="Select">
-            <el-option label="精选模版" value="1" />
-            <el-option label="我的空间" value="2" />
+            <el-option label="精选模版" value="1"/>
+            <el-option label="我的空间" value="2"/>
           </el-select>
         </template>
       </el-input>
@@ -14,6 +14,12 @@
 </template>
 
 <script setup lang="ts">
-import { Search } from '@element-plus/icons-vue';
+import {Search} from '@element-plus/icons-vue';
+
 const searchSelect = ref<string>('1')
+
+const emit = defineEmits(["searchTemplate"])
+const onSearchTemplate = () => {
+  emit("searchTemplate", searchSelect);
+}
 </script>

src/views/Home/index.vue

@@ -4,7 +4,7 @@
       <el-header class="border-b-[1px] items-center flex">
         <el-row class="justify-between items-center">
           <el-col :span="4" class="h-[50px]">
-            <img src="@/assets/logo.svg" alt="" class="h-full">
+            <img src="@/assets/logo.png" alt="" class="h-full">
           </el-col>
           <el-col :span="6" class="flex justify-end col-user">
             <div v-if="username" class="cursor-pointer">
@@ -17,38 +17,28 @@
         </el-row>
       </el-header>
       <el-container>
-        <el-aside width="216px">
-          <el-menu active-text-color="#000" default-active="1" class="pt-[20px] h-lvh">
-            <el-menu-item index="1">
-              <span class="flex w-[30px] justify-center">
-                <IconNavigation/>
-              </span>
-              <span>为你推荐</span>
-            </el-menu-item>
-            <el-menu-item index="2">
-              <span class="flex w-[30px] justify-center">
-                <SvgIcon icon-class="chatgpt" className="svg-size" />
-              </span>
-              <span>智能AI</span>
-            </el-menu-item>
-            <el-menu-item index="3">
-              <span class="flex w-[30px] justify-center">
-                <IconViewList/>
-              </span>
-              <span>模版空间</span>
-            </el-menu-item>
-          </el-menu>
-        </el-aside>
+        <!--        <el-aside width="216px">-->
+        <!--          <el-menu active-text-color="#000" default-active="1" class="pt-[20px] h-lvh">-->
+        <!--            <el-menu-item index="1">-->
+        <!--              <span class="flex w-[30px] justify-center">-->
+        <!--                <IconViewList/>-->
+        <!--              </span>-->
+        <!--              <span>模版空间</span>-->
+        <!--            </el-menu-item>-->
+        <!--          </el-menu>-->
+        <!--        </el-aside>-->
         <el-main @scroll="handleScroll" class="h-lvh" id="main">
-          <MainSearch />
-          <!-- <MainScene />
-          <MainTools /> -->
+          <MainSearch @searchTemplate="searchTemplate"/>
+          <MainScene/>
+          <MainTools/>
           <el-row class="mt-[40px]">
             <b class="text-[20px]">今日推荐</b>
           </el-row>
-          <TransitionGroup :name="resultReactive.move ? 'group' : ''" tag="div" class="waterfall-box" id="homeWaterfall">
+          <TransitionGroup :name="resultReactive.move ? 'group' : ''" tag="div" class="waterfall-box"
+                           id="homeWaterfall">
             <div class="waterfall-item" v-for="(item, index) in resultReactive.items" :key="item.id">
-              <img class="pic" :src="item.preview" alt="" :ref="(e: any) => setItemStyle(e, index)" @click="changeTemplate(item.id)">
+              <img class="pic" :src="item.preview" alt="" :ref="(e: any) => setItemStyle(e, index)"
+                   @click="changeTemplate(item.id)">
               <div class="title">{{ item.title }}</div>
               <div class="content ellipsis_2">{{ item.text }}</div>
             </div>
@@ -56,7 +46,7 @@
         </el-main>
       </el-container>
     </el-container>
-    <LoginDialog :visible="loginVisible" @close="handleLoginDialog" />
+    <LoginDialog :visible="loginVisible" @close="handleLoginDialog"/>
   </div>
 </template>
 
@@ -64,18 +54,18 @@
 import MainSearch from './components/MainSearch.vue';
 import MainScene from './components/MainScene.vue';
 import MainTools from './components/MainTools.vue';
-import { getTemplateInfoPages } from '@/api/template'
-import { TemplateItem } from '@/api/template/types'
-import { throttle } from 'lodash-es'
-import { PageSize } from "@/configs/size"
-import { useRouter } from 'vue-router'
-import { useUserStore } from '@/store';
-import { storeToRefs } from 'pinia';
+import {getTemplateInfoPages} from '@/api/template'
+import {TemplateItem} from '@/api/template/types'
+import {throttle} from 'lodash-es'
+import {PageSize} from "@/configs/size"
+import {useRouter} from 'vue-router'
+import {useUserStore} from '@/store';
+import {storeToRefs} from 'pinia';
 
 const router = useRouter()
 const userStore = useUserStore()
 const loginVisible = ref(false)
-const { loginStatus, username } = storeToRefs(userStore)
+const {loginStatus, username} = storeToRefs(userStore)
 const resultReactive = reactive({
   loading: false,
   page: 1,
@@ -87,7 +77,8 @@ const resultReactive = reactive({
 
 const handleScroll = throttle(async () => {
   const mainElement = document.getElementById('main') as HTMLElement
-  const scrollHeight = mainElement.scrollHeight, scrollTop = mainElement.scrollTop, clientHeight = mainElement.clientHeight
+  const scrollHeight = mainElement.scrollHeight, scrollTop = mainElement.scrollTop,
+      clientHeight = mainElement.clientHeight
   if (scrollHeight - (scrollTop + clientHeight) <= 200) {
     if (resultReactive.page < resultReactive.totalPage) {
       resultReactive.page += 1
@@ -111,12 +102,17 @@ const setItemStyle = (img: HTMLImageElement, index: number) => {
   }
   update();
   img.onload = update;
-  img.onerror = function() {
+  img.onerror = function () {
     img.src = new URL(`/src/assets/images/loading.gif`, import.meta.url).href;
     update();
   };
 }
 
+//searchType 1搜公共模板2搜自己作品
+const searchTemplate = (searchType) => {
+
+}
+
 const loadTemplateImage = async () => {
   resultReactive.items.forEach(item => {
     const itemImages = item.images
@@ -132,7 +128,7 @@ const loadTemplateImage = async () => {
 }
 
 const getTemplateItems = async () => {
-  const pageParams = { page: resultReactive.page, size: PageSize }
+  const pageParams = {page: resultReactive.page, size: PageSize}
   const result = await getTemplateInfoPages(pageParams)
   if (result.data && result.data.code === 200) {
     resultReactive.page = result.data.data.page
@@ -143,7 +139,7 @@ const getTemplateItems = async () => {
 }
 
 const changeTemplate = (pk: number) => {
-  const { href } = router.resolve({
+  const {href} = router.resolve({
     path: '/',
     query: {
       template: pk
@@ -162,17 +158,13 @@ onMounted(() => {
     const rect = entries[0].contentRect;
     if (rect.width > 1200) {
       resultReactive.column = 6;
-    } 
-    else if (rect.width > 900) {
+    } else if (rect.width > 900) {
       resultReactive.column = 5;
-    } 
-    else if (rect.width > 600) {
+    } else if (rect.width > 600) {
       resultReactive.column = 4;
-    }
-    else if (rect.width > 300) {
+    } else if (rect.width > 300) {
       resultReactive.column = 3;
-    }
-    else if (rect.width > 200) {
+    } else if (rect.width > 200) {
       resultReactive.column = 2;
     }
     el.style.setProperty("--column", resultReactive.column.toString());
@@ -190,19 +182,23 @@ onUnmounted(() => {
 .col-user {
   display: flex;
 }
+
 .el-aside .el-menu .el-menu-item {
   height: 40px;
   padding-left: 0;
   padding-right: 0;
   margin-left: var(--el-menu-level-padding);
   border-radius: 5px;
+
   &:hover {
     background-color: #f1f2f4;
   }
 }
+
 .el-aside .el-menu .is-active {
   background-color: #f1f2f4;
 }
+
 .group-move,
 .group-enter-active,
 .group-leave-active {
@@ -226,6 +222,7 @@ onUnmounted(() => {
   grid-gap: 0 20px;
   padding: 20px 0;
   align-items: end;
+
   .waterfall-item {
     background-color: #fff;
     margin-bottom: 20px;
@@ -233,6 +230,7 @@ onUnmounted(() => {
     overflow: hidden;
     box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
     padding: 10px;
+
     .pic {
       display: block;
       width: 100%;
@@ -241,15 +239,18 @@ onUnmounted(() => {
       margin-bottom: 14px;
       outline: 1px solid $borderColor;
       cursor: pointer;
+
       &:hover {
         outline-color: $themeColor;
       }
     }
+
     .title {
       font-size: 20px;
       font-weight: bold;
       margin-bottom: 8px;
     }
+
     .content {
       font-size: 14px;
       color: #222;
@@ -264,6 +265,7 @@ onUnmounted(() => {
   width: 115px;
   height: 40px;
 }
+
 :deep(.row-home .el-input .el-select__wrapper) {
   width: 115px;
   height: 40px;