支持获取模板传入参数

src/components/SwipeInput.vue

@@ -33,7 +33,7 @@ const props = withDefaults(
   }>(),
   {
     modelEvent: 'change',
-    step: 1,
+    step: 0.01,
   },
 )
 

src/configs/background.ts

@@ -1,44 +1,44 @@
 export const TransparentFill = 'rgba(0,0,0,0)'
-export const MinSize = 30
-export const MaxSize = 800
+export const MinSize = 100
+export const MaxSize = 3000
 export const Padding = 50000
 
 export const DesignUnitMode = [
-  {id: 0, name: 'mm'}, 
-  {id: 1, name: 'px'}, 
+    {id: 0, name: 'mm'},
+    {id: 1, name: 'px'},
 ]
 
 export const DesignSizeMode = [
-  {id: 0, name: '名片', disabled: false}, 
-  {id: 1, name: '单页', disabled: false}, 
-  {id: 2, name: '自定义', disabled: true}
+    {id: 0, name: '名片', disabled: false},
+    {id: 1, name: '单页', disabled: false},
+    {id: 2, name: '自定义', disabled: true}
 ]
 
 export const BackgroundFillMode = [
-  {id: 0, name: '纯色填充'}, 
-  {id: 1, name: '图片填充'}, 
-  {id: 2, name: '渐变填充'},
-  {id: 3, name: '网格填充'},
-  {id: 4, name: '形状填充'},
-  {id: 5, name: '智能填充'},
+    {id: 0, name: '纯色填充'},
+    {id: 1, name: '图片填充'},
+    {id: 2, name: '渐变填充'},
+    {id: 3, name: '网格填充'},
+    // {id: 4, name: '形状填充'},
+    // {id: 5, name: '智能填充'},
 ]
 
 // 上传图片
 export const BackgroundFillImageMode = [
-  {id: 'contain', name: '缩放'}, 
-  {id: 'repeat', name: '拼贴'}, 
-  {id: 'cover', name: '铺满'},
+    {id: 'contain', name: '缩放'},
+    {id: 'repeat', name: '拼贴'},
+    {id: 'cover', name: '铺满'},
 ]
 
 // 渐变色
 export const BackgroundFillGradientMode = [
-  {id: 0, name: '线性渐变', value: 'linear'}, 
-  {id: 1, name: '径向渐变', value: 'radial'}, 
+    {id: 0, name: '线性渐变', value: 'linear'},
+    {id: 1, name: '径向渐变', value: 'radial'},
 ]
 
 // 网格图片
 export const BackgroundFillGridMode = [
-  {id: 0, name: '渐变', value: 'interpolateLinear'}, 
-  {id: 1, name: '闪烁', value: 'sparkle'}, 
-  {id: 2, name: '阴影', value: 'shadows'},
+    {id: 0, name: '渐变', value: 'interpolateLinear'},
+    {id: 1, name: '闪烁', value: 'sparkle'},
+    {id: 2, name: '阴影', value: 'shadows'},
 ]

src/store/modules/main.ts

@@ -7,8 +7,7 @@ import {getSupportFonts} from '@/utils/fonts'
 import {CanvasElement} from '@/types/canvas'
 import {RightStates, PointElement, ImageCategoryData} from '@/types/elements'
 import {ExportTypes, PoolType, SystemFont} from '@/types/common'
