mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2026-09-25 16:00:56 +00:00
style: Adjust memo style (#11793)
This commit is contained in:
@@ -165,7 +165,6 @@
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
||||
<el-carousel
|
||||
v-if="rightCard === 'server'"
|
||||
class="my-carousel"
|
||||
:key="simpleNodes.length"
|
||||
height="368px"
|
||||
@@ -175,9 +174,6 @@
|
||||
<el-carousel-item key="systemInfo">
|
||||
<CardWithHeader :header="$t('home.systemInfo')">
|
||||
<template #header-r>
|
||||
<el-tooltip :content="$t('home.memo')" placement="top">
|
||||
<el-button class="h-button-setting" @click="showMemoCard" link icon="Management" />
|
||||
</el-tooltip>
|
||||
<el-tooltip :content="$t('commons.button.refresh')" placement="top">
|
||||
<el-button class="h-button-setting" @click="refreshDashboard" link icon="Refresh" />
|
||||
</el-tooltip>
|
||||
@@ -280,13 +276,50 @@
|
||||
</template>
|
||||
</CardWithHeader>
|
||||
</el-carousel-item>
|
||||
<el-carousel-item key="memoInfo">
|
||||
<CardWithHeader :header="$t('home.memo')" class="memo-card">
|
||||
<template #header-r>
|
||||
<el-tooltip v-if="!memoEditing" :content="$t('commons.button.edit')" placement="top">
|
||||
<el-button class="h-button-setting" @click="startMemoEdit" link icon="Edit" />
|
||||
</el-tooltip>
|
||||
<el-tooltip v-if="memoEditing" :content="$t('commons.button.save')" placement="top">
|
||||
<el-button
|
||||
class="h-button-setting"
|
||||
@click="saveMemo"
|
||||
link
|
||||
icon="Check"
|
||||
:loading="memoSaving"
|
||||
/>
|
||||
</el-tooltip>
|
||||
<el-tooltip v-if="memoEditing" :content="$t('commons.button.cancel')" placement="top">
|
||||
<el-button class="h-button-setting" @click="cancelMemoEdit" link icon="Close" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<template #body>
|
||||
<el-scrollbar height="286px">
|
||||
<div class="memo-container ml-5 mr-5">
|
||||
<el-input
|
||||
v-if="memoEditing"
|
||||
v-model="memoEditContent"
|
||||
type="textarea"
|
||||
:rows="10"
|
||||
:maxlength="500"
|
||||
show-word-limit
|
||||
:placeholder="$t('home.memoPlaceholder')"
|
||||
/>
|
||||
<div v-else class="memo-content">
|
||||
<MarkDownEditor v-if="memoContent" :content="memoContent" />
|
||||
<span v-else class="memo-placeholder">
|
||||
{{ $t('home.memoPlaceholder') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
</CardWithHeader>
|
||||
</el-carousel-item>
|
||||
<el-carousel-item key="simpleNode" v-if="showSimpleNode()">
|
||||
<CardWithHeader :header="$t('setting.panel')">
|
||||
<template #header-r>
|
||||
<el-button class="h-button-setting" @click="showMemoCard" link>
|
||||
{{ $t('home.memo') }}
|
||||
</el-button>
|
||||
</template>
|
||||
<template #body>
|
||||
<el-scrollbar height="286px">
|
||||
<div class="simple-node cursor-pointer" v-for="row in simpleNodes" :key="row.id">
|
||||
@@ -320,49 +353,6 @@
|
||||
</CardWithHeader>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<CardWithHeader v-else :header="$t('home.memo')" class="memo-card">
|
||||
<template #header-r>
|
||||
<el-tooltip v-if="!memoEditing" :content="$t('commons.button.edit')" placement="top">
|
||||
<el-button class="h-button-setting" @click="startMemoEdit" link icon="Edit" />
|
||||
</el-tooltip>
|
||||
<el-tooltip v-if="memoEditing" :content="$t('commons.button.save')" placement="top">
|
||||
<el-button
|
||||
class="h-button-setting"
|
||||
@click="saveMemo"
|
||||
link
|
||||
icon="Check"
|
||||
:loading="memoSaving"
|
||||
/>
|
||||
</el-tooltip>
|
||||
<el-tooltip v-if="memoEditing" :content="$t('commons.button.cancel')" placement="top">
|
||||
<el-button class="h-button-setting" @click="cancelMemoEdit" link icon="Close" />
|
||||
</el-tooltip>
|
||||
<el-tooltip :content="$t('commons.button.back')" placement="top">
|
||||
<el-button class="h-button-setting" @click="showServerCard" link icon="Back" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<template #body>
|
||||
<el-scrollbar height="286px">
|
||||
<div class="memo-container ml-5 mr-5">
|
||||
<el-input
|
||||
v-if="memoEditing"
|
||||
v-model="memoEditContent"
|
||||
type="textarea"
|
||||
:rows="10"
|
||||
:maxlength="500"
|
||||
show-word-limit
|
||||
:placeholder="$t('home.memoPlaceholder')"
|
||||
/>
|
||||
<div v-else class="memo-content">
|
||||
<MarkDownEditor v-if="memoContent" :content="memoContent" />
|
||||
<span v-else class="memo-placeholder">
|
||||
{{ $t('home.memoPlaceholder') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
</CardWithHeader>
|
||||
|
||||
<AppLauncher ref="appRef" class="card-interval" />
|
||||
</el-col>
|
||||
@@ -452,8 +442,6 @@ const memoContent = ref('');
|
||||
const memoEditContent = ref('');
|
||||
const memoEditing = ref(false);
|
||||
const memoSaving = ref(false);
|
||||
const rightCard = ref<'server' | 'memo'>('server');
|
||||
const RIGHT_CARD_STORAGE_KEY = 'homeRightCardPreference';
|
||||
|
||||
const baseInfo = ref<Dashboard.BaseInfo>({
|
||||
hostname: '',
|
||||
@@ -792,16 +780,6 @@ const saveMemo = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const showMemoCard = () => {
|
||||
rightCard.value = 'memo';
|
||||
localStorage.setItem(RIGHT_CARD_STORAGE_KEY, rightCard.value);
|
||||
};
|
||||
|
||||
const showServerCard = () => {
|
||||
rightCard.value = 'server';
|
||||
localStorage.setItem(RIGHT_CARD_STORAGE_KEY, rightCard.value);
|
||||
};
|
||||
|
||||
const loadData = async () => {
|
||||
if (chartOption.value === 'io') {
|
||||
chartsOption.value['ioChart'] = {
|
||||
@@ -952,10 +930,6 @@ const clearTimer = () => {
|
||||
onMounted(() => {
|
||||
fetchData();
|
||||
loadMemo();
|
||||
const savedRightCard = localStorage.getItem(RIGHT_CARD_STORAGE_KEY);
|
||||
if (savedRightCard === 'memo' || savedRightCard === 'server') {
|
||||
rightCard.value = savedRightCard;
|
||||
}
|
||||
if (localStorage.getItem('welcomeShow') !== 'false') {
|
||||
loadWelcome();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user