调整canvas笔触样式改为图片

src/component/Canvas/CanvasEditor/components/BrushPanel.vue

@@ -14,7 +14,8 @@
               @click="setBrushTypeWithCommand(brush.id)"
               :class="['brush-type-item', { active: brushStore.state.type === brush.id }]"
             >
-              <div class="brush-preview" :style="getBrushPreviewStyle(brush)"></div>
+              <!-- <div class="brush-preview" :style="getBrushPreviewStyle(brush)"></div> -->
+			  <img class="brush-preview" :src="brush.imgUrl" :title="brush.name" alt="">
               <span class="brush-name">{{ brush.name }}</span>
             </div>
           </div>
@@ -886,6 +887,7 @@ onMounted(() => {
     const availableBrushes = toolManager.brushManager
       .getBrushTypes()
       ?.filter((brush) => brush.id !== "eraser");
+	  console.log(availableBrushes)
     BrushStore.setAvailableBrushes(availableBrushes);
   }
 });
@@ -1178,6 +1180,8 @@ const brushStore = BrushStore;
   margin-bottom: 8px;
   border-radius: 4px;
   background-color: rgba(0, 0, 0, 0.02);
+  object-fit: contain;
+  background-color: #fff;
 }
 
 /* 保持笔刷预览内容样式一致 */

src/component/Canvas/CanvasEditor/index.vue

@@ -340,7 +340,7 @@ onMounted(async () => {
     props.redGreenImageUrl
   ) {
     canvasManager.canvas.fill = "#fff"; // 设置画布背景色为白色    // 初始化红绿图模式管理器
-    redGreenModeManager = new RedGreenModeManager({
+    redGreenModeManager = new toolManagerRedGreenModeManager({
       canvas: canvasManager.canvas,
       canvasManager,
       layerManager,

src/component/Canvas/CanvasEditor/managers/brushes/brushManager.js

@@ -65,6 +65,7 @@ export class BrushManager {
       description: "基础铅笔工具，适合精细线条绘制",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
+	imgUrl:'./image/brush/pencil.jpg',
     });
 
     // 注册材质笔刷
@@ -73,6 +74,7 @@ export class BrushManager {
       description: "使用纹理图片作为笔刷，支持缩放和透明度",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
+	imgUrl:'./image/brush/texture.jpg',
     });
 
     // 注册集成的笔刷类型
@@ -81,54 +83,63 @@ export class BrushManager {
       description: "使用纹理图片作为笔刷，支持缩放和透明度",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
+	imgUrl:'./image/brush/crayon.jpg',
     });
     brushRegistry.register("fur", FurBrush, {
       name: this.t("Canvas.Fur"),	
       description: "使用纹理图片作为笔刷，支持缩放和透明度",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
+	imgUrl:'./image/brush/fur.jpg',
     });
     brushRegistry.register("ink", InkBrush, {
       name: this.t("Canvas.Ink"),
       description: "墨水笔刷，适合书写和绘图",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
+	imgUrl:'./image/brush/ink.jpg',
     });
     brushRegistry.register("", LongfurBrush, {
       name: this.t("Canvas.Longfur"),
       description: "长毛发笔刷，适合绘制动物毛皮、草或头发",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
+	imgUrl:'./image/brush/longFur.jpg',
     });
     brushRegistry.register("writing", WritingBrush, {
       name: this.t("Canvas.Writing"),
       description: "书法笔刷，模拟中国传统书法毛笔效果，具有笔锋和墨色变化",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
+	imgUrl:'./image/brush/writing.jpg',
     });
     brushRegistry.register("marker", MarkerBrush, {
       name: this.t("Canvas.Marker"),
       description: "马克笔笔刷，适合粗线条和填充",
 	  t:this.t,
 	category: this.t('Canvas.BasicBrushes'),
+	imgUrl:'./image/brush/marker.jpg',
     });
     brushRegistry.register("pen", CustomPenBrush, {
       name: this.t("Canvas.Pen"),
       description: "自定义钢笔笔刷，适合书写和绘图",
 	  t:this.t,
 	  category: this.t('Canvas.BasicBrushes'),
+	imgUrl:'./image/brush/pen.jpg',
     });
     brushRegistry.register("ribbon", RibbonBrush, {
       name: this.t("Canvas.Ribbon"),
       description: "丝带笔刷，适合创建流动的丝带效果",
 	  t:this.t,
 	  category: this.t('Canvas.BasicBrushes'),
+	imgUrl:'./image/brush/ribbon.jpg',
     });
     brushRegistry.register("shaded", ShadedBrush, {
       name: this.t("Canvas.Shaded"),
       description: "阴影笔刷，适合创建渐变和阴影效果",
 	  t:this.t,
       category: this.t('Canvas.BasicBrushes'),
+	imgUrl:'./image/brush/shaded.jpg',
     });
 
     brushRegistry.register("spray", SprayBrush, {
@@ -136,6 +147,7 @@ export class BrushManager {
       description: "模拟喷枪效果，创建散点效果",
 	  t:this.t,
       category: this.t('Canvas.BasicBrushes'),
+	imgUrl:'./image/brush/spray.jpg',
     });
 
     // brushRegistry.register("sketchy", SketchyBrush);
@@ -365,6 +377,7 @@ export class BrushManager {
       description: brushInfo.metadata.description || "",
       category: brushInfo.metadata.category || "默认",
       icon: brushInfo.metadata.icon || null,
+      imgUrl: brushInfo.metadata.imgUrl || null,
     }));
   }
 

src/component/Detail/detailRight/editPrintElement.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="editPrintElement">
-		<div class="detailText" style="text-align: left; margin-bottom: 1rem;">
+		<div class="detailText" style="text-align: left; margin-bottom: 1rem;" v-if="type == 'print'">
 			{{ $t('DesignPrintOperation.ModifyPrint') }}
 		</div>
 		<div class="printOverallBtn" v-if="type == 'print'">

src/tool/listData.js

@@ -231,7 +231,7 @@ const projectList = {
 		}
 	],
 }
