@10yun/cv-mobile-ui 0.5.53 → 0.5.55

package/uview-plus/components/u-no-network/u-no-network.vue

@@ -168,5 +168,42 @@ export default {
 };
 </script>
 <style scoped>
-@import './style.css';
+.u-no-network {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: -100px;
+}
+.u-no-network__tips {
+  color: var(--u-tips-color);
+  font-size: 14px;
+  margin-top: 15px;
+}
+.u-no-network__app {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  margin-top: 6px;
+}
+.u-no-network__app__setting {
+  color: var(--u-light-color);
+  font-size: 13px;
+}
+.u-no-network__app__to-setting {
+  font-size: 13px;
+  color: var(--u-primary);
+  margin-left: 3px;
+}
+.u-no-network__retry {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  justify-content: center;
+  margin-top: 15px;
+}
 </style>

package/uview-plus/components/u-notice-bar/u-notice-bar.vue

@@ -98,5 +98,9 @@ export default {
 };
 </script>
 <style scoped>
-@import './style.css';
+.u-notice-bar {
+  overflow: hidden;
+  padding: 9px 12px;
+  flex: 1;
+}
 </style>

package/uview-plus/components/u-notify/u-notify.vue

@@ -166,5 +166,32 @@ export default {
 };
 </script>
 <style scoped>
-@import './style.css';
+.u-notify {
+  padding: 8px 10px;
+}
+.u-notify__warpper {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+}
+.u-notify__warpper__text {
+  font-size: 15px;
+  text-align: center;
+}
+.u-notify--primary {
+  background-color: var(--u-primary);
+}
+.u-notify--success {
+  background-color: var(--u-success);
+}
+.u-notify--error {
+  background-color: var(--u-error);
+}
+.u-notify--warning {
+  background-color: var(--u-warning);
+}
 </style>

package/uview-plus/components/u-number-box/u-number-box.vue

