feat: 添加自定义字体和图标资源，优化登录和首页界面

refactor(login): 使用自定义输入框组件替换原生输入框 refactor(index): 重构网格布局代码，使用动态渲染方式 style: 更新全局字体样式，移除默认字体设置 chore: 添加多个字体文件和图标资源 docs: 更新应用名称和版本号
2025-08-20 16:21:13 +08:00
parent ca4d93b902
commit 7a3d4f8c8a
40 changed files with 473 additions and 90 deletions
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,36 +1,15 @@
 <template>
 	<view class="home-container">
-		<u--text text="入库" size="36" bold></u--text>
-		<u-grid :border="false" @click="gridCheck" col="4">
-			<u-grid-item v-if="item.type === 1" v-for="(item,index) in gridItemList" :key="index" :name="item.url">
-				<u-icon color="#2979ff" :customStyle="{paddingTop:20+'rpx'}" :name="item.icon" :size="128"></u-icon>
-				<text class="grid-text">{{item.name}}</text>
-			</u-grid-item>
-		</u-grid>
-		<u-gap height="20"></u-gap>
-		<u--text text="出库" size="36" bold></u--text>
-		<u-grid :border="false" @click="gridCheck" col="4">
-			<u-grid-item v-if="item.type === 2" v-for="(item,index) in gridItemList" :key="index" :name="item.url">
-				<u-icon color="#909399" :customStyle="{paddingTop:20+'rpx'}" :name="item.icon" :size="128"></u-icon>
-				<text class="grid-text">{{item.name}}</text>
-			</u-grid-item>
-		</u-grid>
-		<u-gap height="20"></u-gap>
-		<u--text text="库存管理" size="36" bold></u--text>
-		<u-grid :border="false" @click="gridCheck" col="4">
-			<u-grid-item v-if="item.type === 3" v-for="(item,index) in gridItemList" :key="index" :name="item.url">
-				<u-icon color="#ff9900" :customStyle="{paddingTop:20+'rpx'}" :name="item.icon" :size="128"></u-icon>
-				<text class="grid-text">{{item.name}}</text>
-			</u-grid-item>
-		</u-grid>
-		<u-gap height="20"></u-gap>
-		<u--text text="库内管理" size="36" bold></u--text>
-		<u-grid :border="false" @click="gridCheck" col="4">
-			<u-grid-item v-if="item.type === 4" v-for="(item,index) in gridItemList" :key="index" :name="item.url">
-				<u-icon color="#19be6b" :customStyle="{paddingTop:20+'rpx'}" :name="item.icon" :size="128"></u-icon>
-				<text class="grid-text">{{item.name}}</text>
-			</u-grid-item>
-		</u-grid>
+		<view v-for="type in 4" :key="type">
+			<u--text :text="getSectionTitle(type)" size="36" bold></u--text>
+			<u-grid :border="false" @click="gridCheck" col="4">
+				<u-grid-item v-for="(item,index) in getItemsByType(type)" :key="index" :name="item.url">
+					<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="'/static/images/index-icons/' + item.icon + '.svg'" :size="128"></u-icon>
+					<text class="grid-text">{{item.name}}</text>
+				</u-grid-item>
+			</u-grid>
+			<u-gap height="20" v-if="type < 4"></u-gap>
+		</view>
 	</view>
 </template>

@@ -148,23 +127,15 @@
 						index: 12
 					},
 					{
-						name: '移库',
-						icon: 'rewind-right-fill',
-						url: '/pages/relocation/relocation',
-						type: 4,
-						index: 13
-					}
-				]
-			};
+							name: '移库',
+							icon: 'rewind-right-fill',
+							url: '/pages/relocation/relocation',
+							type: 4,
+							index: 13
+						}
+					]
+				};
 		},
-		onLoad: function() {
-			this.GetInfo();
-		},
-		mounted() {
-			// console.log('屏幕宽度', uni.getWindowInfo().screenWidth)
-			// console.log('可用高度', uni.getWindowInfo().windowHeight)
-		},
-
 		methods: {
 			...mapActions([
 				'LogOut',
@@ -178,8 +149,22 @@
 					url
 				});
 			},
-		}
-	};
+			getSectionTitle(type) {
+				const titles = ['', '入库', '出库', '库存管理', '库内管理'];
+				return titles[type] || '';
+			},
+			getItemsByType(type) {
+				return this.gridItemList.filter(item => item.type === type);
+			}
+		},
+		onLoad: function() {
+			this.GetInfo();
+		},
+		mounted() {
+		// console.log('屏幕宽度', uni.getWindowInfo().screenWidth)
+		// console.log('可用高度', uni.getWindowInfo().windowHeight)
+	}
+};
 </script>

 <style lang="scss" scoped>
--- a/pages/login/login.vue
+++ b/pages/login/login.vue
@@ -2,28 +2,28 @@
 	<view class="common-container">
 		<!-- 登录图片 -->
 		<view class="login-banner-box">
