dsh/nl-Frobot-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

opt:1.二维码界面优化。2.国际化语言切换只保留中英文。

Browse Source
This commit is contained in:
liejiu946
2026-03-06 16:50:57 +08:00
parent 7d333f219f
commit e22878d90e
9 changed files with 177 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/config.js
View File

@@ -1,9 +1,9 @@
window.g = {
dev: {
VUE_APP_BASE_API: 'http://127.0.0.1:8011'
VUE_APP_BASE_API: 'http://192.168.101.38:8011'
},
prod: {
VUE_APP_BASE_API: 'http://127.0.0.1:8011'
VUE_APP_BASE_API: 'http://192.168.101.38:8011'
}
}

15
src/i18n/langs/qrcode/en.js
View File

@@ -24,11 +24,19 @@ export default {
'dialog': {
'add_title': 'Add QR Code',
'edit_title': 'Edit QR Code',
'ip': 'IP Address',
'ip_placeholder': 'Please enter IP address',
'port': 'Port',
'port_placeholder': 'Please enter port',
'room_code': 'Room Code',
'room_code_placeholder': 'Please enter room code',
'language': 'Language',
'language_placeholder': 'Please select language',
'chinese': 'Chinese',
'english': 'English',
'qrcode_data': 'QR Code Content',
'qrcode_data_placeholder': 'Format: http://SystemIP:Port?room=RoomCode',
'format_hint': 'Format: http://SystemIP:Port?room=RoomCode',
'qrcode_data_placeholder': 'Format: http://SystemIP:Port?room=RoomCode&lang=Language',
'format_hint': 'Format: http://SystemIP:Port?room=RoomCode&lang=Language',
'qrcode_width': 'QR Code Width(Pixels)',
'qrcode_height': 'QR Code Height(Pixels)',
'cancel': 'Cancel',
@@ -36,7 +44,10 @@ export default {
'save': 'Save'
},
'validation': {
'ip_required': 'Please enter IP address',
'port_required': 'Please enter port',
'room_code_required': 'Please enter room code',
'language_required': 'Please select language',
'qrcode_data_required': 'Please enter QR code content',
'qrcode_width_required': 'Please enter QR code width',
'qrcode_height_required': 'Please enter QR code height'

15
src/i18n/langs/qrcode/in.js
View File

@@ -24,11 +24,19 @@ export default {
'dialog': {
'add_title': 'Tambah Kode QR',
'edit_title': 'Ubah Kode QR',
'ip': 'Alamat IP',
'ip_placeholder': 'Silakan masukkan alamat IP',
'port': 'Port',
'port_placeholder': 'Silakan masukkan port',
'room_code': 'Kode Kamar',
'room_code_placeholder': 'Silakan masukkan kode kamar',
'language': 'Bahasa',
'language_placeholder': 'Silakan pilih bahasa',
'chinese': 'Bahasa Mandarin',
'english': 'Bahasa Inggris',
'qrcode_data': 'Konten Kode QR',
'qrcode_data_placeholder': 'Format: http://IP Sistem:Port?room=Kode Kamar',
'format_hint': 'Format: http://IP Sistem:Port?room=Kode Kamar',
'qrcode_data_placeholder': 'Format: http://IP Sistem:Port?room=Kode Kamar&lang=Bahasa',
'format_hint': 'Format: http://IP Sistem:Port?room=Kode Kamar&lang=Bahasa',
'qrcode_width': 'Lebar Kode QR(Piksel)',
'qrcode_height': 'Tinggi Kode QR(Piksel)',
'cancel': 'Batal',
@@ -36,7 +44,10 @@ export default {
'save': 'Simpan'
},
'validation': {
'ip_required': 'Silakan masukkan alamat IP',
'port_required': 'Silakan masukkan port',
'room_code_required': 'Silakan masukkan kode kamar',
'language_required': 'Silakan pilih bahasa',
'qrcode_data_required': 'Silakan masukkan konten kode QR',
'qrcode_width_required': 'Silakan masukkan lebar kode QR',
'qrcode_height_required': 'Silakan masukkan tinggi kode QR'

15
src/i18n/langs/qrcode/ko.js
View File

@@ -24,11 +24,19 @@ export default {
'dialog': {
'add_title': 'QR 코드 추가',
'edit_title': 'QR 코드 수정',
'ip': 'IP 주소',
'ip_placeholder': 'IP 주소를 입력하세요',
'port': '포트',
'port_placeholder': '포트를 입력하세요',
'room_code': '방 번호',
'room_code_placeholder': '방 번호를 입력하세요',
'language': '언어',
'language_placeholder': '언어를 선택하세요',
'chinese': '중국어',
'english': '영어',
'qrcode_data': 'QR 코드 내용',
'qrcode_data_placeholder': '형식: http://시스템IP:포트?room=방번호',
'format_hint': '형식: http://시스템IP:포트?room=방번호',
'qrcode_data_placeholder': '형식: http://시스템IP:포트?room=방번호&lang=언어',
'format_hint': '형식: http://시스템IP:포트?room=방번호&lang=언어',
'qrcode_width': 'QR 코드 너비(픽셀)',
'qrcode_height': 'QR 코드 높이(픽셀)',
'cancel': '취소',
@@ -36,7 +44,10 @@ export default {
'save': '저장'
},
'validation': {
'ip_required': 'IP 주소를 입력하세요',
'port_required': '포트를 입력하세요',
'room_code_required': '방 번호를 입력하세요',
'language_required': '언어를 선택하세요',
'qrcode_data_required': 'QR 코드 내용을 입력하세요',
'qrcode_width_required': 'QR 코드 너비를 입력하세요',
'qrcode_height_required': 'QR 코드 높이를 입력하세요'

15
src/i18n/langs/qrcode/zh.js
View File

@@ -24,11 +24,19 @@ export default {
'dialog': {
'add_title': '新增二维码',
'edit_title': '修改二维码',
'ip': 'IP地址',
'ip_placeholder': '请输入IP地址',
'port': '端口号',
'port_placeholder': '请输入端口号',
'room_code': '房间号',
'room_code_placeholder': '请输入房间号',
'language': '语言',
'language_placeholder': '请选择语言',
'chinese': '中文',
'english': '英文',
'qrcode_data': '二维码内容',
'qrcode_data_placeholder': '格式：http://系统IP:端口号?room=房间号',
'format_hint': '格式提示：http://系统IP:端口号?room=房间号',
'qrcode_data_placeholder': '格式：http://系统IP:端口号?room=房间号&lang=语言',
'format_hint': '格式提示：http://系统IP:端口号?room=房间号&lang=语言',
'qrcode_width': '二维码宽度(像素)',
'qrcode_height': '二维码高度(像素)',
'cancel': '取 消',
@@ -36,7 +44,10 @@ export default {
'save': '保 存'
},
'validation': {
'ip_required': '请输入IP地址',
'port_required': '请输入端口号',
'room_code_required': '请输入房间号',
'language_required': '请选择语言',
'qrcode_data_required': '请输入二维码内容',
'qrcode_width_required': '请输入二维码宽度',
'qrcode_height_required': '请输入二维码高度'

3
src/layout/components/Navbar.vue
View File

@@ -53,7 +53,6 @@
<el-dropdown-menu slot="dropdown">
<el-dropdown-item divided command="zh">简体中文</el-dropdown-item>
<el-dropdown-item divided command="en">English</el-dropdown-item>
<el-dropdown-item divided command="vi">Vietnamese</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
@@ -134,8 +133,6 @@ export default {
this.language = 'English'
} else if (command === 'zh') {
this.language = '简体中文'
} else if (command === 'vi') {
this.language = 'Vietnamese'
}
},
toggleSideBar() {

3
src/store/modules/api.js
View File

@@ -1,5 +1,6 @@
// 适配 Nginx 反向代理
const baseUrl = process.env.VUE_APP_BASE_API === '/' ? '' : process.env.VUE_APP_BASE_API
// const baseUrl = process.env.VUE_APP_BASE_API === '/' ? '' : process.env.VUE_APP_BASE_API
const baseUrl = window.g.prod.VUE_APP_BASE_API
const api = {
state: {

145
src/views/frobot/qrcode/qrcodeList.vue
View File

@@ -98,9 +98,21 @@
<!-- 新增二维码 -->
<el-dialog :visible.sync="addVisible" :title="$t('qrcode.dialog.add_title')" width="600px">
<el-form ref="addForm" :model="addForm" :rules="addRules" label-width="140px">
<el-form-item :label="$t('qrcode.dialog.ip')" prop="ip">
<el-input v-model="addForm.ip" :placeholder="$t('qrcode.dialog.ip_placeholder')" @input="handleIpChange" />
</el-form-item>
<el-form-item :label="$t('qrcode.dialog.port')" prop="port">
<el-input v-model="addForm.port" :placeholder="$t('qrcode.dialog.port_placeholder')" @input="handlePortChange" />
</el-form-item>
<el-form-item :label="$t('qrcode.dialog.room_code')" prop="room">
<el-input v-model="addForm.room" :placeholder="$t('qrcode.dialog.room_code_placeholder')" @input="handleRoomChange" />
</el-form-item>
<el-form-item :label="$t('qrcode.dialog.language')" prop="lang">
<el-select v-model="addForm.lang" :placeholder="$t('qrcode.dialog.language_placeholder')" style="width: 100%;" @change="handleLangChange">
<el-option :label="$t('qrcode.dialog.chinese')" value="zh" />
<el-option :label="$t('qrcode.dialog.english')" value="en" />
</el-select>
</el-form-item>
<el-form-item :label="$t('qrcode.dialog.qrcode_data')" prop="data">
<el-input v-model="addForm.data" type="textarea" :rows="3" :placeholder="$t('qrcode.dialog.qrcode_data_placeholder')" />
<div style="color: #909399; font-size: 12px; margin-top: 5px;">
@@ -123,9 +135,21 @@
<!-- 修改二维码 -->
<el-dialog :visible.sync="editVisible" :title="$t('qrcode.dialog.edit_title')" width="600px">
<el-form ref="editForm" :model="editForm" :rules="editRules" label-width="140px">
<el-form-item :label="$t('qrcode.dialog.ip')" prop="ip">
<el-input v-model="editForm.ip" :placeholder="$t('qrcode.dialog.ip_placeholder')" @input="handleEditIpChange" />
</el-form-item>
<el-form-item :label="$t('qrcode.dialog.port')" prop="port">
<el-input v-model="editForm.port" :placeholder="$t('qrcode.dialog.port_placeholder')" @input="handleEditPortChange" />
</el-form-item>
<el-form-item :label="$t('qrcode.dialog.room_code')" prop="room_code">
<el-input v-model="editForm.room_code" :placeholder="$t('qrcode.dialog.room_code_placeholder')" @input="handleEditRoomChange" />
</el-form-item>
<el-form-item :label="$t('qrcode.dialog.language')" prop="lang">
<el-select v-model="editForm.lang" :placeholder="$t('qrcode.dialog.language_placeholder')" style="width: 100%;" @change="handleEditLangChange">
<el-option :label="$t('qrcode.dialog.chinese')" value="zh" />
<el-option :label="$t('qrcode.dialog.english')" value="en" />
</el-select>
</el-form-item>
<el-form-item :label="$t('qrcode.dialog.qrcode_data')" prop="qrcode_data">
<el-input v-model="editForm.qrcode_data" type="textarea" :rows="3" :placeholder="$t('qrcode.dialog.qrcode_data_placeholder')" />
<div style="color: #909399; font-size: 12px; margin-top: 5px;">
@@ -167,15 +191,27 @@ export default {
},
addVisible: false,
addForm: {
ip: '127.0.0.1',
port: '8012',
room: '',
lang: 'zh',
data: '',
width: 150,
height: 150
},
addRules: {
ip: [
{ required: true, message: this.$t('qrcode.validation.ip_required'), trigger: 'blur' }
],
port: [
{ required: true, message: this.$t('qrcode.validation.port_required'), trigger: 'blur' }
],
room: [
{ required: true, message: this.$t('qrcode.validation.room_code_required'), trigger: 'blur' }
],
lang: [
{ required: true, message: this.$t('qrcode.validation.language_required'), trigger: 'change' }
],
data: [
{ required: true, message: this.$t('qrcode.validation.qrcode_data_required'), trigger: 'blur' }
],
@@ -190,15 +226,27 @@ export default {
editForm: {
qrcode_id: '',
oldRoom: '',
ip: '127.0.0.1',
port: '8012',
room_code: '',
lang: 'zh',
qrcode_data: '',
qrcode_width: 150,
qrcode_height: 150
},
editRules: {
ip: [
{ required: true, message: this.$t('qrcode.validation.ip_required'), trigger: 'blur' }
],
port: [
{ required: true, message: this.$t('qrcode.validation.port_required'), trigger: 'blur' }
],
room_code: [
{ required: true, message: this.$t('qrcode.validation.room_code_required'), trigger: 'blur' }
],
lang: [
{ required: true, message: this.$t('qrcode.validation.language_required'), trigger: 'change' }
],
qrcode_data: [
{ required: true, message: this.$t('qrcode.validation.qrcode_data_required'), trigger: 'blur' }
],
@@ -276,8 +324,11 @@ export default {
},
addQRCode() {
this.addForm = {
ip: '127.0.0.1',
port: '8012',
room: '',
data: 'http://127.0.0.1:8012?room=',
lang: 'zh',
data: 'http://127.0.0.1:8012?room=&lang=zh',
width: 150,
height: 150
}
@@ -286,19 +337,30 @@ export default {
this.$refs.addForm && this.$refs.addForm.clearValidate()
})
},
handleIpChange(value) {
// 当IP改变时，自动更新二维码内容
this.updateQRCodeData()
},
handlePortChange(value) {
// 当端口改变时，自动更新二维码内容
this.updateQRCodeData()
},
handleRoomChange(value) {
// 当房间号改变时，自动更新二维码内容
// 保留二维码内容中 room= 前面的部分，只更新 room= 后面的值
const currentData = this.addForm.data || ''
const roomIndex = currentData.indexOf('room=')
if (roomIndex !== -1) {
// 如果找到 room=，保留前面的部分，更新后面的房间号
this.addForm.data = currentData.substring(0, roomIndex + 5) + (value || '')
} else {
// 如果没有找到 room=，使用默认格式
this.addForm.data = 'http://127.0.0.1:8012?room=' + (value || '')
}
this.updateQRCodeData()
},
handleLangChange(value) {
// 当语言改变时，自动更新二维码内容
this.updateQRCodeData()
},
updateQRCodeData() {
// 更新二维码内容，格式：http://IP:端口?room=房间号&lang=语言
const ip = this.addForm.ip || '127.0.0.1'
const port = this.addForm.port || '8012'
const room = this.addForm.room || ''
const lang = this.addForm.lang || 'zh'
this.addForm.data = `http://${ip}:${port}?room=${room}&lang=${lang}`
},
submitAdd() {
this.$refs.addForm.validate(valid => {
@@ -334,29 +396,65 @@ export default {
})
},
editQRCode(row) {
// 解析现有的二维码数据，提取IP、端口、房间号和语言
const qrcodeData = row.qrcode_data || ''
let ip = '127.0.0.1'
let port = '8012'
let lang = 'zh'
// 尝试从URL中提取IP和端口
const urlMatch = qrcodeData.match(/http:\/\/([^:]+):(\d+)/)
if (urlMatch) {
ip = urlMatch[1]
port = urlMatch[2]
}
// 尝试从URL中提取语言参数
const langMatch = qrcodeData.match(/[?&]lang=([^&]+)/)
if (langMatch) {
lang = langMatch[1]
}
this.editForm = {
qrcode_id: row.qrcode_id,
oldRoom: row.room_code,
ip: ip,
port: port,
room_code: row.room_code,
lang: lang,
qrcode_data: row.qrcode_data,
qrcode_width: Number(row.qrcode_width) || 150,
qrcode_height: Number(row.qrcode_height) || 150
}
this.editVisible = true
this.$nextTick(() => {
this.$refs.editForm && this.$refs.editForm.clearValidate()
})
},
handleEditIpChange(value) {
// 当IP改变时，自动更新二维码内容
this.updateEditQRCodeData()
},
handleEditPortChange(value) {
// 当端口改变时，自动更新二维码内容
this.updateEditQRCodeData()
},
handleEditRoomChange(value) {
// 当房间号改变时，自动更新二维码内容
// 保留二维码内容中 room= 前面的部分，只更新 room= 后面的值
const currentData = this.editForm.qrcode_data || ''
const roomIndex = currentData.indexOf('room=')
if (roomIndex !== -1) {
// 如果找到 room=，保留前面的部分，更新后面的房间号
this.editForm.qrcode_data = currentData.substring(0, roomIndex + 5) + (value || '')
} else {
// 如果没有找到 room=，使用默认格式
this.editForm.qrcode_data = 'http://127.0.0.1:8012?room=' + (value || '')
}
this.updateEditQRCodeData()
},
handleEditLangChange(value) {
// 当语言改变时，自动更新二维码内容
this.updateEditQRCodeData()
},
updateEditQRCodeData() {
// 更新二维码内容，格式：http://IP:端口?room=房间号&lang=语言
const ip = this.editForm.ip || '127.0.0.1'
const port = this.editForm.port || '8012'
const room = this.editForm.room_code || ''
const lang = this.editForm.lang || 'zh'
this.editForm.qrcode_data = `http://${ip}:${port}?room=${room}&lang=${lang}`
},
submitEdit() {
this.$refs.editForm.validate(valid => {
@@ -467,4 +565,3 @@ export default {
margin-bottom: 10px;
}
</style>

3
src/views/login.vue
View File

@@ -35,7 +35,6 @@
<el-dropdown-menu slot="dropdown">
<el-dropdown-item divided command="zh">简体中文</el-dropdown-item>
<el-dropdown-item divided command="en">English</el-dropdown-item>
<el-dropdown-item divided command="vi">Vietnamese</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
@@ -122,8 +121,6 @@ export default {
this.language = 'English'
} else if (command === 'zh') {
this.language = '简体中文'
} else if (command === 'vi') {
this.language = 'Vietnamese'
}
},
getCode() {