Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev

.commitlintrc.cjs

@@ -17,12 +17,18 @@ module.exports = {
         'perf', // 性能优化
       ]
     ],
-    'type-case': [0],
-    'type-empty': [0],
-    'scope-empty': [0],
     'scope-case': [0],
-    'subject-full-stop': [0, 'never'],
+  },
-    'subject-case': [0, 'never'],
+  plugins: [
-    'header-max-length': [0, 'always', 72]
+    {
+      rules: {
+        "commit-rule": ({ raw }) => {
+          return [
+            /^\[(build|feat|fix|update|refactor|docs|chore|style|revert|perf)].+/g.test(raw),
+            `commit备注信息格式错误，格式为 <[type] 修改内容>，type支持${types.join(",")}`
+          ]
         }
+      }
+    }
+  ]
 }

components.d.ts

@@ -1,53 +0,0 @@
-// generated by unplugin-vue-components
-// We suggest you to commit this file into source control
-// Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
-
-export {}
-
-declare module '@vue/runtime-core' {
-  export interface GlobalComponents {
-    AAlert: typeof import('ant-design-vue/es')['Alert']
-    ABadge: typeof import('ant-design-vue/es')['Badge']
-    AButton: typeof import('ant-design-vue/es')['Button']
-    ACard: typeof import('ant-design-vue/es')['Card']
-    ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
-    ACheckboxGroup: typeof import('ant-design-vue/es')['CheckboxGroup']
-    ACol: typeof import('ant-design-vue/es')['Col']
-    ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
-    ADivider: typeof import('ant-design-vue/es')['Divider']
-    AEmpty: typeof import('ant-design-vue/es')['Empty']
-    AForm: typeof import('ant-design-vue/es')['Form']
-    AFormItem: typeof import('ant-design-vue/es')['FormItem']
-    AInput: typeof import('ant-design-vue/es')['Input']
-    AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
-    AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
-    AModal: typeof import('ant-design-vue/es')['Modal']
-    APagination: typeof import('ant-design-vue/es')['Pagination']
-    APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
-    ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
-    ARow: typeof import('ant-design-vue/es')['Row']
-    ASelect: typeof import('ant-design-vue/es')['Select']
-    ASpin: typeof import('ant-design-vue/es')['Spin']
-    ASwitch: typeof import('ant-design-vue/es')['Switch']
-    ATable: typeof import('ant-design-vue/es')['Table']
-    ATabPane: typeof import('ant-design-vue/es')['TabPane']
-    ATabs: typeof import('ant-design-vue/es')['Tabs']
-    ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
-    ATooltip: typeof import('ant-design-vue/es')['Tooltip']
-    ATree: typeof import('ant-design-vue/es')['Tree']
-    ATreeSelect: typeof import('ant-design-vue/es')['TreeSelect']
-    AUpload: typeof import('ant-design-vue/es')['Upload']
-    BadgeStatus: typeof import('./src/components/BadgeStatus/index.vue')['default']
-    CardBox: typeof import('./src/components/CardBox/index.vue')['default']
-    FormFormBuilder: typeof import('./src/components/Form/FormBuilder.vue')['default']
-    GeoComponent: typeof import('./src/components/GeoComponent/index.vue')['default']
-    MonacoEditor: typeof import('./src/components/MonacoEditor/index.vue')['default']
-    PermissionButton: typeof import('./src/components/PermissionButton/index.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    Table: typeof import('./src/components/Table/index.vue')['default']
-    TitleComponent: typeof import('./src/components/TitleComponent/index.vue')['default']
-    ValueItem: typeof import('./src/components/ValueItem/index.vue')['default']
-  }
-}

config/config.ts

@@ -1,6 +1,6 @@
 export default {
   theme: {
-    'primary-color': '#00A4FF',
+    'primary-color': '#1d39c4',
   },
   logo: '/favicon.ico',
   title: 'Jetlinks'

package.json

@@ -48,6 +48,7 @@
     "typescript": "^4.9.3",
     "vite": "^4.0.0",
     "vite-plugin-html": "^3.2.0",
+    "vite-plugin-style-import": "^2.0.0",
     "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue-tsc": "^1.0.11"
   },

src/api/device/product.ts

@@ -0,0 +1,3 @@
+import server from '@/utils/request'
+
+export const queryNoPagingPost = (data: any) => server.post(`/device-product/_query/no-paging?paging=false`, data)

src/components/Form/FormBuilder.vue

@@ -241,7 +241,7 @@ watch(props.initValue, (newValue: any) => {
 })
 
 defineExpose({
-  resetModel,
+  reset: resetModel,
   formValidate,
   setItemValue,
   setData

src/components/PermissionButton/index.vue

@@ -25,7 +25,7 @@
     <a-button v-else v-bind="buttonProps" :disabled="_isPermission"></a-button>
   </a-tooltip>
 </template>
-<script setup lang="ts">
+<script setup lang="ts" name="PermissionButton">
 import type { ButtonProps, TooltipProps, PopconfirmProps } from 'ant-design-vue'
 import { usePermissionStore } from '@/store/permission';
 

src/components/RadioCard/index.vue

@@ -0,0 +1,71 @@
+<!-- 单选卡片 -->
+<template>
+    <div class="m-radio">
+        <div
+            class="m-radio-item"
+            :class="{ active: myValue === item.value }"
+            v-for="(item, index) in options"
+            :key="index"
+            @click="myValue = item.value"
+        >
+            <img class="img" :src="item.logo" alt="" />
+            <span>{{ item.label }}</span>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+
+interface IOption {
+    label: string;
+    value: string;
+    logo: string;
+}
+
+type Emits = {
+    (e: 'update:modelValue', data: string): void;
+};
+const emit = defineEmits<Emits>();
+
+const props = defineProps({
+    options: {
+        type: Array as PropType<IOption[]>,
+        default: () => [],
+    },
+    modelValue: {
+        type: String,
+        default: '',
+    },
+});
+
+const myValue = computed({
+    get: () => props.modelValue,
+    set: (val) => emit('update:modelValue', val),
+});
+</script>
+
+<style lang="less" scoped>
+.m-radio {
+    display: flex;
+    &-item {
+        padding: 10px 15px;
+        margin-right: 15px;
+        border: 1px solid #d9d9d9;
+        border-radius: 2px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 5px;
+        cursor: pointer;
+        .img {
+            width: 100px;
+            height: 100px;
+        }
+        &.active {
+            color: #1d39c4;
+            border-color: #1d39c4;
+        }
+    }
+}
+</style>

src/components/Search/Item.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class='JSearch-item'>
+    <div class='JSearch-item--type'>
+      <a-select
+        v-if='index !== 1 && index !== 4'
+        :options='typeOptions'
+        v-model:value='termsModel.type'
+        style='width: 100%;'
+      />
+      <span v-else>
+        {{
+          index === 1 ? '第一组' : '第二组'
+        }}
+      </span>
+    </div>
+    <a-select
+      class='JSearch-item--column'
+      :options='columnOptions'
+      v-model:value='termsModel.column'
+    />
+    <a-select
+      class='JSearch-item--termType'
+      :options='termTypeOptions'
+      v-model:value='termsModel.termType'
+    />
+    <div class='JSearch-item--value'>
+      <a-input
+        v-if='component === componentType.input'
+        v-model:value='termsModel.value'
+      />
+      <a-select
+        v-else-if='component === componentType.select'
+        v-model:value='termsModel.value'
+        :options='options'
+      />
+      <a-inputnumber
+        v-else-if='component === componentType.inputNumber'
+        v-model:value='termsModel.value'
+      />
+      <a-input-password
+        v-else-if='component === componentType.password'
+        v-model:value='termsModel.value'
+      />
+      <a-switch
+        v-else-if='component === componentType.switch'
+        v-model:checked='termsModel.value'
+      />
+      <a-radio-group
+        v-else-if='component === componentType.radio'
+        v-model:value='termsModel.value'
+      />
+      <a-checkbox-group
+        v-else-if='component === componentType.checkbox'
+        v-model:value='termsModel.value'
+        :options='options'
+      />
+      <a-time-picker
+        v-else-if='component === componentType.time'
+        v-model:value='termsModel.value'
+      />
+      <a-date-picker
+        v-else-if='component === componentType.date'
+        v-model:value='termsModel.value'
+      />
+      <a-tree-select
+        v-else-if='component === componentType.tree'
+        v-model:value='termsModel.value'
+        :tree-data='options'
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang='ts' name='SearchItem'>
+import { componentType } from 'components/Form'
+import { typeOptions } from './util'
+
+const props = defineProps({
+  component: {
+    type: String,
+    default: componentType.input
+  },
+  index: {
+    type: Number,
+    default: 1
+  }
+})
+
+const termsModel = reactive({})
+
+const options = ref([])
+
+const columnOptions = reactive([])
+
+const termTypeOptions = reactive([])
+
+
+</script>
+
+<style scoped lang='less'>
+.JSearch-item {
+  display: flex;
+  gap: 16px;
+
+  .JSearch-item--type {
+    min-width: 120px;
+    > span {
+      line-height: 34px;
+      font-weight: bold;
+    }
+  }
+
+  .JSearch-item--column {
+    min-width: 120px;
+  }
+
+  .JSearch-item--termType {
+    min-width: 120px;
+  }
+
+  .JSearch-item--value {
+    flex: 1 1 auto;
+  }
+}
+</style>

src/components/Search/Search.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class='JSearch-content'>
+    <div class='left'>
+      <SearchItem :index='1' />
+      <SearchItem :index='2' />
+      <SearchItem :index='3' />
+    </div>
+    <div class='center'>
+      <a-select
+        :options='typeOptions'
+      />
+    </div>
+    <div class='right'>
+      <SearchItem :index='4' />
+      <SearchItem :index='5' />
+      <SearchItem :index='6' />
+    </div>
+  </div>
+</template>
+
+<script setup lang='ts' name='Search'>
+import SearchItem from './Item.vue'
+import { typeOptions } from './util'
+
+const props = defineProps({
+  defaultParams: {
+    type: Object,
+    default: () => ({})
+  },
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  type: {
+    type: String,
+    default: 'advanced'
+  },
+
+  key: {
+    type: String,
+    default: '',
+    required: true
+  }
+})
+
+const searchParams = reactive({
+  data: {}
+})
+
+</script>
+
+<style scoped lang='less'>
+.JSearch-content {
+  display: flex;
+  gap: 16px;
+  .left, & .right {
+    display: flex;
+    gap: 16px;
+    flex-direction: column;
+    width: 0;
+    flex-grow: 1;
+    min-width: 0;
+  }
+
+  .center {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex-basis: 120px;
+  }
+}
+</style>

src/components/Search/index.ts

@@ -0,0 +1,3 @@
+import Search from './Search.vue'
+
+export default Search

src/components/Search/util.ts

@@ -0,0 +1,4 @@
+export const typeOptions = [
+  { label: '或者', value: 'or' },
+  { label: '并且', value: 'and' },
+]

src/components/Table/index.module.less

@@ -0,0 +1,52 @@
+.jtable-body {
+    width: 100%;
+    padding: 0 24px 24px;
+    background-color: white;
+    .jtable-body-header {
+        padding: 16px 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .jtable-body-header-right {
+            display: flex;
+            gap: 8px;
+            .jtable-setting-item {
+                color: rgba(0, 0, 0, 0.75);
+                font-size: 16px;
+                cursor: pointer;
+
+                &:hover {
+                    color: @primary-color-hover;
+                }
+
+                &.active {
+                    color: @primary-color-active;
+                }
+            }
+        }
+    }
+    .jtable-content {
+        .jtable-alert {
+            margin-bottom: 16px;
+        }
+        .jtable-card {
+            .jtable-card-items {
+                display: grid;
+                grid-gap: 26px;
+                .jtable-card-item {
+                    display: flex;
+                }
+            }
+        }
+    }
+    .jtable-pagination {
+        margin-top: 20px;
+        display: flex;
+        justify-content: flex-end;
+        :global {
+            .ant-pagination-item {
+                display: none !important;
+            }
+        } 
+    }
+}   

src/components/Table/index.tsx

@@ -0,0 +1,268 @@
+import { UnorderedListOutlined, AppstoreOutlined } from '@ant-design/icons-vue'
+import styles from './index.module.less'
+import { Pagination, Table, Empty, Spin, Alert } from 'ant-design-vue'
+import type { TableProps, ColumnProps } from 'ant-design-vue/es/table'
+import type { TooltipProps } from 'ant-design-vue/es/tooltip'
+import type { PopconfirmProps } from 'ant-design-vue/es/popconfirm'
+import { CSSProperties, PropType } from 'vue';
+
+enum ModelEnum {
+    TABLE = 'TABLE',
+    CARD = 'CARD',
+}
+
+type RequestData = {
+    code: string;
+    result: {
+        data: Record<string, any>[] | undefined;
+        pageIndex: number;
+        pageSize: number;
+        total: number;
+    };
+    status: number;
+} & Record<string, any>;
+
+export interface ActionsType {
+    key: string;
+    text?: string;
+    disabled?: boolean;
+    permission?: boolean;
+    onClick?: (data: any) => void;
+    style?: CSSProperties;
+    tooltip?: TooltipProps;
+    popConfirm?: PopconfirmProps;
+    icon?: string;
+}
+
+export interface JColumnProps extends ColumnProps{
+    scopedSlots?: boolean; // 是否为插槽 true: 是 false: 否
+}
+
+export interface JTableProps extends TableProps{
+    request?: (params: Record<string, any> & {
+        pageSize: number;
+        pageIndex: number;
+    }) => Promise<Partial<RequestData>>;
+    cardBodyClass?: string;
+    columns: JColumnProps[];
+    params?: Record<string, any> & {
+        pageSize: number;
+        pageIndex: number;
+    };
+    model?: keyof typeof ModelEnum | undefined; // 显示table还是card
+    actions?: ActionsType[];
+    noPagination?: boolean;
+    rowSelection?: TableProps['rowSelection'];
+    cardProps?:  Record<string, any>;
+    dataSource?:  Record<string, any>[];
+}
+
+const JTable = defineComponent<JTableProps>({
+    name: 'JTable',
+    slots: [
+        'headerTitle', // 顶部左边插槽
+        'card', // 卡片内容
+    ],
+    emits: [
+        'modelChange', // 切换卡片和表格
+    ],
+    props: {
+        request: {
+            type: Function,
+            default: undefined
+        },
+        cardBodyClass: {
+            type: String,
+            default: ''
+        },
+        columns: {
+            type: Array,
+            default: () => []
+        },
+        params: {
+            type: Object,
+            default: () => {}
+        },
+        model: {
+            type: [String, undefined],
+            default: undefined
+        },
+        actions: {
+            type: Array as PropType<ActionsType[]>,
+            default: () => []
+        },
+        noPagination: {
+            type: Boolean,
+            default: false
+        },
+        rowSelection: {
+            type: Object as PropType<TableProps['rowSelection']>,
+            default: () => undefined
+        },
+        cardProps: {
+            type: Object,
+            default: undefined
+        },
+        dataSource: {
+            type: Array,
+            default: () => []
+        }
+    } as any,
+    setup(props: JTableProps ,{ slots, emit }){
+        const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
+        const _model = ref<keyof typeof ModelEnum>(props.model ? props.model : ModelEnum.CARD); // 模式切换
+        const column = ref<number>(4);
+        const _dataSource = ref<Record<string, any>[]>([])
+        const pageIndex = ref<number>(0)
+        const pageSize = ref<number>(6)
+        const total = ref<number>(0)
+        const _columns = ref<JColumnProps[]>(props?.columns || [])
+        const loading = ref<boolean>(true)
+
+        // alert关闭，取消选择
+        const handleAlertClose = () => {
+            emit('cancelSelect')
+        }
+
+        /**
+         * 请求数据
+         */
+        const handleSearch = async (_params?: Record<string, any>) => {
+            loading.value = true
+            if(props.request) {
+            const resp = await props.request({
+                    pageSize: 12,
+                    pageIndex: 1,
+                    ..._params
+                })
+                if(resp.status === 200){
+                    // 判断如果是最后一页且最后一页为空，就跳转到前一页
+                    if(resp.result?.data?.length === 0 && resp.result.total && resp.result.pageSize && resp.result.pageIndex) {
+                        handleSearch({
+                            ..._params,
+                            pageSize: pageSize.value,
+                            pageIndex: pageIndex.value - 1,
+                        })
+                    } else {
+                        _dataSource.value = resp.result?.data || []
+                        pageIndex.value = resp.result?.pageIndex || 0
+                        pageSize.value = resp.result?.pageSize || 6
+                        total.value = resp.result?.total || 0
+                    }
+                }
+            } else {
+                _dataSource.value = props?.dataSource || []
+            }
+            
+            loading.value = false
+        }
+
+        watchEffect(() => {
+            handleSearch(props.params)
+        })
+        
+        return () => <Spin spinning={loading.value}>
+                <div class={styles["jtable-body"]}>
+                <div class={styles["jtable-body-header"]}>
+                    <div class={styles["jtable-body-header-left"]}>
+                        {/* 顶部左边插槽 */}
+                        {slots.headerTitle && slots.headerTitle()}
+                    </div>
+                    <div class={styles["jtable-body-header-right"]}>
+                        <div class={[styles["jtable-setting-item"], ModelEnum.CARD === _model.value ? styles['active'] : '']} onClick={() => {
+                            _model.value = ModelEnum.CARD
+                        }}>
+                            <AppstoreOutlined />
+                        </div>
+                        <div class={[styles["jtable-setting-item"], ModelEnum.TABLE === _model.value ? styles['active'] : '']} onClick={() => {
+                            _model.value = ModelEnum.TABLE
+                        }}>
+                            <UnorderedListOutlined  />
+                        </div>
+                    </div>
+                </div>
+                {/* content */}
+                <div class={styles['jtable-content']}>
+                    {
+                        props?.rowSelection && props?.rowSelection?.selectedRowKeys && props.rowSelection.selectedRowKeys?.length ?
+                        <div class={styles['jtable-alert']}>
+                            <Alert
+                                message={'已选择' + props?.rowSelection?.selectedRowKeys?.length + '项'}
+                                type="info"
+                                onClose={handleAlertClose}
+                                closeText={<a>取消选择</a>}
+                             />
+                        </div> : null
+                    }
+                    {
+                        _model.value === ModelEnum.CARD ?
+                        <div class={styles['jtable-card']}>
+                            {
+                                _dataSource.value.length ? 
+                                <div 
+                                    class={styles['jtable-card-items']}
+                                    style={{gridTemplateColumns: `repeat(${column.value}, 1fr)`}}
+                                >
+                                    {
+                                        _dataSource.value.map(item => slots.card ? 
+                                            <div class={[styles['jtable-card-item'], props.cardBodyClass]}>{slots.card({row: item, actions: props?.actions || []})}</div>
+                                            : null)
+                                    }
+                                </div> : 
+                                <div><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /></div>
+                            }
+                        </div> :
+                        <div>
+                            <Table
+                                dataSource={_dataSource.value}
+                                columns={_columns.value}
+                                pagination={false}
+                                rowKey="id"
+                                rowSelection={props.rowSelection}
+                                scroll={{x: 1366}}
+                                v-slots={{
+                                    bodyCell: (dt: Record<string, any>) => {
+                                        const {column, record} = dt;
+                                        if((column?.key || column?.dataIndex) && column?.scopedSlots && (slots?.[column?.dataIndex] || slots?.[column?.key])) {
+                                            const _key = column?.key || column?.dataIndex
+                                            return slots?.[_key]!({row: record, actions: props.actions})
+                                        } else {
+                                            return record?.[column?.dataIndex] || ''
+                                        }
+                                    }
+                                }}
+                             />
+                        </div>
+                    }
+                </div>
+                {/* 分页 */}
+                {
+                    _dataSource.value.length && !props.noPagination &&
+                    <div class={styles['jtable-pagination']}>
+                        <Pagination 
+                            size="small" 
+                            total={total.value}
+                            showQuickJumper={false}
+                            showSizeChanger={true}
+                            current={pageIndex.value}
+                            pageSize={pageSize.value}
+                            pageSizeOptions={['12', '24', '48', '60', '100']}
+                            showTotal={(total, range) => {
+                                return `第 ${range[0]} - ${range[1]} 条/总共 ${total} 条`
+                            }}
+                            onChange={(page, size) => {
+                                handleSearch({
+                                    ...props.params,
+                                    pageSize: size,
+                                    pageIndex: pageSize.value === size ? page : 1,
+                                })
+                            }}
+                        />
+                    </div>
+                }
+            </div>
+        </Spin>
+    }
+})
+
+export default JTable

src/components/Table/index.vue

@@ -79,7 +79,7 @@
     </a-spin>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="JTable">
 import { UnorderedListOutlined, AppstoreOutlined } from '@ant-design/icons-vue'
 import type { TableProps, ColumnsType } from 'ant-design-vue/es/table'
 import type { TooltipProps } from 'ant-design-vue/es/tooltip'

src/components/index.ts

@@ -1,10 +1,11 @@
 import type { App } from 'vue'
 import AIcon from './AIcon'
 import PermissionButton from './PermissionButton/index.vue'
-import JTable from './Table/index.vue'
+import JTable from './Table/index'
 import TitleComponent from "./TitleComponent/index.vue";
 import Form from './Form';
 import CardBox from './CardBox/index.vue';
+import Search from './Search'
 
 export default  {
     install(app: App) {
@@ -14,5 +15,6 @@ export default  {
             .component('TitleComponent', TitleComponent)
             .component('Form', Form)
             .component('CardBox', CardBox)
+            .component('Search', Search)
     }
 }

src/main.ts

@@ -3,7 +3,7 @@ import App from './App.vue'
 import store from './store'
 import router from './router'
 import components from './components'
-import './style.css'
+import './style.less'
 import 'ant-design-vue/es/notification/style/css';
 import Antd from 'ant-design-vue/es'
 

src/router/index.ts

@@ -8,9 +8,15 @@ const router = createRouter({
     routes: menus
 })
 
+const filterPath = [
+  '/form',
+  '/search'
+]
+
 router.beforeEach((to, from, next) => {
     const token = LocalStore.get(TOKEN_KEY)
-    if (token) {
+
+    if (token || filterPath.includes(to.path)) {
         next()
     } else {
         if (to.path === LoginPath) {

src/router/menu.ts

@@ -44,6 +44,26 @@ export default [
         path: '/form',
         component: () => import('@/views/demo/Form.vue')
     },
+    {
+        path: '/search',
+        component: () => import('@/views/demo/Search.vue')
+    },
+    {
+        path: '/notice/Config',
+        component: () => import('@/views/notice/Config/index.vue')
+    },
+    {
+        path: '/notice/Config/detail/:id',
+        component: () => import('@/views/notice/Config/Detail/index.vue')
+    },
+    {
+        path: '/notice/Template',
+        component: () => import('@/views/notice/Template/index.vue')
+    },
+    {
+        path: '/notice/Template/detail/:id',
+        component: () => import('@/views/notice/Template/Detail/index.vue')
+    },
     // end: 测试用, 可删除
 
     // link 运维管理

src/utils/request.ts

@@ -26,23 +26,24 @@ export const request = axios.create({
  * @param {String} responseType 如果接口是需要导出文件流，那么responseType = 'blob'
  * @returns {AxiosInstance}
  */
-export const post = function(url: string, data = {}, params = {}) {
+export const post = function<T>(url: string, data = {}, params = {}) {
     params = typeof params === 'string' ? { responseType: params } : params
-    return request({
+    return request<any, AxiosResponseRewrite<T>>({
         ...params,
         method: 'POST',
         url,
         data
     })
 }
+
 /**
  * put method request
  * @param {String} url
  * @param {Object} [data]
  * @returns {AxiosInstance}
  */
-export const put = function(url: string, data = {},) {
+export const put = function<T>(url: string, data = {},) {
-    return request({
+    return request<any, AxiosResponseRewrite<T>>({
         method: 'PUT',
         url,
         data
@@ -55,8 +56,8 @@ export const put = function(url: string, data = {},) {
  * @param {Object} [data]
  * @returns {AxiosInstance}
  */
-export const patch = function(url: string, data = {}) {
+export const patch = function<T>(url: string, data = {}) {
-    return request({
+    return request<any, AxiosResponseRewrite<T>>({
         method: 'PATCH',
         url,
         data
@@ -69,8 +70,8 @@ export const patch = function(url: string, data = {}) {
  * @param {Object} [ext] 扩展参数
  * @returns {AxiosInstance}
  */
-export const get = function(url: string, params = {},  ext?: any) {
+export const get = function<T>(url: string, params = {},  ext?: any) {
-    return request({
+    return request<any, AxiosResponseRewrite<T>>({
         method: 'GET',
         url,
         params,
@@ -85,8 +86,8 @@ export const get = function(url: string, params = {},  ext?: any) {
  * @param {Object} [ext] 扩展参数
  * @returns {AxiosInstance}
  */
-export const remove = function(url: string, params = {}, ext?: any) {
+export const remove = function<T>(url: string, params = {}, ext?: any) {
-    return request({
+    return request<any, AxiosResponseRewrite<T>>({
         method: 'DELETE',
         url,
         params,
@@ -101,7 +102,7 @@ export const remove = function(url: string, params = {}, ext?: any) {
  * @return {*}
  */
 export const getStream = function(url: string, params = {}) {
-    return get(url, params, {
+    return get<any>(url, params, {
         responseType: 'arraybuffer' // 设置请求数据类型，返回blob可解析类型
     })
 }

src/views/demo/Form.vue

@@ -21,7 +21,7 @@ const submit = () => {
 }
 
 const reset = () => {
-
+  form.value.reset()
 }
 
 const setValue =() => {

src/views/demo/Search.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class='search'>
+    <Search />
+  </div>
+</template>
+
+<script>
+
+</script>
+
+<style scoped>
+.search {
+  width: calc(100% - 330px);
+}
+</style>

src/views/demo/table/index.vue

@@ -38,14 +38,14 @@
                 <a-button type="primary">新增</a-button>
             </template>
             <template #card="slotProps">
-                <CardBox :value="slotProps" @click="handleClick" :actions="actions" v-bind="slotProps" :active="_selectedRowKeys.includes(slotProps.id)">
+                <CardBox :value="slotProps" @click="handleClick" :actions="slotProps.actions" v-bind="slotProps.row" :active="_selectedRowKeys.includes(slotProps.row.id)">
                     <template #img>
                         <slot name="img">
                             <img :src="getImage('/device-product.png')" />
                         </slot>
                     </template>
                     <template #content>
-                         <h3>{{slotProps.name}}</h3>
+                         <h3>{{slotProps.row.name}}</h3>
                          <a-row>
                             <a-col :span="12">
                                 <div class="card-item-content-text">
@@ -68,11 +68,11 @@
             </template>
             <template #action="slotProps">
                 <a-space :size="16">
-                    <a-tooltip v-for="i in actions" :key="i.key" v-bind="i.tooltip">
+                    <a-tooltip v-for="i in slotProps.actions" :key="i.key" v-bind="i.tooltip">
                         <a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
                             <a-button style="padding: 0" type="link"><AIcon :type="i.icon" /></a-button>
                         </a-popconfirm>
-                        <a-button style="padding: 0" type="link" v-else @click="i.onClick && i.onClick(slotProps)">
+                        <a-button style="padding: 0" type="link" v-else @click="i.onClick && i.onClick(slotProps.row)">
                             <AIcon :type="i.icon" />
                         </a-button>
                     </a-tooltip>

src/views/demo/test.tsx

@@ -0,0 +1,9 @@
+import { Button } from 'ant-design-vue'
+
+export default defineComponent({
+    setup(){
+        return () => <div>
+        <Button type='primary'>新增</Button>
+    </div>
+    }
+})

src/views/notice/Config/Detail/index.vue

@@ -0,0 +1,405 @@
+<!-- 通知配置详情 -->
+<template>
+    <div class="page-container">
+        <a-card>
+            <a-row>
+                <a-col :span="10">
+                    <a-form layout="vertical">
+                        <a-form-item
+                            label="通知方式"
+                            v-bind="validateInfos.type"
+                        >
+                            <a-select
+                                v-model:value="formData.type"
+                                placeholder="请选择通知方式"
+                            >
+                                <a-select-option
+                                    v-for="(item, index) in NOTICE_METHOD"
+                                    :key="index"
+                                    :value="item.value"
+                                >
+                                    {{ item.label }}
+                                </a-select-option>
+                            </a-select>
+                        </a-form-item>
+                        <a-form-item label="名称" v-bind="validateInfos.name">
+                            <a-input
+                                v-model:value="formData.name"
+                                placeholder="请输入名称"
+                            />
+                        </a-form-item>
+                        <a-form-item
+                            label="类型"
+                            v-bind="validateInfos.provider"
+                            v-if="formData.type !== 'email'"
+                        >
+                            <RadioCard
+                                :options="msgType"
+                                v-model="formData.provider"
+                            />
+                        </a-form-item>
+                        <!-- 钉钉 -->
+                        <template v-if="formData.type === 'dingTalk'">
+                            <template
+                                v-if="formData.provider === 'dingTalkMessage'"
+                            >
+                                <a-form-item
+                                    label="AppKey"
+                                    v-bind="
+                                        validateInfos['configuration.appKey']
+                                    "
+                                >
+                                    <a-input
+                                        v-model:value="
+                                            formData.configuration.appKey
+                                        "
+                                        placeholder="请输入AppKey"
+                                    />
+                                </a-form-item>
+                                <a-form-item
+                                    label="AppSecret"
+                                    v-bind="
+                                        validateInfos['configuration.appSecret']
+                                    "
+                                >
+                                    <a-input
+                                        v-model:value="
+                                            formData.configuration.appSecret
+                                        "
+                                        placeholder="请输入AppSecret"
+                                    />
+                                </a-form-item>
+                            </template>
+                            <template
+                                v-if="
+                                    formData.provider === 'dingTalkRobotWebHook'
+                                "
+                            >
+                                <a-form-item
+                                    label="webHook"
+                                    v-bind="validateInfos['configuration.url']"
+                                >
+                                    <a-input
+                                        v-model:value="
+                                            formData.configuration.url
+                                        "
+                                        placeholder="请输入webHook"
+                                    />
+                                </a-form-item>
+                            </template>
+                        </template>
+                        <!-- 微信 -->
+                        <template v-if="formData.type === 'weixin'">
+                            <a-form-item
+                                label="corpId"
+                                v-bind="validateInfos['configuration.corpId']"
+                            >
+                                <a-input
+                                    v-model:value="
+                                        formData.configuration.corpId
+                                    "
+                                    placeholder="请输入corpId"
+                                />
+                            </a-form-item>
+                            <a-form-item
+                                label="corpSecret"
+                                v-bind="
+                                    validateInfos['configuration.corpSecret']
+                                "
+                            >
+                                <a-input
+                                    v-model:value="
+                                        formData.configuration.corpSecret
+                                    "
+                                    placeholder="请输入corpSecret"
+                                />
+                            </a-form-item>
+                        </template>
+                        <!-- 邮件 -->
+                        <template v-if="formData.type === 'email'">
+                            <a-form-item
+                                label="服务器地址"
+                                v-bind="validateInfos['configuration.host']"
+                            >
+                                <a-space>
+                                    <a-input
+                                        v-model:value="
+                                            formData.configuration.host
+                                        "
+                                        placeholder="请输入服务器地址"
+                                    />
+                                    <a-input-number
+                                        v-model:value="
+                                            formData.configuration.port
+                                        "
+                                    />
+                                    <a-checkbox
+                                        v-model:value="
+                                            formData.configuration.ssl
+                                        "
+                                    >
+                                        开启SSL
+                                    </a-checkbox>
+                                </a-space>
+                            </a-form-item>
+                            <a-form-item
+                                label="发件人"
+                                v-bind="validateInfos['configuration.sender']"
+                            >
+                                <a-input
+                                    v-model:value="
+                                        formData.configuration.sender
+                                    "
+                                    placeholder="请输入发件人"
+                                />
+                            </a-form-item>
+                            <a-form-item
+                                label="用户名"
+                                v-bind="validateInfos['configuration.username']"
+                            >
+                                <a-input
+                                    v-model:value="
+                                        formData.configuration.username
+                                    "
+                                    placeholder="请输入用户名"
+                                />
+                            </a-form-item>
+                            <a-form-item
+                                label="密码"
+                                v-bind="validateInfos['configuration.password']"
+                            >
+                                <a-input
+                                    v-model:value="
+                                        formData.configuration.password
+                                    "
+                                    placeholder="请输入密码"
+                                />
+                            </a-form-item>
+                        </template>
+                        <!-- 语音/短信 -->
+                        <template
+                            v-if="
+                                formData.type === 'voice' ||
+                                formData.type === 'sms'
+                            "
+                        >
+                            <a-form-item
+                                label="RegionId"
+                                v-bind="validateInfos['configuration.regionId']"
+                            >
+                                <a-select
+                                    v-model:value="
+                                        formData.configuration.regionId
+                                    "
+                                    placeholder="请选择RegionId"
+                                >
+                                    <a-select-option
+                                        v-for="(item, index) in regionList"
+                                        :key="index"
+                                        :value="item.value"
+                                    >
+                                        {{ item.label }}
+                                    </a-select-option>
+                                </a-select>
+                            </a-form-item>
+                            <a-form-item
+                                label="AccessKeyId"
+                                v-bind="
+                                    validateInfos['configuration.accessKeyId']
+                                "
+                            >
+                                <a-input
+                                    v-model:value="
+                                        formData.configuration.accessKeyId
+                                    "
+                                    placeholder="请输入AccessKeyId"
+                                />
+                            </a-form-item>
+                            <a-form-item
+                                label="Secret"
+                                v-bind="validateInfos['configuration.secret']"
+                            >
+                                <a-input
+                                    v-model:value="
+                                        formData.configuration.secret
+                                    "
+                                    placeholder="Secret"
+                                />
+                            </a-form-item>
+                        </template>
+                        <!-- webhook -->
+                        <template v-if="formData.type === 'webhook'">
+                            <a-form-item
+                                label="Webhook"
+                                v-bind="validateInfos['configuration.url']"
+                            >
+                                <a-input
+                                    v-model:value="formData.configuration.url"
+                                    placeholder="请输入Webhook"
+                                />
+                            </a-form-item>
+                        </template>
+                        <a-form-item label="说明">
+                            <a-textarea
+                                v-model:value="formData.description"
+                                show-count
+                                :maxlength="200"
+                                :rows="5"
+                                placeholder="请输入说明"
+                            />
+                        </a-form-item>
+                        <a-form-item :wrapper-col="{ offset: 0, span: 3 }">
+                            <a-button
+                                type="primary"
+                                @click="handleSubmit"
+                                style="width: 100%"
+                            >
+                                保存
+                            </a-button>
+                        </a-form-item>
+                    </a-form>
+                </a-col>
+                <a-col :span="12" :push="2"></a-col>
+            </a-row>
+        </a-card>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { getImage, LocalStore } from '@/utils/comm';
+import { Form } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
+import { ConfigFormData } from '../types';
+import {
+    NOTICE_METHOD,
+    CONFIG_FIELD_MAP,
+    MSG_TYPE,
+} from '@/views/notice/const';
+import regionList from './regionId';
+
+const useForm = Form.useForm;
+
+// 消息类型
+const msgType = ref([
+    {
+        label: '钉钉消息',
+        value: 'dingTalkMessage',
+        logo: getImage('/notice/dingtalk.png'),
+    },
+    {
+        label: '群机器人消息',
+        value: 'dingTalkRobotWebHook',
+        logo: getImage('/notice/dingTalk-rebot.png'),
+    },
+]);
+
+// 表单数据
+const formData = ref<ConfigFormData>({
+    configuration: {
+        appKey: '',
+        appSecret: '',
+        url: '',
+    },
+    description: '',
+    name: '',
+    provider: 'dingTalkMessage',
+    type: NOTICE_METHOD[0].value,
+});
+
+// 根据通知方式展示对应的字段
+watch(
+    () => formData.value.type,
+    (val) => {
+        formData.value.configuration = CONFIG_FIELD_MAP[val];
+        msgType.value = MSG_TYPE[val];
+
+        formData.value.provider = msgType.value[0].value;
+    },
+);
+
+// 验证规则
+const formRules = ref({
+    type: [{ required: true, message: '请选择通知方式' }],
+    name: [
+        { required: true, message: '请输入名称' },
+        { max: 64, message: '最多可输入64个字符' },
+    ],
+    provider: [{ required: true, message: '请选择类型' }],
+    // 钉钉
+    'configuration.appKey': [
+        { required: true, message: '请输入AppKey' },
+        { max: 64, message: '最多可输入64个字符' },
+    ],
+    'configuration.appSecret': [
+        { required: true, message: '请输入AppSecret' },
+        { max: 64, message: '最多可输入64个字符' },
+    ],
+    // 'configuration.url': [{ required: true, message: '请输入WebHook' }],
+    // 微信
+    'configuration.corpId': [
+        { required: true, message: '请输入corpId' },
+        { max: 64, message: '最多可输入64个字符' },
+    ],
+    'configuration.corpSecret': [
+        { required: true, message: '请输入corpSecret' },
+        { max: 64, message: '最多可输入64个字符' },
+    ],
+    // 阿里云语音/短信
+    'configuration.regionId': [
+        { required: true, message: '请输入RegionId' },
+        { max: 64, message: '最多可输入64个字符' },
+    ],
+    'configuration.accessKeyId': [
+        { required: true, message: '请输入AccessKeyId' },
+        { max: 64, message: '最多可输入64个字符' },
+    ],
+    'configuration.secret': [
+        { required: true, message: '请输入Secret' },
+        { max: 64, message: '最多可输入64个字符' },
+    ],
+    // 邮件
+    'configuration.host': [{ required: true, message: '请输入服务器地址' }],
+    'configuration.sender': [{ required: true, message: '请输入发件人' }],
+    'configuration.username': [
+        { required: true, message: '请输入用户名' },
+        { max: 64, message: '最多可输入64个字符' },
+    ],
+    'configuration.password': [
+        { required: true, message: '请输入密码' },
+        { max: 64, message: '最多可输入64个字符' },
+    ],
+    // webhook
+    'configuration.url': [
+        { required: true, message: '请输入Webhook' },
+        {
+            pattern:
+                /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/,
+            message: 'Webhook需要是一个合法的URL',
+            trigger: 'blur',
+        },
+    ],
+    description: [{ max: 200, message: '最多可输入200个字符' }],
+});
+
+const { resetFields, validate, validateInfos } = useForm(
+    formData.value,
+    formRules.value,
+);
+console.log('validateInfos: ', validateInfos);
+
+/**
+ * 表单提交
+ */
+const handleSubmit = () => {
+    validate()
+        .then(async () => {})
+        .catch((err) => {});
+};
+</script>
+
+<style lang="less" scoped>
+.page-container {
+    background: #f0f2f5;
+    padding: 24px;
+}
+</style>

src/views/notice/Config/Detail/regionId.ts

@@ -0,0 +1,119 @@
+//  数据来源 https://help.aliyun.com/document_detail/188196.html
+export default [
+  /** 公共云 */
+  //中国地区（包含中国香港、中国澳门，不包含中国台湾）
+  {
+    value: 'cn-qingdao',
+    label: '华北1（青岛）',
+  },
+  {
+    value: 'cn-beijing',
+    label: '华北2（北京）',
+  },
+  {
+    value: 'cn-zhangjiakou',
+    label: '华北3（张家口）',
+  },
+  {
+    value: 'cn-huhehaote',
+    label: '华北5（呼和浩特）',
+  },
+  {
+    value: 'cn-wulanchabu',
+    label: '华北6（乌兰察布）',
+  },
+  {
+    value: 'cn-hangzhou',
+    label: '华东1（杭州）',
+  },
+  {
+    value: 'cn-shanghai',
+    label: '华东2（上海）',
+  },
+  {
+    value: 'cn-nanjing',
+    label: '华东5 （南京-本地地域）',
+  },
+  {
+    value: 'cn-fuzhou',
+    label: '华东6（福州-本地地域）',
+  },
+  {
+    value: 'cn-shenzhen',
+    label: '华南1（深圳）',
+  },
+  {
+    value: 'cn-heyuan',
+    label: '华南2（河源）',
+  },
+  {
+    value: 'cn-guangzhou',
+    label: '华南3（广州）',
+  },
+  {
+    value: 'cn-chengdu',
+    label: '西南1（成都）',
+  },
+  {
+    value: 'cn-hongkong',
+    label: '中国香港',
+  },
+
+  //其他国家和地区
+  {
+    value: 'ap-southeast-1',
+    label: '新加坡',
+  },
+  {
+    value: 'ap-southeast-2',
+    label: '澳大利亚（悉尼）',
+  },
+  {
+    value: 'ap-southeast-3',
+    label: '马来西亚（吉隆坡）',
+  },
+  {
+    value: 'ap-southeast-5',
+    label: '印度尼西亚（雅加达）',
+  },
+  {
+    value: 'ap-southeast-6',
+    label: '菲律宾（马尼拉）',
+  },
+  {
+    value: 'ap-southeast-7',
+    label: '泰国（曼谷）',
+  },
+  {
+    value: 'ap-south-1',
+    label: '印度（孟买）',
+  },
+  {
+    value: 'ap-northeast-1',
+    label: '日本（东京）',
+  },
+  {
+    value: 'ap-northeast-2',
+    label: '韩国（首尔）',
+  },
+  {
+    value: 'us-west-1',
+    label: '美国（硅谷）',
+  },
+  {
+    value: 'us-east-1',
+    label: '美国（弗吉尼亚）',
+  },
+  {
+    value: 'eu-central-1',
+    label: '德国（法兰克福）',
+  },
+  {
+    value: 'eu-west-1',
+    label: '英国（伦敦）',
+  },
+  {
+    value: 'me-east-1',
+    label: '阿联酋（迪拜）',
+  },
+];

src/views/notice/Config/index.vue

@@ -0,0 +1,8 @@
+<!-- 通知配置 -->
+<template>
+    <div class="page-container">通知配置</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less" scoped></style>

src/views/notice/Config/types.d.ts

@@ -0,0 +1,37 @@
+interface IHeaders {
+    key: string;
+    value: string;
+}
+export type ConfigFormData = {
+    configuration: {
+        // 钉钉
+        appKey?: string;
+        appSecret?: string;
+        url?: string;
+        // 微信
+        corpId?: string;
+        corpSecret?: string;
+        // 邮件
+        host?: string;
+        port?: number;
+        ssl?: boolean;
+        sender?: string;
+        username?: string;
+        password?: string;
+        // 语音
+        regionId?: string;
+        accessKeyId?: string;
+        secret?: string;
+        // 短信
+        regionId?: string;
+        accessKeyId?: string;
+        secret?: string;
+        // webhook
+        // url?: string;
+        headers?: IHeaders[];
+    };
+    description: string;
+    name: string;
+    provider: string;
+    type: string;
+};

src/views/notice/Template/Detail/index.vue

@@ -0,0 +1,8 @@
+<!-- 通知模板详情 -->
+<template>
+    <div class="page-container">通知模板详情</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less" scoped></style>

src/views/notice/Template/index.vue

@@ -0,0 +1,8 @@
+<!-- 通知模板 -->
+<template>
+    <div class="page-container">通知模板</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less" scoped></style>

src/views/notice/const.ts

@@ -0,0 +1,126 @@
+import { getImage } from '@/utils/comm';
+
+interface INoticeMethod {
+    label: string;
+    value: string;
+}
+
+// 通知方式
+export const NOTICE_METHOD: INoticeMethod[] = [
+    {
+        label: '钉钉',
+        value: 'dingTalk',
+    },
+    {
+        label: '微信',
+        value: 'weixin',
+    },
+    {
+        label: '邮件',
+        value: 'email',
+    },
+    {
+        label: '语音',
+        value: 'voice',
+    },
+    {
+        label: '短信',
+        value: 'sms',
+    },
+    {
+        label: 'webhook',
+        value: 'webhook',
+    },
+];
+
+// 消息类型
+export const MSG_TYPE = {
+    dingTalk: [
+        {
+            label: '钉钉消息',
+            value: 'dingTalkMessage',
+            logo: getImage('/notice/dingtalk.png'),
+        },
+        {
+            label: '群机器人消息',
+            value: 'dingTalkRobotWebHook',
+            logo: getImage('/notice/dingTalk-rebot.png'),
+        },
+    ],
+    weixin: [
+        {
+            label: '企业消息',
+            value: 'corpMessage',
+            logo: getImage('/notice/weixin-corp.png'),
+        },
+        // {
+        //   label: '服务号消息',
+        //   value: 'officialMessage'
+        //   logo: getImage('/notice/weixin-official.png'),
+        // }
+    ],
+    voice: [
+        {
+            label: '阿里云语音',
+            value: 'aliyun',
+            logo: getImage('/notice/voice.png'),
+        },
+    ],
+    sms: [
+        {
+            label: '阿里云短信',
+            value: 'aliyunSms',
+            logo: getImage('/notice/sms.png'),
+        },
+    ],
+    webhook: [
+        {
+            label: 'webhook',
+            value: 'http',
+            logo: getImage('/notice/webhook.png'),
+        },
+    ],
+    email: [
+        {
+            label: 'email',
+            value: 'embedded',
+            logo: getImage('/notice/email.png'),
+        },
+    ],
+}
+
+// 字段关系映射
+// 配置
+export const CONFIG_FIELD_MAP = {
+    dingTalk: {
+        appKey: undefined,
+        appSecret: undefined,
+        url: undefined,
+    },
+    weixin: {
+        corpId: undefined,
+        corpSecret: undefined,
+    },
+    email: {
+        host: undefined,
+        port: 25,
+        ssl: false,
+        sender: undefined,
+        username: undefined,
+        password: undefined,
+    },
+    voice: {
+        regionId: undefined,
+        accessKeyId: undefined,
+        secret: undefined,
+    },
+    sms: {
+        regionId: undefined,
+        accessKeyId: undefined,
+        secret: undefined,
+    },
+    webhook: {
+        url: undefined,
+        headers: [],
+    },
+}; 

src/views/user/Login/index.vue

@@ -9,7 +9,6 @@
                     />
                 </div>
                 <div class="right">
-                    <div class="lang" data-lang=""></div>
                     <div class="content">
                         <div class="top">
                             <div class="header">
@@ -109,17 +108,13 @@
                                         </a-button>
                                     </a-form-item>
                                 </a-form>
-                                <div style="margin-top: 20px">
+                                <div class="other">
-                                    <a-divider plain style="height: 12px">
+                                    <a-divider plain>
-                                        <div
+                                        <div class="other-text">
-                                            style="color: #807676d9, font-size: 12px"
-                                        >
                                             其他方式登录
                                         </div>
                                     </a-divider>
-                                    <div
+                                    <div class="other-button">
-                                        style="position: relative, bottom: 10px; text-align: center"
-                                    >
                                         <a-button
                                             v-for="(item, index) in bindings"
                                             :key="index"
@@ -312,8 +307,6 @@ screenRotation(screenWidth.value, screenHeight.value);
 </script>
 
 <style scoped lang="less">
-@import 'ant-design-vue/es/style/themes/default.less';
-
 .container {
     display: flex;
     height: 100vh;
@@ -336,22 +329,12 @@ screenRotation(screenWidth.value, screenHeight.value);
             background: #fff;
         }
 
-        .lang {
-            width: 100%;
-            height: 40px;
-            line-height: 44px;
-            text-align: right;
-
-            :global(.ant-dropdown-trigger) {
-                margin-right: 24px;
-            }
-        }
-
         .content {
             display: flex;
             flex-direction: row-reverse;
             justify-content: center;
             padding: 0 0 15% 0;
+            margin-top: 20%;
 
             .top {
                 width: 100%;
@@ -404,17 +387,6 @@ screenRotation(screenWidth.value, screenHeight.value);
                         max-width: 328px;
                     }
 
-                    // ::v-deep {
-                    //     .@{ant-prefix}-tabs-nav-list {
-                    //         margin: auto;
-                    //         font-size: 16px;
-                    //     }
-
-                    //     // .ant-formily-item-size-large .ant-formily-item-help {
-                    //     //     text-align: left;
-                    //     // }
-                    // }
-
                     .icon {
                         margin-left: 16px;
                         color: rgba(0, 0, 0, 0.2);
@@ -429,12 +401,17 @@ screenRotation(screenWidth.value, screenHeight.value);
                     }
 
                     .other {
-                        margin-top: 24px;
+                        margin-top: 20px;
-                        line-height: 22px;
-                        text-align: left;
 
-                        .register {
+                        .other-text {
-                            float: right;
+                            color: #807676d9;
+                            font-size: 12px;
+                        }
+
+                        .other-button {
+                            position: relative;
+                            bottom: 10px;
+                            text-align: center;
                         }
                     }
 

tsconfig.json

@@ -16,7 +16,11 @@
     "allowJs": true,
     "baseUrl": "./",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "components/*": ["./src/components/*"],
+      "layouts/*": ["./src/layouts/*"],
+      "store/*": ["./src/store/*"],
+      "style/*": ["./src/style/*"],
     },
     "types": ["ant-design-vue/typings/global"],
     "suppressImplicitAnyIndexErrors": true

vite.config.ts

@@ -8,7 +8,7 @@ import { createHtmlPlugin } from 'vite-plugin-html'
 import Config from './config/config'
 import {VueAmapResolver} from '@vuemap/unplugin-resolver'
 import VueSetupExtend from 'vite-plugin-vue-setup-extend'
-
+import { createStyleImportPlugin, AndDesignVueResolve } from 'vite-plugin-style-import'
 import * as path from 'path'
 
 
@@ -20,7 +20,7 @@ export default defineConfig(({ mode}) => {
       resolve: {
           alias: {
               '@': path.resolve(__dirname, 'src'),
-              'styles': path.resolve(__dirname, 'src/style'),
+              'style': path.resolve(__dirname, 'src/style'),
               'layouts': path.resolve(__dirname, 'src/layouts'),
               'components': path.resolve(__dirname, 'src/components'),
               'store': path.resolve(__dirname, 'src/store'),
@@ -69,7 +69,10 @@ export default defineConfig(({ mode}) => {
                   }
               }
           }),
-          VueSetupExtend()
+          VueSetupExtend(),
+          createStyleImportPlugin({
+            resolves: [AndDesignVueResolve()]
+          })
       ],
       server: {
           host:'0.0.0.0',
@@ -89,8 +92,8 @@ export default defineConfig(({ mode}) => {
           preprocessorOptions: {
               less: {
                   modifyVars: {
+                      hack: `true; @import (reference) "${path.resolve('src/style/variable.less')}";`,
                       ...Config.theme,
-                      hack: `true; @import (reference) "${path.resolve('src/style/variable.less')}";`
                   },
                   javascriptEnabled: true,
               }