diff --git a/yudao-admin-vue3/src/assets/imgs/liebiao.png b/yudao-admin-vue3/src/assets/imgs/liebiao.png
new file mode 100644
index 0000000..49c5948
Binary files /dev/null and b/yudao-admin-vue3/src/assets/imgs/liebiao.png differ
diff --git a/yudao-admin-vue3/src/assets/imgs/tubiao.png b/yudao-admin-vue3/src/assets/imgs/tubiao.png
new file mode 100644
index 0000000..7b76ca4
Binary files /dev/null and b/yudao-admin-vue3/src/assets/imgs/tubiao.png differ
diff --git a/yudao-admin-vue3/src/views/infra/file/index.vue b/yudao-admin-vue3/src/views/infra/file/index.vue
index f2c18c9..e415b94 100644
--- a/yudao-admin-vue3/src/views/infra/file/index.vue
+++ b/yudao-admin-vue3/src/views/infra/file/index.vue
@@ -1,376 +1,420 @@
 <template>
-	<doc-alert title="上传下载" url="https://doc.iocoder.cn/file/" />
+  <doc-alert title="上传下载" url="https://doc.iocoder.cn/file/" />
 
-	<div class="flex-container">
-		<!-- 菜单区域 -->
-		<div class="menu-area">
+  <div class="flex-container">
+    <!-- 菜单区域 -->
+    <div class="menu-area">
 
-			<el-button type="primary" plain @click="createType" style="width: 90;font-size: 12px;">
-				<Icon icon="ep:plus" class="mr-5px" /> 新增分类
-			</el-button>
+      <el-button type="primary" plain @click="createType" style="width: 90;font-size: 12px;">
+        <Icon icon="ep:plus" class="mr-5px" /> 新增分类
+      </el-button>
 
-			<el-menu :default-active="targetMenuId" style="width:182px">
-				<el-menu-item :index="targetMenuId" :key="targetMenuId" @click="clickMenu(targetMenuId)">
-					全部类型
-				</el-menu-item>
-				<el-menu-item v-for="item in typeMenu" :index="item.value" :key="item.value"
-					@click="clickMenu(item.value)">
-					{{ item.label }}
-					<el-icon style="margin-left: 60px;width: 10px;" @mouseover="showActions = item.value"
-						@mouseleave="showActions = null">
-						<MoreFilled />
-						<div v-if="showActions === item.value" class="action-buttons">
-							<el-button size="small" @click.stop="editItem(item.id,item.label)">编辑</el-button>
-							<br />
-							<el-button size="small" @click.stop="deleteItem(item.id)">删除</el-button>
-						</div>
-					</el-icon>
-				</el-menu-item>
-			</el-menu>
+      <el-menu :default-active="targetMenuId" style="width:182px">
+        <el-menu-item :index="targetMenuId" :key="targetMenuId" @click="clickMenu(targetMenuId)">
+          全部类型
+        </el-menu-item>
+        <el-menu-item v-for="item in typeMenu" :index="item.value" :key="item.value"
+                      @click="clickMenu(item.value)">
+          {{ item.label }}
+          <el-icon style="margin-left: 60px;width: 10px;" @mouseover="showActions = item.value"
+                   @mouseleave="showActions = null">
+            <MoreFilled />
+            <div v-if="showActions === item.value" class="action-buttons">
+              <el-button size="small" @click.stop="editItem(item.id,item.label)">编辑</el-button>
+              <br />
+              <el-button size="small" @click.stop="deleteItem(item.id)">删除</el-button>
+            </div>
+          </el-icon>
+        </el-menu-item>
+      </el-menu>
 
-		</div>
+    </div>
 
-		<!-- 内容区域 -->
-		<div class="content-wrap">
-			<ContentWrap>
-				<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
-					<!-- <el-form-item label="文件路径" prop="path">
-                <el-input
-                  v-model="queryParams.path"
-                  placeholder="请输入文件路径"
-                  clearable
-                  @keyup.enter="handleQuery"
-                />
-              </el-form-item> -->
-					<el-form-item label="文件类型" prop="type" width="80">
-						<el-input v-model="queryParams.type" placeholder="请输入文件类型" clearable
-							@keyup.enter="handleQuery" />
-					</el-form-item>
+    <!-- 内容区域 -->
+    <div class="content-wrap">
+      <ContentWrap>
+        <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+          <el-form-item label="文件类型" prop="type" width="80">
+            <el-input v-model="queryParams.type" placeholder="请输入文件类型" clearable
+                      @keyup.enter="handleQuery" />
+          </el-form-item>
 
