diff --git a/index.js b/index.js
index 05911a0..031999c 100644
--- a/index.js
+++ b/index.js
@@ -31,9 +31,12 @@ const argv = UtilArgs.getArgv();
     const compareRevalidateQueueRhs = UtilQueue.createQueue({ concurrency: argv.m });
     const compareRevalidateSummary = await UtilCompare.revalidateCompareSummary(compareSummary, compareRevalidateQueueLhs, compareRevalidateQueueRhs);
 
+    // resort compare summary
+    const compareResortSummary = UtilCompare.resortCompareSummary(compareRevalidateSummary);
+
     // save compare summary
     const compareSummaryOutputPath = UtilPath.resolve(argv.o, './compare-summary.json');
-    UtilFs.writeJson(compareSummaryOutputPath, compareRevalidateSummary);
+    UtilFs.writeJson(compareSummaryOutputPath, compareResortSummary);
 
     // compare report
     const compareReport = UtilCompare.getCompareReport(compareRevalidateSummary);
diff --git a/package.json b/package.json
index aa885c1..b268ad1 100644
--- a/package.json
+++ b/package.json
@@ -1,15 +1,15 @@
 {
-  "name": "file-compare",
+  "name": "@kongying-tavern/file-compare",
   "version": "0.0.0",
   "main": "index.js",
   "type": "module",
   "license": "MIT",
-  "private": false,
   "scripts": {
     "commit": "cz",
     "compare": "node index.js",
     "lint": "eslint --ext .js,.ts .",
-    "release": "semantic-release"
+    "release": "semantic-release",
+    "yalc": "yalc publish"
   },
   "description": "Compare file differences between two directories and generate report",
   "keywords": [
@@ -25,6 +25,7 @@
     "md5": "^2.3.0",
     "p-queue": "^7.2.0",
     "progress": "^2.0.3",
+    "string-natural-compare": "^3.0.1",
     "yargs": "^17.3.1"
   },
   "devDependencies": {
@@ -56,5 +57,6 @@
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "packageManager": "pnpm@8.10.0+sha512.9c2cb83f2b6cf6a25d8c58300bf99197c7ef3be84cf3e766f29054b40b83b42f8aaba6fcc314a9ecf27c00f7ce80a757bb4c608800e7adbe2d29dc5c7056f5be"
 }
diff --git a/template/compare.summary.vue b/template/compare.summary.vue
index 4456e06..e216360 100644
--- a/template/compare.summary.vue
+++ b/template/compare.summary.vue
@@ -25,6 +25,15 @@
   .action-wrapper {
     flex: none;
     margin-bottom: .7rem;
+    display: flex;
+    gap: .2rem;
+    align-items: center;
+  }
+  .action-wrapper .wrapper {
+    flex: auto;
+  }
+  .action-wrapper .summary {
+    flex: none;
   }
   .table-wrapper {
     position: relative;
@@ -71,34 +80,48 @@
       </el-form>
     </el-drawer>
 
+    <!-- Action Tools -->
     <div class="action-wrapper">
-      <el-button
-        size="mini"
-        type="info"
-        icon="el-icon-search"
-        circle
-        @click="popupFilterDrawer">
-      </el-button>
+      <div class="wrapper">
+        <el-button
+          size="mini"
+          type="info"
+          icon="el-icon-search"
+          circle
+          @click="popupFilterDrawer">
+        </el-button>
+      </div>
+      <div class="summary">
+        <template v-for="(type, index) in plugins.typeOptions">
+          {{type.label}}
+          <el-tag type="primary">{{dataTypeCount[type.value] ?? 0}}</el-tag>
+        </template>
+      </div>
     </div>
 
+    <!-- Table -->
     <div class="table-wrapper">
       <el-table
         class="table-component"
         :data="compareDataFiltered"
         size="mini"
         border
-        height="auto">
+        height="auto"
+        @sort-change="sortChange">
         <el-empty slot="empty" description="暂无数据"></el-empty>
 
         <el-table-column
           label="数字签名"
-          sortable
-          sort-by="hash">
+          sortable="custom"
+          prop="hash">
+          <template slot-scope="scope">
+            {{scope.row.hash}}
+          </template>
         </el-table-column>
         <el-table-column
           label="左侧文件名"
-          sortable
-          sort-by="lhs.0.filename">
+          sortable="custom"
+          prop="lhs">
           <template slot-scope="scope">
             <template v-if="scope.row.lhs && scope.row.lhs.length > 0">
               <div v-for="(item, i) in scope.row.lhs" :key="i">
@@ -110,8 +133,8 @@
         <el-table-column
           width="100"
           align="center"
-          sortable
-          sort-by="type">
+          sortable="custom"
+          prop="type">
           <template slot-scope="scope">
             <el-button
               size="mini"
@@ -123,8 +146,8 @@
         </el-table-column>
         <el-table-column
           label="右侧侧文件名"
-          sortable
-          sort-by="rhs.0.filename">
+          sortable="custom"
+          prop="rhs">
           <template slot-scope="scope">
             <template v-if="scope.row.rhs && scope.row.rhs.length > 0">
               <div v-for="(item, i) in scope.row.rhs" :key="i">
@@ -140,12 +163,14 @@
   <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
   <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/index.js"></script>
   <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
+  <script type="text/javascript" src="https://unpkg.com/natural-compare-lite@1.4.0/index.js"></script>
   <script type="text/javascript">
+  const initData = {{__ summary __}};
   new Vue({
     el: '#app',
     data() {
       return {
-        compareData: {{__ summary __}},
+        compareDataSorted: [],
         state: {
           filterDrawerVisible: false,
           filterTypes: ['add', 'remove', 'same'],
@@ -176,13 +201,22 @@
     },
     computed: {
       compareDataFiltered() {
-        let list = this.compareData || [];
+        let list = this.compareDataSorted || [];
         list = this.applyTypeMapper(list);
         list = this.applyTypeFilter(list);
 
         return list;
+      },
+      dataTypeCount() {
+        return _.reduce(initData, (res, val, key) => {
+          res[val.type] = (res[val.type] ?? 0) + 1;
+          return res;
+        }, {});
       }
     },
+    mounted() {
+      this.compareDataSorted = _.cloneDeep(initData);
+    },
     methods: {
       // popups / popdowns
       popupFilterDrawer() {
@@ -206,6 +240,62 @@
         let listFiltered = _.filter(list, v => this.state.filterTypes.indexOf(v.type) !== -1);
 
         return listFiltered;
+      },
+      // Sorter
+      sortNatualCompare(a, b, order) {
+        const compareRes = naturalCompare(a, b);
+        switch(order) {
+          case 'ascending':
+            return compareRes;
+          case 'descending':
+            return -compareRes;
+          default:
+            return 0;
+        }
+      },
+      sortStringCompare(a, b, order) {
+        let compareRes = 0;
+        if(a > b) {
+          compareRes = -1;
+        } else if(a < b) {
+          compareRes = 1;
+        }
+        switch(order) {
+          case 'ascending':
+            return compareRes;
+          case 'descending':
+            return -compareRes;
+          default:
+            return 0;
+        }
+      },
+      sortChange({ column, prop, order }) {
+        const list = _.cloneDeep(initData);
+        if(prop === 'lhs') {
+          this.compareDataSorted = list.sort((a, b) => {
+            const aName = _.get(a, 'lhs.0.filename', '');
+            const bName = _.get(b, 'lhs.0.filename', '');
+            return this.sortNatualCompare(aName, bName, order);
+          });
+        } else if(prop === 'rhs') {
+          this.compareDataSorted = list.sort((a, b) => {
+            const aName = _.get(a, 'rhs.0.filename', '');
+            const bName = _.get(b, 'rhs.0.filename', '');
+            return this.sortNatualCompare(aName, bName, order);
+          });
+        } else if(prop === 'type') {
+          this.compareDataSorted = list.sort((a, b) => {
+            const aType = _.get(a, 'type', '');
+            const bType = _.get(b, 'type', '');
+            return this.sortStringCompare(aType, bType, order);
+          });
+        } else if(prop === 'hash') {
+          this.compareDataSorted = list.sort((a, b) => {
+            const aHash = _.get(a, 'hash', '');
+            const bHash = _.get(b, 'hash', '');
+            return this.sortStringCompare(aHash, bHash, order);
+          });
+        }
       }
     }
   })
diff --git a/util/compare.js b/util/compare.js
index 9ce687f..2151af2 100644
--- a/util/compare.js
+++ b/util/compare.js
@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import StringNaturalCompare from 'string-natural-compare';
 import UtilFs from './fs.js';
 import UtilPath from './path.js';
 import UtilHash from './hash.js';
@@ -6,15 +7,21 @@ import UtilProgress from './progress.js';
 
 const currentPath = UtilPath.fromUrl(import.meta.url);
 
-async function getFileSummary (base = '', paths = [], queue = null) {
+async function getFileSummary(base = '', paths = [], queue = null) {
     const countTotal = paths.length;
     const progress = UtilProgress.createProgressbar({ total: countTotal });
     const summary = [];
-    const hashChunkConfig = UtilHash.getHashChunkPlots({ name: 'single plot', offset: 0, limit: 100 * 1024 });
 
     _.each(paths, async path => {
         await queue.add(() => {
             const filename = UtilPath.relative(base, path);
+            const hashChunkConfig = UtilHash.getHashChunkPlots({
+                name: 'distribution plots',
+                file: path,
+                chunks: 10,
+                offset: 0,
+                limit: 100 * 1024
+            });
             const md5 = UtilHash.getHashByChunks(path, {
                 chunks: hashChunkConfig
             });
@@ -35,7 +42,7 @@ async function getFileSummary (base = '', paths = [], queue = null) {
     return summary;
 }
 
-async function rehashFileSummary (files = [], queue = null) {
+async function rehashFileSummary(files = [], queue = null) {
     const countTotal = files.length;
     const progress = UtilProgress.createProgressbar({ total: countTotal });
     const summary = [];
@@ -46,7 +53,7 @@ async function rehashFileSummary (files = [], queue = null) {
             const chunkConfig = UtilHash.getHashChunkPlots({
                 name: 'distribution plots',
                 file: path,
-                chunks: 10,
+                chunks: 100,
                 offset: 0,
                 limit: 10 * 1024
             });
@@ -71,7 +78,7 @@ async function rehashFileSummary (files = [], queue = null) {
     return summary;
 }
 
-function getCompareSummary (lhs = [], rhs = []) {
+function getCompareSummary(lhs = [], rhs = []) {
     const lhsMap = _.groupBy(lhs, 'md5');
     const lhsHashes = _.keys(lhsMap);
     const rhsMap = _.groupBy(rhs, 'md5');
@@ -106,7 +113,7 @@ function getCompareSummary (lhs = [], rhs = []) {
     return summary;
 }
 
-async function revalidateCompareSummary (summary = [], lhsQueue = null, rhsQueue = null) {
+async function revalidateCompareSummary(summary = [], lhsQueue = null, rhsQueue = null) {
     const summaryUnsame = _.filter(summary, v => v.type !== 'same');
     const summarySame = _.filter(summary, v => v.type === 'same');
 
@@ -121,7 +128,17 @@ async function revalidateCompareSummary (summary = [], lhsQueue = null, rhsQueue
     return summaryNew;
 }
 
-function getCompareReport (summary = []) {
+function resortCompareSummary(summary = []) {
+    return _.map(summary, v => {
+        const lhs = _.chain(v.lhs || []).flattenDeep().value().sort((a, b) => StringNaturalCompare(a.filename, b.filename));
+        const rhs = _.chain(v.rhs || []).flattenDeep().value().sort((a, b) => StringNaturalCompare(a.filename, b.filename));
+        v.lhs = lhs;
+        v.rhs = rhs;
+        return v;
+    });
+}
+
+function getCompareReport(summary = []) {
     const templatePath = UtilPath.resolve(currentPath, '../../template/compare.summary.vue');
     const template = UtilFs.readFile(templatePath);
     const renderer = _.template(template, {
@@ -136,5 +153,6 @@ export default {
     rehashFileSummary,
     getCompareSummary,
     revalidateCompareSummary,
+    resortCompareSummary,
     getCompareReport
 };