# asyncTreetable

**Repository Path**: xiaoxiaoyangxiaodi/asyncTreetable

## Basic Information

- **Project Name**: asyncTreetable
- **Description**: 基于laiyui table组件的异步加载树表格
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-01-15
- **Last Updated**: 2024-05-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ykst-front-end

## 简介

云科税通前端项目，基于pnpm monorepo 单仓多应用架构

统一的配置：

- tsconfig
- eslint
- prettier
- stylelint(sass)
- commitlint
- husky
- lint-staged
- unocss

## 环境

包管理器必须为pnpm
node: >= 20.0.0

## 安装

```
pnpm i
```

## 使用说明

### 开启 volar takeover

[volar takeover](https://cn.vuejs.org/guide/typescript/overview.html#volar-takeover-mode)

### 依赖管理

#### 安装根依赖

```
pnpm i -w dayjs // dependencies
pnpm i -wD dayjs // devDependencies
```

#### 指定工作空间安装

```
pnpm -F @ykst/shared add dayjs -D
```

### unocss

集成 Windi css(Tailwind CSS) 预设

#### 可用样式查询

[unocss 交互式文档](https://unocss.dev/interactive)

[windi css 工具类参考](https://cn.windicss.org/utilities/general/colors.html)

#### 本地查看编译后的样式（运行时）

```
http://localhost:5173/__unocss#/
```

### icon 方案

#### 可用图标查询

<https://iconify.design> 或 <https://icones.js.org/>

#### 使用方法

1. 作为元素类名： 集合和图标名之间的分隔符可使用冒号

```html
<i class="i-ant-design-setting-filled" />
<i class="i-ant-design:setting-filled" />
```

2. 作为元素属性

```html
<i i-ant-design-setting-filled />
```

3. 结合antdv组件使用，如作为Button组件的icon属性，能够适配原有样式

```html
<a-button :icon="iconSetting"></a-button>
```

```js
import { iconifyToAntdvIconVNode } from '@ykst/shared';
const iconSetting = iconifyToAntdvIconVNode('i-ant-design-setting-filled');
```

4. 单独使用

```js
import { iconifyToVNode } from '@ykst/shared';
const iconSetting = iconifyToVNo('i-ant-design-setting-filled');
```

### 主题变量

> 可使用的token及变量名，参考主题编辑器:
> <https://next.antdv.com/theme-editor-cn>

#### 使用 useAntdVueToken

自动适配暗色

```js
import { useAntdVueToken } from '@ykst/hooks';
const { token } = useAntdVueToken();
```

```html
<div :style="{ background: token.colorBgContainer}"></div>
```

#### 基于unocss，自定义适应主题的样式

以`dark:`作为前缀，可适配暗色模式，以下五种方式效果一致:

```html
<div class="bg-blue-300 dark:bg-blue-500" />
```

属性模式和可变修饰组结合：

```html
<div bg-blue-300 dark:bg-blue-500 />
```

```html
<div bg="blue-300 dark:blue-500" />
```

```html
<div bg-blue="300 dark:500" />
```

```html
<div bg-blue="3 dark:5" />
```

#### 自定义类

```html
<template>
  <div class="test-class"></div>
</template>

<template>
  <div test-class></div>
</template>

<style scope>
  .test-class {
    @apply text-black dark:text-white px4 py2 rounded-md;
  }
</style>
```

### 路由和布局

插件地址：

<https://github.com/posva/unplugin-vue-router>

<https://github.com/JohnCampionJr/vite-plugin-vue-layouts>

#### 基于文件夹结构自动生成路由

排除所有以`__`双下划线开头的文件和文件夹，以及components文件夹下的所有文件和文件夹

嵌套路由及布局
==文件夹和文件名中的`.`将被被转义为`/`==

```
src/pages/
  news/             // 里面的路径都会嵌套路由
    list.vue        // -> /news/list
    [id].vue        // -> /news/:id  必填参数 [] 包裹
    info.[[id]].vue // -> /news/info/:id? 可选参数[[]]包裹,
  news.vue          // news文件夹下的路径都会采用该布局
  news.contact.vue  // -> /news/contact 不嵌套在布局下
  about.vue         // -> /about 单页面直接定义
  __test/           // -> 排除该文件夹及内部所有文件
  __test.vue        // -> 排除该文件
  test/
    components/     // 排除该文件夹及内部所有文件
      a.vue
      b.vue
```

#### 路由属性定义

- ==redirect==属性必须在`definePage`之中定义才会生效
- 参数类型限制需要重写`path`属性

```js
<script setup>
  definePage({
    name: 'news',
    redirect: '/news/list',
    ...
  })
</script>
```

```yaml
<route lang="yaml">
path: /news/list/:id(\\d+) # 可在此处限制参数类型，definePage中也一样
name: xxx
meta:
  title:xxx
  menuOrder: 1
</route>
```

#### 类型及提示

- 当需要引用vue-router提供的类型和方法时，都基于`vue-router/auto`

```ts
import { type RouteRecordRaw } from 'vue-router/auto';
```

- 路由提示

RouterLink、$router.push()等的参数依赖已经做到自动提示，正确的路由都会在参数中提示

如果需要自定义类型提示：

```ts
import { type RouteNamedMap } from 'vue-router/auto/routes';
// 调用该函数时，所有已注册正确的路由名称会作为一个枚举值供选择
export function getRouterInfo(routeName: keyof RouteNamedMap) {}
```

#### 单页应用布局

定义布局文件

```
src/layouts
  page.vue
```

页面中在`route`属性中定义

```yaml
<route lang="yaml">
meta:
  layout: page # 指定布局文件名
</route>
```

#### `<route>`和`definePage`的`meta`参数说明

参考 `ykst_web/src/types/extend-route-meta.d.ts`

#### 注意事项

- 修改`<route>`或`definePage`后，vite运行时输入r+enter刷新，或重新运行dev
- 嵌套路由定义时，不要使用index.vue作为路由文件名，会导致生成的路由不符合预期