From fa8861043acf678327a934ae8e23459ed1fc72fd Mon Sep 17 00:00:00 2001
From: lijing1 <lijing1@honeycombtech.com>
Date: Wed, 26 Nov 2025 16:26:28 +0800
Subject: [PATCH] =?UTF-8?q?update:=E5=8F=82=E6=95=B0=E5=BA=93=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/table/treeTable.vue     |   3 +-
 .../parameter/components/addParamLib.vue      |  18 +-
 .../parameter/components/addParamObject.vue   |  56 +--
 .../parameter/components/addParamType.vue     |  23 +-
 src/views/simulation/parameter/index.vue      | 338 +++++-------------
 5 files changed, 143 insertions(+), 295 deletions(-)

diff --git a/src/components/common/table/treeTable.vue b/src/components/common/table/treeTable.vue
index f80307f6..8756dc51 100644
--- a/src/components/common/table/treeTable.vue
+++ b/src/components/common/table/treeTable.vue
@@ -607,8 +607,9 @@ defineExpose({
   padding-right: 20px;
   .head-icon {
     position: absolute;
-    top: 0;
+    top: 50%;
     right: 0;
+    margin-top: -8px;
     cursor: pointer;
     &.active {
       color: var(--el-color-primary);
diff --git a/src/views/simulation/parameter/components/addParamLib.vue b/src/views/simulation/parameter/components/addParamLib.vue
index 0956a1bc..d8047128 100644
--- a/src/views/simulation/parameter/components/addParamLib.vue
+++ b/src/views/simulation/parameter/components/addParamLib.vue
@@ -3,19 +3,19 @@
     v-model="visible"
     show-footer
     diaTitle="新增参数库"
+    :width="400"
+    @close="closeFun"
   >
     <template #default>
       <el-form :model="formData" labelWidth="auto">
         <el-form-item label="参数库名称" prop="parameterLibraryName">
           <el-input v-model="formData.parameterLibraryName"></el-input>
         </el-form-item>
-
       </el-form>
     </template>
-
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="closeFn">取消</el-button>
+        <el-button @click="closeFun">取消</el-button>
         <el-button type="primary" @click="onConfirmFun">确定</el-button>
       </div>
     </template>
@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref } from 'vue';
 import Dialog from '@/components/common/dialog/index.vue';
 import { ElMessage } from 'element-plus';
 
@@ -35,29 +35,21 @@ const formData = ref({
   parameterLibraryName: '',
 });
 
-const closeFn = () => {
+const closeFun = () => {
   emits('close');
-
 };
 
 const onConfirmFun = () => {
-
   if (!formData.value.parameterLibraryName) {
     ElMessage.warning('请输入参数库名称！');
     return;
   } else {
     emits('createFn', formData.value);
-
   }
 };
-
-onMounted(async () => {
-
-});
 </script>
 <style lang="scss" scoped>
 .upload {
   width: 100%;
 }
-
 </style>
diff --git a/src/views/simulation/parameter/components/addParamObject.vue b/src/views/simulation/parameter/components/addParamObject.vue
index 0744679a..8358b56b 100644
--- a/src/views/simulation/parameter/components/addParamObject.vue
+++ b/src/views/simulation/parameter/components/addParamObject.vue
@@ -3,6 +3,8 @@
     v-model="visible"
     show-footer
     diaTitle="新增参数对象"
+    :width="400"
+    @close="closeFun"
   >
     <template #default>
       <el-form :model="formData" labelWidth="auto">
@@ -16,7 +18,12 @@
           <el-input v-model="formData.parameterLibraryCategoryObjectName" ></el-input>
         </el-form-item>
         <el-form-item label="参数文件">
-
+          <el-tooltip
+            placement="top"
+            content="例：[{'parameterName': 'parameterName','parameterValue': 'parameterValue', 'unit': 'unit', 'description': 'description'}]"
+          >
+            <div class="tip">参数对象上传的JSON文件格式必须遵守格式要求，否则无法解析！</div>
+          </el-tooltip>
           <el-tag v-if="formData.fileName" closable @close="deleteParamFile"> {{ formData.fileName }}</el-tag>
           <el-upload
             v-else
@@ -31,7 +38,7 @@
     </template>
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="closeFn">取消</el-button>
+        <el-button @click="closeFun">取消</el-button>
         <el-button type="primary" @click="onConfirmFun">确定</el-button>
       </div>
     </template>
@@ -45,9 +52,7 @@ import { ElMessage } from 'element-plus';
 
 const emits = defineEmits(['close', 'createFn']);
 const props = defineProps(['libTypeInfo']);
-
 const visible = ref(true);
-
 const formData = reactive<any>({
   parameterLibraryName: '',
   parameterLibraryCategoryName: '',
@@ -56,39 +61,33 @@ const formData = reactive<any>({
   fileName: '',
 });
 
-const closeFn = () => {
+const closeFun = () => {
   emits('close');
-
 };
 
 const onConfirmFun = () => {
-
   if (!formData.parameterLibraryCategoryObjectName) {
     ElMessage.warning('请输入参数类型名称！');
     return;
   } else if (!formData.fileName) {
     ElMessage.warning('请请上传对应参数文件');
-
     return;
   } else {
     emits('createFn', formData);
   }
 };
 
-const beforeUploadFun = (file:any) => {
-
-  console.log(file, 'file');
+const beforeUploadFun = (file: any) => {
   formData.file = file;
   formData.fileName = file.name;
 };
 
 const deleteParamFile = () => {
   formData.fileName = '';
-
   formData.file = {};
 };
 
-onMounted(async () => {
+onMounted(() => {
   if (props.libTypeInfo) {
     formData.parameterLibraryName = props.libTypeInfo.libName;
     formData.parameterLibraryCategoryName = props.libTypeInfo.name;
@@ -97,17 +96,22 @@ onMounted(async () => {
   }
 });
 </script>
-    <style lang="scss" scoped>
-    .upload {
-      width: 100%;
-    }
 
-    .dialog-footer{
-      width: 100%;
-      height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-    }
-
-    </style>
+<style lang="scss" scoped>
+.upload {
+  width: 100%;
+}
+.dialog-footer {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.tip {
+  padding-bottom: 10px;
+  font-size: 12px;
+  line-height: 14px;
+  color: var(--el-text-color-secondary);
+}
+</style>
diff --git a/src/views/simulation/parameter/components/addParamType.vue b/src/views/simulation/parameter/components/addParamType.vue
index b23ae535..f18d8bad 100644
--- a/src/views/simulation/parameter/components/addParamType.vue
+++ b/src/views/simulation/parameter/components/addParamType.vue
@@ -3,22 +3,22 @@
     v-model="visible"
     show-footer
     diaTitle="新增参数类型"
+    :width="400"
+    @close="closeFun"
   >
     <template #default>
       <el-form :model="formData" labelWidth="auto">
-
         <el-form-item label="参数库名称" prop="parameterLibraryName">
           <el-input v-model="formData.parameterLibraryName" disabled></el-input>
         </el-form-item>
         <el-form-item label="分类名称" prop="parameterLibraryCategoryName">
           <el-input v-model="formData.parameterLibraryCategoryName"></el-input>
         </el-form-item>
-
       </el-form>
     </template>
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="closeFn">取消</el-button>
+        <el-button @click="closeFun">取消</el-button>
         <el-button type="primary" @click="onConfirmFun">确定</el-button>
       </div>
     </template>
@@ -32,21 +32,17 @@ import { ElMessage } from 'element-plus';
 
 const emits = defineEmits(['close', 'createFn']);
 const props = defineProps(['libInfo']);
-
 const visible = ref(true);
-
 const formData = ref({
   parameterLibraryCategoryName: '',
   parameterLibraryName: '',
 });
 
-const closeFn = () => {
+const closeFun = () => {
   emits('close');
-
 };
 
 const onConfirmFun = () => {
-
   if (!formData.value.parameterLibraryCategoryName) {
     ElMessage.warning('请输入参数类型名称！');
     return;
@@ -55,28 +51,25 @@ const onConfirmFun = () => {
       parameterLibraryCategoryName: formData.value.parameterLibraryCategoryName,
       parameterLibraryId: props.libInfo.id,
     });
-
   }
 };
 
-onMounted(async () => {
+onMounted(() => {
   if (props.libInfo) {
     formData.value.parameterLibraryName = props.libInfo.name;
-
   }
 });
 </script>
-  <style lang="scss" scoped>
+
+<style lang="scss" scoped>
   .upload {
     width: 100%;
   }
-
-  .dialog-footer{
+  .dialog-footer {
     width: 100%;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: flex-end;
   }
-
   </style>
diff --git a/src/views/simulation/parameter/index.vue b/src/views/simulation/parameter/index.vue
index eb8361f6..a8695d7e 100644
--- a/src/views/simulation/parameter/index.vue
+++ b/src/views/simulation/parameter/index.vue
@@ -1,7 +1,6 @@
 <template>
-  <div class="gl-page-content-grey">
+  <div class="gl-page-content-grey-full">
     <div class="content">
-
       <div class="page-content-left">
         <el-tree
           v-if="showTree"
@@ -13,7 +12,6 @@
           :props="props"
           :current-node-key="currentNodeKey"
           :load="loadMoreFun"
-          @node-click="nodeClickFun"
           @current-change="currentChangeFun"
         >
           <template #default="{ data }">
@@ -21,88 +19,64 @@
               <el-icon class="icon-style" v-if="data.type !=3"><Folder /></el-icon>
               <el-icon class="icon-style" v-else><Document /></el-icon>
               <span>{{ data.name }}</span>
-
             </div>
           </template>
         </el-tree>
       </div>
       <div class="page-content-right">
-
-        <div class="operate-content">
-          <el-button
-            type="primary"
-            v-if="currentNode?.type === 1 || !currentNode?.type"
-            @click="openCreateFn('lib')"
-          >新增参数库</el-button>
-          <el-button type="primary" v-if="currentNode?.type === 1" @click="openCreateFn('type')">新增分类</el-button>
-          <el-button type="primary" v-if="currentNode?.type === 2" @click="openCreateFn('param')">新增参数对象</el-button>
-          <el-button type="" v-if="currentNode?.type === 1" :disabled="currentNode?.type != 1" @click="deleteParamFn('lib')">删除参数库</el-button>
-          <el-button type="" v-if="currentNode?.type === 2" @click="deleteParamFn('type')">删除分类</el-button>
-          <el-button type="" v-if="currentNode?.type === 3" @click="deleteParamFn('param')">删除参数对象</el-button>
-        </div>
-        <div class="parameter-content">
-          <div class="parameter-content-left">
-            <div class="parameter-title">
-              基础信息
-            </div>
-            <el-descriptions class="parameter-descriptions" :column="1" label-width="100px" border>
-              <el-descriptions-item v-if="paramObjInfo?.parameterLibraryCategoryObjectName" label="对象名称">{{ paramObjInfo?.parameterLibraryCategoryObjectName }}</el-descriptions-item>
-              <el-descriptions-item label="所属库">{{ paramObjInfo?.parameterLibraryName }}</el-descriptions-item>
-              <el-descriptions-item v-if="paramObjInfo?.parameterLibraryCategoryName" label="所属分类">{{ paramObjInfo?.parameterLibraryCategoryName }}</el-descriptions-item>
-              <el-descriptions-item v-if="paramObjInfo?.createTime" label="创建时间">{{ paramObjInfo?.createTime }}</el-descriptions-item>
-            </el-descriptions>
-            <div class="parameter-title margin-style">
-              描述
-            </div>
-            <el-descriptions class="parameter-descriptions" :column="1" label-width="100px" border>
-              <el-descriptions-item label="描述信息">描述信息</el-descriptions-item>
-            </el-descriptions>
-          </div>
-          <div class="parameter-content-right">
-            <div class="parameter-title">
-              文件
-            </div>
-            <div class="file-content">
-              <div class="file-content-left">
-                <el-icon>
-                  <Document />
-                </el-icon>
-                <span v-if="paramObjInfo.fileName">{{ paramObjInfo.fileName }} </span>
+        <BaseTable ref="paramTableRef" tableName="PARAMETER_LIST" hidePagination>
+          <template #leftOptions>
+            <div class="options">
+              <div v-if="paramObjInfo.fileName" class="file-content">
+                <div class="file-icon"><el-icon :size="16"><Document /></el-icon></div>
+                <div class="file-name"><span>{{ paramObjInfo.fileName }} </span></div>
+                <div class="download-btn"><UploadFile v-if="paramObjInfo.fileId" v-model="paramObjInfo.fileId" name="下载" /></div>
               </div>
-              <UploadFile v-if="paramObjInfo.fileId" v-model="paramObjInfo.fileId" :name="'下载'" />
-
+              <el-button type="primary" v-if="currentNode?.type === 1 || !currentNode?.type" @click="openCreateFn('lib')">新增参数库</el-button>
+              <el-button type="primary" v-if="currentNode?.type === 1" @click="openCreateFn('type')">新增分类</el-button>
+              <el-button type="primary" v-if="currentNode?.type === 2" @click="openCreateFn('param')">新增参数对象</el-button>
+              <el-button type="danger" v-if="currentNode?.type === 1" :disabled="currentNode?.type != 1" @click="deleteParamFn('lib')">删除参数库</el-button>
+              <el-button type="danger" v-if="currentNode?.type === 2" @click="deleteParamFn('type')">删除分类</el-button>
+              <el-button type="danger" v-if="currentNode?.type === 3" @click="deleteParamFn('param')">删除参数对象</el-button>
+              <el-button @click="infoShow = true">参数详情</el-button>
             </div>
-
-            <div class="param-content">
-              <BaseTable ref="paramTableRef" class="margin-style" tableName="PARAMETER_LIST" hidePagination>
-
-                <template #leftOptions>
-                  <span class="tips">
-                    参数对象上传的JSON文件格式必须遵守格式要求，否则无法解析！
-                  </span>
-                </template>
-              </BaseTable>
-
-            </div>
-          </div>
-        </div>
+          </template>
+        </BaseTable>
       </div>
-
     </div>
-
-    <addParamLib v-if="showParamLibVisible" @close="showParamLibVisible = false" @create-fn="createLibFn"></addParamLib>
+    <el-drawer
+      v-model="infoShow"
+      :size="400"
+      title="参数详情"
+      :close-on-click-modal="false"
+      @close="infoShow = false"
+    >
+      <div class="info-content">
+        <el-descriptions class="info-content-descriptions" :column="1" label-width="100px" border>
+          <el-descriptions-item v-if="paramObjInfo?.parameterLibraryCategoryObjectName" label="对象名称">{{ paramObjInfo?.parameterLibraryCategoryObjectName }}</el-descriptions-item>
+          <el-descriptions-item label="所属库">{{ paramObjInfo?.parameterLibraryName }}</el-descriptions-item>
+          <el-descriptions-item v-if="paramObjInfo?.parameterLibraryCategoryName" label="所属分类">{{ paramObjInfo?.parameterLibraryCategoryName }}</el-descriptions-item>
+          <el-descriptions-item v-if="paramObjInfo?.createTime" label="创建时间">{{ paramObjInfo?.createTime }}</el-descriptions-item>
+        </el-descriptions>
+      </div>
+    </el-drawer>
+    <addParamLib
+      v-if="showParamLibVisible"
+      @close="showParamLibVisible = false"
+      @create-fn="createLibFn"
+    />
     <addParamType
       v-if="showParamTypeVisible"
       @close="showParamTypeVisible = false"
       :lib-info="currentNode"
       @create-fn="createLibTypeFn"
-    ></addParamType>
+    />
     <addParamObject
       v-if="showParamObjVisible"
       @close="showParamObjVisible = false"
       :lib-type-info="currentNode"
       @create-fn="creatLibParamObjFn"
-    ></addParamObject>
+    />
   </div>
 </template>
 
@@ -125,51 +99,40 @@ const showParamObjVisible = ref(false);
 const showTree = ref(true);
 const libTreeRef = ref();
 const paramTableRef = ref();
+const infoShow = ref(false);
 
 const props = {
   label: 'label',
   children: 'children',
   isLeaf: 'leaf',
 };
-const loadMoreFun = async (node: any, resolve: any) => {
+
+const loadMoreFun = async(node: any, resolve: any) => {
   const listData: any = await getSimulationParameterTreeDAtaFn(node.data);
-  if (node.level >= 1) {
-    choseNodeFun(node.data);
-
-  }
-
   return resolve(listData);
-
 };
 
-const getSimulationParameterTreeDAtaFn = async (data?: any) => {
-
+const getSimulationParameterTreeDAtaFn = async(data?: any) => {
   const param: any = {
     type: 1,
   };
   if (data?.type) {
     param.type = data.type;
   }
-
   if (data?.id) {
     param.id = data.id;
   }
-
   const res: any = await getSimulationParameterTreeApi(param);
   if (res && res.code === 200) {
-
     const result = res.data.map((item: any) => {
-
       const node: any = {
         ...item,
         nodeKey: item.id + '_' + item.type,
       };
-
       if (param.type === 1 && param.id) {
         node.libName = data.name;
         node.libId = data.id;
       }
-
       if (param.type === 2 && param.id) {
         node.typeName = data.name;
         node.typeId = data.id;
@@ -178,50 +141,28 @@ const getSimulationParameterTreeDAtaFn = async (data?: any) => {
         node.leaf = true;
         node.isLeaf = true;
       }
-
       return node;
     });
-
     return result;
   }
-
-};
-
-// 选中节点
-const choseNodeFun = (data: any) => {
-
-  console.log(data, 'data111111111111');
-
-};
-
-const nodeClickFun = () => {
 };
 
 const paramObjInfo = ref<any>({});
 
 // 当前节点更改
-const currentChangeFun = async (data: any) => {
-
-  console.log(data, 'data');
-
+const currentChangeFun = async(data: any) => {
   currentNodeKey.value = data.nodeKey;
   currentNode.value = data;
   paramTableRef.value.setDataFun([]);
-
   if (data.type === 3) {
     const res:any = await getSimulationParameterLibraryCategoryObjectApi({
       ObjectId: data.id,
     });
-
     if (res && res.code === 200) {
       paramObjInfo.value = res.data;
-
       paramTableRef.value.setDataFun( paramObjInfo.value.parameterJsonValue || []);
-
     }
-  }
-
-  else if (data.type === 2) {
+  } else if (data.type === 2) {
     paramObjInfo.value = {
       parameterLibraryName: data.libName,
       parameterLibraryCategoryName: data.name,
@@ -231,7 +172,6 @@ const currentChangeFun = async (data: any) => {
     paramObjInfo.value = {
       parameterLibraryName: data.name,
     };
-
   } else {
     paramObjInfo.value = {};
   }
@@ -249,48 +189,36 @@ const openCreateFn = (flag: any) => {
   }
 };
 
-const createLibFn = async (data: any) => {
-
-  console.log(libTreeRef.value, 'libTreeRef.value');
-
+const createLibFn = async(data: any) => {
   const res: any = await addLibraryApi(data);
   if (res && res.code === 200) {
     ElMessage.success('新增参数库成功');
     const libList = await getSimulationParameterTreeDAtaFn();
-
     if (libList.length === 1) {
       showTree.value = false;
     } else {
       libTreeRef.value.insertAfter(libList.at(-1), libList[libList.length - 2].nodeKey);
-
     }
-
   }
   showTree.value = true;
   showParamLibVisible.value = false;
   return;
-
 };
 
-const createLibTypeFn = async (data: any) => {
-
+const createLibTypeFn = async(data: any) => {
   const res: any = await addLibraryCategoryApi(data);
   if (res && res.code === 200) {
     ElMessage.success('新增参数分类成功');
-
     const list = await getSimulationParameterTreeDAtaFn(currentNode.value);
     const node = list.find((item: any) => {
       return item.name === data.parameterLibraryCategoryName;
     });
-
     libTreeRef.value.append(node, currentNode.value.nodeKey);
   }
-
   showParamTypeVisible.value = false;
 };
 
-const creatLibParamObjFn = async (data: any) => {
-
+const creatLibParamObjFn = async(data: any) => {
   const res:any = await addLibraryCategoryObjectApi({
     parameterLibraryId: data.parameterLibraryId,
     parameterLibraryCategoryId: data.parameterLibraryCategoryId,
@@ -307,9 +235,6 @@ const creatLibParamObjFn = async (data: any) => {
     });
     libTreeRef.value.append(node, currentNode.value.nodeKey);
   }
-
-  console.log(data, 'data');
-
   showParamObjVisible.value = false;
 };
 
@@ -322,149 +247,82 @@ const deleteParamFn = (flag:any) => {
       cancelButtonText: '取消',
       type: 'warning',
     }
-  )
-    .then(async () => {
-
-      const res:any = await deleteSimulationParameterApi({
-        type: currentNode.value.type,
-        id: currentNode.value.id,
-      });
-
-      if (res && res.code === 200) {
-        ElMessage.success('删除成功！');
-        libTreeRef.value.remove(currentNode.value.nodeKey);
-        currentNode.value = {};
-        paramObjInfo.value = '';
-      }
-
-    })
-    .catch(() => {
-
+  ).then(async() => {
+    const res:any = await deleteSimulationParameterApi({
+      type: currentNode.value.type,
+      id: currentNode.value.id,
     });
+    if (res && res.code === 200) {
+      ElMessage.success('删除成功！');
+      libTreeRef.value.remove(currentNode.value.nodeKey);
+      currentNode.value = {};
+      paramObjInfo.value = '';
+    }
+  });
 };
-
 </script>
 
 <style lang="scss" scoped>
-.gl-page-content-grey {
-  height: 100%;
-  width: 100%;
-
-  .custom-tree-node{
-    display: flex;
-    align-items: center;
-
-    .icon-style{
-      margin-right: 5px;
-    }
-
-  }
-
+.gl-page-content-grey-full {
   .content {
     height: 100%;
     width: 100%;
     display: flex;
-
     .page-content-left {
-
+      padding: 10px;
       width: 350px;
       height: 100%;
-      overflow: auto;
       margin-right: 10px;
       background-color: #fff;
-    }
-
-    .page-content-right {
-      width: calc(100% - 360px);
-      height: 100%;
-      background-color: #fff;
-      padding: 0 10px;
-
-      .operate-content {
-        width: 100%;
-        height: 50px;
+      overflow: auto;
+      .custom-tree-node {
         display: flex;
         align-items: center;
-
+        .icon-style{
+          margin-right: 5px;
+        }
       }
-
-      .parameter-content {
-        height: calc(100% - 50px);
-        width: 100%;
+    }
+    .page-content-right {
+      flex: 1;
+      padding: 16px;
+      background-color: #fff;
+      height: 100%;
+      overflow: auto;
+      .options {
         display: flex;
-
-        .parameter-title {
+        align-items: center;
+        justify-content: center;
+        .file-content {
           display: flex;
           align-items: center;
-
-          &::before {
-            content: '';
-            display: inline-block;
-            width: 4px;
-            height: 16px;
-            background-color: var(--el-color-primary);
-            margin-right: 8px;
-          }
-        }
-
-        .margin-style {
-          margin-top: var(--margin-small);
-        }
-
-        .parameter-content-left {
-          width: 40%;
-          height: 100%;
-
-          .parameter-descriptions {
-            margin-top: var(--margin-small);
-          }
-        }
-
-        .parameter-content-right {
-          width: 60%;
-          height: 100%;
-          padding-left: var(--margin-small);
-
-          .file-content {
-            width: 100%;
+          justify-content: center;
+          margin-right: 20px;
+          height: 24px;
+          padding: 0 5px;
+          border-radius: 4px;
+          background-color: var(--el-border-color-light);
+          .file-icon {
             display: flex;
             align-items: center;
-            justify-content: space-between;
-            padding: var(--margin-small);
-            background-color: #e6ebf5;
-            margin-top: var(--margin-small);
-
-            .file-content-left {
-              display: flex;
-              align-items: center;
-
-              span {
-                margin-left: var(--margin-small);
-              }
-            }
-
-            .file-content-right {
-              cursor: pointer;
-            }
-
-          }
-
-          .param-content{
-            width: 100%;
-            height: calc(100% - 80px);
-            overflow: auto;
-
-          .tips{
-            font-size: 12px;
-            padding-left: 10px;
-            color: #949494;
+            justify-content: center;
+            color: var(--el-color-primary);
           }
+          .file-name {
+            padding: 0 4px;
+            font-size: 14px;
+            color: var(--el-text-color-primary);
           }
         }
       }
-
     }
-
+  }
+}
+.pinfo-content {
+  width: 100%;
+  height: 100%;
+  .info-content-descriptions {
+    margin-top: var(--margin-small);
   }
 }
 </style>