UI样式大优化

2025-10-13 13:46:45 +00:00 · 2025-03-10 21:42:13 +08:00
parent ae358f8572
commit 7427898c42
37 changed files with 1347 additions and 908 deletions
--- a/env/.env
+++ b/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.启用必须要开启代理，否则生效。)
--- a/src/common/uitls.ts
+++ b/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}`
+}
--- a/src/common/work.ts
+++ b/src/common/work.ts
@@ -18,7 +18,7 @@ export const us = {
      enabled: true,
    },
    {
-      title: 'demo',
+      title: '组件示例',
      icon: icon_prefix + 'chuchai.png',
      description: '出差申请',
      useCount: 10000,
--- a/src/components/CategorySelect/CategorySelect.vue
+++ b/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 {
--- a/src/components/Grid/Grid.vue
+++ b/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>
--- a/src/components/PageLayout/PageLayout.vue
+++ b/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>
--- a/src/components/SelectDept/SelectDept.vue
+++ b/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 {
--- a/src/components/SelectUser/SelectUser.vue
+++ b/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,
  () => {
--- a/src/components/SelectUser/components/SelectUserModal.vue
+++ b/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>
--- a/src/components/TreeSelect/TreeSelect.vue
+++ b/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 {
--- a/src/components/online/online-loader.vue
+++ b/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>
--- a/src/components/online/view/online-time.vue
+++ b/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 的变化
--- a/src/pages-message/contacts/contacts.vue
+++ b/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;
--- a/src/pages-sub/online/online.vue
+++ b/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;
  }
--- a/src/pages-sub/online/onlineCard.vue
+++ b/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;
--- a/src/pages-sub/online/onlineTable.vue
+++ b/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>
--- a/src/pages-work/components/hooks/useEchart.ts
+++ b/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) {
      //查询配置
--- a/src/pages-work/dragPage/index.vue
+++ b/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
--- a/src/pages-work/static/echarts.min.js
+++ b/src/pages-work/static/echarts.min.js
--- a/src/pages/annotation/annotationDetail.vue
+++ b/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>
--- a/src/pages/demo/demo.vue
+++ b/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="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 gridBox shadow-warp">
        <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 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>
-          <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>
-      </view>
-      <view class="box">
-        <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>
--- a/src/pages/demo/form.vue
+++ b/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>
--- a/src/pages/demo/tree.vue
+++ b/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>
--- a/src/pages/index/index.vue
+++ b/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;
      }
    }
  }
--- a/src/pages/login/login.vue
+++ b/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>
--- a/src/pages/message/components/chatList.vue
+++ b/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 {
--- a/src/pages/user/people.vue
+++ b/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>
--- a/src/static/tabbar/tabbar-home-2.png
+++ b/src/static/tabbar/tabbar-home-2.png
--- a/src/static/tabbar/tabbar-home.png
+++ b/src/static/tabbar/tabbar-home.png
--- a/src/static/tabbar/tabbar-message-2.png
+++ b/src/static/tabbar/tabbar-message-2.png
--- a/src/static/tabbar/tabbar-message.png
+++ b/src/static/tabbar/tabbar-message.png
--- a/src/static/tabbar/tabbar-user-2.png
+++ b/src/static/tabbar/tabbar-user-2.png
--- a/src/static/tabbar/tabbar-user.png
+++ b/src/static/tabbar/tabbar-user.png
--- a/src/static/tabbar/tabbar-workHome-2.png
+++ b/src/static/tabbar/tabbar-workHome-2.png
--- a/src/static/tabbar/tabbar-workHome.png
+++ b/src/static/tabbar/tabbar-workHome.png
--- a/src/style/index.scss
+++ b/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;
+    }
+  }
 }
--- a/src/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue
+++ b/src/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue