diff --git a/src/utils/FilePicker.js b/src/utils/FilePicker.js
new file mode 100644
index 0000000..08a6706
--- /dev/null
+++ b/src/utils/FilePicker.js
@@ -0,0 +1,55 @@
+/**
+ * 本地文件选择
+ */
+export class FilePicker {
+  /**
+   * 接口是否可用
+   * @returns { Boolean }
+   */
+  static canUse() {
+    return !!(window.showDirectoryPicker && window.showOpenFilePicker)
+  }
+
+  /**
+   * 选择一个目录
+   * @returns { Promise<FileSystemDirectoryHandle> }
+   */
+  static chooseDirectory() {
+    if (!this.canUse()) {
+      throw new Error('Not Support showDirectoryPicker')
+    }
+    return window.showDirectoryPicker()
+  }
+
+  /**
+   * 选择一个文件
+   * @param { Boolean } multiple
+   * @param { { description?: string; accept?: { [key: string]: string[]; } } } types
+   * @returns { Promise<FileSystemFileHandle[]> }
+   */
+  static chooseFile(multiple, types) {
+    if (!this.canUse()) {
+      throw new Error('Not Support showOpenFilePicker')
+    }
+    const pickerOpts = {
+      multiple,
+      types,
+      excludeAcceptAllOption: true
+    }
+    return window.showOpenFilePicker(pickerOpts)
+  }
+
+  /**
+   * 判断一个文件是否在某个目录下
+   * @param {FileSystemDirectoryHandle} directoryHandle
+   * @param {FileSystemFileHandle} fileHandle
+   */
+  static async isFileInDirectory(directoryHandle, fileHandle) {
+    const relativePaths = await directoryHandle.resolve(fileHandle)
+    if (relativePaths === null || relativePaths.length > 1) {
+      return false
+    } else {
+      return true
+    }
+  }
+}
diff --git a/src/utils/file.js b/src/utils/file.js
index 60c4ac9..4c1830c 100644
--- a/src/utils/file.js
+++ b/src/utils/file.js
@@ -1,5 +1,6 @@
 import { Modal } from 'ant-design-vue'
 import { saveAs } from 'file-saver'
