jvs-ppt-ui 0.0.14 → 0.0.16

package/src/components/canvas/elements/CanvasTextElement.vue

@@ -159,6 +159,8 @@ function handleMaskMouseDown(e: MouseEvent) {
   <div
     ref="wrapperRef"
     class="text-reflection-wrapper"
+    @mousemove="emit('mousemove', $event)"
+    @mouseleave="emit('mouseleave', $event)"
     :style="{
       position: 'relative',
       width: (element.style?.writingMode === 'vertical-rl' || element.style?.writingMode === 'vertical-lr') ? 'auto' : '100%',
@@ -167,6 +169,7 @@ function handleMaskMouseDown(e: MouseEvent) {
       writingMode: element.style?.writingMode || 'horizontal-tb',
       display: 'flex',
       flexDirection: 'column',
+      cursor: isReadonly ? 'default' : 'move',
       justifyContent: (element.style?.verticalAlign === 'bottom' || element.style?.verticalAlign === 'down' || element.vAlign === 'down')
         ? 'flex-end'
         : ((element.style?.verticalAlign === 'top' || element.style?.verticalAlign === 'up' || element.vAlign === 'up')
@@ -197,8 +200,6 @@ function handleMaskMouseDown(e: MouseEvent) {
       ref="editableRef"
       :id="`editable-${element.id}`"
       :contenteditable="isTable(element) || element.latex ? 'false' : (isTextSelectable ? 'true' : 'false')"
-      @mousedown="isTextSelectable ? $event.stopPropagation() : null"
-      @click="isTextSelectable ? $event.stopPropagation() : null"
       @focusin="emit('focusin')"
       @focusout="emit('focusout', $event)"
       @input="emit('input', $event)"
@@ -243,7 +244,7 @@ function handleMaskMouseDown(e: MouseEvent) {
         textAlignLast: (element.style?.textAlign === 'distribute' ? 'justify' : 'auto') as any,
         textJustify: (element.style?.textAlign === 'distribute' ? 'inter-character' : 'auto') as any,
         whiteSpace: element.style?.whiteSpace || 'normal',
-        cursor: element.latex ? 'move' : (isTable(element) ? (isTextSelectable ? 'text' : 'move') : (isTextSelectable ? 'text' : 'default')),
+        cursor: isReadonly ? 'default' : (element.latex ? 'move' : (isTable(element) ? (isTextSelectable ? 'text' : 'move') : undefined)),
         userSelect: (isTable(element) || element.latex) ? (isTextPaintActive ? 'text' : 'none') : (isTextSelectable ? 'text' : 'none'),
         display: element.content && element.content.includes('License') ? 'inline-block' : 'block',
         writingMode: element.style?.writingMode || 'horizontal-tb',

package/src/components/sidebar/common/SidebarAlignGroup.vue

@@ -25,70 +25,124 @@ const isDistributeEnabled = computed(() => {
 </script>
 
 <template>
-  <div class="control-group sidebar-align-group"
-    style="padding: 0 16px; margin-top: 12px; margin-bottom: 8px; border-bottom: 1px solid #EEEFF0; padding-bottom: 12px;">
-    <div style="display: flex; gap: 4px; align-items: center; justify-content: space-between;">
-      <div class="grid-btn" title="左对齐" @click="emit('alignLeft')"
-        style="flex: 1; display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 4px; background: transparent; cursor: pointer; color: var(--text-primary);">
-        <svg class="icon" style="width: 16px; height: 16px;">
-          <use xlink:href="#icon-zuoduiqi"></use>
+  <div class="control-group sidebar-align-group">
+    <div class="align-buttons-row">
+      <!-- Align Left -->
+      <button type="button" class="align-tool-btn" title="左对齐" @click="emit('alignLeft')">
+        <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
+          <rect x="1" y="2" width="1.5" height="12" rx="0.75" />
+          <rect x="4.5" y="4" width="8" height="3" rx="1" />
+          <rect x="4.5" y="9" width="5" height="3" rx="1" />
         </svg>
-      </div>
-      <div class="grid-btn" title="水平居中对齐" @click="emit('alignCenter')"
-        style="flex: 1; display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 4px; background: transparent; cursor: pointer; color: var(--text-primary);">
-        <svg class="icon" style="width: 16px; height: 16px;">
-          <use xlink:href="#icon-zuoyoujuzhongduiqi"></use>
+      </button>
+
+      <!-- Align Center H -->
+      <button type="button" class="align-tool-btn" title="水平居中对齐" @click="emit('alignCenter')">
+        <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
+          <rect x="7.25" y="2" width="1.5" height="12" rx="0.75" />
+          <rect x="3" y="4" width="10" height="3" rx="1" />
+          <rect x="4.5" y="9" width="7" height="3" rx="1" />
         </svg>
-      </div>
-      <div class="grid-btn" title="右对齐" @click="emit('alignRight')"
-        style="flex: 1; display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 4px; background: transparent; cursor: pointer; color: var(--text-primary);">
-        <svg class="icon" style="width: 16px; height: 16px;">
-          <use xlink:href="#icon-youduiqi1"></use>
+      </button>
+
+      <!-- Align Right -->
+      <button type="button" class="align-tool-btn" title="右对齐" @click="emit('alignRight')">
+        <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
+          <rect x="13.5" y="2" width="1.5" height="12" rx="0.75" />
+          <rect x="3.5" y="4" width="8" height="3" rx="1" />
+          <rect x="6.5" y="9" width="5" height="3" rx="1" />
         </svg>
-      </div>
-      <div class="grid-btn" title="顶对齐" @click="emit('alignTop')"
-        style="flex: 1; display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 4px; background: transparent; cursor: pointer; color: var(--text-primary);">
-        <svg class="icon" style="width: 16px; height: 16px;">
-          <use xlink:href="#icon-dingduiqi"></use>
+      </button>
+
+      <!-- Align Top -->
+      <button type="button" class="align-tool-btn" title="顶对齐" @click="emit('alignTop')">
+        <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
+          <rect x="2" y="1" width="12" height="1.5" rx="0.75" />
+          <rect x="4" y="4.5" width="3" height="8" rx="1" />
+          <rect x="9" y="4.5" width="3" height="5" rx="1" />
         </svg>
-      </div>
-      <div class="grid-btn" title="垂直居中对齐" @click="emit('alignMiddle')"
-        style="flex: 1; display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 4px; background: transparent; cursor: pointer; color: var(--text-primary);">
-        <svg class="icon" style="width: 16px; height: 16px;">
-          <use xlink:href="#icon-shangxiajuzhongduiqi"></use>
+      </button>
+
+      <!-- Align Middle V -->
+      <button type="button" class="align-tool-btn" title="垂直居中对齐" @click="emit('alignMiddle')">
+        <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
+          <rect x="2" y="7.25" width="12" height="1.5" rx="0.75" />
+          <rect x="4" y="3" width="3" height="10" rx="1" />
+          <rect x="9" y="4.5" width="3" height="7" rx="1" />
         </svg>
-      </div>
-      <div class="grid-btn" title="底对齐" @click="emit('alignBottom')"
-        style="flex: 1; display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 4px; background: transparent; cursor: pointer; color: var(--text-primary);">
-        <svg class="icon" style="width: 16px; height: 16px;">
-          <use xlink:href="#icon-diduiqi"></use>
+      </button>
+
+      <!-- Align Bottom -->
+      <button type="button" class="align-tool-btn" title="底对齐" @click="emit('alignBottom')">
+        <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
+          <rect x="2" y="13.5" width="12" height="1.5" rx="0.75" />
+          <rect x="4" y="3.5" width="3" height="8" rx="1" />
+          <rect x="9" y="6.5" width="3" height="5" rx="1" />
         </svg>
-      </div>
-      <div class="grid-btn" title="水平均布" :class="{ disabled: !isDistributeEnabled }"
-        @click="isDistributeEnabled && emit('distributeHorizontally')"
-        style="flex: 1; display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 4px; background: transparent; cursor: pointer; color: var(--text-primary);">
-        <svg class="icon" style="width: 16px; height: 16px;">
-          <use xlink:href="#icon-shuipingpingjunfenbu"></use>
+      </button>
+
+      <!-- Distribute Horizontally -->
+      <button type="button" class="align-tool-btn" title="水平均布" :class="{ disabled: !isDistributeEnabled }"
+        @click="isDistributeEnabled && emit('distributeHorizontally')">
+        <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
+          <rect x="1" y="2" width="1.5" height="12" rx="0.75" />
+          <rect x="13.5" y="2" width="1.5" height="12" rx="0.75" />
+          <rect x="5.5" y="4.5" width="5" height="7" rx="1" />
         </svg>
-      </div>
-      <div class="grid-btn" title="垂直均布" :class="{ disabled: !isDistributeEnabled }"
-        @click="isDistributeEnabled && emit('distributeVertically')"
-        style="flex: 1; display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 4px; background: transparent; cursor: pointer; color: var(--text-primary);">
-        <svg class="icon" style="width: 16px; height: 16px;">
-          <use xlink:href="#icon-chuizhipingjunfenbu"></use>
+      </button>
+
+      <!-- Distribute Vertically -->
+      <button type="button" class="align-tool-btn" title="垂直均布" :class="{ disabled: !isDistributeEnabled }"
+        @click="isDistributeEnabled && emit('distributeVertically')">
+        <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
+          <rect x="2" y="1" width="12" height="1.5" rx="0.75" />
+          <rect x="2" y="13.5" width="12" height="1.5" rx="0.75" />
+          <rect x="4.5" y="5.5" width="7" height="5" rx="1" />
         </svg>
-      </div>
+      </button>
     </div>
   </div>
 </template>
 
 <style scoped>
-.grid-btn:hover:not(.disabled) {
-  background-color: var(--hover-bg, #f1f5f9) !important;
+.sidebar-align-group {
+  padding: 0 16px;
+  margin-top: 10px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid #f1f5f9;
+  padding-bottom: 12px;
 }
-.grid-btn.disabled {
-  opacity: 0.35;
-  cursor: not-allowed !important;
+
+.align-buttons-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 2px;
+}
+
+.align-tool-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  border-radius: 6px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: #475569;
+  padding: 0;
+  transition: all 0.15s ease;
+}
+
+.align-tool-btn:hover:not(.disabled) {
+  background-color: #f1f5f9;
+  color: #1e293b;
+}
+
+.align-tool-btn.disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
   pointer-events: none;
 }
 </style>