@arkxos/arkos-system 0.1.0

package/src/admin/visual/components/portal-menu/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <div
+    v-if="!loading"
+    class="vc-portal-menu"
+    :style="visual.parseStyle(compStyle)"
+  >
+    <el-menu
+      ellipsis
+      mode="horizontal"
+    >
+      <span v-for="first in dataList" :key="first.id">
+        <el-sub-menu
+          v-if="first.children && first.children.length > 0"
+          :index="first.id"
+          :style="style"
+          class="first-menu"
+        >
+          <template #title>
+            <div :style="style">{{first.text}}</div>
+          </template>
+          <span v-for="second in first.children" :key="second.id">
+            <el-sub-menu
+              v-if="second.children && second.children.length > 0"
+              :index="second.id"
+            >
+              <template #title>{{second.text}}</template>
+              <span v-for="third in second.children" :key="third.id">
+                <el-sub-menu
+                  v-if="third.children && third.children.length > 0"
+                  :index="third.id"
+                >
+                  <template #title>{{third.text}}</template>
+                </el-sub-menu>
+                <el-menu-item v-else :index="second.id">{{third.text}}</el-menu-item>
+              </span>
+            </el-sub-menu>
+            <el-menu-item v-else :index="second.id">{{second.text}}</el-menu-item>
+          </span>
+        </el-sub-menu>
+        <el-menu-item
+          v-else
+          :index="first.data.pageId"
+        ><div class="first-menu" :style="style">{{first.text}}</div></el-menu-item>
+      </span>
+    </el-menu>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick, computed } from 'vue';
+import visual from '@/visual/js/visual';
+import api from '@/http/api';
+
+const props = defineProps({
+  compStyle: Object
+});
+const dataList = ref([{}]);
+const loading = ref(true);
+
+const init = async() => {
+  loading.value = true;
+  const res = await api.post('/business/menu/portal-tree');
+  dataList.value = res.data && res.data.children || [];
+  await nextTick(() => loading.value = false);
+};
+
+const style = computed(() => {
+  return visual.parseFontStyle(props.compStyle || {});
+});
+
+onMounted(() => {
+  init();
+});
+</script>
+
+<style scoped lang="scss">
+.vc-portal-menu {
+  --el-menu-item-height: unset;
+  --el-menu-horizontal-height: unset;
+  width: 100%;
+  :deep(.el-menu) {
+    background: transparent !important;
+    border-bottom: none !important;
+    .el-menu-item.is-active {
+      border-bottom: unset!important;
+    }
+    .first-menu > div {
+      color: inherit;
+    }
+  }
+}
+</style>

package/src/admin/visual/components/qrcode/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div :style="style">
+    <span class="image-box">
+      <el-image
+        v-if="imageUrl !== ''"
+        preview-teleported
+        hide-on-click-modal
+        :src="imageUrl"
+        :preview-src-list="[imageUrl]"
+        style="width:100%;height:100%"
+        fit="scale-down"
+      />
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, computed, onMounted } from 'vue'
+import api from '@/http/api';
+import visual from '@/visual/js/visual';
+
+const props = defineProps({
+  node: Object,
+  compStyle: Object,
+  compData: Object,
+});
+const currNode = ref(props.node);
+const loading = ref(true);
+const message = ref('');
+const imageUrl = ref('');
+
+const loadValue = async() => {
+  loading.value = false;
+  message.value = '';
+  imageUrl.value = '';
+
+  const dataList = (await visual.loadData(props.compData, {}, {}, currNode.value)).data || [];
+  currNode.value.compData.dataList = JSON.stringify(dataList);
+  message.value = dataList.length > 0 && dataList[0]['内容'] || '二维码';
+  loading.value = true;
+  api.createQrCode(message.value).then((res) => {
+    loading.value = false;
+    imageUrl.value = URL.createObjectURL(new Blob([res.data]));
+  }).catch(() => {
+    loading.value = false;
+  });
+};
+
+const style = computed(() => {
+  const compStyle = props.compStyle || {};
+  return visual.parseFontStyle(compStyle);
+});
+
+watch(() => props.node.compData?.refresh, () => {
+  loadValue();
+});
+
+onMounted(() => {
+  loadValue();
+});
+</script>
+
+<style scoped>
+.image-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.image-box img {
+  max-width: 100%;
+  max-height: 100%;
+}
+</style>

