diff --git a/openRenamerBackend/service/RenamerService.ts b/openRenamerBackend/service/RenamerService.ts
new file mode 100644
index 0000000..0210986
--- /dev/null
+++ b/openRenamerBackend/service/RenamerService.ts
@@ -0,0 +1,19 @@
+import config from '../config';
+import * as path from 'path';
+import * as fs from 'fs-extra';
+
+import ProcessHelper from '../util/ProcesHelper';
+import FileObj from '../vo/FileObj';
+import RuleObj from 'vo/RuleObj';
+import DeleteRule from '../vo/rules/DeleteRule';
+
+class RenamerService {
+    static async readPath(fileList: Array<FileObj>, ruleList): Promise<Array<FileObj>> {
+        let obj = new RuleObj({});
+        return null;
+    }
+
+
+}
+
+export default RenamerService;
diff --git a/openRenamerBackend/vo/RuleObj.ts b/openRenamerBackend/vo/RuleObj.ts
new file mode 100644
index 0000000..55122a3
--- /dev/null
+++ b/openRenamerBackend/vo/RuleObj.ts
@@ -0,0 +1,27 @@
+import DeleteRule from "./rules/DeleteRule";
+import InsertRule from "./rules/InsertRule";
+import SerializationRule from "./rules/SerializationRule";
+
+export default class RuleObj {
+	type: string;
+	message: string;
+	/**
+	 * 具体参数
+	 */
+	data: any;
+
+	constructor(data: any) {
+		this.type = data.type;
+		this.message = data.message;
+		switch (this.type) {
+			case "delete":
+				this.data = new DeleteRule(data.data);
+				break;
+			case "insert":
+				this.data = new InsertRule(data.data);
+				break;
+			default:
+				this.data = new SerializationRule(data.data);
+		}
+	}
+}
\ No newline at end of file
diff --git a/openRenamerBackend/vo/rules/DeleteRule.ts b/openRenamerBackend/vo/rules/DeleteRule.ts
new file mode 100644
index 0000000..5f24bcf
--- /dev/null
+++ b/openRenamerBackend/vo/rules/DeleteRule.ts
@@ -0,0 +1,52 @@
+import RuleInterface from "./RuleInterface";
+import FileObj from "../FileObj";
+
+export default class DeleteRule implements RuleInterface {
+	/**
+	 * 类别：deletePart:部分删除，deleteAll:全部删除
+	 */
+	type: string;
+	/**
+	 * 部分删除时的开始信息
+	 */
+	start: DeleteRuleItem;
+	/**
+	 * 部分删除时的结束信息
+
+	 */
+	end: DeleteRuleItem;
+	/**
+	 * 忽略拓展名，true:忽略，false：不忽略
+	 */
+	ignorePostfix: boolean;
+
+	constructor(data: any) {
+		this.type = data.type;
+		this.start = new DeleteRuleItem(data.start);
+		this.end = new DeleteRuleItem(data.end);
+		this.ignorePostfix = data.ignorePostfix;
+	}
+
+
+
+	deal(file: FileObj): string {
+		return null;
+	}
+
+}
+
+class DeleteRuleItem {
+	/**
+	 * location:位置，text:文本，end:直到末尾
+	 */
+	type: string;
+	/**
+	 * 对应的值
+	 */
+	value: string;
+
+	constructor(data: any) {
+		this.type = data.type;
+		this.value = data.value;
+	}
+}
diff --git a/openRenamerBackend/vo/rules/InsertRule.ts b/openRenamerBackend/vo/rules/InsertRule.ts
new file mode 100644
index 0000000..7f1d92c
--- /dev/null
+++ b/openRenamerBackend/vo/rules/InsertRule.ts
@@ -0,0 +1,39 @@
+import RuleInterface from "./RuleInterface";
+import FileObj from "../FileObj";
+
+export default class InsertRule implements RuleInterface {
+
+	/**
+	 * 插入内容
+	 */
+	insertContent: string;
+	/**
+	 * 操作类别，front：前缀，backend：后缀，at:位置，replace:替换当前文件名
+	 */
+	type: string;
+	/**
+	 * 当type为at,时的位置,从1开始
+	 */
+	atInput: number;
+	/**
+	 * 当type为at,时的方向，true:从右到左，false:从左到右
+	 */
+	atIsRightToleft: boolean;
+	/**
+	 * 忽略拓展名，true:忽略，false：不忽略
+	 */
+	ignorePostfix: boolean;
+
+	constructor(data: any) {
+		this.insertContent = data.insertContent;
+		this.type = data.type;
+		this.atInput = data.atInput;
+		this.atIsRightToleft = data.atIsRightToleft;
+		this.ignorePostfix = data.ignorePostfix;
+	}
+
+
+	deal(file: FileObj): string {
+		return null;
+	}
+}
\ No newline at end of file
diff --git a/openRenamerBackend/vo/rules/RuleInterface.ts b/openRenamerBackend/vo/rules/RuleInterface.ts
new file mode 100644
index 0000000..b921ae5
--- /dev/null
+++ b/openRenamerBackend/vo/rules/RuleInterface.ts
@@ -0,0 +1,6 @@
+import FileObj from "../FileObj";
+
+export default interface RuleInterface {
+
+	deal(file: FileObj): string;
+}
\ No newline at end of file
diff --git a/openRenamerBackend/vo/rules/SerializationRule.ts b/openRenamerBackend/vo/rules/SerializationRule.ts
new file mode 100644
index 0000000..7c7cb0a
--- /dev/null
+++ b/openRenamerBackend/vo/rules/SerializationRule.ts
@@ -0,0 +1,47 @@
+import RuleInterface from "./RuleInterface";
+import FileObj from "../FileObj";
+
+export default class InsertRule implements RuleInterface {
+	/**
+	 * 开始位置
+	 */
+	start: number;
+	/**
+	 * 增量
+	 */
+	increment: number;
+	/**
+	 * 是否填充0
+	 */
+	addZero: boolean;
+	/**
+	 * 填充后长度
+	 */
+	numLength: number;
+	/**
+	 * 插入位置,front:前缀，backend：后缀，at：位置
+	 */
+	insertType: string;
+	/**
+	 * 插入的位置
+	 */
+	insertValue: number;
+	/**
+	 * 忽略拓展名
+	 */
+	ignorePostfix: boolean;
+
+	constructor(data: any) {
+		this.start = data.start;
+		this.increment = data.increment;
+		this.addZero = data.addZero;
+		this.numLength = data.numLength;
+		this.insertType = data.insertType;
+		this.insertValue = data.insertValue;
+		this.ignorePostfix = data.ignorePostfix;
+	}
+
+	deal(file: FileObj): string {
+		return null;
+	}
+}
\ No newline at end of file
diff --git a/openRenamerFront/src/views/home/Home.vue b/openRenamerFront/src/views/home/Home.vue
index d8e7e95..c6f6ad9 100644
--- a/openRenamerFront/src/views/home/Home.vue
+++ b/openRenamerFront/src/views/home/Home.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-loading="loading" element-loading-text="后台处理中，请稍候">
     <el-button type="primary" @click="dialogVisible = true" size="small"
       >新增文件</el-button
     >
