diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index 27501d0a..d5185707 100644
--- a/src/layout/components/NavBar.vue
+++ b/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({
-  get() {
-    return [appStore.durationRow.start, appStore.durationRow.end];
-  },
-  set(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));
-  },
-});
+const time = computed(() => [
+  appStore.durationRow.start,
+  appStore.durationRow.end,
+]);
+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;
 }
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index a26b938d..e89f1e3b 100644
--- a/src/store/modules/app.ts
+++ b/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);
diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue
index 40265574..f6c35b98 100644
--- a/src/views/dashboard/controls/Widget.vue
+++ b/src/views/dashboard/controls/Widget.vue
@@ -16,21 +16,26 @@ limitations under the License. -->
   <div class="widget">
     <div class="header flex-h">
       <div>{{ data.widget.title || "" }}</div>
-      <el-popover
-        placement="bottom"
-        trigger="click"
-        :style="{ width: '100px' }"
-      >
-        <template #reference>
-          <Icon iconName="ellipsis_v" size="middle" class="operation" />
-        </template>
-        <div class="tools" @click="editConfig">
-          <span>{{ t("edit") }}</span>
-        </div>
-        <div class="tools" @click="removeWidget">
-          <span>{{ t("delete") }}</span>
-        </div>
-      </el-popover>
+      <div>
+        <el-tooltip :content="data.widget.tips">
+          <Icon iconName="info_outline" size="sm" class="operation" />
+        </el-tooltip>
+        <el-popover
+          placement="bottom"
+          trigger="click"
+          :style="{ width: '100px' }"
+        >
+          <template #reference>
+            <Icon iconName="ellipsis_v" size="middle" class="operation" />
+          </template>
+          <div class="tools" @click="editConfig">
+            <span>{{ t("edit") }}</span>
+          </div>
+          <div class="tools" @click="removeWidget">
+            <span>{{ t("delete") }}</span>
+          </div>
+        </el-popover>
+      </div>
     </div>
     <div class="body" v-if="data.graph.type" v-loading="loading">
       <component