From 697ae4e03267e3c9d5657ca4b7e6d01b47b352e7 Mon Sep 17 00:00:00 2001
From: wuyiping0628 <1106773985@qq.com>
Date: Tue, 3 Dec 2024 00:16:28 -0800
Subject: [PATCH 1/3] feat(bulletin-board): [bulletin-board] Add click events

---
 examples/sites/demos/apis/bulletin-board.js   |  35 +++++-
 .../bulletin-board/events-composition-api.vue |  95 ++++++++++++++++
 .../pc/app/bulletin-board/events.spec.ts      |  11 ++
 .../demos/pc/app/bulletin-board/events.vue    | 105 ++++++++++++++++++
 .../bulletin-board/webdoc/bulletin-board.js   |  12 ++
 .../renderless/src/bulletin-board/index.ts    |   6 +
 packages/renderless/src/bulletin-board/vue.ts |   9 +-
 packages/theme/src/bulletin-board/index.less  |   1 +
 packages/vue/src/bulletin-board/src/pc.vue    |   3 +-
 9 files changed, 268 insertions(+), 9 deletions(-)
 create mode 100644 examples/sites/demos/pc/app/bulletin-board/events-composition-api.vue
 create mode 100644 examples/sites/demos/pc/app/bulletin-board/events.spec.ts
 create mode 100644 examples/sites/demos/pc/app/bulletin-board/events.vue

diff --git a/examples/sites/demos/apis/bulletin-board.js b/examples/sites/demos/apis/bulletin-board.js
index 45d3f5ab86..73230c9bfa 100644
--- a/examples/sites/demos/apis/bulletin-board.js
+++ b/examples/sites/demos/apis/bulletin-board.js
@@ -18,11 +18,12 @@ export default {
         },
         {
           name: 'data',
-          type: 'Array',
+          typeAnchorName: 'BulletinBoardData',
+          type: 'BulletinBoardData[]',
           defaultValue: '',
           desc: {
-            'zh-CN': 'tab-item 数据;tab-item 数据',
-            'en-US': 'tab-item data; tab-item data'
+            'zh-CN': 'tab-item 数据;',
+            'en-US': 'tab-item data;'
           },
           mode: ['pc'],
           pcDemo: 'base'
@@ -87,9 +88,35 @@ export default {
           pcDemo: 'title'
         }
       ],
-      events: [],
+      events: [
+        {
+          name: 'click',
+          type: '(event: BulletinBoardData) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '当公告牌内容被点击时触发的回调函数',
+            'en-US': 'The callback function triggered when the content of the bulletin board is clicked'
+          },
+          mode: ['pc'],
+          pcDemo: 'events'
+        }
+      ],
       methods: [],
       slots: []
     }
