@skyfox2000/webui 0.1.0

package/src/components/form/cascader/index.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, useAttrs, watch } from 'vue';
+import {
+   circleLoading,
+   useInputFactory,
+   OptionCommProps,
+   OptionItemProps,
+   loadOption,
+   unloadOption,
+   formValidate,
+} from '@skyfox2000/webbase';
+import { Cascader } from 'ant-design-vue';
+import { DefaultOptionType, ValueType } from 'ant-design-vue/es/vc-cascader/Cascader';
+import { IUrlInfo } from '@skyfox2000/fapi';
+
+const props = defineProps(OptionCommProps);
+
+// 关闭自动继承属性到根元素
+defineOptions({
+   inheritAttrs: false,
+});
+const attrs = useAttrs(); // 手动获取 $attrs
+
+const url = ref<IUrlInfo>({
+   ...props.url,
+   url: props.url?.url || '',
+   fieldMap: props.fieldMap || props.url?.fieldMap,
+   params: props.params || props.url?.params,
+   loadingText: false,
+});
+
+const inputFactory = useInputFactory();
+const { editorCtrl, errInfo, labelText } = inputFactory;
+
+const placeholder = ref(attrs.placeholder);
+watch(
+   () => url.value.loading,
+   (newVal) => {
+      if (newVal) placeholder.value = '';
+      else if (!placeholder.value) placeholder.value = '请选择' + labelText.value;
+   },
+   { immediate: true },
+);
+
+
+const emit = defineEmits(['change', 'update:labels', 'update:value']);
+inputFactory.inputEmit = emit;
+/**
+ * 实际的选择项
+ */
+const selectOptions = ref<OptionItemProps[]>([]);
+
+const onChanged = (_: ValueType, selected: DefaultOptionType[]) => {
+   if (!selected || selected.length === 0) {
+      emit('update:labels', []);
+      emit('update:value', []);
+      return;
+   }
+   const labels: string[] = selected.map((item) => item.label!);
+
+   emit('update:labels', labels);
+   emit(
+      'update:value',
+      selected.map((item) => item.value),
+   );
+   if (errInfo?.value.errClass && editorCtrl) {
+      /// 重新开始验证
+      formValidate(editorCtrl);
+   }
+};
+
+onMounted(() => {
+   if (url.value && !url.value.fieldMap) {
+      url.value.fieldMap = {
+         title: 'Name',
+         label: 'Name',
+         value: 'Id',
+         key: 'Id',
+      };
+   }
+   loadOption(props.autoload, props, selectOptions, inputFactory, url.value, url.value.params);
+});
+
+onUnmounted(() => {
+   unloadOption(props, inputFactory);
+});
+</script>
+<template>
+   <div>
+      <div v-if="!selectOptions.length" class="absolute z-10 mt-[5px] mr-[10px] text-[#999] flex items-center">
+         <circleLoading class="text-[#555] mx-[5px] !ml-[10px] !w-4 !h-4" />
+         <span>数据加载中...</span>
+      </div>
+      <Cascader
+         :options="selectOptions"
+         :class="[errInfo?.errClass]"
+         :allow-clear="true"
+         :placeholder="selectOptions.length > 0 ? '请选择' + labelText : ''"
+         @change="onChanged"
+         v-bind="attrs"
+      />
+   </div>
+</template>
+
+<style scoped>
+.error :deep(.ant-select-selector) {
+   border-color: #ef444480;
+   box-shadow: 0 0 3px 0 #ff4d4f;
+}
+</style>

package/src/components/form/checkbox/index.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, useAttrs } from 'vue';
+import { Checkbox, CheckboxGroup } from 'ant-design-vue';
+import {
+   // circleLoading,
+   getSelectedLabels,
+   loadOption,
+   onOptionChanged,
+   OptionItemProps,
+   SelectValue,
+   unloadOption,
+   useInputFactory,
+} from '@skyfox2000/webbase';
+import { CheckboxValueType } from 'ant-design-vue/es/checkbox/interface';
+import { OptionCommProps } from '@skyfox2000/webbase';
+import { IUrlInfo } from '@skyfox2000/fapi';
+
+const props = defineProps({
+   ...OptionCommProps,
+   nodata: {
+      type: String,
+      default: '',
+   },
+   /**
+    * 换行数量
+    */
+   wrap: {
+      type: Number,
+   },
+   disabledItems: {
+      type: Array as () => string[],
+   },
+});
+// 关闭自动继承属性到根元素
+defineOptions({
+   inheritAttrs: false,
+});
+const attrs = useAttrs(); // 手动获取 $attrs
+
+const url = ref<IUrlInfo>({
+   ...props.url,
+   url: props.url?.url || '',
+   fieldMap: props.fieldMap || props.url?.fieldMap,
+   params: props.params || props.url?.params,
+   loadingText: false,
+});
+
+const inputFactory = useInputFactory();
+const { errInfo } = inputFactory;
+const emit = defineEmits(['change', 'update:labels']);
+inputFactory.inputEmit = emit;
+
+const checkboxOptions = ref<OptionItemProps[]>([]);
+
+const onChanged = (e: CheckboxValueType[]) => {
+   const checkedValue = e;
+   const selectedOptions = onOptionChanged(props, checkedValue as SelectValue, checkboxOptions, inputFactory);
+   const labels: string[] = getSelectedLabels(selectedOptions);
+   emit('update:labels', labels);
+};
+
+onMounted(() => {
+   if (url.value && !url.value.fieldMap) {
+      url.value.fieldMap = {
+         title: 'Name',
+         label: 'Name',
+         value: 'Id',
+         key: 'Id',
+      };
+   }
+   loadOption(props.autoload, props, checkboxOptions, inputFactory, url.value, url.value.params);
+});
+onUnmounted(() => {
+   unloadOption(props, inputFactory);
+});
+</script>
+<template>
+   <div class="min-h-[32px] pt-[5px]">
+      <!-- TODO 获取结果通知 -->
+      <!-- <div v-if="!checkboxOptions.length" class="absolute z-10 mt-[5px] mr-[10px] text-[#999] flex items-center">
+         <circleLoading class="text-[#555] mx-[5px] !ml-[10px] !w-4 !h-4" />
+         <span>数据加载中...</span>
+      </div> -->
+      <CheckboxGroup @change="onChanged" class="w-full mb-[-3px]" v-bind="attrs">
+         <template v-if="checkboxOptions.length > 0">
+            <Checkbox v-for="item in checkboxOptions" :key="item.value" :value="item.value"
+               :disabled="item.disabled || (item.value && disabledItems && disabledItems.indexOf(item.value.toString()) > -1)"
+               :class="[
+                  errInfo?.errClass === 'error' ? 'error !text-red-400' : '',
+                  'text-nowrap',
+                  'pb-1',
+                  wrap ? `w-1/${props.wrap}` : '',
+               ]">
+               {{ item.label }}
+            </Checkbox>
+         </template>
+         <template v-else-if="nodata">
+            <div class="text-center text-gray-500">{{ nodata }}</div>
+         </template>
+      </CheckboxGroup>
+   </div>
+</template>
+<style scoped>
+.error :deep(input + span) {
+   border-color: #ff717190;
+   box-shadow: 0 0 3px 0 #ff4d4f;
+}
+</style>

package/src/components/form/datePicker/index.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { DatePicker } from 'ant-design-vue';
+import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
+import { formValidate, useInputFactory } from '@skyfox2000/webbase';
+const props = defineProps<{
+   valueFormat?: string;
+}>();
+
+const { editorCtrl, labelText, errInfo } = useInputFactory();
+const onBlur = () => {
+   if (errInfo?.value.errClass && editorCtrl) {
+      /// 重新开始验证
+      formValidate(editorCtrl);
+   }
+};
+
+const dateFormat = ref<string>(props.valueFormat ?? 'YYYY-MM-DD');
+</script>
+<template>
+   <DatePicker
+      :class="[errInfo?.errClass === 'error' ? 'error !border-red-300 shadow-[0_0_3px_0px_#ff4d4f]' : '']"
+      class="w-full"
+      :placeholder="'请选择' + labelText"
+      :locale="locale"
+      :valueFormat="dateFormat"
+      @blur="onBlur"
+   />
+</template>

package/src/components/form/index.ts

