feat:新增pure-admin前端

Yi.Pure.Vue3/src/components/ReIcon/index.ts

@@ -0,0 +1,15 @@
+import iconifyIconOffline from "./src/iconifyIconOffline";
+import iconifyIconOnline from "./src/iconifyIconOnline";
+import iconSelect from "./src/Select.vue";
+import fontIcon from "./src/iconfont";
+
+/** 本地图标组件 */
+const IconifyIconOffline = iconifyIconOffline;
+/** 在线图标组件 */
+const IconifyIconOnline = iconifyIconOnline;
+/** `IconSelect`图标选择器组件 */
+const IconSelect = iconSelect;
+/** `iconfont`组件 */
+const FontIcon = fontIcon;
+
+export { IconifyIconOffline, IconifyIconOnline, IconSelect, FontIcon };

Yi.Pure.Vue3/src/components/ReIcon/src/Select.vue

@@ -0,0 +1,268 @@
+<script setup lang="ts">
+import { IconJson } from "@/components/ReIcon/data";
+import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
+import { ref, computed, CSSProperties, watch } from "vue";
+import Search from "@iconify-icons/ri/search-eye-line";
+
+type ParameterCSSProperties = (item?: string) => CSSProperties | undefined;
+
+defineOptions({
+  name: "IconSelect"
+});
+
+const inputValue = defineModel({ type: String });
+
+const iconList = ref(IconJson);
+const icon = ref();
+const currentActiveType = ref("ep:");
+// 深拷贝图标数据，前端做搜索
+const copyIconList = cloneDeep(iconList.value);
+const totalPage = ref(0);
+// 每页显示35个图标
+const pageSize = ref(35);
+const currentPage = ref(1);
+
+// 搜索条件
+const filterValue = ref("");
+
+const tabsList = [
+  {
+    label: "Element Plus",
+    name: "ep:"
+  },
+  {
+    label: "Remix Icon",
+    name: "ri:"
+  },
+  {
+    label: "Font Awesome 5 Solid",
+    name: "fa-solid:"
+  }
+];
+
+const pageList = computed(() =>
+  copyIconList[currentActiveType.value]
+    .filter(i => i.includes(filterValue.value))
+    .slice(
+      (currentPage.value - 1) * pageSize.value,
+      currentPage.value * pageSize.value
+    )
+);
+
+const iconItemStyle = computed((): ParameterCSSProperties => {
+  return item => {
+    if (inputValue.value === currentActiveType.value + item) {
+      return {
+        borderColor: "var(--el-color-primary)",
+        color: "var(--el-color-primary)"
+      };
+    }
+  };
+});
+
+function setVal() {
+  currentActiveType.value = inputValue.value.substring(
+    0,
+    inputValue.value.indexOf(":") + 1
+  );
+  icon.value = inputValue.value.substring(inputValue.value.indexOf(":") + 1);
+}
+
+function onBeforeEnter() {
+  if (isAllEmpty(icon.value)) return;
+  setVal();
+  // 寻找当前图标在第几页
+  const curIconIndex = copyIconList[currentActiveType.value].findIndex(
+    i => i === icon.value
+  );
+  currentPage.value = Math.ceil((curIconIndex + 1) / pageSize.value);
+}
+
+function onAfterLeave() {
+  filterValue.value = "";
+}
+
+function handleClick({ props }) {
+  currentPage.value = 1;
+  currentActiveType.value = props.name;
+}
+
+function onChangeIcon(item) {
+  icon.value = item;
+  inputValue.value = currentActiveType.value + item;
+}
+
+function onCurrentChange(page) {
+  currentPage.value = page;
+}
+
+function onClear() {
+  icon.value = "";
+  inputValue.value = "";
+}
+
+watch(
+  () => pageList.value,
+  () =>
+    (totalPage.value = copyIconList[currentActiveType.value].filter(i =>
+      i.includes(filterValue.value)
+    ).length),
+  { immediate: true }
+);
+watch(
+  () => inputValue.value,
+  val => val && setVal(),
+  { immediate: true }
+);
+watch(
+  () => filterValue.value,
+  () => (currentPage.value = 1)
+);
+</script>
+
+<template>
+  <div class="selector">
+    <el-input v-model="inputValue" disabled>
+      <template #append>
+        <el-popover
+          :width="350"
+          trigger="click"
+          popper-class="pure-popper"
+          :popper-options="{
+            placement: 'auto'
+          }"
+          @before-enter="onBeforeEnter"
+          @after-leave="onAfterLeave"
+        >
+          <template #reference>
+            <div
+              class="w-[40px] h-[32px] cursor-pointer flex justify-center items-center"
+            >
+              <IconifyIconOffline v-if="!icon" :icon="Search" />
+              <IconifyIconOnline v-else :icon="inputValue" />
+            </div>
+          </template>
+
+          <el-input
+            v-model="filterValue"
+            class="px-2 pt-2"
+            placeholder="搜索图标"
+            clearable
+          />
+
+          <el-tabs v-model="currentActiveType" @tab-click="handleClick">
+            <el-tab-pane
+              v-for="(pane, index) in tabsList"
+              :key="index"
+              :label="pane.label"
+              :name="pane.name"
+            >
+              <el-scrollbar height="220px">
+                <ul class="flex flex-wrap px-2 ml-2">
+                  <li
+                    v-for="(item, key) in pageList"
+                    :key="key"
+                    :title="item"
+                    class="icon-item p-2 cursor-pointer mr-2 mt-1 flex justify-center items-center border border-[#e5e7eb]"
+                    :style="iconItemStyle(item)"
+                    @click="onChangeIcon(item)"
+                  >
+                    <IconifyIconOnline
+                      :icon="currentActiveType + item"
+                      width="20px"
+                      height="20px"
+                    />
+                  </li>
+                </ul>
+                <el-empty
+                  v-show="pageList.length === 0"
+                  :description="`${filterValue} 图标不存在`"
+                  :image-size="60"
+                />
+              </el-scrollbar>
+            </el-tab-pane>
+          </el-tabs>
+
+          <div
+            class="w-full h-9 flex items-center overflow-auto border-t border-[#e5e7eb]"
+          >
+            <el-pagination
+              class="flex-auto ml-2"
+              :total="totalPage"
+              :current-page="currentPage"
+              :page-size="pageSize"
+              :pager-count="5"
+              layout="pager"
+              background
+              size="small"
+              @current-change="onCurrentChange"
+            />
+            <el-button
+              class="justify-end mr-2 ml-2"
+              type="danger"
+              size="small"
+              text
+              bg
+              @click="onClear"
+            >
+              清空
+            </el-button>
+          </div>
+        </el-popover>
+      </template>
+    </el-input>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.icon-item {
+  &:hover {
+    color: var(--el-color-primary);
+    border-color: var(--el-color-primary);
+    transition: all 0.4s;
+    transform: scaleX(1.05);
+  }
+}
+
+:deep(.el-tabs__nav-next) {
+  font-size: 15px;
+  line-height: 32px;
+  box-shadow: -5px 0 5px -6px #ccc;
+}
+
+:deep(.el-tabs__nav-prev) {
+  font-size: 15px;
+  line-height: 32px;
+  box-shadow: 5px 0 5px -6px #ccc;
+}
+
+:deep(.el-input-group__append) {
+  padding: 0;
+}
+
+:deep(.el-tabs__item) {
+  height: 30px;
+  font-size: 12px;
+  font-weight: normal;
+  line-height: 30px;
+}
+
+:deep(.el-tabs__header),
+:deep(.el-tabs__nav-wrap) {
+  position: static;
+  margin: 0;
+  box-shadow: 0 2px 5px rgb(0 0 0 / 6%);
+}
+
+:deep(.el-tabs__nav-wrap::after) {
+  height: 0;
+}
+
+:deep(.el-tabs__nav-wrap) {
+  padding: 0 24px;
+}
+
+:deep(.el-tabs__content) {
+  margin-top: 4px;
+}
+</style>

