diff --git a/.gitignore b/.gitignore index 54bb2f7..c204414 100755 --- a/.gitignore +++ b/.gitignore @@ -65,12 +65,12 @@ settings.py *.db # UI -ui/node_modules -ui/dist +cmdb-ui/node_modules +cmdb-ui/dist # Log files -ui/npm-debug.log* -ui/yarn-debug.log* -ui/yarn-error.log* -ui/yarn.lock -ui/package-lock.json +cmdb-ui/npm-debug.log* +cmdb-ui/yarn-debug.log* +cmdb-ui/yarn-error.log* +cmdb-ui/yarn.lock +cmdb-ui/package-lock.json diff --git a/Dockerfile b/Dockerfile index b510247..0bf6ed1 100644 --- a/Dockerfile +++ b/Dockerfile @@ -3,7 +3,7 @@ FROM node:alpine AS builder LABEL description="cmdb-ui" -COPY ui /data/apps/cmdb-ui +COPY cmdb-ui /data/apps/cmdb-ui WORKDIR /data/apps/cmdb-ui @@ -22,7 +22,7 @@ FROM python:3.7-alpine AS cmdb-api LABEL description="Python3.7,cmdb" -COPY . /data/apps/cmdb +COPY cmdb-api /data/apps/cmdb WORKDIR /data/apps/cmdb @@ -30,11 +30,11 @@ RUN apk add --no-cache tzdata gcc musl-dev libffi-dev ENV TZ=Asia/Shanghai -RUN pip install --no-cache-dir -r docs/requirements.txt \ - && cp ./api/settings.py.example ./api/settings.py \ - && sed -i "s#{user}:{password}@127.0.0.1:3306/{db}#cmdb:123456@mysql:3306/cmdb#g" api/settings.py \ - && sed -i "s#redis://127.0.0.1#redis://redis#g" api/settings.py \ - && sed -i 's#CACHE_REDIS_HOST = "127.0.0.1"#CACHE_REDIS_HOST = "redis"#g' api/settings.py +RUN pip install --no-cache-dir -r requirements.txt \ + && cp ./settings.py.example settings.py \ + && sed -i "s#{user}:{password}@127.0.0.1:3306/{db}#cmdb:123456@mysql:3306/cmdb#g" settings.py \ + && sed -i "s#redis://127.0.0.1#redis://redis#g" settings.py \ + && sed -i 's#CACHE_REDIS_HOST = "127.0.0.1"#CACHE_REDIS_HOST = "redis"#g' settings.py CMD ["bash", "-c", "flask run"] diff --git a/README.md b/README.md index 3cb8bc7..03e3406 100644 --- a/README.md +++ b/README.md @@ -28,19 +28,19 @@ Overview 3. 关系视图 - 模型之间的关系, 用树形图方式展示, **管理员可配置** ##### 资源视图 -![基础资源视图](https://raw.githubusercontent.com/pycook/cmdb/master/ui/public/cmdb-ci.jpeg) +![基础资源视图](https://raw.githubusercontent.com/pycook/cmdb/master/cmdb-ui/public/cmdb-ci.jpeg) ##### 树形视图 -![树形视图](https://raw.githubusercontent.com/pycook/cmdb/master/ui/public/cmdb-tree.jpeg) +![树形视图](https://raw.githubusercontent.com/pycook/cmdb/master/cmdb-ui/public/cmdb-tree.jpeg) ##### 关系视图 -![关系视图](https://raw.githubusercontent.com/pycook/cmdb/master/ui/public/cmdb-relation.jpeg) +![关系视图](https://raw.githubusercontent.com/pycook/cmdb/master/cmdb-ui/public/cmdb-relation.jpeg) ##### 用户订阅 -![用户订阅](https://raw.githubusercontent.com/pycook/cmdb/master/ui/public/cmdb-preference.jpeg) +![用户订阅](https://raw.githubusercontent.com/pycook/cmdb/master/cmdb-ui/public/cmdb-preference.jpeg) ##### 关系视图配置 -![关系视图配置](https://raw.githubusercontent.com/pycook/cmdb/master/ui/public/cmdb-relation-define.jpeg) +![关系视图配置](https://raw.githubusercontent.com/pycook/cmdb/master/cmdb-ui/public/cmdb-relation-define.jpeg) Docker一键快速构建 ---- @@ -66,24 +66,24 @@ Install ```bash git clone https://github.com/pycook/cmdb.git cd cmdb -cp api/settings.py.example api/settings.py +cp cmdb-api/settings.py.example cmdb-api/settings.py ``` -**设置api/settings.py里的database** +**设置cmdb-api/settings.py里的database** - 安装库 - - 后端: ```pipenv run pipenv install``` - - 前端: ```cd ui && yarn install && cd ..``` + - 后端: ```cd cmdb-api && pipenv run pipenv install && cd ..``` + - 前端: ```cd cmdb-ui && yarn install && cd ..``` - 创建数据库表 ```pipenv run flask db-setup && pipenv run flask init-cache``` -- 可以将docs/cmdb.sql导入到数据库里，登录用户和密码都是:admin +- 可以将docs/cmdb.sql导入到数据库里，登录用户和密码分别是:demo/123456 - 启动服务 - - 后端: ```pipenv run flask run -h 0.0.0.0``` - - 前端: ```cd ui && yarn run serve``` - - worker: ```celery worker -A celery_worker.celery -E -Q cmdb_async --concurrency=1``` + - 后端: 进入**cmdb-api**目录执行 ```pipenv run flask run -h 0.0.0.0``` + - 前端: 进入**cmdb-ui**目录执行```yarn run serve``` + - worker: 进入**cmdb-api**目录执行 ```pipenv run celery worker -A celery_worker.celery -E -Q cmdb_async --concurrency=1``` - 浏览器打开: [http://127.0.0.1:8000](http://127.0.0.1:8000) - - 如果是非本机访问, 要修改**ui/.env**里**VUE_APP_API_BASE_URL**里的IP地址为后端服务的ip地址 + - 如果是非本机访问, 要修改**cmdb-ui/.env**里**VUE_APP_API_BASE_URL**里的IP地址为后端服务的ip地址 Install by Makefile @@ -95,9 +95,9 @@ Install by Makefile ```bash git clone https://github.com/pycook/cmdb.git cd cmdb -cp api/settings.py.example api/settings.py +cp cmdb-api/settings.py.example cmdb-api/settings.py ``` -**设置api/settings.py里的database** +**cmdb-api/settings.py里的database** - 顺序在cmdb目录下执行 - 环境: ```make env``` @@ -109,4 +109,4 @@ cp api/settings.py.example api/settings.py ---- _**欢迎加入CMDB运维开发QQ群（336164978）**_ -![QQ群](ui/public/qr_code.jpg) \ No newline at end of file +![QQ群](cmdb-ui/public/qr_code.jpg) \ No newline at end of file diff --git a/.env b/cmdb-api/.env similarity index 100% rename from .env rename to cmdb-api/.env diff --git a/Pipfile b/cmdb-api/Pipfile similarity index 100% rename from Pipfile rename to cmdb-api/Pipfile diff --git a/api/__init__.py b/cmdb-api/api/__init__.py similarity index 100% rename from api/__init__.py rename to cmdb-api/api/__init__.py diff --git a/api/app.py b/cmdb-api/api/app.py similarity index 98% rename from api/app.py rename to cmdb-api/api/app.py index 95d6059..d331f6d 100644 --- a/api/app.py +++ b/cmdb-api/api/app.py @@ -6,6 +6,7 @@ import sys from inspect import getmembers from logging.handlers import RotatingFileHandler +from api.flask_cas import CAS from flask import Flask from flask import make_response, jsonify from flask.blueprints import Blueprint @@ -23,8 +24,7 @@ from api.extensions import ( rd, es ) -from api.flask_cas import CAS -from api.models.acl import User +from .models.acl import User HERE = os.path.abspath(os.path.dirname(__file__)) PROJECT_ROOT = os.path.join(HERE, os.pardir) @@ -72,7 +72,7 @@ class ReverseProxy(object): return self.app(environ, start_response) -def create_app(config_object="{0}.settings".format(API_PACKAGE)): +def create_app(config_object="settings"): """Create application factory, as explained here: http://flask.pocoo.org/docs/patterns/appfactories/. :param config_object: The configuration object to use. diff --git a/api/commands/__init__.py b/cmdb-api/api/commands/__init__.py similarity index 100% rename from api/commands/__init__.py rename to cmdb-api/api/commands/__init__.py diff --git a/api/commands/click_cmdb.py b/cmdb-api/api/commands/click_cmdb.py similarity index 100% rename from api/commands/click_cmdb.py rename to cmdb-api/api/commands/click_cmdb.py diff --git a/api/commands/common.py b/cmdb-api/api/commands/common.py similarity index 100% rename from api/commands/common.py rename to cmdb-api/api/commands/common.py diff --git a/api/extensions.py b/cmdb-api/api/extensions.py similarity index 100% rename from api/extensions.py rename to cmdb-api/api/extensions.py diff --git a/api/flask_cas/__init__.py b/cmdb-api/api/flask_cas/__init__.py similarity index 100% rename from api/flask_cas/__init__.py rename to cmdb-api/api/flask_cas/__init__.py diff --git a/api/flask_cas/cas_urls.py b/cmdb-api/api/flask_cas/cas_urls.py similarity index 100% rename from api/flask_cas/cas_urls.py rename to cmdb-api/api/flask_cas/cas_urls.py diff --git a/api/flask_cas/routing.py b/cmdb-api/api/flask_cas/routing.py similarity index 100% rename from api/flask_cas/routing.py rename to cmdb-api/api/flask_cas/routing.py diff --git a/api/lib/__init__.py b/cmdb-api/api/lib/__init__.py similarity index 100% rename from api/lib/__init__.py rename to cmdb-api/api/lib/__init__.py diff --git a/api/lib/cmdb/__init__.py b/cmdb-api/api/lib/cmdb/__init__.py similarity index 100% rename from api/lib/cmdb/__init__.py rename to cmdb-api/api/lib/cmdb/__init__.py diff --git a/api/lib/cmdb/attribute.py b/cmdb-api/api/lib/cmdb/attribute.py similarity index 100% rename from api/lib/cmdb/attribute.py rename to cmdb-api/api/lib/cmdb/attribute.py diff --git a/api/lib/cmdb/cache.py b/cmdb-api/api/lib/cmdb/cache.py similarity index 100% rename from api/lib/cmdb/cache.py rename to cmdb-api/api/lib/cmdb/cache.py diff --git a/api/lib/cmdb/ci.py b/cmdb-api/api/lib/cmdb/ci.py similarity index 100% rename from api/lib/cmdb/ci.py rename to cmdb-api/api/lib/cmdb/ci.py diff --git a/api/lib/cmdb/ci_type.py b/cmdb-api/api/lib/cmdb/ci_type.py similarity index 100% rename from api/lib/cmdb/ci_type.py rename to cmdb-api/api/lib/cmdb/ci_type.py diff --git a/api/lib/cmdb/const.py b/cmdb-api/api/lib/cmdb/const.py similarity index 100% rename from api/lib/cmdb/const.py rename to cmdb-api/api/lib/cmdb/const.py diff --git a/api/lib/cmdb/history.py b/cmdb-api/api/lib/cmdb/history.py similarity index 100% rename from api/lib/cmdb/history.py rename to cmdb-api/api/lib/cmdb/history.py diff --git a/api/lib/cmdb/preference.py b/cmdb-api/api/lib/cmdb/preference.py similarity index 100% rename from api/lib/cmdb/preference.py rename to cmdb-api/api/lib/cmdb/preference.py diff --git a/api/lib/cmdb/relation_type.py b/cmdb-api/api/lib/cmdb/relation_type.py similarity index 100% rename from api/lib/cmdb/relation_type.py rename to cmdb-api/api/lib/cmdb/relation_type.py diff --git a/api/lib/cmdb/search/__init__.py b/cmdb-api/api/lib/cmdb/search/__init__.py similarity index 100% rename from api/lib/cmdb/search/__init__.py rename to cmdb-api/api/lib/cmdb/search/__init__.py diff --git a/api/lib/cmdb/search/ci/__init__.py b/cmdb-api/api/lib/cmdb/search/ci/__init__.py similarity index 100% rename from api/lib/cmdb/search/ci/__init__.py rename to cmdb-api/api/lib/cmdb/search/ci/__init__.py diff --git a/api/lib/cmdb/search/ci/db/__init__.py b/cmdb-api/api/lib/cmdb/search/ci/db/__init__.py similarity index 100% rename from api/lib/cmdb/search/ci/db/__init__.py rename to cmdb-api/api/lib/cmdb/search/ci/db/__init__.py diff --git a/api/lib/cmdb/search/ci/db/query_sql.py b/cmdb-api/api/lib/cmdb/search/ci/db/query_sql.py similarity index 100% rename from api/lib/cmdb/search/ci/db/query_sql.py rename to cmdb-api/api/lib/cmdb/search/ci/db/query_sql.py diff --git a/api/lib/cmdb/search/ci/db/search.py b/cmdb-api/api/lib/cmdb/search/ci/db/search.py similarity index 100% rename from api/lib/cmdb/search/ci/db/search.py rename to cmdb-api/api/lib/cmdb/search/ci/db/search.py diff --git a/api/lib/cmdb/search/ci/es/__init__.py b/cmdb-api/api/lib/cmdb/search/ci/es/__init__.py similarity index 100% rename from api/lib/cmdb/search/ci/es/__init__.py rename to cmdb-api/api/lib/cmdb/search/ci/es/__init__.py diff --git a/api/lib/cmdb/search/ci/es/search.py b/cmdb-api/api/lib/cmdb/search/ci/es/search.py similarity index 100% rename from api/lib/cmdb/search/ci/es/search.py rename to cmdb-api/api/lib/cmdb/search/ci/es/search.py diff --git a/api/lib/cmdb/search/ci_relation/__init__.py b/cmdb-api/api/lib/cmdb/search/ci_relation/__init__.py similarity index 100% rename from api/lib/cmdb/search/ci_relation/__init__.py rename to cmdb-api/api/lib/cmdb/search/ci_relation/__init__.py diff --git a/api/lib/cmdb/search/ci_relation/search.py b/cmdb-api/api/lib/cmdb/search/ci_relation/search.py similarity index 100% rename from api/lib/cmdb/search/ci_relation/search.py rename to cmdb-api/api/lib/cmdb/search/ci_relation/search.py diff --git a/api/lib/cmdb/utils.py b/cmdb-api/api/lib/cmdb/utils.py similarity index 100% rename from api/lib/cmdb/utils.py rename to cmdb-api/api/lib/cmdb/utils.py diff --git a/api/lib/cmdb/value.py b/cmdb-api/api/lib/cmdb/value.py similarity index 100% rename from api/lib/cmdb/value.py rename to cmdb-api/api/lib/cmdb/value.py diff --git a/api/lib/database.py b/cmdb-api/api/lib/database.py similarity index 100% rename from api/lib/database.py rename to cmdb-api/api/lib/database.py diff --git a/api/lib/decorator.py b/cmdb-api/api/lib/decorator.py similarity index 100% rename from api/lib/decorator.py rename to cmdb-api/api/lib/decorator.py diff --git a/api/lib/exception.py b/cmdb-api/api/lib/exception.py similarity index 100% rename from api/lib/exception.py rename to cmdb-api/api/lib/exception.py diff --git a/api/lib/http_cli.py b/cmdb-api/api/lib/http_cli.py similarity index 100% rename from api/lib/http_cli.py rename to cmdb-api/api/lib/http_cli.py diff --git a/api/lib/mail.py b/cmdb-api/api/lib/mail.py similarity index 100% rename from api/lib/mail.py rename to cmdb-api/api/lib/mail.py diff --git a/api/lib/perm/__init__.py b/cmdb-api/api/lib/perm/__init__.py similarity index 100% rename from api/lib/perm/__init__.py rename to cmdb-api/api/lib/perm/__init__.py diff --git a/api/lib/perm/acl/__init__.py b/cmdb-api/api/lib/perm/acl/__init__.py similarity index 100% rename from api/lib/perm/acl/__init__.py rename to cmdb-api/api/lib/perm/acl/__init__.py diff --git a/api/lib/perm/acl/acl.py b/cmdb-api/api/lib/perm/acl/acl.py similarity index 100% rename from api/lib/perm/acl/acl.py rename to cmdb-api/api/lib/perm/acl/acl.py diff --git a/api/lib/perm/acl/cache.py b/cmdb-api/api/lib/perm/acl/cache.py similarity index 100% rename from api/lib/perm/acl/cache.py rename to cmdb-api/api/lib/perm/acl/cache.py diff --git a/api/lib/perm/acl/const.py b/cmdb-api/api/lib/perm/acl/const.py similarity index 100% rename from api/lib/perm/acl/const.py rename to cmdb-api/api/lib/perm/acl/const.py diff --git a/api/lib/perm/acl/permission.py b/cmdb-api/api/lib/perm/acl/permission.py similarity index 100% rename from api/lib/perm/acl/permission.py rename to cmdb-api/api/lib/perm/acl/permission.py diff --git a/api/lib/perm/acl/resource.py b/cmdb-api/api/lib/perm/acl/resource.py similarity index 100% rename from api/lib/perm/acl/resource.py rename to cmdb-api/api/lib/perm/acl/resource.py diff --git a/api/lib/perm/acl/role.py b/cmdb-api/api/lib/perm/acl/role.py similarity index 100% rename from api/lib/perm/acl/role.py rename to cmdb-api/api/lib/perm/acl/role.py diff --git a/api/lib/perm/acl/user.py b/cmdb-api/api/lib/perm/acl/user.py similarity index 100% rename from api/lib/perm/acl/user.py rename to cmdb-api/api/lib/perm/acl/user.py diff --git a/api/lib/perm/auth.py b/cmdb-api/api/lib/perm/auth.py similarity index 100% rename from api/lib/perm/auth.py rename to cmdb-api/api/lib/perm/auth.py diff --git a/api/lib/utils.py b/cmdb-api/api/lib/utils.py similarity index 100% rename from api/lib/utils.py rename to cmdb-api/api/lib/utils.py diff --git a/api/models/__init__.py b/cmdb-api/api/models/__init__.py similarity index 100% rename from api/models/__init__.py rename to cmdb-api/api/models/__init__.py diff --git a/api/models/acl.py b/cmdb-api/api/models/acl.py similarity index 100% rename from api/models/acl.py rename to cmdb-api/api/models/acl.py diff --git a/api/models/cmdb.py b/cmdb-api/api/models/cmdb.py similarity index 100% rename from api/models/cmdb.py rename to cmdb-api/api/models/cmdb.py diff --git a/api/resource.py b/cmdb-api/api/resource.py similarity index 100% rename from api/resource.py rename to cmdb-api/api/resource.py diff --git a/api/tasks/__init__.py b/cmdb-api/api/tasks/__init__.py similarity index 100% rename from api/tasks/__init__.py rename to cmdb-api/api/tasks/__init__.py diff --git a/api/tasks/acl.py b/cmdb-api/api/tasks/acl.py similarity index 100% rename from api/tasks/acl.py rename to cmdb-api/api/tasks/acl.py diff --git a/api/tasks/cmdb.py b/cmdb-api/api/tasks/cmdb.py similarity index 100% rename from api/tasks/cmdb.py rename to cmdb-api/api/tasks/cmdb.py diff --git a/api/tasks/test.py b/cmdb-api/api/tasks/test.py similarity index 100% rename from api/tasks/test.py rename to cmdb-api/api/tasks/test.py diff --git a/api/views/__init__.py b/cmdb-api/api/views/__init__.py similarity index 93% rename from api/views/__init__.py rename to cmdb-api/api/views/__init__.py index 4cde7ce..1388e62 100644 --- a/api/views/__init__.py +++ b/cmdb-api/api/views/__init__.py @@ -6,7 +6,7 @@ from flask import Blueprint from flask_restful import Api from api.resource import register_resources -from .account import LoginView, LogoutView +from api.views.account import LoginView, LogoutView HERE = os.path.abspath(os.path.dirname(__file__)) diff --git a/api/views/account.py b/cmdb-api/api/views/account.py similarity index 100% rename from api/views/account.py rename to cmdb-api/api/views/account.py diff --git a/api/views/acl/__init__.py b/cmdb-api/api/views/acl/__init__.py similarity index 100% rename from api/views/acl/__init__.py rename to cmdb-api/api/views/acl/__init__.py diff --git a/api/views/acl/permission.py b/cmdb-api/api/views/acl/permission.py similarity index 100% rename from api/views/acl/permission.py rename to cmdb-api/api/views/acl/permission.py diff --git a/api/views/acl/resources.py b/cmdb-api/api/views/acl/resources.py similarity index 100% rename from api/views/acl/resources.py rename to cmdb-api/api/views/acl/resources.py diff --git a/api/views/acl/role.py b/cmdb-api/api/views/acl/role.py similarity index 100% rename from api/views/acl/role.py rename to cmdb-api/api/views/acl/role.py diff --git a/api/views/acl/user.py b/cmdb-api/api/views/acl/user.py similarity index 100% rename from api/views/acl/user.py rename to cmdb-api/api/views/acl/user.py diff --git a/api/views/cmdb/__init__.py b/cmdb-api/api/views/cmdb/__init__.py similarity index 100% rename from api/views/cmdb/__init__.py rename to cmdb-api/api/views/cmdb/__init__.py diff --git a/api/views/cmdb/attribute.py b/cmdb-api/api/views/cmdb/attribute.py similarity index 100% rename from api/views/cmdb/attribute.py rename to cmdb-api/api/views/cmdb/attribute.py diff --git a/api/views/cmdb/ci.py b/cmdb-api/api/views/cmdb/ci.py similarity index 100% rename from api/views/cmdb/ci.py rename to cmdb-api/api/views/cmdb/ci.py diff --git a/api/views/cmdb/ci_relation.py b/cmdb-api/api/views/cmdb/ci_relation.py similarity index 100% rename from api/views/cmdb/ci_relation.py rename to cmdb-api/api/views/cmdb/ci_relation.py diff --git a/api/views/cmdb/ci_type.py b/cmdb-api/api/views/cmdb/ci_type.py similarity index 100% rename from api/views/cmdb/ci_type.py rename to cmdb-api/api/views/cmdb/ci_type.py diff --git a/api/views/cmdb/ci_type_relation.py b/cmdb-api/api/views/cmdb/ci_type_relation.py similarity index 100% rename from api/views/cmdb/ci_type_relation.py rename to cmdb-api/api/views/cmdb/ci_type_relation.py diff --git a/api/views/cmdb/history.py b/cmdb-api/api/views/cmdb/history.py similarity index 100% rename from api/views/cmdb/history.py rename to cmdb-api/api/views/cmdb/history.py diff --git a/api/views/cmdb/preference.py b/cmdb-api/api/views/cmdb/preference.py similarity index 100% rename from api/views/cmdb/preference.py rename to cmdb-api/api/views/cmdb/preference.py diff --git a/api/views/cmdb/relation_type.py b/cmdb-api/api/views/cmdb/relation_type.py similarity index 100% rename from api/views/cmdb/relation_type.py rename to cmdb-api/api/views/cmdb/relation_type.py diff --git a/autoapp.py b/cmdb-api/autoapp.py similarity index 100% rename from autoapp.py rename to cmdb-api/autoapp.py diff --git a/celery_worker.py b/cmdb-api/celery_worker.py similarity index 100% rename from celery_worker.py rename to cmdb-api/celery_worker.py diff --git a/logs/.gitkeep b/cmdb-api/logs/.gitkeep similarity index 100% rename from logs/.gitkeep rename to cmdb-api/logs/.gitkeep diff --git a/docs/requirements.txt b/cmdb-api/requirements.txt similarity index 100% rename from docs/requirements.txt rename to cmdb-api/requirements.txt diff --git a/api/settings.py.example b/cmdb-api/settings.py.example similarity index 100% rename from api/settings.py.example rename to cmdb-api/settings.py.example diff --git a/setup.cfg b/cmdb-api/setup.cfg similarity index 100% rename from setup.cfg rename to cmdb-api/setup.cfg diff --git a/tests/__init__.py b/cmdb-api/tests/__init__.py similarity index 100% rename from tests/__init__.py rename to cmdb-api/tests/__init__.py diff --git a/tests/conftest.py b/cmdb-api/tests/conftest.py similarity index 100% rename from tests/conftest.py rename to cmdb-api/tests/conftest.py diff --git a/tests/test_cmdb_attribute.py b/cmdb-api/tests/test_cmdb_attribute.py similarity index 100% rename from tests/test_cmdb_attribute.py rename to cmdb-api/tests/test_cmdb_attribute.py diff --git a/tests/test_cmdb_ci.py b/cmdb-api/tests/test_cmdb_ci.py similarity index 100% rename from tests/test_cmdb_ci.py rename to cmdb-api/tests/test_cmdb_ci.py diff --git a/tests/test_cmdb_ci_realtion.py b/cmdb-api/tests/test_cmdb_ci_realtion.py similarity index 100% rename from tests/test_cmdb_ci_realtion.py rename to cmdb-api/tests/test_cmdb_ci_realtion.py diff --git a/tests/test_cmdb_ci_type.py b/cmdb-api/tests/test_cmdb_ci_type.py similarity index 100% rename from tests/test_cmdb_ci_type.py rename to cmdb-api/tests/test_cmdb_ci_type.py diff --git a/tests/test_cmdb_ci_type_relation.py b/cmdb-api/tests/test_cmdb_ci_type_relation.py similarity index 100% rename from tests/test_cmdb_ci_type_relation.py rename to cmdb-api/tests/test_cmdb_ci_type_relation.py diff --git a/tests/test_cmdb_history.py b/cmdb-api/tests/test_cmdb_history.py similarity index 100% rename from tests/test_cmdb_history.py rename to cmdb-api/tests/test_cmdb_history.py diff --git a/tests/test_cmdb_preference.py b/cmdb-api/tests/test_cmdb_preference.py similarity index 100% rename from tests/test_cmdb_preference.py rename to cmdb-api/tests/test_cmdb_preference.py diff --git a/tests/test_cmdb_relation_type.py b/cmdb-api/tests/test_cmdb_relation_type.py similarity index 100% rename from tests/test_cmdb_relation_type.py rename to cmdb-api/tests/test_cmdb_relation_type.py diff --git a/cmdb-ui/.editorconfig b/cmdb-ui/.editorconfig new file mode 100644 index 0000000..6f77dff --- /dev/null +++ b/cmdb-ui/.editorconfig @@ -0,0 +1,39 @@ +[*] +charset=utf-8 +end_of_line=lf +insert_final_newline=false +indent_style=space +indent_size=2 + +[{*.ng,*.sht,*.html,*.shtm,*.shtml,*.htm}] +indent_style=space +indent_size=2 + +[{*.jhm,*.xslt,*.xul,*.rng,*.xsl,*.xsd,*.ant,*.tld,*.fxml,*.jrxml,*.xml,*.jnlp,*.wsdl}] +indent_style=space +indent_size=2 + +[{.babelrc,.stylelintrc,jest.config,.eslintrc,.prettierrc,*.json,*.jsb3,*.jsb2,*.bowerrc}] +indent_style=space +indent_size=2 + +[*.svg] +indent_style=space +indent_size=2 + +[*.js.map] +indent_style=space +indent_size=2 + +[*.less] +indent_style=space +indent_size=2 + +[*.vue] +indent_style=space +indent_size=2 + +[{.analysis_options,*.yml,*.yaml}] +indent_style=space +indent_size=2 + diff --git a/cmdb-ui/.env b/cmdb-ui/.env new file mode 100644 index 0000000..580d9f3 --- /dev/null +++ b/cmdb-ui/.env @@ -0,0 +1,3 @@ +NODE_ENV=production +VUE_APP_PREVIEW=false +VUE_APP_API_BASE_URL=http://127.0.0.1:5000/api diff --git a/cmdb-ui/.env.preview b/cmdb-ui/.env.preview new file mode 100644 index 0000000..196e0da --- /dev/null +++ b/cmdb-ui/.env.preview @@ -0,0 +1,3 @@ +NODE_ENV=production +VUE_APP_PREVIEW=true +VUE_APP_API_BASE_URL=http://127.0.0.1:5001/api diff --git a/cmdb-ui/.prettierrc b/cmdb-ui/.prettierrc new file mode 100644 index 0000000..cbe842a --- /dev/null +++ b/cmdb-ui/.prettierrc @@ -0,0 +1,5 @@ +{ + "printWidth": 120, + "semi": false, + "singleQuote": true +} diff --git a/cmdb-ui/.travis.yml b/cmdb-ui/.travis.yml new file mode 100644 index 0000000..a08bfcb --- /dev/null +++ b/cmdb-ui/.travis.yml @@ -0,0 +1,7 @@ +language: node_js +node_js: + - 10.15.0 +cache: yarn +script: + - yarn + - yarn run lint --no-fix && yarn run build diff --git a/cmdb-ui/LICENSE b/cmdb-ui/LICENSE new file mode 100644 index 0000000..66eef0b --- /dev/null +++ b/cmdb-ui/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2018 Anan Yang + +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. \ No newline at end of file diff --git a/cmdb-ui/babel.config.js b/cmdb-ui/babel.config.js new file mode 100644 index 0000000..46e423b --- /dev/null +++ b/cmdb-ui/babel.config.js @@ -0,0 +1,25 @@ +module.exports = { + presets: [ + '@vue/app', + [ + '@babel/preset-env', + { + 'useBuiltIns': 'usage', // "usage" | "entry" | false, defaults to false. + 'corejs': '3.1.2', + 'targets': { + 'esmodules': true, + 'ie': '11' + } + } + ] + ] + // if your use import on Demand, Use this code + // , + // plugins: [ + // [ 'import', { + // 'libraryName': 'ant-design-vue', + // 'libraryDirectory': 'es', + // 'style': true // `style: true` 会加载 less 文件 + // } ] + // ] +} diff --git a/cmdb-ui/jest.config.js b/cmdb-ui/jest.config.js new file mode 100644 index 0000000..29fee32 --- /dev/null +++ b/cmdb-ui/jest.config.js @@ -0,0 +1,23 @@ +module.exports = { + moduleFileExtensions: [ + 'js', + 'jsx', + 'json', + 'vue' + ], + transform: { + '^.+\\.vue$': 'vue-jest', + '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub', + '^.+\\.jsx?$': 'babel-jest' + }, + moduleNameMapper: { + '^@/(.*)$': '/src/$1' + }, + snapshotSerializers: [ + 'jest-serializer-vue' + ], + testMatch: [ + '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)' + ], + testURL: 'http://localhost/' +} diff --git a/cmdb-ui/jsconfig.json b/cmdb-ui/jsconfig.json new file mode 100644 index 0000000..1bd0da4 --- /dev/null +++ b/cmdb-ui/jsconfig.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "target": "es6", + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + } + }, + "exclude": ["node_modules", "dist"], + "include": ["src/**/*"] +} diff --git a/cmdb-ui/package.json b/cmdb-ui/package.json new file mode 100644 index 0000000..9c5dcba --- /dev/null +++ b/cmdb-ui/package.json @@ -0,0 +1,146 @@ +{ + "name": "vue-antd-pro", + "version": "2.0.0", + "private": true, + "scripts": { + "serve": "vue-cli-service serve", + "build": "vue-cli-service build", + "build:preview": "vue-cli-service build --mode preview", + "lint": "vue-cli-service lint", + "lint:nofix": "vue-cli-service lint --no-fix", + "test:unit": "vue-cli-service test:unit", + "postinstall": "opencollective-postinstall" + }, + "dependencies": { + "@antv/data-set": "^0.10.2", + "@handsontable-pro/vue": "^3.1.1", + "@handsontable/vue": "^4.1.1", + "ant-design-vue": "^1.4.2", + "axios": "^0.19.0", + "core-js": "^3.1.2", + "enquire.js": "^2.1.6", + "handsontable": "^7.2.2", + "handsontable-pro": "^6.2.3", + "js-cookie": "^2.2.0", + "json2csv": "^4.5.2", + "lodash.get": "^4.4.2", + "lodash.pick": "^4.4.0", + "md5": "^2.2.1", + "moment": "^2.24.0", + "nprogress": "^0.2.0", + "vis-network": "^6.4.4", + "viser-vue": "^2.3.3", + "vue": "^2.6.10", + "vue-clipboard2": "^0.2.1", + "vue-cropper": "0.4.4", + "vue-json-excel": "^0.2.98", + "vue-ls": "^3.2.0", + "vue-quill-editor": "^3.0.6", + "vue-router": "^3.0.1", + "vue-svg-component-runtime": "^1.0.1", + "vuedraggable": "^2.23.0", + "vuex": "^3.1.1", + "wangeditor": "^3.1.1", + "xlsx": "latest", + "yarn": "^1.19.1" + }, + "devDependencies": { + "@ant-design/colors": "^3.2.1", + "@vue/cli-plugin-babel": "^4.0.4", + "@vue/cli-plugin-eslint": "^4.0.4", + "@vue/cli-plugin-router": "^4.0.4", + "@vue/cli-plugin-unit-jest": "^4.0.4", + "@vue/cli-plugin-vuex": "^4.0.4", + "@vue/cli-service": "^4.0.4", + "@vue/eslint-config-standard": "^4.0.0", + "@vue/test-utils": "^1.0.0-beta.29", + "babel-eslint": "^10.0.1", + "babel-plugin-import": "^1.12.2", + "babel-plugin-transform-remove-console": "^6.9.4", + "eslint": "^5.16.0", + "eslint-plugin-html": "^5.0.0", + "eslint-plugin-vue": "^5.2.3", + "less": "^3.0.4", + "less-loader": "^5.0.0", + "vue-template-compiler": "^2.6.10", + "vue-svg-icon-loader": "^2.1.1", + "webpack-theme-color-replacer": "^1.2.17", + "opencollective": "^1.0.3", + "opencollective-postinstall": "^2.0.2" + }, + "eslintConfig": { + "root": true, + "env": { + "node": true + }, + "extends": [ + "plugin:vue/strongly-recommended", + "@vue/standard" + ], + "parserOptions": { + "parser": "babel-eslint" + }, + "rules": { + "generator-star-spacing": "off", + "no-mixed-operators": 0, + "vue/max-attributes-per-line": [ + 2, + { + "singleline": 5, + "multiline": { + "max": 1, + "allowFirstLine": false + } + } + ], + "vue/attribute-hyphenation": 0, + "vue/html-self-closing": 0, + "vue/component-name-in-template-casing": 0, + "vue/html-closing-bracket-spacing": 0, + "vue/singleline-html-element-content-newline": 0, + "vue/no-unused-components": 0, + "vue/multiline-html-element-content-newline": 0, + "vue/no-use-v-if-with-v-for": 0, + "vue/html-closing-bracket-newline": 0, + "vue/no-parsing-error": 0, + "no-console": 0, + "no-tabs": 0, + "quotes": [ + 2, + "single", + { + "avoidEscape": true, + "allowTemplateLiterals": true + } + ], + "semi": [ + 2, + "never", + { + "beforeStatementContinuationChars": "never" + } + ], + "no-delete-var": 2, + "prefer-const": [ + 2, + { + "ignoreReadBeforeAssign": false + } + ] + } + }, + "postcss": { + "plugins": { + "autoprefixer": {} + } + }, + "browserslist": [ + "> 1%", + "last 2 versions", + "not ie <= 10" + ], + "collective": { + "type": "opencollective", + "url": "https://opencollective.com/ant-design-pro-vue" + } +} diff --git a/cmdb-ui/public/cmdb-ci.jpeg b/cmdb-ui/public/cmdb-ci.jpeg new file mode 100644 index 0000000..4da2a1c Binary files /dev/null and b/cmdb-ui/public/cmdb-ci.jpeg differ diff --git a/cmdb-ui/public/cmdb-preference.jpeg b/cmdb-ui/public/cmdb-preference.jpeg new file mode 100644 index 0000000..3efefb1 Binary files /dev/null and b/cmdb-ui/public/cmdb-preference.jpeg differ diff --git a/cmdb-ui/public/cmdb-relation-define.jpeg b/cmdb-ui/public/cmdb-relation-define.jpeg new file mode 100644 index 0000000..357c18a Binary files /dev/null and b/cmdb-ui/public/cmdb-relation-define.jpeg differ diff --git a/cmdb-ui/public/cmdb-relation.jpeg b/cmdb-ui/public/cmdb-relation.jpeg new file mode 100644 index 0000000..53deac8 Binary files /dev/null and b/cmdb-ui/public/cmdb-relation.jpeg differ diff --git a/cmdb-ui/public/cmdb-tree.jpeg b/cmdb-ui/public/cmdb-tree.jpeg new file mode 100644 index 0000000..61cfec3 Binary files /dev/null and b/cmdb-ui/public/cmdb-tree.jpeg differ diff --git a/cmdb-ui/public/cmdb01.jpeg b/cmdb-ui/public/cmdb01.jpeg new file mode 100644 index 0000000..e939125 Binary files /dev/null and b/cmdb-ui/public/cmdb01.jpeg differ diff --git a/cmdb-ui/public/cmdb02.jpeg b/cmdb-ui/public/cmdb02.jpeg new file mode 100644 index 0000000..44cd216 Binary files /dev/null and b/cmdb-ui/public/cmdb02.jpeg differ diff --git a/cmdb-ui/public/color.less b/cmdb-ui/public/color.less new file mode 100644 index 0000000..c7e6b1b --- /dev/null +++ b/cmdb-ui/public/color.less @@ -0,0 +1,7684 @@ +@primary-color: #1890ff; +/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ +/* stylelint-disable no-duplicate-selectors */ +/* stylelint-disable */ +.bezierEasingMixin() { + @functions: ~`(function() { + var NEWTON_ITERATIONS = 4; + var NEWTON_MIN_SLOPE = 0.001; + var SUBDIVISION_PRECISION = 0.0000001; + var SUBDIVISION_MAX_ITERATIONS = 10; + + var kSplineTableSize = 11; + var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0); + + var float32ArraySupported = typeof Float32Array === 'function'; + + function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; } + function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; } + function C (aA1) { return 3.0 * aA1; } + + // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2. + function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; } + + // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2. + function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); } + + function binarySubdivide (aX, aA, aB, mX1, mX2) { + var currentX, currentT, i = 0; + do { + currentT = aA + (aB - aA) / 2.0; + currentX = calcBezier(currentT, mX1, mX2) - aX; + if (currentX > 0.0) { + aB = currentT; + } else { + aA = currentT; + } + } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS); + return currentT; + } + + function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) { + for (var i = 0; i < NEWTON_ITERATIONS; ++i) { + var currentSlope = getSlope(aGuessT, mX1, mX2); + if (currentSlope === 0.0) { + return aGuessT; + } + var currentX = calcBezier(aGuessT, mX1, mX2) - aX; + aGuessT -= currentX / currentSlope; + } + return aGuessT; + } + + var BezierEasing = function (mX1, mY1, mX2, mY2) { + if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) { + throw new Error('bezier x values must be in [0, 1] range'); + } + + // Precompute samples table + var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize); + if (mX1 !== mY1 || mX2 !== mY2) { + for (var i = 0; i < kSplineTableSize; ++i) { + sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2); + } + } + + function getTForX (aX) { + var intervalStart = 0.0; + var currentSample = 1; + var lastSample = kSplineTableSize - 1; + + for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) { + intervalStart += kSampleStepSize; + } + --currentSample; + + // Interpolate to provide an initial guess for t + var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]); + var guessForT = intervalStart + dist * kSampleStepSize; + + var initialSlope = getSlope(guessForT, mX1, mX2); + if (initialSlope >= NEWTON_MIN_SLOPE) { + return newtonRaphsonIterate(aX, guessForT, mX1, mX2); + } else if (initialSlope === 0.0) { + return guessForT; + } else { + return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2); + } + } + + return function BezierEasing (x) { + if (mX1 === mY1 && mX2 === mY2) { + return x; // linear + } + // Because JavaScript number are imprecise, we should guarantee the extremes are right. + if (x === 0) { + return 0; + } + if (x === 1) { + return 1; + } + return calcBezier(getTForX(x), mY1, mY2); + }; + }; + + this.colorEasing = BezierEasing(0.26, 0.09, 0.37, 0.18); + // less 3 requires a return + return ''; +})()`; +} +// It is hacky way to make this function will be compiled preferentially by less +// resolve error: `ReferenceError: colorPalette is not defined` +// https://github.com/ant-design/ant-motion/issues/44 +.bezierEasingMixin(); + +/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */ +.tinyColorMixin() { + @functions: ~`(function() { +// TinyColor v1.4.1 +// https://github.com/bgrins/TinyColor +// 2016-07-07, Brian Grinstead, MIT License +var trimLeft = /^\s+/, + trimRight = /\s+$/, + tinyCounter = 0, + mathRound = Math.round, + mathMin = Math.min, + mathMax = Math.max, + mathRandom = Math.random; + +function tinycolor (color, opts) { + + color = (color) ? color : ''; + opts = opts || { }; + + // If input is already a tinycolor, return itself + if (color instanceof tinycolor) { + return color; + } + // If we are called as a function, call using new instead + if (!(this instanceof tinycolor)) { + return new tinycolor(color, opts); + } + + var rgb = inputToRGB(color); + this._originalInput = color, + this._r = rgb.r, + this._g = rgb.g, + this._b = rgb.b, + this._a = rgb.a, + this._roundA = mathRound(100*this._a) / 100, + this._format = opts.format || rgb.format; + this._gradientType = opts.gradientType; + + // Don't let the range of [0,255] come back in [0,1]. + // Potentially lose a little bit of precision here, but will fix issues where + // .5 gets interpreted as half of the total, instead of half of 1 + // If it was supposed to be 128, this was already taken care of by inputToRgb + if (this._r < 1) { this._r = mathRound(this._r); } + if (this._g < 1) { this._g = mathRound(this._g); } + if (this._b < 1) { this._b = mathRound(this._b); } + + this._ok = rgb.ok; + this._tc_id = tinyCounter++; +} + +tinycolor.prototype = { + isDark: function() { + return this.getBrightness() < 128; + }, + isLight: function() { + return !this.isDark(); + }, + isValid: function() { + return this._ok; + }, + getOriginalInput: function() { + return this._originalInput; + }, + getFormat: function() { + return this._format; + }, + getAlpha: function() { + return this._a; + }, + getBrightness: function() { + //http://www.w3.org/TR/AERT#color-contrast + var rgb = this.toRgb(); + return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000; + }, + getLuminance: function() { + //http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef + var rgb = this.toRgb(); + var RsRGB, GsRGB, BsRGB, R, G, B; + RsRGB = rgb.r/255; + GsRGB = rgb.g/255; + BsRGB = rgb.b/255; + + if (RsRGB <= 0.03928) {R = RsRGB / 12.92;} else {R = Math.pow(((RsRGB + 0.055) / 1.055), 2.4);} + if (GsRGB <= 0.03928) {G = GsRGB / 12.92;} else {G = Math.pow(((GsRGB + 0.055) / 1.055), 2.4);} + if (BsRGB <= 0.03928) {B = BsRGB / 12.92;} else {B = Math.pow(((BsRGB + 0.055) / 1.055), 2.4);} + return (0.2126 * R) + (0.7152 * G) + (0.0722 * B); + }, + setAlpha: function(value) { + this._a = boundAlpha(value); + this._roundA = mathRound(100*this._a) / 100; + return this; + }, + toHsv: function() { + var hsv = rgbToHsv(this._r, this._g, this._b); + return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this._a }; + }, + toHsvString: function() { + var hsv = rgbToHsv(this._r, this._g, this._b); + var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100); + return (this._a == 1) ? + "hsv(" + h + ", " + s + "%, " + v + "%)" : + "hsva(" + h + ", " + s + "%, " + v + "%, "+ this._roundA + ")"; + }, + toHsl: function() { + var hsl = rgbToHsl(this._r, this._g, this._b); + return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this._a }; + }, + toHslString: function() { + var hsl = rgbToHsl(this._r, this._g, this._b); + var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100); + return (this._a == 1) ? + "hsl(" + h + ", " + s + "%, " + l + "%)" : + "hsla(" + h + ", " + s + "%, " + l + "%, "+ this._roundA + ")"; + }, + toHex: function(allow3Char) { + return rgbToHex(this._r, this._g, this._b, allow3Char); + }, + toHexString: function(allow3Char) { + return '#' + this.toHex(allow3Char); + }, + toHex8: function(allow4Char) { + return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char); + }, + toHex8String: function(allow4Char) { + return '#' + this.toHex8(allow4Char); + }, + toRgb: function() { + return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a }; + }, + toRgbString: function() { + return (this._a == 1) ? + "rgb(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" : + "rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")"; + }, + toPercentageRgb: function() { + return { r: mathRound(bound01(this._r, 255) * 100) + "%", g: mathRound(bound01(this._g, 255) * 100) + "%", b: mathRound(bound01(this._b, 255) * 100) + "%", a: this._a }; + }, + toPercentageRgbString: function() { + return (this._a == 1) ? + "rgb(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%)" : + "rgba(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")"; + }, + toName: function() { + if (this._a === 0) { + return "transparent"; + } + + if (this._a < 1) { + return false; + } + + return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false; + }, + toFilter: function(secondColor) { + var hex8String = '#' + rgbaToArgbHex(this._r, this._g, this._b, this._a); + var secondHex8String = hex8String; + var gradientType = this._gradientType ? "GradientType = 1, " : ""; + + if (secondColor) { + var s = tinycolor(secondColor); + secondHex8String = '#' + rgbaToArgbHex(s._r, s._g, s._b, s._a); + } + + return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr="+hex8String+",endColorstr="+secondHex8String+")"; + }, + toString: function(format) { + var formatSet = !!format; + format = format || this._format; + + var formattedString = false; + var hasAlpha = this._a < 1 && this._a >= 0; + var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "hex4" || format === "hex8" || format === "name"); + + if (needsAlphaFormat) { + // Special case for "transparent", all other non-alpha formats + // will return rgba when there is transparency. + if (format === "name" && this._a === 0) { + return this.toName(); + } + return this.toRgbString(); + } + if (format === "rgb") { + formattedString = this.toRgbString(); + } + if (format === "prgb") { + formattedString = this.toPercentageRgbString(); + } + if (format === "hex" || format === "hex6") { + formattedString = this.toHexString(); + } + if (format === "hex3") { + formattedString = this.toHexString(true); + } + if (format === "hex4") { + formattedString = this.toHex8String(true); + } + if (format === "hex8") { + formattedString = this.toHex8String(); + } + if (format === "name") { + formattedString = this.toName(); + } + if (format === "hsl") { + formattedString = this.toHslString(); + } + if (format === "hsv") { + formattedString = this.toHsvString(); + } + + return formattedString || this.toHexString(); + }, + clone: function() { + return tinycolor(this.toString()); + }, + + _applyModification: function(fn, args) { + var color = fn.apply(null, [this].concat([].slice.call(args))); + this._r = color._r; + this._g = color._g; + this._b = color._b; + this.setAlpha(color._a); + return this; + }, + lighten: function() { + return this._applyModification(lighten, arguments); + }, + brighten: function() { + return this._applyModification(brighten, arguments); + }, + darken: function() { + return this._applyModification(darken, arguments); + }, + desaturate: function() { + return this._applyModification(desaturate, arguments); + }, + saturate: function() { + return this._applyModification(saturate, arguments); + }, + greyscale: function() { + return this._applyModification(greyscale, arguments); + }, + spin: function() { + return this._applyModification(spin, arguments); + }, + + _applyCombination: function(fn, args) { + return fn.apply(null, [this].concat([].slice.call(args))); + }, + analogous: function() { + return this._applyCombination(analogous, arguments); + }, + complement: function() { + return this._applyCombination(complement, arguments); + }, + monochromatic: function() { + return this._applyCombination(monochromatic, arguments); + }, + splitcomplement: function() { + return this._applyCombination(splitcomplement, arguments); + }, + triad: function() { + return this._applyCombination(triad, arguments); + }, + tetrad: function() { + return this._applyCombination(tetrad, arguments); + } +}; + +// If input is an object, force 1 into "1.0" to handle ratios properly +// String input requires "1.0" as input, so 1 will be treated as 1 +tinycolor.fromRatio = function(color, opts) { + if (typeof color == "object") { + var newColor = {}; + for (var i in color) { + if (color.hasOwnProperty(i)) { + if (i === "a") { + newColor[i] = color[i]; + } + else { + newColor[i] = convertToPercentage(color[i]); + } + } + } + color = newColor; + } + + return tinycolor(color, opts); +}; + +// Given a string or object, convert that input to RGB +// Possible string inputs: +// +// "red" +// "#f00" or "f00" +// "#ff0000" or "ff0000" +// "#ff000000" or "ff000000" +// "rgb 255 0 0" or "rgb (255, 0, 0)" +// "rgb 1.0 0 0" or "rgb (1, 0, 0)" +// "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1" +// "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1" +// "hsl(0, 100%, 50%)" or "hsl 0 100% 50%" +// "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1" +// "hsv(0, 100%, 100%)" or "hsv 0 100% 100%" +// +function inputToRGB(color) { + + var rgb = { r: 0, g: 0, b: 0 }; + var a = 1; + var s = null; + var v = null; + var l = null; + var ok = false; + var format = false; + + if (typeof color == "string") { + color = stringInputToObject(color); + } + + if (typeof color == "object") { + if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) { + rgb = rgbToRgb(color.r, color.g, color.b); + ok = true; + format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb"; + } + else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) { + s = convertToPercentage(color.s); + v = convertToPercentage(color.v); + rgb = hsvToRgb(color.h, s, v); + ok = true; + format = "hsv"; + } + else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) { + s = convertToPercentage(color.s); + l = convertToPercentage(color.l); + rgb = hslToRgb(color.h, s, l); + ok = true; + format = "hsl"; + } + + if (color.hasOwnProperty("a")) { + a = color.a; + } + } + + a = boundAlpha(a); + + return { + ok: ok, + format: color.format || format, + r: mathMin(255, mathMax(rgb.r, 0)), + g: mathMin(255, mathMax(rgb.g, 0)), + b: mathMin(255, mathMax(rgb.b, 0)), + a: a + }; +} + +// Conversion Functions +// -------------------- + +// rgbToHsl, rgbToHsv, hslToRgb, hsvToRgb modified from: +// + +// rgbToRgb +// Handle bounds / percentage checking to conform to CSS color spec +// +// *Assumes:* r, g, b in [0, 255] or [0, 1] +// *Returns:* { r, g, b } in [0, 255] +function rgbToRgb(r, g, b){ + return { + r: bound01(r, 255) * 255, + g: bound01(g, 255) * 255, + b: bound01(b, 255) * 255 + }; +} + +// rgbToHsl +// Converts an RGB color value to HSL. +// *Assumes:* r, g, and b are contained in [0, 255] or [0, 1] +// *Returns:* { h, s, l } in [0,1] +function rgbToHsl(r, g, b) { + + r = bound01(r, 255); + g = bound01(g, 255); + b = bound01(b, 255); + + var max = mathMax(r, g, b), min = mathMin(r, g, b); + var h, s, l = (max + min) / 2; + + if(max == min) { + h = s = 0; // achromatic + } + else { + var d = max - min; + s = l > 0.5 ? d / (2 - max - min) : d / (max + min); + switch(max) { + case r: h = (g - b) / d + (g < b ? 6 : 0); break; + case g: h = (b - r) / d + 2; break; + case b: h = (r - g) / d + 4; break; + } + + h /= 6; + } + + return { h: h, s: s, l: l }; +} + +// hslToRgb +// Converts an HSL color value to RGB. +// *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100] +// *Returns:* { r, g, b } in the set [0, 255] +function hslToRgb(h, s, l) { + var r, g, b; + + h = bound01(h, 360); + s = bound01(s, 100); + l = bound01(l, 100); + + function hue2rgb(p, q, t) { + if(t < 0) t += 1; + if(t > 1) t -= 1; + if(t < 1/6) return p + (q - p) * 6 * t; + if(t < 1/2) return q; + if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; + return p; + } + + if(s === 0) { + r = g = b = l; // achromatic + } + else { + var q = l < 0.5 ? l * (1 + s) : l + s - l * s; + var p = 2 * l - q; + r = hue2rgb(p, q, h + 1/3); + g = hue2rgb(p, q, h); + b = hue2rgb(p, q, h - 1/3); + } + + return { r: r * 255, g: g * 255, b: b * 255 }; +} + +// rgbToHsv +// Converts an RGB color value to HSV +// *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1] +// *Returns:* { h, s, v } in [0,1] +function rgbToHsv(r, g, b) { + + r = bound01(r, 255); + g = bound01(g, 255); + b = bound01(b, 255); + + var max = mathMax(r, g, b), min = mathMin(r, g, b); + var h, s, v = max; + + var d = max - min; + s = max === 0 ? 0 : d / max; + + if(max == min) { + h = 0; // achromatic + } + else { + switch(max) { + case r: h = (g - b) / d + (g < b ? 6 : 0); break; + case g: h = (b - r) / d + 2; break; + case b: h = (r - g) / d + 4; break; + } + h /= 6; + } + return { h: h, s: s, v: v }; +} + +// hsvToRgb +// Converts an HSV color value to RGB. +// *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100] +// *Returns:* { r, g, b } in the set [0, 255] + function hsvToRgb(h, s, v) { + + h = bound01(h, 360) * 6; + s = bound01(s, 100); + v = bound01(v, 100); + + var i = Math.floor(h), + f = h - i, + p = v * (1 - s), + q = v * (1 - f * s), + t = v * (1 - (1 - f) * s), + mod = i % 6, + r = [v, q, p, p, t, v][mod], + g = [t, v, v, q, p, p][mod], + b = [p, p, t, v, v, q][mod]; + + return { r: r * 255, g: g * 255, b: b * 255 }; +} + +// rgbToHex +// Converts an RGB color to hex +// Assumes r, g, and b are contained in the set [0, 255] +// Returns a 3 or 6 character hex +function rgbToHex(r, g, b, allow3Char) { + + var hex = [ + pad2(mathRound(r).toString(16)), + pad2(mathRound(g).toString(16)), + pad2(mathRound(b).toString(16)) + ]; + + // Return a 3 character hex if possible + if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) { + return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0); + } + + return hex.join(""); +} + +// rgbaToHex +// Converts an RGBA color plus alpha transparency to hex +// Assumes r, g, b are contained in the set [0, 255] and +// a in [0, 1]. Returns a 4 or 8 character rgba hex +function rgbaToHex(r, g, b, a, allow4Char) { + + var hex = [ + pad2(mathRound(r).toString(16)), + pad2(mathRound(g).toString(16)), + pad2(mathRound(b).toString(16)), + pad2(convertDecimalToHex(a)) + ]; + + // Return a 4 character hex if possible + if (allow4Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) && hex[3].charAt(0) == hex[3].charAt(1)) { + return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0); + } + + return hex.join(""); +} + +// rgbaToArgbHex +// Converts an RGBA color to an ARGB Hex8 string +// Rarely used, but required for "toFilter()" +function rgbaToArgbHex(r, g, b, a) { + + var hex = [ + pad2(convertDecimalToHex(a)), + pad2(mathRound(r).toString(16)), + pad2(mathRound(g).toString(16)), + pad2(mathRound(b).toString(16)) + ]; + + return hex.join(""); +} + +// equals +// Can be called with any tinycolor input +tinycolor.equals = function (color1, color2) { + if (!color1 || !color2) { return false; } + return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString(); +}; + +tinycolor.random = function() { + return tinycolor.fromRatio({ + r: mathRandom(), + g: mathRandom(), + b: mathRandom() + }); +}; + +// Modification Functions +// ---------------------- +// Thanks to less.js for some of the basics here +// + +function desaturate(color, amount) { + amount = (amount === 0) ? 0 : (amount || 10); + var hsl = tinycolor(color).toHsl(); + hsl.s -= amount / 100; + hsl.s = clamp01(hsl.s); + return tinycolor(hsl); +} + +function saturate(color, amount) { + amount = (amount === 0) ? 0 : (amount || 10); + var hsl = tinycolor(color).toHsl(); + hsl.s += amount / 100; + hsl.s = clamp01(hsl.s); + return tinycolor(hsl); +} + +function greyscale(color) { + return tinycolor(color).desaturate(100); +} + +function lighten (color, amount) { + amount = (amount === 0) ? 0 : (amount || 10); + var hsl = tinycolor(color).toHsl(); + hsl.l += amount / 100; + hsl.l = clamp01(hsl.l); + return tinycolor(hsl); +} + +function brighten(color, amount) { + amount = (amount === 0) ? 0 : (amount || 10); + var rgb = tinycolor(color).toRgb(); + rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * - (amount / 100)))); + rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * - (amount / 100)))); + rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * - (amount / 100)))); + return tinycolor(rgb); +} + +function darken (color, amount) { + amount = (amount === 0) ? 0 : (amount || 10); + var hsl = tinycolor(color).toHsl(); + hsl.l -= amount / 100; + hsl.l = clamp01(hsl.l); + return tinycolor(hsl); +} + +// Spin takes a positive or negative amount within [-360, 360] indicating the change of hue. +// Values outside of this range will be wrapped into this range. +function spin(color, amount) { + var hsl = tinycolor(color).toHsl(); + var hue = (hsl.h + amount) % 360; + hsl.h = hue < 0 ? 360 + hue : hue; + return tinycolor(hsl); +} + +// Combination Functions +// --------------------- +// Thanks to jQuery xColor for some of the ideas behind these +// + +function complement(color) { + var hsl = tinycolor(color).toHsl(); + hsl.h = (hsl.h + 180) % 360; + return tinycolor(hsl); +} + +function triad(color) { + var hsl = tinycolor(color).toHsl(); + var h = hsl.h; + return [ + tinycolor(color), + tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }), + tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l }) + ]; +} + +function tetrad(color) { + var hsl = tinycolor(color).toHsl(); + var h = hsl.h; + return [ + tinycolor(color), + tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }), + tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }), + tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l }) + ]; +} + +function splitcomplement(color) { + var hsl = tinycolor(color).toHsl(); + var h = hsl.h; + return [ + tinycolor(color), + tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l}), + tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l}) + ]; +} + +function analogous(color, results, slices) { + results = results || 6; + slices = slices || 30; + + var hsl = tinycolor(color).toHsl(); + var part = 360 / slices; + var ret = [tinycolor(color)]; + + for (hsl.h = ((hsl.h - (part * results >> 1)) + 720) % 360; --results; ) { + hsl.h = (hsl.h + part) % 360; + ret.push(tinycolor(hsl)); + } + return ret; +} + +function monochromatic(color, results) { + results = results || 6; + var hsv = tinycolor(color).toHsv(); + var h = hsv.h, s = hsv.s, v = hsv.v; + var ret = []; + var modification = 1 / results; + + while (results--) { + ret.push(tinycolor({ h: h, s: s, v: v})); + v = (v + modification) % 1; + } + + return ret; +} + +// Utility Functions +// --------------------- + +tinycolor.mix = function(color1, color2, amount) { + amount = (amount === 0) ? 0 : (amount || 50); + + var rgb1 = tinycolor(color1).toRgb(); + var rgb2 = tinycolor(color2).toRgb(); + + var p = amount / 100; + + var rgba = { + r: ((rgb2.r - rgb1.r) * p) + rgb1.r, + g: ((rgb2.g - rgb1.g) * p) + rgb1.g, + b: ((rgb2.b - rgb1.b) * p) + rgb1.b, + a: ((rgb2.a - rgb1.a) * p) + rgb1.a + }; + + return tinycolor(rgba); +}; + +// Readability Functions +// --------------------- +// false +// tinycolor.isReadable("#000", "#111",{level:"AA",size:"large"}) => false +tinycolor.isReadable = function(color1, color2, wcag2) { + var readability = tinycolor.readability(color1, color2); + var wcag2Parms, out; + + out = false; + + wcag2Parms = validateWCAG2Parms(wcag2); + switch (wcag2Parms.level + wcag2Parms.size) { + case "AAsmall": + case "AAAlarge": + out = readability >= 4.5; + break; + case "AAlarge": + out = readability >= 3; + break; + case "AAAsmall": + out = readability >= 7; + break; + } + return out; + +}; + +// mostReadable +// Given a base color and a list of possible foreground or background +// colors for that base, returns the most readable color. +// Optionally returns Black or White if the most readable color is unreadable. +// *Example* +// tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255" +// tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString(); // "#ffffff" +// tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString(); // "#faf3f3" +// tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(); // "#ffffff" +tinycolor.mostReadable = function(baseColor, colorList, args) { + var bestColor = null; + var bestScore = 0; + var readability; + var includeFallbackColors, level, size ; + args = args || {}; + includeFallbackColors = args.includeFallbackColors ; + level = args.level; + size = args.size; + + for (var i= 0; i < colorList.length ; i++) { + readability = tinycolor.readability(baseColor, colorList[i]); + if (readability > bestScore) { + bestScore = readability; + bestColor = tinycolor(colorList[i]); + } + } + + if (tinycolor.isReadable(baseColor, bestColor, {"level":level,"size":size}) || !includeFallbackColors) { + return bestColor; + } + else { + args.includeFallbackColors=false; + return tinycolor.mostReadable(baseColor,["#fff", "#000"],args); + } +}; + +// Big List of Colors +// ------------------ +// +var names = tinycolor.names = { + aliceblue: "f0f8ff", + antiquewhite: "faebd7", + aqua: "0ff", + aquamarine: "7fffd4", + azure: "f0ffff", + beige: "f5f5dc", + bisque: "ffe4c4", + black: "000", + blanchedalmond: "ffebcd", + blue: "00f", + blueviolet: "8a2be2", + brown: "a52a2a", + burlywood: "deb887", + burntsienna: "ea7e5d", + cadetblue: "5f9ea0", + chartreuse: "7fff00", + chocolate: "d2691e", + coral: "ff7f50", + cornflowerblue: "6495ed", + cornsilk: "fff8dc", + crimson: "dc143c", + cyan: "0ff", + darkblue: "00008b", + darkcyan: "008b8b", + darkgoldenrod: "b8860b", + darkgray: "a9a9a9", + darkgreen: "006400", + darkgrey: "a9a9a9", + darkkhaki: "bdb76b", + darkmagenta: "8b008b", + darkolivegreen: "556b2f", + darkorange: "ff8c00", + darkorchid: "9932cc", + darkred: "8b0000", + darksalmon: "e9967a", + darkseagreen: "8fbc8f", + darkslateblue: "483d8b", + darkslategray: "2f4f4f", + darkslategrey: "2f4f4f", + darkturquoise: "00ced1", + darkviolet: "9400d3", + deeppink: "ff1493", + deepskyblue: "00bfff", + dimgray: "696969", + dimgrey: "696969", + dodgerblue: "1e90ff", + firebrick: "b22222", + floralwhite: "fffaf0", + forestgreen: "228b22", + fuchsia: "f0f", + gainsboro: "dcdcdc", + ghostwhite: "f8f8ff", + gold: "ffd700", + goldenrod: "daa520", + gray: "808080", + green: "008000", + greenyellow: "adff2f", + grey: "808080", + honeydew: "f0fff0", + hotpink: "ff69b4", + indianred: "cd5c5c", + indigo: "4b0082", + ivory: "fffff0", + khaki: "f0e68c", + lavender: "e6e6fa", + lavenderblush: "fff0f5", + lawngreen: "7cfc00", + lemonchiffon: "fffacd", + lightblue: "add8e6", + lightcoral: "f08080", + lightcyan: "e0ffff", + lightgoldenrodyellow: "fafad2", + lightgray: "d3d3d3", + lightgreen: "90ee90", + lightgrey: "d3d3d3", + lightpink: "ffb6c1", + lightsalmon: "ffa07a", + lightseagreen: "20b2aa", + lightskyblue: "87cefa", + lightslategray: "789", + lightslategrey: "789", + lightsteelblue: "b0c4de", + lightyellow: "ffffe0", + lime: "0f0", + limegreen: "32cd32", + linen: "faf0e6", + magenta: "f0f", + maroon: "800000", + mediumaquamarine: "66cdaa", + mediumblue: "0000cd", + mediumorchid: "ba55d3", + mediumpurple: "9370db", + mediumseagreen: "3cb371", + mediumslateblue: "7b68ee", + mediumspringgreen: "00fa9a", + mediumturquoise: "48d1cc", + mediumvioletred: "c71585", + midnightblue: "191970", + mintcream: "f5fffa", + mistyrose: "ffe4e1", + moccasin: "ffe4b5", + navajowhite: "ffdead", + navy: "000080", + oldlace: "fdf5e6", + olive: "808000", + olivedrab: "6b8e23", + orange: "ffa500", + orangered: "ff4500", + orchid: "da70d6", + palegoldenrod: "eee8aa", + palegreen: "98fb98", + paleturquoise: "afeeee", + palevioletred: "db7093", + papayawhip: "ffefd5", + peachpuff: "ffdab9", + peru: "cd853f", + pink: "ffc0cb", + plum: "dda0dd", + powderblue: "b0e0e6", + purple: "800080", + rebeccapurple: "663399", + red: "f00", + rosybrown: "bc8f8f", + royalblue: "4169e1", + saddlebrown: "8b4513", + salmon: "fa8072", + sandybrown: "f4a460", + seagreen: "2e8b57", + seashell: "fff5ee", + sienna: "a0522d", + silver: "c0c0c0", + skyblue: "87ceeb", + slateblue: "6a5acd", + slategray: "708090", + slategrey: "708090", + snow: "fffafa", + springgreen: "00ff7f", + steelblue: "4682b4", + tan: "d2b48c", + teal: "008080", + thistle: "d8bfd8", + tomato: "ff6347", + turquoise: "40e0d0", + violet: "ee82ee", + wheat: "f5deb3", + white: "fff", + whitesmoke: "f5f5f5", + yellow: "ff0", + yellowgreen: "9acd32" +}; + +// Make it easy to access colors via hexNames[hex] +var hexNames = tinycolor.hexNames = flip(names); + +// Utilities +// --------- + +// { 'name1': 'val1' } becomes { 'val1': 'name1' } +function flip(o) { + var flipped = { }; + for (var i in o) { + if (o.hasOwnProperty(i)) { + flipped[o[i]] = i; + } + } + return flipped; +} + +// Return a valid alpha value [0,1] with all invalid values being set to 1 +function boundAlpha(a) { + a = parseFloat(a); + + if (isNaN(a) || a < 0 || a > 1) { + a = 1; + } + + return a; +} + +// Take input from [0, n] and return it as [0, 1] +function bound01(n, max) { + if (isOnePointZero(n)) { n = "100%"; } + + var processPercent = isPercentage(n); + n = mathMin(max, mathMax(0, parseFloat(n))); + + // Automatically convert percentage into number + if (processPercent) { + n = parseInt(n * max, 10) / 100; + } + + // Handle floating point rounding errors + if ((Math.abs(n - max) < 0.000001)) { + return 1; + } + + // Convert into [0, 1] range if it isn't already + return (n % max) / parseFloat(max); +} + +// Force a number between 0 and 1 +function clamp01(val) { + return mathMin(1, mathMax(0, val)); +} + +// Parse a base-16 hex value into a base-10 integer +function parseIntFromHex(val) { + return parseInt(val, 16); +} + +// Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1 +// +function isOnePointZero(n) { + return typeof n == "string" && n.indexOf('.') != -1 && parseFloat(n) === 1; +} + +// Check to see if string passed in is a percentage +function isPercentage(n) { + return typeof n === "string" && n.indexOf('%') != -1; +} + +// Force a hex value to have 2 characters +function pad2(c) { + return c.length == 1 ? '0' + c : '' + c; +} + +// Replace a decimal with it's percentage value +function convertToPercentage(n) { + if (n <= 1) { + n = (n * 100) + "%"; + } + + return n; +} + +// Converts a decimal to a hex value +function convertDecimalToHex(d) { + return Math.round(parseFloat(d) * 255).toString(16); +} +// Converts a hex value to a decimal +function convertHexToDecimal(h) { + return (parseIntFromHex(h) / 255); +} + +var matchers = (function() { + + // + var CSS_INTEGER = "[-\\+]?\\d+%?"; + + // + var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?"; + + // Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome. + var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")"; + + // Actual matching. + // Parentheses and commas are optional, but not required. + // Whitespace can take the place of commas or opening paren + var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?"; + var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?"; + + return { + CSS_UNIT: new RegExp(CSS_UNIT), + rgb: new RegExp("rgb" + PERMISSIVE_MATCH3), + rgba: new RegExp("rgba" + PERMISSIVE_MATCH4), + hsl: new RegExp("hsl" + PERMISSIVE_MATCH3), + hsla: new RegExp("hsla" + PERMISSIVE_MATCH4), + hsv: new RegExp("hsv" + PERMISSIVE_MATCH3), + hsva: new RegExp("hsva" + PERMISSIVE_MATCH4), + hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, + hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/, + hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, + hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/ + }; +})(); + +// isValidCSSUnit +// Take in a single string / number and check to see if it looks like a CSS unit +// (see matchers above for definition). +function isValidCSSUnit(color) { + return !!matchers.CSS_UNIT.exec(color); +} + +// stringInputToObject +// Permissive string parsing. Take in a number of formats, and output an object +// based on detected format. Returns { r, g, b } or { h, s, l } or { h, s, v} +function stringInputToObject(color) { + + color = color.replace(trimLeft, '').replace(trimRight, '').toLowerCase(); + var named = false; + if (names[color]) { + color = names[color]; + named = true; + } + else if (color == 'transparent') { + return { r: 0, g: 0, b: 0, a: 0, format: "name" }; + } + + // Try to match string input using regular expressions. + // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360] + // Just return an object and let the conversion functions handle that. + // This way the result will be the same whether the tinycolor is initialized with string or object. + var match; + if ((match = matchers.rgb.exec(color))) { + return { r: match[1], g: match[2], b: match[3] }; + } + if ((match = matchers.rgba.exec(color))) { + return { r: match[1], g: match[2], b: match[3], a: match[4] }; + } + if ((match = matchers.hsl.exec(color))) { + return { h: match[1], s: match[2], l: match[3] }; + } + if ((match = matchers.hsla.exec(color))) { + return { h: match[1], s: match[2], l: match[3], a: match[4] }; + } + if ((match = matchers.hsv.exec(color))) { + return { h: match[1], s: match[2], v: match[3] }; + } + if ((match = matchers.hsva.exec(color))) { + return { h: match[1], s: match[2], v: match[3], a: match[4] }; + } + if ((match = matchers.hex8.exec(color))) { + return { + r: parseIntFromHex(match[1]), + g: parseIntFromHex(match[2]), + b: parseIntFromHex(match[3]), + a: convertHexToDecimal(match[4]), + format: named ? "name" : "hex8" + }; + } + if ((match = matchers.hex6.exec(color))) { + return { + r: parseIntFromHex(match[1]), + g: parseIntFromHex(match[2]), + b: parseIntFromHex(match[3]), + format: named ? "name" : "hex" + }; + } + if ((match = matchers.hex4.exec(color))) { + return { + r: parseIntFromHex(match[1] + '' + match[1]), + g: parseIntFromHex(match[2] + '' + match[2]), + b: parseIntFromHex(match[3] + '' + match[3]), + a: convertHexToDecimal(match[4] + '' + match[4]), + format: named ? "name" : "hex8" + }; + } + if ((match = matchers.hex3.exec(color))) { + return { + r: parseIntFromHex(match[1] + '' + match[1]), + g: parseIntFromHex(match[2] + '' + match[2]), + b: parseIntFromHex(match[3] + '' + match[3]), + format: named ? "name" : "hex" + }; + } + + return false; +} + +function validateWCAG2Parms(parms) { + // return valid WCAG2 parms for isReadable. + // If input parms are invalid, return {"level":"AA", "size":"small"} + var level, size; + parms = parms || {"level":"AA", "size":"small"}; + level = (parms.level || "AA").toUpperCase(); + size = (parms.size || "small").toLowerCase(); + if (level !== "AA" && level !== "AAA") { + level = "AA"; + } + if (size !== "small" && size !== "large") { + size = "small"; + } + return {"level":level, "size":size}; +} + +this.tinycolor = tinycolor; + +})()`; +} +// It is hacky way to make this function will be compiled preferentially by less +// resolve error: `ReferenceError: colorPalette is not defined` +// https://github.com/ant-design/ant-motion/issues/44 +.tinyColorMixin(); + +// We create a very complex algorithm which take the place of original tint/shade color system +// to make sure no one can understand it 👻 +// and create an entire color palette magicly by inputing just a single primary color. +// We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin +.colorPaletteMixin() { + @functions: ~`(function() { + var hueStep = 2; + var saturationStep = 16; + var saturationStep2 = 5; + var brightnessStep1 = 5; + var brightnessStep2 = 15; + var lightColorCount = 5; + var darkColorCount = 4; + + var getHue = function(hsv, i, isLight) { + var hue; + if (hsv.h >= 60 && hsv.h <= 240) { + hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i; + } else { + hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i; + } + if (hue < 0) { + hue += 360; + } else if (hue >= 360) { + hue -= 360; + } + return Math.round(hue); + }; + var getSaturation = function(hsv, i, isLight) { + var saturation; + if (isLight) { + saturation = Math.round(hsv.s * 100) - saturationStep * i; + } else if (i == darkColorCount) { + saturation = Math.round(hsv.s * 100) + saturationStep; + } else { + saturation = Math.round(hsv.s * 100) + saturationStep2 * i; + } + if (saturation > 100) { + saturation = 100; + } + if (isLight && i === lightColorCount && saturation > 10) { + saturation = 10; + } + if (saturation < 6) { + saturation = 6; + } + return Math.round(saturation); + }; + var getValue = function(hsv, i, isLight) { + if (isLight) { + return Math.round(hsv.v * 100) + brightnessStep1 * i; + } + return Math.round(hsv.v * 100) - brightnessStep2 * i; + }; + + this.colorPalette = function(color, index) { + var isLight = index <= 6; + var hsv = tinycolor(color).toHsv(); + var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1; + return tinycolor({ + h: getHue(hsv, i, isLight), + s: getSaturation(hsv, i, isLight), + v: getValue(hsv, i, isLight), + }).toHexString(); + }; +})()`; +} +// It is hacky way to make this function will be compiled preferentially by less +// resolve error: `ReferenceError: colorPalette is not defined` +// https://github.com/ant-design/ant-motion/issues/44 +.colorPaletteMixin(); + +// color palettes +@blue-1: color(~`colorPalette("@{blue-6}", 1)`); +@blue-2: color(~`colorPalette("@{blue-6}", 2)`); +@blue-3: color(~`colorPalette("@{blue-6}", 3)`); +@blue-4: color(~`colorPalette("@{blue-6}", 4)`); +@blue-5: color(~`colorPalette("@{blue-6}", 5)`); +@blue-6: #1890ff; +@blue-7: color(~`colorPalette("@{blue-6}", 7)`); +@blue-8: color(~`colorPalette("@{blue-6}", 8)`); +@blue-9: color(~`colorPalette("@{blue-6}", 9)`); +@blue-10: color(~`colorPalette("@{blue-6}", 10)`); + +@purple-1: color(~`colorPalette("@{purple-6}", 1)`); +@purple-2: color(~`colorPalette("@{purple-6}", 2)`); +@purple-3: color(~`colorPalette("@{purple-6}", 3)`); +@purple-4: color(~`colorPalette("@{purple-6}", 4)`); +@purple-5: color(~`colorPalette("@{purple-6}", 5)`); +@purple-6: #722ed1; +@purple-7: color(~`colorPalette("@{purple-6}", 7)`); +@purple-8: color(~`colorPalette("@{purple-6}", 8)`); +@purple-9: color(~`colorPalette("@{purple-6}", 9)`); +@purple-10: color(~`colorPalette("@{purple-6}", 10)`); + +@cyan-1: color(~`colorPalette("@{cyan-6}", 1)`); +@cyan-2: color(~`colorPalette("@{cyan-6}", 2)`); +@cyan-3: color(~`colorPalette("@{cyan-6}", 3)`); +@cyan-4: color(~`colorPalette("@{cyan-6}", 4)`); +@cyan-5: color(~`colorPalette("@{cyan-6}", 5)`); +@cyan-6: #13c2c2; +@cyan-7: color(~`colorPalette("@{cyan-6}", 7)`); +@cyan-8: color(~`colorPalette("@{cyan-6}", 8)`); +@cyan-9: color(~`colorPalette("@{cyan-6}", 9)`); +@cyan-10: color(~`colorPalette("@{cyan-6}", 10)`); + +@green-1: color(~`colorPalette("@{green-6}", 1)`); +@green-2: color(~`colorPalette("@{green-6}", 2)`); +@green-3: color(~`colorPalette("@{green-6}", 3)`); +@green-4: color(~`colorPalette("@{green-6}", 4)`); +@green-5: color(~`colorPalette("@{green-6}", 5)`); +@green-6: #52c41a; +@green-7: color(~`colorPalette("@{green-6}", 7)`); +@green-8: color(~`colorPalette("@{green-6}", 8)`); +@green-9: color(~`colorPalette("@{green-6}", 9)`); +@green-10: color(~`colorPalette("@{green-6}", 10)`); + +@magenta-1: color(~`colorPalette("@{magenta-6}", 1)`); +@magenta-2: color(~`colorPalette("@{magenta-6}", 2)`); +@magenta-3: color(~`colorPalette("@{magenta-6}", 3)`); +@magenta-4: color(~`colorPalette("@{magenta-6}", 4)`); +@magenta-5: color(~`colorPalette("@{magenta-6}", 5)`); +@magenta-6: #eb2f96; +@magenta-7: color(~`colorPalette("@{magenta-6}", 7)`); +@magenta-8: color(~`colorPalette("@{magenta-6}", 8)`); +@magenta-9: color(~`colorPalette("@{magenta-6}", 9)`); +@magenta-10: color(~`colorPalette("@{magenta-6}", 10)`); + +// alias of magenta +@pink-1: color(~`colorPalette("@{pink-6}", 1)`); +@pink-2: color(~`colorPalette("@{pink-6}", 2)`); +@pink-3: color(~`colorPalette("@{pink-6}", 3)`); +@pink-4: color(~`colorPalette("@{pink-6}", 4)`); +@pink-5: color(~`colorPalette("@{pink-6}", 5)`); +@pink-6: #eb2f96; +@pink-7: color(~`colorPalette("@{pink-6}", 7)`); +@pink-8: color(~`colorPalette("@{pink-6}", 8)`); +@pink-9: color(~`colorPalette("@{pink-6}", 9)`); +@pink-10: color(~`colorPalette("@{pink-6}", 10)`); + +@red-1: color(~`colorPalette("@{red-6}", 1)`); +@red-2: color(~`colorPalette("@{red-6}", 2)`); +@red-3: color(~`colorPalette("@{red-6}", 3)`); +@red-4: color(~`colorPalette("@{red-6}", 4)`); +@red-5: color(~`colorPalette("@{red-6}", 5)`); +@red-6: #f5222d; +@red-7: color(~`colorPalette("@{red-6}", 7)`); +@red-8: color(~`colorPalette("@{red-6}", 8)`); +@red-9: color(~`colorPalette("@{red-6}", 9)`); +@red-10: color(~`colorPalette("@{red-6}", 10)`); + +@orange-1: color(~`colorPalette("@{orange-6}", 1)`); +@orange-2: color(~`colorPalette("@{orange-6}", 2)`); +@orange-3: color(~`colorPalette("@{orange-6}", 3)`); +@orange-4: color(~`colorPalette("@{orange-6}", 4)`); +@orange-5: color(~`colorPalette("@{orange-6}", 5)`); +@orange-6: #fa8c16; +@orange-7: color(~`colorPalette("@{orange-6}", 7)`); +@orange-8: color(~`colorPalette("@{orange-6}", 8)`); +@orange-9: color(~`colorPalette("@{orange-6}", 9)`); +@orange-10: color(~`colorPalette("@{orange-6}", 10)`); + +@yellow-1: color(~`colorPalette("@{yellow-6}", 1)`); +@yellow-2: color(~`colorPalette("@{yellow-6}", 2)`); +@yellow-3: color(~`colorPalette("@{yellow-6}", 3)`); +@yellow-4: color(~`colorPalette("@{yellow-6}", 4)`); +@yellow-5: color(~`colorPalette("@{yellow-6}", 5)`); +@yellow-6: #fadb14; +@yellow-7: color(~`colorPalette("@{yellow-6}", 7)`); +@yellow-8: color(~`colorPalette("@{yellow-6}", 8)`); +@yellow-9: color(~`colorPalette("@{yellow-6}", 9)`); +@yellow-10: color(~`colorPalette("@{yellow-6}", 10)`); + +@volcano-1: color(~`colorPalette("@{volcano-6}", 1)`); +@volcano-2: color(~`colorPalette("@{volcano-6}", 2)`); +@volcano-3: color(~`colorPalette("@{volcano-6}", 3)`); +@volcano-4: color(~`colorPalette("@{volcano-6}", 4)`); +@volcano-5: color(~`colorPalette("@{volcano-6}", 5)`); +@volcano-6: #fa541c; +@volcano-7: color(~`colorPalette("@{volcano-6}", 7)`); +@volcano-8: color(~`colorPalette("@{volcano-6}", 8)`); +@volcano-9: color(~`colorPalette("@{volcano-6}", 9)`); +@volcano-10: color(~`colorPalette("@{volcano-6}", 10)`); + +@geekblue-1: color(~`colorPalette("@{geekblue-6}", 1)`); +@geekblue-2: color(~`colorPalette("@{geekblue-6}", 2)`); +@geekblue-3: color(~`colorPalette("@{geekblue-6}", 3)`); +@geekblue-4: color(~`colorPalette("@{geekblue-6}", 4)`); +@geekblue-5: color(~`colorPalette("@{geekblue-6}", 5)`); +@geekblue-6: #2f54eb; +@geekblue-7: color(~`colorPalette("@{geekblue-6}", 7)`); +@geekblue-8: color(~`colorPalette("@{geekblue-6}", 8)`); +@geekblue-9: color(~`colorPalette("@{geekblue-6}", 9)`); +@geekblue-10: color(~`colorPalette("@{geekblue-6}", 10)`); + +@lime-1: color(~`colorPalette("@{lime-6}", 1)`); +@lime-2: color(~`colorPalette("@{lime-6}", 2)`); +@lime-3: color(~`colorPalette("@{lime-6}", 3)`); +@lime-4: color(~`colorPalette("@{lime-6}", 4)`); +@lime-5: color(~`colorPalette("@{lime-6}", 5)`); +@lime-6: #a0d911; +@lime-7: color(~`colorPalette("@{lime-6}", 7)`); +@lime-8: color(~`colorPalette("@{lime-6}", 8)`); +@lime-9: color(~`colorPalette("@{lime-6}", 9)`); +@lime-10: color(~`colorPalette("@{lime-6}", 10)`); + +@gold-1: color(~`colorPalette("@{gold-6}", 1)`); +@gold-2: color(~`colorPalette("@{gold-6}", 2)`); +@gold-3: color(~`colorPalette("@{gold-6}", 3)`); +@gold-4: color(~`colorPalette("@{gold-6}", 4)`); +@gold-5: color(~`colorPalette("@{gold-6}", 5)`); +@gold-6: #faad14; +@gold-7: color(~`colorPalette("@{gold-6}", 7)`); +@gold-8: color(~`colorPalette("@{gold-6}", 8)`); +@gold-9: color(~`colorPalette("@{gold-6}", 9)`); +@gold-10: color(~`colorPalette("@{gold-6}", 10)`); + +// The prefix to use on all css classes from ant. +@ant-prefix : ant; + +// -------- Colors ----------- + +@info-color : @blue-6; +@success-color : @green-6; +@processing-color : @blue-6; +@error-color : @red-6; +@highlight-color : @red-6; +@warning-color : @gold-6; +@normal-color : #d9d9d9; + +// Color used by default to control hover and active backgrounds and for +// alert info backgrounds. +@primary-1: color(~`colorPalette("@{primary-color}", 1)`); // replace tint(@primary-color, 90%) +@primary-2: color(~`colorPalette("@{primary-color}", 2)`); // replace tint(@primary-color, 80%) +@primary-3: color(~`colorPalette("@{primary-color}", 3)`); // unused +@primary-4: color(~`colorPalette("@{primary-color}", 4)`); // unused +@primary-5: color(~`colorPalette("@{primary-color}", 5)`); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%) +@primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color +@primary-7: color(~`colorPalette("@{primary-color}", 7)`); // replace shade(@primary-color, 5%) +@primary-8: color(~`colorPalette("@{primary-color}", 8)`); // unused +@primary-9: color(~`colorPalette("@{primary-color}", 9)`); // unused +@primary-10: color(~`colorPalette("@{primary-color}", 10)`); // unused + +// Base Scaffolding Variables +// --- + +// Background color for `` +@body-background : #fff; +// Base background color for most components +@component-background : #fff; +@font-family : "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, +"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +@code-family : "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; +@heading-color : fade(#000, 85%); +@text-color : fade(#000, 65%); +@text-color-secondary : fade(#000, 45%); +@heading-color-dark : fade(#fff, 100%); +@text-color-dark : fade(#fff, 85%); +@text-color-secondary-dark: fade(#fff, 65%); +@font-size-base : 14px; +@font-size-lg : @font-size-base + 2px; +@font-size-sm : 12px; +@line-height-base : 1.5; +@border-radius-base : 4px; +@border-radius-sm : 2px; + +// vertical paddings +@padding-lg : 24px; // containers +@padding-md : 16px; // small containers and buttons +@padding-sm : 12px; // Form controls and items +@padding-xs : 8px; // small items + +// vertical padding for all form controls +@control-padding-horizontal: @padding-sm; +@control-padding-horizontal-sm: @padding-xs; + +// The background colors for active and hover states for things like +// list items or table cells. +@item-active-bg : @primary-1; +@item-hover-bg : @primary-1; + +// ICONFONT +@iconfont-css-prefix : anticon; + +// LINK +@link-color : @primary-color; +@link-hover-color : color(~`colorPalette("@{link-color}", 5)`); +@link-active-color : color(~`colorPalette("@{link-color}", 7)`); +@link-decoration : none; +@link-hover-decoration : none; + +// Animation +@ease-base-out : cubic-bezier(0.7, 0.3, 0.1, 1); +@ease-base-in : cubic-bezier(0.9, 0, 0.3, 0.7); +@ease-out : cubic-bezier(0.215, 0.61, 0.355, 1); +@ease-in : cubic-bezier(0.55, 0.055, 0.675, 0.19); +@ease-in-out : cubic-bezier(0.645, 0.045, 0.355, 1); +@ease-out-back : cubic-bezier(0.12, 0.4, 0.29, 1.46); +@ease-in-back : cubic-bezier(0.71, -0.46, 0.88, 0.6); +@ease-in-out-back : cubic-bezier(0.71, -0.46, 0.29, 1.46); +@ease-out-circ : cubic-bezier(0.08, 0.82, 0.17, 1); +@ease-in-circ : cubic-bezier(0.6, 0.04, 0.98, 0.34); +@ease-in-out-circ : cubic-bezier(0.78, 0.14, 0.15, 0.86); +@ease-out-quint : cubic-bezier(0.23, 1, 0.32, 1); +@ease-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06); +@ease-in-out-quint : cubic-bezier(0.86, 0, 0.07, 1); + +// Border color +@border-color-base : hsv(0, 0, 85%); // base border outline a component +@border-color-split : hsv(0, 0, 91%); // split border inside a component +@border-width-base : 1px; // width of the border for a component +@border-style-base : solid; // style of a components border + +// Outline +@outline-blur-size : 0; +@outline-width : 2px; +@outline-color : @primary-color; + +@background-color-light : hsv(0, 0, 98%); // background of header and selected item +@background-color-base : hsv(0, 0, 96%); // Default grey background color + +// Disabled states +@disabled-color : fade(#000, 25%); +@disabled-bg : @background-color-base; +@disabled-color-dark : fade(#fff, 35%); + +// Shadow +@shadow-color : rgba(0, 0, 0, .15); +@box-shadow-base : @shadow-1-down; +@shadow-1-up : 0 -2px 8px @shadow-color; +@shadow-1-down : 0 2px 8px @shadow-color; +@shadow-1-left : -2px 0 8px @shadow-color; +@shadow-1-right : 2px 0 8px @shadow-color; +@shadow-2 : 0 4px 12px @shadow-color; + +// Buttons +@btn-font-weight : 400; +@btn-border-radius-base : @border-radius-base; +@btn-border-radius-sm : @border-radius-base; + +@btn-primary-color : #fff; +@btn-primary-bg : @primary-color; + +@btn-default-color : @text-color; +@btn-default-bg : #fff; +@btn-default-border : @border-color-base; + +@btn-danger-color : @error-color; +@btn-danger-bg : @background-color-base; +@btn-danger-border : @border-color-base; + +@btn-disable-color : @disabled-color; +@btn-disable-bg : @disabled-bg; +@btn-disable-border : @border-color-base; + +@btn-padding-base : 0 @padding-md - 1px; +@btn-font-size-lg : @font-size-lg; +@btn-font-size-sm : @font-size-base; +@btn-padding-lg : @btn-padding-base; +@btn-padding-sm : 0 @padding-xs - 1px; + +@btn-height-base : 32px; +@btn-height-lg : 40px; +@btn-height-sm : 24px; + +@btn-circle-size : @btn-height-base; +@btn-circle-size-lg : @btn-height-lg; +@btn-circle-size-sm : @btn-height-sm; + +@btn-group-border : @primary-5; + +// Checkbox +@checkbox-size : 16px; +@checkbox-color : @primary-color; +@checkbox-check-color : #fff; + +// Radio +@radio-size : 16px; +@radio-dot-color : @primary-color; + +// Radio buttons +@radio-button-bg : @btn-default-bg; +@radio-button-color : @btn-default-color; +@radio-button-hover-color : @primary-5; +@radio-button-active-color : @primary-7; + +// Media queries breakpoints +// Extra small screen / phone +@screen-xs : 480px; +@screen-xs-min : @screen-xs; + +// Small screen / tablet +@screen-sm : 576px; +@screen-sm-min : @screen-sm; + +// Medium screen / desktop +@screen-md : 768px; +@screen-md-min : @screen-md; + +// Large screen / wide desktop +@screen-lg : 992px; +@screen-lg-min : @screen-lg; + +// Extra large screen / full hd +@screen-xl : 1200px; +@screen-xl-min : @screen-xl; + +// Extra extra large screen / large descktop +@screen-xxl : 1600px; +@screen-xxl-min : @screen-xxl; + +// provide a maximum +@screen-xs-max : (@screen-sm-min - 1px); +@screen-sm-max : (@screen-md-min - 1px); +@screen-md-max : (@screen-lg-min - 1px); +@screen-lg-max : (@screen-xl-min - 1px); +@screen-xl-max : (@screen-xxl-min - 1px); + +// Grid system +@grid-columns : 24; +@grid-gutter-width : 0; + +// Layout +@layout-body-background : #f0f2f5; +@layout-header-background : #001529; +@layout-footer-background : @layout-body-background; +@layout-header-height : 64px; +@layout-header-padding : 0 50px; +@layout-footer-padding : 24px 50px; +@layout-sider-background : @layout-header-background; +@layout-trigger-height : 48px; +@layout-trigger-background : #002140; +@layout-trigger-color : #fff; +@layout-zero-trigger-width : 36px; +@layout-zero-trigger-height : 42px; +// Layout light theme +@layout-sider-background-light : #fff; +@layout-trigger-background-light: #fff; +@layout-trigger-color-light : @text-color; + +// z-index list +@zindex-affix : 10; +@zindex-back-top : 10; +@zindex-modal-mask : 1000; +@zindex-modal : 1000; +@zindex-notification : 1010; +@zindex-message : 1010; +@zindex-popover : 1030; +@zindex-picker : 1050; +@zindex-dropdown : 1050; +@zindex-tooltip : 1060; + +// Animation +@animation-duration-slow: .3s; // Modal +@animation-duration-base: .2s; +@animation-duration-fast: .1s; // Tooltip + +// Form +// --- +@label-required-color : @highlight-color; +@label-color : @heading-color; +@form-item-margin-bottom : 24px; +@form-item-trailing-colon : true; +@form-vertical-label-padding : 0 0 8px; +@form-vertical-label-margin : 0; + +// Input +// --- +@input-height-base : 32px; +@input-height-lg : 40px; +@input-height-sm : 24px; +@input-padding-horizontal : @control-padding-horizontal - 1px; +@input-padding-horizontal-base: @input-padding-horizontal; +@input-padding-horizontal-sm : @control-padding-horizontal-sm - 1px; +@input-padding-horizontal-lg : @input-padding-horizontal; +@input-padding-vertical-base : 4px; +@input-padding-vertical-sm : 1px; +@input-padding-vertical-lg : 6px; +@input-placeholder-color : hsv(0, 0, 75%); +@input-color : @text-color; +@input-border-color : @border-color-base; +@input-bg : #fff; +@input-addon-bg : @background-color-light; +@input-hover-border-color : @primary-color; +@input-disabled-bg : @disabled-bg; +@input-outline-offset : 0 0; + +// Tooltip +// --- +//* Tooltip max width +@tooltip-max-width: 250px; +//** Tooltip text color +@tooltip-color: #fff; +//** Tooltip background color +@tooltip-bg: rgba(0, 0, 0, .75); +//** Tooltip arrow width +@tooltip-arrow-width: 5px; +//** Tooltip distance with trigger +@tooltip-distance: @tooltip-arrow-width - 1px + 4px; +//** Tooltip arrow color +@tooltip-arrow-color: @tooltip-bg; + +// Popover +// --- +//** Popover body background color +@popover-bg: #fff; +//** Popover text color +@popover-color: @text-color; +//** Popover maximum width +@popover-min-width: 177px; +//** Popover arrow width +@popover-arrow-width: 6px; +//** Popover arrow color +@popover-arrow-color: @popover-bg; +//** Popover outer arrow width +//** Popover outer arrow color +@popover-arrow-outer-color: @popover-bg; +//** Popover distance with trigger +@popover-distance: @popover-arrow-width + 4px; + +// Modal +// -- +@modal-mask-bg: rgba(0, 0, 0, 0.65); + +// Progress +// -- +@progress-default-color: @processing-color; +@progress-remaining-color: @background-color-base; +@progress-text-color: @text-color; + +// Menu +// --- +@menu-inline-toplevel-item-height: 40px; +@menu-item-height: 40px; +@menu-collapsed-width: 80px; +@menu-bg: @component-background; +@menu-item-color: @text-color; +@menu-highlight-color: @primary-color; +@menu-item-active-bg: @item-active-bg; +@menu-item-active-border-width: 3px; +@menu-item-group-title-color: @text-color-secondary; +// dark theme +@menu-dark-color: @text-color-secondary-dark; +@menu-dark-bg: @layout-header-background; +@menu-dark-arrow-color: #fff; +@menu-dark-submenu-bg: #000c17; +@menu-dark-highlight-color: #fff; +@menu-dark-item-active-bg: @primary-color; + +// Spin +// --- +@spin-dot-size-sm: 14px; +@spin-dot-size: 20px; +@spin-dot-size-lg: 32px; + +// Table +// -- +@table-header-bg: @background-color-light; +@table-header-color: @heading-color; +@table-header-sort-bg: @background-color-base; +@table-body-sort-bg: rgba(0, 0, 0, .01); +@table-row-hover-bg: @primary-1; +@table-selected-row-bg: #fafafa; +@table-expanded-row-bg: #fbfbfb; +@table-padding-vertical: 16px; +@table-padding-horizontal: 16px; + +// Tag +// -- +@tag-default-bg: @background-color-light; +@tag-default-color: @text-color; +@tag-font-size: @font-size-sm; + +// TimePicker +// --- +@time-picker-panel-column-width: 56px; +@time-picker-panel-width: @time-picker-panel-column-width * 3; +@time-picker-selected-bg: @background-color-base; + +// Carousel +// --- +@carousel-dot-width: 16px; +@carousel-dot-height: 3px; +@carousel-dot-active-width: 24px; + +// Badge +// --- +@badge-height: 20px; +@badge-dot-size: 6px; +@badge-font-size: @font-size-sm; +@badge-font-weight: normal; +@badge-status-size: 6px; + +// Rate +// --- +@rate-star-color: @yellow-6; +@rate-star-bg: @border-color-split; + +// Card +// --- +@card-head-color: @heading-color; +@card-head-background: transparent; +@card-head-padding: 16px; +@card-inner-head-padding: 12px; +@card-padding-base: 24px; +@card-padding-wider: 32px; +@card-actions-background: @background-color-light; +@card-shadow: 0 2px 8px rgba(0, 0, 0, .09); + +// Tabs +// --- +@tabs-card-head-background: @background-color-light; +@tabs-card-height: 40px; +@tabs-card-active-color: @primary-color; +@tabs-title-font-size: @font-size-base; +@tabs-title-font-size-lg: @font-size-lg; +@tabs-title-font-size-sm: @font-size-base; +@tabs-ink-bar-color: @primary-color; +@tabs-bar-margin: 0 0 16px 0; +@tabs-horizontal-margin: 0 32px 0 0; +@tabs-horizontal-padding: 12px 16px; +@tabs-vertical-padding: 8px 24px; +@tabs-vertical-margin: 0 0 16px 0; +@tabs-scrolling-size: 32px; +@tabs-highlight-color: @primary-color; +@tabs-hover-color: @primary-5; +@tabs-active-color: @primary-7; + +// BackTop +// --- +@back-top-color: #fff; +@back-top-bg: @text-color-secondary; +@back-top-hover-bg: @text-color; + +// Avatar +// --- +@avatar-size-base: 32px; +@avatar-size-lg: 40px; +@avatar-size-sm: 24px; +@avatar-font-size-base: 18px; +@avatar-font-size-lg: 24px; +@avatar-font-size-sm: 14px; +@avatar-bg: #ccc; +@avatar-color: #fff; +@avatar-border-radius: @border-radius-base; + +// Switch +// --- +@switch-height: 22px; +@switch-sm-height: 16px; +@switch-sm-checked-margin-left: -(@switch-sm-height - 3px); +@switch-disabled-opacity: 0.4; +@switch-color: @primary-color; + +// Pagination +// --- +@pagination-item-size: 32px; +@pagination-item-size-sm: 24px; +@pagination-font-family: Arial; +@pagination-font-weight-active: 500; + +// Breadcrumb +// --- +@breadcrumb-base-color: @text-color-secondary; +@breadcrumb-last-item-color: @text-color; +@breadcrumb-font-size: @font-size-base; +@breadcrumb-icon-font-size: @font-size-base; +@breadcrumb-link-color: @text-color-secondary; +@breadcrumb-link-color-hover: @primary-5; +@breadcrumb-separator-color: @text-color-secondary; +@breadcrumb-separator-margin: 0 @padding-xs; + +// Slider +// --- +@slider-margin: 14px 6px 10px; +@slider-rail-background-color: @background-color-base; +@slider-rail-background-color-hover: #e1e1e1; +@slider-track-background-color: @primary-3; +@slider-track-background-color-hover: @primary-4; +@slider-handle-color: @primary-3; +@slider-handle-color-hover: @primary-4; +@slider-handle-color-focus: tint(@primary-color, 20%); +@slider-handle-color-focus-shadow: tint(@primary-color, 50%); +@slider-handle-color-tooltip-open: @primary-color; +@slider-dot-border-color: @border-color-split; +@slider-dot-border-color-active: tint(@primary-color, 50%); +@slider-disabled-color: @disabled-color; +@slider-disabled-background-color: @component-background; + +// Tree +// --- +@tree-title-height: 24px; +@tree-child-padding: 18px; +@tree-directory-selected-color: #fff; +@tree-directory-selected-bg: @primary-color; + +// Collapse +// --- +@collapse-header-padding: 12px 0 12px 40px; +@collapse-header-bg: @background-color-light; +@collapse-content-padding: @padding-md; +@collapse-content-bg: @component-background; + +// Skeleton +// --- +@skeleton-color: #f2f2f2; + +// Transfer +// --- +@transfer-disabled-bg: @disabled-bg; + +// Message +// --- +@message-notice-content-padding: 10px 16px; + +// Motion +// --- +@wave-animation-width: 6px; + +// Alert +// --- +@alert-success-border-color: ~`colorPalette("@{success-color}", 3)`; +@alert-success-bg-color: ~`colorPalette("@{success-color}", 1)`; +@alert-success-icon-color: @success-color; +@alert-info-border-color: ~`colorPalette("@{info-color}", 3)`; +@alert-info-bg-color: ~`colorPalette("@{info-color}", 1)`; +@alert-info-icon-color: @info-color; +@alert-warning-border-color: ~`colorPalette("@{warning-color}", 3)`; +@alert-warning-bg-color: ~`colorPalette("@{warning-color}", 1)`; +@alert-warning-icon-color: @warning-color; +@alert-error-border-color: ~`colorPalette("@{error-color}", 3)`; +@alert-error-bg-color: ~`colorPalette("@{error-color}", 1)`; +@alert-error-icon-color: @error-color; + +// List +// --- +@list-empty-text-padding: @padding-md; +@list-item-padding: @padding-sm 0; +@list-item-content-margin: 0 0 @padding-md 0; +@list-item-meta-margin-bottom: @padding-md; +@list-item-meta-avatar-margin-right: @padding-md; +@list-item-meta-title-margin-bottom: @padding-sm; + +// Menu +@menu-dark-item-selected-bg: @menu-dark-item-active-bg; + +// Tabs +@tab-bar-margin: @tabs-bar-margin; +@tab-horizontal-margin: @tabs-horizontal-margin; +@tab-vertical-margin: @tabs-vertical-margin; +@tab-horizontal-padding: @tabs-horizontal-padding; +@tab-vertical-padding: @tabs-vertical-padding; +@tab-scrolling-size: @tabs-scrolling-size; +@tab-highlight-color: @tabs-highlight-color; +@tab-hover-color: @tabs-hover-color; +@tab-active-color: @tabs-active-color; +@tabs-ink-bar-bg-color: @tabs-ink-bar-color; + +.listContent .extra { + color: rgba(0, 0, 0, 0.45); +} +.listContent .extra > em { + color: rgba(0, 0, 0, 0.25); +} +.avatarItem :global .ant-avatar { + border: 1px solid #fff; +} +.chartCard .avatar img { + border-radius: 100%; +} +.chartCard .meta { + color: rgba(0, 0, 0, 0.45); +} +.chartCard .total { + color: rgba(0, 0, 0, 0.85); +} +.chartCard .footer { + border-top: 1px solid #e8e8e8; +} +.field span:last-child { + color: rgba(0, 0, 0, 0.85); +} +.miniProgress .progressWrap { + background-color: #f5f5f5; +} +.miniProgress .progress { + border-radius: 1px 0 0 1px; + background-color: @primary-color; +} +.miniProgress .target span { + border-radius: 100px; +} +.pie .dot { + border-radius: 8px; +} +.pie .line { + background-color: #e8e8e8; +} +.pie .legendTitle { + color: rgba(0, 0, 0, 0.65); +} +.pie .percent { + color: rgba(0, 0, 0, 0.45); +} +.pie .total > h4 { + color: rgba(0, 0, 0, 0.45); +} +.pie .total > p { + color: rgba(0, 0, 0, 0.85); +} +.radar .legend .legendItem { + color: rgba(0, 0, 0, 0.45); +} +.radar .legend .legendItem h6 { + color: rgba(0, 0, 0, 0.85); +} +.radar .legend .legendItem:after { + background-color: #e8e8e8; +} +.radar .legend .dot { + border-radius: 6px; +} + +.timelineChart { + background: #fff; +} +.waterWave .text span { + color: rgba(0, 0, 0, 0.45); +} +.waterWave .text h4 { + color: rgba(0, 0, 0, 0.85); +} +.descriptionList .title { + color: rgba(0, 0, 0, 0.85); +} +.descriptionList .term { + color: rgba(0, 0, 0, 0.85); +} +.descriptionList .detail { + color: rgba(0, 0, 0, 0.65); +} +.descriptionList.small .title { + color: rgba(0, 0, 0, 0.65); +} +.linkGroup > a { + color: rgba(0, 0, 0, 0.65); +} +.linkGroup > a:hover { + color: @primary-color; +} +.lines .shadow { + color: transparent; +} +.exception .imgEle { + background-repeat: no-repeat; + background-position: 50% 50%; + background-size: contain; +} +.exception .content h1 { + color: #434e59; +} +.exception .content .desc { + color: rgba(0, 0, 0, 0.45); +} +.toolbar { + box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03); + background: #fff; + border-top: 1px solid #e8e8e8; +} +.globalFooter .links a { + color: rgba(0, 0, 0, 0.45); +} +.globalFooter .links a:hover { + color: rgba(0, 0, 0, 0.65); +} +.globalFooter .copyright { + color: rgba(0, 0, 0, 0.45); +} +.header { + background: #fff; + box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); +} +i.trigger:hover { + background: rgba(0, 0, 0, 0.025); +} +.right .action > i { + color: rgba(0, 0, 0, 0.65); +} +.right .action:hover { + background: rgba(0, 0, 0, 0.025); +} +:global(.right .action.ant-popover-open) { + background: rgba(0, 0, 0, 0.025); +} +.right .search:hover { + background: transparent; +} +.right .account .avatar { + color: @primary-color; + background: rgba(255, 255, 255, 0.85); +} +.dark .action { + color: rgba(255, 255, 255, 0.85); +} +.dark .action > i { + color: rgba(255, 255, 255, 0.85); +} +.dark .action:hover, +.dark .action:global(.ant-popover-open) { + background: @primary-color; +} +.dark .action :global(.ant-badge) { + color: rgba(255, 255, 255, 0.85); +} +.headerSearch .input { + background: transparent; + border-radius: 0; +} +.headerSearch .input :global(.ant-select-selection) { + background: transparent; +} +.headerSearch .input input { + border: 0; + box-shadow: none !important; +} +.headerSearch .input, +.headerSearch .input:hover, +.headerSearch .input:focus { + border-bottom: 1px solid #d9d9d9; +} +.login :global .ant-tabs .ant-tabs-bar { + border-bottom: 0; +} +.login .icon { + color: rgba(0, 0, 0, 0.2); +} +.login .icon:hover { + color: @primary-color; +} +.login .prefixIcon { + color: rgba(0, 0, 0, 0.25); +} +.list .item .avatar { + background: #fff; +} +.list .item:last-child { + border-bottom: 0; +} +.list .item:hover { + background: color(~`colorPalette("@{primary-color}", 1)`); +} +.list .item .extra { + color: rgba(0, 0, 0, 0.45); +} +.notFound { + color: rgba(0, 0, 0, 0.45); +} +.clear { + color: rgba(0, 0, 0, 0.65); + border-radius: 0 0 4px 4px; + border-top: 1px solid #e8e8e8; +} +.clear:hover { + color: rgba(0, 0, 0, 0.85); +} +.numberInfo .suffix { + color: rgba(0, 0, 0, 0.65); +} +.numberInfo .numberInfoTitle { + color: rgba(0, 0, 0, 0.65); +} +.numberInfo .numberInfoSubTitle { + color: rgba(0, 0, 0, 0.45); +} +.numberInfo .numberInfoValue > span { + color: rgba(0, 0, 0, 0.85); +} +.numberInfo .numberInfoValue .subTotal { + color: rgba(0, 0, 0, 0.45); +} +.numberInfo .numberInfoValue .subTotal :global .anticon-caret-up { + color: #f5222d; +} +.numberInfo .numberInfoValue .subTotal :global .anticon-caret-down { + color: #52c41a; +} +.numberInfolight .numberInfoValue > span { + color: rgba(0, 0, 0, 0.65); +} +.pageHeader { + background: #fff; + border-bottom: 1px solid #e8e8e8; +} +.pageHeader .tabs :global .ant-tabs-bar { + border-bottom: 1px solid #e8e8e8; +} +.pageHeader .logo > img { + border-radius: 4px; +} +.pageHeader .title { + color: rgba(0, 0, 0, 0.85); +} +.result .icon > .success { + color: #52c41a; +} +.result .icon > .error { + color: #f5222d; +} +.result .title { + color: rgba(0, 0, 0, 0.85); +} +.result .description { + color: rgba(0, 0, 0, 0.45); +} +.result .extra { + background: #fafafa; + border-radius: 2px; +} +.blockChecbox .item { + border-radius: 4px; +} +.blockChecbox .selectIcon { + color: @primary-color; +} +.color_block { + border-radius: 4px; +} +.title { + color: rgba(0, 0, 0, 0.85); +} +.handle { + background: @primary-color; + border-radius: 4px 0 0 4px; +} +.setting-drawer-index-handle { + /* 暂时不知道放哪解决 */ + background: @primary-color !important; +} +.themeColor .title { + color: rgba(0, 0, 0, 0.65); +} +.themeColor .colorBlock { + border-radius: 2px; + color: #fff; +} +.logo { +} +.logo h1 { + color: white; +} +.sider { + box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35); +} +.sider.light { + box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05); + background-color: white; +} +.sider.light .logo { + background: white; + box-shadow: 1px 1px 0 0 #e8e8e8; +} +.sider.light .logo h1 { + color: @primary-color; +} +.sider.light :global(.ant-menu-light) { + border-right-color: transparent; +} +:global .drawer .drawer-content { + background: #001529; +} +.standardFormRow { + border-bottom: 1px dashed #e8e8e8; +} +.standardFormRow :global .ant-form-item-label label { + color: rgba(0, 0, 0, 0.65); +} +.standardFormRow .label { + color: rgba(0, 0, 0, 0.85); +} +.standardFormRowLast { + border: none; +} + +.head { + box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); +} +.head.light { + background-color: #fff; +} +.logo h1 { + color: #fff; +} +.light h1 { + color: #002140; +} +.trendItem .up { + color: #f5222d; +} +.trendItem .down { + color: #52c41a; +} +.trendItem.trendItemGrey .up, +.trendItem.trendItemGrey .down { + color: rgba(0, 0, 0, 0.65); +} +.trendItem.reverseColor .up { + color: #52c41a; +} +.trendItem.reverseColor .down { + color: #f5222d; +} +.container { + background: #f0f2f5; +} +.title { + color: rgba(0, 0, 0, 0.85); +} +.desc { + color: rgba(0, 0, 0, 0.45); +} +a.listItemMetaTitle { + color: rgba(0, 0, 0, 0.85); +} +.baseView .right .avatar_title { + color: rgba(0, 0, 0, 0.85); +} +.main { + background-color: #fff; +} +.main .leftmenu { + border-right: 1px solid #e8e8e8; +} +.main .leftmenu :global .ant-menu-inline { + border: none; +} +.main .right .title { + color: rgba(0, 0, 0, 0.85); +} +.main :global .ant-list-split .ant-list-item:last-child { + border-bottom: 1px solid #e8e8e8; +} +:global .ant-list-item-meta .taobao { + color: #ff4000; + border-radius: 4px; +} +:global .ant-list-item-meta .dingding { + background-color: #2eabff; + color: #fff; + border-radius: 4px; +} +:global .ant-list-item-meta .alipay { + color: #2eabff; + border-radius: 4px; +} +:global font.strong { + color: #52c41a; +} +:global font.medium { + color: #faad14; +} +:global font.weak { + color: #f5222d; +} + + + + +.trigger { + background: 'red'; +} +.desc { + color: rgba(0, 0, 0, 0.45); +} +.desc h3 { + color: rgba(0, 0, 0, 0.45); +} +.desc h4 { + color: rgba(0, 0, 0, 0.45); +} +.information .label { + color: rgba(0, 0, 0, 0.85); +} +.errorIcon { + color: #f5222d; +} +.errorListItem { + border-bottom: 1px solid #e8e8e8; +} +.errorListItem:hover { + background: color(~`colorPalette("@{primary-color}", 1)`); +} +.errorListItem:last-child { + border: 0; +} +.errorListItem .errorIcon { + color: #f5222d; +} +.errorListItem .errorField { + color: rgba(0, 0, 0, 0.45); +} +.optional { + color: rgba(0, 0, 0, 0.45); +} +a.listItemMetaTitle { + color: rgba(0, 0, 0, 0.85); +} +.noData { + color: rgba(0, 0, 0, 0.25); +} +.heading { + color: rgba(0, 0, 0, 0.85); +} +.textSecondary { + color: rgba(0, 0, 0, 0.45); +} +.title { + color: rgba(0, 0, 0, 0.85); +} +.main .icon { + color: rgba(0, 0, 0, 0.2); +} +.main .icon:hover { + color: @primary-color; +} +.success { + color: #52c41a; +} +.warning { + color: #faad14; +} +.error { + color: #f5222d; +} +.progress-pass > .progress :global .ant-progress-bg { + background-color: #faad14; +} +html { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} +body { + color: rgba(0, 0, 0, 0.65); + background-color: #fff; +} +h1, +h2, +h3, +h4, +h5, +h6 { + color: rgba(0, 0, 0, 0.85); +} +abbr[title], +abbr[data-original-title] { + border-bottom: 0; +} +a { + color: @primary-color; + background-color: transparent; +} +a:hover { + color: color(~`colorPalette("@{primary-color}", 5)`); +} +a:active { + color: color(~`colorPalette("@{primary-color}", 7)`); +} +a[disabled] { + color: rgba(0, 0, 0, 0.25); +} +img { + border-style: none; +} +table { + border-collapse: collapse; +} +caption { + color: rgba(0, 0, 0, 0.45); +} +input, +button, +select, +optgroup, +textarea { + color: inherit; +} +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; +} +fieldset { + border: 0; +} +legend { + color: inherit; +} +mark { + background-color: #feffe6; +} +::selection { + background: @primary-color; + color: #fff; +} +[ant-click-animating-without-extra-node]:after, +.ant-click-animating-node { + border-radius: inherit; + border: 0 solid @primary-color; +} +.ant-alert { + color: rgba(0, 0, 0, 0.65); + border-radius: 4px; +} +.ant-alert-success { + border: 1px solid #b7eb8f; + background-color: #f6ffed; +} +.ant-alert-success .ant-alert-icon { + color: #52c41a; +} +.ant-alert-info { + border: 1px solid color(~`colorPalette("@{primary-color}", 3)`); + background-color: color(~`colorPalette("@{primary-color}", 1)`); +} +.ant-alert-info .ant-alert-icon { + color: @primary-color; +} +.ant-alert-warning { + border: 1px solid #ffe58f; + background-color: #fffbe6; +} +.ant-alert-warning .ant-alert-icon { + color: #faad14; +} +.ant-alert-error { + border: 1px solid #ffa39e; + background-color: #fff1f0; +} +.ant-alert-error .ant-alert-icon { + color: #f5222d; +} +.ant-alert-close-icon .anticon-close { + color: rgba(0, 0, 0, 0.45); +} +.ant-alert-close-icon .anticon-close:hover { + color: #404040; +} +.ant-alert-with-description { + border-radius: 4px; + color: rgba(0, 0, 0, 0.65); +} +.ant-alert-with-description .ant-alert-message { + color: rgba(0, 0, 0, 0.85); +} +.ant-alert-banner { + border-radius: 0; + border: 0; +} +.ant-anchor { + color: rgba(0, 0, 0, 0.65); +} +.ant-anchor-wrapper { + background-color: #fff; +} +.ant-anchor-ink:before { + background-color: #e8e8e8; +} +.ant-anchor-ink-ball { + border-radius: 8px; + border: 2px solid @primary-color; + background-color: #fff; +} +.ant-anchor-link-title { + color: rgba(0, 0, 0, 0.65); +} +.ant-anchor-link-active > .ant-anchor-link-title { + color: @primary-color; +} +.ant-select-auto-complete { + color: rgba(0, 0, 0, 0.65); +} +.ant-select-auto-complete.ant-select .ant-select-selection { + border: 0; + box-shadow: none; +} +.ant-select-auto-complete.ant-select .ant-input { + background: transparent; + border-width: 1px; +} +.ant-select-auto-complete.ant-select .ant-input:focus, +.ant-select-auto-complete.ant-select .ant-input:hover { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + border-right-width: 1px !important; +} +.ant-avatar { + color: rgba(0, 0, 0, 0.65); + background: #ccc; + color: #fff; + border-radius: 50%; +} +.ant-avatar-image { + background: transparent; +} +.ant-avatar-lg { + border-radius: 50%; +} +.ant-avatar-sm { + border-radius: 50%; +} +.ant-avatar-square { + border-radius: 4px; +} +.ant-back-top { + color: rgba(0, 0, 0, 0.65); +} +.ant-back-top-content { + border-radius: 20px; + background-color: rgba(0, 0, 0, 0.45); + color: #fff; +} +.ant-back-top-content:hover { + background-color: rgba(0, 0, 0, 0.65); +} +.ant-back-top-icon { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAABGdBTUEAALGPC/xhBQAAAbtJREFUWAntmMtKw0AUhhMvS5cuxILgQlRUpIggIoKIIoigG1eC+AA+jo+i6FIXBfeuXIgoeKVeitVWJX5HWhhDksnUpp3FDPyZk3Nm5nycmZKkXhAEOXSA3lG7muTeRzmfy6HneUvIhnYkQK+Q9NhAA0Opg0vBEhjBKHiyb8iGMyQMOYuK41BcBSypAL+MYXSKjtFAW7EAGEO3qN4uMQbbAkXiSfRQJ1H6a+yhlkKRcAoVFYiweYNjtCVQJJpBz2GCiPt7fBOZQpFgDpUikse5HgnkM4Fi4QX0Fpc5wf9EbLqpUCy4jMoJSXWhFwbMNgWKhVbRhy5jirhs9fy/oFhgHVVTJEs7RLZ8sSEoJm6iz7SZDMbJ+/OKERQTttCXQRLToRUmrKWCYuA2+jbN0MB4OQobYShfdTCgn/sL1K36M7TLrN3n+758aPy2rrpR6+/od5E8tf/A1uLS9aId5T7J3CNYihkQ4D9PiMdMC7mp4rjB9kjFjZp8BlnVHJBuO1yFXIV0FdDF3RlyFdJVQBdv5AxVdIsq8apiZ2PyYO1EVykesGfZEESsCkweyR8MUW+V8uJ1gkYipmpdP1pm2aJVPEGzAAAAAElFTkSuQmCC) 100%/100% no-repeat; +} +.ant-badge { + color: rgba(0, 0, 0, 0.65); + color: unset; +} +.ant-badge-count { + border-radius: 10px; + background: #f5222d; + color: #fff; + box-shadow: 0 0 0 1px #fff; +} +.ant-badge-count a, +.ant-badge-count a:hover { + color: #fff; +} +.ant-badge-dot { + border-radius: 100%; + background: #f5222d; + box-shadow: 0 0 0 1px #fff; +} +.ant-badge-status-dot { + border-radius: 50%; +} +.ant-badge-status-success { + background-color: #52c41a; +} +.ant-badge-status-processing { + background-color: @primary-color; +} +.ant-badge-status-processing:after { + border-radius: 50%; + border: 1px solid @primary-color; +} +.ant-badge-status-default { + background-color: #d9d9d9; +} +.ant-badge-status-error { + background-color: #f5222d; +} +.ant-badge-status-warning { + background-color: #faad14; +} +.ant-badge-status-text { + color: rgba(0, 0, 0, 0.65); +} +.ant-breadcrumb { + color: rgba(0, 0, 0, 0.65); + color: rgba(0, 0, 0, 0.45); +} +.ant-breadcrumb a { + color: rgba(0, 0, 0, 0.45); +} +.ant-breadcrumb a:hover { + color: color(~`colorPalette("@{primary-color}", 5)`); +} +.ant-breadcrumb > span:last-child { + color: rgba(0, 0, 0, 0.65); +} +.ant-breadcrumb-separator { + color: rgba(0, 0, 0, 0.45); +} +.ant-btn { + background-image: none; + border: 1px solid transparent; + border-radius: 4px; + box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015); + color: rgba(0, 0, 0, 0.65); + background-color: #fff; + border-color: #d9d9d9; +} +.ant-btn:not([disabled]):active { + box-shadow: none; +} +.ant-btn-lg { + border-radius: 4px; +} +.ant-btn-sm { + border-radius: 4px; +} +.ant-btn > a:only-child { + color: currentColor; +} +.ant-btn > a:only-child:after { + background: transparent; +} +.ant-btn:hover, +.ant-btn:focus { + color: color(~`colorPalette("@{primary-color}", 5)`); + background-color: #fff; + border-color: color(~`colorPalette("@{primary-color}", 5)`); +} +.ant-btn:hover > a:only-child, +.ant-btn:focus > a:only-child { + color: currentColor; +} +.ant-btn:hover > a:only-child:after, +.ant-btn:focus > a:only-child:after { + background: transparent; +} +.ant-btn:active, +.ant-btn.active { + color: color(~`colorPalette("@{primary-color}", 7)`); + background-color: #fff; + border-color: color(~`colorPalette("@{primary-color}", 7)`); +} +.ant-btn:active > a:only-child, +.ant-btn.active > a:only-child { + color: currentColor; +} +.ant-btn:active > a:only-child:after, +.ant-btn.active > a:only-child:after { + background: transparent; +} +.ant-btn.disabled, +.ant-btn[disabled], +.ant-btn.disabled:hover, +.ant-btn[disabled]:hover, +.ant-btn.disabled:focus, +.ant-btn[disabled]:focus, +.ant-btn.disabled:active, +.ant-btn[disabled]:active, +.ant-btn.disabled.active, +.ant-btn[disabled].active { + color: rgba(0, 0, 0, 0.25); + background-color: #f5f5f5; + border-color: #d9d9d9; + box-shadow: none; +} +.ant-btn.disabled > a:only-child, +.ant-btn[disabled] > a:only-child, +.ant-btn.disabled:hover > a:only-child, +.ant-btn[disabled]:hover > a:only-child, +.ant-btn.disabled:focus > a:only-child, +.ant-btn[disabled]:focus > a:only-child, +.ant-btn.disabled:active > a:only-child, +.ant-btn[disabled]:active > a:only-child, +.ant-btn.disabled.active > a:only-child, +.ant-btn[disabled].active > a:only-child { + color: currentColor; +} +.ant-btn.disabled > a:only-child:after, +.ant-btn[disabled] > a:only-child:after, +.ant-btn.disabled:hover > a:only-child:after, +.ant-btn[disabled]:hover > a:only-child:after, +.ant-btn.disabled:focus > a:only-child:after, +.ant-btn[disabled]:focus > a:only-child:after, +.ant-btn.disabled:active > a:only-child:after, +.ant-btn[disabled]:active > a:only-child:after, +.ant-btn.disabled.active > a:only-child:after, +.ant-btn[disabled].active > a:only-child:after { + background: transparent; +} +.ant-btn:hover, +.ant-btn:focus, +.ant-btn:active, +.ant-btn.active { + background: #fff; +} +.ant-btn-primary { + color: #fff; + background-color: @primary-color; + border-color: @primary-color; + box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035); +} +.ant-btn-primary > a:only-child { + color: currentColor; +} +.ant-btn-primary > a:only-child:after { + background: transparent; +} +.ant-btn-primary:hover, +.ant-btn-primary:focus { + color: #fff; + background-color: color(~`colorPalette("@{primary-color}", 5)`); + border-color: color(~`colorPalette("@{primary-color}", 5)`); +} +.ant-btn-primary:hover > a:only-child, +.ant-btn-primary:focus > a:only-child { + color: currentColor; +} +.ant-btn-primary:hover > a:only-child:after, +.ant-btn-primary:focus > a:only-child:after { + background: transparent; +} +.ant-btn-primary:active, +.ant-btn-primary.active { + color: #fff; + background-color: color(~`colorPalette("@{primary-color}", 7)`); + border-color: color(~`colorPalette("@{primary-color}", 7)`); +} +.ant-btn-primary:active > a:only-child, +.ant-btn-primary.active > a:only-child { + color: currentColor; +} +.ant-btn-primary:active > a:only-child:after, +.ant-btn-primary.active > a:only-child:after { + background: transparent; +} +.ant-btn-primary.disabled, +.ant-btn-primary[disabled], +.ant-btn-primary.disabled:hover, +.ant-btn-primary[disabled]:hover, +.ant-btn-primary.disabled:focus, +.ant-btn-primary[disabled]:focus, +.ant-btn-primary.disabled:active, +.ant-btn-primary[disabled]:active, +.ant-btn-primary.disabled.active, +.ant-btn-primary[disabled].active { + color: rgba(0, 0, 0, 0.25); + background-color: #f5f5f5; + border-color: #d9d9d9; + box-shadow: none; +} +.ant-btn-primary.disabled > a:only-child, +.ant-btn-primary[disabled] > a:only-child, +.ant-btn-primary.disabled:hover > a:only-child, +.ant-btn-primary[disabled]:hover > a:only-child, +.ant-btn-primary.disabled:focus > a:only-child, +.ant-btn-primary[disabled]:focus > a:only-child, +.ant-btn-primary.disabled:active > a:only-child, +.ant-btn-primary[disabled]:active > a:only-child, +.ant-btn-primary.disabled.active > a:only-child, +.ant-btn-primary[disabled].active > a:only-child { + color: currentColor; +} +.ant-btn-primary.disabled > a:only-child:after, +.ant-btn-primary[disabled] > a:only-child:after, +.ant-btn-primary.disabled:hover > a:only-child:after, +.ant-btn-primary[disabled]:hover > a:only-child:after, +.ant-btn-primary.disabled:focus > a:only-child:after, +.ant-btn-primary[disabled]:focus > a:only-child:after, +.ant-btn-primary.disabled:active > a:only-child:after, +.ant-btn-primary[disabled]:active > a:only-child:after, +.ant-btn-primary.disabled.active > a:only-child:after, +.ant-btn-primary[disabled].active > a:only-child:after { + background: transparent; +} +.ant-btn-group .ant-btn-primary:not(:first-child):not(:last-child) { + border-right-color: color(~`colorPalette("@{primary-color}", 5)`); + border-left-color: color(~`colorPalette("@{primary-color}", 5)`); +} +.ant-btn-group .ant-btn-primary:not(:first-child):not(:last-child):disabled { + border-color: #d9d9d9; +} +.ant-btn-group .ant-btn-primary:first-child:not(:last-child) { + border-right-color: color(~`colorPalette("@{primary-color}", 5)`); +} +.ant-btn-group .ant-btn-primary:first-child:not(:last-child)[disabled] { + border-right-color: #d9d9d9; +} +.ant-btn-group .ant-btn-primary:last-child:not(:first-child), +.ant-btn-group .ant-btn-primary + .ant-btn-primary { + border-left-color: color(~`colorPalette("@{primary-color}", 5)`); +} +.ant-btn-group .ant-btn-primary:last-child:not(:first-child)[disabled], +.ant-btn-group .ant-btn-primary + .ant-btn-primary[disabled] { + border-left-color: #d9d9d9; +} +.ant-btn-ghost { + color: rgba(0, 0, 0, 0.65); + background-color: transparent; + border-color: #d9d9d9; +} +.ant-btn-ghost > a:only-child { + color: currentColor; +} +.ant-btn-ghost > a:only-child:after { + background: transparent; +} +.ant-btn-ghost:hover, +.ant-btn-ghost:focus { + color: color(~`colorPalette("@{primary-color}", 5)`); + background-color: transparent; + border-color: color(~`colorPalette("@{primary-color}", 5)`); +} +.ant-btn-ghost:hover > a:only-child, +.ant-btn-ghost:focus > a:only-child { + color: currentColor; +} +.ant-btn-ghost:hover > a:only-child:after, +.ant-btn-ghost:focus > a:only-child:after { + background: transparent; +} +.ant-btn-ghost:active, +.ant-btn-ghost.active { + color: color(~`colorPalette("@{primary-color}", 7)`); + background-color: transparent; + border-color: color(~`colorPalette("@{primary-color}", 7)`); +} +.ant-btn-ghost:active > a:only-child, +.ant-btn-ghost.active > a:only-child { + color: currentColor; +} +.ant-btn-ghost:active > a:only-child:after, +.ant-btn-ghost.active > a:only-child:after { + background: transparent; +} +.ant-btn-ghost.disabled, +.ant-btn-ghost[disabled], +.ant-btn-ghost.disabled:hover, +.ant-btn-ghost[disabled]:hover, +.ant-btn-ghost.disabled:focus, +.ant-btn-ghost[disabled]:focus, +.ant-btn-ghost.disabled:active, +.ant-btn-ghost[disabled]:active, +.ant-btn-ghost.disabled.active, +.ant-btn-ghost[disabled].active { + color: rgba(0, 0, 0, 0.25); + background-color: #f5f5f5; + border-color: #d9d9d9; + box-shadow: none; +} +.ant-btn-ghost.disabled > a:only-child, +.ant-btn-ghost[disabled] > a:only-child, +.ant-btn-ghost.disabled:hover > a:only-child, +.ant-btn-ghost[disabled]:hover > a:only-child, +.ant-btn-ghost.disabled:focus > a:only-child, +.ant-btn-ghost[disabled]:focus > a:only-child, +.ant-btn-ghost.disabled:active > a:only-child, +.ant-btn-ghost[disabled]:active > a:only-child, +.ant-btn-ghost.disabled.active > a:only-child, +.ant-btn-ghost[disabled].active > a:only-child { + color: currentColor; +} +.ant-btn-ghost.disabled > a:only-child:after, +.ant-btn-ghost[disabled] > a:only-child:after, +.ant-btn-ghost.disabled:hover > a:only-child:after, +.ant-btn-ghost[disabled]:hover > a:only-child:after, +.ant-btn-ghost.disabled:focus > a:only-child:after, +.ant-btn-ghost[disabled]:focus > a:only-child:after, +.ant-btn-ghost.disabled:active > a:only-child:after, +.ant-btn-ghost[disabled]:active > a:only-child:after, +.ant-btn-ghost.disabled.active > a:only-child:after, +.ant-btn-ghost[disabled].active > a:only-child:after { + background: transparent; +} +.ant-btn-dashed { + color: rgba(0, 0, 0, 0.65); + background-color: #fff; + border-color: #d9d9d9; + border-style: dashed; +} +.ant-btn-dashed > a:only-child { + color: currentColor; +} +.ant-btn-dashed > a:only-child:after { + background: transparent; +} +.ant-btn-dashed:hover, +.ant-btn-dashed:focus { + color: color(~`colorPalette("@{primary-color}", 5)`); + background-color: #fff; + border-color: color(~`colorPalette("@{primary-color}", 5)`); +} +.ant-btn-dashed:hover > a:only-child, +.ant-btn-dashed:focus > a:only-child { + color: currentColor; +} +.ant-btn-dashed:hover > a:only-child:after, +.ant-btn-dashed:focus > a:only-child:after { + background: transparent; +} +.ant-btn-dashed:active, +.ant-btn-dashed.active { + color: color(~`colorPalette("@{primary-color}", 7)`); + background-color: #fff; + border-color: color(~`colorPalette("@{primary-color}", 7)`); +} +.ant-btn-dashed:active > a:only-child, +.ant-btn-dashed.active > a:only-child { + color: currentColor; +} +.ant-btn-dashed:active > a:only-child:after, +.ant-btn-dashed.active > a:only-child:after { + background: transparent; +} +.ant-btn-dashed.disabled, +.ant-btn-dashed[disabled], +.ant-btn-dashed.disabled:hover, +.ant-btn-dashed[disabled]:hover, +.ant-btn-dashed.disabled:focus, +.ant-btn-dashed[disabled]:focus, +.ant-btn-dashed.disabled:active, +.ant-btn-dashed[disabled]:active, +.ant-btn-dashed.disabled.active, +.ant-btn-dashed[disabled].active { + color: rgba(0, 0, 0, 0.25); + background-color: #f5f5f5; + border-color: #d9d9d9; + box-shadow: none; +} +.ant-btn-dashed.disabled > a:only-child, +.ant-btn-dashed[disabled] > a:only-child, +.ant-btn-dashed.disabled:hover > a:only-child, +.ant-btn-dashed[disabled]:hover > a:only-child, +.ant-btn-dashed.disabled:focus > a:only-child, +.ant-btn-dashed[disabled]:focus > a:only-child, +.ant-btn-dashed.disabled:active > a:only-child, +.ant-btn-dashed[disabled]:active > a:only-child, +.ant-btn-dashed.disabled.active > a:only-child, +.ant-btn-dashed[disabled].active > a:only-child { + color: currentColor; +} +.ant-btn-dashed.disabled > a:only-child:after, +.ant-btn-dashed[disabled] > a:only-child:after, +.ant-btn-dashed.disabled:hover > a:only-child:after, +.ant-btn-dashed[disabled]:hover > a:only-child:after, +.ant-btn-dashed.disabled:focus > a:only-child:after, +.ant-btn-dashed[disabled]:focus > a:only-child:after, +.ant-btn-dashed.disabled:active > a:only-child:after, +.ant-btn-dashed[disabled]:active > a:only-child:after, +.ant-btn-dashed.disabled.active > a:only-child:after, +.ant-btn-dashed[disabled].active > a:only-child:after { + background: transparent; +} +.ant-btn-danger { + color: #f5222d; + background-color: #f5f5f5; + border-color: #d9d9d9; +} +.ant-btn-danger > a:only-child { + color: currentColor; +} +.ant-btn-danger > a:only-child:after { + background: transparent; +} +.ant-btn-danger:hover { + color: #fff; + background-color: #ff4d4f; + border-color: #ff4d4f; +} +.ant-btn-danger:hover > a:only-child { + color: currentColor; +} +.ant-btn-danger:hover > a:only-child:after { + background: transparent; +} +.ant-btn-danger:focus { + color: #ff4d4f; + background-color: #fff; + border-color: #ff4d4f; +} +.ant-btn-danger:focus > a:only-child { + color: currentColor; +} +.ant-btn-danger:focus > a:only-child:after { + background: transparent; +} +.ant-btn-danger:active, +.ant-btn-danger.active { + color: #fff; + background-color: #cf1322; + border-color: #cf1322; +} +.ant-btn-danger:active > a:only-child, +.ant-btn-danger.active > a:only-child { + color: currentColor; +} +.ant-btn-danger:active > a:only-child:after, +.ant-btn-danger.active > a:only-child:after { + background: transparent; +} +.ant-btn-danger.disabled, +.ant-btn-danger[disabled], +.ant-btn-danger.disabled:hover, +.ant-btn-danger[disabled]:hover, +.ant-btn-danger.disabled:focus, +.ant-btn-danger[disabled]:focus, +.ant-btn-danger.disabled:active, +.ant-btn-danger[disabled]:active, +.ant-btn-danger.disabled.active, +.ant-btn-danger[disabled].active { + color: rgba(0, 0, 0, 0.25); + background-color: #f5f5f5; + border-color: #d9d9d9; + box-shadow: none; +} +.ant-btn-danger.disabled > a:only-child, +.ant-btn-danger[disabled] > a:only-child, +.ant-btn-danger.disabled:hover > a:only-child, +.ant-btn-danger[disabled]:hover > a:only-child, +.ant-btn-danger.disabled:focus > a:only-child, +.ant-btn-danger[disabled]:focus > a:only-child, +.ant-btn-danger.disabled:active > a:only-child, +.ant-btn-danger[disabled]:active > a:only-child, +.ant-btn-danger.disabled.active > a:only-child, +.ant-btn-danger[disabled].active > a:only-child { + color: currentColor; +} +.ant-btn-danger.disabled > a:only-child:after, +.ant-btn-danger[disabled] > a:only-child:after, +.ant-btn-danger.disabled:hover > a:only-child:after, +.ant-btn-danger[disabled]:hover > a:only-child:after, +.ant-btn-danger.disabled:focus > a:only-child:after, +.ant-btn-danger[disabled]:focus > a:only-child:after, +.ant-btn-danger.disabled:active > a:only-child:after, +.ant-btn-danger[disabled]:active > a:only-child:after, +.ant-btn-danger.disabled.active > a:only-child:after, +.ant-btn-danger[disabled].active > a:only-child:after { + background: transparent; +} +.ant-btn-circle, +.ant-btn-circle-outline { + border-radius: 50%; +} +.ant-btn-circle.ant-btn-lg, +.ant-btn-circle-outline.ant-btn-lg { + border-radius: 50%; +} +.ant-btn-circle.ant-btn-sm, +.ant-btn-circle-outline.ant-btn-sm { + border-radius: 50%; +} +.ant-btn:before { + background: #fff; + border-radius: inherit; +} +.ant-btn-group-lg > .ant-btn, +.ant-btn-group-lg > span > .ant-btn { + border-radius: 0; +} +.ant-btn-group-sm > .ant-btn, +.ant-btn-group-sm > span > .ant-btn { + border-radius: 0; +} +.ant-btn-group .ant-btn-primary + .ant-btn:not(.ant-btn-primary):not([disabled]) { + border-left-color: transparent; +} +.ant-btn-group .ant-btn { + border-radius: 0; +} +.ant-btn-group > .ant-btn:only-child { + border-radius: 4px; +} +.ant-btn-group > span:only-child > .ant-btn { + border-radius: 4px; +} +.ant-btn-group > .ant-btn:first-child:not(:last-child), +.ant-btn-group > span:first-child:not(:last-child) > .ant-btn { + border-bottom-left-radius: 4px; + border-top-left-radius: 4px; +} +.ant-btn-group > .ant-btn:last-child:not(:first-child), +.ant-btn-group > span:last-child:not(:first-child) > .ant-btn { + border-bottom-right-radius: 4px; + border-top-right-radius: 4px; +} +.ant-btn-group-sm > .ant-btn:only-child { + border-radius: 4px; +} +.ant-btn-group-sm > span:only-child > .ant-btn { + border-radius: 4px; +} +.ant-btn-group-sm > .ant-btn:first-child:not(:last-child), +.ant-btn-group-sm > span:first-child:not(:last-child) > .ant-btn { + border-bottom-left-radius: 4px; + border-top-left-radius: 4px; +} +.ant-btn-group-sm > .ant-btn:last-child:not(:first-child), +.ant-btn-group-sm > span:last-child:not(:first-child) > .ant-btn { + border-bottom-right-radius: 4px; + border-top-right-radius: 4px; +} +.ant-btn-group > .ant-btn-group:not(:first-child):not(:last-child) > .ant-btn { + border-radius: 0; +} +.ant-btn-group > .ant-btn-group:first-child:not(:last-child) > .ant-btn:last-child { + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} +.ant-btn-group > .ant-btn-group:last-child:not(:first-child) > .ant-btn:first-child { + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} +.ant-btn-background-ghost { + background: transparent !important; + border-color: #fff; + color: #fff; +} +.ant-btn-background-ghost.ant-btn-primary { + color: @primary-color; + background-color: transparent; + border-color: @primary-color; +} +.ant-btn-background-ghost.ant-btn-primary > a:only-child { + color: currentColor; +} +.ant-btn-background-ghost.ant-btn-primary > a:only-child:after { + background: transparent; +} +.ant-btn-background-ghost.ant-btn-primary:hover, +.ant-btn-background-ghost.ant-btn-primary:focus { + color: color(~`colorPalette("@{primary-color}", 5)`); + background-color: transparent; + border-color: color(~`colorPalette("@{primary-color}", 5)`); +} +.ant-btn-background-ghost.ant-btn-primary:hover > a:only-child, +.ant-btn-background-ghost.ant-btn-primary:focus > a:only-child { + color: currentColor; +} +.ant-btn-background-ghost.ant-btn-primary:hover > a:only-child:after, +.ant-btn-background-ghost.ant-btn-primary:focus > a:only-child:after { + background: transparent; +} +.ant-btn-background-ghost.ant-btn-primary:active, +.ant-btn-background-ghost.ant-btn-primary.active { + color: color(~`colorPalette("@{primary-color}", 7)`); + background-color: transparent; + border-color: color(~`colorPalette("@{primary-color}", 7)`); +} +.ant-btn-background-ghost.ant-btn-primary:active > a:only-child, +.ant-btn-background-ghost.ant-btn-primary.active > a:only-child { + color: currentColor; +} +.ant-btn-background-ghost.ant-btn-primary:active > a:only-child:after, +.ant-btn-background-ghost.ant-btn-primary.active > a:only-child:after { + background: transparent; +} +.ant-btn-background-ghost.ant-btn-primary.disabled, +.ant-btn-background-ghost.ant-btn-primary[disabled], +.ant-btn-background-ghost.ant-btn-primary.disabled:hover, +.ant-btn-background-ghost.ant-btn-primary[disabled]:hover, +.ant-btn-background-ghost.ant-btn-primary.disabled:focus, +.ant-btn-background-ghost.ant-btn-primary[disabled]:focus, +.ant-btn-background-ghost.ant-btn-primary.disabled:active, +.ant-btn-background-ghost.ant-btn-primary[disabled]:active, +.ant-btn-background-ghost.ant-btn-primary.disabled.active, +.ant-btn-background-ghost.ant-btn-primary[disabled].active { + color: rgba(0, 0, 0, 0.25); + background-color: #f5f5f5; + border-color: #d9d9d9; + box-shadow: none; +} +.ant-btn-background-ghost.ant-btn-primary.disabled > a:only-child, +.ant-btn-background-ghost.ant-btn-primary[disabled] > a:only-child, +.ant-btn-background-ghost.ant-btn-primary.disabled:hover > a:only-child, +.ant-btn-background-ghost.ant-btn-primary[disabled]:hover > a:only-child, +.ant-btn-background-ghost.ant-btn-primary.disabled:focus > a:only-child, +.ant-btn-background-ghost.ant-btn-primary[disabled]:focus > a:only-child, +.ant-btn-background-ghost.ant-btn-primary.disabled:active > a:only-child, +.ant-btn-background-ghost.ant-btn-primary[disabled]:active > a:only-child, +.ant-btn-background-ghost.ant-btn-primary.disabled.active > a:only-child, +.ant-btn-background-ghost.ant-btn-primary[disabled].active > a:only-child { + color: currentColor; +} +.ant-btn-background-ghost.ant-btn-primary.disabled > a:only-child:after, +.ant-btn-background-ghost.ant-btn-primary[disabled] > a:only-child:after, +.ant-btn-background-ghost.ant-btn-primary.disabled:hover > a:only-child:after, +.ant-btn-background-ghost.ant-btn-primary[disabled]:hover > a:only-child:after, +.ant-btn-background-ghost.ant-btn-primary.disabled:focus > a:only-child:after, +.ant-btn-background-ghost.ant-btn-primary[disabled]:focus > a:only-child:after, +.ant-btn-background-ghost.ant-btn-primary.disabled:active > a:only-child:after, +.ant-btn-background-ghost.ant-btn-primary[disabled]:active > a:only-child:after, +.ant-btn-background-ghost.ant-btn-primary.disabled.active > a:only-child:after, +.ant-btn-background-ghost.ant-btn-primary[disabled].active > a:only-child:after { + background: transparent; +} +.ant-btn-background-ghost.ant-btn-danger { + color: #f5222d; + background-color: transparent; + border-color: #f5222d; +} +.ant-btn-background-ghost.ant-btn-danger > a:only-child { + color: currentColor; +} +.ant-btn-background-ghost.ant-btn-danger > a:only-child:after { + background: transparent; +} +.ant-btn-background-ghost.ant-btn-danger:hover, +.ant-btn-background-ghost.ant-btn-danger:focus { + color: #ff4d4f; + background-color: transparent; + border-color: #ff4d4f; +} +.ant-btn-background-ghost.ant-btn-danger:hover > a:only-child, +.ant-btn-background-ghost.ant-btn-danger:focus > a:only-child { + color: currentColor; +} +.ant-btn-background-ghost.ant-btn-danger:hover > a:only-child:after, +.ant-btn-background-ghost.ant-btn-danger:focus > a:only-child:after { + background: transparent; +} +.ant-btn-background-ghost.ant-btn-danger:active, +.ant-btn-background-ghost.ant-btn-danger.active { + color: #cf1322; + background-color: transparent; + border-color: #cf1322; +} +.ant-btn-background-ghost.ant-btn-danger:active > a:only-child, +.ant-btn-background-ghost.ant-btn-danger.active > a:only-child { + color: currentColor; +} +.ant-btn-background-ghost.ant-btn-danger:active > a:only-child:after, +.ant-btn-background-ghost.ant-btn-danger.active > a:only-child:after { + background: transparent; +} +.ant-btn-background-ghost.ant-btn-danger.disabled, +.ant-btn-background-ghost.ant-btn-danger[disabled], +.ant-btn-background-ghost.ant-btn-danger.disabled:hover, +.ant-btn-background-ghost.ant-btn-danger[disabled]:hover, +.ant-btn-background-ghost.ant-btn-danger.disabled:focus, +.ant-btn-background-ghost.ant-btn-danger[disabled]:focus, +.ant-btn-background-ghost.ant-btn-danger.disabled:active, +.ant-btn-background-ghost.ant-btn-danger[disabled]:active, +.ant-btn-background-ghost.ant-btn-danger.disabled.active, +.ant-btn-background-ghost.ant-btn-danger[disabled].active { + color: rgba(0, 0, 0, 0.25); + background-color: #f5f5f5; + border-color: #d9d9d9; + box-shadow: none; +} +.ant-btn-background-ghost.ant-btn-danger.disabled > a:only-child, +.ant-btn-background-ghost.ant-btn-danger[disabled] > a:only-child, +.ant-btn-background-ghost.ant-btn-danger.disabled:hover > a:only-child, +.ant-btn-background-ghost.ant-btn-danger[disabled]:hover > a:only-child, +.ant-btn-background-ghost.ant-btn-danger.disabled:focus > a:only-child, +.ant-btn-background-ghost.ant-btn-danger[disabled]:focus > a:only-child, +.ant-btn-background-ghost.ant-btn-danger.disabled:active > a:only-child, +.ant-btn-background-ghost.ant-btn-danger[disabled]:active > a:only-child, +.ant-btn-background-ghost.ant-btn-danger.disabled.active > a:only-child, +.ant-btn-background-ghost.ant-btn-danger[disabled].active > a:only-child { + color: currentColor; +} +.ant-btn-background-ghost.ant-btn-danger.disabled > a:only-child:after, +.ant-btn-background-ghost.ant-btn-danger[disabled] > a:only-child:after, +.ant-btn-background-ghost.ant-btn-danger.disabled:hover > a:only-child:after, +.ant-btn-background-ghost.ant-btn-danger[disabled]:hover > a:only-child:after, +.ant-btn-background-ghost.ant-btn-danger.disabled:focus > a:only-child:after, +.ant-btn-background-ghost.ant-btn-danger[disabled]:focus > a:only-child:after, +.ant-btn-background-ghost.ant-btn-danger.disabled:active > a:only-child:after, +.ant-btn-background-ghost.ant-btn-danger[disabled]:active > a:only-child:after, +.ant-btn-background-ghost.ant-btn-danger.disabled.active > a:only-child:after, +.ant-btn-background-ghost.ant-btn-danger[disabled].active > a:only-child:after { + background: transparent; +} +.christmas.ant-btn-primary:before { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE0AAAAXCAYAAABOHMIhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABiZJREFUeNrsWMtPlFcUvzPMwIDysLyRR4uATDHWCiVgSmRlios2DeiiXUFs0nRBd6arxqQhJDapkYXhP4BqDKTQhZaFNQSCaBEVJjwdHsNr5DUMDDPDzPT3u7nTDEgRKrKgc5KT+z3uufec33de99P4fD4RpL2RNgjB3kn35MkTeRERESFiYmLkGBoaKnQ6nWSNRvPPZFxr+vv7k6KioiIdDsfa8vLyQkFBgcP3Bnel3MDAQArWI0eFhISE87nb7bZ7PJ4VvLYuLi5O5+fnu9+kMNfq6+tLjIyMzMY6KeBEbK/XarXReI3lPDZMWcc4v7GxYV1dXR3Jy8ub2E5HPvJ6vRSSDH0ku1wuAfsEZOV1IEFHoeNFdHS0yMrK2knR0Lm5uR+hxLdQMjbwHTZbB41h8RGwCdc9MzMzneHh4bGJiYlf4SN8ijkfwqiIncCAAR7Iz2GPSShudjqdfeCeqampvwBQfFxc3JdYqwTv8gB8/F48A8BgKecE14V+L7ju2tpae05OzkuCCZvkPOj8mizmC6vVKtmPu+bx48cC3qI1mUyFUOyywWD4SHlELBaLJmCHNcwAghuAOujtuF4FqHO4nsX4EsAS3I4TJ04ME1h8PDE9PS09TYZoY2Pj1729vd6lpSVfkDYTPG0UkfNDRUWFgQ5Gb2Mh0N29e9eG/GQfHh4W8/PzwUy/ObQ/gMfVVlZW1iAiZdQxp3nv3LljRoL/5erVq1UIxzSiiVD9X4EDYATynCwAzGO858hCQRoaGmJFZNJz8YIcBc4BF966dau6sLAwBxVSJCUlCSThQwuU3W6XkYUok1Vzm5znQx5bbm9v77p+/frPeNSNRzZ/ISBwrG4ZR48eLamtrf2+uLjYSEG9Xi/wTISFhQlWGXohyzO/CJlVl23KQRLbABoaHx+/Z1lUZ/Hq1SsJFj3JT3hmHx8fnydPTEzMj46OziHPW2w22wxeD4Kfgadh/4YEzU8Az4DhffAn5eXlX1y6dKkEoCTspAQ9Mjs7+0BBo8Fms1lkZGTsOo0QLLRNkvnR+fEJzIMHD0xtbW39CL8JTFtSbAOvBIyLHIGVm9VzE2gKuDAMSSpcT6KXyT137lx2cnLyMXhcGDb3wq3XuWF3d/fCzZs3P0c4v5eSknJQbYLo7Ox0gC2lpaVZ3Be67Th/dnZWoAJKsJC3XA8fPhxoamp6hMb+BaaMgWcUMGtszZjiFDNmvcDI91pzG0iY4ARwkwrxkcHBwUdgNrRMbnrqoRbkVzDcvn3bl5qaWsmcgFH4G8XdEGUWFhak51AuISFBnkoCTyFbyWKxCJwIxlC0fq2rq7tcVFRkRKskjh8/Lr0+kBjCCDV/knfdv3//WX19/R8IRRNemxlu4AXwKqM+EJwdj1HbPYSwh3sCPAJDABm2LLchCjS+5/kirKGhwWk0GrMuXrxYQuX9hm/XXTMXMY+srKwI5ApZrbYmZh7deEJhAUKjLe/pLTzSsCuHrK+1tbUJVe3P6upq87Vr174rKysrYHVj/uW+OH3IfEuw4F3ee/fuPQfAvwOs5yyE4CnlFOu7BWrTCWlreO6FACpBZGwUw4BvkANLobReHb3kGZYGsGzTq/zlO8AT1ru6uoZbWlqeA6gINJAfnz59OlVLoX8Jtebm5raampqfcMvQYgTknz9//sKVK1c+y83NTdIEuCnaKMuNGzd+6+np6cCtSTkAw9D9X8Dyh+dbgaaAC1XAnUlPTy+qqqq6cPbs2UzkmWjNljiDJzpwHFnCkW2yo6NjCKW8H54wjlezKvRT09LSTsJrz5w6dSoN+Yp51ADAPUj8VoDbDq9pxrwuJcNIYQllJTIi/xopBw/VA7DJp0+f9hA78CgL5F5C8J2CpoCj8sfA6WCe/FPRhsRlZmbGIs8Y4FFO5CJgtrSsvrRVGW1V93b1myoGnKAKEcHgnwsWpg1lNI0fphwrmdqbckeU18WrnlOjqp5/j7W3BWvfQVPKa5SBkcrYCNVB65TRTlWZ1lXiXVU5xbtlDb2SPaLWYwrgHIcqPg6Vc7fbX69Yoyqfa7/AeiegbWOEVhmsVcWDwPn224iDJgla8Hd38Hd3ELQgaIeI/hZgAIPEp0vmQJdoAAAAAElFTkSuQmCC) no-repeat 50% 0; + background-size: 64px; +} +.christmas.ant-btn-primary.ant-btn-lg:before { + background-size: 72px; +} +.christmas.ant-btn-primary.ant-btn-sm:before { + background-size: 56px; +} +.ant-fullcalendar { + color: rgba(0, 0, 0, 0.65); + border-top: 1px solid #d9d9d9; +} +.ant-fullcalendar table { + border-collapse: collapse; + background-color: transparent; +} +.ant-fullcalendar table, +.ant-fullcalendar th, +.ant-fullcalendar td { + border: 0; +} +.ant-fullcalendar-calendar-table { + border-spacing: 0; +} +.ant-fullcalendar-value { + color: rgba(0, 0, 0, 0.65); + border-radius: 2px; + background: transparent; +} +.ant-fullcalendar-value:hover { + background: color(~`colorPalette("@{primary-color}", 1)`); +} +.ant-fullcalendar-value:active { + background: @primary-color; + color: #fff; +} +.ant-fullcalendar-today .ant-fullcalendar-value, +.ant-fullcalendar-month-panel-current-cell .ant-fullcalendar-value { + box-shadow: 0 0 0 1px @primary-color inset; +} +.ant-fullcalendar-selected-day .ant-fullcalendar-value, +.ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-value { + background: @primary-color; + color: #fff; +} +.ant-fullcalendar-disabled-cell-first-of-row .ant-fullcalendar-value { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; +} +.ant-fullcalendar-disabled-cell-last-of-row .ant-fullcalendar-value { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} +.ant-fullcalendar-last-month-cell .ant-fullcalendar-value, +.ant-fullcalendar-next-month-btn-day .ant-fullcalendar-value { + color: rgba(0, 0, 0, 0.25); +} +.ant-fullcalendar-month-panel-table { + border-collapse: separate; +} +.ant-fullcalendar-fullscreen { + border-top: 0; +} +.ant-fullcalendar-fullscreen .ant-fullcalendar-month, +.ant-fullcalendar-fullscreen .ant-fullcalendar-date { + color: rgba(0, 0, 0, 0.65); + border-top: 2px solid #e8e8e8; +} +.ant-fullcalendar-fullscreen .ant-fullcalendar-month:hover, +.ant-fullcalendar-fullscreen .ant-fullcalendar-date:hover { + background: color(~`colorPalette("@{primary-color}", 1)`); +} +.ant-fullcalendar-fullscreen .ant-fullcalendar-month:active, +.ant-fullcalendar-fullscreen .ant-fullcalendar-date:active { + background: color(~`colorPalette("@{primary-color}", 2)`); +} +.ant-fullcalendar-fullscreen .ant-fullcalendar-value { + background: transparent; +} +.ant-fullcalendar-fullscreen .ant-fullcalendar-today .ant-fullcalendar-value { + color: rgba(0, 0, 0, 0.65); +} +.ant-fullcalendar-fullscreen .ant-fullcalendar-month-panel-current-cell .ant-fullcalendar-month, +.ant-fullcalendar-fullscreen .ant-fullcalendar-today .ant-fullcalendar-date { + border-top-color: @primary-color; + background: transparent; +} +.ant-fullcalendar-fullscreen .ant-fullcalendar-month-panel-current-cell .ant-fullcalendar-value, +.ant-fullcalendar-fullscreen .ant-fullcalendar-today .ant-fullcalendar-value { + box-shadow: none; +} +.ant-fullcalendar-fullscreen .ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-month, +.ant-fullcalendar-fullscreen .ant-fullcalendar-selected-day .ant-fullcalendar-date { + background: color(~`colorPalette("@{primary-color}", 1)`); +} +.ant-fullcalendar-fullscreen .ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-value, +.ant-fullcalendar-fullscreen .ant-fullcalendar-selected-day .ant-fullcalendar-value { + color: @primary-color; +} +.ant-fullcalendar-fullscreen .ant-fullcalendar-last-month-cell .ant-fullcalendar-date, +.ant-fullcalendar-fullscreen .ant-fullcalendar-next-month-btn-day .ant-fullcalendar-date { + color: rgba(0, 0, 0, 0.25); +} +.ant-fullcalendar-disabled-cell:not(.ant-fullcalendar-today) .ant-fullcalendar-date, +.ant-fullcalendar-disabled-cell:not(.ant-fullcalendar-today) .ant-fullcalendar-date:hover { + background: transparent; +} +.ant-fullcalendar-disabled-cell .ant-fullcalendar-value { + color: rgba(0, 0, 0, 0.25); + border-radius: 0; +} +.ant-card { + color: rgba(0, 0, 0, 0.65); + background: #fff; + border-radius: 2px; +} +.ant-card-hoverable:hover { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09); + border-color: rgba(0, 0, 0, 0.09); +} +.ant-card-bordered { + border: 1px solid #e8e8e8; +} +.ant-card-head { + background: transparent; + border-bottom: 1px solid #e8e8e8; + border-radius: 2px 2px 0 0; + color: rgba(0, 0, 0, 0.85); +} +.ant-card-head .ant-tabs { + color: rgba(0, 0, 0, 0.65); +} +.ant-card-head .ant-tabs-bar { + border-bottom: 1px solid #e8e8e8; +} +.ant-card-extra { + color: rgba(0, 0, 0, 0.65); +} +.ant-card-grid { + border-radius: 0; + border: 0; + box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8, 1px 0 0 0 #e8e8e8 inset, 0 1px 0 0 #e8e8e8 inset; +} +.ant-card-grid:hover { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); +} +.ant-card-cover img { + border-radius: 2px 2px 0 0; +} +.ant-card-actions { + border-top: 1px solid #e8e8e8; + background: #fafafa; +} +.ant-card-actions > li { + color: rgba(0, 0, 0, 0.45); +} +.ant-card-actions > li > span:hover { + color: @primary-color; +} +.ant-card-actions > li > span a { + color: rgba(0, 0, 0, 0.45); +} +.ant-card-actions > li > span a:hover { + color: @primary-color; +} +.ant-card-actions > li:not(:last-child) { + border-right: 1px solid #e8e8e8; +} +.ant-card-type-inner .ant-card-head { + background: #fafafa; +} +.ant-card-meta-title { + color: rgba(0, 0, 0, 0.85); +} +.ant-card-meta-description { + color: rgba(0, 0, 0, 0.45); +} +.ant-card-loading-block { + border-radius: 2px; + background: linear-gradient(90deg, rgba(207, 216, 220, 0.2), rgba(207, 216, 220, 0.4), rgba(207, 216, 220, 0.2)); + background-size: 600% 600%; +} +.ant-carousel { + color: rgba(0, 0, 0, 0.65); +} +.ant-carousel .slick-slider { + -webkit-tap-highlight-color: transparent; +} +.ant-carousel .slick-vertical .slick-slide { + border: 1px solid transparent; +} +.ant-carousel .slick-prev, +.ant-carousel .slick-next { + background: transparent; + color: transparent; + border: 0; +} +.ant-carousel .slick-prev:hover, +.ant-carousel .slick-next:hover, +.ant-carousel .slick-prev:focus, +.ant-carousel .slick-next:focus { + background: transparent; + color: transparent; +} +.ant-carousel .slick-dots li button { + border: 0; + background: #fff; + border-radius: 1px; + color: transparent; +} +.ant-carousel .slick-dots li.slick-active button { + background: #fff; +} +.ant-cascader { + color: rgba(0, 0, 0, 0.65); +} +.ant-cascader-input.ant-input { + background-color: transparent !important; +} +.ant-cascader-picker { + color: rgba(0, 0, 0, 0.65); + background-color: #fff; + border-radius: 4px; +} +.ant-cascader-picker-with-value .ant-cascader-picker-label { + color: transparent; +} +.ant-cascader-picker-disabled { + background: #f5f5f5; + color: rgba(0, 0, 0, 0.25); +} +.ant-cascader-picker:focus .ant-cascader-input { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); + border-right-width: 1px !important; +} +.ant-cascader-picker-show-search.ant-cascader-picker-focused { + color: rgba(0, 0, 0, 0.25); +} +.ant-cascader-picker-clear { + background: #fff; + color: rgba(0, 0, 0, 0.25); +} +.ant-cascader-picker-clear:hover { + color: rgba(0, 0, 0, 0.45); +} +.ant-cascader-picker-arrow { + color: rgba(0, 0, 0, 0.25); +} +.ant-cascader-menus { + background: #fff; + border-radius: 4px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); +} +.ant-cascader-menu { + border-right: 1px solid #e8e8e8; +} +.ant-cascader-menu:first-child { + border-radius: 4px 0 0 4px; +} +.ant-cascader-menu:last-child { + border-right-color: transparent; + border-radius: 0 4px 4px 0; +} +.ant-cascader-menu:only-child { + border-radius: 4px; +} +.ant-cascader-menu-item:hover { + background: color(~`colorPalette("@{primary-color}", 1)`); +} +.ant-cascader-menu-item-disabled { + color: rgba(0, 0, 0, 0.25); +} +.ant-cascader-menu-item-disabled:hover { + background: transparent; +} +.ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled), +.ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled):hover { + background: #f5f5f5; +} +.ant-cascader-menu-item-expand .ant-cascader-menu-item-expand-icon, +.ant-cascader-menu-item-expand .ant-cascader-menu-item-loading-icon { + color: rgba(0, 0, 0, 0.45); +} +.ant-cascader-menu-item .ant-cascader-menu-item-keyword { + color: #f5222d; +} +.ant-checkbox { + color: rgba(0, 0, 0, 0.65); +} +.ant-checkbox-wrapper:hover .ant-checkbox-inner, +.ant-checkbox:hover .ant-checkbox-inner, +.ant-checkbox-input:focus + .ant-checkbox-inner { + border-color: @primary-color; +} +.ant-checkbox-checked:after { + border-radius: 2px; + border: 1px solid @primary-color; +} +.ant-checkbox-inner { + border: 1px solid #d9d9d9; + border-radius: 2px; + background-color: #fff; +} +.ant-checkbox-inner:after { + border: 2px solid #fff; + border-top: 0; + border-left: 0; +} +.ant-checkbox-indeterminate .ant-checkbox-inner:after { + border: 0; + background-color: @primary-color; +} +.ant-checkbox-indeterminate.ant-checkbox-disabled .ant-checkbox-inner:after { + border-color: rgba(0, 0, 0, 0.25); +} +.ant-checkbox-checked .ant-checkbox-inner:after { + border: 2px solid #fff; + border-top: 0; + border-left: 0; +} +.ant-checkbox-checked .ant-checkbox-inner { + background-color: @primary-color; + border-color: @primary-color; +} +.ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner:after { + border-color: rgba(0, 0, 0, 0.25); +} +.ant-checkbox-disabled .ant-checkbox-inner { + border-color: #d9d9d9 !important; + background-color: #f5f5f5; +} +.ant-checkbox-disabled .ant-checkbox-inner:after { + border-color: #f5f5f5; +} +.ant-checkbox-disabled + span { + color: rgba(0, 0, 0, 0.25); +} +.ant-checkbox-wrapper { + color: rgba(0, 0, 0, 0.65); +} +.ant-checkbox-group { + color: rgba(0, 0, 0, 0.65); +} +.ant-collapse { + color: rgba(0, 0, 0, 0.65); + background-color: #fafafa; + border-radius: 4px; + border: 1px solid #d9d9d9; + border-bottom: 0; +} +.ant-collapse > .ant-collapse-item { + border-bottom: 1px solid #d9d9d9; +} +.ant-collapse > .ant-collapse-item:last-child, +.ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header { + border-radius: 0 0 4px 4px; +} +.ant-collapse > .ant-collapse-item > .ant-collapse-header { + color: rgba(0, 0, 0, 0.85); +} +.ant-collapse-content { + color: rgba(0, 0, 0, 0.65); + background-color: #fff; + border-top: 1px solid #d9d9d9; +} +.ant-collapse-item:last-child > .ant-collapse-content { + border-radius: 0 0 4px 4px; +} +.ant-collapse-borderless { + background-color: #fff; + border: 0; +} +.ant-collapse-borderless > .ant-collapse-item { + border-bottom: 1px solid #d9d9d9; +} +.ant-collapse-borderless > .ant-collapse-item:last-child, +.ant-collapse-borderless > .ant-collapse-item:last-child .ant-collapse-header { + border-radius: 0; +} +.ant-collapse-borderless > .ant-collapse-item > .ant-collapse-content { + background-color: transparent; + border-top: 0; +} +.ant-collapse .ant-collapse-item-disabled > .ant-collapse-header, +.ant-collapse .ant-collapse-item-disabled > .ant-collapse-header > .arrow { + color: rgba(0, 0, 0, 0.25); +} +.ant-calendar-picker-container { + color: rgba(0, 0, 0, 0.65); +} +.ant-calendar-picker { + color: rgba(0, 0, 0, 0.65); +} +.ant-calendar-picker:hover .ant-calendar-picker-input:not(.ant-input-disabled) { + border-color: @primary-color; +} +.ant-calendar-picker:focus .ant-calendar-picker-input:not(.ant-input-disabled) { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); + border-right-width: 1px !important; +} +.ant-calendar-picker-clear { + color: rgba(0, 0, 0, 0.25); + background: #fff; +} +.ant-calendar-picker-clear:hover { + color: rgba(0, 0, 0, 0.45); +} +.ant-calendar-picker-icon { + color: rgba(0, 0, 0, 0.25); +} +.ant-calendar { + border: 1px solid #fff; + background-color: #fff; + border-radius: 4px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + background-clip: padding-box; +} +.ant-calendar-input-wrap { + border-bottom: 1px solid #e8e8e8; +} +.ant-calendar-input { + border: 0; + color: rgba(0, 0, 0, 0.65); + background: #fff; +} +.ant-calendar-input::-moz-placeholder { + color: #bfbfbf; +} +.ant-calendar-input:-ms-input-placeholder { + color: #bfbfbf; +} +.ant-calendar-input::-webkit-input-placeholder { + color: #bfbfbf; +} +.ant-calendar-header { + border-bottom: 1px solid #e8e8e8; +} +.ant-calendar-header a:hover { + color: color(~`colorPalette("@{primary-color}", 5)`); +} +.ant-calendar-header .ant-calendar-century-select, +.ant-calendar-header .ant-calendar-decade-select, +.ant-calendar-header .ant-calendar-year-select, +.ant-calendar-header .ant-calendar-month-select { + color: rgba(0, 0, 0, 0.85); +} +.ant-calendar-header .ant-calendar-prev-century-btn, +.ant-calendar-header .ant-calendar-next-century-btn, +.ant-calendar-header .ant-calendar-prev-decade-btn, +.ant-calendar-header .ant-calendar-next-decade-btn, +.ant-calendar-header .ant-calendar-prev-month-btn, +.ant-calendar-header .ant-calendar-next-month-btn, +.ant-calendar-header .ant-calendar-prev-year-btn, +.ant-calendar-header .ant-calendar-next-year-btn { + color: rgba(0, 0, 0, 0.45); +} +.ant-calendar table { + border-collapse: collapse; + background-color: transparent; +} +.ant-calendar table, +.ant-calendar th, +.ant-calendar td { + border: 0; +} +.ant-calendar-calendar-table { + border-spacing: 0; +} +.ant-calendar-date { + color: rgba(0, 0, 0, 0.65); + border-radius: 2px; + border: 1px solid transparent; + background: transparent; +} +.ant-calendar-date:hover { + background: color(~`colorPalette("@{primary-color}", 1)`); +} +.ant-calendar-date:active { + color: #fff; + background: color(~`colorPalette("@{primary-color}", 5)`); +} +.ant-calendar-today .ant-calendar-date { + border-color: @primary-color; + color: @primary-color; +} +.ant-calendar-last-month-cell .ant-calendar-date, +.ant-calendar-next-month-btn-day .ant-calendar-date { + color: rgba(0, 0, 0, 0.25); +} +.ant-calendar-selected-day .ant-calendar-date { + background: #d1e9ff; +} +.ant-calendar-selected-date .ant-calendar-date, +.ant-calendar-selected-start-date .ant-calendar-date, +.ant-calendar-selected-end-date .ant-calendar-date { + background: @primary-color; + color: #fff; + border: 1px solid transparent; +} +.ant-calendar-selected-date .ant-calendar-date:hover, +.ant-calendar-selected-start-date .ant-calendar-date:hover, +.ant-calendar-selected-end-date .ant-calendar-date:hover { + background: @primary-color; +} +.ant-calendar-disabled-cell .ant-calendar-date { + color: #bcbcbc; + background: #f5f5f5; + border-radius: 0; + border: 1px solid transparent; +} +.ant-calendar-disabled-cell .ant-calendar-date:hover { + background: #f5f5f5; +} +.ant-calendar-disabled-cell.ant-calendar-today .ant-calendar-date:before { + border: 1px solid #bcbcbc; + border-radius: 2px; +} +.ant-calendar-disabled-cell-first-of-row .ant-calendar-date { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; +} +.ant-calendar-disabled-cell-last-of-row .ant-calendar-date { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} +.ant-calendar-footer { + border-top: 1px solid #e8e8e8; +} +.ant-calendar-footer:empty { + border-top: 0; +} +.ant-calendar .ant-calendar-today-btn-disabled, +.ant-calendar .ant-calendar-clear-btn-disabled { + color: rgba(0, 0, 0, 0.25); +} +.ant-calendar .ant-calendar-clear-btn:after { + color: rgba(0, 0, 0, 0.25); +} +.ant-calendar .ant-calendar-clear-btn:hover:after { + color: rgba(0, 0, 0, 0.45); +} +.ant-calendar .ant-calendar-ok-btn { + background-image: none; + border: 1px solid transparent; + box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015); + color: #fff; + background-color: @primary-color; + border-color: @primary-color; + box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035); + border-radius: 4px; +} +.ant-calendar .ant-calendar-ok-btn:not([disabled]):active { + box-shadow: none; +} +.ant-calendar .ant-calendar-ok-btn-lg { + border-radius: 4px; +} +.ant-calendar .ant-calendar-ok-btn-sm { + border-radius: 4px; +} +.ant-calendar .ant-calendar-ok-btn > a:only-child { + color: currentColor; +} +.ant-calendar .ant-calendar-ok-btn > a:only-child:after { + background: transparent; +} +.ant-calendar .ant-calendar-ok-btn:hover, +.ant-calendar .ant-calendar-ok-btn:focus { + color: #fff; + background-color: color(~`colorPalette("@{primary-color}", 5)`); + border-color: color(~`colorPalette("@{primary-color}", 5)`); +} +.ant-calendar .ant-calendar-ok-btn:hover > a:only-child, +.ant-calendar .ant-calendar-ok-btn:focus > a:only-child { + color: currentColor; +} +.ant-calendar .ant-calendar-ok-btn:hover > a:only-child:after, +.ant-calendar .ant-calendar-ok-btn:focus > a:only-child:after { + background: transparent; +} +.ant-calendar .ant-calendar-ok-btn:active, +.ant-calendar .ant-calendar-ok-btn.active { + color: #fff; + background-color: color(~`colorPalette("@{primary-color}", 7)`); + border-color: color(~`colorPalette("@{primary-color}", 7)`); +} +.ant-calendar .ant-calendar-ok-btn:active > a:only-child, +.ant-calendar .ant-calendar-ok-btn.active > a:only-child { + color: currentColor; +} +.ant-calendar .ant-calendar-ok-btn:active > a:only-child:after, +.ant-calendar .ant-calendar-ok-btn.active > a:only-child:after { + background: transparent; +} +.ant-calendar .ant-calendar-ok-btn.disabled, +.ant-calendar .ant-calendar-ok-btn[disabled], +.ant-calendar .ant-calendar-ok-btn.disabled:hover, +.ant-calendar .ant-calendar-ok-btn[disabled]:hover, +.ant-calendar .ant-calendar-ok-btn.disabled:focus, +.ant-calendar .ant-calendar-ok-btn[disabled]:focus, +.ant-calendar .ant-calendar-ok-btn.disabled:active, +.ant-calendar .ant-calendar-ok-btn[disabled]:active, +.ant-calendar .ant-calendar-ok-btn.disabled.active, +.ant-calendar .ant-calendar-ok-btn[disabled].active { + color: rgba(0, 0, 0, 0.25); + background-color: #f5f5f5; + border-color: #d9d9d9; + box-shadow: none; +} +.ant-calendar .ant-calendar-ok-btn.disabled > a:only-child, +.ant-calendar .ant-calendar-ok-btn[disabled] > a:only-child, +.ant-calendar .ant-calendar-ok-btn.disabled:hover > a:only-child, +.ant-calendar .ant-calendar-ok-btn[disabled]:hover > a:only-child, +.ant-calendar .ant-calendar-ok-btn.disabled:focus > a:only-child, +.ant-calendar .ant-calendar-ok-btn[disabled]:focus > a:only-child, +.ant-calendar .ant-calendar-ok-btn.disabled:active > a:only-child, +.ant-calendar .ant-calendar-ok-btn[disabled]:active > a:only-child, +.ant-calendar .ant-calendar-ok-btn.disabled.active > a:only-child, +.ant-calendar .ant-calendar-ok-btn[disabled].active > a:only-child { + color: currentColor; +} +.ant-calendar .ant-calendar-ok-btn.disabled > a:only-child:after, +.ant-calendar .ant-calendar-ok-btn[disabled] > a:only-child:after, +.ant-calendar .ant-calendar-ok-btn.disabled:hover > a:only-child:after, +.ant-calendar .ant-calendar-ok-btn[disabled]:hover > a:only-child:after, +.ant-calendar .ant-calendar-ok-btn.disabled:focus > a:only-child:after, +.ant-calendar .ant-calendar-ok-btn[disabled]:focus > a:only-child:after, +.ant-calendar .ant-calendar-ok-btn.disabled:active > a:only-child:after, +.ant-calendar .ant-calendar-ok-btn[disabled]:active > a:only-child:after, +.ant-calendar .ant-calendar-ok-btn.disabled.active > a:only-child:after, +.ant-calendar .ant-calendar-ok-btn[disabled].active > a:only-child:after { + background: transparent; +} +.ant-calendar .ant-calendar-ok-btn-disabled { + color: rgba(0, 0, 0, 0.25); + background-color: #f5f5f5; + border-color: #d9d9d9; +} +.ant-calendar .ant-calendar-ok-btn-disabled > a:only-child { + color: currentColor; +} +.ant-calendar .ant-calendar-ok-btn-disabled > a:only-child:after { + background: transparent; +} +.ant-calendar .ant-calendar-ok-btn-disabled:hover { + color: rgba(0, 0, 0, 0.25); + background-color: #f5f5f5; + border-color: #d9d9d9; +} +.ant-calendar .ant-calendar-ok-btn-disabled:hover > a:only-child { + color: currentColor; +} +.ant-calendar .ant-calendar-ok-btn-disabled:hover > a:only-child:after { + background: transparent; +} +.ant-calendar-range-picker-input { + background-color: transparent; + border: 0; +} +.ant-calendar-range-picker-input::-moz-placeholder { + color: #bfbfbf; +} +.ant-calendar-range-picker-input:-ms-input-placeholder { + color: #bfbfbf; +} +.ant-calendar-range-picker-input::-webkit-input-placeholder { + color: #bfbfbf; +} +.ant-calendar-range-picker-separator { + color: rgba(0, 0, 0, 0.45); +} +.ant-calendar-range-left .ant-calendar-time-picker-inner { + border-right: 1px solid #e8e8e8; +} +.ant-calendar-range-right .ant-calendar-time-picker-inner { + border-left: 1px solid #e8e8e8; +} +.ant-calendar-range-middle { + color: rgba(0, 0, 0, 0.45); +} +.ant-calendar-range .ant-calendar-input, +.ant-calendar-range .ant-calendar-time-picker-input { + color: rgba(0, 0, 0, 0.65); + background-color: #fff; + background-image: none; + border: 1px solid #d9d9d9; + border-radius: 4px; + border: 0; + box-shadow: none; +} +.ant-calendar-range .ant-calendar-input::-moz-placeholder, +.ant-calendar-range .ant-calendar-time-picker-input::-moz-placeholder { + color: #bfbfbf; +} +.ant-calendar-range .ant-calendar-input:-ms-input-placeholder, +.ant-calendar-range .ant-calendar-time-picker-input:-ms-input-placeholder { + color: #bfbfbf; +} +.ant-calendar-range .ant-calendar-input::-webkit-input-placeholder, +.ant-calendar-range .ant-calendar-time-picker-input::-webkit-input-placeholder { + color: #bfbfbf; +} +.ant-calendar-range .ant-calendar-input:hover, +.ant-calendar-range .ant-calendar-time-picker-input:hover { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + border-right-width: 1px !important; +} +.ant-calendar-range .ant-calendar-input:focus, +.ant-calendar-range .ant-calendar-time-picker-input:focus { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); + border-right-width: 1px !important; +} +.ant-calendar-range .ant-calendar-input-disabled, +.ant-calendar-range .ant-calendar-time-picker-input-disabled { + background-color: #f5f5f5; + color: rgba(0, 0, 0, 0.25); +} +.ant-calendar-range .ant-calendar-input-disabled:hover, +.ant-calendar-range .ant-calendar-time-picker-input-disabled:hover { + border-color: #e6d8d8; + border-right-width: 1px !important; +} +.ant-calendar-range .ant-calendar-input:focus, +.ant-calendar-range .ant-calendar-time-picker-input:focus { + box-shadow: none; +} +.ant-calendar-range .ant-calendar-in-range-cell { + border-radius: 0; +} +.ant-calendar-range .ant-calendar-in-range-cell:before { + background: color(~`colorPalette("@{primary-color}", 1)`); + border-radius: 0; + border: 0; +} +.ant-calendar-range .ant-calendar-header, +.ant-calendar-range .ant-calendar-month-panel-header, +.ant-calendar-range .ant-calendar-year-panel-header { + border-bottom: 0; +} +.ant-calendar-range .ant-calendar-body, +.ant-calendar-range .ant-calendar-month-panel-body, +.ant-calendar-range .ant-calendar-year-panel-body { + border-top: 1px solid #e8e8e8; +} +.ant-calendar-range.ant-calendar-time .ant-calendar-time-picker-inner { + background: none; +} +.ant-calendar-range.ant-calendar-time .ant-calendar-time-picker-combobox { + background-color: #fff; + border-top: 1px solid #e8e8e8; +} +.ant-calendar-range.ant-calendar-show-time-picker .ant-calendar-body { + border-top-color: transparent; +} +.ant-calendar-time-picker { + background-color: #fff; +} +.ant-calendar-time-picker-inner { + background-color: #fff; + background-clip: padding-box; +} +.ant-calendar-time-picker-select { + border-right: 1px solid #e8e8e8; +} +.ant-calendar-time-picker-select:first-child { + border-left: 0; +} +.ant-calendar-time-picker-select:last-child { + border-right: 0; +} +.ant-calendar-time-picker-select li:hover { + background: color(~`colorPalette("@{primary-color}", 1)`); +} +li.ant-calendar-time-picker-select-option-selected { + background: #f5f5f5; +} +li.ant-calendar-time-picker-select-option-disabled { + color: rgba(0, 0, 0, 0.25); +} +li.ant-calendar-time-picker-select-option-disabled:hover { + background: transparent; +} +.ant-calendar-time .ant-calendar-day-select { + color: rgba(0, 0, 0, 0.85); +} +.ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn-disabled { + color: rgba(0, 0, 0, 0.25); +} +.ant-calendar-month-panel { + border-radius: 4px; + background: #fff; +} +.ant-calendar-month-panel-header { + border-bottom: 1px solid #e8e8e8; +} +.ant-calendar-month-panel-header a:hover { + color: color(~`colorPalette("@{primary-color}", 5)`); +} +.ant-calendar-month-panel-header .ant-calendar-month-panel-century-select, +.ant-calendar-month-panel-header .ant-calendar-month-panel-decade-select, +.ant-calendar-month-panel-header .ant-calendar-month-panel-year-select, +.ant-calendar-month-panel-header .ant-calendar-month-panel-month-select { + color: rgba(0, 0, 0, 0.85); +} +.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-century-btn, +.ant-calendar-month-panel-header .ant-calendar-month-panel-next-century-btn, +.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-decade-btn, +.ant-calendar-month-panel-header .ant-calendar-month-panel-next-decade-btn, +.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-month-btn, +.ant-calendar-month-panel-header .ant-calendar-month-panel-next-month-btn, +.ant-calendar-month-panel-header .ant-calendar-month-panel-prev-year-btn, +.ant-calendar-month-panel-header .ant-calendar-month-panel-next-year-btn { + color: rgba(0, 0, 0, 0.45); +} +.ant-calendar-month-panel-table { + border-collapse: separate; +} +.ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month { + background: @primary-color; + color: #fff; +} +.ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month:hover { + background: @primary-color; + color: #fff; +} +.ant-calendar-month-panel-cell-disabled .ant-calendar-month-panel-month, +.ant-calendar-month-panel-cell-disabled .ant-calendar-month-panel-month:hover { + color: #bcbcbc; + background: #f5f5f5; +} +.ant-calendar-month-panel-month { + color: rgba(0, 0, 0, 0.65); + background: transparent; + border-radius: 2px; +} +.ant-calendar-month-panel-month:hover { + background: color(~`colorPalette("@{primary-color}", 1)`); +} +.ant-calendar-year-panel { + border-radius: 4px; + background: #fff; +} +.ant-calendar-year-panel-header { + border-bottom: 1px solid #e8e8e8; +} +.ant-calendar-year-panel-header a:hover { + color: color(~`colorPalette("@{primary-color}", 5)`); +} +.ant-calendar-year-panel-header .ant-calendar-year-panel-century-select, +.ant-calendar-year-panel-header .ant-calendar-year-panel-decade-select, +.ant-calendar-year-panel-header .ant-calendar-year-panel-year-select, +.ant-calendar-year-panel-header .ant-calendar-year-panel-month-select { + color: rgba(0, 0, 0, 0.85); +} +.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-century-btn, +.ant-calendar-year-panel-header .ant-calendar-year-panel-next-century-btn, +.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-decade-btn, +.ant-calendar-year-panel-header .ant-calendar-year-panel-next-decade-btn, +.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-month-btn, +.ant-calendar-year-panel-header .ant-calendar-year-panel-next-month-btn, +.ant-calendar-year-panel-header .ant-calendar-year-panel-prev-year-btn, +.ant-calendar-year-panel-header .ant-calendar-year-panel-next-year-btn { + color: rgba(0, 0, 0, 0.45); +} +.ant-calendar-year-panel-table { + border-collapse: separate; +} +.ant-calendar-year-panel-year { + color: rgba(0, 0, 0, 0.65); + background: transparent; + border-radius: 2px; +} +.ant-calendar-year-panel-year:hover { + background: color(~`colorPalette("@{primary-color}", 1)`); +} +.ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year { + background: @primary-color; + color: #fff; +} +.ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year:hover { + background: @primary-color; + color: #fff; +} +.ant-calendar-year-panel-last-decade-cell .ant-calendar-year-panel-year, +.ant-calendar-year-panel-next-decade-cell .ant-calendar-year-panel-year { + color: rgba(0, 0, 0, 0.25); +} +.ant-calendar-decade-panel { + background: #fff; + border-radius: 4px; +} +.ant-calendar-decade-panel-header { + border-bottom: 1px solid #e8e8e8; +} +.ant-calendar-decade-panel-header a:hover { + color: color(~`colorPalette("@{primary-color}", 5)`); +} +.ant-calendar-decade-panel-header .ant-calendar-decade-panel-century-select, +.ant-calendar-decade-panel-header .ant-calendar-decade-panel-decade-select, +.ant-calendar-decade-panel-header .ant-calendar-decade-panel-year-select, +.ant-calendar-decade-panel-header .ant-calendar-decade-panel-month-select { + color: rgba(0, 0, 0, 0.85); +} +.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-century-btn, +.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-century-btn, +.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-decade-btn, +.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-decade-btn, +.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-month-btn, +.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-month-btn, +.ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-year-btn, +.ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-year-btn { + color: rgba(0, 0, 0, 0.45); +} +.ant-calendar-decade-panel-table { + border-collapse: separate; +} +.ant-calendar-decade-panel-decade { + color: rgba(0, 0, 0, 0.65); + background: transparent; + border-radius: 2px; +} +.ant-calendar-decade-panel-decade:hover { + background: color(~`colorPalette("@{primary-color}", 1)`); +} +.ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade { + background: @primary-color; + color: #fff; +} +.ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade:hover { + background: @primary-color; + color: #fff; +} +.ant-calendar-decade-panel-last-century-cell .ant-calendar-decade-panel-decade, +.ant-calendar-decade-panel-next-century-cell .ant-calendar-decade-panel-decade { + color: rgba(0, 0, 0, 0.25); +} +.ant-calendar-week-number .ant-calendar-body tr:hover { + background: color(~`colorPalette("@{primary-color}", 1)`); +} +.ant-calendar-week-number .ant-calendar-body tr.ant-calendar-active-week { + background: color(~`colorPalette("@{primary-color}", 2)`); +} +.ant-calendar-week-number .ant-calendar-body tr .ant-calendar-selected-day .ant-calendar-date, +.ant-calendar-week-number .ant-calendar-body tr .ant-calendar-selected-day:hover .ant-calendar-date { + background: transparent; + color: rgba(0, 0, 0, 0.65); +} +.ant-divider { + color: rgba(0, 0, 0, 0.65); + background: #e8e8e8; +} +.ant-divider-horizontal.ant-divider-with-text, +.ant-divider-horizontal.ant-divider-with-text-left, +.ant-divider-horizontal.ant-divider-with-text-right { + background: transparent; + color: rgba(0, 0, 0, 0.85); +} +.ant-divider-horizontal.ant-divider-with-text:before, +.ant-divider-horizontal.ant-divider-with-text-left:before, +.ant-divider-horizontal.ant-divider-with-text-right:before, +.ant-divider-horizontal.ant-divider-with-text:after, +.ant-divider-horizontal.ant-divider-with-text-left:after, +.ant-divider-horizontal.ant-divider-with-text-right:after { + border-top: 1px solid #e8e8e8; +} +.ant-divider-dashed { + background: none; + border-top: 1px dashed #e8e8e8; +} +.ant-divider-horizontal.ant-divider-with-text.ant-divider-dashed, +.ant-divider-horizontal.ant-divider-with-text-left.ant-divider-dashed, +.ant-divider-horizontal.ant-divider-with-text-right.ant-divider-dashed { + border-top: 0; +} +.ant-divider-horizontal.ant-divider-with-text.ant-divider-dashed:before, +.ant-divider-horizontal.ant-divider-with-text-left.ant-divider-dashed:before, +.ant-divider-horizontal.ant-divider-with-text-right.ant-divider-dashed:before, +.ant-divider-horizontal.ant-divider-with-text.ant-divider-dashed:after, +.ant-divider-horizontal.ant-divider-with-text-left.ant-divider-dashed:after, +.ant-divider-horizontal.ant-divider-with-text-right.ant-divider-dashed:after { + border-style: dashed none none; +} +.ant-drawer-left.ant-drawer-open .ant-drawer-content-wrapper { + box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); +} +.ant-drawer-right.ant-drawer-open .ant-drawer-content-wrapper { + box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15); +} +.ant-drawer-top.ant-drawer-open .ant-drawer-content-wrapper { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); +} +.ant-drawer-bottom.ant-drawer-open .ant-drawer-content-wrapper { + box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15); +} +.ant-drawer-title { + color: rgba(0, 0, 0, 0.85); +} +.ant-drawer-content { + background-color: #fff; + border: 0; + background-clip: padding-box; +} +.ant-drawer-close { + border: 0; + background: transparent; + color: rgba(0, 0, 0, 0.45); +} +.ant-drawer-close:focus, +.ant-drawer-close:hover { + color: #444; +} +.ant-drawer-header { + border-radius: 4px 4px 0 0; + background: #fff; + color: rgba(0, 0, 0, 0.65); + border-bottom: 1px solid #e8e8e8; +} +.ant-drawer-mask { + background-color: rgba(0, 0, 0, 0.65); +} +.ant-drawer-open-content { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} +.ant-dropdown { + color: rgba(0, 0, 0, 0.65); +} +.ant-dropdown-menu { + background-color: #fff; + border-radius: 4px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + background-clip: padding-box; +} +.ant-dropdown-menu-item-group-title { + color: rgba(0, 0, 0, 0.45); +} +.ant-dropdown-menu-item, +.ant-dropdown-menu-submenu-title { + color: rgba(0, 0, 0, 0.65); +} +.ant-dropdown-menu-item > a, +.ant-dropdown-menu-submenu-title > a { + color: rgba(0, 0, 0, 0.65); +} +.ant-dropdown-menu-item-selected, +.ant-dropdown-menu-submenu-title-selected, +.ant-dropdown-menu-item-selected > a, +.ant-dropdown-menu-submenu-title-selected > a { + color: @primary-color; + background-color: color(~`colorPalette("@{primary-color}", 1)`); +} +.ant-dropdown-menu-item:hover, +.ant-dropdown-menu-submenu-title:hover { + background-color: color(~`colorPalette("@{primary-color}", 1)`); +} +.ant-dropdown-menu-item-disabled, +.ant-dropdown-menu-submenu-title-disabled { + color: rgba(0, 0, 0, 0.25); +} +.ant-dropdown-menu-item-disabled:hover, +.ant-dropdown-menu-submenu-title-disabled:hover { + color: rgba(0, 0, 0, 0.25); + background-color: #fff; +} +.ant-dropdown-menu-item-divider, +.ant-dropdown-menu-submenu-title-divider { + background-color: #e8e8e8; +} +.ant-dropdown-menu-item .ant-dropdown-menu-submenu-arrow-icon, +.ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow-icon { + color: rgba(0, 0, 0, 0.45); +} +.ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title, +.ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow-icon { + color: rgba(0, 0, 0, 0.25); +} +.ant-dropdown-menu-dark, +.ant-dropdown-menu-dark .ant-dropdown-menu { + background: #001529; +} +.ant-dropdown-menu-dark .ant-dropdown-menu-item, +.ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title, +.ant-dropdown-menu-dark .ant-dropdown-menu-item > a { + color: rgba(255, 255, 255, 0.65); +} +.ant-dropdown-menu-dark .ant-dropdown-menu-item .ant-dropdown-menu-submenu-arrow:after, +.ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow:after, +.ant-dropdown-menu-dark .ant-dropdown-menu-item > a .ant-dropdown-menu-submenu-arrow:after { + color: rgba(255, 255, 255, 0.65); +} +.ant-dropdown-menu-dark .ant-dropdown-menu-item:hover, +.ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title:hover, +.ant-dropdown-menu-dark .ant-dropdown-menu-item > a:hover { + color: #fff; + background: transparent; +} +.ant-dropdown-menu-dark .ant-dropdown-menu-item-selected, +.ant-dropdown-menu-dark .ant-dropdown-menu-item-selected:hover, +.ant-dropdown-menu-dark .ant-dropdown-menu-item-selected > a { + background: @primary-color; + color: #fff; +} +.ant-form { + color: rgba(0, 0, 0, 0.65); +} +.ant-form legend { + color: rgba(0, 0, 0, 0.45); + border: 0; + border-bottom: 1px solid #d9d9d9; +} +.ant-form output { + color: rgba(0, 0, 0, 0.65); +} +.ant-form-item-required:before { + color: #f5222d; +} +.ant-form-item { + color: rgba(0, 0, 0, 0.65); +} +.ant-form-item-label label { + color: rgba(0, 0, 0, 0.85); +} +.ant-form-explain, +.ant-form-extra { + color: rgba(0, 0, 0, 0.45); +} +form .ant-upload { + background: transparent; +} +.ant-input-group-wrap .ant-select-selection { + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} +.ant-input-group-wrap .ant-select-selection:hover { + border-color: #d9d9d9; +} +.ant-input-group-wrap .ant-select-selection--single { + background-color: #eee; +} +.ant-input-group-wrap .ant-select-open .ant-select-selection { + border-color: #d9d9d9; + box-shadow: none; +} +.has-success.has-feedback .ant-form-item-children-icon { + color: #52c41a; +} +.has-warning .ant-form-explain, +.has-warning .ant-form-split { + color: #faad14; +} +.has-warning .ant-input, +.has-warning .ant-input:hover { + border-color: #faad14; +} +.has-warning .ant-input:focus { + border-color: #ffc53d; + box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2); + border-right-width: 1px !important; +} +.has-warning .ant-input:not([disabled]):hover { + border-color: #faad14; +} +.has-warning .ant-calendar-picker-open .ant-calendar-picker-input { + border-color: #ffc53d; + box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2); + border-right-width: 1px !important; +} +.has-warning .ant-input-prefix { + color: #faad14; +} +.has-warning .ant-input-group-addon { + color: #faad14; + border-color: #faad14; + background-color: #fff; +} +.has-warning .has-feedback { + color: #faad14; +} +.has-warning.has-feedback .ant-form-item-children-icon { + color: #faad14; +} +.has-warning .ant-select-selection { + border-color: #faad14; +} +.has-warning .ant-select-open .ant-select-selection, +.has-warning .ant-select-focused .ant-select-selection { + border-color: #ffc53d; + box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2); + border-right-width: 1px !important; +} +.has-warning .ant-calendar-picker-icon:after, +.has-warning .ant-time-picker-icon:after, +.has-warning .ant-picker-icon:after, +.has-warning .ant-select-arrow, +.has-warning .ant-cascader-picker-arrow { + color: #faad14; +} +.has-warning .ant-input-number, +.has-warning .ant-time-picker-input { + border-color: #faad14; +} +.has-warning .ant-input-number-focused, +.has-warning .ant-time-picker-input-focused, +.has-warning .ant-input-number:focus, +.has-warning .ant-time-picker-input:focus { + border-color: #ffc53d; + box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2); + border-right-width: 1px !important; +} +.has-warning .ant-input-number:not([disabled]):hover, +.has-warning .ant-time-picker-input:not([disabled]):hover { + border-color: #faad14; +} +.has-warning .ant-cascader-picker:focus .ant-cascader-input { + border-color: #ffc53d; + box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2); + border-right-width: 1px !important; +} +.has-error .ant-form-explain, +.has-error .ant-form-split { + color: #f5222d; +} +.has-error .ant-input, +.has-error .ant-input:hover { + border-color: #f5222d; +} +.has-error .ant-input:focus { + border-color: #ff4d4f; + box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2); + border-right-width: 1px !important; +} +.has-error .ant-input:not([disabled]):hover { + border-color: #f5222d; +} +.has-error .ant-calendar-picker-open .ant-calendar-picker-input { + border-color: #ff4d4f; + box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2); + border-right-width: 1px !important; +} +.has-error .ant-input-prefix { + color: #f5222d; +} +.has-error .ant-input-group-addon { + color: #f5222d; + border-color: #f5222d; + background-color: #fff; +} +.has-error .has-feedback { + color: #f5222d; +} +.has-error.has-feedback .ant-form-item-children-icon { + color: #f5222d; +} +.has-error .ant-select-selection { + border-color: #f5222d; +} +.has-error .ant-select-open .ant-select-selection, +.has-error .ant-select-focused .ant-select-selection { + border-color: #ff4d4f; + box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2); + border-right-width: 1px !important; +} +.has-error .ant-select.ant-select-auto-complete .ant-input:focus { + border-color: #f5222d; +} +.has-error .ant-input-group-addon .ant-select-selection { + border-color: transparent; + box-shadow: none; +} +.has-error .ant-calendar-picker-icon:after, +.has-error .ant-time-picker-icon:after, +.has-error .ant-picker-icon:after, +.has-error .ant-select-arrow, +.has-error .ant-cascader-picker-arrow { + color: #f5222d; +} +.has-error .ant-input-number, +.has-error .ant-time-picker-input { + border-color: #f5222d; +} +.has-error .ant-input-number-focused, +.has-error .ant-time-picker-input-focused, +.has-error .ant-input-number:focus, +.has-error .ant-time-picker-input:focus { + border-color: #ff4d4f; + box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2); + border-right-width: 1px !important; +} +.has-error .ant-input-number:not([disabled]):hover, +.has-error .ant-time-picker-input:not([disabled]):hover { + border-color: #f5222d; +} +.has-error .ant-mention-wrapper .ant-mention-editor, +.has-error .ant-mention-wrapper .ant-mention-editor:not([disabled]):hover { + border-color: #f5222d; +} +.has-error .ant-mention-wrapper.ant-mention-active:not([disabled]) .ant-mention-editor, +.has-error .ant-mention-wrapper .ant-mention-editor:not([disabled]):focus { + border-color: #ff4d4f; + box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2); + border-right-width: 1px !important; +} +.has-error .ant-cascader-picker:focus .ant-cascader-input { + border-color: #ff4d4f; + box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2); + border-right-width: 1px !important; +} +.is-validating.has-feedback .ant-form-item-children-icon { + color: @primary-color; +} +.ant-input-number { + color: rgba(0, 0, 0, 0.65); + background-color: #fff; + background-image: none; + border: 1px solid #d9d9d9; + border-radius: 4px; +} +.ant-input-number::-moz-placeholder { + color: #bfbfbf; +} +.ant-input-number:-ms-input-placeholder { + color: #bfbfbf; +} +.ant-input-number::-webkit-input-placeholder { + color: #bfbfbf; +} +.ant-input-number:hover { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + border-right-width: 1px !important; +} +.ant-input-number:focus { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); + border-right-width: 1px !important; +} +.ant-input-number-disabled { + background-color: #f5f5f5; + color: rgba(0, 0, 0, 0.25); +} +.ant-input-number-disabled:hover { + border-color: #e6d8d8; + border-right-width: 1px !important; +} +.ant-input-number-handler { + color: rgba(0, 0, 0, 0.45); +} +.ant-input-number-handler:active { + background: #f4f4f4; +} +.ant-input-number-handler:hover .ant-input-number-handler-up-inner, +.ant-input-number-handler:hover .ant-input-number-handler-down-inner { + color: color(~`colorPalette("@{primary-color}", 5)`); +} +.ant-input-number-handler-up-inner, +.ant-input-number-handler-down-inner { + color: rgba(0, 0, 0, 0.45); +} +.ant-input-number:hover { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + border-right-width: 1px !important; +} +.ant-input-number-focused { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); + border-right-width: 1px !important; +} +.ant-input-number-disabled { + background-color: #f5f5f5; + color: rgba(0, 0, 0, 0.25); +} +.ant-input-number-disabled:hover { + border-color: #e6d8d8; + border-right-width: 1px !important; +} +.ant-input-number-input { + background-color: transparent; + border: 0; + border-radius: 4px; +} +.ant-input-number-input::-moz-placeholder { + color: #bfbfbf; +} +.ant-input-number-input:-ms-input-placeholder { + color: #bfbfbf; +} +.ant-input-number-input::-webkit-input-placeholder { + color: #bfbfbf; +} +.ant-input-number-handler-wrap { + border-left: 1px solid #d9d9d9; + background: #fff; + border-radius: 0 4px 4px 0; +} +.ant-input-number-handler-down { + border-top: 1px solid #d9d9d9; +} +.ant-input-number-handler-up-disabled:hover .ant-input-number-handler-up-inner, +.ant-input-number-handler-down-disabled:hover .ant-input-number-handler-down-inner { + color: rgba(0, 0, 0, 0.25); +} +.ant-input { + color: rgba(0, 0, 0, 0.65); + background-color: #fff; + background-image: none; + border: 1px solid #d9d9d9; + border-radius: 4px; +} +.ant-input::-moz-placeholder { + color: #bfbfbf; +} +.ant-input:-ms-input-placeholder { + color: #bfbfbf; +} +.ant-input::-webkit-input-placeholder { + color: #bfbfbf; +} +.ant-input:hover { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + border-right-width: 1px !important; +} +.ant-input:focus { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); + border-right-width: 1px !important; +} +.ant-input-disabled { + background-color: #f5f5f5; + color: rgba(0, 0, 0, 0.25); +} +.ant-input-disabled:hover { + border-color: #e6d8d8; + border-right-width: 1px !important; +} +.ant-input-group { + color: rgba(0, 0, 0, 0.65); + border-collapse: separate; + border-spacing: 0; +} +.ant-input-group-addon:not(:first-child):not(:last-child), +.ant-input-group-wrap:not(:first-child):not(:last-child), +.ant-input-group > .ant-input:not(:first-child):not(:last-child) { + border-radius: 0; +} +.ant-input-group .ant-input:focus { + border-right-width: 1px; +} +.ant-input-group .ant-input:hover { + border-right-width: 1px; +} +.ant-input-group-addon { + color: rgba(0, 0, 0, 0.65); + background-color: #fafafa; + border: 1px solid #d9d9d9; + border-radius: 4px; +} +.ant-input-group-addon .ant-select .ant-select-selection { + background-color: inherit; + border: 1px solid transparent; + box-shadow: none; +} +.ant-input-group-addon .ant-select-open .ant-select-selection, +.ant-input-group-addon .ant-select-focused .ant-select-selection { + color: @primary-color; +} +.ant-input-group > .ant-input:first-child, +.ant-input-group-addon:first-child { + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} +.ant-input-group > .ant-input:first-child .ant-select .ant-select-selection, +.ant-input-group-addon:first-child .ant-select .ant-select-selection { + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} +.ant-input-group > .ant-input-affix-wrapper:not(:first-child) .ant-input { + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} +.ant-input-group > .ant-input-affix-wrapper:not(:last-child) .ant-input { + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} +.ant-input-group-addon:first-child { + border-right: 0; +} +.ant-input-group-addon:last-child { + border-left: 0; +} +.ant-input-group > .ant-input:last-child, +.ant-input-group-addon:last-child { + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} +.ant-input-group > .ant-input:last-child .ant-select .ant-select-selection, +.ant-input-group-addon:last-child .ant-select .ant-select-selection { + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} +.ant-input-group.ant-input-group-compact-addon:not(:first-child):not(:last-child), +.ant-input-group.ant-input-group-compact-wrap:not(:first-child):not(:last-child), +.ant-input-group.ant-input-group-compact > .ant-input:not(:first-child):not(:last-child) { + border-right-width: 1px; + border-right-color: transparent; +} +.ant-input-group.ant-input-group-compact-addon:not(:first-child):not(:last-child):hover, +.ant-input-group.ant-input-group-compact-wrap:not(:first-child):not(:last-child):hover, +.ant-input-group.ant-input-group-compact > .ant-input:not(:first-child):not(:last-child):hover { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + border-right-width: 1px !important; +} +.ant-input-group.ant-input-group-compact-addon:not(:first-child):not(:last-child):focus, +.ant-input-group.ant-input-group-compact-wrap:not(:first-child):not(:last-child):focus, +.ant-input-group.ant-input-group-compact > .ant-input:not(:first-child):not(:last-child):focus { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); + border-right-width: 1px !important; +} +.ant-input-group.ant-input-group-compact > * { + border-radius: 0; + border-right-width: 0; +} +.ant-input-group.ant-input-group-compact > span:not(:last-child) > .ant-input { + border-right-width: 0; +} +.ant-input-group.ant-input-group-compact > .ant-select > .ant-select-selection, +.ant-input-group.ant-input-group-compact > .ant-calendar-picker .ant-input, +.ant-input-group.ant-input-group-compact > .ant-select-auto-complete .ant-input, +.ant-input-group.ant-input-group-compact > .ant-cascader-picker .ant-input, +.ant-input-group.ant-input-group-compact > .ant-mention-wrapper .ant-mention-editor, +.ant-input-group.ant-input-group-compact > .ant-time-picker .ant-time-picker-input { + border-radius: 0; + border-right-width: 1px; + border-right-color: transparent; +} +.ant-input-group.ant-input-group-compact > .ant-select > .ant-select-selection:hover, +.ant-input-group.ant-input-group-compact > .ant-calendar-picker .ant-input:hover, +.ant-input-group.ant-input-group-compact > .ant-select-auto-complete .ant-input:hover, +.ant-input-group.ant-input-group-compact > .ant-cascader-picker .ant-input:hover, +.ant-input-group.ant-input-group-compact > .ant-mention-wrapper .ant-mention-editor:hover, +.ant-input-group.ant-input-group-compact > .ant-time-picker .ant-time-picker-input:hover { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + border-right-width: 1px !important; +} +.ant-input-group.ant-input-group-compact > .ant-select > .ant-select-selection:focus, +.ant-input-group.ant-input-group-compact > .ant-calendar-picker .ant-input:focus, +.ant-input-group.ant-input-group-compact > .ant-select-auto-complete .ant-input:focus, +.ant-input-group.ant-input-group-compact > .ant-cascader-picker .ant-input:focus, +.ant-input-group.ant-input-group-compact > .ant-mention-wrapper .ant-mention-editor:focus, +.ant-input-group.ant-input-group-compact > .ant-time-picker .ant-time-picker-input:focus { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); + border-right-width: 1px !important; +} +.ant-input-group.ant-input-group-compact > *:first-child, +.ant-input-group.ant-input-group-compact > .ant-select:first-child > .ant-select-selection, +.ant-input-group.ant-input-group-compact > .ant-calendar-picker:first-child .ant-input, +.ant-input-group.ant-input-group-compact > .ant-select-auto-complete:first-child .ant-input, +.ant-input-group.ant-input-group-compact > .ant-cascader-picker:first-child .ant-input, +.ant-input-group.ant-input-group-compact > .ant-mention-wrapper:first-child .ant-mention-editor, +.ant-input-group.ant-input-group-compact > .ant-time-picker:first-child .ant-time-picker-input { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; +} +.ant-input-group.ant-input-group-compact > *:last-child, +.ant-input-group.ant-input-group-compact > .ant-select:last-child > .ant-select-selection, +.ant-input-group.ant-input-group-compact > .ant-calendar-picker:last-child .ant-input, +.ant-input-group.ant-input-group-compact > .ant-select-auto-complete:last-child .ant-input, +.ant-input-group.ant-input-group-compact > .ant-cascader-picker:last-child .ant-input, +.ant-input-group.ant-input-group-compact > .ant-cascader-picker-focused:last-child .ant-input, +.ant-input-group.ant-input-group-compact > .ant-mention-wrapper:last-child .ant-mention-editor, +.ant-input-group.ant-input-group-compact > .ant-time-picker:last-child .ant-time-picker-input { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + border-right-width: 1px; + border-right-color: #d9d9d9; +} +.ant-input-group.ant-input-group-compact > *:last-child:hover, +.ant-input-group.ant-input-group-compact > .ant-select:last-child > .ant-select-selection:hover, +.ant-input-group.ant-input-group-compact > .ant-calendar-picker:last-child .ant-input:hover, +.ant-input-group.ant-input-group-compact > .ant-select-auto-complete:last-child .ant-input:hover, +.ant-input-group.ant-input-group-compact > .ant-cascader-picker:last-child .ant-input:hover, +.ant-input-group.ant-input-group-compact > .ant-cascader-picker-focused:last-child .ant-input:hover, +.ant-input-group.ant-input-group-compact > .ant-mention-wrapper:last-child .ant-mention-editor:hover, +.ant-input-group.ant-input-group-compact > .ant-time-picker:last-child .ant-time-picker-input:hover { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + border-right-width: 1px !important; +} +.ant-input-group.ant-input-group-compact > *:last-child:focus, +.ant-input-group.ant-input-group-compact > .ant-select:last-child > .ant-select-selection:focus, +.ant-input-group.ant-input-group-compact > .ant-calendar-picker:last-child .ant-input:focus, +.ant-input-group.ant-input-group-compact > .ant-select-auto-complete:last-child .ant-input:focus, +.ant-input-group.ant-input-group-compact > .ant-cascader-picker:last-child .ant-input:focus, +.ant-input-group.ant-input-group-compact > .ant-cascader-picker-focused:last-child .ant-input:focus, +.ant-input-group.ant-input-group-compact > .ant-mention-wrapper:last-child .ant-mention-editor:focus, +.ant-input-group.ant-input-group-compact > .ant-time-picker:last-child .ant-time-picker-input:focus { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); + border-right-width: 1px !important; +} +.ant-input-group.ant-input-group-compact > *:last-child:focus .ant-cascader-input, +.ant-input-group.ant-input-group-compact > .ant-select:last-child > .ant-select-selection:focus .ant-cascader-input, +.ant-input-group.ant-input-group-compact > .ant-calendar-picker:last-child .ant-input:focus .ant-cascader-input, +.ant-input-group.ant-input-group-compact > .ant-select-auto-complete:last-child .ant-input:focus .ant-cascader-input, +.ant-input-group.ant-input-group-compact > .ant-cascader-picker:last-child .ant-input:focus .ant-cascader-input, +.ant-input-group.ant-input-group-compact > .ant-cascader-picker-focused:last-child .ant-input:focus .ant-cascader-input, +.ant-input-group.ant-input-group-compact > .ant-mention-wrapper:last-child .ant-mention-editor:focus .ant-cascader-input, +.ant-input-group.ant-input-group-compact > .ant-time-picker:last-child .ant-time-picker-input:focus .ant-cascader-input { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); + border-right-width: 1px !important; +} +.ant-input-affix-wrapper { + color: rgba(0, 0, 0, 0.65); +} +.ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled) { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + border-right-width: 1px !important; +} +.ant-input-affix-wrapper .ant-input-prefix, +.ant-input-affix-wrapper .ant-input-suffix { + color: rgba(0, 0, 0, 0.65); +} +.ant-input-search-icon { + color: rgba(0, 0, 0, 0.45); +} +.ant-input-search-icon:hover { + color: #333; +} +.ant-input-search > .ant-input-suffix > .ant-input-search-button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.ant-layout { + background: #f0f2f5; +} +.ant-layout-header { + background: #001529; +} +.ant-layout-footer { + background: #f0f2f5; + color: rgba(0, 0, 0, 0.65); +} +.ant-layout-sider { + background: #001529; +} +.ant-layout-sider-trigger { + color: #fff; + background: #002140; +} +.ant-layout-sider-zero-width-trigger { + background: #001529; + color: #fff; + border-radius: 0 4px 4px 0; +} +.ant-layout-sider-zero-width-trigger:hover { + background: #192c3e; +} +.ant-layout-sider-light { + background: #fff; +} +.ant-layout-sider-light .ant-layout-sider-trigger { + color: rgba(0, 0, 0, 0.65); + background: #fff; +} +.ant-layout-sider-light .ant-layout-sider-zero-width-trigger { + color: rgba(0, 0, 0, 0.65); + background: #fff; +} +.ant-list { + color: rgba(0, 0, 0, 0.65); +} +.ant-list-empty-text { + color: rgba(0, 0, 0, 0.45); +} +.ant-list-item-meta-title { + color: rgba(0, 0, 0, 0.65); +} +.ant-list-item-meta-title > a { + color: rgba(0, 0, 0, 0.65); +} +.ant-list-item-meta-title > a:hover { + color: @primary-color; +} +.ant-list-item-meta-description { + color: rgba(0, 0, 0, 0.45); +} +.ant-list-item-action > li { + color: rgba(0, 0, 0, 0.45); +} +.ant-list-item-action-split { + background-color: #e8e8e8; +} +.ant-list-empty { + color: rgba(0, 0, 0, 0.45); +} +.ant-list-split .ant-list-item { + border-bottom: 1px solid #e8e8e8; +} +.ant-list-split .ant-list-item:last-child { + border-bottom: none; +} +.ant-list-split .ant-list-header { + border-bottom: 1px solid #e8e8e8; +} +.ant-list-something-after-last-item .ant-spin-container > .ant-list-item:last-child { + border-bottom: 1px solid #e8e8e8; +} +.ant-list-vertical .ant-list-item-meta-title { + color: rgba(0, 0, 0, 0.85); +} +.ant-list-vertical .ant-list-item-content { + color: rgba(0, 0, 0, 0.65); +} +.ant-list-grid .ant-list-item { + border-bottom: none; +} +.ant-list-bordered { + border-radius: 4px; + border: 1px solid #d9d9d9; +} +.ant-list-bordered .ant-list-item { + border-bottom: 1px solid #e8e8e8; +} +.ant-mention-wrapper { + color: rgba(0, 0, 0, 0.65); +} +.ant-mention-wrapper .ant-mention-editor { + color: rgba(0, 0, 0, 0.65); + background-color: #fff; + background-image: none; + border: 1px solid #d9d9d9; + border-radius: 4px; +} +.ant-mention-wrapper .ant-mention-editor::-moz-placeholder { + color: #bfbfbf; +} +.ant-mention-wrapper .ant-mention-editor:-ms-input-placeholder { + color: #bfbfbf; +} +.ant-mention-wrapper .ant-mention-editor::-webkit-input-placeholder { + color: #bfbfbf; +} +.ant-mention-wrapper .ant-mention-editor:hover { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + border-right-width: 1px !important; +} +.ant-mention-wrapper .ant-mention-editor:focus { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); + border-right-width: 1px !important; +} +.ant-mention-wrapper .ant-mention-editor-disabled { + background-color: #f5f5f5; + color: rgba(0, 0, 0, 0.25); +} +.ant-mention-wrapper .ant-mention-editor-disabled:hover { + border-color: #e6d8d8; + border-right-width: 1px !important; +} +.ant-mention-wrapper.ant-mention-active:not(.disabled) .ant-mention-editor { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); + border-right-width: 1px !important; +} +.ant-mention-wrapper.disabled .ant-mention-editor { + background-color: #f5f5f5; + color: rgba(0, 0, 0, 0.25); +} +.ant-mention-wrapper.disabled .ant-mention-editor:hover { + border-color: #e6d8d8; + border-right-width: 1px !important; +} +.ant-mention-wrapper .public-DraftEditorPlaceholder-root .public-DraftEditorPlaceholder-inner { + color: #bfbfbf; +} +.ant-mention-dropdown { + color: rgba(0, 0, 0, 0.65); + background-color: #fff; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + border-radius: 4px; +} +.ant-mention-dropdown-notfound.ant-mention-dropdown-item { + color: rgba(0, 0, 0, 0.25); +} +.ant-mention-dropdown-notfound.ant-mention-dropdown-item .anticon-loading { + color: @primary-color; +} +.ant-mention-dropdown-item { + color: rgba(0, 0, 0, 0.65); +} +.ant-mention-dropdown-item:hover { + background-color: color(~`colorPalette("@{primary-color}", 1)`); +} +.ant-mention-dropdown-item.focus, +.ant-mention-dropdown-item-active { + background-color: color(~`colorPalette("@{primary-color}", 1)`); +} +.ant-mention-dropdown-item-disabled { + color: rgba(0, 0, 0, 0.25); +} +.ant-mention-dropdown-item-disabled:hover { + color: rgba(0, 0, 0, 0.25); + background-color: #fff; +} +.ant-mention-dropdown-item-selected, +.ant-mention-dropdown-item-selected:hover { + background-color: #f5f5f5; + color: rgba(0, 0, 0, 0.65); +} +.ant-mention-dropdown-item-divider { + background-color: #e8e8e8; +} +.ant-menu { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + color: rgba(0, 0, 0, 0.65); + background: #fff; +} +.ant-menu-item-group-title { + color: rgba(0, 0, 0, 0.45); +} +.ant-menu-item:active, +.ant-menu-submenu-title:active { + background: color(~`colorPalette("@{primary-color}", 1)`); +} +.ant-menu-item > a { + color: rgba(0, 0, 0, 0.65); +} +.ant-menu-item > a:hover { + color: @primary-color; +} +.ant-menu-item > a:before { + background-color: transparent; +} +.ant-menu-item-divider { + background-color: #e8e8e8; +} +.ant-menu-item:hover, +.ant-menu-item-active, +.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, +.ant-menu-submenu-active, +.ant-menu-submenu-title:hover { + color: @primary-color; +} +.ant-menu-horizontal > .ant-menu-item:hover, +.ant-menu-horizontal > .ant-menu-item-active, +.ant-menu-horizontal > .ant-menu-submenu .ant-menu-submenu-title:hover { + background-color: transparent; +} +.ant-menu-item-selected { + color: @primary-color; +} +.ant-menu-item-selected > a, +.ant-menu-item-selected > a:hover { + color: @primary-color; +} +.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected { + background-color: color(~`colorPalette("@{primary-color}", 1)`); +} +.ant-menu-inline, +.ant-menu-vertical, +.ant-menu-vertical-left { + border-right: 1px solid #e8e8e8; +} +.ant-menu-vertical-right { + border-left: 1px solid #e8e8e8; +} +.ant-menu-vertical.ant-menu-sub, +.ant-menu-vertical-left.ant-menu-sub, +.ant-menu-vertical-right.ant-menu-sub { + border-right: 0; +} +.ant-menu-vertical.ant-menu-sub .ant-menu-item, +.ant-menu-vertical-left.ant-menu-sub .ant-menu-item, +.ant-menu-vertical-right.ant-menu-sub .ant-menu-item { + border-right: 0; +} +.ant-menu-vertical.ant-menu-sub .ant-menu-item:after, +.ant-menu-vertical-left.ant-menu-sub .ant-menu-item:after, +.ant-menu-vertical-right.ant-menu-sub .ant-menu-item:after { + border-right: 0; +} +.ant-menu > .ant-menu-item-divider { + background-color: #e8e8e8; +} +.ant-menu-submenu-popup { + border-radius: 4px; +} +.ant-menu-submenu > .ant-menu { + background-color: #fff; + border-radius: 4px; +} +.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:before, +.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow:before, +.ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow:before, +.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:before, +.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:after, +.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow:after, +.ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow:after, +.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:after { + background: #fff; + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)); + border-radius: 2px; +} +.ant-menu-submenu-vertical > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after, +.ant-menu-submenu-vertical-left > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after, +.ant-menu-submenu-vertical-right > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after, +.ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after, +.ant-menu-submenu-vertical > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before, +.ant-menu-submenu-vertical-left > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before, +.ant-menu-submenu-vertical-right > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before, +.ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before { + background: linear-gradient(to right, @primary-color, @primary-color); +} +.ant-menu-vertical .ant-menu-submenu-selected, +.ant-menu-vertical-left .ant-menu-submenu-selected, +.ant-menu-vertical-right .ant-menu-submenu-selected { + color: @primary-color; +} +.ant-menu-vertical .ant-menu-submenu-selected > a, +.ant-menu-vertical-left .ant-menu-submenu-selected > a, +.ant-menu-vertical-right .ant-menu-submenu-selected > a { + color: @primary-color; +} +.ant-menu-horizontal { + border: 0; + border-bottom: 1px solid #e8e8e8; + box-shadow: none; +} +.ant-menu-horizontal > .ant-menu-item, +.ant-menu-horizontal > .ant-menu-submenu { + border-bottom: 2px solid transparent; +} +.ant-menu-horizontal > .ant-menu-item:hover, +.ant-menu-horizontal > .ant-menu-submenu:hover, +.ant-menu-horizontal > .ant-menu-item-active, +.ant-menu-horizontal > .ant-menu-submenu-active, +.ant-menu-horizontal > .ant-menu-item-open, +.ant-menu-horizontal > .ant-menu-submenu-open, +.ant-menu-horizontal > .ant-menu-item-selected, +.ant-menu-horizontal > .ant-menu-submenu-selected { + border-bottom: 2px solid @primary-color; + color: @primary-color; +} +.ant-menu-horizontal > .ant-menu-item > a { + color: rgba(0, 0, 0, 0.65); +} +.ant-menu-horizontal > .ant-menu-item > a:hover { + color: @primary-color; +} +.ant-menu-horizontal > .ant-menu-item-selected > a { + color: @primary-color; +} +.ant-menu-vertical .ant-menu-item:after, +.ant-menu-vertical-left .ant-menu-item:after, +.ant-menu-vertical-right .ant-menu-item:after, +.ant-menu-inline .ant-menu-item:after { + border-right: 3px solid @primary-color; +} +.ant-menu-inline-collapsed-tooltip a { + color: rgba(255, 255, 255, 0.85); +} +.ant-menu-root.ant-menu-vertical, +.ant-menu-root.ant-menu-vertical-left, +.ant-menu-root.ant-menu-vertical-right, +.ant-menu-root.ant-menu-inline { + box-shadow: none; +} +.ant-menu-sub.ant-menu-inline { + border: 0; + box-shadow: none; + border-radius: 0; +} +.ant-menu-item-disabled, +.ant-menu-submenu-disabled { + color: rgba(0, 0, 0, 0.25) !important; + background: none; + border-color: transparent !important; +} +.ant-menu-item-disabled > a, +.ant-menu-submenu-disabled > a { + color: rgba(0, 0, 0, 0.25) !important; +} +.ant-menu-item-disabled > .ant-menu-submenu-title, +.ant-menu-submenu-disabled > .ant-menu-submenu-title { + color: rgba(0, 0, 0, 0.25) !important; +} +.ant-menu-item-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before, +.ant-menu-submenu-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before, +.ant-menu-item-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after, +.ant-menu-submenu-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after { + background: rgba(0, 0, 0, 0.25) !important; +} +.ant-menu-dark, +.ant-menu-dark .ant-menu-sub { + color: rgba(255, 255, 255, 0.65); + background: #001529; +} +.ant-menu-dark .ant-menu-submenu-title .ant-menu-submenu-arrow:after, +.ant-menu-dark .ant-menu-sub .ant-menu-submenu-title .ant-menu-submenu-arrow:after, +.ant-menu-dark .ant-menu-submenu-title .ant-menu-submenu-arrow:before, +.ant-menu-dark .ant-menu-sub .ant-menu-submenu-title .ant-menu-submenu-arrow:before { + background: #fff; +} +.ant-menu-dark.ant-menu-submenu-popup { + background: transparent; +} +.ant-menu-dark .ant-menu-inline.ant-menu-sub { + background: #000c17; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) inset; +} +.ant-menu-dark.ant-menu-horizontal { + border-bottom: 0; +} +.ant-menu-dark.ant-menu-horizontal > .ant-menu-item, +.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu { + border-color: #001529; + border-bottom: 0; +} +.ant-menu-dark .ant-menu-item, +.ant-menu-dark .ant-menu-item-group-title, +.ant-menu-dark .ant-menu-item > a { + color: rgba(255, 255, 255, 0.65); +} +.ant-menu-dark.ant-menu-inline, +.ant-menu-dark.ant-menu-vertical, +.ant-menu-dark.ant-menu-vertical-left, +.ant-menu-dark.ant-menu-vertical-right { + border-right: 0; +} +.ant-menu-dark.ant-menu-inline .ant-menu-item, +.ant-menu-dark.ant-menu-vertical .ant-menu-item, +.ant-menu-dark.ant-menu-vertical-left .ant-menu-item, +.ant-menu-dark.ant-menu-vertical-right .ant-menu-item { + border-right: 0; +} +.ant-menu-dark.ant-menu-inline .ant-menu-item:after, +.ant-menu-dark.ant-menu-vertical .ant-menu-item:after, +.ant-menu-dark.ant-menu-vertical-left .ant-menu-item:after, +.ant-menu-dark.ant-menu-vertical-right .ant-menu-item:after { + border-right: 0; +} +.ant-menu-dark .ant-menu-item:hover, +.ant-menu-dark .ant-menu-item-active, +.ant-menu-dark .ant-menu-submenu-active, +.ant-menu-dark .ant-menu-submenu-open, +.ant-menu-dark .ant-menu-submenu-selected, +.ant-menu-dark .ant-menu-submenu-title:hover { + background-color: transparent; + color: #fff; +} +.ant-menu-dark .ant-menu-item:hover > a, +.ant-menu-dark .ant-menu-item-active > a, +.ant-menu-dark .ant-menu-submenu-active > a, +.ant-menu-dark .ant-menu-submenu-open > a, +.ant-menu-dark .ant-menu-submenu-selected > a, +.ant-menu-dark .ant-menu-submenu-title:hover > a { + color: #fff; +} +.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after, +.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after, +.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after, +.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after, +.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after, +.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after, +.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:after, +.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:after, +.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:after, +.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:after, +.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:after, +.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:after, +.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before, +.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before, +.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before, +.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before, +.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before, +.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before, +.ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:before, +.ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:before, +.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:before, +.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:before, +.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:before, +.ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:before { + background: #fff; +} +.ant-menu-dark .ant-menu-item-selected { + border-right: 0; + color: #fff; +} +.ant-menu-dark .ant-menu-item-selected:after { + border-right: 0; +} +.ant-menu-dark .ant-menu-item-selected > a, +.ant-menu-dark .ant-menu-item-selected > a:hover { + color: #fff; +} +.ant-menu.ant-menu-dark .ant-menu-item-selected, +.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected { + background-color: @primary-color; +} +.ant-menu-dark .ant-menu-item-disabled, +.ant-menu-dark .ant-menu-submenu-disabled, +.ant-menu-dark .ant-menu-item-disabled > a, +.ant-menu-dark .ant-menu-submenu-disabled > a { + color: rgba(255, 255, 255, 0.35) !important; +} +.ant-menu-dark .ant-menu-item-disabled > .ant-menu-submenu-title, +.ant-menu-dark .ant-menu-submenu-disabled > .ant-menu-submenu-title { + color: rgba(255, 255, 255, 0.35) !important; +} +.ant-menu-dark .ant-menu-item-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before, +.ant-menu-dark .ant-menu-submenu-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before, +.ant-menu-dark .ant-menu-item-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after, +.ant-menu-dark .ant-menu-submenu-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after { + background: rgba(255, 255, 255, 0.35) !important; +} +.ant-message { + color: rgba(0, 0, 0, 0.65); +} +.ant-message-notice-content { + border-radius: 4px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + background: #fff; +} +.ant-message-success .anticon { + color: #52c41a; +} +.ant-message-error .anticon { + color: #f5222d; +} +.ant-message-warning .anticon { + color: #faad14; +} +.ant-message-info .anticon, +.ant-message-loading .anticon { + color: @primary-color; +} +.ant-modal { + color: rgba(0, 0, 0, 0.65); +} +.ant-modal-title { + color: rgba(0, 0, 0, 0.85); +} +.ant-modal-content { + background-color: #fff; + border: 0; + border-radius: 4px; + background-clip: padding-box; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} +.ant-modal-close { + border: 0; + background: transparent; + color: rgba(0, 0, 0, 0.45); +} +.ant-modal-close:focus, +.ant-modal-close:hover { + color: #444; +} +.ant-modal-header { + border-radius: 4px 4px 0 0; + background: #fff; + color: rgba(0, 0, 0, 0.65); + border-bottom: 1px solid #e8e8e8; +} +.ant-modal-footer { + border-top: 1px solid #e8e8e8; + border-radius: 0 0 4px 4px; +} +.ant-modal-mask { + background-color: rgba(0, 0, 0, 0.65); +} +.ant-confirm-body .ant-confirm-title { + color: rgba(0, 0, 0, 0.85); +} +.ant-confirm-body .ant-confirm-content { + color: rgba(0, 0, 0, 0.65); +} +.ant-confirm-error .ant-confirm-body > .anticon { + color: #f5222d; +} +.ant-confirm-warning .ant-confirm-body > .anticon, +.ant-confirm-confirm .ant-confirm-body > .anticon { + color: #faad14; +} +.ant-confirm-info .ant-confirm-body > .anticon { + color: @primary-color; +} +.ant-confirm-success .ant-confirm-body > .anticon { + color: #52c41a; +} +.ant-notification { + color: rgba(0, 0, 0, 0.65); +} +.ant-notification-notice { + border-radius: 4px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + background: #fff; +} +.ant-notification-notice-message { + color: rgba(0, 0, 0, 0.85); +} +.ant-notification-notice-message-single-line-auto-margin { + background-color: transparent; +} +.ant-notification-notice-icon-success { + color: #52c41a; +} +.ant-notification-notice-icon-info { + color: @primary-color; +} +.ant-notification-notice-icon-warning { + color: #faad14; +} +.ant-notification-notice-icon-error { + color: #f5222d; +} +.ant-notification-notice-close { + color: rgba(0, 0, 0, 0.45); +} +.ant-notification-notice-close:hover { + color: rgba(0, 0, 0, 0.67); +} +.ant-pagination { + color: rgba(0, 0, 0, 0.65); +} +.ant-pagination-item { + border-radius: 4px; + border: 1px solid #d9d9d9; + background-color: #fff; +} +.ant-pagination-item a { + color: rgba(0, 0, 0, 0.65); +} +.ant-pagination-item:focus, +.ant-pagination-item:hover { + border-color: @primary-color; +} +.ant-pagination-item:focus a, +.ant-pagination-item:hover a { + color: @primary-color; +} +.ant-pagination-item-active { + border-color: @primary-color; +} +.ant-pagination-item-active a { + color: @primary-color; +} +.ant-pagination-item-active:focus, +.ant-pagination-item-active:hover { + border-color: color(~`colorPalette("@{primary-color}", 5)`); +} +.ant-pagination-item-active:focus a, +.ant-pagination-item-active:hover a { + color: color(~`colorPalette("@{primary-color}", 5)`); +} +.ant-pagination-jump-prev .ant-pagination-item-container .ant-pagination-item-link-icon, +.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon { + color: @primary-color; +} +.ant-pagination-jump-prev .ant-pagination-item-container .ant-pagination-item-ellipsis, +.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis { + color: rgba(0, 0, 0, 0.25); +} +.ant-pagination-prev, +.ant-pagination-next, +.ant-pagination-jump-prev, +.ant-pagination-jump-next { + color: rgba(0, 0, 0, 0.65); + border-radius: 4px; +} +.ant-pagination-prev a, +.ant-pagination-next a { + color: rgba(0, 0, 0, 0.65); +} +.ant-pagination-prev:hover a, +.ant-pagination-next:hover a { + border-color: color(~`colorPalette("@{primary-color}", 5)`); +} +.ant-pagination-prev .ant-pagination-item-link, +.ant-pagination-next .ant-pagination-item-link { + border: 1px solid #d9d9d9; + background-color: #fff; + border-radius: 4px; +} +.ant-pagination-prev:focus .ant-pagination-item-link, +.ant-pagination-next:focus .ant-pagination-item-link, +.ant-pagination-prev:hover .ant-pagination-item-link, +.ant-pagination-next:hover .ant-pagination-item-link { + border-color: @primary-color; + color: @primary-color; +} +.ant-pagination-disabled a, +.ant-pagination-disabled:hover a, +.ant-pagination-disabled:focus a, +.ant-pagination-disabled .ant-pagination-item-link, +.ant-pagination-disabled:hover .ant-pagination-item-link, +.ant-pagination-disabled:focus .ant-pagination-item-link { + border-color: #d9d9d9; + color: rgba(0, 0, 0, 0.25); +} +.ant-pagination-options-quick-jumper input { + color: rgba(0, 0, 0, 0.65); + background-color: #fff; + background-image: none; + border: 1px solid #d9d9d9; + border-radius: 4px; +} +.ant-pagination-options-quick-jumper input::-moz-placeholder { + color: #bfbfbf; +} +.ant-pagination-options-quick-jumper input:-ms-input-placeholder { + color: #bfbfbf; +} +.ant-pagination-options-quick-jumper input::-webkit-input-placeholder { + color: #bfbfbf; +} +.ant-pagination-options-quick-jumper input:hover { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + border-right-width: 1px !important; +} +.ant-pagination-options-quick-jumper input:focus { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); + border-right-width: 1px !important; +} +.ant-pagination-options-quick-jumper input-disabled { + background-color: #f5f5f5; + color: rgba(0, 0, 0, 0.25); +} +.ant-pagination-options-quick-jumper input-disabled:hover { + border-color: #e6d8d8; + border-right-width: 1px !important; +} +.ant-pagination-simple .ant-pagination-prev .ant-pagination-item-link, +.ant-pagination-simple .ant-pagination-next .ant-pagination-item-link { + border: 0; +} +.ant-pagination-simple .ant-pagination-simple-pager input { + background-color: #fff; + border-radius: 4px; + border: 1px solid #d9d9d9; +} +.ant-pagination-simple .ant-pagination-simple-pager input:hover { + border-color: @primary-color; +} +.ant-pagination.mini .ant-pagination-item:not(.ant-pagination-item-active) { + background: transparent; + border-color: transparent; +} +.ant-pagination.mini .ant-pagination-prev .ant-pagination-item-link, +.ant-pagination.mini .ant-pagination-next .ant-pagination-item-link { + border-color: transparent; + background: transparent; +} +.ant-popover { + color: rgba(0, 0, 0, 0.65); +} +.ant-popover:after { + background: rgba(255, 255, 255, 0.01); +} +.ant-popover-inner { + background-color: #fff; + background-clip: padding-box; + border-radius: 4px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); +} +.ant-popover-title { + border-bottom: 1px solid #e8e8e8; + color: rgba(0, 0, 0, 0.85); +} +.ant-popover-inner-content { + color: rgba(0, 0, 0, 0.65); +} +.ant-popover-message { + color: rgba(0, 0, 0, 0.65); +} +.ant-popover-message > .anticon { + color: #faad14; +} +.ant-popover-arrow { + background: #fff; + border-color: transparent; + border-style: solid; +} +.ant-popover-placement-top > .ant-popover-content > .ant-popover-arrow, +.ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow, +.ant-popover-placement-topRight > .ant-popover-content > .ant-popover-arrow { + box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07); +} +.ant-popover-placement-right > .ant-popover-content > .ant-popover-arrow, +.ant-popover-placement-rightTop > .ant-popover-content > .ant-popover-arrow, +.ant-popover-placement-rightBottom > .ant-popover-content > .ant-popover-arrow { + box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07); +} +.ant-popover-placement-bottom > .ant-popover-content > .ant-popover-arrow, +.ant-popover-placement-bottomLeft > .ant-popover-content > .ant-popover-arrow, +.ant-popover-placement-bottomRight > .ant-popover-content > .ant-popover-arrow { + box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06); +} +.ant-popover-placement-left > .ant-popover-content > .ant-popover-arrow, +.ant-popover-placement-leftTop > .ant-popover-content > .ant-popover-arrow, +.ant-popover-placement-leftBottom > .ant-popover-content > .ant-popover-arrow { + box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07); +} +.ant-progress { + color: rgba(0, 0, 0, 0.65); +} +.ant-progress-inner { + background-color: #f5f5f5; + border-radius: 100px; +} +.ant-progress-success-bg, +.ant-progress-bg { + background-color: @primary-color; +} +.ant-progress-success-bg { + background-color: #52c41a; +} +.ant-progress-text { + color: rgba(0, 0, 0, 0.45); +} +.ant-progress-status-active .ant-progress-bg:before { + background: #fff; + border-radius: 10px; +} +.ant-progress-status-exception .ant-progress-bg { + background-color: #f5222d; +} +.ant-progress-status-exception .ant-progress-text { + color: #f5222d; +} +.ant-progress-status-success .ant-progress-bg { + background-color: #52c41a; +} +.ant-progress-status-success .ant-progress-text { + color: #52c41a; +} +.ant-progress-circle .ant-progress-inner { + background-color: transparent; +} +.ant-progress-circle .ant-progress-text { + color: rgba(0, 0, 0, 0.65); +} +.ant-progress-circle.ant-progress-status-exception .ant-progress-text { + color: #f5222d; +} +.ant-progress-circle.ant-progress-status-success .ant-progress-text { + color: #52c41a; +} +.ant-radio-group { + color: rgba(0, 0, 0, 0.65); +} +.ant-radio-wrapper { + color: rgba(0, 0, 0, 0.65); +} +.ant-radio { + color: rgba(0, 0, 0, 0.65); +} +.ant-radio-wrapper:hover .ant-radio .ant-radio-inner, +.ant-radio:hover .ant-radio-inner, +.ant-radio-focused .ant-radio-inner { + border-color: @primary-color; +} +.ant-radio-checked:after { + border-radius: 50%; + border: 1px solid @primary-color; +} +.ant-radio-inner { + border-width: 1px; + border-style: solid; + border-radius: 100px; + border-color: #d9d9d9; + background-color: #fff; +} +.ant-radio-inner:after { + border-radius: 8px; + border-top: 0; + border-left: 0; + background-color: @primary-color; +} +.ant-radio-checked .ant-radio-inner { + border-color: @primary-color; +} +.ant-radio-disabled .ant-radio-inner { + border-color: #d9d9d9 !important; + background-color: #f5f5f5; +} +.ant-radio-disabled .ant-radio-inner:after { + background-color: #ccc; +} +.ant-radio-disabled + span { + color: rgba(0, 0, 0, 0.25); +} +.ant-radio-button-wrapper { + color: rgba(0, 0, 0, 0.65); + border: 1px solid #d9d9d9; + border-left: 0; + border-top-width: 1.02px; + background: #fff; +} +.ant-radio-button-wrapper a { + color: rgba(0, 0, 0, 0.65); +} +.ant-radio-button-wrapper:not(:first-child)::before { + background-color: #d9d9d9; +} +.ant-radio-button-wrapper:first-child { + border-radius: 4px 0 0 4px; + border-left: 1px solid #d9d9d9; +} +.ant-radio-button-wrapper:last-child { + border-radius: 0 4px 4px 0; +} +.ant-radio-button-wrapper:first-child:last-child { + border-radius: 4px; +} +.ant-radio-button-wrapper:hover, +.ant-radio-button-wrapper-focused { + color: @primary-color; +} +.ant-radio-button-wrapper-checked { + background: #fff; + border-color: @primary-color; + color: @primary-color; + box-shadow: -1px 0 0 0 @primary-color; +} +.ant-radio-button-wrapper-checked::before { + background-color: @primary-color !important; +} +.ant-radio-button-wrapper-checked:first-child { + border-color: @primary-color; + box-shadow: none !important; +} +.ant-radio-button-wrapper-checked:hover { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + box-shadow: -1px 0 0 0 color(~`colorPalette("@{primary-color}", 5)`); + color: color(~`colorPalette("@{primary-color}", 5)`); +} +.ant-radio-button-wrapper-checked:active { + border-color: color(~`colorPalette("@{primary-color}", 7)`); + box-shadow: -1px 0 0 0 color(~`colorPalette("@{primary-color}", 7)`); + color: color(~`colorPalette("@{primary-color}", 7)`); +} +.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) { + background: @primary-color; + border-color: @primary-color; + color: #fff; +} +.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + background: color(~`colorPalette("@{primary-color}", 5)`); + color: #fff; +} +.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active { + border-color: color(~`colorPalette("@{primary-color}", 7)`); + background: color(~`colorPalette("@{primary-color}", 7)`); + color: #fff; +} +.ant-radio-button-wrapper-disabled { + border-color: #d9d9d9; + background-color: #f5f5f5; + color: rgba(0, 0, 0, 0.25); +} +.ant-radio-button-wrapper-disabled:first-child, +.ant-radio-button-wrapper-disabled:hover { + border-color: #d9d9d9; + background-color: #f5f5f5; + color: rgba(0, 0, 0, 0.25); +} +.ant-radio-button-wrapper-disabled:first-child { + border-left-color: #d9d9d9; +} +.ant-radio-button-wrapper-disabled.ant-radio-button-wrapper-checked { + color: #fff; + background-color: #e6e6e6; + border-color: #d9d9d9; + box-shadow: none; +} +.ant-rate { + color: rgba(0, 0, 0, 0.65); + color: #fadb14; +} +.ant-rate-star { + color: inherit; +} +.ant-rate-star-first, +.ant-rate-star-second { + color: #e8e8e8; +} +.ant-rate-star-half .ant-rate-star-first, +.ant-rate-star-full .ant-rate-star-second { + color: inherit; +} +.ant-select { + color: rgba(0, 0, 0, 0.65); +} +.ant-select > ul > li > a { + background-color: #fff; +} +.ant-select-arrow { + color: rgba(0, 0, 0, 0.25); +} +.ant-select-selection { + background-color: #fff; + border-radius: 4px; + border: 1px solid #d9d9d9; + border-top-width: 1.02px; +} +.ant-select-selection:hover { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + border-right-width: 1px !important; +} +.ant-select-focused .ant-select-selection, +.ant-select-selection:focus, +.ant-select-selection:active { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); + border-right-width: 1px !important; +} +.ant-select-selection__clear { + background: #fff; + color: rgba(0, 0, 0, 0.25); +} +.ant-select-selection__clear:hover { + color: rgba(0, 0, 0, 0.45); +} +.ant-select-disabled { + color: rgba(0, 0, 0, 0.25); +} +.ant-select-disabled .ant-select-selection { + background: #f5f5f5; +} +.ant-select-disabled .ant-select-selection:hover, +.ant-select-disabled .ant-select-selection:focus, +.ant-select-disabled .ant-select-selection:active { + border-color: #d9d9d9; + box-shadow: none; +} +.ant-select-disabled .ant-select-selection--multiple .ant-select-selection__choice { + background: #f5f5f5; + color: #aaa; +} +.ant-select-disabled .ant-select-selection__choice__remove { + color: rgba(0, 0, 0, 0.25); +} +.ant-select-disabled .ant-select-selection__choice__remove:hover { + color: rgba(0, 0, 0, 0.25); +} +.ant-select-selection__placeholder, +.ant-select-search__field__placeholder { + color: #bfbfbf; +} +.ant-select-search--inline .ant-select-search__field { + border-width: 0; + background: transparent; + border-radius: 4px; +} +.ant-select-selection--multiple .ant-select-selection__choice { + color: rgba(0, 0, 0, 0.65); + background-color: #fafafa; + border: 1px solid #e8e8e8; + border-radius: 2px; +} +.ant-select-selection--multiple .ant-select-selection__choice__remove { + color: rgba(0, 0, 0, 0.45); +} +.ant-select-selection--multiple .ant-select-selection__choice__remove:hover { + color: #404040; +} +.ant-select-open .ant-select-selection { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); + border-right-width: 1px !important; +} +.ant-select-combobox .ant-select-search__field { + box-shadow: none; +} +.ant-select-dropdown { + color: rgba(0, 0, 0, 0.65); + background-color: #fff; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + border-radius: 4px; +} +.ant-select-dropdown-menu-item-group-title { + color: rgba(0, 0, 0, 0.45); +} +.ant-select-dropdown-menu-item-group-list .ant-select-dropdown-menu-item:first-child:not(:last-child), +.ant-select-dropdown-menu-item-group:not(:last-child) .ant-select-dropdown-menu-item-group-list .ant-select-dropdown-menu-item:last-child { + border-radius: 0; +} +.ant-select-dropdown-menu-item { + color: rgba(0, 0, 0, 0.65); +} +.ant-select-dropdown-menu-item:hover { + background-color: color(~`colorPalette("@{primary-color}", 1)`); +} +.ant-select-dropdown-menu-item:first-child { + border-radius: 4px 4px 0 0; +} +.ant-select-dropdown-menu-item:last-child { + border-radius: 0 0 4px 4px; +} +.ant-select-dropdown-menu-item-disabled { + color: rgba(0, 0, 0, 0.25); +} +.ant-select-dropdown-menu-item-disabled:hover { + color: rgba(0, 0, 0, 0.25); + background-color: #fff; +} +.ant-select-dropdown-menu-item-selected, +.ant-select-dropdown-menu-item-selected:hover { + background-color: #fafafa; + color: rgba(0, 0, 0, 0.65); +} +.ant-select-dropdown-menu-item-active { + background-color: color(~`colorPalette("@{primary-color}", 1)`); +} +.ant-select-dropdown-menu-item-divider { + background-color: #e8e8e8; +} +.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item .ant-select-selected-icon { + color: transparent; +} +.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item:hover .ant-select-selected-icon { + color: #ddd; +} +.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item-selected .ant-select-selected-icon, +.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item-selected:hover .ant-select-selected-icon { + color: @primary-color; +} +.ant-skeleton-header .ant-skeleton-avatar { + background: #f2f2f2; +} +.ant-skeleton-header .ant-skeleton-avatar.ant-skeleton-avatar-circle { + border-radius: 50%; +} +.ant-skeleton-header .ant-skeleton-avatar-lg.ant-skeleton-avatar-circle { + border-radius: 50%; +} +.ant-skeleton-header .ant-skeleton-avatar-sm.ant-skeleton-avatar-circle { + border-radius: 50%; +} +.ant-skeleton-content .ant-skeleton-title { + background: #f2f2f2; +} +.ant-skeleton-content .ant-skeleton-paragraph > li { + background: #f2f2f2; +} +.ant-skeleton.ant-skeleton-active .ant-skeleton-content .ant-skeleton-title, +.ant-skeleton.ant-skeleton-active .ant-skeleton-content .ant-skeleton-paragraph > li { + background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); + background-size: 400% 100%; +} +.ant-skeleton.ant-skeleton-active .ant-skeleton-avatar { + background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); + background-size: 400% 100%; +} +.ant-slider { + color: rgba(0, 0, 0, 0.65); +} +.ant-slider-rail { + border-radius: 2px; + background-color: #f5f5f5; +} +.ant-slider-track { + border-radius: 4px; + background-color: color(~`colorPalette("@{primary-color}", 3)`); +} +.ant-slider-handle { + border-radius: 50%; + border: solid 2px color(~`colorPalette("@{primary-color}", 3)`); + background-color: #fff; +} +.ant-slider-handle:focus { + border-color: #46a6ff; + box-shadow: 0 0 0 5px #8cc8ff; +} +.ant-slider-handle.ant-tooltip-open { + border-color: @primary-color; +} +.ant-slider:hover .ant-slider-rail { + background-color: #e1e1e1; +} +.ant-slider:hover .ant-slider-track { + background-color: color(~`colorPalette("@{primary-color}", 4)`); +} +.ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open) { + border-color: color(~`colorPalette("@{primary-color}", 4)`); +} +.ant-slider-mark-text { + color: rgba(0, 0, 0, 0.45); +} +.ant-slider-mark-text-active { + color: rgba(0, 0, 0, 0.65); +} +.ant-slider-step { + background: transparent; +} +.ant-slider-dot { + border: 2px solid #e8e8e8; + background-color: #fff; + border-radius: 50%; +} +.ant-slider-dot-active { + border-color: #8cc8ff; +} +.ant-slider-disabled .ant-slider-track { + background-color: rgba(0, 0, 0, 0.25) !important; +} +.ant-slider-disabled .ant-slider-handle, +.ant-slider-disabled .ant-slider-dot { + border-color: rgba(0, 0, 0, 0.25) !important; + background-color: #fff; + box-shadow: none; +} +.ant-spin { + color: rgba(0, 0, 0, 0.65); + color: @primary-color; +} +.ant-spin-blur:after { + background: #fff; +} +.ant-spin-tip { + color: rgba(0, 0, 0, 0.45); +} +.ant-spin-dot i { + border-radius: 100%; + background-color: @primary-color; +} +.ant-steps { + color: rgba(0, 0, 0, 0.65); +} +.ant-steps-item-icon { + border: 1px solid rgba(0, 0, 0, 0.25); + border-radius: 32px; +} +.ant-steps-item-icon > .ant-steps-icon { + color: @primary-color; +} +.ant-steps-item-tail:after { + background: #e8e8e8; + border-radius: 1px; +} +.ant-steps-item-title { + color: rgba(0, 0, 0, 0.65); +} +.ant-steps-item-title:after { + background: #e8e8e8; +} +.ant-steps-item-description { + color: rgba(0, 0, 0, 0.45); +} +.ant-steps-item-wait .ant-steps-item-icon { + border-color: rgba(0, 0, 0, 0.25); + background-color: #fff; +} +.ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon { + color: rgba(0, 0, 0, 0.25); +} +.ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot { + background: rgba(0, 0, 0, 0.25); +} +.ant-steps-item-wait > .ant-steps-item-content > .ant-steps-item-title { + color: rgba(0, 0, 0, 0.45); +} +.ant-steps-item-wait > .ant-steps-item-content > .ant-steps-item-title:after { + background-color: #e8e8e8; +} +.ant-steps-item-wait > .ant-steps-item-content > .ant-steps-item-description { + color: rgba(0, 0, 0, 0.45); +} +.ant-steps-item-wait > .ant-steps-item-tail:after { + background-color: #e8e8e8; +} +.ant-steps-item-process .ant-steps-item-icon { + border-color: @primary-color; + background-color: #fff; +} +.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon { + color: @primary-color; +} +.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot { + background: @primary-color; +} +.ant-steps-item-process > .ant-steps-item-content > .ant-steps-item-title { + color: rgba(0, 0, 0, 0.85); +} +.ant-steps-item-process > .ant-steps-item-content > .ant-steps-item-title:after { + background-color: #e8e8e8; +} +.ant-steps-item-process > .ant-steps-item-content > .ant-steps-item-description { + color: rgba(0, 0, 0, 0.65); +} +.ant-steps-item-process > .ant-steps-item-tail:after { + background-color: #e8e8e8; +} +.ant-steps-item-process .ant-steps-item-icon { + background: @primary-color; +} +.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon { + color: #fff; +} +.ant-steps-item-finish .ant-steps-item-icon { + border-color: @primary-color; + background-color: #fff; +} +.ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon { + color: @primary-color; +} +.ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot { + background: @primary-color; +} +.ant-steps-item-finish > .ant-steps-item-content > .ant-steps-item-title { + color: rgba(0, 0, 0, 0.65); +} +.ant-steps-item-finish > .ant-steps-item-content > .ant-steps-item-title:after { + background-color: @primary-color; +} +.ant-steps-item-finish > .ant-steps-item-content > .ant-steps-item-description { + color: rgba(0, 0, 0, 0.45); +} +.ant-steps-item-finish > .ant-steps-item-tail:after { + background-color: @primary-color; +} +.ant-steps-item-error .ant-steps-item-icon { + border-color: #f5222d; + background-color: #fff; +} +.ant-steps-item-error .ant-steps-item-icon > .ant-steps-icon { + color: #f5222d; +} +.ant-steps-item-error .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot { + background: #f5222d; +} +.ant-steps-item-error > .ant-steps-item-content > .ant-steps-item-title { + color: #f5222d; +} +.ant-steps-item-error > .ant-steps-item-content > .ant-steps-item-title:after { + background-color: #e8e8e8; +} +.ant-steps-item-error > .ant-steps-item-content > .ant-steps-item-description { + color: #f5222d; +} +.ant-steps-item-error > .ant-steps-item-tail:after { + background-color: #e8e8e8; +} +.ant-steps-item.ant-steps-next-error .ant-steps-item-title:after { + background: #f5222d; +} +.ant-steps-item-custom .ant-steps-item-icon { + background: none; + border: 0; +} +.ant-steps-item-custom.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon { + color: @primary-color; +} +.ant-steps-small .ant-steps-item-icon { + border-radius: 24px; +} +.ant-steps-small .ant-steps-item-description { + color: rgba(0, 0, 0, 0.45); +} +.ant-steps-small .ant-steps-item-custom .ant-steps-item-icon { + border-radius: 0; + border: 0; + background: none; +} +.ant-steps-dot .ant-steps-item-icon { + border: 0; + background: transparent; +} +.ant-steps-dot .ant-steps-item-icon .ant-steps-icon-dot { + border-radius: 100px; +} +.ant-steps-dot .ant-steps-item-icon .ant-steps-icon-dot:after { + background: rgba(0, 0, 0, 0.001); +} +.ant-switch { + color: rgba(0, 0, 0, 0.65); + border-radius: 100px; + border: 1px solid transparent; + background-color: rgba(0, 0, 0, 0.25); +} +.ant-switch-inner { + color: #fff; +} +.ant-switch-loading-icon, +.ant-switch:after { + border-radius: 18px; + background-color: #fff; +} +.ant-switch:after { + box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2); +} +.ant-switch-loading-icon { + background: transparent; +} +.ant-switch-loading .ant-switch-loading-icon { + color: rgba(0, 0, 0, 0.65); +} +.ant-switch-checked.ant-switch-loading .ant-switch-loading-icon { + color: @primary-color; +} +.ant-switch:focus { + box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); +} +.ant-switch:focus:hover { + box-shadow: none; +} +.ant-switch-checked { + background-color: @primary-color; +} +.ant-table { + color: rgba(0, 0, 0, 0.65); +} +.ant-table table { + border-collapse: collapse; + border-radius: 4px 4px 0 0; +} +.ant-table-thead > tr > th { + background: #fafafa; + color: rgba(0, 0, 0, 0.85); + border-bottom: 1px solid #e8e8e8; +} +.ant-table-thead > tr > th .anticon-filter, +.ant-table-thead > tr > th .ant-table-filter-icon { + color: #bfbfbf; +} +.ant-table-thead > tr > th .ant-table-filter-selected.anticon-filter { + color: @primary-color; +} +.ant-table-thead > tr > th .ant-table-column-sorter { + color: #bfbfbf; +} +.ant-table-thead > tr > th .ant-table-column-sorter-up.on, +.ant-table-thead > tr > th .ant-table-column-sorter-down.on { + color: @primary-color; +} +.ant-table-thead > tr > th.ant-table-column-has-actions:hover { + background: #f5f5f5; +} +.ant-table-thead > tr > th.ant-table-column-has-actions:hover .anticon-filter, +.ant-table-thead > tr > th.ant-table-column-has-actions:hover .ant-table-filter-icon { + background: #f5f5f5; +} +.ant-table-thead > tr > th.ant-table-column-has-actions:hover .anticon-filter:hover, +.ant-table-thead > tr > th.ant-table-column-has-actions:hover .ant-table-filter-icon:hover { + color: rgba(0, 0, 0, 0.45); + background: #ebebeb; +} +.ant-table-thead > tr > th.ant-table-column-has-actions:hover .anticon-filter:active, +.ant-table-thead > tr > th.ant-table-column-has-actions:hover .ant-table-filter-icon:active { + color: rgba(0, 0, 0, 0.65); +} +.ant-table-thead > tr > th.ant-table-column-has-actions .anticon-filter.ant-table-filter-open, +.ant-table-thead > tr > th.ant-table-column-has-actions .ant-table-filter-icon.ant-table-filter-open { + color: rgba(0, 0, 0, 0.45); + background: #ebebeb; +} +.ant-table-thead > tr > th.ant-table-column-has-actions:active .ant-table-column-sorter-up:not(.on), +.ant-table-thead > tr > th.ant-table-column-has-actions:active .ant-table-column-sorter-down:not(.on) { + color: rgba(0, 0, 0, 0.45); +} +.ant-table-thead > tr > th .ant-table-column-sorters:before { + background: transparent; +} +.ant-table-thead > tr > th .ant-table-column-sorters:hover:before { + background: rgba(0, 0, 0, 0.04); +} +.ant-table-thead > tr:first-child > th:first-child { + border-top-left-radius: 4px; +} +.ant-table-thead > tr:first-child > th:last-child { + border-top-right-radius: 4px; +} +.ant-table-thead > tr:not(:last-child) > th[colspan] { + border-bottom: 0; +} +.ant-table-tbody > tr > td { + border-bottom: 1px solid #e8e8e8; +} +.ant-table-thead > tr.ant-table-row-hover > td, +.ant-table-tbody > tr.ant-table-row-hover > td, +.ant-table-thead > tr:hover > td, +.ant-table-tbody > tr:hover > td { + background: color(~`colorPalette("@{primary-color}", 1)`); +} +.ant-table-thead > tr:hover { + background: none; +} +.ant-table-footer { + background: #fafafa; + border-radius: 0 0 4px 4px; + border-top: 1px solid #e8e8e8; +} +.ant-table-footer:before { + background: #fafafa; +} +.ant-table.ant-table-bordered .ant-table-footer { + border: 1px solid #e8e8e8; +} +.ant-table-title { + border-radius: 4px 4px 0 0; +} +.ant-table.ant-table-bordered .ant-table-title { + border: 1px solid #e8e8e8; +} +.ant-table-title + .ant-table-content { + border-radius: 4px 4px 0 0; +} +.ant-table-bordered .ant-table-title + .ant-table-content, +.ant-table-bordered .ant-table-title + .ant-table-content table, +.ant-table-bordered .ant-table-title + .ant-table-content .ant-table-thead > tr:first-child > th { + border-radius: 0; +} +.ant-table-without-column-header .ant-table-title + .ant-table-content, +.ant-table-without-column-header table { + border-radius: 0; +} +.ant-table-tbody > tr.ant-table-row-selected td { + background: #fafafa; +} +.ant-table-thead > tr > th.ant-table-column-sort { + background: #f5f5f5; +} +.ant-table-tbody > tr > td.ant-table-column-sort { + background: rgba(0, 0, 0, 0.01); +} +.ant-table-header { + background: #fafafa; +} +.ant-table-header table { + border-radius: 4px 4px 0 0; +} +.ant-table-loading .ant-table-body { + background: #fff; +} +.ant-table-bordered .ant-table-header > table, +.ant-table-bordered .ant-table-body > table, +.ant-table-bordered .ant-table-fixed-left table, +.ant-table-bordered .ant-table-fixed-right table { + border: 1px solid #e8e8e8; + border-right: 0; + border-bottom: 0; +} +.ant-table-bordered.ant-table-empty .ant-table-placeholder { + border-left: 1px solid #e8e8e8; + border-right: 1px solid #e8e8e8; +} +.ant-table-bordered.ant-table-fixed-header .ant-table-header > table { + border-bottom: 0; +} +.ant-table-bordered.ant-table-fixed-header .ant-table-body > table { + border-top: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.ant-table-bordered.ant-table-fixed-header .ant-table-body-inner > table { + border-top: 0; +} +.ant-table-bordered.ant-table-fixed-header .ant-table-placeholder { + border: 0; +} +.ant-table-bordered .ant-table-thead > tr:not(:last-child) > th { + border-bottom: 1px solid #e8e8e8; +} +.ant-table-bordered .ant-table-thead > tr > th, +.ant-table-bordered .ant-table-tbody > tr > td { + border-right: 1px solid #e8e8e8; +} +.ant-table-placeholder { + background: #fff; + border-bottom: 1px solid #e8e8e8; + color: rgba(0, 0, 0, 0.45); +} +.ant-table-filter-dropdown { + background: #fff; + border-radius: 4px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); +} +.ant-table-filter-dropdown .ant-dropdown-menu { + border: 0; + box-shadow: none; + border-radius: 4px 4px 0 0; +} +.ant-table-filter-dropdown .ant-dropdown-menu-sub { + border-radius: 4px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); +} +.ant-table-filter-dropdown .ant-dropdown-menu .ant-dropdown-submenu-contain-selected .ant-dropdown-menu-submenu-title:after { + color: @primary-color; +} +.ant-table-filter-dropdown > .ant-dropdown-menu > .ant-dropdown-menu-item:last-child, +.ant-table-filter-dropdown > .ant-dropdown-menu > .ant-dropdown-menu-submenu:last-child .ant-dropdown-menu-submenu-title { + border-radius: 0; +} +.ant-table-filter-dropdown-btns { + border-top: 1px solid #e8e8e8; +} +.ant-table-filter-dropdown-link { + color: @primary-color; +} +.ant-table-filter-dropdown-link:hover { + color: color(~`colorPalette("@{primary-color}", 5)`); +} +.ant-table-filter-dropdown-link:active { + color: color(~`colorPalette("@{primary-color}", 7)`); +} +.ant-table-selection .anticon-down { + color: #bfbfbf; +} +.ant-table-selection-menu { + background: #fff; + border-radius: 4px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); +} +.ant-table-selection-menu .ant-action-down { + color: #bfbfbf; +} +.ant-table-selection-down:hover .anticon-down { + color: #666; +} +.ant-table-row-expand-icon { + border: 1px solid #e8e8e8; + background: #fff; +} +tr.ant-table-expanded-row, +tr.ant-table-expanded-row:hover { + background: #fbfbfb; +} +.ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body { + background: #fff; +} +.ant-table-fixed-left, +.ant-table-fixed-right { + border-radius: 0; +} +.ant-table-fixed-left table, +.ant-table-fixed-right table { + background: #fff; +} +.ant-table-fixed-header .ant-table-fixed-left .ant-table-body-outer .ant-table-fixed, +.ant-table-fixed-header .ant-table-fixed-right .ant-table-body-outer .ant-table-fixed { + border-radius: 0; +} +.ant-table-fixed-left { + box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15); +} +.ant-table-fixed-left, +.ant-table-fixed-left table { + border-radius: 4px 0 0 0; +} +.ant-table-fixed-left .ant-table-thead > tr > th:last-child { + border-top-right-radius: 0; +} +.ant-table-fixed-right { + box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15); +} +.ant-table-fixed-right, +.ant-table-fixed-right table { + border-radius: 0 4px 0 0; +} +.ant-table-fixed-right .ant-table-expanded-row { + color: transparent; +} +.ant-table-fixed-right .ant-table-thead > tr > th:first-child { + border-top-left-radius: 0; +} +.ant-table.ant-table-scroll-position-left .ant-table-fixed-left { + box-shadow: none; +} +.ant-table.ant-table-scroll-position-right .ant-table-fixed-right { + box-shadow: none; +} +.ant-table-small { + border: 1px solid #e8e8e8; + border-radius: 4px; +} +.ant-table-small > .ant-table-title { + border-bottom: 1px solid #e8e8e8; +} +.ant-table-small > .ant-table-content > .ant-table-header > table, +.ant-table-small > .ant-table-content > .ant-table-body > table, +.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-header > table, +.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table, +.ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table, +.ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table, +.ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table, +.ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table { + border: 0; +} +.ant-table-small > .ant-table-content > .ant-table-header > table > .ant-table-thead > tr > th, +.ant-table-small > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th, +.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr > th, +.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th, +.ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-thead > tr > th, +.ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-thead > tr > th, +.ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th, +.ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th { + background: #fff; + border-bottom: 1px solid #e8e8e8; +} +.ant-table-small > .ant-table-content .ant-table-header { + background: #fff; +} +.ant-table-small > .ant-table-content .ant-table-placeholder, +.ant-table-small > .ant-table-content .ant-table-row:last-child td { + border-bottom: 0; +} +.ant-table-small.ant-table-bordered { + border-right: 0; +} +.ant-table-small.ant-table-bordered .ant-table-title { + border: 0; + border-bottom: 1px solid #e8e8e8; + border-right: 1px solid #e8e8e8; +} +.ant-table-small.ant-table-bordered .ant-table-content { + border-right: 1px solid #e8e8e8; +} +.ant-table-small.ant-table-bordered .ant-table-footer { + border: 0; + border-top: 1px solid #e8e8e8; + border-right: 1px solid #e8e8e8; +} +.ant-table-small.ant-table-bordered .ant-table-placeholder { + border-left: 0; + border-bottom: 0; +} +.ant-table-small.ant-table-bordered .ant-table-thead > tr > th:last-child, +.ant-table-small.ant-table-bordered .ant-table-tbody > tr > td:last-child { + border-right: none; +} +.ant-table-small.ant-table-bordered .ant-table-fixed-left .ant-table-thead > tr > th:last-child, +.ant-table-small.ant-table-bordered .ant-table-fixed-left .ant-table-tbody > tr > td:last-child { + border-right: 1px solid #e8e8e8; +} +.ant-table-small.ant-table-bordered .ant-table-fixed-right { + border-right: 1px solid #e8e8e8; +} +.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab { + border: 1px solid #e8e8e8; + border-bottom: 0; + border-radius: 4px 4px 0 0; + background: #fafafa; +} +.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active { + background: #fff; + border-color: #e8e8e8; + color: @primary-color; +} +.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab .ant-tabs-close-x { + color: rgba(0, 0, 0, 0.45); +} +.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab .ant-tabs-close-x:hover { + color: rgba(0, 0, 0, 0.85); +} +.ant-tabs-extra-content .ant-tabs-new-tab { + border-radius: 2px; + border: 1px solid #e8e8e8; + color: rgba(0, 0, 0, 0.65); +} +.ant-tabs-extra-content .ant-tabs-new-tab:hover { + color: @primary-color; + border-color: @primary-color; +} +.ant-tabs-vertical.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab { + border-bottom: 1px solid #e8e8e8; +} +.ant-tabs-vertical.ant-tabs-card.ant-tabs-left > .ant-tabs-bar .ant-tabs-tab { + border-right: 0; + border-radius: 4px 0 0 4px; +} +.ant-tabs-vertical.ant-tabs-card.ant-tabs-right > .ant-tabs-bar .ant-tabs-tab { + border-left: 0; + border-radius: 0 4px 4px 0; +} +.ant-tabs.ant-tabs-card.ant-tabs-bottom > .ant-tabs-bar .ant-tabs-tab { + border-bottom: 1px solid #e8e8e8; + border-top: 0; + border-radius: 0 0 4px 4px; +} +.ant-tabs.ant-tabs-card.ant-tabs-bottom > .ant-tabs-bar .ant-tabs-tab-active { + color: @primary-color; +} +.ant-tabs { + color: rgba(0, 0, 0, 0.65); +} +.ant-tabs-ink-bar { + background-color: @primary-color; +} +.ant-tabs-bar { + border-bottom: 1px solid #e8e8e8; +} +.ant-tabs-bottom .ant-tabs-bar { + border-bottom: none; + border-top: 1px solid #e8e8e8; +} +.ant-tabs-tab-prev, +.ant-tabs-tab-next { + border: 0; + background-color: transparent; + color: rgba(0, 0, 0, 0.45); +} +.ant-tabs-tab-prev:hover, +.ant-tabs-tab-next:hover { + color: rgba(0, 0, 0, 0.65); +} +.ant-tabs-tab-btn-disabled, +.ant-tabs-tab-btn-disabled:hover { + color: rgba(0, 0, 0, 0.25); +} +.ant-tabs-nav .ant-tabs-tab-disabled { + color: rgba(0, 0, 0, 0.25); +} +.ant-tabs-nav .ant-tabs-tab:hover { + color: color(~`colorPalette("@{primary-color}", 5)`); +} +.ant-tabs-nav .ant-tabs-tab:active { + color: color(~`colorPalette("@{primary-color}", 7)`); +} +.ant-tabs-nav .ant-tabs-tab-active { + color: @primary-color; +} +.ant-tabs-vertical > .ant-tabs-bar { + border-bottom: 0; +} +.ant-tabs-vertical.ant-tabs-left > .ant-tabs-bar { + border-right: 1px solid #e8e8e8; +} +.ant-tabs-vertical.ant-tabs-left > .ant-tabs-content { + border-left: 1px solid #e8e8e8; +} +.ant-tabs-vertical.ant-tabs-right > .ant-tabs-bar { + border-left: 1px solid #e8e8e8; +} +.ant-tabs-vertical.ant-tabs-right > .ant-tabs-content { + border-right: 1px solid #e8e8e8; +} +.ant-tag { + color: rgba(0, 0, 0, 0.65); + border-radius: 4px; + border: 1px solid #d9d9d9; + background: #fafafa; +} +.ant-tag, +.ant-tag a, +.ant-tag a:hover { + color: rgba(0, 0, 0, 0.65); +} +.ant-tag .anticon-close { + color: rgba(0, 0, 0, 0.45); +} +.ant-tag .anticon-close:hover { + color: rgba(0, 0, 0, 0.85); +} +.ant-tag-has-color { + border-color: transparent; +} +.ant-tag-has-color, +.ant-tag-has-color a, +.ant-tag-has-color a:hover, +.ant-tag-has-color .anticon-close, +.ant-tag-has-color .anticon-close:hover { + color: #fff; +} +.ant-tag-checkable { + background-color: transparent; + border-color: transparent; +} +.ant-tag-checkable:not(.ant-tag-checkable-checked):hover { + color: @primary-color; +} +.ant-tag-checkable:active, +.ant-tag-checkable-checked { + color: #fff; +} +.ant-tag-checkable-checked { + background-color: @primary-color; +} +.ant-tag-checkable:active { + background-color: color(~`colorPalette("@{primary-color}", 7)`); +} +.ant-tag-pink { + color: #eb2f96; + background: #fff0f6; + border-color: #ffadd2; +} +.ant-tag-pink-inverse { + background: #eb2f96; + border-color: #eb2f96; + color: #fff; +} +.ant-tag-magenta { + color: #eb2f96; + background: #fff0f6; + border-color: #ffadd2; +} +.ant-tag-magenta-inverse { + background: #eb2f96; + border-color: #eb2f96; + color: #fff; +} +.ant-tag-red { + color: #f5222d; + background: #fff1f0; + border-color: #ffa39e; +} +.ant-tag-red-inverse { + background: #f5222d; + border-color: #f5222d; + color: #fff; +} +.ant-tag-volcano { + color: #fa541c; + background: #fff2e8; + border-color: #ffbb96; +} +.ant-tag-volcano-inverse { + background: #fa541c; + border-color: #fa541c; + color: #fff; +} +.ant-tag-orange { + color: #fa8c16; + background: #fff7e6; + border-color: #ffd591; +} +.ant-tag-orange-inverse { + background: #fa8c16; + border-color: #fa8c16; + color: #fff; +} +.ant-tag-yellow { + color: #fadb14; + background: #feffe6; + border-color: #fffb8f; +} +.ant-tag-yellow-inverse { + background: #fadb14; + border-color: #fadb14; + color: #fff; +} +.ant-tag-gold { + color: #faad14; + background: #fffbe6; + border-color: #ffe58f; +} +.ant-tag-gold-inverse { + background: #faad14; + border-color: #faad14; + color: #fff; +} +.ant-tag-cyan { + color: #13c2c2; + background: #e6fffb; + border-color: #87e8de; +} +.ant-tag-cyan-inverse { + background: #13c2c2; + border-color: #13c2c2; + color: #fff; +} +.ant-tag-lime { + color: #a0d911; + background: #fcffe6; + border-color: #eaff8f; +} +.ant-tag-lime-inverse { + background: #a0d911; + border-color: #a0d911; + color: #fff; +} +.ant-tag-green { + color: #52c41a; + background: #f6ffed; + border-color: #b7eb8f; +} +.ant-tag-green-inverse { + background: #52c41a; + border-color: #52c41a; + color: #fff; +} +.ant-tag-blue { + color: @primary-color; + background: color(~`colorPalette("@{primary-color}", 1)`); + border-color: color(~`colorPalette("@{primary-color}", 3)`); +} +.ant-tag-blue-inverse { + background: @primary-color; + border-color: @primary-color; + color: #fff; +} +.ant-tag-geekblue { + color: #2f54eb; + background: #f0f5ff; + border-color: #adc6ff; +} +.ant-tag-geekblue-inverse { + background: #2f54eb; + border-color: #2f54eb; + color: #fff; +} +.ant-tag-purple { + color: #722ed1; + background: #f9f0ff; + border-color: #d3adf7; +} +.ant-tag-purple-inverse { + background: #722ed1; + border-color: #722ed1; + color: #fff; +} +.ant-time-picker-panel { + color: rgba(0, 0, 0, 0.65); +} +.ant-time-picker-panel-inner { + background-color: #fff; + border-radius: 4px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + background-clip: padding-box; +} +.ant-time-picker-panel-input { + border: 0; +} +.ant-time-picker-panel-input::-moz-placeholder { + color: #bfbfbf; +} +.ant-time-picker-panel-input:-ms-input-placeholder { + color: #bfbfbf; +} +.ant-time-picker-panel-input::-webkit-input-placeholder { + color: #bfbfbf; +} +.ant-time-picker-panel-input-wrap { + border-bottom: 1px solid #e8e8e8; +} +.ant-time-picker-panel-input-invalid { + border-color: red; +} +.ant-time-picker-panel-clear-btn-icon svg { + color: rgba(0, 0, 0, 0.25); +} +.ant-time-picker-panel-clear-btn-icon svg:hover { + color: rgba(0, 0, 0, 0.45); +} +.ant-time-picker-panel-select { + border-left: 1px solid #e8e8e8; +} +.ant-time-picker-panel-select:first-child { + border-left: 0; +} +.ant-time-picker-panel-select:last-child { + border-right: 0; +} +.ant-time-picker-panel-select li:hover { + background: color(~`colorPalette("@{primary-color}", 1)`); +} +li.ant-time-picker-panel-select-option-selected { + background: #f5f5f5; +} +li.ant-time-picker-panel-select-option-selected:hover { + background: #f5f5f5; +} +li.ant-time-picker-panel-select-option-disabled { + color: rgba(0, 0, 0, 0.25); +} +li.ant-time-picker-panel-select-option-disabled:hover { + background: transparent; +} +.ant-time-picker-panel-addon { + border-top: 1px solid #e8e8e8; +} +.ant-time-picker { + color: rgba(0, 0, 0, 0.65); +} +.ant-time-picker-input { + color: rgba(0, 0, 0, 0.65); + background-color: #fff; + background-image: none; + border: 1px solid #d9d9d9; + border-radius: 4px; +} +.ant-time-picker-input::-moz-placeholder { + color: #bfbfbf; +} +.ant-time-picker-input:-ms-input-placeholder { + color: #bfbfbf; +} +.ant-time-picker-input::-webkit-input-placeholder { + color: #bfbfbf; +} +.ant-time-picker-input:hover { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + border-right-width: 1px !important; +} +.ant-time-picker-input:focus { + border-color: color(~`colorPalette("@{primary-color}", 5)`); + box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); + border-right-width: 1px !important; +} +.ant-time-picker-input-disabled { + background-color: #f5f5f5; + color: rgba(0, 0, 0, 0.25); +} +.ant-time-picker-input-disabled:hover { + border-color: #e6d8d8; + border-right-width: 1px !important; +} +.ant-time-picker-input[disabled] { + background-color: #f5f5f5; + color: rgba(0, 0, 0, 0.25); +} +.ant-time-picker-input[disabled]:hover { + border-color: #e6d8d8; + border-right-width: 1px !important; +} +.ant-time-picker-icon { + color: rgba(0, 0, 0, 0.25); +} +.ant-time-picker-icon .ant-time-picker-clock-icon { + color: rgba(0, 0, 0, 0.25); +} +.ant-timeline { + color: rgba(0, 0, 0, 0.65); +} +.ant-timeline-item-tail { + border-left: 2px solid #e8e8e8; +} +.ant-timeline-item-head { + background-color: #fff; + border-radius: 100px; + border: 2px solid transparent; +} +.ant-timeline-item-head-blue { + border-color: @primary-color; + color: @primary-color; +} +.ant-timeline-item-head-red { + border-color: #f5222d; + color: #f5222d; +} +.ant-timeline-item-head-green { + border-color: #52c41a; + color: #52c41a; +} +.ant-timeline-item-head-custom { + border: 0; + border-radius: 0; +} +.ant-timeline.ant-timeline-pending .ant-timeline-item-last .ant-timeline-item-tail { + border-left: 2px dotted #e8e8e8; +} +.ant-timeline.ant-timeline-reverse .ant-timeline-item-pending .ant-timeline-item-tail { + border-left: 2px dotted #e8e8e8; +} +.ant-tooltip { + color: rgba(0, 0, 0, 0.65); +} +.ant-tooltip-inner { + color: #fff; + background-color: rgba(0, 0, 0, 0.75); + border-radius: 4px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); +} +.ant-tooltip-arrow { + border-color: transparent; + border-style: solid; +} +.ant-tooltip-placement-top .ant-tooltip-arrow, +.ant-tooltip-placement-topLeft .ant-tooltip-arrow, +.ant-tooltip-placement-topRight .ant-tooltip-arrow { + border-width: 5px 5px 0; + border-top-color: rgba(0, 0, 0, 0.75); +} +.ant-tooltip-placement-right .ant-tooltip-arrow, +.ant-tooltip-placement-rightTop .ant-tooltip-arrow, +.ant-tooltip-placement-rightBottom .ant-tooltip-arrow { + border-width: 5px 5px 5px 0; + border-right-color: rgba(0, 0, 0, 0.75); +} +.ant-tooltip-placement-left .ant-tooltip-arrow, +.ant-tooltip-placement-leftTop .ant-tooltip-arrow, +.ant-tooltip-placement-leftBottom .ant-tooltip-arrow { + border-width: 5px 0 5px 5px; + border-left-color: rgba(0, 0, 0, 0.75); +} +.ant-tooltip-placement-bottom .ant-tooltip-arrow, +.ant-tooltip-placement-bottomLeft .ant-tooltip-arrow, +.ant-tooltip-placement-bottomRight .ant-tooltip-arrow { + border-width: 0 5px 5px; + border-bottom-color: rgba(0, 0, 0, 0.75); +} +.ant-transfer { + color: rgba(0, 0, 0, 0.65); +} +.ant-transfer-disabled .ant-transfer-list { + background: #f5f5f5; +} +.ant-transfer-list { + border: 1px solid #d9d9d9; + border-radius: 4px; +} +.ant-transfer-list-search-action { + color: rgba(0, 0, 0, 0.25); +} +.ant-transfer-list-search-action .anticon { + color: rgba(0, 0, 0, 0.25); +} +.ant-transfer-list-search-action .anticon:hover { + color: rgba(0, 0, 0, 0.45); +} +.ant-transfer-list-header { + border-radius: 4px 4px 0 0; + background: #fff; + color: rgba(0, 0, 0, 0.65); + border-bottom: 1px solid #e8e8e8; +} +.ant-transfer-list-content-item:not(.ant-transfer-list-content-item-disabled):hover { + background-color: color(~`colorPalette("@{primary-color}", 1)`); +} +.ant-transfer-list-content-item-disabled { + color: rgba(0, 0, 0, 0.25); +} +.ant-transfer-list-body-not-found { + color: rgba(0, 0, 0, 0.25); +} +.ant-transfer-list-footer { + border-top: 1px solid #e8e8e8; + border-radius: 0 0 4px 4px; +} +.ant-select-tree-checkbox { + color: rgba(0, 0, 0, 0.65); +} +.ant-select-tree-checkbox-wrapper:hover .ant-select-tree-checkbox-inner, +.ant-select-tree-checkbox:hover .ant-select-tree-checkbox-inner, +.ant-select-tree-checkbox-input:focus + .ant-select-tree-checkbox-inner { + border-color: @primary-color; +} +.ant-select-tree-checkbox-checked:after { + border-radius: 2px; + border: 1px solid @primary-color; +} +.ant-select-tree-checkbox-inner { + border: 1px solid #d9d9d9; + border-radius: 2px; + background-color: #fff; +} +.ant-select-tree-checkbox-inner:after { + border: 2px solid #fff; + border-top: 0; + border-left: 0; +} +.ant-select-tree-checkbox-indeterminate .ant-select-tree-checkbox-inner:after { + border: 0; + background-color: @primary-color; +} +.ant-select-tree-checkbox-indeterminate.ant-select-tree-checkbox-disabled .ant-select-tree-checkbox-inner:after { + border-color: rgba(0, 0, 0, 0.25); +} +.ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner:after { + border: 2px solid #fff; + border-top: 0; + border-left: 0; +} +.ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner { + background-color: @primary-color; + border-color: @primary-color; +} +.ant-select-tree-checkbox-disabled.ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner:after { + border-color: rgba(0, 0, 0, 0.25); +} +.ant-select-tree-checkbox-disabled .ant-select-tree-checkbox-inner { + border-color: #d9d9d9 !important; + background-color: #f5f5f5; +} +.ant-select-tree-checkbox-disabled .ant-select-tree-checkbox-inner:after { + border-color: #f5f5f5; +} +.ant-select-tree-checkbox-disabled + span { + color: rgba(0, 0, 0, 0.25); +} +.ant-select-tree-checkbox-wrapper { + color: rgba(0, 0, 0, 0.65); +} +.ant-select-tree-checkbox-group { + color: rgba(0, 0, 0, 0.65); +} +.ant-select-tree { + color: rgba(0, 0, 0, 0.65); +} +.ant-select-tree li .ant-select-tree-node-content-wrapper { + border-radius: 2px; + color: rgba(0, 0, 0, 0.65); +} +.ant-select-tree li .ant-select-tree-node-content-wrapper:hover { + background-color: color(~`colorPalette("@{primary-color}", 1)`); +} +.ant-select-tree li .ant-select-tree-node-content-wrapper.ant-select-tree-node-selected { + background-color: color(~`colorPalette("@{primary-color}", 2)`); +} +.ant-select-tree li span.ant-select-tree-switcher, +.ant-select-tree li span.ant-select-tree-iconEle { + border: 0 none; +} +.ant-select-tree li span.ant-select-icon_loading .ant-select-switcher-loading-icon { + color: @primary-color; +} +.ant-select-tree li span.ant-select-tree-switcher.ant-select-tree-switcher_open .ant-select-switcher-loading-icon, +.ant-select-tree li span.ant-select-tree-switcher.ant-select-tree-switcher_close .ant-select-switcher-loading-icon { + color: @primary-color; +} +li.ant-select-tree-treenode-disabled > span:not(.ant-select-tree-switcher), +li.ant-select-tree-treenode-disabled > .ant-select-tree-node-content-wrapper, +li.ant-select-tree-treenode-disabled > .ant-select-tree-node-content-wrapper span { + color: rgba(0, 0, 0, 0.25); +} +li.ant-select-tree-treenode-disabled > .ant-select-tree-node-content-wrapper:hover { + background: transparent; +} +.ant-select-tree-dropdown { + color: rgba(0, 0, 0, 0.65); +} +.ant-select-tree-dropdown .ant-select-dropdown-search .ant-select-search__field { + border: 1px solid #d9d9d9; + border-radius: 4px; +} +.ant-select-tree-dropdown .ant-select-not-found { + color: rgba(0, 0, 0, 0.25); +} +.ant-tree.ant-tree-directory > li span.ant-tree-node-content-wrapper, +.ant-tree.ant-tree-directory .ant-tree-child-tree > li span.ant-tree-node-content-wrapper { + border-radius: 0; +} +.ant-tree.ant-tree-directory > li span.ant-tree-node-content-wrapper:hover, +.ant-tree.ant-tree-directory .ant-tree-child-tree > li span.ant-tree-node-content-wrapper:hover { + background: transparent; +} +.ant-tree.ant-tree-directory > li span.ant-tree-node-content-wrapper:hover:before, +.ant-tree.ant-tree-directory .ant-tree-child-tree > li span.ant-tree-node-content-wrapper:hover:before { + background: color(~`colorPalette("@{primary-color}", 1)`); +} +.ant-tree.ant-tree-directory > li span.ant-tree-node-content-wrapper.ant-tree-node-selected, +.ant-tree.ant-tree-directory .ant-tree-child-tree > li span.ant-tree-node-content-wrapper.ant-tree-node-selected { + color: #fff; + background: transparent; +} +.ant-tree.ant-tree-directory > li.ant-tree-treenode-selected > span.ant-tree-switcher, +.ant-tree.ant-tree-directory .ant-tree-child-tree > li.ant-tree-treenode-selected > span.ant-tree-switcher { + color: #fff; +} +.ant-tree.ant-tree-directory > li.ant-tree-treenode-selected > span.ant-tree-checkbox .ant-tree-checkbox-inner, +.ant-tree.ant-tree-directory .ant-tree-child-tree > li.ant-tree-treenode-selected > span.ant-tree-checkbox .ant-tree-checkbox-inner { + border-color: @primary-color; +} +.ant-tree.ant-tree-directory > li.ant-tree-treenode-selected > span.ant-tree-checkbox.ant-tree-checkbox-checked:after, +.ant-tree.ant-tree-directory .ant-tree-child-tree > li.ant-tree-treenode-selected > span.ant-tree-checkbox.ant-tree-checkbox-checked:after { + border-color: #fff; +} +.ant-tree.ant-tree-directory > li.ant-tree-treenode-selected > span.ant-tree-checkbox.ant-tree-checkbox-checked .ant-tree-checkbox-inner, +.ant-tree.ant-tree-directory .ant-tree-child-tree > li.ant-tree-treenode-selected > span.ant-tree-checkbox.ant-tree-checkbox-checked .ant-tree-checkbox-inner { + background: #fff; +} +.ant-tree.ant-tree-directory > li.ant-tree-treenode-selected > span.ant-tree-checkbox.ant-tree-checkbox-checked .ant-tree-checkbox-inner:after, +.ant-tree.ant-tree-directory .ant-tree-child-tree > li.ant-tree-treenode-selected > span.ant-tree-checkbox.ant-tree-checkbox-checked .ant-tree-checkbox-inner:after { + border-color: @primary-color; +} +.ant-tree.ant-tree-directory > li.ant-tree-treenode-selected > span.ant-tree-node-content-wrapper:before, +.ant-tree.ant-tree-directory .ant-tree-child-tree > li.ant-tree-treenode-selected > span.ant-tree-node-content-wrapper:before { + background: @primary-color; +} +.ant-tree-checkbox { + color: rgba(0, 0, 0, 0.65); +} +.ant-tree-checkbox-wrapper:hover .ant-tree-checkbox-inner, +.ant-tree-checkbox:hover .ant-tree-checkbox-inner, +.ant-tree-checkbox-input:focus + .ant-tree-checkbox-inner { + border-color: @primary-color; +} +.ant-tree-checkbox-checked:after { + border-radius: 2px; + border: 1px solid @primary-color; +} +.ant-tree-checkbox-inner { + border: 1px solid #d9d9d9; + border-radius: 2px; + background-color: #fff; +} +.ant-tree-checkbox-inner:after { + border: 2px solid #fff; + border-top: 0; + border-left: 0; +} +.ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner:after { + border: 0; + background-color: @primary-color; +} +.ant-tree-checkbox-indeterminate.ant-tree-checkbox-disabled .ant-tree-checkbox-inner:after { + border-color: rgba(0, 0, 0, 0.25); +} +.ant-tree-checkbox-checked .ant-tree-checkbox-inner:after { + border: 2px solid #fff; + border-top: 0; + border-left: 0; +} +.ant-tree-checkbox-checked .ant-tree-checkbox-inner { + background-color: @primary-color; + border-color: @primary-color; +} +.ant-tree-checkbox-disabled.ant-tree-checkbox-checked .ant-tree-checkbox-inner:after { + border-color: rgba(0, 0, 0, 0.25); +} +.ant-tree-checkbox-disabled .ant-tree-checkbox-inner { + border-color: #d9d9d9 !important; + background-color: #f5f5f5; +} +.ant-tree-checkbox-disabled .ant-tree-checkbox-inner:after { + border-color: #f5f5f5; +} +.ant-tree-checkbox-disabled + span { + color: rgba(0, 0, 0, 0.25); +} +.ant-tree-checkbox-wrapper { + color: rgba(0, 0, 0, 0.65); +} +.ant-tree-checkbox-group { + color: rgba(0, 0, 0, 0.65); +} +.ant-tree { + color: rgba(0, 0, 0, 0.65); +} +.ant-tree li span[draggable], +.ant-tree li span[draggable="true"] { + border-top: 2px transparent solid; + border-bottom: 2px transparent solid; +} +.ant-tree li.drag-over > span[draggable] { + background-color: @primary-color; + color: white; +} +.ant-tree li.drag-over-gap-top > span[draggable] { + border-top-color: @primary-color; +} +.ant-tree li.drag-over-gap-bottom > span[draggable] { + border-bottom-color: @primary-color; +} +.ant-tree li.filter-node > span { + color: #f5222d !important; +} +.ant-tree li.ant-tree-treenode-loading span.ant-tree-switcher.ant-tree-switcher_open .ant-tree-switcher-loading-icon, +.ant-tree li.ant-tree-treenode-loading span.ant-tree-switcher.ant-tree-switcher_close .ant-tree-switcher-loading-icon { + color: @primary-color; +} +.ant-tree li .ant-tree-node-content-wrapper { + border-radius: 2px; + color: rgba(0, 0, 0, 0.65); +} +.ant-tree li .ant-tree-node-content-wrapper:hover { + background-color: color(~`colorPalette("@{primary-color}", 1)`); +} +.ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected { + background-color: color(~`colorPalette("@{primary-color}", 2)`); +} +.ant-tree li span.ant-tree-switcher, +.ant-tree li span.ant-tree-iconEle { + border: 0 none; +} +li.ant-tree-treenode-disabled > span:not(.ant-tree-switcher), +li.ant-tree-treenode-disabled > .ant-tree-node-content-wrapper, +li.ant-tree-treenode-disabled > .ant-tree-node-content-wrapper span { + color: rgba(0, 0, 0, 0.25); +} +li.ant-tree-treenode-disabled > .ant-tree-node-content-wrapper:hover { + background: transparent; +} +.ant-tree.ant-tree-show-line li span.ant-tree-switcher { + background: #fff; + color: rgba(0, 0, 0, 0.45); +} +.ant-tree.ant-tree-show-line li:not(:last-child):before { + border-left: 1px solid #d9d9d9; +} +.ant-upload { + color: rgba(0, 0, 0, 0.65); +} +.ant-upload.ant-upload-select-picture-card { + border: 1px dashed #d9d9d9; + border-radius: 4px; + background-color: #fafafa; +} +.ant-upload.ant-upload-select-picture-card:hover { + border-color: @primary-color; +} +.ant-upload.ant-upload-drag { + border: 1px dashed #d9d9d9; + border-radius: 4px; + background: #fafafa; +} +.ant-upload.ant-upload-drag.ant-upload-drag-hover:not(.ant-upload-disabled) { + border: 2px dashed color(~`colorPalette("@{primary-color}", 5)`); +} +.ant-upload.ant-upload-drag:not(.ant-upload-disabled):hover { + border-color: color(~`colorPalette("@{primary-color}", 5)`); +} +.ant-upload.ant-upload-drag p.ant-upload-drag-icon .anticon { + color: color(~`colorPalette("@{primary-color}", 5)`); +} +.ant-upload.ant-upload-drag p.ant-upload-text { + color: rgba(0, 0, 0, 0.85); +} +.ant-upload.ant-upload-drag p.ant-upload-hint { + color: rgba(0, 0, 0, 0.45); +} +.ant-upload.ant-upload-drag .anticon-plus { + color: rgba(0, 0, 0, 0.25); +} +.ant-upload.ant-upload-drag .anticon-plus:hover { + color: rgba(0, 0, 0, 0.45); +} +.ant-upload.ant-upload-drag:hover .anticon-plus { + color: rgba(0, 0, 0, 0.45); +} +.ant-upload-list { + color: rgba(0, 0, 0, 0.65); +} +.ant-upload-list-item-info .anticon-loading, +.ant-upload-list-item-info .anticon-paper-clip { + color: rgba(0, 0, 0, 0.45); +} +.ant-upload-list-item .anticon-close { + color: rgba(0, 0, 0, 0.45); +} +.ant-upload-list-item .anticon-close:hover { + color: rgba(0, 0, 0, 0.65); +} +.ant-upload-list-item:hover .ant-upload-list-item-info { + background-color: color(~`colorPalette("@{primary-color}", 1)`); +} +.ant-upload-list-item-error, +.ant-upload-list-item-error .anticon-paper-clip, +.ant-upload-list-item-error .ant-upload-list-item-name { + color: #f5222d; +} +.ant-upload-list-item-error .anticon-close { + color: #f5222d !important; +} +.ant-upload-list-picture .ant-upload-list-item, +.ant-upload-list-picture-card .ant-upload-list-item { + border-radius: 4px; + border: 1px solid #d9d9d9; +} +.ant-upload-list-picture .ant-upload-list-item:hover, +.ant-upload-list-picture-card .ant-upload-list-item:hover { + background: transparent; +} +.ant-upload-list-picture .ant-upload-list-item-error, +.ant-upload-list-picture-card .ant-upload-list-item-error { + border-color: #f5222d; +} +.ant-upload-list-picture .ant-upload-list-item:hover .ant-upload-list-item-info, +.ant-upload-list-picture-card .ant-upload-list-item:hover .ant-upload-list-item-info { + background: transparent; +} +.ant-upload-list-picture .ant-upload-list-item-uploading, +.ant-upload-list-picture-card .ant-upload-list-item-uploading { + border-style: dashed; +} +.ant-upload-list-picture .ant-upload-list-item-icon, +.ant-upload-list-picture-card .ant-upload-list-item-icon { + color: rgba(0, 0, 0, 0.25); +} +.ant-upload-list-picture .ant-upload-list-item-thumbnail.anticon:before, +.ant-upload-list-picture-card .ant-upload-list-item-thumbnail.anticon:before { + color: rgba(0, 0, 0, 0.45); +} +.ant-upload-list-picture-card .ant-upload-list-item-info:before { + background-color: rgba(0, 0, 0, 0.5); +} +.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye-o, +.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete { + color: rgba(255, 255, 255, 0.85); +} +.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye-o:hover, +.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete:hover { + color: #fff; +} +.ant-upload-list-picture-card .ant-upload-list-item-uploading.ant-upload-list-item { + background-color: #fafafa; +} +.ant-upload-list-picture-card .ant-upload-list-item-uploading-text { + color: rgba(0, 0, 0, 0.45); +} +.ant-upload-list .ant-upload-success-icon { + color: #52c41a; +} + +.drawer .drawer-content { + background: #001529; +} + +.ant-list-item-meta .taobao { + color: #ff4000; + border-radius: 4px; +} +.ant-list-item-meta .dingding { + background-color: #2eabff; + color: #fff; + border-radius: 4px; +} +.ant-list-item-meta .alipay { + color: #2eabff; + border-radius: 4px; +} +font.strong { + color: #52c41a; +} +font.medium { + color: #faad14; +} +font.weak { + color: #f5222d; +} diff --git a/cmdb-ui/public/index.html b/cmdb-ui/public/index.html new file mode 100644 index 0000000..4b516a5 --- /dev/null +++ b/cmdb-ui/public/index.html @@ -0,0 +1,23 @@ + + + + + + + CMDB + + + + +
+
+
+ +
+
+
+ + + diff --git a/cmdb-ui/public/loading/loading.css b/cmdb-ui/public/loading/loading.css new file mode 100644 index 0000000..a899eac --- /dev/null +++ b/cmdb-ui/public/loading/loading.css @@ -0,0 +1 @@ +#preloadingAnimation{position:fixed;left:0;top:0;height:100%;width:100%;background:#ffffff;user-select:none;z-index: 9999;overflow: hidden}.lds-roller{display:inline-block;position:relative;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;}.lds-roller div{animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;transform-origin:32px 32px;}.lds-roller div:after{content:" ";display:block;position:absolute;width:6px;height:6px;border-radius:50%;background:#13c2c2;margin:-3px 0 0 -3px;}.lds-roller div:nth-child(1){animation-delay:-0.036s;}.lds-roller div:nth-child(1):after{top:50px;left:50px;}.lds-roller div:nth-child(2){animation-delay:-0.072s;}.lds-roller div:nth-child(2):after{top:54px;left:45px;}.lds-roller div:nth-child(3){animation-delay:-0.108s;}.lds-roller div:nth-child(3):after{top:57px;left:39px;}.lds-roller div:nth-child(4){animation-delay:-0.144s;}.lds-roller div:nth-child(4):after{top:58px;left:32px;}.lds-roller div:nth-child(5){animation-delay:-0.18s;}.lds-roller div:nth-child(5):after{top:57px;left:25px;}.lds-roller div:nth-child(6){animation-delay:-0.216s;}.lds-roller div:nth-child(6):after{top:54px;left:19px;}.lds-roller div:nth-child(7){animation-delay:-0.252s;}.lds-roller div:nth-child(7):after{top:50px;left:14px;}.lds-roller div:nth-child(8){animation-delay:-0.288s;}.lds-roller div:nth-child(8):after{top:45px;left:10px;}#preloadingAnimation .load-tips{color: #13c2c2;font-size:2rem;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:80px;text-align:center;width:400px;height:64px;} @keyframes lds-roller{0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}} \ No newline at end of file diff --git a/cmdb-ui/public/loading/loading.html b/cmdb-ui/public/loading/loading.html new file mode 100644 index 0000000..9b93196 --- /dev/null +++ b/cmdb-ui/public/loading/loading.html @@ -0,0 +1 @@ +
Loading
\ No newline at end of file diff --git a/cmdb-ui/public/loading/option2/html_code_segment.html b/cmdb-ui/public/loading/option2/html_code_segment.html new file mode 100644 index 0000000..df81b26 --- /dev/null +++ b/cmdb-ui/public/loading/option2/html_code_segment.html @@ -0,0 +1,5 @@ +
+
+ +
+
\ No newline at end of file diff --git a/cmdb-ui/public/loading/option2/loading.css b/cmdb-ui/public/loading/option2/loading.css new file mode 100644 index 0000000..c35cd73 --- /dev/null +++ b/cmdb-ui/public/loading/option2/loading.css @@ -0,0 +1 @@ +.preloading-animate{background:#ffffff;width:100%;height:100%;position:fixed;left:0;top:0;z-index:299;}.preloading-animate .preloading-wrapper{position:absolute;width:5rem;height:5rem;left:50%;top:50%;transform:translate(-50%,-50%);}.preloading-animate .preloading-wrapper .preloading-balls{font-size:5rem;} \ No newline at end of file diff --git a/cmdb-ui/public/loading/option2/loading.svg b/cmdb-ui/public/loading/option2/loading.svg new file mode 100644 index 0000000..7ff7322 --- /dev/null +++ b/cmdb-ui/public/loading/option2/loading.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cmdb-ui/public/qr_code.jpg b/cmdb-ui/public/qr_code.jpg new file mode 100644 index 0000000..742cdc4 Binary files /dev/null and b/cmdb-ui/public/qr_code.jpg differ diff --git a/cmdb-ui/src/App.vue b/cmdb-ui/src/App.vue new file mode 100644 index 0000000..baa95ea --- /dev/null +++ b/cmdb-ui/src/App.vue @@ -0,0 +1,41 @@ + + + + diff --git a/cmdb-ui/src/EventBus.js b/cmdb-ui/src/EventBus.js new file mode 100644 index 0000000..8853b4d --- /dev/null +++ b/cmdb-ui/src/EventBus.js @@ -0,0 +1,3 @@ +import Vue from 'vue' + +export default new Vue() diff --git a/cmdb-ui/src/api/acl/app.js b/cmdb-ui/src/api/acl/app.js new file mode 100644 index 0000000..c134f36 --- /dev/null +++ b/cmdb-ui/src/api/acl/app.js @@ -0,0 +1,34 @@ +import { axios } from '@/utils/request' + +const urlPrefix = '/v1/acl' + +export function searchRole (params) { + return axios({ + url: urlPrefix + `/roles`, + method: 'GET', + params: params + }) +} + +export function addRole (params) { + return axios({ + url: urlPrefix + '/roles', + method: 'POST', + data: params + }) +} + +export function updateRoleById (id, params) { + return axios({ + url: urlPrefix + `/roles/${id}`, + method: 'PUT', + data: params + }) +} + +export function deleteRoleById (id) { + return axios({ + url: urlPrefix + `/roles/${id}`, + method: 'DELETE' + }) +} diff --git a/cmdb-ui/src/api/acl/permission.js b/cmdb-ui/src/api/acl/permission.js new file mode 100644 index 0000000..3d78a82 --- /dev/null +++ b/cmdb-ui/src/api/acl/permission.js @@ -0,0 +1,56 @@ +import { axios } from '@/utils/request' + +const urlPrefix = '/v1/acl' + +export function getResourcePerms (resourceID) { + return axios({ + url: urlPrefix + `/resources/${resourceID}/permissions`, + method: 'GET' + }) +} + +export function getResourceTypePerms (typeID) { + return axios({ + url: urlPrefix + `/resource_types/${typeID}/perms`, + method: 'GET' + }) +} + +export function getResourceGroupPerms (resourceGroupID) { + return axios({ + url: urlPrefix + `/resource_groups/${resourceGroupID}/permissions`, + method: 'GET' + }) +} + +export function setRoleResourcePerm (rid, resourceID, params) { + return axios({ + url: urlPrefix + `/roles/${rid}/resources/${resourceID}/grant`, + method: 'POST', + data: params + }) +} + +export function setRoleResourceGroupPerm (rid, resourceGroupID, params) { + return axios({ + url: urlPrefix + `/roles/${rid}/resource_groups/${resourceGroupID}/grant`, + method: 'POST', + data: params + }) +} + +export function deleteRoleResourcePerm (rid, resourceID, params) { + return axios({ + url: urlPrefix + `/roles/${rid}/resources/${resourceID}/revoke`, + method: 'POST', + data: params + }) +} + +export function deleteRoleResourceGroupPerm (rid, resourceGroupID, params) { + return axios({ + url: urlPrefix + `/roles/${rid}/resource_groups/${resourceGroupID}/revoke`, + method: 'POST', + data: params + }) +} diff --git a/cmdb-ui/src/api/acl/resource.js b/cmdb-ui/src/api/acl/resource.js new file mode 100644 index 0000000..d96eae8 --- /dev/null +++ b/cmdb-ui/src/api/acl/resource.js @@ -0,0 +1,65 @@ +import { axios } from '@/utils/request' + +const urlPrefix = '/v1/acl' + +export function searchResource (params) { + return axios({ + url: urlPrefix + `/resources`, + method: 'GET', + params: params + }) +} + +export function addResource (params) { + return axios({ + url: urlPrefix + '/resources', + method: 'POST', + data: params + }) +} + +export function updateResourceById (id, params) { + return axios({ + url: urlPrefix + `/resources/${id}`, + method: 'PUT', + data: params + }) +} + +export function deleteResourceById (id) { + return axios({ + url: urlPrefix + `/resources/${id}`, + method: 'DELETE' + }) +} + +export function searchResourceType (params) { + return axios({ + url: urlPrefix + `/resource_types`, + method: 'GET', + params: params + }) +} + +export function addResourceType (params) { + return axios({ + url: urlPrefix + '/resource_types', + method: 'POST', + data: params + }) +} + +export function updateResourceTypeById (id, params) { + return axios({ + url: urlPrefix + `/resource_types/${id}`, + method: 'PUT', + data: params + }) +} + +export function deleteResourceTypeById (id) { + return axios({ + url: urlPrefix + `/resource_types/${id}`, + method: 'DELETE' + }) +} diff --git a/cmdb-ui/src/api/acl/role.js b/cmdb-ui/src/api/acl/role.js new file mode 100644 index 0000000..312527b --- /dev/null +++ b/cmdb-ui/src/api/acl/role.js @@ -0,0 +1,66 @@ +import { axios } from '@/utils/request' + +const urlPrefix = '/v1/acl' + +export function searchRole (params) { + return axios({ + url: urlPrefix + `/roles`, + method: 'GET', + params: params + }) +} + +export function addRole (params) { + return axios({ + url: urlPrefix + '/roles', + method: 'POST', + data: params + }) +} + +export function updateRoleById (id, params) { + return axios({ + url: urlPrefix + `/roles/${id}`, + method: 'PUT', + data: params + }) +} + +export function deleteRoleById (id) { + return axios({ + url: urlPrefix + `/roles/${id}`, + method: 'DELETE' + }) +} + +export function addParentRole (id, otherID) { + return axios({ + url: urlPrefix + `/roles/${id}/parents`, + method: 'POST', + data: { parent_id: otherID } + }) +} + +export function addChildRole (id, otherID) { + return axios({ + url: urlPrefix + `/roles/${otherID}/parents`, + method: 'POST', + data: { parent_id: id } + }) +} + +export function delParentRole (cid, pid) { + return axios({ + url: urlPrefix + `/roles/${cid}/parents`, + method: 'DELETE', + data: { parent_id: pid } + }) +} + +export function delChildRole (pid, cid) { + return axios({ + url: urlPrefix + `/roles/${cid}/parents`, + method: 'DELETE', + data: { parent_id: pid } + }) +} diff --git a/cmdb-ui/src/api/acl/user.js b/cmdb-ui/src/api/acl/user.js new file mode 100644 index 0000000..5de6201 --- /dev/null +++ b/cmdb-ui/src/api/acl/user.js @@ -0,0 +1,41 @@ +import { axios } from '@/utils/request' + +const urlPrefix = '/v1/acl' + +export function currentUser () { + return axios({ + url: urlPrefix + `/users/info`, + method: 'GET' + }) +} + +export function searchUser (params) { + return axios({ + url: urlPrefix + `/users`, + method: 'GET', + params: params + }) +} + +export function addUser (params) { + return axios({ + url: urlPrefix + '/users', + method: 'POST', + data: params + }) +} + +export function updateUserById (id, params) { + return axios({ + url: urlPrefix + `/users/${id}`, + method: 'PUT', + data: params + }) +} + +export function deleteUserById (id) { + return axios({ + url: urlPrefix + `/users/${id}`, + method: 'DELETE' + }) +} diff --git a/cmdb-ui/src/api/cmdb/CIRelation.js b/cmdb-ui/src/api/cmdb/CIRelation.js new file mode 100644 index 0000000..7401173 --- /dev/null +++ b/cmdb-ui/src/api/cmdb/CIRelation.js @@ -0,0 +1,30 @@ +import { axios } from '@/utils/request' + +export function getFirstCIs (ciId) { + return axios({ + url: '/v0.1/ci_relations/' + ciId + '/first_cis', + method: 'GET' + }) +} + +export function getSecondCIs (ciId) { + return axios({ + url: '/v0.1/ci_relations/' + ciId + '/second_cis', + method: 'GET' + }) +} + +export function searchCIRelation (params) { + return axios({ + url: `/v0.1/ci_relations/s?${params}`, + method: 'GET' + }) +} + +export function statisticsCIRelation (params) { + return axios({ + url: '/v0.1/ci_relations/statistics', + method: 'GET', + params: params + }) +} diff --git a/cmdb-ui/src/api/cmdb/CIType.js b/cmdb-ui/src/api/cmdb/CIType.js new file mode 100644 index 0000000..ebf826e --- /dev/null +++ b/cmdb-ui/src/api/cmdb/CIType.js @@ -0,0 +1,123 @@ +import { axios } from '@/utils/request' + +/** + * 获取 所有的 ci_types + * @param parameter + * @returns {AxiosPromise} + */ +export function getCITypes (parameter) { + return axios({ + url: '/v0.1/ci_types', + method: 'GET', + params: parameter + }) +} + +/** + * 获取 某个 ci_types + * @param CITypeName + * @param parameter + * @returns {AxiosPromise} + */ +export function getCIType (CITypeName, parameter) { + return axios({ + url: `/v0.1/ci_types/${CITypeName}`, + method: 'GET', + params: parameter + }) +} + +/** + * 创建 ci_type + * @param data + * @returns {AxiosPromise} + */ +export function createCIType (data) { + return axios({ + url: '/v0.1/ci_types', + method: 'POST', + data: data + }) +} + +/** + * 更新 ci_type + * @param CITypeId + * @param data + * @returns {AxiosPromise} + */ +export function updateCIType (CITypeId, data) { + return axios({ + url: `/v0.1/ci_types/${CITypeId}`, + method: 'PUT', + data: data + }) +} + +/** + * 删除 ci_type + * @param CITypeId + * @returns {AxiosPromise} + */ +export function deleteCIType (CITypeId) { + return axios({ + url: `/v0.1/ci_types/${CITypeId}`, + method: 'DELETE' + }) +} + +/** + * 获取 某个 ci_type 的分组 + * @param CITypeId + * @param data + * @returns {AxiosPromise} + */ +export function getCITypeGroupById (CITypeId, data) { + return axios({ + url: `/v0.1/ci_types/${CITypeId}/attribute_groups`, + method: 'GET', + params: data + }) +} + +/** + * 保存 某个 ci_type 的分组 + * @param CITypeId + * @param data + * @returns {AxiosPromise} + */ +export function createCITypeGroupById (CITypeId, data) { + return axios({ + url: `/v0.1/ci_types/${CITypeId}/attribute_groups`, + method: 'POST', + data: data + }) +} + +/** + * 修改 某个 ci_type 的分组 + * @param groupId + * @param data + * @returns {AxiosPromise} + */ +export function updateCITypeGroupById (groupId, data) { + return axios({ + url: `/v0.1/ci_types/attribute_groups/${groupId}`, + method: 'PUT', + data: data + }) +} + +/** + * 删除 某个 ci_type 的分组 + * @param groupId + * @param data + * @returns {AxiosPromise} + */ +export function deleteCITypeGroupById (groupId, data) { + return axios({ + url: `/v0.1/ci_types/attribute_groups/${groupId}`, + method: 'delete', + data: data + }) +} diff --git a/cmdb-ui/src/api/cmdb/CITypeAttr.js b/cmdb-ui/src/api/cmdb/CITypeAttr.js new file mode 100644 index 0000000..f1dd0b1 --- /dev/null +++ b/cmdb-ui/src/api/cmdb/CITypeAttr.js @@ -0,0 +1,124 @@ +import { axios } from '@/utils/request' + +/** + * 获取 ci_type 的属性 + * @param CITypeName + * @param parameter + * @returns {AxiosPromise} + */ +export function getCITypeAttributesByName (CITypeName, parameter) { + return axios({ + + url: `/v0.1/ci_types/${CITypeName}/attributes`, + method: 'get', + params: parameter + }) +} + +/** + * 获取 ci_type 的属性 + * @param CITypeId + * @param parameter + * @returns {AxiosPromise} + */ +export function getCITypeAttributesById (CITypeId, parameter) { + return axios({ + url: `/v0.1/ci_types/${CITypeId}/attributes`, + method: 'get', + params: parameter + }) +} + +/** + * 更新属性 + * @param attrId + * @param data + * @returns {AxiosPromise} + */ +export function updateAttributeById (attrId, data) { + return axios({ + url: `/v0.1/attributes/${attrId}`, + method: 'put', + data: data + }) +} + +/** + * 添加属性 + * @param data + * @returns {AxiosPromise} + */ +export function createAttribute (data) { + return axios({ + url: `/v0.1/attributes`, + method: 'post', + data: data + }) +} + +/** + * 搜索属性/ 获取所有的属性 + * @param data + * @returns {AxiosPromise} + */ +export function searchAttributes (params) { + return axios({ + url: `/v0.1/attributes/s`, + method: 'get', + params: params + }) +} + +/** + * 删除属性 + * @param attrId + * @returns {AxiosPromise} + */ +export function deleteAttributesById (attrId) { + return axios({ + url: `/v0.1/attributes/${attrId}`, + method: 'delete' + }) +} + +/** + * 绑定ci_type 属性 + * @param CITypeId + * @param data + * @returns {AxiosPromise} + */ +export function createCITypeAttributes (CITypeId, data) { + return axios({ + url: `/v0.1/ci_types/${CITypeId}/attributes`, + method: 'post', + data: data + }) +} + +/** + * 更新ci_type 属性 + * @param CITypeId + * @param data + * @returns {AxiosPromise} + */ +export function updateCITypeAttributesById (CITypeId, data) { + return axios({ + url: `/v0.1/ci_types/${CITypeId}/attributes`, + method: 'put', + data: data + }) +} + +/** + * 删除ci_type 属性 + * @param CITypeId + * @param data + * @returns {AxiosPromise} + */ +export function deleteCITypeAttributesById (CITypeId, data) { + return axios({ + url: `/v0.1/ci_types/${CITypeId}/attributes`, + method: 'delete', + data: data + }) +} diff --git a/cmdb-ui/src/api/cmdb/CITypeRelation.js b/cmdb-ui/src/api/cmdb/CITypeRelation.js new file mode 100644 index 0000000..cc64572 --- /dev/null +++ b/cmdb-ui/src/api/cmdb/CITypeRelation.js @@ -0,0 +1,39 @@ +import { axios } from '@/utils/request' + +export function getCITypeChildren (CITypeID, parameter) { + return axios({ + url: '/v0.1/ci_type_relations/' + CITypeID + '/children', + method: 'GET', + params: parameter + }) +} + +export function getCITypeParent (CITypeID) { + return axios({ + url: '/v0.1/ci_type_relations/' + CITypeID + '/parents', + method: 'GET' + }) +} + +export function getCITypeRelations () { + return axios({ + url: '/v0.1/ci_type_relations', + method: 'GET' + }) +} + +export function createRelation (parentId, childrenId, relationTypeId) { + return axios({ + url: `/v0.1/ci_type_relations/${parentId}/${childrenId}`, + method: 'POST', + data: { relation_type_id: relationTypeId } + }) +} + +export function deleteRelation (parentId, childrenId) { + return axios({ + url: `/v0.1/ci_type_relations/${parentId}/${childrenId}`, + method: 'DELETE' + + }) +} diff --git a/cmdb-ui/src/api/cmdb/batch.js b/cmdb-ui/src/api/cmdb/batch.js new file mode 100644 index 0000000..3a88e13 --- /dev/null +++ b/cmdb-ui/src/api/cmdb/batch.js @@ -0,0 +1,67 @@ +import XLSX from 'xlsx' +import { axios } from '@/utils/request' + +export function processFile (fileObj) { + const promise = new Promise(function (resolve) { + const reader = new FileReader() + reader.readAsBinaryString(fileObj) + reader.onload = function (e) { + const data = e.target.result + const workbook = XLSX.read(data, { type: 'binary' }) + const sheet = workbook.Sheets[workbook.SheetNames[0]] + const lt = XLSX.utils.sheet_to_json(sheet, { header: 1 }) + resolve(lt) + } + }) + return promise +} + +export function uploadData (ciId, data) { + data.ci_type = ciId + return axios({ + url: '/v0.1/ci', + method: 'PUT', + data: data + }) +} + +export function writeCsv (columns) { + const { Parser } = require('json2csv') + const fields = columns + const opts = { fields } + const p = new Parser(opts) + return p.parse([]) +} + +export function writeExcel (columns, name) { + const worksheet = XLSX.utils.aoa_to_sheet([columns]) + const newWorkBoot = XLSX.utils.book_new() + XLSX.utils.book_append_sheet(newWorkBoot, worksheet, name) + const s = XLSX.write(newWorkBoot, { type: 'array' }) + console.log(s) + return s +} + +// 判断一个数组元素是否都为空的 +export function any (ArrayList) { + let flag = false + for (let i = 0; i < ArrayList.length; i++) { + if (ArrayList[i]) { + flag = true + return flag + } + } + return false +} + +// 去除一个二维数组 底下为空的部分 +export function filterNull (twoDimArray) { + console.log(twoDimArray) + const newArray = [] + for (let i = 0; i < twoDimArray.length; i++) { + if (any(twoDimArray[i])) { + newArray.push(twoDimArray[i]) + } + } + return newArray +} diff --git a/cmdb-ui/src/api/cmdb/ci.js b/cmdb-ui/src/api/cmdb/ci.js new file mode 100644 index 0000000..f06ee48 --- /dev/null +++ b/cmdb-ui/src/api/cmdb/ci.js @@ -0,0 +1,41 @@ +import { axios } from '@/utils/request' + +const urlPrefix = '/v0.1' + +export function searchCI (params) { + return axios({ + url: urlPrefix + `/ci/s?${params}`, + method: 'GET' + }) +} + +export function addCI (params) { + return axios({ + url: urlPrefix + '/ci', + method: 'POST', + data: params + }) +} + +export function updateCI (id, params) { + return axios({ + url: urlPrefix + `/ci/${id}`, + method: 'PUT', + data: params + }) +} + +export function deleteCI (ciId) { + return axios({ + url: urlPrefix + `/ci/${ciId}`, + method: 'DELETE' + }) +} + +// 获取单个ci实例 +export function getCIById (ciId) { + return axios({ + url: urlPrefix + `/ci/${ciId}`, + method: 'GET' + }) +} diff --git a/cmdb-ui/src/api/cmdb/history.js b/cmdb-ui/src/api/cmdb/history.js new file mode 100644 index 0000000..443f7c6 --- /dev/null +++ b/cmdb-ui/src/api/cmdb/history.js @@ -0,0 +1,8 @@ +import { axios } from '@/utils/request' + +export function getCIHistory (ciId) { + return axios({ + url: `/v0.1/history/ci/${ciId}`, + method: 'GET' + }) +} diff --git a/cmdb-ui/src/api/cmdb/preference.js b/cmdb-ui/src/api/cmdb/preference.js new file mode 100644 index 0000000..ba24c73 --- /dev/null +++ b/cmdb-ui/src/api/cmdb/preference.js @@ -0,0 +1,64 @@ +import { axios } from '@/utils/request' + +export function getPreference (instance = true, tree = null) { + return axios({ + url: '/v0.1/preference/ci_types', + method: 'GET', + params: { instance: instance, tree: tree } + }) +} + +export function getSubscribeAttributes (ciTypeId) { + return axios({ + url: `/v0.1/preference/ci_types/${ciTypeId}/attributes`, + method: 'GET' + }) +} + +export function getSubscribeTreeView () { + return axios({ + url: '/v0.1/preference/tree/view', + method: 'GET' + }) +} + +export function subscribeCIType (ciTypeId, attrs) { + return axios({ + url: `/v0.1/preference/ci_types/${ciTypeId}/attributes`, + method: 'POST', + data: { + attr: attrs + } + }) +} + +export function subscribeTreeView (ciTypeId, levels) { + return axios({ + url: `/v0.1/preference/tree/view`, + method: 'POST', + data: { type_id: ciTypeId, levels: levels } + }) +} + +export function getRelationView () { + return axios({ + url: `/v0.1/preference/relation/view`, + method: 'GET' + }) +} + +export function deleteRelationView (viewName) { + return axios({ + url: `/v0.1/preference/relation/view`, + method: 'DELETE', + data: { name: viewName } + }) +} + +export function subscribeRelationView (payload) { + return axios({ + url: `/v0.1/preference/relation/view`, + method: 'POST', + data: payload + }) +} diff --git a/cmdb-ui/src/api/cmdb/relationType.js b/cmdb-ui/src/api/cmdb/relationType.js new file mode 100644 index 0000000..831b0ae --- /dev/null +++ b/cmdb-ui/src/api/cmdb/relationType.js @@ -0,0 +1,31 @@ +import { axios } from '@/utils/request' + +export function getRelationTypes () { + return axios({ + url: '/v0.1/relation_types', + method: 'GET' + }) +} + +export function addRelationType (payload) { + return axios({ + url: `/v0.1/relation_types`, + method: 'POST', + data: payload + }) +} + +export function updateRelationType (rtId, payload) { + return axios({ + url: `/v0.1/relation_types/${rtId}`, + method: 'PUT', + data: payload + }) +} + +export function deleteRelationType (rtId) { + return axios({ + url: `/v0.1/relation_types/${rtId}`, + method: 'DELETE' + }) +} diff --git a/cmdb-ui/src/api/index.js b/cmdb-ui/src/api/index.js new file mode 100644 index 0000000..a0044ea --- /dev/null +++ b/cmdb-ui/src/api/index.js @@ -0,0 +1,14 @@ +import config from '@/config/defaultSettings' + +const api = { + Login: config.useSSO ? '/api/sso/login' : '/login', + Logout: config.useSSO ? '/api/sso/logout' : '/logout', + ForgePassword: '/auth/forge-password', + Register: '/auth/register', + twoStepCode: '/auth/2step-code', + SendSms: '/account/sms', + SendSmsErr: '/account/sms_err', + // get my info + UserInfo: '/v1/acl/users/info' +} +export default api diff --git a/cmdb-ui/src/api/login.js b/cmdb-ui/src/api/login.js new file mode 100644 index 0000000..215950b --- /dev/null +++ b/cmdb-ui/src/api/login.js @@ -0,0 +1,66 @@ +import api from './index' +import { axios } from '@/utils/request' +import config from '@/config/defaultSettings' +/** + * login func + * parameter: { + * username: '', + * password: '', + * remember_me: true, + * captcha: '12345' + * } + * @param parameter + * @returns {*} + */ +export function login (parameter) { + return axios({ + url: api.Login, + method: 'post', + data: parameter + }) +} + +export function getSmsCaptcha (parameter) { + return axios({ + url: api.SendSms, + method: 'post', + data: parameter + }) +} + +export function getInfo () { + return axios({ + url: api.UserInfo, + method: 'get', + headers: { + 'Content-Type': 'application/json;charset=UTF-8' + } + }) +} + +export function logout () { + console.log('logout........') + if (config.useSSO) { + window.location.replace(api.Logout) + } else { + return axios({ + url: api.Logout, + method: 'post', + headers: { + 'Content-Type': 'application/json;charset=UTF-8' + } + }) + } +} + +/** + * get user 2step code open? + * @param parameter {*} + */ +export function get2step (parameter) { + return axios({ + url: api.twoStepCode, + method: 'post', + data: parameter + }) +} diff --git a/cmdb-ui/src/api/manage.js b/cmdb-ui/src/api/manage.js new file mode 100644 index 0000000..1c36a1e --- /dev/null +++ b/cmdb-ui/src/api/manage.js @@ -0,0 +1,62 @@ +import { axios } from '@/utils/request' + +const api = { + user: '/user', + role: '/role', + service: '/service', + permission: '/permission', + permissionNoPager: '/permission/no-pager', + orgTree: '/org/tree' +} + +export default api + +export function getUserList (parameter) { + return axios({ + url: api.user, + method: 'get', + params: parameter + }) +} + +export function getRoleList (parameter) { + return axios({ + url: api.role, + method: 'get', + params: parameter + }) +} + +export function getServiceList (parameter) { + return axios({ + url: api.service, + method: 'get', + params: parameter + }) +} + +export function getPermissions (parameter) { + return axios({ + url: api.permissionNoPager, + method: 'get', + params: parameter + }) +} + +export function getOrgTree (parameter) { + return axios({ + url: api.orgTree, + method: 'get', + params: parameter + }) +} + +// id == 0 add post +// id != 0 update put +export function saveService (parameter) { + return axios({ + url: api.service, + method: parameter.id === 0 ? 'post' : 'put', + data: parameter + }) +} diff --git a/cmdb-ui/src/assets/background.svg b/cmdb-ui/src/assets/background.svg new file mode 100644 index 0000000..89c2597 --- /dev/null +++ b/cmdb-ui/src/assets/background.svg @@ -0,0 +1,69 @@ + + + + Group 21 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/cmdb-ui/src/assets/icons/bx-analyse.svg b/cmdb-ui/src/assets/icons/bx-analyse.svg new file mode 100644 index 0000000..b02a8d6 --- /dev/null +++ b/cmdb-ui/src/assets/icons/bx-analyse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cmdb-ui/src/assets/logo.png b/cmdb-ui/src/assets/logo.png new file mode 100644 index 0000000..e887375 Binary files /dev/null and b/cmdb-ui/src/assets/logo.png differ diff --git a/cmdb-ui/src/assets/logo.svg b/cmdb-ui/src/assets/logo.svg new file mode 100644 index 0000000..14b8e08 --- /dev/null +++ b/cmdb-ui/src/assets/logo.svg @@ -0,0 +1,29 @@ + + + + Vue + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/cmdb-ui/src/components/ArticleListContent/ArticleListContent.vue b/cmdb-ui/src/components/ArticleListContent/ArticleListContent.vue new file mode 100644 index 0000000..8f39978 --- /dev/null +++ b/cmdb-ui/src/components/ArticleListContent/ArticleListContent.vue @@ -0,0 +1,89 @@ + + + + + diff --git a/cmdb-ui/src/components/ArticleListContent/index.js b/cmdb-ui/src/components/ArticleListContent/index.js new file mode 100644 index 0000000..37d35c7 --- /dev/null +++ b/cmdb-ui/src/components/ArticleListContent/index.js @@ -0,0 +1,3 @@ +import ArticleListContent from './ArticleListContent' + +export default ArticleListContent diff --git a/cmdb-ui/src/components/AvatarList/Item.vue b/cmdb-ui/src/components/AvatarList/Item.vue new file mode 100644 index 0000000..26e149e --- /dev/null +++ b/cmdb-ui/src/components/AvatarList/Item.vue @@ -0,0 +1,46 @@ + + + diff --git a/cmdb-ui/src/components/AvatarList/List.vue b/cmdb-ui/src/components/AvatarList/List.vue new file mode 100644 index 0000000..446ceeb --- /dev/null +++ b/cmdb-ui/src/components/AvatarList/List.vue @@ -0,0 +1,99 @@ + + + diff --git a/cmdb-ui/src/components/AvatarList/index.js b/cmdb-ui/src/components/AvatarList/index.js new file mode 100644 index 0000000..dd6bb8b --- /dev/null +++ b/cmdb-ui/src/components/AvatarList/index.js @@ -0,0 +1,4 @@ +import AvatarList from './List' +import './index.less' + +export default AvatarList diff --git a/cmdb-ui/src/components/AvatarList/index.less b/cmdb-ui/src/components/AvatarList/index.less new file mode 100644 index 0000000..9ce073f --- /dev/null +++ b/cmdb-ui/src/components/AvatarList/index.less @@ -0,0 +1,60 @@ +@import "../index"; + +@avatar-list-prefix-cls: ~"@{ant-pro-prefix}-avatar-list"; +@avatar-list-item-prefix-cls: ~"@{ant-pro-prefix}-avatar-list-item"; + +.@{avatar-list-prefix-cls} { + display: inline-block; + + ul { + list-style: none; + display: inline-block; + padding: 0; + margin: 0 0 0 8px; + font-size: 0; + } +} + +.@{avatar-list-item-prefix-cls} { + display: inline-block; + font-size: @font-size-base; + margin-left: -8px; + width: @avatar-size-base; + height: @avatar-size-base; + + :global { + .ant-avatar { + border: 1px solid #fff; + cursor: pointer; + } + } + + &.large { + width: @avatar-size-lg; + height: @avatar-size-lg; + } + + &.small { + width: @avatar-size-sm; + height: @avatar-size-sm; + } + + &.mini { + width: 20px; + height: 20px; + + :global { + .ant-avatar { + width: 20px; + height: 20px; + line-height: 20px; + + .ant-avatar-string { + font-size: 12px; + line-height: 18px; + } + } + } + } +} + diff --git a/cmdb-ui/src/components/AvatarList/index.md b/cmdb-ui/src/components/AvatarList/index.md new file mode 100644 index 0000000..dc9c092 --- /dev/null +++ b/cmdb-ui/src/components/AvatarList/index.md @@ -0,0 +1,64 @@ +# AvatarList 用户头像列表 + + +一组用户头像，常用在项目/团队成员列表。可通过设置 `size` 属性来指定头像大小。 + + + +引用方式： + +```javascript +import AvatarList from '@/components/AvatarList' +const AvatarListItem = AvatarList.AvatarItem + +export default { + components: { + AvatarList, + AvatarListItem + } +} +``` + + + +## 代码演示 [demo](https://pro.loacg.com/test/home) + +```html + + + + + +``` +或 +```html + + + + + + + + + +``` + + + +## API + +### AvatarList + +| 参数 | 说明 | 类型 | 默认值 | +| ---------------- | -------- | ---------------------------------- | --------- | +| size | 头像大小 | `large`、`small` 、`mini`, `default` | `default` | +| maxLength | 要显示的最大项目 | number | - | +| excessItemsStyle | 多余的项目风格 | CSSProperties | - | + +### AvatarList.Item + +| 参数 | 说明 | 类型 | 默认值 | +| ---- | ------ | --------- | --- | +| tips | 头像展示文案 | string | - | +| src | 头像图片连接 | string | - | + diff --git a/cmdb-ui/src/components/Charts/Bar.vue b/cmdb-ui/src/components/Charts/Bar.vue new file mode 100644 index 0000000..4482845 --- /dev/null +++ b/cmdb-ui/src/components/Charts/Bar.vue @@ -0,0 +1,62 @@ + + + diff --git a/cmdb-ui/src/components/Charts/ChartCard.vue b/cmdb-ui/src/components/Charts/ChartCard.vue new file mode 100644 index 0000000..fc1f425 --- /dev/null +++ b/cmdb-ui/src/components/Charts/ChartCard.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/cmdb-ui/src/components/Charts/Liquid.vue b/cmdb-ui/src/components/Charts/Liquid.vue new file mode 100644 index 0000000..4019fb1 --- /dev/null +++ b/cmdb-ui/src/components/Charts/Liquid.vue @@ -0,0 +1,67 @@ + + + + + diff --git a/cmdb-ui/src/components/Charts/MiniArea.vue b/cmdb-ui/src/components/Charts/MiniArea.vue new file mode 100644 index 0000000..58fe92c --- /dev/null +++ b/cmdb-ui/src/components/Charts/MiniArea.vue @@ -0,0 +1,56 @@ + + + + + diff --git a/cmdb-ui/src/components/Charts/MiniBar.vue b/cmdb-ui/src/components/Charts/MiniBar.vue new file mode 100644 index 0000000..beac404 --- /dev/null +++ b/cmdb-ui/src/components/Charts/MiniBar.vue @@ -0,0 +1,57 @@ + + + + + diff --git a/cmdb-ui/src/components/Charts/MiniProgress.vue b/cmdb-ui/src/components/Charts/MiniProgress.vue new file mode 100644 index 0000000..e691363 --- /dev/null +++ b/cmdb-ui/src/components/Charts/MiniProgress.vue @@ -0,0 +1,75 @@ + + + + + diff --git a/cmdb-ui/src/components/Charts/MiniSmoothArea.vue b/cmdb-ui/src/components/Charts/MiniSmoothArea.vue new file mode 100644 index 0000000..e5455c2 --- /dev/null +++ b/cmdb-ui/src/components/Charts/MiniSmoothArea.vue @@ -0,0 +1,40 @@ + + + + + diff --git a/cmdb-ui/src/components/Charts/Radar.vue b/cmdb-ui/src/components/Charts/Radar.vue new file mode 100644 index 0000000..5ee88ad --- /dev/null +++ b/cmdb-ui/src/components/Charts/Radar.vue @@ -0,0 +1,68 @@ + + + + + diff --git a/cmdb-ui/src/components/Charts/RankList.vue b/cmdb-ui/src/components/Charts/RankList.vue new file mode 100644 index 0000000..afb56a1 --- /dev/null +++ b/cmdb-ui/src/components/Charts/RankList.vue @@ -0,0 +1,77 @@ + + + + + diff --git a/cmdb-ui/src/components/Charts/TagCloud.vue b/cmdb-ui/src/components/Charts/TagCloud.vue new file mode 100644 index 0000000..74d1b3f --- /dev/null +++ b/cmdb-ui/src/components/Charts/TagCloud.vue @@ -0,0 +1,113 @@ + + + diff --git a/cmdb-ui/src/components/Charts/TransferBar.vue b/cmdb-ui/src/components/Charts/TransferBar.vue new file mode 100644 index 0000000..7f96f0b --- /dev/null +++ b/cmdb-ui/src/components/Charts/TransferBar.vue @@ -0,0 +1,64 @@ + + + diff --git a/cmdb-ui/src/components/Charts/Trend.vue b/cmdb-ui/src/components/Charts/Trend.vue new file mode 100644 index 0000000..2dce37e --- /dev/null +++ b/cmdb-ui/src/components/Charts/Trend.vue @@ -0,0 +1,82 @@ + + + + + diff --git a/cmdb-ui/src/components/Charts/chart.less b/cmdb-ui/src/components/Charts/chart.less new file mode 100644 index 0000000..e04fa09 --- /dev/null +++ b/cmdb-ui/src/components/Charts/chart.less @@ -0,0 +1,13 @@ +.antv-chart-mini { + position: relative; + width: 100%; + + .chart-wrapper { + position: absolute; + bottom: -28px; + width: 100%; + +/* margin: 0 -5px; + overflow: hidden;*/ + } +} \ No newline at end of file diff --git a/cmdb-ui/src/components/Charts/smooth.area.less b/cmdb-ui/src/components/Charts/smooth.area.less new file mode 100644 index 0000000..eabdb75 --- /dev/null +++ b/cmdb-ui/src/components/Charts/smooth.area.less @@ -0,0 +1,14 @@ +@import "../index"; + +@smoothArea-prefix-cls: ~"@{ant-pro-prefix}-smooth-area"; + +.@{smoothArea-prefix-cls} { + position: relative; + width: 100%; + + .chart-wrapper { + position: absolute; + bottom: -28px; + width: 100%; + } +} \ No newline at end of file diff --git a/cmdb-ui/src/components/CountDown/CountDown.vue b/cmdb-ui/src/components/CountDown/CountDown.vue new file mode 100644 index 0000000..575dd4a --- /dev/null +++ b/cmdb-ui/src/components/CountDown/CountDown.vue @@ -0,0 +1,102 @@ + + + + + diff --git a/cmdb-ui/src/components/CountDown/index.js b/cmdb-ui/src/components/CountDown/index.js new file mode 100644 index 0000000..35e954f --- /dev/null +++ b/cmdb-ui/src/components/CountDown/index.js @@ -0,0 +1,3 @@ +import CountDown from './CountDown' + +export default CountDown diff --git a/cmdb-ui/src/components/CountDown/index.md b/cmdb-ui/src/components/CountDown/index.md new file mode 100644 index 0000000..fd46809 --- /dev/null +++ b/cmdb-ui/src/components/CountDown/index.md @@ -0,0 +1,34 @@ +# CountDown 倒计时 + +倒计时组件。 + + + +引用方式： + +```javascript +import CountDown from '@/components/CountDown/CountDown' + +export default { + components: { + CountDown + } +} +``` + + + +## 代码演示 [demo](https://pro.loacg.com/test/home) + +```html + +``` + + + +## API + +| 参数 | 说明 | 类型 | 默认值 | +|----------|------------------------------------------|-------------|-------| +| target | 目标时间 | Date | - | +| onEnd | 倒计时结束回调 | funtion | -| diff --git a/cmdb-ui/src/components/DescriptionList/DescriptionList.vue b/cmdb-ui/src/components/DescriptionList/DescriptionList.vue new file mode 100644 index 0000000..f504477 --- /dev/null +++ b/cmdb-ui/src/components/DescriptionList/DescriptionList.vue @@ -0,0 +1,153 @@ + + + + + diff --git a/cmdb-ui/src/components/DescriptionList/index.js b/cmdb-ui/src/components/DescriptionList/index.js new file mode 100644 index 0000000..7aed83d --- /dev/null +++ b/cmdb-ui/src/components/DescriptionList/index.js @@ -0,0 +1,2 @@ +import DescriptionList from './DescriptionList' +export default DescriptionList diff --git a/cmdb-ui/src/components/Editor/QuillEditor.vue b/cmdb-ui/src/components/Editor/QuillEditor.vue new file mode 100644 index 0000000..731701c --- /dev/null +++ b/cmdb-ui/src/components/Editor/QuillEditor.vue @@ -0,0 +1,82 @@ + + + + + diff --git a/cmdb-ui/src/components/Editor/WangEditor.vue b/cmdb-ui/src/components/Editor/WangEditor.vue new file mode 100644 index 0000000..d9c71c7 --- /dev/null +++ b/cmdb-ui/src/components/Editor/WangEditor.vue @@ -0,0 +1,57 @@ + + + + + diff --git a/cmdb-ui/src/components/Ellipsis/Ellipsis.vue b/cmdb-ui/src/components/Ellipsis/Ellipsis.vue new file mode 100644 index 0000000..5d59200 --- /dev/null +++ b/cmdb-ui/src/components/Ellipsis/Ellipsis.vue @@ -0,0 +1,64 @@ + diff --git a/cmdb-ui/src/components/Ellipsis/index.js b/cmdb-ui/src/components/Ellipsis/index.js new file mode 100644 index 0000000..91e3ff4 --- /dev/null +++ b/cmdb-ui/src/components/Ellipsis/index.js @@ -0,0 +1,3 @@ +import Ellipsis from './Ellipsis' + +export default Ellipsis diff --git a/cmdb-ui/src/components/Ellipsis/index.md b/cmdb-ui/src/components/Ellipsis/index.md new file mode 100644 index 0000000..f528ac7 --- /dev/null +++ b/cmdb-ui/src/components/Ellipsis/index.md @@ -0,0 +1,38 @@ +# Ellipsis 文本自动省略号 + +文本过长自动处理省略号，支持按照文本长度和最大行数两种方式截取。 + + + +引用方式： + +```javascript +import Ellipsis from '@/components/Ellipsis' + +export default { + components: { + Ellipsis + } +} +``` + + + +## 代码演示 [demo](https://pro.loacg.com/test/home) + +```html + + There were injuries alleged in three cases in 2015, and a + fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall. + +``` + + + +## API + + +参数 | 说明 | 类型 | 默认值 +----|------|-----|------ +tooltip | 移动到文本展示完整内容的提示 | boolean | - +length | 在按照长度截取下的文本最大字符数，超过则截取省略 | number | - \ No newline at end of file diff --git a/cmdb-ui/src/components/Exception/ExceptionPage.vue b/cmdb-ui/src/components/Exception/ExceptionPage.vue new file mode 100644 index 0000000..cc10801 --- /dev/null +++ b/cmdb-ui/src/components/Exception/ExceptionPage.vue @@ -0,0 +1,130 @@ + + + + diff --git a/cmdb-ui/src/components/Exception/index.js b/cmdb-ui/src/components/Exception/index.js new file mode 100644 index 0000000..dda91be --- /dev/null +++ b/cmdb-ui/src/components/Exception/index.js @@ -0,0 +1,2 @@ +import ExceptionPage from './ExceptionPage.vue' +export default ExceptionPage diff --git a/cmdb-ui/src/components/Exception/type.js b/cmdb-ui/src/components/Exception/type.js new file mode 100644 index 0000000..8158f0f --- /dev/null +++ b/cmdb-ui/src/components/Exception/type.js @@ -0,0 +1,19 @@ +const types = { + 403: { + img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg', + title: '403', + desc: '抱歉，你无权访问该页面' + }, + 404: { + img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg', + title: '404', + desc: '抱歉，你访问的页面不存在或仍在开发中' + }, + 500: { + img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg', + title: '500', + desc: '抱歉，服务器出错了' + } +} + +export default types diff --git a/cmdb-ui/src/components/FooterToolbar/FooterToolBar.vue b/cmdb-ui/src/components/FooterToolbar/FooterToolBar.vue new file mode 100644 index 0000000..f4056dc --- /dev/null +++ b/cmdb-ui/src/components/FooterToolbar/FooterToolBar.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/cmdb-ui/src/components/FooterToolbar/index.js b/cmdb-ui/src/components/FooterToolbar/index.js new file mode 100644 index 0000000..a0bf145 --- /dev/null +++ b/cmdb-ui/src/components/FooterToolbar/index.js @@ -0,0 +1,4 @@ +import FooterToolBar from './FooterToolBar' +import './index.less' + +export default FooterToolBar diff --git a/cmdb-ui/src/components/FooterToolbar/index.less b/cmdb-ui/src/components/FooterToolbar/index.less new file mode 100644 index 0000000..f56273f --- /dev/null +++ b/cmdb-ui/src/components/FooterToolbar/index.less @@ -0,0 +1,23 @@ +@import "../index"; + +@footer-toolbar-prefix-cls: ~"@{ant-pro-prefix}-footer-toolbar"; + +.@{footer-toolbar-prefix-cls} { + position: fixed; + width: 100%; + bottom: 0; + right: 0; + height: 56px; + line-height: 56px; + box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03); + background: #fff; + border-top: 1px solid #e8e8e8; + padding: 0 24px; + z-index: 9; + + &:after { + content: ""; + display: block; + clear: both; + } +} \ No newline at end of file diff --git a/cmdb-ui/src/components/FooterToolbar/index.md b/cmdb-ui/src/components/FooterToolbar/index.md new file mode 100644 index 0000000..c1aec2c --- /dev/null +++ b/cmdb-ui/src/components/FooterToolbar/index.md @@ -0,0 +1,48 @@ +# FooterToolbar 底部工具栏 + +固定在底部的工具栏。 + + + +## 何时使用 + +固定在内容区域的底部，不随滚动条移动，常用于长页面的数据搜集和提交工作。 + + + +引用方式： + +```javascript +import FooterToolBar from '@/components/FooterToolbar' + +export default { + components: { + FooterToolBar + } +} +``` + + + +## 代码演示 + +```html + + 提交 + +``` +或 +```html + + 提交 + +``` + + +## API + +参数 | 说明 | 类型 | 默认值 +----|------|-----|------ +children (slot) | 工具栏内容，向右对齐 | - | - +extra | 额外信息，向左对齐 | String, Object | - + diff --git a/cmdb-ui/src/components/GlobalFooter/GlobalFooter.vue b/cmdb-ui/src/components/GlobalFooter/GlobalFooter.vue new file mode 100644 index 0000000..717a87a --- /dev/null +++ b/cmdb-ui/src/components/GlobalFooter/GlobalFooter.vue @@ -0,0 +1,42 @@ + + + + + diff --git a/cmdb-ui/src/components/GlobalFooter/index.js b/cmdb-ui/src/components/GlobalFooter/index.js new file mode 100644 index 0000000..832e0bd --- /dev/null +++ b/cmdb-ui/src/components/GlobalFooter/index.js @@ -0,0 +1,2 @@ +import GlobalFooter from './GlobalFooter' +export default GlobalFooter diff --git a/cmdb-ui/src/components/GlobalHeader/GlobalHeader.vue b/cmdb-ui/src/components/GlobalHeader/GlobalHeader.vue new file mode 100644 index 0000000..e865c0a --- /dev/null +++ b/cmdb-ui/src/components/GlobalHeader/GlobalHeader.vue @@ -0,0 +1,129 @@ + + + + + diff --git a/cmdb-ui/src/components/GlobalHeader/index.js b/cmdb-ui/src/components/GlobalHeader/index.js new file mode 100644 index 0000000..0807c87 --- /dev/null +++ b/cmdb-ui/src/components/GlobalHeader/index.js @@ -0,0 +1,2 @@ +import GlobalHeader from './GlobalHeader' +export default GlobalHeader diff --git a/cmdb-ui/src/components/IconSelector/IconSelector.vue b/cmdb-ui/src/components/IconSelector/IconSelector.vue new file mode 100644 index 0000000..810d297 --- /dev/null +++ b/cmdb-ui/src/components/IconSelector/IconSelector.vue @@ -0,0 +1,86 @@ + + + + + diff --git a/cmdb-ui/src/components/IconSelector/README.md b/cmdb-ui/src/components/IconSelector/README.md new file mode 100644 index 0000000..503095d --- /dev/null +++ b/cmdb-ui/src/components/IconSelector/README.md @@ -0,0 +1,48 @@ +IconSelector +==== + +> 图标选择组件，常用于为某一个数据设定一个图标时使用 +> eg: 设定菜单列表时，为每个菜单设定一个图标 + +该组件由 [@Saraka](https://github.com/saraka-tsukai) 封装 + + + +### 使用方式 + +```vue + + + +``` + + + +### 事件 + + +| 名称 | 说明 | 类型 | 默认值 | +| ------ | -------------------------- | ------ | ------ | +| change | 当改变了 `icon` 选中项触发 | String | - | diff --git a/cmdb-ui/src/components/IconSelector/icons.js b/cmdb-ui/src/components/IconSelector/icons.js new file mode 100644 index 0000000..920f464 --- /dev/null +++ b/cmdb-ui/src/components/IconSelector/icons.js @@ -0,0 +1,36 @@ +/** + * 增加新的图标时，请遵循以下数据结构 + * Adding new icon please follow the data structure below + */ +export default [ + { + key: 'directional', + title: '方向性图标', + icons: ['step-backward', 'step-forward', 'fast-backward', 'fast-forward', 'shrink', 'arrows-alt', 'down', 'up', 'left', 'right', 'caret-up', 'caret-down', 'caret-left', 'caret-right', 'up-circle', 'down-circle', 'left-circle', 'right-circle', 'double-right', 'double-left', 'vertical-left', 'vertical-right', 'forward', 'backward', 'rollback', 'enter', 'retweet', 'swap', 'swap-left', 'swap-right', 'arrow-up', 'arrow-down', 'arrow-left', 'arrow-right', 'play-circle', 'up-square', 'down-square', 'left-square', 'right-square', 'login', 'logout', 'menu-fold', 'menu-unfold', 'border-bottom', 'border-horizontal', 'border-inner', 'border-left', 'border-right', 'border-top', 'border-verticle', 'pic-center', 'pic-left', 'pic-right', 'radius-bottomleft', 'radius-bottomright', 'radius-upleft', 'fullscreen', 'fullscreen-exit'] + }, + { + key: 'suggested', + title: '提示建议性图标', + icons: ['question', 'question-circle', 'plus', 'plus-circle', 'pause', 'pause-circle', 'minus', 'minus-circle', 'plus-square', 'minus-square', 'info', 'info-circle', 'exclamation', 'exclamation-circle', 'close', 'close-circle', 'close-square', 'check', 'check-circle', 'check-square', 'clock-circle', 'warning', 'issues-close', 'stop'] + }, + { + key: 'editor', + title: '编辑类图标', + icons: ['edit', 'form', 'copy', 'scissor', 'delete', 'snippets', 'diff', 'highlight', 'align-center', 'align-left', 'align-right', 'bg-colors', 'bold', 'italic', 'underline', 'strikethrough', 'redo', 'undo', 'zoom-in', 'zoom-out', 'font-colors', 'font-size', 'line-height', 'colum-height', 'dash', 'small-dash', 'sort-ascending', 'sort-descending', 'drag', 'ordered-list', 'radius-setting'] + }, + { + key: 'data', + title: '数据类图标', + icons: ['area-chart', 'pie-chart', 'bar-chart', 'dot-chart', 'line-chart', 'radar-chart', 'heat-map', 'fall', 'rise', 'stock', 'box-plot', 'fund', 'sliders'] + }, + { + key: 'brand_logo', + title: '网站通用图标', + icons: ['lock', 'unlock', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'copy', 'credit-card', 'delete', 'desktop', 'download', 'ellipsis', 'file', 'file-text', 'file-unknown', 'file-pdf', 'file-word', 'file-excel', 'file-jpg', 'file-ppt', 'file-markdown', 'file-add', 'folder', 'folder-open', 'folder-add', 'hdd', 'frown', 'meh', 'smile', 'inbox', 'laptop', 'appstore', 'link', 'mail', 'mobile', 'notification', 'paper-clip', 'picture', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'tablet', 'tag', 'tags', 'to-top', 'upload', 'user', 'video-camera', 'home', 'loading', 'loading-3-quarters', 'cloud-upload', 'star', 'heart', 'environment', 'eye', 'camera', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customer-service', 'qrcode', 'scan', 'like', 'dislike', 'message', 'pay-circle', 'calculator', 'pushpin', 'bulb', 'select', 'switcher', 'rocket', 'bell', 'disconnect', 'database', 'compass', 'barcode', 'hourglass', 'key', 'flag', 'layout', 'printer', 'sound', 'usb', 'skin', 'tool', 'sync', 'wifi', 'car', 'schedule', 'user-add', 'user-delete', 'usergroup-add', 'usergroup-delete', 'man', 'woman', 'shop', 'gift', 'idcard', 'medicine-box', 'red-envelope', 'coffee', 'copyright', 'trademark', 'safety', 'wallet', 'bank', 'trophy', 'contacts', 'global', 'shake', 'api', 'fork', 'dashboard', 'table', 'profile', 'alert', 'audit', 'branches', 'build', 'border', 'crown', 'experiment', 'fire', 'money-collect', 'property-safety', 'read', 'reconciliation', 'rest', 'security-scan', 'insurance', 'interation', 'safety-certificate', 'project', 'thunderbolt', 'block', 'cluster', 'deployment-unit', 'dollar', 'euro', 'pound', 'file-done', 'file-exclamation', 'file-protect', 'file-search', 'file-sync', 'gateway', 'gold', 'robot', 'shopping'] + }, + { + key: 'application', + title: '品牌和标识', + icons: ['android', 'apple', 'windows', 'ie', 'chrome', 'github', 'aliwangwang', 'dingding', 'weibo-square', 'weibo-circle', 'taobao-circle', 'html5', 'weibo', 'twitter', 'wechat', 'youtube', 'alipay-circle', 'taobao', 'skype', 'qq', 'medium-workmark', 'gitlab', 'medium', 'linkedin', 'google-plus', 'dropbox', 'facebook', 'codepen', 'code-sandbox', 'amazon', 'google', 'codepen-circle', 'alipay', 'ant-design', 'aliyun', 'zhihu', 'slack', 'slack-square', 'behance', 'behance-square', 'dribbble', 'dribbble-square', 'instagram', 'yuque', 'alibaba', 'yahoo'] + } +] diff --git a/cmdb-ui/src/components/IconSelector/index.js b/cmdb-ui/src/components/IconSelector/index.js new file mode 100644 index 0000000..2d27d70 --- /dev/null +++ b/cmdb-ui/src/components/IconSelector/index.js @@ -0,0 +1,2 @@ +import IconSelector from './IconSelector' +export default IconSelector diff --git a/cmdb-ui/src/components/Menu/SideMenu.vue b/cmdb-ui/src/components/Menu/SideMenu.vue new file mode 100644 index 0000000..1616d3b --- /dev/null +++ b/cmdb-ui/src/components/Menu/SideMenu.vue @@ -0,0 +1,63 @@ + + + diff --git a/cmdb-ui/src/components/Menu/index.js b/cmdb-ui/src/components/Menu/index.js new file mode 100644 index 0000000..4348509 --- /dev/null +++ b/cmdb-ui/src/components/Menu/index.js @@ -0,0 +1,2 @@ +import SMenu from './menu' +export default SMenu diff --git a/cmdb-ui/src/components/Menu/menu.js b/cmdb-ui/src/components/Menu/menu.js new file mode 100644 index 0000000..6d959cb --- /dev/null +++ b/cmdb-ui/src/components/Menu/menu.js @@ -0,0 +1,184 @@ +import Menu from 'ant-design-vue/es/menu' +import Icon from 'ant-design-vue/es/icon' + +const { Item, SubMenu } = Menu + +export default { + name: 'SMenu', + props: { + menu: { + type: Array, + required: true + }, + theme: { + type: String, + required: false, + default: 'dark' + }, + mode: { + type: String, + required: false, + default: 'inline' + }, + collapsed: { + type: Boolean, + required: false, + default: false + } + }, + data () { + return { + openKeys: [], + selectedKeys: [], + cachedOpenKeys: [] + } + }, + computed: { + rootSubmenuKeys: vm => { + const keys = [] + vm.menu.forEach(item => keys.push(item.path)) + return keys + } + }, + created () { + + }, + mounted () { + this.updateMenu() + }, + watch: { + collapsed (val) { + if (val) { + this.cachedOpenKeys = this.openKeys.concat() + this.openKeys = [] + } else { + this.openKeys = this.cachedOpenKeys + } + }, + $route: function () { + this.updateMenu() + } + + }, + methods: { + // select menu item + onOpenChange (openKeys) { + // 在水平模式下时执行，并且不再执行后续 + if (this.mode === 'horizontal') { + this.openKeys = openKeys + return + } + // 非水平模式时 + const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key)) + if (!this.rootSubmenuKeys.includes(latestOpenKey)) { + this.openKeys = openKeys + } else { + this.openKeys = latestOpenKey ? [latestOpenKey] : [] + } + }, + updateMenu () { + const routes = this.$route.matched.concat() + + const { hidden } = this.$route.meta + if (routes.length >= 3 && hidden) { + routes.pop() + this.selectedKeys = [routes[routes.length - 1].path] + } else { + this.selectedKeys = [routes.pop().path] + } + const openKeys = [] + if (this.mode === 'inline') { + routes.forEach(item => { + openKeys.push(item.path) + }) + } + + this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys) + }, + // render + renderItem (menu) { + if (!menu.hidden) { + return menu.children && !menu.hideChildrenInMenu ? this.renderSubMenu(menu) : this.renderMenuItem(menu) + } + return null + }, + renderMenuItem (menu) { + const target = menu.meta.target || null + const tag = target && 'a' || 'router-link' + const props = { to: { name: menu.name } } + const attrs = { href: menu.path, target: menu.meta.target } + + if (menu.children && menu.hideChildrenInMenu) { + // 把有子菜单的 并且 父菜单是要隐藏子菜单的 + // 都给子菜单增加一个 hidden 属性 + // 用来给刷新页面时， selectedKeys 做控制用 + menu.children.forEach(item => { + item.meta = Object.assign(item.meta, { hidden: true }) + }) + } + + return ( + + + {this.renderIcon(menu.meta.icon)} + {menu.meta.title} + + + ) + }, + renderSubMenu (menu) { + const itemArr = [] + if (!menu.hideChildrenInMenu) { + menu.children.forEach(item => itemArr.push(this.renderItem(item))) + } + return ( + + + {this.renderIcon(menu.meta.icon)} + {menu.meta.title} + + {itemArr} + + ) + }, + renderIcon (icon) { + if (icon === 'none' || icon === undefined) { + return null + } + const props = {} + typeof (icon) === 'object' ? props.component = icon : props.type = icon + return ( + + ) + } + }, + + render () { + const { mode, theme, menu } = this + const props = { + mode: mode, + theme: theme, + openKeys: this.openKeys + } + const on = { + select: obj => { + this.selectedKeys = obj.selectedKeys + this.$emit('select', obj) + }, + openChange: this.onOpenChange + } + + const menuTree = menu.map(item => { + if (item.hidden) { + return null + } + return this.renderItem(item) + }) + // {...{ props, on: on }} + return ( + + {menuTree} + + ) + } +} diff --git a/cmdb-ui/src/components/MultiTab/MultiTab.vue b/cmdb-ui/src/components/MultiTab/MultiTab.vue new file mode 100644 index 0000000..9add79e --- /dev/null +++ b/cmdb-ui/src/components/MultiTab/MultiTab.vue @@ -0,0 +1,173 @@ + + + diff --git a/cmdb-ui/src/components/MultiTab/index.js b/cmdb-ui/src/components/MultiTab/index.js new file mode 100644 index 0000000..ca2a216 --- /dev/null +++ b/cmdb-ui/src/components/MultiTab/index.js @@ -0,0 +1,4 @@ +import MultiTab from './MultiTab' +import './index.less' + +export default MultiTab diff --git a/cmdb-ui/src/components/MultiTab/index.less b/cmdb-ui/src/components/MultiTab/index.less new file mode 100644 index 0000000..773e3af --- /dev/null +++ b/cmdb-ui/src/components/MultiTab/index.less @@ -0,0 +1,25 @@ +@import '../index'; + +@multi-tab-prefix-cls: ~"@{ant-pro-prefix}-multi-tab"; +@multi-tab-wrapper-prefix-cls: ~"@{ant-pro-prefix}-multi-tab-wrapper"; + +/* +.topmenu .@{multi-tab-prefix-cls} { + max-width: 1200px; + margin: -23px auto 24px auto; +} +*/ +.@{multi-tab-prefix-cls} { + margin: -23px -24px 24px -24px; + background: #fff; +} + +.topmenu .@{multi-tab-wrapper-prefix-cls} { + max-width: 1200px; + margin: 0 auto; +} + +.topmenu.content-width-Fluid .@{multi-tab-wrapper-prefix-cls} { + max-width: 100%; + margin: 0 auto; +} diff --git a/cmdb-ui/src/components/NoticeIcon/NoticeIcon.vue b/cmdb-ui/src/components/NoticeIcon/NoticeIcon.vue new file mode 100644 index 0000000..f484ce0 --- /dev/null +++ b/cmdb-ui/src/components/NoticeIcon/NoticeIcon.vue @@ -0,0 +1,90 @@ + + + + + + diff --git a/cmdb-ui/src/components/NoticeIcon/index.js b/cmdb-ui/src/components/NoticeIcon/index.js new file mode 100644 index 0000000..659b9ec --- /dev/null +++ b/cmdb-ui/src/components/NoticeIcon/index.js @@ -0,0 +1,2 @@ +import NoticeIcon from './NoticeIcon' +export default NoticeIcon diff --git a/cmdb-ui/src/components/NumberInfo/NumberInfo.vue b/cmdb-ui/src/components/NumberInfo/NumberInfo.vue new file mode 100644 index 0000000..bdde3e0 --- /dev/null +++ b/cmdb-ui/src/components/NumberInfo/NumberInfo.vue @@ -0,0 +1,54 @@ + + + + + diff --git a/cmdb-ui/src/components/NumberInfo/index.js b/cmdb-ui/src/components/NumberInfo/index.js new file mode 100644 index 0000000..659a2f3 --- /dev/null +++ b/cmdb-ui/src/components/NumberInfo/index.js @@ -0,0 +1,3 @@ +import NumberInfo from './NumberInfo' + +export default NumberInfo diff --git a/cmdb-ui/src/components/NumberInfo/index.less b/cmdb-ui/src/components/NumberInfo/index.less new file mode 100644 index 0000000..719113d --- /dev/null +++ b/cmdb-ui/src/components/NumberInfo/index.less @@ -0,0 +1,55 @@ +@import "../index"; + +@numberInfo-prefix-cls: ~"@{ant-pro-prefix}-number-info"; + +.@{numberInfo-prefix-cls} { + + .ant-pro-number-info-subtitle { + color: @text-color-secondary; + font-size: @font-size-base; + height: 22px; + line-height: 22px; + overflow: hidden; + text-overflow: ellipsis; + word-break: break-all; + white-space: nowrap; + } + + .number-info-value { + margin-top: 4px; + font-size: 0; + overflow: hidden; + text-overflow: ellipsis; + word-break: break-all; + white-space: nowrap; + + & > span { + color: @heading-color; + display: inline-block; + line-height: 32px; + height: 32px; + font-size: 24px; + margin-right: 32px; + } + + .sub-total { + color: @text-color-secondary; + font-size: @font-size-lg; + vertical-align: top; + margin-right: 0; + i { + font-size: 12px; + transform: scale(0.82); + margin-left: 4px; + } + :global { + .anticon-caret-up { + color: @red-6; + } + .anticon-caret-down { + color: @green-6; + } + } + } + } +} \ No newline at end of file diff --git a/cmdb-ui/src/components/NumberInfo/index.md b/cmdb-ui/src/components/NumberInfo/index.md new file mode 100644 index 0000000..147adc4 --- /dev/null +++ b/cmdb-ui/src/components/NumberInfo/index.md @@ -0,0 +1,43 @@ +# NumberInfo 数据文本 + +常用在数据卡片中，用于突出展示某个业务数据。 + + + +引用方式： + +```javascript +import NumberInfo from '@/components/NumberInfo' + +export default { + components: { + NumberInfo + } +} +``` + + + +## 代码演示 [demo](https://pro.loacg.com/test/home) + +```html + +``` + + + +## API + +参数 | 说明 | 类型 | 默认值 +----|------|-----|------ +title | 标题 | ReactNode\|string | - +subTitle | 子标题 | ReactNode\|string | - +total | 总量 | ReactNode\|string | - +subTotal | 子总量 | ReactNode\|string | - +status | 增加状态 | 'up \| down' | - +theme | 状态样式 | string | 'light' +gap | 设置数字和描述之间的间距（像素）| number | 8 diff --git a/cmdb-ui/src/components/PageHeader/PageHeader.vue b/cmdb-ui/src/components/PageHeader/PageHeader.vue new file mode 100644 index 0000000..80e686e --- /dev/null +++ b/cmdb-ui/src/components/PageHeader/PageHeader.vue @@ -0,0 +1,202 @@ + + + + + diff --git a/cmdb-ui/src/components/PageHeader/index.js b/cmdb-ui/src/components/PageHeader/index.js new file mode 100644 index 0000000..ec1078c --- /dev/null +++ b/cmdb-ui/src/components/PageHeader/index.js @@ -0,0 +1,2 @@ +import PageHeader from './PageHeader' +export default PageHeader diff --git a/cmdb-ui/src/components/PageLoading/index.jsx b/cmdb-ui/src/components/PageLoading/index.jsx new file mode 100644 index 0000000..2886844 --- /dev/null +++ b/cmdb-ui/src/components/PageLoading/index.jsx @@ -0,0 +1,10 @@ +import { Spin } from 'ant-design-vue' + +export default { + name: 'PageLoading', + render () { + return (
+ +
) + } +} diff --git a/cmdb-ui/src/components/Result/Result.vue b/cmdb-ui/src/components/Result/Result.vue new file mode 100644 index 0000000..99f7f19 --- /dev/null +++ b/cmdb-ui/src/components/Result/Result.vue @@ -0,0 +1,109 @@ + + + + + diff --git a/cmdb-ui/src/components/Result/index.js b/cmdb-ui/src/components/Result/index.js new file mode 100644 index 0000000..51cb3b2 --- /dev/null +++ b/cmdb-ui/src/components/Result/index.js @@ -0,0 +1,2 @@ +import Result from './Result.vue' +export default Result diff --git a/cmdb-ui/src/components/SettingDrawer/SettingDrawer.vue b/cmdb-ui/src/components/SettingDrawer/SettingDrawer.vue new file mode 100644 index 0000000..52ed726 --- /dev/null +++ b/cmdb-ui/src/components/SettingDrawer/SettingDrawer.vue @@ -0,0 +1,354 @@ + + + + + diff --git a/cmdb-ui/src/components/SettingDrawer/SettingItem.vue b/cmdb-ui/src/components/SettingDrawer/SettingItem.vue new file mode 100644 index 0000000..2b3b553 --- /dev/null +++ b/cmdb-ui/src/components/SettingDrawer/SettingItem.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/cmdb-ui/src/components/SettingDrawer/index.js b/cmdb-ui/src/components/SettingDrawer/index.js new file mode 100644 index 0000000..8260f2d --- /dev/null +++ b/cmdb-ui/src/components/SettingDrawer/index.js @@ -0,0 +1,2 @@ +import SettingDrawer from './SettingDrawer' +export default SettingDrawer diff --git a/cmdb-ui/src/components/SettingDrawer/settingConfig.js b/cmdb-ui/src/components/SettingDrawer/settingConfig.js new file mode 100644 index 0000000..4d9a2b0 --- /dev/null +++ b/cmdb-ui/src/components/SettingDrawer/settingConfig.js @@ -0,0 +1,105 @@ +import { message } from 'ant-design-vue/es' +// import defaultSettings from '../defaultSettings'; +import themeColor from './themeColor.js' + +// let lessNodesAppended + +const colorList = [ + { + key: '薄暮', color: '#F5222D' + }, + { + key: '火山', color: '#FA541C' + }, + { + key: '日暮', color: '#FAAD14' + }, + { + key: '明青', color: '#13C2C2' + }, + { + key: '极光绿', color: '#52C41A' + }, + { + key: '拂晓蓝（默认）', color: '#1890FF' + }, + { + key: '极客蓝', color: '#2F54EB' + }, + { + key: '酱紫', color: '#722ED1' + } +] + +const updateTheme = newPrimaryColor => { + const hideMessage = message.loading('正在切换主题！', 0) + themeColor.changeColor(newPrimaryColor).finally(t => { + hideMessage() + }) +} + +/* +const updateTheme = primaryColor => { + // Don't compile less in production! + /* if (process.env.NODE_ENV === 'production') { + return; + } * / + // Determine if the component is remounted + if (!primaryColor) { + return + } + const hideMessage = message.loading('正在编译主题！', 0) + function buildIt () { + if (!window.less) { + return + } + setTimeout(() => { + window.less + .modifyVars({ + '@primary-color': primaryColor + }) + .then(() => { + hideMessage() + }) + .catch(() => { + message.error('Failed to update theme') + hideMessage() + }) + }, 200) + } + if (!lessNodesAppended) { + // insert less.js and color.less + const lessStyleNode = document.createElement('link') + const lessConfigNode = document.createElement('script') + const lessScriptNode = document.createElement('script') + lessStyleNode.setAttribute('rel', 'stylesheet/less') + lessStyleNode.setAttribute('href', '/color.less') + lessConfigNode.innerHTML = ` + window.less = { + async: true, + env: 'production', + javascriptEnabled: true + }; + ` + lessScriptNode.src = 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js' + lessScriptNode.async = true + lessScriptNode.onload = () => { + buildIt() + lessScriptNode.onload = null + } + document.body.appendChild(lessStyleNode) + document.body.appendChild(lessConfigNode) + document.body.appendChild(lessScriptNode) + lessNodesAppended = true + } else { + buildIt() + } +} +*/ + +const updateColorWeak = colorWeak => { + // document.body.className = colorWeak ? 'colorWeak' : ''; + colorWeak ? document.body.classList.add('colorWeak') : document.body.classList.remove('colorWeak') +} + +export { updateTheme, colorList, updateColorWeak } diff --git a/cmdb-ui/src/components/SettingDrawer/themeColor.js b/cmdb-ui/src/components/SettingDrawer/themeColor.js new file mode 100644 index 0000000..6e7b480 --- /dev/null +++ b/cmdb-ui/src/components/SettingDrawer/themeColor.js @@ -0,0 +1,23 @@ +import client from 'webpack-theme-color-replacer/client' +import generate from '@ant-design/colors/lib/generate' + +export default { + getAntdSerials (color) { + // 淡化（即less的tint） + const lightens = new Array(9).fill().map((t, i) => { + return client.varyColor.lighten(color, i / 10) + }) + // colorPalette变换得到颜色值 + const colorPalettes = generate(color) + return lightens.concat(colorPalettes) + }, + changeColor (newColor) { + var options = { + newColors: this.getAntdSerials(newColor), // new colors array, one-to-one corresponde with `matchColors` + changeUrl (cssUrl) { + return `/${cssUrl}` // while router is not `hash` mode, it needs absolute path + } + } + return client.changer.changeColor(options, Promise) + } +} diff --git a/cmdb-ui/src/components/StandardFormRow/StandardFormRow.vue b/cmdb-ui/src/components/StandardFormRow/StandardFormRow.vue new file mode 100644 index 0000000..a4e261b --- /dev/null +++ b/cmdb-ui/src/components/StandardFormRow/StandardFormRow.vue @@ -0,0 +1,122 @@ + + + + + diff --git a/cmdb-ui/src/components/StandardFormRow/index.js b/cmdb-ui/src/components/StandardFormRow/index.js new file mode 100644 index 0000000..8155cc7 --- /dev/null +++ b/cmdb-ui/src/components/StandardFormRow/index.js @@ -0,0 +1,3 @@ +import StandardFormRow from './StandardFormRow' + +export default StandardFormRow diff --git a/cmdb-ui/src/components/Table/README.md b/cmdb-ui/src/components/Table/README.md new file mode 100644 index 0000000..1d2c9d0 --- /dev/null +++ b/cmdb-ui/src/components/Table/README.md @@ -0,0 +1,341 @@ +Table 重封装组件说明 +==== + + +封装说明 +---- + +> 基础的使用方式与 API 与 [官方版(Table)](https://vuecomponent.github.io/ant-design-vue/components/table-cn/) 本一致，在其基础上，封装了加载数据的方法。 +> +> 你无需在你是用表格的页面进行分页逻辑处理，仅需向 Table 组件传递绑定 `:data="Promise"` 对象即可 + +该 `table` 由 [@Saraka](https://github.com/saraka-tsukai) 完成封装 + + +例子1 +---- +（基础使用） + +```vue + + + + + +``` + + + +例子2 +---- + +（简单的表格，最后一列是各种操作） + +```vue + + + +``` + + + +内置方法 +---- + +通过 `this.$refs.table` 调用 + +`this.$refs.table.refresh(true)` 刷新列表 (用户新增/修改数据后，重载列表数据) + +> 注意：要调用 `refresh(bool)` 需要给表格组件设定 `ref` 值 +> +> `refresh()` 方法可以传一个 `bool` 值，当有传值 或值为 `true` 时，则刷新时会强制刷新到第一页（常用户页面 搜索 按钮进行搜索时，结果从第一页开始分页） + + +内置属性 +---- +> 除去 `a-table` 自带属性外，还而外提供了一些额外属性属性 + + +| 属性 | 说明 | 类型 | 默认值 | +| -------------- | ----------------------------------------------- | ----------------- | ------ | +| alert | 设置是否显示表格信息栏 | [object, boolean] | null | +| showPagination | 显示分页选择器，可传 'auto' \| boolean | [string, boolean] | 'auto' | +| data | 加载数据方法 必须为 `Promise` 对象 **必须绑定** | Promise | - | + + +`alert` 属性对象： + +```javascript +alert: { + show: Boolean, + clear: [Function, Boolean] +} +``` + +注意事项 +---- + +> 你可能需要为了与后端提供的接口返回结果一致而去修改以下代码： +> (需要注意的是，这里的修改是全局性的，意味着整个项目所有使用该 table 组件都需要遵守这个返回结果定义的字段。) +> +> 文档中的结构有可能由于组件 bug 进行修正而改动。实际修改请以当时最新版本为准 + +修改 `@/components/table/index.js` 第 156 行起 + + + +```javascript +result.then(r => { + this.localPagination = this.showPagination && Object.assign({}, this.localPagination, { + current: r.pageNo, // 返回结果中的当前分页数 + total: r.totalCount, // 返回结果中的总记录数 + showSizeChanger: this.showSizeChanger, + pageSize: (pagination && pagination.pageSize) || + this.localPagination.pageSize + }) || false + // 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页 + if (r.data.length === 0 && this.showPagination && this.localPagination.current > 1) { + this.localPagination.current-- + this.loadData() + return + } + + // 这里用于判断接口是否有返回 r.totalCount 且 this.showPagination = true 且 pageNo 和 pageSize 存在 且 totalCount 小于等于 pageNo * pageSize 的大小 + // 当情况满足时，表示数据不满足分页大小，关闭 table 分页功能 + try { + if ((['auto', true].includes(this.showPagination) && r.totalCount <= (r.pageNo * this.localPagination.pageSize))) { + this.localPagination.hideOnSinglePage = true + } + } catch (e) { + this.localPagination = false + } + console.log('loadData -> this.localPagination', this.localPagination) + this.localDataSource = r.data // 返回结果中的数组数据 + this.localLoading = false + }) +``` +返回 JSON 例子： +```json +{ + "message": "", + "result": { + "data": [{ + id: 1, + cover: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', + title: 'Alipay', + description: '那是一种内在的东西， 他们到达不了，也无法触及的', + status: 1, + updatedAt: '2018-07-26 00:00:00' + }, + { + id: 2, + cover: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', + title: 'Angular', + description: '希望是一个好东西，也许是最好的，好东西是不会消亡的', + status: 1, + updatedAt: '2018-07-26 00:00:00' + }, + { + id: 3, + cover: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', + title: 'Ant Design', + description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆', + status: 1, + updatedAt: '2018-07-26 00:00:00' + }, + { + id: 4, + cover: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', + title: 'Ant Design Pro', + description: '那时候我只会想自己想要什么，从不想自己拥有什么', + status: 1, + updatedAt: '2018-07-26 00:00:00' + }, + { + id: 5, + cover: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', + title: 'Bootstrap', + description: '凛冬将至', + status: 1, + updatedAt: '2018-07-26 00:00:00' + }, + { + id: 6, + cover: 'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', + title: 'Vue', + description: '生命就像一盒巧克力，结果往往出人意料', + status: 1, + updatedAt: '2018-07-26 00:00:00' + } + ], + "pageSize": 10, + "pageNo": 0, + "totalPage": 6, + "totalCount": 57 + }, + "status": 200, + "timestamp": 1534955098193 +} +``` + + + +更新时间 +---- + +该文档最后更新于： 2019-06-23 PM 17:19 \ No newline at end of file diff --git a/cmdb-ui/src/components/Table/index.js b/cmdb-ui/src/components/Table/index.js new file mode 100644 index 0000000..0f1a5d6 --- /dev/null +++ b/cmdb-ui/src/components/Table/index.js @@ -0,0 +1,315 @@ +import T from 'ant-design-vue/es/table/Table' +import get from 'lodash.get' + +export default { + data () { + return { + needTotalList: [], + + selectedRows: [], + selectedRowKeys: [], + + localLoading: false, + localDataSource: [], + localPagination: Object.assign({}, this.pagination) + } + }, + props: Object.assign({}, T.props, { + rowKey: { + type: [String, Function], + default: 'key' + }, + data: { + type: Function, + required: true + }, + pageNum: { + type: Number, + default: 1 + }, + pageSize: { + type: Number, + default: 10 + }, + showSizeChanger: { + type: Boolean, + default: true + }, + size: { + type: String, + default: 'default' + }, + alert: { + type: [Object, Boolean], + default: null + }, + rowSelection: { + type: Object, + default: null + }, + /** @Deprecated */ + showAlertInfo: { + type: Boolean, + default: false + }, + showPagination: { + type: String | Boolean, + default: 'auto' + }, + /** + * enable page URI mode + * + * e.g: + * /users/1 + * /users/2 + * /users/3?queryParam=test + * ... + */ + pageURI: { + type: Boolean, + default: false + } + }), + watch: { + 'localPagination.current' (val) { + this.pageURI && this.$router.push({ + ...this.$route, + name: this.$route.name, + params: Object.assign({}, this.$route.params, { + pageNo: val + }) + }) + }, + pageNum (val) { + Object.assign(this.localPagination, { + current: val + }) + }, + pageSize (val) { + Object.assign(this.localPagination, { + pageSize: val + }) + }, + showSizeChanger (val) { + Object.assign(this.localPagination, { + showSizeChanger: val + }) + }, + '$route.path': function (newPath, oldPath) { + if (oldPath.indexOf(newPath) === -1) { + this.refresh(true) + } + } + }, + created () { + const { pageNo } = this.$route.params + const localPageNum = this.pageURI && (pageNo && parseInt(pageNo)) || this.pageNum + this.localPagination = ['auto', true].includes(this.showPagination) && Object.assign({}, this.localPagination, { + current: localPageNum, + pageSize: this.pageSize, + showSizeChanger: this.showSizeChanger + }) || false + console.log('this.localPagination', this.localPagination) + this.needTotalList = this.initTotalList(this.columns) + this.loadData() + }, + methods: { + /** + * 表格重新加载方法 + * 如果参数为 true, 则强制刷新到第一页 + * @param Boolean bool + */ + refresh (bool = false) { + bool && (this.localPagination = Object.assign({}, { + current: 1, pageSize: this.pageSize + })) + this.loadData() + }, + /** + * 加载数据方法 + * @param {Object} pagination 分页选项器 + * @param {Object} filters 过滤条件 + * @param {Object} sorter 排序条件 + */ + loadData (pagination, filters, sorter) { + this.localLoading = true + const parameter = Object.assign({ + pageNo: (pagination && pagination.current) || + this.showPagination && this.localPagination.current || this.pageNum, + pageSize: (pagination && pagination.pageSize) || + this.showPagination && this.localPagination.pageSize || this.pageSize + }, + (sorter && sorter.field && { + sortField: sorter.field + }) || {}, + (sorter && sorter.order && { + sortOrder: sorter.order + }) || {}, { + ...filters + } + ) + const result = this.data(parameter) + // 对接自己的通用数据接口需要修改下方代码中的 r.pageNo, r.totalCount, r.data + // eslint-disable-next-line + if ((typeof result === 'object' || typeof result === 'function') && typeof result.then === 'function') { + result.then(r => { + this.localPagination = this.showPagination && Object.assign({}, this.localPagination, { + current: r.pageNo, // 返回结果中的当前分页数 + total: r.totalCount, // 返回结果中的总记录数 + showSizeChanger: this.showSizeChanger, + pageSize: (pagination && pagination.pageSize) || + this.localPagination.pageSize + }) || false + // 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页 + if (r.data.length === 0 && this.showPagination && this.localPagination.current > 1) { + this.localPagination.current-- + this.loadData() + return + } + + // 这里用于判断接口是否有返回 r.totalCount 且 this.showPagination = true 且 pageNo 和 pageSize 存在 且 totalCount 小于等于 pageNo * pageSize 的大小 + // 当情况满足时，表示数据不满足分页大小，关闭 table 分页功能 + try { + if ((['auto', true].includes(this.showPagination) && r.totalCount <= (r.pageNo * this.localPagination.pageSize))) { + this.localPagination.hideOnSinglePage = false + } + } catch (e) { + this.localPagination = false + } + this.localDataSource = r.data // 返回结果中的数组数据 + this.localLoading = false + }) + } + }, + initTotalList (columns) { + const totalList = [] + columns && columns instanceof Array && columns.forEach(column => { + if (column.needTotal) { + totalList.push({ + ...column, + total: 0 + }) + } + }) + return totalList + }, + /** + * 用于更新已选中的列表数据 total 统计 + * @param selectedRowKeys + * @param selectedRows + */ + updateSelect (selectedRowKeys, selectedRows) { + this.selectedRows = selectedRows + this.selectedRowKeys = selectedRowKeys + const list = this.needTotalList + this.needTotalList = list.map(item => { + return { + ...item, + total: selectedRows.reduce((sum, val) => { + const total = sum + parseInt(get(val, item.dataIndex)) + return isNaN(total) ? 0 : total + }, 0) + } + }) + }, + /** + * 清空 table 已选中项 + */ + clearSelected () { + if (this.rowSelection) { + this.rowSelection.onChange([], []) + this.updateSelect([], []) + } + }, + /** + * 处理交给 table 使用者去处理 clear 事件时，内部选中统计同时调用 + * @param callback + * @returns {*} + */ + renderClear (callback) { + if (this.selectedRowKeys.length <= 0) return null + return ( + { + callback() + this.clearSelected() + }}>清空 + ) + }, + renderAlert () { + // 绘制统计列数据 + const needTotalItems = this.needTotalList.map((item) => { + return ( + {item.title}总计 {!item.customRender ? item.total : item.customRender(item.total)} + ) + }) + + // 绘制 清空 按钮 + const clearItem = (typeof this.alert.clear === 'boolean' && this.alert.clear) ? ( + this.renderClear(this.clearSelected) + ) : (this.alert !== null && typeof this.alert.clear === 'function') ? ( + this.renderClear(this.alert.clear) + ) : null + + // 绘制 alert 组件 + return ( + + + + ) + } + }, + + render () { + const props = {} + const localKeys = Object.keys(this.$data) + const showAlert = (typeof this.alert === 'object' && this.alert !== null && this.alert.show) && typeof this.rowSelection.selectedRowKeys !== 'undefined' || this.alert + + Object.keys(T.props).forEach(k => { + const localKey = `local${k.substring(0, 1).toUpperCase()}${k.substring(1)}` + if (localKeys.includes(localKey)) { + props[k] = this[localKey] + return props[k] + } + + if (k === 'rowSelection') { + if (showAlert && this.rowSelection) { + // 如果需要使用alert，则重新绑定 rowSelection 事件 + props[k] = { + ...this.rowSelection, + selectedRows: this.selectedRows, + selectedRowKeys: this.selectedRowKeys, + onChange: (selectedRowKeys, selectedRows) => { + this.updateSelect(selectedRowKeys, selectedRows) + typeof this[k].onChange !== 'undefined' && this[k].onChange(selectedRowKeys, selectedRows) + } + } + return props[k] + } else if (!this.rowSelection) { + // 如果没打算开启 rowSelection 则清空默认的选择项 + props[k] = null + return props[k] + } + } + this[k] && (props[k] = this[k]) + return props[k] + }) + + console.log('re-render table', new Date()) + const table = ( + + { Object.keys(this.$slots).map(name => ()) } + + ) + + return ( +
+ { showAlert ? this.renderAlert() : null } + { table } +
+ ) + } +} diff --git a/cmdb-ui/src/components/TagSelect/TagSelectOption.jsx b/cmdb-ui/src/components/TagSelect/TagSelectOption.jsx new file mode 100644 index 0000000..b5ae799 --- /dev/null +++ b/cmdb-ui/src/components/TagSelect/TagSelectOption.jsx @@ -0,0 +1,45 @@ +import { Tag } from 'ant-design-vue' +const { CheckableTag } = Tag + +export default { + name: 'TagSelectOption', + props: { + prefixCls: { + type: String, + default: 'ant-pro-tag-select-option' + }, + value: { + type: [String, Number, Object], + default: '' + }, + checked: { + type: Boolean, + default: false + } + }, + data () { + return { + localChecked: this.checked || false + } + }, + watch: { + 'checked' (val) { + this.localChecked = val + }, + '$parent.items': { + handler: function (val) { + this.value && val.hasOwnProperty(this.value) && (this.localChecked = val[this.value]) + }, + deep: true + } + }, + render () { + const { $slots, value } = this + const onChange = (checked) => { + this.$emit('change', { value, checked }) + } + return ( + {$slots.default} + ) + } +} diff --git a/cmdb-ui/src/components/TagSelect/index.jsx b/cmdb-ui/src/components/TagSelect/index.jsx new file mode 100644 index 0000000..c12c94e --- /dev/null +++ b/cmdb-ui/src/components/TagSelect/index.jsx @@ -0,0 +1,103 @@ +import PropTypes from 'ant-design-vue/es/_util/vue-types' +import Option from './TagSelectOption.jsx' +import { filterEmpty } from '@/components/_util/util' + +export default { + Option, + name: 'TagSelect', + model: { + prop: 'checked', + event: 'change' + }, + props: { + prefixCls: { + type: String, + default: 'ant-pro-tag-select' + }, + defaultValue: { + type: PropTypes.array, + default: null + }, + value: { + type: PropTypes.array, + default: null + }, + expandable: { + type: Boolean, + default: false + }, + hideCheckAll: { + type: Boolean, + default: false + } + }, + data () { + return { + expand: false, + localCheckAll: false, + items: this.getItemsKey(filterEmpty(this.$slots.default)), + val: this.value || this.defaultValue || [] + } + }, + methods: { + onChange (checked) { + const key = Object.keys(this.items).filter(key => key === checked.value) + this.items[key] = checked.checked + const bool = Object.values(this.items).lastIndexOf(false) + if (bool === -1) { + this.localCheckAll = true + } else { + this.localCheckAll = false + } + }, + onCheckAll (checked) { + Object.keys(this.items).forEach(v => { + this.items[v] = checked.checked + }) + this.localCheckAll = checked.checked + }, + getItemsKey (items) { + const totalItem = {} + items.forEach(item => { + totalItem[item.componentOptions.propsData && item.componentOptions.propsData.value] = false + }) + return totalItem + }, + // CheckAll Button + renderCheckAll () { + return !this.hideCheckAll && () || null + }, + // expandable + renderExpandable () { + + }, + // render option + renderTags (items) { + const listeners = { + change: (checked) => { + this.onChange(checked) + this.$emit('change', checked) + } + } + + return items.map(vnode => { + const options = vnode.componentOptions + options.listeners = listeners + return vnode + }) + } + }, + render () { + const { $props: { prefixCls } } = this + const classString = { + [`${prefixCls}`]: true + } + const tagItems = filterEmpty(this.$slots.default) + return ( +
+ {this.renderCheckAll()} + {this.renderTags(tagItems)} +
+ ) + } +} diff --git a/cmdb-ui/src/components/Tree/Tree.jsx b/cmdb-ui/src/components/Tree/Tree.jsx new file mode 100644 index 0000000..e5a2a11 --- /dev/null +++ b/cmdb-ui/src/components/Tree/Tree.jsx @@ -0,0 +1,124 @@ +import { Menu, Icon, Input } from 'ant-design-vue' + +const { Item, ItemGroup, SubMenu } = Menu +const { Search } = Input + +export default { + name: 'Tree', + props: { + dataSource: { + type: Array, + required: true + }, + openKeys: { + type: Array, + default: () => [] + }, + search: { + type: Boolean, + default: false + } + }, + created () { + this.localOpenKeys = this.openKeys.slice(0) + }, + data () { + return { + localOpenKeys: [] + } + }, + methods: { + handlePlus (item) { + this.$emit('add', item) + }, + handleTitleClick (...args) { + this.$emit('titleClick', { args }) + }, + + renderSearch () { + return ( + + ) + }, + renderIcon (icon) { + return icon && () || null + }, + renderMenuItem (item) { + return ( + + { this.renderIcon(item.icon) } + { item.title } + this.handlePlus(item) } }}> + + ) + }, + renderItem (item) { + return item.children ? this.renderSubItem(item, item.key) : this.renderMenuItem(item, item.key) + }, + renderItemGroup (item) { + const childrenItems = item.children.map(o => { + return this.renderItem(o, o.key) + }) + + return ( + + + { childrenItems } + + ) + }, + renderSubItem (item, key) { + const childrenItems = item.children && item.children.map(o => { + return this.renderItem(o, o.key) + }) + + const title = ( + + { this.renderIcon(item.icon) } + { item.title } + + ) + + if (item.group) { + return this.renderItemGroup(item) + } + // titleClick={this.handleTitleClick(item)} + return ( + + { title } + { childrenItems } + + ) + } + }, + render () { + const { dataSource, search } = this.$props + + // this.localOpenKeys = openKeys.slice(0) + const list = dataSource.map(item => { + return this.renderItem(item) + }) + + return ( +
+ { search ? this.renderSearch() : null } + this.$emit('click', item), 'update:openKeys': val => { this.localOpenKeys = val } } }} openKeys={this.localOpenKeys}> + { list } + +
+ ) + } +} diff --git a/cmdb-ui/src/components/Trend/Trend.vue b/cmdb-ui/src/components/Trend/Trend.vue new file mode 100644 index 0000000..526e1cc --- /dev/null +++ b/cmdb-ui/src/components/Trend/Trend.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/cmdb-ui/src/components/Trend/index.js b/cmdb-ui/src/components/Trend/index.js new file mode 100644 index 0000000..9f14228 --- /dev/null +++ b/cmdb-ui/src/components/Trend/index.js @@ -0,0 +1,3 @@ +import Trend from './Trend.vue' + +export default Trend diff --git a/cmdb-ui/src/components/Trend/index.less b/cmdb-ui/src/components/Trend/index.less new file mode 100644 index 0000000..8a3d24c --- /dev/null +++ b/cmdb-ui/src/components/Trend/index.less @@ -0,0 +1,42 @@ +@import "../index"; + +@trend-prefix-cls: ~"@{ant-pro-prefix}-trend"; + +.@{trend-prefix-cls} { + display: inline-block; + font-size: @font-size-base; + line-height: 22px; + + .up, + .down { + margin-left: 4px; + position: relative; + top: 1px; + + i { + font-size: 12px; + transform: scale(0.83); + } + } + + .item-text { + display: inline-block; + margin-left: 8px; + color: rgba(0,0,0,.85); + } + + .up { + color: @red-6; + } + .down { + color: @green-6; + top: -1px; + } + + &.reverse-color .up { + color: @green-6; + } + &.reverse-color .down { + color: @red-6; + } +} \ No newline at end of file diff --git a/cmdb-ui/src/components/Trend/index.md b/cmdb-ui/src/components/Trend/index.md new file mode 100644 index 0000000..8881f0e --- /dev/null +++ b/cmdb-ui/src/components/Trend/index.md @@ -0,0 +1,45 @@ +# Trend 趋势标记 + +趋势符号，标记上升和下降趋势。通常用绿色代表“好”，红色代表“不好”，股票涨跌场景除外。 + + + +引用方式： + +```javascript +import Trend from '@/components/Trend' + +export default { + components: { + Trend + } +} +``` + + + +## 代码演示 [demo](https://pro.loacg.com/test/home) + +```html +5% +``` +或 +```html + + 工资 + 5% + +``` +或 +```html +5% +``` + + +## API + +| 参数 | 说明 | 类型 | 默认值 | +|----------|------------------------------------------|-------------|-------| +| flag | 上升下降标识：`up|down` | string | - | +| reverseColor | 颜色反转 | Boolean | false | + diff --git a/cmdb-ui/src/components/_util/util.js b/cmdb-ui/src/components/_util/util.js new file mode 100644 index 0000000..dd33231 --- /dev/null +++ b/cmdb-ui/src/components/_util/util.js @@ -0,0 +1,46 @@ +/** + * components util + */ + +/** + * 清理空值，对象 + * @param children + * @returns {*[]} + */ +export function filterEmpty (children = []) { + return children.filter(c => c.tag || (c.text && c.text.trim() !== '')) +} + +/** + * 获取字符串长度，英文字符 长度1，中文字符长度2 + * @param {*} str + */ +export const getStrFullLength = (str = '') => + str.split('').reduce((pre, cur) => { + const charCode = cur.charCodeAt(0) + if (charCode >= 0 && charCode <= 128) { + return pre + 1 + } + return pre + 2 + }, 0) + +/** + * 截取字符串，根据 maxLength 截取后返回 + * @param {*} str + * @param {*} maxLength + */ +export const cutStrByFullLength = (str = '', maxLength) => { + let showLength = 0 + return str.split('').reduce((pre, cur) => { + const charCode = cur.charCodeAt(0) + if (charCode >= 0 && charCode <= 128) { + showLength += 1 + } else { + showLength += 2 + } + if (showLength <= maxLength) { + return pre + cur + } + return pre + }, '') +} diff --git a/cmdb-ui/src/components/global.less b/cmdb-ui/src/components/global.less new file mode 100644 index 0000000..f21907e --- /dev/null +++ b/cmdb-ui/src/components/global.less @@ -0,0 +1,491 @@ +@import './index.less'; + +body { + + &.colorWeak { + filter: invert(80%); + } + &.userLayout { + overflow: auto; + } +} + +.layout.ant-layout { + height: auto; + overflow-x: hidden; + + &.mobile, + &.tablet { + .ant-layout-content { + .content { + margin: 24px 0 0; + } + } + + /** + * ant-table-wrapper + * 覆盖的表格手机模式样式，如果想修改在手机上表格最低宽度，可以在这里改动 + */ + .ant-table-wrapper { + .ant-table-content { + overflow-y: auto; + } + .ant-table-body { + min-width: 800px; + } + } + .topmenu { + /* 必须为 topmenu 才能启用流式布局 */ + &.content-width-Fluid { + .header-index-wide { + margin-left: 0; + } + } + } + } + + &.mobile { + .sidemenu { + .ant-header-fixedHeader { + &.ant-header-side-opened, + &.ant-header-side-closed { + width: 100%; + } + } + } + } + + &.ant-layout-has-sider { + flex-direction: row; + } + + .trigger { + font-size: 20px; + line-height: 64px; + padding: 0 24px; + cursor: pointer; + transition: color 0.3s; + &:hover { + background: rgba(0, 0, 0, 0.025); + } + } + + .topmenu { + .ant-header-fixedHeader { + position: fixed; + top: 0; + right: 0; + z-index: 9; + width: 100%; + transition: width 0.2s; + + &.ant-header-side-opened { + width: 100%; + } + + &.ant-header-side-closed { + width: 100%; + } + } + /* 必须为 topmenu 才能启用流式布局 */ + &.content-width-Fluid { + .header-index-wide { + max-width: unset; + margin-left: 24px; + } + + .page-header-index-wide { + max-width: unset; + } + } + } + + .sidemenu { + .ant-header-fixedHeader { + position: fixed; + top: 0; + right: 0; + z-index: 9; + width: 100%; + transition: width 0.2s; + + &.ant-header-side-opened { + width: calc(100% - 256px); + } + + &.ant-header-side-closed { + width: calc(100% - 80px); + } + } + } + + .header { + height: 64px; + padding: 0 12px 0 0; + background: #fff; + box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); + position: relative; + } + + .header, + .top-nav-header-index { + .user-wrapper { + float: right; + height: 100%; + + .action { + cursor: pointer; + padding: 0 12px; + display: inline-block; + transition: all 0.3s; + height: 100%; + color: rgba(0, 0, 0, 0.65); + + &:hover { + background: rgba(0, 0, 0, 0.025); + } + + .avatar { + margin: 20px 8px 20px 0; + color: #1890ff; + background: hsla(0, 0%, 100%, 0.85); + vertical-align: middle; + } + + .icon { + font-size: 16px; + padding: 4px; + } + } + } + + &.dark { + .user-wrapper { + .action { + color: rgba(255, 255, 255, 0.85); + a { + color: rgba(255, 255, 255, 0.85); + } + + &:hover { + background: rgba(255, 255, 255, 0.16); + } + } + } + } + } + + &.mobile, + &.tablet { + .top-nav-header-index { + .header-index-wide { + .header-index-left { + .trigger { + color: rgba(255, 255, 255, 0.85); + padding: 0 12px; + } + + .logo.top-nav-header { + flex: 0 0 56px; + text-align: center; + line-height: 58px; + h1 { + display: none; + } + } + } + } + + &.light { + .header-index-wide { + .header-index-left { + .trigger { + color: rgba(0, 0, 0, 0.65); + } + } + } + // + } + } + } + + &.tablet { + // overflow: hidden; text-overflow:ellipsis; white-space: nowrap; + .top-nav-header-index { + .header-index-wide { + .header-index-left { + .logo > a { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + .ant-menu.ant-menu-horizontal { + flex: 0 1 auto; + white-space: normal; + } + } + } + } + + .top-nav-header-index { + box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); + position: relative; + transition: background 0.3s, width 0.2s; + + .header-index-wide { + max-width: 1200px; + margin: auto; + padding-left: 0; + display: flex; + height: 64px; + + .ant-menu.ant-menu-horizontal { + max-width: 835px; + flex: 0 1 835px; + border: none; + height: 64px; + line-height: 64px; + } + + .header-index-left { + flex: 0 1 1000px; + display: flex; + + .logo.top-nav-header { + flex: 0 0 165px; + width: 165px; + height: 64px; + position: relative; + line-height: 64px; + transition: all 0.3s; + overflow: hidden; + + img, + svg { + display: inline-block; + vertical-align: middle; + height: 32px; + width: 32px; + } + + h1 { + color: #fff; + display: inline-block; + vertical-align: top; + font-size: 16px; + margin: 0 0 0 12px; + font-weight: 400; + } + } + } + + .header-index-right { + flex: 1 0 auto; + height: 64px; + overflow: hidden; + + .content-box { + float: right; + } + } + } + + &.light { + background-color: #fff; + + .header-index-wide { + .header-index-left { + .logo { + h1 { + color: #002140; + } + } + } + } + } + } + + // 内容区 + .layout-content { + margin: 24px 24px 0px; + height: 100%; + height: 64px; + padding: 0 12px 0 0; + } + + // footer + .ant-layout-footer { + padding: 0; + } +} + +.topmenu { + .page-header-index-wide { + max-width: 1200px; + margin: 0 auto; + } +} + +// drawer-sider 自定义 +.ant-drawer.drawer-sider { + .sider { + box-shadow: none; + } + + &.dark { + .ant-drawer-content { + background-color: rgb(0, 21, 41); + } + } + &.light { + box-shadow: none; + .ant-drawer-content { + background-color: #fff; + } + } + + .ant-drawer-body { + padding: 0; + } +} + +// 菜单样式 +.sider { + box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35); + position: relative; + z-index: 10; + min-height: 100vh; + + .ant-layout-sider-children { + overflow-y: hidden; + max-height: 100vh; + + &:hover { + overflow-y: auto; + } + } + + &.ant-fixed-sidemenu { + position: fixed; + height: 100%; + } + + .logo { + position: relative; + height: 64px; + padding-left: 24px; + overflow: hidden; + line-height: 64px; + background: #002140; + transition: all .3s; + + img, + svg, + h1 { + display: inline-block; + vertical-align: middle; + } + + img, + svg { + height: 32px; + width: 32px; + } + + h1 { + color: #fff; + font-size: 20px; + margin: 0 0 0 12px; + font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif; + font-weight: 600; + vertical-align: middle; + } + } + + &.light { + background-color: #fff; + box-shadow: 2px 0px 8px 0px rgba(29, 35, 41, 0.05); + + .logo { + background: #fff; + box-shadow: 1px 1px 0px 0px #e8e8e8; + + h1 { + color: unset; + } + } + + .ant-menu-light { + border-right-color: transparent; + } + } +} + +// 外置的样式控制 +.user-dropdown-menu { + span { + user-select: none; + } +} +.user-dropdown-menu-wrapper.ant-dropdown-menu { + padding: 4px 0; + + .ant-dropdown-menu-item { + width: 160px; + } + + .ant-dropdown-menu-item > .anticon:first-child, + .ant-dropdown-menu-item > a > .anticon:first-child, + .ant-dropdown-menu-submenu-title > .anticon:first-child .ant-dropdown-menu-submenu-title > a > .anticon:first-child { + min-width: 12px; + margin-right: 8px; + } +} + +// 数据列表 样式 +.table-alert { + margin-bottom: 16px; +} + +.table-page-search-wrapper { + .ant-form-inline { + .ant-form-item { + display: flex; + margin-bottom: 24px; + margin-right: 0; + + .ant-form-item-control-wrapper { + flex: 1 1; + display: inline-block; + vertical-align: middle; + } + + > .ant-form-item-label { + line-height: 32px; + padding-right: 8px; + width: auto; + } + .ant-form-item-control { + height: 32px; + line-height: 32px; + } + } + } + + .table-page-search-submitButtons { + display: block; + margin-bottom: 24px; + white-space: nowrap; + } +} + +.content { + .table-operator { + margin-bottom: 18px; + + button { + margin-right: 8px; + } + } +} diff --git a/cmdb-ui/src/components/index.js b/cmdb-ui/src/components/index.js new file mode 100644 index 0000000..6004742 --- /dev/null +++ b/cmdb-ui/src/components/index.js @@ -0,0 +1,62 @@ +// chart +import Bar from '@/components/Charts/Bar' +import ChartCard from '@/components/Charts/ChartCard' +import Liquid from '@/components/Charts/Liquid' +import MiniArea from '@/components/Charts/MiniArea' +import MiniSmoothArea from '@/components/Charts/MiniSmoothArea' +import MiniBar from '@/components/Charts/MiniBar' +import MiniProgress from '@/components/Charts/MiniProgress' +import Radar from '@/components/Charts/Radar' +import RankList from '@/components/Charts/RankList' +import TransferBar from '@/components/Charts/TransferBar' +import TagCloud from '@/components/Charts/TagCloud' + +// pro components +import AvatarList from '@/components/AvatarList' +import CountDown from '@/components/CountDown' +import Ellipsis from '@/components/Ellipsis' +import FooterToolbar from '@/components/FooterToolbar' +import NumberInfo from '@/components/NumberInfo' +import DescriptionList from '@/components/DescriptionList' +import Tree from '@/components/Tree/Tree' +import Trend from '@/components/Trend' +import STable from '@/components/Table' +import MultiTab from '@/components/MultiTab' +import Result from '@/components/Result' +import IconSelector from '@/components/IconSelector' +import TagSelect from '@/components/TagSelect' +import ExceptionPage from '@/components/Exception' +import StandardFormRow from '@/components/StandardFormRow' +import ArticleListContent from '@/components/ArticleListContent' + +export { + AvatarList, + Bar, + ChartCard, + Liquid, + MiniArea, + MiniSmoothArea, + MiniBar, + MiniProgress, + Radar, + TagCloud, + RankList, + TransferBar, + Trend, + CountDown, + Ellipsis, + FooterToolbar, + NumberInfo, + DescriptionList, + // 兼容写法，请勿继续使用 + DescriptionList as DetailList, + Tree, + STable, + MultiTab, + Result, + ExceptionPage, + IconSelector, + TagSelect, + StandardFormRow, + ArticleListContent +} diff --git a/cmdb-ui/src/components/index.less b/cmdb-ui/src/components/index.less new file mode 100644 index 0000000..2d8d57e --- /dev/null +++ b/cmdb-ui/src/components/index.less @@ -0,0 +1,5 @@ +@import "~ant-design-vue/lib/style/index"; + +// The prefix to use on all css classes from ant-pro. +@ant-pro-prefix : ant-pro; +@ant-global-header-zindex : 105; \ No newline at end of file diff --git a/cmdb-ui/src/components/tools/Breadcrumb.vue b/cmdb-ui/src/components/tools/Breadcrumb.vue new file mode 100644 index 0000000..9bc141c --- /dev/null +++ b/cmdb-ui/src/components/tools/Breadcrumb.vue @@ -0,0 +1,45 @@ + + + + + diff --git a/cmdb-ui/src/components/tools/DetailList.vue b/cmdb-ui/src/components/tools/DetailList.vue new file mode 100644 index 0000000..6745a08 --- /dev/null +++ b/cmdb-ui/src/components/tools/DetailList.vue @@ -0,0 +1,5 @@ + diff --git a/cmdb-ui/src/components/tools/HeadInfo.vue b/cmdb-ui/src/components/tools/HeadInfo.vue new file mode 100644 index 0000000..7fbc692 --- /dev/null +++ b/cmdb-ui/src/components/tools/HeadInfo.vue @@ -0,0 +1,67 @@ + + + + + diff --git a/cmdb-ui/src/components/tools/Logo.vue b/cmdb-ui/src/components/tools/Logo.vue new file mode 100644 index 0000000..748aa13 --- /dev/null +++ b/cmdb-ui/src/components/tools/Logo.vue @@ -0,0 +1,30 @@ + + + diff --git a/cmdb-ui/src/components/tools/TopMenu.vue b/cmdb-ui/src/components/tools/TopMenu.vue new file mode 100644 index 0000000..f59307a --- /dev/null +++ b/cmdb-ui/src/components/tools/TopMenu.vue @@ -0,0 +1,34 @@ + + + + + diff --git a/cmdb-ui/src/components/tools/TwoStepCaptcha.vue b/cmdb-ui/src/components/tools/TwoStepCaptcha.vue new file mode 100644 index 0000000..01302b4 --- /dev/null +++ b/cmdb-ui/src/components/tools/TwoStepCaptcha.vue @@ -0,0 +1,89 @@ + + + + diff --git a/cmdb-ui/src/components/tools/UserMenu.vue b/cmdb-ui/src/components/tools/UserMenu.vue new file mode 100644 index 0000000..03c0951 --- /dev/null +++ b/cmdb-ui/src/components/tools/UserMenu.vue @@ -0,0 +1,73 @@ + + + diff --git a/cmdb-ui/src/components/tools/index.js b/cmdb-ui/src/components/tools/index.js new file mode 100644 index 0000000..e69de29 diff --git a/cmdb-ui/src/config/defaultSettings.js b/cmdb-ui/src/config/defaultSettings.js new file mode 100644 index 0000000..a7136e2 --- /dev/null +++ b/cmdb-ui/src/config/defaultSettings.js @@ -0,0 +1,34 @@ +/** + * 项目默认配置项 + * primaryColor - 默认主题色, 如果修改颜色不生效，请清理 localStorage + * navTheme - sidebar theme ['dark', 'light'] 两种主题 + * colorWeak - 色盲模式 + * layout - 整体布局方式 ['sidemenu', 'topmenu'] 两种布局 + * fixedHeader - 固定 Header : boolean + * fixSiderbar - 固定左侧菜单栏 ： boolean + * autoHideHeader - 向下滚动时，隐藏 Header : boolean + * contentWidth - 内容区布局： 流式 | 固定 + * + * storageOptions: {} - Vue-ls 插件配置项 (localStorage/sessionStorage) + * + */ + +export default { + useSSO: false, + primaryColor: '#1890ff', // primary color of ant design + navTheme: 'dark', // theme for nav menu + layout: 'sidemenu', // nav menu position: sidemenu or topmenu + contentWidth: 'Fixed', // layout of content: Fluid or Fixed, only works when layout is topmenu + fixedHeader: true, // sticky header + fixSiderbar: true, // sticky siderbar + autoHideHeader: true, // auto hide header + colorWeak: false, + multiTab: false, + production: process.env.NODE_ENV === 'production' && process.env.VUE_APP_PREVIEW !== 'true', + // vue-ls options + storageOptions: { + namespace: 'pro__', // key prefix + name: 'ls', // name variable Vue.[ls] or this.[$ls], + storage: 'local' // storage name session, local, memory + } +} diff --git a/cmdb-ui/src/config/router.config.js b/cmdb-ui/src/config/router.config.js new file mode 100644 index 0000000..386dbeb --- /dev/null +++ b/cmdb-ui/src/config/router.config.js @@ -0,0 +1,219 @@ +// eslint-disable-next-line +import store from '@/store' + +import { UserLayout, BasicLayout, RouteView } from '@/layouts' +import { getPreference } from '@/api/cmdb/preference' + +const cmdbRouter = [ + // preference + { + path: '/preference', + component: () => import('@/views/cmdb/preference'), + name: 'cmdb_preference', + meta: { title: '我的订阅', icon: 'book', keepAlive: true } + }, + // relation views + { + path: '/relation_views', + component: () => import('@/views/cmdb/relation_views'), + name: 'cmdb_relation_views', + meta: { title: '关系视图', icon: 'link', keepAlive: true }, + hideChildrenInMenu: true, + children: [ + { + path: '/relation_views/:viewId', + name: 'cmdb_relation_views_item', + component: () => import('@/views/cmdb/relation_views'), + meta: { title: '关系视图', keepAlive: true }, + hidden: true + }] + }, + // tree views + { + path: '/tree_views', + component: () => import('@/views/cmdb/tree_views'), + name: 'cmdb_tree_views', + meta: { title: '树形视图', icon: 'share-alt', keepAlive: true }, + hideChildrenInMenu: true, + children: [ + { + path: '/tree_views/:typeId', + name: 'cmdb_tree_views_item', + component: () => import('@/views/cmdb/tree_views'), + meta: { title: '树形视图', keepAlive: true }, + hidden: true + }] + }, + // batch + { + path: '/batch', + component: () => import('@/views/cmdb/batch'), + name: 'cmdb_batch', + meta: { 'title': '批量导入', icon: 'upload', keepAlive: true } + }, + { + path: '/config//ci_types', + name: 'cmdb_ci_type', + component: RouteView, + redirect: '/ci_types', + meta: { title: '模型配置', icon: 'setting', permission: ['admin'] }, + children: [ + { + path: '/config/ci_types', + name: 'ci_type', + hideChildrenInMenu: true, + component: () => import('@/views/cmdb/modeling/ci_type/list'), + meta: { title: '模型管理', keepAlive: true } + }, + { + path: '/config/ci_types/:CITypeName/detail/:CITypeId', + name: 'ci_type_detail', + hideChildrenInMenu: true, + component: () => import('@/views/cmdb/modeling/ci_type/detail'), + meta: { title: '模型管理', keepAlive: true, hidden: true }, + hidden: true + }, + { + path: '/config/attributes', + name: 'attributes', + hideChildrenInMenu: true, + component: () => import('@/views/cmdb/modeling/attributes/index'), + meta: { title: '属性库', keepAlive: true } + }, + { + path: '/config/relation_type', + name: 'relation_type', + hideChildrenInMenu: true, + component: () => import('@/views/cmdb/modeling/relation_type/index'), + meta: { title: '关系类型', keepAlive: true } + }, + { + path: '/config/preference_relation', + name: 'preference_relation', + hideChildrenInMenu: true, + component: () => import('@/views/cmdb/modeling/preference_relation/index'), + meta: { title: '关系视图定义', keepAlive: true } + } + ] + }, + { + path: '/acl', + name: 'cmdb_acl', + component: RouteView, + redirect: '/acl/users', + meta: { title: '权限管理', icon: 'safety-certificate', permission: ['admin'] }, + children: [ + { + path: '/acl/users', + name: 'cmdb_acl_users', + hideChildrenInMenu: true, + component: () => import('@/views/acl/users'), + meta: { title: '用户管理', keepAlive: true } + }, + { + path: '/acl/roles', + name: 'cmdb_acl_roles', + hideChildrenInMenu: true, + component: () => import('@/views/acl/roles'), + meta: { title: '角色管理', keepAlive: true } + }, + { + path: '/acl/resources', + name: 'cmdb_acl_resources', + hideChildrenInMenu: true, + component: () => import('@/views/acl/resources'), + meta: { title: '资源管理', keepAlive: true } + }, + { + path: '/acl/resource_types', + name: 'cmdb_acl_resource_types', + hideChildrenInMenu: true, + component: () => import('@/views/acl/resource_types'), + meta: { title: '资源类型', keepAlive: true } + } + ] + } +] + +function copyArray (arr) { + return arr.map((e) => { + if (typeof e === 'object') { + return Object.assign({}, e) + } else { + return e + } + }) +} + +export const generatorDynamicRouter = () => { + return new Promise((resolve, reject) => { + // cmdb 订阅的模型 + getPreference().then(res => { + const routers = copyArray(asyncRouterMap) + routers[0].children = copyArray(cmdbRouter) + for (let i = 0; i < res.length; i++) { + const item = res[i] + routers[0].children.unshift({ + path: `/instances/types/${item.id}`, + component: () => import(`@/views/cmdb/ci/index`), + name: `cmdb_${item.id}`, + meta: { title: item.alias, icon: 'table', keepAlive: true, typeId: item.id }, + hideChildrenInMenu: true + }) + } + + resolve(routers) + }) + }) +} + +const asyncRouterMap = [ + { + path: '/', + name: 'cmdb', + component: BasicLayout, + meta: { title: 'CMDB', keepAlive: true }, + redirect: () => { + return store.getters.addRouters[0].children.find(item => !item.hidden) + } + }, + { + path: '*', redirect: '/404', hidden: true + } +] + +/** + * 基础路由 + * @type { *[] } + */ +export const constantRouterMap = [ + { + path: '/user', + component: UserLayout, + redirect: '/user/login', + hidden: true, + children: [ + { + path: 'login', + name: 'login', + component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login') + }, + { + path: 'register', + name: 'register', + component: () => import(/* webpackChunkName: "user" */ '@/views/user/Register') + }, + { + path: 'register-result', + name: 'registerResult', + component: () => import(/* webpackChunkName: "user" */ '@/views/user/RegisterResult') + } + ] + }, + + { + path: '/404', + component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404') + } + +] diff --git a/cmdb-ui/src/core/bootstrap.js b/cmdb-ui/src/core/bootstrap.js new file mode 100644 index 0000000..155a9cc --- /dev/null +++ b/cmdb-ui/src/core/bootstrap.js @@ -0,0 +1,34 @@ +import Vue from 'vue' +import store from '@/store/' +import { + ACCESS_TOKEN, + DEFAULT_COLOR, + DEFAULT_THEME, + DEFAULT_LAYOUT_MODE, + DEFAULT_COLOR_WEAK, + SIDEBAR_TYPE, + DEFAULT_FIXED_HEADER, + DEFAULT_FIXED_HEADER_HIDDEN, + DEFAULT_FIXED_SIDEMENU, + DEFAULT_CONTENT_WIDTH_TYPE, + DEFAULT_MULTI_TAB +} from '@/store/mutation-types' +import config from '@/config/defaultSettings' + +export default function Initializer () { + console.log(`API_URL: ${process.env.VUE_APP_API_BASE_URL}`) + + store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true)) + store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme)) + store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout)) + store.commit('TOGGLE_FIXED_HEADER', Vue.ls.get(DEFAULT_FIXED_HEADER, config.fixedHeader)) + store.commit('TOGGLE_FIXED_SIDERBAR', Vue.ls.get(DEFAULT_FIXED_SIDEMENU, config.fixSiderbar)) + store.commit('TOGGLE_CONTENT_WIDTH', Vue.ls.get(DEFAULT_CONTENT_WIDTH_TYPE, config.contentWidth)) + store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader)) + store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak)) + store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor)) + store.commit('TOGGLE_MULTI_TAB', Vue.ls.get(DEFAULT_MULTI_TAB, config.multiTab)) + store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN)) + + // last step +} diff --git a/cmdb-ui/src/core/directives/action.js b/cmdb-ui/src/core/directives/action.js new file mode 100644 index 0000000..bdc9ec0 --- /dev/null +++ b/cmdb-ui/src/core/directives/action.js @@ -0,0 +1,34 @@ +import Vue from 'vue' +import store from '@/store' + +/** + * Action 权限指令 + * 指令用法： + * - 在需要控制 action 级别权限的组件上使用 v-action:[method] , 如下： + * 添加用户 + * 删除用户 + * 修改 + * + * - 当前用户没有权限时，组件上使用了该指令则会被隐藏 + * - 当后台权限跟 pro 提供的模式不同时，只需要针对这里的权限过滤进行修改即可 + * + * @see https://github.com/sendya/ant-design-pro-vue/pull/53 + */ +const action = Vue.directive('action', { + inserted: function (el, binding, vnode) { + const actionName = binding.arg + const roles = store.getters.roles + const elVal = vnode.context.$route.meta.permission + const permissionId = elVal instanceof String && [elVal] || elVal + roles.permissions.forEach(p => { + if (!permissionId.includes(p.permissionId)) { + return + } + if (p.actionList && !p.actionList.includes(actionName)) { + el.parentNode && el.parentNode.removeChild(el) || (el.style.display = 'none') + } + }) + } +}) + +export default action diff --git a/cmdb-ui/src/core/icons.js b/cmdb-ui/src/core/icons.js new file mode 100644 index 0000000..46b7261 --- /dev/null +++ b/cmdb-ui/src/core/icons.js @@ -0,0 +1,11 @@ +/** + * Custom icon list + * All icons are loaded here for easy management + * @see https://vue.ant.design/components/icon/#Custom-Font-Icon + * + * 自定义图标加载表 + * 所有图标均从这里加载，方便管理 + */ +import bxAnaalyse from '@/assets/icons/bx-analyse.svg?inline' // path to your '*.svg?inline' file. + +export { bxAnaalyse } diff --git a/cmdb-ui/src/core/lazy_lib/components_use.js b/cmdb-ui/src/core/lazy_lib/components_use.js new file mode 100644 index 0000000..c7c28c3 --- /dev/null +++ b/cmdb-ui/src/core/lazy_lib/components_use.js @@ -0,0 +1,99 @@ + +/* eslint-disable */ +/** + * 该文件是为了按需加载，剔除掉了一些不需要的框架组件。 + * 减少了编译支持库包大小 + * + * 当需要更多组件依赖时，在该文件加入即可 + */ +import Vue from 'vue' +import { + LocaleProvider, + Layout, + Input, + InputNumber, + Button, + Switch, + Radio, + Checkbox, + Select, + Card, + Form, + Row, + Col, + Modal, + Table, + Tabs, + Icon, + Badge, + Popover, + Dropdown, + List, + Avatar, + Breadcrumb, + Steps, + Spin, + Menu, + Drawer, + Tooltip, + Alert, + Tag, + Divider, + DatePicker, + TimePicker, + Upload, + Progress, + Skeleton, + Popconfirm, + message, + notification +} from 'ant-design-vue' +// import VueCropper from 'vue-cropper' + +Vue.use(LocaleProvider) +Vue.use(Layout) +Vue.use(Input) +Vue.use(InputNumber) +Vue.use(Button) +Vue.use(Switch) +Vue.use(Radio) +Vue.use(Checkbox) +Vue.use(Select) +Vue.use(Card) +Vue.use(Form) +Vue.use(Row) +Vue.use(Col) +Vue.use(Modal) +Vue.use(Table) +Vue.use(Tabs) +Vue.use(Icon) +Vue.use(Badge) +Vue.use(Popover) +Vue.use(Dropdown) +Vue.use(List) +Vue.use(Avatar) +Vue.use(Breadcrumb) +Vue.use(Steps) +Vue.use(Spin) +Vue.use(Menu) +Vue.use(Drawer) +Vue.use(Tooltip) +Vue.use(Alert) +Vue.use(Tag) +Vue.use(Divider) +Vue.use(DatePicker) +Vue.use(TimePicker) +Vue.use(Upload) +Vue.use(Progress) +Vue.use(Skeleton) +Vue.use(Popconfirm) +// Vue.use(VueCropper) +Vue.use(notification) + +Vue.prototype.$confirm = Modal.confirm +Vue.prototype.$message = message +Vue.prototype.$notification = notification +Vue.prototype.$info = Modal.info +Vue.prototype.$success = Modal.success +Vue.prototype.$error = Modal.error +Vue.prototype.$warning = Modal.warning \ No newline at end of file diff --git a/cmdb-ui/src/core/lazy_use.js b/cmdb-ui/src/core/lazy_use.js new file mode 100644 index 0000000..24d50dc --- /dev/null +++ b/cmdb-ui/src/core/lazy_use.js @@ -0,0 +1,20 @@ +import Vue from 'vue' +import VueStorage from 'vue-ls' +import config from '@/config/defaultSettings' + +// base library +import '@/core/lazy_lib/components_use' +import Viser from 'viser-vue' + +// ext library +import VueClipboard from 'vue-clipboard2' +import PermissionHelper from '@/utils/helper/permission' +import './directives/action' + +VueClipboard.config.autoSetContainer = true + +Vue.use(Viser) + +Vue.use(VueStorage, config.storageOptions) +Vue.use(VueClipboard) +Vue.use(PermissionHelper) diff --git a/cmdb-ui/src/core/use.js b/cmdb-ui/src/core/use.js new file mode 100644 index 0000000..9f051c7 --- /dev/null +++ b/cmdb-ui/src/core/use.js @@ -0,0 +1,25 @@ +import Vue from 'vue' +import VueStorage from 'vue-ls' +import config from '@/config/defaultSettings' + +// base library +import Antd from 'ant-design-vue' +import Viser from 'viser-vue' +import VueCropper from 'vue-cropper' +import 'ant-design-vue/dist/antd.less' + +// ext library +import VueClipboard from 'vue-clipboard2' +import PermissionHelper from '@/utils/helper/permission' +// import '@/components/use' +import './directives/action' + +VueClipboard.config.autoSetContainer = true + +Vue.use(Antd) +Vue.use(Viser) + +Vue.use(VueStorage, config.storageOptions) +Vue.use(VueClipboard) +Vue.use(PermissionHelper) +Vue.use(VueCropper) diff --git a/cmdb-ui/src/layouts/BasicLayout.vue b/cmdb-ui/src/layouts/BasicLayout.vue new file mode 100644 index 0000000..355ecea --- /dev/null +++ b/cmdb-ui/src/layouts/BasicLayout.vue @@ -0,0 +1,192 @@ + + + + + diff --git a/cmdb-ui/src/layouts/BlankLayout.vue b/cmdb-ui/src/layouts/BlankLayout.vue new file mode 100644 index 0000000..1bfbfbf --- /dev/null +++ b/cmdb-ui/src/layouts/BlankLayout.vue @@ -0,0 +1,16 @@ + + + + + diff --git a/cmdb-ui/src/layouts/PageView.vue b/cmdb-ui/src/layouts/PageView.vue new file mode 100644 index 0000000..4857405 --- /dev/null +++ b/cmdb-ui/src/layouts/PageView.vue @@ -0,0 +1,181 @@ + + + + + diff --git a/cmdb-ui/src/layouts/RouteView.vue b/cmdb-ui/src/layouts/RouteView.vue new file mode 100644 index 0000000..58fa742 --- /dev/null +++ b/cmdb-ui/src/layouts/RouteView.vue @@ -0,0 +1,32 @@ + diff --git a/cmdb-ui/src/layouts/UserLayout.vue b/cmdb-ui/src/layouts/UserLayout.vue new file mode 100644 index 0000000..66dc239 --- /dev/null +++ b/cmdb-ui/src/layouts/UserLayout.vue @@ -0,0 +1,139 @@ + + + + + diff --git a/cmdb-ui/src/layouts/index.js b/cmdb-ui/src/layouts/index.js new file mode 100644 index 0000000..1d62d6c --- /dev/null +++ b/cmdb-ui/src/layouts/index.js @@ -0,0 +1,7 @@ +import UserLayout from './UserLayout' +import BlankLayout from './BlankLayout' +import BasicLayout from './BasicLayout' +import RouteView from './RouteView' +import PageView from './PageView' + +export { UserLayout, BasicLayout, BlankLayout, RouteView, PageView } diff --git a/cmdb-ui/src/main.js b/cmdb-ui/src/main.js new file mode 100644 index 0000000..bc8debb --- /dev/null +++ b/cmdb-ui/src/main.js @@ -0,0 +1,27 @@ +// ie polyfill +import '@babel/polyfill' + +import Vue from 'vue' +import EventBus from './EventBus' +import App from './App.vue' +import router from './router' +import store from './store/' +import { VueAxios } from './utils/request' + +import bootstrap from './core/bootstrap' +import './core/use' +import './permission' // permission control +import './utils/filter' // global filter +Vue.config.productionTip = false + +Vue.prototype.$bus = EventBus + +// mount axios Vue.$http and this.$http +Vue.use(VueAxios) + +new Vue({ + router, + store, + created: bootstrap, + render: h => h(App) +}).$mount('#app') diff --git a/cmdb-ui/src/permission.js b/cmdb-ui/src/permission.js new file mode 100644 index 0000000..5dea6e6 --- /dev/null +++ b/cmdb-ui/src/permission.js @@ -0,0 +1,60 @@ +import Vue from 'vue' +import router from './router' +import store from './store' + +import NProgress from 'nprogress' // progress bar +import 'nprogress/nprogress.css' // progress bar style +import notification from 'ant-design-vue/es/notification' +import { setDocumentTitle, domTitle } from '@/utils/domUtil' +import config from '@/config/defaultSettings' +import { ACCESS_TOKEN } from './store/mutation-types' + +NProgress.configure({ showSpinner: false }) // NProgress Configuration + +router.beforeEach((to, from, next) => { + NProgress.start() // start progress bar + to.meta && (typeof to.meta.title !== 'undefined' && setDocumentTitle(`${to.meta.title} - ${domTitle}`)) + if ((config.useSSO || (!config.useSSO && Vue.ls.get(ACCESS_TOKEN))) && store.getters.roles.length === 0) { + store + .dispatch('GetInfo') + .then(res => { + const roles = res.result && res.result.role + store.dispatch('GenerateRoutes', { roles }).then(() => { + // 根据roles权限生成可访问的路由表 + // 动态添加可访问路由表 + router.addRoutes(store.getters.addRouters) + + const redirect = decodeURIComponent(from.query.redirect || to.path) + if (to.path === redirect) { + // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record + next({ ...to, replace: true }) + } else { + // 跳转到目的路由 + next({ path: redirect }) + } + }) + }) + .catch((e) => { + console.log(e) + notification.error({ + message: '错误', + description: '请求用户信息失败，请重试' + }) + setTimeout(() => { + store.dispatch('Logout') + }, 3000) + }) + } else if (to.path === '/user/login' && !config.useSSO && store.getters.roles.length !== 0) { + next({ path: '/' }) + NProgress.done() + } else if (!config.useSSO && !Vue.ls.get(ACCESS_TOKEN) && to.path !== '/user/login') { + next({ path: '/user/login', query: { redirect: to.fullPath } }) + NProgress.done() + } else { + next() + } +}) + +router.afterEach(() => { + NProgress.done() // finish progress bar +}) diff --git a/cmdb-ui/src/router/README.md b/cmdb-ui/src/router/README.md new file mode 100644 index 0000000..6618270 --- /dev/null +++ b/cmdb-ui/src/router/README.md @@ -0,0 +1,145 @@ +路由/菜单说明 +==== + + + +配置文件路径 +---- + +`@/config/router.config.js` + + + +格式和说明 +---- + +```javascript +/** + * 路由配置说明： + * 建议：sider menu 请不要超过三级菜单，若超过三级菜单，则应该设计为顶部主菜单 配合左侧次级菜单 + * + **/ + { + redirect: noredirect, + name: 'router-name', + hidden: true, + meta: { + title: 'title', + icon: 'a-icon', + keepAlive: true, + hiddenHeaderContent: true, + } +} +``` + + + +`{ Route }` 对象 + +| 参数 | 说明 | 类型 | 默认值 | +| -------- | ----------------------------------------- | ------- | ------ | +| hidden | 控制路由是否显示在 sidebar | boolean | false | +| redirect | 重定向地址, 访问这个路由时,自定进行重定向 | string | - | +| name | 路由名称, 必须设置,且不能重名 | string | - | +| meta | 路由元信息（路由附带扩展信息） | object | {} | +| hideChildrenInMenu | 强制菜单显示为Item而不是SubItem(配合 meta.hidden) | boolean | - | + + +`{ Meta }` 路由元信息对象 + +| 参数 | 说明 | 类型 | 默认值 | +| ------------------- | ------------------------------------------------------------ | ------- | ------ | +| title | 路由标题, 用于显示面包屑, 页面标题 *推荐设置 | string | - | +| icon | 路由在 menu 上显示的图标 | [string,svg] | - | +| keepAlive | 缓存该路由 | boolean | false | +| hidden | 配合`hideChildrenInMenu`使用，用于隐藏菜单时，提供递归到父菜单显示 选中菜单项_（可参考 个人页 配置方式）_ | boolean | false | +| hiddenHeaderContent | *特殊 隐藏 [PageHeader](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/layout/PageHeader.vue#L14) 组件中的页面带的 面包屑和页面标题栏 | boolean | false | +| permission | 与项目提供的权限拦截匹配的权限，如果不匹配，则会被禁止访问该路由页面 | array | [] | + +> 路由自定义 `Icon` 请引入自定义 `svg` Icon 文件，然后传递给路由的 `meta.icon` 参数即可 + +路由例子 +---- + +```ecmascript 6 +const asyncRouterMap = [ + { + path: '/', + name: 'index', + component: BasicLayout, + meta: { title: '首页' }, + redirect: '/dashboard/analysis', + children: [ + { + path: '/dashboard', + component: RouteView, + name: 'dashboard', + redirect: '/dashboard/workplace', + meta: {title: '仪表盘', icon: 'dashboard', permission: ['dashboard']}, + children: [ + { + path: '/dashboard/analysis', + name: 'Analysis', + component: () => import('@/views/dashboard/Analysis'), + meta: {title: '分析页', permission: ['dashboard']} + }, + { + path: '/dashboard/monitor', + name: 'Monitor', + hidden: true, + component: () => import('@/views/dashboard/Monitor'), + meta: {title: '监控页', permission: ['dashboard']} + }, + { + path: '/dashboard/workplace', + name: 'Workplace', + component: () => import('@/views/dashboard/Workplace'), + meta: {title: '工作台', permission: ['dashboard']} + } + ] + }, + + // result + { + path: '/result', + name: 'result', + component: PageView, + redirect: '/result/success', + meta: { title: '结果页', icon: 'check-circle-o', permission: [ 'result' ] }, + children: [ + { + path: '/result/success', + name: 'ResultSuccess', + component: () => import(/* webpackChunkName: "result" */ '@/views/result/Success'), + // 该页面隐藏面包屑和页面标题栏 + meta: { title: '成功', hiddenHeaderContent: true, permission: [ 'result' ] } + }, + { + path: '/result/fail', + name: 'ResultFail', + component: () => import(/* webpackChunkName: "result" */ '@/views/result/Error'), + // 该页面隐藏面包屑和页面标题栏 + meta: { title: '失败', hiddenHeaderContent: true, permission: [ 'result' ] } + } + ] + }, + ... + ] + }, +] +``` + +> 1. 请注意 `component: () => import('..') ` 方式引入路由的页面组件为 懒加载模式。具体可以看 [Vue 官方文档](https://router.vuejs.org/zh/guide/advanced/lazy-loading.html) +> 2. 增加新的路由应该增加在 '/' (index) 路由的 `children` 内 +> 3. 子路由的父级路由必须有 `router-view` 才能让子路由渲染出来，请仔细查阅 vue-router 文档 +> 4. `permission` 可以进行自定义修改，只需要对这个模块进行自定义修改即可 [src/store/modules/permission.js#L10](https://github.com/sendya/ant-design-pro-vue/blob/master/src/store/modules/permission.js#L10) + + + +附权限路由结构： + +![权限结构](https://static-2.loacg.com/open/static/github/permissions.png) + + + +第二种前端路由由后端动态生成的设计，可以前往官网文档 https://pro.loacg.com/docs/authority-management 参考 \ No newline at end of file diff --git a/cmdb-ui/src/router/index.js b/cmdb-ui/src/router/index.js new file mode 100644 index 0000000..f3d4bd2 --- /dev/null +++ b/cmdb-ui/src/router/index.js @@ -0,0 +1,28 @@ +import Vue from 'vue' +import Router from 'vue-router' +import { constantRouterMap } from '@/config/router.config' + +Vue.use(Router) + +// export default new Router({ +// mode: 'history', +// base: process.env.BASE_URL, +// scrollBehavior: () => ({ y: 0 }), +// routes: constantRouterMap +// }) + +const createRouter = () => new Router({ + mode: 'history', + base: process.env.BASE_URL, + scrollBehavior: () => ({ y: 0 }), + routes: constantRouterMap +}) + +const router = createRouter() + +export function resetRouter () { + const newRouter = createRouter() + router.matcher = newRouter.matcher // reset router +} + +export default router diff --git a/cmdb-ui/src/store/getters.js b/cmdb-ui/src/store/getters.js new file mode 100644 index 0000000..8805d33 --- /dev/null +++ b/cmdb-ui/src/store/getters.js @@ -0,0 +1,15 @@ +const getters = { + device: state => state.app.device, + theme: state => state.app.theme, + color: state => state.app.color, + token: state => state.user.token, + avatar: state => state.user.avatar, + nickname: state => state.user.name, + welcome: state => state.user.welcome, + roles: state => state.user.roles, + userInfo: state => state.user.info, + addRouters: state => state.permission.addRouters, + multiTab: state => state.app.multiTab +} + +export default getters diff --git a/cmdb-ui/src/store/index.js b/cmdb-ui/src/store/index.js new file mode 100644 index 0000000..4e8529a --- /dev/null +++ b/cmdb-ui/src/store/index.js @@ -0,0 +1,27 @@ +import Vue from 'vue' +import Vuex from 'vuex' + +import app from './modules/app' +import user from './modules/user' +import permission from './modules/permission' +import getters from './getters' + +Vue.use(Vuex) + +export default new Vuex.Store({ + modules: { + app, + user, + permission + }, + state: { + + }, + mutations: { + + }, + actions: { + + }, + getters +}) diff --git a/cmdb-ui/src/store/modules/app.js b/cmdb-ui/src/store/modules/app.js new file mode 100644 index 0000000..9cc8d4e --- /dev/null +++ b/cmdb-ui/src/store/modules/app.js @@ -0,0 +1,123 @@ +import Vue from 'vue' +import { + SIDEBAR_TYPE, + DEFAULT_THEME, + DEFAULT_LAYOUT_MODE, + DEFAULT_COLOR, + DEFAULT_COLOR_WEAK, + DEFAULT_FIXED_HEADER, + DEFAULT_FIXED_SIDEMENU, + DEFAULT_FIXED_HEADER_HIDDEN, + DEFAULT_CONTENT_WIDTH_TYPE, + DEFAULT_MULTI_TAB +} from '@/store/mutation-types' + +const app = { + state: { + name: 'cmdb', + sidebar: true, + device: 'desktop', + theme: '', + layout: '', + contentWidth: '', + fixedHeader: true, + fixSiderbar: true, + autoHideHeader: true, + color: null, + weak: false, + multiTab: false + }, + mutations: { + SET_SIDEBAR_TYPE: (state, type) => { + state.sidebar = type + Vue.ls.set(SIDEBAR_TYPE, type) + }, + CLOSE_SIDEBAR: (state) => { + Vue.ls.set(SIDEBAR_TYPE, true) + state.sidebar = false + }, + TOGGLE_DEVICE: (state, device) => { + state.device = device + }, + TOGGLE_THEME: (state, theme) => { + // setStore('_DEFAULT_THEME', theme) + Vue.ls.set(DEFAULT_THEME, theme) + state.theme = theme + }, + TOGGLE_LAYOUT_MODE: (state, layout) => { + Vue.ls.set(DEFAULT_LAYOUT_MODE, layout) + state.layout = layout + }, + TOGGLE_FIXED_HEADER: (state, fixed) => { + Vue.ls.set(DEFAULT_FIXED_HEADER, fixed) + state.fixedHeader = fixed + }, + TOGGLE_FIXED_SIDERBAR: (state, fixed) => { + Vue.ls.set(DEFAULT_FIXED_SIDEMENU, fixed) + state.fixSiderbar = fixed + }, + TOGGLE_FIXED_HEADER_HIDDEN: (state, show) => { + Vue.ls.set(DEFAULT_FIXED_HEADER_HIDDEN, show) + state.autoHideHeader = show + }, + TOGGLE_CONTENT_WIDTH: (state, type) => { + Vue.ls.set(DEFAULT_CONTENT_WIDTH_TYPE, type) + state.contentWidth = type + }, + TOGGLE_COLOR: (state, color) => { + Vue.ls.set(DEFAULT_COLOR, color) + state.color = color + }, + TOGGLE_WEAK: (state, flag) => { + Vue.ls.set(DEFAULT_COLOR_WEAK, flag) + state.weak = flag + }, + TOGGLE_MULTI_TAB: (state, bool) => { + Vue.ls.set(DEFAULT_MULTI_TAB, bool) + state.multiTab = bool + } + }, + actions: { + setSidebar ({ commit }, type) { + commit('SET_SIDEBAR_TYPE', type) + }, + CloseSidebar ({ commit }) { + commit('CLOSE_SIDEBAR') + }, + ToggleDevice ({ commit }, device) { + commit('TOGGLE_DEVICE', device) + }, + ToggleTheme ({ commit }, theme) { + commit('TOGGLE_THEME', theme) + }, + ToggleLayoutMode ({ commit }, mode) { + commit('TOGGLE_LAYOUT_MODE', mode) + }, + ToggleFixedHeader ({ commit }, fixedHeader) { + if (!fixedHeader) { + commit('TOGGLE_FIXED_HEADER_HIDDEN', false) + } + commit('TOGGLE_FIXED_HEADER', fixedHeader) + }, + ToggleFixSiderbar ({ commit }, fixSiderbar) { + commit('TOGGLE_FIXED_SIDERBAR', fixSiderbar) + }, + ToggleFixedHeaderHidden ({ commit }, show) { + commit('TOGGLE_FIXED_HEADER_HIDDEN', show) + }, + ToggleContentWidth ({ commit }, type) { + commit('TOGGLE_CONTENT_WIDTH', type) + }, + ToggleColor ({ commit }, color) { + commit('TOGGLE_COLOR', color) + }, + ToggleWeak ({ commit }, weakFlag) { + commit('TOGGLE_WEAK', weakFlag) + }, + ToggleMultiTab ({ commit }, bool) { + commit('TOGGLE_MULTI_TAB', bool) + } + } +} + +export default app diff --git a/cmdb-ui/src/store/modules/permission.js b/cmdb-ui/src/store/modules/permission.js new file mode 100644 index 0000000..5139d27 --- /dev/null +++ b/cmdb-ui/src/store/modules/permission.js @@ -0,0 +1,62 @@ +import { generatorDynamicRouter, constantRouterMap } from '@/config/router.config' + +/** + * 过滤账户是否拥有某一个权限，并将菜单从加载列表移除 + * + * @param permission + * @param route + * @returns {boolean} + */ +function hasPermission (permission, route) { + if (route.meta && route.meta.permission) { + let flag = false + for (let i = 0, len = permission.length; i < len; i++) { + flag = route.meta.permission.includes(permission[i]) + if (flag) { + return true + } + } + return false + } + return true +} + +function filterAsyncRouter (routerMap, roles) { + const accessedRouters = routerMap.filter(route => { + if (hasPermission(roles.permissions, route)) { + if (route.children && route.children.length) { + route.children = filterAsyncRouter(route.children, roles) + } + return true + } + return false + }) + return accessedRouters +} + +const permission = { + state: { + routers: constantRouterMap, + addRouters: [] + }, + mutations: { + SET_ROUTERS: (state, routers) => { + state.addRouters = routers + state.routers = constantRouterMap.concat(routers) + } + }, + actions: { + GenerateRoutes ({ commit }, data) { + return new Promise(resolve => { + const { roles } = data + generatorDynamicRouter(roles).then(routers => { + const accessedRouters = filterAsyncRouter(routers, roles) + commit('SET_ROUTERS', accessedRouters) + resolve() + }) + }) + } + } +} + +export default permission diff --git a/cmdb-ui/src/store/modules/user.js b/cmdb-ui/src/store/modules/user.js new file mode 100644 index 0000000..746c6ef --- /dev/null +++ b/cmdb-ui/src/store/modules/user.js @@ -0,0 +1,95 @@ +import Vue from 'vue' +import { login, getInfo, logout } from '@/api/login' +import { ACCESS_TOKEN } from '@/store/mutation-types' +import { welcome } from '@/utils/util' + +const user = { + state: { + token: '', + name: '', + welcome: '', + avatar: '', + roles: [], + info: {} + }, + + mutations: { + SET_TOKEN: (state, token) => { + state.token = token + }, + SET_NAME: (state, { name, welcome }) => { + state.name = name + state.welcome = welcome + }, + SET_AVATAR: (state, avatar) => { + state.avatar = avatar + }, + SET_ROLES: (state, roles) => { + state.roles = roles + }, + SET_INFO: (state, info) => { + state.info = info + } + }, + + actions: { + // 登录 + Login ({ commit }, userInfo) { + return new Promise((resolve, reject) => { + login(userInfo).then(response => { + Vue.ls.set(ACCESS_TOKEN, response.token, 7 * 24 * 60 * 60 * 1000) + commit('SET_TOKEN', response.token) + resolve() + }).catch(error => { + reject(error) + }) + }) + }, + + // 获取用户信息 + GetInfo ({ commit }) { + return new Promise((resolve, reject) => { + getInfo().then(response => { + const result = response.result + + const role = result.role + role.permissions = result.role.permissions + role.permissions.map(per => { + if (per.actionEntitySet != null && per.actionEntitySet.length > 0) { + const action = per.actionEntitySet.map(action => { return action.action }) + per.actionList = action + } + }) + role.permissionList = role.permissions.map(permission => { return permission }) + commit('SET_ROLES', result.role) + commit('SET_INFO', result) + commit('SET_NAME', { name: result.name, welcome: welcome() }) + commit('SET_AVATAR', result.avatar) + + resolve(response) + }).catch(error => { + reject(error) + }) + }) + }, + + // 登出 + Logout ({ commit, state }) { + return new Promise((resolve) => { + commit('SET_TOKEN', '') + commit('SET_ROLES', []) + Vue.ls.remove(ACCESS_TOKEN) + + logout(state.token).then(() => { + window.location.reload() + resolve() + }).catch(() => { + resolve() + }) + }) + } + + } +} + +export default user diff --git a/cmdb-ui/src/store/mutation-types.js b/cmdb-ui/src/store/mutation-types.js new file mode 100644 index 0000000..2cf2dbb --- /dev/null +++ b/cmdb-ui/src/store/mutation-types.js @@ -0,0 +1,16 @@ +export const ACCESS_TOKEN = 'Access-Token' +export const SIDEBAR_TYPE = 'SIDEBAR_TYPE' +export const DEFAULT_THEME = 'DEFAULT_THEME' +export const DEFAULT_LAYOUT_MODE = 'DEFAULT_LAYOUT_MODE' +export const DEFAULT_COLOR = 'DEFAULT_COLOR' +export const DEFAULT_COLOR_WEAK = 'DEFAULT_COLOR_WEAK' +export const DEFAULT_FIXED_HEADER = 'DEFAULT_FIXED_HEADER' +export const DEFAULT_FIXED_SIDEMENU = 'DEFAULT_FIXED_SIDEMENU' +export const DEFAULT_FIXED_HEADER_HIDDEN = 'DEFAULT_FIXED_HEADER_HIDDEN' +export const DEFAULT_CONTENT_WIDTH_TYPE = 'DEFAULT_CONTENT_WIDTH_TYPE' +export const DEFAULT_MULTI_TAB = 'DEFAULT_MULTI_TAB' + +export const CONTENT_WIDTH_TYPE = { + Fluid: 'Fluid', + Fixed: 'Fixed' +} diff --git a/cmdb-ui/src/utils/axios.js b/cmdb-ui/src/utils/axios.js new file mode 100644 index 0000000..3b91f6b --- /dev/null +++ b/cmdb-ui/src/utils/axios.js @@ -0,0 +1,35 @@ +const VueAxios = { + vm: {}, + // eslint-disable-next-line no-unused-vars + install (Vue, instance) { + if (this.installed) { + return + } + this.installed = true + + if (!instance) { + // eslint-disable-next-line no-console + console.error('You have to install axios') + return + } + + Vue.axios = instance + + Object.defineProperties(Vue.prototype, { + axios: { + get: function get () { + return instance + } + }, + $http: { + get: function get () { + return instance + } + } + }) + } +} + +export { + VueAxios +} diff --git a/cmdb-ui/src/utils/device.js b/cmdb-ui/src/utils/device.js new file mode 100644 index 0000000..0f350f3 --- /dev/null +++ b/cmdb-ui/src/utils/device.js @@ -0,0 +1,33 @@ +import enquireJs from 'enquire.js' + +export const DEVICE_TYPE = { + DESKTOP: 'desktop', + TABLET: 'tablet', + MOBILE: 'mobile' +} + +export const deviceEnquire = function (callback) { + const matchDesktop = { + match: () => { + callback && callback(DEVICE_TYPE.DESKTOP) + } + } + + const matchLablet = { + match: () => { + callback && callback(DEVICE_TYPE.TABLET) + } + } + + const matchMobile = { + match: () => { + callback && callback(DEVICE_TYPE.MOBILE) + } + } + + // screen and (max-width: 1087.99px) + enquireJs + .register('screen and (max-width: 576px)', matchMobile) + .register('screen and (min-width: 576px) and (max-width: 1199px)', matchLablet) + .register('screen and (min-width: 1200px)', matchDesktop) +} diff --git a/cmdb-ui/src/utils/domUtil.js b/cmdb-ui/src/utils/domUtil.js new file mode 100644 index 0000000..58db9a8 --- /dev/null +++ b/cmdb-ui/src/utils/domUtil.js @@ -0,0 +1,19 @@ +export const setDocumentTitle = function (title) { + document.title = title + const ua = navigator.userAgent + // eslint-disable-next-line + const regex = /\bMicroMessenger\/([\d\.]+)/ + if (regex.test(ua) && /ip(hone|od|ad)/i.test(ua)) { + const i = document.createElement('iframe') + i.src = '/favicon.ico' + i.style.display = 'none' + i.onload = function () { + setTimeout(function () { + i.remove() + }, 9) + } + document.body.appendChild(i) + } +} + +export const domTitle = 'CMDB' diff --git a/cmdb-ui/src/utils/filter.js b/cmdb-ui/src/utils/filter.js new file mode 100644 index 0000000..45702c6 --- /dev/null +++ b/cmdb-ui/src/utils/filter.js @@ -0,0 +1,20 @@ +import Vue from 'vue' +import moment from 'moment' +import 'moment/locale/zh-cn' +moment.locale('zh-cn') + +Vue.filter('NumberFormat', function (value) { + if (!value) { + return '0' + } + const intPartFormat = value.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断 + return intPartFormat +}) + +Vue.filter('dayjs', function (dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') { + return moment(dataStr).format(pattern) +}) + +Vue.filter('moment', function (dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') { + return moment(dataStr).format(pattern) +}) diff --git a/cmdb-ui/src/utils/helper/permission.js b/cmdb-ui/src/utils/helper/permission.js new file mode 100644 index 0000000..a964324 --- /dev/null +++ b/cmdb-ui/src/utils/helper/permission.js @@ -0,0 +1,51 @@ +const PERMISSION_ENUM = { + 'add': { key: 'add', label: '新增' }, + 'delete': { key: 'delete', label: '删除' }, + 'edit': { key: 'edit', label: '修改' }, + 'query': { key: 'query', label: '查询' }, + 'get': { key: 'get', label: '详情' }, + 'enable': { key: 'enable', label: '启用' }, + 'disable': { key: 'disable', label: '禁用' }, + 'import': { key: 'import', label: '导入' }, + 'export': { key: 'export', label: '导出' } +} + +function plugin (Vue) { + if (plugin.installed) { + return + } + + !Vue.prototype.$auth && Object.defineProperties(Vue.prototype, { + $auth: { + get () { + const _this = this + return (permissions) => { + const [permission, action] = permissions.split('.') + const permissionList = _this.$store.getters.roles.permissions + return permissionList.find((val) => { + return val.permissionId === permission + }).actionList.findIndex((val) => { + return val === action + }) > -1 + } + } + } + }) + + !Vue.prototype.$enum && Object.defineProperties(Vue.prototype, { + $enum: { + get () { + // const _this = this; + return (val) => { + let result = PERMISSION_ENUM + val && val.split('.').forEach(v => { + result = result && result[v] || null + }) + return result + } + } + } + }) +} + +export default plugin diff --git a/cmdb-ui/src/utils/mixin.js b/cmdb-ui/src/utils/mixin.js new file mode 100644 index 0000000..217732d --- /dev/null +++ b/cmdb-ui/src/utils/mixin.js @@ -0,0 +1,76 @@ +// import Vue from 'vue' +import { deviceEnquire, DEVICE_TYPE } from '@/utils/device' +import { mapState } from 'vuex' + +// const mixinsComputed = Vue.config.optionMergeStrategies.computed +// const mixinsMethods = Vue.config.optionMergeStrategies.methods + +const mixin = { + computed: { + ...mapState({ + layoutMode: state => state.app.layout, + navTheme: state => state.app.theme, + primaryColor: state => state.app.color, + colorWeak: state => state.app.weak, + fixedHeader: state => state.app.fixedHeader, + fixSiderbar: state => state.app.fixSiderbar, + fixSidebar: state => state.app.fixSiderbar, + contentWidth: state => state.app.contentWidth, + autoHideHeader: state => state.app.autoHideHeader, + sidebarOpened: state => state.app.sidebar, + multiTab: state => state.app.multiTab + }) + }, + methods: { + isTopMenu () { + return this.layoutMode === 'topmenu' + }, + isSideMenu () { + return !this.isTopMenu() + } + } +} + +const mixinDevice = { + computed: { + ...mapState({ + device: state => state.app.device + }) + }, + methods: { + isMobile () { + return this.device === DEVICE_TYPE.MOBILE + }, + isDesktop () { + return this.device === DEVICE_TYPE.DESKTOP + }, + isTablet () { + return this.device === DEVICE_TYPE.TABLET + } + } +} + +const AppDeviceEnquire = { + mounted () { + const { $store } = this + deviceEnquire(deviceType => { + switch (deviceType) { + case DEVICE_TYPE.DESKTOP: + $store.commit('TOGGLE_DEVICE', 'desktop') + $store.dispatch('setSidebar', true) + break + case DEVICE_TYPE.TABLET: + $store.commit('TOGGLE_DEVICE', 'tablet') + $store.dispatch('setSidebar', false) + break + case DEVICE_TYPE.MOBILE: + default: + $store.commit('TOGGLE_DEVICE', 'mobile') + $store.dispatch('setSidebar', true) + break + } + }) + } +} + +export { mixin, AppDeviceEnquire, mixinDevice } diff --git a/cmdb-ui/src/utils/permissions.js b/cmdb-ui/src/utils/permissions.js new file mode 100644 index 0000000..f8668bb --- /dev/null +++ b/cmdb-ui/src/utils/permissions.js @@ -0,0 +1,8 @@ +export function actionToObject (json) { + try { + return JSON.parse(json) + } catch (e) { + console.log('err', e.message) + } + return [] +} diff --git a/cmdb-ui/src/utils/request.js b/cmdb-ui/src/utils/request.js new file mode 100644 index 0000000..2c485c6 --- /dev/null +++ b/cmdb-ui/src/utils/request.js @@ -0,0 +1,48 @@ +import Vue from 'vue' +import axios from 'axios' +import store from '@/store' +import { VueAxios } from './axios' +import { ACCESS_TOKEN } from '@/store/mutation-types' + +// 创建 axios 实例 +const service = axios.create({ + baseURL: process.env.VUE_APP_API_BASE_URL, // api base_url + timeout: 6000, // 请求超时时间 + withCredentials: true, + crossDomain: true +}) + +const err = (error) => { + if (error.response) { + if (error.response.status === 401) { + store.dispatch('Logout') + } + } + return Promise.reject(error) +} + +// request interceptor +service.interceptors.request.use(config => { + const token = Vue.ls.get(ACCESS_TOKEN) + if (token) { + config.headers['Access-Token'] = token // 让每个请求携带自定义 token 请根据实际情况自行修改 + } + return config +}, err) + +// response interceptor +service.interceptors.response.use((response) => { + return response.data +}, err) + +const installer = { + vm: {}, + install (Vue) { + Vue.use(VueAxios, service) + } +} + +export { + installer as VueAxios, + service as axios +} diff --git a/cmdb-ui/src/utils/util.js b/cmdb-ui/src/utils/util.js new file mode 100644 index 0000000..82f5dbf --- /dev/null +++ b/cmdb-ui/src/utils/util.js @@ -0,0 +1,60 @@ +export function timeFix () { + const time = new Date() + const hour = time.getHours() + return hour < 9 ? '早上好' : hour <= 11 ? '上午好' : hour <= 13 ? '中午好' : hour < 20 ? '下午好' : '晚上好' +} + +export function welcome () { + const arr = ['休息一会儿吧', '准备吃什么呢?', '要不要打一把 DOTA', '我猜你可能累了'] + const index = Math.floor(Math.random() * arr.length) + return arr[index] +} + +/** + * 触发 window.resize + */ +export function triggerWindowResizeEvent () { + const event = document.createEvent('HTMLEvents') + event.initEvent('resize', true, true) + event.eventType = 'message' + window.dispatchEvent(event) +} + +export function handleScrollHeader (callback) { + let timer = 0 + + let beforeScrollTop = window.pageYOffset + callback = callback || function () {} + window.addEventListener( + 'scroll', + event => { + clearTimeout(timer) + timer = setTimeout(() => { + let direction = 'up' + const afterScrollTop = window.pageYOffset + const delta = afterScrollTop - beforeScrollTop + if (delta === 0) { + return false + } + direction = delta > 0 ? 'down' : 'up' + callback(direction) + beforeScrollTop = afterScrollTop + }, 50) + }, + false + ) +} + +/** + * Remove loading animate + * @param id parent element id or class + * @param timeout + */ +export function removeLoadingAnimate (id = '', timeout = 1500) { + if (id === '') { + return + } + setTimeout(() => { + document.body.removeChild(document.getElementById(id)) + }, timeout) +} diff --git a/cmdb-ui/src/utils/utils.less b/cmdb-ui/src/utils/utils.less new file mode 100644 index 0000000..ba75a67 --- /dev/null +++ b/cmdb-ui/src/utils/utils.less @@ -0,0 +1,50 @@ +.textOverflow() { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + word-break: break-all; +} + +.textOverflowMulti(@line: 3, @bg: #fff) { + position: relative; + max-height: @line * 1.5em; + margin-right: -1em; + padding-right: 1em; + overflow: hidden; + line-height: 1.5em; + text-align: justify; + &::before { + position: absolute; + right: 14px; + bottom: 0; + padding: 0 1px; + background: @bg; + content: '...'; + } + &::after { + position: absolute; + right: 14px; + width: 1em; + height: 1em; + margin-top: 0.2em; + background: white; + content: ''; + } +} + +// mixins for clearfix +// ------------------------ +.clearfix() { + zoom: 1; + &::before, + &::after { + display: table; + content: ' '; + } + &::after { + clear: both; + height: 0; + font-size: 0; + visibility: hidden; + } +} \ No newline at end of file diff --git a/cmdb-ui/src/views/404.vue b/cmdb-ui/src/views/404.vue new file mode 100644 index 0000000..8c1d8a1 --- /dev/null +++ b/cmdb-ui/src/views/404.vue @@ -0,0 +1,15 @@ + + + + + diff --git a/cmdb-ui/src/views/account/center/Index.vue b/cmdb-ui/src/views/account/center/Index.vue new file mode 100644 index 0000000..afa4fe2 --- /dev/null +++ b/cmdb-ui/src/views/account/center/Index.vue @@ -0,0 +1,288 @@ + + + + + diff --git a/cmdb-ui/src/views/account/center/page/App.vue b/cmdb-ui/src/views/account/center/page/App.vue new file mode 100644 index 0000000..853aeab --- /dev/null +++ b/cmdb-ui/src/views/account/center/page/App.vue @@ -0,0 +1,113 @@ + + + + + diff --git a/cmdb-ui/src/views/account/center/page/Article.vue b/cmdb-ui/src/views/account/center/page/Article.vue new file mode 100644 index 0000000..724c07c --- /dev/null +++ b/cmdb-ui/src/views/account/center/page/Article.vue @@ -0,0 +1,75 @@ + + + + + diff --git a/cmdb-ui/src/views/account/center/page/Project.vue b/cmdb-ui/src/views/account/center/page/Project.vue new file mode 100644 index 0000000..145232f --- /dev/null +++ b/cmdb-ui/src/views/account/center/page/Project.vue @@ -0,0 +1,109 @@ + + + + + diff --git a/cmdb-ui/src/views/account/center/page/index.js b/cmdb-ui/src/views/account/center/page/index.js new file mode 100644 index 0000000..b579b6a --- /dev/null +++ b/cmdb-ui/src/views/account/center/page/index.js @@ -0,0 +1,5 @@ +import AppPage from './App' +import ArticlePage from './Article' +import ProjectPage from './Project' + +export { AppPage, ArticlePage, ProjectPage } diff --git a/cmdb-ui/src/views/account/settings/AvatarModal.vue b/cmdb-ui/src/views/account/settings/AvatarModal.vue new file mode 100644 index 0000000..0ad9c41 --- /dev/null +++ b/cmdb-ui/src/views/account/settings/AvatarModal.vue @@ -0,0 +1,109 @@ + + + + diff --git a/cmdb-ui/src/views/account/settings/BaseSetting.vue b/cmdb-ui/src/views/account/settings/BaseSetting.vue new file mode 100644 index 0000000..6278aa1 --- /dev/null +++ b/cmdb-ui/src/views/account/settings/BaseSetting.vue @@ -0,0 +1,161 @@ + + + + + diff --git a/cmdb-ui/src/views/account/settings/Binding.vue b/cmdb-ui/src/views/account/settings/Binding.vue new file mode 100644 index 0000000..cbea7fc --- /dev/null +++ b/cmdb-ui/src/views/account/settings/Binding.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/cmdb-ui/src/views/account/settings/Custom.vue b/cmdb-ui/src/views/account/settings/Custom.vue new file mode 100644 index 0000000..02c3bc1 --- /dev/null +++ b/cmdb-ui/src/views/account/settings/Custom.vue @@ -0,0 +1,75 @@ + + + diff --git a/cmdb-ui/src/views/account/settings/Index.vue b/cmdb-ui/src/views/account/settings/Index.vue new file mode 100644 index 0000000..dd17a81 --- /dev/null +++ b/cmdb-ui/src/views/account/settings/Index.vue @@ -0,0 +1,155 @@ + + + + + diff --git a/cmdb-ui/src/views/account/settings/Notification.vue b/cmdb-ui/src/views/account/settings/Notification.vue new file mode 100644 index 0000000..cbea7fc --- /dev/null +++ b/cmdb-ui/src/views/account/settings/Notification.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/cmdb-ui/src/views/account/settings/Security.vue b/cmdb-ui/src/views/account/settings/Security.vue new file mode 100644 index 0000000..e806918 --- /dev/null +++ b/cmdb-ui/src/views/account/settings/Security.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/cmdb-ui/src/views/acl/module/addRoleRelationForm.vue b/cmdb-ui/src/views/acl/module/addRoleRelationForm.vue new file mode 100644 index 0000000..f2d0265 --- /dev/null +++ b/cmdb-ui/src/views/acl/module/addRoleRelationForm.vue @@ -0,0 +1,202 @@ + + + + + diff --git a/cmdb-ui/src/views/acl/module/permissionForm.vue b/cmdb-ui/src/views/acl/module/permissionForm.vue new file mode 100644 index 0000000..b473175 --- /dev/null +++ b/cmdb-ui/src/views/acl/module/permissionForm.vue @@ -0,0 +1,235 @@ + + + + + diff --git a/cmdb-ui/src/views/acl/module/resourceForm.vue b/cmdb-ui/src/views/acl/module/resourceForm.vue new file mode 100644 index 0000000..9f92fd5 --- /dev/null +++ b/cmdb-ui/src/views/acl/module/resourceForm.vue @@ -0,0 +1,191 @@ + + + + + diff --git a/cmdb-ui/src/views/acl/module/resourcePermForm.vue b/cmdb-ui/src/views/acl/module/resourcePermForm.vue new file mode 100644 index 0000000..8741c82 --- /dev/null +++ b/cmdb-ui/src/views/acl/module/resourcePermForm.vue @@ -0,0 +1,123 @@ + + + + + diff --git a/cmdb-ui/src/views/acl/module/resourcePermManageForm.vue b/cmdb-ui/src/views/acl/module/resourcePermManageForm.vue new file mode 100644 index 0000000..dc6c907 --- /dev/null +++ b/cmdb-ui/src/views/acl/module/resourcePermManageForm.vue @@ -0,0 +1,120 @@ + + + diff --git a/cmdb-ui/src/views/acl/module/resourceTypeForm.vue b/cmdb-ui/src/views/acl/module/resourceTypeForm.vue new file mode 100644 index 0000000..e2b2c8d --- /dev/null +++ b/cmdb-ui/src/views/acl/module/resourceTypeForm.vue @@ -0,0 +1,217 @@ + + + + + diff --git a/cmdb-ui/src/views/acl/module/roleForm.vue b/cmdb-ui/src/views/acl/module/roleForm.vue new file mode 100644 index 0000000..ce92473 --- /dev/null +++ b/cmdb-ui/src/views/acl/module/roleForm.vue @@ -0,0 +1,258 @@ + + + + + diff --git a/cmdb-ui/src/views/acl/module/userForm.vue b/cmdb-ui/src/views/acl/module/userForm.vue new file mode 100644 index 0000000..2612fc5 --- /dev/null +++ b/cmdb-ui/src/views/acl/module/userForm.vue @@ -0,0 +1,293 @@ + + + + + diff --git a/cmdb-ui/src/views/acl/permissions.vue b/cmdb-ui/src/views/acl/permissions.vue new file mode 100644 index 0000000..f55affe --- /dev/null +++ b/cmdb-ui/src/views/acl/permissions.vue @@ -0,0 +1,309 @@ + + + + + diff --git a/cmdb-ui/src/views/acl/resource_types.vue b/cmdb-ui/src/views/acl/resource_types.vue new file mode 100644 index 0000000..d663e74 --- /dev/null +++ b/cmdb-ui/src/views/acl/resource_types.vue @@ -0,0 +1,317 @@ + + + + + diff --git a/cmdb-ui/src/views/acl/resources.vue b/cmdb-ui/src/views/acl/resources.vue new file mode 100644 index 0000000..effc9e5 --- /dev/null +++ b/cmdb-ui/src/views/acl/resources.vue @@ -0,0 +1,339 @@ + + + + + diff --git a/cmdb-ui/src/views/acl/roles.vue b/cmdb-ui/src/views/acl/roles.vue new file mode 100644 index 0000000..00a4602 --- /dev/null +++ b/cmdb-ui/src/views/acl/roles.vue @@ -0,0 +1,310 @@ + + + + + diff --git a/cmdb-ui/src/views/acl/users.vue b/cmdb-ui/src/views/acl/users.vue new file mode 100644 index 0000000..255654d --- /dev/null +++ b/cmdb-ui/src/views/acl/users.vue @@ -0,0 +1,361 @@ + + + + + diff --git a/cmdb-ui/src/views/cmdb/batch/index.vue b/cmdb-ui/src/views/cmdb/batch/index.vue new file mode 100644 index 0000000..af44731 --- /dev/null +++ b/cmdb-ui/src/views/cmdb/batch/index.vue @@ -0,0 +1,85 @@ + + + diff --git a/cmdb-ui/src/views/cmdb/batch/modules/CiTable.vue b/cmdb-ui/src/views/cmdb/batch/modules/CiTable.vue new file mode 100644 index 0000000..ba51fc2 --- /dev/null +++ b/cmdb-ui/src/views/cmdb/batch/modules/CiTable.vue @@ -0,0 +1,95 @@ + + + + diff --git a/cmdb-ui/src/views/cmdb/batch/modules/CiTypeChoice.vue b/cmdb-ui/src/views/cmdb/batch/modules/CiTypeChoice.vue new file mode 100644 index 0000000..7af6c7b --- /dev/null +++ b/cmdb-ui/src/views/cmdb/batch/modules/CiTypeChoice.vue @@ -0,0 +1,113 @@ + + + + + diff --git a/cmdb-ui/src/views/cmdb/batch/modules/UploadFileForm.vue b/cmdb-ui/src/views/cmdb/batch/modules/UploadFileForm.vue new file mode 100644 index 0000000..e140c6c --- /dev/null +++ b/cmdb-ui/src/views/cmdb/batch/modules/UploadFileForm.vue @@ -0,0 +1,61 @@ + + + + + diff --git a/cmdb-ui/src/views/cmdb/batch/modules/UploadResult.vue b/cmdb-ui/src/views/cmdb/batch/modules/UploadResult.vue new file mode 100644 index 0000000..64df7e0 --- /dev/null +++ b/cmdb-ui/src/views/cmdb/batch/modules/UploadResult.vue @@ -0,0 +1,95 @@ + + + + diff --git a/cmdb-ui/src/views/cmdb/ci/index.vue b/cmdb-ui/src/views/cmdb/ci/index.vue new file mode 100644 index 0000000..9b7d70f --- /dev/null +++ b/cmdb-ui/src/views/cmdb/ci/index.vue @@ -0,0 +1,461 @@ + + + + + diff --git a/cmdb-ui/src/views/cmdb/ci/modules/CiDetail.vue b/cmdb-ui/src/views/cmdb/ci/modules/CiDetail.vue new file mode 100644 index 0000000..dc9b5a9 --- /dev/null +++ b/cmdb-ui/src/views/cmdb/ci/modules/CiDetail.vue @@ -0,0 +1,369 @@ + + + + + diff --git a/cmdb-ui/src/views/cmdb/ci/modules/CreateInstanceForm.vue b/cmdb-ui/src/views/cmdb/ci/modules/CreateInstanceForm.vue new file mode 100644 index 0000000..0a46b20 --- /dev/null +++ b/cmdb-ui/src/views/cmdb/ci/modules/CreateInstanceForm.vue @@ -0,0 +1,163 @@ + + + diff --git a/cmdb-ui/src/views/cmdb/ci/modules/EditableCell.vue b/cmdb-ui/src/views/cmdb/ci/modules/EditableCell.vue new file mode 100644 index 0000000..59b1ced --- /dev/null +++ b/cmdb-ui/src/views/cmdb/ci/modules/EditableCell.vue @@ -0,0 +1,78 @@ + + + + diff --git a/cmdb-ui/src/views/cmdb/ci/modules/SearchForm.vue b/cmdb-ui/src/views/cmdb/ci/modules/SearchForm.vue new file mode 100644 index 0000000..c780476 --- /dev/null +++ b/cmdb-ui/src/views/cmdb/ci/modules/SearchForm.vue @@ -0,0 +1,131 @@ + + + diff --git a/cmdb-ui/src/views/cmdb/modeling/attributes/index.vue b/cmdb-ui/src/views/cmdb/modeling/attributes/index.vue new file mode 100644 index 0000000..a3fa4b7 --- /dev/null +++ b/cmdb-ui/src/views/cmdb/modeling/attributes/index.vue @@ -0,0 +1,391 @@ + + + + + diff --git a/cmdb-ui/src/views/cmdb/modeling/attributes/module/attributeForm.vue b/cmdb-ui/src/views/cmdb/modeling/attributes/module/attributeForm.vue new file mode 100644 index 0000000..9c26691 --- /dev/null +++ b/cmdb-ui/src/views/cmdb/modeling/attributes/module/attributeForm.vue @@ -0,0 +1,338 @@ + + + + + diff --git a/cmdb-ui/src/views/cmdb/modeling/attributes/module/const.js b/cmdb-ui/src/views/cmdb/modeling/attributes/module/const.js new file mode 100644 index 0000000..2f43d48 --- /dev/null +++ b/cmdb-ui/src/views/cmdb/modeling/attributes/module/const.js @@ -0,0 +1,8 @@ +export const valueTypeMap = { + '0': '整数', + '1': '浮点数', + '2': '文本', + '3': 'datetime', + '4': 'date', + '5': 'time' +} diff --git a/cmdb-ui/src/views/cmdb/modeling/ci_type/attributesTable.vue b/cmdb-ui/src/views/cmdb/modeling/ci_type/attributesTable.vue new file mode 100644 index 0000000..8284105 --- /dev/null +++ b/cmdb-ui/src/views/cmdb/modeling/ci_type/attributesTable.vue @@ -0,0 +1,561 @@ + + + + + diff --git a/cmdb-ui/src/views/cmdb/modeling/ci_type/checkTable.vue b/cmdb-ui/src/views/cmdb/modeling/ci_type/checkTable.vue new file mode 100644 index 0000000..cf201b9 --- /dev/null +++ b/cmdb-ui/src/views/cmdb/modeling/ci_type/checkTable.vue @@ -0,0 +1,349 @@ + + + + + diff --git a/cmdb-ui/src/views/cmdb/modeling/ci_type/defaultShowTable.vue b/cmdb-ui/src/views/cmdb/modeling/ci_type/defaultShowTable.vue new file mode 100644 index 0000000..ac24abf --- /dev/null +++ b/cmdb-ui/src/views/cmdb/modeling/ci_type/defaultShowTable.vue @@ -0,0 +1,355 @@ + + + + + diff --git a/cmdb-ui/src/views/cmdb/modeling/ci_type/detail.vue b/cmdb-ui/src/views/cmdb/modeling/ci_type/detail.vue new file mode 100644 index 0000000..6ba6f21 --- /dev/null +++ b/cmdb-ui/src/views/cmdb/modeling/ci_type/detail.vue @@ -0,0 +1,89 @@ + + + + + diff --git a/cmdb-ui/src/views/cmdb/modeling/ci_type/group.vue b/cmdb-ui/src/views/cmdb/modeling/ci_type/group.vue new file mode 100644 index 0000000..24bf748 --- /dev/null +++ b/cmdb-ui/src/views/cmdb/modeling/ci_type/group.vue @@ -0,0 +1,591 @@ + + + + + diff --git a/cmdb-ui/src/views/cmdb/modeling/ci_type/list.vue b/cmdb-ui/src/views/cmdb/modeling/ci_type/list.vue new file mode 100644 index 0000000..9b5339b --- /dev/null +++ b/cmdb-ui/src/views/cmdb/modeling/ci_type/list.vue @@ -0,0 +1,312 @@ + + + + + diff --git a/cmdb-ui/src/views/cmdb/modeling/ci_type/relationTable.vue b/cmdb-ui/src/views/cmdb/modeling/ci_type/relationTable.vue new file mode 100644 index 0000000..451593f --- /dev/null +++ b/cmdb-ui/src/views/cmdb/modeling/ci_type/relationTable.vue @@ -0,0 +1,338 @@ + + + + + diff --git a/cmdb-ui/src/views/cmdb/modeling/preference_relation/index.vue b/cmdb-ui/src/views/cmdb/modeling/preference_relation/index.vue new file mode 100644 index 0000000..fcc333f --- /dev/null +++ b/cmdb-ui/src/views/cmdb/modeling/preference_relation/index.vue @@ -0,0 +1,346 @@ + + + diff --git a/cmdb-ui/src/views/cmdb/modeling/preference_relation/modules/RelationViewForm.vue b/cmdb-ui/src/views/cmdb/modeling/preference_relation/modules/RelationViewForm.vue new file mode 100644 index 0000000..8afc488 --- /dev/null +++ b/cmdb-ui/src/views/cmdb/modeling/preference_relation/modules/RelationViewForm.vue @@ -0,0 +1,160 @@ + + + + + diff --git a/cmdb-ui/src/views/cmdb/modeling/relation_type/index.vue b/cmdb-ui/src/views/cmdb/modeling/relation_type/index.vue new file mode 100644 index 0000000..3b66b7e --- /dev/null +++ b/cmdb-ui/src/views/cmdb/modeling/relation_type/index.vue @@ -0,0 +1,280 @@ + + + + + diff --git a/cmdb-ui/src/views/cmdb/modeling/relation_type/modules/relationTypeForm.vue b/cmdb-ui/src/views/cmdb/modeling/relation_type/modules/relationTypeForm.vue new file mode 100644 index 0000000..dc8ff59 --- /dev/null +++ b/cmdb-ui/src/views/cmdb/modeling/relation_type/modules/relationTypeForm.vue @@ -0,0 +1,192 @@ + + + + + diff --git a/cmdb-ui/src/views/cmdb/preference/index.vue b/cmdb-ui/src/views/cmdb/preference/index.vue new file mode 100644 index 0000000..fa9bd77 --- /dev/null +++ b/cmdb-ui/src/views/cmdb/preference/index.vue @@ -0,0 +1,366 @@ + + + + + diff --git a/cmdb-ui/src/views/cmdb/relation_views/index.vue b/cmdb-ui/src/views/cmdb/relation_views/index.vue new file mode 100644 index 0000000..025ae25 --- /dev/null +++ b/cmdb-ui/src/views/cmdb/relation_views/index.vue @@ -0,0 +1,441 @@ + + + + + diff --git a/cmdb-ui/src/views/cmdb/tree_views/index.vue b/cmdb-ui/src/views/cmdb/tree_views/index.vue new file mode 100644 index 0000000..046f2fc --- /dev/null +++ b/cmdb-ui/src/views/cmdb/tree_views/index.vue @@ -0,0 +1,258 @@ + + + + + diff --git a/cmdb-ui/src/views/exception/403.vue b/cmdb-ui/src/views/exception/403.vue new file mode 100644 index 0000000..ffc3799 --- /dev/null +++ b/cmdb-ui/src/views/exception/403.vue @@ -0,0 +1,17 @@ + + + + + diff --git a/cmdb-ui/src/views/exception/404.vue b/cmdb-ui/src/views/exception/404.vue new file mode 100644 index 0000000..16f767f --- /dev/null +++ b/cmdb-ui/src/views/exception/404.vue @@ -0,0 +1,17 @@ + + + + + diff --git a/cmdb-ui/src/views/exception/500.vue b/cmdb-ui/src/views/exception/500.vue new file mode 100644 index 0000000..cc5d7ab --- /dev/null +++ b/cmdb-ui/src/views/exception/500.vue @@ -0,0 +1,17 @@ + + + + + diff --git a/cmdb-ui/src/views/user/Login.vue b/cmdb-ui/src/views/user/Login.vue new file mode 100644 index 0000000..c9545c2 --- /dev/null +++ b/cmdb-ui/src/views/user/Login.vue @@ -0,0 +1,210 @@ + + + + + diff --git a/cmdb-ui/src/views/user/Register.vue b/cmdb-ui/src/views/user/Register.vue new file mode 100644 index 0000000..79be00c --- /dev/null +++ b/cmdb-ui/src/views/user/Register.vue @@ -0,0 +1,322 @@ + + + + + diff --git a/cmdb-ui/src/views/user/RegisterResult.vue b/cmdb-ui/src/views/user/RegisterResult.vue new file mode 100644 index 0000000..5a807e0 --- /dev/null +++ b/cmdb-ui/src/views/user/RegisterResult.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/cmdb-ui/src/views/welcome/index.vue b/cmdb-ui/src/views/welcome/index.vue new file mode 100644 index 0000000..9ff288c --- /dev/null +++ b/cmdb-ui/src/views/welcome/index.vue @@ -0,0 +1,34 @@ + + + + + diff --git a/cmdb-ui/src/views/welcome/welcome.vue b/cmdb-ui/src/views/welcome/welcome.vue new file mode 100644 index 0000000..e69de29 diff --git a/cmdb-ui/tests/unit/.eslintrc.js b/cmdb-ui/tests/unit/.eslintrc.js new file mode 100644 index 0000000..958d51b --- /dev/null +++ b/cmdb-ui/tests/unit/.eslintrc.js @@ -0,0 +1,5 @@ +module.exports = { + env: { + jest: true + } +} diff --git a/cmdb-ui/vue.config.js b/cmdb-ui/vue.config.js new file mode 100644 index 0000000..80013c9 --- /dev/null +++ b/cmdb-ui/vue.config.js @@ -0,0 +1,126 @@ +const path = require('path') +const webpack = require('webpack') +const ThemeColorReplacer = require('webpack-theme-color-replacer') +const generate = require('@ant-design/colors/lib/generate').default + +function resolve (dir) { + return path.join(__dirname, dir) +} + +// vue.config.js +module.exports = { + configureWebpack: { + plugins: [ + // Ignore all locale files of moment.js + new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), + // 生成仅包含颜色的替换样式（主题色等） + // TODO 需要增加根据环境不开启主题需求 + new ThemeColorReplacer({ + fileName: 'css/theme-colors-[contenthash:8].css', + matchColors: getAntdSerials('#1890ff'), // 主色系列 + // 改变样式选择器，解决样式覆盖问题 + changeSelector (selector) { + switch (selector) { + case '.ant-calendar-today .ant-calendar-date': + return ':not(.ant-calendar-selected-date):not(.ant-calendar-selected-day)' + selector + case '.ant-btn:focus,.ant-btn:hover': + return '.ant-btn:focus:not(.ant-btn-primary),.ant-btn:hover:not(.ant-btn-primary)' + case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon': + return ':not(.ant-steps-item-process)' + selector + case '.ant-btn.active,.ant-btn:active': + return '.ant-btn.active:not(.ant-btn-primary),.ant-btn:active:not(.ant-btn-primary)' + case '.ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-submenu-selected,.ant-menu-horizontal>.ant-menu-submenu:hover': + case '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal > .ant-menu-submenu-selected,.ant-menu-horizontal > .ant-menu-submenu:hover': + return '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover' + case '.ant-menu-horizontal > .ant-menu-item-selected > a': + return ':not(.ant-menu-horizontal)' + selector + case '.ant-menu-horizontal > .ant-menu-item > a:hover': + return ':not(.ant-menu-horizontal)' + selector + default : + return selector + } + } + }) + ] + }, + + chainWebpack: (config) => { + config.resolve.alias + .set('@$', resolve('src')) + + const svgRule = config.module.rule('svg') + svgRule.uses.clear() + svgRule + .oneOf('inline') + .resourceQuery(/inline/) + .use('vue-svg-icon-loader') + .loader('vue-svg-icon-loader') + .end() + .end() + .oneOf('external') + .use('file-loader') + .loader('file-loader') + .options({ + name: 'assets/[name].[hash:8].[ext]' + }) + /* svgRule.oneOf('inline') + .resourceQuery(/inline/) + .use('vue-svg-loader') + .loader('vue-svg-loader') + .end() + .end() + .oneOf('external') + .use('file-loader') + .loader('file-loader') + .options({ + name: 'assets/[name].[hash:8].[ext]' + }) + */ + }, + + css: { + loaderOptions: { + less: { + modifyVars: { + /* less 变量覆盖，用于自定义 ant design 主题 */ + + /* + 'primary-color': '#F5222D', + 'link-color': '#F5222D', + 'border-radius-base': '4px', + */ + }, + javascriptEnabled: true + } + } + }, + + devServer: { + // development server port 8000 + disableHostCheck: true, + port: 8000 + // proxy: { + // '/api': { + // // target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro', + // target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro', + // ws: false, + // changeOrigin: true + // } + // } + }, + + // disable source map in production + productionSourceMap: false, + lintOnSave: undefined, + // babel-loader no-ignore node_modules/* + transpileDependencies: [] +} + +function getAntdSerials (color) { + // 淡化（即less的tint） + const lightens = new Array(9).fill().map((t, i) => { + return ThemeColorReplacer.varyColor.lighten(color, i / 10) + }) + const colorPalettes = generate(color) + return lightens.concat(colorPalettes) +} diff --git a/cmdb-ui/webstorm.config.js b/cmdb-ui/webstorm.config.js new file mode 100644 index 0000000..cb1fc8c --- /dev/null +++ b/cmdb-ui/webstorm.config.js @@ -0,0 +1,16 @@ +'use strict' +const path = require('path') + +function resolve (dir) { + return path.join(__dirname, '.', dir) +} + +module.exports = { + context: path.resolve(__dirname, './'), + resolve: { + extensions: ['.js', '.vue', '.json'], + alias: { + '@': resolve('src') + } + } +} diff --git a/docker-compose.yml b/docker-compose.yml index b854fb9..7ca77a4 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -65,9 +65,9 @@ services: - /bin/sh - -c - | - sed -i "s#USE_ES = False#USE_ES = True#g" api/settings.py - sed -i "s#USE_ACL = False#USE_ACL = True#g" api/settings.py - sed -i "s#ES_HOST = '127.0.0.1'#ES_HOST = 'cmdb-search'#g" api/settings.py + sed -i "s#USE_ES = False#USE_ES = True#g" settings.py + sed -i "s#USE_ACL = False#USE_ACL = True#g" settings.py + sed -i "s#ES_HOST = '127.0.0.1'#ES_HOST = 'cmdb-search'#g" settings.py sleep 15 gunicorn --workers=3 autoapp:app -b 0.0.0.0:5000 -D flask init-cache