时间日期格式和UX优化

Signed-off-by: weiyunxing <weiyunxing@huawei.com>

common/utils/src/main/ets/default/baseUtil/DateAndTimeUtil.ts

@@ -17,33 +17,24 @@
  */
 
 import ConfigData from './ConfigData';
+import i18n from '@ohos.i18n';
+import Intl from "@ohos.intl";
 
 export class DateAndTimeUtil {
   getSystemTime(isUsing24hFormat: boolean) {
     let datetime = new Date();
-    let hours = datetime.getHours();
-    let minutes = datetime.getMinutes();
 
-    let time : Resource | string = this.concatTime(hours, minutes)
-    if (isUsing24hFormat === false) {
-      if (hours < 12) {
-        time = $r("app.string.timeMorning", this.concatTime(hours, minutes));
-      } else if (hours === 12) {
-        time = $r("app.string.timeMorning", this.concatTime(hours, minutes));
-      } else {
-        time = $r("app.string.timeAfternoon",this.concatTime((hours % 12), minutes)) ;
-      }
-    }
-    return time;
+    // @ts-ignore
+    var datefmt= new Intl.DateTimeFormat(i18n.getSystemLanguage(), { timeStyle: 'short' });
+    return datefmt.format(datetime);
   }
 
   getSystemDate() {
-    let dateTime = new Date();
-    let year = dateTime.getFullYear();
-    let month = dateTime.getMonth() + 1;
-    let day = dateTime.getDate();
-    let date = this.concatDate(year, month, day)
-    return date
+    let datetime = new Date();
+
+    // @ts-ignore
+    var datefmt= new Intl.DateTimeFormat(i18n.getSystemLanguage(), { dateStyle: 'long' });
+    return datefmt.format(datetime);
   }
 
   fill(value) {

product/phone/src/main/ets/controller/storage/storageController.ts

@@ -12,7 +12,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import StorageModel from '../../model/StorageImpl/StorageModel'
+import StorageModel from '../../model/storageImpl/StorageModel'
 import {LogAll} from '../../../../../../../common/utils/src/main/ets/default/baseUtil/LogDecorator';
 import LogUtil from '../../../../../../../common/utils/src/main/ets/default/baseUtil/LogUtil';
 import ConfigData from '../../../../../../../common/utils/src/main/ets/default/baseUtil/ConfigData';

product/phone/src/main/ets/pages/multipleUsers.ets

@@ -19,7 +19,7 @@ import {TitleText} from '../../../../../../common/component/src/main/ets/default
 import {DialogButtonLayout, DialogButtonLayoutWithState} from '../../../../../../common/component/src/main/ets/default/dialogComponent';
 import LogUtil from '../../../../../../common/utils/src/main/ets/default/baseUtil/LogUtil';
 import ConfigData from '../../../../../../common/utils/src/main/ets/default/baseUtil/ConfigData';
-import SystemAccountController from '../model/usersAndAccounts/systemAccountController';
+import SystemAccountController from '../model/usersAndAccounts/SystemAccountController';
 import SystemAccountModel from '../model/usersAndAccounts/systemAccountModel';
 import { MAX_LENGTH } from '../model/usersAndAccounts/systemAccountModel';
 import account_osAccount from '@ohos.account.osAccount';

product/phone/src/main/ets/pages/passwordCheck.ets

@@ -17,7 +17,7 @@ import HeadComponent from '../../../../../../common/component/src/main/ets/defau
 import Log from '../../../../../../common/utils/src/main/ets/default/baseUtil/LogDecorator';
 import LogUtil from '../../../../../../common/utils/src/main/ets/default/baseUtil/LogUtil';
 import {PinSubType} from '../model/passwordImpl/PasswordModel';
-import PasswordCheckController from '../controller/password/PasswordCheckController'
+import PasswordCheckController from '../controller/password/PasswordCheckController';
 import Router from '@system.router';
 import InputMethod from '@ohos.inputmethod';
 
@@ -31,32 +31,31 @@ struct PasswordCheck {
   private mController: PasswordCheckController = new PasswordCheckController()
 
   // bind Properties
-  private pinToken: string = undefined
+  private pinToken: string = undefined;
   @State @Watch("freezeView")
-  private freezingTime: number = 0
+  private freezingTime: number = 0;
   @State @Watch("updateView")
-  private remainTimes: number = -1
+  private remainTimes: number = -1;
 
   // handler
   private passwordOnChangeHandler: (value: string) => void;
   private okOnClickHandler: (event?: ClickEvent) => void;
 
   // private Properties
-  private pageRequestCode: number = -1
-  private prevPageUri: string = undefined
-  private pinChallenge: string = undefined
-  @State private passwordType: number = -1
-  @State private promptMessage: string | Resource = ''
-  @State private buttonVisibility: Visibility = Visibility.Visible
+  private pageRequestCode: number = -1;
+  private prevPageUri: string = undefined;
+  private pinChallenge: string = undefined;
+  @State private passwordType: number = -1;
+  @State private promptMessage: string | Resource = '';
+  @State private buttonVisibility: Visibility = Visibility.Visible;
   @State private freezingTimeForView: number = -1;
-  @State private password: string = ''
-  private timerId: number = -1
-  @State isTouchedLeft: boolean = false
-  @State isTouchedRight: boolean = false
+  @State private password: string = '';
+  private timerId: number = -1;
+  @State isTouchedLeft: boolean = false;
+  @State isTouchedRight: boolean = false;
 
   @Log
   aboutToAppear(): void {
-
     this.getRouterParam();
 
     // bind event handlers
@@ -83,7 +82,7 @@ struct PasswordCheck {
    */
   @Log
   getRouterParam() {
-    param = Router.getParams()
+    param = Router.getParams();
     if (!param) {
       return;
     }
@@ -185,6 +184,7 @@ struct PasswordCheck {
                     right: $r('sys.float.ohos_id_card_margin_end')
                   })
                   .color($r("sys.color.ohos_id_color_list_separator"))
+
                 // prompt message
                 Text(this.promptMessage)
                   .fontSize($r('sys.float.ohos_id_text_size_body2'))
@@ -193,6 +193,7 @@ struct PasswordCheck {
                   .align(Alignment.Center)
                   .textAlign(TextAlign.Center)
                   .margin({ top: $r('app.float.distance_14'), bottom: $r('app.float.distance_32') })
+                  .visibility(this.remainTimes === 0 ? Visibility.Hidden : Visibility.Visible)
 
                 // button
                 Row() {
@@ -220,6 +221,7 @@ struct PasswordCheck {
                   Column()
                     .width( $r('app.float.distance_12'))
                     .height($r('app.float.application_button_height'))
+
                   Text($r('app.string.next'))
                     .fontSize($r('app.float.font_16'))
                     .fontWeight(FontWeight.Medium)
@@ -250,7 +252,6 @@ struct PasswordCheck {
                 })
                 .margin({ top: $r('app.float.distance_66') })
                 .visibility(this.buttonVisibility)
-
               }
             }
           }
@@ -310,7 +311,7 @@ struct PasswordCheck {
    */
   @Log
   getButtonVisibility(): Visibility {
-    return this.passwordType == PinSubType.PIN_SIX ? Visibility.Hidden : Visibility.Visible
+    return this.passwordType == PinSubType.PIN_SIX ? Visibility.Hidden : Visibility.Visible;
   }
 
   /**
@@ -321,20 +322,20 @@ struct PasswordCheck {
   @Log
   freezeView() {
     if (this.freezingTime <= 0) {
-      this.stopCountDown()
+      this.stopCountDown();
       return;
     }
     this.freezingTimeForView = this.freezingTime / 1000;
     LogUtil.info(this.TAG_PAGE + `freezeView freezingTimeForView = ${this.freezingTimeForView}`);
     this.timerId = setInterval(() => {
       if (this.freezingTimeForView <= 0) {
-        this.stopCountDown()
-        this.timerId = -1
-        this.freezingTimeForView = 0
-        this.freezingTime = 0
-        this.updateView()
+        this.stopCountDown();
+        this.timerId = -1;
+        this.freezingTimeForView = 0;
+        this.freezingTime = 0;
+        this.updateView();
       } else {
-        this.freezingTimeForView -= 1
+        this.freezingTimeForView -= 1;
       }
     }, 1000)
   }
@@ -346,8 +347,8 @@ struct PasswordCheck {
   stopCountDown() {
     // for freezing view
     if (this.timerId > 0) {
-      clearTimeout(this.timerId)
-      clearInterval(this.freezingTimeForView)
+      clearTimeout(this.timerId);
+      clearInterval(this.freezingTimeForView);
     }
   }
 }

product/phone/src/main/ets/pages/passwordSetting.ets

@@ -12,6 +12,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+import deviceInfo from '@ohos.deviceInfo';
 import HeadComponent from '../../../../../../common/component/src/main/ets/default/headComponent';
 import {DialogButtonLayout} from '../../../../../../common/component/src/main/ets/default/dialogComponent';
 import ConfigData from '../../../../../../common/utils/src/main/ets/default/baseUtil/ConfigData';
@@ -25,6 +27,8 @@ import FeatureAbility from '@ohos.ability.featureAbility';
 import prompt from '@system.prompt';
 import Router from '@system.router';
 
+const deviceTypeInfo = deviceInfo.deviceType;
+
 @Entry
 @Component
 struct PasswordSetting {
@@ -37,13 +41,19 @@ struct PasswordSetting {
 
   // private Properties
   private lockUi: boolean = false // prevent continuous and multiple clicks
+  @State isPhone: boolean = false;
   @State isTouched: boolean = false;
   @State touchedItem: boolean = false;
-  @State listSpace: string = '10vp'
+  @State listSpace: string = '10vp';
   @State faceAuthFailedMessage: string = '';
 
   @Log
   aboutToAppear(): void {
+    if (deviceTypeInfo === 'phone') {
+      this.isPhone = true;
+    } else {
+      this.isPhone = false;
+    }
 
     // bind component and initialize
     this.mController.bindComponent(this)
@@ -85,7 +95,7 @@ struct PasswordSetting {
       if (this.lockUi) {
         return;
       }
-      this.lockUi = true
+      this.lockUi = true;
       globalThis.settingsAbilityContext.startAbility({
         bundleName: ConfigData.FACEAUTH_BUNDLE_NAME,
         abilityName: ConfigData.FACEAUTH_ABILITY_NAME
@@ -100,7 +110,7 @@ struct PasswordSetting {
           })
           LogUtil.error(`${this.TAG_PAGE}, ${ConfigData.FACEAUTH_BUNDLE_NAME} start failed. Cause: ${JSON.stringify(error)}`);
         })
-      this.lockUi = false
+      this.lockUi = false;
     })
   }
 
@@ -124,10 +134,10 @@ struct PasswordSetting {
       if (this.lockUi) {
         return;
       }
-      this.lockUi = true
+      this.lockUi = true;
       LogUtil.info(this.TAG_PAGE + ' disable password onclick : item = ' + JSON.stringify(item))
       this.showClosePasswordDialog(item);
-      this.lockUi = false
+      this.lockUi = false;
     });
   }
 
@@ -150,10 +160,10 @@ struct PasswordSetting {
       if (this.lockUi) {
         return;
       }
-      this.lockUi = true
+      this.lockUi = true;
       LogUtil.info(this.TAG_PAGE + ' item onclick : item = ' + JSON.stringify(item))
       this.gotoNextPage(item)
-      this.lockUi = false
+      this.lockUi = false;
     });
   }
 
@@ -185,11 +195,12 @@ struct PasswordSetting {
                 if (group[0].settingIsSectionTitle && group[0].settingShouldDisplay) {
                   ListItem() {
                     Text(group[0].settingTitle)
+                      .fontColor($r('sys.color.ohos_id_color_text_secondary'))
                       .fontSize($r("app.float.font_14"))
                       .lineHeight($r("app.float.lineHeight_19"))
                       .textAlign(TextAlign.Start)
                       .margin({ top: $r("app.float.distance_9_5") })
-                      .padding({ left: $r('app.float.distance_24'), right: $r('app.float.distance_24') })
+                      .padding({ left: $r('app.float.distance_12'), right: $r('app.float.distance_12') })
                       .width(ConfigData.WH_100_100);
                   }
                 }
@@ -223,7 +234,6 @@ struct PasswordSetting {
                   .width(ConfigData.WH_100_100)
                   .backgroundColor($r("sys.color.ohos_id_color_foreground_contrary"))
                   .borderRadius($r('app.float.radius_24'))
-                  .padding($r('app.float.distance_4'))
                   .divider({
                     strokeWidth: $r('app.float.divider_wh'),
                     color: $r('app.color.color_E3E3E3_grey'),
@@ -237,7 +247,10 @@ struct PasswordSetting {
             .width(ConfigData.WH_100_100)
           }
           .backgroundColor($r("sys.color.ohos_id_color_sub_background"))
-          .padding({ left: $r('app.float.wh_24'), right: $r('app.float.wh_24') })
+          .margin({
+            left: $r('sys.float.ohos_id_card_margin_start'),
+            right: $r('sys.float.ohos_id_card_margin_end')
+          })
           .height(ConfigData.WH_100_100)
           .width(ConfigData.WH_100_100)
           .useSizeType({
@@ -275,7 +288,7 @@ struct PasswordSetting {
   @Log
   gotoNextPage(item: PasswordSettingItem) {
     if (!item.settingUri) {
-      return
+      return;
     }
     Router.push({
       uri: item.settingUri,
@@ -315,8 +328,8 @@ struct PasswordSetting {
         LogUtil.info(this.TAG_PAGE + 'ClosePasswordDialog Closed callbacks')
       },
       autoCancel: true,
-      alignment: DialogAlignment.Bottom,
-      offset: ({ dx: 0, dy: '-16dp' })
+      alignment: this.isPhone ? DialogAlignment.Bottom : DialogAlignment.Center,
+      offset: ({ dx: 0, dy: this.isPhone ? '-16dp' : 0 })
     })
   }
 }

product/phone/src/main/ets/pages/resetPhone.ets

@@ -14,7 +14,7 @@
  */
 
 import HeadComponent from '../../../../../../common/component/src/main/ets/default/headComponent';
-import RestoreFactorySettingsController from '../controller/restoreFactorySettings/restoreFactorySettingsController'
+import RestoreFactorySettingsController from '../controller/restoreFactorySettings/RestoreFactorySettingsController'
 import LogUtil from '../../../../../../common/utils/src/main/ets/default/baseUtil/LogUtil';
 import ConfigData from '../../../../../../common/utils/src/main/ets/default/baseUtil/ConfigData';
 

product/phone/src/main/ets/pages/restoreFactorySettings.ets

@@ -14,7 +14,7 @@
  */
 
 import HeadComponent from '../../../../../../common/component/src/main/ets/default/headComponent';
-import RestoreFactorySettingsController from '../controller/restoreFactorySettings/restoreFactorySettingsController'
+import RestoreFactorySettingsController from '../controller/restoreFactorySettings/RestoreFactorySettingsController'
 import ConfigData from '../../../../../../common/utils/src/main/ets/default/baseUtil/ConfigData';
 import Router from '@system.router';
 

product/phone/src/main/ets/pages/settingList.ets

@@ -163,9 +163,9 @@ const SETTINGS_LIST = [
 @Component
 struct SettingList {
   @State placeholder: string= ''; // for search
-  @State placeholdersize: string = '22'
-  @State listSpaces: string = '12vp'
-  @State isPhone: boolean = false
+  @State placeholdersize: string = '22';
+  @State listSpaces: string = '12vp';
+  @State isPhone: boolean = false;
 
   @Builder NavigationTitle() {
     Column() {
@@ -396,7 +396,8 @@ struct EntryComponent {
       .flexShrink(1)
       .width(ConfigData.WH_100_100)
       .alignSelf(ItemAlign.Start);
-    }.margin({
+    }
+    .margin({
       left: $r('sys.float.ohos_id_card_margin_start'),
       right: $r('sys.float.ohos_id_card_margin_end')
     })

product/phone/src/main/ets/pages/volumeControl.ets

@@ -24,7 +24,8 @@ import OuterComponent from './OuterComponent';
 
 const VOLUME_MIN_VALUE = 0;
 const VOLUME_MAX_VALUE = 15;
-const deviceTypeInfo = deviceInfo.deviceType
+const deviceTypeInfo = deviceInfo.deviceType;
+
 /**
  * Volume control
  */
@@ -49,7 +50,7 @@ export struct VolumeControl {
       VolumeControlComponent();
     }
     .width(ConfigData.WH_100_100)
-    .height(ConfigData.WH_100_100);
+    .height(ConfigData.WH_100_100)
   }
 
   build() {
@@ -59,7 +60,7 @@ export struct VolumeControl {
       })
     }
     .width(ConfigData.WH_100_100)
-    .height(ConfigData.WH_100_100);
+    .height(ConfigData.WH_100_100)
   }
 
   @Log
@@ -87,7 +88,6 @@ struct AudioRingerModeComponent {
   private ringerNormalModel: RingerModel = new RingerModel(Audio.AudioRingMode.RINGER_MODE_NORMAL);
   private TAG = ConfigData.TAG + ' AudioRingerModeComponent ';
 
-
   build() {
        Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween }) {
          RowSplit() {
@@ -97,6 +97,7 @@ struct AudioRingerModeComponent {
              image: $r("app.media.ic_ring"),
              text: $r('app.string.soundModeSound')
            });
+
            AudioRingerModeItem({
              checked: $ringerModeSilent,
              audioRingerModel: this.ringerSilentModel,
@@ -105,17 +106,16 @@ struct AudioRingerModeComponent {
            });
          }
          .resizeable(false)
-         .colorBlend($r("sys.color.ohos_id_color_list_separator"))
+         .colorBlend($r("sys.color.ohos_id_color_panel_bg"))
        }
     .borderRadius($r('app.float.radius_24'))
     .backgroundColor($r("sys.color.ohos_id_color_foreground_contrary"))
     .width(ConfigData.WH_100_100)
     .height($r('app.float.wh_value_119'))
     .padding({
-      top: $r('app.float.distance_16'),
-      bottom: $r('app.float.distance_16')
+      top: $r('app.float.distance_14'),
+      bottom: $r('app.float.distance_14')
     })
-
   }
 
   @Log
@@ -131,7 +131,6 @@ struct AudioRingerModeComponent {
   }
 }
 
-
 /**
  * AudioRingerMode item
  */
@@ -141,13 +140,13 @@ struct AudioRingerModeItem {
   private audioRingerModel: RingerModel;
   private image;
   private text: string | Resource;
-  @State isRk: boolean = true
+  @State isRk: boolean = true;
 
   aboutToAppear() {
     if (deviceTypeInfo === 'default') {
-      this.isRk = true
+      this.isRk = true;
     } else {
-      this.isRk = false
+      this.isRk = false;
     }
   }
   build() {
@@ -156,35 +155,35 @@ struct AudioRingerModeItem {
         .width($r('app.float.wh_value_24'))
         .height($r('app.float.wh_value_24'))
         .objectFit(ImageFit.Contain)
-        .fillColor($r("sys.color.ohos_id_color_primary"))
+        .fillColor($r("sys.color.ohos_fa_icon_secondary"))
+
       Text(this.text)
-        .fontColor($r("sys.color.ohos_id_color_text_primary"))
+        .fontColor($r("app.color.font_color_182431"))
         .fontSize($r("sys.float.ohos_id_text_size_body2"))
         .lineHeight($r("app.float.lineHeight_19"))
         .fontWeight(FontWeight.Regular)
         .textAlign(TextAlign.Center)
-        .margin({top:$r('app.float.wh_4')});
+        .margin({top:$r('app.float.distance_8')});
 
       Radio({ value: '', group: '' })
-        .width(this.isRk?$r('app.float.distance_8'):$r('app.float.wh_value_30'))
-        .height(this.isRk?$r('app.float.distance_8'):$r('app.float.wh_value_30'))
-        .margin({top: $r('app.float.distance_8')})
+        .width(this.isRk ? $r('app.float.distance_8') : $r('app.float.wh_value_24'))
+        .height(this.isRk ? $r('app.float.distance_8') : $r('app.float.wh_value_24'))
+        .margin({top: $r('app.float.distance_4')})
         .checked(this.checked)
-        .enabled(false)
     }
-    .padding({left: $r("app.float.distance_12"), right: $r("app.float.distance_12")})
+    .padding({
+      left: $r("app.float.distance_12"),
+      right: $r("app.float.distance_12")})
     .alignItems(HorizontalAlign.Center)
     .width(ConfigData.WH_50_100)
     .height(ConfigData.WH_100_100)
     .onClick(() => {
-      LogUtil.info(ConfigData.TAG + 'AudioRingerModeItem : item is clicked')
+      LogUtil.info(ConfigData.TAG + 'AudioRingerModeItem : item is clicked');
       this.audioRingerModel.setRingerMode();
     });
   }
 }
 
-
-
 /**
  * Volume control component
  */
@@ -202,17 +201,18 @@ struct VolumeControlComponent {
 
   build() {
     Column() {
-
       VolumeControlItem({
         image: this.volumeRingTone === 0 ? $r("app.media.ic_ring_off") : $r("app.media.ic_ring"),
         volumeValue: $volumeRingTone,
         volumeModel: this.ringtoneModel,
         text: $r("app.string.volumeControlRing")})
+
       VolumeControlItem({
         image: $r("app.media.ic_media"),
         volumeValue: $volumeMedia,
         volumeModel: this.mediaModel,
         text: $r("app.string.volumeControlMedia")})
+
       VolumeControlItem({
         image: $r("app.media.ic_call"),
         volumeValue: $volumeVoiceCall,
@@ -243,7 +243,6 @@ struct VolumeControlComponent {
   }
 }
 
-
 /**
  * Volume control item
  */
@@ -260,7 +259,7 @@ struct VolumeControlItem {
         Image(this.image)
           .width($r('app.float.wh_value_20'))
           .height($r('app.float.wh_value_20'))
-          .fillColor($r("sys.color.ohos_id_color_primary"))
+          .fillColor($r("sys.color.ohos_fa_icon_secondary"))
           .objectFit(ImageFit.Contain)
 
         Text(this.text)
@@ -274,6 +273,7 @@ struct VolumeControlItem {
       .margin({  bottom: $r('app.float.distance_1')})
       .width(ConfigData.WH_100_100)
       .align(Alignment.Center);
+
       Slider({
         value: this.volumeValue,
         min: VOLUME_MIN_VALUE,