feat: 增加Nuclide Library弹窗，优化部分样式

src/style.less

@@ -18,7 +18,7 @@
 
 @modal-footer-border-color-split: @formInputBorderColor;
 
-@disabled-color: rgba(255, 255, 255, .25);
+@disabled-color: rgba(255, 255, 255, 0.25);
 @background-color-base: darken(@primary-color, 20);
 @border-color-base: darken(@primary-color, 20);
 
@@ -65,19 +65,21 @@ body {
 }
 
 // 表格样式
+@table-border-radius-base: 0;
+@table-padding-vertical-sm: 2px;
+@table-padding-vertical: 6px;
+@table-padding-horizontal: 8px;  
 .ant-table {
   color: #ade6ee;
   font-size: 16px;
-  border: 1px solid rgba(65,111,127, .5);
+  border: 1px solid rgba(65, 111, 127, 0.5);
 
   &-thead {
     > tr {
       th {
         background-color: #126b82 !important;
         color: #fff;
-        padding: 6px 8px !important;
         border-bottom: none;
-        border-radius: 0 !important;
       }
     }
   }
@@ -117,6 +119,29 @@ body {
     border-color: @formInputBorderColor;
     color: @formInputBorderColor;
   }
+
+  &-small {
+    font-size: 14px;
+
+    .ant-table {
+      &-tbody {
+        tr td {
+          padding-top: 6px !important;
+          padding-bottom: 6px !important;
+        }
+      }
+
+      &-placeholder {
+        .ant-empty-image {
+          height: 60px;
+        }
+
+        .ant-empty-description {
+          font-size: 14px;
+        }
+      }
+    }
+  }
 }
 
 // 表格下的分页器
