rrj-astra-ui 1.0.2

package/components/AuiFormItem.vue

@@ -0,0 +1,88 @@
+<template>
+    <view :class="['aui-form-item', `aui-form-item--${labelPosition}`, { 'aui-form-item--error': errorMessage }]" :style="formItemStyle">
+        <view v-if="label" :class="['aui-form-item__label', { 'aui-form-item__label--required': required }]">
+            {{ label }}
+        </view>
+        <view class="aui-form-item__content">
+            <slot></slot>
+            <span v-if="errorMessage" class="aui-form-item__error">{{ errorMessage }}</span>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { inject, defineProps } from 'vue';
+const __name = 'AuiFormItem';
+
+defineOptions({
+    name: __name
+})
+const props = defineProps({
+    label: {
+        type: String,
+        default: ''
+    },
+    labelPosition: {
+        type: String,
+        default: 'left',
+        validator: (value) => ['top', 'left'].includes(value)
+    },
+    required: {
+        type: Boolean,
+        default: false
+    },
+    errorMessage: {
+        type: String,
+        default: ''
+    }
+});
+const formItemStyle = inject('formItemStyle', {});
+</script>
+
+<style scoped lang="scss">
+@import '../style.scss';
+
+.aui-form-item {
+    display: flex;
+    gap: 5px;
+}
+
+.aui-form-item--top {
+    flex-direction: column;
+}
+
+.aui-form-item--left {
+    flex-direction: row;
+    align-items: center;
+}
+
+.aui-form-item__label {
+    display: flex;
+    font-size: $aui-font-size;
+    color: $aui-text-color;
+    align-items: center;
+    margin-right: 10px;
+    min-width: 60px;
+}
+
+.aui-form-item--top .aui-form-item__label {
+    margin-top: 10px; 
+}
+.aui-form-item__label--required::after {
+    content: '*';
+    color: $aui-danger-color;
+    margin-left: 3px;
+}
+
+.aui-form-item__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.aui-form-item__error {
+    font-size: 12px;
+    color: $aui-danger-color;
+}
+</style>

package/components/AuiGrid.vue

@@ -0,0 +1,26 @@
+<template>
+    <view class="aui-grid" :style="{gridTemplateColumns:`repeat(${colNum},1fr)`}">
+        <slot></slot>
+    </view>
+</template>
+<script setup>
+import { defineProps } from 'vue';
+const __name = 'AuiGrid';
+
+defineOptions({
+    name: __name
+})
+const props = defineProps({
+    colNum: {
+        type: Number,
+        default: 3,
+        validator: (value) => [1, 2, 3, 4, 6].includes(value)
+    },
+});
+</script>
+<style scoped>
+.aui-grid {
+   display: grid;
+   gap:10px; 
+}
+</style>

package/components/AuiGridItem.vue

@@ -0,0 +1,20 @@
+<template>
+    <view class="aui-grid-item">
+        <slot></slot>
+    </view>
+</template>
+<script setup>
+import { defineProps } from 'vue';
+const __name = 'AuiGridItem';
+
+defineOptions({
+    name: __name
+})
+</script>
+<style scoped>
+.aui-grid-item {
+    padding: 10px;
+    text-align: center;
+    cursor: pointer;
+}
+</style>

package/components/AuiIcon.vue

