Chore: add theme (#15361)

examples/components/header.vue

@@ -303,7 +303,7 @@
           </li>
           <li 
             class="nav-item"
-            v-if="showThemeConfigurator"
+            v-if="$isEle"
           >
             <router-link
               active-class="active"
@@ -373,7 +373,7 @@
           
           <!--theme picker-->
           <li class="nav-item nav-theme-switch" v-show="isComponentPage">
-            <theme-picker v-if="!showThemeConfigurator"></theme-picker>
+            <theme-picker v-if="!$isEle"></theme-picker>
           </li>
         </ul>
       </div>
@@ -405,8 +405,7 @@
           'en-US': 'English',
           'es': 'Español',
           'fr-FR': 'Français'
-        },
-        showThemeConfigurator: false
+        }
       };
     },
 
@@ -432,18 +431,14 @@
       }
     },
     mounted() {
-      const host = location.hostname;
-      this.showThemeConfigurator = host.match('localhost') || host.match('elenet');
-      if (!this.showThemeConfigurator) {
-        getVars()
-          .then(() => {
-            this.showThemeConfigurator = true;
-            ga('send', 'event', 'DocView', 'Inner');
-          })
-          .catch((err) => {
-            console.error(err);
-          });
-      }
+      getVars()
+        .then(() => {
+          this.$isEle = true;
+          ga('send', 'event', 'DocView', 'Inner');
+        })
+        .catch((err) => {
+          console.error(err);
+        });
     },
     methods: {
       switchVersion(version) {

examples/components/theme-configurator/index.vue

@@ -10,6 +10,7 @@
       @select="onSelectChange"
     ></action-panel>
     <main-panel
+      ref='configuratorMain'
       v-if="defaultConfig"
       :currentConfig="currentConfig"
       :defaultConfig="defaultConfig"
@@ -179,6 +180,7 @@ export default {
       bus.$emit(ACTION_COMPONECT_SELECT, val);
       this.selectedComponent = val;
       this.filterCurrentConfig();
+      this.$refs.configuratorMain.focus();
     }
   },
   watch: {

examples/components/theme/components-preview.vue

@@ -227,7 +227,7 @@
       <div role="alert" class="demo-item el-message el-message--success el-message-fade-leave-active el-message-fade-leave-to" style="top: 0;left: 0;width: 100px; opacity: 1; position: relative;transform: none;"><i class="el-message__icon el-icon-success"></i><p class="el-message__content">Congrats, this is a success message.</p><!----></div>
       <div role="alert" class="demo-item el-message el-message--warning el-message-fade-leave-active el-message-fade-leave-to" style="top: 0;left: 0;width: 100px; opacity: 1; position: relative;transform: none;"><i class="el-message__icon el-icon-warning"></i><p class="el-message__content">Warning, this is a warning message.</p><!----></div>
       <div role="alert" class="demo-item el-message el-message--info el-message-fade-leave-active el-message-fade-leave-to" style="top: 0;left: 0;width: 100px; opacity: 1; position: relative;transform: none;"><i class="el-message__icon el-icon-info"></i><p class="el-message__content">This is a message.</p><!----></div>
-      <div role="alert" class="demo-item el-message el-message--error el-message-fade-leave-active el-message-fade-leave-to" style="top: 0;left: 0;width: 100px; opacity: 1; position: relative;transform: none;"><i class="el-message__icon el-icon-error"></i><p class="el-message__content">Oops, this is a error message.</p><!----></div>
+      <div role="alert" class="demo-item el-message el-message--error is-closable el-message-fade-leave-active el-message-fade-leave-to" style="top: 0;left: 0;width: 100px; opacity: 1; position: relative;transform: none;"><i class="el-message__icon el-icon-error"></i><p class="el-message__content">Oops, this is a error message.</p><i class="el-message__closeBtn el-icon-close"></i></div>
     </el-row>
     <h4>MessageBox</h4>
     <el-row>

examples/components/theme/theme-list.js

@@ -1,13 +1,15 @@
-const themeList = [
+export const themeList = [
   {
     name: 'Element',
     author: 'Element',
     theme: '{"global":{"$--color-primary":"#409EFF"},"local":{}}'
-  },
+  }
+];
+
+export const eleThemeList = [
   {
-    name: 'Napos',
+    name: 'Kiwi',
     author: 'Element',
-    theme: '{"global":{"$--color-primary":"#1989FA"},"local":{}}'
+    theme: '{"global":{"$--color-primary":"#1989FA","$--color-success":"#5CB87A","$--color-warning":"#E6A23C","$--color-danger":"#F56C6C","$--color-info":"#8896B3","$--font-size-small":"13px","$--font-size-base":"14px","$--font-size-medium":"16px","$--font-size-large":"22px","$--font-size-extra-large":"28px","$--font-line-height-secondary":"20px"},"local":{"$--button-primary-background-color":"$--color-primary","$--switch-font-size":"14px","$--datepicker-active-color":"$--color-primary","$--tooltip-border-color":"$--border-color-base","$--tooltip-color":"#FFFFFF","$--tooltip-padding":"10px","$--collapse-header-font-size":"14px","$--collapse-content-font-size":"14px","$--collapse-content-font-color":"$--color-text-regular","$--radio-input-background-color":"#FFFFFF","$--radio-icon-color":"$--color-warning","$--radio-button-checked-background-color":"$--color-primary","$--input-border-radius":"$--border-radius-base","$--select-input-focus-border-color":"$--color-primary","$--select-font-size":"14px","$--select-option-selected-font-color":"$--color-primary","$--select-input-font-size":"14px","$--select-option-height":"34px","$--slider-main-background-color":"$--color-primary","$--tag-font-color":"$--color-primary","$--tag-default-hover-background-color":"$--color-primary","$--message-warning-font-color":"$--color-warning","$--alert-title-font-size":"14px","$--alert-icon-size":"14px","$--alert-icon-large-size":"22px","$--alert-close-customed-font-size":"12px","$--notification-title-font-size":"16px","$--notification-content-font-size":"14px","$--menu-item-font-color":"$--color-primary"}}'
   }
 ];
-export default themeList;

examples/entry.js

@@ -25,6 +25,19 @@ Vue.component('main-header', MainHeader);
 Vue.component('side-nav', SideNav);
 Vue.component('footer-nav', FooterNav);
 
+const globalEle = new Vue({
+  data: { $isEle: false } // 是否 ele 用户
+});
+
+Vue.mixin({
+  computed: {
+    $isEle: {
+      get: () => (globalEle.$data.$isEle),
+      set: (data) => {globalEle.$data.$isEle = data;}
+    }
+  }
+});
+
 Vue.prototype.$icon = icon; // Icon 列表页用
 
 const router = new VueRouter({

examples/i18n/theme-editor.json

@@ -68,7 +68,8 @@
       "theme-copy": "复制",
       "theme-edit": "编辑",
       "description-element": "默认主题",
-      "description-napos": "深色主题"
+      "description-napos": "深色主题",
+      "description-kiwi": "KIWI 主题"
     },
     "category": {
       "BrandColor": "品牌颜色",
@@ -195,7 +196,8 @@
       "theme-copy": "Copy",
       "theme-edit": "Edit",
       "description-element": "Default theme",
-      "description-napos": "Dark theme"
+      "description-napos": "Dark theme",
+      "description-kiwi": "kiwi theme"
     },
     "category": {
       "BrandColor": "Brand Color",
@@ -276,7 +278,8 @@
       "theme-copy": "Copy",
       "theme-edit": "Edit",
       "description-element": "Default theme",
-      "description-napos": "Dark theme"
+      "description-napos": "Dark theme",
+      "description-kiwi": "kiwi theme"
     },
     "category": {
       "BrandColor": "Brand Color",
@@ -357,7 +360,8 @@
       "theme-copy": "Copy",
       "theme-edit": "Edit",
       "description-element": "Default theme",
-      "description-napos": "Dark theme"
+      "description-napos": "Dark theme",
+      "description-kiwi": "kiwi theme"
     },
     "category": {
       "BrandColor": "Brand Color",

examples/pages/template/theme.tpl

@@ -81,7 +81,7 @@
 </template>
 <script>
 import ThemeCard from '../../components/theme/theme-card.vue';
-import ThemeList from '../../components/theme/theme-list.js';
+import { themeList, eleThemeList } from '../../components/theme/theme-list.js';
 import { saveUserThemeToLocal, loadUserThemeFromLocal } from '../../components/theme/localstorage';
 import { getActionDisplayName } from '../../components/theme-configurator/utils/utils';
 
@@ -100,7 +100,6 @@ export default {
   },
   data() {
     return {
-      officialTheme: this.padEmpeyTheme(ThemeList),
       userTheme: [],
       maxUserTheme,
       copyDialogVisible: false,
@@ -114,6 +113,9 @@ export default {
     };
   },
   computed: {
+    officialTheme() {
+      return this.padEmpeyTheme(themeList.concat(this.$isEle ? eleThemeList : []));
+    },
     userThemeCount() {
       return this.userTheme.length;
     },