From b0c2c476077a27b7354675e1e7b9ec3c58b03e15 Mon Sep 17 00:00:00 2001
From: valarchie <343928303@qq.com>
Date: Fri, 7 Jul 2023 22:19:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=95=B4=E5=90=88=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pnpm-lock.yaml                            |  155 +-
 src/api/system.ts                         |   35 +
 src/components/ReIcon/data.ts             | 1961 +++++++++++++++++++++
 src/components/ReIcon/src/Select.vue      |  237 +++
 src/components/ReIcon/src/offlineIcon.ts  |   37 +-
 src/components/RePureTableBar/src/bar.tsx |   17 +-
 src/router/modules/error.ts               |    2 +-
 src/views/system/hooks.ts                 |   39 +
 src/views/system/notice/form.vue          |   55 +
 src/views/system/notice/index.vue         |  216 +++
 src/views/system/notice/utils/hook.tsx    |  241 +++
 src/views/system/notice/utils/rule.ts     |    8 +
 src/views/system/notice/utils/types.ts    |   15 +
 13 files changed, 2981 insertions(+), 37 deletions(-)
 create mode 100644 src/api/system.ts
 create mode 100644 src/components/ReIcon/data.ts
 create mode 100644 src/components/ReIcon/src/Select.vue
 create mode 100644 src/views/system/hooks.ts
 create mode 100644 src/views/system/notice/form.vue
 create mode 100644 src/views/system/notice/index.vue
 create mode 100644 src/views/system/notice/utils/hook.tsx
 create mode 100644 src/views/system/notice/utils/rule.ts
 create mode 100644 src/views/system/notice/utils/types.ts

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0bd8599..73f0f21 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -28,6 +28,7 @@ specifiers:
   autoprefixer: ^10.4.14
   axios: ^1.4.0
   cloc: ^2.11.0
+  crypto-js: ^4.1.1
   cssnano: ^6.0.1
   dayjs: ^1.11.8
   echarts: ^5.4.2
@@ -37,6 +38,7 @@ specifiers:
   eslint-plugin-vue: ^9.15.1
   husky: ^8.0.3
   js-cookie: ^3.0.5
+  jsencrypt: ^3.3.2
   lint-staged: ^13.2.2
   mitt: ^3.0.0
   mockjs: ^1.1.0
@@ -51,6 +53,7 @@ specifiers:
   postcss-scss: ^4.0.6
   prettier: ^2.8.8
   pretty-quick: ^3.1.3
+  qrcode: ^1.5.3
   qs: ^6.11.2
   responsive-storage: ^2.2.0
   rimraf: ^5.0.1
@@ -72,6 +75,7 @@ specifiers:
   svgo: ^3.0.2
   tailwindcss: ^3.3.2
   terser: ^5.18.1
+  typeit: ^8.7.1
   typescript: 5.0.4
   vite: ^4.3.9
   vite-plugin-cdn-import: ^0.3.5
@@ -93,19 +97,23 @@ dependencies:
   "@vueuse/motion": 2.0.0_vue@3.3.4
   animate.css: 4.1.1
   axios: 1.4.0
+  crypto-js: 4.1.1
   dayjs: 1.11.8
   echarts: 5.4.2
   element-plus: 2.3.6_vue@3.3.4
   js-cookie: 3.0.5
+  jsencrypt: 3.3.2
   mitt: 3.0.0
   mockjs: 1.1.0
   nprogress: 0.2.0
   path: 0.12.7
   pinia: 2.1.4_typescript@5.0.4+vue@3.3.4
   pinyin-pro: 3.15.2
+  qrcode: 1.5.3
   qs: 6.11.2
   responsive-storage: 2.2.0
   sortablejs: 1.15.0
+  typeit: 8.7.1
   vue: 3.3.4
   vue-router: 4.2.2_vue@3.3.4
   vue-types: 5.1.0_vue@3.3.4
@@ -2373,7 +2381,6 @@ packages:
         integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
       }
     engines: { node: ">=8" }
-    dev: true
 
   /ansi-regex/6.0.1:
     resolution:
@@ -2400,7 +2407,6 @@ packages:
     engines: { node: ">=8" }
     dependencies:
       color-convert: 2.0.1
-    dev: true
 
   /ansi-styles/6.2.1:
     resolution:
@@ -2699,7 +2705,6 @@ packages:
         integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
       }
     engines: { node: ">=6" }
-    dev: true
 
   /camelcase/6.3.0:
     resolution:
@@ -2834,6 +2839,17 @@ packages:
       string-width: 5.1.2
     dev: true
 
+  /cliui/6.0.0:
+    resolution:
+      {
+        integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==
+      }
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 6.2.0
+    dev: false
+
   /cliui/8.0.1:
     resolution:
       {
@@ -2870,7 +2886,6 @@ packages:
     engines: { node: ">=7.0.0" }
     dependencies:
       color-name: 1.1.4
-    dev: true
 
   /color-name/1.1.3:
     resolution:
@@ -2883,7 +2898,6 @@ packages:
       {
         integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
       }
-    dev: true
 
   /color-string/1.9.1:
     resolution:
@@ -3110,6 +3124,13 @@ packages:
       which: 2.0.2
     dev: true
 
+  /crypto-js/4.1.1:
+    resolution:
+      {
+        integrity: sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==
+      }
+    dev: false
+
   /css-declaration-sorter/6.4.0_postcss@8.4.24:
     resolution:
       {
@@ -3450,7 +3471,6 @@ packages:
         integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
       }
     engines: { node: ">=0.10.0" }
-    dev: true
 
   /deep-is/0.1.4:
     resolution:
@@ -3514,6 +3534,13 @@ packages:
     engines: { node: ">=0.3.1" }
     dev: true
 
+  /dijkstrajs/1.0.3:
+    resolution:
+      {
+        integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==
+      }
+    dev: false
+
   /dir-glob/3.0.1:
     resolution:
       {
@@ -3693,7 +3720,6 @@ packages:
       {
         integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
       }
-    dev: true
 
   /emoji-regex/9.2.2:
     resolution:
@@ -3702,6 +3728,13 @@ packages:
       }
     dev: true
 
+  /encode-utf8/1.0.3:
+    resolution:
+      {
+        integrity: sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw==
+      }
+    dev: false
+
   /encodeurl/1.0.2:
     resolution:
       {
@@ -4235,7 +4268,6 @@ packages:
     dependencies:
       locate-path: 5.0.0
       path-exists: 4.0.0
-    dev: true
 
   /find-up/5.0.0:
     resolution:
@@ -4398,7 +4430,6 @@ packages:
         integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
       }
     engines: { node: 6.* || 8.* || >= 10.* }
-    dev: true
 
   /get-intrinsic/1.2.1:
     resolution:
@@ -4938,7 +4969,6 @@ packages:
         integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
       }
     engines: { node: ">=8" }
