Upload 339 files

.gitattributes

@@ -33,3 +33,25 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+frontend/src/assets/fonts/AlibabaPuHuiTi.woff2 filter=lfs diff=lfs merge=lfs -text
+frontend/src/assets/fonts/CangerXiaowanzi.woff2 filter=lfs diff=lfs merge=lfs -text
+frontend/src/assets/fonts/DeYiHei.woff2 filter=lfs diff=lfs merge=lfs -text
+frontend/src/assets/fonts/FangZhengFangSong.woff2 filter=lfs diff=lfs merge=lfs -text
+frontend/src/assets/fonts/FangZhengHeiTi.woff2 filter=lfs diff=lfs merge=lfs -text
+frontend/src/assets/fonts/FangZhengKaiTi.woff2 filter=lfs diff=lfs merge=lfs -text
+frontend/src/assets/fonts/FangZhengShuSong.woff2 filter=lfs diff=lfs merge=lfs -text
+frontend/src/assets/fonts/FengguangMingrui.woff2 filter=lfs diff=lfs merge=lfs -text
+frontend/src/assets/fonts/LXGWWenKai.woff2 filter=lfs diff=lfs merge=lfs -text
+frontend/src/assets/fonts/MiSans.woff2 filter=lfs diff=lfs merge=lfs -text
+frontend/src/assets/fonts/RuiziZhenyan.woff2 filter=lfs diff=lfs merge=lfs -text
+frontend/src/assets/fonts/ShetuModernSquare.woff2 filter=lfs diff=lfs merge=lfs -text
+frontend/src/assets/fonts/SourceHanSans.woff2 filter=lfs diff=lfs merge=lfs -text
+frontend/src/assets/fonts/SourceHanSerif.woff2 filter=lfs diff=lfs merge=lfs -text
+frontend/src/assets/fonts/SucaiJishiCoolSquare.woff2 filter=lfs diff=lfs merge=lfs -text
+frontend/src/assets/fonts/SucaiJishiKangkang.woff2 filter=lfs diff=lfs merge=lfs -text
+frontend/src/assets/fonts/TuniuRounded.woff2 filter=lfs diff=lfs merge=lfs -text
+frontend/src/assets/fonts/WenDingPLKaiTi.woff2 filter=lfs diff=lfs merge=lfs -text
+frontend/src/assets/fonts/YousheTitleBlack.woff2 filter=lfs diff=lfs merge=lfs -text
+frontend/src/assets/fonts/ZcoolHappy.woff2 filter=lfs diff=lfs merge=lfs -text
+frontend/src/assets/fonts/ZhuQueFangSong.woff2 filter=lfs diff=lfs merge=lfs -text
+frontend/src/assets/fonts/ZizhiQuXiMai.woff2 filter=lfs diff=lfs merge=lfs -text

frontend/src/App.vue

@@ -0,0 +1,137 @@
+<template>
+  <div id="app">
+    <!-- 未登录状态显示登录页面 -->
+    <Login v-if="!authStore.isLoggedIn" />
+    
+    <!-- 已登录但数据加载中 -->
+    <FullscreenSpin v-else-if="!dataLoaded" tip="数据加载中，请稍等..." loading :mask="false" />
+    
+    <!-- 已登录且数据已加载 -->
+    <template v-else>
+      <Screen v-if="screening" />
+      <Editor v-else-if="_isPC" />
+      <Mobile v-else />
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useScreenStore, useMainStore, useSnapshotStore, useSlidesStore, useAuthStore } from '@/store'
+import { LOCALSTORAGE_KEY_DISCARDED_DB } from '@/configs/storage'
+import { deleteDiscardedDB } from '@/utils/database'
+import { isPC } from '@/utils/common'
+import api from '@/services'
+import dataSyncService from '@/services/dataSyncService'
+
+import Editor from './views/Editor/index.vue'
+import Screen from './views/Screen/index.vue'
+import Mobile from './views/Mobile/index.vue'
+import Login from './views/Login.vue'
+import FullscreenSpin from '@/components/FullscreenSpin.vue'
+
+const _isPC = isPC()
+const dataLoaded = ref(false)
+
+const mainStore = useMainStore()
+const slidesStore = useSlidesStore()
+const snapshotStore = useSnapshotStore()
+const authStore = useAuthStore()
+const { databaseId } = storeToRefs(mainStore)
+const { screening } = storeToRefs(useScreenStore())
+
+if (import.meta.env.MODE !== 'development') {
+  window.onbeforeunload = () => false
+}
+
+// 初始化应用数据
+const initializeApp = async () => {
+  try {
+    // 初始化 DataSyncService（在 Pinia 可用后）
+    await dataSyncService.initialize()
+    
+    // 如果用户已登录，加载用户的PPT数据
+    if (authStore.isLoggedIn) {
+      const pptList = await api.getPPTList()
+      
+      // 如果用户有PPT，加载第一个PPT；否则创建默认PPT
+      if (pptList.length > 0) {
+        const firstPPT = await api.getPPT(pptList[0].name)
+        slidesStore.setSlides(firstPPT.slides)
+        slidesStore.setTitle(firstPPT.title)
+        if (firstPPT.theme) {
+          slidesStore.setTheme(firstPPT.theme)
+        }
+        // 设置当前PPT ID以便自动保存
+        dataSyncService.setCurrentPPTId(pptList[0].name)
+      } 
+      else {
+        // 创建默认演示文稿
+        const defaultPPT = await api.createPPT('我的第一个演示文稿')
+        slidesStore.setSlides(defaultPPT.ppt.slides)
+        slidesStore.setTitle(defaultPPT.ppt.title)
+        slidesStore.setTheme(defaultPPT.ppt.theme)
+        dataSyncService.setCurrentPPTId(defaultPPT.pptId)
+      }
+    } 
+    else {
+      // 未登录状态，加载默认示例数据
+      const slides = await api.getFileData('slides')
+      slidesStore.setSlides(slides)
+    }
+
+    await deleteDiscardedDB()
+    snapshotStore.initSnapshotDatabase()
+    dataLoaded.value = true
+  } 
+  catch (error) {
+    // 如果是认证错误，清除登录状态
+    if (error === 'Authentication failed') {
+      authStore.logout()
+    } 
+    else {
+      // 其他错误，加载默认数据
+      try {
+        const slides = await api.getFileData('slides')
+        slidesStore.setSlides(slides)
+        dataLoaded.value = true
+      } 
+      catch (fallbackError) {
+        // 创建一个空的默认幻灯片
+        slidesStore.setSlides([{
+          id: 'default-slide',
+          elements: [],
+          background: { type: 'solid', color: '#ffffff' }
+        }])
+        dataLoaded.value = true
+      }
+    }
+  }
+}
+
+onMounted(async () => {
+  // 初始化认证状态
+  await authStore.initAuth()
+  
+  // 初始化应用数据
+  await initializeApp()
+})
+
+// 应用注销时向 localStorage 中记录下本次 indexedDB 的数据库ID，用于之后清除数据库
+window.addEventListener('unload', () => {
+  const discardedDB = localStorage.getItem(LOCALSTORAGE_KEY_DISCARDED_DB)
+  const discardedDBList: string[] = discardedDB ? JSON.parse(discardedDB) : []
+
+  discardedDBList.push(databaseId.value)
+
+  const newDiscardedDB = JSON.stringify(discardedDBList)
+  localStorage.setItem(LOCALSTORAGE_KEY_DISCARDED_DB, newDiscardedDB)
+})
+</script>
+
+<style lang="scss">
+#app {
+  height: 100%;
+}
+</style>

frontend/src/assets/fonts/AlibabaPuHuiTi.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e03857d7e181a9201baee2edef8dc6dba054dcb42a4b763cf75bb3dbdee2b321
+size 4150196

frontend/src/assets/fonts/CangerXiaowanzi.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:18e5bccdcfa630d8a953ae610cc066f0a2941690fc84aced856062cd2a27d88d
+size 695832

frontend/src/assets/fonts/DeYiHei.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ecd63faa61348c4f2480b5fddd8c48fd76f12542328eaa530b2a69badff68ab9
+size 1361616

frontend/src/assets/fonts/FangZhengFangSong.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d50e0c75d1688cb49aa3e50dc95ba9eb7a695f6593d805149f4abb78a3dd133b
+size 1538112

frontend/src/assets/fonts/FangZhengHeiTi.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:481eee4596a4125253ebf81edf01102298ea85cdb12b850d27863503ccb32518
+size 1189808

frontend/src/assets/fonts/FangZhengKaiTi.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a43bcc7319f7c570920c1a7302e2d73cb65378897bdb73a8445cf84559655015
+size 1656040

