工具栏 样式修改

src/views/Editor/CanvasTool/MediaInput.vue

@@ -1,95 +0,0 @@
-<template>
-  <div class="media-input">
-    <Tabs :tabs="tabs" v-model:value="type" :tabsStyle="{ marginBottom: '15px' }" />
-    <template v-if="type === 'video'">
-      <ElUpload
-        class="uploadCon"
-        action=""
-        :show-file-list="false"
-        accept=".mp4,.avi,.flv"
-        :http-request="
-          (fileData: any) => {
-            handleUpload('video', fileData)
-            return undefined
-          }
-        "
-      >
-        <Button type="primary">上传视频</Button>
-      </ElUpload>
-    </template>
-
-    <template v-if="type === 'audio'">
-      <ElUpload
-        class="uploadCon"
-        action=""
-        :show-file-list="false"
-        accept=".mp3,.wav,.m4a"
-        :http-request="
-          (fileData: any) => {
-            handleUpload('audio', fileData)
-            return undefined
-          }
-        "
-      >
-        <Button type="primary">上传音频</Button>
-      </ElUpload>
-    </template>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from "vue"
-import message from "@/utils/message"
-import Tabs from "@/components/Tabs.vue"
-import Button from "@/components/Button.vue"
-import { ElUpload, ElButton, ElMessage, type UploadRequestOptions } from "element-plus"
-import fileUpload from "@/utils/oss-file-upload"
-
-type TypeKey = "video" | "audio"
-interface TabItem {
-  key: TypeKey
-  label: string
-}
-
-const emit = defineEmits<{
-  (event: "insertVideo", payload: string): void
-  (event: "insertAudio", payload: string): void
-  (event: "close"): void
-}>()
-
-const type = ref<TypeKey>("video")
-const tabs: TabItem[] = [
-  { key: "video", label: "视频" },
-  { key: "audio", label: "音频" }
-]
-
-async function handleUpload(type: TypeKey, fileData: UploadRequestOptions) {
-  fileUpload(fileData.file.name, fileData.file)
-    .then(res => {
-      if (type === "audio") {
-        emit("insertAudio", res)
-      } else {
-        emit("insertVideo", res)
-      }
-    })
-    .catch(() => {
-      ElMessage({
-        showClose: true,
-        message: "上传失败!",
-        type: "error"
-      })
-    })
-}
-</script>
-
-<style lang="scss" scoped>
-.media-input {
-  width: 120px;
-  & :deep(.tabs) {
-    justify-content: center;
-  }
-  .uploadCon {
-    text-align: center;
-  }
-}
-</style>

src/views/Editor/CanvasTool/index.vue

@@ -1,56 +1,82 @@
 <template>
   <div class="canvas-tool">
     <div class="left-handler">
