paas-component-library 1.0.74 → 1.0.76

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "paas-component-library",
   "private": false,
-  "version": "1.0.74",
+  "version": "1.0.76",
   "type": "module",
   "files": [
     "dist",
@@ -48,7 +48,14 @@
     "./FormSwitch": "./src/components/form/FormSwitch/index.vue",
     "./FormDateRange": "./src/components/form/FormDateRange/index.vue",
     "./FormTree": "./src/components/form/FormTree/index.vue",
-    "./FormTextarea": "./src/components/form/FormTextarea/index.vue"
+    "./FormTextarea": "./src/components/form/FormTextarea/index.vue",
+    "./PaasRadio": "./src/components/PaasRadio/index.vue",
+    "./PaasCheckbox": "./src/components/PaasCheckbox/index.vue",
+    "./PaasTextarea": "./src/components/PaasTextarea/index.vue",
+    "./PaasSwitch": "./src/components/PaasSwitch/index.vue",
+    "./PaasDateRange": "./src/components/PaasDateRange/index.vue",
+    "./PaasInput": "./src/components/PaasInput/index.vue",
+    "./PaasNumber": "./src/components/PaasNumber/index.vue"
   },
   "scripts": {
     "dev": "vite",

package/src/components/PaasCheckbox/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <a-checkbox-group v-model:value="innerValue" :options="processedOptions" :disabled="disabled" v-bind="$attrs" />
+</template>
+
+<script>
+export default {
+  name: "PaasCheckbox",
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    processedOptions() {
+      const sourceOptions = this.options.length > 0 ? this.options : this.data;
+      return sourceOptions.map(item => ({
+        label: item.label,
+        value: item.value
+      }));
+    },
+    innerValue: {
+      get() {
+        return this.modelValue;
+      },
+      set(val) {
+        this.$emit("update:modelValue", val);
+      },
+    },
+  },
+};
+</script>

