feima-shortcuts 0.1.0 → 0.1.1

package/bin/feima.js

@@ -28,7 +28,7 @@ const run = () => {
         type: "list",
         name: "template-type",
         message: "请选择页面模版类型",
-        choices: ["card", 'tabs', 'form'],
+        choices: ["card", 'tabs', 'form-card','form-collapse(没有拆分组件)'],
         when: function (answers) {
           return answers['template-path'];
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feima-shortcuts",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "快捷指令",
   "main": "index.js",
   "directories": {

package/src/scripts/template/formCollapse.js

@@ -0,0 +1,273 @@
+const fs = require("fs");
+const { makeDir } = require("../../utils/makeDir");
+
+
+function toKebabCase(str) {
+  if (/^[A-Z]/.test(str)) {
+    throw new Error('首字母不能是大写');
+  }
+  return str.replace(/([A-Z])/g, '-$1').toLowerCase();
+}
+
+const templateStr = ({fileName}) => { 
+  const className = toKebabCase(fileName);
+
+  return `<template>
+  <div class="${className}">
+    <el-form
+      ref="formRef"
+      inline
+      :model="formValue"
+      label-width="120px"
+      label-suffix="："
+    >
+      <el-collapse v-model="openNames">
+        <el-collapse-item name="base">
+          <template #title>
+            <div class="${className}-header">基本信息（collapse-item内的el-form-item应该拆分到组件内）</div>
+          </template>
+          <el-form-item
+            class="block"
+            label="测试姓名"
+            prop="name"
+            :rules="[
+              {
+                required: true,
+                message: '请输入测试姓名',
+                trigger: 'blur',
+              },
+            ]"
+          >
+            <el-input v-model="formValue.name" />
+          </el-form-item>
+          <el-form-item
+            label="测试2"
+            prop="test2"
+          >
+            <el-input v-model="formValue.test1" />
+          </el-form-item>
+          <el-form-item
+            label="测试3"
+            prop="test3"
+          >
+            <el-input v-model="formValue.test1" />
+          </el-form-item>
+        </el-collapse-item>
+        <el-collapse-item name="other">
+          <template #title>
+            <div class="${className}-header">其他信息</div>
+          </template>
+          <el-form-item
+            class="block-content"
+            label="备注（只是示例）"
+            prop="remark"
+          >
+            <el-input
+              v-model="formValue.remark"
+              :rows="3"
+              type="textarea"
+            />
+          </el-form-item>
+          <el-form-item
+            class="block-content"
+            label="富文本（只是示例）"
+            prop="remark"
+          >
+            <ProFormTinymce v-model="formValue.richText" />
+          </el-form-item>
+
+          <el-form-item
+            class="block-content"
+            label="富文本（只是示例）"
+            prop="remark"
+          >
+            <ProFormImage
+              v-model="formValue.images"
+              :limit="1"
+              :before-upload="handleBeforeUpload"
+            >
+              <template #footer>
+                <div class="pro-form-image-tip">
+                  <el-icon color="red"><Warning /></el-icon>
+                  仅支持上传宽度750px且大小不超过1MB图片
+                </div>
+              </template>
+            </ProFormImage>
+          </el-form-item>
+        </el-collapse-item>
+      </el-collapse>
+    </el-form>
+
+    <PageFooter>
+      <el-button
+        type="primary"
+        v-fLoading="onSubmit"
+      >
+        提交
+      </el-button>
+    </PageFooter>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { ElMessage } from "element-plus";
+
+import PageFooter from "@/components/PageFooter.vue";
+import ProFormTinymce from "@/components/ProFormTinymce.vue";
+import ProFormImage from "@/components/ProFormImage.vue";
+
+defineOptions({
+  name: "${fileName}",
+});
+
+const formRef = ref<any>();
+const formValue = ref<any>({
+  name: "",
+  test2: "",
+  test3: "",
+  remark: "",
+  richText: "",
+  images: [],
+});
+
+const openNames = ref(["base", "other"]);
+
+// 上传之前的处理
+const handleBeforeUpload = (file: any) => {
+  if (file.size > 1048576) {
+    ElMessage.error("超出最大上传大小，图片不能大于1MB");
+    return false;
+  }
+  // 示例，不需要自己删除
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = () => {
+      const img: any = new Image();
+      img.src = reader.result;
+
+      img.onload = () => {
+        // 检查图片宽度是否超过 750px
+        if (img.width != 750) {
+          ElMessage.error("图片宽度需为 750 像素");
+          reject(); // 取消上传
+        } else {
+          resolve(""); // 宽度合格，允许上传
+        }
+      };
+
+      img.onerror = () => {
+        ElMessage.error("图片加载失败");
+        reject(); // 图片加载失败，取消上传
+      };
+    };
+
+    reader.readAsDataURL(file); // 读取文件
+  });
+};
+const onSubmit = async () => {
+  await formRef.value.validate();
+  try {
+    const { images, ...values } = formValue.value;
+    const submitData = {
+      ...values,
+      images: images.map((item: any) => item.path).join(","),
+    };
+    let formData = new FormData();
+    formData.append("json", JSON.stringify(submitData));
+    // const res: any = await addTransferOrder({
+    //   data: formData,
+    // });
+    // if (res.code != 200) {
+    //   ElMessage.error(res.message || "系统出错");
+    //   return;
+    // }
+    // ElMessage.success(res.message);
+  } catch (error) {
+    console.error(error);
+  }
+};
+</script>
+<style lang="scss" scoped>
+.${className} {
+  padding-bottom: var(--page-footer-height);
+  --form-item-content: 250px;
+
+  :deep(.el-collapse) {
+    border-top: none;
+  }
+
+  :deep(.el-form-item) {
+    vertical-align: top;
+  }
+
+  :deep(.el-form-item__content) {
+    width: var(--form-item-content);
+    flex: 0 auto;
+  }
+
+  .block {
+    width: 100%;
+  }
+  .block-content {
+    width: 100%;
+
+    :deep(.el-form-item__content) {
+      width: 100%;
+    }
+  }
+
+  &-header {
+    margin-left: var(--base-padding);
+    position: relative;
+    font-size: var(--base-title-h3);
+    font-weight: bold;
+    line-height: 1.34;
+    padding-left: var(--base-padding);
+
+    &::after {
+      content: "\\0020";
+      position: absolute;
+      left: 0;
+      top: 50%;
+      width: 4px;
+      height: 70%;
+      transform: translateY(-50%);
+      background-color: var(--el-text-color-primary);
+      border-radius: 4px;
+    }
+  }
+
+  .el-collapse-item {
+    margin-bottom: var(--el-main-padding);
+  }
+}
+</style>`;
+};
+
+
+
+exports.run = function (answers) {
+  const filePath = `./src/views/${answers['template-path']}.vue`;
+  const parts = filePath.split('/');
+  const fileName = parts[parts.length - 2];
+  const fileIndex = parts[parts.length - 1];
+  const makeDirPath = [...parts].slice(0, -1).join('/');
+
+  makeDir(makeDirPath);
+  process.chdir(makeDirPath);
+
+  const template = templateStr({ fileName });
+  
+  const targetFilePath = `./${fileIndex}`;
+
+   // 新增：判断文件是否存在
+  if (fs.existsSync(targetFilePath)) {
+    console.log(`❌ 文件已存在：${targetFilePath}，未进行覆盖操作。`);
+    return;
+  }
+  
+  fs.writeFileSync(targetFilePath, template);
+  console.log(`✅ 文件创建成功`);
+};

package/src/scripts/template/index.js

@@ -1,6 +1,7 @@
 const card = require("./card");
 const tabs = require("./tabs");
-const form = require("./form");
+const formCard = require("./formCard");
+const formCollapse = require("./formCollapse");
 
 exports.run = function (answers) {
   if (answers['template-type'] === "card") {
@@ -9,7 +10,10 @@ exports.run = function (answers) {
   if (answers['template-type'] === "tabs") {
     tabs.run(answers);
   };
-  if (answers['template-type'] === "form") {
-    form.run(answers);
+  if (answers['template-type'] === "form-card") {
+    formCard.run(answers);
+  };
+  if (answers['template-type'] === "form-collapse(没有拆分组件)") {
+    formCollapse.run(answers);
   };
 };