frontend/src/assets/fonts/FangZhengShuSong.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b143be48bb5699ae271a1f81c41872499634e896b9c66c1fe3b28bcc4708a4e0
+size 1185016

frontend/src/assets/fonts/FengguangMingrui.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:227d498f6b1ae157e079dccb6cd563f9b89b789b99be9dd660888f928c398660
+size 321284

frontend/src/assets/fonts/LXGWWenKai.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5cf730147cd4923546015110f9085216b023df388e2c5ca270b5db17d8de496b
+size 1826736

frontend/src/assets/fonts/MiSans.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7d7a4ba4faf18306e446787c1ab1bd1e90c9f27bfa937cd8eb3469c7504e563f
+size 4847960

frontend/src/assets/fonts/RuiziZhenyan.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fac4031d38f8497766ac3019b094c2fc91326c4257307b33a6c99b72cb5a529d
+size 616772

frontend/src/assets/fonts/ShetuModernSquare.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d6a319f07a79112133b61163eeaa87e632113fccb18a3655a9fbe07a912f1097
+size 790024

frontend/src/assets/fonts/SourceHanSans.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:baef3d9c86508d957eee369b1289a1a918a6f1f394f10bd1129332c84f91c671
+size 7511656

frontend/src/assets/fonts/SourceHanSerif.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4a39a09928cb92aca1e1bf72d841718ecb9c9549c1d1fa95620b8b42f49434db
+size 10413080

frontend/src/assets/fonts/SucaiJishiCoolSquare.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fade334be8d8e9bb68d43d43f7ab811b51433bc92d5201b30be191e026e0c913
+size 218068

frontend/src/assets/fonts/SucaiJishiKangkang.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8b874c03c6a6006b7d4f2dbaf01f3c46b51554def44a0ed1f01d126c7ff58ff2
+size 500448

frontend/src/assets/fonts/TuniuRounded.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f07953ca9d512298bc9a770d0236e992211ab3cebd6f2afd90e6b0da9da76da4
+size 108684

frontend/src/assets/fonts/WenDingPLKaiTi.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5c91fd0d539e35631dd5086451bc37732fa19e9eb9f7202eb881d6616f6d3634
+size 1962288

frontend/src/assets/fonts/YousheTitleBlack.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:58d9eeac1664dbadefc309a26e6496f3d03915ec32d78edc66bce4760db74d77
+size 642944

frontend/src/assets/fonts/ZcoolHappy.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ee4391316d9e560dbf96d92c7a9a12a73b0ac39b4f77662b43c2bd4fd16dcde7
+size 937400

frontend/src/assets/fonts/ZhuQueFangSong.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:81dd160d3c4608a70cc9eb794e4aaf8b1a6b07dec1a5284c48e402f0ffba1459
+size 2598904

frontend/src/assets/fonts/ZizhiQuXiMai.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2cce3fff22f295562a2970044c32ba330f32529503ca77c3d8c26649934f65f3
+size 678188

frontend/src/assets/styles/font.scss

@@ -0,0 +1,9 @@
+$fonts: 'SourceHanSans', 'SourceHanSerif', 'FangZhengHeiTi', 'FangZhengKaiTi', 'FangZhengShuSong', 'FangZhengFangSong', 'AlibabaPuHuiTi', 'ZhuQueFangSong', 'LXGWWenKai', 'WenDingPLKaiTi', 'DeYiHei', 'MiSans', 'CangerXiaowanzi', 'YousheTitleBlack', 'FengguangMingrui', 'ShetuModernSquare', 'ZcoolHappy', 'ZizhiQuXiMai', 'SucaiJishiKangkang', 'SucaiJishiCoolSquare', 'TuniuRounded', 'RuiziZhenyan';
+
+@each $font in $fonts {
+  @font-face {
+    font-display: swap;
+    font-family: $font;
+    src: url('https://asset.pptist.cn/font/#{$font}.woff2') format('woff2');
+  }
+}

frontend/src/assets/styles/global.scss

@@ -0,0 +1,138 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  box-sizing: border-box;
+}
+
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: #fff;
+  color: $textColor;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+  content: '';
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+a {
+  text-decoration: none;
+  color: $themeColor;
+}
+
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+mark.active {
+  background-color: #ff9632;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  color: inherit;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+textarea {
+  overflow: auto;
+  resize: vertical;
+}
+
+a,
+area,
+button,
+[role='button'],
+input:not([type='range']),
+label,
+select,
+summary,
+textarea {
+  touch-action: manipulation;
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+  background-color: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background-color: #e1e1e1;
+  border-radius: 3px;
+}

frontend/src/assets/styles/mixin.scss