package/src/components/PaasDate/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <a-date-picker v-bind="$attrs" :show-time="showTime" :readonly="readonly" :disabled="disabled" :value="modelValue"
-                 :format="format" :picker="type" @change="handleChange"  :placeholder="placeholder" style="width: 100%;"/>
+  <a-date-picker :show-time="showTime" :readonly="readonly" :disabled="disabled" :value="modelValue"
+                 :format="format" :picker="type" @change="handleChange"  :placeholder="placeholder" style="width: 100%;" v-bind="$attrs"/>
 </template>
 <script>
 export default {

package/src/components/PaasDateRange/index.vue

@@ -0,0 +1,79 @@
+<template>
+  <a-range-picker v-model:value="rangeValue" :show-time="showTime" :readonly="readonly" :disabled="disabled"
+    :format="format" :picker="type" :placeholder="placeholder" style="width: 100%;" v-bind="$attrs" />
+</template>
+
+<script>
+import dayjs from "dayjs";
+import weekday from "dayjs/plugin/weekday";
+import localeData from "dayjs/plugin/localeData";
+
+dayjs.extend(weekday);
+dayjs.extend(localeData);
+dayjs.locale("zh-cn");
+
+export default {
+  name: "PaasDateRange",
+  inheritAttrs: false, // 禁用自动继承，手动控制透传
+  emits: ["update:modelValue"],
+  props: {
+    placeholder: {
+      type: [Array, String],
+      default: () => ["开始时间", "结束时间"]
+    },
+    type: {
+      type: String,
+      default: "date"
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    modelValue: {
+      type: Object,
+      default: () => ({ start: null, end: null })
+    },
+    showTime: {
+      type: Boolean,
+      default: false
+    },
+    format: {
+      type: String,
+      default: "YYYY-MM-DD"
+    },
+    isJoin: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    rangeValue: {
+      get() {
+        const { start, end } = this.modelValue || {};
+        return [
+          start ? dayjs(start) : null,
+          end ? dayjs(end) : null
+        ];
+      },
+      set([start, end]) {
+        let startStr = start ? start.format(this.format) : null;
+        let endStr = end ? end.format(this.format) : null;
+
+        if (this.isJoin && startStr && endStr) {
+          startStr += " 00:00:00";
+          endStr += " 23:59:59";
+        }
+
+        this.$emit("update:modelValue", {
+          start: startStr,
+          end: endStr
+        });
+      }
+    }
+  }
+};
+</script>

package/src/components/PaasEditor/index.vue

@@ -1,7 +1,7 @@
 <template>
-    <quill-editor v-bind="$attrs" ref="editor" v-model:content="htmlValue" :options="editorOption" contentType="html"
+    <quill-editor ref="editor" v-model:content="htmlValue" :options="editorOption" contentType="html"
         @update:content="updateValue($event)" :style='"height: " + this.height + "px;"'
-        :readOnly="see || readonly" :placeholder="placeholder"></quill-editor>
+        :readOnly="see || readonly" :placeholder="placeholder" v-bind="$attrs"></quill-editor>
 </template>
 
 <script>

package/src/components/PaasForm/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <a-form v-bind="$attrs" :ref="refName" :model="model" :rules="rules" @finish="submitForm"
-    @finishFailed="onFinishFailed" :labelAlign="labelAlign">
+  <a-form :ref="refName" :model="model" :rules="rules" @finish="submitForm"
+    @finishFailed="onFinishFailed" :labelAlign="labelAlign" v-bind="$attrs">
     <a-row :gutter="16"
       :style="{ backgroundColor: 'var(--background-color)', padding: colSpan === 24 ? '0 400px' : '0px' }">
       <slot></slot>

package/src/components/PaasImageViewer/index.vue

@@ -2,8 +2,8 @@
     <div :class="containerClass" :style="containerStyle">
         <template v-if="hasValidImages">
             <a-image-preview-group :preview="{ visible, onVisibleChange: vis => (visible = vis) }">
-                <a-image :preview="preview" v-bind="$attrs" v-for="(url, index) in displayedImages" :src="url"
-                    :key="index" />
+                <a-image :preview="preview" v-for="(url, index) in displayedImages" :src="url"
+                    :key="index" v-bind="$attrs" />
             </a-image-preview-group>
         </template>
         <template v-else>

package/src/components/PaasInput/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <a-input :type="type" :value="modelValue" @input="updateValue" :disabled="disabled || readonly"  :placeholder="placeholder" style="width: 100%;" v-bind="$attrs"/>
+</template>
+
+<script>
+export default {
+  name: "PaasInput",
+  inheritAttrs: false, // 禁用自动继承，手动控制透传
+  props: {
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    type: {
+      type: String,
+      default: "text"
+    },
+    modelValue: {
+      type: [String, Number, Object],
+      default: ""
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  methods: {
+    updateValue(event) {
+      this.$emit("update:modelValue", event.target.value);
+    }
+  }
+};
+</script>

package/src/components/PaasMenu/index.vue

@@ -9,7 +9,7 @@
             </div>
         </div>
         <a-menu ref="menus" :theme="theme" :selectedKeys="selectedKeys" :open-keys="openKeys" @openChange="onOpenChange"
-            v-bind="$attrs" :inline-collapsed="inlineCollapsed" :mode="mode">
+            :inline-collapsed="inlineCollapsed" :mode="mode" v-bind="$attrs">
             <template v-for="item in data" :key="item.id">
                 <a-sub-menu v-if="item.children && item.children.length" :key="item.key" :title="item.title"
                     :icon="renderIcon(item)">

package/src/components/PaasNumber/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <a-input-number v-model:value="innerValue" :disabled="disabled || readonly" :min="min" :max="max"
+    :placeholder="placeholder" style="width: 100%;" v-bind="$attrs" />
+</template>
+
+<script>
+export default {
+  name: "PaasNumber",
+  inheritAttrs: false, // 禁用自动继承，手动控制透传
+  props: {
+    placeholder: String,
+    modelValue: [String, Number],
+    readonly: Boolean,
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    min: Number,
+    max: Number
+  },
+  computed: {
+    innerValue: {
+      get() {
+        return this.modelValue;
+      },
+      set(val) {
+        this.$emit("update:modelValue", val);
+      },
+    },
+  },
+};
+</script>

package/src/components/PaasPageSelect/index.vue

@@ -1,6 +1,7 @@
 <template>
     <a-select :mode="multiple ? 'multiple' : undefined" :disabled="disabled" :value="value" :options="mergedData"
-        :loading="loading" :allowClear="true" :placeholder="placeholder" :style="style" @change="change">
+        :loading="loading" :allowClear="true" :placeholder="placeholder" :style="style" v-bind="$attrs"
+        @change="change">
         <template #dropdownRender="{ menuNode }">
             <a-input-search v-model:value="filter" placeholder="搜索" style="width: 100%; margin-bottom: 8px;"
                 @search="search" />

package/src/components/PaasPageTable/index.vue

@@ -79,10 +79,10 @@
           </a-dropdown>
         </a-space>
       </template>
-      <a-table v-bind="$attrs" :size="currentSize" ref="table" :data-source="dataList" :columns="filteredColumns"
+      <a-table :size="currentSize" ref="table" :data-source="dataList" :columns="filteredColumns"
         @change="pageClick" :pagination="noPage ? false : page" :row-key="id" :scroll="scroll" :bordered="border"
         :row-selection="checkbox ? rowSelection : undefined" :customRow="customRow" :locale="{ emptyText: emptyText }"
-        :class="{ 'striped-table': stripe }">
+        :class="{ 'striped-table': stripe }" v-bind="$attrs">
         <!-- 操作列和序号列 -->
         <template #bodyCell="{ column, record, index }">
           <template v-if="column.key === 'action'">

package/src/components/PaasRadio/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <a-radio-group v-model:value="innerValue" :options="processedOptions" :disabled="disabled" v-bind="$attrs" />
+</template>
+
+<script>
+export default {
+  name: "PaasRadio",
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: [String, Number, Boolean],
+      default: ""
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    processedOptions() {
+      const sourceOptions = this.options.length > 0 ? this.options : this.data;
+      return sourceOptions.map(item => ({
+        label: item.label,
+        value: item.value
+      }));
+    },
+    innerValue: {
+      get() {
+        return this.modelValue;
+      },
+      set(val) {
+        this.$emit("update:modelValue", val);
+      },
+    },
+  },
+};
+</script>

package/src/components/PaasSelect/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <a-select v-bind="$attrs" :options="internalOptions" :mode="multiple ? 'multiple' : undefined" :value="stringValue"
+  <a-select :options="internalOptions" :mode="multiple ? 'multiple' : undefined" :value="stringValue"
     @update:value="handleValueChange" :disabled="disabled" :allowClear="true" :style="style"
-    :placeholder="placeholder" />
+    :placeholder="placeholder"  v-bind="$attrs" />
 </template>
 
 <script>

package/src/components/PaasSwitch/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <a-switch :checked="modelValue" :checked-children="checkedText"
+    :un-checked-children="unCheckedText" :disabled="disabled" @change="handleChange" v-bind="$attrs" />
+</template>
+
+<script>
+export default {
+  name: "PaasSwitch",
+  inheritAttrs: false, // 禁用自动继承，手动控制透传
+  props: {
+    modelValue: {
+      type: [Number, Boolean],
+      required: true,
+    },
+    checkedText: {
+      type: String,
+      default: "开",
+    },
+    unCheckedText: {
+      type: String,
+      default: "关",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    handleChange(value) {
+      // Ant Design Vue 的 a-switch 在 change 事件中返回的是 value（非对象）
+      this.$emit("update:modelValue", value);
+      this.$emit("change", value);
+    },
+  },
+};
+</script>

package/src/components/PaasTextarea/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <a-textarea :type="type" :value="modelValue" @input="updateValue" :disabled="disabled || readonly" :rows="rows" style="width: 100%;" :placeholder="placeholder" v-bind="$attrs"/>
+</template>
+
+<script>
+export default {
+  name: "PaasTextarea",
+  inheritAttrs: false, // 禁用自动继承，手动控制透传
+  props: {
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    rows: {
+      type: Number,
+      default: 10
+    },
+    type: {
+      type: String,
+      default: "text"
+    },
+    modelValue: {
+      type: [String, Number, Object],
+      default: ""
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  methods: {
+    updateValue(event) {
+      this.$emit("update:modelValue", event.target.value);
+    }
+  }
+};
+</script>

package/src/components/PaasTree/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <a-tree-select v-bind="$attrs" :show-search="true" :allow-clear="true" :tree-data="datas" v-model:value="value"
+  <a-tree-select :show-search="true" :allow-clear="true" :tree-data="datas" v-model:value="value"
     :mode="multiple ? 'multiple' : undefined" :disabled="see || disabled" tree-node-filter-prop="label" :treeLine="true"
-    :fieldNames="fieldNames" class="paas-select" :tree-default-expand-all="open" :placeholder="placeholder" style="width: 100%;"></a-tree-select>
+    :fieldNames="fieldNames" class="paas-select" :tree-default-expand-all="open" :placeholder="placeholder" style="width: 100%;" v-bind="$attrs"></a-tree-select>
 </template>
 <script>
 export default {

package/src/components/PaasUpload/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
-    <a-upload v-bind="$attrs" :action="currentUploadUrl" :file-list="fileList" :accept="accept" :multiple="multiple"
+    <a-upload :action="currentUploadUrl" :file-list="fileList" :accept="accept" :multiple="multiple"
       :disabled="isLoading || see" :show-upload-list="false" :before-upload="beforeUpload" @preview="previewFile"
-      @remove="deleteFile">
+      @remove="deleteFile" v-bind="$attrs">
       <a-button :loading="isLoading" :disabled="see" ref="uploadButton" v-show="false">
       </a-button>
     </a-upload>
-    <a-button :loading="isLoading" :disabled="see" type="primary" v-bind="$attrs" v-if="closeButton"
-      @click="$refs.uploadButton.$el.click()">
+    <a-button :loading="isLoading" :disabled="see" type="primary" v-if="closeButton"
+      @click="$refs.uploadButton.$el.click()" v-bind="$attrs">
       <paas-icon v-if="icon" :icon="icon" />
       <span v-if="label">{{ label }}</span>
     </a-button>

package/src/components/PaasUploadModal/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-modal v-bind="$attrs" v-model:open="isOpen" :title="title" :closable="false" :mask-closable="false">
+  <a-modal v-model:open="isOpen" :title="title" :closable="false" :mask-closable="false" v-bind="$attrs">
     <a-upload-dragger v-model:fileList="selectList" :before-upload="beforeUpload" :name="multiple ? 'files' : 'file'"
       :placeholder="placeholder" style="width: 100%;">
       <p class="ant-upload-drag-icon">

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

@@ -2,9 +2,9 @@
   <a-col :span="colSpan ? colSpan : defaultColSpan">
     <a-form-item :label="label" :name="name" :label-col="{ style: { width: !!textWidth ? textWidth : labelWidth } }"
       :wrapper-col="{ style: { flex: 1 } }">
-      <a-date-picker v-bind="$attrs" :value="value" :show-time="showTime" :readonly="readonly"
+      <a-date-picker :value="value" :show-time="showTime" :readonly="readonly"
         :disabled="see || disabled" :format="format" :picker="type" @change="handleChange" :placeholder="placeholder"
-        style="width: 100%;" />
+        style="width: 100%;" v-bind="$attrs" />
     </a-form-item>
   </a-col>
 </template>

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

@@ -2,7 +2,7 @@
   <a-col :span="colSpan ? colSpan : defaultColSpan">
     <a-form-item :label="label" :name="name" :icon="icon" :label-col="{ style: { width: !!textWidth ? textWidth : labelWidth } }"
       :wrapper-col="{ style: { flex: 1 } }">
-      <a-input v-bind="$attrs" :type="type" :value="modelValue" @input="updateValue" :disabled="see || readonly"  :placeholder="placeholder"/>
+      <a-input :type="type" :value="modelValue" @input="updateValue" :disabled="see || readonly"  :placeholder="placeholder" v-bind="$attrs"/>
     </a-form-item>
   </a-col>
 </template>

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

@@ -2,8 +2,8 @@
   <a-col :span="colSpan ? colSpan : defaultColSpan">
     <a-form-item :label="label" :name="name" :icon="icon" :label-col="{ style: { width: textWidth || labelWidth } }"
       :wrapper-col="{ style: { flex: 1 } }">
-      <a-input-number v-bind="$attrs" v-model:value="innerValue" :disabled="see || readonly" :min="min" :max="max"
-        :placeholder="placeholder" style="width: 100%;" />
+      <a-input-number v-model:value="innerValue" :disabled="see || readonly" :min="min" :max="max"
+        :placeholder="placeholder" style="width: 100%;" v-bind="$attrs" />
     </a-form-item>
   </a-col>
 </template>

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

@@ -2,9 +2,9 @@
   <a-col :span="colSpan ? colSpan : defaultColSpan">
     <a-form-item :label="label" :name="name" :label-col="{ style: { width: textWidth || labelWidth } }"
       :wrapper-col="{ style: { flex: 1 } }">
-      <paas-select v-bind="$attrs" :model-value="modelValue" @update:modelValue="$emit('update:modelValue', $event)"
+      <paas-select :model-value="modelValue" @update:modelValue="$emit('update:modelValue', $event)"
         @change="$emit('change', $event)" :data="data" :params="params" :multiple="multiple" :disabled="see || disabled"
-        :placeholder="placeholder" />
+        :placeholder="placeholder" v-bind="$attrs" />
     </a-form-item>
   </a-col>
 </template>

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

@@ -2,8 +2,8 @@
   <a-col :span="colSpan ? colSpan : defaultColSpan">
     <a-form-item :label="label" :name="name" :label-col="{ style: { width: !!textWidth ? textWidth : labelWidth } }"
       :wrapper-col="{ style: { flex: 1 } }">
-      <a-switch v-bind="$attrs" :checked="modelValue" :checked-children="checkedText"
-        :un-checked-children="unCheckedText" :disabled="isDisabled" @change="handleChange" />
+      <a-switch :checked="modelValue" :checked-children="checkedText"
+        :un-checked-children="unCheckedText" :disabled="isDisabled" @change="handleChange" v-bind="$attrs" />
     </a-form-item>
   </a-col>
 </template>

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

@@ -1,7 +1,7 @@
 <template>
   <a-col :span="colSpan ? colSpan : defaultColSpan">
     <a-form-item :label="label" :name="name" :icon="icon" :label-col="{ style: { width: !!textWidth ? textWidth : labelWidth } }" :wrapper-col="{ style: { flex: 1 } }">
-      <a-textarea v-bind="$attrs" :type="type" :value="modelValue" @input="updateValue" :disabled="see || readonly" :rows="rows" style="width: 100%;" :placeholder="placeholder"/>
+      <a-textarea :type="type" :value="modelValue" @input="updateValue" :disabled="see || readonly" :rows="rows" style="width: 100%;" :placeholder="placeholder" v-bind="$attrs"/>
     </a-form-item>
   </a-col>
 </template>

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

@@ -2,9 +2,9 @@
   <a-col :span="colSpan ? colSpan : defaultColSpan">
     <a-form-item :label="label" :name="name" :label-col="{ style: { width: !!textWidth ? textWidth : labelWidth } }"
       :wrapper-col="{ style: { flex: 1 } }">
-      <paas-tree v-bind="$attrs" :params="params" :disabled="see || disabled" :multiple="multiple" :modelValue="modelValue"
+      <paas-tree :params="params" :disabled="see || disabled" :multiple="multiple" :modelValue="modelValue"
         @change="handleTreeChange" :url="url" :fieldNames="fieldNames" :open="open" :placeholder="placeholder"
-        style="width: 100%;"></paas-tree>
+        style="width: 100%;" v-bind="$attrs"></paas-tree>
     </a-form-item>
   </a-col>
 </template>

package/src/components/index.js

@@ -37,6 +37,13 @@ import PaasCodeEditor from "./PaasCodeEditor/index.vue";
 import PaasForm from "./PaasForm/index.vue";
 import OrgPathSelector from "./OrgPathSelector/index.vue";
 import PaasImageViewer from "./PaasImageViewer/index.vue";
+import PaasInput from "./PaasInput/index.vue";
+import PaasNumber from "./PaasNumber/index.vue";
+import PaasTextarea from "./PaasTextarea/index.vue";
+import PaasSwitch from "./PaasSwitch/index.vue";
+import PaasDateRange from "./PaasDateRange/index.vue";
+import PaasRadio from "./PaasRadio/index.vue";
+import PaasCheckbox from "./PaasCheckbox/index.vue";
 
 import * as Icons from '@ant-design/icons-vue';
 
@@ -67,7 +74,14 @@ const component = [
     PaasIcon,
     PaasCodeEditor,
     PaasQueryBar,
-    PaasImageViewer,  // 添加图片查看器组件
+    PaasImageViewer,
+    PaasInput,
+    PaasNumber,
+    PaasTextarea,
+    PaasSwitch,
+    PaasDateRange,
+    PaasRadio,
+    PaasCheckbox,
 ];
 
 const globalComponents = {
@@ -110,6 +124,11 @@ export {
     PaasCodeEditor,
     PaasQueryBar,
     PaasImageViewer,
+    PaasInput,
+    PaasNumber,
+    PaasTextarea,
+    PaasSwitch,
+    PaasDateRange,
 };
 
 export const widgets = component.filter(c => c.name)