Skip to content

S
scss-to-css
Commit 16353609 authored by 张俊's avatar 张俊
Browse files
Options

[feat](文件内部转化): 添加htmv.js修改文件内容 

新增星总的脚本，主要对文件内部lang=scss的内容进行转化
parent e1dc3990
Hide whitespace changes
Inline Side-by-side
Showing with 1101 additions and 150 deletions
README.md
View file @ 16353609
...@@ -12,9 +12,13 @@ ...@@ -12,9 +12,13 @@
进入所在项目，全局搜索==.scss==。找到引用的==.scss==文件 进入所在项目，全局搜索==.scss==。找到引用的==.scss==文件
4. 转scss文件为css 4. 转scss文件为css
在src文件夹中放入需要转化scss的项目，执行==npm run dev==,命令完成后，css文件会出现在对应scss所在目录 == 清空src文件夹的内容 ==，在src文件夹中放入需要转化scss的项目。执行==npm run dev==,命令完成后，css文件会出现在对应scss所在目录
5. 修改scss引入 5. 修改scss引入
进入第三步引用scss的文件，修改==.scss==后缀为==.css== 进入第三步引用scss的文件，修改==.scss==后缀为==.css==
注：非vue项目，没有入口文件。因scss变量间的相互使用，在转化时可能会报错。修改文件此过程最后有前端协助处理，否则容易改错内容 6. 修改其他文件中包含的lang="scss"
\ No newline at end of file 修改html，vue，htmv等其他文件中包含的lang="scss"。执行node htmv,js 会直接替换文件中的scss，转化成css
注：非vue项目，没有入口文件。因scss变量间的相互使用，在转化时可能会报错。修改文件此过程最好有前端协助处理，否则容易改错内容
file.js deleted 100644 → 0
View file @ e1dc3990
/**
* 读取一个目录中所有子目录和文件
*/
const fs = require('fs')
const path = require('path')
class File {
constructor(filename, name, ext, isFile, size, creeateTime, updateTime) {
this.filename = filename
this.name = name // 文件名
this.ext = ext // 后缀
this.isFile = isFile // 是否文件
this.size = size // 文件大小
this.creeateTime = creeateTime // 创建时间
this.updateTime = updateTime // 更新时间
}
static async getFile(filename) {
const stat = await fs.promises.stat(filename)
const { size, birthtime, mtime } = stat
let name = path.basename(filename),
ext = path.extname(filename),
isFile = stat.isFile(),
creeateTime = new Date(birthtime),
updateTime = new Date(mtime);
return new File(filename, name, ext, isFile, size, creeateTime, updateTime)
}
// 获取目录的所有子文件对象，如果是文件返回空数组
async getChildren() {
if (this.isFile) { return [] }
let dirArr = await fs.promises.readdir(this.filename);
dirArr = dirArr.map(fileName => {
const filename = path.resolve(this.filename, fileName)
return File.getFile(filename)
})
return Promise.all(dirArr)
}
// 获取文件内容， 如果是目录，返回null
async getContent(isBuffer = false) {
if (!this.isFile) { return null }
if (isBuffer) {
return await fs.promises.readFile(this.filename)
}
return await fs.promises.readFile(this.filename, 'utf-8')
}
}
async function readDir(dirname) {
const file = await File.getFile(dirname)
return await file.getChildren()
}
const dirname = path.resolve(__dirname, '../src')
console.log(readDir(dirname))
async function test() {
const dirname = path.resolve(__dirname, '../src')
const filename = path.resolve(__dirname, './index.js')
const dir = await File.getFile(dirname)
console.log('dir', await dir.getChildren())
const file = await File.getFile(filename)
console.log('file', file)
}
test()
\ No newline at end of file
htmv.js 0 → 100644
View file @ 16353609
const glob = require('glob');
const path = require('path');
const fs = require('fs');
const cheerio = require('cheerio');
const sass = require('sass');
const args = process.argv.slice(2);
let partten = "**/*.htmv";
if (args[1]) {
partten = args[1];
}
let dirPath = args[0] || './src';
/**
*
* @param {String} dirPath
* @param {String} partten
*/
function dealVueStyleNode(dirPath, partten) {
const files = glob.globSync(partten, { cwd: dirPath });
files.forEach(file => dealVueStyleNodeSingleFile(path.resolve(dirPath, file)));
}
function dealVueStyleNodeSingleFile(file) {
const html = fs.readFileSync(file, 'utf-8');
// 使用 cheerio 加载 HTML 文档
// 第三个参数表示不加载到document中
const $ = cheerio.load(html, {
lowerCaseTags: false,
xmlMode: true,
normalizeWhitespace: false,
decodeEntities: false,
}, false);
// 修改 HTML 文档中的内容
$('style').each((index, styleEl) => {
styleEl = $(styleEl);
const lang = styleEl.attr('lang');
if (!lang || lang == 'scss') {
const scssString = styleEl.text();
try {
const result = parseScss(scssString, file);
styleEl.text(result.css);
console.log(`file: ${file} style-node: ${index} deal style success.`);
} catch (e) {
console.warn(`file: ${file} style-node: ${index} deal style error.`, e);
}
styleEl.attr('lang', 'css');
}
})
if ($('style').length) {
fs.writeFileSync(file, $.html());
}
// // 将修改后的 HTML 文档写入文件
// fs.writeFileSync('index.html', $.html());
}
function parseScss(scssString, file) {
const result = sass.compileString(scssString, { url: file });
return result;
}
dealVueStyleNode(dirPath, partten);
package.json
View file @ 16353609
...@@ -20,6 +20,9 @@ ...@@ -20,6 +20,9 @@
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"webpack-fix-style-only-entries": "^0.6.1", "webpack-fix-style-only-entries": "^0.6.1",
"webpack-glob-entry": "^2.1.1" "webpack-glob-entry": "^2.1.1",
"cheerio": "^1.0.0-rc.12",
"glob": "^9.0.2",
"sass": "^1.58.3"
} }
} }
readFileCall.js deleted 100644 → 0
View file @ e1dc3990
/**
* 读取一个目录中所有子目录和文件
*/
const fs = require('fs')
const path = require('path')
var fileArr = []
var acceptFile = ['scss']
var getFile = function(pathStr,cb){
fs.readdir(pathStr,function(err,dirArr){
console.log(dirArr);
dirArr.forEach(e => {
//文件夹
let str = pathStr+'/'+e
if(!isFile(str)){
getChildernFile(str)
}else{
let fileType = str.split('.')[str.split('.').length-1]
if(acceptFile.indexOf(fileType)!==-1){
fileArr.push({
outputPath:pathStr+'/',
inputPath:str
})
}
}
});
cb?cb():''
});
}
var getChildernFile = function(pathStr){
fs.readdir(pathStr,function(err,dirArr){
console.log(dirArr);
dirArr.forEach(e => {
//文件夹
let str = pathStr+'/'+e
if(!isFile(str)){
getFile(str)
}else{
let fileType = str.split('.')[str.split('.').length-1]
if(acceptFile.indexOf(fileType)!==-1){
fileArr.push({
outputPath:pathStr+'/',
inputPath:str
})
}
}
});
});
}
var isFile = function(filename){
var stat = fs.lstatSync(filename);
var isFile = stat.isFile()
return isFile
}
module.exports = {
getFile,
fileArr,
}
getFile('./src',function(){
console.log(fileArr);
})
// setTimeout(()=>{
// console.log(fileArr);
// },5000)
\ No newline at end of file
src/aa/bb/check-ukey-for-login.htmv 0 → 100644
View file @ 16353609
<!--settings:
{
title:"UKey安全验证",
}
-->
<template>
<div style="width: 100%;min-height: 100%;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;">
<div class="container">
<div class="form-container">
<form method="post" @submit.stop.prevent="onCheckSign">
<h1 style="color: dodgerblue;margin: 20px;">UKey安全验证</h1>
<div style="height: 30px;"/>
<a-input-password v-if="needPin" v-model="pin" required="required" naxlength="16" placeholder="UKey Pin码" autocomplete="off"/>
<a @click="onCheckSign" :class="{button:true,disabled:confirmUkeyButtonDisabled}" style="margin: 15px 0;margin-bottom: 5px;background-color: dodgerblue;border-color: dodgerblue;">
{{confirmUkeyButtonText}}
</a>
<div v-show="loginTechSupport" style="margin-top: 15px;margin-bottom: 10px;font-size: 12px;color: gray;">
</div>
<p v-if="!hide_ukDriversDownload" style="margin: 5px;">
<a-popover placement="bottom">
<template #content="">
<div class="context-menu">
<a @click="downloadDriver('windows')">Windows驱动</a>
</div>
</template>
<a>下载驱动</a>
</a-popover>
</p>
<p style="margin: 5px;margin-bottom: 15px;">
<a @click="logout()" style="color: black;">注销登录</a>
</p>
</form>
</div>
</div>
</div>
</template>
<script>
import sdk from "xsdk";
import overpage from "overpage";
import "pageReady!justCheck";
export default {
data() {
return {
uktype: xsloader.queryParam("uktype"),
ukSign: null,
ukid: null,
pin: null,
needPin: false,
loginTechSupport: lconfig.properties.loginTechSupport,
confirmUkeyButtonText: null,
confirmUkeyButtonDisabled: true,
onCheckSignFun: null,
hide_ukDriversDownload: lconfig.conf.hide_ukDriversDownload == 'true'
}
},
mounted() {
this.initUKeyCheck();
},
methods: {
async initUKeyCheck() {
this.confirmUkeyButtonText = "连接UKey驱动中...";
this.confirmUkeyButtonDisabled = true;
await this.genUkeyRandom();
try {
let UkAuth = await import("default!./uk/uk-auth.js");
let config = await this.getClientInitParam();
let ukAuth = new UkAuth(this.uktype, config);
ukAuth.onInitCallback = () => {
this.needPin = ukAuth.needPin();
};
let isConn;
let signCode;
ukAuth.onError = (err) => {
console.error(err);
if (err?.type == "sign_error") {
sdk.showToast(err.errmsg);
}
};
ukAuth.onOpenChange = (state) => {
if (state == 0) {
this.confirmUkeyButtonText = "连接驱动中...";
} else if (state == 1) {
this.confirmUkeyButtonText = "请插入UKey...";
} else if (state == 2) {
this.confirmUkeyButtonText = "连接驱动失败！";
}
};
ukAuth.onConnChange = async (_isConn, _ukid) => {
console.log("onConnChange:isConn=", _isConn);
this.ukSign = null;
signCode = null;
isConn = _isConn;
this.ukid = _ukid;
if (isConn) {
this.confirmUkeyButtonText = "UKey验证登录";
this.confirmUkeyButtonDisabled = false;
} else {
this.confirmUkeyButtonText = "请插入UKey...";
this.confirmUkeyButtonDisabled = true;
}
};
ukAuth.onSignOk = (result) => {
this.ukSign = result;
this.doCheckUKey();
};
this.onCheckSignFun = slowerTrigger(async () => {
if (isConn) {
let pin;
if (this.needPin) {
pin = this.pin;
if (!pin) {
sdk.showToast("请输入UKey Pin码");
return;
}
}
signCode = await this.genUkeyRandom();
ukAuth.doSign(pin, signCode);
} else {
sdk.showToast("UKey未连接");
}
});
} catch (e) {
console.error(e);
sdk.showToast("初始化provider失败");
}
},
async getClientInitParam() {
let config = await sdk.Request({
url: lconfig.fromPath("ServerUserUkey/getClientInitParam"),
method: "post",
params: {
uktype: this.uktype,
}
});
return config;
},
onCheckSign() {
if (this.onCheckSignFun) {
this.onCheckSignFun();
}
},
async genUkeyRandom() {
let rcode = await sdk.Request({
url: lconfig.fromPath("OauthApi/genUkeyRandom"),
loading: true,
method: "post"
});
return rcode;
},
async doCheckUKey() {
await sdk.Request({
url: lconfig.fromPath("OauthApi/checkUKey"),
method: "post",
params: {
ukid: this.ukid,
ukSign: this.ukSign,
}
});
sdk.showToast("UKey验证通过");
setTimeout(() => {
location.href = lconfig.fromPath("OauthApi/checkUKey");
}, 1500);
},
downloadDriver(osType) {
let url = lconfig.fromPath(`ServerUserUkey/downloadDriver?osType=${osType}&uktype=${this.uktype}`);
window.open(url);
},
logout() {
overpage.logout();
}
}
}
</script>
<style lang="css" scoped="false">html,
body {
background-color: #e9ecf3;
}
a {
font-size: 14px;
/* text-decoration: none; */
margin: 15px 0;
}
.container {
background-color: #fff;
border-radius: 5px;
/*box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);*/
box-shadow: 0 5px 28px rgba(153, 169, 207, 0.4), 0 4px 10px rgba(153, 169, 207, 0.3);
position: relative;
/*overflow: hidden;*/
width: 500px;
max-width: 100%;
min-height: 450px;
display: flex;
align-items: center;
}
.container h1 {
font-weight: 100;
margin: 0;
font-size: 35px;
}
.container h2 {
text-align: center;
}
.container p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
/*margin: 20px 0 30px;*/
}
.container span {
font-size: 12px;
}
.container a {
font-size: 14px;
text-decoration: underline;
margin: 15px 0;
}
.container .button {
border-radius: 20px;
border: 1px solid #FF4B2B;
background-color: #FF4B2B;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
cursor: pointer;
}
.container .button.disabled {
background-color: gainsboro !important;
border-color: gainsboro !important;
}
.container .button:active {
transform: scale(0.95);
}
.container form,
.container .form {
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
text-align: center;
}
.container input,
.container textarea {
background-color: white;
border: none;
padding: 12px 15px !important;
margin: 8px 0 !important;
width: 100%;
border: 1px solid gainsboro;
outline: none !important;
}
.container .form-container {
/*position: absolute;*/
/*top: 0;*/
/*height: 100%;*/
/*transition: all 0.6s ease-in-out;*/
width: 56%;
margin-left: auto;
margin-right: auto;
}
.container .social-container {
margin: 10px 0;
display: flex;
align-items: center;
}
.container .social-container a {
/*border: 1px solid #DDDDDD;*/
/*border-radius: 50%;*/
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 10px;
height: 32px;
width: 32px;
cursor: pointer;
}
.container input:-webkit-autofill,
.container textarea:-webkit-autofill,
.container select:-webkit-autofill {
background-color: white !important;
background-image: none !important;
color: black !important;
}
@media all and (max-width: 500px) {
.container {
width: 95%;
border-radius: 5px;
}
.container .form-container {
width: 80%;
}
}
html,
body {
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
}
table {
border: 0;
padding: 0;
margin: 0;
}
.link-p a {
text-decoration: underline;
color: dodgerblue;
}
.link-p a:hover {
cursor: pointer;
}</style>
src/aa/check-ukey-for-login.htmv 0 → 100644
View file @ 16353609
<!--settings:
{
title:"UKey安全验证",
}
-->
<template>
<div style="width: 100%;min-height: 100%;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;">
<div class="container">
<div class="form-container">
<form method="post" @submit.stop.prevent="onCheckSign">
<h1 style="color: dodgerblue;margin: 20px;">UKey安全验证</h1>
<div style="height: 30px;"/>
<a-input-password v-if="needPin" v-model="pin" required="required" naxlength="16" placeholder="UKey Pin码" autocomplete="off"/>
<a @click="onCheckSign" :class="{button:true,disabled:confirmUkeyButtonDisabled}" style="margin: 15px 0;margin-bottom: 5px;background-color: dodgerblue;border-color: dodgerblue;">
{{confirmUkeyButtonText}}
</a>
<div v-show="loginTechSupport" style="margin-top: 15px;margin-bottom: 10px;font-size: 12px;color: gray;">
</div>
<p v-if="!hide_ukDriversDownload" style="margin: 5px;">
<a-popover placement="bottom">
<template #content="">
<div class="context-menu">
<a @click="downloadDriver('windows')">Windows驱动</a>
</div>
</template>
<a>下载驱动</a>
</a-popover>
</p>
<p style="margin: 5px;margin-bottom: 15px;">
<a @click="logout()" style="color: black;">注销登录</a>
</p>
</form>
</div>
</div>
</div>
</template>
<script>
import sdk from "xsdk";
import overpage from "overpage";
import "pageReady!justCheck";
export default {
data() {
return {
uktype: xsloader.queryParam("uktype"),
ukSign: null,
ukid: null,
pin: null,
needPin: false,
loginTechSupport: lconfig.properties.loginTechSupport,
confirmUkeyButtonText: null,
confirmUkeyButtonDisabled: true,
onCheckSignFun: null,
hide_ukDriversDownload: lconfig.conf.hide_ukDriversDownload == 'true'
}
},
mounted() {
this.initUKeyCheck();
},
methods: {
async initUKeyCheck() {
this.confirmUkeyButtonText = "连接UKey驱动中...";
this.confirmUkeyButtonDisabled = true;
await this.genUkeyRandom();
try {
let UkAuth = await import("default!./uk/uk-auth.js");
let config = await this.getClientInitParam();
let ukAuth = new UkAuth(this.uktype, config);
ukAuth.onInitCallback = () => {
this.needPin = ukAuth.needPin();
};
let isConn;
let signCode;
ukAuth.onError = (err) => {
console.error(err);
if (err?.type == "sign_error") {
sdk.showToast(err.errmsg);
}
};
ukAuth.onOpenChange = (state) => {
if (state == 0) {
this.confirmUkeyButtonText = "连接驱动中...";
} else if (state == 1) {
this.confirmUkeyButtonText = "请插入UKey...";
} else if (state == 2) {
this.confirmUkeyButtonText = "连接驱动失败！";
}
};
ukAuth.onConnChange = async (_isConn, _ukid) => {
console.log("onConnChange:isConn=", _isConn);
this.ukSign = null;
signCode = null;
isConn = _isConn;
this.ukid = _ukid;
if (isConn) {
this.confirmUkeyButtonText = "UKey验证登录";
this.confirmUkeyButtonDisabled = false;
} else {
this.confirmUkeyButtonText = "请插入UKey...";
this.confirmUkeyButtonDisabled = true;
}
};
ukAuth.onSignOk = (result) => {
this.ukSign = result;
this.doCheckUKey();
};
this.onCheckSignFun = slowerTrigger(async () => {
if (isConn) {
let pin;
if (this.needPin) {
pin = this.pin;
if (!pin) {
sdk.showToast("请输入UKey Pin码");
return;
}
}
signCode = await this.genUkeyRandom();
ukAuth.doSign(pin, signCode);
} else {
sdk.showToast("UKey未连接");
}
});
} catch (e) {
console.error(e);
sdk.showToast("初始化provider失败");
}
},
async getClientInitParam() {
let config = await sdk.Request({
url: lconfig.fromPath("ServerUserUkey/getClientInitParam"),
method: "post",
params: {
uktype: this.uktype,
}
});
return config;
},
onCheckSign() {
if (this.onCheckSignFun) {
this.onCheckSignFun();
}
},
async genUkeyRandom() {
let rcode = await sdk.Request({
url: lconfig.fromPath("OauthApi/genUkeyRandom"),
loading: true,
method: "post"
});
return rcode;
},
async doCheckUKey() {
await sdk.Request({
url: lconfig.fromPath("OauthApi/checkUKey"),
method: "post",
params: {
ukid: this.ukid,
ukSign: this.ukSign,
}
});
sdk.showToast("UKey验证通过");
setTimeout(() => {
location.href = lconfig.fromPath("OauthApi/checkUKey");
}, 1500);
},
downloadDriver(osType) {
let url = lconfig.fromPath(`ServerUserUkey/downloadDriver?osType=${osType}&uktype=${this.uktype}`);
window.open(url);
},
logout() {
overpage.logout();
}
}
}
</script>
<style lang="css" scoped="false">html,
body {
background-color: #e9ecf3;
}
a {
font-size: 14px;
/* text-decoration: none; */
margin: 15px 0;
}
.container {
background-color: #fff;
border-radius: 5px;
/*box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);*/
box-shadow: 0 5px 28px rgba(153, 169, 207, 0.4), 0 4px 10px rgba(153, 169, 207, 0.3);
position: relative;
/*overflow: hidden;*/
width: 500px;
max-width: 100%;
min-height: 450px;
display: flex;
align-items: center;
}
.container h1 {
font-weight: 100;
margin: 0;
font-size: 35px;
}
.container h2 {
text-align: center;
}
.container p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
/*margin: 20px 0 30px;*/
}
.container span {
font-size: 12px;
}
.container a {
font-size: 14px;
text-decoration: underline;
margin: 15px 0;
}
.container .button {
border-radius: 20px;
border: 1px solid #FF4B2B;
background-color: #FF4B2B;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
cursor: pointer;
}
.container .button.disabled {
background-color: gainsboro !important;
border-color: gainsboro !important;
}
.container .button:active {
transform: scale(0.95);
}
.container form,
.container .form {
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
text-align: center;
}
.container input,
.container textarea {
background-color: white;
border: none;
padding: 12px 15px !important;
margin: 8px 0 !important;
width: 100%;
border: 1px solid gainsboro;
outline: none !important;
}
.container .form-container {
/*position: absolute;*/
/*top: 0;*/
/*height: 100%;*/
/*transition: all 0.6s ease-in-out;*/
width: 56%;
margin-left: auto;
margin-right: auto;
}
.container .social-container {
margin: 10px 0;
display: flex;
align-items: center;
}
.container .social-container a {
/*border: 1px solid #DDDDDD;*/
/*border-radius: 50%;*/
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 10px;
height: 32px;
width: 32px;
cursor: pointer;
}
.container input:-webkit-autofill,
.container textarea:-webkit-autofill,
.container select:-webkit-autofill {
background-color: white !important;
background-image: none !important;
color: black !important;
}
@media all and (max-width: 500px) {
.container {
width: 95%;
border-radius: 5px;
}
.container .form-container {
width: 80%;
}
}
html,
body {
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
}
table {
border: 0;
padding: 0;
margin: 0;
}
.link-p a {
text-decoration: underline;
color: dodgerblue;
}
.link-p a:hover {
cursor: pointer;
}</style>
src/check-ukey-for-login.htmv 0 → 100644
View file @ 16353609
<!--settings:
{
title:"UKey安全验证",
}
-->
<template>
<div style="width: 100%;min-height: 100%;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;">
<div class="container">
<div class="form-container">
<form method="post" @submit.stop.prevent="onCheckSign">
<h1 style="color: dodgerblue;margin: 20px;">UKey安全验证</h1>
<div style="height: 30px;"/>
<a-input-password v-if="needPin" v-model="pin" required="required" naxlength="16" placeholder="UKey Pin码" autocomplete="off"/>
<a @click="onCheckSign" :class="{button:true,disabled:confirmUkeyButtonDisabled}" style="margin: 15px 0;margin-bottom: 5px;background-color: dodgerblue;border-color: dodgerblue;">
{{confirmUkeyButtonText}}
</a>
<div v-show="loginTechSupport" style="margin-top: 15px;margin-bottom: 10px;font-size: 12px;color: gray;">
</div>
<p v-if="!hide_ukDriversDownload" style="margin: 5px;">
<a-popover placement="bottom">
<template #content="">
<div class="context-menu">
<a @click="downloadDriver('windows')">Windows驱动</a>
</div>
</template>
<a>下载驱动</a>
</a-popover>
</p>
<p style="margin: 5px;margin-bottom: 15px;">
<a @click="logout()" style="color: black;">注销登录</a>
</p>
</form>
</div>
</div>
</div>
</template>
<script>
import sdk from "xsdk";
import overpage from "overpage";
import "pageReady!justCheck";
export default {
data() {
return {
uktype: xsloader.queryParam("uktype"),
ukSign: null,
ukid: null,
pin: null,
needPin: false,
loginTechSupport: lconfig.properties.loginTechSupport,
confirmUkeyButtonText: null,
confirmUkeyButtonDisabled: true,
onCheckSignFun: null,
hide_ukDriversDownload: lconfig.conf.hide_ukDriversDownload == 'true'
}
},
mounted() {
this.initUKeyCheck();
},
methods: {
async initUKeyCheck() {
this.confirmUkeyButtonText = "连接UKey驱动中...";
this.confirmUkeyButtonDisabled = true;
await this.genUkeyRandom();
try {
let UkAuth = await import("default!./uk/uk-auth.js");
let config = await this.getClientInitParam();
let ukAuth = new UkAuth(this.uktype, config);
ukAuth.onInitCallback = () => {
this.needPin = ukAuth.needPin();
};
let isConn;
let signCode;
ukAuth.onError = (err) => {
console.error(err);
if (err?.type == "sign_error") {
sdk.showToast(err.errmsg);
}
};
ukAuth.onOpenChange = (state) => {
if (state == 0) {
this.confirmUkeyButtonText = "连接驱动中...";
} else if (state == 1) {
this.confirmUkeyButtonText = "请插入UKey...";
} else if (state == 2) {
this.confirmUkeyButtonText = "连接驱动失败！";
}
};
ukAuth.onConnChange = async (_isConn, _ukid) => {
console.log("onConnChange:isConn=", _isConn);
this.ukSign = null;
signCode = null;
isConn = _isConn;
this.ukid = _ukid;
if (isConn) {
this.confirmUkeyButtonText = "UKey验证登录";
this.confirmUkeyButtonDisabled = false;
} else {
this.confirmUkeyButtonText = "请插入UKey...";
this.confirmUkeyButtonDisabled = true;
}
};
ukAuth.onSignOk = (result) => {
this.ukSign = result;
this.doCheckUKey();
};
this.onCheckSignFun = slowerTrigger(async () => {
if (isConn) {
let pin;
if (this.needPin) {
pin = this.pin;
if (!pin) {
sdk.showToast("请输入UKey Pin码");
return;
}
}
signCode = await this.genUkeyRandom();
ukAuth.doSign(pin, signCode);
} else {
sdk.showToast("UKey未连接");
}
});
} catch (e) {
console.error(e);
sdk.showToast("初始化provider失败");
}
},
async getClientInitParam() {
let config = await sdk.Request({
url: lconfig.fromPath("ServerUserUkey/getClientInitParam"),
method: "post",
params: {
uktype: this.uktype,
}
});
return config;
},
onCheckSign() {
if (this.onCheckSignFun) {
this.onCheckSignFun();
}
},
async genUkeyRandom() {
let rcode = await sdk.Request({
url: lconfig.fromPath("OauthApi/genUkeyRandom"),
loading: true,
method: "post"
});
return rcode;
},
async doCheckUKey() {
await sdk.Request({
url: lconfig.fromPath("OauthApi/checkUKey"),
method: "post",
params: {
ukid: this.ukid,
ukSign: this.ukSign,
}
});
sdk.showToast("UKey验证通过");
setTimeout(() => {
location.href = lconfig.fromPath("OauthApi/checkUKey");
}, 1500);
},
downloadDriver(osType) {
let url = lconfig.fromPath(`ServerUserUkey/downloadDriver?osType=${osType}&uktype=${this.uktype}`);
window.open(url);
},
logout() {
overpage.logout();
}
}
}
</script>
<style lang="css" scoped="false">html,
body {
background-color: #e9ecf3;
}
a {
font-size: 14px;
/* text-decoration: none; */
margin: 15px 0;
}
.container {
background-color: #fff;
border-radius: 5px;
/*box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);*/
box-shadow: 0 5px 28px rgba(153, 169, 207, 0.4), 0 4px 10px rgba(153, 169, 207, 0.3);
position: relative;
/*overflow: hidden;*/
width: 500px;
max-width: 100%;
min-height: 450px;
display: flex;
align-items: center;
}
.container h1 {
font-weight: 100;
margin: 0;
font-size: 35px;
}
.container h2 {
text-align: center;
}
.container p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
/*margin: 20px 0 30px;*/
}
.container span {
font-size: 12px;
}
.container a {
font-size: 14px;
text-decoration: underline;
margin: 15px 0;
}
.container .button {
border-radius: 20px;
border: 1px solid #FF4B2B;
background-color: #FF4B2B;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
cursor: pointer;
}
.container .button.disabled {
background-color: gainsboro !important;
border-color: gainsboro !important;
}
.container .button:active {
transform: scale(0.95);
}
.container form,
.container .form {
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
text-align: center;
}
.container input,
.container textarea {
background-color: white;
border: none;
padding: 12px 15px !important;
margin: 8px 0 !important;
width: 100%;
border: 1px solid gainsboro;
outline: none !important;
}
.container .form-container {
/*position: absolute;*/
/*top: 0;*/
/*height: 100%;*/
/*transition: all 0.6s ease-in-out;*/
width: 56%;
margin-left: auto;
margin-right: auto;
}
.container .social-container {
margin: 10px 0;
display: flex;
align-items: center;
}
.container .social-container a {
/*border: 1px solid #DDDDDD;*/
/*border-radius: 50%;*/
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 10px;
height: 32px;
width: 32px;
cursor: pointer;
}
.container input:-webkit-autofill,
.container textarea:-webkit-autofill,
.container select:-webkit-autofill {
background-color: white !important;
background-image: none !important;
color: black !important;
}
@media all and (max-width: 500px) {
.container {
width: 95%;
border-radius: 5px;
}
.container .form-container {
width: 80%;
}
}
html,
body {
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
}
table {
border: 0;
padding: 0;
margin: 0;
}
.link-p a {
text-decoration: underline;
color: dodgerblue;
}
.link-p a:hover {
cursor: pointer;
}</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment