xt-element-ui 1.3.4 → 2.0.0

package/src/components/xt-card/index.js

@@ -1,8 +1,7 @@
-import XtCard from './index.vue'
-
-XtCard.install = function (Vue) {
-  Vue.component(XtCard.name, XtCard)
-}
-
-export default XtCard
-export { XtCard }
+import XtCard from './index.vue'
+
+XtCard.install = function (Vue) {
+  Vue.component(XtCard.name, XtCard)
+}
+
+export default XtCard

package/src/components/xt-card/index.vue

@@ -1,28 +1,68 @@
 <template>
-  <div class="xt-card" :class="{'no-padding': noPadding }">
-    <div class="card__header" v-if="title">
-      <slot name="icon">{{ icon }}</slot>
-      <slot name="title">{{ title }}</slot>
-    </div>
-    <div class="card__body">
-      <slot>
-        <span class="value"><slot name="value">{{ value }}</slot></span>
-        <span class="unit">{{ unit }}</span>
-      </slot>
-    </div>
-  </div>
+  <el-card 
+    class="ex-card" 
+    :class="cardClasses"
+    v-bind="$attrs"
+  >
+    <template #header v-if="$slots.header || title">
+      <slot name="header">{{ title }}</slot>
+    </template>
+    <slot></slot>
+  </el-card>
 </template>
+
 <script>
 export default {
-  name: "XtCard",
+  name: 'XtCard',
+  inheritAttrs: false,
+  inject: {
+    xtConfig: {
+      default: () => ({
+        theme: 'light',
+        size: 'medium',
+        primaryColor: '#1890ff'
+      })
+    }
+  },
   props: {
-    type: {},
-    title: {},
-    value: {},
-    unit: {},
-    icon: {},
-    iconIn: { default: "right" },
-    noPadding: { type: Boolean, default: false }
+    title: {
+      type: String,
+      default: ''
+    },
+    shadow: {
+      type: String,
+      default: 'always',
+      validator: (val) => ['always', 'hover', 'never'].includes(val)
+    },
+    bordered: {
+      type: Boolean,
+      default: true
+    },
+    bodyClass: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String,
+      default: null,
+      validator: (val) => !val || ['small', 'medium', 'large'].includes(val)
+    }
+  },
+  computed: {
+    finalSize() {
+      // 优先使用组件自身的 size，其次继承 XtConfigProvider 的 size，最后使用默认值
+      return this.size || this.xtConfig.size || 'medium'
+    },
+    cardClasses() {
+      return [
+        `ex-card-${this.shadow}`,
+        `ex-card-${this.finalSize}`,
+        {
+          'ex-card-no-border': !this.bordered,
+          [this.bodyClass]: this.bodyClass
+        }
+      ]
+    }
   }
 }
-</script>
+</script>

package/src/components/xt-card/style/index.scss

@@ -1,49 +1,73 @@
+// XtCard 组件样式
+@import '../../../styles/element-theme.scss';
 @import '../../../styles/variables.scss';
 
