image/tdesign-vue-next-starter
1
0
Fork 1
mirror of https://github.com/Tencent/tdesign-vue-next-starter.git synced 2024-12-23 09:29:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(setup): use setup script

Browse Source
This commit is contained in:
pengYYY 2022-02-16 19:56:36 +08:00
parent c02c4117a0
commit e3055c16b6
40 changed files with 1229 additions and 1806 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
cache.dockerfile
View File

@ -1,15 +0,0 @@
# 选择一个 Base 镜像
FROM node:16
# 设置工作目录
WORKDIR /space
# 将 by 中的文件列表 COPY 过来
COPY . .
# 根据 COPY 过来的文件进行依赖的安装
RUN npm i
# 设置好需要的环境变量
ENV NODE_PATH=/space/node_modules

20
docker/nginx.conf
View File

@ -1,20 +0,0 @@
server {
if ($request_method = HEAD) {
return 200;
}
location / {
alias /usr/share/nginx/html/;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
access_log /var/log/nginx/access.log main;
error_log /var/log/nginx/error.log error;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}

19
src/App.vue
View File

@ -1,26 +1,19 @@
<template> <template>
<router-view :class="[mode]" /> <router-view :class="[mode]" />
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, computed, onMounted } from 'vue'; import { computed, onMounted } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import config from '@/config/style'; import config from '@/config/style';
export default defineComponent({ const store = useStore();
setup() {
const store = useStore();
const mode = computed(() => { const mode = computed(() => {
return store.getters['setting/mode']; return store.getters['setting/mode'];
}); });
onMounted(() => { onMounted(() => {
store.dispatch('setting/changeTheme', { ...config }); store.dispatch('setting/changeTheme', { ...config });
});
return {
mode,
};
},
}); });
</script> </script>
<style lang="less"> <style lang="less">

82
src/components/card/Card.vue
View File

@ -52,8 +52,8 @@
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { computed, defineComponent, PropType } from 'vue'; import { computed, defineProps, PropType, defineEmits } from 'vue';
import { import {
ShopIcon, ShopIcon,
CalendarIcon, CalendarIcon,
@ -71,63 +71,35 @@ export interface CardProductType {
name: string; name: string;
} }
export default defineComponent({ const props = defineProps({
name: 'ListCardComponent',
components: {
ShopIcon,
CalendarIcon,
ServiceIcon,
UserAvatarIcon,
LaptopIcon,
MoreIcon,
AddIcon,
},
props: {
product: { product: {
type: Object as PropType<CardProductType>, type: Object as PropType<CardProductType>,
default: () => {
return {};
},
},
},
emits: ['manage-product', 'delete-item'],
setup(props, ctx) {
const { emit } = ctx;
const cardClass = computed(() => [
'list-card-item',
{
'list-card-item__disabled': !props.product.isSetup,
},
]);
const cardLogoClass = computed(() => [
'list-card-item_detail--logo',
{
'list-card-item_detail--logo__disabled': !props.product.isSetup,
},
]);
const cardControlClass = computed(() => [
'list-card-item_detail--control',
{
'list-card-item_detail--control__disabled': !props.product.isSetup,
},
]);
return {
cardClass,
cardLogoClass,
cardControlClass,
typeMap: ['A', 'B', 'C', 'D', 'E'],
handleClickManage(product) {
emit('manage-product', product);
},
handleClickDelete(product) {
emit('delete-item', product);
},
};
}, },
}); });
const emit = defineEmits(['manage-product', 'delete-item']);
const cardClass = computed(() => ['list-card-item', { 'list-card-item__disabled': !props.product.isSetup }]);
const cardLogoClass = computed(() => [
'list-card-item_detail--logo',
{ 'list-card-item_detail--logo__disabled': !props.product.isSetup },
]);
const cardControlClass = computed(() => [
'list-card-item_detail--control',
{ 'list-card-item_detail--control__disabled': !props.product.isSetup },
]);
const typeMap = ['A', 'B', 'C', 'D', 'E'];
const handleClickManage = (product: CardProductType) => {
emit('manage-product', product);
};
const handleClickDelete = (product: CardProductType) => {
emit('delete-item', product);
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

49
src/components/card/index.vue
View File

@ -16,44 +16,33 @@
<div v-if="size !== 'small'" class="card-spacer-bottom" /> <div v-if="size !== 'small'" class="card-spacer-bottom" />
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, PropType, computed } from 'vue'; import { defineProps, computed } from 'vue';
export default defineComponent({ const props = defineProps({
name: 'Card', title: String,
props: { subtitle: String,
title: { describe: String,
type: String as PropType<string>,
default: '',
},
subtitle: {
type: String as PropType<string>,
default: '',
},
compact: { compact: {
type: Boolean as PropType<boolean>, type: Boolean,
default: false, default: false,
}, },
describe: {
type: String as PropType<string>,
default: '',
},
size: { size: {
type: String as PropType<string>, type: String,
default: 'default', default: 'default',
}, },
border: { border: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
}, });
setup(props) {
const containerCls = computed(() => { const containerCls = computed(() => {
const { compact, border } = props; const { compact, border } = props;
return ['card-container', { 'card-container-compact': compact, 'card-container--border': border }]; return ['card-container', { 'card-container-compact': compact, 'card-container--border': border }];
}); });
const titleCls = computed(() => { const titleCls = computed(() => {
const { size } = props; const { size } = props;
return [ return [
'card-title', 'card-title',
@ -62,9 +51,9 @@ export default defineComponent({
'card-title--default': size !== 'small', 'card-title--default': size !== 'small',
}, },
]; ];
}); });
const titleTextCls = computed(() => { const titleTextCls = computed(() => {
const { size } = props; const { size } = props;
return [ return [
{ {
@ -72,14 +61,6 @@ export default defineComponent({
'card-title__text--default': size !== 'small', 'card-title__text--default': size !== 'small',
}, },
]; ];
});
return {
containerCls,
titleCls,
titleTextCls,
};
},
}); });
</script> </script>
<style lang="less"> <style lang="less">

25
src/components/color/index.vue
View File

@ -1,37 +1,28 @@
<template> <template>
<div :style="style" class="color-container" /> <div :style="style" class="color-container" />
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { computed, defineComponent, PropType } from 'vue'; import { defineProps, computed } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import { getBrandColor } from '@/config/color'; import { getBrandColor } from '@/config/color';
const panelColor = const panelColor =
'conic-gradient(from 90deg at 50% 50%, #FF0000 -19.41deg, #FF0000 18.76deg, #FF8A00 59.32deg, #FFE600 99.87deg, #14FF00 141.65deg, #00A3FF 177.72deg, #0500FF 220.23deg, #AD00FF 260.13deg, #FF00C7 300.69deg, #FF0000 340.59deg, #FF0000 378.76deg)'; 'conic-gradient(from 90deg at 50% 50%, #FF0000 -19.41deg, #FF0000 18.76deg, #FF8A00 59.32deg, #FFE600 99.87deg, #14FF00 141.65deg, #00A3FF 177.72deg, #0500FF 220.23deg, #AD00FF 260.13deg, #FF00C7 300.69deg, #FF0000 340.59deg, #FF0000 378.76deg)';
export default defineComponent({ const props = defineProps({
name: 'Color',
props: {
value: { value: {
type: String as PropType<string>, type: String,
default: 'default',
}, },
}, });
setup(props) {
const store = useStore();
const style = computed(() => { const store = useStore();
const style = computed(() => {
const { value } = props; const { value } = props;
const { colorList } = store.state.setting; const { colorList } = store.state.setting;
return { return {
background: value !== 'dynamic' ? getBrandColor(value, colorList)['@brand-color'] : panelColor, background: value !== 'dynamic' ? getBrandColor(value, colorList)['@brand-color'] : panelColor,
}; };
});
return {
style,
};
},
}); });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

39
src/components/result/index.vue
View File

@ -8,36 +8,22 @@
<slot /> <slot />
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, PropType, computed } from 'vue'; import { defineProps, computed } from 'vue';
import Result403Icon from '@/assets/assets-result-403.svg?component'; import Result403Icon from '@/assets/assets-result-403.svg?component';
import Result404Icon from '@/assets/assets-result-404.svg?component'; import Result404Icon from '@/assets/assets-result-404.svg?component';
import Result500Icon from '@/assets/assets-result-500.svg?component'; import Result500Icon from '@/assets/assets-result-500.svg?component';
import ResultIeIcon from '@/assets/assets-result-ie.svg?component'; import ResultIeIcon from '@/assets/assets-result-ie.svg?component';
import ResultWifiIcon from '@/assets/assets-result-wifi.svg?component'; import ResultWifiIcon from '@/assets/assets-result-wifi.svg?component';
export default defineComponent({ const props = defineProps({
name: 'Result', bgUrl: String,
props: { title: String,
bgUrl: { tip: String,
type: String as PropType<string>, type: String,
default: '', });
},
title: { const dynamicComponent = computed(() => {
type: String as PropType<string>,
default: '',
},
tip: {
type: String as PropType<string>,
default: '',
},
type: {
type: String as PropType<string>,
default: '',
},
},
setup(props) {
const dynamicComponent = computed(() => {
switch (props.type) { switch (props.type) {
case '403': case '403':
return Result403Icon; return Result403Icon;
@ -52,11 +38,6 @@ export default defineComponent({
default: default:
return Result403Icon; return Result403Icon;
} }
});
return {
dynamicComponent,
};
},
}); });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

24
src/components/thumbnail/index.vue
View File

@ -1,23 +1,18 @@
<template> <template>
<img :class="className" :src="url" /> <img :class="className" :src="url" />
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, computed, PropType } from 'vue'; import { computed, defineProps } from 'vue';
export default defineComponent({ const props = defineProps({
name: 'Thumbnail', url: String,
props: {
url: {
type: String as PropType<string>,
default: '',
},
type: { type: {
type: String as PropType<string>, type: String,
default: 'layout', default: 'layout',
}, },
}, });
setup(props) {
const className = computed(() => { const className = computed(() => {
const { type } = props; const { type } = props;
return [ return [
'thumbnail-container', 'thumbnail-container',
@ -26,9 +21,6 @@ export default defineComponent({
'thumbnail-layout': type === 'layout', 'thumbnail-layout': type === 'layout',
}, },
]; ];
});
return { className };
},
}); });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

37
src/components/trend/index.vue
View File

@ -20,27 +20,19 @@
<span>{{ describe }}</span> <span>{{ describe }}</span>
</span> </span>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, computed, PropType } from 'vue'; import { defineProps, computed } from 'vue';
export default defineComponent({ const props = defineProps({
name: 'Trend', type: String,
props: { describe: [String, Number],
type: {
type: String as PropType<string>,
default: '',
},
describe: {
type: [String, Number] as PropType<string | number>,
default: '',
},
isReverseColor: { isReverseColor: {
type: Boolean as PropType<boolean>, type: Boolean,
default: false, default: false,
}, },
}, });
setup(props) {
const containerCls = computed(() => { const containerCls = computed(() => {
const { isReverseColor, type } = props; const { isReverseColor, type } = props;
return [ return [
'trend-container', 'trend-container',
@ -50,16 +42,9 @@ export default defineComponent({
'trend-container__down': !isReverseColor && type === 'down', 'trend-container__down': !isReverseColor && type === 'down',
}, },
]; ];
});
const iconCls = computed(() => ['trend-icon-container']);
return {
containerCls,
iconCls,
};
},
}); });
const iconCls = computed(() => ['trend-icon-container']);
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

18
src/layouts/components/Breadcrumb.vue
View File

@ -6,17 +6,11 @@
</t-breadcrumb> </t-breadcrumb>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, computed } from 'vue'; import { computed } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
export default defineComponent({ const crumbs = computed(() => {
name: 'TdesignStarterBreadcrumb',
props: {
isVisible: Boolean,
},
setup() {
const crumbs = computed(() => {
const route = useRoute(); const route = useRoute();
const pathArray = route.path.split('/'); const pathArray = route.path.split('/');
@ -31,12 +25,6 @@ export default defineComponent({
return breadcrumbArray; return breadcrumbArray;
}, []); }, []);
return breadcrumbs; return breadcrumbs;
});
return {
crumbs,
};
},
}); });
</script> </script>
<style scoped> <style scoped>

