:sparkles: 商品中心<商品列表>: 完善表格功能

src/views/adManage/sp/components/PopoverFilterTable.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { Ref, inject, onMounted, reactive, ref } from 'vue'
+import { inject, reactive, Ref, ref } from 'vue'
 import { getParentAsin } from '../api'
 import { Connection, Picture as IconPicture } from '@element-plus/icons-vue'
 import emitter from '/@/utils/emitter'
 
+
 emitter.on('TopFilter', (value: any) => {
   if (value) {
     fetchParentAsin()
@@ -12,7 +13,7 @@ emitter.on('TopFilter', (value: any) => {
   }
 })
 const profile = <Ref>inject('profile')
-const parentLoaing = ref(false)
+const parentLoading = ref(false)
 
 const gridOptions = <any>reactive({
   height: 500,
@@ -43,7 +44,7 @@ const gridOptionsRight = <any>reactive({
 })
 
 async function fetchParentAsin() {
-  parentLoaing.value = true
+  parentLoading.value = true
   const body = { profileId: profile.value.profile_id }
   try {
     const response = await getParentAsin(body)
@@ -51,11 +52,11 @@ async function fetchParentAsin() {
   } catch (error) {
     console.log('error:', error)
   } finally {
-    parentLoaing.value = false
+    parentLoading.value = false
   }
 }
 
-function changeheaderCellStyle(value) {
+function changeHeaderCellStyle() {
   return {
     // backgroundColor: '#eef0f7',
     padding: '3px',
@@ -70,10 +71,10 @@ function changeheaderCellStyle(value) {
 <template>
   <div class="flex">
     <vxe-grid
-      v-loading="parentLoaing"
+      v-loading="parentLoading"
       v-bind="gridOptions"
-      :header-row-style="changeheaderCellStyle"
-      :header-cell-style="changeheaderCellStyle"
+      :header-row-style="changeHeaderCellStyle"
+      :header-cell-style="changeHeaderCellStyle"
       class="ml-2 mb-2 mt-0 border border-r-0 rounded-bl-md rounded-tl-md overflow-hidden"
       style="flex: 0 1 260px">
       <template #parentAsin_default="{ row }">
@@ -108,7 +109,7 @@ function changeheaderCellStyle(value) {
     </vxe-grid>
     <vxe-grid
       v-bind="gridOptionsRight"
-      :header-cell-style="changeheaderCellStyle"
+      :header-cell-style="changeHeaderCellStyle"
       class="mr-2 mb-2 mt-0 border rounded-br-md rounded-tr-md overflow-hidden w-0"
       style="flex: 2 1 0">
     </vxe-grid>
@@ -120,13 +121,6 @@ function changeheaderCellStyle(value) {
 :deep(.vxe-table--render-default .vxe-table--border-line) {
   border: none;
 }
-.img-part {
-  width: 65px;
-  height: 65px;
-  margin: 0 5px 0 0;
-  border: 1px solid #e5e6eb;
-  border-radius: 4px;
-}
 .image-slot {
   display: flex;
   justify-content: center;
@@ -140,9 +134,6 @@ function changeheaderCellStyle(value) {
 .image-slot .el-icon {
   font-size: 30px;
 }
-.custom-bg {
-  background-color: black;
-}
 /* 修改表头填充颜色 默认会有空隙 */
 :deep(.vxe-table--header-wrapper.body--wrapper) {
   background-color: #eef0f7;

src/views/productCenter/productList/components/DataTableCell.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from 'vue'
 
+
 const props = defineProps({
   value: String,
   field: String,
@@ -10,7 +11,7 @@ const props = defineProps({
 
 // 计算 'gap' 值
 const gapValue = computed(() => {
-  const gapField = `gap${props.field.charAt(0).toUpperCase()}${props.field.slice(1)}` // 构建对应的 gap 前缀字段名称
+  const gapField = `gap${ props.field.charAt(0).toUpperCase() }${ props.field.slice(1) }` // 构建对应的 gap 前缀字段名称
   return props.row[gapField] // 返回行数据中对应的 gap 值
 })
 </script>
@@ -25,10 +26,34 @@ const gapValue = computed(() => {
       <div style="color: #c9cdd4">Title: {{ row.smallCatTitle }}</div>
     </div>
 
+    <div v-else-if="field === 'Asin'">
+      <div class="list-content">
+        <div class="image-item">
+          <img :src="row.Image" alt=""/>
+        </div>
+        <div>
+          <el-tooltip effect="dark" :content="row.Title" placement="top-start">
+            <span class="item-title">{{ row.Title }}</span>
+          </el-tooltip>
+          <div>
+            <span class="text-black font-medium">{{ row.priceMax }}</span>
+            ~
+            <span class="text-black font-medium">{{ row.priceMin }}</span>
+          </div>
+          <div class="item-font">
+            Parent ASIN: <span class="black-color">{{ row.parentAsin }}</span>
+          </div>
+          <div class="item-font mt-1">
+            ASIN: <span class="black-color">{{ row.Asin }}</span> SKU: <span class="black-color">{{ row.skuNumbers }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <div v-else-if="field === 'sku'">
       <div class="list-content">
         <div class="image-item">
-          <img :src="row.Image" />
+          <img :src="row.Image" alt=""/>
         </div>
         <div>
           <el-tooltip effect="dark" :content="row.Title" placement="top-start">
@@ -37,9 +62,39 @@ const gapValue = computed(() => {
           <div>
             <span class="item-font">{{ row.quantity ? '有库存' : '缺货' }}</span>
           </div>
-          <span class="item-font">ASIN: <span class="black-color">{{ row.Asin }}</span></span>
+          <span class="item-font">
+            ASIN: <span class="black-color">{{ row.Asin }}</span>
+          </span>
           <el-tooltip effect="dark" :content="row.sku" placement="top-start">
-            <span class="item-font display-line">SKU: <span class="black-color">{{ row.sku }}</span></span>
+            <span class="item-font display-line">
+              SKU: <span class="black-color">{{ row.sku }}</span>
+            </span>
+          </el-tooltip>
+        </div>
+      </div>
+    </div>
+
+    <div v-else-if="field === 'bestSku'">
+      <div class="list-content">
+        <div class="image-item">
+          <img :src="row.Image" alt=""/>
+        </div>
+        <div style="display: flex; flex-direction: column">
+          <el-tooltip effect="dark" :content="row.Title" placement="top-start">
+            <span class="item-title">{{ row.Title }}</span>
+          </el-tooltip>
+          <div>
+            <span class="text-slate-950">{{ row.price }}</span>
+            <span class="item-font px-2">|</span>
+            <span class="item-font">{{ row.quantity ? '有库存' : '缺货' }}</span>
+          </div>
+          <div class="item-font">
+            ASIN: <span class="black-color">{{ row.Asin }}</span>
+          </div>
+          <el-tooltip effect="dark" :content="row.bestSku" placement="top-start">
+            <div class="item-font display-line">
+              SKU: <span class="black-color">{{ row.bestSku }}</span>
+            </div>
           </el-tooltip>
         </div>
       </div>
@@ -59,8 +114,12 @@ const gapValue = computed(() => {
       {{ value }}
       <!-- 根据 gapValue 的值和 isCompare 调整显示内容 -->
       <div v-if="isCompare" :style="{ color: gapValue > 0 ? '#59b939' : gapValue < 0 ? '#ee7973' : '#dde0eb' }">
-        <el-icon v-if="gapValue > 0"><Top style="position: absolute; top: 2" /></el-icon>
-        <el-icon v-else-if="gapValue < 0"><Bottom style="position: absolute; top: 2" /></el-icon>
+        <el-icon v-if="gapValue > 0">
+          <Top style="position: absolute; top: 2px"/>
+        </el-icon>
+        <el-icon v-else-if="gapValue < 0">
+          <Bottom style="position: absolute; top: 2px"/>
+        </el-icon>
         <!-- 显示 gapValue 值，根据情况加上百分号 -->
         {{ gapValue !== undefined ? (gapValue === null || gapValue === 0 ? '0%' : (gapValue < 0 ? '-' : '') + Math.abs(gapValue) + '%') : '' }}
       </div>
@@ -69,33 +128,24 @@ const gapValue = computed(() => {
 </template>
 
 <style scoped>
-.img-container {
-  width: 72px;
-  height: 72px;
-  border: 1px solid #dde0eb;
-  border-radius: 4px;
-}
-.img-content {
-  width: 100%;
-  height: 100%;
-  border-radius: 4px;
-}
-
 .list-content {
   display: flex;
   align-items: center;
   gap: 4px;
 }
+
 .image-item {
   min-width: 72px;
   height: 72px;
 }
+
 .image-item img {
   min-width: 72px;
   height: 72px;
   border: 1px solid #dde0eb;
   border-radius: 4px;
 }
+
 .item-title {
   font-weight: 500;
   color: #1d2129;
@@ -103,22 +153,25 @@ const gapValue = computed(() => {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--line-clamp);
-  white-space: pre-wrap;
+  /* white-space: pre-wrap; */
   --line-clamp: 1;
 }
+
 .item-font {
   color: #6b7785;
   font-size: 13px;
   line-height: 13px;
 }
+
 .display-line {
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--line-clamp);
-  white-space: pre-wrap;
+  /* white-space: pre-wrap; */
   --line-clamp: 1;
 }
+
 .black-color {
   color: black;
 }

src/views/productCenter/productList/components/DataTableCellFooter.vue

@@ -5,6 +5,7 @@ defineProps({
   isCompare: Boolean,
   columnIndex: Number,
 })
+
 </script>
 
 <template>
@@ -17,8 +18,8 @@ defineProps({
     <div>{{ totalValue === 0 || totalValue === null ? '0' : totalValue }}</div>
     <!-- 当 isCompare 为 true 时，根据条件显示 gapValue 或 '0'，如果是 undefined 则不显示 -->
     <div v-if="isCompare" :style="{ color: gapValue > 0 ? '#59b939' : gapValue < 0 ? '#ee7973' : 'black' }">
-      <el-icon v-if="gapValue > 0"><Top style="position: absolute; top: 2" /></el-icon>
-      <el-icon v-else-if="gapValue < 0"><Bottom style="position: absolute; top: 2" /></el-icon>
+      <el-icon v-if="gapValue > 0"><Top style="position: absolute; top: 2px" /></el-icon>
+      <el-icon v-else-if="gapValue < 0"><Bottom style="position: absolute; top: 2px" /></el-icon>
       {{ gapValue === 0 || gapValue === null ? '0%' : gapValue !== undefined ? gapValue + '%' : '' }}
     </div>
   </div>

src/views/productCenter/productList/utils/columns.ts

@@ -1,15 +1,86 @@
 const universal = [
-  { field: 'TotalSales', title: '总销售额', align: 'right', width: 130, sortable: true, slots: { default: 'TotalSales_default', footer: 'TotalSales_footer' } },
-  { field: 'TotalOrderItems', title: '总订单数', align: 'right', width: 130, sortable: true, slots: { default: 'TotalOrderItems_default', footer: 'TotalOrderItems_footer' } },
-  { field: 'TotalUnitOrdered', title: '总销量', align: 'right', width: 130, sortable: true, slots: { default: 'TotalUnitOrdered_default', footer: 'TotalUnitOrdered_footer' } },
+  {
+    field: 'TotalSales',
+    title: '总销售额',
+    align: 'right',
+    width: 130,
+    sortable: true,
+    slots: { default: 'TotalSales_default', footer: 'TotalSales_footer' },
+  },
+  {
+    field: 'TotalOrderItems',
+    title: '总订单数',
+    align: 'right',
+    width: 130,
+    sortable: true,
+    slots: { default: 'TotalOrderItems_default', footer: 'TotalOrderItems_footer' },
+  },
+  {
+    field: 'TotalUnitOrdered',
+    title: '总销量',
+    align: 'right',
+    width: 130,
+    sortable: true,
+    slots: { default: 'TotalUnitOrdered_default', footer: 'TotalUnitOrdered_footer' },
+  },
   { field: 'SAP', title: '单均价', align: 'right', width: 130, sortable: true, slots: { default: 'SAP_default', footer: 'SAP_footer' } },
-  { field: 'TotalAdSales', title: '广告销售额', align: 'right', width: 130, sortable: true, slots: { default: 'TotalAdSales_default', footer: 'TotalAdSales_footer' } },
-  { field: 'TotalAdSalesSameSKU', title: '本商品广告销售额', align: 'right', width: 180, sortable: true, slots: { default: 'TotalAdSalesSameSKU_default', footer: 'TotalAdSalesSameSKU_footer' } },
-  { field: 'TotalAdPurchases', title: '广告订单数', align: 'right', width: 130, sortable: true, slots: { default: 'TotalAdPurchases_default', footer: 'TotalAdPurchases_footer' } },
-  { field: 'TotalAdPurchasesSameSKU', title: '本商品广告订单数', align: 'right', width: 180, sortable: true, slots: { default: 'TotalAdPurchasesSameSKU_default', footer: 'TotalAdPurchasesSameSKU_footer' } },
-  { field: 'TotalAdUnitOrdered', title: '广告销量', align: 'right', width: 130, sortable: true, slots: { default: 'TotalAdUnitOrdered_default', footer: 'TotalAdUnitOrdered_footer' } },
-  { field: 'TotalAdUnitOrderedSameSKU', title: '本商品广告销量', align: 'right', width: 180, sortable: true, slots: { default: 'TotalAdUnitOrderedSameSKU_default', footer: 'TotalAdUnitOrderedSameSKU_footer' } },
-  { field: 'Spend', title: '花费', align: 'right', width: 130, sortable: true, showOverflow: true, slots: { default: 'Spend_default', footer: 'Spend_footer' } },
+  {
+    field: 'TotalAdSales',
+    title: '广告销售额',
+    align: 'right',
+    width: 130,
+    sortable: true,
+    slots: { default: 'TotalAdSales_default', footer: 'TotalAdSales_footer' },
+  },
+  {
+    field: 'TotalAdSalesSameSKU',
+    title: '本商品广告销售额',
+    align: 'right',
+    width: 180,
+    sortable: true,
+    slots: { default: 'TotalAdSalesSameSKU_default', footer: 'TotalAdSalesSameSKU_footer' },
+  },
+  {
+    field: 'TotalAdPurchases',
+    title: '广告订单数',
+    align: 'right',
+    width: 130,
+    sortable: true,
+    slots: { default: 'TotalAdPurchases_default', footer: 'TotalAdPurchases_footer' },
+  },
+  {
+    field: 'TotalAdPurchasesSameSKU',
+    title: '本商品广告订单数',
+    align: 'right',
+    width: 180,
+    sortable: true,
+    slots: { default: 'TotalAdPurchasesSameSKU_default', footer: 'TotalAdPurchasesSameSKU_footer' },
+  },
+  {
+    field: 'TotalAdUnitOrdered',
+    title: '广告销量',
+    align: 'right',
+    width: 130,
+    sortable: true,
+    slots: { default: 'TotalAdUnitOrdered_default', footer: 'TotalAdUnitOrdered_footer' },
+  },
+  {
+    field: 'TotalAdUnitOrderedSameSKU',
+    title: '本商品广告销量',
+    align: 'right',
+    width: 180,
+    sortable: true,
+    slots: { default: 'TotalAdUnitOrderedSameSKU_default', footer: 'TotalAdUnitOrderedSameSKU_footer' },
+  },
+  {
+    field: 'Spend',
+    title: '花费',
+    align: 'right',
+    width: 130,
+    sortable: true,
+    showOverflow: true,
+    slots: { default: 'Spend_default', footer: 'Spend_footer' },
+  },
   { field: 'ACOS', title: 'ACOS', align: 'right', width: 130, sortable: true, slots: { default: 'ACOS_default', footer: 'ACOS_footer' } },
   { field: 'ROAS', title: 'ROAS', align: 'right', width: 130, sortable: true, slots: { default: 'ROAS_default', footer: 'ROAS_footer' } },
   { field: 'TACOS', title: 'TACOS', align: 'right', width: 130, sortable: true, slots: { default: 'TACOS_default', footer: 'TACOS_footer' } },
@@ -18,40 +89,140 @@ const universal = [
   { field: 'CPC', title: '点击成本', align: 'right', width: 130, sortable: true, slots: { default: 'CPC_default', footer: 'CPC_footer' } },
   { field: 'CPO', title: '总订单成本', align: 'right', width: 130, sortable: true, slots: { default: 'CPO_default', footer: 'CPO_footer' } },
   { field: 'CPA', title: '广告订单成本', align: 'right', width: 180, sortable: true, slots: { default: 'CPA_default', footer: 'CPA_footer' } },
-  { field: 'Impression', title: '曝光量', align: 'right', width: 130, sortable: true, slots: { default: 'Impression_default', footer: 'Impression_footer' } },
+  {
+    field: 'Impression',
+    title: '曝光量',
+    align: 'right',
+    width: 130,
+    sortable: true,
+    slots: { default: 'Impression_default', footer: 'Impression_footer' },
+  },
   { field: 'Click', title: '点击量', align: 'right', width: 130, sortable: true, slots: { default: 'Click_default', footer: 'Click_footer' } },
-  { field: 'Sessions', title: '会话次数', align: 'right', width: 150, sortable: true, slots: { default: 'Sessions_default', footer: 'Sessions_footer' } },
-  { field: 'ProductCr', title: '商品会话百分比', align: 'right', width: 150, sortable: true, slots: { default: 'ProductCr_default', footer: 'ProductCr_footer' } },
-  { field: 'PageViews', title: '页面浏览量', align: 'right', width: 130, sortable: true, slots: { default: 'PageViews_default', footer: 'PageViews_footer' } },
-  { field: 'BuyBoxPercentage', title: '推荐报价（购买按钮）百分比', align: 'right', width: 180, sortable: true, showHeaderOverflow: true, slots: { default: 'BuyBoxPercentage_default', footer: 'BuyBoxPercentage_footer' } },
+  {
+    field: 'Sessions',
+    title: '会话次数',
+    align: 'right',
+    width: 150,
+    sortable: true,
+    slots: { default: 'Sessions_default', footer: 'Sessions_footer' },
+  },
+  {
+    field: 'ProductCr',
+    title: '商品会话百分比',
+    align: 'right',
+    width: 150,
+    sortable: true,
+    slots: { default: 'ProductCr_default', footer: 'ProductCr_footer' },
+  },
+  {
+    field: 'PageViews',
+    title: '页面浏览量',
+    align: 'right',
+    width: 130,
+    sortable: true,
+    slots: { default: 'PageViews_default', footer: 'PageViews_footer' },
+  },
+  {
+    field: 'BuyBoxPercentage',
+    title: '推荐报价（购买按钮）百分比',
+    align: 'right',
+    width: 180,
+    sortable: true,
+    showHeaderOverflow: true,
+    slots: { default: 'BuyBoxPercentage_default', footer: 'BuyBoxPercentage_footer' },
+  },
   { field: 'FBAQuantity', title: 'FBA库存', align: 'right', width: 130, sortable: true, slots: { footer: 'FBAQuantity_footer' } },
-  { field: 'FBMQuantity', title: 'FBM库存', align: 'right', width: 130, sortable: true, showHeaderOverflow: true, slots: { footer: 'FBMQuantity_footer' } },
+  {
+    field: 'FBMQuantity',
+    title: 'FBM库存',
+    align: 'right',
+    width: 130,
+    sortable: true,
+    showHeaderOverflow: true,
+    slots: { footer: 'FBMQuantity_footer' },
+  },
 ]
 
-export const productLineColumns = [{ field: 'productlineName', title: '产品线', align: 'left', fixed: 'left', width: 180, sortable: true, slots: { default: 'productlineName_default', footer: 'productlineName_footer' } }, ...universal]
+export const productLineColumns = [
+  {
+    field: 'productlineName',
+    title: '产品线',
+    align: 'left',
+    fixed: 'left',
+    width: 180,
+    sortable: true,
+    slots: { default: 'productlineName_default', footer: 'productlineName_footer' },
+  },
+  ...universal,
+]
 
 export const parentAsinColumns = [
-  { field: 'parentAsin', title: '父ASIN', align: 'left', fixed: 'left', width: 180, sortable: true, slots: { default: 'parentAsin_default', footer: 'parentAsin_footer' } },
-  { field: 'bestSku', title: '最佳SKU', align: 'right', width: 260, sortable: true, slots: { default: 'bestSku_default', footer: 'bestSku_footer' } },
+  {
+    field: 'parentAsin',
+    title: '父ASIN',
+    align: 'left',
+    fixed: 'left',
+    width: 180,
+    sortable: true,
+    slots: { default: 'parentAsin_default', footer: 'parentAsin_footer' },
+  },
+  { field: 'bestSku', title: '最佳SKU', align: 'left', width: 300, sortable: true, slots: { default: 'bestSku_default', footer: 'bestSku_footer' } },
   // { field: 'TACOS', title: '预警TACOS', align: 'right', width: 130, slots: { default: 'TACOS_default', footer: 'TACOS_footer' } },
   ...universal,
 ]
 
 export const asinColumns = [
-  { field: 'Asin', title: 'ASIN', align: 'left', fixed: 'left', width: 180, sortable: true, slots: { default: 'Asin_default', footer: 'Asin_footer' } },
-  { field: 'productlineName', title: '产品线', align: 'left', fixed: 'left', width: 180, sortable: true, slots: { default: 'productlineName_default', footer: 'productlineName_footer' } },
-  { field: 'rank', title: '排名', align: 'left', fixed: 'left', width: 120, sortable: true, slots: { default: 'rank_default', footer: 'rank_footer' } },
+  {
+    field: 'Asin',
+    title: 'ASIN',
+    align: 'left',
+    fixed: 'left',
+    width: 300,
+    sortable: true,
+    slots: { default: 'Asin_default', footer: 'Asin_footer' },
+  },
+  {
+    field: 'productlineName',
+    title: '产品线',
+    align: 'left',
+    fixed: 'left',
+    width: 180,
+    sortable: true,
+    slots: { default: 'productlineName_default', footer: 'productlineName_footer' },
+  },
+  {
+    field: 'rank',
+    title: '排名',
+    align: 'left',
+    fixed: 'left',
+    width: 120,
+    sortable: true,
+    slots: { default: 'rank_default', footer: 'rank_footer' },
+  },
   // { field: 'TACOS', title: '预警TACOS', align: 'right', width: 130, slots: { default: 'TACOS_default', footer: 'TACOS_footer' } },
   ...universal,
 ]
 
 export const skuColumns = [
-  { field: 'sku', title: 'SKU', align: 'left', fixed: 'left', width: 260, slots: { default: 'sku_default', footer: 'sku_footer' } },
-  { field: 'productlineName', title: '产品线', align: 'left', width: 180, slots: { default: 'productlineName_default', footer: 'productlineName_footer' } },
+  { field: 'sku', title: 'SKU', align: 'left', fixed: 'left', width: 300, slots: { default: 'sku_default', footer: 'sku_footer' } },
+  {
+    field: 'productlineName',
+    title: '产品线',
+    align: 'left',
+    width: 180,
+    slots: { default: 'productlineName_default', footer: 'productlineName_footer' },
+  },
   { field: 'status', title: '商品状态', align: 'center', width: 80, slots: { default: 'status_default', footer: 'status_footer' } },
   { field: 'rank', title: '排名', align: 'left', width: 130, slots: { default: 'rank_default', footer: 'rank_footer' } },
   { field: 'parentAsin', title: '父ASIN', align: 'left', width: 130, slots: { default: 'parentAsin_default', footer: 'parentAsin_footer' } },
-  { field: 'launchDatetime', title: '上架时间', align: 'center', width: 120, sortable: true, slots: { default: 'launchDatetime_default', footer: 'launchDatetime_footer' } },
+  {
+    field: 'launchDatetime',
+    title: '上架时间',
+    align: 'center',
+    width: 120,
+    sortable: true,
+    slots: { default: 'launchDatetime_default', footer: 'launchDatetime_footer' },
+  },
   ...universal,
   // { field: 'ABP', title: '异常推广', align: 'right', width: 130, slots: { default: 'ABP_default', footer: 'ABP_footer' } },
   // { field: 'TACOS', title: '预警TACOS', align: 'right', width: 130, slots: { default: 'TACOS_default', footer: 'TACOS_footer' } },

tsconfig.json

@@ -1,75 +1,110 @@
 {
-	"compilerOptions": {
-		/* Visit https://aka.ms/tsconfig.json to read more about this file */
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig.json to read more about this file */
 
-		/* Basic Options */
-		// "incremental": true,                   /* Enable incremental compilation */
-		"target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
-		"module": "esnext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
-		"lib": ["esnext", "dom", "dom.iterable", "scripthost"] /* Specify library files to be included in the compilation. */,
-		"allowJs": true,                       /* Allow javascript files to be compiled. */
-		// "checkJs": true,                       /* Report errors in .js files. */
-		"jsx": "preserve" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
-		// "declaration": true /* Generates corresponding '.d.ts' file. */,
-		// "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
-		// "sourceMap": true,                     /* Generates corresponding '.map' file. */
-		// "outFile": "./",                       /* Concatenate and emit output to single file. */
-		// "outDir": "./",                        /* Redirect output structure to the directory. */
-		// "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
-		// "composite": true,                     /* Enable project compilation */
-		// "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
-		// "removeComments": true,                /* Do not emit comments to output. */
-		// "noEmit": true,                        /* Do not emit outputs. */
-		// "importHelpers": true /* Import emit helpers from 'tslib'. */,
-		// "downlevelIteration": true /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */,
-		"isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
+    /* Basic Options */
+    // "incremental": true,                   /* Enable incremental compilation */
+    "target": "esnext"
+    /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
+    "module": "esnext"
+    /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+    /* Specify library files to be included in the compilation. */,
+    "allowJs": true,
+    /* Allow javascript files to be compiled. */
+    // "checkJs": true,                       /* Report errors in .js files. */
+    "jsx": "preserve"
+    /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
+    // "declaration": true /* Generates corresponding '.d.ts' file. */,
+    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    // "outDir": "./",                        /* Redirect output structure to the directory. */
+    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                     /* Enable project compilation */
+    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    // "noEmit": true,                        /* Do not emit outputs. */
+    // "importHelpers": true /* Import emit helpers from 'tslib'. */,
+    // "downlevelIteration": true /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */,
+    "isolatedModules": true
+    /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
+    /* Strict Type-Checking Options */
+    "strict": false
+    /* Enable all strict type-checking options. */,
+    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,              /* Enable strict null checks. */
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
 
-		/* Strict Type-Checking Options */
-		"strict": false /* Enable all strict type-checking options. */,
-		// "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
-		// "strictNullChecks": true,              /* Enable strict null checks. */
-		// "strictFunctionTypes": true,           /* Enable strict checking of function types. */
-		// "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
-		// "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
-		// "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
-		// "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+    /* Additional Checks */
+    // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+    // "noUncheckedIndexedAccess": true,      /* Include 'undefined' in index signature results */
 
-		/* Additional Checks */
-		// "noUnusedLocals": true,                /* Report errors on unused locals. */
-		// "noUnusedParameters": true,            /* Report errors on unused parameters. */
-		// "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
-		// "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
-		// "noUncheckedIndexedAccess": true,      /* Include 'undefined' in index signature results */
+    /* Module Resolution Options */
+    "moduleResolution": "node"
+    /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    "baseUrl": "."
+    /* Base directory to resolve non-absolute module names. */,
+    "paths": {
+      "/@/*": [
+        "src/*"
+      ]
+    }
+    /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */,
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    "types": [
+      "vite/client",
+      "element-plus/global"
+    ]
+    /* Type declaration files to be included in compilation. */,
+    "allowSyntheticDefaultImports": true
+    /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
+    "esModuleInterop": true
+    /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
 
-		/* Module Resolution Options */
-		"moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
-		"baseUrl": "." /* Base directory to resolve non-absolute module names. */,
-		"paths": {
-			"/@/*": ["src/*"]
-		} /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */,
-		// "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
-		// "typeRoots": [],                       /* List of folders to include type definitions from. */
-		"types": ["vite/client"] /* Type declaration files to be included in compilation. */,
-		"allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
-		"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
-		// "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
-		// "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
+    /* Source Map Options */
+    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
 
-		/* Source Map Options */
-		// "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
-		// "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
-		// "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
-		// "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+    /* Experimental Options */
+    "experimentalDecorators": true
+    /* Enables experimental support for ES7 decorators. */,
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
 
-		/* Experimental Options */
-		"experimentalDecorators": true /* Enables experimental support for ES7 decorators. */,
-		// "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
-
-		/* Advanced Options */
-		"skipLibCheck": true /* Skip type checking of declaration files. */,
-		"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
-		"suppressImplicitAnyIndexErrors": false
-	},
-	"include": ["src/**/*.ts", "src/**/*.vue", "src/**/*.tsx", "src/**/*.d.ts"], // **Represents any directory, and * represents any file. Indicates that all files in the src directory will be compiled
-	"exclude": ["node_modules", "dist"] // Indicates the file directory that does not need to be compiled
+    /* Advanced Options */
+    "skipLibCheck": true
+    /* Skip type checking of declaration files. */,
+    "forceConsistentCasingInFileNames": true
+    /* Disallow inconsistently-cased references to the same file. */,
+    "suppressImplicitAnyIndexErrors": false
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.vue",
+    "src/**/*.tsx",
+    "src/**/*.d.ts"
+  ],
+  // **Represents any directory, and * represents any file. Indicates that all files in the src directory will be compiled
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+  // Indicates the file directory that does not need to be compiled
 }