From f9a546cb978c95ae669c9b5f5919e71540d84242 Mon Sep 17 00:00:00 2001
From: fanxb <fleyx20@outlook.com>
Date: Tue, 10 Jan 2023 23:15:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E8=87=AA=E5=8A=A8=E5=8C=96=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 openRenamerBackend/api/GlobalConfigApi.ts     |   7 +
 openRenamerFront/src/App.vue                  |  19 +-
 openRenamerFront/src/components/FileChose.vue |  69 ++--
 openRenamerFront/src/components/Tips.vue      |  22 +
 .../rules}/ApplicationRuleList.vue            | 237 +++++------
 .../rules}/RuleBlock.vue                      | 375 +++++++++---------
 .../src/views/auto/components/editForm.vue    | 138 +++++++
 openRenamerFront/src/views/auto/index.vue     |   8 +-
 openRenamerFront/src/views/home/Home.vue      |  72 ++--
 9 files changed, 575 insertions(+), 372 deletions(-)
 create mode 100644 openRenamerFront/src/components/Tips.vue
 rename openRenamerFront/src/{views/home/components => components/rules}/ApplicationRuleList.vue (81%)
 rename openRenamerFront/src/{views/home/components => components/rules}/RuleBlock.vue (78%)
 create mode 100644 openRenamerFront/src/views/auto/components/editForm.vue

diff --git a/openRenamerBackend/api/GlobalConfigApi.ts b/openRenamerBackend/api/GlobalConfigApi.ts
index 8691d29..732ef5d 100644
--- a/openRenamerBackend/api/GlobalConfigApi.ts
+++ b/openRenamerBackend/api/GlobalConfigApi.ts
@@ -24,6 +24,13 @@ router["POST /config/update"] = async function (ctx: Context) {
 	ctx.body = await service.updateVal(ctx.request.body.code, ctx.request.body.val);
 };
 
+/**
+ * 提交修改
+ */
+router["POST /config/insertOrUpdate"] = async function (ctx: Context) {
+	ctx.body = await service.insertOrReplace(ctx.request.body);
+};
+
 
 
 export default router;
diff --git a/openRenamerFront/src/App.vue b/openRenamerFront/src/App.vue
index 7935038..2416362 100644
--- a/openRenamerFront/src/App.vue
+++ b/openRenamerFront/src/App.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="app">
-    <el-menu :default-active="activeIndex" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router>
+    <el-menu :default-active="activeIndex" mode="horizontal" background-color="#545c64" text-color="#fff"
+      active-text-color="#ffd04b" router>
       <el-menu-item index="/">重命名</el-menu-item>
-      <!-- <el-menu-item index="/auto">自动化</el-menu-item>
-      <el-sub-menu index="/download">
+      <el-menu-item index="/auto">自动化</el-menu-item>
+      <!-- <el-sub-menu index="/download">
         <template #title>bt下载</template>
         <el-menu-item index="/download/center">下载中心</el-menu-item>
         <el-menu-item index="/download/config">配置</el-menu-item>
@@ -12,7 +13,8 @@
     <div class="content">
       <router-view />
     </div>
-    <div class="footer">版本：{{ version }}&nbsp;&nbsp;开源地址:<a href="https://github.com/FleyX/open-renamer">open-renamer</a></div>
+    <div class="footer">版本：{{ version }}&nbsp;&nbsp;开源地址:<a
+        href="https://github.com/FleyX/open-renamer">open-renamer</a></div>
   </div>
 </template>
 