Yi.Pure.Vue3/src/components/ReIcon/src/hooks.ts

@@ -0,0 +1,61 @@
+import type { iconType } from "./types";
+import { h, defineComponent, type Component } from "vue";
+import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index";
+
+/**
+ * 支持 `iconfont`、自定义 `svg` 以及 `iconify` 中所有的图标
+ * @see 点击查看文档图标篇 {@link https://pure-admin.github.io/pure-admin-doc/pages/icon/}
+ * @param icon 必传 图标
+ * @param attrs 可选 iconType 属性
+ * @returns Component
+ */
+export function useRenderIcon(icon: any, attrs?: iconType): Component {
+  // iconfont
+  const ifReg = /^IF-/;
+  // typeof icon === "function" 属于SVG
+  if (ifReg.test(icon)) {
+    // iconfont
+    const name = icon.split(ifReg)[1];
+    const iconName = name.slice(
+      0,
+      name.indexOf(" ") == -1 ? name.length : name.indexOf(" ")
+    );
+    const iconType = name.slice(name.indexOf(" ") + 1, name.length);
+    return defineComponent({
+      name: "FontIcon",
+      render() {
+        return h(FontIcon, {
+          icon: iconName,
+          iconType,
+          ...attrs
+        });
+      }
+    });
+  } else if (typeof icon === "function" || typeof icon?.render === "function") {
+    // svg
+    return attrs ? h(icon, { ...attrs }) : icon;
+  } else if (typeof icon === "object") {
+    return defineComponent({
+      name: "OfflineIcon",
+      render() {
+        return h(IconifyIconOffline, {
+          icon: icon,
+          ...attrs
+        });
+      }
+    });
+  } else {
+    // 通过是否存在 : 符号来判断是在线还是本地图标，存在即是在线图标，反之
+    return defineComponent({
+      name: "Icon",
+      render() {
+        const IconifyIcon =
+          icon && icon.includes(":") ? IconifyIconOnline : IconifyIconOffline;
+        return h(IconifyIcon, {
+          icon: icon,
+          ...attrs
+        });
+      }
+    });
+  }
+}