-      <IconBack class="handler-item" :class="{ disable: !canUndo }" v-tooltip="'撤销（Ctrl + Z）'" @click="undo()" />
-      <IconNext class="handler-item" :class="{ disable: !canRedo }" v-tooltip="'重做（Ctrl + Y）'" @click="redo()" />
-      <div class="more">
-        <Divider type="vertical" style="height: 20px" />
-        <Popover class="more-icon" trigger="click" v-model:value="moreVisible" :offset="10">
-          <template #content>
-            <PopoverMenuItem
-              center
-              @click="
-                () => {
-                  toggleNotesPanel()
-                  moreVisible = false
-                }
-              "
-              >批注面板</PopoverMenuItem
-            >
-            <PopoverMenuItem
-              center
-              @click="
-                () => {
-                  toggleSelectPanel()
-                  moreVisible = false
-                }
-              "
-              >选择窗格</PopoverMenuItem
-            >
-            <PopoverMenuItem
-              center
-              @click="
-                () => {
-                  toggleSraechPanel()
-                  moreVisible = false
-                }
-              "
-              >查找替换</PopoverMenuItem
-            >
-          </template>
-          <IconMore class="handler-item" />
-        </Popover>
-        <IconComment class="handler-item" :class="{ active: showNotesPanel }" v-tooltip="'批注面板'" @click="toggleNotesPanel()" />
-        <IconMoveOne class="handler-item" :class="{ active: showSelectPanel }" v-tooltip="'选择窗格'" @click="toggleSelectPanel()" />
-        <IconSearch class="handler-item" :class="{ active: showSearchPanel }" v-tooltip="'查找/替换（Ctrl + F）'" @click="toggleSraechPanel()" />
+      <div class="leftHandler-item" :class="{ disable: !canUndo }" v-tooltip="'撤销（Ctrl + Z）'" @click="undo()">
+        <img src="./imgs/cx.png" alt="" />
+        <div>撤销</div>
+      </div>
+      <div class="leftHandler-item" :class="{ disable: !canRedo }" v-tooltip="'恢复（Ctrl + Y）'" @click="redo()">
+        <img src="./imgs/hf.png" alt="" />
+        <div>恢复</div>
+      </div>
+      <div class="line"></div>
+      <div class="leftHandler-item" :class="{ active: showNotesPanel }" v-tooltip="'批注'" @click="toggleNotesPanel()">
+        <img src="./imgs/pz.png" alt="" />
+        <div>批注</div>
+      </div>
+      <div class="leftHandler-item" :class="{ active: showSelectPanel }" v-tooltip="'选择'" @click="toggleSelectPanel()">
+        <img src="./imgs/xz.png" alt="" />
+        <div>选择</div>
+      </div>
+      <div class="leftHandler-item" :class="{ active: showSearchPanel }" v-tooltip="'查找/替换（Ctrl + F）'" @click="toggleSraechPanel()">
+        <img src="./imgs/cz.png" alt="" />
+        <div>查找</div>
       </div>
+      <div class="line"></div>
+      <Popover trigger="click" center>
+        <template #content>
+          <PopoverMenuItem @click="enterScreeningFromStart()">从头开始</PopoverMenuItem>
+          <PopoverMenuItem @click="enterScreening()">从当前页开始</PopoverMenuItem>
+        </template>
+        <div class="arrow-btn">
+          <img src="./imgs/bf.png" alt="" />
+          <div>播放</div>
+        </div>
+      </Popover>
     </div>
 
     <div class="add-element-handler">
-      <div class="handler-item group-btn" v-tooltip="'插入文字'">
-        <IconFontSize class="icon" :class="{ active: creatingElement?.type === 'text' }" @click="drawText()" />
-
-        <Popover trigger="click" v-model:value="textTypeSelectVisible" style="height: 100%" :offset="10">
+      <FileInput @change="files => insertImageElement(files)">
+        <div class="handler-item">
+          <img class="itemImg" src="./imgs/sctp.png" alt="" />
+          <div class="tit">上传图片</div>
+        </div>
+      </FileInput>
+      <ElUpload
+        action=""
+        :show-file-list="false"
+        accept=".mp4,.avi,.flv,.mp3,.wav,.m4a"
+        :http-request="
+          (fileData: any) => {
+            handleUpload(fileData)
+            return undefined
+          }
+        "
+      >
+        <div class="handler-item">
+          <img class="itemImg" src="./imgs/scysp.png" alt="" />
+          <div class="tit">上传音视频</div>
+        </div>
+      </ElUpload>
+      <div class="handler-item" @click="cloudCoachVisible = true">
+        <img class="itemImg" src="./imgs/yp.png" alt="" />
+        <div class="tit">乐谱</div>
+      </div>
+      <div class="handler-item">
+        <img class="itemImg" src="./imgs/jzlx.png" alt="" />
+        <div class="tit">节奏练习</div>
+      </div>
+      <div class="handler-item">
+        <img class="itemImg" src="./imgs/tylx.png" alt="" />
+        <div class="tit">听音练习</div>
+      </div>
+      <div class="handler-item">
+        <img class="itemImg" src="./imgs/zyk.png" alt="" />
+        <div class="tit">资源库</div>
+      </div>
+      <div class="handler-item" @click="drawText()" :class="{ active: creatingElement?.type === 'text' }">
+        <img class="itemImg" src="./imgs/wz.png" alt="" />
+        <Popover trigger="click" v-model:value="textTypeSelectVisible" :offset="10">
           <template #content>
             <PopoverMenuItem
               center
