huabi

litian

2024-05-13 8b4d3677c7826c16f2400d0c674e140fd7c2490b

huabi

 src/assets/images/operation/tuichu.png

 src/assets/images/operation/tuxing.png

 src/assets/images/operation/wenzi.png

 src/assets/main.css

@@ -111,14 +111,17 @@
  justify-content: space-between;
}
.popinnerBox .characters .small {
  cursor: pointer;
  text-align: center;
  flex: 1;
}
.popinnerBox .characters .middle {
  cursor: pointer;
  text-align: center;
  flex: 1;
}
.popinnerBox .characters .large {
  cursor: pointer;
  text-align: center;
  flex: 1;
}

 src/views/home.vue

@@ -390,34 +390,51 @@
        >
          <el-popover
            placement="right"
            :width="
              floatingToolData.activeToolData == '标注'
                ? 120
                : floatingToolData.activeToolData == '清除'
                  ? 200
                  : 250
            "
            width="120"
            trigger="click"
            v-if="
              floatingToolData.activeToolData == '画笔' ||
              floatingToolData.activeToolData == '清除' ||
              floatingToolData.activeToolData == '文字' ||
              floatingToolData.activeToolData == '标注'
            "
            v-if="floatingToolData.activeToolData == '标注'"
          >
            <div class="popinnerBox">
              <div class="brush" v-if="floatingToolData.activeToolData == '画笔'">
              <div class="label" v-if="floatingToolData.activeToolData == '标注'">
                <div class="labelItem hover" @click="labelShow('hide')">
                  <img :src="hide" />
                  <div>隐藏</div>
                </div>
                <div class="labelItem hover" @click="labelShow('show')">
                  <img :src="show" />
                  <div>显示</div>
                </div>
              </div>
            </div>
            <template #reference>
              <div :class="floatingToolData.activeToolData == item.name ? 'floatToolActive floatToolItem' : 'floatToolItem'">
                <img :src="floatingToolData.activeToolData == item.name ? item.activeIcon : item.icon" alt="" />
                <div class="text">{{ item.name }}</div>
              </div>
            </template>
          </el-popover>
          <div :class="floatingToolData.activeToolData == item.name ? 'floatToolActive floatToolItem' : 'floatToolItem'" v-else @click="floatItemHandle(item)">
            <img :src="floatingToolData.activeToolData == item.name ? item.activeIcon : item.icon" alt="" />
            <div class="text">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="brushBox" v-if="floatingToolData.activeToolData == '画笔'">
        <div class="toolList">
          <el-popover placement="top" width="250" trigger="click">
            <div class="popinnerBox">
              <div class="brush" >
                <div class="thickness">
                  <div
                    :class="floatingToolData.thicknessActive == '1' ? 'small active' : 'small'"
                    :class="toolSelectData.thicknessActive == '1' ? 'small active' : 'small'"
                    @click="selectThickness('1')"
                  ></div>
                  <div
                    :class="floatingToolData.thicknessActive == '3' ? 'middle active' : 'middle'"
                    :class="toolSelectData.thicknessActive == '3' ? 'middle active' : 'middle'"
                    @click="selectThickness('3')"
                  ></div>
                  <div
                    :class="floatingToolData.thicknessActive == '5' ? 'large active' : 'large'"
                    :class="toolSelectData.thicknessActive == '5' ? 'large active' : 'large'"
                    @click="selectThickness('5')"
                  ></div>
                </div>
@@ -425,27 +442,27 @@
                  <div class="lineTypeBox">
                    <div
                      :class="
                        floatingToolData.lineTypeActive == 'solid'
                        toolSelectData.lineTypeActive == 'solid'
                          ? 'typeItem lineTypeActive'
                          : 'typeItem'
                      "
                      @click="selectLineType('solid')"
                    >
                      <div class="solid"></div>
                      <div class="activeIcon" v-if="floatingToolData.lineTypeActive == 'solid'">
                      <div class="activeIcon" v-if="toolSelectData.lineTypeActive == 'solid'">
                        <img :src="xuanzhong" />
                      </div>
                    </div>
                    <div
                      :class="
                        floatingToolData.lineTypeActive == 'dashed'
                        toolSelectData.lineTypeActive == 'dashed'
                          ? 'typeItem lineTypeActive'
                          : 'typeItem'
                      "
                      @click="selectLineType('dashed')"
                    >
                      <div class="dashed"></div>
                      <div class="activeIcon" v-if="floatingToolData.lineTypeActive == 'dashed'">
                      <div class="activeIcon" v-if="toolSelectData.lineTypeActive == 'dashed'">
                        <img :src="xuanzhong" />
                      </div>
                    </div>