package/src/admin/visual/components/router-view/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <div :style="visual.parseStyle(props.compStyle, {height: '100px', width: '100%'})"></div>
+</template>
+
+<script setup>
+import visual from '@/visual/js/visual';
+
+const props = defineProps({
+  node: Object,
+  compStyle: Object,
+});
+</script>

package/src/admin/visual/components/row/index.vue

@@ -0,0 +1,139 @@
+<template>
+  <div
+    class="vc-column"
+    :class="currNode.children.length === 0 ? 'empty' : ''"
+    :style="visual.parseStyle(compStyle)"
+  >
+    <div class="vc-row" v-for="(row, i) in currNode.children" :key="i">
+      <draggable
+        v-for="(col, j) in row.children"
+        :key="j"
+        class="vc-col"
+        :style="'width: ' + col.width + '%'"
+        v-model="currNode.children[i].children[j]"
+        :class="!col.children || col.children.length === 0 ? 'empty' : ''"
+        @mouseoverNode="mouseoverNode"
+        @activeNode="activeNode"
+        @deleteNode="deleteNode"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import Draggable from '@/admin/visual/draggable.vue';
+import tool from '@/utils/tool';
+import visual from '@/visual/js/visual';
+
+const emit = defineEmits(['activeNode', 'deleteNode', 'mouseoverNode'])
+const props = defineProps({
+  node: Object,
+  compStyle: Object
+});
+const currNode = ref(props.node);
+
+const activeNode = (node) => {
+  emit('activeNode', node);
+};
+
+const deleteNode = (item) => {
+  emit('deleteNode', item, currNode.value.children);
+};
+
+const mouseoverNode = (item) => {
+  emit('mouseoverNode', item)
+};
+
+const updateChildren = () => {
+  const compStyle = props.compStyle || {};
+  const rowCnt = compStyle['row'] || 1;
+  const colCnt = parseInt(compStyle['col'] || '2');
+
+  const widths = [];
+  if (!compStyle['span'] || compStyle['span'].split(',') < colCnt) {
+    const avgSpan = 100 / colCnt;
+    for (let index = 0; index < colCnt; index++) {
+      widths.push(avgSpan);
+    }
+  } else {
+    const spans = [];
+    let total = 0;
+    for (const item of compStyle['span'].split(',')) {
+      total += parseInt(item || '1');
+      spans.push(parseInt(item || '1'));
+    }
+    for (let index = 0; index < spans.length; index++) {
+      widths.push(spans[index] * 100 / total);
+    }
+  }
+
+  const rows = currNode.value.children;
+  const rowResult = [];
+  for (let i = 0; i < rowCnt; i++) {
+    let row;
+    if (rows.length > i) {
+      row = rows[i];
+    } else {
+      row = {
+        id: tool.uuids(),
+        name: '行-' + (i + 1),
+        builtin: true,
+        children: []
+      };
+    }
+
+    const cols = row.children || [];
+    const colResult = [];
+    for (let j = 0; j < colCnt; j++) {
+      if (cols.length > j) {
+        colResult.push(cols[j]);
+      } else {
+        colResult.push({
+          id: tool.uuids(),
+          name: '列-' + (i + 1) + '-' + (j + 1),
+          builtin: true,
+          children: []
+        });
+      }
+      colResult[j].width = widths[j];
+    }
+    row.children = colResult;
+    rowResult.push(row);
+  }
+
+  currNode.value.children = rowResult;
+};
+
+watch(() => props.compStyle, () => {
+  updateChildren();
+}, { deep: true });
+
+onMounted(() => {
+  updateChildren();
+});
+</script>
+
+<style scoped lang="scss">
+.vc-column {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
+  .vc-row {
+    width: 100%;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    align-items: center;
+  }
+  .vc-col {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    align-items: center;
+  }
+}
+</style>

