1+ #!/usr/bin/env node
2+
3+ /**
4+ * 此脚本用于将样式从styles/components目录移动到各个组件文件中
5+ * 执行:node office-website/scripts/moveStylesIntoComponents.js
6+ */
7+
8+ const fs = require ( 'fs' ) ;
9+ const path = require ( 'path' ) ;
10+
11+ const baseDir = path . resolve ( __dirname , '..' ) ;
12+ const stylesDir = path . join ( baseDir , 'src/styles/components' ) ;
13+ const componentsDir = path . join ( baseDir , 'src/components' ) ;
14+
15+ // 确保目录存在
16+ if ( ! fs . existsSync ( stylesDir ) ) {
17+ console . error ( `样式目录不存在: ${ stylesDir } ` ) ;
18+ process . exit ( 1 ) ;
19+ }
20+
21+ if ( ! fs . existsSync ( componentsDir ) ) {
22+ console . error ( `组件目录不存在: ${ componentsDir } ` ) ;
23+ process . exit ( 1 ) ;
24+ }
25+
26+ // 获取所有样式文件
27+ const styleFiles = fs . readdirSync ( stylesDir ) . filter ( file => file . endsWith ( '.styles.ts' ) ) ;
28+
29+ // 处理每个样式文件
30+ styleFiles . forEach ( styleFile => {
31+ const componentName = styleFile . replace ( '.styles.ts' , '' ) ;
32+ const styleFilePath = path . join ( stylesDir , styleFile ) ;
33+ const componentDir = path . join ( componentsDir , componentName ) ;
34+
35+ // 确保组件目录存在
36+ if ( ! fs . existsSync ( componentDir ) || ! fs . statSync ( componentDir ) . isDirectory ( ) ) {
37+ console . warn ( `组件目录不存在,跳过: ${ componentDir } ` ) ;
38+ return ;
39+ }
40+
41+ // 读取样式文件
42+ const styleContent = fs . readFileSync ( styleFilePath , 'utf8' ) ;
43+
44+ // 提取样式定义
45+ const exportedStyles = extractExportedStyles ( styleContent ) ;
46+ if ( Object . keys ( exportedStyles ) . length === 0 ) {
47+ console . warn ( `未在样式文件中找到导出的样式: ${ styleFilePath } ` ) ;
48+ return ;
49+ }
50+
51+ // 处理组件目录中的每个文件
52+ processComponentDirectory ( componentDir , exportedStyles ) ;
53+
54+ console . log ( `已处理组件: ${ componentName } ` ) ;
55+ } ) ;
56+
57+ console . log ( '样式迁移完成!' ) ;
58+
59+ /**
60+ * 从样式文件中提取导出的样式定义
61+ */
62+ function extractExportedStyles ( styleContent ) {
63+ const exportedStyles = { } ;
64+ const exportRegex = / e x p o r t \s + c o n s t \s + ( \w + ) \s * = / g;
65+ let match ;
66+
67+ while ( ( match = exportRegex . exec ( styleContent ) ) !== null ) {
68+ const styleName = match [ 1 ] ;
69+ const startIndex = match . index ;
70+
71+ // 找到样式定义的结束位置
72+ let braceCount = 0 ;
73+ let endIndex = startIndex ;
74+ let foundOpeningBrace = false ;
75+
76+ for ( let i = startIndex ; i < styleContent . length ; i ++ ) {
77+ if ( styleContent [ i ] === '`' && ! foundOpeningBrace ) {
78+ foundOpeningBrace = true ;
79+ }
80+
81+ if ( styleContent [ i ] === '{' && foundOpeningBrace ) {
82+ braceCount ++ ;
83+ } else if ( styleContent [ i ] === '}' && foundOpeningBrace ) {
84+ braceCount -- ;
85+ if ( braceCount === 0 && styleContent [ i + 1 ] === '`' && styleContent [ i + 2 ] === ';' ) {
86+ endIndex = i + 3 ;
87+ break ;
88+ }
89+ }
90+ }
91+
92+ if ( endIndex > startIndex ) {
93+ exportedStyles [ styleName ] = styleContent . substring ( startIndex , endIndex ) ;
94+ }
95+ }
96+
97+ return exportedStyles ;
98+ }
99+
100+ /**
101+ * 处理组件目录中的文件
102+ */
103+ function processComponentDirectory ( componentDir , exportedStyles ) {
104+ const files = fs . readdirSync ( componentDir ) ;
105+
106+ files . forEach ( file => {
107+ const filePath = path . join ( componentDir , file ) ;
108+
109+ // 检查是否为目录
110+ if ( fs . statSync ( filePath ) . isDirectory ( ) ) {
111+ // 递归处理子目录
112+ processComponentDirectory ( filePath , exportedStyles ) ;
113+ return ;
114+ }
115+
116+ // 只处理TSX文件
117+ if ( ! file . endsWith ( '.tsx' ) ) {
118+ return ;
119+ }
120+
121+ // 读取组件文件
122+ let componentContent = fs . readFileSync ( filePath , 'utf8' ) ;
123+
124+ // 检查是否从样式文件导入
125+ const importRegex = / i m p o r t \s + { ( [ ^ } ] + ) } \s + f r o m \s + [ ' " ] \. \. \/ \. \. \/ s t y l e s \/ c o m p o n e n t s \/ [ ^ ' " ] + [ ' " ] / ;
126+ const importMatch = componentContent . match ( importRegex ) ;
127+
128+ if ( importMatch ) {
129+ // 获取导入的样式名称
130+ const importedStyles = importMatch [ 1 ] . split ( ',' ) . map ( s => s . trim ( ) ) ;
131+
132+ // 替换导入语句
133+ componentContent = componentContent . replace ( importRegex , 'import styled from \'styled-components\'' ) ;
134+
135+ // 添加样式定义
136+ let stylesCode = '\n' ;
137+ importedStyles . forEach ( styleName => {
138+ if ( exportedStyles [ styleName ] ) {
139+ stylesCode += exportedStyles [ styleName ] + '\n\n' ;
140+ }
141+ } ) ;
142+
143+ // 在导入语句后插入样式代码
144+ const importEndIndex = componentContent . indexOf ( ';' , componentContent . indexOf ( 'import styled' ) ) ;
145+ if ( importEndIndex !== - 1 ) {
146+ componentContent =
147+ componentContent . substring ( 0 , importEndIndex + 1 ) +
148+ stylesCode +
149+ componentContent . substring ( importEndIndex + 1 ) ;
150+ }
151+
152+ // 保存修改后的组件文件
153+ fs . writeFileSync ( filePath , componentContent , 'utf8' ) ;
154+ console . log ( ` 更新了文件: ${ filePath } ` ) ;
155+ }
156+ } ) ;
157+ }
0 commit comments