@ajaxjs/ui 1.0.8 → 1.1.0

package/src/components/widgets/AdjustFontSize.vue

@@ -1,66 +0,0 @@
-<template>
-  <div class="aj-adjust-font-size">
-    <span>字体大小</span>
-    <ul @click="onClk">
-      <li><label><input type="radio" name="fontSize" /> 小</label></li>
-      <li><label><input type="radio" name="fontSize" /> 中</label></li>
-      <li><label><input type="radio" name="fontSize" /> 大</label></li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-/**
- * 调整正文字体大小
- */
-export default {
-  props: {
-    articleTarget: { type: String, default: "article p" }, // 正文所在的位置，通过 CSS Selector 定位
-  },
-  methods: {
-    onClk(ev: Event): void {
-      let el: Element = ev.target as Element;
-      let setFontSize = (fontSize: string): void => {
-        document.body
-          .querySelectorAll(this.$props.articleTarget)
-          .forEach((p: HTMLParagraphElement) => (p.style.fontSize = fontSize));
-      };
-
-      if (el.tagName == "LABEL" || el.tagName == "INPUT") {
-        if (el.tagName != "LABEL") el = el.parentNode as Element;
-
-        console.log(el);
-        if (el.innerHTML.indexOf("大") != -1) setFontSize("12pt");
-        else if (el.innerHTML.indexOf("中") != -1) setFontSize("10.5pt");
-        else if (el.innerHTML.indexOf("小") != -1) setFontSize("9pt");
-      }
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.aj-adjust-font-size {
-  width: 210px;
-  font-size: 0.8rem;
-  padding: 2px 0;
-
-  span {
-    float: left;
-    width: 35%;
-    display: block;
-  }
-
-  ul {
-    width: 65%;
-    float: right;
-    cursor: pointer;
-
-    li {
-      display: block;
-      float: right;
-      width: 33%;
-    }
-  }
-}
-</style>

package/src/components/widgets/AjAvatar.vue

@@ -1,42 +0,0 @@
-<template>
-  <a :href="avatar" target="_blank">
-    <img :src="avatar" style="max-width:50px;max-height:60px;vertical-align: middle;" @mouseenter="mouseEnter" @mouseleave="mouseLeave" />
-  </a>
-</template>
-
-<script lang="ts">
-/**
- * 显示头像
- */
-export default {
-  props: {
-    avatar: {
-      // 头像图片地址
-      type: String,
-      required: true,
-    },
-  },
-  methods: {
-    mouseEnter(): void {
-      // @ts-ignore
-      if (window.aj_avatar_imgUrl)
-        // @ts-ignore
-        window.aj_avatar_imgUrl = this.avatar;
-    },
-    mouseLeave(): void {
-      // @ts-ignore
-      if (window.aj_avatar_imgUrl)
-        // @ts-ignore
-        window.aj_avatar_imgUrl = null;
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.aj-img-thumb img {
-  max-width: 50px;
-  max-height: 60px;
-  vertical-align: middle;
-}
-</style>

package/src/components/widgets/Article.vue

@@ -1,49 +0,0 @@
-<template>
-  <article>
-    <h2>{{title}}</h2>
-
-    <div class="toolbar">
-      <span v-if="author">作者: {{author}}</span> &nbsp;
-      <a :href="source" v-if="source" target="_blank">&#129109;来源</a>
-      <FontSize style="float:right;clear:both"></FontSize>
-    </div>
-    <slot></slot>
-  </article>
-</template>
-
-<script>
-import FontSize from './AdjustFontSize.vue';
-
-export default {
-  props: {
-    title: String, author: String, source: String
-  },
-  components: { FontSize }
-}
-</script>
-
-<style lang="less" scoped>
-article {
-  & > p {
-    .aj-text-function();
-    text-indent: 2em;
-  }
-  & > img,
-  & > p > img {
-    max-width: 80%;
-    margin: 0 auto;
-    display: block;
-  }
-
-  h2 {
-    .aj-text-title();
-  }
-
-  .toolbar {
-    height: 15px;
-    margin: 30px 0;
-    font-size: 0.8rem;
-    text-align: right;
-  }
-}
-</style>

package/src/components/widgets/BaiduSearch.vue

@@ -1,50 +0,0 @@
-<template>
-  <form class="aj-widget-baidu-search" method="GET" action="http://www.baidu.com/baidu" onsubmit="//return g(this);">
-    <input type="text" name="word" placeholder="请输入搜索之关键字" />
-    <input name="tn" value="bds" type="hidden" />
-    <input name="cl" value="3" type="hidden" />
-    <input name="ct" value="2097152" type="hidden" />
-    <input name="si" :value="getSiteDomainName" type="hidden" />
-    <div class="searchBtn" onclick="this.parentNode.submit();"></div>
-  </form>
-</template>
-
-<script lang="ts">
-/**
- * Baidu 自定义搜索
- */
-export default {
-  props: {
-    siteDomainName: String,
-  },
-  computed: {
-    getSiteDomainName(): string {
-      return this.siteDomainName || location.host || document.domain;
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.aj-widget-baidu-search {
-  padding: 0;
-  margin: 0;
-
-  input[type="text"] {
-    border-radius: 5px;
-    border: 1px solid gray;
-    padding: 0 2px;
-    height: 22px;
-  }
-
-  .searchBtn {
-    background: url("data:image/gif;base64,R0lGODlhEAAQAGYAACH5BAEAAAAALAAAAAAQABAApgEAAOD3//n9/+3//936/xt7uX+x1KAQCyeHwsj1/6QcGZDd+fX+/+oOAFW05FCUxMXs+9P0/+T0+7fv/5rm/6fn/bHr/jCBugt0t0CKv47e+4fW9CaEv6fb8w9/weteSfkEAOsJC8xBKehVP+FZPxF1thZ4uMHx/1FBZQdssQ51uLrk9zlumyB3tDBRir3x/7nm+WK75DKb0z2k2XTG6mXD7Gq/6Euq20yk1EWp20ay5Umv4liw3dUcAKowMBqJycEzB8EqANoZACOa2KQNCp4NCgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeWgACCDwUIhgaCiYoFNBQWFQs4F4qJBQsRAZkBFTwZlBcbEQMCpAMDCwiUBRQEpCcTCQEwN4iJHBYSAgmwBAEQObWCBRoBAi8JvQMdMsEAGTEQAQTJAw4qlAAmNSsM3RIOPyzYACUzOjY7Qx4uIQfjDykYGC0oHyAN7uOKCiMNQvn6BCkg0SNIkYCJFIgAAhChDyII9QUCADs=")
-      no-repeat center;
-    width: 25px;
-    height: 25px;
-    cursor: pointer;
-    display: inline-block;
-    vertical-align: bottom;
-  }
-}
-</style>

package/src/components/widgets/Expander.vue

@@ -1,65 +0,0 @@
-<template>
-  <div class="aj-expander" :style="'height:' + (expended ? openHeight : closeHeight) + 'px;'">
-    <div :class="expended ? 'closeBtn' : 'openBtn'" @click="expended = !expended;"></div>
-    <slot></slot>
-  </div>
-</template>
-
-<script lang="ts">
-/**
- * 展开闭合器
- */
-export default {
-  props: {
-    openHeight: { type: Number, default: 200 },
-    closeHeight: { type: Number, default: 50 },
-  },
-  data(): any {
-    return {
-      expended: false,
-    };
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.aj-expander {
-  overflow: hidden;
-  position: relative;
-  clear: both;
-  transition: height 200ms ease 0s;
-
-  .mask-layer {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 23px;
-    width: 100%;
-    background: -webkit-gradient(
-      linear,
-      center top,
-      center bottom,
-      from(transparent),
-      to(white)
-    );
-  }
-
-  .openBtn {
-    background: url("https://ajaxjs.nos-eastchina1.126.net/images/openBtn.png");
-  }
-
-  .closeBtn {
-    background: url("https://ajaxjs.nos-eastchina1.126.net/images/closeBtn.png");
-  }
-
-  .closeBtn,
-  .openBtn {
-    width: 45px;
-    height: 32px;
-    position: absolute;
-    cursor: pointer;
-    top: 0px;
-    right: 0px;
-  }
-}
-</style>

package/src/components/widgets/ImageEnlarger.vue

@@ -1,42 +0,0 @@
-<template>
-  <a class="aj-img-thumb" :href="getImgUrl" v-if="imgUrl" target="_blank">
-    <img :src="getImgUrl" :onmouseenter="'aj_widget_imageEnlarger_imgUrl = ' + getImgUrl + ';'" onmouseleave="aj_widget_imageEnlarger_imgUrl = null;" />
-  </a>
-</template>
-
-<script lang="ts">
-/**
- * 悬浮显示大图
- */
-export default {
-  props: {
-    imgUrl: {
-      // 图片地址
-      type: String,
-      required: true,
-    },
-  },
-  computed: {
-    getImgUrl(): string {
-      if (!this.imgUrl) return "";
-
-      if (this.imgUrl.indexOf("http") != -1)
-        // 图片地址已经是完整的 http 地址，直接返回
-        return this.imgUrl;
-      // uploadFile.imgPerfix
-
-      if (!this.ajResources.imgPerfix) throw "未提供图片前缀地址";
-
-      return this.ajResources.imgPerfix + this.imgUrl;
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.aj-img-thumb img {
-  max-width: 50px;
-  max-height: 60px;
-  vertical-align: middle;
-}
-</style>

package/src/components/widgets/OpacityBanner.vue

@@ -1,124 +0,0 @@
-<template>
-  <ul class="aj-opacity-banner">
-    <slot></slot>
-  </ul>
-</template>
-
-<script lang="ts">
-/**
- * 渐显 banner
- * 注意：定时器保存在 DOM 元素的属性上，是否会内存泄漏呢？
- */
-export default {
-  props: {
-    delay: { default: 3000 }, // 延时
-    fps: { default: 25 }, // 帧速
-  },
-  data(): any {
-    return {
-      active: 0, // 当前索引
-    };
-  },
-  mounted(): void {
-    this.list = this.$el.querySelectorAll("li"); // 各帧
-    this.list[0].style.opacity = "1";
-    this.run();
-  },
-  methods: {
-    /**
-     * 播放动画
-     *
-     * @param this
-     */
-    run(): void {
-      this.timer = window.setInterval(() => {
-        let active: number = this.active;
-        this.clear();
-        active += 1;
-        this.active = active % this.list.length;
-        this.animate(100);
-      }, this.delay);
-    },
-
-    /**
-     * 下一帧
-     *
-     * @param this
-     */
-    per(): void {
-      let active: number = this.active;
-      this.clear();
-      active -= 1;
-      active = active % this.list.length;
-
-      if (active < 0) active = this.list.length - 1;
-
-      this.active = active;
-      this.animate(100);
-    },
-
-    /**
-     * 内容淡出
-     */
-    clear(): void {
-      this.animate(0);
-    },
-
-    /**
-     *
-     * @param params
-     */
-    animate(params: number): void {
-      var el: HTMLLIElement = this.list[this.active],
-        fps: number = 1000 / this.fps;
-      // @ts-ignore
-      window.clearTimeout(el.timer);
-
-      window.setTimeout(function loop() {
-        var i: number = getOpacity(el);
-        let speed: number = (params - i) / 8;
-        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
-        // console.log("i=" + i + "; speed="+ speed+"; s="+s+"; k="+k);
-        i += speed;
-        el.style.opacity = String(i / 100);
-        // @ts-ignore
-        window.clearTimeout(el.timer);
-        // params.complete && params.complete.call(elem);
-        // @ts-ignore
-        el.timer = window.setTimeout(loop, fps);
-      }, fps);
-    },
-  },
-};
-
-/**
- * 获取元素的透明度
- *
- * @param el
- */
-function getOpacity(el: Element): number {
-  let v = Number(getComputedStyle(el)["opacity"]);
-  v *= 100;
-
-  return parseFloat(v + "") || 0;
-}
-</script>
-
-<style lang="less" scoped>
-.aj-opacity-banner {
-  position: relative;
-  min-height: 90px;
-  li {
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    width: 100%;
-  }
-
-  img {
-    // border-top:solid 20px #00416d;
-    width: 100%;
-  }
-}
-</style>

package/src/components/widgets/ProcessLine.vue

@@ -1,133 +0,0 @@
-<template>
-  <div class="aj-process-line">
-    <div class="process-line">
-      <div v-for="(item, index) in items" :key="index" :class="{current: index == current, done: index < current}">
-        <span>{{index + 1}}</span>
-        <p>{{item}}</p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-/**
- * 进度条
- */
-export default {
-  props: {
-    items: {
-      type: Array,
-      default(): string[] {
-        return ["Step 1", "Step 2", "Step 3"];
-      },
-    },
-  },
-  data():any {
-    return {
-      current: 0,
-    };
-  },
-  methods: {
-    /**
-     *
-     * @param i
-     */
-    go(i: number): void {
-      this.current = i;
-    },
-
-    /**
-     *
-     */
-    perv(): void {
-      let perv: number = this.current - 1;
-      if (perv < 0) perv = this.items.length - 1;
-
-      this.go(perv);
-    },
-
-    /**
-     *
-     */
-    next(): void {
-      let next: number = this.current + 1;
-      if (this.items.length == next) next = 0; // 循环
-
-      this.go(next);
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.aj-process-line {
-  display: flex;
-  padding: 5%;
-  justify-content: center;
-
-  .process-line {
-    font-size: 18px;
-    color: lightgray;
-    font-weight: bold;
-
-    & > div {
-      float: left;
-      width: 156px;
-      text-align: center;
-      position: relative;
-
-      &.current {
-        color: black;
-
-        span {
-          background-color: gray;
-        }
-      }
-
-      &.done {
-        //				color: lighten(@mainColor, 80%);
-        span {
-          //					background-color: lighten(@mainColor, 50%);
-        }
-
-        &::after {
-          //					background-color: lighten(@mainColor, 50%);
-        }
-      }
-
-      p {
-        font-size: 1rem;
-        letter-spacing: 3px;
-        padding-top: 5%;
-      }
-
-      span {
-        display: inline-block;
-        width: 32px;
-        height: 32px;
-        border-radius: 50%;
-        color: #fff;
-        line-height: 32px;
-        font-size: 16px;
-        background-color: lightgray;
-        position: relative;
-        z-index: 1;
-      }
-
-      &:last-child::after {
-        display: none;
-      }
-
-      &::after {
-        content: "";
-        position: absolute;
-        top: 14px;
-        left: 94px;
-        width: 124px;
-        height: 4px;
-        background-color: lightgray;
-      }
-    }
-  }
-}
-</style>

package/src/globalDeclare/shims.d.ts

@@ -1,4 +0,0 @@
-declare module '*.vue' {
-    import Vue from 'vue';
-    export default Vue;
-}

package/src/index.ts

@@ -1,8 +0,0 @@
-import HtmlEditor from './components/form/HtmlEditor/HtmlEditor.vue';
-
-/**
- * 暴露各个组件
- */
-export default {
-    HtmlEditor
-};

package/src/main.ts

@@ -1,12 +0,0 @@
-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import '@/style/reset.less';
-import '@/style/common-functions.less';
-
-Vue.config.productionTip = false
-
-new Vue({
-  router,
-  render: h => h(App)
-}).$mount('#app')

package/src/pages/Nav.vue

@@ -1,23 +0,0 @@
-<template>
-  <div style="position: fixed; left: 10px; top:50px">
-    <ul>
-      <li>
-        <a href="#/demo/widget">Widget</a>
-      </li>
-      <li>
-        <a href="#/demo/Article">Article</a>
-      </li>
-      <li>
-        <a href="#/demo/form">Form</a>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<style lang="less" scoped>
-li {
-  list-style-type: disc;
-  text-align: left;
-  margin: 10px 0 0 20px;
-}
-</style>

package/src/pages/common.less

@@ -1,10 +0,0 @@
-p {
-  width: 500px;
-  .aj-text-function();
-  margin: 20px auto;
-  text-indent: 2em;
-}
-h2 {
-  // text-align: left;
-  margin: 20px auto;
-}

package/src/pages/demo/Article.vue

@@ -1,30 +0,0 @@
-<template>
-  <div class="home">
-    <Article title="新股上市首日破发并非坏事 警示投资者打新风险" author="张三" source="http://qq.com" style="max-width:700px;margin:0 auto">
-
-      <p class="one-p">10月22日是科创板新股<span class="linkNormal">中自科技</span>新股上市的日子。按照惯例，新股上市大都会给打新中签的投资者带来一笔无风险的“打新收益”。但对于中自科技的中签者来说，他们期待中的“打新收益”落空了，迎接他们的是新股上市首日破发的命运。打新中签者不仅没有得到“打新收益”，相反还要承担一定的“打新损失”，中自科技上市首日的收盘价较发行价下跌了6.87%。</p>
-      <p class="one-p">新股上市首日破发，这对于打新中签者来说是非常揪心的一件事情。尤其是中自科技开盘即破发，没有给中签者丝毫的逃命机会。当天的最高价是70.50元，低于70.90元的发行价，这意味着打新中签者悉数被套，全部都要为自己“中签”的好运而付出代价。</p>
-      <p class="one-p">那么，中自科技为何会出现上市首日破发现象呢？究其原因主要有两点。一是发行价偏高，高达每股70.90元，其动态市盈率达到百倍。二是今年该公司业绩大幅滑坡。该公司预计，2021年1~9月营业收入为8.6亿元~9.5亿元，同比下滑57.48%至53.03%；预计归母净利润为4500万元~5400万元，同比下滑75.33%至70.40%；预计扣非后归母净利润为3000万元~3900万元，同比下滑84.63%至80.02%。也正因如此，中自科技上市首日破发并不令人意外，这也进一步证实投资者打新之盲目了。</p>
-      <p class="one-p"><img class="content-picture" src="//inews.gtimg.com/newsapp_bt/0/14110170817/1000">
-      </p>
-      <p class="one-p">当然，新股上市首日破发在A股市场还是比较少见的。中自科技是今年以来科创板第一家上市首日破发新股，也是科创板成立以来第二只上市首日破发新股。科创板第一只上市首日破发新股是<span class="linkNormal">建龙微纳</span>，其上市之日是2019年12月4日，距今已有一年零10个月，这也足见新股上市首日破发的现象在A股市场并不常见。</p>
-      <p class="one-p">实际上，对于A股市场来说，新股上市首日破发是一件好事。虽然对于A股市场来说，新股破发现象并不少见，但这种新股破发大多都是新股上市之后经过了一轮甚至是几番的市场炒作之后，然后股价回落破发。这样的新股破发除了提醒投资者注意市场炒作的风险之外，其意义并不大。相反，新股上市首日破发意义更加重大。</p>
-      <p class="one-p">首先，新股上市首日破发它有利于提醒询价机构理性询价，而不能为了得到新股份额一味报高价。因为参与新股询价的机构投资者在询价有效的情况下，也是要参与新股配售的。如果新股定价太高，上市就破发了，这对于询价机构来说当然也是不利的。因为他们参与的新股配售份额也会因为破发而出现浮亏。</p>
-      <p class="one-p">其次，新股上市首日破发也有利于向投资者提醒打新的风险。因为A股市场长期以来的新股不败现象，结果导致投资者在打新时逢新必打，根本就不关心新股的基本面，同时也不关心新股的发行价格，甚至将高价发行的新股视为“肉签”股。虽然在过去也经常出现新股破发现象，但新股经过一番炒作之后的破发，并没有危及到打新者的利益，并不会让打新者增加风险意识。而只有新股上市首日破发，才会直接损害到打新者的利益，只有在这种情况下，打新者才会真正意识到打新的风险，从而让打新者关心到新股的基本面，学会理性打新。当然，要达到这个目的，还需要新股上市首日破发现象进一步增加，呈现出一种常态化，这样更有利于投资者理性打新。</p>
-      <p class="one-p">此外，新股上市首日破发也有利于向市场警示炒新的风险。在新股不败的市场环境下，投资者除了盲目打新之外，还会盲目炒新，以至一只新股上市后，通常都会炒出几个、十几个甚至几十个涨停板出来。因此，一只新股上市，往往都会受到市场的投机炒作。而新股上市首日破发，对于炒新者是一个打击。因为炒新者盲目追进新股之后发现，股价不仅没有炒上去，相反股价在进一步下跌，炒新变成了套牢。因此，新股上市首日破发对于炒新者来说也是一种风险警示。</p>
-
-    </Article>
-    <Nav />
-  </div>
-</template>
-
-<script>
-import Article from "@/components/widgets/Article.vue";
-import Nav from "../Nav.vue";
-
-export default {
-  components: {
-    Article, Nav
-  },
-};
-</script>