定制主题

package-lock.json

@@ -1840,6 +1840,70 @@
         "warning": "3.0.0"
       }
     },
+    "antd-theme-generator": {
+      "version": "1.1.6",
+      "resolved": "http://registry.npm.taobao.org/antd-theme-generator/download/antd-theme-generator-1.1.6.tgz",
+      "integrity": "sha1-Dz2PL64JNGn34bhDk2vaPowfrJ8=",
+      "dev": true,
+      "requires": {
+        "glob": "7.1.3",
+        "hash.js": "1.1.7",
+        "less": "3.9.0",
+        "less-bundle-promise": "1.0.7",
+        "less-plugin-npm-import": "2.1.0",
+        "postcss": "6.0.23",
+        "postcss-colors-only": "0.0.3"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "6.0.23",
+          "resolved": "http://registry.npm.taobao.org/postcss/download/postcss-6.0.23.tgz",
+          "integrity": "sha1-YcgswyisYOZ3ZF+XkFTrmLwOMyQ=",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "5.5.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "http://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
+          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
+          "dev": true
+        }
+      }
+    },
+    "antd-theme-webpack-plugin": {
+      "version": "1.2.0",
+      "resolved": "http://registry.npm.taobao.org/antd-theme-webpack-plugin/download/antd-theme-webpack-plugin-1.2.0.tgz",
+      "integrity": "sha1-SX3uY5nyNFXl3FxxbP9beRvGy1o=",
+      "dev": true,
+      "requires": {
+        "antd-theme-generator": "1.1.6",
+        "less-bundle-promise": "1.0.7",
+        "postcss": "6.0.23"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "6.0.23",
+          "resolved": "http://registry.npm.taobao.org/postcss/download/postcss-6.0.23.tgz",
+          "integrity": "sha1-YcgswyisYOZ3ZF+XkFTrmLwOMyQ=",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "5.5.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "http://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
+          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
+          "dev": true
+        }
+      }
+    },
     "any-observable": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/any-observable/-/any-observable-0.3.0.tgz",
@@ -1981,8 +2045,7 @@
       "version": "2.0.6",
       "resolved": "http://registry.npm.taobao.org/asap/download/asap-2.0.6.tgz",
       "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "asn1": {
       "version": "0.2.4",
@@ -3212,6 +3275,11 @@
       "dev": true,
       "optional": true
     },
+    "clamp": {
+      "version": "1.0.1",
+      "resolved": "http://registry.npm.taobao.org/clamp/download/clamp-1.0.1.tgz",
+      "integrity": "sha1-ZqDmQBGBbjcZaCj9yMjBRzEshjQ="
+    },
     "class-utils": {
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
@@ -4030,6 +4098,119 @@
         }
       }
     },
+    "css-color-extractor": {
+      "version": "0.0.5",
+      "resolved": "http://registry.npm.taobao.org/css-color-extractor/download/css-color-extractor-0.0.5.tgz",
+      "integrity": "sha1-tzeiVTMguDexLhJK/64D3VPErPI=",
+      "dev": true,
+      "requires": {
+        "array-unique": "0.2.1",
+        "color": "0.10.1",
+        "postcss": "5.2.18"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "http://registry.npm.taobao.org/ansi-regex/download/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "http://registry.npm.taobao.org/ansi-styles/download/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "array-unique": {
+          "version": "0.2.1",
+          "resolved": "http://registry.npm.taobao.org/array-unique/download/array-unique-0.2.1.tgz",
+          "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "http://registry.npm.taobao.org/chalk/download/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "2.2.1",
+            "escape-string-regexp": "1.0.5",
+            "has-ansi": "2.0.0",
+            "strip-ansi": "3.0.1",
+            "supports-color": "2.0.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "2.0.0",
+              "resolved": "http://registry.npm.taobao.org/supports-color/download/supports-color-2.0.0.tgz",
+              "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+              "dev": true
+            }
+          }
+        },
+        "color": {
+          "version": "0.10.1",
+          "resolved": "http://registry.npm.taobao.org/color/download/color-0.10.1.tgz",
+          "integrity": "sha1-wEGI34KiCd3rzOzazT7DIPGTc58=",
+          "dev": true,
+          "requires": {
+            "color-convert": "0.5.3",
+            "color-string": "0.3.0"
+          }
+        },
+        "color-convert": {
+          "version": "0.5.3",
+          "resolved": "http://registry.npm.taobao.org/color-convert/download/color-convert-0.5.3.tgz",
+          "integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0=",
+          "dev": true
+        },
+        "color-string": {
+          "version": "0.3.0",
+          "resolved": "http://registry.npm.taobao.org/color-string/download/color-string-0.3.0.tgz",
+          "integrity": "sha1-J9RvtnAlxcL6JZk7+/V55HhBuZE=",
+          "dev": true,
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "has-flag": {
+          "version": "1.0.0",
+          "resolved": "http://registry.npm.taobao.org/has-flag/download/has-flag-1.0.0.tgz",
+          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "5.2.18",
+          "resolved": "http://registry.npm.taobao.org/postcss/download/postcss-5.2.18.tgz",
+          "integrity": "sha1-ut+hSX1GJE9jkPWLMZgw2RB4U8U=",
+          "dev": true,
+          "requires": {
+            "chalk": "1.1.3",
+            "js-base64": "2.5.1",
+            "source-map": "0.5.7",
+            "supports-color": "3.2.3"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "http://registry.npm.taobao.org/strip-ansi/download/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "2.1.1"
+          }
+        },
+        "supports-color": {
+          "version": "3.2.3",
+          "resolved": "http://registry.npm.taobao.org/supports-color/download/supports-color-3.2.3.tgz",
+          "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
+          "dev": true,
+          "requires": {
+            "has-flag": "1.0.0"
+          }
+        }
+      }
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "http://registry.npm.taobao.org/css-color-names/download/css-color-names-0.0.4.tgz",
@@ -9165,6 +9346,12 @@
         "topo": "3.0.3"
       }
     },
+    "js-base64": {
+      "version": "2.5.1",
+      "resolved": "http://registry.npm.taobao.org/js-base64/download/js-base64-2.5.1.tgz",
+      "integrity": "sha1-Hvo57yxfeYC7F4St5KivLeMpESE=",
+      "dev": true
+    },
     "js-beautify": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.9.1.tgz",
@@ -9431,6 +9618,12 @@
         }
       }
     },
+    "less-bundle-promise": {
+      "version": "1.0.7",
+      "resolved": "http://registry.npm.taobao.org/less-bundle-promise/download/less-bundle-promise-1.0.7.tgz",
+      "integrity": "sha1-GY15kaxPXzx4YvrBB0x7msp7nLI=",
+      "dev": true
+    },
     "less-loader": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-4.1.0.tgz",
@@ -9456,6 +9649,33 @@
         }
       }
     },
+    "less-plugin-npm-import": {
+      "version": "2.1.0",
+      "resolved": "http://registry.npm.taobao.org/less-plugin-npm-import/download/less-plugin-npm-import-2.1.0.tgz",
+      "integrity": "sha1-gj5phskzGKmBccqFiEi2vq1Vvz4=",
+      "dev": true,
+      "requires": {
+        "promise": "7.0.4",
+        "resolve": "1.1.7"
+      },
+      "dependencies": {
+        "promise": {
+          "version": "7.0.4",
+          "resolved": "http://registry.npm.taobao.org/promise/download/promise-7.0.4.tgz",
+          "integrity": "sha1-Nj6EpMNsg1a4kP7WLJHOhdAu1Tk=",
+          "dev": true,
+          "requires": {
+            "asap": "2.0.6"
+          }
+        },
+        "resolve": {
+          "version": "1.1.7",
+          "resolved": "http://registry.npm.taobao.org/resolve/download/resolve-1.1.7.tgz",
+          "integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=",
+          "dev": true
+        }
+      }
+    },
     "leven": {
       "version": "2.1.0",
       "resolved": "http://registry.npm.taobao.org/leven/download/leven-2.1.0.tgz",
@@ -9787,6 +10007,11 @@
       "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
       "dev": true
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "http://registry.npm.taobao.org/lodash.throttle/download/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
     "lodash.transform": {
       "version": "4.6.0",
       "resolved": "http://registry.npm.taobao.org/lodash.transform/download/lodash.transform-4.6.0.tgz",
@@ -9927,6 +10152,11 @@
         "escape-string-regexp": "1.0.5"
       }
     },