+  ],
+  types: [
+    {
+      name: 'BulletinBoardData',
+      type: 'interface',
+      code: `
+            interface BulletinBoardData {
+              text: string // 显示文本
+              date: string // 日期
+              url: string // 需要跳转的地址
+              target: string // <a> 标签的一个属性，该属性指定在何处显示链接的资源
+              }
+            `
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/bulletin-board/events-composition-api.vue b/examples/sites/demos/pc/app/bulletin-board/events-composition-api.vue
new file mode 100644
index 0000000000..fcccb1f662
--- /dev/null
+++ b/examples/sites/demos/pc/app/bulletin-board/events-composition-api.vue
@@ -0,0 +1,95 @@
+<template>
+  <tiny-bulletin-board :tab-title="tabTitle" :data="data" @handleClick="handleClick"></tiny-bulletin-board>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinyBulletinBoard, TinyModal } from '@opentiny/vue'
+
+const tabTitle = ref(['TINY 更新日志', '他们都在用', 'TINY 特性'])
+const data = ref([
+  [
+    {
+      text: 'TINY v2.1.4 版本',
+      date: '2019-07-31',
+      url: 'localhost:3000/#/webcore/zh-CN/guide/changelog'
+    },
+    {
+      text: 'TINY v2.1.3 版本',
+      date: '2019-06-11',
+      url: 'localhost:3000/#/webcore/zh-CN/guide/changelog'
+    },
+    {
+      text: 'TINY v2.1.2 版本',
+      date: '2019-05-11',
+      url: 'localhost:3000/#/webcore/zh-CN/guide/changelog',
+      target: '_blank'
+    }
+  ],
+  [
+    {
+      text: 'SRM 采购云',
+      date: '2018-09-11',
+      url: 'http://abcdf.com',
+      target: '_blank'
+    },
+    {
+      text: 'iSales',
+      url: 'http://abcdf.com',
+      date: '2018-09-11',
+      route: 'Alert'
+    },
+    {
+      text: '数易平台',
+      url: 'http://abcdf.com',
+      date: '2018-09-11'
+    },
+    {
+      text: 'MES+ 制造平台',
+      date: '2018-09-11',
+      url: 'http://abcdf.com',
+      target: '_blank'
+    },
+    {
+      text: 'ISDP',
+      date: '2018-09-11',
+      url: 'http://abcdf.com',
+      route: 'Alert'
+    },
+    {
+      text: '财经智慧助手',
+      url: 'http://abcdf.com',
+      date: '2018-09-11'
+    }
+  ],
+  [
+    {
+      text: '秒级系统体验，按需打包；一致 UX 体验规范',
+      date: '2018-09-11',
+      url: '',
+      target: '_blank'
+    },
+    {
+      text: '内置公共 API 并支持扩展；组件、主题均可扩展',
+      date: '2018-09-11',
+      url: ''
+    },
+    {
+      text: '丰富教程案例、FAQ、开源组件快速引入',
+      date: '2018-09-11',
+      url: ''
+    },
+    {
+      text: '内置 80+ web 组件拿来即用；内置 mock, UI 组件库与后端服务自由组合',
+      url: '',
+      date: '2018-09-11'
+    }
+  ]
+])
+function handleClick(item) {
+  TinyModal.message({
+    message: 'click 事件：内容为' + item.text,
+    status: 'info'
+  })
+}
+</script>
diff --git a/examples/sites/demos/pc/app/bulletin-board/events.spec.ts b/examples/sites/demos/pc/app/bulletin-board/events.spec.ts
new file mode 100644
index 0000000000..53a3c6e41e
--- /dev/null
+++ b/examples/sites/demos/pc/app/bulletin-board/events.spec.ts
@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('测试点击事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('bulletin-board#events')
+  const demo = page.locator('#events')
+  const modal = page.locator('.tiny-modal')
+
+  await demo.getByRole('link', { name: 'TINY v2.1.3 版本' }).click()
+  await expect(modal.getByText('click 事件：内容为TINY v2.1.3 版本')).toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/bulletin-board/events.vue b/examples/sites/demos/pc/app/bulletin-board/events.vue
new file mode 100644
index 0000000000..09a8838e75
--- /dev/null
+++ b/examples/sites/demos/pc/app/bulletin-board/events.vue
@@ -0,0 +1,105 @@
+<template>
+  <tiny-bulletin-board :tab-title="tabTitle" :data="data" @handleClick="handleClick"></tiny-bulletin-board>
+</template>
+
+<script>
+import { TinyBulletinBoard, TinyModal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBulletinBoard
+  },
+  data() {
+    return {
+      tabTitle: ['TINY 更新日志', '他们都在用', 'TINY 特性'],
+      data: [
+        [
+          {
+            text: 'TINY v2.1.4 版本',
+            date: '2019-07-31',
+            url: 'localhost:3000/#/webcore/zh-CN/guide/changelog'
+          },
+          {
+            text: 'TINY v2.1.3 版本',
+            date: '2019-06-11',
+            url: 'localhost:3000/#/webcore/zh-CN/guide/changelog'
+          },
+          {
+            text: 'TINY v2.1.2 版本',
+            date: '2019-05-11',
+            url: 'localhost:3000/#/webcore/zh-CN/guide/changelog',
+            target: '_blank'
+          }
+        ],
+        [
+          {
+            text: 'SRM 采购云',
+            date: '2018-09-11',
+            url: 'http://abcdf.com',
+            target: '_blank'
+          },
+          {
+            text: 'iSales',
+            url: 'http://abcdf.com',
+            date: '2018-09-11',
+            route: 'Alert'
+          },
+          {
+            text: '数易平台',
+            url: 'http://abcdf.com',
+            date: '2018-09-11'
+          },
+          {
+            text: 'MES+ 制造平台',
+            date: '2018-09-11',
+            url: 'http://abcdf.com',
+            target: '_blank'
+          },
+          {
+            text: 'ISDP',
+            date: '2018-09-11',
+            url: 'http://abcdf.com',
+            route: 'Alert'
+          },
+          {
+            text: '财经智慧助手',
+            url: 'http://abcdf.com',
+            date: '2018-09-11'
+          }
+        ],
+        [
+          {
+            text: '秒级系统体验，按需打包；一致 UX 体验规范',
+            date: '2018-09-11',
+            url: '',
+            target: '_blank'
+          },
+          {
+            text: '内置公共 API 并支持扩展；组件、主题均可扩展',
+            date: '2018-09-11',
+            url: ''
+          },
+          {
+            text: '丰富教程案例、FAQ、开源组件快速引入',
+            date: '2018-09-11',
+            url: ''
+          },
+          {
+            text: '内置 80+ web 组件拿来即用；内置 mock, UI 组件库与后端服务自由组合',
+            url: '',
+            date: '2018-09-11'
+          }
+        ]
+      ]
+    }
+  },
+  methods: {
+    handleClick(item) {
+      TinyModal.message({
+        message: 'click 事件：内容为' + item.text,
+        status: 'info'
+      })
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/bulletin-board/webdoc/bulletin-board.js b/examples/sites/demos/pc/app/bulletin-board/webdoc/bulletin-board.js
index cd4475d93e..dc595caa98 100644
--- a/examples/sites/demos/pc/app/bulletin-board/webdoc/bulletin-board.js
+++ b/examples/sites/demos/pc/app/bulletin-board/webdoc/bulletin-board.js
@@ -104,6 +104,18 @@ export default {
         'en-US': '<p>You can use <code>icon</code> to customize the new bulletin prefix icon. </p>\n'
       },
       codeFiles: ['icon.vue']
+    },
+    {
+      demoId: 'events',
+      name: {
+        'zh-CN': 'click事件',
+        'en-US': 'Fold panel click event'
+      },
+      desc: {
+        'zh-CN': '<p>当点击后会触发触发 <code>click</code> 事件。</p>',
+        'en-US': '<p>When clicked, it will trigger<code>click</code>. </p>'
+      },
+      codeFiles: ['events.vue']
     }
   ]
 }
diff --git a/packages/renderless/src/bulletin-board/index.ts b/packages/renderless/src/bulletin-board/index.ts
index 0e20f133b9..18c789f04d 100644
--- a/packages/renderless/src/bulletin-board/index.ts
+++ b/packages/renderless/src/bulletin-board/index.ts
@@ -34,3 +34,9 @@ export const computedMoreLink =
     }
     return props.moreLink
   }
