@skyfox2000/webui 0.1.0

package/src/components/content/tree/index.vue

@@ -0,0 +1,140 @@
+<script lang="ts" setup>
+import { onMounted, ref, useAttrs, watch } from 'vue';
+import { Tree } from 'ant-design-vue';
+import { ToolIcon } from '../../common';
+import { TreeControl, TreeNode, queryTree } from '@skyfox2000/webbase';
+import { TreeDataNode } from 'ant-design-vue/es/vc-tree-select/interface';
+import { EventDataNode } from 'ant-design-vue/es/vc-tree/interface';
+import { fieldMapping } from '@skyfox2000/fapi';
+
+/**
+ * 组件属性定义
+ */
+const props = defineProps<{
+   /**
+    * 页面主数据
+    */
+   treeCtrl: TreeControl;
+   /**
+    * 选中的节点
+    */
+   selectedKeys?: (string | number)[];
+   /**
+    * 展开的节点
+    */
+   expandedKeys?: (string | number)[];
+}>();
+
+const attrs = useAttrs();
+
+// 树数据
+const treeCtrl = props.treeCtrl;
+// 树节点数据
+const treeData = ref<TreeNode[]>([]);
+
+// 监听树数据变化
+watch(
+   () => treeCtrl.data.value,
+   (newVal) => {
+      if (newVal) {
+         treeData.value = treeCtrl.fieldMap ? fieldMapping(treeCtrl.fieldMap, newVal) : newVal;
+         handleSelect(props.selectedKeys ?? []);
+      }
+   },
+);
+
+const emit = defineEmits<{
+   (
+      e: 'select',
+      selectedKeys: (string | number)[],
+      info?: {
+         event: 'select';
+         node: EventDataNode;
+         selected: boolean;
+         selectedNodes: TreeDataNode[];
+      },
+   ): void;
+   (e: 'update:selectedKeys', value: (string | number)[]): void;
+}>();
+
+const selectedKeys = ref<(string | number)[]>([]);
+watch(
+   () => props.selectedKeys,
+   (newVal) => {
+      if (newVal) {
+         selectedKeys.value = newVal;
+      }
+   },
+   { immediate: true },
+);
+const expandedKeys = ref<(string | number)[]>(['-']);
+watch(
+   () => props.expandedKeys,
+   (newVal) => {
+      if (newVal) {
+         expandedKeys.value = newVal;
+      }
+   },
+   { immediate: true },
+);
+
+// 值变化事件
+const handleSelect = (
+   keys: (string | number)[],
+   info?: {
+      event: 'select';
+      node: EventDataNode;
+      selected: boolean;
+      selectedNodes: TreeDataNode[];
+   },
+) => {
+   if (keys.length === 0) {
+      keys.push(...selectedKeys.value);
+   }
+   if (keys.length > 0) {
+      treeCtrl.node.value = info?.node.dataRef as unknown as TreeNode;
+   }
+   selectedKeys.value = keys;
+   emit('update:selectedKeys', keys);
+   emit('select', keys, info);
+};
+
+// 组件挂载后自动加载树数据
+onMounted(() => {
+   if (!treeCtrl.fieldMap) {
+      treeCtrl.fieldMap = {
+         label: 'Name',
+         key: 'Id',
+         value: 'Id',
+         icon: 'Icon',
+      };
+   }
+   if (treeCtrl.data.value) {
+      treeData.value = fieldMapping(treeCtrl.fieldMap, treeCtrl.data.value);
+   } else if (treeCtrl.autoload) {
+      queryTree(treeCtrl);
+   }
+});
+</script>
+
+<template>
+   <Tree
+      class="w-full"
+      :show-line="true"
+      :tree-data="treeData"
+      v-model:expanded-keys="expandedKeys"
+      :selected-keys="selectedKeys"
+      :loading="treeCtrl.isTreeLoading"
+      @select="handleSelect"
+      v-bind="attrs"
+   >
+      <template #title="{ key, label, icon }">
+         <slot name="title" :label="label" :key="key" :icon="icon">
+            <div class="flex items-center gap-1">
+               <ToolIcon :icon="icon" />
+               <span class="text-nowrap">{{ label }}</span>
+            </div>
+         </slot>
+      </template>
+   </Tree>
+</template>

package/src/components/error/error403.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { Result, Button } from 'ant-design-vue';
+import { AppRouter } from '@skyfox2000/webbase';
+const onClicked = () => {
+   AppRouter.back();
+};
+</script>
+<template>
+   <Result status="403" title="403" sub-title="您没有权限访问当前页面！">
+      <template #extra>
+         <Button type="primary" @click="onClicked">点击返回</Button>
+      </template>
+   </Result>
+</template> 

package/src/components/error/error404.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { Result, Button } from 'ant-design-vue';
+import { AppRouter } from '@skyfox2000/webbase';
+const onClicked = () => {
+   AppRouter.back();
+};
+</script>
+<template>
+   <Result status="404" title="404" sub-title="页面不存在或者没有权限访问页面！">
+      <template #extra>
+         <Button type="primary" @click="onClicked">点击返回</Button>
+      </template>
+   </Result>
+</template>

package/src/components/form/aceEditor/aceConfig.ts

@@ -0,0 +1,90 @@
+// aceConfig.js
+// 移除直接导入ace-builds，改为在需要时动态加载
+// import ace from 'ace-builds';
+// import 'ace-builds/src-min-noconflict/ext-language_tools.js';
+// 假设我们会有一个全局的ace变量
+declare global {
+   interface Window {
+      ace: any;
+   }
+}
+
+// 确保ace编辑器已经加载
+export const ensureAceLoaded = async (baseUrl: string): Promise<any> => {
+   if (window.ace) {
+      return window.ace;
+   }
+
+   // 动态加载ace主脚本
+   return new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = `${baseUrl}ace/ace.js`;
+      script.async = true;
+      script.onload = () => {
+         // 设置ace基础路径
+         window.ace.config.set('basePath', `${baseUrl}ace/`);
+
+         // 加载语言工具扩展
+         const extScript = document.createElement('script');
+         extScript.src = `${baseUrl}ace/ext-language_tools.js`;
+         extScript.async = true;
+         extScript.onload = () => {
+            resolve(window.ace);
+         };
+         extScript.onerror = () => {
+            reject(new Error('Failed to load language tools extension'));
+         };
+         document.head.appendChild(extScript);
+      };
+      script.onerror = () => {
+         reject(new Error('Failed to load Ace editor'));
+      };
+      document.head.appendChild(script);
+   });
+};
+
+export const loadWorker = async (baseUrl: string, lang: string) => {
+   const ace = await ensureAceLoaded(baseUrl);
+
+   // 动态生成模式和工人文件的路径
+   const modePath = `${baseUrl}ace/mode-${lang}.js`;
+   const workerPath = `${baseUrl}ace/worker-${lang}.js`;
+
+   // 加载语言模式
+   if (!document.querySelector(`script[src="${modePath}"]`)) {
+      const modeScript = document.createElement('script');
+      modeScript.src = modePath;
+      modeScript.async = true;
+      document.head.appendChild(modeScript);
+      // 等待脚本加载完成
+      await new Promise((resolve) => {
+         modeScript.onload = resolve;
+         modeScript.onerror = resolve; // 即使出错也继续
+      });
+   }
+
+   ace.config.setModuleUrl(`ace/mode/${lang}`, modePath);
+   ace.config.setModuleUrl(`ace/mode/${lang}_worker`, workerPath);
+};
+
+export const loadTheme = async (baseUrl: string, theme: string) => {
+   const ace = await ensureAceLoaded(baseUrl);
+
+   // 动态生成主题文件的路径
+   const themePath = `${baseUrl}ace/theme-${theme}.js`;
+
+   // 加载主题
+   if (!document.querySelector(`script[src="${themePath}"]`)) {
+      const themeScript = document.createElement('script');
+      themeScript.src = themePath;
+      themeScript.async = true;
+      document.head.appendChild(themeScript);
+      // 等待脚本加载完成
+      await new Promise((resolve) => {
+         themeScript.onload = resolve;
+         themeScript.onerror = resolve; // 即使出错也继续
+      });
+   }
+
+   ace.config.setModuleUrl(`ace/theme/${theme}`, themePath);
+};

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

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { onMounted, ref, watch, defineAsyncComponent } from 'vue';
+import { ToolIcon, Dialog } from '../../index';
+import { loadTheme, loadWorker, ensureAceLoaded } from './aceConfig';
+
+const props = defineProps<{
+   value?: any;
+   baseUrl: string;
+   lang?: 'json' | 'javascript' | 'yaml';
+}>();
+
+// 获取当前应用的基础路径
+const baseUrl = props.baseUrl.endsWith('/') ? props.baseUrl : props.baseUrl + '/';
+
+
+// 动态导入VAceEditor组件
+const VAceEditor = defineAsyncComponent(() => {
+   // 确保Ace已加载
+   return ensureAceLoaded(baseUrl).then(() => {
+      return import('vue3-ace-editor').then((mod) => {
+         return mod.VAceEditor;
+      });
+   });
+});
+
+/**
+ * 使用的开发语言
+ */
+const language = props.lang ?? 'json';
+/**
+ * 样式主题
+ */
+const theme = 'github';
+
+/**
+ * 编辑器内容
+ */
+const content = ref(''); // 初始代码内容
+const height = props.value ? 'h-[240px]' : 'h-[100px]';
+type AceOptions = Partial<{
+   useWorker: boolean;
+   enableBasicAutocompletion: boolean;
+   enableLiveAutocompletion: boolean;
+   enableSnippets: boolean;
+   showPrintMargin: boolean;
+   highlightActiveLine: boolean;
+   highlightSelectedWord: boolean;
+   tabSize: number;
+   fontSize: number;
+   wrap: boolean;
+   readOnly: boolean;
+}>;
+
+const options = {
+   useWorker: true,
+   showPrintMargin: false,
+   highlightActiveLine: true,
+   highlightSelectedWord: true,
+   tabSize: 3,
+   fontSize: 10,
+   wrap: true,
+   readOnly: false,
+};
+
+const aceOptions = ref<AceOptions>({
+   ...options
+});
+
+const emit = defineEmits(['update:value']);
+
+// 用于格式化JSON字符串以便展示
+const handleBlur = () => {
+   if (language === 'json') {
+      const res = format();
+      if (res) emit('update:value', JSON.parse(content.value));
+   } else {
+      emit('update:value', content.value);
+   }
+};
+
+// 格式化 JSON 内容
+const format = (): boolean => {
+   if (content.value) {
+      const value = content.value;
+      let formattedValue = value;
+
+      // 正则表达式匹配属性名（可能没有引号或使用单引号）
+      const regex = /(\w+)(?=\s*:)/g;
+
+      // 使用 replace 方法将属性名替换为双引号包围的格式
+      formattedValue = formattedValue.replace(regex, `"$1"`);
+
+      // 正则表达式匹配单引号包围的字符串值
+      const singleQuoteRegex = /'([^']*)'/g;
+
+      // 使用 replace 方法将单引号包围的字符串值替换为双引号包围的格式
+      formattedValue = formattedValue.replace(singleQuoteRegex, `"$1"`);
+
+      try {
+         // 重新解析 JSON 字符串，并格式化
+         const parsed = JSON.parse(formattedValue);
+         const formattedJSON = JSON.stringify(parsed, null, 3);
+         content.value = formattedJSON;
+         return true;
+      } catch (_) { }
+   }
+   return false;
+};
+
+const updateContent = () => {
+   if (props.value && typeof props.value === 'object') {
+      content.value = JSON.stringify(props.value, null, 3);
+   } else content.value = props.value ?? '';
+};
+
+// 监听 props.value 的变化
+watch(
+   () => props.value,
+   (newValue, oldValue) => {
+      // 当 props.value 发生变化时，更新 content
+      if (newValue !== oldValue) {
+         updateContent();
+      }
+   },
+);
+
+const isFullScreen = ref(false);
+const editorLoaded = ref(false);
+
+const toggleFullScreen = () => {
+   isFullScreen.value = !isFullScreen.value;
+};
+
+onMounted(async () => {
+   try {
+      // 先加载Ace核心
+      await ensureAceLoaded(baseUrl);
+      // 再加载主题和worker
+      await Promise.all([loadTheme(baseUrl, theme), loadWorker(baseUrl, language)]);
+      editorLoaded.value = true;
+      updateContent();
+      aceOptions.value = {
+         ...options,
+         // TODO 会提示拼写错误
+         // enableBasicAutocompletion: true,
+         // enableLiveAutocompletion: true,
+         // enableSnippets: true,
+      };
+   } catch (error) {
+      console.error('Failed to load Ace editor:', error);
+   }
+});
+</script>
+<template>
+   <div class="w-full overflow-hidden rounded-md border-1 border-solid border-gray-300">
+      <div class="w-full h-[30px] bg-[#ccc] relative flex items-center justify-between px-2">
+         <div>{{ language.toUpperCase() }}</div>
+         <ToolIcon icon="icon-fullscreen" clickable class="w-4 h-4 text-[12px]" @click="toggleFullScreen" />
+      </div>
+      <div class="flex-1 overflow-hidden">
+         <VAceEditor v-if="editorLoaded" :class="[height]" v-model:value="content" :lang="language" :theme="theme"
+            :options="aceOptions" @blur="handleBlur" @keyup.enter.native.stop @keydown.enter.native.stop />
+         <div v-else :class="[height, 'flex justify-center items-center']">加载编辑器中...</div>
+      </div>
+   </div>
+   <Dialog title="代码编辑器" v-model:open="isFullScreen" :width="680" :footer="null">
+      <VAceEditor v-if="isFullScreen && editorLoaded" class="h-[500px] w-[99.3%] border-1 border-solid border-gray-200"
+         v-model:value="content" :lang="language" :theme="theme" :options="aceOptions" @blur="handleBlur"
+         @keyup.enter.native.stop @keydown.enter.native.stop />
+      <div v-else-if="isFullScreen"
+         class="h-[500px] w-[99.3%] flex justify-center items-center border-1 border-solid border-gray-200">
+         加载编辑器中...
+      </div>
+   </Dialog>
+</template>

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

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, useAttrs, watch } from 'vue';
+import { AutoComplete } from 'ant-design-vue';
+import {
+   useInputFactory,
+   OptionCommProps,
+   OptionItemProps,
+   onOptionChanged,
+   loadOption,
+   unloadOption,
+   SelectValue,
+   getSelectedLabels,
+   formValidate,
+   outFormDataFields,
+} from '@skyfox2000/webbase';
+import { ReqParams, IUrlInfo } from '@skyfox2000/fapi';
+
+const props = defineProps({
+   ...OptionCommProps,
+   autoload: {
+      type: Boolean,
+      default: false,
+   },
+   value: {
+      type: [String, Number, null, Array],
+      default: undefined,
+   },
+   /**
+    * 查询字段
+    * - 模糊查询
+    */
+   searchField: {
+      type: String,
+   },
+   /**
+    * 自定义查询参数
+    * - 查询参数
+    * - query参数
+    */
+   onsearch: {
+      type: Function,
+   },
+   /**
+    * 修改输入数据则自动清空关联数据
+    */
+   autoClean: {
+      type: Boolean,
+      default: true,
+   },
+});
+// 关闭自动继承属性到根元素
+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<SelectValue | undefined>(undefined);
+
+watch(
+   () => props.value,
+   () => {
+      innerValue.value = props.value as unknown as SelectValue;
+   },
+   { immediate: true },
+);
+
+watch(
+   () => innerValue.value,
+   (newVal) => {
+      // 如果配置了 formData 和 outFields，默认清空数据
+      if (props.autoClean && props.formData && props.outFields && newVal !== props.value) {
+         outFormDataFields(props.formData, props.outFields, null);
+      }
+   },
+);
+
+const inputFactory = useInputFactory();
+const { editorCtrl, errInfo, labelText } = inputFactory;
+
+const emit = defineEmits(['update:value', 'select', 'change', 'update:labels']);
+inputFactory.inputEmit = emit;
+
+/**
+ * 实际的选择项
+ */
+const selectOptions = ref<OptionItemProps[]>([]);
+
+const onSearch = (value: string) => {
+   selectOptions.value = [];
+   if (value === '') return;
+   let search_value = value.trim();
+   let query: ReqParams = {
+      ...url.value.params,
+      Query: {
+         ...url.value.params?.Query,
+      },
+   };
+   if (props.searchField) {
+      query.Query![props.searchField] = {
+         $like: '%' + search_value + '%',
+      };
+   }
+   if (props.onsearch) {
+      props.onsearch(search_value, query);
+   }
+
+   loadOption(true, props, selectOptions, inputFactory, url.value, query);
+};
+
+const onSelected = (value: any) => {
+   const selectedOptions = onOptionChanged(props, value as SelectValue, selectOptions, inputFactory);
+
+   /// 选择后才更新数据
+   emit('update:value', value);
+   emit('select', value);
+
+   const labels: string[] = getSelectedLabels(selectedOptions);
+   emit('update:labels', labels);
+
+   if (errInfo?.value.errClass && editorCtrl) {
+      /// 重新开始验证
+      formValidate(editorCtrl);
+   }
+};
+
+onMounted(() => {
+   if (url.value && !url.value.fieldMap) {
+      url.value.fieldMap = {
+         title: 'Name',
+         label: 'Name',
+         value: 'Name',
+         key: 'Id',
+      };
+   }
+});
+
+onUnmounted(() => {
+   unloadOption(props, inputFactory);
+});
+</script>
+
+<template>
+   <div>
+      <AutoComplete
+         v-model:value="innerValue"
+         :class="[errInfo?.errClass, 'error w-full']"
+         :options="selectOptions"
+         @search="onSearch"
+         @select="onSelected"
+         :placeholder="props.url && !props.url.loading ? '请输入并选择' + labelText : ''"
+         v-bind="attrs"
+      >
+      </AutoComplete>
+   </div>
+</template>
+
+<style scoped>
+.error :deep(.ant-select-selector) {
+   border-color: #ff4d4f80;
+   box-shadow: 0 0 3px 0 #ff4d4f;
+}
+</style>