+import JSZip from 'jszip'
 
 /**
  * 弹窗填入文件名保存文件
@@ -31,3 +32,47 @@ export const showSaveFileModal = (data, ext) => {
     }
   })
 }
+
+/**
+ * 读文件
+ * @param {File} file
+ * @param { 'arrayBuffer' | 'text' | 'dataURL' | 'binaryString'} fileType
+ */
+export const readFile = (file, fileType = 'text') => {
+  return new Promise((resolve, reject) => {
+    const fileReader = new FileReader()
+    const category = {
+      arrayBuffer: 'readAsArrayBuffer',
+      text: 'readAsText',
+      dataURL: 'readAsDataURL',
+      binaryString: 'readAsBinaryString'
+    }
+    fileReader[category[fileType]](file)
+    fileReader.onload = event => {
+      resolve(event.target.result)
+    }
+    fileReader.onerror = error => {
+      reject(error)
+    }
+  })
+}
+
+/**
+ * 压缩文件
+ * @param {Array<File>} fileList 
+ * @param {string} zipName 
+ * @returns 
+ */
+export const zipFile = async (fileList, zipName) => {
+  const zip = new JSZip()
+  const promises = []
+  fileList.forEach(file => {
+    promises.push(readFile(file, 'arrayBuffer'))
+  })
+  const result = await Promise.all(promises)
+  result.forEach(res => {
+    zip.file(res.fileName, res.data)
+  })
+  const content = await zip.generateAsync({ type: 'blob' })
+  return new File([content], zipName, { type: content.type })
+}
diff --git a/src/utils/phdHelper.js b/src/utils/phdHelper.js
new file mode 100644
index 0000000..04ef354
--- /dev/null
+++ b/src/utils/phdHelper.js
@@ -0,0 +1,116 @@
+export class PHDParser {
+  /**
+   * 数据类型
+   */
+  dataType = ''
+
+  /**
+   * 类型 B G 等
+   */
+  fileType = ''
+
+  /**
+   * 质量 FULL 等
+   */
+  qualify = ''
+
+  /**
+   * 生存时间
+   */
+
+  liveTime = ''
+
+  /**
+   * sample 谱的文件名
+   */
+  sampleFilePrefix = ''
+
+  /**
+   * 其他文件名
+   */
+  otherFilePrefixes = []
+
+  /**
+   * 构造函数
+   * @param {string} text
+   */
+  constructor(text) {
+    const getLine = this.readTextLine(text)
+    const dataTypeLine = getLine(4)
+    const fileTypeLine = getLine(6)
+    const fileNameLine = getLine(8)
+    const liveTimeLine = getLine(18)
+
+    this.dataType = this.getOnymousData(dataTypeLine)[0]
+    const fileType = this.splitLineText(fileTypeLine)
+    this.fileType = fileType[2]
+    this.qualify = fileType[4]
+
+    const liveTime = parseFloat(this.splitLineText(liveTimeLine)[3]).toFixed(1)
+    this.liveTime = liveTime.indexOf('.0') == -1 ? liveTime : liveTime.slice(0, -2)
+
+    // 如果是 Beta 谱
+    if (this.fileType == 'B') {
+      // 如果解析的是sample 文件，则获取其他三个文件
+      if (this.dataType == PHD_DATA_TYPE.SAMPLEPHD) {
+        const filePrefixes = this.getFilePrefixes(fileNameLine)
+        this.sampleFilePrefix = filePrefixes.splice(0, 1)[0]
+        this.otherFilePrefixes = filePrefixes
+      }
+    }
+  }
+  /**
+   * 将文本按行分割
+   * @param {string} text
+   * @returns { (line: number) => string }
+   */
+  readTextLine(text) {
+    const splited = text.split('\n')
+    return line => {
+      return splited[line - 1]
+    }
+  }
+
+  /**
+   * 获取 具名 行的数据
+   * @param {string} text
+   * @example DATA_TYPE SAMPLEPHD 返回['SAMPLEPHD']
+   * @returns {string[]}
+   */
+  getOnymousData(text) {
+    return text.split(' ').slice(1)
+  }
+
+  /**
+   * 将一行中的文本按空格切割
+   * @param {string} text
+   */
+  splitLineText(text) {
+    return text.replace(/\s+/g, ',').split(',')
+  }
+
+  /**
+   * 获取全部文件名
+   * @param {string} text
+   */
+  getFilePrefixes(text) {
+    const unHandledfilePrefixes = this.splitLineText(text)
+    const filePrefixes = unHandledfilePrefixes
+      .filter(filePrefix => filePrefix)
+      .map(filePrefix => {
+        filePrefix = filePrefix.replace(/(\d{4})\/(\d{2})\/(\d{2})-(\d{2}):(\d{2})/, '$1$2$3_$4$5')
+        return filePrefix + '_'
+      })
+    return filePrefixes
+  }
+}
+
+/**
+ * PHD 类型
+ */
+export const PHD_DATA_TYPE = {
+  QCPHD: 'QCPHD',
+  DETBKPHD: 'DETBKPHD',
+  SAMPLEPHD: 'SAMPLEPHD',
+  GASBKPHD: 'GASBKPHD'
+}
diff --git a/src/views/spectrumAnalysis/components/Modals/LoadFromFileModal.vue b/src/views/spectrumAnalysis/components/Modals/LoadFromFileModal.vue
index 8221959..9c28bdc 100644
--- a/src/views/spectrumAnalysis/components/Modals/LoadFromFileModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/LoadFromFileModal.vue
@@ -1,7 +1,68 @@
 <template>
   <div>
     <custom-modal v-model="visible" :width="1200" title="Load Data From File">
