组件重命名 && 代码格式化

src/app-register.ts

@@ -123,7 +123,7 @@ export const AppComponents = {
         // 定制组件
         v.component('app-customize',() => import('@/ibiz-core/components/app-customize/app-customize.vue'));
         // 主题切换组件
-        v.component('app-mob-select-changeTheme',() => import('@/ibiz-core/components/app-mob-select-changeTheme/app-mob-select-changeTheme.vue'));
+        v.component('app-mob-select-theme',() => import('@/ibiz-core/components/app-mob-select-theme/app-mob-select-theme.vue'));
         // 锚点列表插件
         v.component('app-anchor-list',() => import('@/components/app-anchor-list/app-anchor-list.vue'));
         // 侧滑菜单组件

src/ibiz-core/components/app-mob-select-changeTheme/app-mob-select-changeTheme.less → src/ibiz-core/components/app-mob-select-theme/app-mob-select-theme.less

@@ -8,14 +8,14 @@
   }
 
 }
-.theme {
+.app-mob-select-theme_theme {
   display: flex;
   justify-content: end;
   align-items: center;
   flex-wrap: wrap;
   padding: 12px;
 }
-.theme_item {
+.app-mob-select-theme_theme_item {
   width: 70px;
   height: 70px;
   border-radius: 50%;

src/ibiz-core/components/app-mob-select-changeTheme/app-mob-select-changeTheme.vue → src/ibiz-core/components/app-mob-select-theme/app-mob-select-theme.vue

 <template>
     <div  class="app-mobile-theme">
         <div class="activeoption" v-if="activeoption" :style="{'background':activeoption.background,'color':activeoption.color}">{{activeoption.text}}</div>
-        <van-action-sheet  get-container="#app"  v-model="show" :cancel-text="$t('app.button.cancel')"  close-on-click-action>
-            <div class = "theme">
-                <div @click="themeChange(item.value)" v-for="item in options" :key="item.value" class="theme_item" :style="{background:item.background,color:item.color}">{{item.text}}</div>
+        <van-action-sheet  get-container="#app" :title="$t('themeSelection')" :closeable="false"   v-model="show" :cancel-text="$t('app.button.cancel')"  close-on-click-action>
+            <div class = "app-mob-select-theme_theme">
+                <div @click="themeChange(item.value)" v-for="item in options" :key="item.value" class="app-mob-select-theme_theme_item" :style="{background:item.background,color:item.color}">{{item.text}}</div>
             </div>
         </van-action-sheet>
     </div>   
@@ -13,6 +13,16 @@
 import { Vue, Component, Prop, Provide, Emit, Watch, } from "vue-property-decorator";
 import { themeGroup } from './config'
 @Component({
+    i18n: {
+        messages: {
+            'ZH-CN': {
+                themeSelection: '主题选择',
+            },
+            'EN-US': {
+                themeSelection: 'Theme selection',
+            }
+        }
+    },
     components: {},
 })
 export default class AppSelectTheme extends Vue {
@@ -29,14 +39,14 @@ export default class AppSelectTheme extends Vue {
      *
      * @memberof AppSelectTheme
      */
-    public activeoption:any = {};
+    public activeoption: any = {};
 
     /**
      * 获取当前主题
      *
      * @memberof AppSelectTheme
      */
-    public getTheme(){
+    public getTheme() {
         if (this.$router.app.$store.state.selectTheme) {
             return this.$router.app.$store.state.selectTheme;
         } else if (localStorage.getItem('theme-class')) {
@@ -54,16 +64,6 @@ export default class AppSelectTheme extends Vue {
      */
     public options: any[] = themeGroup;
 
-    /**
-     * 声明周期钩子
-     * 
-     * @memberof AppSelectTheme
-     */
-    public mounted() {
-        this.activeTheme = this.getTheme();
-        this.setActiveoption();
-    }
-
     /**
      * 激活主题
      *
@@ -76,12 +76,12 @@ export default class AppSelectTheme extends Vue {
      *
      * @memberof AppSelectTheme
      */
-    public setActiveoption(){
-        let index = this.options.findIndex((item:any)=>{
+    public setActiveoption() {
+        let index = this.options.findIndex((item: any) => {
             return this.activeTheme == item.value;
         })
-       this.activeoption =  index>-1? this.options[index]:null;
-       this.show = false;
+        this.activeoption = index > -1 ? this.options[index] : null;
+        this.show = false;
     }
 
     /**
@@ -105,10 +105,19 @@ export default class AppSelectTheme extends Vue {
      * @param {*} val
      * @memberof AppTheme
      */
-    public open(){
+    public open() {
         this.show = true;
     }
-
+    
+    /**
+     * 声明周期钩子
+     * 
+     * @memberof AppSelectTheme
+     */
+    public mounted() {
+        this.activeTheme = this.getTheme();
+        this.setActiveoption();
+    }
 }
 </script>
 

src/ibiz-core/components/app-setting/app-setting.vue

@@ -17,7 +17,7 @@
                 v-if="item.name !== 'theme' &&  item.name !== 'accountInformation'"
                 name="chevron-forward-outline"
               ></ion-icon>
-              <app-mob-select-changeTheme v-if="item.name == 'theme'" ref="changeTheme"></app-mob-select-changeTheme>
+              <app-mob-select-theme v-if="item.name == 'theme'" ref="changeTheme"></app-mob-select-theme>
               <div
                 v-if="item.name == 'accountInformation'"
                 class="content-list-item-content-text"
@@ -35,7 +35,7 @@
                 v-if="item.name !== 'theme' &&  item.name !== 'accountInformation'"
                 name="chevron-forward-outline"
               ></ion-icon>
-              <app-mob-select-changeTheme v-if="item.name == 'theme'" ref="changeTheme"></app-mob-select-changeTheme>
+              <app-mob-select-theme v-if="item.name == 'theme'" ref="changeTheme"></app-mob-select-theme>
               <div
                 v-if="item.name == 'accountInformation'"
                 class="content-list-item-content-text"
@@ -53,7 +53,7 @@
                 v-if="item.name !== 'theme' &&  item.name !== 'accountInformation'"
                 name="chevron-forward-outline"
               ></ion-icon>
-              <app-mob-select-changeTheme v-if="item.name == 'theme'" ref="changeTheme"></app-mob-select-changeTheme>
+              <app-mob-select-theme v-if="item.name == 'theme'" ref="changeTheme"></app-mob-select-theme>
               <div
                 v-if="item.name == 'accountInformation'"
                 class="content-list-item-content-text"