@@ -458,38 +475,40 @@
                      @click="lineColorSelect(item)"
                    >
                      <div :style="{ background: item.key }" class="scribeItem">
                        <img :src="xuanzhong" v-if="item.key == floatingToolData.lineColorActive" />
                        <img :src="xuanzhong" v-if="item.key == toolSelectData.lineColorActive" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="cleanup" v-if="floatingToolData.activeToolData == '清除'">
                <div class="cleanupItem hover" @click="cleanUpSelect('prev')">
                  <img :src="clearPrevious" />
                  <div>清除上一步</div>
                </div>
                <div class="cleanupItem hover" @click="cleanUpSelect('all')">
                  <img :src="clear" />
                  <div>清除全部</div>
            <template #reference>
              <div class="floatToolItem" @click="toolSelectHandle('huabi')">
                <div class="imgBox">
                  <img :src="hide" alt="" />
                </div>
                <div class="text">画笔</div>
              </div>
              <div class="write" v-if="floatingToolData.activeToolData == '文字'">
            </template>
          </el-popover>
          <el-popover placement="top" width="250" trigger="click">
            <div class="popinnerBox">
              <div class="write">
                <div class="characters">
                  <div
                    :class="floatingToolData.fontSizeActive == '14' ? 'small active' : 'small'"
                    :class="toolSelectData.fontSizeActive == '14' ? 'small active' : 'small'"
                    @click="selectfontSize('14')"
                  >
                    小
                  </div>
                  <div
                    :class="floatingToolData.fontSizeActive == '16' ? 'middle active' : 'middle'"
                    :class="toolSelectData.fontSizeActive == '16' ? 'middle active' : 'middle'"
                    @click="selectfontSize('16')"
                  >
                    中
                  </div>
                  <div
                    :class="floatingToolData.fontSizeActive == '18' ? 'large active' : 'large'"
                    :class="toolSelectData.fontSizeActive == '18' ? 'large active' : 'large'"
                    @click="selectfontSize('18')"
                  >
                    大
@@ -504,33 +523,99 @@
                      @click="lineColorSelect(item)"
                    >
                      <div :style="{ background: item.key }" class="scribeItem">
                        <img :src="xuanzhong" v-if="item.key == floatingToolData.lineColorActive" />
                        <img :src="xuanzhong" v-if="item.key == toolSelectData.lineColorActive" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="label" v-if="floatingToolData.activeToolData == '标注'">
                <div class="labelItem hover" @click="labelShow('hide')">
                  <img :src="hide" />
                  <div>隐藏</div>
                </div>
                <div class="labelItem hover" @click="labelShow('show')">
                  <img :src="show" />
                  <div>显示</div>
                </div>
              </div>
            </div>
            <template #reference>
              <div class="floatToolItem">
                <img :src="item.icon" alt="" />
                <div class="text">{{ item.name }}</div>
              <div class="floatToolItem" @click="toolSelectHandle('wenzi')">
                <div class="imgBox">
                <img :src="wenzi2" alt="" />
                </div>
                <div class="text">文字</div>
              </div>
            </template>
          </el-popover>
          <div class="floatToolItem" v-else @click="floatItemHandle(item)">
            <img :src="item.icon" alt="" />
            <div class="text">{{ item.name }}</div>
          <el-popover placement="top" width="250" trigger="click">
            <div class="popinnerBox">
              <div class="write">
                <div class="characters">
                  <div
                    :class="floatingToolData.fontSizeActive == '14' ? 'small active' : 'small'"
                    @click="selectfontSize('14')"
                  >
                    小
                  </div>
                  <div
                    :class="toolSelectData.fontSizeActive == '16' ? 'middle active' : 'middle'"
                    @click="selectfontSize('16')"
                  >
                    中
                  </div>
                  <div
                    :class="toolSelectData.fontSizeActive == '18' ? 'large active' : 'large'"
                    @click="selectfontSize('18')"
                  >
                    大
                  </div>
                </div>
                <div class="lineStyle">
                  <div class="colorSelectBox">
                    <div
                      v-for="item in colorSelectList"
                      :key="item.key"
                      class="flex1 hover"
                      @click="lineColorSelect(item)"
                    >
                      <div :style="{ background: item.key }" class="scribeItem">
                        <img :src="xuanzhong" v-if="item.key == toolSelectData.lineColorActive" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <template #reference>
              <div class="floatToolItem"  @click="toolSelectHandle('tuxing')">
                <div class="imgBox">
                  <img :src="tuxing" alt="" />
                </div>
                <div class="text">图形</div>
              </div>
            </template>
          </el-popover>
          <div class="floatToolItem"  @click="toolSelectHandle('xiangpi')">
            <div class="imgBox">
              <img :src="clearPrevious" alt="" />
            </div>
            <div class="text">橡皮擦</div>
          </div>
          <div class="floatToolItem" @click="toolSelectHandle('chexiao')">
            <div class="imgBox">
              <img :src="clear" alt="" />
            </div>
            <div class="text">撤销</div>
          </div>
          <div class="floatToolItem" @click="toolSelectHandle('chongzuo')">
            <div class="imgBox">
              <img :src="hide" alt="" />
            </div>
            <div class="text">重做</div>
          </div>
          <div class="floatToolItem" @click="toolSelectHandle('qingchu')">
            <div class="imgBox">
              <img :src="hide" alt="" />
            </div>
            <div class="text">清除</div>
          </div>
          <div class="floatToolItem layOutTool" @click="toolSelectHandle('tuichu')">
            <div class="imgBox">
              <img :src="tuichu" alt="" />
            </div>
            <div class="text">退出</div>
          </div>
        </div>
      </div>