-			<u--image :showLoading="true" src="/static/images/ui/login.png" width="360px" height="240px"></u--image>
+			<u--image :showLoading="true" src="/static/images/login-icons/login.png" width="360px" height="240px"></u--image>
 		</view>
 		<!-- 登录框 -->
 		<view class="login-form-box">
 			<!-- 登录表单 -->
 			<u--form labelPosition="left" :model="loginForm" ref="uForm">
 				<u-form-item prop="username" borderBottom>
-					<u--input v-model="loginForm.username" border="none" placeholder="账号" prefixIcon="account"
-						prefixIconStyle="font-size: 22px;color: #909399"></u--input>
+					<custom-input v-model="loginForm.username" border="none" placeholder="账号" prefixIcon="/static/images/login-icons/account.svg"
+						prefixIconStyle="color: #909399" iconSize="32"></custom-input>
 				</u-form-item>
 				<u-form-item prop="password" borderBottom>
-					<u--input v-model="loginForm.password" border="none" placeholder="密码" prefixIcon="lock"
-						prefixIconStyle="font-size: 22px;color: #909399"></u--input>
+					<custom-input v-model="loginForm.password" border="none" placeholder="密码" prefixIcon="/static/images/login-icons/lock.svg"
+						prefixIconStyle="color: #909399" iconSize="32"></custom-input>
 				</u-form-item>
 				<u-form-item prop="BaseUrl" borderBottom>
-					<u-input v-model="BaseUrl" border="none" placeholder="连接地址,例:127.0.0.1:8888" prefixIcon="ie"
-						prefixIconStyle="font-size: 22px;color: #909399">
+					<custom-input v-model="BaseUrl" border="none" placeholder="连接地址,例:127.0.0.1:8888" prefixIcon="/static/images/login-icons/ie.svg"
+						prefixIconStyle="color: #909399" iconSize="32">
 						<template slot="suffix">
 							<u-button type="primary" size="mini" text="修改地址" @click="handlerBaseUrlConfirm"
 								shape="circle"></u-button>
 						</template>
-					</u-input>
+					</custom-input>
 				</u-form-item>
 				<u-form-item prop="button" style="margin-top: 60px">
 					<u-button @click="handleLogin" type="primary" :color="buttonColor" text="登录"
@@ -39,40 +39,27 @@
 </template>

 <script>
-	import {
-		getCodeImg
-	} from '@/api/login';
-	import {
-		getToken,
-		setToken,
-		removeToken
-	} from '@/utils/auth';
-	import {
-		getBaseUrl,
-		setBaseUrl,
-		removeBaseUrl
-	} from '@/utils/baseUrl';
-	import {
-		getLoginInfo,
-		setLoginInfo,
-		removeLoginInfo
-	} from '@/utils/loginInfo';
+	import { getCodeImg } from '@/api/login';
+	import { setToken } from '@/utils/auth';
+	import { getBaseUrl, setBaseUrl } from '@/utils/baseUrl';
+	import { getLoginInfo, setLoginInfo } from '@/utils/loginInfo';
 	import config from '@/config';
 	export default {
 		onLoad() {
-			const systemInfo = uni.getSystemInfoSync();
-			this.version = systemInfo.appVersion;
+			this.version = uni.$u.sys().appWgtVersion;
 		},
 		data() {
 			return {
+				// 版本号
 				version: '',
+				// 验证码相关
 				codeUrl: '',
 				captchaEnabled: false,
-				// 用户注册开关
-				register: false,
-				globalConfig: getApp().globalData.config,
+				// 基础URL
 				BaseUrl: '127.0.0.1:8888',
+				// 按钮颜色
 				buttonColor: 'linear-gradient(to right, #3296F9, #235FF5)',
+				// 登录表单
 				loginForm: {
 					username: '',
 					password: '',
@@ -87,14 +74,22 @@
 		},
 		methods: {
 			init() {
-				// 初始化链接地址设计
+				// 初始化基础URL
+				this.initBaseUrl();
+				// 初始化用户登录信息
+				this.initLoginInfo();
+			},
+			// 初始化基础URL
+			initBaseUrl() {
 				let baseUrl = getBaseUrl();
 				if (!baseUrl) {
 					baseUrl = '192.168.60.251:8888';
 					setBaseUrl(baseUrl);
 				}
 				this.BaseUrl = baseUrl;
-				// 初始化用户登录存储
+			},
+			// 初始化用户登录信息
+			initLoginInfo() {
 				try {
 					let loginInfoStr = getLoginInfo();
 					let loginInfo = JSON.parse(loginInfoStr);
@@ -106,7 +101,6 @@
 					// console.log(e);
 					//TODO handle the exception
 				}
-
 			},
 			// 获取图形验证码
 			getCode() {