118 lines
4.2 KiB
Plaintext
118 lines
4.2 KiB
Plaintext
|
// entry/src/main/ets/common/TipsPanel.ets
|
|||
|
|
// 首启功能引导卡片：底部弹出，Swiper 三页，左下"上一步" / 右下"下一步"（末页变"开始使用"）。
|
|||
|
|
// 数据源 items 中图标为 media 下的 SVG（tip_security / tip_calendar / tip_mute）。
|
|||
|
|
// 同时被首页（首启自动弹出）与设置页（手动 revisar）复用。
|
|||
|
|
import { AppSettings } from './AppSettings';
|
|||
|
|
|
|||
|
|
/** 单张引导卡的数据 */
|
|||
|
|
interface TipItem {
|
|||
|
|
icon: Resource; // app.media 下的 SVG 矢量图标
|
|||
|
|
title: string;
|
|||
|
|
desc: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@Component
|
|||
|
|
export struct TipsPanel {
|
|||
|
|
@State current: number = 0;
|
|||
|
|
private controller: SwiperController = new SwiperController();
|
|||
|
|
/** 末页点击"开始使用"时回调（由宿主关闭弹层） */
|
|||
|
|
onClose: () => void = () => {};
|
|||
|
|
|
|||
|
|
private items: TipItem[] = [
|
|||
|
|
{
|
|||
|
|
icon: $r('app.media.tip_security'),
|
|||
|
|
title: '你的数据安全，由你做主',
|
|||
|
|
desc: '我们不在服务器保存任何日程或账号数据。日历只在你的设备与你自己填写的 CalDAV 服务器之间同步，' +
|
|||
|
|
'全程加密保存。开源、无后门，数据始终属于你。'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: $r('app.media.tip_calendar'),
|
|||
|
|
title: '系统日历，也能一起管',
|
|||
|
|
desc: '手机系统日历可与 CalDAV 日历混合显示在同一时间轴；还能把系统日历本通过 CalDAV 同步备份，' +
|
|||
|
|
'一处编辑、处处更新。'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: $r('app.media.tip_mute'),
|
|||
|
|
title: '只读与静音，自由设置',
|
|||
|
|
desc: '每个日历本都能单独设为只读或静音：只读日历不出现在新建选择中、避免误改；' +
|
|||
|
|
'静音日历照常显示，但不再推送提醒。'
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
build() {
|
|||
|
|
Column({ space: 0 }) {
|
|||
|
|
Swiper(this.controller) {
|
|||
|
|
ForEach(this.items, (item: TipItem, idx: number) => {
|
|||
|
|
Column({ space: 16 }) {
|
|||
|
|
Image(item.icon)
|
|||
|
|
.width(140)
|
|||
|
|
.height(140)
|
|||
|
|
.objectFit(ImageFit.Contain)
|
|||
|
|
.margin({ top: 24, bottom: 8 })
|
|||
|
|
Text(item.title)
|
|||
|
|
.fontSize(19)
|
|||
|
|
.fontWeight(FontWeight.Bold)
|
|||
|
|
.fontColor($r('app.color.text_primary'))
|
|||
|
|
.margin({ bottom: 8 })
|
|||
|
|
Text(item.desc)
|
|||
|
|
.fontSize(14)
|
|||
|
|
.fontColor($r('app.color.text_secondary'))
|
|||
|
|
.textAlign(TextAlign.Center)
|
|||
|
|
.width('100%')
|
|||
|
|
.lineHeight(22)
|
|||
|
|
.padding({ left: 28, right: 28 })
|
|||
|
|
}
|
|||
|
|
.width('100%')
|
|||
|
|
.height('100%')
|
|||
|
|
.justifyContent(FlexAlign.Center)
|
|||
|
|
.alignItems(HorizontalAlign.Center)
|
|||
|
|
}, (item: TipItem, idx: number) => `tip_${idx}`)
|
|||
|
|
}
|
|||
|
|
.width('100%')
|
|||
|
|
.layoutWeight(1)
|
|||
|
|
.indicator(new DotIndicator().selectedColor('#007DFF').color('#CFD8E3').itemWidth(6).itemHeight(6))
|
|||
|
|
.loop(false)
|
|||
|
|
.onChange((index: number): void => {
|
|||
|
|
this.current = index;
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 底部导航：左下角"上一步" / 右下角"下一步"（末页变"开始使用"）
|
|||
|
|
Row() {
|
|||
|
|
Button('上一步')
|
|||
|
|
.fontSize(15)
|
|||
|
|
.width(96)
|
|||
|
|
.height(42)
|
|||
|
|
.backgroundColor($r('app.color.card_bg'))
|
|||
|
|
.fontColor(this.current === 0 ? $r('app.color.text_hint') : $r('app.color.text_primary'))
|
|||
|
|
.enabled(this.current > 0)
|
|||
|
|
.onClick(() => {
|
|||
|
|
if (this.current > 0) {
|
|||
|
|
this.current -= 1;
|
|||
|
|
this.controller.changeIndex(this.current, false);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
Button(this.current >= this.items.length - 1 ? '开始使用' : '下一步')
|
|||
|
|
.fontSize(15)
|
|||
|
|
.width(96)
|
|||
|
|
.height(42)
|
|||
|
|
.backgroundColor($r('app.color.brand'))
|
|||
|
|
.fontColor($r('app.color.button_text'))
|
|||
|
|
.onClick(() => {
|
|||
|
|
if (this.current >= this.items.length - 1) {
|
|||
|
|
this.onClose();
|
|||
|
|
} else {
|
|||
|
|
this.current += 1;
|
|||
|
|
this.controller.changeIndex(this.current, false);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
.width('100%')
|
|||
|
|
.justifyContent(FlexAlign.SpaceBetween)
|
|||
|
|
.padding({ left: 20, right: 20, top: 12, bottom: 20 })
|
|||
|
|
}
|
|||
|
|
.width('100%')
|
|||
|
|
.height('100%')
|
|||
|
|
.backgroundColor($r('app.color.page_bg'))
|
|||
|
|
}
|
|||
|
|
}
|