-import {getDesignFonts, getFontInfo} from '@/api/static/font'
-import {FontInfo} from '@/api/static/types'
+import {getDesignFonts} from '@/api/static/font'
 import useCanvas from '@/views/Canvas/useCanvas'
 
 export interface MainState {
@@ -38,6 +37,7 @@ export interface MainState {
     lastEdit: PoolType
     poolType: PoolType
     poolShow: boolean
+    runMode: number
 }
 
 const nanoid = customAlphabet('0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz')
@@ -71,6 +71,7 @@ export const useMainStore = defineStore('main', {
         lastHelp: 'editor', // 左边栏
         poolType: 'editor', // 左边栏
         poolShow: false, // 显示左边栏
+        runMode: 0 //运行方式, 0客户端展示/1模板编辑
     }),
 
     getters: {
@@ -228,5 +229,12 @@ export const useMainStore = defineStore('main', {
         // setSelectPanelState(show: boolean) {
         //   this.showSelectPanel = show
         // },
+
+        setRunMode(runMode: number) {
+            this.runMode = runMode
+        },
+        getRunMode() {
+            return this.runMode
+        }
     },
 })

src/store/modules/user.ts

@@ -3,11 +3,9 @@ import { customAlphabet } from 'nanoid'
 import { defineStore } from 'pinia'
 import { SYS_FONTS } from '@/configs/fonts'
 import { ImageCategoryInfo } from '@/configs/images'
-import { getSupportFonts } from '@/utils/fonts'
 import { CanvasElement } from '@/types/canvas'
 import { RightStates, PointElement, ImageCategoryData } from '@/types/elements'
 import { ExportTypes, PoolType, SystemFont } from '@/types/common'
-import { getFontInfo } from '@/api/static/font'
 import { FontInfo } from '@/api/static/types'
 import useCanvas from '@/views/Canvas/useCanvas'
 

src/store/modules/webSocket.ts

@@ -0,0 +1,63 @@
+// @ts-nocheck
+import {defineStore} from "pinia";
+
+import {store} from "@/store";
+
+let websock = null;
+let heartbeatTimer = null; // 心跳定时器
+// 开始心跳定时器
+function startHeartbeat() {
+    const data = {
+        restPing: {
+            ping: 'ping'
+        }
+    };
+    heartbeatTimer = setInterval(function () {
+        websock.send(JSON.stringify(data))
+    }, 30000)
+}
+
+// 停止心跳定时器
+function stopHeartbeat() {
+    clearInterval(heartbeatTimer)
+}
+
+export const webSocketStore = defineStore("webSocket", () => {
+    function initWebSocket(url) {
+        websock = new WebSocket(url)
+        websock.onopen = function () {
+            // console.log('WebSocket 已连接')
+            startHeartbeat()
+        }
+        websock.onmessage = function (msg) {
+            const msgData = msg.data
+            const msgContent = JSON.parse(msgData)
+            if (msgContent.message != 'PONG') {
+                //处理自定义消息
+            }
+        }
+        websock.onerror = function (e) { // 错误
+            console.log('ws错误!')
+            // console.log(e)
+        }
+        websock.onclose = function (e) { // 关闭
+            console.log('ws关闭！')
+            // 停止心跳定时器
+            stopHeartbeat()
+
+            setTimeout(function () {
+                console.log('WebSocket 尝试重新连接')
+                initWebSocket(url)
+            }, 3 * 1000)
+        }
+    }
+
+    return {
+        initWebSocket,
+    };
+});
+
+// 非setup
+export function webSocketStoreHook() {
+    return webSocketStore(store);
+}

src/views/Editor/CanvasCenter/index.vue

@@ -63,7 +63,7 @@ const getTemplateDetail = async (pk: number) => {
   }
   const params = {
     id: pk,
-    params: JSON.stringify(templateParams)
+    // params: JSON.stringify(templateParams)
   }
   const res = await getDesignTemplateEdit(params)
 
@@ -75,7 +75,7 @@ const getTemplateDetail = async (pk: number) => {
     } catch (e) {
       ElMessage({
         type: 'error',
-        message: '模板加载失败,请联系管理员修改bug了',
+        message: '模板加载失败,请联系系统管理员',
       })
     }
   }

src/views/Editor/CanvasRight/Backgrounds/ElementFill.vue

@@ -282,9 +282,9 @@ const shadingBackground = ref<ShadingBackground>(ShadingBackgroudInit);
 onMounted(async () => {
   const recentGridCache = localStorage.getItem(RECENT_GRIDS);
   if (recentGridCache) gridColorRecent.value = JSON.parse(recentGridCache);
-  const res = await getColorShading();
-  shadingColorLibs.value = res.data;
-  shadingColorLib.value = shadingColorLibs.value[0];
+  // const res = await getColorShading();
+  // shadingColorLibs.value = res.data;
+  // shadingColorLib.value = shadingColorLibs.value[0];
 });
 
 // 保存缓存最近添加的网格

src/views/Editor/CanvasRight/CanvasStylePanel/index.vue

@@ -65,115 +65,115 @@
             </template>
           </el-input>
         </el-col>
