fix: update time range

src/layout/components/NavBar.vue

@@ -18,10 +18,10 @@ limitations under the License. -->
     <div class="app-config">
       <span class="red" v-show="timeRange">{{ t("timeTips") }}</span>
       <TimePicker
-        v-model="time"
         :value="time"
         position="bottom"
         format="YYYY-MM-DD HH:mm"
+        @input="changeTimeRange"
       />
       <span>
         UTC{{ utcHour >= 0 ? "+" : ""
@@ -62,19 +62,18 @@ const setConfig = (value: string) => {
   pageName.value = value || "";
   theme.value = route.path.includes("/infrastructure/") ? "dark" : "light";
 };
-const time = computed({
+const time = computed(() => [
-  get() {
+  appStore.durationRow.start,
-    return [appStore.durationRow.start, appStore.durationRow.end];
+  appStore.durationRow.end,
-  },
+]);
-  set(val: Date[]) {
+function changeTimeRange(val: Date[]) {
   timeRange.value =
     val[1].getTime() - val[0].getTime() > 60 * 24 * 60 * 60 * 1000 ? 1 : 0;
   if (timeRange.value) {
     return;
   }
   appStore.setDuration(timeFormat(val));
-  },
+}
-});
 setConfig(String(route.meta.title));
 watch(
   () => route.meta.title,
@@ -93,17 +92,20 @@ watch(
   color: #222;
   font-size: 12px;
 }
+
 .nav-bar.dark {
   background-color: #333840;
   border-bottom: 1px solid #252a2f;
   color: #fafbfc;
 }
+
 .title {
   font-size: 14px;
   font-weight: 500;
   height: 28px;
   line-height: 28px;
 }
+
 .nav-tabs {
   padding: 10px;
 }

src/store/modules/app.ts

@@ -98,6 +98,7 @@ export const appStore = defineStore({
   actions: {
     setDuration(data: Duration): void {
       this.durationRow = data;
+      localStorage.setItem("durationRow", JSON.stringify(data, null, 0));
       if ((window as any).axiosCancel.length !== 0) {
         for (const event of (window as any).axiosCancel) {
           setTimeout(event(), 0);

src/views/dashboard/controls/Widget.vue

@@ -16,6 +16,10 @@ limitations under the License. -->
   <div class="widget">
     <div class="header flex-h">
       <div>{{ data.widget.title || "" }}</div>
+      <div>
+        <el-tooltip :content="data.widget.tips">
+          <Icon iconName="info_outline" size="sm" class="operation" />
+        </el-tooltip>
         <el-popover
           placement="bottom"
           trigger="click"
@@ -32,6 +36,7 @@ limitations under the License. -->
           </div>
         </el-popover>
       </div>
+    </div>
     <div class="body" v-if="data.graph.type" v-loading="loading">
       <component
         :is="data.graph.type"