diff --git a/src/assets/styles/yxk-admin.scss b/src/assets/styles/yxk-admin.scss
index d8933ec..dee534c 100644
--- a/src/assets/styles/yxk-admin.scss
+++ b/src/assets/styles/yxk-admin.scss
@@ -2057,4 +2057,22 @@ input[type ='number'] {
     background: url("~@/assets/images/fileIcon/attachment.png") no-repeat;
     background-size: 100% 100%;
   }
+}
+
+.handle-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: nowrap;
+  .el-button{
+    padding: 5px;
+    font-size: 18px;
+    font-weight: normal;
+    &.iconfont::before{
+      margin-right: 0;
+    }
+    &.icon-xiazai{
+      font-size: 16px;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/router/routers.js b/src/router/routers.js
index 850bb84..71b4cee 100644
--- a/src/router/routers.js
+++ b/src/router/routers.js
@@ -62,6 +62,11 @@ export const constantRouterMap = [
     path: '/environmentalScreen',
     component: (resolve) => require(['@/views/environmentalScreen/index'], resolve),
     hidden: true
+  },
+  {
+    path: '/preview',
+    component: (resolve) => require(['@/views/preview/index'], resolve),
+    hidden: true
   }
 ]
 
diff --git a/src/views/archivesManage/managementLibrary/index.vue b/src/views/archivesManage/managementLibrary/index.vue
index d7c7b79..50dba0f 100644
--- a/src/views/archivesManage/managementLibrary/index.vue
+++ b/src/views/archivesManage/managementLibrary/index.vue
@@ -29,6 +29,7 @@
               </el-tree>
             </div>
             <h3 class="arc-title arc-title-bottom">快速筛选</h3>
+            <!-- @node-click="handleClassifyFilter" -->
             <el-tree
               ref="classifyTree"
               v-loading="classifyLoading"
@@ -38,7 +39,8 @@
               node-key="id"
               :expand-on-click-node="false"
               highlight-current
-              @node-click="handleClassifyFilter"
+              show-checkbox
+              @check-change="handleCheckChange"
             >
               <span slot-scope="{ node, data }" class="custom-tree-node">
                 <span v-if="data.childDictionarys || data.fondsName" class="iconClassify">
@@ -69,6 +71,7 @@
 
 <script>
 import crudCategory from '@/api/category/category'
+import crudRoles from '@/api/system/role'
 import { manageLibraryCrud } from './mixins/index'
 import { FetchDictionaryTreeByCategoryId } from '@/api/system/dict'
 import CRUD, { presenter, header } from '@crud/crud'
@@ -76,6 +79,7 @@ import Project from './project/index'
 import Anjuan from './anjuan/index'
 import Juannei from './juannei/index'
 import File from './file/index'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'ManagementLibrary',
@@ -138,12 +142,18 @@ export default {
         'doc_type': null, // 文种
         'medium_type': null, // 载体类型
         'archive_year': null, // 年度
+        'organ_or_function': null, // 机构与类型
         'fonds_no': null // 全宗
       },
       fixedStatusBar: false,
       listCategory: null
     }
   },
