rrj-astra-ui 1.0.2

package/components/AuiSelectGroup.vue

@@ -0,0 +1,312 @@
+<template>
+  <view :class="[`aui-select-group`,`aui-select-group-theme-${props.theme}`]">
+    <view 
+      class="aui-select-group__item" 
+      :class="{ 
+        'aui-select-group__item_active': isSelected(item),
+        'has-badge': shouldShowBadge(item) 
+      }"
+      v-for="item in internalDataSource" 
+      :key="item.id || item[props.valueKey] || item"
+      @click="toggleSelection(item)"
+      @mouseenter="hoveredItem = item"
+      @mouseleave="hoveredItem = null"
+    >
+      <span>{{ item[props.labelKey] || item }}</span>
+      <span 
+        v-if="shouldShowBadge(item)" 
+        class="aui-badge"
+        :class="{ 
+          'aui-badge-hover': hoveredItem === item && props.showBadgeOnHover 
+        }"
+        :style="{ backgroundColor: badgeBgColor, color: badgeColor }"
+      >
+        {{ getBadgeCount(item) || '' }}
+      </span>
+    </view>
+    
+    <!-- 添加功能区域 -->
+    <view v-if="props.showAddButton" class="add-section">
+      <view v-if="!isAdding" class="aui-select-group__add" @click="startAdding">
+        + 添加
+      </view>
+      
+      <view v-else class="add-input-container">
+        <aui-input 
+          v-model="newItemLabel" 
+          placeholder="输入新选项"
+          @keyup.enter="addNewItem"
+        ></aui-input>
+        <view class="add-buttons">
+          <aui-button type="primary" @click="addNewItem">确认</aui-button>
+          <aui-button type="text" @click="cancelAdding">取消</aui-button>
+        </view>
+        <view v-if="errorMessage" class="error-message">{{ errorMessage }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits, computed, watchEffect } from 'vue';
+
+const _name = "AuiSelectGroup";
+defineOptions({ name: _name });
+
+const props = defineProps({
+  dataSource: {
+    type: Array,
+    default: () => []
+  },
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  badgeCount: {
+    type: Object,
+    default: () => ({})
+  },
+  showBadgeOnHover: {
+    type: Boolean,
+    default: false
+  },
+  badgeColor: {
+    type: String,
+    default: '#ffffff'
+  },
+  badgeBgColor: {
+    type: String,
+    default: '#ff4d4f'
+  },
+  showBadge: {
+    type: Boolean,
+    default: false
+  },
+  showAddButton: {
+    type: Boolean,
+    default: false
+  },
+  valueKey: {
+    type: String,
+    default: 'value'
+  },
+  labelKey: {
+    type: String,
+    default: 'label'
+  },
+  theme:{
+    type:String,
+    default:'none',
+    validator(value){
+      return ['none','trans'].includes(value)
+    }
+  }
+});
+
+const emits = defineEmits(['update:modelValue', 'new-item']);
+const hoveredItem = ref(null);
+const isAdding = ref(false);
+const newItemLabel = ref('');
+const errorMessage = ref('');
+
+// 内部数据源，用于存储添加的新项
+const internalDataSource = ref([...props.dataSource]);
+
+// 监听外部数据源变化，同步到内部
+watchEffect(() => {
+  internalDataSource.value = [...props.dataSource];
+});
+
+// 计算是否显示徽章
+const shouldShowBadge = (item) => {
+  const key = item[props.valueKey] !== undefined ? item[props.valueKey] : item;
+  return props.showBadge && (props.badgeCount[key] || 0) > 0;
+};
+
+// 检查是否选中
+const isSelected = (item) => {
+  const value = item[props.valueKey] !== undefined ? item[props.valueKey] : item;
+  return props.modelValue.includes(value);
+};
+
+// 获取徽章数值
+const getBadgeCount = (item) => {
+  const key = item[props.valueKey] !== undefined ? item[props.valueKey] : item;
+  return props.badgeCount[key] > 0 ? props.badgeCount[key] : null;
+};
+
+// 切换选中状态
+const toggleSelection = (item) => {
+  const value = item[props.valueKey] !== undefined ? item[props.valueKey] : item;
+  emits('update:modelValue', isSelected(item) 
+    ? props.modelValue.filter(v => v !== value) 
+    : [...props.modelValue, value]
+  );
+};
+
+// 开始添加新项
+const startAdding = () => {
+  isAdding.value = true;
+  errorMessage.value = '';
+};
+
+// 取消添加
+const cancelAdding = () => {
+  isAdding.value = false;
+  newItemLabel.value = '';
+  errorMessage.value = '';
+};
+
+// 添加新项
+const addNewItem = () => {
+  const label = newItemLabel.value.trim();
+  if (!label) {
+    errorMessage.value = '请输入内容';
+    return;
+  }
+  
+  // 检查是否已存在相同标签或值的项
+  const valueKey = props.valueKey;
+  const labelKey = props.labelKey;
+  
+  const exists = internalDataSource.value.some(item => {
+    const itemValue = item[valueKey] !== undefined ? item[valueKey] : item;
+    const itemLabel = item[labelKey] !== undefined ? item[labelKey] : item;
+    
+    return itemValue === label || itemLabel === label;
+  });
+  
+  if (exists) {
+    errorMessage.value = '该选项已存在';
+    return;
+  }
+  
+  // 创建新项
+  let newItem;
+  if (internalDataSource.value.length > 0 && typeof internalDataSource.value[0] === 'object') {
+    // 对象数组格式
+    newItem = { 
+      [valueKey]: label, 
+      [labelKey]: label,
+      id: `new_${Date.now()}` // 为新项生成唯一ID
+    };
+  } else {
+    // 简单数组格式
+    newItem = label;
+  }
+  
+  // 添加到内部数据源（使用更明确的响应式更新）
+  internalDataSource.value = [...internalDataSource.value, newItem];
+  
+  // 触发更新事件（通知父组件）
+  emits('update:modelValue', [...props.modelValue, newItem[valueKey] || newItem]);
+  
+  // 可选：触发新项添加事件
+  emits('new-item', newItem);
+  
+  // 重置状态
+  isAdding.value = false;
+  newItemLabel.value = '';
+  errorMessage.value = '';
+};
+</script>
+<style scoped lang="scss">
+@import '../style.scss';
+
+.aui-select-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.aui-select-group__item {
+  position: relative;
+  padding: 5px 5px;
+  border: 1px solid #F5F5F5;
+  background-color: #F5F5F5;
+  color: #666666;
+  border-radius: 3px;
+  cursor: pointer;
+  min-width: 60px;
+  text-align: center;
+  transition: all 0.2s ease;
+}
+
+.aui-select-group__item_active {
+  background-color: $aui-primary-color;
+  color: #FFFFFF;
+  border-color: $aui-primary-color;
+}
+
+.aui-badge {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  min-width: 18px;
+  height: 18px;
+  line-height: 18px;
+  padding: 0 4px;
+  border-radius: 9px;
+  font-size: 12px;
+  text-align: center;
+  transform: scale(0.9);
+  opacity: 0.9;
+  transition: all 0.2s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  visibility: hidden;
+}
+
+.has-badge .aui-badge {
+  visibility: visible;
+}
+
+.aui-badge-hover {
+  transform: scale(1);
+  opacity: 1;
+}
+
+.aui-select-group__add {
+  padding: 10px 15px;
+  border: 1px solid $aui-primary-color;
+  color: $aui-primary-color;
+  border-radius: 3px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.aui-select-group__add:hover {
+  background-color: rgba($aui-primary-color, 0.05);
+}
+
+.add-section {
+  width: 100%;
+}
+
+.add-input-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+}
+
+.add-buttons {
+  display: flex;
+  gap: 10px;
+}
+
+.error-message {
+  color: #ff4d4f;
+  font-size: 12px;
+  margin-top: 5px;
+}
+.aui-select-group-theme-trans .aui-select-group__item{
+  background-color: none;
+  border-radius: 5px;
+  border:1px solid #E5E7EB;
+  color:#111827;
+  font-size: 14px;
+}
+.aui-select-group .aui-select-group__item_active{border-color: #2196F3;background-color: #EFF6FF;color:#2196F3}
+</style>

package/components/AuiTab.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="aui-tab">
+    <div class="aui-tab-header" :class="{ 'scrollable': scrollable, 'equal-width': equalWidth }">
+      <div class="aui-tab-scroll-container">
+        <div 
+          class="aui-tab-item" 
+          v-for="(item, index) in tabs" 
+          :key="item.key || index"
+          :class="{ active: currentIndex === index, disabled: item.disabled }"
+          @click="!item.disabled && handleTabClick(index)"
+        >
+          <span>{{ item.title }}</span>
+          <div class="tab-indicator" v-if="currentIndex === index"></div>
+        </div>
+      </div>
+    </div>
+    <div class="aui-tab-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, provide, computed, onMounted, watch } from 'vue'
+
+const _name="AuiTab";
+defineOptions({name:_name})
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: ''
+  },
+  type: {
+    type: String,
+    default: 'line',
+    validator: value => ['line', 'card', 'capsule'].includes(value)
+  },
+  scrollable: {
+    type: Boolean,
+    default: false
+  },
+  equalWidth: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+const tabs = ref([])
+const currentIndex = ref(0)
+
+// 注册tab项
+const registerTab = (tab) => {
+  tabs.value.push(tab)
+  
+  // 如果是第一个tab或者与v-model匹配，则设为当前激活项
+  if (tabs.value.length === 1 || tab.name === props.modelValue) {
+    setActiveTab(tab.name)
+  }
+}
+
+// 设置激活的tab
+const setActiveTab = (name) => {
+  const index = tabs.value.findIndex(tab => tab.name === name)
+  if (index !== -1) {
+    currentIndex.value = index
+    emits('update:modelValue', name)
+  }
+}
+
+// 处理tab点击
+const handleTabClick = (index) => {
+  if (index !== currentIndex.value) {
+    currentIndex.value = index
+    emits('update:modelValue', tabs.value[index].name)
+  }
+}
+
+// 提供给子组件使用
+provide('auiTab', {
+  tabs,
+  currentIndex,
+  registerTab,
+  setActiveTab
+})
+
+// 监听v-model变化
+watch(() => props.modelValue, (newValue) => {
+  const index = tabs.value.findIndex(tab => tab.name === newValue)
+  if (index !== -1) {
+    currentIndex.value = index
+  }
+})
+
+// 初始化
+onMounted(() => {
+  // 如果初始没有匹配的v-model值，则激活第一个tab
+  if (tabs.value.length > 0 && !tabs.value.some(tab => tab.name === props.modelValue)) {
+    setActiveTab(tabs.value[0].name)
+  }
+})
+</script>
+
+<style scoped>
+.aui-tab {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.aui-tab-header {
+  display: flex;
+  border-bottom: 1px solid #e4e7ed;
+  overflow: hidden;
+  position: relative;
+}
+
+.scrollable .aui-tab-scroll-container {
+  white-space: nowrap;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.scrollable .aui-tab-scroll-container::-webkit-scrollbar {
+  display: none;
+}
+
+.equal-width .aui-tab-item {
+  flex: 1;
+  min-width: 0;
+  text-align: center;
+}
+
+.aui-tab-item {
+  padding: 0 20px;
+  height: 40px;
+  line-height: 40px;
+  font-size: 14px;
+  color: #606266;
+  cursor: pointer;
+  position: relative;
+  transition: color 0.3s;
+  display: inline-block;
+}
+
+.aui-tab-item.active {
+  color: #409eff;
+  font-weight: 500;
+}
+
+.aui-tab-item.disabled {
+  color: #c0c4cc;
+  cursor: not-allowed;
+}
+
+.tab-indicator {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: #409eff;
+  transition: all 0.3s;
+}
+
+.aui-tab-content {
+  flex: 1;
+  overflow: auto;
+  height: 100%; /* 确保内容区域有足够高度 */
+}
+</style>

package/components/AuiTabItem.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="aui-tab-pane" v-show="isActive">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { inject, computed } from 'vue'
+
+const _name="AuiTabItem";
+defineOptions({name:_name})
+const props = defineProps({
+  name: { type: [String, Number], required: true },
+  title: { type: String, required: true },
+  disabled: { type: Boolean, default: false }
+})
+
+const tabContext = inject('auiTab')
+
+// 明确解包 ref 的值
+const isActive = computed(() => {
+  const tabsArray = tabContext.tabs.value // 获取数组
+  const currentIndex = tabContext.currentIndex.value // 获取当前索引
+  return currentIndex === tabsArray.findIndex(tab => tab.name === props.name)
+})
+
+// 注册标签页到父组件
+tabContext.registerTab({
+  name: props.name,
+  title: props.title,
+  disabled: props.disabled
+})
+</script>
+
+<style scoped>
+.aui-tab-pane {
+  display: block;
+}
+
+.aui-tab-pane.active {
+  display: block;
+}
+</style>