-        <el-col :span="2" class="fixed-ratio">
-          <el-tooltip
-              effect="dark"
-              placement="top"
-              :content="t('style.fillet')"
-              v-if="isRound"
-          >
-            <IconRound class="icon-btn" @click="changeWorkRound(false)"/>
-          </el-tooltip>
-          <el-tooltip
-              effect="dark"
-              placement="top"
-              :content="t('style.rightAngle')"
-              v-else
-          >
-            <IconRightAngle class="icon-btn" @click="changeWorkRound(true)"/>
-          </el-tooltip>
-        </el-col>
-        <el-col :span="11">
-          <el-input
-              v-model="safe"
-              @change="changeTemplateSafe"
-              oninput="value=value.replace(/[^\d]/g,'')"
-              :disabled="unitMode === 1"
-          >
-            <template #prepend>
-              <el-tooltip
-                  placement="top"
-                  :hide-after="0"
-                  :content="t('style.safetyLine')"
-              >
-                <IconShield/>
-              </el-tooltip>
-            </template>
-          </el-input>
-        </el-col>
-      </el-row>
-    </div>
-    <div class="mt-10">
-      <el-row>
-        <el-col :span="11">
-          <el-select v-model="unitMode" @change="changeUnitMode">
-            <template #prefix>
-              <el-tooltip
-                  placement="top"
-                  :hide-after="0"
-                  :content="t('style.unit')"
-              >
-                <IconRuler/>
-              </el-tooltip>
-            </template>
-            <el-option
-                v-for="item in DesignUnitMode"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-            ></el-option>
-          </el-select>
-        </el-col>
-        <el-col :span="2"></el-col>
-        <!--        <el-col :span="11">-->
-        <!--          <el-select v-model="sizeMode">-->
-        <!--            <template #prefix>-->
-        <!--              <el-tooltip-->
-        <!--                placement="top"-->
-        <!--                :hide-after="0"-->
-        <!--                :content="t('style.template')"-->
-        <!--              >-->
-        <!--                <IconIdCard />-->
-        <!--              </el-tooltip>-->
-        <!--            </template>-->
-        <!--            <el-option-->
-        <!--              v-for="item in DesignSizeMode"-->
-        <!--              :key="item.id"-->
-        <!--              :label="item.name"-->
-        <!--              :value="item.id"-->
-        <!--              :disabled="item.disabled"-->
-        <!--            ></el-option>-->
-        <!--          </el-select>-->
-        <!--        </el-col>-->
+<!--        <el-col :span="2" class="fixed-ratio">-->
+<!--          <el-tooltip-->
+<!--              effect="dark"-->
+<!--              placement="top"-->
+<!--              :content="t('style.fillet')"-->
+<!--              v-if="isRound"-->
+<!--          >-->
+<!--            <IconRound class="icon-btn" @click="changeWorkRound(false)"/>-->
+<!--          </el-tooltip>-->
+<!--          <el-tooltip-->
+<!--              effect="dark"-->
+<!--              placement="top"-->
+<!--              :content="t('style.rightAngle')"-->
+<!--              v-else-->
+<!--          >-->
+<!--            <IconRightAngle class="icon-btn" @click="changeWorkRound(true)"/>-->
+<!--          </el-tooltip>-->
+<!--        </el-col>-->
+<!--        <el-col :span="11">-->
+<!--          <el-input-->
+<!--              v-model="safe"-->
+<!--              @change="changeTemplateSafe"-->
+<!--              oninput="value=value.replace(/[^\d]/g,'')"-->
+<!--              :disabled="unitMode === 1"-->
+<!--          >-->
+<!--            <template #prepend>-->
+<!--              <el-tooltip-->
+<!--                  placement="top"-->
+<!--                  :hide-after="0"-->
+<!--                  :content="t('style.safetyLine')"-->
+<!--              >-->
+<!--                <IconShield/>-->
+<!--              </el-tooltip>-->
+<!--            </template>-->
+<!--          </el-input>-->
+<!--        </el-col>-->
       </el-row>
     </div>
