mayiming/QXTstore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加bar组件

Browse Source
This commit is contained in:
马懿铭
2025-11-05 17:34:23 +08:00
parent 7314f23529
commit 3cb63ffca7
223 changed files with 23185 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
QXTfront/uni_modules/lime-icon/components/l-icon/icon.scss Normal file
View File

@@ -0,0 +1,21 @@
// $prefix: l !default;
/* #ifndef APP-NVUE || UNI-APP-X && APP */
@font-face {
font-family: $prefix;
src: url('https://tdesign.gtimg.com/icon/0.3.0/fonts/t.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* #endif */
/* #ifdef UNI-APP-X && APP */
@font-face {
font-family: $prefix;
/* #ifdef APP-HARMONY */
src: url('/uni_modules/lime-icon/hybrid/html/t3.ttf');
/* #endif */
/* #ifndef APP-HARMONY */
src: url('uni_modules/lime-icon/hybrid/html/t3.ttf');
/* #endif */
}
/* #endif */

27
QXTfront/uni_modules/lime-icon/components/l-icon/icons.uts Normal file
View File

@@ -0,0 +1,27 @@
// #ifndef APP-ANDROID || APP-HARMONY
import iconList from '../../static/icons.json';
export const icons = ref<Map<string, any | null>>((iconList as UTSJSONObject).toMap())
// #endif
// #ifdef APP-ANDROID || APP-HARMONY
export const icons = ref<Map<string, any | null>>(new Map<string, any | null>())
if (icons.value.size == 0) {
uni.getFileSystemManager().readFile({
// #ifdef APP-HARMONY
filePath: '/uni_modules/lime-icon/static/icons.json',
// #endif
// #ifndef APP-HARMONY
filePath: 'uni_modules/lime-icon/static/icons.json',
// #endif
encoding: 'utf-8',
success: (res) => {
const obj = JSON.parseObject(res.data as string)
if (obj == null) return
icons.value = obj!.toMap();
},
fail(err) {
console.log('[lime-icon getFileSystemManager]', err)
}
} as ReadFileOptions);
}
// #endif

63
QXTfront/uni_modules/lime-icon/components/l-icon/index.scss Normal file
View File

@@ -0,0 +1,63 @@
// 公共前缀
@import '@/uni_modules/lime-style/index.scss';
@import './icon';
$use-css-var: true;
$prefix: l !default;
$icon: #{$prefix}-icon;
/* #ifdef APP-NVUE || UNI-APP-X && APP */
$icon-size: create-var(icon-size, 16px);
$icon-color: create-var(icon-color, $text-color-1);
/* #endif */
/* #ifndef APP-NVUE || UNI-APP-X && APP */
$icon-size: create-var(icon-size, 1em);
$icon-color: create-var(icon-color, currentColor);
:host {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* #endif */
.#{$icon} {
/* #ifndef APP-NVUE || UNI-APP-X && APP */
font-family: $prefix;
display: inline-flex;
position: relative;
/* #endif */
&--font {
font-family: $prefix;
text-align: center;
// font-size: $icon-size;
// color: $icon-color;
/* #ifndef APP-NVUE || UNI-APP-X && APP */
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
// -webkit-background-clip: text;
// background-clip: text;
/* #endif */
}
&--image {
width: $icon-size;
height: $icon-size;
// background: red;
/* #ifndef APP-NVUE || UNI-APP-X && APP */
display: block;
/* #endif */
/* #ifdef WEB */
position: relative;
// ::deep(img) {
// z-index: -1;
// }
/* #endif */
}
}

189
QXTfront/uni_modules/lime-icon/components/l-icon/l-icon.uvue Normal file
View File

@@ -0,0 +1,189 @@
<template>
<text :key="iconCode" class="l-icon" :class="[classes, lClass]" :style="[styles, lStyle]" v-if="!isImage && !isIconify && !isSVG">{{iconCode}}</text>
<image class="l-icon" :class="[classes, lClass]" :style="[styles, lStyle]" v-else-if="(!isSVG && !hasIconify) && isImage" :src="iconUrl"></image>
<l-svg class="l-icon" :class="[classes, lClass]" :style="[styles, lStyle]" :color="color" :src="iconUrl" v-else :web="web" @error="imageError" @load="imageload"></l-svg>
</template>
<script lang="uts" setup>
/**
* LimeIcon 图标
* @description ICON集
* <br> 插件类型：LIconComponentPublicInstance
* @tutorial https://ext.dcloud.net.cn/plugin?id=14057
* @property {String} name 图标名称
* @property {String} color 颜色
* @property {String} size 尺寸
* @property {String} prefix 字体图标前缀
* @property {Boolean} inherit 是否继承颜色
* @property {Boolean} web 原生 app(nvue,uvue) 是否使用web渲染
* @event {Function} click 点击事件
*/
import { addUnit } from '@/uni_modules/lime-shared/addUnit';
import { IconCollection } from './types';
import { icons } from './icons'
// defineOptions({
// name: 'l-icon'
// })
const name = 'l-icon'
const IconifyURL : string = 'https://api.iconify.design/';
const $iconsHost : string | null = uni.getStorageSync('$limeIconsHost') as string | null
const props = defineProps({
name: {
type: String,
default: '',
required: true,
// validator: (value: string) : boolean => {
// // 确保是字符串类型且不为空
// return typeof value == 'string' && value.trim().length > 0
// }
},
color: {
type: String,
// default: ''
},
size: {
type: [String, Number],
},
prefix: {
type: String,
default: ''
},
lClass: {
type: String,
default: ''
},
// 对安卓IOS无效
inherit: {
type: Boolean,
default: true
},
web: {
type: Boolean,
default: false
},
lStyle: {
type: [String, Object, Array],
default: ''
},
})
// const emits = defineEmits(['click'])
const $iconCollection = inject<IconCollection>('$iconCollection', {has: false, icons: new Map<string, any|null>()} as IconCollection)
// #ifndef APP-ANDROID
const innerName = computed(():string => props.name ?? '')
// #endif
// #ifdef APP-ANDROID
const innerName = computed(():string => props.name)
// #endif
const collectionIcon = computed(():string|null => {
return $iconCollection.icons.get(innerName.value) as string | null
})
const webviewRef = ref<UniWebViewElement | null>(null)
const hasHost = computed<boolean>(() : boolean => innerName.value.indexOf('/') != -1)
const isIconify = computed<boolean>(() : boolean => {
return !hasHost.value && innerName.value.includes(':')
})
const hasIconify = computed<boolean>(() : boolean => {
// #ifdef APP && uniVersion >= 4.82
return isIconify.value //&& props.color != null
// #endif
// #ifndef APP && uniVersion >= 4.82
return isIconify.value
// #endif
})
const isImage = computed<boolean>(() : boolean => {
// #ifdef APP && uniVersion >= 4.82
return /\.(jpe?g|png|gif|bmp|webp|tiff|svg?)$/i.test(innerName.value) || /^data:image\/(jpeg|png|gif|bmp|webp|tiff|svg)/.test(innerName.value) || isIconify.value
// #endif
// #ifndef APP && uniVersion >= 4.82
return /\.(jpe?g|png|gif|bmp|webp|tiff?)$/i.test(innerName.value) || /^data:image\/(jpeg|png|gif|bmp|webp|tiff);base64,/.test(innerName.value)
// #endif
})
const isSVG = computed<boolean>(():boolean => {
// #ifdef APP && uniVersion >= 4.82
// 由于base64 安卓image尺寸不对
if(innerName.value.startsWith('data:image/svg+xml')) return true
// if(props.color == null) return false
return (/\.svg$/i.test(innerName.value) || innerName.value.startsWith('data:image/svg+xml') || innerName.value.startsWith('<svg'))
// #endif
// #ifndef APP && uniVersion >= 4.82
return /\.svg$/i.test(innerName.value) || innerName.value.startsWith('data:image/svg+xml') || innerName.value.startsWith('<svg')
// #endif
})
const classes = computed<Map<string, any>>(() : Map<string, any> => {
const cls = new Map<string, any>()
cls.set(`${name}--font`, !isImage.value && !isIconify.value && !isSVG.value)
cls.set(`${name}--image`, isImage.value || isIconify.value || isSVG.value)
cls.set(props.prefix, props.prefix.length > 0)
cls.set(props.lClass, props.lClass.length > 0)
// #ifndef UNI-APP-X && APP
cls.set(`is-inherit`, (isIconify.value) && (props.color && props.color.length > 0 || props.inherit))
// #endif
return cls
})
const styles = computed<Map<string, any>>(() : Map<string, any> => {
const style = new Map<string, any>();
const size = addUnit(props.size)
// #ifdef APP
if ((props.color != '' && props.color != null) && !isImage.value && !isIconify.value) {
style.set('color', props.color!)
}
// #endif
// #ifndef APP
if(props.color) {
style.set('color', props.color!)
}
// #endif
if (size != null) {
if (isImage.value || isIconify.value || isSVG.value) {
style.set('height', size)
style.set('width', size)
} else {
style.set('font-size', size)
}
}
return style
})
const iconCode = computed<string>(() : string => {
return icons.value.get(innerName.value) as string | null ?? (/[^\x00-\x7F]/.test(innerName.value) ? innerName.value : '')
})
const isError = ref(false)
const cacheMap = new Map<string, string>()
const iconUrl = computed(():string => {
const hasIconsHost = $iconsHost != null && $iconsHost != ''
// const hasIconCollection = $iconCollection.has
if(isImage.value && !isIconify.value) {
return hasHost.value ? innerName.value : ($iconsHost ?? '') + innerName.value
} else if(isIconify.value) {
// 防止重绘
if(cacheMap.has(innerName.value) && !isError.value) {
return cacheMap.get(innerName.value)!
}
// 如果存在collectionIcon则使用
// 如果设置的路径加载失败 就使用网络地址 就使用iconify api
const _host = `${hasIconsHost ? $iconsHost : IconifyURL}`
const _icon =collectionIcon.value ?? _host + `${innerName.value}.svg`.replace(/:/g, '/')
cacheMap.set(innerName.value, _icon)
return _icon
} else if(isSVG.value) {
return (/\.svg$/i.test(innerName.value) && $iconsHost != null && !hasHost.value ? $iconsHost : '') + innerName.value.replace(/'/g, '"')
} else {
return ''
}
})
const imageError = () => {
isError.value = true
}
const imageload = () => {
isError.value = false
}
</script>
<style lang="scss">
@import './index.scss';
</style>

151
QXTfront/uni_modules/lime-icon/components/l-icon/l-icon.vue Normal file
View File

@@ -0,0 +1,151 @@
<template>
<text class="l-icon" :class="[classes]" :style="[styles, lStyle]" v-if="!isImage && !isIconify && !isSVG" @click="$emit('click')">{{iconCode}}</text>
<image class="l-icon" :class="[classes]" :style="[styles, lStyle]" v-else-if="(!isSVG && !isIconify) && isImage" :src="iconUrl" @click="$emit('click')"></image>
<l-svg class="l-icon" :class="[classes]" :style="[styles, lStyle]" v-else :web="web" :color="color" :src="iconUrl" @error="imageError" @load="imageLoad" @click="$emit('click')"></l-svg>
</template>
<script lang="ts">
// @ts-nocheck
/**
* LimeIcon 图标
* @description ICON集
* @tutorial https://ext.dcloud.net.cn/plugin?id=14057
* @property {String} name 图标名称
* @property {String} color 颜色
* @property {String} size 尺寸
* @property {String} prefix 字体图标前缀
* @property {Boolean} inherit 是否继承颜色
* @property {Boolean} web 原生 app(nvue,uvue) 是否使用web渲染
* @event {Function} click 点击事件
*/
// @ts-nocheck
import { computed, defineComponent, ref, inject } from '@/uni_modules/lime-shared/vue';
import icons from '../../static/icons.json';
import { addUnit } from '@/uni_modules/lime-shared/addUnit';
import { isObject } from '@/uni_modules/lime-shared/isObject';
import IconProps from './props';
// #ifdef VUE2 && MP
import { getClassStr } from '@/uni_modules/lime-shared/getClassStr';
// #endif
// #ifdef APP-NVUE
import iconSrc from '@/uni_modules/lime-icon/hybrid/html/t3.ttf';
var domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
'fontFamily': "uniicons",
'src': "url('" + iconSrc + "')"
});
// #endif
const name = 'l-icon';
export default defineComponent({
name,
externalClasses: ['l-class'],
options: {
addGlobalClass: true,
virtualHost: true,
},
props: IconProps,
emits: ['click'],
setup(props, { emit }) {
const $iconCollection = inject('$iconCollection', null)
const { $limeIconsHost: $iconsHost } = uni as any
const IconifyURL = 'https://api.iconify.design/'
// const isAPP = uni.getSystemInfoSync().uniPlatform == 'app'
const innerName = computed(():string => props.name || '')
const hasHost = computed(() => `${innerName.value}`.indexOf('/') !== -1);
const isIconify = computed(() => !hasHost.value && `${innerName.value}`.includes(':'))
const collectionIcon = computed(() => isObject($iconCollection) && $iconCollection.icons[innerName.value])
const isImage = computed<boolean>(() : boolean => {
return /\.(jpe?g|png|gif|bmp|webp|tiff?)$/i.test(innerName.value) || /^data:image\/(jpeg|png|gif|bmp|webp|tiff);base64,/.test(innerName.value)
})
const isSVG = computed<boolean>(() : boolean => {
return /\.svg$/i.test(innerName.value) || innerName.value.startsWith('data:image/svg+xml') || innerName.value.startsWith('<svg')
})
const classes = computed(() => {
const { prefix } = props
const iconPrefix = prefix || name
const iconName = `${iconPrefix}-${innerName.value}`
const isFont = !isImage.value && !isIconify.value && !isSVG.value
const isImages = isImage.value || isIconify.value || isSVG.value
const cls = {
[iconPrefix]: !isImages && prefix,
[iconName]: !isImages,
[`${name}--image`]: isImages,
[`${name}--font`]: isFont,
// [`is-inherit`]: isIconify.value && (props.color || props.inherit)
}
// #ifdef VUE2 && MP
return getClassStr(cls)
// #endif
return cls
})
const iconCode = computed(() => {
const isImages = isImage.value || isIconify.value || isSVG.value
return (!isImages && icons[innerName.value]) || (/[^\x00-\x7F]/.test(innerName.value) ? innerName.value : '')
})
const isError = ref(false)
const cacheMap = new Map<string, string>()
const iconUrl = computed(() => {
const hasIconsHost = $iconsHost != null && $iconsHost != ''
// const hasIconCollection = $iconCollectiont != null
if (isImage.value) {
return hasHost.value ? innerName.value : ($iconsHost || '') + innerName.value
} else if (isIconify.value) {
// 防止重绘
if(cacheMap.has(innerName.value) && !isError.value) {
return cacheMap.get(innerName.value)!
}
// 如果存在collectionIcon则使用
// 如果设置的路径加载失败 就使用网络地址 就使用iconify api
// !isError.value &&
const _host = `${hasIconsHost ? $iconsHost : IconifyURL}`
const _icon = collectionIcon.value || _host + `${innerName.value}.svg`.replace(/:/g, '/')
cacheMap.set(innerName.value, _icon)
return _icon
} else if (isSVG.value) {
return (/\.svg$/i.test(innerName.value) && hasIconsHost && !hasHost.value ? $iconsHost : '') + innerName.value.replace(/'/g, '"')
} else {
return null
}
})
const styles = computed(() => {
const style : Record<string, any> = {
'color': props.color,
}
if (typeof props.size == 'number' || props.size) {
style['font-size'] = addUnit(props.size)
}
//#ifdef VUE2
// VUE2小程序最后一个值莫名的出现undefined
style['undefined'] = ''
// #endif
return style
})
const imageLoad = () => {
isError.value = false
}
const imageError = () => {
isError.value = true
}
return {
iconCode,
classes,
styles,
isImage,
isSVG,
isIconify,
iconUrl,
imageLoad,
imageError
}
}
})
</script>
<style lang="scss">
@import './index.scss';
</style>

31
QXTfront/uni_modules/lime-icon/components/l-icon/props.ts Normal file
View File

@@ -0,0 +1,31 @@
export const ariaProps = {
ariaHidden: Boolean,
ariaRole: String,
ariaLabel: String,
ariaLabelledby: String,
ariaDescribedby: String,
ariaBusy: Boolean,
// lStyle: String
}
export default {
...ariaProps,
lClass: String,
name: {
type: String,
required: true,
},
color: String,
size: [String, Number],
prefix: String,
// type: String,
inherit: {
type: Boolean,
default: true
},
web: {
type: Boolean,
default: true
},
lStyle:[String, Object, Array],
}

4
QXTfront/uni_modules/lime-icon/components/l-icon/types.ts Normal file
View File

@@ -0,0 +1,4 @@
export type IconCollection = {
has: boolean,
icons: Map<string, any|null>
}