root/airz-uniapp
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: add ide configs, new svg icon and optimize header & icon component

Browse Source 
1. 新增.idea系列IDE配置文件
2. 添加圆形箭头svg图标
3. 优化AppHeader返回图标尺寸和位置
4. 重构AppIcon支持svg矢量图标
This commit is contained in:
hujun
2026-09-11 18:06:08 +08:00
parent efb88e40d2
commit 60b58442ce
10 changed files with 8100 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/AppHeader.uvue
+2 -2
View File
@@ -2,7 +2,7 @@
<view class="header-wrap">
<view class="status-bar"></view>
<view class="app-header">
<view class="header-side" @click="handleBack"><AppIcon v-if="back" name="chevron-right" :size="44" class="back-icon" /></view>
<view class="header-side" @click="handleBack"><AppIcon v-if="back" name="chevron-right" :size="34" class="back-icon" /></view>
<text class="header-title">{{ title }}</text>
<view class="header-side header-right"><slot></slot></view>
</view>
@@ -26,6 +26,6 @@
.app-header { height: 96rpx; padding: 0 24rpx; flex-direction: row; align-items: center; justify-content: space-between; border-bottom: 1rpx solid #edf1f7; }
.header-side { width: 100rpx; height: 96rpx; align-items: flex-start; justify-content: center; }
.header-right { align-items: flex-end; }
.back-icon { transform: rotate(180deg) scale(1.2); margin-top: 30rpx; }
.back-icon { transform: rotate(180deg); margin-top: 0; }
.header-title { font-size: 34rpx; font-weight: 700; color: #111d35; }
</style>
components/AppIcon.uvue
+4 -3
View File
@@ -1,13 +1,14 @@
<template>
<image class="app-icon" :class="muted ? 'muted-icon' : ''" :style="iconStyle" :src="iconSrc" mode="aspectFit"></image>
<image class="app-icon" :class="(muted ? 'muted-icon ' : '') + (isVector ? 'vector-icon' : '')" :style="iconStyle" :src="iconSrc" mode="aspectFit"></image>
</template>
<script setup lang="uts">
const props = defineProps({ name: { type: String, default: 'sparkles' }, size: { type: Number, default: 42 }, muted: { type: Boolean, default: false } })
const iconSrc = computed(() => '/static/icons-generated/' + props.name + '.png')
const isVector = computed(() => props.name == 'chevron-right' || props.name == 'arrow-right')
const iconSrc = computed(() => isVector.value ? '/static/icons/' + (props.name == 'chevron-right' ? 'chevron-circle' : 'arrow-right') + '.svg' : '/static/icons-generated/' + props.name + '.png')
const iconStyle = computed(() => 'width:' + props.size + 'rpx;height:' + props.size + 'rpx;')
</script>
<style>
.app-icon { display: block; flex-shrink: 0; transform: scale(1.2); }.muted-icon { opacity: .48; }
.app-icon { display: block; flex-shrink: 0; transform: scale(1.2); }.vector-icon { transform: none; }.muted-icon { opacity: .48; }
</style>