@opentiny/tiny-engine-plugin-bridge 1.0.1 → 1.0.2

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2023 - present TinyEngine Authors.
+Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.js

@@ -1,19 +1,19 @@
 import "./style.css";
-import { reactive as z, ref as C, watchEffect as Q, resolveComponent as l, openBlock as v, createElementBlock as U, createElementVNode as h, createVNode as o, Fragment as se, renderList as re, normalizeClass as ce, withModifiers as j, toDisplayString as B, createCommentVNode as b, pushScopeId as X, popScopeId as Z, computed as V, watch as le, onMounted as ie, createBlock as R, withCtx as c, withDirectives as de, vShow as pe, createTextVNode as F, nextTick as ue } from "vue";
-import { Search as me, Form as _e, Input as ge, Button as ye, FormItem as fe, Checkbox as ve, Switch as he, Tooltip as Ee, RadioGroup as Re, Radio as be, Tabs as Ce, TabItem as Te } from "@opentiny/vue";
-import { PluginSetting as Ve, VueMonaco as Se, SvgButton as $, PluginPanel as Ue } from "@opentiny/tiny-engine-common";
-import { isVsCodeEnv as ee } from "@opentiny/tiny-engine-common/js/environments";
-import { useApp as T, useResource as k, useNotify as I, useModal as ke, getGlobalConfig as Ie } from "@opentiny/tiny-engine-controller";
-import { setUtils as xe } from "@opentiny/tiny-engine-canvas";
-import { useHttp as we } from "@opentiny/tiny-engine-http";
-import { generateBridge as Ne, generateUtil as Oe } from "@opentiny/tiny-engine-common/js/vscodeGenerateFile";
-import { iconUnknow as Be } from "@opentiny/vue-icon";
-import { theme as Le } from "@opentiny/tiny-engine-controller/adapter";
-const w = we(), Pe = (t, n) => w.get(`/app-center/api/apps/extension/list?app=${t}&category=${n}`), Fe = (t) => w.post("/app-center/api/apps/extension/create", t), Ae = (t) => w.post("/app-center/api/apps/extension/update", t), Ye = (t) => w.get(`/app-center/api/apps/extension/delete?${t}`), De = (t) => {
-  w.get(`/app-center/api/apps/schema/${t}`).then((n) => {
-    Ne(n.bridge), Oe(n.utils);
+import { reactive as H, ref as V, watchEffect as $, resolveComponent as l, openBlock as h, createElementBlock as x, createElementVNode as v, createVNode as s, Fragment as ce, renderList as le, normalizeClass as ie, withModifiers as K, toDisplayString as w, createCommentVNode as T, pushScopeId as ee, popScopeId as te, computed as C, watch as de, onMounted as pe, createBlock as R, withCtx as r, withDirectives as ue, vShow as me, createTextVNode as k, nextTick as _e } from "vue";
+import { Search as ge, Form as ye, Input as fe, Button as ve, FormItem as he, Checkbox as be, Switch as Ee, Tooltip as Re, RadioGroup as Ce, Radio as Te, Tabs as Ve, TabItem as Se } from "@opentiny/vue";
+import { PluginSetting as Ue, VueMonaco as ke, SvgButton as ne, PluginPanel as Ie, LinkButton as xe } from "@opentiny/tiny-engine-common";
+import { useApp as S, useResource as N, useNotify as B, useModal as we, getGlobalConfig as Ne, useHelp as Be } from "@opentiny/tiny-engine-controller";
+import { isVsCodeEnv as oe } from "@opentiny/tiny-engine-common/js/environments";
+import { updateUtils as Q, deleteUtils as Oe } from "@opentiny/tiny-engine-canvas";
+import { useHttp as Pe } from "@opentiny/tiny-engine-http";
+import { generateBridge as Le, generateUtil as Fe } from "@opentiny/tiny-engine-common/js/vscodeGenerateFile";
+import { iconUnknow as Ae } from "@opentiny/vue-icon";
+import { theme as De } from "@opentiny/tiny-engine-controller/adapter";
+const P = Pe(), Ye = (t, n) => P.get(`/app-center/api/apps/extension/list?app=${t}&category=${n}`), Ge = (t) => P.post("/app-center/api/apps/extension/create", t), Me = (t) => P.post("/app-center/api/apps/extension/update", t), qe = (t) => P.get(`/app-center/api/apps/extension/delete?${t}`), ze = (t) => {
+  P.get(`/app-center/api/apps/schema/${t}`).then((n) => {
+    Le(n.bridge), Fe(n.utils);
   });
-}, i = z({
+}, i = H({
   actionType: "",
   type: "",
   category: "",
@@ -21,8 +21,8 @@ const w = we(), Pe = (t, n) => w.get(`/app-center/api/apps/extension/list?app=${
   resources: [],
   resourceNames: {},
   refresh: !1,
-  id: T().appInfoState.selectedId
-}), W = {
+  id: S().appInfoState.selectedId
+}), X = {
   name: "",
   type: "npm",
   content: {
@@ -33,7 +33,7 @@ const w = we(), Pe = (t, n) => w.get(`/app-center/api/apps/extension/list?app=${
     destructuring: !0,
     main: ""
   }
-}, Ge = {
+}, He = {
   name: "",
   type: "function",
   content: {
@@ -43,66 +43,66 @@ const w = we(), Pe = (t, n) => w.get(`/app-center/api/apps/extension/list?app=${
 }, E = {
   Util: "utils",
   Bridge: "bridge"
-}, L = {
+}, F = {
   Npm: "npm",
   Function: "function"
-}, Me = {
+}, je = {
   [E.Util]: "新建工具类",
   [E.Bridge]: "新建桥接源"
-}, x = {
+}, O = {
   Read: "read",
   Edit: "edit"
-}, qe = (t) => i.resourceNames[t], ze = (t, n) => {
+}, Je = (t) => i.resourceNames[t], We = (t, n) => {
   i.resourceNames[t] = n;
-}, He = (t) => {
-  const n = T().appInfoState.selectedId;
-  return Pe(n, t);
-}, D = () => i.actionType, A = (t) => {
+}, Ke = (t) => {
+  const n = S().appInfoState.selectedId;
+  return Ye(n, t);
+}, G = () => i.actionType, D = (t) => {
   i.actionType = t;
-}, Je = () => i.resource, Y = (t = W) => {
-  t || (t = i.category === L.Function ? Ge : W), i.resource = t;
-}, P = () => i.type, G = (t) => {
+}, Qe = () => i.resource, Y = (t = X) => {
+  t || (t = i.category === F.Function ? He : X), i.resource = t;
+}, A = () => i.type, M = (t) => {
   i.type = t;
-}, M = (t) => {
+}, q = (t) => {
   i.category = t;
-}, K = () => i.category, q = (...t) => {
-  ee && De(...t);
-}, je = (t, n, d) => {
-  D() === x.Edit ? (t.id = i.resource.id, Ae(t).then((e) => {
+}, Z = () => i.category, z = (...t) => {
+  oe && ze(...t);
+}, Xe = (t, n, d) => {
+  G() === O.Edit ? (t.id = i.resource.id, Me(t).then((e) => {
     if (e) {
-      const r = k().resState[t.category].findIndex((m) => m.name === e.name);
-      k().resState[t.category][r] = e, xe([e], !1, !0), q(T().appInfoState.selectedId), I({
+      const o = N().resState[t.category].findIndex((g) => g.name === e.name);
+      N().resState[t.category][o] = e, Q([e]), z(S().appInfoState.selectedId), B({
         type: "success",
         message: "修改成功"
       }), d("refresh", i.type), i.refresh = !0, n();
     }
-  })) : Fe(t).then((e) => {
-    e && (k().resState[t.category].push(e), q(T().appInfoState.selectedId), I({
+  })) : Ge(t).then((e) => {
+    e && (N().resState[t.category].push(e), Q([e]), z(S().appInfoState.selectedId), B({
       type: "success",
       message: "创建成功"
     }), d("refresh", i.type), i.refresh = !0, n());
   });
-}, We = (t, n, d) => {
-  var r;
-  const e = `app=${T().appInfoState.selectedId}&id=${(r = i.resource) == null ? void 0 : r.id}`;
-  Ye(e).then((m) => {
-    if (m) {
-      const y = k().resState[i.type].findIndex((f) => f.name === m.name);
-      k().resState[i.type].splice(y, 1), q(T().appInfoState.selectedId), I({
+}, Ze = (t, n, d) => {
+  var o;
+  const e = `app=${S().appInfoState.selectedId}&id=${(o = i.resource) == null ? void 0 : o.id}`;
+  qe(e).then((g) => {
+    if (g) {
+      const y = N().resState[i.type].findIndex((f) => f.name === g.name);
+      N().resState[i.type].splice(y, 1), Oe([g]), z(S().appInfoState.selectedId), B({
         type: "success",
         message: "删除成功"
       }), d("refresh", i.type), i.refresh = !0, n();
     }
   });
 };
-const H = (t, n) => {
+const j = (t, n) => {
   const d = t.__vccOpts || t;
-  for (const [e, r] of n)
-    d[e] = r;
+  for (const [e, o] of n)
+    d[e] = o;
   return d;
-}, Ke = {
+}, $e = {
   components: {
-    TinySearch: me
+    TinySearch: ge
   },
   props: {
     name: {
@@ -112,47 +112,47 @@ const H = (t, n) => {
   },
   emits: ["open"],
   setup(t, { emit: n }) {
-    const d = C([]), e = z({
+    const d = V([]), e = H({
       resourceList: [],
       activeIndex: -1,
       searchValue: ""
-    }), r = (s = e.resourceList, a = e.searchValue) => s.filter((g) => g.name.toLowerCase().indexOf(a.toLowerCase()) > -1), m = async (s) => {
-      e.resourceList = await He(s), ze(
-        s,
-        Array.isArray(e.resourceList) ? e.resourceList.map((a) => a.name) : []
-      ), d.value = r(e.resourceList);
+    }), o = (a = e.resourceList, u = e.searchValue) => a.filter((c) => c.name.toLowerCase().indexOf(u.toLowerCase()) > -1), g = async (a) => {
+      e.resourceList = await Ke(a), We(
+        a,
+        Array.isArray(e.resourceList) ? e.resourceList.map((u) => u.name) : []
+      ), d.value = o(e.resourceList);
     };
-    return Q(async () => {
-      m(t.name);
+    return $(async () => {
+      g(t.name);
     }), {
       state: e,
       list: d,
-      add: (s) => {
-        A(""), G(t.name), Y(""), M(s), n("open");
+      add: (a) => {
+        D(""), M(t.name), Y(""), q(a), n("open");
       },
-      openRead: (s, a) => {
-        e.activeIndex = a, Y(s), A(x.Edit), n("open");
+      openRead: (a, u) => {
+        e.activeIndex = u, Y(a), D(O.Edit), n("open");
       },
-      openEdit: (s, a) => {
-        e.activeIndex = a, Y(s), A(x.Edit), G(t.name), M(s.type), n("open");
+      openEdit: (a, u) => {
+        e.activeIndex = u, Y(a), D(O.Edit), M(t.name), q(a.type), n("open");
       },
-      refresh: m,
-      getType: P,
+      refresh: g,
+      getType: A,
       RESOURCE_TYPE: E,
-      searchBridgeData: (s) => {
-        d.value = r(e.resourceList, s);
+      searchBridgeData: (a) => {
+        d.value = o(e.resourceList, a);
       }
     };
   }
-}, Qe = (t) => (X("data-v-70da6acf"), t = t(), Z(), t), Xe = { class: "manage-panel" }, Ze = { class: "manage-panel-search" }, $e = { class: "list" }, et = ["onClick"], tt = { class: "item-label" }, nt = {
+}, et = (t) => (ee("data-v-70da6acf"), t = t(), te(), t), tt = { class: "manage-panel" }, nt = { class: "manage-panel-search" }, ot = { class: "list" }, at = ["onClick"], st = { class: "item-label" }, rt = {
   key: 0,
   class: "empty-wrap"
-}, ot = /* @__PURE__ */ Qe(() => /* @__PURE__ */ h("p", { class: "empty-text" }, "暂无数据", -1));
-function at(t, n, d, e, r, m) {
+}, ct = /* @__PURE__ */ et(() => /* @__PURE__ */ v("p", { class: "empty-text" }, "暂无数据", -1));
+function lt(t, n, d, e, o, g) {
   const y = l("tiny-search"), f = l("svg-icon");
-  return v(), U("div", Xe, [
-    h("div", Ze, [
-      o(y, {
+  return h(), x("div", tt, [
+    v("div", nt, [
+      s(y, {
         modelValue: e.state.searchValue,
         "onUpdate:modelValue": [
           n[0] || (n[0] = (_) => e.state.searchValue = _),
@@ -162,54 +162,54 @@ function at(t, n, d, e, r, m) {
         placeholder: "请输入关键字搜索"
       }, null, 8, ["modelValue", "onUpdate:modelValue"])
     ]),
-    h("div", $e, [
-      (v(!0), U(se, null, re(e.list, (_, u) => (v(), U("div", {
+    v("div", ot, [
+      (h(!0), x(ce, null, le(e.list, (_, b) => (h(), x("div", {
         key: _.name,
-        class: ce(["list-item", u === e.state.activeIndex ? "active" : ""]),
-        onClick: j((s) => e.openEdit(_, u), ["stop"])
+        class: ie(["list-item", b === e.state.activeIndex ? "active" : ""]),
+        onClick: K((a) => e.openEdit(_, b), ["stop"])
       }, [
-        o(f, { name: "resources" }),
-        h("div", tt, B(_.name), 1),
-        o(f, {
+        s(f, { name: "resources" }),
+        v("div", st, w(_.name), 1),
+        s(f, {
           class: "setting-icon",
           name: "setting",
-          onClick: j((s) => e.openEdit(_, u), ["stop"])
+          onClick: K((a) => e.openEdit(_, b), ["stop"])
         }, null, 8, ["onClick"])
-      ], 10, et))), 128)),
-      e.list.length ? b("", !0) : (v(), U("div", nt, [
-        o(f, {
+      ], 10, at))), 128)),
+      e.list.length ? T("", !0) : (h(), x("div", rt, [
+        s(f, {
           class: "empty-icon",
           name: "empty"
         }),
-        ot
+        ct
       ]))
     ])
   ]);
 }
-const st = /* @__PURE__ */ H(Ke, [["render", at], ["__scopeId", "data-v-70da6acf"]]);
-const J = C(!1), rt = () => {
-  J.value = !0, ue(() => window.dispatchEvent(new Event("resize")));
-}, S = () => {
+const it = /* @__PURE__ */ j($e, [["render", lt], ["__scopeId", "data-v-70da6acf"]]);
+const J = V(!1), dt = () => {
+  J.value = !0, _e(() => window.dispatchEvent(new Event("resize")));
+}, I = () => {
   J.value = !1;
-}, ct = {
+}, pt = {
   components: {
-    TinyForm: _e,
-    TinyInput: ge,
-    TinyButton: ye,
-    TinyFormItem: fe,
-    TinyCheckbox: ve,
-    PluginSetting: Ve,
-    TinySwitch: he,
-    MonacoEditor: Se,
-    IconUnknow: Be(),
-    TinyTooltip: Ee,
-    TinyRadioGroup: Re,
-    TinyRadio: be,
-    SvgButton: $
+    TinyForm: ye,
+    TinyInput: fe,
+    TinyButton: ve,
+    TinyFormItem: he,
+    TinyCheckbox: be,
+    PluginSetting: Ue,
+    TinySwitch: Ee,
+    MonacoEditor: ke,
+    IconUnknow: Ae(),
+    TinyTooltip: Re,
+    TinyRadioGroup: Ce,
+    TinyRadio: Te,
+    SvgButton: ne
   },
   setup(t, { emit: n }) {
     const d = {
-      theme: Le(),
+      theme: De(),
       roundedSelection: !0,
       automaticLayout: !0,
       autoIndent: !0,
@@ -220,42 +220,49 @@ const J = C(!1), rt = () => {
       // 禁用滚动条边边一直显示的边框
       overviewRulerBorder: !1,
       renderLineHighlightOnlyWhenFocus: !0
-    }, { confirm: e } = ke(), r = z({
-      resource: V(() => Je()),
+    }, { confirm: e } = we(), o = H({
+      resource: C(() => Qe()),
       name: "",
       value: "",
       content: {},
-      status: V(() => D() === x.Edit),
-      category: V(() => K() === L.Npm),
-      mode: V(() => {
-        var a;
-        return ((a = Ie()) == null ? void 0 : a.dslMode) !== "Vue";
+      status: C(() => G() === O.Edit),
+      category: C(() => Z() === F.Npm),
+      mode: C(() => {
+        var c;
+        return ((c = Ne()) == null ? void 0 : c.dslMode) !== "Vue";
       }),
       isInstance: !1,
-      title: V(() => {
-        const a = D() === x.Edit ? "编辑" : "添加", g = P() === E.Bridge ? "桥接源" : "工具类";
-        return a + g;
+      title: C(() => {
+        const c = G() === O.Edit ? "编辑" : "添加", m = A() === E.Bridge ? "桥接源" : "工具类";
+        return c + m;
       }),
-      type: L.Npm
+      type: F.Npm
+    }), g = C(() => {
+      const c = o.name || "name";
+      let m = c;
+      o.content.destructuring && (o.name && o.name === o.content.exportName ? m = `{ ${o.content.exportName || "exportName"} }` : m = `{ ${o.content.exportName || "exportName"} as ${c} }`);
+      const U = `${o.content.package || "package"}${o.content.main || ""}`;
+      return `import ${m} from '${U}'
+export { ${c} }`;
     });
-    Q(() => {
-      var a, g;
-      r.name = r.resource.name, r.content = r.resource.content || {}, r.value = ((g = (a = r.resource) == null ? void 0 : a.content) == null ? void 0 : g.value) || "";
-    }), le(
-      () => r.isInstance,
-      (a) => {
-        a || (r.content.instance = "");
+    $(() => {
+      var c, m;
+      o.name = o.resource.name, o.content = o.resource.content || {}, o.value = ((m = (c = o.resource) == null ? void 0 : c.content) == null ? void 0 : m.value) || "";
+    }), de(
+      () => o.isInstance,
+      (c) => {
+        c || (o.content.instance = "");
       }
     );
-    const m = C(null), y = C(null);
-    return ie(() => window.dispatchEvent(new Event("resize"))), {
+    const y = V(null), f = V(null);
+    return pe(() => window.dispatchEvent(new Event("resize"))), {
       rules: {
         name: [
           { required: !0, message: "必填", trigger: "change" },
           {
-            validator: (a, g, N) => {
-              const O = qe(P());
-              Array.isArray(O) && O.includes(g) ? N(new Error("资源名称已存在")) : N();
+            validator: (c, m, U) => {
+              const L = Je(A());
+              Array.isArray(L) && L.includes(m) ? U(new Error("资源名称已存在")) : U();
             },
             trigger: "change"
           }
@@ -264,93 +271,94 @@ const J = C(!1), rt = () => {
         "content.exportName": [{ required: !0, message: "必填", trigger: "change" }],
         "content.instanceName": { required: !0, message: "必填", trigger: "change" }
       },
-      resourceForm: y,
-      editor: m,
-      state: r,
+      resourceForm: f,
+      editor: y,
+      state: o,
+      codePreview: g,
       isOpen: J,
-      closePanel: S,
+      closePanel: I,
       save: () => {
-        const a = {
-          category: P(),
-          type: K(),
-          name: r.name,
-          app: T().appInfoState.selectedId,
-          content: r.category ? r.content : {
+        const c = {
+          category: A(),
+          type: Z(),
+          name: o.name,
+          app: S().appInfoState.selectedId,
+          content: o.category ? o.content : {
             type: "JSFunction",
-            value: m.value.getEditor().getValue()
+            value: y.value.getEditor().getValue()
           }
         };
-        y.value.validate((g) => {
-          if (!g) {
-            I({
+        f.value.validate((m) => {
+          if (!m) {
+            B({
               type: "error",
               message: "请检查必填项"
             });
             return;
           }
-          if (!r.category && !m.value.getEditor().getValue()) {
-            I({
+          if (!o.category && !y.value.getEditor().getValue()) {
+            B({
               type: "error",
               message: "function 内容必填"
             });
             return;
           }
-          je(a, S, n);
+          Xe(c, I, n);
         });
       },
       deleteReSource: () => {
         e({
           title: "删除资源",
-          message: "您确认删除该资源吗?",
+          message: "如果删除正在使用的资源，将无法正常预览页面，确认要删除吗？",
           exec: () => {
-            We(r.name, S, n);
+            Ze(o.name, I, n);
           }
         });
       },
       options: d,
-      handleChangeType: (a) => {
-        M(a);
+      handleChangeType: (c) => {
+        q(c);
       },
-      RESOURCE_CATEGORY: L
+      RESOURCE_CATEGORY: F
     };
   }
-}, lt = (t) => (X("data-v-a65a6161"), t = t(), Z(), t), it = { class: "title-wrap" }, dt = { class: "header-wrap" }, pt = { class: "right-item" }, ut = { key: 2 }, mt = { class: "cdn-label-wrap" }, _t = /* @__PURE__ */ lt(() => /* @__PURE__ */ h("span", null, "CDN", -1));
-function gt(t, n, d, e, r, m) {
-  const y = l("svg-button"), f = l("tiny-button"), _ = l("tiny-radio"), u = l("tiny-radio-group"), s = l("tiny-form-item"), a = l("tiny-input"), g = l("tiny-switch"), N = l("tiny-checkbox"), O = l("icon-unknow"), te = l("tiny-tooltip"), ne = l("monaco-editor"), oe = l("tiny-form"), ae = l("plugin-setting");
-  return e.isOpen ? (v(), R(ae, { key: 0 }, {
-    title: c(() => [
-      h("div", it, [
-        h("span", null, B(e.state.title), 1)
+}, W = (t) => (ee("data-v-63e8b39d"), t = t(), te(), t), ut = { class: "title-wrap" }, mt = { class: "header-wrap" }, _t = { class: "right-item" }, gt = { key: 2 }, yt = { class: "cdn-label-wrap" }, ft = /* @__PURE__ */ W(() => /* @__PURE__ */ v("span", null, "CDN", -1)), vt = { class: "code-preview" }, ht = /* @__PURE__ */ W(() => /* @__PURE__ */ v("span", { class: "pre-title" }, "生成的", -1)), bt = /* @__PURE__ */ W(() => /* @__PURE__ */ v("span", { class: "pre-title" }, "代码预览", -1));
+function Et(t, n, d, e, o, g) {
+  const y = l("svg-button"), f = l("tiny-button"), _ = l("tiny-radio"), b = l("tiny-radio-group"), a = l("tiny-form-item"), u = l("tiny-input"), c = l("tiny-switch"), m = l("tiny-checkbox"), U = l("icon-unknow"), L = l("tiny-tooltip"), ae = l("monaco-editor"), se = l("tiny-form"), re = l("plugin-setting");
+  return e.isOpen ? (h(), R(re, { key: 0 }, {
+    title: r(() => [
+      v("div", ut, [
+        v("span", null, w(e.state.title), 1)
       ])
     ]),
-    header: c(() => [
-      h("div", dt, [
-        de(o(y, {
+    header: r(() => [
+      v("div", mt, [
+        ue(s(y, {
           class: "delete-btn",
           name: "delete",
           onClick: e.deleteReSource
         }, null, 8, ["onClick"]), [
-          [pe, e.state.status]
+          [me, e.state.status]
         ]),
-        o(f, {
+        s(f, {
           class: "save-btn",
           type: "primary",
           onClick: e.save
         }, {
-          default: c(() => [
-            F("保存")
+          default: r(() => [
+            k("保存")
           ]),
           _: 1
         }, 8, ["onClick"]),
-        o(y, {
+        s(y, {
           class: "close-btn",
           name: "close",
           onClick: e.closePanel
         }, null, 8, ["onClick"])
       ])
     ]),
-    content: c(() => [
-      o(oe, {
+    content: r(() => [
+      s(se, {
         ref: "resourceForm",
         class: "resource-form",
         rules: e.rules,
@@ -360,36 +368,36 @@ function gt(t, n, d, e, r, m) {
         "label-position": "left",
         "label-align": !0
       }, {
-        default: c(() => [
-          h("div", pt, [
-            e.state.status ? b("", !0) : (v(), R(s, {
+        default: r(() => [
+          v("div", _t, [
+            e.state.status ? T("", !0) : (h(), R(a, {
               key: 0,
               label: "工具类型",
               prop: "type"
             }, {
-              default: c(() => [
-                o(u, {
+              default: r(() => [
+                s(b, {
                   modelValue: e.state.type,
                   "onUpdate:modelValue": n[0] || (n[0] = (p) => e.state.type = p),
                   class: "resource-type-radio-group",
                   onChange: e.handleChangeType
                 }, {
-                  default: c(() => [
-                    o(_, {
+                  default: r(() => [
+                    s(_, {
                       label: e.RESOURCE_CATEGORY.Npm,
                       class: "resource-type-radio-item"
                     }, {
-                      default: c(() => [
-                        F(B(e.RESOURCE_CATEGORY.Npm), 1)
+                      default: r(() => [
+                        k(w(e.RESOURCE_CATEGORY.Npm), 1)
                       ]),
                       _: 1
                     }, 8, ["label"]),
-                    o(_, {
+                    s(_, {
                       label: e.RESOURCE_CATEGORY.Function,
                       class: "resource-type-radio-item"
                     }, {
-                      default: c(() => [
-                        F(B(e.RESOURCE_CATEGORY.Function), 1)
+                      default: r(() => [
+                        k(w(e.RESOURCE_CATEGORY.Function), 1)
                       ]),
                       _: 1
                     }, 8, ["label"])
@@ -399,84 +407,84 @@ function gt(t, n, d, e, r, m) {
               ]),
               _: 1
             })),
-            e.state.status ? b("", !0) : (v(), R(s, {
+            e.state.status ? T("", !0) : (h(), R(a, {
               key: 1,
               label: "名称",
               prop: "name"
             }, {
-              default: c(() => [
-                o(a, {
+              default: r(() => [
+                s(u, {
                   modelValue: e.state.name,
                   "onUpdate:modelValue": n[1] || (n[1] = (p) => e.state.name = p),
-                  placeholder: "请输入名称"
+                  placeholder: "请输入工具类名称"
                 }, null, 8, ["modelValue"])
               ]),
               _: 1
             })),
-            e.state.category ? (v(), U("div", ut, [
-              o(s, {
+            e.state.category ? (h(), x("div", gt, [
+              s(a, {
                 label: "包名",
                 prop: "content.package"
               }, {
-                default: c(() => [
-                  o(a, {
+                default: r(() => [
+                  s(u, {
                     modelValue: e.state.content.package,
                     "onUpdate:modelValue": n[2] || (n[2] = (p) => e.state.content.package = p),
-                    placeholder: "package"
+                    placeholder: "请输入npm包名称"
                   }, null, 8, ["modelValue"])
                 ]),
                 _: 1
               }),
-              o(s, {
+              s(a, {
                 label: "导出名称",
                 prop: "content.exportName"
               }, {
-                default: c(() => [
-                  o(a, {
+                default: r(() => [
+                  s(u, {
                     modelValue: e.state.content.exportName,
                     "onUpdate:modelValue": n[3] || (n[3] = (p) => e.state.content.exportName = p),
-                    placeholder: "exportName"
+                    placeholder: "请输入npm包的导出名称"
                   }, null, 8, ["modelValue"])
                 ]),
                 _: 1
               }),
-              o(s, { label: "是否解构" }, {
-                default: c(() => [
-                  o(g, {
+              s(a, { label: "是否解构" }, {
+                default: r(() => [
+                  s(c, {
                     modelValue: e.state.content.destructuring,
                     "onUpdate:modelValue": n[4] || (n[4] = (p) => e.state.content.destructuring = p)
                   }, null, 8, ["modelValue"])
                 ]),
                 _: 1
               }),
-              e.state.mode ? (v(), R(s, {
+              e.state.mode ? (h(), R(a, {
                 key: 0,
                 label: "是否作为实例"
               }, {
-                default: c(() => [
-                  o(N, {
+                default: r(() => [
+                  s(m, {
                     modelValue: e.state.isInstance,
                     "onUpdate:modelValue": n[5] || (n[5] = (p) => e.state.isInstance = p)
                   }, null, 8, ["modelValue"])
                 ]),
                 _: 1
-              })) : b("", !0),
-              e.state.isInstance ? (v(), R(s, {
+              })) : T("", !0),
+              e.state.isInstance ? (h(), R(a, {
                 key: 1,
                 label: "实例名称",
                 prop: "content.instanceName"
               }, {
-                default: c(() => [
-                  o(a, {
+                default: r(() => [
+                  s(u, {
                     modelValue: e.state.content.instance,
                     "onUpdate:modelValue": n[6] || (n[6] = (p) => e.state.content.instance = p)
                   }, null, 8, ["modelValue"])
                 ]),
                 _: 1
-              })) : b("", !0),
-              o(s, { label: "入口路径" }, {
-                default: c(() => [
-                  o(a, {
+              })) : T("", !0),
+              s(a, { label: "入口路径" }, {
+                default: r(() => [
+                  s(u, {
                     modelValue: e.state.content.main,
                     "onUpdate:modelValue": n[7] || (n[7] = (p) => e.state.content.main = p),
                     placeholder: "main"
@@ -484,9 +492,9 @@ function gt(t, n, d, e, r, m) {
                 ]),
                 _: 1
               }),
-              o(s, { label: "版本号" }, {
-                default: c(() => [
-                  o(a, {
+              s(a, { label: "版本号" }, {
+                default: r(() => [
+                  s(u, {
                     modelValue: e.state.content.version,
                     "onUpdate:modelValue": n[8] || (n[8] = (p) => e.state.content.version = p),
                     placeholder: "latest"
@@ -494,32 +502,42 @@ function gt(t, n, d, e, r, m) {
                 ]),
                 _: 1
               }),
-              o(s, null, {
-                label: c(() => [
-                  h("div", mt, [
-                    _t,
-                    o(te, {
+              s(a, null, {
+                label: r(() => [
+                  v("div", yt, [
+                    ft,
+                    s(L, {
                       effect: "dark",
                       content: "浏览器直接可用的生产包链接，请确保可用，否则可能会造成页面预览失败",
                       placement: "top"
                     }, {
-                      default: c(() => [
-                        o(O, { class: "cdn-tips-icon" })
+                      default: r(() => [
+                        s(U, { class: "cdn-tips-icon" })
                       ]),
                       _: 1
                     })
                   ])
                 ]),
-                default: c(() => [
-                  o(a, {
+                default: r(() => [
+                  s(u, {
                     modelValue: e.state.content.cdnLink,
                     "onUpdate:modelValue": n[9] || (n[9] = (p) => e.state.content.cdnLink = p),
                     placeholder: "浏览器直接可用的生产包链接，请确保可用，否则可能会造成页面预览失败"
                   }, null, 8, ["modelValue"])
                 ]),
                 _: 1
-              })
-            ])) : (v(), R(ne, {
+              }),
+              v("div", vt, [
+                v("pre", null, [
+                  k("// "),
+                  ht,
+                  k(" utils.js "),
+                  bt,
+                  k(`
+` + w(e.codePreview), 1)
+                ])
+              ])
+            ])) : (h(), R(ae, {
               key: 3,
               ref: "editor",
               value: e.state.value,
@@ -532,112 +550,115 @@ function gt(t, n, d, e, r, m) {
       }, 8, ["rules", "model"])
     ]),
     _: 1
-  })) : b("", !0);
+  })) : T("", !0);
 }
-const yt = /* @__PURE__ */ H(ct, [["render", gt], ["__scopeId", "data-v-a65a6161"]]);
-const ft = {
+const Rt = /* @__PURE__ */ j(pt, [["render", Et], ["__scopeId", "data-v-63e8b39d"]]);
+const Ct = {
   components: {
-    TinyTabs: Ce,
-    TinyTabItem: Te,
-    PluginPanel: Ue,
-    SvgButton: $,
-    BridgeManage: st,
-    BridgeSetting: yt
+    TinyTabs: Ve,
+    TinyTabItem: Se,
+    PluginPanel: Ie,
+    SvgButton: ne,
+    BridgeManage: it,
+    BridgeSetting: Rt,
+    LinkButton: xe
   },
   setup() {
-    const t = C(E.Util), n = C(null), d = C(null), e = V(() => Me[t.value]);
+    const t = V(E.Util), n = V(null), d = V(null), e = C(() => je[t.value]), o = Be().getDocsUrl("bridge");
     return {
-      addResource: (u) => {
-        t.value === E.Util ? d.value.add(u) : n.value.add(u);
+      addResource: (a) => {
+        t.value === E.Util ? d.value.add(a) : n.value.add(a);
       },
       RESOURCE_TYPE: E,
       activedName: t,
-      switchTab: (u) => {
-        S(), G(u.name);
+      switchTab: (a) => {
+        I(), M(a.name);
       },
       openBridgePanel: () => {
-        rt();
+        dt();
       },
-      closePanel: S,
+      closePanel: I,
       openUtilPanel: () => {
-        S();
+        I();
       },
-      refreshList: (u) => {
-        u === E.Util ? d.value.refresh(u) : n.value.refresh(u);
+      refreshList: (a) => {
+        a === E.Util ? d.value.refresh(a) : n.value.refresh(a);
       },
       bridge: n,
-      utils: d,
+      docsUrl: o,
+      utilsRef: d,
       tips: e,
-      isVsCodeEnv: ee
+      isVsCodeEnv: oe
     };
   }
 };
-function vt(t, n, d, e, r, m) {
-  const y = l("svg-button"), f = l("bridge-manage"), _ = l("tiny-tab-item"), u = l("tiny-tabs"), s = l("bridge-setting"), a = l("plugin-panel");
-  return v(), R(a, {
+function Tt(t, n, d, e, o, g) {
+  const y = l("link-button"), f = l("svg-button"), _ = l("bridge-manage"), b = l("tiny-tab-item"), a = l("tiny-tabs"), u = l("bridge-setting"), c = l("plugin-panel");
+  return h(), R(c, {
     title: "资源管理",
     isCloseLeft: !1,
     onClose: e.closePanel
   }, {
-    header: c(() => [
-      o(y, {
+    header: r(() => [
+      s(y, { href: e.docsUrl }, null, 8, ["href"]),
+      s(f, {
         name: "add-utils",
         placement: "left",
         tips: e.tips,
-        onClick: n[0] || (n[0] = (g) => e.addResource("npm"))
+        onClick: n[0] || (n[0] = (m) => e.addResource("npm"))
       }, null, 8, ["tips"])
     ]),
-    content: c(() => [
-      o(u, {
+    content: r(() => [
+      s(a, {
         modelValue: e.activedName,
-        "onUpdate:modelValue": n[1] || (n[1] = (g) => e.activedName = g),
+        "onUpdate:modelValue": n[1] || (n[1] = (m) => e.activedName = m),
         class: "tabs full-width-tabs",
         "tab-style": "button-card",
         onClick: e.switchTab
       }, {
-        default: c(() => [
-          o(_, {
+        default: r(() => [
+          s(b, {
             name: e.RESOURCE_TYPE.Util,
             title: "工具类"
           }, {
-            default: c(() => [
-              o(f, {
-                ref: "utils",
+            default: r(() => [
+              s(_, {
+                ref: "utilsRef",
                 name: e.RESOURCE_TYPE.Util,
                 onOpen: e.openBridgePanel
               }, null, 8, ["name", "onOpen"])
             ]),
             _: 1
           }, 8, ["name"]),
-          e.isVsCodeEnv ? (v(), R(_, {
+          e.isVsCodeEnv ? (h(), R(b, {
             key: 0,
             name: e.RESOURCE_TYPE.Bridge,
             title: "桥接源"
           }, {
-            default: c(() => [
-              o(f, {
+            default: r(() => [
+              s(_, {
                 ref: "bridge",
                 name: e.RESOURCE_TYPE.Bridge,
                 onOpen: e.openBridgePanel
               }, null, 8, ["name", "onOpen"])
             ]),
             _: 1
-          }, 8, ["name"])) : b("", !0)
+          }, 8, ["name"])) : T("", !0)
         ]),
         _: 1
       }, 8, ["modelValue", "onClick"]),
-      o(s, { onRefresh: e.refreshList }, null, 8, ["onRefresh"])
+      s(u, { onRefresh: e.refreshList }, null, 8, ["onRefresh"])
     ]),
     _: 1
   }, 8, ["onClose"]);
 }
-const ht = /* @__PURE__ */ H(ft, [["render", vt], ["__scopeId", "data-v-c5fc42c1"]]), wt = {
+const Vt = /* @__PURE__ */ j(Ct, [["render", Tt], ["__scopeId", "data-v-e04eb86e"]]), Ft = {
   id: "Bridge",
   title: "资源管理",
   icon: "plugin-icon-sresources",
   align: "top",
-  component: ht
+  component: Vt
 };
 export {
-  wt as default
+  Ft as default
 };

package/dist/style.css

@@ -1 +1 @@
-.manage-panel[data-v-70da6acf]{height:100%;display:flex;flex-direction:column;position:relative}.manage-panel .manage-panel-search[data-v-70da6acf]{padding:8px}.manage-panel .add-button[data-v-70da6acf]{align-self:flex-end;margin:6px}.manage-panel .list[data-v-70da6acf]{flex:1;border-top:1px solid var(--ti-lowcode-tabs-border-color);overflow:auto}.manage-panel .list-item[data-v-70da6acf]{height:28px;display:grid;grid-template-columns:16px 1fr auto;column-gap:8px;align-items:center;padding:0 12px;position:relative;color:var(--ti-lowcode-bridge-list-color);cursor:pointer;font-size:12px}.manage-panel .list-item[data-v-70da6acf]:hover,.manage-panel .list-item.active[data-v-70da6acf]{background:var(--ti-lowcode-bridge-list-bg)}.manage-panel .list-item svg[data-v-70da6acf]{color:var(--ti-lowcode-toolbar-more-hover-color)}.plugin-setting[data-v-a65a6161] .icon-wrap{margin-right:8px}.plugin-setting .resource-form[data-v-a65a6161] .tiny-form-item__label .cdn-tips-icon{margin-left:4px}.plugin-setting .title-wrap .help-link[data-v-a65a6161]{display:inline-block;color:var(--ti-lowcode-common-primary-color);font-size:12px;margin-left:16px}.plugin-setting .title-wrap .help-link[data-v-a65a6161]:hover{text-decoration:underline}.plugin-setting .header-wrap[data-v-a65a6161]{display:flex;align-items:center;column-gap:16px}.plugin-setting .header-wrap .delete-btn[data-v-a65a6161]{color:var(--ti-lowcode-common-text-color-5)}.plugin-setting .header-wrap .delete-btn[data-v-a65a6161]:hover{color:var(--ti-lowcode-common-primary-text-color)}.plugin-setting .resource-type-radio-item[data-v-a65a6161]{--ti-radio-text-color: var(--ti-lowcode-common-secondary-text-color)}.plugin-setting .monaco-editor[data-v-a65a6161]{height:500px;margin-top:8px;border:1px solid var(--ti-lowcode-birdge-editor-border-color)}.plugin-setting .resource-form-footer[data-v-a65a6161]{padding:12px 0 12px 80px}.plugin-setting .resource-form-footer .tiny-svg[data-v-a65a6161]{margin-right:6px}.plugin-setting .resource-form-footer .del[data-v-a65a6161]:hover{background-color:var(--ti-lowcode-delete-button-hover-bg)}.plugin-setting .cdn-label-wrap[data-v-a65a6161]{display:flex;align-items:center}.tabs[data-v-c5fc42c1]{height:calc(100% - 46px)}[data-v-c5fc42c1] .tiny-tabs__header{padding:8px;border-bottom:1px solid var(--ti-lowcode-tabs-border-color)}[data-v-c5fc42c1] .tiny-tabs__content{height:calc(100% - 45px);padding:0}[data-v-c5fc42c1] .tiny-tabs__content>div{height:100%}
+.manage-panel[data-v-70da6acf]{height:100%;display:flex;flex-direction:column;position:relative}.manage-panel .manage-panel-search[data-v-70da6acf]{padding:8px}.manage-panel .add-button[data-v-70da6acf]{align-self:flex-end;margin:6px}.manage-panel .list[data-v-70da6acf]{flex:1;border-top:1px solid var(--ti-lowcode-tabs-border-color);overflow:auto}.manage-panel .list-item[data-v-70da6acf]{height:28px;display:grid;grid-template-columns:16px 1fr auto;column-gap:8px;align-items:center;padding:0 12px;position:relative;color:var(--ti-lowcode-bridge-list-color);cursor:pointer;font-size:12px}.manage-panel .list-item[data-v-70da6acf]:hover,.manage-panel .list-item.active[data-v-70da6acf]{background:var(--ti-lowcode-bridge-list-bg)}.manage-panel .list-item svg[data-v-70da6acf]{color:var(--ti-lowcode-toolbar-more-hover-color)}.plugin-setting[data-v-63e8b39d] .icon-wrap{margin-right:8px}.plugin-setting .resource-form[data-v-63e8b39d] .tiny-form-item__label .cdn-tips-icon{margin-left:4px}.plugin-setting .title-wrap .help-link[data-v-63e8b39d]{display:inline-block;color:var(--ti-lowcode-common-primary-color);font-size:12px;margin-left:16px}.plugin-setting .title-wrap .help-link[data-v-63e8b39d]:hover{text-decoration:underline}.plugin-setting .header-wrap[data-v-63e8b39d]{display:flex;align-items:center;column-gap:16px}.plugin-setting .header-wrap .delete-btn[data-v-63e8b39d]{color:var(--ti-lowcode-common-text-color-5)}.plugin-setting .header-wrap .delete-btn[data-v-63e8b39d]:hover{color:var(--ti-lowcode-common-primary-text-color)}.plugin-setting .resource-type-radio-item[data-v-63e8b39d]{--ti-radio-text-color: var(--ti-lowcode-common-secondary-text-color)}.plugin-setting .monaco-editor[data-v-63e8b39d]{height:500px;margin-top:8px;border:1px solid var(--ti-lowcode-birdge-editor-border-color)}.plugin-setting .resource-form-footer[data-v-63e8b39d]{padding:12px 0 12px 80px}.plugin-setting .resource-form-footer .tiny-svg[data-v-63e8b39d]{margin-right:6px}.plugin-setting .resource-form-footer .del[data-v-63e8b39d]:hover{background-color:var(--ti-lowcode-delete-button-hover-bg)}.plugin-setting .cdn-label-wrap[data-v-63e8b39d]{display:flex;align-items:center}.code-preview[data-v-63e8b39d]{font-size:14px;line-height:20px;margin-left:12px;color:var(--ti-lowcode-birdge-code-preview-color);background-color:var(--ti-lowcode-birdge-code-preview-bg-color);border-radius:6px}.code-preview .pre-title[data-v-63e8b39d]{font-family:Microsoft YaHei}.code-preview>pre[data-v-63e8b39d]{margin:0;padding:8px 20px;font-family:Consolas,Courier New,monospace}.tabs[data-v-e04eb86e]{height:calc(100% - 46px)}[data-v-e04eb86e] .tiny-tabs__header{padding:8px;border-bottom:1px solid var(--ti-lowcode-tabs-border-color)}[data-v-e04eb86e] .tiny-tabs__content{height:calc(100% - 45px);padding:0}[data-v-e04eb86e] .tiny-tabs__content>div{height:100%}[data-v-e04eb86e] .help-box{position:absolute;left:72px;top:3px}

package/package.json

@@ -1,27 +1,40 @@
-{
-  "name": "@opentiny/tiny-engine-plugin-bridge",
-  "version": "1.0.1",
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "build": "vite build"
-  },
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "files": [
-    "dist"
-  ],
-  "dependencies": {
-    "@opentiny/tiny-engine-common": "^1.0.0",
-    "@opentiny/tiny-engine-controller": "^1.0.0",
-    "@opentiny/tiny-engine-http": "^1.0.0",
-    "@opentiny/vue": "^3.8.0",
-    "vue": "3.2.45"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vitejs/plugin-vue-jsx": "^1.3.10",
-    "vite": "^4.3.7"
-  }
-}
+{
+  "name": "@opentiny/tiny-engine-plugin-bridge",
+  "version": "1.0.2",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/opentiny/tiny-engine",
+    "directory": "packages/plugins/bridge"
+  },
+  "bugs": {
+    "url": "https://github.com/opentiny/tiny-engine/issues"
+  },
+  "author": "OpenTiny Team",
+  "license": "MIT",
+  "homepage": "https://opentiny.design/tiny-engine",
+  "dependencies": {
+    "@opentiny/vue": "~3.10.0",
+    "@opentiny/vue-icon": "~3.10.0",
+    "vue": "3.2.45",
+    "@opentiny/tiny-engine-canvas": "1.0.2",
+    "@opentiny/tiny-engine-common": "1.0.1",
+    "@opentiny/tiny-engine-http": "1.0.1",
+    "@opentiny/tiny-engine-controller": "1.0.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "vite": "^4.3.7"
+  },
+  "scripts": {
+    "build": "vite build"
+  }
+}