+    "material-colors": {
+      "version": "1.2.6",
+      "resolved": "http://registry.npm.taobao.org/material-colors/download/material-colors-1.2.6.tgz",
+      "integrity": "sha1-bRlYhxEmmSzuzHL0vMTY8BCGX0Y="
+    },
     "math-random": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.4.tgz",
@@ -11301,6 +11531,87 @@
         "postcss-value-parser": "3.3.1"
       }
     },
+    "postcss-colors-only": {
+      "version": "0.0.3",
+      "resolved": "http://registry.npm.taobao.org/postcss-colors-only/download/postcss-colors-only-0.0.3.tgz",
+      "integrity": "sha1-JMcTwhv9FsCyo+iD3YoQM/Te/kk=",
+      "dev": true,
+      "requires": {
+        "css-color-extractor": "0.0.5",
+        "postcss": "5.2.18"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "http://registry.npm.taobao.org/ansi-regex/download/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "http://registry.npm.taobao.org/ansi-styles/download/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "http://registry.npm.taobao.org/chalk/download/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "2.2.1",
+            "escape-string-regexp": "1.0.5",
+            "has-ansi": "2.0.0",
+            "strip-ansi": "3.0.1",
+            "supports-color": "2.0.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "2.0.0",
+              "resolved": "http://registry.npm.taobao.org/supports-color/download/supports-color-2.0.0.tgz",
+              "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+              "dev": true
+            }
+          }
+        },
+        "has-flag": {
+          "version": "1.0.0",
+          "resolved": "http://registry.npm.taobao.org/has-flag/download/has-flag-1.0.0.tgz",
+          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "5.2.18",
+          "resolved": "http://registry.npm.taobao.org/postcss/download/postcss-5.2.18.tgz",
+          "integrity": "sha1-ut+hSX1GJE9jkPWLMZgw2RB4U8U=",
+          "dev": true,
+          "requires": {
+            "chalk": "1.1.3",
+            "js-base64": "2.5.1",
+            "source-map": "0.5.7",
+            "supports-color": "3.2.3"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "http://registry.npm.taobao.org/strip-ansi/download/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "2.1.1"
+          }
+        },
+        "supports-color": {
+          "version": "3.2.3",
+          "resolved": "http://registry.npm.taobao.org/supports-color/download/supports-color-3.2.3.tgz",
+          "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
+          "dev": true,
+          "requires": {
+            "has-flag": "1.0.0"
+          }
+        }
+      }
+    },
     "postcss-convert-values": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-4.0.1.tgz",
@@ -14451,6 +14762,17 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
       "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
+    "vue-color": {
+      "version": "2.7.0",
+      "resolved": "http://registry.npm.taobao.org/vue-color/download/vue-color-2.7.0.tgz",
+      "integrity": "sha1-MeiYNwpXhv1sMAc4jLckLba6aYg=",
+      "requires": {
+        "clamp": "1.0.1",
+        "lodash.throttle": "4.1.1",
+        "material-colors": "1.2.6",
+        "tinycolor2": "1.4.1"
+      }
+    },
     "vue-eslint-parser": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",

package.json

@@ -17,6 +17,7 @@
         "nprogress": "^0.2.0",
         "resize-detector": "^0.2.0",
         "vue": "^2.6.6",
+        "vue-color": "^2.7.0",
         "vue-router": "^3.0.1",
         "vuex": "^3.0.1"
     },
@@ -29,6 +30,7 @@
         "@vue/cli-service": "^3.5.0",
         "@vue/eslint-config-prettier": "^4.0.1",
         "@vue/test-utils": "1.0.0-beta.29",
+        "antd-theme-webpack-plugin": "^1.2.0",
         "babel-core": "7.0.0-bridge.0",
         "babel-eslint": "^10.0.1",
         "babel-jest": "^23.6.0",

public/index.html

@@ -1,17 +1,32 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>ant-design-vue-pro</title>
-  </head>
-  <body>
+</head>
+
+<body>
     <noscript>
       <strong>We're sorry but ant-design-vue-pro doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
-  </body>
-</html>
+    <link rel="stylesheet/less" type="text/css" href="/color.less" />
+    <script>
+        window.less = {
+            async: false,
+            env: 'production',
+            javascriptEnabled: true,
+            modifyVars: {
+                "primary-color": "#1DA57A"
+            },
+        };
+    </script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
+</body>
+
+</html>

src/components/SettingDrawer/index.less

@@ -0,0 +1,15 @@
+@import "~ant-design-vue/lib/style/themes/default.less";
+
+.setting-drawer-handle {
+  position: absolute;
+  top: 240px;
+  right: 300px;
+  width: 48px;
+  height: 48px;
+  background: @primary-color;
+  color: #fff;
+  font-size: 20px;
+  text-align: center;
+  line-height: 48px;
+  border-radius: 3px 0 0 3px;
+}

src/components/SettingDrawer/index.vue

@@ -8,7 +8,7 @@
       width="300px"
     >
       <template v-slot:handle>
-        <div class="handle" @click="visible = !visible">
+        <div class="setting-drawer-handle" @click="visible = !visible">
           <a-icon :type="visible ? 'close' : 'setting'"></a-icon>
         </div>
       </template>
@@ -52,18 +52,4 @@ export default {
   }
 };
 </script>
-<style scoped>
-.handle {
-  position: absolute;
-  top: 240px;
-  right: 300px;
-  width: 48px;
-  height: 48px;
-  background: #1890ff;
-  color: #fff;
-  font-size: 20px;
-  text-align: center;
-  line-height: 48px;
-  border-radius: 3px 0 0 3px;
-}
-</style>
+<style lang="less" src="./index.less"></style>

src/layouts/BasicLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="[`nav-theme-${navTheme}`, `nav-layout-${navLayout}`]">
-    <a-layout id="components-layout-demo-side" style="min-height: 100vh">
+    <a-layout style="min-height: 100vh">
       <a-layout-sider
         v-if="navLayout === 'left'"
         :theme="navTheme"

vue.config.js

@@ -1,11 +1,33 @@
+const path = require("path");
+const AntDesignThemePlugin = require("antd-theme-webpack-plugin");
+
+const options = {
+  antDir: path.join(__dirname, "./node_modules/ant-design-vue"),
+  stylesDir: path.join(__dirname, "./src"),
+  varFile: path.join(
+    __dirname,
+    "./node_modules/ant-design-vue/lib/style/themes/default.less"
+  ),
+  mainLessFile: "",
+  themeVariables: ["@primary-color"],
+  generateOnce: false
+};
+
+const themePlugin = new AntDesignThemePlugin(options);
 module.exports = {
   css: {
     loaderOptions: {
       less: {
+        modifyVars: {
+          "primary-color": "#1DA57A"
+        },
         javascriptEnabled: true
       }
     }
   },
+  configureWebpack: {
+    plugins: [themePlugin]
+  },
   chainWebpack: config => {
     const svgRule = config.module.rule("svg");