feat: add dialog

src/locales/lang/en.ts

@@ -181,6 +181,8 @@ const msg = {
   taskTitle: "HTTP request and response collecting rules",
   iframeWidgetTip: "Add a link to a widget",
   iframeSrc: "Iframe Link",
+  generateLink: "Generate Link",
+  setDuration: "Set Duration",
   seconds: "Seconds",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",

src/locales/lang/es.ts

@@ -164,6 +164,8 @@ const msg = {
   legendValues: "Valor de la leyenda",
   iframeWidgetTip: "Añadir enlaces a los gadgets",
   iframeSrc: "Enlace Iframe",
+  generateLink: "Generar enlaces",
+  setDuration: "Establecer la duración",
   seconds: "Segundos",
   hourTip: "Seleccione Hora",
   minuteTip: "Seleccione Minuto",

src/locales/lang/zh.ts

@@ -178,6 +178,8 @@ const msg = {
   taskTitle: "HTTP请求和响应收集规则",
   iframeWidgetTip: "添加widget的链接",
   iframeSrc: "Iframe链接",
+  generateLink: "生成链接",
+  setDuration: "设置时间区间",
   seconds: "秒",
   hourTip: "选择小时",
   minuteTip: "选择分钟",

src/store/modules/dashboard.ts

@@ -40,6 +40,7 @@ interface DashboardState {
   currentDashboard: Nullable<DashboardItem>;
   editMode: boolean;
   currentTabIndex: number;
+  showLinkConfig: boolean;
 }
 
 export const dashboardStore = defineStore({
@@ -58,6 +59,7 @@ export const dashboardStore = defineStore({
     currentDashboard: null,
     editMode: false,
     currentTabIndex: 0,
+    showLinkConfig: false,
   }),
   actions: {
     setLayout(data: LayoutConfig[]) {
@@ -66,6 +68,9 @@ export const dashboardStore = defineStore({
     setMode(mode: boolean) {
       this.editMode = mode;
     },
+    setWidgetLink(show: boolean) {
+      this.showLinkConfig = show;
+    },
     resetDashboards(list: DashboardItem[]) {
       this.dashboards = list;
       sessionStorage.setItem("dashboards", JSON.stringify(list));

src/views/dashboard/Edit.vue

@@ -30,6 +30,21 @@ limitations under the License. -->
     >
       <component :is="dashboardStore.selectedGrid.type" />
     </el-dialog>
+    <el-dialog
+      v-model="dashboardStore.showLinkConfig"
+      :title="t('generateLink')"
+      :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>
+    </el-dialog>
   </div>
 </template>
 <script lang="ts">
@@ -52,6 +67,8 @@ limitations under the License. -->
       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();
@@ -108,6 +125,8 @@ limitations under the License. -->
         t,
         handleClick,
         dashboardStore,
+        hasDuration,
+        widgetLink,
       };
     },
   });
@@ -116,4 +135,8 @@ limitations under the License. -->
   .ds-main {
     overflow: auto;
   }
+
+  .link {
+    color: #999;
+  }
 </style>

src/views/dashboard/controls/Widget.vue

@@ -38,6 +38,9 @@ limitations under the License. -->
           <div class="tools" @click="removeWidget">
             <span>{{ t("delete") }}</span>
           </div>
+          <div class="tools" @click="generateLink">
+            <span>{{ t("generateLink") }}</span>
+          </div>
         </el-popover>
       </div>
     </div>
@@ -161,6 +164,9 @@ limitations under the License. -->
           }
         }
       }
+      function generateLink() {
+        dashboardStore.setWidgetLink(true);
+      }
       watch(
         () => [props.data.metricTypes, props.data.metrics],
         () => {
@@ -227,6 +233,7 @@ limitations under the License. -->
         state,
         appStore,
         removeWidget,
+        generateLink,
         editConfig,
         data,
         loading,