yg-yygl 0.0.1

package/src/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/src/views/sys/icon/icon-manager/icon-import.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import type { UploadFile } from 'element-plus';
+import {computed, reactive, ref} from 'vue';
+import { ElMessage } from 'element-plus';
+import {CodeEditor, Form, type FormItemConfig} from '@udp/component-ui';
+import type {HxIcon, HxIconLib} from '../../../../api/icon/types';
+import useDict from '../../../../hooks/useDict';
+import {Plus} from "@element-plus/icons-vue";
+
+const props = defineProps<{
+  iconLib: HxIconLib,
+  currentType?: string,
+}>()
+
+const { getDict } = useDict();
+
+const iconTypeList = computed(() => {
+  return getDict('icon_type', 'base')
+    .map((item) => ({
+      label: item.itemValue,
+      value: item.itemCode,
+    }));
+});
+// 导入文件实例
+const importFileRef = ref();
+
+const formRef = ref();
+const defaultFromValues = ref({
+  libCode: props.iconLib.libCode,
+  typeId: props.currentType,
+  overFlag: 0,
+})
+
+const formItem = reactive<FormItemConfig[]>([
+  {
+    prop: 'libCode',
+    label: '图标库',
+    type: 'input',
+    required: true,
+    props: {
+      disabled: true,
+    },
+    slot: 'libCode'
+  },
+  {
+    prop: 'typeId',
+    label: '图标类型',
+    type: 'select',
+    placeholder: '请选择图标类型',
+    required: true,
+    options: iconTypeList,
+    rules: [
+      { required: true, message: '请输入图标名称', trigger: ['blur', 'input'] },
+    ]
+  },
+  {
+    prop: 'overFlag',
+    label: '是否覆盖',
+    tooltip: '图标名称重复的，是否覆盖已有图标',
+    type: 'switch',
+    required: true,
+    props: {
+      activeValue: 1,
+      inactiveValue: 0,
+    }
+  },
+  {
+    prop: 'file',
+    label: '上传JSON',
+    tooltip: '采用Iconify图标机制，仅支持上传IconifyJSON格式文件',
+    slot: 'upload',
+    required: true,
+    rules: [
+      { required: true, message: '请上传JSON文件', trigger: ['change'] },
+    ]
+  },
+]);
+
+// JSON 数据
+const jsonData = ref(JSON.stringify({
+  prefix: props.iconLib.libCode,
+  icons: {},
+  width: 1024,
+  height: 1024
+}, null, 2));
+
+// 监听文件变化
+const handleFileChange = async (file: UploadFile) => {
+  if (file) {
+    formRef.value.setValue('file', file)
+    try {
+      const text = await file.raw?.text();
+      if (!text) return;
+      // 尝试格式化 JSON
+      const json = JSON.parse(text);
+      json.prefix = props.iconLib.libCode;
+      jsonData.value = JSON.stringify(json, null, 2);
+    } catch (e) {
+      console.error('JSON解析失败:', e);
+      ElMessage.error('JSON文件格式错误，解析失败');
+      jsonData.value = '';
+    }
+  } else {
+    jsonData.value = '';
+  }
+};
+
+const getIconfiyJson = async () => {
+  // 返回当前编辑器中的内容
+  if (!jsonData.value) return null;
+  try {
+    const valid = await formRef.value?.validate();
+    if (!valid) return;
+    const formData = formRef.value?.getValues();
+    const iconifyJson = formateIcon(JSON.parse(jsonData.value))
+    return {
+      iconifyJson: {
+        ...iconifyJson,
+        prefix: props.iconLib.libCode,
+        typeId: formData.typeId,
+      },
+      overFlag: formData.overFlag ?? 0,
+    };
+  } catch (e) {
+    ElMessage.error('JSON格式错误');
+    return null;
+  }
+};
+
+//  格式化图标，确保每个图标有自己attributes
+const formateIcon = (json) => {
+  const icons = Object.keys(json.icons);
+  icons.forEach(icon => {
+    json.icons[icon] = {
+      attributes: JSON.stringify({
+        width: json.width,
+        height: json.height,
+        viewBox: `0 0 ${json.width} ${json.height}`
+      }),
+      body: json.icons[icon].body,
+    }
+  })
+  return json;
+}
+
+// 暴露方法给父组件
+defineExpose({
+  getIconfiyJson,
+});
+</script>
+
+<template>
+  <div class="w-full flex flex-col">
+    <Form
+      ref="formRef"
+      :items="formItem"
+      :initial-values="defaultFromValues"
+      :show-actions="false"
+      label-width="auto"
+    >
+      <template #libCode>
+        <el-input :value="`${iconLib.libName}(${iconLib.libCode})`" disabled />
+      </template>
+      <template #upload="{ model }">
+        <el-upload
+          v-model="model.file"
+          class="upload-demo"
+          :auto-upload="false"
+          :limit="1"
+          :on-change="handleFileChange"
+        >
+          <el-button type="primary">选择文件</el-button>
+          <template #tip>
+            <div class="el-upload__tip">
+              仅支持上传json文件.
+            </div>
+          </template>
+        </el-upload>
+      </template>
+    </Form>
+    <el-divider content-position="left">JSON 预览:</el-divider>
+    <div class="h-[400px]">
+      <CodeEditor
+        v-model="jsonData"
+        language="json"
+        height="100%"
+        :readOnly="true"
+      />
+    </div>
+  </div>
+</template>

