feat/tdvue3/new version (#16)

* feat(version): tdesign-vue-next new version

* feat: upgrade version

* fix: layout fix

* feat(version update): update new version

* chore(vite): revert vite version

* fix(ui): ui edit

* fix(login): login page background image

* feat(version): install new version

* docs(readme): remov useless content

* fix(base url): remove base url

README.md

@@ -108,12 +108,6 @@ npm run stylelint:fix
 
 ### 兼容性
 
-# 快速体验
-
-可以访问官方提供的 [TDesign Starter](https://tdesign.tencent.com/starter/vue/) 项目体验使用 TDesign 组件快速搭建业务系统。
-
-# 浏览器兼容性
-
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br> IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
 | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Edge >=79                                                                                                                                                                                                        | Firefox >=83                                                                                                                                                                                                      | Chrome >=69                                                                                                                                                                                                   | Safari >=12                                                                                                                                                                                                   |

package.json

@@ -19,7 +19,7 @@
     "hex-to-hsl": "^1.0.2",
     "nprogress": "^0.2.0",
     "qrcode.vue": "^3.2.2",
-    "tdesign-vue-next": "^0.5.0",
+    "tdesign-vue-next": "^0.6.0",
     "tvision-color": "^1.3.1",
     "vue": "^3.1.5",
     "vue-color-kit": "^1.0.5",

src/layouts/components/Header.vue

@@ -195,7 +195,6 @@ export default defineComponent({
 </script>
 <style lang="less">
 @import '@/style/variables.less';
-
 .@{prefix}-header {
   &-layout {
     height: 64px;
@@ -225,7 +224,6 @@ export default defineComponent({
     height: 64px;
   }
 }
-
 .header-menu {
   flex: 1 1 1;
   display: inline-flex;
@@ -236,7 +234,7 @@ export default defineComponent({
   align-items: center;
   margin-right: 12px;
 
-  .t-popup-reference {
+  .t-popup__reference {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -260,7 +258,8 @@ export default defineComponent({
 .header-operate-left {
   display: flex;
   margin-left: 20px;
-  align-items: center;
+  align-items: normal;
+  line-height: 0;
 
   .collapsed-icon {
     font-size: 20px;

src/layouts/components/Search.vue

@@ -85,7 +85,7 @@ export default defineComponent({
     border: none;
     outline: none;
     box-shadow: none;
-    transform: background @anim-duration-base linear;
+    transition: background @anim-duration-base linear;
     &:hover {
       background: @bg-color-secondarycontainer;
     }

src/layouts/index.tsx

@@ -1,28 +1,20 @@
 import { defineComponent } from 'vue';
 import { mapGetters } from 'vuex';
-import TdesignHeader from './components/Header.vue';
+import TDesignHeader from './components/Header.vue';
-import TdesignBreadcrumb from './components/Breadcrumb.vue';
+import TDesignBreadcrumb from './components/Breadcrumb.vue';
-import TdesignFooter from './components/Footer.vue';
+import TDesignFooter from './components/Footer.vue';
-import TdesignSideNav from './components/SideNav';
+import TDesignSideNav from './components/SideNav';
-import TdesignContent from './components/Content.vue';
+import TDesignContent from './components/Content.vue';
 
 import { prefix } from '@/config/global';
 import TdesignSetting from './setting.vue';
-import { SettingType, ClassName } from '@/interface';
+import { SettingType } from '@/interface';
 import '@/style/layout.less';
 
 const name = `${prefix}-base-layout`;
 
 export default defineComponent({
   name,
-  components: {
-    TdesignHeader,
-    TdesignFooter,
-    TdesignSideNav,
-    TdesignSetting,
-    TdesignBreadcrumb,
-    TdesignContent,
-  },
   computed: {
     ...mapGetters({
       showSidebar: 'setting/showSidebar',
@@ -36,10 +28,10 @@ export default defineComponent({
     setting(): SettingType {
       return this.$store.state.setting;
     },
-    mainLayoutCls(): ClassName {
+    mainLayoutCls() {
       return [
         {
-          't-layout-has-sider': this.showSidebar,
+          't-layout--with-sider': this.showSidebar,
         },
       ];
     },
@@ -74,7 +66,7 @@ export default defineComponent({
     renderSidebar() {
       return (
         this.showSidebar && (
-          <tdesign-side-nav
+          <TDesignSideNav
             showLogo={this.showSidebarLogo}
             layout={this.setting.layout}
             isFixed={this.setting.isSidebarFixed}
@@ -88,7 +80,7 @@ export default defineComponent({
     renderHeader() {
       return (
         this.showHeader && (
-          <tdesign-header
+          <TDesignHeader
             showLogo={this.showHeaderLogo}
             theme={this.mode}
             layout={this.setting.layout}
@@ -105,8 +97,8 @@ export default defineComponent({
       return (
         <t-layout class={[`${prefix}-layout`]}>
           <t-content class={`${prefix}-content-layout`}>
-            {showBreadcrumb && <tdesign-breadcrumb />}
+            {showBreadcrumb && <TDesignBreadcrumb />}
-            <TdesignContent />
+            <TDesignContent />
           </t-content>
           {showFooter && this.renderFooter()}
         </t-layout>
@@ -116,7 +108,7 @@ export default defineComponent({
     renderFooter() {
       return (
         <t-footer class={`${prefix}-footer-layout`}>
-          <tdesign-footer />
+          <TDesignFooter />
         </t-footer>
       );
     },
@@ -127,9 +119,8 @@ export default defineComponent({
     const header = this.renderHeader();
     const sidebar = this.renderSidebar();
     const content = this.renderContent();
-
     return (
-      <div class={`${prefix}-wrapper`}>
+      <div>
         {layout === 'side' ? (
           <t-layout class={this.mainLayoutCls} key="side">
             <t-aside>{sidebar}</t-aside>
@@ -141,7 +132,7 @@ export default defineComponent({
             <t-layout class={this.mainLayoutCls}>{[sidebar, content]}</t-layout>
           </t-layout>
         )}
-        <tdesign-setting />
+        <TdesignSetting />
       </div>
     );
   },

src/layouts/setting.vue

@@ -3,7 +3,6 @@
     v-model:visible="showSettingPanel"
     size="408px"
     :footer="false"
-    value="medium"
     header="页面配置"
     :close-btn="true"
     class="setting-drawer-container"
@@ -69,10 +68,7 @@
           <t-switch v-model="formData.splitMenu" />
         </t-form-item>
 
-        <t-form-item v-show="formData.layout !== 'side'" label="固定 Header" name="isHeaderFixed">
+        <t-form-item v-show="formData.layout === 'mix'" label="固定 Sidebar" name="isSidebarFixed">
-          <t-switch v-model="formData.isHeaderFixed" />
-        </t-form-item>
-        <t-form-item v-show="formData.layout !== 'top'" label="固定 Sidebar" name="isSidebarFixed">
           <t-switch v-model="formData.isSidebarFixed" />
         </t-form-item>
 
@@ -86,9 +82,6 @@
         <t-form-item label="显示 Footer" name="showFooter">
           <t-switch v-model="formData.showFooter" />
         </t-form-item>
-        <t-form-item v-show="formData.showFooter && !formData.isSidebarFixed" label="footer 内收" name="footerPosition">
-          <t-switch v-model="formData.isFooterAside" />
-        </t-form-item>
       </t-form>
       <div class="setting-info">
         <p>请复制后手动修改配置文件: /src/config/style.js</p>
@@ -331,7 +324,7 @@ export default defineComponent({
   .setting-container {
     padding-bottom: 100px;
   }
-  .t-radio-group.t-radio-group-medium {
+  .t-radio-group.t-size-m {
     min-height: 32px;
     width: 100%;
     height: auto;
@@ -360,12 +353,12 @@ export default defineComponent({
       border: 2px solid @brand-color !important;
     }
 
-    .t-form__controls--content {
+    .t-form__controls-content {
       justify-content: end;
     }
   }
 
-  .t-form__controls--content {
+  .t-form__controls-content {
     justify-content: end;
   }
 }

src/main.ts

@@ -1,12 +1,15 @@
 import { createApp } from 'vue';
+
 import TDesign from 'tdesign-vue-next';
+import 'tdesign-vue-next/es/style/index.css';
 import VueClipboard from 'vue3-clipboard';
-import App from './App.vue';
 import { store } from './store';
 import router from './router';
 import '@/style/index.less';
 import './permission';
 
+import App from './App.vue';
+
 const app = createApp(App);
 
 app.use(TDesign);

src/pages/dashboard/base/index.vue

@@ -203,7 +203,7 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, watch, ref, onUnmounted } from 'vue';
+import { defineComponent, onMounted, watch, ref, onUnmounted, nextTick } from 'vue';
 import { useStore } from 'vuex';
 
 import * as echarts from 'echarts/core';
@@ -349,7 +349,9 @@ export default defineComponent({
 
     onMounted(() => {
       renderCharts();
+      nextTick(() => {
         updateContainer();
+      });
       window.addEventListener('resize', updateContainer, false);
     });
 

src/pages/dashboard/detail/index.vue

@@ -58,7 +58,7 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, onUnmounted, watch } from 'vue';
+import { defineComponent, nextTick, onMounted, onUnmounted, watch } from 'vue';
 import { useStore } from 'vuex';
 
 import * as echarts from 'echarts/core';
@@ -124,6 +124,9 @@ export default defineComponent({
     onMounted(() => {
       renderCharts();
       window.addEventListener('resize', updateContainer, false);
+      nextTick(() => {
+        updateContainer();
+      });
     });
 
     onUnmounted(() => {

src/pages/detail/advanced/index.vue

@@ -186,7 +186,7 @@ export default defineComponent({
         visible.value = true;
       },
       deleteClickOp(columns) {
-        data.value.splice(columns.index, 1);
+        data.value.splice(columns.rowIndex, 1);
       },
       onConfirm() {
         visible.value = false;

src/pages/detail/deploy/index.vue

@@ -202,7 +202,7 @@ export default defineComponent({
         visible.value = false;
       },
       deleteClickOp(e) {
-        data.value.splice(e.index, 1);
+        data.value.splice(e.rowIndex, 1);
       },
       onAlertChange,
     };

src/pages/list/base/index.vue

@@ -140,7 +140,7 @@ export default defineComponent({
 
     const onConfirmDelete = () => {
       // 真实业务请发起请求
-      data.value.splice(deleteIdx.value - 1, 1);
+      data.value.splice(deleteIdx.value, 1);
       pagination.value.total = data.value.length;
       const selectedIdx = selectedRowKeys.value.indexOf(deleteIdx.value);
       if (selectedIdx > -1) {
@@ -185,8 +185,8 @@ export default defineComponent({
       handleSetupContract() {
         router.push('/form/base');
       },
-      handleClickDelete({ row }) {
+      handleClickDelete(row: { rowIndex: any }) {
-        deleteIdx.value = row.index;
+        deleteIdx.value = row.rowIndex;
         confirmVisible.value = true;
       },
     };

src/pages/list/components/CommonTable.vue

@@ -94,7 +94,7 @@
       </t-table>
       <t-dialog
         v-model:visible="confirmVisible"
-        header="是否确认删除该产品"
+        header="确认删除当前所选合同？"
         :body="confirmBody"
         :on-cancel="onCancel"
         @confirm="onConfirmDelete"
@@ -211,8 +211,8 @@ export default defineComponent({
     const deleteIdx = ref(-1);
     const confirmBody = computed(() => {
       if (deleteIdx.value > -1) {
-        const { no, name } = data.value[deleteIdx.value];
+        const { name } = data.value[deleteIdx.value];
-        return `产品编号:${no}, 产品名称: ${name}`;
+        return `删除后，${name}的所有合同信息将被清空，且无法恢复`;
       }
       return '';
     });
@@ -223,7 +223,7 @@ export default defineComponent({
 
     const onConfirmDelete = () => {
       // 真实业务请发起请求
-      data.value.splice(deleteIdx.value - 1, 1);
+      data.value.splice(deleteIdx.value, 1);
       pagination.value.total = data.value.length;
       confirmVisible.value = false;
       MessagePlugin.success('删除成功');
@@ -255,7 +255,7 @@ export default defineComponent({
       onCancel,
       dataLoading,
       handleClickDelete({ row }) {
-        deleteIdx.value = row.index;
+        deleteIdx.value = row.rowIndex;
         confirmVisible.value = true;
       },
       onReset(val) {

src/pages/login/index.less

@@ -19,7 +19,7 @@
   display: flex;
   flex-direction: column;
   background-size: cover;
-  background-position: 50%;
+  background-position: 100%;
   position: relative;
 }
 

src/pages/result/fail/index.vue

@@ -4,8 +4,8 @@
     <div class="result-success-title">项目创建失败</div>
     <div class="result-success-describe">企业微信联系检查创建者权限，或返回修改</div>
     <div>
-      <t-button theme="default" @click="() => $router.push('/form/base')">返回首页</t-button>
       <t-button @click="() => $router.push('/form/base')">返回修改</t-button>
+      <t-button theme="default" @click="() => $router.push('/dashboard/base')">返回首页</t-button>
     </div>
   </div>
 </template>

src/store/modules/setting.ts

@@ -27,6 +27,7 @@ const mutations = {
     state.isSidebarFixed = payload.isSidebarFixed;
     state.isHeaderFixed = payload.isHeaderFixed;
     state.showHeader = payload.showHeader;
+    state.showFooter = payload.showFooter;
     state.backgroundTheme = payload.backgroundTheme;
     state.brandTheme = payload.brandTheme;
   },

src/style/layout.less

@@ -4,7 +4,7 @@
 
 // layout rewrite
 
-.t-layout--sider {
+.t-layout__sider {
   width: fit-content;
 }
 
@@ -12,8 +12,7 @@
   margin-left: @spacer;
 }
 
-.t-layout.t-layout-has-sider {
+.t-layout.t-layout--with-sider {
-
   > .t-layout {
     flex: 1;
     min-width: 760px;

vite.config.ts

@@ -8,7 +8,7 @@ import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  base: '/starter/vue-next/',
+  base: './',
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),