i18n 50%

.gitignore

@@ -15,5 +15,6 @@ sonar-project.properties
 .env
 local_settings.py
 src/docker-compose-dev
+node_modules
 .coverage
 archery_custom

common/static/dist/css/login.css → common/static/dist/css/style.less

@@ -1,3 +1,21 @@
+
+a {
+    color: #000;
+    font-family: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+
+    &:hover {
+        color: #555555;
+    }
+}
+
+.navbar-brand {
+    padding: 0;
+}
+
+.navbar-brand > img {
+    height: 50px;
+}
+
 .user-bottom-div {
     display: block;
     text-align: center;
@@ -20,12 +38,7 @@
 .login-form-wrapper {
     background-color: #FFF;
     border-radius: 4px;
-    box-shadow: rgba(0,0,0,0.1) 0 3px 5px;
-    padding: 30px 10px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 3px 5px;
+    padding: 30px 40px;
     border-top: 5px solid #337ab7;
-}
-
-.login-form {
-    margin: 20px;
-}
-
+}

common/static/i18n/i18n-archery.js

@@ -0,0 +1,24 @@
+let i18n_default_lang = 'en'
+let i18n_default_path = '/static/i18n/lang/'
+/*默认语言*/
+i18n("[i18n]", {
+    defaultLang: i18n_default_lang, // 设置默认语言，
+    filePath: i18n_default_path,
+    filePrefix: "i18n_",
+    fileSuffix: "",
+    forever:true,// 默认为 true  保存当前语言，设置为 false 后，每次刷新都为cn
+    get: true,
+    only: ['value', 'html', 'placeholder', 'title'], // 全局设置i18n-only，默认值：['value', 'html', 'placeholder', 'title']
+    callback: function() {
+        // console.log("i18n is ready.");
+    }
+});
+$(".lang_btn").click(function (){
+    console.log(this.getAttribute('lang'))
+    i18n("[i18n]", {
+        lang: this.getAttribute('lang'),// 变更语言
+        filePath: i18n_default_path,
+        forever:true,
+        get: true
+    });
+})

common/static/i18n/i18n.min.js

@@ -0,0 +1,200 @@
+(function() {
+	window['i18n'] = i18n;
+	window['i18n']['get'] = get;
+
+	window['i18n']['extra'] = extra; //
+
+	var defaults = {
+		lang: "",
+		defaultLang: "",
+		filePath: "/i18n/",
+		filePrefix: "i18n_",
+		fileSuffix: "",
+		forever: true,
+		get: false, // 是否在js中使用 i18n.get("key")
+		only: ['value', 'html', 'placeholder', 'title'],
+		callback: function() {},
+	}
+
+	function i18n(ele, options) {
+
+		defaults.i18nLang = null;
+		defaults.$ele = document.querySelectorAll(ele);
+
+		options = _extend(defaults, options);
+		if(_getCookie('i18n_lang') != "" && _getCookie('i18n_lang') != "undefined" && _getCookie('i18n_lang') != null) {
+			defaults.defaultLang = _getCookie('i18n_lang');
+		} else if(options.lang == "" && defaults.defaultLang == "") {
+			throw "defaultLang must not be null !";
+		};
+
+		if(options.lang != null && options.lang != "") {
+			if(options.forever) {
+				_setCookie('i18n_lang', options.lang);
+			} else {
+				_clearCookie("i18n_lang");
+			}
+		} else {
+			options.lang = defaults.defaultLang;
+		};
+
+		var tempLang = null;
+		var obj = {
+			'async': true,
+			'success': _success,
+			'err': _err,
+			'$ele': options.$ele,
+			'options': options
+		}
+		if(options.get) {
+			// 如果需要使用 i18n.get("key")
+			// 改为同步
+			obj.async = false;
+		}
+		obj.url = options.filePath + options.filePrefix + options.lang + options.fileSuffix + ".json";
+		i18nLang = _getJSON(obj); // end get json
+
+		if(options.get) {
+			// 如果需要使用 i18n.get("key")
+			// 改回异步
+			obj.async = true;
+		}
+		return window['i18n'];
+	}
+
+	function get(key) {
+		if(this.i18nLang == null || JSON.stringify(i18nLang) == '{}') {
+			return {}
+		};
+		return this.i18nLang[key];
+	}
+
+	function extra(obj) {
+		if(!('ele' in obj)  || !('attr' in obj)){
+			throw '参数错误，正确的JSON格式为 {"ele":"","attr":""}'
+		}
+
+		// document.querySelectorAll("button[title]")
+		var $ele = document.querySelectorAll(obj.ele);
+		$ele.forEach(function($this) {
+			let key = $this.getAttribute(obj.attr);
+			if(i18n.get(key) == undefined){
+				return true;
+			}
+			$this.setAttribute(obj.attr, i18n.get(key))
+		})
+
+	}
+
+	/* ==============  内部方法    =============== */
+	function _extend(destination, source) {
+		for(var prop in source) {
+			destination[prop] = source[prop];
+		}
+		return destination;
+	};
+
+	function _getCookie(name) {
+		var arr = document.cookie.split('; ');
+		for(var i = 0; i < arr.length; i++) {
+			var arr1 = arr[i].split('=');
+			if(arr1[0] == name) {
+				return arr1[1];
+			}
+		}
+		return '';
+	};
+
+	function _setCookie(name, value, myDay) {
+		var oDate = new Date();
+		oDate.setDate(oDate.getDate() + myDay);
+		document.cookie = name + '=' + value + '; expires=' + oDate + "; path=/";
+	};
+
+	function _clearCookie(name) {
+		document.cookie = name + '=' + '' + '; expires=' + -1;
+	}
+
+	function _getJSON(obj) {
+		// obj = {'async':'','url':'','success':'','err':''}
+		//1.创建Ajax对象。js中,使用一个没有定义的变量会报错,使用一个没有定义的属性,是undefined。IE6下使用没有定义的XMLHttpRequest会报错,所以当做window的一个属性使用
+		var xhr = null;
+		if(window.XMLHttpRequest) {
+			xhr = new XMLHttpRequest(); //非IE6
+		} else {
+			xhr = new ActiveXObject("Microsoft.XMLHTTP"); //IE6
+		}
+		//2.连接到服务器
+		if('async' in obj && obj.async == false) {
+			// 如果明确设置异步为false，则，同步操作
+			xhr.open("GET", obj.url, false);
+		} else {
+			xhr.open("GET", obj.url, true);
+		}
+
+		//3.发送get请求
+		xhr.send(null);
+
+		if('async' in obj && obj.async == false) {
+			// 如果是同步请求
+			i18n.i18nLang = obj.success(xhr.responseText, obj.$ele, obj.options)
+		} else {
+			//4.接收返回值
+			xhr.onreadystatechange = function() {
+				//xhr.readyState--浏览器和服务器之间进行到哪一步了
+				if(xhr.readyState == 4) { //读取完成 //读取的结果是成功
+					if(xhr.status == 200) {
+						i18n.i18nLang = obj.success(xhr.responseText, obj.$ele, obj.options)
+					} else {
+						obj.err(xhr.responseText); //对失败的原因做出处理
+					}
+				}
+			}
+		}
+
+	};
+
+	function _success(data, $ele, options) {
+		var i18nLang = {};
+		if(data != null) {
+			i18nLang = data;
+		}
+		if(typeof(i18nLang) == 'string') {
+			i18nLang = JSON.parse(i18nLang);
+		}
+		$ele.forEach(function($this) {
+			var i18nOnly = $this.getAttribute("i18n-only");
+			let i18Onlys = i18nOnly && i18nOnly.split(',') || []
+
+			if(i18Onlys.length == 0){
+				// 全局默认
+				i18Onlys = options.only
+			}
+
+			// type: html、value、等属性
+			i18Onlys.forEach(function(type){
+				if(type.indexOf('i18n') == 0){
+					return
+				}
+				if(type == 'html'){
+					// 设置html
+					if($this.innerHTML) {
+						$this.innerHTML = i18nLang[$this.getAttribute("i18n")]
+					}
+				}else{
+					if($this.getAttribute(type)) {
+						$this.setAttribute(type, i18nLang[$this.getAttribute("i18n")])
+					}
+				}
+			})
+
+		})// end forEach
+		options.callback();
+
+		return i18nLang;
+	};
+
+	function _err(data) {
+		throw data;
+	}
+})();

