464 lines
13 KiB
Plaintext
464 lines
13 KiB
Plaintext
import { router } from '@kit.ArkUI';
|
|
import { preferences } from '@kit.ArkData';
|
|
import { common } from '@kit.AbilityKit';
|
|
//todo 重要 后续 刷新按钮要求固定显示
|
|
@Entry
|
|
@Component
|
|
struct WidgetSettings {
|
|
@State selectedStyle: string = 'classic';
|
|
@State showTime: boolean = true;
|
|
@State showWeather: boolean = false;
|
|
@State showQuote: boolean = false;
|
|
@State quoteText: string = '床前明月光，疑是地上霜。';
|
|
@State authorText: string = '李白《静夜思》';
|
|
private preference: preferences.Preferences | null = null;
|
|
|
|
async aboutToAppear() {
|
|
await this.loadSettings();
|
|
}
|
|
|
|
async loadSettings() {
|
|
try {
|
|
const context = getContext(this);
|
|
this.preference = await preferences.getPreferences(context, 'widget_settings');
|
|
this.selectedStyle = await this.preference.get('style', 'classic') as string;
|
|
|
|
const showTimeVal = await this.preference.get('showTime', true);
|
|
this.showTime = Boolean(showTimeVal);
|
|
console.info('[WidgetSettings] showTime raw value: ' + showTimeVal + ', type: ' + typeof showTimeVal + ', parsed: ' + this.showTime);
|
|
|
|
const showWeatherVal = await this.preference.get('showWeather', false);
|
|
this.showWeather = Boolean(showWeatherVal);
|
|
console.info('[WidgetSettings] showWeather raw value: ' + showWeatherVal + ', type: ' + typeof showWeatherVal + ', parsed: ' + this.showWeather);
|
|
|
|
const showQuoteVal = await this.preference.get('showQuote', false);
|
|
this.showQuote = Boolean(showQuoteVal);
|
|
|
|
this.quoteText = await this.preference.get('quote', '床前明月光，疑是地上霜。') as string;
|
|
this.authorText = await this.preference.get('author', '李白《静夜思》') as string;
|
|
|
|
console.info('[WidgetSettings] Settings loaded - showTime: ' + this.showTime + ', showWeather: ' + this.showWeather);
|
|
} catch (error) {
|
|
console.error('[WidgetSettings] loadSettings error: ' + JSON.stringify(error));
|
|
}
|
|
}
|
|
|
|
async saveSettings() {
|
|
try {
|
|
if (!this.preference) {
|
|
const context = getContext(this) as common.UIAbilityContext;
|
|
this.preference = await preferences.getPreferences(context, 'widget_settings');
|
|
}
|
|
console.info('[WidgetSettings] Saving settings - showTime: ' + this.showTime + ', showWeather: ' + this.showWeather);
|
|
await this.preference.put('style', this.selectedStyle);
|
|
await this.preference.put('showTime', Boolean(this.showTime));
|
|
await this.preference.put('showWeather', Boolean(this.showWeather));
|
|
await this.preference.put('showQuote', Boolean(this.showQuote));
|
|
await this.preference.put('quote', this.quoteText);
|
|
await this.preference.put('author', this.authorText);
|
|
await this.preference.flush();
|
|
console.info('[WidgetSettings] Settings saved successfully');
|
|
} catch (error) {
|
|
console.error('[WidgetSettings] saveSettings error: ' + JSON.stringify(error));
|
|
}
|
|
}
|
|
|
|
private isDarkText(): boolean {
|
|
return this.selectedStyle === 'transparent' || this.selectedStyle === 'frosted' || this.selectedStyle === 'liquid' || this.selectedStyle === 'immersive';
|
|
}
|
|
|
|
build() {
|
|
Navigation() {
|
|
Scroll() {
|
|
Column({ space: 16 }) {
|
|
Text('卡片设置')
|
|
.fontSize(24)
|
|
.fontWeight(FontWeight.Bold)
|
|
.fontColor('#1A1A1A')
|
|
.margin({ top: 16, bottom: 8 })
|
|
|
|
this.buildPreview()
|
|
|
|
this.buildStyleSelector()
|
|
|
|
this.buildDisplayOptions()
|
|
|
|
this.buildContentSettings()
|
|
|
|
Button('保存设置')
|
|
.width('100%')
|
|
.height(48)
|
|
.fontSize(16)
|
|
.fontWeight(FontWeight.Medium)
|
|
.backgroundColor('#007AFF')
|
|
.borderRadius(12)
|
|
.margin({ top: 24, bottom: 32 })
|
|
.onClick(() => {
|
|
this.saveSettings();
|
|
})
|
|
}
|
|
.width('100%')
|
|
.padding(16)
|
|
}
|
|
.width('100%')
|
|
.height('100%')
|
|
}
|
|
.title('卡片配置')
|
|
.titleMode(NavigationTitleMode.Mini)
|
|
.mode(NavigationMode.Stack)
|
|
}
|
|
|
|
@Builder
|
|
buildPreview() {
|
|
Column() {
|
|
Text('预览')
|
|
.fontSize(14)
|
|
.fontColor('#666666')
|
|
.margin({ bottom: 8 })
|
|
.alignSelf(ItemAlign.Start)
|
|
|
|
if (this.selectedStyle === 'frosted') {
|
|
this.buildPreviewCardFrosted()
|
|
} else if (this.selectedStyle === 'liquid') {
|
|
this.buildPreviewCardLiquid()
|
|
} else if (this.selectedStyle === 'immersive') {
|
|
this.buildPreviewCardImmersive()
|
|
} else if (this.selectedStyle === 'transparent') {
|
|
this.buildPreviewCardTransparent()
|
|
} else {
|
|
this.buildPreviewCardGradient()
|
|
}
|
|
}
|
|
.width('100%')
|
|
.padding(16)
|
|
.backgroundColor('#F5F5F5')
|
|
.borderRadius(12)
|
|
}
|
|
|
|
@Builder
|
|
buildPreviewCardFrosted() {
|
|
Column() {
|
|
this.buildPreviewCardContent()
|
|
}
|
|
.width('100%')
|
|
.height(160)
|
|
.padding(16)
|
|
.borderRadius(16)
|
|
.backgroundColor('rgba(255,255,255,0.25)')
|
|
.backdropBlur(20)
|
|
.border({
|
|
width: 1,
|
|
color: 'rgba(255,255,255,0.4)'
|
|
})
|
|
}
|
|
|
|
@Builder
|
|
buildPreviewCardLiquid() {
|
|
Column() {
|
|
this.buildPreviewCardContent()
|
|
}
|
|
.width('100%')
|
|
.height(160)
|
|
.padding(16)
|
|
.borderRadius(16)
|
|
.linearGradient({
|
|
angle: 135,
|
|
colors: [['rgba(100,181,246,0.6)', 0.0], ['rgba(255,255,255,0.3)', 0.5], ['rgba(255,138,128,0.4)', 1.0]]
|
|
})
|
|
.backdropBlur(15)
|
|
}
|
|
|
|
@Builder
|
|
buildPreviewCardImmersive() {
|
|
Column() {
|
|
this.buildPreviewCardContent()
|
|
}
|
|
.width('100%')
|
|
.height(160)
|
|
.padding(16)
|
|
.borderRadius(16)
|
|
.linearGradient({
|
|
angle: 180,
|
|
colors: [['rgba(0,0,0,0.4)', 0.0], ['rgba(0,0,0,0.1)', 0.5], ['rgba(0,0,0,0.3)', 1.0]]
|
|
})
|
|
.backdropBlur(10)
|
|
}
|
|
|
|
@Builder
|
|
buildPreviewCardTransparent() {
|
|
Column() {
|
|
this.buildPreviewCardContent()
|
|
}
|
|
.width('100%')
|
|
.height(160)
|
|
.padding(16)
|
|
.borderRadius(16)
|
|
.backgroundColor('transparent')
|
|
.border({
|
|
width: 1,
|
|
color: '#E0E0E0',
|
|
style: BorderStyle.Dashed
|
|
})
|
|
}
|
|
|
|
@Builder
|
|
buildPreviewCardGradient() {
|
|
Column() {
|
|
this.buildPreviewCardContent()
|
|
}
|
|
.width('100%')
|
|
.height(160)
|
|
.padding(16)
|
|
.borderRadius(16)
|
|
.linearGradient({
|
|
angle: 135,
|
|
colors: this.getGradientColors()
|
|
})
|
|
}
|
|
|
|
@Builder
|
|
buildPreviewCardContent() {
|
|
if (this.showTime) {
|
|
Row() {
|
|
Text('12:00')
|
|
.fontSize(15)
|
|
.fontColor(this.isDarkText() ? '#1A1A1A' : '#FFFFFF')
|
|
.fontWeight(FontWeight.Bold)
|
|
}
|
|
.width('100%')
|
|
.justifyContent(FlexAlign.End)
|
|
}
|
|
|
|
if (this.showQuote) {
|
|
Column() {
|
|
Text(this.quoteText)
|
|
.fontSize(18)
|
|
.fontColor(this.isDarkText() ? '#1A1A1A' : '#FFFFFF')
|
|
.fontWeight(FontWeight.Bold)
|
|
.margin({ bottom: 4 })
|
|
Text(this.authorText)
|
|
.fontSize(14)
|
|
.fontColor(this.isDarkText() ? '#666666' : '#FFFFFFCC')
|
|
.fontWeight(FontWeight.Medium)
|
|
}
|
|
.alignItems(HorizontalAlign.Start)
|
|
.margin({ top: 12, bottom: 12 })
|
|
}
|
|
|
|
if (this.showWeather) {
|
|
Row() {
|
|
Text('☀️')
|
|
.fontSize(18)
|
|
Text('25°C')
|
|
.fontSize(15)
|
|
.fontColor(this.isDarkText() ? '#1A1A1A' : '#FFFFFF')
|
|
.fontWeight(FontWeight.Medium)
|
|
.margin({ left: 4 })
|
|
}
|
|
.width('100%')
|
|
.justifyContent(FlexAlign.End)
|
|
}
|
|
}
|
|
|
|
@Builder
|
|
buildStyleSelector() {
|
|
Column({ space: 12 }) {
|
|
Text('卡片样式')
|
|
.fontSize(16)
|
|
.fontWeight(FontWeight.Medium)
|
|
.fontColor('#1A1A1A')
|
|
.alignSelf(ItemAlign.Start)
|
|
|
|
Column({ space: 8 }) {
|
|
Row({ space: 8 }) {
|
|
this.buildStyleOption('classic', '经典', ['#7B1FA2', '#9C27B0'], 'gradient')
|
|
this.buildStyleOption('modern', '护眼', ['#2E7D32', '#4CAF50'], 'gradient')
|
|
this.buildStyleOption('minimal', '极简', ['#424242', '#757575'], 'gradient')
|
|
this.buildStyleOption('elegant', '优雅', ['#FF6B6B', '#FF8E53'], 'gradient')
|
|
}
|
|
.width('100%')
|
|
.justifyContent(FlexAlign.SpaceBetween)
|
|
|
|
Row({ space: 8 }) {
|
|
this.buildStyleOption('frosted', '毛玻璃', ['rgba(255,255,255,0.25)', 'rgba(255,255,255,0.1)'], 'frosted')
|
|
this.buildStyleOption('liquid', '柔光', ['rgba(100,181,246,0.4)', 'rgba(255,255,255,0.2)'], 'liquid')
|
|
this.buildStyleOption('immersive', '沉浸式', ['rgba(0,0,0,0.3)', 'rgba(0,0,0,0.1)'], 'immersive')
|
|
this.buildStyleOption('transparent', '纯白', ['transparent', 'transparent'], 'transparent')
|
|
}
|
|
.width('100%')
|
|
.justifyContent(FlexAlign.SpaceBetween)
|
|
}
|
|
}
|
|
.width('100%')
|
|
.padding(16)
|
|
.backgroundColor('#F5F5F5')
|
|
.borderRadius(12)
|
|
}
|
|
|
|
@Builder
|
|
buildStyleOption(style: string, label: string, colors: string[], type: string) {
|
|
Column() {
|
|
if (type === 'frosted') {
|
|
Column()
|
|
.width(40)
|
|
.height(40)
|
|
.borderRadius(20)
|
|
.backgroundColor('rgba(0,0,0,0.3)')
|
|
.backdropBlur(20)
|
|
.border({
|
|
width: 1,
|
|
color: 'rgba(255,255,255,0.2)'
|
|
})
|
|
} else if (type === 'liquid') {
|
|
Column()
|
|
.width(40)
|
|
.height(40)
|
|
.borderRadius(20)
|
|
.linearGradient({
|
|
angle: 135,
|
|
colors: [['rgba(100,181,246,0.6)', 0.0], ['rgba(255,255,255,0.3)', 0.5], ['rgba(255,138,128,0.4)', 1.0]]
|
|
})
|
|
.backdropBlur(15)
|
|
} else if (type === 'immersive') {
|
|
Column()
|
|
.width(40)
|
|
.height(40)
|
|
.borderRadius(20)
|
|
.linearGradient({
|
|
angle: 180,
|
|
colors: [['rgba(0,0,0,0.4)', 0.0], ['rgba(0,0,0,0.1)', 0.5], ['rgba(0,0,0,0.3)', 1.0]]
|
|
})
|
|
.backdropBlur(10)
|
|
} else if (type === 'transparent') {
|
|
Column()
|
|
.width(40)
|
|
.height(40)
|
|
.borderRadius(20)
|
|
.border({
|
|
width: 2,
|
|
color: '#E0E0E0',
|
|
style: BorderStyle.Dashed
|
|
})
|
|
} else {
|
|
Column()
|
|
.width(40)
|
|
.height(40)
|
|
.borderRadius(20)
|
|
.linearGradient({
|
|
angle: 135,
|
|
colors: [[colors[0], 0.0], [colors[1], 1.0]]
|
|
})
|
|
}
|
|
|
|
Text(label)
|
|
.fontSize(12)
|
|
.fontColor(this.selectedStyle === style ? '#007AFF' : '#666666')
|
|
.margin({ top: 4 })
|
|
}
|
|
.padding(8)
|
|
.borderRadius(12)
|
|
.border({
|
|
width: this.selectedStyle === style ? 2 : 0,
|
|
color: '#007AFF'
|
|
})
|
|
.backgroundColor(this.selectedStyle === style ? '#E3F2FD' : 'transparent')
|
|
.onClick(() => {
|
|
this.selectedStyle = style;
|
|
})
|
|
}
|
|
|
|
@Builder
|
|
buildDisplayOptions() {
|
|
Column({ space: 12 }) {
|
|
Text('显示选项（内测功能）')
|
|
.fontSize(16)
|
|
.fontWeight(FontWeight.Medium)
|
|
.fontColor('#1A1A1A')
|
|
.alignSelf(ItemAlign.Start)
|
|
|
|
this.buildToggle('显示时间', this.showTime, (value) => { this.showTime = value; })
|
|
this.buildToggle('显示天气', this.showWeather, (value) => { this.showWeather = value; })
|
|
this.buildToggle('显示诗词', this.showQuote, (value) => { this.showQuote = value; })
|
|
}
|
|
.width('100%')
|
|
.padding(16)
|
|
.backgroundColor('#F5F5F5')
|
|
.borderRadius(12)
|
|
}
|
|
|
|
@Builder
|
|
buildToggle(label: string, value: boolean, onChange: (value: boolean) => void) {
|
|
Row() {
|
|
Text(label)
|
|
.fontSize(14)
|
|
.fontColor('#1A1A1A')
|
|
|
|
Toggle({ type: ToggleType.Switch, isOn: value })
|
|
.selectedColor('#007AFF')
|
|
.onChange(onChange)
|
|
}
|
|
.width('100%')
|
|
.justifyContent(FlexAlign.SpaceBetween)
|
|
}
|
|
|
|
@Builder
|
|
buildContentSettings() {
|
|
Column({ space: 12 }) {
|
|
Text('内容设置')
|
|
.fontSize(16)
|
|
.fontWeight(FontWeight.Medium)
|
|
.fontColor('#1A1A1A')
|
|
.alignSelf(ItemAlign.Start)
|
|
|
|
Column({ space: 8 }) {
|
|
Text('诗词内容')
|
|
.fontSize(14)
|
|
.fontColor('#666666')
|
|
.alignSelf(ItemAlign.Start)
|
|
|
|
TextArea({ text: $$this.quoteText })
|
|
.width('100%')
|
|
.height(80)
|
|
.fontSize(14)
|
|
.backgroundColor('#FFFFFF')
|
|
.borderRadius(8)
|
|
.padding(12)
|
|
}
|
|
|
|
Column({ space: 8 }) {
|
|
Text('作者信息')
|
|
.fontSize(14)
|
|
.fontColor('#666666')
|
|
.alignSelf(ItemAlign.Start)
|
|
|
|
TextInput({ text: $$this.authorText })
|
|
.width('100%')
|
|
.height(44)
|
|
.fontSize(14)
|
|
.backgroundColor('#FFFFFF')
|
|
.borderRadius(8)
|
|
.padding({ left: 12, right: 12 })
|
|
}
|
|
}
|
|
.width('100%')
|
|
.padding(16)
|
|
.backgroundColor('#F5F5F5')
|
|
.borderRadius(12)
|
|
}
|
|
|
|
getGradientColors(): Array<[ResourceColor, number]> {
|
|
switch (this.selectedStyle) {
|
|
case 'classic':
|
|
return [['#7B1FA2', 0.0], ['#9C27B0', 1.0]];
|
|
case 'modern':
|
|
return [['#2E7D32', 0.0], ['#4CAF50', 1.0]];
|
|
case 'minimal':
|
|
return [['#424242', 0.0], ['#757575', 1.0]];
|
|
case 'elegant':
|
|
return [['#FF6B6B', 0.0], ['#FF8E53', 1.0]];
|
|
default:
|
|
return [['#7B1FA2', 0.0], ['#9C27B0', 1.0]];
|
|
}
|
|
}
|
|
}
|