feat: 英文报告
This commit is contained in:
mozzie
parent
45aa679385
commit
597f1a3c39
|
|
@ -1,152 +1 @@
|
|||
@import '../../less/common.less';
|
||||
|
||||
.bs-select-menu {
|
||||
--background: #242836;
|
||||
--text: #fff;
|
||||
--icon: #fff;
|
||||
--icon-active: #3f4656;
|
||||
--list: #1c212e;
|
||||
--list-text: rgba(255, 255, 255, 0.2);
|
||||
--list-text-hover: rgba(255, 255, 255, 0.5);
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 25px;
|
||||
select,
|
||||
.button {
|
||||
font-family: inherit;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
text-align: left;
|
||||
text-transform: none;
|
||||
}
|
||||
select {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
opacity: 0;
|
||||
padding: 8px 36px 8px 12px;
|
||||
visibility: hidden;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 25px;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translateY(var(--t));
|
||||
transition: opacity 0.3s ease,
|
||||
transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
|
||||
li {
|
||||
padding: 0 36px 0 12px;
|
||||
height: 36.8px;
|
||||
line-height: 36.8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
& > ul {
|
||||
background: var(--list);
|
||||
color: var(--list-text);
|
||||
border-radius: 6px;
|
||||
li {
|
||||
transition: color 0.3s ease;
|
||||
&:hover {
|
||||
color: var(--list-text-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
.button {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
background: var(--background);
|
||||
em {
|
||||
--r: 45deg;
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
width: 7px;
|
||||
transform: translateY(-50%);
|
||||
&:before,
|
||||
&:after {
|
||||
--o: 0.4;
|
||||
content: '';
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
opacity: var(--o);
|
||||
display: block;
|
||||
position: relative;
|
||||
transition: opacity 0.2s ease;
|
||||
transform: rotate(var(--r)) scale(0.75);
|
||||
}
|
||||
&:before {
|
||||
border-left: 2px solid var(--icon);
|
||||
border-top: 2px solid var(--icon);
|
||||
top: 1px;
|
||||
}
|
||||
&:after {
|
||||
border-right: 2px solid var(--icon);
|
||||
border-bottom: 2px solid var(--icon);
|
||||
bottom: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.open) {
|
||||
& > ul {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
&.open {
|
||||
&.tilt-up {
|
||||
animation: tilt-up 0.4s linear forwards;
|
||||
.button {
|
||||
em {
|
||||
&:before {
|
||||
--o: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.tilt-down {
|
||||
animation: tilt-down 0.4s linear forwards;
|
||||
.button {
|
||||
em {
|
||||
&:after {
|
||||
--o: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tilt-up {
|
||||
40%,
|
||||
60% {
|
||||
transform: perspective(500px) rotateX(8deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tilt-down {
|
||||
40%,
|
||||
60% {
|
||||
transform: perspective(500px) rotateX(-8deg);
|
||||
}
|
||||
}
|
||||
@import '../../less/common.less';
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import './index.less';
|
||||
// import './index.less';
|
||||
import $ from 'jquery';
|
||||
// import '@backset/ui/src/components/Tooltip/index.less';
|
||||
import Dropdown from '@backset/ui/dist/Dropdown';
|
||||
import '@backset/ui/dist/ui.css';
|
||||
import { Dropdown } from '@backset/ui';
|
||||
|
||||
$(function () {
|
||||
new Dropdown('.ttt');
|
||||
|
|
|
|||
|
|
@ -132,7 +132,6 @@ module.exports = {
|
|||
resolve: {
|
||||
extensions: ['.ts', '.js', '.ejs'],
|
||||
},
|
||||
|
||||
externals: {
|
||||
// require("jquery") 是外部的，并且可用
|
||||
// 在全局变量 jQuery 上
|
||||
|
|
|
|||
12
package.json
12
package.json
|
|
@ -39,7 +39,17 @@
|
|||
"webpack-bundle-analyzer": "4.8.0",
|
||||
"normalize.css": "8.0.1",
|
||||
"@babel/plugin-proposal-class-properties": "7.18.6",
|
||||
"@babel/preset-env": "7.20.2"
|
||||
"@babel/preset-env": "7.20.2",
|
||||
"rollup": "3.17.2",
|
||||
"@rollup/plugin-node-resolve": "15.0.1",
|
||||
"@rollup/plugin-typescript": "11.0.0",
|
||||
"@rollup/plugin-commonjs": "24.0.1",
|
||||
"@rollup/plugin-terser": "0.4.0",
|
||||
"rollup-plugin-postcss": "4.0.2",
|
||||
"postcss": "8.4.21",
|
||||
"rollup-plugin-babel": "4.4.0",
|
||||
"@babel/core": "7.21.0",
|
||||
"rollup-plugin-dts": "5.2.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"object-hash": "^3.0.0"
|
||||
|
|
|
|||
|
|
@ -1,10 +1,16 @@
|
|||
{
|
||||
"name": "@backset/ui",
|
||||
"version": "1.0.0",
|
||||
"main": "dist/index",
|
||||
"types": "dist/index.d.ts",
|
||||
"types": "./dist/index.d.ts",
|
||||
"module": "./dist/index.esm.js",
|
||||
"file": [
|
||||
"dist"
|
||||
],
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "webpack build"
|
||||
"build-1": "webpack build && tsc -p ./tsconfig.build.json",
|
||||
"dev": "rollup -w -c",
|
||||
"build": "rollup -c"
|
||||
},
|
||||
"devDependencies": {
|
||||
"semantic-ui-dropdown": "2.5.0",
|
||||
|
|
|
|||
56
packages/ui/rollup.config.js
Normal file
56
packages/ui/rollup.config.js
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import typescript from '@rollup/plugin-typescript';
|
||||
// rollup默认不支持commonjs
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import babel from 'rollup-plugin-babel'
|
||||
import postcss from 'rollup-plugin-postcss'
|
||||
import terser from '@rollup/plugin-terser';
|
||||
import path, { join } from 'path'
|
||||
import dts from "rollup-plugin-dts";
|
||||
import { readdirSync, statSync } from 'fs'
|
||||
|
||||
export default [
|
||||
{
|
||||
input: './src/index.ts',
|
||||
output: {
|
||||
dir: 'dist',
|
||||
format: 'esm',
|
||||
entryFileNames: '[name].esm.js',
|
||||
},
|
||||
plugins: [
|
||||
resolve(),
|
||||
commonjs(),
|
||||
typescript(),
|
||||
// babel({ exclude: "node_modules/**", presets: ["@babel/preset-env"] }),
|
||||
terser(),
|
||||
postcss({
|
||||
extract: true,
|
||||
extract: path.resolve('dist/ui.css')
|
||||
})],
|
||||
},
|
||||
// index.d.ts
|
||||
{
|
||||
input: "./src/index.ts",
|
||||
output: [{ file: "dist/index.d.ts", format: "es" }],
|
||||
plugins: [dts(), postcss({
|
||||
extract: true,
|
||||
extract: path.resolve('dist/ui.css')
|
||||
})],
|
||||
},
|
||||
// 单独打包每个组件
|
||||
|
||||
// 生成 commonjs
|
||||
// {
|
||||
// input: 'src/index.ts',
|
||||
// output: {
|
||||
// dir: 'dist',
|
||||
// format: 'cjs',
|
||||
// entryFileNames: '[name].cjs.js',
|
||||
// },
|
||||
// plugins: [resolve(), commonjs(), typescript(), terser(), postcss({
|
||||
// extract: true,
|
||||
// minimize: true, // cssnano 压缩
|
||||
// extract: path.resolve('dist/ui.css'),
|
||||
// })],
|
||||
// },
|
||||
]
|
||||
|
|
@ -1 +1 @@
|
|||
import "./index.less";
|
||||
import "./index.scss";
|
||||
|
|
|
|||
|
|
@ -1 +1,4 @@
|
|||
import "./components/Tooltip";
|
||||
import Dropdown from "./components/Dropdown/index";
|
||||
|
||||
export { Dropdown };
|
||||
|
|
|
|||
|
|
@ -3,8 +3,7 @@
|
|||
"experimentalDecorators": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*",
|
||||
"webpack.config.js"
|
||||
],
|
||||
"src/**/*"
|
||||
, "scripts" ],
|
||||
"extends": "../../tsconfig.json",
|
||||
}
|
||||
|
|
@ -22,7 +22,7 @@ const importEntry = () => {
|
|||
};
|
||||
|
||||
module.exports = {
|
||||
entry: { ...importEntry() },
|
||||
entry: { ...importEntry(), 'index': join(__dirname, 'src/index.ts') },
|
||||
output: {
|
||||
path: path.resolve(__dirname, 'dist/'),
|
||||
publicPath: '',
|
||||
|
|
@ -30,14 +30,14 @@ module.exports = {
|
|||
clean: true,
|
||||
libraryTarget: 'umd' // 添加 export default
|
||||
},
|
||||
mode: 'development',
|
||||
mode: 'production',
|
||||
optimization: {
|
||||
// minimize: true,
|
||||
// minimizer: [new TerserPlugin({
|
||||
// terserOptions: {
|
||||
// compress: true,
|
||||
// },
|
||||
// })],
|
||||
minimize: true,
|
||||
minimizer: [new TerserPlugin({
|
||||
terserOptions: {
|
||||
compress: true,
|
||||
},
|
||||
})],
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
"version": "1.0.0",
|
||||
"main": "dist/cjs/index",
|
||||
"types": "dist/es/index.d.ts",
|
||||
"browser": "./src/index.ts",
|
||||
"scripts": {
|
||||
"build": "rimraf ./dist && tsc -p ./tsconfig.build-es.json && tsc -p ./tsconfig.build-cjs.json"
|
||||
},
|
||||
|
|
|
|||
2942
pnpm-lock.yaml
2942
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -34,6 +34,14 @@ e.g
|
|||
|
||||
这种情况，作为依赖，`workspace`下的其他包引入，`vscode`会有代码提示
|
||||
|
||||
## 入口文件
|
||||
|
||||
- 如果 npm 包导出的是 ESM 规范的包，使用 module
|
||||
- 如果 npm 包只在 web 端使用，并且严禁在 server 端使用，使用 browser。
|
||||
- 如果 npm 包只在 server 端使用，使用 main
|
||||
- 如果 npm 包在 web 端和 server 端都允许使用，使用 browser 和 main
|
||||
- 其他更加复杂的情况，如 npm 包需要提供 commonJS 与 ESM 等多个规范的代码文件，请参考上述使用场景或流程图
|
||||
|
||||
# tsconfig.json
|
||||
|
||||
指定了用来编译这个项目的根文件和编译选项
|
||||
|
|
|
|||
|
|
@ -4,8 +4,9 @@
|
|||
"declaration": true,
|
||||
"module": "ES2020",
|
||||
"sourceMap": true,
|
||||
"esModuleInterop": true,
|
||||
// "esModuleInterop": true,
|
||||
"skipLibCheck": true, // 忽略烈性检查
|
||||
"forceConsistentCasingInFileNames": true
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user