-					<el-form-item label="创建时间" prop="createTime">
-						<el-date-picker v-model="queryParams.createTime" value-format="YYYY-MM-DD HH:mm:ss"
-							type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
-							:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" />
-					</el-form-item>
-					<el-form-item>
-						<el-button @click="handleQuery">
-							<Icon icon="ep:search" class="mr-5px" /> 搜索
-						</el-button>
-						<el-button @click="resetQuery">
-							<Icon icon="ep:refresh" class="mr-5px" /> 重置
-						</el-button>
-						<el-button type="primary" plain @click="openForm">
-							<Icon icon="ep:upload" class="mr-5px" /> 上传文件
-						</el-button>
-					</el-form-item>
-				</el-form>
-			</ContentWrap>
+          <el-form-item label="创建时间" prop="createTime">
+            <el-date-picker v-model="queryParams.createTime" value-format="YYYY-MM-DD HH:mm:ss"
+                            type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
+                            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" />
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="handleQuery">
+              <Icon icon="ep:search" class="mr-5px" /> 搜索
+            </el-button>
+            <el-button @click="resetQuery">
+              <Icon icon="ep:refresh" class="mr-5px" /> 重置
+            </el-button>
+            <el-button type="primary" plain @click="openForm">
+              <Icon icon="ep:upload" class="mr-5px" /> 上传文件
+            </el-button>
+          </el-form-item>
+          <span><img @click="liebiao" style="cursor: pointer;" class="mr-10px h-30px w-30px" src="@/assets/imgs/liebiao.png" /></span>
+          <span><img @click="tubiao" style="cursor: pointer;" class="mr-10px h-30px w-30px" src="@/assets/imgs/tubiao.png" /></span>
+        </el-form>
+
+      </ContentWrap>
 
 
-			<ContentWrap>
-				<el-table v-loading="loading" :data="list">
-					<el-table-column label="文件内容" align="center" prop="url" width="110px">
-						<template #default="{ row }">
-							<el-image v-if="row.type.includes('image')" class="h-80px w-80px" lazy :src="row.url"
-								:preview-src-list="[row.url]" preview-teleported fit="cover" />
-							<el-link v-else-if="row.type.includes('pdf')" type="primary" :href="row.url"
-								:underline="false" target="_blank">预览</el-link>
-							<el-link v-else type="primary" download :href="row.url" :underline="false"
-								target="_blank">下载</el-link>
-						</template>
-					</el-table-column>
-					<el-table-column label="文件名" align="center" prop="name" :show-overflow-tooltip="true" />
-					<!-- <el-table-column label="文件路径" align="center" prop="path" :show-overflow-tooltip="true" /> -->
-					<el-table-column label="URL" align="center" prop="url" :show-overflow-tooltip="true" />
-					<!-- <el-table-column label="文件大小" align="center" prop="size" width="120"
-						:formatter="fileSizeFormatter" /> -->
-					<!-- <el-table-column label="文件类型" align="center" prop="type" width="180px" />
-					<el-table-column label="图片分类" align="center" prop="picType">
-						<template #default="scope">
-							<dict-tag :type="DICT_TYPE.INFRA_FILE_TYPE" :value="scope.row.picType" />
-						</template>
-					</el-table-column> -->
 
-					<el-table-column label="上传时间" align="center" prop="createTime" width="180"
-						:formatter="dateFormatter" />
-					<el-table-column label="操作" align="center">
-						<template #default="scope">
-							<el-button link type="primary"
-								@click="updateForm('update', scope.row.id , scope.row.picType)">
-								更改类型
-							</el-button>
-							<el-button link type="danger" @click="handleDelete(scope.row.id)"
-								v-hasPermi="['infra:file:delete']">
-								删除
-							</el-button>
-						</template>
-					</el-table-column>
-				</el-table>
-			</ContentWrap>
-			<!-- 分页 -->
-			<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
-				@pagination="getList" />
+      <el-table v-loading="loading" :data="list" v-show="panduan == '1'">
+        <el-table-column label="文件内容" align="center" prop="url" width="110px">
+          <template #default="{ row }">
+            <el-image v-if="row.type.includes('image')" class="h-80px w-80px" lazy :src="row.url"
+                      :preview-src-list="[row.url]" preview-teleported fit="cover" />
+            <el-link v-else-if="row.type.includes('pdf')" type="primary" :href="row.url"
+                     :underline="false" target="_blank">预览</el-link>
+            <el-link v-else type="primary" download :href="row.url" :underline="false"
+                     target="_blank">下载</el-link>
+          </template>
+        </el-table-column>
+        <el-table-column label="文件名" align="center" prop="name" :show-overflow-tooltip="true" />
+        <!-- <el-table-column label="文件路径" align="center" prop="path" :show-overflow-tooltip="true" /> -->
+        <el-table-column label="URL" align="center" prop="url" :show-overflow-tooltip="true" />
 