common/static/i18n/lang/i18n_cn.json

@@ -0,0 +1,49 @@
+{
+  "main.title": "Archery - SQL审核查询平台",
+  "btn.show_tran_login": "显示传统登录",
+  "btn.confirm": "确定",
+  "btn.cancel": "取消",
+  "btn.submit_sql": "SQL上线",
+  "label.audition": "系统审计",
+  "label.more": "更多",
+  "label.hello": "你好",
+  "label.exit": "退出",
+  "label.close": "关闭",
+  "label.logout": "退出",
+  "label.sysinfo": "系统信息",
+  "label.system": "系统管理",
+  "label.admin_dashboard": "管理后台",
+  "label.2fa": "2FA",
+  "label.2fa_config": "2FA 配置",
+  "label.change_pass": "修改密码",
+  "label.dashboard": "控制台",
+  "label.sql_audition": "SQL审核",
+  "label.sql_query": "SQL查询",
+  "label.sql_online": "SQL上线",
+  "label.sql_analysis": "SQL分析",
+  "label.data_dictionary": "数据字典",
+  "label.privilege_manage": "权限管理",
+  "label.optimization": "优化",
+  "label.sql_optimization": "SQL优化",
+  "label.slow_log": "慢日志",
+  "label.instance_manage": "实例管理",
+  "label.instance": "实例列表",
+  "label.general": "常规配置项",
+  "label.query": "查询",
+  "label.session": "会话管理",
+  "label.user": "用户管理",
+  "label.dba_principles": "DBA Principles",
+  "label.variables": "参数配置",
+  "label.database": "数据库管理",
+  "label.plugins": "工具插件",
+  "label.resource_group": "资源组管理",
+  "label.privilege": "权限组管理",
+  "label.username": "用户名",
+  "label.password": "密码",
+  "label.status": "状态",
+  "placeholder.search": "搜索",
+  "tooltip.status": "状态",
+  "footer.about": "关于",
+  "footer.contact": "联系我们",
+  "footer.title": "联系我们"
+}

common/static/i18n/lang/i18n_en.json

@@ -0,0 +1,49 @@
+{
+  "main.title": "Archery - SQL Audition Platform",
+  "btn.show_tran_login": "Show Traditional Login",
+  "btn.confirm": "Confirm",
+  "btn.cancel": "Cancel",
+  "btn.submit_sql": "Submit SQL",
+  "label.audition": "Audition",
+  "label.more": "More",
+  "label.hello": "Hello",
+  "label.exit": "Exit",
+  "label.close": "Close",
+  "label.logout": "Logout",
+  "label.sysinfo": "System Info",
+  "label.system": "System",
+  "label.admin_dashboard": "Admin Dashboard",
+  "label.2fa": "2FA",
+  "label.2fa_config": "2FA Configuration",
+  "label.change_pass": "Change Password",
+  "label.dashboard": "DashBoard",
+  "label.sql_audition": "SQL Audition",
+  "label.sql_query": "SQL Query",
+  "label.sql_online": "SQL Online",
+  "label.sql_analysis": "SQL Analysis",
+  "label.data_dictionary": "Data Dictionary",
+  "label.privilege_manage": "Privilege",
+  "label.optimization": "Optimization",
+  "label.sql_optimization": "SQL Optimization",
+  "label.slow_log": "Slow Logs",
+  "label.instance_manage": "Instance Manage",
+  "label.instance": "Instance",
+  "label.general": "General",
+  "label.query": "Query",
+  "label.session": "Session",
+  "label.user": "User",
+  "label.dba_principles": "DBA Principles",
+  "label.variables": "Variables",
+  "label.database": "Database",
+  "label.plugins": "Plugins",
+  "label.resource_group": "Resource Group",
+  "label.privilege": "Privilege",
+  "label.username": "Username",
+  "label.password": "Password",
+  "label.status": "Status",
+  "placeholder.search": "Search",
+  "tooltip.status": "Status",
+  "footer.about": "About",
+  "footer.contact": "Contact us",
+  "footer.title": "Contact us"
+}

common/templates/2fa.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Archery - 两步验证</title>
+    <title>Archery - 2FA Setting</title>
     {% load static %}
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- 引入 Bootstrap -->