-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
306 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 27 additions & 0 deletions
27
apps/ba-online-toolbox/src/tools/public/components/ClearLocalStorage.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
<script setup lang="ts"> | ||
import { IconDelete } from "@arco-design/web-vue/es/icon"; | ||
function handleClick() { | ||
const shouldClearLocalStorage = confirm("确定清空本地缓存吗?\n一旦清空,所有数据都会丢失。"); | ||
if (shouldClearLocalStorage) { | ||
localStorage.clear(); | ||
location.reload(); | ||
} | ||
} | ||
</script> | ||
|
||
<template> | ||
<n-tooltip placement="left"> | ||
<template #trigger> | ||
<div | ||
role="button" | ||
class="p-3 bg-white rounded-full shadow-lg flex cursor-pointer" | ||
@click="handleClick" | ||
> | ||
<icon-delete class="w-[20px] text-red-6" /> | ||
</div> | ||
</template> | ||
<span>清空本地缓存,此操作不可逆</span> | ||
</n-tooltip> | ||
</template> | ||
|
||
<style scoped lang="scss"></style> |
119 changes: 119 additions & 0 deletions
119
apps/ba-online-toolbox/src/tools/public/components/FAB.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,119 @@ | ||
<script setup land="ts"> | ||
import { ref } from "vue"; | ||
const shouldMenuExpand = ref(false); | ||
import ClearLocalStorage from "./ClearLocalStorage.vue"; | ||
function handleClick() { | ||
shouldMenuExpand.value = !shouldMenuExpand.value; | ||
} | ||
</script> | ||
|
||
<template> | ||
<div class="fixed right-5 bottom-5 flex flex-col items-end gap-4"> | ||
<transition name="fab-menu-transition"> | ||
<div v-if="shouldMenuExpand" class="flex flex-col gap-4"> | ||
<clear-local-storage /> | ||
</div> | ||
</transition> | ||
<div | ||
role="button" | ||
class="fab__button p-3 flex flex-col rounded-full bg-arona-6 shadow-std" | ||
:class="{ | ||
activated: shouldMenuExpand, | ||
}" | ||
@click="handleClick" | ||
> | ||
<svg | ||
xmlns="http://www.w3.org/2000/svg" | ||
xmlns:xlink="http://www.w3.org/1999/xlink" | ||
fill="none" | ||
version="1.1" | ||
width="24" | ||
height="24" | ||
viewBox="0 0 40 40" | ||
> | ||
<g> | ||
<g> | ||
<rect | ||
x="23" | ||
y="16" | ||
width="17" | ||
height="6" | ||
rx="0" | ||
fill="#FFFFFF" | ||
fill-opacity="1" | ||
/> | ||
</g> | ||
<g> | ||
<rect | ||
x="17" | ||
y="0" | ||
width="6" | ||
height="16" | ||
rx="0" | ||
fill="#FFFFFF" | ||
fill-opacity="1" | ||
/> | ||
</g> | ||
<g> | ||
<rect | ||
x="17" | ||
y="22" | ||
width="6" | ||
height="18" | ||
rx="0" | ||
fill="#FFFFFF" | ||
fill-opacity="1" | ||
/> | ||
</g> | ||
<g> | ||
<path | ||
d="M0,16L0,22L12.75,22L17,16L0,16Z" | ||
fill="#FFFFFF" | ||
fill-opacity="1" | ||
/> | ||
</g> | ||
</g> | ||
</svg> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<style scoped lang="scss"> | ||
.fab__button { | ||
cursor: pointer; | ||
transition: all 0.3s ease-in-out; | ||
&:hover { | ||
animation: pre-rotate 0.5s ease-in-out; | ||
} | ||
&.activated { | ||
transform: rotate(315deg); | ||
} | ||
} | ||
.fab-menu-transition-enter-active, | ||
.fab-menu-transition-leave-active { | ||
transition: all 0.3s ease-in-out; | ||
} | ||
.fab-menu-transition-enter-from, | ||
.fab-menu-transition-leave-to { | ||
opacity: 0; | ||
transform: translateY(100%); | ||
} | ||
@keyframes pre-rotate { | ||
0% { | ||
transform: rotate(0deg); | ||
} | ||
15%, | ||
45% { | ||
transform: rotate(15deg); | ||
} | ||
30% { | ||
transform: rotate(10deg); | ||
} | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import { | ||
defineConfig, | ||
presetIcons, | ||
presetUno, | ||
presetWebFonts, | ||
transformerDirectives, | ||
transformerVariantGroup, | ||
} from "unocss"; | ||
|
||
export default defineConfig({ | ||
rules: [ | ||
["shadow-std", { "box-shadow": "0 0 0.5rem rgba(0, 0, 0, 0.1)" }], | ||
["align-self-center", { "align-self": "center" }], | ||
["bg-arona-6", { "background-color": "#2773e1" }], | ||
], | ||
shortcuts: { | ||
"card-float": "shadow-std rounded-lg gap-[24px] p-[24px]", | ||
}, | ||
presets: [ | ||
presetUno(), | ||
presetIcons({ | ||
scale: 1.2, | ||
warn: true, | ||
unit: "em", | ||
}), | ||
presetWebFonts({ | ||
provider: "bunny", | ||
fonts: { | ||
sans: "Inter", | ||
}, | ||
}), | ||
], | ||
transformers: [transformerDirectives(), transformerVariantGroup()], | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.