@maketribe/ms-app 3.0.30 → 3.0.31

package/src/components/index.ts

@@ -0,0 +1,23 @@
+export * from "./data-model";
+export * from "./form-components";
+export * from "./column-components";
+export * from "./condition-components";
+export * from "./svg-icon";
+export * from "./config-provider";
+export * from "./image-view";
+export * from "./video-view";
+export * from "./file-view";
+export * from "./data-table-select-dialog";
+export * from "./data-table-select";
+export * from "./data-select";
+export * from "./pagination";
+export * from "./markdown-editor";
+export * from "./rich-text-editor";
+export * from "./system-provider";
+export * from "./material-list";
+export * from "./material-select";
+export * from "./role-permission-config";
+export * from "./image-select";
+export * from "./verify-dialog";
+export * from "./json-editor";
+export * from "./upload-file";

package/src/components/json-editor/index.ts

@@ -0,0 +1,8 @@
+import { defineAsyncComponent } from "vue";
+import { withInstall } from "@maketribe/utils";
+
+export const MKJsonEditor = withInstall(
+  defineAsyncComponent(() => import("./json-editor"))
+);
+
+export default MKJsonEditor;

package/src/components/json-editor/json-editor-options.ts

@@ -0,0 +1,21 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+
+export const jsonEditorProps = buildProps({
+  modelValue: {
+    type: null,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+} as const);
+
+export type JsonEditorProps = ExtractPropTypes<typeof jsonEditorProps>;
+
+export const jsonEditorEmits = {
+  "update:model-value": (modelValue: string) => true,
+};
+
+export type jsonEditorEmits = typeof jsonEditorEmits;

package/src/components/json-editor/json-editor.tsx

@@ -0,0 +1,28 @@
+import { computed, defineComponent, unref } from "vue";
+import { Codemirror } from "vue-codemirror";
+import { json } from "@codemirror/lang-json";
+import { jsonEditorEmits, jsonEditorProps } from "./json-editor-options";
+
+export default defineComponent({
+  name: "MKJsonEditor",
+  props: jsonEditorProps,
+  emits: jsonEditorEmits,
+  setup(props, { emit }) {
+    const modelValue = computed({
+      get: () => (props.modelValue as string) || "",
+      set: (v: string) => emit("update:model-value", v),
+    });
+
+    return () => {
+      return (
+        <Codemirror
+          class="mk-json-editor"
+          modelValue={unref(modelValue)}
+          onUpdate:modelValue={(v: string) => (modelValue.value = v)}
+          disabled={props.disabled}
+          extensions={[json()]}
+        />
+      );
+    };
+  },
+});

package/src/components/markdown-editor/index.ts

@@ -0,0 +1,10 @@
+import { defineAsyncComponent } from "vue";
+import { withInstall } from "@maketribe/utils";
+
+const _MarkdownEditor = defineAsyncComponent(() => import("./markdown-editor"));
+
+export const MKMarkdownEditor = withInstall(_MarkdownEditor);
+
+export default MKMarkdownEditor;
+
+export * from "./markdown-editor-options";

package/src/components/markdown-editor/markdown-editor-options.ts

@@ -0,0 +1,17 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+
+export const markdownEditorProps = buildProps({
+  modelValue: {
+    type: String,
+    required: true,
+  },
+} as const);
+
+export type MarkdownEditorProps = ExtractPropTypes<typeof markdownEditorProps>;
+
+export const markdownEditorEmits = {
+  "update:model-value": (modelValue: string) => true,
+};
+
+export type MarkdownEditorEmits = typeof markdownEditorEmits;

package/src/components/markdown-editor/markdown-editor.tsx

@@ -0,0 +1,136 @@
+import {
+  Ref,
+  computed,
+  defineComponent,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  unref,
+} from "vue";
+// @ts-ignore
+import Vditor from "vditor";
+import {
+  markdownEditorEmits,
+  markdownEditorProps,
+} from "./markdown-editor-options";
+import { Disposable, createDisposable } from "@maketribe/utils";
+import { MKMaterialSelect } from "../material-select";
+
+let uid = 0;
+
+export default defineComponent({
+  name: "MKMarkdownEditor",
+  props: markdownEditorProps,
+  emits: markdownEditorEmits,
+  setup(props, { emit }) {
+    const markdownEl: Ref<HTMLElement | null> = ref(null);
+
+    const _uid = uid++;
+
+    const modelValue = computed({
+      get: () => props.modelValue,
+      set: (v: string) => emit("update:model-value", v),
+    });
+
+    onMounted(() => {
+      const disposable = new Disposable();
+
+      const vditor = new Vditor(unref(markdownEl)!, {
+        cache: { id: `vditor${_uid}` },
+        toolbar: [
+          "emoji",
+          "headings",
+          "bold",
+          "italic",
+          "strike",
+          "link",
+          "|",
+          "list",
+          "ordered-list",
+          "check",
+          "outdent",
+          "indent",
+          "|",
+          "quote",
+          "line",
+          "code",
+          "inline-code",
+          "insert-before",
+          "insert-after",
+          "|",
+          {
+            name: "material",
+            tipPosition: "s",
+            tip: "素材",
+            icon: `<svg><use xlink:href="#icon-image" /></svg>`,
+            click: async () => {
+              const response = await MKMaterialSelect();
+
+              if (!response.success) {
+                return;
+              }
+
+              vditor.insertValue(`![图片](${response.path})`);
+            },
+          },
+          "record",
+          "table",
+          "|",
+          "undo",
+          "redo",
+          "|",
+          "fullscreen",
+          "edit-mode",
+          {
+            name: "more",
+            toolbar: [
+              "both",
+              "code-theme",
+              "content-theme",
+              "export",
+              "outline",
+              "preview",
+              "devtools",
+              "info",
+              "help",
+            ],
+          },
+        ],
+        after: () => {
+          vditor!.setValue(modelValue.value || "");
+
+          const _markdownEl = unref(markdownEl)!;
+
+          const handleContentChange = () => {
+            modelValue.value = vditor!.getValue();
+          };
+
+          _markdownEl.addEventListener("input", handleContentChange);
+          _markdownEl.addEventListener("keydown", handleContentChange);
+          _markdownEl.addEventListener("keyup", handleContentChange);
+          _markdownEl.addEventListener("paste", handleContentChange);
+
+          disposable.register(
+            createDisposable(() => {
+              _markdownEl.removeEventListener("input", handleContentChange);
+              _markdownEl.removeEventListener("keydown", handleContentChange);
+              _markdownEl.removeEventListener("keyup", handleContentChange);
+              _markdownEl.removeEventListener("paste", handleContentChange);
+            })
+          );
+        },
+      });
+
+      onBeforeUnmount(() => {
+        disposable.dispose();
+        vditor?.destroy();
+      });
+    });
+
+    return () => {
+      return (
+        <div ref={((el: HTMLElement) => (markdownEl.value = el)) as any}></div>
+      );
+    };
+  },
+});

package/src/components/material-list/index.ts

@@ -0,0 +1,7 @@
+import { withInstall } from "@maketribe/utils";
+import MaterialList from "./material-list.vue";
+
+export const MKMaterialList = withInstall(MaterialList);
+export default MKMaterialList;
+
+export * from "./material-list-options";

package/src/components/material-list/material-group-form-popover.vue

@@ -0,0 +1,78 @@
+<template>
+  <ElPopover
+    v-model:visible="visible"
+    title="添加素材分组"
+    effect="light"
+    placement="right"
+    trigger="click"
+    width="320"
+  >
+    <template #reference>
+      <slot></slot>
+    </template>
+
+    <div>
+      <MKDataForm :data-form="materialGroupForm" v-loading="loading">
+        <MKForm :data-form="materialGroupForm" />
+      </MKDataForm>
+      <div
+        style="
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        "
+      >
+        <ElButton
+          type="primary"
+          :loading="!allowSubmit"
+          @click="handleSaveClick"
+        >
+          保存
+        </ElButton>
+        <ElButton @click="handleCancelClick">取消</ElButton>
+      </div>
+    </div>
+  </ElPopover>
+</template>
+
+<script setup lang="ts">
+import { Ref, computed, ref, unref } from "vue";
+import { ElMessage } from "element-plus";
+import { MKDataForm, MKForm } from "../data-model/data-form";
+import { MaterialGroupForm, MaterialMan } from "../../dataview/material";
+
+const props = defineProps({
+  materialMan: {
+    type: MaterialMan,
+    required: true,
+  },
+  materialGroupForm: {
+    type: MaterialGroupForm,
+    required: true,
+  },
+});
+
+const visible: Ref<boolean> = ref(false);
+
+const loading = computed(() => props.materialGroupForm.loading);
+const allowSubmit = computed(
+  () => !!(unref(loading) || !props.materialGroupForm.allowSubmit)
+);
+
+const handleSaveClick = async () => {
+  const result = await props.materialGroupForm.submit();
+
+  if (result.data.code !== 200) {
+    ElMessage.error(result.data.msg);
+    return;
+  }
+
+  props.materialMan.materialGroupTree.load();
+
+  visible.value = false;
+};
+
+const handleCancelClick = () => {
+  visible.value = false;
+};
+</script>

package/src/components/material-list/material-group.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="mk-material-group" v-loading="loading">
+    <div class="mk-material-group__header">
+      <div class="mk-material-group__header-title">素材分组</div>
+      <MaterialGroupFromPopper
+        :material-man="materialMan"
+        :material-group-form="materialGroupForm"
+      >
+        <ElButton
+          @click="handleAddClick"
+          :icon="Plus"
+          size="small"
+          type="primary"
+        >
+        </ElButton>
+      </MaterialGroupFromPopper>
+    </div>
+    <div class="mk-material-group__main">
+      <ElScrollbar height="100%">
+        <MKDataTable
+          :auto-load="false"
+          :data-table="materialGroupTree"
+          highlight-current
+        >
+          <MKTree :data-tree="materialGroupTree" @nodeClick="handleNodeClick">
+            <template #node-tools="{ data }">
+              <div class="mk-material-group__tools" @click.stop>
+                <ElTooltip content="添加">
+                  <span class="mk-material-group__tools-item">
+                    <MaterialGroupFromPopper
+                      :material-man="materialMan"
+                      :material-group-form="materialGroupForm"
+                    >
+                      <ElIcon @click="handleAddClick(data.data)">
+                        <Plus />
+                      </ElIcon>
+                    </MaterialGroupFromPopper>
+                  </span>
+                </ElTooltip>
+                <ElTooltip content="编辑">
+                  <span class="mk-material-group__tools-item">
+                    <MaterialGroupFromPopper
+                      :material-man="materialMan"
+                      :material-group-form="materialGroupForm"
+                    >
+                      <ElIcon @click="handleEditClick(data.data)">
+                        <Edit />
+                      </ElIcon>
+                    </MaterialGroupFromPopper>
+                  </span>
+                </ElTooltip>
+                <ElTooltip content="删除">
+                  <span class="mk-material-group__tools-item">
+                    <ElIcon @click="handleDeleteClick(data.data)">
+                      <Delete />
+                    </ElIcon>
+                  </span>
+                </ElTooltip>
+              </div>
+            </template>
+          </MKTree>
+        </MKDataTable>
+      </ElScrollbar>
+    </div>
+    <div class="mk-material-group__footer"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, reactive } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Plus, Edit, Delete } from "@element-plus/icons-vue";
+import {
+  MaterialMan,
+  MaterialGroupNode,
+  MaterialGroupForm,
+} from "../../dataview";
+import { MKDataTable, MKTree } from "../data-model/data-table";
+
+import { useI18n } from "../../composables";
+import MaterialGroupFromPopper from "./material-group-form-popover.vue";
+import { DataTreeNode } from "@maketribe/dm";
+
+const props = defineProps({
+  materialMan: {
+    type: MaterialMan,
+    required: true,
+  },
+});
+
+const i18n = useI18n()!;
+
+const materialGroupForm = reactive(
+  new MaterialGroupForm()
+) as MaterialGroupForm;
+
+const materialGroupTree = computed(() => props.materialMan.materialGroupTree);
+
+const loading = computed(() => props.materialMan.materialGroupTree.loading);
+
+const handleNodeClick = (item: DataTreeNode<MaterialGroupNode>) => {
+  if (!item.children.length) {
+    props.materialMan.setCurrentMaterialGroup(item.data);
+  }
+};
+
+const handleAddClick = async (parent?: MaterialGroupNode) => {
+  materialGroupForm.addRecord();
+
+  await nextTick();
+
+  materialGroupForm.setData({
+    ...materialGroupForm.data,
+    parentGroupId: parent?.id || null,
+  } as MaterialGroupNode);
+};
+
+const handleEditClick = (item: MaterialGroupNode) => {
+  materialGroupForm.editRecord(item);
+};
+
+const handleDeleteClick = async (item: MaterialGroupNode) => {
+  const isConfirm = await ElMessageBox.confirm(
+    i18n.translate("mk.dataTablePage.deleteMessage"),
+    i18n.translate("mk.dataTablePage.deleteTitle"),
+    { type: "warning" }
+  ).then(
+    () => true,
+    () => false
+  );
+
+  if (!isConfirm) {
+    return;
+  }
+
+  const result = await props.materialMan.materialGroupTree.deleteAfterRefresh(
+    item
+  );
+
+  if (result.data.code !== 200) {
+    ElMessage.error(result.data.msg);
+    return;
+  }
+};
+</script>