@@ -0,0 +1,145 @@
+<template>
+  <view :class="classes" :style="auiStyle">
+    <view v-html="svgContent" :style="style"></view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { camelize } from '@vue/shared';
+import * as svgFiles from '../icons/index.js';
+import { DOMParser, XMLSerializer } from '@xmldom/xmldom';
+
+const __name = 'AuiIcon';
+
+defineOptions({
+    name: __name
+})
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true
+  },
+  size: {
+    type: [String, Number],
+    default: '1em'
+  },
+  color: {
+    type: String,
+    default: 'currentColor'
+  },
+  class: {
+    type: [String, Array, Object],
+    default: ''
+  },
+  auiStyle: {
+    type: String,
+    default: ''
+  },
+  rotate: {
+    type: [String, Number],
+    default: 0,
+    validator: (value) => {
+      // 允许数值角度或预设值
+      return !isNaN(Number(value)) || ['90', '180', '270', 'clockwise', 'counter-clockwise'].includes(value);
+    }
+  }
+});
+
+const svgContent = ref('');
+
+const loadSvg = () => {
+  const svg = svgFiles[props.name];
+  if (svg) {
+    let parser = new DOMParser();
+    let doc = parser.parseFromString(svg, 'image/svg+xml');
+    let svgElement = doc.getElementsByTagName('svg')[0];
+    if (svgElement) {
+      // 移除 SVG 根元素的 width、height、fill 和 stroke 属性
+      svgElement.removeAttribute('width');
+      svgElement.removeAttribute('height');
+      svgElement.removeAttribute('stroke');
+      svgElement.setAttribute('stroke', props.color);
+
+      // 递归设置所有子元素的 stroke 属性
+      function setStrokeAttributes(element) {
+        if (element.hasAttribute('stroke')) {
+          element.removeAttribute('stroke');
+          element.setAttribute('stroke', props.color);
+        } else {
+          element.setAttribute('stroke', 'none');
+        }
+        const children = element.childNodes;
+        for (let i = 0; i < children.length; i++) {
+          if (children[i].nodeType === 1) {
+            setStrokeAttributes(children[i]);
+          }
+        }
+      }
+      setStrokeAttributes(svgElement);
+    }
+    let serializer = new XMLSerializer();
+    let processedSvg = serializer.serializeToString(doc);
+    svgContent.value = processedSvg;
+  } else {
+    console.error(`Icon not found: ${props.name}`);
+  }
+};
+
+loadSvg();
+
+const style = computed(() => {
+  const width = typeof props.size === 'number' ? `${props.size}px` : props.size;
+  const height = typeof props.size === 'number' ? `${props.size}px` : props.size;
+  
+  // 处理旋转逻辑
+  let rotation = '0deg';
+  
+  if (!isNaN(Number(props.rotate))) {
+    // 直接使用数值角度
+    rotation = `${Number(props.rotate)}deg`;
+  } else {
+    // 处理预设值
+    switch (props.rotate) {
+      case '90':
+      case 'clockwise':
+        rotation = '90deg';
+        break;
+      case '180':
+        rotation = '180deg';
+        break;
+      case '270':
+      case 'counter-clockwise':
+        rotation = '270deg';
+        break;
+    }
+  }
+  
+  return {
+    width,
+    height,
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    transform: `rotate(${rotation})`,
+    transition: 'transform 0.3s ease'
+  };
+});
+
+const classes = computed(() => {
+  const baseClass = `icon-${camelize(props.name)}`;
+  if (typeof props.class === 'string') {
+    return [baseClass, props.class];
+  }
+  if (Array.isArray(props.class)) {
+    return [baseClass, ...props.class];
+  }
+  if (typeof props.class === 'object') {
+    return [baseClass, ...Object.keys(props.class).filter((key) => props.class[key])];
+  }
+  return [baseClass];
+});
+</script>
+
+<style scoped>
+</style>

package/components/AuiImage.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="aui-image-container" @click="handleClick">
+    <img 
+      :src="src" 
+      :alt="alt" 
+      :class="['aui-image']"
+      :style="{ width: width ? (isNumber(width) ? width + 'px' : width) : '',borderRadius:borderRadius}"
+      @load="handleLoad"
+      @error="handleError"
+    />
+    <transition name="scale">
+      <div v-if="showModal" class="aui-image-modal" @click.self="closeModal">
+        <img :src="src" class="aui-image-modal-content" />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits, nextTick, watch } from 'vue';
+
+const _name="AuiImage";
+defineOptions({name:_name})
+/**
+ * @param {string} src - 图片地址
+ * @param {string} alt - 图片描述
+ * @param {string} mode - 图片模式，可选值为 'widthFix' 或 'heightFix'，默认为 'widthFix'
+ * @param {string|number} width - 图片宽度，默认为 ''
+ * @param {boolean} zoomable - 是否可缩放，默认为 true
+ * @event load - 图片加载完成时触发
+ * @event error - 图片加载失败时触发
+ * @event click - 图片点击时触发
+ */
+const props = defineProps({
+  src: {
+    type: String,
+    required: true
+  },
+  alt: {
+    type: String,
+    default: ''
+  },
+  mode: {
+    type: String,
+    default: 'widthFix'
+  },
+  width: {
+    type: [String, Number],
+    default: ''
+  },
+  zoomable: {
+    type: Boolean,
+    default: false
+  },
+  borderRadius:{
+    type: [String, Number],
+    default: '0px'
+  },
+  preview:{
+    type:Boolean,
+    default:true
+  }
+});
+
+const emits = defineEmits(['load', 'error', 'click']);
+
+const showModal = ref(false);
+const imgNaturalWidth = ref(0);
+const imgNaturalHeight = ref(0);
+
+const isNumber = (val) => typeof val === 'number';
+
+const handleClick = (e) => {
+  if (props.zoomable) {
+    showModal.value = true;
+    emits('click', e);
+  }
+  if(props.preview){
+   uni.previewImage({
+    urls: [props.src]
+   });
+  }
+};
+
+const closeModal = () => {
+  showModal.value = false;
+};
+
+const handleLoad = (e) => {
+  imgNaturalWidth.value = e.target.naturalWidth;
+  imgNaturalHeight.value = e.target.naturalHeight;
+  emits('load', e);
+};
+
+const handleError = (e) => {
+  emits('error', e);
+};
+</script>
+
+<style scoped lang="scss">
+@import '../style.scss';
+
+.aui-image-container {
+  display: inline-block;
+  overflow: hidden;
+  position: relative;
+  cursor: pointer;
+  
+  .aui-image {
+    display: block;
+    max-width: 100%;
+    transition: transform 0.3s ease;
+    
+    &:hover {
+      transform: scale(1.03);
+    }
+  }
+}
+
+.aui-image-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  
+  &.scale-enter-active,
+  &.scale-leave-active {
+    opacity: 1;
+  }
+  
+  .aui-image-modal-content {
+    max-width: 90%;
+    max-height: 90%;
+    object-fit: contain;
+    transform: scale(0.95);
+    transition: transform 0.3s ease;
+    
+    .scale-enter-active &,
+    .scale-leave-active & {
+      transform: scale(1);
+    }
+  }
+}
+</style>

