feat:temp

openRenamerBackend/api/FileApi.ts

@@ -1,18 +1,28 @@
 import { Context } from "koa";
 import FileService from "../service/FileService";
+import config from "../config";
 
 const router = {};
 
+/**
+ * 获取目录下的文件列表 
+ */
 router["GET /file/query"] = async function (ctx: Context) {
-    ctx.body = FileService.readPath(ctx.query.path as string);
+    ctx.body = await FileService.readPath(ctx.query.path as string, ctx.query.showHidden === '1');
 };
 
-router["PUT /plan"] = async function (ctx: Context) {
+/**
-    ctx.body = "asdfasdf";
+ *是否windows 
-};
+ */
-
+router['GET /file/isWindows'] = async function (ctx:Context) {
-router["DELETE /plan/:planId"] = async function (ctx: Context) {
+    ctx.body=config.isWindows;
-    ctx.body = "";
 }
 
+/**
+ * 检查路径是否存在 
+ */
+router["GET /file/path/exist"] = async function (ctx: Context) {
+    ctx.body = await FileService.checkExist(ctx.query.path as string);
+};
+
 export default router;

openRenamerBackend/config.ts

@@ -6,20 +6,9 @@ const rootPath = path.resolve(__dirname, '..');
 let config = {
   rootPath,
   port: process.env.PORT ? parseInt(process.env.PORT) : 8089,
-  urlPrefix: '/backup/api',
+  urlPrefix: '/openRenamer/api',
   //是否为windows平台
   isWindows: process.platform.toLocaleLowerCase().includes("win"),
-  //需要监控的磁盘列表
-  disKCheckList: ["/dev/nvme0n1", "/dev/nvme1n1"],
-  mysqlConfig: {
-    host: process.env.MYSQL_HOST || "localhost",
-    database: "nas_backup",
-    port: process.env.MYSQL_PORT ? parseInt(process.env.MYSQL_PORT) : 3306,
-    user: process.env.MYSQL_USER || "root",
-    password: process.env.MYSQL_PASS || "123456",
-    supportBigNumbers: true,
-    multipleStatements: false
-  },
   bodyLimit: {
     formLimit: '2mb',
     urlencoded: true,

openRenamerBackend/index.ts

@@ -29,8 +29,11 @@ app.use(handleError);
 
 app.use(RouterMW(router, path.join(config.rootPath, "dist/api")));
 (async () => {
-  await SqliteUtil.createPool(config.mysqlConfig);
+  await SqliteUtil.createPool();
   app.listen(config.port);
   log.info(`server listened `, config.port);
 })();
 
+app.on("error", (error) => {
+  console.error(error);
+})

openRenamerBackend/service/FileService.ts

@@ -6,40 +6,53 @@ import ProcessHelper from '../util/ProcesHelper';
 import FileObj from '../vo/FileObj';
 
 class FileService {
-
+    static async readPath(pathStr: string, showHidden: boolean): Promise<Array<FileObj>> {
-    static async readPath(pathStr: string): Promise<Array<FileObj>> {
+        pathStr = decodeURIComponent(pathStr);
         let fileList = new Array();
         if (pathStr.trim().length == 0) {
             //获取根目录路径
             if (config.isWindows) {
                 //windows下
-                let std: string = (await ProcessHelper.exec("wmic logicaldisk get caption") as Object)['stdout'].replace("Caption", "");
+                let std: string = ((await ProcessHelper.exec('wmic logicaldisk get caption')) as Object)['stdout'].replace('Caption', '');
-                fileList = std.split("\r\n").filter(item => item.trim().length > 0).map(item => item.trim());
+                fileList = std
+                    .split('\r\n')
+                    .filter((item) => item.trim().length > 0)
+                    .map((item) => item.trim());
             } else {
                 //linux下
-                pathStr = "/";
+                pathStr = '/';
                 fileList = await fs.readdir(pathStr);
             }
         } else {
             fileList = await fs.readdir(pathStr);
         }
-        let resList = new Array();
+        let folderList: Array<FileObj> = new Array();
+        let files: Array<FileObj> = new Array();
         for (let index in fileList) {
             try {
                 let stat = await fs.stat(path.join(pathStr, fileList[index]));
-                resList.push(new FileObj(fileList[index], stat.isDirectory(), stat.birthtime.getTime(), stat.mtime.getTime()));
+                if (fileList[index].startsWith('.')) {
+                    if (showHidden) {
+                        (stat.isDirectory() ? folderList : files).push(
+                            new FileObj(fileList[index], pathStr, stat.isDirectory(), stat.birthtime.getTime(), stat.mtime.getTime()),
+                        );
+                    }
+                } else {
+                    (stat.isDirectory() ? folderList : files).push(
+                        new FileObj(fileList[index], pathStr, stat.isDirectory(), stat.birthtime.getTime(), stat.mtime.getTime()),
+                    );
+                }
             } catch (e) {
                 console.error(e);
             }
         }
-        return resList;
+        folderList.sort((a, b) => a.name.localeCompare(b.name)).push(...files.sort((a, b) => a.name.localeCompare(b.name)));
+        return folderList;
     }
 
-    static async createPath(pathStr: string) {
+    static async checkExist(pathStr: string) {
-        await fs.ensureDir(pathStr);
+        return await fs.pathExists(pathStr);
     }
-
 }
 
-
 export default FileService;

openRenamerBackend/util/SqliteHelper.ts

@@ -11,7 +11,7 @@ const HISTORY_NAME = "history.json";
 class MysqlUtil {
     public static pool: Database = null;
 
-    static async createPool(mysqlConfig: any) {
+    static async createPool() {
         MysqlUtil.pool = await open({
             filename: path.join(config.rootPath, "database.db"),
             driver: sqlite3.Database

openRenamerBackend/vo/FileObj.ts

@@ -3,6 +3,10 @@ export default class FileObj {
 	 * 文件名
 	 */
 	name: string;
+	/**
+	 * 所属路径
+	 */
+	path: string;
 	/**
 	 * 是否文件夹
 	 */
@@ -17,8 +21,9 @@ export default class FileObj {
 	updatedTime: number;
 
 
-	constructor(name, isFolder, createdTime, updatedTime) {
+	constructor(name, path, isFolder, createdTime, updatedTime) {
 		this.name = name;
+		this.path = path;
 		this.isFolder = isFolder;
 		this.createdTime = createdTime;
 		this.updatedTime = updatedTime;

openRenamerFront/.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+package-lock.json
 
 
 # local env files

openRenamerFront/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "element-plus": "^1.0.2-beta.48",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0"
   },

openRenamerFront/src/App.vue

@@ -1,11 +1,27 @@
 <template>
-  <div id="nav">
+  <el-menu
-    <router-link to="/">Home</router-link> |
+    :default-active="activeIndex"
-    <router-link to="/about">About</router-link>
+    class="el-menu-demo"
-  </div>
+    mode="horizontal"
+    @select="handleSelect"
+  >
+    <el-menu-item index="dealCenter">处理中心</el-menu-item>
+    <el-menu-item index="history">历史记录</el-menu-item>
+  </el-menu>
   <router-view />
 </template>
 
+<script>
+export default {
+  name: "Home",
+  data() {
+    return {
+      activeIndex: "dealCenter",
+    };
+  },
+};
+</script>
+
 <style lang="less">
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;

openRenamerFront/src/components/FileChose.vue

@@ -0,0 +1,129 @@
+<template>
+  <div v-loading="loading" class="main">
+    <el-breadcrumb separator="/">
+      <el-breadcrumb-item
+        ><a @click.prevent="breadcrumbClick(-1)">根</a></el-breadcrumb-item
+      >
+      <el-breadcrumb-item v-for="(item, index) in pathList" :key="index">
+        <a
+          v-if="index < pathList.length - 1"
+          @click.prevent="breadcrumbClick(index)"
+          >{{ item }}</a
+        >
+        <span v-else>{{ item }}</span>
+      </el-breadcrumb-item>
+    </el-breadcrumb>
+
+    <div class="fileList">
+      <div>
+        <el-button type="primary" @click="selectAll(true)" size="mini"
+          >全选</el-button
+        >
+        <el-button type="primary" @click="selectAll(false)" size="mini"
+          >全不选</el-button
+        >
+      </div>
+      <div v-for="(item, index) in fileList" :key="index">
+        <span class="folder" v-if="item.isFolder" @click="fileClick(item)">{{
+          item.name
+        }}</span>
+        <el-checkbox v-model="item.checked" v-else>{{ item.name }}</el-checkbox>
+      </div>
+    </div>
+
+    <div>
+      <el-button type="primary" @click="submit">确定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import HttpUtil from "../utils/HttpUtil";
+export default {
+  name: "FileChose",
+  data() {
+    return {
+      isWindows: false,
+      fileList: [], //路径下的文件节点
+      chosedFileList: [], //选中的文件节点
+      pathList: [], //选择的路径
+      loading: false, //加载
+    };
+  },
+  async mounted() {
+    this.isWindows = await HttpUtil.get("/file/isWindows");
+    await this.breadcrumbClick(-1);
+  },
+  methods: {
+    //点击面包蟹
+    async breadcrumbClick(index) {
+      this.loading = true;
+      let path = this.createPath(index);
+      let fileList = await HttpUtil.get("/file/query", {
+        path: encodeURIComponent(path),
+        showHidden: false,
+      });
+      fileList.forEach((item) => (item.checked = false));
+      this.fileList = fileList;
+      this.loading = false;
+      return false;
+    },
+    //文件列表点击
+    fileClick(item) {
+      if (item.isFolder) {
+        this.pathList.push(item.name);
+        this.breadcrumbClick(this.pathList.length);
+      } else {
+        item.checked = !item.checked;
+      }
+    },
+    //全选
+    selectAll(status) {
+      this.fileList
+        .filter((item) => !item.isFolder)
+        .forEach((item) => (item.checked = status));
+    },
+    //根据index构建路径
+    createPath(index) {
+      let path;
+      if (index == -1) {
+        path = "/";
+        this.pathList = [];
+      } else {
+        this.pathList = this.pathList.slice(0, index + 1);
+        let str = this.pathList.join(this.isWindows ? "\\" : "/");
+        path = this.isWindows ? str : "/" + str;
+      }
+      return path;
+    },
+    //点击确定
+    submit() {
+      let chosedFiles = this.fileList.filter((item) => item.checked);
+      if (chosedFiles.length == 0) {
+        this.$message({ message: "未选择文件", type: "warning" });
+        return;
+      }
+      this.$emit("addData", chosedFiles);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  height: 65vh;
+}
+.fileList {
+  padding: 1em;
+  text-align: left;
+  height: 80%;
+  overflow: hidden auto;
+
+  .folder {
+    cursor: pointer;
+    color: blue;
+    display: inline-block;
+    min-width: 3em;
+  }
+}
+</style>

openRenamerFront/src/components/HelloWorld.vue

@@ -1,97 +1,5 @@
 <template>
-  <div class="hello">
+  <div class="hello">hello World!</div>
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br />
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
-        >vue-cli documentation</a
-      >.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          rel="noopener"
-          >babel</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
-          target="_blank"
-          rel="noopener"
-          >router</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-          target="_blank"
-          rel="noopener"
-          >eslint</a
-        >
-      </li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li>
-        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
-      </li>
-      <li>
-        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
-          >Forum</a
-        >
-      </li>
-      <li>
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
-          >Community Chat</a
-        >
-      </li>
-      <li>
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
-          >Twitter</a
-        >
-      </li>
-      <li>
-        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
-      </li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li>
-        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
-          >vue-router</a
-        >
-      </li>
-      <li>
-        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-devtools#vue-devtools"
-          target="_blank"
-          rel="noopener"
-          >vue-devtools</a
-        >
-      </li>
-      <li>
-        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
-          >vue-loader</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-          rel="noopener"
-          >awesome-vue</a
-        >
-      </li>
-    </ul>
-  </div>
 </template>
 
 <script>

openRenamerFront/src/components/Rule.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="main">
+    <el-menu
+      style="width: 8em"
+      mode="vertical"
+      :default-active="currentIndex"
+      @select="menuChange"
+    >
+      <el-menu-item :disabled="editRule" index="insert">插入</el-menu-item>
+      <el-menu-item :disabled="editRule" index="delete">删除</el-menu-item>
+      <!-- <el-menu-item index="replace">替换</el-menu-item> -->
+      <el-menu-item :disabled="editRule" index="serialization"
+        >序列化</el-menu-item
+      >
+    </el-menu>
+    <div class="rule">
+      <insert-rule
+        ref="rule"
+        :editRule="editRule"
+        v-if="currentIndex == 'insert'"
+      />
+      <delete-rule
+        ref="rule"
+        :editRule="editRule"
+        v-else-if="currentIndex == 'delete'"
+      />
+      <serialization-rule
+        ref="rule"
+        :editRule="editRule"
+        v-else-if="currentIndex == 'serialization'"
+      />
+    </div>
+  </div>
+
+  <el-button type="primary" @click="submit">确定</el-button>
+</template>
+
+<script>
+import InsertRule from "./rules/InsertRule.vue";
+import DeleteRule from "./rules/DeleteRule.vue";
+import SerializationRule from "./rules/SerializationRule.vue";
+export default {
+  components: { InsertRule, DeleteRule, SerializationRule },
+  props: ["editRule"],
+  name: "Rule",
+  data() {
+    return {
+      currentIndex: "insert",
+      options: [{ label: "插入", value: "insert" }],
+    };
+  },
+  created() {
+    if (this.editRule) {
+      this.currentIndex = this.editRule.type;
+    }
+  },
+  methods: {
+    menuChange(index) {
+      this.currentIndex = index;
+    },
+    submit() {
+      let data = this.$refs["rule"].exportObj();
+      if (data != null) {
+        this.$emit("ruleAdd", data);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  display: flex;
+  height: 65vh;
+  text-align: left;
+
+  .rule {
+    padding: 5px;
+    flex: 1;
+  }
+}
+</style>

openRenamerFront/src/components/rules/DeleteRule.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="flex">
+    <span class="left">部分删除:</span>
+    <div class="location">
+      <div>
+        <div>开始</div>
+        <div class="line">
+          <el-radio
+            v-model="ruleObj.data.start.type"
+            label="location"
+            :disabled="deleteAll"
+            >位置：</el-radio
+          >
+          <el-input-number
+            :min="1"
+            size="small"
+            :disabled="deleteAll"
+            v-model="startIndex"
+          />
+        </div>
+        <div class="line">
+          <el-radio
+            v-model="ruleObj.data.start.type"
+            label="text"
+            :disabled="deleteAll"
+            >文本:</el-radio
+          >
+          <el-input v-model="startText" size="small" :disabled="deleteAll" />
+        </div>
+      </div>
+      <div style="margin-left: 4em">
+        <div>结束</div>
+        <div class="line">
+          <el-radio
+            v-model="ruleObj.data.end.type"
+            label="location"
+            :disabled="deleteAll"
+            >位置：</el-radio
+          >
+          <el-input-number
+            size="small"
+            :disabled="deleteAll"
+            v-model="endIndex"
+          />
+        </div>
+        <div class="line">
+          <el-radio
+            v-model="ruleObj.data.end.type"
+            label="text"
+            :disabled="deleteAll"
+            >文本:</el-radio
+          >
+          <el-input v-model="endText" size="small" :disabled="deleteAll" />
+        </div>
+        <div class="line">
+          <el-radio
+            v-model="ruleObj.data.end.type"
+            label="end"
+            :disabled="untilEnd"
+            >直到末尾</el-radio
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="flex">
+    <div class="left">全部删除:</div>
+    <el-switch v-model="deleteAll" @change="allDeleteChange" />
+  </div>
+
+  <div class="flex">
+    <div class="left">忽略拓展名:</div>
+    <el-switch v-model="ruleObj.data.ignorePostfix" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DeleteRule",
+  props: ["editRule"],
+  data() {
+    return {
+      ruleObj: {
+        type: "delete",
+        message: "",
+        data: {
+          type: "deletePart",
+          start: {
+            type: "location",
+            value: "",
+          },
+          end: {
+            type: "location",
+            value: "",
+          },
+          ignorePostfix: false,
+        },
+      },
+      startIndex: 1,
+      endIndex: 1,
+      startText: "",
+      endText: "",
+      deleteAll: false,
+    };
+  },
+  created() {
+    if (this.editRule) {
+      this.ruleObj = JSON.parse(JSON.stringify(this.editRule));
+      if (this.ruleObj.data.type == "deletePart") {
+        if (this.ruleObj.data.start.type == "location") {
+          this.startIndex = parseInt(this.ruleObj.data.start.value);
+        } else {
+          this.startText = this.ruleObj.data.start.value;
+        }
+        if (this.ruleObj.data.end.type == "location") {
+          this.endIndex = parseInt(this.ruleObj.data.end.value);
+        } else {
+          this.endText = this.ruleObj.data.end.value;
+        }
+      } else {
+        this.deleteAll = true;
+      }
+    }
+  },
+  methods: {
+    exportObj() {
+      if (this.ruleObj.data.type.length == 0) {
+        this.$message({ message: "请填写完整", type: "warning" });
+        return null;
+      }
+      if (this.ruleObj.data.type == "deletePart") {
+        if (
+          (this.ruleObj.data.start.type == "text" &&
+            this.startText.length == 0) ||
+          (this.ruleObj.data.start.type == "text" && this.startText.length == 0)
+        ) {
+          this.$message({
+            message: "开始或者结束文本不能为空",
+            type: "warning",
+          });
+          return null;
+        }
+      }
+      this.ruleObj.data.start.value =
+        this.ruleObj.data.start.type == "location"
+          ? this.startIndex.toString()
+          : this.startText;
+      this.ruleObj.data.end.value =
+        this.ruleObj.data.end.type == "location"
+          ? this.endIndex.toString()
+          : this.endText;
+      let message = `删除:`;
+      if (this.deleteAll) {
+        message += "全部删除";
+      } else {
+        message += `从"${this.ruleObj.data.start.value}"到"${
+          this.ruleObj.data.end.type == "untilEnd"
+            ? "末尾"
+            : this.ruleObj.data.end.value
+        }"`;
+      }
+      this.ruleObj.message = message;
+      return this.ruleObj;
+    },
+    allDeleteChange(val) {
+      console.log(val);
+      this.deleteAll = val;
+      this.ruleObj.data.type = val ? "deleteAll" : "deletePart";
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.flex {
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  padding-top: 1em;
+
+  .left {
+    width: 6em;
+  }
+
+  .location {
+    display: flex;
+    flex: 1;
+
+    .line {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-top: 0.5em;
+    }
+  }
+}
+</style>

openRenamerFront/src/components/rules/InsertRule.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="flex">
+    <span class="left">插入：</span>
+    <el-input style="flex: 1" v-model="ruleObj.data.insertContent" />
+  </div>
+  <div class="flex">
+    <span class="left">位置：</span>
+    <div class="location">
+      <el-radio
+        style="margin-top: 1em"
+        v-model="ruleObj.data.type"
+        label="front"
+        >前缀</el-radio
+      >
+      <el-radio
+        style="margin-top: 1em"
+        v-model="ruleObj.data.type"
+        label="backend"
+        >后缀</el-radio
+      >
+      <el-radio style="margin-top: 1em" v-model="ruleObj.data.type" label="at"
+        >位置:<el-input-number size="mini" v-model="ruleObj.data.atInput" />
+        &nbsp;&nbsp;
+        <el-switch
+          v-model="ruleObj.data.atIsRightToleft"
+          :min="1"
+          active-text="从右到左"
+          inactive-text="从左到右"
+        />
+      </el-radio>
+      <el-radio
+        style="margin-top: 1em"
+        v-model="ruleObj.data.type"
+        label="replace"
+        >替换当前文件名</el-radio
+      >
+    </div>
+  </div>
+  <div class="flex">
+    <div class="left">忽略拓展名:</div>
+    <el-switch v-model="ruleObj.data.ignorePostfix" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "InsertRule",
+  props: ["editRule"],
+  data() {
+    return {
+      ruleObj: {
+        type: "insert",
+        message: "",
+        data: {
+          insertContent: "",
+          type: "",
+          atInput: 0,
+          atIsRightToleft: false,
+          ignorePostfix: false,
+        },
+      },
+    };
+  },
+  created() {
+    if (this.editRule) {
+      console.log(this.editRule);
+      this.ruleObj = JSON.parse(JSON.stringify(this.editRule));
+    }
+  },
+  methods: {
+    exportObj() {
+      if (
+        this.ruleObj.data.insertContent.length == 0 ||
+        this.ruleObj.data.type.length == 0
+      ) {
+        this.$message({ message: "请填写完整", type: "warning" });
+        return null;
+      }
+      this.ruleObj.message = `插入:"${this.ruleObj.data.insertContent}"`;
+      return this.ruleObj;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.flex {
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  padding-top: 1em;
+
+  .left {
+    width: 6em;
+  }
+
+  .location {
+    justify-content: left;
+    flex-direction: column;
+    display: flex;
+  }
+}
+</style>

openRenamerFront/src/components/rules/SerializationRule.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="flex">
+    <span class="left">起始数：</span>
+    <div class="right">
+      <el-input-number :min="1" size="small" v-model="ruleObj.data.start" />
+    </div>
+  </div>
+  <div class="flex">
+    <span class="left">增量：</span>
+    <div class="right">
+      <el-input-number :min="1" size="small" v-model="ruleObj.data.increment" />
+    </div>
+  </div>
+  <div class="flex">
+    <span class="left">填充0补足：</span>
+    <div class="right">
+      <el-switch v-model="ruleObj.data.addZero" />
+      <el-input-number
+        size="small"
+        :min="1"
+        :disabled="!ruleObj.data.addZero"
+        v-model="ruleObj.data.numLength"
+      />
+    </div>
+  </div>
+  <div class="flex">
+    <span class="left">位置：</span>
+    <div class="location">
+      <el-radio
+        style="margin-top: 1em"
+        v-model="ruleObj.data.insertType"
+        label="front"
+        >前缀</el-radio
+      >
+      <el-radio
+        style="margin-top: 1em"
+        v-model="ruleObj.data.insertType"
+        label="backend"
+        >后缀</el-radio
+      >
+      <el-radio
+        style="margin-top: 1em"
+        v-model="ruleObj.data.insertType"
+        label="at"
+        >位置:<el-input-number
+          size="mini"
+          :min="1"
+          :disabled="ruleObj.data.insertType !== 'at'"
+          v-model="ruleObj.data.insertValue"
+        />
+      </el-radio>
+    </div>
+  </div>
+
+  <div class="flex">
+    <div class="left">忽略拓展名:</div>
+    <el-switch v-model="ruleObj.data.ignorePostfix" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SerializationRule",
+
+  props: ["editRule"],
+  data() {
+    return {
+      ruleObj: {
+        type: "serialization",
+        message: "",
+        data: {
+          start: 1,
+          increment: 1,
+          addZero: false,
+          numLength: 1,
+          ignorePostfix: false,
+          insertType: "front",
+          insertValue: 1,
+        },
+      },
+    };
+  },
+  created() {
+    if (this.editRule) {
+      this.ruleObj = JSON.parse(JSON.stringify(this.editRule));
+    }
+  },
+  methods: {
+    exportObj() {
+      this.ruleObj.message = `序列化:从开始${this.ruleObj.data.start}，增量${this.ruleObj.data.increment}`;
+      return this.ruleObj;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.flex {
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  padding-top: 1em;
+
+  .left {
+    width: 6em;
+  }
+
+  .location {
+    justify-content: left;
+    flex-direction: column;
+    display: flex;
+  }
+}
+</style>

openRenamerFront/src/main.js

@@ -1,5 +1,9 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
+import ElementPlus from "element-plus";
+import "element-plus/lib/theme-chalk/index.css";
 
-createApp(App).use(router).mount("#app");
+const vueInstance = createApp(App);
+vueInstance.use(router).use(ElementPlus).mount("#app");
+window.vueInstance = vueInstance;

openRenamerFront/src/router/index.js

@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from "vue-router";
-import Home from "../views/Home.vue";
+import Home from "../views/home/Home.vue";
 
 const routes = [
   {

openRenamerFront/src/utils/HttpUtil.js

@@ -1,5 +1,4 @@
 import * as http from "axios";
-import router from "../router/index";
 
 /**
  * 请求
@@ -11,10 +10,10 @@ import router from "../router/index";
  * @param {*} redirect 接口返回未认证是否跳转到登陆
  * @returns 数据
  */
-async function request(url, method, params, body, isForm, redirect) {
+async function request(url, method, params, body, isForm) {
   let options = {
     url,
-    baseURL: "/bookmark/api",
+    baseURL: "/openRenamer/api",
     method,
     params,
     // headers: {
@@ -35,30 +34,7 @@ async function request(url, method, params, body, isForm, redirect) {
     console.error(err);
     return;
   }
-  const { code, data, message } = res.data;
+  return res.data;
-  if (code === 1) {
-    return data;
-  } else if (code === -1 && redirect) {
-    // 跳转到登陆页
-    window.vueInstance.$message.error("您尚未登陆，请先登陆");
-    router.replace(
-      `/public/login?redirect=${encodeURIComponent(
-        router.currentRoute.fullPath
-      )}`
-    );
-    throw new Error(message);
-  } else if (code === 0) {
-    //通用异常，使用
-    window.vueInstance.$notification.error({
-      message: "异常",
-      description: message,
-    });
-    throw new Error(message);
-  } else if (code === -2) {
-    //表单异常，使用message提示
-    window.vueInstance.$message.error(message);
-    throw new Error(message);
-  }
 }
 
 /**
@@ -67,8 +43,8 @@ async function request(url, method, params, body, isForm, redirect) {
  * @param {*} params url参数
  * @param {*} redirect 未登陆是否跳转到登陆页
  */
-async function get(url, params = null, redirect = true) {
+async function get(url, params = null) {
-  return request(url, "get", params, null, false, redirect);
+  return request(url, "get", params, null, false);
 }
 
 /**
@@ -79,8 +55,8 @@ async function get(url, params = null, redirect = true) {
  * @param {*} isForm 是否表单数据
  * @param {*} redirect 是否重定向
  */
-async function post(url, params, body, isForm = false, redirect = true) {
+async function post(url, params, body, isForm = false) {
-  return request(url, "post", params, body, isForm, redirect);
+  return request(url, "post", params, body, isForm);
 }
 
 /**
@@ -91,8 +67,8 @@ async function post(url, params, body, isForm = false, redirect = true) {
  * @param {*} isForm 是否表单数据
  * @param {*} redirect 是否重定向
  */
-async function put(url, params, body, isForm = false, redirect = true) {
+async function put(url, params, body, isForm = false) {
-  return request(url, "put", params, body, isForm, redirect);
+  return request(url, "put", params, body, isForm);
 }
 
 /**
@@ -101,8 +77,8 @@ async function put(url, params, body, isForm = false, redirect = true) {
  * @param {*} params url参数
  * @param {*} redirect 是否重定向
  */
-async function deletes(url, params = null, redirect = true) {
+async function deletes(url, params = null) {
-  return request(url, "delete", params, null, redirect);
+  return request(url, "delete", params, null);
 }
 
 export default {

openRenamerFront/src/views/Home.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js App" />
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
-
-export default {
-  name: "Home",
-  components: {
-    HelloWorld,
-  },
-};
-</script>

openRenamerFront/src/views/home/Home.vue

@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <el-button type="primary" @click="dialogVisible = true" size="small"
+      >新增文件</el-button
+    >
+    <el-button type="primary" @click="showResult" size="small">预览</el-button>
+    <!-- 规则列表 -->
+    <div class="ruleList">
+      <div class="menu">
+        <span>应用规则</span>
+        <el-button type="primary" size="mini" @click="ruleDialogShow = true"
+          >新增</el-button
+        >
+        <el-button
+          type="primary"
+          size="mini"
+          v-if="checkedRules.length == 1"
+          @click="editClick"
+          >编辑</el-button
+        >
+        <el-button type="warning" size="mini" @click="block"
+          >禁用/启用</el-button
+        >
+        <el-button type="danger" size="mini" @click="deleteRule"
+          >删除</el-button
+        >
+      </div>
+      <div class="ruleBlock">
+        <el-checkbox
+          v-model="item.checked"
+          v-for="(item, index) in ruleList"
+          :key="index"
+        >
+          <s v-if="item.blocked">{{ item.message }}</s>
+          <span v-else>{{ item.message }}</span>
+        </el-checkbox>
+      </div>
+    </div>
+    <!-- 文件预览列表 -->
+    <div class="fileList">
+      <div>文件列表</div>
+    </div>
+  </div>
+  <el-dialog
+    title="新增文件"
+    v-model="dialogVisible"
+    width="70%"
+    :before-close="handleClose"
+  >
+    <file-chose v-if="dialogVisible" @addData="addData" />
+  </el-dialog>
+
+  <el-dialog
+    title="新增规则"
+    v-model="ruleDialogShow"
+    width="70%"
+    :before-close="handleClose"
+  >
+    <rule :editRule="editRule" v-if="ruleDialogShow" @ruleAdd="ruleAdd" />
+  </el-dialog>
+</template>
+
+<script>
+// @ is an alias to /src
+import FileChose from "@/components/FileChose";
+import Rule from "@/components/Rule";
+export default {
+  name: "Home",
+  components: { FileChose, Rule },
+  data() {
+    return {
+      dialogVisible: false,
+      ruleDialogShow: true, //规则弹床
+      fileList: [],
+      ruleList: [],
+      editRule: null,
+    };
+  },
+  computed: {
+    checkedRules() {
+      return this.ruleList.filter((item) => item.checked);
+    },
+  },
+  methods: {
+    addData(data) {
+      console.log(data);
+      this.fileList.push(...data);
+      this.dialogVisible = false;
+    },
+    ruleAdd(data) {
+      data.checked = false;
+      data.blocked = false;
+      if (this.editRule != null) {
+        let index = this.ruleList.indexOf(this.editRule);
+        this.ruleList.splice(index, 1, data);
+        this.editRule = null;
+      } else {
+        this.ruleList.push(data);
+      }
+      this.ruleDialogShow = false;
+    },
+    //禁用/启用
+    block() {
+      this.ruleList
+        .filter((item) => item.checked)
+        .forEach((item) => (item.blocked = !item.blocked));
+    },
+    //删除规则
+    deleteRule() {
+      this.ruleList = this.ruleList.filter((item) => !item.checked);
+    },
+    editClick() {
+      this.editRule = this.checkedRules[0];
+      this.ruleDialogShow = true;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.ruleList {
+  border: 1px solid black;
+  padding: 5px;
+  .menu {
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+  .ruleBlock {
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+    align-items: baseline;
+  }
+}
+</style>

openRenamerFront/vue.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  devServer: {
+    proxy: "http://localhost:8089",
+  },
+};