Skip to content

Commit

Permalink
feat(toolbox): 支持主动清空缓存
Browse files Browse the repository at this point in the history
  • Loading branch information
mark9804 committed May 10, 2024
1 parent 550ca7e commit 7edcc09
Show file tree
Hide file tree
Showing 10 changed files with 306 additions and 15 deletions.
4 changes: 3 additions & 1 deletion apps/ba-online-toolbox/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@
"vue": "^3.3.7",
"vue-router": "~4.3.0",
"mitt": "^3.0.0",
"cross-env": "^7.0.3"
"cross-env": "^7.0.3",
"unocss": "^0.59.0-beta.1",
"@arco-design/web-vue": "~2.55.2"
},
"devDependencies": {
"taze": "^0.13.3",
Expand Down
13 changes: 3 additions & 10 deletions apps/ba-online-toolbox/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { computed, onMounted } from "vue";
import { useRoute } from "vue-router";
import HomepageNavigator from "./HomepageNavigator.vue";
import FAB from "./tools/public/components/FAB.vue";
import { useGlobalConfig } from "./tools/ScenarioEditor/store/configStore";
import { getStudents } from "./tools/public/helper/getStudents";
import { ElMessage } from "element-plus";
Expand Down Expand Up @@ -29,7 +30,7 @@ const isMainPage = computed(() => {

<template>
<transition name="menu">
<div class="nav-bar shadow-far" id="nav-bar" v-if="!isMainPage">
<div class="nav-bar shadow-far flex fixed justify-center items-center z-100 bg-white w-full font-bold select-none" id="nav-bar" v-if="!isMainPage">
<router-link to="/"
><svg
class="navigation-arrow"
Expand All @@ -54,20 +55,12 @@ const isMainPage = computed(() => {
</keep-alive>
</router-view>
</div>
<FAB />
</template>

<style scoped lang="scss">
.nav-bar {
display: flex;
position: fixed;
justify-content: center;
align-items: center;
z-index: 100;
background-color: #fff;
width: 100%;
font-weight: bold;
font-size: 16px;
user-select: none;
.navigation-arrow {
display: none;
Expand Down
1 change: 1 addition & 0 deletions apps/ba-online-toolbox/src/HomepageNavigator.vue
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ const mainRoutes = router
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: min-content;
gap: 1rem;
user-select: none;
.home-nav-link {
display: flex;
Expand Down
1 change: 1 addition & 0 deletions apps/ba-online-toolbox/src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { createApp } from 'vue';
import { routerConvert } from './routes/routes';
import App from './App.vue';
import './style.scss';
import "uno.css";

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export const useScenarioStore = defineStore({
title: "",
};
},

persist: true,
getters: {
isLoadFile: state => state.fileLoad,
Expand Down
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 apps/ba-online-toolbox/src/tools/public/components/FAB.vue
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>
34 changes: 34 additions & 0 deletions apps/ba-online-toolbox/uno.config.ts
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()],
});
20 changes: 20 additions & 0 deletions apps/ba-online-toolbox/vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,13 @@ import AutoImport from "unplugin-auto-import/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import { NaiveUiResolver } from "unplugin-vue-components/resolvers";
import Components from "unplugin-vue-components/vite";
import UnoCSS from "unocss/vite";
import {
presetAttributify,
presetIcons,
presetUno,
transformerDirectives,
} from "unocss";

// https://vitejs.dev/config/
export default defineConfig({
Expand Down Expand Up @@ -42,6 +49,19 @@ export default defineConfig({
resolvers: [ElementPlusResolver(), NaiveUiResolver()],
}),
vue(),
UnoCSS({
presets: [
presetUno(),
presetIcons({
extraProperties: {
display: "inline-block",
"vertical-align": "middle",
},
}),
presetAttributify(),
],
transformers: [transformerDirectives()],
}),
legacy({
targets: [
"Android >= 39",
Expand Down
Loading

0 comments on commit 7edcc09

Please sign in to comment.