Browse Source

feat: use unocss

main
xingyu 2 years ago
parent
commit
efe71b9d8e
  1. 1
      .vscode/settings.json
  2. 2
      src/components/VirtualScroll/src/VirtualScroll.vue
  3. 40
      src/layouts/default/feature/index.vue
  4. 4
      src/layouts/default/setting/components/SettingFooter.vue
  5. 2
      src/layouts/default/setting/index.vue

1
.vscode/settings.json vendored

@ -157,6 +157,7 @@
"vben", "vben",
"vditor", "vditor",
"videojs", "videojs",
"vite",
"vitejs", "vitejs",
"vuedraggable", "vuedraggable",
"vueuse", "vueuse",

2
src/components/VirtualScroll/src/VirtualScroll.vue

@ -104,7 +104,7 @@ export default defineComponent({
if (!wrapEl) if (!wrapEl)
return 0 return 0
const height = Number.parseInt(props.height || 0, 10) || wrapEl.clientHeight const height = Number.parseInt(`${props.height || 0}`, 10) || wrapEl.clientHeight
return first + Math.ceil(height / unref(getItemHeightRef)) return first + Math.ceil(height / unref(getItemHeightRef))
} }

40
src/layouts/default/feature/index.vue

@ -6,7 +6,6 @@ import { computed, unref } from 'vue'
import { SettingButtonPositionEnum } from '@/enums/appEnum' import { SettingButtonPositionEnum } from '@/enums/appEnum'
import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting' import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting'
import { useRootSetting } from '@/hooks/setting/useRootSetting' import { useRootSetting } from '@/hooks/setting/useRootSetting'
import { useDesign } from '@/hooks/web/useDesign'
import { useUserStoreWithOut } from '@/store/modules/user' import { useUserStoreWithOut } from '@/store/modules/user'
import { createAsyncComponent } from '@/utils/factory/createAsyncComponent' import { createAsyncComponent } from '@/utils/factory/createAsyncComponent'
import SessionTimeoutLogin from '@/views/base/login/SessionTimeoutLogin.vue' import SessionTimeoutLogin from '@/views/base/login/SessionTimeoutLogin.vue'
@ -18,11 +17,10 @@ const LayoutLockPage = createAsyncComponent(() => import('@/views/base/lock/inde
const SettingDrawer = createAsyncComponent(() => import('@/layouts/default/setting/index.vue')) const SettingDrawer = createAsyncComponent(() => import('@/layouts/default/setting/index.vue'))
const { getUseOpenBackTop, getShowSettingButton, getSettingButtonPosition, getFullContent } const { getUseOpenBackTop, getShowSettingButton, getSettingButtonPosition, getFullContent }
= useRootSetting() = useRootSetting()
const getTarget = () => document.body const getTarget = () => document.body
const userStore = useUserStoreWithOut() const userStore = useUserStoreWithOut()
const { prefixCls } = useDesign('setting-drawer-feature')
const { getShowHeader } = useHeaderSetting() const { getShowHeader } = useHeaderSetting()
const getIsSessionTimeout = computed(() => userStore.getSessionTimeout) const getIsSessionTimeout = computed(() => userStore.getSessionTimeout)
@ -44,41 +42,17 @@ const getIsFixedSettingDrawer = computed(() => {
<LayoutLockPage /> <LayoutLockPage />
<FloatButton.BackTop v-if="getUseOpenBackTop" :target="getTarget" /> <FloatButton.BackTop v-if="getUseOpenBackTop" :target="getTarget" />
<FloatButton <FloatButton
shape="circle" shape="circle" type="primary" :badge="{ dot: true }" :style="{
type="primary"
:badge="{ dot: true }"
:style="{
right: '64px', right: '64px',
}" }" @click="openWindow(SITE_URL)"
@click="openWindow(SITE_URL)"
> >
<template #icon> <template #icon>
<QuestionCircleOutlined /> <QuestionCircleOutlined />
</template> </template>
</FloatButton> </FloatButton>
<SettingDrawer v-if="getIsFixedSettingDrawer" :class="prefixCls" /> <SettingDrawer
v-if="getIsFixedSettingDrawer"
class="absolute top-[45%] z-10 flex cursor-pointer items-center justify-items-center rounded-l-md rounded-r-none p-2.5"
/>
<SessionTimeoutLogin v-if="getIsSessionTimeout" /> <SessionTimeoutLogin v-if="getIsSessionTimeout" />
</template> </template>
<style lang="less">
@prefix-cls: ~'@{namespace}-setting-drawer-feature';
.@{prefix-cls} {
position: absolute;
top: 45%;
right: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
color: @white;
cursor: pointer;
border-radius: 6px 0 0 6px;
svg {
width: 1em;
height: 1em;
}
}
</style>

4
src/layouts/default/setting/components/SettingFooter.vue

@ -67,12 +67,12 @@ function handleClearAndRedo() {
{{ t('layout.setting.copyBtn') }} {{ t('layout.setting.copyBtn') }}
</a-button> </a-button>
<a-button color="warning" block class="my-3" @click="handleResetSetting"> <a-button block class="my-3" @click="handleResetSetting">
<RedoOutlined class="mr-2" /> <RedoOutlined class="mr-2" />
{{ t('common.resetText') }} {{ t('common.resetText') }}
</a-button> </a-button>
<a-button color="error" block @click="handleClearAndRedo"> <a-button type="primary" danger block @click="handleClearAndRedo">
<RedoOutlined class="mr-2" /> <RedoOutlined class="mr-2" />
{{ t('layout.setting.clearBtn') }} {{ t('layout.setting.clearBtn') }}
</a-button> </a-button>

2
src/layouts/default/setting/index.vue

@ -11,7 +11,7 @@ const [register, { openDrawer }] = useDrawer()
<template> <template>
<div @click="openDrawer(true)"> <div @click="openDrawer(true)">
<Icon icon="ion:settings-outline" /> <Icon class="h-4 w-4" icon="ion:settings-outline" />
<SettingDrawer @register="register" /> <SettingDrawer @register="register" />
</div> </div>
</template> </template>

Loading…
Cancel
Save