diff --git a/package.json b/package.json
index 02a6d88..bf70d6e 100644
--- a/package.json
+++ b/package.json
@@ -7,9 +7,6 @@
"email": "997132391@qq.com",
"url": "http://me.ibwei.com"
},
- "publishConfig": {
- "registry": "https://registry.npmjs.org/"
- },
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
@@ -28,12 +25,15 @@
"@types"
],
"dependencies": {
- "ant-design-vue": "^2.0.0-beta.6",
+ "@vue/composition-api": "^1.0.0-beta.14",
+ "@vueuse/core": "^4.0.0-beta.16",
+ "ant-design-vue": "^2.0.0-beta.9",
"axios": "^0.20.0",
"core-js": "^3.6.5",
"moment": "^2.27.0",
"vue": "^3.0.0-0",
"vue-class-component": "^8.0.0-0",
+ "vue-composable": "^1.0.0-beta.10",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0",
"vuex-persistedstate": "^3.1.0"
diff --git a/src/components/ChangeLanguage.vue b/src/components/ChangeLanguage.vue
new file mode 100644
index 0000000..46c301c
--- /dev/null
+++ b/src/components/ChangeLanguage.vue
@@ -0,0 +1,77 @@
+
+
+ {{ i18n.languageName }}
+
+
+
+ {{ LanguageNameList[key] }}
+
+
+
+
+
+
+
+
+
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
new file mode 100644
index 0000000..f4f77d1
--- /dev/null
+++ b/src/i18n/index.ts
@@ -0,0 +1,97 @@
+/**
+ * vue-i18n 使用姿势说明
+ * see more : https://pikax.me/vue-composable/composable/i18n/i18n.html#parameters
+ */
+
+import { includes } from 'lodash'
+import Store from '@/store'
+import moment from 'moment'
+import { findKeyByValue } from '@/utils/common'
+import { useI18n } from 'vue-composable'
+import zhCN from '@/i18n/messages/zhCN'
+import en from '@/i18n/messages/en'
+
+let __LOCALE__ = Store.__s('app.language')
+
+if (!__LOCALE__) {
+ __LOCALE__ = window.navigator.language.split('-').join('')
+ Store.__s('app.language', __LOCALE__)
+}
+
+/** 定义语言模版 */
+export const Locales: any = {}
+
+/**
+ * @todo 语言名字命名要考虑三个部分：一是 antdv 组件国际化的语言名字，二是 i18n模版语言的命名，三是浏览器对于语言的命名（这里会跟 http 请* 求相关，也是后端能识别的语言命名），因此要将前两种语言的名字通过字典转换成标准名称，也就是浏览器的语言名使用SO 639-1标准
+ */
+
+export const TranslateTable: { [key: string]: string } = {
+ en: 'en_US',
+ zhCN: 'zh_CN'
+}
+
+export const LanguageNameList: { [key: string]: string } = {
+ en: 'English',
+ zhCN: '简体(中文)'
+}
+
+export const i18nInstance = useI18n({
+ locale: 'zhCN',
+ messages: {
+ zhCN,
+ en
+ }
+})
+
+/**
+ * @description 自动加载 antd-vue 需要的语言模版
+ */
+function loadAtdLocales() {
+ const files = require.context(
+ '../../node_modules/ant-design-vue/es/locale-provider',
+ true,
+ /\.js$/
+ )
+ files.keys().forEach(key => {
+ const fileName = /(?<=\/)\S+(?=\.)/.exec(key) as Array
+ if (includes(TranslateTable, fileName[0])) {
+ const localeKey = findKeyByValue(TranslateTable, fileName[0])
+ if (localeKey) {
+ Locales[localeKey] = files(key).default
+ }
+ }
+ })
+}
+
+/**
+ * @functin setLang - set the app's language
+ * @param {string} lang - the language will be setted
+ * @return {string} lang - langguage name
+ */
+
+function _set(lang: keyof typeof TranslateTable): any {
+ i18nInstance.locale.value = lang as any
+ // 设置当前语言的时间
+ moment.locale(TranslateTable[lang])
+ // Axios.defaults.headers.common['Accept-Language'] = lang
+ Store.__s('app.language', lang)
+ return lang
+}
+
+/**
+ * @functin 异步加载自定义的 i18n 模版
+ * @param {string} lang - 将要更换的语言
+ * @return {string} lang - 返回将要更改的语言明后才能
+ */
+export function setLang(lang: string): Promise {
+ if (lang === i18nInstance.locale.value) {
+ return Promise.resolve('same')
+ }
+ return Promise.resolve(_set(lang))
+}
+
+/* 加载 antd 模版 */
+loadAtdLocales()
+
+/** 设置初始化语言 */
+setLang(__LOCALE__)
diff --git a/src/i18n/messages/en.ts b/src/i18n/messages/en.ts
new file mode 100644
index 0000000..d8f0609
--- /dev/null
+++ b/src/i18n/messages/en.ts
@@ -0,0 +1,6 @@
+export default {
+ languageName: 'English',
+ 'Current Language:': 'Current Language:',
+ cancel: 'cancel',
+ Play: 'Play'
+}
diff --git a/src/i18n/messages/zhCN.ts b/src/i18n/messages/zhCN.ts
new file mode 100644
index 0000000..cfd5141
--- /dev/null
+++ b/src/i18n/messages/zhCN.ts
@@ -0,0 +1,9 @@
+const zhCN = {
+ languageName: '中文（简体）',
+ 'Current Language:': '已经成功切换到',
+ cancel: '取消',
+ Play: '点击播放视频'
+}
+type i18nType = typeof zhCN
+export default zhCN
+export { i18nType }
diff --git a/src/main.ts b/src/main.ts
index 23cc9f1..f11e941 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -20,4 +20,7 @@ loadAllPlugins(app)
/** 自动注册全局组件 */
registeGlobalComponent(app)
-app.use(store).use(router).mount('#app')
+app
+ .use(store)
+ .use(router)
+ .mount('#app')
diff --git a/src/plugins/antd.ts b/src/plugins/antd.ts
index b5dc8bf..09d1fbd 100644
--- a/src/plugins/antd.ts
+++ b/src/plugins/antd.ts
@@ -1,5 +1,5 @@
-import { Button, Card, Row, Col, Tag, Form, Input } from 'ant-design-vue'
-import { createApp } from 'vue'
+import { Button, Card, Row, Col, Tag, Form, Input, ConfigProvider, Select, DatePicker, Dropdown, Menu, Divider, Badge, BackTop, Carousel } from 'ant-design-vue'
+import '@/styles/antd.less'
/**
* @description 手动注册 antd-vue 组件,达到按需加载目的
@@ -7,7 +7,7 @@ import { createApp } from 'vue'
* @param {ReturnType} app 整个应用的实例
* @returns void
*/
-export default function loadComponent(app: ReturnType) {
+export default function loadComponent(app: any) {
app.use(Button)
app.use(Card)
app.use(Row)
@@ -15,4 +15,13 @@ export default function loadComponent(app: ReturnType) {
app.use(Tag)
app.use(Form)
app.use(Input)
+ app.use(Dropdown)
+ app.use(Menu)
+ app.use(Divider)
+ app.use(ConfigProvider)
+ app.use(Select)
+ app.use(DatePicker)
+ app.use(BackTop)
+ app.use(Badge)
+ app.use(Carousel)
}
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
index bd17476..6e722bb 100644
--- a/src/plugins/index.ts
+++ b/src/plugins/index.ts
@@ -6,7 +6,7 @@ import { createApp } from 'vue'
*/
export function loadAllPlugins(app: ReturnType) {
const files = require.context('.', true, /\.ts$/)
- files.keys().forEach((key) => {
+ files.keys().forEach(key => {
if (key !== './index.ts') files(key).default(app)
})
}
diff --git a/src/styles/antd.less b/src/styles/antd.less
new file mode 100644
index 0000000..91265db
--- /dev/null
+++ b/src/styles/antd.less
@@ -0,0 +1,18 @@
+// 配置 antd 样式相关
+@import '~ant-design-vue/dist/antd.less'; // 引入官方提供的 less 样式入口文件
+
+// 定制主题
+@primary-color : #00a971; // 全局主色
+@primary : #00a971;
+@link-color : #00a971; // 链接色
+@success-color : #52c41a; // 成功色
+@warning-color : #faad14; // 警告色
+@error-color : #f5222d; // 错误色
+@font-size-base : 14px; // 主字号
+@heading-color : rgba(0, 0, 0, 0.85); // 标题色
+@text-color : rgba(0, 0, 0, 0.65); // 主文本色
+@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
+@disabled-color : rgba(0, 0, 0, 0.25); // 失效色
+@border-radius-base : 2px; // 组件/浮层圆角
+@border-color-base : #d9d9d9; // 边框色
+@box-shadow-base : 0 2px 8px rgba(0, 0, 0, 0.15); //
\ No newline at end of file
diff --git a/src/styles/common.less b/src/styles/common.less
new file mode 100644
index 0000000..5e5a034
--- /dev/null
+++ b/src/styles/common.less
@@ -0,0 +1,37 @@
+.g-description,
+.g-desc {
+ font-size : 18px;
+ font-weight: 400;
+ color : #333333;
+ line-height: 27px;
+ text-align : justify;
+}
+
+.g-title {
+ font-size : 36px;
+ font-weight: 500;
+ color : #333333;
+ line-height: 36px;
+
+}
+
+.g-sub-title {
+ font-size : 30px;
+ font-weight: 500;
+ color : #333333;
+ line-height: 30px;
+}
+
+.g-flex-row {
+ display : flex;
+ flex-flow : row nowrap;
+ justify-content: center;
+ align-items : center;
+}
+
+.g-flex-col {
+ display : flex;
+ flex-flow : column nowrap;
+ justify-content: center;
+ align-items : center;
+}
\ No newline at end of file
diff --git a/src/styles/iconfont.less b/src/styles/iconfont.less
new file mode 100644
index 0000000..ef0bc8e
--- /dev/null
+++ b/src/styles/iconfont.less
@@ -0,0 +1,21 @@
+/* iconfont */
+@font-face {
+ font-family: 'iconfont'; /* project id 2092412 */
+ src: url('//at.alicdn.com/t/font_2092412_vdxq6u8c7um.eot');
+ src: url('//at.alicdn.com/t/font_2092412_vdxq6u8c7um.eot?#iefix') format('embedded-opentype'),
+ url('//at.alicdn.com/t/font_2092412_vdxq6u8c7um.woff2') format('woff2'),
+ url('//at.alicdn.com/t/font_2092412_vdxq6u8c7um.woff') format('woff'),
+ url('//at.alicdn.com/t/font_2092412_vdxq6u8c7um.ttf') format('truetype'),
+ url('//at.alicdn.com/t/font_2092412_vdxq6u8c7um.svg#iconfont') format('svg');
+}
+
+.iconfont {
+ font-family: 'iconfont' !important;
+ font-size: 16px;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -webkit-text-stroke-width: 0.2px;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+/** 使用姿势 3 */
diff --git a/src/styles/index.less b/src/styles/index.less
new file mode 100644
index 0000000..3020fe3
--- /dev/null
+++ b/src/styles/index.less
@@ -0,0 +1,4 @@
+@import './normalize.css';
+@import './var.less';
+@import './iconfont.less';
+@import './common.less';
\ No newline at end of file
diff --git a/src/styles/normalize.css b/src/styles/normalize.css
new file mode 100644
index 0000000..2768db4
--- /dev/null
+++ b/src/styles/normalize.css
@@ -0,0 +1,351 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+ ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+ line-height: 1.15; /* 1 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+ ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+ margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+ display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+ box-sizing: content-box; /* 1 */
+ height: 0; /* 1 */
+ overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+ background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+ border-bottom: none; /* 1 */
+ text-decoration: underline; /* 2 */
+ text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+ border-style: none;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit; /* 1 */
+ font-size: 100%; /* 1 */
+ line-height: 1.15; /* 1 */
+ margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input {
+ /* 1 */
+ overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select {
+ /* 1 */
+ text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+ -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+ padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ */
+
+legend {
+ box-sizing: border-box; /* 1 */
+ color: inherit; /* 2 */
+ display: table; /* 1 */
+ max-width: 100%; /* 1 */
+ padding: 0; /* 3 */
+ white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+ vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+ overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type='checkbox'],
+[type='radio'] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type='search'] {
+ -webkit-appearance: textfield; /* 1 */
+ outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type='search']::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
+}
+
+/* Interactive
+ ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+ display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+ display: list-item;
+}
+
+/* Misc
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+ display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+ display: none;
+}
diff --git a/src/styles/test.less b/src/styles/test.less
deleted file mode 100644
index 0056da2..0000000
--- a/src/styles/test.less
+++ /dev/null
@@ -1,21 +0,0 @@
-#nav {
- padding: 30px;
-
- a {
- font-weight: bold;
- color : #2c3e50;
-
- &.router-link-exact-active {
- color: #42b983;
- }
- }
-}
-
-.hello {
- color : red;
- font-size: 20px;
-
- &-test {
- color: #ff0000;
- }
-}
\ No newline at end of file
diff --git a/src/styles/var.less b/src/styles/var.less
new file mode 100644
index 0000000..dfeaff5
--- /dev/null
+++ b/src/styles/var.less
@@ -0,0 +1,21 @@
+@primary-color: #00a971; // 全局主色
+@primary: #00a971;
+@link-color: #00a971; // 链接色
+@success-color: #52c41a; // 成功色
+@warning-color: #faad14; // 警告色
+@error-color: #f5222d; // 错误色
+@font-size-base: 14px; // 主字号
+@heading-color: rgba(0, 0, 0, 0.85); // 标题色
+@text-color: rgba(0, 0, 0, 0.65); // 主文本色
+@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
+@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
+@border-radius-base: 0px; // 组件/浮层圆角
+@border-color-base: #d9d9d9; // 边框色
+@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); //
+@min-width: 1200px; // 内容区域宽度
+@banner-title: 40px; // banner 标题文字大小
+@banner-button: 24px; // banner 按钮文字大小
+@banner-text: 16px; // banner 内容文字大小
+@m-top-1: 120px;
+@m-top-2: 80px;
+@m-top-3: 40px;