mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-12-19 05:49:02 +08:00
style: 部分页面增加自适应 (#6127)
Some checks failed
sync2gitee / repo-sync (push) Failing after -7m51s
Some checks failed
sync2gitee / repo-sync (push) Failing after -7m51s
This commit is contained in:
parent
46fda7ecfb
commit
226bf9d8d2
15 changed files with 63 additions and 68 deletions
|
|
@ -136,7 +136,7 @@ func (a *AppInstallRepo) Create(ctx context.Context, install *model.AppInstall)
|
||||||
}
|
}
|
||||||
|
|
||||||
func (a *AppInstallRepo) Save(ctx context.Context, install *model.AppInstall) error {
|
func (a *AppInstallRepo) Save(ctx context.Context, install *model.AppInstall) error {
|
||||||
return getTx(ctx).Debug().Omit("App").Save(&install).Error
|
return getTx(ctx).Omit("App").Save(&install).Error
|
||||||
}
|
}
|
||||||
|
|
||||||
func (a *AppInstallRepo) DeleteBy(opts ...DBOption) error {
|
func (a *AppInstallRepo) DeleteBy(opts ...DBOption) error {
|
||||||
|
|
|
||||||
|
|
@ -182,7 +182,7 @@ func (a AppService) GetAppDetail(appID uint, version, appType string) (response.
|
||||||
|
|
||||||
versionPath := filepath.Join(app.GetAppResourcePath(), detail.Version)
|
versionPath := filepath.Join(app.GetAppResourcePath(), detail.Version)
|
||||||
if !fileOp.Stat(versionPath) || detail.Update {
|
if !fileOp.Stat(versionPath) || detail.Update {
|
||||||
if err = downloadApp(app, detail, nil, nil); err != nil {
|
if err = downloadApp(app, detail, nil, nil); err != nil && !fileOp.Stat(versionPath) {
|
||||||
return appDetailDTO, err
|
return appDetailDTO, err
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -201,10 +201,7 @@ func (w WebsiteService) PageWebsite(req request.WebsiteSearch) (int64, []respons
|
||||||
|
|
||||||
func (w WebsiteService) GetWebsites() ([]response.WebsiteDTO, error) {
|
func (w WebsiteService) GetWebsites() ([]response.WebsiteDTO, error) {
|
||||||
var websiteDTOs []response.WebsiteDTO
|
var websiteDTOs []response.WebsiteDTO
|
||||||
websites, err := websiteRepo.List(commonRepo.WithOrderRuleBy("primary_domain", "ascending"))
|
websites, _ := websiteRepo.List(commonRepo.WithOrderRuleBy("primary_domain", "ascending"))
|
||||||
if err != nil {
|
|
||||||
return nil, err
|
|
||||||
}
|
|
||||||
for _, web := range websites {
|
for _, web := range websites {
|
||||||
res := response.WebsiteDTO{
|
res := response.WebsiteDTO{
|
||||||
Website: web,
|
Website: web,
|
||||||
|
|
@ -513,10 +510,7 @@ func (w WebsiteService) GetWebsiteOptions(req request.WebsiteOptionReq) ([]respo
|
||||||
if len(req.Types) > 0 {
|
if len(req.Types) > 0 {
|
||||||
options = append(options, websiteRepo.WithTypes(req.Types))
|
options = append(options, websiteRepo.WithTypes(req.Types))
|
||||||
}
|
}
|
||||||
webs, err := websiteRepo.List(options...)
|
webs, _ := websiteRepo.List(options...)
|
||||||
if err != nil {
|
|
||||||
return nil, err
|
|
||||||
}
|
|
||||||
var datas []response.WebsiteOption
|
var datas []response.WebsiteOption
|
||||||
for _, web := range webs {
|
for _, web := range webs {
|
||||||
var item response.WebsiteOption
|
var item response.WebsiteOption
|
||||||
|
|
@ -2903,3 +2897,7 @@ func (w WebsiteService) UpdateDefaultHtml(req request.WebsiteHtmlUpdate) error {
|
||||||
}
|
}
|
||||||
return fileOp.SaveFile(resourcePath, req.Content, 0644)
|
return fileOp.SaveFile(resourcePath, req.Content, 0644)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
func (w WebsiteService) GetUpStreams() ([]dto.NginxUpstream, error) {
|
||||||
|
return nil, nil
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@ package http
|
||||||
|
|
||||||
import (
|
import (
|
||||||
"context"
|
"context"
|
||||||
|
"errors"
|
||||||
"io"
|
"io"
|
||||||
"net/http"
|
"net/http"
|
||||||
"time"
|
"time"
|
||||||
|
|
@ -35,6 +36,9 @@ func HandleGetWithTransport(url, method string, transport *http.Transport, timeo
|
||||||
if err != nil {
|
if err != nil {
|
||||||
return 0, nil, err
|
return 0, nil, err
|
||||||
}
|
}
|
||||||
|
if resp.StatusCode != http.StatusOK {
|
||||||
|
return 0, nil, errors.New(resp.Status)
|
||||||
|
}
|
||||||
body, err := io.ReadAll(resp.Body)
|
body, err := io.ReadAll(resp.Body)
|
||||||
if err != nil {
|
if err != nil {
|
||||||
return 0, nil, err
|
return 0, nil, err
|
||||||
|
|
|
||||||
|
|
@ -38,8 +38,8 @@ export const GetWebsite = (id: number) => {
|
||||||
return http.get<Website.WebsiteDTO>(`/websites/${id}`);
|
return http.get<Website.WebsiteDTO>(`/websites/${id}`);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const GetWebsiteOptions = () => {
|
export const GetWebsiteOptions = (req: Website.OptionReq) => {
|
||||||
return http.get<any>(`/websites/options`);
|
return http.post<any>(`/websites/options`, req);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const GetWebsiteConfig = (id: number, type: string) => {
|
export const GetWebsiteConfig = (id: number, type: string) => {
|
||||||
|
|
|
||||||
|
|
@ -33,9 +33,6 @@
|
||||||
<template v-if="slots.leftToolBar" #buttons>
|
<template v-if="slots.leftToolBar" #buttons>
|
||||||
<slot name="leftToolBar" v-if="slots.leftToolBar"></slot>
|
<slot name="leftToolBar" v-if="slots.leftToolBar"></slot>
|
||||||
</template>
|
</template>
|
||||||
<!-- <template v-else-if="slots.buttons" #buttons>
|
|
||||||
<slot name="buttons"></slot>
|
|
||||||
</template> -->
|
|
||||||
</back-button>
|
</back-button>
|
||||||
<div>
|
<div>
|
||||||
<slot name="rightToolBar" v-if="slots.rightToolBar"></slot>
|
<slot name="rightToolBar" v-if="slots.rightToolBar"></slot>
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,7 @@
|
||||||
language="JavaScript"
|
language="JavaScript"
|
||||||
:autodetect="false"
|
:autodetect="false"
|
||||||
:code="content"
|
:code="content"
|
||||||
|
:style="editorStyle"
|
||||||
></highlightjs>
|
></highlightjs>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -37,6 +38,15 @@ interface LogProps {
|
||||||
tail?: boolean;
|
tail?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const editorStyle = computed(() => {
|
||||||
|
const height = 'calc(100vh - ' + props.heightDiff + 'px)';
|
||||||
|
return {
|
||||||
|
height,
|
||||||
|
width: '100%',
|
||||||
|
overflow: 'auto',
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
config: {
|
config: {
|
||||||
type: Object as () => LogProps | null,
|
type: Object as () => LogProps | null,
|
||||||
|
|
@ -47,10 +57,6 @@ const props = defineProps({
|
||||||
tail: false,
|
tail: false,
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
style: {
|
|
||||||
type: String,
|
|
||||||
default: 'height: calc(100vh - 200px); width: 100%; min-height: 400px; overflow: auto;',
|
|
||||||
},
|
|
||||||
defaultButton: {
|
defaultButton: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true,
|
default: true,
|
||||||
|
|
@ -63,6 +69,10 @@ const props = defineProps({
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
|
heightDiff: {
|
||||||
|
type: Number,
|
||||||
|
default: 500,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
const data = ref({
|
const data = ref({
|
||||||
enable: false,
|
enable: false,
|
||||||
|
|
@ -246,7 +256,7 @@ const initCodemirror = () => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
let hljsDom = scrollerElement.value.querySelector('.hljs') as HTMLElement;
|
let hljsDom = scrollerElement.value.querySelector('.hljs') as HTMLElement;
|
||||||
hljsDom.style['min-height'] = '100px';
|
hljsDom.style.minHeight = '95%';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
@ -264,9 +274,7 @@ defineExpose({ changeTail, onDownload, clearLog });
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.editor-main {
|
.editor-main {
|
||||||
height: calc(100vh - 480px);
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 600px;
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,36 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="overflow-y-auto overflow-x-hidden" :style="'height: ' + mainHeight + 'px'">
|
<div class="main-div" :style="{ '--main-height': mainHeight + 'px' }">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted, onUnmounted, computed } from 'vue';
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
heightDiff: {
|
heightDiff: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 0,
|
default: 0,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
const windowHeight = ref(window.innerHeight);
|
||||||
|
const mainHeight = computed(() => windowHeight.value - props.heightDiff);
|
||||||
|
|
||||||
let mainHeight = ref(0);
|
const updateHeight = () => {
|
||||||
|
windowHeight.value = window.innerHeight;
|
||||||
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
let heightDiff = 300;
|
window.addEventListener('resize', updateHeight);
|
||||||
if (props.heightDiff) {
|
|
||||||
heightDiff = props.heightDiff;
|
|
||||||
}
|
|
||||||
|
|
||||||
mainHeight.value = window.innerHeight - heightDiff;
|
|
||||||
window.onresize = () => {
|
|
||||||
return (() => {
|
|
||||||
mainHeight.value = window.innerHeight - heightDiff;
|
|
||||||
})();
|
|
||||||
};
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener('resize', updateHeight);
|
||||||
|
});
|
||||||
defineOptions({ name: 'MainDiv' });
|
defineOptions({ name: 'MainDiv' });
|
||||||
</script>
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.main-div {
|
||||||
|
height: var(--main-height);
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -49,17 +49,17 @@
|
||||||
:heightDiff="400"
|
:heightDiff="400"
|
||||||
></CodemirrorPro>
|
></CodemirrorPro>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full">
|
|
||||||
<LogFile
|
|
||||||
ref="logRef"
|
|
||||||
v-model:is-reading="isReading"
|
|
||||||
:config="logConfig"
|
|
||||||
:default-button="false"
|
|
||||||
v-if="mode === 'log' && showLog"
|
|
||||||
:style="'height: calc(100vh - 370px);min-height: 200px'"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<div class="w-full h-32">
|
||||||
|
<LogFile
|
||||||
|
ref="logRef"
|
||||||
|
v-model:is-reading="isReading"
|
||||||
|
:config="logConfig"
|
||||||
|
:default-button="false"
|
||||||
|
v-if="mode === 'log' && showLog"
|
||||||
|
:height-diff="370"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</el-form>
|
</el-form>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<span class="dialog-footer">
|
<span class="dialog-footer">
|
||||||
|
|
|
||||||
|
|
@ -16,21 +16,6 @@
|
||||||
mode="dockerfile"
|
mode="dockerfile"
|
||||||
placeholder="#Define or paste the content of your Dockerfile here"
|
placeholder="#Define or paste the content of your Dockerfile here"
|
||||||
></CodemirrorPro>
|
></CodemirrorPro>
|
||||||
<!-- <codemirror
|
|
||||||
@change="onEdit()"
|
|
||||||
:autofocus="true"
|
|
||||||
placeholder="#Define or paste the content of your Dockerfile here"
|
|
||||||
:indent-with-tab="true"
|
|
||||||
:tabSize="4"
|
|
||||||
style="width: 100%; height: calc(100vh - 520px)"
|
|
||||||
:lineWrapping="true"
|
|
||||||
:matchBrackets="true"
|
|
||||||
theme="cobalt"
|
|
||||||
:styleActiveLine="true"
|
|
||||||
:extensions="extensions"
|
|
||||||
v-model="form.dockerfile"
|
|
||||||
:readOnly="true"
|
|
||||||
/> -->
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item v-else :rules="Rules.requiredSelect" prop="dockerfile">
|
<el-form-item v-else :rules="Rules.requiredSelect" prop="dockerfile">
|
||||||
<el-input @change="onEdit()" clearable v-model="form.dockerfile">
|
<el-input @change="onEdit()" clearable v-model="form.dockerfile">
|
||||||
|
|
@ -56,7 +41,7 @@
|
||||||
:default-button="false"
|
:default-button="false"
|
||||||
v-model:is-reading="isReading"
|
v-model:is-reading="isReading"
|
||||||
v-if="logVisible"
|
v-if="logVisible"
|
||||||
:style="'height: calc(100vh - 370px);min-height: 200px'"
|
:height-diff="370"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<template #footer>
|
<template #footer>
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,7 @@
|
||||||
:default-button="false"
|
:default-button="false"
|
||||||
v-model:is-reading="isReading"
|
v-model:is-reading="isReading"
|
||||||
v-if="showLog"
|
v-if="showLog"
|
||||||
:style="'height: calc(100vh - 397px);min-height: 200px'"
|
:height-diff="420"
|
||||||
/>
|
/>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<span class="dialog-footer">
|
<span class="dialog-footer">
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@
|
||||||
:default-button="false"
|
:default-button="false"
|
||||||
v-model:is-reading="isReading"
|
v-model:is-reading="isReading"
|
||||||
v-if="logVisible"
|
v-if="logVisible"
|
||||||
:style="'height: calc(100vh - 370px);min-height: 200px'"
|
:height-diff="420"
|
||||||
v-model:loading="loading"
|
v-model:loading="loading"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -645,7 +645,7 @@ const loadAppInstalls = async () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const loadWebsites = async () => {
|
const loadWebsites = async () => {
|
||||||
const res = await GetWebsiteOptions();
|
const res = await GetWebsiteOptions({});
|
||||||
websiteOptions.value = res.data || [];
|
websiteOptions.value = res.data || [];
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@
|
||||||
v-if="showLog"
|
v-if="showLog"
|
||||||
v-model:loading="loading"
|
v-model:loading="loading"
|
||||||
v-model:hasContent="hasContent"
|
v-model:hasContent="hasContent"
|
||||||
:style="'height: calc(100vh - 370px);min-height: 200px'"
|
:height-diff="330"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</LayoutContent>
|
</LayoutContent>
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
<el-switch v-model="data.enable" @change="updateEnable"></el-switch>
|
<el-switch v-model="data.enable" @change="updateEnable"></el-switch>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</div>
|
</div>
|
||||||
<LogFile :config="{ id: id, type: 'website', name: logType }" :style="style" ref="logRef">
|
<LogFile :config="{ id: id, type: 'website', name: logType }" ref="logRef">
|
||||||
<template #button>
|
<template #button>
|
||||||
<el-button @click="cleanLog" icon="Delete">
|
<el-button @click="cleanLog" icon="Delete">
|
||||||
{{ $t('commons.button.clean') }}
|
{{ $t('commons.button.clean') }}
|
||||||
|
|
@ -38,7 +38,6 @@ const logType = computed(() => {
|
||||||
const id = computed(() => {
|
const id = computed(() => {
|
||||||
return props.id;
|
return props.id;
|
||||||
});
|
});
|
||||||
const style = ref('height: calc(100vh - 402px); width: 100%; min-height: 300px');
|
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
const data = ref({
|
const data = ref({
|
||||||
enable: false,
|
enable: false,
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue