v3.1.2

CHANGELOG.md

@@ -12,3 +12,10 @@
 - 新增面包屑
 - 支持国际化语言包分包管理(但是，依旧是合并到一个文件中，所以需要注意 key 的管理)
 - 新增国内预览地址
+
+## 3.1.2
+
+### Feats
+
+- 修改 demo 页面展示
+- 修改 RayCollapseGrid, RayTable 组件为默认不展示 border

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": true,
-  "version": "3.1.1",
+  "version": "3.1.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/RayCollapseGrid/src/props.ts

@@ -33,10 +33,10 @@ export const collapseGridProps = {
      *
      * 卡片边框
      *
-     * 默认 `true`
+     * 默认 `false`
      */
     type: Boolean,
-    default: true,
+    default: false,
   },
   ...gridProps,
 } as const

src/components/RayTable/src/index.tsx

@@ -9,6 +9,23 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
+/**
+ *
+ * <https://www.naiveui.com/zh-CN/dark/components/data-table>
+ *
+ * 完全继承 `NDataTable`, 该组件继承 `NDataTable Props` 属性和方法
+ *
+ * 实现: 抬头, 操作栏, 右键菜单功能拓展, 输出 `excel`
+ *
+ * 右键菜单功能, 需要同时启用 `showMenu` 与配置菜单选项才能正常使用
+ *
+ * 可以通过设置 `action` 为 `false` 隐藏操作栏
+ *
+ * 具体拓展 `props` 方法, 可以查看 `props.ts` 中相关注释与代码
+ *
+ * 基于 `xlsx.js` 实现输出 `excel`
+ */
+
 import './index.scss'
 import { NDataTable, NCard, NDropdown, NDivider } from 'naive-ui'
 import TableSetting from './components/TableSetting/index'
@@ -240,20 +257,3 @@ const RayTable = defineComponent({
 })
 
 export default RayTable
-
-/**
- *
- * <https://www.naiveui.com/zh-CN/dark/components/data-table>
- *
- * 完全继承 `NDataTable`, 该组件继承 `NDataTable Props` 属性和方法
- *
- * 实现: 抬头, 操作栏, 右键菜单功能拓展, 输出 `excel`
- *
- * 右键菜单功能, 需要同时启用 `showMenu` 与配置菜单选项才能正常使用
- *
- * 可以通过设置 `action` 为 `false` 隐藏操作栏
- *
- * 具体拓展 `props` 方法, 可以查看 `props.ts` 中相关注释与代码
- *
- * 基于 `xlsx.js` 实现输出 `excel`
- */

src/components/RayTable/src/props.ts

@@ -205,7 +205,7 @@ const rayTableProps = {
      * 表格边框
      */
     type: Boolean,
-    default: true,
+    default: false,
   },
 } as const
 

src/views/dashboard/index.tsx

@@ -6,6 +6,8 @@ import {
   NDescriptionsItem,
   NTag,
   NSpace,
+  NP,
+  NH6,
 } from 'naive-ui'
 import RayIcon from '@/components/RayIcon/index'
 import RayLink from '@/components/RayLink/index'
@@ -58,9 +60,28 @@ const Dashboard = defineComponent({
         span: 2,
       },
     ]
+    const technologyTagOptions = [
+      {
+        label: 'Vue3.x',
+        value: 'Vue3.x',
+      },
+      {
+        label: 'Vite4.0',
+        value: 'Vite4.0',
+      },
+      {
+        label: 'Pinia',
+        value: 'Pinia',
+      },
+      {
+        label: 'TSX',
+        value: 'TSX',
+      },
+    ]
 
     return {
       coverLetterOptions,
+      technologyTagOptions,
     }
   },
   render() {
@@ -93,6 +114,22 @@ const Dashboard = defineComponent({
             ))}
           </NDescriptions>
         </NCard>
+        <NCard title="项目介绍">
+          <NH6>技术栈</NH6>
+          <NP>
+            <NSpace>
+              {this.technologyTagOptions.map((curr) => (
+                <NTag key={curr.value} type="info">
+                  {curr.label}
+                </NTag>
+              ))}
+            </NSpace>
+          </NP>
+          <NH6>项目介绍</NH6>
+          <NP>
+            预设了最佳构建体验的配置与常用搬砖工具。意在提供一个简洁、快速上手的模板。
+          </NP>
+        </NCard>
         <NCard title="友情链接">
           <RayLink />
         </NCard>

