144 lines
3.7 KiB
Vue
144 lines
3.7 KiB
Vue
import { defineComponent, toRefs, computed } from 'vue';
|
|
import type { PropType } from 'vue';
|
|
import type { TableProps } from 'ant-design-vue';
|
|
import { Table } from 'ant-design-vue';
|
|
import { getDesignToken } from '../antdv-token-previewer';
|
|
import tokenMeta from 'ant-design-vue/es/version/token-meta.json';
|
|
import { useLocale } from '../../i18n';
|
|
import useSiteToken from '../../hooks/useSiteToken';
|
|
import ColorChunk from '../ColorChunk';
|
|
|
|
type TokenTableProps = {
|
|
type: 'seed' | 'map' | 'alias';
|
|
lang: 'zh' | 'en';
|
|
};
|
|
|
|
type TokenData = {
|
|
name: string;
|
|
desc: string;
|
|
type: string;
|
|
value: any;
|
|
};
|
|
|
|
const defaultToken = getDesignToken();
|
|
|
|
const locales = {
|
|
cn: {
|
|
token: 'Token 名称',
|
|
description: '描述',
|
|
type: '类型',
|
|
value: '默认值',
|
|
},
|
|
en: {
|
|
token: 'Token Name',
|
|
description: 'Description',
|
|
type: 'Type',
|
|
value: 'Default Value',
|
|
},
|
|
};
|
|
|
|
export function useColumns(): Exclude<TableProps<TokenData>['columns'], undefined> {
|
|
const [locale] = useLocale(locales);
|
|
|
|
return [
|
|
{
|
|
title: locale.value.token,
|
|
key: 'name',
|
|
dataIndex: 'name',
|
|
},
|
|
{
|
|
title: locale.value.description,
|
|
key: 'desc',
|
|
dataIndex: 'desc',
|
|
},
|
|
{
|
|
title: locale.value.type,
|
|
key: 'type',
|
|
dataIndex: 'type',
|
|
},
|
|
{
|
|
title: locale.value.value,
|
|
key: 'value',
|
|
dataIndex: 'value',
|
|
},
|
|
];
|
|
}
|
|
|
|
const TokenTable = defineComponent({
|
|
props: {
|
|
type: {
|
|
type: String as PropType<TokenTableProps['type']>,
|
|
},
|
|
lang: {
|
|
type: String as PropType<TokenTableProps['lang']>,
|
|
},
|
|
},
|
|
setup(props, { attrs }) {
|
|
const { type } = toRefs(props);
|
|
const SiteToken = useSiteToken();
|
|
const token = computed(() => SiteToken.value.token);
|
|
|
|
const [, lang] = useLocale(locales);
|
|
const columns = useColumns();
|
|
|
|
const data = computed<TokenData[]>(() => {
|
|
return Object.entries(tokenMeta)
|
|
.filter(([, meta]: any) => meta.source === type.value)
|
|
.map(([token, meta]: any) => ({
|
|
name: token,
|
|
desc: lang.value === 'cn' ? meta.desc : meta.descEn,
|
|
type: meta.type,
|
|
value: (defaultToken as any)[token],
|
|
}));
|
|
});
|
|
|
|
return () => {
|
|
return (
|
|
<Table
|
|
dataSource={data.value}
|
|
columns={columns}
|
|
pagination={false}
|
|
bordered
|
|
{...attrs}
|
|
v-slots={{
|
|
bodyCell: ({ text, record, column }) => {
|
|
if (column.key === 'type') {
|
|
return (
|
|
<span
|
|
style={{
|
|
margin: '0 1px',
|
|
padding: '0.2em 0.4em',
|
|
fontSize: '0.9em',
|
|
background: `${token.value.siteMarkdownCodeBg}`,
|
|
border: `1px solid ${token.value.colorSplit}`,
|
|
borderRadius: '3px',
|
|
fontFamily: 'monospace',
|
|
}}
|
|
>
|
|
{record.type}
|
|
</span>
|
|
);
|
|
}
|
|
if (column.key === 'value') {
|
|
const isColor =
|
|
typeof record.value === 'string' &&
|
|
(record.value.startsWith('#') || record.value.startsWith('rgb'));
|
|
if (isColor) {
|
|
return <ColorChunk color={record.value}>{record.value}</ColorChunk>;
|
|
}
|
|
return (
|
|
<span>
|
|
{typeof record.value !== 'string' ? JSON.stringify(record.value) : record.value}
|
|
</span>
|
|
);
|
|
}
|
|
return <span>{text} </span>;
|
|
},
|
|
}}
|
|
></Table>
|
|
);
|
|
};
|
|
},
|
|
});
|
|
export default TokenTable;
|