+  computed: {
+    ...mapGetters([
+      'user'
+    ])
+  },
   watch: {
     isRecycle: function(newValue, oldValue) {
     }
@@ -163,8 +173,9 @@ export default {
         if (this.yearChildData.length !== 0) {
           const newYearArr = this.yearChildData.map((item, index) => {
             const json = {}
-            json.id = index
+            json.id = item
             json.dictionaryName = item
+            json.dictionaryParents = '-1'
             json.childDictionarys = []
             return json
           })
@@ -249,6 +260,7 @@ export default {
         'doc_type': null, // 文种
         'medium_type': null, // 载体类型
         'archive_year': null, // 年度
+        'organ_or_function': null, // 机构与类型
         'fonds_no': null // 全宗
       }
       this.parentsProjectId = null
@@ -314,6 +326,9 @@ export default {
         this.$refs.fileEle.fileDrawer = false
       }
     },
+    getRole(id) {
+      return crudRoles.get(id)
+    },
     getDictionaryTreeByCategoryId(categoryId) {
       this.classifyLoading = true
       const params = {
@@ -327,11 +342,49 @@ export default {
           const parent = {}
           parent.id = 0
           parent.fondsName = '全宗'
-          parent.childDictionarys = res.fonds
+          parent.childDictionarys = res.fonds.map(item => {
+            return {
+              ...item,
+              id: item.fondsId
+            }
+          })
           fonds = parent
         }
         this.classifyTree = res.dictionarys.concat(fonds)
         this.classifyLoading = false
+
+        this.$nextTick(() => {
+          Promise.all(this.user.roles.map(item => this.getRole(item.id)))
+            .then(roles => {
+              // 去重取fonds合集
+              // const allFonds = []
+              // roles.forEach(role => {
+              //   role.fonds.forEach(fond => {
+              //     const existingIndex = allFonds.findIndex(item => item.id === fond.id)
+              //     if (existingIndex !== -1) {
+              //       allFonds[existingIndex] = fond
+              //     } else {
+              //       allFonds.push(fond)
+              //     }
+              //   })
+              // })
+              const allFondsIds = []
+              const fondsObj = {}
+
+              roles.forEach(role => {
+                role.fonds.forEach(fond => {
+                  if (!fondsObj[fond.id]) {
+                    fondsObj[fond.id] = fond
+                    allFondsIds.push(fond.id)
+                  }
+                })
+              })
+              this.$refs.classifyTree.setCheckedKeys(allFondsIds)
+            })
+            .catch(error => {
+              console.error('Error fetching roles:', error)
+            })
+        })
       }).catch(err => {
         console.log(err)
       })
@@ -392,6 +445,133 @@ export default {
         }
       }
     },
