Commit 89dc06b50d03f34a9c5ad7706391d7f304780cfb
1 parent
74b39748
perf: adjust TextComponent font size
Showing
6 changed files
with
45 additions
and
17 deletions
@@ -92,13 +92,15 @@ | @@ -92,13 +92,15 @@ | ||
92 | placement="topLeft" | 92 | placement="topLeft" |
93 | :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)" | 93 | :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)" |
94 | > | 94 | > |
95 | - <span>更新时间:</span> | ||
96 | - <span | 95 | + <div |
97 | :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }) }" | 96 | :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }) }" |
98 | class="truncate" | 97 | class="truncate" |
99 | > | 98 | > |
100 | - {{ dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT) }} | ||
101 | - </span> | 99 | + <span class="mr-1">更新时间:</span> |
100 | + <span class="truncate"> | ||
101 | + {{ dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT) }} | ||
102 | + </span> | ||
103 | + </div> | ||
102 | </Tooltip> | 104 | </Tooltip> |
103 | </div> | 105 | </div> |
104 | </div> | 106 | </div> |
1 | <script lang="ts" setup> | 1 | <script lang="ts" setup> |
2 | - import { MoreOutlined, LineChartOutlined } from '@ant-design/icons-vue'; | 2 | + import { MoreOutlined } from '@ant-design/icons-vue'; |
3 | import { DropMenu } from '/@/components/Dropdown'; | 3 | import { DropMenu } from '/@/components/Dropdown'; |
4 | import Dropdown from '/@/components/Dropdown/src/Dropdown.vue'; | 4 | import Dropdown from '/@/components/Dropdown/src/Dropdown.vue'; |
5 | import { Tooltip } from 'ant-design-vue'; | 5 | import { Tooltip } from 'ant-design-vue'; |
6 | import SvgIcon from '/@/components/Icon/src/SvgIcon.vue'; | 6 | import SvgIcon from '/@/components/Icon/src/SvgIcon.vue'; |
7 | - import { MoreActionEvent } from '../../config/config'; | 7 | + import { isBataBoardSharePage, MoreActionEvent } from '../../config/config'; |
8 | import { computed } from '@vue/reactivity'; | 8 | import { computed } from '@vue/reactivity'; |
9 | import { usePermission } from '/@/hooks/web/usePermission'; | 9 | import { usePermission } from '/@/hooks/web/usePermission'; |
10 | import { DataSource } from '/@/api/dataBoard/model'; | 10 | import { DataSource } from '/@/api/dataBoard/model'; |
11 | + import { useRoute } from 'vue-router'; | ||
11 | 12 | ||
12 | const emit = defineEmits(['action']); | 13 | const emit = defineEmits(['action']); |
13 | const props = defineProps<{ | 14 | const props = defineProps<{ |
@@ -41,6 +42,12 @@ | @@ -41,6 +42,12 @@ | ||
41 | return basicMenu; | 42 | return basicMenu; |
42 | }); | 43 | }); |
43 | 44 | ||
45 | + const ROUTE = useRoute(); | ||
46 | + | ||
47 | + const getIsSharePage = computed(() => { | ||
48 | + return isBataBoardSharePage(ROUTE.path); | ||
49 | + }); | ||
50 | + | ||
44 | const handleMenuEvent = (event: DropMenu) => { | 51 | const handleMenuEvent = (event: DropMenu) => { |
45 | emit('action', event, props.id); | 52 | emit('action', event, props.id); |
46 | }; | 53 | }; |
@@ -72,7 +79,7 @@ | @@ -72,7 +79,7 @@ | ||
72 | @menu-event="handleMenuEvent" | 79 | @menu-event="handleMenuEvent" |
73 | > | 80 | > |
74 | <Tooltip title="更多"> | 81 | <Tooltip title="更多"> |
75 | - <MoreOutlined class="transform rotate-90 cursor-pointer" /> | 82 | + <MoreOutlined v-if="!getIsSharePage" class="transform rotate-90 cursor-pointer" /> |
76 | </Tooltip> | 83 | </Tooltip> |
77 | </Dropdown> | 84 | </Dropdown> |
78 | </div> | 85 | </div> |
@@ -9,10 +9,21 @@ export enum MoreActionEvent { | @@ -9,10 +9,21 @@ export enum MoreActionEvent { | ||
9 | export const DEFAULT_WIDGET_WIDTH = 6; | 9 | export const DEFAULT_WIDGET_WIDTH = 6; |
10 | export const DEFAULT_WIDGET_HEIGHT = 6; | 10 | export const DEFAULT_WIDGET_HEIGHT = 6; |
11 | 11 | ||
12 | -export const DATA_BOARD_SHARE_URL = (boardId = ':boardId', tenantId = ':tenantId') => | ||
13 | - `/data/board/share/${boardId}/${tenantId}`; | 12 | +export const DATA_BOARD_SHARE_URL = ( |
13 | + boardId = ':boardId', | ||
14 | + tenantId = ':tenantId', | ||
15 | + name = ':boardName?' | ||
16 | +) => `/data/board/share/${boardId}/${tenantId}/${name}`; | ||
14 | 17 | ||
15 | export const isBataBoardSharePage = (url: string) => { | 18 | export const isBataBoardSharePage = (url: string) => { |
16 | const reg = /^\/data\/board\/share/g; | 19 | const reg = /^\/data\/board\/share/g; |
17 | return reg.test(url); | 20 | return reg.test(url); |
18 | }; | 21 | }; |
22 | + | ||
23 | +export const encode = (string: string) => { | ||
24 | + return encodeURIComponent(string); | ||
25 | +}; | ||
26 | + | ||
27 | +export const decode = (string: string) => { | ||
28 | + return decodeURIComponent(string); | ||
29 | +}; |
@@ -9,6 +9,7 @@ | @@ -9,6 +9,7 @@ | ||
9 | import { useModalInner } from '/@/components/Modal'; | 9 | import { useModalInner } from '/@/components/Modal'; |
10 | import { DataBoardLayoutInfo } from '../../types/type'; | 10 | import { DataBoardLayoutInfo } from '../../types/type'; |
11 | import { useMessage } from '/@/hooks/web/useMessage'; | 11 | import { useMessage } from '/@/hooks/web/useMessage'; |
12 | + import { decode } from '../../config/config'; | ||
12 | 13 | ||
13 | interface DataComponentRouteParams extends RouteParams { | 14 | interface DataComponentRouteParams extends RouteParams { |
14 | id: string; | 15 | id: string; |
@@ -21,7 +22,7 @@ | @@ -21,7 +22,7 @@ | ||
21 | const { createMessage } = useMessage(); | 22 | const { createMessage } = useMessage(); |
22 | 23 | ||
23 | const boardId = computed(() => { | 24 | const boardId = computed(() => { |
24 | - return (ROUTE.params as DataComponentRouteParams).id; | 25 | + return decode((ROUTE.params as DataComponentRouteParams).boardId as string); |
25 | }); | 26 | }); |
26 | 27 | ||
27 | const frontId = ref(''); | 28 | const frontId = ref(''); |
@@ -9,6 +9,7 @@ | @@ -9,6 +9,7 @@ | ||
9 | import DataBindModal from './components/DataBindModal.vue'; | 9 | import DataBindModal from './components/DataBindModal.vue'; |
10 | import { useModal } from '/@/components/Modal'; | 10 | import { useModal } from '/@/components/Modal'; |
11 | import { | 11 | import { |
12 | + decode, | ||
12 | DEFAULT_WIDGET_HEIGHT, | 13 | DEFAULT_WIDGET_HEIGHT, |
13 | DEFAULT_WIDGET_WIDTH, | 14 | DEFAULT_WIDGET_WIDTH, |
14 | isBataBoardSharePage, | 15 | isBataBoardSharePage, |
@@ -41,12 +42,16 @@ | @@ -41,12 +42,16 @@ | ||
41 | const { createMessage, createConfirm } = useMessage(); | 42 | const { createMessage, createConfirm } = useMessage(); |
42 | 43 | ||
43 | const getBoardId = computed(() => { | 44 | const getBoardId = computed(() => { |
44 | - return (ROUTE.params as { id: string }).id; | 45 | + return decode((ROUTE.params as { boardId: string }).boardId); |
46 | + }); | ||
47 | + | ||
48 | + const getDataBoardName = computed(() => { | ||
49 | + return decode((ROUTE.params as { boardName: string }).boardName || ''); | ||
45 | }); | 50 | }); |
46 | 51 | ||
47 | const getSharePageParams = computed(() => { | 52 | const getSharePageParams = computed(() => { |
48 | const { boardId, tenantId } = ROUTE.params as { boardId: string; tenantId: string }; | 53 | const { boardId, tenantId } = ROUTE.params as { boardId: string; tenantId: string }; |
49 | - return { boardId, tenantId }; | 54 | + return { boardId: decode(boardId), tenantId: decode(tenantId) }; |
50 | }); | 55 | }); |
51 | 56 | ||
52 | const getIsSharePage = computed(() => { | 57 | const getIsSharePage = computed(() => { |
@@ -303,7 +308,7 @@ | @@ -303,7 +308,7 @@ | ||
303 | <template #title> | 308 | <template #title> |
304 | <div class="flex items-center"> | 309 | <div class="flex items-center"> |
305 | <RollbackOutlined v-if="!getIsSharePage" class="mr-3" @click="handleBack" /> | 310 | <RollbackOutlined v-if="!getIsSharePage" class="mr-3" @click="handleBack" /> |
306 | - <span>看板名称</span> | 311 | + <span>{{ getDataBoardName }}</span> |
307 | </div> | 312 | </div> |
308 | </template> | 313 | </template> |
309 | <template #extra> | 314 | <template #extra> |
@@ -18,6 +18,7 @@ | @@ -18,6 +18,7 @@ | ||
18 | import Authority from '/@/components/Authority/src/Authority.vue'; | 18 | import Authority from '/@/components/Authority/src/Authority.vue'; |
19 | import { computed } from '@vue/reactivity'; | 19 | import { computed } from '@vue/reactivity'; |
20 | import { usePermission } from '/@/hooks/web/usePermission'; | 20 | import { usePermission } from '/@/hooks/web/usePermission'; |
21 | + import { encode } from './config/config'; | ||
21 | 22 | ||
22 | const ListItem = List.Item; | 23 | const ListItem = List.Item; |
23 | const router = useRouter(); | 24 | const router = useRouter(); |
@@ -50,14 +51,14 @@ | @@ -50,14 +51,14 @@ | ||
50 | pageSize.value = size; | 51 | pageSize.value = size; |
51 | } | 52 | } |
52 | 53 | ||
53 | - const createShareUrl = (boardId: string, tenantId: string) => { | 54 | + const createShareUrl = (boardId: string, tenantId: string, name: string) => { |
54 | const { origin } = location; | 55 | const { origin } = location; |
55 | - return `${origin}${DATA_BOARD_SHARE_URL(boardId, tenantId)}`; | 56 | + return `${origin}${DATA_BOARD_SHARE_URL(encode(boardId), encode(tenantId), encode(name))}`; |
56 | }; | 57 | }; |
57 | 58 | ||
58 | const { clipboardRef } = useCopyToClipboard(); | 59 | const { clipboardRef } = useCopyToClipboard(); |
59 | const handleCopyShareUrl = (record: DataBoardRecord) => { | 60 | const handleCopyShareUrl = (record: DataBoardRecord) => { |
60 | - clipboardRef.value = createShareUrl(record.id, record.tenantId); | 61 | + clipboardRef.value = createShareUrl(record.id, record.tenantId, record.name); |
61 | unref(clipboardRef) ? createMessage.success('复制成功') : createMessage.error('未找到分享链接'); | 62 | unref(clipboardRef) ? createMessage.success('复制成功') : createMessage.error('未找到分享链接'); |
62 | }; | 63 | }; |
63 | 64 | ||
@@ -133,7 +134,8 @@ | @@ -133,7 +134,8 @@ | ||
133 | 134 | ||
134 | const handleViewBoard = (record: DataBoardRecord) => { | 135 | const handleViewBoard = (record: DataBoardRecord) => { |
135 | const hasDetailPermission = hasPermission('api:yt:dataBoard:detail'); | 136 | const hasDetailPermission = hasPermission('api:yt:dataBoard:detail'); |
136 | - if (hasDetailPermission) router.push(`/data/board/detail/${record.id}`); | 137 | + if (hasDetailPermission) |
138 | + router.push(`/data/board/detail/${encode(record.id)}/${encode(record.name)}`); | ||
137 | }; | 139 | }; |
138 | 140 | ||
139 | const handlePagenationPosition = () => { | 141 | const handlePagenationPosition = () => { |