@@ -733,6 +818,7 @@
import qingchu1 from '../assets/images/operation/Clearaway-b.png'
import wenzi from '../assets/images/operation/wenzi-w.png'
import wenzi1 from '../assets/images/operation/wenzi-b.png'
import wenzi2 from '../assets/images/operation/wenzi.png'
import biaoqianw from '../assets/images/operation/biaoqian-w.png'
import biaoqian1 from '../assets/images/operation/biaoqian-b.png'
import baiban from '../assets/images/operation/baiban-w.png'
@@ -745,6 +831,8 @@
import clearPrevious from '../assets/images/operation/clearPrevious.png'
import hide from '../assets/images/operation/hide.png'
import show from '../assets/images/operation/show.png'
import tuichu from '../assets/images/operation/tuichu.png'
import tuxing from '../assets/images/operation/tuxing.png'

import gaoliang from '../assets/images/operation/gaoliang.png'
import gaoliang1 from '../assets/images/operation/gaoliang-b.png'
@@ -789,8 +877,7 @@
  window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
)
onMounted(() => {
  console.log(1111);
  
  console.log(1111)
  // canvasWith.value = window.innerWidth - 540
  // canvasheight.value = window.innerHeight - 110
  getNotesList() // 获取高亮
@@ -814,11 +901,11 @@
    })()
  }

  console.log(qiankunActions,"qiankunActions");
  console.log(qiankunActions, 'qiankunActions')
  
  qiankunActions.setGlobalState({
    cc: (data) => {
      console.log(data);
      console.log(data)
    }
  })
})
@@ -1193,29 +1280,26 @@
const floatingToolBox = reactive([
  {
    icon: huabi,
    activeIcon: huabi1,
    name: '画笔'
  },
  {
    icon: qingchu,
    name: '清除'
  },
  {
    icon: wenzi,
    name: '文字'
  },
  {
    icon: biaozhu,
    name: '标注'
  },
  {
    icon: biaoqianw,
    name: '标签'
  },
  {
    activeIcon: baiban1,
    icon: baiban,
    name: '白板'
  },
  {
    activeIcon: biaozhu1,
    icon: biaozhu,
    name: '标注'
  },
  {
    activeIcon: biaoqian1,
    icon: biaoqianw,
    name: '标签'
  },
  {
    activeIcon: jieping1,
    icon: jieping,
    name: '截屏'
  }
@@ -1243,22 +1327,16 @@
      floatingToolBox[0].icon = huabi1
      break
    case 1:
      floatingToolBox[1].icon = qingchu1
      floatingToolBox[1].icon = baiban1
      break
    case 2:
      floatingToolBox[2].icon = wenzi1
      floatingToolBox[2].icon = biaozhu1
      break
    case 3:
      floatingToolBox[3].icon = biaozhu1
      floatingToolBox[3].icon = biaoqian1
      break
    case 4:
      floatingToolBox[4].icon = biaoqian1
      break
    case 5:
      floatingToolBox[5].icon = baiban1
      break
    case 6:
      floatingToolBox[6].icon = jieping1
      floatingToolBox[4].icon = jieping1
      break
  }
}
@@ -1269,22 +1347,16 @@
      floatingToolBox[0].icon = huabi
      break
    case 1:
      floatingToolBox[1].icon = qingchu
      floatingToolBox[1].icon = baiban
      break
    case 2:
      floatingToolBox[2].icon = wenzi
      floatingToolBox[2].icon = biaozhu
      break
    case 3:
      floatingToolBox[3].icon = biaozhu
      floatingToolBox[3].icon = biaoqianw
      break
    case 4:
      floatingToolBox[4].icon = biaoqianw
      break
    case 5:
      floatingToolBox[5].icon = baiban
      break
    case 6:
      floatingToolBox[6].icon = jieping
      floatingToolBox[4].icon = jieping
      break
  }
}
@@ -1304,7 +1376,6 @@
  switch (item.name) {
    case '画笔':
      canvasShow.value = true
      init()
      break
    case '截屏':
      jitT()
@@ -1324,20 +1395,38 @@
  floatingToolData.startclientx = e.clientX
  floatingToolData.startclienty = e.clientY
}
//画笔操作栏事件
const toolSelectData = reactive({
  activeTool:'',
  fontSizeActive: '16',
  thicknessActive: '3', //画笔选中粗细
  lineTypeActive: 'solid', //画笔选中线类型
  lineColorActive: '#333' //画笔选中线颜色
})
const toolSelectHandle = (title) => {
  toolSelectData.activeTool = title
  switch (title) {
    case 'huabi':
    init()
      break
    case 'wenzi':
      break
  }
}

