From 7cd4d2467721fde946ec3bf4e30f7de846b1f146 Mon Sep 17 00:00:00 2001
From: Yankun <vcfg.code@hotmail.com>
Date: Tue, 15 Jul 2014 10:27:27 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BAflat=20theme=20=E6=8F=90=E4=BE=9B?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89prefix=20=E6=94=AF=E6=8C=81=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Button.less        | 10 +++---
 src/Calendar.less      | 10 +++---
 src/CommandMenu.less   | 26 +++++++-------
 src/Dialog.less        | 26 +++++++-------
 src/MonthView.less     | 76 +++++++++++++++++++--------------------
 src/Pager.less         | 20 +++++------
 src/RangeCalendar.less | 44 +++++++++++------------
 src/Region.less        | 34 +++++++++---------
 src/Schedule.less      | 24 ++++++-------
 src/SearchBox.less     | 16 ++++-----
 src/Select.less        | 28 +++++++--------
 src/Sidebar.less       | 22 ++++++------
 src/Table.less         | 82 +++++++++++++++++++++---------------------
 src/TextBox.less       | 10 +++---
 src/TextLine.less      |  6 ++--
 src/Tip.less           |  2 +-
 src/TipLayer.less      | 34 +++++++++---------
 src/Tree.less          | 24 ++++++-------
 18 files changed, 247 insertions(+), 247 deletions(-)

diff --git a/src/Button.less b/src/Button.less
index e1f9506..67e84cc 100644
--- a/src/Button.less
+++ b/src/Button.less
@@ -20,7 +20,7 @@
 @button-color-disabled: #656565;
 @button-border-color-disabled: @button-background-disabled;
 
