feat: add tusimple design index

demo/index.ts-dev.js

@@ -1,15 +1,16 @@
 import { createApp } from 'vue'
 import { installDemoComponents } from './init'
-import debugRouteMixin from './routes/debug-route-mixin'
 import hljs from './hljs'
-import DemoRouterView from './DemoRouterView'
+import DemoRouterView from './DemoRouterView.vue'
 import naive from '../src/index'
 import './font'
 import { routes, childRoutes } from './routes/routes'
 import createDemoRouter from './routes/router'
 import tusimpleTheme from '../themes/tusimple'
 
+import debugRouteMixin from './routes/debug-route-mixin'
 debugRouteMixin(routes, childRoutes)
+
 naive.setHljs(hljs)
 naive.use(tusimpleTheme)
 

demo/index.ts-prod.js

@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
 import { installDemoComponents } from './init'
 import hljs from './hljs'
-import DemoRouterView from './DemoRouterView'
+import DemoRouterView from './DemoRouterView.vue'
 import naive from '../src/index'
 import './font'
 import { routes } from './routes/routes'

package.json

@@ -14,6 +14,7 @@
     "build:doc": "npm run generate-version && npm run build && rm -rf build-doc/dist && cross-env NODE_ENV=production webpack --config build/webpack.doc.js",
     "clean": "rm -rf lib && rm -rf es && rm -rf dist",
     "dev": "npm run generate-version && cross-env NODE_ENV=development vite",
+    "dev:ts": "npm run generate-version && cross-env NODE_ENV=development TUSIMPLE=true vite",
     "lint": "eslint --no-error-on-unmatched-pattern --fix \"src/**/*.{js,vue}\" \"test/**/*.{js,vue}\" \"build/**/*.{js,vue}\" \"demo/**/*.{js,vue}\" && stylelint \"src/_styles/**/*.scss\"",
     "lint:js": "eslint --no-error-on-unmatched-pattern --fix \"src/**/*.{js,vue}\" \"test/**/*.{js,vue}\" \"build/**/*.{js,vue}\" \"demo/**/*.{js,vue}\"",
     "lint:style": "stylelint \"src/_styles/**/*.scss\"",
@@ -88,7 +89,6 @@
     "highlight.js": "^9.18.1",
     "lodash-es": "^4.17.15",
     "treemate": "^0.1.9",
-    "vfonts": "^0.0.1",
     "vooks": "^0.0.1",
     "vue": "^3.0.2",
     "vueuc": "0.1.0-alpha.9"

themes/tusimple.js

@@ -1,7 +1,7 @@
 // Unstable!
 // Draft Code!
 // Variable Names Will Be Refactored!
-import { composite, read } from '../src/_utils/color'
+import { composite } from '../src/_utils/color'
 import { cB, cE, c } from '../src/_utils/cssr'
 
 const unconfigurableStyle = c([
@@ -20,7 +20,6 @@ const unconfigurableStyle = c([
 ])
 
 function tusimpleTheme (naive) {
-  naive.avoidHollowOut = true
   unconfigurableStyle.mount({
     target: 'naive-ui/tusimple-theme',
     count: false
@@ -131,10 +130,7 @@ function tusimpleTheme (naive) {
     iconSize: '24px',
     arrowSize: '13px',
     arrowBorderWidth: '2px',
-    arrowRight: '2px',
+    crossColor: derived.clearIconColor
-    default: {
-      crossColor: derived.clearIconColor
-    }
   })
   naive.styles.light.Input.override({
     heightMedium: '32px',
@@ -169,9 +165,6 @@ function tusimpleTheme (naive) {
     buttonFontSizeMedium: '24px',
     buttonFontSizeLarge: '24px'
   })
-  naive.styles.light.BaseTrackingRect.override({
-    rectColor: `rgba( ${read(derived.primaryColor).slice(0, 3).join(', ')}, .1) `
-  })
   naive.styles.light.BaseSelectMenu.override({
     boxShadow: base.boxShadow2,
     paddingSmall: '4px 0',
@@ -180,66 +173,35 @@ function tusimpleTheme (naive) {
     paddingHuge: '8px 0'
   })
   naive.styles.light.BaseSelection.override({
-    height: {
+    heightMedium: '32px',
-      medium: '32px'
+    fontSizeMedium: '16px',
-    },
-    fontSize: {
-      medium: '16px'
-    },
     paddingSingle: '0 36px 0 12px',
-    default: {
+    borderColor: 'transparent'
-      boxShadow: 'none',
-      disabledBoxShadow: 'none'
-    }
   })
   naive.styles.light.Tag.override({
     borderRadius: '16px',
-    default: {
+    borderColor: 'transparent',
-      borderColor: 'none',
+    color: 'rgba(153,153,153,0.10)',
-      color: 'rgba(153,153,153,0.10)',
+    closeColor: derived.closeColorOverlay,
-      closeColor: derived.closeColorOverlay,
+    closeColorHover: derived.closeColorOverlay,
-      closeColorHover: derived.closeColorOverlay,
+    closeColorActive: derived.closeColorOverlay,
-      closeColorActive: derived.closeColorOverlay
+    borderColorPrimary: 'transparent',
-    },
+    closeColorPrimary: derived.closeColorOverlay,
-    primary: {
+    closeColorHoverPrimary: derived.closeColorOverlay,
-      borderColor: 'none',
+    closeColorActivePrimary: derived.closeColorOverlay,
-      closeColor: derived.closeColorOverlay,
+    borderColorInfo: 'transparent',
-      closeColorHover: derived.closeColorOverlay,
+    borderColorSuccess: 'transparent',
-      closeColorActive: derived.closeColorOverlay
+    borderColorWarning: 'transparent',
-    },
+    borderColorError: 'transparent',
-    info: {
+    padding: '0 12px',
-      borderColor: 'none'
+    closeMargin: '0 0 0 8px',
-    },
+    heightMedium: '24px',
-    success: {
+    closeSizeSmall: '20px',
-      borderColor: 'none'
+    closeSizeMedium: '20px',
-    },
+    closeSizeLarge: '20px',
-    warning: {
+    fontSizeSmall: '12px',
-      borderColor: 'none'
+    fontSizeMedium: '16px',
-    },
+    fontSizeLarge: '16px'
-    error: {
-      borderColor: 'none'
-    },
-    paddingLeft: '12px',
-    paddingRight: '12px',
-    closeMarginLeft: '8px',
-    height: {
-      medium: '24px'
-    },
-    closeSizeSmall: '24px',
-    closeSizeMedium: '24px',
-    closeSizeLarge: '24px',
-    fontSize: {
-      small: '12px',
-      medium: '16px',
-      large: '16px'
-    },
-    closeBackgroundColor: 'transparent',
-    closeBackgroundColorHover: composite('#D7DAE0', 'rgba(255, 255, 255, .5)'),
-    closeBackgroundColorActive: composite('#D7DAE0', 'rgba(255, 255, 255, .25)')
-  })
-  naive.styles.light.DynamicTags.override({
-    addHeight: '24px',
-    addBorderStyle: 'dashed'
   })
 }
 

vite.config.js

@@ -46,11 +46,19 @@ module.exports = {
     {
       apply: 'pre',
       transform ({ code }) {
+        const isTusimple = !!process.env.TUSIMPLE
+        console.log('/demo/index.' + isTusimple ? 'ts-dev.js' : 'dev.js')
         switch (process.env.NODE_ENV) {
           case 'production':
-            return code.replace(/__INDEX__/, '/demo/index.prod.js')
+            return code.replace(
+              /__INDEX__/,
+              '/demo/index.' + (isTusimple ? 'ts-prod.js' : 'prod.js')
+            )
           default:
-            return code.replace(/__INDEX__/, '/demo/index.dev.js')
+            return code.replace(
+              /__INDEX__/,
+              '/demo/index.' + (isTusimple ? 'ts-dev.js' : 'dev.js')
+            )
         }
       }
     }