BIGTOP-4186: Introduce postcss for CSS processing

bigtop-manager-ui/README.md

@@ -32,21 +32,26 @@ Editor: VsCode
 ## Project Structure
 
 ```
-—————————————————— public           static resources
-—————————————————— src              project source code
-——————————— API                     calls the backend interface
-——————————— assets                  static assets
-——————————— components              customize components
-——————————— layouts                 vue pages
-——————————— locales                 internationalization
-——————————— pages                   components
-——————————— router                  router
-———————————store                    global persistence
-———————————types                    data type
-——————————— utils                   utility function
-——————————— App.vue                 project root component
-———————————main.ts                  Project packaging portal
-——————————————————index.html        Project page
-——————————————————package.json      Package management profile for your project
-——————————————————vite.config.ts    Project configuration file
+—————————————————— public               static resources
+—————————————————— src                  project source code
+——————————— api                         calls the backend interface
+——————————— assets                      static assets
+——————————— components                  customize components
+——————————— composables                 composable
+——————————— directives                  customize directive
+——————————— layouts                     overall page layout
+——————————— locales                     internationalization
+——————————— pages                       components
+——————————— plugins                     global registration configuration
+——————————— router                      router
+——————————— store                       global persistence
+——————————— styles                      style file
+——————————— types                       data type
+——————————— utils                       utility function
+——————————— App.vue                     project root component
+——————————— main.ts                     Project packaging portal
+—————————————————— index.html           Project page
+—————————————————— package.json         Package management profile for your project
+—————————————————— vite.config.ts       Project configuration file
+—————————————————— postcss.config.ts    postcss configuration file
 ```

bigtop-manager-ui/README.zh.md

@@ -32,21 +32,26 @@ Vue：版本3.3.4
 ## 项目结构
 
 ```
-——————————————————public           公共静态资源
-——————————————————src              项目源代码
-———————————api                     调用后端接口
-———————————assets                  静态资源
-———————————components              自定义组件
-———————————layouts                 Vue页面
-———————————locales                 国际化
-———————————pages                   页面组件
-———————————router                  路由
-———————————store                   全局持久化
-———————————types                   数据类型
-———————————utils                   工具函数
-———————————App.vue                 项目根组件
-———————————main.ts                 项目打包入口
-——————————————————index.html       项目页面
-——————————————————package.json     项目的包管理配置文件
-——————————————————vite.config.ts   项目配置文件
+——————————————————public                公共静态资源
+——————————————————src                   项目源代码
+——————————— api                         调用后端接口
+——————————— assets                      静态资源
+——————————— components                  自定义组件
+——————————— composables                 组合式函数
+——————————— directives                  自定义指令
+——————————— layouts                     整体页面布局
+——————————— locales                     国际化
+——————————— pages                       组件
+——————————— plugins                     全局注册配置
+——————————— router                      路由
+——————————— store                       全局持久化
+——————————— styles                      样式文件
+——————————— types                       数据类型
+——————————— utils                       工具函数
+——————————— App.vue                     项目根组件
+——————————— main.ts                     项目打包入口
+—————————————————— index.html           项目页面
+—————————————————— package.json         项目的包管理配置文件
+—————————————————— vite.config.ts       项目配置文件
+—————————————————— postcss.config.ts    postcss 配置文件
 ```

bigtop-manager-ui/package.json

@@ -31,16 +31,27 @@
     "@typescript-eslint/eslint-plugin": "^6.4.1",
     "@typescript-eslint/parser": "^6.4.1",
     "@vitejs/plugin-vue": "^4.2.3",
+    "autoprefixer": "^10.4.20",
+    "cssnano": "^7.0.5",
     "eslint": "^8.47.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-vue": "^9.17.0",
+    "postcss": "^8.4.41",
     "prettier": "^3.0.2",
     "sass": "^1.66.1",
     "sass-loader": "^13.3.2",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",
     "vite-plugin-svg-icons": "^2.0.1",
     "vue-tsc": "^1.8.5"
-  }
+  },
+  "browserslist": [
+    "defaults",
+    "not ie < 11",
+    "last 2 versions",
+    "> 1%",
+    "iOS 7",
+    "last 3 iOS versions"
+  ]
 }