@@ -73,18 +99,20 @@
               ><IconTextRotationDown /> 竖向文本框</PopoverMenuItem
             >
           </template>
-          <IconDown class="arrow" />
+          <div class="charTit tit">
+            <div>文字</div>
+            <img src="./imgs/jiantou.png" alt="" />
+          </div>
         </Popover>
       </div>
-      <div class="handler-item group-btn" v-tooltip="'插入形状'" :offset="10">
-        <Popover trigger="click" style="height: 100%" v-model:value="shapePoolVisible" :offset="10">
+      <div class="handler-item" :class="{ active: creatingCustomShape || creatingElement?.type === 'shape' }" @click="shapePoolVisible = true">
+        <Popover trigger="click" v-model:value="shapePoolVisible" :offset="10">
           <template #content>
             <ShapePool @select="shape => drawShape(shape)" />
           </template>
-          <IconGraphicDesign class="icon" :class="{ active: creatingCustomShape || creatingElement?.type === 'shape' }" />
+          <img class="itemImg" src="./imgs/xz1.png" alt="" />
         </Popover>
-
-        <Popover trigger="click" v-model:value="shapeMenuVisible" style="height: 100%" :offset="10">
+        <Popover trigger="click" v-model:value="shapeMenuVisible" :offset="10" @click.stop>
           <template #content>
             <PopoverMenuItem
               center
@@ -97,71 +125,76 @@
               >自由绘制</PopoverMenuItem
             >
           </template>
-          <IconDown class="arrow" />
+          <div class="charTit tit">
+            <div>形状</div>
+            <img src="./imgs/jiantou.png" alt="" />
+          </div>
+        </Popover>
+      </div>
+      <div class="handler-item" :class="{ active: creatingElement?.type === 'line' }" @click="linePoolVisible = true">
+        <img class="itemImg" src="./imgs/xt.png" alt="" />
+        <Popover trigger="click" v-model:value="linePoolVisible" :offset="10" @click.stop>
+          <template #content>
+            <LinePool @select="line => drawLine(line)" />
+          </template>
+          <div class="tit">线条</div>
+        </Popover>
+      </div>
+      <div class="handler-item" @click="moreToolsVisible = true">
+        <img class="itemImg" src="./imgs/gdgj.png" alt="" />
+        <Popover trigger="click" v-model:value="moreToolsVisible" :offset="10" @click.stop>
+          <template #content>
+            <PopoverMenuItem>
+              <Popover trigger="click" v-model:value="chartPoolVisible" :offset="10">
+                <template #content>
+                  <ChartPool
+                    @select="
+                      chart => {
+                        createChartElement(chart)
+                        chartPoolVisible = false
+                      }
+                    "
+                  />
+                </template>
+                <div class="menuItem">
+                  <img src="./imgs/tb.png" alt="" />
+                  <div class="tit">图表</div>
+                </div>
+              </Popover>
+            </PopoverMenuItem>
+            <PopoverMenuItem>
+              <Popover trigger="click" v-model:value="tableGeneratorVisible" :offset="10">
+                <template #content>
+                  <TableGenerator
+                    @close="tableGeneratorVisible = false"
+                    @insert="
+                      ({ row, col }) => {
+                        createTableElement(row, col)
+                        tableGeneratorVisible = false
+                      }
+                    "
+                  />
+                </template>
+                <div class="menuItem">
+                  <img src="./imgs/bg.png" alt="" />
+                  <div class="tit">表格</div>
+                </div>
+              </Popover>
+            </PopoverMenuItem>
+            <PopoverMenuItem>
+              <div class="menuItem" @click="latexEditorVisible = true">
+                <img src="./imgs/gs.png" alt="" />
+                <div class="tit">公式</div>
+              </div>
+            </PopoverMenuItem>
+          </template>
+          <div class="tit">更多工具</div>
         </Popover>
       </div>