//选中画笔粗细
const selectThickness = (str) => {
  floatingToolData.thicknessActive = str
  toolSelectData.thicknessActive = str
  init()
}

const selectLineType = (str) => {
  floatingToolData.lineTypeActive = str
  toolSelectData.lineTypeActive = str
  init()
}
//画笔颜色选择
const lineColorSelect = (item) => {
  floatingToolData.lineColorActive = item.key
  toolSelectData.lineColorActive = item.key
  init()
}
//画布属性
@@ -1345,24 +1434,17 @@
  canvas.value = new fabric.Canvas('canvasRef', {
    isDrawingMode: true // 启用绘画模式
  })
  canvas.value.freeDrawingBrush.color = floatingToolData.lineColorActive
  canvas.value.freeDrawingBrush.width = floatingToolData.thicknessActive
  canvas.value.freeDrawingBrush.color = toolSelectData.lineColorActive
  canvas.value.freeDrawingBrush.width = toolSelectData.thicknessActive
}

//清除上一步/全部
const cleanUpSelect = (str) => {
  if (str == 'all') {
    canvasShow.value = false
  } else {
    console.log(history.value)
  }
}

//标签显示隐藏
const labelShow = (str) => {}

//文字大小
const selectfontSize = (str) => {
  floatingToolData.fontSizeActive = str
  toolSelectData.fontSizeActive = str
}

//截图
@@ -2626,7 +2708,7 @@
      width: 85px;
      background-image: linear-gradient(to bottom, #0093ff, #005dff);
      position: fixed;
      height: 430px;
      height: 310px;
      top: 300px;
      left: 450px;
      z-index: 99;
@@ -2647,12 +2729,48 @@
          margin-right: 5px;
        }
      }
    }

    .floatToolItem:hover {
      .floatToolItem:hover ,.floatToolActive{
      background-color: #fff;
      color: #0093ff;
    }
    }


    
    .brushBox{
      position: fixed;
      left: 500px;
      bottom:20px;
      z-index: 99;
      border-radius: 5px;
      background:#fff;
      // padding: 10px;
      overflow: hidden;
      border:1px solid #0093FF;
      .toolList{
        display:flex;
        justify-content: center;
        align-items: center;
        .floatToolItem {
          margin:10px;
          width:48px;
          border-radius: 5px;
          text-align:center;
          flex:1;
          .imgBox{
            height:22px;
            width:22px;
            text-align:center;
            margin:0 auto;
            margin-bottom:5px;
          }
        }
        .layOutTool{
          padding-left:15px;
          border-left:1px solid #E0E0E0
        }
      }
    }

    .dialogToolBox {
      position: fixed;

 vite.config.ts

@@ -9,10 +9,10 @@
  base:"./",
  plugins: [
    vue(),
    electron({
      // 配置 Electron 入口文件
      entry: 'electron-commonJS/main.js'
    }),
    // electron({
    //   // 配置 Electron 入口文件
    //   entry: 'electron-commonJS/main.js'
    // }),
  ],
  resolve: {
    alias: {