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

feat: update text widget

Browse Source
This commit is contained in:
Fine 2023-11-14 12:50:22 +08:00
parent e52ec0066f
commit d9e521cbd8
3 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/views/dashboard/configuration/Text.vue
View File

@ -89,6 +89,7 @@ limitations under the License. -->
const fontSize = ref<number>(graph.fontSize || 12); const fontSize = ref<number>(graph.fontSize || 12);
const textAlign = ref(graph.textAlign || "left"); const textAlign = ref(graph.textAlign || "left");
const Colors = [ const Colors = [
{ label: "Theme", value: "theme" },
{ {
label: "Green", label: "Green",
value: "green", value: "green",

14
src/views/dashboard/controls/Text.vue
View File

@ -32,7 +32,7 @@ limitations under the License. -->
<div <div
class="body" class="body"
:style="{ :style="{
backgroundColor: TextColors[graph.backgroundColor], backgroundColor,
justifyContent: graph.textAlign, justifyContent: graph.textAlign,
}" }"
> >
@ -40,7 +40,7 @@ limitations under the License. -->
:href="graph.url" :href="graph.url"
target="_blank" target="_blank"
:style="{ :style="{
color: TextColors[graph.fontColor], color: fontColor,
fontSize: graph.fontSize + 'px', fontSize: graph.fontSize + 'px',
}" }"
> >
@ -55,6 +55,8 @@ limitations under the License. -->
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useDashboardStore } from "@/store/modules/dashboard"; import { useDashboardStore } from "@/store/modules/dashboard";
import { TextColors } from "@/views/dashboard/data"; import { TextColors } from "@/views/dashboard/data";
import { useAppStoreWithOut } from "@/store/modules/app";
import { Themes } from "@/constants/data";
/*global defineProps */ /*global defineProps */
const props = defineProps({ const props = defineProps({
@ -65,9 +67,17 @@ limitations under the License. -->
activeIndex: { type: String, default: "" }, activeIndex: { type: String, default: "" },
}); });
const { t } = useI18n(); const { t } = useI18n();
const appStore = useAppStoreWithOut();
const graph = computed(() => props.data.graph || {}); const graph = computed(() => props.data.graph || {});
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const backgroundColor = computed(
() => TextColors[graph.value.backgroundColor] || (appStore.theme === Themes.Dark ? "#212224" : "#fff"),
);
const fontColor = computed(
() => TextColors[graph.value.fontColor] || (appStore.theme === Themes.Dark ? "#fafbfc" : "#3d444f"),
);
function removeTopo() { function removeTopo() {
dashboardStore.removeControls(props.data); dashboardStore.removeControls(props.data);
} }

4
src/views/dashboard/data.ts
View File

@ -306,9 +306,9 @@ export const TextColors: { [key: string]: string } = {
green: "#67C23A", green: "#67C23A",
blue: "#409EFF", blue: "#409EFF",
red: "#F56C6C", red: "#F56C6C",
grey: "#909399", grey: "#809399",
white: "#fff", white: "#fff",
black: "#000", black: "#303133",
orange: "#E6A23C", orange: "#E6A23C",
purple: "#bf99f8", purple: "#bf99f8",
}; };