zant-admin 2.0.2 → 2.0.4

package/src/components/IconPicker.vue

@@ -1,351 +1,351 @@
-<template>
-  <div class="icon-picker">
-    <a-input-group compact>
-      <a-input
-        v-model:value="selectedIconName"
-        placeholder="请选择图标"
-        readonly
-        style="width: calc(100% - 40px)"
-      />
-      <a-button type="primary" @click="showPicker = true" style="width: 40px">
-        <template #icon>
-          <SearchOutlined />
-        </template>
-      </a-button>
-    </a-input-group>
-
-    <!-- 图标选择弹窗 -->
-    <a-modal
-      v-model:open="showPicker"
-      title="选择图标"
-      width="800px"
-      :footer="null"
-      @cancel="showPicker = false"
-    >
-      <div class="icon-picker-modal">
-        <!-- 搜索框 -->
-        <div class="search-section">
-          <a-input
-            v-model:value="searchText"
-            placeholder="搜索图标名称"
-            allow-clear
-            @change="handleSearch"
-          >
-            <template #prefix>
-              <SearchOutlined />
-            </template>
-          </a-input>
-        </div>
-
-        <!-- 图标分类 -->
-        <div class="category-section">
-          <a-radio-group
-            v-model:value="selectedCategory"
-            @change="handleCategoryChange"
-          >
-            <a-radio-button value="all">全部</a-radio-button>
-            <a-radio-button value="outlined">线框风格</a-radio-button>
-            <a-radio-button value="filled">实底风格</a-radio-button>
-            <a-radio-button value="twoTone">双色风格</a-radio-button>
-          </a-radio-group>
-        </div>
-
-        <!-- 图标列表 -->
-        <div class="icon-list-section">
-          <a-spin :spinning="loading">
-            <div class="icon-grid">
-              <div
-                v-for="icon in filteredIcons"
-                :key="icon.name"
-                class="icon-item"
-                :class="{
-                  'icon-item-selected': selectedIconName === icon.name,
-                }"
-                @click="selectIcon(icon)"
-              >
-                <div class="icon-wrapper">
-                  <component :is="icon.component" class="icon-display" />
-                </div>
-                <div class="icon-name">{{ icon.displayName }}</div>
-              </div>
-            </div>
-          </a-spin>
-        </div>
-
-        <!-- 选中的图标预览 -->
-        <div v-if="selectedIconName" class="selected-preview">
-          <div class="preview-title">当前选中：</div>
-          <div class="preview-content">
-            <component :is="selectedIconComponent" class="preview-icon" />
-            <span class="preview-name">{{ selectedIconName }}</span>
-          </div>
-        </div>
-
-        <!-- 操作按钮 -->
-        <div class="action-section">
-          <a-space>
-            <a-button type="primary" @click="confirmSelection"
-              >确认选择</a-button
-            >
-            <a-button @click="clearSelection">清空</a-button>
-            <a-button @click="showPicker = false">取消</a-button>
-          </a-space>
-        </div>
-      </div>
-    </a-modal>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted } from 'vue'
-import * as Icons from '@ant-design/icons-vue'
-import { SearchOutlined } from '@ant-design/icons-vue'
-
-// 定义 props
-const props = defineProps({
-  value: {
-    type: String,
-    default: '',
-  },
-})
-
-// 定义 emits
-const emit = defineEmits(['update:value', 'change'])
-
-// 响应式数据
-const showPicker = ref(false)
-const searchText = ref('')
-const selectedCategory = ref('all')
-const loading = ref(false)
-const selectedIconName = ref(props.value)
-
-// 图标数据
-const allIcons = ref([])
-
-// 过滤后的图标列表
-const filteredIcons = computed(() => {
-  let icons = allIcons.value
-
-  // 按分类过滤
-  if (selectedCategory.value !== 'all') {
-    icons = icons.filter(icon => {
-      if (selectedCategory.value === 'outlined') {
-        return icon.name.endsWith('Outlined')
-      } else if (selectedCategory.value === 'filled') {
-        return icon.name.endsWith('Filled')
-      } else if (selectedCategory.value === 'twoTone') {
-        return icon.name.endsWith('TwoTone')
-      }
-      return true
-    })
-  }
-
-  // 按搜索文本过滤
-  if (searchText.value) {
-    const searchLower = searchText.value.toLowerCase()
-    icons = icons.filter(
-      icon =>
-        icon.displayName.toLowerCase().includes(searchLower) ||
-        icon.name.toLowerCase().includes(searchLower),
-    )
-  }
-
-  return icons
-})
-
-// 选中的图标组件
-const selectedIconComponent = computed(() => {
-  if (!selectedIconName.value) return null
-  return (
-    allIcons.value.find(icon => icon.name === selectedIconName.value)
-      ?.component || null
-  )
-})
-
-// 初始化图标数据
-const initIcons = () => {
-  loading.value = true
-
-  // 过滤掉一些不常用的图标
-  const excludedIcons = ['IconProvider', 'createFromIconfontCN']
-
-  const iconList = Object.keys(Icons)
-    .filter(key => !excludedIcons.includes(key))
-    .map(key => ({
-      name: key,
-      displayName: key.replace(/([A-Z])/g, ' $1').trim(),
-      component: Icons[key],
-    }))
-    .sort((a, b) => a.displayName.localeCompare(b.displayName))
-
-  allIcons.value = iconList
-  loading.value = false
-}
-
-// 处理搜索
-const handleSearch = () => {
-  // 搜索逻辑已在 computed 中处理
-}
-
-// 处理分类变化
-const handleCategoryChange = () => {
-  // 分类逻辑已在 computed 中处理
-}
-
-// 选择图标
-const selectIcon = icon => {
-  selectedIconName.value = icon.name
-}
-
-// 确认选择
-const confirmSelection = () => {
-  emit('update:value', selectedIconName.value)
-  emit('change', selectedIconName.value)
-  showPicker.value = false
-}
-
-// 清空选择
-const clearSelection = () => {
-  selectedIconName.value = ''
-  emit('update:value', '')
-  emit('change', '')
-  showPicker.value = false
-}
-
-// 监听外部 value 变化
-const updateSelectedIcon = newValue => {
-  selectedIconName.value = newValue
-}
-
-// 暴露方法给父组件
-defineExpose({
-  updateSelectedIcon,
-})
-
-// 生命周期
-onMounted(() => {
-  initIcons()
-})
-</script>
-
-<style scoped>
-.icon-picker {
-  width: 100%;
-}
-
-.icon-picker-modal {
-  max-height: 60vh;
-  overflow-y: auto;
-}
-
-.search-section {
-  margin-bottom: 16px;
-}
-
-.category-section {
-  margin-bottom: 16px;
-}
-
-.icon-list-section {
-  margin-bottom: 16px;
-}
-
-.icon-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
-  gap: 12px;
-  max-height: 300px;
-  overflow-y: auto;
-  padding: 8px 0;
-}
-
-.icon-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 12px 8px;
-  border: 1px solid #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.3s;
-  background: #fff;
-}
-
-.icon-item:hover {
-  border-color: #1890ff;
-  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
-}
-
-.icon-item-selected {
-  border-color: #1890ff;
-  background-color: #f0f8ff;
-}
-
-.icon-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  margin-bottom: 8px;
-}
-
-.icon-display {
-  font-size: 24px;
-  color: #666;
-}
-
-.icon-item:hover .icon-display,
-.icon-item-selected .icon-display {
-  color: #1890ff;
-}
-
-.icon-name {
-  font-size: 12px;
-  color: #666;
-  text-align: center;
-  word-break: break-all;
-  line-height: 1.2;
-}
-
-.selected-preview {
-  padding: 16px;
-  border-top: 1px solid #f0f0f0;
-  margin-top: 16px;
-  background: #fafafa;
-  border-radius: 6px;
-}
-
-.preview-title {
-  font-weight: 500;
-  margin-bottom: 8px;
-  color: #333;
-}
-
-.preview-content {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.preview-icon {
-  font-size: 24px;
-  color: #1890ff;
-}
-
-.preview-name {
-  font-family: monospace;
-  background: #f5f5f5;
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 14px;
-}
-
-.action-section {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 16px;
-  padding-top: 16px;
-  border-top: 1px solid #f0f0f0;
-}
-</style>
+<template>
+  <div class="icon-picker">
+    <a-input-group compact>
+      <a-input
+        v-model:value="selectedIconName"
+        placeholder="请选择图标"
+        readonly
+        style="width: calc(100% - 40px)"
+      />
+      <a-button type="primary" @click="showPicker = true" style="width: 40px">
+        <template #icon>
+          <SearchOutlined />
+        </template>
+      </a-button>
+    </a-input-group>
+
+    <!-- 图标选择弹窗 -->
+    <a-modal
+      v-model:open="showPicker"
+      title="选择图标"
+      width="800px"
+      :footer="null"
+      @cancel="showPicker = false"
+    >
+      <div class="icon-picker-modal">
+        <!-- 搜索框 -->
+        <div class="search-section">
+          <a-input
+            v-model:value="searchText"
+            placeholder="搜索图标名称"
+            allow-clear
+            @change="handleSearch"
+          >
+            <template #prefix>
+              <SearchOutlined />
+            </template>
+          </a-input>
+        </div>
+
+        <!-- 图标分类 -->
+        <div class="category-section">
+          <a-radio-group
+            v-model:value="selectedCategory"
+            @change="handleCategoryChange"
+          >
+            <a-radio-button value="all">全部</a-radio-button>
+            <a-radio-button value="outlined">线框风格</a-radio-button>
+            <a-radio-button value="filled">实底风格</a-radio-button>
+            <a-radio-button value="twoTone">双色风格</a-radio-button>
+          </a-radio-group>
+        </div>
+
+        <!-- 图标列表 -->
+        <div class="icon-list-section">
+          <a-spin :spinning="loading">
+            <div class="icon-grid">
+              <div
+                v-for="icon in filteredIcons"
+                :key="icon.name"
+                class="icon-item"
+                :class="{
+                  'icon-item-selected': selectedIconName === icon.name,
+                }"
+                @click="selectIcon(icon)"
+              >
+                <div class="icon-wrapper">
+                  <component :is="icon.component" class="icon-display" />
+                </div>
+                <div class="icon-name">{{ icon.displayName }}</div>
+              </div>
+            </div>
+          </a-spin>
+        </div>
+
+        <!-- 选中的图标预览 -->
+        <div v-if="selectedIconName" class="selected-preview">
+          <div class="preview-title">当前选中：</div>
+          <div class="preview-content">
+            <component :is="selectedIconComponent" class="preview-icon" />
+            <span class="preview-name">{{ selectedIconName }}</span>
+          </div>
+        </div>
+
+        <!-- 操作按钮 -->
+        <div class="action-section">
+          <a-space>
+            <a-button type="primary" @click="confirmSelection"
+              >确认选择</a-button
+            >
+            <a-button @click="clearSelection">清空</a-button>
+            <a-button @click="showPicker = false">取消</a-button>
+          </a-space>
+        </div>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import * as Icons from '@ant-design/icons-vue'
+import { SearchOutlined } from '@ant-design/icons-vue'
+
+// 定义 props
+const props = defineProps({
+  value: {
+    type: String,
+    default: '',
+  },
+})
+
+// 定义 emits
+const emit = defineEmits(['update:value', 'change'])
+
+// 响应式数据
+const showPicker = ref(false)
+const searchText = ref('')
+const selectedCategory = ref('all')
+const loading = ref(false)
+const selectedIconName = ref(props.value)
+
+// 图标数据
+const allIcons = ref([])
+
+// 过滤后的图标列表
+const filteredIcons = computed(() => {
+  let icons = allIcons.value
+
+  // 按分类过滤
+  if (selectedCategory.value !== 'all') {
+    icons = icons.filter(icon => {
+      if (selectedCategory.value === 'outlined') {
+        return icon.name.endsWith('Outlined')
+      } else if (selectedCategory.value === 'filled') {
+        return icon.name.endsWith('Filled')
+      } else if (selectedCategory.value === 'twoTone') {
+        return icon.name.endsWith('TwoTone')
+      }
+      return true
+    })
+  }
+
+  // 按搜索文本过滤
+  if (searchText.value) {
+    const searchLower = searchText.value.toLowerCase()
+    icons = icons.filter(
+      icon =>
+        icon.displayName.toLowerCase().includes(searchLower) ||
+        icon.name.toLowerCase().includes(searchLower),
+    )
+  }
+
+  return icons
+})
+
+// 选中的图标组件
+const selectedIconComponent = computed(() => {
+  if (!selectedIconName.value) return null
+  return (
+    allIcons.value.find(icon => icon.name === selectedIconName.value)
+      ?.component || null
+  )
+})
+
+// 初始化图标数据
+const initIcons = () => {
+  loading.value = true
+
+  // 过滤掉一些不常用的图标
+  const excludedIcons = ['IconProvider', 'createFromIconfontCN']
+
+  const iconList = Object.keys(Icons)
+    .filter(key => !excludedIcons.includes(key))
+    .map(key => ({
+      name: key,
+      displayName: key.replace(/([A-Z])/g, ' $1').trim(),
+      component: Icons[key],
+    }))
+    .sort((a, b) => a.displayName.localeCompare(b.displayName))
+
+  allIcons.value = iconList
+  loading.value = false
+}
+
+// 处理搜索
+const handleSearch = () => {
+  // 搜索逻辑已在 computed 中处理
+}
+
+// 处理分类变化
+const handleCategoryChange = () => {
+  // 分类逻辑已在 computed 中处理
+}
+
+// 选择图标
+const selectIcon = icon => {
+  selectedIconName.value = icon.name
+}
+
+// 确认选择
+const confirmSelection = () => {
+  emit('update:value', selectedIconName.value)
+  emit('change', selectedIconName.value)
+  showPicker.value = false
+}
+
+// 清空选择
+const clearSelection = () => {
+  selectedIconName.value = ''
+  emit('update:value', '')
+  emit('change', '')
+  showPicker.value = false
+}
+
+// 监听外部 value 变化
+const updateSelectedIcon = newValue => {
+  selectedIconName.value = newValue
+}
+
+// 暴露方法给父组件
+defineExpose({
+  updateSelectedIcon,
+})
+
+// 生命周期
+onMounted(() => {
+  initIcons()
+})
+</script>
+
+<style scoped>
+.icon-picker {
+  width: 100%;
+}
+
+.icon-picker-modal {
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.search-section {
+  margin-bottom: 16px;
+}
+
+.category-section {
+  margin-bottom: 16px;
+}
+
+.icon-list-section {
+  margin-bottom: 16px;
+}
+
+.icon-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  gap: 12px;
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 8px 0;
+}
+
+.icon-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12px 8px;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s;
+  background: #fff;
+}
+
+.icon-item:hover {
+  border-color: #1890ff;
+  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
+}
+
+.icon-item-selected {
+  border-color: #1890ff;
+  background-color: #f0f8ff;
+}
+
+.icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin-bottom: 8px;
+}
+
+.icon-display {
+  font-size: 24px;
+  color: #666;
+}
+
+.icon-item:hover .icon-display,
+.icon-item-selected .icon-display {
+  color: #1890ff;
+}
+
+.icon-name {
+  font-size: 12px;
+  color: #666;
+  text-align: center;
+  word-break: break-all;
+  line-height: 1.2;
+}
+
+.selected-preview {
+  padding: 16px;
+  border-top: 1px solid #f0f0f0;
+  margin-top: 16px;
+  background: #fafafa;
+  border-radius: 6px;
+}
+
+.preview-title {
+  font-weight: 500;
+  margin-bottom: 8px;
+  color: #333;
+}
+
+.preview-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.preview-icon {
+  font-size: 24px;
+  color: #1890ff;
+}
+
+.preview-name {
+  font-family: monospace;
+  background: #f5f5f5;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.action-section {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #f0f0f0;
+}
+</style>