package/components/AuiInput.vue

@@ -0,0 +1,176 @@
+<template>
+    <view :class="['aui-input-item',`aui-theme-${theme}`]">
+        <view class="aui-input-befor">
+            <slot name="befor"></slot>
+        </view>
+        <view class="aui-input-content">
+            <input 
+                :type="type" 
+                :placeholder="placeholder" 
+                v-model="inputValue"
+                :class="['aui-input', `aui-input-${size}`,`aui-input-align-${textAlign}`]" 
+                :readonly="readonly" 
+                :disabled="disabled" 
+                @input="handleInput" 
+                :style="`height:${height};line-height:${height}`"
+                @blur="handleBlur"
+            />
+        </view>
+        <view class="aui-input-after">
+            <slot name="after"></slot>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, ref, watch } from 'vue';
+const __name = 'AuiInput';
+
+// 这里的 defineOptions 可能不是 Vue 内置方法，暂时注释掉
+defineOptions({
+    name: __name
+})
+
+const props = defineProps({
+    type: {
+        type: String,
+        default: 'text'
+    },
+    placeholder: {
+        type: String,
+        default: ''
+    },
+    size: {
+        type: String,
+        default: 'normal',
+        validator: (value) => ['normal', 'small', 'large'].includes(value)
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    modelValue: {
+        type: [String, Number],
+        default: ''
+    },
+    theme: {
+        type: String,
+        default: 'normal',
+        validator: (value) => ['normal', 'flat', 'grey', 'write', 'none'].includes(value)
+    },
+    height: {
+        type: String,
+        default: '44px',
+    },
+    textAlign: {
+        type: String,
+        default: 'left',
+        validator: (value) => ['left', 'center', 'right'].includes(value)
+    },
+    readonly: {
+        type: Boolean,
+        default: false, 
+    }
+});
+
+const emits = defineEmits(['input', 'update:modelValue', 'blur']);
+
+const inputValue = ref(props.modelValue);
+
+// 监听 props.modelValue 的变化
+watch(() => props.modelValue, (newValue) => {
+    console.log('props.modelValue 变化，新值:', newValue);
+    inputValue.value = newValue;
+});
+
+const handleInput = (e) => {
+    let newValue;
+    if (e.detail && typeof e.detail.value !== 'undefined') {
+        newValue = e.detail.value;
+    } else {
+        newValue = e.target ? e.target.value : undefined;
+    }
+    if (newValue) {
+        inputValue.value = newValue;
+        console.log('输入事件触发，新值:', newValue);
+        emits('input', newValue);
+        emits('update:modelValue', newValue);
+    }
+};
+
+const handleBlur = (e) => {
+    emits('blur', e);
+};
+</script>
+
+<style scoped lang="scss">
+@import '../style.scss';
+
+.aui-input-item {
+    display: flex;
+    align-items: center;
+    border: 1px solid $aui-border-color;
+    border-radius: 8px;
+    padding: 0 10px;
+}
+.aui-input-befor {
+    margin-right: 10px;
+    margin-top: -5px; 
+}
+.aui-input-after {
+    margin-left: 10px;
+    margin-top: -5px; 
+}
+.aui-input-content {
+    flex: 1; 
+}
+.aui-input {
+    font-size: $aui-font-size;
+    outline: none;
+    transition: border-color 0.3s;
+    height: 36px;
+    line-height: 36px;
+    &:focus {
+        border-color: $aui-primary-color;
+    }
+}
+.aui-theme-flat{
+    background-color: #F5F5F5;
+    border: none;
+    border-radius: 10px; 
+}
+.aui-theme-flat input{border:none;}
+.aui-theme-write{
+    background-color: #FFFFFF;
+    border: 1px solid #E5E7EB;
+    border-radius: 10px;
+}
+.aui-theme-write input{border:none}
+.aui-theme-none{
+    background-color: #FFFFFF;
+    border:none;
+}
+.aui-theme-none input{border:none;height: 20px;line-height: 20px;}
+.aui-theme-grey{
+    background-color: #F5F5F5;
+    border: none;
+    border-radius: 10px; 
+}
+.aui-theme-grey input{border:none;}
+.aui-input-small {
+    font-size: 12px;
+}
+
+.aui-input-large {
+    font-size: 18px;
+}
+.aui-input-align-left {
+    text-align: left; 
+}
+.aui-input-align-center {
+    text-align: center; 
+}
+.aui-input-align-right {
+    text-align: right; 
+}
+</style>