rrj-astra-ui 1.0.2

package/components/AuiTable.vue

@@ -0,0 +1,357 @@
+<template>
+  <view :class="[`aui-table`, `aui-table-theme__${theme}`]">
+    <!-- 表头 -->
+    <view class="aui-table_head">
+      <!-- 新增序号表头 -->
+      <view v-if="showSort" class="aui-table-head_item" style="flex-basis: 60px;">序号</view>
+      <view
+        class="aui-table-head_item"
+        v-for="(item, index) in columns"
+        :key="index"
+        :style="{ flexBasis: item.width || 'auto', flexGrow: item.flexGrow || 1 }"
+      >
+        {{ item.label }}
+      </view>
+      <!-- 新增操作列，根据 allowDelete 控制显示 -->
+      <view v-if="allowDelete" class="aui-table-head_item" style="flex-basis: 120px;">操作</view>
+    </view>
+
+    <!-- 表格内容 -->
+    <view class="aui-table_content" v-if="displayData.length > 0">
+      <view
+        class="aui-table-content_item"
+        v-for="(item, rowIndex) in displayData"
+        :key="item.id || rowIndex"
+        :draggable="showSort"
+        @dragstart="showSort && handleDragStart(rowIndex)"
+        @dragover.prevent
+        @drop="showSort && handleDrop(rowIndex)"
+        :class="{ 'dragging': rowIndex === draggedIndex }"
+      >
+        <!-- 新增序号列 -->
+        <view v-if="showSort" class="aui-table-content-item_item" style="flex-basis: 60px;">
+          {{ item.sort }}
+        </view>
+        <view
+          class="aui-table-content-item_item"
+          v-for="(col, colIndex) in columns"
+          :key="colIndex"
+          :style="{ flexBasis: col.width || 'auto', flexGrow: col.flexGrow || 1 }"
+        >
+          <!-- 可编辑数字列（带步进器） -->
+          <template v-if="col.type === 'number' && col.editable">
+            <div class="stepper">
+              <view class="btn first" @click="decrease(rowIndex, col.prop, col.step, col.min)">
+                -
+              </view>
+              <input
+                type="number"
+                v-model.number="displayData[rowIndex][col.prop]"
+                @change="handleInput($event, rowIndex, col.prop)"
+                :min="col.min || 0"
+                :max="col.max || Infinity"
+              />
+              <view class="btn befor" @click="increase(rowIndex, col.prop, col.step, col.max)">
+                +
+              </view>
+            </div>
+          </template>
+
+          <!-- 格式化内容 -->
+          <template v-else-if="col.formatter">
+            {{ col.formatter(displayData[rowIndex][col.prop], displayData[rowIndex]) }}
+          </template>
+
+          <!-- 默认文本 -->
+          <template v-else>
+            {{ displayData[rowIndex][col.prop] || "--" }}
+          </template>
+        </view>
+        <!-- 新增操作列，根据 allowDelete 控制显示 -->
+        <view v-if="allowDelete" class="aui-table-content-item_item" style="flex-basis: 120px;">
+          <!--<aui-icon name="editprice" @click="handleEdit(rowIndex, item)"/>-->
+          <aui-icon name="close" @click="handleDelete(rowIndex, item)"/>
+        </view>
+      </view>
+    </view>
+
+    <!-- 空状态提示 -->
+    <view v-else class="empty-state">
+      暂无数据
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, computed, ref, watch } from 'vue';
+import AuiIcon from './AuiIcon.vue';
+const __name = 'AuiTable';
+
+defineOptions({
+  name: __name
+});
+
+const props = defineProps({
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  data: {
+    type: Array,
+    default: () => []
+  },
+  theme: {
+    type: String,
+    default: 'default',
+    validator: (value) => ['default', 'simple'].includes(value)
+  },
+  // 新增 showSort 属性
+  showSort: {
+    type: Boolean,
+    default: false
+  },
+  // 新增 allowDelete 属性
+  allowDelete: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emits = defineEmits(['update:data', 'cell-change', 'edit', 'delete']); // 新增 edit 和 delete 事件
+
+// 增加带 sort 属性的数据处理函数
+const addSortProperty = (data, showSort) => {
+  return showSort ? data.map((item, index) => ({ ...item, sort: index + 1 })) : data;
+};
+
+// 使用计算属性和ref组合确保数据响应式
+const internalData = ref(addSortProperty(props.data, props.showSort));
+
+// 统一的显示数据计算属性
+const displayData = computed(() => {
+  return internalData.value.length > 0 
+    ? internalData.value 
+    : addSortProperty(props.data, props.showSort);
+});
+
+// 监听外部数据变化
+watch(
+  () => [props.data, props.showSort],
+  ([newData, newShowSort]) => {
+    if (newData !== internalData.value) {
+      internalData.value = addSortProperty(newData, newShowSort);
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+// 处理输入框变化
+const handleInput = (event, rowIndex, prop) => {
+  const newValue = parseFloat(event.target.value);
+  if (!isNaN(newValue)) {
+    updateValue(rowIndex, prop, newValue);
+  }
+};
+
+// 减少数值
+const decrease = (rowIndex, prop, step, min) => {
+  const currentValue = internalData.value[rowIndex][prop];
+  if (isNaN(currentValue)) return;
+
+  const newValue = Math.max(currentValue - (step || 1), min || 0);
+  updateValue(rowIndex, prop, newValue);
+};
+
+// 增加数值
+const increase = (rowIndex, prop, step, max) => {
+  const currentValue = internalData.value[rowIndex][prop];
+  if (isNaN(currentValue)) return;
+
+  const newValue = Math.min(currentValue + (step || 1), max || Infinity);
+  updateValue(rowIndex, prop, newValue);
+};
+
+// 更新数据并触发事件
+const updateValue = (rowIndex, prop, newValue) => {
+  const row = internalData.value[rowIndex];
+  if (!row || rowIndex < 0 || rowIndex >= internalData.value.length) return;
+  if (isNaN(newValue)) return;
+
+  if (newValue === row[prop]) return;
+
+  const newRow = { ...row, [prop]: newValue };
+
+  internalData.value = [
+    ...internalData.value.slice(0, rowIndex),
+    newRow,
+    ...internalData.value.slice(rowIndex + 1)
+  ];
+
+  emits('update:data', [...internalData.value]);
+  emits('cell-change', {
+    row: newRow,
+    rowIndex,
+    prop,
+    originalValue: row[prop],
+    newValue
+  });
+};
+
+// 触发编辑事件
+const handleEdit = (rowIndex, item) => {
+  emits('edit', rowIndex, item);
+};
+
+// 触发删除事件
+const handleDelete = (rowIndex, item) => {
+  emits('delete', rowIndex, item);
+};
+
+// 拖动开始
+let draggedIndex = -1;
+const handleDragStart = (index) => {
+  draggedIndex = index;
+};
+
+// 拖动放下
+const handleDrop = (index) => {
+  if (draggedIndex === -1) return;
+
+  const items = [...internalData.value];
+  const [removed] = items.splice(draggedIndex, 1);
+  items.splice(index, 0, removed);
+
+  // 重新计算 sort 属性
+  internalData.value = props.showSort ? items.map((item, i) => ({ ...item, sort: i + 1 })) : items;
+  emits('update:data', [...internalData.value]);
+  draggedIndex = -1;
+};
+</script>
+
+<style scoped lang="scss">
+.aui-table {
+  display: block;
+  overflow: hidden;
+  width: 100%;
+  border: 1px solid #EEEEEE;
+  border-radius: 8px;
+}
+.aui-table-theme__simple.aui-table {
+  border: none;
+  border-radius: 0;
+}
+.aui-table_head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #F5F6F7;
+  border-bottom: 1px solid #F3F4F6;
+}
+.aui-table-theme__simple .aui-table_head {
+  background-color: #FFFFFF !important;
+  border-bottom: 1px solid #F3F4F6;
+}
+.aui-table-head_item {
+  text-align: center;
+  font-size: 14px;
+  padding: 8px 0;
+  color: #666666;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.aui-table-content_item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #F3F4F6;
+  padding: 8px 0;
+  /* 鼠标拖动样式 */
+  cursor: move;
+  transition: background-color 0.2s;
+}
+.aui-table-content_item.dragging {
+  background-color: #f0f0f0;
+  opacity: 0.8;
+}
+.aui-table-content-item_item {
+  text-align: center;
+  font-size: 14px;
+  color: #1A1A1A;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.aui-table-content-item_item>.aui-icon{display: inline-block;}
+.empty-state {
+  height: 60px;
+  line-height: 60px;
+  text-align: center;
+  color: #999;
+  font-size: 14px;
+}
+
+/* 步进器样式 */
+.stepper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0;
+  border:1px solid #EEEEEE;
+  border-radius: 4px;
+  width: 100px;
+  margin: 0 auto;
+}
+.stepper .btn {
+  width: 32px;
+  height: 32px;
+  background-color: #f5f5f5;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+  transition: background-color 0.2s;
+  font-size: 20px;
+  color:#666666;
+}
+.stepper button:hover {
+  background-color: #e0e0e0;
+}
+.stepper input {
+  flex:1;
+  height: 32px;
+  border-left: none;
+  border-right: none;
+  text-align: center;
+  outline: none;
+  -moz-appearance: textfield;
+}
+.stepper input::-webkit-outer-spin-button,
+.stepper input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* 新增操作按钮样式 */
+.aui-edit-btn, .aui-delete-btn {
+  padding: 4px 8px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  margin: 0 2px;
+}
+
+.aui-edit-btn {
+  background-color: #3B82F6;
+  color: white;
+}
+
+.aui-delete-btn {
+  background-color: #F5222D;
+  color: white;
+}
+</style>

package/components/AuiTag.vue

@@ -0,0 +1,112 @@
+<template>
+    <view :class="['aui-tag', `aui-tag-${type}`]" @click="!disabled && handleClick">
+        {{ value }}
+    </view>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+const __name = 'AuiTag';
+
+defineOptions({
+    name: __name
+})
+
+const props = defineProps({
+    type: {
+        type: String,
+        default: 'primary',
+        validator: (value) => ['primary', 'success', 'warning', 'danger','level-v1','level-v2','level-v3','level-v4','level-v5','level-v6','level-v7','level-v8'].includes(value)
+    },
+    value: {
+        type: String,
+        default: ''
+    },
+    plain: {
+        type: Boolean,
+        default: false
+    },
+    closable: {
+        type: Boolean,
+        default: false
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emits = defineEmits(['click', 'close']);
+
+const handleClick = () => {
+    emits('click');
+};
+</script>
+
+<style scoped lang="scss">
+@import '../style.scss';
+
+.aui-tag {
+    display: inline-block;
+    padding: 2px 10px;
+    font-size: 12px;
+    border-radius: 30px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+.aui-tag-default{
+    background-color: #F3F4F6;
+    color: $aui-text-color;
+}
+.aui-tag-primary {
+    background-color: $aui-primary-bg-color;
+    color: $aui-primary-color;
+}
+
+.aui-tag-success {
+    background-color: $aui-success-bg-color;
+    color: $aui-success-color;
+}
+
+.aui-tag-warning {
+    background-color: $aui-warning-bg-color;
+    color: $aui-warning-color;
+}
+
+.aui-tag-danger {
+    background-color: $aui-danger-bg-color;
+    color: $aui-danger-color;
+}
+.aui-tag-level-v1{
+    background-color:#F53F3F;
+    color:#FFFFFF ;
+}
+.aui-tag-level-v2{
+    background-color:#FF7D00;
+    color:#FFFFFF ;
+}
+.aui-tag-level-v3{
+    background-color:#00B42A;
+    color: #FFFFFF;
+}
+.aui-tag-level-v4{
+    background-color:#1890FF;
+    color: #FFFFFF;
+}
+.aui-tag-level-v5{
+    background-color:#86909C;
+    color:#FFFFFF ;
+}
+.aui-tag-level-v6{
+    background-color:#FFB800;
+    color: #FFFFFF;
+}
+.aui-tag-level-v7{
+    background-color:#E5E6EB;
+    color:#1D2129 ;
+}
+.aui-tag-level-v8{
+    background-color:#0FC6C2;
+    color: #FFFFFF;
+}
+</style>

package/components/AuiText.vue

@@ -0,0 +1,81 @@
+<template>
+    <!-- 绑定新的 props 到 class 和 style -->
+    <view :class="['aui-text', `aui-text-${size}`, `aui-text-type-${type}`, { 'aui-text-bold': bold }]" :style="{ color: color, fontSize: customSize }">
+        <slot></slot>
+    </view>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+const __name = 'AuiText';
+
+defineOptions({
+    name: __name
+})
+const props = defineProps({
+    size: {
+        type: String,
+        default: 'normal',
+        validator: (value) => ['normal', 'small', 'large'].includes(value)
+    },
+    type: {
+        type: String,
+        default: 'default',
+        validator: (value) => ['default', 'primary', 'success', 'warning', 'danger'].includes(value)
+    },
+    // 新增 color 属性
+    color: {
+        type: String,
+        default: null
+    },
+    // 新增 customSize 属性
+    customSize: {
+        type: String,
+        default: null
+    },
+    // 新增 bold 属性
+    bold: {
+        type: Boolean,
+        default: false
+    }
+});
+</script>
+
+<style scoped lang="scss">
+@import '../style.scss';
+
+.aui-text {
+    font-size: $aui-font-size;
+    color: $aui-text-color;
+    display: block;
+}
+
+.aui-text-small {
+    font-size: 12px;
+}
+
+.aui-text-large {
+    font-size: 18px;
+}
+
+.aui-text-type-primary {
+    color: $aui-primary-color;
+}
+
+.aui-text-type-success {
+    color: $aui-success-color;
+}
+
+.aui-text-type-warning {
+    color: $aui-warning-color;
+}
+
+.aui-text-type-danger {
+    color: $aui-danger-color;
+}
+
+/* 新增 bold 样式 */
+.aui-text-bold {
+    font-weight: bold;
+}
+</style>