@vuux/icons 1.0.0-beta.0 → 1.0.0-beta.1

package/demo/Data/index.vue

@@ -0,0 +1,137 @@
+<template>
+    <Skeleton v-show="loading" title :row="5" />
+    <p @click="exportJson">sssssssssssssssssssssssssss</p>
+    <div v-show="!loading" class="vuux-icons">
+        <div v-for="(group, gIndex) in icons" :key="gIndex" class="icons-data">
+            <h3>{{ group.text }}</h3>
+            <transition-group name="lists" tag="ul" class="icons-list">
+                <li v-for="(icon, index) in group.items" :key="icon.component" class="is-icon" draggable="true" @dragstart="onDragStart(gIndex, index)" @dragover.prevent="onDragOver(gIndex, index)" @drop="onDrop" @click="handleCopy(icon)">
+                    <Icon :name="icon.component" :size="22" color="red" />
+                    <!-- <span>{{ icon.component }}</span> -->
+                </li>
+            </transition-group>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import '@/static/less/icons.less'
+import data from '@apps/icons/demo/icons.json'
+import { Icon } from '@apps/icons/components'
+import { Message, Skeleton, Button } from 'vuux'
+import { onMounted, ref, shallowRef } from 'vue'
+
+/**
+ * 图标项类型
+ */
+interface Item {
+    component: string
+}
+/**
+ * 分组类型
+ */
+interface Data {
+    text: string
+    items: Item[]
+}
+/**
+ * loading
+ */
+const loading = shallowRef(true)
+/**
+ * 响应式图标分组列表
+ */
+const icons = ref<Data[]>(data)
+/**
+ * 当前拖拽图标所在分组索引
+ */
+let dragGroup = -1
+/**
+ * 当前拖拽图标在分组中的索引
+ */
+let dragIndex = -1
+/**
+ * 拖拽目标分组索引
+ */
+let targetGroup = -1
+/**
+ * 拖拽目标位置索引
+ */
+let targetIndex = -1
+/**
+ * 开始拖拽事件
+ *
+ * @param gIndex 拖拽图标所在分组索引
+ * @param index 拖拽图标在分组中的索引
+ */
+const onDragStart = (gIndex: number, index: number) => {
+    dragGroup = gIndex
+    dragIndex = index
+    targetGroup = -1
+    targetIndex = -1
+}
+/**
+ * 拖拽悬停事件
+ *
+ * @param gIndex 当前悬停的分组索引
+ * @param index 当前悬停的位置索引
+ */
+const onDragOver = (gIndex: number, index: number) => {
+    targetGroup = gIndex
+    targetIndex = index
+}
+/**
+ * 放下拖拽事件
+ * 将拖拽的图标从原分组移除并插入到目标分组
+ */
+const onDrop = () => {
+    if (dragGroup !== -1 && dragIndex !== -1 && targetGroup !== -1 && targetIndex !== -1) {
+        const dragged = icons.value[dragGroup].items[dragIndex]
+        //从原分组移除
+        icons.value[dragGroup].items.splice(dragIndex, 1)
+        //插入到目标分组
+        icons.value[targetGroup].items.splice(targetIndex, 0, dragged)
+    }
+    dragGroup = -1
+    dragIndex = -1
+    targetGroup = -1
+    targetIndex = -1
+}
+/**
+ * 导出当前图标排序为JSON文件
+ */
+const exportJson = () => {
+    const json = JSON.stringify(icons.value, null, 2)
+    const blob = new Blob([json], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'icons-order.json'
+    a.click()
+    URL.revokeObjectURL(url)
+}
+/**
+ * 复制
+ */
+const handleCopy = async (icon: Item) => {
+    try {
+        await navigator.clipboard.writeText(`<Icon name="${icon.component}" />`)
+        Message.success('复制成功')
+    } catch (e) {
+        Message.error('复制失败')
+    }
+}
+/**
+ * 组件挂载时
+ */
+onMounted(() => {
+    document.title = '图标 | Icons'
+    setTimeout(() => {
+        loading.value = false
+    }, 1000)
+})
+</script>
+<style scoped lang="less">
+.lists-move {
+    transition: transform 0.3s ease;
+}
+</style>

package/demo/Install/demo.md

@@ -0,0 +1,62 @@
+## 安装图标库
+
+```shell
+Node >= 16
+```
+
+## npm
+```shell
+npm install @vuux/icons
+```
+
+## pnpm
+```shell
+pnpm add  @vuux/icons
+```
+
+## yarn
+```shell
+yarn add  @vuux/icons
+```
+
+## 更改图标颜色
+```less
+:root {
+    //图标颜色
+    --app-icon-color: #596671;
+}
+```
+
+## 使用方式
+```html
+<template>
+     <Icon name="xxxx" />
+</template>
+<script setup lang="ts">
+import { Icon } from '@vuux/icons'
+</script>
+```
+
+## 图标Props
+```ts
+const props = withDefaults(
+    defineProps<{
+        //图标名
+        name: string
+        //图标颜色
+        color?: string
+        //图标大小
+        size?: number
+        //图标透明
+        opacity?: number
+    }>(),
+    {
+        color: 'var(--app-icon-color)',
+        size: 16,
+        opacity: 1
+    }
+)
+```
+
+## 交流群
+QQ群:70888820

package/demo/Install/index.vue

@@ -0,0 +1,10 @@
+<template>
+    <Demo />
+</template>
+<script setup lang="ts">
+import { onMounted } from 'vue'
+
+onMounted(() => {
+    document.title = '安装 | Icons'
+})
+</script>

package/demo/Update/demo.md

@@ -0,0 +1,11 @@
+## 1.0.0-beta.1
+
+<p class="update-time">2025-09-20</p>
+
+- 🚀 [更新] 新增图标
+
+## 1.0.0-beta.0
+
+<p class="update-time">2025-09-16</p>
+
+- 🚀 [发布] 发布1.0.0-beta.0

package/demo/Update/index.vue

@@ -0,0 +1,10 @@
+<template>
+    <Demo />
+</template>
+<script setup lang="ts">
+import { onMounted } from 'vue'
+
+onMounted(() => {
+    document.title = '更新记录 | Icons'
+})
+</script>