ace-front-end 1.0.0

package/ace-element-plus-component/packages/components/avatar/JaAvatar.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { getAvatarToken } from "./avatarToken";
+import { ElAvatar, ElImage } from "element-plus";
+import type { AvatarProps } from "element-plus";
+import {
+    computed,
+    nextTick,
+    onMounted, onUnmounted,
+    ref,
+    watch,
+    withDefaults
+} from "vue";
+import { defaultImg } from "./defaultImg";
+
+export interface JaAvatarProps extends Partial<AvatarProps> {
+    /**
+     * 用户id
+     */
+    userId?: string,
+    /**
+     * 用户名
+     */
+    username?: string,
+    /**
+     * 用户域
+     */
+    realm?: string,
+    /**
+     * 是否在tag上显示用户头像
+     */
+    doNotLoadAvatar?: boolean,
+    /**
+     * 用户是否设置了头像
+     */
+    hasAvatar?: boolean,
+
+    firstName?: string
+}
+
+const props = withDefaults(defineProps<JaAvatarProps>(), {
+    doNotLoadAvatar: false
+})
+
+const token = getAvatarToken();
+const inView = ref(false);
+const avatar = ref<InstanceType<typeof ElAvatar>>()
+const usernameSpan = ref<HTMLElement>();
+const scrollbarWrappedItems = undefined; //inject(SCROLL_BAR_WRAPPED_INJECT_KEY) as Ref<ScrollbarWrapped[] | undefined>
+if (!scrollbarWrappedItems) {
+    inView.value = true;
+}
+
+onMounted(async () => {
+    await nextTick();
+    if (scrollbarWrappedItems) {
+        // @ts-ignore
+        scrollbarWrappedItems.value?.push({
+            childElement: avatar.value?.$el,
+            onInView(isInView: boolean) {
+                if (isInView && !inView.value) inView.value = true;
+            }
+        });
+    }
+})
+
+const lazyUrl = computed(() => {
+        if (!(
+            inView.value && props.hasAvatar && !props.doNotLoadAvatar
+        )) {
+            return props.firstName ? "" : defaultImg;
+        }
+        if (props.userId && props.userId.length > 0) {
+            const path = '/ace-app-service/avatar/' + props.userId
+            const win = window.rawWindow? window.rawWindow: window
+            return win.appDescriptor.env.isDevMode()
+                ? new URL("/ace" + path, location.origin).toString() + "?t=" + token.value.toString() //开发模式下使用vite代理，添加ace前缀，由vite代理修改路由
+                : new URL(path, location.origin).toString() + "?t=" + token.value.toString()
+        }
+        if (props.realm && props.realm.length > 0 && props.username && props.username.length > 0) {
+            const path = '/ace-app-service/avatar/' + props.realm + '/' + props.username
+            const win = window.rawWindow? window.rawWindow: window            
+            return win.appDescriptor.env.isDevMode()
+                ? new URL("/ace" + path, location.origin).toString() + "?t=" + token.value.toString() //开发模式下使用vite代理，添加ace前缀，由vite代理修改路由
+                : new URL(path, location.origin).toString() + "?t=" + token.value.toString()
+        }
+        return props.firstName ? "" : defaultImg;
+    }
+)
+
+function adjustFontSize(element?: HTMLElement) {
+    if (!element) return;
+    let parentWidth = avatar.value?.$el.clientWidth;
+    let fontSize = parentWidth / 2.8;
+    element.style.fontSize = fontSize + 'px';
+}
+
+onUnmounted(() => {
+    if (scrollbarWrappedItems) {
+        // @ts-ignore
+        scrollbarWrappedItems.value = undefined;
+    }
+})
+
+watch(usernameSpan, () => adjustFontSize(usernameSpan.value))
+
+const elementProps = computed(() => {
+    const { userId, username, realm, doNotLoadAvatar, hasAvatar, firstName, ...rest } = props
+    return rest
+})
+</script>
+
+<template>
+    <el-avatar :src="lazyUrl" v-bind="{ ...elementProps, ...$attrs }" ref="avatar" class="ja-avatar">
+        <span v-if="props.firstName && props.firstName.length > 0" class="user-name-avatar"
+              ref="usernameSpan">
+            {{ firstName }}
+        </span>
+        <el-image style="height:100%" v-else
+                  :src="defaultImg"
+                  alt="用户头像"/>
+    </el-avatar>
+</template>
+
+<style scoped lang="scss">
+.ja-avatar {
+    --el-avatar-bg-color: #C1CCD7 !important;
+    transition: background-color 0.3s ease;
+
+    &:hover {
+        --el-avatar-bg-color: #9BA4AF !important;
+    }
+}
+
+.user-name-avatar {
+}
+
+</style>

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

