refactor(components): 优化 BlockIcon 组件 | Optimize BlockIcon component.

src/components/Dock.svelte

@@ -17,6 +17,7 @@
 
 <script lang="ts">
     import type { ComponentEvents } from "svelte";
+    import { get } from "svelte/store";
     import Bar from "@workspace/components/siyuan/dock/Bar.svelte";
 
     import EditorIframe from "./EditorIframe.svelte";
@@ -47,10 +48,11 @@
                 type: "refresh",
                 active: realTime,
                 ariaLabel: plugin.i18n.dock.refresh.ariaLabel,
-                onClick: (_e, _element, active) => {
+                onClick: (_e, _element, props) => {
+                    let active = get(props.active);
                     active = !active;
                     realTime = active;
-                    return active;
+                    props.active.set(active);
                 },
             },
             {
@@ -59,14 +61,15 @@
                 type: "inline",
                 active: inline === Inline.span,
                 ariaLabel: plugin.i18n.dock.inline.ariaLabel,
-                onClick: (_e, _element, active) => {
+                onClick: (_e, _element, props) => {
+                    let active = get(props.active);
                     active = !active;
                     if (active) {
                         inline = Inline.span;
                     } else {
                         inline = Inline.mark;
                     }
-                    return active;
+                    props.active.set(active);
                 },
             },
             {
@@ -75,14 +78,15 @@
                 type: "kramdown",
                 active: language === Language.kramdown,
                 ariaLabel: plugin.i18n.dock.kramdown.ariaLabel,
-                onClick: (_e, _element, active) => {
+                onClick: (_e, _element, props) => {
+                    let active = get(props.active);
                     active = !active;
                     if (active) {
                         language = Language.kramdown;
                     } else {
                         language = Language.markdown;
                     }
-                    return active;
+                    props.active.set(active);
                 },
             },
             {

src/components/Tab.svelte

@@ -0,0 +1,50 @@
+<!--
+ Copyright (C) 2023 Zuoqiu Yingyi
+ 
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as
+ published by the Free Software Foundation, either version 3 of the
+ License, or (at your option) any later version.
+ 
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU Affero General Public License for more details.
+ 
+ You should have received a copy of the GNU Affero General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<script lang="ts">
+    import Tab from "@workspace/components/siyuan/tab/Tab.svelte";
+    import EditorIframe from "./EditorIframe.svelte";
+
+    export let plugin: EditorIframe["plugin"];
+    export let savable: EditorIframe["savable"];
+    export let changable: EditorIframe["changable"];
+    export let modified: EditorIframe["modified"];
+    export let options: EditorIframe["options"];
+
+    let fullscreen: Tab["fullscreen"] = false; // 是否为全屏模式
+    let breadcrumbItems: Tab["breadcrumbItems"] = []; // 面包屑项
+    let breadcrumbIcons: Tab["breadcrumbIcons"] = []; // 面包屑按钮
+</script>
+
+<Tab
+    {fullscreen}
+    {breadcrumbItems}
+    {breadcrumbIcons}
+>
+    <div
+        slot="content"
+        class="fn__flex fn__flex-1"
+    >
+        <EditorIframe
+            {plugin}
+            {savable}
+            {changable}
+            {modified}
+            {options}
+        />
+    </div>
+</Tab>