@@ -20,20 +22,20 @@
 import httpUtil from "./utils/HttpUtil";
 export default {
   name: "Home",
-  data() {
+  data () {
     return {
       version: "1.2",
       activeIndex: location.pathname,
     };
   },
-  async created() {
+  async created () {
     let token = localStorage.getItem("token");
     window.token = token;
-    await httpUtil.get("/file/isWindows");
+    window.isWindows = await httpUtil.get("/file/isWindows");
     console.log(this.$route);
     console.log(this.activeIndex);
   },
-  async mounted() {
+  async mounted () {
     console.log(this.$route);
     console.log(location);
   },
@@ -48,6 +50,7 @@ body {
   margin: 0;
   background-color: #e8e8e5;
 }
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
diff --git a/openRenamerFront/src/components/FileChose.vue b/openRenamerFront/src/components/FileChose.vue
index cc2441a..3f06f6b 100644
--- a/openRenamerFront/src/components/FileChose.vue
+++ b/openRenamerFront/src/components/FileChose.vue
@@ -10,16 +10,20 @@
 
     <div class="fileList">
       <div>
-        <el-input style="display: inline-block; width: 150px" type="text" size="small" placeholder="关键词过滤" v-model="filterText" clearable />
-        <el-button type="primary" @click="selectAll(true)" size="small">全选</el-button>
-        <el-button type="primary" @click="selectAll(false)" size="small">全不选</el-button>
-        <el-button type="primary" @click="refresh" size="small">刷新</el-button>
-        <el-button v-if="curSavePathId" type="warning" @click="cancelSavePath" size="small">取消收藏</el-button>
-        <el-button v-else type="primary" @click="showSave = true" size="small">收藏路径</el-button>
+        <el-input style="display: inline-block; width: 150px" type="text" size="small" placeholder="关键词过滤"
+          v-model="filterText" clearable />
+        <template v-if="type == 'file'">
+          <el-button type="primary" @click="selectAll(true)" size="small">全选</el-button>
+          <el-button type="primary" @click="selectAll(false)" size="small">全不选</el-button>
+          <el-button type="primary" @click="refresh" size="small">刷新</el-button>
+          <el-button v-if="curSavePathId" type="warning" @click="cancelSavePath" size="small">取消收藏</el-button>
+          <el-button v-else type="primary" @click="showSave = true" size="small">收藏路径</el-button>
+        </template>
       </div>
       <div v-for="(item, index) in filterFileList" :key="index">
         <span class="folder" v-if="item.isFolder" @click="fileClick(item)">{{ item.name }}</span>
-        <el-checkbox style="height: 1.4em" v-model="item.checked" v-else>{{ item.name }}</el-checkbox>
+        <el-checkbox style="height: 1.4em" v-model="item.checked" v-else-if="type == 'file'">{{ item.name
+        }}</el-checkbox>
       </div>
     </div>
 
@@ -39,8 +43,8 @@ import HttpUtil from "../utils/HttpUtil";
 import Bus from "../utils/Bus";
 export default {
   name: "FileChose",
-  props: ["curChoosePath"],
-  data() {
+  props: ["curChoosePath", "type"],
+  data () {
     return {
       isWindows: false,
       fileList: [], //路径下的文件节点
@@ -53,24 +57,24 @@ export default {
     };
   },
   computed: {
-    filterFileList() {
+    filterFileList () {
       let text = this.filterText.trim();
       return text === "" ? this.fileList : this.fileList.filter((item) => item.name.indexOf(text) > -1);
     },
-    curSavePathId() {
+    curSavePathId () {
       let curPath = JSON.stringify(this.pathList);
       let targetList = this.savePathList.filter((item) => item.content == curPath);
       return targetList.length > 0 ? targetList[0].id : null;
     },
   },
   watch: {
-    async curChoosePath(newVal) {
+    async curChoosePath (newVal) {
       console.log("变更路径:", newVal);
       this.pathList = newVal;
       await this.breadcrumbClick(this.pathList.length - 1);
     },
   },
-  async created() {
+  async created () {
     if (this.curChoosePath && this.curChoosePath.length > 0) {
       this.pathList = this.curChoosePath;
     }
@@ -80,15 +84,15 @@ export default {
   },
 
   methods: {
-    async refresh() {
+    async refresh () {
       await this.breadcrumbClick(this.pathList.length - 1);
     },
     //刷新保存的路径
-    async refreshSavePathList() {
+    async refreshSavePathList () {
       this.savePathList = await HttpUtil.get("/file/path");
     },
     //点击面包蟹
-    async breadcrumbClick(index) {
+    async breadcrumbClick (index) {
       this.loading = true;
       try {
         let path = this.createPath(index);
@@ -105,7 +109,7 @@ export default {
       return false;
     },
     //文件列表点击
-    fileClick(item) {
+    fileClick (item) {
       if (item.isFolder) {
         this.pathList.push(item.name);
         this.breadcrumbClick(this.pathList.length);
@@ -114,11 +118,11 @@ export default {
       }
     },
     //全选
-    selectAll(status) {
+    selectAll (status) {
       this.filterFileList.filter((item) => !item.isFolder).forEach((item) => (item.checked = status));
     },
     //根据index构建路径
-    createPath(index) {
+    createPath (index) {
       console.log("当前路径为:", this.pathList);
       let path;
       if (index == -1) {
@@ -133,19 +137,25 @@ export default {
       return path;
     },
     //点击确定
-    submit() {
-      let chosedFiles = this.fileList.filter((item) => item.checked);
-      if (chosedFiles.length == 0) {
-        this.$message({ message: "未选择文件", type: "warning" });
-        return;
+    submit () {
+      if (this.type === 'file') {
+        let chosedFiles = this.fileList.filter((item) => item.checked);
+        if (chosedFiles.length == 0) {
+          this.$message({ message: "未选择文件", type: "warning" });
+          return;
+        }
+        this.$emit("addData", JSON.parse(JSON.stringify(chosedFiles)));
+        this.fileList.forEach((item) => (item.checked = false));
+        this.fileList = [...this.fileList];
+      } else if (this.type === 'folder') {
+        //选择文件夹
+        this.$emit("folderChose", this.createPath(this.pathList.length - 1));
       }
-      this.$emit("addData", JSON.parse(JSON.stringify(chosedFiles)));
-      this.fileList.forEach((item) => (item.checked = false));
-      this.fileList = [...this.fileList];
       this.filterText = "";
+
     },
     //收藏路径
-    async savePath() {
+    async savePath () {
       await HttpUtil.post("/file/path/save", null, { name: this.saveName, content: JSON.stringify(this.pathList) });
       Bus.$emit("refreshSavePathList");
       this.saveName = "";
@@ -153,7 +163,7 @@ export default {
       this.$message.success("操作成功");
     },
     //取消收藏路径
-    async cancelSavePath() {
+    async cancelSavePath () {
       await HttpUtil.delete("/file/path/delete", { id: this.curSavePathId });
       Bus.$emit("refreshSavePathList");
       this.$message.success("操作成功");
@@ -166,6 +176,7 @@ export default {
 .main {
   height: 65vh;
 }
+
 .fileList {
   padding: 1em;
   text-align: left;
diff --git a/openRenamerFront/src/components/Tips.vue b/openRenamerFront/src/components/Tips.vue
new file mode 100644
index 0000000..f9dce6c
--- /dev/null
+++ b/openRenamerFront/src/components/Tips.vue
@@ -0,0 +1,22 @@
+<template>
+	<el-tooltip effect="dark" :content="message" :placement="placement ? placement : 'top'">
+		<el-icon>
+			<InfoFilled />
+		</el-icon>
+	</el-tooltip>
+</template>
+
+<script setup>
+import { InfoFilled } from "@element-plus/icons-vue";
+import { ref, reactive, onMounted, computed, defineProps } from "vue";
+
+defineProps({
+	message: String,
+	placement: String
+})
+
+</script>
+
+<style lang="less" scoped>
+
+</style>
diff --git a/openRenamerFront/src/views/home/components/ApplicationRuleList.vue b/openRenamerFront/src/components/rules/ApplicationRuleList.vue
similarity index 81%
rename from openRenamerFront/src/views/home/components/ApplicationRuleList.vue
rename to openRenamerFront/src/components/rules/ApplicationRuleList.vue
index d97e9d1..9328663 100644
--- a/openRenamerFront/src/views/home/components/ApplicationRuleList.vue
+++ b/openRenamerFront/src/components/rules/ApplicationRuleList.vue
@@ -1,116 +1,121 @@
-<template>
-  <div>
-    <div style="text-align: right">
-      <el-button type="primary" @click="showEditAddModal = true">新增模板</el-button>
-    </div>
-    <el-table :data="applicationRuleList" style="width: 100%">
-      <el-table-column prop="createdDate" label="创建时间" width="130" :formatter="formatDateTime" />
-      <el-table-column prop="updatedDate" label="更新时间" width="130" :formatter="formatDateTime" />
-      <el-table-column prop="name" label="名称" width="180" />
-      <el-table-column prop="comment" label="备注" />
-      <el-table-column label="操作" width="250">
-        <template #default="scope">
-          <el-button text type="primary" style="margin-left: 0" size="small" @click="ruleTemplateAction('chose', scope.row)">选择</el-button>
-          <el-button text type="primary" style="margin-left: 0" size="small" @click="ruleTemplateAction('edit', scope.row)">编辑</el-button>
-          <el-button text type="warning" style="margin-left: 0" size="small" @click="ruleTemplateAction('delete', scope.row)">删除</el-button>
-          <el-button v-if="defaultTemplateId != scope.row.id" text type="primary" size="small" @click="ruleTemplateAction('default', scope.row)"
-            >设为默认</el-button
-          >
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-  <el-dialog :title="curEdit != null ? '修改' : '新增模板'" v-model="showEditAddModal" width="40em" @close="closeAddEdit" append-to-body>
-    <el-form-item label="名称">
-      <el-input v-model="templateForm.name"></el-input>
-    </el-form-item>
-    <el-form-item label="描述">
-      <el-input v-model="templateForm.comment"></el-input>
-    </el-form-item>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="saveTemplateDilalogShow = false">取消</el-button>
-        <el-button type="primary" @click="templateSubmit">提交</el-button>
-      </span>
-    </template>
-  </el-dialog>
-</template>
-
-<script>
-import HttpUtil from "../../../utils/HttpUtil";
-import dayjs from "dayjs";
-export default {
-  name: "ApplicationRuleList",
-  props: ["curId"],
-  emits: ["templateUpdate"],
-  data() {
-    return {
-      applicationRuleList: [],
-      curEdit: null,
-      defaultTemplateId: null,
-      showEditAddModal: false,
-      templateForm: {
-        name: "",
-        comment: "",
-      },
-    };
-  },
-  async created() {
-    await this.init();
-  },
-  methods: {
-    async init() {
-      this.defaultTemplateId = parseInt(await HttpUtil.get("/config/code?code=defaultTempleteId"));
-      this.applicationRuleList = await HttpUtil.get("/applicationRule");
-    },
-    formatDateTime(row, column, value) {
-      return dayjs(value).format("YYYY-MM-DD");
-    },
-    //操作
-    async ruleTemplateAction(action, rowData) {
-      if (action === "chose") {
-        await this.$emit("templateUpdate", rowData);
-      } else if (action === "default") {
-        let body = { code: "defaultTempleteId", val: rowData.id.toString() };
-        await HttpUtil.post("/config/update", null, body);
-        this.defaultTemplateId = rowData.id;
-      } else if (action === "edit") {
-        this.curEdit = rowData;
-        this.templateForm.name = rowData.name;
-        this.templateForm.comment = rowData.comment;
-        this.showEditAddModal = true;
-      } else {
-        if (this.curId == rowData.id) {
-          this.$message({ message: "当前模板使用中，无法删除", type: "warning" });
-          return;
-        }
-        await HttpUtil.delete("/applicationRule/" + rowData.id);
-        await this.init();
-      }
-    },
-    //表单提交
-    async templateSubmit() {
-      let body;
-      if (this.curEdit) {
-        body = JSON.parse(JSON.stringify(this.curEdit));
-        body.name = this.templateForm.name;
-        body.comment = this.templateForm.comment;
-      } else {
-        body = this.templateForm;
-        body.content = "[]";
-      }
-      await HttpUtil.post("/applicationRule", null, body);
-      await this.init();
-      this.closeAddEdit();
-      this.$message.success("操作成功");
-    },
-    closeAddEdit() {
-      this.curEdit = null;
-      this.showEditAddModal = false;
-      this.templateForm = { name: "", templte: "" };
-    },
-  },
-};
-</script>
-
-<style></style>
+<template>
+  <div>
+    <div style="text-align: right">
+      <el-button type="primary" @click="showEditAddModal = true">新增模板</el-button>
+    </div>
+    <el-table :data="applicationRuleList" style="width: 100%">
+      <el-table-column prop="createdDate" label="创建时间" width="130" :formatter="formatDateTime" />
+      <el-table-column prop="updatedDate" label="更新时间" width="130" :formatter="formatDateTime" />
+      <el-table-column prop="name" label="名称" width="180" />
+      <el-table-column prop="comment" label="备注" />
+      <el-table-column label="操作" width="250">
+        <template #default="scope">
+          <el-button text type="primary" style="margin-left: 0" size="small"
+            @click="ruleTemplateAction('chose', scope.row)">选择</el-button>
+          <el-button text type="primary" style="margin-left: 0" size="small"
+            @click="ruleTemplateAction('edit', scope.row)">编辑</el-button>
+          <el-button text type="warning" style="margin-left: 0" size="small"
+            @click="ruleTemplateAction('delete', scope.row)">删除</el-button>
+          <el-button v-if="defaultTemplateId != scope.row.id" text type="primary" size="small"
+            @click="ruleTemplateAction('default', scope.row)">设为默认</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+  <el-dialog :title="curEdit != null ? '修改' : '新增模板'" v-model="showEditAddModal" width="40em" @close="closeAddEdit"
+    append-to-body>
+    <el-form-item label="名称">
+      <el-input v-model="templateForm.name"></el-input>
+    </el-form-item>
+    <el-form-item label="描述">
+      <el-input v-model="templateForm.comment"></el-input>
+    </el-form-item>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="saveTemplateDilalogShow = false">取消</el-button>
+        <el-button type="primary" @click="templateSubmit">提交</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import HttpUtil from "@/utils/HttpUtil";
+import dayjs from "dayjs";
+export default {
+  name: "ApplicationRuleList",
+  props: ["curId"],
+  emits: ["templateUpdate"],
+  data () {
+    return {
+      applicationRuleList: [],
+      curEdit: null,
+      defaultTemplateId: null,
+      showEditAddModal: false,
+      templateForm: {
+        name: "",
+        comment: "",
+      },
+    };
+  },
+  async created () {
+    await this.init();
+  },
+  methods: {
+    async init () {
+      this.defaultTemplateId = parseInt(await HttpUtil.get("/config/code?code=defaultTempleteId"));
+      this.applicationRuleList = await HttpUtil.get("/applicationRule");
+    },
+    formatDateTime (row, column, value) {
+      return dayjs(value).format("YYYY-MM-DD");
+    },
+    //操作
+    async ruleTemplateAction (action, rowData) {
+      if (action === "chose") {
+        await this.$emit("templateUpdate", rowData);
+      } else if (action === "default") {
+        let body = { code: "defaultTempleteId", val: rowData.id.toString() };
+        await HttpUtil.post("/config/update", null, body);
+        this.defaultTemplateId = rowData.id;
+      } else if (action === "edit") {
+        this.curEdit = rowData;
+        this.templateForm.name = rowData.name;
+        this.templateForm.comment = rowData.comment;
+        this.showEditAddModal = true;
+      } else {
+        if (this.curId == rowData.id) {
+          this.$message({ message: "当前模板使用中，无法删除", type: "warning" });
+          return;
+        }
+        await HttpUtil.delete("/applicationRule/" + rowData.id);
+        await this.init();
+      }
+    },
+    //表单提交
+    async templateSubmit () {
+      let body;
+      if (this.curEdit) {
+        body = JSON.parse(JSON.stringify(this.curEdit));
+        body.name = this.templateForm.name;
+        body.comment = this.templateForm.comment;
+      } else {
+        body = this.templateForm;
+        body.content = "[]";
+      }
+      await HttpUtil.post("/applicationRule", null, body);
+      await this.init();
+      this.closeAddEdit();
+      this.$message.success("操作成功");
+    },
+    closeAddEdit () {
+      this.curEdit = null;
+      this.showEditAddModal = false;
+      this.templateForm = { name: "", templte: "" };
+    },
+  },
+};
+</script>
+
+<style>
+
+</style>
diff --git a/openRenamerFront/src/views/home/components/RuleBlock.vue b/openRenamerFront/src/components/rules/RuleBlock.vue
similarity index 78%
rename from openRenamerFront/src/views/home/components/RuleBlock.vue
rename to openRenamerFront/src/components/rules/RuleBlock.vue
index e915ced..c725c14 100644
--- a/openRenamerFront/src/views/home/components/RuleBlock.vue
+++ b/openRenamerFront/src/components/rules/RuleBlock.vue
@@ -1,180 +1,195 @@
-<template>
-  <div class="main">
-    <div class="menu">
-      <el-button type="warning" size="small" @click="block">禁用/启用</el-button>
-      <el-button type="danger" size="small" @click="deleteRule">删除</el-button>
-      <el-button type="primary" size="small" @click="templateSubmit">保存</el-button>
-      <el-button type="primary" size="small" @click="ruleTemplateShow = true">选择模板</el-button>
-      <template v-if="checkedRules.length == 1">
-        <el-button type="primary" size="small" @click="editClick">
-          <el-tooltip effect="dark" content="编辑规则" placement="top">
-            <el-icon><edit /></el-icon>
-          </el-tooltip>
-        </el-button>
-        <el-button type="primary" size="small" @click="move('top')">
-          <el-tooltip effect="dark" content="上移规则" placement="top">
-            <el-icon><top /></el-icon>
-          </el-tooltip>
-        </el-button>
-        <el-button type="primary" size="small" @click="move('bottom')">
-          <el-tooltip effect="dark" content="下移规则" placement="top"
-            ><el-icon><bottom /></el-icon
-          ></el-tooltip>
-        </el-button>
-      </template>
-    </div>
-    <div class="ruleBlock">
-      <el-checkbox v-model="item.checked" v-for="(item, index) in ruleList" :key="index" @dblclick="editClick(item)">
-        <s v-if="item.blocked">{{ item.message }}</s>
-        <span v-else>{{ item.message }}</span>
-      </el-checkbox>
-      <div style="padding-top: 0.5em">
-        <el-button type="primary" size="small" text @click="addRuleDialogShow = true">+ 新增规则</el-button>
-      </div>
-    </div>
-    <el-dialog title="新增规则" v-model="addRuleDialogShow" width="70%" @close="ruleDialogClose">
-      <rule :editRule="editRule" @ruleAdd="ruleAdd" v-if="addRuleDialogShow" />
-    </el-dialog>
-    <el-dialog title="模板管理" v-model="ruleTemplateShow" width="70%">
-      <application-rule-list v-if="ruleTemplateShow" :curId="chosedTemplate.id" @templateUpdate="templateUpdate" />
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import Rule from "../../../components/Rule";
-import ApplicationRuleList from "./ApplicationRuleList";
-import HttpUtil from "../../../utils/HttpUtil";
-import { Top, Bottom, Edit } from "@element-plus/icons-vue";
-export default {
-  name: "RuleBlock",
-  components: {
-    Rule,
-    ApplicationRuleList,
-    Edit,
-    Top,
-    Bottom,
-  },
-  data() {
-    return {
-      addRuleDialogShow: false, //是否显示新增规则弹窗
-      ruleTemplateShow: false, //是否显示选择规则模板弹窗
-      ruleList: [],
-      editRule: null, //当前编辑的规则
-      chosedTemplate: null,
-    };
-  },
-  computed: {
-    //选中的规则
-    checkedRules() {
-      return this.ruleList.filter((item) => item.checked);
-    },
-  },
-  async created() {
-    this.chosedTemplate = await HttpUtil.get("/applicationRule/default");
-    this.ruleList = JSON.parse(this.chosedTemplate.content);
-    await this.ruleUpdate();
-  },
-  methods: {
-    //规则更新
-    ruleUpdate() {
-      let temp = this.ruleList.filter((item) => !item.blocked);
-      this.$emit("ruleUpdate", temp);
-    },
-    //模板内容提交
-    async templateSubmit() {
-      this.chosedTemplate.content = JSON.stringify(this.ruleList);
-      await HttpUtil.post("/applicationRule", null, this.chosedTemplate);
-      this.$message.success("操作成功");
-    },
-    //切换模板
-    async templateUpdate(newVal) {
-      this.ruleList = JSON.parse(newVal.content);
-      this.ruleUpdate();
-      this.ruleTemplateShow = false;
-    },
-    //新增规则
-    async ruleAdd(data) {
-      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);
-      }
-      data.checked = false;
-      this.ruleUpdate();
-      this.addRuleDialogShow = false;
-    },
-    //禁用/启用
-    async block() {
-      this.ruleList
-        .filter((item) => item.checked)
-        .forEach((item) => {
-          item.blocked = !item.blocked;
-          item.checked = false;
-        });
-      await this.ruleUpdate();
-    },
-    //删除规则
-    async deleteRule() {
-      this.ruleList = this.ruleList.filter((item) => !item.checked);
-      this.ruleUpdate();
-    },
-    //编辑规则
-    editClick(rule) {
-      this.editRule = rule && rule.data ? rule : this.checkedRules[0];
-      this.addRuleDialogShow = true;
-    },
-    //移动规则
-    async move(type) {
-      let index = this.ruleList.indexOf(this.checkedRules[0]);
-      let newIndex;
-      if (type == "top") {
-        if (index == 0) {
-          return;
-        }
-        newIndex = index - 1;
-      } else {
-        if (index == this.ruleList.length - 1) {
-          return;
-        }
-        newIndex = index + 1;
-      }
-      let temp = this.checkedRules[0];
-      this.ruleList[index] = this.ruleList[newIndex];
-      this.ruleList[newIndex] = temp;
-      this.ruleList = [...this.ruleList];
-      await this.ruleUpdate();
-    },
-    //规则弹窗关闭
-    ruleDialogClose() {
-      this.editRule = null;
-      this.addRuleDialogShow = false;
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.main {
-  text-align: left;
-  padding: 5px;
-  .menu {
-    display: flex;
-    justify-content: left;
-    align-items: center;
-  }
-  .ruleBlock {
-    text-align: left;
-    display: flex;
-    flex-direction: column;
-    align-items: baseline;
-  }
-  .choseTemplate {
-    text-align: center;
-    padding-top: 2em;
-    padding-bottom: 2em;
-  }
-}
-</style>
+<template>
+  <div class="main">
+    <div class="menu">
+      <el-button v-if="rules == undefined" type="warning" size="small" @click="block">禁用/启用</el-button>
+      <el-button type="danger" size="small" @click="deleteRule">删除</el-button>
+      <template v-if="rules == undefined">
+        <el-button type="primary" size="small" @click="templateSubmit">保存</el-button>
+        <el-button type="primary" size="small" @click="ruleTemplateShow = true">选择模板</el-button>
+      </template>
+      <template v-if="checkedRules.length == 1">
+        <el-button type="primary" size="small" @click="editClick">
+          <el-tooltip effect="dark" content="编辑规则" placement="top">
+            <el-icon>
+              <edit />
+            </el-icon>
+          </el-tooltip>
+        </el-button>
+        <el-button type="primary" size="small" @click="move('top')">
+          <el-tooltip effect="dark" content="上移规则" placement="top">
+            <el-icon>
+              <top />
+            </el-icon>
+          </el-tooltip>
+        </el-button>
+        <el-button type="primary" size="small" @click="move('bottom')">
+          <el-tooltip effect="dark" content="下移规则" placement="top"><el-icon>
+              <bottom />
+            </el-icon></el-tooltip>
+        </el-button>
+      </template>
+    </div>
+    <div class="ruleBlock">
+      <el-checkbox v-model="item.checked" v-for="(item, index) in ruleList" :key="index" @dblclick="editClick(item)">
+        <s v-if="item.blocked">{{ item.message }}</s>
+        <span v-else>{{ item.message }}</span>
+      </el-checkbox>
+      <div style="padding-top: 0.5em">
+        <el-button type="primary" size="small" text @click="addRuleDialogShow = true">+ 新增规则</el-button>
+      </div>
+    </div>
+    <el-dialog title="新增规则" v-model="addRuleDialogShow" width="70%" @close="ruleDialogClose">
+      <rule :editRule="editRule" @ruleAdd="ruleAdd" v-if="addRuleDialogShow" />
+    </el-dialog>
+    <el-dialog title="模板管理" v-model="ruleTemplateShow" width="70%">
+      <application-rule-list v-if="ruleTemplateShow" :curId="chosedTemplate.id" @templateUpdate="templateUpdate" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Rule from "@/components/Rule";
+import ApplicationRuleList from "./ApplicationRuleList";
+import HttpUtil from "@/utils/HttpUtil";
+import { Top, Bottom, Edit } from "@element-plus/icons-vue";
+export default {
+  name: "RuleBlock",
+  props: ["rules"],
+  components: {
+    Rule,
+    ApplicationRuleList,
+    Edit,
+    Top,
+    Bottom,
+  },
+  data () {
+    return {
+      addRuleDialogShow: false, //是否显示新增规则弹窗
+      ruleTemplateShow: false, //是否显示选择规则模板弹窗
+      ruleList: [],
+      editRule: null, //当前编辑的规则
+      chosedTemplate: null,
+    };
+  },
+  computed: {
+    //选中的规则
+    checkedRules () {
+      return this.ruleList.filter((item) => item.checked);
+    },
+  },
+  async created () {
+    //如果外部传入了规则
+    if (this.rules != undefined) {
+      this.ruleList = JSON.parse(JSON.stringify(this.rules));
+    } else {
+      this.chosedTemplate = await HttpUtil.get("/applicationRule/default");
+      this.ruleList = JSON.parse(this.chosedTemplate.content);
+      await this.ruleUpdate();
+    }
+  },
+  methods: {
+    //规则更新
+    ruleUpdate () {
+      let temp = this.ruleList.filter((item) => !item.blocked);
+      this.$emit("ruleUpdate", temp);
+    },
+    //模板内容提交
+    async templateSubmit () {
+      this.chosedTemplate.content = JSON.stringify(this.ruleList);
+      await HttpUtil.post("/applicationRule", null, this.chosedTemplate);
+      this.$message.success("操作成功");
+    },
+    //切换模板
+    async templateUpdate (newVal) {
+      this.ruleList = JSON.parse(newVal.content);
+      this.ruleUpdate();
+      this.ruleTemplateShow = false;
+    },
+    //新增规则
+    async ruleAdd (data) {
+      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);
+      }
+      data.checked = false;
+      this.ruleUpdate();
+      this.addRuleDialogShow = false;
+    },
+    //禁用/启用
+    async block () {
+      this.ruleList
+        .filter((item) => item.checked)
+        .forEach((item) => {
+          item.blocked = !item.blocked;
+          item.checked = false;
+        });
+      await this.ruleUpdate();
+    },
+    //删除规则
+    async deleteRule () {
+      this.ruleList = this.ruleList.filter((item) => !item.checked);
+      this.ruleUpdate();
+    },
+    //编辑规则
+    editClick (rule) {
+      this.editRule = rule && rule.data ? rule : this.checkedRules[0];
+      this.addRuleDialogShow = true;
+    },
+    //移动规则
+    async move (type) {
+      let index = this.ruleList.indexOf(this.checkedRules[0]);
+      let newIndex;
+      if (type == "top") {
+        if (index == 0) {
+          return;
+        }
+        newIndex = index - 1;
+      } else {
+        if (index == this.ruleList.length - 1) {
+          return;
+        }
+        newIndex = index + 1;
+      }
+      let temp = this.checkedRules[0];
+      this.ruleList[index] = this.ruleList[newIndex];
+      this.ruleList[newIndex] = temp;
+      this.ruleList = [...this.ruleList];
+      await this.ruleUpdate();
+    },
+    //规则弹窗关闭
+    ruleDialogClose () {
+      this.editRule = null;
+      this.addRuleDialogShow = false;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  text-align: left;
+  padding: 5px;
+
+  .menu {
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+
+  .ruleBlock {
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+    align-items: baseline;
+  }
+
+  .choseTemplate {
+    text-align: center;
+    padding-top: 2em;
+    padding-bottom: 2em;
+  }
+}
+</style>
diff --git a/openRenamerFront/src/views/auto/components/editForm.vue b/openRenamerFront/src/views/auto/components/editForm.vue
new file mode 100644
index 0000000..a567297
--- /dev/null
+++ b/openRenamerFront/src/views/auto/components/editForm.vue
@@ -0,0 +1,138 @@
+<template>
+	<div>
+		<el-form label-width="100px">
+			<el-form-item label="剧集目录">
+				<div style="text-align:left">
+					<template v-for="(item, index) in body.paths" :key="item">
+						<el-tag closable @close="closePath(index, 'folder')">{{ item }}</el-tag> <br />
+					</template>
+					<div style="display:flex;align-items:center">
+						<el-button type="primary" link @click="showFolderDialog = true">+新增目录</el-button>
+						<tips message="添加剧集的上级目录，比如'/美剧'目录下就是美剧的剧集文件夹" />
+					</div>
+				</div>
+			</el-form-item>
+			<el-form-item label="忽略文件">
+				<div style="text-align:left;display:flex;align-items:center">
+					<template v-for="(item, index) in body.ignorePaths" :key="item">
+						<el-tag closable @close="closePath(index, 'ignore')">{{ item }}</el-tag> <br />
+					</template>
+					<el-input v-if="ignoreInputVisible" v-model="ignoreInput" class="ml-1 w-20" size="small"
+						@keyup.enter="addIngoreFile" @blur="addIngoreFile" />
+					<el-button v-else class="button-new-tag ml-1" size="small" @click="ignoreInputVisible = true">
+						+ 忽略
+					</el-button>
+					<tips message="名字匹配的文件/文件夹将会忽略处理" />
+				</div>
+			</el-form-item>
+			<el-form-item label="忽略特典">
+				<el-switch v-model="body.ignoreSeason0" class="ml-2"
+					style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
+				<tips message="season 0/特典通常命名不规范，建议手动处理" />
+			</el-form-item>
+			<el-form-item label="删除小文件">
+				<el-switch v-model="body.deleteSmallVideo" class="ml-2"
+					style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
+				<tips message="删除小于2M的视频文件，此类文件通常为广告" />
+			</el-form-item>
+			<el-form-item label="规则">
+				<RuleBlock :rules="body.rules" @ruleUpdate="ruleUpdate" />
+			</el-form-item>
+		</el-form>
+		<el-button type="primary" @click="submit"> 保存自动化配置 </el-button>
+		<el-dialog title="选择目录" v-model="showFolderDialog" width="70%">
+			<file-chose ref="fileChose" type="folder" @folderChose="folderChose" />
+		</el-dialog>
+	</div>
+</template>
+
+<script setup>
+import FileChose from "@/components/FileChose.vue";
+import RuleBlock from "@/components/rules/RuleBlock.vue";
+import Tips from '@/components/Tips.vue';
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { ref, reactive, onMounted, computed, defineProps } from "vue";
+import http from "@/utils/HttpUtil";
+
+//配置中心数据
+let body = reactive({
+	paths: [],
+	version: 1,
+	ignoreSeason0: true,
+	ignorePaths: [],
+	deleteSmallVideo: true,
+	rules: []
+});
+let showFolderDialog = ref(false);
+let ignoreInputVisible = ref(false);
+let ignoreInput = ref("");
+
+
+onMounted(async () => {
+	let res = await http.post("/config/multCode", null, ['autoConfig', 'firstUse']);
+	if (res.autoConfig == undefined && res.firstUse == undefined) {
+		await http.post("/config/insertOrUpdate", null, { code: "firstUse", val: "1" });
+		await ElMessageBox.alert("似乎是首次使用自动化，是否需要查看使用文档？", "提示", {
+			confirmButtonText: "是",
+			cancelButtonText: "否",
+			showCancelButton: true
+		});
+		alert("跳转到自动化使用文档");
+		return;
+	}
+	if (res.autoConfig != undefined) {
+		body = reactive(JSON.parse(res.autoConfig));
+	}
+});
+
+//新增文件夹
+async function folderChose (data) {
+	if (body.paths.indexOf(data) > -1) {
+		ElMessage({ type: 'warning', message: "路径已存在" });
+		return;
+	}
+	body.paths.push(data);
+	showFolderDialog.value = false;
+}
+//新增忽略文件
+async function addIngoreFile () {
+	if (body.ignorePaths.indexOf(ignoreInput) > -1) {
+		ElMessage({ type: 'warning', message: "名称已存在" });
+		return;
+	}
+	body.ignorePaths.push(ignoreInput.value);
+	ignoreInput.value = "";
+	ignoreInputVisible.value = false;
+}
+
+//删除路径
+async function closePath (index, type) {
+	(type === 'folder' ? body.paths : body.ignorePaths).splice(index, 1);
+}
+//更新规则
+function ruleUpdate (rules) {
+	body.rules = rules;
+}
+//提交
+async function submit () {
+	await http.post("/config/insertOrUpdate", null, { code: "autoConfig", val: JSON.stringify(body), description: "自动化配置" });
+	ElMessage({ type: 'success', message: "保存成功" });
+}
+</script>
+
+<style lang="less" scoped>
+.item {
+	display: flex;
+	text-align: left;
+	padding-bottom: 0.5em;
+
+	.left {
+		width: 6em;
+		font-weight: 600;
+	}
+
+	.right {
+		flex: 1;
+	}
+}
+</style>
diff --git a/openRenamerFront/src/views/auto/index.vue b/openRenamerFront/src/views/auto/index.vue
index 46e926d..b90d6b4 100644
--- a/openRenamerFront/src/views/auto/index.vue
+++ b/openRenamerFront/src/views/auto/index.vue
@@ -1,12 +1,12 @@
 <template>
-  <div>自动化</div>
   <div>
-    <el-button type="primary" @click="submit"> 保存自动化配置 </el-button>
+    <edit-form />
   </div>
 </template>
 
 <script setup>
 import { ref, reactive, onMounted, computed } from "vue";
+import editForm from "./components/editForm.vue";
 import http from "@/utils/HttpUtil";
 //表单
 const qbBody = reactive({
@@ -32,7 +32,7 @@ onMounted(async () => {
   downloadConfig = reactive(await http.post("/config/multCode", null, ["qbAddress", "qbUsername", "qbPassword"]));
 });
 
-async function submit() {
+async function submit () {
   let res = await http.post("");
 }
 </script>
@@ -42,10 +42,12 @@ async function submit() {
   display: flex;
   text-align: left;
   padding-bottom: 0.5em;
+
   .left {
     width: 6em;
     font-weight: 600;
   }
+
   .right {
     flex: 1;
   }
diff --git a/openRenamerFront/src/views/home/Home.vue b/openRenamerFront/src/views/home/Home.vue
index 35c0b37..efbffef 100644
--- a/openRenamerFront/src/views/home/Home.vue
+++ b/openRenamerFront/src/views/home/Home.vue
@@ -2,38 +2,35 @@
   <div v-loading="loading" element-loading-text="后台处理中，请稍候">
     <br />
     <el-button type="success" @click="submit" size="default">开始重命名</el-button>
-    <el-divider content-position="left"><div class="head-text">规则设置</div></el-divider>
+    <el-divider content-position="left">
+      <div class="head-text">规则设置</div>
+    </el-divider>
     <!-- 规则列表 -->
     <rule-block @ruleUpdate="ruleUpdate" />
-    <el-divider content-position="left"><div class="head-text">文件预览</div></el-divider>
+    <el-divider content-position="left">
+      <div class="head-text">文件预览</div>
+    </el-divider>
     <!-- 文件预览列表 -->
     <div class="fileList">
       <div>
         <el-button type="primary" @click="showFileAdd" size="small">新增</el-button>
-        收藏路径:<el-tag
-          v-for="item in savePathList"
-          :round="true"
-          class="savePath"
-          closable
-          :key="item.id"
-          @click="clickSavePath(item)"
-          @close="deleteSavePath(item)"
-          text
-          >{{ item.name }}</el-tag
-        >
+        收藏路径:<el-tag v-for="item in savePathList" :round="true" class="savePath" closable :key="item.id"
+          @click="clickSavePath(item)" @close="deleteSavePath(item)" text>{{ item.name }}</el-tag>
       </div>
       <div>
         <el-button type="primary" size="small" @click="selectAllFiles">反选</el-button>
         <el-button type="danger" size="small" @click="deleteCheckedFiles">删除</el-button>
         <el-button type="primary" size="small" @click="moveIndex('top')">
           <el-tooltip effect="dark" content="上移规则" placement="top">
-            <el-icon><top /></el-icon>
+            <el-icon>
+              <top />
+            </el-icon>
           </el-tooltip>
         </el-button>
         <el-button type="primary" size="small" @click="moveIndex('bottom')">
-          <el-tooltip effect="dark" content="下移规则" placement="top"
-            ><el-icon><bottom /></el-icon
-          ></el-tooltip>
+          <el-tooltip effect="dark" content="下移规则" placement="top"><el-icon>
+              <bottom />
+            </el-icon></el-tooltip>
         </el-button>
       </div>
       <div class="fileBlock">
@@ -55,7 +52,8 @@
     <!-- 新增文件弹窗 -->
 
     <el-dialog title="新增文件" v-model="dialogVisible" width="70%">
-      <file-chose ref="fileChose" :curChoosePath="curChoosePath" @addData="addData" @refreshSavePathList="refreshSavePathList" />
+      <file-chose ref="fileChose" type="file" :curChoosePath="curChoosePath" @addData="addData"
+        @refreshSavePathList="refreshSavePathList" />
     </el-dialog>
   </div>
 </template>
@@ -65,7 +63,7 @@
 import { Top, Bottom } from "@element-plus/icons-vue";
 import HttpUtil from "../../utils/HttpUtil";
 import FileChose from "@/components/FileChose";
-import RuleBlock from "./components/RuleBlock.vue";
+import RuleBlock from "@/components/rules/RuleBlock.vue";
 import Bus from "../../utils/Bus";
 
 let numberSet = new Set(["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]);
@@ -78,7 +76,7 @@ export default {
     Top,
     Bottom,
   },
-  data() {
+  data () {
     return {
       loading: false, //遮罩
       dialogVisible: false, //新增文件弹窗
@@ -93,14 +91,14 @@ export default {
     };
   },
   computed: {},
-  async created() {
+  async created () {
     this.savePathList = await HttpUtil.get("/file/path");
     window.isWindows = await HttpUtil.get("/file/isWindows");
     Bus.$on("refreshSavePathList", this.refreshSavePathList);
   },
   methods: {
     //新增文件
-    async addData(data) {
+    async addData (data) {
       data.forEach((item) => (item.checked = false));
       this.fileList.push(...data);
       this.fileList = [...this.fileList.sort((a, b) => compareStr(a.name, b.name))];
@@ -108,13 +106,13 @@ export default {
       this.needPreview = true;
       await this.showResult();
     },
-    async ruleUpdate(rules) {
+    async ruleUpdate (rules) {
       this.ruleList = rules;
       this.needPreview = true;
       await this.showResult();
     },
     //预览结果
-    async showResult() {
+    async showResult () {
       this.changedFileList = [];
       if (!this.checkRuleAndFile()) {
         return;
@@ -130,7 +128,7 @@ export default {
       this.loading = false;
     },
     //提交
-    async submit() {
+    async submit () {
       if (!this.checkRuleAndFile()) {
         return;
       }
@@ -151,17 +149,17 @@ export default {
       }
     },
     //删除选中的文件名
-    async deleteCheckedFiles() {
+    async deleteCheckedFiles () {
       this.fileList = this.fileList.filter((item) => !item.checked);
       this.needPreview = true;
       await this.showResult();
     },
     //反选
-    selectAllFiles() {
+    selectAllFiles () {
       this.fileList.forEach((item) => (item.checked = !item.checked));
     },
     //检查规则和文件
-    checkRuleAndFile() {
+    checkRuleAndFile () {
       if (this.fileList.length == 0) {
         this.$message({ message: "请选择文件", type: "warning" });
         return false;
@@ -173,7 +171,7 @@ export default {
       return true;
     },
     //移动文件顺序
-    async moveIndex(type) {
+    async moveIndex (type) {
       let temps = this.fileList.filter((item) => item.checked == true);
       if (temps.length == 0) {
         this.$message({ type: "warning", message: "未选中文件，无法移动" });
@@ -208,20 +206,20 @@ export default {
         this.timer = null;
       }, 1000);
     },
-    showFileAdd() {
+    showFileAdd () {
       this.dialogVisible = true;
     },
     //点击收藏路径
-    async clickSavePath(item) {
+    async clickSavePath (item) {
       this.curChoosePath = JSON.parse(item.content);
       this.dialogVisible = true;
     },
-    async deleteSavePath(item) {
+    async deleteSavePath (item) {
       console.log(item);
       await HttpUtil.delete("/file/path/delete", { id: item.id });
       Bus.$emit("refreshSavePathList");
     },
-    async refreshSavePathList() {
+    async refreshSavePathList () {
       this.savePathList = await HttpUtil.get("/file/path");
     },
   },
@@ -232,10 +230,10 @@ export default {
  * @param a str
  * @param b str
  */
-function compareStr(a, b) {
+function compareStr (a, b) {
   let an = a.length;
   let bn = b.length;
-  for (let i = 0; i < an; ) {
+  for (let i = 0; i < an;) {
     let charA = readChar(a, i, an);
     let charB = readChar(b, i, bn);
     if (charB.length == 0) {
@@ -257,7 +255,7 @@ function compareStr(a, b) {
  * @param a a
  * @param n 数字长度
  */
-function readChar(a, i, n) {
+function readChar (a, i, n) {
   let res = "";
   for (; i < n; i++) {
     let char = a.charAt(i);
@@ -282,6 +280,7 @@ function readChar(a, i, n) {
   cursor: pointer;
   margin-right: 0.5em;
 }
+
 .fileList {
   margin-top: 20px;
   text-align: left;
@@ -289,6 +288,7 @@ function readChar(a, i, n) {
   .fileBlock {
     margin-top: 20px;
     display: flex;
+
     .oneLine {
       display: flex;
       justify-content: space-between;