JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-05-30 03:49:22 +08:00
Code Issues Projects Releases Wiki Activity

fix(editor): 样式优化

Browse Source
This commit is contained in:
parisma 2022-09-16 18:03:47 +08:00 committed by jia000
parent a452cecc44
commit 27d8640fbc
3 changed files with 29 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/editor/src/fields/CodeSelect.vue
View File

@ -12,14 +12,21 @@
></m-fields-select> ></m-fields-select>
</template> </template>
<div class="tool-bar"> <div class="tool-bar">
<el-button <el-tooltip class="tool-item" effect="dark" content="查看源代码" placement="top">
type="primary" <svg
:icon="View" @click="viewHandler"
:size="size" preserveAspectRatio="xMidYMid meet"
@click="viewHandler" viewBox="0 0 24 24"
:disabled="props.model[props.name].length === 0" width="15px"
>查看</el-button height="15px"
> data-v-65a7fb6c=""
>
<path
fill="currentColor"
d="m23 12l-7.071 7.071l-1.414-1.414L20.172 12l-5.657-5.657l1.414-1.414L23 12zM3.828 12l5.657 5.657l-1.414 1.414L1 12l7.071-7.071l1.414 1.414L3.828 12z"
></path>
</svg>
</el-tooltip>
</div> </div>
</el-card> </el-card>
</div> </div>
@ -27,7 +34,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, defineEmits, defineProps, inject, ref, watchEffect } from 'vue'; import { computed, defineEmits, defineProps, inject, ref, watchEffect } from 'vue';
import { View } from '@element-plus/icons-vue'; import { ElMessage } from 'element-plus';
import { map } from 'lodash-es'; import { map } from 'lodash-es';
import { SelectConfig } from '@tmagic/form'; import { SelectConfig } from '@tmagic/form';
@ -104,6 +111,10 @@ const setCombineRelation = async (selectedIds: string[] | string) => {
}; };
const viewHandler = async () => { const viewHandler = async () => {
if (props.model[props.name].length === 0) {
ElMessage.error('请先绑定代码块');
return;
}
await setCombineRelation(props.model[props.name]); await setCombineRelation(props.model[props.name]);
await services?.codeBlockService.setMode(EditorMode.LIST); await services?.codeBlockService.setMode(EditorMode.LIST);
services?.codeBlockService.setCodeEditorContent(true, combineIds.value[0]); services?.codeBlockService.setCodeEditorContent(true, combineIds.value[0]);

2
packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
View File

@ -42,7 +42,7 @@
<template #header> <template #header>
<div class="code-name-wrapper"> <div class="code-name-wrapper">
<div class="code-name-label">代码块名称</div> <div class="code-name-label">代码块名称</div>
<el-input class="code-name-input" size="small" v-model="codeConfig.name" :disabled="!editable" /> <el-input class="code-name-input" v-model="codeConfig.name" :disabled="!editable" />
</div> </div>
</template> </template>
<div class="m-editor-wrapper"> <div class="m-editor-wrapper">

12
packages/editor/src/theme/code-block.scss
View File

@ -32,7 +32,6 @@
position: absolute; position: absolute;
right: 15px; right: 15px;
padding-left: 5px; padding-left: 5px;
background-color: #fff;
display: flex; display: flex;
align-items: center; align-items: center;
.edit-icon { .edit-icon {
@ -54,12 +53,17 @@
.m-fields-code-select { .m-fields-code-select {
width: 100%; width: 100%;
.el-card__body { .el-card__body {
padding: 10px; padding: 5px;
} }
.tool-bar { .tool-bar {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: end; justify-content: end;
height: 20px;
.tool-item {
display: flex;
align-items: center;
}
} }
} }
.code-editor-dialog { .code-editor-dialog {
@ -105,11 +109,11 @@
} }
.code-name-wrapper { .code-name-wrapper {
margin: 10px 0 10px 10px;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 16px;
.code-name-label { .code-name-label {
width: 80px; margin-right: 10px;
} }
.code-name-input { .code-name-input {
width: 300px; width: 300px;