feat: tailwind 样式&依赖升级
This commit is contained in:
baiqi
rubylliu
parent
31ae4c2ec7
commit
7c49194e8c
|
|
@ -36,13 +36,13 @@
|
|||
"dependencies": {
|
||||
"@7polo/kity": "2.0.8",
|
||||
"@7polo/kityminder-core": "1.4.53",
|
||||
"@arco-design/web-vue": "^2.46.2",
|
||||
"@arco-design/web-vue": "^2.47.0",
|
||||
"@arco-themes/vue-ms-theme-default": "^0.0.12",
|
||||
"@form-create/arco-design": "^3.1.21",
|
||||
"@vueuse/core": "^9.13.0",
|
||||
"ace-builds": "^1.21.1",
|
||||
"ace-builds": "^1.22.0",
|
||||
"axios": "^0.24.0",
|
||||
"dayjs": "^1.11.7",
|
||||
"dayjs": "^1.11.8",
|
||||
"echarts": "^5.4.2",
|
||||
"hotbox-minder": "1.0.15",
|
||||
"jsonpath-picker-vanilla": "^1.2.4",
|
||||
|
|
@ -50,51 +50,52 @@
|
|||
"lodash-es": "^4.17.21",
|
||||
"mitt": "^3.0.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.0.36",
|
||||
"pinia": "^2.1.3",
|
||||
"pinia-plugin-persistedstate": "^3.1.0",
|
||||
"query-string": "^8.1.0",
|
||||
"sortablejs": "^1.15.0",
|
||||
"vue": "^3.3.4",
|
||||
"vue-echarts": "^6.5.5",
|
||||
"vue-i18n": "^9.2.2",
|
||||
"vue-router": "^4.2.0",
|
||||
"vue-router": "^4.2.2",
|
||||
"vue3-ace-editor": "^2.2.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@arco-plugins/vite-vue": "^1.4.5",
|
||||
"@commitlint/cli": "^17.6.3",
|
||||
"@commitlint/config-conventional": "^17.6.3",
|
||||
"@types/lodash": "^4.14.194",
|
||||
"@commitlint/cli": "^17.6.5",
|
||||
"@commitlint/config-conventional": "^17.6.5",
|
||||
"@types/lodash": "^4.14.195",
|
||||
"@types/lodash-es": "^4.17.7",
|
||||
"@types/mockjs": "^1.0.7",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@types/sortablejs": "^1.15.1",
|
||||
"@typescript-eslint/eslint-plugin": "^5.59.5",
|
||||
"@typescript-eslint/parser": "^5.59.5",
|
||||
"@typescript-eslint/eslint-plugin": "^5.59.9",
|
||||
"@typescript-eslint/parser": "^5.59.9",
|
||||
"@vitejs/plugin-vue": "^3.2.0",
|
||||
"@vitejs/plugin-vue-jsx": "^2.1.1",
|
||||
"@vitest/coverage-c8": "^0.31.0",
|
||||
"@vitest/coverage-c8": "^0.31.4",
|
||||
"@vue/babel-plugin-jsx": "^1.1.1",
|
||||
"@vue/test-utils": "^2.3.2",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"consola": "^2.15.3",
|
||||
"cross-env": "^7.0.3",
|
||||
"eslint": "^8.40.0",
|
||||
"eslint": "^8.42.0",
|
||||
"eslint-config-airbnb-base": "^15.0.0",
|
||||
"eslint-config-prettier": "^8.8.0",
|
||||
"eslint-import-resolver-typescript": "^3.5.5",
|
||||
"eslint-plugin-import": "^2.27.5",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"eslint-plugin-vue": "^9.12.0",
|
||||
"eslint-plugin-vue": "^9.14.1",
|
||||
"fast-glob": "^3.2.12",
|
||||
"husky": "^8.0.3",
|
||||
"jsdom": "^22.0.0",
|
||||
"jsdom": "^22.1.0",
|
||||
"less": "^4.1.3",
|
||||
"less-loader": "^11.1.0",
|
||||
"less-loader": "^11.1.2",
|
||||
"lint-staged": "^13.2.2",
|
||||
"mockjs": "^1.1.0",
|
||||
"postcss": "^8.4.23",
|
||||
"postcss": "^8.4.24",
|
||||
"postcss-html": "^1.5.0",
|
||||
"postcss-import": "^15.1.0",
|
||||
"postcss-less": "^6.0.0",
|
||||
"prettier": "^2.8.8",
|
||||
"prettier-plugin-tailwindcss": "^0.3.0",
|
||||
|
|
@ -102,8 +103,8 @@
|
|||
"rollup-plugin-visualizer": "^5.9.0",
|
||||
"sass": "^1.62.1",
|
||||
"stylelint": "^14.16.1",
|
||||
"stylelint-config-html": "^1.0.0",
|
||||
"stylelint-config-prettier": "^9.0.3",
|
||||
"stylelint-config-html": "^1.1.0",
|
||||
"stylelint-config-prettier": "^9.0.5",
|
||||
"stylelint-config-rational-order": "^0.1.2",
|
||||
"stylelint-config-recommended": "^7.0.0",
|
||||
"stylelint-config-recommended-less": "^1.0.4",
|
||||
|
|
@ -111,19 +112,19 @@
|
|||
"stylelint-config-recommended-vue": "^1.4.0",
|
||||
"stylelint-config-standard": "^25.0.0",
|
||||
"stylelint-config-standard-scss": "^4.0.0",
|
||||
"stylelint-less": "^1.0.5",
|
||||
"stylelint-less": "^1.0.6",
|
||||
"stylelint-order": "^5.0.0",
|
||||
"tailwindcss": "^3.3.2",
|
||||
"typescript": "^4.9.5",
|
||||
"unplugin-vue-components": "^0.24.1",
|
||||
"vite": "^3.2.6",
|
||||
"vite": "^3.2.7",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vite-plugin-eslint": "^1.8.1",
|
||||
"vite-plugin-imagemin": "^0.6.1",
|
||||
"vite-plugin-svg-icons": "^2.0.1",
|
||||
"vite-plugin-vue-setup-extend": "^0.4.0",
|
||||
"vite-svg-loader": "^3.6.0",
|
||||
"vitest": "^0.31.0",
|
||||
"vitest": "^0.31.4",
|
||||
"vue-tsc": "^1.6.5"
|
||||
},
|
||||
"engines": {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
module.exports = {
|
||||
plugins: [require('tailwindcss'), require('autoprefixer')],
|
||||
plugins: [require('postcss-import'), require('tailwindcss'), require('autoprefixer')],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
/** 表格样式 **/
|
||||
.arco-table-cell {
|
||||
.circle {
|
||||
display: inline-block;
|
||||
@apply inline-block rounded-full;
|
||||
|
||||
margin-right: 4px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: rgb(var(--blue-6));
|
||||
&.pass {
|
||||
background-color: rgb(var(--green-6));
|
||||
|
|
|
|||
|
|
@ -4,21 +4,19 @@
|
|||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
@apply box-border;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@apply m-0 h-full w-full p-0;
|
||||
|
||||
font-size: 14px;
|
||||
background-color: var(--color-bg-1);
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.echarts-tooltip-diy {
|
||||
border: none !important;
|
||||
@apply !border-none;
|
||||
|
||||
/* Note: backdrop-filter has minimal browser support */
|
||||
|
||||
|
|
@ -26,8 +24,8 @@ body {
|
|||
background: linear-gradient(304.17deg, rgb(253 254 255 / 60%) -6.04%, rgb(244 247 252 / 60%) 85.2%) !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
.content-panel {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@apply flex justify-between;
|
||||
|
||||
margin-bottom: 4px;
|
||||
padding: 0 9px;
|
||||
width: 164px;
|
||||
|
|
@ -41,20 +39,19 @@ body {
|
|||
margin: 0 0 10px;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
@apply m-0;
|
||||
}
|
||||
.tooltip-title,
|
||||
.tooltip-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@apply flex items-center text-right font-bold;
|
||||
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
color: #1d2129;
|
||||
line-height: 15px;
|
||||
}
|
||||
.tooltip-item-icon {
|
||||
display: inline-block;
|
||||
@apply inline-block;
|
||||
|
||||
margin-right: 8px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
|
@ -62,12 +59,13 @@ body {
|
|||
}
|
||||
}
|
||||
.general-card {
|
||||
border: none;
|
||||
@apply border-none;
|
||||
|
||||
border-radius: 4px;
|
||||
& > .arco-card-header {
|
||||
@apply h-auto border-none;
|
||||
|
||||
padding: 20px;
|
||||
height: auto;
|
||||
border: none;
|
||||
}
|
||||
& > .arco-card-body {
|
||||
padding: 0 20px 20px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<a-layout-footer class="footer">{{ props.text }}</a-layout-footer>
|
||||
<a-layout-footer class="footer h-[40px]">{{ props.text }}</a-layout-footer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -15,11 +15,8 @@
|
|||
|
||||
<style lang="less" scoped>
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
@apply flex items-center justify-center text-center;
|
||||
|
||||
color: var(--color-text-2);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="block">
|
||||
<h5 class="title">{{ title }}</h5>
|
||||
<div v-for="option in options" :key="option.name" class="switch-wrapper">
|
||||
<div class="mb-[24px]">
|
||||
<h5 class="title my-[10px] p-0 text-[14px]">{{ title }}</h5>
|
||||
<div v-for="option in options" :key="option.name" class="switch-wrapper h-[32px]">
|
||||
<span>{{ $t(option.name) }}</span>
|
||||
<form-wrapper
|
||||
:type="option.type || 'switch'"
|
||||
|
|
@ -51,18 +51,10 @@
|
|||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.block {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.title {
|
||||
margin: 10px 0;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
@apply mx-0 p-0;
|
||||
}
|
||||
.switch-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
@apply flex items-center justify-between;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<!-- eslint-disable prettier/prettier -->
|
||||
<template>
|
||||
<div v-if="!appStore.navbar" class="fixed-settings" @click="setVisible">
|
||||
<div v-if="!appStore.navbar" class="fixed-settings top-[280px]" @click="setVisible">
|
||||
<a-button type="primary">
|
||||
<template #icon>
|
||||
<icon-settings />
|
||||
|
|
@ -82,9 +83,7 @@
|
|||
|
||||
<style scoped lang="less">
|
||||
.fixed-settings {
|
||||
position: fixed;
|
||||
top: 280px;
|
||||
right: 0;
|
||||
@apply fixed right-0;
|
||||
svg {
|
||||
font-size: 18px;
|
||||
vertical-align: -4px;
|
||||
|
|
|
|||
|
|
@ -149,8 +149,7 @@
|
|||
<style lang="less" scoped>
|
||||
:deep(.arco-menu-inner) {
|
||||
.arco-menu-inline-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@apply flex items-center;
|
||||
}
|
||||
.arco-icon {
|
||||
&:not(.arco-icon-down) {
|
||||
|
|
|
|||
|
|
@ -97,17 +97,21 @@
|
|||
|
||||
<style scoped lang="less">
|
||||
:deep(.arco-popover-popup-content) {
|
||||
padding: 0;
|
||||
@apply p-0;
|
||||
}
|
||||
:deep(.arco-list-item-meta) {
|
||||
align-items: flex-start;
|
||||
@apply items-start;
|
||||
}
|
||||
:deep(.arco-tabs-nav) {
|
||||
padding: 14px 0 12px 16px;
|
||||
@apply pr-0;
|
||||
|
||||
padding-top: 14px;
|
||||
padding-bottom: 12px;
|
||||
padding-left: 16px;
|
||||
border-bottom: 1px solid var(--color-neutral-3);
|
||||
}
|
||||
:deep(.arco-tabs-content) {
|
||||
padding-top: 0;
|
||||
@apply pt-0;
|
||||
.arco-result-subtitle {
|
||||
color: rgb(var(--gray-6));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -97,32 +97,34 @@
|
|||
border-bottom: 1px solid rgb(var(--gray-3));
|
||||
}
|
||||
.arco-list-item-extra {
|
||||
position: absolute;
|
||||
@apply absolute;
|
||||
|
||||
right: 20px;
|
||||
}
|
||||
.arco-list-item-meta-content {
|
||||
flex: 1;
|
||||
@apply flex-1;
|
||||
}
|
||||
.item-wrap {
|
||||
cursor: pointer;
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
.time-text {
|
||||
font-size: 12px;
|
||||
color: rgb(var(--gray-6));
|
||||
}
|
||||
.arco-empty {
|
||||
display: none;
|
||||
@apply hidden;
|
||||
}
|
||||
.arco-list-footer {
|
||||
padding: 0;
|
||||
height: 50px;
|
||||
border-top: none;
|
||||
@apply border-t-0 p-0;
|
||||
|
||||
line-height: 50px;
|
||||
height: 50px;
|
||||
.arco-space-item {
|
||||
width: 100%;
|
||||
@apply w-full;
|
||||
|
||||
border-right: 1px solid rgb(var(--gray-3));
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
@apply border-r-0;
|
||||
}
|
||||
}
|
||||
.add-border-top {
|
||||
|
|
@ -130,10 +132,10 @@
|
|||
}
|
||||
}
|
||||
.footer-wrap {
|
||||
text-align: center;
|
||||
@apply text-center;
|
||||
}
|
||||
.arco-typography {
|
||||
margin-bottom: 0;
|
||||
@apply mb-0;
|
||||
}
|
||||
.add-border {
|
||||
border-top: 1px solid rgb(var(--gray-3));
|
||||
|
|
|
|||
|
|
@ -62,34 +62,30 @@
|
|||
@import '../style/header';
|
||||
.mind_tab-content {
|
||||
.tab-icons {
|
||||
background-image: url('@/assets/images/minder/icons.png');
|
||||
background-repeat: no-repeat;
|
||||
@apply bg-[url('@/assets/images/minder/icons.png')] bg-no-repeat;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less" scoped>
|
||||
header {
|
||||
@apply bg-white;
|
||||
|
||||
font-size: 12px;
|
||||
background-color: #ffffff;
|
||||
& > ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@apply m-0 flex items-center p-0;
|
||||
|
||||
height: 30px;
|
||||
background-color: #e1e1e1;
|
||||
li {
|
||||
line-height: 30px;
|
||||
display: inline-flex;
|
||||
@apply inline-flex h-full list-none;
|
||||
|
||||
width: 80px;
|
||||
height: 100%;
|
||||
list-style: none;
|
||||
line-height: 30px;
|
||||
a {
|
||||
width: inherit;
|
||||
@apply text-center no-underline;
|
||||
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #337ab7;
|
||||
}
|
||||
a:hover,
|
||||
|
|
@ -98,9 +94,9 @@
|
|||
}
|
||||
}
|
||||
li.selected {
|
||||
background: #ffffff;
|
||||
@apply bg-white;
|
||||
a {
|
||||
color: #000000;
|
||||
@apply text-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div ref="mec" class="minder-container" :style="{ height: `${props.height}px` }">
|
||||
<a-button type="primary" :disabled="props.disabled" class="save-btn" @click="save">{{
|
||||
<a-button type="primary" :disabled="props.disabled" class="save-btn bottom-[30px] right-[30px]" @click="save">{{
|
||||
t('minder.main.main.save')
|
||||
}}</a-button>
|
||||
<navigator />
|
||||
|
|
@ -131,11 +131,9 @@
|
|||
<style lang="less">
|
||||
@import '../style/editor.less';
|
||||
.save-btn {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
bottom: 30px;
|
||||
@apply absolute;
|
||||
}
|
||||
.minder-container {
|
||||
position: relative;
|
||||
@apply relative;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -309,8 +309,8 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="less" scoped>
|
||||
.nav-btn .icon {
|
||||
background: url('@/assets/images/minder/icons.png');
|
||||
background-image: url('@/assets/images/minder/icons.png');
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -34,6 +34,6 @@
|
|||
|
||||
<style lang="less" scoped>
|
||||
.dropdown-link {
|
||||
cursor: pointer;
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -118,6 +118,6 @@
|
|||
|
||||
<style lang="less" scoped>
|
||||
.dropdown-link {
|
||||
cursor: pointer;
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div :disabled="commandDisabled">
|
||||
<a-button class="delete-btn" shape="circle" @click="execCommand()">
|
||||
<a-button class="delete-btn mx-[4px] my-0 h-[23px] w-[23px] !p-[2px]" shape="circle" @click="execCommand()">
|
||||
<template #icon>
|
||||
<icon-delete />
|
||||
</template>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<a-button
|
||||
v-if="pIndex != 0"
|
||||
:key="item"
|
||||
class="priority-btn"
|
||||
class="priority-btn mr-[4px] h-[22px] w-[22px] rounded-[8px] pr-[5px] text-[12px]"
|
||||
:class="'priority-btn_' + pIndex"
|
||||
size="small"
|
||||
@click="execCommand(pIndex)"
|
||||
|
|
@ -83,26 +83,13 @@
|
|||
|
||||
<style lang="less" scoped>
|
||||
.delete-btn {
|
||||
margin: 0 4px;
|
||||
padding: 2px !important;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
i {
|
||||
width: 1em !important;
|
||||
height: 1em !important;
|
||||
}
|
||||
}
|
||||
.priority-btn {
|
||||
margin-right: 4px;
|
||||
padding: 0;
|
||||
padding-right: 5px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: 12px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
font-style: italic;
|
||||
@apply border-none p-0 italic text-white;
|
||||
}
|
||||
.priority-btn_1 {
|
||||
border-bottom: 3px solid #840023;
|
||||
|
|
|
|||
|
|
@ -81,12 +81,12 @@
|
|||
|
||||
<style lang="less" scoped>
|
||||
.arco-tag {
|
||||
@apply border-none text-black;
|
||||
|
||||
margin-right: 4px;
|
||||
border: 0;
|
||||
color: black;
|
||||
}
|
||||
.arco-tag:hover {
|
||||
cursor: pointer;
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
.arco-tag:first-child {
|
||||
margin-left: 4px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="font-group">
|
||||
<div class="font-group ml-[10px]">
|
||||
<a-select
|
||||
v-model="fontFamilyDefaultValue"
|
||||
:placeholder="t('minder.menu.font.font')"
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
}"
|
||||
/>
|
||||
</a-select>
|
||||
<span class="font-btn">
|
||||
<span class="font-btn mt-[2px]">
|
||||
<span
|
||||
class="menu-btn tab-icons font-bold"
|
||||
:class="{ selected: boldSelected }"
|
||||
|
|
@ -258,12 +258,3 @@
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.font-group {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.font-btn {
|
||||
margin-top: 2px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -57,9 +57,9 @@
|
|||
<style lang="less">
|
||||
.toggle {
|
||||
.arco-dropdown-list {
|
||||
display: grid;
|
||||
@apply col-span-2 grid;
|
||||
|
||||
padding: 5px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -72,27 +72,27 @@
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
.mold-group {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@apply relative flex items-center justify-center;
|
||||
|
||||
width: 80px;
|
||||
.dropdown-toggle {
|
||||
display: flex;
|
||||
@apply flex;
|
||||
|
||||
margin-top: 5px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
.dropdown-link {
|
||||
position: absolute;
|
||||
@apply absolute cursor-pointer;
|
||||
|
||||
right: 3px;
|
||||
bottom: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mold-loop(@i) when (@i > 0) {
|
||||
.mold-@{i} {
|
||||
display: flex;
|
||||
@apply flex;
|
||||
|
||||
margin-top: 5px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
|
|
|||
|
|
@ -29,7 +29,8 @@
|
|||
.menu-container {
|
||||
height: 60px;
|
||||
i {
|
||||
display: inline-block;
|
||||
@apply inline-block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,9 +10,9 @@
|
|||
height: 170px;
|
||||
font-size: 12px;
|
||||
.dropdown-item {
|
||||
display: inline-block;
|
||||
@apply inline-block p-0;
|
||||
|
||||
margin: 5px;
|
||||
padding: 0;
|
||||
width: 50px;
|
||||
height: 40px;
|
||||
}
|
||||
|
|
@ -29,12 +29,12 @@
|
|||
width: 120px;
|
||||
font-size: 12px;
|
||||
.mold-icons {
|
||||
background-repeat: no-repeat;
|
||||
@apply bg-no-repeat;
|
||||
}
|
||||
.dropdown-item {
|
||||
display: inline-block;
|
||||
@apply inline-block p-0;
|
||||
|
||||
margin: 5px;
|
||||
padding: 0;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,58 +2,40 @@
|
|||
@import url('navigator.less');
|
||||
@import url('hotbox.less');
|
||||
.km-editor {
|
||||
@apply overflow-hidden;
|
||||
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.km-editor > .mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
background-color: transparent;
|
||||
@apply absolute bottom-0 left-0 right-0 top-0 block bg-transparent;
|
||||
}
|
||||
.km-editor > .receiver {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@apply pointer-events-none absolute left-0 top-0 box-border w-auto select-text overflow-hidden break-words break-all border-none bg-white opacity-0 outline-none;
|
||||
|
||||
z-index: -1000;
|
||||
overflow: hidden;
|
||||
margin-top: -5px;
|
||||
margin-left: -3px;
|
||||
padding: 3px 5px;
|
||||
width: auto;
|
||||
max-width: 300px;
|
||||
min-height: 1.4em;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
background: white;
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
box-shadow: 0 0 20px;
|
||||
line-height: 1.4em;
|
||||
box-sizing: border-box;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
user-select: text;
|
||||
pointer-events: none;
|
||||
&.debug {
|
||||
z-index: 0;
|
||||
background: none;
|
||||
opacity: 1;
|
||||
@apply z-0 bg-none opacity-100;
|
||||
|
||||
outline: 1px solid green;
|
||||
}
|
||||
&.input {
|
||||
@apply bg-white opacity-100 outline-none;
|
||||
|
||||
z-index: 999;
|
||||
background: white;
|
||||
opacity: 1;
|
||||
outline: none;
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
div.minder-editor-container {
|
||||
position: absolute;
|
||||
@apply absolute bottom-0 left-0 right-0;
|
||||
|
||||
top: 40px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
|
@ -61,35 +43,25 @@ div.minder-editor-container {
|
|||
font-family: Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
|
||||
}
|
||||
.minder-editor {
|
||||
position: absolute;
|
||||
@apply absolute bottom-0 left-0 right-0;
|
||||
|
||||
top: 92px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.minder-viewer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@apply absolute bottom-0 left-0 right-0 top-0;
|
||||
}
|
||||
.control-panel {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
@apply absolute bottom-0 right-0 top-0;
|
||||
|
||||
width: 250px;
|
||||
border-left: 1px solid #cccccc;
|
||||
}
|
||||
.minder-divider {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@apply absolute bottom-0 top-0 cursor-ew-resize;
|
||||
|
||||
right: 250px;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background-color: rgb(251 251 251);
|
||||
cursor: ew-resize;
|
||||
}
|
||||
.hotbox .state .button.enabled.selected .key,
|
||||
.hotbox .state .ring .key {
|
||||
|
|
@ -98,12 +70,12 @@ div.minder-editor-container {
|
|||
}
|
||||
.hotbox .state .bottom .button .label,
|
||||
.hotbox .state .top .button .label {
|
||||
font-weight: 600;
|
||||
@apply font-semibold;
|
||||
}
|
||||
.hotbox .exp .ring .button .label {
|
||||
margin-top: 28px;
|
||||
margin-left: -2px;
|
||||
}
|
||||
.hotbox .exp .ring .button .key {
|
||||
display: none;
|
||||
@apply hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,40 +1,39 @@
|
|||
@import 'mixin.less';
|
||||
@import 'dropdown-list.less';
|
||||
.mind-tab-panel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@apply h-full w-full;
|
||||
.menu-container {
|
||||
display: flex;
|
||||
@apply flex;
|
||||
& > div {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
@apply inline-flex flex-wrap items-center overflow-hidden;
|
||||
|
||||
border-right: 1px dashed #eeeeee;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
& > div:last-of-type {
|
||||
border-right: none;
|
||||
@apply border-r-0;
|
||||
}
|
||||
}
|
||||
.menu-btn {
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
@apply inline-flex cursor-pointer;
|
||||
@include flexcenter;
|
||||
}
|
||||
.menu-btn:not([disabled='true']):hover {
|
||||
background-color: @btn-hover-color;
|
||||
}
|
||||
.tab-icons {
|
||||
display: inline-block;
|
||||
@apply inline-flex;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.do-group {
|
||||
@apply h-full w-[40px];
|
||||
|
||||
padding: 0 5px;
|
||||
width: 40px;
|
||||
height: 100%;
|
||||
p {
|
||||
margin: 0;
|
||||
@apply m-0;
|
||||
|
||||
height: 50%;
|
||||
@include flexcenter;
|
||||
}
|
||||
|
|
@ -48,7 +47,7 @@
|
|||
.insert-group {
|
||||
width: 110px;
|
||||
& > div {
|
||||
margin: 0 5px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.insert-sibling-box {
|
||||
i {
|
||||
|
|
@ -94,12 +93,11 @@
|
|||
width: 185px;
|
||||
@include flexcenter;
|
||||
button {
|
||||
padding: 0;
|
||||
@apply bg-no-repeat p-0;
|
||||
|
||||
width: 45px;
|
||||
height: 20px;
|
||||
font-size: inherit;
|
||||
background-position: right;
|
||||
background-repeat: no-repeat;
|
||||
@include button;
|
||||
@include flexcenter;
|
||||
span {
|
||||
|
|
@ -110,15 +108,15 @@
|
|||
background-color: @btn-hover-color;
|
||||
}
|
||||
& > div {
|
||||
@apply h-full flex-wrap;
|
||||
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
font-size: inherit;
|
||||
flex-wrap: wrap;
|
||||
@include flexcenter;
|
||||
}
|
||||
.insert {
|
||||
@apply bg-no-repeat;
|
||||
|
||||
height: 25px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.link {
|
||||
.insert {
|
||||
|
|
@ -141,12 +139,12 @@
|
|||
width: 135px;
|
||||
@include flexcenter;
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@apply m-0 list-none p-0;
|
||||
|
||||
width: 120px;
|
||||
list-style: none;
|
||||
li {
|
||||
display: inline-block;
|
||||
@apply inline-block;
|
||||
|
||||
margin: 2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
|
@ -174,37 +172,35 @@
|
|||
.arrange-group {
|
||||
width: 65px;
|
||||
.arrange {
|
||||
flex-wrap: wrap;
|
||||
@apply flex-wrap;
|
||||
@include flexcenter;
|
||||
}
|
||||
.tab-icons {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
@apply m-0 inline-block bg-no-repeat;
|
||||
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-position: 0 -150px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
.style-group {
|
||||
width: 150px;
|
||||
@apply w-[150px];
|
||||
.clear-style-btn {
|
||||
flex-wrap: wrap;
|
||||
width: 65px;
|
||||
@apply w-[65px] flex-wrap;
|
||||
@include flexcenter;
|
||||
.tab-icons {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
@apply m-0 inline-block bg-no-repeat;
|
||||
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-position: 0 -175px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
.copy-paste-panel {
|
||||
width: 70px;
|
||||
@apply w-[70px];
|
||||
.tab-icons {
|
||||
display: inline-block;
|
||||
@apply inline-block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
|
@ -234,7 +230,8 @@
|
|||
}
|
||||
.font-bold,
|
||||
.font-italic {
|
||||
display: inline-block;
|
||||
@apply my-0 inline-block;
|
||||
|
||||
margin: 0 3px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
|
@ -251,8 +248,7 @@
|
|||
margin: 0 5px;
|
||||
width: 60px;
|
||||
button {
|
||||
border: none;
|
||||
outline: none;
|
||||
@apply border-none outline-none;
|
||||
}
|
||||
@include flexcenter;
|
||||
span {
|
||||
|
|
|
|||
|
|
@ -1,35 +1,31 @@
|
|||
.hotbox {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: visible;
|
||||
@apply absolute left-0 top-0 overflow-visible;
|
||||
|
||||
font-family: Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
|
||||
.state {
|
||||
position: absolute;
|
||||
display: none;
|
||||
overflow: visible;
|
||||
@apply absolute hidden overflow-visible;
|
||||
.center,
|
||||
.ring {
|
||||
.button {
|
||||
position: absolute;
|
||||
@apply absolute rounded-full;
|
||||
|
||||
margin-top: -35px;
|
||||
margin-left: -35px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 0 30px rgb(0 0 0 / 30%);
|
||||
}
|
||||
.label,
|
||||
.key {
|
||||
display: block;
|
||||
text-align: center;
|
||||
@apply block text-center;
|
||||
|
||||
line-height: 1.4em;
|
||||
}
|
||||
.label {
|
||||
@apply font-normal text-black;
|
||||
|
||||
margin-top: 17px;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
color: black;
|
||||
line-height: 1em;
|
||||
}
|
||||
.key {
|
||||
|
|
@ -38,36 +34,35 @@
|
|||
}
|
||||
}
|
||||
.ring-shape {
|
||||
position: absolute;
|
||||
@apply absolute box-content rounded-full;
|
||||
|
||||
top: -25px;
|
||||
left: -25px;
|
||||
border: 25px solid rgb(0 0 0 / 30%);
|
||||
border-radius: 100%;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.top,
|
||||
.bottom {
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
@apply absolute whitespace-nowrap;
|
||||
.button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@apply relative inline-block;
|
||||
|
||||
margin: 0 10px;
|
||||
padding: 8px 15px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 0 30px rgb(0 0 0 / 30%);
|
||||
.label {
|
||||
@apply align-middle text-black;
|
||||
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
vertical-align: middle;
|
||||
color: black;
|
||||
}
|
||||
.key {
|
||||
@apply align-middle;
|
||||
|
||||
margin-left: 3px;
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
line-height: 12px;
|
||||
vertical-align: middle;
|
||||
color: #999999;
|
||||
&::before {
|
||||
content: '(';
|
||||
}
|
||||
|
|
@ -78,34 +73,34 @@
|
|||
}
|
||||
}
|
||||
.button {
|
||||
overflow: hidden;
|
||||
background: #f9f9f9;
|
||||
cursor: default;
|
||||
@apply cursor-default overflow-hidden;
|
||||
|
||||
background-color: #f9f9f9;
|
||||
.key,
|
||||
.label {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
.button.enabled {
|
||||
background: white;
|
||||
@apply bg-white;
|
||||
.key,
|
||||
.label {
|
||||
opacity: 1;
|
||||
@apply opacity-100;
|
||||
}
|
||||
&:hover {
|
||||
background: lighten(rgb(228 93 92), 5%);
|
||||
.label {
|
||||
color: white;
|
||||
@apply text-white;
|
||||
}
|
||||
.key {
|
||||
color: lighten(rgb(228 93 92), 30%);
|
||||
}
|
||||
}
|
||||
&.selected {
|
||||
background-color: rgb(228 93 92);
|
||||
animation: selected 0.1s ease;
|
||||
background: rgb(228 93 92);
|
||||
.label {
|
||||
color: white;
|
||||
@apply text-white;
|
||||
}
|
||||
.key {
|
||||
color: lighten(rgb(228 93 92), 30%);
|
||||
|
|
@ -113,9 +108,9 @@
|
|||
}
|
||||
&.pressed,
|
||||
&:active {
|
||||
background: #ff974d;
|
||||
@apply bg-[#ff974d];
|
||||
.label {
|
||||
color: white;
|
||||
@apply text-white;
|
||||
}
|
||||
.key {
|
||||
color: lighten(#ff974d, 30%);
|
||||
|
|
@ -124,7 +119,7 @@
|
|||
}
|
||||
}
|
||||
.state.active {
|
||||
display: block;
|
||||
@apply block;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -140,11 +135,10 @@
|
|||
}
|
||||
}
|
||||
.hotbox-key-receiver {
|
||||
position: absolute;
|
||||
top: -999999px;
|
||||
left: -999999px;
|
||||
margin: 0;
|
||||
@apply absolute m-0 outline-none;
|
||||
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
outline: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,16 @@
|
|||
@btn-hover-color: #eee;
|
||||
*[disabled='true'] {
|
||||
opacity: 0.5;
|
||||
@apply opacity-50;
|
||||
}
|
||||
|
||||
.block() {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@apply h-full w-full;
|
||||
}
|
||||
|
||||
.button() {
|
||||
border: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
@apply border-none bg-transparent outline-none;
|
||||
}
|
||||
|
||||
.flexcenter() {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@apply flex items-center justify-center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,25 @@
|
|||
.nav-bar {
|
||||
position: absolute;
|
||||
@apply absolute z-10 text-white;
|
||||
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
z-index: 10;
|
||||
padding: 5px 0;
|
||||
width: 35px;
|
||||
height: 200px;
|
||||
border-radius: 4px;
|
||||
color: #ffffff;
|
||||
background: #fc8383;
|
||||
background-color: #fc8383;
|
||||
box-shadow: 3px 3px 10px rgb(0 0 0 / 20%);
|
||||
transition: -webkit-transform 0.7s 0.1s ease;
|
||||
transition: transform 0.7s 0.1s ease;
|
||||
.nav-btn {
|
||||
@apply text-center;
|
||||
|
||||
width: 35px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
.icon {
|
||||
display: block;
|
||||
@apply block;
|
||||
|
||||
margin: 2px auto;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
|
@ -34,62 +35,63 @@
|
|||
background-position: 0 -750px;
|
||||
}
|
||||
.hand .icon {
|
||||
margin: 0 auto;
|
||||
@apply mx-auto my-0;
|
||||
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-position: 0 -770px;
|
||||
}
|
||||
.camera .icon {
|
||||
margin: 0 auto;
|
||||
@apply mx-auto my-0;
|
||||
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-position: 0 -870px;
|
||||
}
|
||||
.nav-trigger .icon {
|
||||
margin: 0 auto;
|
||||
@apply mx-auto my-0;
|
||||
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-position: 0 -845px;
|
||||
}
|
||||
.zoom-pan {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
@apply relative mx-auto overflow-visible bg-white;
|
||||
|
||||
margin: 3px auto;
|
||||
width: 2px;
|
||||
height: 70px;
|
||||
background: white;
|
||||
box-shadow: 0 1px #e50000;
|
||||
.origin {
|
||||
position: absolute;
|
||||
@apply absolute bg-transparent;
|
||||
|
||||
left: -9px;
|
||||
margin-top: -4px;
|
||||
width: 20px;
|
||||
height: 8px;
|
||||
background: transparent;
|
||||
&::after {
|
||||
position: absolute;
|
||||
@apply absolute block bg-white;
|
||||
|
||||
top: 3px;
|
||||
left: 7px;
|
||||
display: block;
|
||||
width: 6px;
|
||||
height: 2px;
|
||||
background: white;
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
.indicator {
|
||||
position: absolute;
|
||||
@apply absolute rounded-full bg-white;
|
||||
|
||||
left: -3px;
|
||||
margin-top: -4px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 100%;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-previewer {
|
||||
position: absolute;
|
||||
@apply absolute cursor-crosshair bg-white;
|
||||
|
||||
bottom: 30px;
|
||||
left: 45px;
|
||||
z-index: 9;
|
||||
|
|
@ -97,15 +99,10 @@
|
|||
width: 140px;
|
||||
height: 120px;
|
||||
border-radius: 0 2px 2px 0;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 8px rgb(0 0 0 / 20%);
|
||||
transition: -webkit-transform 0.7s 0.1s ease;
|
||||
transition: transform 0.7s 0.1s ease;
|
||||
cursor: crosshair;
|
||||
&.grab {
|
||||
cursor: move;
|
||||
cursor: grabbing;
|
||||
cursor: grabbing;
|
||||
cursor: grabbing;
|
||||
@apply cursor-grabbing;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -207,33 +207,33 @@
|
|||
|
||||
<style scoped lang="less">
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
@apply flex h-full justify-between;
|
||||
|
||||
background-color: var(--color-bg-3);
|
||||
}
|
||||
.left-side {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@apply flex items-center;
|
||||
|
||||
padding-left: 20px;
|
||||
}
|
||||
.center-side {
|
||||
flex: 1;
|
||||
@apply flex-1;
|
||||
}
|
||||
.right-side {
|
||||
display: flex;
|
||||
@apply flex list-none;
|
||||
|
||||
padding-right: 20px;
|
||||
list-style: none;
|
||||
:deep(.locale-select) {
|
||||
border-radius: 20px;
|
||||
}
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@apply flex items-center;
|
||||
|
||||
padding: 0 10px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
@apply no-underline;
|
||||
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
.nav-btn {
|
||||
|
|
@ -243,7 +243,8 @@
|
|||
}
|
||||
.trigger-btn,
|
||||
.ref-btn {
|
||||
position: absolute;
|
||||
@apply absolute;
|
||||
|
||||
bottom: 14px;
|
||||
}
|
||||
.trigger-btn {
|
||||
|
|
@ -255,7 +256,7 @@
|
|||
<style lang="less">
|
||||
.message-popover {
|
||||
.arco-popover-content {
|
||||
margin-top: 0;
|
||||
@apply mt-0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,8 @@
|
|||
<style lang="less" scoped>
|
||||
.project-selection {
|
||||
& .arco-select-view-single {
|
||||
border: none;
|
||||
@apply border-none;
|
||||
|
||||
color: #323233;
|
||||
background-color: var(--color-bg-1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,8 @@
|
|||
|
||||
<style scoped lang="less">
|
||||
.c-icon {
|
||||
position: relative;
|
||||
@apply relative;
|
||||
|
||||
width: v-bind(width);
|
||||
height: v-bind(height);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<div class="tab-bar-container">
|
||||
<a-affix ref="affixRef" :offset-top="offsetTop">
|
||||
<div class="tab-bar-box">
|
||||
<div class="tab-bar-scroll">
|
||||
<div class="tags-wrap">
|
||||
<div class="tab-bar-box pl-[20px]">
|
||||
<div class="tab-bar-scroll leading-[32px]">
|
||||
<div class="tags-wrap h-[48px] px-0 py-[4px]">
|
||||
<tab-item v-for="(tag, index) in tabList" :key="tag.fullPath" :index="index" :item-data="tag" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="tag-bar-operation"></div>
|
||||
<div class="tag-bar-operation h-[32px] w-[100px]"></div>
|
||||
</div>
|
||||
</a-affix>
|
||||
</div>
|
||||
|
|
@ -50,39 +50,30 @@
|
|||
|
||||
<style scoped lang="less">
|
||||
.tab-bar-container {
|
||||
position: relative;
|
||||
@apply relative;
|
||||
|
||||
background-color: var(--color-bg-1);
|
||||
.tab-bar-box {
|
||||
display: flex;
|
||||
padding: 0 0 0 20px;
|
||||
@apply flex p-0;
|
||||
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
background-color: var(--color-bg-1);
|
||||
.tab-bar-scroll {
|
||||
overflow: hidden;
|
||||
height: 32px;
|
||||
flex: 1;
|
||||
@apply flex-1 overflow-hidden;
|
||||
.tags-wrap {
|
||||
overflow-x: auto;
|
||||
padding: 4px 0;
|
||||
height: 48px;
|
||||
white-space: nowrap;
|
||||
@apply overflow-x-auto whitespace-nowrap;
|
||||
:deep(.arco-tag) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@apply inline-flex cursor-pointer items-center;
|
||||
|
||||
margin-right: 6px;
|
||||
cursor: pointer;
|
||||
&:first-child {
|
||||
.arco-tag-close-btn {
|
||||
display: none;
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tag-bar-operation {
|
||||
width: 100px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -157,7 +157,8 @@
|
|||
|
||||
<style scoped lang="less">
|
||||
.tag-link {
|
||||
text-decoration: none;
|
||||
@apply no-underline;
|
||||
|
||||
color: var(--color-text-2);
|
||||
}
|
||||
.link-activated {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<a-badge class="theme-badge" :count="theme ? 1 : 0" dot>
|
||||
<a-badge class="theme-badge bottom-[124px] right-[70px]" :count="theme ? 1 : 0" dot>
|
||||
<a-button
|
||||
class="theme-badge-button"
|
||||
:shape="hover ? 'round' : 'circle'"
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
</a-badge>
|
||||
<a-modal :visible="modalVisible" :width="900" @ok="modalVisible = false" @cancel="modalVisible = false">
|
||||
<template #title>
|
||||
<div class="theme-box-header">
|
||||
<div class="theme-box-header pr-[24px]">
|
||||
<span>{{ t('themeBox.installTheme') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
</Empty>
|
||||
</template>
|
||||
</a-row>
|
||||
<div class="theme-box-bottom">
|
||||
<div class="theme-box-bottom mt-[20px]">
|
||||
<a-pagination :total="total" :current="page" :page-size="6" @change="onPageChange" />
|
||||
</div>
|
||||
<template v-if="theme" #footer>
|
||||
|
|
@ -242,39 +242,30 @@
|
|||
<style scoped lang="less">
|
||||
.theme-box {
|
||||
&-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-right: 24px;
|
||||
width: 100%;
|
||||
@apply flex w-full items-center justify-between;
|
||||
}
|
||||
&-card {
|
||||
&-link {
|
||||
opacity: 0;
|
||||
@apply opacity-0;
|
||||
|
||||
transition: opacity 100ms;
|
||||
}
|
||||
&:hover &-link {
|
||||
opacity: 1;
|
||||
@apply opacity-100;
|
||||
}
|
||||
:deep(.arco-card-meta-title) {
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
&-bottom {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
@apply flex justify-end;
|
||||
}
|
||||
&-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@apply flex items-center justify-between;
|
||||
}
|
||||
}
|
||||
.theme-badge {
|
||||
position: fixed;
|
||||
right: 70px;
|
||||
bottom: 124px;
|
||||
@apply fixed;
|
||||
&-button {
|
||||
border: 1px solid var(--color-fill-3) !important;
|
||||
background: var(--color-bg-5) !important;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<a-layout class="layout arco-reset" :class="{ mobile: appStore.hideMenu }">
|
||||
<div v-if="navbar" class="layout-navbar">
|
||||
<div v-if="navbar" class="layout-navbar z-[100]">
|
||||
<NavBar />
|
||||
</div>
|
||||
<a-layout>
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<a-layout-sider
|
||||
v-if="renderMenu"
|
||||
v-show="!hideMenu"
|
||||
class="layout-sider"
|
||||
class="layout-sider z-[99]"
|
||||
breakpoint="xl"
|
||||
:collapsed="collapsed"
|
||||
:collapsible="true"
|
||||
|
|
@ -105,42 +105,33 @@
|
|||
@nav-size-height: 56px;
|
||||
@layout-max-width: 1100px;
|
||||
.layout {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@apply h-full w-full;
|
||||
}
|
||||
.layout-navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
@apply fixed left-0 top-0 w-full;
|
||||
|
||||
height: @nav-size-height;
|
||||
}
|
||||
.layout-sider {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
height: 100%;
|
||||
@apply fixed left-0 top-0 h-full shadow-none;
|
||||
|
||||
transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
||||
> :deep(.arco-layout-sider-children) {
|
||||
overflow-y: hidden;
|
||||
@apply overflow-y-hidden;
|
||||
}
|
||||
}
|
||||
.menu-wrapper {
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
@apply h-full overflow-auto overflow-x-hidden;
|
||||
:deep(.arco-menu) {
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-clip-padding;
|
||||
|
||||
border: 4px solid transparent;
|
||||
border-radius: 7px;
|
||||
background-color: var(--color-bg-6);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--color-bg-6);
|
||||
|
|
@ -162,9 +153,13 @@
|
|||
}
|
||||
}
|
||||
.layout-content {
|
||||
overflow-y: hidden;
|
||||
@apply overflow-y-hidden;
|
||||
|
||||
min-height: 100vh;
|
||||
background-color: var(--color-fill-2);
|
||||
background-color: var(--color-bg-3);
|
||||
transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
||||
.arco-layout-content {
|
||||
padding: 16px 0 0 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="my-container">
|
||||
<div class="h-[100vh] bg-white px-[20px] py-[16px] pb-0">
|
||||
<div class="mb-10">表格</div>
|
||||
<ms-base-table v-bind="propsRes" v-on="propsEvent">
|
||||
<template #createTime="{ record }">
|
||||
|
|
@ -91,12 +91,3 @@
|
|||
fetchData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.my-container {
|
||||
padding: 16px 20px;
|
||||
padding-bottom: 0;
|
||||
height: 100vh;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="my-container">
|
||||
<div class="h-[100vh] bg-white px-[20px] py-[16px] pb-0">
|
||||
<div>流程编辑器</div>
|
||||
<FlowEditor />
|
||||
<a-divider />
|
||||
|
|
@ -40,12 +40,3 @@
|
|||
const aceTheme = ref<ThemeType>('github_dark');
|
||||
const aceLang = ref<LangType>('javascript');
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.my-container {
|
||||
padding: 16px 20px;
|
||||
padding-bottom: 0;
|
||||
height: 100vh;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="my-container">
|
||||
<div class="my-container h-[calc(100% - 40px)] px-[20px] pb-[20px] pt-0">
|
||||
<Breadcrumb :items="['menu.exception', 'menu.exception.403']" />
|
||||
<div class="content">
|
||||
<div class="content rounded-[4px]">
|
||||
<a-result class="result" status="403" :subtitle="$t('exception.result.403.description')" />
|
||||
<a-button key="back" type="primary">
|
||||
{{ $t('exception.result.403.back') }}
|
||||
|
|
@ -20,18 +20,10 @@
|
|||
|
||||
<style scoped lang="less">
|
||||
.my-container {
|
||||
padding: 0 20px 20px;
|
||||
height: calc(100% - 40px);
|
||||
:deep(.content) {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
@apply relative flex h-full flex-col items-center justify-center text-center;
|
||||
|
||||
background-color: var(--color-bg-1);
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="my-container">
|
||||
<div class="my-container h-[calc(100% - 40px)] px-[20px] pb-[20px] pt-0">
|
||||
<Breadcrumb :items="['menu.exception', 'menu.exception.404']" />
|
||||
<div class="content">
|
||||
<div class="content rounded-[4px]">
|
||||
<a-result class="result" status="404" :subtitle="$t('exception.result.404.description')"> </a-result>
|
||||
<div class="operation-row">
|
||||
<a-button key="again" style="margin-right: 16px">
|
||||
|
|
@ -25,18 +25,10 @@
|
|||
|
||||
<style scoped lang="less">
|
||||
.my-container {
|
||||
padding: 0 20px 20px;
|
||||
height: calc(100% - 40px);
|
||||
:deep(.content) {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
@apply relative flex h-full flex-col items-center justify-center text-center;
|
||||
|
||||
background-color: var(--color-bg-1);
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="my-container">
|
||||
<div class="my-container h-[calc(100% - 40px)] px-[20px] pb-[20px] pt-0">
|
||||
<Breadcrumb :items="['menu.exception', 'menu.exception.500']" />
|
||||
<div class="content">
|
||||
<div class="content rounded-[4px]">
|
||||
<a-result class="result" status="500" :subtitle="$t('exception.result.500.description')" />
|
||||
<a-button key="back" type="primary">
|
||||
{{ $t('exception.result.500.back') }}
|
||||
|
|
@ -20,18 +20,10 @@
|
|||
|
||||
<style scoped lang="less">
|
||||
.my-container {
|
||||
padding: 0 20px 20px;
|
||||
height: calc(100% - 40px);
|
||||
:deep(.content) {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
@apply relative flex h-full flex-col items-center justify-center text-center;
|
||||
|
||||
background-color: var(--color-bg-1);
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="my-container">
|
||||
<a-row class="login-box flex flex-row">
|
||||
<div class="my-container h-[100vh] w-[100vw] min-w-[1440px]">
|
||||
<a-row class="flex h-[730px] flex-row">
|
||||
<a-col :span="11"> <loginForm /></a-col>
|
||||
<a-divider direction="vertical" />
|
||||
<a-col :span="11"> <banner /></a-col>
|
||||
|
|
@ -15,12 +15,8 @@
|
|||
|
||||
<style lang="less" scoped>
|
||||
.my-container {
|
||||
width: 100vw;
|
||||
min-width: 1440px;
|
||||
height: 100vh;
|
||||
.login-box {
|
||||
margin-top: calc(50vh - 400px);
|
||||
height: 730px;
|
||||
}
|
||||
.arco-divider-vertical {
|
||||
height: 52em;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="absolute left-[50%] top-[50%] ml-[-95px] mt-[-121px] text-center">
|
||||
<a-result class="result" status="404" :subtitle="'not found'"> </a-result>
|
||||
<div class="operation-row">
|
||||
<a-button key="back" type="primary" @click="back"> back </a-button>
|
||||
|
|
@ -16,15 +16,3 @@
|
|||
router.push({ name: 'Workplace' });
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.content {
|
||||
// padding-top: 100px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -121px;
|
||||
margin-left: -95px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue