# solid-quasar

**Repository Path**: complex/solid-quasar

## Basic Information

- **Project Name**: solid-quasar
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-04
- **Last Updated**: 2026-01-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Quasar App (digital-quasar)

A Quasar Project

## Install the dependencies
```bash
yarn
# or
npm install
```

### Start the app in development mode (hot-code reloading, error reporting, etc.)
```bash
quasar dev
```


### Lint the files
```bash
yarn lint
# or
npm run lint
```


### Format the files
```bash
yarn format
# or
npm run format
```



### Build the app for production
```bash
quasar build
```

### Customize the configuration
See [Configuring quasar.conf.js](https://quasar.dev/quasar-cli/quasar-conf-js).

## 功能

1. 权限
2. 表单
3. 流程
4. 定时任务
5. 代码生成

## 缺陷

1. 弹出框
2. 日期和时间
3. 树形表格

## 执行策略问题

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

## 样例

https://github.com/pratik227/quasar-admin

## 设计风格

- 适当的渐变色突出重点
- 包豪斯风格图形
- 裸眼3D图形
- 新的毛玻璃效果更加去注重功能说明，用在视觉强调的地方
- 沉浸式界面，将功能与场景融合设计
- 杂志化排版
- 拟物化图标，不过这种风格也不能大面积运用在界面中，我们可以运用在一些关键功能入口设计上
- 圆形的运用
- 新拟态界面，大量使用了柔和的阴影和微弱渐变，使设计既具有未来感又具有现实感
- 按钮颜色的约定：新增类的使用primary，更改类的使用warning，删除类的使用negative，功能类的使用secondary

## new vue page

1. 继承参数，传递布局（必须）
   ```vue
   const selectDept = defineProps(['selectDept'])
   const emits = defineEmits(['rightShow', 'leftShow', 'breadShow'])
   onMounted(() => {
   	emits('rightShow', false)
   	emits('leftShow', true)
   	emits('breadShow', true)
   	...
   })
```

2. 响应式声明（必须）
   ```vue
   const data = reactive({
   	init:{},  //初始化参数,一般包含表格数据、分页常量和字段信息
   	search:{}, //查询参数，一般就是个keyword
   	state:{}, //状态值，窗口高度、弹出框显示控制、编辑状态等
   	form:{} //表单
   })
   ```

3. 监听保持响应式
   ```vue
   watch(() => data.search.keyword, () => {
   	data.init.pagination.currentPage = 1
   })
   ```

4. 匹配高度
   ```vue
   :style="{'max-height':data.state.browserHeight,'height':data.state.browserHeight}"
   ...
   const getHeight = () => {
   	data.state.browserHeight = window.innerHeight - 110 + 'px'  //获取浏览器高度减去顶部导航栏
}
...
onMounted(() => {
...
window.addEventListener('resize', getHeight)
getHeight()
...
})
   ```

5. 新增信息功能

   ``` vue
   const baseAdd = () => {
   	data.state.editDialog = true
   	data.state.addStatus = true
   	data.state.dialogTitle = constant.addTitle
   	resetForm()
   }
   ...
   const addSubmit = debounce(() => {
   	post("/v6/dictionary", data.form).then(response => {
   		Tooltip(response)
   		nextTick(() => {
   			afterSubmit()
   		})
   	})
   }, constant.timeout)
   ```

6. 编辑信息功能

   ``` vue
   const baseEdit = (row) => {
     data.state.editDialog = true
     data.state.addStatus = false
     data.state.dialogTitle = constant.editTitle
     resetForm()
     data.form = Object.assign({}, row)
   }
   ...
   const updateSubmit = debounce(() => {
     patch("/v6/dictionary", data.form).then(response => {
       Tooltip(response)
       nextTick(() => {
         afterSubmit()
       })
     })
   }, constant.timeout)
   ```

7. 统一Notify，注意在工具方法内对应response格式的匹配性调整

   ``` vue
   import {Tooltip} from 'src/utils'
   ...
   Tooltip(response)
   ...
   ```

8. 常量使用

   ``` vue
   import {appConstant} from 'src/stores/constant'
   const constant = appConstant()
   ...
   pagination: constant.pagination,
   ...
   ```

9. axios使用

   ``` vue
   import {delById, get, patch, post} from 'src/api/Manage'
   ```

10. Dialog插件

    ``` vue
    import {Dialog} from 'quasar'
    Dialog.create({})
    ```

11. 防抖

    ``` vue
    import {debounce} from 'quasar'
    debounce(function(),constant.timeout)
    ```

12. 分页处理

    ``` vue
    <template v-slot:pagination>
      <vxe-pager align="left"
                 :current-page="data.init.pagination.currentPage"
                 @page-change="handlePageChange"
                 :page-size="data.init.pagination.pageSize"
                 :total="data.init.pagination.total"
                 :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
                 :page-sizes="[10,20,50]" size="mini">
      </vxe-pager>
    </template>
    ...
    pagination: Object.assign({}, constant.pagination),
    ...
    const handlePageChange = ({currentPage, pageSize}) => {
      data.init.pagination.currentPage = currentPage
      data.init.pagination.pageSize = pageSize
      baseInit()
    }
    ```

13. 模糊查询

    ``` vue
    watch(() => data.search.keyword, () => {
      data.init.pagination.currentPage = 1
      baseInit()
    })
    ```

14. 表格内容减少空白，使用q-td的auto-width

    ``` vue
    <template v-slot:body-cell-description="props">
      <q-td auto-width>
        {{ props.row.description }}
      </q-td>
    </template>
    ```

15. 表格头部固定

    ``` vue
    <q-table class="sticky-header-table ..." ...
    ```

16. quasar ext add @quasar/qiconpicker
    quasar ext remove @quasar/qiconpicker
17. Notify的使用与关闭触发方法onDismiss，可以避免不断的提醒
18. ref避免大屏设计中多个id冲突
19. json-bigint处理精度丢失问题（不用这个，统一使用字符串格式）
20. 页面显示文本保留格式：style="white-space: pre-wrap;"