+      <!-- 支持 File System Access 的情况 -->
       <a-table
+        v-if="canUseFilePicker"
+        :dataSource="list"
+        :columns="columns"
+        :pagination="false"
+        bordered
+        :scroll="{ y: 450 }"
+      >
+        <template slot="sampleData" slot-scope="text, record, index">
+          <div
+            class="file-name file-ellipsis"
+            :title="text && text.fileName"
+            @dblclick="useFilePicker('sampleFileName', record, index)"
+          >
+            {{ text && text.fileName }}
+          </div>
+        </template>
+        <template slot="gasBkData" slot-scope="text, record, index">
+          <div
+            :class="['file-ellipsis', text && text.file ? '' : 'file-name-color']"
+            :title="text && text.fileName"
+            @dblclick="useFilePicker('gasFileName', record, index)"
+          >
+            {{ text && text.fileName }}
+          </div>
+        </template>
+        <template slot="detBkData" slot-scope="text, record, index">
+          <div
+            :class="['file-ellipsis', text && text.file ? '' : 'file-name-color']"
+            :title="text && text.fileName"
+            @dblclick="useFilePicker('detFileName', record, index)"
+          >
+            {{ text && text.fileName }}
+          </div>
+        </template>
+        <template slot="qcData" slot-scope="text, record, index">
+          <div
+            :class="['file-ellipsis', text && text.file ? '' : 'file-name-color']"
+            :title="text && text.fileName"
+            @dblclick="useFilePicker('qcFileName', record, index)"
+          >
+            {{ text && text.fileName }}
+          </div>
+        </template>
+        <template slot="status" slot-scope="text, record">
+          <template v-if="record.sampleFileName">
+            <span
+              class="status"
+              :class="
+                record.fileType == 'B' &&
+                !(record.gasFileName && record.gasFileName.file && record.detFileName && record.detFileName.file)
+                  ? 'status_false'
+                  : 'status_true'
+              "
+            ></span>
+          </template>
+        </template>
+      </a-table>
+      <!-- 不支持 File System Access 的情况 -->
+      <a-table
+        v-else
         :data-source="list"
         :columns="columns"
         :loading="loading_list"
@@ -13,7 +74,7 @@
           <div class="file-name file-ellipsis" :title="text" @dblclick="handleFileSelect('_S_', record)">
             {{ text }}
           </div>
-          <!-- <phd-select type="file" @change="handleFileChange(record, 'sampleData', $event)" @select="handleFileSelect" :title="text && text.name">
+          <!-- <phd-select type="file" @change="handleFileChange(record, 'sampleData', $event)" @select="handleFileSelect" :title="text && text.fileName">
             {{ text }}
           </phd-select> -->
         </template>
@@ -61,6 +122,7 @@
       <template slot="custom-footer">
         <a-space>
           <a-upload
+            v-if="!canUseFilePicker"
             accept=".PHD,.phd"
             :custom-request="handleUpload"
             :multiple="true"
@@ -70,7 +132,7 @@
             <a-button type="primary" :loading="uploading"> Upload </a-button>
           </a-upload>
           <a-button type="primary" @click="handleReset">Reset</a-button>
-          <a-button type="primary" @click="handleLoad">Load</a-button>
+          <a-button :loading="isUploadingZip" type="primary" @click="handleLoad">Load</a-button>
           <a-button type="primary" @click="handleCancel">Cancel</a-button>
         </a-space>
       </template>
@@ -140,10 +202,12 @@
 </template>
 
 <script>
-import JSZip from 'jszip'
-import FileSaver from 'file-saver'
-import PhdSelect from '../PHDSelect.vue'
 import { getAction, postAction } from '../../../../api/manage'