-      <FileInput @change="files => insertImageElement(files)">
-        <IconPicture class="handler-item" v-tooltip="'插入图片'" />
-      </FileInput>
-      <Popover trigger="click" v-model:value="linePoolVisible" :offset="10">
-        <template #content>
-          <LinePool @select="line => drawLine(line)" />
-        </template>
-        <IconConnection class="handler-item" :class="{ active: creatingElement?.type === 'line' }" v-tooltip="'插入线条'" />
-      </Popover>
-      <Popover trigger="click" v-model:value="chartPoolVisible" :offset="10">
-        <template #content>
-          <ChartPool
-            @select="
-              chart => {
-                createChartElement(chart)
-                chartPoolVisible = false
-              }
-            "
-          />
-        </template>
-        <IconChartProportion class="handler-item" v-tooltip="'插入图表'" />
-      </Popover>
-      <Popover trigger="click" v-model:value="tableGeneratorVisible" :offset="10">
-        <template #content>
-          <TableGenerator
-            @close="tableGeneratorVisible = false"
-            @insert="
-              ({ row, col }) => {
-                createTableElement(row, col)
-                tableGeneratorVisible = false
-              }
-            "
-          />
-        </template>
-        <IconInsertTable class="handler-item" v-tooltip="'插入表格'" />
-      </Popover>
-      <IconFormula class="handler-item" v-tooltip="'插入公式'" @click="latexEditorVisible = true" />
-      <Popover trigger="click" v-model:value="mediaInputVisible" :offset="10">
-        <template #content>
-          <MediaInput
-            @close="mediaInputVisible = false"
-            @insertVideo="
-              src => {
-                createVideoElement(src)
-                mediaInputVisible = false
-              }
-            "
-            @insertAudio="
-              src => {
-                createAudioElement(src)
-                mediaInputVisible = false
-              }
-            "
-          />
-        </template>
-        <IconVideoTwo class="handler-item" v-tooltip="'插入音视频'" />
-      </Popover>
-      <IconLinkCloud class="handler-item" v-tooltip="'插入云教练'" @click="cloudCoachVisible = true" />
     </div>
 
     <div class="right-handler">
-      <IconMinus class="handler-item viewport-size" v-tooltip="'画布缩小（Ctrl + -）'" @click="scaleCanvas('-')" />
+      <IconMinus class="rightHandler-item" v-tooltip="'画布缩小（Ctrl + -）'" @click="scaleCanvas('-')" />
       <Popover trigger="click" v-model:value="canvasScaleVisible">
         <template #content>
           <PopoverMenuItem center v-for="item in canvasScalePresetList" :key="item" @click="applyCanvasPresetScale(item)"
@@ -169,10 +202,10 @@
           >
           <PopoverMenuItem center @click="resetCanvas()">适应屏幕</PopoverMenuItem>
         </template>
-        <span class="text">{{ canvasScalePercentage }}</span>
+        <div class="text" :class="{ canvasScaleVisible: canvasScaleVisible }">{{ canvasScalePercentage }}</div>
       </Popover>
-      <IconPlus class="handler-item viewport-size" v-tooltip="'画布放大（Ctrl + =）'" @click="scaleCanvas('+')" />
-      <IconFullScreen class="handler-item viewport-size-adaptation" v-tooltip="'适应屏幕（Ctrl + 0）'" @click="resetCanvas()" />
+      <IconPlus class="rightHandler-item" v-tooltip="'画布放大（Ctrl + =）'" @click="scaleCanvas('+')" />
+      <IconFullScreen class="rightHandler-item resetCanvas" v-tooltip="'适应屏幕（Ctrl + 0）'" @click="resetCanvas()" />
     </div>
 
     <Modal v-model:visible="latexEditorVisible" :width="880">
@@ -202,21 +235,21 @@ import type { LinePoolItem } from "@/configs/lines"
 import useScaleCanvas from "@/hooks/useScaleCanvas"
 import useHistorySnapshot from "@/hooks/useHistorySnapshot"
 import useCreateElement from "@/hooks/useCreateElement"