@@ -0,0 +1,42 @@
+@mixin ellipsis-oneline() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+@mixin ellipsis-multiline($line: 2) {
+  word-wrap: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: $line;
+  -webkit-box-orient: vertical;
+}
+
+@mixin flex-grid-layout() {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+}
+
+@mixin flex-grid-layout-children($col, $colWidth) {
+  width: $colWidth;
+  margin-bottom: calc(#{100 - $col * $colWidth} / #{$col - 1});
+
+  &:not(:nth-child(#{$col}n)) {
+    margin-right: calc(#{100 - $col * $colWidth} / #{$col - 1});
+  }
+}
+
+@mixin overflow-overlay() {
+  overflow: auto;
+  overflow: overlay;
+}
+
+@mixin absolute-0() {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}

frontend/src/assets/styles/prosemirror.scss

@@ -0,0 +1,102 @@
+.ProseMirror, .ProseMirror-static {
+  outline: 0;
+  border: 0;
+  font-size: 16px;
+  word-break: break-word;
+  white-space: normal;
+
+  &:not(.ProseMirror-static) {
+    user-select: text;
+  }
+
+  ::selection {
+    background-color: rgba($themeColor, 0.25);
+    color: inherit;
+  }
+
+  p {
+    margin: 0;
+    margin-top: var(--paragraphSpace);
+  }
+  p:first-child {
+    margin-top: 0;
+  }
+
+  ul, ol, li {
+    margin: 0;
+    margin-top: var(--paragraphSpace);
+  }
+  ul {
+    list-style-type: disc;
+    padding-inline-start: 1.25em;
+
+    li {
+      list-style-type: inherit;
+      padding: 0.125em 0;
+    }
+  }
+
+  ol {
+    list-style-type: decimal;
+    padding-inline-start: 1.25em;
+
+    li {
+      list-style-type: inherit;
+      padding: 0.125em 0;
+    }
+  }
+
+  code {
+    background-color: #f1f1f1;
+    padding: 2px 6px;
+    margin: 0 1px;
+    border-radius: 4px;
+    font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+  }
+
+  sup {
+    vertical-align: super;
+    font-size: smaller;
+  }
+  sub {
+    vertical-align: sub;
+    font-size: smaller;
+  }
+
+  blockquote {
+    overflow: hidden;
+    padding: 0 1.2em;
+    margin: 0.6em 0;
+    font-style: italic;
+    border-left: 4px solid #e0e0e0;
+  }
+
+  [data-indent='1'] {
+    padding-left: 1em;
+  }
+  [data-indent='2'] {
+    padding-left: 2em;
+  }
+  [data-indent='3'] {
+    padding-left: 3em;
+  }
+  [data-indent='4'] {
+    padding-left: 4em;
+  }
+  [data-indent='5'] {
+    padding-left: 5em;
+  }
+  [data-indent='6'] {
+    padding-left: 6em;
+  }
+  [data-indent='7'] {
+    padding-left: 7em;
+  }
+  [data-indent='8'] {
+    padding-left: 8em;
+  }
+}
+
+.ProseMirror-selectednode {
+  outline: none !important;
+}

frontend/src/assets/styles/variable.scss

@@ -0,0 +1,13 @@
+$themeColor: #d14424;
+$themeHoverColor: #de6949;
+$textColor: #41464b;
+$borderColor: #e5e7eb;
+$lightGray: #f9f9f9;
+
+$boxShadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
+
+$transitionDelay: .2s;
+$transitionDelayFast: .1s;
+$transitionDelaySlow: .3s;
+
+$borderRadius: 2px;

frontend/src/components.d.ts

@@ -0,0 +1,7 @@
+import type { Icons } from '@/plugins/icon'
+
+declare module 'vue' {
+  export type GlobalComponents = Icons
+}
+
+export {}

frontend/src/components/Button.vue

@@ -0,0 +1,116 @@
+<template>
+  <button 
+    class="button"
+    :class="{
+      'disabled': disabled,
+      'checked': !disabled && checked,
+      'default': !disabled && type === 'default',
+      'primary': !disabled && type === 'primary',
+      'checkbox': !disabled && type === 'checkbox',
+      'radio': !disabled && type === 'radio',
+      'small': size === 'small',
+      'first': first,
+      'last': last,
+    }"
+    @click="handleClick()"
+  >
+    <slot></slot>
+  </button>
+</template>
+
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{
+  checked?: boolean
+  disabled?: boolean
+  type?: 'default' | 'primary' | 'checkbox' | 'radio'
+  size?: 'small' | 'normal'
+  first?: boolean
+  last?: boolean
+}>(), {
+  checked: false,
+  disabled: false,
+  type: 'default',
+  size: 'normal',
+  first: false,
+  last: false,
+})
+
+const emit = defineEmits<{
+  (event: 'click'): void
+}>()
+
+const handleClick = () => {
+  if (props.disabled) return
+  emit('click')
+}
+</script>
+
+<style lang="scss" scoped>
+.button {
+  height: 32px;
+  line-height: 32px;
+  outline: 0;
+  font-size: 13px;
+  padding: 0 15px;
+  text-align: center;
+  color: $textColor;
+  border-radius: $borderRadius;
+  user-select: none;
+  letter-spacing: 1px;
+  cursor: pointer;
+
+  &.small {
+    height: 24px;
+    line-height: 24px;
+    padding: 0 7px;
+    letter-spacing: 0;
+    font-size: 12px;
+  }
+
+  &.default {
+    background-color: #fff;
+    border: 1px solid #d9d9d9;
+    color: $textColor;
+
+    &:hover {
+      color: $themeColor;
+      border-color: $themeColor;
+    }
+  }
+  &.primary {
+    background-color: $themeColor;
+    border: 1px solid $themeColor;
+    color: #fff;
+
+    &:hover {
+      background-color: $themeHoverColor;
+      border-color: $themeHoverColor;
+    }
+  }
+  &.checkbox, &.radio {
+    background-color: #fff;
+    border: 1px solid #d9d9d9;
+    color: $textColor;
+
+    &:not(.checked):hover {
+      color: $themeColor;
+    }
+  }
+  &.checked {
+    color: #fff;
+    background-color: $themeColor;
+    border-color: $themeColor;
+
+    &:hover {
+      background-color: $themeHoverColor;
+      border-color: $themeHoverColor;
+    }
+  }
+  &.disabled {
+    background-color: #f5f5f5;
+    border: 1px solid #d9d9d9;
+    color: #b7b7b7;
+    cursor: default;
+  }
+}
+</style>

frontend/src/components/ButtonGroup.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="button-group" :class="{ 'passive': passive }" ref="groupRef">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+withDefaults(defineProps<{
+  passive?: boolean
+}>(), {
+  passive: false,
+})
+</script>
+
+<style lang="scss" scoped>
+.button-group {
+  display: flex;
+  align-items: center;
+
+  ::v-deep(button.button) {
+    border-radius: 0;
+    border-left-width: 1px;
+    border-right-width: 0;
+    display: inline-block;
+  }
+
+  &:not(.passive) {
+    ::v-deep(button.button) {
+      &:not(:last-child, .radio, .checkbox):hover {
+        position: relative;
+
+        &::after {
+          content: '';
+          width: 1px;
+          height: calc(100% + 2px);
+          background-color: $themeColor;
+          position: absolute;
+          top: -1px;
+          right: -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;
+      }
+    }
+  }
+  &.passive {
+    ::v-deep(button.button) {
+      &:not(.last, .radio, .checkbox):hover {
+        position: relative;
+
+        &::after {
+          content: '';
+          width: 1px;
+          height: calc(100% + 2px);
+          background-color: $themeColor;
+          position: absolute;
+          top: -1px;
+          right: -1px;
+        }
+      }
+
+      &.first {
+        border-top-left-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+        border-left-width: 1px;
+      }
+
+      &.last {
+        border-top-right-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+        border-right-width: 1px;
+      }
+    }
+  }
+}
+</style>

frontend/src/components/Checkbox.vue

@@ -0,0 +1,109 @@
+<template>
+  <label 
+    class="checkbox"
+    :class="{
+      'checked': value,
+      'disabled': disabled,
+    }"
+    @change="$event => handleChange($event)"
+  >
+    <span class="checkbox-input"></span>
+    <input class="checkbox-original" type="checkbox" :checked="value">
+    <span class="checkbox-label">
+      <slot></slot>
+    </span>
+  </label>
+</template>
+
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{
+  value: boolean
+  disabled?: boolean
+}>(), {
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  (event: 'update:value', payload: boolean): void
+}>()
+
+const handleChange = (e: Event) => {
+  if (props.disabled) return
+  emit('update:value', (e.target as HTMLInputElement).checked)
+}
+</script>
+
+<style lang="scss" scoped>
+.checkbox {
+  height: 20px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  &:not(.disabled).checked {
+    .checkbox-input {
+      background-color: $themeColor;
+      border-color: $themeColor;
+    }
+    .checkbox-input::after {
+      transform: rotate(45deg) scaleY(1);
+    }
+
+    .checkbox-label {
+      color: $themeColor;
+    }
+  }
+
+  &.disabled {
+    color: #b7b7b7;
+    cursor: default;
+
+    .checkbox-input {
+      background-color: #f5f5f5;
+    }
+  }
+}
+
+.checkbox-input {
+  display: inline-block;
+  position: relative;
+  border: 1px solid #d9d9d9;
+  border-radius: $borderRadius;
+  width: 16px;
+  height: 16px;
+  background-color: #fff;
+  vertical-align: middle;
+  transition: border-color .15s cubic-bezier(.71, -.46, .29, 1.46), background-color .15s cubic-bezier(.71, -.46, .29, 1.46);
+  z-index: 1;
+
+  &::after {
+    content: '';
+    border: 2px solid #fff;
+    border-left: 0;
+    border-top: 0;
+    height: 9px;
+    left: 4px;
+    position: absolute;
+    top: 1px;
+    transform: rotate(45deg) scaleY(0);
+    width: 6px;
+    transition: transform .15s ease-in .05s;
+    transform-origin: center;
+  }
+}
+.checkbox-original {
+  opacity: 0;
+  outline: 0;
+  position: absolute;
+  margin: 0;
+  width: 0;
+  height: 0;
+  z-index: -1;
+}
+.checkbox-label {
+  margin-left: 5px;
+  line-height: 20px;
+  font-size: 13px;
+  user-select: none;
+}
+</style>

frontend/src/components/CheckboxButton.vue

@@ -0,0 +1,21 @@
+<template>
+  <Button 
+    :checked="checked"
+    :disabled="disabled"
+    type="checkbox"
+  >
+    <slot></slot>
+  </Button>
+</template>
+
+<script lang="ts" setup>
+import Button from './Button.vue'
+
+withDefaults(defineProps<{
+  checked?: boolean
+  disabled?: boolean
+}>(), {
+  checked: false,
+  disabled: false,
+})
+</script>

frontend/src/components/ColorButton.vue

@@ -0,0 +1,42 @@
+<template>
+  <Button class="color-btn">
+    <div class="color-block">
+      <div class="content" :style="{ backgroundColor: color }"></div>
+    </div>
+    <IconPlatte class="color-btn-icon" />
+  </Button>
+</template>
+
+<script lang="ts" setup>
+import Button from './Button.vue'
+
+defineProps<{
+  color: string
+}>()
+</script>
+
+<style lang="scss" scoped>
+.color-btn {
+  width: 100%;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  padding: 0 !important;
+}
+.color-block {
+  height: 20px;
+  margin-left: 8px;
+  flex: 1;
+  outline: 1px dashed rgba($color: #666, $alpha: .12);
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAEBJREFUOE9jfPbs2X8GIoCkpCQRqhgYGEcNxBlOo2GIM2iGQLL5//8/UTnl+fPnxOWUUQNxhtNoGOLOKYM+2QAAh2Nq10DwkukAAAAASUVORK5CYII=);
+}
+.content {
+  width: 100%;
+  height: 100%;
+}
+.color-btn-icon {
+  width: 32px;
+  font-size: 13px;
+  color: #bfbfbf;
+}
+</style>

frontend/src/components/ColorListButton.vue

@@ -0,0 +1,58 @@
+<template>
+  <Button class="color-btn">
+    <div class="blocks">
+      <div class="color-block" v-for="(color, index) in colors" :key="index">
+        <div class="content" :style="{ backgroundColor: color }"></div>
+      </div>
+    </div>
+    <IconPlatte class="color-btn-icon" />
+  </Button>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import Button from './Button.vue'
+
+const props = defineProps<{
+  colors: string[]
+}>()
+
+const colors = computed(() => {
+  if (props.colors.length > 12) return props.colors.slice(0, 12)
+  return props.colors
+})
+</script>
+
+<style lang="scss" scoped>
+.color-btn {
+  width: 100%;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  padding: 0 !important;
+}
+.blocks {
+  display: flex;
+  flex: 1;
+  margin-left: 8px;
+  outline: 1px dashed rgba($color: #666, $alpha: .12);
+}
+.color-block {
+  height: 20px;
+  flex: 1;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAEBJREFUOE9jfPbs2X8GIoCkpCQRqhgYGEcNxBlOo2GIM2iGQLL5//8/UTnl+fPnxOWUUQNxhtNoGOLOKYM+2QAAh2Nq10DwkukAAAAASUVORK5CYII=);
+
+  & + & {
+    margin-left: 2px;
+  }
+}
+.content {
+  width: 100%;
+  height: 100%;
+}
+.color-btn-icon {
+  width: 32px;
+  font-size: 13px;
+  color: #bfbfbf;
+}
+</style>

frontend/src/components/ColorPicker/Alpha.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="alpha">
+    <div class="alpha-checkboard-wrap">
+      <Checkboard />
+    </div>
+    <div class="alpha-gradient" :style="{ background: gradientColor }"></div>
+    <div 
+      class="alpha-container" 
+      ref="alphaRef"
+      @mousedown="$event => handleMouseDown($event)"
+    >
+      <div class="alpha-pointer" :style="{ left: color.a * 100 + '%' }">
+        <div class="alpha-picker"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onUnmounted, ref } from 'vue'
+
+import Checkboard from './Checkboard.vue'
+import type { ColorFormats } from 'tinycolor2'
+
+const props = defineProps<{
+  value: ColorFormats.RGBA
+}>()
+
+const emit = defineEmits<{
+  (event: 'colorChange', payload: ColorFormats.RGBA): void
+}>()
+
+const color = computed(() => props.value)
+    
+const gradientColor = computed(() => {
+  const rgbaStr = [color.value.r, color.value.g, color.value.b].join(',')
+  return `linear-gradient(to right, rgba(${rgbaStr}, 0) 0%, rgba(${rgbaStr}, 1) 100%)`
+})
+
+const alphaRef = ref<HTMLElement>()
+const handleChange = (e: MouseEvent) => {
+  e.preventDefault()
+  if (!alphaRef.value) return
+  const containerWidth = alphaRef.value.clientWidth
+  const xOffset = alphaRef.value.getBoundingClientRect().left + window.pageXOffset
+  const left = e.pageX - xOffset
+  let a
+
+  if (left < 0) a = 0
+  else if (left > containerWidth) a = 1
+  else a = Math.round(left * 100 / containerWidth) / 100
+
+  if (color.value.a !== a) {
+    emit('colorChange', {
+      r: color.value.r,
+      g: color.value.g,
+      b: color.value.b,
+      a: a,
+    })
+  }
+}
+
+const unbindEventListeners = () => {
+  window.removeEventListener('mousemove', handleChange)
+  window.removeEventListener('mouseup', unbindEventListeners)
+}
+const handleMouseDown = (e: MouseEvent) => {
+  handleChange(e)
+  window.addEventListener('mousemove', handleChange)
+  window.addEventListener('mouseup', unbindEventListeners)
+}
+onUnmounted(unbindEventListeners)
+</script>
+
+<style lang="scss" scoped>
+.alpha {
+  @include absolute-0();
+}
+.alpha-checkboard-wrap {
+  overflow: hidden;
+
+  @include absolute-0();
+}
+.alpha-gradient {
+  @include absolute-0();
+}
+.alpha-container {
+  cursor: pointer;
+  position: relative;
+  z-index: 2;
+  height: 100%;
+  margin: 0 3px;
+}
+.alpha-pointer {
+  z-index: 2;
+  position: absolute;
+}
+.alpha-picker {
+  cursor: pointer;
+  width: 4px;
+  height: 8px;
+  box-shadow: 0 0 2px rgba(0, 0, 0, .6);
+  background: #fff;
+  margin-top: 1px;
+  transform: translateX(-2px);
+}
+</style>

frontend/src/components/ColorPicker/Checkboard.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="checkerboard" :style="bgStyle"></div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  size?: number
+  white?: string
+  grey?: string
+}>(), {
+  size: 8,
+  white: '#fff',
+  grey: '#e6e6e6',
+})
+
+interface CheckboardCache {
+  [key: string]: string | null
+}
+const checkboardCache: CheckboardCache = {}
+
+const renderCheckboard = (white: string, grey: string, size: number) => {
+  const canvas = document.createElement('canvas')
+  canvas.width = canvas.height = size * 2
+  const ctx = canvas.getContext('2d')
+  
+  if (!ctx) return null
+
+  ctx.fillStyle = white
+  ctx.fillRect(0, 0, canvas.width, canvas.height)
+  ctx.fillStyle = grey
+  ctx.fillRect(0, 0, size, size)
+  ctx.translate(size, size)
+  ctx.fillRect(0, 0, size, size)
+  return canvas.toDataURL()
+}
+
+const getCheckboard = (white: string, grey: string, size: number) => {
+  const key = white + ',' + grey + ',' + size
+  if (checkboardCache[key]) return checkboardCache[key]
+  
+  const checkboard = renderCheckboard(white, grey, size)
+  checkboardCache[key] = checkboard
+  return checkboard
+}
+
+const bgStyle = computed(() => {
+  const checkboard = getCheckboard(props.white, props.grey, props.size)
+  return { backgroundImage: `url(${checkboard})` }
+})
+</script>
+
+<style lang="scss" scoped>
+.checkerboard {
+  background-size: contain;
+
+  @include absolute-0();
+}
+</style>

