From c48607c123d04069fece02acfa5db56a26b667d2 Mon Sep 17 00:00:00 2001
From: JaguarJack <njphper@gmail.com>
Date: Thu, 11 May 2023 14:21:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=20icons=20=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/permissions/form/create.vue         | 13 +++--
 .../admin/components/admin/icons/index.vue    | 50 +++++++++++++++----
 2 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/modules/Permissions/views/permissions/form/create.vue b/modules/Permissions/views/permissions/form/create.vue
index fa23dba..78464a8 100644
--- a/modules/Permissions/views/permissions/form/create.vue
+++ b/modules/Permissions/views/permissions/form/create.vue
@@ -42,7 +42,14 @@
           <Select v-model="formData.permission_mark" allow-create placeholder="请选择" api="controllers" :query="{ module: formData.module }" v-else />
         </el-form-item>
         <el-form-item label="菜单Icon" prop="icon" v-if="!isAction">
-          <el-input v-model="formData.icon" name="icon" clearable @click="open" />
+          <el-popover placement="right" :width="400" trigger="click">
+            <template #reference>
+              <el-input v-model="formData.icon" name="icon" clearable />
+            </template>
+            <div>
+              <Icons v-model="formData.icon" @close="closeSelectIcon" />
+            </div>
+          </el-popover>
         </el-form-item>
         <el-form-item label="所属组件" prop="component" v-if="!isAction">
           <Select v-model="formData.component" placeholder="请选择" allow-create api="components" :query="{ module: formData.module }" />
@@ -92,10 +99,6 @@
       <el-button type="primary" @click="submitForm(form)">{{ $t('system.confirm') }}</el-button>
     </div>
   </el-form>
-
-  <Dialog v-model="visible" title="选择 Icon" width="1000px" destroy-on-close>
-    <Icons v-model="formData.icon" @close="closeSelectIcon" />
-  </Dialog>
 </template>
 
 <script lang="ts" setup>
diff --git a/resources/admin/components/admin/icons/index.vue b/resources/admin/components/admin/icons/index.vue
index f0bf1d1..607188a 100644
--- a/resources/admin/components/admin/icons/index.vue
+++ b/resources/admin/components/admin/icons/index.vue
@@ -1,20 +1,28 @@
 <template>
-  <div :class="`grid ${grid} gap-y-6`">
-    <div v-for="icon in icons" :key="icon" class="flex justify-center hover:cursor-pointer" @click="selectIcon(icon)">
-      <div v-if="modelValue === icon">
-        <div class="flex justify-center w-full text-violet-700"><Icon :name="icon" /></div>
-        <div class="text-sm text-violet-700">{{ icon }}</div>
-      </div>
+  <div class="h-84 pl-2 pr-2">
+    <div :class="`grid ${grid} gap-y-4 gap-x-4` + ' mt-3 h-72'">
+      <div v-for="icon in icons" :key="icon" class="flex justify-center hover:cursor-pointer" @click="selectIcon(icon)">
+        <div v-if="modelValue === icon">
+          <div class="flex justify-center w-full text-violet-700"><Icon :name="icon" className="w-5 h-5" /></div>
+          <div class="text-[1px] text-violet-700">{{ icon }}</div>
+        </div>
 
-      <div v-else>
-        <div class="flex justify-center w-full"><Icon :name="icon" /></div>
-        <div class="text-sm">{{ icon }}</div>
+        <div v-else>
+          <div class="flex justify-center w-full"><Icon :name="icon" className="w-5 h-5" /></div>
+          <div class="text-[1px]">{{ icon }}</div>
+        </div>
       </div>
     </div>
+
+    <div class="flex justify-center mt-6">
+      <el-pagination layout="prev,next" :page-size="limit" :total="total" prev-text="上一页" next-text="下一页" @next-click="handleNext" @prev-click="handlePrev" />
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+
 const props = defineProps({
   modelValue: {
     type: String,
@@ -22,18 +30,38 @@ const props = defineProps({
   },
   grid: {
     type: String,
-    default: 'grid-cols-5',
+    default: 'grid-cols-4',
   },
 })
 
 const emits = defineEmits(['update:modelValue', 'close'])
 
+const limit = ref(16)
+const icons = ref([])
+const total = ref(0)
+function getIcons(page = 1) {
+  const start = (page - 1) * limit.value
+  const end = start + limit.value
+  icons.value = constIcons.slice(start, end)
+}
+
+onMounted(() => {
+  getIcons()
+  total.value = constIcons.length
+})
+const handleNext = value => {
+  getIcons(value)
+}
+
+const handlePrev = value => {
+  getIcons(value)
+}
 const selectIcon = (icon: string) => {
   emits('update:modelValue', icon)
   emits('close')
 }
 // icons
-const icons = [
+const constIcons = [
   'academic-cap',
   'adjustments-horizontal',
   'adjustments-vertical',