xt-element-ui 1.3.3 → 1.4.0

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

@@ -1,77 +1,77 @@
-.xt-map-wrapper {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  border-radius: 4px;
-}
-
-.xt-map-container {
-  width: 100%;
-  height: 100%;
-  background-color: var(--xt-map-bg, #f5f5f5);
-  position: relative;
-}
-
-.xt-map-container[data-theme="dark"] {
-  background-color: #1a1a1a;
-}
-
-.xt-map-loading {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  padding: 12px 20px;
-  background-color: rgba(255, 255, 255, 0.9);
-  border-radius: 6px;
-  color: #606266;
-  font-size: 14px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  z-index: 10;
-}
-
-.xt-map-container[data-theme="dark"] + .xt-map-loading,
-.xt-map-wrapper[data-theme="dark"] .xt-map-loading {
-  background-color: rgba(30, 30, 30, 0.9);
-  color: #c0c4cc;
-}
-
-.xt-map-error {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  padding: 12px 20px;
-  background-color: rgba(254, 235, 235, 0.95);
-  border: 1px solid #fbc4c4;
-  border-radius: 6px;
-  color: #f56c6c;
-  font-size: 14px;
-  text-align: center;
-  max-width: 80%;
-  z-index: 10;
-}
-
-.xt-map-container[data-theme="dark"] + .xt-map-error,
-.xt-map-wrapper[data-theme="dark"] .xt-map-error {
-  background-color: rgba(60, 30, 30, 0.95);
-  border-color: #7a3a3a;
-  color: #f56c6c;
-}
-
-/* 暗黑模式下对天地图/百度的瓦片反色滤镜兜底 */
-.xt-map-container[data-theme="dark"] img {
-  /* 各适配器内部会自行处理滤镜，这里仅做最低限度兜底 */
-}
-
-/* 暗黑模式下覆盖层的辅助 CSS 变量 */
-.xt-map-container[data-theme="dark"] {
-  --xt-map-overlay-bg: rgba(30, 30, 30, 0.9);
-  --xt-map-overlay-color: #c0c4cc;
-}
-
-.xt-map-container[data-theme="light"] {
-  --xt-map-overlay-bg: rgba(255, 255, 255, 0.95);
-  --xt-map-overlay-color: #606266;
-}
+.xt-map-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 4px;
+}
+
+.xt-map-container {
+  width: 100%;
+  height: 100%;
+  background-color: var(--xt-map-bg, #f5f5f5);
+  position: relative;
+}
+
+.xt-map-container[data-theme="dark"] {
+  background-color: #1a1a1a;
+}
+
+.xt-map-loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 12px 20px;
+  background-color: rgba(255, 255, 255, 0.9);
+  border-radius: 6px;
+  color: #606266;
+  font-size: 14px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  z-index: 10;
+}
+
+.xt-map-container[data-theme="dark"] + .xt-map-loading,
+.xt-map-wrapper[data-theme="dark"] .xt-map-loading {
+  background-color: rgba(30, 30, 30, 0.9);
+  color: #c0c4cc;
+}
+
+.xt-map-error {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 12px 20px;
+  background-color: rgba(254, 235, 235, 0.95);
+  border: 1px solid #fbc4c4;
+  border-radius: 6px;
+  color: #f56c6c;
+  font-size: 14px;
+  text-align: center;
+  max-width: 80%;
+  z-index: 10;
+}
+
+.xt-map-container[data-theme="dark"] + .xt-map-error,
+.xt-map-wrapper[data-theme="dark"] .xt-map-error {
+  background-color: rgba(60, 30, 30, 0.95);
+  border-color: #7a3a3a;
+  color: #f56c6c;
+}
+
+/* 暗黑模式下对天地图/百度的瓦片反色滤镜兜底 */
+.xt-map-container[data-theme="dark"] img {
+  /* 各适配器内部会自行处理滤镜，这里仅做最低限度兜底 */
+}
+
+/* 暗黑模式下覆盖层的辅助 CSS 变量 */
+.xt-map-container[data-theme="dark"] {
+  --xt-map-overlay-bg: rgba(30, 30, 30, 0.9);
+  --xt-map-overlay-color: #c0c4cc;
+}
+
+.xt-map-container[data-theme="light"] {
+  --xt-map-overlay-bg: rgba(255, 255, 255, 0.95);
+  --xt-map-overlay-color: #606266;
+}

package/src/components/xt-map-provider/index.js

@@ -1,8 +1,8 @@
-import XtMapProvider from '../xt-map/provider.vue'
-
-XtMapProvider.install = function (Vue) {
-  Vue.component(XtMapProvider.name, XtMapProvider)
-}
-
-export default XtMapProvider
-export { XtMapProvider }
+import XtMapProvider from '../xt-map/provider.vue'
+
+XtMapProvider.install = function (Vue) {
+  Vue.component(XtMapProvider.name, XtMapProvider)
+}
+
+export default XtMapProvider
+export { XtMapProvider }

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-step-price/index.js

@@ -1,11 +1,11 @@
-import XtStepPrice from './index.vue'
-import XtStepPriceItem from '../xt-step-price-item/index.vue'
-
-XtStepPrice.install = function (Vue) {
-  Vue.component(XtStepPrice.name, XtStepPrice)
-  Vue.component(XtStepPriceItem.name, XtStepPriceItem)
-}
-
-// 同时导出组件和 install 方法，支持多种引入方式
-export default XtStepPrice
+import XtStepPrice from './index.vue'
+import XtStepPriceItem from '../xt-step-price-item/index.vue'
+
+XtStepPrice.install = function (Vue) {
+  Vue.component(XtStepPrice.name, XtStepPrice)
+  Vue.component(XtStepPriceItem.name, XtStepPriceItem)
+}
+
+// 同时导出组件和 install 方法，支持多种引入方式
+export default XtStepPrice
 export { XtStepPrice, XtStepPriceItem }