package/src/views/sys/icon/icon-manager/icon-manager-form.vue

@@ -0,0 +1,277 @@
+<script setup lang="ts">
+import type { HxIcon, HxIconLib } from '../../../../api/icon/types'
+import type { UploadProps, UploadRawFile, UploadFile } from 'element-plus'
+
+import { Form, type FormItemConfig } from '@udp/component-ui';
+import { computed, nextTick, reactive, ref, watch } from "vue";
+import useDict from '../../../../hooks/useDict';
+import { genFileId } from 'element-plus'
+
+import { buildParsedSVG, parseSVGContent } from '@iconify/utils';
+import {checkIconName} from '../../../../api/icon';
+
+const props = defineProps<{
+  editData?: HxIcon | null,
+  iconLib: HxIconLib,
+  currentTypeId?: string
+}>()
+
+const { getDict } = useDict();
+
+const iconTypeList = computed(() => {
+  const dictList = getDict('icon_type', 'base')
+    .map((item) => ({
+      label: item.itemValue,
+      value: item.itemCode,
+    }));
+  if (props.editData?.typeId && dictList.findIndex(item => item.value === props.editData?.typeId) < 0) {
+    dictList.push({
+      label: '未知类型',
+      value: props.editData?.typeId,
+      disabled: true,
+    })
+  }
+  return dictList
+});
+
+const buildSvgMarkup = () => {
+  if (!props.editData?.body) {
+    return '';
+  }
+  const width = props.iconLib.width || 1024;
+  const height = props.iconLib.height || 1024;
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}">${props.editData.body}</svg>`;
+};
+
+const createDefaultFormValues = (): HxIcon => ({
+  iconifyName: props.editData?.iconifyName || '',
+  libCode: props.iconLib.libCode,
+  body: props.editData?.body || '',
+  typeId: props.editData?.typeId || props.currentTypeId || '',
+  svg: buildSvgMarkup(),
+} as HxIcon);
+
+const defaultFromValues = reactive<HxIcon>(createDefaultFormValues())
+
+const formRef = ref();
+
+const formItem = reactive<FormItemConfig[]>([
+  {
+    prop: 'iconifyName',
+    label: '图标名称',
+    type: 'input',
+    required: true,
+    trim: true,
+    placeholder: '请输入图标名称',
+    rules: [
+      { required: true, message: '请输入图标名称', trigger: ['blur', 'input'] },
+      {
+        min: 2,
+        max: 20,
+        message: '图标名称长度应在 2-20 个字符',
+        trigger: ['blur', 'input'],
+      },
+      {
+        pattern: /^[a-z][a-z0-9-]*$/,
+        message: '图标名称只能英文小写字母开头，包含英文、数字、短横杠（-）',
+        trigger: ['blur', 'input'],
+      },
+      {
+        validator: (_rule, value, callback) => {
+          if (props.editData?.id) {
+            callback()
+            return
+          }
+          checkIconName({ iconifyName: value, libCode: props.iconLib.libCode })
+            .then(() => {
+              callback()
+            })
+            .catch(err => {
+              callback(err.msg)
+            })
+        },
+        trigger: ['blur', 'input']
+      }
+    ],
+    props: {
+      disabled: !!props.editData?.id,
+    }
+  },
+  {
+    prop: 'libCode',
+    label: '图标库',
+    type: 'input',
+    required: true,
+    props: {
+      disabled: true,
+    },
+    slot: 'libCode'
+  },
+  {
+    prop: 'typeId',
+    label: '图标类型',
+    type: 'select',
+    placeholder: '请选择图标类型',
+    required: true,
+    options: iconTypeList,
+    rules: [
+      { required: true, message: '请输入图标名称', trigger: ['blur', 'input'] },
+    ]
+  },
+  {
+    prop: 'svg',
+    label: '上传图标',
+    tooltip: '采用Iconify图标机制，仅支持上传svg格式文件',
+    slot: 'upload-svg',
+    required: true,
+    rules: [
+      { required: true, message: '请上传SVG图标', trigger: ['change'] },
+    ]
+  },
+]);
+
+const submit = async () => {
+  try {
+    const valid = await formRef.value?.validate();
+    if (!valid) return;
+    const iconData = formRef.value?.getValues();
+
+    // const svgElement = ; // 此处如何
+    const parsed = parseSVGContent(iconData.svg);
+    if (!parsed) {
+      throw new Error('无效图标')
+    }
+
+    const built = buildParsedSVG(parsed);
+    if (!built) {
+      throw new Error('无效图标')
+    }
+
+    return {
+      iconifyJson: JSON.parse(JSON.stringify({
+        prefix: props.iconLib.libCode,
+        icons: {
+          [iconData.iconifyName]: {
+            body: built.body,
+            attributes: JSON.stringify(built.attributes),
+          }
+        },
+        width: 1024,
+        height: 1024,
+        typeId: iconData.typeId,
+      })),
+      overFlag: 1,
+    }
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+const uploadSvgRef = ref();
+const handleExceed: UploadProps['onExceed'] = (files) => {
+  uploadSvgRef.value!.clearFiles()
+  const file = files[0] as UploadRawFile
+  file.uid = genFileId()
+  uploadSvgRef.value!.handleStart(file)
+}
+
+const handleChange = (file: UploadFile) => {
+  if (file && file.raw && file.raw.type === 'image/svg+xml') {
+    const reader = new FileReader();
+
+    reader.onload = (e) => {
+      let svgString = e.target.result; // 这里就是 SVG 标签字符串
+      svgString = svgString.replace(/(fill|stroke)="(?!(none|currentColor))[^"]*"/g, '$1="currentColor"');
+      formRef.value?.setValue('svg', svgString);
+    };
+
+    reader.readAsText(file.raw);
+  } else {
+    console.error("请选择有效的 SVG 文件");
+  }
+}
+
+const syncFormValues = async () => {
+  const values = createDefaultFormValues();
+  Object.assign(defaultFromValues, values);
+  await nextTick();
+  formRef.value?.setValues(values);
+  uploadSvgRef.value?.clearFiles?.();
+  formRef.value?.clearValidate?.();
+};
+
+watch(
+  () => [props.editData, props.currentTypeId, props.iconLib.libCode],
+  () => {
+    syncFormValues();
+  },
+  { immediate: true, deep: true },
+);
+
+defineExpose({
+  submit
+})
+</script>
+
+<template>
+  <Form
+    ref="formRef"
+    :items="formItem"
+    :initial-values="defaultFromValues"
+    :show-actions="false"
+    label-width="auto"
+  >
+    <template #libCode>
+      <el-input :value="`${iconLib.libName}(${iconLib.libCode})`" disabled />
+    </template>
+    <template #upload-svg="{ model }">
+      <div class="w-full rounded-[var(--radius)] border border-[var(--el-border-color-light)] bg-[var(--el-fill-color-blank)] p-3">
+        <div class="flex items-start gap-3">
+          <div
+            class="flex h-16 w-16 shrink-0 items-center justify-center rounded-md border border-dashed border-[var(--el-border-color)] bg-[var(--el-fill-color-light)]"
+          >
+            <div
+              v-if="model.svg"
+              v-html="model.svg"
+              class="svg-container h-10 w-10 text-[#606266]"
+            />
+            <span v-else class="text-xs text-[var(--el-text-color-secondary)]">
+              SVG
+            </span>
+          </div>
+          <div class="min-w-0 flex-1">
+            <el-upload
+              ref="uploadSvgRef"
+              class="upload-demo"
+              :limit="1"
+              :on-exceed="handleExceed"
+              :auto-upload="false"
+              accept=".svg"
+              :on-change="handleChange"
+              :show-file-list="false"
+            >
+              <el-button>{{ model.svg ? '更换文件' : '选择文件' }}</el-button>
+              <template #tip>
+                <div class="el-upload__tip mt-2 leading-5 text-[var(--el-text-color-secondary)]">
+                  仅支持 SVG 格式文件，系统会自动将填充色转换为 `currentColor`。
+                </div>
+              </template>
+            </el-upload>
+            <div v-if="model.iconifyName" class="mt-2 text-xs text-[var(--el-text-color-secondary)]">
+              生成名称：{{ iconLib.libCode }}:{{ model.iconifyName }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </Form>
+</template>
+
+<style scoped lang="scss">
+.svg-container {
+  :deep(svg) {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>