update

src/components/CheckboxButton.vue

@@ -0,0 +1,46 @@
+<template>
+  <button class="checkbox-button" :class="{ 'checked': checked }">
+    <slot></slot>
+  </button>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'checkbox-button',
+  props: {
+    checked: {
+      type: Boolean,
+      default: false,
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.checkbox-button {
+  outline: 0;
+  background-color: #fff;
+  border: 1px solid #d9d9d9;
+  font-size: 12px;
+  padding: 0 15px;
+  height: 32px;
+  transition: all 0.3s;
+  text-align: center;
+  cursor: pointer;
+
+  &:hover {
+    color: $themeColor;
+  }
+
+  &.checked {
+    color: #fff;
+    background-color: $themeColor;
+    border-color: $themeColor;
+
+    &:hover {
+      background: rgba($color: $themeColor, $alpha: .9);
+      border-color: rgba($color: $themeColor, $alpha: .9);
+    }
+  }
+}
+</style>

src/components/CheckboxButtonGroup.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="checkbox-button-group">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'checkbox-button-group',
+}
+</script>
+
+<style lang="scss" scoped>
+.checkbox-button-group {
+  display: flex;
+  align-items: center;
+
+  ::v-deep .checkbox-button {
+    border-radius: 0;
+    border-left-width: 0;
+    border-right-width: 0;
+    display: inline-block;
+
+    & + .checkbox-button {
+      border-left-width: 1px;
+    }
+
+    &:first-child {
+      border-top-left-radius: $borderRadius;
+      border-bottom-left-radius: $borderRadius;
+      border-left-width: 1px;
+    }
+
+    &:last-child {
+      border-top-right-radius: $borderRadius;
+      border-bottom-right-radius: $borderRadius;
+      border-right-width: 1px;
+    }
+  }
+}
+</style>

src/views/Editor/Canvas/Operate/RotateHandler.vue

@@ -2,7 +2,7 @@
   <div class="rotate-handler"></div>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: 'rotate-handler',
 }

src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue

@@ -49,20 +49,20 @@
       </Popover>
     </ButtonGroup>
 
-    <ButtonGroup class="row">
+    <CheckboxButtonGroup class="row">
-      <Button style="flex: 1;" :type="richTextAttrs.bold ? 'primary' : 'default'"><BoldOutlined /></Button>
+      <CheckboxButton style="flex: 1;" :checked="richTextAttrs.bold"><BoldOutlined /></CheckboxButton>
-      <Button style="flex: 1;" :type="richTextAttrs.em ? 'primary' : 'default'"><ItalicOutlined /></Button>
+      <CheckboxButton style="flex: 1;" :checked="richTextAttrs.em"><ItalicOutlined /></CheckboxButton>
-      <Button style="flex: 1;" :type="richTextAttrs.underline ? 'primary' : 'default'"><UnderlineOutlined /></Button>
+      <CheckboxButton style="flex: 1;" :checked="richTextAttrs.underline"><UnderlineOutlined /></CheckboxButton>
-      <Button style="flex: 1;" :type="richTextAttrs.strikethrough ? 'primary' : 'default'"><StrikethroughOutlined /></Button>
+      <CheckboxButton style="flex: 1;" :checked="richTextAttrs.strikethrough"><StrikethroughOutlined /></CheckboxButton>
-    </ButtonGroup>
+    </CheckboxButtonGroup>
 
-    <ButtonGroup class="row">
+    <CheckboxButtonGroup class="row">
-      <Button style="flex: 1;" :type="richTextAttrs.superscript ? 'primary' : 'default'">上</Button>
+      <CheckboxButton style="flex: 1;" :checked="richTextAttrs.superscript">上</CheckboxButton>
-      <Button style="flex: 1;" :type="richTextAttrs.subscript ? 'primary' : 'default'">下</Button>
+      <CheckboxButton style="flex: 1;" :checked="richTextAttrs.subscript">下</CheckboxButton>
-      <Button style="flex: 1;" :type="richTextAttrs.code ? 'primary' : 'default'">码</Button>
+      <CheckboxButton style="flex: 1;" :checked="richTextAttrs.code">码</CheckboxButton>
-      <Button style="flex: 1;" :type="richTextAttrs.blockquote ? 'primary' : 'default'">引</Button>
+      <CheckboxButton style="flex: 1;" :checked="richTextAttrs.blockquote">引</CheckboxButton>
-      <Button style="flex: 1;">清</Button>
+      <CheckboxButton style="flex: 1;">清</CheckboxButton>
-    </ButtonGroup>
+    </CheckboxButtonGroup>
 
     <Divider />
 
@@ -72,10 +72,10 @@
       <RadioButton value="right" style="flex: 1;"><AlignRightOutlined /></RadioButton>
     </RadioGroup>
 
-    <ButtonGroup class="row">
+    <CheckboxButtonGroup class="row">
-      <Button style="flex: 1;" :type="richTextAttrs.bulletList ? 'primary' : 'default'"><UnorderedListOutlined /></Button>
+      <CheckboxButton style="flex: 1;" :checked="richTextAttrs.bulletList"><UnorderedListOutlined /></CheckboxButton>
-      <Button style="flex: 1;" :type="richTextAttrs.orderedList ? 'primary' : 'default'"><OrderedListOutlined /></Button>
+      <CheckboxButton style="flex: 1;" :checked="richTextAttrs.orderedList"><OrderedListOutlined /></CheckboxButton>
-    </ButtonGroup>
+    </CheckboxButtonGroup>
 
     <Divider />
 
@@ -121,6 +121,8 @@ import ElementOpacity from '../common/ElementOpacity.vue'
 import ElementOutline from '../common/ElementOutline.vue'
 import ElementShadow from '../common/ElementShadow.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
+import CheckboxButton from '@/components/CheckboxButton.vue'
+import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue'
 import { Select, Input, Button, Divider, Popover, Radio } from 'ant-design-vue'
 import {
   FontColorsOutlined,
@@ -142,7 +144,12 @@ import {
 export default defineComponent({
   name: 'text-style-panel',
   components: {
+    ElementOpacity,
+    ElementOutline,
+    ElementShadow,
     ColorPicker,
+    CheckboxButton,
+    CheckboxButtonGroup,
     Select,
     SelectOption: Select.Option,
     InputGroup: Input.Group,
@@ -166,9 +173,6 @@ export default defineComponent({
     UnorderedListOutlined,
     ColumnHeightOutlined,
     ColumnWidthOutlined,
-    ElementOpacity,
-    ElementOutline,
-    ElementShadow,
   },
   setup() {
     const store = useStore<State>()