mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-10-15 12:49:17 +00:00
build: migrate the build tool from vue-cli to vite4 (#208)
This commit is contained in:
Fine0830
@@ -30,24 +30,10 @@ limitations under the License. -->
|
||||
<div>
|
||||
<span>UTC</span>
|
||||
<span class="ml-5 mr-5">{{ utcHour >= 0 ? "+" : "" }}</span>
|
||||
<input
|
||||
type="number"
|
||||
v-model="utcHour"
|
||||
min="-12"
|
||||
max="14"
|
||||
class="utc-input"
|
||||
@change="setUTCHour"
|
||||
/>
|
||||
<input type="number" v-model="utcHour" min="-12" max="14" class="utc-input" @change="setUTCHour" />
|
||||
<span class="ml-5 mr-5">:</span>
|
||||
<span class="utc-min">{{ utcMin > 9 || utcMin === 0 ? null : 0 }}</span>
|
||||
<input
|
||||
type="number"
|
||||
v-model="utcMin"
|
||||
min="0"
|
||||
max="59"
|
||||
class="utc-input"
|
||||
@change="setUTCMin"
|
||||
/>
|
||||
<input type="number" v-model="utcMin" min="0" max="59" class="utc-input" @change="setUTCMin" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-h item">
|
||||
@@ -55,12 +41,7 @@ limitations under the License. -->
|
||||
<el-switch v-model="auto" @change="handleAuto" style="height: 25px" />
|
||||
<div class="auto-time ml-5">
|
||||
<span class="auto-select">
|
||||
<input
|
||||
type="number"
|
||||
v-model="autoTime"
|
||||
@change="changeAutoTime"
|
||||
min="1"
|
||||
/>
|
||||
<input type="number" v-model="autoTime" @change="changeAutoTime" min="1" />
|
||||
</span>
|
||||
{{ t("second") }}
|
||||
<i class="ml-10">{{ t("timeReload") }}</i>
|
||||
@@ -69,137 +50,136 @@ limitations under the License. -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import timeFormat from "@/utils/timeFormat";
|
||||
import { Languages } from "@/constants/data";
|
||||
import Selector from "@/components/Selector.vue";
|
||||
import getLocalTime from "@/utils/localtime";
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import timeFormat from "@/utils/timeFormat";
|
||||
import { Languages } from "@/constants/data";
|
||||
import Selector from "@/components/Selector.vue";
|
||||
import getLocalTime from "@/utils/localtime";
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
const appStore = useAppStoreWithOut();
|
||||
const lang = ref<string>(locale.value || "en");
|
||||
const autoTime = ref<number>(6);
|
||||
const auto = ref<boolean>(appStore.autoRefresh || false);
|
||||
const utcHour = ref<number>(appStore.utcHour);
|
||||
const utcMin = ref<number>(appStore.utcMin);
|
||||
const { t, locale } = useI18n();
|
||||
const appStore = useAppStoreWithOut();
|
||||
const lang = ref<string>(locale.value || "en");
|
||||
const autoTime = ref<number>(6);
|
||||
const auto = ref<boolean>(appStore.autoRefresh || false);
|
||||
const utcHour = ref<number>(appStore.utcHour);
|
||||
const utcMin = ref<number>(appStore.utcMin);
|
||||
|
||||
appStore.setPageTitle("Setting");
|
||||
const handleReload = () => {
|
||||
const gap =
|
||||
appStore.duration.end.getTime() - appStore.duration.start.getTime();
|
||||
const dates: Date[] = [
|
||||
getLocalTime(appStore.utc, new Date(new Date().getTime() - gap)),
|
||||
getLocalTime(appStore.utc, new Date()),
|
||||
];
|
||||
appStore.setDuration(timeFormat(dates));
|
||||
};
|
||||
const handleAuto = () => {
|
||||
if (autoTime.value < 1) {
|
||||
return;
|
||||
}
|
||||
appStore.setAutoRefresh(auto.value);
|
||||
if (auto.value) {
|
||||
handleReload();
|
||||
appStore.setReloadTimer(setInterval(handleReload, autoTime.value * 1000));
|
||||
} else {
|
||||
appStore.setPageTitle("Setting");
|
||||
const handleReload = () => {
|
||||
const gap = appStore.duration.end.getTime() - appStore.duration.start.getTime();
|
||||
const dates: Date[] = [
|
||||
getLocalTime(appStore.utc, new Date(new Date().getTime() - gap)),
|
||||
getLocalTime(appStore.utc, new Date()),
|
||||
];
|
||||
appStore.setDuration(timeFormat(dates));
|
||||
};
|
||||
const handleAuto = () => {
|
||||
if (autoTime.value < 1) {
|
||||
return;
|
||||
}
|
||||
appStore.setAutoRefresh(auto.value);
|
||||
if (auto.value) {
|
||||
handleReload();
|
||||
appStore.setReloadTimer(setInterval(handleReload, autoTime.value * 1000));
|
||||
} else {
|
||||
if (appStore.reloadTimer) {
|
||||
clearInterval(appStore.reloadTimer);
|
||||
}
|
||||
}
|
||||
};
|
||||
const changeAutoTime = () => {
|
||||
if (autoTime.value < 1) {
|
||||
return;
|
||||
}
|
||||
if (appStore.reloadTimer) {
|
||||
clearInterval(appStore.reloadTimer);
|
||||
}
|
||||
}
|
||||
};
|
||||
const changeAutoTime = () => {
|
||||
if (autoTime.value < 1) {
|
||||
return;
|
||||
}
|
||||
if (appStore.reloadTimer) {
|
||||
clearInterval(appStore.reloadTimer);
|
||||
}
|
||||
if (auto.value) {
|
||||
handleReload();
|
||||
appStore.setReloadTimer(setInterval(handleReload, autoTime.value * 1000));
|
||||
}
|
||||
};
|
||||
const setLang = (): void => {
|
||||
locale.value = lang.value;
|
||||
window.localStorage.setItem("language", lang.value);
|
||||
};
|
||||
const setUTCHour = () => {
|
||||
if (utcHour.value < -12) {
|
||||
utcHour.value = -12;
|
||||
}
|
||||
if (utcHour.value > 14) {
|
||||
utcHour.value = 14;
|
||||
}
|
||||
if (isNaN(utcHour.value)) {
|
||||
utcHour.value = 0;
|
||||
}
|
||||
appStore.setUTC(utcHour.value, utcMin.value);
|
||||
};
|
||||
const setUTCMin = () => {
|
||||
if (utcMin.value < 0) {
|
||||
utcMin.value = 0;
|
||||
}
|
||||
if (utcMin.value > 59) {
|
||||
utcMin.value = 59;
|
||||
}
|
||||
if (isNaN(utcMin.value)) {
|
||||
utcMin.value = 0;
|
||||
}
|
||||
appStore.setUTC(utcHour.value, utcMin.value);
|
||||
};
|
||||
if (auto.value) {
|
||||
handleReload();
|
||||
appStore.setReloadTimer(setInterval(handleReload, autoTime.value * 1000));
|
||||
}
|
||||
};
|
||||
const setLang = (): void => {
|
||||
locale.value = lang.value;
|
||||
window.localStorage.setItem("language", lang.value);
|
||||
};
|
||||
const setUTCHour = () => {
|
||||
if (utcHour.value < -12) {
|
||||
utcHour.value = -12;
|
||||
}
|
||||
if (utcHour.value > 14) {
|
||||
utcHour.value = 14;
|
||||
}
|
||||
if (isNaN(utcHour.value)) {
|
||||
utcHour.value = 0;
|
||||
}
|
||||
appStore.setUTC(utcHour.value, utcMin.value);
|
||||
};
|
||||
const setUTCMin = () => {
|
||||
if (utcMin.value < 0) {
|
||||
utcMin.value = 0;
|
||||
}
|
||||
if (utcMin.value > 59) {
|
||||
utcMin.value = 59;
|
||||
}
|
||||
if (isNaN(utcMin.value)) {
|
||||
utcMin.value = 0;
|
||||
}
|
||||
appStore.setUTC(utcHour.value, utcMin.value);
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.utc-input {
|
||||
color: inherit;
|
||||
background: 0;
|
||||
border: 0;
|
||||
outline: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.utc-min {
|
||||
display: inline-block;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.auto-select {
|
||||
border-radius: 3px;
|
||||
background-color: #fff;
|
||||
padding: 1px;
|
||||
|
||||
input {
|
||||
width: 38px;
|
||||
border-style: unset;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.settings {
|
||||
color: #606266;
|
||||
font-size: 13px;
|
||||
padding: 20px;
|
||||
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
.utc-input {
|
||||
color: inherit;
|
||||
background: 0;
|
||||
border: 0;
|
||||
outline: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
outline: 0;
|
||||
width: 50px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ccc;
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 180px;
|
||||
.utc-min {
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
line-height: 25px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.auto-select {
|
||||
border-radius: 3px;
|
||||
background-color: #fff;
|
||||
padding: 1px;
|
||||
|
||||
input {
|
||||
width: 38px;
|
||||
border-style: unset;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.settings {
|
||||
color: #606266;
|
||||
font-size: 13px;
|
||||
padding: 20px;
|
||||
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
input {
|
||||
outline: 0;
|
||||
width: 50px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ccc;
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 180px;
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user