fix: 修改颜色选择器

src/components/CusForm/src/ColorSelect.vue

@@ -25,9 +25,10 @@ const emit = defineEmits(["update:value"]);
 const props = defineProps<{
   value: string;
 }>();
-const colorType = ref(props.value?.length <= 7 || !props.value ? 'pure' : 'gradient');
+const colorType = ref(props.value?.length <= 9 || !props.value ? 'pure' : 'gradient');
 const color = ref(props.value);
-const gradientColor = ref(props.value?.length >= 7 ? props.value?.split(',') : ['#4ba9ff', '#fff']);
+// 'linear-gradient(90deg,#9CEC5BFF,#0764F0FF)'
+const gradientColor = ref(props.value?.length >= 9 ? props.value.slice(22).replace(')', '').split(',') : ['#4ba9ff', '#fff']);
 
 watch(
   () => [colorType.value, color.value, gradientColor.value],

src/components/CusForm/src/FontStyle.vue

@@ -1,16 +1,34 @@
 <template>
   <div class="font-style">
-    <span class="cus-btn" :class="{'active-btn': bold}"><BoldOutlined @click="handleBold"/></span>
-    <span class="cus-btn" :class="{'active-btn': italic}"><ItalicOutlined @click="handleItalic"/></span>
-    <span class="cus-btn" :class="{'active-btn': underline}"><UnderlineOutlined @click="handleUnderline"/></span>
-    <InputNumber size="small" min={1} max={100} step={1} precision={0} style="width: 80px" @change="handleChange"/>
+    <span class="cus-btn" :class="{ 'active-btn': bold }"
+      ><BoldOutlined @click="handleBold"
+    /></span>
+    <span class="cus-btn" :class="{ 'active-btn': italic }"
+      ><ItalicOutlined @click="handleItalic"
+    /></span>
+    <span class="cus-btn" :class="{ 'active-btn': underline }"
+      ><UnderlineOutlined @click="handleUnderline"
+    /></span>
+    <InputNumber
+      size="small"
+      :min="0"
+      :max="100"
+      :step="1"
+      :precision="0"
+      style="width: 80px"
+      @change="handleChange"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { defineProps, defineEmits, ref } from 'vue';
-import { BoldOutlined, ItalicOutlined, UnderlineOutlined, } from '@ant-design/icons-vue';
-import { InputNumber } from 'ant-design-vue';
+import { defineProps, defineEmits, ref } from "vue";
+import {
+  BoldOutlined,
+  ItalicOutlined,
+  UnderlineOutlined,
+} from "@ant-design/icons-vue";
+import { InputNumber } from "ant-design-vue";
 
 const props = defineProps<{
   value: number;
@@ -19,7 +37,12 @@ const props = defineProps<{
   underline: boolean;
 }>();
 
-const emit = defineEmits(["update:value", "update:bold", "update:italic", "update:underline"]);
+const emit = defineEmits([
+  "update:value",
+  "update:bold",
+  "update:italic",
+  "update:underline",
+]);
 
 const bold = ref(props.bold);
 const italic = ref(props.italic);
@@ -28,19 +51,19 @@ const value = ref(props.value);
 
 const handleBold = () => {
   bold.value = !bold.value;
-  emit('update:bold', bold.value);
+  emit("update:bold", bold.value);
 };
 const handleItalic = () => {
   italic.value = !italic.value;
-  emit('update:italic', italic.value);
+  emit("update:italic", italic.value);
 };
 const handleUnderline = () => {
   underline.value = !underline.value;
-  emit('update:underline', underline.value);
+  emit("update:underline", underline.value);
 };
 const handleChange = (e: any) => {
   value.value = e.target.value;
-  emit('update:value', value.value);
+  emit("update:value", value.value);
 };
 </script>
 
@@ -52,4 +75,4 @@ const handleChange = (e: any) => {
 .active-btn {
   color: @primary-color;
 }
-</style>
+</style>

src/components/Text/Title/src/Config.vue

@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import { defineProps, defineEmits, computed } from 'vue';
 import { CusForm, type IFormItem } from '@/components/CusForm';
-import { defaultPropsValue, titleProps } from './props';
+import { titleProps } from './props';
 
 const props = defineProps(titleProps);
 const emit = defineEmits(["change"]);

src/store/modules/project.ts

@@ -78,7 +78,18 @@ export const useProjectStore = defineStore({
       localStorage.setItem(CURRENT_PROJECT, JSON.stringify(info));
     },
     getCurrentProjectInfo(): ProjectInfo | undefined {
-      const info = JSON.parse(localStorage.getItem(CURRENT_PROJECT) || "");
+      let info = JSON.parse(localStorage.getItem(CURRENT_PROJECT) || "null");
+      if(!info) {
+        info = {
+          name: "默认项目",
+          description: "这是一个默认项目",
+          sizeType: "custom",
+          width: 1280,
+          height: 720,
+          fillType: ScreenFillEnum.AUTO,
+          pages: [{ ...defaultPage }],
+        }
+      }
       this.setProjectInfo(info as unknown as ProjectInfo);
       return info;
     },

src/store/modules/stage.ts

@@ -30,6 +30,8 @@ interface StageState {
   wrapperWidth: number;
   // 容器高度
   wrapperHeight: number;
+  // 显示图层
+  showLayer: boolean;
 }
 
 export const useStageStore = defineStore({
@@ -48,6 +50,7 @@ export const useStageStore = defineStore({
     scrollY: 0,
     wrapperWidth: 0,
     wrapperHeight: 0,
+    showLayer: true
   }),
   getters: {
     // 根据滚动和缩放，重新计算辅助线位置
@@ -109,5 +112,8 @@ export const useStageStore = defineStore({
       this.scrollX = x;
       this.scrollY = y;
     },
+    toggleShowLayer() {
+      this.showLayer = !this.showLayer;
+    }
   }
 })

src/views/designer/component/ComponentLibary.vue

@@ -75,6 +75,11 @@
             <span>{{ item.name }}</span>
           </MenuItem>
         </Menu>
+        <div class="layer-btn">
+          <div class="cus-btn" @click="stageStore.toggleShowLayer">
+            <DiffOutlined/><span v-show="!collapsed">组件图层</span>
+          </div>
+        </div>
       </LayoutSider>
     </Layout>
   </div>
@@ -97,6 +102,7 @@ import type { CompCategory, CompItem } from "@/config/compSetting";
 import { useEventListener } from "@vueuse/core";
 import { useProjectStore } from "@/store/modules/project";
 import { useStageStore } from "@/store/modules/stage";
+import { DiffOutlined } from "@ant-design/icons-vue";
 
 const projectStore = useProjectStore();
 const stageStore = useStageStore();
@@ -284,4 +290,18 @@ const handleDragEnd = () => {
   background: none;
   color: #666;
 }
+.layer-btn {
+  position: absolute;
+  bottom: 50px;
+  width: 100%;
+  text-align: center;
+  font-size: 12px;
+  color: #666;
+  border-top: solid 1px #f0f0f0;
+  border-bottom: solid 1px #f0f0f0;
+  padding: 12px 0;
+  .cus-btn {
+    cursor: pointer;
+  }
+}
 </style>

src/views/designer/component/LayerManagement.vue

@@ -3,7 +3,7 @@
     <div class="layer-header">
       <span>组件图层</span>
       <Button type="text" shape="circle" size="small">
-        <CloseOutlined />
+        <CloseOutlined @click="stageStore.toggleShowLayer"/>
       </Button>
     </div>
     <div class="line"></div>
@@ -47,7 +47,9 @@ import { CloseOutlined } from "@ant-design/icons-vue";
 import VueDraggable from "vuedraggable";
 import LayerItem from "./LayerItem.vue";
 import { useProjectStore } from "@/store/modules/project";
+import { useStageStore } from "@/store/modules/stage";
 
+const stageStore = useStageStore();
 const projectStore = useProjectStore();
 const filter = ref<string>("");
 const layerList = ref<CustomElement[]>([]);

src/views/designer/component/Stage.vue

@@ -94,6 +94,7 @@ const getStyles = computed(() => {
       transform: `scale(${stageStore.scale})`,
       left: `${canvasLeft}px`,
       top: `${canvasTop}px`,
+      border: '1px solid #ddd',
       ...canvasBackground
     },
     // 提示样式

src/views/designer/index.vue

@@ -14,9 +14,9 @@
     </LayoutHeader>
 
     <LayoutContent>
-      <div class="layer-wrapper">
+      <div class="layer-wrapper" :style="{width: stageStore.showLayer ? '200px' : '0px'}">
         <!-- 图层管理 -->
-        <LayerManagement />
+        <LayerManagement v-show="stageStore.showLayer"/>
       </div>
       <div class="component-wrapper">
         <!-- 组件库 -->
@@ -44,6 +44,7 @@ import {
 } from 'ant-design-vue';
 import { DesktopOutlined, SaveOutlined } from '@ant-design/icons-vue';
 import { useProjectStore } from '@/store/modules/project';
+import { useStageStore } from '@/store/modules/stage';
 
 import LayerManagement from './component/LayerManagement.vue';
 import ComponentLibary from './component/ComponentLibary.vue';
@@ -51,6 +52,7 @@ import Workspace from './component/Workspace.vue';
 import Configurator from './component/Configurator.vue';
 import MenuBar from './component/MenuBar.vue';
 
+const stageStore = useStageStore();
 const projectStore = useProjectStore();
 const loading = ref(false);
 
@@ -98,7 +100,7 @@ const handleSave = () => {
 
 .layer-wrapper {
   position: relative;
-  width: 200px;
+  // width: 200px;
   background: #fff;
   z-index: 2;
 }