烽火台皮肤操作二次确认

src/locales/zh-CN.json

@@ -195,6 +195,7 @@
 	"Skin html required": "皮肤代码必填",
 	"Skin name": "皮肤名",
 	"Skin html": "皮肤代码",
+	"Click save will overwrite and apply immediately": "即将覆盖【{name} | {skin}】并立刻生效，确定吗？",
 	"Copy skin success": "复制皮肤成功",
 	"Copy url success": "复制链接成功",
 	"Copy skin": "复制皮肤",

src/themes/light/editor.scss

@@ -243,12 +243,23 @@
 
 .px-skin-editor-dialog {
 	.wrapper {
+		padding: 10px;
 		height: 100%;
 		display: flex;
 		flex-direction: column;
 
-		.env-select {
-			align-self: flex-end;
+		.header{
+			display: flex;
+			align-items: center;
+
+			.env-select{
+			}
+
+			.px-project-name{
+				margin-left: 10px;
+				font-weight: bold;
+				color: $--color-danger;
+			}
 		}
 
 		.operate-wrapper > :not(*:first-child) {
@@ -290,6 +301,32 @@
 		}
 
 	}
+
+	.dialog-footer{
+		.save-button{
+			margin-left: 10px;
+		}
+	}
+}
+
+.px-publish-view {
+	display: flex;
+	flex-direction: column;
+
+	.px-project-name{
+		font-weight: bold;
+		color: $--color-danger;
+	}
+
+	.operate-bar{
+		display: flex;
+
+	}
+
+	.name {
+		display: inline-block;
+		width: 200px;
+	}
 }
 
 .meta-search-dialog {

src/utils/common.js

@@ -333,7 +333,7 @@ export function getCmpProps(type) {
 				inherits.unshift(_.cloneDeep(typeProps));
 			}
 			let result = Object.assign({}, ...inherits);
-			cmpPropsCache[type] = result;
+			cmpProps = cmpPropsCache[type] = result;
 			delete result.base;
 			delete result.groupName;
 		}

src/views/Editor/Inspector/ScriptsTab.vue

 <template>
   <div class="zero-inspector-props-form" v-if="activeComponent.uuid">
     <el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden">
-      <el-form ref="form" size="mini" :model="form" label-width="80px" @submit.native.prevent>
+      <el-form ref="form" size="mini" :model="form" label-width="100px" @submit.native.prevent>
         <el-collapse accordion v-if="activeComponent.scripts && activeComponent.scripts.length">
           <template v-for="(script, index) in activeComponent.scripts">
             <el-collapse-item :title="getScriptName(script.script)" :key="script + index">

src/views/Editor/dialogs/PublishView.vue

 <template>
-	<div class="config">
+	<div class="px-publish-view">
+		<span class="px-project-name">
+			{{pxProjectName}}
+		</span>
+		<div class="operate-bar">
 			<el-select size="small" v-model="env" placeholder="请选择环境" @change="changeEnv">
 				<el-option v-for="(item, key) in pxEnvs" :key="key" :label="item" :value="key"></el-option>
 			</el-select>
@@ -14,7 +18,7 @@
 				clearable
 			>
 				<el-option
-				v-for="item in skinList"
+					v-for="item in skins"
 					:key="item.id"
 					:label="`${item.type !== 0 ? item.name : '首页'}(${item.id})`"
 					:value="item.id"
@@ -26,8 +30,12 @@
 				</el-select>
 				<el-input v-model="name" size="small" class="name" placeholder="请输入皮肤名称"></el-input>
 			</div>&nbsp;
-		<el-button type="primary" size="small" @click="clickSave">保存</el-button>
-		<el-button v-if="skinId" type="primary" size="small" @click="getUrl">获取链接</el-button>
+			<el-popconfirm v-if="skinId" class="save-button" @onConfirm="clickSave" placement="top"
+			               :title="$t('Click save will overwrite and apply immediately', {name: this.pxProjectName, skin: skinName})">
+				<el-button slot="reference" type="primary" size="small">{{ $t("Save") }}</el-button>
+			</el-popconfirm>
+			<el-button v-if="skinId" size="small" @click="getUrl">获取链接</el-button>
+		</div>
 	</div>
 </template>
 
@@ -59,12 +67,16 @@
 				tplType: 0,
 
 				skinId: "",
-				skinList: [],
+				pxProjectName: "",
+				skins: [],
 				pxPid: "",
 				name: ""
 			};
 		},
 		computed: {
+			skinName(){
+				return this.skins.find(skin => skin.id === this.skinId).name;
+			},
 			...mapGetters(["options"])
 		},
 		methods: {
@@ -90,7 +102,7 @@
 
 				if (!pxPid) {
 					this.$message({
-						message: `请先配置${env}环境下的projectId`,
+						message: this.$t('Please config projectID', {env}),
 						type: "error"
 					});
 					return;
@@ -98,7 +110,8 @@
 				try {
 					const data = await getProjectSkins(pxPid, env);
 					if (data.success !== false) {
-						this.skinList = data;
+						this.pxProjectName = data.name;
+						this.skins = data.skins;
 					} else {
 						// 如果是测试环境，ticket过期，则重新获取ticket
 						if (env === "test" && data.notLogin) {
@@ -108,26 +121,28 @@
 						} else if (env === "prod" && data.notLogin) {
 							localStorage.setItem("prod_ticket", "");
 							this.$message({
-								message: "线上tickct失效，请联系管理员修改",
+								message: this.$t('Online ticket is invalid'),
 								type: "info"
 							});
-							this.skinList = [];
+							this.pxProjectName = '';
+							this.skins = [];
 						} else {
 							this.$message({
 								message: data.message,
 								type: "error"
 							});
-							this.skinList = [];
+							this.pxProjectName = '';
+							this.skins = [];
 						}
 					}
 				} catch (e) {
-					this.skinList = [];
+					this.pxProjectName = '';
+					this.skins = [];
 					throw new Error(e.message);
 				}
 			},
 			hasIndex() {
-				const {skinList} = this;
-				return skinList.some(v => v.type === "1");
+				return this.skins.some(v => v.type === "1");
 			},
 			async clickSave() {
 				const {
@@ -138,7 +153,6 @@
 					pxPid,
 					tpl,
 					name,
-					skinList
 				} = this;
 				if (operate === 1 && !skinId) {
 					this.$message({message: "请选择修改的皮肤", type: "warning"});
@@ -182,9 +196,9 @@
 			},
 			/** 获取访问链接 */
 			getUrl() {
-				const {env, skinId, pxPid, skinList} = this;
+				const {env, skinId, pxPid, skins} = this;
 				let type = 1;
-				skinList.forEach(skin => {
+				skins.forEach(skin => {
 					if (skin.id === skinId) {
 						type = skin.type;
 					}
@@ -206,9 +220,9 @@
 				}
 			},
 			/*getTpl(id) {
-				const {skinList} = this;
+				const {skins} = this;
 				let tpl = "";
-				skinList.forEach(skin => {
+				skins.forEach(skin => {
 					if (skin.id === id) {
 						tpl = skin.html;
 					}
@@ -219,12 +233,5 @@
 	};
 </script>
 <style lang="scss">
-	.config {
-		display: flex;
 
-		.name {
-			display: inline-block;
-			width: 200px;
-		}
-	}
 </style>

src/views/Editor/dialogs/PxSkinEditor.vue

@@ -28,7 +28,10 @@
 			</div>
 			<div>
 				<el-button size="mini" @click="clickClose">{{ $t("Close") }}</el-button>
-				<el-button type="primary" size="mini" @click="clickSave">{{ $t("Save") }}</el-button>
+				<el-popconfirm v-if="skin" class="save-button" @onConfirm="clickSave" placement="top"
+				               :title="$t('Click save will overwrite and apply immediately', {name: this.pxProjectName, skin: skin.name})">
+					<el-button slot="reference" type="primary" size="mini">{{ $t("Save") }}</el-button>
+				</el-popconfirm>
 			</div>
 		</div>
 	</el-dialog>
@@ -46,6 +49,7 @@
 		data() {
 			return {
 				visible: false,
+				pxProjectName: '',
 				skin: null,
 				operate: 0,
 				rules: {
@@ -59,7 +63,8 @@
 			}
 		},
 		methods: {
-			async edit(operate, skin) {
+			async edit(operate, skin, pxProjectName) {
+				this.pxProjectName = pxProjectName;
 				this.operate = operate;
 				this.skin = clonePureObj(skin);
 				if (!this.skin.html) {
@@ -68,9 +73,9 @@
 				this.visible = true;
 			},
 			clickSave() {
-				if(!this.skin.html){
+				if (!this.skin.html) {
 					this.$message(this.$t('Skin html required'));
-				}else{
+				} else {
 					this.$refs.form.validate(async (valid) => {
 						if (valid) {
 							try {

src/views/Editor/dialogs/PxSkinEditorDialog.vue

@@ -7,9 +7,12 @@
 	           custom-class="flex-dialog px-skin-editor-dialog"
 	>
 		<div class="wrapper">
+			<div class="header">
 				<el-select class="env-select" size="mini" v-model="env" @change="changeEnv">
 					<el-option v-for="(item, key) in pxEnvs" :key="key" :label="item" :value="key"></el-option>
 				</el-select>
+				<span class="px-project-name">{{pxProjectName}}</span>
+			</div>
 			<el-table class="mock-table" :data="skins" height="100%" stripe size="mini">
 				<el-table-column
 					prop="id"
@@ -93,6 +96,7 @@
 				visible: false,
 				pxEnvs: this.$t("pxEnvs"),
 				tplTypes: this.$t("tplTypes"),
+				pxProjectName: '',
 				skins: [],
 				env: 'dev',
 			}
@@ -114,11 +118,11 @@
 				if (type === 0 && this.hasIndex()) {
 					this.$message({message: this.$t('Index page exists'), type: "warning"});
 				} else {
-					this.$refs.pxSkinEditor.edit(0, {type: (type + 1).toString()});
+					this.$refs.pxSkinEditor.edit(0, {type: (type + 1).toString()}, this.pxProjectName);
 				}
 			},
 			editItem(skin) {
-				this.$refs.pxSkinEditor.edit(1, skin);
+				this.$refs.pxSkinEditor.edit(1, skin, this.pxProjectName);
 			},
 			copyUrl(skin) {
 				const {id, type} = skin;
@@ -175,7 +179,8 @@
 				try {
 					const data = await getProjectSkins(pxPid, env);
 					if (data.success !== false) {
-						this.skins = data;
+						this.pxProjectName = data.name;
+						this.skins = data.skins;
 					} else {
 						// 如果是测试环境，ticket过期，则重新获取ticket
 						if (env === "test" && data.notLogin) {
@@ -185,19 +190,23 @@
 						} else if (env === "prod" && data.notLogin) {
 							localStorage.setItem("prod_ticket", "");
 							this.$message({
-								message: this.$('Online ticket is invalid'),
+								message: this.$t('Online ticket is invalid'),
 								type: "info"
 							});
+							this.pxProjectName = '';
 							this.skins = [];
 						} else {
 							this.$message({
 								message: data.message,
 								type: "error"
 							});
+							this.pxProjectName = '';
 							this.skins = [];
 						}
 					}
 				} catch (e) {
+					this.pxProjectName = '';
+					this.skins = [];
 					throw new Error(e.message);
 				}
 			},