From 25e3b47c04739bbb7826ff399d0b6d9cbe67d454 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A7=A6=E5=B0=91=E5=8D=AB?= <nihaojob@163.com>
Date: Thu, 30 May 2024 15:15:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=94=A8=E6=88=B7=E7=B4=A0=E6=9D=90):=20?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=96=87=E4=BB=B6=E5=A4=B9=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user.ts                               |   2 +-
 src/assets/icon/fileType.png                  | Bin 0 -> 2108 bytes
 src/components/attributeColor.vue             |   6 +-
 src/components/importJSON.vue                 |   3 +-
 src/components/myMaterial/components/file.vue | 165 ++++++++
 .../myMaterial/components/fileType.vue        | 135 +++++++
 src/components/myMaterial/index.vue           |   7 +-
 src/components/myMaterial/myTempl.vue         | 365 +++++++++---------
 src/components/myMaterial/uploadMaterial.vue  |   7 +-
 src/components/myTemplName.vue                |   8 +-
 src/hooks/useFileType.js                      |  40 ++
 src/hooks/useMaterial.js                      |  43 ++-
 src/hooks/usePageList.js                      | 130 +++++++
 src/language/zh.json                          |   6 +-
 src/views/home/index.vue                      |   5 +-
 15 files changed, 704 insertions(+), 218 deletions(-)
 create mode 100644 src/assets/icon/fileType.png
 create mode 100644 src/components/myMaterial/components/file.vue
 create mode 100644 src/components/myMaterial/components/fileType.vue
 create mode 100644 src/hooks/useFileType.js
 create mode 100644 src/hooks/usePageList.js

diff --git a/src/api/user.ts b/src/api/user.ts
index af203830..cb2ff4be 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -2,7 +2,7 @@
  * @Author: 秦少卫
  * @Date: 2024-04-24 14:07:06
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-05-29 10:07:24
+ * @LastEditTime: 2024-05-30 15:12:53
  * @Description: 用户接口登录
  */
 
