chore: init theme

index.html

@@ -8,7 +8,7 @@
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
       name="viewport"
     />
-    <title>NutUI - 移动端 Vue2、Vue3、小程序 组件库</title>
+    <title>NutUI - 主题定制</title>
     <meta name="keywords" content="Vue3组件库,移动端组件库,Vite,Vue组件库,Vue3,Vue2" />
     <meta name="description" content="京东风格的轻量级移动端 Vue 组件库" />
     <meta http-equiv="Cache-Control" content="no-cache" />

src/packages/styles/variables.scss

@@ -1,8 +1,11 @@
 // color
 
 // 主色调
-$primary-color: #fa2c19 !default;
-$primary-color-end: #fa6419 !default;
+// $primary-color: #fa2c19 !default;
+// $primary-color-end: #fa6419 !default;
+$primary-color: #2c68ff;
+$primary-color-end: #2c68ff;
+
 // 辅助色
 $help-color: #f5f5f5 !default;
 // 标题常规文字

src/sites/doc/components/Header.vue

@@ -6,8 +6,8 @@
       <span class="version">{{ version }}</span>
     </div>
     <div class="header-nav">
-      <a href="https://github.com/jdf2e/nutui-docs" target="_blank"
-        >当前环境：development ,代码 PR 合并后，文档会自动同步至 https://github.com/jdf2e/nutui-docs</a
+      <a href="https://github.com/jdf2e/nutui/tree/theme" target="_blank"
+        >NutUI 主题定制 https://github.com/jdf2e/nutui/tree/theme</a
       >
     </div>
   </div>

src/sites/doc/components/Nav.vue

@@ -1,5 +1,13 @@
 <template>
   <div class="doc-nav">
+    <ol>
+      <li>全局样式变量</li>
+      <ul>
+        <li>
+          <router-link to="base" :class="{ active: isActive('base') }"> 基础样式 </router-link>
+        </li>
+      </ul>
+    </ol>
     <ol v-for="_nav in nav" :key="_nav">
       <li>{{ _nav.name }}</li>
       <ul>

src/sites/doc/components/ThemeSetting.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="theme-setting">
+    {{ name }}
+    <ul>
+      <li :key="index" v-for="(item, index) in styleList">
+        <p>{{ item.name }}</p>
+        <div class="color-picker">
+          <span>{{ item.value }}</span>
+          <input type="color" v-model="item.value" />
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, reactive } from 'vue';
+export default defineComponent({
+  name: 'theme-setting',
+  props: {
+    name: String
+  },
+  setup(props) {
+    // 获取样式文件，正则匹配
+
+    // https://raw.githubusercontent.com/jdf2e/nutui/next/src/packages/styles/variables.scss
+    var pattern = /\$button.*;/;
+    // 需要包含换行
+    console.log(pattern.test('str'));
+
+    const styleList = reactive([
+      {
+        name: '$primary-color',
+        value: '#2c68ff'
+      },
+      {
+        name: '$primary-color',
+        value: '#2c68ff'
+      }
+    ]);
+
+    return { styleList };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.theme-setting {
+  li {
+    width: 500px;
+    list-style: none;
+    margin-bottom: 12px;
+    &::before {
+      display: none;
+    }
+    .color-picker {
+      display: flex;
+      align-items: center;
+    }
+    p {
+      font-size: 14px;
+      text-overflow: ellipsis;
+      margin-bottom: 12px;
+    }
+    input {
+      padding: 0;
+      margin: 0;
+      width: 100%;
+      background: none;
+      border: 1px solid #ccc;
+      border-radius: 2px;
+      height: 34px;
+    }
+  }
+}
+</style>

src/sites/doc/router.ts

@@ -1,8 +1,15 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 import Index from './views/Index.vue';
+import ThemeSetting from './components/ThemeSetting.vue';
 import config from '../config/env';
-const pagesRouter: Array<RouteRecordRaw> = [];
+const pagesRouter: Array<RouteRecordRaw> = [
+  {
+    path: '/base',
+    name: 'base',
+    component: ThemeSetting
+  }
+];
 
 /** vite */
 const modulesPage = import.meta.glob('/src/packages/__VUE/**/doc.md');
@@ -10,7 +17,7 @@ for (const path in modulesPage) {
   let name = (/packages\/__VUE\/(.*)\/doc.md/.exec(path) as any[])[1];
   pagesRouter.push({
     path: '/' + name,
-    component: modulesPage[path],
+    component: ThemeSetting || modulesPage[path],
     name
   });
 }

src/sites/doc/views/Index.vue

@@ -4,20 +4,7 @@
     <doc-nav></doc-nav>
     <div class="doc-content">
       <div class="doc-content-document">
-        <div class="doc-content-tabs" v-if="isShow() && isShowTaroDoc">
-          <div
-            class="tab-item"
-            :class="{ cur: curKey === item.key }"
-            v-for="item in tabs"
-            :key="item.key"
-            @click="handleTabs(item.key)"
-            >{{ item.text }}</div
-          >
-        </div>
-        <div class="doc-content-tabs" v-if="isShow() && !isShowTaroDoc">
-          <div class="tab-item cur">vue/taro</div>
-        </div>
-        <router-view />
+        <theme-setting :name="routername" />
       </div>
       <doc-demo-preview :url="demoUrl"></doc-demo-preview>
     </div>
@@ -30,13 +17,15 @@ import { onBeforeRouteUpdate, RouteLocationNormalized, useRoute, useRouter } fro
 import Header from '@/sites/doc/components/Header.vue';
 import Nav from '@/sites/doc/components/Nav.vue';
 import DemoPreview from '@/sites/doc/components/DemoPreview.vue';
+import ThemeSetting from '@/sites/doc/components/ThemeSetting.vue';
 import { RefData } from '@/sites/assets/util/ref';
 export default defineComponent({
   name: 'doc',
   components: {
     [Header.name]: Header,
     [Nav.name]: Nav,
-    [DemoPreview.name]: DemoPreview
+    [DemoPreview.name]: DemoPreview,
+    [ThemeSetting.name]: ThemeSetting
   },
   setup() {
     const route = useRoute();
@@ -44,6 +33,7 @@ export default defineComponent({
     const excludeTaro = ['/intro', '/start', '/theme', '/joinus', '/starttaro', '/contributing'];
     const data = reactive({
       demoUrl: 'demo.html',
+      routername: 'base',
       curKey: 'vue',
       tabs: [
         {
@@ -87,6 +77,7 @@ export default defineComponent({
       const { origin, pathname } = window.location;
       RefData.getInstance().currentRoute.value = router.name as string;
       data.demoUrl = `${origin}${pathname.replace('index.html', '')}demo.html#${router.path}`;
+      data.routername = router.name as string;
     };
 
     const watchDocMd = () => {