diff --git a/.env.development b/.env.development
index 3466e92..55ede7e 100644
--- a/.env.development
+++ b/.env.development
@@ -10,5 +10,8 @@ ENV = 'development'
 # ADMIN 服务地址
 VITE_ADMIN_PROXY_PATH = http://123.156.230.15:8089/api/
 
+# 图片访问基础地址
+VITE_IMAGE_BASE_PATH = http://123.156.230.15:8089/api
+
 # 代码生成服务地址
 VITE_GEN_PROXY_PATH = http://localhost:5003
\ No newline at end of file
diff --git a/src/components/Upload/Images.vue b/src/components/Upload/Images.vue
index 53d90ea..1aae577 100644
--- a/src/components/Upload/Images.vue
+++ b/src/components/Upload/Images.vue
@@ -69,6 +69,7 @@ const dialogVisible = ref(false);
 const elUploadRef = ref();
 // 获取 el-form 组件上下文
 const formContext = inject(formContextKey, void 0);
+const imageBaseUrl = import.meta.env.VITE_IMAGE_BASE_PATH;
 
 // 上传
 const handleHttpUpload = async (options: UploadRequestOptions) => {
@@ -99,7 +100,7 @@ const handleRemove = (uploadFile: any, uploadFiles: any[]) => {
 
 // 预览
 const handlePictureCardPreview = (uploadFile: any) => {
-	dialogImageUrl.value = 'http://123.156.230.15:8089/api' + uploadFile.response.data.url;
+	dialogImageUrl.value = imageBaseUrl + uploadFile.response.data.url;
 	dialogVisible.value = true;
 };
 
diff --git a/src/views/canteen/canteenSpu/index.vue b/src/views/canteen/canteenSpu/index.vue
index 42225af..834ab56 100644
--- a/src/views/canteen/canteenSpu/index.vue
+++ b/src/views/canteen/canteenSpu/index.vue
@@ -1,149 +1,154 @@
 <template>
-  <div class="layout-padding">
-    <div class="layout-padding-auto layout-padding-view">
-      <el-row v-show="showSearch">
-        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
-      <el-form-item label="商品名称" prop="name" >
-        <el-input placeholder="请输入商品名称" v-model="state.queryForm.name" />
-      </el-form-item>
-      <el-form-item label="商品分类编号" prop="categoryId">
-            <el-select v-model="state.queryForm.categoryId" placeholder="请选择商品分类编号">
-              <el-option label="请选择">0</el-option>
-            </el-select>
-      </el-form-item>
-          <el-form-item>
-            <el-button icon="search" type="primary" @click="getDataList">
-              查询
-            </el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-          </el-form-item>
-        </el-form>
-      </el-row>
-      <el-row>
-        <div class="mb8" style="width: 100%">
-          <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
-            v-auth="'canteen_canteenSpu_add'">
-            新 增
-          </el-button>
-          <el-button plain :disabled="multiple" icon="Delete" type="primary"
-            v-auth="'canteen_canteenSpu_del'" @click="handleDelete(selectObjs)">
-            删除
-          </el-button>
-          <right-toolbar v-model:showSearch="showSearch" :export="'canteen_canteenSpu_export'"
-                @exportExcel="exportExcel" class="ml10 mr20" style="float: right;"
-            @queryTable="getDataList"></right-toolbar>
-        </div>
-      </el-row>
-      <el-table :data="state.dataList" v-loading="state.loading" border
-        :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
+	<div class="layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+			<el-row v-show="showSearch">
+				<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+					<el-form-item label="商品名称" prop="name">
+						<el-input placeholder="请输入商品名称" v-model="state.queryForm.name" />
+					</el-form-item>
+					<el-form-item label="商品分类编号" prop="categoryId">
+						<el-select v-model="state.queryForm.categoryId" placeholder="请选择商品分类编号">
+							<el-option label="请选择">0</el-option>
+						</el-select>
+					</el-form-item>
+					<el-form-item>
+						<el-button icon="search" type="primary" @click="getDataList"> 查询 </el-button>
+						<el-button icon="Refresh" @click="resetQuery">重置</el-button>
+					</el-form-item>
+				</el-form>
+			</el-row>
+			<el-row>
+				<div class="mb8" style="width: 100%">
+					<el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()" v-auth="'canteen_canteenSpu_add'">
+						新 增
+					</el-button>
+					<el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'canteen_canteenSpu_del'" @click="handleDelete(selectObjs)">
+						删除
+					</el-button>
+					<right-toolbar
+						v-model:showSearch="showSearch"
+						:export="'canteen_canteenSpu_export'"
+						@exportExcel="exportExcel"
+						class="ml10 mr20"
+						style="float: right"
+						@queryTable="getDataList"
+					></right-toolbar>
+				</div>
+			</el-row>
+			<el-table
+				:data="state.dataList"
+				v-loading="state.loading"
+				border
+				:cell-style="tableStyle.cellStyle"
+				:header-cell-style="tableStyle.headerCellStyle"
 				@selection-change="selectionChangHandle"
-        @sort-change="sortChangeHandle">
-        <el-table-column type="selection" width="40" align="center" />
-        <el-table-column type="index" label="#" width="40" />
-          <el-table-column prop="name" label="商品名称"  show-overflow-tooltip/>
-          <el-table-column prop="categoryId" label="商品分类编号"  show-overflow-tooltip/>
-          <el-table-column prop="picUrl" label="商品封面图"  show-overflow-tooltip/>
-<!--          <el-table-column prop="sliderPicUrls" label="商品轮播图"  show-overflow-tooltip/>-->
-          <el-table-column prop="sort" label="排序字段"  show-overflow-tooltip/>
-          <el-table-column prop="status" label="上架状态" show-overflow-tooltip>
-      <template #default="scope">
-                <dict-tag :options="spu_status" :value="scope.row.status"></dict-tag>
-            </template>
-          </el-table-column>
-          <el-table-column prop="price" label="商品价格，单位使用：分"  show-overflow-tooltip/>
-          <el-table-column prop="marketPrice" label="市场价，单位使用：分"  show-overflow-tooltip/>
-          <el-table-column prop="costPrice" label="成本价，单位： 分"  show-overflow-tooltip/>
-          <el-table-column prop="stock" label="库存"  show-overflow-tooltip/>
-          <el-table-column prop="giveIntegral" label="赠送积分"  show-overflow-tooltip/>
-          <el-table-column prop="salesCount" label="商品销量"  show-overflow-tooltip/>
-          <el-table-column prop="virtualSalesCount" label="虚拟销量"  show-overflow-tooltip/>
-          <el-table-column prop="createTime" label="创建时间"  show-overflow-tooltip/>
-        <el-table-column label="操作" width="150">
-          <template #default="scope">
-            <el-button icon="edit-pen" text type="primary" v-auth="'canteen_canteenSpu_edit'"
-              @click="formDialogRef.openDialog(scope.row.id)">编辑</el-button>
-            <el-button icon="delete" text type="primary" v-auth="'canteen_canteenSpu_del'" @click="handleDelete([scope.row.id])">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
-    </div>
+				@sort-change="sortChangeHandle"
+			>
+				<el-table-column type="selection" width="40" align="center" />
+				<el-table-column type="index" label="#" width="40" />
+				<el-table-column prop="name" label="商品名称" width="120px" show-overflow-tooltip />
+				<el-table-column prop="categoryId" label="商品分类编号" width="120px" show-overflow-tooltip />
+				<el-table-column prop="picUrl" label="商品封面图" align="center" width="160px" show-overflow-tooltip>
+					<template #default="scope">
+						<el-image style="width: 100px; height: 100px" :src="imageBaseUrl + scope.row.picUrl" fit="cover" />
+					</template>
+				</el-table-column>
+				<!--          <el-table-column prop="sliderPicUrls" label="商品轮播图"  show-overflow-tooltip/>-->
+				<el-table-column prop="sort" label="排序字段" show-overflow-tooltip />
+				<el-table-column prop="status" label="上架状态" show-overflow-tooltip>
+					<template #default="scope">
+						<dict-tag :options="spu_status" :value="scope.row.status"></dict-tag>
+					</template>
+				</el-table-column>
+				<el-table-column prop="price" label="商品价格，单位使用：分" show-overflow-tooltip />
+				<el-table-column prop="marketPrice" label="市场价，单位使用：分" show-overflow-tooltip />
+				<el-table-column prop="costPrice" label="成本价，单位： 分" show-overflow-tooltip />
+				<el-table-column prop="stock" label="库存" show-overflow-tooltip />
+				<el-table-column prop="giveIntegral" label="赠送积分" show-overflow-tooltip />
+				<el-table-column prop="salesCount" label="商品销量" show-overflow-tooltip />
+				<el-table-column prop="virtualSalesCount" label="虚拟销量" show-overflow-tooltip />
+				<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip />
+				<el-table-column label="操作" width="150" fixed="right">
+					<template #default="scope">
+						<el-button icon="edit-pen" text type="primary" v-auth="'canteen_canteenSpu_edit'" @click="formDialogRef.openDialog(scope.row.id)"
+							>编辑</el-button
+						>
+						<el-button icon="delete" text type="primary" v-auth="'canteen_canteenSpu_del'" @click="handleDelete([scope.row.id])">删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+		</div>
 
-    <!-- 编辑、新增  -->
-    <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
-
-  </div>
+		<!-- 编辑、新增  -->
+		<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
+	</div>
 </template>
 
 <script setup lang="ts" name="systemCanteenSpu">
-import { BasicTableProps, useTable } from "/@/hooks/table";
-import { fetchList, delObjs } from "/@/api/canteen/canteenSpu";
-import { useMessage, useMessageBox } from "/@/hooks/message";
+import { BasicTableProps, useTable } from '/@/hooks/table';
+import { fetchList, delObjs } from '/@/api/canteen/canteenSpu';
+import { useMessage, useMessageBox } from '/@/hooks/message';
 import { useDict } from '/@/hooks/dict';
 
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import('./form.vue'));
 // 定义查询字典
 
-const { spu_status } = useDict('spu_status')
+const { spu_status } = useDict('spu_status');
 // 定义变量内容
-const formDialogRef = ref()
+const formDialogRef = ref();
 // 搜索变量
-const queryRef = ref()
-const showSearch = ref(true)
+const queryRef = ref();
+const showSearch = ref(true);
 // 多选变量
-const selectObjs = ref([]) as any
-const multiple = ref(true)
+const selectObjs = ref([]) as any;
+const multiple = ref(true);
+const imageBaseUrl = import.meta.env.VITE_IMAGE_BASE_PATH;
+console.log('aa', imageBaseUrl);
 
 const state: BasicTableProps = reactive<BasicTableProps>({
-  queryForm: {},
-  pageList: fetchList
-})
+	queryForm: {},
+	pageList: fetchList,
+});
 
 //  table hook
