feat: 新增构建html及js

apps/shalu-bigscreen-designer/src/components/CodeEditor/index.ts

@@ -1,11 +0,0 @@
-import CodeEditorModal from './src/index.vue';
-
-export type CodeEditorModalInstance = {
-  open: (code: string) => void;
-  close: () => void;
-  getCode: () => string;
-};
-
-export {
-  CodeEditorModal,
-}

apps/shalu-bigscreen-designer/src/components/CodeEditor/src/Editor.vue

@@ -1,58 +0,0 @@
-<template>
-  <Codemirror
-    ref="editorRef"
-    placeholder="请输入"
-    style="height: 500px;"
-    :model-value="modelValue"
-    :tab-size="2"
-    :auto-focus="true"
-    :indent-with-tabs="true"
-    :extensions="[
-      oneDark,
-      javascript(),
-      json()
-    ]"
-    @change="handleCodeChange"
-  />
-</template>
-
-<script setup lang="ts">
-import { ref, defineProps, watch, defineEmits } from 'vue';
-import { Codemirror } from 'vue-codemirror';
-import { oneDark } from '@codemirror/theme-one-dark';
-import { javascript } from '@codemirror/lang-javascript';
-import { json } from '@codemirror/lang-json';
-import jsBeautify from 'js-beautify';
-
-const props = defineProps({
-  code: {
-    type: String,
-    default: ''
-  }
-});
-const emit = defineEmits(['update:code', 'change']);
-const editorRef = ref(null);
-const modelValue = ref(props.code);
-
-watch(
-  () => props.code,
-  (val) => {
-    modelValue.value = jsBeautify.js(val, { indent_size: 2 });
-  },
-  { immediate: true }
-)
-
-const handleCodeChange = (val: string) => {
-  try {
-    emit('update:code', val);
-    emit('change', val);
-  } catch (error) {
-    console.error(error);
-    return;
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

apps/shalu-bigscreen-designer/src/components/CodeEditor/src/index.vue

@@ -1,48 +0,0 @@
-<template>
-  <Modal
-    v-model:open="open"
-    :title="title"
-    :width="width"
-    @ok="handleOk"
-  >
-    <Editor v-model:code="code"/>
-  </Modal>
-</template>
-
-<script setup lang="ts">
-import { Modal  } from 'ant-design-vue';
-import { ref, defineProps, withDefaults, defineExpose } from 'vue';
-import Editor from './Editor.vue';
-
-interface IProp {
-  title?: string;
-  width?: number;
-}
-withDefaults(defineProps<IProp>(), {
-  title: '编辑',
-  width: 800,
-});
-const emit = defineEmits(['ok']);
-const open = ref(false);
-const code = ref('');
-
-const handleOk = () => {
-  // TODO: 检验code
-  emit('ok', code.value);
-  open.value = false;
-};
-
-defineExpose({
-  open: (codeStr: string) => {
-    open.value = true;
-    code.value = codeStr;
-  },
-  close: () => {
-    open.value = false;
-  },
-});
-</script>
-
-<style scoped>
-
-</style>

apps/shalu-bigscreen-designer/src/store/modules/project.ts

@@ -6,6 +6,7 @@ import { update, defaultsDeep } from "lodash";
 import { getNormalizedContainer } from "@/utils/common";
 import { editPageDesignApi } from "@shalu/service";
 import { message } from "ant-design-vue";
+import { buildHtml, buildJs } from "@/utils/build";
 
 type ProjectState = {
   projectInfo: ProjectInfo;
@@ -262,11 +263,14 @@ export const useProjectStore = defineStore({
     },
     // 保存当前项目到服务器
     async handleSaveProject(pageId: string) {
+      const html = buildHtml(this.projectInfo);
+      const js = buildJs(this.projectInfo);
+
       const params = {
         appPageId: pageId,
         json: JSON.stringify(this.projectInfo),
-        html: "",
-        js: "",
+        html,
+        js,
         type: 0,
       };
 

apps/shalu-bigscreen-designer/src/utils/build/buildHtml.ts

@@ -0,0 +1,35 @@
+import { ProjectInfo } from "#/project";
+import { components } from "@shalu/dashboard-ui";
+import { kebabCase } from 'lodash-es';
+
+export const buildHtml = (project: ProjectInfo) => {
+  console.log(project, components)
+  const page = project.pages[0];
+
+  return `
+    <div class="player-page" style="background: #000;">
+      <div class="page-wrapper" :style="pageWapperStyle">
+        ${
+          page.elements.map(element => {
+            return `
+              <div 
+                :style="{
+                  width: '${element.container.props.width}px',
+                  height: '${element.container.props.height}px',
+                  left: '${element.container.props.x}px',
+                  top: '${element.container.props.y}px',
+                  position: 'absolute',
+                  zIndex: props.element.zIndex,
+                }"
+              >
+                <${kebabCase(components.Container.name)} v-bind="${JSON.stringify(element.container)}">
+                  <${kebabCase(components[element.componentType].name)} v-bind="${JSON.stringify(element.props)}" :width="${element.container.props.width}" :height="${element.container.props.height}"/>
+                </$>
+              </div>
+            `
+          })
+        }
+      </div>
+    </div>
+  `
+}

apps/shalu-bigscreen-designer/src/utils/build/buildJs.ts

@@ -0,0 +1,74 @@
+import { ProjectInfo } from "#/project";
+export const buildJs = (project: ProjectInfo) => {
+  return `
+    function controller(base, form, program) {
+      let scale = 1;
+
+      form.pageWapperStyle = ref({
+        position: 'absolute',
+        left: '50%',
+        top: '50%',
+        width: '${project.width}px',
+        height: '${project.height}px',
+        overflow: "hidden",
+        // border: "1px solid #f0f0f0",
+        boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)",
+        transform: \`scale(\${scale}) translate(-50%, -50%)\`,
+        transformOrigin: "0 0",
+        ...pageBackground,
+      });
+
+
+      // 计算页面样式
+      const getWapperStyle = () => {
+        const { background } = ${JSON.stringify(project.pages[0].background)};
+        const pageBackground =
+          background.type === "color"
+            ? { background: background.color }
+            : {
+                background: \`url(\${background.image}) no-repeat center center\`,
+                backgroundSize: background.fillType,
+              };
+        const { width, height } = ${JSON.stringify({width: project.width, height: project.height})}};
+        const { clientWidth, clientHeight } = document.documentElement;
+
+        let scale: string | number = 1;
+        switch (projectInfo.fillType) {
+          case 1:
+            scale = clientHeight / height;
+            break;
+          case 2:
+            scale = clientWidth / width;
+            break;
+          case 3:
+            const scaleX = clientWidth / width;
+            const scaleY = clientHeight / height;
+            scale = \`\${scaleX},\${scaleY}\`;
+            break;
+          default:
+            scale = Math.min(clientWidth / width, clientHeight / height);
+        }
+
+        bodyStyle.value = {
+          background: '#000',
+        } as unknown as StyleValue;
+        pageWapperStyle.value = {
+          position: 'absolute',
+          left: '50%',
+          top: '50%',
+          width: \`\${width}px\`,
+          height: \`\${height}px\`,
+          overflow: "hidden",
+          // border: "1px solid #f0f0f0",
+          boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)",
+          transform: \`scale(\$\{scale}) translate(-50%, -50%)\`,
+          transformOrigin: "0 0",
+          ...pageBackground,
+        };
+      };
+
+      // 窗口变化重新计算页面样式
+      window.addEventListener("resize", getWapperStyle);
+    }
+  `
+};

apps/shalu-bigscreen-designer/src/utils/build/index.ts

@@ -0,0 +1,2 @@
+export * from './buildHtml';
+export * from './buildJs';

apps/shalu-bigscreen-designer/src/views/designer/component/ComponentWrapper.vue

@@ -48,8 +48,7 @@ import { useProjectStore } from "@/store/modules/project";
 import { useDraggable } from "@vueuse/core";
 import { UseDraggable } from "@vueuse/components";
 import { useAcionStore } from "@/store/modules/action";
-import { asyncComponentAll } from "@shalu/dashboard-ui";
-import Container from "@/components/Container/index.vue";
+import { asyncComponentAll, Container } from "@shalu/dashboard-ui";
 import { scaleAction } from "@/utils/scale";
 import { useAdsorb } from "@/hooks";
 

apps/shalu-bigscreen-designer/src/views/view/component/RenderComponent.vue

@@ -9,8 +9,7 @@
 <script setup lang="ts">
 import type { CustomElement } from '#/project';
 import { defineProps, ref, defineAsyncComponent } from 'vue';
-import { asyncComponentAll } from '@shalu/dashboard-ui';
-import Container from '@/components/Container/index.vue';
+import { asyncComponentAll, Container } from '@shalu/dashboard-ui';
 
 const props = defineProps<{
   element: CustomElement;

packages/service/http/index.ts

@@ -2,7 +2,7 @@ import { message } from 'ant-design-vue';
 import HttpService from './axios';
 import { AxiosRequestConfig } from 'axios';
 
-const baseURL = import.meta.env.VITE_APP_BASE_URL as string;
+const baseURL = (import.meta as ImportMeta & { env: any}).env.VITE_APP_BASE_URL as string;
 
 type ResponseResult<T> = {
   code: number;
@@ -11,7 +11,7 @@ type ResponseResult<T> = {
   result: T;
   error?: string;
 }
-const transformResponse = <T>(response: ResponseResult<T>, config: AxiosRequestConfig) => {
+const transformResponse = <T>(response: any & ResponseResult<T>, config: AxiosRequestConfig) => {
   if (config.responseType === 'blob') {
     return response;
   }

packages/shalu-dashboard-ui/components/charts/hooks/useChartOptions.ts

@@ -81,10 +81,19 @@ export const useChartOptions = (chartProps: Record<string, any>) => {
         }
         series.value = seriesData;
       }
-      // 视图或基础数据源
+      // 根据视图或基础数据源获取数据
       if([DataSourceType.BASIC_PATH, DataSourceType.VIEW_CODE].includes(chartProps.dataSource.sourceType)) {
-        window?.mabp && window.mabp.$doLoadComponentData(obj).then(function (res) {
-          itemList.value = res.data;
+        const dataSource = chartProps.dataSource || {};
+        const obj = {
+          viewCode: dataSource.viewCode,
+          basicPath: dataSource.basicPath,
+          items: '',
+          filter: '',
+          key: '',
+          isOne: '',
+        };
+        (window as Window & typeof globalThis & {mabp: any}).mabp.$doLoadComponentData(obj).then(function (res: any) {
+          series.value = res.data;
         });
       }
     },

packages/shalu-dashboard-ui/components/components.ts

@@ -3,11 +3,15 @@ export const asyncComponentAll = {
   BasicLine: () => import('./charts/Line/BasicLine'),
   BasicBar: () => import('./charts/Bar/BasicBar'),
   BasicPie: () => import('./charts/Pie/BasicPie'),
+  Container: () => import('./container'),
 }
 
 export { DataSourceType } from './charts/chartEnum';
 export type { DataSource, ChartData } from './charts/types';
 
+/* 容器 */
+import { default as Container } from './container';
+
 /* 标题 */
 import { default as Title } from './text/Title'; 
 
@@ -42,12 +46,14 @@ export const components = {
   BasicLine,
   BasicBar,
   Title,
-  BasicPie
+  BasicPie,
+  Container
 }
 
 export {
   BasicLine,
   BasicBar,
   Title,
-  BasicPie
+  BasicPie,
+  Container
 }

packages/shalu-dashboard-ui/components/container/index.ts

@@ -0,0 +1,9 @@
+import Container from './src/index.vue';
+
+/* istanbul ignore next */
+Container.install = (app: any) => {
+  app.component(Container.name, Container);
+  return app;
+};
+export default Container;
+export { Container };

apps/shalu-bigscreen-designer/src/components/Container/index.vue

@@ -9,11 +9,11 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
-import { transformStyle } from "@/utils/style";
+import { transformStyle } from "@shalu/utils";
 import { pick } from "lodash";
 
 export default defineComponent({
-  name: "Container",
+  name: "DContainer",
   props: {
     style: Object as PropType<Record<string, any>>,
     props: Object as PropType<Record<string, any>>,
@@ -69,7 +69,7 @@ export default defineComponent({
       getContentStyle,
       getBackgroundStyle,
       getContainetStyle,
-    };
+    } as any;
   },
 });
 </script>

packages/utils/getDataOrigin.tsx

@@ -1,10 +1,8 @@
 import { ref, createApp } from "vue";
-import { ElButton, ElDialog, ElInput, ElTree, ElMessage } from "element-plus";
+import { ElButton, ElDialog, ElInput, ElTree } from "element-plus";
 import {
   GetAllTablesAndViews,
   GetAllBasicData,
-  GetTableViewColumns,
-  GetTableViewFieldKey,
 } from "@shalu/service";
 
 import type Node from "element-plus/es/components/tree/src/model/node";
@@ -35,7 +33,6 @@ type BisicData = {
  */
 export const getDataOrigin = (
   type: "table" | "view",
-  datatype = ''
 ): Promise<{ value: string; result?: any }> => {
   const data = ref();
   const loading = ref(false);
@@ -97,7 +94,7 @@ export const getDataOrigin = (
         lazy={true}
         load={onload}
         props={{
-          label: (data: BisicData) =>
+          label: (data: any) =>
             data.path ? `${data.path}(${data.name})` : data.name,
           children: "children",
         }}
@@ -106,7 +103,7 @@ export const getDataOrigin = (
             val.value = node.path;
           }
         }}
-        filterNodeMethod={(value: string, data: BisicData) => {
+        filterNodeMethod={(value: string, data: any) => {
           // treeRef.value?.onload();
           return (
             data.path?.toUpperCase().includes(value.toUpperCase()) ||
@@ -146,75 +143,6 @@ export const getDataOrigin = (
             style={{ height: "600px" }}
             v-slots={{
               footer: () => (
-                <>
-                  {type === "view" &&
-                  ["fm-search-table", "fm-subform"].includes(datatype) ? (
-                    <ElButton
-                      disabled={!val.value}
-                      type="primary"
-                      onClick={async () => {
-                        if (valId.value) {
-                          try {
-                            const tableViewResult =
-                              await GetTableViewColumns({
-                                currentPage: 1,
-                                pageSize: 2147483647,
-                                orderByProperty: "DisplayOrder",
-                                Ascending: true,
-                                totalPage: 1,
-                                totalCount: 1,
-                                filters: [
-                                  { name: "filterText" },
-                                  { name: "tableId", value: valId.value },
-                                ],
-                              });
-                            if (tableViewResult.model) {
-                              tableViewResult.model =
-                                tableViewResult.model.filter(
-                                  (item) => item.isDisplayEnable
-                                );
-                              const promises = tableViewResult.model.map(
-                                async (item) => {
-                                  if (!item.langName) {
-                                    return {
-                                      ...item,
-                                      enName: "",
-                                    };
-                                  } else {
-                                    const keyResult =
-                                      await GetTableViewFieldKey(
-                                        { key: item.langName },
-                                        token
-                                      );
-                                    return {
-                                      ...item,
-                                      enName: keyResult.en,
-                                    };
-                                  }
-                                }
-                              );
-                              tableViewResult.model = await Promise.all(
-                                promises
-                              );
-                            }
-
-                            resolve({
-                              value: val.value,
-                              result: tableViewResult,
-                            });
-                            document.body.removeChild(mountNode);
-                          } catch (error) {
-                            ElMessage.error("未知错误！");
-                          }
-                        }
-                      }}
-                    >
-                      确定并生成表列
-                    </ElButton>
-                  ) : (
-                    ""
-                  )}
-
                   <ElButton
                     type="primary"
                     disabled={!val.value}
@@ -225,7 +153,6 @@ export const getDataOrigin = (
                   >
                     确定
                   </ElButton>
-                </>
               ),
             }}
             onClose={() => {