+<!--    <div class="mt-10">-->
+<!--      <el-row>-->
+<!--        <el-col :span="11">-->
+<!--          <el-select v-model="unitMode" @change="changeUnitMode">-->
+<!--            <template #prefix>-->
+<!--              <el-tooltip-->
+<!--                  placement="top"-->
+<!--                  :hide-after="0"-->
+<!--                  :content="t('style.unit')"-->
+<!--              >-->
+<!--                <IconRuler/>-->
+<!--              </el-tooltip>-->
+<!--            </template>-->
+<!--            <el-option-->
+<!--                v-for="item in DesignUnitMode"-->
+<!--                :key="item.id"-->
+<!--                :label="item.name"-->
+<!--                :value="item.id"-->
+<!--            ></el-option>-->
+<!--          </el-select>-->
+<!--        </el-col>-->
+<!--        <el-col :span="2"></el-col>-->
+<!--        &lt;!&ndash;        <el-col :span="11">&ndash;&gt;-->
+<!--        &lt;!&ndash;          <el-select v-model="sizeMode">&ndash;&gt;-->
+<!--        &lt;!&ndash;            <template #prefix>&ndash;&gt;-->
+<!--        &lt;!&ndash;              <el-tooltip&ndash;&gt;-->
+<!--        &lt;!&ndash;                placement="top"&ndash;&gt;-->
+<!--        &lt;!&ndash;                :hide-after="0"&ndash;&gt;-->
+<!--        &lt;!&ndash;                :content="t('style.template')"&ndash;&gt;-->
+<!--        &lt;!&ndash;              >&ndash;&gt;-->
+<!--        &lt;!&ndash;                <IconIdCard />&ndash;&gt;-->
+<!--        &lt;!&ndash;              </el-tooltip>&ndash;&gt;-->
+<!--        &lt;!&ndash;            </template>&ndash;&gt;-->
+<!--        &lt;!&ndash;            <el-option&ndash;&gt;-->
+<!--        &lt;!&ndash;              v-for="item in DesignSizeMode"&ndash;&gt;-->
+<!--        &lt;!&ndash;              :key="item.id"&ndash;&gt;-->
+<!--        &lt;!&ndash;              :label="item.name"&ndash;&gt;-->
+<!--        &lt;!&ndash;              :value="item.id"&ndash;&gt;-->
+<!--        &lt;!&ndash;              :disabled="item.disabled"&ndash;&gt;-->
+<!--        &lt;!&ndash;            ></el-option>&ndash;&gt;-->
+<!--        &lt;!&ndash;          </el-select>&ndash;&gt;-->
+<!--        &lt;!&ndash;        </el-col>&ndash;&gt;-->
+<!--      </el-row>-->
+<!--    </div>-->
 
     <el-divider style="margin: 12px 0"/>
 
     <div class="title">
       <b>{{ t("style.canvasFill") }}</b>
     </div>
-    <div class="row">
-      <el-button class="full-row" @click="changeAllBackgroud">{{ t("style.applyCanvasToAll") }}</el-button>
-    </div>
+<!--    <div class="row">-->
+<!--      <el-button class="full-row" @click="changeAllBackgroud">{{ t("style.applyCanvasToAll") }}</el-button>-->
+<!--    </div>-->
     <Backgrounds/>
 
     <el-divider style="margin: 12px 0"/>
 
-    <Watermark/>
+<!--    <Watermark/>-->
 
-    <el-divider style="margin: 12px 0"/>
+<!--    <el-divider style="margin: 12px 0"/>-->
 
-    <div class="title">
-      <b>{{ t("style.canvasMask") }}</b>
-    </div>
-    <el-row>
-      <el-col :span="7" class="slider-name">{{ t("style.opacity") }}：</el-col>
-      <el-col :span="13">
-        <el-slider :min="0.1" :max="1" :step="0.01" v-model="opacity" @change="changeMaskOpacity"></el-slider>
-      </el-col>
-      <el-col :span="4" class="slider-num">{{ opacity }}</el-col>
-    </el-row>
+<!--    <div class="title">-->
+<!--      <b>{{ t("style.canvasMask") }}</b>-->
+<!--    </div>-->
+<!--    <el-row>-->
+<!--      <el-col :span="7" class="slider-name">{{ t("style.opacity") }}：</el-col>-->
+<!--      <el-col :span="13">-->
+<!--        <el-slider :min="0.1" :max="1" :step="0.01" v-model="opacity" @change="changeMaskOpacity"></el-slider>-->
+<!--      </el-col>-->
+<!--      <el-col :span="4" class="slider-num">{{ opacity }}</el-col>-->
+<!--    </el-row>-->
   </div>
 </template>
 
@@ -201,6 +201,8 @@ import Backgrounds from "../Backgrounds/index.vue";
 import Watermark from "./Watermark/index.vue";
 import useHistorySnapshot from "@/hooks/useHistorySnapshot";
 import useCanvasScale from '@/hooks/useCanvasScale'
