@skyfox2000/webui 0.1.0

package/package.json

@@ -0,0 +1,66 @@
+{
+   "name": "@skyfox2000/webui",
+   "version": "0.1.0",
+   "description": "后台前端通用组件定义",
+   "type": "module",
+   "keywords": [],
+   "author": "skyfox2000@github.com",
+   "license": "MIT",
+   "publishConfig": {
+      "access": "public"
+   },
+   "module": "./lib/webui.es.js",
+   "types": "./lib/index.d.ts",
+   "exports": {
+      ".": {
+         "types": "./lib/index.d.ts",
+         "default": "./lib/webui.es.js"
+      },
+      "./webui.css": {
+         "default": "./lib/webui.css"
+      },
+      "./es/*": {
+         "import": "./lib/es/*/index.js",
+         "types": "./lib/*.d.ts"
+      }
+   },
+   "scripts": {
+      "build": "vue-tsc -b && vite build",
+      "build:dts": "vue-tsc -b && vite-dts-declaration",
+      "build:types": "vue-tsc --declaration --emitDeclarationOnly"
+   },
+   "dependencies": {
+      "@skyfox2000/fapi": "^1.1.17",
+      "@skyfox2000/microbase": "^1.0.14",
+      "@skyfox2000/webbase": "^1.0.48",
+      "@vue-office/excel": "^1.7.14",
+      "ace-builds": "^1.42.0",
+      "ant-design-vue": "^4.2.6",
+      "dayjs": "^1.11.13",
+      "pinia": "^2.3.0",
+      "pinia-plugin-persistedstate": "^4.2.0",
+      "vue": "^3.5.16",
+      "vue-draggable-next": "^2.2.1",
+      "vue-m-message": "^4.0.2",
+      "vue-router": "^4.5.1",
+      "vue3-ace-editor": "^2.2.4"
+   },
+   "devDependencies": {
+      "@types/node": "^22.15.30",
+      "@vitejs/plugin-vue": "^5.2.4",
+      "autoprefixer": "^10.4.21",
+      "esbuild": "^0.19.12",
+      "eslint": "^9.28.0",
+      "eslint-config-prettier": "^9.1.0",
+      "eslint-plugin-prettier": "^5.4.1",
+      "eslint-plugin-vue": "^9.33.0",
+      "postcss": "^8.5.4",
+      "prettier": "^3.5.3",
+      "rollup": "^4.42.0",
+      "tailwindcss": "^3.4.17",
+      "typescript": "^5.8.3",
+      "vite": "^6.3.5",
+      "vite-plugin-dts": "^4.5.4",
+      "vue-tsc": "^2.2.10"
+   }
+}

package/plugins/vite-plugin-auto-generate-vue.ts

@@ -0,0 +1,105 @@
+import { Plugin } from 'vite';
+import fs from 'fs';
+import path from 'path';
+
+/**
+ * 首字母大写的工具函数
+ */
+function capitalize(str: string): string {
+   return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+/**
+ * 规范化路径，确保使用正斜杠
+ */
+function normalizePath(filePath: string): string {
+   return filePath.split(path.sep).join('/');
+}
+
+/**
+ * 递归扫描目录中的 .vue 文件并生成导出语句
+ */
+function scanDir(dir: string, baseDir: string, skipDirFile: string[]): string[] {
+   const result: string[] = [];
+   const files = fs.readdirSync(dir);
+   files.forEach((file) => {
+      const filePath = path.join(dir, file);
+      if (skipDirFile.includes(filePath)) return;
+
+      const stat = fs.statSync(filePath);
+
+      if (stat.isDirectory()) {
+         // 递归扫描子目录
+         const subResult = scanDir(filePath, baseDir, skipDirFile);
+         result.push(...subResult);
+      } else if (file.endsWith('.vue')) {
+         // 获取相对路径并规范化
+         const relativePath = normalizePath(path.relative(baseDir, filePath));
+         const componentName = generateComponentName(filePath);
+
+         // 使用规范化的路径生成导入语句
+         result.push(`import ${componentName} from './${relativePath}';\nexport { ${componentName} };`);
+      }
+   });
+
+   return result;
+}
+
+/**
+ * 根据文件路径生成组件名
+ */
+function generateComponentName(filePath: string): string {
+   const dirName = path.basename(path.dirname(filePath));
+   const fileName = path.basename(filePath, '.vue');
+
+   if (fileName === 'index') {
+      return capitalize(dirName);
+   } else {
+      return capitalize(fileName);
+   }
+}
+
+/**
+ * 插件主逻辑
+ */
+export default function AutoGenerateVue(options: { dir: string; skip: string[]; output: string }): Plugin {
+   return {
+      name: 'vite-plugin-auto-generate-vue',
+      config() {
+         const { dir, skip, output } = options;
+
+         // 检查output是否文件结尾
+         const isFile = path.extname(output) !== '';
+         if (!isFile) {
+            throw new Error(`The specified output file "${output}" must be a file.`);
+         }
+
+         // 规范化路径
+         const componentsDir = normalizePath(path.resolve(process.cwd(), dir));
+         const skipDirFile = skip.map((url) => {
+            return normalizePath(path.resolve(process.cwd(), url));
+         });
+         const outputFile = normalizePath(path.resolve(process.cwd(), output));
+
+         // 获取输出文件的目录路径
+         const baseDir = normalizePath(path.dirname(path.resolve(process.cwd(), output)));
+
+         if (!fs.existsSync(componentsDir)) {
+            throw new Error(`The specified directory "${componentsDir}" does not exist.`);
+         }
+
+         const result = scanDir(componentsDir, baseDir, skipDirFile);
+         const exportStatements = result.join('\n');
+
+         // 确保输出目录存在
+         const outputDir = path.dirname(outputFile);
+         if (!fs.existsSync(outputDir)) {
+            fs.mkdirSync(outputDir, { recursive: true });
+         }
+
+         // 写入到目标文件
+         fs.writeFileSync(outputFile, exportStatements, 'utf-8');
+         console.log(`[autoGenerateVue] Global components written to ${output}`);
+      },
+   };
+}

package/postcss.config.ts

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/src/assets/global.css

@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.disabled {
+   opacity: 0.3;
+   cursor: not-allowed;
+   filter: grayscale(90%);
+ }

package/src/components/common/button/index.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+/**
+ * 按钮组件
+ * @component
+ * @name Button
+ * @summary 提供一个可点击的图标按钮，支持自动切换图标，发送点击事件等功能。
+ */
+import { Button } from 'ant-design-vue';
+import Tooltip from '../tooltip/index.vue';
+import ToolIcon from '../icon/toolIcon.vue';
+import { useAttrs } from 'vue';
+
+// 关闭自动继承属性到根元素
+defineOptions({
+   inheritAttrs: false,
+});
+const attrs = useAttrs(); // 手动获取 $attrs
+
+const props = defineProps({
+   /**
+    * 提示标题
+    * @props
+    * @name content
+    * @type {string}
+    */
+   tiptext: String,
+   /**
+    * 提示显示位置
+    * @props
+    * @name placement
+    * @type {string}
+    * @default 'top'
+    */
+   placement: {
+      type: String,
+      default: 'top',
+   },
+   /**
+    * 内置图标属性设置
+    * @props
+    * @name iconProps
+    * @type {object}
+    * @summary 内置图标复杂属性设置，仅支持前置图标
+    */
+   iconProps: Object,
+   /**
+    * 默认使用框架图标
+    * 其它图标请自定义
+    * @props
+    * @name icon
+    * @type {string}
+    */
+   icon: String,
+   // /**
+   //  * 点击事件
+   //  * @props
+   //  * @name clickEvent
+   //  * @summary 格式 "空间名#事件名"，空间名和事件名用#分隔，事件名用.分隔
+   //  * @type {string}
+   //  */
+   // clickEvent: {
+   //   type: String
+   // },
+   // /**
+   //  * 点击传输数据
+   //  * @props
+   //  * @name data
+   //  * @summary 点击事件传输的默认数据
+   //  * @type {object|string}
+   //  */
+   // data: {
+   //   type: [Object, String]
+   // }
+});
+
+// 定义组件发出的事件
+const emits = defineEmits([
+   /**
+    * 点击事件
+    * @emits
+    * @name click
+    * @summary 图标按钮点击时触发的事件
+    */
+   'click',
+]);
+
+const onClicked = () => {
+   // if (props.clickEvent) {
+   //   const eventNames = props.clickEvent.split("#");
+   //   if (eventNames.length === 2) {
+   //     const $Bus = inject("$" + eventNames[0]) as any;
+   //     $Bus.$emit(eventNames[1], props.data);
+   //   }
+   // }
+   if (props.iconProps && props.iconProps.icons) {
+      props.iconProps.iconIndex = (props.iconProps.iconIndex + 1) % props.iconProps.icons.length;
+   }
+   emits('click');
+};
+</script>
+
+<template>
+   <div>
+      <!-- v-permit 必须放在实体元素上 -->
+      <Tooltip :title="props.tiptext" :disabled="props.tiptext ? undefined : 'disabled'" :placement="placement">
+         <Button class="px-[10px] py-[4px] flex items-center gap-1" v-bind="attrs" @click="onClicked">
+            <template #icon>
+               <slot name="icon">
+                  <ToolIcon
+                     :icon="props.icon"
+                     :class="[
+                        attrs.type === 'primary' ? 'ant-btn-primary' : '',
+                        'cursor-pointer w-[17px] h-[17px] mx-auto',
+                     ]"
+                     clickable
+                     v-bind="props.iconProps"
+                  />
+               </slot>
+            </template>
+            <template #default>
+               <slot></slot>
+            </template>
+         </Button>
+      </Tooltip>
+   </div>
+</template>

package/src/components/common/icon/appicon.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { SERVER_HOST } from '@skyfox2000/fapi';
+import { createFromIconfont } from '@skyfox2000/webbase';
+
+const props = defineProps({
+   icon: {
+      type: String,
+   },
+});
+/**
+ * 应用图标加载
+ * @returns 应用图标集
+ */
+const AppIcon = () => {
+   return createFromIconfont({
+      iconUrl: `${SERVER_HOST.APP_ICONS}`,
+      icon: props.icon,
+   });
+};
+
+/**
+ * 加载全部应用图标
+ */
+const AppIcons = AppIcon();
+</script>
+<template>
+   <AppIcons v-if="icon" :icon="icon" :class="['text-2xl', 'align-middle', 'w-6', 'h-6']" v-bind="$attrs" />
+</template>

package/src/components/common/icon/fullscreen.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { onFullscreenClick, useSettingInfo } from '@skyfox2000/webbase';
+import ToolIcon from './toolIcon.vue';
+const settingStore = useSettingInfo();
+</script>
+
+<template>
+   <ToolIcon
+      @click.stop="onFullscreenClick"
+      :icon="settingStore.fullscreen ? 'icon-exitscreen' : 'icon-fullscreen'"
+      class="w-[17px] h-[17px]"
+   />
+</template>

package/src/components/common/icon/helper.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { Popover } from 'ant-design-vue';
+import ToolIcon from './toolIcon.vue';
+import { useAttrs } from 'vue';
+
+defineProps<{
+   text?: string;
+   maxWidth?: string;
+}>();
+// 关闭自动继承属性到根元素
+defineOptions({
+   inheritAttrs: false,
+});
+const attrs = useAttrs(); // 手动获取 $attrs
+</script>
+
+<template>
+   <Popover placement="topRight">
+      <template #content>
+         <slot>
+            <div class="text-[14px]" :style="{ maxWidth }">
+               {{ text }}
+            </div>
+         </slot>
+      </template>
+      <span class="ml-2">
+         <ToolIcon icon="icon-question-circle" class="text-[#888] w-4 h-4" v-bind="attrs" />
+      </span>
+   </Popover>
+</template>