@peng_kai/kit 0.2.0-beta.16 → 0.2.0-beta.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/admin/components/rich-text/src/RichText.vue +3 -2
- package/admin/styles/index.scss +12 -13
- package/libs/vue-i18n.ts +21 -0
- package/package.json +92 -91
- package/utils/LocaleManager.ts +125 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { useVModel } from '@vueuse/core';
|
|
3
|
-
import CKEditor from '@ckeditor/ckeditor5-vue';
|
|
3
|
+
import * as CKEditor from '@ckeditor/ckeditor5-vue';
|
|
4
4
|
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
|
|
5
5
|
import { Alignment } from '@ckeditor/ckeditor5-alignment';
|
|
6
6
|
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
|
|
@@ -219,11 +219,12 @@ const emits = defineEmits<{
|
|
|
219
219
|
const editorData = useVModel(props, 'modelValue', emits);
|
|
220
220
|
const localeEditorConfig = { ...editorConfig };
|
|
221
221
|
localeEditorConfig.extraPlugins = [...props.plugins];
|
|
222
|
+
const CKEditorComponent = CKEditor.default.component;
|
|
222
223
|
</script>
|
|
223
224
|
|
|
224
225
|
<template>
|
|
225
226
|
<div class="editor-wrapper">
|
|
226
|
-
<
|
|
227
|
+
<CKEditorComponent v-model="editorData" :editor="ClassicEditor" :config="localeEditorConfig" />
|
|
227
228
|
</div>
|
|
228
229
|
</template>
|
|
229
230
|
|
package/admin/styles/index.scss
CHANGED
|
@@ -5,22 +5,21 @@
|
|
|
5
5
|
* {
|
|
6
6
|
scrollbar-color: rgb(0 0 0 / 50%) transparent;
|
|
7
7
|
// scrollbar-width: thin;
|
|
8
|
-
/* overflow-y: overlay; */
|
|
9
|
-
}
|
|
10
8
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
9
|
+
*::-webkit-scrollbar {
|
|
10
|
+
width: 6px;
|
|
11
|
+
height: 6px;
|
|
12
|
+
background-color: transparent;
|
|
13
|
+
}
|
|
16
14
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
15
|
+
*::-webkit-scrollbar-thumb {
|
|
16
|
+
border-radius: 10px;
|
|
17
|
+
background-color: rgb(133 133 133 / 20%);
|
|
18
|
+
}
|
|
21
19
|
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
*::-webkit-scrollbar-thumb:hover {
|
|
21
|
+
background-color: rgb(133 133 133 / 60%);
|
|
22
|
+
}
|
|
24
23
|
}
|
|
25
24
|
}
|
|
26
25
|
|
package/libs/vue-i18n.ts
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { I18nOptions } from 'vue-i18n';
|
|
2
|
+
|
|
3
|
+
export * from 'vue-i18n';
|
|
4
|
+
|
|
5
|
+
export type TDatetimeStyles = Record<
|
|
6
|
+
'date' | 'time' | 'full' | 'mdhms' | 'mdhm',
|
|
7
|
+
NonNullable<I18nOptions['datetimeFormats']>[string][string]
|
|
8
|
+
>;
|
|
9
|
+
|
|
10
|
+
export const presetDatetimeStyles: TDatetimeStyles = {
|
|
11
|
+
/** 年/月/日 */
|
|
12
|
+
date: { year: 'numeric', month: '2-digit', day: '2-digit' },
|
|
13
|
+
/** 时:分:秒 */
|
|
14
|
+
time: { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false },
|
|
15
|
+
/** 年/月/日 时:分:秒 */
|
|
16
|
+
full: { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false },
|
|
17
|
+
/** 月/日 时:分:秒 */
|
|
18
|
+
mdhms: { month: '2-digit', day: '2-digit', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false },
|
|
19
|
+
/** 月/日 时:分 */
|
|
20
|
+
mdhm: { month: '2-digit', day: '2-digit', hour: 'numeric', minute: 'numeric', hour12: false },
|
|
21
|
+
};
|
package/package.json
CHANGED
|
@@ -1,91 +1,92 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@peng_kai/kit",
|
|
3
|
-
"type": "module",
|
|
4
|
-
"version": "0.2.0-beta.
|
|
5
|
-
"description": "",
|
|
6
|
-
"author": "",
|
|
7
|
-
"license": "ISC",
|
|
8
|
-
"keywords": [],
|
|
9
|
-
"main": "index.js",
|
|
10
|
-
"scripts": {
|
|
11
|
-
"dev:js": "tsx ./admin/scripts/deploy.ts",
|
|
12
|
-
"lint": "eslint .",
|
|
13
|
-
"lint:fix": "eslint . --fix"
|
|
14
|
-
},
|
|
15
|
-
"peerDependencies": {
|
|
16
|
-
"ant-design-vue": "4.1.2",
|
|
17
|
-
"vue": "3.4.19",
|
|
18
|
-
"vue-router": "4.2.5"
|
|
19
|
-
},
|
|
20
|
-
"dependencies": {
|
|
21
|
-
"@aws-sdk/client-s3": "^3.515.0",
|
|
22
|
-
"@aws-sdk/lib-storage": "^3.515.0",
|
|
23
|
-
"@babel/generator": "^7.23.6",
|
|
24
|
-
"@babel/parser": "^7.23.9",
|
|
25
|
-
"@babel/traverse": "^7.23.9",
|
|
26
|
-
"@babel/types": "^7.23.9",
|
|
27
|
-
"@ckeditor/ckeditor5-adapter-ckfinder": "^41.1.0",
|
|
28
|
-
"@ckeditor/ckeditor5-alignment": "^41.1.0",
|
|
29
|
-
"@ckeditor/ckeditor5-autoformat": "^41.1.0",
|
|
30
|
-
"@ckeditor/ckeditor5-basic-styles": "^41.1.0",
|
|
31
|
-
"@ckeditor/ckeditor5-block-quote": "^41.1.0",
|
|
32
|
-
"@ckeditor/ckeditor5-build-classic": "^41.1.0",
|
|
33
|
-
"@ckeditor/ckeditor5-code-block": "^41.1.0",
|
|
34
|
-
"@ckeditor/ckeditor5-document-outline": "^41.1.0",
|
|
35
|
-
"@ckeditor/ckeditor5-editor-classic": "^41.1.0",
|
|
36
|
-
"@ckeditor/ckeditor5-essentials": "^41.1.0",
|
|
37
|
-
"@ckeditor/ckeditor5-font": "^41.1.0",
|
|
38
|
-
"@ckeditor/ckeditor5-heading": "^41.1.0",
|
|
39
|
-
"@ckeditor/ckeditor5-highlight": "^41.1.0",
|
|
40
|
-
"@ckeditor/ckeditor5-horizontal-line": "^41.1.0",
|
|
41
|
-
"@ckeditor/ckeditor5-html-embed": "^41.1.0",
|
|
42
|
-
"@ckeditor/ckeditor5-html-support": "^41.1.0",
|
|
43
|
-
"@ckeditor/ckeditor5-image": "^41.1.0",
|
|
44
|
-
"@ckeditor/ckeditor5-import-word": "^41.1.0",
|
|
45
|
-
"@ckeditor/ckeditor5-indent": "^41.1.0",
|
|
46
|
-
"@ckeditor/ckeditor5-link": "^41.1.0",
|
|
47
|
-
"@ckeditor/ckeditor5-list": "^41.1.0",
|
|
48
|
-
"@ckeditor/ckeditor5-media-embed": "^41.1.0",
|
|
49
|
-
"@ckeditor/ckeditor5-paragraph": "^41.1.0",
|
|
50
|
-
"@ckeditor/ckeditor5-remove-format": "^41.1.0",
|
|
51
|
-
"@ckeditor/ckeditor5-show-blocks": "^41.1.0",
|
|
52
|
-
"@ckeditor/ckeditor5-source-editing": "^41.1.0",
|
|
53
|
-
"@ckeditor/ckeditor5-table": "^41.1.0",
|
|
54
|
-
"@ckeditor/ckeditor5-theme-lark": "^41.1.0",
|
|
55
|
-
"@ckeditor/ckeditor5-typing": "^41.1.0",
|
|
56
|
-
"@ckeditor/ckeditor5-upload": "^41.1.0",
|
|
57
|
-
"@ckeditor/ckeditor5-vue": "^5.1.0",
|
|
58
|
-
"@ckeditor/ckeditor5-word-count": "^41.1.0",
|
|
59
|
-
"@tanstack/vue-query": "^5.21.4",
|
|
60
|
-
"@vueuse/components": "^10.7.2",
|
|
61
|
-
"@vueuse/core": "^10.7.2",
|
|
62
|
-
"@vueuse/router": "^10.7.2",
|
|
63
|
-
"a-calc": "^1.3.8",
|
|
64
|
-
"ant-design-vue": "^4.1.2",
|
|
65
|
-
"archiver": "^6.0.1",
|
|
66
|
-
"axios": "^1.6.7",
|
|
67
|
-
"bignumber.js": "^9.1.2",
|
|
68
|
-
"chokidar": "^3.6.0",
|
|
69
|
-
"dayjs": "^1.11.10",
|
|
70
|
-
"echarts": "^5.4.3",
|
|
71
|
-
"execa": "^8.0.1",
|
|
72
|
-
"fast-glob": "^3.3.2",
|
|
73
|
-
"localstorage-slim": "^2.7.0",
|
|
74
|
-
"lodash-es": "^4.17.21",
|
|
75
|
-
"nprogress": "^0.2.0",
|
|
76
|
-
"pinia": "^2.1.7",
|
|
77
|
-
"tsx": "^4.7.1",
|
|
78
|
-
"vue": "^3.4.19",
|
|
79
|
-
"vue-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
"@
|
|
84
|
-
"@types/
|
|
85
|
-
"@types/
|
|
86
|
-
"@types/
|
|
87
|
-
"
|
|
88
|
-
"
|
|
89
|
-
"
|
|
90
|
-
|
|
91
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@peng_kai/kit",
|
|
3
|
+
"type": "module",
|
|
4
|
+
"version": "0.2.0-beta.18",
|
|
5
|
+
"description": "",
|
|
6
|
+
"author": "",
|
|
7
|
+
"license": "ISC",
|
|
8
|
+
"keywords": [],
|
|
9
|
+
"main": "index.js",
|
|
10
|
+
"scripts": {
|
|
11
|
+
"dev:js": "tsx ./admin/scripts/deploy.ts",
|
|
12
|
+
"lint": "eslint .",
|
|
13
|
+
"lint:fix": "eslint . --fix"
|
|
14
|
+
},
|
|
15
|
+
"peerDependencies": {
|
|
16
|
+
"ant-design-vue": "4.1.2",
|
|
17
|
+
"vue": "3.4.19",
|
|
18
|
+
"vue-router": "4.2.5"
|
|
19
|
+
},
|
|
20
|
+
"dependencies": {
|
|
21
|
+
"@aws-sdk/client-s3": "^3.515.0",
|
|
22
|
+
"@aws-sdk/lib-storage": "^3.515.0",
|
|
23
|
+
"@babel/generator": "^7.23.6",
|
|
24
|
+
"@babel/parser": "^7.23.9",
|
|
25
|
+
"@babel/traverse": "^7.23.9",
|
|
26
|
+
"@babel/types": "^7.23.9",
|
|
27
|
+
"@ckeditor/ckeditor5-adapter-ckfinder": "^41.1.0",
|
|
28
|
+
"@ckeditor/ckeditor5-alignment": "^41.1.0",
|
|
29
|
+
"@ckeditor/ckeditor5-autoformat": "^41.1.0",
|
|
30
|
+
"@ckeditor/ckeditor5-basic-styles": "^41.1.0",
|
|
31
|
+
"@ckeditor/ckeditor5-block-quote": "^41.1.0",
|
|
32
|
+
"@ckeditor/ckeditor5-build-classic": "^41.1.0",
|
|
33
|
+
"@ckeditor/ckeditor5-code-block": "^41.1.0",
|
|
34
|
+
"@ckeditor/ckeditor5-document-outline": "^41.1.0",
|
|
35
|
+
"@ckeditor/ckeditor5-editor-classic": "^41.1.0",
|
|
36
|
+
"@ckeditor/ckeditor5-essentials": "^41.1.0",
|
|
37
|
+
"@ckeditor/ckeditor5-font": "^41.1.0",
|
|
38
|
+
"@ckeditor/ckeditor5-heading": "^41.1.0",
|
|
39
|
+
"@ckeditor/ckeditor5-highlight": "^41.1.0",
|
|
40
|
+
"@ckeditor/ckeditor5-horizontal-line": "^41.1.0",
|
|
41
|
+
"@ckeditor/ckeditor5-html-embed": "^41.1.0",
|
|
42
|
+
"@ckeditor/ckeditor5-html-support": "^41.1.0",
|
|
43
|
+
"@ckeditor/ckeditor5-image": "^41.1.0",
|
|
44
|
+
"@ckeditor/ckeditor5-import-word": "^41.1.0",
|
|
45
|
+
"@ckeditor/ckeditor5-indent": "^41.1.0",
|
|
46
|
+
"@ckeditor/ckeditor5-link": "^41.1.0",
|
|
47
|
+
"@ckeditor/ckeditor5-list": "^41.1.0",
|
|
48
|
+
"@ckeditor/ckeditor5-media-embed": "^41.1.0",
|
|
49
|
+
"@ckeditor/ckeditor5-paragraph": "^41.1.0",
|
|
50
|
+
"@ckeditor/ckeditor5-remove-format": "^41.1.0",
|
|
51
|
+
"@ckeditor/ckeditor5-show-blocks": "^41.1.0",
|
|
52
|
+
"@ckeditor/ckeditor5-source-editing": "^41.1.0",
|
|
53
|
+
"@ckeditor/ckeditor5-table": "^41.1.0",
|
|
54
|
+
"@ckeditor/ckeditor5-theme-lark": "^41.1.0",
|
|
55
|
+
"@ckeditor/ckeditor5-typing": "^41.1.0",
|
|
56
|
+
"@ckeditor/ckeditor5-upload": "^41.1.0",
|
|
57
|
+
"@ckeditor/ckeditor5-vue": "^5.1.0",
|
|
58
|
+
"@ckeditor/ckeditor5-word-count": "^41.1.0",
|
|
59
|
+
"@tanstack/vue-query": "^5.21.4",
|
|
60
|
+
"@vueuse/components": "^10.7.2",
|
|
61
|
+
"@vueuse/core": "^10.7.2",
|
|
62
|
+
"@vueuse/router": "^10.7.2",
|
|
63
|
+
"a-calc": "^1.3.8",
|
|
64
|
+
"ant-design-vue": "^4.1.2",
|
|
65
|
+
"archiver": "^6.0.1",
|
|
66
|
+
"axios": "^1.6.7",
|
|
67
|
+
"bignumber.js": "^9.1.2",
|
|
68
|
+
"chokidar": "^3.6.0",
|
|
69
|
+
"dayjs": "^1.11.10",
|
|
70
|
+
"echarts": "^5.4.3",
|
|
71
|
+
"execa": "^8.0.1",
|
|
72
|
+
"fast-glob": "^3.3.2",
|
|
73
|
+
"localstorage-slim": "^2.7.0",
|
|
74
|
+
"lodash-es": "^4.17.21",
|
|
75
|
+
"nprogress": "^0.2.0",
|
|
76
|
+
"pinia": "^2.1.7",
|
|
77
|
+
"tsx": "^4.7.1",
|
|
78
|
+
"vue": "^3.4.19",
|
|
79
|
+
"vue-i18n": "^9.9.1",
|
|
80
|
+
"vue-router": "^4.2.5"
|
|
81
|
+
},
|
|
82
|
+
"devDependencies": {
|
|
83
|
+
"@peng_kai/lint": "^0.1.0",
|
|
84
|
+
"@types/archiver": "^6.0.2",
|
|
85
|
+
"@types/lodash-es": "^4.17.12",
|
|
86
|
+
"@types/node": "18.19.15",
|
|
87
|
+
"@types/nprogress": "^0.2.3",
|
|
88
|
+
"type-fest": "^4.10.2",
|
|
89
|
+
"typescript": "^5.3.3",
|
|
90
|
+
"vue-component-type-helpers": "^1.8.27"
|
|
91
|
+
}
|
|
92
|
+
}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import { mapKeys } from 'lodash-es';
|
|
2
|
+
|
|
3
|
+
interface ILocaleMeta {
|
|
4
|
+
label: string
|
|
5
|
+
codes: string[]
|
|
6
|
+
icon?: string
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
interface ILoaders {
|
|
10
|
+
meta: Record<string, ILocaleMeta>
|
|
11
|
+
message: Record<string, () => Promise<Record<string, string>>>
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
const metaPathRE = /\/([-\w]*)\/(meta)\.ts$/;
|
|
15
|
+
const messagePathRE = /\/([-\w]*)\/(index)\.ts$/;
|
|
16
|
+
|
|
17
|
+
export class LocaleManager {
|
|
18
|
+
public localesLoaded: string[] = [];
|
|
19
|
+
|
|
20
|
+
private metaLoaders: ILoaders['meta'];
|
|
21
|
+
private messageLoaders: ILoaders['message'];
|
|
22
|
+
private localeStorageKey = 'LOCALE';
|
|
23
|
+
private _locale = '';
|
|
24
|
+
|
|
25
|
+
public constructor(loaders: ILoaders) {
|
|
26
|
+
this.metaLoaders = mapKeys(loaders.meta, (_, path) => path.match(metaPathRE)?.[1] ?? path);
|
|
27
|
+
this.messageLoaders = mapKeys(loaders.message, (_, path) => path.match(messagePathRE)?.[1] ?? path);
|
|
28
|
+
this._locale = this.defaultLocale;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/** 当前区域 */
|
|
32
|
+
public get locale() {
|
|
33
|
+
return this._locale;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/** 当前区域 */
|
|
37
|
+
public set locale(value: string) {
|
|
38
|
+
if (this.localesAvailable.includes(value)) {
|
|
39
|
+
document.documentElement.lang = value;
|
|
40
|
+
this.setStorageLocale(value);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/** 可用的区域列表 */
|
|
45
|
+
public get localesAvailable() {
|
|
46
|
+
return Object.keys(this.metaLoaders);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/** 所有区域元数据 */
|
|
50
|
+
public get localeMetas() {
|
|
51
|
+
return this.metaLoaders;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/** 获取默认区域 */
|
|
55
|
+
public get defaultLocale() {
|
|
56
|
+
const searchParams = new URLSearchParams(location.search);
|
|
57
|
+
// 获取区域的优先级
|
|
58
|
+
const localeTargets = [searchParams.get('locale'), searchParams.get('lang'), this.getStorageLocale(), navigator.language]
|
|
59
|
+
.filter(locale => !!locale)
|
|
60
|
+
.map(locale => locale!.replace('_', '-'));
|
|
61
|
+
const codeMatrix = this.localesAvailable.map(locale => [locale, ...this.localeMetas[locale].codes]);
|
|
62
|
+
let localeFinal = '';
|
|
63
|
+
|
|
64
|
+
for (const target of localeTargets) {
|
|
65
|
+
for (const codes of codeMatrix) {
|
|
66
|
+
const matched = codes.some(code => code.toUpperCase().startsWith(target.toUpperCase()));
|
|
67
|
+
|
|
68
|
+
if (matched) {
|
|
69
|
+
localeFinal = codes[0];
|
|
70
|
+
break;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
if (localeFinal)
|
|
75
|
+
break;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
localeFinal = localeFinal || 'en-US';
|
|
79
|
+
this.clearUrlLocale();
|
|
80
|
+
|
|
81
|
+
return localeFinal;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/**
|
|
85
|
+
* 加载区域消息
|
|
86
|
+
* @param locale 区域
|
|
87
|
+
* @returns 返回加载的消息，如果加载失败则返回 undefined
|
|
88
|
+
*/
|
|
89
|
+
public async loadLocaleMessage(locale: string) {
|
|
90
|
+
if (!this.localesAvailable.includes(locale))
|
|
91
|
+
return;
|
|
92
|
+
|
|
93
|
+
const message = await this.messageLoaders[locale]?.().catch(() => undefined);
|
|
94
|
+
|
|
95
|
+
if (message)
|
|
96
|
+
this.localesLoaded.push(locale);
|
|
97
|
+
|
|
98
|
+
return message;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/**
|
|
102
|
+
* 定义区域元数据
|
|
103
|
+
* @param meta 区域元数据对象
|
|
104
|
+
* @returns 区域元数据对象
|
|
105
|
+
*/
|
|
106
|
+
public static defineMeta(meta: ILocaleMeta) {
|
|
107
|
+
return meta;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
private clearUrlLocale() {
|
|
111
|
+
const url = new URL(location.href);
|
|
112
|
+
url.searchParams.delete('locale');
|
|
113
|
+
url.searchParams.delete('lang');
|
|
114
|
+
|
|
115
|
+
history.replaceState(null, '', url.toString());
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
private getStorageLocale() {
|
|
119
|
+
return localStorage.getItem(this.localeStorageKey);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
private setStorageLocale(locale: string) {
|
|
123
|
+
return localStorage.setItem(this.localeStorageKey, locale);
|
|
124
|
+
}
|
|
125
|
+
}
|