zant-admin 1.0.0

package/src/components/IconPicker.vue

@@ -0,0 +1,344 @@
+<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>