UI样式大优化

env/.env

@@ -22,7 +22,7 @@ VITE_UPLOAD_BASEURL__WEIXIN_TRIAL = ''
 VITE_UPLOAD_BASEURL__WEIXIN_RELEASE = ''
 
 # h5是否需要配置代理
-VITE_APP_PROXY=true
+VITE_APP_PROXY= true
 VITE_APP_PROXY_PREFIX = '/api'
 
 # 是否启用mock (1.仅支持h5 2.启用必须要开启代理，否则生效。)

src/common/uitls.ts

@@ -320,3 +320,12 @@ export function getRandomColor() {
 	let randomColorType = colorType[randomIndex];
 	return colorPanel['natural'][getRandomIntBetweenOneAndTen()] || '#00bcd4';
 }
+
+// 消除后缀：
+export const getPlaceholder = (attrs: any = {}) => {
+  let label = attrs.label
+  if (label.endsWith('：') || label.endsWith(':')) {
+    label = label.substr(0, label.length - 1)
+  }
+  return `请选择${label}`
+}

src/common/work.ts

@@ -18,7 +18,7 @@ export const us = {
       enabled: true,
     },
     {
-      title: 'demo',
+      title: '组件示例',
       icon: icon_prefix + 'chuchai.png',
       description: '出差申请',
       useCount: 10000,

src/components/CategorySelect/CategorySelect.vue

@@ -12,7 +12,7 @@
       <view class="content">
         <view class="operation">
           <view class="cancel text-gray-5" @click.stop="cancel">取消</view>
-          <view class="confrim text-blue-5" @click.stop="confirm">确定</view>
+          <view class="confrim" @click.stop="confirm">确定</view>
         </view>
         <scroll-view class="flex-1" scroll-y>
           <DaTree
@@ -228,6 +228,16 @@ watch(
     justify-content: space-between;
     line-height: 40px;
     padding: 0 5px;
+    position: relative;
+    &::before {
+      content: ' ';
+      position: absolute;
+      bottom: 0;
+      left: 8px;
+      right: 8px;
+      height: 1px;
+      background-color: #e5e5e5;
+    }
     .cancel,
     .confrim {
       font-size: 15px;
@@ -235,6 +245,9 @@ watch(
       min-width: 40px;
       text-align: center;
     }
+    .confrim {
+      color: var(--wot-color-theme);
+    }
   }
   :deep(.da-tree) {
     .da-tree-item__checkbox {

src/components/Grid/Grid.vue

@@ -0,0 +1,100 @@
+<template>
+  <view
+    class="wrap"
+    :style="{
+      '--borderColor': borderColor,
+      '--imgWidth': imgWidth,
+      '--imgHeight': imgHeight,
+    }"
+  >
+    <wd-grid :clickable="clickable" :column="column">
+      <template v-for="(item, index) in modelValue" :key="item[itemKey]">
+        <wd-grid-item
+          :custom-class="getClass(index)"
+          use-icon-slot
+          :text="item.text"
+          @itemclick="handleClik(item, index)"
+        >
+          <template #icon>
+            <wd-img :width="imgWidth" :height="imgHeight" :src="item.img"></wd-img>
+          </template>
+        </wd-grid-item>
+      </template>
+    </wd-grid>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+defineOptions({
+  name: 'Grid',
+  options: {
+    styleIsolation: 'shared',
+  },
+})
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
+  column: {
+    type: Number,
+    default: 4,
+  },
+  itemKey: {
+    type: String,
+    default: 'id',
+  },
+  imgWidth: {
+    type: String,
+    default: '28px',
+  },
+  imgHeight: {
+    type: String,
+    default: '28px',
+  },
+  clickable: {
+    type: Boolean,
+    default: true,
+  },
+  borderColor: {
+    type: String,
+    default: 'rgba(165, 165, 165, 0.1)',
+  },
+})
+const emit = defineEmits(['itemClik'])
+const getClass = (index) => {
+  let className = ''
+  if (index < props.column) {
+    className = 'first-row'
+  }
+  if ((index + 1) % props.column == 0) {
+    className += ` lastCol`
+  }
+  return className
+}
+const handleClik = (item, index) => {
+  emit('itemClik', item, index)
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.wd-grid-item) {
+  box-sizing: border-box;
+  border-right: 1px solid var(--borderColor, rgba(165, 165, 165, 0.1));
+  border-bottom: 1px solid var(--borderColor, rgba(165, 165, 165, 0.1));
+  &.first-row {
+    border-top: 1px solid var(--borderColor, rgba(165, 165, 165, 0.1));
+  }
+  &.lastCol {
+    border-right: none;
+  }
+  .wd-grid-item__text {
+    margin-top: 10px;
+  }
+  .wd-grid-item__wrapper {
+    width: var(--imgWidth, 28px) !important;
+    height: var(--imgHeight, 28px) !important;
+  }
+}
+</style>

src/components/PageLayout/PageLayout.vue

@@ -24,6 +24,7 @@
     <view class="pageContent">
       <slot></slot>
     </view>
+    <view class="tabbar"></view>
     <wd-toast></wd-toast>
     <wd-message-box></wd-message-box>
     <wd-notify></wd-notify>
@@ -170,9 +171,10 @@ console.log('props:', props)
     }
     :deep(.wd-navbar) {
       background-color: transparent;
+      --wot-navbar-title-font-weight: 400;
       --wot-navbar-arrow-size: 18px;
       --wot-navbar-desc-font-size: 14px;
-      --wot-navbar-title-font-size: 14px;
+      --wot-navbar-title-font-size: 16px;
     }
   }
   .pageContent {
@@ -182,5 +184,10 @@ console.log('props:', props)
     flex-direction: column;
     background-color: #f1f1f1;
   }
+  .tabbar {
+    /* #ifdef H5 */
+	 height: var(--window-bottom);
+    /* #endif */
+  }
 }
 </style>

src/components/SelectDept/SelectDept.vue

@@ -2,7 +2,7 @@
   <view class="CategorySelect">
     <view @click="handleClick">
       <wd-input
-        :placeholder="`请选择${$attrs.label}`"
+        :placeholder="getPlaceholder($attrs)"
         v-bind="$attrs"
         v-model="showText"
         clearable
@@ -13,7 +13,7 @@
       <view class="content">
         <view class="operation">
           <view class="cancel text-gray-5" @click.stop="cancel">取消</view>
-          <view class="confrim text-blue-5" @click.stop="confirm">确定</view>
+          <view class="confrim" @click.stop="confirm">确定</view>
         </view>
         <scroll-view class="flex-1" scroll-y>
           <DaTree
@@ -39,6 +39,7 @@ import { useToast, useMessage, useNotify, dayjs } from 'wot-design-uni'
 import { http } from '@/utils/http'
 import DaTree from '@/uni_modules/da-tree/index.vue'
 import { isArray } from '@/utils/is'
+import { getPlaceholder } from '@/common/uitls'
 defineOptions({
   name: 'SelectDept',
 })
@@ -166,10 +167,10 @@ function loadRoot() {
 // 翻译input内的值
 function loadItemByCode() {
   let value = props.modelValue
-  console.log("部门组件翻译props.modelValue",props.modelValue)
+  console.log('部门组件翻译props.modelValue', props.modelValue)
   if (isArray(props.modelValue)) {
     // @ts-ignore
-    value = value.join(",")
+    value = value.join(',')
   }
   if (value === treeData.value.map((item) => item.key).join(',')) {
     // 说明是刚选完，内部已有翻译。不需要再请求
@@ -220,6 +221,16 @@ watch(
     justify-content: space-between;
     line-height: 40px;
     padding: 0 5px;
+    position: relative;
+    &::before {
+      content: ' ';
+      position: absolute;
+      bottom: 0;
+      left: 8px;
+      right: 8px;
+      height: 1px;
+      background-color: #e5e5e5;
+    }
     .cancel,
     .confrim {
       font-size: 15px;
@@ -227,6 +238,9 @@ watch(
       min-width: 40px;
       text-align: center;
     }
+    .confrim {
+      color: var(--wot-color-theme);
+    }
   }
   :deep(.da-tree) {
     .da-tree-item__checkbox {

src/components/SelectUser/SelectUser.vue

@@ -2,7 +2,7 @@
   <view class="SelectUser">
     <view @click.stop="handleClick">
       <wd-input
-        :placeholder="`请选择${$attrs.label}`"
+        :placeholder="getPlaceholder($attrs)"
         v-bind="$attrs"
         readonly
         v-model="showText"
@@ -27,11 +27,12 @@ import { http } from '@/utils/http'
 import DaTree from '@/uni_modules/da-tree/index.vue'
 import { isArray, isString } from '@/utils/is'
 import SelectUserModal from './components/SelectUserModal.vue'
+import { getPlaceholder } from '@/common/uitls'
 defineOptions({
   name: 'SelectUser',
   options: {
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 })
 const props = defineProps({
   modelValue: {
@@ -52,7 +53,7 @@ const props = defineProps({
   },
   modalTitle: {
     type: String,
-    default: '',
+    default: '选择用户',
   },
   maxSelectCount: {
     type: Number,
@@ -103,6 +104,7 @@ const handleChange = (data) => {
   emit('update:modelValue', rowkey)
   emit('change', rowkey)
 }
+
 watch(
   () => props.modelValue,
   () => {

src/components/SelectUser/components/SelectUserModal.vue

@@ -100,7 +100,7 @@ const props = defineProps({
   },
   modalTitle: {
     type: String,
-    default: '',
+    default: '选择用户',
   },
   maxSelectCount: {
     type: Number,
@@ -274,4 +274,9 @@ init()
 .wrap {
   height: 100%;
 }
+:deep(.wd-popup-wrapper) {
+  .wd-popup {
+    top: 100px;
+  }
+}
 </style>

src/components/TreeSelect/TreeSelect.vue

@@ -12,7 +12,7 @@
       <view class="content">
         <view class="operation">
           <view class="cancel text-gray-5" @click.stop="cancel">取消</view>
-          <view class="confrim text-blue-5" @click.stop="confirm">确定</view>
+          <view class="confrim" @click.stop="confirm">确定</view>
         </view>
         <scroll-view class="flex-1" scroll-y>
           <DaTree
@@ -41,8 +41,8 @@ import { isArray } from '@/utils/is'
 defineOptions({
   name: 'TreeSelect',
   options: {
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 })
 const props = defineProps({
   modelValue: {
@@ -316,6 +316,16 @@ validateProp().then(() => {
     justify-content: space-between;
     line-height: 40px;
     padding: 0 5px;
+    position: relative;
+    &::before {
+      content: ' ';
+      position: absolute;
+      bottom: 0;
+      left: 8px;
+      right: 8px;
+      height: 1px;
+      background-color: #e5e5e5;
+    }
     .cancel,
     .confrim {
       font-size: 15px;
@@ -323,6 +333,9 @@ validateProp().then(() => {
       min-width: 40px;
       text-align: center;
     }
+    .confrim {
+      color: var(--wot-color-theme);
+    }
   }
   :deep(.da-tree) {
     .da-tree-item__checkbox {

src/components/online/online-loader.vue

@@ -3,13 +3,18 @@
     <view class="form-container">
       <wd-form ref="form" :model="formData">
         <wd-cell-group border>
-          <template v-for="(item, index) in rootProperties" :key="index">
+          <view
+            class="onlineLoader-form"
+            v-for="(item, index) in rootProperties"
+            :key="index"
+            :class="{ 'mt-14px': index % 2 == 0 }"
+          >
             <!-- 图片 -->
             <wd-cell
               v-if="item.type == 'image'"
               :name="item.key"
-              :title="item.label"
-              title-width="80px"
+              :title="get4Label(item.label)"
+              :title-width="labelWidth"
               :required="fieldRequired(item)"
             >
               <online-image
@@ -24,8 +29,8 @@
             <wd-cell
               v-else-if="item.type == 'file'"
               :name="item.key"
-              :title="item.label"
-              title-width="80px"
+              :title="get4Label(item.label)"
+              :title-width="labelWidth"
               :required="fieldRequired(item)"
             >
               <online-image
@@ -40,7 +45,8 @@
             <!-- 日期时间 -->
             <online-datetime
               v-else-if="item.type === 'datetime'"
-              :label="item.label"
+              :label="get4Label(item.label)"
+              :labelWidth="labelWidth"
               :name="item.key"
               :disabled="componentDisabled(item)"
               v-model:value="formData[item.key]"
@@ -50,7 +56,8 @@
             <!-- 日期 -->
             <online-date
               v-else-if="item.type === 'date'"
-              :label="item.label"
+              :label="get4Label(item.label)"
+              :labelWidth="labelWidth"
               :name="item.key"
               :type="getDateExtendType(item.formSchema)"
               :disabled="componentDisabled(item)"
@@ -61,7 +68,8 @@
             <!-- 时间 -->
             <online-time
               v-else-if="item.type === 'time'"
-              :label="item.label"
+              :label="get4Label(item.label)"
+              :labelWidth="labelWidth"
               :name="item.key"
               :disabled="componentDisabled(item)"
               v-model:value="formData[item.key]"
@@ -71,7 +79,8 @@
             <!-- 下拉选择 -->
             <online-select
               v-else-if="item.type === 'list' || item.type === 'sel_search'"
-              :label="item.label"
+              :label="get4Label(item.label)"
+              :labelWidth="labelWidth"
               :name="item.key"
               :type="item.type"
               :dict="item.listSource"
@@ -86,7 +95,8 @@
               v-else-if="item.type === 'checkbox'"
               :name="item.key"
               :type="item.type"
-              :label="item.label"
+              :label="get4Label(item.label)"
+              :labelWidth="labelWidth"
               :dict="item.listSource"
               :disabled="componentDisabled(item)"
               :required="fieldRequired(item)"
@@ -97,7 +107,8 @@
             <online-radio
               v-else-if="item.type === 'radio'"
               :name="item.key"
-              :label="item.label"
+              :label="get4Label(item.label)"
+              :labelWidth="labelWidth"
               :type="item.type"
               :dict="item.listSource"
               :disabled="componentDisabled(item)"
@@ -108,7 +119,8 @@
             <!-- 下拉多选  -->
             <online-multi
               v-else-if="item.type === 'list_multi'"
-              :label="item.label"
+              :label="get4Label(item.label)"
+              :labelWidth="labelWidth"
               :name="item.key"
               :dict="item.listSource"
               :disabled="componentDisabled(item)"
@@ -118,20 +130,21 @@
 
             <!-- 省市区   -->
             <online-pca
-                v-else-if="item.type==='pca'"
-                :name="item.key"
-                :label="item.label"
-                :disabled="componentDisabled(item)"
-                :required="fieldRequired(item)"
-                v-model:value="formData[item.key]">
-            </online-pca>
+              v-else-if="item.type === 'pca'"
+              :name="item.key"
+              :label="get4Label(item.label)"
+              :labelWidth="labelWidth"
+              :disabled="componentDisabled(item)"
+              :required="fieldRequired(item)"
+              v-model:value="formData[item.key]"
+            ></online-pca>
 
             <!-- 数字框 小数 -->
             <wd-input
               v-else-if="item.type === 'number' && (!item.onlyInteger || item.onlyInteger == false)"
-              label-width="80px"
+              :label-width="labelWidth"
               v-model="formData[item.key]"
-              :label="item.label"
+              :label="get4Label(item.label)"
               :name="item.key"
               inputMode="decimal"
               :disabled="componentDisabled(item)"
@@ -142,8 +155,8 @@
             <!-- 数字框 整数 -->
             <wd-input
               v-else-if="item.type === 'number' && item.onlyInteger === true"
-              label-width="80px"
-              :label="item.label"
+              :label-width="labelWidth"
+              :label="get4Label(item.label)"
               :name="item.key"
               v-model="formData[item.key]"
               inputMode="numeric"
@@ -156,15 +169,16 @@
             <wd-cell
               v-else-if="item.type == 'switch'"
               :name="item.key"
-              :title="item.label"
-              title-width="80px"
+              :title="get4Label(item.label)"
+              :title-width="labelWidth"
               center
               :required="fieldRequired(item)"
             >
               <view style="text-align: left">
                 <wd-switch
-                  :label="item.label"
+                  :label="get4Label(item.label)"
                   :name="item.key"
+                  size="18px"
                   :disabled="componentDisabled(item)"
                   v-model="formData[item.key]"
                   :active-value="switchOpt(item.formSchema?.extendOption, 0)"
@@ -176,12 +190,12 @@
             <!-- 多行文本 -->
             <wd-textarea
               v-else-if="['textarea', 'markdown', 'umeditor'].includes(item.type)"
-              label-width="80px"
-              :label="item.label"
+              :label-width="labelWidth"
+              :label="get4Label(item.label)"
               :name="item.key"
               v-model="formData[item.key]"
-              auto-height
-              :maxlength="500"
+              clearable
+              :maxlength="300"
               :disabled="componentDisabled(item)"
               :placeholder="item.placeholder"
               :rules="item.rules"
@@ -189,21 +203,20 @@
             <!-- 密码输入框 -->
             <wd-input
               v-else-if="item.type === 'password'"
-              label-width="80px"
+              :label-width="labelWidth"
               v-model="formData[item.key]"
               :disabled="componentDisabled(item)"
-              :label="item.label"
+              :label="get4Label(item.label)"
               :name="item.key"
               :placeholder="item.placeholder"
               :rules="item.rules"
-              clearable
               show-password
             />
             <!-- popup字典 -->
             <PopupDict
               v-else-if="item.type === 'popup_dict'"
-              label-width="80px"
-              :label="item.label"
+              :label-width="labelWidth"
+              :label="get4Label(item.label)"
               :disabled="componentDisabled(item)"
               :required="fieldRequired(item)"
               v-model="formData[item.key]"
@@ -213,8 +226,8 @@
             <!-- popup -->
             <Popup
               v-else-if="item.type === 'popup'"
-              label-width="80px"
-              :label="item.label"
+              :label-width="labelWidth"
+              :label="get4Label(item.label)"
               :disabled="componentDisabled(item)"
               :required="fieldRequired(item)"
               v-model="formData[item.key]"
@@ -225,53 +238,52 @@
             ></Popup>
             <!-- 关联记录 -->
             <online-popup-link-record
-                v-else-if="item.type==='link_table'"
-                label-width="80px"
-                :label="item.label"
-                :name="item.key"
-                v-model:formSchema="item.formSchema"
-                :disabled="componentDisabled(item)"
-                :required="fieldRequired(item)"
-                v-model:value="formData[item.key]"
-                @selected="linkRecordChange"
-            >
-            </online-popup-link-record>
+              v-else-if="item.type === 'link_table'"
+              :label-width="labelWidth"
+              :label="get4Label(item.label)"
+              :name="item.key"
+              v-model:formSchema="item.formSchema"
+              :disabled="componentDisabled(item)"
+              :required="fieldRequired(item)"
+              v-model:value="formData[item.key]"
+              @selected="linkRecordChange"
+            ></online-popup-link-record>
             <!-- 他表字段 -->
             <wd-input
-              v-else-if="item.type==='link_table_field'"
-              label-width="80px"
+              v-else-if="item.type === 'link_table_field'"
+              :label-width="labelWidth"
               v-model="formData[item.key]"
               :disabled="true"
-              :label="item.label"
+              :label="get4Label(item.label)"
               :name="item.key"
             />
             <!-- 用户选择   -->
             <select-user
-                v-else-if="item.type==='sel_user'"
-                label-width="80px"
-                :name="item.key"
-                :label="item.label"
-                :disabled="componentDisabled(item)"
-                :required="fieldRequired(item)"
-                v-model="formData[item.key]">
-            </select-user>
+              v-else-if="item.type === 'sel_user'"
+              :label-width="labelWidth"
+              :name="item.key"
+              :label="get4Label(item.label)"
+              :disabled="componentDisabled(item)"
+              :required="fieldRequired(item)"
+              v-model="formData[item.key]"
+            ></select-user>
 
             <!-- 部门选择   -->
             <select-dept
-                v-else-if="item.type==='sel_depart'"
-                label-width="80px"
-                :name="item.key"
-                :label="item.label"
-                labelKey="departName"
-                :disabled="componentDisabled(item)"
-                :required="fieldRequired(item)"
-                v-model="formData[item.key]">
-            </select-dept>
+              v-else-if="item.type === 'sel_depart'"
+              :label-width="labelWidth"
+              :name="item.key"
+              :label="get4Label(item.label)"
+              labelKey="departName"
+              :disabled="componentDisabled(item)"
+              :required="fieldRequired(item)"
+              v-model="formData[item.key]"
+            ></select-dept>
             <!-- 分类字典树 -->
             <CategorySelect
               v-else-if="item.type === 'cat_tree'"
-              label-width="80px"
-              :label="item.label"
+              :label-width="labelWidth"
+              :label="get4Label(item.label)"
               :disabled="componentDisabled(item)"
               :required="fieldRequired(item)"
               v-model="formData[item.key]"
@@ -280,8 +292,8 @@
             <!-- 自定义树 -->
             <TreeSelect
               v-else-if="item.type === 'sel_tree'"
-              label-width="80px"
-              :label="item.label"
+              :label-width="labelWidth"
+              :label="get4Label(item.label)"
               :disabled="componentDisabled(item)"
               :required="fieldRequired(item)"
               v-model="formData[item.key]"
@@ -293,16 +305,16 @@
             <!-- 普通输入框 -->
             <wd-input
               v-else
-              label-width="80px"
+              :label-width="labelWidth"
               v-model="formData[item.key]"
               :disabled="componentDisabled(item)"
-              :label="item.label"
+              :label="get4Label(item.label)"
               :name="item.key"
               :placeholder="item.placeholder"
               :rules="item.rules"
               clearable
             />
-          </template>
+          </view>
         </wd-cell-group>
       </wd-form>
     </view>
@@ -435,6 +447,16 @@ const navTitle = computed(() => {
     return props.title
   }
 })
+// 标题宽度
+const labelWidth = computed(() => {
+  return '100px'
+})
+// 导航标题
+const get4Label = computed(() => {
+  return (lable) => {
+    return `${lable && lable.length > 4 ? lable.substring(0, 4) : lable}：`
+  }
+})
 
 onMounted(() => {
   console.log('开始渲染online表单')
@@ -478,7 +500,7 @@ const isChecked = (opts: any, value: any) => {
  */
 const switchOpt = (opts: any, index: any) => {
   const options = Array.isArray(opts) && opts.length > 0 ? opts : ['Y', 'N']
-  return options[index]+''
+  return options[index] + ''
 }
 /**
  *
@@ -505,12 +527,14 @@ const fieldRequired = (item: any) => {
  * @param linkRecord
  * @param key
  */
-const linkRecordChange = (linkRecord,key) =>{
-  let linkFieldArr = rootProperties.value.filter(item=>item.type==='link_table_field' && item?.formSchema?.dictTable == key);
-  linkFieldArr.forEach(field=>{
-    let value = linkRecord.map(record=>record[field.formSchema.dictText]).join(",");
-    nextTick(()=>{
-      formData.value[field.key] = value;
+const linkRecordChange = (linkRecord, key) => {
+  let linkFieldArr = rootProperties.value.filter(
+    (item) => item.type === 'link_table_field' && item?.formSchema?.dictTable == key,
+  )
+  linkFieldArr.forEach((field) => {
+    let value = linkRecord.map((record) => record[field.formSchema.dictText]).join(',')
+    nextTick(() => {
+      formData.value[field.key] = value
     })
   })
 }
@@ -526,17 +550,19 @@ const backRoute = () => {
  * @param value
  */
 function handleMultiOrDateField() {
-  let finalData = deepClone(formData.value);
+  let finalData = deepClone(formData.value)
   //日期字段
-  let dateFieldArr = rootProperties.value.filter((item) => item.type === 'date' || item.type === 'datetime')
+  let dateFieldArr = rootProperties.value.filter(
+    (item) => item.type === 'date' || item.type === 'datetime',
+  )
   //省市区字段
   let pcaArr = rootProperties.value.filter((item) => item.type === 'pca')
   finalData = Object.keys(finalData).reduce((acc, key) => {
     let value = finalData[key]
     //省市区获取最后一位
-    if (value && pcaArr.length > 0 && pcaArr.map(item=>item.key).includes(key)) {
-      console.log("省市区获取最后一位value",value)
-      value = isArray(value)?value[2]:value.split(",")[2];
+    if (value && pcaArr.length > 0 && pcaArr.map((item) => item.key).includes(key)) {
+      console.log('省市区获取最后一位value', value)
+      value = isArray(value) ? value[2] : value.split(',')[2]
     }
     //是数组的就转换成字符串
     if (value && isArray(value)) {
@@ -842,19 +868,47 @@ defineExpose({
 <style lang="scss" scoped>
 .onlineLoader-container {
   .form-container {
+    :deep(.wd-cell-group__body){
+      background: #F1F1F1;
+    }
+    .onlineLoader-form{
+      :deep(.wd-input__label-inner){
+        font-size: 16px;
+      }
+      :deep(.wd-picker__label){
+        font-size: 16px;
+      }
+      :deep(.wd-select-picker__label){
+        font-size: 16px;
+      }
+      :deep(.wd-cell__title){
+        font-size: 16px;
+      }
+      :deep(.wd-textarea__label-inner){
+        font-size: 16px;
+      }
+      :deep(.wd-input__label.is-required){
+         padding-left: 0px;
+       }
+      :deep(.wd-input__label.is-required::after){
+        left: -10px;
+      }
+      :deep(.wd-textarea__clear){
+        color: #bfbfbf;
+      }
+      :deep(.wd-select-picker__clear){
+        color: #bfbfbf;
+      }
+      :deep(.wd-input__clear){
+        color: #bfbfbf;
+      }
+      :deep(.wd-upload__close){
+        color: #bfbfbf;
+      }
+    }
   }
   .footer {
     padding: 12px;
-    //position: fixed;
-    //bottom: 0;
-    //width: 100%;
-  }
-  :deep(.label-class) {
-    color: #999 !important;
-    font-size: 12px !important;
-  }
-  :deep(.uni-input-input:disabled) {
-    -webkit-text-fill-color: #000 !important;
   }
 }
 </style>

src/components/online/view/online-time.vue

@@ -39,7 +39,6 @@ const props = defineProps({
 // 定义 emits
 const emit = defineEmits(['input', 'change', 'update:value'])
 // 定义响应式数据;
-const visible = ref(false)
 const currentTime = ref('')
 
 // 监听 value 的变化

src/pages-message/contacts/contacts.vue

@@ -230,6 +230,7 @@ onLoad(() => {
   border-radius: 50%;
   overflow: hidden;
   margin-right: 10px;
+  background-color: #eee;
 }
 .content {
   display: flex;

src/pages-sub/online/online.vue

@@ -31,7 +31,10 @@
           <template v-if="item.tableType != 3">
             <wd-swipe-action>
               <view class="list" @click="handleGo(item)">
-                <view class="cIcon" :style="{ 'background-color': getRandomColor() }">
+                <view
+                  class="cIcon"
+                  :style="{ 'background-color': getBackgroundColor(item, index) }"
+                >
                   <view class="u-iconfont u-icon-table"></view>
                 </view>
                 <view class="tableTxt ellipsis">{{ item.tableTxt }}</view>
@@ -73,6 +76,7 @@ const paramsStore = useParamsStore()
 const paging = ref(null)
 const dataList: any = ref([])
 const keyword = ref('')
+const itemBgColor = []
 // 接口拿到的数据处理之后的
 
 const handleGo = (item) => {
@@ -168,6 +172,12 @@ const getType = (record) => {
   // }
   return tbTypeText
 }
+const getBackgroundColor = (item, index) => {
+  return itemBgColor[index % itemBgColor.length]
+}
+for (let i = 0; i < 50; i++) {
+  itemBgColor.push(getRandomColor())
+}
 </script>
 
 <style lang="scss" scoped>
@@ -207,7 +217,7 @@ const getType = (record) => {
   }
   .createTime {
     text-align: right;
-    width: 70px;
+    width: 75px;
     font-size: 12px;
     color: #919191;
   }

src/pages-sub/online/onlineCard.vue

@@ -22,8 +22,8 @@
             <view class="list" @click="handleEdit(item)">
               <template v-for="(cItem, cIndex) in columns" :key="index">
                 <view v-if="cIndex < 3" class="box" :style="getBoxStyle">
-                  <view class="field">{{ cItem['title'] }}</view>
-                  <view class="value">
+                  <view class="field ellipsis">{{ cItem['title'] }}</view>
+                  <view class="value text-grey">
                     <onlineTableCell
                       :columnsInfo="columnsInfo"
                       :record="item"
@@ -152,7 +152,7 @@ const getData = () => {
 }
 const handleAction = (val, item) => {
   if (val == 'del') {
-    http.get(`/online/cgform/api/form/${pageParams.id}/${item.id}`).then((res) => {
+    http.delete(`/online/cgform/api/form/${pageParams.id}/${item.id}`).then((res) => {
       toast.success('删除成功~')
       paging.value.reload()
     })
@@ -219,6 +219,7 @@ onMounted(() => {
     width: 33%;
     .field {
       margin-bottom: 10px;
+      line-height: 20px;
     }
   }
 }
@@ -255,6 +256,7 @@ onMounted(() => {
   bottom: 80upx;
   right: 30upx;
   box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
+  color: #666;
 }
 .goTable {
   bottom: 180upx;

src/pages-sub/online/onlineTable.vue

@@ -186,7 +186,6 @@ const handleChange = ({ option, data }) => {
   if (option.key === 'edit') {
     handleEdit(data)
   } else if (option.key === 'delete') {
-
     uni.showModal({
       title: '提示',
       content: '确定要删除吗？',
@@ -194,7 +193,7 @@ const handleChange = ({ option, data }) => {
       confirmText: '确定',
       success: (res) => {
         if (res.confirm) {
-          http.get(`/online/cgform/api/form/${pageParams.id}/${data.id}`).then((res) => {
+          http.delete(`/online/cgform/api/form/${pageParams.id}/${data.id}`).then((res) => {
             toast.success('删除成功~')
             getData()
           })
@@ -204,7 +203,7 @@ const handleChange = ({ option, data }) => {
         console.log(err)
       },
     })
-  }else if (option.key === 'detail') {
+  } else if (option.key === 'detail') {
     handleView(data)
   }
 }
@@ -240,6 +239,7 @@ onMounted(() => {
   bottom: 80upx;
   right: 30upx;
   box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
+  color: #666;
 }
 :deep(.wd-table__content) {
   .wot-theme-light {
@@ -247,4 +247,11 @@ onMounted(() => {
     // height: 100%;
   }
 }
+
+:deep(.wd-table) {
+  --wot-table-font-size: 14px;
+  .wd-table__body {
+    --wot-table-color: var(--color-gray);
+  }
+}
 </style>

src/pages-work/components/hooks/useEchart.ts

@@ -76,6 +76,7 @@ export default function useChartHook(props, initOption?, echarts?) {
       if (config.dataSetId && config.dataSetType == 'api' && config.dataSetIzAgent !== '1') {
         //不走代理直接请求接口  url参数处理
         let { url, dataMap } = handleParam(config)
+        //TODO 联动钻取处理
         let linkParams = {}
         queryParams = Object.assign({}, dataMap, queryParams, linkParams)
         if (url.startsWith('#{api_base_path}') || url.startsWith('{{ domainURL }}')) {
@@ -96,6 +97,14 @@ export default function useChartHook(props, initOption?, echarts?) {
             getDataCallBack()
           })
         }
+      }else if (config.dataSetType == 'websocket'){
+
+      }else {
+        let { dataMap } = handleParam(config)
+        //TODO 联动钻取处理
+        let linkParams = {}
+        queryParams = Object.assign({}, dataMap, queryParams, linkParams)
+        getAgentData(queryParams,config);
       }
     } else if (config.dataType == 4) {
       //查询配置

src/pages-work/dragPage/index.vue

@@ -12,7 +12,7 @@
 <PageLayout :navTitle="title">
  <scroll-view class="scroll-area" :scroll-y="true" :scroll-with-animation="scrollAnimation" :scroll-top="scrollTop" :scroll-into-view="scrollToView">
 	<view v-for="(item,index) in dragData.compsData" :key="index">
-	  <view class="mt-4 " :class="[dragData.style=='bigScreen'?'bg-black':'bg-white']" :id="'drag'+item.i" :style="[getStyle(item.component)]">
+	  <view class="mt-4 " :class="[dragData.style=='bigScreen'?'bg-white':'bg-white']" :id="'drag'+item.i" :style="[getStyle(item.component)]">
 			<template v-if="compList.includes(item.component)">
 				<!-- #ifdef APP-PLUS || H5 -->
 				<component

src/pages/annotation/annotationDetail.vue

@@ -23,11 +23,11 @@
       </view>
       <view class="flex">
         <wd-text
-          custom-class="icon cuIcon-attentionfill mr-10px"
+          custom-class="cIcon cuIcon-attentionfill mr-10px"
           text="10"
           @click="numberPlus"
         ></wd-text>
-        <wd-text class="icon cuIcon-appreciatefill" text="20" @click="numberPlus"></wd-text>
+        <wd-text class="cIcon cuIcon-appreciatefill" text="20" @click="numberPlus"></wd-text>
       </view>
     </view>
   </PageLayout>
@@ -79,15 +79,16 @@ onLoad((option) => {
 
 <style lang="scss" scoped>
 //
-.title {
-  --wot-text-info-color: #333;
-  margin-bottom: 10px;
-}
-.wd-text {
-  &.icon {
+:deep(.wd-text) {
+   --wot-text-info-color: var(--color-grey);
+  &.cIcon {
     &::before {
       margin-right: 4px;
     }
   }
 }
+.title {
+  --wot-text-info-color: #333;
+  margin-bottom: 10px;
+}
 </style>

src/pages/demo/demo.vue

@@ -9,28 +9,28 @@
 </route>
 
 <template>
-  <PageLayout backRouteName="index" routeMethod="pushTab">
+  <PageLayout backRouteName="index" navTitle="组件示例" routeMethod="pushTab">
     <scroll-view scroll-y>
-      <view class="box">
+      <view class="box shadow-warp">
         <div class="content">
-          <SelectUser label="用户" :required="true" v-model="user"></SelectUser>
+          <SelectUser label="用户：" :required="true" v-model="user"></SelectUser>
         </div>
       </view>
-      <view class="box">
+      <view class="box shadow-warp">
         <div class="content">
-          <SelectDept label="部门" :required="true" v-model="dept"></SelectDept>
+          <SelectDept label="部门：" :required="true" v-model="dept"></SelectDept>
         </div>
       </view>
-      <view class="box">
+      <view class="box shadow-warp">
         <div class="content">
-          <view class="title mb-2">流程进度图组件</view>
+          <!-- <view class="title mb-2">流程进度图组件</view> -->
           <ProgressMap title="流程历史跟踪" :dataSource="proDataSource"></ProgressMap>
         </div>
       </view>
-      <view class="box" v-for="(item, index) in dataSource">
+      <view class="box shadow-warp" v-for="(item, index) in dataSource">
         <view class="content">
           <template v-if="index === 0">
-            <view class="title">万年历组件</view>
+            <!-- <view class="title">万年历组件</view> -->
             <uni-calendar
               :showMonth="true"
               @change="change"
@@ -42,6 +42,7 @@
             <view class="title">{{ item.title }}</view>
             <template v-if="['图片预览'].includes(item.title)">
               <wd-img
+                custom-class="imgView"
                 :width="220"
                 :height="120"
                 src="https://jeecgos.oss-cn-beijing.aliyuncs.com/files/site/projectCase/mini/banner/10bdc1.jpg"
@@ -57,42 +58,39 @@
           </template>
         </view>
       </view>
-      <view class="box gridBox">
-        <view class="content">
-          <view class="title">九宫格</view>
-          <wd-grid :column="3">
-            <wd-grid-item icon="picture" text="文字" />
-            <wd-grid-item icon="picture" text="文字" />
-            <wd-grid-item icon="picture" text="文字" />
-            <wd-grid-item icon="picture" text="文字" />
-            <wd-grid-item icon="picture" text="文字" />
-            <wd-grid-item icon="picture" text="文字" />
-            <wd-grid-item icon="picture" text="文字" />
-            <wd-grid-item icon="picture" text="文字" />
-            <wd-grid-item icon="picture" text="文字" />
-          </wd-grid>
-        </view>
+      <view class="box router shadow-warp">
+        <wd-button @click="handleSkip('/pages/demo/tree')">树组件</wd-button>
+        <wd-button @click="handleSkip('/pages/demo/indexBar')">通讯录</wd-button>
+        <wd-button @click="handleSkip('/pages/demo/selectPicker')">单选多选</wd-button>
+        <wd-button @click="handleSkip('/pages/demo/form')">表单</wd-button>
       </view>
-      <view class="box">
+      <view class="box gridBox shadow-warp">
         <view class="content">
-          <view class="title">列表</view>
-          <wd-cell-group border clickable>
-            <wd-cell title="组织管理" is-link icon="computer"></wd-cell>
-            <wd-cell title="安全设置" is-link icon="setting"></wd-cell>
-            <wd-cell title="个人设置" is-link icon="user"></wd-cell>
-            <wd-cell title="退出登录" is-link icon="email"></wd-cell>
-          </wd-cell-group>
+          <!-- <view class="title">九宫格</view> -->
+          <Grid
+            v-model="gridData"
+            :column="3"
+            @itemClik="(item) => toast.info(`点击了${item.text}`)"
+          ></Grid>
         </view>
       </view>
-      <view class="box">
+      <wd-cell-group border clickable custom-class="shadow-warp">
+        <wd-cell title="组织管理" is-link icon="computer"></wd-cell>
+        <wd-cell title="安全设置" is-link icon="setting"></wd-cell>
+        <wd-cell title="个人设置" is-link icon="user"></wd-cell>
+        <wd-cell title="退出登录" is-link icon="login"></wd-cell>
+      </wd-cell-group>
+      <view class="box shadow-warp p-3">
         <view class="content">
-          <view class="title">提示</view>
+          <!-- <view class="title">提示</view> -->
           <view class="flex flex-col">
-            <wd-button custom-class="mb-2" @click="handleToast(0)">常规</wd-button>
-            <wd-button custom-class="mb-2" @click="handleToast(1)">警告</wd-button>
-            <wd-button custom-class="mb-2" @click="handleToast(2)">成功</wd-button>
-            <wd-button custom-class="mb-2" @click="handleToast(3)">错误</wd-button>
-            <wd-button custom-class="mb-2" @click="handleToast(4)">错误</wd-button>
+            <wd-button custom-class="mb-2 info" @click="handleToast(0)">常规</wd-button>
+            <wd-button custom-class="mb-2 warning" @click="handleToast(1)">警告</wd-button>
+            <wd-button custom-class="mb-2 success" @click="handleToast(2)">成功</wd-button>
+            <wd-button custom-class="mb-2 error" @click="handleToast(3)">错误</wd-button>
+            <wd-button custom-class="mb-2 basic" @click="handleToast(4)">
+              基本用法(无icon)
+            </wd-button>
             <wd-button @click="handleConfirm">确认提示</wd-button>
           </view>
         </view>
@@ -106,6 +104,8 @@
 import { ref } from 'vue'
 import { useRouter } from '@/plugin/uni-mini-router'
 import { useToast, useMessage, useNotify } from 'wot-design-uni'
+import { us, os } from '@/common/work'
+import Grid from '@/components/Grid/Grid.vue'
 
 const toast = useToast()
 const user = ref('')
@@ -115,6 +115,12 @@ const { showNotify, closeNotify } = useNotify()
 
 const router = useRouter()
 const selected = ref([])
+const gridData = ref([])
+us.data.forEach((item: any, index) => {
+  if (index < 9) {
+    gridData.value.push({ text: item.title, img: item.icon, itemKey: index })
+  }
+})
 // 图片预览
 const imgPreview = ref({
   show: false,
@@ -154,11 +160,15 @@ const proDataSource = [
 ]
 const dataSource = ref([
   { title: '万年历组件' },
-  { title: '树示例', path: '/pages/demo/tree' },
-  { title: '通讯录', path: '/pages/demo/indexBar' },
   { title: '图片预览' },
-  { title: '单选多选', path: '/pages/demo/selectPicker' },
-  { title: '表单', path: '/pages/demo/form' },
+  // {
+  //   group: [
+  //     { title: '树组件', path: '/pages/demo/tree' },
+  //     { title: '通讯录', path: '/pages/demo/indexBar' },
+  //     { title: '单选多选', path: '/pages/demo/selectPicker' },
+  //     { title: '表单', path: '/pages/demo/form' },
+  //   ],
+  // },
 ])
 const handleSkip = (path) => {
   router.push({ path: path })
@@ -166,19 +176,23 @@ const handleSkip = (path) => {
 const handleToast = (value) => {
   switch (value) {
     case 0:
-      toast.info('常规提示信息')
+      // 909cb8
+      toast.info({ msg: '常规提示信息', duration: 10000 })
       break
     case 1:
-      toast.warning('提示信息')
+      // f0863b
+      toast.warning({ msg: '提示信息', duration: 10000 })
       break
     case 2:
-      toast.success('操作成功')
+      // 33d19d
+      toast.success({ msg: '操作成功', duration: 10000 })
       break
     case 3:
-      toast.error('手机验证码输入错误，请重新输入')
+      // f04550
+      toast.error({ msg: '手机验证码输入错误，请重新输入', duration: 10000 })
       break
     case 4:
-      toast.show('普通提示信息')
+      toast.show({ msg: '手机验证码输入错误，请重新输入', duration: 10000 })
       break
   }
 }
@@ -205,32 +219,63 @@ const handleConfirm = (params) => {
 
 .box {
   background-color: #fff;
-  margin: 16px;
+  margin: 25px 16px;
   .title {
     padding: 10px;
     padding-bottom: 0;
-    font-size: 30upx;
-    font-weight: bolder;
-    color: #e4680a;
+    font-size: 15;
+    color: #666666;
     margin-bottom: 20upx;
   }
-  .wd-grid-item {
-    border-right: 1px solid rgba(0, 0, 0, 0.1);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-    &:nth-child(1),
-    &:nth-child(2),
-    &:nth-child(3) {
-      border-top: 1px solid rgba(0, 0, 0, 0.1);
-    }
-    &:nth-child(3n) {
-      border-right: none;
-    }
-  }
+
   .content {
     :deep(.wd-button),
-    :deep(.wd-img) {
+    :deep(.imgView) {
       margin: 10px;
     }
+    :deep(.wd-button) {
+      &.info {
+        background-color: #909cb8;
+      }
+      &.warning {
+        background-color: #f0863b;
+      }
+      &.success {
+        background-color: #33d19d;
+      }
+      &.error {
+        background-color: #f04550;
+      }
+    }
+  }
+}
+.router {
+  padding: 30px 15px;
+  display: flex;
+  flex-wrap: wrap;
+  .wd-button {
+    margin-bottom: 15px;
+    &:nth-child(3),
+    &:nth-child(4) {
+      margin-bottom: 0;
+    }
+  }
+}
+:deep(.wd-cell-group) {
+  margin: 0 26upx;
+  border-radius: 18upx;
+  overflow: hidden;
+  --wot-cell-line-height: 32px;
+  .wd-icon {
+    margin-right: 10px;
+  }
+  .wd-cell {
+    --wot-cell-title-fs: 15px;
+    --wot-cell-title-color: var(--color-gray);
+    .wd-cell__left {
+      font-size: 15px;
+      font-weight: 300;
+    }
   }
 }
 </style>

src/pages/demo/form.vue

@@ -11,41 +11,49 @@
 <template>
   <PageLayout navTitle="表单">
     <wd-form ref="form" :model="model">
-      <wd-cell-group border>
+      <wd-cell-group border class="mt-10px mb-10px">
         <wd-input
           label="姓名"
-          label-width="100px"
+          label-width="80px"
           prop="value1"
           clearable
           v-model="model.value1"
           placeholder="姓名"
           :rules="[{ required: true, message: '请填写姓名' }]"
         />
-        <wd-input
-          label="密码"
-          label-width="100px"
-          prop="value2"
-          show-password
-          clearable
-          v-model="model.value2"
-          placeholder="请输入密码"
-          :rules="[{ required: true, message: '请填写密码' }]"
-        />
         <wd-picker
-          label="性别"
-          prop="value3"
-          :columns="columns"
-          v-model="model.value3"
-          :rules="[{ required: true, message: '请选择性别' }]"
+            label="性别"
+            label-width="80px"
+            prop="value3"
+            :columns="columns"
+            v-model="model.value3"
+            :rules="[{ required: true, message: '请选择性别' }]"
         />
+      </wd-cell-group>
+      <wd-cell-group border class="mb-10px">
+        <wd-input
+            label="密码"
+            label-width="80px"
+            prop="value2"
+            show-password
+            clearable
+            v-model="model.value2"
+            placeholder="请输入密码"
+            :rules="[{ required: true, message: '请填写密码' }]"
+        />
+
         <wd-select-picker
-          label="爱好"
-          prop="value4"
-          v-model="model.value4"
-          :columns="selectColumns"
-          :rules="[{ required: true, message: '请选择爱好' }]"
+            label="爱好"
+            label-width="80px"
+            prop="value4"
+            v-model="model.value4"
+            :columns="selectColumns"
+            :rules="[{ required: true, message: '请选择爱好' }]"
         ></wd-select-picker>
-        <wd-calendar prop="value5" v-model="model.value5" label="出生" />
+      </wd-cell-group class="mb-10px">
+
+      <wd-cell-group border>
+        <wd-calendar  label-width="80px" prop="value5" v-model="model.value5" label="&nbsp;&nbsp;&nbsp;出生" />
       </wd-cell-group>
       <view class="footer">
         <wd-button type="primary" size="large" @click="handleSubmit" block>提交</wd-button>
@@ -109,5 +117,7 @@ function handleSubmit() {
 </script>
 
 <style lang="scss" scoped>
-//
+.footer{
+  margin: 10px;
+}
 </style>

src/pages/demo/tree.vue

@@ -28,9 +28,9 @@
         <wd-button @click="doCheckedTree(['211', '222'], false)">取消选中指定节点</wd-button>
       </view>
     </view>
-    <scroll-view scroll-y>
-      <view class="content p-2">
-        <view>多选</view>
+    <scroll-view class="bg-gray-1" scroll-y>
+      <view class="content p-2 mt-14px">
+        <view class="title mt-5">多选</view>
         <DaTree
           ref="DaTreeRef"
           :data="roomTreeData"
@@ -42,7 +42,9 @@
           @change="handleTreeChange"
           @expand="handleExpandChange"
         ></DaTree>
-        <view>单选</view>
+      </view>
+      <view class="content p-2 mt-14px">
+        <view class="title mt-5">单选</view>
         <DaTree
           :data="roomTreeData"
           labelField="name"
@@ -52,7 +54,9 @@
           @change="handleTreeChange"
           @expand="handleExpandChange"
         ></DaTree>
-        <view>默认展开指定节点</view>
+      </view>
+      <view class="content p-2 mt-14px">
+        <view class="title mt-5">默认展开指定节点</view>
         <DaTree
           :data="roomTreeData"
           labelField="name"
@@ -62,7 +66,9 @@
           @change="handleTreeChange"
           @expand="handleExpandChange"
         ></DaTree>
-        <view>异步加载数据</view>
+      </view>
+      <view class="content p-2 mt-14px mb-14px">
+        <view class="title mt-5">异步加载数据</view>
         <DaTree
           :data="roomTreeData"
           labelField="name"
@@ -180,7 +186,7 @@ const roomTreeData = ref([
           {
             id: '232',
             name: '人力二部',
-            append: '更多示例，请下载示例项目查看',
+            // append: '更多示例，请下载示例项目查看',
           },
         ],
       },
@@ -223,5 +229,8 @@ function handleExpandChange(expand, currentItem) {
 }
 .content {
   background-color: #fff;
+  .title {
+    font-size: 15px;
+  }
 }
 </style>

src/pages/index/index.vue

@@ -25,45 +25,22 @@
     </swiper>
     <scroll-view class="scrollView" :scroll-y="true" scroll-with-animation>
       <!--流程服务-->
-<!--      <wd-row>-->
-<!--        <wd-col :span="12" v-for="(item, index) in middleApps" :key="index">-->
-<!--          <wd-img :width="50" :height="50" :src="getFileAccessHttpUrl(item.icon)"></wd-img>-->
-<!--          <view class="textBox">-->
-<!--            <wd-text :text="item.title"></wd-text>-->
-<!--            <wd-text :text="item.subTitle"></wd-text>-->
-<!--          </view>-->
-<!--        </wd-col>-->
-<!--      </wd-row>-->
+      <!--      <wd-row>-->
+      <!--        <wd-col :span="12" v-for="(item, index) in middleApps" :key="index">-->
+      <!--          <wd-img :width="50" :height="50" :src="getFileAccessHttpUrl(item.icon)"></wd-img>-->
+      <!--          <view class="textBox">-->
+      <!--            <wd-text :text="item.title"></wd-text>-->
+      <!--            <wd-text :text="item.subTitle"></wd-text>-->
+      <!--          </view>-->
+      <!--        </wd-col>-->
+      <!--      </wd-row>-->
       <!--常用服务-->
       <view class="serveBox">
         <view class="title">
           <view class="dot"></view>
           <wd-text text="常用服务"></wd-text>
         </view>
-        <wd-grid :column="4" clickable>
-          <template v-for="(item, index) in usList" :key="index">
-            <wd-grid-item
-              :custom-class="item.enabled && 'enabled'"
-              :text="item.title"
-              use-icon-slot
-              @itemclick="goPage(item)"
-            >
-              <template #icon>
-                <image class="slot-img" :src="item.icon" />
-              </template>
-            </wd-grid-item>
-          </template>
-          <wd-grid-item
-            custom-class="enabled"
-            text="更多"
-            use-icon-slot
-            @itemclick="goPageMore('common')"
-          >
-            <template #icon>
-              <image class="slot-img" src="/static/index/128/more.png" />
-            </template>
-          </wd-grid-item>
-        </wd-grid>
+        <Grid :column="4" v-model="usList" @itemClik="goPage"></Grid>
       </view>
       <!--其他服务-->
       <view class="serveBox">
@@ -71,25 +48,7 @@
           <view class="dot"></view>
           <wd-text text="其他服务"></wd-text>
         </view>
-        <wd-grid :column="4" clickable>
-          <template v-for="(item, index) in osList" :key="index">
-            <wd-grid-item :text="item.title" use-icon-slot>
-              <template #icon>
-                <image class="slot-img" :src="item.icon" />
-              </template>
-            </wd-grid-item>
-          </template>
-          <wd-grid-item
-            custom-class="enabled"
-            text="更多"
-            use-icon-slot
-            @itemclick="goPageMore('other')"
-          >
-            <template #icon>
-              <image class="slot-img" src="/static/index/128/more.png" />
-            </template>
-          </wd-grid-item>
-        </wd-grid>
+        <Grid :column="4" v-model="osList" @itemClik="goPage"></Grid>
       </view>
     </scroll-view>
   </PageLayout>
@@ -105,6 +64,8 @@ import { cache, getFileAccessHttpUrl, hasRoute } from '@/common/uitls'
 import { onLaunch, onShow, onHide, onLoad, onReady } from '@dcloudio/uni-app'
 import { useToast, useMessage, useNotify } from 'wot-design-uni'
 import { useRouter } from '@/plugin/uni-mini-router'
+import Grid from '@/components/Grid/Grid.vue'
+
 import {
   ACCESS_TOKEN,
   USER_NAME,
@@ -120,7 +81,7 @@ defineOptions({
   options: {
     // apply-shared‌：当前页面样式会影响到子组件样式.(小程序)
     // shared‌：当前页面样式影响到子组件，子组件样式也会影响到当前页面.(小程序)
-    styleIsolation: '‌apply-shared‌',
+    styleIsolation: 'shared',
   },
 })
 const toast = useToast()
@@ -141,6 +102,10 @@ const goPage = (item) => {
   if (!page) {
     toast.info('该功能暂未实现')
   } else {
+    if (['other', 'common'].includes(page)) {
+      goPageMore(page)
+      return
+    }
     if (page === 'annotationList') {
       msgCount.value = 0
     }
@@ -206,8 +171,30 @@ onReady(() => {
 })
 
 if (isLocalConfig) {
-  usList.value = us.data
-  osList.value = os.data
+  usList.value = us.data.map((item) => ({
+    ...item,
+    text: item.title,
+    img: item.icon,
+    itemKey: item.routeIndex,
+  }))
+  osList.value = os.data.map((item) => ({
+    ...item,
+    text: item.title,
+    img: item.icon,
+    itemKey: item.routeIndex,
+  }))
+  usList.value.push({
+    text: '更多',
+    img: '/static/index/128/more.png',
+    routeIndex: 'other',
+    itemKey: 'other',
+  })
+  osList.value.push({
+    text: '更多',
+    img: '/static/index/128/more.png',
+    routeIndex: 'common',
+    itemKey: 'common',
+  })
   middleApps.value = [
     {
       icon: 'https://static.jeecg.com/upload/test/line2_icon1_1595818065964.png',
@@ -291,7 +278,7 @@ if (isLocalConfig) {
       align-items: center;
       justify-content: center;
       &:first-child {
-        border-right: 1px solid rgba(0, 0, 0, 0.1);
+        border-right: 1px solid rgba(165, 165, 165, 0.1);
       }
       .wd-img {
         margin: 20upx;
@@ -329,7 +316,7 @@ if (isLocalConfig) {
       display: flex;
       align-items: center;
       padding-left: 30upx;
-      height: 90upx;
+      height: 52px;
       .dot {
         width: 14upx;
         height: 14upx;
@@ -339,24 +326,7 @@ if (isLocalConfig) {
       }
       .wd-text {
         color: #666;
-        font-size: 30upx;
-      }
-    }
-    :deep(.wd-grid-item) {
-      border-right: 1px solid rgba(0, 0, 0, 0.1);
-      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-      &:nth-child(1),
-      &:nth-child(2),
-      &:nth-child(3),
-      &:nth-child(4) {
-        border-top: 1px solid rgba(0, 0, 0, 0.1);
-      }
-      &:nth-child(4n) {
-        border-right: none;
-      }
-      .slot-img {
-        height: 28px;
-        width: 28px;
+        font-size: 15px;
       }
     }
   }

src/pages/login/login.vue

@@ -8,75 +8,77 @@
 </route>
 
 <template>
-  <view class="page-container">
-    <view class="text-center">
-      <image :src="compLogo" mode="aspectFit" class="logo"></image>
-      <view class="title text-shadow">{{ compTitle || 'JEECG BOOT' }}</view>
-      <view class="enter-area">
-        <view v-if="loginWay == 1" class="account-login-area">
-          <view class="box account">
-            <wd-icon name="user" size="15px"></wd-icon>
-            <wd-text text="账号：" color="#000"></wd-text>
-            <wd-input placeholder="请输入账号" v-model.trim="userName"></wd-input>
-          </view>
-          <view class="box password">
-            <wd-icon name="lock-on" size="15px"></wd-icon>
-            <wd-text text="密码：" color="#000"></wd-text>
-            <input
-              class="uni-input"
-              placeholder="请输入密码"
-              :password="showPassword"
-              v-model.trim="password"
-            />
-            <wd-icon
-              v-if="showPassword"
-              name="eye-close"
-              size="18px"
-              @click="handleChangePassword"
-            ></wd-icon>
-            <wd-icon v-else name="view" size="18px" @click="handleChangePassword"></wd-icon>
-          </view>
-        </view>
-        <view v-else class="phone-login-area">
-          <view class="account-login-area">
+  <PageLayout :navbarShow="false">
+    <view class="page-container">
+      <view class="text-center">
+        <image :src="compLogo" mode="aspectFit" class="logo"></image>
+        <view class="title text-shadow">{{ compTitle || 'JEECG BOOT' }}</view>
+        <view class="enter-area">
+          <view v-if="loginWay == 1" class="account-login-area">
             <view class="box account">
-              <wd-icon name="mobile" size="15px"></wd-icon>
-              <wd-text text="手机号：" color="#000"></wd-text>
-              <wd-input placeholder="请输入手机号" v-model="phoneNo"></wd-input>
+              <wd-icon name="user" size="15px"></wd-icon>
+              <wd-text text="账号："></wd-text>
+              <wd-input placeholder="请输入账号" v-model.trim="userName"></wd-input>
             </view>
             <view class="box password">
               <wd-icon name="lock-on" size="15px"></wd-icon>
-              <wd-text text="验证码：" color="#000"></wd-text>
-              <wd-input placeholder="请输入验证码" v-model="smsCode"></wd-input>
-              <wd-button
-                :round="false"
-                size="small"
-                custom-class="sendSMSBtn"
-                plain
-                hairline
-                :disabled="isSendSMSEnable"
-                @click="handleSMSSend"
-              >
-                {{ getSendBtnText }}
-              </wd-button>
+              <wd-text text="密码："></wd-text>
+              <input
+                class="uni-input"
+                placeholder="请输入密码"
+                :password="showPassword"
+                v-model.trim="password"
+              />
+              <wd-icon
+                v-if="showPassword"
+                name="eye-close"
+                size="18px"
+                @click="handleChangePassword"
+              ></wd-icon>
+              <wd-icon v-else name="view" size="18px" @click="handleChangePassword"></wd-icon>
+            </view>
+          </view>
+          <view v-else class="phone-login-area">
+            <view class="account-login-area">
+              <view class="box account">
+                <wd-icon name="mobile" size="15px"></wd-icon>
+                <wd-text text="手机号：" color="#000"></wd-text>
+                <wd-input placeholder="请输入手机号" v-model="phoneNo"></wd-input>
+              </view>
+              <view class="box password">
+                <wd-icon name="lock-on" size="15px"></wd-icon>
+                <wd-text text="验证码：" color="#000"></wd-text>
+                <wd-input placeholder="请输入验证码" v-model="smsCode"></wd-input>
+                <wd-button
+                  :round="false"
+                  size="small"
+                  custom-class="sendSMSBtn"
+                  plain
+                  hairline
+                  :disabled="isSendSMSEnable"
+                  @click="handleSMSSend"
+                >
+                  {{ getSendBtnText }}
+                </wd-button>
+              </view>
             </view>
           </view>
         </view>
+        <view class="btn-area text-center">
+          <wd-button custom-class="mr-30px align-top" :loading="loading" @click="hanldeLogin">
+            {{ loading ? '登录...' : '登录' }}
+          </wd-button>
+          <wd-button v-if="loginWay == 2" plain hairline @click="toggleLoginWay(1)">
+            账户登录
+          </wd-button>
+          <wd-button v-else custom-class="align-top" plain hairline @click="toggleLoginWay(2)">
+            短信登录
+          </wd-button>
+        </view>
       </view>
-      <view class="btn-area text-center">
-        <wd-button custom-class="mr-5 align-top" :loading="loading" @click="hanldeLogin">
-          {{ loading ? '登录...' : '登录' }}
-        </wd-button>
-        <wd-button v-if="loginWay == 2" plain hairline @click="toggleLoginWay(1)">
-          账户登录
-        </wd-button>
-        <wd-button v-else custom-class="align-top" plain hairline @click="toggleLoginWay(2)">
-          短信登录
-        </wd-button>
-      </view>
+      <wd-notify />
     </view>
-    <wd-notify />
-  </view>
+  </PageLayout>
 </template>
 
 <script lang="ts" setup>
@@ -90,7 +92,8 @@ import {
   USER_INFO,
   APP_ROUTE,
   APP_CONFIG,
-  HOME_CONFIG_EXPIRED_TIME, HOME_PAGE,
+  HOME_CONFIG_EXPIRED_TIME,
+  HOME_PAGE,
 } from '@/common/constants'
 
 import { cache, getFileAccessHttpUrl } from '@/common/uitls'
@@ -311,7 +314,7 @@ const checkToken = () => {
       // 超过2小时过期
       clearUserInfo()
     } else {
-      router.pushTab({ path: HOME_PAGE})
+      router.pushTab({ path: HOME_PAGE })
     }
   } else {
     clearUserInfo()
@@ -335,6 +338,8 @@ if (isLocalConfig === false) {
   padding: 0 20upx;
   padding-top: 100upx;
   position: relative;
+  font-size: 15px;
+  color: var(--UI-FG-0);
   .logo {
     width: 200upx;
     height: 150px;
@@ -343,8 +348,8 @@ if (isLocalConfig === false) {
     font-size: 58upx;
   }
   .enter-area {
-    padding-top: 100upx;
-    width: 90%;
+    padding-top: 75px;
+    width: 87%;
     margin: 0 auto 60upx;
     .box {
       display: flex;
@@ -379,6 +384,19 @@ if (isLocalConfig === false) {
     :deep(.sendSMSBtn) {
       margin-left: 20upx;
     }
+    :deep(.wd-icon-view),
+    :deep(.wd-icon-eye-close) {
+      color: #555;
+    }
+  }
+  .btn-area {
+    :deep(.wd-button) {
+      --wot-button-medium-height: 41px;
+      --wot-button-medium-fs: 16px;
+      --wot-button-plain-bg-color: transparent;
+      min-width: 100px;
+      box-shadow: 3px 3px 4px rgba(0, 102, 204, 0.2);
+    }
   }
 }
 </style>

src/pages/message/components/chatList.vue

@@ -229,6 +229,12 @@ const handleGo = (item) => {
   .uni-list-chat__content-title {
     color: #9ca3af;
   }
+  .uni-list-chat__content-title {
+    font-size: 15px;
+  }
+  .uni-list-chat__header {
+    background-color: #eee;
+  }
 }
 :deep(.wd-popup) {
   &.wd-popup--bottom {

src/pages/user/people.vue

@@ -272,9 +272,12 @@ onLoad(() => {
 }
 .info-area {
   display: flex;
-  padding: 20upx;
+  padding: 30upx;
   background-color: #fff;
   color: #8799a3;
+  :deep(.wd-text) {
+    color: var(--color-gray);
+  }
   .user,
   .job {
     flex: 1;
@@ -303,9 +306,17 @@ onLoad(() => {
     }
   }
 }
-.wd-cell-group {
+:deep(.wd-cell-group) {
   margin: 0 26upx;
   border-radius: 18upx;
   overflow: hidden;
+  --wot-cell-line-height: 32px;
+  .wd-cell {
+    --wot-cell-title-fs: 15px;
+    --wot-cell-title-color: var(--color-gray);
+    .wd-cell__left {
+      font-size: 15px;
+    }
+  }
 }
 </style>

src/style/index.scss

@@ -11,17 +11,49 @@
 
 :root,
 page {
-  // 修改按主题色
-  // --wot-color-theme: #37c2bc;
-
-  // 修改按钮背景色
-  // --wot-button-primary-bg-color: green;
+  .uni-tabbar__label {
+    margin-top: 1px !important;
+  }
   background-color: #f1f1f1;
+
+  --UI-BG: #fff;
+  --UI-BG-1: #f7f7f7;
+  --UI-BG-2: #fff;
+  --UI-BG-3: #f7f7f7;
+  --UI-BG-4: #4c4c4c;
+  --UI-BG-5: #fff;
+  --UI-FG: #000;
+  --UI-FG-0: rgba(0, 0, 0, 0.9);
+  --UI-FG-HALF: rgba(0, 0, 0, 0.9);
+  --UI-FG-1: rgba(0, 0, 0, 0.5);
+  --UI-FG-2: rgba(0, 0, 0, 0.3);
+  --UI-FG-3: rgba(0, 0, 0, 0.1);
+  --color-gray: #8799a3;
+
+  .text-grey,
+  .line-grey,
+  .lines-grey {
+    color: var(--color-gray);
+  }
+  // 主题色
+  --wot-color-theme: #0081ff;
+  // 导航
   --wot-navbar-color: #fff;
   --wot-navbar-desc-font-color: #fff;
-  // 重置wot-design-uni
-  .wd-button.is-round {
-    border-radius: 6px !important;
+  // 文字
+  --wot-text-info-color: var(--UI-FG-0);
+  // 输入框
+  --wot-input-color: #555;
+  // cell
+
+  // 重置 wot-design-uni
+  .wd-button {
+    &.is-round {
+      border-radius: 4px !important;
+    }
+    &.is-plain {
+      overflow: visible;
+    }
   }
   .wd-cell__left {
     align-items: center;
@@ -33,4 +65,23 @@ page {
       height: calc(100vh - 44px);
     }
   }
+  .wd-input {
+    &.is-cell {
+      --wot-cell-title-color: var(--UI-FG-0);
+      --wot-input-cell-padding: 14px;
+      --wot-input-fs: 15px;
+      .wd-input__label.is-required::after {
+        top: 6px;
+      }
+    }
+  }
+  // 万年历组件
+  .uni-calendar {
+    .uni-calendar__header-text {
+      text-align: center;
+      width: 100px;
+      font-size: 24px;
+      color: #333;
+    }
+  }
 }