-    dev: true
 
   /is-fullwidth-code-point/4.0.0:
     resolution:
@@ -5112,6 +5142,13 @@ packages:
       argparse: 2.0.1
     dev: true
 
+  /jsencrypt/3.3.2:
+    resolution:
+      {
+        integrity: sha512-arQR1R1ESGdAxY7ZheWr12wCaF2yF47v5qpB76TtV64H1pyGudk9Hvw8Y9tb/FiTIaaTRUyaSnm5T/Y53Ghm/A==
+      }
+    dev: false
+
   /jsesc/2.5.2:
     resolution:
       {
@@ -5297,7 +5334,6 @@ packages:
     engines: { node: ">=8" }
     dependencies:
       p-locate: 4.1.0
-    dev: true
 
   /locate-path/6.0.0:
     resolution:
@@ -6061,7 +6097,6 @@ packages:
     engines: { node: ">=6" }
     dependencies:
       p-try: 2.2.0
-    dev: true
 
   /p-limit/3.1.0:
     resolution:
@@ -6081,7 +6116,6 @@ packages:
     engines: { node: ">=8" }
     dependencies:
       p-limit: 2.3.0
-    dev: true
 
   /p-locate/5.0.0:
     resolution:
@@ -6109,7 +6143,6 @@ packages:
         integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
       }
     engines: { node: ">=6" }
-    dev: true
 
   /parent-module/1.0.1:
     resolution:
@@ -6148,7 +6181,6 @@ packages:
         integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
       }
     engines: { node: ">=8" }
-    dev: true
 
   /path-is-absolute/1.0.1:
     resolution:
@@ -6310,6 +6342,14 @@ packages:
     dev: false
     optional: true
 