+import {WorkSpaceElement} from "@/types/canvas";
+import {GradientColorLibs} from "@/configs/colorGradient";
 
 const {t} = useI18n();
 

src/views/Editor/computer.vue

@@ -8,19 +8,20 @@
 -->
 <template>
   <div class="h-full" v-drop-image="{ url: 'UploadUrl', highlightStyle: { backgroundColor: 'lightblue' } }">
-    <div class="layout-content flex">
-      <CanvasLeft/>
-      <div class="layout-content-center">
-        <CanvasHeader class="center-header relative flex justify-between py-[10px] text-[14px] select-none h-[39px]"/>
+    <div :class="[runMode == 1 ? 'layout-content-design': 'layout-content-show', 'flex']">
+      <CanvasLeft v-show="runMode == 1"/>
+      <div :class="runMode == 1 ? 'layout-content-center-design': 'layout-content-center-show'">
+        <CanvasHeader v-show="runMode == 1"
+                      class="center-header relative flex justify-between py-[10px] text-[14px] select-none h-[39px]"/>
         <CanvasCenter class="center-body"/>
         <!-- <CanvasFooter class="center-footer h-[40px] relative leading-1.5 flex justify-between" /> -->
-        <CanvasAffix class="center-affix"/>
+        <CanvasAffix v-show="runMode == 1" class="center-affix"/>
         <!--        <CanvasICP />-->
       </div>
-      <CanvasRight class="layout-content-right h-full w-[260px] bg-[#fff] flex flex-col"/>
-      <CanvasDom class="absolute -z-[200] -left-[300px]"/>
+      <CanvasRight v-show="runMode == 1" class="layout-content-right h-full w-[260px] bg-[#fff] flex flex-col"/>
+      <CanvasDom v-show="runMode == 1" class="absolute -z-[200] -left-[300px]"/>
     </div>
-    <CanvasTour/>
+    <CanvasTour v-show="runMode == 1"/>
   </div>
 </template>
 
@@ -43,36 +44,47 @@ import {ElMessage} from "element-plus";
 import {useMainStore} from "@/store";
 
 const mainStore = useMainStore();
+const runMode = ref(0);
 
 onMounted(async () => {
   const query = router.currentRoute.value.query
-  if (!query.virtualCode){
-    ElMessage.error('当前用户未登录,设计无法保存')
-    return
-  }
-  const param = {
-    virtualCode: query.virtualCode
+  if (query.runMode) {
+    runMode.value = query.runMode
+
+    mainStore.setRunMode(query.runMode)
   }
 
-  getCurrentUserTokenInfo(param).then((response) => {
-    if (response.httpCode == 200) {
-      console.log(response.data)
-      setToken('token', response.data.itemValue)
-      setToken('supplierCode', response.data.supplierCode)
-      setToken('dataSourceId', response.data.dataSourceId)
+  if (runMode.value == 1) {
+    if (!query.virtualCode) {
+      ElMessage.error('当前用户未登录,设计无法保存')
+      return
     }
-  });
-
+    const param = {
+      virtualCode: query.virtualCode
+    }
+    getCurrentUserTokenInfo(param).then((response) => {
+      if (response.httpCode == 200) {
+        console.log(response.data)
+        setToken('token', response.data.itemValue)
+        setToken('supplierCode', response.data.supplierCode)
+        setToken('dataSourceId', response.data.dataSourceId)
+      }
+    });
+  }
   mainStore.getFonts();
 })
 </script>
 
 <style lang="scss" scoped>
-.layout-content {
+.layout-content-design {
   height: calc(100% - 40px);
 }
 
-.layout-content-center {
+.layout-content-show {
+  height: calc(100%);
+}
+
+.layout-content-center-design {
   width: calc(100% - 50px/*- 160px*/ - 260px);
 
   .center-header {
@@ -90,6 +102,24 @@ onMounted(async () => {
   }
 }
 
+.layout-content-center-show {
+  width: calc(100%);
+
+  .center-header {
+    // border-left: 1px solid $borderColor;
+  }
+
+  .center-body {
+    height: 100%;
+    // margin: 100px;
+  }
+
+  .center-footer {
+    border-top: 1px solid $borderColor;
+    background-color: $lightGray;
+  }
+}
+
 .layout-content-right {
   // border-left: solid 1px $borderColor;
 }