Dev (#2)

* feat: svelte example for setting pannel

* Must destroy svelte

* onDestroy

* Make hello easy

* 拷贝官方的代码功能

* Use hello both in tab and dialog

* fix: destroy dock

src/hello.svelte

@@ -3,68 +3,60 @@
  * https://github.com/frostime/sy-plugin-template-vite
 -->
 <script lang="ts">
-    import { onMount } from "svelte";
+    import { onDestroy, onMount } from "svelte";
     import { version } from "./api";
+    import { showMessage } from "siyuan";
     export let name: string;
+    export let i18n: any;
 
     let time;
     let ver;
 
+    let intv1 = setInterval(async () => {
+        time = new Date();
+    }, 1000);
+
     onMount(async () => {
         time = new Date();
         ver = await version();
     });
 
-    $: time_str = new Date(time).toLocaleTimeString();
+    /**
+     * You must call this function when the component is destroyed.
+    */
+    onDestroy(() => {
+        showMessage("Hello panel closed");
+        clearInterval(intv1);
+    });
 
-    setInterval(async () => {
-        time = new Date();
-    }, 1000);
+    $: time_str = new Date(time).toLocaleTimeString();
 
 </script>
 
 <div id="hello">
-    <div class="row">
-        <div class="col left">
+    <div class="fn__flex">
+        <div class="fn__flex-1">
             <h2>Hello {name} v{ver}</h2>
         </div>
-        <div class="col right">
+        <div class="fn__flex-1 b3-label__text __text-right">
             {time_str}
         </div>
     </div>
 
-    <br />
+    <div>
+        <p>{@html i18n.makesure}</p>
+    </div>
 
-    <p>
-        使用这个模板之前，请阅读<a
-            href="https://github.com/siyuan-note/plugin-sample">官方教程</a
-        >, 确保自己已经理解了插件的基本开发流程。
-    </p>
-
-    <p>
-        Before using this template, please read the <a
-            href="https://github.com/siyuan-note/plugin-sample">offical sample</a
-        >, make sure that you've known about the pipeline for plugin developing.
-    </p>
 </div>
 
 <style lang="scss">
     #hello {
-        margin: 1rem;
-        text-align: left;
+        margin: 20px;
+        div {
+            margin-bottom: 10px;
+        }
     }
-    .row {
-        display: flex;
-        flex-direction: row;
-
-        .col {
-            flex: 1;
-        }
-        .left {
-            text-align: left;
-        }
-        .right {
-            text-align: right;
-        }
+    .__text-right {
+        text-align: right;
     }
 </style>