reset

README.md

@@ -1,4 +1,4 @@
-**[在线体验网址](https://design.palxp.cn/)** | **[中文文档](https://xp.palxp.cn/)** | [常见问题](https://xp.palxp.cn/#/articles/1689323321667) | [架构说明](https://xp.palxp.cn/#/articles/1689321259854)
+**[在线体验网站](https://design.palxp.cn/)** | **[在线文档](https://xp.palxp.cn/)** | [常见问题](https://xp.palxp.cn/#/articles/1689323321667)
 
 ---
 

src/components/business/qrcode/index.vue

@@ -11,7 +11,7 @@
 
 <script lang="ts" setup>
 import { onMounted, ref, watch, nextTick } from 'vue'
-import QRCodeStyling, { Options } from 'qr-code-styling'
+import QRCodeStyling, {DotType, Options } from 'qr-code-styling'
 import { debounce } from 'throttle-debounce'
 import { generateOption } from './method'
 
@@ -20,7 +20,10 @@ export type TQrcodeProps = {
   height?: number
   image?: string
   value?: string
-  dotsOptions: Options['dotsOptions']
+  dotsOptions: {
+    color: string,
+    type: DotType,
+  }
 }
 
 const props = withDefaults(defineProps<TQrcodeProps>(), {

src/components/modules/panel/wrap/ToolsListWrap.vue

@@ -28,10 +28,9 @@
 import { ref, onMounted } from 'vue'
 import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
-// import wQrcode from '../../widgets/wQrcode/wQrcode.vue'
+import wQrcode from '../../widgets/wQrcode/wQrcode.vue'
 import imageCutout from '@/components/business/image-cutout'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
-import { wQrcodeSetting } from '../../widgets/wQrcode/wQrcodeSetting'
 
 const store = useStore()
 const route = useRoute()
@@ -60,7 +59,7 @@ onMounted(() => {
 
 function addQrcode() {
   store.commit('setShowMoveable', false) // 清理掉上一次的选择
-  let setting = JSON.parse(JSON.stringify(wQrcodeSetting))
+  let setting = JSON.parse(JSON.stringify(wQrcode.setting))
   const { width: pW, height: pH } = dPage.value
   setting.left = pW / 2 - setting.width / 2
   setting.top = pH / 2 - setting.height / 2

src/components/modules/settings/colorSelect.vue

@@ -30,19 +30,13 @@ type TProps = {
 type TEmits = {
   (event: 'finish', data: string): void
   (event: 'update:modelValue', data: string): void
-  (event: 'change', data: colorChangeData): void
+  (event: 'change', data: string): void
 }
 
 type TState = {
   innerColor: string
 }
 
-export type colorChangeData = {
-  angle: number
-  color: string
-  mode: string
-}
-
 const props = withDefaults(defineProps<TProps>(), {
   label: '',
   modelValue: '',
@@ -124,9 +118,7 @@ const hide = () => {
   store.commit('setShowMoveable', true) // 恢复上一次的选择框
 }
 
-
+const colorChange = (color: string) => {
-const colorChange = (color: colorChangeData) => {
-  // console.log('color', color)
   emit('change', color)
 }
 

src/components/modules/widgets/pageStyle.vue

@@ -1,175 +1,161 @@
 <template>
   <div id="page-style">
-    <div v-if="state.showBgLib" style="width: 256px;height: 100%;">
+    <div v-if="showBgLib" style="width: 256px;height: 100%;">
-      <span class="header-back" @click="state.showBgLib = false">
+      <span class="header-back" @click="showBgLib = false">
         <i class="iconfont icon-right"></i> 选择背景
       </span>
       <bg-img-list-wrap style="padding-top: 2rem;" model="stylePanel" />
     </div>
-    <el-collapse v-else v-model="state.activeNames">
+    <el-collapse v-else v-model="activeNames">
       <el-collapse-item title="画布尺寸" name="1">
         <div class="position-size">
-          <number-input v-model="state.innerElement.width" label="宽" :maxValue="5000" @finish="(value) => finish('width', value)" />
+          <number-input v-model="innerElement.width" label="宽" :maxValue="5000" @finish="(value) => finish('width', value)" />
-          <number-input v-model="state.innerElement.height" label="高" :maxValue="5000" @finish="(value) => finish('height', value)" />
+          <number-input v-model="innerElement.height" label="高" :maxValue="5000" @finish="(value) => finish('height', value)" />
         </div>
       </el-collapse-item>
       <el-collapse-item title="背景设置" name="2">
-        <el-button style="width: 100%; margin: 0 0 1rem 0;" type="primary" link @click="state.showBgLib = true">在背景库中选择</el-button>
+        <el-button style="width: 100%; margin: 0 0 1rem 0;" type="primary" link @click="showBgLib = true">在背景库中选择</el-button>
-        <Tabs :value="state.mode" @update:value="onChangeMode">
+        <Tabs :value="mode" @update:value="onChangeMode">
-          <TabPanel v-for="label in state.modes" :key="label" :label="label"></TabPanel>
+          <TabPanel v-for="label in modes" :key="label" :label="label"></TabPanel>
         </Tabs>
-        <color-select v-show="state.mode === '颜色'" v-model="state.innerElement.backgroundColor" :modes="['纯色']" @change="colorChange" @finish="(value) => finish('backgroundColor', value)" />
+        <color-select v-show="mode === '颜色'" v-model="innerElement.backgroundColor" :modes="['纯色']" @change="colorChange" @finish="(value) => finish('backgroundColor', value)" />
         <!-- <bg-img-select :img="innerElement.backgroundImage"/> -->
-        <div v-if="state.mode === '图片' && state.innerElement.backgroundImage" style="margin-top: 2rem">
+        <div v-if="mode === '图片' && innerElement.backgroundImage" style="margin-top: 2rem">
-          <el-image style="max-height: 428px" :src="state.innerElement.backgroundImage" fit="contain"></el-image>
+          <el-image style="max-height: 428px" :src="innerElement.backgroundImage" fit="contain"></el-image>
           <el-button class="btn-wrap" size="small" @click="deleteBg">删除</el-button>
         </div>
-        <uploader v-show="state.mode === '图片'" class="btn-wrap" @done="uploadImgDone">
+        <uploader v-show="mode === '图片'" class="btn-wrap" @done="uploadImgDone">
-          <el-button style="width: 100%" plain>{{ state.innerElement.backgroundImage ? '更换背景' : '上传背景' }}图</el-button>
+          <el-button style="width: 100%" plain>{{ innerElement.backgroundImage ? '更换背景' : '上传背景' }}图</el-button>
         </uploader>
-        <el-button v-show="state.mode === '图片' && state.innerElement.backgroundImage" class="btn-wrap" size="small" @click="downloadBG">{{ state.downP ? state.downP + ' %' : '下载背景图' }}</el-button>
+        <el-button v-show="mode === '图片' && innerElement.backgroundImage" class="btn-wrap" size="small" @click="downloadBG">{{ downP ? downP + ' %' : '下载背景图' }}</el-button>
 
       </el-collapse-item>
     </el-collapse>
   </div>
 </template>
 
-<script lang="ts" setup>
+<script>
 // 画布组件样式
-// const NAME = 'page-style'
+const NAME = 'page-style'
-import { nextTick, onMounted, reactive, watch } from 'vue'
+import { mapGetters, mapActions } from 'vuex'
-import { mapGetters, mapActions, useStore } from 'vuex'
 import numberInput from '../settings/numberInput.vue'
-import colorSelect, { colorChangeData } from '../settings/colorSelect.vue'
+import colorSelect from '../settings/colorSelect.vue'
-import uploader, { TUploadDoneData } from '@/components/common/Uploader/index.vue'
+import uploader from '@/components/common/Uploader/index.vue'
 import api from '@/api'
 import _dl from '@/common/methods/download'
 // import ColorPipette from '@/utils/plugins/color-pipette'
 import Tabs from '@palxp/color-picker/comps/Tabs.vue'
 import TabPanel from '@palxp/color-picker/comps/TabPanel.vue'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 
-type TState = {
+export default {
-  activeNames: string[]
+  name: NAME,
-  innerElement: Record<string, any>
+  components: { numberInput, colorSelect, uploader, Tabs, TabPanel },
-  tag: boolean
+  data() {
-  ingoreKeys: string[]
+    return {
-  downP: number
+      activeNames: ['1', '2', '3', '4'],
-  mode: string
+      innerElement: {},
-  modes: string[]
+      tag: false,
-  showBgLib: boolean
+      ingoreKeys: ['backgroundColor', 'name', 'width', 'height'],
-}
+      downP: 0,
-
+      mode: '颜色',
-const store = useStore()
+      modes: ['颜色', '图片'],
-const state = reactive<TState>({
+      showBgLib: false
-  activeNames: ['1', '2', '3', '4'],
-  innerElement: {},
-  tag: false,
-  ingoreKeys: ['backgroundColor', 'name', 'width', 'height'],
-  downP: 0,
-  mode: '颜色',
-  modes: ['颜色', '图片'],
-  showBgLib: false
-})
-const { dActiveElement } = useSetupMapGetters(['dActiveElement'])
-let _localTempBG: string | null = null
-
-watch(
-  () => dActiveElement.value,
-  () => {
-    change()
-  },
-  { deep: true }
-)
-
-watch(
-  () => state.innerElement,
-  () => {
-    changeValue()
-  },
-  { deep: true }
-)
-
-onMounted(() => {
-  change()
-})
-
-// ...mapActions(['updatePageData']),
-function colorChange(e: colorChangeData) {
-  if (e.mode === '渐变') {
-    // setTimeout(() => {
-    //   console.log(1, e)
-    //   this.finish('backgroundImage', e.color)
-    // }, 1000)
-  }
-}
-function onChangeMode(value: string) {
-  state.mode = value
-  if (value === '颜色') {
-    _localTempBG = state.innerElement.backgroundImage
-    finish('backgroundImage', '')
-  } else {
-    _localTempBG && finish('backgroundImage', _localTempBG)
-  }
-}
-function change() {
-  state.mode = state.modes[0]
-  state.tag = true
-  state.innerElement = JSON.parse(JSON.stringify(dActiveElement.value))
-  state.innerElement.backgroundImage && (state.mode = state.modes[1])
-}
-function changeValue() {
-  if (state.tag) {
-    state.tag = false
-    return
-  }
-  for (let key in state.innerElement) {
-    if (key !== 'setting' && key !== 'record' && state.innerElement[key] !== dActiveElement.value[key]) {
-      if (state.ingoreKeys.indexOf(key) !== -1) {
-        dActiveElement.value[key] = state.innerElement[key]
-      } else {
-        store.dispatch('updatePageData', {
-          key: key,
-          value: state.innerElement[key],
-        })
-        // updatePageData({
-        //   key: key,
-        //   value: this.innerElement[key],
-        // })
-      }
     }
-  }
+  },
-}
+  computed: {
-
+    ...mapGetters(['dActiveElement']),
-function finish(key: string, value: string | number) {
+  },
-  store.dispatch('updatePageData', {
+  watch: {
-    key: key,
+    dActiveElement: {
-    value: value,
+      handler(newValue, oldValue) {
-    pushHistory: true,
+        this.change()
-  })
+      },
-}
+      deep: true,
-async function uploadImgDone(img: TUploadDoneData) {
+    },
-  await api.material.addMyPhoto(img)
+    innerElement: {
-  store.dispatch('updatePageData', {
+      handler(newValue, oldValue) {
-    key: 'backgroundTransform',
+        this.changeValue()
-    value: {},
+      },
-  })
+      deep: true,
-  finish('backgroundImage', img.url)
+    },
-}
+  },
-async function deleteBg() {
+  created() {
-  _localTempBG = null
+    this.change()
-  store.dispatch('updatePageData', {
+  },
-    key: 'backgroundImage',
+  methods: {
-    value: '',
+    ...mapActions(['updatePageData']),
-    pushHistory: true,
+    colorChange(e) {
-  })
+      if (e.mode === '渐变') {
-  await nextTick()
+        // setTimeout(() => {
-  state.mode = state.modes[1]
+        //   console.log(1, e)
-}
+        //   this.finish('backgroundImage', e.color)
-async function downloadBG() {
+        // }, 1000)
-  await _dl.downloadImg(state.innerElement.backgroundImage, (p) => {
+      }
-    state.downP = p < 99 ? p / 100 : 0
+    },
-  })
+    onChangeMode(value) {
+      this.mode = value
+      if (value === '颜色') {
+        this._localTempBG = this.innerElement.backgroundImage
+        this.finish('backgroundImage', '')
+      } else {
+        this._localTempBG && this.finish('backgroundImage', this._localTempBG)
+      }
+    },
+    change() {
+      this.mode = this.modes[0]
+      this.tag = true
+      this.innerElement = JSON.parse(JSON.stringify(this.dActiveElement))
+      this.innerElement.backgroundImage && (this.mode = this.modes[1])
+    },
+    changeValue() {
+      if (this.tag) {
+        this.tag = false
+        return
+      }
+      for (let key in this.innerElement) {
+        if (key !== 'setting' && key !== 'record' && this.innerElement[key] !== this.dActiveElement[key]) {
+          if (this.ingoreKeys.indexOf(key) !== -1) {
+            this.dActiveElement[key] = this.innerElement[key]
+          } else {
+            this.updatePageData({
+              key: key,
+              value: this.innerElement[key],
+            })
+          }
+        }
+      }
+    },
+    finish(key, value) {
+      this.updatePageData({
+        key: key,
+        value: value,
+        pushHistory: true,
+      })
+    },
+    async uploadImgDone(img) {
+      await api.material.addMyPhoto(img)
+      this.updatePageData({
+        key: 'backgroundTransform',
+        value: {},
+      })
+      this.finish('backgroundImage', img.url)
+    },
+    async deleteBg() {
+      this._localTempBG = null
+      this.updatePageData({
+        key: 'backgroundImage',
+        value: '',
+        pushHistory: true,
+      })
+      await this.$nextTick()
+      this.mode = this.modes[1]
+    },
+    async downloadBG() {
+      await _dl.downloadImg(this.innerElement.backgroundImage, (p) => {
+        this.downP = p < 99 ? p / 100 : 0
+      })
+    },
+  },
 }
 </script>
 

src/components/modules/widgets/wQrcode/wQrcode.vue

@@ -7,8 +7,8 @@
 -->
 <template>
   <div
-    :id="`${params.uuid}`"
+    :id="params.uuid"
-    ref="widgetRef"
+    ref="widget"
     :class="['w-qrcode', { 'layer-lock': params.lock }]"
     :style="{
       position: 'absolute',
@@ -19,101 +19,109 @@
       opacity: params.opacity,
     }"
   >
-    <QRCode
+    <QRCode ref="qrcode" v-bind="qrCodeOptions" :width="width" :height="width" class="target" :image="params.url" :value="params.value" />
-      ref="qrcode"
-      v-bind="state.qrCodeOptions"
-      :width="width"
-      :height="width"
-      class="target"
-      :image="params.url"
-      :value="params.value"
-    />
   </div>
 </template>
 
-<script setup lang="ts">
+<script>
 // 图片组件
-// const NAME = 'w-qrcode'
+const NAME = 'w-qrcode'
 
-import { mapGetters, mapActions, useStore } from 'vuex'
+import { mapGetters, mapActions } from 'vuex'
 import QRCode from '@/components/business/qrcode'
-import { TWQrcodeSetting } from './wQrcodeSetting';
-import { computed, nextTick, onMounted, onUpdated, reactive, ref, watch } from 'vue';
-import { useSetupMapGetters } from '@/common/hooks/mapGetters';
-import { Options } from 'qr-code-styling';
 
-type TProps = {
+export default {
-  params: TWQrcodeSetting & {
+  name: NAME,
-    rotate?: number
+  components: { QRCode },
-    lock?: boolean
+  setting: {
-  }
+    name: '二维码',
-  parent: {
+    type: NAME,
-    top: number
+    uuid: -1,
-    left: number
+    width: 300,
-  }
+    height: 300,
-}
+    left: 0,
-
+    top: 0,
-type TState = {
+    zoom: 1,
-  qrCodeOptions: Options
+    transform: '',
-}
+    radius: 0,
-
+    opacity: 1,
-const store = useStore()
+    parent: '-1',
-const props = defineProps<TProps>()
+    url: '',
-const state = reactive<TState>({
+    dotType: 'classy',
-  qrCodeOptions: {}
+    dotColorType: 'single',
-})
+    dotRotation: 270,
-const { dActiveElement, dZoom } = useSetupMapGetters(['dActiveElement', 'dZoom'])
+    dotColor: '#35495E',
-const width = computed(() => Number(props.params.width))
+    dotColor2: '#35495E',
-const widgetRef = ref<HTMLElement | null>(null)
+    value: 'https://xp.palxp.cn',
-
+    setting: [],
-watch(
+    record: {
-  () => props.params,
+      width: 0,
-  () => {
+      height: 0,
-    changeValues()
+      minWidth: 10,
-  },
+      minHeight: 10,
-  { immediate: true, deep: true, }
+      dir: 'all',
-)
-
-onUpdated(() => {
-  updateRecord()
-  store.commit('updateRect')
-})
-
-onMounted(async () => {
-  updateRecord()
-  await nextTick()
-  if (widgetRef.value){
-    props.params.rotate && (widgetRef.value.style.transform += `rotate(${props.params.rotate})`)
-  }
-})
-// ...mapActions(['updateWidgetData']),
-function updateRecord() {
-  if (dActiveElement.value.uuid === props.params.uuid) {
-    let record = dActiveElement.value.record
-    if (!widgetRef.value) return
-    record.width = widgetRef.value.offsetWidth
-    record.height = widgetRef.value.offsetHeight
-  }
-  // this.updateZoom()
-}
-
-function changeValues() {
-  state.qrCodeOptions = {
-    qrOptions: { typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' },
-    // dotsOptions: { color: '#999999' },
-    dotsOptions: {
-      type: props.params.dotType,
-      color: props.params.dotColor,
-      gradient: {
-        type: 'linear',
-        rotation: props.params.dotRotation,
-        colorStops: [
-          { offset: 0, color: props.params.dotColor },
-          { offset: 1, color: props.params.dotColorType === 'single' ? props.params.dotColor : props.params.dotColor2 },
-        ],
-      },
     },
-  }
+  },
+  props: ['params', 'parent'],
+  data() {
+    return {
+      qrCodeOptions: {},
+    }
+  },
+  computed: {
+    ...mapGetters(['dActiveElement', 'dZoom']),
+    width() {
+      return Number(this.params.width)
+    },
+  },
+  watch: {
+    params: {
+      async handler(nval) {
+        this.changeValues()
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  updated() {
+    this.updateRecord()
+    this.$store.commit('updateRect')
+  },
+
+  async mounted() {
+    this.updateRecord()
+    await this.$nextTick()
+    this.params.rotate && (this.$refs.widget.style.transform += `rotate(${this.params.rotate})`)
+  },
+  methods: {
+    ...mapActions(['updateWidgetData']),
+    updateRecord() {
+      if (this.dActiveElement.uuid === this.params.uuid) {
+        let record = this.dActiveElement.record
+        record.width = this.$refs.widget.offsetWidth
+        record.height = this.$refs.widget.offsetHeight
+      }
+      // this.updateZoom()
+    },
+    changeValues() {
+      this.qrCodeOptions = {
+        qrOptions: { typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' },
+        // dotsOptions: { color: '#999999' },
+        dotsOptions: {
+          type: this.params.dotType,
+          color: this.params.dotColor,
+          gradient: {
+            type: 'linear',
+            rotation: this.params.dotRotation,
+            colorStops: [
+              { offset: 0, color: this.params.dotColor },
+              { offset: 1, color: this.params.dotColorType === 'single' ? this.params.dotColor : this.params.dotColor2 },
+            ],
+          },
+        },
+      }
+    },
+  },
 }
 </script>
 

src/components/modules/widgets/wQrcode/wQrcodeSetting.ts

@@ -1,61 +0,0 @@
-import { DotType } from "qr-code-styling"
-
-export type TWQrcodeSetting = {
-  name: string
-  type: string
-  uuid: string | number
-  width: number
-  height: number
-  left: number
-  top: number
-  zoom: number
-  transform: string
-  radius: number
-  opacity: number
-  parent: string
-  url: string
-  dotType: DotType
-  dotColorType: string
-  dotRotation: number
-  dotColor: string
-  dotColor2: string
-  value: string
-  setting: Record<string, any>[]
-  record: {
-    width: number
-    height: number
-    minWidth: number
-    minHeight: number
-    dir: string
-  }
-}
-
-export const wQrcodeSetting: TWQrcodeSetting = {
-  name: '二维码',
-  type: 'w-qrcode',
-  uuid: -1,
-  width: 300,
-  height: 300,
-  left: 0,
-  top: 0,
-  zoom: 1,
-  transform: '',
-  radius: 0,
-  opacity: 1,
-  parent: '-1',
-  url: '',
-  dotType: 'classy',
-  dotColorType: 'single',
-  dotRotation: 270,
-  dotColor: '#35495E',
-  dotColor2: '#35495E',
-  value: 'https://xp.palxp.cn',
-  setting: [],
-  record: {
-    width: 0,
-    height: 0,
-    minWidth: 10,
-    minHeight: 10,
-    dir: 'all',
-  },
-}

src/components/modules/widgets/wSvg/wSvg.vue

@@ -1,6 +1,3 @@
-<!--
-  TODO: 重构
--->
 <template>
   <div
     :id="params.uuid"