Merge pull request #2073 from Azir-11/v2.8.5

feat: 明确模块化为 EsModules，去除 postcss，提高 uno 的兼容性，支持解析 scss 的 apply；优化部分样式；

Author: pixelmaxQm

web/limit.js

@@ -1,6 +1,6 @@
 // 运行项目前通过node执行此脚本 （此脚本与 node_modules 目录同级）
-const fs = require('fs')
-const path = require('path')
+import fs from 'fs'
+import path from 'path'
 const wfPath = path.resolve(__dirname, './node_modules/.bin')
 
 fs.readdir(wfPath, (err, files) => {

web/openDocument.js

@@ -3,7 +3,7 @@
      未经授权的商用使用可能会被我们的资产搜索引擎爬取，并可能导致后续索赔。索赔金额将不低于高级授权费的十倍。请您遵守版权法律法规，尊重知识产权。
 */
 
-var child_process = require('child_process')
+import child_process from 'child_process'
 
 var url = 'https://www.gin-vue-admin.com'
 var cmd = ''

web/package.json

@@ -9,10 +9,12 @@
     "preview": "vite preview",
     "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit"
   },
+  "type": "module",
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
     "@form-create/designer": "^3.2.6",
     "@form-create/element-ui": "^3.2.10",
+    "@unocss/transformer-directives": "^66.4.2",
     "@vue-office/docx": "^1.6.2",
     "@vue-office/excel": "^1.7.11",
     "@vue-office/pdf": "^2.0.2",
@@ -55,7 +57,6 @@
     "@babel/eslint-parser": "^7.25.1",
     "@eslint/js": "^8.56.0",
     "@unocss/extractor-svelte": "^66.4.2",
-    "@unocss/postcss": "^66.4.2",
     "@unocss/preset-wind3": "^66.4.2",
     "@vitejs/plugin-legacy": "^6.0.0",
     "@vitejs/plugin-vue": "^5.0.3",

web/postcss.config.js

@@ -7,13 +7,13 @@
       <!-- 弹窗头部 -->
       <div class="p-5 border-b border-gray-100 flex justify-between items-center">
         <h3 class="text-lg font-semibold text-gray-800">{{ displayData.title }}</h3>
-        <button class="text-gray-400 hover:text-gray-600 transition-colors" @click="closeModal">
-          <close />
-        </button>
+        <div class="text-gray-400 hover:text-gray-600 transition-colors cursor-pointer" @click="closeModal">
+          <close class="h-6 w-6" />
+        </div>
       </div>
 
       <!-- 弹窗内容 -->
-      <div class="p-6">
+      <div class="p-6 pt-0">
         <!-- 错误类型 -->
         <div class="mb-4">
           <div class="text-xs font-medium text-gray-500 uppercase mb-2">错误类型</div>
@@ -45,16 +45,16 @@
 
       <!-- 弹窗底部 -->
       <div class="py-2 px-4 border-t border-gray-100 flex justify-end">
-        <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium text-sm shadow-sm" @click="handleConfirm">
+        <div class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium text-sm shadow-sm cursor-pointer" @click="handleConfirm">
           确定
-        </button>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { defineProps, defineEmits, ref, computed, onMounted } from 'vue';
+import { defineProps, defineEmits, computed } from 'vue';
 
 const props = defineProps({
   errorData: {

web/src/components/errorPreview/index.vue

@@ -1,5 +1,6 @@
 import './style/element_visiable.scss'
 import 'element-plus/theme-chalk/dark/css-vars.css'
+import 'uno.css';
 import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
 

web/src/main.js

@@ -1,8 +1,6 @@
 @use '@/style/iconfont.css';
 @use "./transition.scss";
 
-@unocss;
-
 .html-grey {
   filter: grayscale(100%);
 }

web/src/style/main.scss

@@ -1,5 +1,6 @@
-import { defineConfig } from 'unocss'
+import { defineConfig } from '@unocss/vite';
 import presetWind3 from '@unocss/preset-wind3';
+import transformerDirectives from '@unocss/transformer-directives'
 
 export default defineConfig({
   theme: {
@@ -19,4 +20,7 @@ export default defineConfig({
   presets: [
     presetWind3({ dark: 'class' })
   ],
+  transformers: [
+    transformerDirectives(),
+  ],
 })