Skip to content

Commit

Permalink
feat(cloud-function): IDE support cache & restore editing codes in lo…
Browse files Browse the repository at this point in the history 
…calstorage;
  • Loading branch information
@maslow
maslow committed Dec 10, 2021
1 parent 7f31231 commit c084624
Show file tree
Hide file tree
Showing 5 changed files with 88 additions and 32 deletions.
33 changes: 29 additions & 4 deletions packages/system-client/src/components/FunctionEditor/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,27 @@ const autoImportTypings = new AutoImportTypings()
export default {
name: 'FunctionEditor',
/* eslint-disable vue/require-prop-types */
props: ['value', 'height', 'dark', 'name'],
// props: ['value', 'height', 'dark', 'name'],
props: {
value: {
type: String,
default: ''
},
height: {
type: Number,
default: 300
},
dark: {
type: Boolean,
default: false
},
name: {
type: String,
default: () => {
return `index-${Date.now()}.ts`
}
}
},
data() {
return {
editor: {}
Expand Down Expand Up @@ -55,10 +75,13 @@ export default {
// 加载必要的类型文件
autoImportTypings.loadDefaults()
},
beforeDestroy() {
const filename = `${this.name}.ts`
this.editor.getModel(monaco.Uri.parse(filename)).dispose()
},
methods: {
initEditor() {
const now = Date.now()
const filename = `index-${now}.ts`
const filename = `${this.name}.ts`
this.editor = monaco.editor.create(this.$refs.jseditor, {
lineNumbers: 'on',
roundedSelection: true,
Expand All @@ -81,7 +104,9 @@ export default {
})
this.editor.onDidChangeModelContent(e => {
this.$emit('input', this.editor?.getValue())
const value = this.editor?.getValue()
this.$emit('input', value)
this.$emit('change', value)
this.parseImports(this.getValue())
})
},
Expand Down
1 change: 1 addition & 0 deletions packages/system-client/src/components/FunctionEditor/types/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ export class AutoImportTypings {
*/
loadDefaults() {
this.addExtraLib({ path: 'globals.d.ts', content: global_declare })
if (!this.isLoaded('@/cloud-sdk')) { this.loadDeclaration('@/cloud-sdk') }
if (!this.isLoaded('globals')) { this.loadDeclaration('globals') }
if (!this.isLoaded('database-proxy')) { this.loadDeclaration('database-proxy') }
if (!this.isLoaded('database-ql')) { this.loadDeclaration('database-ql') }
Expand Down
2 changes: 1 addition & 1 deletion packages/system-client/src/router/async.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export const asyncRoutes = [
meta: {
title: '调试云函数',
icon: 'bug',
noCache: true
noCache: false
}
},
{
Expand Down
77 changes: 55 additions & 22 deletions packages/system-client/src/views/cloudfunction/debug.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,22 @@
<div v-if="func" class="header">
<span style="font-size: 22px;line-height: 40px;">
<b>{{ func.label }}</b>
<span v-if="saved_code_diff" style="margin-left: 8px; font-size: 18px; color: red">
<i class="el-icon-edit" />
<span v-if="saved_code_diff" style="margin-left: 8px; font-size: 18px; color: red; cursor: pointer" @click="diffSaved">
[编辑中<i class="el-icon-hot-water" /> ]
</span>
</span>
<el-tag v-clipboard:message="func.name" v-clipboard:success="onCopy" style="margin-left: 14px; " size="mini" type="success">{{ func.name }}</el-tag>

<el-button
style="margin-left: 20px"
icon="el-icon-refresh"
type="text"
size="default"
:loading="loading"
@click="getFunction"
>刷新</el-button>
<el-tooltip content="重新加载函数代码，将会丢弃当前未保存的编辑" effect="light" placement="bottom">
<el-button
style="margin-left: 20px"
icon="el-icon-refresh"
type="text"
size="default"
:loading="loading"
@click="getFunction"
>刷新</el-button>
</el-tooltip>
<el-button
size="mini"
style="margin-left: 20px;"
Expand All @@ -35,7 +37,7 @@
>{{ published_version_diff ? '发布': '已发布' }}</el-button>
<el-button
v-if="published_func"
:type="published_version_diff ? 'default' : 'text'"
type="text"
size="mini"
:loading="loading"
style="margin-left: 10px;"
Expand All @@ -45,16 +47,15 @@
</div>

<div style="display: flex;">
<div class="editor-container">
<!-- <diff-editor :original="value" :modified="value" :height="editorHeight" /> -->
<function-editor v-model="value" :height="editorHeight" :dark="false" />
<div v-if="func" class="editor-container">
<function-editor v-model="value" :name="func.name" :height="editorHeight" :dark="false" @change="cacheCode" />
</div>
<div class="lastest-logs">
<div class="latest-logs">
<el-tabs type="border-card">
<el-tab-pane label="最近执行">
<span slot="label">最近执行 <i class="el-icon-refresh" @click="getLatestLogs" /></span>

<div v-for="log in lastestLogs" :key="log._id" class="log-item">
<div v-for="log in latestLogs" :key="log._id" class="log-item">
<el-tag type="warning" size="normal" @click="showLogDetailDlg(log)">
{{ log.created_at | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}
</el-tag>
Expand Down Expand Up @@ -172,7 +173,7 @@ export default {
// 调试面板显示控制
showDebugPanel: false,
// 最近日志
lastestLogs: [],
latestLogs: [],
// 当前查看日志详情
logDetail: undefined,
// 日志详情对话框显示控制
Expand Down Expand Up @@ -220,6 +221,7 @@ export default {
async created() {
this.func_id = this.$route.params.id
await this.getFunction()
this.restoreCachedCode()
this.getLatestLogs()
this.getChangeHistory()
this.setTagViewTitle()
Expand Down Expand Up @@ -283,6 +285,7 @@ export default {
if (r.error) { return showError('保存失败！') }
localStorage.removeItem(this.getCodeCacheKey(this.func.version))
await this.getFunction()
this.getChangeHistory()
if (showTip) {
Expand Down Expand Up @@ -327,7 +330,7 @@ export default {
if (r.error) { return showError('发布失败!') }
this.getFunction()
this.published_func = await getPublishedFunction(this.func._id)
showSuccess('已发布: ' + this.func.name)
},
async getLogByRequestId(requestId) {
Expand All @@ -348,7 +351,7 @@ export default {
const res = await getFunctionLogs({ func_id: this.func_id }, 1, 15)
.finally(() => { this.loading = false })
this.lastestLogs = res.data || []
this.latestLogs = res.data || []
},
/**
* 获取函数变更记录
Expand All @@ -368,12 +371,21 @@ export default {
this.isShowLogDetail = true
},
/**
* 对比已发布与当前的云函数代码
* 对比已发布与当前编辑的云函数代码
*/
diffPublished() {
this.diffCode.original = this.published_func.code
this.diffCode.modified = this.value
this.diffCode.title = `云函数代码变更对比：#${this.published_func.version}(已发布) -> (当前）`
this.diffCode.title = `云函数代码变更对比：#${this.published_func.version}(已发布) -> (当前编辑）`
this.isShowDiffEditor = true
},
/**
* 对比已保存与当前编辑的云函数代码
*/
diffSaved() {
this.diffCode.original = this.func.code
this.diffCode.modified = this.value
this.diffCode.title = `云函数代码变更对比：#${this.published_func.version}(已保存) -> (当前编辑）`
this.isShowDiffEditor = true
},
onCloseDiffEditor() {
Expand All @@ -383,6 +395,9 @@ export default {
title: 'Code DiffEditor'
}
},
/**
* 对比云函数版本记录的代码
*/
showChangeDiffEditor(index) {
const original = this.changeHistory[index]
const modified = index > 0 ? this.changeHistory[index - 1] : null
Expand Down Expand Up @@ -455,6 +470,24 @@ export default {
updateEditorHeight() {
const height = document.body.clientHeight
this.editorHeight = height - 110
},
/** 本地缓存代码变更 */
cacheCode(value) {
const version = this.func.version
localStorage.removeItem(this.getCodeCacheKey(version - 1))
localStorage.setItem(this.getCodeCacheKey(version), value)
},
/** 加载本地缓存代码变更 */
restoreCachedCode() {
const key = this.getCodeCacheKey(this.func.version)
const code = localStorage.getItem(key)
if (code) {
this.value = code
}
},
/** 获取本地代码缓存 key */
getCodeCacheKey(version) {
return `$cached_function@${this.appid}::${this.func.name}#${version}`
}
}
}
Expand All @@ -473,7 +506,7 @@ export default {
padding: 0;
}
.lastest-logs {
.latest-logs {
padding-left: 5px;
width: 20%;
Expand Down
7 changes: 2 additions & 5 deletions packages/system-client/src/views/database/policies.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
</el-table-column> -->
<el-table-column label="标识" align="center" width="160px">
<template slot-scope="{row}">
<span>{{ row.name }}</span>
<span class="link-type" @click="showUpdateForm(row)">{{ row.name }}</span>
</template>
</el-table-column>
<el-table-column label="入口地址" align="left" width="150px">
Expand Down Expand Up @@ -79,10 +79,7 @@
</el-table-column>
<el-table-column label="操作" align="center" width="260" class-name="small-padding fixed-width">
<template slot-scope="{row,$index}">
<el-button type="success" size="mini" @click="handleShowDetail(row)">
详情
</el-button>
<el-button type="primary" size="mini" @click="showUpdateForm(row)">
<el-button type="primary" size="mini" @click="handleShowDetail(row)">
编辑
</el-button>
<el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row,$index)">
Expand Down

0 comments on commit c084624

Please sign in to comment.