-.ui-button {
+.@{ui-class-prefix}-button {
     background: @button-background;
     border-style: @button-border-style;
     border-color: @button-border-color;
@@ -33,24 +33,24 @@
     line-height: @button-height;
 }
 
-button.ui-button {
+button.@{ui-class-prefix}-button {
     *height: @button-height + 2px;
 }
 
-.ui-button:hover {
+.@{ui-class-prefix}-button:hover {
     border-color: @button-border-color-hover;
     background: @button-background-hover;
     color: @button-color-hover;
     border-width: @button-border-width;
 }
 
-.ui-button:active {
+.@{ui-class-prefix}-button:active {
     border-color: @button-border-color-active;
     background: @button-background-active;
     color: @button-color-active;
 }
 
-.ui-button-disabled {
+.@{ui-class-prefix}-button-disabled {
     border-color: @button-border-color-disabled;
     background: @button-background-disabled;
     color: @button-color-disabled;
diff --git a/src/Calendar.less b/src/Calendar.less
index 4e9a691..a22d9e2 100644
--- a/src/Calendar.less
+++ b/src/Calendar.less
@@ -9,22 +9,22 @@
 @calendar-arrow-icon-height: 16px;
 @calendar-arrow-icon-width: 16px;
 
-.ui-calendar {
+.@{ui-class-prefix}-calendar {
     border: @calendar-border;
     background: @calendar-background;
     border-radius: @calendar-border-radius;
 }
 
-.ui-calendar-text {
+.@{ui-class-prefix}-calendar-text {
     color: @calendar-color;
 }
 
-.ui-calendar:hover,
-.ui-calendar:active {
+.@{ui-class-prefix}-calendar:hover,
+.@{ui-class-prefix}-calendar:active {
     border-color: @calendar-border-color-hover;
 }
 
-.ui-calendar-arrow {
+.@{ui-class-prefix}-calendar-arrow {
     .normal-icon(
         @calendar-arrow-icon-background,
         @calendar-arrow-icon-width, @calendar-arrow-icon-height
diff --git a/src/CommandMenu.less b/src/CommandMenu.less
index b5ae679..8d707bf 100644
--- a/src/CommandMenu.less
+++ b/src/CommandMenu.less
@@ -30,7 +30,7 @@
 @commandmenu-node-background-color-active: #fffaee;
 @commandmenu-node-background-color-disabled: #f1f1f1;
 
-.ui-commandmenu {
+.@{ui-class-prefix}-commandmenu {
     border: @commandmenu-border;
     background: @commandmenu-background-color;
     .pseudo-icon(@commandmenu-layer-state-indicator, @commandmenu-layer-state-indicator-width, @commandmenu-layer-state-indicator-height, right, @commandmenu-padding-left);
@@ -43,28 +43,28 @@
     font-weight: bold;
 }
 
-.ui-commandmenu:focus,
-.ui-commandmenu:hover,
-.ui-commandmenu:active {
+.@{ui-class-prefix}-commandmenu:focus,
+.@{ui-class-prefix}-commandmenu:hover,
+.@{ui-class-prefix}-commandmenu:active {
     background: @commandmenu-background-color-hover;
     .pseudo-icon(@commandmenu-layer-state-indicator-hover, @commandmenu-layer-state-indicator-width, @commandmenu-layer-state-indicator-height, right, @commandmenu-padding-left);
 }
 
-.ui-commandmenu-active:focus,
-.ui-commandmenu-active:hover,
-.ui-commandmenu-active:active {
+.@{ui-class-prefix}-commandmenu-active:focus,
+.@{ui-class-prefix}-commandmenu-active:hover,
+.@{ui-class-prefix}-commandmenu-active:active {
     background: @commandmenu-background-color-active;
     .pseudo-icon(@commandmenu-layer-state-indicator-active, @commandmenu-layer-state-indicator-width, @commandmenu-layer-state-indicator-height, right, @commandmenu-padding-left);
 }
 
-.ui-commandmenu-layer {
+.@{ui-class-prefix}-commandmenu-layer {
     width: @commandmenu-width;
     border: @commandmenu-border;
     border-top: @commandmenu-layer-split-border;
     background: @commandmenu-layer-background;   
 }
 
-.ui-commandmenu-node {
+.@{ui-class-prefix}-commandmenu-node {
     color: @commandmenu-node-color;
     height: @commandmenu-node-height;
     line-height: @commandmenu-node-height;
@@ -73,17 +73,17 @@
     padding-left: @commandmenu-node-padding-left;
 }
 
-.ui-commandmenu-node:hover {
+.@{ui-class-prefix}-commandmenu-node:hover {
     background: @commandmenu-node-background-color-hover;
 }
 
-.ui-commandmenu-disabled,
-.ui-commandmenu-disabled:hover {
+.@{ui-class-prefix}-commandmenu-disabled,
+.@{ui-class-prefix}-commandmenu-disabled:hover {
     background: @commandmenu-background-color-disabled;
     .pseudo-icon(@commandmenu-layer-state-indicator-disabled, @commandmenu-layer-state-indicator-width, @commandmenu-layer-state-indicator-height, right, @commandmenu-padding-left);
 }
 
-.ui-commandmenu-node-disabled {
+.@{ui-class-prefix}-commandmenu-node-disabled {
     color: #999;
     background: @commandmenu-node-background-color-disabled;
 }
\ No newline at end of file
diff --git a/src/Dialog.less b/src/Dialog.less
index d2db27e..d6c9d5b 100644
--- a/src/Dialog.less
+++ b/src/Dialog.less
@@ -22,45 +22,45 @@
 
 @dialog-foot-button-align: left;
 
-.ui-dialog {
+.@{ui-class-prefix}-dialog {
     background: @dialog-background;
     border: @dialog-border;
     width: @dialog-width;
     .border-radius(0);
 }
 
-.ui-dialog-head {
+.@{ui-class-prefix}-dialog-head {
     background: @dialog-head-background;
     color: @dialog-color;
     height: @dialog-head-height;
 }
 
-.ui-dialog-title {
+.@{ui-class-prefix}-dialog-title {
     padding: @dialog-title-padding;
     font-size: @dialog-title-font-size;
     line-height: @dialog-title-height;
 }
 
-.ui-dialog-close-icon {
+.@{ui-class-prefix}-dialog-close-icon {
     .normal-icon(@dialog-close-icon-image, @dialog-close-icon-width, @dialog-close-icon-height);
     right: @dialog-close-icon-right;
     top: @dialog-close-icon-top;
 }
 
-.ui-dialog-body {
+.@{ui-class-prefix}-dialog-body {
     padding: @dialog-body-padding;
 }
 
 
-.ui-dialog-foot-panel {
+.@{ui-class-prefix}-dialog-foot-panel {
     padding: @dialog-foot-panel-padding;
     border: none;
     margin: 0;
 }
 
-.ui-dialog-foot {
+.@{ui-class-prefix}-dialog-foot {
     float: @dialog-foot-button-align;
-    .ui-button {
+    .@{ui-class-prefix}-button {
         margin-right: 6px;
         height: @dialog-foot-button-height;
         line-height: @dialog-foot-button-height;
@@ -68,7 +68,7 @@
     }
 }
 
-.ui-dialog-mask-mixin {
+.@{ui-class-prefix}-dialog-mask-mixin {
     position: fixed;
     top: 0;
     left: 0;
@@ -86,21 +86,21 @@
 /** 警告框，确认框 */
 .skin-alert-dialog,
 .skin-confirm-dialog {
-    .ui-dialog-body {
+    .@{ui-class-prefix}-dialog-body {
         padding: 5px 40px;
     }
 
     // TODO: 无图标的提示框设计是besc中的，这里迁移到esui-flat-theme不知是否合适。
-    .ui-dialog-icon-warning, .ui-dialog-icon-confirm {
+    .@{ui-class-prefix}-dialog-icon-warning, .@{ui-class-prefix}-dialog-icon-confirm {
         display: none;
     }
 
-    .ui-dialog-cancel-btn {
+    .@{ui-class-prefix}-dialog-cancel-btn {
         width: 30px;
         .skin-link-button();
     }
 
-    .ui-dialog-text {
+    .@{ui-class-prefix}-dialog-text {
         margin-top: 0;
         line-height: 18px;
         margin-right: 0;
diff --git a/src/MonthView.less b/src/MonthView.less
index 2aefe4c..451ee0a 100644
--- a/src/MonthView.less
+++ b/src/MonthView.less
@@ -60,21 +60,21 @@
 @month-view-month-select-margin: 3px 6px 0;
 @MonthView-select-layer-background: #efefef;
 
-.ui-monthview-head {
+.@{ui-class-prefix}-monthview-head {
     height: 28px;
     table { width: auto; }
     background: @month-view-head-background;
 }
 
-.ui-monthview {
+.@{ui-class-prefix}-monthview {
     background: @month-view-background;
     border: @month-view-border;
     width: 7 * @month-view-month-item-width;
 
-    .ui-monthview-head {
+    .@{ui-class-prefix}-monthview-head {
         /** 先前向后按钮 */
-        .ui-monthview-month-back,
-        .ui-monthview-month-forward {
+        .@{ui-class-prefix}-monthview-month-back,
+        .@{ui-class-prefix}-monthview-month-forward {
             padding: 0;
             border: 0;
             margin-top: 0px;
@@ -89,7 +89,7 @@
             }
         }
 
-        .ui-monthview-month-back {
+        .@{ui-class-prefix}-monthview-month-back {
             .pseudo-icon(@month-view-back-button-background, @month-view-head-button-icon-width, @month-view-head-button-icon-height, center);
             &:active,
             &:hover {
@@ -97,7 +97,7 @@
             }
         }
 
-        .ui-monthview-month-forward {
+        .@{ui-class-prefix}-monthview-month-forward {
             margin-right: 5px;
             .pseudo-icon(@month-view-forward-button-background, @month-view-head-button-icon-width, @month-view-head-button-icon-height, center);
             &:active,
@@ -107,7 +107,7 @@
         }
 
         /** 年月下拉选框 */
-        .ui-select, .ui-select:hover, .ui-select:focus {
+        .@{ui-class-prefix}-select, .@{ui-class-prefix}-select:hover, .@{ui-class-prefix}-select:focus {
             background: @month-view-select-background;
             .pseudo-icon(@month-view-select-icon, @month-view-select-icon-width, @month-view-select-icon-height, right, 10px);
             height: @month-view-select-height;
@@ -118,21 +118,21 @@
             font-weight: normal;
         }
 
-        .ui-select-active, .ui-select-active:hover, .ui-select-active:focus {
+        .@{ui-class-prefix}-select-active, .@{ui-class-prefix}-select-active:hover, .@{ui-class-prefix}-select-active:focus {
             background: @month-view-select-background-active;
             .pseudo-icon(@month-view-select-icon-active, @month-view-select-icon-width, @month-view-select-icon-height, right, 10px);
         }
 
-        .ui-monthview-month-select,
-        .ui-monthview-month-select:hover,
-        .ui-monthview-month-select:focus  {
+        .@{ui-class-prefix}-monthview-month-select,
+        .@{ui-class-prefix}-monthview-month-select:hover,
+        .@{ui-class-prefix}-monthview-month-select:focus  {
             width: @month-view-month-select-width;
             margin: @month-view-month-select-margin;
         }
 
-        .ui-monthview-year-select,
-        .ui-monthview-year-select:hover,
-        .ui-monthview-year-select:focus {
+        .@{ui-class-prefix}-monthview-year-select,
+        .@{ui-class-prefix}-monthview-year-select:hover,
+        .@{ui-class-prefix}-monthview-year-select:focus {
             width: @month-view-year-select-width;
             margin: @month-view-year-select-margin;
         }
@@ -140,19 +140,19 @@
 }
 
 // 日历中各类弹层的样式
-.ui-monthview-year-select-layer,
-.ui-monthview-month-select-layer {
-    .ui-select-item {
+.@{ui-class-prefix}-monthview-year-select-layer,
+.@{ui-class-prefix}-monthview-month-select-layer {
+    .@{ui-class-prefix}-select-item {
         padding: 0 0 0 4px;
         text-align: left;
     }
 }
 
-.ui-monthview-month {
+.@{ui-class-prefix}-monthview-month {
     border: @month-view-month-border;
 }
 
-.ui-monthview-month-title {
+.@{ui-class-prefix}-monthview-month-title {
     background: @month-view-month-title-background;
     color: @month-view-month-title-color;
     width: @month-view-month-item-width;
@@ -160,11 +160,11 @@
     line-height: @month-view-month-item-height;
 }
 
-.ui-monthview-month-title-selected {
+.@{ui-class-prefix}-monthview-month-title-selected {
     background: @month-view-month-title-background-selected;
 }
 
-.ui-monthview-month-item {
+.@{ui-class-prefix}-monthview-month-item {
     width: @month-view-month-item-width;
     height: @month-view-month-item-height;
     line-height: @month-view-month-item-height;
@@ -172,21 +172,21 @@
     border-bottom: @month-view-month-item-border;
 }
 
-.ui-monthview-month-item:hover {
+.@{ui-class-prefix}-monthview-month-item:hover {
     background: @month-view-month-item-background-hover;
 }
 
-.ui-monthview-month-item-today {
+.@{ui-class-prefix}-monthview-month-item-today {
     font-weight: bold;
 }
 
-.ui-monthview-month-item-selected {
+.@{ui-class-prefix}-monthview-month-item-selected {
     background: @month-view-month-item-background-selected;
     color: @month-view-month-item-color-selected;
 }
 
-.ui-monthview-month-item-virtual,
-.ui-monthview-month-item-out {
+.@{ui-class-prefix}-monthview-month-item-virtual,
+.@{ui-class-prefix}-monthview-month-item-out {
     color: @month-view-month-item-color-virtual;
     background: @month-view-month-item-background-virtual;
     &:hover {
@@ -194,7 +194,7 @@
     }
 }
 
-.ui-monthview-month-item-disabled {
+.@{ui-class-prefix}-monthview-month-item-disabled {
     background: @month-view-month-item-background-disabled;
     color: @month-view-month-item-color-disabled;
     &:hover {
@@ -203,35 +203,35 @@
 }
 
 // 多选模式
-.ui-monthview-multi-select {
-    .ui-monthview-month-select-all {
+.@{ui-class-prefix}-monthview-multi-select {
+    .@{ui-class-prefix}-monthview-month-select-all {
         background: @month-view-month-row-select-background;
         &:hover {
             background: @month-view-month-row-select-background;
         }
     }
 
-    .ui-monthview-month-select-all-selected {
+    .@{ui-class-prefix}-monthview-month-select-all-selected {
         background: @month-view-month-row-select-background-selected;
     }
 
-    .ui-monthview-month-row-select {
+    .@{ui-class-prefix}-monthview-month-row-select {
         background: @month-view-month-row-select-background;
         border-bottom: @month-view-month-item-border;
     }
-    .ui-monthview-month-row-select-selected {
+    .@{ui-class-prefix}-monthview-month-row-select-selected {
         background: @month-view-month-row-select-background-selected;
     }
 }
 
-.ui-monthview-disabled {
-    .ui-monthview-month-forward:hover,
-    .ui-monthview-month-forward:active {
+.@{ui-class-prefix}-monthview-disabled {
+    .@{ui-class-prefix}-monthview-month-forward:hover,
+    .@{ui-class-prefix}-monthview-month-forward:active {
         background: @month-view-forward-button-background-disabled;
     }
 
-    .ui-monthview-month-back:active,
-    .ui-monthview-month-back:hover {
+    .@{ui-class-prefix}-monthview-month-back:active,
+    .@{ui-class-prefix}-monthview-month-back:hover {
         background: @month-view-back-button-background-disabled;
     }
 }
\ No newline at end of file
diff --git a/src/Pager.less b/src/Pager.less
index 9518c8d..abacd58 100644
--- a/src/Pager.less
+++ b/src/Pager.less
@@ -13,9 +13,9 @@
 @pager-item-current-background: #cacaca;
 @pager-item-current-color: #fff;
 
-.ui-pager  {
+.@{ui-class-prefix}-pager  {
     margin: @pager-margin;
-    .ui-select {
+    .@{ui-class-prefix}-select {
         border: none;
         width: 70px;
         height: @pager-height;
@@ -25,43 +25,43 @@
     }    
 }
 
-.ui-pager-label {
+.@{ui-class-prefix}-pager-label {
     color: @pager-color;
     vertical-align: top;
     line-height: @pager-height;
 }
 
-.ui-pager-main li {
+.@{ui-class-prefix}-pager-main li {
     color: @pager-color;
     font-weight: bold;
 }
 
-.ui-pager-main a {
+.@{ui-class-prefix}-pager-main a {
     color: @pager-color;
 }
 
-.ui-pager-main .ui-pager-item-current {
+.@{ui-class-prefix}-pager-main .@{ui-class-prefix}-pager-item-current {
     background: @pager-item-current-background;
     color: @pager-item-current-color;
 }
 
-.ui-pager-item, .ui-pager-item-extend {
+.@{ui-class-prefix}-pager-item, .@{ui-class-prefix}-pager-item-extend {
     height: @pager-item-height;
     line-height: @pager-item-height;
     background: @pager-item-background;
     border: @pager-item-border;
 }
 
-.ui-pager-item {
+.@{ui-class-prefix}-pager-item {
     width: @pager-item-width;
     color: @pager-color;
 }
 
-.ui-pager-item a {
+.@{ui-class-prefix}-pager-item a {
     width: @pager-item-width;
 }
 
-.ui-pager-item-current, .ui-pager-item-omit {
+.@{ui-class-prefix}-pager-item-current, .@{ui-class-prefix}-pager-item-omit {
     width: @pager-item-width;
     height: @pager-item-height;
     line-height: @pager-item-height;
diff --git a/src/RangeCalendar.less b/src/RangeCalendar.less
index 6f840ad..437d6ff 100644
--- a/src/RangeCalendar.less
+++ b/src/RangeCalendar.less
@@ -29,7 +29,7 @@
 @range-calendar-link-text-color: #66c4a5;
 @range-calendar-link-text-color-hover: #74dcce;
 
-.ui-rangecalendar {
+.@{ui-class-prefix}-rangecalendar {
     background: @range-calendar-main-background;
     border: @range-calendar-main-border;
     .border-radius(@range-calendar-main-border-radius);
@@ -39,16 +39,16 @@
     font-size: @range-calendar-main-font-size;
 }
 
-.ui-rangecalendar-text {
+.@{ui-class-prefix}-rangecalendar-text {
     color: @range-calendar-main-font-color;
 }
 
-.ui-rangecalendar:hover,
-.ui-rangecalendar:active {
+.@{ui-class-prefix}-rangecalendar:hover,
+.@{ui-class-prefix}-rangecalendar:active {
     border-color: @range-calendar-main-hover-border-color;
 }
 
-.ui-rangecalendar-arrow {
+.@{ui-class-prefix}-rangecalendar-arrow {
     background: none;
     .pseudo-icon(@range-calendar-arrow-icon, @range-calendar-arrow-icon-width, @range-calendar-arrow-icon-height, center);
     height: @range-calendar-main-height;
@@ -56,14 +56,14 @@
     margin: 0;
 }
 
-.ui-rangecalendar-active {
-    .ui-rangecalendar-arrow {
+.@{ui-class-prefix}-rangecalendar-active {
+    .@{ui-class-prefix}-rangecalendar-arrow {
         background: none;
         .pseudo-icon(@range-calendar-arrow-icon-active, @range-calendar-arrow-icon-width, @range-calendar-arrow-icon-height, center);
     }
 }
 
-.ui-rangecalendar-layer {
+.@{ui-class-prefix}-rangecalendar-layer {
     background: @range-calendar-layer-background;
     border-top: @range-calendar-layer-border-top;
     border-bottom: @range-calendar-layer-border-bottom;
@@ -71,18 +71,18 @@
     border-right: @range-calendar-layer-border-right;
     padding: @range-calendar-layer-padding;
     width: auto;
-    &.ui-layer-bl {
+    &.@{ui-class-prefix}-layer-bl {
         .top-pointer(@range-calendar-layer-border-top-color, 60px, 0);
         position: absolute;
     }
 
-    &.ui-layer-br {
+    &.@{ui-class-prefix}-layer-br {
         .top-pointer(@range-calendar-layer-border-top-color, 0, 60px);
         position: absolute;
     }
 
 
-    .ui-rangecalendar-shortcut-item {
+    .@{ui-class-prefix}-rangecalendar-shortcut-item {
         border-left: 1px solid @range-calendar-shortcut-item-color;
         color: @range-calendar-shortcut-item-color;
         text-decoration: none;
@@ -93,7 +93,7 @@
         }
     }
 
-    .ui-rangecalendar-shortcut-item-selected {
+    .@{ui-class-prefix}-rangecalendar-shortcut-item-selected {
         font-weight: bold;
         color: #666;
         &:hover {
@@ -101,25 +101,25 @@
         }
     }
 
-    .ui-rangecalendar-body {
+    .@{ui-class-prefix}-rangecalendar-body {
         .clearfix();
 
-        .ui-rangecalendar-label {
+        .@{ui-class-prefix}-rangecalendar-label {
             padding: 12px 0 7px;
         }
 
-        .ui-rangecalendar-begin, .ui-rangecalendar-end {
+        .@{ui-class-prefix}-rangecalendar-begin, .@{ui-class-prefix}-rangecalendar-end {
             width: auto;
-            .ui-monthview-month-item-highlight {
+            .@{ui-class-prefix}-monthview-month-item-highlight {
                 background: @range-calendar-month-item-color-highlight;
             }
-            .ui-monthview-month-item:hover {
+            .@{ui-class-prefix}-monthview-month-item:hover {
                 background: @month-view-month-item-background-hover;
             }
  
         }
 
-        .ui-rangecalendar-begin {
+        .@{ui-class-prefix}-rangecalendar-begin {
             margin-right: 12px;
         }
     }
@@ -132,9 +132,9 @@
         padding: 0;
     }
 
-    .ui-rangecalendar-foot{
+    .@{ui-class-prefix}-rangecalendar-foot{
         padding-top: 13px;
-        .ui-button {
+        .@{ui-class-prefix}-button {
             margin-right: 5px;
             height: 29px;
             line-height: 29px;
@@ -144,11 +144,11 @@
             width: 79px;
         }
 
-        .ui-rangecalendar-okBtn {
+        .@{ui-class-prefix}-rangecalendar-okBtn {
             font-weight: bold;
         }
 
-        .ui-rangecalendar-cancelBtn {
+        .@{ui-class-prefix}-rangecalendar-cancelBtn {
             background: none;
             color: @range-calendar-link-text-color;
             border: none;
diff --git a/src/Region.less b/src/Region.less
index 6716754..c7d9a25 100644
--- a/src/Region.less
+++ b/src/Region.less
@@ -23,7 +23,7 @@
 @region-select-info-tip-background: #3F8FE1;
 @region-select-info-tip-color: #FFF;
 
-.ui-region {
+.@{ui-class-prefix}-region {
     text-align: left;
     margin: 0;
     padding: 0;
@@ -49,13 +49,13 @@
         display: inline;
     }
 
-    .ui-region-country-box {
+    .@{ui-class-prefix}-region-country-box {
         overflow: hidden;
         zoom: 1;
         border-bottom: @region-country-row-border-bottom;
     }
 
-    .ui-region-country-check {
+    .@{ui-class-prefix}-region-country-check {
         width: 600px;
         height: 14px;
         padding: 8px 0 8px 10px;
@@ -63,7 +63,7 @@
         border-top: none;
     }
 
-    .ui-region-region-box0 {
+    .@{ui-class-prefix}-region-region-box0 {
         width: 610px;
         border-top: @region-region-row-border-odd;
         background: @region-region-row-background-odd;
@@ -71,7 +71,7 @@
         .clear-float();
     }
 
-    .ui-region-region-box1 {
+    .@{ui-class-prefix}-region-region-box1 {
         width: 610px;
         clear: both;
         background: @region-region-row-background-even;;
@@ -79,28 +79,28 @@
         .clear-float();
     }
 
-    .ui-region-region-check {
+    .@{ui-class-prefix}-region-region-check {
         width: 90px;
         padding: 6px 0 6px 10px;
         float: left;
 
     }
 
-    .ui-region-province-box {
+    .@{ui-class-prefix}-region-province-box {
         width: 510px;
         float: left;
     }
-    .ui-region-province-item {
+    .@{ui-class-prefix}-region-province-item {
         width: 100px;
         float: left;
 
-        .ui-region-locator {
+        .@{ui-class-prefix}-region-locator {
             float: right;
             width: 35px;
             height: 14px;
         }
 
-        .ui-region-city-box {
+        .@{ui-class-prefix}-region-city-box {
             position: absolute;
             padding: 3px 0;
             margin: -1px;
@@ -109,14 +109,14 @@
             z-index: 998;
             _height: 26px;
 
-            .ui-region-city {
+            .@{ui-class-prefix}-region-city {
                 height:18px;
                 float: left;
                 padding: 3px 8px;
             }
         }
 
-        .ui-region-city-box-over {
+        .@{ui-class-prefix}-region-city-box-over {
             border-right: none;
             background-color: @region-city-box-background-hover;
             border: @region-city-box-border-hover;
@@ -138,7 +138,7 @@
             border-radius: 3px;
         }
 
-        .ui-region-text {
+        .@{ui-class-prefix}-region-text {
             position: relative;
             zoom: 1;
             width: 58px;
@@ -147,7 +147,7 @@
             float: right;
         }
 
-        .ui-region-text-over {
+        .@{ui-class-prefix}-region-text-over {
             border: solid 1px #97A5B2;
             border-right:none;
             background-color:#FFF;
@@ -157,7 +157,7 @@
     }
 }
 
-.ui-region-single {
+.@{ui-class-prefix}-region-single {
     margin:0;
     padding:0;
     width: auto;
@@ -165,8 +165,8 @@
     border: none;
 }
 
-.ui-region-disabled,
-.ui-region-read-only {
+.@{ui-class-prefix}-region-disabled,
+.@{ui-class-prefix}-region-read-only {
     color: #999;
     border-color: @region-border-color-disabled;
 }
\ No newline at end of file
diff --git a/src/Schedule.less b/src/Schedule.less
index 29913dd..c02c920 100644
--- a/src/Schedule.less
+++ b/src/Schedule.less
@@ -18,43 +18,43 @@
 @schedule-follow-item-border: 1px dotted #cc0000;
 @schedule-follow-item-background: #dcfacf;
 
-.ui-schedule {
+.@{ui-class-prefix}-schedule {
     background: @schedule-background;
     border: @schedule-border;
 }
 
-.ui-schedule-shortcut-item {
+.@{ui-class-prefix}-schedule-shortcut-item {
     color: @schedule-shortcut-item-color;
     border: @schedule-shortcut-item-border;
     border-radius: @schedule-shortcut-item-border-radius;
 }
 
-.ui-schedule-shortcut-item-hover,
-.ui-schedule-shortcut-item-press {
+.@{ui-class-prefix}-schedule-shortcut-item-hover,
+.@{ui-class-prefix}-schedule-shortcut-item-press {
     border: @schedule-shortcut-item-border-hover;
 }
 
-.ui-schedule-shortcut-text-item {
+.@{ui-class-prefix}-schedule-shortcut-text-item {
     color: @schedule-shortcut-item-color;
 }
 
-.ui-schedule-time,
-.ui-schedule-help-selected,
-.ui-schedule-help-unselected {
+.@{ui-class-prefix}-schedule-time,
+.@{ui-class-prefix}-schedule-help-selected,
+.@{ui-class-prefix}-schedule-help-unselected {
     border: @schedule-item-border;
     background: @schedule-help-background-color-unselected;
 }
 
-.ui-schedule-time-selected,
-.ui-schedule-help-selected {
+.@{ui-class-prefix}-schedule-time-selected,
+.@{ui-class-prefix}-schedule-help-selected {
     background: @schedule-help-background-color-selected;
 }
 
-.ui-schedule-time-hover {
+.@{ui-class-prefix}-schedule-time-hover {
     border: @schedule-TimeHoverborder;
     background: @schedule-TimeHoverbackgroundColor;
 }
 
-.ui-schedule-follow-item {
+.@{ui-class-prefix}-schedule-follow-item {
     border: @schedule-follow-item-border;
 }
\ No newline at end of file
diff --git a/src/SearchBox.less b/src/SearchBox.less
index 718f5b8..da58b6d 100644
--- a/src/SearchBox.less
+++ b/src/SearchBox.less
@@ -58,8 +58,8 @@
         center, 0, center, 0, absolute);
 }
 
-.ui-searchbox {
-    .ui-textbox {
+.@{ui-class-prefix}-searchbox {
+    .@{ui-class-prefix}-textbox {
         input {
             float: left;
             // 实际高度是：视觉高度 - 上下padding - 上下border
@@ -78,7 +78,7 @@
         }
     }
 
-    .ui-button {
+    .@{ui-class-prefix}-button {
         width: @search-box-search-icon-width;
         height: @search-box-search-icon-height;
         top: 0;
@@ -96,21 +96,21 @@
         }
     }
 
-    .ui-button-disabled {
+    .@{ui-class-prefix}-button-disabled {
         &:active {
             .active-search-icon();
         }
     }
 }
 
-.ui-searchbox-focus {
-    .ui-button {
+.@{ui-class-prefix}-searchbox-focus {
+    .@{ui-class-prefix}-button {
         .active-search-icon();
     }
 }
 
-.ui-searchbox-clear {
-    .ui-button {
+.@{ui-class-prefix}-searchbox-clear {
+    .@{ui-class-prefix}-button {
         .clear-search-icon();
         &:hover {
             .hover-clear-search-icon();
diff --git a/src/Select.less b/src/Select.less
index eb3d414..e89c140 100644
--- a/src/Select.less
+++ b/src/Select.less
@@ -29,7 +29,7 @@
 @select-item-background-hover: #f1f1f1;
 @select-item-background-selected: #fffaee;
 
-.ui-select {
+.@{ui-class-prefix}-select {
     background: @select-background-color;
     border: @select-border;
     border-radius: 0;
@@ -44,27 +44,27 @@
     .pseudo-icon(@select-layer-state-indicator, @select-layer-state-indicator-width, @select-layer-state-indicator-height, right, @select-padding-left);
 }
 
-.ui-select:focus,
-.ui-select:hover {
+.@{ui-class-prefix}-select:focus,
+.@{ui-class-prefix}-select:hover {
     background: @select-background-color-hover;
     .pseudo-icon(@select-layer-state-indicator-hover, @select-layer-state-indicator-width, @select-layer-state-indicator-height, right, @select-padding-left);
 }
 
-.ui-select-active,
-.ui-select-active:hover,
-.ui-select-active:focus {
+.@{ui-class-prefix}-select-active,
+.@{ui-class-prefix}-select-active:hover,
+.@{ui-class-prefix}-select-active:focus {
     background: @select-background-color-active;
     .pseudo-icon(@select-layer-state-indicator-active, @select-layer-state-indicator-width, @select-layer-state-indicator-height, right, @select-padding-left);
 }
 
-.ui-select-layer {
+.@{ui-class-prefix}-select-layer {
     width: @select-width;
     border: @select-border;
     border-top: @select-layer-split-border;
     background: @select-layer-background;
 }
 
-.ui-select-item {
+.@{ui-class-prefix}-select-item {
     color: @select-item-color;
     line-height: @select-item-height;
     margin: 0;
@@ -72,20 +72,20 @@
     text-align: center;
 }
 
-.ui-select-item-selected {
+.@{ui-class-prefix}-select-item-selected {
     background: @select-item-background-selected;
     border: none;
     padding: 0 3px;
 }
 
-.ui-select-item:hover {
+.@{ui-class-prefix}-select-item:hover {
     background: @select-item-background-hover;
 }
 
-.ui-select-disabled,
-.ui-select-read-only,
-.ui-select-disabled:hover,
-.ui-select-read-only:hover {
+.@{ui-class-prefix}-select-disabled,
+.@{ui-class-prefix}-select-read-only,
+.@{ui-class-prefix}-select-disabled:hover,
+.@{ui-class-prefix}-select-read-only:hover {
     color: #999;
     background: @select-background-color-disabled;
     .pseudo-icon(@select-layer-state-indicator-disabled, @select-layer-state-indicator-width, @select-layer-state-indicator-height, right, @select-padding-left);
diff --git a/src/Sidebar.less b/src/Sidebar.less
index d0c50bc..9eb4166 100644
--- a/src/Sidebar.less
+++ b/src/Sidebar.less
@@ -43,7 +43,7 @@
 @sidebar-head-border-radius-right-bottom: 0;
 @sidebar-head-border-radius-bottom-left:0;
 
-.ui-sidebar {
+.@{ui-class-prefix}-sidebar {
     position: fixed;
     _position: absolute;
     z-index: 100;
@@ -54,15 +54,15 @@
     border: @sidebar-border;
 }
 
-.ui-sidebar-neighbor {  
+.@{ui-class-prefix}-sidebar-neighbor {  
     margin-left: @sidebar-neighbor-margin-left;
 }
 
-.ui-sidebar-neighbor-hide {
+.@{ui-class-prefix}-sidebar-neighbor-hide {
     margin-left: @sidebar-neighbor-margin-left-hide;
 }
 
-.ui-sidebar-mat {
+.@{ui-class-prefix}-sidebar-mat {
     position: fixed;
     _display: none;
     z-index: 50;
@@ -72,7 +72,7 @@
     border-right: @sidebar-mat-border;
 }
 
-.ui-sidebar-minibar {
+.@{ui-class-prefix}-sidebar-minibar {
     position: fixed;
     _position: absolute;
     _padding-bottom: 10px;
@@ -90,12 +90,12 @@
     width: @sidebar-minibar-width;
 }
 
-.ui-sidebar-minibar-text {
+.@{ui-class-prefix}-sidebar-minibar-text {
     padding: @sidebar-minibar-padding;
     width: @sidebar-minibar-text-width;
 } 
 
-.ui-sidebar-minibar-arrow {
+.@{ui-class-prefix}-sidebar-minibar-arrow {
     font-size: 0;
     position: absolute;
     bottom: 50%;
@@ -104,15 +104,15 @@
     .normal-icon(@sidebar-minibar-arrow, @sidebar-minibar-arrow-width, @sidebar-minibar-arrow-height);
 }
 
-.ui-sidebar-minibar-hover .ui-sidebar-minibar-arrow {
+.@{ui-class-prefix}-sidebar-minibar-hover .@{ui-class-prefix}-sidebar-minibar-arrow {
     .normal-icon(@sidebar-minibar-arrow-hover, @sidebar-minibar-arrow-width, @sidebar-minibar-arrow-height);
 }
 
-.ui-sidebar-minibar-hover .ui-sidebar-minibar-text {
+.@{ui-class-prefix}-sidebar-minibar-hover .@{ui-class-prefix}-sidebar-minibar-text {
     color: @sidebar-minibar-text-color-hover;
 }
 
-.ui-sidebar-head {
+.@{ui-class-prefix}-sidebar-head {
     border-bottom: @sidebar-head-border-bottom;
     background: @sidebar-head-background;
     line-height: @sidebar-head-height;
@@ -126,7 +126,7 @@
     );
 }
 
-.ui-sidebar-body {
+.@{ui-class-prefix}-sidebar-body {
     position: absolute;
     _position: static;
     overflow-x: hidden;
diff --git a/src/Table.less b/src/Table.less
index 06db61d..634710a 100644
--- a/src/Table.less
+++ b/src/Table.less
@@ -74,7 +74,7 @@
 @table-subentry-icon-img-height-opened-hover: 5px;
 @table-subentry-icon-opened-hover: url(./img/esui-close-icon.png);
 
-.ui-table-head {
+.@{ui-class-prefix}-table-head {
     background: @table-head-background-color;
 
     table {
@@ -86,7 +86,7 @@
 }
 
 /* 表头单元格 */
-.ui-table-hcell {
+.@{ui-class-prefix}-table-hcell {
     font-weight: @table-head-font-weight;
     color: @table-head-font-color;
     border-left-color: @table-hcell-border-color;
@@ -96,40 +96,40 @@
 }
 
 /* 表头单元格DIV容器 */
-.ui-table-hcell-text {
+.@{ui-class-prefix}-table-hcell-text {
     height: Table-hcell-text-height;
     line-height: Table-hcell-text-height;
     padding: Table-hcell-text-padding;
 }
 
 /* 表头单元格提示 */
-.ui-table-htip{
+.@{ui-class-prefix}-table-htip{
     margin: @table-hcell-tip-margin;
 }
 
 /* 表头单元格排序标识 */
-.ui-table-hsort {
+.@{ui-class-prefix}-table-hsort {
     // background: @table-sort-icon-background;
     margin: @table-sort-icon-margin;
     height: @table-sort-icon-height;
     width: @table-sort-icon-width;
 }
 
-.ui-table-hcell-asc .ui-table-hsort {
+.@{ui-class-prefix}-table-hcell-asc .@{ui-class-prefix}-table-hsort {
     // background: @table-sort-icon-asc-background;
 }
 
-.ui-table-hcell-desc .ui-table-hsort {
+.@{ui-class-prefix}-table-hcell-desc .@{ui-class-prefix}-table-hsort {
     //background: @table-sort-icon-desc-background;
 }
 
 
 /* 可排序列的表头样式Hover */
-.ui-table-hcell-sort-hover {
+.@{ui-class-prefix}-table-hcell-sort-hover {
     background: @table-hcell-sort-hover-background;
 }
 
-.ui-table-body {
+.@{ui-class-prefix}-table-body {
     background: @table-body-background;
     border-bottom: 1px solid @table-body-border-color;
     table {
@@ -137,103 +137,103 @@
     }
 }
 
-.ui-table-body-nodata {
+.@{ui-class-prefix}-table-body-nodata {
     border: 1px solid @table-body-border-color;
     border-width: 0 1px;
 }
 
-.ui-table-row {
+.@{ui-class-prefix}-table-row {
     background: @table-row-background;
     border-bottom: 1px solid @table-row-border-color;
 }
 
 /* 行表格移上 */
-.ui-table-row-hover {
+.@{ui-class-prefix}-table-row-hover {
     background: @table-row-background-hover;
 }
 
 /* 扩展-可编辑单元
-.ui-table-row-hover .ui-table-cell-editable {
+.@{ui-class-prefix}-table-row-hover .@{ui-class-prefix}-table-cell-editable {
     border: @table-row-hover-editable-cell-border;
     margin: @table-row-hover-editable-cell-margin;
     padding: @table-row-hover-editable-cell-padding;
     background: @table-row-hover-editable-cell-background;
 }
-.ui-table-editor {
+.@{ui-class-prefix}-table-editor {
     background: @table-editor-background;
     border-color: @table-editor-border-color;
     padding: @table-editor-padding;
     width: @table-editor-width;
 }
-.ui-table-editor-opt {
+.@{ui-class-prefix}-table-editor-opt {
     margin-bottom: @table-editor-opt-margin-bottom;
 }
-.ui-table-editor-error {
+.@{ui-class-prefix}-table-editor-error {
     margin-bottom: @table-editor-error-margin-bottom;
 }
-.ui-table-editor .ui-button{
+.@{ui-class-prefix}-table-editor .@{ui-class-prefix}-button{
     margin-left: @table-editor-button-margin-left;
 }
 
 */
 
 /* 行表格选中 */
-.ui-table-row-selected table {
+.@{ui-class-prefix}-table-row-selected table {
     background: @table-row-background-selected;
 }
 
 /* 行表格展开 */
-.ui-table-row-unfolded {
+.@{ui-class-prefix}-table-row-unfolded {
     background: @table-row-background-unfolded;
 }
 
 /* 拖拽显示的竖线 */
-.ui-table-mark {
+.@{ui-class-prefix}-table-mark {
     height: @table-mark-height;
     background: @table-mark-background;
 }
 
 
 /* 表格内容单元格 */
-.ui-table-cell {
+.@{ui-class-prefix}-table-cell {
     border-color: @table-cell-border-color;
     &:first-child {
         border-color: @table-body-border-color;
     }
 }
 
-.ui-table-row-hover .ui-table-cell {
+.@{ui-class-prefix}-table-row-hover .@{ui-class-prefix}-table-cell {
     border-color: @table-cell-border-color-hover;
 }
 
 /* 表格内容单元格容器 */
-.ui-table-cell-text,
-.ui-table-body-nodata {
+.@{ui-class-prefix}-table-cell-text,
+.@{ui-class-prefix}-table-body-nodata {
   line-height: @table-cell-height;
   height: @table-cell-height;
   padding: @table-cell-padding;
 }
 
-.ui-table-cell-text-first,.ui-table-hcell-text-first {
+.@{ui-class-prefix}-table-cell-text-first,.@{ui-class-prefix}-table-hcell-text-first {
     padding-left: @table-cell-head-padding;
 }
-.ui-table-cell-text-last,.ui-table-hcell-text-last {
+.@{ui-class-prefix}-table-cell-text-last,.@{ui-class-prefix}-table-hcell-text-last {
     padding-right: @table-cell-tail-padding;
 }
 
-.ui-table-cell-sel,
-.ui-table-hcell-sel {
+.@{ui-class-prefix}-table-cell-sel,
+.@{ui-class-prefix}-table-hcell-sel {
   padding: @table-cell-sel-padding;
   *padding: @table-cell-sel-padding-IE;
   height: @table-cell-height;
   line-height: @table-cell-height;
 }
 
-.ui-table-scroll-x {
+.@{ui-class-prefix}-table-scroll-x {
     height: @table-scrollX-height;
 }
 
-//.ui-table-cell-editentry {
+//.@{ui-class-prefix}-table-cell-editentry {
 //    width: @table-cell-edit-entry-width;
 //    height: @table-cell-edit-entry-height;
 //    top: @table-cell-edit-entry-top;
@@ -242,14 +242,14 @@
 //}
 
 
-//.ui-table-cell-align-right .ui-table-cell-editentry {
+//.@{ui-class-prefix}-table-cell-align-right .@{ui-class-prefix}-table-cell-editentry {
 //    left: @table-cell-align-right-edit-entry-left;
 //}
 
 /* 子表格收起展开按钮 */
-.ui-table-subentry,
-.ui-table-subentry-opened,
-.ui-table-subentry-opened-hover {
+.@{ui-class-prefix}-table-subentry,
+.@{ui-class-prefix}-table-subentry-opened,
+.@{ui-class-prefix}-table-subentry-opened-hover {
     width: @table-subentry-icon-width;
     height: @table-subentry-icon-height;
     border: none;
@@ -257,30 +257,30 @@
     background: none;
 }
 
-.ui-table-subentry {
+.@{ui-class-prefix}-table-subentry {
     .pseudo-icon(@table-subentry-icon, @table-subentry-icon-img-width, @table-subentry-icon-img-height, center);
 }
 
-.ui-table-subentry-opened {
+.@{ui-class-prefix}-table-subentry-opened {
     .pseudo-icon(@table-subentry-icon-open, @table-subentry-icon-img-width-open, @table-subentry-icon-img-height-open, center);
 }
 
 
-.ui-table-subentry-hover {
+.@{ui-class-prefix}-table-subentry-hover {
     .pseudo-icon(@table-subentry-icon-hover, @table-subentry-icon-img-width-hover, @table-subentry-icon-img-height-hover, center);
 }
-.ui-table-subentry-opened-hover {
+.@{ui-class-prefix}-table-subentry-opened-hover {
     .pseudo-icon(@table-subentry-icon-opened-hover, @table-subentry-icon-img-width-opened-hover, @table-subentry-icon-img-height-opened-hover, center);
 }
 
-.ui-table-subrow {
+.@{ui-class-prefix}-table-subrow {
     background: @table-subrow-background;
     border-color: @table-subrow-border-color;
     padding: @table-subrow-padding;
 }
 
 
-.ui-table-foot {
+.@{ui-class-prefix}-table-foot {
     background: @table-foot-background;
     table {
         border-color: @table-foot-border-color;
@@ -289,7 +289,7 @@
 
 
 /* 表尾单元格 */
-.ui-table-fcell {
+.@{ui-class-prefix}-table-fcell {
     border-color: @table-footcell-border-color;
     &:first-child {
         border-color: @table-foot-border-color;
diff --git a/src/TextBox.less b/src/TextBox.less
index 910b18c..7f71148 100644
--- a/src/TextBox.less
+++ b/src/TextBox.less
@@ -10,7 +10,7 @@
 //Hint
 @text-box-hint-background: #f7f7f7;
 @text-box-hint-border: @text-box-border;
-.ui-textbox {
+.@{ui-class-prefix}-textbox {
     input, textarea {
         color: @text-box-color;
         background: @text-box-background;
@@ -24,20 +24,20 @@
     }
 }
 
-.ui-textbox-hint {
+.@{ui-class-prefix}-textbox-hint {
     background: @text-box-hint-background;
     border: @text-box-hint-border;
     height: @text-box-input-height;
     line-height: @text-box-input-height;
 }
 
-.ui-textbox-placeholder {
+.@{ui-class-prefix}-textbox-placeholder {
     height: @text-box-input-height;
     line-height:  @text-box-input-height;
 }
 
-.ui-textbox-disabled,
-.ui-textbox-read-only {
+.@{ui-class-prefix}-textbox-disabled,
+.@{ui-class-prefix}-textbox-read-only {
     input, textarea {
         border: @text-box-border;
         background: #f6f6f6;
diff --git a/src/TextLine.less b/src/TextLine.less
index 753fd72..585077f 100644
--- a/src/TextLine.less
+++ b/src/TextLine.less
@@ -8,7 +8,7 @@
 
 @text-line-textarea-background: #fff;
 
-.ui-textline {
+.@{ui-class-prefix}-textline {
     background: @text-line-num-line-background;
     border: @text-line-border;
     &:hover {
@@ -16,7 +16,7 @@
     }
 }
 
-.ui-textline-num-line {
+.@{ui-class-prefix}-textline-num-line {
     background: @text-line-num-line-background;
     color: @text-line-num-line-color;
     width: @text-line-num-line-width;
@@ -24,7 +24,7 @@
     font-size: @text-line-num-line-font-size;
 }
 
-.ui-textline-text-container {
+.@{ui-class-prefix}-textline-text-container {
     left: @text-line-num-line-width;
     textarea {
         position: absolute;
diff --git a/src/Tip.less b/src/Tip.less
index 0caef78..0b5df21 100644
--- a/src/Tip.less
+++ b/src/Tip.less
@@ -2,7 +2,7 @@
 @tip-icon-width: 15px;
 @tip-icon-height: 16px;
 
-.ui-tip {
+.@{ui-class-prefix}-tip {
     font-size: 1px;
     overflow: hidden;
     .inline-block ();
diff --git a/src/TipLayer.less b/src/TipLayer.less
index 6baae7b..9e3d489 100644
--- a/src/TipLayer.less
+++ b/src/TipLayer.less
@@ -39,30 +39,30 @@
 @tip-layer-body-font-size: 12px;
 @tip-layer-body-line-height: 18px;
 
-.ui-tiplayer {
+.@{ui-class-prefix}-tiplayer {
     background: @tip-layer-background;
     border: @tip-layer-border;
     padding: @tip-layer-padding;
     color: @tip-layer-font-color;
 }
 
-.ui-tiplayer-rt,
-.ui-tiplayer-rb {
+.@{ui-class-prefix}-tiplayer-rt,
+.@{ui-class-prefix}-tiplayer-rb {
     margin-left: -1*@tip-layer-arrow-width-lr;
 }
 
-.ui-tiplayer-lt,
-.ui-tiplayer-lb {
+.@{ui-class-prefix}-tiplayer-lt,
+.@{ui-class-prefix}-tiplayer-lb {
     margin-left: @tip-layer-arrow-width-lr;
 }
 
-.ui-tiplayer-title {
+.@{ui-class-prefix}-tiplayer-title {
     padding: @tip-layer-title-padding;
     margin: @tip-layer-title-margin;
     font-size: @tip-layer-title-font-size;
     line-height: @tip-layer-title-line-height;
 }
-.ui-tiplayer-body {
+.@{ui-class-prefix}-tiplayer-body {
     padding: @tip-layer-body-padding;
     margin: @tip-layer-body-margin;
     @tip-layer-body-font-size: 12px;
@@ -70,13 +70,13 @@
     line-height: @tip-layer-body-line-height;
 }
 
-.ui-tiplayer-arrow {
+.@{ui-class-prefix}-tiplayer-arrow {
     display: none;
     position: absolute;
     font-size: 1px;
 }
 
-.ui-tiplayer-arrow-tl {
+.@{ui-class-prefix}-tiplayer-arrow-tl {
     display: block;
     .normal-icon(
         @tip-layer-arrow-icon-tl, @tip-layer-arrow-width-tb, @tip-layer-arrow-height-tb
@@ -85,7 +85,7 @@
     left: @tip-layer-arrow-left-tb;
 }
 
-.ui-tiplayer-arrow-tr {
+.@{ui-class-prefix}-tiplayer-arrow-tr {
     display: block;
     .normal-icon(
         @tip-layer-arrow-icon-tr, @tip-layer-arrow-width-tb, @tip-layer-arrow-height-tb
@@ -94,7 +94,7 @@
     right: @tip-layer-arrow-right-tb;
 }
 
-.ui-tiplayer-arrow-bl {
+.@{ui-class-prefix}-tiplayer-arrow-bl {
     display: block;
     .normal-icon(
         @tip-layer-arrow-icon-bl, @tip-layer-arrow-width-tb, @tip-layer-arrow-height-tb
@@ -103,7 +103,7 @@
     left: @tip-layer-arrow-left-tb;
 }
 
-.ui-tiplayer-arrow-br {
+.@{ui-class-prefix}-tiplayer-arrow-br {
     display: block;
     .normal-icon(
         @tip-layer-arrow-icon-br, @tip-layer-arrow-width-tb, @tip-layer-arrow-height-tb
@@ -112,7 +112,7 @@
     right: @tip-layer-arrow-right-tb;
 }
 
-.ui-tiplayer-arrow-lt {
+.@{ui-class-prefix}-tiplayer-arrow-lt {
     display: block;
     .normal-icon(
         @tip-layer-arrow-icon-lt, @tip-layer-arrow-width-lr, @tip-layer-arrow-height-lr
@@ -121,7 +121,7 @@
     left: -1*@tip-layer-arrow-width-lr;
 }
 
-.ui-tiplayer-arrow-lb {
+.@{ui-class-prefix}-tiplayer-arrow-lb {
     display: block;
     .normal-icon(
         @tip-layer-arrow-icon-lb, @tip-layer-arrow-width-lr, @tip-layer-arrow-height-lr
@@ -130,7 +130,7 @@
     left: -1*@tip-layer-arrow-width-lr;
 }
 
-.ui-tiplayer-arrow-rt {
+.@{ui-class-prefix}-tiplayer-arrow-rt {
     display: block;
     .normal-icon(
         @tip-layer-arrow-icon-rt, @tip-layer-arrow-width-lr, @tip-layer-arrow-height-lr
@@ -139,7 +139,7 @@
     right: -1*@tip-layer-arrow-width-lr;
 }
 
-.ui-tiplayer-arrow-rb {
+.@{ui-class-prefix}-tiplayer-arrow-rb {
     display: block;
     .normal-icon(
         @tip-layer-arrow-icon-rb, @tip-layer-arrow-width-lr, @tip-layer-arrow-height-lr
@@ -148,6 +148,6 @@
     right: -1*@tip-layer-arrow-width-lr;
 }
 
-.ui-tiplayer-hidden {
+.@{ui-class-prefix}-tiplayer-hidden {
     display: none;
 }
diff --git a/src/Tree.less b/src/Tree.less
index 9473dc3..880f78b 100644
--- a/src/Tree.less
+++ b/src/Tree.less
@@ -30,7 +30,7 @@
 @tree-node-item-icon-hover: none;
 
 // 图标
-.ui-tree-node-indicator {
+.@{ui-class-prefix}-tree-node-indicator {
     margin: @tree-node-indicator-margin;
     height: @tree-node-indicator-height;
     width: @tree-node-indicator-width;
@@ -41,59 +41,59 @@
 }
 
 // 展开
-.ui-tree-node-indicator-expanded {
+.@{ui-class-prefix}-tree-node-indicator-expanded {
     .pseudo-icon(
         @tree-node-indicator-icon-expanded, @tree-node-indicator-icon-width-expanded, @tree-node-indicator-icon-height-expanded, center
     );
 }
 
 // 无子节点或占位
-.ui-tree-node-indicator-empty {
+.@{ui-class-prefix}-tree-node-indicator-empty {
     background: none;
     .pseudo-icon(
         @tree-node-indicator-empty-background, 0, 0
     );
 }
-.ui-tree-node-indicator-previous {
+.@{ui-class-prefix}-tree-node-indicator-previous {
     background: none;
     .pseudo-icon(
         @tree-node-indicator-previous-background, 0, 0
     );
 }
-.ui-tree-node-indicator-far-previous {
+.@{ui-class-prefix}-tree-node-indicator-far-previous {
     background: none;
     .pseudo-icon(
         @tree-node-indicator-far-previous-background, 0, 0
     );
 }
 
-.ui-tree-node {
+.@{ui-class-prefix}-tree-node {
     line-height: @tree-node-line-height;
 }
 
-.ui-tree-content-wrapper {
+.@{ui-class-prefix}-tree-content-wrapper {
     border-left: none;
     padding: 0 10px;
     &:hover {
         background: @tree-node-wrapper-background-hover;
 
-        .ui-tree-item-content {
+        .@{ui-class-prefix}-tree-item-content {
             color: @tree-node-item-font-color-hover;
             background: @tree-node-item-icon-hover;
         }
     }
 }
                                                                                                                                                                                                                                             
-.ui-tree-content-wrapper-selected,
-.ui-tree-content-wrapper-selected:hover {
+.@{ui-class-prefix}-tree-content-wrapper-selected,
+.@{ui-class-prefix}-tree-content-wrapper-selected:hover {
     background: @tree-node-wrapper-background-selected;
     border-left: none;
-    .ui-tree-item-content {
+    .@{ui-class-prefix}-tree-item-content {
         color: @tree-node-item-font-color-selected;
         background: @tree-node-item-icon-selected;
     }
 }
 
-.ui-tree-item-content {
+.@{ui-class-prefix}-tree-item-content {
     color: @tree-node-item-font-color;
 }