+    getIdByCode(dictionaryCode) {
+      for (const dictionary of this.classifyTree) {
+        if (dictionary.dictionaryCode === dictionaryCode) {
+          return dictionary.id
+        }
+      }
+      return null
+    },
+    handleCheckChange(data, checked, indeterminate) {
+      // 获取所有选中的节点
+      const res = this.$refs.classifyTree.getCheckedNodes()
+      console.log('res', res)
+      // const isFondsTop = res.some(obj => obj.fondsName === '全宗')
+      // if (isFondsTop) {
+      // this.smartQuery.fonds_no = null
+      const fondsGroup = res.filter(item => item.fondsId).map(item => item.fondsNo)
+      this.smartQuery.fonds_no = fondsGroup.join(',')
+      // }
+
+      const groupedData = {}
+      const securityId = this.getIdByCode('security_class')
+      const retentionId = this.getIdByCode('retention')
+      const docTypeId = this.getIdByCode('doc_type')
+      const mediumTypeId = this.getIdByCode('medium_type')
+      const organOrFunctionId = this.getIdByCode('organ_or_function')
+
+      res.forEach(function(item) {
+        if (item.dictionaryParents === '-1') {
+          groupedData.archive_year = groupedData.archive_year || []
+          groupedData.archive_year.push(item.dictionaryName)
+        } else if (item.dictionaryParents === securityId) {
+          groupedData.security_class = groupedData.security_class || []
+          groupedData.security_class.push(item.dictionaryName)
+        } else if (item.dictionaryParents === retentionId) {
+          groupedData.retention = groupedData.retention || []
+          groupedData.retention.push(item.dictionaryName)
+        } else if (item.dictionaryParents === docTypeId) {
+          groupedData.doc_type = groupedData.doc_type || []
+          groupedData.doc_type.push(item.dictionaryName)
+        } else if (item.dictionaryParents === mediumTypeId) {
+          groupedData.medium_type = groupedData.medium_type || []
+          groupedData.medium_type.push(item.dictionaryName)
+        } else if (item.dictionaryParents === organOrFunctionId) {
+          groupedData.organ_or_function = groupedData.organ_or_function || []
+          groupedData.organ_or_function.push(item.dictionaryName)
+        }
+      })
+
+      if (data.id) {
+        const selectedParentVal = this.$refs.classifyTree.getNode(data.id).parent.data.dictionaryCode
+        switch (selectedParentVal) {
+          case 'security_class':
+            if (res.find(obj => obj.dictionaryCode === 'security_class')) {
+              this.smartQuery.security_class = null
+            } else {
+              if (groupedData.security_class) {
+                this.smartQuery.security_class = groupedData.security_class.join(',')
+              } else {
+                this.smartQuery.security_class = null
+              }
+            }
+            break
+          case 'retention':
+            if (res.find(obj => obj.dictionaryCode === 'retention')) {
+              this.smartQuery.retention = null
+            } else {
+              if (groupedData.retention) {
+                this.smartQuery.retention = groupedData.retention.join(',')
+              } else {
+                this.smartQuery.retention = null
+              }
+            }
+            break
+          case 'doc_type':
+            if (res.find(obj => obj.dictionaryCode === 'doc_type')) {
+              this.smartQuery.doc_type = null
+            } else {
+              if (groupedData.doc_type) {
+                this.smartQuery.doc_type = groupedData.doc_type.join(',')
+              } else {
+                this.smartQuery.doc_type = null
+              }
+            }
+            break
+          case 'medium_type':
+            if (res.find(obj => obj.dictionaryCode === 'medium_type')) {
+              this.smartQuery.medium_type = null
+            } else {
+              if (groupedData.medium_type) {
+                this.smartQuery.medium_type = groupedData.medium_type.join(',')
+              } else {
+                this.smartQuery.medium_type = null
+              }
+            }
+            break
+          case 'organ_or_function':
+            if (res.find(obj => obj.dictionaryCode === 'organ_or_function')) {
+              this.smartQuery.organ_or_function = null
+            } else {
+              if (groupedData.organ_or_function) {
+                this.smartQuery.organ_or_function = groupedData.organ_or_function.join(',')
+              } else {
+                this.smartQuery.organ_or_function = null
+              }
+            }
+            break
+          default:
+            if (groupedData.archive_year) {
+              this.smartQuery.archive_year = groupedData.archive_year.join(',')
+            } else {
+              this.smartQuery.archive_year = null
+            }
+            // if (res.find(obj => obj.dictionaryCode === 'archive_year')) {
+            //   this.smartQuery.archive_year = null
+            // } else {
+            //   if (groupedData.archive_year) {
+            //     this.smartQuery.archive_year = groupedData.archive_year.join(',')
+            //   } else {
+            //     this.smartQuery.archive_year = null
+            //   }
+            // }
+        }
+      }
+      this.$nextTick(() => {
+        this.handlePageList('quickFilter')
+      })
+    },
     handleOpenAnjuan(data, parentId, parentsRow) {
       this.parentsProjectId = parentId
       this.parentsProjectRow = parentsRow
diff --git a/src/views/archivesManage/managementLibrary/mixins/index.js b/src/views/archivesManage/managementLibrary/mixins/index.js
index 2d5f6b7..69d2b74 100644
--- a/src/views/archivesManage/managementLibrary/mixins/index.js
+++ b/src/views/archivesManage/managementLibrary/mixins/index.js
@@ -109,7 +109,6 @@ export const manageLibraryCrud = {
       })
     },
     getViewTableList(categoryLevel, parentsId, type) {
-      console.log(this.smartQuery.fonds_no)
       const params = {
         'parentId': parentsId,
         'categoryId': this.selectedCategory.id,
@@ -123,6 +122,7 @@ export const manageLibraryCrud = {
         'medium_type': this.smartQuery.medium_type,
         'doc_type': this.smartQuery.doc_type,
         'archive_year': this.smartQuery.archive_year,
+        'organ_or_function': this.smartQuery.organ_or_function,
         'fonds_no': this.smartQuery.fonds_no,
         'project_class': this.query.project_class,
         'archive_ctg_no': this.query.archive_ctg_no,
diff --git a/src/views/collectReorganizi/collectionLibrary/index.vue b/src/views/collectReorganizi/collectionLibrary/index.vue
index ce69e01..bf6a5ae 100644
--- a/src/views/collectReorganizi/collectionLibrary/index.vue
+++ b/src/views/collectReorganizi/collectionLibrary/index.vue
@@ -71,6 +71,7 @@
 
 <script>
 import crudCategory from '@/api/category/category'
+import crudRoles from '@/api/system/role'
 import { collectionLibraryCrud } from './mixins/index.js'
 import { FetchDictionaryTreeByCategoryId } from '@/api/system/dict'
 import CRUD, { presenter, header } from '@crud/crud'
@@ -78,6 +79,7 @@ import Project from './project/index'
 import Anjuan from './anjuan/index'
 import Juannei from './juannei/index'
 import File from './file/index'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'CollectionLibrary',
@@ -141,12 +143,18 @@ export default {
         'doc_type': null, // 文种
         'medium_type': null, // 载体类型
         'archive_year': null, // 年度
+        'organ_or_function': null, // 机构与类型
         'fonds_no': null // 全宗
       },
       isTabFile: false,
       fixedStatusBar: false
     }
   },
+  computed: {
+    ...mapGetters([
+      'user'
+    ])
+  },
   watch: {
     isdel: function(newValue, oldValue) {
     },
@@ -166,15 +174,17 @@ export default {
           this.classifyTree = this.classifyTree.slice(1)
         }
         if (this.yearChildData.length !== 0) {
+          console.log('this.yearChildData', this.yearChildData)
           const newYearArr = this.yearChildData.map((item, index) => {
             const json = {}
-            json.id = index
+            json.id = item
             json.dictionaryName = item
             json.dictionaryParents = '-1'
             json.childDictionarys = []
             return json
           })
           this.classifyTree.unshift({ id: -1, dictionaryName: '年度', dictionaryCode: 'archive_year', childDictionarys: newYearArr })
+          console.log('this.classifyTree', this.classifyTree)
         }
         this.classifyLoading = false
       }, 500)