package/src/components/material-list/material-item.vue

@@ -0,0 +1,26 @@
+<template>
+  <ElCard class="mk-material-item" shadow="never">
+    <div class="mk-material-item__preview">
+      <MaterialComponent :src="material.path" />
+    </div>
+    <div class="mk-material-item__title">{{ material.desc }}</div>
+  </ElCard>
+</template>
+
+<script setup lang="ts">
+import { Material, MaterialTable } from "../../dataview";
+import { computed, toRaw } from "vue";
+
+const props = defineProps({
+  materialTable: { type: MaterialTable, required: true },
+  material: { type: Object, required: true },
+});
+
+const MaterialComponent = computed(() => {
+  const component =
+    props.materialTable.resolveMaterialComponent(props.material as Material) ||
+    props.materialTable.materialComponents.resolveComponent("MKFileView")!;
+
+  return toRaw(component.component);
+});
+</script>

package/src/components/material-list/material-list-options.ts

@@ -0,0 +1,24 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { Material, MaterialMan } from "../../dataview";
+
+export const materialListProps = buildProps({
+  materialMan: {
+    type: MaterialMan,
+    required: true,
+  },
+  selectable: {
+    type: Boolean,
+    default: false,
+  },
+  selectedPath: {
+    type: String,
+  },
+} as const);
+
+export type MaterialListProps = ExtractPropTypes<typeof materialListProps>;
+
+export const materialListEmits = {
+  "update:selected-path": (path: any) => true,
+  selectedChange: (material: Material) => true,
+};

package/src/components/material-list/material-list.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="mk-material-list">
+    <MaterialGroup :material-man="materialMan" />
+    <div class="mk-material-list__main" v-loading="loading">
+      <div class="mk-material-list__header">
+        <div class="mk-material-list__header-left">
+          <div class="mk-material-list__types">
+            <div
+              v-for="item of materialTypes"
+              :key="item.value"
+              :class="[
+                'mk-material-list__type',
+                currentMaterialTypeId === item.value ? 'is-active' : '',
+              ]"
+              @click="handleMaterialTypeClick(item)"
+            >
+              {{ item.label }}
+            </div>
+          </div>
+        </div>
+        <div class="mk-material-list__header-right">
+          <template v-if="currentMaterialType">
+            {{ currentMaterialType.label }}大小不超过
+            {{ currentMaterialType.limit }} M
+            <MKWebFileUploadContext
+              :web-file-upload="materialMan.upload"
+              :accept="currentMaterialType.accept"
+            >
+              <MKUploadFile>
+                <ElButton type="primary">
+                  选择{{ currentMaterialType.label }}
+                </ElButton>
+              </MKUploadFile>
+            </MKWebFileUploadContext>
+          </template>
+        </div>
+      </div>
+
+      <div class="mk-material-list__body">
+        <ElScrollbar height="100%">
+          <div class="mk-material-list__wrapper">
+            <MaterialItem
+              v-for="material of materialList"
+              :key="material.id"
+              :class="[
+                'mk-material-list__item',
+                value === material.path ? 'is-current' : '',
+              ]"
+              :material-table="materialTable"
+              :material="material"
+              @click.capture="handleMaterialItemClick($event, material)"
+            />
+          </div>
+        </ElScrollbar>
+        <div class="mk-material-list__footer">
+          <ElPagination
+            class="mk-data-table-pagination"
+            :background="true"
+            :pageSizes="unref(pageSizes)"
+            :currentPage="unref(currentPage)"
+            :pageSize="unref(pageSize)"
+            :total="unref(totalRecCount)"
+            layout="prev, pager, next"
+            @current-change="changeCurrentPage"
+            @size-change="changePageSize"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, unref } from "vue";
+import { ElPagination } from "element-plus";
+// import { MKUploadFile } from "../upload-file/upload-file";
+// import { MKWebFileUploadContext } from "../upload-file/context/web-file-upload-context";
+import { MaterialType, Material } from "../../dataview";
+import MaterialGroup from "./material-group.vue";
+import MaterialItem from "./material-item.vue";
+import { materialListProps, materialListEmits } from "./material-list-options";
+
+defineOptions({ name: "MKMaterialList" });
+
+const props = defineProps(materialListProps);
+
+const emit = defineEmits(materialListEmits);
+
+props.materialMan.init();
+
+const loading = computed(() => props.materialMan.materialTable.loading);
+
+const value = computed({
+  get: () => {
+    return props.selectable ? props.selectedPath ?? null : null;
+  },
+  set: (v) => {
+    emit("update:selected-path", v);
+  },
+});
+
+const materialTable = computed(() => props.materialMan.materialTable);
+const pageSizes = computed(() => unref(materialTable).pageSizes);
+const currentPage = computed({
+  get: () => unref(materialTable).currentPage,
+  set: (v) => {
+    unref(materialTable).pageTo(v);
+  },
+});
+const pageSize = computed({
+  get: () => unref(materialTable).pageSize,
+  set: (v) => {
+    unref(materialTable).setPageSize(v);
+  },
+});
+const totalRecCount = computed(() => unref(materialTable).totalRecCount);
+const changeCurrentPage = (v: number) => {
+  currentPage.value = v;
+};
+const changePageSize = (v: number) => {
+  pageSize.value = v;
+};
+
+const materialList = computed(() => unref(materialTable).getList());
+const materialTypes = computed(() => props.materialMan.getMaterialType());
+const currentMaterialTypeId = computed(
+  () => props.materialMan.currentMaterialTypeId
+);
+
+const currentMaterialType = computed(
+  () => props.materialMan.currentMaterialType
+);
+
+const handleMaterialTypeClick = (materialType: MaterialType) => {
+  if (materialType.value === unref(currentMaterialTypeId)) {
+    return;
+  }
+
+  props.materialMan.setCurrentMaterialTypeId(materialType.value);
+};
+
+const handleMaterialItemClick = (event: MouseEvent, material: Material) => {
+  if (!props.selectable) {
+    return;
+  }
+
+  event.preventDefault();
+  event.stopPropagation();
+
+  value.value = material.path;
+  emit("selectedChange", material);
+};
+</script>