@quiteer/naive-extra 0.0.1

package/src/components/form/props.ts

@@ -0,0 +1,75 @@
+import type { GridItemProps, GridProps, SwitchProps } from 'naive-ui'
+import type { CSSProperties } from 'vue'
+import type { Recordable } from '../../const'
+
+export type ComponentType
+  = | 'NInput'
+    | 'NInputGroup'
+    | 'NInputPassword'
+    | 'NInputSearch'
+    | 'NInputTextArea'
+    | 'NInputNumber'
+    | 'NInputCountDown'
+    | 'NDynamicInput'
+    | 'NSelect'
+    | 'NTreeSelect'
+    | 'NRadioButtonGroup'
+    | 'NRadioGroup'
+    | 'NCheckbox'
+    | 'NCheckboxGroup'
+    | 'NAutoComplete'
+    | 'NCascader'
+    | 'NDatePicker'
+    | 'NMonthPicker'
+    | 'NRangePicker'
+    | 'NWeekPicker'
+    | 'NTimePicker'
+    | 'NSwitch'
+    | 'NStrengthMeter'
+    | 'NUpload'
+    | 'NIconPicker'
+    | 'NRender'
+    | 'NSlider'
+    | 'NRate'
+    | 'NDynamicTags'
+    | 'NImage'
+
+export interface FormSchema<T = Recordable<string>> {
+  field: keyof T
+  label: string
+  labelMessage?: string
+  labelMessageStyle?: object | string
+  defaultValue?: any
+  component?: ComponentType
+  componentProps?: Record<string, any>
+  slot?: string
+  rules?: object[]
+  giProps?: GridItemProps
+  isFull?: boolean
+  suffix?: string
+}
+
+export interface Props {
+  schemas: FormSchema<Recordable<string>>[]
+  disabled?: boolean
+  // 标签宽度  固定宽度
+  labelWidth?: number | string
+  labelPlacement?: 'top' | 'left'
+  // 是否展示为行内表单
+  inline?: boolean
+  // 大小
+  size?: 'small' | 'medium' | 'large'
+  // 组件是否width 100%
+  isFull?: boolean
+  // grid 配置
+  gridProps?: GridProps
+  // grid 样式
+  gridStyle?: CSSProperties
+  // gi配置
+  giProps?: GridItemProps
+}
+
+export interface CustomSwitchProps extends SwitchProps {
+  checkedText: string
+  uncheckedText: string
+}

package/src/components/icon/IconPicker.vue

