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

frontend/config/vite.config.base.ts

@@ -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,
       },

frontend/src/api/http/index.ts

@@ -172,7 +172,7 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
         // authentication schemes，e.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格式

frontend/src/assets/style/arco-reset.less

@@ -1,4 +1,3 @@
-.arco-reset {
 /** 表格样式  **/
 .arco-table-cell {
   .circle {
@@ -16,6 +15,110 @@
 
 /** Tabs 组件样式 **/
 .arco-tabs-nav-add-btn {
-    font-size: var(--font-size-base);
+  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));
+      }
+    }
   }
 }

frontend/src/assets/style/var.less

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

frontend/src/components/pure/ms-button/index.vue

@@ -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>

frontend/src/components/pure/ms-table-more-action/index.vue

@@ -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>

frontend/src/components/pure/ms-table-more-action/types.ts

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

frontend/src/hooks/useModal.ts

@@ -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',
+        },
       }),
   };
 }

frontend/src/layout/default-layout.vue

@@ -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>

frontend/src/locale/en-US/index.ts

@@ -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',

frontend/src/locale/zh-CN/index.ts

@@ -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',

frontend/src/router/index.ts

@@ -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: '/',