-const {
-  getDataList,
-  currentChangeHandle,
-  sizeChangeHandle,
-  sortChangeHandle,
-  downBlobFile,
-	tableStyle
-} = useTable(state)
+const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state);
 
 // 清空搜索条件
 const resetQuery = () => {
-  // 清空搜索条件
-  queryRef.value?.resetFields()
-  // 清空多选
-  selectObjs.value = []
-  getDataList()
-}
+	// 清空搜索条件
+	queryRef.value?.resetFields();
+	// 清空多选
+	selectObjs.value = [];
+	getDataList();
+};
 
 // 导出excel
 const exportExcel = () => {
-  downBlobFile('/canteen/canteenSpu/export', Object.assign(state.queryForm, { ids: selectObjs }), 'canteenSpu.xlsx')
-}
+	downBlobFile('/canteen/canteenSpu/export', Object.assign(state.queryForm, { ids: selectObjs }), 'canteenSpu.xlsx');
+};
 
 // 多选事件
 const selectionChangHandle = (objs: { id: string }[]) => {
-  selectObjs.value = objs.map(({ id }) => id);
-  multiple.value = !objs.length;
+	selectObjs.value = objs.map(({ id }) => id);
+	multiple.value = !objs.length;
 };
 
 // 删除操作
 const handleDelete = async (ids: string[]) => {
-  try {
-    await useMessageBox().confirm('此操作将永久删除');
-  } catch {
-    return;
-  }
+	try {
+		await useMessageBox().confirm('此操作将永久删除');
+	} catch {
+		return;
+	}
 
-  try {
-    await delObjs(ids);
-    getDataList();
-    useMessage().success('删除成功');
-  } catch (err: any) {
-    useMessage().error(err.msg);
-  }
+	try {
+		await delObjs(ids);
+		getDataList();
+		useMessage().success('删除成功');
+	} catch (err: any) {
+		useMessage().error(err.msg);
+	}
 };
 </script>