yg-yygl 0.0.1

package/src/views/sys/icon/icon-library/index.vue

@@ -0,0 +1,271 @@
+<script setup lang="ts">
+import type {
+  BusinessFilterItem,
+  IconActionItem,
+  TableColumn,
+} from '@udp/component-ui';
+import type { HxIconLib } from '../../../../api/icon/types';
+
+import { computed, h, onMounted, ref } from 'vue';
+
+import {
+  BusinessFilterBar,
+  Drawer,
+  IconActionGroup,
+  IconButton,
+  Table,
+  useTable,
+} from '@udp/component-ui';
+
+import { MainContainer } from '../../../../components/main-container';
+
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+import IconLibraryForm from './icon-library-form.vue';
+
+import {
+  createIconLib,
+  deleteIconLib,
+  getIconLibList,
+  updateIconLib,
+} from '../../../../api/icon';
+
+const emit = defineEmits(['manage-icons']);
+
+const searchParams = ref({});
+const filterItems: BusinessFilterItem[] = [
+  {
+    prop: 'likeQueryLibName',
+    type: 'input',
+    width: 220,
+    placeholder: '请输入图标库名称',
+  },
+  {
+    prop: 'likeQueryLibCode',
+    type: 'input',
+    placeholder: '请输入图标库编码',
+  },
+];
+
+const columns: TableColumn[] = [
+  { prop: 'libName', label: '图标库名称', minWidth: '120' },
+  { prop: 'libCode', label: '图标库编码', minWidth: '150' },
+  // { prop: 'iconCount', label: '图标数量', width: '90', },
+  { prop: 'libDesc', label: '描述', minWidth: '150' },
+  // { prop: 'createUser', label: '创建人', width: '120' },
+  { prop: 'createTime', label: '创建时间', width: '160' },
+  // { prop: 'updateUser', label: '更新人', width: '120' },
+  { prop: 'updateTime', label: '更新时间', width: '160' },
+];
+
+const cardOptions = ref({
+  title: 'libName',
+  icon: {
+    name: 'mdi:image-multiple-outline',
+    backgroundColor: 'var(--el-color-primary-light-9)',
+    color: 'var(--el-color-primary)',
+  },
+  columns: [
+    {
+      prop: 'libCode',
+      label: '图标库编码',
+      className: 'w-full',
+    },
+    {
+      prop: 'libDesc',
+      label: '描述',
+      className: 'w-full truncate',
+      render: ({ row }: { row: HxIconLib }) =>
+        h('span', {}, row.libDesc || '-'),
+    },
+    {
+      prop: 'createTime',
+      label: '创建时间',
+      className: 'w-full',
+    },
+    {
+      prop: 'updateTime',
+      label: '更新时间',
+      className: 'w-full',
+    },
+  ],
+  badge: {
+    prop: 'libCode',
+    label: '图标库编码',
+    render: ({ row }: { row: HxIconLib }) =>
+      h(
+        'div',
+        {
+          class:
+            'h-full w-full rounded-es-[calc(var(--radius)+6px)] rounded-se-[calc(var(--radius)+6px)] bg-blue-50 px-3 py-1 text-xs text-blue-600',
+        },
+        row.libCode || '-',
+      ),
+  },
+  showActions: true,
+});
+
+const actionBtns: IconActionItem[] = [
+  {
+    key: 'manage',
+    label: '管理图标',
+    icon: 'mdi:image-multiple-outline',
+    onClick: (row: HxIconLib) => {
+      emit('manage-icons', row);
+    },
+  },
+  {
+    key: 'edit',
+    label: '编辑',
+    icon: 'hx-line-built-in:edit-line',
+    onClick: (row: HxIconLib) => {
+      handleEdit(row);
+    },
+  },
+  {
+    key: 'delete',
+    label: '删除',
+    icon: 'hx-line-built-in:delete-bin-6-line',
+    type: 'danger',
+    onClick: (row: HxIconLib) => {
+      handleDelete(row);
+    },
+  },
+];
+
+const {
+  loading,
+  data,
+  refresh,
+  search,
+  reset,
+  pagination,
+  handleSizeChange,
+  handleCurrentPageChange,
+} = useTable({
+  api: {
+    list: (params: any) => getIconLibList(params),
+  },
+});
+
+const dialogVisible = ref(false);
+const dialogType = ref<'add' | 'edit'>('add');
+const dialogTitle = computed(() =>
+  dialogType.value === 'edit' ? '编辑图标库' : '新增图标库',
+);
+const currentRow = ref<HxIconLib | null>(null);
+const iconLibraryFormRef = ref();
+
+const handleAdd = () => {
+  dialogType.value = 'add';
+  currentRow.value = null;
+  dialogVisible.value = true;
+};
+
+const handleEdit = (row: HxIconLib) => {
+  dialogType.value = 'edit';
+  currentRow.value = { ...row };
+  dialogVisible.value = true;
+};
+
+const handleDelete = (row: HxIconLib) => {
+  ElMessageBox.confirm(`确定要删除该图标库吗？`, '警告', {
+    type: 'warning',
+  }).then(() => {
+    deleteIconLib(row.id!).then(() => {
+      refresh();
+      ElMessage.success('删除成功');
+    });
+  });
+};
+
+const handleConfirm = async () => {
+  try {
+    const formData = await iconLibraryFormRef.value.submit();
+    if (!formData) return;
+    if (formData.id) {
+      // 编辑
+      await updateIconLib(formData);
+    } else {
+      // 新增
+      await createIconLib(formData);
+    }
+    dialogVisible.value = false;
+    refresh();
+    ElMessage.success('保存成功');
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+onMounted(() => {
+  refresh();
+});
+
+const handleFilterSearch = (params: Record<string, any>) => {
+  search(params);
+};
+
+const handleFilterReset = () => {
+  reset();
+};
+</script>
+
+<template>
+  <MainContainer>
+    <div class="bg-background flex h-full w-full flex-col overflow-hidden">
+      <BusinessFilterBar
+        v-model="searchParams"
+        :items="filterItems"
+        :loading="loading"
+        @search="handleFilterSearch"
+        @reset="handleFilterReset"
+      />
+      <Table
+        :data="data"
+        :columns="columns"
+        :card-options="cardOptions"
+        :loading="loading"
+        :pagination="pagination"
+        show-toolbar
+        show-top-actions
+        show-action
+        show-pagination
+        action-width="124px"
+        @refresh="refresh"
+        @size-change="handleSizeChange"
+        @current-page-change="handleCurrentPageChange"
+      >
+        <template #top-actions>
+          <div class="flex flex-wrap items-center gap-2">
+            <IconButton type="primary" icon-type="add" @click="handleAdd">
+              新增图标库
+            </IconButton>
+          </div>
+        </template>
+        <template #action="{ row }">
+          <IconActionGroup :actions="actionBtns" :row="row" />
+        </template>
+        <template #card-actions="{ row }">
+          <IconActionGroup :actions="actionBtns" :row="row" />
+        </template>
+      </Table>
+    </div>
+
+    <Drawer
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      :type="dialogType"
+      size="500px"
+      @confirm="handleConfirm"
+    >
+      <IconLibraryForm ref="iconLibraryFormRef" :edit-data="currentRow" />
+    </Drawer>
+  </MainContainer>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-table) {
+  height: 100%;
+}
+</style>

package/src/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>