update style

This commit is contained in:
Qiuxia Fan 2022-05-25 16:05:03 +08:00
parent 96b7662e23
commit f031944f71
4 changed files with 13 additions and 15 deletions

View File

@ -22,14 +22,14 @@ import graphql from "@/graphql";
import { AxiosResponse } from "axios"; import { AxiosResponse } from "axios";
import { useAppStoreWithOut } from "@/store/modules/app"; import { useAppStoreWithOut } from "@/store/modules/app";
import { useSelectorStore } from "@/store/modules/selectors"; import { useSelectorStore } from "@/store/modules/selectors";
import { Conditions, DemandLog } from "@/types/demand-log"; import { Conditions, Log } from "@/types/demand-log";
interface DemandLogState { interface DemandLogState {
containers: Instance[]; containers: Instance[];
instances: Instance[]; instances: Instance[];
conditions: Conditions; conditions: Conditions;
selectorStore: any; selectorStore: any;
logs: DemandLog[]; logs: Log[];
loadLogs: boolean; loadLogs: boolean;
namespaces: Option[]; namespaces: Option[];
} }

View File

@ -27,7 +27,7 @@ export interface Conditions {
excludingKeywordsOfContent?: string; excludingKeywordsOfContent?: string;
} }
export interface DemandLog { export interface Log {
content: string; content: string;
timestamp: number; timestamp: number;
contentType: string; contentType: string;

View File

@ -32,9 +32,7 @@ limitations under the License. -->
<div class="header"> <div class="header">
<Header /> <Header />
</div> </div>
<div class="log"> <Content />
<Content />
</div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -92,8 +90,4 @@ function removeWidget() {
background-color: #eee; background-color: #eee;
} }
} }
.log {
width: 100%;
}
</style> </style>

View File

@ -13,11 +13,16 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="log-content" ref="logContent"></div> <div
class="log-content"
ref="logContent"
style="width: 100%; height: calc(100% - 140px)"
></div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, ref, onUnmounted } from "vue"; import { onMounted, ref, onUnmounted } from "vue";
import { useDemandLogStore } from "@/store/modules/demand-log"; import { useDemandLogStore } from "@/store/modules/demand-log";
import { Log } from "@/types/demand-log";
/*global Nullable */ /*global Nullable */
const demandLogStore = useDemandLogStore(); const demandLogStore = useDemandLogStore();
@ -30,9 +35,10 @@ onMounted(() => {
}); });
}); });
function monacoInstanceGen(monaco: any) { function monacoInstanceGen(monaco: any) {
const value = demandLogStore.logs.map((d: Log) => d.content).join("\n");
monaco.languages.register({ id: "custom" }); monaco.languages.register({ id: "custom" });
monacoInstance.value = monaco.editor.create(logContent.value, { monacoInstance.value = monaco.editor.create(logContent.value, {
value: demandLogStore.logs, value: "console.log(123)", // value
language: "javascript", language: "javascript",
}); });
} }
@ -42,9 +48,7 @@ onUnmounted(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.log-content { .log-content {
min-height: 300px;
width: 100%;
min-width: 600px; min-width: 600px;
height: calc(100% - 140px); min-height: 400px;
} }
</style> </style>