feat(用户素材): 新增文件夹功能

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: 用户接口登录
  */
 

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);
     }
   }

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"

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>

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>

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;