diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue
index ffa79087..340b269f 100644
--- a/src/views/dashboard/Edit.vue
+++ b/src/views/dashboard/Edit.vue
@@ -36,14 +36,7 @@ limitations under the License. -->
       :destroy-on-close="true"
       @closed="dashboardStore.setWidgetLink(false)"
     >
-      <div>
-        <label>{{ t("setDuration") }}</label>
-        <el-switch v-model="hasDuration" />
-      </div>
-      <div>
-        <span class="link">{{ widgetLink }}</span>
-        <el-button type="primary">{{ t("generateLink") }}</el-button>
-      </div>
+      <WidgetLink />
     </el-dialog>
   </div>
 </template>
@@ -57,18 +50,18 @@ limitations under the License. -->
   import { useAppStoreWithOut } from "@/store/modules/app";
   import Configuration from "./configuration";
   import type { LayoutConfig } from "@/types/dashboard";
+  import WidgetLink from "./components/WidgetLink.vue";
 
   export default defineComponent({
     name: "Dashboard",
-    components: { ...Configuration, GridLayout, Tool },
+    components: { ...Configuration, GridLayout, Tool, WidgetLink },
     setup() {
       const dashboardStore = useDashboardStore();
       const appStore = useAppStoreWithOut();
       const { t } = useI18n();
       const p = useRoute().params;
       const layoutKey = ref<string>(`${p.layerId}_${p.entity}_${p.name}`);
-      const hasDuration = ref<boolean>(false);
-      const widgetLink = ref<string>("");
+
       setTemplate();
       async function setTemplate() {
         await dashboardStore.setDashboards();
@@ -125,8 +118,6 @@ limitations under the License. -->
         t,
         handleClick,
         dashboardStore,
-        hasDuration,
-        widgetLink,
       };
     },
   });
@@ -135,8 +126,4 @@ limitations under the License. -->
   .ds-main {
     overflow: auto;
   }
-
-  .link {
-    color: #999;
-  }
 </style>
diff --git a/src/views/dashboard/components/WidgetLink.vue b/src/views/dashboard/components/WidgetLink.vue
new file mode 100644
index 00000000..56a9d808
--- /dev/null
+++ b/src/views/dashboard/components/WidgetLink.vue
@@ -0,0 +1,37 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template lang="">
+  <div>
+    <div>
+      <label>{{ t("setDuration") }}</label>
+      <el-switch v-model="hasDuration" />
+    </div>
+    <div>
+      <span class="link">{{ widgetLink }}</span>
+      <el-button type="primary">{{ t("generateLink") }}</el-button>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref } from "vue";
+
+  const hasDuration = ref<boolean>(false);
+  const widgetLink = ref<string>("");
+</script>
+<style lang="scss" scoped>
+  .link {
+    color: #999;
+  }
+</style>