github/go-view
github/go-view
3
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-02-23 15:52:49 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: iconify图标新增离线功能

Browse Source
This commit is contained in:
奔跑的面条 2023-12-17 00:12:50 +08:00
parent ce1a5476d6
commit 4c7c5cf4ba
10 changed files with 147 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -16,6 +16,7 @@
"dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"@amap/amap-jsapi-types": "^0.0.8",
"@iconify/json": "^2.2.158",
"@types/color": "^3.0.3",
"@types/crypto-js": "^4.1.1",
"@types/keymaster": "^1.6.30",
@ -32,6 +33,7 @@
"gsap": "^3.11.3",
"highlight.js": "^11.5.0",
"html2canvas": "^1.4.1",
"iconify-icon": "^1.0.8",
"keymaster": "^1.6.2",
"mitt": "^3.0.0",
"monaco-editor": "^0.33.0",
@ -50,8 +52,6 @@
"devDependencies": {
"@commitlint/cli": "^17.0.2",
"@commitlint/config-conventional": "^17.0.2",
"@iconify/types": "^2.0.0",
"@iconify/vue": "^4.1.1",
"@types/node": "^16.11.26",
"@types/three": "^0.144.0",
"@typescript-eslint/eslint-plugin": "^5.18.0",

42
pnpm-lock.yaml
View File

@ -11,6 +11,9 @@ dependencies:
'@amap/amap-jsapi-types':
specifier: ^0.0.8
version: 0.0.8
'@iconify/json':
specifier: ^2.2.158
version: 2.2.158
'@types/color':
specifier: ^3.0.3
version: 3.0.3
@ -59,6 +62,9 @@ dependencies:
html2canvas:
specifier: ^1.4.1
version: 1.4.1
iconify-icon:
specifier: ^1.0.8
version: 1.0.8
keymaster:
specifier: ^1.6.2
version: 1.6.2
@ -87,7 +93,7 @@ dependencies:
specifier: ^0.13.1
version: 0.13.1(vue@3.2.37)
vue-i18n:
specifier: ^9.2.2
specifier: 9.2.2
version: 9.2.2(vue@3.2.37)
vue-router:
specifier: 4.0.12
@ -109,12 +115,6 @@ devDependencies:
'@commitlint/config-conventional':
specifier: ^17.0.2
version: 17.0.2
'@iconify/types':
specifier: ^2.0.0
version: 2.0.0
'@iconify/vue':
specifier: ^4.1.1
version: 4.1.1(vue@3.2.37)
'@types/node':
specifier: ^16.11.26
version: 16.11.40
@ -1122,18 +1122,16 @@ packages:
resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
dev: true
/@iconify/types@2.0.0:
resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
dev: true
/@iconify/vue@4.1.1(vue@3.2.37):
resolution: {integrity: sha512-RL85Bm/DAe8y6rT6pux7D2FJSiUEM/TPfyK7GrbAOfTSwrhvwJW+S5yijdGcmtXouA8MtuH9C7l4hiSE4mLMjg==}
peerDependencies:
vue: '>=3'
/@iconify/json@2.2.158:
resolution: {integrity: sha512-6foGYcG97nmYpJ7N0MAbtfH7SKf7RvoOCYYSBi8gs+8qopXzplIP2F4lQiLrjpbPQihAoTercmGYWi4ABxLX1A==}
dependencies:
'@iconify/types': 2.0.0
vue: 3.2.37
dev: true
pathe: 1.1.1
dev: false
/@iconify/types@2.0.0:
resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
dev: false
/@intlify/core-base@9.2.2:
resolution: {integrity: sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==}
@ -3668,6 +3666,12 @@ packages:
hasBin: true
dev: true
/iconify-icon@1.0.8:
resolution: {integrity: sha512-jvbUKHXf8EnGGArmhlP2IG8VqQLFFyTvTqb9LVL2TKTh7/eCCD1o2HHE9thpbJJb6B8hzhcFb6rOKhvo7reNKA==}
dependencies:
'@iconify/types': 2.0.0
dev: false
/iconv-lite@0.4.24:
resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
engines: {node: '>=0.10.0'}
@ -4741,6 +4745,10 @@ packages:
engines: {node: '>=8'}
dev: true
/pathe@1.1.1:
resolution: {integrity: sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==}
dev: false
/picocolors@1.0.0:
resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}

3
src/components/GoIconify/index.ts Normal file
View File

@ -0,0 +1,3 @@
import GoIconify from './index.vue';
export { GoIconify };

34
src/components/GoIconify/index.vue Normal file
View File

@ -0,0 +1,34 @@
<template>
<iconify-icon
:icon="icon"
:rotate="`${rotate}deg`"
:width="width"
:style="{
color: color
}"
></iconify-icon>
</template>
<script setup lang="ts">
defineProps({
icon: {
type: String,
required: true
},
color: {
type: String,
default: '#999999',
required: false
},
width: {
type: [String, Number],
default: '20',
required: false
},
rotate: {
type: [String, Number],
default: '0',
required: false
}
})
</script>

126
src/main.ts
View File

