image/tdesign-vue-next-starter
1
0
Fork 1
mirror of https://github.com/Tencent/tdesign-vue-next-starter.git synced 2024-11-10 10:58:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat/tdvue3/new version (#16)

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
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 |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Edge >=79 | Firefox >=83 | Chrome >=69 | Safari >=12 |

2
package.json
View File

@ -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",

7
src/layouts/components/Header.vue
View File

@ -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;

2
src/layouts/components/Search.vue
View File

@ -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;
}

39
src/layouts/index.tsx
View File

@ -1,28 +1,20 @@
import { defineComponent } from 'vue';
import { mapGetters } from 'vuex';
import TdesignHeader from './components/Header.vue';
import TdesignBreadcrumb from './components/Breadcrumb.vue';
import TdesignFooter from './components/Footer.vue';
import TdesignSideNav from './components/SideNav';
import TdesignContent from './components/Content.vue';
import TDesignHeader from './components/Header.vue';
import TDesignBreadcrumb from './components/Breadcrumb.vue';
import TDesignFooter from './components/Footer.vue';
import TDesignSideNav from './components/SideNav';
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 />}
<TdesignContent />
{showBreadcrumb && <TDesignBreadcrumb />}
<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>
);
},

15
src/layouts/setting.vue
View File

@ -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-switch v-model="formData.isHeaderFixed" />
</t-form-item>
<t-form-item v-show="formData.layout !== 'top'" label="固定 Sidebar" name="isSidebarFixed">
<t-form-item v-show="formData.layout === 'mix'" 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;
}
}

5
src/main.ts
View File

@ -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);

4
src/pages/dashboard/base/index.vue
View File

@ -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);
});

5
src/pages/dashboard/detail/index.vue
View File

@ -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(() => {

2
src/pages/detail/advanced/index.vue
View File

@ -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;

2
src/pages/detail/deploy/index.vue
View File

@ -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,
};

6
src/pages/list/base/index.vue
View File

@ -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 }) {
deleteIdx.value = row.index;
handleClickDelete(row: { rowIndex: any }) {
deleteIdx.value = row.rowIndex;
confirmVisible.value = true;
},
};

10
src/pages/list/components/CommonTable.vue
View File

@ -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];
return `产品编号:${no}, 产品名称: ${name}`;
const { name } = data.value[deleteIdx.value];
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) {

2
src/pages/login/index.less
View File

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

2
src/pages/result/fail/index.vue
View File

@ -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>

1
src/store/modules/setting.ts
View File

@ -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;
},

5
src/style/layout.less
View File

@ -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;

2
vite.config.ts
View File

@ -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'),