feat: 线上部署优化

jd/generate-themes-dev.js

@@ -0,0 +1,36 @@
+const config = require('../src/config.json');
+const path = require('path');
+const fs = require('fs-extra');
+let fileStr = `@import '../variables.scss';\n`;
+let tasks = [];
+config.nav.map((item) => {
+  item.packages.forEach((element) => {
+    let folderName = element.name.toLowerCase();
+    tasks.push(
+      fs
+        .copy(
+          path.resolve(__dirname, `../src/packages/__VUE/${folderName}/index.scss`),
+          path.resolve(__dirname, `../dist/theme/source/packages/${folderName}/index.scss`)
+        )
+        .then((success) => {
+          fileStr += `@import '../../packages/${folderName}/index.scss';\n`;
+        })
+        .catch((error) => {})
+    );
+  });
+});
+
+tasks.push(
+  fs.copy(path.resolve(__dirname, '../src/packages/styles'), path.resolve(__dirname, '../dist/theme/source/styles'))
+);
+
+Promise.all(tasks).then((res) => {
+  fs.outputFile(
+    path.resolve(__dirname, '../dist/theme/source/styles/themes/default.scss'),
+    fileStr,
+    'utf8',
+    (error) => {
+      // logger.success(`文件写入成功`);
+    }
+  );
+});

package.json