@@ -255,6 +265,7 @@ export default {
         'doc_type': null, // 文种
         'medium_type': null, // 载体类型
         'archive_year': null, // 年度
+        'organ_or_function': null, // 机构与类型
         'fonds_no': null // 全宗
       }
       this.parentsProjectId = null
@@ -321,6 +332,9 @@ export default {
         this.$refs.fileEle.fileDrawer = false
       }
     },
+    getRole(id) {
+      return crudRoles.get(id)
+    },
     getDictionaryTreeByCategoryId(categoryId) {
       this.classifyLoading = true
       const params = {
@@ -334,11 +348,49 @@ export default {
           const parent = {}
           parent.id = 0
           parent.fondsName = '全宗'
-          parent.childDictionarys = res.fonds
+          parent.childDictionarys = res.fonds.map(item => {
+            return {
+              ...item,
+              id: item.fondsId
+            }
+          })
           fonds = parent
         }
         this.classifyTree = res.dictionarys.concat(fonds)
         this.classifyLoading = false
+
+        this.$nextTick(() => {
+          Promise.all(this.user.roles.map(item => this.getRole(item.id)))
+            .then(roles => {
+              // 去重取fonds合集
+              // const allFonds = []
+              // roles.forEach(role => {
+              //   role.fonds.forEach(fond => {
+              //     const existingIndex = allFonds.findIndex(item => item.id === fond.id)
+              //     if (existingIndex !== -1) {
+              //       allFonds[existingIndex] = fond
+              //     } else {
+              //       allFonds.push(fond)
+              //     }
+              //   })
+              // })
+              const allFondsIds = []
+              const fondsObj = {}
+
+              roles.forEach(role => {
+                role.fonds.forEach(fond => {
+                  if (!fondsObj[fond.id]) {
+                    fondsObj[fond.id] = fond
+                    allFondsIds.push(fond.id)
+                  }
+                })
+              })
+              this.$refs.classifyTree.setCheckedKeys(allFondsIds)
+            })
+            .catch(error => {
+              console.error('Error fetching roles:', error)
+            })
+        })
       }).catch(err => {
         console.log(err)
       })
@@ -398,34 +450,50 @@ export default {
         }
       }
     },
