rrj-astra-ui 1.0.2

package/components/AuiMultiSelect.vue

@@ -0,0 +1,303 @@
+<template>
+    <div class="aui-multi-select">
+        <view
+            class="aui-multi-select-flex"
+            @click="togglePopup"
+            :style="`height:${height};line-height:${height}`"
+        >
+            <view class="text">
+                {{ selectedItems.length > 0
+                    ? selectedItems.map(item => item.label || item).join(', ')
+                    : placeholder }}
+            </view>
+            <view class="icon">
+                <aui-icon name="right" style="margin-top: -12px;"/>
+            </view>
+        </view>
+        <view
+            v-if="isPopupOpen"
+            class="aui-multi-select-popup-content"
+            :class="{ 'animate-popup': isPopupOpen }"
+        >
+            <view class="aui-multi-select-title">{{ placeholder }}</view>
+            <view
+                v-for="(category, index) in dataSource"
+                :key="index"
+            >
+                <view class="aui-multi-select-type">{{ category.type }}</view>
+                <view class="aui-multi-select-data">
+                    <view
+                        v-for="(item, itemIndex) in category.data"
+                        :key="itemIndex"
+                        class="aui-multi-select-data-item"
+                        :class="{ 'selected': isSelected(item) }"
+                        @click="toggleSelection(item)"
+                    >
+                        <input
+                            type="checkbox"
+                            :checked="isSelected(item)"
+                            @change="toggleSelection(item)"
+                            style="display: none;"
+                        />
+                        <view class=font>{{ item.label || item }}</view>
+                    </view>
+                    <!-- 根据 customerData 控制自定义按钮的显示 -->
+                    <view
+                        v-if="itemIndex === category.data.length - 1 && customerData"
+                        class="custom-button"
+                        @click="showEditInput(index)"
+                    >
+                        +
+                    </view>
+                    <input
+                        v-if="editIndex === index && editInputVisible"
+                        v-model="editInputValue"
+                        type="text"
+                        placeholder="请输入自定义数据"
+                    />
+                    <view
+                        v-if="editIndex === index && editInputVisible"
+                        class="confirm-button"
+                        @click="addCustomData(index)"
+                    >
+                        确认
+                    </view>
+                </view>
+            </view>
+            <view class="aui-multi-select-foot">
+                <view class="close" @click="closePopup">取消</view>
+                <view class="confirm" @click="closePopup">确定</view>
+            </view>
+        </view>
+    </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, ref, computed, watch } from 'vue';
+import AuiIcon from './AuiIcon.vue';
+
+const __name = 'AuiMultiSelect';
+// 这里的 defineOptions 可能不是 Vue 内置方法，暂时注释掉
+defineOptions({
+    name: __name
+})
+const props = defineProps({
+    modelValue: {
+        type: Array,
+        default: () => []
+    },
+    dataSource: {
+        type: Array,
+        default: () => []
+    },
+    placeholder: {
+        type: String,
+        default: '请选择'
+    },
+    height: {
+        type: String,
+        default: '44px'
+    },
+    // 新增 props 用于控制自定义按钮的显示
+    customerData: {
+        type: Boolean,
+        default: true
+    }
+});
+
+const emits = defineEmits(['update:modelValue']);
+
+const isPopupOpen = ref(false);
+const selectedItems = ref(props.modelValue);
+const editInputVisible = ref(false);
+const editIndex = ref(-1);
+const editInputValue = ref('');
+
+// 监听 modelValue 的变化，更新 selectedItems
+watch(() => props.modelValue, (newValue) => {
+    selectedItems.value = [...newValue];
+}, { deep: true });
+
+const togglePopup = () => {
+    isPopupOpen.value =!isPopupOpen.value;
+};
+
+const toggleSelection = (item) => {
+    const index = selectedItems.value.findIndex(selected => {
+        return item.id? selected.id === item.id : selected === item;
+    });
+    if (index > -1) {
+        selectedItems.value.splice(index, 1);
+    } else {
+        selectedItems.value.push(item);
+    }
+    emits('update:modelValue', selectedItems.value);
+};
+
+const isSelected = (item) => {
+    return selectedItems.value.some(selected => {
+        return item.id? selected.id === item.id : selected === item;
+    });
+};
+
+const closePopup = () => {
+    isPopupOpen.value = false;
+    emits('update:modelValue', selectedItems.value);
+};
+
+const showEditInput = (index) => {
+    editInputVisible.value = true;
+    editIndex.value = index;
+    editInputValue.value = '';
+};
+
+const addCustomData = (index) => {
+    if (editInputValue.value.trim()!== '') {
+        const newItem = {
+            label: editInputValue.value
+        };
+        props.dataSource[index].data.push(newItem);
+        editInputVisible.value = false;
+        editIndex.value = -1;
+        editInputValue.value = '';
+        emits('update:modelValue', selectedItems.value);
+    }
+};
+</script>
+
+<style scoped lang="scss">
+@import '../style.scss';
+
+.aui-multi-select {
+    position: relative;
+    flex: 1;
+    border-radius: 8px;
+    border: 1px solid $aui-border-color;
+    padding: 0 20px;
+}
+
+.aui-multi-select-popup-content {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: white;
+    border-top: 1px solid #ccc;
+    padding: 16px;
+    z-index: 100;
+    overflow-y: auto;
+    height: 100%; /* 可根据需求调整 */
+    animation: slide-up 0.3s ease;
+    box-sizing: border-box;
+    padding-top: 10%;
+}
+
+.animate-popup {
+    animation: slide-up 0.3s ease;
+}
+
+@keyframes slide-up {
+    from {
+        bottom: -100%;
+    }
+    to {
+        bottom: 0;
+    }
+}
+
+.aui-multi-select view {
+    cursor: pointer;
+    font-size: $aui-font-size;
+    color: $aui-text-color;
+}
+
+.aui-multi-select-type {
+    font-size: $aui-font-min-size;
+    color: #999;
+    margin-bottom: 8px;
+}
+
+.aui-multi-select-data {
+    margin-bottom: 16px;
+    display: block;
+}
+
+.aui-multi-select-data-item {
+    border-radius: 3px;
+    align-items: center;
+    display: inline-block;
+    margin-bottom: 8px;
+    padding: 8px 15px;
+    font-size: $aui-font-size;;
+    cursor: pointer;
+    margin-right: 10px;
+    background-color: #F3F4F6;
+}
+
+.aui-multi-select-data-item.selected {
+    background-color: $aui-primary-color !important;
+}
+.aui-multi-select-data-item.selected .font{
+    color: #FFFFFF;
+}
+
+.aui-multi-select-popup-content button {
+    padding: 8px 16px;
+    background-color: $aui-primary-color;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.aui-multi-select-foot {
+    display: flex;
+}
+
+.aui-multi-select-foot > view {
+    width: 40%;
+    height: 40px;
+    line-height: 40px;
+    background: $aui-primary-color;
+    color: #FFFFFF;
+    text-align: center;
+    font-size: $aui-font-size;
+    margin: 0 5%;
+    border-radius: 3px;
+    cursor: pointer;
+}
+
+.aui-multi-select-foot >.close {
+    background: $aui-danger-color;
+}
+
+.custom-button {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    text-align: center;
+    background-color: #f0f0f0;
+    border-radius: 3px;
+    cursor: pointer;
+}
+
+.confirm-button {
+    display: inline-block;
+    padding: 4px 8px;
+    background-color: $aui-primary-color;
+    color: white;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+}
+.aui-multi-select-title{font-size: 16px;color:#000000;margin-bottom: 20px;}
+.aui-multi-select-flex{display: flex;}
+.aui-multi-select-flex .text{  flex: 1;
+  white-space: nowrap;      /* 禁止换行 */
+  overflow: hidden;         /* 超出内容隐藏 */
+  text-overflow: ellipsis;  /* 超出部分显示为省略号 */
+  max-width: 100%;          /* 确保不超出父容器 */}
+.aui-multi-select-flex .icon{margin-right: -10px;align-items: center;
+    justify-content: center; /* 使子元素在水平方向上居中，可按需添加 */}
+</style>

package/components/AuiNoticeBar.vue

@@ -0,0 +1,62 @@
+<template>
+    <view class="aui-notice-bar">
+        <view class="aui-notice-bar_icon" v-if="icon != 'none'">
+            <aui-icon :color="iconColor" :name="icon" size="20px" />
+        </view>
+        <view class="aui-notice-bar_content">
+            <view>{{ dataSource }}</view>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+const __name = 'AuiNoticeBar';
+
+import AuiIcon from './AuiIcon.vue';
+defineOptions({
+    name: __name
+})
+
+const props = defineProps({
+    dataSource: {
+        type: [String, Array],
+        default: '欢迎使用AstraUI...'
+    },
+    icon: {
+        type: String,
+        default: 'remind',
+        validator: (value) => ['none', 'remind', 'speaker'].includes(value)
+    },
+    iconColor: {
+        type: String,
+        default: '#2B6BE6'
+    }
+});
+</script>
+
+<style scoped lang="scss">
+@import '../style.scss';
+
+.aui-notice-bar {
+    display: flex;
+    align-items: center;
+    background-color: #FFF;
+    border-radius: 6px;
+    padding: 10px;
+    font-size: $aui-font-min-size;
+    color: $aui-text-color;
+    position: relative;
+}
+
+.aui-notice-bar_icon {
+    /* 根据需要设置图标相关样式 */
+    margin-right: 6px;
+    /* 调整图标与内容之间的间距 */
+}
+
+.aui-notice-bar_content {
+    flex: 1;
+    /* 当有图标时，内容占剩余空间；无图标时，占全部宽度 */
+}
+</style>

package/components/AuiNumberBox.vue

@@ -0,0 +1,282 @@
+<template>
+  <view class="aui-number-box">
+    <button
+      class="aui-number-box__btn aui-number-box__btn--decrease"
+      :disabled="currentValue <= min"
+      @click="decrease"
+    >
+      {{ minusIcon }}
+    </button>
+    <input
+      class="aui-number-box__input"
+      type="number"
+      :value="currentValue"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      @change="handleChange"
+      @blur="handleBlur"
+      @focus="handleFocus"
+    />
+    <button
+      class="aui-number-box__btn aui-number-box__btn--increase"
+      :disabled="currentValue >= max"
+      @click="increase"
+    >
+      {{ plusIcon }}
+    </button>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, watch, defineProps, defineEmits } from 'vue';
+
+const _name="AuiNumberBox";
+defineOptions({name:_name})
+/**
+ * @param {number|string} modelValue - 绑定值
+ * @param {number} min - 最小值
+ * @param {number} max - 最大值
+ * @param {number} step - 步长
+ * @param {boolean} disabled - 是否禁用
+ * @param {string} placeholder - 输入框占位文本
+ * @param {string} minusIcon - 减号图标
+ * @param {string} plusIcon - 加号图标
+ * @param {boolean} integer - 是否只能输入整数
+ * @param {number|null} decimalLength - 小数点位数，为 null 时不限制
+ * @param {string|number} inputWidth - 输入框宽度
+ * @param {string|number} buttonSize - 按钮大小
+ * @param {string} disabledColor - 禁用状态颜色
+ * @param {string} color - 数值颜色
+ * @param {string} borderColor - 边框颜色
+ * @event update:modelValue - 绑定值变化时触发
+ * @event change - 数值变化时触发
+ * @event blur - 输入框失去焦点时触发
+ * @event focus - 输入框获得焦点时触发
+ */
+const props = defineProps({
+  // 绑定值
+  modelValue: {
+    type: [Number, String],
+    default: 0
+  },
+  // 最小值
+  min: {
+    type: Number,
+    default: 0
+  },
+  // 最大值
+  max: {
+    type: Number,
+    default: Infinity
+  },
+  // 步长
+  step: {
+    type: Number,
+    default: 1
+  },
+  // 是否禁用
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  // 输入框占位文本
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  // 减号图标
+  minusIcon: {
+    type: String,
+    default: '-'
+  },
+  // 加号图标
+  plusIcon: {
+    type: String,
+    default: '+'
+  },
+  // 是否只能输入整数
+  integer: {
+    type: Boolean,
+    default: false
+  },
+  // 小数点位数
+  decimalLength: {
+    type: Number,
+    default: null
+  },
+  // 输入框宽度
+  inputWidth: {
+    type: [String, Number],
+    default: 50
+  },
+  // 按钮大小
+  buttonSize: {
+    type: [String, Number],
+    default: 32
+  },
+  // 禁用状态颜色
+  disabledColor: {
+    type: String,
+    default: '#c0c4cc'
+  },
+  // 数值颜色
+  color: {
+    type: String,
+    default: '#303133'
+  },
+  // 边框颜色
+  borderColor: {
+    type: String,
+    default: '#ebeef5'
+  }
+});
+
+const emits = defineEmits([
+  'update:modelValue',
+  'change',
+  'blur',
+  'focus'
+]);
+
+// 计算当前值
+const currentValue = computed({
+  get() {
+    return formatValue(props.modelValue);
+  },
+  set(value) {
+    const formattedValue = formatValue(value);
+    emits('update:modelValue', formattedValue);
+    emits('change', formattedValue);
+  }
+});
+
+// 格式化数值
+const formatValue = (value) => {
+  let val = parseFloat(value);
+  
+  // 处理NaN情况
+  if (isNaN(val)) {
+    return props.min;
+  }
+  
+  // 处理整数限制
+  if (props.integer) {
+    val = Math.round(val);
+  }
+  
+  // 处理小数点位数
+  if (props.decimalLength !== null) {
+    val = parseFloat(val.toFixed(props.decimalLength));
+  }
+  
+  // 限制在最小值和最大值之间
+  val = Math.max(props.min, Math.min(props.max, val));
+  
+  return val;
+};
+
+// 增加数值
+const increase = () => {
+  if (props.disabled || currentValue.value >= props.max) return;
+  currentValue.value = currentValue.value + props.step;
+};
+
+// 减少数值
+const decrease = () => {
+  if (props.disabled || currentValue.value <= props.min) return;
+  currentValue.value = currentValue.value - props.step;
+};
+
+// 处理输入框变化
+const handleChange = (e) => {
+  currentValue.value = e.target.value;
+};
+
+// 处理失焦事件
+const handleBlur = (e) => {
+  // 失焦时格式化值
+  currentValue.value = e.target.value;
+  emits('blur', e);
+};
+
+// 处理聚焦事件
+const handleFocus = (e) => {
+  emits('focus', e);
+};
+
+// 监听props变化
+watch(() => props.modelValue, (newVal) => {
+  currentValue.value = formatValue(newVal);
+});
+</script>
+
+<style scoped lang="scss">
+.aui-number-box {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--border-color, #ebeef5);
+  border-radius: 4px;
+  overflow: hidden;
+  
+  .aui-number-box__btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--button-size, 32px);
+    height: var(--button-size, 32px);
+    padding: 0;
+    background-color: #f5f7fa;
+    border: none;
+    color: var(--color, #303133);
+    font-size: 14px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    
+    &:hover:not(:disabled) {
+      background-color: #e4e7ed;
+    }
+    
+    &:disabled {
+      color: var(--disabled-color, #c0c4cc);
+      cursor: not-allowed;
+      background-color: #f5f7fa;
+    }
+    
+    &--decrease {
+      border-right: 1px solid var(--border-color, #ebeef5);
+    }
+    
+    &--increase {
+      border-left: 1px solid var(--border-color, #ebeef5);
+    }
+  }
+  
+  .aui-number-box__input {
+    width: var(--input-width, 50px);
+    height: var(--button-size, 32px);
+    padding: 0 5px;
+    text-align: center;
+    border: none;
+    outline: none;
+    font-size: 14px;
+    color: var(--color, #303133);
+    background-color: #fff;
+    
+    &:disabled {
+      background-color: #f5f7fa;
+      color: var(--disabled-color, #c0c4cc);
+    }
+    
+    // 去除浏览器默认样式
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+    
+    &[type="number"] {
+      -moz-appearance: textfield;
+    }
+  }
+}
+</style>