rrj-astra-ui 1.0.2

package/components/AuiCustomerForm.vue

@@ -0,0 +1,304 @@
+<template>
+  <view class="aui-customer-form">
+    <!-- 上部：标题和添加按钮 -->
+    <view class="aui-form-header">
+      <view class="aui-form-title">{{ title }}</view>
+      <view class="aui-add-btn" @click="openAddModal">添加</view>
+    </view>
+
+    <!-- 下部：使用 AuiTable 显示数据 -->
+    <AuiTable
+      :columns="tableColumns"
+      :data="formItems"
+      theme="simple"
+      @row-click="editItemHandler"
+      @delete="deleteItemHandler"
+      :showSort="showSort"
+      :allowDelete="allowDelete"
+    >
+      <template #operation="{ row, rowIndex }">
+        <button class="aui-edit-btn" @click="editItemHandler(rowIndex, row)">编辑</button>
+        <button class="aui-delete-btn" @click="deleteItemHandler(rowIndex, row)">删除</button>
+      </template>
+    </AuiTable>
+
+    <!-- 添加/编辑弹窗 -->
+    <view v-if="showModal" class="aui-modal">
+      <view class="aui-modal-content">
+        <view class="aui-modal-header">{{ modalTitle }}</view>
+        <view class="aui-modal-body">
+          <AuiInput 
+            v-for="field in propForm" 
+            :key="field.field"
+            :type="field.type || 'text'"
+            :placeholder="field.text"
+            v-model="currentItem[field.field]"
+            :style="{ marginBottom: '10px' }"
+          />
+        </view>
+        <view class="aui-modal-footer">
+          <AuiButton type="danger" @click="closeModal">取消</AuiButton>
+          <AuiButton  @click="handleConfirm">确认</AuiButton>
+        </view>
+      </view>
+    </view>
+
+    <!-- 删除确认弹窗 -->
+    <view v-if="showDeleteConfirm" class="aui-delete-confirm">
+      <view class="aui-confirm-content">
+        <view style="padding: 20px 0;">
+          确认删除该项目吗？
+        </view>
+        <div style="margin-top: 15px; display: flex; justify-content: flex-end; gap: 10px;">
+          <AuiButton @click="closeDeleteConfirm">取消</AuiButton>
+          <AuiButton type="danger" @click="handleDelete">确认删除</AuiButton>
+        </div>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, ref, watch } from 'vue';
+import AuiInput from './AuiInput.vue';
+import AuiTable from './AuiTable.vue';
+import AuiButton from './AuiButton.vue';
+
+const __name = 'AuiCustomerForm';
+defineOptions({ name: __name });
+const props = defineProps({
+  title: { type: String, default: '动态表单' },
+  propForm: { 
+    type: Array, 
+    required: true,
+    validator: val => val.every(item => item.field && item.text) 
+  },
+  modelValue: { type: Array, default: () => [] },
+  showSort: {
+    type: Boolean,
+    default: false
+  },
+  allowDelete :{
+    type: Boolean,
+    default: false
+  }
+});
+
+const emits = defineEmits(['update:modelValue']);
+
+// 表单数据（响应式）
+const formItems = ref([...props.modelValue]);
+
+// 表格列配置（根据 propForm 生成）
+const tableColumns = ref([
+  ...props.propForm.map(field => ({
+    label: field.text,
+    prop: field.field,
+    type: field.type, 
+    editable: false 
+  }))
+]);
+
+// 弹窗状态
+const showModal = ref(false);
+const showDeleteConfirm = ref(false);
+const currentItem = ref({}); 
+const modalTitle = ref(''); 
+const currentIndex = ref(-1); 
+
+// 添加带 sort 属性的数据处理函数
+const addSortProperty = (data, showSort) => {
+  return showSort ? data.map((item, index) => ({ ...item, sort: index + 1 })) : data;
+};
+
+// 监听外部数据变化
+watch(() => props.modelValue, (newVal) => {
+  formItems.value = newVal.map(item => ({ ...item })); 
+  formItems.value = addSortProperty(formItems.value, props.showSort);
+}, { deep: true });
+
+// 监听 showSort 变化
+watch(() => props.showSort, (newShowSort) => {
+  formItems.value = addSortProperty(formItems.value, newShowSort);
+});
+
+// 打开添加弹窗
+const openAddModal = () => {
+  currentItem.value = {}; 
+  modalTitle.value = '添加新项目';
+  showModal.value = true;
+};
+
+// 打开编辑弹窗
+const editItemHandler = (index, item) => {
+  currentIndex.value = index;
+  currentItem.value = { ...item }; 
+  modalTitle.value = '修改项目信息';
+  showModal.value = true;
+};
+
+// 确认提交（添加/编辑）
+const handleConfirm = () => {
+  if (currentIndex.value >= 0) {
+    // 编辑操作：更新指定行
+    formItems.value[currentIndex.value] = { ...currentItem.value };
+  } else {
+    // 添加操作：生成唯一 ID 并添加到列表
+    const newItem = { ...currentItem.value, id: Date.now() };
+    formItems.value.push(newItem);
+  }
+  // 添加 sort 属性
+  const dataWithSort = addSortProperty(formItems.value, props.showSort);
+  emits('update:modelValue', dataWithSort.map(item => ({ ...item }))); 
+  closeModal(); 
+};
+
+// 触发删除确认
+const deleteItemHandler = (rowIndex, item) => {
+  currentIndex.value = rowIndex; 
+  showDeleteConfirm.value = true;
+};
+
+// 确认删除
+const handleDelete = () => {
+  if (currentIndex.value >= 0) {
+    formItems.value.splice(currentIndex.value, 1);
+    // 添加 sort 属性
+    const dataWithSort = addSortProperty(formItems.value, props.showSort);
+    emits('update:modelValue', dataWithSort.map(item => ({ ...item }))); 
+    closeDeleteConfirm();
+  }
+};
+
+// 关闭弹窗
+const closeModal = () => {
+  showModal.value = false;
+  currentIndex.value = -1; 
+  currentItem.value = {}; 
+};
+
+const closeDeleteConfirm = () => {
+  showDeleteConfirm.value = false;
+  currentIndex.value = -1;
+};
+</script>
+
+<style scoped lang="scss">
+.aui-customer-form {
+  padding: 15px;
+}
+
+.aui-form-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  
+  .aui-form-title {
+    font-size: 16px;
+    font-weight: 500;
+    color: #1A1A1A;
+  }
+  
+  .aui-add-btn {
+    color: #3B82F6;
+    font-size: 14px;
+    cursor: pointer;
+    border: 1px solid #EFF6FF;
+    background-color: #EFF6FF;
+    padding: 5px 15px;
+    border-radius: 2px;
+    transition: all 0.2s;
+    
+    &:hover {
+      background-color: #EFF6FF;
+    }
+  }
+}
+
+.aui-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.aui-modal-content {
+  background-color: white;
+  border-radius: 8px;
+  width: 90%;
+  max-width: 500px;
+  padding: 20px;
+  
+  .aui-modal-header {
+    font-size: 18px;
+    font-weight: 500;
+    margin-bottom: 15px;
+    text-align: center;
+  }
+  
+  .aui-modal-body {
+    margin-bottom: 20px;
+    
+    .aui-input-item {
+      margin-bottom: 10px;
+    }
+  }
+  
+  .aui-modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+  }
+}
+
+.aui-delete-confirm {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  background-color: rgba(0, 0, 0, 0.5); /* 修改为半透明背景 */
+  border-radius: 8px;
+  z-index: 1001;
+  width: 100%;
+  height: 100%;
+  display: flex; /* 添加 Flexbox 布局 */
+  justify-content: center; /* 水平居中 */
+  align-items: center; /* 垂直居中 */
+  
+  .aui-confirm-content {
+    text-align: center;
+    font-size: 16px;
+    color: #333;
+    background-color: white; /* 添加白色背景 */
+    padding: 20px;
+    box-sizing: border-box;
+    border-radius: 8px;
+    width:80%; /* 限制最大宽度 */
+  }
+}
+
+.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/AuiDivider.vue