-.xt-card {
-  --xt-card-bg-color: var(--xt-card-bg-color, #ffffff);
-  --xt-card-border-color: var(--xt-card-border-color, #EBEEF5);
-  --xt-card-text-color: var(--xt-color-text-primary, #303133);
+.ex-card {
+  border-radius: 8px;
+  transition: all 0.3s;
+  font-size: var(--ex-card-font-size, 14px);
+  background-color: var(--el-bg-color-block, #ffffff);
+  color: var(--el-text-color-primary, #303133);
+  border-color: var(--el-border-color, #303133);
   
-  border-radius: var(--xt-card-border-radius, 4px);
-  box-shadow: var(--xt-card-shadow, 0 2px 12px 0 rgba(0, 0, 0, 0.1));
-  background-color: var(--xt-card-bg-color);
-  overflow: hidden;
-  color: var(--xt-card-text-color);
-  transition: var(--xt-transition-duration, 0.3s);
+  .el-card__header {
+    padding: var(--ex-card-header-padding, 16px 20px);
+    border-bottom: 1px solid var(--el-border-color, #ebeef5);
+    background-color: var(--el-bg-color-block-head, #ffffff);
+    font-weight: 600;
+  }
+  
+  .el-card__body {
+    padding: var(--ex-card-body-padding, 20px);
+  }
+}
+
+.ex-card-small {
+  font-size: 12px;
+  
+  .el-card__header {
+    font-size: 12px;
+  }
 }
 
-.xt-card .card__header {
-  padding: var(--xt-card-header-padding, 18px 20px);
-  box-sizing: border-box;
-  font-weight: 600;
-  font-size: var(--xt-font-size-medium, 16px);
+.ex-card-medium {
+  font-size: 14px;
+  
+  .el-card__header {
+    font-size: 14px;
+  }
 }
 
-.xt-card .card__body {
-  padding: var(--xt-card-padding, 20px);
+.ex-card-large {
+  font-size: 16px;
+  
+  .el-card__header {
+    font-size: 16px;
+  }
 }
 
-.xt-card .card__body .value {
-  font-size: var(--xt-font-size-large, 18px);
-  font-weight: 600;
-  color: var(--xt-color-primary, #1890ff);
+.ex-card-always {
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
 
-.xt-card .card__body .unit {
-  font-size: var(--xt-font-size-base, 14px);
-  color: var(--xt-color-text-secondary, #909399);
-  margin-left: 4px;
+.ex-card-hover {
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  
+  &:hover {
+    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
+  }
 }
 
-.xt-card .value {
-  font-weight: 600;
+.ex-card-never {
+  box-shadow: none;
+  border: 1px solid var(--el-border-color, #ebeef5);
 }
 
-.xt-card .card__header + .card__body {
-  padding-top: 0;
+.ex-card-no-border {
+  border: none;
+  
+  .el-card__header {
+    border-bottom: none;
+  }
 }
 
-.xt-card.noPadding .card__body {
-  padding: 0;
-}

package/src/components/xt-card-item/index.vue

@@ -1,21 +1,21 @@
 <template>
-    <ex-card class="xt-card-item" :bordered="false" :class="{ [`is-${type}`]: type ? true : false}">
-        <xt-text bold size="medium">{{ title }}</xt-text>
-        <xt-flex-box>
-          <div style="width: 50%;margin-bottom: 5px;">
+    <xt-card class="xt-card-item" :bordered="false" :class="{ [`is-${type}`]: type ? true : false}">
+        <xt-flex-box content="between">
+          <div >
+            <div><xt-text bold size="extra-large">{{ title }}</xt-text></div>
             <xt-text bold size="large" v-model="value" format="thousand" :type="type" :decimals="0"></xt-text>
             <div style="margin: 5px 0;">
               <xt-text size="small">较昨日</xt-text>
               <xt-text v-model="change" format="normal" :type="diff > 0 ? 'success' : 'danger'" :suffix="diff > 0 ? '↑' : '↓'"></xt-text> 
             </div>
           </div>
-          <div style="flex: 1; height: 100%;">
+          <div style="height: 100%;">
             <slot name="icon">
-              <xt-text size="extra-large" :type="type"><i class="el-icon-user"></i></xt-text>
+              <xt-text size="extra-large" :type="type"><xt-icon name="el-icon-user" :size="48" ></xt-icon></xt-text>
             </slot>
           </div>
         </xt-flex-box>
-      </ex-card>
+      </xt-card>
 </template>
 <script>
 export default {

package/src/components/xt-chart/index.js

@@ -0,0 +1,8 @@
+import XtChart from './index.vue'
+
+XtChart.install = function (Vue) {
+  Vue.component(XtChart.name, XtChart)
+}
+
+export default XtChart
+export { XtChart }

package/src/components/{ex-chart → xt-chart}/index.vue

@@ -1,22 +1,22 @@
 <template>
-  <ex-bar v-if="type=='bar'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-bar>
-  <ex-line v-else-if="type=='line'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-line>
-  <ex-pie v-else-if="type=='pie'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-pie>
-  <ex-multi v-else-if="type=='multi'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-multi>
+  <xt-bar v-if="type=='bar'" v-bind="$attrs" :theme="myTheme" :size="mySize"></xt-bar>
+  <xt-line v-else-if="type=='line'" v-bind="$attrs" :theme="myTheme" :size="mySize"></xt-line>
+  <xt-pie v-else-if="type=='pie'" v-bind="$attrs" :theme="myTheme" :size="mySize"></xt-pie>
+  <xt-multi v-else-if="type=='multi'" v-bind="$attrs" :theme="myTheme" :size="mySize"></xt-multi>
 </template>
 <script>
-import ExBar from "./ExBar.vue"
-import ExLine from "./ExLine.vue"
-import ExPie from "./ExPie.vue"
-import ExMulti from "./ExMulti.vue"
+import XtBar from "./XtBar.vue"
+import XtLine from "./XtLine.vue"
+import XtPie from "./XtPie.vue"
+import XtMulti from "./XtMulti.vue"
 
 export default {
-  name: "ExChart",
+  name: "XtChart",
   components: {
-    ExBar,
-    ExLine,
-    ExPie,
-    ExMulti
+    XtBar,
+    XtLine,
+    XtPie,
+    XtMulti
   },
   props: {
     theme: {

package/src/components/{ex-chart → xt-chart}/pieList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="pieLBox">
     <div class="left">
-      <ExPie class="chart-box" :chart-data="chartData" :showLegend="false" :showLabel="false" :colors="colors"></ExPie>
+      <XtPie class="chart-box" :chart-data="chartData" :showLegend="false" :showLabel="false" :colors="colors"></XtPie>
     </div>
     <div class="right">
       <div v-for="(item, index) in chartData" :key="index" class="box">

package/src/components/{ex-chart → xt-chart}/theme/dark.js

@@ -14,6 +14,9 @@ export default {
       color: "#ffffff"
     }
   },
+  axisLabel: {
+    color: "#ffffff"
+  },
   line: {
     itemStyle: {
     },
@@ -24,7 +27,7 @@ export default {
   bar: {
     itemStyle: {
       borderRadius: 4
-    }
+    },
   },
   pie: {
     roseType: "radius",

package/src/components/{ex-chart → xt-chart}/utils.js

@@ -19,7 +19,7 @@ function getEcharts() {
         echarts.registerTheme(key, themeKeys[key]);
       }
     } catch (e) {
-      console.warn('[ExChart] echarts 加载失败:', e.message);
+      console.warn('[XtChart] echarts 加载失败:', e.message);
     }
   }
   return echarts;

package/src/components/xt-config-provider/index.vue

@@ -1,5 +1,5 @@
 <script>
-import EchartsUtil from '../ex-chart/utils.js'
+import EchartsUtil from '../xt-chart/utils.js'
 export default {
   name: 'XtConfigProvider',
   inheritAttrs: false,

package/src/components/xt-date-picker/index.js

@@ -0,0 +1,8 @@
+import XtDatePicker from './index.vue'
+
+XtDatePicker.install = function (Vue) {
+  Vue.component(XtDatePicker.name, XtDatePicker)
+}
+
+export default XtDatePicker
+export { XtDatePicker }

package/src/components/{ex-date-picker → xt-date-picker}/index.vue

@@ -20,7 +20,7 @@ const typeFormatEnum = {
 import FlexBox from '../xt-flex-box/index.vue'
 import Quarter from "./quarter.vue";
 export default {
-  name: "ExDatePicker",
+  name: "XtDatePicker",
   components: {
     FlexBox,
     Quarter

package/src/components/xt-icon/index.js

@@ -0,0 +1,8 @@
+import XtIcon from './index.vue'
+
+XtIcon.install = function (Vue) {
+  Vue.component(XtIcon.name, XtIcon)
+}
+
+export default XtIcon
+export { XtIcon }

package/src/components/{ex-icon → xt-icon}/index.vue

@@ -16,8 +16,8 @@
 <script>
 const customPrefixes = {}
 
-const ExIcon = {
-  name: 'ExIcon',
+const XtIcon = {
+  name: 'XtIcon',
   inheritAttrs: false,
 
   props: {
@@ -139,13 +139,13 @@ const ExIcon = {
   }
 }
 
-ExIcon.registerPrefix = function (prefix) {
+XtIcon.registerPrefix = function (prefix) {
   if (prefix && typeof prefix === 'string') {
     customPrefixes[prefix] = true
   }
 }
 
-export default ExIcon
+export default XtIcon
 </script>
 
 <style lang="scss" scoped>

package/src/components/xt-layout/ExFieldset.vue

@@ -19,7 +19,7 @@
 </template>
 <script>
 export default {
-  name: "ExFieldset",
+  name: "XtFieldset",
   props: {
     legend: {},
     type: {

package/src/components/xt-page/index.js

@@ -0,0 +1,8 @@
+import XtPage from './index.vue'
+
+XtPage.install = function (Vue) {
+  Vue.component(XtPage.name, XtPage)
+}
+
+export default XtPage
+export { XtPage }

package/src/components/{ex-page → xt-page}/index.vue

@@ -19,7 +19,7 @@
 </template>
 <script>
 export default {
-  name: "ExPage",
+  name: "XtPage",
   props: {
     showHeader: { type: Boolean, default: true },
     showFooter: { type: Boolean, default: true },

package/src/components/xt-progress/index.js

@@ -0,0 +1,7 @@
+import XtProgress from './index.vue'
+
+XtProgress.install = function(Vue) {
+  Vue.component(XtProgress.name, XtProgress)
+}
+
+export default XtProgress

package/src/components/xt-progress/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="xt-progress" :class="[
+    `xt-progress--${type}`,
+    `xt-progress--${size}`
+  ]">
+    <div v-if="type === 'line'" class="xt-progress__bar">
+      <div 
+        class="xt-progress__bar-inner" 
+        :style="{ width: `${percentage}%`, backgroundColor: color }"
+      >
+        <transition name="xt-progress-fade">
+          <div v-if="showText" class="xt-progress__bar-text">{{ percentage }}%</div>
+        </transition>
+      </div>
+    </div>
+    
+    <div v-else-if="type === 'circle'" class="xt-progress__circle">
+      <svg :width="circleSize" :height="circleSize" class="xt-progress__circle-svg">
+        <circle
+          class="xt-progress__circle-bg"
+          :cx="circleSize / 2"
+          :cy="circleSize / 2"
+          :r="circleRadius"
+          fill="none"
+          :stroke="bgColor"
+          :stroke-width="strokeWidth"
+        />
+        <circle
+          class="xt-progress__circle-bar"
+          :cx="circleSize / 2"
+          :cy="circleSize / 2"
+          :r="circleRadius"
+          fill="none"
+          :stroke="color"
+          :stroke-width="strokeWidth"
+          :stroke-dasharray="circleLength"
+          :stroke-dashoffset="circleOffset"
+          stroke-linecap="round"
+          transform="rotate(-90 ${circleSize / 2} ${circleSize / 2})"
+        />
+      </svg>
+      <div v-if="showText" class="xt-progress__circle-text">
+        <span class="xt-progress__circle-percent">{{ percentage }}%</span>
+      </div>
+    </div>
+    
+    <div v-if="showText && type === 'line'" class="xt-progress__text">{{ percentage }}%</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'XtProgress',
+  props: {
+    percentage: {
+      type: Number,
+      default: 0,
+      validator: (val) => val >= 0 && val <= 100
+    },
+    type: {
+      type: String,
+      default: 'line',
+      validator: (val) => ['line', 'circle'].includes(val)
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: (val) => ['small', 'medium', 'large'].includes(val)
+    },
+    color: {
+      type: String,
+      default: '#1890ff'
+    },
+    bgColor: {
+      type: String,
+      default: '#ebeef5'
+    },
+    showText: {
+      type: Boolean,
+      default: true
+    },
+    strokeWidth: {
+      type: Number,
+      default: 6
+    },
+    circleSize: {
+      type: Number,
+      default: 120
+    }
+  },
+  computed: {
+    circleRadius() {
+      return (this.circleSize - this.strokeWidth) / 2
+    },
+    circleLength() {
+      return 2 * Math.PI * this.circleRadius
+    },
+    circleOffset() {
+      return this.circleLength * (1 - this.percentage / 100)
+    }
+  }
+}
+</script>

package/src/components/xt-progress/style/index.scss

@@ -0,0 +1,119 @@
+@import '../../../styles/variables.scss';
+
+.xt-progress {
+  display: inline-flex;
+  align-items: center;
+}
+
+.xt-progress__bar {
+  flex: 1;
+  height: 6px;
+  background: $xt-color-border-light;
+  border-radius: 3px;
+  overflow: hidden;
+  position: relative;
+}
+
+.xt-progress--small .xt-progress__bar {
+  height: 4px;
+}
+
+.xt-progress--large .xt-progress__bar {
+  height: 8px;
+}
+
+.xt-progress__bar-inner {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.3s ease;
+  position: relative;
+}
+
+.xt-progress__bar-text {
+  position: absolute;
+  right: -30px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 12px;
+  color: $xt-color-text-secondary;
+}
+
+.xt-progress__text {
+  margin-left: 10px;
+  font-size: 14px;
+  color: $xt-color-text-secondary;
+}
+
+.xt-progress--small .xt-progress__text {
+  font-size: 12px;
+}
+
+.xt-progress--large .xt-progress__text {
+  font-size: 16px;
+}
+
+.xt-progress__circle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.xt-progress__circle-svg {
+  transform: rotate(-90deg);
+}
+
+.xt-progress__circle-bg {
+  transition: stroke 0.3s ease;
+}
+
+.xt-progress__circle-bar {
+  transition: stroke-dashoffset 0.6s ease;
+}
+
+.xt-progress__circle-text {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.xt-progress__circle-percent {
+  font-size: 16px;
+  font-weight: 500;
+  color: $xt-color-text-primary;
+}
+
+.xt-progress--small .xt-progress__circle-percent {
+  font-size: 12px;
+}
+
+.xt-progress--large .xt-progress__circle-percent {
+  font-size: 20px;
+}
+
+.xt-progress-fade-enter-active,
+.xt-progress-fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.xt-progress-fade-enter,
+.xt-progress-fade-leave-to {
+  opacity: 0;
+}
+
+[data-theme='dark'], html.dark {
+  .xt-progress__bar {
+    background: $xt-dark-color-border;
+  }
+  
+  .xt-progress__bar-text,
+  .xt-progress__text {
+    color: $xt-dark-color-text-secondary;
+  }
+  
+  .xt-progress__circle-percent {
+    color: $xt-dark-color-text-primary;
+  }
+}

package/src/components/xt-select-tree/index.js

@@ -0,0 +1,8 @@
+import XtSelectTree from './index.vue'
+
+XtSelectTree.install = function (Vue) {
+  Vue.component(XtSelectTree.name, XtSelectTree)
+}
+
+export default XtSelectTree
+export { XtSelectTree }

package/src/components/{ex-select-tree → xt-select-tree}/index.vue

@@ -56,7 +56,7 @@
 import Emitter from "element-ui/lib/mixins/emitter";
 import { addResizeListener, removeResizeListener } from "element-ui/lib/utils/resize-event";
 export default {
-  name: "ExSelectTree",
+  name: "XtSelectTree",
   mixins: [Emitter],
   inheritAttrs: false,
   model: {