568 lines
21 KiB
TypeScript
568 lines
21 KiB
TypeScript
import React from '../../react';
|
|
import { useState, useEffect } from 'react';
|
|
import { Card, Button, Input, Select, Slider, ColorPicker, InputNumber, Divider, Tag, Space, Row, Col } from 'antd';
|
|
import { BoldOutlined, ItalicOutlined, UnderlineOutlined, FontSizeOutlined, BgColorsOutlined, BorderOutlined } from '@ant-design/icons';
|
|
import type { ElementInfo, SourceInfo } from '../../../../packages/client-shared/src/messages';
|
|
|
|
const { TextArea } = Input;
|
|
const { Option } = Select;
|
|
|
|
export interface StyleUpdateData {
|
|
sourceInfo: SourceInfo;
|
|
newClass: string;
|
|
}
|
|
|
|
export interface StylePanelProps {
|
|
selectedElement: ElementInfo | null;
|
|
onUpdateStyle: (data: StyleUpdateData) => void;
|
|
currentClass: string;
|
|
onClassChange: (newClass: string) => void;
|
|
}
|
|
|
|
/**
|
|
* 样式预设配置
|
|
*/
|
|
const stylePresets = {
|
|
colors: {
|
|
backgrounds: [
|
|
{ label: '白色', value: 'bg-white', color: '#ffffff' },
|
|
{ label: '浅灰色', value: 'bg-gray-100', color: '#f3f4f6' },
|
|
{ label: '浅蓝色', value: 'bg-blue-100', color: '#dbeafe' },
|
|
{ label: '浅绿色', value: 'bg-green-100', color: '#dcfce7' },
|
|
{ label: '浅红色', value: 'bg-red-100', color: '#fee2e2' },
|
|
{ label: '浅黄色', value: 'bg-yellow-100', color: '#fef3c7' },
|
|
{ label: '浅紫色', value: 'bg-purple-100', color: '#f3e8ff' },
|
|
{ label: '深蓝色', value: 'bg-blue-600', color: '#2563eb' },
|
|
],
|
|
text: [
|
|
{ label: '黑色', value: 'text-black', color: '#000000' },
|
|
{ label: '深灰色', value: 'text-gray-900', color: '#111827' },
|
|
{ label: '中灰色', value: 'text-gray-600', color: '#4b5563' },
|
|
{ label: '蓝色', value: 'text-blue-600', color: '#2563eb' },
|
|
{ label: '绿色', value: 'text-green-600', color: '#16a34a' },
|
|
{ label: '红色', value: 'text-red-600', color: '#dc2626' },
|
|
{ label: '黄色', value: 'text-yellow-600', color: '#ca8a04' },
|
|
{ label: '紫色', value: 'text-purple-600', color: '#9333ea' },
|
|
]
|
|
},
|
|
|
|
spacing: {
|
|
padding: [
|
|
{ label: '无内边距', value: 'p-0', preview: 'padding: 0px' },
|
|
{ label: '小内边距', value: 'p-2', preview: 'padding: 8px' },
|
|
{ label: '中等内边距', value: 'p-4', preview: 'padding: 16px' },
|
|
{ label: '大内边距', value: 'p-6', preview: 'padding: 24px' },
|
|
{ label: '超大内边距', value: 'p-8', preview: 'padding: 32px' },
|
|
],
|
|
margin: [
|
|
{ label: '无外边距', value: 'm-0', preview: 'margin: 0px' },
|
|
{ label: '小外边距', value: 'm-2', preview: 'margin: 8px' },
|
|
{ label: '中等外边距', value: 'm-4', preview: 'margin: 16px' },
|
|
{ label: '大外边距', value: 'm-6', preview: 'margin: 24px' },
|
|
]
|
|
},
|
|
|
|
border: {
|
|
radius: [
|
|
{ label: '无圆角', value: 'rounded-none', preview: 'border-radius: 0px' },
|
|
{ label: '小圆角', value: 'rounded-sm', preview: 'border-radius: 2px' },
|
|
{ label: '中等圆角', value: 'rounded-md', preview: 'border-radius: 6px' },
|
|
{ label: '大圆角', value: 'rounded-lg', preview: 'border-radius: 8px' },
|
|
{ label: '超大圆角', value: 'rounded-xl', preview: 'border-radius: 12px' },
|
|
{ label: '完全圆角', value: 'rounded-full', preview: 'border-radius: 9999px' },
|
|
],
|
|
width: [
|
|
{ label: '无边框', value: 'border-0', preview: 'border-width: 0px' },
|
|
{ label: '细边框', value: 'border', preview: 'border-width: 1px' },
|
|
{ label: '中等边框', value: 'border-2', preview: 'border-width: 2px' },
|
|
{ label: '粗边框', value: 'border-4', preview: 'border-width: 4px' },
|
|
]
|
|
},
|
|
|
|
typography: {
|
|
fontSize: [
|
|
{ label: '很小', value: 'text-xs', preview: 'font-size: 12px' },
|
|
{ label: '小', value: 'text-sm', preview: 'font-size: 14px' },
|
|
{ label: '正常', value: 'text-base', preview: 'font-size: 16px' },
|
|
{ label: '大', value: 'text-lg', preview: 'font-size: 18px' },
|
|
{ label: '很大', value: 'text-xl', preview: 'font-size: 20px' },
|
|
{ label: '巨大', value: 'text-2xl', preview: 'font-size: 24px' },
|
|
],
|
|
fontWeight: [
|
|
{ label: '细体', value: 'font-thin', preview: 'font-weight: 100' },
|
|
{ label: '特细', value: 'font-extralight', preview: 'font-weight: 200' },
|
|
{ label: '细体', value: 'font-light', preview: 'font-weight: 300' },
|
|
{ label: '正常', value: 'font-normal', preview: 'font-weight: 400' },
|
|
{ label: '中粗', value: 'font-medium', preview: 'font-weight: 500' },
|
|
{ label: '半粗', value: 'font-semibold', preview: 'font-weight: 600' },
|
|
{ label: '粗体', value: 'font-bold', preview: 'font-weight: 700' },
|
|
{ label: '超粗', value: 'font-black', preview: 'font-weight: 900' },
|
|
]
|
|
},
|
|
|
|
layout: {
|
|
display: [
|
|
{ label: '块级', value: 'block', preview: 'display: block' },
|
|
{ label: '内联', value: 'inline', preview: 'display: inline' },
|
|
{ label: '内联块', value: 'inline-block', preview: 'display: inline-block' },
|
|
{ label: '弹性', value: 'flex', preview: 'display: flex' },
|
|
{ label: '网格', value: 'grid', preview: 'display: grid' },
|
|
{ label: '隐藏', value: 'hidden', preview: 'display: none' },
|
|
],
|
|
position: [
|
|
{ label: '静态', value: 'static', preview: 'position: static' },
|
|
{ label: '相对', value: 'relative', preview: 'position: relative' },
|
|
{ label: '绝对', value: 'absolute', preview: 'position: absolute' },
|
|
{ label: '固定', value: 'fixed', preview: 'position: fixed' },
|
|
{ label: '粘性', value: 'sticky', preview: 'position: sticky' },
|
|
]
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 样式编辑面板组件
|
|
*/
|
|
export const StylePanel: React.FC<StylePanelProps> = ({
|
|
selectedElement,
|
|
onUpdateStyle,
|
|
currentClass,
|
|
onClassChange
|
|
}) => {
|
|
const [activeTab, setActiveTab] = useState<string>('presets');
|
|
const [customStyles, setCustomStyles] = useState<string>(currentClass);
|
|
const [colorPickerVisible, setColorPickerVisible] = useState(false);
|
|
const [customColor, setCustomColor] = useState('#3b82f6');
|
|
|
|
useEffect(() => {
|
|
setCustomStyles(currentClass);
|
|
}, [currentClass]);
|
|
|
|
/**
|
|
* 添加样式类
|
|
*/
|
|
const addStyleClass = (className: string) => {
|
|
const newStyles = mergeClasses(customStyles, className);
|
|
setCustomStyles(newStyles);
|
|
onClassChange(newStyles);
|
|
};
|
|
|
|
/**
|
|
* 移除样式类
|
|
*/
|
|
const removeStyleClass = (className: string) => {
|
|
const newStyles = removeClass(customStyles, className);
|
|
setCustomStyles(newStyles);
|
|
onClassChange(newStyles);
|
|
};
|
|
|
|
/**
|
|
* 更新样式
|
|
*/
|
|
const updateStyles = () => {
|
|
if (!selectedElement) return;
|
|
|
|
onUpdateStyle({
|
|
sourceInfo: selectedElement.sourceInfo,
|
|
newClass: customStyles
|
|
});
|
|
};
|
|
|
|
/**
|
|
* 清除所有样式
|
|
*/
|
|
const clearAllStyles = () => {
|
|
setCustomStyles('');
|
|
onClassChange('');
|
|
};
|
|
|
|
/**
|
|
* 合并样式类
|
|
*/
|
|
const mergeClasses = (existing: string, newClass: string): string => {
|
|
const classes = existing.split(' ').filter(Boolean);
|
|
const newClasses = newClass.split(' ').filter(Boolean);
|
|
|
|
// 移除冲突的同类样式
|
|
const filteredClasses = classes.filter(cls => {
|
|
return !newClasses.some(newCls =>
|
|
(cls.startsWith('bg-') && newCls.startsWith('bg-')) ||
|
|
(cls.startsWith('text-') && newCls.startsWith('text-')) ||
|
|
(cls.startsWith('p-') && newCls.startsWith('p-')) ||
|
|
(cls.startsWith('m-') && newCls.startsWith('m-')) ||
|
|
(cls.startsWith('rounded') && newCls.startsWith('rounded')) ||
|
|
(cls.startsWith('border-') && newCls.startsWith('border-')) ||
|
|
(cls.startsWith('text-') && newCls.startsWith('text-')) ||
|
|
(cls.startsWith('font-') && newCls.startsWith('font-')) ||
|
|
(cls.startsWith('flex') && newCls.startsWith('flex')) ||
|
|
(cls.startsWith('grid') && newCls.startsWith('grid')) ||
|
|
cls === newCls
|
|
);
|
|
});
|
|
|
|
return [...filteredClasses, ...newClasses].join(' ').trim();
|
|
};
|
|
|
|
/**
|
|
* 移除样式类
|
|
*/
|
|
const removeClass = (existing: string, classToRemove: string): string => {
|
|
return existing.split(' ')
|
|
.filter(cls => cls !== classToRemove && !cls.startsWith(classToRemove.split('-')[0]))
|
|
.join(' ')
|
|
.trim();
|
|
};
|
|
|
|
/**
|
|
* 获取当前应用的样式类
|
|
*/
|
|
const getAppliedStyles = (): string[] => {
|
|
return customStyles.split(' ').filter(Boolean);
|
|
};
|
|
|
|
if (!selectedElement) {
|
|
return (
|
|
<Card title="样式编辑" className="h-full">
|
|
<div className="flex items-center justify-center h-64 text-gray-500">
|
|
<div className="text-center">
|
|
<BgColorsOutlined className="text-4xl mb-4" />
|
|
<p>请先选择一个元素</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Card
|
|
title={
|
|
<div className="flex items-center gap-2">
|
|
<BgColorsOutlined />
|
|
<span>样式编辑</span>
|
|
</div>
|
|
}
|
|
className="h-full"
|
|
extra={
|
|
<Space>
|
|
<Button size="small" onClick={clearAllStyles}>
|
|
清除全部
|
|
</Button>
|
|
<Button
|
|
type="primary"
|
|
size="small"
|
|
onClick={updateStyles}
|
|
disabled={!selectedElement}
|
|
>
|
|
应用样式
|
|
</Button>
|
|
</Space>
|
|
}
|
|
>
|
|
<div className="space-y-6">
|
|
{/* 元素信息 */}
|
|
<div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
|
|
<h4 className="text-sm font-semibold text-blue-900 mb-2">当前元素</h4>
|
|
<div className="text-xs text-blue-700 space-y-1">
|
|
<div><span className="font-medium">标签:</span> <{selectedElement.tagName}></div>
|
|
<div><span className="font-medium">位置:</span> {selectedElement.sourceInfo.fileName.split('/').pop()}:{selectedElement.sourceInfo.lineNumber}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 快速预设标签页 */}
|
|
<div className="border-b border-gray-200">
|
|
<div className="flex space-x-1">
|
|
{[
|
|
{ key: 'presets', label: '预设样式' },
|
|
{ key: 'colors', label: '颜色' },
|
|
{ key: 'typography', label: '字体' },
|
|
{ key: 'layout', label: '布局' },
|
|
{ key: 'custom', label: '自定义' }
|
|
].map(tab => (
|
|
<button
|
|
key={tab.key}
|
|
onClick={() => setActiveTab(tab.key)}
|
|
className={`px-3 py-2 text-sm font-medium border-b-2 transition-colors ${
|
|
activeTab === tab.key
|
|
? 'border-blue-500 text-blue-600'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700'
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 预设样式 */}
|
|
{activeTab === 'presets' && (
|
|
<div className="space-y-6">
|
|
{/* 背景颜色 */}
|
|
<div>
|
|
<h4 className="text-sm font-medium text-gray-900 mb-3">背景颜色</h4>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{stylePresets.colors.backgrounds.map((color, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => addStyleClass(color.value)}
|
|
className="flex items-center gap-2 p-2 border border-gray-200 rounded-lg hover:border-gray-300 transition-colors"
|
|
>
|
|
<div
|
|
className={`w-4 h-4 rounded ${color.value}`}
|
|
style={{ backgroundColor: color.color }}
|
|
/>
|
|
<span className="text-xs">{color.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 圆角 */}
|
|
<div>
|
|
<h4 className="text-sm font-medium text-gray-900 mb-3">圆角</h4>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{stylePresets.border.radius.map((radius, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => addStyleClass(radius.value)}
|
|
className="p-2 text-xs border border-gray-200 rounded-lg hover:border-gray-300 transition-colors text-left"
|
|
>
|
|
<div className="font-medium">{radius.label}</div>
|
|
<div className="text-gray-500">{radius.preview}</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 边距 */}
|
|
<div>
|
|
<h4 className="text-sm font-medium text-gray-900 mb-3">边距</h4>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{stylePresets.spacing.padding.map((padding, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => addStyleClass(padding.value)}
|
|
className="p-2 text-xs border border-gray-200 rounded-lg hover:border-gray-300 transition-colors text-left"
|
|
>
|
|
<div className="font-medium">{padding.label}</div>
|
|
<div className="text-gray-500">{padding.preview}</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 颜色面板 */}
|
|
{activeTab === 'colors' && (
|
|
<div className="space-y-6">
|
|
{/* 背景颜色 */}
|
|
<div>
|
|
<h4 className="text-sm font-medium text-gray-900 mb-3">背景颜色</h4>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{stylePresets.colors.backgrounds.map((color, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => addStyleClass(color.value)}
|
|
className="flex items-center gap-2 p-2 border border-gray-200 rounded-lg hover:border-gray-300 transition-colors"
|
|
>
|
|
<div
|
|
className={`w-4 h-4 rounded ${color.value}`}
|
|
style={{ backgroundColor: color.color }}
|
|
/>
|
|
<span className="text-xs">{color.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 文字颜色 */}
|
|
<div>
|
|
<h4 className="text-sm font-medium text-gray-900 mb-3">文字颜色</h4>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{stylePresets.colors.text.map((color, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => addStyleClass(color.value)}
|
|
className="flex items-center gap-2 p-2 border border-gray-200 rounded-lg hover:border-gray-300 transition-colors"
|
|
>
|
|
<div
|
|
className="w-4 h-4 rounded border border-gray-300"
|
|
style={{ backgroundColor: color.color }}
|
|
/>
|
|
<span className="text-xs">{color.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 自定义颜色 */}
|
|
<div>
|
|
<h4 className="text-sm font-medium text-gray-900 mb-3">自定义颜色</h4>
|
|
<div className="space-y-3">
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="color"
|
|
value={customColor}
|
|
onChange={(e) => setCustomColor(e.target.value)}
|
|
className="w-8 h-8 border border-gray-300 rounded cursor-pointer"
|
|
/>
|
|
<Input
|
|
value={customColor}
|
|
onChange={(e) => setCustomColor(e.target.value)}
|
|
placeholder="#3b82f6"
|
|
/>
|
|
</div>
|
|
<Row gutter={8}>
|
|
<Col span={12}>
|
|
<Button
|
|
block
|
|
size="small"
|
|
onClick={() => addStyleClass(`bg-[${customColor}]`)}
|
|
>
|
|
背景色
|
|
</Button>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Button
|
|
block
|
|
size="small"
|
|
onClick={() => addStyleClass(`text-[${customColor}]`)}
|
|
>
|
|
文字色
|
|
</Button>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 字体面板 */}
|
|
{activeTab === 'typography' && (
|
|
<div className="space-y-6">
|
|
{/* 字体大小 */}
|
|
<div>
|
|
<h4 className="text-sm font-medium text-gray-900 mb-3">字体大小</h4>
|
|
<div className="space-y-2">
|
|
{stylePresets.typography.fontSize.map((fontSize, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => addStyleClass(fontSize.value)}
|
|
className="w-full p-2 text-left text-xs border border-gray-200 rounded-lg hover:border-gray-300 transition-colors"
|
|
>
|
|
<div className="font-medium">{fontSize.label}</div>
|
|
<div className="text-gray-500">{fontSize.preview}</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 字体粗细 */}
|
|
<div>
|
|
<h4 className="text-sm font-medium text-gray-900 mb-3">字体粗细</h4>
|
|
<div className="space-y-2">
|
|
{stylePresets.typography.fontWeight.map((fontWeight, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => addStyleClass(fontWeight.value)}
|
|
className="w-full p-2 text-left text-xs border border-gray-200 rounded-lg hover:border-gray-300 transition-colors"
|
|
>
|
|
<div className="font-medium">{fontWeight.label}</div>
|
|
<div className="text-gray-500">{fontWeight.preview}</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 布局面板 */}
|
|
{activeTab === 'layout' && (
|
|
<div className="space-y-6">
|
|
{/* 显示类型 */}
|
|
<div>
|
|
<h4 className="text-sm font-medium text-gray-900 mb-3">显示类型</h4>
|
|
<div className="space-y-2">
|
|
{stylePresets.layout.display.map((display, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => addStyleClass(display.value)}
|
|
className="w-full p-2 text-left text-xs border border-gray-200 rounded-lg hover:border-gray-300 transition-colors"
|
|
>
|
|
<div className="font-medium">{display.label}</div>
|
|
<div className="text-gray-500">{display.preview}</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 定位 */}
|
|
<div>
|
|
<h4 className="text-sm font-medium text-gray-900 mb-3">定位</h4>
|
|
<div className="space-y-2">
|
|
{stylePresets.layout.position.map((position, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => addStyleClass(position.value)}
|
|
className="w-full p-2 text-left text-xs border border-gray-200 rounded-lg hover:border-gray-300 transition-colors"
|
|
>
|
|
<div className="font-medium">{position.label}</div>
|
|
<div className="text-gray-500">{position.preview}</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 自定义样式 */}
|
|
{activeTab === 'custom' && (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
自定义 className
|
|
</label>
|
|
<TextArea
|
|
value={customStyles}
|
|
onChange={(e) => setCustomStyles(e.target.value)}
|
|
placeholder="输入 CSS 类名..."
|
|
rows={4}
|
|
className="font-mono text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<Button onClick={updateStyles} type="primary" block>
|
|
应用自定义样式
|
|
</Button>
|
|
<Button onClick={clearAllStyles} block>
|
|
清除
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 已应用的样式标签 */}
|
|
{getAppliedStyles().length > 0 && (
|
|
<div>
|
|
<h4 className="text-sm font-medium text-gray-900 mb-3">已应用样式</h4>
|
|
<div className="flex flex-wrap gap-1">
|
|
{getAppliedStyles().map((styleClass, index) => (
|
|
<Tag
|
|
key={index}
|
|
closable
|
|
onClose={() => removeStyleClass(styleClass)}
|
|
className="mb-1"
|
|
>
|
|
{styleClass}
|
|
</Tag>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default StylePanel;
|