publish cloud

src/styles/app.css

@@ -119,7 +119,7 @@ a.hover {
 }
 
 a.hover:hover {
-  color: var(--color-primary-hover);
+  color: var(--color-primary-hover) !important;
 }
 
 .button {
@@ -306,6 +306,10 @@ a.hover:hover {
   margin-top: 16px;
 }
 
+.mr-16 {
+  margin-right: 16px;
+}
+
 .mb-16 {
   margin-bottom: 16px;
 }

src/styles/tdesign.css

@@ -15,7 +15,7 @@
   }
 
   &.t-is-error {
-    box-shadow: none;
+    box-shadow: none !important;
     border-color: var(--color-error) !important;
   }
 

src/views/components/PensProps.vue

@@ -42,7 +42,7 @@
                 content="禁止所有事件"
                 placement="top"
               >
-                <svg class="l-icon" aria-hidden="true" @click="lock(node, 0)">
+                <svg class="l-icon" aria-hidden="true" @click="lock(0)">
                   <use xlink:href="#l-jinyong"></use>
                 </svg>
               </t-tooltip>
@@ -859,7 +859,7 @@ const lock = (v: LockState) => {
 const visible = (v: boolean) => {
   data.visible = v;
   for (const item of selections.pens) {
-    meta2d.setVisible(item, v);
+    meta2d.setVisible(item as any, v);
   }
 };
 
@@ -888,6 +888,10 @@ const onFontFamily = (fontFamily: string) => {
 const onFontPopupVisible = (val: boolean) => {
   data.fontFamilyPopupVisible = val;
 };
+
+const decimalRound = (val: number) => {
+  return Math.round(+val || 0);
+};
 </script>
 <style lang="postcss" scoped>
 .props {

src/views/components/View.vue

@@ -226,8 +226,8 @@
           <t-icon name="share" :class="{ primary: shared }" />
         </a>
       </t-tooltip>
-      <t-popup placement="bottom" trigger="click" v-model="qrcode.visible">
-        <a @mouseenter="qrcode.visible = true"><t-icon name="qrcode" /></a>
+      <t-popup placement="bottom" v-model="qrcode.visible">
+        <a><t-icon name="qrcode" /></a>
         <template #content>
           <div style="padding: 12px 12px 6px 12px">
             <img :src="qrcode.url" />
@@ -236,7 +236,7 @@
       </t-popup>
 
       <t-tooltip content="发布" placement="bottom">
-        <a><t-icon name="cloud" /></a>
+        <a @click="onPublish"><t-icon name="cloud" /></a>
       </t-tooltip>
     </div>
     <div id="meta2d"></div>
@@ -418,6 +418,122 @@
         </div>
       </template>
     </t-dialog>
+
+    <t-dialog
+      v-if="publishDialog.show"
+      width="800px"
+      header="发布"
+      :visible="true"
+      :cancel-btn="null"
+      :confirm-btn="'完成'"
+      @close="publishDialog.show = false"
+    >
+      <div class="body">
+        <div class="form-item mt-8">
+          <label>项目名称</label>
+          <div class="flex middle">
+            <t-icon name="laptop" class="mr-8" /> {{ publishDialog.name }}
+          </div>
+        </div>
+        <template v-if="publishDialog.data">
+          <div class="form-item mt-8">
+            <label>发布状态</label>
+            <div v-if="publishDialog.data.id" class="flex middle">
+              <div v-if="publishDialog.data.isExpired"></div>
+              <div v-else></div>
+              {{ publishDialog.data.expired }}
+            </div>
+            <div v-else class="flex middle">
+              <t-icon name="play-circle" class="mr-8" />
+              未发布
+            </div>
+          </div>
+          <div class="form-item mt-12">
+            <label>乐吾乐域名</label>
+            <div class="flex w-full">
+              <t-input
+                v-model="publishDialog.data.subDomain"
+                :maxlength="16"
+                :status="publishDialog.status"
+                :tips="publishDialog.tips"
+                class="mr-4"
+                style="width: fit-content"
+                placeholder="子域名"
+              />
+              <t-tooltip content="随机生成">
+                <t-icon
+                  name="refresh"
+                  class="mr-8 hover"
+                  @click="refreshSubdomain"
+                />
+              </t-tooltip>
+              <div class="mt-4">v.le5le.com</div>
+            </div>
+          </div>
+          <div class="form-item mt-16">
+            <label>访问域名</label>
+            <div class="w-full">
+              <div class="flex middle">
+                <t-input
+                  v-model="publishDialog.data.domain"
+                  style="width: 350px"
+                  placeholder="支持自定义域名"
+                />
+
+                <template v-if="publishDialog.data.domain">
+                  <a
+                    :href="`http://${publishDialog.data.domain}`"
+                    target="_blank"
+                    class="hover"
+                    style="margin-left: 36px; text-decoration: underline"
+                  >
+                    点击访问
+                  </a>
+
+                  <t-popup
+                    placement="bottom"
+                    v-model="publishDialog.qrcodeVisible"
+                  >
+                    <a class="hover" style="margin-left: 32px">
+                      <t-icon name="qrcode" />
+                      <span
+                        style="margin-left: 2px; position: relative; top: 1px"
+                      >
+                        手机访问
+                      </span>
+                    </a>
+                    <template #content>
+                      <div style="padding: 12px 12px 6px 12px">
+                        <img :src="qrcode.url" />
+                      </div>
+                    </template>
+                  </t-popup>
+                </template>
+              </div>
+              <div class="desc mt-12">
+                <div class="title desc">- 注意</div>
+                <div>仅支持48小时免费试用，到期后需要续费使用。</div>
+              </div>
+              <div class="desc mt-8">
+                <div class="title desc">- 自定义域名</div>
+                <div>
+                  在域名服务商的DNS控制台设置好对应的CNAME，值为乐吾乐域名。
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="form-item mt-16">
+            <label></label>
+            <div class="w-full">
+              <t-button>发布</t-button>
+            </div>
+          </div>
+        </template>
+        <div v-else class="flex center" style="margin-top: 32px">
+          <t-loading text="加载中..." size="small"></t-loading>
+        </div>
+      </div>
+    </t-dialog>
   </div>
 </template>
 
@@ -435,6 +551,7 @@ import {
 import localforage from 'localforage';
 import dayjs from 'dayjs';
 import QRCode from 'qrcode';
+import axios from 'axios';
 
 import { registerBasicDiagram } from '@/services/register';
 import { useUser } from '@/services/user';
@@ -452,6 +569,7 @@ import { defaultFormat } from '@/services/defaults';
 import { checkData, localStorageName, Meta2dBackData } from '@/services/utils';
 import { debounce } from '@/services/debouce';
 import { importExcel } from '@/services/excel';
+import { s8 } from '@/services/random';
 
 import ContextMenu from './ContextMenu.vue';
 import Network from './Network.vue';
@@ -484,6 +602,8 @@ const qrcode = reactive({
   url: '',
 });
 
+const publishDialog = reactive<any>({});
+
 onMounted(() => {
   meta2d = new Meta2d('meta2d', meta2dOptions);
   registerBasicDiagram();
@@ -924,14 +1044,6 @@ const onShowDataDialog = () => {
   getNetworks();
 };
 
-const onOkData = () => {
-  // @ts-ignore
-  meta2d.store.data.networks = dataDialog.networks;
-  // @ts-ignore
-  meta2d.store.data.dataset = dataDialog.dataset;
-  dataDialog.show = false;
-};
-
 const onSelectNetWork = (item: any) => {
   dataDialog.networks.push(item);
   dataDialog.popupVisible = false;
@@ -1042,6 +1154,70 @@ const share = async () => {
     shared.value = ret.shared;
   }
 };
+
+let qrTimer: any;
+const onEnterQrcode = () => {
+  if (!qrcode.visible && !qrTimer) {
+    qrTimer = setTimeout(() => {
+      qrTimer = undefined;
+      qrcode.visible = true;
+    }, 300);
+  }
+};
+
+const onLeaveQrcode = () => {
+  if (qrTimer) {
+    clearTimeout(qrTimer);
+    qrTimer = undefined;
+  }
+};
+
+const onPublish = async () => {
+  // @ts-ignore
+  publishDialog.name = meta2d.store.data.name;
+  publishDialog.status = '';
+  publishDialog.tips = '';
+  publishDialog.show = true;
+
+  const ret: any = await axios.post(`/api/domain/get`, { id: route.query.id });
+  if (ret) {
+    if (ret.expired) {
+      const expired = new Date(ret.expired);
+      if (expired > new Date()) {
+        ret.isExpired = false;
+      } else if (expired > new Date('2023-01-17T08:00:00+08:00')) {
+        ret.isExpired = true;
+      } else {
+        ret.expired = undefined;
+      }
+      if (ret.expired) {
+        ret.expired = dayjs(ret.expired).format('YYYY-MM-DD HH:mm:ss');
+      }
+    }
+    publishDialog.data = ret;
+  }
+};
+
+const refreshSubdomain = async () => {
+  publishDialog.data.subDomain = s8();
+  if (
+    !publishDialog.data.domain ||
+    publishDialog.data.domain.indexOf('.v.le5le.com') > 0
+  ) {
+    publishDialog.data.domain = publishDialog.data.subDomain + '.v.le5le.com';
+  }
+
+  const ret: any = await axios.post(`/api/domain/exists`, {
+    subDomain: publishDialog.data.subDomain,
+  });
+  if (ret && ret.id) {
+    publishDialog.status = 'error';
+    publishDialog.tips = '已经存在相同子域名';
+  } else {
+    publishDialog.status = '';
+    publishDialog.tips = '';
+  }
+};
 </script>
 <style lang="postcss" scoped>
 .meta2d {