package.json

@@ -9,7 +9,8 @@
     "*.scss",
     "dist/esm/**/style/*",
     "dist/style.css",
-    "dist/styles/font/*"
+    "dist/styles/font/*",
+    "dist/styles/font-jmapp/*"
   ],
   "description": "京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序",
   "keywords": [
@@ -49,6 +50,7 @@
     "generate:themes-dev": "node scripts/generate-themes-dev.js",
     "checked": "npm run generate:file && tsc",
     "dev": "npm run checked && vite --open --force",
+    "dev:jmapp": "npm run checked && VITE_APP_PROJECT_ID=jmapp vite --open --force",
     "dev:theme": "npm run generate:themes-dev && npm run checked && vite  --force --config vite.config.theme.ts",
     "replace:scss": "node scripts/replace-scss-alias.js",
     "build:dts": "node scripts/export-props.js && npx rollup -c rollup.config.dts.mjs",
@@ -74,9 +76,11 @@
     "dev:taro:weapp": "npm run checked:taro && npm run generate:file:taro:pages && cd ./src/sites/mobile-taro && npm run dev:weapp",
     "dev:taro:jd": "npm run checked:taro && npm run generate:file:taro:pages && cd ./src/sites/mobile-taro && npm run dev:jd",
     "dev:taro:h5": "npm run checked:taro && npm run generate:file:taro:pages && cd ./src/sites/mobile-taro && npm run dev:h5",
+    "dev:taro:weapp:jmapp": "npm run checked:taro && VITE_APP_PROJECT_ID=jmapp npm run generate:file:taro:pages && cd ./src/sites/mobile-taro && npm run dev:weapp:jmapp",
     "replace:taro:types": "node scripts/taro/replace-taro-types-alias.js",
     "build:taro": "npm run checked:taro && vite build --config vite.config.build.taro.ts && npm run build:taro:es  && npm run build:css && npm run build:loader-style && npm --taro run build:dts && npm run build:locales",
     "build:taro:es": "vite build --config vite.config.build.disperse.taro.ts",
+    "build:taro:jmapp": "npm run checked:taro && vite build --config vite.config.build.taro.ts && npm run build:taro:es  && VITE_APP_PROJECT_ID=jmapp npm run build:css && VITE_APP_PROJECT_ID=jmapp npm run build:loader-style && npm --taro run build:dts && npm run build:locales",
     "build:taro:weapp": "npm run checked:taro && vite build --config vite.config.build.taro.ts && npm run generate:file:taro:pages && cd ./src/sites/mobile-taro && npm run build:weapp",
     "add:taro:config": "node scripts/taro/generate-taro-route.js"
   },
@@ -199,4 +203,4 @@
     "@types/react": "18",
     "@types/react-dom": "18"
   }
-}
+}
\ No newline at end of file

scripts/generate-loader-style.js

@@ -2,7 +2,7 @@ const config = require('../src/config.json')
 const path = require('path')
 const fse = require('fs-extra')
 const fs = require('fs')
