diff --git a/.env.development b/.env.development
index e8d4295..4998990 100644
--- a/.env.development
+++ b/.env.development
@@ -11,5 +11,8 @@ ENV = 'development'
 VITE_ADMIN_PROXY_PATH = http://localhost:9999
 #VITE_ADMIN_PROXY_PATH = http://192.168.110.156:9999
 
+# 图片访问基础地址
+VITE_IMAGE_BASE_PATH = http://123.156.230.15:8089/api
+
 # 代码生成服务地址
 VITE_GEN_PROXY_PATH = http://192.168.110.156:5003
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/canteenDailyMenu/form.vue b/src/views/canteen/canteenDailyMenu/form.vue
index 49985be..c980747 100644
--- a/src/views/canteen/canteenDailyMenu/form.vue
+++ b/src/views/canteen/canteenDailyMenu/form.vue
@@ -1,159 +1,161 @@
 <template>
-  <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible"
-             :close-on-click-modal="false" draggable>
-    <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
-<!--      <el-row :gutter="24">-->
+	<el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable>
+		<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
+			<el-form-item label="日期" prop="hourType">
+				<p>{{ form.startTime }}</p>
+			</el-form-item>
 
-        <el-form-item label="日期" prop="hourType">
-          <p>{{ form.startTime }}</p>
-        </el-form-item>
+			<el-form-item label="时间" prop="hourType">
+				<p v-if="form.hourType == 1">早餐</p>
+				<p v-else-if="form.hourType == 2">午餐</p>
+				<p v-else-if="form.hourType == 3">晚餐</p>
+				<p v-else>未知类型</p>
+			</el-form-item>
 
-        <el-form-item label="时间" prop="hourType">
-          <p v-if="form.hourType == 1">早餐</p>
-          <p v-else-if="form.hourType == 2">午餐</p>
-          <p v-else-if="form.hourType == 3">晚餐</p>
-          <p v-else>未知类型</p>
-        </el-form-item>
+			<el-form-item label="菜品" prop="spuId">
+				<el-select v-model="spuIds" placeholder="请选择菜品" multiple>
+					<el-option v-for="item in foodData" :key="item.id" :label="item.name" :value="item.id" />
+				</el-select>
+			</el-form-item>
 
-        <el-form-item label="菜品" prop="spuId">
-          <el-select v-model="spuIds" placeholder="请选择菜品" multiple>
-            <el-option v-for="item in foodData" :key="item.id" :label="item.name" :value="item.id"/>
-          </el-select>
-        </el-form-item>
+			<!-- <el-col :span="12" class="mb20">
+				<el-form-item label="归属时间 1早餐 2午餐 3晚餐" prop="hourType">
+					<el-input v-model="form.hourType" placeholder="请输入归属时间 1早餐 2午餐 3晚餐" />
+				</el-form-item>
+			</el-col> -->
+		</el-form>
 
-<!--        <el-col :span="12" class="mb20">
-          <el-form-item label="归属时间 1早餐 2午餐 3晚餐" prop="hourType">
-            <el-input v-model="form.hourType" placeholder="请输入归属时间 1早餐 2午餐 3晚餐"/>
-          </el-form-item>
-        </el-col>-->
-<!--      </el-row>-->
-    </el-form>
-    <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="visible = false">取消</el-button>
-          <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
-        </span>
-    </template>
-  </el-dialog>
+		<h1 style="font-size: 16px; font-weight: bold; color: #000000; margin: 20px 0">预览图</h1>
+		<div style="width: 100%; display: flex; flex-wrap: wrap">
+			<img style="width: 250px; height: 200px; margin: 10px" v-for="(image, index) in spuImages" :key="index" :src="image" />
+		</div>
+
+		<template #footer>
+			<span class="dialog-footer">
+				<el-button @click="visible = false">取消</el-button>
+				<el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
+			</span>
+		</template>
+	</el-dialog>
 </template>
 
 <script setup lang="ts" name="CanteenDailyMenuDialog">
-import {useDict} from '/@/hooks/dict';
-import {useMessage} from "/@/hooks/message";
-import {getObj, addObj, putObj} from '/@/api/canteen/canteenDailyMenu'
-import {selectFoodList} from "/@/api/canteen/canteenDailyMenu";
-import {rule} from '/@/utils/validate';
+import { useDict } from '/@/hooks/dict';
+import { useMessage } from '/@/hooks/message';
+import { getObj, addObj, putObj } from '/@/api/canteen/canteenDailyMenu';
+import { selectFoodList } from '/@/api/canteen/canteenDailyMenu';
+import { rule } from '/@/utils/validate';
 
 const emit = defineEmits(['refresh']);
 
 //业务变量
-const foodData = ref([])
-const spuIds = ref([])
-const spuImages = ref([])
+const foodData = ref<any>([]);
+const spuIds = ref([]);
+const spuImages = ref<string[]>([]);
 // 定义变量内容
 const dataFormRef = ref();
-const visible = ref(false)
-const loading = ref(false)
+const visible = ref(false);
+const loading = ref(false);
 // 定义字典
-const {daily_menu} = useDict('daily_menu')
+const { daily_menu } = useDict('daily_menu');
+const imageBaseUrl = import.meta.env.VITE_IMAGE_BASE_PATH;
 
 // 提交表单数据
-const form = reactive({
-  id: '',
-  startTime: '',
-  spuId: '',
-  hourType: '',
-  merchantId: '',
-  deptId: '',
-  spuIds:''
+const form = reactive<any>({
+	id: '',
+	startTime: '',
+	spuId: '',
+	hourType: '',
+	merchantId: '',
+	deptId: '',
+	spuIds: '',
 });
 
 // 定义校验规则
-const dataRules = ref({})
+const dataRules = ref({});
 
 // 打开弹窗
-const openDialog = (id: string,time?: string, hourType?: number,merchantId?:number) => {
-  visible.value = true
-  form.id = ''
+const openDialog = (id: string, time?: string, hourType?: number, merchantId?: number) => {
+	visible.value = true;
+	form.id = '';
 
-  // 重置表单数据
-  nextTick(() => {
-    dataFormRef.value?.resetFields();
-  });
-
-  // 获取canteenDailyMenu信息
-  if (id) {
-    form.id = id
-    getcanteenDailyMenuData(id)
-  }
-  if (time) {
-    form.startTime = time
-  }
-  if (hourType) {
-    form.hourType = hourType
-  }
-  form.merchantId = merchantId
+	// 重置表单数据
+	nextTick(() => {
+		dataFormRef.value?.resetFields();
+	});
 
+	// 获取canteenDailyMenu信息
+	if (id) {
+		form.id = id;
+		getcanteenDailyMenuData(id);
+	}
+	if (time) {
+		form.startTime = time;
+	}
+	if (hourType) {
+		form.hourType = hourType;
+	}
+	form.merchantId = merchantId;
 };
 watch(spuIds, (newValue, oldValue) => {
-  spuImages.value = []
-  form.spuIds = newValue
-  //更新值
-  if (newValue) {
-    const newValues = newValue.toString().split(',')
-    for (let index = 0; index < newValues.length; index++) {
-      const data = newValues[index]
-      foodData.value.forEach((sData) => {
-        if (sData.id?.toString() === data) {
-          spuImages.value.push(sData.picUrl?.toString())
-        }
-      })
-    }
-  }
-})
+	spuImages.value = [];
+	form.spuIds = newValue;
+	//更新值
+	if (newValue) {
+		const newValues = newValue.toString().split(',');
+		for (let index = 0; index < newValues.length; index++) {
+			const data = newValues[index];
+			foodData.value.forEach((sData: any) => {
+				if (sData.id?.toString() === data) {
+					spuImages.value.push(imageBaseUrl + sData.picUrl?.toString());
+				}
+			});
+		}
+	}
+});
 // 提交
 const onSubmit = async () => {
-  if (spuIds.value.length<=0){
-    useMessage().warning("请选择菜品")
-    return
-  }
-  const valid = await dataFormRef.value.validate().catch(() => {
-  });
-  if (!valid) return false;
+	if (spuIds.value.length <= 0) {
+		useMessage().warning('请选择菜品');
+		return;
+	}
+	const valid = await dataFormRef.value.validate().catch(() => {});
+	if (!valid) return false;
 
-  try {
-    loading.value = true;
-    form.id ? await putObj(form) : await addObj(form);
-    useMessage().success(form.id ? '修改成功' : '添加成功');
-    visible.value = false;
-    emit('refresh');
-  } catch (err: any) {
-    useMessage().error(err.msg);
-  } finally {
-    loading.value = false;
-  }
+	try {
+		loading.value = true;
+		form.id ? await putObj(form) : await addObj(form);
+		useMessage().success(form.id ? '修改成功' : '添加成功');
+		visible.value = false;
+		emit('refresh');
+	} catch (err: any) {
+		useMessage().error(err.msg);
+	} finally {
+		loading.value = false;
+	}
 };
 
-
 // 初始化表单数据
 const getcanteenDailyMenuData = (id: string) => {
-  // 获取数据
-  loading.value = true
-  getObj(id).then((res: any) => {
-    Object.assign(form, res.data)
-  }).finally(() => {
-    loading.value = false
-  })
+	// 获取数据
+	loading.value = true;
+	getObj(id)
+		.then((res: any) => {
+			Object.assign(form, res.data);
+		})
+		.finally(() => {
+			loading.value = false;
+		});
 };
 
 // 暴露变量
 defineExpose({
-  openDialog
+	openDialog,
 });
 /** 初始化 **/
 onMounted(async () => {
-  // 获取菜品列表
-  let axiosResponse = await selectFoodList();
-  foodData.value = axiosResponse.data
-})
+	// 获取菜品列表
+	let axiosResponse = await selectFoodList();
+	foodData.value = axiosResponse.data;
+});
 </script>
diff --git a/src/views/canteen/canteenSpu/index.vue b/src/views/canteen/canteenSpu/index.vue
index 42225af..0698924 100644
--- a/src/views/canteen/canteenSpu/index.vue
+++ b/src/views/canteen/canteenSpu/index.vue
@@ -1,149 +1,153 @@
 <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;
 
 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>