完成项目备注功能

package.json

@@ -17,6 +17,7 @@
 		"element-ui": "^2.13.1",
 		"indexdbwrapper": "^1.0.4",
 		"jszip": "^3.2.2",
+		"markdown-it": "^10.0.0",
 		"moment": "^2.24.0",
 		"monaco-editor": "^0.20.0",
 		"monaco-editor-webpack-plugin": "^1.9.0",

src/api/project.js

@@ -147,3 +147,17 @@ export async function updateOperators(id, operators) {
 		errMessage: 'Failed to update operator',
 	})
 }
+
+/**
+ * 修改备注
+ * @param id
+ * @param remark
+ * @return {Promise<*|any|>}
+ */
+export async function updateRemark(id, remark) {
+	return await fetchApi('/api/project/updateRemark', {
+		params: { id, remark },
+		method: 'post',
+		errMessage: 'Failed to update remark',
+	})
+}

src/locales/zh-CN.json

@@ -74,6 +74,7 @@
 	"No projects": "无项目",
 	"Create": "创建",
 	"Project details": "项目详情",
+	"Project remark": "项目备注",
 	"Project does not exist": "项目不存在",
 	"Project name": "项目名",
 	"Data mapping": "数据映射",
@@ -165,10 +166,12 @@
 	"Are you sure to discard the local modification": "确定丢弃本地修改吗？",
 	"Input view name": "输入视图名",
 	"Invalid view name": "无效的视图名",
-	"Unsaved version found locally": "本地发现了未保存保本，请选择版本打开",
+	"Unsaved version found locally, can not open from history": "本地发现了未保存版本，不能从历史打开",
+	"Unsaved version found locally, choose one": "本地发现了未保存版本，请选择版本打开",
 	"Local Version": "本地版本",
 	"Remote Version": "远程版本",
 	"Confirm to exit the editor": "确定退出编辑器吗?",
+	"Modified, save before exit": "内容已修改，要保存后关闭吗?",
 	"Confirm to publish": "确定发布吗?",
 	"Are you sure to delete this behavior?": "确定删除这个的行为吗",
 	"Are you sure to delete this process?": "确定删除这个的过程吗",

src/store/modules/project.js

@@ -67,6 +67,7 @@ export const projectStore = {
 		operator: '',
 		operators: '',
 		update_time: '',
+		remark: '',
 		data: {
 			options: {},
 			views: [],
@@ -105,13 +106,14 @@ export const projectStore = {
 			}
 		},
 		updateProject(state, project) {
-			const {id, name, creator, data, operators, operator, update_time} = project;
+			const {id, name, creator, data, operators, operator, update_time, remark} = project;
 			state.id = id;
 			state.name = name;
 			state.creator = creator;
 			state.operator = operator;
 			state.operators = operators || creator; //兼容未保存的本地存储
 			state.update_time = update_time;
+			state.remark = remark;
 
 			const localData = state.data;
 			if (data) {
@@ -150,6 +152,9 @@ export const projectStore = {
 			state.mockServeEnabled = getMockServeEnabled(id);
 			updateMock(localData.mock);
 		},
+		updateRemark(state, remark) {
+			state.remark = remark;
+		},
 		updateAssetDep(state) {
 			let assets = state.data.assets;
 			let explicitDepAssets;
@@ -571,6 +576,9 @@ export const projectStore = {
 				data: JSON.stringify(newData),
 			};
 		},
+		projectRemark(state) {
+			return state.remark;
+		},
 		behaviorEditor(state) {
 			return state.data.options.behaviorEditor;
 		},
@@ -716,6 +724,7 @@ export const projectStore = {
 				const remoteProject = await projectApi.fetchOne(projectID, false);
 				const project = JSON.parse(json.data);
 				project.operators = remoteProject.operators;
+				project.remark = remoteProject.remark;
 				commit('updateProject', project);
 				commit('setDirty', true);
 			}
@@ -998,7 +1007,11 @@ export const projectStore = {
 			localStorage.setItem('mock-enabled-' + state.id, JSON.stringify(enabled));
 			commit('setMockServeEnabled', enabled);
 			return enabled;
-		}
+		},
+		async saveRemark({state, commit}, {remark}) {
+			await projectApi.updateRemark(state.id, remark);
+			commit('updateRemark', remark);
+		},
 	},
 };
 

src/themes/light/base.scss

@@ -13,6 +13,12 @@ html, body, #app {
 	font-family: Arial, sans-serif;
 }
 
