# ha-comment

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).







### discription
```
//版本1.3.4为增加更多表情选择。后续更新会根据实际业务需要做迭代；


npm install ha-comment@1.3.7

import HaComment from 'ha-comment';

Vue.use(HaComment)

//组件配置说明：
         :total="total"//总条数
        :img="img" //发表评论的头像
        :list="treeList" //数据
        :love="true"   //点赞功能
        :isonlysecond="true"  //是否开启，true二级树展示，和当前抖音，知乎展示一样。 false为多级树展示。数据结构会有所改变
        user="陈雨"   //当前用户
        @operate="handleOperate"   //操作后调用接口处理逻辑
```



<template>
    <div>
        <HaComment
            :total="total"
            :img="img" 
            :list="treeList" 
            :love="true"
            :isonlysecond="true"
            user="陈雨"
            @operate="handleOperate"
        />
    </div>
</template>
<script>
    //此组件为评论组件！   以下为模拟数据，及回调方法处理逻辑，可直接回调中接口请求加载！！！！！！
    const _ = require('lodash')
    export default {
        data () {
            return {
                message: '',
                img: require('@/assets/img/icon/avtar.png'),
                treeList: [
                    {
                        userName: '豆吻国',
                        imgUrl: require('@/img/avtar.png'),
                        message: '很好，很good very，你信吗',
                        placeholder: '回复豆吻国',
                        inputContent: '',
                        id: '89uifuids_6767',
                        pid: -1,
                        hour: '1小时前',
                        likeList: [ '陈雨', '陈冲冲', '曾程' ],
                        children: []
                    },
                  
                ],
                pparentid:''          
            };
        },
            computed:{
                total(){
                
                    const total= this.handleTotal(this.treeList);
                    return  total
                }
            },
       
          methods: {
              /* pdf,word组件渲染完毕 */
            rendered() {
                // this.loading = false;
              },
              /* pdf,word组件渲染出错 */
            HandlError() {
              
                // this.loading = false;
              },
            uuidv4() {
                let d = new Date().getTime(); //Timestamp
                let d2 = (performance && performance.now && (performance.now()*1000)) || 0; 
                return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                    var r = Math.random() * 16; //random number between 0 and 16
                    if(d > 0) { //Use timestamp until depleted
                        r = (d + r)%16 | 0;
                        d = Math.floor(d/16);
                    } else { //Use microseconds since page-load if supported
                        r = (d2 + r)%16 | 0;
                        d2 = Math.floor(d2/16);
                    }
                    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
                });
            },
            handleTotal(tlist){
              const arr1=[]
                if (tlist && Array.isArray(tlist)) {
                    const forFn = (arr) => {
                        for (let i = 0; i < arr.length; i++) {
                            const item = arr[i];
                            arr1.push(item)
                            if (item && Array.isArray(item.children)) {
                                forFn(item.children);
                            }
                        }
                    };
                    forFn(tlist);
                }
                return arr1.length
            },
            handRefreshList (tlist) {
                if (tlist && Array.isArray(tlist)) {
                    const forFn = (arr) => {
                        for (let i = 0; i < arr.length; i++) {
                            const item = arr[i];
                            item.inputContent = '';
                            item.commentItemVisible = false;
                            item.Recall = false;
                            if (item && Array.isArray(item.children)) {
                                forFn(item.children);
                            }
                        }
                    };
                    forFn(tlist);
                }
                return tlist
            },
            handleTreeFind (tlist, id) {
                if (tlist && Array.isArray(tlist)) {
                    const forFn = (arr) => {
                        for (let i = 0; i < arr.length; i++) {
                            const item = arr[i];
                            if (item.id == id) {
                                if (item.count && Array.isArray(item.children) && item.children.length == 0) {
                                    item.count = 0
                                }
                            }
                            if (item && Array.isArray(item.children)) {
                                forFn(item.children);
                            }
                        }
                    };
                    forFn(tlist);
                }
                return tlist
            },
            handleDeleteTreeList (tlist, id) { // 删除评论，数据重组
                if (tlist && Array.isArray(tlist)) {
                    const forFn = (arr) => {
                        for (let i = 0; i < arr.length; i++) {
                            const item = arr[i];

                            if (item.id == id) {
                                arr.splice(i--, 1)

                                if (arr.length > 0) {
                                    arr[arr.length - 1].showMuch = false;
                                }
                                return false;
                            }
                            if (item && Array.isArray(item.children)) {
                                forFn(item.children);
                            }
                        }
                    };
                    forFn(tlist);
                }
                return tlist
            },
            handleInsertTreeList (tlist, id, childs) { // 插入数据
                if (tlist && Array.isArray(tlist)) {
                    const forFn = (arr) => {
                        for (let i = 0; i < arr.length; i++) {
                            const item = arr[i];

                            if (item.id == id) {
                                item.children.push(...childs)

                                return false;
                            }
                            if (item && Array.isArray(item.children)) {
                                forFn(item.children);
                            }
                        }
                    };
                    forFn(tlist);
                }
                return tlist
            },
            handleInsertMiddle(list,item,Index){
                list.splice(Index+1, 0, item);
                return this.treeList
            },
            handleHasOnlysecond(item){//二级树展示
              if (!item.isHead && item.type == 'add') { // 新增子级评论
                        if(item.pid==-1){
                          this.pparentid=item.id;
                        }else{
                          this.pparentid= item.pparentid
                        }

                        const uuid = this.uuidv4()
                        const o = {
                            userName: '曾程',
                            imgUrl: require('@/img/avtar.png'),
                            message: item.inputContent,
                            placeholder: '回复曾程',
                            parentName: item.userName,
                            inputContent: '',
                            id: 'sive' + uuid,
                            pid: item.id,
                            hour: '2小时前',
                            pparentid:this.pparentid,
                            children: [],
                            likeList: [],
                            count: 1
                        }
                   
                        
                        if (item.pid==-1&& Array.isArray(item.children)) {
                            item.children.unshift(o)
                        }else if(item.pid!=-1){
                          const Index=  this.treeList.findIndex(val=>val.id==this.pparentid);
                          if(this.treeList[Index]&&Array.isArray(this.treeList[Index].children)){
                            if(this.treeList[Index].children.length==0){
                              this.treeList[Index].children.push(o);
                              this.treeList=_.cloneDeep(this.treeList);
                            }else{
                              const cout=this.treeList[Index].children.findIndex(val=>val.id==item.id)
                              this.treeList=this.handleInsertMiddle(this.treeList[Index].children,o,cout);//插入数据

                            }
                          } 
                        }

                         this.$check.flag = true;// 接口加载时候使用设为true即可
                }


                if (item.type == 'much') { // 加载更多

                  const uuid = this.uuidv4()
                    const inputObj = {
                        userName: '陈雨',
                        imgUrl: require('@/img/avtar.png'),
                        message: 'fsdjfksdlfjs',
                        inputContent: '',
                        placeholder: '回复陈雨',
                        parentName: item.pid != -1 ? item.parentName : '',
                        id: uuid,
                        pid: item.pid,
                        pparentid:item.pparentid,
                        hour: '1分钟前',
                        children: [],
                        likeList: []
                    }

                  if (item.pid == -1) {
                          this.treeList.push(inputObj);
                      }else if(item.pid!=-1){
                          const Index=  this.treeList.findIndex(val=>val.id==item.pparentid);
                          if(this.treeList[Index]&&Array.isArray(this.treeList[Index].children)){
                              this.treeList[Index].children.push(inputObj);
                              this.treeList=_.cloneDeep(this.treeList);
                            
                          } 
                    }   
                }

                if (item.type == 'display') { // 展开收起
                    const uuid = this.uuidv4()
                    if(item.pid==-1){
                      this.pparentid=item.id;
                    }
                    const o = {
                        userName: '曾程',
                        imgUrl: require('@/img/avtar.png'),
                        message: '我很相信你，你是真的good very',
                        parentName: item.userName,
                        placeholder: '回复曾程',
                        inputContent: '',
                        pparentid:this.pparentid,
                        id: uuid,
                        pid: item.id,
                        hour: '2小时前',
                        children: [],
                        likeList: [],
                        count: 1
                    }


                    if (item.pid==-1&& Array.isArray(item.children)&&item.children.length==0) {
                        item.children.unshift(o)
                    }

                    if (item.display) { // 模拟
                        this.$check.flag = true;// 接口加载时候使用设为true即可
                    } else {
                        this.$check.flag = true;// 接口加载时候使用设为true即可
                    }

               }  
            },
            handleNoOnlysecond(item){//非二级树展示
              if (!item.isHead && item.type == 'add') { // 新增子级评论
                    //不开启二级树加载时候
                        console.log('子级评论')
                        const uuid = this.uuidv4()
                        const inputObj = {
                            userName: '陈雨',
                            imgUrl: require('@/img/avtar.png'),
                            message: item.inputContent,
                            parentName: item.userName,
                            inputContent: '',
                            placeholder: '回复陈雨',
                            id: uuid,
                            pid: item.id,
                            hour: '1分钟前',
                            children: [],
                            likeList: []
                        }
                        const o = {
                            userName: '曾程',
                            imgUrl: require('@/img/avtar.png'),
                            message: '我很相信你，你是真的good very',
                            placeholder: '回复曾程',
                            parentName: item.userName,
                            inputContent: '',
                            id: 'sive' + uuid,
                            pid: item.id,
                            hour: '2小时前',
                            children: [],
                            likeList: [],
                            count: 1
                        }
                        // 存在count>0  ,children==0 时候加载数据

                        if (item.count && (Array.isArray(item.children) && item.children.length == 0)) { // 表示之前有一条数据
                            item.children.push(o)
                        }

                        if (Array.isArray(item.children)) {
                            item.children.unshift(inputObj)
                        }

                         this.$check.flag = true;// 接口加载时候使用设为true即可
                }
              if (item.type == 'much') { // 加载更多

                const uuid = this.uuidv4()
                    const inputObj = {
                        userName: '陈雨',
                        imgUrl: require('@/img/avtar.png'),
                        message: 'fsdjfksdlfjs',
                        inputContent: '',
                        placeholder: '回复陈雨',
                        parentName: item.pid != -1 ? item.parentName : '',
                        id: uuid,
                        pid: item.pid,
                        pparentid:item.pparentid,
                        hour: '1分钟前',
                        children: [],
                        likeList: []
                    }

                if (item.pid == -1) {
                    this.treeList.push(inputObj);
                } else {
                    // 为children寻找同级
                    this.handleInsertTreeList(this.treeList, item.pid, [
                        inputObj
                    ])
                }     
              }
              if (item.type == 'display') { // 展开收起
                const uuid = this.uuidv4()
                    if(item.pid==-1){
                      this.pparentid=item.id;
                    }
                    const o = {
                        userName: '曾程',
                        imgUrl: require('@/img/avtar.png'),
                        message: '我很相信你，你是真的good very',
                        parentName: item.userName,
                        placeholder: '回复曾程',
                        inputContent: '',
                        pparentid:this.pparentid,
                        id: uuid,
                        pid: item.id,
                        hour: '2小时前',
                        children: [],
                        likeList: [],
                        count: 1
                    }
                    // 存在count>0  ,children==0 时候加载数据
                    if (item.count && (Array.isArray(item.children) && item.children.length == 0)) {
                         item.children.push(o)
                    }

                    if (item.display) { // 模拟
                        this.$check.flag = true;// 接口加载时候使用设为true即可
                    } else {
                        this.$check.flag = true;// 接口加载时候使用设为true即可
                    }
              }
            },
            handleOperate (item) {
                this.$check.flag = false;// 接口加载时候使用设为true即可
                if (item.isHead && item.type == 'add') { // 首级发表评论
                    console.log('首级发表评论')
                    const uuid = this.uuidv4()
                    const inputObj = {
                        userName: '陈雨',
                        imgUrl: require('@/img/avtar.png'),
                        message: item.message,
                        inputContent: '',
                        placeholder: '回复陈雨',
                        id: uuid,
                        pid: item.pid,
                        hour: '1分钟前',
                        children: [],
                        likeList: []
                    }

                    this.treeList.unshift(inputObj);
                    this.$check.flag = true;// 接口加载时候使用设为true即可
                }
                if (!item.isHead && item.type == 'add') { // 新增子级评论
                    if(this.$check.isonlysecond){//如果开启只能为二级树
                       this.handleHasOnlysecond(item)
                      }else{//不开启二级树加载时候
                       this.handleNoOnlysecond(item)
                   }
                }

                if (item.type == 'refresh') { // 刷新评论
                  this.treeList= this.handRefreshList(this.treeList);
                    this.$check.flag = true;

                    console.log('刷新评论')
                }
                if (item.type == 'delete') { // 删评论
                    const pid = item.pid;
                    this.handleDeleteTreeList(this.treeList, item.id);
                    this.handleTreeFind(this.treeList, pid);

                    this.$check.flag = true;// 接口加载时候使用设为true即可
                }
                if (item.type == 'much') { // 加载更多
                    if(!this.$check.isonlysecond){//存在多级加载
                      this.handleNoOnlysecond(item)
                    }else{//只存在二级
                       this.handleHasOnlysecond(item)
                    }

                    this.$check.flag = true;// 接口加载时候使用设为true即可
                }
                if (item.type == 'display') { // 展开收起
               
                    if(!this.$check.isonlysecond) {//可以多级
                      this.handleNoOnlysecond(item)
                    }else{//只存在二级
                     this.handleHasOnlysecond(item)
                    }
                 
                
                    console.log(item.display + 'display')
                }

                if (item.type == 'like') { // 点赞操作
                    this.$check.flag = true;// 接口加载时候使用设为true即可
                }
            }
        }
    };
