diff --git a/src/api/v1/menuIcon.ts b/src/api/v1/menuIcon.ts
new file mode 100644
index 0000000..cccb078
--- /dev/null
+++ b/src/api/v1/menuIcon.ts
@@ -0,0 +1,30 @@
+import { http } from '@/api/service/request';
+import type { BaseResult, ResultTable } from '@/api/service/types';
+
+/**
+ * 系统菜单图标---获取多语言列表
+ */
+export const fetchGetMenuIconList = (data: any) => {
+	return http.request<BaseResult<ResultTable>>('get', `menuIcon/getMenuIconList/${data.currentPage}/${data.pageSize}`, { params: data });
+};
+
+/**
+ * 系统菜单图标---添加多语言
+ */
+export const fetchAddMenuIcon = (data: any) => {
+	return http.request<BaseResult<object>>('post', 'menuIcon/addMenuIcon', { data });
+};
+
+/**
+ * 系统菜单图标---更新多语言
+ */
+export const fetchUpdateMenuIcon = (data: any) => {
+	return http.request<BaseResult<object>>('put', 'menuIcon/updateMenuIcon', { data });
+};
+
+/**
+ * 系统菜单图标---删除多语言
+ */
+export const fetchDeleteMenuIcon = (data: any) => {
+	return http.request<BaseResult<object>>('delete', 'menuIcon/deleteMenuIcon', { data });
+};
diff --git a/src/api/v1/system.ts b/src/api/v1/system.ts
index 291506a..8c1d403 100644
--- a/src/api/v1/system.ts
+++ b/src/api/v1/system.ts
@@ -12,8 +12,8 @@ export const getMenuIconList = (data: any) => {
 };
 
 /** 菜单管理-列表 */
