zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 登录页面的调整以及配置文件调整

Browse Source
This commit is contained in:
zoujing
2025-10-28 20:00:06 +08:00
parent a53df50140
commit bd47eefd8a
7 changed files with 61 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
client-configs.json
View File

@@ -5,8 +5,7 @@
"name": "智念",
"placeholder": "快告诉智念您在想什么~",
"loginDesc": "您好，欢迎来到智念科技",
"logo": "@/pages/login/images/dh.png",
"subLogo": "@/pages/login/images/dhwq.png"
"logo": "https://oss.nianxx.cn/mp/static/version_101/login/dh_logo.png"
},
"duohua": {
"clientId": "2",
@@ -14,8 +13,7 @@
"name": "朵朵",
"placeholder": "快告诉朵朵您在想什么~",
"loginDesc": "您好，欢迎来到朵花温泉",
"logo": "@/pages/login/images/dh.png",
"subLogo": "@/pages/login/images/dhwq.png"
"logo": "https://oss.nianxx.cn/mp/static/version_101/login/dh_logo.png"
},
"tianmu": {
"clientId": "4",
@@ -23,7 +21,6 @@
"name": "沐沐",
"placeholder": "快告诉沐沐您在想什么~",
"loginDesc": "您好，欢迎来到天沐温泉",
"logo": "@/pages/login/images/tm.png",
"subLogo": "@/pages/login/images/wsmm.png"
"logo": "https://oss.nianxx.cn/mp/static/version_101/login/tm_logo.png"
}
}

37
scripts/README-update-appid.md
View File