</script>



Supply Chain Attack on Axios Pulls Malicious Dependency from npm

ha-comment

An ambiguous license classifier was found.

What is an ambiguous license classifier?

Ambiguous License Classifier

Source files are encoded using a non-standard text encoding.

What is bad text encoding?

Bad text encoding

Package version is not a valid semantic version (semver).

What is bad semver?

Bad semver

Package has dependencies with an invalid semantic version. This could be a sign of beta, low quality, or unmaintained dependencies.

What is bad dependency semver?

Bad dependency semver

Source files contain bidirectional unicode control characters. This could indicate a Trojan source supply chain attack. See: trojansource.codes for more information.

What are bidirectional unicode control characters?

Bidirectional unicode control characters

This package has multiple bin scripts with the same name. This can cause non-deterministic behavior when installing or could be a sign of a supply chain attack.

What is bin script confusion?

Bin script confusion

This Chrome extension includes content scripts that execute JavaScript on specified websites.

What are Chrome extension content scripts?

Chrome: Content Script

This Chrome extension requests host permissions to access specific websites or domains.

What are Chrome extension host permissions?

Chrome: Host Permission

This Chrome extension requests permissions to access browser APIs, user data, or system features.

What are Chrome extension permissions?

Chrome: Permission

This Chrome extension requests wildcard host permissions that grant broad access to websites.

