赵忠林
5e26fdc7fb
- 添加 .dockerignore 和 .env.example 配置文件 - 添加 .gitignore 忽略规则配置 - 创建服务端代理API路由（_file、_modules、_server） - 集成 Ant Design Vue 组件库并配置SSR样式提取 - 定义API响应类型封装 - 创建基础布局组件（blank、console） - 实现应用中心页面和组件（AppsCenter） - 添加文章列表测试页面 - 配置控制台导航菜单结构 - 实现控制台头部组件 - 创建联系页面表单
47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import Antd from 'ant-design-vue'
|
|
import { createCache, extractStyle } from 'ant-design-vue/es/_util/cssinjs'
|
|
|
|
function parseStyleTags(styleHTML: string) {
|
|
const tags: Array<Record<string, any>> = []
|
|
const styleTagRe = /<style([^>]*)>([\s\S]*?)<\/style>/gi
|
|
let match: RegExpExecArray | null
|
|
|
|
while ((match = styleTagRe.exec(styleHTML))) {
|
|
const rawAttrs = (match[1] || '').trim()
|
|
const children = match[2] || ''
|
|
const props: Record<string, any> = { children }
|
|
|
|
const attrRe = /([^\s=]+)\s*=\s*"([^"]*)"/g
|
|
let a: RegExpExecArray | null
|
|
while ((a = attrRe.exec(rawAttrs))) {
|
|
const key = a[1]
|
|
const value = a[2]
|
|
props[key] = value
|
|
}
|
|
|
|
tags.push(props)
|
|
}
|
|
|
|
return tags
|
|
}
|
|
|
|
export default defineNuxtPlugin((nuxtApp) => {
|
|
nuxtApp.vueApp.use(Antd)
|
|
|
|
// Ant Design Vue 4 uses css-in-js for component styles. Without SSR extraction,
|
|
// users will see a flash of unstyled content on refresh until hydration completes.
|
|
const cssinjsCache = createCache()
|
|
;(nuxtApp.vueApp.config.globalProperties as any).__ANTDV_CSSINJS_CACHE__ = cssinjsCache
|
|
|
|
if (import.meta.server) {
|
|
nuxtApp.hook('app:rendered', ({ ssrContext }) => {
|
|
if (!ssrContext) return
|
|
const styleText = extractStyle(cssinjsCache)
|
|
const styleTags = parseStyleTags(styleText)
|
|
if (styleTags.length) {
|
|
ssrContext.head.push({ style: styleTags as any })
|
|
}
|
|
})
|
|
}
|
|
})
|