style - update code style (#65)

* 💄💄[style] - 调整代码格式

* 💄💄[style] - 完善代码风格

apps/admin/init-components.ts

@@ -91,101 +91,117 @@ import naive, {
   NTooltip,
   NTab,
   NResult,
-  NAffix, NGradientText
+  NAffix,
+  NGradientText,
 } from 'naive-ui'
-
 import { initVbenComponent, setNotice, setMessage } from '@vben/vbencomponents'
 
 export async function registerComponents(app) {
   initVbenComponent(app, {
-    Drawer: NDrawer,
-    DrawerContent: NDrawerContent,
-    Tag: NTag,
-    Card: NCard,
-    Menu: NMenu,
-    Divider: NDivider,
-    Space: NSpace,
-    Popover: NPopover,
+    Affix: NAffix,
+    Avatar: NAvatar,
+    AutoComplete: NAutoComplete,
+
+    Badge: NBadge,
     Button: NButton,
     ButtonGroup: NButtonGroup,
-    Avatar: NAvatar,
-    Statistic: NStatistic,
-    Select: NSelect,
-    Input: NInput,
-    InputGroup: NInputGroup,
-    InputGroupLabel: NInputGroupLabel,
-    InputNumber: NInputNumber,
-    Form: NForm,
-    FormItem: NFormItem,
-    Thing: NThing,
-    Popconfirm: NPopconfirm,
-    Icon: NIcon,
-    IconWrapper: NIconWrapper,
-    Checkbox: NCheckbox,
-    CheckboxGroup: NCheckboxGroup,
     Breadcrumb: NBreadcrumb,
     BreadcrumbItem: NBreadcrumbItem,
-    Modal: NModal,
-    Empty: NEmpty,
-    Upload: NUpload,
-    UploadDragger: NUploadDragger,
-    Tabs: NTabs,
-    Tab: NTab,
-    TabPane: NTabPane,
-    Grid: NGrid,
-    GridItem: NGridItem,
-    Ellipsis: NEllipsis,
-    Image: NImage,
-    MessageProvider: NMessageProvider,
-    Pagination: NPagination,
-    Radio: NRadio,
-    RadioButton: NRadioButton,
-    RadioGroup: NRadioGroup,
-    Text: NText,
+
+    Card: NCard,
     Config: NConfigProvider,
-    DynamicTags: NDynamicTags,
+    Checkbox: NCheckbox,
+    CheckboxGroup: NCheckboxGroup,
     ColorPicker: NColorPicker,
+    Cascader: NCascader,
+
+    Drawer: NDrawer,
+    Divider: NDivider,
+    DrawerContent: NDrawerContent,
+    DynamicTags: NDynamicTags,
     Descriptions: NDescriptions,
     DescriptionsItem: NDescriptionsItem,
-    NotificationProvider: NNotificationProvider,
-    Switch: NSwitch,
-    Layout: NLayout,
-    LayoutHeader: NLayoutHeader,
-    LayoutFooter: NLayoutFooter,
-    LayoutSider: NLayoutSider,
-    LayoutContent: NLayoutContent,
     Dropdown: NDropdown,
-    TreeSelect: NTreeSelect,
-    Badge: NBadge,
-    ListItem: NListItem,
-    List: NList,
-    AutoComplete: NAutoComplete,
-    Cascader: NCascader,
+    DynamicInput: NDynamicInput,
     DatePicker: NDatePicker,
-    TimePicker: NTimePicker,
-    Rate: NRate,
-    Slider: NSlider,
-    Transfer: NTransfer,
-    Mention: NMention,
+    DarkTheme: darkTheme,
+
+    Empty: NEmpty,
+    Ellipsis: NEllipsis,
+    Element: NElement,
+
+    Form: NForm,
+    FormItem: NFormItem,
     FormItemGi: NFormItemGi,
-    Tree: NTree,
+
+    Grid: NGrid,
+    GridItem: NGridItem,
+    GradientText: NGradientText,
+
     H1: NH1,
     H2: NH2,
     H3: NH3,
     H4: NH4,
     H5: NH5,
     H6: NH6,
-    DynamicInput: NDynamicInput,
+
+    Input: NInput,
+    InputGroup: NInputGroup,
+    InputGroupLabel: NInputGroupLabel,
+    InputNumber: NInputNumber,
+    Icon: NIcon,
+    Image: NImage,
+    IconWrapper: NIconWrapper,
+
+    ListItem: NListItem,
+    List: NList,
+    Layout: NLayout,
+    LayoutHeader: NLayoutHeader,
+    LayoutFooter: NLayoutFooter,
+    LayoutSider: NLayoutSider,
+    LayoutContent: NLayoutContent,
+
+    Menu: NMenu,
+    Modal: NModal,
+    MessageProvider: NMessageProvider,
+    Mention: NMention,
+
+    NotificationProvider: NNotificationProvider,
+
+    Popover: NPopover,
+    Popconfirm: NPopconfirm,
+    Pagination: NPagination,
     PopSelect: NPopselect,
-    Time: NTime,
-    Scrollbar: NScrollbar,
-    DarkTheme: darkTheme,
-    Element: NElement,
+
+    Rate: NRate,
+    Radio: NRadio,
+    RadioButton: NRadioButton,
+    RadioGroup: NRadioGroup,
+    Result: NResult,
+
+    Space: NSpace,
+    Select: NSelect,
+    Switch: NSwitch,
+    Slider: NSlider,
     Skeleton: NSkeleton,
+    Scrollbar: NScrollbar,
+    Statistic: NStatistic,
+
+    Tag: NTag,
+    Tab: NTab,
+    Tabs: NTabs,
+    TabPane: NTabPane,
+    Thing: NThing,
+    Text: NText,
+    Tree: NTree,
+    Time: NTime,
     Tooltip: NTooltip,
-    Result: NResult,
-    Affix: NAffix,
-    GradientText: NGradientText
+    Transfer: NTransfer,
+    TimePicker: NTimePicker,
+    TreeSelect: NTreeSelect,
+
+    Upload: NUpload,
+    UploadDragger: NUploadDragger,
   })
   setMessage(useMessage)
   setNotice(useNotification)

packages/demo/src/Table/basic.vue

@@ -1,30 +1,22 @@
 <script lang="ts" setup>
-import {reactive, ref} from 'vue'
-import {VbenColumns} from '../../../vbenComponents/src/table'
-import {getTableData} from '../apis/table'
-import type {Data} from './schemas'
+import { reactive, ref } from 'vue'
+// import { VbenColumns } from '../../../vbenComponents/src/table'
+import { getTableData } from '../apis/table'
+import { Data, baseColumns } from './schemas'
 
 const border = ref(false)
 const loading = ref(false)
 const striped = ref(false)
-const columns: VbenColumns = [
-  {field: 'userId', title: 'id', width: 200},
-  {field: 'username', title: '名称'},
-  {field: 'realname', title: '真实名称',},
-  {
-    field: 'desc',
-    title: '备注',
-  },
-]
+
 const data = reactive<Data>({
   table: {
-    items:[],
-    total:0
+    items: [],
+    total: 0
   }
 })
 getTableData().then(res => {
   console.log(res)
-  for (let i = 0; i < 4 ; i++) {
+  for (let i = 0; i < 4; i++) {
     res.items = res.items.concat(res.items)
   }
   console.log(res)
@@ -46,16 +38,13 @@ function toggleStriped() {
 </script>
 <template>
   <div class="p-2 h-full">
-    <VbenTable
-      :options="{
-      title: '基础示例',
-      pagination:true,
-      border:border,
+    <VbenTable :options="{
+      title: '基础演示',
+      pagination: true,
+      border: border,
       loading: loading,
       stripe: striped,
-      }"
-      :columns="columns"
-      :data="data.table.items">
+    }" :columns="baseColumns" :data="data.table.items">
       <template #toolbar>
         <div class="pb-2">
           <VbenButton type="primary" @click="toggleBorder">

packages/demo/src/Table/fixedColumn.vue

@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import { VbenCellClick } from '../../../vbenComponents/src/table'
 import { getTableData } from '../apis/table'
-import {columns,innerColumns,innerLabels} from './schemas'
+import {fixedColumns,innerColumns,innerLabels} from './schemas'
 import type {Data} from './schemas'
 
 const border = ref<boolean>(false)
@@ -43,7 +43,7 @@ const cellClickEvent: VbenCellClick = ({ row }) => {
         loading: loading,
         stripe: striped,
       }"
-      :columns="columns"
+      :columns="fixedColumns"
       :data="data.table.items"
       @cell-click="cellClickEvent"
     >

packages/demo/src/Table/schemas.ts

@@ -1,8 +1,53 @@
-
 import { VbenColumns } from '../../../vbenComponents/src/table'
 
-
-export const columns: VbenColumns = [
+export interface Data {
+  table: {
+    items: any[]
+    total: number
+  }
+}
+export const baseColumns: VbenColumns = [
+  {
+    field: 'userId',
+    title: 'id',
+    align: 'center',
+    width: '10%',
+  },
+  {
+    field: 'username',
+    title: '名称',
+    width: '10%',
+  },
+  {
+    field: 'realname',
+    title: '真实名称',
+    width: '10%',
+  },
+  {
+    field: 'address',
+    title: '地址',
+    width: '10%',
+  },
+  {
+    field: 'startTime',
+    title: '开始时间',
+    align: 'center',
+    width: '10%',
+  },
+  {
+    field: 'endTime',
+    title: '结束时间',
+    align: 'center',
+    width: '10%',
+  },
+  {
+    field: 'desc',
+    title: '描述',
+    align: 'center',
+    width: '40%',
+  },
+]
+export const fixedColumns: VbenColumns = [
   { field: 'userId', title: 'id', width: 100, fixed: 'left' },
   { field: 'username', title: '名称', width: 120, fixed: 'left' },
   { field: 'realname', title: '真实名称', width: 280 },
@@ -13,7 +58,7 @@ export const columns: VbenColumns = [
     field: 'desc',
     title: '备注',
     width: 280,
-    fixed:'right'
+    fixed: 'right',
   },
 ]
 
@@ -31,14 +76,3 @@ export const innerColumns: VbenColumns = [
   { field: 'label', title: 'label' },
   { field: 'value', title: 'value' },
 ]
-
-
-
-
-
-export interface Data {
-  table: {
-    items: any[]
-    total: number
-  }
-}

packages/vbenComponents/src/index.ts

@@ -1,11 +1,11 @@
-import type { Component, App } from 'vue'
-import TabPane from '#/tabs/src/TabPane.vue'
+import type { App, Component } from 'vue'
 const projectName = 'Vben3'
 export const components = {
   install: (app: App) => {
     // @ts-ignore
-    const comp = import.meta.globEager('./**/*.vue')
-
+    // const comp = import.meta.globEager('./**/*.vue')
+    /* 上面写法vite官方已弃用，详情见 https://cn.vitejs.dev/guide/migration-from-v2.html#importmetaglob */
+    const comp = import.meta.glob('./**/*.vue', {eager: true})
     Object.keys(comp).forEach((k) => {
       const c = comp[k].default
       switch (c.__name) {
@@ -28,7 +28,7 @@ export const components = {
       // console.log(c)
       // 检测未注册组件
       if (!maps.get(c.__name) && !c.name) {
-        console.warn(c)
+        warn(c.__name)
         return
       }
       app.component(`Vben${c.name || c.__name}`, c)
@@ -40,7 +40,7 @@ export const components = {
 export const maps = new Map<String, Component | String>()
 
 export function warn(message: string) {
-  console.warn(`[${projectName} warn]:${message}`)
+  console.warn(`[${projectName} warn]:<${message}> components not registered!`)
 }
 
 export function error(message: string) {