frontend/src/components/ColorPicker/EditableInput.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="editable-input">
+    <input
+      class="input-content"
+      :value="val"
+      @input="$event => handleInput($event)"
+    >
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import tinycolor, { type ColorFormats } from 'tinycolor2'
+
+const props = defineProps<{
+  value: ColorFormats.RGBA
+}>()
+
+const emit = defineEmits<{
+  (event: 'colorChange', payload: ColorFormats.RGBA): void
+}>()
+
+const val = computed(() => {
+  let _hex = ''
+  if (props.value.a < 1) _hex = tinycolor(props.value).toHex8String().toUpperCase()
+  else _hex = tinycolor(props.value).toHexString().toUpperCase()
+  return _hex.replace('#', '')
+})
+
+const handleInput = (e: Event) => {
+  const value = (e.target as HTMLInputElement).value
+  if (value.length >= 6) {
+    const color = tinycolor(value)
+    if (color.isValid()) {
+      emit('colorChange', color.toRgb())
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.editable-input {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  text-align: center;
+  font-size: 14px;
+
+  &::after {
+    content: '#';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #999;
+  }
+}
+.input-content {
+  width: 100%;
+  padding: 3px;
+  border: 0;
+  border-bottom: 1px solid #ddd;
+  outline: none;
+  text-align: center;
+}
+.input-label {
+  text-transform: capitalize;
+}
+</style>

frontend/src/components/ColorPicker/Hue.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="hue">
+    <div 
+      class="hue-container"
+      ref="hueRef"
+      @mousedown="$event => handleMouseDown($event)"
+    >
+      <div 
+        class="hue-pointer"
+        :style="{ left: pointerLeft }"
+      >
+        <div class="hue-picker"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onUnmounted, ref, watch } from 'vue'
+import tinycolor, { type ColorFormats } from 'tinycolor2'
+
+const props = defineProps<{
+  value: ColorFormats.RGBA
+  hue: number
+}>()
+
+const emit = defineEmits<{
+  (event: 'colorChange', payload: ColorFormats.HSLA): void
+}>()
+
+const oldHue = ref(0)
+const pullDirection = ref('')
+
+const color = computed(() => {
+  const hsla = tinycolor(props.value).toHsl()
+  if (props.hue !== -1) hsla.h = props.hue
+  return hsla
+})
+
+const pointerLeft = computed(() => {
+  if (color.value.h === 0 && pullDirection.value === 'right') return '100%'
+  return color.value.h * 100 / 360 + '%'
+})
+
+watch(() => props.value, () => {
+  const hsla = tinycolor(props.value).toHsl()
+  const h = hsla.s === 0 ? props.hue : hsla.h
+  if (h !== 0 && h - oldHue.value > 0) pullDirection.value = 'right'
+  if (h !== 0 && h - oldHue.value < 0) pullDirection.value = 'left'
+  oldHue.value = h
+})
+
+const hueRef = ref<HTMLElement>()
+const handleChange = (e: MouseEvent) => {
+  e.preventDefault()
+  if (!hueRef.value) return
+
+  const containerWidth = hueRef.value.clientWidth
+  const xOffset = hueRef.value.getBoundingClientRect().left + window.pageXOffset
+  const left = e.pageX - xOffset
+  let h, percent
+  
+  if (left < 0) h = 0
+  else if (left > containerWidth) h = 360
+  else {
+    percent = left * 100 / containerWidth
+    h = 360 * percent / 100
+  }
+  if (props.hue === -1 || color.value.h !== h) {
+    emit('colorChange', {
+      h,
+      l: color.value.l,
+      s: color.value.s,
+      a: color.value.a,
+    })
+  }
+}
+
+const unbindEventListeners = () => {
+  window.removeEventListener('mousemove', handleChange)
+  window.removeEventListener('mouseup', unbindEventListeners)
+}
+const handleMouseDown = (e: MouseEvent) => {
+  handleChange(e)
+  window.addEventListener('mousemove', handleChange)
+  window.addEventListener('mouseup', unbindEventListeners)
+}
+onUnmounted(unbindEventListeners)
+</script>
+
+<style lang="scss" scoped>
+.hue {
+  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+
+  @include absolute-0();
+}
+.hue-container {
+  cursor: pointer;
+  margin: 0 2px;
+  position: relative;
+  height: 100%;
+}
+.hue-pointer {
+  z-index: 2;
+  position: absolute;
+  top: 0;
+}
+.hue-picker {
+  cursor: pointer;
+  margin-top: 1px;
+  width: 4px;
+  height: 8px;
+  box-shadow: 0 0 2px rgba(0, 0, 0, .6);
+  background: #fff;
+  transform: translateX(-2px);
+}
+</style>

frontend/src/components/ColorPicker/Saturation.vue

@@ -0,0 +1,108 @@
+<template>
+  <div 
+    class="saturation"
+    ref="saturationRef"
+    :style="{ background: bgColor }"
+    @mousedown="$event => handleMouseDown($event)"
+  >
+    <div class="saturation-white"></div>
+    <div class="saturation-black"></div>
+    <div class="saturation-pointer" 
+      :style="{
+        top: pointerTop,
+        left: pointerLeft,
+      }"
+    >
+      <div class="saturation-circle"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onUnmounted, ref } from 'vue'
+import tinycolor, { type ColorFormats } from 'tinycolor2'
+import { throttle, clamp } from 'lodash'
+
+const props = defineProps<{
+  value: ColorFormats.RGBA
+  hue: number
+}>()
+
+const emit = defineEmits<{
+  (event: 'colorChange', payload: ColorFormats.HSVA): void
+}>()
+
+const color = computed(() => {
+  const hsva = tinycolor(props.value).toHsv()
+  if (props.hue !== -1) hsva.h = props.hue
+  return hsva
+})
+
+const bgColor = computed(() => `hsl(${color.value.h}, 100%, 50%)`)
+const pointerTop = computed(() => (-(color.value.v * 100) + 1) + 100 + '%')
+const pointerLeft = computed(() => color.value.s * 100 + '%')
+
+const emitChangeEvent = throttle(function(param: ColorFormats.HSVA) {
+  emit('colorChange', param)
+}, 20, { leading: true, trailing: false })
+
+const saturationRef = ref<HTMLElement>()
+const handleChange = (e: MouseEvent) => {
+  e.preventDefault()
+  if (!saturationRef.value) return
+  
+  const containerWidth = saturationRef.value.clientWidth
+  const containerHeight = saturationRef.value.clientHeight
+  const xOffset = saturationRef.value.getBoundingClientRect().left + window.pageXOffset
+  const yOffset = saturationRef.value.getBoundingClientRect().top + window.pageYOffset
+  const left = clamp(e.pageX - xOffset, 0, containerWidth)
+  const top = clamp(e.pageY - yOffset, 0, containerHeight)
+  const saturation = left / containerWidth
+  const bright = clamp(-(top / containerHeight) + 1, 0, 1)
+
+  emitChangeEvent({
+    h: color.value.h,
+    s: saturation,
+    v: bright,
+    a: color.value.a,
+  })
+}
+
+const unbindEventListeners = () => {
+  window.removeEventListener('mousemove', handleChange)
+  window.removeEventListener('mouseup', unbindEventListeners)
+}
+const handleMouseDown = (e: MouseEvent) => {
+  handleChange(e)
+  window.addEventListener('mousemove', handleChange)
+  window.addEventListener('mouseup', unbindEventListeners)
+}
+onUnmounted(unbindEventListeners)
+</script>
+
+<style lang="scss" scoped>
+.saturation,
+.saturation-white,
+.saturation-black {
+  @include absolute-0();
+
+  cursor: pointer;
+}
+.saturation-white {
+  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+}
+.saturation-black {
+  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
+}
+.saturation-pointer {
+  cursor: pointer;
+  position: absolute;
+}
+.saturation-circle {
+  width: 4px;
+  height: 4px;
+  box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, .3), 0 0 1px 2px rgba(0, 0, 0, .4);
+  border-radius: 50%;
+  transform: translate(-2px, -2px);
+}
+</style>