-
+const projectID = process.env.VITE_APP_PROJECT_ID
 const components = []
 
 config.nav.forEach((c) => {
@@ -72,7 +72,10 @@ config.nav.map((item) => {
         fse.outputFileSync(componentSassFile, data)
       }
       if (nameLowerCase === 'icon') {
-        rewrite = `import '../../../styles/font/iconfont.css'\n` + rewrite
+        rewrite =
+          `import '../../../styles/font${
+            projectID ? `-${projectID}` : ''
+          }/iconfont.css'\n` + rewrite
       }
       fse.outputFileSync(
         file,

scripts/generate-themes.js

@@ -2,8 +2,14 @@ const config = require('../src/config.json')
 const path = require('path')
 const fs = require('fs-extra')
 const glob = require('glob')
-const componentsScss = glob.sync('./src/packages/**/*.scss')
+
+let fileStr = `@import '../theme-default.scss';\n@import '../variables.scss';\n@import '../../styles/font/iconfont.css';\n`
+const projectID = process.env.VITE_APP_PROJECT_ID
+if (projectID) {
+  fileStr = `@import '../theme-default.scss';\n@import '../variables-${projectID}.scss';\n@import '../../styles/font-${projectID}/iconfont.css';\n`
+}
 let tasks = []
+const componentsScss = glob.sync('./src/packages/**/*.scss')
 componentsScss.map((cs) => {
   if (cs.indexOf('demo.scss') > -1) return
   tasks.push(
@@ -16,8 +22,6 @@ componentsScss.map((cs) => {
   )
 })
 
-let fileStr = `@import '../theme-default.scss';\n@import '../variables.scss';\n@import '../../styles/font/iconfont.css';\n`
-
 config.nav.map((item) => {
   item.packages.forEach((element) => {
     let folderName = element.name.toLowerCase()

scripts/taro/generate-taro-pages.js

@@ -5,6 +5,12 @@ const fsExtra = require('fs-extra')
 const config = require('../../src/config.json')
 const navs = config.nav
 
+let fileStr = `@import '../../../styles/font/iconfont.css';\n`
+const projectID = process.env.VITE_APP_PROJECT_ID
+if (projectID) {
+  fileStr = `@import '../../../styles/font-${projectID}/iconfont.css';\n`
+}
+
 // 在mobile-taro下创建相应的文件夹，并创建index.config.ts、index.tsx
 // 将packages下的demo.taro.tsx 的内容拷贝到 mobile-taro 下的 index.tsx 中。
 const createIndexConfig = (enName, package) => {
@@ -68,12 +74,33 @@ const createIndexConfig = (enName, package) => {
     }
   })
 }
+
+const replaceAppSCSS = () => {
+  const dirPath = path.join(__dirname, `../../src/sites/mobile-taro/src`)
+  const filePath = path.join(dirPath, `app.scss`)
+  fse.readFile(filePath, (err, data) => {
+    if (!err) {
+      let fileString = data.toString()
+      const lines = fileString.split('\n')
+      if (lines[0].indexOf(`@import '../../../styles/font`) !== -1) {
+        lines[0] = ''
+      }
+      fileString = fileStr + lines.join('\n')
+      fsExtra.outputFile(filePath, fileString, 'utf8', (error) => {
+        if (error) console.log('Error', error)
+        // console.log(`文件写入成功`)
+      })
+    }
+  })
+}
+
 function create() {
   navs.map((nav) => {
     nav.packages.map((package) => {
       return createIndexConfig(nav.enName, package)
     })
   })
+  replaceAppSCSS()
 }
 
 create()

src/packages/address/customRender.tsx

@@ -368,7 +368,7 @@ export const CustomRender: FunctionComponent<
                           .id === (item as RegionData).id && (
                           <Check
                             className={b('region-item--icon')}
-                            color="#FA2C19"
+                            color="var(--nutui-brand-color)"
                             width={13}
                             height={13}
                           />

src/packages/avatar/demo.taro.tsx

@@ -100,7 +100,10 @@ const AvatarDemo = () => {
             bgColor="#FA2C19"
             icon={<My />}
           />
-          <Avatar color="rgb(245, 106, 0)" bgColor="rgb(253, 227, 207)">
+          <Avatar
+            color="var(--nutui-brand-color)"
+            bgColor="var(--nutui-brand-color-opacity)"
+          >
             U
           </Avatar>
         </Cell>

src/packages/avatar/demo.tsx

@@ -96,7 +96,10 @@ const AvatarDemo = () => {
             bgColor="#FA2C19"
             icon={<My />}
           />
-          <Avatar color="rgb(245, 106, 0)" bgColor="rgb(253, 227, 207)">
+          <Avatar
+            color="var(--nutui-brand-color)"
+            bgColor="var(--nutui-brand-color-opacity)"
+          >
             U
           </Avatar>
         </Cell>

src/packages/barrage/demo.taro.tsx

@@ -91,7 +91,7 @@ const BarrageDemo = () => {
           />
         </Cell>
         <div className="test" style={{ textAlign: 'center' }}>
-          <Button type="danger" onClick={addBarrage}>
+          <Button type="primary" onClick={addBarrage}>
             {translated['3d9b2794']}
           </Button>
         </div>

src/packages/barrage/demo.tsx

@@ -88,7 +88,7 @@ const BarrageDemo = () => {
           />
         </Cell>
         <div className="test" style={{ textAlign: 'center' }}>
-          <Button type="danger" onClick={addBarrage}>
+          <Button type="primary" onClick={addBarrage}>
             {translated['3d9b2794']}
           </Button>
         </div>

src/packages/cascader/cascader.taro.tsx

@@ -49,7 +49,7 @@ export interface CascaderProps {
 const defaultProps = {
   className: '',
   style: {},
-  activeColor: '#fa2c19',
+  activeColor: '',
   checkedIcon: 'checklist',
   tabsColor: '',
   poppable: true,

src/packages/cascader/cascader.tsx

@@ -48,7 +48,7 @@ export interface CascaderProps {
 const defaultProps = {
   className: '',
   style: {},
-  activeColor: '#fa2c19',
+  activeColor: '',
   checkedIcon: 'checklist',
   tabsColor: '',
   poppable: true,
@@ -296,7 +296,6 @@ const InternalCascader: ForwardRefRenderFunction<
   /* type: 是否是静默模式，是的话不触发事件
   tabsCursor: tab的索引 */
   const chooseItem = async (node: CascaderOption, type: boolean) => {
-    // console.log('chooseItem', node)
     if ((!type && node.disabled) || !state.panes[state.tabsCursor]) {
       return
     }

src/packages/cascader/cascaderItem.taro.tsx

@@ -40,7 +40,7 @@ const defaultProps = {
     loading: false,
     children: [],
   },
-  activeColor: '#fa2c19',
+  activeColor: '',
   checked: false,
   checkedIcon: 'checklist',
   chooseItem: () => {},

src/packages/cascader/cascaderItem.tsx

@@ -40,7 +40,7 @@ const defaultProps = {
     loading: false,
     children: [],
   },
-  activeColor: '#fa2c19',
+  activeColor: '',
   checked: false,
   checkedIcon: 'checklist',
   chooseItem: () => {},

src/packages/circleprogress/demo.taro.tsx

@@ -70,8 +70,8 @@ const CircleProgressDemo = () => {
   }
 
   const gradientColor = {
-    '0%': '#FF5E5E',
-    '100%': '#FFA062',
+    '0%': 'var(--nutui-brand-color-start)',
+    '100%': 'var(--nutui-brand-color-end)',
   }
 
   return (
@@ -94,7 +94,10 @@ const CircleProgressDemo = () => {
 
         <h2>{translated['3fee7d50']}</h2>
         <div className="demo__piece">
-          <CircleProgress progress={50} circleColor="red" />
+          <CircleProgress
+            progress={50}
+            circleColor="var(--nutui-brand-color)"
+          />
           <CircleProgress progress={100} circleColor={gradientColor} />
         </div>
 

src/packages/circleprogress/demo.tsx

@@ -69,8 +69,8 @@ const CircleProgressDemo = () => {
   }
 
   const gradientColor = {
-    '0%': '#FF5E5E',
-    '100%': '#FFA062',
+    '0%': 'var(--nutui-brand-color-start)',
+    '100%': 'var(--nutui-brand-color-end)',
   }
 
   return (
@@ -88,7 +88,10 @@ const CircleProgressDemo = () => {
 
         <h2>{translated['3fee7d50']}</h2>
         <div className="demo__piece">
-          <CircleProgress progress={50} circleColor="red" />
+          <CircleProgress
+            progress={50}
+            circleColor="var(--nutui-brand-color)"
+          />
           <CircleProgress progress={100} circleColor={gradientColor} />
         </div>
 

src/packages/collapse/demo.taro.tsx

@@ -261,10 +261,24 @@ const CollapseDemo = () => {
           })}
         </Collapse>
         {/* eslint-disable-next-line react/button-has-type */}
-        <Button type="primary" size="small" onClick={() => changeNewData()}>
+        <Button
+          style={{
+            marginBottom: '20px',
+            marginTop: '20px',
+            marginRight: '10px',
+          }}
+          type="primary"
+          size="small"
+          onClick={() => changeNewData()}
+        >
           {translated.buttonTextOne}
         </Button>
-        <Button type="info" size="small" onClick={() => changeOldData()}>
+        <Button
+          style={{ marginBottom: '20px', marginTop: '20px' }}
+          type="info"
+          size="small"
+          onClick={() => changeOldData()}
+        >
           {translated.buttonTextSec}
         </Button>
       </div>

src/packages/collapse/demo.tsx

@@ -262,10 +262,24 @@ const CollapseDemo = () => {
           })}
         </Collapse>
         {/* eslint-disable-next-line react/button-has-type */}
-        <Button type="primary" size="small" onClick={() => changeNewData()}>
+        <Button
+          style={{
+            marginBottom: '20px',
+            marginTop: '20px',
+            marginRight: '10px',
+          }}
+          type="primary"
+          size="small"
+          onClick={() => changeNewData()}
+        >
           {translated.buttonTextOne}
         </Button>
-        <Button type="info" size="small" onClick={() => changeOldData()}>
+        <Button
+          style={{ marginBottom: '20px', marginTop: '20px' }}
+          type="info"
+          size="small"
+          onClick={() => changeOldData()}
+        >
           {translated.buttonTextSec}
         </Button>
       </div>

src/packages/countdown/demo.taro.tsx

 import React, { useEffect, useRef, useState } from 'react'
-import { Button, Cell, CountDown } from '@/packages/nutui.react.taro'
-import Header from '@/sites/components/header'
 import Taro from '@tarojs/taro'
+import {
+  Button,
+  Cell,
+  CountDown,
+  Grid,
+  GridItem,
+} from '@/packages/nutui.react.taro'
+import Header from '@/sites/components/header'
+import { useTranslate } from '@/sites/assets/locale/taro'
 
+interface countdownRefState {
+  start: () => void
+  pause: () => void
+  reset: () => void
+}
+interface T {
+  basic: string
+  format: string
+  millisecond: string
+  serverTime: string
+  async: string
+  controlTime: string
+  customStyle: string
+  handleControl: string
+  start: string
+  pause: string
+  reset: string
+  day: string
+  hour: string
+  minute: string
+  second: string
+}
 const CountDownDemo = () => {
+  const [translated] = useTranslate<T>({
+    'zh-CN': {
+      basic: '基本用法',
+      format: '自定义格式',
+      millisecond: '毫秒级渲染',
+      serverTime: '以服务端的时间为准',
+      async: '异步更新结束时间',
+      controlTime: '控制开始和暂停的倒计时',
+      customStyle: '自定义展示样式',
+      handleControl: '手动控制',
+      start: '开始',
+      pause: '暂停',
+      reset: '重置',
+      day: '天',
+      hour: '时',
+      minute: '分',
+      second: '秒',
+    },
+    'zh-TW': {
+      basic: '基本用法',
+      format: '自定义格式',
+      millisecond: '毫秒级渲染',
+      serverTime: '以服务端的时间为准',
+      async: '异步更新结束时间',
+      controlTime: '控制开始和暂停的倒计时',
+      customStyle: '自定义展示样式',
+      handleControl: '手动控制',
+      start: '开始',
+      pause: '暂停',
+      reset: '重置',
+      day: '天',
+      hour: '时',
+      minute: '分',
+      second: '秒',
+    },
+    'en-US': {
+      basic: 'Basic Usage',
+      format: 'Custom Format',
+      millisecond: 'Millisecond',
+      serverTime: 'Server Time Prevails',
+      async: 'End-Time of Asyn Update',
+      controlTime: 'Manual Control',
+      customStyle: 'Custom Style',
+      handleControl: 'Handle Control',
+      start: 'Start',
+      pause: 'Pause',
+      reset: 'Reset',
+      day: 'Day',
+      hour: ':',
+      minute: ':',
+      second: '',
+    },
+  })
   const stateRef = useRef({
     timer: -1,
     serverTime: Date.now() - 30 * 1000,
     endTime: Date.now() + 50 * 1000,
   })
 
+  const countDownRef = useRef<countdownRefState>(null)
+
   const [paused, setPaused] = useState(false)
   const [asyncEnd, setAsyncEnd] = useState(0)
   const [resetTime, setResetTime] = useState({
@@ -26,7 +110,7 @@ const CountDownDemo = () => {
     justifyContent: 'center',
     width: '20px',
     height: '25px',
-    background: '#e8220e',
+    background: 'var(--nutui-brand-color)',
     color: '#fff',
     fontSize: '14px',
     borderRadius: '6px',
@@ -62,43 +146,61 @@ const CountDownDemo = () => {
     console.log('restTime: ', v)
     setResetTime(v)
   }
+  const start = () => {
+    console.log(countDownRef.current)
+    countDownRef.current && countDownRef.current.start()
+  }
+
+  const pause = () => {
+    countDownRef.current && countDownRef.current.pause()
+  }
+
+  const reset = () => {
+    countDownRef.current && countDownRef.current.reset()
+  }
   return (
     <>
       <Header />
       <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
-        <h2>基础用法</h2>
+        <h2>{translated.basic}</h2>
         <Cell>
-          <CountDown endTime={stateRef.current.endTime} onEnd={onEnd} />
+          <CountDown
+            endTime={stateRef.current.endTime}
+            onUpdate={onUpdate}
+            onEnd={onEnd}
+          />
         </Cell>
-        <h2>显示天</h2>
-
+        <h2>{translated.format}</h2>
         <Cell>
-          <CountDown endTime={stateRef.current.endTime} />
+          <CountDown
+            endTime={stateRef.current.endTime}
+            format={`DD ${translated.day} HH ${translated.hour} mm ${translated.minute} ss ${translated.second}`}
+          />
         </Cell>
 
-        <h2>以服务端的时间为准</h2>
-
+        <h2>{translated.millisecond}</h2>
         <Cell>
           <CountDown
-            startTime={stateRef.current.serverTime}
             endTime={stateRef.current.endTime}
+            millisecond
+            format="HH:mm:ss:SS"
           />
         </Cell>
 
-        <h2>显示为天时分秒</h2>
-
+        <h2>{translated.serverTime}</h2>
         <Cell>
-          <CountDown endTime={stateRef.current.endTime} />
+          <CountDown
+            startTime={stateRef.current.serverTime}
+            endTime={stateRef.current.endTime}
+          />
         </Cell>
 
-        <h2>异步更新结束时间</h2>
-
+        <h2>{translated.async}</h2>
         <Cell>
           <CountDown endTime={asyncEnd} />
         </Cell>
 
-        <h2>控制开始和暂停的倒计时</h2>
-
+        <h2>{translated.controlTime}</h2>
         <Cell>
           <CountDown
             endTime={stateRef.current.endTime}
@@ -115,8 +217,7 @@ const CountDownDemo = () => {
           </div>
         </Cell>
 
-        <h2>自定义展示</h2>
-
+        <h2>{translated.customStyle}</h2>
         <Cell>
           <span>
             <CountDown endTime={stateRef.current.endTime} onUpdate={onUpdate}>
@@ -146,6 +247,33 @@ const CountDownDemo = () => {
             </CountDown>
           </span>
         </Cell>
+
+        <h2>{translated.handleControl}</h2>
+        <Cell>
+          <CountDown
+            format="ss:SS"
+            autoStart={false}
+            time={20000}
+            ref={countDownRef}
+          />
+        </Cell>
+        <Grid columnNum="3" style={{ marginBottom: '5px' }}>
+          <GridItem>
+            <Button type="primary" onClick={start}>
+              {translated.start}
+            </Button>
+          </GridItem>
+          <GridItem>
+            <Button type="primary" onClick={pause}>
+              {translated.pause}
+            </Button>
+          </GridItem>
+          <GridItem>
+            <Button type="primary" onClick={reset}>
+              {translated.reset}
+            </Button>
+          </GridItem>
+        </Grid>
       </div>
     </>
   )

src/packages/countdown/demo.tsx

@@ -106,7 +106,7 @@ const CountDownDemo = () => {
     justifyContent: 'center',
     width: '20px',
     height: '25px',
-    background: '#e8220e',
+    background: 'var(--nutui-brand-color)',
     color: '#fff',
     fontSize: '14px',
     borderRadius: '6px',
@@ -165,7 +165,6 @@ const CountDownDemo = () => {
             onEnd={onEnd}
           />
         </Cell>
-
         <h2>{translated.format}</h2>
         <Cell>
           <CountDown

src/packages/datepicker/datepicker.taro.tsx

@@ -402,8 +402,8 @@ export const DatePicker: FunctionComponent<
     <View
       className={`nut-datepicker ${className || ''}`}
       style={style}
-      {...(rest as any)}
       catchMove
+      {...(rest as any)}
     >
       {listData.length > 0 && (
         <Picker

src/packages/dialog/dialog.scss

@@ -13,7 +13,7 @@
   &__header {
     display: block;
     text-align: center;
-    height: $dialog-header-height;
+    // height: $dialog-header-height;
     font-size: $font-size-3;
     color: $title-color;
     @include oneline-ellipsis();

src/packages/drag/demo.taro.tsx

@@ -64,7 +64,7 @@ const DragDemo = () => {
     color: '#fff',
     display: 'inline-block',
     lineHeight: '36px',
-    background: 'linear-gradient(135deg,#fa2c19 0,#fa6419 100%)',
+    background: `var(--nutui-brand-color)`,
   }
   return (
     <>
@@ -122,7 +122,7 @@ const DragDemo = () => {
             left: '8px',
             width: '300px',
             height: '200px',
-            border: '1px solid red',
+            border: '1px solid var(--nutui-brand-color)',
           }}
         />
         <Drag

src/packages/drag/demo.tsx

@@ -58,7 +58,7 @@ const DragDemo = () => {
     color: '#fff',
     display: 'inline-block',
     lineHeight: '36px',
-    background: 'linear-gradient(135deg,#fa2c19 0,#fa6419 100%)',
+    background: `var(--nutui-brand-color)`,
   }
   return (
     <div className="demo">
@@ -92,7 +92,7 @@ const DragDemo = () => {
           left: '8px',
           width: '300px',
           height: '200px',
-          border: '1px solid red',
+          border: '1px solid var(--nutui-brand-color)',
         }}
       />
       <Drag

src/packages/ellipsis/ellipsis.taro.tsx

 import React, { FunctionComponent, useState, useRef, useEffect } from 'react'
 import { useReady, nextTick, createSelectorQuery } from '@tarojs/taro'
 import { useConfig } from '@/packages/configprovider/configprovider.taro'
-import { getRectByTaro } from '@/utils/useClientRect'
+import { getRectByTaro } from '@/utils/use-client-rect'
 
 export type Direction = 'start' | 'end' | 'middle'
 

src/packages/griditem/griditem.taro.tsx

@@ -62,6 +62,7 @@ export const GridItem: FunctionComponent<
     center,
     reverse,
     direction,
+    className,
     onClick,
     ...rest
   } = {
@@ -69,6 +70,7 @@ export const GridItem: FunctionComponent<
     ...props,
   }
   const b = bem('grid-item')
+  const classes = classNames(b(), className)
   const context = useContext(GridContext)
   const pxCheck = (value: string | number): string => {
     return Number.isNaN(Number(value)) ? String(value) : `${value}px`
@@ -125,7 +127,12 @@ export const GridItem: FunctionComponent<
   }
 
   return (
-    <div className={b()} style={rootStyle()} {...rest} onClick={handleClick}>
+    <div
+      className={classes}
+      style={rootStyle()}
+      {...rest}
+      onClick={handleClick}
+    >
       <div className={contentClass()}>
         {icon && <>{icon}</>}
         {text && (

src/packages/inputnumber/demo.tsx

@@ -208,6 +208,50 @@ const InputNumberDemo = () => {
             formatter={(value) => `${value}%`}
           />
         </Cell>
+
+        <h2>支持formatter</h2>
+        <Cell>
+          <InputNumber
+            className="format-width"
+            modelValue="1000"
+            min={10}
+            max={15020}
+            formatter={(value) =>
+              `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+            }
+          />
+        </Cell>
+        <Cell>
+          <InputNumber
+            className="format-width"
+            modelValue="100"
+            min={0}
+            max={100}
+            formatter={(value) => `${value}%`}
+          />
+        </Cell>
+
+        <h2>支持formatter</h2>
+        <Cell>
+          <InputNumber
+            className="format-width"
+            modelValue="1000"
+            min={10}
+            max={15020}
+            formatter={(value) =>
+              `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+            }
+          />
+        </Cell>
+        <Cell>
+          <InputNumber
+            className="format-width"
+            modelValue="100"
+            min={0}
+            max={100}
+            formatter={(value) => `${value}%`}
+          />
+        </Cell>
       </div>
     </>
   )

src/packages/menu/menu.taro.tsx

@@ -20,7 +20,7 @@ const defaultProps = {
   ...ComponentDefaults,
   className: '',
   style: {},
-  activeColor: '#F2270C',
+  activeColor: '',
   closeOnClickOverlay: true,
   scrollFixed: false,
   lockScroll: true,

src/packages/menu/menu.tsx

@@ -20,7 +20,7 @@ const defaultProps = {
   ...ComponentDefaults,
   className: '',
   style: {},
-  activeColor: '#F2270C',
+  activeColor: '',
   closeOnClickOverlay: true,
   scrollFixed: false,
   lockScroll: true,

src/packages/noticebar/noticebar.taro.tsx

@@ -11,7 +11,7 @@ import React, {
 
 import classNames from 'classnames'
 import bem from '@/utils/bem'
-import { getRectByTaro } from '../../utils/useClientRect'
+import { getRectByTaro } from '../../utils/use-client-rect'
 
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { Close, Notice } from '@nutui/icons-react-taro'

src/packages/noticebar/noticebar.tsx

@@ -11,7 +11,7 @@ import React, {
 import { Close, Notice } from '@nutui/icons-react'
 import classNames from 'classnames'
 import bem from '@/utils/bem'
-import { getRect } from '../../utils/useClientRect'
+import { getRect } from '../../utils/use-client-rect'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 
 export interface NoticeBarProps extends BasicComponent {

src/packages/overlay/overlay.taro.tsx

 import React, { FunctionComponent, useEffect, useRef, useState } from 'react'
 import classNames from 'classnames'
-import bem from '@/utils/bem'
 import { View, ITouchEvent } from '@tarojs/components'
+import bem from '@/utils/bem'
 
 export interface OverlayProps {
   zIndex: number

src/packages/picker/picker.taro.tsx

@@ -8,7 +8,7 @@ import React, {
 import { View } from '@tarojs/components'
 import Popup from '@/packages/popup/index.taro'
 import PickerSlot from './pickerSlot.taro'
-import useRefs from '@/utils/useRefs'
+import useRefs from '@/utils/use-refs'
 import { useConfig } from '@/packages/configprovider/configprovider.taro'
 import bem from '@/utils/bem'
 

src/packages/picker/picker.tsx

@@ -7,7 +7,7 @@ import React, {
 } from 'react'
 import Popup from '@/packages/popup'
 import PickerSlot from './pickerSlot'
-import useRefs from '@/utils/useRefs'
+import useRefs from '@/utils/use-refs'
 import { useConfig } from '@/packages/configprovider'
 import bem from '@/utils/bem'
 

src/packages/picker/pickerSlot.taro.tsx

@@ -6,8 +6,8 @@ import React, {
   useImperativeHandle,
 } from 'react'
 import { PickerOption } from './picker.taro'
-import { useTouch } from '../../utils/useTouch'
-import { getRectByTaro } from '@/utils/useClientRect'
+import { useTouch } from '../../utils/use-touch'
+import { getRectByTaro } from '@/utils/use-client-rect'
 import { passiveSupported } from '@/utils/supports-passive'
 
 interface PickerSlotProps {

src/packages/picker/pickerSlot.tsx

@@ -6,7 +6,7 @@ import React, {
   useImperativeHandle,
 } from 'react'
 import { PickerOption } from './picker'
-import { useTouch } from '../../utils/useTouch'
+import { useTouch } from '../../utils/use-touch'
 
 interface PickerSlotProps {
   keyIndex?: number

src/packages/popover/popover.taro.tsx

@@ -8,7 +8,7 @@ import React, {
 import { ITouchEvent } from '@tarojs/components'
 import Trigger from './Trigger'
 import Overlay from '@/packages/overlay/index.taro'
-import { getRectByTaro } from '@/utils/useClientRect'
+import { getRectByTaro } from '@/utils/use-client-rect'
 
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 

src/packages/popover/popover.tsx

@@ -7,7 +7,7 @@ import React, {
 } from 'react'
 import Trigger from './Trigger'
 import Overlay from '@/packages/overlay'
-import { getRect } from '@/utils/useClientRect'
+import { getRect } from '@/utils/use-client-rect'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 
 export type PopoverTheme = 'light' | 'dark'

src/packages/popup/demo.taro.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { CircleClose, Heart } from '@nutui/icons-react-taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import '@/packages/popup/demo.scss'
-import { Cell, Popup } from '@/packages/nutui.react.taro'
+import { Cell, Popup, Input, Button } from '@/packages/nutui.react.taro'
 import Header from '@/sites/components/header'
 import Taro from '@tarojs/taro'
 
@@ -141,7 +141,14 @@ const PopupDemo = () => {
           onClose={() => {
             setShowBottom(false)
           }}
-        />
+        >
+          <div>
+            <Input placeholder="测试京麦的哦" type="number" />
+          </div>
+          <div>
+            <Button>chuxian</Button>
+          </div>
+        </Popup>
         <Cell
           title={translated.c3a3a1d2}
           isLink

src/packages/popup/demo.tsx

@@ -3,6 +3,8 @@ import { CircleClose, Heart } from '@nutui/icons-react'
 import { useTranslate } from '../../sites/assets/locale'
 import Cell from '@/packages/cell'
 import Popup from '@/packages/popup'
+import Input from '@/packages/input'
+import Button from '@/packages/button'
 import './demo.scss'
 
 interface T {
@@ -139,7 +141,14 @@ const PopupDemo = () => {
           onClose={() => {
             setShowBottom(false)
           }}
-        />
+        >
+          <div>
+            <Input placeholder="测试京麦的哦" type="number" />
+          </div>
+          <div>
+            <Button>chuxian</Button>
+          </div>
+        </Popup>
         <Cell
           title={translated.c3a3a1d2}
           isLink

src/packages/radio/radio.scss

@@ -5,16 +5,20 @@
   .nut-radio {
     &__label {
       color: $dark1;
+
       &--disabled {
         color: $dark2;
       }
     }
+
     &__button {
       background: $dark4;
       color: $dark1;
+
       &--active {
         color: $primary-color;
       }
+
       &--disabled {
         color: $dark2;
         border: 1px solid $dark2;
@@ -56,6 +60,7 @@
       color: $radio-label-font-active-color;
       border: 1px solid $radio-label-button-border-color;
     }
+
     &--disabled {
       color: $radio-label-disable-color;
       border: none;
@@ -66,6 +71,7 @@
     margin-left: $radio-label-margin-left;
     font-size: $radio-label-font-size;
     color: $radio-label-font-color;
+
     &--disabled {
       color: $radio-label-disable-color;
     }
@@ -77,9 +83,11 @@
     transition-property: color, border-color, background-color;
     font-size: $radio-icon-font-size;
   }
+
   &__icon--unchecked {
     color: $radio-icon-disable-color;
   }
+
   &__icon--disable {
     color: $radio-icon-disable-color2;
   }

src/packages/range/demo.scss

 .range-custom-button {
   width: 26px;
-  color: #fff;
+  color: #333;
   font-size: 10px;
   line-height: 18px;
   text-align: center;
-  background-color: #ee0a24;
-  border-radius: 100px;
+  background-color: #efefef;
+  border-radius: 10px;
 }

src/packages/range/range.taro.tsx

@@ -6,8 +6,8 @@ import React, {
   CSSProperties,
   useCallback,
 } from 'react'
-import { useTouch } from '../../utils/useTouch'
-import { getRectByTaro } from '../../utils/useClientRect'
+import { useTouch } from '../../utils/use-touch'
+import { getRectByTaro } from '../../utils/use-client-rect'
 import Toast from '@/packages/toast/index.taro'
 import { useConfig } from '@/packages/configprovider/configprovider.taro'
 

src/packages/range/range.tsx

@@ -6,8 +6,8 @@ import React, {
   CSSProperties,
   useCallback,
 } from 'react'
-import { useTouch } from '../../utils/useTouch'
-import { getRect } from '../../utils/useClientRect'
+import { useTouch } from '../../utils/use-touch'
+import { getRect } from '../../utils/use-client-rect'
 import Toast from '@/packages/toast'
 import { useConfig } from '@/packages/configprovider'
 

src/packages/sticky/sticky.taro.tsx

@@ -15,8 +15,8 @@ import {
   getEnv,
 } from '@tarojs/taro'
 import { BasicComponent } from '@/utils/typings'
-import useWatch from '@/utils/useWatch'
-import { getRectByTaro } from '@/utils/useClientRect'
+import useWatch from '@/utils/use-watch'
+import { getRectByTaro } from '@/utils/use-client-rect'
 import { getScrollParent } from '@/utils/get-scroll-parent'
 import bem from '@/utils/bem'
 

src/packages/sticky/sticky.tsx

@@ -7,8 +7,8 @@ import React, {
 } from 'react'
 import classNames from 'classnames'
 import { getScrollParent } from '@/utils/get-scroll-parent'
-import { getRect } from '@/utils/useClientRect'
-import useWatch from '@/utils/useWatch'
+import { getRect } from '@/utils/use-client-rect'
+import useWatch from '@/utils/use-watch'
 import { BasicComponent } from '@/utils/typings'
 import bem from '@/utils/bem'
 

src/packages/swipe/demo.taro.tsx

@@ -199,14 +199,19 @@ const SwipeDemo = () => {
         <Swipe
           ref={openRef}
           rightAction={
-            <Button shape="square" type="danger">
+            <Button shape="square" type="primary">
               {translated.del}
             </Button>
           }
+          style={{ marginBottom: '10px' }}
         >
           <Cell title={translated.openOrClose} roundRadius={0} />
         </Swipe>
-        <Button onClick={() => (openRef.current as any)?.open()}>
+        <Button
+          style={{ marginRight: '10px' }}
+          type="primary"
+          onClick={() => (openRef.current as any)?.open()}
+        >
           {translated.open}
         </Button>
         <Button onClick={() => (openRef.current as any)?.close()}>
@@ -216,7 +221,7 @@ const SwipeDemo = () => {
         <Swipe
           ref={closeRef}
           rightAction={
-            <Button shape="square" type="danger">
+            <Button shape="square" type="primary">
               {translated.del}
             </Button>
           }
@@ -229,7 +234,7 @@ const SwipeDemo = () => {
         <h2>{translated.title2}</h2>
         <Swipe
           rightAction={
-            <Button shape="square" type="danger">
+            <Button shape="square" type="primary">
               {translated.del}
             </Button>
           }
@@ -240,13 +245,13 @@ const SwipeDemo = () => {
         <h2>{translated.title3}</h2>
         <Swipe
           leftAction={
-            <Button shape="square" type="success">
+            <Button shape="square" type="primary">
               {translated.choose}
             </Button>
           }
           rightAction={
             <>
-              <Button shape="square" type="danger">
+              <Button shape="square" type="primary">
                 {translated.del}
               </Button>
               <Button shape="square" type="info">
@@ -286,11 +291,12 @@ const SwipeDemo = () => {
         <Swipe
           rightAction={
             <>
-              <Button shape="square" type="danger">
+              <Button shape="square" type="primary">
                 {translated.cart}
               </Button>
             </>
           }
+          style={{ marginBottom: '30px' }}
         >
           <Cell>
             <div

src/packages/swipe/demo.tsx

@@ -184,14 +184,19 @@ const SwipeDemo = () => {
         <Swipe
           ref={openRef}
           rightAction={
-            <Button shape="square" type="danger">
+            <Button shape="square" type="primary">
               {translated.del}
             </Button>
           }
+          style={{ marginBottom: '10px' }}
         >
           <Cell title={translated.openOrClose} roundRadius={0} />
         </Swipe>
-        <Button onClick={() => (openRef.current as any)?.open()}>
+        <Button
+          style={{ marginRight: '10px' }}
+          type="primary"
+          onClick={() => (openRef.current as any)?.open()}
+        >
           {translated.open}
         </Button>
         <Button onClick={() => (openRef.current as any)?.close()}>
@@ -201,7 +206,7 @@ const SwipeDemo = () => {
         <Swipe
           ref={closeRef}
           rightAction={
-            <Button shape="square" type="danger">
+            <Button shape="square" type="primary">
               {translated.del}
             </Button>
           }
@@ -214,7 +219,7 @@ const SwipeDemo = () => {
         <h2>{translated.title2}</h2>
         <Swipe
           rightAction={
-            <Button shape="square" type="danger">
+            <Button shape="square" type="primary">
               {translated.del}
             </Button>
           }
@@ -225,13 +230,13 @@ const SwipeDemo = () => {
         <h2>{translated.title3}</h2>
         <Swipe
           leftAction={
-            <Button shape="square" type="success">
+            <Button shape="square" type="primary">
               {translated.choose}
             </Button>
           }
           rightAction={
             <>
-              <Button shape="square" type="danger">
+              <Button shape="square" type="primary">
                 {translated.del}
               </Button>
               <Button shape="square" type="info">
@@ -270,11 +275,12 @@ const SwipeDemo = () => {
         <Swipe
           rightAction={
             <>
-              <Button shape="square" type="danger">
+              <Button shape="square" type="primary">
                 {translated.cart}
               </Button>
             </>
           }
+          style={{ marginBottom: '30px' }}
         >
           <Cell>
             <div

src/packages/swipe/swipe.taro.tsx

@@ -10,8 +10,8 @@ import React, {
 import classNames from 'classnames'
 import { nextTick, useReady } from '@tarojs/taro'
 import bem from '@/utils/bem'
-import { useTouch } from '@/utils/useTouch'
-import { getRectByTaro } from '@/utils/useClientRect'
+import { useTouch } from '@/utils/use-touch'
+import { getRectByTaro } from '@/utils/use-client-rect'
 
 export type SwipeSide = 'left' | 'right'
 export type SwipePosition = SwipeSide | 'cell' | 'outside'

src/packages/swipe/swipe.tsx

@@ -10,8 +10,8 @@ import React, {
 } from 'react'
 import classNames from 'classnames'
 import bem from '@/utils/bem'
-import { useTouch } from '@/utils/useTouch'
-import { getRect } from '@/utils/useClientRect'
+import { useTouch } from '@/utils/use-touch'
+import { getRect } from '@/utils/use-client-rect'
 
 export type SwipeSide = 'left' | 'right'
 export type SwipePosition = SwipeSide | 'cell' | 'outside'

src/packages/swiper/swiper.scss

 @import '../swiperitem/swiperitem.scss';
+
 .nut-swiper {
   position: relative;
   z-index: 1;
@@ -6,31 +7,37 @@
   transition-property: transform;
   box-sizing: content-box;
   overflow: hidden;
+
   &__inner {
     display: flex;
     height: 100%;
   }
+
   &__vertical {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     flex-direction: column;
   }
+
   &__pagination {
     display: flex;
     position: absolute;
     left: 50%;
     bottom: $swiper-pagination-bottom;
     transform: translateX(-50%);
+
     i {
       width: $swiper-pagination-item-width;
       height: $swiper-pagination-item-height;
       margin-right: $swiper-pagination-item-margin-right;
       border-radius: $swiper-pagination-item-border-radius;
+
       &:last-child {
         margin-right: 0;
       }
     }
   }
+
   &__pagination-vertical {
     top: 50%;
     left: 12px;
@@ -39,6 +46,7 @@
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     transform: translateY(-50%);
+
     i {
       margin-bottom: 5px;
     }

src/packages/swiper/swiper.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, TouchEvent, useMemo } from 'react'
 import classNames from 'classnames'
 import { DataContext } from './UserContext'
 import bem from '@/utils/bem'
-import { getRect } from '../../utils/useClientRect'
+import { getRect } from '../../utils/use-client-rect'
 
 export type SwiperRef = {
   to: (index: number) => void

src/packages/tabs/tabs.taro.tsx

@@ -106,7 +106,7 @@ export const Tabs: FunctionComponent<
       const childProps = child?.props
       if (childProps?.title || childProps?.paneKey) {
         title.title = childProps?.title
-        title.paneKey = childProps?.paneKey || idx
+        title.paneKey = getPaneKey(childProps?.paneKey, idx)
         title.disabled = childProps?.disabled
         title.index = idx
         if (title.paneKey === value) {
@@ -149,6 +149,10 @@ export const Tabs: FunctionComponent<
     transitionDuration: `${animatedTime}ms`,
   }
 
+  const getPaneKey = (paneKey: string | number, index: number) => {
+    return typeof paneKey === 'string' ? paneKey : String(paneKey || index)
+  }
+
   const tabChange = (item: Title, index: number) => {
     onClick && onClick(item)
     if (item.disabled) {
@@ -224,7 +228,7 @@ export const Tabs: FunctionComponent<
             }
 
             if (
-              String(value) !== String(child.props?.paneKey || idx) &&
+              String(value) !== getPaneKey(child.props?.paneKey, idx) &&
               autoHeight
             ) {
               childProps = {

src/packages/tag/tag.scss

@@ -55,12 +55,15 @@
     border: $tag-border-width solid transparent;
     @include plain;
   }
+
   &--round {
     border-radius: 8px;
   }
+
   &--mark {
     border-radius: 0 12px 12px 0;
   }
+
   &--close {
     margin-left: 4px;
     cursor: pointer;

src/packages/textarea/demo.taro.tsx

@@ -62,7 +62,8 @@ const TextAreaDemo = () => {
   const [value3] = useState('')
 
   const customTheme = {
-    nutuiTextareaLimitColor: `#fa2c19`,
+    nutuiTextareaTextCurrorColor: `var(--nutui-brand-color)`,
+    nutuiTextareaLimitColor: `var(--nutui-brand-color)`,
   }
 
   useEffect(() => {

src/packages/textarea/demo.tsx

@@ -59,11 +59,10 @@ const TextAreaDemo = () => {
   const [value1, updateValue1] = useState('')
   const [value2] = useState('')
   const [value3] = useState('')
-  const [value4] = useState('')
 
   const customTheme = {
-    nutuiTextareaTextCurrorColor: `red`,
-    nutuiTextareaLimitColor: `#fa2c19`,
+    nutuiTextareaTextCurrorColor: `var(--nutui-brand-color)`,
+    nutuiTextareaLimitColor: `var(--nutui-brand-color)`,
   }
 
   useEffect(() => {

src/packages/textarea/textarea.taro.tsx

@@ -144,7 +144,7 @@ export const TextArea: FunctionComponent<
         onCompositionEnd={(e) => endComposing()}
         onCompositionStart={(e) => startComposing()}
         rows={rows}
-        // maxLength={maxlength < 0 ? 0 : maxlength}
+        maxLength={maxlength < 0 ? 0 : maxlength}
         placeholder={placeholder || locale.placeholder}
       />
       {limitshow ? (

src/packages/timedetail/timedetail.scss

 .nut-theme-dark {
   .nut-timedetail {
     background-color: $dark6;
+
     &__detail {
       &__list {
         &__item {
           background-color: $dark4;
           color: $dark1;
+
           &--curr {
             color: $timeselect-timedetail-item-cur-text-color;
           }
@@ -14,6 +16,7 @@
     }
   }
 }
+
 .nut-timedetail {
   display: flex;
   align-content: flex-start;
@@ -29,17 +32,20 @@
     margin-bottom: 10px;
     background-color: $background-color;
     color: $title-color;
+
     &-active {
       background-color: $dark-brand-color;
     }
+
     border-radius: 5px;
     font-size: 14px;
     border: 1px solid transparent;
     font-weight: 700;
   }
+
   &__item-active {
-    background-color: #fa2c1926;
-    border: 1px solid #fa2c19;
-    color: #fa2c19;
+    background-color: var(--nutui-brand-color-opacity);
+    border: 1px solid $primary-color;
+    color: $primary-color;
   }
 }

src/packages/timeselect/timeselect.scss

@@ -64,7 +64,7 @@
     color: $title-color;
 
     .nut-timepannel-active {
-      background-color: red;
+      background-color: $primary-color;
     }
   }
 

src/packages/uploader/demo.taro.tsx

@@ -314,21 +314,21 @@ const UploaderDemo = () => {
           multiple
           listType="list"
         >
-          <Button type="success" size="small">
+          <Button type="default" size="small">
             {translated.bb5caa9c}
           </Button>
         </Uploader>
 
         <h2>{translated['37c65f47']}</h2>
         <Uploader url={uploadUrl}>
-          <Button type="success" size="small">
+          <Button type="default" size="small">
             {translated.bb5caa9c}
           </Button>
         </Uploader>
 
         <h2>{translated.uploadDefaultProgress}</h2>
         <Uploader url={uploadUrl} onProgress={onProgress}>
-          <Button type="success" size="small">
+          <Button type="default" size="small">
             {translated.bb5caa9c}
           </Button>
         </Uploader>
@@ -379,14 +379,14 @@ const UploaderDemo = () => {
           ref={uploadRef}
         />
         <Button
-          type="success"
+          type="default"
           size="small"
           onClick={submitUpload}
           style={{ marginRight: '10px', marginTop: '20px' }}
         >
           {translated.fcf01d1a}
         </Button>
-        <Button type="danger" size="small" onClick={clearUpload}>
+        <Button type="primary" size="small" onClick={clearUpload}>
           {translated.clearBtnUpload}
         </Button>
 

src/packages/uploader/demo.tsx

@@ -290,21 +290,21 @@ const UploaderDemo = () => {
           multiple
           listType="list"
         >
-          <Button type="success" size="small">
+          <Button type="default" size="small">
             {translated.bb5caa9c}
           </Button>
         </Uploader>
 
         <h2>{translated['37c65f47']}</h2>
         <Uploader url={uploadUrl}>
-          <Button type="success" size="small">
+          <Button type="default" size="small">
             {translated.bb5caa9c}
           </Button>
         </Uploader>
 
         <h2>{translated.uploadDefaultProgress}</h2>
         <Uploader url={uploadUrl} onProgress={onProgress}>
-          <Button type="success" size="small">
+          <Button type="default" size="small">
             {translated.bb5caa9c}
           </Button>
         </Uploader>
@@ -356,14 +356,14 @@ const UploaderDemo = () => {
         />
         <br />
         <Button
-          type="success"
+          type="default"
           size="small"
           onClick={submitUpload}
           style={{ marginRight: '10px' }}
         >
           {translated.fcf01d1a}
         </Button>
-        <Button type="danger" size="small" onClick={clearUpload}>
+        <Button type="primary" size="small" onClick={clearUpload}>
           {translated.clearBtnUpload}
         </Button>
 

src/packages/uploader/uploader.taro.tsx

@@ -27,7 +27,7 @@ import Progress from '@/packages/progress/index.taro'
 import { UploaderTaro, UploadOptions } from './upload'
 import bem from '@/utils/bem'
 import { useConfig } from '@/packages/configprovider/configprovider.taro'
-import { funcInterceptor } from '@/utils/Interceptor'
+import { funcInterceptor } from '@/utils/interceptor'
 
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 

src/packages/uploader/uploader.tsx

@@ -18,7 +18,7 @@ import Progress from '@/packages/progress'
 import { Upload, UploadOptions } from './upload'
 import bem from '@/utils/bem'
 import { useConfig } from '@/packages/configprovider'
-import { funcInterceptor } from '@/utils/Interceptor'
+import { funcInterceptor } from '@/utils/interceptor'
 
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 

src/sites/mobile-taro/.gitignore

@@ -11,4 +11,5 @@ src/exhibition/
 src/feedback/
 src/layout/
 src/nav/
-src/app.config.ts
\ No newline at end of file
+src/app.config.ts
+src/app.scss
\ No newline at end of file

src/sites/mobile-taro/config/index.js

 const path = require('path')
+
+let fileStr = `styles/variables.scss`
+const projectID = process.env.VITE_APP_PROJECT_ID
+if (projectID) {
+  fileStr = `styles/variables-${projectID}.scss`
+}
+
 const config = {
   projectName: 'first',
   date: '2022-7-11',
@@ -23,7 +30,7 @@ const config = {
     '@': path.resolve(__dirname, '../../../../src'),
   },
   sass: {
-    resource: path.resolve(__dirname, '../../../', 'styles/variables.scss'),
+    resource: path.resolve(__dirname, '../../../', fileStr),
   },
   defineConstants: {},
   copy: {

src/sites/mobile-taro/package.json

@@ -18,7 +18,7 @@
     "build:qq": "taro build --type qq",
     "build:jd": "taro build --type jd",
     "build:quickapp": "taro build --type quickapp",
-    "dev:weapp": "npm run build:weapp -- --watch",
+    "dev:weapp": "npm run build:weapp -- --watch ",
     "dev:swan": "npm run build:swan -- --watch",
     "dev:alipay": "npm run build:alipay -- --watch",
     "dev:tt": "npm run build:tt -- --watch",
@@ -26,7 +26,16 @@
     "dev:rn": "npm run build:rn -- --watch",
     "dev:qq": "npm run build:qq -- --watch",
     "dev:jd": "npm run build:jd -- --watch",
-    "dev:quickapp": "npm run build:quickapp -- --watch"
+    "dev:quickapp": "npm run build:quickapp -- --watch",
+    "dev:weapp:jmapp": "VITE_APP_PROJECT_ID=jmapp npm run build:weapp -- --watch ",
+    "dev:swan:jmapp": "VITE_APP_PROJECT_ID=jmapp npm run build:swan -- --watch",
+    "dev:alipay:jmapp": "VITE_APP_PROJECT_ID=jmapp npm run build:alipay -- --watch",
+    "dev:tt:jmapp": "VITE_APP_PROJECT_ID=jmapp npm run build:tt -- --watch",
+    "dev:h5:jmapp": "VITE_APP_PROJECT_ID=jmapp npm run build:h5 -- --watch",
+    "dev:rn:jmapp": "VITE_APP_PROJECT_ID=jmapp npm run build:rn -- --watch",
+    "dev:qq:jmapp": "VITE_APP_PROJECT_ID=jmapp npm run build:qq -- --watch",
+    "dev:jd:jmapp": "VITE_APP_PROJECT_ID=jmapp npm run build:jd -- --watch",
+    "dev:quickapp:jmapp": "VITE_APP_PROJECT_ID=jmapp npm run build:quickapp -- --watch"
   },
   "browserslist": [
     "last 3 versions",
@@ -66,4 +75,4 @@
     "stylelint": "^14.4.0",
     "typescript": "^4.1.0"
   }
-}
+}
\ No newline at end of file

src/sites/mobile-taro/src/app.scss

@@ -14,6 +14,7 @@
   &.no-overflow {
     overflow: unset;
   }
+
   height: 100%;
   background: #f7f8fa;
   overflow-x: hidden;
@@ -22,6 +23,7 @@
 
   &-full {
     padding: 0 0 0 0 !important;
+
     h2 {
       padding-left: 17px;
     }
@@ -35,6 +37,7 @@
     width: 0;
     background: transparent;
   }
+
   > h2 {
     margin-top: 30px;
     margin-bottom: 10px;
@@ -43,6 +46,7 @@
     padding: 0 10px;
     font-weight: normal;
   }
+
   > p {
     font-size: 12px;
   }

src/sites/mobile/main.tsx

@@ -5,6 +5,16 @@ import '@/utils/touchEmulator' // 适配 h5 示例桌面端预览
 import '@/sites/assets/styles/reset.scss'
 // import '@/styles/font/iconfont.css'
 
+const projectID = import.meta.env.VITE_APP_PROJECT_ID
+if (projectID) {
+  import('../../styles/font/iconfont.css')
+  import(`../../styles/font-${projectID}/iconfont.css`)
+  import(`../../styles/theme-${projectID}.scss`)
+} else {
+  import('../../styles/font/iconfont.css')
+  import(`../../styles/theme-default.scss`)
+}
+
 import('../../packages/nutui.react.scss')
 
 const rootElement = document.querySelector('#app')

src/styles/font-jmapp/config.json

+{
+  "name": "nutui-icon",
+  "data": [
+    {
+      "name": "粗体 Icon",
+      "nameEn": "Bold Icon",
+      "icons": [
+        "order",
+        "refresh",
+        "add",
+        "JD",
+        "eye",
+        "dshop",
+        "my2",
+        "star",
+        "del2",
+        "more-x",
+        "comment",
+        "microphone",
+        "people",
+        "service",
+        "cart2",
+        "location2",
+        "marshalling",
+        "fabulous",
+        "s-follow",
+        "shop",
+        "jdl"
+      ]
+    },
+    {
+      "name": "细体 Icon",
+      "nameEn": "Thin Icon",
+      "icons": [
+        "ask",
+        "tips",
+        "notice",
+        "lower",
+        "top",
+        "download",
+        "dongdong",
+        "JIMI40",
+        "location",
+        "scan",
+        "addfollow",
+        "search",
+        "share",
+        "follow",
+        "del",
+        "edit",
+        "cart",
+        "home",
+        "find",
+        "category",
+        "my",
+        "footprint",
+        "link",
+        "scan2",
+        "left",
+        "close",
+        "locationg3",
+        "share",
+        "shop3",
+        "message",
+        "ask2",
+        "search2",
+        "clock",
+        "setting",
+        "refresh2",
+        "horizontal",
+        "date",
+        "photograph",
+        "more-s",
+        "play-stop",
+        "play-start",
+        "play-double-back",
+        "play-double-forward",
+        "voice",
+        "image",
+        "image-error"
+      ]
+    },
+    {
+      "name": "应用图标",
+      "nameEn": "Application Icon",
+      "icons": [
+        "arrow-up",
+        "arrow-down",
+        "arrow-up2",
+        "arrow-down2",
+        "down-arrow",
+        "joy-smile",
+        "close-little",
+        "horizontal-n",
+        "share-n",
+        "heart1",
+        "heart-fill",
+        "star-n",
+        "star-fill-n",
+        "triangle-down",
+        "triangle-up"
+      ]
+    },
+    {
+      "name": "基础图标",
+      "nameEn": "Basic Icon",
+      "icons": [
+        "rect-up",
+        "rect-down",
+        "rect-left",
+        "rect-right",
+        "uploader",
+        "mask-close",
+        "circle-close",
+        "right",
+        "arrow-right",
+        "github",
+        "screen-little",
+        "plus",
+        "minus",
+        "Check",
+        "issue",
+        "failure",
+        "success",
+        "retweet",
+        "poweroff-circle-fill",
+        "play-circle-fill",
+        "checked",
+        "checklist",
+        "check-disabled",
+        "check-normal",
+        "check-checked",
+        "loading",
+        "loading1"
+      ]
+    }
+
+  ],
+  "style":[
+    {
+      "name": "通用动态样式",
+      "nameEn": "Universal Dynamic Style",
+      "icons": [{
+        "name":"dou-arrow-up",
+        "animation-name":"am-jump",
+        "animation-time":"am-infinite"
+      },{
+        "name":"star",
+        "animation-name":"am-blink",
+        "animation-time":"am-infinite"
+      },{
+        "name":"refresh2",
+        "animation-name":"am-rotate",
+        "animation-time":"am-infinite"
+      },{
+        "name":"heart-fill",
+        "animation-name":"am-breathe",
+        "animation-time":"am-infinite"
+      },{
+        "name":"microphone",
+        "animation-name":"am-flash",
+        "animation-time":"am-infinite"
+      },{
+        "name":"download",
+        "animation-name":"am-bounce",
+        "animation-time":"am-infinite"
+      },{
+        "name":"message",
+        "animation-name":"am-shake",
+        "animation-time":"am-infinite"
+      }
+      ]
+    }
+  ]
+}
\ No newline at end of file

src/styles/font-jmapp/demo.css

+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/styles/font-jmapp/iconfont.css

+@font-face {
+  font-family: "nutui-iconfont"; /* Project id 3744858 */
+  src: url('iconfont.woff2?t=1672726613438') format('woff2'),
+       url('iconfont.woff?t=1672726613438') format('woff'),
+       url('iconfont.ttf?t=1672726613438') format('truetype');
+}
+
+.nutui-iconfont {
+  font-family: "nutui-iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.nut-icon-photograph-line:before {
+  content: "\e65e";
+}
+
+.nut-icon-qr-scan-2-line:before {
+  content: "\e65f";
+}
+
+.nut-icon-cloud-line:before {
+  content: "\e660";
+}
+
+.nut-icon-new-built:before {
+  content: "\e658";
+}
+
+.nut-icon-capacity:before {
+  content: "\e659";
+}
+
+.nut-icon-switch:before {
+  content: "\e65a";
+}
+
+.nut-icon-upload:before {
+  content: "\e65b";
+}
+
+.nut-icon-a-Batchoperation:before {
+  content: "\e65c";
+}
+
+.nut-icon-top:before {
+  content: "\e65d";
+}
+
+.nut-icon-left:before {
+  content: "\e655";
+}
+
+.nut-icon-down:before {
+  content: "\e656";
+}
+
+.nut-icon-up:before {
+  content: "\e657";
+}
+
+.nut-icon-save:before {
+  content: "\e653";
+}
+
+.nut-icon-horizontal-n:before {
+  content: "\e654";
+}
+
+.nut-icon-ask:before {
+  content: "\e61a";
+}
+
+.nut-icon-check-disabled:before {
+  content: "\e61b";
+}
+
+.nut-icon-bookmark:before {
+  content: "\e61c";
+}
+
+.nut-icon-check-normal:before {
+  content: "\e61d";
+}
+
+.nut-icon-close-little:before {
+  content: "\e61e";
+}
+
+.nut-icon-date:before {
+  content: "\e61f";
+}
+
+.nut-icon-edit:before {
+  content: "\e620";
+}
+
+.nut-icon-checked:before {
+  content: "\e621";
+}
+
+.nut-icon-del2:before {
+  content: "\e622";
+}
+
+.nut-icon-copy-1:before {
+  content: "\e623";
+}
+
+.nut-icon-home:before {
+  content: "\e624";
+}
+
+.nut-icon-filter:before {
+  content: "\e625";
+}
+
+.nut-icon-download:before {
+  content: "\e626";
+}
+
+.nut-icon-copy:before {
+  content: "\e627";
+}
+
+.nut-icon-image:before {
+  content: "\e628";
+}
+
+.nut-icon-add:before {
+  content: "\e629";
+}
+
+.nut-icon-mask-close:before {
+  content: "\e62a";
+}
+
+.nut-icon-Check:before {
+  content: "\e62b";
+}
+
+.nut-icon-locationg3:before {
+  content: "\e62c";
+}
+
+.nut-icon-go-back:before {
+  content: "\e62d";
+}
+
+.nut-icon-message:before {
+  content: "\e62e";
+}
+
+.nut-icon-fabulous:before {
+  content: "\e62f";
+}
+
+.nut-icon-failure:before {
+  content: "\e630";
+}
+
+.nut-icon-minus:before {
+  content: "\e631";
+}
+
+.nut-icon-loading:before {
+  content: "\e632";
+}
+
+.nut-icon-marshalling:before {
+  content: "\e633";
+}
+
+.nut-icon-play-stop:before {
+  content: "\e634";
+}
+
+.nut-icon-photograph:before {
+  content: "\e635";
+}
+
+.nut-icon-my2:before {
+  content: "\e636";
+}
+
+.nut-icon-microphone:before {
+  content: "\e637";
+}
+
+.nut-icon-play-circle-fill:before {
+  content: "\e638";
+}
+
+.nut-icon-play-start:before {
+  content: "\e639";
+}
+
+.nut-icon-poweroff-circle-fill:before {
+  content: "\e63a";
+}
+
+.nut-icon-right:before {
+  content: "\e63b";
+}
+
+.nut-icon-plus:before {
+  content: "\e63c";
+}
+
+.nut-icon-retweet:before {
+  content: "\e63d";
+}
+
+.nut-icon-notice:before {
+  content: "\e63e";
+}
+
+.nut-icon-s-follow:before {
+  content: "\e63f";
+}
+
+.nut-icon-refresh:before {
+  content: "\e640";
+}
+
+.nut-icon-scan2:before {
+  content: "\e641";
+}
+
+.nut-icon-triangle-down:before {
+  content: "\e642";
+}
+
+.nut-icon-ticket:before {
+  content: "\e643";
+}
+
+.nut-icon-eye:before {
+  content: "\e644";
+}
+
+.nut-icon-star:before {
+  content: "\e645";
+}
+
+.nut-icon-link:before {
+  content: "\e646";
+}
+
+.nut-icon-success:before {
+  content: "\e647";
+}
+
+.nut-icon-triangle-up:before {
+  content: "\e648";
+}
+
+.nut-icon-search2:before {
+  content: "\e649";
+}
+
+.nut-icon-share-n:before {
+  content: "\e64a";
+}
+
+.nut-icon-jdl:before {
+  content: "\e64b";
+}
+
+.nut-icon-volume:before {
+  content: "\e64c";
+}
+
+.nut-icon-wallet:before {
+  content: "\e64d";
+}
+
+.nut-icon-more-x:before {
+  content: "\e64e";
+}
+
+.nut-icon-more-s:before {
+  content: "\e64f";
+}
+
+.nut-icon-bank-card:before {
+  content: "\e650";
+}
+
+.nut-icon-service:before {
+  content: "\e651";
+}
+
+.nut-icon-warning:before {
+  content: "\e652";
+}
+

src/styles/font-jmapp/iconfont.json

+{
+  "id": "3744858",
+  "name": "nutui",
+  "font_family": "nutui-iconfont",
+  "css_prefix_text": "nut-icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "33614967",
+      "name": "photograph-line",
+      "font_class": "photograph-line",
+      "unicode": "e65e",
+      "unicode_decimal": 58974
+    },
+    {
+      "icon_id": "33614968",
+      "name": "qr-scan-2-line",
+      "font_class": "qr-scan-2-line",
+      "unicode": "e65f",
+      "unicode_decimal": 58975
+    },
+    {
+      "icon_id": "33614969",
+      "name": "cloud-line",
+      "font_class": "cloud-line",
+      "unicode": "e660",
+      "unicode_decimal": 58976
+    },
+    {
+      "icon_id": "33445449",
+      "name": "new-built",
+      "font_class": "new-built",
+      "unicode": "e658",
+      "unicode_decimal": 58968
+    },
+    {
+      "icon_id": "33445450",
+      "name": "capacity",
+      "font_class": "capacity",
+      "unicode": "e659",
+      "unicode_decimal": 58969
+    },
+    {
+      "icon_id": "33445451",
+      "name": "switch",
+      "font_class": "switch",
+      "unicode": "e65a",
+      "unicode_decimal": 58970
+    },
+    {
+      "icon_id": "33445452",
+      "name": "upload",
+      "font_class": "upload",
+      "unicode": "e65b",
+      "unicode_decimal": 58971
+    },
+    {
+      "icon_id": "33445453",
+      "name": "Batch operation",
+      "font_class": "a-Batchoperation",
+      "unicode": "e65c",
+      "unicode_decimal": 58972
+    },
+    {
+      "icon_id": "33445454",
+      "name": "top",
+      "font_class": "top",
+      "unicode": "e65d",
+      "unicode_decimal": 58973
+    },
+    {
+      "icon_id": "33201910",
+      "name": "left",
+      "font_class": "left",
+      "unicode": "e655",
+      "unicode_decimal": 58965
+    },
+    {
+      "icon_id": "33202017",
+      "name": "down",
+      "font_class": "down",
+      "unicode": "e656",
+      "unicode_decimal": 58966
+    },
+    {
+      "icon_id": "33202018",
+      "name": "up",
+      "font_class": "up",
+      "unicode": "e657",
+      "unicode_decimal": 58967
+    },
+    {
+      "icon_id": "32996429",
+      "name": "save",
+      "font_class": "save",
+      "unicode": "e653",
+      "unicode_decimal": 58963
+    },
+    {
+      "icon_id": "32996430",
+      "name": "horizontal-n",
+      "font_class": "horizontal-n",
+      "unicode": "e654",
+      "unicode_decimal": 58964
+    },
+    {
+      "icon_id": "32996008",
+      "name": "ask",
+      "font_class": "ask",
+      "unicode": "e61a",
+      "unicode_decimal": 58906
+    },
+    {
+      "icon_id": "32996009",
+      "name": "check-disabled",
+      "font_class": "check-disabled",
+      "unicode": "e61b",
+      "unicode_decimal": 58907
+    },
+    {
+      "icon_id": "32996010",
+      "name": "bookmark",
+      "font_class": "bookmark",
+      "unicode": "e61c",
+      "unicode_decimal": 58908
+    },
+    {
+      "icon_id": "32996011",
+      "name": "check-normal",
+      "font_class": "check-normal",
+      "unicode": "e61d",
+      "unicode_decimal": 58909
+    },
+    {
+      "icon_id": "32996012",
+      "name": "close-little",
+      "font_class": "close-little",
+      "unicode": "e61e",
+      "unicode_decimal": 58910
+    },
+    {
+      "icon_id": "32996013",
+      "name": "date",
+      "font_class": "date",
+      "unicode": "e61f",
+      "unicode_decimal": 58911
+    },
+    {
+      "icon_id": "32996014",
+      "name": "edit",
+      "font_class": "edit",
+      "unicode": "e620",
+      "unicode_decimal": 58912
+    },
+    {
+      "icon_id": "32996015",
+      "name": "checked",
+      "font_class": "checked",
+      "unicode": "e621",
+      "unicode_decimal": 58913
+    },
+    {
+      "icon_id": "32996016",
+      "name": "del2",
+      "font_class": "del2",
+      "unicode": "e622",
+      "unicode_decimal": 58914
+    },
+    {
+      "icon_id": "32996017",
+      "name": "copy-1",
+      "font_class": "copy-1",
+      "unicode": "e623",
+      "unicode_decimal": 58915
+    },
+    {
+      "icon_id": "32996018",
+      "name": "home",
+      "font_class": "home",
+      "unicode": "e624",
+      "unicode_decimal": 58916
+    },
+    {
+      "icon_id": "32996019",
+      "name": "filter",
+      "font_class": "filter",
+      "unicode": "e625",
+      "unicode_decimal": 58917
+    },
+    {
+      "icon_id": "32996020",
+      "name": "download",
+      "font_class": "download",
+      "unicode": "e626",
+      "unicode_decimal": 58918
+    },
+    {
+      "icon_id": "32996021",
+      "name": "copy",
+      "font_class": "copy",
+      "unicode": "e627",
+      "unicode_decimal": 58919
+    },
+    {
+      "icon_id": "32996022",
+      "name": "image",
+      "font_class": "image",
+      "unicode": "e628",
+      "unicode_decimal": 58920
+    },
+    {
+      "icon_id": "32996023",
+      "name": "add",
+      "font_class": "add",
+      "unicode": "e629",
+      "unicode_decimal": 58921
+    },
+    {
+      "icon_id": "32996024",
+      "name": "mask-close",
+      "font_class": "mask-close",
+      "unicode": "e62a",
+      "unicode_decimal": 58922
+    },
+    {
+      "icon_id": "32996025",
+      "name": "Check",
+      "font_class": "Check",
+      "unicode": "e62b",
+      "unicode_decimal": 58923
+    },
+    {
+      "icon_id": "32996026",
+      "name": "locationg3",
+      "font_class": "locationg3",
+      "unicode": "e62c",
+      "unicode_decimal": 58924
+    },
+    {
+      "icon_id": "32996027",
+      "name": "go-back",
+      "font_class": "go-back",
+      "unicode": "e62d",
+      "unicode_decimal": 58925
+    },
+    {
+      "icon_id": "32996028",
+      "name": "message",
+      "font_class": "message",
+      "unicode": "e62e",
+      "unicode_decimal": 58926
+    },
+    {
+      "icon_id": "32996029",
+      "name": "fabulous",
+      "font_class": "fabulous",
+      "unicode": "e62f",
+      "unicode_decimal": 58927
+    },
+    {
+      "icon_id": "32996030",
+      "name": "failure",
+      "font_class": "failure",
+      "unicode": "e630",
+      "unicode_decimal": 58928
+    },
+    {
+      "icon_id": "32996031",
+      "name": "minus",
+      "font_class": "minus",
+      "unicode": "e631",
+      "unicode_decimal": 58929
+    },
+    {
+      "icon_id": "32996032",
+      "name": "loading",
+      "font_class": "loading",
+      "unicode": "e632",
+      "unicode_decimal": 58930
+    },
+    {
+      "icon_id": "32996033",
+      "name": "marshalling",
+      "font_class": "marshalling",
+      "unicode": "e633",
+      "unicode_decimal": 58931
+    },
+    {
+      "icon_id": "32996034",
+      "name": "play-stop",
+      "font_class": "play-stop",
+      "unicode": "e634",
+      "unicode_decimal": 58932
+    },
+    {
+      "icon_id": "32996035",
+      "name": "photograph",
+      "font_class": "photograph",
+      "unicode": "e635",
+      "unicode_decimal": 58933
+    },
+    {
+      "icon_id": "32996036",
+      "name": "my2",
+      "font_class": "my2",
+      "unicode": "e636",
+      "unicode_decimal": 58934
+    },
+    {
+      "icon_id": "32996037",
+      "name": "microphone",
+      "font_class": "microphone",
+      "unicode": "e637",
+      "unicode_decimal": 58935
+    },
+    {
+      "icon_id": "32996038",
+      "name": "play-circle-fill",
+      "font_class": "play-circle-fill",
+      "unicode": "e638",
+      "unicode_decimal": 58936
+    },
+    {
+      "icon_id": "32996039",
+      "name": "play-start",
+      "font_class": "play-start",
+      "unicode": "e639",
+      "unicode_decimal": 58937
+    },
+    {
+      "icon_id": "32996040",
+      "name": "poweroff-circle-fill",
+      "font_class": "poweroff-circle-fill",
+      "unicode": "e63a",
+      "unicode_decimal": 58938
+    },
+    {
+      "icon_id": "32996041",
+      "name": "right",
+      "font_class": "right",
+      "unicode": "e63b",
+      "unicode_decimal": 58939
+    },
+    {
+      "icon_id": "32996042",
+      "name": "plus",
+      "font_class": "plus",
+      "unicode": "e63c",
+      "unicode_decimal": 58940
+    },
+    {
+      "icon_id": "32996043",
+      "name": "retweet",
+      "font_class": "retweet",
+      "unicode": "e63d",
+      "unicode_decimal": 58941
+    },
+    {
+      "icon_id": "32996044",
+      "name": "notice",
+      "font_class": "notice",
+      "unicode": "e63e",
+      "unicode_decimal": 58942
+    },
+    {
+      "icon_id": "32996045",
+      "name": "s-follow",
+      "font_class": "s-follow",
+      "unicode": "e63f",
+      "unicode_decimal": 58943
+    },
+    {
+      "icon_id": "32996046",
+      "name": "refresh",
+      "font_class": "refresh",
+      "unicode": "e640",
+      "unicode_decimal": 58944
+    },
+    {
+      "icon_id": "32996047",
+      "name": "scan2",
+      "font_class": "scan2",
+      "unicode": "e641",
+      "unicode_decimal": 58945
+    },
+    {
+      "icon_id": "32996048",
+      "name": "triangle-down",
+      "font_class": "triangle-down",
+      "unicode": "e642",
+      "unicode_decimal": 58946
+    },
+    {
+      "icon_id": "32996049",
+      "name": "ticket",
+      "font_class": "ticket",
+      "unicode": "e643",
+      "unicode_decimal": 58947
+    },
+    {
+      "icon_id": "32996050",
+      "name": "eye",
+      "font_class": "eye",
+      "unicode": "e644",
+      "unicode_decimal": 58948
+    },
+    {
+      "icon_id": "32996051",
+      "name": "star",
+      "font_class": "star",
+      "unicode": "e645",
+      "unicode_decimal": 58949
+    },
+    {
+      "icon_id": "32996052",
+      "name": "link",
+      "font_class": "link",
+      "unicode": "e646",
+      "unicode_decimal": 58950
+    },
+    {
+      "icon_id": "32996053",
+      "name": "success",
+      "font_class": "success",
+      "unicode": "e647",
+      "unicode_decimal": 58951
+    },
+    {
+      "icon_id": "32996054",
+      "name": "triangle-up",
+      "font_class": "triangle-up",
+      "unicode": "e648",
+      "unicode_decimal": 58952
+    },
+    {
+      "icon_id": "32996055",
+      "name": "search2",
+      "font_class": "search2",
+      "unicode": "e649",
+      "unicode_decimal": 58953
+    },
+    {
+      "icon_id": "32996056",
+      "name": "share-n",
+      "font_class": "share-n",
+      "unicode": "e64a",
+      "unicode_decimal": 58954
+    },
+    {
+      "icon_id": "32996057",
+      "name": "jdl",
+      "font_class": "jdl",
+      "unicode": "e64b",
+      "unicode_decimal": 58955
+    },
+    {
+      "icon_id": "32996058",
+      "name": "volume",
+      "font_class": "volume",
+      "unicode": "e64c",
+      "unicode_decimal": 58956
+    },
+    {
+      "icon_id": "32996059",
+      "name": "wallet",
+      "font_class": "wallet",
+      "unicode": "e64d",
+      "unicode_decimal": 58957
+    },
+    {
+      "icon_id": "32996060",
+      "name": "more-x",
+      "font_class": "more-x",
+      "unicode": "e64e",
+      "unicode_decimal": 58958
+    },
+    {
+      "icon_id": "32996061",
+      "name": "more-s",
+      "font_class": "more-s",
+      "unicode": "e64f",
+      "unicode_decimal": 58959
+    },
+    {
+      "icon_id": "32996062",
+      "name": "bank-card",
+      "font_class": "bank-card",
+      "unicode": "e650",
+      "unicode_decimal": 58960
+    },
+    {
+      "icon_id": "32996063",
+      "name": "service",
+      "font_class": "service",
+      "unicode": "e651",
+      "unicode_decimal": 58961
+    },
+    {
+      "icon_id": "32996064",
+      "name": "warning",
+      "font_class": "warning",
+      "unicode": "e652",
+      "unicode_decimal": 58962
+    }
+  ]
+}

src/styles/theme-default.scss

@@ -4,6 +4,7 @@ page {
   --nutui-brand-color-start: #ff404f;
   --nutui-brand-color-end: #fa2c19;
   --nutui-brand-link-color: #396acc;
+  --nutui-brand-color-opacity: rgba(250, 44, 25, 0.5);
   --nutui-brand-text-color: #ffffff;
   --nutui-gray-0: #000000;
   // 主要内容用色，常用语常规标题内容、细文浏览、常规按钮文字以及图表引导。

src/styles/theme-jmapp.scss

+:root,
+page {
+  --nutui-brand-color: #3768fa;
+  --nutui-brand-color-start: #3768fa;
+  --nutui-brand-color-end: #2c53c8;
+  --nutui-brand-link-color: #396acc;
+  --nutui-brand-color-opacity: rgba(55, 104, 250, 0.4);
+  --nutui-brand-text-color: #ffffff;
+  --nutui-gray-0: #000000;
+  // 主要内容用色，常用语常规标题内容、细文浏览、常规按钮文字以及图表引导。
+  --nutui-gray-1: #1a1a1a;
+  // 次要文字色，用于次级标题、属性标示、非主要信息引导等。
+  --nutui-gray-2: #757575;
+  // 不可操作内容色，用于预置内容、无效内容、特殊不可点击按钮、组件边框线等。
+  --nutui-gray-3: #bfbfbf;
+  // 页面基底色，用于卡片式页面的兜底，永远置于页面最底层。
+  --nutui-gray-4: #f4f4f4;
+  // 卡片内嵌背景色，用于卡片内部的信息包裹，感知较弱。
+  --nutui-gray-5: #f8f8f8;
+  // 卡片背景色
+  --nutui-gray-6: #ffffff;
+  // 页面全局蒙层，用于弹出层、弹窗、新功能引导出现的整页遮罩
+  --nutui-gray-7: rgba(0, 0, 0, 0.7);
+  // 局部蒙层，用于非整页遮罩
+  --nutui-gray-8: rgba(0, 0, 0, 0.4);
+  // 间隔线/容错线，用于结构或信息分割
+  --nutui-gray-9: rgba(0, 0, 0, 0.08);
+  // 图片容错蒙层
+  --nutui-gray-10: rgba(0, 0, 0, 0.02);
+
+  // 字体
+  --nutui-font-size-0: 10px;
+  --nutui-font-size-1: 12px;
+  --nutui-font-size-2: 14px;
+  --nutui-font-size-3: 16px;
+  --nutui-font-size-4: 18px;
+  // 字重
+  --nutui-font-weight-bold: 400;
+  // 行高
+  --nutui-line-height-base: 1.5;
+}

src/styles/variables.scss

@@ -61,7 +61,7 @@ $text-color: $gray2 !default;
 $help-color: $gray5 !default;
 // 特殊禁用色
 $disable-color: $gray3 !default;
-$required-color: #fa2c19 !default;
+$required-color: $primary-color !default;
 $white: $gray6 !default;
 $black: $gray0 !default;
 // ----------------------------------------------------

vite.config.build.css.ts

@@ -5,6 +5,8 @@ const path = require('path')
 const atImport = require('postcss-import')
 const config = require('./package.json')
 
+const projectID = process.env.VITE_APP_PROJECT_ID
+
 const banner = `/*!
 * ${config.name} v${config.version} ${new Date()}
 * (c) 2023 @jdf2e.
@@ -23,7 +25,9 @@ export default defineConfig({
         charset: false,
         // example : additionalData: `@import "./src/design/styles/variables";`
         // dont need include file extend .scss
-        additionalData: `@import "@/styles/variables.scss";`,
+        additionalData: `@import "@/styles/variables${
+          projectID ? `-${projectID}` : ''
+        }.scss";`,
       },
       postcss: {
         plugins: [atImport({ path: path.join(__dirname, 'src`') })],

vite.config.build.site.ts

@@ -6,6 +6,11 @@ const atImport = require('postcss-import')
 const config = require('./package.json')
 
 const { resolve } = path
+let fileStr = `@import "@/styles/variables.scss";@import "@/sites/assets/styles/variables.scss";`
+const projectID = process.env.VITE_APP_PROJECT_ID
+if (projectID) {
+  fileStr = `@import '@/styles/variables-${projectID}.scss';\n@import "@/sites/assets/styles/variables.scss";\n`
+}
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -19,7 +24,7 @@ export default defineConfig({
         charset: false,
         // example : additionalData: `@import "./src/design/styles/variables";`
         // dont need include file extend .scss
-        additionalData: `@import "@/styles/variables.scss";@import "@/sites/assets/styles/variables.scss";`,
+        additionalData: fileStr,
       },
     },
     postcss: {

vite.config.build.taro.ts

@@ -12,6 +12,13 @@ const banner = `/*!
 */`
 
 const { resolve } = path
+
+let fileStr = `@import "@/styles/variables.scss";`
+const projectID = process.env.VITE_APP_PROJECT_ID
+if (projectID) {
+  fileStr = `@import '@/styles/variables-${projectID}.scss';`
+}
+
 // https://vitejs.dev/config/
 export default defineConfig({
   resolve: {
@@ -23,7 +30,7 @@ export default defineConfig({
         charset: false,
         // example : additionalData: `@import "./src/design/styles/variables";`
         // dont need include file extend .scss
-        additionalData: `@import "@/styles/variables.scss";`,
+        additionalData: fileStr,
       },
       postcss: {
         plugins: [

vite.config.build.ts

@@ -12,6 +12,12 @@ const banner = `/*!
 */`
 
 const { resolve } = path
+
+let fileStr = `@import "@/styles/variables.scss";`
+const projectID = process.env.VITE_APP_PROJECT_ID
+if (projectID) {
+  fileStr = `@import '@/styles/variables-${projectID}.scss';`
+}
 // https://vitejs.dev/config/
 export default defineConfig({
   resolve: {
@@ -23,7 +29,7 @@ export default defineConfig({
         charset: false,
         // example : additionalData: `@import "./src/design/styles/variables";`
         // dont need include file extend .scss
-        additionalData: `@import "@/styles/variables.scss";`,
+        additionalData: fileStr,
       },
       postcss: {
         plugins: [