@@ -323,7 +348,7 @@ body {
   &-clear,
   &-clock-icon {
     background-color: @modalBg !important;
-    color: #01B6E3 !important;
+    color: #01b6e3 !important;
   }
 
   &-panel {
@@ -515,7 +540,7 @@ input[type='number']::-webkit-outer-spin-button {
       &.ant-select-dropdown-placement-topLeft {
         padding-top: 0;
         padding-bottom: 7px;
-        
+
         .ant-select-dropdown-content {
           &::before {
             top: auto;

src/views/spectrumAnalysis/components/Modals/NuclideLibraryModal.vue

@@ -1,14 +1,354 @@
 <template>
-  <custom-modal v-model="visible" :width="700" title="Nuclide Library">
+  <custom-modal v-model="visible" :width="1100" title="Nuclide Library" :footer="null">
-    Nuclide Library
+    <div class="nuclide-library">
+      <div class="nuclide-library-list">
+        <div
+          class="nuclide-library-list-item"
+          :class="{ active: currNuclide == item }"
+          v-for="(item, index) in nuclideList"
+          :key="index"
+          @click="handleNuclideItemClick(item)"
+        >
+          {{ item.title }}
+        </div>
+      </div>
+      <div class="nuclide-library-settings">
+        <div class="nuclide-library-settings-select">
+          <title-over-boarder class="select-library" title="Select Library">
+            <a-radio-group>
+              <a-radio>User Library</a-radio>
+              <a-radio>Full Library</a-radio>
+              <a-radio>Relevant Library</a-radio>
+            </a-radio-group>
+          </title-over-boarder>
+          <div class="parent-and-daughters">
+            <div class="parents">
+              <div class="title">Parents</div>
+              <div class="content"></div>
+            </div>
+            <div class="daughters">
+              <div class="title">Daughters</div>
+              <div class="content">
+                <a-table
+                  size="small"
+                  :class="daughterList.length ? 'has-data' : ''"
+                  :columns="daughterColumns"
+                  :dataSource="daughterList"
+                  :pagination="false"
+                  :scroll="{ y: 123 }"
+                ></a-table>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nuclide-library-settings-main">
+          <a-form-model layout="inline">
+            <a-form-model-item label="Name">
+              <div class="nuclide-name">Co57</div>
+            </a-form-model-item>
+            <a-form-model-item label="Half Life">
+              271.740D
+            </a-form-model-item>
+            <a-form-model-item label="Half Life Err">
+              0.022%
+            </a-form-model-item>
+            <a-form-model-item label="Lines">
+              14
+            </a-form-model-item>
+          </a-form-model>
+          <!-- 主体表格 -->
+          <a-table
+            size="small"
+            :class="mainList.length ? 'has-data' : ''"
+            :columns="mainColumns"
+            :dataSource="mainList"
+            :pagination="false"
+            :scroll="{ y: 175 }"
+          >
+          </a-table>
+        </div>
+        <div class="nuclide-library-settings-operation">
+          <a-space :size="10">
+            <span>
+              Energy:
+            </span>
+            <a-input></a-input>
+            <a-input-number></a-input-number>
+            <a-button type="primary">Search</a-button>
+          </a-space>
+          <a-space :size="10">
+            <a-button type="primary">Reset</a-button>
+            <a-button type="primary" @click="visible = false">Close</a-button>
+          </a-space>
+        </div>
+      </div>
+    </div>
   </custom-modal>
 </template>
 
 <script>
 import ModalMixin from '@/mixins/ModalMixin'
+import TitleOverBoarder from '../TitleOverBoarder.vue'
+
+// 右上角表格配置
+const daughterColumns = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    align: 'center'
+  },
+  {
+    title: 'Ratio',
+    dataIndex: 'ratio',
+    align: 'center'
+  },
+  {
+    title: 'Status',
+    dataIndex: 'status',
+    align: 'center'
+  }
+]
+
+// 主体表格配置
+const mainColumns = [
+  {
+    title: 'Id',
+    dataIndex: 'id'
+  },
+  {
+    title: 'Full Name',
+    dataIndex: 'fullName'
+  },
+  {
+    title: 'Energy(keV)',
+    dataIndex: 'energy'
+  },
+  {
+    title: 'Energy Uncert(%)',
+    dataIndex: 'energyUncert'
+  },
+  {
+    title: 'Yield',
+    dataIndex: 'yield'
+  },
+  {
+    title: 'Yield Uncert(%)',
+    dataIndex: 'yieldUncert'
+  },
+  {
+    title: 'KeyLine',
+    dataIndex: 'keyLine'
+  }
+]
+
 export default {
-  mixins: [ModalMixin]
+  mixins: [ModalMixin],
+  components: {
+    TitleOverBoarder
+  },
+  data() {
+    this.daughterColumns = daughterColumns
+    this.mainColumns = mainColumns
+    return {
+      nuclideList: [
+        {
+          id: 1,
+          title: 'Ac228'
+        },
+        {
+          id: 2,
+          title: 'Ag106M'
+        }
+      ],
+      currNuclide: {}, // 当前选中的Nuclide
+      daughterList: [
+        {
+          name: 'name',
+          ratio: 'ratio',
+          status: 'status'
+        }
+      ],
+      mainList: [
+        {
+          id: 'id',
+          fullName: 'fullName',
+          energy: 'energy',
+          energyUncert: 'energyUncert',
+          yield: 'yield',
+          yieldUncert: 'yieldUncert',
+          keyLine: 'keyLine'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleNuclideItemClick(item) {
+      this.currNuclide = item
+    }
+  }
 }
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.nuclide-library {
+  display: flex;
+  gap: 20px;
+
+  &-list {
+    padding: 5px;
+    width: 150px;
+    height: 502px;
+    overflow: auto;
+    background-color: #275466;
+
+    &-item {
+      height: 32px;
+      line-height: 32px;
+      padding: 0 4px;
+      cursor: pointer;
+
+      &.active {
+        background-color: #296d81;
+      }
+    }
+  }
+
+  &-settings {
+    flex: 1;
+
+    &-select {
+      display: flex;
+      gap: 15px;
+
+      .select-library {
+        width: 200px;
+        height: 128px;
+
+        .ant-radio-group {
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+        }
+      }
+
+      .parent-and-daughters {
+        flex: 1;
+        display: flex;
+        gap: 10px;
+
+        .title {
+          height: 32px;
+          line-height: 32px;
+          background-color: #497e9d;
+          text-align: center;
+        }
+
+        .content {
+          height: 150px;
+        }
+
+        .parents {
+          width: 180px;
+
+          .content {
+            background-color: #275466;
+          }
+        }
+
+        .daughters {
+          flex: 1;
+
+          .ant-table-wrapper {
+            &.has-data {
+              ::v-deep {
+                .ant-table-body {
+                  height: 123px;
+                  background-color: #06282a;
+                }
+              }
+            }
+
+            ::v-deep {
+              .ant-table {
+                &-placeholder {
+                  height: 124px;
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &-main {
+      margin-top: 20px;
+
+      .ant-form {
+        display: flex;
+
+        .nuclide-name {
+          background-color: #285367;
+          padding: 0 3px;
+        }
+
+        &-item {
+          flex: 1;
+          display: flex;
+
+          ::v-deep {
+            .ant-form-item {
+              &-label {
+                line-height: 26px;
+              }
+
+              &-control {
+                line-height: 26px;
+
+                &-wrapper {
+                  flex: 1;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .ant-table {
+        &-wrapper {
+          margin-top: 20px;
+
+          &.has-data {
+            ::v-deep {
+              .ant-table-body {
+                height: 175px;
+                background-color: #06282a;
+              }
+            }
+          }
+
+          ::v-deep {
+            .ant-table {
+              &-placeholder {
+                height: 176px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &-operation {
+      margin-top: 20px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+</style>

src/views/spectrumAnalysis/components/TitleOverBoarder.vue

@@ -33,6 +33,7 @@ export default {
   }
 
   &-content {
+    height: 100%;
     padding: 20px;
   }
 }

src/views/spectrumAnalysis/index.vue

@@ -199,7 +199,7 @@ export default {
       dataProcessingLogModalVisible: false, // Log -> Data Processing Log 弹窗
 
       configUserLibModalVisible: false, // NuclideLibrary -> Config User Library 弹窗
-      nuclideLibraryModalVisible: true // NuclideLibrary -> Nuclide Library 弹窗
+      nuclideLibraryModalVisible: false // NuclideLibrary -> Nuclide Library 弹窗
     }
   },
   created() {