frontend/src/components/ColorPicker/index.vue

@@ -0,0 +1,443 @@
+<template>
+  <div class="color-picker">
+    <div class="picker-saturation-wrap">
+      <Saturation :value="color" :hue="hue" @colorChange="value => changeColor(value)" />
+    </div>
+    <div class="picker-controls">
+      <div class="picker-color-wrap">
+        <div class="picker-current-color" :style="{ background: currentColor }"></div>
+        <Checkboard />
+      </div>
+      <div class="picker-sliders">
+        <div class="picker-hue-wrap">
+          <Hue :value="color" :hue="hue" @colorChange="value => changeColor(value)" />
+        </div>
+        <div class="picker-alpha-wrap">
+          <Alpha :value="color" @colorChange="value => changeColor(value)" />
+        </div>
+      </div>
+    </div>
+
+    <div class="picker-field">
+      <EditableInput class="input" :value="color" @colorChange="value => changeColor(value)" />
+      <div class="straw" @click="openEyeDropper()"><IconNeedle /></div>
+      <div class="transparent" @click="selectPresetColor('#00000000')">
+        <Checkboard />
+      </div>
+    </div>
+
+    <div class="picker-presets">
+      <div
+        class="picker-presets-color"
+        v-for="c in themeColors"
+        :key="c"
+        :style="{ background: c }"
+        @click="selectPresetColor(c)"
+      ></div>
+    </div>
+
+    <div class="picker-gradient-presets">
+      <div
+        class="picker-gradient-col"
+        v-for="(col, index) in presetColors"
+        :key="index"
+      >
+        <div class="picker-gradient-color"
+          v-for="c in col"
+          :key="c"
+          :style="{ background: c }"
+          @click="selectPresetColor(c)"
+        ></div>
+      </div>
+    </div>
+
+    <div class="picker-presets">
+      <div
+        v-for="c in standardColors"
+        :key="c"
+        class="picker-presets-color"
+        :style="{ background: c }"
+        @click="selectPresetColor(c)"
+      ></div>
+    </div>
+
+    <div class="recent-colors-title" v-if="recentColors.length">最近使用：</div>
+    <div class="picker-presets">
+      <div
+        v-for="c in recentColors"
+        :key="c"
+        class="picker-presets-color alpha"
+        @click="selectPresetColor(c)"
+      >
+        <div class="picker-presets-color-content" :style="{ background: c }"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import tinycolor, { type ColorFormats } from 'tinycolor2'
+import { debounce } from 'lodash'
+import { toCanvas } from 'html-to-image'
+import message from '@/utils/message'
+
+import Alpha from './Alpha.vue'
+import Checkboard from './Checkboard.vue'
+import Hue from './Hue.vue'
+import Saturation from './Saturation.vue'
+import EditableInput from './EditableInput.vue'
+
+const props = withDefaults(defineProps<{
+  modelValue?: string
+}>(), {
+  modelValue: '#e86b99',
+})
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', payload: string): void
+}>()
+
+const RECENT_COLORS = 'RECENT_COLORS'
+
+const presetColorConfig = [
+  ['#7f7f7f', '#f2f2f2'],
+  ['#0d0d0d', '#808080'],
+  ['#1c1a10', '#ddd8c3'],
+  ['#0e243d', '#c6d9f0'],
+  ['#233f5e', '#dae5f0'],
+  ['#632623', '#f2dbdb'],
+  ['#4d602c', '#eaf1de'],
+  ['#3f3150', '#e6e0ec'],
+  ['#1e5867', '#d9eef3'],
+  ['#99490f', '#fee9da'],
+]
+
+const gradient = (startColor: string, endColor: string, step: number) => {
+  const _startColor = tinycolor(startColor).toRgb()
+  const _endColor = tinycolor(endColor).toRgb()
+
+  const rStep = (_endColor.r - _startColor.r) / step
+  const gStep = (_endColor.g - _startColor.g) / step
+  const bStep = (_endColor.b - _startColor.b) / step
+  const gradientColorArr = []
+
+  for (let i = 0; i < step; i++) {
+    const gradientColor = tinycolor({
+      r: _startColor.r + rStep * i,
+      g: _startColor.g + gStep * i,
+      b: _startColor.b + bStep * i,
+    }).toRgbString()
+    gradientColorArr.push(gradientColor)
+  }
+  return gradientColorArr
+}
+
+const getPresetColors = () => {
+  const presetColors = []
+  for (const color of presetColorConfig) {
+    presetColors.push(gradient(color[1], color[0], 5))
+  }
+  return presetColors
+}
+
+const themeColors = ['#000000', '#ffffff', '#eeece1', '#1e497b', '#4e81bb', '#e2534d', '#9aba60', '#8165a0', '#47acc5', '#f9974c']
+const standardColors = ['#c21401', '#ff1e02', '#ffc12a', '#ffff3a', '#90cf5b', '#00af57', '#00afee', '#0071be', '#00215f', '#72349d']
+
+const hue = ref(-1)
+const recentColors = ref<string[]>([])
+
+const color = computed({
+  get() {
+    return tinycolor(props.modelValue).toRgb()
+  },
+  set(rgba: ColorFormats.RGBA) {
+    const rgbaString = `rgba(${[rgba.r, rgba.g, rgba.b, rgba.a].join(',')})`
+    emit('update:modelValue', rgbaString)
+  },
+})
+
+const presetColors = getPresetColors()
+
+const currentColor = computed(() => {
+  return `rgba(${[color.value.r, color.value.g, color.value.b, color.value.a].join(',')})`
+})
+
+const selectPresetColor = (colorString: string) => {
+  hue.value = tinycolor(colorString).toHsl().h
+  emit('update:modelValue', colorString)
+}
+
+// 每次选择非预设颜色时，需要将该颜色加入到最近使用列表中
+const updateRecentColorsCache = debounce(function() {
+  const _color = tinycolor(color.value).toRgbString()
+  if (!recentColors.value.includes(_color)) {
+    recentColors.value = [_color, ...recentColors.value]
+
+    const maxLength = 10
+    if (recentColors.value.length > maxLength) {
+      recentColors.value = recentColors.value.slice(0, maxLength)
+    }
+  }
+}, 300, { trailing: true })
+
+onMounted(() => {
+  const recentColorsCache = localStorage.getItem(RECENT_COLORS)
+  if (recentColorsCache) recentColors.value = JSON.parse(recentColorsCache)
+})
+
+watch(recentColors, () => {
+  const recentColorsCache = JSON.stringify(recentColors.value)
+  localStorage.setItem(RECENT_COLORS, recentColorsCache)
+})
+
+const changeColor = (value: ColorFormats.RGBA | ColorFormats.HSLA | ColorFormats.HSVA) => {
+  if ('h' in value) {
+    hue.value = value.h
+    color.value = tinycolor(value).toRgb()
+  }
+  else {
+    hue.value = tinycolor(value).toHsl().h
+    color.value = value
+  }
+
+  updateRecentColorsCache()
+}
+
+// 打开取色吸管
+// 检查环境是否支持原生取色吸管，支持则使用原生吸管，否则使用自定义吸管
+const openEyeDropper = () => {
+  const isSupportedEyeDropper = 'EyeDropper' in window
+
+  if (isSupportedEyeDropper) browserEyeDropper()
+  else customEyeDropper()
+}
+
+// 原生取色吸管
+const browserEyeDropper = () => {
+  message.success('按 ESC 键关闭取色吸管', { duration: 0 })
+
+  // eslint-disable-next-line
+  const eyeDropper = new (window as any).EyeDropper()
+  eyeDropper.open().then((result: { sRGBHex: string }) => {
+    const tColor = tinycolor(result.sRGBHex)
+    hue.value = tColor.toHsl().h
+    color.value = tColor.toRgb()
+
+    message.closeAll()
+    updateRecentColorsCache()
+  }).catch(() => {
+    message.closeAll()
+  })
+}
+
+// 基于 Canvas 的自定义取色吸管
+const customEyeDropper = () => {
+  const targetRef: HTMLElement | null = document.querySelector('.canvas')
+  if (!targetRef) return
+
+  const maskRef = document.createElement('div')
+  maskRef.style.cssText = 'position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 9999; cursor: wait;'
+  document.body.appendChild(maskRef)
+
+  const colorBlockRef = document.createElement('div')
+  colorBlockRef.style.cssText = 'position: absolute; top: -100px; left: -100px; width: 16px; height: 16px; border: 1px solid #000; z-index: 999'
+  maskRef.appendChild(colorBlockRef)
+
+  const { left, top, width, height } = targetRef.getBoundingClientRect()
+
+  const filter = (node: HTMLElement) => {
+    if (node.tagName && node.tagName.toUpperCase() === 'FOREIGNOBJECT') return false
+    if (node.classList && node.classList.contains('operate')) return false
+    return true
+  }
+
+  toCanvas(targetRef, { filter, fontEmbedCSS: '', width, height, canvasWidth: width, canvasHeight: height, pixelRatio: 1 }).then(canvasRef => {
+    canvasRef.style.cssText = `position: absolute; top: ${top}px; left: ${left}px; cursor: crosshair;`
+    maskRef.style.cursor = 'default'
+    maskRef.appendChild(canvasRef)
+
+    const ctx = canvasRef.getContext('2d')
+    if (!ctx) return
+
+    let currentColor = ''
+    const handleMousemove = (e: MouseEvent) => {
+      const x = e.x
+      const y = e.y
+
+      const mouseX = x - left
+      const mouseY = y - top
+
+      const [r, g, b, a] = ctx.getImageData(mouseX, mouseY, 1, 1).data
+      currentColor = `rgba(${r}, ${g}, ${b}, ${(a / 255).toFixed(2)})`
+
+      colorBlockRef.style.left = x + 10 + 'px'
+      colorBlockRef.style.top = y + 10 + 'px'
+      colorBlockRef.style.backgroundColor = currentColor
+    }
+    const handleMouseleave = () => {
+      currentColor = ''
+      colorBlockRef.style.left = '-100px'
+      colorBlockRef.style.top = '-100px'
+      colorBlockRef.style.backgroundColor = ''
+    }
+    const handleMousedown = (e: MouseEvent) => {
+      if (currentColor && e.button === 0) {
+        const tColor = tinycolor(currentColor)
+        hue.value = tColor.toHsl().h
+        color.value = tColor.toRgb()
+
+        updateRecentColorsCache()
+      }
+      document.body.removeChild(maskRef)
+      
+      canvasRef.removeEventListener('mousemove', handleMousemove)
+      canvasRef.removeEventListener('mouseleave', handleMouseleave)
+      window.removeEventListener('mousedown', handleMousedown)
+    }
+
+    canvasRef.addEventListener('mousemove', handleMousemove)
+    canvasRef.addEventListener('mouseleave', handleMouseleave)
+    window.addEventListener('mousedown', handleMousedown)
+  }).catch(() => {
+    message.error('取色吸管初始化失败')
+    document.body.removeChild(maskRef)
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.color-picker {
+  position: relative;
+  width: 240px;
+  background: #fff;
+  user-select: none;
+  margin-bottom: -10px;
+}
+.picker-saturation-wrap {
+  width: 100%;
+  padding-bottom: 50%;
+  position: relative;
+  overflow: hidden;
+}
+.picker-controls {
+  display: flex;
+}
+.picker-sliders {
+  padding: 4px 0;
+  flex: 1;
+}
+.picker-hue-wrap {
+  position: relative;
+  height: 10px;
+}
+.picker-alpha-wrap {
+  position: relative;
+  height: 10px;
+  margin-top: 4px;
+  overflow: hidden;
+}
+.picker-color-wrap {
+  width: 24px;
+  height: 24px;
+  position: relative;
+  margin-top: 4px;
+  margin-right: 4px;
+  outline: 1px dashed rgba($color: #666, $alpha: .12);
+
+  .checkerboard {
+    background-size: auto;
+  }
+}
+.picker-current-color {
+  @include absolute-0();
+
+  z-index: 2;
+}
+
+.picker-field {
+  display: flex;
+  margin-bottom: 8px;
+
+  .transparent {
+    width: 24px;
+    height: 24px;
+    margin-top: 4px;
+    margin-left: 8px;
+    position: relative;
+    cursor: pointer;
+
+    &::after {
+      content: '';
+      width: 26px;
+      height: 2px;
+      position: absolute;
+      top: 11px;
+      left: -1px;
+      transform: rotate(-45deg);
+      background-color: #f00;
+    }
+
+    .checkerboard {
+      background-size: auto;
+    }
+  }
+
+  .straw {
+    width: 24px;
+    height: 24px;
+    margin-top: 4px;
+    margin-left: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 20px;
+    background-color: #f5f5f5;
+    outline: 1px solid #f1f1f1;
+    cursor: pointer;
+  }
+  .input {
+    flex: 1;
+  }
+}
+
+.picker-presets {
+  @include flex-grid-layout();
+}
+.picker-presets-color {
+  @include flex-grid-layout-children(10, 7%);
+
+  height: 0;
+  padding-bottom: 7%;
+  flex-shrink: 0;
+  position: relative;
+  cursor: pointer;
+
+  &.alpha {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADBJREFUOE9jfPbs2X8GPEBSUhKfNAPjqAHDIgz+//+PNx08f/4cfzoYNYCBceiHAQC5flV5JzgrxQAAAABJRU5ErkJggg==);
+  }
+}
+.picker-presets-color-content {
+  @include absolute-0();
+}
+.picker-gradient-presets {
+  @include flex-grid-layout();
+}
+.picker-gradient-col {
+  @include flex-grid-layout-children(10, 7%);
+
+  display: flex;
+  flex-direction: column;
+}
+.picker-gradient-color {
+  width: 100%;
+  height: 16px;
+  position: relative;
+  cursor: pointer;
+}
+
+.recent-colors-title {
+  font-size: 12px;
+  margin-bottom: 4px;
+}
+</style>

frontend/src/components/Contextmenu/MenuContent.vue

@@ -0,0 +1,137 @@
+<template>
+  <ul class="menu-content">
+    <template v-for="(menu, index) in menus" :key="menu.text || index">
+      <li
+        v-if="!menu.hide"
+        class="menu-item"
+        @click.stop="handleClickMenuItem(menu)"
+        :class="{'divider': menu.divider, 'disable': menu.disable}"
+      >
+        <div 
+          class="menu-item-content" 
+          :class="{
+            'has-children': menu.children,
+            'has-handler': menu.handler,
+          }" 
+          v-if="!menu.divider"
+        >
+          <span class="text">{{menu.text}}</span>
+          <span class="sub-text" v-if="menu.subText && !menu.children">{{menu.subText}}</span>
+
+          <menu-content 
+            class="sub-menu"
+            :menus="menu.children" 
+            v-if="menu.children && menu.children.length"
+            :handleClickMenuItem="handleClickMenuItem" 
+          />
+        </div>
+      </li>
+    </template>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import type { ContextmenuItem } from './types'
+
+defineProps<{
+  menus: ContextmenuItem[]
+  handleClickMenuItem: (item: ContextmenuItem) => void
+}>()
+</script>
+
+<style lang="scss" scoped>
+$menuWidth: 180px;
+$menuHeight: 30px;
+$subMenuWidth: 120px;
+
+.menu-content {
+  width: $menuWidth;
+  padding: 5px 0;
+  background: #fff;
+  border: 1px solid $borderColor;
+  box-shadow: $boxShadow;
+  border-radius: $borderRadius;
+  list-style: none;
+  margin: 0;
+}
+.menu-item {
+  padding: 0 20px;
+  color: #555;
+  font-size: 12px;
+  transition: all $transitionDelayFast;
+  white-space: nowrap;
+  height: $menuHeight;
+  line-height: $menuHeight;
+  background-color: #fff;
+  cursor: pointer;
+
+  &:not(.disable):hover > .menu-item-content > .sub-menu {
+    display: block;
+  }
+
+  &:not(.disable):hover > .has-children.has-handler::after {
+    transform: scale(1);
+  }
+
+  &:hover:not(.disable) {
+    background-color: rgba($color: $themeColor, $alpha: .2);
+  }
+
+  &.divider {
+    height: 1px;
+    overflow: hidden;
+    margin: 5px;
+    background-color: #e5e5e5;
+    line-height: 0;
+    padding: 0;
+  }
+
+  &.disable {
+    color: #b1b1b1;
+    cursor: no-drop;
+  }
+}
+.menu-item-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+
+  &.has-children::before {
+    content: '';
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #666 #666 transparent transparent;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%) rotate(45deg);
+  }
+  &.has-children.has-handler::after {
+    content: '';
+    display: inline-block;
+    width: 1px;
+    height: 24px;
+    background-color: rgba($color: #fff, $alpha: .3);
+    position: absolute;
+    right: 18px;
+    top: 3px;
+    transform: scale(0);
+    transition: transform $transitionDelay;
+  }
+
+  .sub-text {
+    opacity: 0.6;
+  }
+  .sub-menu {
+    width: $subMenuWidth;
+    position: absolute;
+    display: none;
+    left: 112%;
+    top: -6px;
+  }
+}
+</style>

frontend/src/components/Contextmenu/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <div 
+    class="mask"
+    @contextmenu.prevent="removeContextmenu()"
+    @mousedown.left="removeContextmenu()"
+  ></div>
+
+  <div 
+    class="contextmenu"
+    :style="{
+      left: style.left + 'px',
+      top: style.top + 'px',
+    }"
+    @contextmenu.prevent
+  >
+    <MenuContent 
+      :menus="menus"
+      :handleClickMenuItem="handleClickMenuItem" 
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import type { ContextmenuItem, Axis } from './types'
+
+import MenuContent from './MenuContent.vue'
+
+const props = defineProps<{
+  axis: Axis
+  el: HTMLElement
+  menus: ContextmenuItem[]
+  removeContextmenu: () => void
+}>()
+
+const style = computed(() => {
+  const MENU_WIDTH = 180
+  const MENU_HEIGHT = 30
+  const DIVIDER_HEIGHT = 11
+  const PADDING = 5
+
+  const { x, y } = props.axis
+  const menuCount = props.menus.filter(menu => !(menu.divider || menu.hide)).length
+  const dividerCount = props.menus.filter(menu => menu.divider).length
+
+  const menuWidth = MENU_WIDTH
+  const menuHeight = menuCount * MENU_HEIGHT + dividerCount * DIVIDER_HEIGHT + PADDING * 2
+
+  const screenWidth = document.body.clientWidth
+  const screenHeight = document.body.clientHeight
+
+  return {
+    left: screenWidth <= x + menuWidth ? x - menuWidth : x,
+    top: screenHeight <= y + menuHeight ? y - menuHeight : y,
+  }
+})
+
+const handleClickMenuItem = (item: ContextmenuItem) => {
+  if (item.disable) return
+  if (item.children && !item.handler) return
+  if (item.handler) item.handler(props.el)
+  props.removeContextmenu()
+}
+</script>
+
+<style lang="scss">
+.mask {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9998;
+}
+.contextmenu {
+  position: fixed;
+  z-index: 9999;
+  user-select: none;
+}
+</style>

frontend/src/components/Contextmenu/types.ts

@@ -0,0 +1,14 @@
+export interface ContextmenuItem {
+  text?: string
+  subText?: string
+  divider?: boolean
+  disable?: boolean
+  hide?: boolean
+  children?: ContextmenuItem[]
+  handler?: (el: HTMLElement) => void
+}
+
+export interface Axis {
+  x: number
+  y: number
+}

frontend/src/components/Divider.vue

@@ -0,0 +1,34 @@
+<template>
+  <div :class="['divider', type]"
+    :style="{
+      margin: type === 'horizontal' ? `${margin >= 0 ? margin : 24}px 0` : `0 ${margin >= 0 ? margin : 8}px`
+    }"
+  ></div>
+</template>
+
+<script lang="ts" setup>
+withDefaults(defineProps<{
+  type?: 'horizontal' | 'vertical'
+  margin?: number
+}>(), {
+  type: 'horizontal',
+  margin: -1,
+})
+</script>
+
+<style lang="scss" scoped>
+.divider {
+  &.horizontal {
+    width: 100%;
+    margin: 24px 0;
+    border-block-start: 1px solid rgba(5, 5, 5, .06);
+  }
+  &.vertical {
+    position: relative;
+    height: 1em;
+    display: inline-block;
+    margin: 0 8px;
+    border-inline-start: 1px solid rgba(5, 5, 5, .06);
+  }
+}
+</style>

frontend/src/components/Drawer.vue

@@ -0,0 +1,126 @@
+<template>
+  <Teleport to="body">
+    <Transition :name="`drawer-slide-${placement}`"
+      @afterLeave="contentVisible = false"
+      @before-enter="contentVisible = true"
+    >
+      <div :class="['drawer', placement]" v-show="visible" :style="{ width: props.width + 'px' }">
+        <div class="header">
+          <slot name="title"></slot>
+          <span class="close-btn" @click="emit('update:visible', false)"><IconClose /></span>
+        </div>
+        <div class="content" v-if="contentVisible" :style="contentStyle">
+          <slot></slot>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, type CSSProperties } from 'vue'
+
+const props = withDefaults(defineProps<{
+  visible: boolean
+  width?: number
+  contentStyle?: CSSProperties
+  placement?: 'left' | 'right'
+}>(), {
+  width: 320,
+  placement: 'right',
+})
+
+const emit = defineEmits<{
+  (event: 'update:visible', payload: boolean): void
+}>()
+
+const contentVisible = ref(false)
+
+const contentStyle = computed(() => {
+  return {
+    width: props.width + 'px',
+    ...(props.contentStyle || {})
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.drawer {
+  height: 100%;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: 5000;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+
+  &.left {
+    left: 0;
+    box-shadow: 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);
+  }
+  &.right {
+    right: 0;
+    box-shadow: -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);
+  }
+}
+
+.header {
+  height: 50px;
+  padding: 0 15px;
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  .close-btn {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    cursor: pointer;
+  }
+}
+.content {
+  padding: 0 15px;
+  overflow: auto;
+  flex: 1;
+}
+
+.drawer-slide-right-enter-active {
+  animation: drawer-slide-right-enter .25s both ease;
+}
+.drawer-slide-right-leave-active {
+  animation: drawer-slide-right-leave .25s both ease;
+}
+.drawer-slide-left-enter-active {
+  animation: drawer-slide-left-enter .25s both ease;
+}
+.drawer-slide-left-leave-active {
+  animation: drawer-slide-left-leave .25s both ease;
+}
+
+@keyframes drawer-slide-right-enter {
+  from {
+    transform: translateX(100%);
+  }
+}
+@keyframes drawer-slide-right-leave {
+  to {
+    transform: translateX(100%);
+  }
+}
+@keyframes drawer-slide-left-enter {
+  from {
+    transform: translateX(-100%);
+  }
+}
+@keyframes drawer-slide-left-leave {
+  to {
+    transform: translateX(-100%);
+  }
+}
+</style>

frontend/src/components/FileInput.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="file-input" @click="handleClick()">
+    <slot></slot>
+    <input 
+      class="input"
+      type="file" 
+      name="upload" 
+      ref="inputRef" 
+      :accept="accept" 
+      @change="$event => handleChange($event)"
+    >
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+withDefaults(defineProps<{
+  accept?: string
+}>(), {
+  accept: 'image/*',
+})
+
+const emit = defineEmits<{
+  (event: 'change', payload: FileList): void
+}>()
+
+const inputRef = ref<HTMLInputElement>()
+
+const handleClick = () => {
+  if (!inputRef.value) return
+  inputRef.value.value = ''
+  inputRef.value.click()
+}
+const handleChange = (e: Event) => {
+  const files = (e.target as HTMLInputElement).files
+  if (files) emit('change', files)
+}
+</script>
+
+<style lang="scss" scoped>
+.input {
+  display: none;
+}
+</style>

frontend/src/components/FullscreenSpin.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="fullscreen-spin" :class="{ 'mask': mask }" v-if="loading">
+    <div class="spin">
+      <div class="spinner"></div>
+      <div class="text">{{tip}}</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+withDefaults(defineProps<{
+  loading?: boolean
+  mask?: boolean
+  tip?: string
+}>(), {
+  loading: false,
+  mask: true,
+  tip: '',
+})
+</script>
+
+<style lang="scss" scoped>
+.fullscreen-spin {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &.mask {
+    background-color: rgba($color: #f1f1f1, $alpha: .7);
+  }
+}
+.spin {
+  width: 200px;
+  height: 200px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  margin-top: -100px;
+  margin-left: -100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.spinner {
+  width: 36px;
+  height: 36px;
+  border: 3px solid $themeColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spinner .8s linear infinite;
+}
+.text {
+  margin-top: 20px;
+  color: $themeColor;
+}
+@keyframes spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

frontend/src/components/GradientBar.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="gradient-bar">
+    <div class="bar" ref="barRef" :style="{ backgroundImage: gradientStyle }" @click="$event => addPoint($event)"></div>
+    <div class="point" 
+      :class="{ 'active': index === i }"
+      v-for="(item, i) in points" 
+      :key="item.pos + '-' + i" 
+      :style="{
+        backgroundColor: item.color,
+        left: `calc(${item.pos}% - 5px)`,
+      }"
+      @mousedown.left="movePoint(i)"
+      @click.right="removePoint(i)"
+    ></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { GradientColor } from '@/types/slides'
+import { ref, computed, watchEffect } from 'vue'
+
+const props = defineProps<{
+  value: GradientColor[]
+  index: number
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:value', payload: GradientColor[]): void
+  (event: 'update:index', payload: number): void
+}>()
+
+const points = ref<GradientColor[]>([])
+
+const barRef = ref<HTMLElement>()
+
+watchEffect(() => {
+  points.value = props.value
+  if (props.index > props.value.length - 1) emit('update:index', 0)
+})
+
+const gradientStyle = computed(() => {
+  const list = points.value.map(item => `${item.color} ${item.pos}%`)
+  return `linear-gradient(to right, ${list.join(',')})`
+})
+
+const removePoint = (index: number) => {
+  if (props.value.length <= 2) return
+
+  let targetIndex = 0
+
+  if (index === props.index) {
+    targetIndex = (index - 1 < 0) ? 0 : index - 1
+  }
+  else if (props.index === props.value.length - 1) {
+    targetIndex = props.value.length - 2
+  }
+
+  const values = props.value.filter((item, _index) => _index !== index)
+  emit('update:index', targetIndex)
+  emit('update:value', values)
+}
+
+const movePoint = (index: number) => {
+  let isMouseDown = true
+
+  document.onmousemove = e => {
+    if (!isMouseDown) return
+    if (!barRef.value) return
+
+    let pos = Math.round((e.clientX - barRef.value.getBoundingClientRect().left) / barRef.value.clientWidth * 100)
+    if (pos > 100) pos = 100
+    if (pos < 0) pos = 0
+
+    points.value = points.value.map((item, _index) => {
+      if (_index === index) return { ...item, pos }
+      return item
+    })
+  }
+  document.onmouseup = () => {
+    isMouseDown = false
+
+    const point = points.value[index]
+    const _points = [...points.value]
+    _points.splice(index, 1)
+
+    let targetIndex = 0
+    for (let i = 0; i < _points.length; i++) {
+      if (point.pos > _points[i].pos) targetIndex = i + 1
+    }
+
+    _points.splice(targetIndex, 0, point)
+
+    emit('update:index', targetIndex)
+    emit('update:value', _points)
+    
+    document.onmousemove = null
+    document.onmouseup = null
+  }
+}
+
+const addPoint = (e: MouseEvent) => {
+  if (props.value.length >= 6) return
+  if (!barRef.value) return
+  const pos = Math.round((e.clientX - barRef.value.getBoundingClientRect().left) / barRef.value.clientWidth * 100)
+
+  let targetIndex = 0
+  for (let i = 0; i < props.value.length; i++) {
+    if (pos > props.value[i].pos) targetIndex = i + 1
+  }
+  const color = props.value[targetIndex - 1] ? props.value[targetIndex - 1].color : props.value[targetIndex].color
+  const values = [...props.value]
+  values.splice(targetIndex, 0, { pos, color })
+  emit('update:index', targetIndex)
+  emit('update:value', values)
+}
+</script>
+
+<style lang="scss" scoped>
+.gradient-bar {
+  width: calc(100% - 10px);
+  height: 18px;
+  padding: 1px 0;
+  margin: 3px 0;
+  position: relative;
+  left: 5px;
+
+  .bar {
+    height: 16px;
+    border: 1px solid #d9d9d9;
+  }
+  .point {
+    width: 10px;
+    height: 18px;
+    background-color: #fff;
+    position: absolute;
+    top: 0;
+    border: 2px solid #fff;
+    outline: 1px solid #d9d9d9;
+    box-shadow: 0 0 2px 2px #d9d9d9;
+    border-radius: 1px;
+    cursor: pointer;
+
+    &.active {
+      outline: 1px solid $themeColor;
+      box-shadow: 0 0 2px 2px $themeColor;
+    }
+  }
+}
+</style>