+.gap-5{
+	*:not(:first-child){
+		margin-left: 5px;
+	}
+}
+
 .modal-layer{
 	position: absolute;
 	top: 0;

src/themes/light/behavior.scss

@@ -24,12 +24,6 @@ $dock-pin-width: 9px;
 		display: flex;
 		justify-content: space-between;
 		padding: 10px;
-
-		&>div{
-			*:not(:first-child){
-				margin-left: 5px;
-			}
-		}
 	}
 }
 

src/themes/light/editor.scss

@@ -31,10 +31,6 @@
 		.right-part {
 			color: $--color-text-regular;
 			line-height: 15px;
-
-			.el-button {
-				padding: 2px;
-			}
 		}
 	}
 
@@ -542,3 +538,21 @@
 .local-change-marker-class {
 	background-color: rgba(64, 166, 255, 0.5);
 }
+
+.project-remark-dialog{
+	.wrapper{
+		height: 100%;
+
+		.editor{
+			height: 100%;
+		}
+
+		.project-scrollbar{
+			height: 100%;
+
+			.project-remark{
+				padding: 5px;
+			}
+		}
+	}
+}

src/views/Editor.vue

@@ -153,7 +153,7 @@
 			async loadProject(forceRemote) {
 				const {projectID, project, dataUrl} = this.$route.params;
 				if (!forceRemote && await this.localVersionExist(projectID)) {
-					/*this.$confirm(this.$t('Unsaved version found locally'), this.$t('Alert'), {
+					/*this.$confirm(this.$t('Unsaved version found locally, choose one'), this.$t('Alert'), {
 						showClose: false,
 						closeOnClickModal: false,
 						closeOnPressEscape: false,

src/views/Editor/ToolBar.vue

@@ -4,19 +4,22 @@
 		<div class="right-part">
 			<span>
 				[{{project.name}}]
-				<el-button size="mini" circle icon="el-icon-edit" @click="editProjectName"/>
+				<el-button size="mini" class="micro" circle icon="el-icon-edit" @click="editProjectName"/>
+				<el-button size="mini" class="micro" circle icon="el-icon-notebook-2" @click="editRemark"/>
 			</span>
 		</div>
+		<project-remark-dialog ref="projectRemarkDialog"/>
 	</div>
 </template>
 
 <script>
 	import {mapState, mapActions, mapMutations} from 'vuex'
 	import SampleMenu from "../../components/SampleMenu";
+	import ProjectRemarkDialog from "./dialogs/ProjectRemarkDialog";
 
 	export default {
 		name: "ToolBar",
-		components: {SampleMenu},
+		components: {ProjectRemarkDialog, SampleMenu},
 		data() {
 			return {}
 		},
@@ -63,20 +66,23 @@
 				}).catch(() => {
 				});
 			},
+			editRemark() {
+				this.$refs.projectRemarkDialog.show();
+			},
 			onKeyPress(e) {
 				if (e.key === 'z' && (e.ctrlKey || e.metaKey) && (!e.shiftKey)) {
 					//快捷键ctrl+z执行撤销
 					e.preventDefault();
 					//是否可执行撤销
-					if(!(!this.project.operateStack.length || this.project.operateStack.length === this.project.stackIndex + 1)){
+					if (!(!this.project.operateStack.length || this.project.operateStack.length === this.project.stackIndex + 1)) {
 						this.clickMenu("undo");
 					}
 					return false;
-				}else if (e.key === 'z' && (e.ctrlKey || e.metaKey) && (e.shiftKey)) {
+				} else if (e.key === 'z' && (e.ctrlKey || e.metaKey) && (e.shiftKey)) {
 					//快捷键ctrl+shift+z执行重做
 					e.preventDefault();
 					//是否可以执行重做
-					if(!(this.project.stackIndex === 0)){
+					if (!(this.project.stackIndex === 0)) {
 						this.clickMenu("redo");
 					}
 					return false;

src/views/Editor/dialogs/ProjectRemarkDialog.vue

+<template>
+	<el-dialog :title="$t('Project remark')" width="70%" :visible.sync="visible" @opened="onOpen"
+	           :append-to-body="true"
+	           :show-close="false"
+	           fullscreen
+	           custom-class="flex-dialog project-remark-dialog"
+	>
+		<div class="wrapper">
+			<monaco-editor
+				class="editor"
+				v-model="content"
+				language="markdown"
+				:options="monacoEditorOptions"
+				v-if="editMode"
+			/>
+			<el-scrollbar v-else class="project-scrollbar" wrap-class="wrap-x-hidden" view-class="project-remark">
+				<div v-html="html"></div>
+			</el-scrollbar>
+		</div>
+		<div slot="footer" class="dialog-footer">
+			<div>
+				<el-button v-if="!editMode" size="mini" @click="onEdit" type="primary">{{$t('Edit')}}</el-button>
+				<el-button v-if="editMode" size="mini" @click="onApply" type="success">{{$t('Apply')}}</el-button>
+			</div>
+			<div class="gap-5">
+				<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
+				<el-badge is-dot :hidden="!showBadge">
+					<el-button size="mini" @click="onSave" type="primary">{{$t('Save')}}</el-button>
+				</el-badge>
+			</div>
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+	import {mapActions, mapGetters} from 'vuex';
+	import MarkdownIt from 'markdown-it';
+	import MonacoEditor from "vue-monaco";
+	import {monacoEditorOptions, playWaiting} from "../../../utils";
+
+	let md = new MarkdownIt();
+
+	export default {
+		name: "ProjectRemarkDialog",
+		components: {MonacoEditor},
+		data() {
+			return {
+				visible: false,
+				editMode: false,
+				content: '',
+				monacoEditorOptions,
+			}
+		},
+		computed: {
+			showBadge(){
+				return this.projectRemark !== this.content;
+			},
+			html(){
+				return this.content ? md.render(this.content) : '';
+			},
+			...mapGetters(['projectRemark'])
+		},
+		methods: {
+			show() {
+				this.editMode = false;
+				this.content = this.projectRemark || '';
+				this.visible = true;
+			},
+			async onSave() {
+				await playWaiting(this.saveRemark({remark: this.content}), this.$t('Saving'));
+				this.visible = false;
+			},
+			async onClose() {
+				if(this.showBadge){
+					await this.$confirm(this.$t('Modified, save before exit'), this.$t('Alert'), {
+						confirmButtonText: this.$t('Save'),
+						cancelButtonText: this.$t('Still Close'),
+						distinguishCancelAndClose: true,
+						type: 'warning'
+					}).then(() => {
+						return this.onSave();
+					}).catch((action) => {
+						if(action === 'cancel'){
+							this.visible = false;
+						}
+					});
+				}else{
+					this.visible = false;
+				}
+			},
+			onOpen() {
+
+			},
+			onEdit() {
+				this.editMode = true;
+			},
+			onApply() {
+				this.editMode = false;
+			},
+			...mapActions([
+				'saveRemark',
+			]),
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/Home.vue

@@ -86,6 +86,7 @@
 	import {PROJECT_PAGE_SIZE} from "../config";
 	import ProjectHistoryDialog from "./Home/ProjectHistoryDialog";
 	import ElFormItem from "../components/inputs/form-item";
+	import db from "../utils/db-storage";
 
 	export default {
 		name: "Home",
@@ -118,6 +119,7 @@
 		methods: {
 			prepare() {
 				return Promise.all([
+					db.open('store'),
 					this.updateEnv(),
 					this.handleCurrentChange(1),
 				])
@@ -188,8 +190,15 @@
 			onDuplicateProject(projectID) {
 				this.editProject(projectID);
 			},
-			onSelectProject(project, dataUrl) {
+			async onSelectProject(project, dataUrl) {
+				if(await this.localVersionExist(project.id)){
+					this.$message({
+						message: this.$t('Unsaved version found locally, can not open from history'),
+						type: 'warning'
+					});
+				}else{
 					this.$router.push({name: 'editor', params: {projectID: project.id, project, dataUrl}});
+				}
 			},
 			editProject(projectID) {
 				this.$router.push({name: 'editor', params: {projectID}});
@@ -214,6 +223,7 @@
 				'createProject',
 				'deleteProject',
 				'updateEnv',
+				'localVersionExist',
 			]),
 		},
 	}

src/views/ProcessEditor.vue

@@ -7,7 +7,7 @@
 			<div>
 
 			</div>
-			<div>
+			<div class="gap-5">
 				<el-button size="mini" type="danger" @click="onClose()">{{$t('Close')}}</el-button>
 				<el-badge :hidden="!showBadge" is-dot>
 					<el-button size="mini" type="primary" @click="onSave()">{{$t('Save')}}</el-button>

vue.config.js

@@ -30,7 +30,7 @@ module.exports = {
   configureWebpack: {
     plugins: [
       new MonacoWebpackPlugin({
-        languages: ['javascript', 'typescript', 'json', 'html'],
+        languages: ['javascript', 'typescript', 'json', 'html', 'markdown'],
         publicPath: process.env.NODE_ENV === 'production' ? "/monaco" : "",
       })
     ]

yarn.lock

@@ -3125,9 +3125,9 @@ electron-to-chromium@^1.3.322:
   resolved "https://registry.npm.taobao.org/electron-to-chromium/download/electron-to-chromium-1.3.326.tgz?cache=0&sync_timestamp=1578285906184&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felectron-to-chromium%2Fdownload%2Felectron-to-chromium-1.3.326.tgz#71715aca9afd328ea208a3bc4651c15b869f0d1b"
   integrity sha1-cXFaypr9Mo6iCKO8RlHBW4afDRs=
 
-element-ui@^2.4.5:
+element-ui@^2.13.1:
   version "2.13.1"
-  resolved "https://registry.npm.taobao.org/element-ui/download/element-ui-2.13.1.tgz#0cb1a45cf27aa61c601defbe192740ac5cb9df7c"
+  resolved "https://registry.npm.taobao.org/element-ui/download/element-ui-2.13.1.tgz?cache=0&sync_timestamp=1586760879922&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felement-ui%2Fdownload%2Felement-ui-2.13.1.tgz#0cb1a45cf27aa61c601defbe192740ac5cb9df7c"
   integrity sha1-DLGkXPJ6phxgHe++GSdArFy533w=
   dependencies:
     async-validator "~1.8.1"
@@ -3229,6 +3229,11 @@ entities@^2.0.0:
   resolved "https://registry.npm.taobao.org/entities/download/entities-2.0.0.tgz?cache=0&sync_timestamp=1563403318326&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fentities%2Fdownload%2Fentities-2.0.0.tgz#68d6084cab1b079767540d80e56a39b423e4abf4"
   integrity sha1-aNYITKsbB5dnVA2A5Wo5tCPkq/Q=
 
+entities@~2.0.0:
+  version "2.0.2"
+  resolved "https://registry.npm.taobao.org/entities/download/entities-2.0.2.tgz?cache=0&sync_timestamp=1589062013210&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fentities%2Fdownload%2Fentities-2.0.2.tgz#ac74db0bba8d33808bbf36809c3a5c3683531436"
+  integrity sha1-rHTbC7qNM4CLvzaAnDpcNoNTFDY=
+
 errno@^0.1.3, errno@~0.1.7:
   version "0.1.7"
   resolved "https://registry.npm.taobao.org/errno/download/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
@@ -5048,6 +5053,13 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.npm.taobao.org/lines-and-columns/download/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
+linkify-it@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.npm.taobao.org/linkify-it/download/linkify-it-2.2.0.tgz#e3b54697e78bf915c70a38acd78fd09e0058b1cf"
+  integrity sha1-47VGl+eL+RXHCjis14/QngBYsc8=
+  dependencies:
+    uc.micro "^1.0.1"
+
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.npm.taobao.org/load-json-file/download/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
@@ -5232,6 +5244,17 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+markdown-it@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.npm.taobao.org/markdown-it/download/markdown-it-10.0.0.tgz#abfc64f141b1722d663402044e43927f1f50a8dc"
+  integrity sha1-q/xk8UGxci1mNAIETkOSfx9QqNw=
+  dependencies:
+    argparse "^1.0.7"
+    entities "~2.0.0"
+    linkify-it "^2.0.0"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.5"
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.npm.taobao.org/md5.js/download/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -5246,6 +5269,11 @@ mdn-data@2.0.4:
   resolved "https://registry.npm.taobao.org/mdn-data/download/mdn-data-2.0.4.tgz?cache=0&sync_timestamp=1573816265745&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmdn-data%2Fdownload%2Fmdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha1-aZs8OKxvHXKAkaZGULZdOIUC/Vs=
 
+mdurl@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npm.taobao.org/mdurl/download/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
+  integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.npm.taobao.org/media-typer/download/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -8369,6 +8397,11 @@ typedarray@^0.0.6:
   resolved "https://registry.npm.taobao.org/typedarray/download/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+uc.micro@^1.0.1, uc.micro@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.npm.taobao.org/uc.micro/download/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
+  integrity sha1-nEEagCpAmpH8bPdAgbq6NLJEmaw=
+
 uglify-js@3.4.x:
   version "3.4.10"
   resolved "https://registry.npm.taobao.org/uglify-js/download/uglify-js-3.4.10.tgz?cache=0&sync_timestamp=1577407920190&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fuglify-js%2Fdownload%2Fuglify-js-3.4.10.tgz#9ad9563d8eb3acdfb8d38597d2af1d815f6a755f"