-export const getMenuList = (data?: any) => {
-	return http.request<BaseResult<ResultTable>>('get', `router/getMenus`, { data });
+export const getMenusList = (data?: any) => {
+	return http.request<BaseResult<ResultTable>>('get', `router/getMenusList`, { params: data });
 };
 
 /** 菜单管理-添加菜单 */
diff --git a/src/components/CommonIcon/src/hooks.ts b/src/components/CommonIcon/src/hooks.ts
index 5a377da..347d0b6 100644
--- a/src/components/CommonIcon/src/hooks.ts
+++ b/src/components/CommonIcon/src/hooks.ts
@@ -1,6 +1,6 @@
-import type { iconType } from "./types";
-import { h, defineComponent, type Component } from "vue";
-import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index";
+import type { iconType } from './types';
+import { type Component, defineComponent, h } from 'vue';
+import { FontIcon, IconifyIconOffline, IconifyIconOnline } from '../index';
 
 /**
  * 支持 `iconfont`、自定义 `svg` 以及 `iconify` 中所有的图标
@@ -10,52 +10,48 @@ import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index";
  * @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
-        });
-      }
-    });
-  }
+	// 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,
+				});
+			},
+		});
+	}
 }
diff --git a/src/components/ReIcon/data.ts b/src/components/ReIcon/data.ts
deleted file mode 100644
index b5769e8..0000000
--- a/src/components/ReIcon/data.ts
+++ /dev/null
@@ -1,3869 +0,0 @@
-/**
- * 想要哪个图标集 自行添加即可 请注意此处添加的图标集均为在线图标（https://iconify.design/docs/api/#public-api）
- * 如果项目在内网环境下 参考 https://www.bilibili.com/video/BV17S4y1J79d?p=4&vd_source=5a992808de6229d78e7810536c5f9ab3 教程自行离线部署图标
- * https://icones.js.org/collections/图标集前缀名-meta.json（如：https://icones.js.org/collections/ri-meta.json 取icons字段，可获得当前图标集的所有图标）
- */
-export const IconJson = {
-  // https://icones.js.org/collections/ep-meta.json
-  "ep:": [
-    "add-location",
-    "aim",
-    "alarm-clock",
-    "apple",
-    "arrow-down",
-    "arrow-down-bold",
-    "arrow-left",
-    "arrow-left-bold",
-    "arrow-right",
-    "arrow-right-bold",
-    "arrow-up",
-    "arrow-up-bold",
-    "avatar",
-    "back",
-    "baseball",
-    "basketball",
-    "bell",
-    "bell-filled",
-    "bicycle",
-    "bottom",
-    "bottom-left",
-    "bottom-right",
-    "bowl",
-    "box",
-    "briefcase",
-    "brush",
-    "brush-filled",
-    "burger",
-    "calendar",
-    "camera",
-    "camera-filled",
-    "caret-bottom",
-    "caret-left",
-    "caret-right",
-    "caret-top",
-    "cellphone",
-    "chat-dot-round",
-    "chat-dot-square",
-    "chat-line-round",
-    "chat-line-square",
-    "chat-round",
-    "chat-square",
-    "check",
-    "checked",
-    "cherry",
-    "chicken",
-    "chrome-filled",
-    "circle-check",
-    "circle-check-filled",
-    "circle-close",
-    "circle-close-filled",
-    "circle-plus",
-    "circle-plus-filled",
-    "clock",
-    "close",
-    "close-bold",
-    "cloudy",
-    "coffee",
-    "coffee-cup",
-    "coin",
-    "cold-drink",
-    "collection",
-    "collection-tag",
-    "comment",
-    "compass",
-    "connection",
-    "coordinate",
-    "copy-document",
-    "cpu",
-    "credit-card",
-    "crop",
-    "d-arrow-left",
-    "d-arrow-right",
-    "d-caret",
-    "data-analysis",
-    "data-board",
-    "data-line",
-    "delete",
-    "delete-filled",
-    "delete-location",
-    "dessert",
-    "discount",
-    "dish",
-    "dish-dot",
-    "document",
-    "document-add",
-    "document-checked",
-    "document-copy",
-    "document-delete",
-    "document-remove",
-    "download",
-    "drizzling",
-    "edit",
-    "edit-pen",
-    "eleme",
-    "eleme-filled",
-    "element-plus",
-    "expand",
-    "failed",
-    "female",
-    "files",
-    "film",
-    "filter",
-    "finished",
-    "first-aid-kit",
-    "flag",
-    "fold",
-    "folder",
-    "folder-add",
-    "folder-checked",
-    "folder-delete",
-    "folder-opened",
-    "folder-remove",
-    "food",
-    "football",
-    "fork-spoon",
-    "fries",
-    "full-screen",
-    "goblet",
-    "goblet-full",
-    "goblet-square",
-    "goblet-square-full",
-    "gold-medal",
-    "goods",
-    "goods-filled",
-    "grape",
-    "grid",
-    "guide",
-    "handbag",
-    "headset",
-    "help",
-    "help-filled",
-    "hide",
-    "histogram",
-    "home-filled",
-    "hot-water",
-    "house",
-    "ice-cream",
-    "ice-cream-round",
-    "ice-cream-square",
-    "ice-drink",
-    "ice-tea",
-    "info-filled",
-    "iphone",
-    "key",
-    "knife-fork",
-    "lightning",
-    "link",
-    "list",
-    "loading",
-    "location",
-    "location-filled",
-    "location-information",
-    "lock",
-    "lollipop",
-    "magic-stick",
-    "magnet",
-    "male",
-    "management",
-    "map-location",
-    "medal",
-    "memo",
-    "menu",
-    "message",
-    "message-box",
-    "mic",
-    "microphone",
-    "milk-tea",
-    "minus",
-    "money",
-    "monitor",
-    "moon",
-    "moon-night",
-    "more",
-    "more-filled",
-    "mostly-cloudy",
-    "mouse",
-    "mug",
-    "mute",
-    "mute-notification",
-    "no-smoking",
-    "notebook",
-    "notification",
-    "odometer",
-    "office-building",
-    "open",
-    "operation",
-    "opportunity",
-    "orange",
-    "paperclip",
-    "partly-cloudy",
-    "pear",
-    "phone",
-    "phone-filled",
-    "picture",
-    "picture-filled",
-    "picture-rounded",
-    "pie-chart",
-    "place",
-    "platform",
-    "plus",
-    "pointer",
-    "position",
-    "postcard",
-    "pouring",
-    "present",
-    "price-tag",
-    "printer",
-    "promotion",
-    "quartz-watch",
-    "question-filled",
-    "rank",
-    "reading",
-    "reading-lamp",
-    "refresh",
-    "refresh-left",
-    "refresh-right",
-    "refrigerator",
-    "remove",
-    "remove-filled",
-    "right",
-    "scale-to-original",
-    "school",
-    "scissor",
-    "search",
-    "select",
-    "sell",
-    "semi-select",
-    "service",
-    "set-up",
-    "setting",
-    "share",
-    "ship",
-    "shop",
-    "shopping-bag",
-    "shopping-cart",
-    "shopping-cart-full",
-    "shopping-trolley",
-    "smoking",
-    "soccer",
-    "sold-out",
-    "sort",
-    "sort-down",
-    "sort-up",
-    "stamp",
-    "star",
-    "star-filled",
-    "stopwatch",
-    "success-filled",
-    "sugar",
-    "suitcase",
-    "suitcase-line",
-    "sunny",
-    "sunrise",
-    "sunset",
-    "switch",
-    "switch-button",
-    "switch-filled",
-    "takeaway-box",
-    "ticket",
-    "tickets",
-    "timer",
-    "toilet-paper",
-    "tools",
-    "top",
-    "top-left",
-    "top-right",
-    "trend-charts",
-    "trophy",
-    "trophy-base",
-    "turn-off",
-    "umbrella",
-    "unlock",
-    "upload",
-    "upload-filled",
-    "user",
-    "user-filled",
-    "van",
-    "video-camera",
-    "video-camera-filled",
-    "video-pause",
-    "video-play",
-    "view",
-    "wallet",
-    "wallet-filled",
-    "warn-triangle-filled",
-    "warning",
-    "warning-filled",
-    "watch",
-    "watermelon",
-    "wind-power",
-    "zoom-in",
-    "zoom-out"
-  ],
-  // https://icones.js.org/collections/ri-meta.json
-  "ri:": [
-    "24-hours-fill",
-    "24-hours-line",
-    "4k-fill",
-    "4k-line",
-    "a-b",
-    "account-box-fill",
-    "account-box-line",
-    "account-circle-fill",
-    "account-circle-line",
-    "account-pin-box-fill",
-    "account-pin-box-line",
-    "account-pin-circle-fill",
-    "account-pin-circle-line",
-    "add-box-fill",
-    "add-box-line",
-    "add-circle-fill",
-    "add-circle-line",
-    "add-fill",
-    "add-line",
-    "admin-fill",
-    "admin-line",
-    "advertisement-fill",
-    "advertisement-line",
-    "ai-generate",
-    "airplay-fill",
-    "airplay-line",
-    "alarm-fill",
-    "alarm-line",
-    "alarm-warning-fill",
-    "alarm-warning-line",
-    "album-fill",
-    "album-line",
-    "alert-fill",
-    "alert-line",
-    "aliens-fill",
-    "aliens-line",
-    "align-bottom",
-    "align-center",
-    "align-justify",
-    "align-left",
-    "align-right",
-    "align-top",
-    "align-vertically",
-    "alipay-fill",
-    "alipay-line",
-    "amazon-fill",
-    "amazon-line",
-    "anchor-fill",
-    "anchor-line",
-    "ancient-gate-fill",
-    "ancient-gate-line",
-    "ancient-pavilion-fill",
-    "ancient-pavilion-line",
-    "android-fill",
-    "android-line",
-    "angularjs-fill",
-    "angularjs-line",
-    "anticlockwise-2-fill",
-    "anticlockwise-2-line",
-    "anticlockwise-fill",
-    "anticlockwise-line",
-    "app-store-fill",
-    "app-store-line",
-    "apple-fill",
-    "apple-line",
-    "apps-2-fill",
-    "apps-2-line",
-    "apps-fill",
-    "apps-line",
-    "archive-2-fill",
-    "archive-2-line",
-    "archive-drawer-fill",
-    "archive-drawer-line",
-    "archive-fill",
-    "archive-line",
-    "arrow-down-circle-fill",
-    "arrow-down-circle-line",
-    "arrow-down-double-fill",
-    "arrow-down-double-line",
-    "arrow-down-fill",
-    "arrow-down-line",
-    "arrow-down-s-fill",
-    "arrow-down-s-line",
-    "arrow-drop-down-fill",
-    "arrow-drop-down-line",
-    "arrow-drop-left-fill",
-    "arrow-drop-left-line",
-    "arrow-drop-right-fill",
-    "arrow-drop-right-line",
-    "arrow-drop-up-fill",
-    "arrow-drop-up-line",
-    "arrow-go-back-fill",
-    "arrow-go-back-line",
-    "arrow-go-forward-fill",
-    "arrow-go-forward-line",
-    "arrow-left-circle-fill",
-    "arrow-left-circle-line",
-    "arrow-left-double-fill",
-    "arrow-left-double-line",
-    "arrow-left-down-fill",
-    "arrow-left-down-line",
-    "arrow-left-fill",
-    "arrow-left-line",
-    "arrow-left-right-fill",
-    "arrow-left-right-line",
-    "arrow-left-s-fill",
-    "arrow-left-s-line",
-    "arrow-left-up-fill",
-    "arrow-left-up-line",
-    "arrow-right-circle-fill",
-    "arrow-right-circle-line",
-    "arrow-right-double-fill",
-    "arrow-right-double-line",
-    "arrow-right-down-fill",
-    "arrow-right-down-line",
-    "arrow-right-fill",
-    "arrow-right-line",
-    "arrow-right-s-fill",
-    "arrow-right-s-line",
-    "arrow-right-up-fill",
-    "arrow-right-up-line",
-    "arrow-turn-back-fill",
-    "arrow-turn-back-line",
-    "arrow-turn-forward-fill",
-    "arrow-turn-forward-line",
-    "arrow-up-circle-fill",
-    "arrow-up-circle-line",
-    "arrow-up-double-fill",
-    "arrow-up-double-line",
-    "arrow-up-down-fill",
-    "arrow-up-down-line",
-    "arrow-up-fill",
-    "arrow-up-line",
-    "arrow-up-s-fill",
-    "arrow-up-s-line",
-    "artboard-2-fill",
-    "artboard-2-line",
-    "artboard-fill",
-    "artboard-line",
-    "article-fill",
-    "article-line",
-    "aspect-ratio-fill",
-    "aspect-ratio-line",
-    "asterisk",
-    "at-fill",
-    "at-line",
-    "attachment-2",
-    "attachment-fill",
-    "attachment-line",
-    "auction-fill",
-    "auction-line",
-    "award-fill",
-    "award-line",
-    "baidu-fill",
-    "baidu-line",
-    "ball-pen-fill",
-    "ball-pen-line",
-    "bank-card-2-fill",
-    "bank-card-2-line",
-    "bank-card-fill",
-    "bank-card-line",
-    "bank-fill",
-    "bank-line",
-    "bar-chart-2-fill",
-    "bar-chart-2-line",
-    "bar-chart-box-fill",
-    "bar-chart-box-line",
-    "bar-chart-fill",
-    "bar-chart-grouped-fill",
-    "bar-chart-grouped-line",
-    "bar-chart-horizontal-fill",
-    "bar-chart-horizontal-line",
-    "bar-chart-line",
-    "barcode-box-fill",
-    "barcode-box-line",
-    "barcode-fill",
-    "barcode-line",
-    "bard-fill",
-    "bard-line",
-    "barricade-fill",
-    "barricade-line",
-    "base-station-fill",
-    "base-station-line",
-    "basketball-fill",
-    "basketball-line",
-    "battery-2-charge-fill",
-    "battery-2-charge-line",
-    "battery-2-fill",
-    "battery-2-line",
-    "battery-charge-fill",
-    "battery-charge-line",
-    "battery-fill",
-    "battery-line",
-    "battery-low-fill",
-    "battery-low-line",
-    "battery-saver-fill",
-    "battery-saver-line",
-    "battery-share-fill",
-    "battery-share-line",
-    "bear-smile-fill",
-    "bear-smile-line",
-    "beer-fill",
-    "beer-line",
-    "behance-fill",
-    "behance-line",
-    "bell-fill",
-    "bell-line",
-    "bike-fill",
-    "bike-line",
-    "bilibili-fill",
-    "bilibili-line",
-    "bill-fill",
-    "bill-line",
-    "billiards-fill",
-    "billiards-line",
-    "bit-coin-fill",
-    "bit-coin-line",
-    "blaze-fill",
-    "blaze-line",
-    "blender-fill",
-    "blender-line",
-    "bluetooth-connect-fill",
-    "bluetooth-connect-line",
-    "bluetooth-fill",
-    "bluetooth-line",
-    "blur-off-fill",
-    "blur-off-line",
-    "body-scan-fill",
-    "body-scan-line",
-    "bold",
-    "book-2-fill",
-    "book-2-line",
-    "book-3-fill",
-    "book-3-line",
-    "book-fill",
-    "book-line",
-    "book-mark-fill",
-    "book-mark-line",
-    "book-open-fill",
-    "book-open-line",
-    "book-read-fill",
-    "book-read-line",
-    "booklet-fill",
-    "booklet-line",
-    "bookmark-2-fill",
-    "bookmark-2-line",
-    "bookmark-3-fill",
-    "bookmark-3-line",
-    "bookmark-fill",
-    "bookmark-line",
-    "bootstrap-fill",
-    "bootstrap-line",
-    "box-1-fill",
-    "box-1-line",
-    "box-2-fill",
-    "box-2-line",
-    "box-3-fill",
-    "box-3-line",
-    "boxing-fill",
-    "boxing-line",
-    "braces-fill",
-    "braces-line",
-    "brackets-fill",
-    "brackets-line",
-    "brain-fill",
-    "brain-line",
-    "briefcase-2-fill",
-    "briefcase-2-line",
-    "briefcase-3-fill",
-    "briefcase-3-line",
-    "briefcase-4-fill",
-    "briefcase-4-line",
-    "briefcase-5-fill",
-    "briefcase-5-line",
-    "briefcase-fill",
-    "briefcase-line",
-    "bring-forward",
-    "bring-to-front",
-    "broadcast-fill",
-    "broadcast-line",
-    "brush-2-fill",
-    "brush-2-line",
-    "brush-3-fill",
-    "brush-3-line",
-    "brush-4-fill",
-    "brush-4-line",
-    "brush-fill",
-    "brush-line",
-    "bubble-chart-fill",
-    "bubble-chart-line",
-    "bug-2-fill",
-    "bug-2-line",
-    "bug-fill",
-    "bug-line",
-    "building-2-fill",
-    "building-2-line",
-    "building-3-fill",
-    "building-3-line",
-    "building-4-fill",
-    "building-4-line",
-    "building-fill",
-    "building-line",
-    "bus-2-fill",
-    "bus-2-line",
-    "bus-fill",
-    "bus-line",
-    "bus-wifi-fill",
-    "bus-wifi-line",
-    "cactus-fill",
-    "cactus-line",
-    "cake-2-fill",
-    "cake-2-line",
-    "cake-3-fill",
-    "cake-3-line",
-    "cake-fill",
-    "cake-line",
-    "calculator-fill",
-    "calculator-line",
-    "calendar-2-fill",
-    "calendar-2-line",
-    "calendar-check-fill",
-    "calendar-check-line",
-    "calendar-close-fill",
-    "calendar-close-line",
-    "calendar-event-fill",
-    "calendar-event-line",
-    "calendar-fill",
-    "calendar-line",
-    "calendar-todo-fill",
-    "calendar-todo-line",
-    "camera-2-fill",
-    "camera-2-line",
-    "camera-3-fill",
-    "camera-3-line",
-    "camera-fill",
-    "camera-lens-fill",
-    "camera-lens-line",
-    "camera-line",
-    "camera-off-fill",
-    "camera-off-line",
-    "camera-switch-fill",
-    "camera-switch-line",
-    "candle-fill",
-    "candle-line",
-    "capsule-fill",
-    "capsule-line",
-    "car-fill",
-    "car-line",
-    "car-washing-fill",
-    "car-washing-line",
-    "caravan-fill",
-    "caravan-line",
-    "cash-fill",
-    "cash-line",
-    "cast-fill",
-    "cast-line",
-    "cellphone-fill",
-    "cellphone-line",
-    "celsius-fill",
-    "celsius-line",
-    "centos-fill",
-    "centos-line",
-    "character-recognition-fill",
-    "character-recognition-line",
-    "charging-pile-2-fill",
-    "charging-pile-2-line",
-    "charging-pile-fill",
-    "charging-pile-line",
-    "chat-1-fill",
-    "chat-1-line",
-    "chat-2-fill",
-    "chat-2-line",
-    "chat-3-fill",
-    "chat-3-line",
-    "chat-4-fill",
-    "chat-4-line",
-    "chat-check-fill",
-    "chat-check-line",
-    "chat-delete-fill",
-    "chat-delete-line",
-    "chat-download-fill",
-    "chat-download-line",
-    "chat-follow-up-fill",
-    "chat-follow-up-line",
-    "chat-forward-fill",
-    "chat-forward-line",
-    "chat-heart-fill",
-    "chat-heart-line",
-    "chat-history-fill",
-    "chat-history-line",
-    "chat-new-fill",
-    "chat-new-line",
-    "chat-off-fill",
-    "chat-off-line",
-    "chat-poll-fill",
-    "chat-poll-line",
-    "chat-private-fill",
-    "chat-private-line",
-    "chat-quote-fill",
-    "chat-quote-line",
-    "chat-settings-fill",
-    "chat-settings-line",
-    "chat-smile-2-fill",
-    "chat-smile-2-line",
-    "chat-smile-3-fill",
-    "chat-smile-3-line",
-    "chat-smile-fill",
-    "chat-smile-line",
-    "chat-upload-fill",
-    "chat-upload-line",
-    "chat-voice-fill",
-    "chat-voice-line",
-    "check-double-fill",
-    "check-double-line",
-    "check-fill",
-    "check-line",
-    "checkbox-blank-circle-fill",
-    "checkbox-blank-circle-line",
-    "checkbox-blank-fill",
-    "checkbox-blank-line",
-    "checkbox-circle-fill",
-    "checkbox-circle-line",
-    "checkbox-fill",
-    "checkbox-indeterminate-fill",
-    "checkbox-indeterminate-line",
-    "checkbox-line",
-    "checkbox-multiple-blank-fill",
-    "checkbox-multiple-blank-line",
-    "checkbox-multiple-fill",
-    "checkbox-multiple-line",
-    "china-railway-fill",
-    "china-railway-line",
-    "chrome-fill",
-    "chrome-line",
-    "circle-fill",
-    "circle-line",
-    "clapperboard-fill",
-    "clapperboard-line",
-    "clipboard-fill",
-    "clipboard-line",
-    "clockwise-2-fill",
-    "clockwise-2-line",
-    "clockwise-fill",
-    "clockwise-line",
-    "close-circle-fill",
-    "close-circle-line",
-    "close-fill",
-    "close-line",
-    "closed-captioning-fill",
-    "closed-captioning-line",
-    "cloud-fill",
-    "cloud-line",
-    "cloud-off-fill",
-    "cloud-off-line",
-    "cloud-windy-fill",
-    "cloud-windy-line",
-    "cloudy-2-fill",
-    "cloudy-2-line",
-    "cloudy-fill",
-    "cloudy-line",
-    "code-box-fill",
-    "code-box-line",
-    "code-fill",
-    "code-line",
-    "code-s-fill",
-    "code-s-line",
-    "code-s-slash-fill",
-    "code-s-slash-line",
-    "code-view",
-    "codepen-fill",
-    "codepen-line",
-    "coin-fill",
-    "coin-line",
-    "coins-fill",
-    "coins-line",
-    "collage-fill",
-    "collage-line",
-    "command-fill",
-    "command-line",
-    "community-fill",
-    "community-line",
-    "compass-2-fill",
-    "compass-2-line",
-    "compass-3-fill",
-    "compass-3-line",
-    "compass-4-fill",
-    "compass-4-line",
-    "compass-discover-fill",
-    "compass-discover-line",
-    "compass-fill",
-    "compass-line",
-    "compasses-2-fill",
-    "compasses-2-line",
-    "compasses-fill",
-    "compasses-line",
-    "computer-fill",
-    "computer-line",
-    "contacts-book-2-fill",
-    "contacts-book-2-line",
-    "contacts-book-fill",
-    "contacts-book-line",
-    "contacts-book-upload-fill",
-    "contacts-book-upload-line",
-    "contacts-fill",
-    "contacts-line",
-    "contract-left-fill",
-    "contract-left-line",
-    "contract-left-right-fill",
-    "contract-left-right-line",
-    "contract-right-fill",
-    "contract-right-line",
-    "contract-up-down-fill",
-    "contract-up-down-line",
-    "contrast-2-fill",
-    "contrast-2-line",
-    "contrast-drop-2-fill",
-    "contrast-drop-2-line",
-    "contrast-drop-fill",
-    "contrast-drop-line",
-    "contrast-fill",
-    "contrast-line",
-    "copilot-fill",
-    "copilot-line",
-    "copper-coin-fill",
-    "copper-coin-line",
-    "copper-diamond-fill",
-    "copper-diamond-line",
-    "copyleft-fill",
-    "copyleft-line",
-    "copyright-fill",
-    "copyright-line",
-    "coreos-fill",
-    "coreos-line",
-    "corner-down-left-fill",
-    "corner-down-left-line",
-    "corner-down-right-fill",
-    "corner-down-right-line",
-    "corner-left-down-fill",
-    "corner-left-down-line",
-    "corner-left-up-fill",
-    "corner-left-up-line",
-    "corner-right-down-fill",
-    "corner-right-down-line",
-    "corner-right-up-fill",
-    "corner-right-up-line",
-    "corner-up-left-double-fill",
-    "corner-up-left-double-line",
-    "corner-up-left-fill",
-    "corner-up-left-line",
-    "corner-up-right-double-fill",
-    "corner-up-right-double-line",
-    "corner-up-right-fill",
-    "corner-up-right-line",
-    "coupon-2-fill",
-    "coupon-2-line",
-    "coupon-3-fill",
-    "coupon-3-line",
-    "coupon-4-fill",
-    "coupon-4-line",
-    "coupon-5-fill",
-    "coupon-5-line",
-    "coupon-fill",
-    "coupon-line",
-    "cpu-fill",
-    "cpu-line",
-    "creative-commons-by-fill",
-    "creative-commons-by-line",
-    "creative-commons-fill",
-    "creative-commons-line",
-    "creative-commons-nc-fill",
-    "creative-commons-nc-line",
-    "creative-commons-nd-fill",
-    "creative-commons-nd-line",
-    "creative-commons-sa-fill",
-    "creative-commons-sa-line",
-    "creative-commons-zero-fill",
-    "creative-commons-zero-line",
-    "criminal-fill",
-    "criminal-line",
-    "crop-2-fill",
-    "crop-2-line",
-    "crop-fill",
-    "crop-line",
-    "cross-fill",
-    "cross-line",
-    "crosshair-2-fill",
-    "crosshair-2-line",
-    "crosshair-fill",
-    "crosshair-line",
-    "css3-fill",
-    "css3-line",
-    "cup-fill",
-    "cup-line",
-    "currency-fill",
-    "currency-line",
-    "cursor-fill",
-    "cursor-line",
-    "customer-service-2-fill",
-    "customer-service-2-line",
-    "customer-service-fill",
-    "customer-service-line",
-    "dashboard-2-fill",
-    "dashboard-2-line",
-    "dashboard-3-fill",
-    "dashboard-3-line",
-    "dashboard-fill",
-    "dashboard-line",
-    "database-2-fill",
-    "database-2-line",
-    "database-fill",
-    "database-line",
-    "delete-back-2-fill",
-    "delete-back-2-line",
-    "delete-back-fill",
-    "delete-back-line",
-    "delete-bin-2-fill",
-    "delete-bin-2-line",
-    "delete-bin-3-fill",
-    "delete-bin-3-line",
-    "delete-bin-4-fill",
-    "delete-bin-4-line",
-    "delete-bin-5-fill",
-    "delete-bin-5-line",
-    "delete-bin-6-fill",
-    "delete-bin-6-line",
-    "delete-bin-7-fill",
-    "delete-bin-7-line",
-    "delete-bin-fill",
-    "delete-bin-line",
-    "delete-column",
-    "delete-row",
-    "device-fill",
-    "device-line",
-    "device-recover-fill",
-    "device-recover-line",
-    "dingding-fill",
-    "dingding-line",
-    "direction-fill",
-    "direction-line",
-    "disc-fill",
-    "disc-line",
-    "discord-fill",
-    "discord-line",
-    "discuss-fill",
-    "discuss-line",
-    "dislike-fill",
-    "dislike-line",
-    "disqus-fill",
-    "disqus-line",
-    "divide-fill",
-    "divide-line",
-    "donut-chart-fill",
-    "donut-chart-line",
-    "door-closed-fill",
-    "door-closed-line",
-    "door-fill",
-    "door-line",
-    "door-lock-box-fill",
-    "door-lock-box-line",
-    "door-lock-fill",
-    "door-lock-line",
-    "door-open-fill",
-    "door-open-line",
-    "dossier-fill",
-    "dossier-line",
-    "douban-fill",
-    "douban-line",
-    "double-quotes-l",
-    "double-quotes-r",
-    "download-2-fill",
-    "download-2-line",
-    "download-cloud-2-fill",
-    "download-cloud-2-line",
-    "download-cloud-fill",
-    "download-cloud-line",
-    "download-fill",
-    "download-line",
-    "draft-fill",
-    "draft-line",
-    "drag-drop-fill",
-    "drag-drop-line",
-    "drag-move-2-fill",
-    "drag-move-2-line",
-    "drag-move-fill",
-    "drag-move-line",
-    "draggable",
-    "dribbble-fill",
-    "dribbble-line",
-    "drive-fill",
-    "drive-line",
-    "drizzle-fill",
-    "drizzle-line",
-    "drop-fill",
-    "drop-line",
-    "dropbox-fill",
-    "dropbox-line",
-    "dropdown-list",
-    "dual-sim-1-fill",
-    "dual-sim-1-line",
-    "dual-sim-2-fill",
-    "dual-sim-2-line",
-    "dv-fill",
-    "dv-line",
-    "dvd-fill",
-    "dvd-line",
-    "e-bike-2-fill",
-    "e-bike-2-line",
-    "e-bike-fill",
-    "e-bike-line",
-    "earth-fill",
-    "earth-line",
-    "earthquake-fill",
-    "earthquake-line",
-    "edge-fill",
-    "edge-line",
-    "edge-new-fill",
-    "edge-new-line",
-    "edit-2-fill",
-    "edit-2-line",
-    "edit-box-fill",
-    "edit-box-line",
-    "edit-circle-fill",
-    "edit-circle-line",
-    "edit-fill",
-    "edit-line",
-    "eject-fill",
-    "eject-line",
-    "emoji-sticker-fill",
-    "emoji-sticker-line",
-    "emotion-2-fill",
-    "emotion-2-line",
-    "emotion-fill",
-    "emotion-happy-fill",
-    "emotion-happy-line",
-    "emotion-laugh-fill",
-    "emotion-laugh-line",
-    "emotion-line",
-    "emotion-normal-fill",
-    "emotion-normal-line",
-    "emotion-sad-fill",
-    "emotion-sad-line",
-    "emotion-unhappy-fill",
-    "emotion-unhappy-line",
-    "empathize-fill",
-    "empathize-line",
-    "emphasis",
-    "emphasis-cn",
-    "english-input",
-    "equal-fill",
-    "equal-line",
-    "equalizer-fill",
-    "equalizer-line",
-    "eraser-fill",
-    "eraser-line",
-    "error-warning-fill",
-    "error-warning-line",
-    "evernote-fill",
-    "evernote-line",
-    "exchange-box-fill",
-    "exchange-box-line",
-    "exchange-cny-fill",
-    "exchange-cny-line",
-    "exchange-dollar-fill",
-    "exchange-dollar-line",
-    "exchange-fill",
-    "exchange-funds-fill",
-    "exchange-funds-line",
-    "exchange-line",
-    "expand-left-fill",
-    "expand-left-line",
-    "expand-left-right-fill",
-    "expand-left-right-line",
-    "expand-right-fill",
-    "expand-right-line",
-    "expand-up-down-fill",
-    "expand-up-down-line",
-    "external-link-fill",
-    "external-link-line",
-    "eye-2-fill",
-    "eye-2-line",
-    "eye-close-fill",
-    "eye-close-line",
-    "eye-fill",
-    "eye-line",
-    "eye-off-fill",
-    "eye-off-line",
-    "facebook-box-fill",
-    "facebook-box-line",
-    "facebook-circle-fill",
-    "facebook-circle-line",
-    "facebook-fill",
-    "facebook-line",
-    "fahrenheit-fill",
-    "fahrenheit-line",
-    "feedback-fill",
-    "feedback-line",
-    "file-2-fill",
-    "file-2-line",
-    "file-3-fill",
-    "file-3-line",
-    "file-4-fill",
-    "file-4-line",
-    "file-add-fill",
-    "file-add-line",
-    "file-chart-2-fill",
-    "file-chart-2-line",
-    "file-chart-fill",
-    "file-chart-line",
-    "file-close-fill",
-    "file-close-line",
-    "file-cloud-fill",
-    "file-cloud-line",
-    "file-code-fill",
-    "file-code-line",
-    "file-copy-2-fill",
-    "file-copy-2-line",
-    "file-copy-fill",
-    "file-copy-line",
-    "file-damage-fill",
-    "file-damage-line",
-    "file-download-fill",
-    "file-download-line",
-    "file-edit-fill",
-    "file-edit-line",
-    "file-excel-2-fill",
-    "file-excel-2-line",
-    "file-excel-fill",
-    "file-excel-line",
-    "file-fill",
-    "file-forbid-fill",
-    "file-forbid-line",
-    "file-gif-fill",
-    "file-gif-line",
-    "file-history-fill",
-    "file-history-line",
-    "file-hwp-fill",
-    "file-hwp-line",
-    "file-image-fill",
-    "file-image-line",
-    "file-info-fill",
-    "file-info-line",
-    "file-line",
-    "file-list-2-fill",
-    "file-list-2-line",
-    "file-list-3-fill",
-    "file-list-3-line",
-    "file-list-fill",
-    "file-list-line",
-    "file-lock-fill",
-    "file-lock-line",
-    "file-mark-fill",
-    "file-mark-line",
-    "file-music-fill",
-    "file-music-line",
-    "file-paper-2-fill",
-    "file-paper-2-line",
-    "file-paper-fill",
-    "file-paper-line",
-    "file-pdf-2-fill",
-    "file-pdf-2-line",
-    "file-pdf-fill",
-    "file-pdf-line",
-    "file-ppt-2-fill",
-    "file-ppt-2-line",
-    "file-ppt-fill",
-    "file-ppt-line",
-    "file-reduce-fill",
-    "file-reduce-line",
-    "file-search-fill",
-    "file-search-line",
-    "file-settings-fill",
-    "file-settings-line",
-    "file-shield-2-fill",
-    "file-shield-2-line",
-    "file-shield-fill",
-    "file-shield-line",
-    "file-shred-fill",
-    "file-shred-line",
-    "file-text-fill",
-    "file-text-line",
-    "file-transfer-fill",
-    "file-transfer-line",
-    "file-unknow-fill",
-    "file-unknow-line",
-    "file-upload-fill",
-    "file-upload-line",
-    "file-user-fill",
-    "file-user-line",
-    "file-video-fill",
-    "file-video-line",
-    "file-warning-fill",
-    "file-warning-line",
-    "file-word-2-fill",
-    "file-word-2-line",
-    "file-word-fill",
-    "file-word-line",
-    "file-zip-fill",
-    "file-zip-line",
-    "film-fill",
-    "film-line",
-    "filter-2-fill",
-    "filter-2-line",
-    "filter-3-fill",
-    "filter-3-line",
-    "filter-fill",
-    "filter-line",
-    "filter-off-fill",
-    "filter-off-line",
-    "find-replace-fill",
-    "find-replace-line",
-    "finder-fill",
-    "finder-line",
-    "fingerprint-2-fill",
-    "fingerprint-2-line",
-    "fingerprint-fill",
-    "fingerprint-line",
-    "fire-fill",
-    "fire-line",
-    "firefox-fill",
-    "firefox-line",
-    "first-aid-kit-fill",
-    "first-aid-kit-line",
-    "flag-2-fill",
-    "flag-2-line",
-    "flag-fill",
-    "flag-line",
-    "flashlight-fill",
-    "flashlight-line",
-    "flask-fill",
-    "flask-line",
-    "flickr-fill",
-    "flickr-line",
-    "flight-land-fill",
-    "flight-land-line",
-    "flight-takeoff-fill",
-    "flight-takeoff-line",
-    "flood-fill",
-    "flood-line",
-    "flow-chart",
-    "flutter-fill",
-    "flutter-line",
-    "focus-2-fill",
-    "focus-2-line",
-    "focus-3-fill",
-    "focus-3-line",
-    "focus-fill",
-    "focus-line",
-    "foggy-fill",
-    "foggy-line",
-    "folder-2-fill",
-    "folder-2-line",
-    "folder-3-fill",
-    "folder-3-line",
-    "folder-4-fill",
-    "folder-4-line",
-    "folder-5-fill",
-    "folder-5-line",
-    "folder-add-fill",
-    "folder-add-line",
-    "folder-chart-2-fill",
-    "folder-chart-2-line",
-    "folder-chart-fill",
-    "folder-chart-line",
-    "folder-download-fill",
-    "folder-download-line",
-    "folder-fill",
-    "folder-forbid-fill",
-    "folder-forbid-line",
-    "folder-history-fill",
-    "folder-history-line",
-    "folder-image-fill",
-    "folder-image-line",
-    "folder-info-fill",
-    "folder-info-line",
-    "folder-keyhole-fill",
-    "folder-keyhole-line",
-    "folder-line",
-    "folder-lock-fill",
-    "folder-lock-line",
-    "folder-music-fill",
-    "folder-music-line",
-    "folder-open-fill",
-    "folder-open-line",
-    "folder-received-fill",
-    "folder-received-line",
-    "folder-reduce-fill",
-    "folder-reduce-line",
-    "folder-settings-fill",
-    "folder-settings-line",
-    "folder-shared-fill",
-    "folder-shared-line",
-    "folder-shield-2-fill",
-    "folder-shield-2-line",
-    "folder-shield-fill",
-    "folder-shield-line",
-    "folder-transfer-fill",
-    "folder-transfer-line",
-    "folder-unknow-fill",
-    "folder-unknow-line",
-    "folder-upload-fill",
-    "folder-upload-line",
-    "folder-user-fill",
-    "folder-user-line",
-    "folder-video-fill",
-    "folder-video-line",
-    "folder-warning-fill",
-    "folder-warning-line",
-    "folder-zip-fill",
-    "folder-zip-line",
-    "folders-fill",
-    "folders-line",
-    "font-color",
-    "font-family",
-    "font-mono",
-    "font-sans",
-    "font-sans-serif",
-    "font-size",
-    "font-size-2",
-    "football-fill",
-    "football-line",
-    "footprint-fill",
-    "footprint-line",
-    "forbid-2-fill",
-    "forbid-2-line",
-    "forbid-fill",
-    "forbid-line",
-    "format-clear",
-    "forward-10-fill",
-    "forward-10-line",
-    "forward-15-fill",
-    "forward-15-line",
-    "forward-30-fill",
-    "forward-30-line",
-    "forward-5-fill",
-    "forward-5-line",
-    "fridge-fill",
-    "fridge-line",
-    "fullscreen-exit-fill",
-    "fullscreen-exit-line",
-    "fullscreen-fill",
-    "fullscreen-line",
-    "function-fill",
-    "function-line",
-    "functions",
-    "funds-box-fill",
-    "funds-box-line",
-    "funds-fill",
-    "funds-line",
-    "gallery-fill",
-    "gallery-line",
-    "gallery-upload-fill",
-    "gallery-upload-line",
-    "game-fill",
-    "game-line",
-    "gamepad-fill",
-    "gamepad-line",
-    "gas-station-fill",
-    "gas-station-line",
-    "gatsby-fill",
-    "gatsby-line",
-    "genderless-fill",
-    "genderless-line",
-    "ghost-2-fill",
-    "ghost-2-line",
-    "ghost-fill",
-    "ghost-line",
-    "ghost-smile-fill",
-    "ghost-smile-line",
-    "gift-2-fill",
-    "gift-2-line",
-    "gift-fill",
-    "gift-line",
-    "git-branch-fill",
-    "git-branch-line",
-    "git-close-pull-request-fill",
-    "git-close-pull-request-line",
-    "git-commit-fill",
-    "git-commit-line",
-    "git-merge-fill",
-    "git-merge-line",
-    "git-pull-request-fill",
-    "git-pull-request-line",
-    "git-repository-commits-fill",
-    "git-repository-commits-line",
-    "git-repository-fill",
-    "git-repository-line",
-    "git-repository-private-fill",
-    "git-repository-private-line",
-    "github-fill",
-    "github-line",
-    "gitlab-fill",
-    "gitlab-line",
-    "global-fill",
-    "global-line",
-    "globe-fill",
-    "globe-line",
-    "goblet-fill",
-    "goblet-line",
-    "google-fill",
-    "google-line",
-    "google-play-fill",
-    "google-play-line",
-    "government-fill",
-    "government-line",
-    "gps-fill",
-    "gps-line",
-    "gradienter-fill",
-    "gradienter-line",
-    "graduation-cap-fill",
-    "graduation-cap-line",
-    "grid-fill",
-    "grid-line",
-    "group-2-fill",
-    "group-2-line",
-    "group-fill",
-    "group-line",
-    "guide-fill",
-    "guide-line",
-    "h-1",
-    "h-2",
-    "h-3",
-    "h-4",
-    "h-5",
-    "h-6",
-    "hail-fill",
-    "hail-line",
-    "hammer-fill",
-    "hammer-line",
-    "hand-coin-fill",
-    "hand-coin-line",
-    "hand-heart-fill",
-    "hand-heart-line",
-    "hand-sanitizer-fill",
-    "hand-sanitizer-line",
-    "handbag-fill",
-    "handbag-line",
-    "hard-drive-2-fill",
-    "hard-drive-2-line",
-    "hard-drive-3-fill",
-    "hard-drive-3-line",
-    "hard-drive-fill",
-    "hard-drive-line",
-    "hashtag",
-    "haze-2-fill",
-    "haze-2-line",
-    "haze-fill",
-    "haze-line",
-    "hd-fill",
-    "hd-line",
-    "heading",
-    "headphone-fill",
-    "headphone-line",
-    "health-book-fill",
-    "health-book-line",
-    "heart-2-fill",
-    "heart-2-line",
-    "heart-3-fill",
-    "heart-3-line",
-    "heart-add-fill",
-    "heart-add-line",
-    "heart-fill",
-    "heart-line",
-    "heart-pulse-fill",
-    "heart-pulse-line",
-    "hearts-fill",
-    "hearts-line",
-    "heavy-showers-fill",
-    "heavy-showers-line",
-    "hexagon-fill",
-    "hexagon-line",
-    "history-fill",
-    "history-line",
-    "home-2-fill",
-    "home-2-line",
-    "home-3-fill",
-    "home-3-line",
-    "home-4-fill",
-    "home-4-line",
-    "home-5-fill",
-    "home-5-line",
-    "home-6-fill",
-    "home-6-line",
-    "home-7-fill",
-    "home-7-line",
-    "home-8-fill",
-    "home-8-line",
-    "home-fill",
-    "home-gear-fill",
-    "home-gear-line",
-    "home-heart-fill",
-    "home-heart-line",
-    "home-line",
-    "home-office-fill",
-    "home-office-line",
-    "home-smile-2-fill",
-    "home-smile-2-line",
-    "home-smile-fill",
-    "home-smile-line",
-    "home-wifi-fill",
-    "home-wifi-line",
-    "honor-of-kings-fill",
-    "honor-of-kings-line",
-    "honour-fill",
-    "honour-line",
-    "hospital-fill",
-    "hospital-line",
-    "hotel-bed-fill",
-    "hotel-bed-line",
-    "hotel-fill",
-    "hotel-line",
-    "hotspot-fill",
-    "hotspot-line",
-    "hourglass-2-fill",
-    "hourglass-2-line",
-    "hourglass-fill",
-    "hourglass-line",
-    "hq-fill",
-    "hq-line",
-    "html5-fill",
-    "html5-line",
-    "ie-fill",
-    "ie-line",
-    "image-2-fill",
-    "image-2-line",
-    "image-add-fill",
-    "image-add-line",
-    "image-edit-fill",
-    "image-edit-line",
-    "image-fill",
-    "image-line",
-    "inbox-2-fill",
-    "inbox-2-line",
-    "inbox-archive-fill",
-    "inbox-archive-line",
-    "inbox-fill",
-    "inbox-line",
-    "inbox-unarchive-fill",
-    "inbox-unarchive-line",
-    "increase-decrease-fill",
-    "increase-decrease-line",
-    "indent-decrease",
-    "indent-increase",
-    "indeterminate-circle-fill",
-    "indeterminate-circle-line",
-    "infinity-fill",
-    "infinity-line",
-    "information-fill",
-    "information-line",
-    "infrared-thermometer-fill",
-    "infrared-thermometer-line",
-    "ink-bottle-fill",
-    "ink-bottle-line",
-    "input-cursor-move",
-    "input-method-fill",
-    "input-method-line",
-    "insert-column-left",
-    "insert-column-right",
-    "insert-row-bottom",
-    "insert-row-top",
-    "instagram-fill",
-    "instagram-line",
-    "install-fill",
-    "install-line",
-    "instance-fill",
-    "instance-line",
-    "invision-fill",
-    "invision-line",
-    "italic",
-    "javascript-fill",
-    "javascript-line",
-    "kakao-talk-fill",
-    "kakao-talk-line",
-    "key-2-fill",
-    "key-2-line",
-    "key-fill",
-    "key-line",
-    "keyboard-box-fill",
-    "keyboard-box-line",
-    "keyboard-fill",
-    "keyboard-line",
-    "keynote-fill",
-    "keynote-line",
-    "kick-fill",
-    "kick-line",
-    "knife-blood-fill",
-    "knife-blood-line",
-    "knife-fill",
-    "knife-line",
-    "landscape-fill",
-    "landscape-line",
-    "layout-2-fill",
-    "layout-2-line",
-    "layout-3-fill",
-    "layout-3-line",
-    "layout-4-fill",
-    "layout-4-line",
-    "layout-5-fill",
-    "layout-5-line",
-    "layout-6-fill",
-    "layout-6-line",
-    "layout-bottom-2-fill",
-    "layout-bottom-2-line",
-    "layout-bottom-fill",
-    "layout-bottom-line",
-    "layout-column-fill",
-    "layout-column-line",
-    "layout-fill",
-    "layout-grid-fill",
-    "layout-grid-line",
-    "layout-left-2-fill",
-    "layout-left-2-line",
-    "layout-left-fill",
-    "layout-left-line",
-    "layout-line",
-    "layout-masonry-fill",
-    "layout-masonry-line",
-    "layout-right-2-fill",
-    "layout-right-2-line",
-    "layout-right-fill",
-    "layout-right-line",
-    "layout-row-fill",
-    "layout-row-line",
-    "layout-top-2-fill",
-    "layout-top-2-line",
-    "layout-top-fill",
-    "layout-top-line",
-    "leaf-fill",
-    "leaf-line",
-    "lifebuoy-fill",
-    "lifebuoy-line",
-    "lightbulb-fill",
-    "lightbulb-flash-fill",
-    "lightbulb-flash-line",
-    "lightbulb-line",
-    "line-chart-fill",
-    "line-chart-line",
-    "line-fill",
-    "line-height",
-    "line-line",
-    "link",
-    "link-m",
-    "link-unlink",
-    "link-unlink-m",
-    "linkedin-box-fill",
-    "linkedin-box-line",
-    "linkedin-fill",
-    "linkedin-line",
-    "links-fill",
-    "links-line",
-    "list-check",
-    "list-check-2",
-    "list-check-3",
-    "list-indefinite",
-    "list-ordered",
-    "list-ordered-2",
-    "list-radio",
-    "list-settings-fill",
-    "list-settings-line",
-    "list-unordered",
-    "live-fill",
-    "live-line",
-    "loader-2-fill",
-    "loader-2-line",
-    "loader-3-fill",
-    "loader-3-line",
-    "loader-4-fill",
-    "loader-4-line",
-    "loader-5-fill",
-    "loader-5-line",
-    "loader-fill",
-    "loader-line",
-    "lock-2-fill",
-    "lock-2-line",
-    "lock-fill",
-    "lock-line",
-    "lock-password-fill",
-    "lock-password-line",
-    "lock-unlock-fill",
-    "lock-unlock-line",
-    "login-box-fill",
-    "login-box-line",
-    "login-circle-fill",
-    "login-circle-line",
-    "logout-box-fill",
-    "logout-box-line",
-    "logout-box-r-fill",
-    "logout-box-r-line",
-    "logout-circle-fill",
-    "logout-circle-line",
-    "logout-circle-r-fill",
-    "logout-circle-r-line",
-    "loop-left-fill",
-    "loop-left-line",
-    "loop-right-fill",
-    "loop-right-line",
-    "luggage-cart-fill",
-    "luggage-cart-line",
-    "luggage-deposit-fill",
-    "luggage-deposit-line",
-    "lungs-fill",
-    "lungs-line",
-    "mac-fill",
-    "mac-line",
-    "macbook-fill",
-    "macbook-line",
-    "magic-fill",
-    "magic-line",
-    "mail-add-fill",
-    "mail-add-line",
-    "mail-check-fill",
-    "mail-check-line",
-    "mail-close-fill",
-    "mail-close-line",
-    "mail-download-fill",
-    "mail-download-line",
-    "mail-fill",
-    "mail-forbid-fill",
-    "mail-forbid-line",
-    "mail-line",
-    "mail-lock-fill",
-    "mail-lock-line",
-    "mail-open-fill",
-    "mail-open-line",
-    "mail-send-fill",
-    "mail-send-line",
-    "mail-settings-fill",
-    "mail-settings-line",
-    "mail-star-fill",
-    "mail-star-line",
-    "mail-unread-fill",
-    "mail-unread-line",
-    "mail-volume-fill",
-    "mail-volume-line",
-    "map-2-fill",
-    "map-2-line",
-    "map-fill",
-    "map-line",
-    "map-pin-2-fill",
-    "map-pin-2-line",
-    "map-pin-3-fill",
-    "map-pin-3-line",
-    "map-pin-4-fill",
-    "map-pin-4-line",
-    "map-pin-5-fill",
-    "map-pin-5-line",
-    "map-pin-add-fill",
-    "map-pin-add-line",
-    "map-pin-fill",
-    "map-pin-line",
-    "map-pin-range-fill",
-    "map-pin-range-line",
-    "map-pin-time-fill",
-    "map-pin-time-line",
-    "map-pin-user-fill",
-    "map-pin-user-line",
-    "mark-pen-fill",
-    "mark-pen-line",
-    "markdown-fill",
-    "markdown-line",
-    "markup-fill",
-    "markup-line",
-    "mastercard-fill",
-    "mastercard-line",
-    "mastodon-fill",
-    "mastodon-line",
-    "medal-2-fill",
-    "medal-2-line",
-    "medal-fill",
-    "medal-line",
-    "medicine-bottle-fill",
-    "medicine-bottle-line",
-    "medium-fill",
-    "medium-line",
-    "megaphone-fill",
-    "megaphone-line",
-    "memories-fill",
-    "memories-line",
-    "men-fill",
-    "men-line",
-    "mental-health-fill",
-    "mental-health-line",
-    "menu-2-fill",
-    "menu-2-line",
-    "menu-3-fill",
-    "menu-3-line",
-    "menu-4-fill",
-    "menu-4-line",
-    "menu-5-fill",
-    "menu-5-line",
-    "menu-add-fill",
-    "menu-add-line",
-    "menu-fill",
-    "menu-fold-fill",
-    "menu-fold-line",
-    "menu-line",
-    "menu-search-fill",
-    "menu-search-line",
-    "menu-unfold-fill",
-    "menu-unfold-line",
-    "merge-cells-horizontal",
-    "merge-cells-vertical",
-    "message-2-fill",
-    "message-2-line",
-    "message-3-fill",
-    "message-3-line",
-    "message-fill",
-    "message-line",
-    "messenger-fill",
-    "messenger-line",
-    "meta-fill",
-    "meta-line",
-    "meteor-fill",
-    "meteor-line",
-    "mic-2-fill",
-    "mic-2-line",
-    "mic-fill",
-    "mic-line",
-    "mic-off-fill",
-    "mic-off-line",
-    "mickey-fill",
-    "mickey-line",
-    "microscope-fill",
-    "microscope-line",
-    "microsoft-fill",
-    "microsoft-line",
-    "microsoft-loop-fill",
-    "microsoft-loop-line",
-    "mind-map",
-    "mini-program-fill",
-    "mini-program-line",
-    "mist-fill",
-    "mist-line",
-    "money-cny-box-fill",
-    "money-cny-box-line",
-    "money-cny-circle-fill",
-    "money-cny-circle-line",
-    "money-dollar-box-fill",
-    "money-dollar-box-line",
-    "money-dollar-circle-fill",
-    "money-dollar-circle-line",
-    "money-euro-box-fill",
-    "money-euro-box-line",
-    "money-euro-circle-fill",
-    "money-euro-circle-line",
-    "money-pound-box-fill",
-    "money-pound-box-line",
-    "money-pound-circle-fill",
-    "money-pound-circle-line",
-    "moon-clear-fill",
-    "moon-clear-line",
-    "moon-cloudy-fill",
-    "moon-cloudy-line",
-    "moon-fill",
-    "moon-foggy-fill",
-    "moon-foggy-line",
-    "moon-line",
-    "more-2-fill",
-    "more-2-line",
-    "more-fill",
-    "more-line",
-    "motorbike-fill",
-    "motorbike-line",
-    "mouse-fill",
-    "mouse-line",
-    "movie-2-fill",
-    "movie-2-line",
-    "movie-fill",
-    "movie-line",
-    "music-2-fill",
-    "music-2-line",
-    "music-fill",
-    "music-line",
-    "mv-fill",
-    "mv-line",
-    "navigation-fill",
-    "navigation-line",
-    "netease-cloud-music-fill",
-    "netease-cloud-music-line",
-    "netflix-fill",
-    "netflix-line",
-    "newspaper-fill",
-    "newspaper-line",
-    "nft-fill",
-    "nft-line",
-    "node-tree",
-    "notification-2-fill",
-    "notification-2-line",
-    "notification-3-fill",
-    "notification-3-line",
-    "notification-4-fill",
-    "notification-4-line",
-    "notification-badge-fill",
-    "notification-badge-line",
-    "notification-fill",
-    "notification-line",
-    "notification-off-fill",
-    "notification-off-line",
-    "notion-fill",
-    "notion-line",
-    "npmjs-fill",
-    "npmjs-line",
-    "number-0",
-    "number-1",
-    "number-2",
-    "number-3",
-    "number-4",
-    "number-5",
-    "number-6",
-    "number-7",
-    "number-8",
-    "number-9",
-    "numbers-fill",
-    "numbers-line",
-    "nurse-fill",
-    "nurse-line",
-    "octagon-fill",
-    "octagon-line",
-    "oil-fill",
-    "oil-line",
-    "omega",
-    "open-arm-fill",
-    "open-arm-line",
-    "open-source-fill",
-    "open-source-line",
-    "openai-fill",
-    "openai-line",
-    "openbase-fill",
-    "openbase-line",
-    "opera-fill",
-    "opera-line",
-    "order-play-fill",
-    "order-play-line",
-    "organization-chart",
-    "outlet-2-fill",
-    "outlet-2-line",
-    "outlet-fill",
-    "outlet-line",
-    "overline",
-    "p2p-fill",
-    "p2p-line",
-    "page-separator",
-    "pages-fill",
-    "pages-line",
-    "paint-brush-fill",
-    "paint-brush-line",
-    "paint-fill",
-    "paint-line",
-    "palette-fill",
-    "palette-line",
-    "pantone-fill",
-    "pantone-line",
-    "paragraph",
-    "parent-fill",
-    "parent-line",
-    "parentheses-fill",
-    "parentheses-line",
-    "parking-box-fill",
-    "parking-box-line",
-    "parking-fill",
-    "parking-line",
-    "pass-expired-fill",
-    "pass-expired-line",
-    "pass-pending-fill",
-    "pass-pending-line",
-    "pass-valid-fill",
-    "pass-valid-line",
-    "passport-fill",
-    "passport-line",
-    "patreon-fill",
-    "patreon-line",
-    "pause-circle-fill",
-    "pause-circle-line",
-    "pause-fill",
-    "pause-line",
-    "pause-mini-fill",
-    "pause-mini-line",
-    "paypal-fill",
-    "paypal-line",
-    "pen-nib-fill",
-    "pen-nib-line",
-    "pencil-fill",
-    "pencil-line",
-    "pencil-ruler-2-fill",
-    "pencil-ruler-2-line",
-    "pencil-ruler-fill",
-    "pencil-ruler-line",
-    "pentagon-fill",
-    "pentagon-line",
-    "percent-fill",
-    "percent-line",
-    "phone-camera-fill",
-    "phone-camera-line",
-    "phone-fill",
-    "phone-find-fill",
-    "phone-find-line",
-    "phone-line",
-    "phone-lock-fill",
-    "phone-lock-line",
-    "picture-in-picture-2-fill",
-    "picture-in-picture-2-line",
-    "picture-in-picture-exit-fill",
-    "picture-in-picture-exit-line",
-    "picture-in-picture-fill",
-    "picture-in-picture-line",
-    "pie-chart-2-fill",
-    "pie-chart-2-line",
-    "pie-chart-box-fill",
-    "pie-chart-box-line",
-    "pie-chart-fill",
-    "pie-chart-line",
-    "pin-distance-fill",
-    "pin-distance-line",
-    "ping-pong-fill",
-    "ping-pong-line",
-    "pinterest-fill",
-    "pinterest-line",
-    "pinyin-input",
-    "pixelfed-fill",
-    "pixelfed-line",
-    "plane-fill",
-    "plane-line",
-    "planet-fill",
-    "planet-line",
-    "plant-fill",
-    "plant-line",
-    "play-circle-fill",
-    "play-circle-line",
-    "play-fill",
-    "play-line",
-    "play-list-2-fill",
-    "play-list-2-line",
-    "play-list-add-fill",
-    "play-list-add-line",
-    "play-list-fill",
-    "play-list-line",
-    "play-mini-fill",
-    "play-mini-line",
-    "playstation-fill",
-    "playstation-line",
-    "plug-2-fill",
-    "plug-2-line",
-    "plug-fill",
-    "plug-line",
-    "polaroid-2-fill",
-    "polaroid-2-line",
-    "polaroid-fill",
-    "polaroid-line",
-    "police-car-fill",
-    "police-car-line",
-    "presentation-fill",
-    "presentation-line",
-    "price-tag-2-fill",
-    "price-tag-2-line",
-    "price-tag-3-fill",
-    "price-tag-3-line",
-    "price-tag-fill",
-    "price-tag-line",
-    "printer-cloud-fill",
-    "printer-cloud-line",
-    "printer-fill",
-    "printer-line",
-    "product-hunt-fill",
-    "product-hunt-line",
-    "profile-fill",
-    "profile-line",
-    "prohibited-fill",
-    "prohibited-line",
-    "projector-2-fill",
-    "projector-2-line",
-    "projector-fill",
-    "projector-line",
-    "psychotherapy-fill",
-    "psychotherapy-line",
-    "pulse-fill",
-    "pulse-line",
-    "pushpin-2-fill",
-    "pushpin-2-line",
-    "pushpin-fill",
-    "pushpin-line",
-    "qq-fill",
-    "qq-line",
-    "qr-code-fill",
-    "qr-code-line",
-    "qr-scan-2-fill",
-    "qr-scan-2-line",
-    "qr-scan-fill",
-    "qr-scan-line",
-    "question-answer-fill",
-    "question-answer-line",
-    "question-fill",
-    "question-line",
-    "question-mark",
-    "questionnaire-fill",
-    "questionnaire-line",
-    "quill-pen-fill",
-    "quill-pen-line",
-    "quote-text",
-    "radar-fill",
-    "radar-line",
-    "radio-2-fill",
-    "radio-2-line",
-    "radio-button-fill",
-    "radio-button-line",
-    "radio-fill",
-    "radio-line",
-    "rainbow-fill",
-    "rainbow-line",
-    "rainy-fill",
-    "rainy-line",
-    "reactjs-fill",
-    "reactjs-line",
-    "record-circle-fill",
-    "record-circle-line",
-    "record-mail-fill",
-    "record-mail-line",
-    "rectangle-fill",
-    "rectangle-line",
-    "recycle-fill",
-    "recycle-line",
-    "red-packet-fill",
-    "red-packet-line",
-    "reddit-fill",
-    "reddit-line",
-    "refresh-fill",
-    "refresh-line",
-    "refund-2-fill",
-    "refund-2-line",
-    "refund-fill",
-    "refund-line",
-    "registered-fill",
-    "registered-line",
-    "remixicon-fill",
-    "remixicon-line",
-    "remote-control-2-fill",
-    "remote-control-2-line",
-    "remote-control-fill",
-    "remote-control-line",
-    "repeat-2-fill",
-    "repeat-2-line",
-    "repeat-fill",
-    "repeat-line",
-    "repeat-one-fill",
-    "repeat-one-line",
-    "replay-10-fill",
-    "replay-10-line",
-    "replay-15-fill",
-    "replay-15-line",
-    "replay-30-fill",
-    "replay-30-line",
-    "replay-5-fill",
-    "replay-5-line",
-    "reply-all-fill",
-    "reply-all-line",
-    "reply-fill",
-    "reply-line",
-    "reserved-fill",
-    "reserved-line",
-    "rest-time-fill",
-    "rest-time-line",
-    "restart-fill",
-    "restart-line",
-    "restaurant-2-fill",
-    "restaurant-2-line",
-    "restaurant-fill",
-    "restaurant-line",
-    "rewind-fill",
-    "rewind-line",
-    "rewind-mini-fill",
-    "rewind-mini-line",
-    "rfid-fill",
-    "rfid-line",
-    "rhythm-fill",
-    "rhythm-line",
-    "riding-fill",
-    "riding-line",
-    "road-map-fill",
-    "road-map-line",
-    "roadster-fill",
-    "roadster-line",
-    "robot-2-fill",
-    "robot-2-line",
-    "robot-fill",
-    "robot-line",
-    "rocket-2-fill",
-    "rocket-2-line",
-    "rocket-fill",
-    "rocket-line",
-    "rotate-lock-fill",
-    "rotate-lock-line",
-    "rounded-corner",
-    "route-fill",
-    "route-line",
-    "router-fill",
-    "router-line",
-    "rss-fill",
-    "rss-line",
-    "ruler-2-fill",
-    "ruler-2-line",
-    "ruler-fill",
-    "ruler-line",
-    "run-fill",
-    "run-line",
-    "safari-fill",
-    "safari-line",
-    "safe-2-fill",
-    "safe-2-line",
-    "safe-fill",
-    "safe-line",
-    "sailboat-fill",
-    "sailboat-line",
-    "save-2-fill",
-    "save-2-line",
-    "save-3-fill",
-    "save-3-line",
-    "save-fill",
-    "save-line",
-    "scales-2-fill",
-    "scales-2-line",
-    "scales-3-fill",
-    "scales-3-line",
-    "scales-fill",
-    "scales-line",
-    "scan-2-fill",
-    "scan-2-line",
-    "scan-fill",
-    "scan-line",
-    "school-fill",
-    "school-line",
-    "scissors-2-fill",
-    "scissors-2-line",
-    "scissors-cut-fill",
-    "scissors-cut-line",
-    "scissors-fill",
-    "scissors-line",
-    "screenshot-2-fill",
-    "screenshot-2-line",
-    "screenshot-fill",
-    "screenshot-line",
-    "sd-card-fill",
-    "sd-card-line",
-    "sd-card-mini-fill",
-    "sd-card-mini-line",
-    "search-2-fill",
-    "search-2-line",
-    "search-eye-fill",
-    "search-eye-line",
-    "search-fill",
-    "search-line",
-    "secure-payment-fill",
-    "secure-payment-line",
-    "seedling-fill",
-    "seedling-line",
-    "send-backward",
-    "send-plane-2-fill",
-    "send-plane-2-line",
-    "send-plane-fill",
-    "send-plane-line",
-    "send-to-back",
-    "sensor-fill",
-    "sensor-line",
-    "seo-fill",
-    "seo-line",
-    "separator",
-    "server-fill",
-    "server-line",
-    "service-fill",
-    "service-line",
-    "settings-2-fill",
-    "settings-2-line",
-    "settings-3-fill",
-    "settings-3-line",
-    "settings-4-fill",
-    "settings-4-line",
-    "settings-5-fill",
-    "settings-5-line",
-    "settings-6-fill",
-    "settings-6-line",
-    "settings-fill",
-    "settings-line",
-    "shake-hands-fill",
-    "shake-hands-line",
-    "shape-2-fill",
-    "shape-2-line",
-    "shape-fill",
-    "shape-line",
-    "shapes-fill",
-    "shapes-line",
-    "share-box-fill",
-    "share-box-line",
-    "share-circle-fill",
-    "share-circle-line",
-    "share-fill",
-    "share-forward-2-fill",
-    "share-forward-2-line",
-    "share-forward-box-fill",
-    "share-forward-box-line",
-    "share-forward-fill",
-    "share-forward-line",
-    "share-line",
-    "shield-check-fill",
-    "shield-check-line",
-    "shield-cross-fill",
-    "shield-cross-line",
-    "shield-fill",
-    "shield-flash-fill",
-    "shield-flash-line",
-    "shield-keyhole-fill",
-    "shield-keyhole-line",
-    "shield-line",
-    "shield-star-fill",
-    "shield-star-line",
-    "shield-user-fill",
-    "shield-user-line",
-    "shining-2-fill",
-    "shining-2-line",
-    "shining-fill",
-    "shining-line",
-    "ship-2-fill",
-    "ship-2-line",
-    "ship-fill",
-    "ship-line",
-    "shirt-fill",
-    "shirt-line",
-    "shopping-bag-2-fill",
-    "shopping-bag-2-line",
-    "shopping-bag-3-fill",
-    "shopping-bag-3-line",
-    "shopping-bag-fill",
-    "shopping-bag-line",
-    "shopping-basket-2-fill",
-    "shopping-basket-2-line",
-    "shopping-basket-fill",
-    "shopping-basket-line",
-    "shopping-cart-2-fill",
-    "shopping-cart-2-line",
-    "shopping-cart-fill",
-    "shopping-cart-line",
-    "showers-fill",
-    "showers-line",
-    "shuffle-fill",
-    "shuffle-line",
-    "shut-down-fill",
-    "shut-down-line",
-    "side-bar-fill",
-    "side-bar-line",
-    "signal-tower-fill",
-    "signal-tower-line",
-    "signal-wifi-1-fill",
-    "signal-wifi-1-line",
-    "signal-wifi-2-fill",
-    "signal-wifi-2-line",
-    "signal-wifi-3-fill",
-    "signal-wifi-3-line",
-    "signal-wifi-error-fill",
-    "signal-wifi-error-line",
-    "signal-wifi-fill",
-    "signal-wifi-line",
-    "signal-wifi-off-fill",
-    "signal-wifi-off-line",
-    "sim-card-2-fill",
-    "sim-card-2-line",
-    "sim-card-fill",
-    "sim-card-line",
-    "single-quotes-l",
-    "single-quotes-r",
-    "sip-fill",
-    "sip-line",
-    "sketching",
-    "skip-back-fill",
-    "skip-back-line",
-    "skip-back-mini-fill",
-    "skip-back-mini-line",
-    "skip-down-fill",
-    "skip-down-line",
-    "skip-forward-fill",
-    "skip-forward-line",
-    "skip-forward-mini-fill",
-    "skip-forward-mini-line",
-    "skip-left-fill",
-    "skip-left-line",
-    "skip-right-fill",
-    "skip-right-line",
-    "skip-up-fill",
-    "skip-up-line",
-    "skull-2-fill",
-    "skull-2-line",
-    "skull-fill",
-    "skull-line",
-    "skype-fill",
-    "skype-line",
-    "slack-fill",
-    "slack-line",
-    "slash-commands",
-    "slash-commands-2",
-    "slice-fill",
-    "slice-line",
-    "slideshow-2-fill",
-    "slideshow-2-line",
-    "slideshow-3-fill",
-    "slideshow-3-line",
-    "slideshow-4-fill",
-    "slideshow-4-line",
-    "slideshow-fill",
-    "slideshow-line",
-    "slow-down-fill",
-    "slow-down-line",
-    "smartphone-fill",
-    "smartphone-line",
-    "snapchat-fill",
-    "snapchat-line",
-    "snowy-fill",
-    "snowy-line",
-    "sort-asc",
-    "sort-desc",
-    "sound-module-fill",
-    "sound-module-line",
-    "soundcloud-fill",
-    "soundcloud-line",
-    "space",
-    "space-ship-fill",
-    "space-ship-line",
-    "spam-2-fill",
-    "spam-2-line",
-    "spam-3-fill",
-    "spam-3-line",
-    "spam-fill",
-    "spam-line",
-    "sparkling-2-fill",
-    "sparkling-2-line",
-    "sparkling-fill",
-    "sparkling-line",
-    "speak-fill",
-    "speak-line",
-    "speaker-2-fill",
-    "speaker-2-line",
-    "speaker-3-fill",
-    "speaker-3-line",
-    "speaker-fill",
-    "speaker-line",
-    "spectrum-fill",
-    "spectrum-line",
-    "speed-fill",
-    "speed-line",
-    "speed-mini-fill",
-    "speed-mini-line",
-    "speed-up-fill",
-    "speed-up-line",
-    "split-cells-horizontal",
-    "split-cells-vertical",
-    "spotify-fill",
-    "spotify-line",
-    "spy-fill",
-    "spy-line",
-    "square-fill",
-    "square-line",
-    "stack-fill",
-    "stack-line",
-    "stack-overflow-fill",
-    "stack-overflow-line",
-    "stackshare-fill",
-    "stackshare-line",
-    "star-fill",
-    "star-half-fill",
-    "star-half-line",
-    "star-half-s-fill",
-    "star-half-s-line",
-    "star-line",
-    "star-s-fill",
-    "star-s-line",
-    "star-smile-fill",
-    "star-smile-line",
-    "steam-fill",
-    "steam-line",
-    "steering-2-fill",
-    "steering-2-line",
-    "steering-fill",
-    "steering-line",
-    "stethoscope-fill",
-    "stethoscope-line",
-    "sticky-note-2-fill",
-    "sticky-note-2-line",
-    "sticky-note-fill",
-    "sticky-note-line",
-    "stock-fill",
-    "stock-line",
-    "stop-circle-fill",
-    "stop-circle-line",
-    "stop-fill",
-    "stop-line",
-    "stop-mini-fill",
-    "stop-mini-line",
-    "store-2-fill",
-    "store-2-line",
-    "store-3-fill",
-    "store-3-line",
-    "store-fill",
-    "store-line",
-    "strikethrough",
-    "strikethrough-2",
-    "subscript",
-    "subscript-2",
-    "subtract-fill",
-    "subtract-line",
-    "subway-fill",
-    "subway-line",
-    "subway-wifi-fill",
-    "subway-wifi-line",
-    "suitcase-2-fill",
-    "suitcase-2-line",
-    "suitcase-3-fill",
-    "suitcase-3-line",
-    "suitcase-fill",
-    "suitcase-line",
-    "sun-cloudy-fill",
-    "sun-cloudy-line",
-    "sun-fill",
-    "sun-foggy-fill",
-    "sun-foggy-line",
-    "sun-line",
-    "supabase-fill",
-    "supabase-line",
-    "superscript",
-    "superscript-2",
-    "surgical-mask-fill",
-    "surgical-mask-line",
-    "surround-sound-fill",
-    "surround-sound-line",
-    "survey-fill",
-    "survey-line",
-    "swap-box-fill",
-    "swap-box-line",
-    "swap-fill",
-    "swap-line",
-    "switch-fill",
-    "switch-line",
-    "sword-fill",
-    "sword-line",
-    "syringe-fill",
-    "syringe-line",
-    "t-box-fill",
-    "t-box-line",
-    "t-shirt-2-fill",
-    "t-shirt-2-line",
-    "t-shirt-air-fill",
-    "t-shirt-air-line",
-    "t-shirt-fill",
-    "t-shirt-line",
-    "table-2",
-    "table-alt-fill",
-    "table-alt-line",
-    "table-fill",
-    "table-line",
-    "tablet-fill",
-    "tablet-line",
-    "takeaway-fill",
-    "takeaway-line",
-    "taobao-fill",
-    "taobao-line",
-    "tape-fill",
-    "tape-line",
-    "task-fill",
-    "task-line",
-    "taxi-fill",
-    "taxi-line",
-    "taxi-wifi-fill",
-    "taxi-wifi-line",
-    "team-fill",
-    "team-line",
-    "telegram-fill",
-    "telegram-line",
-    "temp-cold-fill",
-    "temp-cold-line",
-    "temp-hot-fill",
-    "temp-hot-line",
-    "tent-fill",
-    "tent-line",
-    "terminal-box-fill",
-    "terminal-box-line",
-    "terminal-fill",
-    "terminal-line",
-    "terminal-window-fill",
-    "terminal-window-line",
-    "test-tube-fill",
-    "test-tube-line",
-    "text",
-    "text-direction-l",
-    "text-direction-r",
-    "text-spacing",
-    "text-wrap",
-    "thermometer-fill",
-    "thermometer-line",
-    "threads-fill",
-    "threads-line",
-    "thumb-down-fill",
-    "thumb-down-line",
-    "thumb-up-fill",
-    "thumb-up-line",
-    "thunderstorms-fill",
-    "thunderstorms-line",
-    "ticket-2-fill",
-    "ticket-2-line",
-    "ticket-fill",
-    "ticket-line",
-    "tiktok-fill",
-    "tiktok-line",
-    "time-fill",
-    "time-line",
-    "timer-2-fill",
-    "timer-2-line",
-    "timer-fill",
-    "timer-flash-fill",
-    "timer-flash-line",
-    "timer-line",
-    "todo-fill",
-    "todo-line",
-    "toggle-fill",
-    "toggle-line",
-    "token-swap-fill",
-    "token-swap-line",
-    "tools-fill",
-    "tools-line",
-    "tornado-fill",
-    "tornado-line",
-    "trademark-fill",
-    "trademark-line",
-    "traffic-light-fill",
-    "traffic-light-line",
-    "train-fill",
-    "train-line",
-    "train-wifi-fill",
-    "train-wifi-line",
-    "translate",
-    "translate-2",
-    "travesti-fill",
-    "travesti-line",
-    "treasure-map-fill",
-    "treasure-map-line",
-    "tree-fill",
-    "tree-line",
-    "trello-fill",
-    "trello-line",
-    "triangle-fill",
-    "triangle-line",
-    "trophy-fill",
-    "trophy-line",
-    "truck-fill",
-    "truck-line",
-    "tumblr-fill",
-    "tumblr-line",
-    "tv-2-fill",
-    "tv-2-line",
-    "tv-fill",
-    "tv-line",
-    "twitch-fill",
-    "twitch-line",
-    "twitter-fill",
-    "twitter-line",
-    "twitter-x-fill",
-    "twitter-x-line",
-    "typhoon-fill",
-    "typhoon-line",
-    "u-disk-fill",
-    "u-disk-line",
-    "ubuntu-fill",
-    "ubuntu-line",
-    "umbrella-fill",
-    "umbrella-line",
-    "underline",
-    "uninstall-fill",
-    "uninstall-line",
-    "unpin-fill",
-    "unpin-line",
-    "unsplash-fill",
-    "unsplash-line",
-    "upload-2-fill",
-    "upload-2-line",
-    "upload-cloud-2-fill",
-    "upload-cloud-2-line",
-    "upload-cloud-fill",
-    "upload-cloud-line",
-    "upload-fill",
-    "upload-line",
-    "usb-fill",
-    "usb-line",
-    "user-2-fill",
-    "user-2-line",
-    "user-3-fill",
-    "user-3-line",
-    "user-4-fill",
-    "user-4-line",
-    "user-5-fill",
-    "user-5-line",
-    "user-6-fill",
-    "user-6-line",
-    "user-add-fill",
-    "user-add-line",
-    "user-fill",
-    "user-follow-fill",
-    "user-follow-line",
-    "user-forbid-fill",
-    "user-forbid-line",
-    "user-heart-fill",
-    "user-heart-line",
-    "user-line",
-    "user-location-fill",
-    "user-location-line",
-    "user-received-2-fill",
-    "user-received-2-line",
-    "user-received-fill",
-    "user-received-line",
-    "user-search-fill",
-    "user-search-line",
-    "user-settings-fill",
-    "user-settings-line",
-    "user-shared-2-fill",
-    "user-shared-2-line",
-    "user-shared-fill",
-    "user-shared-line",
-    "user-smile-fill",
-    "user-smile-line",
-    "user-star-fill",
-    "user-star-line",
-    "user-unfollow-fill",
-    "user-unfollow-line",
-    "user-voice-fill",
-    "user-voice-line",
-    "verified-badge-fill",
-    "verified-badge-line",
-    "video-add-fill",
-    "video-add-line",
-    "video-chat-fill",
-    "video-chat-line",
-    "video-download-fill",
-    "video-download-line",
-    "video-fill",
-    "video-line",
-    "video-upload-fill",
-    "video-upload-line",
-    "vidicon-2-fill",
-    "vidicon-2-line",
-    "vidicon-fill",
-    "vidicon-line",
-    "vimeo-fill",
-    "vimeo-line",
-    "vip-crown-2-fill",
-    "vip-crown-2-line",
-    "vip-crown-fill",
-    "vip-crown-line",
-    "vip-diamond-fill",
-    "vip-diamond-line",
-    "vip-fill",
-    "vip-line",
-    "virus-fill",
-    "virus-line",
-    "visa-fill",
-    "visa-line",
-    "voice-recognition-fill",
-    "voice-recognition-line",
-    "voiceprint-fill",
-    "voiceprint-line",
-    "volume-down-fill",
-    "volume-down-line",
-    "volume-mute-fill",
-    "volume-mute-line",
-    "volume-off-vibrate-fill",
-    "volume-off-vibrate-line",
-    "volume-up-fill",
-    "volume-up-line",
-    "volume-vibrate-fill",
-    "volume-vibrate-line",
-    "vuejs-fill",
-    "vuejs-line",
-    "walk-fill",
-    "walk-line",
-    "wallet-2-fill",
-    "wallet-2-line",
-    "wallet-3-fill",
-    "wallet-3-line",
-    "wallet-fill",
-    "wallet-line",
-    "water-flash-fill",
-    "water-flash-line",
-    "water-percent-fill",
-    "water-percent-line",
-    "webcam-fill",
-    "webcam-line",
-    "wechat-2-fill",
-    "wechat-2-line",
-    "wechat-channels-fill",
-    "wechat-channels-line",
-    "wechat-fill",
-    "wechat-line",
-    "wechat-pay-fill",
-    "wechat-pay-line",
-    "weibo-fill",
-    "weibo-line",
-    "whatsapp-fill",
-    "whatsapp-line",
-    "wheelchair-fill",
-    "wheelchair-line",
-    "wifi-fill",
-    "wifi-line",
-    "wifi-off-fill",
-    "wifi-off-line",
-    "window-2-fill",
-    "window-2-line",
-    "window-fill",
-    "window-line",
-    "windows-fill",
-    "windows-line",
-    "windy-fill",
-    "windy-line",
-    "wireless-charging-fill",
-    "wireless-charging-line",
-    "women-fill",
-    "women-line",
-    "wordpress-fill",
-    "wordpress-line",
-    "wubi-input",
-    "xbox-fill",
-    "xbox-line",
-    "xing-fill",
-    "xing-line",
-    "youtube-fill",
-    "youtube-line",
-    "yuque-fill",
-    "yuque-line",
-    "zcool-fill",
-    "zcool-line",
-    "zhihu-fill",
-    "zhihu-line",
-    "zoom-in-fill",
-    "zoom-in-line",
-    "zoom-out-fill",
-    "zoom-out-line",
-    "zzz-fill",
-    "zzz-line"
-  ],
-  // https://icones.js.org/collections/fa-solid-meta.json
-  "fa-solid:": [
-    "abacus",
-    "ad",
-    "address-book",
-    "address-card",
-    "adjust",
-    "air-freshener",
-    "align-center",
-    "align-justify",
-    "align-left",
-    "align-right",
-    "allergies",
-    "ambulance",
-    "american-sign-language-interpreting",
-    "anchor",
-    "angle-double-down",
-    "angle-double-left",
-    "angle-double-right",
-    "angle-double-up",
-    "angle-down",
-    "angle-left",
-    "angle-right",
-    "angle-up",
-    "angry",
-    "ankh",
-    "apple-alt",
-    "archive",
-    "archway",
-    "arrow-alt-circle-down",
-    "arrow-alt-circle-left",
-    "arrow-alt-circle-right",
-    "arrow-alt-circle-up",
-    "arrow-circle-down",
-    "arrow-circle-left",
-    "arrow-circle-right",
-    "arrow-circle-up",
-    "arrow-down",
-    "arrow-left",
-    "arrow-right",
-    "arrow-up",
-    "arrows-alt",
-    "arrows-alt-h",
-    "arrows-alt-v",
-    "assistive-listening-systems",
-    "asterisk",
-    "at",
-    "atlas",
-    "atom",
-    "audio-description",
-    "award",
-    "baby",
-    "baby-carriage",
-    "backspace",
-    "backward",
-    "bacon",
-    "bacteria",
-    "bacterium",
-    "bahai",
-    "balance-scale",
-    "balance-scale-left",
-    "balance-scale-right",
-    "ban",
-    "band-aid",
-    "barcode",
-    "bars",
-    "baseball-ball",
-    "basketball-ball",
-    "bath",
-    "battery-empty",
-    "battery-full",
-    "battery-half",
-    "battery-quarter",
-    "battery-three-quarters",
-    "bed",
-    "beer",
-    "bell",
-    "bell-slash",
-    "bezier-curve",
-    "bible",
-    "bicycle",
-    "biking",
-    "binoculars",
-    "biohazard",
-    "birthday-cake",
-    "blender",
-    "blender-phone",
-    "blind",
-    "blog",
-    "bold",
-    "bolt",
-    "bomb",
-    "bone",
-    "bong",
-    "book",
-    "book-dead",
-    "book-medical",
-    "book-open",
-    "book-reader",
-    "bookmark",
-    "border-all",
-    "border-none",
-    "border-style",
-    "bowling-ball",
-    "box",
-    "box-open",
-    "box-tissue",
-    "boxes",
-    "braille",
-    "brain",
-    "bread-slice",
-    "briefcase",
-    "briefcase-medical",
-    "broadcast-tower",
-    "broom",
-    "brush",
-    "bug",
-    "building",
-    "bullhorn",
-    "bullseye",
-    "burn",
-    "bus",
-    "bus-alt",
-    "business-time",
-    "calculator",
-    "calculator-alt",
-    "calendar",
-    "calendar-alt",
-    "calendar-check",
-    "calendar-day",
-    "calendar-minus",
-    "calendar-plus",
-    "calendar-times",
-    "calendar-week",
-    "camera",
-    "camera-retro",
-    "campground",
-    "candy-cane",
-    "cannabis",
-    "capsules",
-    "car",
-    "car-alt",
-    "car-battery",
-    "car-crash",
-    "car-side",
-    "caravan",
-    "caret-down",
-    "caret-left",
-    "caret-right",
-    "caret-square-down",
-    "caret-square-left",
-    "caret-square-right",
-    "caret-square-up",
-    "caret-up",
-    "carrot",
-    "cart-arrow-down",
-    "cart-plus",
-    "cash-register",
-    "cat",
-    "certificate",
-    "chair",
-    "chalkboard",
-    "chalkboard-teacher",
-    "charging-station",
-    "chart-area",
-    "chart-bar",
-    "chart-line",
-    "chart-pie",
-    "check",
-    "check-circle",
-    "check-double",
-    "check-square",
-    "cheese",
-    "chess",
-    "chess-bishop",
-    "chess-board",
-    "chess-king",
-    "chess-knight",
-    "chess-pawn",
-    "chess-queen",
-    "chess-rook",
-    "chevron-circle-down",
-    "chevron-circle-left",
-    "chevron-circle-right",
-    "chevron-circle-up",
-    "chevron-down",
-    "chevron-left",
-    "chevron-right",
-    "chevron-up",
-    "child",
-    "church",
-    "circle",
-    "circle-notch",
-    "city",
-    "clinic-medical",
-    "clipboard",
-    "clipboard-check",
-    "clipboard-list",
-    "clock",
-    "clone",
-    "closed-captioning",
-    "cloud",
-    "cloud-download-alt",
-    "cloud-meatball",
-    "cloud-moon",
-    "cloud-moon-rain",
-    "cloud-rain",
-    "cloud-showers-heavy",
-    "cloud-sun",
-    "cloud-sun-rain",
-    "cloud-upload-alt",
-    "cocktail",
-    "code",
-    "code-branch",
-    "coffee",
-    "cog",
-    "cogs",
-    "coins",
-    "columns",
-    "comment",
-    "comment-alt",
-    "comment-dollar",
-    "comment-dots",
-    "comment-medical",
-    "comment-slash",
-    "comments",
-    "comments-dollar",
-    "compact-disc",
-    "compass",
-    "compress",
-    "compress-alt",
-    "compress-arrows-alt",
-    "concierge-bell",
-    "cookie",
-    "cookie-bite",
-    "copy",
-    "copyright",
-    "couch",
-    "credit-card",
-    "crop",
-    "crop-alt",
-    "cross",
-    "crosshairs",
-    "crow",
-    "crown",
-    "crutch",
-    "cube",
-    "cubes",
-    "cut",
-    "database",
-    "deaf",
-    "democrat",
-    "desktop",
-    "dharmachakra",
-    "diagnoses",
-    "dice",
-    "dice-d20",
-    "dice-d6",
-    "dice-five",
-    "dice-four",
-    "dice-one",
-    "dice-six",
-    "dice-three",
-    "dice-two",
-    "digital-tachograph",
-    "directions",
-    "disease",
-    "divide",
-    "dizzy",
-    "dna",
-    "dog",
-    "dollar-sign",
-    "dolly",
-    "dolly-flatbed",
-    "donate",
-    "door-closed",
-    "door-open",
-    "dot-circle",
-    "dove",
-    "download",
-    "drafting-compass",
-    "dragon",
-    "draw-polygon",
-    "drum",
-    "drum-steelpan",
-    "drumstick-bite",
-    "dumbbell",
-    "dumpster",
-    "dumpster-fire",
-    "dungeon",
-    "edit",
-    "egg",
-    "eject",
-    "ellipsis-h",
-    "ellipsis-v",
-    "empty-set",
-    "envelope",
-    "envelope-open",
-    "envelope-open-text",
-    "envelope-square",
-    "equals",
-    "eraser",
-    "ethernet",
-    "euro-sign",
-    "exchange-alt",
-    "exclamation",
-    "exclamation-circle",
-    "exclamation-triangle",
-    "expand",
-    "expand-alt",
-    "expand-arrows-alt",
-    "external-link-alt",
-    "external-link-square-alt",
-    "eye",
-    "eye-dropper",
-    "eye-slash",
-    "fan",
-    "fast-backward",
-    "fast-forward",
-    "faucet",
-    "fax",
-    "feather",
-    "feather-alt",
-    "female",
-    "fighter-jet",
-    "file",
-    "file-alt",
-    "file-archive",
-    "file-audio",
-    "file-code",
-    "file-contract",
-    "file-csv",
-    "file-download",
-    "file-excel",
-    "file-export",
-    "file-image",
-    "file-import",
-    "file-invoice",
-    "file-invoice-dollar",
-    "file-medical",
-    "file-medical-alt",
-    "file-pdf",
-    "file-powerpoint",
-    "file-prescription",
-    "file-signature",
-    "file-upload",
-    "file-video",
-    "file-word",
-    "fill",
-    "fill-drip",
-    "film",
-    "filter",
-    "fingerprint",
-    "fire",
-    "fire-alt",
-    "fire-extinguisher",
-    "first-aid",
-    "fish",
-    "fist-raised",
-    "flag",
-    "flag-checkered",
-    "flag-usa",
-    "flask",
-    "flushed",
-    "folder",
-    "folder-minus",
-    "folder-open",
-    "folder-plus",
-    "font",
-    "football-ball",
-    "forward",
-    "frog",
-    "frown",
-    "frown-open",
-    "function",
-    "funnel-dollar",
-    "futbol",
-    "gamepad",
-    "gas-pump",
-    "gavel",
-    "gem",
-    "genderless",
-    "ghost",
-    "gift",
-    "gifts",
-    "glass-cheers",
-    "glass-martini",
-    "glass-martini-alt",
-    "glass-whiskey",
-    "glasses",
-    "globe",
-    "globe-africa",
-    "globe-americas",
-    "globe-asia",
-    "globe-europe",
-    "golf-ball",
-    "gopuram",
-    "graduation-cap",
-    "greater-than",
-    "greater-than-equal",
-    "grimace",
-    "grin",
-    "grin-alt",
-    "grin-beam",
-    "grin-beam-sweat",
-    "grin-hearts",
-    "grin-squint",
-    "grin-squint-tears",
-    "grin-stars",
-    "grin-tears",
-    "grin-tongue",
-    "grin-tongue-squint",
-    "grin-tongue-wink",
-    "grin-wink",
-    "grip-horizontal",
-    "grip-lines",
-    "grip-lines-vertical",
-    "grip-vertical",
-    "guitar",
-    "h-square",
-    "hamburger",
-    "hammer",
-    "hamsa",
-    "hand-holding",
-    "hand-holding-heart",
-    "hand-holding-medical",
-    "hand-holding-usd",
-    "hand-holding-water",
-    "hand-lizard",
-    "hand-middle-finger",
-    "hand-paper",
-    "hand-peace",
-    "hand-point-down",
-    "hand-point-left",
-    "hand-point-right",
-    "hand-point-up",
-    "hand-pointer",
-    "hand-rock",
-    "hand-scissors",
-    "hand-sparkles",
-    "hand-spock",
-    "hands",
-    "hands-helping",
-    "hands-wash",
-    "handshake",
-    "handshake-alt-slash",
-    "handshake-slash",
-    "hanukiah",
-    "hard-hat",
-    "hashtag",
-    "hat-cowboy",
-    "hat-cowboy-side",
-    "hat-wizard",
-    "hdd",
-    "head-side-cough",
-    "head-side-cough-slash",
-    "head-side-mask",
-    "head-side-virus",
-    "heading",
-    "headphones",
-    "headphones-alt",
-    "headset",
-    "heart",
-    "heart-broken",
-    "heartbeat",
-    "helicopter",
-    "highlighter",
-    "hiking",
-    "hippo",
-    "history",
-    "hockey-puck",
-    "holly-berry",
-    "home",
-    "horse",
-    "horse-head",
-    "hospital",
-    "hospital-alt",
-    "hospital-symbol",
-    "hospital-user",
-    "hot-tub",
-    "hotdog",
-    "hotel",
-    "hourglass",
-    "hourglass-end",
-    "hourglass-half",
-    "hourglass-start",
-    "house-damage",
-    "house-user",
-    "hryvnia",
-    "i-cursor",
-    "ice-cream",
-    "icicles",
-    "icons",
-    "id-badge",
-    "id-card",
-    "id-card-alt",
-    "igloo",
-    "image",
-    "images",
-    "inbox",
-    "indent",
-    "industry",
-    "infinity",
-    "info",
-    "info-circle",
-    "integral",
-    "intersection",
-    "italic",
-    "jedi",
-    "joint",
-    "journal-whills",
-    "kaaba",
-    "key",
-    "keyboard",
-    "khanda",
-    "kiss",
-    "kiss-beam",
-    "kiss-wink-heart",
-    "kiwi-bird",
-    "lambda",
-    "landmark",
-    "language",
-    "laptop",
-    "laptop-code",
-    "laptop-house",
-    "laptop-medical",
-    "laugh",
-    "laugh-beam",
-    "laugh-squint",
-    "laugh-wink",
-    "layer-group",
-    "leaf",
-    "lemon",
-    "less-than",
-    "less-than-equal",
-    "level-down-alt",
-    "level-up-alt",
-    "life-ring",
-    "lightbulb",
-    "link",
-    "lira-sign",
-    "list",
-    "list-alt",
-    "list-ol",
-    "list-ul",
-    "location-arrow",
-    "lock",
-    "lock-open",
-    "long-arrow-alt-down",
-    "long-arrow-alt-left",
-    "long-arrow-alt-right",
-    "long-arrow-alt-up",
-    "low-vision",
-    "luggage-cart",
-    "lungs",
-    "lungs-virus",
-    "magic",
-    "magnet",
-    "mail-bulk",
-    "male",
-    "map",
-    "map-marked",
-    "map-marked-alt",
-    "map-marker",
-    "map-marker-alt",
-    "map-pin",
-    "map-signs",
-    "marker",
-    "mars",
-    "mars-double",
-    "mars-stroke",
-    "mars-stroke-h",
-    "mars-stroke-v",
-    "mask",
-    "medal",
-    "medkit",
-    "meh",
-    "meh-blank",
-    "meh-rolling-eyes",
-    "memory",
-    "menorah",
-    "mercury",
-    "meteor",
-    "microchip",
-    "microphone",
-    "microphone-alt",
-    "microphone-alt-slash",
-    "microphone-slash",
-    "microscope",
-    "minus",
-    "minus-circle",
-    "minus-square",
-    "mitten",
-    "mobile",
-    "mobile-alt",
-    "money-bill",
-    "money-bill-alt",
-    "money-bill-wave",
-    "money-bill-wave-alt",
-    "money-check",
-    "money-check-alt",
-    "monument",
-    "moon",
-    "mortar-pestle",
-    "mosque",
-    "motorcycle",
-    "mountain",
-    "mouse",
-    "mouse-pointer",
-    "mug-hot",
-    "music",
-    "network-wired",
-    "neuter",
-    "newspaper",
-    "not-equal",
-    "notes-medical",
-    "object-group",
-    "object-ungroup",
-    "oil-can",
-    "om",
-    "omega",
-    "otter",
-    "outdent",
-    "pager",
-    "paint-brush",
-    "paint-roller",
-    "palette",
-    "pallet",
-    "paper-plane",
-    "paperclip",
-    "parachute-box",
-    "paragraph",
-    "parking",
-    "passport",
-    "pastafarianism",
-    "paste",
-    "pause",
-    "pause-circle",
-    "paw",
-    "peace",
-    "pen",
-    "pen-alt",
-    "pen-fancy",
-    "pen-nib",
-    "pen-square",
-    "pencil-alt",
-    "pencil-ruler",
-    "people-arrows",
-    "people-carry",
-    "pepper-hot",
-    "percent",
-    "percentage",
-    "person-booth",
-    "phone",
-    "phone-alt",
-    "phone-slash",
-    "phone-square",
-    "phone-square-alt",
-    "phone-volume",
-    "photo-video",
-    "pi",
-    "piggy-bank",
-    "pills",
-    "pizza-slice",
-    "place-of-worship",
-    "plane",
-    "plane-arrival",
-    "plane-departure",
-    "plane-slash",
-    "play",
-    "play-circle",
-    "plug",
-    "plus",
-    "plus-circle",
-    "plus-square",
-    "podcast",
-    "poll",
-    "poll-h",
-    "poo",
-    "poo-storm",
-    "poop",
-    "portrait",
-    "pound-sign",
-    "power-off",
-    "pray",
-    "praying-hands",
-    "prescription",
-    "prescription-bottle",
-    "prescription-bottle-alt",
-    "print",
-    "procedures",
-    "project-diagram",
-    "pump-medical",
-    "pump-soap",
-    "puzzle-piece",
-    "qrcode",
-    "question",
-    "question-circle",
-    "quidditch",
-    "quote-left",
-    "quote-right",
-    "quran",
-    "radiation",
-    "radiation-alt",
-    "rainbow",
-    "random",
-    "receipt",
-    "record-vinyl",
-    "recycle",
-    "redo",
-    "redo-alt",
-    "registered",
-    "remove-format",
-    "reply",
-    "reply-all",
-    "republican",
-    "restroom",
-    "retweet",
-    "ribbon",
-    "ring",
-    "road",
-    "robot",
-    "rocket",
-    "route",
-    "rss",
-    "rss-square",
-    "ruble-sign",
-    "ruler",
-    "ruler-combined",
-    "ruler-horizontal",
-    "ruler-vertical",
-    "running",
-    "rupee-sign",
-    "sad-cry",
-    "sad-tear",
-    "satellite",
-    "satellite-dish",
-    "save",
-    "school",
-    "screwdriver",
-    "scroll",
-    "sd-card",
-    "search",
-    "search-dollar",
-    "search-location",
-    "search-minus",
-    "search-plus",
-    "seedling",
-    "server",
-    "shapes",
-    "share",
-    "share-alt",
-    "share-alt-square",
-    "share-square",
-    "shekel-sign",
-    "shield-alt",
-    "shield-virus",
-    "ship",
-    "shipping-fast",
-    "shoe-prints",
-    "shopping-bag",
-    "shopping-basket",
-    "shopping-cart",
-    "shower",
-    "shuttle-van",
-    "sigma",
-    "sign",
-    "sign-in-alt",
-    "sign-language",
-    "sign-out-alt",
-    "signal",
-    "signal-alt",
-    "signal-alt-slash",
-    "signal-slash",
-    "signature",
-    "sim-card",
-    "sink",
-    "sitemap",
-    "skating",
-    "skiing",
-    "skiing-nordic",
-    "skull",
-    "skull-crossbones",
-    "slash",
-    "sleigh",
-    "sliders-h",
-    "smile",
-    "smile-beam",
-    "smile-wink",
-    "smog",
-    "smoking",
-    "smoking-ban",
-    "sms",
-    "snowboarding",
-    "snowflake",
-    "snowman",
-    "snowplow",
-    "soap",
-    "socks",
-    "solar-panel",
-    "sort",
-    "sort-alpha-down",
-    "sort-alpha-down-alt",
-    "sort-alpha-up",
-    "sort-alpha-up-alt",
-    "sort-amount-down",
-    "sort-amount-down-alt",
-    "sort-amount-up",
-    "sort-amount-up-alt",
-    "sort-down",
-    "sort-numeric-down",
-    "sort-numeric-down-alt",
-    "sort-numeric-up",
-    "sort-numeric-up-alt",
-    "sort-up",
-    "spa",
-    "space-shuttle",
-    "spell-check",
-    "spider",
-    "spinner",
-    "splotch",
-    "spray-can",
-    "square",
-    "square-full",
-    "square-root",
-    "square-root-alt",
-    "stamp",
-    "star",
-    "star-and-crescent",
-    "star-half",
-    "star-half-alt",
-    "star-of-david",
-    "star-of-life",
-    "step-backward",
-    "step-forward",
-    "stethoscope",
-    "sticky-note",
-    "stop",
-    "stop-circle",
-    "stopwatch",
-    "stopwatch-20",
-    "store",
-    "store-alt",
-    "store-alt-slash",
-    "store-slash",
-    "stream",
-    "street-view",
-    "strikethrough",
-    "stroopwafel",
-    "subscript",
-    "subway",
-    "suitcase",
-    "suitcase-rolling",
-    "sun",
-    "superscript",
-    "surprise",
-    "swatchbook",
-    "swimmer",
-    "swimming-pool",
-    "synagogue",
-    "sync",
-    "sync-alt",
-    "syringe",
-    "table",
-    "table-tennis",
-    "tablet",
-    "tablet-alt",
-    "tablets",
-    "tachometer-alt",
-    "tag",
-    "tags",
-    "tally",
-    "tape",
-    "tasks",
-    "taxi",
-    "teeth",
-    "teeth-open",
-    "temperature-high",
-    "temperature-low",
-    "tenge",
-    "terminal",
-    "text-height",
-    "text-width",
-    "th",
-    "th-large",
-    "th-list",
-    "theater-masks",
-    "thermometer",
-    "thermometer-empty",
-    "thermometer-full",
-    "thermometer-half",
-    "thermometer-quarter",
-    "thermometer-three-quarters",
-    "theta",
-    "thumbs-down",
-    "thumbs-up",
-    "thumbtack",
-    "ticket-alt",
-    "tilde",
-    "times",
-    "times-circle",
-    "tint",
-    "tint-slash",
-    "tired",
-    "toggle-off",
-    "toggle-on",
-    "toilet",
-    "toilet-paper",
-    "toilet-paper-slash",
-    "toolbox",
-    "tools",
-    "tooth",
-    "torah",
-    "torii-gate",
-    "tractor",
-    "trademark",
-    "traffic-light",
-    "trailer",
-    "train",
-    "tram",
-    "transgender",
-    "transgender-alt",
-    "trash",
-    "trash-alt",
-    "trash-restore",
-    "trash-restore-alt",
-    "tree",
-    "trophy",
-    "truck",
-    "truck-loading",
-    "truck-monster",
-    "truck-moving",
-    "truck-pickup",
-    "tshirt",
-    "tty",
-    "tv",
-    "umbrella",
-    "umbrella-beach",
-    "underline",
-    "undo",
-    "undo-alt",
-    "union",
-    "universal-access",
-    "university",
-    "unlink",
-    "unlock",
-    "unlock-alt",
-    "upload",
-    "user",
-    "user-alt",
-    "user-alt-slash",
-    "user-astronaut",
-    "user-check",
-    "user-circle",
-    "user-clock",
-    "user-cog",
-    "user-edit",
-    "user-friends",
-    "user-graduate",
-    "user-injured",
-    "user-lock",
-    "user-md",
-    "user-minus",
-    "user-ninja",
-    "user-nurse",
-    "user-plus",
-    "user-secret",
-    "user-shield",
-    "user-slash",
-    "user-tag",
-    "user-tie",
-    "user-times",
-    "users",
-    "users-cog",
-    "users-slash",
-    "utensil-spoon",
-    "utensils",
-    "value-absolute",
-    "vector-square",
-    "venus",
-    "venus-double",
-    "venus-mars",
-    "vest",
-    "vest-patches",
-    "vial",
-    "vials",
-    "video",
-    "video-slash",
-    "vihara",
-    "virus",
-    "virus-slash",
-    "viruses",
-    "voicemail",
-    "volleyball-ball",
-    "volume",
-    "volume-down",
-    "volume-mute",
-    "volume-off",
-    "volume-slash",
-    "volume-up",
-    "vote-yea",
-    "vr-cardboard",
-    "walking",
-    "wallet",
-    "warehouse",
-    "water",
-    "wave-square",
-    "weight",
-    "weight-hanging",
-    "wheelchair",
-    "wifi",
-    "wifi-slash",
-    "wind",
-    "window-close",
-    "window-maximize",
-    "window-minimize",
-    "window-restore",
-    "wine-bottle",
-    "wine-glass",
-    "wine-glass-alt",
-    "won-sign",
-    "wrench",
-    "x-ray",
-    "yen-sign",
-    "yin-yang"
-  ]
-};
diff --git a/src/components/ReIcon/index.ts b/src/components/ReIcon/index.ts
deleted file mode 100644
index 9f77a1e..0000000
--- a/src/components/ReIcon/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-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 };
diff --git a/src/components/ReIcon/src/Select.vue b/src/components/ReIcon/src/Select.vue
deleted file mode 100644
index 2da2bf2..0000000
--- a/src/components/ReIcon/src/Select.vue
+++ /dev/null
@@ -1,222 +0,0 @@
-<script lang="ts" setup>
-import { IconJson } from '@/components/ReIcon/data';
-import { cloneDeep, isAllEmpty } from '@pureadmin/utils';
-import { computed, CSSProperties, ref, 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
-					:popper-options="{
-						placement: 'auto',
-					}"
-					:width="350"
-					popper-class="pure-popper"
-					trigger="click"
-					@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" clearable placeholder="搜索图标" />
-
-					<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"
-										:style="iconItemStyle(item)"
-										:title="item"
-										class="icon-item p-2 cursor-pointer mr-2 mt-1 flex justify-center items-center border border-[#e5e7eb]"
-										@click="onChangeIcon(item)"
-									>
-										<IconifyIconOnline :icon="currentActiveType + item" height="20px" width="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
-							:current-page="currentPage"
-							:page-size="pageSize"
-							:pager-count="5"
-							:total="totalPage"
-							background
-							class="flex-auto ml-2"
-							layout="pager"
-							size="small"
-							@current-change="onCurrentChange"
-						/>
-						<el-button bg class="justify-end mr-2 ml-2" size="small" text type="danger" @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>
diff --git a/src/components/ReIcon/src/hooks.ts b/src/components/ReIcon/src/hooks.ts
deleted file mode 100644
index 5a377da..0000000
--- a/src/components/ReIcon/src/hooks.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-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
-        });
-      }
-    });
-  }
-}
diff --git a/src/components/ReIcon/src/iconfont.ts b/src/components/ReIcon/src/iconfont.ts
deleted file mode 100644
index c110451..0000000
--- a/src/components/ReIcon/src/iconfont.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-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
-      });
-    }
-  }
-});
diff --git a/src/components/ReIcon/src/iconifyIconOffline.ts b/src/components/ReIcon/src/iconifyIconOffline.ts
deleted file mode 100644
index b47aa99..0000000
--- a/src/components/ReIcon/src/iconifyIconOffline.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-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: () => []
-      }
-    );
-  }
-});
diff --git a/src/components/ReIcon/src/iconifyIconOnline.ts b/src/components/ReIcon/src/iconifyIconOnline.ts
deleted file mode 100644
index a5f5822..0000000
--- a/src/components/ReIcon/src/iconifyIconOnline.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-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: () => []
-      }
-    );
-  }
-});
diff --git a/src/components/ReIcon/src/offlineIcon.ts b/src/components/ReIcon/src/offlineIcon.ts
deleted file mode 100644
index 2283a55..0000000
--- a/src/components/ReIcon/src/offlineIcon.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-// 这里存放本地图标，在 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);
diff --git a/src/components/ReIcon/src/types.ts b/src/components/ReIcon/src/types.ts
deleted file mode 100644
index 000bdc5..0000000
--- a/src/components/ReIcon/src/types.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-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;
-}
diff --git a/src/components/ReSegmented/index.ts b/src/components/ReSegmented/index.ts
deleted file mode 100644
index de4253c..0000000
--- a/src/components/ReSegmented/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import reSegmented from "./src/index";
-import { withInstall } from "@pureadmin/utils";
-
-/** 分段控制器组件 */
-export const ReSegmented = withInstall(reSegmented);
-
-export default ReSegmented;
-export type { OptionsType } from "./src/type";
diff --git a/src/components/ReSegmented/src/index.css b/src/components/ReSegmented/src/index.css
deleted file mode 100644
index 503bbe4..0000000
--- a/src/components/ReSegmented/src/index.css
+++ /dev/null
@@ -1,157 +0,0 @@
-.pure-segmented {
-  --pure-control-padding-horizontal: 12px;
-  --pure-control-padding-horizontal-sm: 8px;
-  --pure-segmented-track-padding: 2px;
-  --pure-segmented-line-width: 1px;
-
-  --pure-segmented-border-radius-small: 4px;
-  --pure-segmented-border-radius-base: 6px;
-  --pure-segmented-border-radius-large: 8px;
-
-  box-sizing: border-box;
-  display: inline-block;
-  padding: var(--pure-segmented-track-padding);
-  font-size: var(--el-font-size-base);
-  color: rgba(0, 0, 0, 0.65);
-  background-color: rgb(0 0 0 / 4%);
-  border-radius: var(--pure-segmented-border-radius-base);
-}
-
-.pure-segmented-block {
-  display: flex;
-}
-
-.pure-segmented-block .pure-segmented-item {
-  flex: 1;
-  min-width: 0;
-}
-
-.pure-segmented-block .pure-segmented-item > .pure-segmented-item-label > span {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-/* small */
-.pure-segmented.pure-segmented--small {
-  border-radius: var(--pure-segmented-border-radius-small);
-}
-.pure-segmented.pure-segmented--small .pure-segmented-item {
-  border-radius: var(--el-border-radius-small);
-}
-.pure-segmented.pure-segmented--small .pure-segmented-item > div {
-  min-height: calc(
-    var(--el-component-size-small) - var(--pure-segmented-track-padding) * 2
-  );
-  line-height: calc(
-    var(--el-component-size-small) - var(--pure-segmented-track-padding) * 2
-  );
-  padding: 0
-    calc(
-      var(--pure-control-padding-horizontal-sm) -
-        var(--pure-segmented-line-width)
-    );
-}
-
-/* large */
-.pure-segmented.pure-segmented--large {
-  border-radius: var(--pure-segmented-border-radius-large);
-}
-.pure-segmented.pure-segmented--large .pure-segmented-item {
-  border-radius: calc(
-    var(--el-border-radius-base) + var(--el-border-radius-small)
-  );
-}
-.pure-segmented.pure-segmented--large .pure-segmented-item > div {
-  min-height: calc(
-    var(--el-component-size-large) - var(--pure-segmented-track-padding) * 2
-  );
-  line-height: calc(
-    var(--el-component-size-large) - var(--pure-segmented-track-padding) * 2
-  );
-  padding: 0
-    calc(
-      var(--pure-control-padding-horizontal) - var(--pure-segmented-line-width)
-    );
-  font-size: var(--el-font-size-medium);
-}
-
-/* default */
-.pure-segmented-item {
-  position: relative;
-  text-align: center;
-  cursor: pointer;
-  border-radius: var(--el-border-radius-base);
-  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
-}
-.pure-segmented .pure-segmented-item > div {
-  min-height: calc(
-    var(--el-component-size) - var(--pure-segmented-track-padding) * 2
-  );
-  line-height: calc(
-    var(--el-component-size) - var(--pure-segmented-track-padding) * 2
-  );
-  padding: 0
-    calc(
-      var(--pure-control-padding-horizontal) - var(--pure-segmented-line-width)
-    );
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  transition: 0.1s;
-}
-
-.pure-segmented-group {
-  position: relative;
-  display: flex;
-  align-items: stretch;
-  justify-items: flex-start;
-  width: 100%;
-}
-
-.pure-segmented-item-selected {
-  position: absolute;
-  top: 0;
-  left: 0;
-  box-sizing: border-box;
-  display: none;
-  width: 0;
-  height: 100%;
-  padding: 4px 0;
-  background-color: #fff;
-  border-radius: 4px;
-  box-shadow:
-    0 2px 8px -2px rgb(0 0 0 / 5%),
-    0 1px 4px -1px rgb(0 0 0 / 7%),
-    0 0 1px rgb(0 0 0 / 7%);
-  transition:
-    transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1),
-    width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
-  will-change: transform, width;
-}
-
-.pure-segmented-item > input {
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  width: 0;
-  height: 0;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.pure-segmented-item-label {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pure-segmented-item-icon svg {
-  width: 16px;
-  height: 16px;
-}
-
-.pure-segmented-item-disabled {
-  color: rgba(0, 0, 0, 0.25);
-  cursor: not-allowed;
-}
diff --git a/src/components/ReSegmented/src/index.tsx b/src/components/ReSegmented/src/index.tsx
deleted file mode 100644
index 39580ed..0000000
--- a/src/components/ReSegmented/src/index.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-import "./index.css";
-import type { OptionsType } from "./type";
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import {
-  useDark,
-  isNumber,
-  isFunction,
-  useResizeObserver
-} from "@pureadmin/utils";
-import {
-  type PropType,
-  h,
-  ref,
-  toRef,
-  watch,
-  nextTick,
-  defineComponent,
-  getCurrentInstance
-} from "vue";
-
-const props = {
-  options: {
-    type: Array<OptionsType>,
-    default: () => []
-  },
-  /** 默认选中，按照第一个索引为 `0` 的模式，可选（`modelValue`只有传`number`类型时才为响应式） */
-  modelValue: {
-    type: undefined,
-    require: false,
-    default: "0"
-  },
-  /** 将宽度调整为父元素宽度	 */
-  block: {
-    type: Boolean,
-    default: false
-  },
-  /** 控件尺寸 */
-  size: {
-    type: String as PropType<"small" | "default" | "large">
-  },
-  /** 是否全局禁用，默认 `false` */
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  /** 当内容发生变化时，设置 `resize` 可使其自适应容器位置 */
-  resize: {
-    type: Boolean,
-    default: false
-  }
-};
-
-export default defineComponent({
-  name: "ReSegmented",
-  props,
-  emits: ["change", "update:modelValue"],
-  setup(props, { emit }) {
-    const width = ref(0);
-    const translateX = ref(0);
-    const { isDark } = useDark();
-    const initStatus = ref(false);
-    const curMouseActive = ref(-1);
-    const segmentedItembg = ref("");
-    const instance = getCurrentInstance()!;
-    const curIndex = isNumber(props.modelValue)
-      ? toRef(props, "modelValue")
-      : ref(0);
-
-    function handleChange({ option, index }, event: Event) {
-      if (props.disabled || option.disabled) return;
-      event.preventDefault();
-      isNumber(props.modelValue)
-        ? emit("update:modelValue", index)
-        : (curIndex.value = index);
-      segmentedItembg.value = "";
-      emit("change", { index, option });
-    }
-
-    function handleMouseenter({ option, index }, event: Event) {
-      if (props.disabled) return;
-      event.preventDefault();
-      curMouseActive.value = index;
-      if (option.disabled || curIndex.value === index) {
-        segmentedItembg.value = "";
-      } else {
-        segmentedItembg.value = isDark.value
-          ? "#1f1f1f"
-          : "rgba(0, 0, 0, 0.06)";
-      }
-    }
-
-    function handleMouseleave(_, event: Event) {
-      if (props.disabled) return;
-      event.preventDefault();
-      curMouseActive.value = -1;
-    }
-
-    function handleInit(index = curIndex.value) {
-      nextTick(() => {
-        const curLabelRef = instance?.proxy?.$refs[`labelRef${index}`] as ElRef;
-        if (!curLabelRef) return;
-        width.value = curLabelRef.clientWidth;
-        translateX.value = curLabelRef.offsetLeft;
-        initStatus.value = true;
-      });
-    }
-
-    function handleResizeInit() {
-      useResizeObserver(".pure-segmented", () => {
-        nextTick(() => {
-          handleInit(curIndex.value);
-        });
-      });
-    }
-
-    (props.block || props.resize) && handleResizeInit();
-
-    watch(
-      () => curIndex.value,
-      index => {
-        nextTick(() => {
-          handleInit(index);
-        });
-      },
-      {
-        immediate: true
-      }
-    );
-
-    watch(() => props.size, handleResizeInit, {
-      immediate: true
-    });
-
-    const rendLabel = () => {
-      return props.options.map((option, index) => {
-        return (
-          <label
-            ref={`labelRef${index}`}
-            class={[
-              "pure-segmented-item",
-              (props.disabled || option?.disabled) &&
-                "pure-segmented-item-disabled"
-            ]}
-            style={{
-              background:
-                curMouseActive.value === index ? segmentedItembg.value : "",
-              color: props.disabled
-                ? null
-                : !option.disabled &&
-                    (curIndex.value === index || curMouseActive.value === index)
-                  ? isDark.value
-                    ? "rgba(255, 255, 255, 0.85)"
-                    : "rgba(0,0,0,.88)"
-                  : ""
-            }}
-            onMouseenter={event => handleMouseenter({ option, index }, event)}
-            onMouseleave={event => handleMouseleave({ option, index }, event)}
-            onClick={event => handleChange({ option, index }, event)}
-          >
-            <input type="radio" name="segmented" />
-            <div
-              class="pure-segmented-item-label"
-              v-tippy={{
-                content: option?.tip,
-                zIndex: 41000
-              }}
-            >
-              {option.icon && !isFunction(option.label) ? (
-                <span
-                  class="pure-segmented-item-icon"
-                  style={{ marginRight: option.label ? "6px" : 0 }}
-                >
-                  {h(
-                    useRenderIcon(option.icon, {
-                      ...option?.iconAttrs
-                    })
-                  )}
-                </span>
-              ) : null}
-              {option.label ? (
-                isFunction(option.label) ? (
-                  h(option.label)
-                ) : (
-                  <span>{option.label}</span>
-                )
-              ) : null}
-            </div>
-          </label>
-        );
-      });
-    };
-
-    return () => (
-      <div
-        class={{
-          "pure-segmented": true,
-          "pure-segmented-block": props.block,
-          "pure-segmented--large": props.size === "large",
-          "pure-segmented--small": props.size === "small"
-        }}
-      >
-        <div class="pure-segmented-group">
-          <div
-            class="pure-segmented-item-selected"
-            style={{
-              width: `${width.value}px`,
-              transform: `translateX(${translateX.value}px)`,
-              display: initStatus.value ? "block" : "none"
-            }}
-          ></div>
-          {rendLabel()}
-        </div>
-      </div>
-    );
-  }
-});
diff --git a/src/components/ReSegmented/src/type.ts b/src/components/ReSegmented/src/type.ts
deleted file mode 100644
index 205e34d..0000000
--- a/src/components/ReSegmented/src/type.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { VNode, Component } from "vue";
-import type { iconType } from "@/components/ReIcon/src/types.ts";
-
-export interface OptionsType {
-  /** 文字 */
-  label?: string | (() => VNode | Component);
-  /**
-   * @description 图标，采用平台内置的 `useRenderIcon` 函数渲染
-   * @see {@link 用法参考 https://pure-admin.github.io/pure-admin-doc/pages/icon/#%E9%80%9A%E7%94%A8%E5%9B%BE%E6%A0%87-userendericon-hooks }
-   */
-  icon?: string | Component;
-  /** 图标属性、样式配置 */
-  iconAttrs?: iconType;
-  /** 值 */
-  value?: any;
-  /** 是否禁用 */
-  disabled?: boolean;
-  /** `tooltip` 提示 */
-  tip?: string;
-}
diff --git a/src/components/Segmented/index.ts b/src/components/Segmented/index.ts
index de4253c..5e0975e 100644
--- a/src/components/Segmented/index.ts
+++ b/src/components/Segmented/index.ts
@@ -1,8 +1,8 @@
-import reSegmented from "./src/index";
-import { withInstall } from "@pureadmin/utils";
+import reSegmented from './src/index';
+import { withInstall } from '@pureadmin/utils';
 
 /** 分段控制器组件 */
 export const ReSegmented = withInstall(reSegmented);
 
 export default ReSegmented;
-export type { OptionsType } from "./src/type";
+export type { OptionsType } from './src/type';
diff --git a/src/components/Segmented/src/index.tsx b/src/components/Segmented/src/index.tsx
index 06ce6ba..ddcd471 100644
--- a/src/components/Segmented/src/index.tsx
+++ b/src/components/Segmented/src/index.tsx
@@ -126,13 +126,7 @@ export default defineComponent({
 						onClick={event => handleChange({ option, index }, event)}
 					>
 						<input type='radio' name='segmented' />
-						<div
-							class='pure-segmented-item-label'
-							v-tippy={{
-								content: option?.tip,
-								zIndex: 41000,
-							}}
-						>
+						<div class='pure-segmented-item-label' v-tippy={{ content: option?.tip, zIndex: 41000 }}>
 							{option.icon && !isFunction(option.label) ? (
 								<span class='pure-segmented-item-icon' style={{ marginRight: option.label ? '6px' : 0 }}>
 									{h(
diff --git a/src/components/Segmented/src/type.ts b/src/components/Segmented/src/type.ts
index 249f6de..4cd9877 100644
--- a/src/components/Segmented/src/type.ts
+++ b/src/components/Segmented/src/type.ts
@@ -1,20 +1,20 @@
-import type { Component, VNode } from "vue";
-import type { iconType } from "@/components/CommonIcon/src/types.ts";
+import type { Component, VNode } from 'vue';
+import type { iconType } from '@/components/CommonIcon/src/types.ts';
 
 export interface OptionsType {
-  /** 文字 */
-  label?: string | (() => VNode | Component);
-  /**
-   * @description 图标，采用平台内置的 `useRenderIcon` 函数渲染
-   * @see {@link 用法参考 https://pure-admin.github.io/pure-admin-doc/pages/icon/#%E9%80%9A%E7%94%A8%E5%9B%BE%E6%A0%87-userendericon-hooks }
-   */
-  icon?: string | Component;
-  /** 图标属性、样式配置 */
-  iconAttrs?: iconType;
-  /** 值 */
-  value?: any;
-  /** 是否禁用 */
-  disabled?: boolean;
-  /** `tooltip` 提示 */
-  tip?: string;
+	/** 文字 */
+	label?: string | (() => VNode | Component);
+	/**
+	 * @description 图标，采用平台内置的 `useRenderIcon` 函数渲染
+	 * @see {@link 用法参考 https://pure-admin.github.io/pure-admin-doc/pages/icon/#%E9%80%9A%E7%94%A8%E5%9B%BE%E6%A0%87-userendericon-hooks }
+	 */
+	icon?: string | Component;
+	/** 图标属性、样式配置 */
+	iconAttrs?: iconType;
+	/** 值 */
+	value?: any;
+	/** 是否禁用 */
+	disabled?: boolean;
+	/** `tooltip` 提示 */
+	tip?: string;
 }
diff --git a/src/components/SelectIcon/Select.vue b/src/components/SelectIcon/Select.vue
new file mode 100644
index 0000000..b9b8b03
--- /dev/null
+++ b/src/components/SelectIcon/Select.vue
@@ -0,0 +1,162 @@
+<script lang="ts" setup>
+import { onMounted, reactive, ref } from 'vue';
+import { fetchGetMenuIconList } from '@/api/v1/menuIcon';
+import { FormProps } from '@/components/SelectIcon/types';
+import { $t } from '@/plugins/i18n';
+
+const props = withDefaults(defineProps<FormProps>(), {
+	formInline: () => ({
+		icon: '',
+	}),
+});
+
+const innerForm = reactive({
+	datalist: [],
+	currentPage: 1,
+	pageSize: 30,
+	total: 100,
+	loading: false,
+});
+const form = ref(props.formInline);
+
+/**
+ * * 搜索和初始化
+ */
+const onSearch = async () => {
+	innerForm.loading = true;
+
+	// 获取数据
+	const baseResult = await fetchGetMenuIconList(innerForm);
+	const data = baseResult.data;
+
+	// 赋值内容
+	innerForm.datalist = data.list;
+	innerForm.currentPage = data.pageNo;
+	innerForm.pageSize = data.pageSize;
+	innerForm.total = data.total;
+
+	innerForm.value = false;
+};
+
+/**
+ * * 修改图标
+ * @param value
+ */
+const onChangeIcon = (value: any) => {
+	form.value.icon = value.iconName;
+};
+
+/**
+ * * 清除图标
+ */
+const onClear = () => {
+	form.value.icon = '';
+};
+
+/**
+ * * 修改当前页
+ * @param value
+ */
+const onCurrentChange = (value: string) => {
+	innerForm.currentPage = value;
+};
+
+onMounted(() => {
+	onSearch();
+});
+</script>
+
+<template>
+	<div class="selector">
+		<el-popover :popper-options="{ placement: 'auto' }" :width="350" popper-class="pure-popper" trigger="click">
+			<template #reference>
+				<div class="w-[60px] h-[32px] cursor-pointer flex justify-center items-center">
+					<el-text v-if="!form.icon" type="primary">{{ $t('select_icon') }}</el-text>
+					<IconifyIconOnline v-else :icon="form.icon" style="font-size: 32px" />
+				</div>
+			</template>
+
+			<ul class="flex flex-wrap px-2 ml-2">
+				<li
+					v-for="(item, key) in innerForm.datalist"
+					:key="key"
+					:title="item.iconName"
+					class="icon-item p-2 cursor-pointer mr-2 mt-1 flex justify-center items-center border border-[#e5e7eb]"
+					@click="onChangeIcon(item)"
+				>
+					<IconifyIconOnline :icon="item.iconName" height="20px" width="20px" />
+				</li>
+			</ul>
+			<el-empty v-show="innerForm.datalist.length === 0" :image-size="60" description="图标不存在" />
+
+			<div class="w-full h-9 flex items-center overflow-auto border-t border-[#e5e7eb]">
+				<el-pagination
+					:current-page="innerForm.currentPage"
+					:page-size="innerForm.pageSize"
+					:pager-count="5"
+					:total="innerForm.total"
+					background
+					class="flex-auto ml-2"
+					hide-on-single-page
+					layout="pager"
+					size="small"
+					@current-change="onCurrentChange"
+				/>
+				<el-button bg class="justify-end mr-2 ml-2" size="small" text type="danger" @click="onClear"> 清空</el-button>
+			</div>
+		</el-popover>
+	</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>
diff --git a/src/components/SelectIcon/types.ts b/src/components/SelectIcon/types.ts
new file mode 100644
index 0000000..02758ef
--- /dev/null
+++ b/src/components/SelectIcon/types.ts
@@ -0,0 +1,8 @@
+export interface FormItemProps {
+	/** 菜单类型（0代表菜单、1代表iframe、2代表外链、3代表按钮）*/
+	icon: string;
+}
+
+export interface FormProps {
+	formInline: FormItemProps;
+}
diff --git a/src/components/TableBar/src/TablePlusPage.vue b/src/components/TableBar/src/TablePlusPage.vue
deleted file mode 100644
index c6b44d2..0000000
--- a/src/components/TableBar/src/TablePlusPage.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-	<div class="main mt-2 p-2 bg-bg_color">
-		<pure-table
-			ref="tableRef"
-			:adaptiveConfig="{ offsetBottom: 108 }"
-			:columns="column"
-			:data="dataList"
-			:header-cell-style="cellHeaderStyle"
-			:loading="loading"
-			:pagination="pagination"
-			:paginationSmall="size === 'small'"
-			:size="size"
-			adaptive
-			align-whole="center"
-			border
-			row-key="id"
-			table-layout="auto"
-			@selection-change="handleSelectionChange"
-			@page-size-change="handleSizeChange"
-			@page-current-change="handleCurrentChange"
-		/>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import { cellHeaderStyle } from '@/components/TableBar/utils/tableStyle';
-import PureTable from '@pureadmin/table';
-import type { PropType } from 'vue';
-
-// * 传入数据
-defineProps({
-	// 表格数据
-	dataList: {
-		type: Array<any>,
-		default: [],
-	},
-	// 表格列字段
-	column: {
-		type: Array<any>,
-		default: [],
-	},
-	// 是否加载
-	loading: {
-		type: Boolean,
-		default: false,
-	},
-	// 页面字体大小，small | default | large
-	size: {
-		type: String as PropType<any>,
-		default: 'default',
-	},
-	// 分页器参数
-	pagination: {
-		type: Object,
-		default: Object,
-	},
-	// 一页大小变化
-	handleSelectionChange: {
-		type: Function as PropType<Function>,
-		default: () => {},
-	},
-	// 分页大小变化
-	handleSizeChange: {
-		type: Function as PropType<Function>,
-		default: () => {},
-	},
-	// 当前页变化
-	handleCurrentChange: {
-		type: Function as PropType<Function>,
-		default: () => {},
-	},
-});
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/components/TableBar/src/TablePlusQuery.vue b/src/components/TableBar/src/TablePlusQuery.vue
deleted file mode 100644
index 5e75ec7..0000000
--- a/src/components/TableBar/src/TablePlusQuery.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-	<div class="main">
-		<el-form ref="formRef" :inline="true" :model="form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
-			<slot name="tableForm" />
-		</el-form>
-
-		<div class="mt-2 p-2 bg-bg_color">
-			<pure-table
-				ref="tableRef"
-				:adaptiveConfig="{ offsetBottom: 108 }"
-				:columns="column"
-				:data="dataList"
-				:header-cell-style="cellHeaderStyle"
-				:loading="loading"
-				:pagination="pagination"
-				:paginationSmall="size === 'small'"
-				:size="size"
-				adaptive
-				align-whole="center"
-				border
-				row-key="id"
-				table-layout="auto"
-				@selection-change="handleSelectionChange"
-				@page-size-change="handleSizeChange"
-				@page-current-change="handleCurrentChange"
-			/>
-		</div>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import type { PropType } from 'vue';
-import { cellHeaderStyle } from '@/components/TableBar/utils/tableStyle';
-import PureTable from '@pureadmin/table';
-
-// * 传入数据
-defineProps({
-	// 表格数据
-	dataList: {
-		type: Array<any>,
-		default: [],
-	},
-	// 表格列字段
-	column: {
-		type: Array<any>,
-		default: [],
-	},
-	// 是否加载
-	loading: {
-		type: Boolean,
-		default: false,
-	},
-	// 页面字体大小，small | default | large
-	size: {
-		type: String as PropType<any>,
-		default: 'default',
-	},
-	// 分页器参数
-	pagination: {
-		type: Object,
-		default: Object,
-	},
-	// 一页大小变化
-	handleSelectionChange: {
-		type: Function as PropType<Function>,
-		default: () => {},
-	},
-	// 分页大小变化
-	handleSizeChange: {
-		type: Function as PropType<Function>,
-		default: () => {},
-	},
-	// 当前页变化
-	handleCurrentChange: {
-		type: Function as PropType<Function>,
-		default: () => {},
-	},
-	// 表单参数
-	form: {
-		type: Object as PropType<any>,
-		default: Object,
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-:deep(.el-dropdown-menu__item i) {
-	margin: 0;
-}
-
-.main-content {
-	margin: 24px 24px 0 !important;
-}
-
-.search-form {
-	:deep(.el-form-item) {
-		margin-bottom: 12px;
-	}
-}
-</style>
diff --git a/src/components/Text/src/index.vue b/src/components/Text/src/index.vue
index 9ec8030..4e7828c 100644
--- a/src/components/Text/src/index.vue
+++ b/src/components/Text/src/index.vue
@@ -1,20 +1,20 @@
 <script lang="ts" setup>
-import { h, onMounted, ref, useSlots } from "vue";
-import { type TippyOptions, useTippy } from "vue-tippy";
+import { h, onMounted, ref, useSlots } from 'vue';
+import { type TippyOptions, useTippy } from 'vue-tippy';
 
 defineOptions({
-  name: "ReText"
+	name: 'ReText',
 });
 
 const props = defineProps({
-  // 行数
-  lineClamp: {
-    type: [String, Number]
-  },
-  tippyProps: {
-    type: Object as PropType<TippyOptions>,
-    default: () => ({})
-  }
+	// 行数
+	lineClamp: {
+		type: [String, Number],
+	},
+	tippyProps: {
+		type: Object as PropType<TippyOptions>,
+		default: () => ({}),
+	},
 });
 
 const $slots = useSlots();
@@ -23,44 +23,44 @@ const textRef = ref();
 const tippyFunc = ref();
 
 const isTextEllipsis = (el: HTMLElement) => {
-  if (!props.lineClamp) {
-    // 单行省略判断
-    return el.scrollWidth > el.clientWidth;
-  } else {
-    // 多行省略判断
-    return el.scrollHeight > el.clientHeight;
-  }
+	if (!props.lineClamp) {
+		// 单行省略判断
+		return el.scrollWidth > el.clientWidth;
+	} else {
+		// 多行省略判断
+		return el.scrollHeight > el.clientHeight;
+	}
 };
 
 const getTippyProps = () => ({
-  content: h($slots.content || $slots.default),
-  ...props.tippyProps
+	content: h($slots.content || $slots.default),
+	...props.tippyProps,
 });
 
 function handleHover(event: MouseEvent) {
-  if (isTextEllipsis(event.target as HTMLElement)) {
-    tippyFunc.value.setProps(getTippyProps());
-    tippyFunc.value.enable();
-  } else {
-    tippyFunc.value.disable();
-  }
+	if (isTextEllipsis(event.target as HTMLElement)) {
+		tippyFunc.value.setProps(getTippyProps());
+		tippyFunc.value.enable();
+	} else {
+		tippyFunc.value.disable();
+	}
 }
 
 onMounted(() => {
-  tippyFunc.value = useTippy(textRef.value?.$el, getTippyProps());
+	tippyFunc.value = useTippy(textRef.value?.$el, getTippyProps());
 });
 </script>
 
 <template>
-  <el-text
-    ref="textRef"
-    v-bind="{
-      truncated: !lineClamp,
-      lineClamp,
-      ...$attrs
-    }"
-    @mouseover.self="handleHover"
-  >
-    <slot />
-  </el-text>
+	<el-text
+		ref="textRef"
+		v-bind="{
+			truncated: !lineClamp,
+			lineClamp,
+			...$attrs,
+		}"
+		@mouseover.self="handleHover"
+	>
+		<slot />
+	</el-text>
 </template>
diff --git a/src/enums/index.ts b/src/enums/index.ts
index 28387f1..0d945d6 100644
--- a/src/enums/index.ts
+++ b/src/enums/index.ts
@@ -1,4 +1,4 @@
-import type { OptionsType } from '@/components/ReSegmented';
+import type { OptionsType } from '@/components/Segmented';
 
 export const menuTypeOptions: Array<OptionsType> = [
 	{ label: '菜单', value: 0 },
@@ -8,11 +8,7 @@ export const menuTypeOptions: Array<OptionsType> = [
 
 export const showLinkOptions: Array<OptionsType> = [
 	{ label: '显示', tip: '会在菜单中显示', value: true },
-	{
-		label: '隐藏',
-		tip: '不会在菜单中显示',
-		value: false,
-	},
+	{ label: '隐藏', tip: '不会在菜单中显示', value: false },
 ];
 
 export const fixedTagOptions: Array<OptionsType> = [
diff --git a/src/store/i18n/i18n.ts b/src/store/i18n/i18n.ts
index 3e9e12a..a2a587a 100644
--- a/src/store/i18n/i18n.ts
+++ b/src/store/i18n/i18n.ts
@@ -2,6 +2,7 @@ import { defineStore } from 'pinia';
 import { fetchAddI18n, fetchDeleteI18n, fetchGetI18n, fetchGetI18nList, fetchUpdateI18n } from '@/api/v1/i18n';
 import { pageSizes } from '@/enums/baseConstant';
 import { storeMessage } from '@/utils/message';
+import { storePagination } from '@/store/useStorePagination';
 
 export const userI18nStore = defineStore('i18nStore', {
 	persist: true,
@@ -55,16 +56,9 @@ export const userI18nStore = defineStore('i18nStore', {
 			delete data.background;
 			const result = await fetchGetI18nList(data);
 
-			// 如果成功赋值内容
-			if (result.code === 200) {
-				this.datalist = result.data.list;
-				this.pagination.currentPage = result.data.pageNo;
-				this.pagination.pageSize = result.data.pageSize;
-				this.pagination.total = result.data.total;
-				return true;
-			}
-
-			return false;
+			// 公共页面函数hook
+			const pagination = storePagination.bind(this);
+			return pagination(result);
 		},
 
 		/**
diff --git a/src/store/i18n/i18nType.ts b/src/store/i18n/i18nType.ts
index af58ed5..b69b7fe 100644
--- a/src/store/i18n/i18nType.ts
+++ b/src/store/i18n/i18nType.ts
@@ -4,7 +4,6 @@ import { pageSizes } from '@/enums/baseConstant';
 import { storeMessage } from '@/utils/message';
 
 export const userI18nTypeStore = defineStore('i18nTypeStore', {
-	persist: true,
 	state() {
 		return {
 			// 多语言列表
diff --git a/src/store/modules/menuIcon.ts b/src/store/modules/menuIcon.ts
index 846df75..550319d 100644
--- a/src/store/modules/menuIcon.ts
+++ b/src/store/modules/menuIcon.ts
@@ -1,23 +1,72 @@
 import { defineStore } from 'pinia';
-import { getMenuIconList } from '@/api/v1/system';
+import { fetchAddMenuIcon, fetchDeleteMenuIcon, fetchGetMenuIconList, fetchUpdateMenuIcon } from '@/api/v1/menuIcon';
+import { pageSizes } from '@/enums/baseConstant';
+import { storeMessage } from '@/utils/message';
+import { storePagination } from '@/store/useStorePagination';
 
-export const userMenuIconStore = defineStore('menuIconStore', {
+/**
+ * 系统菜单图标 Store
+ */
+export const useMenuIconStore = defineStore('menuIconStore', {
 	state() {
 		return {
-			menuIconList: [],
-			menuIconPage: { page: 1, limit: 30, total: 0 },
+			// 系统菜单图标列表
+			datalist: [],
+			// 查询表单
+			form: {
+				// icon 名称
+				iconName: undefined,
+			},
+			// 分页查询结果
+			pagination: {
+				currentPage: 1,
+				pageSize: 150,
+				total: 100,
+				pageSizes,
+			},
+			// 加载
+			loading: false,
 		};
 	},
 	getters: {},
 	actions: {
 		/**
-		 * * 获取系统图标列表
+		 * * 获取系统菜单图标
 		 */
 		async getMenuIconList() {
-			const result = await getMenuIconList(this.menuIconPage);
-			if (result.code === 200) {
-				this.menuIconList = result.data.list;
-			}
+			const data = { ...this.pagination, ...this.form };
+			delete data.pageSizes;
+			delete data.total;
+			delete data.background;
+			const response = await fetchGetMenuIconList(data);
+
+			// 公共页面函数hook
+			const pagination = storePagination.bind(this);
+			return pagination(response);
+		},
+
+		/**
+		 * * 添加系统菜单图标
+		 */
+		async addMenuIcon(data: any) {
+			const result = await fetchAddMenuIcon(data);
+			return storeMessage(result);
+		},
+
+		/**
+		 * * 修改系统菜单图标
+		 */
+		async updateMenuIcon(data: any) {
+			const result = await fetchUpdateMenuIcon(data);
+			return storeMessage(result);
+		},
+
+		/**
+		 * * 删除系统菜单图标
+		 */
+		async deleteMenuIcon(data: any) {
+			const result = await fetchDeleteMenuIcon(data);
+			return storeMessage(result);
 		},
 	},
 });
diff --git a/src/store/modules/router.ts b/src/store/modules/router.ts
index 128c9d9..8e74ce4 100644
--- a/src/store/modules/router.ts
+++ b/src/store/modules/router.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { addMenu, deletedMenuByIds, getMenuList, updateMenu } from '@/api/v1/system';
+import { addMenu, deletedMenuByIds, getMenusList, updateMenu } from '@/api/v1/system';
 import { storeMessage } from '@/utils/message';
 import { handleTree } from '@/utils/tree';
 
@@ -7,6 +7,7 @@ export const userRouterStore = defineStore('routerStore', {
 	state() {
 		return {
 			datalist: [],
+			form: { title: undefined, visible: undefined },
 			loading: false,
 		};
 	},
@@ -16,7 +17,9 @@ export const userRouterStore = defineStore('routerStore', {
 		 * * 获取菜单列表
 		 */
 		async getMenuList() {
-			const result = await getMenuList();
+			const data = { ...this.pagination, ...this.form };
+			const result = await getMenusList(data);
+
 			if (result.code === 200) {
 				this.datalist = handleTree(result.data as any);
 				return true;
diff --git a/src/store/useStorePagination.ts b/src/store/useStorePagination.ts
new file mode 100644
index 0000000..9b37502
--- /dev/null
+++ b/src/store/useStorePagination.ts
@@ -0,0 +1,15 @@
+/**
+ * * 通用表单分页
+ * @param response
+ */
+export function storePagination(response: any) {
+	// 返回成功为其赋值
+	if (response.code === 200) {
+		this.datalist = response.data.list;
+		this.pagination.currentPage = response.data.pageNo;
+		this.pagination.pageSize = response.data.pageSize;
+		this.pagination.total = response.data.total;
+		return true;
+	}
+	return false;
+}
diff --git a/src/views/dept/form.vue b/src/views/dept/form.vue
deleted file mode 100644
index eaaa4ff..0000000
--- a/src/views/dept/form.vue
+++ /dev/null
@@ -1,139 +0,0 @@
-<script lang="ts" setup>
-import { ref } from "vue";
-import ReCol from "@/components/MyCol";
-import { formRules } from "./utils/rule";
-import { FormProps } from "./utils/types";
-import { usePublicHooks } from "../hooks";
-
-const props = withDefaults(defineProps<FormProps>(), {
-  formInline: () => ({
-    higherDeptOptions: [],
-    parentId: 0,
-    name: "",
-    principal: "",
-    phone: "",
-    email: "",
-    sort: 0,
-    status: 1,
-    remark: ""
-  })
-});
-
-const ruleFormRef = ref();
-const { switchStyle } = usePublicHooks();
-const newFormInline = ref(props.formInline);
-
-function getRef() {
-  return ruleFormRef.value;
-}
-
-defineExpose({ getRef });
-</script>
-
-<template>
-  <el-form
-    ref="ruleFormRef"
-    :model="newFormInline"
-    :rules="formRules"
-    label-width="82px"
-  >
-    <el-row :gutter="30">
-      <re-col>
-        <el-form-item label="上级部门">
-          <el-cascader
-            v-model="newFormInline.parentId"
-            :options="newFormInline.higherDeptOptions"
-            :props="{
-              value: 'id',
-              label: 'name',
-              emitPath: false,
-              checkStrictly: true
-            }"
-            class="w-full"
-            clearable
-            filterable
-            placeholder="请选择上级部门"
-          >
-            <template #default="{ node, data }">
-              <span>{{ data.name }}</span>
-              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
-            </template>
-          </el-cascader>
-        </el-form-item>
-      </re-col>
-
-      <re-col :sm="24" :value="12" :xs="24">
-        <el-form-item label="部门名称" prop="name">
-          <el-input
-            v-model="newFormInline.name"
-            clearable
-            placeholder="请输入部门名称"
-          />
-        </el-form-item>
-      </re-col>
-      <re-col :sm="24" :value="12" :xs="24">
-        <el-form-item label="部门负责人">
-          <el-input
-            v-model="newFormInline.principal"
-            clearable
-            placeholder="请输入部门负责人"
-          />
-        </el-form-item>
-      </re-col>
-
-      <re-col :sm="24" :value="12" :xs="24">
-        <el-form-item label="手机号" prop="phone">
-          <el-input
-            v-model="newFormInline.phone"
-            clearable
-            placeholder="请输入手机号"
-          />
-        </el-form-item>
-      </re-col>
-      <re-col :sm="24" :value="12" :xs="24">
-        <el-form-item label="邮箱" prop="email">
-          <el-input
-            v-model="newFormInline.email"
-            clearable
-            placeholder="请输入邮箱"
-          />
-        </el-form-item>
-      </re-col>
-
-      <re-col :sm="24" :value="12" :xs="24">
-        <el-form-item label="排序">
-          <el-input-number
-            v-model="newFormInline.sort"
-            :max="9999"
-            :min="0"
-            class="!w-full"
-            controls-position="right"
-          />
-        </el-form-item>
-      </re-col>
-      <re-col :sm="24" :value="12" :xs="24">
-        <el-form-item label="部门状态">
-          <el-switch
-            v-model="newFormInline.status"
-            :active-value="1"
-            :inactive-value="0"
-            :style="switchStyle"
-            active-text="启用"
-            inactive-text="停用"
-            inline-prompt
-          />
-        </el-form-item>
-      </re-col>
-
-      <re-col>
-        <el-form-item label="备注">
-          <el-input
-            v-model="newFormInline.remark"
-            placeholder="请输入备注信息"
-            type="textarea"
-          />
-        </el-form-item>
-      </re-col>
-    </el-row>
-  </el-form>
-</template>
diff --git a/src/views/dept/index.vue b/src/views/dept/index.vue
deleted file mode 100644
index ec4e94f..0000000
--- a/src/views/dept/index.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<script lang="ts" setup>
-import { ref } from "vue";
-import { useDept } from "./utils/hook";
-import { PureTableBar } from "@/components/TableBar";
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-
-import Delete from "@iconify-icons/ep/delete";
-import EditPen from "@iconify-icons/ep/edit-pen";
-import Refresh from "@iconify-icons/ep/refresh";
-import AddFill from "@iconify-icons/ri/add-circle-line";
-
-defineOptions({
-  name: "SystemDept"
-});
-
-const formRef = ref();
-const tableRef = ref();
-const {
-  form,
-  loading,
-  columns,
-  dataList,
-  onSearch,
-  resetForm,
-  openDialog,
-  handleDelete,
-  handleSelectionChange
-} = useDept();
-
-function onFullscreen() {
-  // 重置表格高度
-  tableRef.value.setAdaptive();
-}
-</script>
-
-<template>
-  <div class="main">
-    <el-form
-      ref="formRef"
-      :inline="true"
-      :model="form"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
-    >
-      <el-form-item label="部门名称：" prop="name">
-        <el-input
-          v-model="form.name"
-          class="!w-[180px]"
-          clearable
-          placeholder="请输入部门名称"
-        />
-      </el-form-item>
-      <el-form-item label="状态：" prop="status">
-        <el-select
-          v-model="form.status"
-          class="!w-[180px]"
-          clearable
-          placeholder="请选择状态"
-        >
-          <el-option :value="1" label="启用" />
-          <el-option :value="0" label="停用" />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button
-          :icon="useRenderIcon('ri:search-line')"
-          :loading="loading"
-          type="primary"
-          @click="onSearch"
-        >
-          搜索
-        </el-button>
-        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
-          重置
-        </el-button>
-      </el-form-item>
-    </el-form>
-
-    <PureTableBar
-      :columns="columns"
-      :tableRef="tableRef?.getTableRef()"
-      title="部门管理（仅演示，操作后不生效）"
-      @fullscreen="onFullscreen"
-      @refresh="onSearch"
-    >
-      <template #buttons>
-        <el-button
-          :icon="useRenderIcon(AddFill)"
-          type="primary"
-          @click="openDialog()"
-        >
-          新增部门
-        </el-button>
-      </template>
-      <template v-slot="{ size, dynamicColumns }">
-        <pure-table
-          ref="tableRef"
-          :adaptiveConfig="{ offsetBottom: 45 }"
-          :columns="dynamicColumns"
-          :data="dataList"
-          :header-cell-style="{
-            background: 'var(--el-fill-color-light)',
-            color: 'var(--el-text-color-primary)'
-          }"
-          :loading="loading"
-          :size="size"
-          adaptive
-          align-whole="center"
-          default-expand-all
-          row-key="id"
-          showOverflowTooltip
-          table-layout="auto"
-          @selection-change="handleSelectionChange"
-        >
-          <template #operation="{ row }">
-            <el-button
-              :icon="useRenderIcon(EditPen)"
-              :size="size"
-              class="reset-margin"
-              link
-              type="primary"
-              @click="openDialog('修改', row)"
-            >
-              修改
-            </el-button>
-            <el-button
-              :icon="useRenderIcon(AddFill)"
-              :size="size"
-              class="reset-margin"
-              link
-              type="primary"
-              @click="openDialog('新增', { parentId: row.id } as any)"
-            >
-              新增
-            </el-button>
-            <el-popconfirm
-              :title="`是否确认删除部门名称为${row.name}的这条数据`"
-              @confirm="handleDelete(row)"
-            >
-              <template #reference>
-                <el-button
-                  :icon="useRenderIcon(Delete)"
-                  :size="size"
-                  class="reset-margin"
-                  link
-                  type="primary"
-                >
-                  删除
-                </el-button>
-              </template>
-            </el-popconfirm>
-          </template>
-        </pure-table>
-      </template>
-    </PureTableBar>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-:deep(.el-table__inner-wrapper::before) {
-  height: 0;
-}
-
-.main-content {
-  margin: 24px 24px 0 !important;
-}
-
-.search-form {
-  :deep(.el-form-item) {
-    margin-bottom: 12px;
-  }
-}
-</style>
diff --git a/src/views/dept/utils/hook.tsx b/src/views/dept/utils/hook.tsx
deleted file mode 100644
index 5f02544..0000000
--- a/src/views/dept/utils/hook.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import dayjs from "dayjs";
-import editForm from "../form.vue";
-import { handleTree } from "@/utils/tree";
-import { message } from "@/utils/message";
-import { getDeptList } from "@/api/v1/system";
-import { usePublicHooks } from "../../hooks";
-import { addDialog } from "@/components/BaseDialog";
-import { h, onMounted, reactive, ref } from "vue";
-import type { FormItemProps } from "../utils/types";
-import { cloneDeep, deviceDetection, isAllEmpty } from "@pureadmin/utils";
-
-export function useDept() {
-  const form = reactive({
-    name: "",
-    status: null
-  });
-
-  const formRef = ref();
-  const dataList = ref([]);
-  const loading = ref(true);
-  const { tagStyle } = usePublicHooks();
-
-  const columns: TableColumnList = [
-    {
-      label: "部门名称",
-      prop: "name",
-      width: 180,
-      align: "left"
-    },
-    {
-      label: "排序",
-      prop: "sort",
-      minWidth: 70
-    },
-    {
-      label: "状态",
-      prop: "status",
-      minWidth: 100,
-      cellRenderer: ({ row, props }) => (
-        <el-tag size={props.size} style={tagStyle.value(row.status)}>
-          {row.status === 1 ? "启用" : "停用"}
-        </el-tag>
-      )
-    },
-    {
-      label: "创建时间",
-      minWidth: 200,
-      prop: "createTime",
-      formatter: ({ createTime }) =>
-        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
-    },
-    {
-      label: "备注",
-      prop: "remark",
-      minWidth: 320
-    },
-    {
-      label: "操作",
-      fixed: "right",
-      width: 210,
-      slot: "operation"
-    }
-  ];
-
-  function handleSelectionChange(val) {
-    console.log("handleSelectionChange", val);
-  }
-
-  function resetForm(formEl) {
-    if (!formEl) return;
-    formEl.resetFields();
-    onSearch();
-  }
-
-  async function onSearch() {
-    loading.value = true;
-    const { data } = await getDeptList(); // 这里是返回一维数组结构，前端自行处理成树结构，返回格式要求：唯一id加父节点parentId，parentId取父节点id
-    let newData = data;
-    if (!isAllEmpty(form.name)) {
-      // 前端搜索部门名称
-      newData = newData.filter(item => item.name.includes(form.name));
-    }
-    if (!isAllEmpty(form.status)) {
-      // 前端搜索状态
-      newData = newData.filter(item => item.status === form.status);
-    }
-    dataList.value = handleTree(newData); // 处理成树结构
-    setTimeout(() => {
-      loading.value = false;
-    }, 500);
-  }
-
-  function formatHigherDeptOptions(treeList) {
-    // 根据返回数据的status字段值判断追加是否禁用disabled字段，返回处理后的树结构，用于上级部门级联选择器的展示（实际开发中也是如此，不可能前端需要的每个字段后端都会返回，这时需要前端自行根据后端返回的某些字段做逻辑处理）
-    if (!treeList || !treeList.length) return;
-    const newTreeList = [];
-    for (let i = 0; i < treeList.length; i++) {
-      treeList[i].disabled = treeList[i].status === 0 ? true : false;
-      formatHigherDeptOptions(treeList[i].children);
-      newTreeList.push(treeList[i]);
-    }
-    return newTreeList;
-  }
-
-  function openDialog(title = "新增", row?: FormItemProps) {
-    addDialog({
-      title: `${title}部门`,
-      props: {
-        formInline: {
-          higherDeptOptions: formatHigherDeptOptions(cloneDeep(dataList.value)),
-          parentId: row?.parentId ?? 0,
-          name: row?.name ?? "",
-          principal: row?.principal ?? "",
-          phone: row?.phone ?? "",
-          email: row?.email ?? "",
-          sort: row?.sort ?? 0,
-          status: row?.status ?? 1,
-          remark: row?.remark ?? ""
-        }
-      },
-      width: "40%",
-      draggable: true,
-      fullscreen: deviceDetection(),
-      fullscreenIcon: true,
-      closeOnClickModal: false,
-      contentRenderer: () => h(editForm, { ref: formRef, formInline: null }),
-      beforeSure: (done, { options }) => {
-        const FormRef = formRef.value.getRef();
-        const curData = options.props.formInline as FormItemProps;
-
-        function chores() {
-          message(`您${title}了部门名称为${curData.name}的这条数据`, {
-            type: "success"
-          });
-          done(); // 关闭弹框
-          onSearch(); // 刷新表格数据
-        }
-
-        FormRef.validate(valid => {
-          if (valid) {
-            console.log("curData", curData);
-            // 表单规则校验通过
-            if (title === "新增") {
-              // 实际开发先调用新增接口，再进行下面操作
-              chores();
-            } else {
-              // 实际开发先调用修改接口，再进行下面操作
-              chores();
-            }
-          }
-        });
-      }
-    });
-  }
-
-  function handleDelete(row) {
-    message(`您删除了部门名称为${row.name}的这条数据`, { type: "success" });
-    onSearch();
-  }
-
-  onMounted(() => {
-    onSearch();
-  });
-
-  return {
-    form,
-    loading,
-    columns,
-    dataList,
-    /** 搜索 */
-    onSearch,
-    /** 重置 */
-    resetForm,
-    /** 新增、修改部门 */
-    openDialog,
-    /** 删除部门 */
-    handleDelete,
-    handleSelectionChange
-  };
-}
diff --git a/src/views/dept/utils/rule.ts b/src/views/dept/utils/rule.ts
deleted file mode 100644
index b20bf67..0000000
--- a/src/views/dept/utils/rule.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { reactive } from "vue";
-import type { FormRules } from "element-plus";
-import { isPhone, isEmail } from "@pureadmin/utils";
-
-/** 自定义表单规则校验 */
-export const formRules = reactive(<FormRules>{
-  name: [{ required: true, message: "部门名称为必填项", trigger: "blur" }],
-  phone: [
-    {
-      validator: (rule, value, callback) => {
-        if (value === "") {
-          callback();
-        } else if (!isPhone(value)) {
-          callback(new Error("请输入正确的手机号码格式"));
-        } else {
-          callback();
-        }
-      },
-      trigger: "blur"
-      // trigger: "click" // 如果想在点击确定按钮时触发这个校验，trigger 设置成 click 即可
-    }
-  ],
-  email: [
-    {
-      validator: (rule, value, callback) => {
-        if (value === "") {
-          callback();
-        } else if (!isEmail(value)) {
-          callback(new Error("请输入正确的邮箱格式"));
-        } else {
-          callback();
-        }
-      },
-      trigger: "blur"
-    }
-  ]
-});
diff --git a/src/views/dept/utils/types.ts b/src/views/dept/utils/types.ts
deleted file mode 100644
index 7547d6b..0000000
--- a/src/views/dept/utils/types.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-interface FormItemProps {
-  higherDeptOptions: Record<string, unknown>[];
-  parentId: number;
-  name: string;
-  principal: string;
-  phone: string | number;
-  email: string;
-  sort: number;
-  status: number;
-  remark: string;
-}
-interface FormProps {
-  formInline: FormItemProps;
-}
-
-export type { FormItemProps, FormProps };
diff --git a/src/views/i18n/i18n-setting/index.vue b/src/views/i18n/i18n-setting/index.vue
index a00d7d1..e3b8557 100644
--- a/src/views/i18n/i18n-setting/index.vue
+++ b/src/views/i18n/i18n-setting/index.vue
@@ -2,7 +2,7 @@
 import { onMounted, ref } from 'vue';
 import { userI18nStore } from '@/store/i18n/i18n';
 import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/i18n/i18n-setting/utils/hook';
-import { useRenderIcon } from '@/components/ReIcon/src/hooks';
+import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
 import AddFill from '@iconify-icons/ri/add-circle-line';
 import EditPen from '@iconify-icons/ep/edit-pen';
 import Delete from '@iconify-icons/ep/delete';
diff --git a/src/views/i18n/i18n-type-setting/i18n-type-dialog.vue b/src/views/i18n/i18n-type-setting/i18n-type-dialog.vue
index 9a4bb03..162a8db 100644
--- a/src/views/i18n/i18n-type-setting/i18n-type-dialog.vue
+++ b/src/views/i18n/i18n-type-setting/i18n-type-dialog.vue
@@ -4,7 +4,7 @@ import { FormInstance } from 'element-plus';
 import { rules } from '@/views/i18n/i18n-type-setting/utils/columns';
 import { FormProps } from '@/views/i18n/i18n-type-setting/utils/types';
 import { frameSureOptions } from '@/enums';
-import Segmented from '@/components/ReSegmented';
+import Segmented from '@/components/Segmented';
 
 const props = withDefaults(defineProps<FormProps>(), {
 	formInline: () => ({
diff --git a/src/views/i18n/i18n-type-setting/index.vue b/src/views/i18n/i18n-type-setting/index.vue
index b49172d..4379a41 100644
--- a/src/views/i18n/i18n-type-setting/index.vue
+++ b/src/views/i18n/i18n-type-setting/index.vue
@@ -2,7 +2,7 @@
 import { onMounted, ref } from 'vue';
 import { columns } from '@/views/i18n/i18n-type-setting/utils/columns';
 import PureTableBar from '@/components/TableBar/src/bar';
-import { useRenderIcon } from '@/components/ReIcon/src/hooks';
+import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
 import AddFill from '@iconify-icons/ri/add-circle-line';
 import PureTable from '@pureadmin/table';
 import { userI18nTypeStore } from '@/store/i18n/i18nType';
@@ -10,7 +10,6 @@ import { onAdd, onDelete, onSearch, onUpdate } from '@/views/i18n/i18n-type-sett
 import Delete from '@iconify-icons/ep/delete';
 import EditPen from '@iconify-icons/ep/edit-pen';
 import TableIsDefaultTag from '@/components/TableBar/src/TableIsDefaultTag.vue';
-import { resetForm } from '@/views/system/menu/utils/hook';
 import Refresh from '@iconify-icons/ep/refresh';
 import { selectUserinfo } from '@/components/Table/Userinfo/columns';
 import { $t } from '@/plugins/i18n';
diff --git a/src/views/permission/button/index.vue b/src/views/permission/button/index.vue
deleted file mode 100644
index 405e2c6..0000000
--- a/src/views/permission/button/index.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<script setup lang="ts">
-import { hasAuth, getAuths } from "@/router/utils";
-
-defineOptions({
-  name: "PermissionButtonRouter"
-});
-</script>
-
-<template>
-  <div>
-    <p class="mb-2">当前拥有的code列表：{{ getAuths() }}</p>
-
-    <el-card shadow="never" class="mb-2">
-      <template #header>
-        <div class="card-header">组件方式判断权限</div>
-      </template>
-      <el-space wrap>
-        <Auth value="permission:btn:add">
-          <el-button plain type="warning">
-            拥有code：'permission:btn:add' 权限可见
-          </el-button>
-        </Auth>
-        <Auth :value="['permission:btn:edit']">
-          <el-button plain type="primary">
-            拥有code：['permission:btn:edit'] 权限可见
-          </el-button>
-        </Auth>
-        <Auth
-          :value="[
-            'permission:btn:add',
-            'permission:btn:edit',
-            'permission:btn:delete'
-          ]"
-        >
-          <el-button plain type="danger">
-            拥有code：['permission:btn:add', 'permission:btn:edit',
-            'permission:btn:delete'] 权限可见
-          </el-button>
-        </Auth>
-      </el-space>
-    </el-card>
-
-    <el-card shadow="never" class="mb-2">
-      <template #header>
-        <div class="card-header">函数方式判断权限</div>
-      </template>
-      <el-space wrap>
-        <el-button v-if="hasAuth('permission:btn:add')" plain type="warning">
-          拥有code：'permission:btn:add' 权限可见
-        </el-button>
-        <el-button v-if="hasAuth(['permission:btn:edit'])" plain type="primary">
-          拥有code：['permission:btn:edit'] 权限可见
-        </el-button>
-        <el-button
-          v-if="
-            hasAuth([
-              'permission:btn:add',
-              'permission:btn:edit',
-              'permission:btn:delete'
-            ])
-          "
-          plain
-          type="danger"
-        >
-          拥有code：['permission:btn:add', 'permission:btn:edit',
-          'permission:btn:delete'] 权限可见
-        </el-button>
-      </el-space>
-    </el-card>
-
-    <el-card shadow="never">
-      <template #header>
-        <div class="card-header">
-          指令方式判断权限（该方式不能动态修改权限）
-        </div>
-      </template>
-      <el-space wrap>
-        <el-button v-auth="'permission:btn:add'" plain type="warning">
-          拥有code：'permission:btn:add' 权限可见
-        </el-button>
-        <el-button v-auth="['permission:btn:edit']" plain type="primary">
-          拥有code：['permission:btn:edit'] 权限可见
-        </el-button>
-        <el-button
-          v-auth="[
-            'permission:btn:add',
-            'permission:btn:edit',
-            'permission:btn:delete'
-          ]"
-          plain
-          type="danger"
-        >
-          拥有code：['permission:btn:add', 'permission:btn:edit',
-          'permission:btn:delete'] 权限可见
-        </el-button>
-      </el-space>
-    </el-card>
-  </div>
-</template>
diff --git a/src/views/permission/button/perms.vue b/src/views/permission/button/perms.vue
deleted file mode 100644
index 0cdc6b5..0000000
--- a/src/views/permission/button/perms.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<script setup lang="ts">
-import { hasPerms } from "@/utils/auth";
-import { useUserStoreHook } from "@/store/modules/user";
-
-const { permissions } = useUserStoreHook();
-
-defineOptions({
-  name: "PermissionButtonLogin"
-});
-</script>
-
-<template>
-  <div>
-    <p class="mb-2">当前拥有的code列表：{{ permissions }}</p>
-    <p v-show="permissions?.[0] === '*:*:*'" class="mb-2">
-      *:*:* 代表拥有全部按钮级别权限
-    </p>
-
-    <el-card shadow="never" class="mb-2">
-      <template #header>
-        <div class="card-header">组件方式判断权限</div>
-      </template>
-      <el-space wrap>
-        <Perms value="permission:btn:add">
-          <el-button plain type="warning">
-            拥有code：'permission:btn:add' 权限可见
-          </el-button>
-        </Perms>
-        <Perms :value="['permission:btn:edit']">
-          <el-button plain type="primary">
-            拥有code：['permission:btn:edit'] 权限可见
-          </el-button>
-        </Perms>
-        <Perms
-          :value="[
-            'permission:btn:add',
-            'permission:btn:edit',
-            'permission:btn:delete'
-          ]"
-        >
-          <el-button plain type="danger">
-            拥有code：['permission:btn:add', 'permission:btn:edit',
-            'permission:btn:delete'] 权限可见
-          </el-button>
-        </Perms>
-      </el-space>
-    </el-card>
-
-    <el-card shadow="never" class="mb-2">
-      <template #header>
-        <div class="card-header">函数方式判断权限</div>
-      </template>
-      <el-space wrap>
-        <el-button v-if="hasPerms('permission:btn:add')" plain type="warning">
-          拥有code：'permission:btn:add' 权限可见
-        </el-button>
-        <el-button
-          v-if="hasPerms(['permission:btn:edit'])"
-          plain
-          type="primary"
-        >
-          拥有code：['permission:btn:edit'] 权限可见
-        </el-button>
-        <el-button
-          v-if="
-            hasPerms([
-              'permission:btn:add',
-              'permission:btn:edit',
-              'permission:btn:delete'
-            ])
-          "
-          plain
-          type="danger"
-        >
-          拥有code：['permission:btn:add', 'permission:btn:edit',
-          'permission:btn:delete'] 权限可见
-        </el-button>
-      </el-space>
-    </el-card>
-
-    <el-card shadow="never">
-      <template #header>
-        <div class="card-header">
-          指令方式判断权限（该方式不能动态修改权限）
-        </div>
-      </template>
-      <el-space wrap>
-        <el-button v-perms="'permission:btn:add'" plain type="warning">
-          拥有code：'permission:btn:add' 权限可见
-        </el-button>
-        <el-button v-perms="['permission:btn:edit']" plain type="primary">
-          拥有code：['permission:btn:edit'] 权限可见
-        </el-button>
-        <el-button
-          v-perms="[
-            'permission:btn:add',
-            'permission:btn:edit',
-            'permission:btn:delete'
-          ]"
-          plain
-          type="danger"
-        >
-          拥有code：['permission:btn:add', 'permission:btn:edit',
-          'permission:btn:delete'] 权限可见
-        </el-button>
-      </el-space>
-    </el-card>
-  </div>
-</template>
diff --git a/src/views/permission/page/index.vue b/src/views/permission/page/index.vue
deleted file mode 100644
index 214f90c..0000000
--- a/src/views/permission/page/index.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<script lang="ts" setup>
-import { initRouter } from '@/router/utils';
-import { storageLocal } from '@pureadmin/utils';
-import { computed, type CSSProperties, ref } from 'vue';
-import { useUserStoreHook } from '@/store/modules/user';
-import { usePermissionStoreHook } from '@/store/permission';
-
-defineOptions({
-	name: 'PermissionPage',
-});
-
-const elStyle = computed((): CSSProperties => {
-	return {
-		width: '85vw',
-		justifyContent: 'start',
-	};
-});
-
-const username = ref(useUserStoreHook()?.username);
-
-const options = [
-	{
-		value: 'admin',
-		label: '管理员角色',
-	},
-	{
-		value: 'common',
-		label: '普通角色',
-	},
-];
-
-function onChange() {
-	useUserStoreHook()
-		.loginByUsername({ username: username.value, password: 'admin123' })
-		.then(res => {
-			if (res.success) {
-				storageLocal().removeItem('async-routes');
-				usePermissionStoreHook().clearAllCachePage();
-				initRouter();
-			}
-		});
-}
-</script>
-
-<template>
-	<div>
-		<p class="mb-2">模拟后台根据不同角色返回对应路由，观察左侧菜单变化（管理员角色可查看系统管理菜单、普通角色不可查看系统管理菜单）</p>
-		<el-card :style="elStyle" shadow="never">
-			<template #header>
-				<div class="card-header">
-					<span>当前角色：{{ username }}</span>
-				</div>
-			</template>
-			<el-select v-model="username" class="!w-[160px]" @change="onChange">
-				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-			</el-select>
-		</el-card>
-	</div>
-</template>
diff --git a/src/views/role/form.vue b/src/views/role/form.vue
deleted file mode 100644
index 65d4ef0..0000000
--- a/src/views/role/form.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { formRules } from "./utils/rule";
-import { FormProps } from "./utils/types";
-
-const props = withDefaults(defineProps<FormProps>(), {
-  formInline: () => ({
-    name: "",
-    code: "",
-    remark: ""
-  })
-});
-
-const ruleFormRef = ref();
-const newFormInline = ref(props.formInline);
-
-function getRef() {
-  return ruleFormRef.value;
-}
-
-defineExpose({ getRef });
-</script>
-
-<template>
-  <el-form
-    ref="ruleFormRef"
-    :model="newFormInline"
-    :rules="formRules"
-    label-width="82px"
-  >
-    <el-form-item label="角色名称" prop="name">
-      <el-input
-        v-model="newFormInline.name"
-        clearable
-        placeholder="请输入角色名称"
-      />
-    </el-form-item>
-
-    <el-form-item label="角色标识" prop="code">
-      <el-input
-        v-model="newFormInline.code"
-        clearable
-        placeholder="请输入角色标识"
-      />
-    </el-form-item>
-
-    <el-form-item label="备注">
-      <el-input
-        v-model="newFormInline.remark"
-        placeholder="请输入备注信息"
-        type="textarea"
-      />
-    </el-form-item>
-  </el-form>
-</template>
diff --git a/src/views/role/index.vue b/src/views/role/index.vue
deleted file mode 100644
index b5514db..0000000
--- a/src/views/role/index.vue
+++ /dev/null
@@ -1,344 +0,0 @@
-<script setup lang="ts">
-import { useRole } from "./utils/hook";
-import { ref, computed, nextTick, onMounted } from "vue";
-import { PureTableBar } from "@/components/RePureTableBar";
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import {
-  delay,
-  subBefore,
-  deviceDetection,
-  useResizeObserver
-} from "@pureadmin/utils";
-
-// import Database from "@iconify-icons/ri/database-2-line";
-// import More from "@iconify-icons/ep/more-filled";
-import Delete from "@iconify-icons/ep/delete";
-import EditPen from "@iconify-icons/ep/edit-pen";
-import Refresh from "@iconify-icons/ep/refresh";
-import Menu from "@iconify-icons/ep/menu";
-import AddFill from "@iconify-icons/ri/add-circle-line";
-import Close from "@iconify-icons/ep/close";
-import Check from "@iconify-icons/ep/check";
-
-defineOptions({
-  name: "SystemRole"
-});
-
-const iconClass = computed(() => {
-  return [
-    "w-[22px]",
-    "h-[22px]",
-    "flex",
-    "justify-center",
-    "items-center",
-    "outline-none",
-    "rounded-[4px]",
-    "cursor-pointer",
-    "transition-colors",
-    "hover:bg-[#0000000f]",
-    "dark:hover:bg-[#ffffff1f]",
-    "dark:hover:text-[#ffffffd9]"
-  ];
-});
-
-const treeRef = ref();
-const formRef = ref();
-const tableRef = ref();
-const contentRef = ref();
-const treeHeight = ref();
-
-const {
-  form,
-  isShow,
-  curRow,
-  loading,
-  columns,
-  rowStyle,
-  dataList,
-  treeData,
-  treeProps,
-  isLinkage,
-  pagination,
-  isExpandAll,
-  isSelectAll,
-  treeSearchValue,
-  // buttonClass,
-  onSearch,
-  resetForm,
-  openDialog,
-  handleMenu,
-  handleSave,
-  handleDelete,
-  filterMethod,
-  transformI18n,
-  onQueryChanged,
-  // handleDatabase,
-  handleSizeChange,
-  handleCurrentChange,
-  handleSelectionChange
-} = useRole(treeRef);
-
-onMounted(() => {
-  useResizeObserver(contentRef, async () => {
-    await nextTick();
-    delay(60).then(() => {
-      treeHeight.value = parseFloat(
-        subBefore(tableRef.value.getTableDoms().tableWrapper.style.height, "px")
-      );
-    });
-  });
-});
-</script>
-
-<template>
-  <div class="main">
-    <el-form
-      ref="formRef"
-      :inline="true"
-      :model="form"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
-    >
-      <el-form-item label="角色名称：" prop="name">
-        <el-input
-          v-model="form.name"
-          placeholder="请输入角色名称"
-          clearable
-          class="!w-[180px]"
-        />
-      </el-form-item>
-      <el-form-item label="角色标识：" prop="code">
-        <el-input
-          v-model="form.code"
-          placeholder="请输入角色标识"
-          clearable
-          class="!w-[180px]"
-        />
-      </el-form-item>
-      <el-form-item label="状态：" prop="status">
-        <el-select
-          v-model="form.status"
-          placeholder="请选择状态"
-          clearable
-          class="!w-[180px]"
-        >
-          <el-option label="已启用" value="1" />
-          <el-option label="已停用" value="0" />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button
-          type="primary"
-          :icon="useRenderIcon('ri:search-line')"
-          :loading="loading"
-          @click="onSearch"
-        >
-          搜索
-        </el-button>
-        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
-          重置
-        </el-button>
-      </el-form-item>
-    </el-form>
-
-    <div
-      ref="contentRef"
-      :class="['flex', deviceDetection() ? 'flex-wrap' : '']"
-    >
-      <PureTableBar
-        :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']"
-        style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)"
-        title="角色管理（仅演示，操作后不生效）"
-        :columns="columns"
-        @refresh="onSearch"
-      >
-        <template #buttons>
-          <el-button
-            type="primary"
-            :icon="useRenderIcon(AddFill)"
-            @click="openDialog()"
-          >
-            新增角色
-          </el-button>
-        </template>
-        <template v-slot="{ size, dynamicColumns }">
-          <pure-table
-            ref="tableRef"
-            align-whole="center"
-            showOverflowTooltip
-            table-layout="auto"
-            :loading="loading"
-            :size="size"
-            adaptive
-            :row-style="rowStyle"
-            :adaptiveConfig="{ offsetBottom: 108 }"
-            :data="dataList"
-            :columns="dynamicColumns"
-            :pagination="{ ...pagination, size }"
-            :header-cell-style="{
-              background: 'var(--el-fill-color-light)',
-              color: 'var(--el-text-color-primary)'
-            }"
-            @selection-change="handleSelectionChange"
-            @page-size-change="handleSizeChange"
-            @page-current-change="handleCurrentChange"
-          >
-            <template #operation="{ row }">
-              <el-button
-                class="reset-margin"
-                link
-                type="primary"
-                :size="size"
-                :icon="useRenderIcon(EditPen)"
-                @click="openDialog('修改', row)"
-              >
-                修改
-              </el-button>
-              <el-popconfirm
-                :title="`是否确认删除角色名称为${row.name}的这条数据`"
-                @confirm="handleDelete(row)"
-              >
-                <template #reference>
-                  <el-button
-                    class="reset-margin"
-                    link
-                    type="primary"
-                    :size="size"
-                    :icon="useRenderIcon(Delete)"
-                  >
-                    删除
-                  </el-button>
-                </template>
-              </el-popconfirm>
-              <el-button
-                class="reset-margin"
-                link
-                type="primary"
-                :size="size"
-                :icon="useRenderIcon(Menu)"
-                @click="handleMenu(row)"
-              >
-                权限
-              </el-button>
-              <!-- <el-dropdown>
-              <el-button
-                class="ml-3 mt-[2px]"
-                link
-                type="primary"
-                :size="size"
-                :icon="useRenderIcon(More)"
-              />
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <el-dropdown-item>
-                    <el-button
-                      :class="buttonClass"
-                      link
-                      type="primary"
-                      :size="size"
-                      :icon="useRenderIcon(Menu)"
-                      @click="handleMenu"
-                    >
-                      菜单权限
-                    </el-button>
-                  </el-dropdown-item>
-                  <el-dropdown-item>
-                    <el-button
-                      :class="buttonClass"
-                      link
-                      type="primary"
-                      :size="size"
-                      :icon="useRenderIcon(Database)"
-                      @click="handleDatabase"
-                    >
-                      数据权限
-                    </el-button>
-                  </el-dropdown-item>
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown> -->
-            </template>
-          </pure-table>
-        </template>
-      </PureTableBar>
-
-      <div
-        v-if="isShow"
-        class="!min-w-[calc(100vw-60vw-268px)] w-full mt-2 px-2 pb-2 bg-bg_color ml-2 overflow-auto"
-      >
-        <div class="flex justify-between w-full px-3 pt-5 pb-4">
-          <div class="flex">
-            <span :class="iconClass">
-              <IconifyIconOffline
-                v-tippy="{
-                  content: '关闭'
-                }"
-                class="dark:text-white"
-                width="18px"
-                height="18px"
-                :icon="Close"
-                @click="handleMenu"
-              />
-            </span>
-            <span :class="[iconClass, 'ml-2']">
-              <IconifyIconOffline
-                v-tippy="{
-                  content: '保存菜单权限'
-                }"
-                class="dark:text-white"
-                width="18px"
-                height="18px"
-                :icon="Check"
-                @click="handleSave"
-              />
-            </span>
-          </div>
-          <p class="font-bold truncate">
-            菜单权限
-            {{ `${curRow?.name ? `（${curRow.name}）` : ""}` }}
-          </p>
-        </div>
-        <el-input
-          v-model="treeSearchValue"
-          placeholder="请输入菜单进行搜索"
-          class="mb-1"
-          clearable
-          @input="onQueryChanged"
-        />
-        <div class="flex flex-wrap">
-          <el-checkbox v-model="isExpandAll" label="展开/折叠" />
-          <el-checkbox v-model="isSelectAll" label="全选/全不选" />
-          <el-checkbox v-model="isLinkage" label="父子联动" />
-        </div>
-        <el-tree-v2
-          ref="treeRef"
-          show-checkbox
-          :data="treeData"
-          :props="treeProps"
-          :height="treeHeight"
-          :check-strictly="!isLinkage"
-          :filter-method="filterMethod"
-        >
-          <template #default="{ node }">
-            <span>{{ transformI18n(node.label) }}</span>
-          </template>
-        </el-tree-v2>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-:deep(.el-dropdown-menu__item i) {
-  margin: 0;
-}
-
-.main-content {
-  margin: 24px 24px 0 !important;
-}
-
-.search-form {
-  :deep(.el-form-item) {
-    margin-bottom: 12px;
-  }
-}
-</style>
diff --git a/src/views/role/utils/hook.tsx b/src/views/role/utils/hook.tsx
deleted file mode 100644
index 84b5613..0000000
--- a/src/views/role/utils/hook.tsx
+++ /dev/null
@@ -1,318 +0,0 @@
-import dayjs from "dayjs";
-import editForm from "../form.vue";
-import { handleTree } from "@/utils/tree";
-import { message } from "@/utils/message";
-import { ElMessageBox } from "element-plus";
-import { usePublicHooks } from "../../hooks";
-import { addDialog } from "@/components/BaseDialog";
-import type { FormItemProps } from "../utils/types";
-import type { PaginationProps } from "@pureadmin/table";
-import { deviceDetection, getKeyList } from "@pureadmin/utils";
-import { getRoleList, getRoleMenu, getRoleMenuIds } from "@/api/v1/system";
-import { h, onMounted, reactive, type Ref, ref, toRaw, watch } from "vue";
-import { $t } from "@/plugins/i18n";
-
-export function useRole(treeRef: Ref) {
-  const form = reactive({
-    name: "",
-    code: "",
-    status: ""
-  });
-  const curRow = ref();
-  const formRef = ref();
-  const dataList = ref([]);
-  const treeIds = ref([]);
-  const treeData = ref([]);
-  const isShow = ref(false);
-  const loading = ref(true);
-  const isLinkage = ref(false);
-  const treeSearchValue = ref();
-  const switchLoadMap = ref({});
-  const isExpandAll = ref(false);
-  const isSelectAll = ref(false);
-  const { switchStyle } = usePublicHooks();
-  const treeProps = {
-    value: "id",
-    label: "title",
-    children: "children"
-  };
-  const pagination = reactive<PaginationProps>({
-    total: 0,
-    pageSize: 10,
-    currentPage: 1,
-    background: true
-  });
-  const columns: TableColumnList = [
-    {
-      label: "角色编号",
-      prop: "id"
-    },
-    {
-      label: "角色名称",
-      prop: "name"
-    },
-    {
-      label: "角色标识",
-      prop: "code"
-    },
-    {
-      label: "状态",
-      cellRenderer: scope => (
-        <el-switch
-          size={scope.props.size === "small" ? "small" : "default"}
-          loading={switchLoadMap.value[scope.index]?.loading}
-          v-model={scope.row.status}
-          active-value={1}
-          inactive-value={0}
-          active-text="已启用"
-          inactive-text="已停用"
-          inline-prompt
-          style={switchStyle.value}
-          onChange={() => onChange(scope as any)}
-        />
-      ),
-      minWidth: 90
-    },
-    {
-      label: "备注",
-      prop: "remark",
-      minWidth: 160
-    },
-    {
-      label: "创建时间",
-      prop: "createTime",
-      minWidth: 160,
-      formatter: ({ createTime }) =>
-        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
-    },
-    {
-      label: "操作",
-      fixed: "right",
-      width: 210,
-      slot: "operation"
-    }
-  ];
-  // const buttonClass = computed(() => {
-  //   return [
-  //     "!h-[20px]",
-  //     "reset-margin",
-  //     "!text-gray-500",
-  //     "dark:!text-white",
-  //     "dark:hover:!text-primary"
-  //   ];
-  // });
-
-  function onChange({ row, index }) {
-    ElMessageBox.confirm(
-      `确认要<strong>${
-        row.status === 0 ? "停用" : "启用"
-      }</strong><strong style='color:var(--el-color-primary)'>${
-        row.name
-      }</strong>吗?`,
-      "系统提示",
-      {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-        dangerouslyUseHTMLString: true,
-        draggable: true
-      }
-    )
-      .then(() => {
-        switchLoadMap.value[index] = Object.assign(
-          {},
-          switchLoadMap.value[index],
-          {
-            loading: true
-          }
-        );
-        setTimeout(() => {
-          switchLoadMap.value[index] = Object.assign(
-            {},
-            switchLoadMap.value[index],
-            {
-              loading: false
-            }
-          );
-          message(`已${row.status === 0 ? "停用" : "启用"}${row.name}`, {
-            type: "success"
-          });
-        }, 300);
-      })
-      .catch(() => {
-        row.status === 0 ? (row.status = 1) : (row.status = 0);
-      });
-  }
-
-  function handleDelete(row) {
-    message(`您删除了角色名称为${row.name}的这条数据`, { type: "success" });
-    onSearch();
-  }
-
-  function handleSizeChange(val: number) {
-    console.log(`${val} items per page`);
-  }
-
-  function handleCurrentChange(val: number) {
-    console.log(`current page: ${val}`);
-  }
-
-  function handleSelectionChange(val) {
-    console.log("handleSelectionChange", val);
-  }
-
-  async function onSearch() {
-    loading.value = true;
-    const { data } = await getRoleList(toRaw(form));
-    dataList.value = data.list;
-    pagination.total = data.total;
-    pagination.pageSize = data.pageSize;
-    pagination.currentPage = data.currentPage;
-
-    setTimeout(() => {
-      loading.value = false;
-    }, 500);
-  }
-
-  const resetForm = formEl => {
-    if (!formEl) return;
-    formEl.resetFields();
-    onSearch();
-  };
-
-  function openDialog(title = "新增", row?: FormItemProps) {
-    addDialog({
-      title: `${title}角色`,
-      props: {
-        formInline: {
-          name: row?.name ?? "",
-          code: row?.code ?? "",
-          remark: row?.remark ?? ""
-        }
-      },
-      width: "40%",
-      draggable: true,
-      fullscreen: deviceDetection(),
-      fullscreenIcon: true,
-      closeOnClickModal: false,
-      contentRenderer: () => h(editForm, { ref: formRef, formInline: null }),
-      beforeSure: (done, { options }) => {
-        const FormRef = formRef.value.getRef();
-        const curData = options.props.formInline as FormItemProps;
-
-        function chores() {
-          message(`您${title}了角色名称为${curData.name}的这条数据`, {
-            type: "success"
-          });
-          done(); // 关闭弹框
-          onSearch(); // 刷新表格数据
-        }
-
-        FormRef.validate(valid => {
-          if (valid) {
-            console.log("curData", curData);
-            // 表单规则校验通过
-            if (title === "新增") {
-              // 实际开发先调用新增接口，再进行下面操作
-              chores();
-            } else {
-              // 实际开发先调用修改接口，再进行下面操作
-              chores();
-            }
-          }
-        });
-      }
-    });
-  }
-
-  /** 菜单权限 */
-  async function handleMenu(row?: any) {
-    const { id } = row;
-    if (id) {
-      curRow.value = row;
-      isShow.value = true;
-      const { data } = await getRoleMenuIds({ id });
-      treeRef.value.setCheckedKeys(data);
-    } else {
-      curRow.value = null;
-      isShow.value = false;
-    }
-  }
-
-  /** 高亮当前权限选中行 */
-  function rowStyle({ row: { id } }) {
-    return {
-      cursor: "pointer",
-      background: id === curRow.value?.id ? "var(--el-fill-color-light)" : ""
-    };
-  }
-
-  /** 菜单权限-保存 */
-  function handleSave() {
-    const { id, name } = curRow.value;
-    // 根据用户 id 调用实际项目中菜单权限修改接口
-    console.log(id, treeRef.value.getCheckedKeys());
-    message(`角色名称为${name}的菜单权限修改成功`, {
-      type: "success"
-    });
-  }
-
-  /** 数据权限 可自行开发 */
-  // function handleDatabase() {}
-
-  const onQueryChanged = (query: string) => {
-    treeRef.value!.filter(query);
-  };
-
-  const filterMethod = (query: string, node) => {
-    return $t(node.title)!.includes(query);
-  };
-
-  onMounted(async () => {
-    onSearch();
-    const { data } = await getRoleMenu();
-    treeIds.value = getKeyList(data, "id");
-    treeData.value = handleTree(data);
-  });
-
-  watch(isExpandAll, val => {
-    val
-      ? treeRef.value.setExpandedKeys(treeIds.value)
-      : treeRef.value.setExpandedKeys([]);
-  });
-
-  watch(isSelectAll, val => {
-    val
-      ? treeRef.value.setCheckedKeys(treeIds.value)
-      : treeRef.value.setCheckedKeys([]);
-  });
-
-  return {
-    form,
-    isShow,
-    curRow,
-    loading,
-    columns,
-    rowStyle,
-    dataList,
-    treeData,
-    treeProps,
-    isLinkage,
-    pagination,
-    isExpandAll,
-    isSelectAll,
-    treeSearchValue,
-    onSearch,
-    resetForm,
-    openDialog,
-    handleMenu,
-    handleSave,
-    handleDelete,
-    filterMethod,
-    $t,
-    onQueryChanged,
-    handleSizeChange,
-    handleCurrentChange,
-    handleSelectionChange
-  };
-}
diff --git a/src/views/role/utils/rule.ts b/src/views/role/utils/rule.ts
deleted file mode 100644
index ea1dd19..0000000
--- a/src/views/role/utils/rule.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { reactive } from "vue";
-import type { FormRules } from "element-plus";
-
-/** 自定义表单规则校验 */
-export const formRules = reactive(<FormRules>{
-  name: [{ required: true, message: "角色名称为必填项", trigger: "blur" }],
-  code: [{ required: true, message: "角色标识为必填项", trigger: "blur" }]
-});
diff --git a/src/views/role/utils/types.ts b/src/views/role/utils/types.ts
deleted file mode 100644
index a17e900..0000000
--- a/src/views/role/utils/types.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// 虽然字段很少 但是抽离出来 后续有扩展字段需求就很方便了
-
-interface FormItemProps {
-  /** 角色名称 */
-  name: string;
-  /** 角色编号 */
-  code: string;
-  /** 备注 */
-  remark: string;
-}
-interface FormProps {
-  formInline: FormItemProps;
-}
-
-export type { FormItemProps, FormProps };
diff --git a/src/views/system/menu/form.vue b/src/views/system/menu/form.vue
index 89b82ec..07886e6 100644
--- a/src/views/system/menu/form.vue
+++ b/src/views/system/menu/form.vue
@@ -1,25 +1,18 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
+import { ref } from 'vue';
 import ReCol from '@/components/MyCol';
-import { formRules } from '@/views/system/menu/utils/rule';
+import { formRules } from '@/views/system/menu/utils/columns';
+import IconSelect from '@/components/SelectIcon/Select.vue';
+import Segmented from '@/components/Segmented';
+import { menuTypeOptions } from '@/enums';
 import { FormProps } from '@/views/system/menu/utils/types';
-import { IconSelect } from '@/components/ReIcon';
-import Segmented from '@/components/ReSegmented';
-import { menuTypeOptions, showLinkOptions } from '@/enums';
-import { userMenuIconStore } from '@/store/modules/menuIcon';
 
 const props = withDefaults(defineProps<FormProps>(), {
 	formInline: () => ({}),
 });
 
-const menuIconStore = userMenuIconStore();
 const ruleFormRef = ref();
 const newFormInline = ref(props.formInline);
-
-onMounted(() => {
-	menuIconStore.getMenuIconList();
-});
-
 defineExpose({ menuFormRef: ruleFormRef });
 </script>
 
@@ -81,7 +74,7 @@ defineExpose({ menuFormRef: ruleFormRef });
 
 			<re-col :sm="24" :value="12" :xs="24">
 				<el-form-item label="菜单图标" prop="icon">
-					<IconSelect v-model="newFormInline.icon" class="w-full" />
+					<IconSelect :form-inline="newFormInline" class="w-full" />
 				</el-form-item>
 			</re-col>
 
@@ -93,7 +86,9 @@ defineExpose({ menuFormRef: ruleFormRef });
 
 			<re-col :sm="24" :value="12" :xs="24">
 				<el-form-item label="是否显示">
-					<Segmented :modelValue="newFormInline.visible ? 0 : 1" :options="showLinkOptions" @change="({ option: { value } }) => (newFormInline.visible = value)" />
+					<el-switch v-model="newFormInline.visible" active-text="开启" inactive-text="隐藏" inline-prompt style="
+
+--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
 				</el-form-item>
 			</re-col>
 		</el-row>
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index cf2ef83..6fb55aa 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -2,25 +2,48 @@
 import { onMounted, ref } from 'vue';
 import { $t } from '@/plugins/i18n';
 import PureTableBar from '@/components/TableBar/src/bar';
-import { useRenderIcon } from '@/components/ReIcon/src/hooks';
 import Delete from '@iconify-icons/ep/delete';
 import EditPen from '@iconify-icons/ep/edit-pen';
 import Refresh from '@iconify-icons/ep/refresh';
 import AddFill from '@iconify-icons/ri/add-circle-line';
 import { handleDelete, onAdd, onSearch, onUpdate, resetForm } from '@/views/system/menu/utils/hook';
-import form from '@/views/role/form.vue';
+import form from '@/views/system/menu/form.vue';
 import PureTable from '@pureadmin/table';
-import { columns } from '@/views/system/menu/utils/rule';
+import { columns } from '@/views/system/menu/utils/columns';
 import { userRouterStore } from '@/store/modules/router';
-
-defineOptions({
-	name: 'SystemMenu',
-});
+import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
 
 const formRef = ref();
 const tableRef = ref();
 const routerStore = userRouterStore();
 
+/**
+ * * 修改菜单是否显示
+ * @param val
+ */
+const onchangeVisible = async (val: boolean) => {
+	const data = {
+		id: val.id,
+		visible: val.visible,
+		menuType: val.menuType,
+		title: val.title,
+		name: val.name,
+		path: val.path,
+	};
+	await routerStore.updateMenu(data);
+	await onSearch();
+};
+
+/**
+ * 表单重置
+ * @param formEl
+ */
+const resetForm = async (formEl: any) => {
+	if (!formEl) return;
+	formEl.resetFields();
+	await onSearch();
+};
+
 onMounted(() => {
 	onSearch();
 });
@@ -30,7 +53,7 @@ onMounted(() => {
 	<div class="main">
 		<el-form ref="formRef" :inline="true" :model="form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
 			<el-form-item label="菜单名称" prop="title">
-				<el-input v-model="form.title" class="!w-[180px]" clearable placeholder="输入菜单名称" />
+				<el-input v-model="routerStore.form.title" class="!w-[180px]" clearable placeholder="输入菜单名称" />
 			</el-form-item>
 			<el-form-item>
 				<el-button :icon="useRenderIcon('ri:search-line')" :loading="routerStore.loading" type="primary" @click="onSearch"> 搜索 </el-button>
@@ -53,10 +76,27 @@ onMounted(() => {
 					:size="size"
 					adaptive
 					align-whole="center"
+					border
+					highlight-current-row
 					row-key="id"
 					showOverflowTooltip
 					table-layout="auto"
 				>
+					<template #visible="{ row }">
+						<el-switch
+							v-model="row.visible"
+							active-text="显示"
+							class="ml-2"
+							inactive-text="隐藏"
+							inline-prompt
+							style="
+
+--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
+							width="60"
+							@update:modelValue="onchangeVisible(row)"
+						/>
+					</template>
+
 					<template #operation="{ row }">
 						<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> 修改 </el-button>
 						<el-button v-show="row.menuType !== 3" :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd(row.id)"> 新增 </el-button>
diff --git a/src/views/system/menu/utils/rule.tsx b/src/views/system/menu/utils/columns.tsx
similarity index 86%
rename from src/views/system/menu/utils/rule.tsx
rename to src/views/system/menu/utils/columns.tsx
index 39e1c08..9547737 100644
--- a/src/views/system/menu/utils/rule.tsx
+++ b/src/views/system/menu/utils/columns.tsx
@@ -1,9 +1,9 @@
 import { h, reactive } from 'vue';
 import type { FormRules } from 'element-plus';
-import { useRenderIcon } from '@/components/ReIcon/src/hooks';
 import { $t } from '@/plugins/i18n';
 import { isAllEmpty } from '@pureadmin/utils';
 import { getMenuType } from '@/views/system/menu/utils/hook';
+import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
 
 export const columns: TableColumnList = [
 	{
@@ -37,14 +37,8 @@ export const columns: TableColumnList = [
 		prop: 'component',
 		formatter: ({ path, component }) => (isAllEmpty(component) ? path : component),
 	},
-	{ label: '权限标识', prop: 'auths' },
 	{ label: '排序', prop: 'rank', width: 100 },
-	{
-		label: '隐藏',
-		prop: 'showLink',
-		formatter: ({ showLink }) => (showLink ? '否' : '是'),
-		width: 100,
-	},
+	{ label: '隐藏', prop: 'visible', slot: 'visible', width: 100 },
 	{ label: '操作', fixed: 'right', width: 210, slot: 'operation' },
 ];
 
diff --git a/src/views/system/menu/utils/hook.tsx b/src/views/system/menu/utils/hook.tsx
index bff42f2..20a9e36 100644
--- a/src/views/system/menu/utils/hook.tsx
+++ b/src/views/system/menu/utils/hook.tsx
@@ -29,16 +29,6 @@ export const getMenuType = (type, text = false) => {
 	}
 };
 
-/**
- * 表单重置
- * @param formEl
- */
-export const resetForm = async (formEl: any) => {
-	if (!formEl) return;
-	formEl.resetFields();
-	await onSearch();
-};
-
 /**
  * * 获取菜单数据
  */
@@ -93,14 +83,12 @@ export function onAdd(parentId: any = 0) {
 				if (!valid) return;
 				delete curData.higherMenuOptions;
 
-				console.log(curData);
-
-				// const result = await routerStore.addMenu(curData);
-				// // 刷新表格数据
-				// if (result) {
-				// 	done();
-				// 	await onSearch();
-				// }
+				const result = await routerStore.addMenu(curData);
+				// 刷新表格数据
+				if (result) {
+					done();
+					await onSearch();
+				}
 			});
 		},
 	});
@@ -125,7 +113,7 @@ export const onUpdate = (row?: FormItemProps) => {
 				rank: row?.rank,
 				icon: row?.icon,
 				frameSrc: row?.frameSrc,
-				visible: row?.visible,
+				visible: row.visible,
 			},
 		},
 		width: '45%',
@@ -142,13 +130,12 @@ export const onUpdate = (row?: FormItemProps) => {
 				delete curData.higherMenuOptions;
 
 				curData.id = row.id;
-				console.log(row);
-				// const result = await routerStore.updateMenu(curData);
-				// // 刷新表格数据
-				// if (result) {
-				// 	done();
-				// 	await onSearch();
-				// }
+				const result = await routerStore.updateMenu(curData);
+				// 刷新表格数据
+				if (result) {
+					done();
+					await onSearch();
+				}
 			});
 		},
 	});
diff --git a/src/views/system/menuIcon/index.vue b/src/views/system/menuIcon/index.vue
new file mode 100644
index 0000000..c29b265
--- /dev/null
+++ b/src/views/system/menuIcon/index.vue
@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { columns } from '@/views/system/menuIcon/utils/columns';
+import PureTableBar from '@/components/TableBar/src/bar';
+import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
+import AddFill from '@iconify-icons/ri/add-circle-line';
+import PureTable from '@pureadmin/table';
+import { onAdd, onDelete, onSearch, onUpdate } from '@/views/system/menuIcon/utils/hook';
+import Delete from '@iconify-icons/ep/delete';
+import EditPen from '@iconify-icons/ep/edit-pen';
+import Refresh from '@iconify-icons/ep/refresh';
+import { selectUserinfo } from '@/components/Table/Userinfo/columns';
+import { $t } from '@/plugins/i18n';
+import { useMenuIconStore } from '@/store/modules/menuIcon';
+
+const tableRef = ref();
+const formRef = ref();
+const menuIconStore = useMenuIconStore();
+
+const resetForm = async formEl => {
+	if (!formEl) return;
+	formEl.resetFields();
+	await onSearch();
+};
+
+onMounted(() => {
+	onSearch();
+});
+</script>
+
+<template>
+	<div class="main">
+		<el-form ref="formRef" :inline="true" :model="menuIconStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
+			<el-form-item :label="$t('menuIcon_iconName')" prop="iconName">
+				<el-input v-model="menuIconStore.form.iconName" :placeholder="`${$t('input')} ${$t('iconName')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+			<el-form-item>
+				<el-button :icon="useRenderIcon('ri:search-line')" :loading="menuIconStore.loading" type="primary" @click="onSearch"> {{ $t('search') }} </el-button>
+				<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)"> {{ $t('buttons.reset') }}</el-button>
+			</el-form-item>
+		</el-form>
+
+		<PureTableBar :columns="columns" title="系统菜单图标" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
+			<template #buttons>
+				<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> 添加系统菜单图标</el-button>
+			</template>
+
+			<template v-slot="{ size, dynamicColumns }">
+				<pure-table
+					ref="tableRef"
+					:adaptiveConfig="{ offsetBottom: 45 }"
+					:columns="dynamicColumns"
+					:data="menuIconStore.datalist"
+					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
+					:loading="menuIconStore.loading"
+					:size="size"
+					adaptive
+					align-whole="center"
+					border
+					highlight-current-row
+					row-key="id"
+					showOverflowTooltip
+					table-layout="auto"
+				>
+					<template #iconName="{ row }">
+						<div class="flex justify-center">
+							<component :is="useRenderIcon(row.iconName)" class="flex justify-center" style="font-size: 30px" />
+						</div>
+					</template>
+
+					<template #createUser="{ row }">
+						<el-button link type="primary" @click="selectUserinfo(row.createUser)">{{ $t('table.createUser') }} </el-button>
+					</template>
+
+					<template #updateUser="{ row }">
+						<el-button link type="primary" @click="selectUserinfo(row.updateUser)">{{ $t('table.updateUser') }} </el-button>
+					</template>
+
+					<template #operation="{ row }">
+						<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> {{ $t('modify') }} </el-button>
+						<el-button :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd"> {{ $t('add_new') }} </el-button>
+						<el-popconfirm :title="`是否确认删除 ${row.iconName}数据`" @confirm="onDelete(row)">
+							<template #reference>
+								<el-button :icon="useRenderIcon(Delete)" :size="size" class="reset-margin" link type="primary">
+									{{ $t('delete') }}
+								</el-button>
+							</template>
+						</el-popconfirm>
+					</template>
+				</pure-table>
+			</template>
+		</PureTableBar>
+	</div>
+</template>
diff --git a/src/views/system/menuIcon/menu-icon-dialog.vue b/src/views/system/menuIcon/menu-icon-dialog.vue
new file mode 100644
index 0000000..c3abf30
--- /dev/null
+++ b/src/views/system/menuIcon/menu-icon-dialog.vue
@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { FormInstance } from 'element-plus';
+import { rules } from '@/views/system/menuIcon/utils/columns';
+import { FormProps } from '@/views/system/menuIcon/utils/types';
+import { $t } from '@/plugins/i18n';
+import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
+
+const props = withDefaults(defineProps<FormProps>(), {
+	formInline: () => ({
+		// icon 名称
+		iconName: undefined,
+	}),
+});
+
+const formRef = ref<FormInstance>();
+const form = ref(props.formInline);
+
+defineExpose({ formRef });
+</script>
+
+<template>
+	<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
+		<el-form-item :label="$t('menuIcon_iconName')" prop="iconName">
+			<el-input v-model="form.iconName" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<el-form-item :label="$t('menuIcon_preview')">
+			<div class="flex justify-center">
+				<component :is="useRenderIcon(form.iconName)" class="flex justify-center" style="font-size: 30px" />
+			</div>
+		</el-form-item>
+	</el-form>
+</template>
diff --git a/src/views/system/menuIcon/utils/columns.ts b/src/views/system/menuIcon/utils/columns.ts
new file mode 100644
index 0000000..e0eef3a
--- /dev/null
+++ b/src/views/system/menuIcon/utils/columns.ts
@@ -0,0 +1,22 @@
+import { reactive } from 'vue';
+import { $t } from '@/plugins/i18n';
+
+// 表格列
+export const columns: TableColumnList = [
+	{ type: 'index', index: (index: number) => index + 1 },
+	{ type: 'selection', align: 'left' },
+	{ label: $t('id'), prop: 'id' },
+	// icon 名称
+	{ label: $t('menuIcon_iconName'), prop: 'iconName', slot: 'iconName' },
+	{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true },
+	{ label: $t('table.createTime'), prop: 'createTime', sortable: true },
+	{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser' },
+	{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser' },
+	{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },
+];
+
+// 添加规则
+export const rules = reactive({
+	// icon 名称
+	iconName: [{ required: true, message: `${$t('input')}${$t('menuIcon_iconName')}`, trigger: 'blur' }],
+});
diff --git a/src/views/system/menuIcon/utils/hook.ts b/src/views/system/menuIcon/utils/hook.ts
new file mode 100644
index 0000000..55266ae
--- /dev/null
+++ b/src/views/system/menuIcon/utils/hook.ts
@@ -0,0 +1,103 @@
+import { deviceDetection } from '@pureadmin/utils';
+import { addDialog } from '@/components/BaseDialog/index';
+import MenuIconDialog from '@/views/system/menuIcon/menu-icon-dialog.vue';
+import { useMenuIconStore } from '@/store/modules/menuIcon';
+import { h, ref } from 'vue';
+import { messageBox } from '@/utils/message';
+import type { FormItemProps } from '@/views/system/menuIcon/utils/types';
+import { $t } from '@/plugins/i18n';
+
+export const formRef = ref();
+const menuIconStore = useMenuIconStore();
+
+/**
+ * * 搜索初始化系统菜单图标
+ */
+export async function onSearch() {
+	menuIconStore.loading = true;
+	await menuIconStore.getMenuIconList();
+	menuIconStore.loading = false;
+}
+
+/**
+ * * 添加${系统菜单图标}
+ */
+export function onAdd() {
+	addDialog({
+		title: `${$t('add_new')} ${$t('menuIcon')}`,
+		width: '30%',
+		props: {
+			formInline: {
+				iconName: undefined,
+			},
+		},
+		draggable: true,
+		fullscreen: deviceDetection(),
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(MenuIconDialog, { ref: formRef }),
+		beforeSure: (done, { options }) => {
+			const form = options.props.formInline as FormItemProps;
+			formRef.value.formRef.validate(async (valid: any) => {
+				if (!valid) return;
+
+				const result = await menuIconStore.addMenuIcon(form);
+				if (!result) return;
+				done();
+				await onSearch();
+			});
+		},
+	});
+}
+
+/**
+ * * 更新系统菜单图标
+ * @param row
+ */
+export function onUpdate(row: any) {
+	addDialog({
+		title: `${$t('modify')} ${$t('menuIcon')}`,
+		width: '30%',
+		props: {
+			formInline: {
+				iconName: row.iconName,
+			},
+		},
+		draggable: true,
+		fullscreen: deviceDetection(),
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(MenuIconDialog, { ref: formRef }),
+		beforeSure: (done, { options }) => {
+			const form = options.props.formInline as FormItemProps;
+			formRef.value.formRef.validate(async (valid: any) => {
+				if (!valid) return;
+
+				const result = await menuIconStore.updateMenuIcon({ ...form, id: row.id });
+				if (!result) return;
+				done();
+				await onSearch();
+			});
+		},
+	});
+}
+
+/**
+ * * 删除系统菜单图标
+ */
+export const onDelete = async (row: any) => {
+	const id = row.id;
+
+	// 是否确认删除
+	const result = await messageBox({
+		title: $t('confirm_delete'),
+		showMessage: false,
+		confirmMessage: undefined,
+		cancelMessage: $t('cancel_delete'),
+	});
+	if (!result) return;
+
+	// 删除数据
+	await menuIconStore.deleteMenuIcon([id]);
+	await onSearch();
+};
diff --git a/src/views/system/menuIcon/utils/types.ts b/src/views/system/menuIcon/utils/types.ts
new file mode 100644
index 0000000..2d84009
--- /dev/null
+++ b/src/views/system/menuIcon/utils/types.ts
@@ -0,0 +1,10 @@
+// 添加或者修改表单元素
+export interface FormItemProps {
+	// icon 名称
+	iconName: string;
+}
+
+// 添加或修改表单Props
+export interface FormProps {
+	formInline: FormItemProps;
+}
diff --git a/src/views/user/form/index.vue b/src/views/user/form/index.vue
deleted file mode 100644
index 0a17b1b..0000000
--- a/src/views/user/form/index.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-import ReCol from '@/components/MyCol';
-import { formRules } from '../utils/rule';
-import { FormProps } from '../utils/types';
-import { usePublicHooks } from '../../hooks';
-
-const props = withDefaults(defineProps<FormProps>(), {
-	formInline: () => ({
-		title: '新增',
-		higherDeptOptions: [],
-		parentId: 0,
-		nickname: '',
-		username: '',
-		password: '',
-		phone: '',
-		email: '',
-		sex: '',
-		status: 1,
-		remark: '',
-	}),
-});
-
-const sexOptions = [
-	{
-		value: 0,
-		label: '男',
-	},
-	{
-		value: 1,
-		label: '女',
-	},
-];
-const ruleFormRef = ref();
-const { switchStyle } = usePublicHooks();
-const newFormInline = ref(props.formInline);
-
-function getRef() {
-	return ruleFormRef.value;
-}
-
-defineExpose({ getRef });
-</script>
-
-<template>
-	<el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="82px">
-		<el-row :gutter="30">
-			<re-col :sm="24" :value="12" :xs="24">
-				<el-form-item label="用户昵称" prop="nickname">
-					<el-input v-model="newFormInline.nickname" clearable placeholder="请输入用户昵称" />
-				</el-form-item>
-			</re-col>
-			<re-col :sm="24" :value="12" :xs="24">
-				<el-form-item label="用户名称" prop="username">
-					<el-input v-model="newFormInline.username" clearable placeholder="请输入用户名称" />
-				</el-form-item>
-			</re-col>
-
-			<re-col v-if="newFormInline.title === '新增'" :sm="24" :value="12" :xs="24">
-				<el-form-item label="用户密码" prop="password">
-					<el-input v-model="newFormInline.password" clearable placeholder="请输入用户密码" />
-				</el-form-item>
-			</re-col>
-			<re-col :sm="24" :value="12" :xs="24">
-				<el-form-item label="手机号" prop="phone">
-					<el-input v-model="newFormInline.phone" clearable placeholder="请输入手机号" />
-				</el-form-item>
-			</re-col>
-
-			<re-col :sm="24" :value="12" :xs="24">
-				<el-form-item label="邮箱" prop="email">
-					<el-input v-model="newFormInline.email" clearable placeholder="请输入邮箱" />
-				</el-form-item>
-			</re-col>
-			<re-col :sm="24" :value="12" :xs="24">
-				<el-form-item label="用户性别">
-					<el-select v-model="newFormInline.sex" class="w-full" clearable placeholder="请选择用户性别">
-						<el-option v-for="(item, index) in sexOptions" :key="index" :label="item.label" :value="item.value" />
-					</el-select>
-				</el-form-item>
-			</re-col>
-
-			<re-col :sm="24" :value="12" :xs="24">
-				<el-form-item label="归属部门">
-					<el-cascader
-						v-model="newFormInline.parentId"
-						:options="newFormInline.higherDeptOptions"
-						:props="{
-							value: 'id',
-							label: 'name',
-							emitPath: false,
-							checkStrictly: true,
-						}"
-						class="w-full"
-						clearable
-						filterable
-						placeholder="请选择归属部门"
-					>
-						<template #default="{ node, data }">
-							<span>{{ data.name }}</span>
-							<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
-						</template>
-					</el-cascader>
-				</el-form-item>
-			</re-col>
-			<re-col v-if="newFormInline.title === '新增'" :sm="24" :value="12" :xs="24">
-				<el-form-item label="用户状态">
-					<el-switch v-model="newFormInline.status" :active-value="1" :inactive-value="0" :style="switchStyle" active-text="启用" inactive-text="停用" inline-prompt />
-				</el-form-item>
-			</re-col>
-
-			<re-col>
-				<el-form-item label="备注">
-					<el-input v-model="newFormInline.remark" placeholder="请输入备注信息" type="textarea" />
-				</el-form-item>
-			</re-col>
-		</el-row>
-	</el-form>
-</template>
diff --git a/src/views/user/form/role.vue b/src/views/user/form/role.vue
deleted file mode 100644
index d3448f6..0000000
--- a/src/views/user/form/role.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-import ReCol from '@/components/MyCol';
-import { RoleFormProps } from '../utils/types';
-
-const props = withDefaults(defineProps<RoleFormProps>(), {
-	formInline: () => ({
-		username: '',
-		nickname: '',
-		roleOptions: [],
-		ids: [],
-	}),
-});
-
-const newFormInline = ref(props.formInline);
-</script>
-
-<template>
-	<el-form :model="newFormInline">
-		<el-row :gutter="30">
-			<!-- <re-col>
-        <el-form-item label="用户名称" prop="username">
-          <el-input disabled v-model="newFormInline.username" />
-        </el-form-item>
-      </re-col> -->
-			<re-col>
-				<el-form-item label="用户昵称" prop="nickname">
-					<el-input v-model="newFormInline.nickname" disabled />
-				</el-form-item>
-			</re-col>
-			<re-col>
-				<el-form-item label="角色列表" prop="ids">
-					<el-select v-model="newFormInline.ids" class="w-full" clearable multiple placeholder="请选择">
-						<el-option v-for="(item, index) in newFormInline.roleOptions" :key="index" :label="item.name" :value="item.id">
-							{{ item.name }}
-						</el-option>
-					</el-select>
-				</el-form-item>
-			</re-col>
-		</el-row>
-	</el-form>
-</template>
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
deleted file mode 100644
index 3bbce73..0000000
--- a/src/views/user/index.vue
+++ /dev/null
@@ -1,161 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-import tree from './tree.vue';
-import { useUser } from './utils/hook';
-import { PureTableBar } from '@/components/RePureTableBar';
-import { useRenderIcon } from '@/components/ReIcon/src/hooks';
-
-import Upload from '@iconify-icons/ri/upload-line';
-import Role from '@iconify-icons/ri/admin-line';
-import Password from '@iconify-icons/ri/lock-password-line';
-import More from '@iconify-icons/ep/more-filled';
-import Delete from '@iconify-icons/ep/delete';
-import EditPen from '@iconify-icons/ep/edit-pen';
-import Refresh from '@iconify-icons/ep/refresh';
-import AddFill from '@iconify-icons/ri/add-circle-line';
-
-defineOptions({
-	name: 'SystemUser',
-});
-
-const treeRef = ref();
-const formRef = ref();
-const tableRef = ref();
-
-const {
-	form,
-	loading,
-	columns,
-	dataList,
-	treeData,
-	treeLoading,
-	selectedNum,
-	pagination,
-	buttonClass,
-	deviceDetection,
-	onSearch,
-	resetForm,
-	onbatchDel,
-	openDialog,
-	onTreeSelect,
-	handleUpdate,
-	handleDelete,
-	handleUpload,
-	handleReset,
-	handleRole,
-	handleSizeChange,
-	onSelectionCancel,
-	handleCurrentChange,
-	handleSelectionChange,
-} = useUser(tableRef, treeRef);
-</script>
-
-<template>
-	<div :class="['flex', 'justify-between', deviceDetection() && 'flex-wrap']">
-		<tree ref="treeRef" :class="['mr-2', deviceDetection() ? 'w-full' : 'min-w-[200px]']" :treeData="treeData" :treeLoading="treeLoading" @tree-select="onTreeSelect" />
-		<div :class="[deviceDetection() ? ['w-full', 'mt-2'] : 'w-[calc(100%-200px)]']">
-			<el-form ref="formRef" :inline="true" :model="form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
-				<el-form-item label="用户名称：" prop="username">
-					<el-input v-model="form.username" class="!w-[180px]" clearable placeholder="请输入用户名称" />
-				</el-form-item>
-				<el-form-item label="手机号码：" prop="phone">
-					<el-input v-model="form.phone" class="!w-[180px]" clearable placeholder="请输入手机号码" />
-				</el-form-item>
-				<el-form-item label="状态：" prop="status">
-					<el-select v-model="form.status" class="!w-[180px]" clearable placeholder="请选择">
-						<el-option label="已开启" value="1" />
-						<el-option label="已关闭" value="0" />
-					</el-select>
-				</el-form-item>
-				<el-form-item>
-					<el-button :icon="useRenderIcon('ri:search-line')" :loading="loading" type="primary" @click="onSearch"> 搜索 </el-button>
-					<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)"> 重置 </el-button>
-				</el-form-item>
-			</el-form>
-
-			<PureTableBar :columns="columns" title="用户管理（仅演示，操作后不生效）" @refresh="onSearch">
-				<template #buttons>
-					<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="openDialog()"> 新增用户 </el-button>
-				</template>
-				<template v-slot="{ size, dynamicColumns }">
-					<div v-if="selectedNum > 0" v-motion-fade class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center">
-						<div class="flex-auto">
-							<span class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]" style="font-size: var(--el-font-size-base)"> 已选 {{ selectedNum }} 项 </span>
-							<el-button text type="primary" @click="onSelectionCancel"> 取消选择 </el-button>
-						</div>
-						<el-popconfirm title="是否确认删除?" @confirm="onbatchDel">
-							<template #reference>
-								<el-button class="mr-1" text type="danger"> 批量删除 </el-button>
-							</template>
-						</el-popconfirm>
-					</div>
-					<pure-table
-						ref="tableRef"
-						:adaptiveConfig="{ offsetBottom: 108 }"
-						:columns="dynamicColumns"
-						:data="dataList"
-						:header-cell-style="{
-							background: 'var(--el-fill-color-light)',
-							color: 'var(--el-text-color-primary)',
-						}"
-						:loading="loading"
-						:pagination="{ ...pagination, size }"
-						:size="size"
-						adaptive
-						align-whole="center"
-						row-key="id"
-						table-layout="auto"
-						@selection-change="handleSelectionChange"
-						@page-size-change="handleSizeChange"
-						@page-current-change="handleCurrentChange"
-					>
-						<template #operation="{ row }">
-							<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="openDialog('修改', row)"> 修改 </el-button>
-							<el-popconfirm :title="`是否确认删除用户编号为${row.id}的这条数据`" @confirm="handleDelete(row)">
-								<template #reference>
-									<el-button :icon="useRenderIcon(Delete)" :size="size" class="reset-margin" link type="primary"> 删除 </el-button>
-								</template>
-							</el-popconfirm>
-							<el-dropdown>
-								<el-button :icon="useRenderIcon(More)" :size="size" class="ml-3 mt-[2px]" link type="primary" @click="handleUpdate(row)" />
-								<template #dropdown>
-									<el-dropdown-menu>
-										<el-dropdown-item>
-											<el-button :class="buttonClass" :icon="useRenderIcon(Upload)" :size="size" link type="primary" @click="handleUpload(row)"> 上传头像 </el-button>
-										</el-dropdown-item>
-										<el-dropdown-item>
-											<el-button :class="buttonClass" :icon="useRenderIcon(Password)" :size="size" link type="primary" @click="handleReset(row)"> 重置密码 </el-button>
-										</el-dropdown-item>
-										<el-dropdown-item>
-											<el-button :class="buttonClass" :icon="useRenderIcon(Role)" :size="size" link type="primary" @click="handleRole(row)"> 分配角色 </el-button>
-										</el-dropdown-item>
-									</el-dropdown-menu>
-								</template>
-							</el-dropdown>
-						</template>
-					</pure-table>
-				</template>
-			</PureTableBar>
-		</div>
-	</div>
-</template>
-
-<style lang="scss" scoped>
-:deep(.el-dropdown-menu__item i) {
-	margin: 0;
-}
-
-:deep(.el-button:focus-visible) {
-	outline: none;
-}
-
-.main-content {
-	margin: 24px 24px 0 !important;
-}
-
-.search-form {
-	:deep(.el-form-item) {
-		margin-bottom: 12px;
-	}
-}
-</style>
diff --git a/src/views/user/svg/expand.svg b/src/views/user/svg/expand.svg
deleted file mode 100644
index bb41c35..0000000
--- a/src/views/user/svg/expand.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M22 4V2H2v2h9v14.17l-5.5-5.5-1.42 1.41L12 22l7.92-7.92-1.42-1.41-5.5 5.5V4z"/></svg>
\ No newline at end of file
diff --git a/src/views/user/svg/unexpand.svg b/src/views/user/svg/unexpand.svg
deleted file mode 100644
index 04b3e9d..0000000
--- a/src/views/user/svg/unexpand.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M4 2H2v20h2v-9h14.17l-5.5 5.5 1.41 1.42L22 12l-7.92-7.92-1.41 1.42 5.5 5.5H4z"/></svg>
\ No newline at end of file
diff --git a/src/views/user/tree.vue b/src/views/user/tree.vue
deleted file mode 100644
index b68c443..0000000
--- a/src/views/user/tree.vue
+++ /dev/null
@@ -1,156 +0,0 @@
-<script lang="ts" setup>
-import { useRenderIcon } from '@/components/ReIcon/src/hooks';
-import { computed, getCurrentInstance, ref, watch } from 'vue';
-
-import Dept from '@iconify-icons/ri/git-branch-line';
-// import Reset from "@iconify-icons/ri/restart-line";
-import More2Fill from '@iconify-icons/ri/more-2-fill';
-import OfficeBuilding from '@iconify-icons/ep/office-building';
-import LocationCompany from '@iconify-icons/ep/add-location';
-import ExpandIcon from './svg/expand.svg?component';
-import UnExpandIcon from './svg/unexpand.svg?component';
-
-interface Tree {
-	id: number;
-	name: string;
-	highlight?: boolean;
-	children?: Tree[];
-}
-
-defineProps({
-	treeLoading: Boolean,
-	treeData: Array,
-});
-
-const emit = defineEmits(['tree-select']);
-
-const treeRef = ref();
-const isExpand = ref(true);
-const searchValue = ref('');
-const highlightMap = ref({});
-const { proxy } = getCurrentInstance();
-const defaultProps = {
-	children: 'children',
-	label: 'name',
-};
-const buttonClass = computed(() => {
-	return ['!h-[20px]', '!text-sm', 'reset-margin', '!text-[var(--el-text-color-regular)]', 'dark:!text-white', 'dark:hover:!text-primary'];
-});
-
-const filterNode = (value: string, data: Tree) => {
-	if (!value) return true;
-	return data.name.includes(value);
-};
-
-function nodeClick(value) {
-	const nodeId = value.$treeNodeId;
-	highlightMap.value[nodeId] = highlightMap.value[nodeId]?.highlight
-		? Object.assign({ id: nodeId }, highlightMap.value[nodeId], {
-				highlight: false,
-			})
-		: Object.assign({ id: nodeId }, highlightMap.value[nodeId], {
-				highlight: true,
-			});
-	Object.values(highlightMap.value).forEach((v: Tree) => {
-		if (v.id !== nodeId) {
-			v.highlight = false;
-		}
-	});
-	emit('tree-select', highlightMap.value[nodeId]?.highlight ? Object.assign({ ...value, selected: true }) : Object.assign({ ...value, selected: false }));
-}
-
-function toggleRowExpansionAll(status) {
-	isExpand.value = status;
-	const nodes = (proxy.$refs['treeRef'] as any).store._getAllNodes();
-	for (let i = 0; i < nodes.length; i++) {
-		nodes[i].expanded = status;
-	}
-}
-
-/** 重置部门树状态（选中状态、搜索框值、树初始化） */
-function onTreeReset() {
-	highlightMap.value = {};
-	searchValue.value = '';
-	toggleRowExpansionAll(true);
-}
-
-watch(searchValue, val => {
-	treeRef.value!.filter(val);
-});
-
-defineExpose({ onTreeReset });
-</script>
-
-<template>
-	<div v-loading="treeLoading" :style="{ minHeight: `calc(100vh - 141px)` }" class="h-full bg-bg_color overflow-hidden relative">
-		<div class="flex items-center h-[34px]">
-			<el-input v-model="searchValue" class="ml-2" clearable placeholder="请输入部门名称" size="small">
-				<template #suffix>
-					<el-icon class="el-input__icon">
-						<IconifyIconOffline v-show="searchValue.length === 0" icon="ri:search-line" />
-					</el-icon>
-				</template>
-			</el-input>
-			<el-dropdown :hide-on-click="false">
-				<IconifyIconOffline :icon="More2Fill" class="w-[28px] cursor-pointer" width="18px" />
-				<template #dropdown>
-					<el-dropdown-menu>
-						<el-dropdown-item>
-							<el-button :class="buttonClass" :icon="useRenderIcon(isExpand ? ExpandIcon : UnExpandIcon)" link type="primary" @click="toggleRowExpansionAll(isExpand ? false : true)">
-								{{ isExpand ? '折叠全部' : '展开全部' }}
-							</el-button>
-						</el-dropdown-item>
-						<!-- <el-dropdown-item>
-              <el-button
-                :class="buttonClass"
-                link
-                type="primary"
-                :icon="useRenderIcon(Reset)"
-                @click="onTreeReset"
-              >
-                重置状态
-              </el-button>
-            </el-dropdown-item> -->
-					</el-dropdown-menu>
-				</template>
-			</el-dropdown>
-		</div>
-		<el-divider />
-		<el-scrollbar height="calc(90vh - 88px)">
-			<el-tree ref="treeRef" :data="treeData" :expand-on-click-node="false" :filter-node-method="filterNode" :props="defaultProps" default-expand-all node-key="id" size="small" @node-click="nodeClick">
-				<template #default="{ node, data }">
-					<div
-						:class="[
-							'rounded',
-							'flex',
-							'items-center',
-							'select-none',
-							'hover:text-primary',
-							searchValue.trim().length > 0 && node.label.includes(searchValue) && 'text-red-500',
-							highlightMap[node.id]?.highlight ? 'dark:text-primary' : '',
-						]"
-						:style="{
-							color: highlightMap[node.id]?.highlight ? 'var(--el-color-primary)' : '',
-							background: highlightMap[node.id]?.highlight ? 'var(--el-color-primary-light-7)' : 'transparent',
-						}"
-					>
-						<IconifyIconOffline :icon="data.type === 1 ? OfficeBuilding : data.type === 2 ? LocationCompany : Dept" />
-						<span :title="node.label" class="!w-[120px] !truncate">
-							{{ node.label }}
-						</span>
-					</div>
-				</template>
-			</el-tree>
-		</el-scrollbar>
-	</div>
-</template>
-
-<style lang="scss" scoped>
-:deep(.el-divider) {
-	margin: 0;
-}
-
-:deep(.el-tree) {
-	--el-tree-node-hover-bg-color: transparent;
-}
-</style>
diff --git a/src/views/user/utils/hook.tsx b/src/views/user/utils/hook.tsx
deleted file mode 100644
index b977ec9..0000000
--- a/src/views/user/utils/hook.tsx
+++ /dev/null
@@ -1,456 +0,0 @@
-import './reset.css';
-import dayjs from 'dayjs';
-import roleForm from '../form/role.vue';
-import editForm from '../form/index.vue';
-import { zxcvbn } from '@zxcvbn-ts/core';
-import { handleTree } from '@/utils/tree';
-import { message } from '@/utils/message';
-import userAvatar from '@/assets/user.jpg';
-import { usePublicHooks } from '../../hooks';
-import { addDialog } from '@/components/BaseDialog';
-import type { PaginationProps } from '@pureadmin/table';
-import ReCropperPreview from '@/components/ReCropperPreview';
-import type { FormItemProps, RoleFormItemProps } from '../utils/types';
-import { deviceDetection, getKeyList, hideTextAtIndex, isAllEmpty } from '@pureadmin/utils';
-import { getAllRoleList, getDeptList, getRoleIds, getUserList } from '@/api/v1/system';
-import { ElForm, ElFormItem, ElInput, ElMessageBox, ElProgress } from 'element-plus';
-import { computed, h, onMounted, reactive, ref, type Ref, toRaw, watch } from 'vue';
-
-export function useUser(tableRef: Ref, treeRef: Ref) {
-	const form = reactive({
-		// 左侧部门树的id
-		deptId: '',
-		username: '',
-		phone: '',
-		status: '',
-	});
-	const formRef = ref();
-	const ruleFormRef = ref();
-	const dataList = ref([]);
-	const loading = ref(true);
-	// 上传头像信息
-	const avatarInfo = ref();
-	const switchLoadMap = ref({});
-	const { switchStyle } = usePublicHooks();
-	const higherDeptOptions = ref();
-	const treeData = ref([]);
-	const treeLoading = ref(true);
-	const selectedNum = ref(0);
-	const pagination = reactive<PaginationProps>({
-		total: 0,
-		pageSize: 10,
-		currentPage: 1,
-		background: true,
-	});
-	const columns: TableColumnList = [
-		{
-			label: '勾选列', // 如果需要表格多选，此处label必须设置
-			type: 'selection',
-			fixed: 'left',
-			reserveSelection: true, // 数据刷新后保留选项
-		},
-		{
-			label: '用户编号',
-			prop: 'id',
-			width: 90,
-		},
-		{
-			label: '用户头像',
-			prop: 'avatar',
-			cellRenderer: ({ row }) => (
-				<el-image fit='cover' preview-teleported={true} src={row.avatar || userAvatar} preview-src-list={Array.of(row.avatar || userAvatar)} class='w-[24px] h-[24px] rounded-full align-middle' />
-			),
-			width: 90,
-		},
-		{
-			label: '用户名称',
-			prop: 'username',
-			minWidth: 130,
-		},
-		{
-			label: '用户昵称',
-			prop: 'nickname',
-			minWidth: 130,
-		},
-		{
-			label: '性别',
-			prop: 'sex',
-			minWidth: 90,
-			cellRenderer: ({ row, props }) => (
-				<el-tag size={props.size} type={row.sex === 1 ? 'danger' : null} effect='plain'>
-					{row.sex === 1 ? '女' : '男'}
-				</el-tag>
-			),
-		},
-		{
-			label: '部门',
-			prop: 'dept.name',
-			minWidth: 90,
-		},
-		{
-			label: '手机号码',
-			prop: 'phone',
-			minWidth: 90,
-			formatter: ({ phone }) => hideTextAtIndex(phone, { start: 3, end: 6 }),
-		},
-		{
-			label: '状态',
-			prop: 'status',
-			minWidth: 90,
-			cellRenderer: scope => (
-				<el-switch
-					size={scope.props.size === 'small' ? 'small' : 'default'}
-					loading={switchLoadMap.value[scope.index]?.loading}
-					v-model={scope.row.status}
-					active-value={1}
-					inactive-value={0}
-					active-text='已启用'
-					inactive-text='已停用'
-					inline-prompt
-					style={switchStyle.value}
-					onChange={() => onChange(scope as any)}
-				/>
-			),
-		},
-		{
-			label: '创建时间',
-			minWidth: 90,
-			prop: 'createTime',
-			formatter: ({ createTime }) => dayjs(createTime).format('YYYY-MM-DD HH:mm:ss'),
-		},
-		{
-			label: '操作',
-			fixed: 'right',
-			width: 180,
-			slot: 'operation',
-		},
-	];
-	const buttonClass = computed(() => {
-		return ['!h-[20px]', 'reset-margin', '!text-gray-500', 'dark:!text-white', 'dark:hover:!text-primary'];
-	});
-	// 重置的新密码
-	const pwdForm = reactive({
-		newPwd: '',
-	});
-	const pwdProgress = [
-		{ color: '#e74242', text: '非常弱' },
-		{ color: '#EFBD47', text: '弱' },
-		{ color: '#ffa500', text: '一般' },
-		{ color: '#1bbf1b', text: '强' },
-		{ color: '#008000', text: '非常强' },
-	];
-	// 当前密码强度（0-4）
-	const curScore = ref();
-	const roleOptions = ref([]);
-
-	function onChange({ row, index }) {
-		ElMessageBox.confirm(`确认要<strong>${row.status === 0 ? '停用' : '启用'}</strong><strong style='color:var(--el-color-primary)'>${row.username}</strong>用户吗?`, '系统提示', {
-			confirmButtonText: '确定',
-			cancelButtonText: '取消',
-			type: 'warning',
-			dangerouslyUseHTMLString: true,
-			draggable: true,
-		})
-			.then(() => {
-				switchLoadMap.value[index] = Object.assign({}, switchLoadMap.value[index], {
-					loading: true,
-				});
-				setTimeout(() => {
-					switchLoadMap.value[index] = Object.assign({}, switchLoadMap.value[index], {
-						loading: false,
-					});
-					message('已成功修改用户状态', {
-						type: 'success',
-					});
-				}, 300);
-			})
-			.catch(() => {
-				row.status === 0 ? (row.status = 1) : (row.status = 0);
-			});
-	}
-
-	function handleUpdate(row) {
-		console.log(row);
-	}
-
-	function handleDelete(row) {
-		message(`您删除了用户编号为${row.id}的这条数据`, { type: 'success' });
-		onSearch();
-	}
-
-	function handleSizeChange(val: number) {
-		console.log(`${val} items per page`);
-	}
-
-	function handleCurrentChange(val: number) {
-		console.log(`current page: ${val}`);
-	}
-
-	/** 当CheckBox选择项发生变化时会触发该事件 */
-	function handleSelectionChange(val) {
-		selectedNum.value = val.length;
-		// 重置表格高度
-		tableRef.value.setAdaptive();
-	}
-
-	/** 取消选择 */
-	function onSelectionCancel() {
-		selectedNum.value = 0;
-		// 用于多选表格，清空用户的选择
-		tableRef.value.getTableRef().clearSelection();
-	}
-
-	/** 批量删除 */
-	function onbatchDel() {
-		// 返回当前选中的行
-		const curSelected = tableRef.value.getTableRef().getSelectionRows();
-		// 接下来根据实际业务，通过选中行的某项数据，比如下面的id，调用接口进行批量删除
-		message(`已删除用户编号为 ${getKeyList(curSelected, 'id')} 的数据`, {
-			type: 'success',
-		});
-		tableRef.value.getTableRef().clearSelection();
-		onSearch();
-	}
-
-	async function onSearch() {
-		loading.value = true;
-		const { data } = await getUserList(toRaw(form));
-		dataList.value = data.list;
-		pagination.total = data.total;
-		pagination.pageSize = data.pageSize;
-		pagination.currentPage = data.currentPage;
-
-		setTimeout(() => {
-			loading.value = false;
-		}, 500);
-	}
-
-	const resetForm = formEl => {
-		if (!formEl) return;
-		formEl.resetFields();
-		form.deptId = '';
-		treeRef.value.onTreeReset();
-		onSearch();
-	};
-
-	function onTreeSelect({ id, selected }) {
-		form.deptId = selected ? id : '';
-		onSearch();
-	}
-
-	function formatHigherDeptOptions(treeList) {
-		// 根据返回数据的status字段值判断追加是否禁用disabled字段，返回处理后的树结构，用于上级部门级联选择器的展示（实际开发中也是如此，不可能前端需要的每个字段后端都会返回，这时需要前端自行根据后端返回的某些字段做逻辑处理）
-		if (!treeList || !treeList.length) return;
-		const newTreeList = [];
-		for (let i = 0; i < treeList.length; i++) {
-			treeList[i].disabled = treeList[i].status === 0 ? true : false;
-			formatHigherDeptOptions(treeList[i].children);
-			newTreeList.push(treeList[i]);
-		}
-		return newTreeList;
-	}
-
-	function openDialog(title = '新增', row?: FormItemProps) {
-		addDialog({
-			title: `${title}用户`,
-			props: {
-				formInline: {
-					title,
-					higherDeptOptions: formatHigherDeptOptions(higherDeptOptions.value),
-					parentId: row?.dept.id ?? 0,
-					nickname: row?.nickname ?? '',
-					username: row?.username ?? '',
-					password: row?.password ?? '',
-					phone: row?.phone ?? '',
-					email: row?.email ?? '',
-					sex: row?.sex ?? '',
-					status: row?.status ?? 1,
-					remark: row?.remark ?? '',
-				},
-			},
-			width: '46%',
-			draggable: true,
-			fullscreen: deviceDetection(),
-			fullscreenIcon: true,
-			closeOnClickModal: false,
-			contentRenderer: () => h(editForm, { ref: formRef, formInline: null }),
-			beforeSure: (done, { options }) => {
-				const FormRef = formRef.value.getRef();
-				const curData = options.props.formInline as FormItemProps;
-
-				function chores() {
-					message(`您${title}了用户名称为${curData.username}的这条数据`, {
-						type: 'success',
-					});
-					done(); // 关闭弹框
-					onSearch(); // 刷新表格数据
-				}
-
-				FormRef.validate(valid => {
-					if (valid) {
-						console.log('curData', curData);
-						// 表单规则校验通过
-						if (title === '新增') {
-							// 实际开发先调用新增接口，再进行下面操作
-							chores();
-						} else {
-							// 实际开发先调用修改接口，再进行下面操作
-							chores();
-						}
-					}
-				});
-			},
-		});
-	}
-
-	const cropRef = ref();
-
-	/** 上传头像 */
-	function handleUpload(row) {
-		addDialog({
-			title: '裁剪、上传头像',
-			width: '40%',
-			closeOnClickModal: false,
-			fullscreen: deviceDetection(),
-			contentRenderer: () =>
-				h(ReCropperPreview, {
-					ref: cropRef,
-					imgSrc: row.avatar || userAvatar,
-					onCropper: info => (avatarInfo.value = info),
-				}),
-			beforeSure: done => {
-				console.log('裁剪后的图片信息：', avatarInfo.value);
-				// 根据实际业务使用avatarInfo.value和row里的某些字段去调用上传头像接口即可
-				done(); // 关闭弹框
-				onSearch(); // 刷新表格数据
-			},
-			closeCallBack: () => cropRef.value.hidePopover(),
-		});
-	}
-
-	watch(pwdForm, ({ newPwd }) => (curScore.value = isAllEmpty(newPwd) ? -1 : zxcvbn(newPwd).score));
-
-	/** 重置密码 */
-	function handleReset(row) {
-		addDialog({
-			title: `重置 ${row.username} 用户的密码`,
-			width: '30%',
-			draggable: true,
-			closeOnClickModal: false,
-			fullscreen: deviceDetection(),
-			contentRenderer: () => (
-				<>
-					<ElForm ref={ruleFormRef} model={pwdForm}>
-						<ElFormItem
-							prop='newPwd'
-							rules={[
-								{
-									required: true,
-									message: '请输入新密码',
-									trigger: 'blur',
-								},
-							]}
-						>
-							<ElInput clearable show-password type='password' v-model={pwdForm.newPwd} placeholder='请输入新密码' />
-						</ElFormItem>
-					</ElForm>
-					<div class='mt-4 flex'>
-						{pwdProgress.map(({ color, text }, idx) => (
-							<div class='w-[19vw]' style={{ marginLeft: idx !== 0 ? '4px' : 0 }}>
-								<ElProgress striped striped-flow duration={curScore.value === idx ? 6 : 0} percentage={curScore.value >= idx ? 100 : 0} color={color} stroke-width={10} show-text={false} />
-								<p class='text-center' style={{ color: curScore.value === idx ? color : '' }}>
-									{text}
-								</p>
-							</div>
-						))}
-					</div>
-				</>
-			),
-			closeCallBack: () => (pwdForm.newPwd = ''),
-			beforeSure: done => {
-				ruleFormRef.value.validate(valid => {
-					if (valid) {
-						// 表单规则校验通过
-						message(`已成功重置 ${row.username} 用户的密码`, {
-							type: 'success',
-						});
-						console.log(pwdForm.newPwd);
-						// 根据实际业务使用pwdForm.newPwd和row里的某些字段去调用重置用户密码接口即可
-						done(); // 关闭弹框
-						onSearch(); // 刷新表格数据
-					}
-				});
-			},
-		});
-	}
-
-	/** 分配角色 */
-	async function handleRole(row) {
-		// 选中的角色列表
-		const ids = (await getRoleIds({ userId: row.id })).data ?? [];
-		addDialog({
-			title: `分配 ${row.username} 用户的角色`,
-			props: {
-				formInline: {
-					username: row?.username ?? '',
-					nickname: row?.nickname ?? '',
-					roleOptions: roleOptions.value ?? [],
-					ids,
-				},
-			},
-			width: '400px',
-			draggable: true,
-			fullscreen: deviceDetection(),
-			fullscreenIcon: true,
-			closeOnClickModal: false,
-			contentRenderer: () => h(roleForm),
-			beforeSure: (done, { options }) => {
-				const curData = options.props.formInline as RoleFormItemProps;
-				console.log('curIds', curData.ids);
-				// 根据实际业务使用curData.ids和row里的某些字段去调用修改角色接口即可
-				done(); // 关闭弹框
-			},
-		});
-	}
-
-	onMounted(async () => {
-		treeLoading.value = true;
-		onSearch();
-
-		// 归属部门
-		const { data } = await getDeptList();
-		higherDeptOptions.value = handleTree(data);
-		treeData.value = handleTree(data);
-		treeLoading.value = false;
-
-		// 角色列表
-		roleOptions.value = (await getAllRoleList()).data;
-	});
-
-	return {
-		form,
-		loading,
-		columns,
-		dataList,
-		treeData,
-		treeLoading,
-		selectedNum,
-		pagination,
-		buttonClass,
-		deviceDetection,
-		onSearch,
-		resetForm,
-		onbatchDel,
-		openDialog,
-		onTreeSelect,
-		handleUpdate,
-		handleDelete,
-		handleUpload,
-		handleReset,
-		handleRole,
-		handleSizeChange,
-		onSelectionCancel,
-		handleCurrentChange,
-		handleSelectionChange,
-	};
-}
diff --git a/src/views/user/utils/reset.css b/src/views/user/utils/reset.css
deleted file mode 100644
index 97f4e4f..0000000
--- a/src/views/user/utils/reset.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/** 局部重置 ElProgress 的部分样式 */
-.el-progress-bar__outer,
-.el-progress-bar__inner {
-  border-radius: 0;
-}
diff --git a/src/views/user/utils/rule.ts b/src/views/user/utils/rule.ts
deleted file mode 100644
index 10f4e84..0000000
--- a/src/views/user/utils/rule.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { reactive } from 'vue';
-import type { FormRules } from 'element-plus';
-import { isEmail, isPhone } from '@pureadmin/utils';
-
-/** 自定义表单规则校验 */
-export const formRules = reactive(<FormRules>{
-	nickname: [{ required: true, message: '用户昵称为必填项', trigger: 'blur' }],
-	username: [{ required: true, message: '用户名称为必填项', trigger: 'blur' }],
-	password: [{ required: true, message: '用户密码为必填项', trigger: 'blur' }],
-	phone: [
-		{
-			validator: (rule, value, callback) => {
-				if (value === '') {
-					callback();
-				} else if (!isPhone(value)) {
-					callback(new Error('请输入正确的手机号码格式'));
-				} else {
-					callback();
-				}
-			},
-			trigger: 'blur',
-			// trigger: "click" // 如果想在点击确定按钮时触发这个校验，trigger 设置成 click 即可
-		},
-	],
-	email: [
-		{
-			validator: (rule, value, callback) => {
-				if (value === '') {
-					callback();
-				} else if (!isEmail(value)) {
-					callback(new Error('请输入正确的邮箱格式'));
-				} else {
-					callback();
-				}
-			},
-			trigger: 'blur',
-		},
-	],
-});
diff --git a/src/views/user/utils/types.ts b/src/views/user/utils/types.ts
deleted file mode 100644
index 30c922a..0000000
--- a/src/views/user/utils/types.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-interface FormItemProps {
-	id?: number;
-	/** 用于判断是`新增`还是`修改` */
-	title: string;
-	higherDeptOptions: Record<string, unknown>[];
-	parentId: number;
-	nickname: string;
-	username: string;
-	password: string;
-	phone: string | number;
-	email: string;
-	sex: string | number;
-	status: number;
-	dept?: {
-		id?: number;
-		name?: string;
-	};
-	remark: string;
-}
-
-interface FormProps {
-	formInline: FormItemProps;
-}
-
-interface RoleFormItemProps {
-	username: string;
-	nickname: string;
-	/** 角色列表 */
-	roleOptions: any[];
-	/** 选中的角色列表 */
-	ids: Record<number, unknown>[];
-}
-
-interface RoleFormProps {
-	formInline: RoleFormItemProps;
-}
-
-export type { FormItemProps, FormProps, RoleFormItemProps, RoleFormProps };