github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-12 15:52:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: update

Browse Source
This commit is contained in:
Fine 2023-12-07 16:27:03 +08:00
parent b2dd8a5281
commit 15a7ffa241
2 changed files with 11 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/layout/components/NavBar.vue
View File

@ -93,7 +93,8 @@ limitations under the License. -->
const savedTheme = window.localStorage.getItem("theme-is-dark"); const savedTheme = window.localStorage.getItem("theme-is-dark");
if (savedTheme === "false") { if (savedTheme === "false") {
theme.value = false; theme.value = false;
} else if (savedTheme === "") { }
if (savedTheme === "") {
// read the theme preference from system setting if there is no user setting // read the theme preference from system setting if there is no user setting
theme.value = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches; theme.value = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
} }

45
src/views/dashboard/configuration/Tab.vue
View File

@ -13,11 +13,7 @@ limitations under the License. -->
<template> <template>
<div class="item"> <div class="item">
<span class="label">{{ t("expressions") }}</span> <span class="label">{{ t("expressions") }}</span>
<div v-for="(exp, index) in expressions" :key="index" class="mb-10"> <el-input class="input" v-model="expressions" size="small" @change="changeConfig" />
<div class="expression-param" contenteditable="true" @blur="changeExpression($event, index)">
{{ exp }}
</div>
</div>
</div> </div>
<div class="footer"> <div class="footer">
<el-button size="small" @click="cancelConfig"> <el-button size="small" @click="cancelConfig">
@ -35,23 +31,12 @@ limitations under the License. -->
const { t } = useI18n(); const { t } = useI18n();
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const originConfig = dashboardStore.selectedGrid; const originConfig = dashboardStore.selectedGrid;
const expressions = ref<string[]>(originConfig.expressions || []); const expressions = ref<string>(originConfig.expressions);
console.log(expressions);
async function changeExpression(event: any, index: number) {
const params = (event.target.textContent || "").replace(/\s+/g, "");
expressions.value[index] = params; function changeConfig() {
dashboardStore.selectWidget({
...dashboardStore.selectedGrid,
expressions: expressions.value,
});
}
function changeConfig(param: { [key: string]: unknown }) {
const { selectedGrid } = dashboardStore; const { selectedGrid } = dashboardStore;
dashboardStore.selectWidget({
...selectedGrid, dashboardStore.selectWidget({ ...selectedGrid, expressions: expressions.value });
...param,
});
} }
function applyConfig() { function applyConfig() {
dashboardStore.setConfigPanel(false); dashboardStore.setConfigPanel(false);
@ -64,22 +49,6 @@ limitations under the License. -->
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.expression-param {
display: inline-block;
width: 400px;
border: 1px solid $border-color;
cursor: text;
padding: 0 5px;
border-radius: 3px;
outline: none;
margin-right: 5px;
min-height: 26px;
&:focus {
border-color: $active-color;
}
}
.label { .label {
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
@ -91,6 +60,10 @@ limitations under the License. -->
margin-bottom: 10px; margin-bottom: 10px;
} }
.input {
width: 500px;
}
.footer { .footer {
position: fixed; position: fixed;
bottom: 0; bottom: 0;