@@ -148,7 +148,7 @@ export default {
     // #ifdef VUE3
     // 监听v-mode的变化，重新初始化内部的值
     modelValue: {
-      handler: function (newV, oldV) {
+      handler(newV, oldV) {
         if (newV !== this.currentValue) {
           this.currentValue = this.format(this.modelValue);
         }
@@ -383,5 +383,63 @@ export default {
 };
 </script>
 <style scoped>
-@import './style.css';
+.u-number-box {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+}
+.u-number-box__slot {
+  /* #ifndef APP-NVUE */
+  touch-action: none;
+  /* #endif */
+}
+.u-number-box__plus,
+.u-number-box__minus {
+  width: 35px;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  /* #ifndef APP-NVUE */
+  touch-action: none;
+  /* #endif */
+}
+.u-number-box__plus--hover,
+.u-number-box__minus--hover {
+  background-color: #e6e6e6 !important;
+}
+.u-number-box__plus--disabled,
+.u-number-box__minus--disabled {
+  color: #c8c9cc;
+  background-color: #f7f8fa;
+}
+.u-number-box__plus {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.u-number-box__minus {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+.u-number-box__input {
+  position: relative;
+  text-align: center;
+  font-size: 15px;
+  padding: 0;
+  margin: 0 2px;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.u-number-box__input--disabled {
+  color: #c8c9cc;
+  background-color: #f2f3f5;
+}
 </style>

package/uview-plus/components/u-number-keyboard/u-number-keyboard.vue

@@ -117,5 +117,49 @@ export default {
 };
 </script>
 <style scoped>
-@import './style.css';
+.u-keyboard {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  flex-direction: row;
+  justify-content: space-around;
+  background-color: rgb(224, 228, 230);
+  flex-wrap: wrap;
+  padding: 8px 10rpx 8px 10rpx;
+}
+.u-keyboard__button-wrapper {
+  box-shadow: 0 2px 0px #bbbcbe;
+  margin: 4px 6rpx;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.u-keyboard__button-wrapper__button {
+  width: 222rpx;
+  height: 90rpx;
+  background-color: #ffffff;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.u-keyboard__button-wrapper__button__text {
+  font-size: 20px;
+  font-weight: 500;
+  color: var(--u-main-color);
+}
+.u-keyboard__button-wrapper__button--gray {
+  background-color: rgb(200, 202, 210);
+}
+.u-hover-class {
+  background-color: #bbbcc6;
+}
 </style>

package/uview-plus/components/u-overlay/u-overlay.vue

@@ -53,5 +53,12 @@ export default {
 };
 </script>
 <style scoped>
-@import './style.css';
+.u-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+}
 </style>

package/uview-plus/components/u-pagination/u-pagination.vue

@@ -1 +1,255 @@
-<template>
  <view class="u-pagination">
    <!-- 上一页按钮 -->
    <view
      :class="['u-pagination-btn', { disabled: currentPage === 1 }]"
      :style="{ backgroundColor: buttonBgColor, borderColor: buttonBorderColor }"
      @click="prev"
    >
      <template v-if="prevText">
        {{ prevText }}
      </template>
      <up-icon v-else name="arrow-left"></up-icon>
    </view>
    <!-- 页码列表 -->
    <block v-for="page in displayedPages" :key="page" v-if="layout.includes('pager')">
      <view :class="['u-pagination-item', { active: page === currentPage }]" @click="goTo(page)">
        {{ page }}
      </view>
    </block>
    <!-- 总数显示 -->
    <view v-if="total > 0 && layout.includes('total')" class="u-pagination-total">{{ currentPage }} / {{ totalPages }}</view>
    <!-- 每页数量选择器 -->
    <!-- <picker
      v-if="layout.includes('sizes')"
      mode="selector"
      :range="pageSizes"
      range-key="label"
      :value="pageSizeIndex"
      @change="handleSizeChange"
      class="u-pagination-sizes"
    >
      <view>{{ pageSizeLabel }}</view>
    </picker> -->
    <!-- 下一页按钮 -->
    <view
      :class="['u-pagination-btn', { disabled: currentPage === totalPages }]"
      :style="{ backgroundColor: buttonBgColor, borderColor: buttonBorderColor }"
      @click="next"
    >
      <template v-if="nextText">
        {{ nextText }}
      </template>
      <up-icon v-else name="arrow-right"></up-icon>
    </view>
    <!-- 跳转输入框 -->
    <!-- <view v-if="layout.includes('jumper')">
      <text>前往</text>
      <input
        type="number"
        class="u-pagination-jumper"
        :value="currentPageInput"
        @input="onInputPage"
        @confirm="onConfirmPage"
      />
      <text>页</text>
    </view> -->
  </view>
  name: 'u-pagination',
  props: {
    // 当前页码
    currentPage: {
      type: Number,
      default: 1
    },
    // 每页条目数
    pageSize: {
      type: Number,
      default: 10
    },
    // 总数据条目数
    total: {
      type: Number,
      default: 0
    },
    // 上一页按钮文案
    prevText: {
      type: String,
      default: ''
    },
    // 下一页按钮文案
    nextText: {
      type: String,
      default: ''
    },
    buttonBgColor: {
      type: String,
      default: '#f5f7fa'
    },
    buttonBorderColor: {
      type: String,
      default: '#dcdfe6'
    },
    // 可选的每页条目数
    pageSizes: {
      type: Array,
      default: () => [10, 20, 30, 40, 50]
    },
    // 布局方式（类似 el-pagination）
    layout: {
      type: String,
      default: 'prev, pager, next'
    },
    // 是否隐藏只有一个页面时的分页控件
    hideOnSinglePage: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:currentPage', 'update:pageSize', 'current-change', 'size-change'],
  data() {
    return {
      currentPageInput: this.currentPage + ''
    };
  },
  computed: {
    totalPages() {
      return Math.max(1, Math.ceil(this.total / this.pageSize));
    },
    pageSizeIndex() {
      const index = this.pageSizes.findIndex((size) => size.value === this.pageSize);
      return index >= 0 ? index : 0;
    },
    pageSizeLabel() {
      const found = this.pageSizes.find((size) => size.value === this.pageSize);
      return found?.label || this.pageSize;
    },
    displayedPages() {
      const total = this.totalPages;
      const current = this.currentPage;
      if (total <= 4) {
        return Array.from({ length: total }, (_, i) => i + 1);
      }
      const pages = [];
      // 当前页靠近头部
      if (current <= 2) {
        for (let i = 1; i <= 4; i++) {
          pages.push(i);
        }
        pages.push('...');
        pages.push(total);
      }
      // 当前页在尾部附近
      else if (current >= total - 1) {
        pages.push(1);
        pages.push('...');
        for (let i = total - 3; i <= total; i++) {
          pages.push(i);
        }
      }
      // 中间情况
      else {
        pages.push(1);
        pages.push('...');
        pages.push(current - 1);
        pages.push(current);
        pages.push(current + 1);
        pages.push('...');
        pages.push(total);
      }
      return pages;
    }
    // 控制是否隐藏
  },
  watch: {
    currentPage(val) {
      this.currentPageInput = val + '';
    }
  },
  methods: {
    t,
    handleSizeChange(e) {
      const selected = e.detail.value;
      const size = this.pageSizes[selected]?.value || this.pageSizes[0].value;
      this.$emit('update:pageSize', size);
      this.$emit('size-change', size);
    },
    prev() {
      if (this.currentPage > 1) {
        this.goTo(this.currentPage - 1);
      }
    },
    next() {
      if (this.currentPage < this.totalPages) {
        this.goTo(this.currentPage + 1);
      }
    },
    goTo(page) {
      if (page === '...' || page === this.currentPage) return;
      this.$emit('update:currentPage', page);
      this.$emit('current-change', page);
    },
    onInputPage(e) {
      this.currentPageInput = e.detail.value;
    },
    onConfirmPage(e) {
      const num = parseInt(e.detail.value);
      if (!isNaN(num) && num >= 1 && num <= this.totalPages) {
        this.goTo(num);
      }
    }
  }
+<template>
+  <view class="u-pagination">
+    <!-- 上一页按钮 -->
+    <view
+      :class="['u-pagination-btn', { disabled: currentPage === 1 }]"
+      :style="{ backgroundColor: buttonBgColor, borderColor: buttonBorderColor }"
+      @click="prev"
+    >
+      <template v-if="prevText">
+        {{ prevText }}
+      </template>
+      <up-icon v-else name="arrow-left"></up-icon>
+    </view>
+    <!-- 页码列表 -->
+    <block v-for="page in displayedPages" :key="page" v-if="layout.includes('pager')">
+      <view :class="['u-pagination-item', { active: page === currentPage }]" @click="goTo(page)">
+        {{ page }}
+      </view>
+    </block>
+    <!-- 总数显示 -->
+    <view v-if="total > 0 && layout.includes('total')" class="u-pagination-total">{{ currentPage }} / {{ totalPages }}</view>
+    <!-- 每页数量选择器 -->
+    <!-- <picker
+      v-if="layout.includes('sizes')"
+      mode="selector"
+      :range="pageSizes"
+      range-key="label"
+      :value="pageSizeIndex"
+      @change="handleSizeChange"
+      class="u-pagination-sizes"
+    >
+      <view>{{ pageSizeLabel }}</view>
+    </picker> -->
+    <!-- 下一页按钮 -->
+    <view
+      :class="['u-pagination-btn', { disabled: currentPage === totalPages }]"
+      :style="{ backgroundColor: buttonBgColor, borderColor: buttonBorderColor }"
+      @click="next"
+    >
+      <template v-if="nextText">
+        {{ nextText }}
+      </template>
+      <up-icon v-else name="arrow-right"></up-icon>
+    </view>
+    <!-- 跳转输入框 -->
+    <!-- <view v-if="layout.includes('jumper')">
+      <text>前往</text>
+      <input
+        type="number"
+        class="u-pagination-jumper"
+        :value="currentPageInput"
+        @input="onInputPage"
+        @confirm="onConfirmPage"
+      />
+      <text>页</text>
+    </view> -->
+  </view>
+</template>
+<script>
+import { t } from '../../libs/i18n';
+export default {
+  name: 'u-pagination',
+  props: {
+    // 当前页码
+    currentPage: {
+      type: Number,
+      default: 1
+    },
+    // 每页条目数
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+    // 总数据条目数
+    total: {
+      type: Number,
+      default: 0
+    },
+    // 上一页按钮文案
+    prevText: {
+      type: String,
+      default: ''
+    },
+    // 下一页按钮文案
+    nextText: {
+      type: String,
+      default: ''
+    },
+    buttonBgColor: {
+      type: String,
+      default: '#f5f7fa'
+    },
+    buttonBorderColor: {
+      type: String,
+      default: '#dcdfe6'
+    },
+    // 可选的每页条目数
+    pageSizes: {
+      type: Array,
+      default: () => [10, 20, 30, 40, 50]
+    },
+    // 布局方式（类似 el-pagination）
+    layout: {
+      type: String,
+      default: 'prev, pager, next'
+    },
+    // 是否隐藏只有一个页面时的分页控件
+    hideOnSinglePage: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:currentPage', 'update:pageSize', 'current-change', 'size-change'],
+  data() {
+    return {
+      currentPageInput: this.currentPage + ''
+    };
+  },
+  computed: {
+    totalPages() {
+      return Math.max(1, Math.ceil(this.total / this.pageSize));
+    },
+    pageSizeIndex() {
+      const index = this.pageSizes.findIndex((size) => size.value === this.pageSize);
+      return index >= 0 ? index : 0;
+    },
+    pageSizeLabel() {
+      const found = this.pageSizes.find((size) => size.value === this.pageSize);
+      return found?.label || this.pageSize;
+    },
+    displayedPages() {
+      const total = this.totalPages;
+      const current = this.currentPage;
+      if (total <= 4) {
+        return Array.from({ length: total }, (_, i) => i + 1);
+      }
+      const pages = [];
+      // 当前页靠近头部
+      if (current <= 2) {
+        for (let i = 1; i <= 4; i++) {
+          pages.push(i);
+        }
+        pages.push('...');
+        pages.push(total);
+      }
+      // 当前页在尾部附近
+      else if (current >= total - 1) {
+        pages.push(1);
+        pages.push('...');
+        for (let i = total - 3; i <= total; i++) {
+          pages.push(i);
+        }
+      }
+      // 中间情况
+      else {
+        pages.push(1);
+        pages.push('...');
+        pages.push(current - 1);
+        pages.push(current);
+        pages.push(current + 1);
+        pages.push('...');
+        pages.push(total);
+      }
+      return pages;
+    }
+    // 控制是否隐藏
+  },
+  watch: {
+    currentPage(val) {
+      this.currentPageInput = val + '';
+    }
+  },
+  methods: {
+    t,
+    handleSizeChange(e) {
+      const selected = e.detail.value;
+      const size = this.pageSizes[selected]?.value || this.pageSizes[0].value;
+      this.$emit('update:pageSize', size);
+      this.$emit('size-change', size);
+    },
+    prev() {
+      if (this.currentPage > 1) {
+        this.goTo(this.currentPage - 1);
+      }
+    },
+    next() {
+      if (this.currentPage < this.totalPages) {
+        this.goTo(this.currentPage + 1);
+      }
+    },
+    goTo(page) {
+      if (page === '...' || page === this.currentPage) return;
+      this.$emit('update:currentPage', page);
+      this.$emit('current-change', page);
+    },
+    onInputPage(e) {
+      this.currentPageInput = e.detail.value;
+    },
+    onConfirmPage(e) {
+      const num = parseInt(e.detail.value);
+      if (!isNaN(num) && num >= 1 && num <= this.totalPages) {
+        this.goTo(num);
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+.u-pagination {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  font-size: 14px;
+  color: #606266;
+}
+.u-pagination .u-pagination-total {
+  margin-right: 10px;
+}
+.u-pagination .u-pagination-sizes {
+  margin-right: 10px;
+  padding: 4px 4px;
+  border: 1rpx solid #dcdfe6;
+  border-radius: 4px;
+}
+.u-pagination .u-pagination-btn {
+  margin: 0 3px;
+  padding: 4px 4px;
+  border: 1rpx solid #dcdfe6;
+  border-radius: 4px;
+  background-color: #f5f7fa;
+}
+.u-pagination .u-pagination-btn.disabled {
+  opacity: 0.5;
+}
+.u-pagination .u-pagination-item {
+  margin: 0 2px;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+.u-pagination .u-pagination-item.active {
+  background-color: #409eff;
+  color: white;
+}
+.u-pagination .u-pagination-jumper {
+  width: 40px;
+  height: 28px;
+  margin: 0 5px;
+  padding: 0 5px;
+  border: 1rpx solid #dcdfe6;
+  border-radius: 4px;
+  font-size: 14px;
+}
+</style>