feat: 全局样式重置&路由切换 history 模式

This commit is contained in:
baiqi 2023-06-12 18:29:21 +08:00 committed by fit2-zhao
parent 5139ccd769
commit d23f74bbac
12 changed files with 219 additions and 21 deletions

View File

@ -51,7 +51,7 @@ export default defineConfig({
preprocessorOptions: {
less: {
modifyVars: {
hack: `true; @import (reference) "${resolve('src/assets/style/breakpoint.less')}";`,
hack: `true; @import (reference) "${resolve('src/assets/style/var.less')}";`,
},
javascriptEnabled: true,
},

View File

@ -172,7 +172,7 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
// authentication schemese.g: Bearer
// authenticationScheme: 'Bearer',
authenticationScheme: '',
baseURL: import.meta.env.VITE_API_BASE_URL as string,
baseURL: `${window.location.origin}/${import.meta.env.VITE_API_BASE_URL as string}`,
timeout: 30 * 1000,
headers: { 'Content-Type': ContentTypeEnum.JSON, 'X-AUTH-TOKEN': sessionId, 'CSRF-TOKEN': csrfToken },
// 如果是form-data格式

View File

@ -1,21 +1,124 @@
.arco-reset {
/** 表格样式 **/
.arco-table-cell {
.circle {
@apply inline-block rounded-full;
/** 表格样式 **/
.arco-table-cell {
.circle {
@apply inline-block rounded-full;
margin-right: 4px;
width: 6px;
height: 6px;
background-color: rgb(var(--blue-6));
&.pass {
background-color: rgb(var(--green-6));
margin-right: 4px;
width: 6px;
height: 6px;
background-color: rgb(var(--blue-6));
&.pass {
background-color: rgb(var(--green-6));
}
}
}
/** Tabs 组件样式 **/
.arco-tabs-nav-add-btn {
font-size: var(--font-size-body-3);
}
/** Modal对话框 **/
.arco-modal {
@apply bg-white;
padding: 24px;
.arco-modal-header {
margin-bottom: 16px;
}
.arco-modal-footer {
margin-top: 16px;
text-align: right;
}
}
.ms-modal-weak {
.arco-modal-footer {
.arco-btn:first-child {
color: var(--color-text-1) !important;
}
}
}
/** 按钮 **/
.arco-btn-primary {
&:disabled {
background-color: rgb(var(--primary-3)) !important;
}
}
.arco-btn-secondary {
color: var(--clolor-text-1) !important;
background-color: var(--color-text-n8) !important;
&:not(:disabled):hover {
background-color: var(--color-text-input-border) !important;
}
&:not(:disabled):active {
background-color: var(--color-text-brand) !important;
}
}
.arco-btn-text {
&:not(:disabled):hover {
background-color: var(--color-text-n9) !important;
}
&:not(:disabled):active {
background-color: var(--color-text-n8) !important;
}
}
.arco-btn-outline {
color: rgb(var(--primary-5)) !important;
&:not(:disabled):hover {
border-color: rgb(var(--primary-4)) !important;
color: rgb(var(--primary-4)) !important;
background-color: rgb(var(--primary-1)) !important;
}
&:not(:disabled):active {
border-color: rgb(var(--primary-7)) !important;
color: rgb(var(--primary-7)) !important;
background-color: rgb(var(--primary-9)) !important;
}
&:disabled {
border-color: rgb(var(--primary-3)) !important;
color: rgb(var(--primary-3)) !important;
background-color: rgb(var(--primary-1)) !important;
}
}
/** 输入框 **/
.arco-input-wrapper {
border: 1px solid var(--color-text-input-border);
background-color: var(--color-text-fff) !important;
&:not(:disabled):hover {
border-color: rgb(var(--primary-5));
}
}
/** Message **/
.arco-message {
border: 0.5px solid var(--color-text-n8);
border-radius: var(--border-radius-medium);
box-shadow: 0 6px 30px 5px rgb(0 0 0 / 5%), 0 16px 24px 2px rgb(0 0 0 / 4%), 0 8px 10px -5px rgb(0 0 0 / 8%);
}
/** 图标 **/
.arco-icon {
font-size: 16px;
}
/** 下拉菜单 **/
.arco-dropdown {
border: 0.5px solid var(--color-text-n8);
box-shadow: 0 3px 14px 2px rgb(0 0 0 / 5%), 0 8px 10px 1px rgb(0 0 0 / 6%), 0 5px 5px -3px rgb(0 0 0 / 10%);
.arco-dropdown-list {
@apply relative flex w-full flex-col overflow-hidden;
.arco-dropdown-option {
@apply w-auto;
margin: 0 6px;
padding: 3px 8px;
border-radius: var(--border-radius-small);
line-height: normal;
&:hover {
background-color: rgb(var(--primary-1));
}
}
}
/** Tabs 组件样式 **/
.arco-tabs-nav-add-btn {
font-size: var(--font-size-base);
}
}

View File

@ -0,0 +1,5 @@
/** 主题变量覆盖 **/
@border-radius-mini: 2px;
@border-radius-small: 4px;
@border-radius-medium: 6px;
@border-radius-large: 12px;

View File

@ -0,0 +1,35 @@
<template>
<div :class="`ms-button ms-button--${props.type}`" @click="clickHandler">
<slot></slot>
</div>
</template>
<script setup lang="ts">
const props = withDefaults(
defineProps<{
type?: 'text';
}>(),
{
type: 'text',
}
);
const emit = defineEmits(['click']);
function clickHandler() {
emit('click');
}
</script>
<style lang="less" scoped>
.ms-button {
@apply inline-block cursor-pointer align-middle;
&:not(:last-child) {
@apply mr-4;
}
font-size: 1rem;
line-height: 22px;
color: rgb(var(--primary-5));
}
</style>

View File

@ -0,0 +1,37 @@
<template>
<a-dropdown trigger="hover" @select="selectHandler">
<MsButton><icon-more /></MsButton>
<template #content>
<template v-for="item of props.list">
<a-divider v-if="item.isDivider" :key="`${item.label}-divider`" class="mx-0 my-[6px]" />
<a-doption v-else :key="item.label" :class="item.danger ? 'error-6' : ''">{{ item.label }}</a-doption>
</template>
</template>
</a-dropdown>
</template>
<script setup lang="ts">
import MsButton from '@/components/pure/ms-button/index.vue';
import type { ActionsItem, SelectedValue } from './types';
const props = defineProps<{
list: ActionsItem[];
}>();
const emit = defineEmits(['select']);
function selectHandler(value: SelectedValue) {
const item = props.list.find((e: ActionsItem) => e.label === value);
emit('select', item);
}
</script>
<style lang="less" scoped>
.error-6 {
color: rgb(var(--danger-6));
&:hover {
color: rgb(var(--danger-6));
}
}
</style>

View File

@ -0,0 +1,8 @@
export interface ActionsItem {
label?: string;
eventTag?: string;
isDivider?: boolean;
danger?: boolean;
}
export type SelectedValue = string | number | Record<string, any> | undefined;

View File

@ -20,6 +20,12 @@ export default function useModal() {
...options,
titleAlign: 'start',
modalClass: `ms-modal-${options.mode || 'default'} ms-modal-${options.size || 'medium'}`,
okButtonProps: {
type: options.mode === 'weak' ? 'text' : 'primary',
},
cancelButtonProps: {
type: options.mode === 'weak' ? 'text' : 'secondary',
},
}),
};
}

View File

@ -1,5 +1,5 @@
<template>
<a-layout class="layout arco-reset" :class="{ mobile: appStore.hideMenu }">
<a-layout class="layout" :class="{ mobile: appStore.hideMenu }">
<div v-if="navbar" class="layout-navbar z-[100]">
<NavBar />
</div>

View File

@ -6,6 +6,7 @@ import minder from '@/components/pure/minder-editor/locale/en-US';
import localeLogin from '@/views/login/locale/en-US';
import localeTable from '@/components/pure/ms-table/locale/en-US';
import localeApiTest from '@/views/api-test/locale/en-US';
import localeUser from '@/views/system/locale/en-US';
export default {
message: {
@ -21,6 +22,7 @@ export default {
...minder,
...localeTable,
...localeApiTest,
...localeUser,
},
dayjsLocale,
dayjsLocaleName: 'en-US',

View File

@ -6,6 +6,7 @@ import minder from '@/components/pure/minder-editor/locale/zh-CN';
import localeLogin from '@/views/login/locale/zh-CN';
import localeTable from '@/components/pure/ms-table/locale/zh-CN';
import localeApiTest from '@/views/api-test/locale/zh-CN';
import localeUser from '@/views/system/locale/zh-CN';
export default {
message: {
@ -22,6 +23,7 @@ export default {
...minder,
...localeTable,
...localeApiTest,
...localeUser,
},
dayjsLocale,
dayjsLocaleName: 'zh-CN',

View File

@ -1,4 +1,4 @@
import { createRouter, createWebHashHistory } from 'vue-router';
import { createRouter, createWebHistory } from 'vue-router';
import NProgress from 'nprogress'; // progress bar
import 'nprogress/nprogress.css';
@ -9,7 +9,7 @@ import createRouteGuard from './guard';
NProgress.configure({ showSpinner: false }); // NProgress Configuration
const router = createRouter({
history: createWebHashHistory(),
history: createWebHistory(),
routes: [
{
path: '/',