Yi.Pure.Vue3/src/components/ReIcon/src/iconfont.ts

@@ -0,0 +1,48 @@
+import { h, defineComponent } from "vue";
+
+// 封装iconfont组件，默认`font-class`引用模式，支持`unicode`引用、`font-class`引用、`symbol`引用 （https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.20&helptype=code）
+export default defineComponent({
+  name: "FontIcon",
+  props: {
+    icon: {
+      type: String,
+      default: ""
+    }
+  },
+  render() {
+    const attrs = this.$attrs;
+    if (Object.keys(attrs).includes("uni") || attrs?.iconType === "uni") {
+      return h(
+        "i",
+        {
+          class: "iconfont",
+          ...attrs
+        },
+        this.icon
+      );
+    } else if (
+      Object.keys(attrs).includes("svg") ||
+      attrs?.iconType === "svg"
+    ) {
+      return h(
+        "svg",
+        {
+          class: "icon-svg",
+          "aria-hidden": true
+        },
+        {
+          default: () => [
+            h("use", {
+              "xlink:href": `#${this.icon}`
+            })
+          ]
+        }
+      );
+    } else {
+      return h("i", {
+        class: `iconfont ${this.icon}`,
+        ...attrs
+      });
+    }
+  }
+});

Yi.Pure.Vue3/src/components/ReIcon/src/iconifyIconOffline.ts

@@ -0,0 +1,30 @@
+import { h, defineComponent } from "vue";
+import { Icon as IconifyIcon, addIcon } from "@iconify/vue/dist/offline";
+
+// Iconify Icon在Vue里本地使用（用于内网环境）
+export default defineComponent({
+  name: "IconifyIconOffline",
+  components: { IconifyIcon },
+  props: {
+    icon: {
+      default: null
+    }
+  },
+  render() {
+    if (typeof this.icon === "object") addIcon(this.icon, this.icon);
+    const attrs = this.$attrs;
+    return h(
+      IconifyIcon,
+      {
+        icon: this.icon,
+        style: attrs?.style
+          ? Object.assign(attrs.style, { outline: "none" })
+          : { outline: "none" },
+        ...attrs
+      },
+      {
+        default: () => []
+      }
+    );
+  }
+});

Yi.Pure.Vue3/src/components/ReIcon/src/iconifyIconOnline.ts

@@ -0,0 +1,30 @@
+import { h, defineComponent } from "vue";
+import { Icon as IconifyIcon } from "@iconify/vue";
+
+// Iconify Icon在Vue里在线使用（用于外网环境）
+export default defineComponent({
+  name: "IconifyIconOnline",
+  components: { IconifyIcon },
+  props: {
+    icon: {
+      type: String,
+      default: ""
+    }
+  },
+  render() {
+    const attrs = this.$attrs;
+    return h(
+      IconifyIcon,
+      {
+        icon: `${this.icon}`,
+        style: attrs?.style
+          ? Object.assign(attrs.style, { outline: "none" })
+          : { outline: "none" },
+        ...attrs
+      },
+      {
+        default: () => []
+      }
+    );
+  }
+});

Yi.Pure.Vue3/src/components/ReIcon/src/offlineIcon.ts

