feat(DescriptionPanel): 新增简介面板

.github/workflows/release-please.yml

@@ -3,6 +3,10 @@ on:
     branches:
       - main
 
+  pull_request:
+    branches:
+      - main
+
   # 允许你从 Actions 选项卡手动运行此工作流程
   workflow_dispatch:
 
@@ -46,7 +50,9 @@ jobs:
         id: output-release-created
         run: |
           release_created=${{ steps.release.outputs.release_created }}
+          b=1
           echo "release_created={release_created}" >> "$GITHUB_OUTPUT"
+          echo "b={b}" >> "$GITHUB_OUTPUT"
 
   deploy-doc:
     runs-on: ubuntu-latest

CHANGELOG.md

@@ -2,17 +2,15 @@
 
 ## [0.6.5](https://github.com/DvShu/neatui-vue/compare/v0.6.4...v0.6.5) (2024-06-25)
 
-
 ### Bug Fixes
 
-* **Collpase:** 增加箭头动画 ([8eda613](https://github.com/DvShu/neatui-vue/commit/8eda61348cf40b867de093e7f6d04cd34aaeffac))
+- **Collpase:** 增加箭头动画 ([8eda613](https://github.com/DvShu/neatui-vue/commit/8eda61348cf40b867de093e7f6d04cd34aaeffac))
 
 ## [0.6.4](https://github.com/DvShu/neatui-vue/compare/v0.6.3...v0.6.4) (2024-06-24)
 
-
 ### Bug Fixes
 
-* 修复文件名称错误 ([839d556](https://github.com/DvShu/neatui-vue/commit/839d5561b7c207a6faffd352aad580d14576e53f))
+- 修复文件名称错误 ([839d556](https://github.com/DvShu/neatui-vue/commit/839d5561b7c207a6faffd352aad580d14576e53f))
 
 ## [0.6.3](https://github.com/DvShu/neatui-vue/compare/v0.6.2...v0.6.3) (2024-06-24)
 

docs/.vitepress/config.ts

@@ -58,6 +58,12 @@ export default defineConfig({
           { text: 'Polygon 多边形', link: '/components/polygon' },
           { text: 'Form 表单', link: '/components/form' },
           { text: 'Collapse 折叠面板', link: '/components/collapse' },
+          { text: 'Progress 进度条', link: '/components/progress' },
+          { text: 'LoadingBar 加载条', link: '/components/loadingbar' },
+          {
+            text: 'DescriptionPanel 简介面板',
+            link: '/components/descriptionpanel',
+          },
         ],
       },
     ],

docs/.vitepress/theme/index.ts

@@ -24,6 +24,9 @@ import '../../../style/form';
 import '../../../style/form-item';
 import '../../../style/collapse';
 import '../../../style/collapse-item';
+import '../../../style/progress';
+import '../../../style/loading-bar';
+import '../../../style/description-panel';
 
 export default {
   extends: DefaultTheme,

docs/components/descriptionpanel.md

@@ -0,0 +1,66 @@
+# DescriptionPanel 简介面板
+
+通常用于显示描述信息、简介的地方；更多用于手机上，空间有限，一开始可以显示少量内容。
+
+## 演示
+
+<script setup>
+  import { DescriptionPanel } from '../../src'
+</script>
+
+### 基础用法
+
+内容区域的所有的 `p` 标签的内容，会自动应用一个 `text-indent`。
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue-html">
+  <nt-description-panel>
+    <p>日前，奇瑞宣布与捷豹路虎达成战略合作意向，捷豹路虎全新产品线将采用奇瑞纯电平台生产，而在另一边，东风日产云峰工厂则选择为岚图生产全新纯电SUV产品。这两个外资品牌，一个是寻求自主品牌代工，一个是为自主品牌代工，两者都将目标对准了成本节约。</p>
+    <p>如果把时间轴往前拉，围绕节约成本的课题，作为合资品牌两大中坚力量的一汽-大众和广汽本田交出了一样的答卷——裁员，这也意味着曾经高高在上的合资品牌进入了最艰难的时刻。尤其是5月销量数据出炉，合资品牌市场份额降至28.8%，让公众更为直观清晰地感受到合资品牌在华形势之严峻。</p>
+    <p>虽然合资品牌在汽车电动化、智能化的冲击下处境直转急下的趋势有目共睹，但近年来兵败如山倒的局面仍然让不少业内人士感到惊讶。在这个几乎可以形容为“跳水”的过程中，合资品牌到底做错了什么？未来还有机会东山再起吗？ </p>
+  </nt-description-panel>
+  </textarea>
+  </CodePreview>
+</ClientOnly>
+
+### 折叠高度
+
+可以通过 `collapse-height` 设置折叠后的高度
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue-html">
+  <template>
+   <nt-description-panel :collapse-height="150">
+    <p>日前，奇瑞宣布与捷豹路虎达成战略合作意向，捷豹路虎全新产品线将采用奇瑞纯电平台生产，而在另一边，东风日产云峰工厂则选择为岚图生产全新纯电SUV产品。这两个外资品牌，一个是寻求自主品牌代工，一个是为自主品牌代工，两者都将目标对准了成本节约。</p>
+    <p>如果把时间轴往前拉，围绕节约成本的课题，作为合资品牌两大中坚力量的一汽-大众和广汽本田交出了一样的答卷——裁员，这也意味着曾经高高在上的合资品牌进入了最艰难的时刻。尤其是5月销量数据出炉，合资品牌市场份额降至28.8%，让公众更为直观清晰地感受到合资品牌在华形势之严峻。</p>
+    <p>虽然合资品牌在汽车电动化、智能化的冲击下处境直转急下的趋势有目共睹，但近年来兵败如山倒的局面仍然让不少业内人士感到惊讶。在这个几乎可以形容为“跳水”的过程中，合资品牌到底做错了什么？未来还有机会东山再起吗？ </p>
+  </nt-description-panel>
+  </template>
+  </textarea>
+  <template #preview>
+  <DescriptionPanel :collapse-height="150">
+    <p>日前，奇瑞宣布与捷豹路虎达成战略合作意向，捷豹路虎全新产品线将采用奇瑞纯电平台生产，而在另一边，东风日产云峰工厂则选择为岚图生产全新纯电SUV产品。这两个外资品牌，一个是寻求自主品牌代工，一个是为自主品牌代工，两者都将目标对准了成本节约。</p>
+    <p>如果把时间轴往前拉，围绕节约成本的课题，作为合资品牌两大中坚力量的一汽-大众和广汽本田交出了一样的答卷——裁员，这也意味着曾经高高在上的合资品牌进入了最艰难的时刻。尤其是5月销量数据出炉，合资品牌市场份额降至28.8%，让公众更为直观清晰地感受到合资品牌在华形势之严峻。</p>
+    <p>虽然合资品牌在汽车电动化、智能化的冲击下处境直转急下的趋势有目共睹，但近年来兵败如山倒的局面仍然让不少业内人士感到惊讶。在这个几乎可以形容为“跳水”的过程中，合资品牌到底做错了什么？未来还有机会东山再起吗？ </p>
+  </DescriptionPanel>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+## API
+
+### DescriptionPanel Props
+
+| 参数              | 说明           | 类型     | 默认值 |
+| ----------------- | -------------- | -------- | ------ |
+| `collapse-height` | 容折叠后的高度 | `number` | `100`  |
+| `font-size`       | 字体大小       | `string` | `12px` |
+
+### CSS Vars
+
+| 属性                         | 说明     | 默认值                                     |
+| ---------------------------- | -------- | ------------------------------------------ |
+| `--nt-desc-panel-font-size`  | 字体大小 | `12px`                                     |
+| `--nt-desc-panel-textindent` | 内容缩进 | `calc(var(--nt-desc-panel-font-size) * 2)` |

docs/components/loadingbar.md

@@ -0,0 +1,144 @@
+# LoadingBar 加载条
+
+通常用于在页面初始化的时候，加载初始化数据
+
+## 演示
+
+<script setup>
+  import { onMounted, ref } from 'vue'
+  import { LoadingBar, Button } from '../../src'
+  const loadingBar = new LoadingBar()
+  let loadingBar1;
+  const $parent = ref(null)
+
+  function onLoading() {
+    loadingBar.start()
+  }
+
+  function onFinish() {
+    loadingBar.finish()
+  }
+
+  function onError() {
+    loadingBar.error()
+  }
+
+  function onLoading1() {
+    loadingBar1.start()
+  }
+
+  function onFinish1(params) {
+    loadingBar1.finish()
+  }
+
+  onMounted(() => {
+    setTimeout(() => {
+      loadingBar1 = new LoadingBar($parent)
+    }, 0);
+  })
+</script>
+
+### 基础用法
+
+在顶部显示一个不定进度条
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue">
+  <script setup>
+    const loadingBar = new NtLoadingBar('#loading-bar-demo');
+    function onLoading() {
+      loadingBar.start()
+    }
+    function onFinish() {
+      loadingBar.finish()
+    }
+    function onError() {
+      loadingBar.error()
+    }
+  </script>
+  <template>
+    <nt-button @click="onLoading">开始</nt-button>
+    <nt-button @click="onFinish">结束</nt-button>
+    <nt-button @click="onError">出错</nt-button>
+  </template>
+  </textarea>
+  <template #preview>
+    <Button @click="onLoading">开始</Button>
+    <Button @click="onFinish">结束</Button>
+    <Button @click="onError">出错</Button>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+### 局部使用
+
+构建对象的时候，传递一个 `to` 属性指向一个节点即可将加载条渲染到该节点下
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue">
+  <script setup>
+    import { ref } from 'vue'
+    const $parent = ref<HTMLDivElement>()
+    let loadingBar;
+    onMounted(() => {
+      loadingBar = new LoadingBar($parent)
+    })
+    function onLoading() {
+      loadingBar.start()
+    }
+    function onFinish(params) {
+      loadingBar.finish()
+    }
+  </script>
+  <template>
+    <div ref="$parent" id="loading-bar-demo" class="loading-bar-demo">
+      <div>这是主要内容区域，数据待加载中……</div>
+      <div>
+        <nt-button @click="onLoading">开始</nt-button>
+        <nt-button @click="onFinish">结束</nt-button>
+      </div>
+    </div>
+  </template>
+  <style>
+    .loading-bar-demo {
+      height: 100px;
+      border: 1px solid #4998f4;
+      padding: 10px;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+  </style>
+  </textarea>
+  <template #preview>
+    <div ref="$parent" id="loading-bar-demo" class="loading-bar-demo">
+      <div>这是主要内容区域，数据待加载中……</div>
+      <div>
+        <Button @click="onLoading1">开始</Button>
+        <Button @click="onFinish1">结束</Button>
+      </div>
+    </div>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+## API
+
+### 构造参数
+
+| 参数 | 说明             | 类型                                        | 默认值 |
+| ---- | ---------------- | ------------------------------------------- | ------ |
+| `to` | 加载条的挂载位置 | `string`、`HTMLElement`、`Ref<HTMLElement>` | -      |
+
+### 方法
+
+| 方法名      | 说明                                                             |
+| ----------- | ---------------------------------------------------------------- |
+| `start()`   | 开始显示进度条                                                   |
+| `finish()`  | 结束显示进度条                                                   |
+| `error()`   | 出错显示进度条                                                   |
+| `close()`   | 关闭进度条, 通常不用手动调用，内部在进度完成后会自动调用         |
+| `destroy()` | 关闭进度条，同时销毁资源，**调用该函数后，就不能再调用其它函数** |

docs/components/progress.md

@@ -0,0 +1,36 @@
+# Progress
+
+用于展示操作进度, 为用户显示该操作的当前进度和状态；通常在操作需要较长时间才能完成时使用。
+
+## 演示
+
+<script setup>
+  import { Progress } from '../../src'
+</script>
+
+### 基础用法
+
+标准的进度条
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue-html">
+  <script setup>
+  </script>
+  <template>
+    <hr />
+  </template>
+  </textarea>
+  <template #preview>
+  <Progress></Progress>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+## API
+
+### Progress Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| ---- | ---- | ---- | ------ |
+| x    | x    | x    | x      |

src/components/DescriptionPanel.vue

@@ -0,0 +1,76 @@
+<template>
+  <div
+    class="nt-desc-panel"
+    :class="{
+      collapse: collapse,
+    }"
+    :style="styles"
+  >
+    <div ref="$content"><slot></slot></div>
+    <div class="nt-desc-panel-operator">
+      <Button
+        type="text"
+        class="nt-desc-panel-btnmore"
+        @click="collapse = !collapse"
+      >
+        <span>{{ collapse ? '查看更多' : '收起' }}</span>
+        <ArrowDown class="nt-desc-panel-arrow"></ArrowDown>
+      </Button>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import Button from './Button.vue';
+import ArrowDown from './icon/ArrowDown.vue';
+
+const $content = ref<HTMLDivElement>();
+const panelMaxHeight = ref<number>();
+
+const props = withDefaults(
+  defineProps<{
+    /** 内容折叠后的高度, 默认: 100px */
+    collapseHeight?: number;
+    /** 字体大小, 默认: 12px */
+    fontSize?: string;
+  }>(),
+  {
+    collapseHeight: 100,
+  },
+);
+
+const styles = computed(() => {
+  const res: { [index: string]: string } = {};
+  res['--nt-desc-panel-min-height'] = `${props.collapseHeight}px`;
+  if (props.fontSize != null) {
+    res['--nt-desc-panel-font-size'] = props.fontSize;
+  }
+  if (panelMaxHeight != null) {
+    res['--nt-desc-panel-max-height'] = `${panelMaxHeight.value}px`;
+  }
+  return res;
+});
+
+/** 是否处于折叠状态 */
+const collapse = ref(true);
+/** 是否显示更多按钮 */
+const showMore = ref(true);
+
+onMounted(() => {
+  if ($content.value != null) {
+    let contentHeight = $content.value.getBoundingClientRect().height;
+    if (contentHeight > props.collapseHeight) {
+      showMore.value = true;
+    }
+    let offsetHeight = 0;
+    const $operator = $content.value.nextElementSibling as HTMLDivElement;
+    if ($operator != null) {
+      const optHeight = $operator.getBoundingClientRect().height;
+      const paddingTop =
+        getComputedStyle($operator).getPropertyValue('padding-top');
+      offsetHeight = optHeight - parseInt(paddingTop);
+    }
+    panelMaxHeight.value = contentHeight + offsetHeight;
+  }
+});
+</script>