Merge branch 'main' of https://github.com/le5le-com/visualization-design

.env.base

@@ -1,5 +0,0 @@
-BASE_URL=/v/
-VITE_ROUTER_BASE=/v/
-VITE_BASEURL=1
-VITE_TRIAL=0
-THREED_BASE_URL=/3d/

.env.trial

@@ -1,4 +1 @@
-BASE_URL=/v/
-VITE_ROUTER_BASE=/v/
-VITE_BASEURL=1
 VITE_TRIAL=1

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "start": "vite --host --open --port 80",
     "prod": "vue-tsc --noEmit && vite build --base=https://assets.le5lecdn.com/v/",
-    "build": "vue-tsc --noEmit && vite build --mode base --base=/v/",
+    "build": "vue-tsc --noEmit && vite build --base=/v/",
     "trial": "vue-tsc --noEmit && vite build --mode trial --base=/v/",
     "preview": "vite preview"
   },

src/global.d.ts

@@ -5,7 +5,7 @@ declare global {
   var C2S: any;
   var folderJson: any;
   var fileJson: any;
-  // var Meta3D: any;
+  var url3D: string;
 }
 
 declare interface Window {

src/router/index.ts

@@ -1,12 +1,16 @@
-import { createRouter, createWebHistory } from "vue-router";
+import { createRouter, createWebHistory } from 'vue-router';
 
 const routes = [
-  { path: "/", component: () => import("@/views/Index.vue") },
-  { path: "/preview", component: () => import("@/views/Preview.vue") },
+  { path: '/', component: () => import('@/views/Index.vue') },
+  { path: '/preview', component: () => import('@/views/Preview.vue') },
 ];
 
+console.log(import.meta.env.BASE_URL, import.meta.env);
+
 const router = createRouter({
-  history: createWebHistory(import.meta.env.VITE_ROUTER_BASE),
+  history: createWebHistory(
+    import.meta.env.BASE_URL[0] === '/' ? import.meta.env.BASE_URL : '/'
+  ),
   routes,
 });
 

src/services/api.ts

@@ -1,12 +1,11 @@
 //所有的接口请求
 import axios from 'axios';
-export const cdn = import.meta.env.VITE_ROUTER_BASE
-  ? ''
-  : 'https://assets.le5lecdn.com';
 
-export const upCdn = import.meta.env.VITE_ROUTER_BASE
-  ? ''
-  : 'https://drive.le5lecdn.com';
+const isProd =
+  import.meta.env.BASE_URL.indexOf('https://assets.le5lecdn.com') === 0;
+
+export const cdn = isProd ? 'https://assets.le5lecdn.com' : '';
+export const upCdn = isProd ? 'https://drive.le5lecdn.com' : '';
 
 export async function delImage(image: string) {
   if (image.startsWith(upCdn)) {

src/services/common.ts

@@ -50,10 +50,7 @@ const assets = reactive({
 export const useAssets = () => {
   const getAssets = async () => {
     // 官网或安装包版本
-    if (
-      import.meta.env.VITE_TRIAL == undefined ||
-      import.meta.env.VITE_TRIAL == 1
-    ) {
+    if (import.meta.env.VITE_TRIAL != 1) {
       return;
     }
 

src/services/defaults.ts

@@ -932,6 +932,16 @@ export const formComponents = [
           height: 30,
           name: 'text',
           text: '乐吾乐le5le - 大屏可视化',
+          textAutoAdjust: true,
+          props: {
+            custom: [
+              {
+                key: 'textAutoAdjust',
+                label: '文本自动大小',
+                type: 'bool',
+              },
+            ],
+          },
         },
       },
       {
@@ -1180,9 +1190,9 @@ export const formComponents = [
           width: 300,
           height: 40,
           text: '倒计时',
-          calculativeTime: '2023/9/23 00:00:00', //配置未来的时间
+          deadline: '2024/1/1 00:00:00', //配置未来的时间
           timeFormat:
-            '`距离杭州亚运会还有：${day}天${hours}时${minutes}分${seconds}秒`',
+            '`距离2024年还有：${day}天${hours}时${minutes}分${seconds}秒`',
           props: {
             custom: [
               {
@@ -1191,8 +1201,8 @@ export const formComponents = [
                 type: 'string',
               },
               {
-                key: 'calculativeTime',
-                label: '参考时间',
+                key: 'deadline',
+                label: '截止时间',
                 type: 'string',
               },
             ],
@@ -1338,13 +1348,34 @@ export const formComponents = [
         },
       },
       {
-        name: '日历',
+        name: '日历(日期)',
         icon: 'l-rili',
         data: {
-          width: 200,
-          height: 200,
+          width: 280,
+          height: 326,
+          hiddenText: true,
+          name: 'calendar',
+          background: '#fff0',
+          hoverTextColor: '#fff',
+          dbInput:true,
+          // input: true,
+          text:'8月'
+        },
+      },
+      {
+        name: '日历（日期时间）',
+        icon: 'l-rili',
+        data: {
+          width: 496,
+          height: 326,
           hiddenText: true,
           name: 'calendar',
+          background: '#fff0',
+          hoverTextColor: '#fff',
+          dbInput:true,
+          // input: true,
+          text: '8月',
+          calendarType:'time'
         },
       },
     ],

src/services/echarts.ts

@@ -5280,6 +5280,59 @@ export const charts = [
           color: '#C0911F',
         },
       },
+      {
+        name: '3d-饼图',
+        icon: 'l-pie-chart',
+        data: {
+          name: 'pie3D',
+          width: 400,
+          disableAnchor: true,
+          height: 200,
+          data: [
+            { value: 335, name: '2D' },
+            { value: 310, name: '3D' },
+            { value: 234, name: '大屏' },
+            { value: 135, name: '物联网平台' },
+            { value: 1548, name: '图形库' },
+          ],realTimes: [
+            {
+              key: 'data.0.value',
+              label: '2D',
+              type: 'float',
+              enableMock: true,
+              mock: '10-100',
+            },
+            {
+              key: 'data.1.value',
+              label: '3D',
+              type: 'float',
+              enableMock: true,
+              mock: '10-100',
+            },
+            {
+              key: 'data.2.value',
+              label: '大屏',
+              type: 'float',
+              enableMock: true,
+              mock: '10-100',
+            },
+            {
+              key: 'data.3.value',
+              label: '物联网平台',
+              type: 'float',
+              enableMock: true,
+              mock: '10-100',
+            },
+            {
+              key: 'data.4.value',
+              label: '图形库',
+              type: 'float',
+              enableMock: true,
+              mock: '10-100',
+            }
+          ]
+        }
+      }
     ],
   },
 ];

src/services/register.ts

@@ -12,6 +12,8 @@ import { chartsPens } from '@meta2d/le5le-charts';
 import { ftaPens, ftaPensbyCtx, ftaAnchors } from '@meta2d/fta-diagram';
 import { iotCanvasPens, iotPens } from '@2d-components/iot';
 import { domFormPens, domFormCanvasPens } from '@2d-components/domForm';
+import { threeDPens } from '@2d-components/3d';
+
 
 export function registerBasicDiagram() {
   register(flowPens());
@@ -32,4 +34,5 @@ export function registerBasicDiagram() {
   registerCanvasDraw(iotCanvasPens());
   register(domFormPens());
   registerCanvasDraw(domFormCanvasPens());
+  registerCanvasDraw(threeDPens());
 }

src/services/user.ts

@@ -96,8 +96,7 @@ export const useUser = () => {
     data.created = dayjs(data.createdAt).format('YYYY-MM-DD HH:mm:ss');
 
     if (data.token) {
-      let baseUrl = import.meta.env.BASE_URL;
-      if (baseUrl && baseUrl !== '/') {
+      if (import.meta.env.BASE_URL[0] === '/') {
         localStorage.setItem('token', data.token);
       } else {
         setCookie('token', data.token, {
@@ -127,7 +126,7 @@ export const useUser = () => {
 
   const getRootDomain = () => {
     let domain = '';
-    const domainItems = document.domain.split('.');
+    const domainItems = location.hostname.split('.');
     if (
       domainItems.length < 3 ||
       (domainItems.length === 4 &&
@@ -136,10 +135,10 @@ export const useUser = () => {
         +domainItems[2] > 0 &&
         +domainItems[3] > 0)
     ) {
-      domain = '';
+      domain = location.hostname;
     } else if (
-      document.domain.endsWith('.com.cn') ||
-      document.domain.endsWith('.org.cn')
+      location.hostname.endsWith('.com.cn') ||
+      location.hostname.endsWith('.org.cn')
     ) {
       domain = domainItems.slice(-3).join('.');
     } else {

src/services/utils.ts

@@ -1,7 +1,6 @@
 import { Pen, Meta2dData } from '@meta2d/core';
 import { MessagePlugin, NotifyPlugin, Button } from 'tdesign-vue-next';
 import { h, ref } from 'vue';
-const market = import.meta.env.VITE_BASEURL;
 
 export const noLoginTip = '请先登录，否则无法保存!';
 export const localStorageName = 'le5leV';
@@ -111,7 +110,7 @@ export function gotoAccount() {
     duration: 3,
   });
   setTimeout(() => {
-    if (market) {
+    if (import.meta.env.BASE_URL[0] === '/') {
       window.open('/account?unVip=true');
     } else {
       let arr = location.host.split('.');

src/views/Preview.vue

@@ -60,7 +60,18 @@ const open = async () => {
 };
 
 const opened = () => {
-  meta2d.fitSizeView(true, 10);
+  let fit: any =
+    (meta2d.store.data as any).scaleMode === '3'
+      ? 'height'
+      : (meta2d.store.data as any).scaleMode === '2'
+      ? 'width'
+      : true;
+  meta2d.fitSizeView(fit, 10);
+  if ((meta2d.store.data as any).scroll) {
+    meta2d.setOptions({
+      scroll: true,
+    });
+  }
 };
 
 onUnmounted(() => {

src/views/components/ElementTree.vue

@@ -120,6 +120,12 @@
             @blur="setGroup"
             @enter="setGroup"
           />
+          <t-icon
+            v-if="!data.hiddenGroups.includes(item)"
+            name="browse"
+            @click="visibleGroup(item, false)"
+          />
+          <t-icon v-else name="browse-off" @click="visibleGroup(item, true)" />
           <t-popconfirm
             content="确认删除该分组吗？"
             @confirm="delGroup"
@@ -150,6 +156,7 @@ const data = reactive<any>({
   tree: [],
   actived: [],
   groups: [],
+  hiddenGroups: [],
 });
 
 onBeforeMount(() => {
@@ -176,12 +183,26 @@ onBeforeMount(() => {
     d.groups = [];
   }
   data.groups = d.groups;
+  getHiddenGroups();
 });
 
 const getTree = () => {
   data.tree = getPenTree();
 };
 
+const getHiddenGroups = () => {
+  data.groups.forEach((item) => {
+    if (
+      meta2d.store.data.pens.some(
+        (pen) =>
+          !pen.parentId && pen.tags.includes(item) && pen.visible === false
+      )
+    ) {
+      data.hiddenGroups.push(item);
+    }
+  });
+};
+
 const getActived = () => {
   data.actived = [];
   if (meta2d.store.active) {
@@ -263,6 +284,27 @@ const visible = (node: any, v: boolean) => {
   pen && meta2d.setVisible(pen, v);
 };
 
+const visibleGroup = (item, v: boolean) => {
+  if (v) {
+    let index = data.hiddenGroups.indexOf(item);
+    if (index !== -1) {
+      data.hiddenGroups.splice(index, 1);
+    }
+  } else {
+    data.hiddenGroups.push(item);
+  }
+  let pens = meta2d.store.data.pens.filter(
+    (pen) => !pen.parentId && pen.tags.includes(item)
+  );
+  pens.forEach((pen) => {
+    meta2d.setValue(
+      { id: pen.id, visible: v },
+      { render: false, doEvent: false }
+    );
+  });
+  meta2d.render();
+};
+
 const onDescription = (node: any) => {
   node.data.edited = false;
   node.setData({ label: node.data.label });

src/views/components/FileProps.vue

@@ -87,7 +87,11 @@
               <t-space direction="vertical" size="small">
                 <div class="form-item">
                   <label>缩放方式</label>
-                  <t-radio-group class="ml-8" default-value="1">
+                  <t-radio-group
+                    class="ml-8"
+                    v-model="data.meta2dData.scaleMode"
+                    @change="changeValue($event, 'scaleMode')"
+                  >
                     <t-radio
                       value="1"
                       title="宽高中较小的铺满"
@@ -107,9 +111,13 @@
                 </div>
                 <div class="form-item">
                   <label>显示滚动条</label>
-                  <t-checkbox v-model="data.scroll" class="ml-8" />
+                  <t-checkbox
+                    v-model="data.meta2dData.scroll"
+                    @change="changeValue($event, 'scroll')"
+                    class="ml-8"
+                  />
                 </div>
-                <template v-if="data.scroll">
+                <!-- <template v-if="data.scroll">
                   <div class="form-item">
                     <label>水平对齐</label>
                     <t-radio-group class="ml-8" default-value="2">
@@ -126,7 +134,7 @@
                       <t-radio value="3" style="width: 200px">底部对齐</t-radio>
                     </t-radio-group>
                   </div>
-                </template>
+                </template> -->
               </t-space>
             </t-collapse-panel>
             <t-collapse-panel value="2" header="进阶设置">
@@ -244,6 +252,7 @@ import ElementTree from './ElementTree.vue';
 import CodeEditor from '@/views/components/common/CodeEditor.vue';
 import { autoSave, inTreePanel, useAssets } from '@/services/common';
 import { MessagePlugin } from 'tdesign-vue-next';
+import { loadCss } from '@meta2d/core';
 
 const headers = {
   Authorization: 'Bearer ' + (localStorage.token || getCookie('token') || ''),
@@ -328,10 +337,12 @@ const selectedSreen = (item: any) => {
 };
 
 const fileSuccessed = async (content: any) => {
-  meta2d.store.patchFlagsBackground = true;
+  // meta2d.store.patchFlagsBackground = true;
   meta2d.setBackgroundImage(content.response.url);
-  meta2d.store.patchFlagsBackground = true;
-  meta2d.render();
+  setTimeout(() => {
+    meta2d.store.patchFlagsBackground = true;
+    meta2d.render();
+  }, 1000);
 };
 
 const fileRemoved = () => {
@@ -344,6 +355,9 @@ const fileRemoved = () => {
 const changeValue = (e: any, key: string) => {
   // @ts-ignore
   meta2d.store.data[key] = e;
+  if (key === 'background') {
+    meta2d.store.patchFlagsBackground = true;
+  }
   meta2d.render();
   openData();
 };
@@ -361,6 +375,10 @@ onUnmounted(() => {
 });
 
 function openData() {
+  if (!(meta2d.store.data as any).scaleMode) {
+    (meta2d.store.data as any).scaleMode = '1';
+  }
+
   data.meta2dData = Object.assign({}, meta2d.store.data);
   if (meta2d.store.data.bkImage) {
     data.background = [
@@ -403,6 +421,11 @@ const addIconUrl = () => {
   data.meta2dData.iconUrls.push(data.iconUrl);
   // @ts-ignore
   meta2d.store.data.iconUrls = data.meta2dData.iconUrls;
+  if (meta2d.store.data.iconUrls) {
+    for (const item of meta2d.store.data.iconUrls) {
+      loadCss(item);
+    }
+  }
   data.iconUrl = '';
   autoSave(true);
 };

src/views/components/Graphics.vue

@@ -809,8 +809,8 @@ const onMenu = async (val: string) => {
         });
       } else {
         let url = 'https://3d.le5le.com/?id=';
-        if (import.meta.env.VITE_TRIAL == 0 && (window as any).url3D) {
-          url = (window as any).url3D;
+        if (window.url3D) {
+          url = window.url3D;
         }
         window.open(url + id, '_blank');
       }
@@ -1054,7 +1054,7 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   background-color: var(--color-background);
-  z-index: 2;
+  z-index: 3;
   .input-search {
     flex-shrink: 0;
     height: 40px;

src/views/components/PenProps.vue

@@ -4,6 +4,15 @@
       <t-tab-panel :value="1" label="外观">
         <t-space direction="vertical" class="py-16 w-full">
           <div class="form-item px-12">
+            <label style="width: 50px">ID</label>
+            <t-input
+              class="w-full"
+              placeholder="ID"
+              :value="data.pen.id"
+              @change="changeID($event)"
+            />
+          </div>
+          <div class="form-item px-12" style="margin-top: -12px">
             <label style="width: 50px">名称</label>
             <t-input
               class="w-full"
@@ -143,7 +152,7 @@
           </div>
 
           <t-collapse
-            :defaultValue="['1', '2', '3', '4']"
+            :defaultValue="['1', '2', '3', '4', '5']"
             expandIconPlacement="right"
             :borderless="true"
           >
@@ -1174,6 +1183,23 @@ const changeValue = (prop: string) => {
   updatePen(data.pen, prop);
 };
 
+const changeID = (value: any) => {
+  if (!value) {
+    initPenData();
+    MessagePlugin.error('id 不能为空');
+    return;
+  }
+  const oldID: string = data.pen.id;
+  try {
+    meta2d.changePenId(oldID, value);
+    initPenData();
+  } catch (error) {
+    console.warn(error.message);
+    MessagePlugin.error('id 修改失败，请检查 id 是否重复');
+    return;
+  }
+};
+
 const changeRectValue = (prop: string) => {
   data.rect.id = data.pen.id;
   data.rect.ratio = data.pen.ratio;

src/views/components/common/Iconfonts.vue

@@ -1,7 +1,12 @@
 <template>
   <ul class="icons">
-    <li v-for="item in icons" :key="item.icon" class="icon">
-      <i :class="item.iconFamily" @click="onSelected(item)">
+    <li
+      v-for="item in icons"
+      :key="item.icon"
+      class="icon"
+      @click="onSelected(item)"
+    >
+      <i :class="item.iconFamily">
         {{ item.icon }}
       </i>
     </li>

vite.config.ts

@@ -42,6 +42,7 @@ export default defineConfig({
       '/image': 'https://v.le5le.com/',
       '/file': 'https://v.le5le.com/',
       '/api': 'https://v.le5le.com/',
+      '/v/material': 'https://assets.le5lecdn.com/',
     },
   },
 });