@@ -0,0 +1,54 @@
+import AceEditor from './aceEditor/index.vue';
+export { AceEditor };
+
+import AutoComplete from './autoComplete/index.vue';
+export { AutoComplete };
+
+import Cascader from './cascader/index.vue';
+export { Cascader };
+
+import Checkbox from './checkbox/index.vue';
+export { Checkbox };
+
+import DatePicker from './datePicker/index.vue';
+export { DatePicker };
+
+import Input from './input/index.vue';
+export { Input };
+import InputIcon from './input/inputIcon.vue';
+export { InputIcon };
+import InputPassword from './input/inputPassword.vue';
+export { InputPassword };
+import InputNumber from './input/inputNumber.vue';
+export { InputNumber };
+
+import PropEditor from './propEditor/index.vue';
+export { PropEditor };
+
+import Radio from './radio/index.vue';
+export { Radio };
+import RadioStatus from './radio/radioStatus.vue';
+export { RadioStatus };
+
+import RangePicker from './rangePicker/index.vue';
+export { RangePicker };
+
+import Select from './select/index.vue';
+export { Select };
+
+import Switch from './switch/index.vue';
+export { Switch };
+
+import Textarea from './textarea/index.vue';
+export { Textarea };
+
+import Transfer from './transfer/index.vue';
+export { Transfer };
+import TransferTable from './transfer/transferTable.vue';
+export { TransferTable };
+
+import TreeSelect from './treeSelect/index.vue';
+export { TreeSelect };
+
+import UploadList from './upload/uploadList.vue';
+export { UploadList };

package/src/components/form/input/index.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { formValidate, useInputFactory } from '@skyfox2000/webbase';
+import { Input } from 'ant-design-vue';
+import { ref, watch } from 'vue';
+
+const { editorCtrl, labelText, errInfo } = useInputFactory();
+const onBlur = () => {
+   if (errInfo?.value.errClass && editorCtrl) {
+      /// 重新开始验证
+      formValidate(editorCtrl);
+   }
+};
+
+const props = defineProps<{
+   value?: any;
+}>();
+const emit = defineEmits(['update:value']);
+// 内部值，拦截外部传入的 value
+const innerValue = ref(props.value);
+
+// 监听外部 value 的变化，更新内部值
+watch(
+   () => props.value,
+   (newValue) => {
+      innerValue.value = newValue;
+   },
+   { immediate: true }, // 立即同步初始值
+);
+
+watch(
+   () => innerValue.value,
+   (newValue) => {
+      if (innerValue.value === '') {
+         emit('update:value', undefined);
+         return;
+      }
+      emit('update:value', newValue);
+   },
+);
+
+const onClear = () => {
+   if (innerValue.value === '') {
+      innerValue.value = undefined;
+   }
+};
+</script>
+<template>
+   <Input
+      :class="[
+         errInfo?.errClass,
+         errInfo?.errClass === 'error' && !$slots.addonBefore && !$slots.addonAfter
+            ? '!border-red-300 shadow-[0_0_3px_0px_#ff4d4f]'
+            : '',
+      ]"
+      v-model:value="innerValue"
+      autocomplete="new-password"
+      :allow-clear="true"
+      :placeholder="'请输入' + labelText"
+      @blur="onBlur"
+      @change="onClear"
+      v-bind="$attrs"
+   >
+      <template #addonBefore v-if="$slots.addonBefore">
+         <slot name="addonBefore"></slot>
+      </template>
+      <template #addonAfter v-if="$slots.addonAfter">
+         <slot name="addonAfter"></slot>
+      </template>
+   </Input>
+</template>

package/src/components/form/input/inputIcon.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { ToolIcon } from '../../common';
+import Input from './index.vue';
+import { ref, watch } from 'vue';
+const props = defineProps<{
+   value?: string | null;
+}>();
+const emit = defineEmits(['update:value']);
+const innerValue = ref<string | undefined>(undefined);
+
+watch(
+   () => props.value,
+   (newValue) => {
+      innerValue.value = newValue ?? undefined;
+   },
+   { immediate: true },
+);
+
+watch(
+   () => innerValue.value,
+   (newValue) => {
+      emit('update:value', newValue);
+   },
+);
+</script>
+<template>
+   <Input :class="['w-[80%]']" v-model:value="innerValue" v-bind="$attrs">
+      <template #addonBefore>
+         <ToolIcon class="!w-4 !h-4" :icon="innerValue" />
+      </template>
+   </Input>
+</template>
+<style scoped>
+.error :deep(.ant-input-group-addon),
+.error :deep(.ant-input-affix-wrapper) {
+   border-color: #ff4d4f80;
+   box-shadow: 0 0 3px 0 #ff4d4f;
+}
+</style>

