add OpenHarmony 1.0 baseline

2026-07-01 19:54:03 -04:00 · 2020-09-08 10:21:39 +08:00
parent 59f96d4973
commit 1a9d2f1bf5
942 changed files with 73345 additions and 0 deletions
@@ -0,0 +1,160 @@
+Language: Cpp
+# BasedOnStyle:  LLVM
+# 访问说明符(public、private等)的偏移
+AccessModifierOffset: -4
+# 开括号(开圆括号、开尖括号、开方括号)后的对齐
+AlignAfterOpenBracket: Align
+# 连续赋值时，等号对齐
+AlignConsecutiveAssignments: false
+# 连续赋值时，变量名对齐
+AlignConsecutiveDeclarations: false
+# 左对齐逃脱换行(使用反斜杠换行)的反斜杠
+AlignEscapedNewlinesLeft: true
+# 水平对齐二元和三元表达式的操作数
+AlignOperands: true
+# 对齐连续的尾随的注释
+AlignTrailingComments: true
+# 允许函数声明的所有参数在放在下一行
+AllowAllParametersOfDeclarationOnNextLine: false
+# 允许短的块放在同一行
+AllowShortBlocksOnASingleLine: false
+# 允许短的case标签放在同一行
+AllowShortCaseLabelsOnASingleLine: false
+# 允许短的函数放在同一行: None, InlineOnly(定义在类中), Empty(空函数), Inline(定义在类中，空函数), All
+AllowShortFunctionsOnASingleLine: Empty
+# 允许短的if语句保持在同一行
+AllowShortIfStatementsOnASingleLine: false
+# 允许短的循环保持在同一行
+AllowShortLoopsOnASingleLine: false
+# 总是在定义返回类型后换行(deprecated)
+AlwaysBreakAfterDefinitionReturnType: None
+# 总是在返回类型后换行: None, All, TopLevel(顶级函数，不包括在类中的函数),
+#   AllDefinitions(所有的定义，不包括声明), TopLevelDefinitions(所有的顶级函数的定义)
+AlwaysBreakAfterReturnType: None
+# 总是在多行string字面量前换行
+AlwaysBreakBeforeMultilineStrings: true
+# 总是在template声明后换行
+AlwaysBreakTemplateDeclarations: false
+# false表示函数实参要么都在同一行，要么都各自一行
+BinPackArguments: true
+# false表示所有形参要么都在同一行，要么都各自一行
+BinPackParameters: false
+# 大括号换行，只有当BreakBeforeBraces设置为Custom时才有效
+BraceWrapping:
+  AfterClass: false
+  AfterControlStatement: false
+  AfterEnum: false
+  AfterFunction: true
+  AfterNamespace: false
+  AfterObjCDeclaration: false
+  AfterStruct: false
+  AfterUnion: false
+  BeforeCatch: false
+  BeforeElse: false
+  IndentBraces: false
+# 在二元运算符前换行: None(在操作符后换行), NonAssignment(在非赋值的操作符前换行), All(在操作符前换行)
+BreakBeforeBinaryOperators: None
+# 在大括号前换行: Attach(始终将大括号附加到周围的上下文), Linux(除函数、命名空间和类定义，与Attach类似),
+#   Mozilla(除枚举、函数、记录定义，与Attach类似), Stroustrup(除函数定义、catch、else，与Attach类似),
+#   Allman(总是在大括号前换行), GNU(总是在大括号前换行，并对于控制语句的大括号增加额外的缩进), WebKit(在函数前换行), Custom
+#   注：这里认为语句块也属于函数
+BreakBeforeBraces: Custom
+# 在三元运算符前换行
+BreakBeforeTernaryOperators: true
+# 在构造函数的初始化列表的逗号前换行
+BreakConstructorInitializersBeforeComma: false
+# 每行字符的限制，0表示没有限制
+ColumnLimit: 120
+# 描述具有特殊意义的注释的正则表达式，它不应该被分割为多行或以其它方式改变
+CommentPragmas: "^ IWYU pragma:"
+# 构造函数的初始化列表要么都在同一行，要么都各自一行
+ConstructorInitializerAllOnOneLineOrOnePerLine: true
+# 构造函数的初始化列表的缩进宽度
+ConstructorInitializerIndentWidth: 4
+# 延续的行的缩进宽度
+ContinuationIndentWidth: 4
+# 去除C++11的列表初始化的大括号{后和}前的空格
+Cpp11BracedListStyle: true
+# 继承最常用的指针和引用的对齐方式
+DerivePointerAlignment: false
+# 关闭格式化
+DisableFormat: false
+# 自动检测函数的调用和定义是否被格式为每行一个参数(Experimental)
+ExperimentalAutoDetectBinPacking: false
+# 需要被解读为foreach循环而不是函数调用的宏
+ForEachMacros: [foreach, Q_FOREACH, BOOST_FOREACH]
+# 对#include进行排序，匹配了某正则表达式的#include拥有对应的优先级，匹配不到的则默认优先级为INT_MAX(优先级越小排序越靠前)，
+# 可以定义负数优先级从而保证某些#include永远在最前面
+IncludeCategories:
+  - Regex: '^"(llvm|llvm-c|clang|clang-c)/'
+    Priority: 2
+  - Regex: '^(<|"(gtest|isl|json)/)'
+    Priority: 3
+  - Regex: ".*"
+    Priority: 1
+# 缩进case标签
+IndentCaseLabels: true
+# 缩进宽度
+IndentWidth: 4
+# 函数返回类型换行时，缩进函数声明或函数定义的函数名
+IndentWrappedFunctionNames: true
+# 保留在块开始处的空行
+KeepEmptyLinesAtTheStartOfBlocks: true
+# 开始一个块的宏的正则表达式
+MacroBlockBegin: ""
+# 结束一个块的宏的正则表达式
+MacroBlockEnd: ""
+# 连续空行的最大数量
+MaxEmptyLinesToKeep: 1
+# 命名空间的缩进: None, Inner(缩进嵌套的命名空间中的内容), All
+NamespaceIndentation: None
+# 使用ObjC块时缩进宽度
+ObjCBlockIndentWidth: 4
+# 在ObjC的@property后添加一个空格
+ObjCSpaceAfterProperty: false
+# 在ObjC的protocol列表前添加一个空格
+ObjCSpaceBeforeProtocolList: true
+# 在call(后对函数调用换行的penalty
+PenaltyBreakBeforeFirstCallParameter: 19
+# 在一个注释中引入换行的penalty
+PenaltyBreakComment: 300
+# 第一次在<<前换行的penalty
+PenaltyBreakFirstLessLess: 120
+# 在一个字符串字面量中引入换行的penalty
+PenaltyBreakString: 1000
+# 对于每个在行字符数限制之外的字符的penalt
+PenaltyExcessCharacter: 1000000
+# 将函数的返回类型放到它自己的行的penalty
+PenaltyReturnTypeOnItsOwnLine: 60
+# 指针和引用的对齐: Left, Right, Middle
+PointerAlignment: Right
+# 允许重新排版注释
+ReflowComments: true
+# 允许排序#include
+SortIncludes: true
+# 在C风格类型转换后添加空格
+SpaceAfterCStyleCast: false
+# 在赋值运算符之前添加空格
+SpaceBeforeAssignmentOperators: true
+# 开圆括号之前添加一个空格: Never, ControlStatements, Always
+SpaceBeforeParens: ControlStatements
+# 在空的圆括号中添加空格
+SpaceInEmptyParentheses: false
+# 在尾随的评论前添加的空格数(只适用于//)
+SpacesBeforeTrailingComments: 1
+# 在尖括号的<后和>前添加空格
+SpacesInAngles: false
+# 在容器(ObjC和JavaScript的数组和字典等)字面量中添加空格
+SpacesInContainerLiterals: true
+# 在C风格类型转换的括号中添加空格
+SpacesInCStyleCastParentheses: false
+# 在圆括号的(后和)前添加空格
+SpacesInParentheses: false
+# 在方括号的[后和]前添加空格，lamda表达式和未指明大小的数组的声明不受影响
+SpacesInSquareBrackets: false
+# 标准: Cpp03, Cpp11, Auto
+Standard: Cpp11
+# tab宽度
+TabWidth: 4
+# 使用tab字符: Never, ForIndentation, ForContinuationAndIndentation, Always
+UseTab: Never
@@ -0,0 +1,13 @@
+### 该问题是怎么引起的？
+
+
+
+### 重现步骤
+
+
+
+### 报错信息
+
+
+
+
@@ -0,0 +1,15 @@
+### 相关的Issue
+
+
+### 原因（目的、解决的问题等）
+
+
+### 描述（做了什么，变更了什么）
+
+
+### 测试用例（新增、改动、可能影响的功能）
+
+
+
+
+
@@ -0,0 +1,8 @@
+x64/
+x32
+*.vcxproj.user
+.vscode
+
+target/
+node_modules/
+moduletest/
@@ -0,0 +1,229 @@
+#Copyright (c) 2020 Huawei Device Co., Ltd.
+#Licensed under the Apache License, Version 2.0 (the "License");
+#you may not use this file except in compliance with the License.
+#You may obtain a copy of the License at
+#
+#    http://www.apache.org/licenses/LICENSE-2.0
+#
+#Unless required by applicable law or agreed to in writing, software
+#distributed under the License is distributed on an "AS IS" BASIS,
+#WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+#See the License for the specific language governing permissions and
+#limitations under the License.
+
+import("//build/lite/config/component/lite_component.gni")
+import("//build/lite/config/subsystem/aafwk/config.gni")
+
+declare_args() {
+  LOSCFG_TEST_JS_BUILD = false
+}
+
+lite_component("jsfwk") {
+  features = [ ":ace_lite" ]
+}
+
+config("ace_lite_config") {
+  include_dirs = [
+    "//foundation/graphic/lite/interfaces/innerkits/ui",
+    "//foundation/graphic/lite/interfaces/innerkits/ui/dock",
+    "//foundation/graphic/lite/interfaces/innerkits/ui/common",
+    "//foundation/graphic/lite/interfaces/kits",
+    "//foundation/graphic/lite/interfaces/kits/config",
+    "//foundation/graphic/lite/interfaces/kits/surface",
+    "//foundation/graphic/lite/interfaces/kits/ui",
+    "//foundation/graphic/lite/interfaces/kits/ui/animator",
+    "//foundation/graphic/lite/interfaces/kits/ui/common",
+    "//foundation/graphic/lite/interfaces/kits/ui/components",
+    "//foundation/graphic/lite/interfaces/kits/ui/dfx",
+    "//foundation/graphic/lite/interfaces/kits/ui/events",
+    "//foundation/graphic/lite/interfaces/kits/ui/font",
+    "//foundation/graphic/lite/interfaces/kits/ui/layout",
+    "//foundation/graphic/lite/interfaces/kits/ui/themes",
+    "//foundation/graphic/lite/interfaces/kits/utils",
+    "//utils/native/lite/include",
+    "//foundation/aafwk/interfaces/kits/ability_lite",
+    "//foundation/aafwk/interfaces/kits/want_lite",
+    "//foundation/aafwk/interfaces/innerkits/abilitymgr_lite",
+    "//foundation/appexecfwk/interfaces/kits/bundle_lite",
+    "//foundation/appexecfwk/utils/bundle_lite",
+    "//foundation/ace/lite/tools/simulator/config",
+  ]
+
+  include_dirs += ["//third_party/bounds_checking_function/include",
+    "//foundation/ace/interfaces/innerkits/builtin/async",
+    "//foundation/ace/interfaces/innerkits/builtin/base",
+    "//foundation/ace/interfaces/innerkits/builtin/jsi",
+    "include/context",
+    "include/base",
+    "include/modules",
+    "include/resource",
+    "src/core",
+    "src/core/animation",
+    "src/core/base",
+    "src/core/components",
+    "src/core/context",
+    "src/core/directive",
+    "src/core/router",
+    "src/core/jsi",
+    "src/core/modules",
+    "src/core/router",
+    "src/core/stylemgr",
+    "src/core/wrapper",
+    "targets",
+    "//kernel/liteos_a/kernel/include/",
+    "//kernel/liteos_a/kernel/common",
+    "//third_party/jerryscript/jerry-core/include",
+    "//third_party/jerryscript/jerry-ext/include/jerryscript-ext",
+    "///third_party/jerryscript/jerry-port/default/include",
+    "//third_party/cJSON",
+    "//utils/native/lite/timer_task/include/",
+    "//third_party/freetype/include",
+  ]
+  if (ohos_kernel_type == "liteos_a" || ohos_kernel_type == "liteos_m" ||
+      ohos_kernel_type == "liteos_riscv") {
+    include_dirs += [ "targets/liteos_a" ]
+  } else if (ohos_kernel_type == "linux") {
+    include_dirs += [
+        "targets/linux",
+    ]
+  }
+
+  ldflags = ["-lstdc++"]
+  ldflags += ["-lpthread"]
+  ldflags += ["-Wl,-rpath-link=$ohos_root_path/$root_out_dir"]
+}
+
+shared_library("ace_lite") {
+  configs -= [ "//build/lite/config:language_cpp" ]
+  cflags = [
+    "-Wall",
+    "-Wno-format",
+    "-Wno-format-extra-args",
+  ]
+  cflags_cc = [ "-std=c++14" ]
+  cflags_cc += cflags
+  configs += [":ace_lite_config"]
+
+  sources = [
+    "src/core/animation/transition_impl.cpp",
+    "src/core/async/js_async_work.cpp",
+    "src/core/async/message_queue_utils.cpp",
+    "src/core/base/ace_log.cpp",
+    "src/core/base/ace_mem_base.cpp",
+    "src/core/base/js_fwk_common.cpp",
+    "src/core/base/key_parser.cpp",
+    "src/core/base/time_util.cpp",
+    "src/core/base/js_debugger_config.cpp",
+    "src/core/base/memory_heap.cpp",
+    "src/core/components/video_view.cpp",
+    "src/core/components/analog_clock_component.cpp",
+    "src/core/components/camera_component.cpp",
+    "src/core/components/canvas_component.cpp",
+    "src/core/components/chart_component.cpp",
+    "src/core/components/clock_hand_component.cpp",
+    "src/core/components/component.cpp",
+    "src/core/components/component_utils.cpp",
+    "src/core/components/div_component.cpp",
+    "src/core/components/event_listener.cpp",
+    "src/core/components/image_animator_component.cpp",
+    "src/core/components/image_component.cpp",
+    "src/core/components/input_component.cpp",
+    "src/core/components/list_adapter.cpp",
+    "src/core/components/list_component.cpp",
+    "src/core/components/marquee_component.cpp",
+    "src/core/components/panel_view.cpp",
+    "src/core/components/picker_view_component.cpp",
+    "src/core/components/progress_component.cpp",
+    "src/core/components/scroll_layer.cpp",
+    "src/core/components/slider_component.cpp",
+    "src/core/components/swiper_component.cpp",
+    "src/core/components/switch_component.cpp",
+    "src/core/components/tab_bar_component.cpp",
+    "src/core/components/tab_content_component.cpp",
+    "src/core/components/tabs_component.cpp",
+    "src/core/components/text_component.cpp",
+    "src/core/components/video_component.cpp",
+    "src/core/context/ace_ability.cpp",
+    "src/core/context/ace_event_error_code.cpp",
+    "src/core/context/fatal_handler.cpp",
+    "src/core/context/js_ability.cpp",
+    "src/core/context/js_ability_impl.cpp",
+    "src/core/context/js_app_context.cpp",
+    "src/core/context/js_app_environment.cpp",
+    "src/core/context/js_framework_raw.cpp",
+    "src/core/context/js_profiler.cpp",
+    "src/core/context/js_timer_list.cpp",
+    "src/core/directive/descriptor_utils.cpp",
+    "src/core/directive/directive_watcher_callback.cpp",
+    "src/core/jsi/jsi.cpp",
+    #"src/core/modules/presets/jstest_module.cpp",
+    "src/core/modules/presets/timer_module.cpp",
+    "src/core/modules/app_module.cpp",
+    "src/core/modules/module_manager.cpp",
+    "src/core/modules/presets/cjson_parser.cpp",
+    "src/core/modules/presets/console_log_impl.cpp",
+    "src/core/modules/presets/console_module.cpp",
+    "src/core/modules/presets/localization_module.cpp",
+    #"src/core/modules/presets/feature_ability_module.cpp",
+    "src/core/modules/presets/preset_module.cpp",
+    "src/core/modules/presets/profiler_module.cpp",
+    "src/core/modules/presets/render_module.cpp",
+    "src/core/modules/presets/require_module.cpp",
+    "src/core/modules/presets/version_module.cpp",
+    "src/core/modules/router_module.cpp",
+    "src/core/modules/dfx_module.cpp",
+    "src/core/modules/sample_module.cpp",
+    "src/core/resource/video_play_image_res.cpp",
+    "src/core/resource/video_muted_image_res.cpp",
+    "src/core/router/js_page_state.cpp",
+    "src/core/router/js_page_state_machine.cpp",
+    "src/core/router/js_router.cpp",
+    "src/core/stylemgr/app_style.cpp",
+    "src/core/stylemgr/app_style_item.cpp",
+    "src/core/stylemgr/app_style_list.cpp",
+    "src/core/stylemgr/app_style_manager.cpp",
+    "src/core/stylemgr/app_style_sheet.cpp",
+    "src/core/wrapper/js.cpp",
+    "targets/platform_adapter.cpp",
+  ]
+
+  public_deps = [
+    "//third_party/cJSON:cjson_shared",
+    "//third_party/bounds_checking_function:libsec_shared",
+    "//third_party/jerryscript/jerry-core:jerry-core_shared",
+    "//third_party/jerryscript/jerry-ext:jerry-ext_shared",
+    "//third_party/jerryscript/jerry-libm:jerry-libm_shared",
+    "//third_party/jerryscript/jerry-port/default:jerry-port-default_shared",
+    "//base/security/frameworks/crypto_lite/js/builtin:ace_kit_cipher",
+    "//utils/native/lite/js/builtin:ace_utils_kits",
+    "//utils/native/lite/timer_task:ace_kit_timer",
+    "//foundation/multimedia/frameworks/camera_lite:camera",
+    "//foundation/multimedia/frameworks/player_lite:player",
+    "//foundation/multimedia/interfaces/kits/player_lite/js/builtin:audio_api",
+    "//foundation/graphic/lite/frameworks/surface:surface",
+  ]
+
+  defines = []
+
+  if (ohos_build_type == "debug") {
+    defines += [
+      "JS_PROFILER=1"
+    ]
+  } else {
+    defines += [
+      "JS_PROFILER=0"
+    ]
+  }
+
+  if (LOSCFG_TEST_JS_BUILD) {
+    defines += [
+      "JSFWK_TEST"
+    ]
+  }
+
+  if (enable_ohos_appexecfwk_feature_ability == true) {
+      defines += [
+          "ABILITY_WINDOW_SUPPORT"
+      ]
+  }
+}
@@ -0,0 +1,144 @@
+# Copyright (c) 2020 Huawei Device Co., Ltd.
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+cmake_minimum_required(VERSION 3.16.5)
+
+project(jsfwk LANGUAGES CXX)
+
+set(CMAKE_CXX_STANDARD 11)
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+set(CMAKE_INCLUDE_CURRENT_DIR ON)
+
+# compile options
+add_compile_options(-fpermissive -Wno-narrowing)
+
+set(ACE_LITE_CONFIG_PATH "${CMAKE_CURRENT_SOURCE_DIR}/targets/simulator/win")
+set(ACE_LITE_INNERKITS_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../../interfaces/innerkits/builtin")
+set(JSFWK_INCLUDE_PATH "${CMAKE_CURRENT_SOURCE_DIR}/include")
+set(JSFWK_INNERKITS_BUILTIN_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../../../foundation/ace/interfaces/innerkits/builtin")
+set(JSFWK_SOURCE_PATH "${CMAKE_CURRENT_SOURCE_DIR}/src/core")
+set(UIKIT_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../../../foundation/graphic/lite")
+set(THIRTY_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../../../third_party")
+set(JSFWK_SIMULATOR_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../../../tools/developer_tools_lite/graphic_tool/simulator")
+set(JS_API_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../../api/emui_band/MoltenCore/application/framework/ace/api")
+set(AAFWK_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../../../aafwk")
+
+# add definitions
+# temporarily set, when ui and graphic unifid, this can be removed
+add_definitions(-DSCREENRESOLUTION_CMAKE)
+
+# setup jerryscript
+include(${CMAKE_ROOT}/Modules/ExternalProject.cmake)
+ExternalProject_Add(jerryscript
+    SOURCE_DIR ${THIRTY_PATH}/jerryscript
+    BINARY_DIR ${CMAKE_CURRENT_BINARY_DIR}/jerryscript
+    CMAKE_ARGS -DJERRY_EXTERNAL_CONTEXT=${JERRY_EXTERNAL_CONTEXT}
+               -DJERRY_DEBUGGER=${JERRY_DEBUGGER}
+               -DJERRY_CMDLINE=OFF
+               -DCMAKE_BUILD_TYPE=${CMAKE_BUILD_TYPE}
+               -DTOOLCHAIN_PATH=${TOOLCHAIN_PATH}
+               -DCMAKE_TOOLCHAIN_FILE=${CMAKE_TOOLCHAIN_FILE}
+    BUILD_COMMAND $(MAKE) VERBOSE=1 -j 8
+    INSTALL_COMMAND ""
+    BUILD_ALWAYS 1
+)
+
+# header files
+include_directories(
+    ${ACE_LITE_CONFIG_PATH}
+    ${ACE_LITE_INNERKITS_PATH}/async
+    ${ACE_LITE_INNERKITS_PATH}/base
+    ${ACE_LITE_INNERKITS_PATH}/jsi
+    ${JSFWK_INCLUDE_PATH}/async
+    ${JSFWK_INCLUDE_PATH}/base
+    ${JSFWK_INCLUDE_PATH}/context
+    ${JSFWK_INCLUDE_PATH}/jsi
+    ${JSFWK_SOURCE_PATH}
+    ${JSFWK_SOURCE_PATH}/animation
+    ${JSFWK_SOURCE_PATH}/base
+    ${JSFWK_SOURCE_PATH}/components
+    ${JSFWK_SOURCE_PATH}/context
+    ${JSFWK_SOURCE_PATH}/directive
+    ${JSFWK_SOURCE_PATH}/jsi
+    ${JSFWK_SOURCE_PATH}/modules
+    ${JSFWK_SOURCE_PATH}/modules/presets
+    ${JSFWK_SOURCE_PATH}/router
+    ${JSFWK_SOURCE_PATH}/stylemgr
+    ${JSFWK_SOURCE_PATH}/wrapper
+    ${CMAKE_CURRENT_SOURCE_DIR}/targets
+    ${CMAKE_CURRENT_SOURCE_DIR}/test/mock
+    ${CMAKE_CURRENT_SOURCE_DIR}/test/unittest
+    ${THIRTY_PATH}/cJSON
+    ${THIRTY_PATH}/jerryscript/jerry-core/include
+    ${THIRTY_PATH}/jerryscript/jerry-ext/include/jerryscript-ext
+    ${THIRTY_PATH}/jerryscript/jerry-port/default/include
+    ${THIRTY_PATH}/freetype/include
+    ${JSFWK_SIMULATOR_PATH}/config
+    ${JS_API_PATH}/timer
+    ${AAFWK_PATH}/frameworks/abilitymgr_lite/include)
+
+# source files
+aux_source_directory(${JSFWK_SOURCE_PATH}/animation ANIMATION)
+aux_source_directory(${JSFWK_SOURCE_PATH}/base BASE)
+aux_source_directory(${JSFWK_SOURCE_PATH}/components COMPONENTS)
+aux_source_directory(${JSFWK_SOURCE_PATH}/context CONTEXT)
+aux_source_directory(${JSFWK_SOURCE_PATH}/directive DIRECTIVE)
+aux_source_directory(${JSFWK_SOURCE_PATH}/jsi JSI)
+aux_source_directory(${JSFWK_SOURCE_PATH}/modules MODULES)
+aux_source_directory(${JSFWK_SOURCE_PATH}/modules/presets MODULES_PRESETS)
+aux_source_directory(${JSFWK_SOURCE_PATH}/router ROUTER)
+aux_source_directory(${JSFWK_SOURCE_PATH}/stylemgr STYLEMGR)
+aux_source_directory(${JSFWK_SOURCE_PATH}/wrapper WRAPPER)
+aux_source_directory(${CMAKE_CURRENT_SOURCE_DIR}/targets TARGETS)
+aux_source_directory(${CMAKE_CURRENT_SOURCE_DIR}/test TEST)
+aux_source_directory(${CMAKE_CURRENT_SOURCE_DIR}/test/unittest UNITTEST)
+
+list(REMOVE_ITEM CONTEXT "${JSFWK_SOURCE_PATH}/context/ace_ability.cpp")
+list(REMOVE_ITEM MODULES_PRESETS "${JSFWK_SOURCE_PATH}/modules/presets/jstest_module.cpp")
+list(REMOVE_ITEM UNITTEST
+    "${CMAKE_CURRENT_SOURCE_DIR}/test/unittest/tabs_tdd_test.cpp"
+    "${CMAKE_CURRENT_SOURCE_DIR}/test/unittest/js_async_work_tdd_test.cpp"
+    "${CMAKE_CURRENT_SOURCE_DIR}/test/unittest/message_queue_utils_tdd_test.cpp")
+
+add_library(jsfwk STATIC
+    ${ANIMATION}
+    ${BASE}
+    ${COMPONENTS}
+    ${CONTEXT}
+    ${DIRECTIVE}
+    ${JSI}
+    ${MODULES}
+    ${MODULES_PRESETS}
+    ${ROUTER}
+    ${STYLEMGR}
+    ${WRAPPER}
+    ${TEST}
+    ${TARGETS}
+    )
+target_include_directories(jsfwk PUBLIC
+    ${JSFWK_INNERKITS_BUILTIN_PATH}
+    ${JSFWK_INNERKITS_BUILTIN_PATH}/async
+    ${JSFWK_INNERKITS_BUILTIN_PATH}/base
+    ${JSFWK_INNERKITS_BUILTIN_PATH}/jsi
+    ${JSFWK_INCLUDE_PATH}
+    ${JSFWK_INCLUDE_PATH}/base
+    ${JSFWK_INCLUDE_PATH}/context
+    ${ACE_LITE_CONFIG_PATH}
+    ${AAFWK_PATH}/frameworks/abilitymgr_lite/include)
+add_dependencies(jsfwk jerryscript)
+target_link_directories(jsfwk PUBLIC ${CMAKE_CURRENT_BINARY_DIR}/jerryscript/lib)
+target_link_libraries(jsfwk global_resmgr ui -Wl,--whole-archive jerry-port-default jerry-ext jerry-core -Wl,--no-whole-archive)
+
+if (${JERRY_EXTERNAL_CONTEXT} STREQUAL ON)
+    target_compile_definitions(jsfwk PUBLIC -DJS_ENGINE_EXTERNAL_CONTEXT)
+endif()
@@ -0,0 +1,177 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
@@ -0,0 +1,48 @@
+{
+    "app": {
+        "bundleName": "com.huawei.airquality",
+        "vendor": "huawei",
+        "version": {
+            "code": 1,
+            "name": "1.0"
+        },
+        "apiVersion": {
+            "compatible": 3,
+            "target": 3
+        }
+    },
+    "deviceConfig": {
+        "default": {
+        }
+    },
+    "module": {
+        "deviceType": [
+            "liteWearable",
+            "smartVision"
+        ],
+        "distro": {
+            "deliveryWithInstall": true,
+            "moduleName": "entry",
+            "moduleType": "entry"
+        },
+        "abilities": [
+            {
+                "name": "default",
+                "icon": "$media:icon",
+                "label": "airquality",
+                "type": "page",
+                "visible": true
+            }
+        ],
+        "js": [
+            {
+                "name": "default",
+                "pages": [
+                    "pages/index/index",
+                    "pages/detail/detail",
+                    "pages/history/history"
+                ]
+            }
+        ]
+    }
+}
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export default {
+  onCreate() {
+    console.info('AceApplication onCreate');
+  },
+  onDestroy() {
+    console.info('AceApplication onDestroy');
+  }
+}
@@ -0,0 +1,22 @@
+{
+    "HangZhou":"HangZhou",
+    "ShangHai":"ShangHai",
+    "Good":"Good",
+    "Unhealth":"Unhealth",
+    "Normal":"Normal",
+    "airQuality":"Air Quality",
+    "History":"History",
+    "Close":"Close",
+    "updated":"Updated",
+    "dataSourceName":"From",
+    "sampledOn":"Sampled on",
+    "monitoringStation":"Monitoring Station",
+    "historicalData":"Historical Data",
+    "Monday":"Mo",
+    "Tuesday":"Tu",
+    "Wednesday":"We",
+    "Thursday":"Th",
+    "Friday":"Fr",
+    "Saturday":"Sa",
+    "Sunday":"Su"
+}
@@ -0,0 +1,21 @@
+{
+    "HangZhou":"杭州",
+    "ShangHai":"上海",
+    "Good":"良好",
+    "Unhealth":"差",
+    "Normal":"一般",
+    "airQuality":"空气质量监测",
+    "History":"历史",
+    "Close":"关闭",
+    "updated":"更新于",
+    "dataSourceName":"数据源",
+    "sampledOn":"采样时间",
+    "historicalData":"历史数据",
+    "Monday":"周一",
+    "Tuesday":"周二",
+    "Wednesday":"周三",
+    "Thursday":"周四",
+    "Friday":"周五",
+    "Saturday":"周六",
+    "Sunday":"周日"
+}
@@ -0,0 +1,40 @@
+/*
+* Copyright (c) 2020 Huawei Device Co., Ltd.
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+.line-div{
+    background-color:#f5fffa;
+    height:2px;
+    width:454px;
+}
+.info-div-width-height{
+    width:321px;
+    height:35px;
+    margin-top: 20px;
+}
+.gas-name{
+    color:#f5fffa;
+    width:160px;
+    height:35px;
+}
+.gas-value{
+    text-align:right;
+    color:#00fa9a;
+    width:160px;
+    height:35px;
+}
+.config-info {
+    height:40px;
+    width:321px;
+    color:#f5fffa;
+}
@@ -0,0 +1,55 @@
+<!--
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ -->
+<list style="top:67;left:67;width:321px;height:350px;">
+    <list-item style="width:321px;height:300px;">
+        <div style="width: 321px;height:300px;background-color:#000000;flex-direction:column;align-items:flex-start;">
+            <text style="width:321px;height:40px; color:#dcdcdc;">{{location}}</text>
+            <div class="line-div"></div>
+            <div class="info-div-width-height" style="margin-top:10px;">
+                <text class="gas-name">CO</text>
+                <text class="gas-value">{{airData[0]}}</text>
+            </div>
+             <div class="info-div-width-height" style="margin-top:10px;">
+                <text class="gas-name">NO2</text>
+                <text class="gas-value">{{airData[1]}}</text>
+            </div>
+             <div class="info-div-width-height" style="margin-top:10px;">
+                <text class="gas-name">PM10</text>
+                <text class="gas-value">{{airData[2]}}</text>
+             </div>
+             <div class="info-div-width-height" style="margin-top:10px;">
+                <text class="gas-name">PM2.5</text>
+                <text class="gas-value">{{airData[3]}}</text>
+            </div>
+             <div class="info-div-width-height" style="margin-top:10px;">
+                <text class="gas-name">SO2</text>
+                <text class="gas-value">{{airData[4]}}</text>
+            </div>
+        </div>
+    </list-item>
+    <list-item style="width:321px;height:220px;">
+        <div style="width:321px;height:220px;background-color:#000000;flex-direction:column;align-items:flex-start;">
+            <text class="config-info">{{updated}}:{{udpateStatus}}</text>
+            <text class="config-info">{{dataSourceName}}:{{dataSource}}</text>
+            <div class="line-div"></div>
+            <div style="width:321px; height:55px;align-items:center; margin-top:20px;">
+                <input type="button" value="History" style="border-width: 3px;margin-left:10px; border-color: #90ee90;width:146px;height:50;" onclick="openHistroy" />
+                <input type="button" value="Close" style="border-width: 3px;margin-left:5px; border-color:#ff0000;width:146px;height:50;"  onclick="backMain" />
+            </div>
+        </div>
+    </list-item>
+</list>
@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import router from '@system.router'
+
+export default {
+    data:{
+        location:"HangZhou",
+        udpateStatus:"15:13",
+        dataSource:"tianqi.com",
+        updated:'Updated',
+        dataSourceName:'Data Source',
+        selectedIndex:0,
+        airData:['100', '90', '120', '50', '150', '40', '25']
+    },
+    onInit(){
+        this.location = this.$t(this.location);
+        this.updated = this.$t("updated");
+        this.dataSourceName = this.$t("dataSourceName");
+        this.sampledOn = this.$t("sampledOn");
+        this.monitoringStation = this.$t("monitoringStation");
+        this.selectedIndex = this.selectedCityIndex;
+    },
+    openHistroy(){
+        router.replace({
+            uri:'pages/history/history'
+        });
+    },
+    backMain(){
+        router.replace({
+            uri:'pages/index/index',
+            params:{selectedCityIndex:this.selectedIndex}
+        });
+    }
+}
@@ -0,0 +1,34 @@
+/*
+* Copyright (c) 2020 Huawei Device Co., Ltd.
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+.div-info-location{
+    color:#dcdcdc;
+    width:321px;
+    height:40px;
+}
+.div-info-historical-data{
+    color:#f5fffa;
+    width:321px;
+    height:40px;
+}
+.gas-name{
+    color:#f0ffff;
+    text-align:right;
+    width:321px;
+    height:35px;
+}
+.info-list-item{
+    width:321px;
+    height:80px;
+}
@@ -0,0 +1,42 @@
+<!--
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ -->
+<list style="width:321px;height:321px;top:67;left:67;">
+    <list-item class="info-list-item">
+        <div style="width:321px;height:80px;flex-direction:column;align-items:flex-start;">
+            <text class="div-info-historical-data">{{historicalData}}</text>
+        </div>
+    </list-item>
+    <list-item style="width:321px;height:160px;" for="{{datasets}}">
+        <div style="width:321px;height:160px;flex-direction:column;">
+            <div style="width:321px;height:2px;background-color:#f5fffa;"></div>
+            <text class="gas-name">{{$item}}</text>
+            <div style="width:321px;height:100px;margin-top:4px;justify-content:flex-start;align-items:flex-end;">
+                <div style="width:21px;margin-left:21px;height:10px;backgroundColor:#00ff00;"></div>
+                <div style="width:21px;margin-left:21px;height:20px;;backgroundColor:#00ff00;"></div>
+                <div style="width:21px;margin-left:21px;height:90px;backgroundColor:#ff0000;"></div>
+                <div style="width:21px;margin-left:21px;height:80px;backgroundColor:#ff0000;"></div>
+                <div style="width:21px;margin-left:21px;height:60px;backgroundColor:#999999;"></div>
+                <div style="width:21px;margin-left:21px;height:50px;backgroundColor:#999999;"></div>
+                <div style="width:21px;margin-left:21px;height:100px;backgroundColor:#ff0000;"></div>
+            </div>
+            <image style="width:321px;height:20px;" src="common/week.png"></image>
+        </div>
+    </list-item>
+    <list-item class="info-list-item">
+        <input type="button" value="Back" style="border-width:2px;border-color:#90ee90;width:256px;height:60px;margin-left: 30px;margin-top: 10px;" onclick="backDetail" /> 
+    </list-item>
+</list>
@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import router from '@system.router'
+
+export default {
+    data: {
+        historicalData:"historicalData",
+        datasets:["CO","PM2.5","NO2","NO","PM10","SO2"]
+    },
+    onInit(){
+        this.historicalData = this.$t(this.historicalData);
+    },
+    backDetail(){
+        router.replace({
+            uri:'pages/detail/detail'
+        });
+    }
+}
@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.pm25-value{
+  text-align:center;
+  font-size:38px;
+  color:#f0ffff;
+  width:454px;
+  height:50px;
+  top:275px;
+}
+.pm25-name{
+  text-align:center;
+  color:#a2c4a2;
+  width:454px;
+  height:50px;
+  top:335px;
+}
+.location-text{
+  text-align:center;
+  color:#f0ffff;
+  width:454px;
+  height:50px;
+  top:20px;
+}
+.container{
+  height: 454px;
+  width: 454px;;
+}
+.circleProgress{
+  centerX:227px;
+  centerY:250px;
+  radius:180px;
+  startAngle:198;
+  totalAngle:320;
+  strokeWidth:45px;
+  width:454px;
+  height:454px;
+}
+.image{
+  top:390px;
+  left:217px;
+  width:32px;
+  height:32px;
+}
+.airquality{
+  top:220px;
+  text-align: center;
+  width:454px;
+  height:40px;
+}
@@ -0,0 +1,34 @@
+<!--
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ -->
+<swiper class="container" index="{{swiperPage}}" duration="500" onchange="swiperChange">
+    <stack class="container">
+        <text class="airquality" style="color:{{textColor1}};">{{airData[0].airQuality}}</text>
+        <text class="location-text">{{airData[0].location}}</text>
+        <progress class="circleProgress" style="color:{{textColor1}};background-Color:{{bgColor1}};" type="arc" onclick="openDetail" percent="{{percent1}}" ></progress>
+        <image class="image" src="{{src1}}"></image>
+        <text class="pm25-value">{{airData[0].detailData}}</text>
+        <text class="pm25-name">AQI</text>
+    </stack>
+    <stack class="container">
+        <text class="airquality" style="color:{{textColor2}};">{{airData[1].airQuality}}</text>
+        <text class="location-text">{{airData[1].location}}</text>
+        <progress class="circleProgress" style="color: {{textColor2}};background-Color:{{bgColor2}};" type="arc" onclick="openDetail" percent="{{percent2}}" ></progress>
+        <image class="image" src="{{src2}}"></image>
+        <text class="pm25-value">{{airData[1].detailData}}</text>
+        <text class="pm25-name">AQI</text>
+    </stack>
+</swiper>
@@ -0,0 +1,100 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import router from '@system.router'
+
+export default {
+    data: {
+      textColor1:'#00ff00',
+      textColor2:'#00ff00',
+      bgColor1:'#669966',
+      bgColor2:'#669966',
+      swiperPage:0,
+      percent1:0,
+      percent2:0,
+      src1:'common/cloud_green.png',
+      src2:'common/cloud_green.png',
+      airData: [{
+        location: 'HangZhou',
+        airQuality: 'Good',
+        detailData: 10
+      }, {
+        location: 'ShangHai',
+        airQuality: 'Unhealth',
+        detailData:90
+      }]
+    },
+    onInit () {
+      this.airData[0].location = this.$t(this.airData[0].location);
+      this.airData[1].location = this.$t(this.airData[1].location);
+      this.airData[0].airQuality = this.$t(this.airData[0].airQuality);
+      this.airData[1].airQuality = this.$t(this.airData[1].airQuality);
+      if(this.airData[0].detailData > 100){
+        this.src1 = "common/cloud_red.png";
+        this.textColor1 = '#ff0000';
+        this.bgColor1 = '#9d7462';
+      } else if(50 < this.airData[0].detailData &&  this.airData[0].detailData <= 100){
+        this.src1 = "common/cloud_yellow.png";
+        this.textColor1 = '#ecf19a';
+        this.bgColor1 = '#9d9d62';
+      }
+      if(this.airData[1].detailData > 100){
+        this.src2 = "common/cloud_red.png";
+        this.textColor2 = '#ff0000';
+        this.bgColor2 = '#9d7462';
+      } else if(50 < this.airData[1].detailData &&  this.airData[1].detailData <= 100){
+        this.src2 = "common/cloud_yellow.png";
+        this.textColor2 = '#ecf19a';
+        this.bgColor2 =  '#9d9d62';
+      }
+      if(this.selectedCityIndex){
+        this.swiperPage = this.selectedCityIndex;
+      }
+    },
+    onShow () {
+      var self = this;
+      var time = 1000/(self.airData[self.swiperPage].detailData);
+      if(time == 0){
+        time = 100;
+      }
+      var interval = setInterval(function () {
+        if ((self.swiperPage==0?self.percent1:self.percent2) >= self.airData[self.swiperPage].detailData) {
+          clearInterval(interval);
+          return;
+        }
+        (self.swiperPage==0?self.percent1++:self.percent2++);
+      }, time)
+    },
+    openDetail () {
+      router.replace({
+        uri:'pages/detail/detail',
+        params:{selectedCityIndex:this.swiperPage}
+      });
+    },
+    swiperChange (e) {
+      this.swiperPage = e.index;
+      var self = this;
+      var time = 1000/(self.airData[self.swiperPage].detailData);
+      if(time == 0){
+        time = 100;
+      }
+      var interval = setInterval(function () {
+        if ((self.swiperPage==0?self.percent1:self.percent2) >= self.airData[self.swiperPage].detailData) {
+          clearInterval(interval);
+          return;
+        }
+        (self.swiperPage==0?self.percent1++:self.percent2++);
+      }, time)
+    }
+}
@@ -0,0 +1,50 @@
+{
+    "app": {
+        "bundleName": "com.huawei.alarm",
+        "vendor": "huawei",
+        "version": {
+            "code": 1,
+            "name": "1.0"
+        },
+        "apiVersion": {
+            "compatible": 3,
+            "target": 3
+        }
+    },
+    "deviceConfig": {
+        "default": {
+        }
+    },
+    "module": {
+        "deviceType": [
+            "liteWearable",
+            "smartVision"
+        ],
+        "distro": {
+            "deliveryWithInstall": true,
+            "moduleName": "entry",
+            "moduleType": "entry"
+        },
+        "abilities": [
+            {
+                "name": "default",
+                "icon": "$media:icon",
+                "label": "alarm",
+                "type": "page",
+                "visible": true
+            }
+        ],
+        "js": [
+            {
+                "name": "default",
+                "pages": [
+                    "pages/index/index",
+                    "pages/editAlarm/edit_alarm",
+                    "pages/timeArrive/time_arrive",
+                    "pages/timeSelector/time_picker_page",
+                    "pages/weekSelector/week_select_page"
+                ]
+            }
+        ]
+    }
+}
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export default {
+    onCreate() {
+        console.info('AceApplication onCreate');
+    },
+    onDestroy() {
+        console.info('AceApplication onDestroy');
+    }
+}
@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    width: 454px;
+    height: 454px;
+    border-radius:227px;
+    border-color:#8b0000;
+    border-width: 1px;
+    flex-direction: column;
+    align-items: flex-end;
+}
+
+.itemWidth {
+    width: 420px;
+}
+
+.itemDiv {
+    width: 324px;
+    height: 150px;
+    justify-content:flex-end;
+}
+
+.itemLeft {
+    width: 314px;
+    height: 130px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.textLarger {
+    width: 272px;
+    height: 50px;
+    font-size: 38px;
+    text-align: center;
+}
+
+.textStandard {
+    width: 105px;
+    height: 30px;
+    font-size: 30px;
+    color:#a9a9a9;
+    text-align: center;
+}
+
+.textLargeDiv {
+    width:120px;
+    height:70px;
+    align-items:flex-end;
+}
+
+.textMiniDiv {
+    width:70px;
+    height:60px;
+    align-items:flex-start;
+}
@@ -0,0 +1,76 @@
+<!--
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ -->
+<div class="container" style="left:0px; top:0px; border-radius:227px; border-color:#8b0000; border-width: 1px">
+        <list style="left:0px; top:0px; height: 454px;" class="itemWidth">
+            <list-item type="listItem" style="width: 314px; height:150px;">
+                <div style="justify-content:center; align-items:center;width:390px" class="itemDiv">
+                    <text class="textLarger" style="width:210px">Edit alarm</text>
+                </div>
+            </list-item>
+            <list-item type="listItem" style="width: 419px; height: 150px;">
+                <div style="width: 35px; height:150px;"></div>
+                <div class="itemDiv">
+                    <div class="itemLeft" onclick="switchToTimePicker">
+                        <div class="textLargeDiv" style="width: 120px">
+                            <text class="textLarger" style="width:120px;">{{dataWrapper.time}}</text>
+                        </div>
+                        <div class="textMiniDiv" style="width:85px;">
+                            <text class="textStandard" style="width:85px">Time</text>
+                        </div>
+                    </div>
+                </div>
+                <image src="common/jiantou.png" style="width: 70px; height:150px;"></image>
+            </list-item>
+            <list-item type="listItem" style="width: 419px; height: 200px;">
+                <div style="width: 35px; height:150px;"></div>
+                <div class="itemDiv" style="height:200px">
+                    <div class="itemLeft" onclick="switchToWeekSelector" style="height:200px">
+                        <div class="textLargeDiv" style="width:330px;height:140px;
+                        flex-direction:column;">
+                            <text class="textLarger" style="height:140px;width:330px;text-overflow:ellipsis">{{dataWrapper.repeat}}</text>
+                        </div>
+                        <div class="textMiniDiv" style="width:120px;">
+                            <text class="textStandard" style="width:120px;">Repeat</text>
+                        </div>
+                    </div>
+                </div>
+                <image src="common/jiantou.png" style="width: 70px; height:150px;"></image>
+            </list-item>
+            <list-item type="listItem" style="width: 314px; height: 150px;">
+                <div class="itemDiv" style="width: 390px">
+                    <div class="itemLeft" style="width: 390px">
+                        <div class="textLargeDiv" style="width:120px;">
+                            <text class="textLarger" style="width:120px;">Alarm</text>
+                        </div>
+                        <div class="textMiniDiv" style="width:90px;">
+                            <text class="textStandard" style="width:90px;">Name</text>
+                        </div>
+                    </div>
+                </div>
+            </list-item>
+            <list-item type="listItem" style="width: 419px; height: 150px;">
+                <div style="width:419px; height:150px; flex-direction:column; align-items:center;">
+                    <div style="width:419px; height:60px;"></div>
+                    <div style="width:419px; height:90px; justify-content:center; align-items:center; border-radius:227px;">
+                        <text style="color:#0000ff; font-size: 30px; width:70px; height:50px" onclick="submit">OK</text>
+                        <div style="width:30px; height:50px;"></div>
+                        <text style="color:#b22222; font-size: 30px; width:105px; height:50px" onclick="remove">Delete</text>
+                    </div>
+                </div>
+            </list-item>
+        </list>
+    </div>
@@ -0,0 +1,79 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import router from "@system.router"
+
+module.exports = {
+    data: {
+        dataWrapper: {
+            mode: "",
+            time: "00:00",
+            repeat: "Once",
+            alarmItemIndex: -1
+        },
+        originData: [],
+        isDebug: false
+    },
+    onInit() {
+        if (this.isDebug) {
+            console.log("[editAlarm init] mode: " + this.dataWrapper.mode);
+            console.log("[editAlarm init] mode: " + this.dataWrapper.time);
+            console.log("[editAlarm init] mode: " + this.dataWrapper.repeat);
+            console.log("[editAlarm init] mode: " + this.dataWrapper.alarmItemIndex);
+        }
+        this.dataWrapper = this.dataWrapper;
+        this.transforTimeToTwentyFourHour(this.dataWrapper.time);
+        if (this.originData.toString() !== "undefined") {
+            this.originData = this.originData;
+        }
+    },
+    transforTimeToTwentyFourHour(time) {
+        var timeArray = time.split(" ");
+        var timeDigital = timeArray[0];
+        var timeAMPM = timeArray[1];
+        if (timeAMPM === "PM") {
+            var hourTimeArray = timeDigital.split(":");
+            var hour = hourTimeArray[0];
+            var minute = hourTimeArray[1];
+            hour = Number(hour) + 12;
+            this.dataWrapper.time = hour + ":" + minute;
+        } else {
+            this.dataWrapper.time = timeDigital;
+        }
+    },
+    switchToTimePicker() {
+        router.replace({
+            uri: 'pages/timeSelector/time_picker_page',
+            params:{dataWrapper: this.dataWrapper, originData: this.originData}
+        });
+    },
+    switchToWeekSelector() {
+        router.replace({
+            uri: 'pages/weekSelector/week_select_page',
+            params:{dataWrapper: this.dataWrapper, originData: this.originData}
+        });
+    },
+    submit() {
+        router.replace({
+            uri: 'pages/index/index',
+            params:{dataWrapper: this.dataWrapper, originData: this.originData}
+        });
+    },
+    remove() {
+        router.replace({
+            uri: 'pages/index/index',
+            params:{dataWrapper: this.dataWrapper, deleteAlarm: true, originData: this.originData}
+        });
+    }
+}
@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    width: 454px;
+    height: 454px;
+    flex-direction: column;
+    align-items: center;
+}
+
+.itemWidth {
+    width: 376px;
+}
+
+.itemDiv {
+    width: 280px;
+    height: 150px;
+    flex-direction: column;
+    align-items: center;
+}
+
+.itemDiv_right {
+    width: 96px;
+    height: 150px;
+    justify-content: center;
+    align-items: center;
+}
+
+.itemText {
+    width: 280px;
+    height:50px;
+}
+
+.switchStyle {
+    width: 65px;
+    height: 70px;
+}
@@ -0,0 +1,34 @@
+<!--
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ -->
+<div id="div1" class="container" style="left:0px; top:0px; border-radius:227px">
+    <list id="alarmList" style="height: 407px;" class="itemWidth">
+        <list-item type="listitem" style="width: 376px; height:105px;">
+            <div style="justify-content:center; height:105px;" class="itemWidth">
+                <image id="addAlarm" src="common/add_alarm.png" style="width:90px; height:90px;" onclick="addAlarm"></image>
+            </div>
+        </list-item>
+        <list-item type="listItem" for="{{time}}" style="width: 376px; height:150px;">
+            <div class="itemDiv" onclick="switchToEditAlarm($idx)">
+                <text class="itemText" style="font-family:HYQiHei-65S;font-size:38px;">{{time[$idx]}}</text>
+                <text class="itemText" style="font-family:HYQiHei-65S;font-size:30px;color:#a9a9a9;text-overflow:ellipsis;height:100px;">{{repeat[$idx]}}</text>
+            </div>
+            <div class="itemDiv_right">
+                <switch checked="{{switchStatus[$idx]}}" class="switchStyle" onchange="switchChange($idx)"></switch>
+            </div>
+        </list-item>
+    </list>
+</div>
@@ -0,0 +1,130 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import router from "@system.router"
+
+module.exports = {
+    data: {
+        time: ["07:20 AM", "07:30 AM", "12:00 AM", "06:00 PM"],
+        repeat: ["Mon Tue Wed Thu Fri", "Mon Tue Wed Thu Fri Sat Sun", "Mon Tue Wed Thu Fri", "Once"],
+        mode: ["addAlarm", "editAlarm", "deleteAlarm", "timeArrive"],
+        switchStatus: [false, false, false, false],
+
+        dataWrapper: {
+            mode: "",
+            time: "00:00",
+            repeat: "Once",
+            alarmItemIndex: -1
+        },
+
+        originData: [],
+        isDebug: true
+    },
+    packOriginData() {
+        this.originData = [this.time, this.repeat, this.switchStatus];
+    },
+    unPackOriginData() {
+        this.time = this.originData[0];
+        this.repeat = this.originData[1];
+        this.switchStatus = this.originData[2];
+    },
+    onInit() {
+        console.log("[mainPage init]");
+        if (this.originData.length === 0) { // app first start
+            this.packOriginData();
+        } else {
+            if (this.isDebug) {
+                console.log("[mainPage init] mode: " + this.dataWrapper.mode);
+                console.log("[mainPage init] mode: " + this.dataWrapper.time);
+                console.log("[mainPage init] mode: " + this.dataWrapper.repeat);
+                console.log("[mainPage init] mode: " + this.dataWrapper.alarmItemIndex);
+            }
+
+            this.unPackOriginData(); // apply origin data to current enviroment
+
+            if (this.dataWrapper.mode === this.mode[0]) { // add alarm
+                this.time.push(this.transforTimeToTwelvehour(this.dataWrapper.time));
+                this.repeat.push(this.dataWrapper.repeat);
+                this.switchStatus.push(false);
+
+            } else if (this.dataWrapper.mode === this.mode[1]) { // edit alarm
+                if (typeof(this.deleteAlarm) != "undefined") {
+                    this.time.splice(this.dataWrapper.alarmItemIndex, 1);
+                    this.repeat.splice(this.dataWrapper.alarmItemIndex, 1);
+                    this.switchStatus.splice(this.dataWrapper.alarmItemIndex, 1);
+                } else {
+                    this.time[this.dataWrapper.alarmItemIndex] = this.transforTimeToTwelvehour(this.dataWrapper.time);
+                    this.repeat[this.dataWrapper.alarmItemIndex] = this.dataWrapper.repeat;
+                    this.switchStatus[this.dataWrapper.alarmItemIndex] = true;
+                }
+
+            } else if (this.dataWrapper.mode === this.mode[3]) { // time arrive
+                var switchValue = this.switchValue;
+                this.switchStatus[this.dataWrapper.switchIndex] = switchValue;
+            }
+
+            this.packOriginData(); // wrap current enviroment data as origin data
+        }
+    },
+    transforTimeToTwelvehour(time) {
+        var timeArray = time.split(" ")[0].split(":");
+        var hour = timeArray[0];
+        var minute = timeArray[1];
+        if (minute.length === 1) {
+            minute = "0" + minute;
+        }
+        if (Number(hour) >= 12) {
+            hour = Number(hour) - 12;
+            return hour + ":" + minute + " PM";
+        } else {
+            return hour + ":" + minute + " AM";
+        }
+    },
+    addAlarm() {
+        var date = new Date();
+        var strHour = date.getHours();
+        var strMin = date.getMinutes();
+        this.dataWrapper.mode = this.mode[0];
+        this.dataWrapper.time = strHour + ":" + strMin;
+        router.replace({
+            uri: 'pages/timeSelector/time_picker_page',
+            params:{dataWrapper: this.dataWrapper, originData: this.originData}
+        });
+    },
+    switchToEditAlarm(index) {
+        this.dataWrapper.mode = this.mode[1];
+        this.dataWrapper.time = this.time[index];
+        this.dataWrapper.repeat = this.repeat[index];
+        this.dataWrapper.alarmItemIndex = index;
+        router.replace({
+            uri: 'pages/editAlarm/edit_alarm',
+            params:{dataWrapper: this.dataWrapper, originData: this.originData}
+        });
+    },
+    switchChange(index, e) {
+        if (e.checked) {
+            this.dataWrapper.time = this.time[index];
+            this.dataWrapper.mode = this.mode[3];
+            this.dataWrapper.alarmItemIndex = index;
+            var dataWrapper = this.dataWrapper;
+            var oriData = this.originData;
+            setTimeout(function () {
+                router.replace({
+                    uri: 'pages/timeArrive/time_arrive',
+                    params:{dataWrapper: dataWrapper, originData: oriData}
+                });
+            }, 2000);
+        }
+    }
+}
@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    width: 454px;
+    height: 454px;
+    border-radius:227px;
+    border-color:#8b0000;
+    border-width: 1px;
+    flex-direction: column;
+    align-items: center;
+}
+
+.item {
+    width: 454px;
+    height: 150px;
+    justify-content: center;
+    align-items: center;
+}
+
+.imgStyle {
+    width: 93px;
+    height: 93px;
+}
@@ -0,0 +1,30 @@
+<!--/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ -->
+<div class="container" style="left:0px; top:0px">
+    <div class="item" style="flex-direction:column;">
+        <image src="common/alarmClock.png" style="width:50px;height:50px;"></image>
+        <text style="width:100px;height:50px;">Alarm</text>
+    </div>
+    <div class="item">
+        <text style="width:70px;height:50px;font-size:30px">{{amOrPm}}</text>
+        <text style="width:120px;height:120px;font-size:38px">{{dataWrapper.time}}</text>
+    </div>
+    <div class="item">
+        <image src="common/cancel.png" class="imgStyle" onclick="cancel"></image>
+        <div style="width:50px; height:50px;"></div>
+        <image src="common/postpone.png" class="imgStyle" onclick="postpone"></image>
+    </div>
+</div>
@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import router from "@system.router"
+
+module.exports = {
+    data: {
+        amOrPm: "",
+        dataWrapper: {
+            mode: "",
+            time: "00:00",
+            repeat: "Once",
+            alarmItemIndex: -1
+        },
+        originData: []
+    },
+    onInit() {
+        this.dataWrapper = this.dataWrapper;
+        if (this.originData.toString() !== "undefined") {
+            this.originData = this.originData;
+        }
+
+        var alarmTime = this.dataWrapper.time;
+        var alarmTimeArray = alarmTime.split(" ");
+        this.dataWrapper.time = alarmTimeArray[0];
+        this.amOrPm = alarmTimeArray[1];
+    },
+    postpone() {
+        router.replace({
+            uri: 'pages/index/index',
+            params:{dataWrapper: this.dataWrapper, switchValue: true, originData: this.originData}
+        });
+    },
+    cancel() {
+        router.replace({
+            uri: 'pages/index/index',
+            params:{dataWrapper: this.dataWrapper, switchValue: false, originData: this.originData}
+        });
+    }
+}
@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    width: 454px;
+    height: 454px;
+    border-radius:227px;
+    border-color:#8b0000;
+    border-width: 1px;
+    flex-direction: column;
+    align-items: center;
+}
+
+.divBottom {
+    width: 454px;
+    height: 90px;
+    background-color:#a9a9a9;
+    border-radius:227px;
+    flex-direction: column;
+    justify-content:center;
+    align-items: center;
+}
@@ -0,0 +1,31 @@
+<!--
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ -->
+<div class="container" style="left:0px; top:0px;">
+    <div style="width: 180px; height: 80px; align-items:center;">
+        <text style="width: 180px; height: 50px; font-size: 38px">Set time</text>
+    </div>
+    <div style="width: 400px;height:45px"></div>
+    <picker-view type="time" selected={{selectedTime}} style="width:400px; height:160px" onchange="getSelectedTime">
+
+    </picker-view>
+    <div style="width:454px; height:170px; flex-direction:column; align-items: center;">
+        <div style="width:419px; height:80px;"></div>
+        <div class="divBottom">
+            <text style="color:#0000ff; font-size: 30px; width:80px; height:50px" onclick="next">Next</text>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import router from "@system.router"
+
+module.exports = {
+    data: {
+        selectedTime: "00:00",
+        targetHour: "00",
+        targetMinute: "00",
+        isSelectTimeChanged: false,
+        dataWrapper: {
+            mode: "",
+            repeat: "Once",
+            time: "00:00",
+            alarmItemIndex: -1
+        },
+        isDebug: false,
+        originData: []
+    },
+    onInit() {
+        if (this.isDebug) {
+            console.log("[timePicker init] mode: " + this.dataWrapper.mode);
+            console.log("[timePicker init] time: " + this.dataWrapper.time);
+            console.log("[timePicker init] repeat: " + this.dataWrapper.repeat);
+            console.log("[timePicker init] alarmItemIndex: " + this.dataWrapper.alarmItemIndex);
+        }
+        this.isSelectTimeChanged = false;
+        if (this.dataWrapper.mode === "addAlarm" || this.dataWrapper.mode === "editAlarm") {
+            this.selectedTime = this.dataWrapper.time;
+        }
+        if (this.originData.toString() !== "undefined") {
+            this.originData = this.originData;
+        }
+    },
+    getSelectedTime(e) {
+        this.targetHour = e.hour;
+        this.targetMinute = e.minute;
+        this.isSelectTimeChanged = true;
+    },
+    next() {
+        if (this.isSelectTimeChanged) {
+            this.targetHour = this.targetHour.toString().length === 1 ? "0" + this.targetHour : this.targetHour;
+            this.targetMinute = this.targetMinute.toString().length === 1 ? "0" + this.targetMinute : this.targetMinute;
+            this.dataWrapper.time = this.targetHour + ":" + this.targetMinute + " AM";
+        }
+        if (this.dataWrapper.mode === "addAlarm") {
+            router.replace({
+                uri: 'pages/weekSelector/week_select_page',
+                params:{dataWrapper: this.dataWrapper, originData: this.originData}
+            });
+        }else if (this.dataWrapper.mode === "editAlarm") {
+            router.replace({
+                uri: 'pages/editAlarm/edit_alarm',
+                params:{dataWrapper: this.dataWrapper, originData: this.originData}
+            });
+        }
+    }
+}
@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+    width: 454px;
+    height: 454px;
+    border-radius:227px;
+    border-color:#8b0000;
+    border-width: 1px;
+    flex-direction: column;
+    align-items: center;
+}
+
+.divWeek {
+    width: 454px;
+    height: 115px;
+    justify-content:center;
+    align-items: center;
+}
+
+.imgWeek {
+    width: 95px;
+    height: 95px;
+}
+
+.divBottom {
+    width: 454px;
+    height: 90px;
+    border-radius:227px;
+    background-color: #a9a9a9;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
@@ -0,0 +1,39 @@
+<!--
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ -->
+<div class="container" style="left:0px; top:0px;">
+    <div style="width: 150px; height: 80px; align-items:center;">
+        <text style="width: 150px; height: 50px; font-size: 38px">Repeat</text>
+    </div>
+    <div style="width: 400px;height:23px"></div>
+    <div class="divWeek">
+        <image src={{weekImgSrc1}} class="imgWeek" onclick="changeWeekImgSrc1"></image>
+        <image src={{weekImgSrc2}} class="imgWeek" onclick="changeWeekImgSrc2"></image>
+        <image src={{weekImgSrc3}} class="imgWeek" onclick="changeWeekImgSrc3"></image>
+    </div>
+    <div class="divWeek">
+        <image src={{weekImgSrc4}} class="imgWeek" onclick="changeWeekImgSrc4"></image>
+        <image src={{weekImgSrc5}} class="imgWeek" onclick="changeWeekImgSrc5"></image>
+        <image src={{weekImgSrc6}} class="imgWeek" onclick="changeWeekImgSrc6"></image>
+        <image src={{weekImgSrc7}} class="imgWeek" onclick="changeWeekImgSrc7"></image>
+    </div>
+    <div style="width:454px; height:170px; flex-direction:column; align-items: center;">
+        <div style="width:419px; height:30px;"></div>
+        <div class="divBottom">
+            <text style="color:#0000ff; font-size: 30px; width:50px; height:50px" onclick="submit">OK</text>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,130 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import router from "@system.router"
+
+module.exports = {
+    data: {
+        weekImgSrc1: "common/weekUnSelected_Mon.png",
+        weekImgSrc2: "common/weekUnSelected_Tue.png",
+        weekImgSrc3: "common/weekUnSelected_Wed.png",
+        weekImgSrc4: "common/weekUnSelected_Thu.png",
+        weekImgSrc5: "common/weekUnSelected_Fri.png",
+        weekImgSrc6: "common/weekUnSelected_Sat.png",
+        weekImgSrc7: "common/weekUnSelected_Sun.png",
+        dataWrapper: {
+            mode: "",
+            time: "00:00",
+            repeat: "",
+            alarmItemIndex: -1
+        },
+        originData: [],
+        isDebug: false
+    },
+    onInit() {
+        if (this.isDebug) {
+            console.log("[weekSelector init] mode: " + this.dataWrapper.mode);
+            console.log("[weekSelector init] time: " + this.dataWrapper.time);
+            console.log("[weekSelector init] repeat: " + this.dataWrapper.repeat);
+            console.log("[weekSelector init] alarmItemIndex: " + this.dataWrapper.alarmItemIndex);
+        }
+
+        if (this.dataWrapper.repeat.indexOf("Mon") !== -1) {
+            this.weekImgSrc1 = "common/weekSelected_Mon.png";
+        }
+        if (this.dataWrapper.repeat.indexOf("Tue") !== -1) {
+            this.weekImgSrc2 = "common/weekSelected_Tue.png";
+        }
+        if (this.dataWrapper.repeat.indexOf("Wed") !== -1) {
+            this.weekImgSrc3 = "common/weekSelected_Wed.png";
+        }
+        if (this.dataWrapper.repeat.indexOf("Thu") !== -1) {
+            this.weekImgSrc4 = "common/weekSelected_Thu.png";
+        }
+        if (this.dataWrapper.repeat.indexOf("Fri") !== -1) {
+            this.weekImgSrc5 = "common/weekSelected_Fri.png";
+        }
+        if (this.dataWrapper.repeat.indexOf("Sat") !== -1) {
+            this.weekImgSrc6 = "common/weekSelected_Sat.png";
+        }
+        if (this.dataWrapper.repeat.indexOf("Sun") !== -1) {
+            this.weekImgSrc7 = "common/weekSelected_Sun.png";
+        }
+
+        this.dataWrapper.repeat = "";
+
+        if (this.originData.toString() !== "undefined") {
+            this.originData = this.originData;
+        }
+    },
+    changeWeekImgSrc1() {
+        this.weekImgSrc1 = this.weekImgSrc1.indexOf("UnSelected") === -1 ? "common/weekUnSelected_Mon.png" : "common/weekSelected_Mon.png";
+    },
+    changeWeekImgSrc2() {
+        this.weekImgSrc2 = this.weekImgSrc2.indexOf("UnSelected") === -1 ? "common/weekUnSelected_Tue.png" : "common/weekSelected_Tue.png";
+    },
+    changeWeekImgSrc3() {
+        this.weekImgSrc3 = this.weekImgSrc3.indexOf("UnSelected") === -1 ? "common/weekUnSelected_Wed.png" : "common/weekSelected_Wed.png";
+    },
+    changeWeekImgSrc4() {
+        this.weekImgSrc4 = this.weekImgSrc4.indexOf("UnSelected") === -1 ? "common/weekUnSelected_Thu.png" : "common/weekSelected_Thu.png";
+    },
+    changeWeekImgSrc5() {
+        this.weekImgSrc5 = this.weekImgSrc5.indexOf("UnSelected") === -1 ? "common/weekUnSelected_Fri.png" : "common/weekSelected_Fri.png";
+    },
+    changeWeekImgSrc6() {
+        this.weekImgSrc6 = this.weekImgSrc6.indexOf("UnSelected") === -1 ? "common/weekUnSelected_Sat.png" : "common/weekSelected_Sat.png";
+    },
+    changeWeekImgSrc7() {
+        this.weekImgSrc7 = this.weekImgSrc7.indexOf("UnSelected") === -1 ? "common/weekUnSelected_Sun.png" : "common/weekSelected_Sun.png";
+    },
+    submit() {
+        if (this.weekImgSrc1.indexOf("UnSelected") === -1) {
+            this.dataWrapper.repeat = "Mon";
+        }
+        if (this.weekImgSrc2.indexOf("UnSelected") === -1) {
+            this.dataWrapper.repeat = this.dataWrapper.repeat + " Tue";
+        }
+        if (this.weekImgSrc3.indexOf("UnSelected") === -1) {
+            this.dataWrapper.repeat = this.dataWrapper.repeat + " Wed";
+        }
+        if (this.weekImgSrc4.indexOf("UnSelected") === -1) {
+            this.dataWrapper.repeat = this.dataWrapper.repeat + " Thu";
+        }
+        if (this.weekImgSrc5.indexOf("UnSelected") === -1) {
+            this.dataWrapper.repeat = this.dataWrapper.repeat + " Fri";
+        }
+        if (this.weekImgSrc6.indexOf("UnSelected") === -1) {
+            this.dataWrapper.repeat = this.dataWrapper.repeat + " Sat";
+        }
+        if (this.weekImgSrc7.indexOf("UnSelected") === -1) {
+            this.dataWrapper.repeat = this.dataWrapper.repeat + " Sun";
+        }
+        if (this.dataWrapper.repeat === "") {
+            this.dataWrapper.repeat = "Once";
+        }
+
+        if (this.dataWrapper.mode === "addAlarm") {
+            router.replace({
+                uri: 'pages/index/index',
+                params:{dataWrapper: this.dataWrapper, originData: this.originData}
+            });
+        } else if (this.dataWrapper.mode === "editAlarm") {
+            router.replace({
+                uri: 'pages/editAlarm/edit_alarm',
+                params: {dataWrapper: this.dataWrapper, originData: this.originData}
+            });
+        }
+    }
+}
@@ -0,0 +1,46 @@
+{
+  "app": {
+    "vendor": "huawei",
+    "bundleName": "com.huawei.music",
+    "version": {
+      "code": 1,
+      "name": "1.0"
+    },
+    "apiVersion": {
+        "compatible": 3,
+        "target": 3
+    }
+  },
+  "deviceConfig": {
+    "default": {
+    }
+  },
+  "module": {
+    "deviceType": [
+      "liteWearable",
+      "smartVision"
+    ],
+    "abilities": [
+      {
+        "name": "default",
+        "icon": "$media:icon",
+        "label": "Music",
+        "type": "page",
+        "visible": true
+      }
+    ],
+    "distro": {
+      "moduleType": "entry",
+      "deliveryWithInstall": true,
+      "moduleName": "entry"
+    },
+    "js": [
+      {
+        "pages": [
+          "pages/index/index"
+        ],
+        "name": "default"
+      }
+    ]
+  }
+}
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+    onCreate() {
+        console.info("Application onCreate");
+    },
+    onDestroy() {
+        console.info("Application onDestroy");
+    }
+}
+;
@@ -0,0 +1,208 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+    width: 960px;
+    height: 480px;
+}
+
+.main {
+    display: flex;
+    flex-direction: column;
+    width: 960px;
+    height: 480px;
+}
+
+.header {
+    width: 400px;
+    height: 80px;
+    display: flex;
+}
+
+.back {
+    width: 36px;
+    height: 36px;
+    margin-left: 39px;
+    margin-top: 23px;
+}
+
+.title {
+    width: 296px;
+    height: 40px;
+    margin-top: 20px;
+    margin-left: 21px;
+    color: #e6e6e6;
+}
+
+.musicName {
+    width: 171px;
+    height: 55px;
+    margin-left: 395px;
+    margin-top: 25px;
+    font-size: 38px;
+    color: #ffffff;
+    text-align: center;
+}
+
+.songer {
+    width: 114px;
+    height: 42px;
+    margin-left: 423px;
+    margin-top: 10px;
+    font-size: 30px;
+    color: #bfbfbf;
+    text-align: center;
+}
+
+.progress-Wrapper {
+    flex-direction: row;
+    width: 960px;
+    height: 40px;
+    margin-top: 80px;
+}
+
+.playTime {
+    width: 300px;
+    height: 40px;
+    text-align: right;
+    font-size: 30px;
+    color: #A2A2A2;
+}
+
+.allTime {
+    width: 300px;
+    height: 40px;
+    text-align: left;
+    font-size: 30px;
+    margin-left: 18px;
+    text-align: left;
+    color: #A2A2A2;
+}
+
+.progressBar {
+    width:324px;
+    height: 32px;
+    selected-color: #ffffff;
+    block-color: #ffffff;
+    color:#404040;
+    margin-left: 18px;
+    margin-top: 8px;
+}
+
+.controlBar {
+    flex-direction: row;
+    width: 960px;
+    height: 98px;
+    margin-top: 30px;
+}
+
+.modeBtn {
+    width: 36px;
+    height: 36px;
+    margin-left: 242px;
+    margin-top: 33px;
+}
+
+.previousBtn {
+    width: 56px;
+    height: 56px;
+    margin-left: 48px;
+    margin-top: 21px;
+}
+
+.nextBtn {
+    width: 56px;
+    height: 56px;
+    margin-left: 48px;
+    margin-top: 21px;
+}
+
+.playBtn {
+    width: 98px;
+    height: 98px;
+    margin-left: 49px;
+}
+
+.listBtn {
+    width: 36px;
+    height: 36px;
+    margin-left: 48px;
+    margin-top: 33px;
+}
+
+.list-Wrapper {
+    width: 480px;
+    height: 480px;
+    left: 480px;
+    background-color: #252525;
+    flex-direction: column;
+}
+
+.listText {
+    width: 150px;
+    height: 40px;
+    margin-left: 36px;
+    margin-top: 36px;
+    color: #ffffff;
+}
+
+.musicList {
+    width: 408px;
+    height: 365px;
+    margin-top: 36px;
+    margin-left: 36px;
+    background-color: #252525;
+}
+
+.listItem {
+    width: 408px;
+    height: 120px;
+    background-color: #252525;
+}
+
+.item-Wrapper {
+    width: 408px;
+    height: 112px;
+    background-color: #333333;
+    margin-top: 8px;
+    border-radius: 10px;
+    flex-direction: column;
+}
+
+.space-Wrapper {
+    width: 408px;
+    height: 120px;
+    background-color: #252525;
+}
+
+.itemName {
+    width: 400px;
+    height: 48px;
+    margin-top: 16px;
+    margin-left: 24px;
+    color: #ffffff;
+}
+
+.itemSonger {
+    width: 400px;
+    height: 48px;
+    margin-top: 3px;
+    margin-left: 24px;
+    color: #adadad;
+}
+
+
+
+
@@ -0,0 +1,54 @@
+<!--
+Copyright (c) 2020 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<stack class="container" onswipe="swipeEvent">
+   <div onclick="changePage('close')" class="main">
+       <div class="header" onclick="exitApp">
+           <image class="back" src="common/ic_back.png"></image>
+           <text class="title">音乐</text>
+       </div>
+       <marquee class="musicName" scrollamount="15">{{curMusic.curMusicName}}</marquee>
+       <marquee class="songer" scrollamount="15">{{curMusic.songer}}</marquee>
+       <div class="progress-Wrapper">
+           <text class="playTime">{{curMusic.playTime}}</text>
+           <slider class="progressBar" min="0" max="100" value="{{playProgress}}" onchange="changeProgress"></slider>
+           <text class="allTime">{{curMusic.allTime}}</text>
+       </div>
+       <div class="controlBar">
+           <image class="modeBtn"  onclick="changeMode" src="{{modeImage}}"></image>
+           <image class="previousBtn" onclick="changeSong('previous')"  src="common/ic_music_previous.png"></image>
+           <image class="playBtn" onclick="playMusic"  src="{{playImage}}"></image>
+           <image class="nextBtn" onclick="changeSong('next')" src="common/ic_music_next.png"></image>
+           <image class="listBtn" onclick="changePage" src="common/ic_music_list.png"></image>
+       </div>
+   </div>
+    <div show="{{showMusicList}}" class="list-Wrapper">
+        <text class="listText">播放列表</text>
+        <list ref="musicList" class="musicList">
+            <list-item class="listItem" onclick="clickListItem($idx)" for="{{musicList}}">
+                <div class="space-Wrapper">
+                    <div class="item-Wrapper">
+                        <text class="itemName">
+                            {{$item.name}}
+                        </text>
+                        <text class="itemSonger">
+                            {{$item.songer}}
+                        </text>
+                    </div>
+                </div>
+            </list-item>
+        </list>
+    </div>
+</stack>
@@ -0,0 +1,242 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import audio from '@system.audio'
+import file from '@system.file'
+import app from '@system.app'
+
+var modeImages = ['common/ic_music_listorder.png', 'common/ic_music_listcycle.png', 'common/ic_music_shuffle.png', 'common/ic_music_singlecycle.png'];
+
+export default {
+  data: {
+    showMusicList: false,
+    playMode: 1,  //0:sequential,1:list loop,2:random,3:single
+    modeImage: 'common/ic_music_listcycle.png',
+    playImage: 'common/ic_music_play.png',
+    playProgress: 0,  //progress
+    curMusicIndex: 0,  //music index
+    playStatus: 2,  //0:play,1:pause,2:stop
+    curMusic: {  //current music info
+      curMusicName: "",
+      songer: "",
+      playTime: "00:00",
+      allTime: "00:00"
+    },
+    musicList: []
+  },
+  onInit() {
+    //get music duration
+    audio.onplay = () => {
+      console.log("onplay start");
+      this.curMusic.allTime = this.timeChange(audio.duration);
+      this.playStatus = 0;
+    };
+    //update play progress
+    audio.ontimeupdate = () => {
+      console.log("ontime update:");
+      this.curMusic.playTime = this.timeChange(audio.currentTime);
+      console.log("ontime update:" + this.curMusic.playTime);
+      this.playProgress = Math.floor(audio.currentTime * 100 / audio.duration);
+      console.log("ontime update progress:" + this.playProgress + ",duration:" + audio.duration);
+    };
+    //play next song when meet an error
+    audio.onerror = () => {
+      console.log("onerror");
+      this.changeSong();
+    };
+    //perform operations based on the playback mode.
+    audio.onended = () => {
+      console.log("onend");
+      this.playStatus = 2;
+      //after played the last song in sequential mode ,stop playback
+      if (this.playMode == 0 && this.curMusicIndex == (this.musicList.length - 1)) {
+        this.playStatus = 2;
+        this.playImage = "common/ic_music_play.png";
+        console.log("played the last song in sequential mode");
+        return;
+      }
+      let mode = "";
+      if (this.playMode == 2) {
+        console.log("random");
+        mode = "random";
+      }
+      this.changeSong(mode);
+    };
+    this.getMusicList();
+  },
+  onDestroy() {
+    this.stopPlay();
+  },
+  clickListItem(index) {
+    console.log("listItemClick:start:" + index);
+    if (index == undefined || index == null) {
+      index = 0;
+    }
+    this.curMusicIndex = index;
+    this.playStatus = 2;
+    this.playMusic();
+    this.showMusicList = false;
+    console.log("listItemClick:end");
+  },
+  changeProgress(value) {
+    console.log("changeProgress start:" + value.progress);
+    if (value == null || value.progress == null) {
+      return;
+    }
+    if (this.playStatus == 2) {
+      return;
+    }
+    let val = Math.floor((value.progress / 100) * audio.duration);
+    console.log("changeProgress change:" + val);
+    audio.currentTime = val;
+    console.log("changeProgress end:");
+  },
+  playMusic() {
+    console.log("playMusic:start");
+    //play music when is paused
+    this.playImage = "common/ic_music_pause.png";
+    if (this.playStatus == 1) {
+      audio.play();
+      this.playStatus = 0;
+      console.log("playMusic:play");
+      return;
+    } else if (this.playStatus == 0) {
+      this.playImage = "common/ic_music_play.png";
+      audio.pause();
+      this.playStatus = 1;
+      console.log("playMusic:pause");
+      return;
+    }
+    if (this.curMusicIndex == null) {
+      this.curMusicIndex = 0;
+    }
+    let music = this.musicList[this.curMusicIndex];
+    if (music != null) {
+      this.playProgress = 0;
+      this.curMusic.curMusicName = music.name;
+      this.curMusic.songer = music.songer;
+      audio.src = music.src;
+      console.log("playMusic:src:" + music.src);
+      audio.play();
+      if (this.playMode == 3) {
+          audio.loop = true;
+      } else {
+          audio.loop = false;
+      }
+      console.log("playMusic:end");
+    }
+  },
+  stopPlay() {
+    console.log("stopPlay");
+    audio.src = null;
+    audio.onstop = null;
+    audio.onplay = null;
+    audio.ontimeupdate = null;
+    audio.onerror = null;
+  },
+  changeMode() {
+    console.log("changeMode start");
+    if (this.playMode == 3) {
+      this.playMode = 0;
+    } else {
+      this.playMode++;
+    }
+    if (this.playMode == 3) {
+      audio.loop = true;
+    } else {
+      audio.loop = false;
+    }
+    console.log("changeMode:" + this.playMode);
+    this.modeImage = modeImages[this.playMode];
+  },
+  changeSong(mode) {
+    console.log("ChangeSong:start");
+    if (this.playStatus == 0 || this.playStatus == 1) {
+      this.playStatus = 2;
+    }
+    if (this.playMode == 2) {
+      mode = "random";
+    }
+    //previous
+    if (mode == "previous") {
+      this.curMusicIndex == 0 ? (this.curMusicIndex = (this.musicList.length - 1)) : this.curMusicIndex--;
+      console.log("ChangeSong:previous:" + this.curMusicIndex);
+    } else if (mode == "random") {  //random
+      this.curMusicIndex = parseInt(Math.random() * (this.musicList.length), 10);
+      console.log("ChangeSong:random:" + this.curMusicIndex);
+    } else {  //next
+      (this.curMusicIndex == this.musicList.length - 1) ? this.curMusicIndex = 0 : this.curMusicIndex++;
+      console.log("ChangeSong:next" + this.curMusicIndex);
+    }
+    this.curMusic.curMusicName = this.musicList[this.curMusicIndex].name;
+    this.curMusic.songer = this.musicList[this.curMusicIndex].songer;
+    this.playMusic(this.curMusicIndex);
+    if(this.showMusicList){
+      this.$refs.musicList.scrollTo({ index: (this.curMusicIndex == 0?0:this.curMusicIndex-1) });
+    }
+    console.log("ChangeSong:end");
+  },
+  timeChange(seconds) {
+    console.log("timeChange:start:" + seconds);
+    if (seconds == null || seconds < 0) {
+      return "00:00";
+    }
+    let minute, second = 0;
+    minute = Math.floor(seconds / 60);
+    second = Math.floor(seconds % 60);
+    let result = (minute > 9 ? minute : "0" + minute) + ":" + (second > 9 ? second : "0" + second);
+    console.log("timeChange:end:" + result);
+    return result;
+  },
+  changePage(operation) {
+    console.log("changePage:start");
+    if (operation != null && operation == "close") {
+      this.showMusicList = false;
+      return;
+    }
+    this.showMusicList = !this.showMusicList;
+    if(this.showMusicList){
+      this.$refs.musicList.scrollTo({ index: (this.curMusicIndex == 0?0:this.curMusicIndex-1) });
+    }
+  },
+  exitApp(){
+    console.log("start exit");
+    app.terminate();
+    console.log("end exit");
+  },
+  swipeEvent(e){
+    if(e.direction == "right"){
+      console.log("start exit");
+      this.exitApp();
+    }
+  },
+  getMusicList(){
+      let that = this;
+        //get all music file
+        file.readText({
+            uri:"internal://app/musicList.txt",
+            success(data){
+                console.log(data.text);
+                let music = JSON.parse(data.text);
+                if(music != null){
+                    that.musicList = music;
+                }
+            },
+            fail(data,code){
+                console.log("get music list failed :"+code);
+            }
+        });
+  }
+}
@@ -0,0 +1,256 @@
+{
+  "app": {
+    "bundleName": "com.huawei.showcase",
+    "vendor": "huawei",
+    "version": {
+      "code": 1,
+      "name": "1.0"
+    },
+    "apiVersion": {
+      "compatible": 3,
+      "target": 3
+    }
+  },
+  "deviceConfig": {},
+  "module": {
+    "deviceType": [
+      "liteWearable",
+      "smartVision"
+    ],
+    "distro": {
+      "deliveryWithInstall": true,
+      "moduleName": "entry",
+      "moduleType": "entry"
+    },
+    "abilities": [
+      {
+        "name": "default",
+        "icon": "$media:icon",
+        "label": "Showcase",
+        "type": "page",
+        "visible": true
+      }
+    ],
+    "js": [
+      {
+        "pages": [
+          "pages/index/index",
+          "pages/component/index/containerIndex/index",
+          "pages/component/index/baseIndex/index",
+          "pages/component/index/formIndex/index",
+          "pages/component/index/otherIndex/index",
+          "pages/component/switch/index/index",
+          "pages/component/switch/attr/attr",
+          "pages/component/switch/event/event",
+          "pages/component/switch/style/style",
+          "pages/component/swiper/index/index",
+          "pages/component/swiper/indexAttr/index",
+          "pages/component/swiper/indexEvent/index",
+          "pages/component/swiper/indexSpecSet/index",
+          "pages/component/swiper/indexStyle/index",
+          "pages/component/swiper/swiper1/swiper1",
+          "pages/component/swiper/swiper2/swiper2",
+          "pages/component/swiper/swiper3/swiper3",
+          "pages/component/swiper/swiper4/swiper4",
+          "pages/component/swiper/swiper5/swiper5",
+          "pages/component/swiper/swiper6/swiper6",
+          "pages/component/swiper/swiper7/swiper7",
+          "pages/component/swiper/swiper8/swiper8",
+          "pages/component/swiper/swiper9/swiper9",
+          "pages/component/swiper/swiper10/swiper10",
+          "pages/component/swiper/swiper11/swiper11",
+          "pages/component/div/index/index",
+          "pages/component/div/indexAttr/index",
+          "pages/component/div/indexCommonStyle/index",
+          "pages/component/div/indexSpecStyle/index",
+          "pages/component/div/indexEvent/index",
+          "pages/component/div/div1/div1",
+          "pages/component/div/div2/div2",
+          "pages/component/div/div3/div3",
+          "pages/component/div/div4/div4",
+          "pages/component/div/div5/div5",
+          "pages/component/div/div6/div6",
+          "pages/component/div/div7/div7",
+          "pages/component/div/div8/div8",
+          "pages/component/div/div9/div9",
+          "pages/component/div/div10/div10",
+          "pages/component/div/div11/div11",
+          "pages/component/div/div12/div12",
+          "pages/component/stack/index/index",
+          "pages/component/stack/indexAttr/index",
+          "pages/component/stack/indexEffect/index",
+          "pages/component/stack/indexEvent/index",
+          "pages/component/stack/indexStyle/index",
+          "pages/component/stack/stack1/stack1",
+          "pages/component/stack/stack2/stack2",
+          "pages/component/stack/stack3/stack3",
+          "pages/component/stack/stack4/stack4",
+          "pages/component/stack/stack5/stack5",
+          "pages/component/stack/stack6/stack6",
+          "pages/component/stack/stack7/stack7",
+          "pages/component/stack/stack8/stack8",
+          "pages/component/input/index/index",
+          "pages/component/input/button/index/index",
+          "pages/component/input/button/attr/attr",
+          "pages/component/input/button/event/event",
+          "pages/component/input/button/style/style",
+          "pages/component/input/checkbox/index/index",
+          "pages/component/input/checkbox/attr/attr",
+          "pages/component/input/checkbox/event/event",
+          "pages/component/input/checkbox/style/style",
+          "pages/component/input/radio/index/index",
+          "pages/component/input/radio/attr/attr",
+          "pages/component/input/radio/style/style",
+          "pages/component/input/radio/event/event",
+          "pages/component/text/index/index",
+          "pages/component/text/attr/attr",
+          "pages/component/text/commonStyle/commonStyle",
+          "pages/component/text/specStyle/specStyle",
+          "pages/component/text/event/event",
+          "pages/component/progress/index/index",
+          "pages/component/progress/circle/index/index",
+          "pages/component/progress/circle/attr/attr",
+          "pages/component/progress/circle/event/event",
+          "pages/component/progress/circle/style/style",
+          "pages/component/progress/horizontal/index/index",
+          "pages/component/progress/horizontal/attr/attr",
+          "pages/component/progress/horizontal/event/event",
+          "pages/component/progress/horizontal/style/style",
+          "pages/component/marquee/index/index",
+          "pages/component/marquee/attr/attr",
+          "pages/component/marquee/commonStyle/commonStyle",
+          "pages/component/marquee/event/event",
+          "pages/component/marquee/specStyle/specStyle",
+          "pages/component/list/index/index",
+          "pages/component/list/list/index/index",
+          "pages/component/list/list/indexAttr/index",
+          "pages/component/list/list/indexCommonStyle/index",
+          "pages/component/list/list/indexEvent/index",
+          "pages/component/list/list/indexOperation/index",
+          "pages/component/list/list/indexSpecStyle/index",
+          "pages/component/list/list/list1/list1",
+          "pages/component/list/list/list2/list2",
+          "pages/component/list/list/list3/list3",
+          "pages/component/list/list/list4/list4",
+          "pages/component/list/list/list5/list5",
+          "pages/component/list/list/list6/list6",
+          "pages/component/list/list/list7/list7",
+          "pages/component/list/list/list8/list8",
+          "pages/component/list/list/list9/list9",
+          "pages/component/list/list/list10/list10",
+          "pages/component/list/list/list11/list11",
+          "pages/component/list/list/list12/list12",
+          "pages/component/list/list/list13/list13",
+          "pages/component/list/list-item/index/index",
+          "pages/component/list/list-item/indexAttr/index",
+          "pages/component/list/list-item/indexCommonStyle/index",
+          "pages/component/list/list-item/indexEvent/index",
+          "pages/component/list/list-item/item1/item1",
+          "pages/component/list/list-item/item3/item3",
+          "pages/component/list/list-item/item5/item5",
+          "pages/component/list/list-item/item8/item8",
+          "pages/component/list/list-item/item9/item9",
+          "pages/component/list/list-item/item11/item11",
+          "pages/component/list/list-item/item12/item12",
+          "pages/component/image/index/index",
+          "pages/component/image/indexAttr/index",
+          "pages/component/image/indexEvent/index",
+          "pages/component/image/indexStyle/index",
+          "pages/component/image/image1/image1",
+          "pages/component/image/image2/image2",
+          "pages/component/image/image3/image3",
+          "pages/component/image/image4/image4",
+          "pages/component/image/image5/image5",
+          "pages/component/image/image6/image6",
+          "pages/component/image/image7/image7",
+          "pages/component/image/image8/image8",
+          "pages/component/slider/index/index",
+          "pages/component/slider/attr/attr",
+          "pages/component/slider/event/event",
+          "pages/component/slider/style/style",
+          "pages/component/animation/index/index",
+          "pages/component/animation/index1/index",
+          "pages/component/animation/index2/index",
+          "pages/component/animation/animation1/animation1",
+          "pages/component/animation/animation2/animation2",
+          "pages/component/animation/animation3/animation3",
+          "pages/component/animation/animation4/animation4",
+          "pages/component/animation/animation5/animation5",
+          "pages/component/animation/animation6/animation6",
+          "pages/component/animation/animation7/animation7",
+          "pages/component/picker_view/index/index",
+          "pages/component/picker_view/text_picker/index/index",
+          "pages/component/picker_view/text_picker/indexAttr/index",
+          "pages/component/picker_view/text_picker/indexEvent/index",
+          "pages/component/picker_view/text_picker/indexStyle/index",
+          "pages/component/picker_view/text_picker/text_picker1/text_picker1",
+          "pages/component/picker_view/text_picker/text_picker2/text_picker2",
+          "pages/component/picker_view/text_picker/text_picker3/text_picker3",
+          "pages/component/picker_view/text_picker/text_picker4/text_picker4",
+          "pages/component/picker_view/text_picker/text_picker5/text_picker5",
+          "pages/component/picker_view/text_picker/text_picker6/text_picker6",
+          "pages/component/picker_view/text_picker/text_picker7/text_picker7",
+          "pages/component/picker_view/text_picker/text_picker8/text_picker8",
+          "pages/component/picker_view/text_picker/text_picker9/text_picker9",
+          "pages/component/picker_view/text_picker/text_picker10/text_picker10",
+          "pages/component/picker_view/time_picker/index/index",
+          "pages/component/picker_view/time_picker/indexAttr/index",
+          "pages/component/picker_view/time_picker/indexEvent/index",
+          "pages/component/picker_view/time_picker/indexStyle/index",
+          "pages/component/picker_view/time_picker/time_picker1/time_picker1",
+          "pages/component/picker_view/time_picker/time_picker2/time_picker2",
+          "pages/component/picker_view/time_picker/time_picker3/time_picker3",
+          "pages/component/picker_view/time_picker/time_picker4/time_picker4",
+          "pages/component/picker_view/time_picker/time_picker5/time_picker5",
+          "pages/component/picker_view/time_picker/time_picker6/time_picker6",
+          "pages/component/picker_view/time_picker/time_picker7/time_picker7",
+          "pages/component/picker_view/time_picker/time_picker8/time_picker8",
+          "pages/component/picker_view/time_picker/time_picker9/time_picker9",
+          "pages/component/picker_view/time_picker/time_picker10/time_picker10",
+          "pages/component/chart/index/index",
+          "pages/component/chart/barChart/index/index",
+          "pages/component/chart/barChart/indexAttr/index",
+          "pages/component/chart/barChart/indexEvent/index",
+          "pages/component/chart/barChart/indexStyle/index",
+          "pages/component/chart/barChart/barChart1/barChart1",
+          "pages/component/chart/barChart/barChart2/barChart2",
+          "pages/component/chart/barChart/barChart3/barChart3",
+          "pages/component/chart/barChart/barChart4/barChart4",
+          "pages/component/chart/barChart/barChart5/barChart5",
+          "pages/component/chart/barChart/barChart6/barChart6",
+          "pages/component/chart/barChart/barChart7/barChart7",
+          "pages/component/chart/barChart/barChart8/barChart8",
+          "pages/component/chart/lineChart/index/index",
+          "pages/component/chart/lineChart/indexAttr/index",
+          "pages/component/chart/lineChart/indexEvent/index",
+          "pages/component/chart/lineChart/indexStyle/index",
+          "pages/component/chart/lineChart/lineChart1/lineChart1",
+          "pages/component/chart/lineChart/lineChart2/lineChart2",
+          "pages/component/chart/lineChart/lineChart3/lineChart3",
+          "pages/component/chart/lineChart/lineChart4/lineChart4",
+          "pages/component/chart/lineChart/lineChart5/lineChart5",
+          "pages/component/chart/lineChart/lineChart6/lineChart6",
+          "pages/component/chart/lineChart/lineChart7/lineChart7",
+          "pages/component/chart/lineChart/lineChart8/lineChart8",
+          "pages/component/canvas/index/index",
+          "pages/component/canvas/indexAttr/index",
+          "pages/component/canvas/indexCommonStyle/index",
+          "pages/component/canvas/indexEvent/index",
+          "pages/component/canvas/indexAPI/index",
+          "pages/component/canvas/indexAPIAttr/index",
+          "pages/component/canvas/indexAPIDraw/index",
+          "pages/component/canvas/canvas1/index",
+          "pages/component/canvas/canvas2/index",
+          "pages/component/canvas/canvas3/index",
+          "pages/component/canvas/canvas4/index",
+          "pages/component/canvas/canvas5/index",
+          "pages/component/canvas/canvas6/index",
+          "pages/component/canvas/canvas7/index",
+          "pages/component/canvas/canvas8/index",
+          "pages/component/canvas/canvas9/index"
+        ],
+        "name": "default"
+      }
+    ]
+  }
+}
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+  onCreate() {
+    console.info("Application onCreate");
+  },
+  onDestroy() {
+    console.info("Application onDestroy");
+  }
+};
@@ -0,0 +1,86 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const dataCommon = {
+  datasets: {
+    barsets: [
+      {
+        fillColor: "#9c9c9c",
+        data: [2478, 2600, 3000, 3200, 3500, 3888, 4023, 4501, 4999, 5267]
+      },
+      {
+        fillColor: "#3f9c3f",
+        data: [2000, 2, 800, 700, 433]
+      },
+      {
+        fillColor: "#9c3f3f",
+        data: [100, 200, 300, 400, 500, 600, 550, 450, 350]
+      }
+    ],
+    linesets: [
+      {
+        strokeColor: "#eeaaff",
+        data: [2478, 2600, 3000, 3200, 3500, 3888, 4023, 4501, 4999, 5267]
+      },
+      {
+        strokeColor: "#ccddee",
+        data: [2000, 2, 800, 700, 433]
+      },
+      {
+        strokeColor: "#ddaacc",
+        data: [100, 200, 300, 400, 500, 600, 550, 450, 350]
+      }
+    ]
+  },
+  options: {
+    xAxis: {
+      min: 0,
+      max: 10,
+      axisTick: 5,
+      display: false
+    },
+    yAxis: {
+      min: 0,
+      max: 5000,
+      axisTick: 5,
+      display: false
+    }
+  },
+  optionsNoDisplay: {
+    xAxis: {
+      min: 0,
+      max: 10,
+      axisTick: 5
+    },
+    yAxis: {
+      min: 0,
+      max: 5000,
+      axisTick: 5
+    }
+  }
+};
+export const changeStatus = function() {
+  if (this.status == true) {
+    this.status = false;
+  } else {
+    this.status = true;
+  }
+};
+export const changeDisplay = function() {
+  if (this.display === "flex") {
+    this.display = "none";
+  } else {
+    this.display = "flex";
+  }
+};
@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import router from "@system.router";
+export const backPage = function(superiorUri) {
+  return {
+    backMain() {
+      router.replace({ uri: "pages/index/index" });
+    },
+    backSuperior() {
+      router.replace({ uri: superiorUri });
+    }
+  };
+};
+export const goPage = function(superiorUri) {
+  return {
+    goHome() {
+      router.replace({ uri: "pages/index/index" });
+    },
+    goPrevious() {
+      router.replace({ uri: superiorUri });
+    }
+  };
+};
+export const routePage = function(page) {
+  return {
+    changePage() {
+      router.replace({ uri: page });
+    }
+  };
+};
+export const eventCommon = function() {
+  return {
+    text1: "点击事件未触发",
+    text2: "长按事件未触发",
+    text3: "swipe事件未触发",
+    clickFunc: function() {
+      this.text1 = "点击事件已触发";
+    },
+    longpressFunc: function() {
+      this.text2 = "长按事件已触发";
+    },
+    swipeFunc: function(e) {
+      this.text3 = "swipe方向：" + e.direction;
+    }
+  };
+};
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// image.js
+export const changeStatus = function () {
+  if (this.status == true) {
+    this.status = false;
+  } else {
+    this.status = true;
+  }
+};
@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const changeStatus = function() {
+  if (this.status == true) {
+    this.status = false;
+  } else {
+    this.status = true;
+  }
+};
+export const changeIf = function() {
+  if (this.ifStatus) {
+    this.ifStatus = false;
+  } else {
+    this.ifStatus = true;
+  }
+};
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// list.js
+export const changeStatus = function () {
+  if (this.status == true) {
+    this.status = false;
+  } else {
+    this.status = true;
+  }
+};
@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const changeStatus = function() {
+  if (this.status == true) {
+    this.status = false;
+  } else {
+    this.status = true;
+  }
+};
+export const changeIfStatus = function() {
+  if (this.ifstatus == true) {
+    this.ifstatus = false;
+  } else {
+    this.ifstatus = true;
+  }
+};
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// picker_view.js
+export const changeStatus = function () {
+  if (this.status == true) {
+    this.status = false;
+  } else {
+    this.status = true;
+  }
+};
@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const changeStatusIf = function() {
+  if (this.ifStatus == true) {
+    this.ifStatus = false;
+  } else {
+    this.ifStatus = true;
+  }
+};
+export const changeDisplay = function() {
+  if (this.display === "flex") {
+    this.display = "none";
+  } else {
+    this.display = "flex";
+  }
+};
+export const changeStatus = function() {
+  if (this.status == true) {
+    this.status = false;
+  } else {
+    this.status = true;
+  }
+};
+export const clickEvent = function() {
+  this.value = "点击已触发";
+  this.percent = this.percent + 10;
+};
+export const longpressEvent = function() {
+  this.value = "长按已触发";
+  this.percent = this.percent + 20;
+};
+export const swipeEvent = function(e) {
+  this.value = "swipe方向：" + e.direction;
+};
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// stack.js
+export const changeStatus = function () {
+  if (this.status == true) {
+    this.status = false;
+  } else {
+    this.status = true;
+  }
+};
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const showPage = function(e) {
+  this.index = e.index;
+};
+export const changeStatus = function() {
+  if (this.status == true) {
+    this.status = false;
+  } else {
+    this.status = true;
+  }
+};
@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const changeShow = function() {
+  if (this.showStatus == true) {
+    this.showStatus = false;
+  } else {
+    this.showStatus = true;
+  }
+};
+export const changeStatusIf = function() {
+  if (this.ifStatus == true) {
+    this.ifStatus = false;
+  } else {
+    this.ifStatus = true;
+  }
+};
@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.stack {
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 454px;
+}
+
+.divBlock {
+  width: 200px;
+  height: 80px;
+  left:120px;
+  background-color: #ff0000;
+}
+
+.divAnimationStyle {
+  animation-duration: 3000ms;
+  animation-timing-function: linear;
+  animation-fill-mode: none;
+  animation-iteration-count:1;
+}
+
+@keyframes animationChange1 {
+  from {
+    background-color: #ff0000;
+  }
+  to {
+    background-color: #0000ff;
+  }
+}
+
+@keyframes animationChange2 {
+  from {
+    width:200px;
+  }
+  to {
+    width:250px;
+  }
+}
+
+@keyframes animationChange3 {
+  from {
+    height:80px;
+  }
+  to {
+    height:130px;
+  }
+}
@@ -0,0 +1,38 @@
+<!--
+Copyright (c) 2020 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+    <stack class="stack" >
+        <stack style="width:454px;height:60px;top:60px;">
+          <input type="button" style="left:85px;width:130px;height:50px;" value="首页" onclick=backMain>
+          </input>
+          <input type="button" style="left:235px;width:130px;height:50px;" value="上一页" onclick=backSuperior>
+          </input>
+        </stack>
+        <div class="divBlock divAnimationStyle" style="animation-name:animationChange1;top:120px;">
+          <text style="width:200px;height:80px;font-size:30px;">
+            background-color
+          </text>
+        </div>
+        <div class="divBlock divAnimationStyle" style="animation-name:animationChange2;top:200px;">
+          <text style="width:200px;height:40px;font-size:30px;">
+            width
+          </text>
+        </div>
+        <div class="divBlock divAnimationStyle" style="animation-name:animationChange3;top:280px;">
+          <text style="width:200px;height:40px;font-size:30px;">
+            height
+          </text>
+        </div>
+    </stack>
@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// animation1.js
+import { backPage } from "../../../../common/js/general";
+export default {
+    ...backPage("pages/component/animation/index1/index")
+}
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.stack {
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 454px;
+}
+
+.divBlock {
+  width: 200px;
+  height: 80px;
+  left:120px;
+  background-color: #ff0000;
+}
+
+.divAnimationStyle {
+  animation-duration: 3000ms;
+  animation-timing-function: linear;
+  animation-fill-mode: none;
+  animation-delay: 3000ms;
+  animation-iteration-count:1;
+}
+
+@keyframes animationChange1 {
+  from {
+    background-color: #ff0000;
+  }
+  to {
+    background-color: #0000ff;
+  }
+}
@@ -0,0 +1,28 @@
+<!--
+Copyright (c) 2020 Huawei Device Co., Ltd.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+    <stack class="stack" >
+        <stack style="width:454px;height:60px;top:60px;">
+          <input type="button" style="left:85px;width:130px;height:50px;" value="首页" onclick=backMain>
+          </input>
+          <input type="button" style="left:235px;width:130px;height:50px;" value="上一页" onclick=backSuperior>
+          </input>
+        </stack>
+        <div class="divBlock divAnimationStyle" style="animation-name:animationChange1;top:120px;">
+          <text style="width:200px;height:80px;font-size:30px;">
+            delay:3000ms
+          </text>
+        </div>
+    </stack>
@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// animation2.js
+import { backPage } from "../../../../common/js/general";
+export default {
+    ...backPage("pages/component/animation/index1/index")
+}
@@ -0,0 +1,57 @@
+/*
+ * Copyright (c) 2020 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.stack {
+  left: 0px;
+  top: 0px;
+  width: 454px;
+  height: 454px;
+}
+
+.divBlock {
+  width: 200px;
+  height: 80px;
+  left:120px;
+  background-color: #ff0000;
+}
+
+.divAnimationStyle1 {
+  animation-duration: 3000ms;
+  animation-timing-function: linear;
+  animation-fill-mode: none;
+  animation-iteration-count:1;
+}
+
+.divAnimationStyle2 {
+  animation-duration: 5000ms;
+  animation-timing-function: linear;
+  animation-fill-mode: none;
+  animation-iteration-count:1;
+}
+
+.divAnimationStyle3 {
+  animation-duration: 10000ms;
+  animation-timing-function: linear;
+  animation-fill-mode: none;
+  animation-iteration-count:1;
+}
+
+@keyframes animationChange {
+  from {
+    background-color: #ff0000;
+  }
+  to {
+    background-color: #0000ff;
+  }
+}
--- a/Show More
+++ b/Show More