Merge branch 'next' of https://github.com/jdf2e/nutui into next

jd/createComponentMode.js

@@ -5,9 +5,9 @@ const inquirer = require('inquirer');
 
 const path = require('path');
 const fs = require('fs');
-const config =require("../src/config");
-const demoModel=require("./demo")
-const nav=config.nav;
+const config = require('../src/config');
+const demoModel = require('./demo');
+const nav = config.nav;
 
 var newCpt = {
   version: '3.0.0',
@@ -27,18 +27,18 @@ function init() {
         name: 'name',
         message: '组件英文名(每个单词的首字母都大写，如TextBox)：',
         validate(value) {
-            let repeat = false;
-            for (var i = 0; i < nav.length; i++) {
-              for (var j = 0; j < nav[i].packages.length; j++) {
-                if (nav[i].packages[j].name === value) {
-                  repeat = true;
-                }
+          let repeat = false;
+          for (var i = 0; i < nav.length; i++) {
+            for (var j = 0; j < nav[i].packages.length; j++) {
+              if (nav[i].packages[j].name === value) {
+                repeat = true;
               }
             }
+          }
 
-            if (repeat) {
-              return '该组件名已存在！';
-            }
+          if (repeat) {
+            return '该组件名已存在！';
+          }
           const pass = value && value.match(/^[A-Z]/);
           if (pass) {
             return true;
@@ -76,18 +76,19 @@ function init() {
           return '输入有误！请输入选项前编号';
         }
       },
-        {
-          type: 'input',
-          name: 'sort',
-          message: '请选择组件分类(输入编号)：1布局组件，2操作反馈，3基础组件，4导航组件，5数据录入，6业务组件',
-          validate(value) {
-            const pass = /^[1-6]$/.test(value);
-            if (pass) {
-              return true;
-            }
-            return '输入有误！请输入选项前编号';
+      {
+        type: 'input',
+        name: 'sort',
+        message:
+          '请选择组件分类(输入编号)：1布局组件，2操作反馈，3基础组件，4导航组件，5数据录入，6业务组件',
+        validate(value) {
+          const pass = /^[1-6]$/.test(value);
+          if (pass) {
+            return true;
           }
-        },
+          return '输入有误！请输入选项前编号';
+        }
+      },
       //   {
       //     type: 'confirm',
       //     name: 'showDemo',
@@ -148,7 +149,7 @@ function createIndexJs() {
     // }
     // fs.writeFile(filePath,  content, (err) => {
     //     if (err) throw err;
-   resolve(`生成index.js文件成功`);
+    resolve(`生成index.js文件成功`);
     // });
   });
 }
@@ -187,19 +188,19 @@ function createDemo() {
 
 function addToPackageJson() {
   return new Promise((resolve, reject) => {
-      let sort=newCpt.sort;
-      newCpt.sort=nav[sort-1].packages.length+1;
-      nav[sort-1].packages.push(newCpt);
-      config.nav=nav;
-      // conf.packages.push(newCpt);
-       const dirPath = path.join(__dirname, `../`);
-       const filePath = path.join(dirPath, `src/config.js`);
-       
-       var tempfile="module.exports = "+JSON.stringify(config, null, 2)+";"
-      fs.writeFile(filePath, tempfile, (err) => {
-          if (err) throw err;
-          resolve(`修改config.json文件成功`);
-      });
+    let sort = newCpt.sort;
+    newCpt.sort = nav[sort - 1].packages.length + 1;
+    nav[sort - 1].packages.push(newCpt);
+    config.nav = nav;
+    // conf.packages.push(newCpt);
+    const dirPath = path.join(__dirname, `../`);
+    const filePath = path.join(dirPath, `src/config.js`);
+
+    var tempfile = 'module.exports = ' + JSON.stringify(config, null, 2) + ';';
+    fs.writeFile(filePath, tempfile, err => {
+      if (err) throw err;
+      resolve(`修改config.json文件成功`);
+    });
   });
 }
 function createScss() {
@@ -251,7 +252,7 @@ function createNew() {
       return createDoc();
     })
     .then(() => {
-       return addToPackageJson();
+      return addToPackageJson();
     })
     .then(() => {
       console.log('组件模板生成完毕，请开始你的表演~');

src/packages/avatar/demo.vue

@@ -3,10 +3,26 @@
     <h2>默认用法</h2>
     <!-- <p>内置"small","normal","large"三种尺寸规格</p> -->
     <nut-cell>
-      <nut-avatar size="80" bg-icon bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"></nut-avatar>
-      <nut-avatar size="large" bg-icon bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"></nut-avatar>
-      <nut-avatar size="normal" bg-icon bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"></nut-avatar>
-      <nut-avatar size="small" bg-icon bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"></nut-avatar>
+      <nut-avatar
+        size="80"
+        bg-icon
+        bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+      ></nut-avatar>
+      <nut-avatar
+        size="large"
+        bg-icon
+        bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+      ></nut-avatar>
+      <nut-avatar
+        size="normal"
+        bg-icon
+        bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+      ></nut-avatar>
+      <nut-avatar
+        size="small"
+        bg-icon
+        bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+      ></nut-avatar>
     </nut-cell>
     <!-- <h2>修改形状类型</h2>
     <nut-cell>
@@ -20,7 +36,10 @@
     </nut-cell>
     <h2>修改背景图片</h2>
     <nut-cell>
-      <nut-avatar bg-icon bg-image="https://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"></nut-avatar>
+      <nut-avatar
+        bg-icon
+        bg-image="https://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"
+      ></nut-avatar>
     </nut-cell>
     <h2>可以修改头像的内容</h2>
     <nut-cell>

src/packages/avatar/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <view :style="styles" :class="['nut-avatar', 'avatar-' + size, 'avatar-' + shape]" @click="activeAvatar">
+  <view
+    :style="styles"
+    :class="['nut-avatar', 'avatar-' + size, 'avatar-' + shape]"
+    @click="activeAvatar"
+  >
     <i class="icon" :style="iconStyles"></i
     ><!--不使用icon组件，1:icon组件没有扩展维护；2:修改该图片不方便-->
     <view class="text" v-if="isShowText"><slot></slot></view>
@@ -40,8 +44,18 @@ export default create({
     };
     const styles = computed(() => {
       return {
-        width: size.value == 'large' || size.value == 'middle' || size.value == 'small' ? '' : `${size.value}px`,
-        height: size.value == 'large' || size.value == 'middle' || size.value == 'small' ? '' : `${size.value}px`,
+        width:
+          size.value == 'large' ||
+          size.value == 'middle' ||
+          size.value == 'small'
+            ? ''
+            : `${size.value}px`,
+        height:
+          size.value == 'large' ||
+          size.value == 'middle' ||
+          size.value == 'small'
+            ? ''
+            : `${size.value}px`,
         backgroundImage: bgImage.value ? `url(${bgImage.value})` : null,
         backgroundColor: `${bgColor.value}`
       };

src/packages/button/index.vue

@@ -11,7 +11,13 @@ import { PropType, CSSProperties, toRefs, computed } from 'vue';
 import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('button');
 
-export type ButtonType = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+export type ButtonType =
+  | 'default'
+  | 'primary'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'danger';
 export type ButtonSize = 'large' | 'normal' | 'small';
 export type ButtonShape = 'square' | 'round';
 
@@ -52,7 +58,16 @@ export default create({
   setup(props, { emit, slots }) {
     // setup内部只能访问这4个属性，值得注意的是props必须在上面声明才能在这里取到
     console.log('props', props, 'emit', emit, 'slots', slots);
-    const { type, size, shape, disabled, loading, color, plain, block } = toRefs(props);
+    const {
+      type,
+      size,
+      shape,
+      disabled,
+      loading,
+      color,
+      plain,
+      block
+    } = toRefs(props);
     // console.log("type", type, "size", size);
 
     const handleClick = (event: MouseEvent) => {

src/sites/assets/util/ref.ts

@@ -2,4 +2,4 @@ import { ref } from 'vue';
 
 export const currentRoute = ref('/');
 
-export const themeColor = ref('red');
+export const themeColor = ref('red');

src/sites/doc/components/Footer.vue

@@ -23,8 +23,13 @@
         <div class="doc-footer-item">JDW智能构建平台</div>
         <div class="doc-footer-item">JDW智能构建平台</div>
       </div>
-      <div class="doc-footer-list" @click.stop="data.isShowSelect = !data.isShowSelect">
-        <div class="doc-footer-select-hd"><i class="icon-color"></i>主题换肤</div>
+      <div
+        class="doc-footer-list"
+        @click.stop="data.isShowSelect = !data.isShowSelect"
+      >
+        <div class="doc-footer-select-hd"
+          ><i class="icon-color"></i>主题换肤</div
+        >
         <div class="doc-footer-select-bd" v-show="data.isShowSelect">
           <div
             class="doc-footer-select-item"
@@ -154,7 +159,8 @@ export default defineComponent({
       width: 12px;
       height: 10px;
       margin-right: 10px;
-      background: url('../../assets/images/icon-color.png') no-repeat center/100%;
+      background: url('../../assets/images/icon-color.png') no-repeat
+        center/100%;
     }
     .circle-red,
     .circle-black,

src/sites/doc/components/Header.vue

@@ -6,9 +6,7 @@
       <span class="logo-border"></span>
     </div>
     <div class="header-nav">
-      <div class="search-box">
-        <input type="text" class="search-input" placeholder="在 NutUI 中搜索" />
-      </div>
+      <Search />
       <div class="nav-box">
         <ul class="nav-list">
           <li class="nav-item" :class="{ active: isActive(header[0].name) }">
@@ -63,10 +61,14 @@
 </template>
 <script lang="ts">
 import { defineComponent, reactive, computed } from 'vue';
+import Search from './Search.vue';
 import { header } from '@/config';
 import { currentRoute, themeColor } from '@/sites/assets/util/ref';
 export default defineComponent({
   name: 'doc-header',
+  components: {
+    Search
+  },
   setup() {
     const data = reactive({
       theme: 'black',
@@ -172,17 +174,6 @@ export default defineComponent({
     width: calc(100% - 240px);
     min-width: 900px;
     padding: 0 40px;
-    .search-box {
-      font-size: 0;
-      .search-input {
-        height: 22px;
-        padding-left: 42px;
-        font-size: 14px;
-        vertical-align: middle;
-        background: transparent url('../../assets/images/input-search.png')
-          no-repeat;
-      }
-    }
     .nav-box {
       margin-right: 140px;
       .nav-list {

src/sites/doc/components/Search.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="search-box">
+    <input
+      type="text"
+      class="search-input"
+      placeholder="在 NutUI 中搜索"
+      v-model="data.searchVal"
+      @focus="onfocus"
+      @keyup="choseList"
+    />
+    <ul class="search-list" v-if="data.searchList.length > 0">
+      <li
+        :class="data.searchCurName == item.name ? 'cur' : ''"
+        @click="checklist(item)"
+        v-for="(item, index) in data.searchList"
+        :key="index"
+      >
+        <router-link :to="item.name.toLowerCase()">
+          {{ item.name }}
+          <span>{{ item.cName }}</span>
+        </router-link>
+        <!-- <router-link v-if="!_package.isLink" :to="_package.name.toLowerCase()">{{ _package.cName }}</router-link> -->
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+import { defineComponent, reactive, onMounted, watch } from 'vue';
+import { nav } from '@/config.js';
+export default defineComponent({
+  name: 'search',
+  setup() {
+    const data = reactive({
+      nav,
+      navList: [],
+      searchIndex: 0,
+      searchList: [],
+      searchVal: '',
+      searchCName: ''
+    });
+    onMounted(() => {
+      const files = require.context('@/packages', true, /doc\.md$/);
+      files.keys().forEach(component => {
+        const componentEntity = files(component).default;
+      });
+      // console.log('nav', nav);
+      nav.forEach(item => {
+        item.packages.forEach(value => {
+          // console.log('value', value)
+          data.navList.push(value);
+        });
+        console.log('search', data.navList);
+      });
+    });
+    watch(
+      () => data.searchVal,
+      sVal => {
+        console.log(sVal, '改变');
+        if (sVal) {
+          data.searchList = data.navList.filter(item => {
+            if (item.show === false) return false;
+            console.log('item', item);
+            const rx = new RegExp(sVal, 'gi');
+            return rx.test(item.name + ' ' + item.cName + '' + item.desc);
+          });
+          console.log('rx2', data.searchList.length, data.searchList);
+        } else {
+          data.searchCName = '';
+          data.searchIndex = 0;
+          data.searchList = [];
+        }
+      }
+    );
+    const onfocus = e => {
+      e.target.select();
+      // console.log('e', e.target.select())
+    };
+    const choseList = e => {
+      data.searchIndex = 0;
+    };
+    return {
+      data,
+      onfocus,
+      choseList
+    };
+  }
+});
+</script>
+<style lang="scss">
+.search-box {
+  position: relative;
+  min-width: 300px;
+  height: 22px;
+  line-height: 22px;
+  .search-input {
+    height: 22px;
+    padding-left: 42px;
+    font-size: 14px;
+    vertical-align: middle;
+    background: transparent url('../../assets/images/input-search.png')
+      no-repeat;
+    font-size: 14px;
+    color: #fff;
+    &:focus {
+      outline: none;
+    }
+  }
+}
+.search-list {
+  background: #fff;
+  position: absolute;
+  width: 300px;
+  list-style: none;
+  border: 1px solid #f2f2f2;
+  z-index: 99999;
+  top: 27px;
+  padding: 0;
+  li {
+    height: 40px;
+    line-height: 40px;
+    font-size: 12px;
+    a {
+      display: inline-block;
+      box-sizing: border-box;
+      width: 100%;
+      padding-left: 40px;
+      text-decoration: none;
+      color: #666;
+    }
+    &:hover {
+      // background: #6096ff;
+      color: #fa2c19;
+      a {
+        color: #fa2c19;
+      }
+    }
+  }
+  .cur {
+    background: #6096ff;
+    color: #fff;
+    a {
+      color: #fff;
+    }
+  }
+}
+</style>

src/sites/doc/router.ts

@@ -2,6 +2,7 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 import Index from './views/Index.vue';
 import Resource from './views/Resource.vue';
+import Main from './views/Main.vue';
 
 const pagesRouter: Array<RouteRecordRaw> = [];
 const files = require.context('@/packages', true, /doc\.md$/);
@@ -30,7 +31,14 @@ const routes: Array<RouteRecordRaw> = [
     name: '/',
     component: Index,
     children: pagesRouter
-  }, {
+  },
+  {
+    path: '/main',
+    name: '/main',
+    component: Main
+    // children: pagesRouter
+  },
+  {
     path: '/resource',
     name: 'resource',
     component: Resource

src/sites/doc/views/Main.vue

@@ -0,0 +1,102 @@
+<template>
+  <doc-header></doc-header>
+  <div class="doc-content-index">
+    <div class="content-left">
+      <div class="content-title"> Nut UI 3.0 </div>
+      <div class="content-smile"> </div>
+      <div class="content-subTitle">一款具有京东风格的VUE组件</div>
+      <div class="content-button">
+        <input class="leftButton" type="button" value="开始使用" />
+        <input class="rightButton" type="button" value="扫码体验" />
+      </div>
+    </div>
+    <div class="content-right">
+      <div class="content-img"> </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, onMounted, reactive } from 'vue';
+import { onBeforeRouteUpdate, RouteLocationNormalized, useRoute } from 'vue-router';
+import { currentRoute } from '@/sites/assets/util/ref';
+import Header from '@/sites/doc/components/Header.vue';
+export default defineComponent({
+  name: 'main',
+  components: { [Header.name]: Header },
+  setup() {
+    const data = reactive({});
+
+    onMounted(() => {
+      const route = useRoute();
+    });
+
+    return data;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.doc-content-index {
+  display: flex;
+  flex: 1;
+  background-color: #070505;
+
+  .content-left {
+    padding: 15% 0 0 8.8%;
+    // margin: auto 0;
+    width: 1300px;
+    min-width: 500px;
+    .content-title {
+      // line-height: 36px;
+      font-family: PingFangSC-Medium;
+      font-size: 50px;
+      color: rgba(255, 255, 255, 1);
+    }
+    .content-smile {
+      margin-top: 10px;
+      width: 69px;
+      height: 27px;
+      background: url(https://storage.360buyimg.com/imgtools/09516173b9-9b32b9d0-3864-11eb-9a56-0104487ad2b0.png) no-repeat;
+      background-size: cover;
+    }
+    .content-subTitle {
+      margin-top: 12px;
+      font-family: PingFangSC-Regular;
+      font-size: 20px;
+      color: rgba(255, 255, 255, 1);
+    }
+    .content-button {
+      margin-top: 40px;
+      .leftButton {
+        font-family: PingFangSC-Regular;
+        font-size: 20px;
+        color: rgba(255, 255, 255, 1);
+        width: 170px;
+        height: 50px;
+        background: linear-gradient(135deg, rgba(250, 25, 44, 1) 0%, rgba(250, 39, 40, 1) 45%, rgba(250, 56, 31, 1) 83%, rgba(250, 63, 25, 1) 100%);
+        border-radius: 29px;
+      }
+      .rightButton {
+        margin-left: 30px;
+        font-size: 20px;
+        color: rgba(227, 44, 54, 1);
+        width: 170px;
+        height: 50px;
+        border: 1px solid rgba(250, 44, 25, 1);
+        border-radius: 29px;
+        background-color: #000000;
+      }
+    }
+  }
+  .content-right {
+    flex: 1;
+    margin: auto 0;
+    .content-img {
+      width: 900px;
+      height: 514px;
+      background: url(https://storage.360buyimg.com/imgtools/732c3242e9-9b1946b0-391a-11eb-8a8d-55c57d054ae1.png) no-repeat;
+      background-size: cover;
+    }
+  }
+}
+</style>