+  /pngjs/5.0.0:
+    resolution:
+      {
+        integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==
+      }
+    engines: { node: ">=10.13.0" }
+    dev: false
+
   /popmotion/11.0.5:
     resolution:
       {
@@ -7313,6 +7353,20 @@ packages:
     engines: { node: ">=0.6.0", teleport: ">=0.2.0" }
     dev: true
 
+  /qrcode/1.5.3:
+    resolution:
+      {
+        integrity: sha512-puyri6ApkEHYiVl4CFzo1tDkAZ+ATcnbJrJ6RiBM1Fhctdn/ix9MTE3hRph33omisEbC/2fcfemsseiKgBPKZg==
+      }
+    engines: { node: ">=10.13.0" }
+    hasBin: true
+    dependencies:
+      dijkstrajs: 1.0.3
+      encode-utf8: 1.0.3
+      pngjs: 5.0.0
+      yargs: 15.4.1
+    dev: false
+
   /qs/6.11.2:
     resolution:
       {
@@ -7437,7 +7491,6 @@ packages:
         integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
       }
     engines: { node: ">=0.10.0" }
-    dev: true
 
   /require-from-string/2.0.2:
     resolution:
@@ -7447,6 +7500,13 @@ packages:
     engines: { node: ">=0.10.0" }
     dev: true
 
+  /require-main-filename/2.0.0:
+    resolution:
+      {
+        integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
+      }
+    dev: false
+
   /resolve-from/4.0.0:
     resolution:
       {
@@ -7702,6 +7762,13 @@ packages:
     dependencies:
       lru-cache: 6.0.0
 
+  /set-blocking/2.0.0:
+    resolution:
+      {
+        integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
+      }
+    dev: false
+
   /shebang-command/2.0.0:
     resolution:
       {
@@ -7947,7 +8014,6 @@ packages:
       emoji-regex: 8.0.0
       is-fullwidth-code-point: 3.0.0
       strip-ansi: 6.0.1
-    dev: true
 
   /string-width/5.1.2:
     resolution:
@@ -7988,7 +8054,6 @@ packages:
     engines: { node: ">=8" }
     dependencies:
       ansi-regex: 5.0.1
-    dev: true
 
   /strip-ansi/7.1.0:
     resolution:
@@ -8711,6 +8776,14 @@ packages:
     engines: { node: ">=8" }
     dev: true
 
+  /typeit/8.7.1:
+    resolution:
+      {
+        integrity: sha512-Bx/O4NMz10NWh9FWYtVwV4XwGHF9UDJfpCZPJRtw2/oUcahFAStU8J0t19aroPfTV6s1UlS5ICoqilOqmEnh2Q==
+      }
+    requiresBuild: true
+    dev: false
+
   /typescript/5.0.4:
     resolution:
       {
@@ -9109,6 +9182,13 @@ packages:
     dev: false
     optional: true
 
+  /which-module/2.0.1:
+    resolution:
+      {
+        integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==
+      }
+    dev: false
+
   /which/1.3.1:
     resolution:
       {
@@ -9148,7 +9228,6 @@ packages:
       ansi-styles: 4.3.0
       string-width: 4.2.3
       strip-ansi: 6.0.1
-    dev: true
 
   /wrap-ansi/7.0.0:
     resolution:
@@ -9200,6 +9279,13 @@ packages:
     engines: { node: ">=12" }
     dev: true
 
+  /y18n/4.0.3:
+    resolution:
+      {
+        integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==
+      }
+    dev: false
+
   /y18n/5.0.8:
     resolution:
       {
@@ -9236,6 +9322,17 @@ packages:
     engines: { node: ">= 14" }
     dev: true
 
+  /yargs-parser/18.1.3:
+    resolution:
+      {
+        integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==
+      }
+    engines: { node: ">=6" }
+    dependencies:
+      camelcase: 5.3.1
+      decamelize: 1.2.0
+    dev: false
+
   /yargs-parser/20.2.9:
     resolution:
       {
@@ -9252,6 +9349,26 @@ packages:
     engines: { node: ">=12" }
     dev: true
 
+  /yargs/15.4.1:
+    resolution:
+      {
+        integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==
+      }
+    engines: { node: ">=8" }
+    dependencies:
+      cliui: 6.0.0
+      decamelize: 1.2.0
+      find-up: 4.1.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      require-main-filename: 2.0.0
+      set-blocking: 2.0.0
+      string-width: 4.2.3
+      which-module: 2.0.1
+      y18n: 4.0.3
+      yargs-parser: 18.1.3
+    dev: false
+
   /yargs/17.7.2:
     resolution:
       {
diff --git a/src/api/system.ts b/src/api/system.ts
new file mode 100644
index 0000000..169d79c
--- /dev/null
+++ b/src/api/system.ts
@@ -0,0 +1,35 @@
+import { http } from "@/utils/http";
+
+type Result = {
+  success: boolean;
+  data?: {
+    /** 列表数据 */
+    list: Array<any>;
+    /** 总条目数 */
+    total?: number;
+    /** 每页显示条目个数 */
+    pageSize?: number;
+    /** 当前页数 */
+    currentPage?: number;
+  };
+};
+
+type ResultDept = {
+  success: boolean;
+  data?: Array<any>;
+};
+
+/** 获取用户管理列表 */
+export const getUserList = (data?: object) => {
+  return http.request<Result>("post", "/user", { data });
+};
+
+/** 获取角色管理列表 */
+export const getRoleList = (data?: object) => {
+  return http.request<Result>("post", "/role", { data });
+};
+
+/** 获取部门管理列表 */
+export const getDeptList = (data?: object) => {
+  return http.request<ResultDept>("post", "/dept", { data });
+};
diff --git a/src/components/ReIcon/data.ts b/src/components/ReIcon/data.ts
new file mode 100644
index 0000000..8ec5919
--- /dev/null
+++ b/src/components/ReIcon/data.ts
@@ -0,0 +1,1961 @@
+export const IconJson = {
+  "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",
+    "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",
+    "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",
+    "goods",
+    "goods-filled",
+    "grape",
+    "grid",
+    "guide",
+    "headset",
+    "help",
+    "help-filled",
+    "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",
+    "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",
+    "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",
+    "smoking",
+    "soccer",
+    "sold-out",
+    "sort",
+    "sort-down",
+    "sort-up",
+    "stamp",
+    "star",
+    "star-filled",
+    "stopwatch",
+    "success-filled",
+    "sugar",
+    "suitcase",
+    "sunny",
+    "sunrise",
+    "sunset",
+    "switch",
+    "switch-button",
+    "takeaway-box",
+    "ticket",
+    "tickets",
+    "timer",
+    "toilet-paper",
+    "tools",
+    "top",
+    "top-left",
+    "top-right",
+    "trend-charts",
+    "trophy",
+    "turn-off",
+    "umbrella",
+    "unlock",
+    "upload",
+    "upload-filled",
+    "user",
+    "user-filled",
+    "van",
+    "video-camera",
+    "video-camera-filled",
+    "video-pause",
+    "video-play",
+    "view",
+    "wallet",
+    "wallet-filled",
+    "warning",
+    "warning-filled",
+    "watch",
+    "watermelon",
+    "wind-power",
+    "zoom-in",
+    "zoom-out"
+  ],
+  "fa:": [
+    "500px",
+    "address-book",
+    "address-book-o",
+    "address-card",
+    "address-card-o",
+    "adjust",
+    "adn",
+    "align-center",
+    "align-justify",
+    "align-left",
+    "amazon",
+    "ambulance",
+    "american-sign-language-interpreting",
+    "anchor",
+    "android",
+    "angellist",
+    "angle-double-left",
+    "angle-double-up",
+    "angle-down",
+    "angle-left",
+    "angle-up",
+    "apple",
+    "archive",
+    "area-chart",
+    "arrow-circle-left",
+    "arrow-circle-o-left",
+    "arrow-circle-o-up",
+    "arrow-circle-up",
+    "arrow-left",
+    "arrow-up",
+    "arrows",
+    "arrows-alt",
+    "arrows-h",
+    "arrows-v",
+    "assistive-listening-systems",
+    "asterisk",
+    "at",
+    "audio-description",
+    "automobile",
+    "backward",
+    "balance-scale",
+    "ban",
+    "bandcamp",
+    "bank",
+    "bar-chart",
+    "barcode",
+    "bars",
+    "bath",
+    "battery",
+    "battery-0",
+    "battery-1",
+    "battery-2",
+    "battery-3",
+    "bed",
+    "beer",
+    "behance",
+    "behance-square",
+    "bell",
+    "bell-o",
+    "bell-slash",
+    "bell-slash-o",
+    "bicycle",
+    "binoculars",
+    "birthday-cake",
+    "bitbucket",
+    "bitbucket-square",
+    "bitcoin",
+    "black-tie",
+    "blind",
+    "bluetooth",
+    "bluetooth-b",
+    "bold",
+    "bolt",
+    "bomb",
+    "book",
+    "bookmark",
+    "bookmark-o",
+    "braille",
+    "briefcase",
+    "bug",
+    "building",
+    "building-o",
+    "bullhorn",
+    "bullseye",
+    "bus",
+    "buysellads",
+    "cab",
+    "calculator",
+    "calendar",
+    "calendar-check-o",
+    "calendar-minus-o",
+    "calendar-o",
+    "calendar-plus-o",
+    "calendar-times-o",
+    "camera",
+    "camera-retro",
+    "caret-down",
+    "caret-left",
+    "caret-square-o-left",
+    "caret-square-o-up",
+    "caret-up",
+    "cart-arrow-down",
+    "cart-plus",
+    "cc",
+    "cc-amex",
+    "cc-diners-club",
+    "cc-discover",
+    "cc-jcb",
+    "cc-mastercard",
+    "cc-paypal",
+    "cc-stripe",
+    "cc-visa",
+    "certificate",
+    "chain",
+    "chain-broken",
+    "check",
+    "check-circle",
+    "check-circle-o",
+    "check-square",
+    "check-square-o",
+    "chevron-circle-left",
+    "chevron-circle-up",
+    "chevron-down",
+    "chevron-left",
+    "chevron-up",
+    "child",
+    "chrome",
+    "circle",
+    "circle-o",
+    "circle-o-notch",
+    "circle-thin",
+    "clipboard",
+    "clock-o",
+    "clone",
+    "close",
+    "cloud",
+    "cloud-download",
+    "cloud-upload",
+    "cny",
+    "code",
+    "code-fork",
+    "codepen",
+    "codiepie",
+    "coffee",
+    "cog",
+    "cogs",
+    "columns",
+    "comment",
+    "comment-o",
+    "commenting",
+    "commenting-o",
+    "comments",
+    "comments-o",
+    "compass",
+    "compress",
+    "connectdevelop",
+    "contao",
+    "copy",
+    "copyright",
+    "creative-commons",
+    "credit-card",
+    "credit-card-alt",
+    "crop",
+    "crosshairs",
+    "css3",
+    "cube",
+    "cubes",
+    "cut",
+    "cutlery",
+    "dashboard",
+    "dashcube",
+    "database",
+    "deaf",
+    "dedent",
+    "delicious",
+    "desktop",
+    "deviantart",
+    "diamond",
+    "digg",
+    "dollar",
+    "dot-circle-o",
+    "download",
+    "dribbble",
+    "drivers-license",
+    "drivers-license-o",
+    "dropbox",
+    "drupal",
+    "edge",
+    "edit",
+    "eercast",
+    "eject",
+    "ellipsis-h",
+    "ellipsis-v",
+    "empire",
+    "envelope",
+    "envelope-o",
+    "envelope-open",
+    "envelope-open-o",
+    "envelope-square",
+    "envira",
+    "eraser",
+    "etsy",
+    "eur",
+    "exchange",
+    "exclamation",
+    "exclamation-circle",
+    "exclamation-triangle",
+    "expand",
+    "expeditedssl",
+    "external-link",
+    "external-link-square",
+    "eye",
+    "eye-slash",
+    "eyedropper",
+    "fa",
+    "facebook",
+    "facebook-official",
+    "facebook-square",
+    "fast-backward",
+    "fax",
+    "feed",
+    "female",
+    "fighter-jet",
+    "file",
+    "file-archive-o",
+    "file-audio-o",
+    "file-code-o",
+    "file-excel-o",
+    "file-image-o",
+    "file-movie-o",
+    "file-o",
+    "file-pdf-o",
+    "file-powerpoint-o",
+    "file-text",
+    "file-text-o",
+    "file-word-o",
+    "film",
+    "filter",
+    "fire",
+    "fire-extinguisher",
+    "firefox",
+    "first-order",
+    "flag",
+    "flag-checkered",
+    "flag-o",
+    "flask",
+    "flickr",
+    "floppy-o",
+    "folder",
+    "folder-o",
+    "folder-open",
+    "folder-open-o",
+    "font",
+    "fonticons",
+    "fort-awesome",
+    "forumbee",
+    "foursquare",
+    "free-code-camp",
+    "frown-o",
+    "futbol-o",
+    "gamepad",
+    "gavel",
+    "gbp",
+    "genderless",
+    "get-pocket",
+    "gg",
+    "gg-circle",
+    "gift",
+    "git",
+    "git-square",
+    "github",
+    "github-alt",
+    "github-square",
+    "gitlab",
+    "gittip",
+    "glass",
+    "glide",
+    "glide-g",
+    "globe",
+    "google",
+    "google-plus",
+    "google-plus-circle",
+    "google-plus-square",
+    "google-wallet",
+    "graduation-cap",
+    "grav",
+    "group",
+    "h-square",
+    "hacker-news",
+    "hand-grab-o",
+    "hand-lizard-o",
+    "hand-o-left",
+    "hand-o-up",
+    "hand-paper-o",
+    "hand-peace-o",
+    "hand-pointer-o",
+    "hand-scissors-o",
+    "hand-spock-o",
+    "handshake-o",
+    "hashtag",
+    "hdd-o",
+    "header",
+    "headphones",
+    "heart",
+    "heart-o",
+    "heartbeat",
+    "history",
+    "home",
+    "hospital-o",
+    "hourglass",
+    "hourglass-1",
+    "hourglass-2",
+    "hourglass-3",
+    "hourglass-o",
+    "houzz",
+    "html5",
+    "i-cursor",
+    "id-badge",
+    "ils",
+    "image",
+    "imdb",
+    "inbox",
+    "indent",
+    "industry",
+    "info",
+    "info-circle",
+    "inr",
+    "instagram",
+    "internet-explorer",
+    "intersex",
+    "ioxhost",
+    "italic",
+    "joomla",
+    "jsfiddle",
+    "key",
+    "keyboard-o",
+    "krw",
+    "language",
+    "laptop",
+    "lastfm",
+    "lastfm-square",
+    "leaf",
+    "leanpub",
+    "lemon-o",
+    "level-up",
+    "life-bouy",
+    "lightbulb-o",
+    "line-chart",
+    "linkedin",
+    "linkedin-square",
+    "linode",
+    "linux",
+    "list",
+    "list-alt",
+    "list-ol",
+    "list-ul",
+    "location-arrow",
+    "lock",
+    "long-arrow-left",
+    "long-arrow-up",
+    "low-vision",
+    "magic",
+    "magnet",
+    "mail-forward",
+    "mail-reply",
+    "mail-reply-all",
+    "male",
+    "map",
+    "map-marker",
+    "map-o",
+    "map-pin",
+    "map-signs",
+    "mars",
+    "mars-double",
+    "mars-stroke",
+    "mars-stroke-h",
+    "mars-stroke-v",
+    "maxcdn",
+    "meanpath",
+    "medium",
+    "medkit",
+    "meetup",
+    "meh-o",
+    "mercury",
+    "microchip",
+    "microphone",
+    "microphone-slash",
+    "minus",
+    "minus-circle",
+    "minus-square",
+    "minus-square-o",
+    "mixcloud",
+    "mobile",
+    "modx",
+    "money",
+    "moon-o",
+    "motorcycle",
+    "mouse-pointer",
+    "music",
+    "neuter",
+    "newspaper-o",
+    "object-group",
+    "object-ungroup",
+    "odnoklassniki",
+    "odnoklassniki-square",
+    "opencart",
+    "openid",
+    "opera",
+    "optin-monster",
+    "pagelines",
+    "paint-brush",
+    "paper-plane",
+    "paper-plane-o",
+    "paperclip",
+    "paragraph",
+    "pause",
+    "pause-circle",
+    "pause-circle-o",
+    "paw",
+    "paypal",
+    "pencil",
+    "pencil-square",
+    "percent",
+    "phone",
+    "phone-square",
+    "pie-chart",
+    "pied-piper",
+    "pied-piper-alt",
+    "pied-piper-pp",
+    "pinterest",
+    "pinterest-p",
+    "pinterest-square",
+    "plane",
+    "play",
+    "play-circle",
+    "play-circle-o",
+    "plug",
+    "plus",
+    "plus-circle",
+    "plus-square",
+    "plus-square-o",
+    "podcast",
+    "power-off",
+    "print",
+    "product-hunt",
+    "puzzle-piece",
+    "qq",
+    "qrcode",
+    "question",
+    "question-circle",
+    "question-circle-o",
+    "quora",
+    "quote-left",
+    "quote-right",
+    "ra",
+    "random",
+    "ravelry",
+    "recycle",
+    "reddit",
+    "reddit-alien",
+    "reddit-square",
+    "refresh",
+    "registered",
+    "renren",
+    "repeat",
+    "retweet",
+    "road",
+    "rocket",
+    "rotate-left",
+    "rouble",
+    "rss-square",
+    "safari",
+    "scribd",
+    "search",
+    "search-minus",
+    "search-plus",
+    "sellsy",
+    "server",
+    "share-alt",
+    "share-alt-square",
+    "share-square",
+    "share-square-o",
+    "shield",
+    "ship",
+    "shirtsinbulk",
+    "shopping-bag",
+    "shopping-basket",
+    "shopping-cart",
+    "shower",
+    "sign-in",
+    "sign-language",
+    "sign-out",
+    "signal",
+    "simplybuilt",
+    "sitemap",
+    "skyatlas",
+    "skype",
+    "slack",
+    "sliders",
+    "slideshare",
+    "smile-o",
+    "snapchat",
+    "snapchat-ghost",
+    "snapchat-square",
+    "snowflake-o",
+    "sort",
+    "sort-alpha-asc",
+    "sort-alpha-desc",
+    "sort-amount-asc",
+    "sort-amount-desc",
+    "sort-asc",
+    "sort-numeric-asc",
+    "sort-numeric-desc",
+    "soundcloud",
+    "space-shuttle",
+    "spinner",
+    "spoon",
+    "spotify",
+    "square",
+    "square-o",
+    "stack-exchange",
+    "stack-overflow",
+    "star",
+    "star-half",
+    "star-half-empty",
+    "star-o",
+    "steam",
+    "steam-square",
+    "step-backward",
+    "stethoscope",
+    "sticky-note",
+    "sticky-note-o",
+    "stop",
+    "stop-circle",
+    "stop-circle-o",
+    "street-view",
+    "strikethrough",
+    "stumbleupon",
+    "stumbleupon-circle",
+    "subscript",
+    "subway",
+    "suitcase",
+    "sun-o",
+    "superpowers",
+    "superscript",
+    "table",
+    "tablet",
+    "tag",
+    "tags",
+    "tasks",
+    "telegram",
+    "television",
+    "tencent-weibo",
+    "terminal",
+    "text-height",
+    "text-width",
+    "th",
+    "th-large",
+    "th-list",
+    "themeisle",
+    "thermometer",
+    "thermometer-0",
+    "thermometer-1",
+    "thermometer-2",
+    "thermometer-3",
+    "thumb-tack",
+    "thumbs-down",
+    "thumbs-o-up",
+    "thumbs-up",
+    "ticket",
+    "times-circle",
+    "times-circle-o",
+    "times-rectangle",
+    "times-rectangle-o",
+    "tint",
+    "toggle-off",
+    "toggle-on",
+    "trademark",
+    "train",
+    "transgender-alt",
+    "trash",
+    "trash-o",
+    "tree",
+    "trello",
+    "tripadvisor",
+    "trophy",
+    "truck",
+    "try",
+    "tty",
+    "tumblr",
+    "tumblr-square",
+    "twitch",
+    "twitter",
+    "twitter-square",
+    "umbrella",
+    "underline",
+    "universal-access",
+    "unlock",
+    "unlock-alt",
+    "upload",
+    "usb",
+    "user",
+    "user-circle",
+    "user-circle-o",
+    "user-md",
+    "user-o",
+    "user-plus",
+    "user-secret",
+    "user-times",
+    "venus",
+    "venus-double",
+    "venus-mars",
+    "viacoin",
+    "viadeo",
+    "viadeo-square",
+    "video-camera",
+    "vimeo",
+    "vimeo-square",
+    "vine",
+    "vk",
+    "volume-control-phone",
+    "volume-down",
+    "volume-off",
+    "volume-up",
+    "wechat",
+    "weibo",
+    "whatsapp",
+    "wheelchair",
+    "wheelchair-alt",
+    "wifi",
+    "wikipedia-w",
+    "window-maximize",
+    "window-minimize",
+    "window-restore",
+    "windows",
+    "wordpress",
+    "wpbeginner",
+    "wpexplorer",
+    "wpforms",
+    "wrench",
+    "xing",
+    "xing-square",
+    "y-combinator",
+    "yahoo",
+    "yelp",
+    "yoast",
+    "youtube",
+    "youtube-play",
+    "youtube-square"
+  ],
+  "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/src/Select.vue b/src/components/ReIcon/src/Select.vue
new file mode 100644
index 0000000..8457266
--- /dev/null
+++ b/src/components/ReIcon/src/Select.vue
@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import { cloneDeep } from "@pureadmin/utils";
+import { IconJson } from "@/components/ReIcon/data";
+import { ref, computed, CSSProperties, toRef, watch } from "vue";
+type ParameterCSSProperties = (item?: string) => CSSProperties | undefined;
+
+defineOptions({
+  name: "IconSelect"
+});
+
+const props = defineProps({
+  modelValue: {
+    require: false,
+    type: String
+  }
+});
+const emit = defineEmits<{ (e: "update:modelValue", v: string) }>();
+
+const visible = ref(false);
+const inputValue = toRef(props, "modelValue");
+const iconList = ref(IconJson);
+const icon = ref("add-location");
+const currentActiveType = ref("ep:");
+// 深拷贝图标数据，前端做搜索
+const copyIconList = cloneDeep(iconList.value);
+
+const pageSize = ref(96);
+const currentPage = ref(1);
+
+// 搜索条件
+const filterValue = ref("");
+
+const tabsList = [
+  {
+    label: "Element Plus",
+    name: "ep:"
+  },
+  {
+    label: "Font Awesome 4",
+    name: "fa:"
+  },
+  {
+    label: "Font Awesome 5 Solid",
+    name: "fa-solid:"
+  }
+];
+
+const pageList = computed(() => {
+  if (currentPage.value === 1) {
+    return copyIconList[currentActiveType.value]
+      .filter(v => v.includes(filterValue.value))
+      .slice(currentPage.value - 1, pageSize.value);
+  } else {
+    return copyIconList[currentActiveType.value]
+      .filter(v => v.includes(filterValue.value))
+      .slice(
+        pageSize.value * (currentPage.value - 1),
+        pageSize.value * (currentPage.value - 1) + 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 handleClick({ props }) {
+  currentPage.value = 1;
+  currentActiveType.value = props.name;
+  emit(
+    "update:modelValue",
+    currentActiveType.value + iconList.value[currentActiveType.value][0]
+  );
+  icon.value = iconList.value[currentActiveType.value][0];
+}
+
+function onChangeIcon(item) {
+  icon.value = item;
+  emit("update:modelValue", currentActiveType.value + item);
+  visible.value = false;
+}
+
+function onCurrentChange(page) {
+  currentPage.value = page;
+}
+
+watch(
+  () => {
+    return props.modelValue;
+  },
+  () => {
+    if (props.modelValue) {
+      currentActiveType.value = props.modelValue.substring(
+        0,
+        props.modelValue.indexOf(":") + 1
+      );
+      icon.value = props.modelValue.substring(
+        props.modelValue.indexOf(":") + 1
+      );
+    }
+  },
+  { immediate: true }
+);
+watch(
+  () => {
+    return filterValue.value;
+  },
+  () => {
+    currentPage.value = 1;
+  }
+);
+</script>
+
+<template>
+  <div class="selector w-[350px]">
+    <el-input v-model="inputValue" disabled>
+      <template #append>
+        <el-popover
+          :width="350"
+          trigger="click"
+          popper-class="pure-popper"
+          :popper-options="{
+            placement: 'auto'
+          }"
+          :visible="visible"
+        >
+          <template #reference>
+            <div
+              class="w-[40px] h-[32px] cursor-pointer flex justify-center items-center"
+              @click="visible = !visible"
+            >
+              <IconifyIconOnline :icon="currentActiveType + icon" />
+            </div>
+          </template>
+
+          <el-input
+            class="px-2 pt-2"
+            v-model="filterValue"
+            placeholder="搜索图标"
+            clearable
+          />
+
+          <el-tabs v-model="currentActiveType" @tab-click="handleClick">
+            <el-tab-pane
+              v-for="(pane, index) in tabsList"
+              :key="index"
+              :label="pane.label"
+              :name="pane.name"
+            >
+              <el-scrollbar height="220px">
+                <ul class="flex flex-wrap px-2 ml-2">
+                  <li
+                    v-for="(item, key) in pageList"
+                    :key="key"
+                    :title="item"
+                    class="icon-item p-2 cursor-pointer mr-2 mt-1 flex justify-center items-center border border-solid"
+                    :style="iconItemStyle(item)"
+                    @click="onChangeIcon(item)"
+                  >
+                    <IconifyIconOnline
+                      :icon="currentActiveType + item"
+                      width="20px"
+                      height="20px"
+                    />
+                  </li>
+                </ul>
+              </el-scrollbar>
+            </el-tab-pane>
+          </el-tabs>
+
+          <el-pagination
+            small
+            :total="copyIconList[currentActiveType].length"
+            :page-size="pageSize"
+            :current-page="currentPage"
+            background
+            layout="prev, pager, next"
+            class="flex items-center justify-center h-10"
+            @current-change="onCurrentChange"
+          />
+        </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__content) {
+  margin-top: 4px;
+}
+</style>
diff --git a/src/components/ReIcon/src/offlineIcon.ts b/src/components/ReIcon/src/offlineIcon.ts
index bb0e020..ef31833 100644
--- a/src/components/ReIcon/src/offlineIcon.ts
+++ b/src/components/ReIcon/src/offlineIcon.ts
@@ -5,10 +5,41 @@ import { addIcon } from "@iconify/vue/dist/offline";
  */
 
 // 本地菜单图标，后端在路由的icon中返回对应的图标字符串并且前端在此处使用addIcon添加即可渲染菜单图标
-import HomeFilled from "@iconify-icons/ep/home-filled";
+import UbuntuFill from "@iconify-icons/ri/ubuntu-fill";
+import Menu from "@iconify-icons/ep/menu";
+import Edit from "@iconify-icons/ep/edit";
 import InformationLine from "@iconify-icons/ri/information-line";
+import SetUp from "@iconify-icons/ep/set-up";
+import TerminalWindowLine from "@iconify-icons/ri/terminal-window-line";
+import Guide from "@iconify-icons/ep/guide";
+import HomeFilled from "@iconify-icons/ep/home-filled";
+import Card from "@iconify-icons/ri/bank-card-line";
+import ListCheck from "@iconify-icons/ri/list-check";
+import Histogram from "@iconify-icons/ep/histogram";
+import Ppt from "@iconify-icons/ri/file-ppt-2-line";
+import CheckboxCircleLine from "@iconify-icons/ri/checkbox-circle-line";
+import FlUser from "@iconify-icons/ri/admin-line";
+import Role from "@iconify-icons/ri/admin-fill";
+import Setting from "@iconify-icons/ri/settings-3-line";
+import Dept from "@iconify-icons/ri/git-branch-line";
 import Lollipop from "@iconify-icons/ep/lollipop";
-
-addIcon("homeFilled", HomeFilled);
+import Monitor from "@iconify-icons/ep/monitor";
+addIcon("ubuntuFill", UbuntuFill);
+addIcon("menu", Menu);
+addIcon("edit", Edit);
 addIcon("informationLine", InformationLine);
+addIcon("setUp", SetUp);
+addIcon("terminalWindowLine", TerminalWindowLine);
+addIcon("guide", Guide);
+addIcon("homeFilled", HomeFilled);
+addIcon("card", Card);
+addIcon("listCheck", ListCheck);
+addIcon("histogram", Histogram);
+addIcon("ppt", Ppt);
+addIcon("checkboxCircleLine", CheckboxCircleLine);
+addIcon("flUser", FlUser);
+addIcon("role", Role);
+addIcon("setting", Setting);
+addIcon("dept", Dept);
 addIcon("lollipop", Lollipop);
+addIcon("monitor", Monitor);
diff --git a/src/components/RePureTableBar/src/bar.tsx b/src/components/RePureTableBar/src/bar.tsx
index 092f427..30aa6d3 100644
--- a/src/components/RePureTableBar/src/bar.tsx
+++ b/src/components/RePureTableBar/src/bar.tsx
@@ -1,12 +1,6 @@
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
+import { delay, getKeyList, cloneDeep } from "@pureadmin/utils";
 import { defineComponent, ref, computed, type PropType, nextTick } from "vue";
-import {
-  delay,
-  cloneDeep,
-  isBoolean,
-  isFunction,
-  getKeyList
-} from "@pureadmin/utils";
 
 import Sortable from "sortablejs";
 import DragIcon from "./svg/drag.svg?component";
@@ -43,13 +37,8 @@ export default defineComponent({
     const loading = ref(false);
     const checkAll = ref(true);
     const isIndeterminate = ref(false);
-    const filterColumns = cloneDeep(props?.columns).filter(column =>
-      isBoolean(column?.hide)
-        ? !column.hide
-        : !(isFunction(column?.hide) && column?.hide())
-    );
     let checkColumnList = getKeyList(cloneDeep(props?.columns), "label");
-    const checkedColumns = ref(getKeyList(cloneDeep(filterColumns), "label"));
+    const checkedColumns = ref(checkColumnList);
     const dynamicColumns = ref(cloneDeep(props?.columns));
 
     const getDropdownItemStyle = computed(() => {
@@ -131,7 +120,7 @@ export default defineComponent({
       dynamicColumns.value = cloneDeep(props?.columns);
       checkColumnList = [];
       checkColumnList = await getKeyList(cloneDeep(props?.columns), "label");
-      checkedColumns.value = getKeyList(cloneDeep(filterColumns), "label");
+      checkedColumns.value = checkColumnList;
     }
 
     const dropdown = {
diff --git a/src/router/modules/error.ts b/src/router/modules/error.ts
index e60b17b..e074001 100644
--- a/src/router/modules/error.ts
+++ b/src/router/modules/error.ts
@@ -4,7 +4,7 @@ export default {
   meta: {
     icon: "informationLine",
     title: "异常页面",
-    // showLink: false,
+    showLink: false,
     rank: 9
   },
   children: [
diff --git a/src/views/system/hooks.ts b/src/views/system/hooks.ts
new file mode 100644
index 0000000..5465d94
--- /dev/null
+++ b/src/views/system/hooks.ts
@@ -0,0 +1,39 @@
+// 抽离可公用的工具函数等用于系统管理页面逻辑
+import { computed } from "vue";
+import { useDark } from "@pureadmin/utils";
+
+export function usePublicHooks() {
+  const { isDark } = useDark();
+
+  const switchStyle = computed(() => {
+    return {
+      "--el-switch-on-color": "#6abe39",
+      "--el-switch-off-color": "#e84749"
+    };
+  });
+
+  const tagStyle = computed(() => {
+    return (status: number) => {
+      return status === 1
+        ? {
+            "--el-tag-text-color": isDark.value ? "#6abe39" : "#389e0d",
+            "--el-tag-bg-color": isDark.value ? "#172412" : "#f6ffed",
+            "--el-tag-border-color": isDark.value ? "#274a17" : "#b7eb8f"
+          }
+        : {
+            "--el-tag-text-color": isDark.value ? "#e84749" : "#cf1322",
+            "--el-tag-bg-color": isDark.value ? "#2b1316" : "#fff1f0",
+            "--el-tag-border-color": isDark.value ? "#58191c" : "#ffa39e"
+          };
+    };
+  });
+
+  return {
+    /** 当前网页是否为`dark`模式 */
+    isDark,
+    /** 表现更鲜明的`el-switch`组件  */
+    switchStyle,
+    /** 表现更鲜明的`el-tag`组件  */
+    tagStyle
+  };
+}
diff --git a/src/views/system/notice/form.vue b/src/views/system/notice/form.vue
new file mode 100644
index 0000000..65d4ef0
--- /dev/null
+++ b/src/views/system/notice/form.vue
@@ -0,0 +1,55 @@
+<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/system/notice/index.vue b/src/views/system/notice/index.vue
new file mode 100644
index 0000000..eb03f53
--- /dev/null
+++ b/src/views/system/notice/index.vue
@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRole } from "./utils/hook";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+// 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 Search from "@iconify-icons/ep/search";
+import Refresh from "@iconify-icons/ep/refresh";
+import Menu from "@iconify-icons/ep/menu";
+import AddFill from "@iconify-icons/ri/add-circle-line";
+
+defineOptions({
+  name: "Role"
+});
+
+const formRef = ref();
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  // buttonClass,
+  onSearch,
+  resetForm,
+  openDialog,
+  handleMenu,
+  handleDelete,
+  // handleDatabase,
+  handleSizeChange,
+  handleCurrentChange,
+  handleSelectionChange
+} = useRole();
+</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]"
+    >
+      <el-form-item label="角色名称：" prop="name">
+        <el-input
+          v-model="form.name"
+          placeholder="请输入角色名称"
+          clearable
+          class="!w-[200px]"
+        />
+      </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(Search)"
+          :loading="loading"
+          @click="onSearch"
+        >
+          搜索
+        </el-button>
+        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
+          重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <PureTableBar
+      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
+          border
+          align-whole="center"
+          showOverflowTooltip
+          table-layout="auto"
+          :loading="loading"
+          :size="size"
+          adaptive
+          :data="dataList"
+          :columns="dynamicColumns"
+          :pagination="pagination"
+          :paginationSmall="size === 'small' ? true : false"
+          :header-cell-style="{
+            background: 'var(--el-table-row-hover-bg-color)',
+            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-button
+              class="reset-margin"
+              link
+              type="primary"
+              :size="size"
+              :icon="useRenderIcon(Menu)"
+              @click="handleMenu"
+            >
+              菜单权限
+            </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-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>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+}
+</style>
diff --git a/src/views/system/notice/utils/hook.tsx b/src/views/system/notice/utils/hook.tsx
new file mode 100644
index 0000000..073aa69
--- /dev/null
+++ b/src/views/system/notice/utils/hook.tsx
@@ -0,0 +1,241 @@
+import dayjs from "dayjs";
+import editForm from "../form.vue";
+import { message } from "@/utils/message";
+import { getRoleList } from "@/api/system";
+import { ElMessageBox } from "element-plus";
+import { usePublicHooks } from "../../hooks";
+import { addDialog } from "@/components/ReDialog";
+import { type FormItemProps } from "../utils/types";
+import { type PaginationProps } from "@pureadmin/table";
+import { reactive, ref, onMounted, h, toRaw } from "vue";
+
+export function useRole() {
+  const form = reactive({
+    name: "",
+    code: "",
+    status: ""
+  });
+  const formRef = ref();
+  const dataList = ref([]);
+  const loading = ref(true);
+  const switchLoadMap = ref({});
+  const { switchStyle } = usePublicHooks();
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  });
+  const columns: TableColumnList = [
+    {
+      label: "角色编号",
+      prop: "id",
+      minWidth: 100
+    },
+    {
+      label: "角色名称",
+      prop: "name",
+      minWidth: 120
+    },
+    {
+      label: "角色标识",
+      prop: "code",
+      minWidth: 150
+    },
+    {
+      label: "状态",
+      minWidth: 130,
+      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: "备注",
+      prop: "remark",
+      minWidth: 150
+    },
+    {
+      label: "创建时间",
+      minWidth: 180,
+      prop: "createTime",
+      formatter: ({ createTime }) =>
+        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 240,
+      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,
+      fullscreenIcon: true,
+      closeOnClickModal: false,
+      contentRenderer: () => h(editForm, { ref: formRef }),
+      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 handleMenu() {
+    message("等菜单管理页面开发后完善");
+  }
+
+  /** 数据权限 可自行开发 */
+  // function handleDatabase() {}
+
+  onMounted(() => {
+    onSearch();
+  });
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    // buttonClass,
+    onSearch,
+    resetForm,
+    openDialog,
+    handleMenu,
+    handleDelete,
+    // handleDatabase,
+    handleSizeChange,
+    handleCurrentChange,
+    handleSelectionChange
+  };
+}
diff --git a/src/views/system/notice/utils/rule.ts b/src/views/system/notice/utils/rule.ts
new file mode 100644
index 0000000..ea1dd19
--- /dev/null
+++ b/src/views/system/notice/utils/rule.ts
@@ -0,0 +1,8 @@
+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/system/notice/utils/types.ts b/src/views/system/notice/utils/types.ts
new file mode 100644
index 0000000..a17e900
--- /dev/null
+++ b/src/views/system/notice/utils/types.ts
@@ -0,0 +1,15 @@
+// 虽然字段很少 但是抽离出来 后续有扩展字段需求就很方便了
+
+interface FormItemProps {
+  /** 角色名称 */
+  name: string;
+  /** 角色编号 */
+  code: string;
+  /** 备注 */
+  remark: string;
+}
+interface FormProps {
+  formInline: FormItemProps;
+}
+
+export type { FormItemProps, FormProps };