src/views/echart/index.tsx

@@ -1,6 +1,19 @@
 import './index.scss'
+
+import {
+  NCard,
+  NSwitch,
+  NLayout,
+  NDescriptions,
+  NDescriptionsItem,
+  NTag,
+  NSpace,
+  NP,
+  NH6,
+  NH2,
+  NH3,
+} from 'naive-ui'
 import RayChart from '@/components/RayChart/index'
-import { NCard, NSwitch } from 'naive-ui'
 
 const Echart = defineComponent({
   name: 'Echart',
@@ -200,69 +213,63 @@ const Echart = defineComponent({
   render() {
     return (
       <div class="echart">
-        <NCard title="RayChart组件使用">
-          在使用该组件时, 一定要注意根组件的高度初始化问题,
-          如果需要使用其余的图例, 只需要从 echarts 中导入对应组件, 并且使用 use
-          方法注册. 该组件实现了自动跟随模板主题切换功能, 但是动态切换损耗较大,
-          所以默认不启用
-        </NCard>
-        <NCard title="基础使用">
-          <div class="chart--container">
-            <RayChart options={this.baseOptions} />
-          </div>
-        </NCard>
-        <NCard title="渲染成功后运行回调函数">
-          <div class="chart--container">
-            <RayChart
-              options={this.basePieOptions}
-              success={this.handleChartRenderSuccess.bind(this)}
-            />
-          </div>
-        </NCard>
-        <NCard title="能跟随主题切换的可视化图">
-          <div class="chart--container">
-            <RayChart
-              autoChangeTheme
-              options={this.baseLineOptions}
-              showAria={this.chartAria}
-            />
-          </div>
-        </NCard>
-        <NCard title="不跟随主题切换的暗色主题可视化图">
-          <div class="chart--container">
-            <RayChart theme="dark" options={this.baseOptions} />
-          </div>
-        </NCard>
-        <NCard title="加载动画">
-          <NSwitch
-            v-model:value={this.chartLoading}
-            onUpdateValue={this.handleLoadingShow.bind(this)}
-            style={['padding: 18px 0']}
-          >
-            {{
-              checked: () => '隐藏加载动画',
-              unchecked: () => '显示加载动画',
-            }}
-          </NSwitch>
-          <div class="chart--container">
-            <RayChart ref="baseChartRef" options={this.baseOptions} />
-          </div>
-        </NCard>
-        <NCard title="贴画可视化图">
-          <NSwitch
-            v-model:value={this.chartAria}
-            onUpdateValue={this.handleAriaShow.bind(this)}
-            style={['padding: 18px 0']}
-          >
-            {{
-              checked: () => '隐藏贴花',
-              unchecked: () => '显示贴花',
-            }}
-          </NSwitch>
-          <div class="chart--container">
-            <RayChart options={this.baseOptions} showAria={this.chartAria} />
-          </div>
-        </NCard>
+        <NH2>RayChart 组件使用</NH2>
+        <NP>
+          该组件会默认以 200*200
+          宽高进行填充。预设了常用的图、方法组件，如果不满足需求，需要用 use
+          方法进行手动拓展。该组件实现了自动跟随模板主题切换功能，但是动态切换损耗较大，所以默认不启用
+        </NP>
+        <NH2>基础使用</NH2>
+        <div class="chart--container">
+          <RayChart options={this.baseOptions} />
+        </div>
+        <NH2>渲染成功后运行回调函数</NH2>
+        <div class="chart--container">
+          <RayChart
+            options={this.basePieOptions}
+            success={this.handleChartRenderSuccess.bind(this)}
+          />
+        </div>
+        <NH2>能跟随主题切换的可视化图</NH2>
+        <div class="chart--container">
+          <RayChart
+            autoChangeTheme
+            options={this.baseLineOptions}
+            showAria={this.chartAria}
+          />
+        </div>
+        <NH2>不跟随主题切换的暗色主题可视化图</NH2>
+        <div class="chart--container">
+          <RayChart theme="dark" options={this.baseOptions} />
+        </div>
+        <NH2>加载动画</NH2>
+        <NSwitch
+          v-model:value={this.chartLoading}
+          onUpdateValue={this.handleLoadingShow.bind(this)}
+          style={['padding: 18px 0']}
+        >
+          {{
+            checked: () => '隐藏加载动画',
+            unchecked: () => '显示加载动画',
+          }}
+        </NSwitch>
+        <div class="chart--container">
+          <RayChart ref="baseChartRef" options={this.baseOptions} />
+        </div>
+        <NH2>贴画可视化图</NH2>
+        <NSwitch
+          v-model:value={this.chartAria}
+          onUpdateValue={this.handleAriaShow.bind(this)}
+          style={['padding: 18px 0']}
+        >
+          {{
+            checked: () => '隐藏贴花',
+            unchecked: () => '显示贴花',
+          }}
+        </NSwitch>
+        <div class="chart--container">
+          <RayChart options={this.baseOptions} showAria={this.chartAria} />
+        </div>
       </div>
     )
   },

src/views/table/index.tsx

@@ -21,6 +21,15 @@ import {
   NInputNumber,
   NSpace,
   NSwitch,
+  NDescriptions,
+  NDescriptionsItem,
+  NP,
+  NH6,
+  NH2,
+  NH3,
+  NUl,
+  NLi,
+  NOl,
 } from 'naive-ui'
 import RayTable from '@/components/RayTable/index'
 import RayCollapseGrid from '@/components/RayCollapseGrid/index'
@@ -147,137 +156,107 @@ const TableView = defineComponent({
   render() {
     return (
       <NLayout>
-        <NCard title="RayTable">
-          <p>
-            该组件基于 Naive UI DataTable 组件封装. 实现右键菜单, 表格标题,
-            导出为 excel 操作栏等功能
-          </p>
-          <p>RayTable 完全继承 DataTable 的所有属性与方法</p>
-          <p>
-            相关拓展 props 属性, 可以在源码位置
+        <NH2>RayTable 组件使用</NH2>
+        <NUl alignText>
+          <NLi>
+            该组件基于 Naive UI DataTable
+            组件封装。实现右键菜单、表格标题、导出为 excel 操作栏等功能
+          </NLi>
+          <NLi>RayTable 完全继承 DataTable 的所有属性与方法</NLi>
+          <NLi>
+            相关拓展 props 属性，可以在源码位置
             src/components/RayTable/src/props.ts 中查看相关代码与注释
-          </p>
-          <p>该组件可以配合 RayCollapseGird 组件使用实现可折叠搜索栏</p>
-        </NCard>
-        <NCard style={['margin-top: 18px']}>
+          </NLi>
+          <NLi>该组件可以配合 RayCollapseGird 组件使用实现可折叠搜索栏</NLi>
+        </NUl>
+        <NH2>配合 RayCollapseGird 组件使用</NH2>
+        <RayCollapseGrid
+          bordered={false}
+          collapsedRows={this.gridCollapsedRows}
+          cols={this.gridItemCount}
+          onUpdateValue={(value: boolean) =>
+            window.$message.info(
+              `我是 RayCollapseGrid 组件${value ? '收起' : '展开'}的回调函数`,
+            )
+          }
+        >
           {{
-            default: () => (
-              <NSpace vertical>
-                <NSpace style={['margin-top: 18px']}>
-                  该组件基于 NGird 实现, 但是由于 css grid 限制, 不能对于
-                  NGridItem 组件进行二次封装, 所以使用时必须配合 NGridItem
-                  使用才能实现示例效果(使用 NGridItem 包裹元素即可).
-                </NSpace>
-                <NSpace style={['margin-top: 18px']}>
-                  <NSpace align="center">
-                    数量 <NInputNumber v-model:value={this.gridItemCount} />
-                  </NSpace>
-                  <NSpace align="center">
-                    行数 <NInputNumber v-model:value={this.gridCollapsedRows} />
-                  </NSpace>
-                </NSpace>
-                <RayCollapseGrid
-                  collapsedRows={this.gridCollapsedRows}
-                  cols={this.gridItemCount}
-                  onUpdateValue={(value: boolean) =>
-                    window.$message.info(
-                      `我是 RayCollapseGrid 组件${
-                        value ? '收起' : '展开'
-                      }的回调函数`,
-                    )
-                  }
-                >
-                  {{
-                    action: () => (
-                      <>
-                        <NButton>搜索</NButton>
-                        <NButton>重置</NButton>
-                      </>
-                    ),
-                    default: () => (
-                      <>
-                        <NGridItem>
-                          <NSelect />
-                        </NGridItem>
-                        <NGridItem>
-                          <NInput />
-                        </NGridItem>
-                        <NGridItem>
-                          <NDatePicker type="datetimerange" clearable />
-                        </NGridItem>
-                        <NGridItem>
-                          <NInput />
-                        </NGridItem>
-                        <NGridItem>
-                          <NInput />
-                        </NGridItem>
-                      </>
-                    ),
-                  }}
-                </RayCollapseGrid>
-              </NSpace>
-            ),
-          }}
-        </NCard>
-        <NCard title="基础使用" style={['margin-top: 18px']}>
-          <RayTable
-            title={h(
-              NSwitch,
-              {
-                onUpdateValue: (value: boolean) => (this.tableLoading = value),
-              },
-              {},
-            )}
-            data={this.tableData}
-            columns={this.baseColumns}
-            action={false}
-            pagination={{
-              pageSize: 10,
-            }}
-            loading={this.tableLoading}
-          >
-            {{
-              tableFooter: () => '表格的底部内容区域，有时候你可能会用上',
-            }}
-          </RayTable>
-        </NCard>
-        <NCard style={['margin-top: 18px']}>
-          {{
-            header: () => (
-              <div>
-                <p>
-                  使用响应式方法代理 columns 并且打开 action
-                  则可以启用操作栏(v-model:columns)
-                </p>
-                <p>拖拽操作栏动态切换表格列</p>
-                <p>点击左右固定按钮, 即可动态固定列</p>
-                <p>点击修改列宽度, 即可拖动列修改宽度</p>
-                <p>点击导出按钮即可导出 excel 表格, 默认以列为表头输出</p>
-                <p>点击打印按钮即可打印该表格</p>
-              </div>
+            action: () => (
+              <>
+                <NButton>搜索</NButton>
+                <NButton>重置</NButton>
+              </>
             ),
             default: () => (
-              <RayTable
-                title={h(NInput, {
-                  placeholder: '请输入检索条件',
-                  style: ['width: 200px'],
-                })}
-                data={this.tableData}
-                v-model:columns={this.actionColumns}
-              />
+              <>
+                <NGridItem>
+                  <NSelect />
+                </NGridItem>
+                <NGridItem>
+                  <NInput />
+                </NGridItem>
+                <NGridItem>
+                  <NDatePicker type="datetimerange" clearable />
+                </NGridItem>
+                <NGridItem>
+                  <NInput />
+                </NGridItem>
+                <NGridItem>
+                  <NInput />
+                </NGridItem>
+              </>
             ),
           }}
-        </NCard>
-        <NCard title="右键菜单" style={['margin-top: 18px']}>
-          <RayTable
-            title="右键菜单表格"
-            action={false}
-            data={this.tableData}
-            columns={this.baseColumns}
-            rightClickMenu={this.tableMenuOptions}
-            onMenuSelect={this.handleMenuSelect.bind(this)}
-          />
-        </NCard>
+        </RayCollapseGrid>
+        <RayTable
+          style="margin-top: 18px"
+          title={h(
+            NSwitch,
+            {
+              onUpdateValue: (value: boolean) => (this.tableLoading = value),
+            },
+            {},
+          )}
+          data={this.tableData}
+          columns={this.baseColumns}
+          action={false}
+          pagination={{
+            pageSize: 10,
+          }}
+          loading={this.tableLoading}
+        >
+          {{
+            tableFooter: () => '表格的底部内容区域，有时候你可能会用上',
+          }}
+        </RayTable>
+        <NH2>RayTable 拓展功能</NH2>
+        <NP>
+          使用响应式方法代理 columns 并且打开 action
+          则可以启用操作栏(v-model:columns)
+        </NP>
+        <NP>拖拽操作栏动态切换表格列</NP>
+        <NP>点击左右固定按钮，即可动态固定列</NP>
+        <NP>点击修改列宽度，即可拖动列修改宽度</NP>
+        <NP>点击导出按钮即可导出 excel 表格，默认以列为表头输出</NP>
+        <NP>点击打印按钮即可打印该表格</NP>
+        <RayTable
+          title={h(NInput, {
+            placeholder: '请输入检索条件',
+            style: ['width: 200px'],
+          })}
+          data={this.tableData}
+          v-model:columns={this.actionColumns}
+          bordered={false}
+        />
+        <NH2>右键菜单</NH2>
+        <RayTable
+          title="右键菜单表格"
+          action={false}
+          data={this.tableData}
+          columns={this.baseColumns}
+          rightClickMenu={this.tableMenuOptions}
+          onMenuSelect={this.handleMenuSelect.bind(this)}
+        />
       </NLayout>
     )
   },