package/src/components/form/input/inputNumber.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { formValidate, useInputFactory } from '@skyfox2000/webbase';
+import { InputNumber } from 'ant-design-vue';
+
+const { editorCtrl, labelText, errInfo } = useInputFactory();
+const onBlur = () => {
+   if (errInfo?.value.errClass && editorCtrl) {
+      /// 重新开始验证
+      formValidate(editorCtrl);
+   }
+};
+</script>
+<template>
+   <InputNumber
+      :class="[errInfo?.errClass === 'error' ? 'error !border-red-300 shadow-[0_0_3px_0px_#ff4d4f]' : '']"
+      @blur="onBlur"
+      :allow-clear="false"
+      :placeholder="'请输入' + labelText"
+      class="w-[50%]"
+      v-bind="$attrs"
+   >
+   </InputNumber>
+</template>

package/src/components/form/input/inputPassword.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { formValidate, useInputFactory } from '@skyfox2000/webbase';
+import { InputPassword } from 'ant-design-vue';
+
+const { editorCtrl, labelText, errInfo } = useInputFactory();
+const onBlur = () => {
+   if (errInfo?.value.errClass && editorCtrl) {
+      /// 重新开始验证
+      formValidate(editorCtrl);
+   }
+};
+</script>
+<template>
+   <InputPassword
+      :class="errInfo?.errClass === 'error' ? ['error', '!border-red-300', 'shadow-[0_0_3px_0px_#ff4d4f]'] : ''"
+      :allow-clear="true"
+      autocomplete="new-password"
+      :placeholder="'请输入' + labelText"
+      @blur="onBlur"
+      v-bind="$attrs"
+   />
+</template>

package/src/components/form/propEditor/index.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { Input, Button } from 'ant-design-vue';
+
+interface ConfigItem {
+   id: number;
+   field: string;
+   value: string;
+}
+
+const props = defineProps<{
+   value: Record<string, string>;
+   labelHolder?: string;
+   valueHolder: string;
+}>();
+const emit = defineEmits(['update:value']);
+
+const configList = ref<ConfigItem[]>([]);
+let isInnerChange = false; // 标记是否为内部输入变更
+
+const initConfigList = () => {
+   configList.value = Object.entries(props.value).map(([field, value]) => ({
+      id: Date.now() + Math.random(),
+      field,
+      value,
+   }));
+};
+
+watch(() => props.value, () => {
+   if (!isInnerChange) {
+      initConfigList();
+   }
+   isInnerChange = false;
+}, { immediate: true });
+
+const updateConfig = () => {
+   const newConfig = configList.value.reduce((acc: Record<string, string>, item: ConfigItem) => {
+      if (item.field) {
+         acc[item.field] = item.value;
+      }
+      return acc;
+   }, {} as Record<string, string>);
+   isInnerChange = true;
+   emit('update:value', newConfig);
+};
+
+const addNewLine = () => {
+   configList.value.push({
+      id: Date.now() + Math.random(),
+      field: '',
+      value: '',
+   });
+};
+
+const handleInputChange = () => {
+   updateConfig();
+};
+</script>
+
+<template>
+   <div class="flex flex-col gap-2">
+      <div v-for="item in configList" :key="item.id" class="flex items-center gap-2">
+         <div class="w-[33%]">
+            <Input v-model:value="item.field" :title="item.field" class="w-full" :placeholder="labelHolder || '配置名'"
+               @input="handleInputChange" />
+         </div>
+         <div class="w-[3%]">
+            =
+         </div>
+         <div class="w-[64%]">
+            <Input v-model:value="item.value" :placeholder="valueHolder" @input="handleInputChange"
+               :title="item.value" />
+         </div>
+      </div>
+      <Button @click="addNewLine"
+         class="mt-1 w-[80px] !text-[12px] text-[#666] bg-[#e6f7ff] border-[#b3e0ff] hover:bg-[#b3e0ff] hover:border-[#8abeff]"
+         size="small">
+         新增配置行
+      </Button>
+   </div>
+</template>