-		</div>
-	</div>
-	<!-- 表单弹窗：添加/修改 -->
-	<FileForm ref="formRef" @success="getList" />
+        <el-table-column label="上传时间" align="center" prop="createTime" width="180"
+                         :formatter="dateFormatter" />
+        <el-table-column label="操作" align="center">
+          <template #default="scope">
+            <el-button link type="primary"
+                       @click="updateForm('update', scope.row.id , scope.row.picType)">
+              更改类型
+            </el-button>
+            <el-button link type="danger" @click="handleDelete(scope.row.id)"
+                       v-hasPermi="['infra:file:delete']">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
-	<UpdateForm ref="forRef" @success="getList" />
+      <div v-show="panduan == '2'">
+        <!-- 图片展示区域 -->
+        <div class="image-container">
+          <div v-for="item in tubiaoData" :key="item.id" class="image-item">
+            <img :src="item.url" alt="图表" />
+          </div>
+        </div>
+      </div>
 
-	<Dialog v-model="dialogVisibles" :title="dialogTitles">
-		<el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="80px">
 
-			<el-form-item label="数据标签" prop="label">
-				<el-input v-model="formData.label" placeholder="请输入数据标签" />
-			</el-form-item>
-			<el-form-item label="显示排序" prop="sort">
-				<el-input-number v-model="formData.sort" :min="0" controls-position="right" />
-			</el-form-item>
 
-		</el-form>
-		<template #footer>
-			<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
-			<el-button @click="dialogVisibles = false">取 消</el-button>
-		</template>
-	</Dialog>
+      <!-- 分页 -->
+      <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
+                  @pagination="getList" />
 
-	<Dialog v-model="dialogVisible" :title="dialogTitle">
-		<el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
-			<el-form-item label="数据标签" prop="label">
-				<el-input v-model="updateLabel" placeholder="请输入数据标签" />
-			</el-form-item>
-		</el-form>
-		<template #footer>
-			<el-button :disabled="formLoading" type="primary" @click="submitForms">确 定</el-button>
-			<el-button @click="dialogVisible = false">取 消</el-button>
-		</template>
-	</Dialog>
+    </div>
+  </div>
+  <!-- 表单弹窗：添加/修改 -->
+  <FileForm ref="formRef" @success="getList" />
+
+  <UpdateForm ref="forRef" @success="getList" />
+
+  <Dialog v-model="dialogVisibles" :title="dialogTitles">
+    <el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="80px">
+
+      <el-form-item label="数据标签" prop="label">
+        <el-input v-model="formData.label" placeholder="请输入数据标签" />
+      </el-form-item>
+      <el-form-item label="显示排序" prop="sort">
+        <el-input-number v-model="formData.sort" :min="0" controls-position="right" />
+      </el-form-item>
+
+    </el-form>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisibles = false">取 消</el-button>
+    </template>
+  </Dialog>
+
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
+    <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
+      <el-form-item label="数据标签" prop="label">
+        <el-input v-model="updateLabel" placeholder="请输入数据标签" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForms">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
 
 
 </template>
 
 <script lang="ts" setup>
