feat: add style panel (doocs#391)

src/components/CodemirrorEditor/EditorHeader/PostInfo.vue

@@ -51,9 +51,9 @@ function post() {
 </script>
 
 <template>
-  <el-button plain type="primary" @click="prePost">
+  <Button variant="outline" @click="prePost">
     发布
-  </el-button>
+  </Button>
 
   <el-dialog
     title="发布"

src/components/CodemirrorEditor/EditorHeader/index.vue

@@ -2,13 +2,22 @@
 import { nextTick, reactive, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { ElNotification } from 'element-plus'
+import { Moon, Paintbrush, Sun } from 'lucide-vue-next'
 
 import PostInfo from './PostInfo.vue'
 import FileDropdown from './FileDropdown.vue'
 import HelpDropdown from './HelpDropdown.vue'
 import StyleDropdown from './StyleDropdown.vue'
 import EditDropdown from './EditDropdown.vue'
+import { altSign, codeBlockThemeOptions, colorOptions, ctrlKey, ctrlSign, fontFamilyOptions, fontSizeOptions, legendOptions, shiftSign, themeOptions } from '@/config'
 
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -17,8 +26,13 @@ import {
   DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { Button } from '@/components/ui/button'
 
-import { altSign, ctrlKey, ctrlSign, shiftSign } from '@/config'
 import { mergeCss, solveWeChatImage } from '@/utils'
 import { useStore } from '@/stores'
 
@@ -217,9 +231,222 @@ function updateOpen(isOpen) {
         :open-dropdown="openDropdown(4)" :update-open="updateOpen"
       />
     </div>
-    <el-button plain type="primary" @click="copy">
+    <Popover>
+      <PopoverTrigger>
+        <Button variant="outline">
+          <Paintbrush class="h-4 w-4" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent class="h-100 w-100 overflow-auto px-6" align="end">
+        <div class="space-y-4">
+          <div class="space-y-2">
+            <h2>
+              主题
+            </h2>
+            <div class="grid grid-cols-3 justify-items-center gap-2">
+              <Button
+                v-for="{ label, value } in themeOptions"
+                :key="value"
+                class="w-full"
+                variant="outline" :class="{
+                  'border-black dark:border-white': store.theme === value }" @click="store.themeChanged(value)"
+              >
+                {{ label }}
+              </Button>
+            </div>
+          </div>
+          <div class="space-y-2">
+            <h2>
+              字体
+            </h2>
+            <div class="grid grid-cols-3 justify-items-center gap-2">
+              <Button
+                v-for="{ label, value } in fontFamilyOptions"
+                :key="value"
+                variant="outline"
+                class="w-full"
+                :class="{ 'border-black dark:border-white': store.fontFamily === value }"
+                @click="store.fontChanged(value)"
+              >
+                {{ label }}
+              </Button>
+            </div>
+          </div>
+          <div class="space-y-2">
+            <h2>
+              字号
+            </h2>
+            <div class="grid grid-cols-5 justify-items-center gap-2">
+              <Button
+                v-for="{ value, desc } in fontSizeOptions"
+                :key="value"
+                variant="outline"
+                class="w-full"
+                :class="{
+                  'border-black dark:border-white': store.fontSize === value }" @click="store.sizeChanged(value)"
+              >
+                {{ desc }}
+              </Button>
+            </div>
+          </div>
+          <div class="space-y-2">
+            <h2>
+              主题色
+            </h2>
+            <div class="grid grid-cols-3 justify-items-center gap-2">
+              <Button
+                v-for="{ label, value } in colorOptions"
+                :key="value"
+                class="w-full"
+                variant="outline" :class="{
+                  'border-black dark:border-white': store.fontColor === value }" @click="store.colorChanged(value)"
+              >
+                <span
+                  class="mr-2 inline-block h-4 w-4 rounded-full" :style="{
+                    background: value,
+                  }"
+                />
+                {{ label }}
+              </Button>
+            </div>
+          </div>
+          <div class="space-y-2">
+            <h2>
+              自定义主题色
+            </h2>
+            <div>
+              <el-color-picker
+                v-model="fontColor"
+                :teleported="false"
+                show-alpha
+                @change="store.colorChanged"
+              />
+            </div>
+          </div>
+          <div class="space-y-2">
+            <h2>
+              代码块主题
+            </h2>
+            <div>
+              <Select v-model="store.codeBlockTheme" @update:model-value="store.codeBlockThemeChanged">
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a fruit" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem v-for="{ label, value } in codeBlockThemeOptions" :key="label" :value="value">
+                    {{ label }}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div class="space-y-2">
+            <h2>
+              图注格式
+            </h2>
+            <div class="grid grid-cols-3 justify-items-center gap-2">
+              <Button
+                v-for="{ label, value } in legendOptions"
+                :key="value"
+                class="w-full"
+                variant="outline" :class="{
+                  'border-black dark:border-white': store.legend === value }" @click="store.legendChanged(value)"
+              >
+                {{ label }}
+              </Button>
+            </div>
+          </div>
+
+          <div class="space-y-2">
+            <h2>
+              Mac 代码块
+            </h2>
+            <div class="grid grid-cols-5 justify-items-center gap-2">
+              <Button
+                class="w-full"
+                variant="outline" :class="{
+                  'border-black dark:border-white': store.isMacCodeBlock }" @click="!store.isMacCodeBlock && store.macCodeBlockChanged()"
+              >
+                开启
+              </Button>
+              <Button
+                class="w-full"
+                variant="outline" :class="{
+                  'border-black dark:border-white': !store.isMacCodeBlock }" @click="store.isMacCodeBlock && store.macCodeBlockChanged()"
+              >
+                关闭
+              </Button>
+            </div>
+          </div>
+          <div class="space-y-2">
+            <h2>
+              微信外链转底部引用
+            </h2>
+            <div class="grid grid-cols-5 justify-items-center gap-2">
+              <Button
+                class="w-full"
+                variant="outline" :class="{
+                  'border-black dark:border-white': store.isCiteStatus }" @click="!store.isCiteStatus && store.citeStatusChanged()"
+              >
+                开启
+              </Button>
+              <Button
+                class="w-full"
+                variant="outline" :class="{
+                  'border-black dark:border-white': !store.isCiteStatus }" @click="store.isCiteStatus && store.citeStatusChanged()"
+              >
+                关闭
+              </Button>
+            </div>
+          </div>
+          <div class="space-y-2">
+            <h2>
+              编辑区位置
+            </h2>
+            <div class="grid grid-cols-5 justify-items-center gap-2">
+              <Button
+                class="w-full"
+                variant="outline" :class="{
+                  'border-black dark:border-white': store.isEditOnLeft }" @click="!store.isEditOnLeft && store.toggleEditOnLeft()"
+              >
+                左侧
+              </Button>
+              <Button
+                class="w-full"
+                variant="outline" :class="{
+                  'border-black dark:border-white': !store.isEditOnLeft }" @click="store.isEditOnLeft && store.toggleEditOnLeft()"
+              >
+                右侧
+              </Button>
+            </div>
+          </div>
+          <div class="space-y-2">
+            <h2>
+              模式
+            </h2>
+            <div class="grid grid-cols-5 justify-items-center gap-2">
+              <Button
+                class="w-full"
+                variant="outline" :class="{
+                  'border-black dark:border-white': !isDark }" @click="store.toggleDark(false)"
+              >
+                <Sun class="h-4 w-4" />
+              </Button>
+              <Button
+                class="w-full"
+                variant="outline" :class="{
+                  'border-black dark:border-white': isDark }" @click="store.toggleDark(true)"
+              >
+                <Moon class="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+    <Button variant="outline" class="mx-2" @click="copy">
       复制
-    </el-button>
+    </Button>
 
     <PostInfo />
   </div>

src/components/ui/button/Button.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Primitive, type PrimitiveProps } from 'radix-vue'
+import { type ButtonVariants, buttonVariants } from '.'
+import { cn } from '@/lib/utils'
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

src/components/ui/button/index.ts

@@ -0,0 +1,35 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        xs: 'h-7 rounded px-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>

src/components/ui/popover/Popover.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
+import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <slot />
+  </PopoverRoot>
+</template>