@@ -0,0 +1,66 @@
+<template>
+    <view class="aui-viewider" :class="['aui-viewider--' + type, { 'aui-viewider--dashed': dashed }]">
+        <view class="aui-viewider__text">{{ text }}</view>
+    </view>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+const __name = 'AuiDivider';
+
+
+defineOptions({
+    name: __name
+})
+const props = defineProps({
+    type: {
+        type: String,
+        default: 'horizontal',
+        validator: (value) => ['horizontal', 'vertical'].includes(value)
+    },
+    text: {
+        type: String,
+        default: ''
+    },
+    dashed: {
+        type: Boolean,
+        default: false
+    }
+});
+</script>
+
+<style scoped lang="scss">
+@import '../style.scss';
+
+.aui-viewider {
+    display: flex;
+    align-items: center;
+    gap: 10px;  
+}
+.aui-viewider--horizontal {
+    flex-direction: row;
+    height: 1px;
+    background-color: $aui-border-color; 
+    justify-content: center; // 新增：让文字在水平分割线中水平居中
+}
+.aui-viewider--vertical {
+    flex-direction: column;
+    width: 1px;
+    background-color: $aui-border-color; 
+    align-items: center; // 新增：让文字在垂直分割线中垂直居中
+}
+.aui-viewider__text {
+    font-size: $aui-font-size;
+    color: $aui-text-color; 
+    padding: 0 10px;
+    background-color: #fff;
+    z-index: 1;
+    white-space: nowrap;
+
+}
+.aui-viewider--dashed {
+    background-color: transparent;
+    background-image: linear-gradient(90deg, $aui-border-color 50%, transparent 50%);
+    background-size: 10px 1px; 
+}
+</style>