-const openTypeList = (t)=>{
+const navTypeList = (t)=>{
 	return {
 		tools:{
 			icon:'fi-rr-magic-wand',
@@ -406,4 +406,4 @@ const openTypeList = (t)=>{
 		},
 	}
 }
-export {projectList,openTypeList}
+export {projectList,navTypeList}

src/views/HomeMain.vue

@@ -18,7 +18,7 @@
 					<p>{{$t('Header.NewProject')}}</p>
 				</div>
 				<div class="navList ">
-					<div class="tools list" v-for="item in openTypeList" :class="{active:openType == item.value,history:item.value == 'history'}">
+					<div class="tools list" v-for="item in navTypeList" :class="{active:openType == item.value,history:item.value == 'history'}">
 						<div class="titleBox" @click="setOpenType(item.value,item.list)">
 							<div class="left">
 								<i :class="['fi',item.icon]"></i>
@@ -291,7 +291,7 @@ import { ScrollTrigger } from "gsap/ScrollTrigger";
 import MyWs from "@/tool/webSocket";
 import MyEvent from "@/tool/myEvents";
 import { useRouter,useRoute } from 'vue-router'
-import {openTypeList} from "@/tool/listData.js";
+import {navTypeList} from "@/tool/listData.js";
 import home from "@/component/home/index.vue";
 import projectSetting from '@/component/home/newProject/setting.vue'
 import bindEmail from "@/component/HomePage/bindEmail.vue";
@@ -325,7 +325,7 @@ export default defineComponent({
 			openTypeChild:'',
 			isLanguage:false,
 			userDetailLanguage:computed(()=>store.state.UserHabit.userDetail.language),
-			openTypeList:openTypeList(t),
+			navTypeList:navTypeList(t),
 			projectSetting:null,
 			historyData:{
 				isNoData:false,
@@ -355,13 +355,13 @@ export default defineComponent({
 		watch(()=>homeMainData.userDetailLanguage,(newVal)=>{
 			if(locale.value == newVal || !newVal)return
 			locale.value = newVal
-			let opTypeList = openTypeList(t)
-			for (const key in opTypeList) {
-				const element = opTypeList[key];
-				homeMainData.openTypeList[key].label = element.label
+			let navList = navTypeList(t)
+			for (const key in navList) {
+				const element = navList[key];
+				homeMainData.navTypeList[key].label = element.label
 				if(element.list?.length > 0){
 					element.list.forEach((item,index)=>{
-						homeMainData.openTypeList[key].list[index].label = item.label
+						homeMainData.navTypeList[key].list[index].label = item.label
 					})
 				}
 			}
@@ -369,7 +369,7 @@ export default defineComponent({
 		// watch(()=>locale.value,(newVal,oldVal)=>{
 		// 	if(newVal == oldVal)return
 		// 	console.log(newVal , oldVal)
-		// 	// homeMainData.openTypeList = 
+		// 	// homeMainData.navTypeList = 
 		// })
 
 		const historyData = reactive({
@@ -420,7 +420,7 @@ export default defineComponent({
 			},
 			{ immediate: true } // 立即触发一次以处理初始参数
 		);
-		// watch(()=>homeMainData.openTypeList,()=>{
+		// watch(()=>homeMainData.navTypeList,()=>{
 		// 	homeMainData.historyData.page = 1
 		// })
 		
@@ -609,7 +609,7 @@ export default defineComponent({
 				return
 			}
 			homeMainData.historyData.page = 1
-			// homeMainData.openTypeList.history = {
+			// homeMainData.navTypeList.history = {
 			// 	icon:"fi-br-time-past",
 			// 	label:"History",
 			// 	value:"history",
@@ -618,10 +618,10 @@ export default defineComponent({
 			// 	WithinAWeeklist:[],
 			// 	Earlierlist:[],
 			// }
-			homeMainData.openTypeList.history.Todaylist = []
-			homeMainData.openTypeList.history.Yesterdaylist = []
-			homeMainData.openTypeList.history.WithinAWeeklist = []
-			homeMainData.openTypeList.history.Earlierlist = []
+			homeMainData.navTypeList.history.Todaylist = []
+			homeMainData.navTypeList.history.Yesterdaylist = []
+			homeMainData.navTypeList.history.WithinAWeeklist = []
+			homeMainData.navTypeList.history.Earlierlist = []
 			homeMainData.historyData.isShowLoading = false
 			homeMainData.historyData.isNoData = false
 			isFound = 0//表示是否找到当前id的记录，
@@ -659,7 +659,7 @@ export default defineComponent({
 				}else{
 					isFound++
 					historyDateList.forEach((item,dateItemIndex)=>{
-						let length = homeMainData.openTypeList.history[item].length
+						let length = homeMainData.navTypeList.history[item].length
 						if(existToHistoryIndex > length + num){
 							num += length
 						}else{
@@ -696,7 +696,7 @@ export default defineComponent({
 					if (rv.content.length > 0) {
 							rv.content.forEach((item,index)=>{
 								let str = categorizeDate(item.updateTime) + 'list'
-								homeMainData.openTypeList.history[str].push(item)
+								homeMainData.navTypeList.history[str].push(item)
 								if(item.id == (route.query?.id || route.query?.history)){
 									existToHistoryIndex = rv.page * rv.size + index + 1 - rv.size
 								}
@@ -744,10 +744,10 @@ export default defineComponent({
 		}
 		const editName = (item)=>{
 			homeMainData.historyData.selectHistoryId = -1
-			for (const key in homeMainData.openTypeList.history) {
+			for (const key in homeMainData.navTypeList.history) {
 				let list = ['Earlierlist','Todaylist','WithinAWeeklist','Yesterdaylist']
 				if(list.indexOf(key) == -1)continue
-				homeMainData.openTypeList.history[key].forEach((item)=>{
+				homeMainData.navTypeList.history[key].forEach((item)=>{
 					item.editName = false
 				})
 			}

src/views/Login.vue

@@ -171,7 +171,6 @@ export default defineComponent({
     }
 	onMounted(()=>{
 		const data = route.query;
-		console.log(data)
 		if (data?.state == "weiXin") {
 			wechatLogin(data);
 		}