+
+export const handleBulletinBoardClick =
+  ({ emit }) =>
+  (item) => {
+    emit('handleClick', item)
+  }
diff --git a/packages/renderless/src/bulletin-board/vue.ts b/packages/renderless/src/bulletin-board/vue.ts
index f95032afbb..4581d395da 100644
--- a/packages/renderless/src/bulletin-board/vue.ts
+++ b/packages/renderless/src/bulletin-board/vue.ts
@@ -10,11 +10,11 @@
  *
  */
 
-import { getRoute, computedDataList, computedMoreLink } from './index'
+import { getRoute, computedDataList, computedMoreLink, handleBulletinBoardClick } from './index'
 
-export const api = ['state', 'getRoute']
+export const api = ['state', 'getRoute', 'handleBulletinBoardClick']
 
-export const renderless = (props, { reactive, computed, watch }) => {
+export const renderless = (props, { reactive, computed, watch }, { emit }) => {
   const api = {}
   const state = reactive({
     actName: props.activeName,
@@ -34,7 +34,8 @@ export const renderless = (props, { reactive, computed, watch }) => {
     state,
     getRoute,
     computedDataList: computedDataList({ props, state }),
-    computedMoreLink: computedMoreLink({ props })
+    computedMoreLink: computedMoreLink({ props }),
+    handleBulletinBoardClick: handleBulletinBoardClick({ emit })
   })
 
   return api
diff --git a/packages/theme/src/bulletin-board/index.less b/packages/theme/src/bulletin-board/index.less
index 1543487d23..708252a209 100644
--- a/packages/theme/src/bulletin-board/index.less
+++ b/packages/theme/src/bulletin-board/index.less
@@ -31,6 +31,7 @@
       white-space: normal;
       line-height: initial;
       font-weight: var(--tv-BulletinBoard-item-title-font-weight);
+      cursor: pointer;
 
       &,
       &:hover {
diff --git a/packages/vue/src/bulletin-board/src/pc.vue b/packages/vue/src/bulletin-board/src/pc.vue
index 7bb38f86d1..22831a7fd0 100644
--- a/packages/vue/src/bulletin-board/src/pc.vue
+++ b/packages/vue/src/bulletin-board/src/pc.vue
@@ -25,13 +25,14 @@
               :target="subItem.target"
               class="tiny-bulletin-board__textTitle"
               rel="noopener noreferrer"
+              @click.native="handleBulletinBoardClick(subItem)"
             >
               {{ subItem.text }}
               <span v-if="subIndex === 0" class="tiny-bulletin-board__new">
                 <component :is="icon" class="tiny-svg-size" />{{ icon ? '' : 'NEW' }}
               </span>
             </a>
-            <span v-else class="tiny-bulletin-board__textTitle">
+            <span v-else class="tiny-bulletin-board__textTitle" @click.native="handleBulletinBoardClick(subItem)">
               {{ subItem.text }}
               <span v-if="subIndex === 0" class="tiny-bulletin-board__new">
                 <component :is="icon" class="tiny-svg-size" />{{ icon ? '' : 'NEW' }}

From acf119190aea62b4102159b0fc39fc814bce15c8 Mon Sep 17 00:00:00 2001
From: wuyiping0628 <1106773985@qq.com>
Date: Tue, 3 Dec 2024 00:31:50 -0800
Subject: [PATCH 2/3] feat(bulletin-board): [bulletin-board] Add click events

---
 examples/sites/demos/apis/bulletin-board.js | 2 +-
 packages/vue/src/bulletin-board/src/pc.vue  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/sites/demos/apis/bulletin-board.js b/examples/sites/demos/apis/bulletin-board.js
index 73230c9bfa..173b0da42b 100644
--- a/examples/sites/demos/apis/bulletin-board.js
+++ b/examples/sites/demos/apis/bulletin-board.js
@@ -90,7 +90,7 @@ export default {
       ],
       events: [
         {
-          name: 'click',
+          name: 'handleClick',
           type: '(event: BulletinBoardData) => void',
           defaultValue: '',
           desc: {
diff --git a/packages/vue/src/bulletin-board/src/pc.vue b/packages/vue/src/bulletin-board/src/pc.vue
index 22831a7fd0..5ad11f2581 100644
--- a/packages/vue/src/bulletin-board/src/pc.vue
+++ b/packages/vue/src/bulletin-board/src/pc.vue
@@ -25,14 +25,14 @@
               :target="subItem.target"
               class="tiny-bulletin-board__textTitle"
               rel="noopener noreferrer"
-              @click.native="handleBulletinBoardClick(subItem)"
+              @click="handleBulletinBoardClick(subItem)"
             >
               {{ subItem.text }}
               <span v-if="subIndex === 0" class="tiny-bulletin-board__new">
                 <component :is="icon" class="tiny-svg-size" />{{ icon ? '' : 'NEW' }}
               </span>
             </a>
-            <span v-else class="tiny-bulletin-board__textTitle" @click.native="handleBulletinBoardClick(subItem)">
+            <span v-else class="tiny-bulletin-board__textTitle" @click="handleBulletinBoardClick(subItem)">
               {{ subItem.text }}
               <span v-if="subIndex === 0" class="tiny-bulletin-board__new">
                 <component :is="icon" class="tiny-svg-size" />{{ icon ? '' : 'NEW' }}

From e57af4df73141ed938c23fa05e79d19b3d053bcf Mon Sep 17 00:00:00 2001
From: wuyiping0628 <1106773985@qq.com>
Date: Tue, 3 Dec 2024 04:13:06 -0800
Subject: [PATCH 3/3] feat(bulletin-board): [bulletin-board] Add click events

---
 examples/sites/demos/apis/bulletin-board.js                | 7 +++++--
 .../demos/pc/app/bulletin-board/events-composition-api.vue | 6 +++---
 examples/sites/demos/pc/app/bulletin-board/events.vue      | 6 +++---
 .../demos/pc/app/bulletin-board/webdoc/bulletin-board.js   | 6 +++---
 packages/renderless/src/bulletin-board/index.ts            | 2 +-
 5 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/examples/sites/demos/apis/bulletin-board.js b/examples/sites/demos/apis/bulletin-board.js
index 173b0da42b..39e543f9ea 100644
--- a/examples/sites/demos/apis/bulletin-board.js
+++ b/examples/sites/demos/apis/bulletin-board.js
@@ -90,7 +90,7 @@ export default {
       ],
       events: [
         {
-          name: 'handleClick',
+          name: 'contentClick',
           type: '(event: BulletinBoardData) => void',
           defaultValue: '',
           desc: {
@@ -98,7 +98,10 @@ export default {
             'en-US': 'The callback function triggered when the content of the bulletin board is clicked'
           },
           mode: ['pc'],
-          pcDemo: 'events'
+          pcDemo: 'events',
+          meta: {
+            stable: '3.20.0'
+          }
         }
       ],
       methods: [],
diff --git a/examples/sites/demos/pc/app/bulletin-board/events-composition-api.vue b/examples/sites/demos/pc/app/bulletin-board/events-composition-api.vue
index fcccb1f662..7eea0b3455 100644
--- a/examples/sites/demos/pc/app/bulletin-board/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/bulletin-board/events-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <tiny-bulletin-board :tab-title="tabTitle" :data="data" @handleClick="handleClick"></tiny-bulletin-board>
+  <tiny-bulletin-board :tab-title="tabTitle" :data="data" @contentClick="contentClick"></tiny-bulletin-board>
 </template>
 
 <script setup>
@@ -86,9 +86,9 @@ const data = ref([
     }
   ]
 ])
-function handleClick(item) {
+function contentClick(item) {
   TinyModal.message({
-    message: 'click 事件：内容为' + item.text,
+    message: '触发 contentClick 事件：内容为' + item.text,
     status: 'info'
   })
 }
diff --git a/examples/sites/demos/pc/app/bulletin-board/events.vue b/examples/sites/demos/pc/app/bulletin-board/events.vue
index 09a8838e75..36ed3018d5 100644
--- a/examples/sites/demos/pc/app/bulletin-board/events.vue
+++ b/examples/sites/demos/pc/app/bulletin-board/events.vue
@@ -1,5 +1,5 @@
 <template>
-  <tiny-bulletin-board :tab-title="tabTitle" :data="data" @handleClick="handleClick"></tiny-bulletin-board>
+  <tiny-bulletin-board :tab-title="tabTitle" :data="data" @contentClick="contentClick"></tiny-bulletin-board>
 </template>
 
 <script>
@@ -94,9 +94,9 @@ export default {
     }
   },
   methods: {
-    handleClick(item) {
+    contentClick(item) {
       TinyModal.message({
-        message: 'click 事件：内容为' + item.text,
+        message: '触发 contentClick 事件：内容为' + item.text,
         status: 'info'
       })
     }
diff --git a/examples/sites/demos/pc/app/bulletin-board/webdoc/bulletin-board.js b/examples/sites/demos/pc/app/bulletin-board/webdoc/bulletin-board.js
index dc595caa98..a03a2c84db 100644
--- a/examples/sites/demos/pc/app/bulletin-board/webdoc/bulletin-board.js
+++ b/examples/sites/demos/pc/app/bulletin-board/webdoc/bulletin-board.js
@@ -108,12 +108,12 @@ export default {
     {
       demoId: 'events',
       name: {
-        'zh-CN': 'click事件',
+        'zh-CN': '事件',
         'en-US': 'Fold panel click event'
       },
       desc: {
-        'zh-CN': '<p>当点击后会触发触发 <code>click</code> 事件。</p>',
-        'en-US': '<p>When clicked, it will trigger<code>click</code>. </p>'
+        'zh-CN': '<p>当点击内容后会触发 <code>contentClick</code> 事件。</p>',
+        'en-US': '<p>When clicked, it will trigger <code>contentClick</code> . </p>'
       },
       codeFiles: ['events.vue']
     }
diff --git a/packages/renderless/src/bulletin-board/index.ts b/packages/renderless/src/bulletin-board/index.ts
index 18c789f04d..5856e77e24 100644
--- a/packages/renderless/src/bulletin-board/index.ts
+++ b/packages/renderless/src/bulletin-board/index.ts
@@ -38,5 +38,5 @@ export const computedMoreLink =
 export const handleBulletinBoardClick =
   ({ emit }) =>
   (item) => {
-    emit('handleClick', item)
+    emit('contentClick', item)
   }