-	import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
-	import { fileSizeFormatter } from '@/utils'
-	import { Search, MoreFilled } from '@element-plus/icons-vue';
-	import { dateFormatter } from '@/utils/formatTime'
-	// import * as ElementPlusIconsVue from '@element-plus/icons-vue'
-	import * as FileApi from '@/api/infra/file'
-	import FileForm from './FileForm.vue'
-	import UpdateForm from './updateForm.vue'
-	import * as DictDataApi from '@/api/system/dict/dict.data'
-	const typeMenu = ref<DictDataApi.DictDataVO[]>([]) // 
-	const targetMenuId = ref('0')
-	defineOptions({ name: 'InfraFile' })
-	const showActions = ref(null);
-	const dialogVisible = ref(false) // 弹窗的是否展示
-	const dialogTitle = ref('') // 弹窗的标题
-	const dialogVisibles = ref(false) // 弹窗的是否展示
-	const dialogTitles = ref('') // 弹窗的标题
-	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-	const formData = ref({
-		id: undefined,
-		sort: undefined,
-		label: '',
-		value: '',
-		dictType: '',
-		// status: CommonStatusEnum.ENABLE,
-		colorType: '',
-		cssClass: '',
-		remark: ''
-	})
-	const formRules = reactive({
-		label: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
-		sort: [{ required: true, message: '数据顺序不能为空', trigger: 'blur' }],
-	})
-	const updateLabel = ref('')
-	const message = useMessage() // 消息弹窗
-	const { t } = useI18n() // 国际化
+  import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+  import { fileSizeFormatter } from '@/utils'
+  import { Search, MoreFilled } from '@element-plus/icons-vue';
+  import { dateFormatter } from '@/utils/formatTime'
+  // import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+  import * as FileApi from '@/api/infra/file'
+  import FileForm from './FileForm.vue'
+  import UpdateForm from './updateForm.vue'
+  import * as DictDataApi from '@/api/system/dict/dict.data'
+  const typeMenu = ref<DictDataApi.DictDataVO[]>([]) //
+  const targetMenuId = ref('0')
+  defineOptions({ name: 'InfraFile' })
+  const showActions = ref(null);
+  const dialogVisible = ref(false) // 弹窗的是否展示
+  const dialogTitle = ref('') // 弹窗的标题
+  const dialogVisibles = ref(false) // 弹窗的是否展示
+  const dialogTitles = ref('') // 弹窗的标题
+  const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+  const panduan = ref('1')
+  const tubiaoData = ref<FileDataVO[]>([]);
+  const formData = ref({
+    id: undefined,
+    sort: undefined,
+    label: '',
+    value: '',
+    dictType: '',
+    // status: CommonStatusEnum.ENABLE,
+    colorType: '',
+    cssClass: '',
+    remark: ''
+  })
+  const formRules = reactive({
+    label: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
+    sort: [{ required: true, message: '数据顺序不能为空', trigger: 'blur' }],
+  })
+  const updateLabel = ref('')
+  const message = useMessage() // 消息弹窗
+  const { t } = useI18n() // 国际化
 
-	const loading = ref(true) // 列表的加载中
-	const total = ref(0) // 列表的总页数
-	const list = ref([]) // 列表的
-	const menuId = ref()
+  const loading = ref(true) // 列表的加载中
+  const total = ref(0) // 列表的总页数
+  const list = ref([]) // 列表的
+  const menuId = ref()
 
-	const queryParams = reactive({
-		pageNo: 1,
-		pageSize: 10,
-		name: undefined,
-		type: undefined,
-		picType: '',
-		path: undefined,
-		createTime: [],
-	})
-	const queryFormRef = ref() // 搜索的表单
+  const queryParams = reactive({
+    pageNo: 1,
+    pageSize: 10,
+    name: undefined,
+    type: undefined,
+    picType: '',
+    path: undefined,
+    createTime: [],
+  })
+  const queryFormRef = ref() // 搜索的表单
 
-	/** 查询列表 */
-	const getList = async () => {
-		loading.value = true
-		try {
-			const data = await FileApi.getFilePage(queryParams)
-			list.value = data.list
-			total.value = data.total
-		} finally {
-			loading.value = false
-		}
-	}
+  /** 查询列表 */
+  const getList = async () => {
+    loading.value = true
+    try {
+      const data = await FileApi.getFilePage(queryParams)
+      list.value = data.list
+      tubiaoData.value = data.list
+      console.log('111111',tubiaoData)
+      total.value = data.total
+    } finally {
+      loading.value = false
+    }
+  }
+  interface FileDataVO {
+    id: string
+    configId: string
+    path: string
+    name: string
+    url: string
+    type: string
+    picType: string
+    size: string
+    createTime: Date
+  }
 