12
src/layouts/components/Footer.vue
View File

@ -2,18 +2,8 @@
<div :class="prefix + '-footer'">Copyright @ 2021-{{ new Date().getFullYear() }} Tencent. All Rights Reserved</div> <div :class="prefix + '-footer'">Copyright @ 2021-{{ new Date().getFullYear() }} Tencent. All Rights Reserved</div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent } from 'vue';
import { prefix } from '@/config/global'; import { prefix } from '@/config/global';
export default defineComponent({
name: `${prefix}-footer`,
setup() {
return {
prefix,
};
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

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

@ -63,8 +63,8 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, PropType, computed, ref } from 'vue'; import { defineProps, PropType, computed } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import { useRouter, useRoute } from 'vue-router'; import { useRouter, useRoute } from 'vue-router';
@ -76,24 +76,17 @@ import Notice from './Notice.vue';
import Search from './Search.vue'; import Search from './Search.vue';
import MenuContent from './MenuContent'; import MenuContent from './MenuContent';
export default defineComponent({ const props = defineProps({
components: {
tLogoFull,
Notice,
Search,
MenuContent,
},
props: {
theme: { theme: {
type: String as PropType<string>, type: String,
default: '', default: '',
}, },
layout: { layout: {
type: String as PropType<string>, type: String,
default: 'top', default: 'top',
}, },
showLogo: { showLogo: {
type: Boolean as PropType<boolean>, type: Boolean,
default: true, default: true,
}, },
menu: { menu: {
@ -101,27 +94,27 @@ export default defineComponent({
default: () => [], default: () => [],
}, },
isFixed: { isFixed: {
type: Boolean as PropType<boolean>, type: Boolean,
default: false, default: false,
}, },
isCompact: { isCompact: {
type: Boolean as PropType<boolean>, type: Boolean,
default: false, default: false,
}, },
maxLevel: { maxLevel: {
type: Number as PropType<number>, type: Number,
default: 3, default: 3,
}, },
}, });
setup(props) {
const store = useStore();
const router = useRouter();
const toggleSettingPanel = () => { const store = useStore();
const router = useRouter();
const toggleSettingPanel = () => {
store.commit('setting/toggleSettingPanel', true); store.commit('setting/toggleSettingPanel', true);
}; };
const active = computed(() => { const active = computed(() => {
const route = useRoute(); const route = useRoute();
if (!route.path) { if (!route.path) {
return ''; return '';
@ -131,13 +124,11 @@ export default defineComponent({
.filter((item, index) => index <= props.maxLevel && index > 0) .filter((item, index) => index <= props.maxLevel && index > 0)
.map((item) => `/${item}`) .map((item) => `/${item}`)
.join(''); .join('');
}); });
const showMenu = computed(() => !(props.layout === 'mix' && props.showLogo)); const layoutCls = computed(() => [`${prefix}-header-layout`]);
const layoutCls = computed(() => [`${prefix}-header-layout`]); const menuCls = computed(() => {
const menuCls = computed(() => {
const { isFixed, layout, isCompact } = props; const { isFixed, layout, isCompact } = props;
return [ return [
{ {
@ -147,51 +138,27 @@ export default defineComponent({
[`${prefix}-header-menu-fixed-side-compact`]: layout === 'side' && isFixed && isCompact, [`${prefix}-header-menu-fixed-side-compact`]: layout === 'side' && isFixed && isCompact,
}, },
]; ];
});
const userVisible = ref(false);
const userVisibleChange = (value: boolean) => {
userVisible.value = value;
};
const changeCollapsed = () => {
store.commit('setting/toggleSidebarCompact');
};
const isSidebarCompact = computed(() => store.state.setting.isSidebarCompact);
const handleNav = (url) => {
router.push(url);
};
const handleLogout = () => {
router.push(`/login?redirect=${router.currentRoute.value.fullPath}`);
};
const navToGitHub = () => {
window.open('https://github.com/tencent/tdesign-vue-next-starter');
};
const navToHelper = () => {
window.open('http://tdesign.tencent.com/starter/docs/get-started');
};
return {
isSidebarCompact,
toggleSettingPanel,
active,
showMenu,
layoutCls,
userVisible,
userVisibleChange,
menuCls,
changeCollapsed,
handleNav,
handleLogout,
navToGitHub,
navToHelper,
};
},
}); });
const changeCollapsed = () => {
store.commit('setting/toggleSidebarCompact');
};
const handleNav = (url) => {
router.push(url);
};
const handleLogout = () => {
router.push(`/login?redirect=${router.currentRoute.value.fullPath}`);
};
const navToGitHub = () => {
window.open('https://github.com/tencent/tdesign-vue-next-starter');
};
const navToHelper = () => {
window.open('http://tdesign.tencent.com/starter/docs/get-started');
};
</script> </script>
<style lang="less"> <style lang="less">
@import '@/style/variables.less'; @import '@/style/variables.less';

30
src/layouts/components/Notice.vue
View File

@ -45,21 +45,19 @@
</t-popup> </t-popup>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, computed } from 'vue'; import { computed } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import { NotificationItem } from '@/interface'; import { NotificationItem } from '@/interface';
export default defineComponent({ const router = useRouter();
setup() { const store = useStore();
const router = useRouter(); const { msgData } = store.state.notification;
const store = useStore();
const { msgData } = store.state.notification;
const unreadMsg = computed(() => store.getters['notification/unreadMsg']); const unreadMsg = computed(() => store.getters['notification/unreadMsg']);
const setRead = (type: string, item?: NotificationItem) => { const setRead = (type: string, item?: NotificationItem) => {
const changeMsg = msgData; const changeMsg = msgData;
if (type === 'all') { if (type === 'all') {
changeMsg.forEach((e: NotificationItem) => { changeMsg.forEach((e: NotificationItem) => {
@ -73,19 +71,11 @@ export default defineComponent({
}); });
} }
store.commit('notification/setMsgData', changeMsg); store.commit('notification/setMsgData', changeMsg);
}; };
const goDetail = () => { const goDetail = () => {
router.push('/detail/secondary'); router.push('/detail/secondary');
}; };
return {
goDetail,
unreadMsg,
setRead,
};
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

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

@ -36,31 +36,21 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, ref, PropType } from 'vue'; import { ref, defineProps } from 'vue';
export default defineComponent({ const layout = defineProps({
props: { type: String,
layout: { });
type: String as PropType<string>,
}, const isSearchFocus = ref(false);
}, const searchData = ref('');
setup() { const changeSearchFocus = (value: boolean) => {
const isSearchFocus = ref(false);
const searchData = ref('');
const changeSearchFocus = (value: boolean) => {
if (!value) { if (!value) {
searchData.value = ''; searchData.value = '';
} }
isSearchFocus.value = value; isSearchFocus.value = value;
}; };
return {
isSearchFocus,
searchData,
changeSearchFocus,
};
},
});
</script> </script>
<style lang="less"> <style lang="less">
@import '@/style/variables.less'; @import '@/style/variables.less';

88
src/layouts/setting.vue
View File

@ -90,8 +90,8 @@
</div> </div>
</t-drawer> </t-drawer>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, ref, computed, watch, onMounted } from 'vue'; import { ref, computed, watch, onMounted } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import { ColorPicker } from 'vue-color-kit'; import { ColorPicker } from 'vue-color-kit';
import { MessagePlugin, PopupVisibleChangeContext } from 'tdesign-vue-next'; import { MessagePlugin, PopupVisibleChangeContext } from 'tdesign-vue-next';
@ -118,29 +118,25 @@ const MODE_OPTIONS = [
{ type: 'auto', text: '跟随系统' }, { type: 'auto', text: '跟随系统' },
]; ];
export default defineComponent({ const formData = ref({ ...STYLE_CONFIG });
name: 'DefaultLayoutSetting', const store = useStore();
components: { Thumbnail, ColorContainer, ColorPicker }, const colors = ref();
setup() { const isColoPickerDisplay = ref(false);
const formData = ref({ ...STYLE_CONFIG });
const store = useStore();
const colors = ref();
const isColoPickerDisplay = ref(false);
const showSettingPanel = computed({ const showSettingPanel = computed({
get() { get() {
return store.state.setting.showSettingPanel; return store.state.setting.showSettingPanel;
}, },
set(newVal) { set(newVal) {
store.commit('setting/toggleSettingPanel', newVal); store.commit('setting/toggleSettingPanel', newVal);
}, },
}); });
const mode = computed(() => { const mode = computed(() => {
return store.getters['setting/mode']; return store.getters['setting/mode'];
}); });
watch( watch(
() => colors.value, () => colors.value,
(newColor) => { (newColor) => {
const { hex } = newColor; const { hex } = newColor;
@ -160,11 +156,11 @@ export default defineComponent({
store.dispatch('setting/changeTheme', { ...setting, brandTheme: hex }); store.dispatch('setting/changeTheme', { ...setting, brandTheme: hex });
}, },
); );
const changeColor = (val) => {
const changeColor = (val) => {
const { hex } = val; const { hex } = val;
const { setting } = store.state; const { setting } = store.state;
// hex 主题色 // hex 主题色
const newPalette = Color.getPaletteByGradation({ const newPalette = Color.getPaletteByGradation({
colors: [hex], colors: [hex],
@ -178,21 +174,21 @@ export default defineComponent({
insertThemeStylesheet(hex, colorMap, mode); insertThemeStylesheet(hex, colorMap, mode);
store.dispatch('setting/changeTheme', { ...setting, brandTheme: hex }); store.dispatch('setting/changeTheme', { ...setting, brandTheme: hex });
}; };
onMounted(() => { onMounted(() => {
document.querySelector('.dynamic-color-btn').addEventListener('click', () => { document.querySelector('.dynamic-color-btn').addEventListener('click', () => {
isColoPickerDisplay.value = true; isColoPickerDisplay.value = true;
}); });
}); });
const onPopupVisibleChange = (visible: boolean, context: PopupVisibleChangeContext) => { const onPopupVisibleChange = (visible: boolean, context: PopupVisibleChangeContext) => {
if (!visible && context.trigger === 'document') { if (!visible && context.trigger === 'document') {
isColoPickerDisplay.value = visible; isColoPickerDisplay.value = visible;
} }
}; };
const handleCopy = () => { const handleCopy = () => {
const text = JSON.stringify(formData.value, null, 4); const text = JSON.stringify(formData.value, null, 4);
const { toClipboard } = useClipboard(); const { toClipboard } = useClipboard();
toClipboard(text) toClipboard(text)
@ -204,8 +200,8 @@ export default defineComponent({
MessagePlugin.closeAll(); MessagePlugin.closeAll();
MessagePlugin.error('复制失败'); MessagePlugin.error('复制失败');
}); });
}; };
const getModeIcon = (mode: string) => { const getModeIcon = (mode: string) => {
if (mode === 'light') { if (mode === 'light') {
return SettingLightIcon; return SettingLightIcon;
} }
@ -213,38 +209,22 @@ export default defineComponent({
return SettingDarkIcon; return SettingDarkIcon;
} }
return SettingAutoIcon; return SettingAutoIcon;
}; };
const handleCloseDrawer = () => { const handleCloseDrawer = () => {
store.commit('setting/toggleSettingPanel', false); store.commit('setting/toggleSettingPanel', false);
}; };
return {
mode, const getThumbnailUrl = (name: string): string => {
changeColor,
isColoPickerDisplay,
onPopupVisibleChange,
MODE_OPTIONS,
LAYOUT_OPTION,
COLOR_OPTIONS,
formData,
showSettingPanel,
handleCopy,
getModeIcon,
handleCloseDrawer,
getThumbnailUrl(name: string): string {
return `https://tdesign.gtimg.com/tdesign-pro/setting/${name}.png`; return `https://tdesign.gtimg.com/tdesign-pro/setting/${name}.png`;
};
watch(
() => formData.value,
(newVal) => {
store.dispatch('setting/changeTheme', newVal);
}, },
}; );
},
watch: {
formData: {
handler(newVal) {
this.$store.dispatch('setting/changeTheme', newVal);
},
deep: true,
},
},
});
</script> </script>
<style lang="less"> <style lang="less">
@import '@/style/variables'; @import '@/style/variables';

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

@ -2,7 +2,7 @@
<div> <div>
<t-row :gutter="[16, 16]"> <t-row :gutter="[16, 16]">
<t-col v-for="(item, index) in PANE_LIST" :key="item.title" :xs="6" :xl="3"> <t-col v-for="(item, index) in PANE_LIST" :key="item.title" :xs="6" :xl="3">
<card :subtitle="item.title" :style="{ height: '168px' }" :class="{ 'main-color': index == 0 }" size="small"> <card :subtitle="item.title" :style="{ height: '168px' }" :class="{ 'main-color': index == 0 }">
<div class="dashboard-item"> <div class="dashboard-item">
<div class="dashboard-item-top"> <div class="dashboard-item-top">
<span :style="{ fontSize: `${resizeTime * 36}px` }">{{ item.number }}</span> <span :style="{ fontSize: `${resizeTime * 36}px` }">{{ item.number }}</span>
@ -202,8 +202,8 @@
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, onMounted, watch, ref, onUnmounted, nextTick, computed } from 'vue'; import { onMounted, watch, ref, onUnmounted, nextTick, computed } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import * as echarts from 'echarts/core'; import * as echarts from 'echarts/core';
@ -241,83 +241,76 @@ const getThisMonth = (checkedValues?: string[]) => {
return `${date.getFullYear()}-${startMonth} 至 ${date2.getFullYear()}-${endMonth}`; return `${date.getFullYear()}-${startMonth} 至 ${date2.getFullYear()}-${endMonth}`;
}; };
export default defineComponent({ const store = useStore();
name: 'DashboardBase', const resizeTime = ref(1);
components: {
Card,
Trend,
},
setup() {
const store = useStore();
const resizeTime = ref(1);
const chartColors = computed(() => store.state.setting.chartColors); const chartColors = computed(() => store.state.setting.chartColors);
// moneyCharts // moneyCharts
let moneyContainer: HTMLElement; let moneyContainer: HTMLElement;
let moneyChart: echarts.ECharts; let moneyChart: echarts.ECharts;
const renderMoneyChart = () => { const renderMoneyChart = () => {
if (!moneyContainer) { if (!moneyContainer) {
moneyContainer = document.getElementById('moneyContainer'); moneyContainer = document.getElementById('moneyContainer');
} }
moneyChart = echarts.init(moneyContainer); moneyChart = echarts.init(moneyContainer);
moneyChart.setOption(constructInitDashboardDataset('line')); moneyChart.setOption(constructInitDashboardDataset('line'));
}; };
// refundCharts // refundCharts
let refundContainer: HTMLElement; let refundContainer: HTMLElement;
let refundChart: echarts.ECharts; let refundChart: echarts.ECharts;
const renderRefundChart = () => { const renderRefundChart = () => {
if (!refundContainer) { if (!refundContainer) {
refundContainer = document.getElementById('refundContainer'); refundContainer = document.getElementById('refundContainer');
} }
refundChart = echarts.init(refundContainer); refundChart = echarts.init(refundContainer);
refundChart.setOption(constructInitDashboardDataset('bar')); refundChart.setOption(constructInitDashboardDataset('bar'));
}; };
// stokeCharts // stokeCharts
let stokeContainer: HTMLElement; let stokeContainer: HTMLElement;
let stokeChart: echarts.ECharts; let stokeChart: echarts.ECharts;
const renderStokeChart = () => { const renderStokeChart = () => {
if (!stokeContainer) { if (!stokeContainer) {
stokeContainer = document.getElementById('stokeContainer'); stokeContainer = document.getElementById('stokeContainer');
} }
stokeChart = echarts.init(stokeContainer); stokeChart = echarts.init(stokeContainer);
stokeChart.setOption(constructInitDataset({ dateTime: LAST_7_DAYS, ...chartColors.value })); stokeChart.setOption(constructInitDataset({ dateTime: LAST_7_DAYS, ...chartColors.value }));
}; };
// monitorChart // monitorChart
let monitorContainer: HTMLElement; let monitorContainer: HTMLElement;
let monitorChart: echarts.ECharts; let monitorChart: echarts.ECharts;
const renderMonitorChart = () => { const renderMonitorChart = () => {
if (!monitorContainer) { if (!monitorContainer) {
monitorContainer = document.getElementById('monitorContainer'); monitorContainer = document.getElementById('monitorContainer');
} }
monitorChart = echarts.init(monitorContainer); monitorChart = echarts.init(monitorContainer);
monitorChart.setOption(getLineChartDataSet({ ...chartColors.value })); monitorChart.setOption(getLineChartDataSet({ ...chartColors.value }));
}; };
// monitorChart // monitorChart
let countContainer: HTMLElement; let countContainer: HTMLElement;
let countChart: echarts.ECharts; let countChart: echarts.ECharts;
const renderCountChart = () => { const renderCountChart = () => {
if (!countContainer) { if (!countContainer) {
countContainer = document.getElementById('countContainer'); countContainer = document.getElementById('countContainer');
} }
countChart = echarts.init(countContainer); countChart = echarts.init(countContainer);
countChart.setOption(getPieChartDataSet(chartColors.value)); countChart.setOption(getPieChartDataSet(chartColors.value));
}; };
const renderCharts = () => { const renderCharts = () => {
renderMoneyChart(); renderMoneyChart();
renderRefundChart(); renderRefundChart();
renderStokeChart(); renderStokeChart();
renderMonitorChart(); renderMonitorChart();
renderCountChart(); renderCountChart();
}; };
// chartSize update // chartSize update
const updateContainer = () => { const updateContainer = () => {
if (document.documentElement.clientWidth >= 1400 && document.documentElement.clientWidth < 1920) { if (document.documentElement.clientWidth >= 1400 && document.documentElement.clientWidth < 1920) {
resizeTime.value = Number((document.documentElement.clientWidth / 2080).toFixed(2)); resizeTime.value = Number((document.documentElement.clientWidth / 2080).toFixed(2));
} else if (document.documentElement.clientWidth < 1080) { } else if (document.documentElement.clientWidth < 1080) {
@ -345,30 +338,30 @@ export default defineComponent({
width: resizeTime.value * 326, width: resizeTime.value * 326,
height: resizeTime.value * 326, height: resizeTime.value * 326,
}); });
}; };
onMounted(() => { onMounted(() => {
renderCharts(); renderCharts();
nextTick(() => { nextTick(() => {
updateContainer(); updateContainer();
}); });
window.addEventListener('resize', updateContainer, false); window.addEventListener('resize', updateContainer, false);
}); });
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('resize', updateContainer); window.removeEventListener('resize', updateContainer);
}); });
const currentMonth = ref(getThisMonth()); const currentMonth = ref(getThisMonth());
watch( watch(
() => store.state.setting.brandTheme, () => store.state.setting.brandTheme,
() => { () => {
changeChartsTheme([refundChart, stokeChart, monitorChart, countChart]); changeChartsTheme([refundChart, stokeChart, monitorChart, countChart]);
}, },
); );
watch( watch(
() => store.state.setting.mode, () => store.state.setting.mode,
() => { () => {
[moneyChart, refundChart, stokeChart, monitorChart, countChart].forEach((item) => { [moneyChart, refundChart, stokeChart, monitorChart, countChart].forEach((item) => {
@ -377,33 +370,21 @@ export default defineComponent({
renderCharts(); renderCharts();
}, },
); );
return { const onCurrencyChange = (checkedValues: string[]) => {
resizeTime,
currentMonth,
LAST_7_DAYS,
PANE_LIST,
BUY_TEND_LIST,
SALE_TEND_LIST,
SALE_COLUMNS,
BUY_COLUMNS,
onCurrencyChange(checkedValues: string[]) {
currentMonth.value = getThisMonth(checkedValues); currentMonth.value = getThisMonth(checkedValues);
monitorChart.setOption(getLineChartDataSet({ dateTime: checkedValues, ...chartColors.value })); monitorChart.setOption(getLineChartDataSet({ dateTime: checkedValues, ...chartColors.value }));
}, };
onStokeDataChange(checkedValues: string[]) { const onStokeDataChange = (checkedValues: string[]) => {
stokeChart.setOption(constructInitDataset({ dateTime: checkedValues, ...chartColors.value })); stokeChart.setOption(constructInitDataset({ dateTime: checkedValues, ...chartColors.value }));
}, };
rehandleClickOp(val: MouseEvent) { const rehandleClickOp = (val: MouseEvent) => {
console.log(val); console.log(val);
}, };
getRankClass(index: number) { const getRankClass = (index: number) => {
return ['dashboard-rank', { 'dashboard-rank__top': index < 3 }]; return ['dashboard-rank', { 'dashboard-rank__top': index < 3 }];
}, };
};
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import './index.less'; @import './index.less';

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

@ -57,8 +57,8 @@
</card> </card>
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, nextTick, onMounted, onUnmounted, watch, computed } from 'vue'; import { nextTick, onMounted, onUnmounted, watch, computed } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import * as echarts from 'echarts/core'; import * as echarts from 'echarts/core';
@ -76,36 +76,28 @@ import Card from '@/components/card/index.vue';
echarts.use([GridComponent, LegendComponent, TooltipComponent, LineChart, ScatterChart, CanvasRenderer]); echarts.use([GridComponent, LegendComponent, TooltipComponent, LineChart, ScatterChart, CanvasRenderer]);
export default defineComponent({ const store = useStore();
name: 'DashboardDetail', const chartColors = computed(() => store.state.setting.chartColors);
components: { // lineChart logic
Card, let lineContainer: HTMLElement;
Trend, let lineChart: echarts.ECharts;
ProductCard, const renderLineChart = () => {
},
setup() {
const store = useStore();
const chartColors = computed(() => store.state.setting.chartColors);
// lineChart logic
let lineContainer: HTMLElement;
let lineChart: echarts.ECharts;
const renderLineChart = () => {
lineContainer = document.getElementById('lineContainer'); lineContainer = document.getElementById('lineContainer');
lineChart = echarts.init(lineContainer); lineChart = echarts.init(lineContainer);
lineChart.setOption(getFolderLineDataSet({ ...chartColors.value })); lineChart.setOption(getFolderLineDataSet({ ...chartColors.value }));
}; };
// scatterChart logic // scatterChart logic
let scatterContainer: HTMLElement; let scatterContainer: HTMLElement;
let scatterChart: echarts.ECharts; let scatterChart: echarts.ECharts;
const renderScatterChart = () => { const renderScatterChart = () => {
scatterContainer = document.getElementById('scatterContainer'); scatterContainer = document.getElementById('scatterContainer');
scatterChart = echarts.init(scatterContainer); scatterChart = echarts.init(scatterContainer);
scatterChart.setOption(getScatterDataSet({ ...chartColors.value })); scatterChart.setOption(getScatterDataSet({ ...chartColors.value }));
}; };
// chartSize update // chartSize update
const updateContainer = () => { const updateContainer = () => {
lineChart?.resize({ lineChart?.resize({
width: lineContainer.clientWidth, width: lineContainer.clientWidth,
height: lineContainer.clientHeight, height: lineContainer.clientHeight,
@ -114,53 +106,47 @@ export default defineComponent({
width: scatterContainer.clientWidth, width: scatterContainer.clientWidth,
height: scatterContainer.clientHeight, height: scatterContainer.clientHeight,
}); });
}; };
const renderCharts = () => { const renderCharts = () => {
renderScatterChart(); renderScatterChart();
renderLineChart(); renderLineChart();
}; };
onMounted(() => { onMounted(() => {
renderCharts(); renderCharts();
window.addEventListener('resize', updateContainer, false); window.addEventListener('resize', updateContainer, false);
nextTick(() => { nextTick(() => {
updateContainer(); updateContainer();
}); });
}); });
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('resize', updateContainer); window.removeEventListener('resize', updateContainer);
}); });
watch( watch(
() => store.state.setting.mode, () => store.state.setting.mode,
() => { () => {
renderCharts(); renderCharts();
}, },
); );
watch( watch(
() => store.state.setting.brandTheme, () => store.state.setting.brandTheme,
() => { () => {
changeChartsTheme([lineChart, scatterChart]); changeChartsTheme([lineChart, scatterChart]);
}, },
); );
return { const onSatisfyChange = () => {
LAST_7_DAYS,
PRODUCT_LIST,
PANE_LIST_DATA,
onSatisfyChange() {
scatterChart.setOption(getScatterDataSet({ ...chartColors.value })); scatterChart.setOption(getScatterDataSet({ ...chartColors.value }));
}, };
onMaterialChange(value: string[]) {
const onMaterialChange = (value: string[]) => {
const chartColors = computed(() => store.state.setting.chartColors); const chartColors = computed(() => store.state.setting.chartColors);
lineChart.setOption(getFolderLineDataSet({ dateTime: value, ...chartColors.value })); lineChart.setOption(getFolderLineDataSet({ dateTime: value, ...chartColors.value }));
}, };
};
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import url('./index.less'); @import url('./index.less');

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

@ -109,42 +109,35 @@
</t-dialog> </t-dialog>
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import { prefix } from '@/config/global'; import { prefix } from '@/config/global';
import { BASE_INFO_DATA, TABLE_COLUMNS_DATA, PRODUCT_LIST } from './constants'; import { BASE_INFO_DATA, TABLE_COLUMNS_DATA as columns, PRODUCT_LIST } from './constants';
import request from '@/utils/request'; import request from '@/utils/request';
import { ResDataType } from '@/interface'; import { ResDataType } from '@/interface';
import Card from '@/components/card/index.vue'; import Card from '@/components/card/index.vue';
import Product from './components/Product.vue'; import Product from './components/Product.vue';
export default defineComponent({ const data = ref([]);
name: 'DetailAdvanced', const pagination = ref({
components: {
Card,
Product,
},
setup() {
const data = ref([]);
const pagination = ref({
defaultPageSize: 10, defaultPageSize: 10,
total: 100, total: 100,
defaultCurrent: 1, defaultCurrent: 1,
}); });
const updateCurrent = ref(0); const updateCurrent = ref(0);
const stepUpdate = () => { const stepUpdate = () => {
setInterval(() => { setInterval(() => {
if (updateCurrent.value > 5) { if (updateCurrent.value > 5) {
updateCurrent.value = -1; updateCurrent.value = -1;
} }
updateCurrent.value += 1; updateCurrent.value += 1;
}, 2000); }, 2000);
}; };
const fetchData = async () => { const fetchData = async () => {
try { try {
const res: ResDataType = await request.get('/api/get-purchase-list'); const res: ResDataType = await request.get('/api/get-purchase-list');
if (res.code === 0) { if (res.code === 0) {
@ -158,42 +151,29 @@ export default defineComponent({
} catch (e) { } catch (e) {
console.log(e); console.log(e);
} }
}; };
onMounted(() => { onMounted(() => {
stepUpdate(); stepUpdate();
fetchData(); fetchData();
});
const visible = ref(false);
return {
BASE_INFO_DATA,
prefix,
PRODUCT_LIST,
columns: TABLE_COLUMNS_DATA,
data,
pagination,
visible,
updateCurrent,
sortChange(val) {
console.log(val);
},
rehandleChange(changeParams, triggerAndData) {
console.log('统一Change', changeParams, triggerAndData);
},
listClick() {
visible.value = true;
},
deleteClickOp(columns) {
data.value.splice(columns.rowIndex, 1);
},
onConfirm() {
visible.value = false;
},
};
},
}); });
const visible = ref(false);
const sortChange = (val) => {
console.log(val);
};
const rehandleChange = (changeParams, triggerAndData) => {
console.log('统一Change', changeParams, triggerAndData);
};
const listClick = () => {
visible.value = true;
};
const deleteClickOp = (columns) => {
data.value.splice(columns.rowIndex, 1);
};
const onConfirm = () => {
visible.value = false;
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import url('./index.less'); @import url('./index.less');

13
src/pages/detail/base/index.vue
View File

@ -26,8 +26,7 @@
</card> </card>
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent } from 'vue';
import Card from '@/components/card/index.vue'; import Card from '@/components/card/index.vue';
const BASE_INFO_DATA = [ const BASE_INFO_DATA = [
@ -108,16 +107,6 @@ const BASE_INFO_DATA = [
type: null, type: null,
}, },
]; ];
export default defineComponent({
name: 'ListBase',
components: { Card },
data() {
return {
BASE_INFO_DATA,
};
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import url('./index.less'); @import url('./index.less');

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

@ -68,8 +68,8 @@
</t-dialog> </t-dialog>
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, onMounted, onUnmounted, ref, watch, computed } from 'vue'; import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import * as echarts from 'echarts/core'; import * as echarts from 'echarts/core';
@ -78,7 +78,7 @@ import { BarChart, LineChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers'; import { CanvasRenderer } from 'echarts/renderers';
import { changeChartsTheme, getSmoothLineDataSet, get2ColBarChartDataSet } from '../../dashboard/base/index'; import { changeChartsTheme, getSmoothLineDataSet, get2ColBarChartDataSet } from '../../dashboard/base/index';
import { BASE_INFO_DATA, TABLE_COLUMNS } from './constants'; import { BASE_INFO_DATA, TABLE_COLUMNS as columns } from './constants';
import { prefix } from '@/config/global'; import { prefix } from '@/config/global';
import Card from '@/components/card/index.vue'; import Card from '@/components/card/index.vue';
@ -96,21 +96,17 @@ echarts.use([
CanvasRenderer, CanvasRenderer,
]); ]);
export default defineComponent({ const store = useStore();
name: 'DetailDeploy',
components: { Card },
setup() {
const store = useStore();
const chartColors = computed(() => store.state.setting.chartColors); const chartColors = computed(() => store.state.setting.chartColors);
const data = ref([]); const data = ref([]);
const pagination = ref({ const pagination = ref({
defaultPageSize: 10, defaultPageSize: 10,
total: 100, total: 100,
defaultCurrent: 1, defaultCurrent: 1,
}); });
const fetchData = async () => { const fetchData = async () => {
try { try {
const res: ResDataType = await request.get('/api/get-project-list'); const res: ResDataType = await request.get('/api/get-project-list');
if (res.code === 0) { if (res.code === 0) {
@ -124,34 +120,34 @@ export default defineComponent({
} catch (e) { } catch (e) {
console.log(e); console.log(e);
} }
}; };
const visible = ref(false); const visible = ref(false);
// monitorChart logic // monitorChart logic
let monitorContainer: HTMLElement; let monitorContainer: HTMLElement;
let monitorChart: echarts.ECharts; let monitorChart: echarts.ECharts;
onMounted(() => { onMounted(() => {
monitorContainer = document.getElementById('monitorContainer'); monitorContainer = document.getElementById('monitorContainer');
monitorChart = echarts.init(monitorContainer); monitorChart = echarts.init(monitorContainer);
monitorChart.setOption(getSmoothLineDataSet({ ...chartColors.value })); monitorChart.setOption(getSmoothLineDataSet({ ...chartColors.value }));
setInterval(() => { setInterval(() => {
monitorChart.setOption(getSmoothLineDataSet({ ...chartColors.value })); monitorChart.setOption(getSmoothLineDataSet({ ...chartColors.value }));
}, 3000); }, 3000);
}); });
// dataChart logic // dataChart logic
let dataContainer: HTMLElement; let dataContainer: HTMLElement;
let dataChart: echarts.ECharts; let dataChart: echarts.ECharts;
onMounted(() => { onMounted(() => {
dataContainer = document.getElementById('dataContainer'); dataContainer = document.getElementById('dataContainer');
dataChart = echarts.init(dataContainer); dataChart = echarts.init(dataContainer);
dataChart.setOption(get2ColBarChartDataSet({ ...chartColors.value })); dataChart.setOption(get2ColBarChartDataSet({ ...chartColors.value }));
}); });
const intervalTimer = null; const intervalTimer = null;
/// / chartSize update /// / chartSize update
const updateContainer = () => { const updateContainer = () => {
monitorChart.resize({ monitorChart.resize({
width: monitorContainer.clientWidth, width: monitorContainer.clientWidth,
height: monitorContainer.clientHeight, height: monitorContainer.clientHeight,
@ -160,54 +156,44 @@ export default defineComponent({
width: dataContainer.clientWidth, width: dataContainer.clientWidth,
height: dataContainer.clientHeight, height: dataContainer.clientHeight,
}); });
}; };
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('resize', updateContainer); window.removeEventListener('resize', updateContainer);
clearInterval(intervalTimer); clearInterval(intervalTimer);
}); });
const onAlertChange = () => { const onAlertChange = () => {
dataChart.setOption(get2ColBarChartDataSet({ ...chartColors.value })); dataChart.setOption(get2ColBarChartDataSet({ ...chartColors.value }));
}; };
onMounted(() => { onMounted(() => {
fetchData(); fetchData();
window.addEventListener('resize', updateContainer, false); window.addEventListener('resize', updateContainer, false);
}); });
watch( watch(
() => store.state.setting.brandTheme, () => store.state.setting.brandTheme,
() => { () => {
changeChartsTheme([monitorChart, dataChart]); changeChartsTheme([monitorChart, dataChart]);
}, },
); );
return {
prefix, const sortChange = (val) => {
BASE_INFO_DATA,
columns: TABLE_COLUMNS,
data,
pagination,
visible,
sortChange(val) {
console.log(val); console.log(val);
}, };
rehandleChange(changeParams, triggerAndData) { const rehandleChange = (changeParams, triggerAndData) => {
console.log('统一Change', changeParams, triggerAndData); console.log('统一Change', changeParams, triggerAndData);
}, };
listClick() { const listClick = () => {
visible.value = true; visible.value = true;
}, };
onConfirm() { const onConfirm = () => {
visible.value = false; visible.value = false;
}, };
deleteClickOp(e) { const deleteClickOp = (e) => {
data.value.splice(e.rowIndex, 1); data.value.splice(e.rowIndex, 1);
}, };
onAlertChange,
};
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import url('../base/index.less'); @import url('../base/index.less');

50
src/pages/detail/secondary/index.vue
View File

@ -49,8 +49,8 @@
/> />
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, ref, computed, ComputedRef } from 'vue'; import { ref, computed, ComputedRef } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import { NOTIFICATION_TYPES } from '@/constants'; import { NOTIFICATION_TYPES } from '@/constants';
import { NotificationItem } from '@/interface'; import { NotificationItem } from '@/interface';
@ -71,34 +71,28 @@ const TAB_LIST = [
}, },
]; ];
export default defineComponent({ const tabValue = ref('msgData');
name: 'DetailSecondary',
components: {
EmptyIcon,
},
setup() {
const tabValue = ref('msgData');
const visible = ref(false); const visible = ref(false);
const selectedItem = ref<NotificationItem>(); const selectedItem = ref<NotificationItem>();
const store = useStore(); const store = useStore();
const { msgData } = store.state.notification; const { msgData } = store.state.notification;
const msgDataList: ComputedRef<NotificationItem[]> = computed(() => { const msgDataList: ComputedRef<NotificationItem[]> = computed(() => {
if (tabValue.value === 'msgData') return msgData; if (tabValue.value === 'msgData') return msgData;
if (tabValue.value === 'unreadMsg') return store.getters['notification/unreadMsg']; if (tabValue.value === 'unreadMsg') return store.getters['notification/unreadMsg'];
if (tabValue.value === 'readMsg') return store.getters['notification/readMsg']; if (tabValue.value === 'readMsg') return store.getters['notification/readMsg'];
return []; return [];
}); });
const handleClickDeleteBtn = (item: NotificationItem) => { const handleClickDeleteBtn = (item: NotificationItem) => {
visible.value = true; visible.value = true;
selectedItem.value = item; selectedItem.value = item;
}; };
const setReadStatus = (item: NotificationItem) => { const setReadStatus = (item: NotificationItem) => {
const changeMsg = msgData; const changeMsg = msgData;
changeMsg.forEach((e: NotificationItem) => { changeMsg.forEach((e: NotificationItem) => {
if (e.id === item.id) { if (e.id === item.id) {
@ -106,9 +100,9 @@ export default defineComponent({
} }
}); });
store.commit('notification/setMsgData', changeMsg); store.commit('notification/setMsgData', changeMsg);
}; };
const deleteMsg = () => { const deleteMsg = () => {
const item = selectedItem.value; const item = selectedItem.value;
const changeMsg = msgData; const changeMsg = msgData;
changeMsg.forEach((e: NotificationItem, index: number) => { changeMsg.forEach((e: NotificationItem, index: number) => {
@ -118,21 +112,7 @@ export default defineComponent({
}); });
visible.value = false; visible.value = false;
store.commit('notification/setMsgData', changeMsg); store.commit('notification/setMsgData', changeMsg);
}; };
return {
TAB_LIST,
NOTIFICATION_TYPES,
visible,
selectedItem,
tabValue,
msgDataList,
handleClickDeleteBtn,
setReadStatus,
deleteMsg,
};
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import url('./index.less'); @import url('./index.less');

41
src/pages/form/base/index.vue
View File

@ -154,30 +154,22 @@
</div> </div>
</t-form> </t-form>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, ref } from 'vue'; import { ref } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next'; import { MessagePlugin } from 'tdesign-vue-next';
import { FORM_RULES, INITIAL_DATA, TYPE_OPTIONS, PARTY_A_OPTIONS, PARTY_B_OPTIONS } from './constants'; import { FORM_RULES, INITIAL_DATA, TYPE_OPTIONS, PARTY_A_OPTIONS, PARTY_B_OPTIONS } from './constants';
export default defineComponent({ const formData = ref({ ...INITIAL_DATA });
name: 'FormBase',
setup() { const onReset = () => {
const formData = ref({ ...INITIAL_DATA });
return {
TYPE_OPTIONS,
PARTY_A_OPTIONS,
PARTY_B_OPTIONS,
FORM_RULES,
formData,
onReset() {
MessagePlugin.warning('取消新建'); MessagePlugin.warning('取消新建');
}, };
onSubmit({ validateResult }) { const onSubmit = ({ validateResult }) => {
if (validateResult === true) { if (validateResult === true) {
MessagePlugin.success('新建成功'); MessagePlugin.success('新建成功');
} }
}, };
beforeUpload(file) { const beforeUpload = (file) => {
if (!/\.(pdf)$/.test(file.name)) { if (!/\.(pdf)$/.test(file.name)) {
MessagePlugin.warning('请上传pdf文件'); MessagePlugin.warning('请上传pdf文件');
return false; return false;
@ -187,17 +179,14 @@ export default defineComponent({
return false; return false;
} }
return true; return true;
}, };
handleFail({ file }) { const handleFail = ({ file }) => {
MessagePlugin.error(`文件 ${file.name} 上传失败`); MessagePlugin.error(`文件 ${file.name} 上传失败`);
}, };
// 用于格式化接口响应值，error 会被用于上传失败的提示文字；url 表示文件/图片地址 // 用于格式化接口响应值，error 会被用于上传失败的提示文字；url 表示文件/图片地址
formatResponse(res) { const formatResponse = (res) => {
return { ...res, error: '上传失败，请重试', url: res.url }; return { ...res, error: '上传失败，请重试', url: res.url };
}, };
};
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import url('./index.less'); @import url('./index.less');

45
src/pages/form/step/index.vue
View File

@ -139,8 +139,8 @@
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, ref, computed } from 'vue'; import { ref, computed } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { ValidateResultContext } from 'tdesign-vue-next'; import { ValidateResultContext } from 'tdesign-vue-next';
import Card from '@/components/card/index.vue'; import Card from '@/components/card/index.vue';
@ -155,16 +155,12 @@ import {
INITIAL_DATA3, INITIAL_DATA3,
} from './constants'; } from './constants';
export default defineComponent({ const formData1 = ref({ ...INITIAL_DATA1 });
name: 'FormStep', const formData2 = ref({ ...INITIAL_DATA2 });
components: { Card }, const formData3 = ref({ ...INITIAL_DATA3 });
setup() { const activeForm = ref(0);
const formData1 = ref({ ...INITIAL_DATA1 });
const formData2 = ref({ ...INITIAL_DATA2 });
const formData3 = ref({ ...INITIAL_DATA3 });
const activeForm = ref(0);
const amount = computed(() => { const amount = computed(() => {
if (formData1.value.name === '1') { if (formData1.value.name === '1') {
return '565421'; return '565421';
} }
@ -175,33 +171,20 @@ export default defineComponent({
return '109824'; return '109824';
} }
return '--'; return '--';
}); });
return { const onSubmit = (result: ValidateResultContext<FormData>, val: number) => {
NAME_OPTIONS,
TYPE_OPTIONS,
ADDRESS_OPTIONS,
FORM_RULES,
formData1,
formData2,
formData3,
activeForm,
amount,
onSubmit(result: ValidateResultContext<FormData>, val: number) {
if (result.validateResult === true) { if (result.validateResult === true) {
activeForm.value = val; activeForm.value = val;
} }
}, };
onReset(val: number) { const onReset = (val: number) => {
activeForm.value = val; activeForm.value = val;
}, };
complete() { const complete = () => {
const router = useRouter(); const router = useRouter();
router.replace({ path: '/detail/advanced' }); router.replace({ path: '/detail/advanced' });
}, };
};
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import url('./index.less'); @import url('./index.less');

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

@ -64,8 +64,8 @@
/> />
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, ref, onMounted, computed } from 'vue'; import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { SearchIcon } from 'tdesign-icons-vue-next'; import { SearchIcon } from 'tdesign-icons-vue-next';
import { MessagePlugin } from 'tdesign-vue-next'; import { MessagePlugin } from 'tdesign-vue-next';
@ -78,25 +78,17 @@ import request from '@/utils/request';
import { COLUMNS } from './constants'; import { COLUMNS } from './constants';
export default defineComponent({ const data = ref([]);
name: 'ListBaseCard', const pagination = ref({
components: {
Card,
SearchIcon,
Trend,
},
setup() {
const data = ref([]);
const pagination = ref({
defaultPageSize: 20, defaultPageSize: 20,
total: 100, total: 100,
defaultCurrent: 1, defaultCurrent: 1,
}); });
const searchValue = ref(''); const searchValue = ref('');
const dataLoading = ref(false); const dataLoading = ref(false);
const fetchData = async () => { const fetchData = async () => {
dataLoading.value = true; dataLoading.value = true;
try { try {
const res: ResDataType = await request.get('/api/get-list'); const res: ResDataType = await request.get('/api/get-list');
@ -113,32 +105,32 @@ export default defineComponent({
} finally { } finally {
dataLoading.value = false; dataLoading.value = false;
} }
}; };
const deleteIdx = ref(-1); const deleteIdx = ref(-1);
const confirmBody = computed(() => { const confirmBody = computed(() => {
if (deleteIdx.value > -1) { if (deleteIdx.value > -1) {
const { name } = data.value[deleteIdx.value]; const { name } = data.value[deleteIdx.value];
return `删除后，${name}的所有合同信息将被清空，且无法恢复`; return `删除后，${name}的所有合同信息将被清空，且无法恢复`;
} }
return ''; return '';
}); });
onMounted(() => { onMounted(() => {
fetchData(); fetchData();
}); });
const confirmVisible = ref(false); const confirmVisible = ref(false);
const selectedRowKeys = ref([1, 2]); const selectedRowKeys = ref([1, 2]);
const router = useRouter(); const router = useRouter();
const resetIdx = () => { const resetIdx = () => {
deleteIdx.value = -1; deleteIdx.value = -1;
}; };
const onConfirmDelete = () => { const onConfirmDelete = () => {
// 真实业务请发起请求 // 真实业务请发起请求
data.value.splice(deleteIdx.value, 1); data.value.splice(deleteIdx.value, 1);
pagination.value.total = data.value.length; pagination.value.total = data.value.length;
@ -149,50 +141,33 @@ export default defineComponent({
confirmVisible.value = false; confirmVisible.value = false;
MessagePlugin.success('删除成功'); MessagePlugin.success('删除成功');
resetIdx(); resetIdx();
}; };
const onCancel = () => { const onCancel = () => {
resetIdx(); resetIdx();
}; };
return { const rowKey = 'index';
CONTRACT_STATUS,
CONTRACT_TYPES, const rehandleSelectChange = (val: number[]) => {
CONTRACT_PAYMENT_TYPES,
COLUMNS,
data,
searchValue,
dataLoading,
pagination,
confirmBody,
confirmVisible,
rowKey: 'index',
onConfirmDelete,
onCancel,
selectedRowKeys,
rehandleSelectChange(val: number[]) {
selectedRowKeys.value = val; selectedRowKeys.value = val;
}, };
rehandlePageChange(curr, pageInfo) { const rehandlePageChange = (curr, pageInfo) => {
console.log('分页变化', curr, pageInfo); console.log('分页变化', curr, pageInfo);
}, };
rehandleChange(changeParams, triggerAndData) { const rehandleChange = (changeParams, triggerAndData) => {
console.log('统一Change', changeParams, triggerAndData); console.log('统一Change', changeParams, triggerAndData);
}, };
handleClickDetail() { const handleClickDetail = () => {
router.push('/detail/base'); router.push('/detail/base');
}, };
handleSetupContract() { const handleSetupContract = () => {
router.push('/form/base'); router.push('/form/base');
}, };
handleClickDelete(row: { rowIndex: any }) { const handleClickDelete = (row: { rowIndex: any }) => {
deleteIdx.value = row.rowIndex; deleteIdx.value = row.rowIndex;
confirmVisible.value = true; confirmVisible.value = true;
}, };
};
},
methods: {},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import '@/style/variables'; @import '@/style/variables';

76
src/pages/list/card/index.vue
View File

@ -58,8 +58,8 @@
/> />
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, ref, computed, onMounted } from 'vue'; import { ref, computed, onMounted } from 'vue';
import { SearchIcon } from 'tdesign-icons-vue-next'; import { SearchIcon } from 'tdesign-icons-vue-next';
import { MessagePlugin } from 'tdesign-vue-next'; import { MessagePlugin } from 'tdesign-vue-next';
import Card from '@/components/card/Card.vue'; import Card from '@/components/card/Card.vue';
@ -76,21 +76,13 @@ const INITIAL_DATA = {
amount: 0, amount: 0,
}; };
export default defineComponent({ const pagination = ref({ current: 1, pageSize: 12, total: 0 });
name: 'ListBase', const deleteProduct = ref(undefined);
components: {
SearchIcon,
Card,
DialogForm,
},
setup() {
const pagination = ref({ current: 1, pageSize: 12, total: 0 });
const deleteProduct = ref(undefined);
const productList = ref([]); const productList = ref([]);
const dataLoading = ref(true); const dataLoading = ref(true);
const fetchData = async () => { const fetchData = async () => {
try { try {
const res: ResDataType = await request.get('/api/get-card-list'); const res: ResDataType = await request.get('/api/get-card-list');
if (res.code === 0) { if (res.code === 0) {
@ -106,58 +98,46 @@ export default defineComponent({
} finally { } finally {
dataLoading.value = false; dataLoading.value = false;
} }
}; };
const confirmBody = computed(() => const confirmBody = computed(() =>
deleteProduct.value ? `确认删除后${deleteProduct.value.name}的所有产品信息将被清空, 且无法恢复` : '', deleteProduct.value ? `确认删除后${deleteProduct.value.name}的所有产品信息将被清空, 且无法恢复` : '',
); );
onMounted(() => { onMounted(() => {
fetchData(); fetchData();
}); });
const formDialogVisible = ref(false); const formDialogVisible = ref(false);
const searchValue = ref(''); const searchValue = ref('');
const confirmVisible = ref(false); const confirmVisible = ref(false);
const formData = ref({ ...INITIAL_DATA }); const formData = ref({ ...INITIAL_DATA });
return { const onPageSizeChange = (size: number) => {
pagination,
productList,
dataLoading,
formDialogVisible,
confirmBody,
searchValue,
confirmVisible,
formData,
onPageSizeChange(size: number) {
pagination.value.pageSize = size; pagination.value.pageSize = size;
pagination.value.current = 1; pagination.value.current = 1;
}, };
onCurrentChange(current: number) { const onCurrentChange = (current: number) => {
pagination.value.current = current; pagination.value.current = current;
}, };
handleDeleteItem(product) { const handleDeleteItem = (product) => {
confirmVisible.value = true; confirmVisible.value = true;
deleteProduct.value = product; deleteProduct.value = product;
}, };
onConfirmDelete() { const onConfirmDelete = () => {
const { index } = deleteProduct.value; const { index } = deleteProduct.value;
productList.value.splice(index - 1, 1); productList.value.splice(index - 1, 1);
confirmVisible.value = false; confirmVisible.value = false;
MessagePlugin.success('删除成功'); MessagePlugin.success('删除成功');
}, };
onCancel() { const onCancel = () => {
deleteProduct.value = undefined; deleteProduct.value = undefined;
formData.value = { ...INITIAL_DATA }; formData.value = { ...INITIAL_DATA };
}, };
handleManageProduct(product) { const handleManageProduct = (product) => {
formDialogVisible.value = true; formDialogVisible.value = true;
formData.value = { ...product, status: product?.isSetup ? '1' : '0' }; formData.value = { ...product, status: product?.isSetup ? '1' : '0' };
}, };
};
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import '@/style/variables.less'; @import '@/style/variables.less';

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

@ -102,8 +102,8 @@
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, ref, computed, onMounted } from 'vue'; import { ref, computed, onMounted } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next'; import { MessagePlugin } from 'tdesign-vue-next';
import Trend from '@/components/trend/index.vue'; import Trend from '@/components/trend/index.vue';
import request from '@/utils/request'; import request from '@/utils/request';
@ -167,29 +167,22 @@ const searchForm = {
type: '', type: '',
}; };
export default defineComponent({ const formData = ref({ ...searchForm });
name: 'ListTable', const rowKey = 'index';
components: { const verticalAlign = 'top';
Trend, const hover = true;
},
setup() { const pagination = ref({
const formData = ref({ ...searchForm });
const tableConfig = {
rowKey: 'index',
verticalAlign: 'top',
hover: true,
};
const pagination = ref({
defaultPageSize: 20, defaultPageSize: 20,
total: 100, total: 100,
defaultCurrent: 1, defaultCurrent: 1,
}); });
const confirmVisible = ref(false); const confirmVisible = ref(false);
const data = ref([]); const data = ref([]);
const dataLoading = ref(false); const dataLoading = ref(false);
const fetchData = async () => { const fetchData = async () => {
dataLoading.value = true; dataLoading.value = true;
try { try {
const res: ResDataType = await request.get('/api/get-list'); const res: ResDataType = await request.get('/api/get-list');
@ -206,76 +199,57 @@ export default defineComponent({
} finally { } finally {
dataLoading.value = false; dataLoading.value = false;
} }
}; };
const deleteIdx = ref(-1); const deleteIdx = ref(-1);
const confirmBody = computed(() => { const confirmBody = computed(() => {
if (deleteIdx.value > -1) { if (deleteIdx.value > -1) {
const { name } = data.value[deleteIdx.value]; const { name } = data.value[deleteIdx.value];
return `删除后，${name}的所有合同信息将被清空，且无法恢复`; return `删除后，${name}的所有合同信息将被清空，且无法恢复`;
} }
return ''; return '';
}); });
const resetIdx = () => { const resetIdx = () => {
deleteIdx.value = -1; deleteIdx.value = -1;
}; };
const onConfirmDelete = () => { const onConfirmDelete = () => {
// 真实业务请发起请求 // 真实业务请发起请求
data.value.splice(deleteIdx.value, 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('删除成功');
resetIdx(); resetIdx();
}; };
const onCancel = () => { const onCancel = () => {
resetIdx(); resetIdx();
}; };
onMounted(() => { onMounted(() => {
fetchData(); fetchData();
}); });
return { const handleClickDelete = ({ row }) => {
data,
COLUMNS,
CONTRACT_STATUS,
CONTRACT_STATUS_OPTIONS,
CONTRACT_TYPES,
CONTRACT_TYPE_OPTIONS,
CONTRACT_PAYMENT_TYPES,
formData,
pagination,
confirmVisible,
confirmBody,
...tableConfig,
onConfirmDelete,
onCancel,
dataLoading,
handleClickDelete({ row }) {
deleteIdx.value = row.rowIndex; deleteIdx.value = row.rowIndex;
confirmVisible.value = true; confirmVisible.value = true;
}, };
onReset(val) { const onReset = (val) => {
console.log(val); console.log(val);
}, };
onSubmit(val) { const onSubmit = (val) => {
console.log(val); console.log(val);
}, };
rehandlePageChange(curr, pageInfo) { const rehandlePageChange = (curr, pageInfo) => {
console.log('分页变化', curr, pageInfo); console.log('分页变化', curr, pageInfo);
}, };
rehandleChange(changeParams, triggerAndData) { const rehandleChange = (changeParams, triggerAndData) => {
console.log('统一Change', changeParams, triggerAndData); console.log('统一Change', changeParams, triggerAndData);
}, };
rehandleClickOp({ text, row }) { const rehandleClickOp = ({ text, row }) => {
console.log(text, row); console.log(text, row);
}, };
};
},
});
</script> </script>
<style lang="less"> <style lang="less">

10
src/pages/list/filter/index.vue
View File

@ -1,14 +1,6 @@
<template> <template>
<common-table /> <common-table />
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent } from 'vue';
import CommonTable from '../components/CommonTable.vue'; import CommonTable from '../components/CommonTable.vue';
export default defineComponent({
name: 'ListBase',
components: {
CommonTable,
},
});
</script> </script>

32
src/pages/list/tree/index.vue
View File

@ -15,38 +15,24 @@
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, ref } from 'vue'; import { ref } from 'vue';
import { SearchIcon } from 'tdesign-icons-vue-next'; import { SearchIcon } from 'tdesign-icons-vue-next';
import { prefix } from '@/config/global';
import { TREE_DATA } from './constants'; import { TREE_DATA } from './constants';
import CommonTable from '../components/CommonTable.vue'; import CommonTable from '../components/CommonTable.vue';
export default defineComponent({ const filterByText = ref();
name: 'ListTree', const filterText = ref();
components: {
SearchIcon, const expanded = ['0', '0-0', '0-1', '0-2', '0-3', '0-4'];
CommonTable,
}, const onInput = () => {
setup() {
const filterByText = ref();
const filterText = ref();
return {
prefix,
TREE_DATA,
expanded: ['0', '0-0', '0-1', '0-2', '0-3', '0-4'],
filterText,
filterByText,
onInput() {
filterByText.value = (node) => { filterByText.value = (node) => {
const rs = node.label.indexOf(filterText.value) >= 0; const rs = node.label.indexOf(filterText.value) >= 0;
return rs; return rs;
}; };
}, };
};
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import '@/style/variables.less'; @import '@/style/variables.less';

28
src/pages/login/components/Header.vue
View File

@ -15,34 +15,22 @@
</header> </header>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import LogoFullIcon from '@/assets/assets-logo-full.svg?component'; import LogoFullIcon from '@/assets/assets-logo-full.svg?component';
export default defineComponent({ const store = useStore();
components: { LogoFullIcon }, const toggleSettingPanel = () => {
setup() {
const store = useStore();
const toggleSettingPanel = () => {
store.commit('setting/toggleSettingPanel', true); store.commit('setting/toggleSettingPanel', true);
}; };
const navToGitHub = () => { const navToGitHub = () => {
window.open('https://github.com/tencent/tdesign-vue-next-starter'); window.open('https://github.com/tencent/tdesign-vue-next-starter');
}; };
const navToHelper = () => { const navToHelper = () => {
window.open('http://tdesign.tencent.com/starter/docs/get-started'); window.open('http://tdesign.tencent.com/starter/docs/get-started');
}; };
return {
toggleSettingPanel,
navToGitHub,
navToHelper,
};
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

40
src/pages/login/components/Login.vue
View File

@ -70,8 +70,8 @@
</t-form> </t-form>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, ref } from 'vue'; import { ref } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import QrcodeVue from 'qrcode.vue'; import QrcodeVue from 'qrcode.vue';
@ -93,24 +93,21 @@ const FORM_RULES = {
verifyCode: [{ required: true, message: '验证码必填', type: 'error' }], verifyCode: [{ required: true, message: '验证码必填', type: 'error' }],
}; };
export default defineComponent({ const type = ref('password');
components: { QrcodeVue },
setup() {
const type = ref('password');
const formData = ref({ ...INITIAL_DATA }); const formData = ref({ ...INITIAL_DATA });
const showPsw = ref(false); const showPsw = ref(false);
const [countDown, handleCounter] = useCounter(); const [countDown, handleCounter] = useCounter();
const switchType = (val: string) => { const switchType = (val: string) => {
type.value = val; type.value = val;
}; };
const router = useRouter(); const router = useRouter();
const store = useStore(); const store = useStore();
const onSubmit = async ({ validateResult }) => { const onSubmit = async ({ validateResult }) => {
if (validateResult === true) { if (validateResult === true) {
try { try {
await store.dispatch('user/login', formData.value); await store.dispatch('user/login', formData.value);
@ -123,18 +120,5 @@ export default defineComponent({
MessagePlugin.error(e.message); MessagePlugin.error(e.message);
} }
} }
}; };
return {
FORM_RULES,
formData,
showPsw,
type,
switchType,
countDown,
handleCounter,
onSubmit,
};
},
});
</script> </script>

43
src/pages/login/components/Register.vue
View File

@ -70,8 +70,8 @@
</t-form> </t-form>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, ref } from 'vue'; import { defineEmits, ref } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next'; import { MessagePlugin } from 'tdesign-vue-next';
import { useCounter } from '@/hooks'; import { useCounter } from '@/hooks';
@ -93,47 +93,30 @@ const FORM_RULES = {
verifyCode: [{ required: true, message: '验证码必填', type: 'error' }], verifyCode: [{ required: true, message: '验证码必填', type: 'error' }],
}; };
export default defineComponent({ const type = ref('phone');
setup(props, ctx) {
const type = ref('phone');
const emailOptions = ref([]);
const form = ref(); const form = ref();
const formData = ref({ ...INITIAL_DATA }); const formData = ref({ ...INITIAL_DATA });
const showPsw = ref(false); const showPsw = ref(false);
const [countDown, handleCounter] = useCounter(); const [countDown, handleCounter] = useCounter();
const onSubmit = ({ validateResult }) => { const emit = defineEmits(['registerSuccess']);
const onSubmit = ({ validateResult }) => {
if (validateResult === true) { if (validateResult === true) {
if (!formData.value.checked) { if (!formData.value.checked) {
MessagePlugin.error('请同意TDesign服务协议和TDesign 隐私声明'); MessagePlugin.error('请同意TDesign服务协议和TDesign 隐私声明');
return; return;
} }
MessagePlugin.success('注册成功'); MessagePlugin.success('注册成功');
const { emit } = ctx;
emit('registerSuccess'); emit('registerSuccess');
} }
}; };
const switchType = (val) => { const switchType = (val) => {
form.value.reset(); form.value.reset();
type.value = val; type.value = val;
}; };
return {
FORM_RULES,
formData,
showPsw,
form,
type,
emailOptions,
countDown,
handleCounter,
onSubmit,
switchType,
};
},
});
</script> </script>

26
src/pages/login/index.vue
View File

@ -22,34 +22,18 @@
<footer class="copyright">Copyright @ 2021-2022 Tencent. All Rights Reserved</footer> <footer class="copyright">Copyright @ 2021-2022 Tencent. All Rights Reserved</footer>
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, ref } from 'vue'; import { ref } from 'vue';
import Login from './components/Login.vue'; import Login from './components/Login.vue';
import Register from './components/Register.vue'; import Register from './components/Register.vue';
import LoginHeader from './components/Header.vue'; import LoginHeader from './components/Header.vue';
import TdesignSetting from '@/layouts/setting.vue'; import TdesignSetting from '@/layouts/setting.vue';
export default defineComponent({ const type = ref('login');
name: 'LoginIndex', const switchType = (val: string) => {
components: {
Login,
Register,
LoginHeader,
TdesignSetting,
},
setup() {
const type = ref('login');
const switchType = (val: string) => {
type.value = val; type.value = val;
}; };
return {
type,
switchType,
};
},
});
</script> </script>
<style lang="less"> <style lang="less">
@import url('./index.less'); @import url('./index.less');

8
src/pages/result/403/index.vue
View File

@ -4,12 +4,6 @@
</result> </result>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent } from 'vue';
import Result from '@/components/result/index.vue'; import Result from '@/components/result/index.vue';
export default defineComponent({
name: 'Result403',
components: { Result },
});
</script> </script>

8
src/pages/result/404/index.vue
View File

@ -4,12 +4,6 @@
</result> </result>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent } from 'vue';
import Result from '@/components/result/index.vue'; import Result from '@/components/result/index.vue';
export default defineComponent({
name: 'Result404',
components: { Result },
});
</script> </script>

8
src/pages/result/500/index.vue
View File

@ -4,12 +4,6 @@
</result> </result>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent } from 'vue';
import Result from '@/components/result/index.vue'; import Result from '@/components/result/index.vue';
export default defineComponent({
name: 'Result500',
components: { Result },
});
</script> </script>

8
src/pages/result/browser-incompatible/index.vue
View File

@ -19,15 +19,9 @@
</result> </result>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent } from 'vue';
import Result from '@/components/result/index.vue'; import Result from '@/components/result/index.vue';
import Thumbnail from '@/components/thumbnail/index.vue'; import Thumbnail from '@/components/thumbnail/index.vue';
export default defineComponent({
name: 'ResultBrowserIncompatible',
components: { Result, Thumbnail },
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import '@/style/variables.less'; @import '@/style/variables.less';

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

@ -10,14 +10,6 @@
</div> </div>
</template> </template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'ResultSuccess',
});
</script>
<style lang="less" scoped> <style lang="less" scoped>
@import '@/style/variables.less'; @import '@/style/variables.less';

8
src/pages/result/network-error/index.vue
View File

@ -7,12 +7,6 @@
</result> </result>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent } from 'vue';
import Result from '@/components/result/index.vue'; import Result from '@/components/result/index.vue';
export default defineComponent({
name: 'ResultNetworkError',
components: { Result },
});
</script> </script>

8
src/pages/result/success/index.vue
View File

@ -10,14 +10,6 @@
</div> </div>
</template> </template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'ResultSuccess',
});
</script>
<style lang="less" scoped> <style lang="less" scoped>
@import '@/style/variables.less'; @import '@/style/variables.less';

56
src/pages/user/index.vue
View File

@ -89,8 +89,8 @@
</t-col> </t-col>
</t-row> </t-row>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { defineComponent, nextTick, onMounted, onUnmounted, watch, computed } from 'vue'; import { nextTick, onMounted, onUnmounted, watch, computed } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import * as echarts from 'echarts/core'; import * as echarts from 'echarts/core';
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'; import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
@ -109,21 +109,16 @@ import Card from '@/components/card/index.vue';
echarts.use([GridComponent, TooltipComponent, LineChart, CanvasRenderer, LegendComponent]); echarts.use([GridComponent, TooltipComponent, LineChart, CanvasRenderer, LegendComponent]);
export default defineComponent({ let lineContainer: HTMLElement;
components: { let lineChart: echarts.ECharts;
Card, const store = useStore();
}, const chartColors = computed(() => store.state.setting.chartColors);
setup() {
let lineContainer: HTMLElement;
let lineChart: echarts.ECharts;
const store = useStore();
const chartColors = computed(() => store.state.setting.chartColors);
const onLineChange = (value) => { const onLineChange = (value) => {
lineChart.setOption(getFolderLineDataSet(value)); lineChart.setOption(getFolderLineDataSet(value));
}; };
const initChart = () => { const initChart = () => {
lineContainer = document.getElementById('lineContainer'); lineContainer = document.getElementById('lineContainer');
lineChart = echarts.init(lineContainer); lineChart = echarts.init(lineContainer);
lineChart.setOption({ lineChart.setOption({
@ -135,27 +130,27 @@ export default defineComponent({
}, },
...getFolderLineDataSet({ ...chartColors.value }), ...getFolderLineDataSet({ ...chartColors.value }),
}); });
}; };
const updateContainer = () => { const updateContainer = () => {
lineChart?.resize({ lineChart?.resize({
width: lineContainer.clientWidth, width: lineContainer.clientWidth,
height: lineContainer.clientHeight, height: lineContainer.clientHeight,
}); });
}; };
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
initChart(); initChart();
}); });
window.addEventListener('resize', updateContainer, false); window.addEventListener('resize', updateContainer, false);
}); });
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('resize', updateContainer); window.removeEventListener('resize', updateContainer);
}); });
const getIcon = (type) => { const getIcon = (type) => {
switch (type) { switch (type) {
case 'a': case 'a':
return ProductAIcon; return ProductAIcon;
@ -168,25 +163,14 @@ export default defineComponent({
default: default:
return ProductAIcon; return ProductAIcon;
} }
}; };
watch( watch(
() => store.state.setting.brandTheme, () => store.state.setting.brandTheme,
() => { () => {
changeChartsTheme([lineChart]); changeChartsTheme([lineChart]);
}, },
); );
return {
LAST_7_DAYS,
USER_INFO_LIST,
TEAM_MEMBERS,
PRODUCT_LIST,
onLineChange,
getIcon,
};
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import url('./index.less'); @import url('./index.less');