package/components/AuiFold.vue

@@ -0,0 +1,40 @@
+<template>
+    <view :class="[`aui-fold`,`aui-fold-theme__${theme}`]">
+        <slot></slot>
+    </view>
+</template>
+
+<script setup>
+import { ref, computed, defineProps, defineEmits } from 'vue';
+
+const _name="AuiFold";
+defineOptions({name:_name})
+const props = defineProps({
+  theme: {
+    type: String,
+    default: 'default',
+    validator: (value) => ['default'].includes(value)
+  },
+  showDelete: {
+    type: Boolean,
+    default: false
+  }
+});
+
+</script>
+
+<style scoped>
+.aui-fold {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+  margin-top: 10px;
+}
+
+/* 主题样式 */
+.aui-fold-theme__default .aui-fold-head {
+  background-color: #f5f5f5;
+  color: #333;
+}
+</style>    

package/components/AuiFoldItem.vue

@@ -0,0 +1,173 @@
+<template>
+    <view class="aui-fold-item">
+        <view 
+            class="aui-fold-head"
+            @click="toggleFold"
+        >
+            <view class="aui-fold-head__left" v-if="imageUrl">
+              <aui-image :src="imageUrl" :width="imageWidth"></aui-image>
+            </view>
+            <view class="aui-fold-head__center">
+                <view class="aui-fold-head__title">
+                    {{ title }}
+                </view>
+                <view class="aui-fold-head__desc">
+                    {{ desc  }}
+                </view>
+            </view>
+            <view class="aui-fold-head__right">
+                <view class="aui-fold-head_tip" v-if="tip">{{ tip }}</view>
+                <view class="aui-fold-head__delete" @click.stop="handleDelete" v-if="showDelete">
+                    ×
+                </view>
+                <view class="aui-fold-head__arrow">
+                    <aui-icon name="direction" size="20px" :rotate="isOpen?180:0" />
+                </view>
+            </view>
+        </view>  
+        <view 
+            class="aui-fold-item__content"
+            :style="{ height: isOpen ? 'auto' : '0px', overflow: isOpen ? 'visible' : 'hidden' }"
+            ref="contentRef"
+        >
+            <slot></slot>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits, onMounted, nextTick, watch } from 'vue';
+
+import AuiIcon from './AuiIcon.vue'
+import AuiImage from './AuiImage.vue';
+
+const _name="AuiFoldItem";
+defineOptions({name:_name})
+const props = defineProps({
+    title:{
+        type: String,
+        default: ''
+    },
+    desc:{
+        type: String,
+        default: ''
+    },
+    showDelete: {
+        type: Boolean,
+        default: false
+    },
+    defaultOpen: {
+        type: Boolean,
+        default: false
+    },
+    tip:{
+        type: String,
+        default: '' 
+    },
+    imageUrl:{
+        type: String,
+        default: ''
+    },
+    imageWidth:{
+        type: Number,
+        default: 50
+    }
+});
+
+const emits = defineEmits(['delete', 'toggle']);
+
+const isOpen = ref(props.defaultOpen);
+const contentRef = ref(null);
+
+// 切换折叠状态
+const toggleFold = () => {
+  isOpen.value = !isOpen.value;
+  emits('toggle', isOpen.value);
+};
+
+// 删除项
+const handleDelete = () => {
+  emits('delete');
+};
+</script>
+
+<style scoped>
+.aui-fold-item {
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #E5E7EB;
+  transition: all 0.3s ease;
+  padding:10px
+}
+
+.aui-fold-head {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.aui-fold-head:hover {
+  opacity: 0.9;
+}
+
+.aui-fold-head__left {
+  align-items: center;
+  margin-right: 10px;
+}
+
+.aui-fold-head__center {
+  flex: 1;
+  min-width: 0;
+}
+
+.aui-fold-head__title {
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #111827;
+}
+
+.aui-fold-head__desc {
+  font-size: 14px;
+  color: #4B5563;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 5px;
+}
+
+.aui-fold-head__right {
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+}
+
+
+.aui-fold-head__arrow {
+  width: 16px;
+  text-align: center;
+  transition: transform 0.3s ease;
+}
+
+/** .aui-fold-head__arrow--open {
+  transform: rotate(90deg);
+}
+  */
+
+
+.aui-fold-head__delete:hover {
+  background-color: #ff4d4f;
+  color: white;
+}
+
+.aui-fold-item__content {
+  overflow: hidden;
+  transition: height 0.3s ease;
+  background-color: white;
+  box-sizing: border-box;
+}
+.aui-fold-head_tip{font-size: 12px;color:#9CA3AF;margin-right: 10px;}
+</style>    

package/components/AuiForm.vue

@@ -0,0 +1,76 @@
+<template>
+    <form :class="['aui-form', `aui-form-${layout}`]" @submit.prevent="handleSubmit">
+        <slot></slot>
+    </form>
+</template>
+
+<script setup>
+import { provide,defineProps, defineEmits,computed } from 'vue';
+const __name = 'AuiForm';
+
+defineOptions({
+    name: __name
+})
+const props = defineProps({
+    layout: {
+        type: String,
+        default: 'vertical',
+        validator: (value) => ['vertical', 'horizontal'].includes(value)
+    },
+    showSubmitButton: {
+        type: Boolean,
+        default: true
+    },
+    buttonText: {
+        type: String,
+        default: '提交'
+    },
+    buttonSize: {
+        type: String,
+        default: 'normal',
+        validator: (value) => ['normal', 'small', 'large'].includes(value)
+    },
+    buttonType: {
+        type: String,
+        default: 'primary',
+        validator: (value) => ['primary', 'success', 'warning', 'danger'].includes(value)
+    },
+    lineSpacing:{
+        type: [String,Number],
+        default: '5'
+    }
+});
+const emits = defineEmits(['submit']);
+
+const formItemStyle = computed(() => ({
+  marginBottom: `${props.lineSpacing}px`
+}));
+
+const handleSubmit = () => {
+    emits('submit');
+};
+// 提供样式对象给子组件
+console.log(formItemStyle.value)
+provide('formItemStyle', formItemStyle.value);
+</script>
+
+<style scoped lang="scss">
+@import '../style.scss';
+
+.aui-form {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.aui-form--horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+}
+
+.aui-form__submit-wrapper {
+    margin-top: 15px;
+}
+</style>
+