@@ -6,7 +6,7 @@
- 支持通过客户端名称切换配置
- 自动更新相关配置文件
- 统一的JSON配置文件管理
- 统一的 JSON 配置文件管理
- 完整的错误处理和验证
## 配置文件结构
@@ -21,8 +21,7 @@
"name": "智念",
"placeholder": "快告诉智念您在想什么~",
"loginDesc": "您好，欢迎来到智念科技",
"logo": "@/pages/login/images/dh.png",
"subLogo": "@/pages/login/images/dhwq.png"
"logo": "https://oss.nianxx.cn/mp/static/version_101/login/dh_logo.png"
},
"duohua": {
"clientId": "2",
@@ -30,8 +29,7 @@
"name": "朵花",
"placeholder": "快告诉朵朵您在想什么~",
"loginDesc": "您好，欢迎来到朵花温泉",
"logo": "@/pages/login/images/dh.png",
"subLogo": "@/pages/login/images/dhwq.png"
"logo": "https://oss.nianxx.cn/mp/static/version_101/login/dh_logo.png"
},
"tianmu": {
"clientId": "4",
@@ -39,8 +37,7 @@
"name": "天沐",
"placeholder": "快告诉沐沐您在想什么~",
"loginDesc": "您好，欢迎来到天沐温泉",
"logo": "@/pages/login/images/tm.png",
"subLogo": "@/pages/login/images/wsmm.png"
"logo": "https://oss.nianxx.cn/mp/static/version_101/login/tm_logo.png"
}
}
```
@@ -98,6 +95,7 @@ node scripts/update-appid.js tianmu
- 保持 JSON 格式化
3. **src/constant/base.js**
- 更新 `getCurrentConfig()` 函数返回的客户端配置
4. **client-configs.json**
@@ -156,18 +154,19 @@ A: 可以使用版本控制系统恢复，或者再次运行脚本切换到其
**Q: 如何添加新的客户端配置？**
A: 在 `client-configs.json` 中添加新的客户端配置：
```json
"new_client": {
"clientId": "客户端ID",
"appId": "微信小程序AppID",
"name": "客户端显示名称",
"placeholder": "输入框占位符文本",
"loginDesc": "登录页面描述文本",
"logo": "@/pages/login/images/logo.png",
"subLogo": "@/pages/login/images/sublogo.png"
}
```
`src/constant/base.js` 会自动读取并处理新配置，无需手动修改。
```json
"new_client": {
"clientId": "客户端ID",
"appId": "微信小程序AppID",
"name": "客户端显示名称",
"placeholder": "输入框占位符文本",
"loginDesc": "登录页面描述文本",
"logo": "@/pages/login/images/logo.png",
}
```
`src/constant/base.js` 会自动读取并处理新配置，无需手动修改。
**Q: 脚本提示"读取配置文件失败"怎么办？**
A: 检查 `client-configs.json` 文件是否存在且格式正确。

1
src/components/CheckBox/styles/index.scss
View File

@@ -1,6 +1,7 @@
.checkbox-wrapper {
display: flex;
align-items: center;
flex-wrap: wrap;
.checkbox-icon {
margin-right: 6px;

30
src/constant/base.js
View File

@@ -1,43 +1,15 @@
import DH from "@/pages/login/images/dh.png";
import DHWQ from "@/pages/login/images/dhwq.png";
import TM from "@/pages/login/images/tm.png";
import WSMM from "@/pages/login/images/wsmm.png";
/**
* 客户端配置管理模块
*
* 功能说明:
* 所有配置从根目录的 client-configs.json 文件中读取
* 图片通过映射函数将路径转换为实际导入的模块
*/
// 直接导入配置文件
import rawConfigs from '../../client-configs.json' with { type: 'json' };
// 图片路径映射表
const imageMap = {
'@/pages/login/images/dh.png': DH,
'@/pages/login/images/dhwq.png': DHWQ,
'@/pages/login/images/tm.png': TM,
'@/pages/login/images/wsmm.png': WSMM,
};
// 处理配置中的图片路径
const processConfigs = (configs) => {
const processed = {};
for (const [key, config] of Object.entries(configs)) {
processed[key] = {
...config,
logo: imageMap[config.logo] || config.logo,
subLogo: imageMap[config.subLogo] || config.subLogo,
};
}
return processed;
};
// 所有用户端的配置 - 处理后的配置
export const CLIENT_CONFIGS = processConfigs(rawConfigs);
export const CLIENT_CONFIGS = rawConfigs;
// 获取当前用户端配置
export const getCurrentConfig = () => CLIENT_CONFIGS.zhinian;

50
src/pages/login/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="login-wrapper" :style="{ backgroundImage: `url(${loginBg})` }">
<view class="login-wrapper bg-liner">
<!-- 返回按钮 -->
<view class="back-btn" @click="goBack">
<uni-icons fontFamily="znicons" size="24" color="#333">
@@ -10,11 +10,27 @@
<!-- 头部内容 -->
<view class="login-header">
<!-- 卡通形象 -->
<image class="login-avatar" :src="logo" mode="widthFix"></image>
<image class="login-title" :src="subLogo" mode="widthFix"></image>
<image class="w-full h-full" :src="logo" mode="widthFix" />
</view>
<!-- 描述 -->
<view class="login-desc">{{ loginDesc }}</view>
<!-- 协议勾选 -->
<view class="login-agreement flex flex-items-center">
<CheckBox v-model="isAgree">
<text class="font-size-12 color-525866">我已阅读并同意</text>
<text
class="font-size-12 color-2D91FF ml-4 mr-4"
@click.stop="handleAgreeClick('service')"
>《服务协议》</text
>
<text class="font-size-12 color-525866">和</text>
<text
class="font-size-12 color-2D91FF ml-4 mr-4"
@click.stop="handleAgreeClick('privacy')"
>《隐私协议》</text
>
<text class="font-size-12 color-525866">，\n</text>
<text class="font-size-12 color-525866 ml-30">授权与账号关联操作</text>
</CheckBox>
</view>
<!-- 按钮区域 -->
@@ -27,6 +43,7 @@
type="primary"
@click="handleAgreeAndGetPhone"
>
<uni-icons type="weixin" size="20" color="#fff"></uni-icons>
微信一键登录
</button>
@@ -37,6 +54,7 @@
open-type="getPhoneNumber"
@getphonenumber="getPhoneNumber"
>
<uni-icons type="weixin" size="20" color="#fff"></uni-icons>
微信一键登录
</button>
@@ -46,28 +64,11 @@
type="primary"
@click="handleLogin"
>
<uni-icons type="weixin" size="20" color="#fff"></uni-icons>
微信一键登录
</button>
</view>
<!-- 协议勾选 -->
<view class="login-agreement">
<CheckBox v-model="isAgree">
<text class="login-agreement-text">阅读并同意</text>
<text
class="login-agreement-link"
@click.stop="handleAgreeClick('service')"
>《服务协议》</text
>
<text class="login-agreement-text">和</text>
<text
class="login-agreement-link"
@click.stop="handleAgreeClick('privacy')"
>《隐私协议》</text
>
</CheckBox>
</view>
<AgreePopup
ref="agreePopup"
:visible="visible"
@@ -84,7 +85,6 @@ import {
getPrivacyAgreement,
} from "@/request/api/LoginApi";
import { onLogin, goBack } from "@/hooks/useGoLogin";
import loginBg from "./images/bg.png";
import CheckBox from "@/components/CheckBox/index.vue";
import AgreePopup from "./components/AgreePopup/index.vue";
import { zniconsMap } from "@/static/fonts/znicons.js";
@@ -99,8 +99,6 @@ const privacyAgreement = ref("");
// 协议类型
const AgreeType = ref("service");
const logo = computed(() => getCurrentConfig().logo);
const subLogo = computed(() => getCurrentConfig().subLogo);
const loginDesc = computed(() => getCurrentConfig().loginDesc);
// 同意隐私协议并获取手机号
const handleAgreeAndGetPhone = () => {

51
src/pages/login/styles/index.scss
View File

@@ -4,11 +4,8 @@
align-items: center;
box-sizing: border-box;
height: 100vh;
padding-top: 168px;
padding-top: 100px;
position: relative;
background-position: 0 0;
background-size: 100% 100%;
background-repeat: no-repeat;
.back-btn {
position: absolute;
@@ -23,52 +20,24 @@
}
.login-header {
text-align: center;
max-height: 223px;
.login-avatar {
width: 150px;
display: block;
}
.login-title {
width: 137px;
height: 32px;
margin: 6px auto;
}
.login-desc {
font-size: $uni-font-size-sm;
color: #1e4c69;
line-height: 24px;
}
margin-top: 40px;
width: 200px;
height: 200px;
}
.login-btn-area {
margin-top: 46px;
width: 297px;
margin-top: 20px;
width: 304px;
.login-btn {
background: linear-gradient(246deg, #22a7ff 0%, #2567ff 100%);
background: #2d91ff;
width: 100%;
border-radius: $uni-border-radius-50px;
border-radius: 10px;
}
}
.login-agreement {
margin-top: 20px;
display: flex;
align-items: center;
.login-agreement-text {
font-size: $uni-font-size-base;
color: #666;
}
.login-agreement-link {
font-size: $uni-font-size-base;
color: #007aff;
margin: 0 5px;
}
margin-top: 80px;
width: 304px;
}
}

4
src/static/scss/margin.scss
View File

@@ -106,3 +106,7 @@
.ml-24 {
margin-left: 24px;
}
.ml-30 {
margin-left: 30px;
}