+import useScreening from "@/hooks/useScreening"
 
 import ShapePool from "./ShapePool.vue"
 import LinePool from "./LinePool.vue"
 import ChartPool from "./ChartPool.vue"
 import TableGenerator from "./TableGenerator.vue"
-import MediaInput from "./MediaInput.vue"
 import LaTeXEditor from "@/components/LaTeXEditor/index.vue"
 import FileInput from "@/components/FileInput.vue"
 import Modal from "@/components/Modal.vue"
-import Divider from "@/components/Divider.vue"
 import Popover from "@/components/Popover.vue"
 import PopoverMenuItem from "@/components/PopoverMenuItem.vue"
+import { ElUpload, ElMessage, type UploadRequestOptions } from "element-plus"
 import cloudCoachList from "@/views/components/element/cloudCoachElement/cloudCoachList"
 import { YJL_URL_API } from "@/config/index"
-import { getToken } from "@/libs/auth"
+import fileUpload from "@/utils/oss-file-upload"
 
 const mainStore = useMainStore()
 const { creatingElement, creatingCustomShape, showSelectPanel, showSearchPanel, showNotesPanel } = storeToRefs(mainStore)
@@ -229,6 +262,8 @@ const { scaleCanvas, setCanvasScalePercentage, resetCanvas, canvasScalePercentag
 const canvasScalePresetList = [200, 150, 125, 100, 75, 50]
 const canvasScaleVisible = ref(false)
 
+const { enterScreening, enterScreeningFromStart } = useScreening()
+
 const applyCanvasPresetScale = (value: number) => {
   setCanvasScalePercentage(value)
   canvasScaleVisible.value = false
@@ -254,12 +289,31 @@ const shapePoolVisible = ref(false)
 const linePoolVisible = ref(false)
 const chartPoolVisible = ref(false)
 const tableGeneratorVisible = ref(false)
-const mediaInputVisible = ref(false)
 const latexEditorVisible = ref(false)
 const textTypeSelectVisible = ref(false)
 const shapeMenuVisible = ref(false)
-const moreVisible = ref(false)
 const cloudCoachVisible = ref(false)
+const moreToolsVisible = ref(false)
+
+// 音视频
+function handleUpload(fileData: UploadRequestOptions) {
+  const type = /\.(mp3|wav|m4a)$/i.test(fileData.file.name) ? "audio" : "video"
+  fileUpload(fileData.file.name, fileData.file)
+    .then(res => {
+      if (type === "audio") {
+        createAudioElement(res)
+      } else {
+        createVideoElement(res)
+      }
+    })
+    .catch(() => {
+      ElMessage({
+        showClose: true,
+        message: "上传失败!",
+        type: "error"
+      })
+    })
+}
 
 // 处理云教练创建
 function handleCloudCoach(id: string) {
@@ -318,21 +372,71 @@ const toggleNotesPanel = () => {
 <style lang="scss" scoped>
 .canvas-tool {
   position: relative;
-  border-bottom: 1px solid $borderColor;
+  border-bottom: 1px solid #dedede;
   background-color: #fff;
   display: flex;
   justify-content: space-between;
-  padding: 0 10px;
-  font-size: 13px;
+  padding: 0 24px;
   user-select: none;
 }
-.left-handler,
-.more {
+.left-handler {
+  margin-left: -6px;
   display: flex;
   align-items: center;
-}
-.more-icon {
-  display: none;
+  .leftHandler-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-right: 8px;
+    padding: 4px 6px;
+    cursor: pointer;
+    &.disable {
+      opacity: 0.5;
+    }
+    &.active {
+      background: rgba(34, 71, 133, 0.08);
+      border-radius: 6px;
+    }
+    & > img {
+      width: 20px;
+      height: 20px;
+    }
+    & > div {
+      margin-top: 4px;
+      font-weight: 400;
+      font-size: 12px;
+      color: #131415;
+      line-height: 17px;
+    }
+  }
+  .line {
+    margin-left: 6px;
+    margin-right: 14px;
+    width: 1px;
+    height: calc(100% - 20px);
+    background-color: #dedede;
+  }
+  .arrow-btn {
+    margin-left: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 88px;
+    height: 36px;
+    background: linear-gradient(312deg, #1b7af8 0%, #3cbbff 100%);
+    border-radius: 6px;
+    font-weight: 600;
+    font-size: 14px;
+    color: #ffffff;
+    line-height: 20px;
+    cursor: pointer;
+    & > img {
+      margin-right: 8px;
+      width: 12px;
+      height: 14px;
+    }
+  }
 }
 .add-element-handler {
   position: absolute;
@@ -340,112 +444,85 @@ const toggleNotesPanel = () => {
   left: 50%;
   transform: translate(-50%, -50%);
   display: flex;
-
   .handler-item {
-    width: 32px;
-
-    &:not(.group-btn):hover {
-      background-color: #f1f1f1;
-    }
-
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    width: 72px;
+    height: 53px;
+    &:hover,
     &.active {
-      color: $themeColor;
+      background: rgba(34, 71, 133, 0.08);
+      border-radius: 6px;
     }
-
-    &.group-btn {
-      width: auto;
-      margin-right: 5px;
-
+    .itemImg {
+      width: 20px;
+      height: 20px;
+    }
+    .tit {
+      margin-top: 4px;
+      font-weight: 400;
+      font-size: 12px;
+      color: #131415;
+      line-height: 17px;
+    }
+    .charTit {
+      display: flex;
+      align-items: center;
+      padding: 0 6px;
+      border-radius: 4px;
       &:hover {
-        background-color: #f3f3f3;
-      }
-
-      .icon,
-      .arrow {
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      .icon {
-        width: 26px;
-        padding: 0 2px;
-
-        &:hover {
-          background-color: #e9e9e9;
-        }
-        &.active {
-          color: $themeColor;
-        }
+        background: rgba(34, 71, 133, 0.1);
       }
-      .arrow {
-        font-size: 12px;
-
-        &:hover {
-          background-color: #e9e9e9;
-        }
+      > img {
+        margin-left: 4px;
+        width: 7px;
+        height: 4px;
       }
     }
   }
 }
-.handler-item {
-  height: 30px;
-  font-size: 14px;
-  margin: 0 2px;
+.menuItem {
   display: flex;
-  justify-content: center;
   align-items: center;
-  border-radius: $borderRadius;
-  overflow: hidden;
-  cursor: pointer;
-
-  &.disable {
-    opacity: 0.5;
+  & > img {
+    width: 20px;
+    height: 20px;
   }
-}
-.left-handler,
-.right-handler {
-  .handler-item {
-    padding: 0 8px;
-
-    &.active,
-    &:not(.disable):hover {
-      background-color: #f1f1f1;
-    }
+  & > .tit {
+    margin-left: 16px;
+    font-weight: 400;
+    font-size: 14px;
+    color: #333333;
   }
 }
 .right-handler {
   display: flex;
   align-items: center;
-
   .text {
-    display: inline-block;
-    width: 40px;
+    margin: 0 8px;
+    width: 57px;
+    height: 32px;
+    line-height: 32px;
     text-align: center;
     cursor: pointer;
+    &.canvasScaleVisible {
+      border-radius: 6px;
+      background-color: rgba(34, 71, 133, 0.08);
+    }
   }
-
-  .viewport-size {
-    font-size: 13px;
-  }
-}
-
-@media screen and (width <= 1200px) {
-  .right-handler .text {
-    display: none;
-  }
-  .more > .handler-item {
-    display: none;
-  }
-  .more-icon {
-    display: block;
+  .rightHandler-item {
+    font-size: 20px;
+    color: #131415;
+    cursor: pointer;
+    &:hover {
+      opacity: 0.5;
+    }
   }
-}
-@media screen and (width <= 1000px) {
-  .left-handler,
-  .right-handler {
-    display: none;
+  .resetCanvas {
+    margin-left: 20px;
   }
 }
 </style>