ace-front-end 1.0.0

package/ace-element-plus-component/packages/components/form/JaForm.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import {type PropType, provide, ref, computed, watch} from "vue";
+import {ElForm, type FormInstance, type FormRules} from "element-plus";
+import type { FormProps } from "element-plus";
+import {type ValidationInstance} from "../../hooks/useBackendValidations";
+import type {JaFormModel} from "./types";
+import {mergeRules} from '../../utils/formUtils'
+
+export interface JaFormProps extends Partial<Omit<FormProps, 'model' | 'rules'>> {
+    /**
+     * 表单数据模型
+     */
+    model: JaFormModel,
+    /**
+     * 行内表单模式
+     */
+    inline?:boolean,
+    /**
+     * 标签位置
+     */
+    labelPosition?: "left" | "top" | "right",
+    /**
+     * 标签宽度
+     */
+    labelWidth?: string | number,
+    /**
+     * 标签后缀
+     */
+    labelSuffix?: string,
+    /**
+     * 隐藏必填星号
+     */
+    hideRequiredAsterisk?: boolean,
+    /**
+     * 显示校验错误信息
+     */
+    showMessage?: boolean,
+    /**
+     * 以行内形式展示校验信息
+     */
+    inlineMessage?: boolean,
+    /**
+     * 显示校验状态图标
+     */
+    statusIcon?: boolean,
+    /**
+     * 在规则改变时执行校验
+     */
+    validateOnRuleChange?: boolean,
+    /**
+     * 表单验证规则
+     */
+    rules?: FormRules,
+    /**
+     * 尺寸
+     */
+    size?: "small" | "default" | "large",
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean,
+    /**
+     * 滚动到错误项
+     */
+    scrollToError?: boolean,
+    /**
+     * 验证器实例
+     */
+    validator: ValidationInstance,
+    /**
+     * 必填星号位置
+     */
+    requiredPosition?: 'left' | 'right'
+}
+
+const formRef = ref<FormInstance | undefined>(undefined);
+
+const props = withDefaults(defineProps<JaFormProps>(),{
+    inline:false,
+    labelPosition:'top',
+    hideRequiredAsterisk:true,
+    showMessage:true,
+    inlineMessage:true,
+    statusIcon:false,
+    validateOnRuleChange:true,
+    size:'small',
+    scrollToError:true,
+    requiredPosition:'right',
+})
+
+defineEmits(["validate", "click"]);
+provide("aceFormValidator", props.validator);
+provide("aceFormModel", props.model);
+provide("aceFormSize", props.size);
+provide("aceFormRequiredPosition", props.requiredPosition);
+const rules = ref<FormRules>({})
+
+const model = computed(() => {
+    return props.model.formData?props.model.formData:props.model;
+});
+
+defineExpose({
+    elForm: formRef,
+    getElForm:():FormInstance|undefined=>formRef.value,
+    validate:async (submit: () => Promise<any>, onFail?: () => void) => {
+        if(!formRef.value)return;
+        //先清空之前的校验
+        formRef.value.clearValidate();
+        //判断是否有传入rules如果有则先执行 formRef.value!.validate()
+        if(props.rules && Object.keys(props.rules).length>0){
+            await formRef.value.validate((valid,fields)=>{
+                //判断校验是否成功
+                if(valid){
+                    //前端校验已成功，执行异步submit
+                    submit()
+                        .then(() => {
+                            //成功
+                            //校验通过清楚所有的错误校验信息
+                            props.validator?.clearFiledErrors();
+                        })
+                        .catch(() => {
+                            //失败
+                            //合并rules
+                            rules.value = mergeRules(props.rules!, props.validator.rules);
+                            formRef.value!.validate();
+                            if (onFail) onFail();
+                        });
+                }else{
+                    console.log('error submit!',fields)
+                }
+            })
+        }else{
+            submit()
+                .then(() => {
+                    props.validator?.clearFiledErrors();
+                })
+                .catch(async () => {
+                    //失败
+                    //合并rules
+                    rules.value = mergeRules(props.rules!, props.validator.rules);
+                    await formRef.value!.validate();
+                    if (onFail) onFail();
+                });
+        }
+    },
+    getRules: () => rules.value,
+});
+
+watch(() => props.model.formData, () => {
+    props.validator?.clearFiledErrors();
+})
+
+watch(() => props.rules, () => {
+    //合并rules
+    if (props.rules) {
+        rules.value = mergeRules(props.rules, props.validator.rules);
+    }
+}, { immediate: true })
+
+</script>
+
+<template>
+    <el-form
+        ref="formRef"
+        :model="model"
+        :rules="rules"
+        :inline="inline"
+        :label-position="labelPosition"
+        :label-width="labelWidth"
+        :label-suffix="labelSuffix"
+        :hide-required-asterisk="hideRequiredAsterisk"
+        :show-message="showMessage"
+        :inline-message="inlineMessage"
+        :status-icon="statusIcon"
+        :validate-on-rule-change="validateOnRuleChange"
+        :size="size"
+        :disabled="disabled"
+        :scroll-to-error="scrollToError"
+        @validate="(prop, isValid, message) => $emit('validate', prop, isValid,message)"
+        @click="() => $emit('click')"
+    >
+        <slot></slot>
+    </el-form>
+</template>
+
+<style scoped lang="scss"></style>