package/src/admin/visual/components/search/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <div
+    class="vc-search"
+    :style="visual.parseStyle(props.compStyle)"
+  >
+    <div class="vc-search-input">
+      <el-input :placeholder="props.compStyle['placeholder']" v-model="currValue" />
+    </div>
+    <div class="vc-search-icon">
+      <vc-icon iconId="018dc9c3efe489a7d117" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import visual from '@/visual/js/visual';
+
+const props = defineProps({
+  node: Object,
+  compStyle: Object,
+});
+const currValue = ref('');
+</script>
+
+<style scoped lang="scss">
+.vc-search {
+  .vc-search-input {
+    flex-grow: 1;
+    :deep(.el-input__wrapper) {
+      background-color: transparent!important;
+      border: none!important;
+      box-shadow: none!important;
+    }
+  }
+  .vc-search-icon {
+    cursor: pointer;
+  }
+}
+</style>

package/src/admin/visual/components/tabs/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <div
+    v-if="!loading"
+    ref="buttonListRef"
+    class="vc-tabs"
+  >
+    <div class="vc-tabs-header" :style="{gap: gap}">
+      <div
+        v-for="(tabs, index) in tabsList"
+        :key="index"
+        class="vc-tabs-header-item"
+        :style="getStyle(tabs)"
+        @click="clickTabs(tabs)"
+      >{{tabs.name || '标签名'}}</div>
+    </div>
+    <div class="vc-tabs-body">
+      <draggable
+        v-model="currTabs"
+        :class="['vc-tabs-body-container', currTabs.children.length > 0 ? '' : 'empty']"
+        :inputParam="inputParam"
+        @mouseoverNode="mouseoverNode"
+        @activeNode="activeNode"
+        @deleteNode="deleteNode"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, nextTick, onMounted, watch } from 'vue';
+import visual from '@/visual/js/visual';
+import tool from '@/utils/tool';
+import Draggable from '@/admin/visual/draggable.vue';
+
+const emit = defineEmits(['activeNode', 'deleteNode', 'mouseoverNode']);
+const props = defineProps({
+  node: Object,
+  compStyle: Object,
+  compData: Object,
+  inputParam: Object
+});
+const currNode = ref(props.node);
+const currTabs = ref();
+const tabsList = ref([]);
+const gap = ref('');
+const loading = ref(true);
+const buttonListRef = ref();
+
+const init = async() => {
+  loading.value = true;
+  if (currNode.value.compData.dataSourceType === '') {
+    currNode.value.compData.dataSourceType = '静态数据';
+  }
+  gap.value = props.compStyle['gap'];
+  tabsList.value = tool.deepClone(props.compStyle['tabsList'] || []);
+  if (!tabsList.value || tabsList.value.length === 0) {
+    tabsList.value.push({ id: tool.uuid(), name: '标签1', children: [] });
+  }
+  tabsList.value.forEach(tabs => {
+    tabs.builtin = true;
+    if (!tabs.children) {
+      tabs.children = [];
+    }
+  });
+  if (!currNode.value.children || currNode.value.children.length === 0) {
+    currNode.value.children = tabsList.value;
+  } else {
+    tabsList.value.forEach(tabs => {
+      const child = currNode.value.children.find(item => item.id === tabs.id);
+      if (child) {
+        tabs.children = child.children;
+      }
+    });
+  }
+
+  if (!currTabs.value || !tabsList.value.some(item => item.id === currTabs.value.id)) {
+    currTabs.value = tabsList.value[0];
+  }
+  currNode.value.children = tabsList.value;
+  await nextTick(() => loading.value = false);
+};
+
+const getStyle = (data) => {
+  const compStyle = props.compStyle || {};
+  const prefix = currTabs.value.id === data.id ? 'selected.' : '';
+  const styleList = compStyle[prefix + 'styleList'] || [];
+  const style = visual.getConditionStyle(styleList, data);
+  return style ? visual.parseStyle(style) : visual.parseFontStyle(compStyle);
+};
+
+const clickTabs = async(tabs) => {
+  currTabs.value = tabs;
+};
+
+const activeNode = (node) => {
+  emit('activeNode', node);
+};
+
+const deleteNode = (item) => {
+  emit('deleteNode', item, currNode.value.children);
+};
+
+const mouseoverNode = (item) => {
+  emit('mouseoverNode', item)
+};
+
+watch(() => props.compStyle?.gap, () => {
+  gap.value = props.compStyle['gap'];
+}, { deep: true });
+
+watch(() => props.compStyle, () => {
+  init();
+}, { deep: true });
+
+onMounted(async() => {
+  await init();
+});
+</script>
+
+<style scoped lang="scss">
+.vc-tabs-header {
+  display: flex;
+  flex-direction: row;
+}
+</style>