@@ -35,10 +35,10 @@
   "scripts": {
     "checked": "npm run generate:file && tsc",
     "checked:taro:vue": "npm run generate:file:taro:vue",
-    "dev": "npm run checked && vite --open --force",
+    "dev": "npm run checked  && npm run generate:themes-dev && vite --open --force",
     "dev:taro:vue": "npm run checked:taro:vue && cd src/sites/mobile-taro/vue/ && npm run dev:weapp",
     "dev:taro:h5": "npm run checked:taro:vue && cd src/sites/mobile-taro/vue/ && npm run dev:h5",
-    "build:site": "npm run checked && vite build",
+    "build:site": "npm run checked && vite build && npm run generate:themes-dev",
     "build:site:oss": "npm run checked && vite build --base=/nutui/3x/",
     "build": "npm run checked && vite build --config vite.config.build.ts && vite build --config vite.config.build.disperse.ts && npm run generate:types && npm run generate:themes && vite build --config vite.config.build.css.ts",
     "build:taro:vue": "npm run checked:taro:vue && vite build --config vite.config.build.taro.vue.ts && vite build --config vite.config.build.taro.vue.disperse.ts && npm run generate:types && npm run generate:themes && vite build --config vite.config.build.css.ts",
@@ -51,6 +51,7 @@
     "generate:file:taro:vue": "node jd/generate-nutui-taro-vue.js",
     "generate:types": "node jd/generate-types.js",
     "generate:themes": "node jd/generate-themes.js",
+    "generate:themes-dev": "node jd/generate-themes-dev.js",
     "prepare": "husky install",
     "test": "jest",
     "release": "standard-version -a",

src/packages/styles/variables.scss

@@ -1,10 +1,8 @@
 // color
 
 // 主色调
-// $primary-color: #fa2c19 !default;
-// $primary-color-end: #fa6419 !default;
-$primary-color: #2c68ff;
-$primary-color-end: #2c68ff;
+$primary-color: #fa2c19 !default;
+$primary-color-end: #fa6419 !default;
 
 // 辅助色
 $help-color: #f5f5f5 !default;

src/sites/config/env.ts

@@ -1,5 +1,6 @@
 type EnvConfig = {
   baseUrl: string;
+  themeUrl: string;
   isPrd: boolean;
 };
 
@@ -12,6 +13,7 @@ type EnvConfig = {
 
 const config: EnvConfig = {
   baseUrl: '',
+  themeUrl: '',
   isPrd: true // 是否为线上
 };
 switch (import.meta.env.MODE) {
@@ -21,6 +23,7 @@ switch (import.meta.env.MODE) {
      */
     config.isPrd = false;
     config.baseUrl = '/devServer';
+    config.themeUrl = '/theme/dist/theme/source';
     break;
   case 'production':
     /*
@@ -28,6 +31,7 @@ switch (import.meta.env.MODE) {
      */
     config.isPrd = true;
     config.baseUrl = 'https://nutui.jd.com';
+    config.themeUrl = './source';
     break;
 }
 export default config;

src/sites/doc/components/ThemeSetting/Index.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="theme-setting">
-    {{ name }}
-    <button @click="downloadScssVariables">点击下载主题变量</button>
+    <n-space>
+      <n-button dashed type="info">主题定制：{{ name }} 组件</n-button>
+      <n-button type="info" @click="downloadScssVariables">下载主题变量</n-button>
+    </n-space>
+    <n-divider />
     <ul>
       <li :key="item.key" v-for="item in formItems">
         <p
@@ -25,7 +28,7 @@
 <script lang="ts">
 import { defineComponent, watch } from 'vue';
 import { useThemeEditor } from './helper';
-import { NColorPicker, NInput } from 'naive-ui';
+import { NColorPicker, NInput, NButton, NSpace, NDivider } from 'naive-ui';
 
 export default defineComponent({
   name: 'theme-setting',
@@ -34,7 +37,10 @@ export default defineComponent({
   },
   components: {
     NColorPicker,
-    NInput
+    NInput,
+    NButton,
+    NSpace,
+    NDivider
   },
   setup(props) {
     // 获取样式文件，正则匹配
@@ -57,6 +63,8 @@ export default defineComponent({
   li {
     list-style: none;
     margin-bottom: 12px;
+    margin-left: 0px;
+    padding-left: 0px;
     &::before {
       display: none;
     }

src/sites/doc/components/ThemeSetting/helper.ts

@@ -1,3 +1,4 @@
+import config from '@/sites/config/env';
 import { reactive, watch, onMounted, computed, onBeforeUnmount } from 'vue';
 import { useRoute } from 'vue-router';
 import configs from '../../../../config.json';
@@ -128,9 +129,8 @@ const store: Store = reactive({
 });
 
 const getSassVariables = async () => {
-  const rawVariablesText = await getRawFileText(
-    '/devRaw/jd-platform-opensource/nutui/raw/next/src/packages/styles/variables.scss'
-  );
+  // vite 启动模式 bug 待修复
+  const rawVariablesText = await getRawFileText(`${config.themeUrl}/styles/variables.scss`);
   const rawVariables = parseSassVariables(rawVariablesText, components);
 
   // 固定自定义主题的访问链接: https://nutui.jd.com/theme/?theme=自定义变量的文件地址#/
@@ -161,9 +161,7 @@ const getSassVariables = async () => {
 
 export const getRawSassStyle = async (name: string): Promise<void> => {
   if (!store.rawStyles[name]) {
-    const style = await getRawFileText(
-      `/devRaw/jd-platform-opensource/nutui/raw/next/src/packages/__VUE/${name}/index.scss`
-    );
+    const style = await getRawFileText(`${config.themeUrl}/packages/${name}/index.scss`);
     store.rawStyles[name] = style;
   }
 };

vite.config.ts

@@ -10,6 +10,7 @@ const resolve = path.resolve;
 // https://vitejs.dev/config/
 export default defineConfig({
   base: '/theme/',
+  // assetsInclude: ['/dist/**/source/*.scss'],
   server: {
     port: 2021,
     host: '0.0.0.0',
@@ -18,11 +19,6 @@ export default defineConfig({
         target: 'https://nutui.jd.com',
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/devServer/, '')
-      },
-      '/devRaw': {
-        target: 'https://gitee.com',
-        changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/devRaw/, '')
       }
     }
   },
@@ -94,8 +90,8 @@ export default defineConfig({
     cssCodeSplit: true,
     rollupOptions: {
       input: {
-        doc: resolve(__dirname, 'index.html')
-        // mobile: resolve(__dirname, 'demo.html')
+        doc: resolve(__dirname, 'index.html'),
+        mobile: resolve(__dirname, 'demo.html')
       }
     }
   }