style: fix eslint error (#332)

src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue

@@ -18,7 +18,7 @@ import {
   HoverCardTrigger,
 } from '@/components/ui/hover-card'
 
-import { codeBlockThemeOptions, colorOptions, fontFamilyOptions, fontSizeOptions, githubConfig, legendOptions, themeOptions } from '@/config'
+import { codeBlockThemeOptions, colorOptions, fontFamilyOptions, fontSizeOptions, legendOptions, themeOptions } from '@/config'
 import { useStore } from '@/stores'
 
 const store = useStore()

src/components/CodemirrorEditor/EditorHeader/index.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { nextTick, ref } from 'vue'
+import { nextTick } from 'vue'
 import { storeToRefs } from 'pinia'
 import { ElNotification } from 'element-plus'
 import CodeMirror from 'codemirror'
@@ -19,12 +19,6 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from '@/components/ui/hover-card'
-
 import { mergeCss, solveWeChatImage } from '@/utils'
 import { useStore } from '@/stores'
 

src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -10,7 +10,7 @@ import {
 import { Check } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes[`class`] }>()
 const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
 
 const delegatedProps = computed(() => {
@@ -30,9 +30,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       props.class,
     )"
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute left-2 h-3.5 w-3.5 flex items-center justify-center">
       <DropdownMenuItemIndicator>
-        <Check class="w-4 h-4" />
+        <Check class="h-4 w-4" />
       </DropdownMenuItemIndicator>
     </span>
     <slot />

src/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -10,7 +10,7 @@ import {
 import { cn } from '@/lib/utils'
 
 const props = withDefaults(
-  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes[`class`] }>(),
   {
     sideOffset: 4,
   },

src/components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
 import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes[`class`], inset?: boolean }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props

src/components/ui/dropdown-menu/DropdownMenuLabel.vue

@@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
 import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes[`class`], inset?: boolean }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props

src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -10,7 +10,7 @@ import {
 import { Circle } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes[`class`] }>()
 
 const emits = defineEmits<DropdownMenuRadioItemEmits>()
 
@@ -31,7 +31,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       props.class,
     )"
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute left-2 h-3.5 w-3.5 flex items-center justify-center">
       <DropdownMenuItemIndicator>
         <Circle class="h-2 w-2 fill-current" />
       </DropdownMenuItemIndicator>

src/components/ui/dropdown-menu/DropdownMenuSeparator.vue

