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
This commit is contained in:
PY 2021-12-24 11:24:14 +08:00 committed by GitHub
parent c6a0936223
commit 39ca99d919
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 53 additions and 68 deletions

View File

@ -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 | | [<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 | | Edge >=79 | Firefox >=83 | Chrome >=69 | Safari >=12 |

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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