@skyfox2000/webui 1.3.5 → 1.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@skyfox2000/webui",
-   "version": "1.3.5",
+   "version": "1.3.6",
    "description": "后台前端通用组件定义",
    "type": "module",
    "keywords": [],

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

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Alert } from 'ant-design-vue';
+import ToolIcon from '../icon/toolIcon.vue';
+
+type AlertType = 'success' | 'info' | 'warning' | 'error';
+
+const props = withDefaults(
+   defineProps<{
+      /**
+       * 自定义图标内容
+       */
+      icon?: string;
+      /**
+       * 指定警告提示的样式，有四种选择 success、info、warning、error
+       */
+      type?: AlertType;
+      /**
+       * 是否显示图标
+       */
+      showIcon?: boolean;
+      /**
+       * 消息内容
+       */
+      message?: string;
+   }>(),
+   {
+      showIcon: true,
+      type: 'info',
+   },
+);
+
+// 图标颜色映射
+const iconColorMap = {
+   success: '#52c41a',
+   info: '#1890ff',
+   warning: '#faad14',
+   error: '#ff4d4f',
+};
+
+const iconMap = {
+   success: 'icon-success-fill',
+   info: 'icon-info-fill',
+   warning: 'icon-warn-fill',
+   error: 'icon-error-fill',
+};
+
+// 计算当前类型
+const currentType = computed(() => props.type || 'info');
+
+// 计算图标颜色
+const iconColor = computed(() => {
+   return iconColorMap[currentType.value];
+});
+
+// 计算当前图标
+const currentIcon = computed(() => {
+   return iconMap[currentType.value];
+});
+
+// 生成组件实例ID
+const componentId = Math.random().toString(36).substring(2, 9);
+
+// 计算动态的实例ID，确保图标正确显示
+const instanceId = computed(() => {
+   return `${componentId}-${currentType.value}-${currentIcon.value}`;
+});
+</script>
+
+<template>
+   <Alert :show-icon="showIcon" :type="type" :message="message" v-bind="$attrs">
+      <template #icon>
+         <ToolIcon :icon="currentIcon" :style="{ color: iconColor }" :key="instanceId" />
+      </template>
+   </Alert>
+</template>

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

@@ -6,6 +6,7 @@ import { useAttrs } from 'vue';
 defineProps<{
    text?: string;
    maxWidth?: string;
+   size?: number;
 }>();
 // 关闭自动继承属性到根元素
 defineOptions({
@@ -24,7 +25,12 @@ const attrs = useAttrs(); // 手动获取 $attrs
          </slot>
       </template>
       <span class="ml-2">
-         <ToolIcon icon="icon-question-circle" class="text-[#888] w-4 h-4" v-bind="attrs" />
+         <ToolIcon
+            icon="icon-question-circle"
+            class="text-[#888]"
+            :class="[size ? 'w-' + size + ' h-' + size : 'w-5 h-5']"
+            v-bind="attrs"
+         />
       </span>
    </Popover>
 </template>

package/src/components/common/index.ts

@@ -19,4 +19,7 @@ import ToolIcon from './icon/toolIcon.vue';
 export { ToolIcon };
 
 import Loading from './loading/index.vue';
-export { Loading };
+export { Loading };
+
+import Alert from './alert/index.vue';
+export { Alert };