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,26 +213,24 @@ const Echart = defineComponent({
   render() {
     return (
       <div class="echart">
-        <NCard title="RayChart组件使用">
+        <NH2>RayChart 组件使用</NH2>
-          在使用该组件时, 一定要注意根组件的高度初始化问题,
+        <NP>
-          如果需要使用其余的图例, 只需要从 echarts 中导入对应组件, 并且使用 use
+          该组件会默认以 200*200
-          方法注册. 该组件实现了自动跟随模板主题切换功能, 但是动态切换损耗较大,
+          宽高进行填充。预设了常用的图、方法组件，如果不满足需求，需要用 use
-          所以默认不启用
+          方法进行手动拓展。该组件实现了自动跟随模板主题切换功能，但是动态切换损耗较大，所以默认不启用
-        </NCard>
+        </NP>
-        <NCard title="基础使用">
+        <NH2>基础使用</NH2>
         <div class="chart--container">
           <RayChart options={this.baseOptions} />
         </div>
-        </NCard>
+        <NH2>渲染成功后运行回调函数</NH2>
-        <NCard title="渲染成功后运行回调函数">
         <div class="chart--container">
           <RayChart
             options={this.basePieOptions}
             success={this.handleChartRenderSuccess.bind(this)}
           />
         </div>
-        </NCard>
+        <NH2>能跟随主题切换的可视化图</NH2>
-        <NCard title="能跟随主题切换的可视化图">
         <div class="chart--container">
           <RayChart
             autoChangeTheme
@@ -227,13 +238,11 @@ const Echart = defineComponent({
             showAria={this.chartAria}
           />
         </div>
-        </NCard>
+        <NH2>不跟随主题切换的暗色主题可视化图</NH2>
-        <NCard title="不跟随主题切换的暗色主题可视化图">
         <div class="chart--container">
           <RayChart theme="dark" options={this.baseOptions} />
         </div>
-        </NCard>
+        <NH2>加载动画</NH2>
-        <NCard title="加载动画">
         <NSwitch
           v-model:value={this.chartLoading}
           onUpdateValue={this.handleLoadingShow.bind(this)}
@@ -247,8 +256,7 @@ const Echart = defineComponent({
         <div class="chart--container">
           <RayChart ref="baseChartRef" options={this.baseOptions} />
         </div>
-        </NCard>
+        <NH2>贴画可视化图</NH2>
-        <NCard title="贴画可视化图">
         <NSwitch
           v-model:value={this.chartAria}
           onUpdateValue={this.handleAriaShow.bind(this)}
@@ -262,7 +270,6 @@ const Echart = defineComponent({
         <div class="chart--container">
           <RayChart options={this.baseOptions} showAria={this.chartAria} />
         </div>
-        </NCard>
       </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,43 +156,27 @@ const TableView = defineComponent({
   render() {
     return (
       <NLayout>
-        <NCard title="RayTable">
+        <NH2>RayTable 组件使用</NH2>
-          <p>
+        <NUl alignText>
-            该组件基于 Naive UI DataTable 组件封装. 实现右键菜单, 表格标题,
+          <NLi>
-            导出为 excel 操作栏等功能
+            该组件基于 Naive UI DataTable
-          </p>
+            组件封装。实现右键菜单、表格标题、导出为 excel 操作栏等功能
-          <p>RayTable 完全继承 DataTable 的所有属性与方法</p>
+          </NLi>
-          <p>
+          <NLi>RayTable 完全继承 DataTable 的所有属性与方法</NLi>
-            相关拓展 props 属性, 可以在源码位置
+          <NLi>
+            相关拓展 props 属性，可以在源码位置
             src/components/RayTable/src/props.ts 中查看相关代码与注释
-          </p>
+          </NLi>
-          <p>该组件可以配合 RayCollapseGird 组件使用实现可折叠搜索栏</p>
+          <NLi>该组件可以配合 RayCollapseGird 组件使用实现可折叠搜索栏</NLi>
-        </NCard>
+        </NUl>
-        <NCard style={['margin-top: 18px']}>
+        <NH2>配合 RayCollapseGird 组件使用</NH2>
-          {{
-            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
+          bordered={false}
           collapsedRows={this.gridCollapsedRows}
           cols={this.gridItemCount}
           onUpdateValue={(value: boolean) =>
             window.$message.info(
-                      `我是 RayCollapseGrid 组件${
+              `我是 RayCollapseGrid 组件${value ? '收起' : '展开'}的回调函数`,
-                        value ? '收起' : '展开'
-                      }的回调函数`,
             )
           }
         >
@@ -215,12 +208,8 @@ const TableView = defineComponent({
             ),
           }}
         </RayCollapseGrid>
-              </NSpace>
-            ),
-          }}
-        </NCard>
-        <NCard title="基础使用" style={['margin-top: 18px']}>
         <RayTable
+          style="margin-top: 18px"
           title={h(
             NSwitch,
             {
@@ -240,23 +229,16 @@ const TableView = defineComponent({
             tableFooter: () => '表格的底部内容区域，有时候你可能会用上',
           }}
         </RayTable>
-        </NCard>
+        <NH2>RayTable 拓展功能</NH2>
-        <NCard style={['margin-top: 18px']}>
+        <NP>
-          {{
-            header: () => (
-              <div>
-                <p>
           使用响应式方法代理 columns 并且打开 action
           则可以启用操作栏(v-model:columns)
-                </p>
+        </NP>
-                <p>拖拽操作栏动态切换表格列</p>
+        <NP>拖拽操作栏动态切换表格列</NP>
-                <p>点击左右固定按钮, 即可动态固定列</p>
+        <NP>点击左右固定按钮，即可动态固定列</NP>
-                <p>点击修改列宽度, 即可拖动列修改宽度</p>
+        <NP>点击修改列宽度，即可拖动列修改宽度</NP>
-                <p>点击导出按钮即可导出 excel 表格, 默认以列为表头输出</p>
+        <NP>点击导出按钮即可导出 excel 表格，默认以列为表头输出</NP>
-                <p>点击打印按钮即可打印该表格</p>
+        <NP>点击打印按钮即可打印该表格</NP>
-              </div>
-            ),
-            default: () => (
         <RayTable
           title={h(NInput, {
             placeholder: '请输入检索条件',
@@ -264,11 +246,9 @@ const TableView = defineComponent({
           })}
           data={this.tableData}
           v-model:columns={this.actionColumns}
+          bordered={false}
         />
-            ),
+        <NH2>右键菜单</NH2>
-          }}
-        </NCard>
-        <NCard title="右键菜单" style={['margin-top: 18px']}>
         <RayTable
           title="右键菜单表格"
           action={false}
@@ -277,7 +257,6 @@ const TableView = defineComponent({
           rightClickMenu={this.tableMenuOptions}
           onMenuSelect={this.handleMenuSelect.bind(this)}
         />
-        </NCard>
       </NLayout>
     )
   },