-	//新增分类
-	const createType = () => {
-		dialogVisibles.value = true
-		dialogTitles.value = '新增分类'
+  const tubiao = () => {
+    panduan.value = '2'
+  }
 
-	}
+  const liebiao = () => {
+    panduan.value = '1'
+  }
 
-	/** 添加分类菜单 */
-	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-	const submitForm = async () => {
-		// 校验表单
-		if (!formRef) return
-		const valid = await formRef.value.validate()
-		if (!valid) return
-		// 提交请求
-		formLoading.value = true
-		try {
-			const data = formData.value as DictDataApi.DictDataVO
-			await DictDataApi.createPicType(data)
-			message.success(t('common.createSuccess'))
-			dialogVisibles.value = false
-			// 发送操作成功的事件
-			emit('success')
-			getTypeList()
+  //新增分类
+  const createType = () => {
+    dialogVisibles.value = true
+    dialogTitles.value = '新增分类'
+  }
 
-		} finally {
-			formLoading.value = false
-		}
-	}
+  /** 添加分类菜单 */
+  const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+  const submitForm = async () => {
+    // 校验表单
+    if (!formRef) return
+    const valid = await formRef.value.validate()
+    if (!valid) return
+    // 提交请求
+    formLoading.value = true
+    try {
+      const data = formData.value as DictDataApi.DictDataVO
+      await DictDataApi.createPicType(data)
+      message.success(t('common.createSuccess'))
+      dialogVisibles.value = false
+      // 发送操作成功的事件
+      emit('success')
+      getTypeList()
 
-	//修改分类菜单
-	const submitForms = async () => {
-		// 校验表单
-		if (!formRef) return
-		const valid = await formRef.value.validate()
-		if (!valid) return
-		// 提交请求
-		formLoading.value = true
-		try {
+    } finally {
+      formLoading.value = false
+    }
+  }
 
-			await DictDataApi.updateMenu(menuId.value, updateLabel.value)
-			message.success(t('common.createSuccess'))
-			dialogVisible.value = false
-			// 发送操作成功的事件
-			emit('success')
-			getTypeList()
+  //修改分类菜单
+  const submitForms = async () => {
+    // 校验表单
+    if (!formRef) return
+    const valid = await formRef.value.validate()
+    if (!valid) return
+    // 提交请求
+    formLoading.value = true
+    try {
 
-		} finally {
-			formLoading.value = false
-		}
-	}
+      await DictDataApi.updateMenu(menuId.value, updateLabel.value)
+      message.success(t('common.createSuccess'))
+      dialogVisible.value = false
+      // 发送操作成功的事件
+      emit('success')
+      getTypeList()
 
-	//分类菜单修改按钮
-	const editItem = (id : number | undefined, lable : string) => {
-		dialogVisible.value = true
-		dialogTitle.value = '菜单编辑'
-		menuId.value = id
-		updateLabel.value = lable
-		// 处理编辑事件
-		console.log('编辑:',);
-	};
-	//分类菜单删除按钮
-	const deleteItem = async (id : number | undefined) => {
-		// 处理删除事件
-		// 删除的二次确认
-		await message.delConfirm()
-		await DictDataApi.deleteMenu(id)
-		message.success(t('common.delSuccess'))
-		getTypeList()
+    } finally {
+      formLoading.value = false
+    }
+  }
 
-	};
-	//图片素材管理分类菜单
-	const getTypeList = async () => {
-		const data = await DictDataApi.getTypeList()
-		typeMenu.value = data
-		console.log('1111111111', typeMenu)
-	}
+  //分类菜单修改按钮
+  const editItem = (id : number | undefined, lable : string) => {
+    dialogVisible.value = true
+    dialogTitle.value = '菜单编辑'
+    menuId.value = id
+    updateLabel.value = lable
+    // 处理编辑事件
+    console.log('编辑:',);
+  };
+  //分类菜单删除按钮
+  const deleteItem = async (id : number | undefined) => {
+    // 处理删除事件
+    // 删除的二次确认
+    await message.delConfirm()
+    await DictDataApi.deleteMenu(id)
+    message.success(t('common.delSuccess'))
+    getTypeList()
+
+  };
+  //图片素材管理分类菜单
+  const getTypeList = async () => {
+    const data = await DictDataApi.getTypeList()
+    typeMenu.value = data
+  }
 
 
-	/**  */
-	const clickMenu = (id : string) => {
-		queryParams.picType = id
-		queryParams.pageNo = 1
-		getList()
-	}
+  /**  */
+  const clickMenu = (id : string) => {
+    queryParams.picType = id
+    queryParams.pageNo = 1
+    getList()
+  }
 