+import { FilePicker } from '@/utils/FilePicker'
+import { readFile, zipFile } from '@/utils/file'
+import { PHDParser, PHD_DATA_TYPE } from '@/utils/phdHelper'
+import ModalMixin from '@/mixins/ModalMixin'
+
 const columns = [
   {
     title: 'SampleData',
@@ -208,8 +272,11 @@ const columns_file = [
     align: 'left',
   },
 ]
+
+const canUseFilePicker = FilePicker.canUse()
+
 export default {
-  components: { PhdSelect },
+  mixins: [ModalMixin],
   props: {
     value: {
       type: Boolean,
@@ -223,7 +290,8 @@ export default {
       columns_file,
       loading_file: false,
       loading_list: false,
-      list: this.getInitialList(),
+      isUploadingZip: false,
+      list: [],
       ipagination: {
         current: 1,
         pageSize: 10,
@@ -247,6 +315,8 @@ export default {
       selectionRows_edit: [],
       tableType: 'multiple',
       searchName: '',
+
+      canUseFilePicker,
     }
   },
   methods: {
@@ -290,6 +360,153 @@ export default {
       this.tableType = str === '_S_' ? 'multiple' : 'single'
       this.getSpectrumFile({ pageNo: 1, pageSize: 10 })
     },
+
+    // 用新的文件操作接口
+    async useFilePicker(column, record, rowIndex) {
+      // 如果没有选择sampleFile，则不允许选其他的
+      if (column !== 'sampleFileName' && (!record.sampleFileName || record.fileType !== 'B')) {
+        return
+      }
+
+      if (this.directoryHanlder) {
+        this.chooseFile(column, record, rowIndex)
+      } else {
+        try {
+          this.directoryHanlder = await FilePicker.chooseDirectory()
+          this.chooseFile(column, record, rowIndex)
+        } catch {}
+      }
+    },
+
+    async chooseFile(column, record, rowIndex) {
+      try {
+        const [fileHandle] = await FilePicker.chooseFile(false, [{ accept: { 'text/phd': ['.phd'] } }])
+        try {
+          const isFileInDirectory = await FilePicker.isFileInDirectory(this.directoryHanlder, fileHandle)
+          if (!isFileInDirectory) {
+            this.$message.warn('File and Directory Not in Same')
+            this.directoryHanlder = undefined
+            return
+          }
+
+          const file = await fileHandle.getFile()
+          const text = await readFile(file)
+          const phdParser = new PHDParser(text)
+          console.log('%c [ phdParser ]-313', 'font-size:13px; background:pink; color:#bf2c9f;', phdParser)
+          const match = this.fileNameAndColumnMatch(column, phdParser.dataType)
+          if (!match) {
+            this.$message.warn('File Type Error')
+            return
+          }
+
+          record.fileType = phdParser.fileType
+
+          // 如果是sample
+          if (column == 'sampleFileName') {
+            // 看看之前有没有选中过该文件，非同一行，则只能选择文件名不同的
+            const findIndex = this.list.findIndex(
+              (item) => item.sampleFileName && item.sampleFileName.file && item.sampleFileName.file.name == file.name
+            )
+            if (-1 !== findIndex && findIndex !== rowIndex) {
+              return
+            }
+
+            const { sampleFilePrefix, otherFilePrefixes, qualify, liveTime } = phdParser
+            record.sampleFileName = {
+              file,
+              fileName: `${sampleFilePrefix}S_${qualify}_${liveTime}.PHD`,
+            }
+
+            const iter = await this.directoryHanlder.values()
+            const fileList = []
+
+            let result = await iter.next()
+            while (!result.done) {
+              const fileHandle = result.value
+              const file = await fileHandle.getFile()
+              fileList.push(file)
+              result = await iter.next()
+            }
+
+            const nameKeys = ['detFileName', 'gasFileName']
+            const fileTypes = ['D', 'G']
+
+            otherFilePrefixes.forEach((otherFilePrefix, index) => {
+              const fileType = fileTypes[index]
+              // 在所有文件中查找 名字含有 从sample文件解析出的文件名 的文件
+              const findFile = fileList.find((file) => {
+                return file.name.includes(`${otherFilePrefix}${fileType}_${qualify}`)
+              })
+
+              if (findFile) {
+                record[nameKeys[index]] = {
+                  file: findFile,
+                  fileName: findFile.name,
+                }
+              } else {
+                record[nameKeys[index]] = {
+                  file: undefined,
+                  fileName: `${otherFilePrefix}${fileType}.PHD`,
+                }
+              }
+            })
+
+            // 查找 QC 文件
+            let qcFileInfo = {
+              file: undefined,
+              fileName: `${sampleFilePrefix}Q.PHD`,
+            }
+            const qcFileList = fileList.filter((file) => file.name.includes('_Q_'))
+            for (const qcFile of qcFileList) {
+              if (qcFile.name.slice(0, 23) <= sampleFilePrefix) {
+                qcFileInfo = {
+                  file: qcFile,
+                  fileName: qcFile.name,
+                }
+              } else {
+                break
+              }
+            }
+            record.qcFileName = qcFileInfo
+          }
+          // 非sample
+          else {
+            record[column] = {
+              file,
+              fileName: file.name,
+            }
+          }
+        } catch (error) {
+          console.log(error)
+        }
+      } catch {}
+    },
+
+    /**
+     * 判断文件和列是否匹配
+     * @param {*} column
+     * @param {*} dataType
+     */
+    fileNameAndColumnMatch(column, dataType) {
+      let currDataType = ''
+      switch (column) {
+        case 'sampleFileName':
+          currDataType = PHD_DATA_TYPE.SAMPLEPHD
+          break
+        case 'gasFileName':
+          currDataType = PHD_DATA_TYPE.GASBKPHD
+          break
+        case 'detFileName':
+          currDataType = PHD_DATA_TYPE.DETBKPHD
+          break
+        case 'qcFileName':
+          currDataType = PHD_DATA_TYPE.QCPHD
+          break
+      }
+
+      return currDataType == dataType
+    },
+
     onSearchFileName() {
       this.getSpectrumFile({ pageNo: 1, pageSize: 10 })
     },
@@ -370,74 +587,93 @@ export default {
     beforeUpload(file, fileList) {
       this.fileList = fileList
     },
-    handleUpload({ file }) {
+    async handleUpload() {
       this.uploading = true
       this.fileNum += 1
       if (this.fileNum == this.fileList.length) {
-        this.zipFile(this.fileList)
+        const file = await zipFile(this.fileList, 'test.zip')
+        const res = await this.uploadZipFile(file)
+        this.uploading = false
+        this.fileNum = 0
+        if (res.success) {
+          this.$message.success(res.message)
+        } else {
+          this.$message.warning(res.message)
+        }
       }
     },
-    async zipFile(fileList, onProgress) {
-      const zip = new JSZip()
-      const promises = []
-      fileList.forEach((file) => {
-        promises.push(this.readAsArrayBuffer(file))
-      })
-      Promise.all(promises).then((result) => {
-        result.forEach((res) => {
-          zip.file(res.fileName, res.data)
-        })
-        zip.generateAsync({ type: 'blob' }).then((content) => {
-          let file = new File([content], 'test.zip', { type: content.type })
-          const formData = new FormData()
-          formData.append('file', file)
-          postAction('/spectrumFile/upload', formData).then((res) => {
-            this.uploading = false
-            this.fileNum = 0
-            if (res.success) {
-              this.$message.success(res.message)
-            } else {
-              this.$message.warning(res.message)
-            }
-          })
-        })
-      })
-    },
 
-    async readAsArrayBuffer(file) {
-      return new Promise((resolve) => {
-        let reader = new FileReader()
-        reader.readAsArrayBuffer(file)
-        reader.onload = (e) => {
-          resolve({
-            fileName: file.name,
-            data: e.target.result,
-          })
-        }
-      })
+    // 上传zip文件
+    async uploadZipFile(file) {
+      const formData = new FormData()
+      formData.append('file', file)
+      const res = await postAction('/spectrumFile/upload', formData)
+      return res
     },
 
     handleReset() {
       this.list = this.getInitialList()
     },
 
-    handleLoad() {
-      this.visible = false
-      this.$emit('loadFormFile', this.list)
+    async handleLoad() {
+      // 如果文件系统可用
+      if (this.canUseFilePicker) {
+        const propNames = ['sampleFileName', 'gasFileName', 'detFileName', 'qcFileName']
+        const files = []
+        for (const item of this.list) {
+          propNames.forEach((propName) => {
+            const value = item[propName]
+            if (value && value.file) {
+              files.push(value.file)
+            }
+          })
+        }
+        if(!files.length) {
+          this.$message.warn('File is Empty ')
+          return
+        }
+        const zipedFiles = await zipFile(files, 'test.zip')
+        this.isUploadingZip = true
+        try {
+          const { success, message } = await this.uploadZipFile(zipedFiles)
+          if (success) {
+            try {
+              const { success, result, message } = await getAction('/spectrumAnalysis/getFilesBySampleFile', {
+                fileName: this.list
+                  .filter((item) => item.sampleFileName)
+                  .map((item) => item.sampleFileName.file.name)
+                  .join(','),
+              })
+              if (success) {
+                this.visible = false
+                this.$emit('loadFormFile', result)
+              } else {
+                this.$message.error(message)
+              }
+            } catch (error) {
+              console.error(error)
+            } finally {
+              this.isUploadingZip = false
+            }
+          } else {
+            this.$message.error(message)
+          }
+        } catch (error) {
+          console.error(error)
+          this.isUploadingZip = false
+        }
+      } else {
+        this.visible = false
+        this.$emit('loadFormFile', this.list)
+      }
     },
 
     handleCancel() {
       this.visible = false
     },
-  },
-  computed: {
-    visible: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      },
+
+    beforeModalOpen() {
+      this.handleReset()
     },
   },
 }
@@ -451,7 +687,7 @@ export default {
   border-radius: 50%;
   margin-top: 8px;
 
-  background-color: #00e170;
+  background-color: transparent;
 }
 .status_true {
   background-color: #00e170;
@@ -525,6 +761,9 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  user-select: none;
+  height: 40px;
+  line-height: 40px;
 }
 /deep/.ant-table-tbody .ant-table-row td {
   cursor: pointer;
diff --git a/src/views/spectrumAnalysis/components/Modals/NuclideLibraryModal.vue b/src/views/spectrumAnalysis/components/Modals/NuclideLibraryModal.vue
index 0f19e19..49431be 100644
--- a/src/views/spectrumAnalysis/components/Modals/NuclideLibraryModal.vue
+++ b/src/views/spectrumAnalysis/components/Modals/NuclideLibraryModal.vue
@@ -16,7 +16,7 @@
         <div class="nuclide-library-settings">
           <div class="nuclide-library-settings-select">
             <title-over-border class="select-library" title="Select Library">
-              <a-radio-group v-model="model.libraryName" @change="handleSearch">
+              <a-radio-group v-model="model.libraryName" @change="handleChangeLibraryType">
                 <a-radio value="UserLibrary">User Library</a-radio>
                 <a-radio value="FULLLibrary">Full Library</a-radio>
                 <a-radio value="RelevantLibrary">Relevant Library</a-radio>
@@ -275,6 +275,12 @@ export default {
       }
     },
 
+    // 修改Library类型
+    handleChangeLibraryType() {
+      this.model.nuclideName = ''
+      this.handleSearch()
+    },
+
     // 搜索
     handleSearch() {
       this.getInfo(true)