What are Chrome extension wildcard host permissions?

Chrome: Wildcard Host Permission

Semantic versions published out of chronological order.

What is a chronological version anomaly?

Chronological version anomaly

Project maintainer's SSH key has been compromised.

What is a compromised SSH key?

Compromised SSH key

What do I need to know about license files?

Copyleft License

Contains a Critical Common Vulnerability and Exposure (CVE).

What is a critical CVE?

Title

Critical CVE

Contains a high severity Common Vulnerability and Exposure (CVE).

What is a CVE?

High CVE

Uses debug, reflection and dynamic code execution features.

What is debug access?

Debug access

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

What is a deprecated package?

Deprecated

Contains a known deprecated SPDX license exception.

What is a deprecated SPDX exception?

Deprecated SPDX exception

License is deprecated which may have legal implications regarding the package's use.

What is a deprecated license?

Deprecated license

Package name is similar to other popular packages and may not be the package you want.

What is a typosquat?

Possible typosquat attack

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

What is dynamic require?

Dynamic require

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

What is an empty package?

Empty package

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

What is environment variable access?

Environment variable access

Something was found which is explicitly marked as unlicensed.

Explicitly Unlicensed Item

Package optionally loads a dependency which is not specified within any of the package.json dependency fields. It may inadvertently be importing dependencies specified by other packages.

