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,5 +1,7 @@
|
||||
<template>
|
||||
<div class="m-fields-code-select" :key="fieldKey">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<m-fields-select
|
||||
:config="selectConfig"
|
||||
:model="model"
|
||||
@ -8,6 +10,8 @@
|
||||
:size="size"
|
||||
@change="changeHandler"
|
||||
></m-fields-select>
|
||||
</template>
|
||||
<div class="tool-bar">
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="View"
|
||||
@ -17,6 +21,8 @@
|
||||
>查看</el-button
|
||||
>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="isShowCodeBlockEditor"
|
||||
title="代码块编辑面板"
|
||||
:fullscreen="true"
|
||||
:before-close="saveAndClose"
|
||||
:append-to-body="true"
|
||||
custom-class="code-editor-dialog"
|
||||
>
|
||||
<!-- 左侧列表 -->
|
||||
<template v-if="mode === EditorMode.LIST">
|
||||
<el-card class="code-editor-side-menu">
|
||||
<el-tree
|
||||
v-if="!isEmpty(state.codeList)"
|
||||
ref="tree"
|
||||
@ -16,38 +17,38 @@
|
||||
:data="state.codeList"
|
||||
:highlight-current="true"
|
||||
@node-click="selectHandler"
|
||||
class="code-editor-side-menu"
|
||||
:current-node-key="state.codeList[0].id"
|
||||
class="side-tree"
|
||||
>
|
||||
<template #default="{ data }">
|
||||
<div :id="data.id">
|
||||
<div :id="data.id" class="list-container">
|
||||
<div class="list-item">
|
||||
<div class="code-name">{{ data.name }}（{{ data.id }}）</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-card>
|
||||
</template>
|
||||
<!-- 右侧区域 -->
|
||||
<div
|
||||
v-if="!isEmpty(codeConfig)"
|
||||
:class="[
|
||||
mode === EditorMode.LIST ? 'm-editor-code-block-editor-panel-list-mode' : '',
|
||||
'm-editor-code-block-editor-panel',
|
||||
mode === EditorMode.LIST ? 'm-editor-code-block-editor-panel-list-mode' : 'm-editor-code-block-editor-panel',
|
||||
]"
|
||||
>
|
||||
<slot name="code-block-edit-panel-header" :id="id"></slot>
|
||||
<el-row class="code-name-wrapper" justify="start">
|
||||
<el-col :span="3">
|
||||
<span>代码块名称</span>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-input size="small" v-model="codeConfig.name" :disabled="!editable" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="m-editor-content">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="code-name-wrapper">
|
||||
<div class="code-name-label">代码块名称</div>
|
||||
<el-input class="code-name-input" size="small" v-model="codeConfig.name" :disabled="!editable" />
|
||||
</div>
|
||||
</template>
|
||||
<div class="m-editor-wrapper">
|
||||
<magic-code-editor
|
||||
ref="codeEditor"
|
||||
class="m-editor-content"
|
||||
class="m-editor-container"
|
||||
:init-values="`${codeConfig.content}`"
|
||||
@save="saveCode"
|
||||
:options="{
|
||||
@ -57,14 +58,15 @@
|
||||
readOnly: !editable,
|
||||
}"
|
||||
></magic-code-editor>
|
||||
<div class="m-editor-content-bottom clearfix" v-if="editable">
|
||||
<div class="m-editor-content-bottom" v-if="editable">
|
||||
<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 clearfix" v-else>
|
||||
<div class="m-editor-content-bottom" v-else>
|
||||
<el-button type="primary" class="button" @click="saveAndClose">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
placeholder="输入关键字进行过滤"
|
||||
clearable
|
||||
v-model="filterText"
|
||||
@change="filterTextChangeHandler"
|
||||
@input="filterTextChangeHandler"
|
||||
></el-input>
|
||||
<el-button class="create-code-button" type="primary" size="small" @click="createCodeBlock" v-if="editable"
|
||||
>新增</el-button
|
||||
|
||||
@ -278,7 +278,7 @@ class CodeBlock extends BaseService {
|
||||
* @returns {string} 代码块唯一id
|
||||
*/
|
||||
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 existedIds = keys(dsl);
|
||||
|
||||
@ -50,6 +50,82 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.m-fields-code-select {
|
||||
width: 100%;
|
||||
.el-card__body {
|
||||
padding: 10px;
|
||||
}
|
||||
.tool-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
}
|
||||
}
|
||||
.code-editor-dialog {
|
||||
.el-dialog__body {
|
||||
height: 90%;
|
||||
}
|
||||
.el-card {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
.el-card__body {
|
||||
height: 80%;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.code-editor-side-menu {
|
||||
width: 20%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #fff;
|
||||
|
||||
.side-tree {
|
||||
margin-top: 10px;
|
||||
.list-container {
|
||||
width: 100%;
|
||||
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 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 20%;
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.m-editor-code-block-editor-panel {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -58,59 +134,28 @@
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
background: #fff;
|
||||
|
||||
.code-name-wrapper {
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.m-editor-wrapper {
|
||||
height: 100%;
|
||||
.m-editor-container {
|
||||
height: 100%;
|
||||
}
|
||||
.m-editor-content-bottom {
|
||||
text-align: right;
|
||||
padding-right: 20px;
|
||||
height: 40px;
|
||||
padding-right: 20px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
width: calc(100% - 30px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
bottom: 0;
|
||||
justify-content: end;
|
||||
bottom: 20px;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
> button {
|
||||
height: 30px;
|
||||
margin-top: 4px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.m-fields-code-select {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
.code-editor-dialog {
|
||||
.el-dialog__body {
|
||||
height: 90%;
|
||||
}
|
||||
.code-editor-side-menu {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
overflow: auto;
|
||||
margin-left: -25px;
|
||||
|
||||
.list-item {
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
.code-name {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.m-editor-code-block-editor-panel-list-mode {
|
||||
width: 80%;
|
||||
position: absolute;
|
||||
height: 90%;
|
||||
left: 20%;
|
||||
top: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,7 +21,7 @@ export default {
|
||||
name: 'test',
|
||||
type: 'app',
|
||||
methods: {
|
||||
l7znj1q24wilb357ay6: {
|
||||
code_5336: {
|
||||
name: 'getData',
|
||||
// eslint-disable-next-line no-eval
|
||||
content: eval(`(vm) => {\n console.log("this is getData function")\n}`),
|
||||
@ -51,7 +51,7 @@ export default {
|
||||
fontWeight: '',
|
||||
},
|
||||
events: [],
|
||||
created: ['l7znj1q24wilb357ay6'],
|
||||
created: ['code_5336'],
|
||||
items: [
|
||||
{
|
||||
type: 'text',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user