UP

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "scui",
-	"version": "1.1.21",
+	"version": "1.2.0",
 	"private": true,
 	"scripts": {
 		"serve": "vue-cli-service serve",
@@ -8,17 +8,17 @@
 		"lint": "vue-cli-service lint"
 	},
 	"dependencies": {
-		"@tinymce/tinymce-vue": "4.0.3",
+		"@tinymce/tinymce-vue": "4.0.4",
 		"axios": "0.21.1",
-		"core-js": "3.15.2",
+		"core-js": "3.16.1",
 		"cropperjs": "1.5.12",
-		"crypto-js": "4.0.0",
+		"crypto-js": "4.1.1",
 		"echarts": "5.1.2",
 		"element-plus": "1.0.2-beta.70",
 		"nprogress": "0.2.0",
-		"sortablejs": "1.13.0",
+		"sortablejs": "1.14.0",
 		"tinymce": "5.8.2",
-		"vue": "3.1.4",
+		"vue": "3.2.2",
 		"vue-i18n": "9.1.7",
 		"vue-router": "4.0.10",
 		"vuedraggable": "4.0.3",
@@ -28,7 +28,7 @@
 		"@vue/cli-plugin-babel": "4.5.13",
 		"@vue/cli-plugin-eslint": "4.5.13",
 		"@vue/cli-service": "4.5.13",
-		"@vue/compiler-sfc": "3.1.4",
+		"@vue/compiler-sfc": "3.2.2",
 		"babel-eslint": "10.1.0",
 		"eslint": "6.8.0",
 		"eslint-plugin-vue": "7.12.1",

src/components/scFilterBar/index.vue

@@ -272,18 +272,14 @@
 	.sc-filter-main table td .del {background: #fff;color: #999;width: 32px;height: 32px;line-height: 32px;text-align: center;border-radius:50%;font-size: 12px;cursor: pointer;}
 	.sc-filter-main table td .del:hover {background: #F56C6C;color: #fff;}
 
-
+	.root {display: flex;height: 100%;flex-direction: column}
-
-	.root {
-		display: flex;
-		height: 100%;
-		flex-direction: column
-	}
 	.root:deep(.el-tabs__header) {margin: 0;}
 	.root:deep(.el-tabs__content) {flex: 1;background: #f6f8f9;}
 	.root:deep(.el-tabs__content) .el-tab-pane{overflow: auto;height:100%;}
 
 	[data-theme='dark'] .root:deep(.el-tabs__content) {background: none;}
-	[data-theme='dark'] .sc-filter-main {background: none;border-color:var(--el-border-color-base) ;}
+	[data-theme='dark'] .sc-filter-main {background: none;border-color:var(--el-border-color-base);}
-	
+	[data-theme='dark'] .sc-filter-main table td .del {background: none;}
+	[data-theme='dark'] .sc-filter-main table td .del:hover {background: #F56C6C;}
+	[data-theme='dark'] .nodata {border-color:var(--el-border-color-base);}
 </style>

src/components/scFilterBar/my.vue

@@ -106,4 +106,7 @@
 	.sc-filter-my-list li .del:hover {background: #F56C6C;color: #fff;}
 
 	[data-theme='dark'] .sc-filter-my .el-empty h2 {color: #fff;}
+	[data-theme='dark'] .sc-filter-my-list {background: none;border-color:var(--el-border-color-base);}
+	[data-theme='dark'] .sc-filter-my-list li {color: #d0d0d0;}
+	[data-theme='dark'] .sc-filter-my-list li:hover {background: var(--el-color-white);}
 </style>

src/components/scPageHeader/index.vue

@@ -46,4 +46,7 @@
 	.sc-page-header__title {flex: 1;}
 	.sc-page-header__title h2 {font-size: 17px;color: #3c4a54;font-weight: bold;margin-top: 3px;}
 	.sc-page-header__title p {font-size: 13px;color: #999;margin-top: 15px;}
+
+	[data-theme='dark'] .sc-page-header {background:#2b2b2b ;border-color:var(--el-border-color-base);}
+	[data-theme='dark'] .sc-page-header__title h2 {color: #d0d0d0;}
 </style>

src/config/index.js

@@ -3,7 +3,7 @@ const DEFAULT_CONFIG = {
 	APP_NAME: "SCUI",
 
 	//版本号
-	APP_VER: "1.1.21",
+	APP_VER: "1.2.0",
 
 	//接口地址
 	API_URL: "/api",

src/layout/components/setting.vue

@@ -2,6 +2,17 @@
 	<el-form ref="form" label-width="120px" label-position="left" style="padding:0 20px;">
 		<el-alert title="以下配置可实时预览，开发者可在 config/index.js 中配置默认值，非常不建议在生产环境下开放布局设置" type="error" :closable="false"></el-alert>
 		<el-divider></el-divider>
+		<el-form-item :label="$t('user.nightmode')">
+			<el-switch v-model="theme" active-value="dark" inactive-value="default"></el-switch>
+		</el-form-item>
+		<el-form-item :label="$t('user.language')">
+			<el-select v-model="lang">
+				<el-option label="简体中文" value="zh-cn"></el-option>
+				<el-option label="English" value="en"></el-option>
+				<el-option label="日本語" value="ja"></el-option>
+			</el-select>
+		</el-form-item>
+		<el-divider></el-divider>
 		<el-form-item label="框架布局">
 			<el-select v-model="layout" placeholder="请选择">
 				<el-option label="默认" value="default"></el-option>
@@ -27,6 +38,8 @@
 				layout: this.$store.state.global.layout,
 				menuIsCollapse: this.$store.state.global.menuIsCollapse,
 				layoutTags: this.$store.state.global.layoutTags,
+				lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG,
+				theme: this.$TOOL.data.get('APP_THEME') || 'default'
 			}
 		},
 		watch: {
@@ -38,6 +51,14 @@
 			},
 			layoutTags(){
 				this.$store.commit("TOGGLE_layoutTags")
+			},
+			theme(val){
+				document.body.setAttribute('data-theme', val)
+				this.$TOOL.data.set("APP_THEME", val);
+			},
+			lang(val){
+				this.$i18n.locale = val
+				this.$TOOL.data.set("APP_LANG", val);
 			}
 		}
 	}

src/locales/index.js

@@ -3,9 +3,11 @@ import tool from '@/utils/tool'
 import { createI18n } from 'vue-i18n'
 import elementLocale_zh_cn from 'element-plus/lib/locale/lang/zh-cn'
 import elementLocale_en from 'element-plus/lib/locale/lang/en'
+import elementLocale_ja from 'element-plus/lib/locale/lang/ja'
 
 import zh_cn from './lang/zh-cn.js'
 import en from './lang/en.js'
+import ja from './lang/ja.js'
 
 const messages = {
 	'zh-cn': {
@@ -15,6 +17,10 @@ const messages = {
 	'en': {
 		el: elementLocale_en.el,
 		...en
+	},
+	'ja': {
+		el: elementLocale_ja.el,
+		...ja
 	}
 }
 

src/locales/lang/ja.js

@@ -0,0 +1,11 @@
+export default {
+	user: {
+		dynamic: 'ダイナミック',
+		info: 'ユーザー',
+		settings: '設定',
+		nightmode: 'ナイトモード',
+		nightmode_msg: '光の弱い環境に適しています，現在のブラックモードはベータバージョンです。',
+		language: '言語',
+		language_msg: '翻訳が進行中、本ビューのテキストを一時的に翻訳しました。',
+	}
+}

src/views/userCenter/index.vue

@@ -81,6 +81,7 @@
 									<el-select v-model="config.lang">
 										<el-option label="简体中文" value="zh-cn"></el-option>
 										<el-option label="English" value="en"></el-option>
+										<el-option label="日本語" value="ja"></el-option>
 									</el-select>
 									<div class="el-form-item-msg">{{ $t('user.language_msg') }}</div>
 								</el-form-item>
@@ -149,8 +150,8 @@
 					about: "正所谓富贵险中求"
 				},
 				config: {
-					lang: this.$TOOL.data.get('APP_LANG')||this.$CONFIG.LANG,
+					lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG,
-					theme: this.$TOOL.data.get('APP_THEME')
+					theme: this.$TOOL.data.get('APP_THEME') || 'default'
 				}
 			}
 		},