├── .github
└── workflows
│ └── ci.yml
├── .gitignore
├── LICENSE
├── bin
└── index.js
├── build
├── index.js
├── inject
│ ├── index.js
│ ├── injectData.js
│ ├── injectJs.js
│ ├── injectStyles.js
│ └── injectTemplates.js
└── utils
│ ├── index.js
│ └── paths.js
├── package-lock.json
├── package.json
├── picpic.config.json
├── readme.md
├── readme_cn.md
├── src
├── components
│ ├── Detail
│ │ ├── index.css
│ │ ├── index.html
│ │ ├── index.js
│ │ └── index.less
│ ├── Empty
│ │ ├── index.css
│ │ ├── index.html
│ │ ├── index.js
│ │ └── index.less
│ ├── FolderSelect
│ │ ├── index.css
│ │ ├── index.html
│ │ ├── index.js
│ │ └── index.less
│ ├── Header
│ │ ├── index.css
│ │ ├── index.html
│ │ ├── index.js
│ │ └── index.less
│ ├── ImgItems
│ │ ├── index.css
│ │ ├── index.html
│ │ ├── index.js
│ │ └── index.less
│ ├── Msg
│ │ ├── index.css
│ │ ├── index.html
│ │ ├── index.js
│ │ └── index.less
│ └── Pagination
│ │ ├── index.css
│ │ ├── index.html
│ │ ├── index.js
│ │ └── index.less
├── favicon.ico
├── images
│ ├── logo_picpic_black.png
│ ├── logo_picpic_white.png
│ └── matrixage.png
├── index.js
├── libs
│ ├── css
│ │ ├── atom.min.css
│ │ └── atom.min.less
│ └── js
│ │ ├── clipboard.js
│ │ ├── include.js
│ │ ├── lodash.chunk.js
│ │ ├── lodash.throttle.js
│ │ └── vue.min.js
├── source.html
└── styles
│ ├── index.css
│ ├── index.less
│ ├── init.css
│ ├── init.less
│ ├── mobile.css
│ └── mobile.less
└── yarn.lock
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: Deploy gh-pages
2 | on:
3 | push:
4 | branches:
5 | - master
6 | jobs:
7 | build-and-deploy:
8 | runs-on: ubuntu-20.04
9 | steps:
10 | - name: Checkout
11 | uses: actions/checkout@master
12 |
13 | - name: Get npm cache
14 | id: cache
15 | uses: actions/cache@v2
16 | with:
17 | path: node_modules
18 | key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
19 | restore-keys: |
20 | ${{ runner.os }}-node-
21 |
22 | - name: Install
23 | if: steps.cache.outputs.cache-hit != 'true'
24 | run: npm install
25 |
26 | - name: Build
27 | run: npm run build
28 |
29 | - name: Deploy
30 | uses: peaceiris/actions-gh-pages@v3
31 | with:
32 | github_token: ${{ secrets.GITHUB_TOKEN }}
33 | publish_dir: ./dist
34 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # dependencies
2 | /node_modules
3 | /.pnp
4 | .pnp.js
5 |
6 | #dev
7 | next-env.d.ts
8 |
9 | # testing
10 | /coverage
11 |
12 | # production
13 | /dist
14 | /assets
15 |
16 | # misc
17 | .DS_Store
18 | .env*
19 |
20 | # debug
21 | *-debug.log*
22 | *-error.log*
23 | *.zip
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 Dark
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 |
--------------------------------------------------------------------------------
/bin/index.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | const fs = require('fs-extra')
4 | const path = require('path')
5 | const child_process = require('child_process')
6 | const pkg = require(`${process.cwd()}/package.json`)
7 |
8 | const main = () => {
9 | const args = process.argv[2]
10 | const root = process.cwd()
11 | const getPath = p => path.join(__dirname, p)
12 |
13 | switch (args) {
14 | case 'init':
15 | pkg['scripts']['build'] = 'picpic build'
16 |
17 | fs.writeFileSync('./package.json', JSON.stringify(pkg, null, 2).concat('\n'))
18 | if (!fs.existsSync(`${root}/assets`)) fs.mkdirSync(`${root}/assets`)
19 | if (!fs.existsSync(`${root}/.github`)) fs.mkdirSync(`${root}/.github`)
20 | if (!fs.existsSync(`${root}/.gitignore`)) fs.writeFileSync(`${root}/.gitignore`,`/dist \n/node_modules \n.DS_Store`)
21 | fs.copySync(getPath('../.github'), `${root}/.github`)
22 | fs.copySync(getPath('../picpic.config.json'), `${root}/picpic.config.json`)
23 |
24 | console.log('---------- picpic init success! ---------- \n')
25 | break
26 | case 'build':
27 | child_process.execSync(`node ${getPath('../build/index.js')}`)
28 | break
29 | default:
30 | break
31 | }
32 | }
33 |
34 | try {
35 | main()
36 |
37 | process.exit(0)
38 | } catch (e) {
39 | console.error(e)
40 |
41 | process.exit(1)
42 | }
43 |
--------------------------------------------------------------------------------
/build/index.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs-extra')
2 | const globby = require('globby')
3 | const imagemin = require('imagemin')
4 | const imageminMozjpeg = require('imagemin-mozjpeg')
5 | const imageminPngquant = require('imagemin-pngquant')
6 | const imageminGifsicle = require('imagemin-gifsicle')
7 | const imageminWebp = require('imagemin-webp')
8 | const inject = require('./inject')
9 | const paths = require('./utils/paths')
10 | const { config } = require('./utils/index')
11 |
12 | const { compress } = config
13 |
14 | const compressImages = async () => {
15 | let files
16 |
17 | if (compress.webp) {
18 | files = await imagemin([`${paths.assets}/**/*.{jpg,png,gif,webp}`], {
19 | plugins: [
20 | imageminGifsicle({ optimizationLevel: compress.quality * 3 }),
21 | imageminWebp({ quality: compress.quality * 100 })
22 | ]
23 | })
24 | } else {
25 | files = await imagemin([`${paths.assets}/**/*.{jpg,png,gif}`], {
26 | plugins: [
27 | imageminMozjpeg({ quality: compress.quality * 100 }),
28 | imageminPngquant({ quality: [compress.quality, compress.quality] }),
29 | imageminGifsicle({ optimizationLevel: compress.quality * 3 })
30 | ]
31 | })
32 | }
33 |
34 | files.map((item) => {
35 | fs.writeFileSync(item.sourcePath.replace('assets', 'dist'), item.data)
36 | })
37 | }
38 |
39 | const main = async () => {
40 | if (!fs.existsSync(paths.dist)) {
41 | fs.mkdirSync(paths.dist)
42 | } else {
43 | fs.removeSync(paths.dist)
44 | fs.mkdirSync(paths.dist)
45 | }
46 |
47 | fs.copySync(paths.assets, paths.dist)
48 |
49 | if (compress && compress.quality) compressImages()
50 |
51 | fs.writeFileSync(`${paths.dist}/index.html`, await inject())
52 | fs.copySync(paths.getPath('../../src'), paths.dist)
53 | fs.removeSync(`${paths.dist}/source.html`)
54 |
55 | const less = await globby(`${paths.dist}/**/*.less`)
56 |
57 | less.map((item) => fs.removeSync(item))
58 |
59 | console.log('---------- picpic build success! ---------- \n')
60 | }
61 |
62 | try {
63 | main()
64 | } catch (error) {
65 | console.log('---------- picpic build error! ---------- \n')
66 | console.error(error)
67 | }
68 |
--------------------------------------------------------------------------------
/build/inject/index.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs-extra')
2 | const injectData = require('./injectData')
3 | const injectStyles = require('./injectStyles')
4 | const injectTemplates = require('./injectTemplates')
5 | const injectJs = require('./injectJs')
6 | const paths = require('../utils/paths')
7 |
8 | function Inject (){
9 | this.html = ''
10 |
11 | this.getSource = () => {
12 | this.html = fs.readFileSync(paths.getPath('../../src/source.html')).toString()
13 |
14 | return new Promise(resolve => resolve(this.html))
15 | }
16 |
17 | this.injectData = async () => {
18 | this.html = await injectData(this.html)
19 |
20 | return new Promise(resolve => resolve(this.html))
21 | }
22 |
23 | this.injectStyles = async () => {
24 | this.html = await injectStyles(this.html)
25 |
26 | return new Promise(resolve => resolve(this.html))
27 | }
28 |
29 | this.injectTemplates = async () => {
30 | this.html = await injectTemplates(this.html)
31 |
32 | return new Promise(resolve => resolve(this.html))
33 | }
34 | }
35 |
36 | const inject = async () => {
37 | return await new Inject()
38 | .getSource()
39 | .then(res => injectData(res))
40 | .then(res => injectStyles(res))
41 | .then(res => injectTemplates(res))
42 | .then(res => injectJs(res))
43 | }
44 |
45 | module.exports = inject
46 |
--------------------------------------------------------------------------------
/build/inject/injectData.js:
--------------------------------------------------------------------------------
1 | const { getFileTree } = require('../utils')
2 |
3 | module.exports = async str => {
4 | const tree = await getFileTree()
5 |
6 | return str.replace(
7 | `
8 |
9 | PicPic
10 |
11 | `,
12 | `
13 |
14 | PicPic
15 |
18 |
19 | `
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/build/inject/injectJs.js:
--------------------------------------------------------------------------------
1 | const globby = require('globby')
2 | const paths = require('../utils/paths')
3 |
4 | module.exports = async str => {
5 | const paths_source = await globby([ `${paths.getPath('../../src/components/**/*.js')}`])
6 | const paths_target = []
7 |
8 | paths_source.map(item =>
9 | paths_target.push(item.replace('src', '.').split('/').slice(-4).join('/'))
10 | )
11 |
12 | const items = paths_target.map(item => '' + '\n')
13 |
14 | return str.replace(
15 | `
16 |
17 | `,
18 | `
19 | ${items.reduce((total, item) => (total += item), '')}
20 | `
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/build/inject/injectStyles.js:
--------------------------------------------------------------------------------
1 | const globby = require('globby')
2 | const paths = require('../utils/paths')
3 |
4 | module.exports = async str => {
5 | const paths_source = await globby([ `${paths.getPath('../../src/components/**/*.css')}` ])
6 | const paths_target = []
7 |
8 | paths_source.map(item =>
9 | paths_target.push(item.replace('src', '.').split('/').slice(-4).join('/'))
10 | )
11 |
12 | const items = paths_target.map(item => '@import ' + "'" + item + "'" + ';' + '\n')
13 |
14 | return str.replace(
15 | `
16 |
17 | `,
18 | `
19 |
22 | `
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/build/inject/injectTemplates.js:
--------------------------------------------------------------------------------
1 | const globby = require('globby')
2 | const paths = require('../utils/paths')
3 |
4 | module.exports = async str => {
5 | const paths_source = await globby([ `${paths.getPath('../../src/components/**/*.html')}` ])
6 | const paths_target = []
7 |
8 | paths_source.map(item =>
9 | paths_target.push(item.replace('src', '.').split('/').slice(-4).join('/'))
10 | )
11 |
12 | const items = paths_target.map(item => '' + '\n')
13 |
14 | return str.replace(
15 | `
16 |
17 | `,
18 | `
19 | ${items.reduce((total, item) => (total += item), '')}
20 | `
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/build/utils/index.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs-extra')
2 | const path = require('path')
3 | const dree = require('dree')
4 | const getImageinfo = require('imageinfo')
5 | const config_preset = require('../../picpic.config.json')
6 | const config_user = require(`${process.cwd()}/picpic.config.json`)
7 |
8 | const config = Object.assign(config_preset, config_user)
9 | const { types, depth } = config
10 |
11 | async function getFileTree() {
12 | const path_target = path.resolve(process.cwd(), 'assets')
13 | const tree = await dree.scanAsync(path_target, {
14 | extensions: types,
15 | depth,
16 | symbolicLinks: false,
17 | sizeInBytes: false,
18 | hash: false,
19 | exclude: /.DS_Store/
20 | })
21 |
22 | const getImgDetail = (path, item) => {
23 | const data = fs.readFileSync(path)
24 | const { width, height } = getImageinfo(data)
25 |
26 | item.dimension = `${width}x${height}`
27 | }
28 |
29 | const removeUseless = (item) => {
30 | delete item.path
31 | delete item.stat
32 | delete item.sizeInBytes
33 | delete item.relativePath
34 | delete item.isSymbolicLink
35 |
36 | item.size = item.size.replace(/\s*/g, '')
37 | }
38 |
39 | const handleObject = (items) => {
40 | removeUseless(items)
41 |
42 | if (items.children) {
43 | items.children.map((item) => {
44 | let path
45 |
46 | if (item.type !== 'directory') {
47 | const array_path_source = item.relativePath.split('/')
48 | const start_index = array_path_source.findIndex((i) => i === 'assets')
49 | const array_path_target = array_path_source.slice(start_index - 2)
50 |
51 | path = `${array_path_target.join('/')}`
52 |
53 | getImgDetail(`assets/${array_path_target.join('/')}`, item)
54 | }
55 | removeUseless(item)
56 |
57 | handleObject(item)
58 |
59 | item.path = path
60 | })
61 | }
62 | }
63 |
64 | handleObject(tree)
65 |
66 | return tree
67 | }
68 |
69 | module.exports = {
70 | getFileTree: getFileTree,
71 | config: config
72 | }
73 |
--------------------------------------------------------------------------------
/build/utils/paths.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const root = process.cwd()
3 |
4 | module.exports = {
5 | root: root,
6 | dist: `${root}/dist`,
7 | compress: `${root}/compress`,
8 | assets: `${root}/assets`,
9 | getPath: p => path.join(__dirname, p)
10 | }
11 |
--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@matrixage/picpic",
3 | "version": "1.4.7",
4 | "lockfileVersion": 1,
5 | "requires": true,
6 | "dependencies": {
7 | "@matrixage/atom.css": {
8 | "version": "2.0.1",
9 | "resolved": "https://registry.npmjs.org/@matrixage/atom.css/-/atom.css-2.0.1.tgz",
10 | "integrity": "sha512-H4PANARfOu9nlmEbKhxgBirvhQQjKK0A9q3HWQ60z6tSrdoSjE+KMC50wWnX39YQlXYn1G3KvGR9JjgwpwaF1g=="
11 | },
12 | "@nodelib/fs.scandir": {
13 | "version": "2.1.3",
14 | "resolved": "https://registry.npm.taobao.org/@nodelib/fs.scandir/download/@nodelib/fs.scandir-2.1.3.tgz",
15 | "integrity": "sha1-Olgr21OATGum0UZXnEblITDPSjs=",
16 | "requires": {
17 | "@nodelib/fs.stat": "2.0.3",
18 | "run-parallel": "^1.1.9"
19 | }
20 | },
21 | "@nodelib/fs.stat": {
22 | "version": "2.0.3",
23 | "resolved": "https://registry.npm.taobao.org/@nodelib/fs.stat/download/@nodelib/fs.stat-2.0.3.tgz",
24 | "integrity": "sha1-NNxfTKu8cg9OYPdadH5+zWwXW9M="
25 | },
26 | "@nodelib/fs.walk": {
27 | "version": "1.2.4",
28 | "resolved": "https://registry.npm.taobao.org/@nodelib/fs.walk/download/@nodelib/fs.walk-1.2.4.tgz",
29 | "integrity": "sha1-ARuSAqcKY2bkNspcBlhEUoqwSXY=",
30 | "requires": {
31 | "@nodelib/fs.scandir": "2.1.3",
32 | "fastq": "^1.6.0"
33 | }
34 | },
35 | "ansi-regex": {
36 | "version": "5.0.0",
37 | "resolved": "https://registry.npm.taobao.org/ansi-regex/download/ansi-regex-5.0.0.tgz",
38 | "integrity": "sha1-OIU59VF5vzkznIGvMKZU1p+Hy3U="
39 | },
40 | "ansi-styles": {
41 | "version": "4.3.0",
42 | "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1606792371412&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
43 | "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
44 | "requires": {
45 | "color-convert": "^2.0.1"
46 | }
47 | },
48 | "array-union": {
49 | "version": "2.1.0",
50 | "resolved": "https://registry.npm.taobao.org/array-union/download/array-union-2.1.0.tgz",
51 | "integrity": "sha1-t5hCCtvrHego2ErNii4j0+/oXo0="
52 | },
53 | "at-least-node": {
54 | "version": "1.0.0",
55 | "resolved": "https://registry.npm.taobao.org/at-least-node/download/at-least-node-1.0.0.tgz",
56 | "integrity": "sha1-YCzUtG6EStTv/JKoARo8RuAjjcI="
57 | },
58 | "braces": {
59 | "version": "3.0.2",
60 | "resolved": "https://registry.npm.taobao.org/braces/download/braces-3.0.2.tgz",
61 | "integrity": "sha1-NFThpGLujVmeI23zNs2epPiv4Qc=",
62 | "requires": {
63 | "fill-range": "^7.0.1"
64 | }
65 | },
66 | "cliui": {
67 | "version": "7.0.4",
68 | "resolved": "https://registry.npm.taobao.org/cliui/download/cliui-7.0.4.tgz?cache=0&sync_timestamp=1604880249159&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcliui%2Fdownload%2Fcliui-7.0.4.tgz",
69 | "integrity": "sha1-oCZe5lVHb8gHrqnfPfjfd4OAi08=",
70 | "requires": {
71 | "string-width": "^4.2.0",
72 | "strip-ansi": "^6.0.0",
73 | "wrap-ansi": "^7.0.0"
74 | }
75 | },
76 | "color-convert": {
77 | "version": "2.0.1",
78 | "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
79 | "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
80 | "requires": {
81 | "color-name": "~1.1.4"
82 | }
83 | },
84 | "color-name": {
85 | "version": "1.1.4",
86 | "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
87 | "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI="
88 | },
89 | "dir-glob": {
90 | "version": "3.0.1",
91 | "resolved": "https://registry.npm.taobao.org/dir-glob/download/dir-glob-3.0.1.tgz",
92 | "integrity": "sha1-Vtv3PZkqSpO6FYT0U0Bj/S5BcX8=",
93 | "requires": {
94 | "path-type": "^4.0.0"
95 | }
96 | },
97 | "dree": {
98 | "version": "2.5.0",
99 | "resolved": "https://registry.npm.taobao.org/dree/download/dree-2.5.0.tgz",
100 | "integrity": "sha1-UkFnO1OnWOxCEngwqFdPKhdFBVU=",
101 | "requires": {
102 | "yargs": "^16.1.0"
103 | }
104 | },
105 | "emoji-regex": {
106 | "version": "8.0.0",
107 | "resolved": "https://registry.npm.taobao.org/emoji-regex/download/emoji-regex-8.0.0.tgz",
108 | "integrity": "sha1-6Bj9ac5cz8tARZT4QpY79TFkzDc="
109 | },
110 | "escalade": {
111 | "version": "3.1.1",
112 | "resolved": "https://registry.npm.taobao.org/escalade/download/escalade-3.1.1.tgz?cache=0&sync_timestamp=1602567343144&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fescalade%2Fdownload%2Fescalade-3.1.1.tgz",
113 | "integrity": "sha1-2M/ccACWXFoBdLSoLqpcBVJ0LkA="
114 | },
115 | "fast-glob": {
116 | "version": "3.2.4",
117 | "resolved": "https://registry.npm.taobao.org/fast-glob/download/fast-glob-3.2.4.tgz",
118 | "integrity": "sha1-0grvv5lXk4Pn88xmUpFYybmFVNM=",
119 | "requires": {
120 | "@nodelib/fs.stat": "^2.0.2",
121 | "@nodelib/fs.walk": "^1.2.3",
122 | "glob-parent": "^5.1.0",
123 | "merge2": "^1.3.0",
124 | "micromatch": "^4.0.2",
125 | "picomatch": "^2.2.1"
126 | }
127 | },
128 | "fastq": {
129 | "version": "1.9.0",
130 | "resolved": "https://registry.npm.taobao.org/fastq/download/fastq-1.9.0.tgz?cache=0&sync_timestamp=1603877264633&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffastq%2Fdownload%2Ffastq-1.9.0.tgz",
131 | "integrity": "sha1-4Wpy8zjqykjpG1wjWTvMLvZreUc=",
132 | "requires": {
133 | "reusify": "^1.0.4"
134 | }
135 | },
136 | "fill-range": {
137 | "version": "7.0.1",
138 | "resolved": "https://registry.npm.taobao.org/fill-range/download/fill-range-7.0.1.tgz",
139 | "integrity": "sha1-GRmmp8df44ssfHflGYU12prN2kA=",
140 | "requires": {
141 | "to-regex-range": "^5.0.1"
142 | }
143 | },
144 | "fs-extra": {
145 | "version": "9.0.1",
146 | "resolved": "https://registry.npm.taobao.org/fs-extra/download/fs-extra-9.0.1.tgz",
147 | "integrity": "sha1-kQ2gBiQ3ukw5/t2GPxZ1zP78ufw=",
148 | "requires": {
149 | "at-least-node": "^1.0.0",
150 | "graceful-fs": "^4.2.0",
151 | "jsonfile": "^6.0.1",
152 | "universalify": "^1.0.0"
153 | }
154 | },
155 | "get-caller-file": {
156 | "version": "2.0.5",
157 | "resolved": "https://registry.npm.taobao.org/get-caller-file/download/get-caller-file-2.0.5.tgz",
158 | "integrity": "sha1-T5RBKoLbMvNuOwuXQfipf+sDH34="
159 | },
160 | "glob-parent": {
161 | "version": "5.1.1",
162 | "resolved": "https://registry.npm.taobao.org/glob-parent/download/glob-parent-5.1.1.tgz",
163 | "integrity": "sha1-tsHvQXxOVmPqSY8cRa+saRa7wik=",
164 | "requires": {
165 | "is-glob": "^4.0.1"
166 | }
167 | },
168 | "globby": {
169 | "version": "11.0.1",
170 | "resolved": "https://registry.npm.taobao.org/globby/download/globby-11.0.1.tgz",
171 | "integrity": "sha1-mivxB6Bo8//qvEmtcCx57ejP01c=",
172 | "requires": {
173 | "array-union": "^2.1.0",
174 | "dir-glob": "^3.0.1",
175 | "fast-glob": "^3.1.1",
176 | "ignore": "^5.1.4",
177 | "merge2": "^1.3.0",
178 | "slash": "^3.0.0"
179 | }
180 | },
181 | "graceful-fs": {
182 | "version": "4.2.4",
183 | "resolved": "https://registry.npm.taobao.org/graceful-fs/download/graceful-fs-4.2.4.tgz",
184 | "integrity": "sha1-Ila94U02MpWMRl68ltxGfKB6Kfs="
185 | },
186 | "ignore": {
187 | "version": "5.1.8",
188 | "resolved": "https://registry.npm.taobao.org/ignore/download/ignore-5.1.8.tgz",
189 | "integrity": "sha1-8VCotQo0KJsz4i9YiavU2AFvDlc="
190 | },
191 | "imageinfo": {
192 | "version": "1.0.4",
193 | "resolved": "https://registry.npm.taobao.org/imageinfo/download/imageinfo-1.0.4.tgz",
194 | "integrity": "sha1-HdJFbsuW/DlfCqEXnEZ9+z1deio="
195 | },
196 | "is-extglob": {
197 | "version": "2.1.1",
198 | "resolved": "https://registry.npm.taobao.org/is-extglob/download/is-extglob-2.1.1.tgz",
199 | "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
200 | },
201 | "is-fullwidth-code-point": {
202 | "version": "3.0.0",
203 | "resolved": "https://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-3.0.0.tgz",
204 | "integrity": "sha1-8Rb4Bk/pCz94RKOJl8C3UFEmnx0="
205 | },
206 | "is-glob": {
207 | "version": "4.0.1",
208 | "resolved": "https://registry.npm.taobao.org/is-glob/download/is-glob-4.0.1.tgz",
209 | "integrity": "sha1-dWfb6fL14kZ7x3q4PEopSCQHpdw=",
210 | "requires": {
211 | "is-extglob": "^2.1.1"
212 | }
213 | },
214 | "is-number": {
215 | "version": "7.0.0",
216 | "resolved": "https://registry.npm.taobao.org/is-number/download/is-number-7.0.0.tgz",
217 | "integrity": "sha1-dTU0W4lnNNX4DE0GxQlVUnoU8Ss="
218 | },
219 | "jsonfile": {
220 | "version": "6.1.0",
221 | "resolved": "https://registry.npm.taobao.org/jsonfile/download/jsonfile-6.1.0.tgz?cache=0&sync_timestamp=1604161876665&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjsonfile%2Fdownload%2Fjsonfile-6.1.0.tgz",
222 | "integrity": "sha1-vFWyY0eTxnnsZAMJTrE2mKbsCq4=",
223 | "requires": {
224 | "graceful-fs": "^4.1.6",
225 | "universalify": "^2.0.0"
226 | },
227 | "dependencies": {
228 | "universalify": {
229 | "version": "2.0.0",
230 | "resolved": "https://registry.npm.taobao.org/universalify/download/universalify-2.0.0.tgz?cache=0&sync_timestamp=1603180004159&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Funiversalify%2Fdownload%2Funiversalify-2.0.0.tgz",
231 | "integrity": "sha1-daSYTv7cSwiXXFrrc/Uw0C3yVxc="
232 | }
233 | }
234 | },
235 | "merge2": {
236 | "version": "1.4.1",
237 | "resolved": "https://registry.npm.taobao.org/merge2/download/merge2-1.4.1.tgz",
238 | "integrity": "sha1-Q2iJL4hekHRVpv19xVwMnUBJkK4="
239 | },
240 | "micromatch": {
241 | "version": "4.0.2",
242 | "resolved": "https://registry.npm.taobao.org/micromatch/download/micromatch-4.0.2.tgz",
243 | "integrity": "sha1-T8sJmb+fvC/L3SEvbWKbmlbDklk=",
244 | "requires": {
245 | "braces": "^3.0.1",
246 | "picomatch": "^2.0.5"
247 | }
248 | },
249 | "path-type": {
250 | "version": "4.0.0",
251 | "resolved": "https://registry.npm.taobao.org/path-type/download/path-type-4.0.0.tgz",
252 | "integrity": "sha1-hO0BwKe6OAr+CdkKjBgNzZ0DBDs="
253 | },
254 | "picomatch": {
255 | "version": "2.2.2",
256 | "resolved": "https://registry.npm.taobao.org/picomatch/download/picomatch-2.2.2.tgz",
257 | "integrity": "sha1-IfMz6ba46v8CRo9RRupAbTRfTa0="
258 | },
259 | "require-directory": {
260 | "version": "2.1.1",
261 | "resolved": "https://registry.npm.taobao.org/require-directory/download/require-directory-2.1.1.tgz",
262 | "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
263 | },
264 | "reusify": {
265 | "version": "1.0.4",
266 | "resolved": "https://registry.npm.taobao.org/reusify/download/reusify-1.0.4.tgz",
267 | "integrity": "sha1-kNo4Kx4SbvwCFG6QhFqI2xKSXXY="
268 | },
269 | "run-parallel": {
270 | "version": "1.1.10",
271 | "resolved": "https://registry.npm.taobao.org/run-parallel/download/run-parallel-1.1.10.tgz?cache=0&sync_timestamp=1603768296140&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Frun-parallel%2Fdownload%2Frun-parallel-1.1.10.tgz",
272 | "integrity": "sha1-YKUbKug2Y2yBN33xbLEHNRvNE+8="
273 | },
274 | "slash": {
275 | "version": "3.0.0",
276 | "resolved": "https://registry.npm.taobao.org/slash/download/slash-3.0.0.tgz",
277 | "integrity": "sha1-ZTm+hwwWWtvVJAIg2+Nh8bxNRjQ="
278 | },
279 | "string-width": {
280 | "version": "4.2.0",
281 | "resolved": "https://registry.npm.taobao.org/string-width/download/string-width-4.2.0.tgz",
282 | "integrity": "sha1-lSGCxGzHssMT0VluYjmSvRY7crU=",
283 | "requires": {
284 | "emoji-regex": "^8.0.0",
285 | "is-fullwidth-code-point": "^3.0.0",
286 | "strip-ansi": "^6.0.0"
287 | }
288 | },
289 | "strip-ansi": {
290 | "version": "6.0.0",
291 | "resolved": "https://registry.npm.taobao.org/strip-ansi/download/strip-ansi-6.0.0.tgz",
292 | "integrity": "sha1-CxVx3XZpzNTz4G4U7x7tJiJa5TI=",
293 | "requires": {
294 | "ansi-regex": "^5.0.0"
295 | }
296 | },
297 | "to-regex-range": {
298 | "version": "5.0.1",
299 | "resolved": "https://registry.npm.taobao.org/to-regex-range/download/to-regex-range-5.0.1.tgz",
300 | "integrity": "sha1-FkjESq58jZiKMmAY7XL1tN0DkuQ=",
301 | "requires": {
302 | "is-number": "^7.0.0"
303 | }
304 | },
305 | "universalify": {
306 | "version": "1.0.0",
307 | "resolved": "https://registry.npm.taobao.org/universalify/download/universalify-1.0.0.tgz?cache=0&sync_timestamp=1603180004159&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Funiversalify%2Fdownload%2Funiversalify-1.0.0.tgz",
308 | "integrity": "sha1-thodoXPoQ1sv48Z9Kbmt+FlL0W0="
309 | },
310 | "user": {
311 | "version": "0.0.0",
312 | "resolved": "https://r.cnpmjs.org/user/download/user-0.0.0.tgz",
313 | "integrity": "sha1-8n8bI/xRHyqO+kDbVc+6Ejgk4Co="
314 | },
315 | "wrap-ansi": {
316 | "version": "7.0.0",
317 | "resolved": "https://registry.npm.taobao.org/wrap-ansi/download/wrap-ansi-7.0.0.tgz",
318 | "integrity": "sha1-Z+FFz/UQpqaYS98RUpEdadLrnkM=",
319 | "requires": {
320 | "ansi-styles": "^4.0.0",
321 | "string-width": "^4.1.0",
322 | "strip-ansi": "^6.0.0"
323 | }
324 | },
325 | "y18n": {
326 | "version": "5.0.5",
327 | "resolved": "https://registry.npm.taobao.org/y18n/download/y18n-5.0.5.tgz?cache=0&sync_timestamp=1606778018853&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fy18n%2Fdownload%2Fy18n-5.0.5.tgz",
328 | "integrity": "sha1-h2nsCNA7HqLfJQCs71YXQ7u5qxg="
329 | },
330 | "yargs": {
331 | "version": "16.2.0",
332 | "resolved": "https://registry.npm.taobao.org/yargs/download/yargs-16.2.0.tgz?cache=0&sync_timestamp=1607208071729&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fyargs%2Fdownload%2Fyargs-16.2.0.tgz",
333 | "integrity": "sha1-HIK/D2tqZur85+8w43b0mhJHf2Y=",
334 | "requires": {
335 | "cliui": "^7.0.2",
336 | "escalade": "^3.1.1",
337 | "get-caller-file": "^2.0.5",
338 | "require-directory": "^2.1.1",
339 | "string-width": "^4.2.0",
340 | "y18n": "^5.0.5",
341 | "yargs-parser": "^20.2.2"
342 | }
343 | },
344 | "yargs-parser": {
345 | "version": "20.2.4",
346 | "resolved": "https://registry.npm.taobao.org/yargs-parser/download/yargs-parser-20.2.4.tgz",
347 | "integrity": "sha1-tCiQ8UVmeW+Fro46JSkNIF8VSlQ="
348 | }
349 | }
350 | }
351 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@matrixage/picpic",
3 | "version": "1.5.4",
4 | "description": "A awesome image bed by github pages and github actions.",
5 | "keywords": [
6 | "picpic",
7 | "picgo",
8 | "image",
9 | "img",
10 | "markdown",
11 | "md",
12 | "bed",
13 | "pic",
14 | "nodejs",
15 | "vue",
16 | "js",
17 | "github-gh",
18 | "github-pages",
19 | "github",
20 | "pages"
21 | ],
22 | "scripts": {
23 | "build": "node ./build/index.js"
24 | },
25 | "repository": {
26 | "type": "git",
27 | "url": "git+https://github.com/MatrixAges/picpic.git"
28 | },
29 | "author": "matrixage",
30 | "license": "MIT",
31 | "bugs": {
32 | "url": "https://github.com/MatrixAges/picpic/issues"
33 | },
34 | "homepage": "https://github.com/MatrixAges/picpic#readme",
35 | "dependencies": {
36 | "@matrixage/atom.css": "^2.0.1",
37 | "dree": "^2.5.0",
38 | "fs-extra": "^9.0.1",
39 | "globby": "^11.0.1",
40 | "imageinfo": "^1.0.4",
41 | "imagemin": "^7.0.1",
42 | "imagemin-gifsicle": "^7.0.0",
43 | "imagemin-mozjpeg": "^9.0.0",
44 | "imagemin-pngquant": "^9.0.2",
45 | "imagemin-webp": "^6.0.0"
46 | },
47 | "bin": {
48 | "picpic": "./bin/index.js"
49 | }
50 | }
--------------------------------------------------------------------------------
/picpic.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "types": [
3 | "svg",
4 | "png",
5 | "jpg",
6 | "jpeg",
7 | "gif",
8 | "webp"
9 | ],
10 | "compress": {
11 | "quality": 0.8,
12 | "webp": true
13 | },
14 | "depth": 12
15 | }
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | # picpic
4 |
5 | _An awesome image host service driven by github pages and github actions.
_
6 |
7 |
8 | 
9 | 
10 | 
11 | 
12 | 
13 |
14 |
15 | ## Doc
16 |
17 | [EN](https://github.com/MatrixAges/picpic#readme) | [中文文档](https://github.com/MatrixAges/picpic/blob/master/readme_cn.md)
18 |
19 | ## Installation
20 |
21 | Install via npm:
22 |
23 | ```bash
24 | $ npm i @matrixage/picpic
25 | ```
26 |
27 | ## Usage
28 |
29 | To use picpic, by below steps:
30 |
31 | - mkdir a folder & cd it
32 | - `npm init` & press enter through
33 | - `npm i @matrixage/picpic`
34 | - `"init": "picpic init"` into package.json `scripts`
35 | - `npm run init`
36 | - drop you images to `assets` folder
37 | - `git commit` & `git push` to you github
38 |
39 | then active your gh-pages.
40 |
41 | if your acccout do not active github actions, you should active github actions and git push again to trigger delopy process.
42 |
43 | if your github repo first branch is master,please change the branch in .github/workflows/ci.yml (main => master)
44 |
45 | ## Features
46 |
47 | - click image to preview detail
48 | - preview images in folder mode
49 | - mobile is avaible
50 |
51 | also, more you can explore:
52 |
53 | - list mode
54 | - search
55 | - navigator
56 | - minim file system
57 |
58 | if you have more demands, and if you think your demands reasonal, you can talk to me.
59 |
60 | ## Config
61 |
62 | ```json
63 | {
64 | // supported images type
65 | "types": ["svg", "png", "jpg", "jpeg", "gif", "webp"],
66 |
67 | // enable imagemin，compress : false, disable imagemin，compress
68 | // support compress jpg、png and gif
69 | "compress": {
70 | // image quality 0.1 - 1
71 | "quality": 0.8,
72 | // if true, webp，jpg、png will be compress by imagemin-webp
73 | "webp": false
74 | },
75 |
76 | // file folder load depth
77 | "depth": 12
78 | }
79 | ```
80 |
81 | ## Accessibility
82 |
83 | Picpic supports the all modern browsers,and you can preview picpic images in chrome or firefox.
84 |
85 | ## License
86 |
87 | Picpic is licensed under the MIT license. (http://opensource.org/licenses/MIT)
88 |
--------------------------------------------------------------------------------
/readme_cn.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | # picpic
4 |
5 | _一个图床应用，好看且好用，基于 github pages 和 github actions.
_
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | ## 文档
16 |
17 | [EN](https://github.com/MatrixAges/picpic) | [中文文档](https://github.com/MatrixAges/picpic/blob/master/readme_cn.md)
18 |
19 | ## 安装
20 |
21 | 通过 npm 安装:
22 |
23 | ```bash
24 | $ npm i @matrixage/picpic
25 | ```
26 |
27 | ## 使用方式
28 |
29 | 通过如下步骤即可使用 picpic 创建你的个人图床:
30 |
31 | - 创建一个文件夹，然后进入它，并打开终端
32 | - 执行 `npm init` 一路 enter 下去
33 | - 执行 `npm i @matrixage/picpic`
34 | - 打开 package.json，把`"init": "picpic init"` 加入到 `scripts`字段中
35 | - 执行`npm run init`
36 | - 然后把你的图片移动到 `assets` 文件夹中
37 | - 执行`git commit` & `git push` 推送你的代码到 github
38 |
39 | github actions 检测到项目中 .github 文件夹下的部署脚本之后，将会启动自动化构建把你的图片打包编译到 gh-pages 分支上去。
40 |
41 | 然后激活你的 gh-pages，在 github 项目的页面中的 tab 的最后一项 settings 中找到.
42 |
43 | 如果你没有使用过 github actions ，你需要激活你的 github actions 功能，然后才能通过部署脚本触发自动构建流程.
44 |
45 | 如果你发现生成的图片链接可以访问，但是放在 github 的 readme.md 中无法显示，那最有可能是 `githubusercontent.com` 被本地服务商 DNS 污染，解决方案是加入如下 DNS 解析到你的 hosts 文件中：
46 |
47 | ```
48 | 199.232.96.133 raw.githubusercontent.com
49 | 199.232.96.133 camo.githubusercontent.com
50 | ```
51 |
52 | 如果你发现访问 github 很慢，那是因为本地服务商在进行 DNS 网络过滤，加入如下 host 跳过服务商网络过滤：
53 |
54 | ```
55 | 140.82.112.3 github.com
56 | ```
57 |
58 | 如果你的仓库的主分支是 master 而不是 main，请自行修改构建脚本依赖分支为 master，在.github/workflows/ci.yml 中。
59 |
60 | ## Tricks
61 |
62 | - 点击图片可以查看更多细节
63 | - 点击右上角的文件夹图标可以进入文件夹模式
64 | - 在移动端同样是可以使用的
65 |
66 | 更多功能请自行探索:
67 |
68 | - 列表模式
69 | - 搜索
70 | - 导航
71 | - 小型的文件系统
72 |
73 | 如果你有自己的需求，而且你认为你的需求合理的话，可以通过 issue 或者 discussion 提给我，如果确实有价值，我会实现，当然，你也可以自行实现。
74 |
75 | ## 配置文件
76 |
77 | ```json
78 | {
79 | // 支持的图片格式
80 | "types": ["svg", "png", "jpg", "jpeg", "gif", "webp"],
81 |
82 | // 开启图片压缩，当compress : false时，关闭压缩
83 | // 仅支持对jpg、png、gif进行压缩
84 | "compress": {
85 | // 图片质量 0.1 - 1
86 | "quality": 0.8,
87 | // 如果设定为true，webp，jpg、png将使用imagemin的webp插件进行压缩
88 | "webp": false
89 | },
90 |
91 | // 文件夹读取深度
92 | "depth": 12
93 | }
94 | ```
95 |
96 | ## Accessibility
97 |
98 | Picpic 支持所有现代浏览器，建议使用 chrome 或是 firefox 进行访问。
99 |
100 | ## License
101 |
102 | Picpic 使用的是开放的 MIT 协议。 (http://opensource.org/licenses/MIT)
103 |
--------------------------------------------------------------------------------
/src/components/Detail/index.css:
--------------------------------------------------------------------------------
1 | .detail_wrap {
2 | background-color: rgba(0, 0, 0, 0.72);
3 | backdrop-filter: blur(5px);
4 | -webkit-backdrop-filter: blur(5px);
5 | }
6 | .detail_wrap .detail {
7 | width: var(--size_detail);
8 | background: linear-gradient(-30deg, purple, orange);
9 | border-radius: 6px;
10 | overflow: hidden;
11 | }
12 | .detail_wrap .detail.contain .img_item {
13 | background-size: contain !important;
14 | }
15 | .detail_wrap .detail.cover .img_item {
16 | background-size: cover !important;
17 | }
18 | .detail_wrap .detail .img_item {
19 | height: var(--size_detail);
20 | }
21 | .detail_wrap .detail .img_item .btn_close {
22 | top: 18px;
23 | right: 18px;
24 | padding: 1px;
25 | border-radius: 36px;
26 | cursor: pointer;
27 | transition: all ease 0.3s;
28 | border: 1px solid #eee;
29 | background-color: white;
30 | }
31 | .detail_wrap .detail .img_item .btn_close svg {
32 | width: 18px;
33 | height: 18px;
34 | opacity: 0.72;
35 | }
36 | .detail_wrap .detail .img_item .btn_download {
37 | bottom: 18px;
38 | right: 224px;
39 | width: 26px;
40 | height: 26px;
41 | border-radius: 100px;
42 | font-size: 12px;
43 | cursor: pointer;
44 | background-color: rgba(255, 255, 255, 0.8);
45 | backdrop-filter: blur(10px);
46 | -webkit-backdrop-filter: blur(10px);
47 | border: 1px solid #eee;
48 | color: black;
49 | }
50 | .detail_wrap .detail .img_item .btn_download:hover {
51 | box-shadow: 0 0 30px #ccc;
52 | }
53 | .detail_wrap .detail .img_item .btn_download:active {
54 | background-color: black;
55 | color: white;
56 | }
57 | .detail_wrap .detail .img_item .btn_autoplay {
58 | bottom: 18px;
59 | right: 140px;
60 | width: 72px;
61 | padding: 5px 0;
62 | font-size: 12px;
63 | cursor: pointer;
64 | background-color: rgba(255, 255, 255, 0.8);
65 | backdrop-filter: blur(10px);
66 | -webkit-backdrop-filter: blur(10px);
67 | border: 1px solid #eee;
68 | border-radius: 100px;
69 | }
70 | .detail_wrap .detail .img_item .btn_autoplay:hover {
71 | box-shadow: 0 0 30px #ccc;
72 | }
73 | .detail_wrap .detail .img_item .btn_autoplay:active,
74 | .detail_wrap .detail .img_item .btn_autoplay.playing {
75 | background-color: black;
76 | color: white;
77 | }
78 | .detail_wrap .detail .img_item .detail_options {
79 | bottom: 18px;
80 | border-radius: 100px;
81 | background-color: rgba(255, 255, 255, 0.8);
82 | backdrop-filter: blur(10px);
83 | -webkit-backdrop-filter: blur(10px);
84 | border: 1px solid #eee;
85 | overflow: hidden;
86 | transition: all ease 0.3s;
87 | }
88 | .detail_wrap .detail .img_item .detail_options:hover {
89 | box-shadow: 0 0 30px #ccc;
90 | }
91 | .detail_wrap .detail .img_item .detail_options.style {
92 | left: 18px;
93 | }
94 | .detail_wrap .detail .img_item .detail_options.current {
95 | right: 18px;
96 | }
97 | .detail_wrap .detail .img_item .detail_options.current button:active {
98 | background-color: black;
99 | color: white;
100 | }
101 | .detail_wrap .detail .img_item .detail_options.current button:first-child {
102 | border-right: 1px solid #eee;
103 | }
104 | .detail_wrap .detail .img_item .detail_options button {
105 | width: 54px;
106 | padding: 5px 0;
107 | font-size: 12px;
108 | cursor: pointer;
109 | }
110 | .detail_wrap .detail .img_item .detail_options button.active {
111 | background-color: black;
112 | color: white;
113 | border-radius: 100px;
114 | }
115 |
--------------------------------------------------------------------------------
/src/components/Detail/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
11 |
12 |
16 |
31 |
35 |
39 |
43 |
44 |
50 |
64 |
65 |
69 |
73 |
77 |
81 |
82 |
83 |
84 |
6 |
41 |
There is no images
42 |
9 |
13 |
25 |
26 |
27 |
28 |
49 |
50 |
{{current_folder.name}}
51 |
55 |
56 |
off
60 |
on
64 |
65 |
66 |
67 |
68 |
69 |
91 |
112 |
113 |
114 |
115 | {{select_folder.join(' > ')}}
116 | using: {{folder_use}}
117 |
118 |
119 |
7 |
13 |
20 |
{{item.name}}
25 |
30 |
{{item.name.split('.')[0]}}
35 |
36 |
37 | size:
38 | {{item.dimension}}
39 |
40 |
41 | weight:
42 | {{item.size}}
43 |
44 |
45 | format:
46 | {{item.extension}}
47 |
48 |
49 |
50 |
51 |
Design and made by Matrixage
58 |
7 | {{msg}}
8 |
9 |
10 |
--------------------------------------------------------------------------------
/src/components/Msg/index.js:
--------------------------------------------------------------------------------
1 | document.addEventListener('included', function () {
2 | Vue.component('x-msg', {
3 | template: '#msg'
4 | })
5 | })
--------------------------------------------------------------------------------
/src/components/Msg/index.less:
--------------------------------------------------------------------------------
1 | .msg_wrap {
2 | bottom: 24px;
3 | right: 24px;
4 | height: 48px;
5 | padding: 0 24px;
6 | border-radius: 4px;
7 | background-color: rgba(0, 0, 0, 0.9);
8 | color: white;
9 | backdrop-filter: blur(10px);
10 | -webkit-backdrop-filter: blur(10px);
11 | font-size: 13px;
12 | line-height: 1;
13 | z-index: 10000;
14 | }
--------------------------------------------------------------------------------
/src/components/Pagination/index.css:
--------------------------------------------------------------------------------
1 | .pagination_wrap {
2 | bottom: 0;
3 | }
4 | .pagination_wrap .pagination {
5 | padding: 18px 24px;
6 | border-top-left-radius: 12px;
7 | border-top-right-radius: 12px;
8 | background-color: rgba(248, 249, 253, 0.72);
9 | backdrop-filter: blur(9px);
10 | -webkit-backdrop-filter: blur(9px);
11 | color: black;
12 | }
13 | .pagination_wrap .pagination #select_page_size {
14 | padding: 7px 9px;
15 | margin-right: 24px;
16 | box-sizing: border-box;
17 | border-radius: 4px;
18 | transition: all ease 0.3s;
19 | cursor: pointer;
20 | background-color: transparent;
21 | color: black;
22 | border: 1px solid rgba(0, 0, 0, 0.05);
23 | outline: none;
24 | }
25 | .pagination_wrap .pagination .btn_option {
26 | padding: 9px 18px;
27 | border-radius: 4px;
28 | transition: all ease 0.3s;
29 | cursor: pointer;
30 | background-color: black;
31 | color: white;
32 | border: 1px solid transparent;
33 | }
34 | .pagination_wrap .pagination .btn_option:hover {
35 | background-color: transparent;
36 | color: black;
37 | border: 1px solid black;
38 | }
39 | .pagination_wrap .pagination .btn_option:disabled {
40 | opacity: 0.1;
41 | }
42 | .pagination_wrap .pagination .tabbar_items {
43 | margin: 0 12px;
44 | }
45 | .pagination_wrap .pagination .tabbar_items .tabbar_item {
46 | width: 36px;
47 | height: 36px;
48 | margin: 0 4px;
49 | border-radius: 50%;
50 | display: flex;
51 | justify-content: center;
52 | align-items: center;
53 | border: 1px solid rgba(0, 0, 0, 0.05);
54 | transition: all ease 0.3s;
55 | cursor: pointer;
56 | font-size: 15px;
57 | line-height: 1;
58 | }
59 | .pagination_wrap .pagination .tabbar_items .tabbar_item:hover,
60 | .pagination_wrap .pagination .tabbar_items .tabbar_item.active {
61 | border: 1px solid rgba(0, 0, 0, 0.6);
62 | }
63 | .pagination_wrap .pagination #input_page {
64 | width: 89px;
65 | padding: 9px 9px;
66 | margin-left: 24px;
67 | box-sizing: border-box;
68 | border-radius: 4px;
69 | transition: all ease 0.3s;
70 | cursor: pointer;
71 | background-color: transparent;
72 | color: black;
73 | border: 1px solid rgba(0, 0, 0, 0.05);
74 | outline: none;
75 | }
76 | .pagination_wrap .pagination #input_page::placeholder {
77 | color: #888;
78 | }
79 |
--------------------------------------------------------------------------------
/src/components/Pagination/index.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/Pagination/index.js:
--------------------------------------------------------------------------------
1 | document.addEventListener('included', function (){
2 | Vue.component('x-pagination', {
3 | template: '#pagination'
4 | })
5 | })
6 |
--------------------------------------------------------------------------------
/src/components/Pagination/index.less:
--------------------------------------------------------------------------------
1 | .pagination_wrap {
2 | bottom: 0;
3 |
4 | .pagination {
5 | padding: 18px 24px;
6 | border-top-left-radius: 12px;
7 | border-top-right-radius: 12px;
8 | background-color: rgba(248, 249, 253, 0.72);
9 | backdrop-filter: blur(9px);
10 | -webkit-backdrop-filter: blur(9px);
11 | color: black;
12 |
13 | #select_page_size {
14 | padding: 7px 9px;
15 | margin-right: 24px;
16 | box-sizing: border-box;
17 | border-radius: 4px;
18 | transition: all ease 0.3s;
19 | cursor: pointer;
20 | background-color: transparent;
21 | color: black;
22 | border: 1px solid rgba(0, 0, 0, 0.05);
23 | outline: none;
24 | }
25 |
26 | .btn_option {
27 | padding: 9px 18px;
28 | border-radius: 4px;
29 | transition: all ease 0.3s;
30 | cursor: pointer;
31 | background-color: black;
32 | color: white;
33 | border: 1px solid transparent;
34 |
35 | &:hover {
36 | background-color: transparent;
37 | color: black;
38 | border: 1px solid black;
39 | }
40 |
41 | &:disabled {
42 | opacity: 0.1;
43 | }
44 | }
45 |
46 | .tabbar_items {
47 | margin: 0 12px;
48 |
49 | .tabbar_item {
50 | width: 36px;
51 | height: 36px;
52 | margin: 0 4px;
53 | border-radius: 50%;
54 | display: flex;
55 | justify-content: center;
56 | align-items: center;
57 | border: 1px solid rgba(0, 0, 0, 0.05);
58 | transition: all ease 0.3s;
59 | cursor: pointer;
60 | font-size: 15px;
61 | line-height: 1;
62 |
63 | &:hover,
64 | &.active {
65 | border: 1px solid rgba(0, 0, 0, 0.6);
66 | }
67 | }
68 | }
69 |
70 | #input_page {
71 | width: 89px;
72 | padding: 9px 9px;
73 | margin-left: 24px;
74 | box-sizing: border-box;
75 | border-radius: 4px;
76 | transition: all ease 0.3s;
77 | cursor: pointer;
78 | background-color: transparent;
79 | color: black;
80 | border: 1px solid rgba(0, 0, 0, 0.05);
81 | outline: none;
82 |
83 | &::placeholder {
84 | color: #888;
85 | }
86 | }
87 | }
88 | }
--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MatrixAges/picpic/4e19e9d0694e7dd76de23eef22d1a7a2aab262b6/src/favicon.ico
--------------------------------------------------------------------------------
/src/images/logo_picpic_black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MatrixAges/picpic/4e19e9d0694e7dd76de23eef22d1a7a2aab262b6/src/images/logo_picpic_black.png
--------------------------------------------------------------------------------
/src/images/logo_picpic_white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MatrixAges/picpic/4e19e9d0694e7dd76de23eef22d1a7a2aab262b6/src/images/logo_picpic_white.png
--------------------------------------------------------------------------------
/src/images/matrixage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MatrixAges/picpic/4e19e9d0694e7dd76de23eef22d1a7a2aab262b6/src/images/matrixage.png
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | document.addEventListener('included', function (){
2 | new Vue({
3 | el: '#app',
4 | data: {
5 | img_paths: window.img_paths,
6 | current: -1,
7 | style: 'cover',
8 | page: 1,
9 | page_size: 10,
10 | array_page_size: [ 10, 20, 40, 80, 99999999 ],
11 | select_folder: [],
12 | current_folder: {},
13 | folder_prev: '',
14 | folder_use: 'assets',
15 | img_data: [],
16 | chunk_data: [],
17 | current_data: [],
18 | visible_nav: true,
19 | visible_msg: false,
20 | visible_search: false,
21 | visible_folder_select: false,
22 | timer_msg: 0,
23 | msg: '',
24 | search_text: '',
25 | header_no_border: false,
26 | autoplay: false,
27 | timer_autoplay: 0,
28 | is_mobile: false,
29 | mode: 'block'
30 | },
31 | filters: {
32 | getStyles: function (path){
33 | var str = ''
34 |
35 | str += ';background-image:url(./' + path + ')'
36 | str += ';background-size:cover'
37 | str += ';background-position:center center'
38 | str += ';background-repeat:no-repeat'
39 |
40 | return str
41 | }
42 | },
43 | watch: {
44 | page: function (new_val){
45 | this.current_data = this.chunk_data[new_val - 1]
46 | },
47 | page_size: function (new_val){
48 | this.chunk_data = lodash_chunk(this.img_data, new_val)
49 | this.current_data = this.chunk_data[0]
50 | this.page = 1
51 |
52 | localStorage.setItem('page_size', Number(new_val))
53 | },
54 | search_text: lodash_throttle(
55 | function (new_val){
56 | if (!new_val) {
57 | this.visible_nav = true
58 | this.chunk_data = lodash_chunk(this.img_data, this.page_size)
59 | this.current_data = this.chunk_data[this.page - 1]
60 | return
61 | }
62 |
63 | this.visible_nav = false
64 |
65 | function fuzzyQuery (list, keyWord){
66 | var arr = []
67 |
68 | for (var i = 0; i < list.length; i++) {
69 | if (list[i].name.indexOf(keyWord) >= 0) {
70 | arr.push(list[i])
71 | }
72 | }
73 |
74 | return arr
75 | }
76 |
77 | this.current_data = fuzzyQuery(this.img_data, new_val)
78 | },
79 | 360,
80 | { leading: false }
81 | ),
82 | current_folder: function (new_val){
83 | const current = new_val.name
84 | const index = this.select_folder.findIndex(item => item === current)
85 |
86 | this.folder_prev = this.select_folder[index - 1]
87 | }
88 | },
89 | mounted: function (){
90 | this.getDeviceInfo()
91 | this.setLanding()
92 | this.setChunkData()
93 | this.getLocalStorage()
94 |
95 | window.addEventListener('scroll', this.handleScroll)
96 | },
97 | destroyed () {
98 | document.removeEventListener('scroll', this.handleScroll)
99 | },
100 | methods: {
101 | preventScroll (event) {
102 | event.preventDefault()
103 | },
104 | getDeviceInfo: function (){
105 | if (document.body.offsetWidth <= 800) {
106 | this.is_mobile = true
107 | } else {
108 | this.is_mobile = false
109 | }
110 | },
111 | handleScroll: function (){
112 | const scrollTop =
113 | window.pageYOffset ||
114 | document.documentElement.scrollTop ||
115 | document.body.scrollTop
116 | const top = this.is_mobile ? 0 : this.$refs.img_items.offsetTop
117 |
118 | if (scrollTop > top) {
119 | this.header_no_border = true
120 | } else {
121 | this.header_no_border = false
122 | }
123 | },
124 | setLanding: function (){
125 | setTimeout(() => {
126 | const landing_wrap = document.querySelector('#landing_wrap')
127 | const app = document.querySelector('#app')
128 |
129 | landing_wrap.style.opacity = 0
130 |
131 | setTimeout(() => (landing_wrap.style.display = 'none'), 300)
132 |
133 | app.style.opacity = 1
134 | }, 300)
135 | },
136 | getImgs: function (children, arr){
137 | children.map(item => {
138 | if (item.type === 'file') {
139 | arr.push(item)
140 | } else {
141 | if (item.children) {
142 | this.getImgs(item.children, arr)
143 | }
144 | }
145 | })
146 | },
147 | setChunkData: function (){
148 | this.select_folder = [ 'assets' ]
149 | this.current_folder = this.img_paths
150 |
151 | const arr = []
152 |
153 | this.getImgs(this.img_paths.children, arr)
154 |
155 | this.img_data = arr
156 | this.chunk_data = lodash_chunk(this.img_data, this.page_size)
157 | this.current_data = this.chunk_data[this.page - 1]
158 | },
159 | getLocalStorage: function (){
160 | const page_size = localStorage.getItem('page_size')
161 | const style = localStorage.getItem('style')
162 | const mode = localStorage.getItem('mode')
163 |
164 | if (page_size) this.page_size = page_size
165 | if (style) this.style = style
166 | if (mode) this.mode = mode
167 | },
168 | onImgItem: function (e){
169 | const _that = this
170 | const type = e.target.dataset.type
171 | const path = e.target.dataset.path
172 | const index = Number(e.target.dataset.index)
173 |
174 | if (!type) {
175 | this.current = -1
176 | this.autoplay = false
177 |
178 | clearInterval(this.timer_autoplay)
179 |
180 | return
181 | }
182 |
183 | function showMsg (){
184 | _that.msg = 'link has copy to clipboard'
185 | _that.visible_msg = true
186 |
187 | clearTimeout(_that.timer_msg)
188 |
189 | _that.timer_msg = setTimeout(() => {
190 | _that.visible_msg = false
191 | }, 1200)
192 | }
193 |
194 | switch (type) {
195 | case 'img':
196 | this.current = index
197 |
198 | break
199 | case 'url':
200 | showMsg()
201 |
202 | clipboardCopy(
203 | 'https://' +
204 | location.host +
205 | location.pathname +
206 | this.current_data[index].path
207 | )
208 | break
209 | case 'path':
210 | showMsg()
211 |
212 | clipboardCopy(
213 | 'https://' + location.host + location.pathname + path
214 | )
215 |
216 | break
217 | default:
218 | break
219 | }
220 | },
221 | onChooseStyle: function (e){
222 | const style = e.target.dataset.style
223 |
224 | if (!style) return
225 |
226 | this.style = style
227 |
228 | localStorage.setItem('style', style)
229 | },
230 | onToggleAutoPlay: function (){
231 | this.autoplay = !this.autoplay
232 |
233 | if (this.autoplay) {
234 | this.timer_autoplay = setInterval(() => {
235 | const target_next = this.current + 1
236 |
237 | if (target_next < this.current_data.length) {
238 | this.current = target_next
239 | } else {
240 | this.autoplay = false
241 | clearInterval(this.timer_autoplay)
242 | }
243 | }, 2400)
244 | } else {
245 | clearInterval(this.timer_autoplay)
246 | }
247 | },
248 | onChangeCurrent: function (e){
249 | const type = e.target.dataset.type
250 |
251 | if (!type) return
252 |
253 | switch (type) {
254 | case 'prev':
255 | const target_prev = this.current - 1
256 |
257 | if (target_prev >= 0) this.current = target_prev
258 |
259 | break
260 | case 'next':
261 | const target_next = this.current + 1
262 |
263 | if (target_next < this.current_data.length)
264 | this.current = target_next
265 |
266 | break
267 | default:
268 | break
269 | }
270 | },
271 | onPageItem: function (e){
272 | const page = e.target.dataset.page
273 |
274 | if (!page) return
275 |
276 | this.page = Number(page)
277 | },
278 | onPrev: function (){
279 | const target_prev = this.page - 1
280 |
281 | if (target_prev > 0) this.page = target_prev
282 | },
283 | onNext: function (){
284 | const target_next = this.page + 1
285 |
286 | if (target_next <= this.chunk_data.length) this.page = target_next
287 | },
288 | onEnterPage: function (e){
289 | if (e.keyCode !== 13) return
290 |
291 | const value = this.$refs.input_page.value
292 |
293 | if (value <= 0 || value > this.chunk_data.length) return
294 |
295 | this.page = value
296 | },
297 | onToggleSearch: function (){
298 | this.visible_search = !this.visible_search
299 | this.search_text = ''
300 | },
301 | onToggleFolder: function (){
302 | this.visible_folder_select = !this.visible_folder_select
303 | },
304 | onToggleMode: function (){
305 | localStorage.setItem('mode', this.mode === 'block' ? 'list' : 'block')
306 |
307 | if (this.mode === 'block') return (this.mode = 'list')
308 | if (this.mode === 'list') return (this.mode = 'block')
309 | },
310 | onFolder: function (e){
311 | const name = e.target.dataset.name
312 | const item = this.current_folder.children.find(item => item.name === name)
313 |
314 | this.select_folder.push(name)
315 | this.current_folder = item
316 | },
317 | onPrevFolder: function (){
318 | const _that = this
319 | const folder_prev = _that.folder_prev
320 |
321 | _that.select_folder.pop()
322 |
323 | function findPrev (children, item){
324 | const target = children.find(it => {
325 | if (it.type === 'directory') {
326 | return it.name === item
327 | }
328 | })
329 |
330 | if (target.name === folder_prev) {
331 | _that.current_folder = target
332 |
333 | return true
334 | } else {
335 | findPrev(target.children)
336 | }
337 | }
338 |
339 | if (_that.folder_prev === 'assets') {
340 | _that.current_folder = _that.img_paths
341 | } else {
342 | for (const i in _that.select_folder) {
343 | if (Number(i) !== 0) {
344 | const target = findPrev(
345 | _that.img_paths.children,
346 | _that.select_folder[i]
347 | )
348 |
349 | if (target) return
350 | }
351 | }
352 | }
353 | },
354 | toggleFolderUse: function (){
355 | let source_data
356 | const arr = []
357 |
358 | if (this.folder_use === this.current_folder.name) {
359 | source_data = this.img_paths.children
360 |
361 | this.folder_use = 'assets'
362 | } else {
363 | source_data = this.current_folder.children
364 |
365 | this.folder_use = this.current_folder.name
366 | }
367 |
368 | this.getImgs(source_data, arr)
369 |
370 | this.img_data = arr
371 | this.chunk_data = lodash_chunk(this.img_data, this.page_size)
372 | this.current_data = this.chunk_data[this.page - 1]
373 | }
374 | }
375 | })
376 | })
377 |
--------------------------------------------------------------------------------
/src/libs/css/atom.min.css:
--------------------------------------------------------------------------------
1 | .border_box {
2 | -webkit-box-sizing: border-box;
3 | box-sizing: border-box;
4 | }
5 | .content_box {
6 | -webkit-box-sizing: content-box;
7 | box-sizing: content-box;
8 | }
9 | .flex {
10 | display: -webkit-box;
11 | display: -ms-flexbox;
12 | display: flex;
13 | }
14 | .flex_row {
15 | -webkit-box-orient: horizontal;
16 | -webkit-box-direction: normal;
17 | -ms-flex-direction: row;
18 | flex-direction: row;
19 | }
20 | .flex_row_reverse {
21 | -webkit-box-orient: horizontal;
22 | -webkit-box-direction: reverse;
23 | -ms-flex-direction: row-reverse;
24 | flex-direction: row-reverse;
25 | }
26 | .flex_column {
27 | -webkit-box-orient: vertical;
28 | -webkit-box-direction: normal;
29 | -ms-flex-direction: column;
30 | flex-direction: column;
31 | }
32 | .flex_column_reverse {
33 | -webkit-box-orient: vertical;
34 | -webkit-box-direction: reverse;
35 | -ms-flex-direction: column-reverse;
36 | flex-direction: column-reverse;
37 | }
38 | .flex_wrap {
39 | -ms-flex-wrap: wrap;
40 | flex-wrap: wrap;
41 | }
42 | .flex_nowrap {
43 | -ms-flex-wrap: nowrap;
44 | flex-wrap: nowrap;
45 | }
46 | .flex_wrap_reverse {
47 | -ms-flex-wrap: wrap-reverse;
48 | flex-wrap: wrap-reverse;
49 | }
50 | .justify_center {
51 | -webkit-box-pack: center;
52 | -ms-flex-pack: center;
53 | justify-content: center;
54 | }
55 | .justify_start {
56 | -webkit-box-pack: start;
57 | -ms-flex-pack: start;
58 | justify-content: flex-start;
59 | }
60 | .justify_end {
61 | -webkit-box-pack: end;
62 | -ms-flex-pack: end;
63 | justify-content: flex-end;
64 | }
65 | .justify_between {
66 | -webkit-box-pack: justify;
67 | -ms-flex-pack: justify;
68 | justify-content: space-between;
69 | }
70 | .justify_around {
71 | -ms-flex-pack: distribute;
72 | justify-content: space-around;
73 | }
74 | .justify_evenly {
75 | -webkit-box-pack: space-evenly;
76 | -ms-flex-pack: space-evenly;
77 | justify-content: space-evenly;
78 | }
79 | .justify_initial {
80 | -webkit-box-pack: initial;
81 | -ms-flex-pack: initial;
82 | justify-content: initial;
83 | }
84 | .align_center {
85 | -webkit-box-align: center;
86 | -ms-flex-align: center;
87 | align-items: center;
88 | }
89 | .align_start {
90 | -webkit-box-align: start;
91 | -ms-flex-align: start;
92 | align-items: flex-start;
93 | }
94 | .align_end {
95 | -webkit-box-align: end;
96 | -ms-flex-align: end;
97 | align-items: flex-end;
98 | }
99 | .align_stretch {
100 | -webkit-box-align: stretch;
101 | -ms-flex-align: stretch;
102 | align-items: stretch;
103 | }
104 | .align_baseline {
105 | -webkit-box-align: baseline;
106 | -ms-flex-align: baseline;
107 | align-items: baseline;
108 | }
109 | .align_initial {
110 | -webkit-box-align: initial;
111 | -ms-flex-align: initial;
112 | align-items: initial;
113 | }
114 | .line_clamp_1 {
115 | overflow: hidden;
116 | -o-text-overflow: ellipsis;
117 | text-overflow: ellipsis;
118 | white-space: nowrap;
119 | }
120 | .line_clamp_2 {
121 | display: -webkit-box;
122 | -webkit-box-orient: vertical;
123 | overflow: hidden;
124 | -webkit-line-clamp: 2;
125 | }
126 | .line_clamp_3 {
127 | display: -webkit-box;
128 | -webkit-box-orient: vertical;
129 | overflow: hidden;
130 | -webkit-line-clamp: 3;
131 | }
132 | .line_clamp_4 {
133 | display: -webkit-box;
134 | -webkit-box-orient: vertical;
135 | overflow: hidden;
136 | -webkit-line-clamp: 4;
137 | }
138 | .line_clamp_5 {
139 | display: -webkit-box;
140 | -webkit-box-orient: vertical;
141 | overflow: hidden;
142 | -webkit-line-clamp: 5;
143 | }
144 | .left {
145 | float: left;
146 | }
147 | .right {
148 | float: right;
149 | }
150 | .clearfix:after {
151 | visibility: hidden;
152 | display: block;
153 | font-size: 0;
154 | content: " ";
155 | clear: both;
156 | height: 0;
157 | }
158 | .clearfix {
159 | display: inline-table;
160 | }
161 | .clearfix {
162 | *zoom: 1;
163 | }
164 | .margin_center {
165 | margin: auto;
166 | }
167 | .margin_xcenter {
168 | margin: 0 auto;
169 | }
170 | .margin_ycenter {
171 | margin: auto 0;
172 | }
173 | .text_center {
174 | text-align: center;
175 | }
176 | .text_left {
177 | text-align: left;
178 | }
179 | .text_right {
180 | text-align: right;
181 | }
182 | .text_justify {
183 | text-align: justify;
184 | }
185 | .absolute {
186 | position: absolute;
187 | }
188 | .relative {
189 | position: relative;
190 | }
191 | .fixed {
192 | position: fixed;
193 | }
194 | .static {
195 | position: static;
196 | }
197 | .sticky {
198 | position: -webkit-sticky;
199 | position: sticky;
200 | }
201 | .top_0 {
202 | top: 0;
203 | }
204 | .left_0 {
205 | left: 0;
206 | }
207 | .right_0 {
208 | right: 0;
209 | }
210 | .bottom_0 {
211 | bottom: 0;
212 | }
213 | .z_index_0 {
214 | z-index: 0;
215 | }
216 | .z_index_10 {
217 | z-index: 10;
218 | }
219 | .z_index_20 {
220 | z-index: 20;
221 | }
222 | .z_index_100 {
223 | z-index: 100;
224 | }
225 | .z_index_1000 {
226 | z-index: 1000;
227 | }
228 | .none {
229 | display: none;
230 | }
231 | .block {
232 | display: block;
233 | }
234 | .inline {
235 | display: inline;
236 | }
237 | .inline_block {
238 | display: inline-block;
239 | }
240 | .list_item {
241 | display: list-item;
242 | }
243 | .radius_0 {
244 | border-radius: 0;
245 | }
246 | .radius_4 {
247 | border-radius: 4px;
248 | }
249 | .radius_10 {
250 | border-radius: 10px;
251 | }
252 | .radius_100 {
253 | border-radius: 100px;
254 | }
255 | .border_none {
256 | border: 0;
257 | }
258 | .overflow_visible {
259 | overflow: visible;
260 | }
261 | .overflow_hidden {
262 | overflow: hidden;
263 | }
264 | .overflow_xhidden {
265 | overflow-x: hidden;
266 | }
267 | .overflow_yhidden {
268 | overflow-y: hidden;
269 | }
270 | .outline_none {
271 | outline: 0;
272 | }
273 | .transition_normal {
274 | -webkit-transition: all ease 0.3s;
275 | -o-transition: all ease 0.3s;
276 | transition: all ease 0.3s;
277 | }
278 | .transition_slow {
279 | -webkit-transition: all ease 0.8s;
280 | -o-transition: all ease 0.8s;
281 | transition: all ease 0.8s;
282 | }
283 | .disabled {
284 | pointer-events: none;
285 | }
286 | .w_100 {
287 | width: 100%;
288 | }
289 | .h_100 {
290 | height: 100%;
291 | }
292 | .w_100vw {
293 | width: 100vw;
294 | }
295 | .h_100vh {
296 | height: 100vh;
297 | }
298 | .m_0 {
299 | margin: 0;
300 | }
301 | .m_2 {
302 | margin: 2px;
303 | }
304 | .m_4 {
305 | margin: 4px;
306 | }
307 | .m_6 {
308 | margin: 6px;
309 | }
310 | .m_8 {
311 | margin: 8px;
312 | }
313 | .m_10 {
314 | margin: 10px;
315 | }
316 | .m_12 {
317 | margin: 12px;
318 | }
319 | .m_14 {
320 | margin: 14px;
321 | }
322 | .m_16 {
323 | margin: 16px;
324 | }
325 | .m_18 {
326 | margin: 18px;
327 | }
328 | .m_20 {
329 | margin: 20px;
330 | }
331 | .m_30 {
332 | margin: 30px;
333 | }
334 | .mt_0 {
335 | margin-top: 0;
336 | }
337 | .mt_2 {
338 | margin-top: 2px;
339 | }
340 | .mt_4 {
341 | margin-top: 4px;
342 | }
343 | .mt_6 {
344 | margin-top: 6px;
345 | }
346 | .mt_8 {
347 | margin-top: 8px;
348 | }
349 | .mt_10 {
350 | margin-top: 10px;
351 | }
352 | .mt_12 {
353 | margin-top: 12px;
354 | }
355 | .mt_14 {
356 | margin-top: 14px;
357 | }
358 | .mt_16 {
359 | margin-top: 16px;
360 | }
361 | .mt_18 {
362 | margin-top: 18px;
363 | }
364 | .mt_20 {
365 | margin-top: 20px;
366 | }
367 | .mt_30 {
368 | margin-top: 30px;
369 | }
370 | .mb_0 {
371 | margin-bottom: 0;
372 | }
373 | .mb_2 {
374 | margin-bottom: 2px;
375 | }
376 | .mb_4 {
377 | margin-bottom: 4px;
378 | }
379 | .mb_6 {
380 | margin-bottom: 6px;
381 | }
382 | .mb_8 {
383 | margin-bottom: 8px;
384 | }
385 | .mb_10 {
386 | margin-bottom: 10px;
387 | }
388 | .mb_12 {
389 | margin-bottom: 12px;
390 | }
391 | .mb_14 {
392 | margin-bottom: 14px;
393 | }
394 | .mb_16 {
395 | margin-bottom: 16px;
396 | }
397 | .mb_18 {
398 | margin-bottom: 18px;
399 | }
400 | .mb_20 {
401 | margin-bottom: 20px;
402 | }
403 | .mb_30 {
404 | margin-bottom: 30px;
405 | }
406 | .ml_0 {
407 | margin-left: 0;
408 | }
409 | .ml_2 {
410 | margin-left: 2px;
411 | }
412 | .ml_4 {
413 | margin-left: 4px;
414 | }
415 | .ml_6 {
416 | margin-left: 6px;
417 | }
418 | .ml_8 {
419 | margin-left: 8px;
420 | }
421 | .ml_10 {
422 | margin-left: 10px;
423 | }
424 | .ml_12 {
425 | margin-left: 12px;
426 | }
427 | .ml_14 {
428 | margin-left: 14px;
429 | }
430 | .ml_16 {
431 | margin-left: 16px;
432 | }
433 | .ml_18 {
434 | margin-left: 18px;
435 | }
436 | .ml_20 {
437 | margin-left: 20px;
438 | }
439 | .ml_30 {
440 | margin-left: 20px;
441 | }
442 | .mr_0 {
443 | margin-right: 0;
444 | }
445 | .mr_2 {
446 | margin-right: 2px;
447 | }
448 | .mr_4 {
449 | margin-right: 4px;
450 | }
451 | .mr_6 {
452 | margin-right: 6px;
453 | }
454 | .mr_8 {
455 | margin-right: 8px;
456 | }
457 | .mr_10 {
458 | margin-right: 10px;
459 | }
460 | .mr_12 {
461 | margin-right: 12px;
462 | }
463 | .mr_14 {
464 | margin-right: 14px;
465 | }
466 | .mr_16 {
467 | margin-right: 16px;
468 | }
469 | .mr_18 {
470 | margin-right: 18px;
471 | }
472 | .mr_20 {
473 | margin-right: 20px;
474 | }
475 | .mr_30 {
476 | margin-right: 30px;
477 | }
478 | .p_0 {
479 | padding: 0;
480 | }
481 | .p_2 {
482 | padding: 2px;
483 | }
484 | .p_4 {
485 | padding: 4px;
486 | }
487 | .p_6 {
488 | padding: 6px;
489 | }
490 | .p_8 {
491 | padding: 8px;
492 | }
493 | .p_10 {
494 | padding: 10px;
495 | }
496 | .p_12 {
497 | padding: 12px;
498 | }
499 | .p_14 {
500 | padding: 14px;
501 | }
502 | .p_16 {
503 | padding: 16px;
504 | }
505 | .p_18 {
506 | padding: 18px;
507 | }
508 | .p_20 {
509 | padding: 20px;
510 | }
511 | .p_30 {
512 | padding: 30px;
513 | }
514 | .pt_0 {
515 | padding-top: 0;
516 | }
517 | .pt_2 {
518 | padding-top: 2px;
519 | }
520 | .pt_4 {
521 | padding-top: 4px;
522 | }
523 | .pt_6 {
524 | padding-top: 6px;
525 | }
526 | .pt_8 {
527 | padding-top: 8px;
528 | }
529 | .pt_10 {
530 | padding-top: 10px;
531 | }
532 | .pt_12 {
533 | padding-top: 12px;
534 | }
535 | .pt_14 {
536 | padding-top: 14px;
537 | }
538 | .pt_16 {
539 | padding-top: 16px;
540 | }
541 | .pt_18 {
542 | padding-top: 18px;
543 | }
544 | .pt_20 {
545 | padding-top: 20px;
546 | }
547 | .pt_30 {
548 | padding-top: 30px;
549 | }
550 | .pb_0 {
551 | padding-bottom: 0;
552 | }
553 | .pb_2 {
554 | padding-bottom: 2px;
555 | }
556 | .pb_4 {
557 | padding-bottom: 4px;
558 | }
559 | .pb_6 {
560 | padding-bottom: 6px;
561 | }
562 | .pb_8 {
563 | padding-bottom: 8px;
564 | }
565 | .pb_10 {
566 | padding-bottom: 10px;
567 | }
568 | .pb_12 {
569 | padding-bottom: 12px;
570 | }
571 | .pb_14 {
572 | padding-bottom: 14px;
573 | }
574 | .pb_16 {
575 | padding-bottom: 16px;
576 | }
577 | .pb_18 {
578 | padding-bottom: 18px;
579 | }
580 | .pb_20 {
581 | padding-bottom: 20px;
582 | }
583 | .pb_30 {
584 | padding-bottom: 30px;
585 | }
586 | .pl_0 {
587 | padding-left: 0;
588 | }
589 | .pl_2 {
590 | padding-left: 2px;
591 | }
592 | .pl_4 {
593 | padding-left: 4px;
594 | }
595 | .pl_6 {
596 | padding-left: 6px;
597 | }
598 | .pl_8 {
599 | padding-left: 8px;
600 | }
601 | .pl_10 {
602 | padding-left: 10px;
603 | }
604 | .pl_12 {
605 | padding-left: 12px;
606 | }
607 | .pl_14 {
608 | padding-left: 14px;
609 | }
610 | .pl_16 {
611 | padding-left: 16px;
612 | }
613 | .pl_18 {
614 | padding-left: 18px;
615 | }
616 | .pl_20 {
617 | padding-left: 20px;
618 | }
619 | .pl_30 {
620 | padding-left: 30px;
621 | }
622 | .pr_0 {
623 | padding-right: 0;
624 | }
625 | .pr_2 {
626 | padding-right: 2px;
627 | }
628 | .pr_4 {
629 | padding-right: 4px;
630 | }
631 | .pr_6 {
632 | padding-right: 6px;
633 | }
634 | .pr_8 {
635 | padding-right: 8px;
636 | }
637 | .pr_10 {
638 | padding-right: 10px;
639 | }
640 | .pr_12 {
641 | padding-right: 12px;
642 | }
643 | .pr_14 {
644 | padding-right: 14px;
645 | }
646 | .pr_16 {
647 | padding-right: 16px;
648 | }
649 | .pr_18 {
650 | padding-right: 18px;
651 | }
652 | .pr_20 {
653 | padding-right: 20px;
654 | }
655 | .pr_30 {
656 | padding-right: 30px;
657 | }
658 | .transparent {
659 | color: transparent;
660 | }
661 | .white {
662 | color: white;
663 | }
664 | .whitesmoke {
665 | color: whitesmoke;
666 | }
667 | .black {
668 | color: black;
669 | }
670 | .red {
671 | color: #f44336;
672 | }
673 | .orange {
674 | color: #ff9800;
675 | }
676 | .yellow {
677 | color: #ffd600;
678 | }
679 | .green {
680 | color: #4caf50;
681 | }
682 | .cyan {
683 | color: #00bcd4;
684 | }
685 | .blue {
686 | color: #2196f3;
687 | }
688 | .purple {
689 | color: #673ab7;
690 | }
691 | .color_000 {
692 | color: #000;
693 | }
694 | .color_111 {
695 | color: #111;
696 | }
697 | .color_222 {
698 | color: #222;
699 | }
700 | .color_333 {
701 | color: #333;
702 | }
703 | .color_444 {
704 | color: #444;
705 | }
706 | .color_555 {
707 | color: #555;
708 | }
709 | .color_666 {
710 | color: #666;
711 | }
712 | .color_777 {
713 | color: #777;
714 | }
715 | .color_888 {
716 | color: #888;
717 | }
718 | .color_999 {
719 | color: #999;
720 | }
721 | .color_aaa {
722 | color: #aaa;
723 | }
724 | .color_bbb {
725 | color: #bbb;
726 | }
727 | .color_ccc {
728 | color: #ccc;
729 | }
730 | .color_ddd {
731 | color: #ddd;
732 | }
733 | .color_eee {
734 | color: #eee;
735 | }
736 | .color_fff {
737 | color: #fff;
738 | }
739 | .bg_transparent {
740 | background-color: transparent;
741 | }
742 | .bg_white {
743 | background-color: white;
744 | }
745 | .bg_whitesmoke {
746 | background-color: whitesmoke;
747 | }
748 | .bg_black {
749 | background-color: black;
750 | }
751 | .bg_red {
752 | background-color: #f44336;
753 | }
754 | .bg_orange {
755 | background-color: #ff9800;
756 | }
757 | .bg_yellow {
758 | background-color: #ffd600;
759 | }
760 | .bg_green {
761 | background-color: #4caf50;
762 | }
763 | .bg_cyan {
764 | background-color: #00bcd4;
765 | }
766 | .bg_blue {
767 | background-color: #2196f3;
768 | }
769 | .bg_purple {
770 | background-color: #673ab7;
771 | }
772 | .bg_color_000 {
773 | background-color: #000;
774 | }
775 | .bg_color_111 {
776 | background-color: #111;
777 | }
778 | .bg_color_222 {
779 | background-color: #222;
780 | }
781 | .bg_color_333 {
782 | background-color: #333;
783 | }
784 | .bg_color_444 {
785 | background-color: #444;
786 | }
787 | .bg_color_555 {
788 | background-color: #555;
789 | }
790 | .bg_color_666 {
791 | background-color: #666;
792 | }
793 | .bg_color_777 {
794 | background-color: #777;
795 | }
796 | .bg_color_888 {
797 | background-color: #888;
798 | }
799 | .bg_color_999 {
800 | background-color: #999;
801 | }
802 | .bg_color_aaa {
803 | background-color: #aaa;
804 | }
805 | .bg_color_bbb {
806 | background-color: #bbb;
807 | }
808 | .bg_color_ccc {
809 | background-color: #ccc;
810 | }
811 | .bg_color_ddd {
812 | background-color: #ddd;
813 | }
814 | .bg_color_eee {
815 | background-color: #eee;
816 | }
817 | .bg_color_fff {
818 | background-color: #fff;
819 | }
820 | .font_normal {
821 | font-weight: normal;
822 | }
823 | .font_bold {
824 | font-weight: bold;
825 | }
826 | .font_bolder {
827 | font-weight: bolder;
828 | }
829 | .fontsize_8 {
830 | font-size: 8px;
831 | }
832 | .fontsize_10 {
833 | font-size: 12px;
834 | }
835 | .fontsize_12 {
836 | font-size: 12px;
837 | }
838 | .fontsize_13 {
839 | font-size: 13px;
840 | }
841 | .fontsize_14 {
842 | font-size: 14px;
843 | }
844 | .fontsize_15 {
845 | font-size: 14px;
846 | }
847 | .fontsize_16 {
848 | font-size: 16px;
849 | }
850 | .fontsize_18 {
851 | font-size: 18px;
852 | }
853 | .fontsize_20 {
854 | font-size: 20px;
855 | }
856 | .fontsize_24 {
857 | font-size: 24px;
858 | }
859 | .fontsize_32 {
860 | font-size: 32px;
861 | }
862 | .fontsize_64 {
863 | font-size: 72px;
864 | }
865 | .fontsize_128 {
866 | font-size: 128px;
867 | }
868 | .fontfamily_simhei {
869 | font-family: simhei;
870 | }
871 | .fontfamily_simsun {
872 | font-family: simsun;
873 | }
874 | .fontfamily_nsimsun {
875 | font-family: nsimsun;
876 | }
877 | .fontfamily_fangsong {
878 | font-family: fangsong;
879 | }
880 | .fontfamily_kaiti {
881 | font-family: kaiti;
882 | }
883 | .fontfamily_yahei {
884 | font-family: microsoft yahei;
885 | }
886 | .fontfamily_lisu {
887 | font-family: lisu;
888 | }
889 | .fontfamily_pingfang {
890 | font-family: pingfang sc;
891 | }
892 | .fontfamily_stheiti {
893 | font-family: stheiti;
894 | }
895 | .letter_spacing_1 {
896 | letter-spacing: 1px;
897 | }
898 | .letter_spacing_2 {
899 | letter-spacing: 1px;
900 | }
901 | .cursor_point {
902 | cursor: pointer;
903 | }
904 |
--------------------------------------------------------------------------------
/src/libs/css/atom.min.less:
--------------------------------------------------------------------------------
1 | .border_box{-webkit-box-sizing:border-box;box-sizing:border-box}.content_box{-webkit-box-sizing:content-box;box-sizing:content-box}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.flex_row{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.flex_row_reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.flex_column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.flex_column_reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.flex_wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex_nowrap{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.flex_wrap_reverse{-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}.justify_center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.justify_start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.justify_end{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.justify_between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.justify_around{-ms-flex-pack:distribute;justify-content:space-around}.justify_evenly{-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}.justify_initial{-webkit-box-pack:initial;-ms-flex-pack:initial;justify-content:initial}.align_center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.align_start{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.align_end{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.align_stretch{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.align_baseline{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.align_initial{-webkit-box-align:initial;-ms-flex-align:initial;align-items:initial}.line_clamp_1{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap}.line_clamp_2{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:2}.line_clamp_3{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:3}.line_clamp_4{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:4}.line_clamp_5{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:5}.left{float:left}.right{float:right}.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}.clearfix{display:inline-table}.clearfix{*zoom:1}.margin_center{margin:auto}.margin_xcenter{margin:0 auto}.margin_ycenter{margin:auto 0}.text_center{text-align:center}.text_left{text-align:left}.text_right{text-align:right}.text_justify{text-align:justify}.absolute{position:absolute}.relative{position:relative}.fixed{position:fixed}.static{position:static}.sticky{position:-webkit-sticky;position:sticky}.top_0{top:0}.left_0{left:0}.right_0{right:0}.bottom_0{bottom:0}.z_index_0{z-index:0}.z_index_10{z-index:10}.z_index_20{z-index:20}.z_index_100{z-index:100}.z_index_1000{z-index:1000}.none{display:none}.block{display:block}.inline{display:inline}.inline_block{display:inline-block}.list_item{display:list-item}.radius_0{border-radius:0}.radius_4{border-radius:4px}.radius_10{border-radius:10px}.radius_100{border-radius:100px}.border_none{border:0}.overflow_visible{overflow:visible}.overflow_hidden{overflow:hidden}.overflow_xhidden{overflow-x:hidden}.overflow_yhidden{overflow-y:hidden}.outline_none{outline:0}.transition_normal{-webkit-transition:all ease .3s;-o-transition:all ease .3s;transition:all ease .3s}.transition_slow{-webkit-transition:all ease .8s;-o-transition:all ease .8s;transition:all ease .8s}.disabled{pointer-events:none}.w_100{width:100%}.h_100{height:100%}.w_100vw{width:100vw}.h_100vh{height:100vh}.m_0{margin:0}.m_2{margin:2px}.m_4{margin:4px}.m_6{margin:6px}.m_8{margin:8px}.m_10{margin:10px}.m_12{margin:12px}.m_14{margin:14px}.m_16{margin:16px}.m_18{margin:18px}.m_20{margin:20px}.m_30{margin:30px}.mt_0{margin-top:0}.mt_2{margin-top:2px}.mt_4{margin-top:4px}.mt_6{margin-top:6px}.mt_8{margin-top:8px}.mt_10{margin-top:10px}.mt_12{margin-top:12px}.mt_14{margin-top:14px}.mt_16{margin-top:16px}.mt_18{margin-top:18px}.mt_20{margin-top:20px}.mt_30{margin-top:30px}.mb_0{margin-bottom:0}.mb_2{margin-bottom:2px}.mb_4{margin-bottom:4px}.mb_6{margin-bottom:6px}.mb_8{margin-bottom:8px}.mb_10{margin-bottom:10px}.mb_12{margin-bottom:12px}.mb_14{margin-bottom:14px}.mb_16{margin-bottom:16px}.mb_18{margin-bottom:18px}.mb_20{margin-bottom:20px}.mb_30{margin-bottom:30px}.ml_0{margin-left:0}.ml_2{margin-left:2px}.ml_4{margin-left:4px}.ml_6{margin-left:6px}.ml_8{margin-left:8px}.ml_10{margin-left:10px}.ml_12{margin-left:12px}.ml_14{margin-left:14px}.ml_16{margin-left:16px}.ml_18{margin-left:18px}.ml_20{margin-left:20px}.ml_30{margin-left:20px}.mr_0{margin-right:0}.mr_2{margin-right:2px}.mr_4{margin-right:4px}.mr_6{margin-right:6px}.mr_8{margin-right:8px}.mr_10{margin-right:10px}.mr_12{margin-right:12px}.mr_14{margin-right:14px}.mr_16{margin-right:16px}.mr_18{margin-right:18px}.mr_20{margin-right:20px}.mr_30{margin-right:30px}.p_0{padding:0}.p_2{padding:2px}.p_4{padding:4px}.p_6{padding:6px}.p_8{padding:8px}.p_10{padding:10px}.p_12{padding:12px}.p_14{padding:14px}.p_16{padding:16px}.p_18{padding:18px}.p_20{padding:20px}.p_30{padding:30px}.pt_0{padding-top:0}.pt_2{padding-top:2px}.pt_4{padding-top:4px}.pt_6{padding-top:6px}.pt_8{padding-top:8px}.pt_10{padding-top:10px}.pt_12{padding-top:12px}.pt_14{padding-top:14px}.pt_16{padding-top:16px}.pt_18{padding-top:18px}.pt_20{padding-top:20px}.pt_30{padding-top:30px}.pb_0{padding-bottom:0}.pb_2{padding-bottom:2px}.pb_4{padding-bottom:4px}.pb_6{padding-bottom:6px}.pb_8{padding-bottom:8px}.pb_10{padding-bottom:10px}.pb_12{padding-bottom:12px}.pb_14{padding-bottom:14px}.pb_16{padding-bottom:16px}.pb_18{padding-bottom:18px}.pb_20{padding-bottom:20px}.pb_30{padding-bottom:30px}.pl_0{padding-left:0}.pl_2{padding-left:2px}.pl_4{padding-left:4px}.pl_6{padding-left:6px}.pl_8{padding-left:8px}.pl_10{padding-left:10px}.pl_12{padding-left:12px}.pl_14{padding-left:14px}.pl_16{padding-left:16px}.pl_18{padding-left:18px}.pl_20{padding-left:20px}.pl_30{padding-left:30px}.pr_0{padding-right:0}.pr_2{padding-right:2px}.pr_4{padding-right:4px}.pr_6{padding-right:6px}.pr_8{padding-right:8px}.pr_10{padding-right:10px}.pr_12{padding-right:12px}.pr_14{padding-right:14px}.pr_16{padding-right:16px}.pr_18{padding-right:18px}.pr_20{padding-right:20px}.pr_30{padding-right:30px}.transparent{color:transparent}.white{color:white}.whitesmoke{color:whitesmoke}.black{color:black}.red{color:#f44336}.orange{color:#ff9800}.yellow{color:#ffd600}.green{color:#4caf50}.cyan{color:#00bcd4}.blue{color:#2196f3}.purple{color:#673ab7}.color_000{color:#000}.color_111{color:#111}.color_222{color:#222}.color_333{color:#333}.color_444{color:#444}.color_555{color:#555}.color_666{color:#666}.color_777{color:#777}.color_888{color:#888}.color_999{color:#999}.color_aaa{color:#aaa}.color_bbb{color:#bbb}.color_ccc{color:#ccc}.color_ddd{color:#ddd}.color_eee{color:#eee}.color_fff{color:#fff}.bg_transparent{background-color:transparent}.bg_white{background-color:white}.bg_whitesmoke{background-color:whitesmoke}.bg_black{background-color:black}.bg_red{background-color:#f44336}.bg_orange{background-color:#ff9800}.bg_yellow{background-color:#ffd600}.bg_green{background-color:#4caf50}.bg_cyan{background-color:#00bcd4}.bg_blue{background-color:#2196f3}.bg_purple{background-color:#673ab7}.bg_color_000{background-color:#000}.bg_color_111{background-color:#111}.bg_color_222{background-color:#222}.bg_color_333{background-color:#333}.bg_color_444{background-color:#444}.bg_color_555{background-color:#555}.bg_color_666{background-color:#666}.bg_color_777{background-color:#777}.bg_color_888{background-color:#888}.bg_color_999{background-color:#999}.bg_color_aaa{background-color:#aaa}.bg_color_bbb{background-color:#bbb}.bg_color_ccc{background-color:#ccc}.bg_color_ddd{background-color:#ddd}.bg_color_eee{background-color:#eee}.bg_color_fff{background-color:#fff}.font_normal{font-weight:normal}.font_bold{font-weight:bold}.font_bolder{font-weight:bolder}.fontsize_8{font-size:8px}.fontsize_10{font-size:12px}.fontsize_12{font-size:12px}.fontsize_13{font-size:13px}.fontsize_14{font-size:14px}.fontsize_15{font-size:14px}.fontsize_16{font-size:16px}.fontsize_18{font-size:18px}.fontsize_20{font-size:20px}.fontsize_24{font-size:24px}.fontsize_32{font-size:32px}.fontsize_64{font-size:72px}.fontsize_128{font-size:128px}.fontfamily_simhei{font-family:simhei}.fontfamily_simsun{font-family:simsun}.fontfamily_nsimsun{font-family:nsimsun}.fontfamily_fangsong{font-family:fangsong}.fontfamily_kaiti{font-family:kaiti}.fontfamily_yahei{font-family:microsoft yahei}.fontfamily_lisu{font-family:lisu}.fontfamily_pingfang{font-family:pingfang sc}.fontfamily_stheiti{font-family:stheiti}.letter_spacing_1{letter-spacing:1px}.letter_spacing_2{letter-spacing:1px}.cursor_point{cursor:pointer}
--------------------------------------------------------------------------------
/src/libs/js/clipboard.js:
--------------------------------------------------------------------------------
1 | function makeError (){
2 | return new DOMException('The request is not allowed', 'NotAllowedError')
3 | }
4 |
5 | async function copyClipboardApi (text){
6 | // Use the Async Clipboard API when available. Requires a secure browsing
7 | // context (i.e. HTTPS)
8 | if (!navigator.clipboard) {
9 | throw makeError()
10 | }
11 | return navigator.clipboard.writeText(text)
12 | }
13 |
14 | async function copyExecCommand (text){
15 | // Put the text to copy into a
16 | const span = document.createElement('span')
17 | span.textContent = text
18 |
19 | // Preserve consecutive spaces and newlines
20 | span.style.whiteSpace = 'pre'
21 | span.style.webkitUserSelect = 'auto'
22 | span.style.userSelect = 'all'
23 |
24 | // Add the to the page
25 | document.body.appendChild(span)
26 |
27 | // Make a selection object representing the range of text selected by the user
28 | const selection = window.getSelection()
29 | const range = window.document.createRange()
30 | selection.removeAllRanges()
31 | range.selectNode(span)
32 | selection.addRange(range)
33 |
34 | // Copy text to the clipboard
35 | let success = false
36 | try {
37 | success = window.document.execCommand('copy')
38 | } finally {
39 | // Cleanup
40 | selection.removeAllRanges()
41 | window.document.body.removeChild(span)
42 | }
43 |
44 | if (!success) throw makeError()
45 | }
46 |
47 | async function clipboardCopy (text){
48 | try {
49 | await copyClipboardApi(text)
50 | } catch (err) {
51 | // ...Otherwise, use document.execCommand() fallback
52 | try {
53 | await copyExecCommand(text)
54 | } catch (err2) {
55 | throw err2 || err || makeError()
56 | }
57 | }
58 | }
59 |
60 | window.clipboardCopy = clipboardCopy
61 |
--------------------------------------------------------------------------------
/src/libs/js/include.js:
--------------------------------------------------------------------------------
1 | var evt = new CustomEvent('included', {
2 | bubbles: true,
3 | cancelable: false
4 | })
5 | ;(function (window, document){
6 | var Include = function (){}
7 | Include.prototype = {
8 | forEach: function (array, callback){
9 | var size = array.length
10 | for (var i = size - 1; i >= 0; i -= 1) {
11 | callback.apply(array[i], [ i ])
12 | }
13 | },
14 | getFilePath: function (){
15 | var curWwwPath = window.document.location.href
16 | var pathName = window.document.location.pathname
17 | var localhostPaht = curWwwPath.substring(0, curWwwPath.indexOf(pathName))
18 | var projectName = pathName.substring(0, pathName.substr(1).lastIndexOf('/') + 1)
19 | return localhostPaht + projectName
20 | },
21 | getFileContent: function (url){
22 | var ie = navigator.userAgent.indexOf('MSIE') > 0
23 | var o = ie ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest()
24 | o.open('get', url, false)
25 | o.send(null)
26 | return o.responseText
27 | },
28 | parseNode: function (content){
29 | var objE = document.createElement('div')
30 | objE.innerHTML = content
31 | return objE.childNodes
32 | },
33 | executeScript: function (content){
34 | var mac = /
9 |
10 |
14 |
15 |
19 |
20 |
21 |
22 |
28 |
29 |
30 |
34 |
35 |
40 |
41 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 | 
20 | PicPic
21 | 
130 |
131 |
137 |
150 |
151 |