整合业务模块

src/App.vue

@@ -20,7 +20,7 @@ import other from '/@/utils/other';
 import { Local, Session } from '/@/utils/storage';
 import mittBus from '/@/utils/mitt';
 import setIntroduction from '/@/utils/setIconfont';
-import logoMini from '/@/assets/logo-mini.svg';
+import logoMini from '/@/assets/logo.png';
 
 // 引入组件
 const LockScreen = defineAsyncComponent(() => import('/@/layout/lockScreen/index.vue'));
@@ -74,7 +74,7 @@ const getGlobalI18n = computed(() => {
 let link: any = document.querySelector("link[rel*='icon']") || document.createElement("link");
 link.type = "image/x-icon";
 link.rel = "shortcut icon";
-link.href = themeConfig.value.logoMini||logoMini;
+link.href = themeConfig.logoMini||logoMini;
 document.getElementsByTagName("head")[0].appendChild(link);
 
 // 设置初始化，防止刷新时恢复默认

src/api/service/apply/index.ts

@@ -0,0 +1,50 @@
+import request from '/@/utils/request';
+import { pixelUrlHost } from '/@/api/baseUrlHost';
+
+/**
+ * （不建议写成 request.post(xxx)，因为这样 post 时，无法 params 与 data 同时传参）
+ * 注意在写get请求时，参数是params，而不是data，要标注好
+ * 
+ * 登录api接口集合
+ * @method getServicesList 获取应用服务列表
+ * @method getApplyDetail 获取应用服务详情
+ * @method updateApply 更新应用服务
+ */
+
+export function applyApi() {
+	return {
+		getServicesList: (params: object) => {
+			return request({
+				url: pixelUrlHost + '/paServices',
+				method: 'get',
+				params,
+			});
+		},
+		getApplyDetail: (id: Number) => {
+			return request({
+				url: pixelUrlHost + `/paServices/${id}`,
+				method: 'get',
+			});
+		},
+		saveApply: (data: object) => {
+			return request({
+				url: pixelUrlHost + '/paServices',
+				method: 'post',
+				data,
+			})
+		},
+		updateApply: (data: object) => {
+			return request({
+				url: pixelUrlHost + '/paServices',
+				method: 'put',
+				data,
+			})
+		},
+		deleteApply: (id: Number) => {
+			return request({
+				url: pixelUrlHost + `/paServices/${id}`,
+				method: 'delete',
+			});
+		},
+	};
+}

src/i18n/lang/en.ts

@@ -11,7 +11,7 @@ export default {
 		UserManage: 'UserManage',
 		systemDic: 'systemDic',
 		article: 'article',
-		apply: 'apply',
+		applyDetail: 'applyDetail',
 		message: 'message',
 		order: 'order',
 		articleContent: 'articleContent',
@@ -100,6 +100,16 @@ export default {
 		layoutLinkView: 'LinkView',
 		layoutIframeViewOne: 'IframeViewOne',
 		layoutIframeViewTwo: 'IframeViewTwo',
+		/**
+		 * 业务模块start
+		 * @name 业务模块
+		 */ 
+		
+		apply: 'apply',
+
+		/**
+		 * 业务模块end
+		 */ 
 	},
 	staticRoutes: {
 		signIn: 'signIn',

src/i18n/lang/zh-cn.ts

@@ -11,7 +11,7 @@ export default {
 		systemDept: '部门管理',
 		systemDic: '字典管理',
 		article: '文章管理',
-		apply: '应用管理',
+		applyDetail: '应用服务详情',
 		carousel: '轮播图管理',
 		clients: '客户管理',
 		photos: '图片管理',
@@ -103,6 +103,16 @@ export default {
 		layoutLinkView: '外链',
 		layoutIframeViewOne: '内嵌 iframe1',
 		layoutIframeViewTwo: '内嵌 iframe2',
+		/**
+		 * 业务模块start
+		 * @name 业务模块
+		 */ 
+		
+		apply: '应用管理',
+
+		/**
+		 * 业务模块end
+		 */ 
 	},
 	staticRoutes: {
 		signIn: '登录',

src/i18n/lang/zh-tw.ts

@@ -11,7 +11,7 @@ export default {
 		systemDept: '部門管理',
 		systemDic: '字典管理',
 		article: '文章管理',
-		apply: '应用管理',
+		applyDetail: '應用服務詳情',
 		message: '聯言管理',
 		articleContent: '文章詳情',
 		order: '訂單管理',
@@ -100,6 +100,16 @@ export default {
 		layoutLinkView: '外鏈',
 		layoutIframeViewOne: '内嵌 iframe1',
 		layoutIframeViewTwo: '内嵌 iframe2',
+		/**
+		 * 业务模块start
+		 * @name 业务模块
+		 */ 
+		
+		apply: '應用管理',
+
+		/**
+		 * 业务模块end
+		 */ 
 	},
 	staticRoutes: {
 		signIn: '登入',

src/layout/logo/index.vue

@@ -12,7 +12,7 @@
 import { computed } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
-import logoMini from '/@/assets/logo-mini.svg';
+import logoMini from '/@/assets/logo.png';
 
 // 定义变量内容
 const storesThemeConfig = useThemeConfig();

src/router/route.ts

@@ -251,23 +251,51 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 					}
 				]
 			},
+			/**
+			 * 
+			 * 业务模块start
+			 * @name 业务模块
+			 * 应用服务路由——/apply
+			 * 
+			 */ 
 			// 应用管理
-			// {
+			{
-			// 	path: '/apply',
+				path: '/apply',
-			// 	name: 'apply',
+				name: 'apply',
-			// 	component: () => import('/@/views/apply/index.vue'),
+				component: () => import('/@/views/service/apply/index.vue'),
-			// 	meta: {
+				meta: {
-			// 		title: 'message.router.apply',
+					title: 'message.router.apply',
-			// 		isLink: '',
+					isLink: '',
-			// 		isHide: false,
+					isHide: false,
-			// 		isKeepAlive: true,
+					isKeepAlive: true,
-			// 		isAffix: false,
+					isAffix: false,
-			// 		isIframe: false,
+					isIframe: false,
-			// 		roles: ['admin', 'common'],
+					roles: ['admin', 'common'],
-			// 		icon: 'iconfont icon-crew_feature',
+					icon: 'iconfont icon-crew_feature',
-			// 	},
+				},
-			// 	children: []
+				children: [
-			// },
+					// {
+					// 	path: '/apply/detail',
+					// 	name: 'applyDetail',
+					// 	component: () => import('/@/views/service/apply/detail.vue'),
+					// 	meta: {
+					// 		title: 'message.router.applyDetail',
+					// 		isLink: '',
+					// 		isHide: true,
+					// 		isKeepAlive: true,
+					// 		isAffix: false,
+					// 		isIframe: false,
+					// 		roles: ['admin', 'common'],
+					// 		icon: 'ele-Document',
+					// 	},
+					// },
+				]
+			},
+
+			/**
+			 * 业务模块end
+			 */
+
 			// 轮播图管理
 			{
 				path: '/carousel',

src/stores/themeConfig.ts

@@ -78,7 +78,7 @@ export const useThemeConfig = defineStore('themeConfig', {
 			 * 界面显示
 			 */
 			// 是否开启侧边栏 Logo
-			isShowLogo: false,
+			isShowLogo: true,
 			// 初始化变量，用于 el-scrollbar 的高度更新，请勿删除
 			isShowLogoChange: false,
 			// 是否开启 Breadcrumb，强制经典、横向布局不显示
@@ -102,13 +102,13 @@ export const useThemeConfig = defineStore('themeConfig', {
 			// 是否开启色弱模式
 			isInvert: false,
 			// 是否开启水印
-			isWartermark: true,
+			isWartermark: false,
 			// 水印文案
-			wartermarkText: 'vue-next-admin',
+			wartermarkText: 'pixel.ai制图后台',
 			// 页脚版权信息内容
-			globalFootTitleMsg: '深圳市 xxx 公司版权所有',
+			globalFootTitleMsg: '广州市 xxx 公司版权所有',
 			// 页脚tip
-			globalFootTipMsg: 'vue-next-admin，Made by lyt with ❤️',
+			globalFootTipMsg: 'ai创作，专享您的制图~~~',
 
 			/**
 			 * 其它设置
@@ -141,17 +141,17 @@ export const useThemeConfig = defineStore('themeConfig', {
 			 * 全局网站标题 / 副标题
 			 */
 			// 网站主标题（菜单导航、浏览器当前网页标题）
-			globalTitle: 'vue-next-admin',
+			globalTitle: 'pixel.ai制图后台',
 			// 网站副标题（登录页顶部文字）
-			globalViceTitle: 'vueNextAdmin',
+			globalViceTitle: 'pixel.ai',
 			// 网站副标题（登录页顶部文字）
-			globalViceTitleMsg: '专注、免费、开源、维护、解疑',
+			globalViceTitleMsg: '多种类、多趣味、多质图',
 			// 默认初始语言，可选值"<zh-cn|en|zh-tw>"，默认 zh-cn
 			globalI18n: 'zh-cn',
 			// 默认全局组件大小，可选值"<large|'default'|small>"，默认 'large'
 			globalComponentSize: 'large',
 			// 网站logo
-			logoMini: '/@/assets/logo-mini.svg',
+			logoMini: '/@/assets/logo.png',
 		},
 	}),
 	actions: {

src/utils/request.ts

@@ -44,6 +44,8 @@ service.interceptors.response.use(
 				ElMessageBox.alert('你已被登出，请重新登录', '提示', {})
 					.then(() => {})
 					.catch(() => {});
+			}else if(res.code === 502 && res.errorMsg){
+				return res;
 			}
 			return Promise.reject(service.interceptors.response);
 		} else {

src/views/carousel/index.vue

@@ -24,22 +24,23 @@
 				</el-button> -->
 			<!-- </div> -->
 			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%;" class="custom-table">
-				<el-table-column prop="name" label="轮播图名称"  show-overflow-tooltip width="210px"></el-table-column>
+				<el-table-column prop="name" label="轮播图名称" width="150px" show-overflow-tooltip></el-table-column>
-				<el-table-column  label="素材"  width="350px" align="center">
+				<el-table-column  label="素材" align="center">
 					<template #default="scope">
-						<el-image  :src="encodeURI(viteUrl+scope.row.path)" />
+						<el-image :src="encodeURI(viteUrl+scope.row.path)" lazy
+						preview-teleported="true" :preview-src-list="[encodeURI(viteUrl+scope.row.path)]"/>
 						<!-- <a :href="jpgFormatter(scope.row)">{{ jpgFormatter(scope.row) }}</a> -->
 						 <!-- <el-button @click="jpgJump(scope.row)" text type="primary">{{ jpgFormatter(scope.row) }}</el-button> -->
 					</template>
 				</el-table-column>
-				<el-table-column  label="跳转地址" show-overflow-tooltip width="350px" align="center">
+				<el-table-column  label="跳转地址" show-overflow-tooltip align="center">
 					<template #default="scope">
 						<!-- <a :href="jpgFormatter(scope.row)">{{ jpgFormatter(scope.row) }}</a> -->
 						 <el-button @click="jpgJump(scope.row)" text type="primary">{{ scope.row.url }}</el-button>
 					</template>
 				</el-table-column>
-				<el-table-column prop="orderNum" label="排序号" sortable show-overflow-tooltip width="150px" align="center"></el-table-column>		
+				<el-table-column prop="orderNum" label="排序号" sortable show-overflow-tooltip align="center"></el-table-column>		
-				<el-table-column prop="createtime" label="创建时间" :formatter="dateFormatter" show-overflow-tooltip width="250px" align="center"></el-table-column>
+				<el-table-column prop="createtime" label="创建时间" :formatter="dateFormatter" show-overflow-tooltip align="center"></el-table-column>
 				<el-table-column label="操作" width="300" align="center">
 					<template #default="scope">
 						<el-button size="small" text type="primary" @click="switchDrawer(scope.row.id,1)">
@@ -90,7 +91,7 @@
 							<el-icon><Plus /></el-icon>
 							<template #file="{ file }">
 							<div>
-								<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+								<img class="el-upload-list__item-thumbnail" :src="encodeURI(file.url)" alt="" />
 								<span class="el-upload-list__item-actions">
 								<span
 									class="el-upload-list__item-preview"
@@ -231,38 +232,18 @@ const viteUrl = import.meta.env.VITE_API_URL;
 
 // 图片链接格式化
 const jpgFormatter = (row: any) => {
-	console.log("44444444444",row);
 	let newPath;
 	if (row?.data) {
 		newPath = row.data.path.replaceAll('\\', '/')	
-	console.log("11111111111",newPath);	
-
 	} else {
-		newPath = row.path.replaceAll('\\\\', '/')	
+		newPath = row.path.replaceAll('\\\\', '/')		
-	console.log("333333333333",newPath);	
-
 	}
-	newPath = newPath.includes('http://localhost:8888/') ? newPath : viteUrl + newPath
+	newPath = newPath.includes('http://localhost:8888/') ? newPath : encodeURI(viteUrl + newPath)
-	console.log("22222222222222222",newPath);
   	return `${newPath}`;
-		// window.open(newPath);
 };
 
 //轮播图跳转
 const jpgJump = (row:any) =>{
-	// console.log("44444444444",row);
-	// let newPath;
-	// if (row?.data) {
-	// 	newPath = row.data.path.replaceAll('\\', '/')	
-	// console.log("11111111111",newPath);	
-
-	// } else {
-	// 	newPath = row.path.replaceAll('\\\\', '/')	
-	// console.log("333333333333",newPath);	
-
-	// }
-	// newPath = newPath.includes('http://localhost:8888/') ? newPath : viteUrl + newPath
-	// console.log("22222222222222222",newPath);
 	window.open(row.url);
 };
 
@@ -328,10 +309,7 @@ const disabled = ref(false)
 const handleChange: UploadProps['onChange'] = async (file: uploadFile, uploadFiles) => {
 	state.formData.loading = true;
 	if (file.raw.type === 'image/png' || file.raw.type === 'image/jpeg' || file.raw.type === 'image/jpg') {
-		console.log("handleChange1",file);
-		console.log("handleChange2",uploadFiles);
 		state.formData.fileList = uploadFiles;
-		console.log("handleChange",state.formData.fileList);
 		uploadDisabled.value = true;
 		try {
 			const formdata = new FormData();
@@ -408,10 +386,6 @@ const deleteBanner = (id: number) => {
 			state.tableData.loading = false;
 		}
 	}).catch(() => {
-      ElMessage({
-        type: 'info',
-        message: '删除取消',
-      })
     })
 } 
 

src/views/login/component/account.vue

@@ -119,7 +119,7 @@ const onSignIn = async () => {
 				signInSuccess(isNoPower);
 			}
 		}else{
-			ElMessage.error(res.message);
+			ElMessage.error(res.errorMsg||res.message);
 		}
 	} catch (error) {
 		ElMessage.error('账号或密码错误！');

src/views/login/index.vue

@@ -47,7 +47,7 @@ import { defineAsyncComponent, onMounted, reactive, computed } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import { NextLoading } from '/@/utils/loading';
-import logoMini from '/@/assets/logo-mini.svg';
+import logoMini from '/@/assets/logo.png';
 import loginMain from '/@/assets/login-main.svg';
 import loginBg from '/@/assets/login-bg.svg';
 

src/views/message/index.vue

@@ -28,6 +28,7 @@
 				<el-table-column label="操作" width="200">
 					<template #default="scope">
 						<el-button size="small" text type="primary" @click="toShowDetail(scope.row.id)">查看详情</el-button>
+						<el-button size="small" text type="primary">回复</el-button>
 					</template>
 				</el-table-column>
 			</el-table>

src/views/photos/index.vue

@@ -46,9 +46,7 @@
 				<el-table-column prop="name" label="图片名称"  show-overflow-tooltip width="180px"></el-table-column>
 				<el-table-column  label="素材"  width="300px" align="center">
 					<template #default="scope">
-						<el-image :src="jpgFormatter(scope.row)" />
+						<el-image lazy :src="jpgFormatter(scope.row)" preview-teleported="true" :preview-src-list="[jpgFormatter(scope.row)]"/>
-						<!-- <a :href="jpgFormatter(scope.row)">{{ jpgFormatter(scope.row) }}</a> -->
-						 <!-- <el-button @click="jpgJump(scope.row)" text type="primary">{{ jpgFormatter(scope.row) }}</el-button> -->
 					</template>
 				</el-table-column>
 				<el-table-column prop="moduleName" label="模块"  show-overflow-tooltip width="200px" align="center"></el-table-column>		
@@ -305,19 +303,14 @@ const viteUrl = import.meta.env.VITE_API_URL;
 
 // 图片链接格式化
 const jpgFormatter = (row: any) => {
-	// console.log("44444444444",row);
 	let newPath;
 	if (row?.data) {
 		newPath = row.data.path.replaceAll('\\', '/')	
-	// console.log("11111111111",newPath);	
-
 	} else {
 		newPath = row.path.replaceAll('\\\\', '/')	
-	// console.log("333333333333",newPath);	
-
 	}
-	newPath = newPath.includes('http://8.138.171.103/') ? newPath : 'http://8.138.171.103/' + newPath
+	newPath = newPath.includes('http://8.138.171.103/') ? newPath : encodeURI(viteUrl + newPath)
-	// console.log("22222222222222222",newPath);
+	
   	return `${newPath}`;
 }
 
@@ -461,19 +454,13 @@ const handleRemove = (file: UploadFile, uploadFiles) => {
 //下载图片
 const download = async(row:any) =>{
 	state.formData.loading = true;
-	// console.log("44444444444",row);
 	let newPath;
 	if (row?.data) {
 		newPath = row.data.path.replaceAll('\\', '/')	
-	// console.log("11111111111",newPath);	
-
 	} else {
 		newPath = row.path.replaceAll('\\\\', '/')	
-	// console.log("333333333333",newPath);	
-
 	}
 	newPath = newPath.includes('http://localhost:8888/') ? newPath : viteUrl + newPath
-	// console.log("22222222222222222",newPath);
 	try{
 		await downloadPhoto(newPath);
 

src/views/service/apply/detail.vue

@@ -0,0 +1,96 @@
+<template>
+	<div class="layout-pd system-dept-container">
+		<el-card class="apply-detail" v-loading="state.loading" shadow="hover">
+			<div class="top-box">
+				<div class="box-left">
+					<div class="tbl-left">
+						<img :src="viteUrl+(state.data.icon||defaultIcon)" :alt="state.data.name" />
+					</div>
+					<div class="tbl-right">
+						<div class="title">{{state.data.name}}</div>
+						<div class="tips">{{state.data.tips}}</div>
+					</div>
+				</div>
+				<div class="box-right">
+
+				</div>
+			</div>
+			<div class="bottom-box"></div>
+		</el-card>
+	</div>
+</template>
+
+<script setup lang="ts" name="applyDetail">
+import { onMounted, reactive } from 'vue';
+import { applyApi } from '/@/api/service/apply';
+import { useRoute } from 'vue-router';
+import { ElMessage } from 'element-plus';
+
+// 封面基本路径
+const viteUrl = import.meta.env.VITE_API_URL;
+const defaultIcon:string = 'static/pixel/home/default-work.png';
+
+// 引入 api 请求接口
+const aplApi = applyApi();
+
+// 获取模块名称和标签名称
+const route = useRoute();
+const id:any = route.query.id;
+
+const state = reactive<any>({
+	data: {},
+	loading: false,
+})
+
+// 获取文章详情-根据id
+const getApplyDetailById = async(id:number) => {
+	try {
+		state.loading = true;
+		let res = await aplApi.getApplyDetail(id);
+		if(res?.success) {
+			state.data = res.data;
+		}
+	} catch (error) {
+		ElMessage.error('获取应用服务详情失败');
+	} finally {
+	    state.loading = false;
+	}
+}
+
+onMounted(() => {
+	getApplyDetailById(id);
+})
+
+</script>
+
+<style scoped lang="scss">
+.system-dept-container {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	.apply-detail{
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		.top-box{
+			display: flex;
+			margin: 0 20px;
+			background-color: aqua;
+			flex-wrap: wrap;
+			.box-left{
+				display: flex;
+				min-width: 60%;
+				background-color: aquamarine;
+				img{
+					width: 120px;
+					height: 120px;
+				}
+			}
+			.box-right{
+				min-width: 40%;
+				background-color: bisque;
+			}
+		}
+	}
+}
+</style>

src/views/service/apply/dialog.vue

@@ -0,0 +1,319 @@
+<template>
+	<div class="system-menu-dialog-container">
+		<el-dialog  @close="closeDialog" :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
+			<el-form v-loading="state.loading" ref="applyDialogFormRef" :model="state.data" :rules="state.rules" size="default" label-width="100px">
+				<el-row :gutter="35">
+					<el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="10" class="mb20">
+						<el-form-item label="图标："  class="iconImg">
+							<!-- 上传文件 -->
+							<el-upload ref="uploadRef" class="h100 personal-user-left-upload" action="#" list-type="picture-card" :file-list="state.fileArray"
+								:auto-upload="false" :limit="1" :class="{ hide: state.coverHide }" @change="handleUploadChange" accept='image/*'>
+								<template #default>
+									<el-icon><Plus /></el-icon>
+								</template>
+								<template #file="{ file }">
+									<div>
+										<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+										<span class="el-upload-list__item-actions">
+											<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
+												<el-icon><zoom-in /></el-icon>
+											</span>
+											<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
+												<el-icon><Delete /></el-icon>
+											</span>
+										</span>
+									</div>
+								</template>
+							</el-upload>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						<el-form-item label="应用名称：" prop="name">
+							<el-input v-model="state.data.name" placeholder="请输入应用名称" clearable></el-input>
+						</el-form-item>
+						<el-form-item label="接口名：" prop="api">
+							<el-input v-model="state.data.api" placeholder="请输入接口名" clearable></el-input>
+						</el-form-item>
+						<el-form-item label="提示词：" prop="tips">
+							<el-input v-model="state.data.tips" placeholder="请输入提示词" clearable></el-input>
+						</el-form-item>
+					</el-col>
+				</el-row>
+				<el-row :gutter="35">
+					<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="8" class="mb20">
+						<el-form-item label="价格：" prop="price">
+							<el-input-number v-model="state.data.price" :min="0" controls-position="right">
+								<template #prefix><span>￥</span></template>
+							</el-input-number>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20">
+						<el-form-item label="排序号：" prop="position">
+							<el-input-number v-model="state.data.position" :min="1" controls-position="right" />
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="8" class="mb20">
+						<el-form-item label="类型：" prop="type">
+							<el-select size="default" v-model="state.data.type" placeholder="请选择应用类型" clearable>
+                                <el-option v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.id"></el-option>
+                            </el-select>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20">
+						<el-form-item label="是否上架：" prop="publish">
+							<el-switch v-model="state.data.publish" />
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16" class="mb20" v-if="state.data.options&&state.data.options.length>0">
+						<el-form-item label="选项：">
+							<div class="tags-option">
+								<el-tag v-for="option in state.data.options" :key="option.id" :disable-transitions="false">{{ option.optionName }}</el-tag>
+							</div>
+						</el-form-item>
+					</el-col>
+				</el-row>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="onCancel" size="default">取 消</el-button>
+                    <el-button size="danger" plain v-if="state.dialog.type === 'edit'" @click="deleteApply">删 除</el-button>
+					<el-button type="primary" plain @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
+				</span>
+			</template>
+		</el-dialog>
+        <!-- 封面预览弹窗 -->
+        <el-dialog v-model="dialogVisible">
+            <img width="100%" w-full :src="dialogImageUrl" alt="预览" />
+        </el-dialog>
+	</div>
+</template>
+
+<script setup lang="ts" name="applyDialog">
+import { ElMessage, ElMessageBox, UploadFile, UploadFiles } from 'element-plus';
+import { applyApi } from '/@/api/service/apply';
+import { articleApi } from '/@/api/article';
+import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue';
+import { reactive, ref } from 'vue';
+
+// 定义子组件向父组件传值/事件
+const emit = defineEmits(['refresh']);
+
+// 定义变量内容
+const applyDialogFormRef = ref();
+const state:any = reactive({
+	data: {
+	},
+	dialog: {
+		isShowDialog: false,
+		type: '',
+		title: '',
+		submitTxt: '',
+	},
+	loading: false,
+    rules: {
+		name: { required: true, message: '请输入应用名称', trigger: 'blur' },
+		api: { required: true, message: '请输入接口名', trigger: 'blur' },
+		tips: { required: true, message: '请输入提示词', trigger: 'blur' },
+		price: { required: true, message: '请输入价格', trigger: 'blur' },
+		position: { required: true, message: '请输入排序号', trigger: 'blur' },
+        type: { required: true, message: '请选择应用类型', trigger: 'blur' },
+	},
+    fileArray:[],// 编辑进来时，如果已经上传了图片，则保存图片地址
+	coverFile: {},
+	coverHide: false
+});
+// 类型列表
+const typeList = ref([
+	{id: '0',name: '图生图'},
+	{id: '1',name: '文生图'},
+	{id: '2',name: '选项+图片'},
+	{id: '3',name: '选项+文字'},
+	{id: '4',name: '换装'},
+]);
+
+// 引入 api 请求接口
+const aplApi = applyApi();
+const artApi = articleApi();
+
+// 图标上传禁用
+const disabled = ref(false);
+// 图标弹窗
+const dialogImageUrl = ref('');
+const dialogVisible = ref(false);
+// 基本路径
+const viteUrl = import.meta.env.VITE_API_URL;
+// upload/Attachment/20241207/0fb6372ed5cd4fb9be68315301093f57.png
+const defaultIcon:string = 'static/pixel/home/default-work.png';
+
+const uploadRef = ref();
+
+// 图标图片更改
+const handleUploadChange = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+	if(uploadFile.raw.type.includes('image')){
+		const file:any = uploadFile.raw;
+		state.coverFile = file;
+		state.coverHide = true;
+	}else{
+		ElMessage.error('请上传图片文件！');
+		uploadRef.value.clearFiles();
+	}
+}
+
+// 图标删除
+const handleRemove = (file?: UploadFile) => {
+  state.coverFile = {};
+  uploadRef.value.clearFiles();
+  state.coverHide = false;
+}
+
+// 图标预览
+const handlePictureCardPreview = (file: UploadFile) => {
+  dialogImageUrl.value = file.url!
+  dialogVisible.value = true
+}
+
+// 获取详情
+const getData = (id: number) => {
+	try {
+		state.loading = true;
+		aplApi.getApplyDetail(id).then((res: any) => {
+			if(!res?.success){
+				ElMessage.error('服务详情获取失败！');
+				return;
+			}
+			state.data = res.data;
+			state.data.publish = res.data.publish === 1;
+			const never:any = [{name:res.data.name,url:encodeURI(viteUrl+(res.data.icon||defaultIcon))}];
+			state.fileArray = never;
+		})
+	} catch (error) {
+		ElMessage.error('服务详情获取失败！');
+	} finally {
+		state.loading = false;
+	}
+}
+
+// 打开弹窗
+const openDialog = (type: string, row?: any) => {
+	if (type === 'edit') {
+		getData(row.id);
+		state.dialog.title = '修改应用';
+		state.dialog.submitTxt = '修 改';
+        state.coverHide = true;
+	} else {
+		state.dialog.title = '新增应用';
+		state.dialog.submitTxt = '新 增';
+	}
+	state.dialog.type = type;
+	state.dialog.isShowDialog = true;
+};
+// 关闭弹窗
+const closeDialog = () => {
+    setTimeout(() => {
+		state.dialog.isShowDialog = false;
+        state.data = {};
+        state.fileArray = [];
+        handleRemove();
+	}, 300)
+};
+// 取消
+const onCancel = () => {
+	closeDialog();
+};
+// 删除应用服务
+const deleteApply = () => {
+	ElMessageBox.confirm(`确定要删除${state.data.name}吗?`, '提示', {
+		confirmButtonText: '确定',
+		cancelButtonText: '取消',
+		type: 'warning',
+	})
+	.then(async() => {
+		try {
+			state.loading = true;
+			let res = await aplApi.deleteApply(state.data.id);
+			if(res?.success){ 
+				ElMessage.success(`${state.data.name}删除成功！`);
+				closeDialog(); // 关闭弹窗
+				emit('refresh');
+			} else ElMessage.error(`${state.data.name}删除失败！`);
+		} catch(e) {
+			ElMessage.error('处理失败！');
+		} finally {
+			state.loading = false;
+		}
+	})
+}
+// 上传文件
+const uploadFile = async(file: any,form: any) => {
+	try {
+		state.loading = true;
+		const formdata = new FormData();
+		formdata.append('file', file);
+		let res = await artApi.uploadFile(formdata);
+		if(res?.success){
+			form.icon = res.data.path;
+			realSubmit(form);
+		}else{
+			ElMessage.error('封面上传失败！');
+		}
+	} catch (error) {
+		state.loading = false;
+		ElMessage.error('封面上传失败！');
+	}
+}
+// 提交
+const onSubmit = () => {
+	applyDialogFormRef.value.validate((valid: boolean) => {
+        if (valid && state.coverHide){
+			const form = {...state.data,publish:state.data.publish ? 1 : 0};
+			
+			if(state.coverFile.type === undefined){
+				realSubmit(form);
+			}else{
+				uploadFile(state.coverFile,form);
+			}
+        }else{
+            ElMessage.error('请完善信息！');
+		}
+    });
+};
+
+// 应用服务上传-真正的上传操作
+const realSubmit = async(form: any) => {
+	try {
+		state.loading = true;
+		let res = state.dialog.type === 'add' ? await aplApi.saveApply(form) : await aplApi.updateApply(form);
+		if(res?.success){
+			ElMessage.success('应用服务保存成功！');
+			closeDialog(); // 关闭弹窗
+			emit('refresh');
+		}else{
+			ElMessage.error('应用服务保存失败！');
+		}
+	} catch (error) {
+		ElMessage.error('处理失败！');
+	} finally {
+		state.loading = false;
+	}
+}
+
+// 暴露变量
+defineExpose({
+	openDialog,
+});
+</script>
+
+<style scoped lang="scss">
+.iconImg :deep(.hide .el-upload--picture-card) {
+    display: none;
+}
+.tags-option{
+	width: 100%;
+	height: 90px;
+	overflow-y: scroll;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(50px,100px) );
+	grid-gap: 0.4em 0.8em;
+	// grid-auto-flow: column dense;
+}
+</style>

src/views/service/apply/index.vue

@@ -0,0 +1,397 @@
+<template>
+    <div class="system-dept-container layout-pd">
+		<el-card
+			shadow="hover"
+			class="filtering-list br-top-no"
+			v-loading="state.tableData.loading"
+			element-loading-text="加载中..."
+			:class="{ 'min-h-360': state.tableData.data.length <= 0 }"
+		>
+			<div class="system-dept-search mb15">
+                应用名称：<el-input size="default" placeholder="请输入应用名称" v-model="state.tableData.param.name" 
+				class="ml10" style="max-width: 180px" clearable></el-input>
+				<el-button @click="getTableData" size="default" type="primary" class="ml10">
+					<el-icon>
+						<ele-Search />
+					</el-icon>
+					查询
+				</el-button>
+                <el-button @click="reset" size="default" type="primary" class="ml10">
+					<el-icon>
+						<ele-RefreshRight />
+					</el-icon>
+					重置
+				</el-button>
+				<el-button size="default" type="success" class="ml10" @click="addApply">
+					<el-icon>
+						<ele-FolderAdd />
+					</el-icon>
+					新增应用
+				</el-button>
+			</div>
+            <div v-for="(val, key) in state.filtering" :key="key" ref="dlRefs" class="filtering-list-flex">
+				<div class="filtering-list-title">{{ val.title }}</div>
+				<div class="filtering-list-item" :style="{ height: val.isMore ? 'auto' : '50px' }">
+					<span class="span" :class="v.active ? 'dd-active' : ''" v-for="(v, k) in val.children" :key="k" @click="onSelItem(val, v)">
+						{{ v.label }}
+					</span>
+					<div class="dd-more" v-if="val.isShowMore" @click="val.isMore = !val.isMore">
+						<span>{{ val.isMore ? '收起' : '展开' }}</span>
+						<i :class="val.isMore ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
+					</div>
+				</div>
+			</div>
+			<div class="flex-warp mt15 mb15" v-if="state.tableData.data.length > 0">
+				<el-row :gutter="15">
+					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4" class="mb15" v-for="(v, k) in state.tableData.data" :key="k" @click="onTableItemClick(v)">
+						<el-card class="flex-warp-item" shadow="hover" @click="toShowDetail(v)" :title="`￥ ${v.price}钻石`">
+							<div class="card-item-left">
+								<img :src="encodeURI(viteUrl + (v.icon||defaultIcon))" :alt="v.name">
+							</div>
+							<div class="card-item-right">
+								<div class="cir-one">{{ v.name }}</div>
+								<div class="cir-two">{{ v.tips || 'pixel.ai制图功能，开始魔法~~' }}</div>
+								<div class="cir-three">
+									<el-tag type="info" round>{{ state.filtering[0].children[Number(v.type)+1].label }}</el-tag>
+									<div>{{ getDate(v.createtime) }}</div>
+								</div>
+							</div>
+						</el-card>
+					</el-col>
+				</el-row>
+			</div>
+			<div v-else class="filtering-no-data">
+				<div class="no-data-box">
+					<i class="el-icon-search"></i>
+					<div class="no-txt">暂无数据</div>
+				</div>
+			</div>
+			<template v-if="state.tableData.data.length > 0">
+				<div class="bottom-pagination">
+					<el-pagination
+						style="text-align: right"
+						background
+						@size-change="onHandleSizeChange"
+						@current-change="onHandleCurrentChange"
+						:page-sizes="[16, 32, 64]"
+						:current-page="state.tableData.param.current"
+						:page-size="state.tableData.param.size"
+						layout="total, sizes, prev, pager, next, jumper"
+						:total="state.tableData.total"
+					>
+					</el-pagination>
+					<!-- <div class="bottom-tips">tips：右键应用 修改/删除</div> -->
+				</div>
+			</template>
+        </el-card>
+		<ApplyDialog ref="applyDialogRef" @refresh="getTableData()" />
+    </div>
+</template>
+
+<script setup lang="ts" name="apply">
+import { ElMessage } from 'element-plus';
+import { applyApi } from '/@/api/service/apply';
+import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
+
+// 基本路径
+const viteUrl = import.meta.env.VITE_API_URL;
+// upload/Attachment/20241207/0fb6372ed5cd4fb9be68315301093f57.png
+const defaultIcon:string = 'static/pixel/home/default-work.png';
+
+// 引入弹窗
+const ApplyDialog = defineAsyncComponent(() => import('/@/views/service/apply/dialog.vue'));
+const applyDialogRef = ref();
+
+// 表格数据
+const state: any = reactive({
+	// 导航数据
+	filtering : [
+		{
+			title: '类型',
+			isMore: false,
+			isShowMore: false,
+			id: 0,
+			children: [
+				{id: '-1',label: '全部',active: true,},
+				{id: '0',label: '图生图',active: false,},
+				{id: '1',label: '文生图',active: false,},
+				{id: '2',label: '选项+图片',active: false,},
+				{id: '3',label: '选项+文字',active: false,},
+				{id: '4',label: '换装',active: false,},
+			],
+		},
+		{
+			title: '状态',
+			isMore: false,
+			isShowMore: false,
+			id: 1,
+			children: [
+				{id: '-1',label: '全部',active: true,},
+				{id: '0',label: '上架',active: false,},
+				{id: '1',label: '下架',active: false,}
+			],
+		}
+	],
+	tableData: {
+		data: [],
+		total: 0,
+		loading: false,
+		param: {
+			name: '',
+			current: 1,
+			size: 16,
+		},
+	},
+});
+
+// 引入 api 请求接口
+const aplApi = applyApi();
+
+// 过滤当前选中的数据
+const onSelItem = (val: FilteringRowType, v: FilteringChilType) => {
+	val.children.map((v: FilteringChilType) => (v.active = false));
+	v.active = true;
+	state.tableData.loading = true;
+	setTimeout(() => {
+		state.tableData.loading = false;
+	}, 500);
+};
+// 当前列表项点击
+const onTableItemClick = (v: FilterListType) => {
+	
+};
+
+// 时间格式化
+const getDate = (val: string) => {
+	const date = new Date(val);
+	return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+}
+
+// 重置
+const reset = () =>{
+	state.tableData.param = {
+		name: '',
+		current: 1,
+		size: 16,
+	}
+	getTableData();
+}
+
+// 获取表格数据
+const getTableData = async() => {
+	try {
+		state.tableData.loading = true;
+		let res = await aplApi.getServicesList(state.tableData.param);
+		if(res?.success){
+			state.tableData.data = res.data.records;
+			state.tableData.total = res.data.total;
+		}else{
+			ElMessage.error('应用服务获取失败！');
+		}
+	} catch (error) {
+	} finally {
+		state.tableData.loading = false;
+	}
+};
+
+// 分页改变
+const onHandleSizeChange = (val: number) => {
+	state.tableData.param.size = val;
+	// getTableData();
+};
+
+// 分页改变
+const onHandleCurrentChange = (val: number) => {
+	state.tableData.param.current = val;
+	// getTableData();
+};
+
+// 新增应用
+const addApply = () => {
+	applyDialogRef.value.openDialog('add');
+}
+
+// 查看详情-编辑
+const toShowDetail = (row: any) => {
+	applyDialogRef.value.openDialog('edit',row);
+	// router.push({ path: '/apply/detail', query: { id:id } });
+}
+
+onMounted(() => {
+	getTableData();
+})
+</script>
+
+<style scoped lang="scss">
+.system-dept-container {
+	display: flex;
+	min-height: 92vh;
+	.filtering-list {
+		flex: 1;
+		overflow: hidden;
+		border-bottom: none !important;
+		.filtering-list-flex {
+			&:last-of-type {
+				.filtering-list-item {
+					border-bottom: none !important;
+				}
+			}
+			.filtering-list-title {
+				float: left;
+				width: 64px;
+				font-weight: 700;
+				position: relative;
+				color: #909399;
+				margin: 15px 0;
+				&:after {
+					content: '';
+					position: absolute;
+					border: 1px solid #909399;
+					border-width: 0 1px 1px 0;
+					width: 4px;
+					height: 4px;
+					transform: rotate(-45deg) translateY(-50%);
+					right: 10px;
+					top: 50%;
+				}
+			}
+			.filtering-list-item {
+				border-bottom: 1px dotted var(--next-border-color-light);
+				margin-left: 64px;
+				overflow: hidden;
+				position: relative;
+				.span {
+					color: #8d8d91;
+					font-size: 14px;
+					float: left;
+					padding: 0 15px;
+					margin: 15px 0;
+					&:hover {
+						color: var(--el-color-primary);
+						cursor: pointer;
+					}
+				}
+				.dd-active {
+					color: var(--el-color-primary);
+				}
+				.dd-more {
+					font-size: 12px;
+					position: absolute;
+					right: 0;
+					top: 16px;
+					color: #a5a5a5;
+					&:hover {
+						cursor: pointer;
+						color: #8d8d91;
+					}
+				}
+			}
+		}
+	}
+	.br-top-no {
+		border-top: none;
+		.flex-warp {
+			flex: 1;
+			display: flex;
+			flex-wrap: wrap;
+			align-content: flex-start;
+			margin: 0 -5px;
+			.el-row {
+				width: 101%;
+			}
+			.flex-warp-item {
+				padding: 5px;
+				height: 120px;
+				border-radius: 12px;
+				cursor: pointer;
+				&:hover{
+					margin-top: -10px;
+				}
+
+				.card-item-left{
+					width: 80px;
+					height: 80px;
+					img{
+						width: 100%;
+						height: 100%;
+					}
+					margin-right: 14px;
+				}
+				.card-item-right{
+					height: 100%;
+					flex: 1;
+					display: flex;
+					flex-direction: column;
+					overflow: hidden;
+					white-space: nowrap;
+					.cir-one{
+						font-size: 1.3em;
+						font-weight: bold;
+						color: rgba($color: #000000, $alpha: 0.8);
+						margin-bottom: 0.6em;
+						text-overflow: ellipsis;
+						overflow: hidden;
+					}
+					.cir-two{
+						font-size: 1.15em;
+						color: #8f969c;
+						margin-bottom: 0.6em;
+						text-overflow: ellipsis;
+						overflow: hidden;
+					}
+					.cir-three{
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						color: #8f969c;
+						div{
+							text-overflow: ellipsis;
+							overflow: hidden;
+						}
+					}
+				}
+			}
+			:deep(.el-card__body) {
+				flex-direction: row;
+				align-items: center;
+				padding-top: 8px;
+				padding-bottom: 8px;
+			}
+		}
+		:deep(.el-card__body) {
+			height: 100%;
+			// width: 100%;
+			display: flex;
+			flex-direction: column;
+			.filtering-no-data {
+				display: flex;
+				height: 100%;
+				.no-data-box {
+					color: #cccccc;
+					margin: auto;
+					i {
+						font-size: 70px;
+					}
+					.no-txt {
+						font-size: 14px;
+						text-align: center;
+						margin-top: 15px;
+					}
+				}
+			}
+		}
+	}
+	.min-h-360 {
+		// height: 360px;
+	}
+}
+.bottom-pagination{
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	.bottom-tips{
+		margin-right: 10px;
+		color: #8d8d91;
+	}
+}
+</style>

src/views/website/index.vue

@@ -301,7 +301,8 @@
                     <div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.logoSetting') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-upload ref="uploadRef" action="#" :limit="1" :auto-upload="false" @change="onWartermarkLogoUpload" :on-preview="handlePreview"
-						:file-list="getThemeConfig.logoMini?[{name:getThemeConfig.globalTitle,url:getThemeConfig.logoMini}]:[]" accept='image/*' :on-remove="handleRemove">
+						:file-list="getThemeConfig.logoMini?[{name:getThemeConfig.globalTitle,url:getThemeConfig.logoMini}]:
+						[]" accept='image/*' :on-remove="handleRemove">
     						<template #default>
 								<el-button v-if="!getThemeConfig.logoMini" class="logo-picture" type="text">上传文件</el-button>
     						</template>
@@ -475,7 +476,7 @@ import commonFunction from '/@/utils/commonFunction';
 import other from '/@/utils/other';
 import mittBus from '/@/utils/mitt';
 import { articleApi } from '/@/api/article';
-import logoMini from '/@/assets/logo-mini.svg';
+import logoMini from '/@/assets/logo.png';
 
 const state = reactive({
     isMobile: false,
@@ -643,8 +644,8 @@ const handlePreview: UploadProps['onPreview'] = (uploadFile) =>{
 };
 const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
 	// onWartermarkLogoMiniInput('/src/assets/logo-mini.svg');
-	onWartermarkLogoMiniInput('');
 	uploadRef.value.clearFiles();
+	onWartermarkLogoMiniInput('');
 }
 // 封面基本路径
 const viteUrl = import.meta.env.VITE_API_URL;
@@ -722,6 +723,8 @@ const onCopyConfigClick = () => {
 // 一键恢复默认
 const onResetConfigClick = () => {
 	Local.clear();
+	onWartermarkLogoMiniInput('');
+	uploadRef.value.clearFiles();
 	window.location.reload();
 	// @ts-ignore
 	Local.set('version', __NEXT_VERSION__);

vite.config.ts

@@ -15,6 +15,9 @@ const alias: Record<string, string> = {
 	'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
 };
 
+// 请求映射后端路径
+const url:string = 'http://8.138.171.103';
+
 const viteConfig = defineConfig((mode: ConfigEnv) => {
 	const env = loadEnv(mode.mode, process.cwd());
 	
@@ -31,7 +34,7 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
 			hmr: true,
 			proxy: {
 				'/vueAdminApi': {
-					target: 'http://8.138.171.103:8081',
+					target: url+':8081',
 					// target: 'http://8.138.175.106:8090',
 					// target: 'https://www.ymsc.org.cn/vueAdminApi',
 					ws: true,
@@ -40,7 +43,7 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
 					rewrite: (path) => path.replace(/^\/vueAdminApi/, ''),
 				},
 				'/pixelApi': {
-					target: 'http://8.138.171.103:8082',
+					target: url+'/pixelApi',
 					ws: true,
 					secure: false,
 					changeOrigin: true,
@@ -56,13 +59,27 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
 					rewrite: (path) => path.replace(/^\/vueAdmin/, ''),
 				},
 				'/upload': {
-					target: 'http://8.138.171.103',
+					target: url,
 					// target: 'http://8.138.175.106',
 					// target: 'https://www.ymsc.org.cn/upload',
 					secure: false,
 					ws: true,
 					changeOrigin: true,
 				},
+				'/aiupload': {
+					target: url,
+					// target: 'http://8.138.175.106',
+					// target: 'https://www.ymsc.org.cn/upload',
+					secure: false,
+					ws: true,
+					changeOrigin: true,
+				},
+				'/static': {
+					target: url,
+					secure: false,
+					ws: true,
+					changeOrigin: true,
+				},
 				'/gitee': {
 					target: 'https://gitee.com',
 					ws: true,