@@ -1,40 +0,0 @@
|
|||||||
/* eslint-env node */
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
root: true,
|
|
||||||
env: { browser: true, es2020: true },
|
|
||||||
extends: [
|
|
||||||
'eslint:recommended',
|
|
||||||
'plugin:@typescript-eslint/recommended',
|
|
||||||
'plugin:@typescript-eslint/recommended-requiring-type-checking',
|
|
||||||
'plugin:react-hooks/recommended',
|
|
||||||
'plugin:prettier/recommended',
|
|
||||||
'./.eslintrc-auto-import.json'
|
|
||||||
],
|
|
||||||
parser: '@typescript-eslint/parser',
|
|
||||||
parserOptions: {
|
|
||||||
ecmaVersion: 'latest',
|
|
||||||
sourceType: 'module',
|
|
||||||
project: './tsconfig*.json',
|
|
||||||
tsconfigRootDir: __dirname,
|
|
||||||
},
|
|
||||||
plugins: [
|
|
||||||
'react-refresh',
|
|
||||||
'prettier'],
|
|
||||||
rules: {
|
|
||||||
'no-cond-assign': 'error',
|
|
||||||
'eqeqeq': 'error',
|
|
||||||
'prettier/prettier': [
|
|
||||||
'error',
|
|
||||||
{
|
|
||||||
endOfLine: 'auto',
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'react-refresh/only-export-components': [
|
|
||||||
'warn',
|
|
||||||
{ allowConstantExport: true }
|
|
||||||
],
|
|
||||||
'@typescript-eslint/no-non-null-assertion': 'off',
|
|
||||||
'react-hooks/exhaustive-deps': 'off',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -5,4 +5,4 @@
|
|||||||
"singleQuote": true,
|
"singleQuote": true,
|
||||||
"printWidth": 100,
|
"printWidth": 100,
|
||||||
"trailingComma": "none"
|
"trailingComma": "none"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -35,18 +35,17 @@ interface IMatcher {
|
|||||||
|
|
||||||
const matchComponents: IMatcher[] = [
|
const matchComponents: IMatcher[] = [
|
||||||
{
|
{
|
||||||
pattern: /^Avatar/,
|
pattern: /^Anchor/,
|
||||||
styleDir: 'avatar'
|
styleDir: 'anchor'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
pattern: /^AutoComplete/,
|
pattern: /^AutoComplete/,
|
||||||
styleDir: 'auto-complete'
|
styleDir: 'auto-complete'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
pattern: /^Anchor/,
|
pattern: /^Avatar/,
|
||||||
styleDir: 'anchor'
|
styleDir: 'avatar'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
pattern: /^Badge/,
|
pattern: /^Badge/,
|
||||||
styleDir: 'badge'
|
styleDir: 'badge'
|
||||||
@@ -59,14 +58,18 @@ const matchComponents: IMatcher[] = [
|
|||||||
pattern: /^Button/,
|
pattern: /^Button/,
|
||||||
styleDir: 'button'
|
styleDir: 'button'
|
||||||
},
|
},
|
||||||
{
|
|
||||||
pattern: /^Checkbox/,
|
|
||||||
styleDir: 'checkbox'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
pattern: /^Card/,
|
pattern: /^Card/,
|
||||||
styleDir: 'card'
|
styleDir: 'card'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
pattern: /^CheckableTag/,
|
||||||
|
styleDir: 'tag'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
pattern: /^Checkbox/,
|
||||||
|
styleDir: 'checkbox'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
pattern: /^Collapse/,
|
pattern: /^Collapse/,
|
||||||
styleDir: 'collapse'
|
styleDir: 'collapse'
|
||||||
@@ -75,76 +78,30 @@ const matchComponents: IMatcher[] = [
|
|||||||
pattern: /^Descriptions/,
|
pattern: /^Descriptions/,
|
||||||
styleDir: 'descriptions'
|
styleDir: 'descriptions'
|
||||||
},
|
},
|
||||||
{
|
|
||||||
pattern: /^RangePicker|^WeekPicker|^MonthPicker/,
|
|
||||||
styleDir: 'date-picker'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
pattern: /^Dropdown/,
|
pattern: /^Dropdown/,
|
||||||
styleDir: 'dropdown'
|
styleDir: 'dropdown'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
pattern: /^Form/,
|
pattern: /^Form/,
|
||||||
styleDir: 'form'
|
styleDir: 'form'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
pattern: /^Image/,
|
||||||
|
styleDir: 'image'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
pattern: /^InputNumber/,
|
pattern: /^InputNumber/,
|
||||||
styleDir: 'input-number'
|
styleDir: 'input-number'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
|
||||||
pattern: /^Input|^Textarea/,
|
|
||||||
styleDir: 'input'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pattern: /^Statistic/,
|
|
||||||
styleDir: 'statistic'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pattern: /^CheckableTag/,
|
|
||||||
styleDir: 'tag'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pattern: /^TimeRangePicker/,
|
|
||||||
styleDir: 'time-picker'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
pattern: /^Layout/,
|
pattern: /^Layout/,
|
||||||
styleDir: 'layout'
|
styleDir: 'layout'
|
||||||
},
|
},
|
||||||
{
|
|
||||||
pattern: /^Menu|^SubMenu/,
|
|
||||||
styleDir: 'menu'
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
pattern: /^Table/,
|
|
||||||
styleDir: 'table'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pattern: /^TimePicker|^TimeRangePicker/,
|
|
||||||
styleDir: 'time-picker'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pattern: /^Radio/,
|
|
||||||
styleDir: 'radio'
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
pattern: /^Image/,
|
|
||||||
styleDir: 'image'
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
{
|
||||||
pattern: /^List/,
|
pattern: /^List/,
|
||||||
styleDir: 'list'
|
styleDir: 'list'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
|
||||||
pattern: /^Tab/,
|
|
||||||
styleDir: 'tabs'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
pattern: /^Mentions/,
|
pattern: /^Mentions/,
|
||||||
styleDir: 'mentions'
|
styleDir: 'mentions'
|
||||||
@@ -154,37 +111,72 @@ const matchComponents: IMatcher[] = [
|
|||||||
styleDir: 'qr-code'
|
styleDir: 'qr-code'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
pattern: /^Step/,
|
pattern: /^Radio/,
|
||||||
styleDir: 'steps'
|
styleDir: 'radio'
|
||||||
},
|
},
|
||||||
{
|
|
||||||
pattern: /^Skeleton/,
|
|
||||||
styleDir: 'skeleton'
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
{
|
||||||
pattern: /^Select/,
|
pattern: /^Select/,
|
||||||
styleDir: 'select'
|
styleDir: 'select'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
pattern: /^TreeSelect/,
|
pattern: /^Skeleton/,
|
||||||
styleDir: 'tree-select'
|
styleDir: 'skeleton'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
pattern: /^Tree|^DirectoryTree/,
|
pattern: /^Statistic/,
|
||||||
styleDir: 'tree'
|
styleDir: 'statistic'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
pattern: /^Typography/,
|
pattern: /^Step/,
|
||||||
styleDir: 'typography'
|
styleDir: 'steps'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
pattern: /^Tab/,
|
||||||
|
styleDir: 'tabs'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
pattern: /^Table/,
|
||||||
|
styleDir: 'table'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
pattern: /^Timeline/,
|
pattern: /^Timeline/,
|
||||||
styleDir: 'timeline'
|
styleDir: 'timeline'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
pattern: /^TimeRangePicker/,
|
||||||
|
styleDir: 'time-picker'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
pattern: /^Typography/,
|
||||||
|
styleDir: 'typography'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
pattern: /^TreeSelect/,
|
||||||
|
styleDir: 'tree-select'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
pattern: /^Upload/,
|
pattern: /^Upload/,
|
||||||
styleDir: 'upload'
|
styleDir: 'upload'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
pattern: /^Input|^Textarea/,
|
||||||
|
styleDir: 'input'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
pattern: /^Menu|^SubMenu/,
|
||||||
|
styleDir: 'menu'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
pattern: /^Tree|^DirectoryTree/,
|
||||||
|
styleDir: 'tree'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
pattern: /^MonthPicker|^RangePicker|^WeekPicker/,
|
||||||
|
styleDir: 'date-picker'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
pattern: /^TimePicker|^TimeRangePicker/,
|
||||||
|
styleDir: 'time-picker'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
@@ -257,12 +249,12 @@ const getSideEffects = (compName: string, options: AntDesignResolverOptions): Si
|
|||||||
|
|
||||||
const primitiveNames = [
|
const primitiveNames = [
|
||||||
'Affix',
|
'Affix',
|
||||||
|
'Alert',
|
||||||
'Anchor',
|
'Anchor',
|
||||||
'AnchorLink',
|
'AnchorLink',
|
||||||
'AutoComplete',
|
'AutoComplete',
|
||||||
'AutoCompleteOptGroup',
|
'AutoCompleteOptGroup',
|
||||||
'AutoCompleteOption',
|
'AutoCompleteOption',
|
||||||
'Alert',
|
|
||||||
'Avatar',
|
'Avatar',
|
||||||
'AvatarGroup',
|
'AvatarGroup',
|
||||||
'BackTop',
|
'BackTop',
|
||||||
@@ -277,105 +269,106 @@ const primitiveNames = [
|
|||||||
'Card',
|
'Card',
|
||||||
'CardGrid',
|
'CardGrid',
|
||||||
'CardMeta',
|
'CardMeta',
|
||||||
'Collapse',
|
|
||||||
'CollapsePanel',
|
|
||||||
'Carousel',
|
'Carousel',
|
||||||
'Cascader',
|
'Cascader',
|
||||||
|
'CheckableTag',
|
||||||
'Checkbox',
|
'Checkbox',
|
||||||
'CheckboxGroup',
|
'CheckboxGroup',
|
||||||
'Col',
|
'Col',
|
||||||
|
'Collapse',
|
||||||
|
'CollapsePanel',
|
||||||
'Comment',
|
'Comment',
|
||||||
'ConfigProvider',
|
'ConfigProvider',
|
||||||
'DatePicker',
|
'DatePicker',
|
||||||
'MonthPicker',
|
|
||||||
'WeekPicker',
|
|
||||||
'RangePicker',
|
|
||||||
'QuarterPicker',
|
|
||||||
'Descriptions',
|
'Descriptions',
|
||||||
'DescriptionsItem',
|
'DescriptionsItem',
|
||||||
|
'DirectoryTree',
|
||||||
'Divider',
|
'Divider',
|
||||||
|
'Drawer',
|
||||||
'Dropdown',
|
'Dropdown',
|
||||||
'DropdownButton',
|
'DropdownButton',
|
||||||
'Drawer',
|
|
||||||
'Empty',
|
'Empty',
|
||||||
'FloatButton',
|
'FloatButton',
|
||||||
'Form',
|
'Form',
|
||||||
'FormItem',
|
'FormItem',
|
||||||
'FormItemRest',
|
'FormItemRest',
|
||||||
'Grid',
|
'Grid',
|
||||||
'Input',
|
|
||||||
'InputGroup',
|
|
||||||
'InputPassword',
|
|
||||||
'InputSearch',
|
|
||||||
'Textarea',
|
|
||||||
'Image',
|
'Image',
|
||||||
'ImagePreviewGroup',
|
'ImagePreviewGroup',
|
||||||
|
'Input',
|
||||||
|
'InputGroup',
|
||||||
'InputNumber',
|
'InputNumber',
|
||||||
|
'InputPassword',
|
||||||
|
'InputSearch',
|
||||||
'Layout',
|
'Layout',
|
||||||
|
'LayoutContent',
|
||||||
|
'LayoutFooter',
|
||||||
'LayoutHeader',
|
'LayoutHeader',
|
||||||
'LayoutSider',
|
'LayoutSider',
|
||||||
'LayoutFooter',
|
|
||||||
'LayoutContent',
|
|
||||||
'List',
|
'List',
|
||||||
'ListItem',
|
'ListItem',
|
||||||
'ListItemMeta',
|
'ListItemMeta',
|
||||||
|
'LocaleProvider',
|
||||||
|
'Mentions',
|
||||||
|
'MentionsOption',
|
||||||
'Menu',
|
'Menu',
|
||||||
'MenuDivider',
|
'MenuDivider',
|
||||||
'MenuItem',
|
'MenuItem',
|
||||||
'MenuItemGroup',
|
'MenuItemGroup',
|
||||||
'SubMenu',
|
|
||||||
'Mentions',
|
|
||||||
'MentionsOption',
|
|
||||||
'Modal',
|
'Modal',
|
||||||
'Statistic',
|
'MonthPicker',
|
||||||
'StatisticCountdown',
|
|
||||||
'PageHeader',
|
'PageHeader',
|
||||||
'Pagination',
|
'Pagination',
|
||||||
'Popconfirm',
|
'Popconfirm',
|
||||||
'Popover',
|
'Popover',
|
||||||
'Progress',
|
'Progress',
|
||||||
|
'QRCode',
|
||||||
|
'QuarterPicker',
|
||||||
'Radio',
|
'Radio',
|
||||||
'RadioButton',
|
'RadioButton',
|
||||||
'RadioGroup',
|
'RadioGroup',
|
||||||
|
'RangePicker',
|
||||||
'Rate',
|
'Rate',
|
||||||
'Result',
|
'Result',
|
||||||
'Row',
|
'Row',
|
||||||
'QRCode',
|
'Segmented',
|
||||||
'Select',
|
'Select',
|
||||||
'SelectOptGroup',
|
'SelectOptGroup',
|
||||||
'SelectOption',
|
'SelectOption',
|
||||||
'Skeleton',
|
'Skeleton',
|
||||||
'SkeletonButton',
|
|
||||||
'SkeletonAvatar',
|
'SkeletonAvatar',
|
||||||
'SkeletonInput',
|
'SkeletonButton',
|
||||||
'SkeletonImage',
|
'SkeletonImage',
|
||||||
|
'SkeletonInput',
|
||||||
'Slider',
|
'Slider',
|
||||||
'Space',
|
'Space',
|
||||||
'Spin',
|
'Spin',
|
||||||
'Steps',
|
'Statistic',
|
||||||
|
'StatisticCountdown',
|
||||||
'Step',
|
'Step',
|
||||||
|
'Steps',
|
||||||
|
'SubMenu',
|
||||||
'Switch',
|
'Switch',
|
||||||
'Table',
|
'Table',
|
||||||
'TableColumn',
|
'TableColumn',
|
||||||
'TableColumnGroup',
|
'TableColumnGroup',
|
||||||
'TableSummary',
|
'TableSummary',
|
||||||
'TableSummaryRow',
|
|
||||||
'TableSummaryCell',
|
'TableSummaryCell',
|
||||||
|
'TableSummaryRow',
|
||||||
|
'TabPane',
|
||||||
|
'Tabs',
|
||||||
|
'Tag',
|
||||||
|
'Textarea',
|
||||||
|
'Timeline',
|
||||||
|
'TimelineItem',
|
||||||
|
'TimePicker',
|
||||||
|
'TimeRangePicker',
|
||||||
|
'Tooltip',
|
||||||
'Transfer',
|
'Transfer',
|
||||||
'Tree',
|
'Tree',
|
||||||
'TreeNode',
|
'TreeNode',
|
||||||
'DirectoryTree',
|
|
||||||
'TreeSelect',
|
'TreeSelect',
|
||||||
'TreeSelectNode',
|
'TreeSelectNode',
|
||||||
'Tabs',
|
|
||||||
'TabPane',
|
|
||||||
'Tag',
|
|
||||||
'CheckableTag',
|
|
||||||
'TimePicker',
|
|
||||||
'TimeRangePicker',
|
|
||||||
'Timeline',
|
|
||||||
'TimelineItem',
|
|
||||||
'Tooltip',
|
|
||||||
'Typography',
|
'Typography',
|
||||||
'TypographyLink',
|
'TypographyLink',
|
||||||
'TypographyParagraph',
|
'TypographyParagraph',
|
||||||
@@ -383,7 +376,7 @@ const primitiveNames = [
|
|||||||
'TypographyTitle',
|
'TypographyTitle',
|
||||||
'Upload',
|
'Upload',
|
||||||
'UploadDragger',
|
'UploadDragger',
|
||||||
'LocaleProvider'
|
'WeekPicker'
|
||||||
]
|
]
|
||||||
|
|
||||||
const prefix = 'Antd'
|
const prefix = 'Antd'
|
||||||
|
|||||||
30
eslint.config.mjs
Normal file
30
eslint.config.mjs
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
import globals from 'globals'
|
||||||
|
import eslintJs from '@eslint/js'
|
||||||
|
import tsEslint from 'typescript-eslint'
|
||||||
|
|
||||||
|
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
name: 'Global config',
|
||||||
|
files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
|
||||||
|
rules: {
|
||||||
|
'@typescript-eslint/no-unused-expressions': [
|
||||||
|
'error',
|
||||||
|
{
|
||||||
|
allowShortCircuit: true,
|
||||||
|
allowTernary: true,
|
||||||
|
allowTaggedTemplates: true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
'@typescript-eslint/no-unused-vars': 'off'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default [
|
||||||
|
{ files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
|
||||||
|
{ languageOptions: { globals: globals.browser } },
|
||||||
|
eslintJs.configs.recommended,
|
||||||
|
eslintPluginPrettierRecommended,
|
||||||
|
...tsEslint.configs.recommended,
|
||||||
|
config
|
||||||
|
]
|
||||||
7174
package-lock.json
generated
7174
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
70
package.json
70
package.json
@@ -2,7 +2,7 @@
|
|||||||
"name": "oxygen-ui",
|
"name": "oxygen-ui",
|
||||||
"private": true,
|
"private": true,
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"version": "1.0.2",
|
"version": "1.1.0",
|
||||||
"description": "Oxygen Toolbox browser version",
|
"description": "Oxygen Toolbox browser version",
|
||||||
"author": {
|
"author": {
|
||||||
"name": "FatttSnake",
|
"name": "FatttSnake",
|
||||||
@@ -23,62 +23,60 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ant-design/icons": "^5.3.7",
|
"@ant-design/icons": "^5.5.1",
|
||||||
"@dnd-kit/core": "^6.1.0",
|
"@dnd-kit/core": "^6.1.0",
|
||||||
"@dnd-kit/sortable": "^8.0.0",
|
"@dnd-kit/sortable": "^8.0.0",
|
||||||
"@dnd-kit/utilities": "^3.2.2",
|
"@dnd-kit/utilities": "^3.2.2",
|
||||||
"@marsidev/react-turnstile": "^0.7.1",
|
"@marsidev/react-turnstile": "^1.0.2",
|
||||||
"@monaco-editor/react": "^4.6.0",
|
"@monaco-editor/react": "^4.6.0",
|
||||||
"antd": "^5.18.1",
|
"@shikijs/monaco": "^1.22.2",
|
||||||
"axios": "^1.7.2",
|
"@xyflow/react": "^12.3.2",
|
||||||
|
"antd": "^5.21.6",
|
||||||
|
"antd-style": "^3.7.1",
|
||||||
|
"axios": "^1.7.7",
|
||||||
"custom-protocol-check": "^1.4.0",
|
"custom-protocol-check": "^1.4.0",
|
||||||
"dayjs": "^1.11.11",
|
"dayjs": "^1.11.13",
|
||||||
"echarts": "^5.5.0",
|
"echarts": "^5.5.1",
|
||||||
"esbuild-wasm": "^0.21.5",
|
"esbuild-wasm": "^0.24.0",
|
||||||
"fast-deep-equal": "^3.1.3",
|
"fast-deep-equal": "^3.1.3",
|
||||||
"fflate": "^0.8.2",
|
"fflate": "^0.8.2",
|
||||||
"jwt-decode": "^4.0.0",
|
"jwt-decode": "^4.0.0",
|
||||||
"localforage": "^1.10.0",
|
"localforage": "^1.10.0",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
"match-sorter": "^6.3.4",
|
"match-sorter": "^7.0.0",
|
||||||
"moment": "^2.30.1",
|
"moment": "^2.30.1",
|
||||||
"monaco-editor": "^0.49.0",
|
"monaco-editor": "^0.52.0",
|
||||||
"monaco-jsx-syntax-highlight": "^1.2.0",
|
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
"react-draggable": "^4.4.6",
|
"react-draggable": "^4.4.6",
|
||||||
"react-router": "^6.23.1",
|
"react-router": "^6.27.0",
|
||||||
"react-router-dom": "^6.23.1",
|
"react-router-dom": "^6.27.0",
|
||||||
|
"shiki": "^1.22.2",
|
||||||
"size-sensor": "^1.0.2",
|
"size-sensor": "^1.0.2",
|
||||||
"vanilla-tilt": "^1.8.1"
|
"vanilla-tilt": "^1.8.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.13.0",
|
||||||
"@svgr/core": "^8.1.0",
|
"@svgr/core": "^8.1.0",
|
||||||
"@svgr/plugin-jsx": "^8.1.0",
|
"@svgr/plugin-jsx": "^8.1.0",
|
||||||
"@types/jsdom": "^21.1.7",
|
"@types/jsdom": "^21.1.7",
|
||||||
"@types/lodash": "^4.17.5",
|
"@types/lodash": "^4.17.12",
|
||||||
"@types/node": "^20.14.2",
|
"@types/node": "^22.8.2",
|
||||||
"@types/react": "^18.3.3",
|
"@types/react": "^18.3.12",
|
||||||
"@types/react-dom": "^18.3.0",
|
"@types/react-dom": "^18.3.1",
|
||||||
"@typescript-eslint/eslint-plugin": "^7.13.0",
|
"@typescript/ata": "^0.9.7",
|
||||||
"@typescript-eslint/parser": "^7.13.0",
|
"@vitejs/plugin-react": "^4.3.3",
|
||||||
"@typescript/ata": "^0.9.6",
|
"eslint": "^9.13.0",
|
||||||
"@vitejs/plugin-react": "^4.3.1",
|
|
||||||
"eslint": "^8.57.0",
|
|
||||||
"eslint-config-love": "^52.0.0",
|
|
||||||
"eslint-config-prettier": "^9.1.0",
|
"eslint-config-prettier": "^9.1.0",
|
||||||
"eslint-plugin-import": "^2.29.1",
|
"eslint-plugin-prettier": "^5.2.1",
|
||||||
"eslint-plugin-prettier": "^5.1.3",
|
"eslint-plugin-react-refresh": "^0.4.14",
|
||||||
"eslint-plugin-promise": "^6.2.0",
|
"globals": "^15.11.0",
|
||||||
"eslint-plugin-react-hooks": "^4.6.2",
|
"jsdom": "^25.0.1",
|
||||||
"eslint-plugin-react-refresh": "^0.4.7",
|
"prettier": "^3.3.3",
|
||||||
"jsdom": "^24.1.0",
|
"typescript": "^5.6.3",
|
||||||
"prettier": "^3.3.2",
|
"typescript-eslint": "^8.12.1",
|
||||||
"sass": "^1.77.5",
|
"unplugin-auto-import": "^0.18.3",
|
||||||
"stylelint-config-prettier": "^9.0.5",
|
"unplugin-icons": "^0.19.3",
|
||||||
"typescript": "^5.4.5",
|
"vite": "^5.4.10"
|
||||||
"unplugin-auto-import": "^0.17.6",
|
|
||||||
"unplugin-icons": "^0.19.0",
|
|
||||||
"vite": "^5.2.13"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
80
src/App.tsx
80
src/App.tsx
@@ -1,27 +1,97 @@
|
|||||||
|
import { theme } from 'antd'
|
||||||
|
import zh_CN from 'antd/locale/zh_CN'
|
||||||
|
import BaseStyles from '@/assets/css/base.style'
|
||||||
|
import CommonStyles from '@/assets/css/common.style'
|
||||||
|
import {
|
||||||
|
COLOR_PRODUCTION,
|
||||||
|
THEME_DARK,
|
||||||
|
THEME_FOLLOW_SYSTEM,
|
||||||
|
THEME_LIGHT
|
||||||
|
} from '@/constants/common.constants'
|
||||||
import { getRouter } from '@/router'
|
import { getRouter } from '@/router'
|
||||||
|
import { getThemeMode, init } from '@/util/common'
|
||||||
import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
|
import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
|
||||||
|
|
||||||
export const AppContext = createContext<{ refreshRouter: () => void }>({
|
export const AppContext = createContext({
|
||||||
refreshRouter: () => undefined
|
refreshRouter: () => {},
|
||||||
|
isDarkMode: false
|
||||||
})
|
})
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
|
const [messageInstance, messageHolder] = message.useMessage()
|
||||||
|
const [notificationInstance, notificationHolder] = notification.useNotification()
|
||||||
|
const [modalInstance, modalHolder] = AntdModal.useModal()
|
||||||
const [routerState, setRouterState] = useState(getRouter)
|
const [routerState, setRouterState] = useState(getRouter)
|
||||||
|
const [themeMode, setThemeMode] = useState(getThemeMode())
|
||||||
|
const [isSystemDarkMode, setIsSystemDarkMode] = useState(false)
|
||||||
|
|
||||||
|
const getIsDark = () => {
|
||||||
|
switch (themeMode) {
|
||||||
|
case THEME_FOLLOW_SYSTEM:
|
||||||
|
return isSystemDarkMode
|
||||||
|
case THEME_LIGHT:
|
||||||
|
return false
|
||||||
|
case THEME_DARK:
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
init(messageInstance, notificationInstance, modalInstance)
|
||||||
|
|
||||||
|
const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
|
||||||
|
setIsSystemDarkMode(darkThemeMq.matches)
|
||||||
|
const darkThemeMqChangeListener = (ev: MediaQueryListEvent) => {
|
||||||
|
setIsSystemDarkMode(ev.matches)
|
||||||
|
}
|
||||||
|
darkThemeMq.addEventListener('change', darkThemeMqChangeListener)
|
||||||
|
|
||||||
|
const themeModeChangeListener = () => {
|
||||||
|
setThemeMode(getThemeMode())
|
||||||
|
}
|
||||||
|
window.addEventListener('localStorageChange', themeModeChangeListener)
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
darkThemeMq.removeEventListener('change', darkThemeMqChangeListener)
|
||||||
|
window.removeEventListener('localStorageChange', themeModeChangeListener)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<AntdConfigProvider
|
||||||
|
theme={{
|
||||||
|
cssVar: true,
|
||||||
|
algorithm: getIsDark() ? theme.darkAlgorithm : theme.defaultAlgorithm,
|
||||||
|
token: {
|
||||||
|
colorPrimary: COLOR_PRODUCTION,
|
||||||
|
colorLinkHover: COLOR_PRODUCTION
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
Tree: {
|
||||||
|
colorBgContainer: 'transparent'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
locale={zh_CN}
|
||||||
|
>
|
||||||
|
<BaseStyles />
|
||||||
|
<CommonStyles />
|
||||||
<AppContext.Provider
|
<AppContext.Provider
|
||||||
value={{
|
value={{
|
||||||
refreshRouter: () => {
|
refreshRouter: () => {
|
||||||
setRouterState(getRouter())
|
setRouterState(getRouter())
|
||||||
}
|
},
|
||||||
|
isDarkMode: getIsDark()
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Suspense fallback={<FullscreenLoadingMask />}>
|
<Suspense fallback={<FullscreenLoadingMask />}>
|
||||||
<RouterProvider router={routerState} />
|
<RouterProvider router={routerState} />
|
||||||
</Suspense>
|
</Suspense>
|
||||||
</AppContext.Provider>
|
</AppContext.Provider>
|
||||||
</>
|
{messageHolder}
|
||||||
|
{notificationHolder}
|
||||||
|
{modalHolder}
|
||||||
|
</AntdConfigProvider>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,22 +0,0 @@
|
|||||||
@mixin keyframes($animationName) {
|
|
||||||
@-webkit-keyframes #{$animationName} {
|
|
||||||
@content
|
|
||||||
}
|
|
||||||
@-moz-keyframes #{$animationName} {
|
|
||||||
@content
|
|
||||||
}
|
|
||||||
@-o-keyframes #{$animationName} {
|
|
||||||
@content
|
|
||||||
}
|
|
||||||
@keyframes #{$animationName} {
|
|
||||||
@content
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin unique-keyframes {
|
|
||||||
$animationName: unique-id();
|
|
||||||
animation-name: $animationName;
|
|
||||||
@include keyframes($animationName) {
|
|
||||||
@content
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,63 +0,0 @@
|
|||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
}
|
|
||||||
|
|
||||||
em,
|
|
||||||
i {
|
|
||||||
font-style: normal
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
list-style: none
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
border: 0;
|
|
||||||
vertical-align: middle
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
cursor: pointer
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #666;
|
|
||||||
text-decoration: none
|
|
||||||
}
|
|
||||||
|
|
||||||
button,
|
|
||||||
input {
|
|
||||||
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
|
|
||||||
border: 0;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
background-color: #fff;
|
|
||||||
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
|
|
||||||
color: #666
|
|
||||||
}
|
|
||||||
|
|
||||||
.hide,
|
|
||||||
.none {
|
|
||||||
display: none
|
|
||||||
}
|
|
||||||
|
|
||||||
.clearfix:after {
|
|
||||||
visibility: hidden;
|
|
||||||
clear: both;
|
|
||||||
display: block;
|
|
||||||
content: ".";
|
|
||||||
height: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
.clearfix {
|
|
||||||
*zoom: 1
|
|
||||||
}
|
|
||||||
32
src/assets/css/base.style.ts
Normal file
32
src/assets/css/base.style.ts
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
import { createGlobalStyle } from 'antd-style'
|
||||||
|
|
||||||
|
export default createGlobalStyle(() => ({
|
||||||
|
'*': { margin: 0, padding: 0, boxSizing: 'border-box' },
|
||||||
|
html: { scrollBehavior: 'smooth' },
|
||||||
|
'em, i': { fontStyle: 'normal' },
|
||||||
|
li: { listStyle: 'none' },
|
||||||
|
img: { border: 0, verticalAlign: 'middle' },
|
||||||
|
button: { cursor: 'pointer' },
|
||||||
|
a: { color: '#666', textDecoration: 'none', whiteSpace: 'nowrap' },
|
||||||
|
'button, input': {
|
||||||
|
fontFamily:
|
||||||
|
'Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\\5B8B\\4F53", sans-serif',
|
||||||
|
border: 0,
|
||||||
|
outline: 'none'
|
||||||
|
},
|
||||||
|
body: {
|
||||||
|
WebkitFontSmoothing: 'antialiased',
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
font: '12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\\5B8B\\4F53", sans-serif',
|
||||||
|
color: '#666'
|
||||||
|
},
|
||||||
|
'.hide, .none': { display: 'none' },
|
||||||
|
'.clearfix:after': {
|
||||||
|
visibility: 'hidden',
|
||||||
|
clear: 'both',
|
||||||
|
display: 'block',
|
||||||
|
content: '"."',
|
||||||
|
height: 0
|
||||||
|
},
|
||||||
|
'.clearfix': { zoom: 1 }
|
||||||
|
}))
|
||||||
@@ -1,118 +0,0 @@
|
|||||||
@use '@/assets/css/constants' as constants;
|
|
||||||
|
|
||||||
#root {
|
|
||||||
height: 100vh;
|
|
||||||
width: 100vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.body {
|
|
||||||
background-color: constants.$background-color;
|
|
||||||
color: constants.$font-main-color;
|
|
||||||
user-select: none;
|
|
||||||
min-width: 900px;
|
|
||||||
min-height: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fill {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fill-with {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fill-height {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.background-origin {
|
|
||||||
background-color: constants.$origin-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center-box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vertical-center-box {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.horizontal-center-box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-size-xs {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
|
|
||||||
> use {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-size-sm {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
|
|
||||||
> use {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-size-md {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
|
|
||||||
> use {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-size-lg {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
|
|
||||||
> use {
|
|
||||||
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-size-xl {
|
|
||||||
width: 64px;
|
|
||||||
height: 64px;
|
|
||||||
|
|
||||||
> use {
|
|
||||||
width: 64px;
|
|
||||||
height: 64px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-size-menu {
|
|
||||||
width: 23px;
|
|
||||||
height: 23px;
|
|
||||||
|
|
||||||
> use {
|
|
||||||
width: 23px;
|
|
||||||
height: 23px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-horizontal {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-vertical {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
43
src/assets/css/common.style.ts
Normal file
43
src/assets/css/common.style.ts
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
import { createGlobalStyle } from 'antd-style'
|
||||||
|
|
||||||
|
export default createGlobalStyle(() => ({
|
||||||
|
'.center-box': {
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center'
|
||||||
|
},
|
||||||
|
'.vertical-center-box': { display: 'flex', alignItems: 'center' },
|
||||||
|
'.horizontal-center-box': { display: 'flex', justifyContent: 'center' },
|
||||||
|
'.icon-size-xs': {
|
||||||
|
width: 16,
|
||||||
|
height: 16,
|
||||||
|
'> use': { width: 16, height: 16 }
|
||||||
|
},
|
||||||
|
'.icon-size-sm': {
|
||||||
|
width: 20,
|
||||||
|
height: 20,
|
||||||
|
'> use': { width: 20, height: 20 }
|
||||||
|
},
|
||||||
|
'.icon-size-md': {
|
||||||
|
width: 24,
|
||||||
|
height: 24,
|
||||||
|
'> use': { width: 24, height: 24 }
|
||||||
|
},
|
||||||
|
'.icon-size-lg': {
|
||||||
|
width: 32,
|
||||||
|
height: 32,
|
||||||
|
'> use': { width: 32, height: 32 }
|
||||||
|
},
|
||||||
|
'.icon-size-xl': {
|
||||||
|
width: 64,
|
||||||
|
height: 64,
|
||||||
|
'> use': { width: 64, height: 64 }
|
||||||
|
},
|
||||||
|
'.icon-size-menu': {
|
||||||
|
width: 23,
|
||||||
|
height: 23,
|
||||||
|
'> use': { width: 23, height: 23 }
|
||||||
|
},
|
||||||
|
'.flex-horizontal': { display: 'flex', flexDirection: 'row' },
|
||||||
|
'.flex-vertical': { display: 'flex', flexDirection: 'column' }
|
||||||
|
}))
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
@use '@/assets/css/constants' as constants;
|
|
||||||
|
|
||||||
.card-box {
|
|
||||||
background-color: constants.$origin-color;
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
10
src/assets/css/components/common/card.style.ts
Normal file
10
src/assets/css/components/common/card.style.ts
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ token }) => ({
|
||||||
|
cardBox: {
|
||||||
|
backgroundColor: token.colorBgContainer,
|
||||||
|
borderRadius: token.borderRadiusLG,
|
||||||
|
overflow: 'hidden',
|
||||||
|
boxShadow: token.boxShadowTertiary
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
.fit-center {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
11
src/assets/css/components/common/fit-center.style.ts
Normal file
11
src/assets/css/components/common/fit-center.style.ts
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(() => ({
|
||||||
|
fitCenter: {
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%'
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
.fit-fullscreen {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
9
src/assets/css/components/common/fit-fullscreen.style.ts
Normal file
9
src/assets/css/components/common/fit-fullscreen.style.ts
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(() => ({
|
||||||
|
fitFullscreen: {
|
||||||
|
position: 'relative',
|
||||||
|
width: '100%',
|
||||||
|
height: '100vh'
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
.flex-box {
|
|
||||||
> * {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
12
src/assets/css/components/common/flex-box.style.ts
Normal file
12
src/assets/css/components/common/flex-box.style.ts
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(
|
||||||
|
() => ({
|
||||||
|
flexBox: {
|
||||||
|
'> *': {
|
||||||
|
flex: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
{ hashPriority: 'low' }
|
||||||
|
)
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
.fullscreen-loading-mask {
|
|
||||||
position: absolute;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 100;
|
|
||||||
background-color: rgba(200, 200, 200, 0.2);
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ token }) => ({
|
||||||
|
fullscreenLoadingMask: {
|
||||||
|
position: 'absolute',
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
zIndex: 100,
|
||||||
|
backgroundColor: token.colorBgContainer
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,90 +0,0 @@
|
|||||||
@use '@/assets/css/constants' as constants;
|
|
||||||
@use '@/assets/css/mixins' as mixins;
|
|
||||||
|
|
||||||
.hide-scrollbar-mask {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.hide-scrollbar-selection {
|
|
||||||
position: relative;
|
|
||||||
overflow: scroll;
|
|
||||||
scrollbar-width: none;
|
|
||||||
-ms-overflow-style: none;
|
|
||||||
|
|
||||||
.hide-scrollbar-content {
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollbar {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1000;
|
|
||||||
opacity: .5;
|
|
||||||
touch-action: none;
|
|
||||||
|
|
||||||
.box {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
|
|
||||||
.block {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 8px;
|
|
||||||
background-color: constants.$font-secondary-color;
|
|
||||||
transition: background-color .2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
:hover {
|
|
||||||
background-color: constants.$font-main-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.hide {
|
|
||||||
display: block;
|
|
||||||
opacity: 0;
|
|
||||||
animation: 0.4s linear;
|
|
||||||
|
|
||||||
@include mixins.unique-keyframes {
|
|
||||||
0% {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.vertical-scrollbar {
|
|
||||||
height: 100%;
|
|
||||||
left: 100%;
|
|
||||||
top: 0;
|
|
||||||
transform: translateX(-100%);
|
|
||||||
|
|
||||||
.box {
|
|
||||||
width: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.horizontal-scrollbar {
|
|
||||||
width: 100%;
|
|
||||||
left: 0;
|
|
||||||
top: 100%;
|
|
||||||
transform: translateY(-100%);
|
|
||||||
|
|
||||||
.box {
|
|
||||||
height: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
84
src/assets/css/components/common/hide-scrollbar.style.ts
Normal file
84
src/assets/css/components/common/hide-scrollbar.style.ts
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
import { createStyles, keyframes } from 'antd-style'
|
||||||
|
|
||||||
|
const fadeOut = keyframes`
|
||||||
|
0% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export default createStyles(({ css, cx, token }) => {
|
||||||
|
const scrollbarBox = cx(css`
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: ${token.borderRadiusLG};
|
||||||
|
overflow: hidden;
|
||||||
|
`)
|
||||||
|
|
||||||
|
return {
|
||||||
|
hideScrollbarMask: {
|
||||||
|
position: 'relative',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
overflow: 'hidden',
|
||||||
|
'::-webkit-scrollbar': {
|
||||||
|
display: 'none'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
hideScrollbarSelection: {
|
||||||
|
position: 'relative',
|
||||||
|
overflow: 'scroll',
|
||||||
|
scrollbarWidth: 'none',
|
||||||
|
msOverflowStyle: 'none'
|
||||||
|
},
|
||||||
|
hideScrollbarContent: {
|
||||||
|
minWidth: '100%'
|
||||||
|
},
|
||||||
|
scrollbar: {
|
||||||
|
position: 'absolute',
|
||||||
|
zIndex: 1000,
|
||||||
|
opacity: 0.5,
|
||||||
|
touchAction: 'none'
|
||||||
|
},
|
||||||
|
scrollbarBox,
|
||||||
|
scrollbarBoxBlock: {
|
||||||
|
position: 'absolute',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
borderRadius: token.borderRadiusLG,
|
||||||
|
backgroundColor: token.colorTextSecondary,
|
||||||
|
transition: 'background-color 0.2s',
|
||||||
|
':hover': {
|
||||||
|
backgroundColor: token.colorTextLabel
|
||||||
|
}
|
||||||
|
},
|
||||||
|
verticalScrollbar: css`
|
||||||
|
height: 100%;
|
||||||
|
left: 100%;
|
||||||
|
top: 0;
|
||||||
|
transform: translateX(-100%);
|
||||||
|
|
||||||
|
.${scrollbarBox} {
|
||||||
|
width: ${token.sizeXXS}px;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
horizontalScrollbar: css`
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 100%;
|
||||||
|
transform: translateY(-100%);
|
||||||
|
|
||||||
|
.${scrollbarBox} {
|
||||||
|
height: ${token.sizeXXS}px;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
hide: {
|
||||||
|
display: 'block',
|
||||||
|
opacity: 0,
|
||||||
|
animation: `${fadeOut} 0.4s linear`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
@@ -1,34 +0,0 @@
|
|||||||
@use '@/assets/css/constants' as constants;
|
|
||||||
|
|
||||||
.dot-list {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.item {
|
|
||||||
flex: auto;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.dot {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: {
|
|
||||||
width: 2px;
|
|
||||||
color: constants.$font-secondary-color;
|
|
||||||
style: solid;
|
|
||||||
};
|
|
||||||
transition: all .2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
:hover {
|
|
||||||
background-color: constants.$focus-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.active > * {
|
|
||||||
background-color: constants.$font-secondary-color !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
.loading-mask {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
12
src/assets/css/components/common/loading-mask.style.ts
Normal file
12
src/assets/css/components/common/loading-mask.style.ts
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(() => ({
|
||||||
|
loadingMask: {
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
zIndex: 100
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,363 +0,0 @@
|
|||||||
@use "@/assets/css/constants" as constants;
|
|
||||||
@use "@/assets/css/mixins" as mixins;
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
user-select: none;
|
|
||||||
transition: all .3s;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-weight: bold;
|
|
||||||
padding: 10px 14px;
|
|
||||||
color: constants.$main-color;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.icon-box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 10px;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
font-size: constants.$SIZE_ICON_SM;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
span {
|
|
||||||
transform: rotateZ(180deg);
|
|
||||||
transition: all .3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: constants.$background-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 2em;
|
|
||||||
text-align: center;
|
|
||||||
letter-spacing: 0.2em;
|
|
||||||
transform: translateX(0.1em);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content, .bottom-fixed {
|
|
||||||
display: flex;
|
|
||||||
min-height: 0;
|
|
||||||
flex-direction: column;
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
.scroll {
|
|
||||||
min-height: 0;
|
|
||||||
flex: 1;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
> li, > div > li {
|
|
||||||
padding: 2px 14px;
|
|
||||||
|
|
||||||
&.item {
|
|
||||||
position: relative;
|
|
||||||
font-size: 1rem;
|
|
||||||
|
|
||||||
> .menu-bt {
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
height: 40px;
|
|
||||||
|
|
||||||
.icon-box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 10px;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
font-size: constants.$SIZE_ICON_SM;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
transition: all 0.2s;
|
|
||||||
background-color: constants.$origin-color;
|
|
||||||
|
|
||||||
.text {
|
|
||||||
flex: 1;
|
|
||||||
padding-left: 8px;
|
|
||||||
width: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: constants.$origin-color;
|
|
||||||
background-color: constants.$main-color;
|
|
||||||
|
|
||||||
img {
|
|
||||||
filter: drop-shadow(1000px 0 0 constants.$origin-color);
|
|
||||||
transform: translate(-1000px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu {
|
|
||||||
visibility: hidden;
|
|
||||||
position: fixed;
|
|
||||||
padding-left: 10px;
|
|
||||||
z-index: 10000;
|
|
||||||
animation: 0.1s ease forwards;
|
|
||||||
@include mixins.unique-keyframes {
|
|
||||||
0% {
|
|
||||||
transform: translateX(0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateX(-10px);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2px;
|
|
||||||
padding: 10px 10px;
|
|
||||||
background-color: constants.$origin-color;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.1);
|
|
||||||
|
|
||||||
.item {
|
|
||||||
border-radius: 8px;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
padding: 8px 16px;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
.text {
|
|
||||||
width: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: constants.$origin-color;
|
|
||||||
background-color: constants.$main-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover a:not(.active) {
|
|
||||||
background-color: constants.$background-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
> .menu-bt {
|
|
||||||
a:not(.active) {
|
|
||||||
background-color: constants.$background-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu {
|
|
||||||
visibility: visible;
|
|
||||||
animation: 0.3s ease;
|
|
||||||
@include mixins.unique-keyframes {
|
|
||||||
0% {
|
|
||||||
transform: translateX(-10px);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateX(0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete {
|
|
||||||
.menu-bt {
|
|
||||||
border: {
|
|
||||||
width: 1px;
|
|
||||||
color: constants.$error-secondary-color;
|
|
||||||
style: dashed;
|
|
||||||
};
|
|
||||||
filter: drop-shadow(1000px 0 0 constants.$error-secondary-color);
|
|
||||||
transform: translate(-1000px);
|
|
||||||
|
|
||||||
> a {
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.separate {
|
|
||||||
height: 0;
|
|
||||||
margin: 10px 5px;
|
|
||||||
border: {
|
|
||||||
width: 1px;
|
|
||||||
color: constants.$font-secondary-color;
|
|
||||||
style: solid;
|
|
||||||
};
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-weight: bold;
|
|
||||||
padding: 8px 14px;
|
|
||||||
color: constants.$main-color;
|
|
||||||
|
|
||||||
.icon-user {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
margin-left: 4px;
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
font-size: constants.$SIZE_ICON_XS;
|
|
||||||
border: 2px constants.$font-secondary-color solid;
|
|
||||||
color: constants.$font-secondary-color;
|
|
||||||
border-radius: 50%;
|
|
||||||
overflow: hidden;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
flex: 1;
|
|
||||||
padding-left: 10px;
|
|
||||||
font-size: 1.4em;
|
|
||||||
color: constants.$font-main-color;
|
|
||||||
user-select: text;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: constants.$main-color;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-exit {
|
|
||||||
font-size: constants.$SIZE_ICON_XS;
|
|
||||||
color: constants.$error-color;
|
|
||||||
padding: 6px 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-radius: 8px;
|
|
||||||
background-color: constants.$background-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.hide {
|
|
||||||
width: 68px !important;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
.icon-box {
|
|
||||||
span {
|
|
||||||
transform: rotateZ(360deg);
|
|
||||||
transition: all .3s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-bt {
|
|
||||||
.text, .extend {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu {
|
|
||||||
.menu-bt {
|
|
||||||
.text {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.text {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu-exit {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
padding-left: 6px;
|
|
||||||
left: 100%;
|
|
||||||
z-index: 1000;
|
|
||||||
box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
|
|
||||||
.content {
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background-color: constants.$origin-color;
|
|
||||||
|
|
||||||
.icon-exit {
|
|
||||||
padding: 4px 8px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-radius: 8px;
|
|
||||||
background-color: constants.$background-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.hide {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover .submenu-exit {
|
|
||||||
display: block;
|
|
||||||
animation: 0.3s ease;
|
|
||||||
@include mixins.unique-keyframes {
|
|
||||||
0% {
|
|
||||||
transform: translateX(-10px);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateX(0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
112
src/assets/css/components/common/sidebar/footer.style.ts
Normal file
112
src/assets/css/components/common/sidebar/footer.style.ts
Normal file
@@ -0,0 +1,112 @@
|
|||||||
|
import { createStyles, keyframes } from 'antd-style'
|
||||||
|
|
||||||
|
const slideIn = keyframes`
|
||||||
|
0% {
|
||||||
|
transform: translateX(-10px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export default createStyles(({ cx, css, token }) => {
|
||||||
|
const collapsedExit = cx(css`
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
padding-left: ${token.paddingXS}px;
|
||||||
|
left: 100%;
|
||||||
|
z-index: 1000;
|
||||||
|
transform: translateX(-100%);
|
||||||
|
`)
|
||||||
|
|
||||||
|
return {
|
||||||
|
footer: css`
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: ${token.paddingXS}px ${token.paddingSM}px;
|
||||||
|
color: ${token.colorPrimary};
|
||||||
|
|
||||||
|
&:hover .${collapsedExit} {
|
||||||
|
opacity: 1;
|
||||||
|
animation: ${slideIn} 0.3s ease;
|
||||||
|
transform: unset;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
icon: {
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
flex: '0 0 auto',
|
||||||
|
marginLeft: token.marginXXS,
|
||||||
|
width: token.sizeXL,
|
||||||
|
height: token.sizeXL,
|
||||||
|
fontSize: token.sizeMS,
|
||||||
|
border: `2px ${token.colorBorder} solid`,
|
||||||
|
color: token.colorBorder,
|
||||||
|
borderRadius: '50%',
|
||||||
|
overflow: 'hidden',
|
||||||
|
cursor: 'pointer',
|
||||||
|
|
||||||
|
img: {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
text: {
|
||||||
|
flex: 1,
|
||||||
|
paddingLeft: token.paddingXS,
|
||||||
|
fontSize: token.fontSizeLG,
|
||||||
|
color: token.colorTextLabel,
|
||||||
|
userSelect: 'text',
|
||||||
|
overflow: 'hidden',
|
||||||
|
textOverflow: 'ellipsis',
|
||||||
|
a: {
|
||||||
|
color: token.colorPrimary,
|
||||||
|
textDecoration: 'underline'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
collapsedText: {
|
||||||
|
display: 'none'
|
||||||
|
},
|
||||||
|
|
||||||
|
collapsedExit,
|
||||||
|
|
||||||
|
hide: {
|
||||||
|
display: 'none !important'
|
||||||
|
},
|
||||||
|
|
||||||
|
exitContent: {
|
||||||
|
display: 'flex',
|
||||||
|
backgroundColor: token.colorBgContainer
|
||||||
|
},
|
||||||
|
|
||||||
|
collapsedExitContent: {
|
||||||
|
padding: token.paddingXS,
|
||||||
|
borderRadius: token.borderRadiusLG,
|
||||||
|
boxShadow: token.boxShadow
|
||||||
|
},
|
||||||
|
|
||||||
|
exitIcon: {
|
||||||
|
fontSize: token.sizeMS,
|
||||||
|
color: token.colorError,
|
||||||
|
padding: `${token.paddingXXS}px ${token.paddingXS}px`,
|
||||||
|
cursor: 'pointer',
|
||||||
|
|
||||||
|
'&:hover': {
|
||||||
|
borderRadius: token.borderRadiusLG,
|
||||||
|
backgroundColor: token.colorBgLayout
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
collapsedExitIcon: {
|
||||||
|
padding: `${token.paddingXXS}px ${token.paddingXS}px`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
85
src/assets/css/components/common/sidebar/index.style.ts
Normal file
85
src/assets/css/components/common/sidebar/index.style.ts
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ cx, css, token }) => {
|
||||||
|
const title = cx(css`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: ${token.paddingXS}px ${token.paddingSM}px;
|
||||||
|
color: ${token.colorPrimary};
|
||||||
|
overflow: hidden;
|
||||||
|
`)
|
||||||
|
|
||||||
|
const titleIcon = cx(css`
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: ${token.paddingXS}px;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
font-size: ${token.sizeMD}px;
|
||||||
|
border-radius: ${token.borderRadiusLG}px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
span {
|
||||||
|
transform: rotateZ(180deg);
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: ${token.colorBgLayout};
|
||||||
|
}
|
||||||
|
`)
|
||||||
|
|
||||||
|
const titleText = cx(css`
|
||||||
|
flex: 1;
|
||||||
|
font-size: ${token.fontSizeHeading3}px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: ${token.sizeXS}px;
|
||||||
|
`)
|
||||||
|
|
||||||
|
return {
|
||||||
|
sidebar: {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
height: '100%',
|
||||||
|
userSelect: 'none',
|
||||||
|
transition: 'all .3s',
|
||||||
|
whiteSpace: 'nowrap'
|
||||||
|
},
|
||||||
|
|
||||||
|
title,
|
||||||
|
|
||||||
|
titleIcon,
|
||||||
|
|
||||||
|
titleText,
|
||||||
|
|
||||||
|
content: {
|
||||||
|
display: 'flex',
|
||||||
|
minHeight: 0,
|
||||||
|
flexDirection: 'column',
|
||||||
|
flex: 1,
|
||||||
|
|
||||||
|
'ul > li, ul > div > li': {
|
||||||
|
padding: `${token.paddingXXS}px ${token.paddingSM}px`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
collapse: cx(css`
|
||||||
|
width: ${token.sizeXL * 2}px !important;
|
||||||
|
|
||||||
|
.${title} {
|
||||||
|
.${titleIcon} {
|
||||||
|
span {
|
||||||
|
transform: rotateZ(360deg);
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.${titleText} {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`)
|
||||||
|
}
|
||||||
|
})
|
||||||
84
src/assets/css/components/common/sidebar/item.style.ts
Normal file
84
src/assets/css/components/common/sidebar/item.style.ts
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ cx, css, token }) => {
|
||||||
|
const menuBt = cx(css`
|
||||||
|
border-radius: ${token.borderRadiusLG}px;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 40px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
transition: all 0.2s;
|
||||||
|
background-color: ${token.colorBgContainer};
|
||||||
|
}
|
||||||
|
`)
|
||||||
|
|
||||||
|
const active = cx(css`
|
||||||
|
color: ${token.colorTextLightSolid};
|
||||||
|
background-color: ${token.colorPrimary} !important;
|
||||||
|
`)
|
||||||
|
|
||||||
|
return {
|
||||||
|
item: css`
|
||||||
|
position: relative;
|
||||||
|
font-size: ${token.fontSizeHeading5}px;
|
||||||
|
|
||||||
|
&:hover > div > a:not(.${active}),
|
||||||
|
&:hover > a:not(.${active}) {
|
||||||
|
background-color: ${token.colorBgLayout};
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
submenuItem: css`
|
||||||
|
border-radius: ${token.borderRadiusLG}px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0 !important;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
padding: ${token.paddingXS}px ${token.paddingMD}px;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
menuBt,
|
||||||
|
|
||||||
|
active,
|
||||||
|
|
||||||
|
icon: {
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
padding: `0 ${token.paddingXS}px`,
|
||||||
|
width: 40,
|
||||||
|
height: 40,
|
||||||
|
flex: '0 0 auto',
|
||||||
|
fontSize: token.sizeMD,
|
||||||
|
cursor: 'pointer',
|
||||||
|
|
||||||
|
img: {
|
||||||
|
width: '100%'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
text: {
|
||||||
|
flex: 1,
|
||||||
|
paddingLeft: token.paddingXS,
|
||||||
|
width: 0,
|
||||||
|
overflow: 'hidden',
|
||||||
|
textOverflow: 'ellipsis'
|
||||||
|
},
|
||||||
|
|
||||||
|
collapsedText: {
|
||||||
|
display: 'none'
|
||||||
|
},
|
||||||
|
|
||||||
|
collapsedExtend: {
|
||||||
|
display: 'none'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
9
src/assets/css/components/common/sidebar/scroll.style.ts
Normal file
9
src/assets/css/components/common/sidebar/scroll.style.ts
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(() => ({
|
||||||
|
scroll: {
|
||||||
|
minHeight: 0,
|
||||||
|
flex: 1,
|
||||||
|
width: '100%'
|
||||||
|
}
|
||||||
|
}))
|
||||||
9
src/assets/css/components/common/sidebar/separate.ts
Normal file
9
src/assets/css/components/common/sidebar/separate.ts
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ token }) => ({
|
||||||
|
separate: {
|
||||||
|
height: 0,
|
||||||
|
margin: `${token.marginSM}px ${token.marginXS}px`,
|
||||||
|
border: `1px solid ${token.colorBorder}`
|
||||||
|
}
|
||||||
|
}))
|
||||||
50
src/assets/css/components/common/sidebar/submenu.style.ts
Normal file
50
src/assets/css/components/common/sidebar/submenu.style.ts
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
import { createStyles, keyframes } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ token }) => {
|
||||||
|
const slideIn = keyframes`
|
||||||
|
0% {
|
||||||
|
transform: translateX(-${token.sizeSM}px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
const slideOut = keyframes`
|
||||||
|
0% {
|
||||||
|
transform: translateX(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(-${token.sizeSM}px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
return {
|
||||||
|
submenu: {
|
||||||
|
visibility: 'hidden',
|
||||||
|
position: 'fixed',
|
||||||
|
paddingLeft: token.paddingXS,
|
||||||
|
zIndex: 10000,
|
||||||
|
animation: `${slideOut} 0.1s ease forwards`
|
||||||
|
},
|
||||||
|
|
||||||
|
hoveredSubmenu: {
|
||||||
|
visibility: 'visible',
|
||||||
|
animation: `${slideIn} 0.3s ease`
|
||||||
|
},
|
||||||
|
|
||||||
|
content: {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
gap: token.sizeXXS,
|
||||||
|
padding: token.paddingSM,
|
||||||
|
backgroundColor: token.colorBgContainer,
|
||||||
|
borderRadius: token.borderRadiusLG,
|
||||||
|
boxShadow: token.boxShadow
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
@use '@/assets/css/constants' as constants;
|
|
||||||
|
|
||||||
[data-component=component-url-card] {
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.url-card {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
margin-top: 80px;
|
|
||||||
text-align: center;
|
|
||||||
gap: 42px;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
color: constants.$production-color;
|
|
||||||
font-size: constants.$SIZE_ICON_XL;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
font-weight: bolder;
|
|
||||||
font-size: 2em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
24
src/assets/css/components/common/url-card.style.ts
Normal file
24
src/assets/css/components/common/url-card.style.ts
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ token }) => ({
|
||||||
|
root: {
|
||||||
|
width: 180,
|
||||||
|
height: 290,
|
||||||
|
textAlign: 'center',
|
||||||
|
gap: token.sizeXXL,
|
||||||
|
cursor: 'pointer',
|
||||||
|
'> *': {
|
||||||
|
flex: '0 0 auto',
|
||||||
|
display: 'block'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
marginTop: 80,
|
||||||
|
color: token.colorPrimary,
|
||||||
|
fontSize: token.sizeXXL
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
fontWeight: 'bolder',
|
||||||
|
fontSize: token.fontSizeXL
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
[data-component=component-drag-handle] {
|
|
||||||
background-color: transparent;
|
|
||||||
color: unset;
|
|
||||||
cursor: grab;
|
|
||||||
}
|
|
||||||
9
src/assets/css/components/dnd/drag-handle.style.ts
Normal file
9
src/assets/css/components/dnd/drag-handle.style.ts
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(() => ({
|
||||||
|
root: {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
color: 'unset',
|
||||||
|
cursor: 'grab'
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
@use "@/assets/css/constants" as constants;
|
|
||||||
|
|
||||||
[data-component=component-drop-mask] {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: {
|
|
||||||
left: 10px;
|
|
||||||
right: 10px;
|
|
||||||
bottom: 10px;
|
|
||||||
};
|
|
||||||
background-color: constants.$origin-color;
|
|
||||||
|
|
||||||
.drop-mask-border {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
border: {
|
|
||||||
width: 2px;
|
|
||||||
color: constants.$font-secondary-color;
|
|
||||||
style: dashed;
|
|
||||||
radius: 8px;
|
|
||||||
};
|
|
||||||
font-size: 1.8em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
24
src/assets/css/components/dnd/drop-mask.style.ts
Normal file
24
src/assets/css/components/dnd/drop-mask.style.ts
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ token }) => ({
|
||||||
|
root: {
|
||||||
|
position: 'absolute',
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
padding: `0 ${token.paddingSM}px ${token.paddingSM}px`,
|
||||||
|
backgroundColor: token.colorBgContainer
|
||||||
|
},
|
||||||
|
|
||||||
|
dropMaskBorder: {
|
||||||
|
display: 'flex',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
border: `2px dashed ${token.colorBorder}`,
|
||||||
|
borderRadius: token.borderRadiusLG,
|
||||||
|
fontSize: token.fontSizeHeading3
|
||||||
|
}
|
||||||
|
}))
|
||||||
15
src/assets/css/components/dnd/sortable.style.ts
Normal file
15
src/assets/css/components/dnd/sortable.style.ts
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ token }) => ({
|
||||||
|
delete: {
|
||||||
|
'.dnd-delete-mask': {
|
||||||
|
border: `1px dashed ${token.colorErrorHover}`,
|
||||||
|
filter: `drop-shadow(1000px 0 0 ${token.colorErrorHover})`,
|
||||||
|
transform: 'translate(-1000px)',
|
||||||
|
|
||||||
|
'> a': {
|
||||||
|
backgroundColor: 'transparent !important'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,33 +0,0 @@
|
|||||||
@use '@/assets/css/constants' as constants;
|
|
||||||
|
|
||||||
[data-component=component-setting-card] {
|
|
||||||
.settings-card {
|
|
||||||
padding: 20px;
|
|
||||||
gap: 20px;
|
|
||||||
color: constants.$main-color;
|
|
||||||
|
|
||||||
> .head {
|
|
||||||
align-items: center;
|
|
||||||
gap: 5px;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
font-size: constants.$SIZE_ICON_MD;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
display: flex;
|
|
||||||
font-size: 1.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
:nth-child(n+3) {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
color: constants.$font-main-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bt-save {
|
|
||||||
color: constants.$main-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
32
src/assets/css/components/system/setting-card.style.ts
Normal file
32
src/assets/css/components/system/setting-card.style.ts
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ token }) => ({
|
||||||
|
root: {
|
||||||
|
padding: token.paddingLG,
|
||||||
|
gap: token.paddingLG,
|
||||||
|
color: token.colorPrimary
|
||||||
|
},
|
||||||
|
|
||||||
|
head: {
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: token.sizeXXS,
|
||||||
|
|
||||||
|
'>:nth-child(n+3)': {
|
||||||
|
flex: '0 0 auto'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
icon: {
|
||||||
|
fontSize: token.sizeLG,
|
||||||
|
flex: '0 0 auto'
|
||||||
|
},
|
||||||
|
|
||||||
|
title: {
|
||||||
|
display: 'flex',
|
||||||
|
fontSize: token.fontSize
|
||||||
|
},
|
||||||
|
|
||||||
|
btSave: {
|
||||||
|
color: token.colorPrimary
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,78 +0,0 @@
|
|||||||
@use '@/assets/css/constants' as constants;
|
|
||||||
|
|
||||||
[data-component=component-statistics-card] {
|
|
||||||
.statistics-card {
|
|
||||||
padding: 20px;
|
|
||||||
gap: 20px;
|
|
||||||
|
|
||||||
> .head {
|
|
||||||
align-items: center;
|
|
||||||
gap: 5px;
|
|
||||||
color: constants.$main-color;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
font-size: constants.$SIZE_ICON_MD;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
display: flex;
|
|
||||||
font-size: 1.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
:nth-child(n+3) {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
color: constants.$font-main-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-content {
|
|
||||||
font-size: 1.1em;
|
|
||||||
padding: 0 10px;
|
|
||||||
gap: 10px;
|
|
||||||
|
|
||||||
.key, .value-percent {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
color: constants.$font-main-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value {
|
|
||||||
color: constants.$font-secondary-color;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.value-chart {
|
|
||||||
justify-content: space-around;
|
|
||||||
width: 0;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
max-height: 12px;
|
|
||||||
height: 12px;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
transform: translateY(1px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.value-percent {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.big-chart {
|
|
||||||
width: 0;
|
|
||||||
height: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
> * {
|
|
||||||
gap: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
28
src/assets/css/components/system/statistics-card.style.ts
Normal file
28
src/assets/css/components/system/statistics-card.style.ts
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ token }) => ({
|
||||||
|
root: {
|
||||||
|
padding: token.paddingLG,
|
||||||
|
gap: token.paddingLG
|
||||||
|
},
|
||||||
|
|
||||||
|
head: {
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: token.sizeXXS,
|
||||||
|
color: token.colorPrimary,
|
||||||
|
|
||||||
|
'>:nth-child(n+3)': {
|
||||||
|
flex: '0 0 auto'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
icon: {
|
||||||
|
fontSize: token.sizeLG,
|
||||||
|
flex: '0 0 auto'
|
||||||
|
},
|
||||||
|
|
||||||
|
title: {
|
||||||
|
display: 'flex',
|
||||||
|
fontSize: token.fontSize
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
@use '@/assets/css/constants' as constants;
|
|
||||||
|
|
||||||
[data-component=component-load-more-card] {
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.load-more-card {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
text-align: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
display: flex;
|
|
||||||
font-size: constants.$SIZE_ICON_XXL;
|
|
||||||
color: constants.$production-color;
|
|
||||||
align-items: center;
|
|
||||||
transform: translateY(-20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
position: absolute;
|
|
||||||
top: 60%;
|
|
||||||
font-size: 1.2em;
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
26
src/assets/css/components/tools/load-more-card.style.ts
Normal file
26
src/assets/css/components/tools/load-more-card.style.ts
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ token }) => ({
|
||||||
|
root: {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
textAlign: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
cursor: 'pointer',
|
||||||
|
|
||||||
|
'>*': {
|
||||||
|
flex: '0 0 auto'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
icon: {
|
||||||
|
fontSize: token.sizeXXL,
|
||||||
|
color: token.colorPrimary
|
||||||
|
},
|
||||||
|
|
||||||
|
text: {
|
||||||
|
fontSize: token.fontSizeXL,
|
||||||
|
fontWeight: 'bolder'
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,51 +0,0 @@
|
|||||||
@use '@/assets/css/constants' as constants;
|
|
||||||
|
|
||||||
[data-component=component-repository-card] {
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.repository-card {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
text-align: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
display: block;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
align-items: center;
|
|
||||||
padding: 10px;
|
|
||||||
|
|
||||||
.version-select {
|
|
||||||
width: 9em;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
>:not(.version-select) {
|
|
||||||
font-size: 1.6em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
display: flex;
|
|
||||||
padding-top: 10px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
color: constants.$production-color;
|
|
||||||
font-size: constants.$SIZE_ICON_XL;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: constants.$SIZE_ICON_XL;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tool-name {
|
|
||||||
font-weight: bolder;
|
|
||||||
font-size: 1.6em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
108
src/assets/css/components/tools/repository-card.style.ts
Normal file
108
src/assets/css/components/tools/repository-card.style.ts
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ cx, css, token }) => {
|
||||||
|
const info = cx(css`
|
||||||
|
padding: 0 ${token.paddingSM}px;
|
||||||
|
transform: translateY(${token.sizeXL}px);
|
||||||
|
transition: all 0.1s ease;
|
||||||
|
`)
|
||||||
|
|
||||||
|
const edit = cx(css`
|
||||||
|
> * {
|
||||||
|
> :first-child {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`)
|
||||||
|
|
||||||
|
const toolDesc = cx(css`
|
||||||
|
position: relative;
|
||||||
|
margin-top: ${token.marginXS}px;
|
||||||
|
color: ${token.colorTextDescription};
|
||||||
|
transition: all 0.1s ease;
|
||||||
|
`)
|
||||||
|
|
||||||
|
const operation = cx(css`
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
flex: 1;
|
||||||
|
gap: ${token.sizeXXS}px;
|
||||||
|
bottom: ${token.sizeLG}px;
|
||||||
|
padding: 0 ${token.paddingLG}px;
|
||||||
|
width: 100%;
|
||||||
|
flex-direction: column;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
> *,
|
||||||
|
.${edit} > * {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
`)
|
||||||
|
|
||||||
|
return {
|
||||||
|
root: css`
|
||||||
|
width: 180px;
|
||||||
|
height: 290px;
|
||||||
|
text-align: center;
|
||||||
|
gap: ${token.sizeSM}px;
|
||||||
|
|
||||||
|
> * {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.${info} {
|
||||||
|
transform: translateY(-${token.sizeXXS}px);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.${toolDesc} {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.${operation} {
|
||||||
|
opacity: 1;
|
||||||
|
transition: all 0.4s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
header: {
|
||||||
|
display: 'flex',
|
||||||
|
width: '100%',
|
||||||
|
padding: token.paddingSM,
|
||||||
|
gap: token.paddingXS,
|
||||||
|
|
||||||
|
'> :first-child': {
|
||||||
|
width: 0,
|
||||||
|
flex: 1
|
||||||
|
},
|
||||||
|
|
||||||
|
'> :not(:first-child)': {
|
||||||
|
fontSize: token.size
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
icon: {
|
||||||
|
img: {
|
||||||
|
width: token.sizeXL * 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
info,
|
||||||
|
|
||||||
|
toolName: {
|
||||||
|
fontSize: token.fontSizeXL,
|
||||||
|
fontWeight: 'bolder',
|
||||||
|
overflow: 'hidden',
|
||||||
|
textOverflow: 'ellipsis',
|
||||||
|
whiteSpace: 'nowrap'
|
||||||
|
},
|
||||||
|
|
||||||
|
toolDesc,
|
||||||
|
|
||||||
|
operation,
|
||||||
|
|
||||||
|
edit
|
||||||
|
}
|
||||||
|
})
|
||||||
@@ -1,112 +0,0 @@
|
|||||||
@use '@/assets/css/constants' as constants;
|
|
||||||
|
|
||||||
[data-component=component-store-card] {
|
|
||||||
height: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.store-card {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
text-align: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
display: block;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.version {
|
|
||||||
width: 0;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.operation {
|
|
||||||
display: flex;
|
|
||||||
font-size: 1.6em;
|
|
||||||
gap: 4px;
|
|
||||||
opacity: 0;
|
|
||||||
transition: all 0.2s;
|
|
||||||
z-index: 100;
|
|
||||||
|
|
||||||
> *:hover {
|
|
||||||
color: constants.$font-secondary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
display: flex;
|
|
||||||
padding-top: 10px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
color: constants.$production-color;
|
|
||||||
font-size: constants.$SIZE_ICON_XL;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: constants.$SIZE_ICON_XL;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
padding-top: 20px;
|
|
||||||
|
|
||||||
.tool-name {
|
|
||||||
font-weight: bolder;
|
|
||||||
font-size: 1.6em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tool-desc {
|
|
||||||
margin: {
|
|
||||||
top: 10px;
|
|
||||||
left: auto;
|
|
||||||
right: auto;
|
|
||||||
};
|
|
||||||
color: constants.$font-secondary-color;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
max-height: 40px;
|
|
||||||
width: 80%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.author {
|
|
||||||
display: flex;
|
|
||||||
margin-top: auto;
|
|
||||||
padding-top: 8px;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: end;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
gap: 10px;
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
> * {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.author-name {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:hover {
|
|
||||||
.header {
|
|
||||||
.version {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.operation {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
110
src/assets/css/components/tools/store-card.style.ts
Normal file
110
src/assets/css/components/tools/store-card.style.ts
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ cx, css, token }) => {
|
||||||
|
const version = cx(css`
|
||||||
|
width: 0;
|
||||||
|
transition: all 0.2s;
|
||||||
|
`)
|
||||||
|
|
||||||
|
const operation = cx(css`
|
||||||
|
display: flex;
|
||||||
|
font-size: 1.6em;
|
||||||
|
gap: ${token.sizeXXS}px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: all 0.2s;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
> *:hover {
|
||||||
|
color: ${token.colorIconHover};
|
||||||
|
}
|
||||||
|
`)
|
||||||
|
|
||||||
|
return {
|
||||||
|
root: css`
|
||||||
|
width: 180px;
|
||||||
|
height: 290px;
|
||||||
|
text-align: center;
|
||||||
|
gap: ${token.sizeSM}px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
> * {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.${version} {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.${operation} {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
header: {
|
||||||
|
display: 'flex',
|
||||||
|
width: '100%',
|
||||||
|
padding: token.paddingSM,
|
||||||
|
justifyContent: 'space-between'
|
||||||
|
},
|
||||||
|
|
||||||
|
version,
|
||||||
|
|
||||||
|
operation,
|
||||||
|
|
||||||
|
icon: {
|
||||||
|
img: {
|
||||||
|
width: token.sizeXL * 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
info: {
|
||||||
|
padding: `0 ${token.paddingSM}px`
|
||||||
|
},
|
||||||
|
|
||||||
|
toolName: {
|
||||||
|
fontSize: token.fontSizeXL,
|
||||||
|
fontWeight: 'bolder',
|
||||||
|
overflow: 'hidden',
|
||||||
|
textOverflow: 'ellipsis',
|
||||||
|
whiteSpace: 'nowrap'
|
||||||
|
},
|
||||||
|
|
||||||
|
toolDesc: {
|
||||||
|
marginTop: token.marginXS,
|
||||||
|
color: token.colorTextDescription
|
||||||
|
},
|
||||||
|
|
||||||
|
author: {
|
||||||
|
display: 'flex',
|
||||||
|
marginTop: 'auto',
|
||||||
|
paddingBottom: token.paddingSM,
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'center',
|
||||||
|
gap: token.sizeXS,
|
||||||
|
|
||||||
|
'&:hover': {
|
||||||
|
color: token.colorPrimary
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
avatar: {
|
||||||
|
'> *': {
|
||||||
|
width: token.sizeLG,
|
||||||
|
height: token.sizeLG
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
authorName: {
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center'
|
||||||
|
},
|
||||||
|
|
||||||
|
androidQrcode: {
|
||||||
|
alignItems: 'center',
|
||||||
|
transform: 'translateX(-16px)',
|
||||||
|
gap: token.sizeMD
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
$origin-color: white;
|
|
||||||
$production-color: #4E47BB;
|
|
||||||
$main-color: $production-color;
|
|
||||||
$secondary-color: #BAB8E5;
|
|
||||||
$error-color: #FF4D4F;
|
|
||||||
$error-secondary-color: #FF7875;
|
|
||||||
$blue-color: #1677FF;
|
|
||||||
$active-color: #EBECFD;
|
|
||||||
$background-color: #F5F5F5;
|
|
||||||
$font-main-color: #4D4D4D;
|
|
||||||
$font-secondary-color: #9E9E9E;
|
|
||||||
$focus-color: #DDDDDD;
|
|
||||||
$divide-color: rgba(204, 204, 204, 0.66);
|
|
||||||
$border-color: rgba(204, 204, 204, 0.33);
|
|
||||||
$url-color: rgba(102, 102, 102, .8);
|
|
||||||
$url-active-color: #ccc;
|
|
||||||
$SIZE_ICON_XS: 16px;
|
|
||||||
$SIZE_ICON_SM: 20px;
|
|
||||||
$SIZE_ICON_MD: 24px;
|
|
||||||
$SIZE_ICON_LG: 32px;
|
|
||||||
$SIZE_ICON_XL: 64px;
|
|
||||||
$SIZE_ICON_XXL: 96px;
|
|
||||||
@@ -1,149 +0,0 @@
|
|||||||
@use "@/assets/css/mixins" as mixins;
|
|
||||||
@use "@/assets/css/constants" as constants;
|
|
||||||
|
|
||||||
[data-component=sign] {
|
|
||||||
background-color: #D2D0DD;
|
|
||||||
user-select: none;
|
|
||||||
|
|
||||||
a {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: constants.$production-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sign-box {
|
|
||||||
position: relative;
|
|
||||||
background-color: constants.$origin-color;
|
|
||||||
width: 900px;
|
|
||||||
height: 600px;
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 12px;
|
|
||||||
|
|
||||||
.left, .right {
|
|
||||||
opacity: 1;
|
|
||||||
transition: all 1s ease;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.hidden {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
> * {
|
|
||||||
.title {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
transform: translateY(-10px);
|
|
||||||
|
|
||||||
.primary {
|
|
||||||
font-size: 2.4em;
|
|
||||||
font-weight: bolder;
|
|
||||||
color: constants.$production-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.secondary {
|
|
||||||
font-size: 1.2em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form {
|
|
||||||
width: 300px;
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
button {
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
|
|
||||||
.addition {
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 14px;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: constants.$production-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.verify {
|
|
||||||
a {
|
|
||||||
color: constants.$production-color;
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sign-up, .sign-in, .forget {
|
|
||||||
.footer {
|
|
||||||
a {
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sign-up, .forget {
|
|
||||||
.retry, .success {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
|
|
||||||
a {
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cover {
|
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
width: 50%;
|
|
||||||
background-color: #F3F4F8;
|
|
||||||
transition: all 0.8s ease;
|
|
||||||
|
|
||||||
.ball-box {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
background-color: #F1F2F7;
|
|
||||||
|
|
||||||
.ball {
|
|
||||||
position: absolute;
|
|
||||||
width: 128px;
|
|
||||||
height: 128px;
|
|
||||||
background-color: constants.$production-color;
|
|
||||||
border-radius: 50%;
|
|
||||||
bottom: 0;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%) translateY(50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mask {
|
|
||||||
transform: rotateZ(180deg);
|
|
||||||
filter: blur(12px);
|
|
||||||
|
|
||||||
.ball {
|
|
||||||
width: 140px;
|
|
||||||
height: 140px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.switch {
|
|
||||||
.cover {
|
|
||||||
transform: translateX(100%);
|
|
||||||
transition: all 0.8s ease;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
35
src/assets/css/pages/sign/forget.style.ts
Normal file
35
src/assets/css/pages/sign/forget.style.ts
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ token }) => ({
|
||||||
|
title: {
|
||||||
|
marginBottom: token.marginMD,
|
||||||
|
transform: `translateY(-${token.sizeSM}px)`
|
||||||
|
},
|
||||||
|
|
||||||
|
primary: {
|
||||||
|
fontSize: token.fontSizeHeading3,
|
||||||
|
fontWeight: 'bolder',
|
||||||
|
color: token.colorPrimary
|
||||||
|
},
|
||||||
|
|
||||||
|
secondary: {
|
||||||
|
fontSize: token.fontSize
|
||||||
|
},
|
||||||
|
|
||||||
|
form: {
|
||||||
|
width: 300,
|
||||||
|
fontSize: token.fontSize
|
||||||
|
},
|
||||||
|
|
||||||
|
retry: {
|
||||||
|
marginBottom: token.margin
|
||||||
|
},
|
||||||
|
|
||||||
|
success: {
|
||||||
|
marginBottom: token.margin
|
||||||
|
},
|
||||||
|
|
||||||
|
footer: {
|
||||||
|
textAlign: 'center'
|
||||||
|
}
|
||||||
|
}))
|
||||||
82
src/assets/css/pages/sign/index.style.ts
Normal file
82
src/assets/css/pages/sign/index.style.ts
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ cx, css, token }) => {
|
||||||
|
const cover = cx(css`
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: 50%;
|
||||||
|
background-color: ${token.colorBgLayout};
|
||||||
|
transition: all 0.8s ease;
|
||||||
|
`)
|
||||||
|
|
||||||
|
const ball = cx(css`
|
||||||
|
position: absolute;
|
||||||
|
width: ${token.sizeXL * 4}px;
|
||||||
|
height: ${token.sizeXL * 4}px;
|
||||||
|
background-color: ${token.colorPrimary};
|
||||||
|
border-radius: 50%;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%) translateY(50%);
|
||||||
|
`)
|
||||||
|
|
||||||
|
return {
|
||||||
|
root: {
|
||||||
|
backgroundColor: token.colorBorderSecondary,
|
||||||
|
userSelect: 'none',
|
||||||
|
|
||||||
|
a: {
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
signBox: {
|
||||||
|
position: 'relative',
|
||||||
|
backgroundColor: token.colorBgContainer,
|
||||||
|
width: 900,
|
||||||
|
height: 600,
|
||||||
|
overflow: 'hidden',
|
||||||
|
borderRadius: token.borderRadiusLG
|
||||||
|
},
|
||||||
|
|
||||||
|
switch: css`
|
||||||
|
.${cover} {
|
||||||
|
transform: translateX(100%);
|
||||||
|
transition: all 0.8s ease;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
side: {
|
||||||
|
opacity: 1,
|
||||||
|
transition: 'all 1s ease',
|
||||||
|
|
||||||
|
'> *': {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
hidden: {
|
||||||
|
opacity: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
cover,
|
||||||
|
|
||||||
|
ballBox: {
|
||||||
|
position: 'relative',
|
||||||
|
overflow: 'hidden'
|
||||||
|
},
|
||||||
|
|
||||||
|
ball,
|
||||||
|
|
||||||
|
mask: css`
|
||||||
|
transform: rotateZ(180deg);
|
||||||
|
filter: blur(${token.sizeSM}px);
|
||||||
|
|
||||||
|
.${ball} {
|
||||||
|
width: 140px;
|
||||||
|
height: 140px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
}
|
||||||
|
})
|
||||||
36
src/assets/css/pages/sign/sign-in.style.ts
Normal file
36
src/assets/css/pages/sign/sign-in.style.ts
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ token }) => ({
|
||||||
|
title: {
|
||||||
|
marginBottom: token.marginMD,
|
||||||
|
transform: `translateY(-${token.sizeSM}px)`
|
||||||
|
},
|
||||||
|
|
||||||
|
primary: {
|
||||||
|
fontSize: token.fontSizeHeading3,
|
||||||
|
fontWeight: 'bolder',
|
||||||
|
color: token.colorPrimary
|
||||||
|
},
|
||||||
|
|
||||||
|
secondary: {
|
||||||
|
fontSize: token.fontSize
|
||||||
|
},
|
||||||
|
|
||||||
|
form: {
|
||||||
|
width: 300,
|
||||||
|
fontSize: token.fontSize
|
||||||
|
},
|
||||||
|
|
||||||
|
addition: {
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
marginBottom: token.margin,
|
||||||
|
|
||||||
|
a: {
|
||||||
|
flex: '0 0 auto'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
footer: {
|
||||||
|
textAlign: 'center'
|
||||||
|
}
|
||||||
|
}))
|
||||||
31
src/assets/css/pages/sign/sign-up.style.ts
Normal file
31
src/assets/css/pages/sign/sign-up.style.ts
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ token }) => ({
|
||||||
|
title: {
|
||||||
|
marginBottom: token.marginMD,
|
||||||
|
transform: `translateY(-${token.sizeSM}px)`
|
||||||
|
},
|
||||||
|
|
||||||
|
primary: {
|
||||||
|
fontSize: token.fontSizeHeading3,
|
||||||
|
fontWeight: 'bolder',
|
||||||
|
color: token.colorPrimary
|
||||||
|
},
|
||||||
|
|
||||||
|
secondary: {
|
||||||
|
fontSize: token.fontSize
|
||||||
|
},
|
||||||
|
|
||||||
|
form: {
|
||||||
|
width: 300,
|
||||||
|
fontSize: token.fontSize
|
||||||
|
},
|
||||||
|
|
||||||
|
retry: {
|
||||||
|
marginBottom: token.margin
|
||||||
|
},
|
||||||
|
|
||||||
|
footer: {
|
||||||
|
textAlign: 'center'
|
||||||
|
}
|
||||||
|
}))
|
||||||
23
src/assets/css/pages/sign/verify.style.ts
Normal file
23
src/assets/css/pages/sign/verify.style.ts
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ token }) => ({
|
||||||
|
title: {
|
||||||
|
marginBottom: token.marginMD,
|
||||||
|
transform: `translateY(-${token.sizeSM}px)`
|
||||||
|
},
|
||||||
|
|
||||||
|
primary: {
|
||||||
|
fontSize: token.fontSizeHeading3,
|
||||||
|
fontWeight: 'bolder',
|
||||||
|
color: token.colorPrimary
|
||||||
|
},
|
||||||
|
|
||||||
|
secondary: {
|
||||||
|
fontSize: token.fontSize
|
||||||
|
},
|
||||||
|
|
||||||
|
form: {
|
||||||
|
width: 300,
|
||||||
|
fontSize: token.fontSize
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
@use "@/assets/css/constants" as constants;
|
|
||||||
@use "@/assets/css/mixins" as mixins;
|
|
||||||
|
|
||||||
[data-component=system-framework] {
|
|
||||||
.left-panel {
|
|
||||||
background-color: constants.$origin-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-panel {
|
|
||||||
flex: 1;
|
|
||||||
width: 0;
|
|
||||||
background-color: constants.$background-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
13
src/assets/css/pages/system-framework.style.ts
Normal file
13
src/assets/css/pages/system-framework.style.ts
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ token }) => ({
|
||||||
|
leftPanel: {
|
||||||
|
backgroundColor: token.colorBgContainer
|
||||||
|
},
|
||||||
|
|
||||||
|
rightPanel: {
|
||||||
|
flex: 1,
|
||||||
|
width: 0,
|
||||||
|
backgroundColor: token.colorBgLayout
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
@use '@/assets/css/constants' as constants;
|
|
||||||
|
|
||||||
[data-component=system] {
|
|
||||||
.root-content {
|
|
||||||
padding: 20px;
|
|
||||||
gap: 20px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
> .card-box {
|
|
||||||
width: 200px;
|
|
||||||
height: 320px;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
15
src/assets/css/pages/system/index.style.ts
Normal file
15
src/assets/css/pages/system/index.style.ts
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(() => ({
|
||||||
|
root: {
|
||||||
|
padding: 20,
|
||||||
|
gap: 20,
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
|
||||||
|
'> *': {
|
||||||
|
flex: '0 0 auto',
|
||||||
|
overflow: 'hidden !important'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
@use '@/assets/css/constants' as constants;
|
|
||||||
|
|
||||||
[data-component=system-settings] {
|
|
||||||
.root-content {
|
|
||||||
padding: 20px;
|
|
||||||
gap: 20px;
|
|
||||||
|
|
||||||
.root-col {
|
|
||||||
gap: 20px;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
16
src/assets/css/pages/system/settings/index.style.ts
Normal file
16
src/assets/css/pages/system/settings/index.style.ts
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(() => ({
|
||||||
|
root: {
|
||||||
|
padding: 20,
|
||||||
|
gap: 20
|
||||||
|
},
|
||||||
|
|
||||||
|
rootCol: {
|
||||||
|
gap: 20,
|
||||||
|
|
||||||
|
'> *': {
|
||||||
|
flex: '0 0 auto'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
@use '@/assets/css/constants' as constants;
|
|
||||||
|
|
||||||
[data-component=system-statistics] {
|
|
||||||
.root-content {
|
|
||||||
padding: 20px;
|
|
||||||
gap: 20px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
> .card-box {
|
|
||||||
width: 48%;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
44
src/assets/css/pages/system/statistics/common.style.ts
Normal file
44
src/assets/css/pages/system/statistics/common.style.ts
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ token }) => ({
|
||||||
|
content: {
|
||||||
|
fontSize: token.fontSize,
|
||||||
|
padding: '0 10px',
|
||||||
|
gap: 10,
|
||||||
|
|
||||||
|
'> *': {
|
||||||
|
gap: 5
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
bigChart: {
|
||||||
|
width: 0,
|
||||||
|
height: 400
|
||||||
|
},
|
||||||
|
|
||||||
|
key: {
|
||||||
|
flex: '0 0 auto',
|
||||||
|
color: token.colorTextLabel
|
||||||
|
},
|
||||||
|
|
||||||
|
value: {
|
||||||
|
color: token.colorTextDescription,
|
||||||
|
overflow: 'hidden',
|
||||||
|
|
||||||
|
'> *': {
|
||||||
|
overflow: 'hidden',
|
||||||
|
textOverflow: 'ellipsis',
|
||||||
|
whiteSpace: 'nowrap'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
chartValue: {
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
percentValue: {
|
||||||
|
flex: '0 0 auto',
|
||||||
|
color: token.colorTextDescription
|
||||||
|
}
|
||||||
|
}))
|
||||||
16
src/assets/css/pages/system/statistics/index.style.ts
Normal file
16
src/assets/css/pages/system/statistics/index.style.ts
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(() => ({
|
||||||
|
root: {
|
||||||
|
padding: 20,
|
||||||
|
gap: 20,
|
||||||
|
minWidth: 800,
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
justifyContent: 'center',
|
||||||
|
|
||||||
|
'> div': {
|
||||||
|
width: '48%',
|
||||||
|
flex: '0 0 auto'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
@use '@/assets/css/constants' as constants;
|
|
||||||
|
|
||||||
[data-component=system-tools-base] {
|
|
||||||
.root-content {
|
|
||||||
padding: 20px;
|
|
||||||
gap: 10px;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.has-edited::after {
|
|
||||||
content: '*';
|
|
||||||
color: constants.$font-secondary-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
>*:first-child {
|
|
||||||
width: 0;
|
|
||||||
height: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
> *:nth-child(2) {
|
|
||||||
position: sticky;
|
|
||||||
top: 20px;
|
|
||||||
height: calc(100vh - 40px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-editor-btn {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
right: 10px;
|
|
||||||
background-color: constants.$font-secondary-color;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 50%;
|
|
||||||
color: white;
|
|
||||||
opacity: 0.6;
|
|
||||||
box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2);
|
|
||||||
cursor: pointer;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
44
src/assets/css/pages/system/tools/base.style.ts
Normal file
44
src/assets/css/pages/system/tools/base.style.ts
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ token }) => ({
|
||||||
|
root: {
|
||||||
|
padding: 20,
|
||||||
|
gap: 20,
|
||||||
|
|
||||||
|
'> *:first-child': {
|
||||||
|
width: 0,
|
||||||
|
height: 'fit-content'
|
||||||
|
},
|
||||||
|
|
||||||
|
'> *:nth-child(2)': {
|
||||||
|
position: 'sticky',
|
||||||
|
top: 20,
|
||||||
|
height: 'calc(100vh - 40px)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
hasEdited: {
|
||||||
|
'&::after': {
|
||||||
|
content: '"*"',
|
||||||
|
color: token.colorTextSecondary
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
closeEditorBtn: {
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
position: 'absolute',
|
||||||
|
top: 10,
|
||||||
|
right: 10,
|
||||||
|
backgroundColor: token.colorBorder,
|
||||||
|
width: 32,
|
||||||
|
height: 32,
|
||||||
|
borderRadius: '50%',
|
||||||
|
color: token.colorTextSecondary,
|
||||||
|
opacity: 0.6,
|
||||||
|
boxShadow: token.boxShadow,
|
||||||
|
cursor: 'pointer',
|
||||||
|
zIndex: 1000
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
[data-component=system-tools-code] {
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
.card-box {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.draggable-content {
|
|
||||||
position: fixed;
|
|
||||||
inset-inline-end: 48px;
|
|
||||||
inset-block-end: 48px;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
position: relative;
|
|
||||||
inset-inline-end: 0;
|
|
||||||
inset-block-end: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
24
src/assets/css/pages/system/tools/code.style.ts
Normal file
24
src/assets/css/pages/system/tools/code.style.ts
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(() => ({
|
||||||
|
root: {
|
||||||
|
padding: 20
|
||||||
|
},
|
||||||
|
|
||||||
|
rootBox: {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%'
|
||||||
|
},
|
||||||
|
|
||||||
|
draggableContent: {
|
||||||
|
position: 'fixed',
|
||||||
|
insetInlineEnd: 48,
|
||||||
|
insetBlockEnd: 48,
|
||||||
|
|
||||||
|
'> *': {
|
||||||
|
position: 'relative',
|
||||||
|
insetInlineEnd: 0,
|
||||||
|
insetBlockEnd: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
[data-component=system-tools-execute] {
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
.card-box {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
12
src/assets/css/pages/system/tools/execute.style.ts
Normal file
12
src/assets/css/pages/system/tools/execute.style.ts
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(() => ({
|
||||||
|
root: {
|
||||||
|
padding: 20
|
||||||
|
},
|
||||||
|
|
||||||
|
rootBox: {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%'
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
@use '@/assets/css/constants' as constants;
|
|
||||||
|
|
||||||
[data-component=system-tools-template] {
|
|
||||||
.root-content {
|
|
||||||
padding: 20px;
|
|
||||||
gap: 10px;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.has-edited::after {
|
|
||||||
content: '*';
|
|
||||||
color: constants.$font-secondary-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
>*:first-child {
|
|
||||||
width: 0;
|
|
||||||
height: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
> *:nth-child(2) {
|
|
||||||
position: sticky;
|
|
||||||
top: 20px;
|
|
||||||
height: calc(100vh - 40px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-editor-btn {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
right: 10px;
|
|
||||||
background-color: constants.$font-secondary-color;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 50%;
|
|
||||||
color: white;
|
|
||||||
opacity: 0.6;
|
|
||||||
box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2);
|
|
||||||
cursor: pointer;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
44
src/assets/css/pages/system/tools/template.style.ts
Normal file
44
src/assets/css/pages/system/tools/template.style.ts
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ token }) => ({
|
||||||
|
root: {
|
||||||
|
padding: 20,
|
||||||
|
gap: 20,
|
||||||
|
|
||||||
|
'> *:first-child': {
|
||||||
|
width: 0,
|
||||||
|
height: 'fit-content'
|
||||||
|
},
|
||||||
|
|
||||||
|
'> *:nth-child(2)': {
|
||||||
|
position: 'sticky',
|
||||||
|
top: 20,
|
||||||
|
height: 'calc(100vh - 40px)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
hasEdited: {
|
||||||
|
'&::after': {
|
||||||
|
content: '"*"',
|
||||||
|
color: token.colorTextSecondary
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
closeEditorBtn: {
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
position: 'absolute',
|
||||||
|
top: 10,
|
||||||
|
right: 10,
|
||||||
|
backgroundColor: token.colorBorder,
|
||||||
|
width: 32,
|
||||||
|
height: 32,
|
||||||
|
borderRadius: '50%',
|
||||||
|
color: token.colorTextSecondary,
|
||||||
|
opacity: 0.6,
|
||||||
|
boxShadow: token.boxShadow,
|
||||||
|
cursor: 'pointer',
|
||||||
|
zIndex: 1000
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
@use "@/assets/css/constants" as constants;
|
|
||||||
@use "@/assets/css/mixins" as mixins;
|
|
||||||
|
|
||||||
[data-component=tools-framework] {
|
|
||||||
.left-panel {
|
|
||||||
background-color: constants.$origin-color;
|
|
||||||
|
|
||||||
.menu-droppable {
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
min-height: 0;
|
|
||||||
flex: 1;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-panel {
|
|
||||||
flex: 1;
|
|
||||||
width: 0;
|
|
||||||
background-color: constants.$background-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
21
src/assets/css/pages/tools-framework.style.ts
Normal file
21
src/assets/css/pages/tools-framework.style.ts
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ token }) => ({
|
||||||
|
leftPanel: {
|
||||||
|
backgroundColor: token.colorBgContainer
|
||||||
|
},
|
||||||
|
|
||||||
|
menuDroppable: {
|
||||||
|
display: 'flex',
|
||||||
|
position: 'relative',
|
||||||
|
minHeight: 0,
|
||||||
|
flex: 1,
|
||||||
|
width: '100%'
|
||||||
|
},
|
||||||
|
|
||||||
|
rightPanel: {
|
||||||
|
flex: 1,
|
||||||
|
width: 0,
|
||||||
|
backgroundColor: token.colorBgLayout
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,61 +0,0 @@
|
|||||||
@use "@/assets/css/mixins" as mixins;
|
|
||||||
@use "@/assets/css/constants" as constants;
|
|
||||||
|
|
||||||
[data-component=tools-create] {
|
|
||||||
.root-content {
|
|
||||||
padding: 20px;
|
|
||||||
gap: 20px;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
gap: 10px;
|
|
||||||
width: 0;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
height: 40px;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 1.6em;
|
|
||||||
color: constants.$production-color;
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.config {
|
|
||||||
.config-content {
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
.help {
|
|
||||||
margin-left: 6px;
|
|
||||||
color: constants.$font-main-color;
|
|
||||||
font-size: 0.8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.create-bt {
|
|
||||||
width: 100%;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview {
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.no-preview {
|
|
||||||
font-weight: bolder;
|
|
||||||
color: constants.$font-secondary-color;
|
|
||||||
font-size: 1.4em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
52
src/assets/css/pages/tools/create.style.ts
Normal file
52
src/assets/css/pages/tools/create.style.ts
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ token }) => ({
|
||||||
|
root: {
|
||||||
|
padding: 20,
|
||||||
|
gap: 20,
|
||||||
|
height: '100%',
|
||||||
|
width: '100%',
|
||||||
|
|
||||||
|
'> *': {
|
||||||
|
gap: 10,
|
||||||
|
width: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
title: {
|
||||||
|
flex: '0 0 auto',
|
||||||
|
height: 40,
|
||||||
|
|
||||||
|
'> *': {
|
||||||
|
height: '100%',
|
||||||
|
width: '100%',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
fontSize: token.fontSizeXL,
|
||||||
|
fontWeight: 'bolder',
|
||||||
|
color: token.colorPrimary
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
config: {
|
||||||
|
padding: 20
|
||||||
|
},
|
||||||
|
|
||||||
|
createBt: {
|
||||||
|
width: '100%',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
},
|
||||||
|
|
||||||
|
preview: {
|
||||||
|
display: 'flex',
|
||||||
|
position: 'relative',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center'
|
||||||
|
},
|
||||||
|
|
||||||
|
noPreview: {
|
||||||
|
color: token.colorTextSecondary,
|
||||||
|
fontSize: token.fontSizeLG,
|
||||||
|
fontWeight: 'bolder'
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,36 +0,0 @@
|
|||||||
[data-component=tools-edit] {
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
.card-box {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.root-content {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.draggable-mask {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.draggable-content {
|
|
||||||
position: fixed;
|
|
||||||
inset-inline-end: 48px;
|
|
||||||
inset-block-end: 48px;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
position: relative;
|
|
||||||
inset-inline-end: 0;
|
|
||||||
inset-block-end: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
40
src/assets/css/pages/tools/edit.style.ts
Normal file
40
src/assets/css/pages/tools/edit.style.ts
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(() => ({
|
||||||
|
root: {
|
||||||
|
padding: 20
|
||||||
|
},
|
||||||
|
|
||||||
|
rootBox: {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%'
|
||||||
|
},
|
||||||
|
|
||||||
|
content: {
|
||||||
|
position: 'relative',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
|
||||||
|
'> *': {
|
||||||
|
width: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
draggableMask: {
|
||||||
|
position: 'absolute',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%'
|
||||||
|
},
|
||||||
|
|
||||||
|
draggableContent: {
|
||||||
|
position: 'fixed',
|
||||||
|
insetInlineEnd: 48,
|
||||||
|
insetBlockEnd: 48,
|
||||||
|
|
||||||
|
'> *': {
|
||||||
|
position: 'relative',
|
||||||
|
insetInlineEnd: 0,
|
||||||
|
insetBlockEnd: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,110 +0,0 @@
|
|||||||
@use "@/assets/css/mixins" as mixins;
|
|
||||||
@use '@/assets/css/constants' as constants;
|
|
||||||
|
|
||||||
[data-component=tools] {
|
|
||||||
.root-content {
|
|
||||||
padding: 20px;
|
|
||||||
gap: 20px;
|
|
||||||
|
|
||||||
.own-content {
|
|
||||||
gap: 20px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
> .card-box, > div {
|
|
||||||
width: 180px;
|
|
||||||
min-height: 290px;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
& > :first-child {
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.info {
|
|
||||||
padding-top: 50px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& > :not(:first-child) {
|
|
||||||
.info {
|
|
||||||
transform: translateY(40px);
|
|
||||||
transition: all 0.1s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.operation {
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
justify-content: center;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
gap: 4px;
|
|
||||||
width: 70%;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
visibility: hidden;
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
> *, .edit > * {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit {
|
|
||||||
> * {
|
|
||||||
> :first-child {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& > :not(:first-child):hover {
|
|
||||||
.info {
|
|
||||||
transform: translateY(-10px);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.operation {
|
|
||||||
visibility: visible;
|
|
||||||
opacity: 1;
|
|
||||||
transition: all 0.4s ease;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.favorite-divider {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
gap: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
|
|
||||||
:first-child, :last-child {
|
|
||||||
height: 0;
|
|
||||||
border: {
|
|
||||||
width: 1px;
|
|
||||||
color: constants.$divide-color;
|
|
||||||
style: dashed;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
.divider-text {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
font-size: 1.2em;
|
|
||||||
color: constants.$font-secondary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.star-content {
|
|
||||||
gap: 20px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
> .card-box, > div {
|
|
||||||
width: 180px;
|
|
||||||
min-height: 290px;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
45
src/assets/css/pages/tools/index.style.ts
Normal file
45
src/assets/css/pages/tools/index.style.ts
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ token }) => ({
|
||||||
|
root: {
|
||||||
|
padding: 20,
|
||||||
|
gap: 20
|
||||||
|
},
|
||||||
|
|
||||||
|
ownContent: {
|
||||||
|
gap: 20,
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
|
||||||
|
'> div': {
|
||||||
|
flex: '0 0 auto'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
favoriteDivider: {
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 20,
|
||||||
|
marginTop: 20,
|
||||||
|
|
||||||
|
'> :first-child, > :last-child': {
|
||||||
|
height: 0,
|
||||||
|
border: `1px dashed ${token.colorSplit}`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
dividerText: {
|
||||||
|
flex: '0 0 auto !important',
|
||||||
|
fontSize: '1.2em',
|
||||||
|
color: token.colorTextSecondary
|
||||||
|
},
|
||||||
|
|
||||||
|
starContent: {
|
||||||
|
gap: 20,
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
|
||||||
|
'> div': {
|
||||||
|
flex: '0 0 auto'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
[data-component=tools-source] {
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
.card-box {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
12
src/assets/css/pages/tools/source.style.ts
Normal file
12
src/assets/css/pages/tools/source.style.ts
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(() => ({
|
||||||
|
root: {
|
||||||
|
padding: 20
|
||||||
|
},
|
||||||
|
|
||||||
|
content: {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%'
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,49 +0,0 @@
|
|||||||
@use '@/assets/css/constants' as constants;
|
|
||||||
|
|
||||||
[data-component=tools-store] {
|
|
||||||
.search {
|
|
||||||
display: flex;
|
|
||||||
position: sticky;
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 20px;
|
|
||||||
top: 20px;
|
|
||||||
z-index: 10;
|
|
||||||
justify-content: center;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
width: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.hide {
|
|
||||||
transform: translateY(-60px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.root-content {
|
|
||||||
padding: 20px;
|
|
||||||
gap: 20px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
width: 180px;
|
|
||||||
min-height: 290px;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-tool {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 1.4em;
|
|
||||||
font-weight: bolder;
|
|
||||||
color: constants.$font-secondary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.android-qrcode {
|
|
||||||
align-items: center;
|
|
||||||
transform: translateX(-16px);
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
41
src/assets/css/pages/tools/store.style.ts
Normal file
41
src/assets/css/pages/tools/store.style.ts
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ token }) => ({
|
||||||
|
search: {
|
||||||
|
display: 'flex',
|
||||||
|
position: 'sticky',
|
||||||
|
width: '100%',
|
||||||
|
marginTop: 20,
|
||||||
|
top: 20,
|
||||||
|
zIndex: 10,
|
||||||
|
justifyContent: 'center',
|
||||||
|
transition: 'all 0.3s ease',
|
||||||
|
|
||||||
|
'> *': {
|
||||||
|
width: '80%'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
hide: {
|
||||||
|
transform: 'translateY(-60px)'
|
||||||
|
},
|
||||||
|
|
||||||
|
root: {
|
||||||
|
padding: 20,
|
||||||
|
gap: 20,
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
justifyContent: 'center',
|
||||||
|
|
||||||
|
'> div': {
|
||||||
|
flex: '0 0 auto'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
noTool: {
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
fontSize: '1.4em',
|
||||||
|
fontWeight: 'bolder',
|
||||||
|
color: token.colorTextSecondary
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,93 +0,0 @@
|
|||||||
@use '@/assets/css/constants' as constants;
|
|
||||||
|
|
||||||
[data-component=tools-store-user] .root-content {
|
|
||||||
padding: {
|
|
||||||
top: 80px;
|
|
||||||
left: 20px;
|
|
||||||
right: 20px;
|
|
||||||
bottom: 20px;
|
|
||||||
};
|
|
||||||
|
|
||||||
.root-box {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: visible;
|
|
||||||
align-items: center;
|
|
||||||
min-width: 900px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
|
|
||||||
> .info {
|
|
||||||
margin-left: 40px;
|
|
||||||
transform: translateY(-40px);
|
|
||||||
|
|
||||||
> * {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-box {
|
|
||||||
background-color: white;
|
|
||||||
padding: 4px;
|
|
||||||
border-radius: 50%;
|
|
||||||
box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-name {
|
|
||||||
margin: {
|
|
||||||
top: 20px;
|
|
||||||
left: 24px;
|
|
||||||
};
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nickname {
|
|
||||||
font-size: 2.4em;
|
|
||||||
font-weight: bolder;
|
|
||||||
color: constants.$production-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.url {
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
> span {
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tools {
|
|
||||||
padding: 20px;
|
|
||||||
gap: 20px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
width: 180px;
|
|
||||||
min-height: 290px;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-tool {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-size: 1.2em;
|
|
||||||
font-weight: bolder;
|
|
||||||
color: constants.$font-secondary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.android-qrcode {
|
|
||||||
align-items: center;
|
|
||||||
transform: translateX(-16px);
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
82
src/assets/css/pages/tools/user.style.ts
Normal file
82
src/assets/css/pages/tools/user.style.ts
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ token }) => ({
|
||||||
|
root: {
|
||||||
|
padding: '80px 20px 20px 20px'
|
||||||
|
},
|
||||||
|
|
||||||
|
content: {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
overflow: 'visible',
|
||||||
|
alignItems: 'center',
|
||||||
|
minWidth: 900,
|
||||||
|
paddingBottom: 20
|
||||||
|
},
|
||||||
|
|
||||||
|
info: {
|
||||||
|
marginLeft: 40,
|
||||||
|
transform: 'translateY(-40px)',
|
||||||
|
|
||||||
|
'> *': {
|
||||||
|
flex: '0 0 auto !important'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
avatarBox: {
|
||||||
|
backgroundColor: token.colorBgLayout,
|
||||||
|
padding: 4,
|
||||||
|
borderRadius: '50%',
|
||||||
|
boxShadow: token.boxShadow
|
||||||
|
},
|
||||||
|
|
||||||
|
avatar: {
|
||||||
|
backgroundColor: 'transparent !important'
|
||||||
|
},
|
||||||
|
|
||||||
|
infoName: {
|
||||||
|
margin: '20px 0 0 20px',
|
||||||
|
justifyContent: 'center',
|
||||||
|
|
||||||
|
'> *': {
|
||||||
|
flex: '0 0 auto'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
nickname: {
|
||||||
|
fontSize: token.fontSizeHeading2,
|
||||||
|
fontWeight: 'bolder',
|
||||||
|
color: token.colorPrimary
|
||||||
|
},
|
||||||
|
|
||||||
|
url: {
|
||||||
|
cursor: 'pointer',
|
||||||
|
|
||||||
|
'> span': {
|
||||||
|
marginLeft: 8
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
tools: {
|
||||||
|
padding: 20,
|
||||||
|
gap: 20,
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
justifyContent: 'center',
|
||||||
|
|
||||||
|
'> div': {
|
||||||
|
flex: '0 0 auto',
|
||||||
|
|
||||||
|
'> div': {
|
||||||
|
backgroundColor: token.colorBgLayout
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
noTool: {
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
marginBottom: 20,
|
||||||
|
fontSize: token.fontSizeLG,
|
||||||
|
color: token.colorTextSecondary
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
[data-component=tools-view] {
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
.card-box {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
13
src/assets/css/pages/tools/view.style.ts
Normal file
13
src/assets/css/pages/tools/view.style.ts
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(() => ({
|
||||||
|
root: {
|
||||||
|
padding: 20
|
||||||
|
},
|
||||||
|
|
||||||
|
content: {
|
||||||
|
position: 'relative',
|
||||||
|
height: '100%',
|
||||||
|
width: '100%'
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
@use "@/assets/css/constants" as constants;
|
|
||||||
@use "@/assets/css/mixins" as mixins;
|
|
||||||
|
|
||||||
[data-component=user-framework] {
|
|
||||||
.left-panel {
|
|
||||||
background-color: constants.$origin-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-panel {
|
|
||||||
flex: 1;
|
|
||||||
width: 0;
|
|
||||||
background-color: constants.$background-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
13
src/assets/css/pages/user-framework.style.ts
Normal file
13
src/assets/css/pages/user-framework.style.ts
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ token }) => ({
|
||||||
|
leftPanel: {
|
||||||
|
backgroundColor: token.colorBgContainer
|
||||||
|
},
|
||||||
|
|
||||||
|
rightPanel: {
|
||||||
|
flex: 1,
|
||||||
|
width: 0,
|
||||||
|
backgroundColor: token.colorBgLayout
|
||||||
|
}
|
||||||
|
}))
|
||||||
@@ -1,137 +0,0 @@
|
|||||||
@use '@/assets/css/constants' as constants;
|
|
||||||
|
|
||||||
[data-component=user] .root-content {
|
|
||||||
padding: {
|
|
||||||
top: 80px;
|
|
||||||
left: 20px;
|
|
||||||
right: 20px;
|
|
||||||
bottom: 20px;
|
|
||||||
};
|
|
||||||
|
|
||||||
.card-box {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: visible;
|
|
||||||
align-items: center;
|
|
||||||
min-width: 900px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
|
|
||||||
> :not(:first-child) {
|
|
||||||
padding: {
|
|
||||||
left: 60px;
|
|
||||||
right: 60px;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
.divide {
|
|
||||||
height: 1px;
|
|
||||||
width: calc(100% - 120px);
|
|
||||||
background-color: constants.$divide-color;
|
|
||||||
margin: {
|
|
||||||
left: 60px;
|
|
||||||
right: 60px;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
margin-left: 40px;
|
|
||||||
transform: translateY(-40px);
|
|
||||||
|
|
||||||
> * {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-box {
|
|
||||||
background-color: white;
|
|
||||||
padding: 4px;
|
|
||||||
border-radius: 50%;
|
|
||||||
box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-name {
|
|
||||||
margin: {
|
|
||||||
top: 20px;
|
|
||||||
left: 24px;
|
|
||||||
};
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nickname {
|
|
||||||
font-size: 2.4em;
|
|
||||||
font-weight: bolder;
|
|
||||||
color: constants.$production-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.url {
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
> span {
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.content {
|
|
||||||
padding: {
|
|
||||||
bottom: 30px;
|
|
||||||
};
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
font-size: 1.6em;
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
|
|
||||||
.operation {
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.table {
|
|
||||||
gap: 24px;
|
|
||||||
|
|
||||||
padding: {
|
|
||||||
top: 30px;
|
|
||||||
bottom: 20px;
|
|
||||||
};
|
|
||||||
|
|
||||||
.row {
|
|
||||||
> * {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
font-size: 1.4em;
|
|
||||||
font-weight: bolder;
|
|
||||||
width: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input {
|
|
||||||
width: 400px;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
116
src/assets/css/pages/user/index.style.ts
Normal file
116
src/assets/css/pages/user/index.style.ts
Normal file
@@ -0,0 +1,116 @@
|
|||||||
|
import { createStyles } from 'antd-style'
|
||||||
|
|
||||||
|
export default createStyles(({ token }) => ({
|
||||||
|
root: {
|
||||||
|
padding: '80px 20px 20px 20px'
|
||||||
|
},
|
||||||
|
|
||||||
|
content: {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
overflow: 'visible !important',
|
||||||
|
alignItems: 'center',
|
||||||
|
minWidth: 900,
|
||||||
|
paddingBottom: 20,
|
||||||
|
|
||||||
|
'> :not(:first-child)': {
|
||||||
|
padding: '0 60px'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
info: {
|
||||||
|
marginLeft: 40,
|
||||||
|
transform: 'translateY(-40px)',
|
||||||
|
|
||||||
|
'> *': {
|
||||||
|
flex: '0 0 auto'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
avatarBox: {
|
||||||
|
backgroundColor: token.colorBgLayout,
|
||||||
|
padding: 4,
|
||||||
|
borderRadius: '50%',
|
||||||
|
boxShadow: token.boxShadow
|
||||||
|
},
|
||||||
|
|
||||||
|
avatar: {
|
||||||
|
backgroundColor: 'transparent !important'
|
||||||
|
},
|
||||||
|
|
||||||
|
infoName: {
|
||||||
|
margin: '20px 0 0 20px',
|
||||||
|
justifyContent: 'center',
|
||||||
|
|
||||||
|
'> *': {
|
||||||
|
flex: '0 0 auto'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
nickname: {
|
||||||
|
fontSize: token.fontSizeHeading2,
|
||||||
|
fontWeight: 'bolder',
|
||||||
|
color: token.colorPrimary
|
||||||
|
},
|
||||||
|
|
||||||
|
url: {
|
||||||
|
cursor: 'pointer',
|
||||||
|
|
||||||
|
'> span': {
|
||||||
|
marginLeft: 8
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
header: {
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
|
||||||
|
'> *': {
|
||||||
|
flex: '0 0 auto'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
title: {
|
||||||
|
fontSize: token.fontSizeHeading3,
|
||||||
|
fontWeight: 'bolder'
|
||||||
|
},
|
||||||
|
|
||||||
|
operation: {
|
||||||
|
gap: 10
|
||||||
|
},
|
||||||
|
|
||||||
|
divider: {
|
||||||
|
height: 1,
|
||||||
|
width: 'calc(100% - 120px)',
|
||||||
|
backgroundColor: token.colorSplit,
|
||||||
|
margin: '30px 60px'
|
||||||
|
},
|
||||||
|
|
||||||
|
list: {
|
||||||
|
gap: 24
|
||||||
|
},
|
||||||
|
|
||||||
|
row: {
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
padding: `0 ${token.paddingLG}px`,
|
||||||
|
|
||||||
|
'> *': {
|
||||||
|
flex: '0 0 auto'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
label: {
|
||||||
|
fontSize: token.fontSizeLG,
|
||||||
|
fontWeight: 'bolder',
|
||||||
|
flex: 1
|
||||||
|
},
|
||||||
|
|
||||||
|
input: {
|
||||||
|
width: 400,
|
||||||
|
|
||||||
|
'> *': {
|
||||||
|
width: '100%'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}))
|
||||||
1
src/assets/svg/themeDark.svg
Normal file
1
src/assets/svg/themeDark.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M853.824 512c0 195.84-160.224 356.064-356.064 356.064-148.352 0-274.976-91.008-328.384-217.6h11.872c195.84 0 356.064-160.224 356.064-356.064a360.64 360.64 0 0 0-27.68-138.464c191.872 5.92 344.192 164.192 344.192 356.064zM509.632 76.8c-25.728 0-49.44 11.872-65.28 33.632s-17.792 51.424-7.904 75.168c13.856 35.616 21.76 71.2 21.76 108.8 0 152.32-124.64 276.96-276.96 276.96h-11.872c-25.728 0-49.44 11.872-65.28 33.632s-17.792 51.424-7.904 75.168C165.44 842.368 321.696 947.2 497.76 947.2c239.36 0 435.2-195.84 435.2-435.2A433.664 433.664 0 0 0 511.616 76.8h-1.984z"/></svg>
|
||||||
|
After Width: | Height: | Size: 645 B |
1
src/assets/svg/themeLight.svg
Normal file
1
src/assets/svg/themeLight.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M469.333333 128a42.666667 42.666667 0 0 1 85.333334 0v85.333333a42.666667 42.666667 0 0 1-85.333334 0V128z m0 682.666667a42.666667 42.666667 0 0 1 85.333334 0v85.333333a42.666667 42.666667 0 0 1-85.333334 0v-85.333333z m42.666667-85.333334a213.333333 213.333333 0 1 1 0-426.666666 213.333333 213.333333 0 0 1 0 426.666666z m0-85.333333a128 128 0 1 0 0-256 128 128 0 0 0 0 256z m-384-85.333333a42.666667 42.666667 0 0 1 0-85.333334h85.333333a42.666667 42.666667 0 0 1 0 85.333334H128z m682.666667 0a42.666667 42.666667 0 0 1 0-85.333334h85.333333a42.666667 42.666667 0 0 1 0 85.333334h-85.333333z m-30.165334-371.498667a42.666667 42.666667 0 0 1 60.330667 60.330667l-67.456 67.456a42.666667 42.666667 0 0 1-60.330667-60.330667l67.413334-67.456zM243.498667 840.832a42.666667 42.666667 0 1 1-60.330667-60.330667l67.456-67.456a42.666667 42.666667 0 1 1 60.330667 60.330667l-67.413334 67.456z m-60.330667-597.333333a42.666667 42.666667 0 0 1 60.330667-60.330667l67.456 67.456a42.666667 42.666667 0 0 1-60.330667 60.330667l-67.456-67.413334z m657.664 537.002666a42.666667 42.666667 0 0 1-60.330667 60.330667l-67.456-67.456a42.666667 42.666667 0 0 1 60.330667-60.330667l67.456 67.413334z" /></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
1
src/assets/svg/themeSystem.svg
Normal file
1
src/assets/svg/themeSystem.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M513.12 11.136c-42.784 0-84.336 5.376-123.872 15.456-2.352 0.56-4.816 1.232-7.168 1.904-9.296 2.464-18.48 5.264-27.552 8.288-1.12 0.336-2.24 0.784-3.472 1.12-5.264 1.792-10.64 3.696-15.792 5.712-1.904 0.672-3.808 1.456-5.712 2.24-13.216 5.264-26.208 10.976-38.976 17.36l-5.376 2.688c-19.824 10.192-38.864 21.504-57.008 34.16-1.68 1.12-3.248 2.352-4.928 3.472-16.352 11.648-32.032 24.192-46.816 37.744l-4.368 4.032a465.472 465.472 0 0 0-29.568 29.904c-1.344 1.456-2.688 3.024-4.032 4.48-78.4 88.256-126 204.624-126 332.08 0 276.528 224.112 500.64 500.64 500.64s500.64-224.112 500.64-500.64-224.112-500.64-500.64-500.64zM810.144 808.8c-38.64 38.64-83.552 68.88-133.504 90.048-51.184 21.616-105.504 32.704-161.616 32.928v-840c56.112 0.224 110.432 11.312 161.616 32.928 50.064 21.168 94.976 51.408 133.504 90.048 38.64 38.64 68.88 83.552 90.048 133.504 21.84 51.744 32.928 106.736 32.928 163.52s-11.088 111.776-32.928 163.52c-21.168 49.952-51.408 94.864-90.048 133.504z" /></svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -34,8 +34,7 @@ export interface TypeHelper {
|
|||||||
export const createATA = async (): Promise<TypeHelper> => {
|
export const createATA = async (): Promise<TypeHelper> => {
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
// @ts-expect-error
|
// @ts-expect-error
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
const ts = await import('https://esm.sh/typescript@5.6.3')
|
||||||
const ts = await import('https://esm.sh/typescript@5.3.3')
|
|
||||||
|
|
||||||
const maxConcurrentRequests = 50
|
const maxConcurrentRequests = 50
|
||||||
let activeRequests = 0
|
let activeRequests = 0
|
||||||
@@ -63,7 +62,6 @@ export const createATA = async (): Promise<TypeHelper> => {
|
|||||||
|
|
||||||
const ata = setupTypeAcquisition({
|
const ata = setupTypeAcquisition({
|
||||||
projectName: 'monaco-ts',
|
projectName: 'monaco-ts',
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
|
||||||
typescript: ts,
|
typescript: ts,
|
||||||
logger: console,
|
logger: console,
|
||||||
fetcher: (input, init) => {
|
fetcher: (input, init) => {
|
||||||
@@ -117,7 +115,6 @@ export const createATA = async (): Promise<TypeHelper> => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
|
||||||
acquireType,
|
acquireType,
|
||||||
addListener,
|
addListener,
|
||||||
removeListener,
|
removeListener,
|
||||||
|
|||||||
@@ -1,98 +0,0 @@
|
|||||||
@mixin keyframes($animationName) {
|
|
||||||
@-webkit-keyframes #{$animationName} {
|
|
||||||
@content
|
|
||||||
}
|
|
||||||
@-moz-keyframes #{$animationName} {
|
|
||||||
@content
|
|
||||||
}
|
|
||||||
@-o-keyframes #{$animationName} {
|
|
||||||
@content
|
|
||||||
}
|
|
||||||
@keyframes #{$animationName} {
|
|
||||||
@content
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin unique-keyframes {
|
|
||||||
$animationName: unique-id();
|
|
||||||
animation-name: $animationName;
|
|
||||||
@include keyframes($animationName) {
|
|
||||||
@content
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-component=playground-code-editor-editor] {
|
|
||||||
position: relative;
|
|
||||||
height: 0;
|
|
||||||
|
|
||||||
.monaco-editor-light {
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: var(--border);
|
|
||||||
|
|
||||||
.jsx-tag-angle-bracket {
|
|
||||||
color: #800000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jsx-text {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jsx-tag-name {
|
|
||||||
color: #800000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jsx-tag-attribute-key {
|
|
||||||
color: #f00;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.monaco-editor-vs-dark {
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: var(--border);
|
|
||||||
|
|
||||||
.jsx-tag-angle-bracket {
|
|
||||||
color: #808080;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jsx-text {
|
|
||||||
color: #d4d4d4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jsx-tag-name {
|
|
||||||
color: #569cd6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jsx-tag-attribute-key {
|
|
||||||
color: #9cdcfe;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.playground-code-editor-loading {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
margin: 4px;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: {
|
|
||||||
top: 2px #666 solid;
|
|
||||||
bottom: 2px #ddd solid;
|
|
||||||
left: 2px #ddd solid;
|
|
||||||
right: 2px #ddd solid;
|
|
||||||
};
|
|
||||||
animation: .6s linear infinite;
|
|
||||||
|
|
||||||
@include unique-keyframes {
|
|
||||||
0% {
|
|
||||||
transform: rotateZ(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: rotateZ(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user