-	/** 搜索按钮操作 */
-	const handleQuery = () => {
-		queryParams.pageNo = 1
-		getList()
-	}
+  /** 搜索按钮操作 */
+  const handleQuery = () => {
+    queryParams.pageNo = 1
+    getList()
+  }
 
-	/** 重置按钮操作 */
-	const resetQuery = () => {
-		queryFormRef.value.resetFields()
-		handleQuery()
-	}
+  /** 重置按钮操作 */
+  const resetQuery = () => {
+    queryFormRef.value.resetFields()
+    handleQuery()
+  }
 
 
-	const formRef = ref()
-	const openForm = () => {
-		formRef.value.open()
-	}
+  const formRef = ref()
+  const openForm = () => {
+    formRef.value.open()
+  }
 
-	const forRef = ref()
-	/** 修改操作 */
-	const updateForm = (type : string, id : number, picType : number) => {
-		forRef.value.open(type, id, picType)
-	}
+  const forRef = ref()
+  /** 修改操作 */
+  const updateForm = (type : string, id : number, picType : number) => {
+    forRef.value.open(type, id, picType)
+  }
 
 
 
-	/** 删除按钮操作 */
-	const handleDelete = async (id : number) => {
-		try {
-			// 删除的二次确认
-			await message.delConfirm()
-			// 发起删除
-			await FileApi.deleteFile(id)
-			message.success(t('common.delSuccess'))
-			// 刷新列表
-			await getList()
-		} catch { }
-	}
+  /** 删除按钮操作 */
+  const handleDelete = async (id : number) => {
+    try {
+      // 删除的二次确认
+      await message.delConfirm()
+      // 发起删除
+      await FileApi.deleteFile(id)
+      message.success(t('common.delSuccess'))
+      // 刷新列表
+      await getList()
+    } catch { }
+  }
 
-	/** 初始化 **/
-	onMounted(() => {
-		queryParams.picType = targetMenuId.value
-		getTypeList()
-		getList()
-	})
+  /** 初始化 **/
+  onMounted(() => {
+    queryParams.picType = targetMenuId.value
+    getTypeList()
+    getList()
+  })
 </script>
 <style scoped>
-	.flex-container {
-		height: 100vh;
-		/* 使容器填满视口高度 */
-		display: flex;
-	}
+  .flex-container {
+    height: 100vh;
+    /* 使容器填满视口高度 */
+    display: flex;
+  }
 
-	.menu-area {
-		padding: 25px;
-		background-color: white;
-		width: 180px;
-		height: 1000px;
-		/* 固定高度 */
-		overflow-y: hidden;
-		/* 禁止滚动 */
-		border-right: 1px solid #e0e0e0;
-		/* 可选：添加分隔线 */
-	}
+  .menu-area {
+    padding: 25px;
+    background-color: white;
+    width: 180px;
+    height: 1000px;
+    /* 固定高度 */
+    overflow-y: hidden;
+    /* 禁止滚动 */
+    border-right: 1px solid #e0e0e0;
+    /* 可选：添加分隔线 */
+  }
 
-	.content-wrap {
-		flex-grow: 1;
-		/* 使内容区域占据剩余空间 */
-		overflow-y: auto;
-		/* 允许内容区域滚动 */
-	}
-</style>
\ No newline at end of file
+  .content-wrap {
+    flex-grow: 1;
+    /* 使内容区域占据剩余空间 */
+    overflow-y: auto;
+    /* 允许内容区域滚动 */
+  }
+
+
+  /* 图片容器样式 */
+  .image-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;  /* 设置图片之间的间距 */
+    justify-content: flex-start; /* 如果图片少于5张，会平均分布 */
+    max-width: 1000px; /* 设置外部容器的最大宽度 */
+    margin: 0 auto;  /* 居中显示 */
+  }
+
+  /* 每张图片占用的宽度，使每行显示5张 */
+  .image-item {
+    width: calc(20% - 8px);  /* 宽度设为容器的20%，减去间距 */
+  }
+
+  /* 设置图片的最大宽度 */
+  .image-item img {
+    width: 100%;
+    height: auto;
+    border-radius: 8px; /* 图片边缘圆角（可选） */
+  }
+
+
+</style>