mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-10-21 21:07:30 +08:00
feat: 升级增加 docker-compose 文件对比功能 (#5297)
This commit is contained in:
parent
428743d600
commit
4883c9dd49
12 changed files with 73 additions and 51 deletions
|
@ -1,9 +1,9 @@
|
|||
@font-face {
|
||||
font-family: "panel"; /* Project id 3575356 */
|
||||
src: url('iconfont.woff2?t=1717468101688') format('woff2'),
|
||||
url('iconfont.woff?t=1717468101688') format('woff'),
|
||||
url('iconfont.ttf?t=1717468101688') format('truetype'),
|
||||
url('iconfont.svg?t=1717468101688#panel') format('svg');
|
||||
src: url('iconfont.woff2?t=1717570629440') format('woff2'),
|
||||
url('iconfont.woff?t=1717570629440') format('woff'),
|
||||
url('iconfont.ttf?t=1717570629440') format('truetype'),
|
||||
url('iconfont.svg?t=1717570629440#panel') format('svg');
|
||||
}
|
||||
|
||||
.panel {
|
||||
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
.p-docker1:before {
|
||||
content: "\e689";
|
||||
content: "\e76a";
|
||||
}
|
||||
|
||||
.p-Firefox:before {
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -6,11 +6,11 @@
|
|||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "4630923",
|
||||
"icon_id": "1064806",
|
||||
"name": "docker",
|
||||
"font_class": "docker1",
|
||||
"unicode": "e689",
|
||||
"unicode_decimal": 59017
|
||||
"unicode": "e76a",
|
||||
"unicode_decimal": 59242
|
||||
},
|
||||
{
|
||||
"icon_id": "37759945",
|
||||
|
|
File diff suppressed because one or more lines are too long
Before Width: | Height: | Size: 169 KiB After Width: | Height: | Size: 170 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
@ -212,6 +212,8 @@ const message = {
|
|||
formatErr: 'Format error, please check and retry',
|
||||
phpExtension: 'Only supports , _ lowercase English and numbers',
|
||||
paramHttp: 'Must start with http:// or https://',
|
||||
diffHelper:
|
||||
'The left side is the old version, the right side is the new version, after editing, click Save using custom version',
|
||||
},
|
||||
res: {
|
||||
paramError: 'The request failed, please try again later!',
|
||||
|
|
|
@ -1634,6 +1634,7 @@ const message = {
|
|||
useDefault: '使用預設版本',
|
||||
useCustom: '自訂 docker-compose.yml',
|
||||
useCustomHelper: '使用自訂 docker-compose.yml 文件,可能會導致應用程式升級失敗,如無必要,請勿勾選',
|
||||
diffHelper: '左側為舊版本,右側為新版,編輯之後點選使用自訂版本儲存',
|
||||
},
|
||||
website: {
|
||||
website: '網站',
|
||||
|
|
|
@ -1634,6 +1634,7 @@ const message = {
|
|||
useDefault: '使用默认版本',
|
||||
useCustom: '自定义 docker-compose.yml',
|
||||
useCustomHelper: '使用自定义 docker-compose.yml 文件,可能会导致应用升级失败,如无必要,请勿勾选',
|
||||
diffHelper: '左侧为旧版本,右侧为新版,编辑之后点击使用自定义版本保存',
|
||||
},
|
||||
website: {
|
||||
website: '网站',
|
||||
|
|
|
@ -7,47 +7,18 @@
|
|||
width="60%"
|
||||
>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="11" :offset="1" class="mt-2">
|
||||
<el-text type="info">{{ $t('app.oldVersion') }}</el-text>
|
||||
<codemirror
|
||||
placeholder=""
|
||||
:indent-with-tab="true"
|
||||
:tabSize="4"
|
||||
style="width: 100%; height: calc(100vh - 500px)"
|
||||
:lineWrapping="true"
|
||||
:matchBrackets="true"
|
||||
theme="cobalt"
|
||||
:styleActiveLine="true"
|
||||
:extensions="extensions"
|
||||
v-model="oldContent"
|
||||
:readOnly="true"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="11" class="mt-2">
|
||||
<el-text type="success">{{ $t('app.newVersion') }}</el-text>
|
||||
<el-text type="warning" class="!ml-5">编辑之后点击使用自定义版本保存</el-text>
|
||||
<codemirror
|
||||
:autofocus="true"
|
||||
placeholder=""
|
||||
:indent-with-tab="true"
|
||||
:tabSize="4"
|
||||
style="width: 100%; height: calc(100vh - 500px)"
|
||||
:lineWrapping="true"
|
||||
:matchBrackets="true"
|
||||
theme="cobalt"
|
||||
:styleActiveLine="true"
|
||||
:extensions="extensions"
|
||||
v-model="newContent"
|
||||
/>
|
||||
<el-col :span="22" :offset="1">
|
||||
<el-text type="warning">{{ $t('app.diffHelper') }}</el-text>
|
||||
<div ref="container" class="compose-diff"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
|
||||
<el-button type="success" @click="confirm(newContent)">
|
||||
<el-button type="success" @click="confirm(true)">
|
||||
{{ $t('app.useNew') }}
|
||||
</el-button>
|
||||
<el-button type="primary" @click="confirm('')">
|
||||
<el-button type="primary" @click="confirm(false)">
|
||||
{{ $t('app.useDefault') }}
|
||||
</el-button>
|
||||
</span>
|
||||
|
@ -56,33 +27,77 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { Codemirror } from 'vue-codemirror';
|
||||
import { javascript } from '@codemirror/lang-javascript';
|
||||
import { oneDark } from '@codemirror/theme-one-dark';
|
||||
const extensions = [javascript(), oneDark];
|
||||
import { nextTick, ref } from 'vue';
|
||||
import * as monaco from 'monaco-editor';
|
||||
|
||||
const open = ref(false);
|
||||
const newContent = ref('');
|
||||
const oldContent = ref('');
|
||||
const em = defineEmits(['confirm']);
|
||||
|
||||
let originalModel = null;
|
||||
let modifiedModel = null;
|
||||
let editor: monaco.editor.IStandaloneDiffEditor = null;
|
||||
|
||||
const container = ref();
|
||||
|
||||
const handleClose = () => {
|
||||
open.value = false;
|
||||
if (editor) {
|
||||
editor.dispose();
|
||||
}
|
||||
};
|
||||
|
||||
const acceptParams = (oldCompose: string, newCompose: string) => {
|
||||
oldContent.value = oldCompose;
|
||||
newContent.value = newCompose;
|
||||
open.value = true;
|
||||
initEditor();
|
||||
};
|
||||
|
||||
const confirm = (content: string) => {
|
||||
const confirm = (useEditor: boolean) => {
|
||||
let content = '';
|
||||
if (useEditor) {
|
||||
content = editor.getModifiedEditor().getValue();
|
||||
} else {
|
||||
content = '';
|
||||
}
|
||||
em('confirm', content);
|
||||
handleClose();
|
||||
};
|
||||
|
||||
const initEditor = () => {
|
||||
if (editor) {
|
||||
editor.dispose();
|
||||
}
|
||||
nextTick(() => {
|
||||
originalModel = monaco.editor.createModel(oldContent.value, 'yaml');
|
||||
modifiedModel = monaco.editor.createModel(newContent.value, 'yaml');
|
||||
|
||||
editor = monaco.editor.createDiffEditor(container.value, {
|
||||
theme: 'vs-dark',
|
||||
readOnly: false,
|
||||
automaticLayout: true,
|
||||
folding: true,
|
||||
roundedSelection: false,
|
||||
overviewRulerBorder: false,
|
||||
});
|
||||
|
||||
editor.setModel({
|
||||
original: originalModel,
|
||||
modified: modifiedModel,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
acceptParams,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.compose-diff {
|
||||
width: 100%;
|
||||
height: calc(100vh - 350px);
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -149,7 +149,10 @@ const toLink = (link: string) => {
|
|||
window.open(link, '_blank');
|
||||
};
|
||||
|
||||
const openDiff = () => {
|
||||
const openDiff = async () => {
|
||||
if (newContent.value === '') {
|
||||
await getVersions(operateReq.version);
|
||||
}
|
||||
composeDiffRef.value.acceptParams(oldContent.value, newContent.value);
|
||||
};
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue