yg-yygl 0.0.1

package/dist/views/sys/icon/icon-manager/icon-batch-add.vue

@@ -0,0 +1,347 @@
+<script setup lang="ts">
+import {ref, reactive} from 'vue';
+import { ElMessage, type UploadFile } from 'element-plus';
+import { Delete } from '@element-plus/icons-vue';
+import { Icon, IconButton } from '@udp/component-ui';
+import { parseSVGContent, buildParsedSVG } from '@iconify/utils';
+import type { HxIconLib } from '../../../../api/icon/types';
+
+interface BatchIconItem {
+  uid: number;
+  file: File;
+  name: string; // 图标名称
+  svgContent: string; // 原始SVG字符串
+  previewSvg: string; // 用于预览的SVG（可能是经过简单处理的）
+  status: 'pending' | 'success' | 'error';
+  errorMsg?: string;
+  parsedData?: any; // 解析后的Iconify数据
+}
+
+const props = defineProps<{
+  iconLib: HxIconLib;
+  iconTypeList: Array<{ label: string; value: string }>;
+  typeId?: string;
+}>();
+
+const emit = defineEmits(['cancel', 'confirm']);
+
+// 表单状态
+const formData = reactive({
+  typeId: props.typeId??'',
+  overFlag: false, // 是否覆盖
+});
+
+const fileList = ref<BatchIconItem[]>([]);
+const uploadRef = ref();
+const loading = ref(false);
+
+// 处理文件选择
+const handleFileChange = async (uploadFile: UploadFile, uploadFiles: UploadFile[]) => {
+  // Element Plus 的 onChange 会在每个文件添加时触发
+  // 我们只处理新增的文件
+  const rawFile = uploadFile.raw;
+  if (!rawFile) return;
+
+  if (rawFile.type !== 'image/svg+xml') {
+    ElMessage.error(`${rawFile.name} 不是有效的 SVG 文件`);
+    // 从列表中移除
+    const index = uploadFiles.indexOf(uploadFile);
+    if (index !== -1) uploadFiles.splice(index, 1);
+    return;
+  }
+
+  // 检查是否已存在（通过uid）
+  if (fileList.value.some(item => item.uid === rawFile.uid)) return;
+
+  // 读取文件内容
+  const content = await readFileContent(rawFile);
+
+  let svg = content;
+
+  // 简单的字符串替换实现颜色转换 (浏览器端替代方案)
+  // 将所有 fill="..." 和 stroke="..." (排除 none) 替换为 currentColor
+  svg = svg.replace(/(fill|stroke)="(?!(none|currentColor))[^"]*"/g, '$1="currentColor"');
+
+  // 如果没有 fill 或 stroke，可能需要补充 (这里仅做简单处理，复杂情况建议后端处理或使用更强大的库)
+  // 检查是否有 fill, 如果没有则在 svg 标签上添加 fill="currentColor"
+  // if (!svg.includes('fill=')) {
+  //   svg = svg.replace('<svg', '<svg fill="currentColor"');
+  // }
+
+  // 默认名称：文件名去后缀，转小写，替换非法字符
+  let name = rawFile.name.replace(/\.svg$/i, '').toLowerCase();
+  // 简单规范化名称：只保留小写字母、数字、连字符
+  name = name.replace(/[^a-z0-9-]/g, '-');
+
+  const item: BatchIconItem = {
+    uid: rawFile.uid,
+    file: rawFile,
+    name: name,
+    svgContent: svg,
+    previewSvg: content, // 简单预览
+    status: 'pending'
+  };
+
+  // 尝试解析以验证有效性
+  try {
+
+    const parsed = parseSVGContent(svg);
+    if (!parsed) throw new Error('解析失败');
+    const built = buildParsedSVG(parsed);
+    if (!built) throw new Error('构建失败');
+
+    item.parsedData = built;
+    // 优化预览：移除宽高，设置 viewBox，确保在列表中显示正常
+    // 这里简单处理，实际预览容器会控制大小
+    item.previewSvg = content.replace(/width=".*?"/, '').replace(/height=".*?"/, '');
+  } catch (e) {
+    item.status = 'error';
+    item.errorMsg = '无效的 SVG 内容';
+  }
+
+  // if (!iconSet.value) {
+  //   iconSet.value = blankIconSet(props.iconLib.libCode);
+  // }
+  //
+  // iconSet.value.fromSVG(name, svg);
+
+  fileList.value.push(item);
+};
+
+const readFileContent = (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (e) => resolve(e.target?.result as string);
+    reader.onerror = (e) => reject(e);
+    reader.readAsText(file);
+  });
+};
+
+const handleRemove = (index: number) => {
+  const file = fileList.value[index];
+  if (uploadRef.value) {
+    uploadRef.value.handleRemove(file);
+  }
+  fileList.value.splice(index, 1);
+};
+
+const handleClear = () => {
+  fileList.value = [];
+  if (uploadRef.value) {
+    uploadRef.value.clearFiles();
+  }
+};
+
+const handleExceed = () => {
+  ElMessage.warning('一次性上传文件个数限制100个。')
+}
+
+const validate = (): boolean => {
+  if (!formData.typeId) {
+    ElMessage.warning('请选择图标分类');
+    return false;
+  }
+  if (fileList.value.length === 0) {
+    ElMessage.warning('请至少选择一个 SVG 文件');
+    return false;
+  }
+
+  // 校验名称格式和重复
+  const names = new Set();
+  for (const item of fileList.value) {
+    if (item.status === 'error') {
+      ElMessage.error(`文件 ${item.file.name} 解析失败，请移除后再提交`);
+      return false;
+    }
+    if (!item.name) {
+      ElMessage.error('图标名称不能为空');
+      return false;
+    }
+    if (!/^[a-z][a-z0-9-]*$/.test(item.name)) {
+      ElMessage.error(`图标名称 "${item.name}" 格式错误：只能以小写字母开头，包含小写字母、数字和短横杠`);
+      return false;
+    }
+    if (item.name.length < 2 || item.name.length > 50) { // 稍微放宽长度限制
+       ElMessage.error(`图标名称 "${item.name}" 长度应在 2-50 字符之间`);
+       return false;
+    }
+    if (names.has(item.name)) {
+      ElMessage.error(`存在重复的图标名称：${item.name}`);
+      return false;
+    }
+    names.add(item.name);
+  }
+  return true;
+};
+
+const handleSubmit = async () => {
+  if (!validate()) return;
+
+  loading.value = true;
+  try {
+    // 构造 Iconify JSON
+    const icons: Record<string, any> = {};
+
+    fileList.value.forEach(item => {
+      const built = item.parsedData;
+      icons[item.name] = {
+        body: built.body,
+        attributes: JSON.stringify(built.attributes),
+      };
+    });
+
+    // const exported = JSON.stringify(iconSet.value.export(), null, '\t') + '\n';
+    // console.log('exported', exported)
+    // const iconifyJson = JSON.parse(exported);
+    // iconifyJson.typeId = formData.typeId;
+    // iconifyJson.width = 1024;
+    // iconifyJson.height = 1024;
+
+
+    const payload = {
+      iconifyJson: {
+        prefix: props.iconLib.libCode,
+        icons,
+        width: 1024, // 默认宽
+        height: 1024, // 默认高
+        typeId: formData.typeId,
+      },
+      // iconifyJson,
+      overFlag: formData.overFlag ? 1 : 0,
+    };
+
+    // 暴露数据给父组件调用 API
+    emit('confirm', payload);
+  } catch (e) {
+    console.error(e);
+    ElMessage.error('处理数据失败');
+  } finally {
+    loading.value = false;
+  }
+};
+</script>
+
+<template>
+  <div class="batch-add-container h-full flex flex-col">
+    <!-- 顶部配置栏 -->
+    <div class="bg-gray-50 p-4 rounded-lg mb-4 flex flex-wrap gap-4 items-center border border-gray-200">
+      <div class="w-[240px] flex items-center gap-2 whitespace-nowrap">
+        <span class="text-sm font-medium text-gray-700 required-label">图标分类</span>
+        <el-select v-model="formData.typeId" placeholder="请选择分类" class="w-40">
+          <el-option
+            v-for="item in iconTypeList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+
+      <div class="flex items-center gap-2 whitespace-nowrap">
+        <span class="text-sm font-medium text-gray-700">遇重复覆盖</span>
+        <el-switch v-model="formData.overFlag" />
+      </div>
+
+      <div class="ml-auto">
+         <el-upload
+          ref="uploadRef"
+          action="#"
+          :auto-upload="false"
+          :on-change="handleFileChange"
+          :show-file-list="false"
+          multiple
+          accept=".svg"
+          :limit="100"
+          :on-exceed="handleExceed"
+        >
+          <IconButton type="primary" icon-type="add">选择文件 (已选 {{ fileList.length }})</IconButton>
+        </el-upload>
+      </div>
+    </div>
+
+    <!-- 列表区域 -->
+    <div class="flex-1 overflow-hidden border rounded-lg flex flex-col">
+      <div class="bg-gray-100 px-4 py-2 border-b flex items-center font-medium text-sm text-gray-600">
+        <div class="w-16 text-center">预览</div>
+        <div class="flex-1 px-4">图标名称 (可编辑)</div>
+        <div class="w-32 px-4">原始文件名</div>
+        <div class="w-20 text-center">状态</div>
+        <div class="w-16 text-center">操作</div>
+      </div>
+
+      <div class="flex-1 overflow-y-auto">
+        <div v-if="fileList.length === 0" class="h-full flex flex-col items-center justify-center text-gray-400">
+          <Icon name="ep:upload-filled" size="48" class="mb-2 opacity-50" />
+          <p>暂无文件，请点击右上角选择 SVG 图标</p>
+        </div>
+
+        <div
+          v-for="(item, index) in fileList"
+          :key="item.uid"
+          class="flex items-center px-4 py-3 border-b hover:bg-gray-50 transition-colors"
+        >
+          <!-- 预览 -->
+          <div class="w-16 h-10 flex items-center justify-center bg-white border rounded p-1">
+             <div v-if="item.status !== 'error'" v-html="item.svgContent" class="w-full h-full svg-preview text-gray-600"></div>
+             <Icon v-else name="ep:warning" class="text-red-500" />
+          </div>
+
+          <!-- 名称输入 -->
+          <div class="flex-1 px-4">
+            <el-input
+              v-model="item.name"
+              placeholder="请输入图标名称"
+              :status="item.status === 'error' ? 'error' : ''"
+            />
+          </div>
+
+          <!-- 原始文件名 -->
+          <div class="w-32 px-4 text-xs text-gray-500 truncate" :title="item.file.name">
+            {{ item.file.name }}
+          </div>
+
+          <!-- 状态 -->
+          <div class="w-20 text-center">
+             <el-tag v-if="item.status === 'error'" type="danger" size="small">解析失败</el-tag>
+             <el-tag v-else type="success" size="small">待上传</el-tag>
+          </div>
+
+          <!-- 操作 -->
+          <div class="w-16 text-center">
+            <el-button
+              type="danger"
+              link
+              :icon="Delete"
+              @click="handleRemove(index)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部操作 -->
+    <div class="mt-4 flex justify-end gap-3">
+      <el-button @click="handleClear" :disabled="fileList.length === 0">清空列表</el-button>
+      <el-button @click="emit('cancel')">取消</el-button>
+      <el-button type="primary" @click="handleSubmit" :loading="loading" :disabled="fileList.length === 0">
+        确认导入 {{ fileList.length ? `(${fileList.length})` : '' }}
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.required-label::before {
+  content: '*';
+  color: var(--el-color-danger);
+  margin-right: 4px;
+}
+.svg-preview {
+  :deep(svg) {
+    width: 100%;
+    height: 100%;
+    // 强制当前颜色，避免黑色填充
+    fill: currentColor;
+  }
+}
+</style>

package/dist/views/sys/icon/icon-manager/icon-batch-add.vue.d.ts

@@ -0,0 +1,11 @@
+import type { HxIconLib } from '../../../../api/icon/types';
+type __VLS_Props = {
+    iconLib: HxIconLib;
+    iconTypeList: Array<{
+        label: string;
+        value: string;
+    }>;
+    typeId?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/views/sys/icon/icon-manager/icon-copy.d.vue.ts

@@ -0,0 +1,7 @@
+import type { HxIcon } from '../../../../api/icon/types';
+type __VLS_Props = {
+    iconData: HxIcon | null;
+    libCode: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/views/sys/icon/icon-manager/icon-copy.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { ElMessage } from 'element-plus';
+import { Icon } from '@udp/component-ui';
+import type { HxIcon } from '../../../../api/icon/types';
+
+const props = defineProps<{
+  iconData: HxIcon | null;
+  libCode: string; // 需要从父组件传入库编码
+}>();
+
+const config = ref({
+  size: 18,
+  color: '#999999',
+  hoverColor: '',
+});
+
+// 计算完整的图标名称
+const fullIconName = computed(() => {
+  if (!props.iconData) return '';
+  return `${props.libCode}:${props.iconData.iconifyName}`;
+});
+
+// 生成Vue组件模板代码
+const templateCode = computed(() => {
+  if (!fullIconName.value) return '';
+
+  let code = `<Icon name="${fullIconName.value}"`;
+
+  // 仅当非默认值时才添加到模板中（如果需要严格匹配用户给出的模板，可以移除默认值检查）
+  code += ` size="${config.value.size}"`;
+  code += ` color="${config.value.color}"`;
+
+  if (config.value.hoverColor) {
+    code += ` :hover-color="${config.value.hoverColor}"`;
+  }
+
+  code += ` />`;
+
+  return code;
+});
+
+const copyText = async (text: string) => {
+  if (!text) return;
+  try {
+    await navigator.clipboard.writeText(text);
+    ElMessage.success('复制成功');
+  } catch (err) {
+    console.error('复制失败:', err);
+    // 降级方案
+    const textArea = document.createElement('textarea');
+    textArea.value = text;
+    document.body.appendChild(textArea);
+    textArea.select();
+    document.execCommand('copy');
+    document.body.removeChild(textArea);
+    ElMessage.success('复制成功');
+  }
+};
+
+const handleCopyTemplate = () => {
+  copyText(templateCode.value);
+};
+
+const handleCopyName = () => {
+  copyText(fullIconName.value);
+};
+</script>
+
+<template>
+  <div class="p-4" v-if="iconData">
+    <!-- 预览区域 -->
+    <div class="flex flex-col items-center justify-center p-8 bg-gray-50 rounded-lg mb-6 border border-dashed border-gray-300 gap-2">
+      <div v-html="iconData.svg"
+           :style="{
+             width: config.size + 'px',
+             height: config.size + 'px',
+             color: config.color,
+             '--hover-color': config.hoverColor
+           }"
+           class="icon-preview transition-colors duration-200"
+      ></div>
+      <div class="text-gray-500 font-mono text-sm">{{ fullIconName }}</div>
+    </div>
+
+    <!-- 配置区域 -->
+    <el-form label-position="right" label-width="auto">
+      <el-form-item label="图标大小 (px)">
+        <el-input-number v-model="config.size" :min="12" :max="128" />
+      </el-form-item>
+
+      <el-form-item label="默认颜色">
+        <div class="flex items-center gap-2">
+          <el-color-picker v-model="config.color" />
+          <span class="text-gray-500">{{ config.color }}</span>
+        </div>
+      </el-form-item>
+
+      <el-form-item label="悬停颜色">
+        <div class="flex items-center gap-2">
+          <el-color-picker v-model="config.hoverColor" />
+          <span class="text-gray-500">{{ config.hoverColor || '无' }}</span>
+        </div>
+      </el-form-item>
+    </el-form>
+
+    <!-- 复制操作区域 -->
+    <div class="mt-6 space-y-4">
+      <div class="bg-gray-800 text-gray-300 p-3 rounded text-xs font-mono break-all">
+        {{ templateCode }}
+      </div>
+
+      <el-button type="primary" class="w-full" @click="handleCopyTemplate">
+        一键复制组件代码
+      </el-button>
+
+      <el-button class="w-full !ml-0" @click="handleCopyName">
+        复制图标名称 ({{ fullIconName }})
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.icon-preview {
+  :deep(svg) {
+    width: 100%;
+    height: 100%;
+  }
+}
+/* 模拟 Icon 组件的 hover 行为，仅用于预览 */
+.icon-preview:hover {
+  color: var(--hover-color) !important;
+}
+</style>

package/dist/views/sys/icon/icon-manager/icon-copy.vue.d.ts

@@ -0,0 +1,7 @@
+import type { HxIcon } from '../../../../api/icon/types';
+type __VLS_Props = {
+    iconData: HxIcon | null;
+    libCode: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/views/sys/icon/icon-manager/icon-import.d.vue.ts

@@ -0,0 +1,12 @@
+import type { HxIconLib } from '../../../../api/icon/types';
+type __VLS_Props = {
+    iconLib: HxIconLib;
+    currentType?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    getIconfiyJson: () => Promise<{
+        iconifyJson: any;
+        overFlag: any;
+    } | null | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;