@ -1,59 +1,67 @@
import { createApp } from 'vue'
import App from './App.vue'
import router, { setupRouter } from '@/router'
import i18n from '@/i18n/index'
import { setupStore } from '@/store'
import { setupNaive, setupDirectives, setupCustomComponents, initFunction } from '@/plugins'
import { GoAppProvider } from '@/components/GoAppProvider/index'
import { setHtmlTheme } from '@/utils'
// 引入全局样式
import '@/styles/pages/index.scss'
// 引入动画
import 'animate.css/animate.min.css'
// 引入标尺
import 'vue3-sketch-ruler/lib/style.css'
async function appInit() {
const goAppProvider = createApp(GoAppProvider)
const app = createApp(App)
// 注册全局常用的 naive-ui 组件
setupNaive(app)
// 注册全局自定义指令
setupDirectives(app)
// 注册全局自定义组件
setupCustomComponents(app)
// 挂载状态管理
setupStore(app)
// 解决路由守卫，Axios中可使用，Dialog，Message 等全局组件
goAppProvider.mount('#appProvider', true)
// 挂载路由
setupRouter(app)
// 路由准备就绪后挂载APP实例
await router.isReady()
// Store 准备就绪后处理主题色
setHtmlTheme()
// 语言注册
app.use(i18n)
// 挂载到页面
app.mount('#app', true)
// 挂载到 window
window['$vue'] = app
}
appInit().then(() => {
initFunction()
})
import { createApp } from 'vue'
import App from './App.vue'
import router, { setupRouter } from '@/router'
import i18n from '@/i18n/index'
import { setupStore } from '@/store'
import { setupNaive, setupDirectives, setupCustomComponents, initFunction } from '@/plugins'
import { GoAppProvider } from '@/components/GoAppProvider/index'
import { setHtmlTheme } from '@/utils'
import { addCollection } from 'iconify-icon'
import uimIcons from '@iconify/json/json/uim.json'
import lineMdIcons from '@iconify/json/json/line-md.json'
import wiIcons from '@iconify/json/json/wi.json'
// 引入全局样式
import '@/styles/pages/index.scss'
// 引入动画
import 'animate.css/animate.min.css'
// 引入标尺
import 'vue3-sketch-ruler/lib/style.css'
// 注册图标
addCollection(uimIcons)
addCollection(lineMdIcons)
addCollection(wiIcons)
async function appInit() {
const goAppProvider = createApp(GoAppProvider)
const app = createApp(App)
// 注册全局常用的 naive-ui 组件
setupNaive(app)
// 注册全局自定义指令
setupDirectives(app)
// 注册全局自定义组件
setupCustomComponents(app)
// 挂载状态管理
setupStore(app)
// 解决路由守卫，Axios中可使用，Dialog，Message 等全局组件
goAppProvider.mount('#appProvider', true)
// 挂载路由
setupRouter(app)
// 路由准备就绪后挂载APP实例
await router.isReady()
// Store 准备就绪后处理主题色
setHtmlTheme()
// 语言注册
app.use(i18n)
// 挂载到页面
app.mount('#app', true)
// 挂载到 window
window['$vue'] = app
}
appInit().then(() => {
initFunction()
})

4
src/packages/components/Icons/Default/Icon/index.vue
View File

@ -1,13 +1,13 @@
<template>
<div class="go-icon-box">
<Icon :icon="((dataset || '') as string)" :color="color" :width="size" :rotate="rotate" />
<GoIconify :icon="((dataset || '') as string)" :color="color" :width="size" :rotate="rotate" />
</div>
</template>
<script setup lang="ts">
import { PropType, toRefs } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { Icon } from '@iconify/vue'
import { GoIconify } from '@/components/GoIconify'
const props = defineProps({
chartConfig: {

4
src/views/chart/ContentCharts/components/ChartsItemBox/index.vue
View File

@ -23,7 +23,7 @@
</n-text>
</div>
<div class="list-center go-flex-center go-transition" draggable="true">
<Icon v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="48" />
<GoIconify v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="48" style="height: auto" />
<chart-glob-image v-else class="list-img" :chartConfig="item" />
</div>
<div class="list-bottom">
@ -64,7 +64,7 @@ import { createComponent } from '@/packages'
import { ConfigType, CreateComponentType, PackagesCategoryEnum } from '@/packages/index.d'
import { ChatCategoryEnum } from '@/packages/components/Photos/index.d'
import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
import { Icon } from '@iconify/vue'
import { GoIconify } from '@/components/GoIconify'
import { icon } from '@/plugins'
import omit from 'lodash/omit'

4
src/views/chart/ContentCharts/components/ChartsSearch/index.vue
View File

@ -37,7 +37,7 @@
:title="item.title"
@click="selectChartHandle(item)"
>
<Icon v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="20" />
<GoIconify v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="20" />
<chart-glob-image v-else class="list-item-img" :chartConfig="item" />
<n-text class="list-item-fs" depth="2">{{ item.title }}</n-text>
</div>
@ -79,7 +79,7 @@ import { isString, addEventListener, removeEventListener } from '@/utils'
import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
import { componentInstall, loadingStart, loadingFinish, loadingError } from '@/utils'
import { ChartGlobImage } from '@/components/Pages/ChartGlobImage'
import { Icon } from '@iconify/vue'
import { GoIconify } from '@/components/GoIconify'
const props = defineProps({
menuOptions: {

3
types/shims-vue.d.ts vendored
View File

@ -5,5 +5,4 @@ declare module '*.vue' {
}
declare module 'lodash/*'
declare module 'dom-helpers'
declare module '@iconify/vue'
declare module 'dom-helpers'

11
vite.config.ts
View File

@ -25,7 +25,7 @@ export default defineConfig({
},
{
find: 'vue-i18n',
replacement: 'vue-i18n/dist/vue-i18n.cjs.js', //解决i8n警告
replacement: 'vue-i18n/dist/vue-i18n.cjs.js' //解决i8n警告
}
],
dedupe: ['vue']
@ -40,7 +40,14 @@ export default defineConfig({
}
},
plugins: [
vue(),
vue({
template: {
compilerOptions: {
// 排除 iconify 图标影子组件编译报错
isCustomElement: tag => tag.startsWith('iconify-icon')
}
}
}),
monacoEditorPlugin({
languageWorkers: ['editorWorkerService', 'typescript', 'json', 'html']
}),