mirror of
https://github.com/ctwj/urldb.git
synced 2025-11-25 11:29:37 +08:00
734 lines
21 KiB
TypeScript
734 lines
21 KiB
TypeScript
import type { DrawType, Options as StyledQRCodeProps } from 'qr-code-styling'
|
|
|
|
export interface CustomStyleProps {
|
|
borderRadius?: string
|
|
background?: string
|
|
}
|
|
|
|
export type PresetAttributes = {
|
|
style: CustomStyleProps
|
|
name: string
|
|
}
|
|
|
|
export type Preset = Omit<
|
|
Required<StyledQRCodeProps>,
|
|
'shape' | 'qrOptions' | 'nodeCanvas' | 'jsdom'
|
|
> &
|
|
PresetAttributes
|
|
|
|
const defaultPresetOptions = {
|
|
backgroundOptions: {
|
|
color: 'transparent'
|
|
},
|
|
imageOptions: {
|
|
margin: 0,
|
|
hideBackgroundDots: false,
|
|
imageSize: 0.4,
|
|
crossOrigin: undefined
|
|
},
|
|
width: 200,
|
|
height: 200,
|
|
margin: 0,
|
|
type: 'svg' as DrawType
|
|
}
|
|
|
|
// 预设样式配置
|
|
export const plainPreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'Plain',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%23000',
|
|
dotsOptions: { color: '#000000', type: 'square' },
|
|
cornersSquareOptions: { color: '#000000', type: 'square' },
|
|
cornersDotOptions: { color: '#000000', type: 'square' },
|
|
imageOptions: { margin: 8 },
|
|
style: { borderRadius: '0px', background: '#FFFFFF' }
|
|
}
|
|
|
|
export const roundedPreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'Rounded',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%23000',
|
|
dotsOptions: { color: '#000000', type: 'rounded' },
|
|
cornersSquareOptions: { color: '#000000', type: 'extra-rounded' },
|
|
cornersDotOptions: { color: '#000000', type: 'dot' },
|
|
imageOptions: { margin: 8 },
|
|
style: { borderRadius: '12px', background: '#FFFFFF' }
|
|
}
|
|
|
|
export const colorfulPreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'Colorful',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%233B82F6',
|
|
dotsOptions: { color: '#3B82F6', type: 'classy-rounded' },
|
|
cornersSquareOptions: { color: '#EF4444', type: 'extra-rounded' },
|
|
cornersDotOptions: { color: '#10B981', type: 'dot' },
|
|
imageOptions: { margin: 8 },
|
|
style: { borderRadius: '16px', background: '#F8FAFC' }
|
|
}
|
|
|
|
export const darkPreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'Dark',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%23FFF',
|
|
dotsOptions: { color: '#FFFFFF', type: 'classy' },
|
|
cornersSquareOptions: { color: '#FFFFFF', type: 'square' },
|
|
cornersDotOptions: { color: '#FFFFFF', type: 'square' },
|
|
imageOptions: { margin: 8 },
|
|
style: { borderRadius: '8px', background: '#1F2937' }
|
|
}
|
|
|
|
export const gradientPreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'Gradient',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%238B5CF6',
|
|
dotsOptions: { color: '#8B5CF6', type: 'extra-rounded' },
|
|
cornersSquareOptions: { color: '#EC4899', type: 'extra-rounded' },
|
|
cornersDotOptions: { color: '#F59E0B', type: 'dot' },
|
|
imageOptions: { margin: 8 },
|
|
style: { borderRadius: '20px', background: '#FEF3C7' }
|
|
}
|
|
|
|
export const minimalPreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'Minimal',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%236B7280',
|
|
dotsOptions: { color: '#6B7280', type: 'dots' },
|
|
cornersSquareOptions: { color: '#6B7280', type: 'dot' },
|
|
cornersDotOptions: { color: '#6B7280', type: 'dot' },
|
|
imageOptions: { margin: 8 },
|
|
style: { borderRadius: '4px', background: '#F9FAFB' }
|
|
}
|
|
|
|
export const techPreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'Tech',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%2300D4FF',
|
|
dotsOptions: { color: '#00D4FF', type: 'classy' },
|
|
cornersSquareOptions: { color: '#00D4FF', type: 'square' },
|
|
cornersDotOptions: { color: '#00D4FF', type: 'square' },
|
|
imageOptions: { margin: 8 },
|
|
style: { borderRadius: '0px', background: '#000000' }
|
|
}
|
|
|
|
// 透明预设
|
|
export const transparentPreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'Transparent',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%23374151',
|
|
dotsOptions: { color: '#374151', type: 'dots' },
|
|
cornersSquareOptions: { color: '#374151', type: 'dot' },
|
|
cornersDotOptions: { color: '#374151', type: 'dot' },
|
|
imageOptions: { margin: 8 },
|
|
style: { borderRadius: '8px', background: 'transparent' }
|
|
}
|
|
|
|
// 渐变预设 - 二维码组成部分使用渐变
|
|
export const gradientModernPreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'Gradient Modern',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%23667eea',
|
|
dotsOptions: {
|
|
type: 'rounded',
|
|
gradient: {
|
|
type: 'linear',
|
|
rotation: 45,
|
|
colorStops: [
|
|
{ offset: 0, color: '#667eea' },
|
|
{ offset: 0.5, color: '#764ba2' },
|
|
{ offset: 1, color: '#f093fb' }
|
|
]
|
|
}
|
|
},
|
|
cornersSquareOptions: {
|
|
type: 'extra-rounded',
|
|
gradient: {
|
|
type: 'radial',
|
|
colorStops: [
|
|
{ offset: 0, color: '#f093fb' },
|
|
{ offset: 1, color: '#f5576c' }
|
|
]
|
|
}
|
|
},
|
|
cornersDotOptions: {
|
|
type: 'dot',
|
|
gradient: {
|
|
type: 'linear',
|
|
rotation: 90,
|
|
colorStops: [
|
|
{ offset: 0, color: '#fda085' },
|
|
{ offset: 1, color: '#f5576c' }
|
|
]
|
|
}
|
|
},
|
|
imageOptions: { margin: 8 },
|
|
style: {
|
|
borderRadius: '16px',
|
|
background: '#F8FAFC'
|
|
}
|
|
}
|
|
|
|
// 彩虹渐变预设 - 二维码组成部分使用彩虹渐变
|
|
export const rainbowPreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'Rainbow',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%23ff0000',
|
|
dotsOptions: {
|
|
type: 'dots',
|
|
gradient: {
|
|
type: 'linear',
|
|
rotation: 45,
|
|
colorStops: [
|
|
{ offset: 0, color: '#ff0000' },
|
|
{ offset: 0.14, color: '#ff7f00' },
|
|
{ offset: 0.28, color: '#ffff00' },
|
|
{ offset: 0.42, color: '#00ff00' },
|
|
{ offset: 0.57, color: '#0000ff' },
|
|
{ offset: 0.71, color: '#4b0082' },
|
|
{ offset: 0.85, color: '#9400d3' },
|
|
{ offset: 1, color: '#ff0000' }
|
|
]
|
|
}
|
|
},
|
|
cornersSquareOptions: {
|
|
type: 'extra-rounded',
|
|
gradient: {
|
|
type: 'radial',
|
|
colorStops: [
|
|
{ offset: 0, color: '#ffff00' },
|
|
{ offset: 0.5, color: '#00ff00' },
|
|
{ offset: 1, color: '#0000ff' }
|
|
]
|
|
}
|
|
},
|
|
cornersDotOptions: {
|
|
type: 'dot',
|
|
gradient: {
|
|
type: 'linear',
|
|
rotation: 90,
|
|
colorStops: [
|
|
{ offset: 0, color: '#ff7f00' },
|
|
{ offset: 0.5, color: '#ff00ff' },
|
|
{ offset: 1, color: '#00ffff' }
|
|
]
|
|
}
|
|
},
|
|
imageOptions: { margin: 8 },
|
|
style: {
|
|
borderRadius: '20px',
|
|
background: '#FEFEFE'
|
|
}
|
|
}
|
|
|
|
// 动态颜色预设 - 二维码组成部分使用动态渐变
|
|
export const dynamicPreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'Dynamic',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%23ee7752',
|
|
dotsOptions: {
|
|
type: 'rounded',
|
|
gradient: {
|
|
type: 'linear',
|
|
rotation: -45,
|
|
colorStops: [
|
|
{ offset: 0, color: '#ee7752' },
|
|
{ offset: 0.33, color: '#e73c7e' },
|
|
{ offset: 0.66, color: '#23a6d5' },
|
|
{ offset: 1, color: '#23d5ab' }
|
|
]
|
|
}
|
|
},
|
|
cornersSquareOptions: {
|
|
type: 'extra-rounded',
|
|
gradient: {
|
|
type: 'radial',
|
|
colorStops: [
|
|
{ offset: 0, color: '#23d5ab' },
|
|
{ offset: 0.5, color: '#ee7752' },
|
|
{ offset: 1, color: '#e73c7e' }
|
|
]
|
|
}
|
|
},
|
|
cornersDotOptions: {
|
|
type: 'dot',
|
|
gradient: {
|
|
type: 'linear',
|
|
rotation: 45,
|
|
colorStops: [
|
|
{ offset: 0, color: '#23a6d5' },
|
|
{ offset: 0.5, color: '#23d5ab' },
|
|
{ offset: 1, color: '#ee7752' }
|
|
]
|
|
}
|
|
},
|
|
imageOptions: { margin: 8 },
|
|
style: {
|
|
borderRadius: '12px',
|
|
background: '#F5F5F5',
|
|
className: 'qr-dynamic'
|
|
}
|
|
}
|
|
|
|
// 玻璃态预设
|
|
export const glassPreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'Glass',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%231F2937',
|
|
dotsOptions: { color: '#1F2937', type: 'dots' },
|
|
cornersSquareOptions: { color: '#1F2937', type: 'dot' },
|
|
cornersDotOptions: { color: '#1F2937', type: 'dot' },
|
|
imageOptions: { margin: 8 },
|
|
style: {
|
|
borderRadius: '16px',
|
|
background: 'rgba(255, 255, 255, 0.25)',
|
|
backdropFilter: 'blur(10px)',
|
|
border: '1px solid rgba(255, 255, 255, 0.18)'
|
|
}
|
|
}
|
|
|
|
// 霓虹预设 - 二维码组成部分使用霓虹渐变
|
|
export const neonPreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'Neon',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%2300FF88',
|
|
dotsOptions: {
|
|
type: 'square',
|
|
gradient: {
|
|
type: 'linear',
|
|
rotation: 45,
|
|
colorStops: [
|
|
{ offset: 0, color: '#00FF88' },
|
|
{ offset: 0.5, color: '#00FFAA' },
|
|
{ offset: 1, color: '#00FFCC' }
|
|
]
|
|
}
|
|
},
|
|
cornersSquareOptions: {
|
|
type: 'square',
|
|
gradient: {
|
|
type: 'radial',
|
|
colorStops: [
|
|
{ offset: 0, color: '#FF00FF' },
|
|
{ offset: 0.5, color: '#FF00AA' },
|
|
{ offset: 1, color: '#FF0088' }
|
|
]
|
|
}
|
|
},
|
|
cornersDotOptions: {
|
|
type: 'square',
|
|
gradient: {
|
|
type: 'linear',
|
|
rotation: 90,
|
|
colorStops: [
|
|
{ offset: 0, color: '#00FFFF' },
|
|
{ offset: 0.5, color: '#00FFEE' },
|
|
{ offset: 1, color: '#00FFCC' }
|
|
]
|
|
}
|
|
},
|
|
imageOptions: { margin: 8 },
|
|
style: {
|
|
borderRadius: '8px',
|
|
background: '#1a1a1a',
|
|
boxShadow: '0 0 20px rgba(0, 255, 136, 0.3), 0 0 40px rgba(0, 255, 136, 0.2), 0 0 60px rgba(0, 255, 136, 0.1)',
|
|
className: 'qr-neon'
|
|
}
|
|
}
|
|
|
|
export const naturePreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'Nature',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%23059669',
|
|
dotsOptions: { color: '#059669', type: 'rounded' },
|
|
cornersSquareOptions: { color: '#059669', type: 'extra-rounded' },
|
|
cornersDotOptions: { color: '#10B981', type: 'dot' },
|
|
imageOptions: { margin: 8 },
|
|
style: { borderRadius: '24px', background: '#ECFDF5' }
|
|
}
|
|
|
|
export const warmPreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'Warm',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%23DC2626',
|
|
dotsOptions: { color: '#DC2626', type: 'classy-rounded' },
|
|
cornersSquareOptions: { color: '#EA580C', type: 'extra-rounded' },
|
|
cornersDotOptions: { color: '#F59E0B', type: 'dot' },
|
|
imageOptions: { margin: 8 },
|
|
style: { borderRadius: '16px', background: '#FEF2F2' }
|
|
}
|
|
|
|
export const coolPreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'Cool',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%231E40AF',
|
|
dotsOptions: { color: '#1E40AF', type: 'extra-rounded' },
|
|
cornersSquareOptions: { color: '#7C3AED', type: 'extra-rounded' },
|
|
cornersDotOptions: { color: '#EC4899', type: 'dot' },
|
|
imageOptions: { margin: 8 },
|
|
style: { borderRadius: '20px', background: '#EFF6FF' }
|
|
}
|
|
|
|
// 新增：金属渐变预设
|
|
export const metallicPreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'Metallic',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%23FFD700',
|
|
dotsOptions: {
|
|
type: 'rounded',
|
|
gradient: {
|
|
type: 'linear',
|
|
rotation: 135,
|
|
colorStops: [
|
|
{ offset: 0, color: '#C0C0C0' },
|
|
{ offset: 0.25, color: '#E5E5E5' },
|
|
{ offset: 0.5, color: '#FFD700' },
|
|
{ offset: 0.75, color: '#E5E5E5' },
|
|
{ offset: 1, color: '#C0C0C0' }
|
|
]
|
|
}
|
|
},
|
|
cornersSquareOptions: {
|
|
type: 'extra-rounded',
|
|
gradient: {
|
|
type: 'radial',
|
|
colorStops: [
|
|
{ offset: 0, color: '#FFD700' },
|
|
{ offset: 0.5, color: '#C0C0C0' },
|
|
{ offset: 1, color: '#808080' }
|
|
]
|
|
}
|
|
},
|
|
cornersDotOptions: {
|
|
type: 'dot',
|
|
gradient: {
|
|
type: 'linear',
|
|
rotation: 45,
|
|
colorStops: [
|
|
{ offset: 0, color: '#FFD700' },
|
|
{ offset: 1, color: '#B8860B' }
|
|
]
|
|
}
|
|
},
|
|
imageOptions: { margin: 8 },
|
|
style: {
|
|
borderRadius: '16px',
|
|
background: '#F8F8F8'
|
|
}
|
|
}
|
|
|
|
// 新增：海洋渐变预设
|
|
export const oceanPreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'Ocean',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%2300CED1',
|
|
dotsOptions: {
|
|
type: 'dots',
|
|
gradient: {
|
|
type: 'radial',
|
|
colorStops: [
|
|
{ offset: 0, color: '#00CED1' },
|
|
{ offset: 0.5, color: '#4682B4' },
|
|
{ offset: 1, color: '#191970' }
|
|
]
|
|
}
|
|
},
|
|
cornersSquareOptions: {
|
|
type: 'square',
|
|
gradient: {
|
|
type: 'linear',
|
|
rotation: 90,
|
|
colorStops: [
|
|
{ offset: 0, color: '#00FFFF' },
|
|
{ offset: 0.5, color: '#00CED1' },
|
|
{ offset: 1, color: '#0000CD' }
|
|
]
|
|
}
|
|
},
|
|
cornersDotOptions: {
|
|
type: 'dot',
|
|
gradient: {
|
|
type: 'linear',
|
|
rotation: 45,
|
|
colorStops: [
|
|
{ offset: 0, color: '#87CEEB' },
|
|
{ offset: 1, color: '#4682B4' }
|
|
]
|
|
}
|
|
},
|
|
imageOptions: { margin: 8 },
|
|
style: {
|
|
borderRadius: '20px',
|
|
background: '#E0F2FE'
|
|
}
|
|
}
|
|
|
|
// 新增：火焰渐变预设
|
|
export const firePreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'Fire',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%23FF4500',
|
|
dotsOptions: {
|
|
type: 'classy-rounded',
|
|
gradient: {
|
|
type: 'radial',
|
|
colorStops: [
|
|
{ offset: 0, color: '#FFFF00' },
|
|
{ offset: 0.3, color: '#FFA500' },
|
|
{ offset: 0.7, color: '#FF4500' },
|
|
{ offset: 1, color: '#8B0000' }
|
|
]
|
|
}
|
|
},
|
|
cornersSquareOptions: {
|
|
type: 'extra-rounded',
|
|
gradient: {
|
|
type: 'linear',
|
|
rotation: 45,
|
|
colorStops: [
|
|
{ offset: 0, color: '#FF6347' },
|
|
{ offset: 0.5, color: '#FF4500' },
|
|
{ offset: 1, color: '#DC143C' }
|
|
]
|
|
}
|
|
},
|
|
cornersDotOptions: {
|
|
type: 'square',
|
|
gradient: {
|
|
type: 'linear',
|
|
rotation: 90,
|
|
colorStops: [
|
|
{ offset: 0, color: '#FFA500' },
|
|
{ offset: 1, color: '#FF4500' }
|
|
]
|
|
}
|
|
},
|
|
imageOptions: { margin: 8 },
|
|
style: {
|
|
borderRadius: '12px',
|
|
background: '#FFF7ED'
|
|
}
|
|
}
|
|
|
|
// 原项目预设
|
|
export const padletPreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'Padlet',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%237ABE4A',
|
|
dotsOptions: { color: '#7ABE4A', type: 'extra-rounded' },
|
|
cornersSquareOptions: { color: '#ed457e', type: 'extra-rounded' },
|
|
cornersDotOptions: { color: '#ed457e', type: 'square' },
|
|
imageOptions: { margin: 8 },
|
|
style: { borderRadius: '24px', background: '#000000' }
|
|
}
|
|
|
|
|
|
export const vercelDarkPreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'Vercel Dark',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:logo-vercel.svg?color=%23FFF',
|
|
dotsOptions: { color: '#FFFFFF', type: 'classy' },
|
|
cornersSquareOptions: { color: '#FFFFFF', type: 'square' },
|
|
cornersDotOptions: { color: '#FFFFFF', type: 'square' },
|
|
imageOptions: { margin: 8 },
|
|
style: { borderRadius: '0px', background: '#000000' }
|
|
}
|
|
|
|
|
|
export const uiliciousPreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'UIlicious',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%23FF6B6B',
|
|
dotsOptions: { color: '#FF6B6B', type: 'extra-rounded' },
|
|
cornersSquareOptions: { color: '#FF6B6B', type: 'extra-rounded' },
|
|
cornersDotOptions: { color: '#FF6B6B', type: 'square' },
|
|
imageOptions: { margin: 8 },
|
|
style: { borderRadius: '24px', background: '#FFFFFF' }
|
|
}
|
|
|
|
export const viteConf2023Preset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'ViteConf 2023',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%23646CFF',
|
|
dotsOptions: { color: '#646CFF', type: 'classy-rounded' },
|
|
cornersSquareOptions: { color: '#646CFF', type: 'square' },
|
|
cornersDotOptions: { color: '#646CFF', type: 'square' },
|
|
imageOptions: { margin: 8 },
|
|
style: { borderRadius: '12px', background: '#000000' }
|
|
}
|
|
|
|
export const vueJsPreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'Vue.js',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%2342D392',
|
|
dotsOptions: { color: '#42D392', type: 'classy-rounded' },
|
|
cornersSquareOptions: { color: '#42D392', type: 'square' },
|
|
cornersDotOptions: { color: '#42D392', type: 'square' },
|
|
imageOptions: { margin: 8 },
|
|
style: { borderRadius: '12px', background: '#000000' }
|
|
}
|
|
|
|
|
|
export const lyqhtPreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'LYQHT',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%23FF6B6B',
|
|
dotsOptions: { color: '#FF6B6B', type: 'extra-rounded' },
|
|
cornersSquareOptions: { color: '#FF6B6B', type: 'extra-rounded' },
|
|
cornersDotOptions: { color: '#FF6B6B', type: 'square' },
|
|
imageOptions: { margin: 8 },
|
|
style: { borderRadius: '24px', background: '#000000' }
|
|
}
|
|
|
|
export const pejuangKodePreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'Pejuang Kode',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%23252f3f',
|
|
dotsOptions: { color: '#252f3f', type: 'classy-rounded' },
|
|
cornersSquareOptions: { color: '#252f3f', type: 'dot' },
|
|
cornersDotOptions: { color: '#f05252', type: 'dot' },
|
|
imageOptions: { margin: 8 },
|
|
style: { borderRadius: '22px', background: '#ffffff' }
|
|
}
|
|
|
|
export const geeksHackingPreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'GeeksHacking',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%23cebe2c',
|
|
dotsOptions: { color: '#cebe2c', type: 'classy' },
|
|
cornersSquareOptions: { color: '#ced043', type: 'dot' },
|
|
cornersDotOptions: { color: '#ced043', type: 'dot' },
|
|
imageOptions: { margin: 2 },
|
|
style: { borderRadius: '28px', background: '#000000' }
|
|
}
|
|
|
|
export const spDigitalPreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'SP Digital',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%232196b0',
|
|
dotsOptions: { color: '#2196b0', type: 'extra-rounded' },
|
|
cornersSquareOptions: { color: '#2196b0', type: 'dot' },
|
|
cornersDotOptions: { color: '#11b2b1', type: 'dot' },
|
|
imageOptions: { margin: 2 },
|
|
style: { borderRadius: '28px', background: '#ffffff' }
|
|
}
|
|
|
|
export const govtechStackCommunityPreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'GovTech - Stack Community',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/ion:qr-code-outline.svg?color=%23000000',
|
|
dotsOptions: { color: '#000000', type: 'square' },
|
|
cornersSquareOptions: { color: '#000000', type: 'square' },
|
|
cornersDotOptions: { color: '#000000', type: 'square' },
|
|
imageOptions: { margin: 0 },
|
|
style: { borderRadius: '24px', background: '#ffffff' }
|
|
}
|
|
|
|
export const qqGroupPreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'QQ Group',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/simple-icons:qq.svg?color=%2371cdfc',
|
|
dotsOptions: { color: '#71cdfc', type: 'dots' },
|
|
cornersSquareOptions: { color: '#71cdfc', type: 'dot' },
|
|
cornersDotOptions: { color: '#71cdfc', type: 'dot' },
|
|
imageOptions: { margin: 8 },
|
|
style: { borderRadius: '24px', background: '#ffffff' }
|
|
}
|
|
|
|
export const wechatGroupPreset: Preset = {
|
|
...defaultPresetOptions,
|
|
name: 'WeChat Group',
|
|
data: 'https://pan.l9.lc',
|
|
image: 'https://api.iconify.design/simple-icons:wechat.svg?color=%23000000',
|
|
dotsOptions: { color: '#000000', type: 'rounded' },
|
|
cornersSquareOptions: { color: '#000000', type: 'rounded' },
|
|
cornersDotOptions: { color: '#000000', type: 'rounded' },
|
|
imageOptions: { margin: 8 },
|
|
margin: 4,
|
|
style: { borderRadius: '24px', background: '#ffffff' }
|
|
}
|
|
|
|
|
|
|
|
// 预设列表
|
|
export const builtInPresets: Preset[] = [
|
|
// 我们的自定义预设
|
|
plainPreset,
|
|
roundedPreset,
|
|
colorfulPreset,
|
|
darkPreset,
|
|
gradientPreset,
|
|
minimalPreset,
|
|
techPreset,
|
|
// 高级样式预设
|
|
transparentPreset,
|
|
gradientModernPreset,
|
|
rainbowPreset,
|
|
dynamicPreset,
|
|
glassPreset,
|
|
neonPreset,
|
|
naturePreset,
|
|
warmPreset,
|
|
coolPreset,
|
|
metallicPreset,
|
|
oceanPreset,
|
|
firePreset,
|
|
// 原项目预设
|
|
padletPreset,
|
|
vercelDarkPreset,
|
|
uiliciousPreset,
|
|
viteConf2023Preset,
|
|
vueJsPreset,
|
|
lyqhtPreset,
|
|
pejuangKodePreset,
|
|
geeksHackingPreset,
|
|
spDigitalPreset,
|
|
govtechStackCommunityPreset,
|
|
// 社交应用预设
|
|
qqGroupPreset,
|
|
wechatGroupPreset
|
|
]
|
|
|
|
// 默认预设
|
|
export const defaultPreset: Preset = builtInPresets[0]
|
|
|
|
// 获取所有预设
|
|
export const allQrCodePresets: Preset[] = builtInPresets
|
|
|
|
// 根据名称查找预设
|
|
export function findPresetByName(name: string): Preset | undefined {
|
|
return allQrCodePresets.find(preset => preset.name === name)
|
|
}
|
|
|
|
// 随机获取预设
|
|
export function getRandomPreset(): Preset {
|
|
return allQrCodePresets[Math.floor(Math.random() * allQrCodePresets.length)]
|
|
}
|