+    getIdByCode(dictionaryCode) {
+      for (const dictionary of this.classifyTree) {
+        if (dictionary.dictionaryCode === dictionaryCode) {
+          return dictionary.id
+        }
+      }
+      return null
+    },
     handleCheckChange(data, checked, indeterminate) {
       // 获取所有选中的节点
       const res = this.$refs.classifyTree.getCheckedNodes()
-
-      if (res.some(obj => obj.fondsName === '全宗')) {
-        this.smartQuery.fonds_no = null
-      } else {
-        const fondsGroup = res.filter(item => item.fondsId).map(item => item.fondsNo)
-        this.smartQuery.fonds_no = fondsGroup.join(',')
-      }
+      // const isFondsTop = res.some(obj => obj.fondsName === '全宗')
+      // if (isFondsTop) {
+      // this.smartQuery.fonds_no = null
+      const fondsGroup = res.filter(item => item.fondsId).map(item => item.fondsNo)
+      this.smartQuery.fonds_no = fondsGroup.join(',')
+      // }
 
       const groupedData = {}
+      const securityId = this.getIdByCode('security_class')
+      const retentionId = this.getIdByCode('retention')
+      const docTypeId = this.getIdByCode('doc_type')
+      const mediumTypeId = this.getIdByCode('medium_type')
+      const organOrFunctionId = this.getIdByCode('organ_or_function')
+
       res.forEach(function(item) {
         if (item.dictionaryParents === '-1') {
           groupedData.archive_year = groupedData.archive_year || []
           groupedData.archive_year.push(item.dictionaryName)
-        } else if (item.dictionaryParents === '4028e3c389cee5920189cf0af3d30000') {
+        } else if (item.dictionaryParents === securityId) {
           groupedData.security_class = groupedData.security_class || []
           groupedData.security_class.push(item.dictionaryName)
-        } else if (item.dictionaryParents === '4028e3c38a20f4d4018a213c26ff001c') {
+        } else if (item.dictionaryParents === retentionId) {
           groupedData.retention = groupedData.retention || []
           groupedData.retention.push(item.dictionaryName)
-        } else if (item.dictionaryParents === '4028e3c38b4159fe018b415a7c470000') {
+        } else if (item.dictionaryParents === docTypeId) {
           groupedData.doc_type = groupedData.doc_type || []
           groupedData.doc_type.push(item.dictionaryName)
-        } else if (item.dictionaryParents === '4028e3c38b415cea018b417f4a6c0011') {
+        } else if (item.dictionaryParents === mediumTypeId) {
           groupedData.medium_type = groupedData.medium_type || []
           groupedData.medium_type.push(item.dictionaryName)
+        } else if (item.dictionaryParents === organOrFunctionId) {
+          groupedData.organ_or_function = groupedData.organ_or_function || []
+          groupedData.organ_or_function.push(item.dictionaryName)
         }
       })
 
@@ -433,7 +501,7 @@ export default {
         const selectedParentVal = this.$refs.classifyTree.getNode(data.id).parent.data.dictionaryCode
         switch (selectedParentVal) {
           case 'security_class':
-            if (res.some(obj => obj.dictionaryCode === 'security_class')) {
+            if (res.find(obj => obj.dictionaryCode === 'security_class')) {
               this.smartQuery.security_class = null
             } else {
               if (groupedData.security_class) {
@@ -444,7 +512,7 @@ export default {
             }
             break
           case 'retention':
-            if (res.some(obj => obj.dictionaryCode === 'retention')) {
+            if (res.find(obj => obj.dictionaryCode === 'retention')) {
               this.smartQuery.retention = null
             } else {
               if (groupedData.retention) {
@@ -455,7 +523,7 @@ export default {
             }
             break
           case 'doc_type':
-            if (res.some(obj => obj.dictionaryCode === 'doc_type')) {
+            if (res.find(obj => obj.dictionaryCode === 'doc_type')) {
               this.smartQuery.doc_type = null
             } else {
               if (groupedData.doc_type) {
@@ -466,7 +534,7 @@ export default {
             }
             break
           case 'medium_type':
-            if (res.some(obj => obj.dictionaryCode === 'medium_type')) {
+            if (res.find(obj => obj.dictionaryCode === 'medium_type')) {
               this.smartQuery.medium_type = null
             } else {
               if (groupedData.medium_type) {
@@ -476,19 +544,34 @@ export default {
               }
             }
             break
-          default:
-            if (res.some(obj => obj.dictionaryCode === 'archive_year')) {
-              this.smartQuery.archive_year = null
+          case 'organ_or_function':
+            if (res.find(obj => obj.dictionaryCode === 'organ_or_function')) {
+              this.smartQuery.organ_or_function = null
             } else {
-              if (groupedData.archive_year) {
-                this.smartQuery.archive_year = groupedData.archive_year.join(',')
+              if (groupedData.organ_or_function) {
+                this.smartQuery.organ_or_function = groupedData.organ_or_function.join(',')
               } else {
-                this.smartQuery.archive_year = null
+                this.smartQuery.organ_or_function = null
               }
             }
+            break
+          default:
+            if (groupedData.archive_year) {
+              this.smartQuery.archive_year = groupedData.archive_year.join(',')
+            } else {
+              this.smartQuery.archive_year = null
+            }
+            // if (res.find(obj => obj.dictionaryCode === 'archive_year')) {
+            //   this.smartQuery.archive_year = null
+            // } else {
+            //   if (groupedData.archive_year) {
+            //     this.smartQuery.archive_year = groupedData.archive_year.join(',')
+            //   } else {
+            //     this.smartQuery.archive_year = null
+            //   }
+            // }
         }
       }
-
       this.$nextTick(() => {
         this.handlePageList('quickFilter')
       })
diff --git a/src/views/collectReorganizi/collectionLibrary/mixins/index.js b/src/views/collectReorganizi/collectionLibrary/mixins/index.js
index aa0202b..d2bd3cc 100644
--- a/src/views/collectReorganizi/collectionLibrary/mixins/index.js
+++ b/src/views/collectReorganizi/collectionLibrary/mixins/index.js
@@ -118,6 +118,7 @@ export const collectionLibraryCrud = {
         'medium_type': this.smartQuery.medium_type,
         'doc_type': this.smartQuery.doc_type,
         'archive_year': this.smartQuery.archive_year,
+        'organ_or_function': this.smartQuery.organ_or_function,
         'fonds_no': this.smartQuery.fonds_no,
         'project_class': this.query.project_class,
         'archive_ctg_no': this.query.archive_ctg_no,
diff --git a/src/views/collectReorganizi/collectionLibrary/module/uploadFile/index.vue b/src/views/collectReorganizi/collectionLibrary/module/uploadFile/index.vue
index 2156b8b..ada6f21 100644
--- a/src/views/collectReorganizi/collectionLibrary/module/uploadFile/index.vue
+++ b/src/views/collectReorganizi/collectionLibrary/module/uploadFile/index.vue
@@ -66,7 +66,11 @@
       <!-- && !recycleMain.isRecycle -->
       <el-table-column v-if="!isUploadDetail && !parentsData.isRecycle" label="操作" min-width="80" align="center">
         <template slot-scope="scope">
-          <el-button class="file-down iconfont icon-weibiaoti-2" @click="downloadFile(scope.row)">下载</el-button>
+          <div class="handle-btn">
+            <el-button class="iconfont icon-sulan" @click="toPreview" />
+            <el-button class="iconfont icon-xiazai" @click="downloadFile(scope.row)" />
+            <el-button class="iconfont icon-dayin" />
+          </div>
         </template>
       </el-table-column>
     </el-table>
@@ -269,6 +273,10 @@ export default {
         this.tableData = data.returnlist
       })
     },
+    toPreview() {
+      const routeData = this.$router.resolve({ path: '/preview' })
+      window.open(routeData.href, '_blank')
+    },
     // 下载附件
     downloadFile(row) {
       const url = this.baseApi + '/downloadFile' + row.file_path
diff --git a/src/views/prearchiveLibrary/module/detail.vue b/src/views/prearchiveLibrary/module/detail.vue
index d21c671..9101e3e 100644
--- a/src/views/prearchiveLibrary/module/detail.vue
+++ b/src/views/prearchiveLibrary/module/detail.vue
@@ -70,6 +70,16 @@
                 </div>
               </template>
             </el-table-column>
+            <el-table-column label="操作" min-width="80" align="center">
+              <!-- slot-scope="scope" -->
+              <template>
+                <div class="handle-btn">
+                  <el-button class="iconfont icon-sulan" @click="toPreview" />
+                  <el-button class="iconfont icon-xiazai" />
+                  <el-button class="iconfont icon-dayin" />
+                </div>
+              </template>
+            </el-table-column>
           </el-table>
         </div>
         <!-- 元数据 -->
@@ -135,6 +145,10 @@ export default {
   mounted() {
   },
   methods: {
+    toPreview() {
+      const routeData = this.$router.resolve({ path: '/preview' })
+      window.open(routeData.href, '_blank')
+    },
     getFileSize(fileSize) {
       const fileSizeInKB = (fileSize / 1024).toFixed(2) + 'kB'
       const fileSizeInB = fileSize + 'B'
@@ -309,4 +323,5 @@ code.hljs {
   width: 60px;
   height: 32px;
 }
+
 </style>
diff --git a/src/views/preview/index.vue b/src/views/preview/index.vue
new file mode 100644
index 0000000..4867a9e
--- /dev/null
+++ b/src/views/preview/index.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="preview-main">
+    预览页
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Preview',
+  components: {
+  },
+  mixins: [],
+  data() {
+    return {
+
+    }
+  },
+  created() {
+  },
+  mounted() {
+  },
+  beforeDestroy() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>