refactor(system/storage): 重构存储管理页面，分页列表 => 无分页卡片

Author: Charles7c

src/apis/system/storage.ts

@@ -6,8 +6,8 @@ export type * from './type'
 const BASE_URL = '/system/storage'
 
 /** @desc 查询存储列表 */
-export function listStorage(query: T.StoragePageQuery) {
-  return http.get<PageRes<T.StorageResp[]>>(`${BASE_URL}`, query)
+export function listStorage(query: T.StorageQuery) {
+  return http.get<T.StorageResp[]>(`${BASE_URL}/list`, query)
 }
 
 /** @desc 查询存储详情 */
@@ -29,3 +29,13 @@ export function updateStorage(data: any, id: string) {
 export function deleteStorage(id: string) {
   return http.del(`${BASE_URL}/${id}`)
 }
+
+/** @desc 修改存储状态 */
+export function updateStorageStatus(data: any, id: string) {
+  return http.put(`${BASE_URL}/${id}/status`, data)
+}
+
+/** @desc 设置默认存储 */
+export function setDefaultStorage(id: string) {
+  return http.put(`${BASE_URL}/${id}/default`)
+}

src/apis/system/type.ts

@@ -253,11 +253,9 @@ export interface StorageResp {
 }
 export interface StorageQuery {
   description?: string
-  status?: number
+  type?: number
   sort: Array<string>
 }
-export interface StoragePageQuery extends StorageQuery, PageQuery {
-}
 
 /** 终端类型 */
 export interface ClientResp {

src/components/GiForm/src/GiForm.vue

@@ -142,9 +142,9 @@ const dicData: Record<string, any> = reactive({})
 const getComponentBindProps = (item: ColumnItem) => {
   // 组件默认配置映射表
   const ConfigMap = new Map<ColumnItem['type'], Partial<ColumnItem['props'] & { placeholder: string }>>([
-    ['input', { allowClear: true, placeholder: `请输入${item.label}`, maxLength: 255 }],
+    ['input', { allowClear: true, placeholder: `请输入${item.label}`, maxLength: 255, showWordLimit: true }],
     ['input-number', { placeholder: `请输入${item.label}` }],
-    ['textarea', { allowClear: false, placeholder: `请输入${item.label}`, maxLength: 200 }],
+    ['textarea', { allowClear: false, placeholder: `请输入${item.label}`, maxLength: 200, showWordLimit: true, autoSize: { minRows: 3, maxRows: 5 } }],
     ['input-tag', { allowClear: true, placeholder: `请输入${item.label}` }],
     ['mention', { allowClear: true, placeholder: `请输入${item.label}` }],
     ['select', { allowClear: true, placeholder: `请选择${item.label}`, options: dicData[item.field] || [] }],
@@ -169,7 +169,8 @@ const valueChange = (value: any, field: string) => {
 /** 表单项校验规则 */
 const getFormItemRules = (item: ColumnItem) => {
   if (item.required) {
-    return [{ required: true, message: `${item.label}为必填项` }, ...(Array.isArray(item.rules) ? item.rules : [])]
+    const defaultProps = getComponentBindProps(item)
+    return [{ required: true, message: defaultProps.placeholder || `请输入${item.label}` }, ...(Array.isArray(item.rules) ? item.rules : [])]
   }
   return item.rules
 }

src/styles/global.scss

@@ -213,16 +213,19 @@
 
 // 卡片标题，标题左侧的伪类样式
 .gi_card_title {
-  .arco-card-header-title::before {
-    content: '';
-    width: 4px;
-    height: 50%;
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    background-color: rgb(var(--warning-5));
-    border-radius: 0 4px 4px 0;
+  > .arco-card-header {
+    border-bottom: none;
+    .arco-card-header-title::before {
+      content: '';
+      width: 4px;
+      height: 50%;
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      background-color: rgb(var(--primary-5));
+      border-radius: 0 4px 4px 0;
+    }
   }
 }
 

src/views/system/config/index.vue

@@ -57,7 +57,12 @@ const change = (key: string | number) => {
 <style scoped lang="scss">
 .gi_table_page {
   overflow-y: auto;
+
+  :deep(.arco-tabs) {
+    overflow: visible;
+  }
 }
+
 :deep(.arco-tabs .arco-tabs-nav-type-card-gutter .arco-tabs-tab-active) {
   box-shadow: inset 0 2px 0 rgb(var(--primary-6)), inset -1px 0 0 var(--color-border-2),
   inset 1px 0 0 var(--color-border-2);
@@ -77,10 +82,6 @@ const change = (key: string | number) => {
   right: -20px;
 }
 
-:deep(.arco-tabs) {
-  overflow: visible;
-}
-
 :deep(.arco-tabs-nav) {
   overflow: visible;
 }