package/ace-element-plus-component/packages/components/form/README.md

@@ -0,0 +1,30 @@
+# JaForm 表单组件
+
+`JaForm` 是对 Element Plus `ElForm` 的封装，提供了表单数据模型注入和增强的验证功能。
+
+## 组件用途
+
+用于构建表单，管理数据模型和验证规则。
+
+## 属性 API
+
+该组件继承了 [ElForm](https://element-plus.org/zh-CN/component/form.html#form-attributes) 的大部分属性。
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| `model` | `JaFormModel` | - | 表单数据模型对象 |
+| `inline` | `boolean` | `false` | 是否为行内表单 |
+| `labelPosition` | `'left' \| 'top' \| 'right'` | `'top'` | 标签位置 |
+| `hideRequiredAsterisk` | `boolean` | `true` | 是否隐藏必填星号（组件内部自行处理） |
+| `validator` | `ValidationInstance` | - | 验证器实例 |
+| `requiredPosition` | `'left' \| 'right'` | `'right'` | 必填星号位置 |
+
+## 使用示例
+
+```vue
+<ja-form :model="formData" :validator="validator">
+  <ja-form-item prop="name" label="Name">
+    <ja-input />
+  </ja-form-item>
+</ja-form>
+```

package/ace-element-plus-component/packages/components/form/index.ts

@@ -0,0 +1,5 @@
+import {withInstall, type SFCWithInstall} from "../../utils/install";
+import Form from "./JaForm.vue";
+export const JaForm: SFCWithInstall<typeof Form> = withInstall(Form);
+export * from "./types"
+export default Form;

package/ace-element-plus-component/packages/components/form/types.ts

@@ -0,0 +1,4 @@
+export interface JaFormModel  {
+    formData: Record<string, any>,
+    [key: string | number | symbol]: any
+}

package/ace-element-plus-component/packages/components/formItem/JaFormItem.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { provide, ref, withDefaults, defineProps, defineExpose, inject, computed } from "vue";
+import {ElFormItem, ElIcon, ElText, type FormItemRule, ElTooltip} from 'element-plus'
+import type { FormItemProps } from 'element-plus'
+import {QuestionFilled} from "@element-plus/icons-vue";
+
+type RequiredPosition = 'left' | 'right'
+
+const aceFormRequiredPosition = inject('aceFormRequiredPosition') as RequiredPosition | undefined
+
+export interface JaFormItemProps extends Partial<FormItemProps> {
+    /**
+     * 字段名
+     */
+    prop?: string | string[]
+    /**
+     * 验证规则
+     */
+    rules?: FormItemRule | FormItemRule[]
+    /**
+     * 标签文本
+     */
+    label?: string
+    /**
+     * 标签宽度
+     */
+    labelWidth?: string | number
+    /**
+     * 标签说明（Tooltip）
+     */
+    labelRemark?: string
+    /**
+     * 是否必填
+     */
+    required?: boolean
+    /**
+     * 错误信息
+     */
+    error?: string
+    /**
+     * 显示校验信息
+     */
+    showMessage?: boolean
+    /**
+     * 行内显示校验信息
+     */
+    inlineMessage?: boolean
+    /**
+     * 尺寸
+     */
+    size?: 'small' | 'default' | 'large'
+    /**
+     * 必填星号位置
+     */
+    requiredPosition?: RequiredPosition
+    /**
+     * 标签间隔
+     */
+    labelGap?:string
+}
+
+const props = withDefaults(defineProps<JaFormItemProps>(), {
+    required: false,
+    showMessage: true,
+    inlineMessage: true,
+    size: 'small',
+    labelGap:'4px'
+})
+
+provide('aceFormItemProp', props.prop)
+
+const requiredPosition = computed(()=>{
+    return props.requiredPosition || aceFormRequiredPosition
+})
+
+const formItem = ref<InstanceType<typeof ElFormItem> | null>(null)
+defineExpose({
+    resetField: () => {
+        formItem.value!.resetField()
+    },
+    clearValidate: () => {
+        formItem.value!.clearValidate()
+    },
+    elFormItem: formItem
+})
+
+</script>
+
+<template>
+    <el-form-item ref="formItem"
+                  :prop="prop"
+                  :rules="rules"
+                  :label-width="labelWidth"
+                  :error="error"
+                  :show-message="showMessage"
+                  :inline-message="inlineMessage"
+                  :size="size">
+        <template #label>
+            <div style="display: flex;" :style="{
+                gap: labelGap
+            }">
+                <span style="color:red" v-if="props.required && requiredPosition==='left'">*</span>
+                <el-text class="el-form-item__label">
+                    {{ props.label }}
+                    <el-tooltip
+                        v-if="labelRemark"
+                        placement="top">
+                        <el-icon>
+                            <question-filled/>
+                        </el-icon>
+                        <template #content>
+                            <div v-html="labelRemark"/>
+                        </template>
+                    </el-tooltip>
+                </el-text>
+                <span style="color:red" v-if="props.required && requiredPosition==='right'">*</span>
+            </div>
+
+        </template>
+        <slot></slot>
+        <slot name="error"></slot>
+    </el-form-item>
+</template>

package/ace-element-plus-component/packages/components/formItem/README.md

@@ -0,0 +1,28 @@
+# JaFormItem 表单项组件
+
+`JaFormItem` 是对 Element Plus `ElFormItem` 的封装，增强了标签显示和验证提示。
+
+## 组件用途
+
+用于在 `JaForm` 中包裹表单控件，提供标签、验证错误显示等功能。
+
+## 属性 API
+
+该组件继承了 [ElFormItem](https://element-plus.org/zh-CN/component/form.html#form-item-attributes) 的所有属性。
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| `prop` | `string \| string[]` | - | 字段名，对应模型中的路径 |
+| `label` | `string` | - | 标签文本 |
+| `labelRemark` | `string` | - | 标签说明，显示为问号图标和 Tooltip |
+| `required` | `boolean` | `false` | 是否必填 |
+| `labelGap` | `string` | `'4px'` | 标签与说明图标的间距 |
+| `requiredPosition` | `'left' \| 'right'` | - | 必填星号位置（默认跟随 Form 配置） |
+
+## 使用示例
+
+```vue
+<ja-form-item prop="email" label="Email" required labelRemark="请输入公司邮箱">
+  <ja-input />
+</ja-form-item>
+```

package/ace-element-plus-component/packages/components/formItem/index.ts

@@ -0,0 +1,4 @@
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+import FormItem from "./JaFormItem.vue";
+export const JaFormItem: SFCWithInstall<typeof FormItem> = withInstall(FormItem);
+export default FormItem;

package/ace-element-plus-component/packages/components/index.ts

@@ -0,0 +1,35 @@
+export * from "./upload";
+export * from "./tip";
+export * from "./form"
+export * from "./formItem"
+export * from "./input"
+export * from "./checkbox"
+export * from "./inputNumber"
+export * from "./select"
+export * from "./datePicker"
+export * from "./button"
+export * from "./dropdownButton"
+export * from "./switch"
+export * from "./stringList"
+export * from "./numberList"
+export * from "./enumList"
+export * from "./mapItemList"
+export * from "./departmentPicker"
+export * from "./avatar"
+export * from "./userTag"
+export * from "./userPicker"
+export * from "./departmentTree"
+export * from "./userSelectDialog"
+export * from "./timePicker"
+export * from "./scrollbar"
+export * from "./userGroupTree"
+export * from "./userGroupPicker"
+export * from "./autoComplete"
+export * from "./radioGroup"
+export * from "./rolePicker"
+export * from "./channelPicker"
+export * from "./properyPicker"
+export * from "./inputI18n"
+export * from "./checkboxGroup"
+export * from "./enumPicker"
+export * from "./flowShell"

package/ace-element-plus-component/packages/components/input/JaInput.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import {type Component, inject, type StyleValue, ref, watch, computed} from 'vue'
+import {ElInput} from 'element-plus'
+import type { InputProps } from 'element-plus'
+import type {ValidationInstance} from '../../hooks/useBackendValidations'
+import type {EpPropMergeType} from "element-plus/es/utils";
+import {getValue, setValue} from "../../utils/objectUtils";
+
+export interface JaInputProps extends Partial<InputProps> {
+    // Maintain backward compatibility for props that might differ in case or are custom aliases
+    maxLength?: number | string
+    minLength?: number | string
+}
+
+const props = withDefaults(defineProps<JaInputProps>(), {
+    type: 'text',
+    showWordLimit: false,
+    clearable: false,
+    showPassword: false,
+    disabled: false,
+    rows: 2,
+    autosize: false,
+    autocomplete: 'off',
+    readonly: false,
+    autofocus: false,
+    validateEvent: true
+})
+
+const model = inject('aceFormModel') as Record<string, any>
+const prop = inject('aceFormItemProp') as string
+const validator = inject('aceFormValidator') as ValidationInstance
+const input = ref<InstanceType<typeof ElInput>>()
+const emit = defineEmits<{
+    blur: [evt: FocusEvent]
+    focus: [evt: FocusEvent]
+    change: [value: string]
+    input: [value: string]
+    clear: []
+}>()
+
+function onChange(value: string) {
+    validator.removeFieldError(prop);
+    setValue(model.formData, prop, mv.value);
+    emit('change', value);
+}
+
+type ModelType = EpPropMergeType<(new (...args: any[]) => string | number)
+    | (() => string | number | null | undefined)
+    | ((new (...args: any[]) => string | number) | (() => string | number | null | undefined))[],
+    unknown, unknown>;
+
+const mv = ref(getValue(model.formData, prop) as ModelType);
+watch(() => model.formData, () => {
+    mv.value = getValue(model.formData, prop) as ModelType
+}, {
+    deep: true
+})
+
+const elementProps = computed(() => {
+    const { modelValue, maxLength, minLength, ...rest } = props
+    // Map maxLength/minLength to maxlength/minlength if needed, or rely on ElInput handling
+    // ElInput expects 'maxlength'. If props has 'maxlength' (from InputProps), use it.
+    // If props has 'maxLength' (custom), map it to 'maxlength' if 'maxlength' is undefined.
+    return {
+        ...rest,
+        maxlength: props.maxlength ?? props.maxLength,
+        minlength: props.minlength ?? props.minLength
+    }
+})
+
+defineExpose({
+    focus() {
+        input.value?.focus()
+    },
+    blur() {
+        input.value?.blur()
+    },
+    select() {
+        input.value?.select()
+    },
+    clear() {
+        input.value?.clear()
+    },
+    elInput: input
+})
+</script>
+
+<template>
+    <el-input
+        ref="input"
+        v-model="mv"
+        v-bind="{ ...elementProps, ...$attrs }"
+        @blur="evt => $emit('blur', evt)"
+        @focus="evt => $emit('focus', evt)"
+        @change="onChange"
+        @input="value => $emit('input', value)"
+        @clear="() => $emit('clear')"
+    >
+        <template v-for="(_, name) in $slots" v-slot:[name]>
+            <slot :name="name"></slot>
+        </template>
+    </el-input>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/ace-element-plus-component/packages/components/input/README.md

@@ -0,0 +1,23 @@
+# JaInput 输入框组件
+
+`JaInput` 是对 Element Plus `ElInput` 的封装，集成了 `JaForm` 表单上下文注入。
+
+## 组件用途
+
+用于在 `JaForm` 中输入文本，自动绑定数据模型。
+
+## 属性 API
+
+该组件继承了 [ElInput](https://element-plus.org/zh-CN/component/input.html#input-attributes) 的所有属性。
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| `maxLength` | `number \| string` | - | `maxlength` 的别名，用于兼容性 |
+| `minLength` | `number \| string` | - | `minlength` 的别名，用于兼容性 |
+| - | - | - | 支持所有 ElInput 属性 |
+
+## 使用示例
+
+```vue
+<ja-input placeholder="Please input" />
+```

package/ace-element-plus-component/packages/components/input/index.ts

@@ -0,0 +1,4 @@
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+import Input from "./JaInput.vue";
+export const JaInput:SFCWithInstall<typeof Input> = withInstall(Input);
+export default Input;

package/ace-element-plus-component/packages/components/inputI18n/I18nBundleEditor.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import {
+    createAxiosWithoutCache,
+    type CreateAppMessageBundleCommand, useAppMessageApi, type AppInstance
+} from "@jari-ace/app-bolts";
+import {ref, watch} from 'vue'
+import {useAppInstances} from "../../hooks/useAppInstances";
+import {ElDrawer, ElForm, ElFormItem, ElInput, ElButton} from "element-plus";
+import {JaButton} from "../button";
+
+const visible = defineModel<boolean>({
+    default: false,
+    required: true
+});
+const props = defineProps<{
+    appId?: string,
+    preKey?: string
+}>();
+const axios = createAxiosWithoutCache();
+const api = useAppMessageApi(axios);
+const app = ref<AppInstance>();
+const key = ref("");
+const messages = ref<Record<string, string>>({})
+const emits = defineEmits(["success"])
+const appInstances = useAppInstances();
+
+function onOpen() {
+    loadApp();
+    key.value = props.preKey ?? "";
+    messages.value = {};
+}
+
+async function onSubmit() {
+    const cmd = {
+        key: key.value,
+        messages: messages.value,
+        appInstance: {
+            id: props.appId
+        }
+    } as CreateAppMessageBundleCommand;
+    await api.createBundle(cmd);
+    visible.value = false;
+    emits('success', key.value);
+}
+
+async function loadApp() {
+    app.value = await appInstances.getById(props.appId)
+}
+
+watch(() => props.appId, async () => {
+    await loadApp();
+})
+</script>
+
+<template>
+    <el-drawer destroy-on-close append-to-body v-model="visible"
+               title="创建国际化文本" @open="onOpen">
+        <el-form label-position="top" size="default">
+            <el-form-item label="文本键" required>
+                <el-input v-model="key" v-focus></el-input>
+            </el-form-item>
+            <el-form-item v-for="l in app?.supportedLocales" :key="l" :label="l">
+                <el-input type="textarea" :rows="4" v-model="messages[l]"></el-input>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <ja-button size="default" shortcut="Alt+Enter" type="primary" @click="onSubmit">确定
+            </ja-button>
+            <el-button size="default" plain @click="visible = false">取消</el-button>
+        </template>
+    </el-drawer>
+</template>
+
+<style scoped lang="scss">
+
+</style>