uview-ultra 4.5.46

package/components/up-color-picker/up-color-picker.uvue

@@ -0,0 +1,1045 @@
+<template>
+	<view class="up-color-picker">
+		<view class="up-color-picker__trigger" :style="triggerStyle" @click="open">
+			<slot></slot>
+		</view>
+		<up-popup :show="show" mode="bottom" round="10" @close="close" @closed="closedHandler" :closeOnClickOverlay="true">
+			<view class="up-color-picker__content">
+				<view class="up-color-picker__header">
+					<text class="up-color-picker__title">选择颜色</text>
+				</view>
+
+				<view class="up-color-picker__switch">
+					<view
+						class="up-color-picker__switch-item"
+						:class="{ 'up-color-picker__switch-item--active': colorTypeIndex == 0 }"
+						@click="changeColorType(0)"
+					>
+						<text class="up-color-picker__switch-text">纯色</text>
+					</view>
+					<view
+						class="up-color-picker__switch-item"
+						:class="{ 'up-color-picker__switch-item--active': colorTypeIndex == 1 }"
+						@click="changeColorType(1)"
+					>
+						<text class="up-color-picker__switch-text">渐变</text>
+					</view>
+				</view>
+
+				<view v-if="colorTypeIndex == 1" class="up-color-picker__gradient">
+					<view class="up-color-picker__gradient-track" :style="gradientTrackStyle">
+						<view
+							v-for="(item, index) in gradientColors"
+							:key="index"
+							class="up-color-picker__gradient-pointer"
+							:style="getGradientPointerStyle(item)"
+							@touchstart="onPointerTouchStart(index)"
+							@touchmove="onPointerTouchMove"
+							@touchend="onPointerTouchEnd"
+							@click="openColorPickerForGradient(index)"
+						>
+							<view class="up-color-picker__gradient-pointer-inner" :style="getGradientPointerInnerStyle(item)"></view>
+						</view>
+					</view>
+					<view class="up-color-picker__gradient-controls">
+						<up-button type="primary" size="mini" plain class="up-color-picker__add-btn" @click="addGradientColor">添加颜色</up-button>
+						<up-button type="info" size="mini" plain class="up-color-picker__add-btn" @click="removeEditingGradientColor">删除当前</up-button>
+					</view>
+					<view class="up-color-picker__gradient-direction">
+						<text class="up-color-picker__label">方向:</text>
+						<view
+							class="up-color-picker__direction-circle"
+							@touchstart="onDirectionTouchStart"
+							@touchmove="onDirectionTouchMove"
+							@touchend="onDirectionTouchEnd"
+						>
+							<view class="up-color-picker__direction-pointer" :style="directionPointerStyle"></view>
+						</view>
+					</view>
+				</view>
+
+				<view class="up-color-picker__solid">
+					<view
+						class="up-color-picker__saturation"
+						:style="saturationStyle"
+						@touchstart="onSaturationTouchStart"
+						@touchmove="onSaturationTouchMove"
+						@touchend="onSaturationTouchEnd"
+					>
+						<view class="up-color-picker__saturation-white"></view>
+						<view class="up-color-picker__saturation-black"></view>
+						<view class="up-color-picker__saturation-pointer" :style="saturationPointerStyle"></view>
+					</view>
+
+					<view
+						class="up-color-picker__hue"
+						@touchstart="onHueTouchStart"
+						@touchmove="onHueTouchMove"
+						@touchend="onHueTouchEnd"
+					>
+						<view class="up-color-picker__hue-pointer" :style="huePointerStyle"></view>
+					</view>
+
+					<view
+						v-if="colorTypeIndex == 0"
+						class="up-color-picker__alpha"
+						@touchstart="onAlphaTouchStart"
+						@touchmove="onAlphaTouchMove"
+						@touchend="onAlphaTouchEnd"
+					>
+						<view class="up-color-picker__alpha-bg"></view>
+						<view class="up-color-picker__alpha-mask"></view>
+						<view class="up-color-picker__alpha-pointer" :style="alphaPointerStyle"></view>
+					</view>
+				</view>
+
+				<view v-if="normalizedCommonColors.length > 0" class="up-color-picker__common">
+					<text class="up-color-picker__common-title">常用颜色</text>
+					<view class="up-color-picker__common-list">
+						<view
+							v-for="(color, index) in normalizedCommonColors"
+							:key="index"
+							class="up-color-picker__common-item"
+							:style="getColorStyle(color)"
+							@click="selectCommonColor(color)"
+						></view>
+					</view>
+				</view>
+
+				<view class="up-color-picker__footer">
+					<view class="up-color-picker__preview">
+						<view class="up-color-picker__preview-color" :style="previewStyle"></view>
+						<text class="up-color-picker__preview-text">{{ displayColor }}</text>
+					</view>
+					<view class="up-color-picker__actions">
+						<up-button type="primary" size="small" class="up-color-picker__btn" @click="confirm">确定</up-button>
+						<up-button type="info" size="small" class="up-color-picker__btn" @click="close">取消</up-button>
+					</view>
+				</view>
+			</view>
+		</up-popup>
+	</view>
+</template>
+
+<script setup lang="uts">
+import type { PropType } from 'vue'
+import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue'
+
+type Point = {
+	x: number,
+	y: number
+}
+
+type GradientColor = {
+	color: string,
+	percent: number
+}
+
+function defaultColors(): Array<string> {
+	return [
+		'#ff0000',
+		'#ff9900',
+		'#ffff00',
+		'#00ff00',
+		'#00ffff',
+		'#0000ff',
+		'#9900ff',
+		'#ffffff',
+		'#000000'
+	] as Array<string>
+}
+
+function clamp(value: number, min: number, max: number): number {
+	return Math.max(min, Math.min(max, value))
+}
+
+function touchPoint(e: UniTouchEvent): UniTouch | null {
+	if (e.touches.length > 0) return e.touches[0]
+	if (e.changedTouches.length > 0) return e.changedTouches[0]
+	return null
+}
+
+function round255(value: number): number {
+	return Math.round(value * 255)
+}
+
+function parseHexPair(value: string, index: number): number {
+	return parseInt(value.substring(index, index + 2), 16)
+}
+
+function rgbToHsl(r: number, g: number, b: number): UTSJSONObject {
+	const rn = r / 255
+	const gn = g / 255
+	const bn = b / 255
+	const max = Math.max(rn, Math.max(gn, bn))
+	const min = Math.min(rn, Math.min(gn, bn))
+	let h = 0
+	let s = 0
+	const l = (max + min) / 2
+	if (max != min) {
+		const d = max - min
+		s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+		if (max == rn) {
+			h = (gn - bn) / d + (gn < bn ? 6 : 0)
+		} else if (max == gn) {
+			h = (bn - rn) / d + 2
+		} else {
+			h = (rn - gn) / d + 4
+		}
+		h = h / 6
+	}
+	return {
+		h: Math.round(h * 360),
+		s: s * 100,
+		l: l * 100
+	} as UTSJSONObject
+}
+
+function hueToRgb(p: number, q: number, t: number): number {
+	let value = t
+	if (value < 0) value += 1
+	if (value > 1) value -= 1
+	if (value < 1 / 6) return p + (q - p) * 6 * value
+	if (value < 1 / 2) return q
+	if (value < 2 / 3) return p + (q - p) * (2 / 3 - value) * 6
+	return p
+}
+
+function hslToRgba(hue: number, saturation: number, lightness: number, alpha: number): string {
+	let h = hue / 360
+	let s = saturation / 100
+	let l = lightness / 100
+	let r = l
+	let g = l
+	let b = l
+	if (s != 0) {
+		const q = l < 0.5 ? l * (1 + s) : l + s - l * s
+		const p = 2 * l - q
+		r = hueToRgb(p, q, h + 1 / 3)
+		g = hueToRgb(p, q, h)
+		b = hueToRgb(p, q, h - 1 / 3)
+	}
+	return 'rgba(' + round255(r).toString() + ', ' + round255(g).toString() + ', ' + round255(b).toString() + ', ' + alpha.toFixed(2) + ')'
+}
+
+function parseSolidColorToState(color: string): UTSJSONObject {
+	if (color.startsWith('#') && (color.length == 7 || color.length == 4)) {
+		let r = 0
+		let g = 0
+		let b = 0
+		if (color.length == 7) {
+			r = parseHexPair(color, 1)
+			g = parseHexPair(color, 3)
+			b = parseHexPair(color, 5)
+		} else {
+			r = parseInt(color.substring(1, 2) + color.substring(1, 2), 16)
+			g = parseInt(color.substring(2, 3) + color.substring(2, 3), 16)
+			b = parseInt(color.substring(3, 4) + color.substring(3, 4), 16)
+		}
+		return rgbToHsl(r, g, b)
+	}
+	return {
+		h: 0,
+		s: 100,
+		l: 50
+	} as UTSJSONObject
+}
+
+function createGradientColor(color: string, percent: number): GradientColor {
+	return {
+		color,
+		percent
+	} as GradientColor
+}
+
+defineOptions({
+	styleIsolation: 'app-and-page',
+	name: 'up-color-picker'
+})
+
+const props = defineProps({
+	modelValue: {
+		type: String,
+		default: '#ff0000'
+	},
+	commonColors: {
+		type: Array as PropType<Array<string>>,
+		default(): Array<string> {
+			return [] as Array<string>
+		}
+	}
+})
+
+const emit = defineEmits(['update:modelValue', 'confirm', 'close', 'closed'])
+const instance = getCurrentInstance()!.proxy!
+
+const show = ref(false)
+const colorTypeIndex = ref(0)
+const hue = ref(0)
+const saturation = ref(100)
+const lightness = ref(50)
+const alpha = ref(1)
+const saturationPosition = ref({ x: 150, y: 0 } as Point)
+const huePosition = ref(0)
+const alphaPosition = ref(300)
+const gradientColors = ref([
+	createGradientColor('#ff0000', 0),
+	createGradientColor('#0000ff', 1)
+] as Array<GradientColor>)
+const currentDirectionValue = ref('to right')
+const currentColor = ref('#ff0000')
+const draggingPointerIndex = ref(-1)
+const directionPointer = ref({ x: 40, y: 20 } as Point)
+const editingGradientIndex = ref(-1)
+const previewType = ref('solid')
+
+function gradientStyleText(): string {
+	let colors = ''
+	for (let i = 0; i < gradientColors.value.length; i++) {
+		if (i > 0) colors += ', '
+		colors += gradientColors.value[i].color + ' ' + Math.round(gradientColors.value[i].percent * 100).toString() + '%'
+	}
+	return 'linear-gradient(' + currentDirectionValue.value + ', ' + colors + ')'
+}
+
+const normalizedCommonColors = computed((): Array<string> => {
+	const colors = props.commonColors as Array<string> | null
+	if (colors != null && colors.length > 0) {
+		return colors
+	}
+	return defaultColors()
+})
+
+const triggerStyle = computed((): UTSJSONObject => {
+	return {
+		backgroundColor: props.modelValue
+	} as UTSJSONObject
+})
+
+const displayColor = computed((): string => {
+	if (previewType.value == 'gradient') {
+		return gradientStyleText()
+	}
+	if (previewType.value == 'gradient-point' && editingGradientIndex.value >= 0 && editingGradientIndex.value < gradientColors.value.length) {
+		return gradientColors.value[editingGradientIndex.value].color
+	}
+	return currentColor.value
+})
+
+const previewStyle = computed((): UTSJSONObject => {
+	return {
+		background: displayColor.value,
+		backgroundColor: displayColor.value
+	} as UTSJSONObject
+})
+
+const saturationStyle = computed((): UTSJSONObject => {
+	return {
+		backgroundColor: 'hsl(' + hue.value.toString() + ', 100%, 50%)'
+	} as UTSJSONObject
+})
+
+const saturationPointerStyle = computed((): UTSJSONObject => {
+	return {
+		left: saturationPosition.value.x.toString() + 'px',
+		top: saturationPosition.value.y.toString() + 'px'
+	} as UTSJSONObject
+})
+
+const huePointerStyle = computed((): UTSJSONObject => {
+	return {
+		left: huePosition.value.toString() + 'px'
+	} as UTSJSONObject
+})
+
+const alphaPointerStyle = computed((): UTSJSONObject => {
+	return {
+		left: alphaPosition.value.toString() + 'px'
+	} as UTSJSONObject
+})
+
+const gradientTrackStyle = computed((): UTSJSONObject => {
+	return {
+		background: gradientStyleText()
+	} as UTSJSONObject
+})
+
+const directionPointerStyle = computed((): UTSJSONObject => {
+	return {
+		left: directionPointer.value.x.toString() + 'px',
+		top: directionPointer.value.y.toString() + 'px'
+	} as UTSJSONObject
+})
+
+const parseSolidColor = (color: string): void => {
+	const state = parseSolidColorToState(color)
+	hue.value = state['h'] as number
+	saturation.value = state['s'] as number
+	lightness.value = state['l'] as number
+	alpha.value = 1
+	huePosition.value = hue.value / 360 * 300
+	saturationPosition.value = {
+		x: saturation.value / 100 * 300,
+		y: (100 - lightness.value) / 100 * 150
+	} as Point
+	alphaPosition.value = 300
+	currentColor.value = color
+}
+
+const parseGradientColor = (gradient: string): void => {
+	currentColor.value = gradient
+	const colors = [] as Array<GradientColor>
+	const firstHash = gradient.indexOf('#')
+	if (firstHash >= 0 && gradient.length >= firstHash + 7) {
+		colors.push(createGradientColor(gradient.substring(firstHash, firstHash + 7), 0))
+	}
+	const secondHash = gradient.indexOf('#', firstHash + 1)
+	if (secondHash >= 0 && gradient.length >= secondHash + 7) {
+		colors.push(createGradientColor(gradient.substring(secondHash, secondHash + 7), 1))
+	}
+	if (colors.length >= 2) {
+		gradientColors.value = colors
+	}
+}
+
+const getDirectionAngle = (direction: string): number => {
+	if (direction == 'to bottom') return 90
+	if (direction == 'to left') return 180
+	if (direction == 'to top') return 270
+	if (direction == 'to bottom right') return 45
+	if (direction == 'to bottom left') return 135
+	return 0
+}
+
+const setDirectionPointerByAngle = (angle: number): void => {
+	const radius = 20
+	const radian = angle * Math.PI / 180
+	directionPointer.value = {
+		x: radius * Math.cos(radian) + 20,
+		y: radius * Math.sin(radian) + 20
+	} as Point
+}
+
+const initColor = (color: string): void => {
+	if (color.includes('linear-gradient')) {
+		colorTypeIndex.value = 1
+		parseGradientColor(color)
+		previewType.value = 'gradient'
+	} else {
+		colorTypeIndex.value = 0
+		parseSolidColor(color)
+		previewType.value = 'solid'
+	}
+	setDirectionPointerByAngle(getDirectionAngle(currentDirectionValue.value))
+}
+
+const open = (): void => {
+	initColor(props.modelValue)
+	show.value = true
+}
+
+const close = (): void => {
+	show.value = false
+	emit('close')
+}
+
+// 弹窗离场动画结束，透传给使用者
+const closedHandler = (): void => {
+	emit('closed')
+}
+
+const confirm = (): void => {
+	const color = colorTypeIndex.value == 1 ? gradientStyleText() : currentColor.value
+	emit('update:modelValue', color)
+	emit('confirm', color)
+	show.value = false
+	editingGradientIndex.value = -1
+	previewType.value = colorTypeIndex.value == 0 ? 'solid' : 'gradient'
+	emit('close')
+}
+
+const changeColorType = (index: number): void => {
+	colorTypeIndex.value = index
+	previewType.value = index == 0 ? 'solid' : 'gradient'
+	if (index == 0 && currentColor.value.includes('linear-gradient')) {
+		currentColor.value = gradientColors.value[0].color
+		parseSolidColor(currentColor.value)
+	}
+}
+
+const getGradientPointerStyle = (item: GradientColor): UTSJSONObject => {
+	return {
+		left: (item.percent * 300).toString() + 'px'
+	} as UTSJSONObject
+}
+
+const getGradientPointerInnerStyle = (item: GradientColor): UTSJSONObject => {
+	return {
+		backgroundColor: item.color
+	} as UTSJSONObject
+}
+
+const selectCommonColor = (color: string): void => {
+	if (colorTypeIndex.value == 1 && editingGradientIndex.value >= 0 && editingGradientIndex.value < gradientColors.value.length) {
+		gradientColors.value[editingGradientIndex.value].color = color
+		currentColor.value = color
+		previewType.value = 'gradient-point'
+	} else {
+		parseSolidColor(color)
+		previewType.value = 'solid'
+	}
+}
+
+const getColorStyle = (color: string): UTSJSONObject => {
+	return {
+		backgroundColor: color
+	} as UTSJSONObject
+}
+
+const openColorPickerForGradient = (index: number): void => {
+	if (index < 0 || index >= gradientColors.value.length) return
+	editingGradientIndex.value = index
+	currentColor.value = gradientColors.value[index].color
+	parseSolidColor(currentColor.value)
+	colorTypeIndex.value = 1
+	previewType.value = 'gradient-point'
+}
+
+function sortGradientColors(): void {
+	for (let i = 0; i < gradientColors.value.length - 1; i++) {
+		for (let j = i + 1; j < gradientColors.value.length; j++) {
+			if (gradientColors.value[i].percent > gradientColors.value[j].percent) {
+				const temp = gradientColors.value[i]
+				gradientColors.value[i] = gradientColors.value[j]
+				gradientColors.value[j] = temp
+			}
+		}
+	}
+}
+
+const addGradientColor = (): void => {
+	if (gradientColors.value.length >= 5) return
+	gradientColors.value.push(createGradientColor(currentColor.value, 1))
+	sortGradientColors()
+}
+
+const removeEditingGradientColor = (): void => {
+	if (gradientColors.value.length <= 2) return
+	if (editingGradientIndex.value < 0 || editingGradientIndex.value >= gradientColors.value.length) return
+	gradientColors.value.splice(editingGradientIndex.value, 1)
+	editingGradientIndex.value = -1
+	previewType.value = 'gradient'
+}
+
+const updateTrackPercent = (clientX: number): void => {
+	uni.createSelectorQuery()
+		.in(instance)
+		.select('.up-color-picker__gradient-track')
+		.boundingClientRect()
+		.exec((res: Array<any>) => {
+			if (res.length == 0 || res[0] == null) return
+			const rect = res[0] as UTSJSONObject
+			const left = rect['left'] as number
+			const width = rect['width'] as number
+			const percent = clamp((clientX - left) / width, 0, 1)
+			gradientColors.value[draggingPointerIndex.value].percent = percent
+			sortGradientColors()
+		})
+}
+
+const onPointerTouchStart = (index: number): void => {
+	draggingPointerIndex.value = index
+	editingGradientIndex.value = index
+	currentColor.value = gradientColors.value[index].color
+	previewType.value = 'gradient-point'
+}
+
+const onPointerTouchMove = (e: UniTouchEvent): void => {
+	if (draggingPointerIndex.value < 0 || draggingPointerIndex.value >= gradientColors.value.length) return
+	const touch = touchPoint(e)
+	if (touch == null) return
+	updateTrackPercent(touch.clientX)
+}
+
+const onPointerTouchEnd = (): void => {
+	draggingPointerIndex.value = -1
+}
+
+function updateSolidColor(): void {
+	const color = hslToRgba(hue.value, saturation.value, lightness.value, alpha.value)
+	if (colorTypeIndex.value == 1 && editingGradientIndex.value >= 0 && editingGradientIndex.value < gradientColors.value.length) {
+		gradientColors.value[editingGradientIndex.value].color = color
+		currentColor.value = color
+		previewType.value = 'gradient-point'
+	} else {
+		currentColor.value = color
+		previewType.value = 'solid'
+	}
+}
+
+const updateSaturationPosition = (e: UniTouchEvent): void => {
+	const touch = touchPoint(e)
+	if (touch == null) return
+	uni.createSelectorQuery()
+		.in(instance)
+		.select('.up-color-picker__saturation')
+		.boundingClientRect()
+		.exec((res: Array<any>) => {
+			if (res.length == 0 || res[0] == null) return
+			const rect = res[0] as UTSJSONObject
+			const left = rect['left'] as number
+			const top = rect['top'] as number
+			const width = rect['width'] as number
+			const height = rect['height'] as number
+			const x = clamp(touch.clientX - left, 0, width)
+			const y = clamp(touch.clientY - top, 0, height)
+			saturationPosition.value = { x, y } as Point
+			saturation.value = x / width * 100
+			lightness.value = 100 - y / height * 100
+			updateSolidColor()
+		})
+}
+
+const updateHuePosition = (e: UniTouchEvent): void => {
+	const touch = touchPoint(e)
+	if (touch == null) return
+	uni.createSelectorQuery()
+		.in(instance)
+		.select('.up-color-picker__hue')
+		.boundingClientRect()
+		.exec((res: Array<any>) => {
+			if (res.length == 0 || res[0] == null) return
+			const rect = res[0] as UTSJSONObject
+			const left = rect['left'] as number
+			const width = rect['width'] as number
+			const x = clamp(touch.clientX - left, 0, width)
+			huePosition.value = x
+			hue.value = Math.round(x / width * 360)
+			updateSolidColor()
+		})
+}
+
+const updateAlphaPosition = (e: UniTouchEvent): void => {
+	const touch = touchPoint(e)
+	if (touch == null) return
+	uni.createSelectorQuery()
+		.in(instance)
+		.select('.up-color-picker__alpha')
+		.boundingClientRect()
+		.exec((res: Array<any>) => {
+			if (res.length == 0 || res[0] == null) return
+			const rect = res[0] as UTSJSONObject
+			const left = rect['left'] as number
+			const width = rect['width'] as number
+			const x = clamp(touch.clientX - left, 0, width)
+			alphaPosition.value = x
+			alpha.value = x / width
+			updateSolidColor()
+		})
+}
+
+const onSaturationTouchStart = (e: UniTouchEvent): void => { updateSaturationPosition(e) }
+const onSaturationTouchMove = (e: UniTouchEvent): void => { updateSaturationPosition(e) }
+const onSaturationTouchEnd = (e: UniTouchEvent): void => { updateSaturationPosition(e) }
+const onHueTouchStart = (e: UniTouchEvent): void => { updateHuePosition(e) }
+const onHueTouchMove = (e: UniTouchEvent): void => { updateHuePosition(e) }
+const onHueTouchEnd = (e: UniTouchEvent): void => { updateHuePosition(e) }
+const onAlphaTouchStart = (e: UniTouchEvent): void => { updateAlphaPosition(e) }
+const onAlphaTouchMove = (e: UniTouchEvent): void => { updateAlphaPosition(e) }
+const onAlphaTouchEnd = (e: UniTouchEvent): void => { updateAlphaPosition(e) }
+
+function updateGradientDirection(angle: number): void {
+	if (angle >= 315 || angle < 45) {
+		currentDirectionValue.value = 'to right'
+	} else if (angle >= 45 && angle < 135) {
+		currentDirectionValue.value = 'to bottom'
+	} else if (angle >= 135 && angle < 225) {
+		currentDirectionValue.value = 'to left'
+	} else {
+		currentDirectionValue.value = 'to top'
+	}
+}
+
+const updateDirection = (e: UniTouchEvent): void => {
+	const touch = touchPoint(e)
+	if (touch == null) return
+	uni.createSelectorQuery()
+		.in(instance)
+		.select('.up-color-picker__direction-circle')
+		.boundingClientRect()
+		.exec((res: Array<any>) => {
+			if (res.length == 0 || res[0] == null) return
+			const rect = res[0] as UTSJSONObject
+			const left = rect['left'] as number
+			const top = rect['top'] as number
+			const width = rect['width'] as number
+			const height = rect['height'] as number
+			const centerX = left + width / 2
+			const centerY = top + height / 2
+			const x = touch.clientX - centerX
+			const y = touch.clientY - centerY
+			const distance = Math.sqrt(x * x + y * y)
+			const radius = width / 2
+			const ratio = distance > radius ? radius / distance : 1
+			directionPointer.value = {
+				x: x * ratio + width / 2,
+				y: y * ratio + height / 2
+			} as Point
+			let angle = Math.atan2(y, x) * 180 / Math.PI
+			if (angle < 0) angle += 360
+			updateGradientDirection(angle)
+		})
+}
+
+const onDirectionTouchStart = (e: UniTouchEvent): void => { updateDirection(e) }
+const onDirectionTouchMove = (e: UniTouchEvent): void => { updateDirection(e) }
+const onDirectionTouchEnd = (e: UniTouchEvent): void => { updateDirection(e) }
+
+watch((): string => props.modelValue, (newVal: string) => {
+	if (!show.value) {
+		initColor(newVal)
+	}
+})
+
+onMounted((): void => {
+	initColor(props.modelValue)
+})
+
+defineExpose({
+	show,
+	colorTypeIndex,
+	hue,
+	saturation,
+	lightness,
+	alpha,
+	saturationPosition,
+	huePosition,
+	alphaPosition,
+	gradientColors,
+	currentDirectionValue,
+	currentColor,
+	draggingPointerIndex,
+	directionPointer,
+	editingGradientIndex,
+	previewType,
+	normalizedCommonColors,
+	triggerStyle,
+	displayColor,
+	previewStyle,
+	saturationStyle,
+	saturationPointerStyle,
+	huePointerStyle,
+	alphaPointerStyle,
+	gradientTrackStyle,
+	directionPointerStyle,
+	open,
+	close,
+	confirm,
+	initColor,
+	parseSolidColor,
+	parseGradientColor,
+	changeColorType,
+	gradientStyleText,
+	getGradientPointerStyle,
+	getGradientPointerInnerStyle,
+	selectCommonColor,
+	getColorStyle,
+	openColorPickerForGradient,
+	addGradientColor,
+	removeEditingGradientColor,
+	onPointerTouchStart,
+	onPointerTouchMove,
+	onPointerTouchEnd,
+	updateTrackPercent,
+	sortGradientColors,
+	onSaturationTouchStart,
+	onSaturationTouchMove,
+	onSaturationTouchEnd,
+	onHueTouchStart,
+	onHueTouchMove,
+	onHueTouchEnd,
+	onAlphaTouchStart,
+	onAlphaTouchMove,
+	onAlphaTouchEnd,
+	updateSaturationPosition,
+	updateHuePosition,
+	updateAlphaPosition,
+	updateSolidColor,
+	onDirectionTouchStart,
+	onDirectionTouchMove,
+	onDirectionTouchEnd,
+	updateDirection,
+	updateGradientDirection,
+	getDirectionAngle,
+	setDirectionPointerByAngle
+})
+</script>
+
+<style lang="scss" scoped>
+.up-color-picker__trigger {
+	width: 32px;
+	height: 32px;
+	border-radius: 4px;
+	border: 1px solid #e5e5e5;
+}
+
+.up-color-picker__content {
+	width: 100%;
+	padding: 20px;
+	background-color: #ffffff;
+}
+
+.up-color-picker__header {
+	align-items: center;
+	margin-bottom: 16px;
+}
+
+.up-color-picker__title {
+	font-size: 18px;
+	font-weight: bold;
+	color: #333333;
+}
+
+.up-color-picker__switch {
+	display: flex;
+	flex-direction: row;
+	margin-bottom: 18px;
+	border: 1px solid #e5e5e5;
+	border-radius: 6px;
+	overflow: hidden;
+}
+
+.up-color-picker__switch-item {
+	flex: 1;
+	height: 34px;
+	align-items: center;
+	justify-content: center;
+	background-color: #ffffff;
+}
+
+.up-color-picker__switch-item--active {
+	background-color: #2979ff;
+}
+
+.up-color-picker__switch-text {
+	font-size: 14px;
+	color: #303133;
+}
+
+.up-color-picker__gradient {
+	margin-bottom: 12px;
+}
+
+.up-color-picker__gradient-track {
+	position: relative;
+	width: 300px;
+	height: 32px;
+	border-radius: 4px;
+	margin-bottom: 15px;
+}
+
+.up-color-picker__gradient-pointer {
+	position: absolute;
+	top: -10px;
+	width: 20px;
+	height: 52px;
+	transform: translateX(-10px);
+	align-items: center;
+}
+
+.up-color-picker__gradient-pointer-inner {
+	width: 20px;
+	height: 20px;
+	border-radius: 10px;
+	border: 2px solid #ffffff;
+	box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+}
+
+.up-color-picker__gradient-controls {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	margin-bottom: 15px;
+}
+
+.up-color-picker__add-btn {
+	margin-right: 10px;
+}
+
+.up-color-picker__gradient-direction {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	margin: 10px 0;
+}
+
+.up-color-picker__label {
+	font-size: 14px;
+	color: #606266;
+	margin-right: 12px;
+}
+
+.up-color-picker__direction-circle {
+	width: 40px;
+	height: 40px;
+	border-radius: 20px;
+	background-color: #f5f7fa;
+	position: relative;
+	border: 2px solid #eeeeee;
+}
+
+.up-color-picker__direction-pointer {
+	position: absolute;
+	width: 8px;
+	height: 8px;
+	background-color: #ffffff;
+	border: 2px solid #333333;
+	border-radius: 4px;
+	transform: translate(-4px, -4px);
+}
+
+.up-color-picker__solid {
+	margin-bottom: 10px;
+}
+
+.up-color-picker__saturation {
+	position: relative;
+	width: 300px;
+	height: 150px;
+	border-radius: 4px;
+	margin-bottom: 15px;
+	overflow: hidden;
+}
+
+.up-color-picker__saturation-white {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
+}
+
+.up-color-picker__saturation-black {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	background: linear-gradient(to top, #000000, rgba(0, 0, 0, 0));
+}
+
+.up-color-picker__saturation-pointer {
+	position: absolute;
+	width: 12px;
+	height: 12px;
+	border: 2px solid #ffffff;
+	border-radius: 6px;
+	transform: translate(-6px, -6px);
+	box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+}
+
+.up-color-picker__hue,
+.up-color-picker__alpha {
+	position: relative;
+	width: 300px;
+	height: 12px;
+	border-radius: 6px;
+	margin-bottom: 15px;
+}
+
+.up-color-picker__hue {
+	background: linear-gradient(to right, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%);
+}
+
+.up-color-picker__alpha {
+	overflow: hidden;
+	background-color: #eeeeee;
+}
+
+.up-color-picker__alpha-bg,
+.up-color-picker__alpha-mask {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+}
+
+.up-color-picker__alpha-mask {
+	background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
+}
+
+.up-color-picker__hue-pointer,
+.up-color-picker__alpha-pointer {
+	position: absolute;
+	width: 4px;
+	height: 16px;
+	background-color: #ffffff;
+	border: 1px solid #cccccc;
+	border-radius: 2px;
+	transform: translateX(-2px);
+	top: -2px;
+	box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+}
+
+.up-color-picker__common {
+	margin-top: 16px;
+}
+
+.up-color-picker__common-title {
+	margin-bottom: 10px;
+	font-size: 14px;
+	color: #666666;
+}
+
+.up-color-picker__common-list {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+
+.up-color-picker__common-item {
+	width: 24px;
+	height: 24px;
+	border-radius: 12px;
+	margin-right: 10px;
+	margin-bottom: 10px;
+	border: 1px solid #eeeeee;
+}
+
+.up-color-picker__footer {
+	margin-top: 20px;
+}
+
+.up-color-picker__preview {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	margin-bottom: 15px;
+}
+
+.up-color-picker__preview-color {
+	width: 40px;
+	height: 40px;
+	border-radius: 4px;
+	border: 1px solid #eeeeee;
+	margin-right: 10px;
+}
+
+.up-color-picker__preview-text {
+	font-size: 14px;
+	color: #333333;
+	flex: 1;
+}
+
+.up-color-picker__actions {
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-end;
+}
+
+.up-color-picker__btn {
+	margin-left: 10px;
+}
+</style>