@@ -0,0 +1,45 @@
+# JaAvatar 头像组件
+
+`JaAvatar` 是对 Element Plus `ElAvatar` 的扩展，支持根据用户信息自动加载头像，支持显示用户首字母。
+
+## 组件用途
+
+用于显示用户头像，支持通过 userId 或 username/realm 自动获取头像图片，并在加载失败或无头像时显示默认图片或首字母。
+
+## 属性 API
+
+该组件继承了 [ElAvatar](https://element-plus.org/zh-CN/component/avatar.html#avatar-attributes) 的所有属性，并额外支持以下属性：
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| `userId` | `string` | - | 用户 ID，用于构建头像 URL |
+| `username` | `string` | - | 用户名，用于构建头像 URL（需配合 realm） |
+| `realm` | `string` | - | 用户域，用于构建头像 URL |
+| `firstName` | `string` | - | 用户首名，当无头像图片时显示此文字 |
+| `hasAvatar` | `boolean` | - | 用户是否设置了头像 |
+| `doNotLoadAvatar` | `boolean` | `false` | 是否强制不加载头像图片（仅显示 Tag 模式时使用） |
+
+## 使用示例
+
+```vue
+<template>
+  <!-- 通过 User ID 加载 -->
+  <ja-avatar :userId="user.id" :hasAvatar="true" />
+
+  <!-- 显示首字母 -->
+  <ja-avatar firstName="John" />
+  
+  <!-- 完整信息 -->
+  <ja-avatar 
+    :userId="user.id"
+    :firstName="user.firstName"
+    :hasAvatar="user.hasAvatar"
+    size="large"
+  />
+</template>
+```
+
+## 注意事项
+
+- 组件内置了懒加载逻辑，只有当头像进入视图区域时才开始加载图片。
+- 自动处理开发环境 (`isDevMode`) 下的代理路径。

package/ace-element-plus-component/packages/components/avatar/avatarToken.ts

@@ -0,0 +1,11 @@
+import {ref} from "vue"
+
+const token = ref(Date.now());
+
+export function updateAvatarToken() {
+    token.value = Date.now();
+}
+
+export function getAvatarToken() {
+    return token;
+}

package/ace-element-plus-component/packages/components/avatar/defaultImg.ts

@@ -0,0 +1,14 @@
+export const defaultImg = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1280.000000pt' height='1248.000000pt' viewBox='-384 -374 2048 2048' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0.000000,1248.000000) scale(0.100000,-0.100000)'\n" +
+    "fill='%23fff' stroke='none'%3E%3Cpath d='M6005 12474 c-22 -2 -89 -9 -149 -14 -542 -53 -1087 -253 -1556 -571\n" +
+    "-1089 -738 -1659 -2029 -1470 -3331 117 -802 507 -1518 1129 -2075 454 -406\n" +
+    "1057 -697 1666 -802 220 -39 317 -46 595 -46 278 0 375 7 595 46 1218 211\n" +
+    "2250 1096 2647 2269 353 1043 189 2180 -442 3075 -568 804 -1437 1318 -2425\n" +
+    "1435 -92 11 -518 21 -590 14z'/%3E%3Cpath d='M8585 5886 c-478 -363 -1085 -626 -1687 -730 -247 -43 -348 -51 -678\n" +
+    "-51 -319 0 -364 3 -612 41 -586 88 -1171 326 -1668 676 l-114 81 -106 -17\n" +
+    "c-58 -10 -181 -38 -275 -61 -807 -204 -1528 -616 -2120 -1210 -726 -728 -1170\n" +
+    "-1655 -1297 -2704 -29 -238 -32 -741 -5 -930 53 -378 142 -589 320 -758 171\n" +
+    "-163 421 -234 772 -220 269 11 533 55 1230 208 817 179 1195 244 1690 291 205\n" +
+    "19 4525 19 4730 0 495 -47 873 -112 1690 -291 697 -153 961 -197 1230 -208\n" +
+    "254 -10 438 21 605 103 172 84 315 254 390 463 74 203 108 420 117 736 34\n" +
+    "1230 -451 2439 -1332 3320 -707 707 -1608 1156 -2597 1294 -206 29 -201 30\n" +
+    "-283 -33z'/%3E%3C/g%3E%3C/svg%3E";

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

@@ -0,0 +1,7 @@
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+import Avatar from "./JaAvatar.vue";
+
+export const JaAvatar: SFCWithInstall<typeof Avatar> = withInstall(Avatar);
+
+export * from "./avatarToken";
+

package/ace-element-plus-component/packages/components/button/JaButton.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import dShortcut from "../../directives/shortcut";
+import vAuth from "../../directives/auth";
+import { ElButton, ElTooltip } from "element-plus";
+import type { ButtonProps } from "element-plus";
+import { ref, computed } from "vue";
+
+const input = ref<InstanceType<typeof ElButton>>()
+
+type AuthModifier = {
+    disable: boolean;
+    any: boolean
+}
+
+export interface JaButtonProps extends Partial<ButtonProps> {
+    /**
+     * 按钮文字提示
+     */
+    tooltip?: string
+    /**
+     * 快捷键
+     */
+    shortcut?: string
+    /**
+     * 权限标识
+     */
+    auth?: string | string[]
+    /**
+     * 权限修饰符
+     */
+    authModifiers?: AuthModifier
+    /**
+     * 提示位置
+     */
+    tooltipPlacement?: 'top' | 'bottom'
+}
+
+const props = withDefaults(defineProps<JaButtonProps>(), {
+    tooltipPlacement: 'bottom',
+    authModifiers: () => ({
+        disable: true,
+        any: false
+    })
+})
+
+const vShortcut = dShortcut
+
+const elementProps = computed(() => {
+    const { tooltip, shortcut, auth, authModifiers, tooltipPlacement, ...rest } = props
+    return rest
+})
+
+defineExpose({
+    elButton: input
+})
+
+</script>
+
+<template>
+    <el-tooltip :placement="tooltipPlacement" append-to="body" :disabled="!tooltip && !shortcut">
+        <el-button
+            ref="input"
+            v-auth:[authModifiers]="auth"
+            v-shortcut:[shortcut]
+            v-bind="{ ...elementProps, ...$attrs }">
+            <template v-for="(_, name) in $slots" v-slot:[name]>
+                <slot :name="name"></slot>
+            </template>
+        </el-button>
+        <template #content>
+            {{
+                `${props.tooltip ?? ''} ${props.shortcut ? "(" : ""}${props.shortcut ?? ""}${props.shortcut ? ")" : ""}`
+            }}
+        </template>
+    </el-tooltip>
+</template>

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

@@ -0,0 +1,57 @@
+# JaButton 按钮组件
+
+`JaButton` 是对 Element Plus `ElButton` 的扩展封装，增加了工具提示、快捷键绑定和权限控制功能。
+
+## 组件用途
+
+用于在页面中执行操作，支持通过配置快速添加 Tooltip 提示和键盘快捷键，同时集成了权限指令。
+
+## 属性 API
+
+该组件继承了 [ElButton](https://element-plus.org/zh-CN/component/button.html#button-attributes) 的所有属性，并额外支持以下属性：
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| `tooltip` | `string` | - | 按钮的文字提示内容 |
+| `shortcut` | `string` | - | 绑定的快捷键（如 'Ctrl+S'） |
+| `auth` | `string \| string[]` | - | 权限标识，用于控制按钮显示/禁用 |
+| `authModifiers` | `AuthModifier` | `{ disable: true, any: false }` | 权限修饰符，`disable`为真时无权限禁用而非隐藏 |
+| `tooltipPlacement` | `'top' \| 'bottom'` | `'bottom'` | Tooltip 提示出现的位置 |
+
+### AuthModifier 类型定义
+```typescript
+type AuthModifier = {
+    disable: boolean;
+    any: boolean
+}
+```
+
+## 使用示例
+
+```vue
+<template>
+  <ja-button 
+    type="primary" 
+    tooltip="保存当前更改" 
+    shortcut="Ctrl+S" 
+    @click="handleSave"
+  >
+    保存
+  </ja-button>
+
+  <ja-button 
+    type="danger" 
+    auth="user:delete"
+    :authModifiers="{ disable: true }"
+    @click="handleDelete"
+  >
+    删除用户
+  </ja-button>
+</template>
+```
+
+## 注意事项
+
+- 当设置了 `tooltip` 或 `shortcut` 时，组件会自动包裹 `ElTooltip`。
+- `shortcut` 需要配合 `v-shortcut` 指令工作（组件内部已集成）。
+- 所有未显式定义的属性将透传给内部的 `ElButton`。

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

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

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

@@ -0,0 +1,7 @@
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+import ChannelPicker from "./src/JaChannelPicker.vue";
+import RawChannelPicker from "./src/ChannelPicker.vue";
+
+export const JaChannelPicker: SFCWithInstall<typeof ChannelPicker> = withInstall(ChannelPicker);
+export const JaChannelPickerRaw: SFCWithInstall<typeof RawChannelPicker> = withInstall(RawChannelPicker);
+

package/ace-element-plus-component/packages/components/channelPicker/src/ChannelPicker.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import {ElSelect, ElOption} from "element-plus";
+import {createAxiosWithoutCache, type ProjectedChannel, useChannelApi} from "@jari-ace/app-bolts";
+import {onBeforeMount, ref, watch} from "vue";
+
+const axios = createAxiosWithoutCache();
+const api = useChannelApi(axios);
+const props = defineProps<{
+    appName?: string
+}>();
+const channels = ref<ProjectedChannel[]>();
+const bindingChannels = ref<ProjectedChannel[]>();
+const selected = defineModel<ProjectedChannel>({
+    required: true
+})
+
+onBeforeMount(() => {
+    loadData();
+})
+
+async function loadData() {
+    console.log('load channels of app ' + props.appName);
+    if (!props.appName) return;
+    channels.value = await api.getAll(props.appName);
+    bindingChannels.value = channels.value;
+}
+
+function filter(queryName: string) {
+    bindingChannels.value = channels.value?.filter(c => c.name.indexOf(queryName) > -1) ?? [];
+}
+
+watch(() => props.appName, loadData);
+</script>
+
+<template>
+    <el-select filterable :filter-method="filter" value-key="id" v-model="selected" v-bind="$attrs">
+        <el-option v-for="c in bindingChannels" :key="c.id" :label="c.name" :value="c"></el-option>
+    </el-select>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/ace-element-plus-component/packages/components/channelPicker/src/JaChannelPicker.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+
+import ChannelPicker from "./ChannelPicker.vue";
+import {inject, ref, watch} from "vue";
+import type {ValidationInstance} from "../../../hooks/useBackendValidations";
+import {getValue, setValue} from "../../../utils/objectUtils";
+import type {ProjectedChannel} from "@jari-ace/app-bolts";
+
+const model = inject('aceFormModel') as Record<string, any>
+const prop = inject('aceFormItemProp') as string
+const validator = inject('aceFormValidator') as ValidationInstance
+const emit = defineEmits<{
+    change: [value: string]
+}>()
+
+function onChange(value: string) {
+    validator.removeFieldError(prop)
+    setValue(model.formData, prop, mv.value);
+    emit('change', value)
+}
+
+type modelType = ProjectedChannel;
+
+const mv = ref(getValue(model.formData, prop) as modelType);
+watch(() => model.formData, () => {
+    mv.value = getValue(model.formData, prop) as modelType
+}, {
+    deep: true
+})
+
+</script>
+
+<template>
+    <channel-picker v-model="mv"
+                    @change="onChange"
+                    v-bind="$attrs">
+    </channel-picker>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/ace-element-plus-component/packages/components/checkbox/JaCheckbox.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import {inject, ref, watch, computed} from 'vue'
+import {type CheckboxValueType, ElCheckbox} from 'element-plus'
+import type { CheckboxProps } from 'element-plus'
+import type {ValidationInstance} from '../../hooks/useBackendValidations'
+import {getValue, setValue} from "../../utils/objectUtils";
+
+export interface JaCheckboxProps extends Partial<CheckboxProps> {
+    // Custom props or overrides if any
+}
+
+const props = withDefaults(defineProps<JaCheckboxProps>(), {
+    disabled: false,
+    checked: false,
+    indeterminate: false,
+    validateEvent: true
+})
+
+const model = inject('aceFormModel') as Record<string, any>
+const prop = inject('aceFormItemProp') as string
+const validator = inject('aceFormValidator') as ValidationInstance
+const checkbox = ref<InstanceType<typeof ElCheckbox>>()
+const emit = defineEmits<{
+    change: [value: CheckboxValueType]
+}>()
+
+function onChange(value: CheckboxValueType) {
+    validator.removeFieldError(prop);
+    setValue(model.formData, prop, mv.value);
+    emit('change', value);
+}
+
+type ModelType = string | number | boolean | undefined;
+
+const mv = ref(getValue(model.formData, prop) as ModelType);
+watch(() => model.formData, () => {
+    mv.value = getValue(model.formData, prop) as ModelType
+})
+
+const elementProps = computed(() => {
+    const { modelValue, ...rest } = props
+    return rest
+})
+
+defineExpose({
+    elCheckbox: checkbox
+})
+</script>
+
+<template>
+    <el-checkbox
+        ref="checkbox"
+        v-model="mv"
+        @change="onChange"
+        v-bind="{ ...elementProps, ...$attrs }"
+    >
+        <slot></slot>
+    </el-checkbox>
+</template>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -0,0 +1,21 @@
+# JaCheckbox 复选框组件
+
+`JaCheckbox` 是对 Element Plus `ElCheckbox` 的封装，集成了 `JaForm` 表单上下文注入。
+
+## 组件用途
+
+用于在 `JaForm` 中创建复选框，自动绑定数据模型。
+
+## 属性 API
+
+该组件继承了 [ElCheckbox](https://element-plus.org/zh-CN/component/checkbox.html#checkbox-attributes) 的所有属性。
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| - | - | - | 支持所有 ElCheckbox 属性 |
+
+## 使用示例
+
+```vue
+<ja-checkbox label="Option 1" />
+```

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

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

package/ace-element-plus-component/packages/components/checkboxGroup/JaCheckboxGroup.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type {ValidationInstance} from '../../hooks/useBackendValidations'
+import {inject, ref, watch, computed} from "vue";
+import {type CheckboxGroupValueType, ElCheckboxGroup} from "element-plus";
+import type { CheckboxGroupProps } from 'element-plus'
+import {getValue, setValue} from "../../utils/objectUtils";
+
+const input = ref<InstanceType<typeof ElCheckboxGroup>>()
+const model = inject('aceFormModel') as Record<string, never>
+const prop = inject('aceFormItemProp') as string
+const validator = inject('aceFormValidator') as ValidationInstance
+const emit = defineEmits<{
+    change: [value: CheckboxGroupValueType]
+}>()
+
+export interface JaCheckboxGroupProps extends Partial<CheckboxGroupProps> {
+}
+
+const props = defineProps<JaCheckboxGroupProps>()
+
+function onChange(val: CheckboxGroupValueType) {
+    validator.removeFieldError(prop)
+    setValue(model.formData, prop, mv.value);
+    emit('change', val)
+}
+
+const mv = ref(getValue(model.formData, prop) as CheckboxGroupValueType);
+watch(() => model.formData, () => {
+    mv.value = getValue(model.formData, prop) as CheckboxGroupValueType
+}, {
+    deep: true
+})
+
+const elementProps = computed(() => {
+    const { modelValue, ...rest } = props
+    return rest
+})
+
+defineExpose({
+    focus: () => (input.value as any)?.focus?.(), // Optional chaining in case ref is not ready or method missing
+    blur: () => (input.value as any)?.blur?.(), // CheckboxGroup might not expose blur directly on type, but runtime it might
+    elCheckboxGroup: input
+})
+</script>
+
+<template>
+    <el-checkbox-group
+        ref="input"
+        v-model="mv"
+        @change="onChange"
+        v-bind="{ ...elementProps, ...$attrs }">
+        <template v-for="(_, name) in $slots" v-slot:[name]>
+            <slot :name="name"></slot>
+        </template>
+    </el-checkbox-group>
+</template>

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

@@ -0,0 +1,24 @@
+# JaCheckboxGroup 复选框组组件
+
+`JaCheckboxGroup` 是对 Element Plus `ElCheckboxGroup` 的封装，集成了 `JaForm` 表单上下文注入。
+
+## 组件用途
+
+用于在 `JaForm` 中创建复选框组，自动绑定数据模型。
+
+## 属性 API
+
+该组件继承了 [ElCheckboxGroup](https://element-plus.org/zh-CN/component/checkbox.html#checkboxgroup-attributes) 的所有属性。
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| - | - | - | 支持所有 ElCheckboxGroup 属性 |
+
+## 使用示例
+
+```vue
+<ja-checkbox-group>
+  <ja-checkbox label="Option A" />
+  <ja-checkbox label="Option B" />
+</ja-checkbox-group>
+```

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

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

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

@@ -0,0 +1,10 @@
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+import CustomGroupTree from "./src/customGroupTree.vue";
+
+
+/**
+ * 可单选的部门树组件
+ */
+export const JaCustomGroupTree: SFCWithInstall<typeof CustomGroupTree> = withInstall(CustomGroupTree);
+
+