├── .browserslistrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .prettierignore ├── .prettierrc ├── .travis.yml ├── .vscode └── settings.json ├── LICENSE ├── README.md ├── babel.config.js ├── package.json ├── postcss.config.js ├── public └── index.html ├── src ├── App.tsx ├── main.ts ├── router.ts └── store.ts ├── tsconfig.json ├── types └── vue-emotion.d.ts ├── vue.config.js └── yarn.lock /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | # Use 4 spaces for the Python files 13 | [*.py] 14 | indent_size = 4 15 | max_line_length = 80 16 | 17 | # The JSON files contain newlines inconsistently 18 | [*.json] 19 | insert_final_newline = ignore 20 | 21 | # Minified JavaScript files shouldn't be changed 22 | [**.min.js] 23 | indent_style = ignore 24 | insert_final_newline = ignore 25 | 26 | # Makefiles always use tabs for indentation 27 | [Makefile] 28 | indent_style = tab 29 | 30 | # Batch files use tabs for indentation 31 | [*.bat] 32 | indent_style = tab 33 | 34 | [*.md] 35 | trim_trailing_whitespace = false 36 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /public 2 | /dist 3 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: ['plugin:vue/essential', '@vue/airbnb', '@vue/typescript'], 7 | rules: { 8 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 9 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 10 | 'no-plusplus': ['error', { allowForLoopAfterthoughts: true }], 11 | 'function-paren-newline': ['off'], 12 | 'class-methods-use-this': [ 13 | 'error', 14 | { 15 | exceptMethods: [ 16 | 'render', 17 | 'beforeCreate', 18 | 'created', 19 | 'beforeMount', 20 | 'mounted', 21 | 'beforeUpdate', 22 | 'updated', 23 | 'activated', 24 | 'deactivated', 25 | 'beforeDestroy', 26 | 'destroyed', 27 | 'errorCaptured', 28 | ], 29 | }, 30 | ], 31 | 'max-len': [ 32 | 'error', 33 | { 34 | code: 80, 35 | ignoreUrls: true, 36 | ignoreStrings: true, 37 | ignoreComments: true, 38 | ignoreTrailingComments: true, 39 | ignoreTemplateLiterals: true, 40 | }, 41 | ], 42 | }, 43 | parserOptions: { 44 | parser: 'typescript-eslint-parser', 45 | }, 46 | }; 47 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | *.suo 17 | *.ntvs* 18 | *.njsproj 19 | *.sln 20 | *.sw* 21 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /dist 3 | package.json 4 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "all", 4 | "arrowParens": "always" 5 | } 6 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 9 4 | 5 | install: 6 | - yarn 7 | 8 | script: 9 | - yarn lint 10 | - yarn lint:prettier 11 | 12 | cache: 13 | yarn: true 14 | directories: 15 | - node_modules 16 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "prettier.eslintIntegration": true, 4 | "tslint.enable": true, 5 | "tslint.autoFixOnSave": true, 6 | "eslint.autoFixOnSave": true, 7 | "eslint.enable": true, 8 | "eslint.validate": [ 9 | "javascript", 10 | "javascriptreact", 11 | "typescript", 12 | "typescriptreact" 13 | ], 14 | "emmet.excludeLanguages": ["typescriptreact"] 15 | } 16 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) u3u (https://qwq.cat) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Lyric 2 | 3 | ## Project setup 4 | 5 | ``` 6 | yarn install 7 | ``` 8 | 9 | ### Compiles and hot-reloads for development 10 | 11 | ``` 12 | yarn serve 13 | ``` 14 | 15 | ### Compiles and minifies for production 16 | 17 | ``` 18 | yarn build 19 | ``` 20 | 21 | ### Lints and fixes files 22 | 23 | ``` 24 | yarn lint 25 | ``` 26 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/app'], 3 | plugins: [ 4 | 'jsx-v-model', 5 | [ 6 | 'component', 7 | { 8 | libraryName: 'element-ui', 9 | styleLibraryName: 'theme-chalk', 10 | }, 11 | ], 12 | ], 13 | env: { 14 | production: { 15 | plugins: [['emotion', { hoist: true }]], 16 | }, 17 | development: { 18 | plugins: [['emotion', { sourceMap: true, autoLabel: true }]], 19 | }, 20 | }, 21 | }; 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lyric", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint", 9 | "lint:prettier": "prettier-eslint-check \"**/*.{js,jsx,json,ts,tsx,vue,md}\"", 10 | "format": "prettier-eslint \"**/*.{js,jsx,json,ts,tsx,vue,md}\" --write" 11 | }, 12 | "dependencies": { 13 | "element-ui": "^2.4.6", 14 | "vue": "^2.5.17", 15 | "vue-class-component": "^6.0.0", 16 | "vue-emotion": "^0.4.2", 17 | "vue-property-decorator": "^7.0.0", 18 | "vue-router": "^3.0.1", 19 | "vuex": "^3.0.1" 20 | }, 21 | "devDependencies": { 22 | "@vue/cli-plugin-babel": "^3.0.1", 23 | "@vue/cli-plugin-eslint": "^3.0.1", 24 | "@vue/cli-plugin-typescript": "^3.0.1", 25 | "@vue/cli-service": "^3.0.1", 26 | "@vue/eslint-config-airbnb": "^3.0.1", 27 | "@vue/eslint-config-typescript": "^3.0.1", 28 | "babel-plugin-component": "git://github.com/u3u/babel-plugin-component.git", 29 | "babel-plugin-emotion": "^9.2.8", 30 | "babel-plugin-jsx-v-model": "^2.0.3", 31 | "emotion": "^9.2.8", 32 | "lint-staged": "^7.2.2", 33 | "prettier": "^1.14.2", 34 | "prettier-eslint-check": "^1.0.1", 35 | "prettier-eslint-cli": "^4.7.1", 36 | "typescript": "^3.0.0", 37 | "vue-jsx-hot-loader": "^1.4.0", 38 | "vue-template-compiler": "^2.5.17", 39 | "vue-tsx-support": "^2.1.1" 40 | }, 41 | "gitHooks": { 42 | "pre-commit": "lint-staged" 43 | }, 44 | "lint-staged": { 45 | "*.{js,jsx,ts,tsx,vue}": "vue-cli-service lint --no-fix", 46 | "*.{js,jsx,json,ts,tsx,vue,md}": "prettier-eslint-check" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {}, 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | LRC歌词制作工具 11 | 12 | 13 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Component from 'vue-class-component'; 3 | 4 | @Component 5 | export default class App extends Vue { 6 | render() { 7 | return null; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App'; 3 | import router from './router'; 4 | import store from './store'; 5 | 6 | Vue.config.productionTip = false; 7 | 8 | new Vue({ 9 | router, 10 | store, 11 | render: h => h(App), 12 | }).$mount('#app'); 13 | -------------------------------------------------------------------------------- /src/router.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Router from 'vue-router'; 3 | 4 | Vue.use(Router); 5 | 6 | export default new Router({ 7 | mode: 'history', 8 | base: process.env.BASE_URL, 9 | routes: [], 10 | }); 11 | -------------------------------------------------------------------------------- /src/store.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | 4 | Vue.use(Vuex); 5 | 6 | export default new Vuex.Store({ 7 | state: {}, 8 | mutations: {}, 9 | actions: {}, 10 | }); 11 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "strict": true, 6 | "jsx": "preserve", 7 | "importHelpers": true, 8 | "moduleResolution": "node", 9 | "experimentalDecorators": true, 10 | "esModuleInterop": true, 11 | "allowSyntheticDefaultImports": true, 12 | "sourceMap": true, 13 | "baseUrl": ".", 14 | "types": ["node"], 15 | "paths": { 16 | "@/*": ["src/*"] 17 | }, 18 | "lib": ["esnext", "dom", "dom.iterable", "scripthost"] 19 | }, 20 | "include": [ 21 | "src/**/*.ts", 22 | "src/**/*.tsx", 23 | "src/**/*.vue", 24 | "tests/**/*.ts", 25 | "tests/**/*.tsx", 26 | "types/**/*.ts", 27 | "node_modules/vue-tsx-support/enable-check.d.ts", 28 | "node_modules/vue-tsx-support/options/enable-vue-router.d.ts" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /types/vue-emotion.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | declare module 'vue-emotion' { 3 | import Vue from 'vue'; 4 | import { TsxComponent } from 'vue-tsx-support'; 5 | import { Interpolation as EmotionInterpolation } from 'emotion'; 6 | 7 | export * from 'emotion'; 8 | 9 | export type InterpolationFn = ( 10 | props: Props, 11 | ) => EmotionInterpolation | InterpolationFn; 12 | 13 | export type InterpolationTypes = 14 | | InterpolationFn 15 | | EmotionInterpolation; 16 | 17 | export type Interpolation = 18 | | InterpolationTypes 19 | | Array>; 20 | 21 | export interface Options { 22 | string?: string; 23 | } 24 | 25 | export type ThemedProps = Props & { 26 | theme: Theme; 27 | }; 28 | 29 | type ElementProps< 30 | Tag extends keyof JSX.IntrinsicElements 31 | > = JSX.IntrinsicElements[Tag]; 32 | 33 | export interface StyledComponent 34 | extends TsxComponent { 35 | withComponent( 36 | tag: Tag, 37 | ): StyledComponent>; 38 | 39 | withComponent(component: any): StyledComponent; 40 | 41 | displayName: string; 42 | __emotion_styles: string[]; 43 | __emotion_base: string | {}; 44 | __emotion_real: ThemedVueEmotionInterface; 45 | } 46 | 47 | export type ObjectStyleAttributes = 48 | | object 49 | | object[] 50 | | { [key: string]: ObjectStyleAttributes }; 51 | 52 | export interface CreateStyled { 53 | // overload for template string as styles 54 | ( 55 | strings: TemplateStringsArray, 56 | ...vars: Array>> 57 | ): StyledComponent; 58 | 59 | // overload for object as styles 60 | ( 61 | ...styles: Array< 62 | | ObjectStyleAttributes 63 | | (( 64 | props: ThemedProps, 65 | ) => ObjectStyleAttributes) 66 | > 67 | ): StyledComponent; 68 | } 69 | 70 | type ShorthandsFactories = { 71 | [Tag in keyof JSX.IntrinsicElements]: { 72 | // overload for template string as styles 73 | ( 74 | strings: TemplateStringsArray, 75 | ...vars: Array< 76 | Interpolation> 77 | > 78 | ): StyledComponent>; 79 | 80 | // overload for object as styles 81 | ( 82 | ...styles: Array< 83 | | ObjectStyleAttributes 84 | | (( 85 | props: ThemedProps, 86 | ) => ObjectStyleAttributes) 87 | > 88 | ): StyledComponent>; 89 | } 90 | }; 91 | 92 | export interface ThemedVueEmotionInterface 93 | extends ShorthandsFactories { 94 | // overload for dom tag 95 | ( 96 | tag: Tag, 97 | options?: Options, 98 | ): // tslint:disable-next-line:no-unnecessary-generics 99 | CreateStyled>; 100 | 101 | // overload for component 102 | ( 103 | component: any, 104 | options?: Options, 105 | ): // tslint:disable-next-line:no-unnecessary-generics 106 | CreateStyled; 107 | } 108 | 109 | export interface ThemedVueEmotionModule { 110 | default: ThemedVueEmotionInterface; 111 | } 112 | 113 | const styled: ThemedVueEmotionInterface; 114 | export default styled; 115 | } 116 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | chainWebpack: (config) => { 3 | if (process.env.NODE_ENV !== 'production') { 4 | config.module 5 | .rule('tsx') 6 | .test(/\.tsx$/) 7 | .use('vue-jsx-hot-loader') 8 | .before('babel-loader') 9 | .loader('vue-jsx-hot-loader'); 10 | } 11 | }, 12 | }; 13 | --------------------------------------------------------------------------------