主题设置开发 (#281)

* first commit * test * 重构ThemeManager结构 * 初步实现主题颜色切换 * 1.实现主题列表持久化存储 2.实现主题删除 * 实现添加主题 * pr测试：合并分支
mgz0227 · Nov 23, 2024 · c7affac · c7affac
1 parent 6caf4aa
commit c7affac
Show file tree

Hide file tree

Showing 134 changed files with 1,319 additions and 338 deletions.
diff --git a/commons/colorLibrary/src/main/resources/base/element/string.json b/commons/colorLibrary/src/main/resources/base/element/string.json
@@ -20,14 +20,6 @@
       "name": "color_black_88",
       "value": "rgba(0, 0, 0, 0.88)"
     },
-    {
-      "name": "ThemeColor",
-      "value": "#FF6600"
-    },
-    {
-      "name": "BackgroundThemeColor",
-      "value": "rgba(255, 102, 0, 0.12)"
-    },
     {
       "name": "color_black_6",
       "value": "rgba(0, 0, 0, 0.06)"

diff --git a/entry/src/main/ets/common/constants/Theme.ets b/entry/src/main/ets/common/constants/Theme.ets
@@ -0,0 +1,18 @@
+import { ThemeColorItem } from "../model/Theme"
+
+// 配置主题颜色
+export class ThemeColor {
+  static readonly ORANGE: ThemeColorItem = {mainColor: '#ff6600', secondColor: '#ffece0'}
+  static readonly RED: ThemeColorItem = {mainColor: '#ef4444', secondColor: '#fde8e8'}
+  static readonly YELLOW: ThemeColorItem = {mainColor: '#ff9500', secondColor: '#fff2e0'}
+  static readonly BLUE: ThemeColorItem = {mainColor: '#188bff', secondColor: '#e3f1ff'}
+  static readonly GREEN: ThemeColorItem = {mainColor: '#24b277', secondColor: '#e4f5ee'}
+}
+
+// AppStorage key 标识
+export class ThemeStorageKey {
+  static readonly THEME: string = 'theme' // 主题key
+  static readonly THEMELIST: string = 'themelist'
+  static readonly THEMELISTSTR: string = 'themeliststr'
+  static readonly THEMEINDEX: string = 'themeindex' // 被选中主题索引key
+}
diff --git a/entry/src/main/ets/common/model/Theme.ets b/entry/src/main/ets/common/model/Theme.ets
@@ -0,0 +1,10 @@
+export interface ThemeColorItem {
+  mainColor: string // 主色 前景色
+  secondColor: string // 次色 背景色
+}
+
+export interface ThemeItem {
+  mainColor: string // 主色 前景色
+  secondColor: string // 次色 背景色
+  text: string
+}
diff --git a/entry/src/main/ets/common/utils/ThemeManager.ets b/entry/src/main/ets/common/utils/ThemeManager.ets
@@ -0,0 +1,55 @@
+import { ThemeColor, ThemeStorageKey } from "../constants/Theme";
+import { ThemeItem } from "../model/Theme";
+
+export class ThemeManager {
+  themeList: ThemeItem[] = [
+    {text: '主题1', mainColor: ThemeColor.ORANGE.mainColor, secondColor: ThemeColor.ORANGE.secondColor},
+    {text: '主题2', mainColor: ThemeColor.RED.mainColor, secondColor: ThemeColor.RED.secondColor},
+    {text: '主题3', mainColor: ThemeColor.GREEN.mainColor, secondColor: ThemeColor.GREEN.secondColor},
+    {text: '主题4', mainColor: ThemeColor.YELLOW.mainColor, secondColor: ThemeColor.YELLOW.secondColor},
+    {text: '主题5', mainColor: ThemeColor.BLUE.mainColor, secondColor: ThemeColor.BLUE.secondColor},
+  ]
+
+  init() {
+    PersistentStorage.persistProp<ThemeItem>(ThemeStorageKey.THEME, {text: '主题1', mainColor: ThemeColor.ORANGE.mainColor, secondColor: ThemeColor.ORANGE.secondColor})
+    PersistentStorage.persistProp<string>(ThemeStorageKey.THEMELISTSTR, JSON.stringify(this.themeList))
+
+    // 解析主题数组字符串 加载主题
+    const str = AppStorage.get<string>(ThemeStorageKey.THEMELISTSTR)
+    const themeList = JSON.parse(str as string) as ThemeItem[]
+    AppStorage.setOrCreate<ThemeItem[]>(ThemeStorageKey.THEMELIST, themeList)
+
+    PersistentStorage.persistProp<number>(ThemeStorageKey.THEMEINDEX, 0) // 被选中主题的索引
+  }
+
+  setTheme(newTheme: ThemeItem, index: number) {
+    AppStorage.setOrCreate<ThemeItem>(ThemeStorageKey.THEME, newTheme)
+    AppStorage.setOrCreate<number>(ThemeStorageKey.THEMEINDEX, index)
+  }
+
+  addTheme(newTheme: ThemeItem) {
+    const str = AppStorage.get<string>(ThemeStorageKey.THEMELISTSTR)
+    const themeList = JSON.parse(str as string) as ThemeItem[]
+    themeList.push(newTheme)
+    AppStorage.setOrCreate(ThemeStorageKey.THEMELISTSTR, JSON.stringify(themeList))
+    AppStorage.setOrCreate<ThemeItem[]>(ThemeStorageKey.THEMELIST, themeList)
+  }
+
+  deleteTheme(index: number) {
+    const str = AppStorage.get<string>(ThemeStorageKey.THEMELISTSTR)
+    let themeList = JSON.parse(str as string) as ThemeItem[]
+    let activeIndex: number = AppStorage.get<number>(ThemeStorageKey.THEMEINDEX) as number
+    if (activeIndex > index) {
+        --activeIndex
+    } else if (activeIndex == index) {
+      activeIndex = 0
+    }
+    themeList = themeList.filter((item, i) => i != index)
+    this.setTheme(themeList[activeIndex], activeIndex)
+    AppStorage.setOrCreate(ThemeStorageKey.THEMELISTSTR, JSON.stringify(themeList))
+    AppStorage.setOrCreate<ThemeItem[]>(ThemeStorageKey.THEMELIST, themeList)
+  }
+}
+
+// 单例模式
+export const themeManager = new ThemeManager()
diff --git a/entry/src/main/ets/componets/Form/FormInput.ets b/entry/src/main/ets/componets/Form/FormInput.ets
@@ -1,4 +1,7 @@
 import PaddingConstants from '../../common/constants/PaddingConstants'
+import { ThemeStorageKey } from '../../common/constants/Theme'
+import { ThemeItem } from '../../common/model/Theme'
+
 /**
  * @author 2008
  * @datetime 2024/7/20 01:21
@@ -19,6 +22,8 @@ export  default  struct FormInput {
   onChange: Function = (_value: string) => {}
   showTitle: boolean = false
   icon:Resource|string = $r('app.media.icon_rss_source_check_image_font')
+  // 主题颜色
+  @StorageProp(ThemeStorageKey.THEME) theme: ThemeItem = {} as ThemeItem
   build() {
     Column() {
       Row() {
@@ -46,7 +51,7 @@ export  default  struct FormInput {
             .backgroundColor(Color.Transparent)
             .placeholderColor('#73000000')
             .placeholderFont({ size: 16, weight: 400 })
-            .caretColor('#FF6600')
+            .caretColor(this.theme.mainColor)
             .margin({ top: 10, bottom: 10 })
             .fontSize(16)
             .fontColor('#E0000000')

diff --git a/entry/src/main/ets/componets/Form/FormItem.ets b/entry/src/main/ets/componets/Form/FormItem.ets
@@ -1,3 +1,6 @@
+import { ThemeStorageKey } from "../../common/constants/Theme"
+import { ThemeItem } from "../../common/model/Theme"
+
 export enum FormItemType {
   Input
 }
@@ -16,6 +19,9 @@ export  default  struct FormItem {
   onChange: Function = (_value: string) => {}
   showTitle: boolean = true
 
+  // 主题颜色
+  @StorageProp(ThemeStorageKey.THEME) theme: ThemeItem = {} as ThemeItem
+
   build() {
     Column() {
       Row() {
@@ -46,7 +52,7 @@ export  default  struct FormItem {
           TextInput({ text: this.value ?? '', placeholder: `请输入${this.label}` })
             .placeholderColor('#73000000')
             .placeholderFont({ size: 14, weight: 400 })
-            .caretColor('#FF6600')
+            .caretColor(this.theme.mainColor)
             .height(38)
             .margin({ top: 10, bottom: 10 })
             .fontSize(14)

diff --git a/entry/src/main/ets/componets/Reader/DownloadSettingDialog.ets b/entry/src/main/ets/componets/Reader/DownloadSettingDialog.ets
@@ -1,4 +1,6 @@
 import { AddDownloadDialog } from 'ets/componets/Reader/AddDownloadDialog';
+import { ThemeStorageKey } from '../../common/constants/Theme';
+import { ThemeItem } from '../../common/model/Theme';
 
 @Component
 export default struct DownloadSettingDialog{
@@ -13,6 +15,7 @@ export default struct DownloadSettingDialog{
   @State StartText: string = "1" // 下载-缓存开始章节
   @State EndText: string = "2" // 下载-缓存结束章节
   controller: TextInputController = new TextInputController()
+  @StorageProp(ThemeStorageKey.THEME) theme: ThemeItem = {} as ThemeItem
 
   build() {
     Column() {
@@ -109,15 +112,15 @@ export default struct DownloadSettingDialog{
           Button() {
             Text("取消")
               .lineHeight(24)
-              .fontColor($r('app.string.ThemeColor'))
+              .fontColor(this.theme.mainColor)
               .font({
                 size: 16,
                 weight: 500
               })
           }
           .width("80%")
           .height(40)
-          .backgroundColor($r('app.string.BackgroundThemeColor'))
+          .backgroundColor(this.theme.secondColor)
         }
 
         GridItem() {
@@ -132,7 +135,7 @@ export default struct DownloadSettingDialog{
           }
           .width("80%")
           .height(40)
-          .backgroundColor($r('app.string.ThemeColor'))
+          .backgroundColor(this.theme.mainColor)
           .onClick(() => {
             this.isShowDownload = false
             this.isShowSetting = false

diff --git a/entry/src/main/ets/componets/Reader/exportRuleDialog.ets b/entry/src/main/ets/componets/Reader/exportRuleDialog.ets
@@ -4,13 +4,17 @@
  * @className: exportRuleDialog
  */
 import CommonConstants from '../../common/constants/CommonConstants'
+import { ThemeStorageKey } from '../../common/constants/Theme'
+import { ThemeItem } from '../../common/model/Theme'
 
 @CustomDialog
 @Preview
 export default struct exportRuleDialog{
   controller?: CustomDialogController
   cancel: () => void = () => {
   }
+  // 主题颜色
+  @StorageProp(ThemeStorageKey.THEME) theme: ThemeItem = {} as ThemeItem
   build() {
       Stack(){
       Column(){
@@ -34,7 +38,7 @@ export default struct exportRuleDialog{
               }){
                 Radio({value:'default',group:'exportGroup'})
                   .radioStyle({
-                    checkedBackgroundColor: $r('app.color.theme_color')
+                    checkedBackgroundColor: this.theme.mainColor
                   })
                   .checked(true)
                   .onChange(()=>{
@@ -54,7 +58,7 @@ export default struct exportRuleDialog{
               }){
                 Radio({value:'default',group:'exportGroup'})
                   .radioStyle({
-                    checkedBackgroundColor: $r('app.color.theme_color')
+                    checkedBackgroundColor: this.theme.mainColor
                   })
                   .onChange(()=>{
 
@@ -85,7 +89,7 @@ export default struct exportRuleDialog{
               left:32,right:32,
               top:8,bottom:8
             })
-            .backgroundColor($r('app.color.theme_color'))
+            .backgroundColor(this.theme.mainColor)
 
             Column(){
               Text('导出本地').font({

diff --git a/entry/src/main/ets/componets/aboutUs/VersionUpdate.ets b/entry/src/main/ets/componets/aboutUs/VersionUpdate.ets
@@ -1,8 +1,13 @@
+import { ThemeStorageKey } from "../../common/constants/Theme"
+import { ThemeItem } from "../../common/model/Theme"
+
 @CustomDialog
 export default struct VersionUpdateCustomDialog {
   controller: CustomDialogController
   @State clickUpdate: boolean = false
   @State ProgressValue: number = 40
+  // 主题颜色
+  @StorageProp(ThemeStorageKey.THEME) theme: ThemeItem = {} as ThemeItem
 
   build() {
     Column() {
@@ -55,7 +60,7 @@ export default struct VersionUpdateCustomDialog {
 
       if (!this.clickUpdate) {
         Button("立即更新")
-          .backgroundColor("#FF6600")
+          .backgroundColor(this.theme.mainColor)
           .width("73%")
           .margin({
             top: 24,
@@ -81,7 +86,7 @@ export default struct VersionUpdateCustomDialog {
             })
           })
           .width("73%")
-          .color("#FF6600")
+          .color(this.theme.mainColor)
           .backgroundColor("#FFAF7A")
           .margin({
             top: 24,

diff --git a/entry/src/main/ets/componets/bookDetail/note/NoteListItem.ets b/entry/src/main/ets/componets/bookDetail/note/NoteListItem.ets
@@ -9,6 +9,8 @@ import CommonConstants from '../../../common/constants/CommonConstants'
 import { NoteVO } from '../../../componetsmodel/NoteVO';
 import CircleGeneralButton from './CircleGeneralButton';
 import { promptAction } from '@kit.ArkUI';
+import { ThemeItem } from '../../../common/model/Theme';
+import { ThemeStorageKey } from '../../../common/constants/Theme';
 
 @Component
 export default struct NoteListItem {
@@ -18,6 +20,8 @@ export default struct NoteListItem {
   @State wordCount: number = 48;
   @State editContent: string = '';
   private saveChange = (val: string) => {};
+  // 主题颜色
+  @StorageProp(ThemeStorageKey.THEME) theme: ThemeItem = {} as ThemeItem
   textChange(val: string): void {
     this.editContent = val;
     this.wordCount = this.editContent.length;
@@ -54,7 +58,7 @@ export default struct NoteListItem {
           .height(22)
           .borderRadius(40)
           .padding({top: 2, bottom: 2, left: 16, right: 16})
-          .backgroundColor('#FF6600')
+          .backgroundColor(this.theme.mainColor)
           .fontColor('#FFFFFF')
           .onClick(() => {
             this.save();
@@ -84,7 +88,7 @@ export default struct NoteListItem {
         TextArea({text: this.editContent})
           .height('auto')
           .fontColor('#e0000000')
-          .caretColor('#FF6600')
+          .caretColor(this.theme.mainColor)
           .fontSize(12)
           .fontWeight(400)
           .fontColor('#e0000000')

diff --git a/entry/src/main/ets/componets/common/Dialog.ets b/entry/src/main/ets/componets/common/Dialog.ets
@@ -1,3 +1,6 @@
+import { ThemeStorageKey } from "../../common/constants/Theme";
+import { ThemeItem } from "../../common/model/Theme";
+
 @CustomDialog
   // 通用弹窗
 export default struct Dialog {
@@ -7,6 +10,9 @@ export default struct Dialog {
   @Prop ConfirmString: string = "确定"
   @BuilderParam child: () => void // 通用组件
 
+  // 主题颜色
+  @StorageProp(ThemeStorageKey.THEME) theme: ThemeItem = {} as ThemeItem
+
   build() {
     Column() {
       Row() {
@@ -41,7 +47,7 @@ export default struct Dialog {
       }) {
         Button() {
           Text(this.CancelString)
-            .fontColor("#FF6600")
+            .fontColor(this.theme.mainColor)
             .lineHeight(22)
             .font({
               size: 14,
@@ -50,7 +56,7 @@ export default struct Dialog {
         }
         .width(112)
         .height(38)
-        .backgroundColor("rgba(255, 102, 0, 0.12)")
+        .backgroundColor(this.theme.secondColor)
         .onClick(() => {
           if (this.controller != undefined) {
             this.controller.close()
@@ -68,7 +74,7 @@ export default struct Dialog {
         }
         .width(112)
         .height(38)
-        .backgroundColor("#FF6600")
+        .backgroundColor(this.theme.mainColor)
         .onClick(() => {
 
         })

diff --git a/entry/src/main/ets/componets/common/ReadShow.ets b/entry/src/main/ets/componets/common/ReadShow.ets
@@ -7,12 +7,18 @@ import { BookHistory } from '../../database/entities/BookHistory'
 import { Books } from '../../database/entities/Books'
 import { router } from '@kit.ArkUI'
 import clickUtil from '../../common/utils/ClickUtils'
+import { ThemeStorageKey } from '../../common/constants/Theme'
+import { ThemeItem } from '../../common/model/Theme'
 
 @Component
 export default struct ReadShow {
   @Link showReadShow:boolean
   @State bookHistory:BookHistory[] = []
   @State book:Books = new Books()
+
+  // 主题颜色
+  @StorageProp(ThemeStorageKey.THEME) theme: ThemeItem = {} as ThemeItem
+
   aboutToAppear(): void {
     this.getBookHistoryList()
   }
@@ -64,7 +70,7 @@ export default struct ReadShow {
               .fontWeight(600)
               .padding(10)
               .borderRadius(20)
-              .fontColor('#FF6600')
+              .fontColor(this.theme.mainColor)
               .backgroundColor(Color.White)
           }
           .padding({left:55,right:30})