diff --git a/.gitignore b/.gitignore
index 1936d3c..d6dd4f5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -101,6 +101,4 @@ dist
 .dynamodb/
 
 # TernJS port file
-.tern-port
-openRenamerBackend/database.db
-openRenamerBackend/database.db
+.tern-port
\ No newline at end of file
diff --git a/openRenamerBackend/.gitignore b/openRenamerBackend/.gitignore
index e3c7e25..46c45b4 100644
--- a/openRenamerBackend/.gitignore
+++ b/openRenamerBackend/.gitignore
@@ -1,15 +1,16 @@
-.DS_Store
-/.vscode/
-.vscode
-node_modules/
-/dist/
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Editor directories and files
-yarn.lock
-log
-sqls/history.json
-static/*
-!static/.gitkeep
\ No newline at end of file
+.DS_Store
+/.vscode/
+.vscode
+node_modules/
+/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+yarn.lock
+log
+sqls/history.json
+static/*
+!static/.gitkeep
+database.db
\ No newline at end of file
diff --git a/openRenamerBackend/service/FileService.ts b/openRenamerBackend/service/FileService.ts
index 45a7ca2..d38fea9 100644
--- a/openRenamerBackend/service/FileService.ts
+++ b/openRenamerBackend/service/FileService.ts
@@ -6,53 +6,53 @@ import ProcessHelper from '../util/ProcesHelper';
 import FileObj from '../vo/FileObj';
 
 class FileService {
-    static async readPath(pathStr: string, showHidden: boolean): 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', '');
-                fileList = std
-                    .split('\r\n')
-                    .filter((item) => item.trim().length > 0)
-                    .map((item) => item.trim());
-            } else {
-                //linux下
-                pathStr = '/';
-                fileList = await fs.readdir(pathStr);
-            }
-        } else {
-            fileList = await fs.readdir(pathStr);
-        }
-        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]));
-                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);
-            }
-        }
-        folderList.sort((a, b) => a.name.localeCompare(b.name)).push(...files.sort((a, b) => a.name.localeCompare(b.name)));
-        return folderList;
-    }
+	static async readPath(pathStr: string, showHidden: boolean): 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')).replace('Caption', '');
+				fileList = std
+					.split('\r\n')
+					.filter((item) => item.trim().length > 0)
+					.map((item) => item.trim());
+			} else {
+				//linux下
+				pathStr = '/';
+				fileList = await fs.readdir(pathStr);
+			}
+		} else {
+			fileList = await fs.readdir(pathStr);
+		}
+		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]));
+				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);
+			}
+		}
+		folderList.sort((a, b) => a.name.localeCompare(b.name)).push(...files.sort((a, b) => a.name.localeCompare(b.name)));
+		return folderList;
+	}
 
-    static async checkExist(pathStr: string) {
-        return await fs.pathExists(pathStr);
-    }
+	static async checkExist(pathStr: string) {
+		return await fs.pathExists(pathStr);
+	}
 }
 
 export default FileService;
diff --git a/openRenamerFront/package.json b/openRenamerFront/package.json
index d845177..63f91e8 100644
--- a/openRenamerFront/package.json
+++ b/openRenamerFront/package.json
@@ -11,13 +11,13 @@
     "@element-plus/icons": "^0.0.11",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
-    "element-plus": "^1.0.2-beta.48",
+    "dayjs": "^1.10.7",
+    "element-plus": "^1.2.0-beta.5",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-router": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
diff --git a/openRenamerFront/src/App.vue b/openRenamerFront/src/App.vue
index 1181246..e379c18 100644
--- a/openRenamerFront/src/App.vue
+++ b/openRenamerFront/src/App.vue
@@ -1,46 +1,46 @@
-<template>
-  <el-menu
-    :default-active="activeIndex"
-    class="el-menu-demo"
-    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;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
-</style>
+<template>
+  <el-menu
+    :default-active="activeIndex"
+    class="el-menu-demo"
+    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;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+#nav {
+  padding: 30px;
+
+  a {
+    font-weight: bold;
+    color: #2c3e50;
+
+    &.router-link-exact-active {
+      color: #42b983;
+    }
+  }
+}
+</style>
diff --git a/openRenamerFront/src/components/FileChose.vue b/openRenamerFront/src/components/FileChose.vue
index b2068dd..97b1e0b 100644
--- a/openRenamerFront/src/components/FileChose.vue
+++ b/openRenamerFront/src/components/FileChose.vue
@@ -1,145 +1,124 @@
-<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-input
-          style="display: inline-block; width: 150px"
-          type="text"
-          size="small"
-          placeholder="关键词过滤"
-          v-model="filterText"
-        />
-        <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 filterFileList" :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, //加载
-      filterText: "", //关键字过滤
-    };
-  },
-  computed: {
-    filterFileList() {
-      let text = this.filterText.trim();
-      return text === ""
-        ? this.fileList
-        : this.fileList.filter((item) => item.name.indexOf(text) > -1);
-    },
-  },
-  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.filterFileList
-        .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>
+<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-input style="display: inline-block; width: 150px" type="text" size="small" placeholder="关键词过滤" v-model="filterText" />
+        <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 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>
+      </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, //加载
+      filterText: "", //关键字过滤
+    };
+  },
+  computed: {
+    filterFileList() {
+      let text = this.filterText.trim();
+      return text === "" ? this.fileList : this.fileList.filter((item) => item.name.indexOf(text) > -1);
+    },
+  },
+  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.filterFileList.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 ? "\\" : "/") + (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;
+    line-height: 1.4em;
+  }
+}
+</style>
diff --git a/openRenamerFront/src/components/Rule.vue b/openRenamerFront/src/components/Rule.vue
index 3afa9f8..e7e7b29 100644
--- a/openRenamerFront/src/components/Rule.vue
+++ b/openRenamerFront/src/components/Rule.vue
@@ -1,82 +1,64 @@
-<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>
+<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>
+  <div style="text-align: center">
+    <el-button type="primary" @click="submit">确定</el-button>
+  </div>
+</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>
diff --git a/openRenamerFront/src/main.js b/openRenamerFront/src/main.js
index 6968460..98b7e58 100644
--- a/openRenamerFront/src/main.js
+++ b/openRenamerFront/src/main.js
@@ -1,10 +1,10 @@
-import { createApp } from 'vue';
-import App from './App.vue';
-import router from './router';
-import ElementPlus, { ElMessage } from 'element-plus';
-import 'element-plus/lib/theme-chalk/index.css';
-
-const vueInstance = createApp(App);
-vueInstance.use(router).use(ElementPlus).mount('#app');
-vueInstance.config.globalProperties.$message = ElMessage;
-window.vueInstance = vueInstance;
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";
+import ElementPlus, { ElMessage } from "element-plus";
+import "element-plus/dist/index.css";
+
+const vueInstance = createApp(App);
+vueInstance.use(router).use(ElementPlus).mount("#app");
+vueInstance.config.globalProperties.$message = ElMessage;
+window.vueInstance = vueInstance;
diff --git a/openRenamerFront/src/views/home/Home.vue b/openRenamerFront/src/views/home/Home.vue
index 60090a5..a1ccbfa 100644
--- a/openRenamerFront/src/views/home/Home.vue
+++ b/openRenamerFront/src/views/home/Home.vue
@@ -1,65 +1,44 @@
 <template>
   <div v-loading="loading" element-loading-text="后台处理中，请稍候">
-    <el-button type="primary" @click="dialogVisible = true" size="small">1.新增文件</el-button>
-    <el-button type="primary" @click="showResult" size="small">2.预览</el-button>
-    <el-button type="primary" @click="submit" size="small">3.重命名</el-button>
+    <br />
+    <el-button type="primary" @click="submit" size="default">重命名</el-button>
+    <br /><br />
     <!-- 规则列表 -->
-    <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>
-        <el-button type="primary" size="mini" @click="saveOrUpdate">保存模板</el-button>
-        <el-button type="primary" size="mini" @click="ruleTemplateShow = true">选择模板</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>
+    <rule-block @ruleUpdate="ruleUpdate" />
     <!-- 文件预览列表 -->
     <div class="fileList">
       <div>
         文件列表
-
+        <el-button type="primary" @click="dialogVisible = true" size="small">新增</el-button>
         <el-button type="primary" size="mini" @click="selectAllFiles">反选</el-button>
         <el-button type="danger" size="mini" @click="deleteCheckedFiles">删除</el-button>
       </div>
       <div class="fileBlock">
-        <!-- 左侧原始文件名 -->
-        <el-checkbox style="display: block" v-for="(item, index) in fileList" :key="index" v-model="item.checked">
-          <div class="oneFileName">
-            {{ item.name }}
-            <ArrowDownBold
-              style="width: 20px; padding-left: 10px"
-              v-if="index < fileList.length - 1"
-              @click.stop.prevent="moveIndex(index + 1, index)"
-            />
-            <ArrowUpBold style="width: 20px; padding-left: 10px" v-if="index > 0" @click.stop.prevent="moveIndex(index - 1, index)" />
+        <div class="oneLine" v-for="(item, index) in fileList" :key="index">
+          <!-- 左侧原始文件名 -->
+          <el-checkbox v-model="item.checked" class="left">
+            <div class="oneFileName">
+              {{ item.name }}
+              <ArrowDownBold
+                style="width: 20px; padding-left: 10px"
+                v-if="index < fileList.length - 1"
+                @click.stop.prevent="moveIndex(index + 1, index)"
+              />
+              <ArrowUpBold style="width: 20px; padding-left: 10px" v-if="index > 0" @click.stop.prevent="moveIndex(index - 1, index)" />
+            </div>
+          </el-checkbox>
+          <!-- 修改后的文件名 -->
+          <div class="right">
+            {{ changedFileList.length > index ? changedFileList[index].name : "" }}
           </div>
-        </el-checkbox>
-      </div>
-      <div class="fileBlock">
-        <!-- 右侧修改后的文件名-->
-        <div v-for="(item, index) in changedFileList" :key="index">
-          {{ item.name }}
         </div>
       </div>
     </div>
     <!-- 新增文件弹窗 -->
-    <el-dialog title="新增规则" v-model="ruleDialogShow" width="70%">
-      <rule :editRule="editRule" v-if="ruleDialogShow" @ruleAdd="ruleAdd" />
-    </el-dialog>
+
     <el-dialog title="新增文件" v-model="dialogVisible" width="70%">
       <file-chose @addData="addData" />
     </el-dialog>
-    <el-dialog title="选择规则模板" v-model="ruleTemplateShow" width="70%">
-      <application-rule-list />
-    </el-dialog>
   </div>
 </template>
 
@@ -68,80 +47,41 @@
 import { ArrowDownBold, ArrowUpBold } from "@element-plus/icons";
 import HttpUtil from "../../utils/HttpUtil";
 import FileChose from "@/components/FileChose";
-import ApplicationRuleList from "./components/ApplicationRuleList";
-import Rule from "@/components/Rule";
+import RuleBlock from "./components/RuleBlock.vue";
 export default {
   name: "Home",
   components: {
     FileChose,
-    Rule,
     ArrowDownBold,
     ArrowUpBold,
-    ApplicationRuleList,
+    RuleBlock,
   },
   data() {
     return {
       loading: false, //遮罩
       dialogVisible: false, //新增文件弹窗
-      ruleDialogShow: false, //规则弹窗
-      ruleTemplateShow: false, //选择规则模板弹窗是否展示
+      ruleList: [], //当前生效的规则
       fileList: [],
       changedFileList: [],
-      ruleList: [],
-      editRule: null, //当前编辑的规则
       needPreview: false, //需要点击预览
       applicationRule: null, //当前应用的应用规则模板
     };
   },
-  computed: {
-    //选中的规则
-    checkedRules() {
-      return this.ruleList.filter((item) => item.checked);
-    },
-  },
+
   methods: {
     //新增文件
     async addData(data) {
       data.forEach((item) => (item.checked = false));
       this.fileList.push(...data);
       this.dialogVisible = false;
-      console.log("asdffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff");
       this.needPreview = true;
       await this.showResult();
     },
-    //新增规则
-    async 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;
-
+    async ruleUpdate(rules) {
+      this.ruleList = rules;
       this.needPreview = true;
       await this.showResult();
     },
-    //禁用/启用
-    async block() {
-      this.ruleList.filter((item) => item.checked).forEach((item) => (item.blocked = !item.blocked));
-      this.needPreview = true;
-      await this.showResult();
-    },
-    //删除规则
-    async deleteRule() {
-      this.ruleList = this.ruleList.filter((item) => !item.checked);
-      this.needPreview = true;
-      await this.showResult();
-    },
-    //编辑规则
-    editClick() {
-      this.editRule = this.checkedRules[0];
-      this.ruleDialogShow = true;
-    },
     //预览结果
     async showResult() {
       if (!this.checkRuleAndFile()) {
@@ -153,9 +93,11 @@ export default {
         ruleList: this.ruleList.filter((item) => !item.blocked),
       };
       this.changedFileList = await HttpUtil.post("/renamer/preview", null, body);
+      this.fileList = [...this.fileList];
       this.needPreview = false;
       this.loading = false;
     },
+    //提交
     async submit() {
       if (!this.checkRuleAndFile()) {
         return;
@@ -212,30 +154,24 @@ export default {
 </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;
-  }
-}
-
 .fileList {
   margin-top: 20px;
   text-align: left;
 
   .fileBlock {
-    text-align: left;
-    display: inline-block;
-    width: 50%;
+    margin-top: 20px;
+    .oneLine {
+      display: flex;
+      border-top: 1px solid rgb(228, 224, 224);
+      .left {
+        flex: 1;
+      }
+      .right {
+        flex: 1;
+        display: flex;
+        align-items: center;
+      }
+    }
 
     .oneFileName {
       display: flex;
diff --git a/openRenamerFront/src/views/home/components/ApplicationRuleList.vue b/openRenamerFront/src/views/home/components/ApplicationRuleList.vue
index cd16aaf..ce531c8 100644
--- a/openRenamerFront/src/views/home/components/ApplicationRuleList.vue
+++ b/openRenamerFront/src/views/home/components/ApplicationRuleList.vue
@@ -1,27 +1,49 @@
-<template>
-  <div>
-    <el-table :data="applicationRuleList" style="width: 100%">
-      <el-table-column prop="createdDate" label="创建时间" width="180" />
-      <el-table-column prop="name" label="名称" width="180" />
-      <el-table-column prop="comment" label="备注" />
-    </el-table>
-  </div>
-</template>
-
-<script>
-import HttpUtil from "../../../utils/HttpUtil";
-export default {
-  name: "ApplicationRuleList",
-  data() {
-    return {
-      applicationRuleList: [],
-    };
-  },
-  async mounted() {
-    this.applicationRuleList = await HttpUtil.get("/applicationRule");
-  },
-};
-</script>
-
-<style>
-</style>
\ No newline at end of file
+<template>
+  <div>
+    <el-table :data="applicationRuleList" style="width: 100%">
+      <el-table-column prop="createdDate" label="创建时间" width="180" />
+      <el-table-column prop="name" label="名称" width="180" />
+      <el-table-column prop="comment" label="备注" />
+      <el-table-column label="操作" width="120">
+        <template #default="scope">
+          <el-button type="text" size="small" @click="ruleTemplateAction('chose', scope.row)">选择</el-button>
+          <el-button type="text" size="small" @click="ruleTemplateAction('delete', scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import HttpUtil from "../../../utils/HttpUtil";
+import dayjs from "dayjs";
+export default {
+  name: "ApplicationRuleList",
+  data() {
+    return {
+      applicationRuleList: [],
+    };
+  },
+  async created() {
+    this.init();
+  },
+  methods: {
+    async init() {
+      this.applicationRuleList = await HttpUtil.get("/applicationRule");
+      this.applicationRuleList.forEach((item) => (item.createdDate = dayjs(item.createdDate).format("YYYY-MM-DD")));
+    },
+    //操作
+    async ruleTemplateAction(action, rowData) {
+      if (action === "chose") {
+        await this.$emit("update:modelValue", rowData);
+        await this.$emit("close");
+      } else {
+        await HttpUtil.delete("/applicationRule/" + rowData.id);
+        await this.init();
+      }
+    },
+  },
+};
+</script>
+
+<style></style>
diff --git a/openRenamerFront/src/views/home/components/RuleBlock.vue b/openRenamerFront/src/views/home/components/RuleBlock.vue
new file mode 100644
index 0000000..3b7298f
--- /dev/null
+++ b/openRenamerFront/src/views/home/components/RuleBlock.vue
@@ -0,0 +1,171 @@
+<template>
+  <div class="main">
+    <div class="menu">
+      <span>应用规则</span>
+      <el-button type="primary" size="mini" @click="addRuleDialogShow = 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>
+      <el-button type="primary" size="mini" v-if="chosedTemplate" @click="templateSubmit">保存规则</el-button>
+      <el-button type="primary" size="mini" v-if="chosedTemplate == null && ruleList.length > 0" @click="saveTemplateDilalogShow = true"
+        >存为模板</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 v-if="ruleList.length == 0 && chosedTemplate == null" class="choseTemplate">
+        <el-button type="primary" size="mini" @click="ruleTemplateShow = true">选择模板</el-button>
+      </div>
+    </div>
+    <!-- 弹窗 -->
+    <el-dialog title="新增规则" v-model="addRuleDialogShow" width="70%">
+      <rule :editRule="editRule" @ruleAdd="ruleAdd" />
+    </el-dialog>
+    <el-dialog title="选择规则模板" v-model="ruleTemplateShow" width="70%">
+      <application-rule-list v-if="ruleTemplateShow" v-model="chosedTemplate" @close="ruleTemplateShow = false" />
+    </el-dialog>
+    <el-dialog title="保存模板" v-model="saveTemplateDilalogShow" width="70%">
+      <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>
+  </div>
+</template>
+
+<script>
+import Rule from "../../../components/Rule";
+import ApplicationRuleList from "./ApplicationRuleList";
+import HttpUtil from "../../../utils/HttpUtil";
+export default {
+  name: "RuleBlock",
+  components: {
+    Rule,
+    ApplicationRuleList,
+  },
+  data() {
+    return {
+      addRuleDialogShow: false, //是否显示新增规则弹窗
+      ruleTemplateShow: false, //是否显示选择规则模板弹窗
+      saveTemplateDilalogShow: false, //是否显示保存模板弹窗
+      ruleList: [],
+      editRule: null, //当前编辑的规则
+      chosedTemplate: null,
+      templateForm: {
+        name: "",
+        comment: "",
+      },
+    };
+  },
+  computed: {
+    //选中的规则
+    checkedRules() {
+      return this.ruleList.filter((item) => item.checked);
+    },
+  },
+  watch: {
+    chosedTemplate(newVal, oldVal) {
+      this.ruleList = JSON.parse(newVal.content);
+      this.ruleUpdate();
+    },
+  },
+  methods: {
+    //规则更新
+    ruleUpdate() {
+      this.$emit(
+        "ruleUpdate",
+        this.ruleList.filter((item) => !item.blocked)
+      );
+    },
+    //保存还是更新模板
+    saveOrUpdateTemplate() {
+      if (this.chosedTemplate != null) {
+        this.templateSubmit();
+      } else {
+        this.saveTemplateDilalogShow = true;
+      }
+    },
+    //模板内容提交
+    async templateSubmit() {
+      let body;
+      if (this.chosedTemplate) {
+        this.chosedTemplate.content = JSON.stringify(this.ruleList);
+        body = this.chosedTemplate;
+      } else {
+        body = {
+          name: this.templateForm.name,
+          comment: this.templateForm.comment,
+          content: JSON.stringify(this.ruleList),
+        };
+      }
+      this.chosedTemplate = await HttpUtil.post("/applicationRule", null, body);
+      this.saveTemplateDilalogShow = false;
+      this.$message.success("操作成功");
+    },
+    //新增规则
+    async 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.ruleUpdate();
+      this.addRuleDialogShow = false;
+    },
+    //禁用/启用
+    async block() {
+      this.ruleList.filter((item) => item.checked).forEach((item) => (item.blocked = !item.blocked));
+      this.ruleUpdate();
+    },
+    //删除规则
+    async deleteRule() {
+      this.ruleList = this.ruleList.filter((item) => !item.checked);
+      this.ruleUpdate();
+    },
+    //编辑规则
+    editClick() {
+      this.editRule = this.checkedRules[0];
+      this.ruleDialogShow = true;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  text-align: left;
+  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;
+  }
+  .choseTemplate {
+    text-align: center;
+    padding-top: 2em;
+    padding-bottom: 2em;
+  }
+}
+</style>