@@ -7,7 +7,7 @@ import {
 import { cn } from '@/lib/utils'
 
 const props = defineProps<DropdownMenuSeparatorProps & {
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes[`class`]
 }>()
 
 const delegatedProps = computed(() => {

src/components/ui/dropdown-menu/DropdownMenuShortcut.vue

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes[`class`]
 }>()
 </script>
 

src/components/ui/dropdown-menu/DropdownMenuSubContent.vue

@@ -8,7 +8,7 @@ import {
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes[`class`] }>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()
 
 const delegatedProps = computed(() => {

src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -8,7 +8,7 @@ import {
 import { ChevronRight } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes[`class`] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props

src/components/ui/hover-card/HoverCardContent.vue

@@ -9,7 +9,7 @@ import {
 import { cn } from '@/lib/utils'
 
 const props = withDefaults(
-  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),
+  defineProps<HoverCardContentProps & { class?: HTMLAttributes[`class`] }>(),
   {
     sideOffset: 4,
   },

src/utils/index.js

@@ -3,7 +3,7 @@ import prettier from 'prettier/standalone'
 import prettierCss from 'prettier/parser-postcss'
 import prettierMarkdown from 'prettier/parser-markdown'
 
-import { defaultTheme, prefix } from '@/config'
+import { prefix } from '@/config'
 
 export function addPrefix(str) {
   return `${prefix}__${str}`
@@ -323,10 +323,13 @@ export function exportHTML() {
 }
 
 /**
- * 生成列表字符串
- * @param {*} data 对应内容集合
- * @param {*} rows 行
- * @param {*} cols 列
+ * 根据数据生成 Markdown 表格
+ *
+ * @param {object} options - 选项
+ * @param {object} options.data - 表格数据
+ * @param {number} options.rows - 行数
+ * @param {number} options.cols - 列数
+ * @returns {string} 生成的 Markdown 表格
  */
 export function createTable({ data, rows, cols }) {
   let table = ``
@@ -354,8 +357,8 @@ export function toBase64(file) {
 }
 
 export function checkImage(file) {
-  // check filename suffix
-  const isValidSuffix = /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name)
+  // 检查文件名后缀
+  const isValidSuffix = /\.(gif|jpe?g|png)$/i.test(file.name)
   if (!isValidSuffix) {
     return {
       ok: false,
@@ -363,15 +366,15 @@ export function checkImage(file) {
     }
   }
 
-  // check file size
-  const maxSize = 10
-  const valid = file.size / 1024 / 1024 <= maxSize
-  if (!valid) {
+  // 检查文件大小
+  const maxSizeMB = 10
+  if (file.size > maxSizeMB * 1024 * 1024) {
     return {
       ok: false,
-      msg: `由于公众号限制，图片大小不能超过 ${maxSize}M`,
+      msg: `由于公众号限制，图片大小不能超过 ${maxSizeMB}M`,
     }
   }
+
   return { ok: true }
 }
 

src/utils/wx-renderer.js

@@ -24,7 +24,7 @@ class WxRenderer {
         'font-size': this.opts.size,
       })
       for (const ele in themeTpl.inline) {
-        if (themeTpl.inline.hasOwnProperty(ele)) {
+        if (Object.prototype.hasOwnProperty.call(themeTpl.inline, ele)) {
           const style = themeTpl.inline[ele]
           mapping[ele] = merge(themeTpl.BASE, style)
         }
@@ -32,7 +32,7 @@ class WxRenderer {
 
       const base_block = merge(base, {})
       for (const ele in themeTpl.block) {
-        if (themeTpl.block.hasOwnProperty(ele)) {
+        if (Object.prototype.hasOwnProperty.call(themeTpl.block, ele)) {
           const style = themeTpl.block[ele]
           mapping[ele] = merge(base_block, style)
         }
@@ -151,12 +151,12 @@ class WxRenderer {
           `code`,
         )}>${text}</code></pre>`
       }
-      renderer.codespan = (text, lang) =>
+      renderer.codespan = (text, _) =>
         `<code ${getStyles(`codespan`)}>${text}</code>`
       renderer.listitem = text =>
         `<li ${getStyles(`listitem`)}><span><%s/></span>${text}</li>`
 
-      renderer.list = (text, ordered, start) => {
+      renderer.list = (text, ordered, _) => {
         text = text.replace(/<\/*p .*?>/g, ``).replace(/<\/*p>/g, ``)
         const segments = text.split(`<%s/>`)
         if (!ordered) {
@@ -220,7 +220,7 @@ class WxRenderer {
         `<section style="padding:0 8px;"><table class="preview-table"><thead ${getStyles(
           `thead`,
         )}>${header}</thead><tbody>${body}</tbody></table></section>`
-      renderer.tablecell = (text, flags) =>
+      renderer.tablecell = (text, _) =>
         `<td ${getStyles(`td`)}>${text}</td>`
       renderer.hr = () => `<hr ${getStyles(`hr`)}>`
       return renderer

tailwind.config.js

@@ -1,87 +1,87 @@
-const animate = require("tailwindcss-animate")
+const animate = require(`tailwindcss-animate`)
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: ["class"],
-  safelist: ["dark"],
-  prefix: "",
+  darkMode: [`class`],
+  safelist: [`dark`],
+  prefix: ``,
   experimental: {
     optimizeUniversalDefaults: true,
   },
 
   content: [
-    './pages/**/*.{ts,tsx,vue}',
-    './components/**/*.{ts,tsx,vue}',
-    './app/**/*.{ts,tsx,vue}',
-    './src/**/*.{ts,tsx,vue}',
+    `./pages/**/*.{ts,tsx,vue}`,
+    `./components/**/*.{ts,tsx,vue}`,
+    `./app/**/*.{ts,tsx,vue}`,
+    `./src/**/*.{ts,tsx,vue}`,
   ],
 
   theme: {
     extend: {
       colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
+        border: `hsl(var(--border))`,
+        input: `hsl(var(--input))`,
+        ring: `hsl(var(--ring))`,
+        background: `hsl(var(--background))`,
+        foreground: `hsl(var(--foreground))`,
         primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
+          DEFAULT: `hsl(var(--primary))`,
+          foreground: `hsl(var(--primary-foreground))`,
         },
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
+          DEFAULT: `hsl(var(--secondary))`,
+          foreground: `hsl(var(--secondary-foreground))`,
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
+          DEFAULT: `hsl(var(--destructive))`,
+          foreground: `hsl(var(--destructive-foreground))`,
         },
         muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
+          DEFAULT: `hsl(var(--muted))`,
+          foreground: `hsl(var(--muted-foreground))`,
         },
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
+          DEFAULT: `hsl(var(--accent))`,
+          foreground: `hsl(var(--accent-foreground))`,
         },
         popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+          DEFAULT: `hsl(var(--popover))`,
+          foreground: `hsl(var(--popover-foreground))`,
         },
         card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
+          DEFAULT: `hsl(var(--card))`,
+          foreground: `hsl(var(--card-foreground))`,
         },
       },
       borderRadius: {
-      	xl: "calc(var(--radius) + 4px)",
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        xl: `calc(var(--radius) + 4px)`,
+        lg: `var(--radius)`,
+        md: `calc(var(--radius) - 2px)`,
+        sm: `calc(var(--radius) - 4px)`,
       },
       keyframes: {
-        "accordion-down": {
+        'accordion-down': {
           from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
+          to: { height: `var(--radix-accordion-content-height)` },
         },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
+        'accordion-up': {
+          from: { height: `var(--radix-accordion-content-height)` },
           to: { height: 0 },
         },
-        "collapsible-down": {
+        'collapsible-down': {
           from: { height: 0 },
-          to: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: `var(--radix-collapsible-content-height)` },
         },
-        "collapsible-up": {
-          from: { height: 'var(--radix-collapsible-content-height)' },
+        'collapsible-up': {
+          from: { height: `var(--radix-collapsible-content-height)` },
           to: { height: 0 },
         },
       },
       animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-        "collapsible-down": "collapsible-down 0.2s ease-in-out",
-        "collapsible-up": "collapsible-up 0.2s ease-in-out",
+        'accordion-down': `accordion-down 0.2s ease-out`,
+        'accordion-up': `accordion-up 0.2s ease-out`,
+        'collapsible-down': `collapsible-down 0.2s ease-in-out`,
+        'collapsible-up': `collapsible-up 0.2s ease-in-out`,
       },
     },
   },