diff --git a/src/assets/icon/fileType.png b/src/assets/icon/fileType.png
new file mode 100644
index 0000000000000000000000000000000000000000..a5693ec0463a52b57d25a726245d6c986294ebe6
GIT binary patch
literal 2108
zcmeAS@N?(olHy`uVBq!ia0vp^cYyc=2OE%VmhI;OQjEnx?oJHr&dI!FU||2|>Eakt
z5%+e^{=67hnb!0$i4-C6&P6OOPne|Uv~dLrJiHs?>C4LR=-n*xJN3n9rZ=XhqP_8l
zxE3w&+}K=}`(fSQGNt!>jrSLS+w9W(XlC)g$^PGe@juz}Y_X4g@8t|LznwD6CLMqM
zkLUk8S(c)gK_}HS&0c+avZh&_<r&MTP@bnx9tL{76s@RIEttc9|IE%$8=ta-wP^3R
zpYh2>`a}Ma9FvEc<_htRi~o!B-F&rXD*yeM>eVZXjkmifY><$@spU7(d;0$0*+C!O
z)^WKg#Md;ZNNHR)b9tD(D>tIj_xPF1YtMe#6SeK(y<cH1+1nZXcb2`GeRt03lZP+8
z`Sy07#KUa`^)1<^R`+c(UH84*%W+-6KK{6A%l#KwE!iyp9!14z-~P0|&iYWO`@SN@
zLtCH5|1E1--B<I~DNb9OKj3Fo%W9rKw@UxirM_leb+5l5v~d02p6jQ+Nr!kh6kH9s
zUm<vC>-_~$Of9S1em(2{VWoF~W2%xujOvB$afh!L3Wlwi#Q1PkLfvuI>ict+oUeOS
ze^?-~Th8c-x_<tj^}hwzu^*6@|M>CplyCJne@O6kxGa!aFU<dNQO=jA>jNiESRBr@
z`jKMH`T}!{Hy6Kap8fyu@Pq?POE|<+<662m9Wk&>OPyq2dsFd_LB;zrt@TsOA20h5
zX<7R7V>jm^S1Im?N^1=rrd>2{k!E;3xBto3Pv>5k*ctA3+u`A@7_-Eb?L<=nv%}pF
z9&y^{EE2yipRYLNdOQ6e^M{}Ohkh2QG!#4xd%D%=j*2at(+;`BZ^a_}pIzlYK4ZB;
z%!yc_PoL=6wg4p*zSXm=pZeFhw@~TO(HjrFxLUX^z4;dktYhyuEORjXsX@%`d0hp$
zKkpY=A8MVO)||kxopDd1{nYEH5`S*9lzn)spuRs^@SUx~$-fh$TYi72^ZGvTgy|-(
zGx>8~oc($5U*)sA`PWn9mGA8J7x2wb6LMGC@cYfGitv`|53XL;-<93eg;`8E-@IAA
z<@@3Ko6}pI&CWV{%FYJ{llY;JQj+y1LRrEV^?UaSy!#k_E7gOak(H_1{@>iw^8VcS
zdqX0+dp@z0+11ZJJwIN2U!an`Dys;GPK)(ik=8XSEe$q}7vJ$bd=kE-frqhW^31LU
zd@KUz5?!rM2sl{GT*>juf#IP{*plW^$<aU<O$oy*J1EqDF`Itbv+#uzJ4cK9gz|rm
zJ3eR&Ug$U=c}Q}t=hP1@0(yU3SW1*O2;|KQlCs{qh?~Vp=)_CYL#;7w0n=E#epybx
z{Lx~mP5r5ljEo#S9t!e4#q;K$&wko4#Zroio9U;8{GYNd0(>ujSTi;za-Nx=$NhHN
z`iGw8IwgMhy_jOXo?6J4+%<i8Zhp!6{vfUO+k|+RDqhfU)RXs7KkdHG=AmA^{`31D
xlD)xN?SD=zxX)^FcHV(Up4<L}MCbj{|97~!;?T?qKY`5w22WQ%mvv4FO#oHYi|zmb

literal 0
HcmV?d00001

diff --git a/src/components/attributeColor.vue b/src/components/attributeColor.vue
index 0e627d35..96191e6a 100644
--- a/src/components/attributeColor.vue
+++ b/src/components/attributeColor.vue
@@ -2,7 +2,7 @@
  * @Author: 秦少卫
  * @Date: 2024-05-21 10:59:48
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-05-22 09:12:41
+ * @LastEditTime: 2024-05-30 10:34:49
  * @Description: 渐变
 -->
 
@@ -52,13 +52,11 @@ const getObjectAttr = (e) => {
   const activeObject = canvasEditor.canvas.getActiveObject();
   // 不是当前obj，跳过
   if (e && e.target && e.target !== activeObject) return;
-  if (activeObject) {
-    console.log(activeObject.type);
+  if (activeObject && mixinState.mSelectMode === 'one') {
     const fill = activeObject.get('fill');
     if (typeof fill === 'string') {
       baseAttr.fill = fill;
     } else {
-      console.log(fill);
       baseAttr.fill = fabricGradientToCss(fill, activeObject);
     }
   }
diff --git a/src/components/importJSON.vue b/src/components/importJSON.vue
index 5e8681d2..24578d3e 100644
--- a/src/components/importJSON.vue
+++ b/src/components/importJSON.vue
@@ -2,7 +2,7 @@
  * @Author: 秦少卫
  * @Date: 2022-09-03 19:16:55
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-05-27 18:56:58
+ * @LastEditTime: 2024-05-30 14:14:02
  * @Description: 导入JSON文件
 -->
 
@@ -25,7 +25,6 @@
     </Dropdown>
 
     <!-- 创建设计 -->
-    <!-- 修改尺寸 -->
     <modalSzie
       :title="$t('importFiles.createDesign.title')"
       ref="modalSizeRef"
diff --git a/src/components/myMaterial/components/file.vue b/src/components/myMaterial/components/file.vue
new file mode 100644
index 00000000..8bf36797
--- /dev/null
+++ b/src/components/myMaterial/components/file.vue
@@ -0,0 +1,165 @@
+<!--
+ * @Author: 秦少卫
+ * @Date: 2024-05-30 10:48:00
+ * @LastEditors: 秦少卫
+ * @LastEditTime: 2024-05-30 14:47:39
+ * @Description: 模板文件
+-->
+<template>
+  <Tooltip :content="props.name" placement="top">
+    <div class="file-type-box">
+      <Image
+        lazy
+        @click="beforeClearTip"
+        :src="props.src"
+        fit="contain"
+        height="100%"
+        width="100%"
+        :alt="props.name"
+      />
+      <div class="more">
+        <Dropdown trigger="click" @on-click="operation">
+          <Button size="small" shape="circle" type="text">
+            <Icon type="ios-more" :size="24" />
+          </Button>
+          <template #list>
+            <DropdownMenu>
+              <DropdownItem name="reName">重命名</DropdownItem>
+              <DropdownItem name="delete">删除</DropdownItem>
+            </DropdownMenu>
+          </template>
+        </Dropdown>
+      </div>
+    </div>
+  </Tooltip>
+</template>
+
+<script setup name="ImportTmpl">
+import useMaterial from '@/hooks/useMaterial';
+import { useI18n } from 'vue-i18n';
+import useSelect from '@/hooks/select';
+const { t } = useI18n();
+const { canvasEditor } = useSelect();
+const { reNameFileType, removeTemplInfo, routerToId } = useMaterial();
+
+import { Modal, Input, Spin, Message } from 'view-ui-plus';
+
+const props = defineProps({
+  name: {
+    type: String,
+    default: '',
+  },
+  src: {
+    type: String,
+    default: '',
+  },
+  previewSrc: {
+    type: String,
+    default: '',
+  },
+  itemId: {
+    type: [Number, String],
+    default: '',
+  },
+  json: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['change']);
+
+const operation = (value) => {
+  const mapActions = {
+    reName: reNameFile,
+    delete: deleteFile,
+  };
+  mapActions[value]();
+};
+const fileName = ref('');
+
+const reNameFile = () => {
+  fileName.value = props.name;
+  Modal.confirm({
+    title: '重命名',
+    render: (h) => {
+      return h(Input, {
+        size: 'large',
+        modelValue: fileName,
+        autofocus: true,
+        placeholder: '请输入文件名称',
+      });
+    },
+    onOk: async () => {
+      if (fileName.value === '') {
+        Message.warning('文件名称不能为空');
+        return;
+      }
+      await reNameFileType(fileName.value, props.itemId);
+      emit('change');
+    },
+  });
+};
+
+const deleteFile = async () => {
+  await removeTemplInfo(props.itemId);
+  emit('change');
+};
+
+const beforeClearTip = () => {
+  Modal.confirm({
+    title: t('tip'),
+    content: `<p>${t('replaceTip')}</p>`,
+    okText: t('ok'),
+    cancelText: t('cancel'),
+    onOk: () => getTempData(),
+  });
+};
+
+// 获取模板数据
+const getTempData = () => {
+  Spin.show({
+    render: (h) => h('div', t('alert.loading_data')),
+  });
+  routerToId(props.itemId);
+  canvasEditor.loadJSON(JSON.stringify(props.json), Spin.hide);
+};
+</script>
+
+<style scoped lang="less">
+// 文件夹
+.file-type-box {
+  width: 134px;
+  height: 116px;
+  cursor: pointer;
+  background: #fff;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #f1f1f1;
+  border-radius: 10px;
+  img {
+    width: 60px;
+    margin-top: 12px;
+  }
+  div.more {
+    position: absolute;
+    display: none;
+  }
+  &:hover {
+    background: rgb(243, 245, 249);
+    border: 1px solid rgb(225, 230, 239);
+    border-radius: 8px;
+    img {
+      opacity: 0.8;
+    }
+    div.more {
+      display: block;
+      top: 5px;
+      right: 5px;
+    }
+  }
+}
+</style>
diff --git a/src/components/myMaterial/components/fileType.vue b/src/components/myMaterial/components/fileType.vue
new file mode 100644
index 00000000..8f5c056e
--- /dev/null
+++ b/src/components/myMaterial/components/fileType.vue
@@ -0,0 +1,135 @@
+<!--
+ * @Author: 秦少卫
+ * @Date: 2024-05-30 10:03:30
+ * @LastEditors: 秦少卫
+ * @LastEditTime: 2024-05-30 14:47:19
+ * @Description: 文件夹
+-->
+
+<template>
+  <div class="file-type-box">
+    <img :src="fileTypeIcon" @click="emit('select')" />
+    <span>{{ props.name }}</span>
+    <div class="more">
+      <Dropdown trigger="click" @on-click="operation">
+        <Button size="small" shape="circle" type="text">
+          <Icon type="ios-more" :size="24" />
+        </Button>
+        <template #list>
+          <DropdownMenu>
+            <DropdownItem name="reName">重命名</DropdownItem>
+            <DropdownItem name="delete">删除</DropdownItem>
+          </DropdownMenu>
+        </template>
+      </Dropdown>
+    </div>
+  </div>
+</template>
+
+<script setup name="ImportTmpl">
+import fileTypeIcon from '@/assets/icon/fileType.png';
+import useMaterial from '@/hooks/useMaterial';
+
+const { reNameFileType, removeFileType } = useMaterial();
+
+import { Modal, Input, Message } from 'view-ui-plus';
+
+const props = defineProps({
+  name: {
+    type: String,
+    default: '',
+  },
+  itemId: {
+    type: [Number, String],
+    default: '',
+  },
+});
+
+const emit = defineEmits(['change', 'select']);
+
+const operation = (value) => {
+  const mapActions = {
+    reName: reNameFile,
+    delete: deleteFile,
+  };
+  mapActions[value]();
+};
+const fileName = ref('');
+
+const reNameFile = () => {
+  fileName.value = props.name;
+  Modal.confirm({
+    title: '重命名文件夹',
+    render: (h) => {
+      return h(Input, {
+        size: 'large',
+        modelValue: fileName,
+        autofocus: true,
+        placeholder: '请输入文件夹名称',
+      });
+    },
+    onOk: async () => {
+      if (fileName.value === '') {
+        Message.warning('文件夹名称不能为空');
+        return;
+      }
+      await reNameFileType(fileName.value, props.itemId);
+      emit('change');
+    },
+  });
+};
+
+const deleteFile = async () => {
+  await removeFileType(props.itemId);
+  emit('change');
+};
+</script>
+
+<style scoped lang="less">
+// 文件夹
+.file-type-box {
+  width: 134px;
+  height: 116px;
+  cursor: pointer;
+  background: #fff;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  // border: 1px solid #fff;
+  border: 1px solid #f1f1f1;
+  border-radius: 10px;
+  img {
+    width: 60px;
+    margin-top: 12px;
+  }
+  span {
+    display: block;
+    padding-top: 10px;
+    text-align: center;
+    width: 90%;
+    overflow: hidden; //超出的文本隐藏
+    text-overflow: ellipsis; //溢出用省略号显示
+    white-space: nowrap; //溢出不换行
+  }
+  div.more {
+    position: absolute;
+    display: none;
+  }
+
+  &:hover {
+    background: rgb(243, 245, 249);
+    border: 1px solid rgb(225, 230, 239);
+    border-radius: 8px;
+    img {
+      opacity: 0.8;
+    }
+    div.more {
+      display: block;
+      top: 5px;
+      right: 5px;
+    }
+  }
+}
+</style>
diff --git a/src/components/myMaterial/index.vue b/src/components/myMaterial/index.vue
index 45a332ee..20a16be5 100644
--- a/src/components/myMaterial/index.vue
+++ b/src/components/myMaterial/index.vue
@@ -2,13 +2,13 @@
  * @Author: 秦少卫
  * @Date: 2024-04-25 15:30:54
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-05-11 17:12:21
+ * @LastEditTime: 2024-05-30 11:53:28
  * @Description: 我的素材
 -->
 
 <template>
   <div class="my-material" v-if="isLogin">
-    <Tabs size="small" v-model="type">
+    <Tabs v-model="type">
       <TabPane label="模板" name="templ">
         <myTempl v-if="type === 'templ'"></myTempl>
       </TabPane>
@@ -42,9 +42,6 @@ getFileListHandle();
 </script>
 
 <style scoped lang="less">
-.my-material {
-  padding-top: 10px;
-}
 .tip {
   padding: 20px;
   text-align: center;
diff --git a/src/components/myMaterial/myTempl.vue b/src/components/myMaterial/myTempl.vue
index b5819afe..a29e964c 100644
--- a/src/components/myMaterial/myTempl.vue
+++ b/src/components/myMaterial/myTempl.vue
@@ -2,7 +2,7 @@
  * @Author: 秦少卫
  * @Date: 2022-09-03 19:16:55
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-05-11 15:36:50
+ * @LastEditTime: 2024-05-30 15:06:14
  * @Description: 导入模板
 -->
 
@@ -10,249 +10,228 @@
   <div>
     <!-- 搜索组件 -->
     <div class="search-box">
+      <Dropdown @on-click="createType" placement="bottom-start" style="margin-right: 10px" transfer>
+        <Button type="primary" icon="md-add"></Button>
+        <template #list>
+          <DropdownMenu>
+            <DropdownItem name="file">新建设计</DropdownItem>
+            <DropdownItem name="fileType">新建文件夹</DropdownItem>
+          </DropdownMenu>
+        </template>
+      </Dropdown>
+
       <Input
         class="input"
         placeholder="请输入关键词"
-        v-model="searchKeyword"
+        v-model="filters.name.$contains"
         search
-        :disabled="loading"
-        @on-search="startGetMaterialList"
+        :disabled="pageLoading"
+        @on-search="startGetList"
       />
     </div>
 
+    <!-- 面包屑导航 -->
+    <Breadcrumb>
+      <BreadcrumbItem
+        @click="toFile(item.parentId, i)"
+        :key="item.id"
+        v-for="(item, i) in filePath"
+      >
+        {{ item.name }}
+      </BreadcrumbItem>
+    </Breadcrumb>
+
     <!-- 列表 -->
-    <div style="height: calc(100vh - 180px)" id="myFileTemplBox">
+    <div style="height: calc(100vh - 160px)" id="myFileTemplBox">
       <Scroll
         key="myFileTemplBox"
         v-if="showScroll"
-        :on-reach-bottom="handleReachBottom"
+        :on-reach-bottom="nextPage"
         :height="scrollHeight"
         :distance-to-edge="[-1, -1]"
       >
         <!-- 列表 -->
-        <div>
-          <Tooltip
-            :content="info.name"
-            v-for="info in materialList"
-            :key="info.src"
-            placement="top"
-          >
-            <div class="tmpl-img-box">
-              <Icon type="ios-trash" class="del-btn" color="red" @click="removeTempl(info.id)" />
-              <Image
-                lazy
-                :src="info.src"
-                fit="contain"
-                height="100%"
-                :alt="info.name"
-                @click="beforeClearTip(info.json, info.id)"
-              />
-            </div>
-          </Tooltip>
+        <div v-for="info in pageData" :key="info.name" class="item">
+          <!-- 文件夹样式 -->
+          <fileType
+            v-if="info.type === 'fileType'"
+            :itemId="info.id"
+            :name="info.name"
+            @select="() => joinFileTyper(info.id, info.name)"
+            @change="startGetList"
+          ></fileType>
+
+          <file
+            v-else
+            :src="info.src"
+            :json="info.json"
+            :previewSrc="info.previewSrc"
+            :itemId="info.id"
+            :name="info.name"
+            @change="startGetList"
+          ></file>
         </div>
-        <Spin size="large" fix :show="loading"></Spin>
-
-        <Divider plain v-if="isDownBottm()">已经到底了</Divider>
+        <Spin size="large" fix :show="pageLoading"></Spin>
+        <Divider plain v-if="isDownBottom">已经到底了</Divider>
       </Scroll>
     </div>
+
+    <!-- 创建设计 -->
+    <modalSzie
+      :title="$t('importFiles.createDesign.title')"
+      ref="modalSizeRef"
+      @set="customSizeCreate"
+    ></modalSzie>
   </div>
 </template>
 
 <script setup name="ImportTmpl">
-import qs from 'qs';
-import useSelect from '@/hooks/select';
-import { Message } from 'view-ui-plus';
-import { Spin, Modal } from 'view-ui-plus';
-import { useI18n } from 'vue-i18n';
-import { getTmplList } from '@/api/user';
-import useMaterial from '@/hooks/useMaterial';
-const { routerToId, removeTemplInfo } = useMaterial();
-
-const APIHOST = import.meta.env.APP_APIHOST;
+import { Input } from 'view-ui-plus';
+import { Spin, Modal, Message } from 'view-ui-plus';
 
-const { t } = useI18n();
-const { canvasEditor } = useSelect();
+// 组件
+import fileType from './components/fileType.vue';
+import file from './components/file.vue';
+import modalSzie from '@/components/common/modalSzie';
 
-// 素材列表
-const materialList = ref([]);
-// 搜索关键字
-const searchKeyword = ref('');
-// 面板加载
-const loading = ref(false);
+// API
+import { getTmplList } from '@/api/user';
 
-// 分页信息
-const page = ref(1);
-const pagination = reactive({
-  page: 0,
-  pageCount: 0,
-  pageSize: 10,
-  total: 0,
+// 素材与分页
+import useMaterial from '@/hooks/useMaterial';
+import usePageList, { getMaterialInfoUrl, getMaterialPreviewUrl } from '@/hooks/usePageList';
+// 用户素材API操作
+const { createdFileType, createTmpl } = useMaterial();
+
+// 检索条件
+const filters = reactive({
+  name: {
+    $contains: '',
+  },
+  parentId: {
+    $eq: '',
+    filterEmpty: false,
+  },
 });
 
-const isDownBottm = () => {
-  return pagination.page === page.value && pagination.page >= pagination.pageCount;
-};
-
-// 获取素材列表
-const getMaterialList = () => {
-  loading.value = true;
-  getTmplListHandler(page.value, searchKeyword.value).then((res) => {
-    const { list, pagination: resPagination } = res;
-    Object.keys(resPagination).forEach((key) => {
-      pagination[key] = resPagination[key];
-    });
-    materialList.value = [...materialList.value, ...list];
-    loading.value = false;
-  });
-};
-
-const startGetMaterialList = () => {
-  materialList.value = [];
-  page.value = 1;
-  getMaterialList();
-};
-
-const handleReachBottom = () => {
-  if (page.value >= pagination.pageCount) return;
-  page.value++;
-  setTimeout(() => {
-    getMaterialList();
-  }, 1000);
-};
-
-// 替换提示
-const beforeClearTip = (json, id) => {
-  Modal.confirm({
-    title: t('tip'),
-    content: `<p>${t('replaceTip')}</p>`,
-    okText: t('ok'),
-    cancelText: t('cancel'),
-    onOk: () => getTempData(json, id),
+const sort = ['type:desc'];
+
+// 分页格式化
+const formatData = (data) => {
+  return data.map((item) => {
+    return {
+      id: item.id,
+      name: item.attributes.name,
+      type: item.attributes.type || 'file',
+      desc: item.attributes.desc,
+      json: item.attributes.json,
+      src: getMaterialInfoUrl(item.attributes.img),
+      previewSrc: getMaterialPreviewUrl(item.attributes.img),
+    };
   });
 };
+// 通用分页
+const {
+  pageData,
+  showScroll,
+  scrollHeight,
+  isDownBottom,
+  pageLoading,
+  startPage,
+  startGetList,
+  nextPage,
+} = usePageList({
+  el: '#myFileTemplBox',
+  apiClient: getTmplList,
+  filters,
+  sort,
+  formatData,
+});
 
-const showScroll = ref(false);
-const scrollHeight = ref(0);
 onMounted(() => {
-  const myTemplBox = document.querySelector('#myFileTemplBox');
-  scrollHeight.value = myTemplBox.offsetHeight - 10;
-  showScroll.value = true;
-  getMaterialList();
+  startPage();
 });
 
-// 获取模板数据
-const getTempData = (json, id) => {
-  Spin.show({
-    render: (h) => h('div', t('alert.loading_data')),
-  });
-  // console.log(json, 111);
-  routerToId(id);
-  canvasEditor.loadJSON(JSON.stringify(json), Spin.hide);
-};
-
-const getTmplListHandler = (index, searchKeyword) => {
-  const query = {
-    populate: {
-      img: '*',
-    },
-    filters: {},
-    pagination: {
-      page: index,
-      pageSize: 50,
-    },
-  };
-  const queryParams = getQueryParams(query, [
-    {
-      key: 'name',
-      value: searchKeyword,
-      type: '$contains',
-    },
-  ]);
-  return getTmplList(queryParams)
-    .then((res) => {
-      const list = res.data.data.map((item) => {
-        return {
-          id: item.id,
-          name: item.attributes.name,
-          desc: item.attributes.desc,
-          json: item.attributes.json,
-          src: getMaterialInfoUrl(item.attributes.img),
-          previewSrc: getMaterialPreviewUrl(item.attributes.img),
-        };
-      });
-      return { list, pagination: res?.data?.meta?.pagination };
-    })
-    .catch((err) => {
-      return err;
+const fileTypeName = ref('');
+const modalSizeRef = ref(null);
+// 新建文件
+const createType = (type) => {
+  if (type === 'fileType') {
+    fileTypeName.value = '';
+    Modal.confirm({
+      title: '新建文件夹',
+      render: (h) => {
+        return h(Input, {
+          size: 'large',
+          modelValue: fileTypeName,
+          autofocus: true,
+          placeholder: '请输入文件夹名称',
+        });
+      },
+      onOk: async () => {
+        if (fileTypeName.value === '') {
+          Message.warning('文件夹名称不能为空');
+          return;
+        }
+        await createdFileType(fileTypeName.value, filters.parentId.$eq);
+        startGetList();
+      },
     });
+  } else {
+    modalSizeRef.value.showSetSize();
+  }
 };
-
-const getQueryParams = (option, filters) => {
-  filters.forEach((item) => {
-    const { key, value, type } = item;
-    if (value) {
-      option.filters[key] = { [type]: value };
-    }
-  });
-  return qs.stringify(option);
-};
-
-const getMaterialInfoUrl = (info) => {
-  const imgUrl = info?.data?.attributes?.url || '';
-  return APIHOST + imgUrl;
+const customSizeCreate = async (w, h) => {
+  await createTmpl(w, h, filters.parentId.$eq);
+  startGetList();
 };
 
-const getMaterialPreviewUrl = (info) => {
-  const imgUrl = info?.data?.attributes?.formats?.medium?.url || info?.data?.attributes?.url || '';
-  return APIHOST + imgUrl;
+const filePath = ref([
+  {
+    name: '全部',
+    parentId: '',
+  },
+]);
+// 进入文件夹
+const joinFileTyper = (id, name) => {
+  filters.parentId.$eq = String(id);
+  filePath.value.push({
+    name: name,
+    parentId: id,
+  });
+  startGetList();
 };
 
-const removeTempl = (id) => {
-  removeTemplInfo(id).then(() => {
-    Message.success('删除成功');
-    startGetMaterialList();
-  });
+// 面包屑跳转文件夹
+const toFile = (id, i) => {
+  const isLast = i === filePath.value.length - 1;
+  if (!isLast) {
+    filters.parentId.$eq = id;
+    filePath.value = filePath.value.slice(0, i + 1);
+    startGetList();
+  }
 };
 </script>
 
 <style scoped lang="less">
 .search-box {
-  padding-top: 10px;
   padding-bottom: 10px;
   display: flex;
-  .input {
-    margin-left: 10px;
-  }
-  .select {
-    width: 100px;
-  }
 }
 
-.img-group {
-  background: #eeeeeea1;
-  border-radius: 10px;
-  padding: 10px;
+/deep/.ivu-scroll-content {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding-right: 10px;
 }
-.tmpl-img-box {
-  width: 140px;
-  height: 180px;
-  padding: 5px;
+.item {
+  margin-bottom: 10px;
+}
+/deep/.ivu-breadcrumb-item-link {
   cursor: pointer;
-  border-radius: 10px;
-  position: relative;
-
   &:hover {
-    background: #e3e3e3;
-    .del-btn {
-      right: 5px;
-    }
+    color: #57a3f3;
   }
 }
-
-.del-btn {
-  z-index: 1;
-  position: absolute;
-  top: 5px;
-  right: 1000000px;
-}
 </style>
diff --git a/src/components/myMaterial/uploadMaterial.vue b/src/components/myMaterial/uploadMaterial.vue
index c7d7f761..1ba477f6 100644
--- a/src/components/myMaterial/uploadMaterial.vue
+++ b/src/components/myMaterial/uploadMaterial.vue
@@ -2,7 +2,7 @@
  * @Author: 秦少卫
  * @Date: 2024-04-25 15:30:54
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-05-11 14:42:44
+ * @LastEditTime: 2024-05-30 12:02:24
  * @Description: 我的素材
 -->
 
@@ -109,10 +109,6 @@ const removeMaterialHandle = (id) => {
 </script>
 
 <style scoped lang="less">
-.my-material {
-  padding-top: 10px;
-}
-
 .img-group {
   background: #eeeeeea1;
   border-radius: 10px;
@@ -125,6 +121,7 @@ const removeMaterialHandle = (id) => {
   padding: 5px;
   cursor: pointer;
   border-radius: 10px;
+  text-align: center;
 
   &:hover {
     background: #e3e3e3;
diff --git a/src/components/myTemplName.vue b/src/components/myTemplName.vue
index d1de0495..8ccde0cd 100644
--- a/src/components/myTemplName.vue
+++ b/src/components/myTemplName.vue
@@ -2,7 +2,7 @@
  * @Author: 秦少卫
  * @Date: 2024-05-11 13:23:48
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-05-29 10:25:44
+ * @LastEditTime: 2024-05-30 14:44:50
  * @Description: 文件名称
 -->
 
@@ -25,6 +25,7 @@
 
 <script name="ImportJson" setup>
 import { debounce } from 'lodash-es';
+import { Message } from 'view-ui-plus';
 import useMaterial from '@/hooks/useMaterial';
 import { useRoute, useRouter } from 'vue-router';
 import useSelect from '@/hooks/select';
@@ -104,6 +105,11 @@ const queryTemplIdByProId = (projectid) => {
 };
 
 const saveTempl = () => {
+  if (fileName.value === '') {
+    Message.warning('文件名称不能为空');
+    fileName.value = '默认文件名称';
+    return;
+  }
   loading.value = true;
   updataTemplInfo(route.query.id, fileName.value)
     .then()
diff --git a/src/hooks/useFileType.js b/src/hooks/useFileType.js
new file mode 100644
index 00000000..ce2ce455
--- /dev/null
+++ b/src/hooks/useFileType.js
@@ -0,0 +1,40 @@
+/*
+ * @Author: 秦少卫
+ * @Date: 2024-05-29 15:13:58
+ * @LastEditors: 秦少卫
+ * @LastEditTime: 2024-05-29 15:32:49
+ * @Description: 文件夹分页
+ */
+
+import {
+  createFileType as createFileTypeApi,
+  getFileTypeList as getFileTypeListApi,
+} from '@/api/user';
+import { Spin } from 'view-ui-plus';
+export default function useFileType() {
+  const createFileType = async (fileTypeName, parentId = '') => {
+    Spin.show();
+    const res = await createFileTypeApi({
+      data: {
+        name: fileTypeName,
+        parentId,
+      },
+    });
+    Spin.hide();
+    return res;
+  };
+
+  const getFileTypeList = async (params) => {
+    Spin.show();
+    const res = await getFileTypeListApi({
+      data: params,
+    });
+    Spin.hide();
+    return res;
+  };
+
+  return {
+    createFileType,
+    getFileTypeList,
+  };
+}
diff --git a/src/hooks/useMaterial.js b/src/hooks/useMaterial.js
index d66f9c71..bb4261f3 100644
--- a/src/hooks/useMaterial.js
+++ b/src/hooks/useMaterial.js
@@ -2,7 +2,7 @@
  * @Author: 秦少卫
  * @Date: 2024-05-11 11:51:59
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-05-29 10:14:01
+ * @LastEditTime: 2024-05-30 15:09:18
  * @Description: 素材相关
  */
 
@@ -20,7 +20,7 @@ export default function useMaterial() {
   const canvasEditor = inject('canvasEditor');
 
   // 创建模板
-  const createTmpl = async (width, height) => {
+  const createTmpl = async (width, height, parentId = '') => {
     canvasEditor.clear();
     canvasEditor.setSize(width, height);
     const name = dayjs().format('YYYY[年]MM[月]DD[日]HH[小时]mm[分钟]ss[秒]') + '创建的作品';
@@ -29,12 +29,25 @@ export default function useMaterial() {
     const templInfo = await createdTempl({
       data: {
         ...data,
+        type: 'file',
+        parentId: String(parentId),
         name,
       },
     });
+    routerToId(templInfo.data.data.id);
     return templInfo;
   };
 
+  const createdFileType = async (name, parentId = '') => {
+    await createdTempl({
+      data: {
+        name,
+        type: 'fileType',
+        parentId: String(parentId),
+      },
+    });
+  };
+
   const createTmplByCommon = async () => {
     const name = dayjs().format('YYYY[年]MM[月]DD[日]HH[小时]mm[分钟]ss[秒]') + '创建的作品';
     const data = await getCanvasCommonData();
@@ -42,6 +55,8 @@ export default function useMaterial() {
     const templInfo = await createdTempl({
       data: {
         ...data,
+        type: 'file',
+        parentId: '',
         externalId: route.query?.projectid || null,
         name,
       },
@@ -125,6 +140,27 @@ export default function useMaterial() {
       });
     });
   };
+
+  const removeFileType = (id) => {
+    return new Promise((resolve, reject) => {
+      Modal.confirm({
+        title: t('my_spase.remove_file_type'),
+        content: `<p>${t('my_spase.remove_file_type_Tip')}</p>`,
+        onOk: () => {
+          removeTempl(id).then(resolve).catch(reject);
+        },
+      });
+    });
+  };
+
+  const reNameFileType = async (name, id) => {
+    await updataTempl(id, {
+      data: {
+        name,
+      },
+    });
+  };
+
   return {
     createTmpl,
     createTmplByCommon,
@@ -132,5 +168,8 @@ export default function useMaterial() {
     updataTemplInfo,
     removeTemplInfo,
     routerToId,
+    createdFileType, // 创建文件夹
+    reNameFileType, // 修改文件夹名称
+    removeFileType, // 删除文件夹
   };
 }
diff --git a/src/hooks/usePageList.js b/src/hooks/usePageList.js
new file mode 100644
index 00000000..b0c3140c
--- /dev/null
+++ b/src/hooks/usePageList.js
@@ -0,0 +1,130 @@
+/*
+ * @Author: 秦少卫
+ * @Date: 2024-05-29 15:39:20
+ * @LastEditors: 秦少卫
+ * @LastEditTime: 2024-05-30 15:04:06
+ * @Description: 通用分页
+ */
+
+import qs from 'qs';
+
+const APIHOST = import.meta.env.APP_APIHOST;
+export default function usePageList({ el, apiClient, filters = {}, sort = [], formatData }) {
+  //  滚动条根据页面适应
+  const showScroll = ref(false);
+  const scrollHeight = ref(0);
+  const startPage = async () => {
+    // 滚动
+    const myTemplBox = document.querySelector(el);
+    scrollHeight.value = myTemplBox.offsetHeight;
+    showScroll.value = true;
+
+    await startGetList();
+  };
+
+  // 素材列表
+  const pageData = ref([]);
+  const page = ref(1);
+  const pagination = reactive({
+    page: 0,
+    pageCount: 0,
+    pageSize: 10,
+    total: 0,
+  });
+
+  // 是否到达底部
+  const isDownBottom = computed(() => {
+    return pagination.page === page.value && pagination.page >= pagination.pageCount;
+  });
+
+  const pageLoading = ref(false);
+  const getPageData = async () => {
+    pageLoading.value = true;
+    try {
+      const query = {
+        populate: {
+          img: '*',
+        },
+        filters: {},
+        sort: sort,
+        pagination: {
+          page: page.value,
+          pageSize: page.pageSize,
+        },
+      };
+
+      const params = addFilterParams(query, filters);
+      const res = await apiClient(qs.stringify(params));
+      const list = formatData ? formatData(res.data.data) : res.data.data;
+      Object.keys(res.data.meta.pagination).forEach((key) => {
+        pagination[key] = res.data.meta.pagination[key];
+      });
+      pageData.value = [...pageData.value, ...list];
+    } catch (error) {
+      console.log(error);
+    }
+    // Spin.hide();
+    pageLoading.value = false;
+  };
+
+  const startGetList = () => {
+    pageData.value = [];
+    page.value = 1;
+    getPageData();
+  };
+
+  const nextPage = () => {
+    if (page.value >= pagination.pageCount) return;
+    page.value++;
+    setTimeout(() => {
+      getPageData();
+    }, 1000);
+  };
+
+  const addFilterParams = (query, filters) => {
+    Object.keys(filters).forEach((key) => {
+      const itemFilter = {};
+      Object.keys(filters[key]).forEach((myKey) => {
+        const skip = ['$eq', '$contains'];
+        const isNone = !filters[key][myKey];
+        const isSkip = skip.includes(myKey) && isNone;
+        // 不好包含跳过条件
+        if (!isSkip) {
+          itemFilter[myKey] = filters[key][myKey];
+        } else {
+          // 跳过条件下 判断是否过滤 默认过滤
+          const isFilterEmpty = filters[key].filterEmpty;
+          if (!isFilterEmpty) {
+            itemFilter[myKey] = filters[key][myKey];
+          }
+        }
+      });
+      query.filters[key] = itemFilter;
+    });
+    return query;
+  };
+
+  return {
+    pageData, // 分页数据
+    showScroll,
+    scrollHeight,
+    pageLoading,
+    isDownBottom, // 是否到达底部
+    startPage, // 开始分页
+    getPageData, // 获取分页数据
+    startGetList, // 从第一个开始
+    nextPage, // 下一页
+  };
+}
+
+const getMaterialInfoUrl = (info) => {
+  const imgUrl = info?.data?.attributes?.url || '';
+  return APIHOST + imgUrl;
+};
+
+const getMaterialPreviewUrl = (info) => {
+  const imgUrl = info?.data?.attributes?.formats?.small?.url || info?.data?.attributes?.url || '';
+  return APIHOST + imgUrl;
+};
+
+export { getMaterialInfoUrl, getMaterialPreviewUrl };
diff --git a/src/language/zh.json b/src/language/zh.json
index 35966d21..da5bb284 100644
--- a/src/language/zh.json
+++ b/src/language/zh.json
@@ -62,7 +62,9 @@
   "mymaterial": "我的",
   "my_spase": {
     "remove_templ": "删除模板",
-    "remove_templTip": "确认删除模板吗？"
+    "remove_templTip": "确认删除模板吗？",
+    "remove_file_type": "确认删除文件夹吗？",
+    "remove_file_type_Tip": "确认删除模板吗？"
   },
   "title_template": "标题模板",
   "insert_svg": "插入SVG元素",
@@ -227,4 +229,4 @@
   "myMaterial": {
     "uploadBtn": "上传素材"
   }
-}
+}
\ No newline at end of file
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index d9508b35..80c2f8ca 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -2,7 +2,7 @@
  * @Author: 秦少卫
  * @Date: 2024-05-17 15:30:21
  * @LastEditors: 秦少卫
- * @LastEditTime: 2024-05-27 16:10:14
+ * @LastEditTime: 2024-05-30 14:11:31
  * @Description: file content
 -->
 <template>
@@ -526,8 +526,7 @@ provide('mixinState', mixinState);
 .content {
   flex: 1;
   width: 220px;
-  padding: 10px;
-  padding-top: 0;
+  padding: 0 10px;
   height: 100%;
   overflow-y: auto;
 }