@@ -0,0 +1,8 @@ | |||||
{ | |||||
"presets": [ | |||||
"@vue/app" | |||||
], | |||||
"plugins": [ | |||||
"@babel/plugin-syntax-dynamic-import" | |||||
] | |||||
} |
@@ -0,0 +1,9 @@ | |||||
root = true | |||||
[*] | |||||
charset = utf-8 | |||||
indent_style = space | |||||
indent_size = 2 | |||||
end_of_line = lf | |||||
insert_final_newline = true | |||||
trim_trailing_whitespace = true |
@@ -0,0 +1,2 @@ | |||||
routers.js | |||||
dtree.js |
@@ -0,0 +1,15 @@ | |||||
module.exports = { | |||||
root: true, | |||||
'extends': [ | |||||
'plugin:vue/essential', | |||||
'@vue/standard' | |||||
], | |||||
rules: { | |||||
// allow async-await | |||||
'generator-star-spacing': 'off', | |||||
// allow debugger during development | |||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', | |||||
'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }], | |||||
'no-undef': 'off' | |||||
} | |||||
} |
@@ -0,0 +1,24 @@ | |||||
{ | |||||
"root": true, | |||||
"parserOptions": { | |||||
"ecmaFeatures": { | |||||
"experimentalObjectRestSpread": true | |||||
}, | |||||
"ecmaVersion": 6, | |||||
"sourceType": "module" | |||||
}, | |||||
"env": { | |||||
"browser": true, | |||||
"commonjs": true, | |||||
"es6": true | |||||
}, | |||||
"extends": "eslint:recommended", | |||||
"plugins": ["vue"], | |||||
"rules": { | |||||
"indent": ["error", 4, { "SwitchCase": 1 }], | |||||
"quotes": ["error", "single"], | |||||
"semi": ["error", "always"], | |||||
"vue/jsx-uses-vars": 2, | |||||
"no-console": ["error"] | |||||
} | |||||
} |
@@ -0,0 +1,26 @@ | |||||
.DS_Store | |||||
node_modules | |||||
/dist | |||||
/tests/e2e/videos/ | |||||
/tests/e2e/screenshots/ | |||||
# local env files | |||||
.env.local | |||||
.env.*.local | |||||
# Log files | |||||
npm-debug.log* | |||||
yarn-debug.log* | |||||
yarn-error.log* | |||||
# Editor directories and files | |||||
.idea | |||||
.vscode | |||||
*.suo | |||||
*.ntvs* | |||||
*.njsproj | |||||
*.sln | |||||
*.sw* | |||||
build/env.js |
@@ -0,0 +1,5 @@ | |||||
module.exports = { | |||||
plugins: { | |||||
autoprefixer: {} | |||||
} | |||||
} |
@@ -0,0 +1,5 @@ | |||||
language: node_js | |||||
node_js: stable | |||||
script: npm run lint | |||||
notifications: | |||||
email: false |
@@ -0,0 +1,21 @@ | |||||
MIT License | |||||
Copyright (c) 2017 iView | |||||
Permission is hereby granted, free of charge, to any person obtaining a copy | |||||
of this software and associated documentation files (the "Software"), to deal | |||||
in the Software without restriction, including without limitation the rights | |||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | |||||
copies of the Software, and to permit persons to whom the Software is | |||||
furnished to do so, subject to the following conditions: | |||||
The above copyright notice and this permission notice shall be included in all | |||||
copies or substantial portions of the Software. | |||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | |||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | |||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | |||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | |||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | |||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | |||||
SOFTWARE. |
@@ -0,0 +1 @@ | |||||
TODO |
@@ -0,0 +1,3 @@ | |||||
{ | |||||
"pluginsFile": "tests/e2e/plugins/index.js" | |||||
} |
@@ -0,0 +1,73 @@ | |||||
{ | |||||
"name": "iui-admin", | |||||
"version": "2.0.0", | |||||
"author": "meixinbin@qq.com", | |||||
"private": false, | |||||
"scripts": { | |||||
"dev": "vue-cli-service serve --open", | |||||
"build": "vue-cli-service build", | |||||
"test:unit": "vue-cli-service test:unit", | |||||
"test:e2e": "vue-cli-service test:e2e" | |||||
}, | |||||
"dependencies": { | |||||
"@aximario/json-tree": "^2.1.0", | |||||
"@riophae/vue-treeselect": "^0.4.0", | |||||
"axios": "^0.18.0", | |||||
"babel-plugin-import": "^1.10.0", | |||||
"clipboard": "^2.0.4", | |||||
"codemirror": "^5.38.0", | |||||
"core-js": "^2.6.12", | |||||
"countup": "^1.8.2", | |||||
"cropperjs": "^1.2.2", | |||||
"deasync": "^0.1.24", | |||||
"drag-tree-table": "^2.1.0", | |||||
"echarts": "^4.0.4", | |||||
"element-ui": "^2.15.6", | |||||
"html2canvas": "^1.0.0-alpha.12", | |||||
"iview-area": "^1.5.17", | |||||
"js-cookie": "^2.2.0", | |||||
"node-sass": "^4.9.4", | |||||
"pdfjs": "^2.4.1", | |||||
"pdfjs-dist": "^2.2.228", | |||||
"qs": "^6.7.0", | |||||
"sass-loader": "^7.1.0", | |||||
"simplemde": "^1.11.2", | |||||
"sortablejs": "^1.7.0", | |||||
"tiptap": "^1.32.1", | |||||
"tiptap-extensions": "^1.35.1", | |||||
"view-design": "^4.7.0", | |||||
"vue": "^2.5.10", | |||||
"vue-giant-tree": "^0.1.5", | |||||
"vue-i18n": "^7.8.0", | |||||
"vue-infinite-scroll": "^2.0.2", | |||||
"vue-jstree": "^2.1.6", | |||||
"vue-pdf": "^4.1.0", | |||||
"vue-router": "^3.0.1", | |||||
"vue2-toast": "^2.0.2", | |||||
"vuedraggable": "^2.16.0", | |||||
"vuex": "^3.0.1", | |||||
"wangeditor": "^3.1.1", | |||||
"webpack-cli": "^4.9.1", | |||||
"xlsx": "^0.13.3" | |||||
}, | |||||
"devDependencies": { | |||||
"@babel/plugin-syntax-dynamic-import": "^7.0.0-rc.1", | |||||
"@vue/cli-plugin-babel": "^3.0.1", | |||||
"@vue/cli-plugin-unit-mocha": "^3.0.1", | |||||
"@vue/cli-service": "^3.0.1", | |||||
"@vue/test-utils": "^1.0.0-beta.10", | |||||
"babel-preset-es2015": "^6.24.1", | |||||
"chai": "^4.1.2", | |||||
"eslint-plugin-cypress": "^2.0.1", | |||||
"font-awesome": "^4.7.0", | |||||
"less": "^2.7.3", | |||||
"less-loader": "^4.0.5", | |||||
"mockjs": "^1.0.1-beta3", | |||||
"vue-template-compiler": "^2.5.13" | |||||
}, | |||||
"browserslist": [ | |||||
"> 1%", | |||||
"last 2 versions", | |||||
"not ie <= 8" | |||||
] | |||||
} |
@@ -0,0 +1,17 @@ | |||||
<!DOCTYPE html> | |||||
<html> | |||||
<head> | |||||
<meta charset="utf-8"> | |||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||||
<meta name="viewport" content="width=device-width,initial-scale=1.0"> | |||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> | |||||
<title></title> | |||||
</head> | |||||
<body> | |||||
<noscript> | |||||
<strong>We're sorry but iui-admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> | |||||
</noscript> | |||||
<div id="app"></div> | |||||
<!-- built files will be auto injected --> | |||||
</body> | |||||
</html> |
@@ -0,0 +1,28 @@ | |||||
<template> | |||||
<div id="app"> | |||||
<router-view/> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
name: 'App', | |||||
mounted() { | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="less"> | |||||
.size{ | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
html,body{ | |||||
.size; | |||||
margin: 0; | |||||
padding: 0; | |||||
} | |||||
#app { | |||||
.size; | |||||
} | |||||
</style> |
@@ -0,0 +1,830 @@ | |||||
import axios from '@/libs/api.request' | |||||
import qs from "qs"; | |||||
export const createDictionary = (p) => { | |||||
return axios.request({ | |||||
url: 'dictionary/rest', | |||||
method: 'post', | |||||
params:p | |||||
}) | |||||
} | |||||
export const updateDictionary = (p) => { | |||||
return axios.request({ | |||||
url: 'dictionary/rest', | |||||
method: 'put', | |||||
params:p | |||||
}) | |||||
} | |||||
export const deleteDictionary = (id) => { | |||||
return axios.request({ | |||||
url: 'dictionary/rest/'+id, | |||||
method: 'delete' | |||||
}) | |||||
} | |||||
export const listDictionary = (p) => { | |||||
return axios.request({ | |||||
url: 'dictionary/rest', | |||||
method: 'get', | |||||
params: p | |||||
}) | |||||
} | |||||
export const listDictionaryRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'dictionary/rest?list', | |||||
method: 'get', | |||||
params: p | |||||
}) | |||||
} | |||||
export const createClassifyRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'classify/rest/', | |||||
method: 'post', | |||||
params:p | |||||
}) | |||||
} | |||||
export const updateClassifyRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'classify/rest/', | |||||
method: 'put', | |||||
params:p | |||||
}) | |||||
} | |||||
export const deleteClassify = (id) => { | |||||
return axios.request({ | |||||
url: 'classify/rest/'+id, | |||||
method: 'delete' | |||||
}) | |||||
} | |||||
export const classifyDetailRequest = (id) => { | |||||
return axios.request({ | |||||
url: 'classify/rest/'+id, | |||||
method: 'get' | |||||
}) | |||||
} | |||||
export const listClassifyRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'classify/rest?list', | |||||
method: 'get', | |||||
params: p | |||||
}) | |||||
} | |||||
export const listClassifyUsersRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'classify/rest?users', | |||||
method: 'get', | |||||
params: p | |||||
}) | |||||
} | |||||
//=====================applications | |||||
export const createApp = (createApp) => { | |||||
return axios.request({ | |||||
url: 'application/create', | |||||
method: 'post', | |||||
data: JSON.stringify(createApp), | |||||
headers:{ | |||||
'Content-Type': 'application/json;UTF-8' | |||||
} | |||||
}) | |||||
} | |||||
export const updateApplicationRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'application/', | |||||
method: 'put', | |||||
params:p | |||||
}) | |||||
} | |||||
export const applicationList = (req) => { | |||||
return axios.request({ | |||||
url: 'application/list', | |||||
method: 'get', | |||||
params:req | |||||
}) | |||||
} | |||||
export const applicationTemplateList = (req) => { | |||||
return axios.request({ | |||||
url: 'application/template/rest/list', | |||||
method: 'get', | |||||
params:req | |||||
}) | |||||
} | |||||
export const getSchemas = (id) => { | |||||
return axios.request({ | |||||
url: 'application/template/rest/schemas/'+id, | |||||
method: 'get' | |||||
}) | |||||
} | |||||
export const getApplicationAttributes = (id) => { | |||||
return axios.request({ | |||||
url: 'application/?Attributes&applicationId='+id, | |||||
method: 'get' | |||||
}) | |||||
} | |||||
export const deleteApplicationRequest = (id) => { | |||||
return axios.request({ | |||||
url: 'application/'+id, | |||||
method: 'delete' | |||||
}) | |||||
} | |||||
export const applicationBindPsRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'application?BindPs', | |||||
method: 'post', | |||||
params:p | |||||
}) | |||||
} | |||||
export const scimConfigRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'scim/config', | |||||
method: 'get', | |||||
params: p | |||||
}) | |||||
} | |||||
export const listApplicationGrantedOusRequest = (id) => { | |||||
return axios.request({ | |||||
url: 'application?ListApplicationGrantedOus&applicationId='+id, | |||||
method: 'get' | |||||
}) | |||||
} | |||||
export const saveScimConfigRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'scim/config', | |||||
method: 'post', | |||||
params: p | |||||
}) | |||||
} | |||||
export const grantUsersToApplicationRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'application/authorization?GrantUsersToApplication', | |||||
method: 'post', | |||||
params:p | |||||
}) | |||||
} | |||||
export const listApplicationHasUsersRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'application/authorization?ApplicationHasUsers', | |||||
method: 'post', | |||||
params:p | |||||
}) | |||||
} | |||||
export const grantGroupsToApplicationRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'application/authorization?GrantGroupsToApplication', | |||||
method: 'post', | |||||
params:p | |||||
}) | |||||
} | |||||
export const listApplicationHasGroupsRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'application/authorization?ApplicationHasGroups', | |||||
method: 'post', | |||||
params:p | |||||
}) | |||||
} | |||||
export const grantClassifiesToApplicationRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'application/authorization?GrantClassifiesToApplication', | |||||
method: 'post', | |||||
params:p | |||||
}) | |||||
} | |||||
export const listApplicationHasClassifiesRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'application/authorization?ApplicationHasClassifies', | |||||
method: 'post', | |||||
params:p | |||||
}) | |||||
} | |||||
export const listApplicationHasOusRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'application/authorization?ApplicationHasOus', | |||||
method: 'post', | |||||
params:p | |||||
}) | |||||
} | |||||
export const grantOusToApplicationRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'application/authorization?GrantOusToApplication', | |||||
method: 'post', | |||||
params:p | |||||
}) | |||||
} | |||||
export const listUserHasApplicationsRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'application/authorization?UserHasApplications', | |||||
method: 'post', | |||||
params:p | |||||
}) | |||||
} | |||||
export const grantApplicationsToUserRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'application/authorization?GrantApplicationsToUser', | |||||
method: 'post', | |||||
params:p | |||||
}) | |||||
} | |||||
export const grantApplicationsToGroupRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'application/authorization?GrantApplicationsToGroup', | |||||
method: 'post', | |||||
params:p | |||||
}) | |||||
} | |||||
export const grantApplicationsToClassifyRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'application/authorization?GrantApplicationsToClassify', | |||||
method: 'post', | |||||
params:p | |||||
}) | |||||
} | |||||
export const grantApplicationsToOuRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'application/authorization?GrantApplicationsToOu', | |||||
method: 'post', | |||||
params:p | |||||
}) | |||||
} | |||||
export const listGroupHasApplicationsRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'application/authorization?GroupHasApplications', | |||||
method: 'post', | |||||
params:p | |||||
}) | |||||
} | |||||
export const listClassifyHasApplicationsRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'application/authorization?ClassifyHasApplications', | |||||
method: 'post', | |||||
params:p | |||||
}) | |||||
} | |||||
export const listOuHasApplicationsRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'application/authorization?OuHasApplications', | |||||
method: 'post', | |||||
params:p | |||||
}) | |||||
} | |||||
//============================ud | |||||
/*export const listOrgRequest = (externalId) => { | |||||
return axios.request({ | |||||
url: 'organization/list', | |||||
method: 'get', | |||||
params:{ | |||||
externalId:externalId | |||||
} | |||||
}) | |||||
}*/ | |||||
export const listOrgPageRequest = (page) => { | |||||
return axios.request({ | |||||
url: 'organization/list', | |||||
method: 'get', | |||||
params:page | |||||
}) | |||||
} | |||||
export const getOrgRootRequest = () => { | |||||
return axios.request({ | |||||
url: 'organization/root', | |||||
method: 'get' | |||||
}) | |||||
} | |||||
export const getOrgChildrenRequest = (pId) => { | |||||
return axios.request({ | |||||
url: 'organization/children', | |||||
method: 'get', | |||||
params:{ | |||||
id:pId | |||||
} | |||||
}) | |||||
} | |||||
export const createOrgRequest = (data) => { | |||||
return axios.request({ | |||||
url: 'organization/create', | |||||
method: 'post', | |||||
params: data | |||||
}) | |||||
} | |||||
export const updateOrgRequest = (data) => { | |||||
return axios.request({ | |||||
url: 'organization/update', | |||||
method: 'put', | |||||
params: data | |||||
}) | |||||
} | |||||
export const deleteOrgRequest = (id) => { | |||||
return axios.request({ | |||||
url: 'organization/delete', | |||||
method: 'delete', | |||||
params: { | |||||
id: id | |||||
} | |||||
}) | |||||
} | |||||
export const createUserRequest = (data) => { | |||||
return axios.request({ | |||||
url: 'user/create', | |||||
method: 'post', | |||||
params: data | |||||
}) | |||||
} | |||||
export const updateUserRequest = (data) => { | |||||
return axios.request({ | |||||
url: 'user/update', | |||||
method: 'put', | |||||
params: data | |||||
}) | |||||
} | |||||
export const transferUserRequest = (data) => { | |||||
return axios.request({ | |||||
url: 'user/TransferUser', | |||||
method: 'post', | |||||
params: data | |||||
}) | |||||
} | |||||
export const removeUserToRootOURequest = (id) => { | |||||
return axios.request({ | |||||
url: 'user/move_to_root?id='+id, | |||||
method: 'put' | |||||
}) | |||||
} | |||||
export const removeUserRequest = (id) => { | |||||
return axios.request({ | |||||
url: 'user/remove?id='+id, | |||||
method: 'delete' | |||||
}) | |||||
} | |||||
export const deleteUserRequest = (id) => { | |||||
return axios.request({ | |||||
url: 'user/delete?id='+id, | |||||
method: 'delete' | |||||
}) | |||||
} | |||||
export const listUsersRequest = (param) => { | |||||
return axios.request({ | |||||
url: 'user/list', | |||||
method: 'get', | |||||
params: param | |||||
}) | |||||
} | |||||
export const getUserPermissionIdsRequest = (param) => { | |||||
return axios.request({ | |||||
url: 'user/permissions?ids', | |||||
method: 'get', | |||||
params: param | |||||
}) | |||||
} | |||||
export const getGroupPermissionIdsRequest = (param) => { | |||||
return axios.request({ | |||||
url: 'group/permissions?ids', | |||||
method: 'get', | |||||
params: param | |||||
}) | |||||
} | |||||
export const getOuPermissionIdsRequest = (param) => { | |||||
return axios.request({ | |||||
url: 'organization/permissions?ids', | |||||
method: 'get', | |||||
params: param | |||||
}) | |||||
} | |||||
export const getClassifyPermissionIdsRequest = (param) => { | |||||
return axios.request({ | |||||
url: 'classify/rest/permissions?ids', | |||||
method: 'get', | |||||
params: param | |||||
}) | |||||
} | |||||
export const listUsersSumaryRequest = (param) => { | |||||
return axios.request({ | |||||
url: 'user/?sumary', | |||||
method: 'get', | |||||
params: param | |||||
}) | |||||
} | |||||
export const listArchivedUsersRequest = (param) => { | |||||
return axios.request({ | |||||
url: 'user/list_archived', | |||||
method: 'get', | |||||
params: param | |||||
}) | |||||
} | |||||
export const createGroupRequest = (data) => { | |||||
return axios.request({ | |||||
url: 'group/create', | |||||
method: 'post', | |||||
params: data | |||||
}) | |||||
} | |||||
export const updateGroupRequest = (data) => { | |||||
return axios.request({ | |||||
url: 'group/update', | |||||
method: 'put', | |||||
params: data | |||||
}) | |||||
} | |||||
export const deleteGroupRequest = (id) => { | |||||
return axios.request({ | |||||
url: 'group/delete', | |||||
method: 'delete', | |||||
params: id | |||||
}) | |||||
} | |||||
export const listGroupRequest = (data) => { | |||||
return axios.request({ | |||||
url: 'group/list', | |||||
method: 'get', | |||||
params: data | |||||
}) | |||||
} | |||||
export const searchGroupRequest = (data) => { | |||||
return axios.request({ | |||||
url: 'group/search', | |||||
method: 'get', | |||||
params: data | |||||
}) | |||||
} | |||||
//=====================ps actions | |||||
export const psList = (page) => { | |||||
return axios.request({ | |||||
url: 'ps/rest/list', | |||||
method: 'get', | |||||
params: page | |||||
}) | |||||
} | |||||
export const getPsDetailRequest = (id) => { | |||||
return axios.request({ | |||||
url: 'ps/rest/'+id, | |||||
method: 'get' | |||||
}) | |||||
} | |||||
export const addPs = (createPs) => { | |||||
return axios.request({ | |||||
url: 'ps/rest/create', | |||||
method: 'post', | |||||
params: createPs | |||||
}) | |||||
} | |||||
export const updatePsRequest = (createPs) => { | |||||
return axios.request({ | |||||
url: 'ps/rest/update', | |||||
method: 'put', | |||||
params: createPs | |||||
}) | |||||
} | |||||
export const deletePsRequest = (psId) => { | |||||
return axios.request({ | |||||
url: 'ps/rest/delete', | |||||
method: 'delete', | |||||
params: { | |||||
psId: psId | |||||
} | |||||
}) | |||||
} | |||||
export const grantPermissionsToUserRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'ps/rest/user/permissions', | |||||
method: 'post', | |||||
params: p | |||||
}) | |||||
} | |||||
export const listUserPermissionsRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'ps/rest/user/permissions', | |||||
method: 'get', | |||||
params: p | |||||
}) | |||||
} | |||||
export const listGroupPermissionsRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'ps/rest/group/permissions', | |||||
method: 'get', | |||||
params: p | |||||
}) | |||||
} | |||||
export const grantPermissionsToGroupRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'ps/rest/group/permissions', | |||||
method: 'post', | |||||
params: p | |||||
}) | |||||
} | |||||
export const listOuPermissionsRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'ps/rest/ou/permissions', | |||||
method: 'get', | |||||
params: p | |||||
}) | |||||
} | |||||
export const grantPermissionsToOuRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'ps/rest/ou/permissions', | |||||
method: 'post', | |||||
params: p | |||||
}) | |||||
} | |||||
export const listClassifyPermissionsRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'ps/rest/classify/permissions', | |||||
method: 'get', | |||||
params: p | |||||
}) | |||||
} | |||||
export const grantPermissionsToClassifyRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'ps/rest/classify/permissions', | |||||
method: 'post', | |||||
params: p | |||||
}) | |||||
} | |||||
export const grantRolesToUserRequest = (p) => { | |||||
return axios.request({ | |||||
url: '/user/roles', | |||||
method: 'post', | |||||
params: p | |||||
}) | |||||
} | |||||
export const getUserRoles = (p) => { | |||||
return axios.request({ | |||||
url: '/user/roles', | |||||
method: 'get', | |||||
params: p | |||||
}) | |||||
} | |||||
export const getUserHasRoleIds = (p) => { | |||||
return axios.request({ | |||||
url: '/user/has/roles', | |||||
method: 'get', | |||||
params: p | |||||
}) | |||||
} | |||||
export const getGroupHasRoleIds = (p) => { | |||||
return axios.request({ | |||||
url: '/group/has/roles', | |||||
method: 'get', | |||||
params: p | |||||
}) | |||||
} | |||||
export const grantRolesToGroupRequest = (p) => { | |||||
return axios.request({ | |||||
url: '/group/roles', | |||||
method: 'post', | |||||
params: p | |||||
}) | |||||
} | |||||
export const getOuHasRoleIds = (p) => { | |||||
return axios.request({ | |||||
url: '/organization/has/roles', | |||||
method: 'get', | |||||
params: p | |||||
}) | |||||
} | |||||
export const grantRolesToOuRequest = (p) => { | |||||
return axios.request({ | |||||
url: '/organization/roles', | |||||
method: 'post', | |||||
params: p | |||||
}) | |||||
} | |||||
export const getClassifyHasRoleIds = (p) => { | |||||
return axios.request({ | |||||
url: '/classify/rest/has/roles', | |||||
method: 'get', | |||||
params: p | |||||
}) | |||||
} | |||||
export const grantRolesToClassifyRequest = (p) => { | |||||
return axios.request({ | |||||
url: '/classify/rest/roles', | |||||
method: 'post', | |||||
params: p | |||||
}) | |||||
} | |||||
export const grantUsersToPermissionRequest = (p) => { | |||||
return axios.request({ | |||||
url: '/permission/rest/users', | |||||
method: 'post', | |||||
params: p | |||||
}) | |||||
} | |||||
export const getPermissionHasUserIds = (p) => { | |||||
return axios.request({ | |||||
url: '/permission/rest/has/users', | |||||
method: 'post', | |||||
params: p | |||||
}) | |||||
} | |||||
export const grantGroupsToPermissionRequest = (p) => { | |||||
return axios.request({ | |||||
url: '/permission/rest/groups', | |||||
method: 'post', | |||||
params: p | |||||
}) | |||||
} | |||||
export const getPermissionHasGroupIds = (p) => { | |||||
return axios.request({ | |||||
url: '/permission/rest/has/groups', | |||||
method: 'post', | |||||
params: p | |||||
}) | |||||
} | |||||
export const getPermissionHasClassifyIds = (p) => { | |||||
return axios.request({ | |||||
url: '/permission/rest/has/classifies', | |||||
method: 'post', | |||||
params: p | |||||
}) | |||||
} | |||||
export const grantClassifiesToPermissionRequest = (p) => { | |||||
return axios.request({ | |||||
url: '/permission/rest/classifies', | |||||
method: 'post', | |||||
params: p | |||||
}) | |||||
} | |||||
export const grantOusToPermissionRequest = (p) => { | |||||
return axios.request({ | |||||
url: '/permission/rest/ous', | |||||
method: 'post', | |||||
params: p | |||||
}) | |||||
} | |||||
export const getPermissionOus = (p) => { | |||||
return axios.request({ | |||||
url: '/permission/rest/ous', | |||||
method: 'get', | |||||
params: p | |||||
}) | |||||
} | |||||
//==============role actions | |||||
export const getRolePage = (page) => { | |||||
return axios.request({ | |||||
url: 'role/rest/list', | |||||
method: 'get', | |||||
params: page | |||||
}) | |||||
} | |||||
export const createRole = (role) => { | |||||
return axios.request({ | |||||
url: 'role/rest/create', | |||||
method: 'post', | |||||
params: role | |||||
}) | |||||
} | |||||
export const updateRole = (role) => { | |||||
return axios.request({ | |||||
url: 'role/rest/update', | |||||
method: 'put', | |||||
params: role | |||||
}) | |||||
} | |||||
export const enableRole = (psId,roleId) => { | |||||
return axios.request({ | |||||
url: 'role/rest/enable', | |||||
method: 'put', | |||||
params: { | |||||
psId:psId, | |||||
roleId:roleId | |||||
} | |||||
}) | |||||
} | |||||
export const disableRole = (psId,roleId) => { | |||||
return axios.request({ | |||||
url: 'role/rest/disable', | |||||
method: 'put', | |||||
params: { | |||||
psId:psId, | |||||
roleId:roleId | |||||
} | |||||
}) | |||||
} | |||||
export const updateRolePermissions = (data) => { | |||||
return axios.request({ | |||||
url: 'role/rest/grant/permissions', | |||||
method: 'post', | |||||
params: data | |||||
}) | |||||
} | |||||
export const getRolePermissions = (psId,roleId) => { | |||||
return axios.request({ | |||||
url: 'role/rest/granted/permissions', | |||||
method: 'get', | |||||
params: { | |||||
psId:psId, | |||||
roleId:roleId | |||||
} | |||||
}) | |||||
} | |||||
export const getRoleHasUserIds = (p) => { | |||||
return axios.request({ | |||||
url: 'role/rest/has/users', | |||||
method: 'post', | |||||
params: p | |||||
}) | |||||
} | |||||
export const getRoleHasGroupIds = (p) => { | |||||
return axios.request({ | |||||
url: 'role/rest/has/groups', | |||||
method: 'post', | |||||
params: p | |||||
}) | |||||
} | |||||
export const getRoleHasClassifyIds = (p) => { | |||||
return axios.request({ | |||||
url: 'role/rest/has/classifies', | |||||
method: 'post', | |||||
params: p | |||||
}) | |||||
} | |||||
export const getRoleUsersPageRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'role/rest/users', | |||||
method: 'get', | |||||
params: p | |||||
}) | |||||
} | |||||
export const getRoleHasOuIds = (p) => { | |||||
return axios.request({ | |||||
url: 'role/rest/has/ous', | |||||
method: 'post', | |||||
params: p | |||||
}) | |||||
} | |||||
export const grantUsersToRoleRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'role/rest/users', | |||||
method: 'post', | |||||
params: p | |||||
}) | |||||
} | |||||
export const grantOusToRoleRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'role/rest/ous', | |||||
method: 'post', | |||||
params: p | |||||
}) | |||||
} | |||||
export const grantGroupsToRoleRequest = (p) => { | |||||
return axios.request({ | |||||
url: 'role/rest/groups', | |||||
method: 'post', | |||||
params: p | |||||
}) | |||||
} | |||||
export const getRoleOus = (p) => { | |||||
return axios.request({ | |||||
url: '/role/rest/ous', | |||||
method: 'get', | |||||
params: p | |||||
}) | |||||
} | |||||
//================================permission api | |||||
export const getPermissionPage = (page) => { | |||||
return axios.request({ | |||||
url: 'permission/rest/list', | |||||
method: 'get', | |||||
params: page | |||||
}) | |||||
} | |||||
export const listPermissionRequest = (psId) => { | |||||
return axios.request({ | |||||
url: 'permission/rest/list?all', | |||||
method: 'get', | |||||
params: { | |||||
psId:psId | |||||
} | |||||
}) | |||||
} | |||||
export const createPermission = (permission) => { | |||||
return axios.request({ | |||||
url: 'permission/rest/create', | |||||
method: 'post', | |||||
params: permission | |||||
}) | |||||
} | |||||
export const updatePermission = (permission) => { | |||||
return axios.request({ | |||||
url: 'permission/rest/update', | |||||
method: 'put', | |||||
params: permission | |||||
}) | |||||
} | |||||
export const deletePermission = (id) => { | |||||
return axios.request({ | |||||
url: 'permission/rest/delete', | |||||
method: 'delete', | |||||
params:id | |||||
}) | |||||
} | |||||
export const listPsSimpleInfo = () => { | |||||
return axios.request({ | |||||
url: 'ps/rest?ListSimpleInfo', | |||||
method: 'get' | |||||
}) | |||||
} |
@@ -0,0 +1,11 @@ | |||||
import axios from '@/libs/api.request' | |||||
export const getRouterReq = (access) => { | |||||
return axios.request({ | |||||
url: 'get_router', | |||||
params: { | |||||
access | |||||
}, | |||||
method: 'get' | |||||
}) | |||||
} |
@@ -0,0 +1,45 @@ | |||||
import axios from '@/libs/api.request' | |||||
import config from '@/config' | |||||
const ssoServer = process.env.NODE_ENV === 'development' ? config.sso.dev : config.sso.pro | |||||
export const login = ({ userName, password }) => { | |||||
const data = { | |||||
userName, | |||||
password | |||||
} | |||||
return axios.request({ | |||||
url: 'login', | |||||
data, | |||||
method: 'post' | |||||
}) | |||||
} | |||||
export const getUserProfile = (token) => { | |||||
return axios.request({ | |||||
url: ssoServer+'oidc/profile', | |||||
params: { | |||||
access_token: token | |||||
}, | |||||
method: 'get' | |||||
}) | |||||
} | |||||
export const logout = (token) => { | |||||
return axios.request({ | |||||
url: 'logout', | |||||
method: 'post' | |||||
}) | |||||
} | |||||
export const ticketValidate = (ticket) => { | |||||
return axios.request({ | |||||
url: ssoServer + 'serviceValidate', | |||||
params: { | |||||
ticket: ticket, | |||||
service: sessionStorage.getItem('service') | |||||
}, | |||||
method: 'get' | |||||
}) | |||||
} | |||||
@@ -0,0 +1,539 @@ | |||||
/* Logo 字体 */ | |||||
@font-face { | |||||
font-family: "iconfont logo"; | |||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); | |||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), | |||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), | |||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), | |||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); | |||||
} | |||||
.logo { | |||||
font-family: "iconfont logo"; | |||||
font-size: 160px; | |||||
font-style: normal; | |||||
-webkit-font-smoothing: antialiased; | |||||
-moz-osx-font-smoothing: grayscale; | |||||
} | |||||
/* tabs */ | |||||
.nav-tabs { | |||||
position: relative; | |||||
} | |||||
.nav-tabs .nav-more { | |||||
position: absolute; | |||||
right: 0; | |||||
bottom: 0; | |||||
height: 42px; | |||||
line-height: 42px; | |||||
color: #666; | |||||
} | |||||
#tabs { | |||||
border-bottom: 1px solid #eee; | |||||
} | |||||
#tabs li { | |||||
cursor: pointer; | |||||
width: 100px; | |||||
height: 40px; | |||||
line-height: 40px; | |||||
text-align: center; | |||||
font-size: 16px; | |||||
border-bottom: 2px solid transparent; | |||||
position: relative; | |||||
z-index: 1; | |||||
margin-bottom: -1px; | |||||
color: #666; | |||||
} | |||||
#tabs .active { | |||||
border-bottom-color: #f00; | |||||
color: #222; | |||||
} | |||||
.tab-container .content { | |||||
display: none; | |||||
} | |||||
/* 页面布局 */ | |||||
.main { | |||||
padding: 30px 100px; | |||||
width: 960px; | |||||
margin: 0 auto; | |||||
} | |||||
.main .logo { | |||||
color: #333; | |||||
text-align: left; | |||||
margin-bottom: 30px; | |||||
line-height: 1; | |||||
height: 110px; | |||||
margin-top: -50px; | |||||
overflow: hidden; | |||||
*zoom: 1; | |||||
} | |||||
.main .logo a { | |||||
font-size: 160px; | |||||
color: #333; | |||||
} | |||||
.helps { | |||||
margin-top: 40px; | |||||
} | |||||
.helps pre { | |||||
padding: 20px; | |||||
margin: 10px 0; | |||||
border: solid 1px #e7e1cd; | |||||
background-color: #fffdef; | |||||
overflow: auto; | |||||
} | |||||
.icon_lists { | |||||
width: 100% !important; | |||||
overflow: hidden; | |||||
*zoom: 1; | |||||
} | |||||
.icon_lists li { | |||||
width: 100px; | |||||
margin-bottom: 10px; | |||||
margin-right: 20px; | |||||
text-align: center; | |||||
list-style: none !important; | |||||
cursor: default; | |||||
} | |||||
.icon_lists li .code-name { | |||||
line-height: 1.2; | |||||
} | |||||
.icon_lists .icon { | |||||
display: block; | |||||
height: 100px; | |||||
line-height: 100px; | |||||
font-size: 42px; | |||||
margin: 10px auto; | |||||
color: #333; | |||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear; | |||||
-moz-transition: font-size 0.25s linear, width 0.25s linear; | |||||
transition: font-size 0.25s linear, width 0.25s linear; | |||||
} | |||||
.icon_lists .icon:hover { | |||||
font-size: 100px; | |||||
} | |||||
.icon_lists .svg-icon { | |||||
/* 通过设置 font-size 来改变图标大小 */ | |||||
width: 1em; | |||||
/* 图标和文字相邻时,垂直对齐 */ | |||||
vertical-align: -0.15em; | |||||
/* 通过设置 color 来改变 SVG 的颜色/fill */ | |||||
fill: currentColor; | |||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 | |||||
normalize.css 中也包含这行 */ | |||||
overflow: hidden; | |||||
} | |||||
.icon_lists li .name, | |||||
.icon_lists li .code-name { | |||||
color: #666; | |||||
} | |||||
/* markdown 样式 */ | |||||
.markdown { | |||||
color: #666; | |||||
font-size: 14px; | |||||
line-height: 1.8; | |||||
} | |||||
.highlight { | |||||
line-height: 1.5; | |||||
} | |||||
.markdown img { | |||||
vertical-align: middle; | |||||
max-width: 100%; | |||||
} | |||||
.markdown h1 { | |||||
color: #404040; | |||||
font-weight: 500; | |||||
line-height: 40px; | |||||
margin-bottom: 24px; | |||||
} | |||||
.markdown h2, | |||||
.markdown h3, | |||||
.markdown h4, | |||||
.markdown h5, | |||||
.markdown h6 { | |||||
color: #404040; | |||||
margin: 1.6em 0 0.6em 0; | |||||
font-weight: 500; | |||||
clear: both; | |||||
} | |||||
.markdown h1 { | |||||
font-size: 28px; | |||||
} | |||||
.markdown h2 { | |||||
font-size: 22px; | |||||
} | |||||
.markdown h3 { | |||||
font-size: 16px; | |||||
} | |||||
.markdown h4 { | |||||
font-size: 14px; | |||||
} | |||||
.markdown h5 { | |||||
font-size: 12px; | |||||
} | |||||
.markdown h6 { | |||||
font-size: 12px; | |||||
} | |||||
.markdown hr { | |||||
height: 1px; | |||||
border: 0; | |||||
background: #e9e9e9; | |||||
margin: 16px 0; | |||||
clear: both; | |||||
} | |||||
.markdown p { | |||||
margin: 1em 0; | |||||
} | |||||
.markdown>p, | |||||
.markdown>blockquote, | |||||
.markdown>.highlight, | |||||
.markdown>ol, | |||||
.markdown>ul { | |||||
width: 80%; | |||||
} | |||||
.markdown ul>li { | |||||
list-style: circle; | |||||
} | |||||
.markdown>ul li, | |||||
.markdown blockquote ul>li { | |||||
margin-left: 20px; | |||||
padding-left: 4px; | |||||
} | |||||
.markdown>ul li p, | |||||
.markdown>ol li p { | |||||
margin: 0.6em 0; | |||||
} | |||||
.markdown ol>li { | |||||
list-style: decimal; | |||||
} | |||||
.markdown>ol li, | |||||
.markdown blockquote ol>li { | |||||
margin-left: 20px; | |||||
padding-left: 4px; | |||||
} | |||||
.markdown code { | |||||
margin: 0 3px; | |||||
padding: 0 5px; | |||||
background: #eee; | |||||
border-radius: 3px; | |||||
} | |||||
.markdown strong, | |||||
.markdown b { | |||||
font-weight: 600; | |||||
} | |||||
.markdown>table { | |||||
border-collapse: collapse; | |||||
border-spacing: 0px; | |||||
empty-cells: show; | |||||
border: 1px solid #e9e9e9; | |||||
width: 95%; | |||||
margin-bottom: 24px; | |||||
} | |||||
.markdown>table th { | |||||
white-space: nowrap; | |||||
color: #333; | |||||
font-weight: 600; | |||||
} | |||||
.markdown>table th, | |||||
.markdown>table td { | |||||
border: 1px solid #e9e9e9; | |||||
padding: 8px 16px; | |||||
text-align: left; | |||||
} | |||||
.markdown>table th { | |||||
background: #F7F7F7; | |||||
} | |||||
.markdown blockquote { | |||||
font-size: 90%; | |||||
color: #999; | |||||
border-left: 4px solid #e9e9e9; | |||||
padding-left: 0.8em; | |||||
margin: 1em 0; | |||||
} | |||||
.markdown blockquote p { | |||||
margin: 0; | |||||
} | |||||
.markdown .anchor { | |||||
opacity: 0; | |||||
transition: opacity 0.3s ease; | |||||
margin-left: 8px; | |||||
} | |||||
.markdown .waiting { | |||||
color: #ccc; | |||||
} | |||||
.markdown h1:hover .anchor, | |||||
.markdown h2:hover .anchor, | |||||
.markdown h3:hover .anchor, | |||||
.markdown h4:hover .anchor, | |||||
.markdown h5:hover .anchor, | |||||
.markdown h6:hover .anchor { | |||||
opacity: 1; | |||||
display: inline-block; | |||||
} | |||||
.markdown>br, | |||||
.markdown>p>br { | |||||
clear: both; | |||||
} | |||||
.hljs { | |||||
display: block; | |||||
background: white; | |||||
padding: 0.5em; | |||||
color: #333333; | |||||
overflow-x: auto; | |||||
} | |||||
.hljs-comment, | |||||
.hljs-meta { | |||||
color: #969896; | |||||
} | |||||
.hljs-string, | |||||
.hljs-variable, | |||||
.hljs-template-variable, | |||||
.hljs-strong, | |||||
.hljs-emphasis, | |||||
.hljs-quote { | |||||
color: #df5000; | |||||
} | |||||
.hljs-keyword, | |||||
.hljs-selector-tag, | |||||
.hljs-type { | |||||
color: #a71d5d; | |||||
} | |||||
.hljs-literal, | |||||
.hljs-symbol, | |||||
.hljs-bullet, | |||||
.hljs-attribute { | |||||
color: #0086b3; | |||||
} | |||||
.hljs-section, | |||||
.hljs-name { | |||||
color: #63a35c; | |||||
} | |||||
.hljs-tag { | |||||
color: #333333; | |||||
} | |||||
.hljs-title, | |||||
.hljs-attr, | |||||
.hljs-selector-id, | |||||
.hljs-selector-class, | |||||
.hljs-selector-attr, | |||||
.hljs-selector-pseudo { | |||||
color: #795da3; | |||||
} | |||||
.hljs-addition { | |||||
color: #55a532; | |||||
background-color: #eaffea; | |||||
} | |||||
.hljs-deletion { | |||||
color: #bd2c00; | |||||
background-color: #ffecec; | |||||
} | |||||
.hljs-link { | |||||
text-decoration: underline; | |||||
} | |||||
/* 代码高亮 */ | |||||
/* PrismJS 1.15.0 | |||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ | |||||
/** | |||||
* prism.js default theme for JavaScript, CSS and HTML | |||||
* Based on dabblet (http://dabblet.com) | |||||
* @author Lea Verou | |||||
*/ | |||||
code[class*="language-"], | |||||
pre[class*="language-"] { | |||||
color: black; | |||||
background: none; | |||||
text-shadow: 0 1px white; | |||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; | |||||
text-align: left; | |||||
white-space: pre; | |||||
word-spacing: normal; | |||||
word-break: normal; | |||||
word-wrap: normal; | |||||
line-height: 1.5; | |||||
-moz-tab-size: 4; | |||||
-o-tab-size: 4; | |||||
tab-size: 4; | |||||
-webkit-hyphens: none; | |||||
-moz-hyphens: none; | |||||
-ms-hyphens: none; | |||||
hyphens: none; | |||||
} | |||||
pre[class*="language-"]::-moz-selection, | |||||
pre[class*="language-"] ::-moz-selection, | |||||
code[class*="language-"]::-moz-selection, | |||||
code[class*="language-"] ::-moz-selection { | |||||
text-shadow: none; | |||||
background: #b3d4fc; | |||||
} | |||||
pre[class*="language-"]::selection, | |||||
pre[class*="language-"] ::selection, | |||||
code[class*="language-"]::selection, | |||||
code[class*="language-"] ::selection { | |||||
text-shadow: none; | |||||
background: #b3d4fc; | |||||
} | |||||
@media print { | |||||
code[class*="language-"], | |||||
pre[class*="language-"] { | |||||
text-shadow: none; | |||||
} | |||||
} | |||||
/* Code blocks */ | |||||
pre[class*="language-"] { | |||||
padding: 1em; | |||||
margin: .5em 0; | |||||
overflow: auto; | |||||
} | |||||
:not(pre)>code[class*="language-"], | |||||
pre[class*="language-"] { | |||||
background: #f5f2f0; | |||||
} | |||||
/* Inline code */ | |||||
:not(pre)>code[class*="language-"] { | |||||
padding: .1em; | |||||
border-radius: .3em; | |||||
white-space: normal; | |||||
} | |||||
.token.comment, | |||||
.token.prolog, | |||||
.token.doctype, | |||||
.token.cdata { | |||||
color: slategray; | |||||
} | |||||
.token.punctuation { | |||||
color: #999; | |||||
} | |||||
.namespace { | |||||
opacity: .7; | |||||
} | |||||
.token.property, | |||||
.token.tag, | |||||
.token.boolean, | |||||
.token.number, | |||||
.token.constant, | |||||
.token.symbol, | |||||
.token.deleted { | |||||
color: #905; | |||||
} | |||||
.token.selector, | |||||
.token.attr-name, | |||||
.token.string, | |||||
.token.char, | |||||
.token.builtin, | |||||
.token.inserted { | |||||
color: #690; | |||||
} | |||||
.token.operator, | |||||
.token.entity, | |||||
.token.url, | |||||
.language-css .token.string, | |||||
.style .token.string { | |||||
color: #9a6e3a; | |||||
background: hsla(0, 0%, 100%, .5); | |||||
} | |||||
.token.atrule, | |||||
.token.attr-value, | |||||
.token.keyword { | |||||
color: #07a; | |||||
} | |||||
.token.function, | |||||
.token.class-name { | |||||
color: #DD4A68; | |||||
} | |||||
.token.regex, | |||||
.token.important, | |||||
.token.variable { | |||||
color: #e90; | |||||
} | |||||
.token.important, | |||||
.token.bold { | |||||
font-weight: bold; | |||||
} | |||||
.token.italic { | |||||
font-style: italic; | |||||
} | |||||
.token.entity { | |||||
cursor: help; | |||||
} |
@@ -0,0 +1,791 @@ | |||||
<!DOCTYPE html> | |||||
<html> | |||||
<head> | |||||
<meta charset="utf-8"/> | |||||
<title>IconFont Demo</title> | |||||
<link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/> | |||||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"> | |||||
<link rel="stylesheet" href="demo.css"> | |||||
<link rel="stylesheet" href="iconfont.css"> | |||||
<script src="iconfont.js"></script> | |||||
<!-- jQuery --> | |||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script> | |||||
<!-- 代码高亮 --> | |||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script> | |||||
</head> | |||||
<body> | |||||
<div class="main"> | |||||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"></a></h1> | |||||
<div class="nav-tabs"> | |||||
<ul id="tabs" class="dib-box"> | |||||
<li class="dib active"><span>Unicode</span></li> | |||||
<li class="dib"><span>Font class</span></li> | |||||
<li class="dib"><span>Symbol</span></li> | |||||
</ul> | |||||
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2370704" target="_blank" class="nav-more">查看项目</a> | |||||
</div> | |||||
<div class="tab-container"> | |||||
<div class="content unicode" style="display: block;"> | |||||
<ul class="icon_lists dib-box"> | |||||
<li class="dib"> | |||||
<span class="icon iconfont"></span> | |||||
<div class="name">add_col_after</div> | |||||
<div class="code-name">&#xe601;</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont"></span> | |||||
<div class="name">add_row_after</div> | |||||
<div class="code-name">&#xe602;</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont"></span> | |||||
<div class="name">code</div> | |||||
<div class="code-name">&#xe603;</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont"></span> | |||||
<div class="name">delete_row</div> | |||||
<div class="code-name">&#xe604;</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont"></span> | |||||
<div class="name">delete_col</div> | |||||
<div class="code-name">&#xe605;</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont"></span> | |||||
<div class="name">add_row_before</div> | |||||
<div class="code-name">&#xe606;</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont"></span> | |||||
<div class="name">hr</div> | |||||
<div class="code-name">&#xe607;</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont"></span> | |||||
<div class="name">delete_table</div> | |||||
<div class="code-name">&#xe608;</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont"></span> | |||||
<div class="name">italic</div> | |||||
<div class="code-name">&#xe609;</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont"></span> | |||||
<div class="name">add_col_before</div> | |||||
<div class="code-name">&#xe60a;</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont"></span> | |||||
<div class="name">bold</div> | |||||
<div class="code-name">&#xe60b;</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont"></span> | |||||
<div class="name">paragraph</div> | |||||
<div class="code-name">&#xe60c;</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont"></span> | |||||
<div class="name">quote</div> | |||||
<div class="code-name">&#xe60d;</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont"></span> | |||||
<div class="name">mention</div> | |||||
<div class="code-name">&#xe60e;</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont"></span> | |||||
<div class="name">combine_cells</div> | |||||
<div class="code-name">&#xe60f;</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont"></span> | |||||
<div class="name">checklist</div> | |||||
<div class="code-name">&#xe610;</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont"></span> | |||||
<div class="name">ol</div> | |||||
<div class="code-name">&#xe611;</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont"></span> | |||||
<div class="name">strike</div> | |||||
<div class="code-name">&#xe612;</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont"></span> | |||||
<div class="name">image</div> | |||||
<div class="code-name">&#xe613;</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont"></span> | |||||
<div class="name">github</div> | |||||
<div class="code-name">&#xe614;</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont"></span> | |||||
<div class="name">undo</div> | |||||
<div class="code-name">&#xe615;</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont"></span> | |||||
<div class="name">underline</div> | |||||
<div class="code-name">&#xe616;</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont"></span> | |||||
<div class="name">table</div> | |||||
<div class="code-name">&#xe617;</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont"></span> | |||||
<div class="name">ul</div> | |||||
<div class="code-name">&#xe618;</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont"></span> | |||||
<div class="name">link</div> | |||||
<div class="code-name">&#xe619;</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont"></span> | |||||
<div class="name">redo</div> | |||||
<div class="code-name">&#xe61a;</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont"></span> | |||||
<div class="name">remove</div> | |||||
<div class="code-name">&#xe61b;</div> | |||||
</li> | |||||
</ul> | |||||
<div class="article markdown"> | |||||
<h2 id="unicode-">Unicode 引用</h2> | |||||
<hr> | |||||
<p>Unicode 是字体在网页端最原始的应用方式,特点是:</p> | |||||
<ul> | |||||
<li>兼容性最好,支持 IE6+,及所有现代浏览器。</li> | |||||
<li>支持按字体的方式去动态调整图标大小,颜色等等。</li> | |||||
<li>但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。</li> | |||||
</ul> | |||||
<blockquote> | |||||
<p>注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式</p> | |||||
</blockquote> | |||||
<p>Unicode 使用步骤如下:</p> | |||||
<h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3> | |||||
<pre><code class="language-css" | |||||
>@font-face { | |||||
font-family: 'iconfont'; | |||||
src: url('iconfont.eot'); | |||||
src: url('iconfont.eot?#iefix') format('embedded-opentype'), | |||||
url('iconfont.woff2') format('woff2'), | |||||
url('iconfont.woff') format('woff'), | |||||
url('iconfont.ttf') format('truetype'), | |||||
url('iconfont.svg#iconfont') format('svg'); | |||||
} | |||||
</code></pre> | |||||
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3> | |||||
<pre><code class="language-css" | |||||
>.iconfont { | |||||
font-family: "iconfont" !important; | |||||
font-size: 16px; | |||||
font-style: normal; | |||||
-webkit-font-smoothing: antialiased; | |||||
-moz-osx-font-smoothing: grayscale; | |||||
} | |||||
</code></pre> | |||||
<h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3> | |||||
<pre> | |||||
<code class="language-html" | |||||
><span class="iconfont">&#x33;</span> | |||||
</code></pre> | |||||
<blockquote> | |||||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p> | |||||
</blockquote> | |||||
</div> | |||||
</div> | |||||
<div class="content font-class"> | |||||
<ul class="icon_lists dib-box"> | |||||
<li class="dib"> | |||||
<span class="icon iconfont icon_add_col_after"></span> | |||||
<div class="name"> | |||||
add_col_after | |||||
</div> | |||||
<div class="code-name">.icon_add_col_after | |||||
</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont icon_add_row_after"></span> | |||||
<div class="name"> | |||||
add_row_after | |||||
</div> | |||||
<div class="code-name">.icon_add_row_after | |||||
</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont icon_code"></span> | |||||
<div class="name"> | |||||
code | |||||
</div> | |||||
<div class="code-name">.icon_code | |||||
</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont icon_delete_row"></span> | |||||
<div class="name"> | |||||
delete_row | |||||
</div> | |||||
<div class="code-name">.icon_delete_row | |||||
</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont icon_delete_col"></span> | |||||
<div class="name"> | |||||
delete_col | |||||
</div> | |||||
<div class="code-name">.icon_delete_col | |||||
</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont icon_add_row_before"></span> | |||||
<div class="name"> | |||||
add_row_before | |||||
</div> | |||||
<div class="code-name">.icon_add_row_before | |||||
</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont icon_hr"></span> | |||||
<div class="name"> | |||||
hr | |||||
</div> | |||||
<div class="code-name">.icon_hr | |||||
</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont icon_delete_table"></span> | |||||
<div class="name"> | |||||
delete_table | |||||
</div> | |||||
<div class="code-name">.icon_delete_table | |||||
</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont icon_italic"></span> | |||||
<div class="name"> | |||||
italic | |||||
</div> | |||||
<div class="code-name">.icon_italic | |||||
</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont icon_add_col_before"></span> | |||||
<div class="name"> | |||||
add_col_before | |||||
</div> | |||||
<div class="code-name">.icon_add_col_before | |||||
</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont icon_bold"></span> | |||||
<div class="name"> | |||||
bold | |||||
</div> | |||||
<div class="code-name">.icon_bold | |||||
</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont icon_paragraph"></span> | |||||
<div class="name"> | |||||
paragraph | |||||
</div> | |||||
<div class="code-name">.icon_paragraph | |||||
</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont icon_quote"></span> | |||||
<div class="name"> | |||||
quote | |||||
</div> | |||||
<div class="code-name">.icon_quote | |||||
</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont icon_mention"></span> | |||||
<div class="name"> | |||||
mention | |||||
</div> | |||||
<div class="code-name">.icon_mention | |||||
</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont icon_combine_cells"></span> | |||||
<div class="name"> | |||||
combine_cells | |||||
</div> | |||||
<div class="code-name">.icon_combine_cells | |||||
</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont icon_checklist"></span> | |||||
<div class="name"> | |||||
checklist | |||||
</div> | |||||
<div class="code-name">.icon_checklist | |||||
</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont icon_ol"></span> | |||||
<div class="name"> | |||||
ol | |||||
</div> | |||||
<div class="code-name">.icon_ol | |||||
</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont icon_strike"></span> | |||||
<div class="name"> | |||||
strike | |||||
</div> | |||||
<div class="code-name">.icon_strike | |||||
</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont icon_image"></span> | |||||
<div class="name"> | |||||
image | |||||
</div> | |||||
<div class="code-name">.icon_image | |||||
</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont icon_github"></span> | |||||
<div class="name"> | |||||
github | |||||
</div> | |||||
<div class="code-name">.icon_github | |||||
</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont icon_undo"></span> | |||||
<div class="name"> | |||||
undo | |||||
</div> | |||||
<div class="code-name">.icon_undo | |||||
</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont icon_underline"></span> | |||||
<div class="name"> | |||||
underline | |||||
</div> | |||||
<div class="code-name">.icon_underline | |||||
</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont icon_table"></span> | |||||
<div class="name"> | |||||
table | |||||
</div> | |||||
<div class="code-name">.icon_table | |||||
</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont icon_ul"></span> | |||||
<div class="name"> | |||||
ul | |||||
</div> | |||||
<div class="code-name">.icon_ul | |||||
</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont icon_link"></span> | |||||
<div class="name"> | |||||
link | |||||
</div> | |||||
<div class="code-name">.icon_link | |||||
</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont icon_redo"></span> | |||||
<div class="name"> | |||||
redo | |||||
</div> | |||||
<div class="code-name">.icon_redo | |||||
</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<span class="icon iconfont icon_remove"></span> | |||||
<div class="name"> | |||||
remove | |||||
</div> | |||||
<div class="code-name">.icon_remove | |||||
</div> | |||||
</li> | |||||
</ul> | |||||
<div class="article markdown"> | |||||
<h2 id="font-class-">font-class 引用</h2> | |||||
<hr> | |||||
<p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p> | |||||
<p>与 Unicode 使用方式相比,具有如下特点:</p> | |||||
<ul> | |||||
<li>兼容性良好,支持 IE8+,及所有现代浏览器。</li> | |||||
<li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li> | |||||
<li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li> | |||||
<li>不过因为本质上还是使用的字体,所以多色图标还是不支持的。</li> | |||||
</ul> | |||||
<p>使用步骤如下:</p> | |||||
<h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3> | |||||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css"> | |||||
</code></pre> | |||||
<h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3> | |||||
<pre><code class="language-html"><span class="iconfont icon_xxx"></span> | |||||
</code></pre> | |||||
<blockquote> | |||||
<p>" | |||||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p> | |||||
</blockquote> | |||||
</div> | |||||
</div> | |||||
<div class="content symbol"> | |||||
<ul class="icon_lists dib-box"> | |||||
<li class="dib"> | |||||
<svg class="icon svg-icon" aria-hidden="true"> | |||||
<use xlink:href="#icon_add_col_after"></use> | |||||
</svg> | |||||
<div class="name">add_col_after</div> | |||||
<div class="code-name">#icon_add_col_after</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<svg class="icon svg-icon" aria-hidden="true"> | |||||
<use xlink:href="#icon_add_row_after"></use> | |||||
</svg> | |||||
<div class="name">add_row_after</div> | |||||
<div class="code-name">#icon_add_row_after</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<svg class="icon svg-icon" aria-hidden="true"> | |||||
<use xlink:href="#icon_code"></use> | |||||
</svg> | |||||
<div class="name">code</div> | |||||
<div class="code-name">#icon_code</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<svg class="icon svg-icon" aria-hidden="true"> | |||||
<use xlink:href="#icon_delete_row"></use> | |||||
</svg> | |||||
<div class="name">delete_row</div> | |||||
<div class="code-name">#icon_delete_row</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<svg class="icon svg-icon" aria-hidden="true"> | |||||
<use xlink:href="#icon_delete_col"></use> | |||||
</svg> | |||||
<div class="name">delete_col</div> | |||||
<div class="code-name">#icon_delete_col</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<svg class="icon svg-icon" aria-hidden="true"> | |||||
<use xlink:href="#icon_add_row_before"></use> | |||||
</svg> | |||||
<div class="name">add_row_before</div> | |||||
<div class="code-name">#icon_add_row_before</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<svg class="icon svg-icon" aria-hidden="true"> | |||||
<use xlink:href="#icon_hr"></use> | |||||
</svg> | |||||
<div class="name">hr</div> | |||||
<div class="code-name">#icon_hr</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<svg class="icon svg-icon" aria-hidden="true"> | |||||
<use xlink:href="#icon_delete_table"></use> | |||||
</svg> | |||||
<div class="name">delete_table</div> | |||||
<div class="code-name">#icon_delete_table</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<svg class="icon svg-icon" aria-hidden="true"> | |||||
<use xlink:href="#icon_italic"></use> | |||||
</svg> | |||||
<div class="name">italic</div> | |||||
<div class="code-name">#icon_italic</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<svg class="icon svg-icon" aria-hidden="true"> | |||||
<use xlink:href="#icon_add_col_before"></use> | |||||
</svg> | |||||
<div class="name">add_col_before</div> | |||||
<div class="code-name">#icon_add_col_before</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<svg class="icon svg-icon" aria-hidden="true"> | |||||
<use xlink:href="#icon_bold"></use> | |||||
</svg> | |||||
<div class="name">bold</div> | |||||
<div class="code-name">#icon_bold</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<svg class="icon svg-icon" aria-hidden="true"> | |||||
<use xlink:href="#icon_paragraph"></use> | |||||
</svg> | |||||
<div class="name">paragraph</div> | |||||
<div class="code-name">#icon_paragraph</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<svg class="icon svg-icon" aria-hidden="true"> | |||||
<use xlink:href="#icon_quote"></use> | |||||
</svg> | |||||
<div class="name">quote</div> | |||||
<div class="code-name">#icon_quote</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<svg class="icon svg-icon" aria-hidden="true"> | |||||
<use xlink:href="#icon_mention"></use> | |||||
</svg> | |||||
<div class="name">mention</div> | |||||
<div class="code-name">#icon_mention</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<svg class="icon svg-icon" aria-hidden="true"> | |||||
<use xlink:href="#icon_combine_cells"></use> | |||||
</svg> | |||||
<div class="name">combine_cells</div> | |||||
<div class="code-name">#icon_combine_cells</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<svg class="icon svg-icon" aria-hidden="true"> | |||||
<use xlink:href="#icon_checklist"></use> | |||||
</svg> | |||||
<div class="name">checklist</div> | |||||
<div class="code-name">#icon_checklist</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<svg class="icon svg-icon" aria-hidden="true"> | |||||
<use xlink:href="#icon_ol"></use> | |||||
</svg> | |||||
<div class="name">ol</div> | |||||
<div class="code-name">#icon_ol</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<svg class="icon svg-icon" aria-hidden="true"> | |||||
<use xlink:href="#icon_strike"></use> | |||||
</svg> | |||||
<div class="name">strike</div> | |||||
<div class="code-name">#icon_strike</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<svg class="icon svg-icon" aria-hidden="true"> | |||||
<use xlink:href="#icon_image"></use> | |||||
</svg> | |||||
<div class="name">image</div> | |||||
<div class="code-name">#icon_image</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<svg class="icon svg-icon" aria-hidden="true"> | |||||
<use xlink:href="#icon_github"></use> | |||||
</svg> | |||||
<div class="name">github</div> | |||||
<div class="code-name">#icon_github</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<svg class="icon svg-icon" aria-hidden="true"> | |||||
<use xlink:href="#icon_undo"></use> | |||||
</svg> | |||||
<div class="name">undo</div> | |||||
<div class="code-name">#icon_undo</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<svg class="icon svg-icon" aria-hidden="true"> | |||||
<use xlink:href="#icon_underline"></use> | |||||
</svg> | |||||
<div class="name">underline</div> | |||||
<div class="code-name">#icon_underline</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<svg class="icon svg-icon" aria-hidden="true"> | |||||
<use xlink:href="#icon_table"></use> | |||||
</svg> | |||||
<div class="name">table</div> | |||||
<div class="code-name">#icon_table</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<svg class="icon svg-icon" aria-hidden="true"> | |||||
<use xlink:href="#icon_ul"></use> | |||||
</svg> | |||||
<div class="name">ul</div> | |||||
<div class="code-name">#icon_ul</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<svg class="icon svg-icon" aria-hidden="true"> | |||||
<use xlink:href="#icon_link"></use> | |||||
</svg> | |||||
<div class="name">link</div> | |||||
<div class="code-name">#icon_link</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<svg class="icon svg-icon" aria-hidden="true"> | |||||
<use xlink:href="#icon_redo"></use> | |||||
</svg> | |||||
<div class="name">redo</div> | |||||
<div class="code-name">#icon_redo</div> | |||||
</li> | |||||
<li class="dib"> | |||||
<svg class="icon svg-icon" aria-hidden="true"> | |||||
<use xlink:href="#icon_remove"></use> | |||||
</svg> | |||||
<div class="name">remove</div> | |||||
<div class="code-name">#icon_remove</div> | |||||
</li> | |||||
</ul> | |||||
<div class="article markdown"> | |||||
<h2 id="symbol-">Symbol 引用</h2> | |||||
<hr> | |||||
<p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> | |||||
这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p> | |||||
<ul> | |||||
<li>支持多色图标了,不再受单色限制。</li> | |||||
<li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li> | |||||
<li>兼容性较差,支持 IE9+,及现代浏览器。</li> | |||||
<li>浏览器渲染 SVG 的性能一般,还不如 png。</li> | |||||
</ul> | |||||
<p>使用步骤如下:</p> | |||||
<h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3> | |||||
<pre><code class="language-html"><script src="./iconfont.js"></script> | |||||
</code></pre> | |||||
<h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3> | |||||
<pre><code class="language-html"><style> | |||||
.icon { | |||||
width: 1em; | |||||
height: 1em; | |||||
vertical-align: -0.15em; | |||||
fill: currentColor; | |||||
overflow: hidden; | |||||
} | |||||
</style> | |||||
</code></pre> | |||||
<h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3> | |||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true"> | |||||
<use xlink:href="#icon-xxx"></use> | |||||
</svg> | |||||
</code></pre> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<script> | |||||
$(document).ready(function () { | |||||
$('.tab-container .content:first').show() | |||||
$('#tabs li').click(function (e) { | |||||
var tabContent = $('.tab-container .content') | |||||
var index = $(this).index() | |||||
if ($(this).hasClass('active')) { | |||||
return | |||||
} else { | |||||
$('#tabs li').removeClass('active') | |||||
$(this).addClass('active') | |||||
tabContent.hide().eq(index).fadeIn() | |||||
} | |||||
}) | |||||
}) | |||||
</script> | |||||
</body> | |||||
</html> |
@@ -0,0 +1,198 @@ | |||||
{ | |||||
"id": "2370704", | |||||
"name": "editor", | |||||
"font_family": "iconfont", | |||||
"css_prefix_text": "icon_", | |||||
"description": "", | |||||
"glyphs": [ | |||||
{ | |||||
"icon_id": "19895562", | |||||
"name": "add_col_after", | |||||
"font_class": "add_col_after", | |||||
"unicode": "e601", | |||||
"unicode_decimal": 58881 | |||||
}, | |||||
{ | |||||
"icon_id": "19895563", | |||||
"name": "add_row_after", | |||||
"font_class": "add_row_after", | |||||
"unicode": "e602", | |||||
"unicode_decimal": 58882 | |||||
}, | |||||
{ | |||||
"icon_id": "19895564", | |||||
"name": "code", | |||||
"font_class": "code", | |||||
"unicode": "e603", | |||||
"unicode_decimal": 58883 | |||||
}, | |||||
{ | |||||
"icon_id": "19895565", | |||||
"name": "delete_row", | |||||
"font_class": "delete_row", | |||||
"unicode": "e604", | |||||
"unicode_decimal": 58884 | |||||
}, | |||||
{ | |||||
"icon_id": "19895566", | |||||
"name": "delete_col", | |||||
"font_class": "delete_col", | |||||
"unicode": "e605", | |||||
"unicode_decimal": 58885 | |||||
}, | |||||
{ | |||||
"icon_id": "19895567", | |||||
"name": "add_row_before", | |||||
"font_class": "add_row_before", | |||||
"unicode": "e606", | |||||
"unicode_decimal": 58886 | |||||
}, | |||||
{ | |||||
"icon_id": "19895568", | |||||
"name": "hr", | |||||
"font_class": "hr", | |||||
"unicode": "e607", | |||||
"unicode_decimal": 58887 | |||||
}, | |||||
{ | |||||
"icon_id": "19895569", | |||||
"name": "delete_table", | |||||
"font_class": "delete_table", | |||||
"unicode": "e608", | |||||
"unicode_decimal": 58888 | |||||
}, | |||||
{ | |||||
"icon_id": "19895570", | |||||
"name": "italic", | |||||
"font_class": "italic", | |||||
"unicode": "e609", | |||||
"unicode_decimal": 58889 | |||||
}, | |||||
{ | |||||
"icon_id": "19895571", | |||||
"name": "add_col_before", | |||||
"font_class": "add_col_before", | |||||
"unicode": "e60a", | |||||
"unicode_decimal": 58890 | |||||
}, | |||||
{ | |||||
"icon_id": "19895572", | |||||
"name": "bold", | |||||
"font_class": "bold", | |||||
"unicode": "e60b", | |||||
"unicode_decimal": 58891 | |||||
}, | |||||
{ | |||||
"icon_id": "19895573", | |||||
"name": "paragraph", | |||||
"font_class": "paragraph", | |||||
"unicode": "e60c", | |||||
"unicode_decimal": 58892 | |||||
}, | |||||
{ | |||||
"icon_id": "19895574", | |||||
"name": "quote", | |||||
"font_class": "quote", | |||||
"unicode": "e60d", | |||||
"unicode_decimal": 58893 | |||||
}, | |||||
{ | |||||
"icon_id": "19895575", | |||||
"name": "mention", | |||||
"font_class": "mention", | |||||
"unicode": "e60e", | |||||
"unicode_decimal": 58894 | |||||
}, | |||||
{ | |||||
"icon_id": "19895576", | |||||
"name": "combine_cells", | |||||
"font_class": "combine_cells", | |||||
"unicode": "e60f", | |||||
"unicode_decimal": 58895 | |||||
}, | |||||
{ | |||||
"icon_id": "19895577", | |||||
"name": "checklist", | |||||
"font_class": "checklist", | |||||
"unicode": "e610", | |||||
"unicode_decimal": 58896 | |||||
}, | |||||
{ | |||||
"icon_id": "19895578", | |||||
"name": "ol", | |||||
"font_class": "ol", | |||||
"unicode": "e611", | |||||
"unicode_decimal": 58897 | |||||
}, | |||||
{ | |||||
"icon_id": "19895579", | |||||
"name": "strike", | |||||
"font_class": "strike", | |||||
"unicode": "e612", | |||||
"unicode_decimal": 58898 | |||||
}, | |||||
{ | |||||
"icon_id": "19895580", | |||||
"name": "image", | |||||
"font_class": "image", | |||||
"unicode": "e613", | |||||
"unicode_decimal": 58899 | |||||
}, | |||||
{ | |||||
"icon_id": "19895581", | |||||
"name": "github", | |||||
"font_class": "github", | |||||
"unicode": "e614", | |||||
"unicode_decimal": 58900 | |||||
}, | |||||
{ | |||||
"icon_id": "19895582", | |||||
"name": "undo", | |||||
"font_class": "undo", | |||||
"unicode": "e615", | |||||
"unicode_decimal": 58901 | |||||
}, | |||||
{ | |||||
"icon_id": "19895583", | |||||
"name": "underline", | |||||
"font_class": "underline", | |||||
"unicode": "e616", | |||||
"unicode_decimal": 58902 | |||||
}, | |||||
{ | |||||
"icon_id": "19895584", | |||||
"name": "table", | |||||
"font_class": "table", | |||||
"unicode": "e617", | |||||
"unicode_decimal": 58903 | |||||
}, | |||||
{ | |||||
"icon_id": "19895585", | |||||
"name": "ul", | |||||
"font_class": "ul", | |||||
"unicode": "e618", | |||||
"unicode_decimal": 58904 | |||||
}, | |||||
{ | |||||
"icon_id": "19895586", | |||||
"name": "link", | |||||
"font_class": "link", | |||||
"unicode": "e619", | |||||
"unicode_decimal": 58905 | |||||
}, | |||||
{ | |||||
"icon_id": "19895587", | |||||
"name": "redo", | |||||
"font_class": "redo", | |||||
"unicode": "e61a", | |||||
"unicode_decimal": 58906 | |||||
}, | |||||
{ | |||||
"icon_id": "19895588", | |||||
"name": "remove", | |||||
"font_class": "remove", | |||||
"unicode": "e61b", | |||||
"unicode_decimal": 58907 | |||||
} | |||||
] | |||||
} |
@@ -0,0 +1,107 @@ | |||||
<?xml version="1.0" standalone="no"?> | |||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > | |||||
<!-- | |||||
2013-9-30: Created. | |||||
--> | |||||
<svg> | |||||
<metadata> | |||||
Created by iconfont | |||||
</metadata> | |||||
<defs> | |||||
<font id="iconfont" horiz-adv-x="1024" > | |||||
<font-face | |||||
font-family="iconfont" | |||||
font-weight="500" | |||||
font-stretch="normal" | |||||
units-per-em="1024" | |||||
ascent="896" | |||||
descent="-128" | |||||
/> | |||||
<missing-glyph /> | |||||
<glyph glyph-name="add_col_after" unicode="" d="M213.333333 298.666667a213.333333 213.333333 0 1 0 0-426.666667 213.333333 213.333333 0 0 0 0 426.666667z m106.666667-253.354667a39.978667 39.978667 0 1 1 0 80H266.666667a13.312 13.312 0 0 0-13.354667 13.354667V192a39.978667 39.978667 0 1 1-80 0v-53.333333c0-7.381333-5.973333-13.354667-13.312-13.354667H106.666667a39.978667 39.978667 0 1 1 0-80h53.333333c7.381333 0 13.354667-5.973333 13.354667-13.312v-53.333333a39.978667 39.978667 0 1 1 80 0v53.333333c0 7.381333 5.973333 13.354667 13.312 13.354667H320zM682.666667 85.333333a128 128 0 0 1 256 0V682.666667a128 128 0 0 1-256 0v-597.333334z m-85.333334 0V682.666667a213.333333 213.333333 0 0 0 426.666667 0v-597.333334a213.333333 213.333333 0 0 0-426.666667 0z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="add_row_after" unicode="" d="M810.666667 896a213.333333 213.333333 0 1 0 0-426.666667 213.333333 213.333333 0 0 0 0 426.666667z m106.666666-253.354667a39.978667 39.978667 0 1 1 0 80h-53.333333a13.312 13.312 0 0 0-13.354667 13.354667V789.333333a39.978667 39.978667 0 1 1-80 0v-53.333333c0-7.381333-5.973333-13.354667-13.312-13.354667H704a39.978667 39.978667 0 1 1 0-80h53.333333c7.381333 0 13.354667-5.973333 13.354667-13.312V576a39.978667 39.978667 0 1 1 80 0V629.333333c0 7.381333 5.973333 13.354667 13.312 13.354667h53.333333zM213.333333 213.333333a128 128 0 0 1 0-256h597.333334a128 128 0 0 1 0 256H213.333333z m0 85.333334h597.333334a213.333333 213.333333 0 0 0 0-426.666667H213.333333a213.333333 213.333333 0 0 0 0 426.666667z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="code" unicode="" d="M390.272-23.552a53.077333 53.077333 0 0 0-38.186667 16.128L35.84 317.397333a96.298667 96.298667 0 0 0 0 133.333334l316.245333 324.821333a53.333333 53.333333 0 0 0 76.416-74.410667l-294.4-302.208a21.333333 21.333333 0 0 1 0-29.866666l294.4-302.165334a53.333333 53.333333 0 0 0-38.4-90.538666zM633.770667-23.552a53.333333 53.333333 0 0 0-38.4 90.538667l294.4 302.208a21.333333 21.333333 0 0 1 0 29.866666l-294.4 302.165334a53.333333 53.333333 0 0 0 76.416 74.410666l316.202666-324.778666a96.298667 96.298667 0 0 0 0-133.333334l-316.245333-324.864a53.077333 53.077333 0 0 0-37.973333-16.213333z m277.930666 399.914667z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="delete_row" unicode="" d="M565.546667 256a297.472 297.472 0 0 1-41.173334-85.333333H213.333333A213.333333 213.333333 0 0 0 213.333333 597.333333h597.333334a213.333333 213.333333 0 0 0 199.296-289.578666 299.093333 299.093333 0 0 1-74.24 48.896A128 128 0 0 1 810.666667 512H213.333333a128 128 0 0 1 0-256h352.213334zM810.666667 298.666667a213.333333 213.333333 0 1 0 0-426.666667 213.333333 213.333333 0 0 0 0 426.666667z m-106.666667-253.354667h213.333333a39.978667 39.978667 0 1 1 0 80h-213.333333a39.978667 39.978667 0 1 1 0-80z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="delete_col" unicode="" d="M539.343266-39.71214a299.089969 299.089969 0 0 1 48.89545-74.239165A213.330933 213.330933 0 0 0 298.663307 85.342453V682.669067a213.330933 213.330933 0 1 0 426.661866 0v-311.036501a297.468653 297.468653 0 0 1-85.332373-41.17287V682.669067a127.99856 127.99856 0 0 1-255.99712 0v-597.326614a127.99856 127.99856 0 0 1 155.347586-125.054593zM810.657547 298.673387a213.330933 213.330933 0 1 0 0-426.661867 213.330933 213.330933 0 0 0 0 426.661867z m-106.665467-253.351817h213.330933a39.978217 39.978217 0 1 1 0 79.9991h-213.330933a39.978217 39.978217 0 1 1 0-79.9991z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="add_row_before" unicode="" d="M810.666667 298.666667a213.333333 213.333333 0 1 0 0-426.666667 213.333333 213.333333 0 0 0 0 426.666667z m106.666666-253.354667a39.978667 39.978667 0 1 1 0 80h-53.333333a13.312 13.312 0 0 0-13.354667 13.354667V192a39.978667 39.978667 0 1 1-80 0v-53.333333c0-7.381333-5.973333-13.354667-13.312-13.354667H704a39.978667 39.978667 0 1 1 0-80h53.333333c7.381333 0 13.354667-5.973333 13.354667-13.312v-53.333333a39.978667 39.978667 0 1 1 80 0v53.333333c0 7.381333 5.973333 13.354667 13.312 13.354667h53.333333zM213.333333 810.666667a128 128 0 1 1 0-256h597.333334a128 128 0 0 1 0 256H213.333333z m0 85.333333h597.333334a213.333333 213.333333 0 0 0 0-426.666667H213.333333A213.333333 213.333333 0 1 0 213.333333 896z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="hr" unicode="" d="M213.333333 341.333333a42.666667 42.666667 0 0 0 0 85.333334h597.333334a42.666667 42.666667 0 0 0 0-85.333334H213.333333z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="delete_table" unicode="" d="M810.666667 298.666667a213.333333 213.333333 0 1 0 0-426.666667 213.333333 213.333333 0 0 0 0 426.666667z m-106.666667-253.354667h213.333333a39.978667 39.978667 0 1 1 0 80h-213.333333a39.978667 39.978667 0 1 1 0-80zM524.373333 170.666667H384v-213.333334h156.757333c15.189333-32 35.882667-60.842667 60.885334-85.333333H213.333333a213.333333 213.333333 0 0 0-213.333333 213.333333V682.666667a213.333333 213.333333 0 0 0 213.333333 213.333333h597.333334a213.333333 213.333333 0 0 0 213.333333-213.333333v-120.448a35.968 35.968 0 0 0 0-15.104V294.4a299.434667 299.434667 0 0 1-85.333333 60.885333V512h-213.333334v-140.373333a297.472 297.472 0 0 1-85.333333-41.173334V512H384v-256h181.546667a297.472 297.472 0 0 1-41.173334-85.333333zM725.333333 597.333333h213.333334V682.666667a128 128 0 0 1-128 128h-85.333334v-213.333334z m-85.333333 0V810.666667H384v-213.333334h256zM298.666667 810.666667H213.333333a128 128 0 0 1-128-128v-85.333334h213.333334V810.666667zM85.333333 512v-256h213.333334V512H85.333333z m0-341.333333v-85.333334a128 128 0 0 1 128-128h85.333334v213.333334H85.333333z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="italic" unicode="" d="M960 885.418667h-325.845333a53.333333 53.333333 0 0 1 0-106.666667h46.336a10.666667 10.666667 0 0 0 9.002666-16.384L203.946667-0.725333a21.333333 21.333333 0 0 0-18.005334-9.856H64a53.333333 53.333333 0 0 1 0-106.666667h325.845333a53.333333 53.333333 0 0 1 0 106.666667H343.509333a10.666667 10.666667 0 0 0-9.002666 16.384L820.053333 768.853333a21.333333 21.333333 0 0 0 18.005334 9.898667H960a53.333333 53.333333 0 0 1 0 106.666667z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="add_col_before" unicode="" d="M810.666667 298.666667a213.333333 213.333333 0 1 0 0-426.666667 213.333333 213.333333 0 0 0 0 426.666667z m106.666666-253.354667a39.978667 39.978667 0 1 1 0 80h-53.333333a13.312 13.312 0 0 0-13.354667 13.354667V192a39.978667 39.978667 0 1 1-80 0v-53.333333c0-7.381333-5.973333-13.354667-13.312-13.354667H704a39.978667 39.978667 0 1 1 0-80h53.333333c7.381333 0 13.354667-5.973333 13.354667-13.312v-53.333333a39.978667 39.978667 0 1 1 80 0v53.333333c0 7.381333 5.973333 13.354667 13.312 13.354667h53.333333zM85.333333 85.333333a128 128 0 0 1 256 0V682.666667a128 128 0 1 1-256 0v-597.333334z m-85.333333 0V682.666667a213.333333 213.333333 0 1 0 426.666667 0v-597.333334a213.333333 213.333333 0 0 0-426.666667 0z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="bold" unicode="" d="M733.610667 428.288A267.562667 267.562667 0 0 1 548.010667 885.418667H183.466667a53.333333 53.333333 0 0 1 0-106.666667h43.221333a10.666667 10.666667 0 0 0 10.666667-10.666667V0a10.666667 10.666667 0 0 0-10.666667-10.666667H183.466667a53.333333 53.333333 0 1 1 0-106.666666h425.088a287.658667 287.658667 0 0 1 125.013333 545.536z m-185.6 350.464a160.512 160.512 0 0 0 0-320.981333H354.688a10.666667 10.666667 0 0 0-10.666667 10.666666V768a10.666667 10.666667 0 0 0 10.666667 10.666667z m60.586666-789.333333H354.688a10.666667 10.666667 0 0 0-10.666667 10.666666v340.352a10.666667 10.666667 0 0 0 10.666667 10.666667H608.597333a180.864 180.864 0 0 0 0-361.685333z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="paragraph" unicode="" d="M960 885.418667H308.394667a297.685333 297.685333 0 1 1 0-595.370667h98.901333a10.666667 10.666667 0 0 0 10.666667-10.666667V-64a53.333333 53.333333 0 0 1 106.666666 0V768a10.666667 10.666667 0 0 0 10.666667 10.666667h157.098667a10.666667 10.666667 0 0 0 10.666666-10.666667v-832a53.333333 53.333333 0 0 1 106.666667 0V768a10.624 10.624 0 0 0 10.666667 10.666667H960a53.333333 53.333333 0 0 1 0 106.666666zM418.133333 407.381333a10.666667 10.666667 0 0 0-10.666666-10.666666H308.394667a191.018667 191.018667 0 1 0 0 382.037333h98.901333A10.666667 10.666667 0 0 0 418.133333 768z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="quote" unicode="" d="M791.850667 728.234667a210.858667 210.858667 0 1 1 0-421.674667 196.650667 196.650667 0 0 1 47.573333 6.016 10.666667 10.666667 0 0 0 11.776-15.701333 291.413333 291.413333 0 0 0-250.794667-150.314667 53.333333 53.333333 0 0 1 0-106.666667 414.293333 414.293333 0 0 1 402.261334 424.533334V517.418667a211.072 211.072 0 0 1-210.816 210.816zM266.069333 728.234667a210.858667 210.858667 0 0 1 0-421.674667 196.266667 196.266667 0 0 1 47.573334 6.016 10.666667 10.666667 0 0 0 11.818666-15.701333 291.413333 291.413333 0 0 0-250.794666-150.314667 53.333333 53.333333 0 0 1 0-106.666667 414.336 414.336 0 0 1 402.261333 424.533334V517.418667a211.072 211.072 0 0 1-210.858667 210.816z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="mention" unicode="" d="M512 874.666667A496.384 496.384 0 0 1 11.178667 384 496.384 496.384 0 0 1 512-106.666667a505.002667 505.002667 0 0 1 282.624 85.333334 53.333333 53.333333 0 1 1-59.434667 88.576A398.506667 398.506667 0 0 0 512 0a389.632 389.632 0 0 0-394.154667 384A389.632 389.632 0 0 0 512 768a389.632 389.632 0 0 0 394.154667-384v-38.016a82.901333 82.901333 0 0 0-165.717334 0V384A228.48 228.48 0 1 1 512 159.530667a229.376 229.376 0 0 1 164.736 69.717333 189.354667 189.354667 0 0 1 336.085333 116.736V384A496.384 496.384 0 0 1 512 874.666667z m0-608.469334A117.888 117.888 0 1 0 633.770667 384 119.978667 119.978667 0 0 0 512 266.197333z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="combine_cells" unicode="" d="M85.333333 85.333333a128 128 0 0 1 128-128h597.333334a128 128 0 0 1 128 128V682.666667a128 128 0 0 1-128 128H213.333333a128 128 0 0 1-128-128v-597.333334z m-85.333333 0V682.666667a213.333333 213.333333 0 0 0 213.333333 213.333333h597.333334a213.333333 213.333333 0 0 0 213.333333-213.333333v-597.333334a213.333333 213.333333 0 0 0-213.333333-213.333333H213.333333a213.333333 213.333333 0 0 0-213.333333 213.333333z m512 384a42.666667 42.666667 0 0 0 42.666667-42.666666v-85.333334a42.666667 42.666667 0 0 0-85.333334 0v85.333334a42.666667 42.666667 0 0 0 42.666667 42.666666z m0-256a42.666667 42.666667 0 0 0 42.666667-42.666666v-128a42.666667 42.666667 0 0 0-85.333334 0v128a42.666667 42.666667 0 0 0 42.666667 42.666666z m0 554.666667a42.666667 42.666667 0 0 0 42.666667-42.666667v-128a42.666667 42.666667 0 0 0-85.333334 0V725.333333a42.666667 42.666667 0 0 0 42.666667 42.666667z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="checklist" unicode="" d="M896 896H128a128 128 0 0 1-128-128v-768a128 128 0 0 1 128-128h768a128 128 0 0 1 128 128V768a128 128 0 0 1-128 128z m42.666667-896a42.666667 42.666667 0 0 0-42.666667-42.666667H128a42.666667 42.666667 0 0 0-42.666667 42.666667V768a42.666667 42.666667 0 0 0 42.666667 42.666667h768a42.666667 42.666667 0 0 0 42.666667-42.666667zM479.957333 704a53.376 53.376 0 0 1-74.666666-10.666667L314.24 571.733333l-20.565333 20.522667a53.333333 53.333333 0 0 1-75.392-75.264l64-64a53.845333 53.845333 0 0 1 80.384 5.717333l128 170.666667a53.333333 53.333333 0 0 1-10.709334 74.624zM479.957333 320a53.376 53.376 0 0 1-74.666666-10.666667L314.24 187.733333l-20.565333 20.522667a53.333333 53.333333 0 1 1-75.392-75.434667l64-64a53.973333 53.973333 0 0 1 80.384 5.888l128 170.666667a53.333333 53.333333 0 0 1-10.709334 74.624zM789.333333 565.376H597.333333a53.333333 53.333333 0 0 1 0-106.666667h192a53.333333 53.333333 0 0 1 0 106.666667zM789.333333 224.042667H597.333333a53.333333 53.333333 0 0 1 0-106.666667h192a53.333333 53.333333 0 1 1 0 106.666667z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="ol" unicode="" d="M330.666667 704h640a42.666667 42.666667 0 0 1 0 85.333333h-640a42.666667 42.666667 0 0 1 0-85.333333zM970.666667 426.666667h-640a42.666667 42.666667 0 1 1 0-85.333334h640a42.666667 42.666667 0 0 1 0 85.333334zM970.666667 64h-640a42.666667 42.666667 0 0 1 0-85.333333h640a42.666667 42.666667 0 0 1 0 85.333333zM94.378667 160.085333a85.333333 85.333333 0 0 1-82.474667-63.317333 32 32 0 1 1 61.866667-16.469333 21.333333 21.333333 0 1 0 20.608-26.88 32 32 0 1 1 0-64 21.333333 21.333333 0 1 0-20.565334-27.093334 32 32 0 1 1-61.653333-17.066666 85.333333 85.333333 0 1 1 153.130667 70.314666 10.709333 10.709333 0 0 0 0 11.861334 85.333333 85.333333 0 0 1-70.912 132.736zM181.333333 437.418667a85.333333 85.333333 0 0 1-170.666666 0 32 32 0 0 1 64 0 21.333333 21.333333 0 0 0 42.666666 0 43.989333 43.989333 0 0 0-9.685333-27.52L17.664 297.429333A32 32 0 0 1 42.666667 245.418667h106.666666a32 32 0 0 1 0 64h-17.877333a10.624 10.624 0 0 0-8.32 17.322666L157.866667 369.92a108.544 108.544 0 0 1 23.466666 67.498667zM170.666667 672.085333h-10.666667A10.666667 10.666667 0 0 0 149.333333 682.666667V826.752A58.752 58.752 0 0 1 90.666667 885.418667H64a32 32 0 0 1 0-64h10.666667A10.666667 10.666667 0 0 0 85.333333 810.666667v-128a10.666667 10.666667 0 0 0-10.666666-10.666667H64a32 32 0 0 1 0-64H170.666667a32 32 0 0 1 0 64z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="strike" unicode="" d="M1013.333333 343.381333A53.333333 53.333333 0 0 1 960 396.8h-381.269333a20.992 20.992 0 0 0-12.032 3.84c-30.805333 21.888-63.232 41.856-94.634667 61.098667-119.466667 73.173333-192 123.733333-192 207.488 0 95.36 94.165333 109.610667 150.314667 109.610666a193.706667 193.706667 0 0 0 131.456-32.597333 113.578667 113.578667 0 0 0 19.072-84.906667v-12.8a53.333333 53.333333 0 1 1 106.666666 0v11.434667a208.512 208.512 0 0 1-49.706666 161.152C595.157333 864.384 527.317333 885.418667 430.549333 885.418667c-156.074667 0-256.981333-84.864-256.981333-216.277334 0-118.314667 80.725333-192.512 170.666667-252.885333a10.666667 10.666667 0 0 0-5.930667-19.541333H64a53.333333 53.333333 0 0 1 0-106.666667h468.352a10.709333 10.709333 0 0 0 6.784-2.474667 185.130667 185.130667 0 0 0 82.432-147.882666c0-139.434667-146.176-150.272-191.018667-150.272-77.397333 0-133.930667 17.28-163.584 50.048a144.810667 144.810667 0 0 0-27.733333 115.2 53.333333 53.333333 0 0 1-106.154667 10.496A245.76 245.76 0 0 1 187.733333-32.128c51.2-56.490667 132.864-85.333333 242.688-85.333333 178.090667 0 297.685333 103.253333 297.685334 256.938666a258.517333 258.517333 0 0 1-36.224 134.272 10.666667 10.666667 0 0 0 9.216 16.085334H960a53.333333 53.333333 0 0 1 53.333333 53.546666z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="image" unicode="" d="M416 629.461333m-96 0a96 96 0 1 1 192 0 96 96 0 1 1-192 0ZM721.749333 524.373333A43.818667 43.818667 0 0 1 682.666667 547.925333a42.965333 42.965333 0 0 1-38.058667-25.002666l-66.474667-146.517334a10.624 10.624 0 0 0-18.005333-2.261333l-34.986667 43.690667a42.666667 42.666667 0 0 1-34.688 16.042666 42.965333 42.965333 0 0 1-33.578666-18.176L323.84 225.706667a21.333333 21.333333 0 0 1 17.493333-33.706667h512a21.333333 21.333333 0 0 1 18.133334 10.112 21.333333 21.333333 0 0 1 0.938666 20.736zM938.666667 896H234.666667a85.333333 85.333333 0 0 1-85.333334-85.333333v-704a85.333333 85.333333 0 0 1 85.333334-85.333334H938.666667a85.333333 85.333333 0 0 1 85.333333 85.333334V810.666667a85.333333 85.333333 0 0 1-85.333333 85.333333z m-6.186667-783.104a21.333333 21.333333 0 0 0-15.104-6.229333H256a21.333333 21.333333 0 0 0-21.333333 21.333333V789.333333A21.333333 21.333333 0 0 0 256 810.666667h661.333333a21.333333 21.333333 0 0 0 21.333334-21.333334V128a21.333333 21.333333 0 0 0-6.186667-14.976zM832-42.666667h-725.333333a21.333333 21.333333 0 0 0-21.333334 21.333334v725.333333a42.666667 42.666667 0 0 1-85.333333 0V-42.666667a85.333333 85.333333 0 0 1 85.333333-85.333333h746.666667a42.666667 42.666667 0 0 1 0 85.333333z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="github" unicode="" d="M511.957333 874.666667C241.024 874.666667 21.333333 655.018667 21.333333 384c0-216.832 140.544-400.725333 335.573334-465.664 24.490667-4.394667 32.256 10.069333 32.256 23.082667 0 11.690667 0.256 44.245333 0 85.205333-136.448-29.610667-164.736 64.64-164.736 64.64-22.314667 56.704-54.4 71.765333-54.4 71.765333-44.586667 30.464 3.285333 29.824 3.285333 29.824 49.194667-3.413333 75.178667-50.517333 75.178667-50.517333 43.776-75.008 114.816-53.333333 142.762666-40.789333 4.522667 31.658667 17.152 53.376 31.189334 65.536-108.970667 12.458667-223.488 54.485333-223.488 242.602666 0 53.546667 19.114667 97.322667 50.517333 131.669334-5.034667 12.330667-21.930667 62.293333 4.778667 129.834666 0 0 41.258667 13.184 134.912-50.346666a469.802667 469.802667 0 0 0 122.88 16.554666c41.642667-0.213333 83.626667-5.632 122.88-16.554666 93.653333 63.488 134.784 50.346667 134.784 50.346666 26.752-67.541333 9.898667-117.504 4.864-129.834666 31.402667-34.346667 50.474667-78.122667 50.474666-131.669334 0-188.586667-114.730667-230.016-224.042666-242.090666 17.578667-15.232 33.578667-44.672 33.578666-90.453334v-135.850666c0-13.141333 7.936-27.605333 32.853334-22.869334C862.250667-16.597333 1002.666667 167.253333 1002.666667 384 1002.666667 655.018667 783.018667 874.666667 511.957333 874.666667z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="undo" unicode="" d="M758.869333 735.146667a535.125333 535.125333 0 0 1-553.173333 36.906666 10.624 10.624 0 0 0-12.458667 1.92L82.645333 884.522667A21.632 21.632 0 0 1 59.392 889.173333a21.333333 21.333333 0 0 1-13.141333-19.712v-285.866666a21.333333 21.333333 0 0 1 21.333333-21.333334h285.866667a21.333333 21.333333 0 0 1 15.104 36.437334L289.408 677.76a10.794667 10.794667 0 0 0-2.901333 9.728 10.624 10.624 0 0 0 6.485333 7.722667 426.666667 426.666667 0 0 0 403.882667-46.933334 416.384 416.384 0 0 0 4.010666-674.517333 53.333333 53.333333 0 0 1 62.848-86.016 517.205333 517.205333 0 0 1 213.888 425.002667 517.333333 517.333333 0 0 1-218.752 422.4z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="underline" unicode="" d="M960-10.581333h-896a53.333333 53.333333 0 0 1 0-106.666667h896a53.333333 53.333333 0 0 1 0 106.666667zM84.394667 778.752h58.154666a10.666667 10.666667 0 0 0 10.666667-10.666667v-363.648a358.784 358.784 0 0 1 717.568 0V768a10.666667 10.666667 0 0 0 10.666667 10.666667h58.154666a53.333333 53.333333 0 0 1 0 106.666666H695.466667a53.333333 53.333333 0 0 1 0-106.666666h58.154666a10.666667 10.666667 0 0 0 10.666667-10.666667v-363.648a252.117333 252.117333 0 0 0-504.234667 0V768a10.666667 10.666667 0 0 0 10.666667 10.666667H328.533333a53.333333 53.333333 0 1 1 0 106.666666H84.394667a53.333333 53.333333 0 0 1 0-106.666666z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="table" unicode="" d="M725.333333 170.666667v-213.333334h85.333334a128 128 0 0 1 128 128v85.333334h-213.333334z m-85.333333 0H384v-213.333334h256v213.333334z m85.333333 85.333333h213.333334V512h-213.333334v-256z m-85.333333 0V512H384v-256h256z m85.333333 341.333333h213.333334V682.666667a128 128 0 0 1-128 128h-85.333334v-213.333334z m-85.333333 0V810.666667H384v-213.333334h256z m384-391.552V85.333333a213.333333 213.333333 0 0 0-213.333333-213.333333H213.333333a213.333333 213.333333 0 0 0-213.333333 213.333333V682.666667a213.333333 213.333333 0 0 0 213.333333 213.333333h597.333334a213.333333 213.333333 0 0 0 213.333333-213.333333v-120.448a35.968 35.968 0 0 0 0-15.104v-326.229334a35.968 35.968 0 0 0 0-15.104zM298.666667 810.666667H213.333333a128 128 0 0 1-128-128v-85.333334h213.333334V810.666667zM85.333333 512v-256h213.333334V512H85.333333z m0-341.333333v-85.333334a128 128 0 0 1 128-128h85.333334v213.333334H85.333333z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="ul" unicode="" d="M106.666667 725.418667m-106.666667 0a106.666667 106.666667 0 1 1 213.333333 0 106.666667 106.666667 0 1 1-213.333333 0ZM362.666667 682.666667H981.333333a42.666667 42.666667 0 0 1 0 85.333333H362.666667a42.666667 42.666667 0 0 1 0-85.333333zM106.666667 384.085333m-106.666667 0a106.666667 106.666667 0 1 1 213.333333 0 106.666667 106.666667 0 1 1-213.333333 0ZM981.333333 426.666667H362.666667a42.666667 42.666667 0 0 1 0-85.333334H981.333333a42.666667 42.666667 0 0 1 0 85.333334zM106.666667 42.752m-106.666667 0a106.666667 106.666667 0 1 1 213.333333 0 106.666667 106.666667 0 1 1-213.333333 0ZM981.333333 85.333333H362.666667a42.666667 42.666667 0 0 1 0-85.333333H981.333333a42.666667 42.666667 0 0 1 0 85.333333z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="link" unicode="" d="M529.322667 260.053333a42.666667 42.666667 0 0 1-23.168-55.765333 42.666667 42.666667 0 0 0-9.258667-46.506667l-120.661333-120.704a85.333333 85.333333 0 0 0-120.661334 0L165.034667 127.573333a85.333333 85.333333 0 0 0 0 120.704L285.866667 368.938667a43.221333 43.221333 0 0 0 46.549333 9.258666 42.666667 42.666667 0 0 1 32.554667 78.890667 129.450667 129.450667 0 0 1-139.434667-27.818667l-120.832-120.661333a170.922667 170.922667 0 0 1 0-241.365333l90.538667-90.496a170.666667 170.666667 0 0 1 241.322666 0l120.704 120.661333a128.341333 128.341333 0 0 1 27.776 139.52 42.666667 42.666667 0 0 1-55.722666 23.125333zM330.965333 203.050667a43.136 43.136 0 0 1 60.330667 0l331.904 331.861333a42.666667 42.666667 0 0 1-60.330667 60.330667l-331.904-331.861334a42.666667 42.666667 0 0 1 0-60.330666zM919.296 700.842667l-90.496 90.496a170.922667 170.922667 0 0 1-241.365333 0l-120.704-120.661334a128.256 128.256 0 0 1-27.776-139.477333 42.666667 42.666667 0 1 1 78.890666 32.597333 42.666667 42.666667 0 0 0 9.258667 46.336l120.661333 120.661334a85.333333 85.333333 0 0 0 120.704 0l90.496-90.496a85.333333 85.333333 0 0 0 0-120.704L738.133333 399.146667a43.306667 43.306667 0 0 0-46.549333-9.258667 42.666667 42.666667 0 0 1-32.64-78.890667 129.109333 129.109333 0 0 1 139.52 27.776l120.661333 120.661334a170.965333 170.965333 0 0 1 0.170667 241.408z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="redo" unicode="" d="M964.608 889.130667a21.333333 21.333333 0 0 1-23.253333-4.608L830.805333 773.973333a10.666667 10.666667 0 0 0-12.458666-1.92 534.912 534.912 0 0 1-553.216-36.906666A523.050667 523.050667 0 0 1 260.266667-112.298667a53.333333 53.333333 0 0 1 62.976 86.101334 416.384 416.384 0 0 0 3.882666 674.517333 426.666667 426.666667 0 0 0 403.882667 46.933333 10.666667 10.666667 0 0 0 3.584-17.450666l-78.933333-78.933334a21.333333 21.333333 0 0 1 15.104-36.394666h285.866666a21.333333 21.333333 0 0 1 21.333334 21.333333V869.418667a21.333333 21.333333 0 0 1-13.354667 19.712z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="remove" unicode="" d="M874.154197 745.883125A511.970373 511.970373 0 1 1 1023.993986 384.008313a511.927744 511.927744 0 0 1-149.839789 361.874812z m-75.324866-648.382129A405.398688 405.398688 0 1 0 917.422301 384.008313a405.313431 405.313431 0 0 0-118.59297-286.507317zM725.039096 596.725395a54.351559 54.351559 0 0 1-76.731613 0l-135.431297-135.431297L377.274375 596.725395a54.436817 54.436817 0 0 1-76.944756-76.987385l135.388668-135.431297-135.388668-135.473925a54.436817 54.436817 0 0 1 76.944756-76.987385l135.388668 135.431297 135.431297-135.473926a54.436817 54.436817 0 0 1 76.731613 76.987385l-135.388668 135.473926 135.388668 135.431296a54.479445 54.479445 0 0 1 0.213143 77.030014z" horiz-adv-x="1024" /> | |||||
</font> | |||||
</defs></svg> |
@@ -0,0 +1,25 @@ | |||||
@font-face {font-family: "iconfont"; | |||||
src: url('iconfont.eot?t=1602233339904'); /* IE9 */ | |||||
src: url('iconfont.eot?t=1602233339904#iefix') format('embedded-opentype'), /* IE6-IE8 */ | |||||
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALAAAsAAAAABqgAAAJxAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCfgqBDIEYATYCJAMMCwgABCAFhG0HQhviBRHVkxVkXyZwmyZ82vMwUq3ar2VU0RnKvCUqpq5x5GwTV+HgmXj42u/13N19PxtCh6QyUcQ2KioFVVYVBtmo2gpZoSoUOiChGwA5wVPvw9/s9QNdKGXhwrVx4dDSeXd6WzQsvmnwX06rTo1BmE75dvrpOyDZ9Ci/cuQNsR+quvf5xL3TPwooi+YDynENWmPhpy7ALgwooLE2RVZEEbfILuJOXMRxAh3GrIjDY0VFVaBxgbh1PbRRC35FMVJVaDUsLeItGjU9Iztvou/Hn9WoJE2Gpp5ekT3sfsf3YO/S5pwTCBDk1Q0yVlCIs8b4qSwMTtYRL2bYV7/ge1D6HTeKvXIT8deR4i6wICcS31GNW5PKKySQQauYnMOqwh66IcSgdGNunx2nDg2vjZfbfDqmBtZHL9Z2E/Tpeh6WQ90F1V4329d1Y55KjZJWcGdSNVym/kx6Q3JIr0gmEKx/+79MutYFfHonHekLuK6ewhH8LimwrvhyZMjFlVBJ6MwGAdaEXNKB/8g94Ot43TC4nFANj3C2Gc2QVTNkYa+g0WkNLdUOOiw7Wd1p0G1ZlHYseSQh9HmPpMcHZH0+koX9BY0R/9DSFxkdzsKWnebC9uYoOCmuMP/BL1yImNTEpTe07zRJXh7xXii7D8HQ9uXUFQvKHDP2jx1VCUg4w0U6DVNi2IQDLto61e3QddT0pnbhXBkcBSfFFeY/+IUL8eZqKp+/oX2nSToYPfEXyu47h6HtAeRVU0CMe3ll/9hRlYCEM1ykQZgSw9Y8KOCirRsR3Q4dbkRQTbu+Ln/fNugAOiozKXIUxhbhb5OQtE5zxVunVQUAAAA=') format('woff2'), | |||||
url('iconfont.woff?t=1602233339904') format('woff'), | |||||
url('iconfont.ttf?t=1602233339904') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ | |||||
url('iconfont.svg?t=1602233339904#iconfont') format('svg'); /* iOS 4.1- */ | |||||
} | |||||
.iconfont { | |||||
font-family: "iconfont" !important; | |||||
font-size: 16px; | |||||
font-style: normal; | |||||
-webkit-font-smoothing: antialiased; | |||||
-moz-osx-font-smoothing: grayscale; | |||||
} | |||||
.icon-arrow-left:before { | |||||
content: "\e600"; | |||||
} | |||||
.icon-arrow-right:before { | |||||
content: "\e601"; | |||||
} | |||||
@@ -0,0 +1,23 @@ | |||||
{ | |||||
"id": "2118355", | |||||
"name": "oss-console", | |||||
"font_family": "iconfont", | |||||
"css_prefix_text": "icon-", | |||||
"description": "", | |||||
"glyphs": [ | |||||
{ | |||||
"icon_id": "13319420", | |||||
"name": "Icon - Keyboard Arrow - Down - Rounded", | |||||
"font_class": "arrow-left", | |||||
"unicode": "e600", | |||||
"unicode_decimal": 58880 | |||||
}, | |||||
{ | |||||
"icon_id": "15657637", | |||||
"name": "Icon - Keyboard Arrow - Down - Rounded", | |||||
"font_class": "arrow-right", | |||||
"unicode": "e601", | |||||
"unicode_decimal": 58881 | |||||
} | |||||
] | |||||
} |
@@ -0,0 +1,32 @@ | |||||
<?xml version="1.0" standalone="no"?> | |||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > | |||||
<!-- | |||||
2013-9-30: Created. | |||||
--> | |||||
<svg> | |||||
<metadata> | |||||
Created by iconfont | |||||
</metadata> | |||||
<defs> | |||||
<font id="iconfont" horiz-adv-x="1024" > | |||||
<font-face | |||||
font-family="iconfont" | |||||
font-weight="500" | |||||
font-stretch="normal" | |||||
units-per-em="1024" | |||||
ascent="896" | |||||
descent="-128" | |||||
/> | |||||
<missing-glyph /> | |||||
<glyph glyph-name="arrow-left" unicode="" d="M640 221.866667l-166.4 166.4L640 554.666667a41.258667 41.258667 0 0 1 0 59.733333 41.258667 41.258667 0 0 1-59.733333 0l-196.266667-196.266667a41.258667 41.258667 0 0 1 0-59.733333l196.266667-196.266667A42.24 42.24 0 1 1 640 221.866667z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="arrow-right" unicode="" d="M384 546.133333l166.4-166.4L384 213.33333300000004a41.258667 41.258667 0 0 1 0-59.733333 41.258667 41.258667 0 0 1 59.733333 0l196.266667 196.266667a41.258667 41.258667 0 0 1 0 59.733333l-196.266667 196.266667A42.24 42.24 0 1 1 384 546.133333z" horiz-adv-x="1024" /> | |||||
</font> | |||||
</defs></svg> |
@@ -0,0 +1,33 @@ | |||||
@font-face {font-family: "iconfont"; | |||||
src: url('iconfont.eot?t=1530874958372'); /* IE9*/ | |||||
src: url('iconfont.eot?t=1530874958372#iefix') format('embedded-opentype'), /* IE6-IE8 */ | |||||
url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAjEAAsAAAAADmwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW8UnVY21hcAAAAYAAAACeAAACID1NtZpnbHlmAAACIAAABFoAAAdYtnrc/mhlYWQAAAZ8AAAAMQAAADYR6R6WaGhlYQAABrAAAAAgAAAAJAfdA4tobXR4AAAG0AAAABkAAAAoJ+n//2xvY2EAAAbsAAAAFgAAABYKcgh8bWF4cAAABwQAAAAdAAAAIAEbAG5uYW1lAAAHJAAAAUUAAAJtPlT+fXBvc3QAAAhsAAAAVwAAAG1+6rtfeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sc4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDx/ytzwv4EhhrmBoRkozAiSAwA2fA1beJzFkTsOwjAQRJ/JB4woKDgGp6NKgaJIuQcVN8lNIsV7jDDOpiFKDWM9Sx7Lu9YsUAGFuIsSwptA1ktuWPyC8+KXPHS+cZVT0iRStNY6622w0aZ51u2+u1VQle3K7kF1K2qO6nAiyqp3Xv9I4X+tv3VZ9ud6Uio0K/piwlF2St7Jc7TWyfO1zlGyWO8oY2xw8vxtdJQ7NjnED8roN6wAAHictVTNbxtFFJ+3u7O7cex1vZ/xx/rbu27cbJzdtdeqg5OapkmBVglJJBwSpAhVtSrBCdEeoDISqBEgvnpBSIWqICGVP6FVKUgoN5RDJaSAVKFy48KRQ+wwayeQFMEhiN3Z997szDz9fu83MwgjtPszfZceQRIqogl0Gs0jBGwJsgKlQ8Z0LaoESgYrmizQZs7McLmsRT8BWpaVVbvqGhrLsWEQIAlOxq6aFmVCxW1QdbBVHSAajy2KhYRIfwCBETP5Vu8p6hYoqVwi3BjrnT0xJdtpib8cFMWoKL7LsxjzFMWEBXhJU4fwUIDtfYHDMeVu6jiVgmDUjD3TCqXj4vqG+7Je0IYAOh2Q4mnhy6lILELaazFVEqPcsRA/Egvl8jJc/mV4RArqxiNEHry7u/spg+gXUQFV0Sx6Dq0TrjKnKrJAZS2q4nqGj92xVa0BfePYSQrsBkXKQAoi/1sH26rMZg23yiDLmn/nzoM7by9YVmJ8Ol+a06wL7QvWyGypMDWe2Pk+EBE4TohIYojnQyLUK2tnisUza5cGDi4GxBDHhUQpIvC8EOn9UKzV5ms16qtZp9Vev311bu7q7fV2y5k1mk6ikIpIUiRVSDjNXl0plL1yXlHyxBWU3oP42OTM5Fh8z8GJw+NpWZckXUYU2QMdUpcOGkaKrz7iVKRVkWcg2uFMJ5LztByFtnsPMYbM9jZkMO49/GS605n2P7pDetsHRrszRJZOp+PXHEju1+mfSO4mQhKrcgJwrKqpVU31X9bvNKCiOp5me5rqNcC0wGyAV92Pq4ZvSSMrBbhOM0A3FAkSeomhsVKkRhW5vvbqIs+EglSgXnn2TV0MO5COBtiJeFCWNA8oCoYUoL/98KNvaDgGv/K6EVpwneeVYIsZDtbGcCyVX2CYCQbIk0kwkbl0MgX5WhqvBPnz556uB5NFHOWYG1sMs3UjwPi8OMLrPn2fnibxEAqQ05NCNXSOEM4lwT8XWRb/GdEEehIIT88CiVDO+nQM1/Np2hoZUWWOLZBJsuZUvf7WU0lUsQDmyxAvxkmD9/ejN+51Me7e69uzbnPm45knLyZ0PdH+K+x912xhvswBUzlfYYAr87gFP8r+6rg8cLCwn4PYbsPRD2cYhF9Ty6c4ANawbYMF4E4t/zP30/+Bu5lhOUXVMlWvYhyR8ue9LYKUA0IajkL1M1IlP0GZ+x+0NXMs2btZwzRIpAymu0cleljWJlH6SNIeVJXyde7fA7/TGzRP7scJn21fFIezIDe44sh1V3EN0/P/EqlcAwZnlRASgL60gwHwzU2jVT7ZXiyVFtuvEJfUNwHXMER6mZUrFHVlpW9pvv9zU0/uTSPuZLllbN70c+yEIt3J/anEEh18bL/R12kJHUcVgs00wv2PTcHf8WnqFFTHiQCH8L03yrKrSywuMczyxuMgry2x7CjDLK0y3d4BnNQjMnttmWHI2qVrj6Pd2BtYZbsvHIb7B37maBAAAHicY2BkYGAA4sCb7Pfj+W2+MnCzMIDA9dRcPxj9////WhYG5gYgl4OBCSQKAED2C7oAAAB4nGNgZGBgbvjfwBDDwvD/PwMDCwMDUAQFcAEAdeEEcXicY2FgYGB+ycDAwvD/PwsDiMaOAV4UAw8AAAAAAAAAAHYBAgEwAZwCGgKKAwYDVAOsAAB4nGNgZGBg4GJIYmBnAAEmMI8LSP4H8xkAE4sBigAAAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nG3ESQqAMBAEwOksLvHgS3xUlBEDWUgiKr5ewat1KBL0MfTPQEBCQaNBiw49DAbCpWa2ZSxc3c3TwWV3i/UiZ72WdEYZeNM1OM8y2KjP9E70ABXpEngA') format('woff'), | |||||
url('iconfont.ttf?t=1530874958372') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ | |||||
url('iconfont.svg?t=1530874958372#iconfont') format('svg'); /* iOS 4.1- */ | |||||
} | |||||
.iconfont { | |||||
font-family:"iconfont" !important; | |||||
font-size:16px; | |||||
font-style:normal; | |||||
-webkit-font-smoothing: antialiased; | |||||
-moz-osx-font-smoothing: grayscale; | |||||
} | |||||
.icon-bear:before { content: "\e600"; } | |||||
.icon-resize-vertical:before { content: "\e7c3"; } | |||||
.icon-qq:before { content: "\e609"; } | |||||
.icon-frown:before { content: "\e77e"; } | |||||
.icon-meh:before { content: "\e780"; } | |||||
.icon-smile:before { content: "\e783"; } | |||||
.icon-man:before { content: "\e7e2"; } | |||||
.icon-woman:before { content: "\e7e5"; } | |||||
@@ -0,0 +1,57 @@ | |||||
<?xml version="1.0" standalone="no"?> | |||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > | |||||
<!-- | |||||
2013-9-30: Created. | |||||
--> | |||||
<svg> | |||||
<metadata> | |||||
Created by iconfont | |||||
</metadata> | |||||
<defs> | |||||
<font id="iconfont" horiz-adv-x="1024" > | |||||
<font-face | |||||
font-family="iconfont" | |||||
font-weight="500" | |||||
font-stretch="normal" | |||||
units-per-em="1024" | |||||
ascent="896" | |||||
descent="-128" | |||||
/> | |||||
<missing-glyph /> | |||||
<glyph glyph-name="x" unicode="x" horiz-adv-x="1001" | |||||
d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5 | |||||
t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5 | |||||
t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" /> | |||||
<glyph glyph-name="bear" unicode="" d="M1024 683.008q0-70.656-46.08-121.856 46.08-89.088 46.08-193.536 0-96.256-39.936-181.248t-109.568-147.968-162.816-99.328-199.68-36.352-199.68 36.352-162.304 99.328-109.568 147.968-40.448 181.248q0 104.448 46.08 193.536-46.08 51.2-46.08 121.856 0 37.888 13.824 71.168t37.376 58.368 55.808 39.424 68.096 14.336q43.008 0 78.848-18.432t59.392-50.176q46.08 17.408 96.256 26.624t102.4 9.216 102.4-9.216 96.256-26.624q24.576 31.744 59.904 50.176t78.336 18.432q36.864 0 68.608-14.336t55.296-39.424 37.376-58.368 13.824-71.168zM205.824 268.288q10.24 0 18.944 10.24t15.36 28.672 10.24 42.496 3.584 51.712-3.584 51.712-10.24 41.984-15.36 28.16-18.944 10.24q-9.216 0-17.92-10.24t-15.36-28.16-10.752-41.984-4.096-51.712 4.096-51.712 10.752-42.496 15.36-28.672 17.92-10.24zM512-31.744000000000028q53.248 0 99.84 13.312t81.408 35.84 54.784 52.736 19.968 65.024q0 33.792-19.968 64t-54.784 52.736-81.408 35.84-99.84 13.312-99.84-13.312-81.408-35.84-54.784-52.736-19.968-64q0-34.816 19.968-65.024t54.784-52.736 81.408-35.84 99.84-13.312zM818.176 268.288q10.24 0 18.944 10.24t15.36 28.672 10.24 42.496 3.584 51.712-3.584 51.712-10.24 41.984-15.36 28.16-18.944 10.24q-9.216 0-17.92-10.24t-15.36-28.16-10.752-41.984-4.096-51.712 4.096-51.712 10.752-42.496 15.36-28.672 17.92-10.24zM512 235.51999999999998q39.936 0 68.096-9.728t28.16-24.064-28.16-24.064-68.096-9.728-68.096 9.728-28.16 24.064 28.16 24.064 68.096 9.728z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="resize-vertical" unicode="" d="M512 896C229.248 896 0 666.752 0 384s229.248-512 512-512 512 229.248 512 512S794.752 896 512 896zM576 192l64 0-128-128-128 128 64 0L448 576l-64 0 128 128 128-128-64 0L576 192z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="qq" unicode="" d="M147.372058 491.394284c-5.28997-13.909921 2.431986-22.698872 0-75.732573-0.682996-14.25092-62.165649-78.762555-86.569511-145.791177-24.192863-66.517625-27.519845-135.978232 9.811944-163.285078 37.419789-27.305846 72.191593 90.879487 76.757567 73.685584 1.961989-7.509958 4.436975-15.317914 7.423958-23.338868a331.945126 331.945126 0 0 1 61.140655-101.162429c5.929967-6.783962-36.009797-19.199892-61.140655-61.99365-25.173858-42.751759 7.209959-120.49032 132.223254-120.49032 161.27909 0 197.288886 56.70368 200.574868 56.447681 12.031932-0.895995 12.841928 0 25.599855 0 15.572912 0 9.129948-1.279993 23.593867 0 7.807956 0.682996 86.186514-67.839617 194.686901-56.447681 184.873956 19.45589 156.586116 81.40754 142.079198 120.48932-15.103915 40.83277-68.692612 59.946662-66.303626 62.549647 44.28775 48.938724 51.285711 79.018554 66.346626 123.9463 6.143965 18.473896 49.066723-101.674426 82.089537-73.685584 13.781922 11.690934 41.301767 60.24566 13.781922 163.285078-27.519845 102.996419-80.767544 126.505286-79.615551 145.791177 2.389987 40.191773 1.023994 68.436614-1.023994 75.732573-9.812945 35.4128-30.378829 27.604844-30.378829 35.4128C858.450044 730.752933 705.10691 896 515.966978 896s-342.398067-165.289067-342.398068-369.192916c0-16.169909-14.378919-4.223976-26.154852-35.4128z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="frown" unicode="" d="M336 475m-48 0a48 48 0 1 1 96 0 48 48 0 1 1-96 0ZM688 475m-48 0a48 48 0 1 1 96 0 48 48 0 1 1-96 0ZM512 832C264.6 832 64 631.4 64 384s200.6-448 448-448 448 200.6 448 448S759.4 832 512 832z m263-711c-34.2-34.2-74-61-118.3-79.8C611 21.8 562.3 12 512 12c-50.3 0-99 9.8-144.8 29.2-44.3 18.7-84.1 45.6-118.3 79.8-34.2 34.2-61 74-79.8 118.3C149.8 285 140 333.7 140 384s9.8 99 29.2 144.8c18.7 44.3 45.6 84.1 79.8 118.3 34.2 34.2 74 61 118.3 79.8C413 746.2 461.7 756 512 756c50.3 0 99-9.8 144.8-29.2 44.3-18.7 84.1-45.6 118.3-79.8 34.2-34.2 61-74 79.8-118.3C874.2 483 884 434.3 884 384s-9.8-99-29.2-144.8c-18.7-44.3-45.6-84.1-79.8-118.2zM512 363c-85.5 0-155.6-67.3-160-151.6-0.2-4.6 3.4-8.4 8-8.4h48.1c4.2 0 7.8 3.2 8.1 7.4C420 259.9 461.5 299 512 299s92.1-39.1 95.8-88.6c0.3-4.2 3.9-7.4 8.1-7.4H664c4.6 0 8.2 3.8 8 8.4-4.4 84.3-74.5 151.6-160 151.6z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="meh" unicode="" d="M336 475m-48 0a48 48 0 1 1 96 0 48 48 0 1 1-96 0ZM688 475m-48 0a48 48 0 1 1 96 0 48 48 0 1 1-96 0ZM512 832C264.6 832 64 631.4 64 384s200.6-448 448-448 448 200.6 448 448S759.4 832 512 832z m263-711c-34.2-34.2-74-61-118.3-79.8C611 21.8 562.3 12 512 12c-50.3 0-99 9.8-144.8 29.2-44.3 18.7-84.1 45.6-118.3 79.8-34.2 34.2-61 74-79.8 118.3C149.8 285 140 333.7 140 384s9.8 99 29.2 144.8c18.7 44.3 45.6 84.1 79.8 118.3 34.2 34.2 74 61 118.3 79.8C413 746.2 461.7 756 512 756c50.3 0 99-9.8 144.8-29.2 44.3-18.7 84.1-45.6 118.3-79.8 34.2-34.2 61-74 79.8-118.3C874.2 483 884 434.3 884 384s-9.8-99-29.2-144.8c-18.7-44.3-45.6-84.1-79.8-118.2zM664 331H360c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h304c4.4 0 8 3.6 8 8v48c0 4.4-3.6 8-8 8z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="smile" unicode="" d="M336 475m-48 0a48 48 0 1 1 96 0 48 48 0 1 1-96 0ZM688 475m-48 0a48 48 0 1 1 96 0 48 48 0 1 1-96 0ZM512 832C264.6 832 64 631.4 64 384s200.6-448 448-448 448 200.6 448 448S759.4 832 512 832z m263-711c-34.2-34.2-74-61-118.3-79.8C611 21.8 562.3 12 512 12c-50.3 0-99 9.8-144.8 29.2-44.3 18.7-84.1 45.6-118.3 79.8-34.2 34.2-61 74-79.8 118.3C149.8 285 140 333.7 140 384s9.8 99 29.2 144.8c18.7 44.3 45.6 84.1 79.8 118.3 34.2 34.2 74 61 118.3 79.8C413 746.2 461.7 756 512 756c50.3 0 99-9.8 144.8-29.2 44.3-18.7 84.1-45.6 118.3-79.8 34.2-34.2 61-74 79.8-118.3C874.2 483 884 434.3 884 384s-9.8-99-29.2-144.8c-18.7-44.3-45.6-84.1-79.8-118.2zM664 363h-48.1c-4.2 0-7.8-3.2-8.1-7.4C604 306.1 562.5 267 512 267s-92.1 39.1-95.8 88.6c-0.3 4.2-3.9 7.4-8.1 7.4H360c-4.6 0-8.2-3.8-8-8.4 4.4-84.3 74.5-151.6 160-151.6s155.6 67.3 160 151.6c0.2 4.6-3.4 8.4-8 8.4z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="man" unicode="" d="M874 776H622c-3.3 0-6-2.7-6-6v-56c0-3.3 2.7-6 6-6h160.4L583.1 508.7c-50 38.5-111 59.3-175.1 59.3-76.9 0-149.3-30-203.6-84.4S120 356.9 120 280s30-149.3 84.4-203.6C258.7 22 331.1-8 408-8s149.3 30 203.6 84.4C666 130.7 696 203.1 696 280c0 64.1-20.8 124.9-59.2 174.9L836 654.1V494c0-3.3 2.7-6 6-6h56c3.3 0 6 2.7 6 6V746c0 16.5-13.5 30-30 30zM408 68c-116.9 0-212 95.1-212 212s95.1 212 212 212 212-95.1 212-212-95.1-212-212-212z" horiz-adv-x="1024" /> | |||||
<glyph glyph-name="woman" unicode="" d="M909.7 739.4l-42.2 42.2c-3.1 3.1-8.2 3.1-11.3 0L764 689.4l-84.2 84.2c-3.1 3.1-8.2 3.1-11.3 0l-42.1-42.1c-3.1-3.1-3.1-8.1 0-11.3l84.2-84.2-135.5-135.3c-50 38.5-111 59.3-175.1 59.3-76.9 0-149.3-30-203.6-84.4S112 348.9 112 272s30-149.3 84.4-203.6C250.7 14 323.1-16 400-16s149.3 30 203.6 84.4C658 122.7 688 195.1 688 272c0 64.2-20.9 125.1-59.3 175.1l135.4 135.4 84.2-84.2c3.1-3.1 8.2-3.1 11.3 0l42.1 42.1c3.1 3.1 3.1 8.1 0 11.3l-84.2 84.2 92.2 92.2c3.1 3.1 3.1 8.2 0 11.3zM400 60c-116.9 0-212 95.1-212 212s95.1 212 212 212 212-95.1 212-212-95.1-212-212-212z" horiz-adv-x="1024" /> | |||||
</font> | |||||
</defs></svg> |
@@ -0,0 +1,49 @@ | |||||
<template> | |||||
<div ref="dom" class="charts chart-bar"></div> | |||||
</template> | |||||
<script> | |||||
import echarts from 'echarts' | |||||
import tdTheme from './theme.json' | |||||
echarts.registerTheme('tdTheme', tdTheme) | |||||
export default { | |||||
name: 'ChartBar', | |||||
props: { | |||||
value: Object, | |||||
text: String, | |||||
subtext: String | |||||
}, | |||||
mounted () { | |||||
this.$nextTick(() => { | |||||
let xAxisData = Object.keys(this.value) | |||||
let seriesData = Object.values(this.value) | |||||
let option = { | |||||
title: { | |||||
text: this.text, | |||||
subtext: this.subtext, | |||||
x: 'center' | |||||
}, | |||||
xAxis: { | |||||
type: 'category', | |||||
data: xAxisData | |||||
}, | |||||
yAxis: { | |||||
type: 'value' | |||||
}, | |||||
series: [{ | |||||
data: seriesData, | |||||
type: 'bar' | |||||
}] | |||||
} | |||||
let dom = echarts.init(this.$refs.dom, 'tdTheme') | |||||
dom.setOption(option) | |||||
}) | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="less"> | |||||
.charts{ | |||||
// | |||||
} | |||||
</style> |
@@ -0,0 +1,3 @@ | |||||
import ChartPie from './pie.vue' | |||||
import ChartBar from './bar.vue' | |||||
export { ChartPie, ChartBar } |
@@ -0,0 +1,61 @@ | |||||
<template> | |||||
<div ref="dom" class="charts chart-pie"></div> | |||||
</template> | |||||
<script> | |||||
import echarts from 'echarts' | |||||
import tdTheme from './theme.json' | |||||
echarts.registerTheme('tdTheme', tdTheme) | |||||
export default { | |||||
name: 'ChartPie', | |||||
props: { | |||||
value: Array, | |||||
text: String, | |||||
subtext: String | |||||
}, | |||||
mounted () { | |||||
this.$nextTick(() => { | |||||
let legend = this.value.map(_ => _.name) | |||||
let option = { | |||||
title: { | |||||
text: this.text, | |||||
subtext: this.subtext, | |||||
x: 'center' | |||||
}, | |||||
tooltip: { | |||||
trigger: 'item', | |||||
formatter: '{a} <br/>{b} : {c} ({d}%)' | |||||
}, | |||||
legend: { | |||||
orient: 'vertical', | |||||
left: 'left', | |||||
data: legend | |||||
}, | |||||
series: [ | |||||
{ | |||||
type: 'pie', | |||||
radius: '55%', | |||||
center: ['50%', '60%'], | |||||
data: this.value, | |||||
itemStyle: { | |||||
emphasis: { | |||||
shadowBlur: 10, | |||||
shadowOffsetX: 0, | |||||
shadowColor: 'rgba(0, 0, 0, 0.5)' | |||||
} | |||||
} | |||||
} | |||||
] | |||||
} | |||||
let dom = echarts.init(this.$refs.dom, 'tdTheme') | |||||
dom.setOption(option) | |||||
}) | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="less"> | |||||
.charts{ | |||||
// | |||||
} | |||||
</style> |
@@ -0,0 +1,491 @@ | |||||
{ | |||||
"color": [ | |||||
"#2d8cf0", | |||||
"#19be6b", | |||||
"#ff9900", | |||||
"#E46CBB", | |||||
"#9A66E4", | |||||
"#ed3f14" | |||||
], | |||||
"backgroundColor": "rgba(0,0,0,0)", | |||||
"textStyle": {}, | |||||
"title": { | |||||
"textStyle": { | |||||
"color": "#516b91" | |||||
}, | |||||
"subtextStyle": { | |||||
"color": "#93b7e3" | |||||
} | |||||
}, | |||||
"line": { | |||||
"itemStyle": { | |||||
"normal": { | |||||
"borderWidth": "2" | |||||
} | |||||
}, | |||||
"lineStyle": { | |||||
"normal": { | |||||
"width": "2" | |||||
} | |||||
}, | |||||
"symbolSize": "6", | |||||
"symbol": "emptyCircle", | |||||
"smooth": true | |||||
}, | |||||
"radar": { | |||||
"itemStyle": { | |||||
"normal": { | |||||
"borderWidth": "2" | |||||
} | |||||
}, | |||||
"lineStyle": { | |||||
"normal": { | |||||
"width": "2" | |||||
} | |||||
}, | |||||
"symbolSize": "6", | |||||
"symbol": "emptyCircle", | |||||
"smooth": true | |||||
}, | |||||
"bar": { | |||||
"itemStyle": { | |||||
"normal": { | |||||
"barBorderWidth": 0, | |||||
"barBorderColor": "#ccc" | |||||
}, | |||||
"emphasis": { | |||||
"barBorderWidth": 0, | |||||
"barBorderColor": "#ccc" | |||||
} | |||||
} | |||||
}, | |||||
"pie": { | |||||
"itemStyle": { | |||||
"normal": { | |||||
"borderWidth": 0, | |||||
"borderColor": "#ccc" | |||||
}, | |||||
"emphasis": { | |||||
"borderWidth": 0, | |||||
"borderColor": "#ccc" | |||||
} | |||||
} | |||||
}, | |||||
"scatter": { | |||||
"itemStyle": { | |||||
"normal": { | |||||
"borderWidth": 0, | |||||
"borderColor": "#ccc" | |||||
}, | |||||
"emphasis": { | |||||
"borderWidth": 0, | |||||
"borderColor": "#ccc" | |||||
} | |||||
} | |||||
}, | |||||
"boxplot": { | |||||
"itemStyle": { | |||||
"normal": { | |||||
"borderWidth": 0, | |||||
"borderColor": "#ccc" | |||||
}, | |||||
"emphasis": { | |||||
"borderWidth": 0, | |||||
"borderColor": "#ccc" | |||||
} | |||||
} | |||||
}, | |||||
"parallel": { | |||||
"itemStyle": { | |||||
"normal": { | |||||
"borderWidth": 0, | |||||
"borderColor": "#ccc" | |||||
}, | |||||
"emphasis": { | |||||
"borderWidth": 0, | |||||
"borderColor": "#ccc" | |||||
} | |||||
} | |||||
}, | |||||
"sankey": { | |||||
"itemStyle": { | |||||
"normal": { | |||||
"borderWidth": 0, | |||||
"borderColor": "#ccc" | |||||
}, | |||||
"emphasis": { | |||||
"borderWidth": 0, | |||||
"borderColor": "#ccc" | |||||
} | |||||
} | |||||
}, | |||||
"funnel": { | |||||
"itemStyle": { | |||||
"normal": { | |||||
"borderWidth": 0, | |||||
"borderColor": "#ccc" | |||||
}, | |||||
"emphasis": { | |||||
"borderWidth": 0, | |||||
"borderColor": "#ccc" | |||||
} | |||||
} | |||||
}, | |||||
"gauge": { | |||||
"itemStyle": { | |||||
"normal": { | |||||
"borderWidth": 0, | |||||
"borderColor": "#ccc" | |||||
}, | |||||
"emphasis": { | |||||
"borderWidth": 0, | |||||
"borderColor": "#ccc" | |||||
} | |||||
} | |||||
}, | |||||
"candlestick": { | |||||
"itemStyle": { | |||||
"normal": { | |||||
"color": "#edafda", | |||||
"color0": "transparent", | |||||
"borderColor": "#d680bc", | |||||
"borderColor0": "#8fd3e8", | |||||
"borderWidth": "2" | |||||
} | |||||
} | |||||
}, | |||||
"graph": { | |||||
"itemStyle": { | |||||
"normal": { | |||||
"borderWidth": 0, | |||||
"borderColor": "#ccc" | |||||
} | |||||
}, | |||||
"lineStyle": { | |||||
"normal": { | |||||
"width": 1, | |||||
"color": "#aaa" | |||||
} | |||||
}, | |||||
"symbolSize": "6", | |||||
"symbol": "emptyCircle", | |||||
"smooth": true, | |||||
"color": [ | |||||
"#2d8cf0", | |||||
"#19be6b", | |||||
"#f5ae4a", | |||||
"#9189d5", | |||||
"#56cae2", | |||||
"#cbb0e3" | |||||
], | |||||
"label": { | |||||
"normal": { | |||||
"textStyle": { | |||||
"color": "#eee" | |||||
} | |||||
} | |||||
} | |||||
}, | |||||
"map": { | |||||
"itemStyle": { | |||||
"normal": { | |||||
"areaColor": "#f3f3f3", | |||||
"borderColor": "#516b91", | |||||
"borderWidth": 0.5 | |||||
}, | |||||
"emphasis": { | |||||
"areaColor": "rgba(165,231,240,1)", | |||||
"borderColor": "#516b91", | |||||
"borderWidth": 1 | |||||
} | |||||
}, | |||||
"label": { | |||||
"normal": { | |||||
"textStyle": { | |||||
"color": "#000" | |||||
} | |||||
}, | |||||
"emphasis": { | |||||
"textStyle": { | |||||
"color": "rgb(81,107,145)" | |||||
} | |||||
} | |||||
} | |||||
}, | |||||
"geo": { | |||||
"itemStyle": { | |||||
"normal": { | |||||
"areaColor": "#f3f3f3", | |||||
"borderColor": "#516b91", | |||||
"borderWidth": 0.5 | |||||
}, | |||||
"emphasis": { | |||||
"areaColor": "rgba(165,231,240,1)", | |||||
"borderColor": "#516b91", | |||||
"borderWidth": 1 | |||||
} | |||||
}, | |||||
"label": { | |||||
"normal": { | |||||
"textStyle": { | |||||
"color": "#000" | |||||
} | |||||
}, | |||||
"emphasis": { | |||||
"textStyle": { | |||||
"color": "rgb(81,107,145)" | |||||
} | |||||
} | |||||
} | |||||
}, | |||||
"categoryAxis": { | |||||
"axisLine": { | |||||
"show": true, | |||||
"lineStyle": { | |||||
"color": "#cccccc" | |||||
} | |||||
}, | |||||
"axisTick": { | |||||
"show": false, | |||||
"lineStyle": { | |||||
"color": "#333" | |||||
} | |||||
}, | |||||
"axisLabel": { | |||||
"show": true, | |||||
"textStyle": { | |||||
"color": "#999999" | |||||
} | |||||
}, | |||||
"splitLine": { | |||||
"show": true, | |||||
"lineStyle": { | |||||
"color": [ | |||||
"#eeeeee" | |||||
] | |||||
} | |||||
}, | |||||
"splitArea": { | |||||
"show": false, | |||||
"areaStyle": { | |||||
"color": [ | |||||
"rgba(250,250,250,0.05)", | |||||
"rgba(200,200,200,0.02)" | |||||
] | |||||
} | |||||
} | |||||
}, | |||||
"valueAxis": { | |||||
"axisLine": { | |||||
"show": true, | |||||
"lineStyle": { | |||||
"color": "#cccccc" | |||||
} | |||||
}, | |||||
"axisTick": { | |||||
"show": false, | |||||
"lineStyle": { | |||||
"color": "#333" | |||||
} | |||||
}, | |||||
"axisLabel": { | |||||
"show": true, | |||||
"textStyle": { | |||||
"color": "#999999" | |||||
} | |||||
}, | |||||
"splitLine": { | |||||
"show": true, | |||||
"lineStyle": { | |||||
"color": [ | |||||
"#eeeeee" | |||||
] | |||||
} | |||||
}, | |||||
"splitArea": { | |||||
"show": false, | |||||
"areaStyle": { | |||||
"color": [ | |||||
"rgba(250,250,250,0.05)", | |||||
"rgba(200,200,200,0.02)" | |||||
] | |||||
} | |||||
} | |||||
}, | |||||
"logAxis": { | |||||
"axisLine": { | |||||
"show": true, | |||||
"lineStyle": { | |||||
"color": "#cccccc" | |||||
} | |||||
}, | |||||
"axisTick": { | |||||
"show": false, | |||||
"lineStyle": { | |||||
"color": "#333" | |||||
} | |||||
}, | |||||
"axisLabel": { | |||||
"show": true, | |||||
"textStyle": { | |||||
"color": "#999999" | |||||
} | |||||
}, | |||||
"splitLine": { | |||||
"show": true, | |||||
"lineStyle": { | |||||
"color": [ | |||||
"#eeeeee" | |||||
] | |||||
} | |||||
}, | |||||
"splitArea": { | |||||
"show": false, | |||||
"areaStyle": { | |||||
"color": [ | |||||
"rgba(250,250,250,0.05)", | |||||
"rgba(200,200,200,0.02)" | |||||
] | |||||
} | |||||
} | |||||
}, | |||||
"timeAxis": { | |||||
"axisLine": { | |||||
"show": true, | |||||
"lineStyle": { | |||||
"color": "#cccccc" | |||||
} | |||||
}, | |||||
"axisTick": { | |||||
"show": false, | |||||
"lineStyle": { | |||||
"color": "#333" | |||||
} | |||||
}, | |||||
"axisLabel": { | |||||
"show": true, | |||||
"textStyle": { | |||||
"color": "#999999" | |||||
} | |||||
}, | |||||
"splitLine": { | |||||
"show": true, | |||||
"lineStyle": { | |||||
"color": [ | |||||
"#eeeeee" | |||||
] | |||||
} | |||||
}, | |||||
"splitArea": { | |||||
"show": false, | |||||
"areaStyle": { | |||||
"color": [ | |||||
"rgba(250,250,250,0.05)", | |||||
"rgba(200,200,200,0.02)" | |||||
] | |||||
} | |||||
} | |||||
}, | |||||
"toolbox": { | |||||
"iconStyle": { | |||||
"normal": { | |||||
"borderColor": "#999" | |||||
}, | |||||
"emphasis": { | |||||
"borderColor": "#666" | |||||
} | |||||
} | |||||
}, | |||||
"legend": { | |||||
"textStyle": { | |||||
"color": "#999999" | |||||
} | |||||
}, | |||||
"tooltip": { | |||||
"axisPointer": { | |||||
"lineStyle": { | |||||
"color": "#ccc", | |||||
"width": 1 | |||||
}, | |||||
"crossStyle": { | |||||
"color": "#ccc", | |||||
"width": 1 | |||||
} | |||||
} | |||||
}, | |||||
"timeline": { | |||||
"lineStyle": { | |||||
"color": "#8fd3e8", | |||||
"width": 1 | |||||
}, | |||||
"itemStyle": { | |||||
"normal": { | |||||
"color": "#8fd3e8", | |||||
"borderWidth": 1 | |||||
}, | |||||
"emphasis": { | |||||
"color": "#8fd3e8" | |||||
} | |||||
}, | |||||
"controlStyle": { | |||||
"normal": { | |||||
"color": "#8fd3e8", | |||||
"borderColor": "#8fd3e8", | |||||
"borderWidth": 0.5 | |||||
}, | |||||
"emphasis": { | |||||
"color": "#8fd3e8", | |||||
"borderColor": "#8fd3e8", | |||||
"borderWidth": 0.5 | |||||
} | |||||
}, | |||||
"checkpointStyle": { | |||||
"color": "#8fd3e8", | |||||
"borderColor": "rgba(138,124,168,0.37)" | |||||
}, | |||||
"label": { | |||||
"normal": { | |||||
"textStyle": { | |||||
"color": "#8fd3e8" | |||||
} | |||||
}, | |||||
"emphasis": { | |||||
"textStyle": { | |||||
"color": "#8fd3e8" | |||||
} | |||||
} | |||||
} | |||||
}, | |||||
"visualMap": { | |||||
"color": [ | |||||
"#516b91", | |||||
"#59c4e6", | |||||
"#a5e7f0" | |||||
] | |||||
}, | |||||
"dataZoom": { | |||||
"backgroundColor": "rgba(0,0,0,0)", | |||||
"dataBackgroundColor": "rgba(255,255,255,0.3)", | |||||
"fillerColor": "rgba(167,183,204,0.4)", | |||||
"handleColor": "#a7b7cc", | |||||
"handleSize": "100%", | |||||
"textStyle": { | |||||
"color": "#333" | |||||
} | |||||
}, | |||||
"markPoint": { | |||||
"label": { | |||||
"normal": { | |||||
"textStyle": { | |||||
"color": "#eee" | |||||
} | |||||
}, | |||||
"emphasis": { | |||||
"textStyle": { | |||||
"color": "#eee" | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} |
@@ -0,0 +1,52 @@ | |||||
<template> | |||||
<component :is="iconType" :type="iconName" :color="iconColor" :size="iconSize"/> | |||||
</template> | |||||
<script> | |||||
import Icons from '_c/icons' | |||||
import FaIcons from '_c/fa-icons' | |||||
export default { | |||||
name: 'CommonIcon', | |||||
components: {Icons, FaIcons}, | |||||
props: { | |||||
type: { | |||||
type: String, | |||||
required: true | |||||
}, | |||||
color: String, | |||||
size: Number | |||||
}, | |||||
computed: { | |||||
iconType () { | |||||
if (this.isFa) { | |||||
return 'FaIcons' | |||||
} | |||||
return this.type.indexOf('_') === 0 ? 'Icons' : 'Icon' | |||||
}, | |||||
iconName () { | |||||
if (this.isFa) { | |||||
return this.type.substring(3) | |||||
} | |||||
return this.iconType === 'Icons' ? this.getCustomIconName(this.type) : this.type | |||||
}, | |||||
iconSize () { | |||||
return this.size || (this.iconType === 'Icons' ? 12 : undefined) | |||||
}, | |||||
iconColor () { | |||||
return this.color || '' | |||||
}, | |||||
isFa () { | |||||
return this.type.startsWith('fa-') | |||||
} | |||||
}, | |||||
methods: { | |||||
getCustomIconName (iconName) { | |||||
return iconName.slice(1) | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style> | |||||
</style> |
@@ -0,0 +1,2 @@ | |||||
import CommonIcon from './common-icon.vue' | |||||
export default CommonIcon |