package/src/admin/visual/components/text/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <span :style="style">{{currValue}}</span>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue';
+import visual from '@/visual/js/visual';
+
+const props = defineProps({
+  node: Object,
+  compStyle: Object,
+  compData: Object,
+  inputParam: Object
+});
+const currNode = ref(props.node);
+const currValue = ref('');
+
+const loadValue = async() => {
+  const dataList = (await visual.loadData(
+    props.compData,
+    {},
+    { inputParam: props.inputParam },
+    currNode.value)).data || [];
+  currNode.value.compData.dataList = JSON.stringify(dataList);
+  const value = dataList.length > 0 && dataList[0]['内容'] || '文本';
+  const compStyle = currNode.value.currCompStyle || {};
+  if (compStyle['formatter'] === 'template') {
+    currValue.value = (compStyle['formatterTemplate'] || '')
+      .replace('{value}', value || value === 0 ? value : '');
+  } else if (compStyle['formatter'] === 'script') {
+    try {
+      currValue.value = new Function('value', 'return ' + compStyle['formatterScript'])(value);
+    } catch (e) {
+      console.log('格式化函数解释出错：', e);
+    }
+  } else {
+    currValue.value = value;
+  }
+};
+
+const style = computed(() => {
+  const compStyle = props.compStyle || {};
+  let style = visual.parseFontStyle(compStyle);
+  if (compStyle['limitLine']) {
+    style += 'display: -webkit-box;' +
+      '-webkit-box-orient: vertical;' +
+      `-webkit-line-clamp: ${compStyle['limitLine']};` +
+      'overflow: hidden;';
+  }
+  return style;
+});
+
+watch(() => props.compStyle, () => {
+  loadValue();
+}, { deep: true });
+
+watch(() => props.node.compData?.refresh, () => {
+  loadValue();
+});
+
+onMounted(() => {
+  loadValue();
+});
+</script>

package/src/admin/visual/components/video/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <div :style="style" class="vc-video">
+    <div class="video-box"></div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import visual from '@/visual/js/visual';
+
+const props = defineProps({
+  node: Object,
+  compStyle: Object,
+  compData: Object,
+});
+
+const style = computed(() => {
+  const compStyle = props.compStyle || {};
+  return visual.parseStyle(compStyle);
+});
+</script>
+
+<style scoped>
+.vc-video {
+  height: 100%;
+  width: 100%;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  border: 1px dashed #c2c2c2;
+}
+.video-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+</style>

package/src/admin/visual/draggable.vue

@@ -0,0 +1,49 @@
+<template>
+  <draggable
+    v-model="node.children"
+    item-key="id"
+    class="draggable-node"
+    group="nodeGroup"
+    handle=".draggable-node"
+    :animation="200"
+  >
+    <template #item="{ element }">
+      <avc-page-comp
+        :id="element.id"
+        :node="element"
+        :inputParam="props.inputParam"
+        @mouseoverNode="mouseoverNode"
+        @activeNode="activeNode"
+        @deleteNode="deleteNode"
+      />
+    </template>
+  </draggable>
+</template>
+
+<script setup>
+import draggable from 'vuedraggable';
+
+const emit = defineEmits(['activeNode', 'deleteNode', 'mouseoverNode']);
+const props = defineProps({
+  inputParam: Object
+});
+const node = defineModel();
+
+const activeNode = (node) => {
+  emit('activeNode', node);
+};
+
+const deleteNode = (item) => {
+  emit('deleteNode', item, node.value.children);
+};
+
+const mouseoverNode = (item) => {
+  emit('mouseoverNode', item)
+};
+</script>
+
+<style scoped lang="scss">
+.draggable-node {
+  width: 100%;
+}
+</style>