refactor: inputs-config.js 合并为 config.js,新增默认背景图配置及使用说明

This commit is contained in:
2026-05-15 15:14:11 +08:00
parent 315f568138
commit f090f18a9d
4 changed files with 166 additions and 6 deletions

View File

@@ -176,7 +176,7 @@
</div> </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script src="./js/inputs-config.js"></script> <script src="./js/config.js"></script>
<script src="./js/script.js"></script> <script src="./js/script.js"></script>
<script src="./js/qr.js"></script> <script src="./js/qr.js"></script>
</body> </body>

View File

@@ -1,5 +1,13 @@
// 输入框初始化配置 - 独立于主逻辑的配置文件 // ============================================
// 如需调整初始化位置或样式,请修改此文件 // 邀请函制作工具 - 全局配置文件
// 修改以下数值即可调整外观,无需改动代码
// ============================================
// -------- 默认背景图 --------
// 修改为你的图片路径即可替换默认背景
var DEFAULT_BG_IMAGE = './images/default-bg.jpg';
// -------- 三个预设输入框的初始位置与样式 --------
var INPUTS_CONFIG = { var INPUTS_CONFIG = {
"inputs": [ "inputs": [
{ {
@@ -22,7 +30,7 @@ var INPUTS_CONFIG = {
"id": "input3", "id": "input3",
"label": "编号", "label": "编号",
"left": 100, "left": 100,
"top": 306.4, "top": 308.1,
"fontWeight": 700, "fontWeight": 700,
"placeholder": "请输入" "placeholder": "请输入"
} }

View File

@@ -804,9 +804,9 @@
} }
} }
// 加载默认背景图 // 加载默认背景图(路径从 config.js 读取)
function loadDefaultBackground() { function loadDefaultBackground() {
const defaultBgUrl = './images/default-bg.jpg'; const defaultBgUrl = typeof DEFAULT_BG_IMAGE !== 'undefined' ? DEFAULT_BG_IMAGE : './images/default-bg.jpg';
const img = new Image(); const img = new Image();
img.onload = () => { img.onload = () => {
currentImage = img; currentImage = img;

152
使用说明.md Normal file
View File

@@ -0,0 +1,152 @@
# 邀请函制作工具 - 使用与配置说明
> 以下操作,只需要用记事本打开文件、修改几个数字即可。
---
## 一、调整三个输入框的位置
### 适用场景
打开页面后,输入框(企业、嘉宾、编号)的位置不满意,想上下左右调一调。
### 操作步骤
1. 用 **记事本** 打开 `js/config.js` 文件
2. 找到下半部分的 `INPUTS_CONFIG` 配置段:
```js
var INPUTS_CONFIG = {
"inputs": [
{
"id": "input1", // ← 第一个输入框(企业)
"left": 100, // ← 距离左边多少像素
"top": 218.4 // ← 距离顶部多少像素
},
{
"id": "input2", // ← 第二个输入框(嘉宾)
"left": 100,
"top": 261.4
},
{
"id": "input3", // ← 第三个输入框(编号)
"left": 100,
"top": 308.1
}
]
};
```
3. **修改数字即可**:
- **`left`**:数字越大,输入框越靠右;数字越小,越靠左
- **`top`**:数字越大,输入框越靠下;数字越小,越靠上
> 小技巧:在页面上选中输入框,会显示它的坐标,复制数字填进来即可。
4. **保存文件**,然后刷新页面,效果就会生效。
---
## 二、更换默认背景图片
### 适用场景
打开页面时自动显示的那张背景图想换成自己的图片。
### 操作步骤
**方法一(推荐)—— 替换图片文件:**
1. 准备一张你想要的图片(建议用 JPG 格式)
2. 把图片放到 `images` 文件夹里,重命名为 `default-bg.jpg`
> 如果原来有一张,会提示"替换文件",点击确定即可。
3. 刷新页面,新背景图就会自动加载
**方法二—— 修改配置文件路径:**
1. 把你的图片放到 `images` 文件夹,比如命名为 `my-bg.png`
2. 用记事本打开 `js/config.js`
3. 找到文件开头的这一行:
```js
var DEFAULT_BG_IMAGE = './images/default-bg.jpg';
```
4. 改成你的图片路径:
```js
var DEFAULT_BG_IMAGE = './images/my-bg.png';
```
5. 保存文件,刷新页面
---
## 三、修改输入框的文字粗细
### 适用场景
想让输入框的文字更粗或更细。
### 操作步骤
1. 用记事本打开 `js/config.js`
2. 找到 `"fontWeight": 700` 这一行
3. 修改数字(范围 400 ~ 900):
| 数值 | 效果 |
|------|------|
| 400 | 正常粗细 |
| 500 | 中等 |
| 600 | 半粗 |
| **700** | **加粗(默认)** |
| 800 | 更粗 |
| 900 | 最粗 |
4. 保存文件,刷新页面
---
## 四、修改输入框的占位提示文字
### 适用场景
想把"请输入"改成其他提示语。
### 操作步骤
1. 用记事本打开 `js/config.js`
2. 找到相应的 `"placeholder"` 行,例如:
```js
"placeholder": "请输入"
```
3. 改成你想要的文字,比如:
```js
"placeholder": "在此输入企业名称"
```
4. 保存文件,刷新页面
---
## 常见问题
**Q:修改文件后页面没变化?**
A:先确认文件已保存,然后刷新浏览器页面(按 F5 或点浏览器的刷新按钮)。
**Q:改坏了怎么办?**
A:可以重新下载项目,或者联系开发者恢复。
**Q:找不到 `images` 文件夹?**
A:项目文件夹里如果没看到,自己新建一个名叫 `images` 的文件夹即可。
**Q:`config.js` 在哪里?**
A:在 `js` 文件夹里,打开后一眼就能看到全部配置项。