@opentiny/tiny-engine-toolbar-save 1.0.1

package/dist/index.js

@@ -0,0 +1,200 @@
+import "./style.css";
+import { reactive as B, ref as P, watch as T, onBeforeMount as w, resolveComponent as r, openBlock as k, createElementBlock as E, Fragment as M, createVNode as l, withCtx as d, createElementVNode as C, normalizeClass as O, withDirectives as G, vShow as V, createTextVNode as S, createBlock as D, createCommentVNode as R } from "vue";
+import { VueMonaco as U } from "@opentiny/tiny-engine-common";
+import { Loading as z, Button as I, Popover as J, DialogBox as j } from "@opentiny/vue";
+import { useCanvas as h, useLayout as x, useBlock as F, usePage as q, useNotify as H } from "@opentiny/tiny-engine-controller";
+import { theme as K } from "@opentiny/tiny-engine-controller/adapter";
+import { setSchema as Q, getSchema as W } from "@opentiny/tiny-engine-canvas";
+import { constants as X } from "@opentiny/tiny-engine-utils";
+import { handlePageUpdate as Y } from "@opentiny/tiny-engine-common/js/http";
+const { pageState: f, isSaved: Z, isBlock: $ } = h(), { PLUGIN_NAME: ee, getPluginApi: oe } = x(), { getCurrentBlock: te } = F(), { PAGE_STATUS: a } = X, { pageSettingState: p, isTemporaryPage: g } = q(), m = B({
+  visible: !1,
+  code: "",
+  originalCode: "",
+  disabled: !1
+}), s = P(!1), ne = async (n) => {
+  var t;
+  const e = oe(ee.BlockManage), o = te();
+  o.label = n.fileName, o.content = n, s.value = !0, o.screenshot = await e.getBlockBase64(), await ((t = e.saveBlock) == null ? void 0 : t.call(e, o)), s.value = !1;
+}, ae = async (n) => {
+  const { currentPage: e } = f, o = {
+    page_content: n
+  };
+  s.value = !0, await Y(e.id, { ...e, ...o }), s.value = !1;
+}, y = (n) => {
+  const e = JSON.parse(n);
+  if (f.pageSchema = e, Q(e), p != null && p.isAIPage) {
+    g.saved && (g.saved = !1), g.saved = !0;
+    const o = "page_content";
+    p.currentPageData[o] = e;
+    return;
+  }
+  $() ? ne(e) : ae(e);
+}, N = async () => {
+  var c;
+  if (Z() || m.disabled)
+    return;
+  const n = (c = x().layoutState) == null ? void 0 : c.pageStatus, e = n == null ? void 0 : n.state, o = n == null ? void 0 : n.data, t = {
+    [a.Release]: "当前页面未锁定，请先锁定再保存",
+    [a.Empty]: "当前应用无页面，请先新建页面再保存",
+    [a.Guest]: "官网演示应用不能保存页面，如需体验请切换应用",
+    [a.Lock]: `当前页面被 ${o == null ? void 0 : o.username} ${o == null ? void 0 : o.resetPasswordToken} 锁定，如需编辑请先联系他解锁文件，然后再锁定该页面后编辑！`
+  };
+  if ([a.Release, a.Empty, a.Guest, a.Lock].includes(e)) {
+    H({
+      type: "error",
+      title: "保存失败",
+      message: t[e]
+    });
+    return;
+  }
+  m.disabled = !0;
+  let i = z.service({
+    lock: !0,
+    text: "保存中",
+    background: "rgba(0, 0, 0, 0.5)"
+  });
+  const u = W();
+  m.code = JSON.stringify(u || {}, null, 2), y(m.code), s.value && (m.disabled = !1), T(
+    () => f.isSaved,
+    (v) => {
+      v && i.close();
+    }
+  );
+};
+const se = (n, e) => {
+  const o = n.__vccOpts || n;
+  for (const [t, i] of e)
+    o[t] = i;
+  return o;
+}, ie = {
+  saveCommon: y,
+  openCommon: N
+}, ce = {
+  components: {
+    VueMonaco: U,
+    TinyButton: I,
+    TinyPopover: J,
+    TinyDialogBox: j
+  },
+  props: {
+    icon: {
+      type: String,
+      default: "save"
+    }
+  },
+  setup() {
+    const { isSaved: n } = h(), e = B({
+      visible: !1,
+      code: "",
+      originalCode: "",
+      disabled: !1,
+      timer: null
+    }), o = P(null), t = () => {
+      e.visible = !1, e.originalCode = "";
+    }, i = () => {
+      s.value || N();
+    }, u = () => {
+      y();
+    }, c = {
+      theme: K(),
+      tabSize: 2,
+      language: "json",
+      autoIndent: !0,
+      lineNumbers: !0,
+      formatOnPaste: !0,
+      automaticLayout: !0,
+      roundedSelection: !0,
+      minimap: {
+        enabled: !1
+      }
+    };
+    return w(() => {
+      clearTimeout(e.timer);
+    }), {
+      state: e,
+      editor: o,
+      editorOptions: c,
+      isLoading: s,
+      close: t,
+      isSaved: n,
+      openApi: i,
+      saveApi: u
+    };
+  }
+}, re = { class: "dots" };
+function le(n, e, o, t, i, u) {
+  const c = r("svg-icon"), v = r("tiny-popover"), A = r("vue-monaco"), b = r("tiny-button"), L = r("tiny-dialog-box");
+  return k(), E(M, null, [
+    l(v, {
+      trigger: "hover",
+      "open-delay": 1e3,
+      "popper-class": "toolbar-right-popover",
+      "append-to-body": "",
+      content: t.isLoading ? "保存中" : "保存"
+    }, {
+      reference: d(() => [
+        C("span", {
+          class: O([t.isLoading ? "saving" : "icon"]),
+          onClick: e[0] || (e[0] = (..._) => t.openApi && t.openApi(..._))
+        }, [
+          G(C("span", re, null, 512), [
+            [V, !t.isSaved()]
+          ]),
+          l(c, { name: o.icon }, null, 8, ["name"])
+        ], 2)
+      ]),
+      _: 1
+    }, 8, ["content"]),
+    l(L, {
+      class: "dialog-box",
+      modal: !1,
+      fullscreen: !0,
+      "append-to-body": !0,
+      visible: t.state.visible,
+      title: "Schema 本地与线上差异",
+      "onUpdate:visible": e[1] || (e[1] = (_) => t.state.visible = _)
+    }, {
+      footer: d(() => [
+        l(b, { onClick: t.close }, {
+          default: d(() => [
+            S("取 消")
+          ]),
+          _: 1
+        }, 8, ["onClick"]),
+        l(b, {
+          type: "primary",
+          onClick: t.saveApi
+        }, {
+          default: d(() => [
+            S("保 存")
+          ]),
+          _: 1
+        }, 8, ["onClick"])
+      ]),
+      default: d(() => [
+        t.state.visible ? (k(), D(A, {
+          key: 0,
+          ref: "editor",
+          class: "monaco-editor",
+          diffEditor: !0,
+          options: t.editorOptions,
+          value: t.state.code,
+          original: t.state.originalCode
+        }, null, 8, ["options", "value", "original"])) : R("", !0)
+      ]),
+      _: 1
+    }, 8, ["visible"])
+  ], 64);
+}
+const de = /* @__PURE__ */ se(ce, [["render", le], ["__scopeId", "data-v-6d9e48c8"]]), ke = {
+  id: "save",
+  title: "save",
+  icon: "",
+  align: "right",
+  component: de,
+  api: ie
+};
+export {
+  ke as default
+};

package/dist/style.css

@@ -0,0 +1 @@
+.dots[data-v-6d9e48c8]{width:6px;height:6px;background:var(--ti-lowcode-toolbar-dot-color);border-radius:50%;display:inline-block;position:absolute;top:4px;right:3px;z-index:100}.saving[data-v-6d9e48c8]{width:32px;height:32px;display:inline-block;cursor:not-allowed;color:var(--ti-lowcode-disabled-color);font-size:20px;margin-bottom:-2px}.dialog-box[data-v-6d9e48c8] .tiny-dialog-box{display:flex;flex-direction:column}.dialog-box[data-v-6d9e48c8] .tiny-dialog-box .tiny-dialog-box__body{flex:1}.dialog-box .monaco-editor[data-v-6d9e48c8]{width:100%;height:100%}.changeRole a{color:var(--ti-lowcode-canvas-handle-hover-bg);padding:0 5px}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@opentiny/tiny-engine-toolbar-save",
+  "version": "1.0.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@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"
+  }
+}