@@ -39,6 +39,16 @@
     <!-- 文件预览列表 -->
     <div class="fileList">
       <div>文件列表</div>
+      <div class="fileBlock">
+        <div v-for="(item, index) in fileList" :key="index">
+          {{ item.name }}
+        </div>
+      </div>
+      <div class="fileBlock">
+        <div v-for="(item, index) in changedFileList" :key="index">
+          {{ item.name }}
+        </div>
+      </div>
     </div>
   </div>
   <el-dialog
@@ -62,6 +72,7 @@
 
 <script>
 // @ is an alias to /src
+import HttpUtil from "../../utils/HttpUtil";
 import FileChose from "@/components/FileChose";
 import Rule from "@/components/Rule";
 export default {
@@ -69,9 +80,11 @@ export default {
   components: { FileChose, Rule },
   data() {
     return {
+      loading: false, //遮罩
       dialogVisible: false,
-      ruleDialogShow: true, //规则弹床
+      ruleDialogShow: false, //规则弹床
       fileList: [],
+      changedFileList: [],
       ruleList: [],
       editRule: null,
     };
@@ -109,10 +122,16 @@ export default {
     deleteRule() {
       this.ruleList = this.ruleList.filter((item) => !item.checked);
     },
+    //编辑规则
     editClick() {
       this.editRule = this.checkedRules[0];
       this.ruleDialogShow = true;
     },
+    //预览结果
+    showResult() {
+      this.loading = true;
+      HttpUtil.post();
+    },
   },
 };
 </script>
@@ -133,4 +152,10 @@ export default {
     align-items: baseline;
   }
 }
+
+.fileBlock {
+  text-align: left;
+  display: inline-block;
+  width: 50%;
+}
 </style>