fix(table): make sure the editing line is working, fix #439

CHANGELOG.zh_CN.md

@@ -4,6 +4,7 @@
 
 - 新增`headerTitle` slot
 - 新增打印示例
+- 新增关于界面
 
 ### ✨ Refactor
 
@@ -15,6 +16,7 @@
 
 - 确保面包屑正确的显示图标
 - 修复 tinymce 上传按钮全屏模式下消失问题
+- 确保 title 在重新登录后正常改变
 
 ## 2.1.1 (2021-03-26)
 

src/components/Table/src/BasicTable.vue

@@ -185,7 +185,7 @@
       } = useTableForm(getProps, slots, fetch);
 
       const getBindValues = computed(() => {
-        const dataSource = toRaw(unref(getDataSourceRef));
+        const dataSource = unref(getDataSourceRef);
         let propsData: Recordable = {
           size: 'middle',
           // ...(dataSource.length === 0 ? { getPopupContainer: () => document.body } : {}),

src/components/Table/src/hooks/useTable.ts

@@ -17,7 +17,12 @@ type UseTableMethod = TableActionType & {
 
 export function useTable(
   tableProps?: Props
-): [(instance: TableActionType, formInstance: UseTableMethod) => void, TableActionType] {
+): [
+  (instance: TableActionType, formInstance: UseTableMethod) => void,
+  TableActionType & {
+    getForm: () => FormActionType;
+  }
+] {
   const tableRef = ref<Nullable<TableActionType>>(null);
   const loadedRef = ref<Nullable<boolean>>(false);
   const formRef = ref<Nullable<UseTableMethod>>(null);

src/hooks/web/useTitle.ts

@@ -1,22 +1,29 @@
+import { watch, unref } from 'vue';
 import { useI18n } from '/@/hooks/web/useI18n';
 import { useTitle as usePageTitle } from '@vueuse/core';
 import { useGlobSetting } from '/@/hooks/setting';
+import { useRouter } from 'vue-router';
 
 import { REDIRECT_NAME } from '/@/router/constant';
-import { listenerRouteChange } from '/@/logics/mitt/routeChange';
 
 export function useTitle() {
   const { title } = useGlobSetting();
   const { t } = useI18n();
+  const { currentRoute } = useRouter();
 
   const pageTitle = usePageTitle();
 
-  listenerRouteChange((route) => {
-    if (route.name === REDIRECT_NAME) {
-      return;
-    }
+  watch(
+    () => currentRoute.value.path,
+    () => {
+      const route = unref(currentRoute);
+      if (route.name === REDIRECT_NAME) {
+        return;
+      }
 
-    const tTitle = t(route?.meta?.title as string);
-    pageTitle.value = tTitle ? ` ${tTitle} - ${title} ` : `${title}`;
-  });
+      const tTitle = t(route?.meta?.title as string);
+      pageTitle.value = tTitle ? ` ${tTitle} - ${title} ` : `${title}`;
+    },
+    { immediate: true }
+  );
 }

src/locales/lang/en/routes/dashboard.ts

@@ -1,6 +1,6 @@
 export default {
   dashboard: 'Dashboard',
-  welcome: 'Home',
+  about: 'About',
   workbench: 'Workbench',
   analysis: 'Analysis',
 };

src/locales/lang/zh_CN/routes/dashboard.ts

@@ -1,6 +1,6 @@
 export default {
   dashboard: 'Dashboard',
-  welcome: '首页',
+  about: '关于',
   workbench: '工作台',
   analysis: '分析页',
 };

src/router/menus/modules/about.ts

@@ -0,0 +1,11 @@
+import type { MenuModule } from '/@/router/types';
+import { t } from '/@/hooks/web/useI18n';
+
+const about: MenuModule = {
+  orderNo: 100000,
+  menu: {
+    path: '/about/index',
+    name: t('routes.dashboard.about'),
+  },
+};
+export default about;

src/router/menus/modules/home.ts

@@ -1,11 +0,0 @@
-import type { MenuModule } from '/@/router/types';
-import { t } from '/@/hooks/web/useI18n';
-
-const menu: MenuModule = {
-  orderNo: 0,
-  menu: {
-    path: '/home/welcome',
-    name: t('routes.dashboard.welcome'),
-  },
-};
-export default menu;

src/router/routes/modules/about.ts

@@ -0,0 +1,28 @@
+import type { AppRouteModule } from '/@/router/types';
+
+import { LAYOUT } from '/@/router/constant';
+import { t } from '/@/hooks/web/useI18n';
+
+const dashboard: AppRouteModule = {
+  path: '/about',
+  name: 'About',
+  component: LAYOUT,
+  redirect: '/about/index',
+  meta: {
+    icon: 'simple-icons:about-dot-me',
+    title: t('routes.dashboard.about'),
+  },
+  children: [
+    {
+      path: 'index',
+      name: 'AboutPage',
+      component: () => import('/@/views/sys/about/index.vue'),
+      meta: {
+        title: t('routes.dashboard.about'),
+        icon: 'simple-icons:about-dot-me',
+      },
+    },
+  ],
+};
+
+export default dashboard;

src/router/routes/modules/home.ts

@@ -1,29 +0,0 @@
-import type { AppRouteModule } from '/@/router/types';
-
-import { LAYOUT } from '/@/router/constant';
-import { t } from '/@/hooks/web/useI18n';
-
-const dashboard: AppRouteModule = {
-  path: '/home',
-  name: 'Home',
-  component: LAYOUT,
-  redirect: '/home/welcome',
-  meta: {
-    icon: 'ion:home-outline',
-    title: t('routes.dashboard.welcome'),
-  },
-  children: [
-    {
-      path: 'welcome',
-      name: 'Welcome',
-      component: () => import('/@/views/dashboard/welcome/index.vue'),
-      meta: {
-        title: t('routes.dashboard.welcome'),
-        affix: true,
-        icon: 'bx:bx-home',
-      },
-    },
-  ],
-};
-
-export default dashboard;

src/views/demo/table/FormTable.vue

@@ -1,6 +1,10 @@
 <template>
   <BasicTable @register="registerTable">
     <template #form-custom> custom-slot </template>
+
+    <template #toolbar>
+      <a-button type="primary" @click="getFormValues">获取表单数据</a-button>
+    </template>
   </BasicTable>
 </template>
 <script lang="ts">
@@ -13,7 +17,7 @@
   export default defineComponent({
     components: { BasicTable },
     setup() {
-      const [registerTable] = useTable({
+      const [registerTable, { getForm }] = useTable({
         title: '开启搜索区域',
         api: demoListApi,
         columns: getBasicColumns(),
@@ -23,8 +27,13 @@
         rowSelection: { type: 'checkbox' },
       });
 
+      function getFormValues() {
+        console.log(getForm().getFieldsValue());
+      }
+
       return {
         registerTable,
+        getFormValues,
       };
     },
   });

src/views/sys/about/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <PageWrapper title="关于">
+    <template #headerContent>
+      <div class="flex justify-between items-center">
+        <span class="flex-1">
+          <a :href="GITHUB_URL" target="_blank">{{ name }}</a>
+          是一个基于Vue3.0、Vite、 Ant-Design-Vue 、TypeScript
+          的后台解决方案，目标是为中大型项目开发,提供现成的开箱解决方案及丰富的示例,原则上不会限制任何代码用于商用。
+        </span>
+      </div>
+    </template>
+    <Description @register="infoRegister" />
+    <Description @register="register" class="my-4" />
+    <Description @register="registerDev" />
+  </PageWrapper>
+</template>
+<script lang="ts">
+  import { defineComponent, h } from 'vue';
+
+  import { Tag } from 'ant-design-vue';
+  import { PageWrapper } from '/@/components/Page';
+  import { Description, DescItem, useDescription } from '/@/components/Description/index';
+
+  import { GITHUB_URL, SITE_URL, DOC_URL } from '/@/settings/siteSetting';
+  export default defineComponent({
+    name: 'AboutPage',
+    components: { Description, PageWrapper },
+    setup() {
+      const { pkg, lastBuildTime } = window.__APP_INFO__;
+
+      const { dependencies, devDependencies, name, version } = pkg;
+
+      const schema: DescItem[] = [];
+      const devSchema: DescItem[] = [];
+      const commonTagRender = (color: string) => (curVal) => h(Tag, { color }, () => curVal);
+      const commonLinkRender = (text: string) => (href) => h('a', { href, target: '_blank' }, text);
+      const infoSchema: DescItem[] = [
+        {
+          label: '版本',
+          field: 'version',
+          render: commonTagRender('blue'),
+        },
+        {
+          label: '最后编译时间',
+          field: 'lastBuildTime',
+          render: commonTagRender('blue'),
+        },
+        {
+          label: '文档地址',
+          field: 'doc',
+          render: commonLinkRender('文档地址'),
+        },
+        {
+          label: '预览地址',
+          field: 'preview',
+          render: commonLinkRender('预览地址'),
+        },
+        {
+          label: 'Github',
+          field: 'github',
+          render: commonLinkRender('Github'),
+        },
+      ];
+
+      const infoData = {
+        version,
+        lastBuildTime,
+        doc: DOC_URL,
+        preview: SITE_URL,
+        github: GITHUB_URL,
+      };
+
+      Object.keys(dependencies).forEach((key) => {
+        schema.push({ field: key, label: key });
+      });
+
+      Object.keys(devDependencies).forEach((key) => {
+        devSchema.push({ field: key, label: key });
+      });
+      const [register] = useDescription({
+        title: '生产环境依赖',
+        data: dependencies,
+        schema: schema,
+        column: 3,
+      });
+      const [registerDev] = useDescription({
+        title: '开发环境依赖',
+        data: devDependencies,
+        schema: devSchema,
+        column: 3,
+      });
+      const [infoRegister] = useDescription({
+        title: '项目信息',
+        data: infoData,
+        schema: infoSchema,
+        column: 2,
+      });
+
+      return { register, registerDev, infoRegister, name, GITHUB_URL };
+    },
+  });
+</script>

types/global.d.ts

@@ -10,6 +10,16 @@ declare global {
   declare interface Window {
     // Global vue app instance
     __APP__: App<Element>;
+
+    __APP_INFO__: {
+      pkg: {
+        name: string;
+        version: string;
+        dependencies: Recordable<string>;
+        devDependencies: Recordable<string>;
+      };
+      lastBuildTime: string;
+    };
   }
 
   // vue

vite.config.ts

@@ -9,6 +9,13 @@ import { createAlias } from './build/vite/alias';
 import { wrapperEnv } from './build/utils';
 import { createVitePlugins } from './build/vite/plugin';
 import { OUTPUT_DIR } from './build/constant';
+import pkg from './package.json';
+import moment from 'moment';
+
+const APP_INFO = {
+  pkg,
+  lastBuildTime: moment().format('YYYY-MM-DD HH:mm:ss'),
+};
 
 export default ({ command, mode }: ConfigEnv): UserConfig => {
   const root = process.cwd();
@@ -58,6 +65,8 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       __VUE_I18N_LEGACY_API__: false,
       __VUE_I18N_FULL_INSTALL__: false,
       __INTLIFY_PROD_DEVTOOLS__: false,
+
+      __APP_INFO__: JSON.stringify(APP_INFO),
     },
     css: {
       preprocessorOptions: {