mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-06-23 18:39:20 +08:00
fix(editor): 修改样式,修改代码块ID生成逻辑
This commit is contained in:
parisma
jia000
parent
9e1fb42783
commit
a452cecc44
@ -1,21 +1,27 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="m-fields-code-select" :key="fieldKey">
|
<div class="m-fields-code-select" :key="fieldKey">
|
||||||
<m-fields-select
|
<el-card>
|
||||||
:config="selectConfig"
|
<template #header>
|
||||||
:model="model"
|
<m-fields-select
|
||||||
:prop="prop"
|
:config="selectConfig"
|
||||||
:name="name"
|
:model="model"
|
||||||
:size="size"
|
:prop="prop"
|
||||||
@change="changeHandler"
|
:name="name"
|
||||||
></m-fields-select>
|
:size="size"
|
||||||
<el-button
|
@change="changeHandler"
|
||||||
type="primary"
|
></m-fields-select>
|
||||||
:icon="View"
|
</template>
|
||||||
:size="size"
|
<div class="tool-bar">
|
||||||
@click="viewHandler"
|
<el-button
|
||||||
:disabled="props.model[props.name].length === 0"
|
type="primary"
|
||||||
>查看</el-button
|
:icon="View"
|
||||||
>
|
:size="size"
|
||||||
|
@click="viewHandler"
|
||||||
|
:disabled="props.model[props.name].length === 0"
|
||||||
|
>查看</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@ -1,70 +1,72 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dialog
|
<el-dialog
|
||||||
v-model="isShowCodeBlockEditor"
|
v-model="isShowCodeBlockEditor"
|
||||||
title="代码块编辑面板"
|
|
||||||
:fullscreen="true"
|
:fullscreen="true"
|
||||||
:before-close="saveAndClose"
|
:before-close="saveAndClose"
|
||||||
:append-to-body="true"
|
:append-to-body="true"
|
||||||
custom-class="code-editor-dialog"
|
custom-class="code-editor-dialog"
|
||||||
>
|
>
|
||||||
|
<!-- 左侧列表 -->
|
||||||
<template v-if="mode === EditorMode.LIST">
|
<template v-if="mode === EditorMode.LIST">
|
||||||
<el-tree
|
<el-card class="code-editor-side-menu">
|
||||||
v-if="!isEmpty(state.codeList)"
|
<el-tree
|
||||||
ref="tree"
|
v-if="!isEmpty(state.codeList)"
|
||||||
node-key="id"
|
ref="tree"
|
||||||
empty-text="暂无代码块"
|
node-key="id"
|
||||||
:data="state.codeList"
|
empty-text="暂无代码块"
|
||||||
:highlight-current="true"
|
:data="state.codeList"
|
||||||
@node-click="selectHandler"
|
:highlight-current="true"
|
||||||
class="code-editor-side-menu"
|
@node-click="selectHandler"
|
||||||
:current-node-key="state.codeList[0].id"
|
:current-node-key="state.codeList[0].id"
|
||||||
>
|
class="side-tree"
|
||||||
<template #default="{ data }">
|
>
|
||||||
<div :id="data.id">
|
<template #default="{ data }">
|
||||||
<div class="list-item">
|
<div :id="data.id" class="list-container">
|
||||||
<div class="code-name">{{ data.name }}（{{ data.id }}）</div>
|
<div class="list-item">
|
||||||
|
<div class="code-name">{{ data.name }}（{{ data.id }}）</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
</template>
|
</el-tree>
|
||||||
</el-tree>
|
</el-card>
|
||||||
</template>
|
</template>
|
||||||
|
<!-- 右侧区域 -->
|
||||||
<div
|
<div
|
||||||
v-if="!isEmpty(codeConfig)"
|
v-if="!isEmpty(codeConfig)"
|
||||||
:class="[
|
:class="[
|
||||||
mode === EditorMode.LIST ? 'm-editor-code-block-editor-panel-list-mode' : '',
|
mode === EditorMode.LIST ? 'm-editor-code-block-editor-panel-list-mode' : 'm-editor-code-block-editor-panel',
|
||||||
'm-editor-code-block-editor-panel',
|
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<slot name="code-block-edit-panel-header" :id="id"></slot>
|
<slot name="code-block-edit-panel-header" :id="id"></slot>
|
||||||
<el-row class="code-name-wrapper" justify="start">
|
<el-card shadow="never">
|
||||||
<el-col :span="3">
|
<template #header>
|
||||||
<span>代码块名称</span>
|
<div class="code-name-wrapper">
|
||||||
</el-col>
|
<div class="code-name-label">代码块名称</div>
|
||||||
<el-col :span="6">
|
<el-input class="code-name-input" size="small" v-model="codeConfig.name" :disabled="!editable" />
|
||||||
<el-input size="small" v-model="codeConfig.name" :disabled="!editable" />
|
</div>
|
||||||
</el-col>
|
</template>
|
||||||
</el-row>
|
<div class="m-editor-wrapper">
|
||||||
<div class="m-editor-content">
|
<magic-code-editor
|
||||||
<magic-code-editor
|
ref="codeEditor"
|
||||||
ref="codeEditor"
|
class="m-editor-container"
|
||||||
class="m-editor-content"
|
:init-values="`${codeConfig.content}`"
|
||||||
:init-values="`${codeConfig.content}`"
|
@save="saveCode"
|
||||||
@save="saveCode"
|
:options="{
|
||||||
:options="{
|
tabSize: 2,
|
||||||
tabSize: 2,
|
fontSize: 16,
|
||||||
fontSize: 16,
|
formatOnPaste: true,
|
||||||
formatOnPaste: true,
|
readOnly: !editable,
|
||||||
readOnly: !editable,
|
}"
|
||||||
}"
|
></magic-code-editor>
|
||||||
></magic-code-editor>
|
<div class="m-editor-content-bottom" v-if="editable">
|
||||||
<div class="m-editor-content-bottom clearfix" v-if="editable">
|
<el-button type="primary" class="button" @click="saveCode">保存</el-button>
|
||||||
<el-button type="primary" class="button" @click="saveCode">保存</el-button>
|
<el-button type="primary" class="button" @click="saveAndClose">关闭</el-button>
|
||||||
<el-button type="primary" class="button" @click="saveAndClose">保存并关闭</el-button>
|
</div>
|
||||||
|
<div class="m-editor-content-bottom" v-else>
|
||||||
|
<el-button type="primary" class="button" @click="saveAndClose">关闭</el-button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="m-editor-content-bottom clearfix" v-else>
|
</el-card>
|
||||||
<el-button type="primary" class="button" @click="saveAndClose">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -8,7 +8,7 @@
|
|||||||
placeholder="输入关键字进行过滤"
|
placeholder="输入关键字进行过滤"
|
||||||
clearable
|
clearable
|
||||||
v-model="filterText"
|
v-model="filterText"
|
||||||
@change="filterTextChangeHandler"
|
@input="filterTextChangeHandler"
|
||||||
></el-input>
|
></el-input>
|
||||||
<el-button class="create-code-button" type="primary" size="small" @click="createCodeBlock" v-if="editable"
|
<el-button class="create-code-button" type="primary" size="small" @click="createCodeBlock" v-if="editable"
|
||||||
>新增</el-button
|
>新增</el-button
|
||||||
|
|||||||
@ -278,7 +278,7 @@ class CodeBlock extends BaseService {
|
|||||||
* @returns {string} 代码块唯一id
|
* @returns {string} 代码块唯一id
|
||||||
*/
|
*/
|
||||||
public async getUniqueId(): Promise<string> {
|
public async getUniqueId(): Promise<string> {
|
||||||
const newId = (Date.now().toString(36) + Math.random().toString(36).substring(2)).padEnd(19, '0');
|
const newId = `code_${Math.random().toString(10).substring(2).substring(0, 4)}`;
|
||||||
// 判断是否重复
|
// 判断是否重复
|
||||||
const dsl = await this.getCodeDsl();
|
const dsl = await this.getCodeDsl();
|
||||||
const existedIds = keys(dsl);
|
const existedIds = keys(dsl);
|
||||||
|
|||||||
@ -50,67 +50,112 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.m-editor-code-block-editor-panel {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 4px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 10;
|
|
||||||
background: #fff;
|
|
||||||
|
|
||||||
.code-name-wrapper {
|
.m-fields-code-select {
|
||||||
padding: 10px 20px;
|
width: 100%;
|
||||||
|
.el-card__body {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.tool-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.m-editor-content-bottom {
|
|
||||||
text-align: right;
|
|
||||||
padding-right: 20px;
|
|
||||||
height: 40px;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
background: #fff;
|
|
||||||
> button {
|
|
||||||
height: 30px;
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.m-fields-code-select {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
.code-editor-dialog {
|
.code-editor-dialog {
|
||||||
.el-dialog__body {
|
.el-dialog__body {
|
||||||
height: 90%;
|
height: 90%;
|
||||||
}
|
}
|
||||||
.code-editor-side-menu {
|
.el-card {
|
||||||
width: 18%;
|
height: 100%;
|
||||||
height: 90%;
|
background: #fff;
|
||||||
overflow: auto;
|
.el-card__body {
|
||||||
margin-left: -25px;
|
height: 80%;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.list-item {
|
.code-editor-side-menu {
|
||||||
width: 100%;
|
width: 20%;
|
||||||
margin: 10px 0;
|
position: absolute;
|
||||||
.code-name {
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
.side-tree {
|
||||||
|
margin-top: 10px;
|
||||||
|
.list-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 14px;
|
overflow: hidden;
|
||||||
|
margin-left: -20px;
|
||||||
|
.list-item {
|
||||||
|
width: 100%;
|
||||||
|
margin: 10px 0;
|
||||||
|
line-height: 30px;
|
||||||
|
.code-name {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.code-name-wrapper {
|
||||||
|
margin: 10px 0 10px 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.code-name-label {
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
.code-name-input {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.m-editor-code-block-editor-panel-list-mode {
|
.m-editor-code-block-editor-panel-list-mode {
|
||||||
width: 80%;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 90%;
|
top: 0;
|
||||||
left: 20%;
|
left: 20%;
|
||||||
top: 60px;
|
width: 80%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 10;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-editor-code-block-editor-panel {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 4px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 10;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-editor-wrapper {
|
||||||
|
height: 100%;
|
||||||
|
.m-editor-container {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.m-editor-content-bottom {
|
||||||
|
text-align: right;
|
||||||
|
height: 40px;
|
||||||
|
padding-right: 20px;
|
||||||
|
position: absolute;
|
||||||
|
width: calc(100% - 30px);
|
||||||
|
display: flex;
|
||||||
|
justify-content: end;
|
||||||
|
bottom: 20px;
|
||||||
|
right: 0;
|
||||||
|
background: #fff;
|
||||||
|
> button {
|
||||||
|
height: 30px;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -21,7 +21,7 @@ export default {
|
|||||||
name: 'test',
|
name: 'test',
|
||||||
type: 'app',
|
type: 'app',
|
||||||
methods: {
|
methods: {
|
||||||
l7znj1q24wilb357ay6: {
|
code_5336: {
|
||||||
name: 'getData',
|
name: 'getData',
|
||||||
// eslint-disable-next-line no-eval
|
// eslint-disable-next-line no-eval
|
||||||
content: eval(`(vm) => {\n console.log("this is getData function")\n}`),
|
content: eval(`(vm) => {\n console.log("this is getData function")\n}`),
|
||||||
@ -51,7 +51,7 @@ export default {
|
|||||||
fontWeight: '',
|
fontWeight: '',
|
||||||
},
|
},
|
||||||
events: [],
|
events: [],
|
||||||
created: ['l7znj1q24wilb357ay6'],
|
created: ['code_5336'],
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
type: 'text',
|
type: 'text',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user