What are extraneous dependencies?

Name

Extraneous dependency

Contains a dependency which resolves to a file. This can obfuscate analysis and serves no useful purpose.

What are file dependencies?

File dependency

Accesses the file system, and could potentially read sensitive data.

What is filesystem access?

Filesystem access

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

What are wildcard dependencies?

Wildcard dependency

Generic ad-hoc alert, uploaded by user or produced by system diagnostics

Alert title

Generic alert

An input argument to this GitHub Action is being exported as an environment variable. If a user of this action passes untrusted input, it could be used in an insecure manner by subsequent workflow steps.

What are GitHub Actions taint flows?

GitHub Actions: Input argument exported as environment variable

An input argument to this GitHub Action is being passed back as an output. If a user of this action passes untrusted input, it could be used in an insecure manner by consuming workflows.

GitHub Actions: Input argument passed back as output

An input argument to this GitHub Action flows into a dangerous sink (such as shell command execution). This could allow a malicious user to inject commands or exploit the action.

GitHub Actions: Input argument flows to dangerous sink

A GitHub context variable (such as issue title, PR description, or comment body) is being exported as an environment variable. These context values are user-controlled and could be exploited by subsequent workflow steps.

GitHub Actions: GitHub context variable exported as environment variable

A GitHub context variable (such as issue title, PR description, or comment body) is being passed back as an output. These context values are user-controlled and could be exploited by consuming workflows.