@@ -0,0 +1,255 @@
+<script setup lang="ts">
+import { getCollections, getIconNames, searchIcons } from './iconify'
+import QuiIcon from './index.vue'
+
+const props = defineProps<{
+  modelValue?: string // 格式: "collection:name"
+  pageSize?: number // 每页加载数量
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+  (e: 'select', value: string): void
+}>()
+
+const searchQuery = ref('')
+const selectedCollection = ref<string>('mdi')
+const currentPage = ref(1)
+const hasMore = ref(true)
+const loading = ref(false)
+
+const collections = ref<string[]>([])
+const allIcons = ref<{ collection: string, name: string }[]>([])
+const displayedIcons = ref<{ collection: string, name: string }[]>([])
+
+// 缓存各集合图标名
+const iconsCache = new Map<string, string[]>()
+
+const collectionOptions = computed(() => {
+  return collections.value.map(col => ({ label: col, value: col }))
+})
+
+async function initCollections() {
+  const cols = await getCollections()
+  collections.value = cols
+  if (cols.includes('mdi')) {
+    selectedCollection.value = 'mdi'
+  }
+  else if (cols.length > 0) {
+    selectedCollection.value = cols[0] || ''
+  }
+}
+
+async function loadPage(page: number, reset = false) {
+  loading.value = true
+  if (reset) {
+    currentPage.value = 1
+    displayedIcons.value = []
+  }
+  else {
+    currentPage.value = page
+  }
+
+  try {
+    const query = searchQuery.value.trim().toLowerCase()
+
+    // 如果是搜索模式
+    if (query) {
+      if (reset) {
+        // 执行搜索
+        allIcons.value = await searchIcons(query)
+      }
+    }
+    // 如果是浏览模式
+    else {
+      // 检查缓存
+      const currentCol = selectedCollection.value
+      let names = iconsCache.get(currentCol)
+
+      if (!names) {
+        names = await getIconNames(currentCol)
+        iconsCache.set(currentCol, names)
+      }
+
+      if (reset) {
+        allIcons.value = names.map(name => ({ collection: currentCol, name }))
+      }
+    }
+
+    // 分页逻辑
+    const pageSize = props.pageSize || 200
+    const start = (currentPage.value - 1) * pageSize
+    const end = start + pageSize
+
+    const pageIcons = allIcons.value.slice(start, end)
+
+    if (reset) {
+      displayedIcons.value = pageIcons
+    }
+    else {
+      displayedIcons.value.push(...pageIcons)
+    }
+
+    hasMore.value = end < allIcons.value.length
+  }
+  catch (error) {
+    console.error('Failed to load icons:', error)
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+let searchTimeout: any
+
+function handleSearchInput() {
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    currentPage.value = 1
+    loadPage(1, true)
+  }, 500)
+}
+
+function handleCollectionChange() {
+  searchQuery.value = '' // 切换集合时清空搜索
+  loadPage(1, true)
+}
+
+// 滚动到底部加载更多
+function handleScroll(e: Event) {
+  const target = e.target as HTMLElement
+  if (target.scrollTop + target.clientHeight >= target.scrollHeight - 100) {
+    if (hasMore.value && !loading.value) {
+      currentPage.value++
+      loadPage(currentPage.value)
+    }
+  }
+}
+
+// 选择图标
+function selectIcon(collection: string, name: string) {
+  const iconId = `${collection}:${name}`
+  emit('update:modelValue', iconId)
+  emit('select', iconId)
+}
+
+onMounted(async () => {
+  await initCollections()
+  loadPage(1, true)
+})
+</script>
+
+<template>
+  <NCard
+    class="icon-picker w-full mx-auto h-[600px]"
+    content-style="padding: 0; display: flex; flex-direction: column; height: 100%; overflow: hidden;"
+    :bordered="true"
+  >
+    <!-- 搜索 & 集合筛选 -->
+    <div class="p-3 border-b border-gray-200 dark:border-gray-700">
+      <n-grid :cols="24" :x-gap="12">
+        <n-gi :span="16">
+          <NInput
+            v-model:value="searchQuery"
+            placeholder="搜索图标 (e.g. home, user)"
+            clearable
+            @input="handleSearchInput"
+          >
+            <template #prefix>
+              <QuiIcon icon="carbon:search" class="text-gray-400" />
+            </template>
+          </NInput>
+        </n-gi>
+        <n-gi :span="8">
+          <NSelect
+            v-model:value="selectedCollection"
+            :options="collectionOptions"
+            filterable
+            placeholder="选择集合"
+            :disabled="!!searchQuery"
+            @update:value="handleCollectionChange"
+          />
+        </n-gi>
+      </n-grid>
+    </div>
+
+    <!-- 图标网格 -->
+    <div class="flex-1 overflow-hidden relative">
+      <NScrollbar
+        class="h-full"
+        content-class="p-4"
+        @scroll="handleScroll"
+      >
+        <div v-if="displayedIcons.length">
+          <n-grid
+            cols="8 s:10 m:12 l:16 xl:20"
+            responsive="screen"
+            :x-gap="8"
+            :y-gap="8"
+          >
+            <n-gi
+              v-for="item in displayedIcons"
+              :key="`${item.collection}:${item.name}`"
+            >
+              <NTooltip trigger="hover">
+                <template #trigger>
+                  <div
+                    class="aspect-square flex items-center justify-center rounded cursor-pointer transition-colors border border-transparent hover:bg-gray-100 dark:hover:bg-gray-700 hover:border-gray-200 dark:hover:border-gray-600"
+                    :class="{ 'bg-primary-50 text-primary-600 border-primary-200': modelValue === `${item.collection}:${item.name}` }"
+                    @click="selectIcon(item.collection, item.name)"
+                  >
+                    <QuiIcon
+                      :icon="`${item.collection}:${item.name}`"
+                      size="24"
+                    />
+                  </div>
+                </template>
+                {{ item.name }}
+              </NTooltip>
+            </n-gi>
+          </n-grid>
+        </div>
+
+        <!-- 空状态 -->
+        <div v-if="!loading && !displayedIcons.length" class="h-full flex items-center justify-center min-h-[200px]">
+          <NEmpty description="未找到图标" />
+        </div>
+
+        <!-- 底部加载中 -->
+        <div v-if="loading && displayedIcons.length > 0" class="py-4 flex justify-center w-full">
+          <NSpin size="small" />
+        </div>
+      </NScrollbar>
+
+      <!-- 初始加载遮罩 -->
+      <div v-if="loading && displayedIcons.length === 0" class="absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-800/80 z-10">
+        <NSpin size="large" />
+      </div>
+    </div>
+
+    <!-- 当前选中预览 -->
+    <div v-if="modelValue" class="p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50">
+      <n-flex justify="space-between" align="center">
+        <n-flex align="center" :size="8">
+          <span class="text-sm text-gray-500">已选:</span>
+          <div class="flex items-center gap-2 bg-white dark:bg-gray-800 px-2 py-1 rounded border border-gray-200 dark:border-gray-700">
+            <QuiIcon :icon="modelValue" size="20" />
+            <NText code class="text-sm">
+              {{ modelValue }}
+            </NText>
+          </div>
+        </n-flex>
+
+        <NTag size="small" type="success" :bordered="false">
+          {{ modelValue.split(':')[0] }}
+        </NTag>
+      </n-flex>
+    </div>
+  </NCard>
+</template>
+
+<style scoped>
+.icon-picker {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+</style>

package/src/components/icon/iconify.ts

@@ -0,0 +1,80 @@
+/**
+ * 获取所有图标集合
+ *
+ * 从 Iconify API 获取可用的图标集合列表
+ *
+ * @returns {Promise<string[]>} 集合前缀列表
+ */
+export async function getCollections(): Promise<string[]> {
+  try {
+    const response = await fetch('https://api.iconify.design/collections')
+    const data = await response.json()
+    return Object.keys(data)
+  }
+  catch (error) {
+    console.error('Failed to fetch collections:', error)
+    return []
+  }
+}
+
+/**
+ * 获取指定集合的所有图标名称
+ *
+ * @param collection - 集合前缀
+ * @returns {Promise<string[]>} 图标名称列表
+ */
+export async function getIconNames(collection: string): Promise<string[]> {
+  try {
+    const response = await fetch(`https://api.iconify.design/collection?prefix=${collection}`)
+    const data = await response.json()
+
+    const names = new Set<string>()
+
+    // 从 uncategorized 获取
+    if (data.uncategorized) {
+      data.uncategorized.forEach((name: string) => names.add(name))
+    }
+
+    // 从 categories 获取
+    if (data.categories) {
+      Object.values(data.categories).forEach((categoryIcons: any) => {
+        categoryIcons.forEach((name: string) => names.add(name))
+      })
+    }
+
+    // 兜底：如果上面都没找到，尝试从 icons 对象键名获取
+    if (names.size === 0 && data.icons) {
+      Object.keys(data.icons).forEach(name => names.add(name))
+    }
+
+    return Array.from(names).sort()
+  }
+  catch (error) {
+    console.error(`Failed to fetch icons for ${collection}:`, error)
+    return []
+  }
+}
+
+/**
+ * 搜索图标
+ *
+ * @param query - 搜索关键词
+ * @returns {Promise<{collection: string, name: string}[]>} 图标列表
+ */
+export async function searchIcons(query: string): Promise<{ collection: string, name: string }[]> {
+  try {
+    const response = await fetch(`https://api.iconify.design/search?query=${encodeURIComponent(query)}&limit=999`)
+    const data = await response.json()
+    if (data.icons) {
+      return data.icons.map((fullIcon: string) => {
+        const [collection, name] = fullIcon.split(':')
+        return { collection, name }
+      })
+    }
+    return []
+  }
+  catch (error) {
+    console.error('Failed to search icons:', error)
+    return []
+  }
+}

package/src/components/icon/index.ts

@@ -0,0 +1,7 @@
+import QuiIconPicker from './IconPicker.vue'
+import QuiIcon from './index.vue'
+
+export {
+  QuiIcon,
+  QuiIconPicker
+}

package/src/components/icon/index.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+
+defineProps<{
+  /**
+   * Iconify 图标名称，格式：`collection:name`
+   * 例如：'mdi:home', 'carbon:user', 'tabler:settings'
+   */
+  icon?: string
+  size?: string | number
+  color?: string
+}>()
+</script>
+
+<template>
+  <Icon
+    v-if="icon"
+    :icon="icon"
+    :width="size"
+    :height="size"
+    :color="color"
+  />
+</template>

package/src/components/layout/const.ts

@@ -0,0 +1,102 @@
+import type { Props } from './props'
+import type { LayoutType } from './types'
+
+export const DEFAULT_LAYOUT_PROPS: Required<Omit<Props, 'baseRoutes'>> = {
+  /** @description 布局类型 */
+  type: 'side-menu',
+  /** @description 是否显示边框 */
+  bordered: true,
+  /** @description 反色样式（Header/Sider/Footer/Menu） */
+  inverted: false,
+  /** @description 是否折叠侧边栏 */
+  isCollapsed: false,
+  /** @description 是否显示底部 */
+  showFooter: true,
+  /** @description 头部高度 */
+  headerHeight: 54,
+  /** @description 底部高度 */
+  footerHeight: 42,
+  /** @description 底部是否占满宽度 */
+  footerFull: true,
+  /** @description 侧边栏宽度 */
+  siderWidth: 220,
+  /** @description 侧边栏混合模式的宽度 */
+  siderMixedWidth: 80,
+  /** @description 折叠侧边栏宽度 */
+  collapsedWidth: 60,
+  /** @description 当前激活的路由键 */
+  activeKey: '/',
+  /** @description 菜单路由 */
+  menuOptions: [],
+  /** @description 是否开启手风琴模式 */
+  accordion: true
+}
+
+export const DEFAULT_LAYOUT_TYPE: { type: LayoutType, name: string, desc: string }[] = [
+  {
+    type: 'side-menu',
+    name: '左侧菜单布局',
+    desc: '左侧多层级菜单布局，顶部为面包屑'
+  },
+  {
+    type: 'side-group-menu',
+    name: '左侧分组菜单布局',
+    desc: '左侧多层级菜单布局，分组展示，顶部为面包屑'
+  },
+  {
+    type: 'side-mixed-menu',
+    name: '左侧混合菜单布局',
+    desc: '左侧多层级菜单布局，第一级菜单可折叠，其余层级为标题和分组展示，顶部为面包屑'
+  },
+  {
+    type: 'side-menu/2',
+    name: '左侧-顶部菜单布局',
+    desc: '左侧单层级菜单布局，顶部为水平多层级菜单，无面包屑'
+  },
+  {
+    type: 'top-menu',
+    name: '顶部菜单布局',
+    desc: '无侧边栏，顶部为水平多层级菜单，无面包屑'
+  },
+  {
+    type: 'top-menu/2',
+    name: '顶部-左侧菜单布局',
+    desc: '顶部菜单为主，顶部为水平单层级菜单，左侧为垂直多层级菜单，无面包屑'
+  },
+  {
+    type: 'top-group-menu/2',
+    name: '顶部-左侧分组菜单布局',
+    desc: '顶部菜单为主，顶部为水平单层级菜单，左侧为垂直多层级菜单，分组展示，无面包屑'
+  },
+  {
+    type: 'top-mixed-menu/2',
+    name: '顶部-左侧混合菜单布局',
+    desc: '顶部菜单为主，顶部为水平单层级菜单，左侧为垂直多层级菜单，左侧第一级菜单可折叠，其余层级为标题和分组展示，无面包屑'
+  },
+  {
+    type: 'blank',
+    name: '无菜单布局',
+    desc: '无菜单布局，页面不包含任何主导航菜单，适用于登录页、引导页、全屏应用等场景'
+  }
+] as const
+
+/** @description 所有布局类型 */
+export const ALL_LAYOUT_TYPES: LayoutType[] = DEFAULT_LAYOUT_TYPE.map(item => item.type)
+
+/** @description 侧边栏布局类型 */
+export const SIDE_LAYOUT_TYPES: LayoutType[] = ['side-menu', 'side-menu/2', 'side-group-menu', 'side-mixed-menu', 'top-menu/2', 'top-group-menu/2', 'top-mixed-menu/2']
+
+/** @description 侧边栏分组布局类型 */
+export const SIDE_GROUP_LAYOUT_TYPES: LayoutType[] = ['side-group-menu', 'top-group-menu/2']
+
+/** @description 侧边栏混合布局类型 */
+export const SIDE_MIXED_LAYOUT_TYPES: LayoutType[] = ['side-mixed-menu', 'top-mixed-menu/2']
+
+/** @description 顶部布局类型 */
+export const TOP_LAYOUT_TYPES: LayoutType[] = ['side-menu/2', 'top-menu', 'top-menu/2', 'top-group-menu/2', 'top-mixed-menu/2']
+
+/** @description 面包屑布局类型 */
+export const BREADCRUMB_LAYOUT_TYPES: LayoutType[] = ['side-menu', 'side-group-menu', 'side-mixed-menu']
+
+/** @description 无菜单布局类型 */
+export const BLANK_LAYOUT_TYPES: LayoutType[] = ['blank']