package/src/components/form/radio/index.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch, useAttrs } from 'vue';
+import { Radio, RadioChangeEvent, RadioGroup } from 'ant-design-vue';
+import {
+   OptionCommProps,
+   loadOption,
+   onOptionChanged,
+   OptionItemProps,
+   unloadOption,
+   useInputFactory,
+   getSelectedLabels,
+   SelectValue,
+} from '@skyfox2000/webbase';
+import { IUrlInfo } from '@skyfox2000/fapi';
+
+const props = defineProps({
+   ...OptionCommProps,
+   value: {
+      type: [String, Number, null, Array],
+      default: undefined,
+   },
+   nodata: {
+      type: String,
+      default: '无数据',
+   },
+   /**
+    * 换行数量
+    */
+   wrap: {
+      type: Number,
+   },
+});
+
+// 关闭自动继承属性到根元素
+defineOptions({
+   inheritAttrs: false,
+});
+const attrs = useAttrs(); // 手动获取 $attrs
+
+const url = ref<IUrlInfo>({
+   ...props.url,
+   url: props.url?.url || '',
+   fieldMap: props.fieldMap || props.url?.fieldMap,
+   params: props.params || props.url?.params,
+   loadingText: false,
+});
+
+const innerValue = ref(props.value);
+
+const inputFactory = useInputFactory();
+const { errInfo } = inputFactory;
+const radioOptions = ref<OptionItemProps[]>([]);
+
+const emit = defineEmits(['change', 'update:value', 'update:labels']);
+inputFactory.inputEmit = emit;
+
+watch(
+   () => innerValue.value,
+   (val) => {
+      emit('update:value', val);
+   },
+);
+
+// 检查两个值是否相等，支持数组比较
+const isValueEqual = (val1: any, val2: any) => {
+   if (typeof val1 === 'object' && typeof val2 === 'object') {
+      const val = JSON.stringify(val1) === JSON.stringify(val2);
+      if (val) innerValue.value = val1;
+      return val;
+   }
+   return val1 === val2;
+};
+
+const onChanged = (e: RadioChangeEvent) => {
+   const checkedValue = e.target.value;
+   const selectedOptions = onOptionChanged(props, checkedValue as SelectValue, radioOptions, inputFactory);
+   const labels: string[] = getSelectedLabels(selectedOptions);
+   emit('update:labels', labels);
+};
+
+onMounted(() => {
+   if (url.value && !url.value.fieldMap) {
+      url.value.fieldMap = {
+         label: 'Name',
+         value: 'Id',
+         key: 'Id',
+      };
+   }
+   loadOption(props.autoload, props, radioOptions, inputFactory, url.value, url.value?.params);
+});
+onUnmounted(() => {
+   unloadOption(props, inputFactory);
+});
+</script>
+<template>
+   <div class="min-h-[32px] pt-1">
+      <RadioGroup
+         v-model:value="innerValue"
+         :autocheck="false"
+         @change="onChanged"
+         class="w-full flex align-items flex-wrap mb-[-3px]"
+         v-bind="attrs"
+      >
+         <template v-if="radioOptions.length > 0">
+            <template v-for="item in radioOptions" :key="item.value">
+               <Radio
+                  :checked="isValueEqual(item.value, props.value)"
+                  v-if="item.visible !== false"
+                  :value="item.value"
+                  :class="[
+                     errInfo?.errClass === 'error' ? 'error !text-red-400' : '',
+                     'text-nowrap',
+                     'pb-1',
+                     wrap ? `w-1/${props.wrap}` : '',
+                  ]"
+               >
+                  {{ item.label }}
+               </Radio>
+            </template>
+         </template>
+         <template v-else-if="nodata">
+            <div class="text-center text-gray-500">{{ nodata }}</div>
+         </template>
+      </RadioGroup>
+   </div>
+</template>
+<style scoped>
+.error :deep(input + span) {
+   border-color: #ff7171;
+   box-shadow: 0 0 3px 0 #ff4d4f;
+}
+</style>