GitHub Actions: GitHub context variable passed back as output

A GitHub context variable (such as issue title, PR description, or comment body) flows into a dangerous sink (such as shell command execution). This is a critical security issue that could allow command injection or code execution attacks.

GitHub Actions: GitHub context variable flows to dangerous sink

An environment variable flows into a dangerous sink (such as shell command execution). If this environment variable comes from an untrusted source, it could be exploited to inject commands.

GitHub Actions: Environment variable flows to dangerous sink

Contains a dependency which resolves to a remote git URL. Dependencies fetched from git URLs are not immutable and can be used to inject untrusted code or reduce the likelihood of a reproducible install.

What are git dependencies?

Git dependency

Contains a dependency which resolves to a GitHub URL. Dependencies fetched from GitHub specifiers are not immutable can be used to inject untrusted code or reduce the likelihood of a reproducible install.

What are GitHub dependencies?

GitHub dependency

AI has identified unusual behaviors that may pose a security risk.

What is an AI-detected potential code anomaly?

AI-detected potential code anomaly

AI has identified this package as a potential typosquat of a more popular package. This suggests that the package may be intentionally mimicking another package's name, description, or other metadata.

What is AI-detected potential typosquatting?

AI-detected possible typosquat

AI has identified this package as malware. This is a strong signal that the package may be malicious.

What is AI-detected potential malware?

AI-detected potential malware

AI has determined that this package may contain potential security issues or vulnerabilities.

What are AI-detected potential security risks?

AI-detected potential security risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Why is native code a concern?

Native code

Contains high entropy strings. This could be a sign of encrypted data, leaked secrets or obfuscated code.

What are high entropy strings?

High entropy strings

Contains unicode homoglyphs which can be used in supply chain confusion attacks.

What are unicode homoglyphs?

Unicode homoglyphs

Contains a dependency which resolves to a remote HTTP URL which could be used to inject untrusted code and reduce overall package reliability.

What are http dependencies?

HTTP dependency

Install scripts are run when the package is installed or built. Malicious packages often use scripts that run automatically to execute payloads or fetch additional code.

What is an install script?

Install scripts

Package has an invalid manifest file and can cause installation problems if you try to use it.

What is an invalid manifest file?

Invalid manifest file

Source files contain invisible characters. This could indicate source obfuscation or a supply chain attack.

What are invisible characters?

Invisible chars

What is a license change?

License change

What is a license exception?

License exception

This package is not allowed per your license policy. Review the package's license to ensure compliance.

What is a license policy violation?

License Policy Violation

Contains long string literals, which may be a sign of obfuscated or packed code.

What's wrong with long strings?

Long strings

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

What is a major refactor?

Major refactor

This package version is identified as malware. It has been flagged either by Socket's AI scanner and confirmed by our threat research team, or is listed as malicious in security databases and other sources.

What is known malware?

Known malware

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

What is manifest confusion?

Manifest confusion

Contains a medium severity Common Vulnerability and Exposure (CVE).

What is a medium CVE?

Medium CVE

Contains a low severity Common Vulnerability and Exposure (CVE).

What is a mild CVE?

Low CVE

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

What's wrong with minified code?

Minified code

A package's licensing information has fine-grained problems.

Misc. License Issues

The package was published by an npm account that no longer exists.

What is a non-existent author?

Non-existent author

A required dependency is not declared in package.json and may prevent the package from working.

What is a missing dependency?

Missing dependency

Package does not have a license and consumption legal status is unknown.

What is a missing license?

Missing license

This package is missing its tarball. It could be removed from the npm registry or there may have been an error when publishing.

What is a missing tarball?

Missing package tarball

What is a mixed license?

Mixed license

Package contains a modified version of an SPDX license exception. Please read carefully before using this code.

What is a modified license exception?

Modified license exception

Package contains a modified version of an SPDX license. Please read carefully before using this code.

What is a modified license?

Modified license

What is network access?

Network access

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

ha-comment

ha-comment

Project setup

Compiles and hot-reloads for development

Compiles and minifies for production

Lints and fixes files

Customize configuration

discription

Related posts

Axios Maintainer Confirms Social Engineering Attack Behind npm Compromise

Node.js Drops Bug Bounty Rewards After Funding Dries Up