@@ -0,0 +1,70 @@
+// 这里存放本地图标，在 src/layout/index.vue 文件中加载，避免在首启动加载
+import { addIcon } from "@iconify/vue/dist/offline";
+
+// 本地菜单图标，后端在路由的 icon 中返回对应的图标字符串并且前端在此处使用 addIcon 添加即可渲染菜单图标
+// @iconify-icons/ep
+import Menu from "@iconify-icons/ep/menu";
+import Edit from "@iconify-icons/ep/edit";
+import SetUp from "@iconify-icons/ep/set-up";
+import Guide from "@iconify-icons/ep/guide";
+import Monitor from "@iconify-icons/ep/monitor";
+import Lollipop from "@iconify-icons/ep/lollipop";
+import Histogram from "@iconify-icons/ep/histogram";
+import HomeFilled from "@iconify-icons/ep/home-filled";
+addIcon("ep:menu", Menu);
+addIcon("ep:edit", Edit);
+addIcon("ep:set-up", SetUp);
+addIcon("ep:guide", Guide);
+addIcon("ep:monitor", Monitor);
+addIcon("ep:lollipop", Lollipop);
+addIcon("ep:histogram", Histogram);
+addIcon("ep:home-filled", HomeFilled);
+// @iconify-icons/ri
+import Tag from "@iconify-icons/ri/bookmark-2-line";
+import Ppt from "@iconify-icons/ri/file-ppt-2-line";
+import Card from "@iconify-icons/ri/bank-card-line";
+import Role from "@iconify-icons/ri/admin-fill";
+import Info from "@iconify-icons/ri/file-info-line";
+import Dept from "@iconify-icons/ri/git-branch-line";
+import Table from "@iconify-icons/ri/table-line";
+import Links from "@iconify-icons/ri/links-fill";
+import Search from "@iconify-icons/ri/search-line";
+import FlUser from "@iconify-icons/ri/admin-line";
+import Setting from "@iconify-icons/ri/settings-3-line";
+import MindMap from "@iconify-icons/ri/mind-map";
+import BarChart from "@iconify-icons/ri/bar-chart-horizontal-line";
+import LoginLog from "@iconify-icons/ri/window-line";
+import Artboard from "@iconify-icons/ri/artboard-line";
+import SystemLog from "@iconify-icons/ri/file-search-line";
+import ListCheck from "@iconify-icons/ri/list-check";
+import UbuntuFill from "@iconify-icons/ri/ubuntu-fill";
+import OnlineUser from "@iconify-icons/ri/user-voice-line";
+import EditBoxLine from "@iconify-icons/ri/edit-box-line";
+import OperationLog from "@iconify-icons/ri/history-fill";
+import InformationLine from "@iconify-icons/ri/information-line";
+import TerminalWindowLine from "@iconify-icons/ri/terminal-window-line";
+import CheckboxCircleLine from "@iconify-icons/ri/checkbox-circle-line";
+addIcon("ri:bookmark-2-line", Tag);
+addIcon("ri:file-ppt-2-line", Ppt);
+addIcon("ri:bank-card-line", Card);
+addIcon("ri:admin-fill", Role);
+addIcon("ri:file-info-line", Info);
+addIcon("ri:git-branch-line", Dept);
+addIcon("ri:links-fill", Links);
+addIcon("ri:table-line", Table);
+addIcon("ri:search-line", Search);
+addIcon("ri:admin-line", FlUser);
+addIcon("ri:settings-3-line", Setting);
+addIcon("ri:mind-map", MindMap);
+addIcon("ri:bar-chart-horizontal-line", BarChart);
+addIcon("ri:window-line", LoginLog);
+addIcon("ri:file-search-line", SystemLog);
+addIcon("ri:artboard-line", Artboard);
+addIcon("ri:list-check", ListCheck);
+addIcon("ri:ubuntu-fill", UbuntuFill);
+addIcon("ri:user-voice-line", OnlineUser);
+addIcon("ri:edit-box-line", EditBoxLine);
+addIcon("ri:history-fill", OperationLog);
+addIcon("ri:information-line", InformationLine);
+addIcon("ri:terminal-window-line", TerminalWindowLine);
+addIcon("ri:checkbox-circle-line", CheckboxCircleLine);

Yi.Pure.Vue3/src/components/ReIcon/src/types.ts

@@ -0,0 +1,20 @@
+export interface iconType {
+  // iconify (https://docs.iconify.design/icon-components/vue/#properties)
+  inline?: boolean;
+  width?: string | number;
+  height?: string | number;
+  horizontalFlip?: boolean;
+  verticalFlip?: boolean;
+  flip?: string;
+  rotate?: number | string;
+  color?: string;
+  horizontalAlign?: boolean;
+  verticalAlign?: boolean;
+  align?: string;
+  onLoad?: Function;
+  includes?: Function;
+  // svg 需要什么SVG属性自行添加
+  fill?: string;
+  // all icon
+  style?: object;
+}