diff --git a/.env.development b/.env.development
index 325e8cd..df3cbfc 100644
--- a/.env.development
+++ b/.env.development
@@ -4,4 +4,4 @@ VITE_SERVER_URL=https://server.gxwebsoft.com/api
 #VITE_API_URL=https://modules.gxwebsoft.com/api
 
 #VITE_SERVER_URL=http://127.0.0.1:9091/api
-VITE_API_URL=http://127.0.0.1:9090/api
+VITE_API_URL=http://127.0.0.1:9099/api
diff --git a/src/api/oa/app/index.ts b/src/api/oa/app/index.ts
index de7cea2..e699136 100644
--- a/src/api/oa/app/index.ts
+++ b/src/api/oa/app/index.ts
@@ -175,3 +175,16 @@ export async function saveAuthority(data: any[]) {
   }
   return Promise.reject(new Error(res.data.message));
 }
+
+/**
+ * 查询我的项目信息
+ */
+export async function getMyApp() {
+  const res = await request.get<ApiResult<App>>(
+    MODULES_API_URL + '/oa/app/getMyApp'
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/src/views/system/myApp/components/app-edit.vue b/src/views/system/myApp/components/app-edit.vue
new file mode 100644
index 0000000..74fa121
--- /dev/null
+++ b/src/views/system/myApp/components/app-edit.vue
@@ -0,0 +1,247 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="700"
+    :visible="visible"
+    :maskClosable="false"
+    :title="isUpdate ? '编辑应用' : '创建应用'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
+      <a-descriptions :column="2">
+        <a-descriptions-item>
+          <a-form-item label="应用名称" name="appName">
+            <a-input
+              allow-clear
+              placeholder="请输入应用名称"
+              class="form-item"
+              v-model:value="form.appName"
+            />
+          </a-form-item>
+        </a-descriptions-item>
+        <a-descriptions-item>
+          <a-form-item label="项目类型" name="appType">
+            <DictSelect
+              dict-code="appType"
+              class="form-item"
+              placeholder="请选择项目类型"
+              v-model:value="form.appType"
+            />
+          </a-form-item>
+        </a-descriptions-item>
+        <a-descriptions-item>
+          <a-form-item label="应用标识" name="appCode">
+            <a-input
+              allow-clear
+              placeholder="请输入应用标识(英文字母)"
+              class="form-item"
+              v-model:value="form.appCode"
+              @input="changeAppCode"
+            />
+          </a-form-item>
+        </a-descriptions-item>
+        <a-descriptions-item>
+          <a-form-item label="企业名称" name="companyName">
+            <SelectCompany
+              :placeholder="`所属企业`"
+              class="form-item"
+              v-model:value="form.companyName"
+              @done="chooseCompanyName"
+            />
+          </a-form-item>
+        </a-descriptions-item>
+        <a-descriptions-item>
+          <a-form-item label="关联租户" name="tenantCode">
+            <a-input
+              allow-clear
+              placeholder="请输入关联的租户ID"
+              class="form-item"
+              v-model:value="form.tenantCode"
+            />
+          </a-form-item>
+        </a-descriptions-item>
+        <a-descriptions-item />
+        <a-descriptions-item :span="2">
+          <a-form-item label="应用描述" name="comments" class="ele-fluid">
+            <a-textarea
+              :rows="4"
+              :maxlength="200"
+              placeholder="请输入应用描述"
+              v-model:value="form.comments"
+            />
+          </a-form-item>
+        </a-descriptions-item>
+      </a-descriptions>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, isChinese } from 'ele-admin-pro';
+  import { addApp, updateApp } from '@/api/oa/app';
+  import type { App } from '@/api/oa/app/model';
+  import { FormInstance, RuleObject } from 'ant-design-vue/es/form';
+  import { Company } from '@/api/system/company/model';
+  import { pageCompany } from '@/api/system/company';
+
+  const useForm = Form.useForm;
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: App | null;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否是修改
+  const isUpdate = ref(false);
+  const formRef = ref<FormInstance | null>(null);
+
+  // 表单数据
+  const form = reactive<App>({
+    appId: undefined,
+    appName: '',
+    appCode: '',
+    appType: undefined,
+    companyName: '',
+    tenantCode: '',
+    comments: '',
+    appStatus: '开发中'
+  });
+
+  // 表单验证规则
+  const rules = reactive({
+    appName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请输入应用名称',
+        trigger: 'blur'
+      }
+    ],
+    // companyName: [
+    //   {
+    //     required: true,
+    //     type: 'string',
+    //     message: '请选择所属企业',
+    //     trigger: 'blur'
+    //   }
+    // ],
+    appCode: [
+      {
+        required: true,
+        type: 'string',
+        message: '请输入应用标识(英文字母)',
+        trigger: 'blur',
+        validator: async (_rule: RuleObject, value: string) => {
+          if (isChinese(value)) {
+            return Promise.reject('请输入正确的应用标识');
+          }
+          return Promise.resolve();
+        }
+      }
+    ],
+    appType: [
+      {
+        required: true,
+        message: '请选择项目类型'
+      }
+    ]
+  });
+
+  const { resetFields } = useForm(form, rules);
+
+  const chooseCompanyName = (data: Company) => {
+    form.appUrl = data.domain;
+    form.companyName = data.companyName;
+    form.companyId = data.companyId;
+    form.tenantId = data.tenantId;
+  };
+
+  const changeAppCode = () => {
+    form.packageName = `com.gxwebsoft.${form.appCode}`;
+  };
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateApp : addApp;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  const reload = () => {
+    loading.value = true;
+    // 加载企业信息
+    const companyId = props.data?.companyId;
+    pageCompany({ companyId }).then((res) => {
+      form.tenantId = undefined;
+      const list = res?.list;
+      if (list && list.length > 0) {
+        form.tenantId = list[0].tenantId;
+      }
+    });
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          assignObject(form, props.data);
+          if (props.data.search) {
+            form.search = props.data.search == 1 ? true : 0;
+          }
+          isUpdate.value = true;
+          reload();
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>
+
+<style lang="less">
+  .form-item {
+    min-width: 300px;
+  }
+</style>
diff --git a/src/views/system/myApp/components/renew-list.vue b/src/views/system/myApp/components/renew-list.vue
new file mode 100644
index 0000000..7b78717
--- /dev/null
+++ b/src/views/system/myApp/components/renew-list.vue
@@ -0,0 +1,259 @@
+<template>
+  <a-card
+    title="续费管理"
+    :bordered="false"
+    v-if="hasRole('superAdmin') || hasRole('admin')"
+  >
+    <template #extra>
+      <a-button @click="addRecord">添加</a-button>
+    </template>
+    <div class="content">
+      <table
+        class="ele-table ele-table-border ele-table-stripe ele-table-medium"
+      >
+        <thead>
+          <tr>
+            <th>状态</th>
+            <th>续费金额</th>
+            <th>开始时间</th>
+            <th>结束时间</th>
+            <th width="360">描述</th>
+            <th style="text-align: center">操作</th>
+          </tr>
+        </thead>
+        <tr v-for="(item, index) in list" :key="index">
+          <td>
+            <template v-if="item.editStatus">
+              <a-select placeholder="请选择" v-model:value="item.status">
+                <a-select-option :value="0">待缴费</a-select-option>
+                <a-select-option :value="1">已缴费</a-select-option>
+              </a-select>
+            </template>
+            <template v-else>
+              <span v-if="item.status == 1">已缴费</span>
+              <span v-if="item.status == 0">待缴费</span>
+            </template>
+          </td>
+          <td>
+            <template v-if="item.editStatus">
+              <a-input-number
+                :min="0"
+                :max="999999"
+                class="ele-fluid"
+                placeholder="请输入续费金额"
+                v-model:value="item.money"
+              />
+            </template>
+            <template v-else> ￥{{ item.money }} </template>
+          </td>
+          <td>
+            <template v-if="item.editStatus">
+              <a-date-picker
+                placeholder="开始日期"
+                value-format="YYYY-MM-DD"
+                v-model:value="item.startTime"
+              />
+            </template>
+            <template v-else>
+              {{ toDateString(item.startTime, 'yyyy-MM-dd') }}
+            </template>
+          </td>
+          <td>
+            <template v-if="item.editStatus">
+              <a-date-picker
+                placeholder="结束日期"
+                value-format="YYYY-MM-DD"
+                v-model:value="item.endTime"
+              />
+            </template>
+            <template v-else>
+              {{ toDateString(item.endTime, 'yyyy-MM-dd') }}
+            </template>
+          </td>
+          <td>
+            <template v-if="item.editStatus">
+              <a-input
+                class="ele-fluid"
+                placeholder="请输入描述内容"
+                v-model:value="item.comments"
+              />
+              <a-upload
+                v-model:file-list="item.images"
+                class="upload-list-inline"
+                list-type="picture"
+                :before-upload="beforeUpload"
+              >
+                <a-button>
+                  <UploadOutlined />
+                  上传附件
+                </a-button>
+              </a-upload>
+            </template>
+            <template v-else>
+              <div class="comments">{{ item.comments }}</div>
+              <div class="files">
+                <a-upload
+                  v-model:file-list="item.images"
+                  class="upload-list-inline"
+                >
+                </a-upload>
+              </div>
+            </template>
+          </td>
+          <td style="text-align: center">
+            <template v-if="item.editStatus">
+              <a-space>
+                <a @click="save(item, index)">保存</a>
+                <a-divider type="vertical" />
+                <a-popconfirm title="确定要删除此记录吗？" @confirm="remove(index)">
+                  <a class="ele-text-info">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+            <template v-else>
+              <a-space>
+                <a @click="openEdit(index)">编辑</a>
+                <a-divider type="vertical" v-if="hasRole('superAdmin')" @confirm="removeRel(index)" />
+                <a-popconfirm title="确定要删除此记录吗？" v-if="hasRole('superAdmin')" @confirm="removeRel(index)">
+                  <a class="ele-text-info">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </a-card>
+</template>
+
+<script setup lang="ts">
+  import { hasRole } from '@/utils/permission';
+  import { ref, watch } from 'vue';
+  import { addAppRenew, pageAppRenew, removeAppRenew } from "@/api/oa/app/renew";
+  import { AppRenew } from '@/api/oa/app/renew/model';
+  import { useUserStore } from '@/store/modules/user';
+  import { message } from 'ant-design-vue';
+  import { toDateString } from 'ele-admin-pro';
+  import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
+  import { uploadOss } from "@/api/system/file";
+  import { isImage } from "@/utils/common";
+
+  const props = defineProps<{
+    editStatus?: boolean;
+    appId?: number;
+    companyId?: number;
+  }>();
+
+  const userStore = useUserStore();
+  const list = ref<AppRenew[]>([]);
+  const files = ref<ItemType[]>([]);
+
+  const addRecord = () => {
+    list.value.unshift({
+      money: undefined,
+      comments: undefined,
+      startTime: undefined,
+      endTime: undefined,
+      nickname: userStore.info?.nickname,
+      status: 0,
+      images: undefined,
+      editStatus: true
+    });
+  };
+
+  // 文件上传事件
+  const beforeUpload = (file: File) => {
+    const item: ItemType = {
+      file,
+      uid: (file as any).uid,
+      name: file.name
+    }
+    if (!file.type.startsWith("image")) {
+      if (file.size / 1024 / 1024 > 100) {
+        message.error("大小不能超过 100MB");
+        return;
+      }
+    }
+    onUpload(item);
+    return false;
+  };
+
+  const onUpload = (d: ItemType) => {
+    uploadOss(<File>d.file)
+      .then((result) => {
+        files.value.push({
+          uid: result.id,
+          url: result.path,
+          name: isImage(result.path) ? 'image' : result.name,
+          status: "done"
+        });
+        message.success("上传成功");
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  const remove = (index: number) => {
+    list.value.splice(index, 1);
+  };
+
+  const openEdit = (index: number) => {
+    list.value[index].editStatus = true
+  }
+
+  const removeRel = (index: number) => {
+    removeAppRenew(list.value[index].appRenewId).then(() => {
+      list.value.splice(index, 1);
+      message.success('删除成功')
+    })
+  }
+
+  const save = (item: AppRenew, index: number) => {
+    item.appId = props.appId;
+    item.companyId = props.companyId;
+    item.startTime = item.startTime ? item.startTime + ' 00:00:00' : '';
+    item.endTime = item.endTime ? item.endTime + ' 23:59:59' : '';
+    item.nickname = userStore.info?.nickname;
+    item.userId = userStore.info?.userId;
+    if(files.value.length > 0){
+      item.images = JSON.stringify(files.value)
+    }
+    if (item.money == undefined || item.money == 0) {
+      message.error('请填写金额');
+      return false;
+    }
+    addAppRenew(item).then(() => {
+      list.value[index].editStatus = false;
+      message.success('保存成功');
+    });
+  };
+
+  const reload = () => {
+    pageAppRenew({ appId: props.appId }).then((res) => {
+      if (res?.list) {
+        list.value = res?.list.map((d) => {
+          d.editStatus = false;
+          if(d.images){
+            d.images = JSON.parse(d.images);
+          }
+          return d;
+        });
+      }
+    });
+  };
+
+  watch(
+    () => props.appId,
+    (options) => {
+      if (options) {
+        reload();
+      }
+    },
+    {
+      immediate: true
+    }
+  );
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/views/system/myApp/components/task-list.vue b/src/views/system/myApp/components/task-list.vue
new file mode 100644
index 0000000..94ba130
--- /dev/null
+++ b/src/views/system/myApp/components/task-list.vue
@@ -0,0 +1,152 @@
+<template>
+  <a-card
+    title="待处理工单"
+    :bordered="false"
+    v-if="hasRole('superAdmin') || hasRole('admin')"
+  >
+    <template #extra>
+      <a href="/oa/task">查看更多</a>
+    </template>
+    <div class="content">
+      <a-space style="margin-bottom: 15px" v-if="editStatus" />
+      <table class="ele-table ele-table-stripe ele-table-medium">
+        <thead>
+          <tr>
+            <th width="80">工单号</th>
+            <th width="100">工单类型</th>
+            <th>问题描述</th>
+            <th width="150">创建时间</th>
+            <th width="100">状态</th>
+          </tr>
+        </thead>
+        <tbody v-for="(item, index) in list" :key="index">
+          <tr>
+            <td>{{ item.taskId }}</td>
+            <td>{{ item.taskType }}</td>
+            <td>
+              <div class="user-box">
+                <div class="user-info">
+                  <a-badge
+                    :dot="!item.isRead && item.userId != userStore.info?.userId"
+                  >
+                    <a-avatar :src="item.lastAvatar" size="large" />
+                  </a-badge>
+                </div>
+                <div
+                  class="content"
+                  style="display: flex; flex-direction: column"
+                >
+                  <div class="nickname">
+                    <span class="ele-text-secondary">{{
+                      item.lastNickname ? item.lastNickname : '未知'
+                    }}</span>
+                    <span
+                      class="ele-text-placeholder"
+                      style="padding-left: 10px"
+                      >{{ timeAgo(item.updateTime) }}</span
+                    >
+                  </div>
+                  <div class="text">
+                    <a
+                      class="ele-text-heading"
+                      @click="openUrl('/oa/task/detail/' + item.taskId)"
+                      >{{ item.content }}</a
+                    >
+                  </div>
+                </div>
+                <div class="last-time ele-text-info"> </div>
+              </div>
+            </td>
+            <td>{{ toDateString(item.createTime, 'MM月dd日 HH:mm') }}</td>
+            <td>
+              <a-tag v-if="item.progress === TOBEARRANGED" color="red"
+                >待安排</a-tag
+              >
+              <a-tag v-if="item.progress === PENDING" color="orange"
+                >待处理</a-tag
+              >
+              <a-tag v-if="item.progress === PROCESSING" color="purple"
+                >处理中</a-tag
+              >
+              <a-tag v-if="item.progress === TOBECONFIRMED" color="cyan"
+                >待评价</a-tag
+              >
+              <a-tag v-if="item.progress === COMPLETED" color="green"
+                >已完成</a-tag
+              >
+              <a-tag v-if="item.progress === CLOSED">已关闭</a-tag>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </a-card>
+</template>
+
+<script setup lang="ts">
+  import { hasRole } from '@/utils/permission';
+  import { ref, watch } from 'vue';
+  import { pageTask } from '@/api/oa/task';
+  import { Task } from '@/api/oa/task/model';
+  import {
+    CLOSED,
+    COMPLETED,
+    PENDING,
+    PROCESSING,
+    TOBEARRANGED,
+    TOBECONFIRMED
+  } from '@/api/oa/task/model/progress';
+  import { openUrl } from '@/utils/common';
+  import { timeAgo, toDateString } from 'ele-admin-pro';
+  import { useUserStore } from '@/store/modules/user';
+
+  const props = defineProps<{
+    editStatus?: boolean;
+    appId?: number;
+    companyId?: number;
+  }>();
+
+  const list = ref<Task[]>([]);
+  const userStore = useUserStore();
+
+  const reload = () => {
+    pageTask({ appId: props.appId }).then((res) => {
+      if (res?.list) {
+        list.value = res?.list;
+      }
+    });
+  };
+
+  watch(
+    () => props.appId,
+    (options) => {
+      if (options) {
+        reload();
+      }
+    },
+    {
+      immediate: true
+    }
+  );
+</script>
+
+<style scoped lang="less">
+  .user-box {
+    display: flex;
+    align-items: center;
+    .user-info {
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      margin-right: 7px;
+    }
+    .last-time {
+      margin-left: 12px;
+    }
+    .content {
+      .text {
+        max-width: 90%;
+      }
+    }
+  }
+</style>
diff --git a/src/views/system/myApp/detail/components/app-about-edit.vue b/src/views/system/myApp/detail/components/app-about-edit.vue
new file mode 100644
index 0000000..b0ea951
--- /dev/null
+++ b/src/views/system/myApp/detail/components/app-about-edit.vue
@@ -0,0 +1,283 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    width="80%"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑' : '新增'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+        ref="formRef"
+        :model="form"
+        :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
+        :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
+    >
+      <!-- 编辑器 -->
+      <div class="content">
+        <tinymce-editor
+          v-model:value="content"
+          :disabled="disabled"
+          :init="config"
+          placeholder="图片直接粘贴自动上传"
+          @paste="onPaste"
+        />
+      </div>
+      <!-- 编辑器 -->
+<!--      <byte-md-editor-->
+<!--          v-model:value="content"-->
+<!--          placeholder="请输入您的内容，图片请直接粘贴"-->
+<!--          :locale="zh_Hans"-->
+<!--          mode="split"-->
+<!--          :plugins="plugins"-->
+<!--          height="500px"-->
+<!--          :editorConfig="{ lineNumbers: true }"-->
+<!--          @paste="onPaste"-->
+<!--      />-->
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import {assignObject} from "ele-admin-pro";
+  import { addApp, updateApp } from '@/api/oa/app';
+  import type { App } from '@/api/oa/app/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  // 中文语言文件
+  import zh_Hans from 'bytemd/locales/zh_Hans.json';
+  // 链接、删除线、复选框、表格等的插件
+  // 插件的中文语言文件
+  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
+  import 'bytemd/dist/index.min.css';
+  import 'github-markdown-css/github-markdown-light.css';
+  import highlight from '@bytemd/plugin-highlight';
+  // 中文语言文件
+  import gfm from '@bytemd/plugin-gfm';
+  // // 预览界面的样式，这里用的 github 的 markdown 主题
+  import 'github-markdown-css/github-markdown-light.css';
+  import {FormInstance} from 'ant-design-vue/es/form';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import {uploadFile, uploadOss} from "@/api/system/file";
+  import { TOKEN_STORE_NAME } from "@/config/setting";
+  import TinymceEditor from "@/components/TinymceEditor/index.vue";
+
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: App | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  const disabled = ref(false);
+  const images = ref<ItemType[]>([]);
+  const content = ref('');
+
+  // 插件
+  const plugins = ref([
+    gfm({
+      locale: zh_HansGfm
+    }),
+    highlight()
+  ]);
+
+  const token = localStorage.getItem(TOKEN_STORE_NAME);
+  const formRef = ref<FormInstance | null>(null);
+
+
+  // 用户信息
+  const form = reactive<App>({
+    // 应用id
+    appId: undefined,
+    // 项目介绍
+    content: ''
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  const { resetFields, validate, validateInfos } = useForm(form);
+  const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
+  const config = ref({
+    height: 500,
+    images_upload_handler: (blobInfo, success, error) => {
+      const file = blobInfo.blob();
+      const formData = new FormData();
+      formData.append('file', file, file.name);
+      uploadOss(file).then(res => {
+        success(res.url)
+      }).catch((msg) => {
+        error(msg);
+      })
+      return false;
+    },
+    // 自定义文件上传(这里使用把选择的文件转成 blob 演示)
+    file_picker_callback: (callback: any, _value: any, meta: any) => {
+      const input = document.createElement('input');
+      input.setAttribute('type', 'file');
+      // 设定文件可选类型
+      if (meta.filetype === 'image') {
+        input.setAttribute('accept', 'image/*');
+      } else if (meta.filetype === 'media') {
+        input.setAttribute('accept', 'video/*,.pdf');
+      }
+      input.onchange = () => {
+        const file = input.files?.[0];
+        if (!file) {
+          return;
+        }
+        if (meta.filetype === 'media') {
+          if (file.size / 1024 / 1024 > 200) {
+            editorRef.value?.alert({ content: '大小不能超过 200MB' });
+            return;
+          }
+          if (!file.type.startsWith('video/')) {
+            editorRef.value?.alert({ content: '只能选择视频文件' });
+            return;
+          }
+          uploadOss(file).then(res => {
+            callback(res.downloadUrl);
+          })
+        }
+      };
+      input.click();
+    }
+  });
+
+  /* 粘贴图片上传服务器并插入编辑器 */
+  const onPaste = (e) => {
+    const items = (e.clipboardData || e.originalEvent.clipboardData).items;
+    let hasFile = false;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.indexOf('image') !== -1) {
+        let file = items[i].getAsFile();
+        const item: ItemType = {
+          file,
+          uid: (file as any).lastModified,
+          name: file.name
+        };
+        uploadFile(<File>item.file)
+          .then((result) => {
+            const addPath = `<p><img class="content-img" src="${result.url}"></p>`;
+            content.value = content.value + addPath
+            // const addPath = '!['+result.name+']('+ result.url+')\n\r';
+            // content.value = content.value + addPath
+          })
+          .catch((e) => {
+            message.error(e.message);
+          });
+        hasFile = true;
+      }
+    }
+    if (hasFile) {
+      e.preventDefault();
+    }
+  }
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form,
+          content: content.value
+        };
+        const saveOrUpdate = isUpdate.value ? updateApp : addApp;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 上传事件 */
+  const uploadHandler = (file: File) => {
+    const item: ItemType = {
+      file,
+      uid: (file as any).uid,
+      name: file.name
+    };
+    if (!file.type.startsWith('image')) {
+      message.error('只能选择图片');
+      return;
+    }
+    if (file.size / 1024 / 1024 > 2) {
+      message.error('大小不能超过 2MB');
+      return;
+    }
+    onUpload(item);
+  };
+
+  // 上传文件
+  const onUpload = (item) => {
+    const { file } = item;
+    uploadFile(file)
+      .then((data) => {
+        images.value.push({
+          uid: data.id,
+          url: data.url,
+          status: 'done'
+        });
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        content.value = '';
+        if (props.data) {
+          assignObject(form, props.data);
+          if (props.data.content) {
+            content.value = props.data.content;
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>
diff --git a/src/views/system/myApp/detail/components/app-about.vue b/src/views/system/myApp/detail/components/app-about.vue
new file mode 100644
index 0000000..a03d41b
--- /dev/null
+++ b/src/views/system/myApp/detail/components/app-about.vue
@@ -0,0 +1,60 @@
+<template>
+  <a-descriptions title="项目介绍" :bordered="false">
+    <template #extra>
+      <a @click="openEdit">编辑</a>
+    </template>
+  </a-descriptions>
+  <byte-md-viewer :value="data.content" :plugins="plugins" />
+  <a-empty
+    v-if="data.content == ''"
+    image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
+    :image-style="{
+      height: '60px'
+    }"
+  >
+    <template #description>
+      <span class="ele-text-placeholder">请填写项目介绍</span>
+    </template>
+    <a-button type="primary" @click="openEdit">立即填写</a-button>
+  </a-empty>
+  <!-- 编辑弹窗 -->
+  <AppAboutEdit v-model:visible="showEdit" :data="data" @done="reload" />
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import gfm from '@bytemd/plugin-gfm';
+  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
+  import highlight from '@bytemd/plugin-highlight';
+  import 'bytemd/dist/index.min.css';
+  import 'github-markdown-css/github-markdown-light.css';
+  import 'github-markdown-css/github-markdown-light.css';
+  import AppAboutEdit from './app-about-edit.vue';
+
+  defineProps<{
+    data: any;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+  }>();
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+
+  /* 打开编辑弹窗 */
+  const openEdit = () => {
+    showEdit.value = true;
+  };
+
+  const reload = () => {
+    emit('done');
+  };
+
+  // 插件
+  const plugins = ref([
+    gfm({
+      locale: zh_HansGfm
+    }),
+    highlight()
+  ]);
+</script>
diff --git a/src/views/system/myApp/detail/components/app-annex-edit.vue b/src/views/system/myApp/detail/components/app-annex-edit.vue
new file mode 100644
index 0000000..e35e936
--- /dev/null
+++ b/src/views/system/myApp/detail/components/app-annex-edit.vue
@@ -0,0 +1,221 @@
+<!-- 角色编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="600"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="isUpdate ? '编辑内容' : '上传文件'"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="上传文件" name="fileName" v-if="!isUpdate">
+        <span
+          class="ele-text-success"
+          v-if="fileName"
+          style="margin-right: 10px"
+        >
+          {{ fileName }}
+        </span>
+        <a-upload
+          :show-upload-list="false"
+          :accept="'video/*'"
+          v-if="!fileName"
+          :customRequest="onUpload"
+        >
+          <a-button type="primary" class="ele-btn-icon">
+            <template #icon>
+              <UploadOutlined />
+            </template>
+            <span>上传文件</span>
+          </a-button>
+        </a-upload>
+      </a-form-item>
+      <a-form-item label="设置分类" name="name">
+        <SelectDict
+          dict-code="groupId"
+          :placeholder="`选择分类`"
+          v-model:value="form.groupName"
+          @done="chooseGroupId"
+        />
+      </a-form-item>
+      <a-form-item label="文件名称" name="name">
+        <a-input
+          allow-clear
+          :maxlength="20"
+          placeholder="请输入文件名称"
+          v-model:value="form.name"
+        />
+      </a-form-item>
+      <a-form-item label="描述" name="comments">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="这一刻的想法.."
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import type { FileRecord } from '@/api/system/file/model';
+  import { messageLoading } from 'ele-admin-pro';
+  import { addFiles, updateFiles, uploadFile } from '@/api/system/file';
+  import { UploadOutlined } from '@ant-design/icons-vue';
+  import { RuleObject } from 'ant-design-vue/es/form';
+  import { DictData } from '@/api/system/dict-data/model';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: FileRecord | null;
+  }>();
+
+  //
+  const formRef = ref<FormInstance | null>(null);
+  const fileName = ref('');
+  // 是否是修改
+  const isUpdate = ref(false);
+  // 提交状态
+  const loading = ref(false);
+
+  // 表单数据
+  const { form, resetFields, assignFields } = useFormData<FileRecord>({
+    id: 0,
+    name: '',
+    comments: ''
+  });
+
+  // 表单验证规则
+  const rules = reactive<Record<string, Rule[]>>({
+    fileName: [
+      {
+        required: true,
+        message: '请上传文件',
+        type: 'string',
+        trigger: 'blur',
+        validator: async (_rule: RuleObject) => {
+          if (!isUpdate.value && fileName.value.length == 0) {
+            return Promise.reject('请上传文件');
+          }
+          return Promise.resolve();
+        }
+      }
+    ],
+    name: [
+      {
+        required: true,
+        message: '请输入文件名称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseGroupId = (item: DictData) => {
+    form.groupId = item.dictDataId;
+    form.groupName = item.dictDataName;
+  };
+
+  // 上传文件
+  const onUpload = (item) => {
+    const { file } = item;
+    if (!file.type.startsWith('video')) {
+      message.error('文件格式不正确！');
+      return;
+    }
+    if (file.size / 1024 / 1024 > 100) {
+      message.error('大小不能超过 100MB');
+      return;
+    }
+    const hide = messageLoading({
+      content: '上传中..',
+      duration: 0,
+      mask: true
+    });
+    uploadFile(file)
+      .then((data) => {
+        hide();
+        fileName.value = String(data.name);
+        message.success('上传成功');
+      })
+      .catch((e) => {
+        message.error(e.message);
+        hide();
+      });
+  };
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const saveOrUpdate = isUpdate.value ? updateFiles : addFiles;
+        saveOrUpdate(form)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          assignFields(props.data);
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+        formRef.value?.clearValidate();
+      }
+    }
+  );
+</script>
diff --git a/src/views/system/myApp/detail/components/app-annex.vue b/src/views/system/myApp/detail/components/app-annex.vue
new file mode 100644
index 0000000..f97f657
--- /dev/null
+++ b/src/views/system/myApp/detail/components/app-annex.vue
@@ -0,0 +1,302 @@
+<template>
+  <!-- 表格 -->
+  <ele-pro-table
+    ref="tableRef"
+    row-key="id"
+    :columns="columns"
+    :datasource="datasource"
+    :customRow="customRow"
+    :scroll="{ x: 800 }"
+    cache-key="proAppAnnexTable"
+  >
+    <template #toolbar>
+      <a-space>
+        <a-upload :show-upload-list="false" :customRequest="onUpload">
+          <a-button class="ele-btn-icon">
+            <template #icon>
+              <UploadOutlined />
+            </template>
+            <span>上传文件</span>
+          </a-button>
+        </a-upload>
+        <a-button
+          danger
+          type="primary"
+          class="ele-btn-icon"
+          v-if="selection.length > 0"
+          @click="removeBatch"
+        >
+          <template #icon>
+            <delete-outlined />
+          </template>
+          <span>删除</span>
+        </a-button>
+        <a-input-search
+          allow-clear
+          v-model:value="searchText"
+          placeholder="请输入关键词"
+          @search="reload"
+          @pressEnter="reload"
+        />
+      </a-space>
+    </template>
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.dataIndex === 'name'">
+        <span>{{ record.name }}</span>
+        <a-tooltip :title="`复制链接地址`">
+          <copy-outlined
+            style="padding-left: 4px"
+            @click="copyText(record.downloadUrl)"
+          />
+        </a-tooltip>
+      </template>
+      <template v-if="column.key === 'action'">
+        <a @click="openPreview(record.downloadUrl)">预览</a>
+        <a-divider type="vertical" />
+        <a :href="record.downloadUrl" target="_blank">下载</a>
+        <a-divider type="vertical" />
+        <a @click="openEdit(record)">修改</a>
+        <a-divider type="vertical" />
+        <a-popconfirm
+          placement="topRight"
+          title="确定要删除此文件吗？"
+          @confirm="remove(record)"
+        >
+          <a class="ele-text-danger">删除</a>
+        </a-popconfirm>
+      </template>
+    </template>
+  </ele-pro-table>
+  <!-- 编辑弹窗 -->
+  <app-annex-edit v-model:visible="showEdit" :data="current" @done="reload" />
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref, watch } from 'vue';
+  import { message, Modal } from 'ant-design-vue/es';
+  import {
+    UploadOutlined,
+    DeleteOutlined,
+    CopyOutlined,
+    ExclamationCircleOutlined
+  } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro/es';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { messageLoading, toDateString } from 'ele-admin-pro/es';
+  import AppAnnexEdit from './app-annex-edit.vue';
+  import {
+    pageFiles,
+    removeFile,
+    removeFiles,
+    uploadOssByAppId
+  } from '@/api/system/file';
+  import type { FileRecord, FileRecordParam } from '@/api/system/file/model';
+  import { copyText, openPreview } from '@/utils/common';
+  import { FILE_SERVER } from '@/config/setting';
+
+  const props = defineProps<{
+    appId: any;
+    data: any;
+  }>();
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+  // 表格选中数据
+  const selection = ref<FileRecord[]>([]);
+  // 当前编辑数据
+  const current = ref<FileRecord | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  const type = ref('name');
+  const groupId = ref<number>(0);
+  const searchText = ref('');
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      key: 'index',
+      width: 48,
+      align: 'center',
+      fixed: 'left',
+      hideInSetting: true,
+      customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
+    },
+    {
+      title: '文件名称',
+      dataIndex: 'name',
+      ellipsis: true
+    },
+    {
+      title: '描述',
+      dataIndex: 'comments',
+      ellipsis: true
+    },
+    {
+      title: '文件大小',
+      dataIndex: 'length',
+      sorter: true,
+      showSorterTooltip: false,
+      ellipsis: true,
+      customRender: ({ text }) => {
+        if (text < 1024) {
+          return text + 'B';
+        } else if (text < 1024 * 1024) {
+          return (text / 1024).toFixed(1) + 'KB';
+        } else if (text < 1024 * 1024 * 1024) {
+          return (text / 1024 / 1024).toFixed(1) + 'M';
+        } else {
+          return (text / 1024 / 1024 / 1024).toFixed(1) + 'G';
+        }
+      },
+      width: 120
+    },
+    {
+      title: '上传者',
+      width: 120,
+      dataIndex: 'createNickname'
+    },
+    {
+      title: '上传时间',
+      dataIndex: 'createTime',
+      sorter: true,
+      width: 180,
+      showSorterTooltip: false,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text)
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 260,
+      align: 'center'
+    }
+  ]);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    where = {};
+    if (type.value == 'name') {
+      where.name = searchText.value;
+    }
+    if (type.value == 'createNickname') {
+      where.createNickname = searchText.value;
+    }
+    if (groupId.value > 0) {
+      where.groupId = groupId.value;
+    }
+    // where.contentType = 'application';
+    where.appId = props.appId;
+    return pageFiles({ ...where, ...orders, page, limit });
+  };
+
+  /* 搜索 */
+  const reload = (where?: FileRecordParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: FileRecord) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: FileRecord) => {
+    const hide = messageLoading('请求中..', 0);
+    removeFile(row.id)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的文件吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = messageLoading('请求中..', 0);
+        removeFiles(selection.value.map((d) => d.id))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  // 上传文件
+  const onUpload = (item) => {
+    const { file } = item;
+    if (file.size / 1024 / 1024 > 100) {
+      message.error('大小不能超过 100MB');
+      return;
+    }
+    const hide = messageLoading({
+      content: '上传中..',
+      duration: 0,
+      mask: true
+    });
+    uploadOssByAppId(file, props.data.appId)
+      .then((data) => {
+        console.log(data);
+        hide();
+        message.success('上传成功');
+        reload();
+      })
+      .catch((e) => {
+        message.error(e.message);
+        hide();
+      });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: FileRecord) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openPreview(FILE_SERVER + record.downloadUrl);
+      }
+    };
+  };
+
+  watch(
+    () => props.appId,
+    (appId) => {
+      if (appId) {
+        reload();
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'AppAnnexIndex'
+  };
+</script>
diff --git a/src/views/system/myApp/detail/components/app-field-edit.vue b/src/views/system/myApp/detail/components/app-field-edit.vue
new file mode 100644
index 0000000..d9422f4
--- /dev/null
+++ b/src/views/system/myApp/detail/components/app-field-edit.vue
@@ -0,0 +1,177 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="1000"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑参数' : '添加参数'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="{ md: { span: 2 }, sm: { span: 4 }, xs: { span: 24 } }"
+      :wrapper-col="{ md: { span: 21 }, sm: { span: 22 }, xs: { span: 24 } }"
+    >
+      <a-form-item label="名称" name="name">
+        <a-input allow-clear placeholder="字段名称" v-model:value="form.name" />
+      </a-form-item>
+      <a-form-item label="参数" name="comments">
+        <!-- 编辑器 -->
+        <byte-md-editor
+          v-model:value="form.comments"
+          placeholder="参数内容"
+          :locale="zh_Hans"
+          mode="split"
+          :plugins="plugins"
+          height="300px"
+          maxLength="500"
+          :editorConfig="{ lineNumbers: true }"
+        />
+      </a-form-item>
+      <a-form-item label="排序" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="99999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { AppField } from '@/api/oa/app/field/model';
+  import useFormData from '@/utils/use-form-data';
+  import { decrypt, encrypt } from '@/utils/common';
+  import { addAppField, updateAppField } from '@/api/oa/app/field';
+  import { message } from 'ant-design-vue/es';
+  import zh_Hans from 'bytemd/locales/zh_Hans.json';
+  import gfm from '@bytemd/plugin-gfm';
+  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
+  import highlight from '@bytemd/plugin-highlight';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    appId: number | null | undefined;
+    // 修改回显的数据
+    data?: AppField | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+
+  const formRef = ref<FormInstance | null>(null);
+
+  const { form, resetFields, assignFields } = useFormData<AppField>({
+    id: undefined,
+    appId: undefined,
+    name: '',
+    comments: '',
+    status: 0,
+    sortNumber: 0
+  });
+
+  // 表单验证规则
+  const rules = reactive({
+    comments: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写参数内容'
+      }
+    ],
+    name: [
+      {
+        required: true,
+        message: '请输入名称'
+      }
+    ]
+  });
+
+  // 插件
+  const plugins = ref([
+    gfm({
+      locale: zh_HansGfm
+    }),
+    highlight()
+  ]);
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const data = {
+          ...form,
+          appId: props.appId
+        };
+        // 加密信息处理
+        if (form.comments != '') {
+          data.comments = encrypt(form.comments);
+        } else {
+          data.comments = undefined;
+        }
+        const saveOrUpdate = isUpdate.value ? updateAppField : addAppField;
+        console.log(isUpdate.value);
+        saveOrUpdate(data)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          const comments = decrypt(props.data.comments);
+          assignFields(props.data);
+          form.comments = comments;
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>
diff --git a/src/views/system/myApp/detail/components/app-field-search.vue b/src/views/system/myApp/detail/components/app-field-search.vue
new file mode 100644
index 0000000..c72d354
--- /dev/null
+++ b/src/views/system/myApp/detail/components/app-field-search.vue
@@ -0,0 +1,13 @@
+<template>
+  <a-button @click="add">添加参数</a-button>
+</template>
+
+<script lang="ts" setup>
+  const emit = defineEmits<{
+    (e: 'add'): void;
+  }>();
+
+  const add = () => {
+    emit('add');
+  };
+</script>
diff --git a/src/views/system/myApp/detail/components/app-field.vue b/src/views/system/myApp/detail/components/app-field.vue
new file mode 100644
index 0000000..6bd51b2
--- /dev/null
+++ b/src/views/system/myApp/detail/components/app-field.vue
@@ -0,0 +1,208 @@
+<template>
+  <div class="app-task">
+    <!-- 表格 -->
+    <ele-pro-table
+      ref="tableRef"
+      row-key="taskId"
+      :columns="columns"
+      :datasource="datasource"
+      tool-class="ele-toolbar-form"
+      class="sys-org-table"
+    >
+      <template #toolbar>
+        <AppFieldSearch @add="openEdit" @remove="removeBatch" />
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'comments'">
+          <byte-md-viewer
+            :value="decrypt(record.comments)"
+            :plugins="plugins"
+          />
+        </template>
+        <template v-if="column.key === 'action'">
+          <a @click="moveUp(record)">上移<ArrowUpOutlined /></a>
+          <a-divider type="vertical" />
+          <a @click="openEdit(record)">编辑</a>
+          <a-divider type="vertical" />
+          <a-popconfirm title="确定要删除此记录吗？" @confirm="remove(record)">
+            <a class="ele-text-danger">删除</a>
+          </a-popconfirm>
+        </template>
+      </template>
+    </ele-pro-table>
+    <!-- 编辑弹窗 -->
+    <AppFieldEdit
+      v-model:visible="showEdit"
+      :app-id="data.appId"
+      :data="current"
+      @done="reload"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref, watch } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import type { DatasourceFunction } from 'ele-admin-pro/es/ele-pro-table/types';
+  import AppFieldSearch from './app-field-search.vue';
+  import { decrypt } from '@/utils/common';
+  import { App } from '@/api/oa/app/model';
+  import AppFieldEdit from './app-field-edit.vue';
+  import { AppField, AppFieldParam } from '@/api/oa/app/field/model';
+  import {
+    pageAppField,
+    removeAppField,
+    removeBatchAppField,
+    updateAppField
+  } from '@/api/oa/app/field';
+  import { ArrowUpOutlined } from '@ant-design/icons-vue';
+  import gfm from '@bytemd/plugin-gfm';
+  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
+  import highlight from '@bytemd/plugin-highlight';
+
+  const props = defineProps<{
+    appId: any;
+    data: App;
+  }>();
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+  const selection = ref<any[]>();
+  // 当前编辑数据
+  const current = ref<AppField | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    // 搜索条件
+    where.appId = props.appId;
+    return pageAppField({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<any[]>([
+    {
+      title: '名称',
+      dataIndex: 'name',
+      width: 180
+    },
+    {
+      title: '内容',
+      dataIndex: 'comments',
+      key: 'comments',
+      ellipsis: true
+    },
+    {
+      title: '排序',
+      dataIndex: 'sortNumber',
+      sorter: true,
+      width: 100,
+      align: 'center'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  const moveUp = (row?: AppField) => {
+    updateAppField({
+      id: row?.id,
+      sortNumber: Number(row?.sortNumber) + 1
+    }).then((msg) => {
+      message.success(msg);
+      reload();
+    });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: AppField) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 搜索 */
+  const reload = (where?: AppFieldParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 删除单个 */
+  const remove = (row: AppField) => {
+    const hide = message.loading('请求中..', 0);
+    removeAppField(row.id)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value?.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    if (selection.value?.length) {
+      Modal.confirm({
+        title: '提示',
+        content: '确定要删除选中的记录吗?',
+        icon: createVNode(ExclamationCircleOutlined),
+        maskClosable: true,
+        onOk: () => {
+          const hide = message.loading('请求中..', 0);
+          removeBatchAppField(selection.value.map((d) => d.id))
+            .then((msg) => {
+              hide();
+              message.success(msg);
+              reload();
+            })
+            .catch((e) => {
+              hide();
+              message.error(e.message);
+            });
+        }
+      });
+    }
+  };
+
+  // 插件
+  const plugins = ref([
+    gfm({
+      locale: zh_HansGfm
+    }),
+    highlight()
+  ]);
+
+  watch(
+    () => props.appId,
+    (appId) => {
+      if (appId) {
+        reload();
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'AppFieldIndex'
+  };
+</script>
diff --git a/src/views/system/myApp/detail/components/app-info-edit.vue b/src/views/system/myApp/detail/components/app-info-edit.vue
new file mode 100644
index 0000000..9742814
--- /dev/null
+++ b/src/views/system/myApp/detail/components/app-info-edit.vue
@@ -0,0 +1,559 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    width="80%"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑' : '新增'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
+      :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
+    >
+      <a-descriptions title="基本信息" :column="2" bordered>
+        <a-descriptions-item
+          label="Logo"
+          layout="vertical"
+          :labelStyle="{ width: '200px', color: '#808080' }"
+        >
+          <SelectFile
+            :placeholder="`请选择图片`"
+            :limit="1"
+            :data="logo"
+            @done="chooseFile"
+            @del="onDeleteItem"
+          />
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="二维码"
+          layout="vertical"
+          :labelStyle="{ width: '200px', color: '#808080' }"
+        >
+          <SelectFile
+            :placeholder="`请选择图片`"
+            :limit="4"
+            :data="appQrcode"
+            @done="chooseFile2"
+            @del="onDeleteItem2"
+          />
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="名称"
+          :labelStyle="{ width: '200px', color: '#808080' }"
+        >
+          <a-input
+            allow-clear
+            placeholder="请输入应用名称"
+            class="input-item"
+            v-model:value="form.appName"
+          />
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="状态"
+          :labelStyle="{ width: '200px', color: '#808080' }"
+        >
+          <DictSelect
+            dict-code="appstoreStatus"
+            placeholder="请选择应用状态"
+            class="input-item"
+            v-model:value="form.appStatus"
+          />
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="TenantId"
+          :labelStyle="{ width: '200px', color: '#808080' }"
+          ><a-input-number
+            allow-clear
+            placeholder="请输入租户ID"
+            class="input-item"
+            :maxlength="5"
+            v-model:value="form.tenantCode"
+        /></a-descriptions-item>
+        <a-descriptions-item
+          label="标识"
+          :labelStyle="{ width: '200px', color: '#808080' }"
+          ><a-input
+            allow-clear
+            :maxlength="16"
+            class="input-item"
+            placeholder="请输入应用标识(英文字母)"
+            v-model:value="form.appCode"
+            @change="changeAppCode"
+        /></a-descriptions-item>
+        <a-descriptions-item
+          label="AppSecret"
+          :labelStyle="{ width: '200px', color: '#808080' }"
+        >
+          <span>****</span>
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="所属企业"
+          :labelStyle="{ width: '200px', color: '#808080' }"
+        >
+          <SelectCompany
+            :placeholder="`所属企业`"
+            class="input-item"
+            v-model:value="form.companyName"
+            @done="chooseCompanyName"
+          />
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="项目域名"
+          :labelStyle="{ width: '200px', color: '#808080' }"
+        >
+          <a-input
+            allow-clear
+            class="input-item"
+            placeholder="请输入项目地址"
+            v-model:value="form.appUrl"
+          />
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="Git仓库地址"
+          :labelStyle="{ width: '200px', color: '#808080' }"
+        >
+          <a-input
+            allow-clear
+            class="input-item"
+            placeholder="请输入Git仓库地址"
+            v-model:value="form.gitUrl"
+          />
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="项目类型"
+          :labelStyle="{ width: '200px', color: '#808080' }"
+        >
+          <DictSelect
+            dict-code="appType"
+            class="input-item"
+            placeholder="请选择项目类型"
+            v-model:value="form.appType"
+          />
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="开发者"
+          :labelStyle="{ width: '200px', color: '#808080' }"
+        >
+          <SelectCompany
+            :placeholder="`开发者单位`"
+            class="input-item"
+            v-model:value="form.developer"
+            @done="chooseDeveloper"
+          />
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="是否作为案例展示"
+          :labelStyle="{ width: '200px', color: '#808080' }"
+        >
+          <a-switch
+            size="small"
+            :checked="form.showCase"
+            @change="updatShowCase"
+          />
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="是否推荐到首页"
+          :labelStyle="{ width: '200px', color: '#808080' }"
+        >
+          <a-switch
+            size="small"
+            :checked="form.showIndex"
+            @change="updatShowIndex"
+          />
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="描述"
+          layout="vertical"
+          :span="2"
+          :labelStyle="{ width: '200px', color: '#808080' }"
+        >
+          <a-textarea
+            :rows="4"
+            :maxlength="200"
+            class="ele-fluid"
+            placeholder="请输入应用描述"
+            v-model:value="form.comments"
+          />
+        </a-descriptions-item>
+      </a-descriptions>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, ipReg, isChinese, uuid } from 'ele-admin-pro';
+  import { addApp, updateApp } from '@/api/oa/app';
+  import type { App } from '@/api/oa/app/model';
+  import { FormInstance, RuleObject } from 'ant-design-vue/es/form';
+  import { Company } from '@/api/system/company/model';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { TOKEN_STORE_NAME } from '@/config/setting';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: App | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 当期时间
+  // 已上传数据
+  const logo = ref<ItemType[]>([]);
+  const appQrcode = ref<ItemType[]>([]);
+  const images = ref<ItemType[]>([]);
+  // 日期范围选择
+  const content = ref('');
+
+  const token = localStorage.getItem(TOKEN_STORE_NAME);
+  const formRef = ref<FormInstance | null>(null);
+
+  // 用户信息
+  const form = reactive<App>({
+    // 应用id
+    appId: undefined,
+    // 应用秘钥
+    appSecret: '',
+    enName: '',
+    // 应用名称
+    appName: '',
+    // 上级id, 0是顶级
+    parentId: undefined,
+    // 应用编号
+    appCode: '',
+    // 应用图标
+    appIcon: '',
+    appQrcode: '',
+    // 应用截图
+    images: '',
+    appType: undefined,
+    appTypeMultiple: undefined,
+    // 菜单类型
+    menuType: undefined,
+    // 应用地址
+    appUrl: '',
+    gitUrl: '',
+    // 后台管理地址
+    adminUrl: undefined,
+    // 下载地址
+    downUrl: undefined,
+    serverUrl: undefined,
+    callbackUrl: undefined,
+    docsUrl: undefined,
+    prototypeUrl: undefined,
+    ipAddress: undefined,
+    fileUrl: undefined,
+    // 应用包名
+    packageName: '',
+    // 点击次数
+    clicks: '',
+    // 安装次数
+    installs: '',
+    // 项目介绍
+    content: '',
+    // 开发者(个人)
+    developer: '',
+    director: '',
+    projectDirector: '',
+    salesman: '',
+    // 软件定价
+    price: '',
+    // 评分
+    score: '',
+    // 星级
+    star: '',
+    // 菜单组件地址
+    component: '',
+    // 菜单路由地址
+    path: '',
+    // 权限标识
+    authority: '',
+    // 打开位置
+    target: '',
+    // 是否隐藏, 0否, 1是(仅注册路由不显示在左侧菜单)
+    hide: undefined,
+    // 菜单侧栏选中的path
+    active: '',
+    // 其它路由元信息
+    meta: '',
+    // 版本
+    edition: '',
+    // 版本号
+    version: '',
+    // 是否已安装
+    isUse: undefined,
+    // 排序
+    sortNumber: undefined,
+    // 备注
+    comments: undefined,
+    tenantName: '',
+    companyName: '',
+    // 租户编号
+    tenantCode: '',
+    // 租户id
+    tenantId: undefined,
+    // 创建时间
+    createTime: '',
+    appStatus: '开发中',
+    // 状态
+    status: undefined,
+    // 发布者
+    userId: '',
+    // 发布者昵称
+    nickname: '',
+    // 子菜单
+    children: [],
+    // 权限树回显选中状态, 0未选中, 1选中
+    checked: false,
+    //
+    key: undefined,
+    //
+    value: undefined,
+    //
+    parentIds: [],
+    //
+    openType: undefined,
+    //
+    search: undefined,
+    showCase: undefined,
+    showIndex: undefined,
+    recommend: undefined
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    appName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请输入应用名称',
+        trigger: 'blur'
+      }
+    ],
+    companyName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请选择所属企业',
+        trigger: 'blur'
+      }
+    ],
+    appCode: [
+      {
+        required: true,
+        type: 'string',
+        message: '请输入应用标识(英文字母)',
+        trigger: 'blur',
+        validator: async (_rule: RuleObject, value: string) => {
+          if (isChinese(value)) {
+            return Promise.reject('请输入正确的应用标识');
+          }
+          return Promise.resolve();
+        }
+      }
+    ],
+    appType: [
+      {
+        required: true,
+        message: '请选择项目类型'
+      }
+    ],
+    ipAddress: [
+      {
+        pattern: ipReg,
+        message: 'IP地址不合法',
+        type: 'string'
+      }
+    ],
+    appStatus: [
+      {
+        required: true,
+        type: 'string',
+        message: '请选择应用状态',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const { resetFields, validate } = useForm(form, rules);
+
+  const chooseCompanyName = (data: Company) => {
+    form.appUrl = data.domain;
+    form.companyName = data.companyName;
+    form.companyId = data.companyId;
+    form.tenantId = data.tenantId;
+  };
+
+  const chooseDeveloper = (data: Company) => {
+    form.developer = data.companyName;
+  };
+
+  const changeAppCode = () => {
+    form.packageName = `com.gxwebsoft.${form.appCode}`;
+  };
+  const updatShowCase = () => {
+    form.showCase = !form.showCase;
+  };
+
+  const updatShowIndex = () => {
+    form.showIndex = !form.showIndex;
+  };
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form,
+          content: content.value,
+          search: form.search ? 1 : 0,
+          images: JSON.stringify(images.value)
+          // appTypeMultiple: JSON.stringify(form.appTypeMultiple)
+        };
+        const saveOrUpdate = isUpdate.value ? updateApp : addApp;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  const chooseFile = (data: FileRecord) => {
+    logo.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.appIcon = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    logo.value.splice(index, 1);
+    form.appIcon = '';
+  };
+  const chooseFile2 = (data: FileRecord) => {
+    appQrcode.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    const arr = appQrcode.value.map((d) => d.url);
+    form.appQrcode = arr.join('|||');
+  };
+
+  const onDeleteItem2 = (index: number) => {
+    appQrcode.value.splice(index, 1);
+    form.appQrcode = '';
+  };
+
+  const reload = () => {
+    loading.value = true;
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        content.value = '';
+        logo.value = [];
+        images.value = [];
+        appQrcode.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if (props.data.appIcon) {
+            logo.value.push({
+              uid: 0,
+              url: props.data.appIcon,
+              status: 'done'
+            });
+          }
+          if (props.data.appQrcode) {
+            const split = props.data.appQrcode.split('|||');
+            split.map((url) => {
+              appQrcode.value.push({
+                uid: uuid(),
+                url: url,
+                status: 'done'
+              });
+            });
+            // appQrcode.value.push({
+            //   uid: 0,
+            //   url: props.data.appQrcode,
+            //   status: 'done'
+            // });
+          }
+          if (props.data.companyId) {
+            console.log(props.data);
+          }
+          if (props.data.images) {
+            const arr = JSON.parse(props.data.images);
+            arr.map((d) => {
+              images.value.push({
+                uid: d.uid,
+                url: d.url,
+                status: 'done'
+              });
+            });
+          }
+          if (props.data.search) {
+            form.search = props.data.search == 1 ? true : 0;
+          }
+          if (props.data.content) {
+            content.value = props.data.content;
+          }
+          isUpdate.value = true;
+          reload();
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>
+<style lang="less" scoped>
+  .input-item {
+    width: 300px;
+  }
+</style>
diff --git a/src/views/system/myApp/detail/components/app-info.vue b/src/views/system/myApp/detail/components/app-info.vue
new file mode 100644
index 0000000..75a5a12
--- /dev/null
+++ b/src/views/system/myApp/detail/components/app-info.vue
@@ -0,0 +1,176 @@
+<template>
+  <a-descriptions title="基本信息" :column="2" bordered>
+    <template #extra>
+      <a @click="openEdit">编辑</a>
+    </template>
+    <a-descriptions-item
+      label="Logo"
+      layout="vertical"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+    >
+      <ele-image-upload
+        v-model:value="logo"
+        :disabled="true"
+        :item-style="{ width: '90px', height: '90px' }"
+        :limit="1"
+      />
+    </a-descriptions-item>
+    <a-descriptions-item
+      label="二维码"
+      layout="vertical"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+    >
+      <ele-image-upload
+        v-model:value="appQrcode"
+        :disabled="true"
+        :item-style="{ width: '90px', height: '90px' }"
+        :limit="1"
+      />
+    </a-descriptions-item>
+    <a-descriptions-item
+      label="名称"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.appName }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="状态"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+    >
+      <a-badge status="processing" :text="data.appStatus" />
+    </a-descriptions-item>
+    <a-descriptions-item
+      label="TenantId"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.tenantCode }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="标识"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.appCode }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="AppSecret"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+    >
+      <a @click="openAppSecretForm">重置</a>
+      <!-- 编辑弹窗 -->
+      <AppSecretForm v-model:visible="showAppSecretForm" :app-id="data.appId" />
+    </a-descriptions-item>
+    <a-descriptions-item
+      label="所属企业"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+    >
+      {{ data.companyName }}
+    </a-descriptions-item>
+    <a-descriptions-item
+      label="项目域名"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+    >
+      <a @click="openNew(`${data.appUrl}`)">{{ data.appUrl }}</a>
+    </a-descriptions-item>
+    <a-descriptions-item
+      label="Git仓库地址"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+    >
+      <a @click="openNew(`${data.gitUrl}`)" v-if="data.gitUrl">
+        <GithubOutlined style="font-size: 20px" />
+      </a>
+    </a-descriptions-item>
+    <a-descriptions-item
+      label="项目类型"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+    >
+      APP
+    </a-descriptions-item>
+    <a-descriptions-item
+      label="开发者"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+    >
+      {{ data.developer }}
+    </a-descriptions-item>
+    <a-descriptions-item
+      label="是否作为案例展示"
+      layout="vertical"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+    >
+      {{ data.showCase ? '是' : '否' }}
+      <!--      <a-switch size="small" :checked="data.showCase" />-->
+    </a-descriptions-item>
+    <a-descriptions-item
+      label="是否推荐到首页"
+      layout="vertical"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+    >
+      {{ data.showIndex ? '是' : '否' }}
+      <!--      <a-switch size="small" :checked="data.showIndex" />-->
+    </a-descriptions-item>
+    <a-descriptions-item
+      label="描述"
+      :span="2"
+      layout="vertical"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+    >
+      <span class="ele-text-secondary">{{ data.comments }}</span>
+    </a-descriptions-item>
+    <template v-for="(item, index) in appField" :key="index">
+      <a-descriptions-item
+        :label="item.name"
+        :span="2"
+        layout="vertical"
+        :labelStyle="{ width: '200px', color: '#808080' }"
+      >
+        <byte-md-viewer :value="decrypt(item.comments)" :plugins="plugins" />
+      </a-descriptions-item>
+    </template>
+  </a-descriptions>
+  <!-- 编辑弹窗 -->
+  <AppInfoEdit v-model:visible="showEdit" :data="data" @done="reload" />
+</template>
+<script lang="ts" setup>
+  import { App } from '@/api/oa/app/model';
+  import { ref } from 'vue';
+  import AppSecretForm from './app-secret-form.vue';
+  import AppInfoEdit from './app-info-edit.vue';
+  import { AppField } from '@/api/oa/app/field/model';
+  import { decrypt, openNew } from '@/utils/common';
+  import gfm from '@bytemd/plugin-gfm';
+  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
+  import highlight from '@bytemd/plugin-highlight';
+  import { GithubOutlined } from '@ant-design/icons-vue';
+
+  defineProps<{
+    data: App;
+    logo: [] | any;
+    appField: AppField[];
+    appQrcode: any | undefined;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+  }>();
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  const showAppSecretForm = ref<boolean>(false);
+
+  const openAppSecretForm = () => {
+    showAppSecretForm.value = true;
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = () => {
+    showEdit.value = true;
+  };
+
+  // 插件
+  const plugins = ref([
+    gfm({
+      locale: zh_HansGfm
+    }),
+    highlight()
+  ]);
+
+  const reload = () => {
+    emit('done');
+  };
+</script>
diff --git a/src/views/system/myApp/detail/components/app-nenew.vue b/src/views/system/myApp/detail/components/app-nenew.vue
new file mode 100644
index 0000000..b7d5a87
--- /dev/null
+++ b/src/views/system/myApp/detail/components/app-nenew.vue
@@ -0,0 +1,255 @@
+<template>
+      <a-button @click="addRecord" style="margin-bottom: 10px">添加</a-button>
+      <table
+          class="ele-table ele-table-border ele-table-stripe ele-table-medium"
+      >
+        <thead>
+        <tr>
+          <th>状态</th>
+          <th>续费金额</th>
+          <th>开始时间</th>
+          <th>结束时间</th>
+          <th width="360">描述</th>
+          <th style="text-align: center">操作</th>
+        </tr>
+        </thead>
+        <tr v-for="(item, index) in list" :key="index">
+          <td>
+            <template v-if="item.editStatus">
+              <a-select placeholder="请选择" v-model:value="item.status">
+                <a-select-option :value="0">待缴费</a-select-option>
+                <a-select-option :value="1">已缴费</a-select-option>
+              </a-select>
+            </template>
+            <template v-else>
+              <span v-if="item.status == 1">已缴费</span>
+              <span v-if="item.status == 0">待缴费</span>
+            </template>
+          </td>
+          <td>
+            <template v-if="item.editStatus">
+              <a-input-number
+                  :min="0"
+                  :max="999999"
+                  class="ele-fluid"
+                  placeholder="请输入续费金额"
+                  v-model:value="item.money"
+              />
+            </template>
+            <template v-else> ￥{{ item.money }} </template>
+          </td>
+          <td>
+            <template v-if="item.editStatus">
+              <a-date-picker
+                  placeholder="开始日期"
+                  value-format="YYYY-MM-DD"
+                  v-model:value="item.startTime"
+              />
+            </template>
+            <template v-else>
+              {{ toDateString(item.startTime, 'yyyy-MM-dd') }}
+            </template>
+          </td>
+          <td>
+            <template v-if="item.editStatus">
+              <a-date-picker
+                  placeholder="结束日期"
+                  value-format="YYYY-MM-DD"
+                  v-model:value="item.endTime"
+              />
+            </template>
+            <template v-else>
+              {{ toDateString(item.endTime, 'yyyy-MM-dd') }}
+            </template>
+          </td>
+          <td>
+            <template v-if="item.editStatus">
+              <a-input
+                  class="ele-fluid"
+                  placeholder="请输入描述内容"
+                  v-model:value="item.comments"
+              />
+              <a-upload
+                  v-model:file-list="item.images"
+                  class="upload-list-inline"
+                  list-type="picture"
+                  :before-upload="beforeUpload"
+              >
+                <a-button>
+                  <UploadOutlined />
+                  上传附件
+                </a-button>
+              </a-upload>
+            </template>
+            <template v-else>
+              <div class="comments">{{ item.comments }}</div>
+              <div class="files">
+                <a-upload
+                    v-model:file-list="item.images"
+                    class="upload-list-inline"
+                >
+                </a-upload>
+              </div>
+            </template>
+          </td>
+          <td style="text-align: center">
+            <template v-if="item.editStatus">
+              <a-space>
+                <a @click="save(item, index)">保存</a>
+                <a-divider type="vertical" />
+                <a-popconfirm title="确定要删除此记录吗？" @confirm="remove(index)">
+                  <a class="ele-text-info">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+            <template v-else>
+              <a-space>
+                <a @click="openEdit(index)">编辑</a>
+                <a-divider type="vertical" v-if="hasRole('superAdmin')" @confirm="removeRel(index)" />
+                <a-popconfirm title="确定要删除此记录吗？" v-if="hasRole('superAdmin')" @confirm="removeRel(index)">
+                  <a class="ele-text-info">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </td>
+        </tr>
+      </table>
+</template>
+
+<script setup lang="ts">
+import { hasRole } from '@/utils/permission';
+import { ref, watch } from 'vue';
+import { addAppRenew, pageAppRenew, removeAppRenew } from "@/api/oa/app/renew";
+import { AppRenew } from '@/api/oa/app/renew/model';
+import { useUserStore } from '@/store/modules/user';
+import { message } from 'ant-design-vue';
+import { toDateString } from 'ele-admin-pro';
+import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
+import { uploadOss } from "@/api/system/file";
+import { isImage } from "@/utils/common";
+
+const props = defineProps<{
+  visible: boolean;
+  editStatus?: boolean;
+  appId?: number;
+  companyId?: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'done'): void;
+  (e: 'update:visible', visible: boolean): void;
+}>();
+
+const userStore = useUserStore();
+const list = ref<AppRenew[]>([]);
+const files = ref<ItemType[]>([]);
+
+const addRecord = () => {
+  list.value.unshift({
+    money: undefined,
+    comments: undefined,
+    startTime: undefined,
+    endTime: undefined,
+    nickname: userStore.info?.nickname,
+    status: 1,
+    images: undefined,
+    editStatus: true
+  });
+};
+
+// 文件上传事件
+const beforeUpload = (file: File) => {
+  const item: ItemType = {
+    file,
+    uid: (file as any).uid,
+    name: file.name
+  }
+  if (!file.type.startsWith("image")) {
+    if (file.size / 1024 / 1024 > 100) {
+      message.error("大小不能超过 100MB");
+      return;
+    }
+  }
+  onUpload(item);
+  return false;
+};
+
+const onUpload = (d: ItemType) => {
+  uploadOss(<File>d.file)
+      .then((result) => {
+        files.value.push({
+          uid: result.id,
+          url: result.path,
+          name: isImage(result.path) ? 'image' : result.name,
+          status: "done"
+        });
+        message.success("上传成功");
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+};
+
+const remove = (index: number) => {
+  list.value.splice(index, 1);
+};
+
+const openEdit = (index: number) => {
+  list.value[index].editStatus = true
+}
+
+const removeRel = (index: number) => {
+  removeAppRenew(list.value[index].appRenewId).then(() => {
+    list.value.splice(index, 1);
+    message.success('删除成功')
+  })
+}
+
+const save = (item: AppRenew, index: number) => {
+  item.appId = props.appId;
+  item.companyId = props.companyId;
+  item.startTime = item.startTime ? item.startTime + ' 00:00:00' : '';
+  item.endTime = item.endTime ? item.endTime + ' 23:59:59' : '';
+  item.nickname = userStore.info?.nickname;
+  item.userId = userStore.info?.userId;
+  if(files.value.length > 0){
+    item.images = JSON.stringify(files.value)
+  }
+  if (item.money == undefined || item.money == 0) {
+    message.error('请填写金额');
+    return false;
+  }
+  addAppRenew(item).then(() => {
+    list.value[index].editStatus = false;
+    message.success('保存成功');
+  });
+};
+
+const reload = () => {
+  pageAppRenew({ appId: props.appId }).then((res) => {
+    if (res?.list) {
+      list.value = res?.list.map((d) => {
+        d.editStatus = false;
+        if(d.images){
+          d.images = JSON.parse(d.images);
+        }
+        return d;
+      });
+    }
+  });
+};
+
+watch(
+    () => props.appId,
+    (options) => {
+      if (options) {
+        reload();
+      }
+    },
+    {
+      immediate: true
+    }
+);
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/views/system/myApp/detail/components/app-photo-edit.vue b/src/views/system/myApp/detail/components/app-photo-edit.vue
new file mode 100644
index 0000000..cb26f47
--- /dev/null
+++ b/src/views/system/myApp/detail/components/app-photo-edit.vue
@@ -0,0 +1,240 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    width="80%"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑' : '添加'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
+      :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
+    >
+      <div class="content">
+        <SelectFile
+          :placeholder="`请选择图片`"
+          :limit="9"
+          :data="images"
+          @done="chooseFile"
+          @del="onDeleteItem"
+        />
+        <!--        <ele-image-upload-->
+        <!--          v-model:value="images"-->
+        <!--          :limit="6"-->
+        <!--          :drag="true"-->
+        <!--          :item-style="{ width: '150px', height: '267px' }"-->
+        <!--          :upload-handler="uploadHandler"-->
+        <!--          @upload="onUpload"-->
+        <!--        />-->
+        <small class="ele-text-placeholder">
+          请上传应用截图(最多9张)，建议宽度300*533像素，小于2M/张
+        </small>
+      </div>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject } from 'ele-admin-pro';
+  import { addApp, updateApp } from '@/api/oa/app';
+  import type { App } from '@/api/oa/app/model';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { uploadFileLocal } from '@/api/system/file';
+  import { TOKEN_STORE_NAME } from '@/config/setting';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: App | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 当期时间
+  const logo = ref<ItemType[]>([]);
+  const appQrcode = ref<ItemType[]>([]);
+  const images = ref<ItemType[]>([]);
+  const content = ref('');
+  const requirement = ref('');
+
+  const token = localStorage.getItem(TOKEN_STORE_NAME);
+  const formRef = ref<FormInstance | null>(null);
+
+  // 用户信息
+  const form = reactive<App>({
+    // 应用id
+    appId: undefined,
+    // 应用截图
+    images: ''
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  const { resetFields } = useForm(form);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form,
+          content: content.value,
+          requirement: requirement.value,
+          search: form.search ? 1 : 0,
+          images: JSON.stringify(images.value)
+          // appTypeMultiple: JSON.stringify(form.appTypeMultiple)
+        };
+        const saveOrUpdate = isUpdate.value ? updateApp : addApp;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 上传事件 */
+  const uploadHandler = (file: File) => {
+    const item: ItemType = {
+      file,
+      uid: (file as any).uid,
+      name: file.name
+    };
+    if (!file.type.startsWith('image')) {
+      message.error('只能选择图片');
+      return;
+    }
+    if (file.size / 1024 / 1024 > 2) {
+      message.error('大小不能超过 2MB');
+      return;
+    }
+    onUpload(item);
+  };
+
+  // 上传文件
+  const onUpload = (item) => {
+    const { file } = item;
+    uploadFileLocal(file, props.data?.appId)
+      .then((data) => {
+        images.value.push({
+          uid: data.id,
+          url: data.url,
+          status: 'done'
+        });
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  const chooseFile = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.url,
+      status: 'done'
+    });
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+  };
+
+  const reload = () => {
+    loading.value = true;
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        content.value = '';
+        requirement.value = '';
+        logo.value = [];
+        images.value = [];
+        appQrcode.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if (props.data.appIcon) {
+            logo.value.push({
+              uid: 0,
+              url: props.data.appIcon,
+              status: 'done'
+            });
+          }
+          if (props.data.appQrcode) {
+            appQrcode.value.push({
+              uid: 0,
+              url: props.data.appQrcode,
+              status: 'done'
+            });
+          }
+          if (props.data.companyId) {
+            console.log(props.data);
+          }
+          if (props.data.images) {
+            const arr = JSON.parse(props.data.images);
+            arr.map((d, i) => {
+              images.value.push({
+                uid: d.uid,
+                url: d.url,
+                status: 'done'
+              });
+            });
+          }
+          if (props.data.search) {
+            form.search = props.data.search == 1 ? true : 0;
+          }
+          if (props.data.content) {
+            content.value = props.data.content;
+          }
+          if (props.data.requirement) {
+            requirement.value = props.data.requirement;
+          }
+          isUpdate.value = true;
+          reload();
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>
diff --git a/src/views/system/myApp/detail/components/app-photo.vue b/src/views/system/myApp/detail/components/app-photo.vue
new file mode 100644
index 0000000..f81208d
--- /dev/null
+++ b/src/views/system/myApp/detail/components/app-photo.vue
@@ -0,0 +1,52 @@
+<template>
+  <a-descriptions title="应用截图" :bordered="false">
+    <template #extra>
+      <a @click="openEdit">编辑</a>
+    </template>
+  </a-descriptions>
+  <div class="content">
+    <template v-if="data.appType === 'web'">
+      <a-image-preview-group>
+        <a-space :size="20" v-for="(item, index) in images" :key="index">
+          <a-image :width="360" :src="item.url" />
+        </a-space>
+      </a-image-preview-group>
+    </template>
+    <template v-else>
+      <a-image-preview-group>
+        <a-space :size="20" v-for="(item, index) in images" :key="index">
+          <a-image :width="200" :src="item.url" />
+        </a-space>
+      </a-image-preview-group>
+    </template>
+  </div>
+  <!-- 编辑弹窗 -->
+  <AppPhotoEdit v-model:visible="showEdit" :data="data" @done="reload" />
+</template>
+<script lang="ts" setup>
+  import { App } from '@/api/oa/app/model';
+  import { ref } from 'vue';
+  import AppPhotoEdit from './app-photo-edit.vue';
+
+  defineProps<{
+    visible: boolean;
+    data: App;
+    images: any[];
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+  }>();
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+
+  /* 打开编辑弹窗 */
+  const openEdit = () => {
+    showEdit.value = true;
+  };
+
+  const reload = () => {
+    emit('done');
+  };
+</script>
diff --git a/src/views/system/myApp/detail/components/app-profile-edit.vue b/src/views/system/myApp/detail/components/app-profile-edit.vue
new file mode 100644
index 0000000..0d28aad
--- /dev/null
+++ b/src/views/system/myApp/detail/components/app-profile-edit.vue
@@ -0,0 +1,256 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    width="80%"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑' : '新增'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+        ref="formRef"
+        :model="form"
+        :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
+        :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
+    >
+      <!-- 编辑器 -->
+      <byte-md-editor
+          v-model:value="requirement"
+          placeholder="请输入您的内容，图片请直接粘贴"
+          :locale="zh_Hans"
+          mode="split"
+          :plugins="plugins"
+          height="500px"
+          :editorConfig="{ lineNumbers: true }"
+          @paste="onPaste"
+      />
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import {assignObject} from "ele-admin-pro";
+  import { addApp, updateApp } from '@/api/oa/app';
+  import type { App } from '@/api/oa/app/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  // 中文语言文件
+  import zh_Hans from 'bytemd/locales/zh_Hans.json';
+  // 链接、删除线、复选框、表格等的插件
+  // 插件的中文语言文件
+  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
+  import 'bytemd/dist/index.min.css';
+  import 'github-markdown-css/github-markdown-light.css';
+  import highlight from '@bytemd/plugin-highlight';
+  // 中文语言文件
+  import gfm from '@bytemd/plugin-gfm';
+  // // 预览界面的样式，这里用的 github 的 markdown 主题
+  import 'github-markdown-css/github-markdown-light.css';
+  import {FormInstance} from 'ant-design-vue/es/form';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { uploadFile } from "@/api/system/file";
+  import { TOKEN_STORE_NAME } from "@/config/setting";
+
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: App | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  const images = ref<ItemType[]>([]);
+  const content = ref('');
+  const requirement = ref('');
+
+  // 插件
+  const plugins = ref([
+    gfm({
+      locale: zh_HansGfm
+    }),
+    highlight()
+  ]);
+
+  const token = localStorage.getItem(TOKEN_STORE_NAME);
+  const formRef = ref<FormInstance | null>(null);
+
+
+  // 用户信息
+  const form = reactive<App>({
+    // 应用id
+    appId: undefined,
+    // 项目需求
+    requirement: ''
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  const { resetFields, validate, validateInfos } = useForm(form);
+
+  const config = ref({
+    height: 500,
+    images_upload_handler: (blobInfo, success, error) => {
+      const file = blobInfo.blob();
+      // 使用 axios 上传，实际开发这段建议写在 api 中再调用 api
+      const formData = new FormData();
+      formData.append('file', file, file.name);
+      uploadFile(<File>file)
+        .then((result) => {
+          if (result.length) {
+            if (file.size / 1024 / 1024 > 2) {
+              error('图片大小不能超过 2MB');
+            }
+            success(result.url);
+          } else {
+            error('上传失败');
+          }
+        })
+        .catch((e) => {
+          message.error(e.message);
+        });
+    },
+  });
+
+  /* 粘贴图片上传服务器并插入编辑器 */
+  const onPaste = (e) => {
+    console.log(e);
+    const items = (e.clipboardData || e.originalEvent.clipboardData).items;
+    console.log(items);
+    let hasFile = false;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.indexOf('image') !== -1) {
+        let file = items[i].getAsFile();
+        const item: ItemType = {
+          file,
+          uid: (file as any).lastModified,
+          name: file.name
+        };
+        uploadFile(<File>item.file)
+          .then((result) => {
+            const addPath = '!['+result.name+']('+ result.url+')\n\r';
+            content.value = content.value + addPath
+          })
+          .catch((e) => {
+            message.error(e.message);
+          });
+        hasFile = true;
+      }
+    }
+    if (hasFile) {
+      e.preventDefault();
+    }
+  }
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form,
+          content: content.value,
+          requirement: requirement.value,
+          images: JSON.stringify(images.value)
+        };
+        const saveOrUpdate = isUpdate.value ? updateApp : addApp;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 上传事件 */
+  const uploadHandler = (file: File) => {
+    const item: ItemType = {
+      file,
+      uid: (file as any).uid,
+      name: file.name
+    };
+    if (!file.type.startsWith('image')) {
+      message.error('只能选择图片');
+      return;
+    }
+    if (file.size / 1024 / 1024 > 2) {
+      message.error('大小不能超过 2MB');
+      return;
+    }
+    onUpload(item);
+  };
+
+  // 上传文件
+  const onUpload = (item) => {
+    const { file } = item;
+    uploadFile(file)
+      .then((data) => {
+        images.value.push({
+          uid: data.id,
+          url: data.url,
+          status: 'done'
+        });
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        content.value = '';
+        requirement.value = '';
+        if (props.data) {
+          assignObject(form, props.data);
+          if (props.data.requirement){
+            requirement.value = props.data.requirement;
+          }
+          if (props.data.content) {
+            content.value = props.data.content;
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>
diff --git a/src/views/system/myApp/detail/components/app-profile.vue b/src/views/system/myApp/detail/components/app-profile.vue
new file mode 100644
index 0000000..63c23a7
--- /dev/null
+++ b/src/views/system/myApp/detail/components/app-profile.vue
@@ -0,0 +1,66 @@
+<template>
+  <a-descriptions title="协同文档" :bordered="false">
+    <template #extra>
+      <a @click="openEdit">编辑</a>
+    </template>
+  </a-descriptions>
+  <byte-md-viewer :value="data.requirement" :plugins="plugins" />
+  <a-empty
+    v-if="data.requirement == ''"
+    image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
+    :image-style="{
+      height: '60px'
+    }"
+  >
+    <template #description>
+      <span class="ele-text-placeholder">类似腾讯文档的功能，支持多人编辑</span>
+    </template>
+    <a-button type="primary" @click="openEdit">编辑</a-button>
+  </a-empty>
+  <!-- 编辑弹窗 -->
+  <AppProfileEdit v-model:visible="showEdit" :data="data" @done="reload" />
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import gfm from '@bytemd/plugin-gfm';
+  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
+  import highlight from '@bytemd/plugin-highlight';
+  import 'bytemd/dist/index.min.css';
+  import 'github-markdown-css/github-markdown-light.css';
+  import 'github-markdown-css/github-markdown-light.css';
+  import AppProfileEdit from './app-profile-edit.vue';
+
+  defineProps<{
+    appId: number;
+    data: any;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+  }>();
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+
+  /* 打开编辑弹窗 */
+  const openEdit = () => {
+    showEdit.value = true;
+  };
+
+  const reload = () => {
+    emit('done');
+  };
+
+  // 插件
+  const plugins = ref([
+    gfm({
+      locale: zh_HansGfm
+    }),
+    highlight()
+  ]);
+</script>
+<style lang="less">
+  .app-profile * {
+    max-width: 1000px;
+  }
+</style>
diff --git a/src/views/system/myApp/detail/components/app-secret-form.vue b/src/views/system/myApp/detail/components/app-secret-form.vue
new file mode 100644
index 0000000..8931218
--- /dev/null
+++ b/src/views/system/myApp/detail/components/app-secret-form.vue
@@ -0,0 +1,210 @@
+<!-- 角色编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="550"
+    :visible="visible"
+    :confirm-loading="loading"
+    title="重置AppSecret"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    ok-text="重置"
+    cancel-text="关闭"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :label-col="styleResponsive ? { md: 5, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <template v-if="!appSecret">
+        <a-form-item label="手机号码" name="phone">
+          <a-input
+            :maxlength="20"
+            :disabled="true"
+            placeholder="请输入短信验证码"
+            v-model:value="form.phone"
+          />
+        </a-form-item>
+        <a-form-item label="短信验证码" name="code">
+          <div class="login-input-group">
+            <a-input
+              placeholder="请输入验证码"
+              v-model:value="form.code"
+              :maxlength="6"
+              allow-clear
+            />
+            <a-button
+              class="login-captcha"
+              :disabled="!!countdownTime"
+              @click="openImgCodeModal"
+            >
+              <span v-if="!countdownTime" @click="sendCode">发送验证码</span>
+              <span v-else>已发送 {{ countdownTime }} s</span>
+            </a-button>
+          </div>
+        </a-form-item>
+      </template>
+      <template v-else>
+        <a-form-item label="AppID" name="appId">
+          <a-typography-text copyable code class="ele-text-secondary">{{
+            appId
+          }}</a-typography-text>
+        </a-form-item>
+        <a-form-item label="AppSecret" name="appSecret">
+          <a-typography-text copyable code class="ele-text-secondary">{{
+            appSecret
+          }}</a-typography-text>
+        </a-form-item>
+      </template>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import type { FormInstance } from 'ant-design-vue/es/form';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import { User } from '@/api/system/user/model';
+  import { sendSmsCaptcha } from '@/api/login';
+  import { updateAppSecret } from '@/api/oa/app';
+  import { createCode, encrypt } from '@/utils/common';
+  import { pageAppUser } from '@/api/oa/app/user';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    appId?: number;
+  }>();
+
+  const formRef = ref<FormInstance | null>(null);
+  // 验证码倒计时时间
+  const countdownTime = ref(0);
+  // 验证码倒计时定时器
+  let countdownTimer: number | null = null;
+  const loading = ref(false);
+  const appSecret = ref('');
+
+  // 表单数据
+  const { form, resetFields } = useFormData<User>({
+    phone: '',
+    userId: undefined
+  });
+
+  /* 显示发送短信验证码弹窗 */
+  const openImgCodeModal = () => {
+    if (!form.phone) {
+      message.error('请输入手机号码');
+      return;
+    }
+  };
+  /* 发送短信验证码 */
+  const sendCode = () => {
+    sendSmsCaptcha({ phone: form.phone }).then(() => {
+      message.success('短信验证码发送成功, 请注意查收!');
+      countdownTime.value = 60;
+      // 开始对按钮进行倒计时
+      countdownTimer = window.setInterval(() => {
+        if (countdownTime.value <= 1) {
+          countdownTimer && clearInterval(countdownTimer);
+          countdownTimer = null;
+        }
+        countdownTime.value--;
+      }, 1000);
+    });
+  };
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    if (appSecret.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        updateAppSecret({
+          phone: form.phone,
+          appCode: form.code,
+          appId: props.appId,
+          appSecret: encrypt(createCode())
+        })
+          .then((res) => {
+            loading.value = false;
+            message.success(res.message);
+            appSecret.value = String(res.data);
+            // updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        pageAppUser({ appId: props.appId, role: 30 }).then((res) => {
+          if (res?.list) {
+            form.phone = res.list[0].phone;
+          }
+        });
+        console.log(props.appId);
+      } else {
+        resetFields();
+        formRef.value?.clearValidate();
+      }
+    }
+  );
+</script>
+
+<style lang="less" scoped>
+  /* 验证码 */
+  .login-input-group {
+    display: flex;
+    align-items: center;
+
+    :deep(.ant-input-affix-wrapper) {
+      flex: 1;
+    }
+
+    .login-captcha {
+      width: 102px;
+      height: 33px;
+      margin-left: 10px;
+      padding: 0;
+
+      & > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+</style>
diff --git a/src/views/system/myApp/detail/components/app-task-search.vue b/src/views/system/myApp/detail/components/app-task-search.vue
new file mode 100644
index 0000000..75a557d
--- /dev/null
+++ b/src/views/system/myApp/detail/components/app-task-search.vue
@@ -0,0 +1,34 @@
+<template>
+  <a-button
+    @click="openNew(`/oa/task/add?appid=${data.appId}&appName=${data.appName}`)"
+    >提交工单</a-button
+  >
+</template>
+
+<script lang="ts" setup>
+  import { TaskParam } from '@/api/oa/task/model';
+  import useSearch from '@/utils/use-search';
+  import { openNew } from '@/utils/common';
+  import { App } from '@/api/oa/app/model';
+
+  defineProps<{
+    data: App;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'search', where: TaskParam): void;
+    (e: 'remove'): void;
+  }>();
+
+  // 表单数据
+  const { where } = useSearch<TaskParam>({
+    keywords: '',
+    status: undefined,
+    commander: undefined
+  });
+
+  /* 搜索 */
+  const search = () => {
+    emit('search', where);
+  };
+</script>
diff --git a/src/views/system/myApp/detail/components/app-task.vue b/src/views/system/myApp/detail/components/app-task.vue
new file mode 100644
index 0000000..178fc4a
--- /dev/null
+++ b/src/views/system/myApp/detail/components/app-task.vue
@@ -0,0 +1,299 @@
+<template>
+  <div class="app-task">
+    <!-- 表格 -->
+    <ele-pro-table
+      ref="tableRef"
+      row-key="taskId"
+      :columns="columns"
+      :datasource="datasource"
+      :customRow="customRow"
+      tool-class="ele-toolbar-form"
+      class="sys-org-table"
+    >
+      <template #toolbar>
+        <AppTaskSearch :data="data" @search="reload" @remove="removeBatch" />
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'content'">
+          <div class="user-box">
+            <div class="user-info">
+              <a-badge
+                :dot="!record.isRead && record.userId != userStore.info?.userId"
+              >
+                <a-avatar :src="record.avatar" size="large" />
+              </a-badge>
+            </div>
+            <div class="content" style="display: flex; flex-direction: column">
+              <div class="nickname">
+                <a-typography-text strong>
+                  {{ `${record.nickname}` }}
+                </a-typography-text>
+                <span class="ele-text-placeholder" style="padding-left: 10px">{{
+                  timeAgo(record.createTime)
+                }}</span>
+              </div>
+              <a
+                class="ele-text-heading"
+                @click="openNew('/oa/task/detail/' + record.taskId)"
+              >
+                {{ `工单标题：${record.name}` }}
+              </a>
+              <div class="ele-text-placeholder">{{
+                record.appId > 0 ? `项目名称：【${record.appName}】` : ''
+              }}</div>
+              <div
+                class="ele-text-secondary"
+                style="display: flex; align-items: center"
+              >
+                <a-avatar :size="18" :src="record.lastAvatar" />
+                <div class="content" style="padding-left: 8px">
+                  {{ record.content }}
+                </div>
+                <span class="ele-text-placeholder" style="padding-left: 10px">{{
+                  timeAgo(record.updateTime)
+                }}</span>
+              </div>
+            </div>
+            <div class="last-time ele-text-info"> </div>
+          </div>
+        </template>
+        <template v-else-if="column.key === 'status'">
+          <a-tag v-if="record.progress === TOBEARRANGED" color="red"
+            >待安排</a-tag
+          >
+          <a-tag v-if="record.progress === PENDING" color="orange"
+            >待处理</a-tag
+          >
+          <a-tag v-if="record.progress === PROCESSING" color="purple"
+            >处理中</a-tag
+          >
+          <a-tag v-if="record.progress === TOBECONFIRMED" color="cyan"
+            >待评价</a-tag
+          >
+          <a-tag v-if="record.progress === COMPLETED" color="green"
+            >已完成</a-tag
+          >
+          <a-tag v-if="record.progress === CLOSED">已关闭</a-tag>
+          <div class="ele-text-danger" v-if="record.overdueDays">
+            已逾期{{ record.overdueDays }}天
+          </div>
+        </template>
+        <template v-else-if="column.key === 'progress'">
+          <a-progress :percent="record.progress * 2" :steps="5" />
+        </template>
+        <template v-if="column.key === 'action'">
+          <a-space>
+            <a @click="onDetail(record)">查看</a>
+            <a-divider type="vertical" />
+            <a-popconfirm
+              title="确定要删除此记录吗？"
+              @confirm="remove(record)"
+            >
+              <a class="ele-text-danger">删除</a>
+            </a-popconfirm>
+          </a-space>
+        </template>
+      </template>
+    </ele-pro-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref, watch } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import type { DatasourceFunction } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { timeAgo } from 'ele-admin-pro';
+  import { pageTask, removeTask, removeBatchTask } from '@/api/oa/task';
+  import type { Task, TaskParam } from '@/api/oa/task/model';
+  import { useUserStore } from '@/store/modules/user';
+  import AppTaskSearch from './app-task-search.vue';
+  import {
+    CLOSED,
+    COMPLETED,
+    PENDING,
+    PROCESSING,
+    TOBEARRANGED,
+    TOBECONFIRMED
+  } from '@/api/oa/task/model/progress';
+  import { hasRole } from '@/utils/permission';
+  import { openNew } from '@/utils/common';
+  import { App } from '@/api/oa/app/model';
+
+  const props = defineProps<{
+    appId: number | undefined;
+    data: App;
+  }>();
+
+  const userStore = useUserStore();
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+  const selection = ref<any[]>();
+  const status = ref<number>();
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    // 搜索条件
+    // 工单发起人
+    if (hasRole('promoter') || hasRole('user')) {
+      where.commander = undefined;
+      where.userId = userStore.info?.userId;
+    }
+    // 管理人员
+    if (hasRole('superAdmin') || hasRole('admin')) {
+      where.commander = undefined;
+    }
+    // 工单受理人员
+    if (hasRole('commander')) {
+      where.commander = userStore.info?.userId;
+    }
+    where.appId = props.appId;
+    return pageTask({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<any[]>([
+    {
+      title: '工单号',
+      dataIndex: 'taskId',
+      align: 'center',
+      width: 100
+    },
+    {
+      title: '工单类型',
+      dataIndex: 'taskType',
+      width: 100
+    },
+    {
+      title: '工单信息',
+      dataIndex: 'content',
+      key: 'content',
+      ellipsis: true
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+      width: 120
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: TaskParam) => {
+    status.value = where?.status;
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  const onDetail = (record?: Task) => {
+    window.location.href = 'detail?id=' + record?.taskId;
+  };
+
+  /* 删除单个 */
+  const remove = (row: Task) => {
+    const hide = message.loading('请求中..', 0);
+    removeTask(row.taskId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value?.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    if (selection.value?.length) {
+      Modal.confirm({
+        title: '提示',
+        content: '确定要删除选中的记录吗?',
+        icon: createVNode(ExclamationCircleOutlined),
+        maskClosable: true,
+        onOk: () => {
+          const hide = message.loading('请求中..', 0);
+          removeBatchTask(selection.value.map((d) => d.taskId))
+            .then((msg) => {
+              hide();
+              message.success(msg);
+              reload();
+            })
+            .catch((e) => {
+              hide();
+              message.error(e.message);
+            });
+        }
+      });
+    }
+  };
+
+  // 是否展现多选按钮及批量删除按钮
+  if (hasRole('superAdmin') || hasRole('admin')) {
+    selection.value = [];
+  }
+
+  /* 自定义行属性 */
+  const customRow = (record: Task) => {
+    return {
+      // 行双击事件
+      onDblclick: () => {
+        window.open('/oa/task/detail/' + record.taskId);
+      }
+    };
+  };
+
+  watch(
+    () => props.appId,
+    (appId) => {
+      if (appId) {
+        reload({ appId });
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'AppTaskIndex'
+  };
+</script>
+
+<style lang="less" scoped>
+  .user-box {
+    display: flex;
+    align-items: center;
+    .user-info {
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      margin-right: 7px;
+    }
+    .last-time {
+      margin-left: 12px;
+    }
+    .content {
+      .text {
+        max-width: 90%;
+      }
+    }
+  }
+  .nickname {
+    .ele-text-heading {
+      font-weight: bold;
+    }
+  }
+</style>
diff --git a/src/views/system/myApp/detail/components/app-url-edit.vue b/src/views/system/myApp/detail/components/app-url-edit.vue
new file mode 100644
index 0000000..d6d9d2b
--- /dev/null
+++ b/src/views/system/myApp/detail/components/app-url-edit.vue
@@ -0,0 +1,155 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="1000"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑域名' : '添加域名'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="{ md: { span: 2 }, sm: { span: 4 }, xs: { span: 24 } }"
+      :wrapper-col="{ md: { span: 21 }, sm: { span: 22 }, xs: { span: 24 } }"
+    >
+      <a-form-item label="客户端" name="name">
+        <a-input allow-clear placeholder="PC端" v-model:value="form.name" />
+      </a-form-item>
+      <a-form-item label="访问域名" name="domain">
+        <a-input
+          allow-clear
+          placeholder="http://10093.wsdns.cn"
+          v-model:value="form.domain"
+        />
+      </a-form-item>
+      <a-form-item label="账号" name="account">
+        <a-input allow-clear placeholder="demo" v-model:value="form.account" />
+      </a-form-item>
+      <a-form-item label="密码" name="password">
+        <a-input
+          allow-clear
+          placeholder="123456"
+          v-model:value="form.password"
+        />
+      </a-form-item>
+      <a-form-item label="描述" name="comments">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="备注信息"
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { AppUrl } from '@/api/oa/app/url/model';
+  import useFormData from '@/utils/use-form-data';
+  import { decrypt } from '@/utils/common';
+  import { addAppUrl, updateAppUrl } from '@/api/oa/app/url';
+  import { message } from 'ant-design-vue/es';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    appId: number | null;
+    // 修改回显的数据
+    data?: AppUrl | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+
+  const formRef = ref<FormInstance | null>(null);
+
+  const { form, resetFields, assignFields } = useFormData<AppUrl>({
+    appUrlId: undefined,
+    appId: undefined,
+    name: '',
+    domain: '',
+    account: '',
+    password: '',
+    comments: '',
+    status: 0,
+    sortNumber: 0
+  });
+
+  // 表单验证规则
+  const rules = reactive({
+    name: [
+      {
+        required: true,
+        message: '请输入名称'
+      }
+    ]
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const data = {
+          ...form,
+          appId: props.appId
+        };
+        const saveOrUpdate = isUpdate.value ? updateAppUrl : addAppUrl;
+        saveOrUpdate(data)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          assignFields(props.data);
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>
diff --git a/src/views/system/myApp/detail/components/app-url-search.vue b/src/views/system/myApp/detail/components/app-url-search.vue
new file mode 100644
index 0000000..948c933
--- /dev/null
+++ b/src/views/system/myApp/detail/components/app-url-search.vue
@@ -0,0 +1,13 @@
+<template>
+  <a-button @click="add">添加</a-button>
+</template>
+
+<script lang="ts" setup>
+  const emit = defineEmits<{
+    (e: 'add'): void;
+  }>();
+
+  const add = () => {
+    emit('add');
+  };
+</script>
diff --git a/src/views/system/myApp/detail/components/app-url.vue b/src/views/system/myApp/detail/components/app-url.vue
new file mode 100644
index 0000000..30008c0
--- /dev/null
+++ b/src/views/system/myApp/detail/components/app-url.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="app-task">
+    <!-- 表格 -->
+    <ele-pro-table
+      ref="tableRef"
+      row-key="taskId"
+      :columns="columns"
+      :datasource="datasource"
+      tool-class="ele-toolbar-form"
+      class="sys-org-table"
+    >
+      <template #toolbar>
+        <AppUrlSearch @add="openEdit" @remove="removeBatch" />
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'domain'">
+          <a :href="record.domain" target="_blank">{{ record.domain }}</a>
+        </template>
+        <template v-if="column.key === 'action'">
+          <a @click="moveUp(record)">上移<ArrowUpOutlined /></a>
+          <a-divider type="vertical" />
+          <a @click="openEdit(record)">编辑</a>
+          <a-divider type="vertical" />
+          <a-popconfirm title="确定要删除此记录吗？" @confirm="remove(record)">
+            <a class="ele-text-danger">删除</a>
+          </a-popconfirm>
+        </template>
+      </template>
+    </ele-pro-table>
+    <!-- 编辑弹窗 -->
+    <AppUrlEdit
+      v-model:visible="showEdit"
+      :app-id="data.appId"
+      :data="current"
+      @done="reload"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref, watch } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import type { DatasourceFunction } from 'ele-admin-pro/es/ele-pro-table/types';
+  import AppUrlSearch from './app-url-search.vue';
+  import { App } from '@/api/oa/app/model';
+  import AppUrlEdit from './app-url-edit.vue';
+  import { AppUrl, AppUrlParam } from '@/api/oa/app/url/model';
+  import {
+    pageAppUrl,
+    removeAppUrl,
+    removeBatchAppUrl,
+    updateAppUrl
+  } from '@/api/oa/app/url';
+  import { ArrowUpOutlined } from '@ant-design/icons-vue';
+
+  const props = defineProps<{
+    appId: any;
+    data: App;
+  }>();
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+  const selection = ref<any[]>();
+  // 当前编辑数据
+  const current = ref<AppUrl | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    // 搜索条件
+    where.appId = props.appId;
+    return pageAppUrl({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<any[]>([
+    {
+      title: '客户端',
+      dataIndex: 'name',
+      width: 180
+    },
+    {
+      title: '访问域名',
+      dataIndex: 'domain',
+      key: 'domain',
+      width: 280
+    },
+    {
+      title: '账号',
+      dataIndex: 'account',
+      width: 280
+    },
+    {
+      title: '密码',
+      dataIndex: 'password',
+      width: 280
+    },
+    {
+      title: '备注',
+      dataIndex: 'comments',
+      key: 'comments',
+      ellipsis: true
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  const moveUp = (row?: AppUrl) => {
+    updateAppUrl({
+      appUrlId: row?.appUrlId,
+      sortNumber: Number(row?.sortNumber) - 1
+    }).then((msg) => {
+      message.success(msg);
+      reload();
+    });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: AppUrl) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 搜索 */
+  const reload = (where?: AppUrlParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 删除单个 */
+  const remove = (row: AppUrl) => {
+    const hide = message.loading('请求中..', 0);
+    removeAppUrl(row.appUrlId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value?.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    if (selection.value?.length) {
+      Modal.confirm({
+        title: '提示',
+        content: '确定要删除选中的记录吗?',
+        icon: createVNode(ExclamationCircleOutlined),
+        maskClosable: true,
+        onOk: () => {
+          const hide = message.loading('请求中..', 0);
+          removeBatchAppUrl(selection.value.map((d) => d.appUrlId))
+            .then((msg) => {
+              hide();
+              message.success(msg);
+              reload();
+            })
+            .catch((e) => {
+              hide();
+              message.error(e.message);
+            });
+        }
+      });
+    }
+  };
+
+  watch(
+    () => props.appId,
+    (appId) => {
+      if (appId) {
+        reload();
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'AppUrlIndex'
+  };
+</script>
diff --git a/src/views/system/myApp/detail/components/app-users.vue b/src/views/system/myApp/detail/components/app-users.vue
new file mode 100644
index 0000000..45de87c
--- /dev/null
+++ b/src/views/system/myApp/detail/components/app-users.vue
@@ -0,0 +1,140 @@
+<template>
+  <a-space style="margin-bottom: 20px">
+    <SelectStaff
+      v-if="hasRole('superAdmin') || hasRole('admin')"
+      :placeholder="`添加开发成员`"
+      @done="addAppDevUser"
+    />
+    <SelectUser
+      style="margin-left: 10px"
+      v-if="hasRole('superAdmin') || hasRole('admin')"
+      :placeholder="`添加体验成员`"
+      @done="addAppExpUser"
+    />
+    <a-button>邀请添加</a-button>
+  </a-space>
+  <div class="content">
+    <table class="ele-table ele-table-border ele-table-stripe ele-table-medium">
+      <thead>
+        <tr>
+          <th>用户ID</th>
+          <th>角色</th>
+          <th>昵称</th>
+          <th>加入时间</th>
+          <th>操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(user, index) in userList" :key="index">
+          <td>{{ user.userId }}</td>
+          <td>
+            <span v-if="user.role === 10">体验成员</span>
+            <span v-if="user.role === 20">开发成员</span>
+            <span v-if="user.role === 30" class="ele-text-danger">管理员</span>
+          </td>
+          <td>
+            <span style="padding-left: 5px">{{ user.nickname }}</span>
+          </td>
+          <td>{{ user.createTime }}</td>
+          <td>
+            <div v-if="user.role !== 30">
+              <a
+                @click="removeUser(user)"
+                v-if="hasRole('superAdmin') || hasRole('admin')"
+              >
+                移除
+              </a>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { User } from '@/api/system/user/model';
+  import { App } from '@/api/oa/app/model';
+  import { hasRole } from '@/utils/permission';
+  import { AppUser } from '@/api/oa/app/user/model';
+  import { addAppUser, pageAppUser, removeAppUser } from '@/api/oa/app/user';
+  import { message } from 'ant-design-vue';
+  import { ref, watch } from 'vue';
+
+  const props = defineProps<{
+    appId: any;
+    data: App;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const userList = ref<AppUser[]>();
+
+  // 添加开发成员
+  const addAppDevUser = (data: User) => {
+    addAppUser({
+      userId: data.userId,
+      appId: props.data?.appId,
+      role: 20
+    })
+      .then((msg) => {
+        reload();
+        message.success(msg);
+        emit('done');
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  // 添加体验成员
+  const addAppExpUser = (data: User) => {
+    addAppUser({
+      userId: data.userId,
+      appId: props.data?.appId,
+      role: 10
+    })
+      .then((msg) => {
+        reload();
+        message.success(msg);
+        emit('done');
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  // 移除成员
+  const removeUser = (data: AppUser) => {
+    removeAppUser(data.appUserId)
+      .then((msg) => {
+        reload();
+        message.success(msg);
+        emit('done');
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  const reload = () => {
+    // 加载项目成员
+    pageAppUser({ appId: props.appId }).then((res) => {
+      if (res?.list) {
+        userList.value = res.list;
+      }
+    });
+  };
+
+  watch(
+    () => props.appId,
+    (appId) => {
+      if (appId) {
+        reload();
+      }
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/src/views/system/myApp/detail/index.vue b/src/views/system/myApp/detail/index.vue
new file mode 100644
index 0000000..6db2f17
--- /dev/null
+++ b/src/views/system/myApp/detail/index.vue
@@ -0,0 +1,341 @@
+<template>
+  <a-page-header
+    :title="title"
+    :style="{ padding: screenWidth > 480 ? '16px 24px' : '0' }"
+    @back="() => $router.go(-1)"
+  >
+    <a-spin :spinning="spinning">
+      <a-card
+        :bordered="false"
+        :body-style="{ paddingTop: '5px' }"
+        v-if="isShow"
+      >
+        <a-tabs v-model:active-key="active" @change="onChange">
+          <a-tab-pane tab="基本信息" key="base">
+            <AppInfo
+              :data="form"
+              :appField="appField"
+              :logo="logo"
+              :app-qrcode="appQrcode"
+              @done="reload"
+            />
+          </a-tab-pane>
+          <a-tab-pane
+            tab="成员管理"
+            key="users"
+            v-if="hasRole('superAdmin') || hasRole('admin')"
+          >
+            <AppUsers :app-id="appId" :data="form" @done="reload" />
+          </a-tab-pane>
+          <a-tab-pane tab="项目参数" key="param">
+            <AppFieldForm :app-id="appId" :data="form" @done="reload" />
+          </a-tab-pane>
+          <a-tab-pane tab="账号密码" key="domain">
+            <AppRulForm :app-id="appId" :data="form" @done="reload" />
+          </a-tab-pane>
+          <a-tab-pane tab="协同文档" key="profile">
+            <AppProfile :app-id="appId" :data="form" @done="reload" />
+          </a-tab-pane>
+          <a-tab-pane tab="项目附件" key="annex">
+            <AppAnnex :app-id="appId" :data="form" @done="reload" />
+          </a-tab-pane>
+          <a-tab-pane tab="工单管理" key="task">
+            <AppTask :appId="form.appId" :data="form" @done="reload" />
+          </a-tab-pane>
+          <a-tab-pane tab="应用截图" key="photo">
+            <AppPhoto
+              :appId="form.appId"
+              :data="form"
+              :images="images"
+              @done="reload"
+            />
+          </a-tab-pane>
+          <a-tab-pane tab="项目介绍" key="about">
+            <AppAbout :appId="form.appId" :data="form" @done="reload" />
+          </a-tab-pane>
+          <a-tab-pane
+            tab="续费明细"
+            key="renew"
+            v-if="hasRole('superAdmin') || hasRole('admin')"
+          >
+            <AppRenew
+              :app-id="form.appId"
+              :companyId="form?.companyId"
+              :editStatus="false"
+              @done="reload"
+            />
+          </a-tab-pane>
+        </a-tabs>
+      </a-card>
+      <a-card v-else :bordered="false">
+        <div style="max-width: 960px; margin: 0 auto">
+          <a-result
+            status="error"
+            title="无查看权限"
+            sub-title="请先添加为项目成员"
+          >
+            <template #extra>
+              <a-space size="middle">
+                <a-button type="primary" @click="openUrl('/system/app')"
+                  >返回</a-button
+                >
+              </a-space>
+            </template>
+          </a-result>
+        </div>
+      </a-card>
+    </a-spin>
+  </a-page-header>
+</template>
+
+<script lang="ts" setup>
+  import { ref, unref, watch } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import AppInfo from './components/app-info.vue';
+  import AppUsers from './components/app-users.vue';
+  import AppProfile from './components/app-profile.vue';
+  import AppTask from './components/app-task.vue';
+  import AppPhoto from './components/app-photo.vue';
+  import AppAbout from './components/app-about.vue';
+  import AppAnnex from './components/app-annex.vue';
+  import AppRenew from './components/app-nenew.vue';
+  import AppFieldForm from './components/app-field.vue';
+  import AppRulForm from './components/app-url.vue';
+  import { getApp } from '@/api/oa/app';
+  import useFormData from '@/utils/use-form-data';
+  import { App } from '@/api/oa/app/model';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { hasRole } from '@/utils/permission';
+  import { setPageTabTitle } from '@/utils/page-tab-util';
+  import { pageAppField } from '@/api/oa/app/field';
+  import { AppField } from '@/api/oa/app/field/model';
+  import { openUrl } from '@/utils/common';
+  import { pageAppUser } from '@/api/oa/app/user';
+  import { uuid } from 'ele-admin-pro';
+
+  const { currentRoute } = useRouter();
+  // 当前选项卡
+  const active = ref('base');
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { screenWidth, tabs } = storeToRefs(themeStore);
+  const title = ref('项目名称');
+  const spinning = ref(true);
+  const isShow = ref(true);
+  const logo = ref<any[]>([]);
+  const appId = ref<number>(0);
+  const appQrcode = ref<any[]>([]);
+  const images = ref<ItemType[]>([]);
+  const appField = ref<AppField[]>();
+
+  // 应用信息
+  const { form, assignFields, resetFields } = useFormData<App>({
+    // 应用id
+    appId: undefined,
+    // 应用秘钥
+    appSecret: '',
+    enName: '',
+    // 应用名称
+    appName: '',
+    // 上级id, 0是顶级
+    parentId: undefined,
+    // 应用编号
+    appCode: '',
+    // 应用图标
+    appIcon: '',
+    appQrcode: '',
+    // 应用截图
+    images: '',
+    // 应用类型
+    appType: '',
+    appTypeMultiple: undefined,
+    // 菜单类型
+    menuType: undefined,
+    // 应用地址
+    appUrl: '',
+    // 后台管理地址
+    adminUrl: undefined,
+    // 下载地址
+    downUrl: undefined,
+    serverUrl: undefined,
+    callbackUrl: undefined,
+    gitUrl: undefined,
+    docsUrl: undefined,
+    prototypeUrl: undefined,
+    ipAddress: undefined,
+    fileUrl: undefined,
+    // 应用包名
+    packageName: '',
+    // 点击次数
+    clicks: '',
+    // 安装次数
+    installs: '',
+    // 项目介绍
+    content: '',
+    // 开发者(个人)
+    developer: '',
+    director: '',
+    projectDirector: '',
+    salesman: '',
+    // 软件定价
+    price: '',
+    // 评分
+    score: '',
+    // 星级
+    star: '',
+    // 菜单组件地址
+    component: '',
+    // 菜单路由地址
+    path: '',
+    // 权限标识
+    authority: '',
+    // 打开位置
+    target: '',
+    // 是否隐藏, 0否, 1是(仅注册路由不显示在左侧菜单)
+    hide: undefined,
+    // 菜单侧栏选中的path
+    active: '',
+    // 其它路由元信息
+    meta: '',
+    // 版本
+    edition: '',
+    // 版本号
+    version: '',
+    // 是否已安装
+    isUse: undefined,
+    // 排序
+    sortNumber: undefined,
+    // 备注
+    comments: '',
+    tenantName: '',
+    companyName: '',
+    // 租户编号
+    tenantCode: '',
+    // 租户id
+    tenantId: undefined,
+    // 创建时间
+    createTime: '',
+    appStatus: '开发中',
+    // 状态
+    status: undefined,
+    // 发布者
+    userId: '',
+    // 发布者昵称
+    nickname: '',
+    // 子菜单
+    children: [],
+    // 权限树回显选中状态, 0未选中, 1选中
+    checked: false,
+    //
+    key: undefined,
+    //
+    value: undefined,
+    //
+    parentIds: [],
+    //
+    openType: undefined,
+    //
+    search: undefined,
+    // 成员管理
+    users: [],
+    // 项目需求
+    requirement: '',
+    file1: '[]',
+    file2: '[]',
+    file3: '[]',
+    showCase: undefined,
+    showIndex: undefined,
+    recommend: undefined
+  });
+
+  const onChange = () => {
+    // reload();
+  };
+
+  /**
+   * 加载数据
+   */
+  const reload = () => {
+    resetFields();
+    logo.value = [];
+    appQrcode.value = [];
+    images.value = [];
+    appField.value = [];
+    assignFields({});
+    // 加载项目详情
+    getApp(appId.value)
+      .then((data) => {
+        if (data.appName) {
+          title.value = data.appName;
+          // 修改页签标题
+          setPageTabTitle(data.appName);
+        }
+        if (data.appIcon) {
+          logo.value.push({
+            uid: data.appId,
+            url: data.appIcon,
+            status: 'done'
+          });
+        }
+        if (data.appQrcode) {
+          const split = data.appQrcode.split('|||');
+          split.map((url) => {
+            appQrcode.value.push({
+              uid: uuid(),
+              url: url,
+              status: 'done'
+            });
+          });
+        }
+        if (data.images) {
+          const arr = JSON.parse(data.images);
+          arr.map((d, i) => {
+            images.value.push({
+              uid: d.uid,
+              url: d.url,
+              status: 'done'
+            });
+          });
+        }
+        isShow.value = true;
+        spinning.value = false;
+        assignFields(data);
+      })
+      .catch((err) => {
+        isShow.value = false;
+        spinning.value = false;
+      });
+    // 加载项目参数
+    pageAppField({ appId: appId.value, limit: 50 }).then((res) => {
+      appField.value = res?.list;
+      form.fields = res?.list;
+    });
+    // 加载项目成员
+    pageAppUser({ appId: appId.value }).then((res) => {
+      if (res?.list) {
+        form.users = res.list;
+      }
+    });
+  };
+  watch(
+    currentRoute,
+    (route) => {
+      console.log(route);
+      const { params } = unref(route);
+      const { id } = params;
+      if (id) {
+        appId.value = Number(id);
+      }
+      reload();
+    },
+    { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'AppDetail'
+  };
+</script>
diff --git a/src/views/system/myApp/dict/components/dict-edit.vue b/src/views/system/myApp/dict/components/dict-edit.vue
new file mode 100644
index 0000000..a27556c
--- /dev/null
+++ b/src/views/system/myApp/dict/components/dict-edit.vue
@@ -0,0 +1,178 @@
+<!-- 分类编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="460"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="isUpdate ? '修改分类' : '添加分类'"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 5, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="分类标识" name="dictCode">
+        <a-input
+          allow-clear
+          :maxlength="20"
+          disabled
+          placeholder="请输入分类标识"
+          v-model:value="form.dictCode"
+        />
+      </a-form-item>
+      <a-form-item label="分类名称" name="dictDataName">
+        <a-input
+          allow-clear
+          :maxlength="20"
+          placeholder="请输入分类名称"
+          v-model:value="form.dictDataName"
+        />
+      </a-form-item>
+      <a-form-item label="排序" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="99999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+      <a-form-item label="备注">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="请输入备注"
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import { addDictData, updateDictData } from '@/api/system/dict-data';
+  import { DictData } from '@/api/system/dict-data/model';
+  import {removeSiteInfoCache} from "@/api/cms/website";
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: DictData | null;
+    // 字典ID
+    dictId?: number | 0;
+  }>();
+
+  //
+  const formRef = ref<FormInstance | null>(null);
+
+  // 是否是修改
+  const isUpdate = ref(false);
+
+  // 提交状态
+  const loading = ref(false);
+
+  // 表单数据
+  const { form, resetFields, assignFields } = useFormData<DictData>({
+    dictId: undefined,
+    dictDataId: undefined,
+    dictDataName: '',
+    dictCode: 'appType',
+    dictDataCode: '',
+    sortNumber: 100,
+    comments: ''
+  });
+
+  // 表单验证规则
+  const rules = reactive<Record<string, Rule[]>>({
+    dictDataCode: [
+      {
+        required: true,
+        message: '请输入分类名称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    dictCode: [
+      {
+        required: true,
+        message: '请输入分类标识',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const saveOrUpdate = isUpdate.value ? updateDictData : addDictData;
+        form.dictDataCode = form.dictDataName;
+        form.dictId = props.dictId;
+        saveOrUpdate(form)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            // 清除字典缓存
+            removeSiteInfoCache(form.dictCode + ':' + form.tenantId);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          assignFields(props.data);
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+        formRef.value?.clearValidate();
+      }
+    }
+  );
+</script>
diff --git a/src/views/system/myApp/dict/index.vue b/src/views/system/myApp/dict/index.vue
new file mode 100644
index 0000000..5892b69
--- /dev/null
+++ b/src/views/system/myApp/dict/index.vue
@@ -0,0 +1,223 @@
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="tableRef"
+        row-key="dictDataId"
+        :columns="columns"
+        :datasource="datasource"
+        :customRow="customRow"
+        :scroll="{ x: 800 }"
+        cache-key="appDictTable"
+      >
+        <template #toolbar>
+          <a-space>
+            <a-button type="primary" class="ele-btn-icon" @click="openEdit()">
+              <template #icon>
+                <plus-outlined />
+              </template>
+              <span>新建</span>
+            </a-button>
+            <a-button
+              danger
+              type="primary"
+              class="ele-btn-icon"
+              @click="removeBatch"
+            >
+              <template #icon>
+                <delete-outlined />
+              </template>
+              <span>删除</span>
+            </a-button>
+          </a-space>
+        </template>
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'action'">
+            <a-space>
+              <a @click="openEdit(record)">修改</a>
+              <a-divider type="vertical" />
+              <a-popconfirm
+                placement="topRight"
+                title="确定要删除此分类吗？"
+                @confirm="remove(record)"
+              >
+                <a class="ele-text-danger">删除</a>
+              </a-popconfirm>
+            </a-space>
+          </template>
+        </template>
+      </ele-pro-table>
+    </a-card>
+    <!-- 编辑弹窗 -->
+    <dict-edit
+      v-model:visible="showEdit"
+      :dictId="dictId"
+      :data="current"
+      @done="reload"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue/es';
+  import {
+    PlusOutlined,
+    DeleteOutlined,
+    ExclamationCircleOutlined
+  } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro/es';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { messageLoading } from 'ele-admin-pro/es';
+  import DictEdit from './components/dict-edit.vue';
+  import {
+    pageDictData,
+    removeDictData,
+    removeDictDataBatch
+  } from '@/api/system/dict-data';
+  import { DictParam } from '@/api/system/dict/model';
+  import { DictData } from '@/api/system/dict-data/model';
+  import { addDict, listDictionaries } from '@/api/system/dict';
+  import { Dictionary } from '@/api/system/dictionary/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+  const dictId = ref(0);
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'dictDataId',
+      width: 80,
+      hideInTable: true
+    },
+    {
+      title: '分类名称',
+      dataIndex: 'dictDataName',
+      showSorterTooltip: false
+    },
+    {
+      title: '备注',
+      dataIndex: 'comments',
+      sorter: true,
+      showSorterTooltip: false
+    },
+    {
+      title: '排序号',
+      width: 180,
+      align: 'center',
+      dataIndex: 'sortNumber'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      align: 'center'
+    }
+  ]);
+
+  // 表格选中数据
+  const selection = ref<DictData[]>([]);
+
+  // 当前编辑数据
+  const current = ref<Dictionary | null>(null);
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    where.dictCode = 'appType';
+    return pageDictData({ ...where, ...orders, page, limit });
+  };
+
+  /* 搜索 */
+  const reload = (where?: DictParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: DictData) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: DictData) => {
+    const hide = messageLoading('请求中..', 0);
+    removeDictData(row.dictDataId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的分类吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = messageLoading('请求中..', 0);
+        removeDictDataBatch(selection.value.map((d) => d.dictDataId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  // 初始化字典
+  const loadDict = () => {
+    listDictionaries({ dictCode: 'appType' }).then(async (data) => {
+      if (data?.length == 0) {
+        await addDict({ dictCode: 'appType', dictName: '链接分类' });
+      }
+      await listDictionaries({ dictCode: 'appType' }).then((list) => {
+        list?.map((d) => {
+          dictId.value = Number(d.dictId);
+        });
+      });
+    });
+  };
+
+  loadDict();
+
+  /* 自定义行属性 */
+  const customRow = (record: DictData) => {
+    return {
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'TaskDictData'
+  };
+</script>
diff --git a/src/views/system/myApp/index.vue b/src/views/system/myApp/index.vue
new file mode 100644
index 0000000..7775e31
--- /dev/null
+++ b/src/views/system/myApp/index.vue
@@ -0,0 +1,400 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false">
+        <!-- 表格 -->
+        <ele-pro-table
+          ref="tableRef"
+          row-key="appId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          tool-class="ele-toolbar-form"
+          :scroll="{ x: 1200 }"
+          class="sys-org-table"
+          :striped="true"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'companyName'">
+              <div class="app-box">
+                <a-image
+                  :height="45"
+                  :width="45"
+                  :preview="false"
+                  :src="record.companyLogo"
+                  fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
+                />
+                <div class="app-info">
+                  <span class="ele-text-heading">
+                    {{ record.shortName }}
+                  </span>
+                  <span class="ele-text-placeholder">
+                    {{ record.companyName }}
+                  </span>
+                </div>
+              </div>
+            </template>
+            <template v-if="column.key === 'appName'">
+              <div class="app-box">
+                <a-image
+                  :height="45"
+                  :width="45"
+                  :preview="false"
+                  :src="record.appIcon"
+                  fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
+                />
+                <div class="app-info">
+                  <a
+                    class="ele-text-heading"
+                    @click="openUrl('/system/app/detail/' + record.appId)"
+                  >
+                    {{ record.appName }}
+                  </a>
+                  <span class="ele-text-placeholder">
+                    {{ record.appCode }}
+                  </span>
+                </div>
+              </div>
+            </template>
+            <template v-if="column.key === 'appCode'">
+              <span>{{ record.appCode }}</span>
+            </template>
+            <template v-if="column.key === 'appStatus'">
+              <a-tag v-if="record.appStatus === '开发中'" color="red">{{
+                record.appStatus
+              }}</a-tag>
+              <a-tag v-if="record.appStatus === '已上架'" color="success">{{
+                record.appStatus
+              }}</a-tag>
+              <a-tag v-if="record.appStatus === '维护中'" color="orange">{{
+                record.appStatus
+              }}</a-tag>
+              <a-tag v-if="record.appStatus === '已下架'">{{
+                record.appStatus
+              }}</a-tag>
+            </template>
+            <template v-if="column.key === 'appUrl'">
+              <a-tooltip v-if="record.appUrl" :title="record.appUrl">
+                <a class="ele-text-heading" @click="openUrl(record.appUrl)"
+                  >前往</a
+                >
+              </a-tooltip>
+            </template>
+            <template v-if="column.key === 'appTypeMultiple'">
+              <a-space
+                :size="2"
+                direction="vertical"
+                v-if="record.appTypeMultiple"
+              >
+                <template
+                  v-for="(item, index) in JSON.parse(record.appTypeMultiple)"
+                  :key="index"
+                >
+                  <span v-if="index == 0">{{ item }}</span>
+                </template>
+              </a-space>
+            </template>
+            <template v-if="column.key === 'expirationTime'">
+              <template v-if="expirationTime(record.expirationTime) < 30">
+                <a-space>
+                  <span class="ele-text-danger">{{
+                    toDateString(record.expirationTime, 'yyyy-MM-dd')
+                  }}</span>
+                  <span class="ele-text-placeholder"
+                    >(剩余{{ expirationTime(record.expirationTime) }}天)</span
+                  >
+                </a-space>
+              </template>
+              <template v-else>
+                {{ toDateString(record.expirationTime, 'yyyy-MM-dd') }}
+              </template>
+            </template>
+            <!--            <template v-if="column.key === 'appQrcode'">-->
+            <!--              <a-image-->
+            <!--                v-if="record.appQrcode"-->
+            <!--                :height="50"-->
+            <!--                :width="50"-->
+            <!--                :src="record.appQrcode"-->
+            <!--              />-->
+            <!--            </template>-->
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openUrl('/system/app/detail/' + record.appId)"
+                  >管理</a
+                >
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+    </div>
+    <!-- 编辑弹窗 -->
+    <AppEdit v-model:visible="showEdit" :data="current" @done="reload" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import {
+    ArrowUpOutlined,
+    ExclamationCircleOutlined
+  } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { openUrl } from '@/utils/common';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import AppEdit from './components/app-edit.vue';
+  import {
+    pageApp,
+    removeBatchApp,
+    removeApp,
+    getCount,
+    updateApp
+  } from '@/api/oa/app';
+  import { App, AppParam } from '@/api/oa/app/model';
+  import { toDateString } from 'ele-admin-pro';
+
+  defineProps<{
+    activeKey?: boolean;
+    data?: any;
+  }>();
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'appId',
+      width: 80,
+      hideInTable: true
+    },
+    {
+      title: '租户ID',
+      dataIndex: 'tenantId',
+      width: 80
+    },
+    {
+      title: '项目名称',
+      dataIndex: 'appName',
+      key: 'appName'
+    },
+    {
+      title: '项目类型',
+      dataIndex: 'appTypeMultiple',
+      width: 120,
+      align: 'center',
+      key: 'appTypeMultiple'
+    },
+    // {
+    //   title: '二维码',
+    //   dataIndex: 'appQrcode',
+    //   width: 120,
+    //   align: 'center',
+    //   key: 'appQrcode'
+    // customRender: ({ text }) => {
+    //   if (text) {
+    //     const split = text.split('|||');
+    //     console.log(split[0]);
+    //     return split[0];
+    //   }
+    // }
+    // },
+    // {
+    //   title: '到期时间',
+    //   dataIndex: 'expirationTime',
+    //   key: 'expirationTime',
+    //   sorter: true
+    // },
+    {
+      title: '状态',
+      dataIndex: 'appStatus',
+      align: 'center',
+      width: 120,
+      key: 'appStatus'
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      width: 120,
+      sorter: true,
+      customRender: ({ text }) => toDateString(text, 'MM-dd')
+    },
+    {
+      title: '排序',
+      dataIndex: 'sortNumber',
+      width: 120,
+      align: 'center',
+      sorter: true
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      align: 'center',
+      fixed: 'right',
+      hideInSetting: true
+    }
+  ]);
+
+  // 表格选中数据
+  const selection = ref<App[]>([]);
+  // 当前编辑数据
+  const current = ref<App | null>(null);
+  // 是否显示资产详情
+  // const showInfo = ref(false);
+  const active = ref<any>('开发中');
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示高级搜索
+  const showAdvancedSearch = ref(false);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    // 默认类型
+    if (where.keywords == undefined) {
+      where.appStatus = '开发中';
+      where.showExpiration = undefined;
+    }
+    if (where.appStatus == '未签续费') {
+      where.appStatus = '已上架';
+      where.showExpiration = false;
+      where.sort = 'expirationTime';
+      where.order = 'asc';
+    }
+    return pageApp({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  /* 搜索 */
+  const reload = (where?: AppParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  // const onTab = (type: any) => {
+  //   active.value = type;
+  //   reload({ keywords: '', appStatus: active.value });
+  // };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: App) => {
+    // openUrl('/oa/app/detail/' + row?.appId);
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  const expirationTime = (dateTime) => {
+    const now = new Date().getTime();
+    const expiration = new Date(dateTime).getTime();
+    const mss = expiration - now;
+    let days = Math.floor(mss / (1000 * 60 * 60 * 24));
+    let hours = Math.floor((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    let minutes = Math.floor((mss % (1000 * 60 * 60)) / (1000 * 60));
+    let seconds = Math.round((mss % (1000 * 60)) / 1000);
+    return days;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: App) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openUrl('/system/app/detail/' + record.appId);
+      }
+    };
+  };
+
+  // 统计数据
+  const conut = ref({
+    totalNum: 0,
+    totalNum2: 0,
+    totalNum3: 0,
+    totalNum4: 0,
+    totalNum5: 0
+  });
+  getCount().then((data: any) => {
+    conut.value = data;
+  });
+
+  reload();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'AppIndex'
+  };
+</script>
+
+<style lang="less" scoped>
+  p {
+    line-height: 0.8;
+  }
+  .sys-org-table :deep(.ant-table-body) {
+    overflow: auto !important;
+    overflow: overlay !important;
+  }
+
+  .sys-org-table :deep(.ant-table-pagination.ant-pagination) {
+    padding: 0 4px;
+    margin-bottom: 0;
+  }
+  .price-edit {
+    padding-right: 5px;
+  }
+  .comments {
+    max-width: 200px;
+  }
+  .app-box {
+    display: flex;
+    .app-info {
+      display: flex;
+      margin-left: 5px;
+      flex-direction: column;
+    }
+  }
+  .count {
+    display: flex;
+    .btn {
+      margin: 0 12px;
+      padding: 5px 16px;
+      background-color: #f3f3f3;
+      border-radius: 4px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      font-size: 15px;
+      .divider {
+        width: 4px;
+        height: 14px;
+        border-radius: 8px;
+        margin-right: 8px;
+        background-color: #c9c9c9;
+      }
+      .divider-active {
+        width: 4px;
+        height: 14px;
+        border-radius: 8px;
+        margin-right: 8px;
+        background-color: #16a90b;
+      }
+      .active {
+        color: #16a90b;
+      }
+    }
+  }
+</style>
diff --git a/src/views/system/myApp/renew/components/app-edit.vue b/src/views/system/myApp/renew/components/app-edit.vue
new file mode 100644
index 0000000..a66a55a
--- /dev/null
+++ b/src/views/system/myApp/renew/components/app-edit.vue
@@ -0,0 +1,379 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    width="84%"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '续费管理' : '续费管理'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    :footer="null"
+  >
+    <div style="background-color: #f3f3f3; padding: 8px">
+      <a-form
+        ref="formRef"
+        :model="form"
+        :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
+        :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
+      >
+        <a-card title="基本信息" :bordered="false">
+          <a-row :gutter="16">
+            <a-col
+              v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
+            >
+              <div class="upload-image">
+                <ele-image-upload
+                  v-model:value="logo"
+                  :item-style="{ width: '90px', height: '90px' }"
+                  :limit="1"
+                  :disabled="!editStatus"
+                />
+                <ele-image-upload
+                  v-model:value="appQrcode"
+                  :item-style="{ width: '90px', height: '90px' }"
+                  :limit="1"
+                  :disabled="!editStatus"
+                />
+              </div>
+              <a-form-item label="AppId" name="appId">
+                <span>{{ form.appId }}</span>
+              </a-form-item>
+              <a-form-item label="AppSecret" name="appSecret">
+                <span style="margin-right: 10px">********</span>
+                <a-space>
+                  <a @click="onAppSecret(form.appId)">查看</a>
+                  <a-divider type="vertical" />
+                  <a @click="onUpdateAppSecret(form.appId)">重置</a>
+                </a-space>
+              </a-form-item>
+            </a-col>
+            <a-col
+              v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
+            >
+              <a-form-item label="应用名称" name="appName">
+                <a-input
+                  allow-clear
+                  v-if="editStatus"
+                  placeholder="请输入应用名称"
+                  v-model:value="form.appName"
+                />
+                <span v-else>{{ form.appName }}</span>
+              </a-form-item>
+              <a-form-item label="企业名称" name="companyName">
+                <SelectCompany
+                  :placeholder="`所属企业`"
+                  v-if="editStatus"
+                  v-model:value="form.companyName"
+                  @done="chooseCompanyName"
+                />
+                <span v-else>{{ form.companyName }}</span>
+              </a-form-item>
+              <!--              <a-form-item label="开发者单位" name="developer">-->
+              <!--                <SelectCompany-->
+              <!--                  :placeholder="`请选择开发者企业`"-->
+              <!--                  v-if="editStatus"-->
+              <!--                  v-model:value="form.developer"-->
+              <!--                  @done="chooseDeveloper"-->
+              <!--                />-->
+              <!--                <span v-else>{{ form.developer }}</span>-->
+              <!--              </a-form-item>-->
+              <a-form-item label="应用地址" name="appUrl">
+                <a-input
+                  allow-clear
+                  placeholder="请输入应用地址"
+                  v-if="editStatus"
+                  v-model:value="form.appUrl"
+                />
+                <span v-else>{{ form.appUrl }}</span>
+              </a-form-item>
+              <!--              <a-form-item label="后台管理" name="adminUrl">-->
+              <!--                <a-input-->
+              <!--                  allow-clear-->
+              <!--                  placeholder="请输入后台管理地址"-->
+              <!--                  v-if="editStatus"-->
+              <!--                  v-model:value="form.adminUrl"-->
+              <!--                />-->
+              <!--                <span v-else>{{ form.adminUrl }}</span>-->
+              <!--              </a-form-item>-->
+            </a-col>
+            <a-col
+              v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
+            >
+              <a-form-item label="应用状态" name="appStatus">
+                <DictSelect
+                  dict-code="appstoreStatus"
+                  placeholder="请选择应用状态"
+                  v-if="editStatus"
+                  v-model:value="form.appStatus"
+                />
+                <template v-else>
+                  <a-tag v-if="form.appStatus == '开发中'" color="red">{{
+                    form.appStatus
+                  }}</a-tag>
+                  <a-tag v-if="form.appStatus == '已上架'" color="green">{{
+                    form.appStatus
+                  }}</a-tag>
+                </template>
+              </a-form-item>
+              <a-form-item label="应用类型" name="appTypeMultiple">
+                <DictSelectMultiple
+                  dict-code="AppTypeMultiple"
+                  placeholder="请选择应用类型"
+                  v-if="editStatus"
+                  v-model:value="form.appTypeMultiple"
+                />
+                <template v-else>
+                  <a-tag
+                    v-for="(item, index) in form.appTypeMultiple"
+                    :key="index"
+                    >{{ item }}</a-tag
+                  >
+                </template>
+              </a-form-item>
+              <a-form-item label="应用描述" name="comments">
+                <a-textarea
+                  :rows="4"
+                  :maxlength="200"
+                  placeholder="请输入应用描述"
+                  v-if="editStatus"
+                  v-model:value="form.comments"
+                />
+                <div v-else v-html="form.comments"></div>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-card>
+        <template v-if="hasRole('superAdmin') || hasRole('admin')">
+          <a-divider style="height: 8px" />
+          <RenewList
+            :app-id="data?.appId"
+            :companyId="data?.companyId"
+            :editStatus="editStatus"
+          />
+        </template>
+      </a-form>
+    </div>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import type { App } from '@/api/oa/app/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { pageCompany } from '@/api/system/company';
+  import { hasRole } from '@/utils/permission';
+  import RenewList from './renew-list.vue';
+  import { assignObject } from 'ele-admin-pro';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: App | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 当期时间
+  const editStatus = ref(false);
+
+  const formRef = ref<FormInstance | null>(null);
+
+  // 用户信息
+  const form = reactive<App>({
+    // 应用id
+    appId: undefined,
+    // 应用秘钥
+    appSecret: '',
+    enName: '',
+    // 应用名称
+    appName: '',
+    // 上级id, 0是顶级
+    parentId: undefined,
+    // 应用编号
+    appCode: '',
+    // 应用图标
+    appIcon: '',
+    appQrcode: '',
+    // 应用截图
+    images: '',
+    // 应用类型
+    appType: '',
+    appTypeMultiple: undefined,
+    // 菜单类型
+    menuType: undefined,
+    // 应用地址
+    appUrl: '',
+    // 后台管理地址
+    adminUrl: undefined,
+    // 下载地址
+    downUrl: undefined,
+    serverUrl: undefined,
+    callbackUrl: undefined,
+    gitUrl: undefined,
+    docsUrl: undefined,
+    prototypeUrl: undefined,
+    ipAddress: undefined,
+    fileUrl: undefined,
+    // 应用包名
+    packageName: '',
+    // 点击次数
+    clicks: '',
+    // 安装次数
+    installs: '',
+    // 项目介绍
+    content: '',
+    // 开发者(个人)
+    developer: '',
+    director: '',
+    projectDirector: '',
+    salesman: '',
+    // 软件定价
+    price: '',
+    // 评分
+    score: '',
+    // 星级
+    star: '',
+    // 菜单组件地址
+    component: '',
+    // 菜单路由地址
+    path: '',
+    // 权限标识
+    authority: '',
+    // 打开位置
+    target: '',
+    // 是否隐藏, 0否, 1是(仅注册路由不显示在左侧菜单)
+    hide: undefined,
+    // 菜单侧栏选中的path
+    active: '',
+    // 其它路由元信息
+    meta: '',
+    // 版本
+    edition: '',
+    // 版本号
+    version: '',
+    // 是否已安装
+    isUse: undefined,
+    // 排序
+    sortNumber: undefined,
+    // 备注
+    comments: undefined,
+    tenantName: '',
+    companyName: '',
+    // 租户编号
+    tenantCode: '',
+    // 租户id
+    tenantId: undefined,
+    // 创建时间
+    createTime: '',
+    appStatus: '开发中',
+    // 状态
+    status: undefined,
+    // 发布者
+    userId: '',
+    // 发布者昵称
+    nickname: '',
+    // 子菜单
+    children: [],
+    // 权限树回显选中状态, 0未选中, 1选中
+    checked: false,
+    //
+    key: undefined,
+    //
+    value: undefined,
+    //
+    parentIds: [],
+    //
+    openType: undefined,
+    //
+    search: undefined,
+    // 成员管理
+    users: [],
+    // 项目需求
+    requirement: ''
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  const handleEditStatus = () => {
+    editStatus.value = !editStatus.value;
+  };
+
+  // 查看秘钥
+  const onAppSecret = () => {};
+  // 重置秘钥
+  const onUpdateAppSecret = () => {};
+
+  const reload = () => {
+    loading.value = true;
+    // 加载企业信息
+    const companyId = props.data?.companyId;
+    pageCompany({ companyId }).then((res) => {
+      form.tenantId = undefined;
+      const list = res?.list;
+      if (list && list.length > 0) {
+        form.tenantId = list[0].tenantId;
+      }
+    });
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        console.log(visible);
+        if (props.data) {
+          assignObject(form, props.data);
+          if (props.data.appTypeMultiple) {
+            form.appTypeMultiple = JSON.parse(props.data.appTypeMultiple);
+          }
+          reload();
+        } else {
+          editStatus.value = true;
+          isUpdate.value = false;
+        }
+      }
+    }
+  );
+</script>
+<style lang="less"></style>
+
+<style lang="less">
+  .tab-pane {
+    min-height: 300px;
+  }
+
+  .ml-10 {
+    margin-left: 5px;
+  }
+
+  .upload-text {
+    margin-right: 70px;
+  }
+
+  .upload-image {
+    margin-bottom: 30px;
+    display: flex;
+    justify-content: center;
+  }
+</style>
diff --git a/src/views/system/myApp/renew/components/renew-list.vue b/src/views/system/myApp/renew/components/renew-list.vue
new file mode 100644
index 0000000..060cf87
--- /dev/null
+++ b/src/views/system/myApp/renew/components/renew-list.vue
@@ -0,0 +1,302 @@
+<template>
+  <a-card
+    title="续费明细"
+    :bordered="false"
+  >
+    <template #extra>
+      <a-button @click="addRecord">添加</a-button>
+    </template>
+    <div class="content">
+      <table
+        class="ele-table ele-table-border ele-table-stripe ele-table-medium"
+      >
+        <thead>
+          <tr>
+            <th>开始时间</th>
+            <th>到期时间</th>
+            <th>续费金额</th>
+            <th>缴费状态</th>
+            <th width="320">描述</th>
+            <th width="180">附件</th>
+            <th style="text-align: center">操作人</th>
+          </tr>
+        </thead>
+        <tr v-for="(item, index) in list" :key="index">
+          <td>
+            <template v-if="item.editStatus">
+              <a-date-picker
+                placeholder="开始日期"
+                value-format="YYYY-MM-DD"
+                v-model:value="item.startTime"
+              />
+            </template>
+            <template v-else>
+              {{ toDateString(item.startTime, 'yyyy-MM-dd') }}
+            </template>
+          </td>
+          <td>
+            <template v-if="item.editStatus">
+              <a-date-picker
+                placeholder="结束日期"
+                value-format="YYYY-MM-DD"
+                v-model:value="item.endTime"
+              />
+            </template>
+            <template v-else>
+              {{ toDateString(item.endTime, 'yyyy-MM-dd') }}
+            </template>
+          </td>
+          <td>
+            <template v-if="item.editStatus">
+              <a-input-number
+                  :min="0"
+                  :max="999999"
+                  class="ele-fluid"
+                  placeholder="请输入续费金额"
+                  v-model:value="item.money"
+              />
+            </template>
+            <template v-else> ￥{{ item.money }} </template>
+          </td>
+          <td>
+            <template v-if="item.editStatus">
+              <a-select placeholder="请选择" v-model:value="item.status">
+                <a-select-option :value="1">已缴费</a-select-option>
+                <a-select-option :value="0">未缴费</a-select-option>
+              </a-select>
+            </template>
+            <template v-else>
+              <span v-if="item.status == 1">已缴费</span>
+              <span v-if="item.status == 0">未缴费</span>
+            </template>
+          </td>
+          <td>
+            <template v-if="item.editStatus">
+              <a-input
+                class="ele-fluid"
+                placeholder="请输入描述内容"
+                v-model:value="item.comments"
+              />
+            </template>
+            <template v-else>
+              <div class="comments">{{ item.comments }}</div>
+            </template>
+          </td>
+          <td>
+            <a-upload
+              v-if="item.editStatus"
+              v-model:file-list="item.files"
+              class="upload-list-inline"
+              :maxCount="1"
+              list-type="picture"
+              :before-upload="beforeUpload"
+            >
+              <a-button>
+                上传附件
+              </a-button>
+            </a-upload>
+            <div v-else class="files">
+              <a-upload
+                  disabled
+                  v-model:file-list="item.files"
+                  class="upload-list-inline"
+              >
+              </a-upload>
+            </div>
+          </td>
+          <td style="text-align: center">
+            <template v-if="!item.editStatus">
+              <a-space>
+                {{ item.nickname }}
+                <a-popconfirm title="确定要删除此记录吗？" v-if="hasRole('superAdmin')" @confirm="removeRel(index)">
+                  <a class="ele-text-info">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+            <template v-else>
+              <a-space>
+                <a @click="save(item, index)">保存</a>
+                <a-divider type="vertical" />
+                <a-popconfirm title="确定要删除此记录吗？" @confirm="remove(index)">
+                  <a class="ele-text-info">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </a-card>
+</template>
+
+<script setup lang="ts">
+  import { hasRole } from '@/utils/permission';
+  import { ref, watch } from 'vue';
+  import { addAppRenew, pageAppRenew, removeAppRenew, updateAppRenew } from "@/api/oa/app/renew";
+  import { AppRenew } from '@/api/oa/app/renew/model';
+  import { useUserStore } from '@/store/modules/user';
+  import { message } from 'ant-design-vue';
+  import { toDateString } from 'ele-admin-pro';
+  import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
+  import { uploadOss } from "@/api/system/file";
+  import { isImage } from "@/utils/common";
+  import { UploadOutlined } from "@ant-design/icons-vue";
+  import rect from "zrender/src/graphic/shape/Rect";
+
+  const props = defineProps<{
+    editStatus?: boolean;
+    appId?: number;
+    companyId?: number;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  interface fileItem {
+    uid?: number,
+    url?: string,
+    name?: string,
+    status?: string | "done"
+  }
+
+  const userStore = useUserStore();
+  const list = ref<AppRenew[]>([]);
+  const files = ref<fileItem[]>([]);
+  const showUploadBtn = ref(false);
+
+  const addRecord = () => {
+    list.value.unshift({
+      appRenewId: undefined,
+      money: undefined,
+      comments: undefined,
+      startTime: undefined,
+      endTime: undefined,
+      nickname: undefined,
+      status: 1,
+      images: undefined,
+      files: undefined,
+      editStatus: true
+    });
+  };
+
+  // 文件上传事件
+  const beforeUpload = (file: File) => {
+    const item: ItemType = {
+      file,
+      uid: (file as any).uid,
+      name: file.name
+    }
+    if (!file.type.startsWith("image")) {
+      if (file.size / 1024 / 1024 > 100) {
+        message.error("大小不能超过 100MB");
+        return;
+      }
+    }
+    onUpload(item);
+    return false;
+  };
+
+  const onUpload = (d: ItemType) => {
+    uploadOss(<File>d.file)
+      .then((result) => {
+        files.value.push({
+          uid: result.id,
+          url: result.path,
+          name: isImage(result.path) ? 'image' : result.name,
+          status: "done"
+        });
+        message.success("上传成功");
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  const remove = (index: number) => {
+    list.value.splice(index, 1);
+  };
+
+  const removeRel = (index: number) => {
+    removeAppRenew(list.value[index].appRenewId).then(() => {
+      list.value.splice(index, 1);
+      message.success('删除成功')
+    })
+  }
+
+  const openEdit = (index: number) => {
+    list.value[index].editStatus = true
+  }
+
+  const save = (item: AppRenew, index: number) => {
+
+    item.appId = props.appId;
+    item.companyId = props.companyId;
+    item.startTime = item.startTime ? item.startTime + ' 00:00:00' : '';
+    item.endTime = item.endTime ? item.endTime + ' 23:59:59' : '';
+    item.nickname = userStore.info?.nickname;
+    item.userId = userStore.info?.userId;
+    if (item.money == undefined || item.money == 0) {
+      message.error('请填写金额');
+      return false;
+    }
+    if(files.value && files.value.length > 0){
+      item.images = JSON.stringify(files.value)
+    }
+    list.value[index].editStatus = false;
+    addAppRenew(item).then(() => {
+      message.success('保存成功');
+      reload();
+    });
+    // if (item.appRenewId) {
+    //   if(item.images.length > 0){
+    //     list.value[index].images = JSON.parse(list.value[index].images)
+    //   }
+    //   updateAppRenew(item).then(() => {
+    //     message.success('更新成功');
+    //   })
+    // }else {
+    //   addAppRenew(item).then(() => {
+    //     message.success('保存成功');
+    //   });
+    // }
+
+  };
+
+  const reload = () => {
+    pageAppRenew({ appId: props.appId }).then((res) => {
+      files.value = [];
+      if (res?.list) {
+        list.value = res?.list.map((d) => {
+          d.editStatus = false;
+          if(d.images){
+            d.files = JSON.parse(d.images);
+          }else{
+            d.files = [];
+          }
+          return d;
+        });
+      }
+    });
+  };
+
+  watch(
+    () => props.appId,
+    (options) => {
+      if (options) {
+        reload();
+      }
+    },
+    {
+      immediate: true
+    }
+  );
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/views/system/myApp/renew/components/search.vue b/src/views/system/myApp/renew/components/search.vue
new file mode 100644
index 0000000..10b0374
--- /dev/null
+++ b/src/views/system/myApp/renew/components/search.vue
@@ -0,0 +1,100 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <!--    <SelectCompany-->
+    <!--      :placeholder="`按企业筛选`"-->
+    <!--      v-model:value="where.companyName"-->
+    <!--      @done="chooseCompany"-->
+    <!--    />-->
+    <SelectApp
+      :placeholder="`按应用筛选`"
+      v-model:value="where.appName"
+      @done="chooseApp"
+    />
+    <a-input-search
+      allow-clear
+      placeholder="请输入关键词"
+      v-model:value="where.keywords"
+      @pressEnter="search"
+      @search="search"
+    />
+    <a-button @click="reset">重置</a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import useSearch from '@/utils/use-search';
+  import { ref, watch } from 'vue';
+  import { App, AppParam } from '@/api/oa/app/model';
+  import { Company } from '@/api/system/company/model';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: AppParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'advanced'): void;
+  }>();
+
+  // 表单数据
+  const { where, resetFields } = useSearch<AppParam>({
+    appId: undefined,
+    userId: undefined,
+    appStatus: undefined,
+    companyId: undefined,
+    keywords: ''
+  });
+  // 下来选项
+  // 日期范围选择
+  const dateRange = ref<[string, string]>(['', '']);
+
+  /* 搜索 */
+  const search = () => {
+    const [d1, d2] = dateRange.value ?? [];
+    emit('search', {
+      ...where,
+      createTimeStart: d1 ? d1 + ' 00:00:00' : '',
+      createTimeEnd: d2 ? d2 + ' 23:59:59' : ''
+    });
+  };
+
+  // 发布应用
+  const add = () => {
+    emit('add');
+  };
+
+  // 批量删除
+  const removeBatch = () => {
+    emit('remove');
+  };
+
+  const chooseCompany = (data: Company) => {
+    where.companyName = data.companyName;
+    where.companyId = data.companyId;
+    emit('search', where);
+  };
+
+  const chooseApp = (data: App) => {
+    where.appName = data.appName;
+    where.appId = data.appId;
+    emit('search', where);
+  };
+
+  /*  重置 */
+  const reset = () => {
+    resetFields();
+    search();
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>
diff --git a/src/views/system/myApp/renew/index.vue b/src/views/system/myApp/renew/index.vue
new file mode 100644
index 0000000..5717870
--- /dev/null
+++ b/src/views/system/myApp/renew/index.vue
@@ -0,0 +1,354 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false">
+        <!-- 表格 -->
+        <ele-pro-table
+          ref="tableRef"
+          row-key="appId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          tool-class="ele-toolbar-form"
+          :scroll="{ x: 1200 }"
+          class="sys-org-table"
+          :striped="true"
+        >
+          <template #toolbar>
+            <search @search="reload" @add="openEdit" />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'companyName'">
+              <div class="app-box">
+                <a-image
+                  :height="45"
+                  :width="45"
+                  :preview="false"
+                  :src="record.companyLogo"
+                  fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
+                />
+                <div class="app-info">
+                  <span class="ele-text-heading">
+                    {{ record.shortName }}
+                  </span>
+                  <span class="ele-text-placeholder">
+                    {{ record.companyName }}
+                  </span>
+                </div>
+              </div>
+            </template>
+            <template v-if="column.key === 'appName'">
+              <div class="app-box">
+                <a-image
+                  :height="45"
+                  :width="45"
+                  :preview="false"
+                  :src="record.appIcon"
+                  fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
+                />
+                <div class="app-info">
+                  <a class="ele-text-heading" @click="openEdit(record)">
+                    {{ record.appName }}
+                  </a>
+                  <span class="ele-text-placeholder">
+                    {{ record.appCode }}
+                  </span>
+                </div>
+              </div>
+            </template>
+            <template v-if="column.key === 'appCode'">
+              <span>{{ record.appCode }}</span>
+            </template>
+            <template v-if="column.key === 'appStatus'">
+              <a-tag v-if="record.appStatus === '开发中'" color="red">{{
+                record.appStatus
+              }}</a-tag>
+              <a-tag v-if="record.appStatus === '已上架'" color="success">{{
+                record.appStatus
+              }}</a-tag>
+              <a-tag v-if="record.appStatus === '维护中'" color="orange">{{
+                record.appStatus
+              }}</a-tag>
+              <a-tag v-if="record.appStatus === '已下架'">{{
+                record.appStatus
+              }}</a-tag>
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag color="orange" v-if="record.status == 0">未缴费</a-tag>
+              <a-tag color="green" v-if="record.status == 1">已缴费</a-tag>
+            </template>
+            <template v-if="column.key === 'expirationTime'">
+              <template v-if="expirationTime(record.expirationTime) < 30">
+                <a-space>
+                  <span class="ele-text-danger">{{
+                    toDateString(record.expirationTime, 'yyyy-MM-dd')
+                  }}</span>
+                  <span class="ele-text-placeholder"
+                    >(剩余{{ expirationTime(record.expirationTime) }}天)</span
+                  >
+                </a-space>
+              </template>
+              <template v-else>
+                {{ toDateString(record.expirationTime, 'yyyy-MM-dd') }}
+              </template>
+            </template>
+            <template v-if="column.key === 'renewMoney'">
+              <span @click="getLastMoney(record)"
+                >￥{{ record.renewMoney }}</span
+              >
+            </template>
+            <template v-if="column.key === 'images'">
+              <div class="files">
+                <a-upload
+                  v-model:file-list="record.files"
+                  disabled
+                  class="upload-list-inline"
+                />
+              </div>
+            </template>
+            <template v-if="column.key === 'comments'">
+              <div class="comments">{{ record.comments }}</div>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">管理</a>
+                <template v-if="hasRole('superAdmin')">
+                  <a-divider type="vertical" />
+                  <a-popconfirm
+                    title="确定要删除此记录吗？"
+                    @confirm="removeRel(record)"
+                  >
+                    <a class="ele-text-info">删除</a>
+                  </a-popconfirm>
+                </template>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+    </div>
+    <!-- 编辑弹窗 -->
+    <AppEdit v-model:visible="showEdit" :data="current" @done="reload" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import AppEdit from './components/app-edit.vue';
+  import { App, AppParam } from '@/api/oa/app/model';
+  import { toDateString } from 'ele-admin-pro';
+  import {
+    pageAppRenew,
+    removeAppRenew
+  } from '@/api/oa/app/renew';
+  import { hasRole } from '@/utils/permission';
+  import { message } from 'ant-design-vue';
+  import { AppRenew } from '@/api/oa/app/renew/model';
+  import { pageApp, updateApp } from '@/api/oa/app';
+
+  defineProps<{
+    activeKey?: boolean;
+    data?: any;
+  }>();
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      key: 'index',
+      width: 48,
+      align: 'center',
+      fixed: 'left',
+      hideInSetting: true,
+      customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
+    },
+    {
+      title: '所属企业',
+      dataIndex: 'companyName',
+      width: 280,
+      key: 'companyName'
+    },
+    {
+      title: '应用名称',
+      dataIndex: 'appName',
+      width: 300,
+      key: 'appName'
+    },
+    {
+      title: '到期时间',
+      dataIndex: 'expirationTime',
+      key: 'expirationTime',
+      sorter: true
+    },
+    {
+      title: '续费金额',
+      dataIndex: 'renewMoney',
+      key: 'renewMoney',
+      sorter: true,
+      customRender: ({ text }) => `￥${text}`
+    },
+    {
+      title: '缴费状态',
+      dataIndex: 'status',
+      key: 'status',
+      hideInTable: true,
+      width: 120
+    },
+    {
+      title: '状态',
+      dataIndex: 'appStatus',
+      key: 'appStatus',
+      width: 120
+    },
+    {
+      title: '备注',
+      dataIndex: 'comments',
+      key: 'comments'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 120,
+      align: 'center',
+      fixed: 'right',
+      hideInSetting: true
+    }
+  ]);
+
+  // 表格选中数据
+  const selection = ref<App[]>([]);
+  // 当前编辑数据
+  const current = ref<App | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    // 搜索条件
+    where.sort = 'expirationTime';
+    where.order = 'asc';
+    where.appStatus = '已上架';
+    where.showExpiration = true;
+    return pageApp({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+    // .then((res) => {
+    //     res?.list.map((d) => {
+    //       if (d.images) {
+    //         d.files = JSON.parse(d.images);
+    //       }
+    //     });
+    //     return res;
+    //   })
+  };
+
+  /* 搜索 */
+  const reload = (where?: AppParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: App) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  const getLastMoney = (item: AppRenew) => {
+    pageAppRenew({
+      appId: item.appId,
+      limit: 1
+    }).then((res) => {
+      if (res?.list.length == 1) {
+        const item = res.list[0];
+        console.log(item);
+        updateApp({
+          appId: item.appId,
+          renewMoney: item.money,
+          expirationTime: item.endTime + ' 23:59:59'
+        });
+        reload();
+      }
+    });
+  };
+
+  const expirationTime = (dateTime) => {
+    const now = new Date().getTime();
+    const expiration = new Date(dateTime).getTime();
+    const mss = expiration - now;
+    let days = Math.floor(mss / (1000 * 60 * 60 * 24));
+    let hours = Math.floor((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    let minutes = Math.floor((mss % (1000 * 60 * 60)) / (1000 * 60));
+    let seconds = Math.round((mss % (1000 * 60)) / 1000);
+    return days;
+  };
+
+  const removeRel = (item: AppRenew) => {
+    removeAppRenew(item.appRenewId).then(() => {
+      message.success('删除成功');
+      reload();
+    });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: App) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+
+  reload();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'AppIndex'
+  };
+</script>
+
+<style lang="less" scoped>
+  p {
+    line-height: 0.8;
+  }
+  .sys-org-table :deep(.ant-table-body) {
+    overflow: auto !important;
+    overflow: overlay !important;
+  }
+
+  .sys-org-table :deep(.ant-table-pagination.ant-pagination) {
+    padding: 0 4px;
+    margin-bottom: 0;
+  }
+  .price-edit {
+    padding-right: 5px;
+  }
+  .comments {
+    max-width: 200px;
+  }
+  .app-box {
+    display: flex;
+    .app-info {
+      display: flex;
+      margin-left: 5px;
+      flex-direction: column;
+    }
+  }
+</style>
diff --git a/src/views/system/myTask/add/index.vue b/src/views/system/myTask/add/index.vue
new file mode 100644
index 0000000..d2421dd
--- /dev/null
+++ b/src/views/system/myTask/add/index.vue
@@ -0,0 +1,329 @@
+<template>
+  <a-page-header title="提交工单" @back="push('/system/my-task')">
+    <a-card class="ele-body">
+        <a-form
+          ref="formRef"
+          :model="form"
+          :rules="rules"
+          :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
+          :wrapper-col="{ md: { span: 14 }, sm: { span: 24 }, xs: { span: 24 } }"
+          layout="vertical"
+        >
+          <a-row :gutter="16">
+            <a-col
+              v-bind="styleResponsive ? { md: 9, sm: 24, xs: 24 } : { span: 8 }"
+            >
+              <a-form-item label="标题" name="name">
+                <a-input
+                    allow-clear
+                    :maxlength="50"
+                    placeholder="请输入工单标题"
+                    v-model:value="form.name"
+                />
+              </a-form-item>
+<!--              <a-form-item label="联系方式" name="phone">-->
+<!--                <a-input-->
+<!--                  allow-clear-->
+<!--                  :maxlength="11"-->
+<!--                  placeholder="请输入手机号码"-->
+<!--                  v-model:value="form.phone"-->
+<!--                />-->
+<!--              </a-form-item>-->
+            </a-col>
+            <a-col
+                v-bind="styleResponsive ? { md: 9, sm: 24, xs: 24 } : { span: 8 }"
+            >
+              <a-form-item label="工单类型" name="taskType">
+                <a-select
+                  optionFilterProp="label"
+                  placeholder="请选择工单类型"
+                  :options="taskType"
+                  allow-clear
+                  v-model:value="form.taskType"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-col
+            v-bind="styleResponsive ? { md: 24, sm: 24, xs: 24 } : { span: 8 }"
+          >
+            <a-form-item label="问题描述" name="content">
+              <!-- 编辑器 -->
+              <byte-md-editor
+                v-model:value="content"
+                placeholder="请描述您的问题，支持图片粘贴"
+                :locale="zh_Hans"
+                :plugins="plugins"
+                mode="tab"
+                height="300px"
+                maxLength="500"
+                :editorConfig="{ lineNumbers: true }"
+                @paste="onPaste"
+              />
+            </a-form-item>
+            <a-form-item label="机密信息（选填）" name="files">
+              <a-textarea :rows="4" v-model:value="form.confidential" placeholder="请在此处填写项目名、账号、密码等机密信息，提交后机密信息将做加密处理"></a-textarea>
+            </a-form-item>
+          </a-col>
+          <a-form-item>
+            <a-button type="primary" block size="large" @click="save">提交</a-button>
+          </a-form-item>
+        </a-form>
+    </a-card>
+  </a-page-header>
+</template>
+
+<script lang="ts" setup>
+  // 表单数据
+  import useFormData from '@/utils/use-form-data';
+  import { Task } from '@/api/oa/task/model';
+  import {reactive, ref, unref, watch} from "vue";
+  import { FormInstance, Rule, RuleObject } from "ant-design-vue/es/form";
+  import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
+  import { uploadFile, uploadOss } from "@/api/system/file";
+  import { Form, message } from "ant-design-vue";
+  import gfm from "@bytemd/plugin-gfm";
+  import CryptoJS from 'crypto-js';
+  // 中文语言文件
+  import zh_Hans from 'bytemd/locales/zh_Hans.json';
+  import zh_HansGfm from "@bytemd/plugin-gfm/locales/zh_Hans.json";
+  import highlight from "@bytemd/plugin-highlight";
+  import { encrypt, getDictionaryOptions, getMobile, isImage, openUrl } from "@/utils/common";
+  import { addTask } from "@/api/oa/task";
+  import { isPhone } from "ele-admin-pro";
+  import { useUserStore } from "@/store/modules/user";
+  import { useParamsStore } from "@/store/modules/params";
+  import { useRouter } from "vue-router";
+  import { useThemeStore } from "@/store/modules/theme";
+  import { storeToRefs } from "pinia";
+  import { User } from "@/api/system/user/model";
+  import { App } from "@/api/oa/app/model";
+
+  const { currentRoute } = useRouter();
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const userStore = useUserStore();
+  const { info } = userStore;
+  const paramsStore = useParamsStore();
+  const { push } = useRouter();
+  const useForm = Form.useForm;
+  const taskType = [ { "key": "售前咨询", "value": "售前咨询", "label": "售前咨询", "comments": "" }, { "key": "售后服务", "value": "售后服务", "label": "售后服务", "comments": "" }, { "key": "技术支持", "value": "技术支持", "label": "技术支持", "comments": "" }, { "key": "经验分享", "value": "经验分享", "label": "经验分享", "comments": "" }, { "key": "意见反馈", "value": "意见反馈", "label": "意见反馈", "comments": "" } ] ;
+  const fileList = ref<any[]>([]);
+  const files = ref<ItemType[]>([]);
+  const phone = ref('');
+  const content = ref('');
+  const loading = ref(false);
+  const formRef = ref<FormInstance | null>(null);
+
+  const { form, resetFields, assignFields } = useFormData<Task>({
+    taskId: undefined,
+    taskType: undefined,
+    phone: info?.phone,
+    name: undefined,
+    status: undefined,
+    promoter: undefined,
+    comments: '',
+    redirect: '',
+    appId: undefined,
+    appName: '',
+    confidential: ''
+  });
+
+  // 表单验证规则
+  const rules = reactive({
+    taskType: [
+      {
+        required: true,
+        message: '请选择工单类型',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    content: [
+      {
+        required: true,
+        type: "string",
+        message: "请填写问题描述",
+        trigger: "blur",
+        validator: async (_rule: RuleObject, value: string) => {
+          if (content.value == "") {
+            return Promise.reject("请填写问题描述");
+          }
+          return Promise.resolve();
+        }
+      }
+    ],
+    name: [
+      {
+        required: true,
+        message: '请输入工单标题'
+      }
+    ],
+    phone: [
+      {
+        required: true,
+        message: '请输入正确的手机号码',
+        type: 'string',
+        trigger: 'blur',
+        validator: async (_rule: RuleObject, value: string) => {
+          if (!isPhone(value)) {
+            return Promise.reject("请输入正确的手机号码");
+          }
+          return Promise.resolve();
+        }
+      }
+    ],
+    sortNumber: [
+      {
+        required: true,
+        message: '请输入排序号',
+        type: 'number',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  // 插件
+  const plugins = ref([
+    gfm({
+      locale: zh_HansGfm
+    }),
+    highlight()
+  ]);
+
+  // 文件上传事件
+  const beforeUpload = (file: File) => {
+    const item: ItemType = {
+      file,
+      uid: (file as any).uid,
+      name: file.name
+    }
+    if (!file.type.startsWith("image")) {
+      if (file.size / 1024 / 1024 > 100) {
+        message.error("大小不能超过 100MB");
+        return;
+      }
+    }
+    onUpload(item);
+    return false;
+  };
+
+  const onUpload = (d: ItemType) => {
+    uploadOss(<File>d.file)
+      .then((result) => {
+        files.value.push({
+          uid: result.id,
+          url: result.path,
+          name: isImage(result.path) ? 'image' : result.name,
+          status: "done"
+        });
+        message.success("上传成功");
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  /* 粘贴图片上传服务器并插入编辑器 */
+  const onPaste = (e) => {
+    const items = (e.clipboardData || e.originalEvent.clipboardData).items;
+    let hasFile = false;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.indexOf('image') !== -1) {
+        let file = items[i].getAsFile();
+        const item: ItemType = {
+          file,
+          uid: (file as any).lastModified,
+          name: file.name
+        };
+        uploadOss(<File>item.file)
+          .then((result) => {
+            const addPath = '!['+result.name+']('+ result.url+')\n\r';
+            content.value = content.value + addPath
+          })
+          .catch((e) => {
+            message.error(e.message);
+          });
+        hasFile = true;
+      }
+    }
+    if (hasFile) {
+      e.preventDefault();
+    }
+  }
+
+  /**
+   * 选择应用
+   * @param item
+   */
+  const chooseApp = (item: App) => {
+    form.appId = item.appId;
+    form.appName = item.appName;
+  };
+
+  const {validate, validateInfos} = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        if (!isPhone(String(form.phone))) {
+          message.error(form.phone)
+          return false
+        }
+        const data = {
+          ...form,
+          // 处理工单内容
+          content: content.value,
+          files: JSON.stringify(files.value)
+        };
+        // 加密信息处理
+        if(form.confidential != ''){
+          data.confidential = encrypt(form.confidential)
+        }else {
+          data.confidential = undefined
+        }
+        addTask(data)
+          .then((res) => {
+            loading.value = false;
+            content.value = '';
+            files.value = [];
+            paramsStore.setBack('/system/my-task')
+            paramsStore.setRedirect('/system/my-task/detail/' + res?.taskId);
+            setTimeout(() => {
+              openUrl('/result/success');
+            },200)
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+  watch(
+      currentRoute,
+      (route) => {
+        const { query } = unref(route);
+        const { appId,appName } = query;
+        if (appId) {
+          form.appId = Number(appId);
+          form.appName = String(appName);
+        }
+      },
+      { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'TaskAdd'
+  };
+</script>
diff --git a/src/views/system/myTask/admin/components/count-pending-all.vue b/src/views/system/myTask/admin/components/count-pending-all.vue
new file mode 100644
index 0000000..37f7560
--- /dev/null
+++ b/src/views/system/myTask/admin/components/count-pending-all.vue
@@ -0,0 +1,154 @@
+<!-- 项目进度 -->
+<template>
+  <a-card
+    title="全部待处理"
+    :bordered="false"
+    :body-style="{ padding: '14px', height: '315px' }"
+  >
+    <template #extra>
+      <more-icon @remove="onRemove" @edit="onEdit" />
+    </template>
+    <a-table
+      row-key="taskId"
+      size="middle"
+      :pagination="false"
+      :customRow="customRow"
+      :data-source="taskList"
+      :columns="taskColumns"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'content'">
+          <a @click="openUrl('/oa/task/detail/' + record.taskId)">{{
+            record.content
+          }}</a>
+        </template>
+        <template v-else-if="column.key === 'status'">
+          <a-tag v-if="record.progress === TOBEARRANGED" color="red"
+            >待安排</a-tag
+          >
+          <a-tag v-if="record.progress === PENDING" color="orange"
+            >待处理</a-tag
+          >
+          <a-tag v-if="record.progress === PROCESSING" color="purple"
+            >处理中</a-tag
+          >
+          <a-tag v-if="record.progress === TOBECONFIRMED" color="cyan"
+            >待评价</a-tag
+          >
+          <a-tag v-if="record.progress === COMPLETED" color="green"
+            >已完成</a-tag
+          >
+          <a-tag v-if="record.progress === CLOSED">已关闭</a-tag>
+        </template>
+        <template v-else-if="column.key === 'progress'">
+          <a-progress :percent="record.progress * 2" :steps="5" />
+        </template>
+      </template>
+    </a-table>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { ColumnsType } from 'ant-design-vue/es/table';
+  import { pageTask } from '@/api/oa/task';
+  import { openUrl } from '@/utils/common';
+  import type { Task } from '@/api/oa/task/model';
+  import {
+    CLOSED,
+    COMPLETED,
+    PENDING,
+    PROCESSING,
+    TOBEARRANGED,
+    TOBECONFIRMED
+  } from '@/api/oa/task/model/progress';
+  import { toDateString } from 'ele-admin-pro';
+
+  defineProps<{
+    title?: string;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'remove'): void;
+    (e: 'edit'): void;
+  }>();
+
+  const taskColumns = ref<ColumnsType>([
+    {
+      key: 'index',
+      align: 'center',
+      width: 48,
+      customRender: ({ index }) => index + 1,
+      fixed: 'left'
+    },
+    {
+      title: '工单类型',
+      dataIndex: 'taskType',
+      width: 120
+    },
+    {
+      title: '问题描述',
+      dataIndex: 'content',
+      key: 'content',
+      ellipsis: true
+    },
+    {
+      title: '问题描述',
+      dataIndex: 'content',
+      key: 'content',
+      ellipsis: true
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+      width: 120
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      width: 120,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    }
+  ]);
+
+  // 项目进度数据
+  const taskList = ref<Task[]>([]);
+
+  /* 查询项目进度 */
+  const queryTaskList = () => {
+    pageTask({ limit: 5, status: 0 }).then((data) => {
+      if (data) {
+        taskList.value = data.list;
+      }
+    });
+  };
+
+  const onRemove = () => {
+    emit('remove');
+  };
+
+  const onEdit = () => {
+    emit('edit');
+  };
+
+  queryTaskList();
+
+  /* 自定义行属性 */
+  const customRow = (record: Task) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        window.open('/oa/task/detail/' + record.taskId);
+        // openInfo(record);
+      }
+    };
+  };
+</script>
diff --git a/src/views/system/myTask/admin/components/count-pending.vue b/src/views/system/myTask/admin/components/count-pending.vue
new file mode 100644
index 0000000..7d76cfe
--- /dev/null
+++ b/src/views/system/myTask/admin/components/count-pending.vue
@@ -0,0 +1,153 @@
+<!-- 项目进度 -->
+<template>
+  <a-card
+    title="待处理工单"
+    :bordered="false"
+    :body-style="{ padding: '14px', height: '315px' }"
+  >
+    <template #extra>
+      <more-icon @remove="onRemove" @edit="onEdit" />
+    </template>
+    <a-table
+      row-key="taskId"
+      size="middle"
+      :pagination="false"
+      :customRow="customRow"
+      :data-source="taskList"
+      :columns="taskColumns"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'content'">
+          <a @click="openUrl('/oa/task/detail/' + record.taskId)">{{
+            record.content
+          }}</a>
+        </template>
+        <template v-else-if="column.key === 'status'">
+          <a-tag v-if="record.progress === TOBEARRANGED" color="red"
+            >待安排</a-tag
+          >
+          <a-tag v-if="record.progress === PENDING" color="orange"
+            >待处理</a-tag
+          >
+          <a-tag v-if="record.progress === PROCESSING" color="purple"
+            >处理中</a-tag
+          >
+          <a-tag v-if="record.progress === TOBECONFIRMED" color="cyan"
+            >待评价</a-tag
+          >
+          <a-tag v-if="record.progress === COMPLETED" color="green"
+            >已完成</a-tag
+          >
+          <a-tag v-if="record.progress === CLOSED">已关闭</a-tag>
+        </template>
+        <template v-else-if="column.key === 'progress'">
+          <a-progress :percent="record.progress * 2" :steps="5" />
+        </template>
+      </template>
+    </a-table>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { ColumnsType } from 'ant-design-vue/es/table';
+  import { pageTask } from '@/api/oa/task';
+  import { openUrl } from '@/utils/common';
+  import type { Task } from '@/api/oa/task/model';
+  import {
+    CLOSED,
+    COMPLETED,
+    PENDING,
+    PROCESSING,
+    TOBEARRANGED,
+    TOBECONFIRMED
+  } from '@/api/oa/task/model/progress';
+  import { EleProTable, toDateString } from 'ele-admin-pro';
+  import { useUserStore } from '@/store/modules/user';
+  import { storeToRefs } from 'pinia';
+
+  defineProps<{
+    title?: string;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'remove'): void;
+    (e: 'edit'): void;
+  }>();
+
+  const taskColumns = ref<ColumnsType>([
+    {
+      key: 'index',
+      align: 'center',
+      width: 48,
+      customRender: ({ index }) => index + 1,
+      fixed: 'left'
+    },
+    {
+      title: '工单类型',
+      dataIndex: 'taskType',
+      width: 120
+    },
+    {
+      title: '问题描述',
+      dataIndex: 'content',
+      key: 'content',
+      ellipsis: true
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+      width: 120
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      width: 120,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    }
+  ]);
+
+  // 项目进度数据
+  const taskList = ref<Task[]>([]);
+
+  /* 查询项目进度 */
+  const queryTaskList = () => {
+    const userStore = useUserStore();
+    const { info } = storeToRefs(userStore);
+    const userId = info.value?.userId;
+    pageTask({ limit: 5, status: 0, userId }).then((data) => {
+      if (data) {
+        taskList.value = data.list;
+      }
+    });
+  };
+
+  const onRemove = () => {
+    emit('remove');
+  };
+
+  const onEdit = () => {
+    emit('edit');
+  };
+
+  queryTaskList();
+
+  /* 自定义行属性 */
+  const customRow = (record: Task) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        window.open('/oa/task/detail/' + record.taskId);
+        // openInfo(record);
+      }
+    };
+  };
+</script>
diff --git a/src/views/system/myTask/admin/components/count-rate.vue b/src/views/system/myTask/admin/components/count-rate.vue
new file mode 100644
index 0000000..4f49fc6
--- /dev/null
+++ b/src/views/system/myTask/admin/components/count-rate.vue
@@ -0,0 +1,86 @@
+<template>
+  <a-card :bordered="false" title="用户评价" :body-style="{ padding: '14px', height: '315px' }">
+    <div class="ele-cell ele-cell-align-bottom">
+      <div style="font-size: 51px; line-height: 1">4.5</div>
+      <div class="ele-cell-content">
+        <a-rate :value="userRate" disabled />
+        <span style="color: #fadb14; margin-left: 8px">很棒</span>
+      </div>
+    </div>
+    <div class="ele-cell" style="margin: 18px 0">
+      <div style="font-size: 28px; line-height: 1" class="ele-text-placeholder">
+        -0%
+      </div>
+      <div class="ele-cell-content ele-text-small ele-text-secondary">
+        当前没有评价波动
+      </div>
+    </div>
+    <div class="ele-cell">
+      <div class="ele-cell-content">
+        <a-progress :percent="60" stroke-color="#52c41a" :show-info="false" />
+      </div>
+      <div class="monitor-evaluate-text">
+        <star-filled />
+        <span>5 : 368 人</span>
+      </div>
+    </div>
+    <div class="ele-cell">
+      <div class="ele-cell-content">
+        <a-progress :percent="40" stroke-color="#1890ff" :show-info="false" />
+      </div>
+      <div class="monitor-evaluate-text">
+        <star-filled />
+        <span>4 : 256 人</span>
+      </div>
+    </div>
+    <div class="ele-cell">
+      <div class="ele-cell-content">
+        <a-progress :percent="20" stroke-color="#faad14" :show-info="false" />
+      </div>
+      <div class="monitor-evaluate-text">
+        <star-filled />
+        <span>3 : 49 人</span>
+      </div>
+    </div>
+    <div class="ele-cell">
+      <div class="ele-cell-content">
+        <a-progress :percent="10" stroke-color="#f5222d" :show-info="false" />
+      </div>
+      <div class="monitor-evaluate-text">
+        <star-filled />
+        <span>2 : 14 人</span>
+      </div>
+    </div>
+    <div class="ele-cell">
+      <div class="ele-cell-content">
+        <a-progress :percent="0" :show-info="false" />
+      </div>
+      <div class="monitor-evaluate-text">
+        <star-filled />
+        <span>1 : 0 人</span>
+      </div>
+    </div>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { StarFilled } from '@ant-design/icons-vue';
+
+  // 用户评分
+  const userRate = ref(4.5);
+</script>
+
+<style lang="less" scoped>
+  .monitor-evaluate-text {
+    width: 90px;
+    flex-shrink: 0;
+    white-space: nowrap;
+    opacity: 0.8;
+
+    & > .anticon {
+      font-size: 12px;
+      margin: 0 6px 0 8px;
+    }
+  }
+</style>
diff --git a/src/views/system/myTask/admin/components/count-satisfaction.vue b/src/views/system/myTask/admin/components/count-satisfaction.vue
new file mode 100644
index 0000000..7fcf111
--- /dev/null
+++ b/src/views/system/myTask/admin/components/count-satisfaction.vue
@@ -0,0 +1,79 @@
+<template>
+  <a-card :bordered="false" title="用户满意度" :body-style="{ padding: '14px', height: '315px' }">
+    <div class="ele-cell ele-text-center">
+      <div class="ele-cell-content" style="font-size: 24px">856</div>
+      <div class="ele-cell-content">
+        <div class="monitor-face-smile"><i></i></div>
+        <div class="ele-text-secondary ele-elip" style="margin-top: 8px">
+          正面评论
+        </div>
+      </div>
+      <h2 class="ele-cell-content ele-text-success">82%</h2>
+    </div>
+    <a-divider style="margin: 26px 0" />
+    <div class="ele-cell ele-text-center">
+      <div class="ele-cell-content" style="font-size: 24px">60</div>
+      <div class="ele-cell-content">
+        <div class="monitor-face-cry"><i></i></div>
+        <div class="ele-text-secondary ele-elip" style="margin-top: 8px">
+          负面评论
+        </div>
+      </div>
+      <h2 class="ele-cell-content ele-text-danger">9%</h2>
+    </div>
+  </a-card>
+</template>
+
+<style lang="less" scoped>
+  .monitor-face-smile,
+  .monitor-face-cry {
+    width: 50px;
+    height: 50px;
+    display: inline-block;
+    background: #fbd971;
+    border-radius: 50%;
+    position: relative;
+  }
+
+  .monitor-face-smile > i,
+  .monitor-face-smile:before,
+  .monitor-face-smile:after,
+  .monitor-face-cry > i,
+  .monitor-face-cry:before,
+  .monitor-face-cry:after {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    transform: rotate(225deg);
+    border: 3px solid #f0c419;
+    border-right-color: transparent !important;
+    border-bottom-color: transparent !important;
+    position: absolute;
+    bottom: 8px;
+    left: 11px;
+  }
+
+  .monitor-face-smile:before,
+  .monitor-face-smile:after,
+  .monitor-face-cry:before,
+  .monitor-face-cry:after {
+    content: '';
+    width: 12px;
+    height: 12px;
+    left: 8px;
+    top: 14px;
+    border-color: #f29c1f;
+    transform: rotate(45deg);
+  }
+
+  .monitor-face-smile:after,
+  .monitor-face-cry:after {
+    left: auto;
+    right: 8px;
+  }
+
+  .monitor-face-cry > i {
+    transform: rotate(45deg);
+    bottom: -6px;
+  }
+</style>
diff --git a/src/views/system/myTask/admin/components/qrcode.vue b/src/views/system/myTask/admin/components/qrcode.vue
new file mode 100644
index 0000000..6acef7b
--- /dev/null
+++ b/src/views/system/myTask/admin/components/qrcode.vue
@@ -0,0 +1,66 @@
+<template>
+  <ele-modal
+    :width="400"
+    :visible="visible"
+    :title="`工单号：${taskId}`"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    :footer="null"
+    @ok="save"
+  >
+    <div
+      class="qrcode-list"
+      style="display: flex; justify-content: space-around"
+    >
+      <div>
+        <img :src="qrcode" width="240" height="240" />
+        <div
+          style="
+            display: flex;
+            justify-content: center;
+            font-size: 26px;
+            padding-top: 20px;
+          "
+          >微信扫一扫</div
+        >
+      </div>
+    </div>
+  </ele-modal>
+</template>
+<script lang="ts" setup>
+  import { User } from '@/api/system/user/model';
+  import { reactive, ref } from 'vue';
+
+  defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done', user: User): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  const qrcode = ref('https://file.jimeigroup.cn/reg-code3/hgkghiji.png');
+
+  // 用户信息
+  const form = reactive<User>({
+    userId: undefined,
+    nickname: undefined
+  });
+
+  const chooseUser = (item: User) => {
+    form.userId = item.userId;
+    form.nickname = item.nickname;
+  };
+
+  const save = () => {
+    emit('done', form);
+  };
+</script>
+<style scoped lang="less"></style>
diff --git a/src/views/system/myTask/admin/index.vue b/src/views/system/myTask/admin/index.vue
new file mode 100644
index 0000000..b38379a
--- /dev/null
+++ b/src/views/system/myTask/admin/index.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="ele-body ele-body-card">
+    <a-row :gutter="16">
+      <a-col v-bind="styleResponsive ? { md: 6, sm: 24, xs: 24 } : { span: 8 }">
+        <a-card class="analysis-chart-card" :bordered="false">
+          <div class="ele-text-secondary ele-cell">
+            <div class="ele-cell-content">待处理</div>
+          </div>
+          <h1 class="ele-text-danger">
+            {{ pendingCount }}
+          </h1>
+        </a-card>
+      </a-col>
+      <a-col v-bind="styleResponsive ? { md: 6, sm: 24, xs: 24 } : { span: 8 }">
+        <a-card class="analysis-chart-card" :bordered="false">
+          <div class="ele-text-secondary ele-cell">
+            <div class="ele-cell-content">今日处理</div>
+            <ele-tag color="red">日</ele-tag>
+          </div>
+          <h1 class="analysis-chart-card-num">{{ todayCount }}</h1>
+        </a-card>
+      </a-col>
+      <a-col v-bind="styleResponsive ? { md: 6, sm: 24, xs: 24 } : { span: 8 }">
+        <a-card class="analysis-chart-card" :bordered="false">
+          <div class="ele-text-secondary ele-cell">
+            <div class="ele-cell-content">本月处理</div>
+            <ele-tag color="blue">月</ele-tag>
+          </div>
+          <h1 class="analysis-chart-card-num">{{ monthCount }}</h1>
+        </a-card>
+      </a-col>
+      <a-col v-bind="styleResponsive ? { md: 6, sm: 24, xs: 24 } : { span: 8 }">
+        <a-card class="analysis-chart-card" :bordered="false">
+          <div class="ele-text-secondary ele-cell">
+            <div class="ele-cell-content">今年处理</div>
+            <ele-tag color="green">年</ele-tag>
+          </div>
+          <h1 class="analysis-chart-card-num">{{ yearCount }}</h1>
+        </a-card>
+      </a-col>
+    </a-row>
+    <a-row :gutter="16">
+      <a-col
+        v-bind="
+          styleResponsive
+            ? { xl: 12, lg: 12, md: 12, sm: 12, xs: 24 }
+            : { span: 6 }
+        "
+      >
+        <CountPendingAll />
+      </a-col>
+      <a-col
+        v-bind="
+          styleResponsive
+            ? { xl: 6, lg: 24, md: 24, sm: 24, xs: 24 }
+            : { span: 12 }
+        "
+      >
+        <CountRate />
+      </a-col>
+      <a-col
+        v-bind="
+          styleResponsive
+            ? { xl: 6, lg: 12, md: 12, sm: 12, xs: 24 }
+            : { span: 6 }
+        "
+      >
+        <CountSatisfaction />
+      </a-col>
+      <a-col
+        v-bind="
+          styleResponsive
+            ? { xl: 6, lg: 12, md: 12, sm: 12, xs: 24 }
+            : { span: 6 }
+        "
+      >
+        <Qrcode />
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import CountSatisfaction from './components/count-satisfaction.vue';
+  import CountRate from './components/count-rate.vue';
+  import CountPendingAll from './components/count-pending-all.vue';
+  import Qrcode from './components/qrcode.vue';
+  import { pageTask } from '@/api/oa/task';
+  import { ref } from 'vue';
+  import { useUserStore } from '@/store/modules/user';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+  // 当前登录用户
+  const userStore = useUserStore();
+  const { info } = storeToRefs(userStore);
+  const pendingCount = ref(0);
+  const pendingAllCount = ref(0);
+  const todayCount = ref(0);
+  const monthCount = ref(0);
+  const yearCount = ref(0);
+
+  const queryTaskCount = () => {
+    if (info.value?.roles) {
+
+    }
+    const userId = info.value?.userId;
+    pageTask({ status: 0, userId }).then((res) => {
+      if (res) {
+        pendingCount.value = res.count;
+      }
+    });
+    pageTask({ status: 0 }).then((res) => {
+      if (res) {
+        pendingAllCount.value = res.count;
+      }
+    });
+    pageTask({}).then((res) => {
+      if (res) {
+        todayCount.value = res.count;
+      }
+    });
+    pageTask({}).then((res) => {
+      if (res) {
+        monthCount.value = res.count;
+      }
+    });
+    pageTask({}).then((res) => {
+      if (res) {
+        yearCount.value = res.count;
+      }
+    });
+  };
+  queryTaskCount();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'CountIndex'
+  };
+</script>
+
+<style lang="less" scoped>
+  .a-cursor {
+    cursor: pointer;
+  }
+</style>
diff --git a/src/views/system/myTask/components/carousel.vue b/src/views/system/myTask/components/carousel.vue
new file mode 100644
index 0000000..6a11709
--- /dev/null
+++ b/src/views/system/myTask/components/carousel.vue
@@ -0,0 +1,14 @@
+<template>
+  <a-carousel autoplay>
+    <img
+      src="https://img.alicdn.com/imgextra/i4/O1CN013yxpDR1q9WcnF3YjX_!!6000000005453-2-tps-768-224.png"
+    />
+    <img
+      src="https://img.alicdn.com/imgextra/i3/O1CN01Wa5kxT1TIvandcSam_!!6000000002360-2-tps-768-224.png"
+    />
+  </a-carousel>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="less"></style>
diff --git a/src/views/system/myTask/components/count-num.vue b/src/views/system/myTask/components/count-num.vue
new file mode 100644
index 0000000..304a2ee
--- /dev/null
+++ b/src/views/system/myTask/components/count-num.vue
@@ -0,0 +1,119 @@
+<template>
+  <a-row :gutter="16">
+    <a-col v-bind="styleResponsive ? { md: 6, sm: 12, xs: 12 } : { span: 8 }">
+      <a-card
+        class="analysis-chart-card"
+        style="align-items: flex-start; justify-content: start"
+        :bordered="false"
+      >
+        <div class="ele-text-secondary ele-cell">
+          <div class="ele-cell-content"> 待处理 </div>
+          <ele-tag
+            color="orange"
+            v-if="hasRole('superAdmin') || hasRole('admin')"
+            >管理员</ele-tag
+          >
+          <ele-tag color="orange" v-else-if="hasRole('commander')"
+            >受理人员</ele-tag
+          >
+          <ele-tag color="orange" v-else>我</ele-tag>
+        </div>
+        <h1 class="ele-text-danger">{{ form.pending }}</h1>
+      </a-card>
+    </a-col>
+    <!--    <a-col v-bind="styleResponsive ? { md: 6, sm: 12, xs: 12 } : { span: 8 }">-->
+    <!--      <a-card class="analysis-chart-card" :bordered="false">-->
+    <!--        <div class="ele-text-secondary ele-cell">-->
+    <!--          <div class="ele-cell-content">待处理</div>-->
+    <!--        </div>-->
+    <!--        <h1 class="ele-text-danger">-->
+    <!--          {{ form.pending }}-->
+    <!--        </h1>-->
+    <!--      </a-card>-->
+    <!--    </a-col>-->
+    <a-col v-bind="styleResponsive ? { md: 6, sm: 12, xs: 12 } : { span: 8 }">
+      <a-card class="analysis-chart-card" :bordered="false">
+        <div class="ele-text-secondary ele-cell">
+          <div class="ele-cell-content">今日已处理</div>
+          <ele-tag color="green">日</ele-tag>
+        </div>
+        <h1 class="analysis-chart-card-num">{{ form.today }}</h1>
+      </a-card>
+    </a-col>
+    <a-col v-bind="styleResponsive ? { md: 6, sm: 12, xs: 12 } : { span: 8 }">
+      <a-card class="analysis-chart-card" :bordered="false">
+        <div class="ele-text-secondary ele-cell">
+          <div class="ele-cell-content">本月已处理</div>
+          <ele-tag color="blue">月</ele-tag>
+        </div>
+        <h1 class="analysis-chart-card-num">{{ form.month }}</h1>
+      </a-card>
+    </a-col>
+    <a-col v-bind="styleResponsive ? { md: 6, sm: 12, xs: 12 } : { span: 8 }">
+      <a-card class="analysis-chart-card" :bordered="false">
+        <div class="ele-text-secondary ele-cell">
+          <div class="ele-cell-content">今年已处理</div>
+          <ele-tag color="green">年</ele-tag>
+        </div>
+        <h1 class="analysis-chart-card-num">{{ form.year }}</h1>
+      </a-card>
+    </a-col>
+  </a-row>
+</template>
+
+<script setup lang="ts">
+  // 是否开启响应式布局
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import useFormData from '@/utils/use-form-data';
+  import { TaskCount } from '@/api/oa/task-count/model';
+  import { pageTaskCount } from '@/api/oa/task-count';
+  import { useUserStore } from '@/store/modules/user';
+  import { hasRole } from '@/utils/permission';
+  import useSearch from '@/utils/use-search';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+  // 当前登录用户
+  const userStore = useUserStore();
+  // 用户信息
+  const { form, assignFields } = useFormData<TaskCount>({
+    pending: 0,
+    unused: 0,
+    today: 0,
+    month: 0,
+    year: 0,
+    total: 0,
+    userId: undefined
+  });
+
+  // 表单数据
+  const { where } = useSearch<TaskCount>({
+    userId: undefined
+  });
+
+  const queryTaskCount = () => {
+    // 搜索条件
+    where.userId = userStore.info?.userId;
+    // 管理人员
+    if (hasRole('superAdmin') || hasRole('admin')) {
+      where.commander = undefined;
+    }
+    // 技术人员
+    if (hasRole('commander')) {
+      where.commander = userStore.info?.userId;
+    }
+    pageTaskCount(where).then((res) => {
+      res?.list.map((d) => {
+        assignFields(d);
+      });
+    });
+  };
+  queryTaskCount();
+</script>
+
+<style scoped lang="less">
+  .user-info {
+  }
+</style>
diff --git a/src/views/system/myTask/components/count-pending.vue b/src/views/system/myTask/components/count-pending.vue
new file mode 100644
index 0000000..4c9efde
--- /dev/null
+++ b/src/views/system/myTask/components/count-pending.vue
@@ -0,0 +1,176 @@
+<template>
+  <a-card :bordered="false">
+    <ele-pro-table
+      ref="tableRef"
+      row-key="taskId"
+      :columns="columns"
+      :customRow="customRow"
+      :datasource="datasource"
+      tool-class="ele-toolbar-form"
+      class="sys-org-table"
+    >
+      <template #toolbar>
+        <search @search="reload" />
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'content'">
+          <a @click="openUrl('/oa/task/detail/' + record.taskId)">{{
+            record.content
+          }}</a>
+        </template>
+        <template v-else-if="column.key === 'status'">
+          <a-tag v-if="record.progress === TOBEARRANGED" color="red"
+            >待安排</a-tag
+          >
+          <a-tag v-if="record.progress === PENDING" color="orange"
+            >待处理</a-tag
+          >
+          <a-tag v-if="record.progress === PROCESSING" color="purple"
+            >处理中</a-tag
+          >
+          <a-tag v-if="record.progress === TOBECONFIRMED" color="cyan"
+            >待评价</a-tag
+          >
+          <a-tag v-if="record.progress === COMPLETED" color="green"
+            >已完成</a-tag
+          >
+          <a-tag v-if="record.progress === CLOSED">已关闭</a-tag>
+        </template>
+        <template v-else-if="column.key === 'progress'">
+          <a-progress :percent="record.progress * 2" :steps="5" />
+        </template>
+      </template>
+    </ele-pro-table>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { ColumnsType } from 'ant-design-vue/es/table';
+  import { pageTask } from '@/api/oa/task';
+  import { openUrl } from '@/utils/common';
+  import type { Task, TaskParam } from '@/api/oa/task/model';
+  import Search from './search.vue';
+  import {
+    CLOSED,
+    COMPLETED,
+    PENDING,
+    PROCESSING,
+    TOBEARRANGED,
+    TOBECONFIRMED
+  } from '@/api/oa/task/model/progress';
+  // import { ContainerOutlined, UserAddOutlined } from '@ant-design/icons-vue';
+  import { toDateString } from 'ele-admin-pro';
+  import { useUserStore } from '@/store/modules/user';
+  import { DatasourceFunction } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { EleProTable } from 'ele-admin-pro/es';
+  import { hasRole } from '@/utils/permission';
+
+  defineProps<{
+    title?: string;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'remove'): void;
+    (e: 'edit'): void;
+  }>();
+
+  // 数据绑定
+  const user = useUserStore();
+  // 表格选中数据
+  const selection = ref<Task[]>([]);
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+  const columns = ref<ColumnsType>([
+    {
+      title: '工单号',
+      dataIndex: 'taskId',
+      align: 'center',
+      width: 120
+    },
+    {
+      title: '工单类型',
+      dataIndex: 'taskType',
+      width: 120
+    },
+    {
+      title: '问题描述',
+      dataIndex: 'content',
+      key: 'content',
+      ellipsis: true
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+      width: 120
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      width: 120,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    }
+  ]);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    // 搜索条件
+    where = {};
+    where.commander = user.info?.userId;
+    if (where.status != 1) {
+      where.status = 0;
+    }
+    // 工单发起人
+    if (hasRole('promoter') || hasRole('user')) {
+      where.commander = undefined;
+      where.userId = user.info?.userId;
+    }
+    // 管理人员
+    if (hasRole('superAdmin') || hasRole('admin')) {
+      where.commander = undefined;
+    }
+    // 受理人员
+    if (hasRole('commander')) {
+      where.commander = user.info?.userId;
+    }
+    console.log(where);
+    return pageTask({ ...where, ...orders, page, limit });
+  };
+
+  const reload = (where?: TaskParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  const onRemove = () => {
+    emit('remove');
+  };
+
+  const onEdit = () => {
+    emit('edit');
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Task) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        window.open('/oa/task/detail/' + record.taskId);
+        // openInfo(record);
+      }
+    };
+  };
+</script>
+<style>
+  /deep/.ant-table-pagination-right {
+    justify-content: flex-end;
+  }
+</style>
diff --git a/src/views/system/myTask/components/count-rate.vue b/src/views/system/myTask/components/count-rate.vue
new file mode 100644
index 0000000..e88c449
--- /dev/null
+++ b/src/views/system/myTask/components/count-rate.vue
@@ -0,0 +1,86 @@
+<template>
+  <a-card :bordered="false" title="用户评价">
+    <div class="ele-cell ele-cell-align-bottom">
+      <div style="font-size: 51px; line-height: 1">4.5</div>
+      <div class="ele-cell-content">
+        <a-rate :value="userRate" disabled />
+        <span style="color: #fadb14; margin-left: 8px">很棒</span>
+      </div>
+    </div>
+    <div class="ele-cell" style="margin: 18px 0">
+      <div style="font-size: 28px; line-height: 1" class="ele-text-placeholder">
+        -0%
+      </div>
+      <div class="ele-cell-content ele-text-small ele-text-secondary">
+        当前没有评价波动
+      </div>
+    </div>
+    <div class="ele-cell">
+      <div class="ele-cell-content">
+        <a-progress :percent="60" stroke-color="#52c41a" :show-info="false" />
+      </div>
+      <div class="monitor-evaluate-text">
+        <star-filled />
+        <span>5 : 368 人</span>
+      </div>
+    </div>
+    <div class="ele-cell">
+      <div class="ele-cell-content">
+        <a-progress :percent="40" stroke-color="#1890ff" :show-info="false" />
+      </div>
+      <div class="monitor-evaluate-text">
+        <star-filled />
+        <span>4 : 256 人</span>
+      </div>
+    </div>
+    <div class="ele-cell">
+      <div class="ele-cell-content">
+        <a-progress :percent="20" stroke-color="#faad14" :show-info="false" />
+      </div>
+      <div class="monitor-evaluate-text">
+        <star-filled />
+        <span>3 : 49 人</span>
+      </div>
+    </div>
+    <div class="ele-cell">
+      <div class="ele-cell-content">
+        <a-progress :percent="10" stroke-color="#f5222d" :show-info="false" />
+      </div>
+      <div class="monitor-evaluate-text">
+        <star-filled />
+        <span>2 : 14 人</span>
+      </div>
+    </div>
+    <div class="ele-cell">
+      <div class="ele-cell-content">
+        <a-progress :percent="0" :show-info="false" />
+      </div>
+      <div class="monitor-evaluate-text">
+        <star-filled />
+        <span>1 : 0 人</span>
+      </div>
+    </div>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { StarFilled } from '@ant-design/icons-vue';
+
+  // 用户评分
+  const userRate = ref(4.5);
+</script>
+
+<style lang="less" scoped>
+  .monitor-evaluate-text {
+    width: 90px;
+    flex-shrink: 0;
+    white-space: nowrap;
+    opacity: 0.8;
+
+    & > .anticon {
+      font-size: 12px;
+      margin: 0 6px 0 8px;
+    }
+  }
+</style>
diff --git a/src/views/system/myTask/components/count-satisfaction.vue b/src/views/system/myTask/components/count-satisfaction.vue
new file mode 100644
index 0000000..4933d1a
--- /dev/null
+++ b/src/views/system/myTask/components/count-satisfaction.vue
@@ -0,0 +1,79 @@
+<template>
+  <a-card :bordered="false" title="用户满意度">
+    <div class="ele-cell ele-text-center">
+      <div class="ele-cell-content" style="font-size: 24px">856</div>
+      <div class="ele-cell-content">
+        <div class="monitor-face-smile"><i></i></div>
+        <div class="ele-text-secondary ele-elip" style="margin-top: 8px">
+          正面评论
+        </div>
+      </div>
+      <h2 class="ele-cell-content ele-text-success">82%</h2>
+    </div>
+    <a-divider style="margin: 26px 0" />
+    <div class="ele-cell ele-text-center">
+      <div class="ele-cell-content" style="font-size: 24px">60</div>
+      <div class="ele-cell-content">
+        <div class="monitor-face-cry"><i></i></div>
+        <div class="ele-text-secondary ele-elip" style="margin-top: 8px">
+          负面评论
+        </div>
+      </div>
+      <h2 class="ele-cell-content ele-text-danger">9%</h2>
+    </div>
+  </a-card>
+</template>
+
+<style lang="less" scoped>
+  .monitor-face-smile,
+  .monitor-face-cry {
+    width: 50px;
+    height: 50px;
+    display: inline-block;
+    background: #fbd971;
+    border-radius: 50%;
+    position: relative;
+  }
+
+  .monitor-face-smile > i,
+  .monitor-face-smile:before,
+  .monitor-face-smile:after,
+  .monitor-face-cry > i,
+  .monitor-face-cry:before,
+  .monitor-face-cry:after {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    transform: rotate(225deg);
+    border: 3px solid #f0c419;
+    border-right-color: transparent !important;
+    border-bottom-color: transparent !important;
+    position: absolute;
+    bottom: 8px;
+    left: 11px;
+  }
+
+  .monitor-face-smile:before,
+  .monitor-face-smile:after,
+  .monitor-face-cry:before,
+  .monitor-face-cry:after {
+    content: '';
+    width: 12px;
+    height: 12px;
+    left: 8px;
+    top: 14px;
+    border-color: #f29c1f;
+    transform: rotate(45deg);
+  }
+
+  .monitor-face-smile:after,
+  .monitor-face-cry:after {
+    left: auto;
+    right: 8px;
+  }
+
+  .monitor-face-cry > i {
+    transform: rotate(45deg);
+    bottom: -6px;
+  }
+</style>
diff --git a/src/views/system/myTask/components/count-user.vue b/src/views/system/myTask/components/count-user.vue
new file mode 100644
index 0000000..fdaac97
--- /dev/null
+++ b/src/views/system/myTask/components/count-user.vue
@@ -0,0 +1,74 @@
+<template>
+  <a-card :bordered="false" title="常见问题">
+    <a-list
+      class="demo-loadmore-list"
+      item-layout="horizontal"
+      :data-source="list"
+    >
+      <template #renderItem="{ item }">
+        <a-list-item>
+          <template #actions>
+            <a-popover>
+              <template #content> 待处理 </template>
+              <a class="ele-text-danger">{{ item.pending }}</a>
+            </a-popover>
+            <a-popover>
+              <template #content> 本月已处理 </template>
+              <a class="ele-text-secondary">{{ item.month }}</a>
+            </a-popover>
+          </template>
+          <a-skeleton avatar :title="false" :loading="!!item.loading" active>
+            <a-list-item-meta>
+              <template #title>
+                {{ item.nickname }}
+              </template>
+              <template #avatar>
+                <a-avatar :src="item.avatar" />
+              </template>
+            </a-list-item-meta>
+          </a-skeleton>
+        </a-list-item>
+      </template>
+    </a-list>
+    <!-- 工单二维码 -->
+    <Qrcode v-model:visible="showQrcode" />
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { pageTaskCount } from '@/api/oa/task-count';
+  import { TaskCount } from '@/api/oa/task-count/model';
+  import { UserAddOutlined } from '@ant-design/icons-vue';
+  import Qrcode from './qrcode.vue';
+
+  const showQrcode = ref(false);
+  const list = ref<TaskCount[]>([]);
+
+  pageTaskCount({ limit: 10, roleCode: 'commander' }).then((res) => {
+    if (res) {
+      list.value = res?.list;
+    }
+  });
+
+  const onShowQrcode = () => {
+    showQrcode.value = true;
+  };
+</script>
+
+<style lang="less" scoped>
+  .monitor-evaluate-text {
+    width: 90px;
+    flex-shrink: 0;
+    white-space: nowrap;
+    opacity: 0.8;
+
+    & > .anticon {
+      font-size: 12px;
+      margin: 0 6px 0 8px;
+    }
+  }
+  /deep/.ant-list-item {
+    padding: 7px 0;
+  }
+</style>
diff --git a/src/views/system/myTask/components/more-icon.vue b/src/views/system/myTask/components/more-icon.vue
new file mode 100644
index 0000000..43b2c2f
--- /dev/null
+++ b/src/views/system/myTask/components/more-icon.vue
@@ -0,0 +1,36 @@
+<template>
+  <a-dropdown placement="bottomRight">
+    <more-outlined class="ele-text-secondary" style="font-size: 18px" />
+    <template #overlay>
+      <a-menu :selectable="false" @click="onClick">
+        <a-menu-item key="edit">
+          <div class="ele-cell">
+            <div class="ele-cell-content">待处理</div>
+          </div>
+        </a-menu-item>
+        <a-menu-item key="remove">
+          <div class="ele-cell">
+            <div class="ele-cell-content">已完成</div>
+          </div>
+        </a-menu-item>
+      </a-menu>
+    </template>
+  </a-dropdown>
+</template>
+
+<script lang="ts" setup>
+  import {
+    MoreOutlined,
+    EditOutlined,
+    DeleteOutlined
+  } from '@ant-design/icons-vue';
+
+  const emit = defineEmits<{
+    (e: 'edit'): void;
+    (e: 'remove'): void;
+  }>();
+
+  const onClick = ({ key }) => {
+    emit(key);
+  };
+</script>
diff --git a/src/views/system/myTask/components/news.vue b/src/views/system/myTask/components/news.vue
new file mode 100644
index 0000000..8a1ee7a
--- /dev/null
+++ b/src/views/system/myTask/components/news.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+
+import { openUrl } from "@/utils/common";
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="less">
+
+</style>
diff --git a/src/views/system/myTask/components/qrcode.vue b/src/views/system/myTask/components/qrcode.vue
new file mode 100644
index 0000000..213a8fe
--- /dev/null
+++ b/src/views/system/myTask/components/qrcode.vue
@@ -0,0 +1,66 @@
+<template>
+  <ele-modal
+    :width="400"
+    :visible="visible"
+    :title="`邀请新成员`"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    :footer="null"
+    @ok="save"
+  >
+    <div
+      class="qrcode-list"
+      style="display: flex; justify-content: space-around"
+    >
+      <div>
+        <img :src="qrcode" width="240" height="240" />
+        <div
+          style="
+            display: flex;
+            justify-content: center;
+            font-size: 26px;
+            padding-top: 20px;
+          "
+          >使用微信扫一扫</div
+        >
+      </div>
+    </div>
+  </ele-modal>
+</template>
+<script lang="ts" setup>
+  import { User } from '@/api/system/user/model';
+  import { reactive, ref } from 'vue';
+  import { taskJoinQRCode } from '@/api/oa/task';
+
+  defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done', user: User): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  const qrcode = ref('');
+
+  // 用户信息
+  const form = reactive<User>({
+    userId: undefined,
+    nickname: undefined
+  });
+
+  const save = () => {
+    emit('done', form);
+  };
+
+  taskJoinQRCode({}).then((text) => {
+    qrcode.value = String(text);
+  });
+</script>
+<style scoped lang="less"></style>
diff --git a/src/views/system/myTask/components/search.vue b/src/views/system/myTask/components/search.vue
new file mode 100644
index 0000000..f9ca52b
--- /dev/null
+++ b/src/views/system/myTask/components/search.vue
@@ -0,0 +1,51 @@
+<template>
+  <div style="display: flex; justify-content: space-between">
+    <a-space :size="20" style="flex-wrap: wrap">
+      <a-tabs
+        type="card"
+        tabPosition="top"
+        v-model:activeKey="where.status"
+        @change="search"
+      >
+        <a-tab-pane key="0" tab="待处理" />
+        <a-tab-pane key="1" tab="已完成" />
+      </a-tabs>
+    </a-space>
+    <a-space :size="10" style="flex-wrap: wrap; margin-right: 20px">
+      <a-input-search
+        allow-clear
+        placeholder="请输入关键词"
+        v-model:value="where.keywords"
+        @pressEnter="search"
+        @search="search"
+      />
+      <a-button @click="reset">重置</a-button>
+    </a-space>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { TaskParam } from '@/api/oa/task/model';
+  import useSearch from '@/utils/use-search';
+
+  const emit = defineEmits<{
+    (e: 'search', where: TaskParam): void;
+  }>();
+
+  // 表单数据
+  const { where, resetFields } = useSearch<TaskParam>({
+    keywords: '',
+    commander: undefined
+  });
+
+  /*  重置 */
+  const reset = () => {
+    resetFields();
+    search();
+  };
+
+  /* 搜索 */
+  const search = () => {
+    emit('search', where);
+  };
+</script>
diff --git a/src/views/system/myTask/components/task-list.vue b/src/views/system/myTask/components/task-list.vue
new file mode 100644
index 0000000..581ccd9
--- /dev/null
+++ b/src/views/system/myTask/components/task-list.vue
@@ -0,0 +1,215 @@
+<template>
+  <div class="search">
+    <search @search="reload" :selection="selection" @remove="removeBatch" />
+  </div>
+  <template v-for="(record, index) in list" :key="index">
+    <a-card :bordered="false" hoverable>
+      <div class="task-list">
+        <div class="item">
+          <div class="user-box">
+            <div class="user-info">
+              <a-badge
+                :dot="!record.isRead && record.userId != userStore.info?.userId"
+              >
+                <a-avatar :src="record.lastAvatar" size="large" />
+              </a-badge>
+            </div>
+            <div class="content" style="display: flex; flex-direction: column">
+              <div class="nickname">
+                <a
+                  :href="'/oa/task/detail/' + record.taskId"
+                  class="ele-text-heading"
+                  >{{ record.lastNickname ? record.lastNickname : '未知' }}</a
+                >
+              </div>
+              <span class="ele-text-heading">{{
+                record.appName ? `工单编号：${record.taskId}` : ''
+              }}</span>
+              <span class="ele-text-heading">{{
+                record.appName ? `项目名称：${record.appName}` : ''
+              }}</span>
+              <span class="ele-text-heading">{{
+                record.content ? `最后回复：${record.content}` : ''
+              }}</span>
+              <span class="ele-text-heading">{{
+                record.content ? `更新时间：${timeAgo(record.updateTime)}` : ''
+              }}</span>
+            </div>
+            <div class="last-time ele-text-info"> </div>
+          </div>
+        </div>
+      </div>
+    </a-card>
+  </template>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, reactive, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import type { DatasourceFunction } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { timeAgo, toDateString } from 'ele-admin-pro';
+  import Search from '../search/components/search.vue';
+  import { pageTask, removeTask, removeBatchTask } from '@/api/oa/task';
+  import type { Task, TaskParam } from '@/api/oa/task/model';
+  import { useUserStore } from '@/store/modules/user';
+  import {
+    CLOSED,
+    COMPLETED,
+    PENDING,
+    PROCESSING,
+    TOBEARRANGED,
+    TOBECONFIRMED
+  } from '@/api/oa/task/model/progress';
+  import { hasRole } from '@/utils/permission';
+  import { WhereType } from '@/components/UserChoose/types';
+
+  const userStore = useUserStore();
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+  const selection = ref<any[]>();
+  const status = ref<number>();
+  const list = ref<Task[]>([]);
+
+  // 搜索表单
+  const where = reactive<TaskParam>({
+    keywords: '',
+    nickname: '',
+    commander: undefined,
+    userId: undefined
+  });
+
+  // 表格数据源
+  const reload = () => {
+    // 搜索条件
+    where.userId = undefined;
+    where.commander = userStore.info?.userId;
+    if (where.status != 1) {
+      where.status = 0;
+    }
+    // 工单发起人
+    if (hasRole('promoter') || hasRole('user')) {
+      where.commander = undefined;
+      where.userId = userStore.info?.userId;
+    }
+    // 管理人员
+    if (hasRole('superAdmin') || hasRole('admin')) {
+      where.commander = undefined;
+    }
+    // 工单受理人员
+    if (hasRole('commander')) {
+      where.commander = userStore.info?.userId;
+    }
+    pageTask(where).then((res) => {
+      list.value = res?.list;
+    });
+  };
+
+  reload();
+
+  /* 搜索 */
+  // const reload = (where?: TaskParam) => {
+  //   status.value = where?.status;
+  //   selection.value = [];
+  //   tableRef?.value?.reload({ where: where });
+  // };
+
+  const onDetail = (record?: Task) => {
+    window.location.href = 'detail?id=' + record?.taskId;
+  };
+
+  /* 删除单个 */
+  const remove = (row: Task) => {
+    const hide = message.loading('请求中..', 0);
+    removeTask(row.taskId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value?.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    if (selection.value?.length) {
+      Modal.confirm({
+        title: '提示',
+        content: '确定要删除选中的记录吗?',
+        icon: createVNode(ExclamationCircleOutlined),
+        maskClosable: true,
+        onOk: () => {
+          const hide = message.loading('请求中..', 0);
+          removeBatchTask(selection.value.map((d) => d.taskId))
+            .then((msg) => {
+              hide();
+              message.success(msg);
+              reload();
+            })
+            .catch((e) => {
+              hide();
+              message.error(e.message);
+            });
+        }
+      });
+    }
+  };
+
+  // 是否展现多选按钮及批量删除按钮
+  if (hasRole('superAdmin') || hasRole('admin')) {
+    selection.value = [];
+  }
+
+  /* 自定义行属性 */
+  const customRow = (record: Task) => {
+    return {
+      // 行双击事件
+      onDblclick: () => {
+        window.open('/oa/task/detail/' + record.taskId);
+      }
+    };
+  };
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'TaskList'
+  };
+</script>
+
+<style lang="less" scoped>
+  .search {
+    margin-bottom: 12px;
+  }
+  .user-box {
+    display: flex;
+    align-items: center;
+    .user-info {
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      margin-right: 7px;
+    }
+    .last-time {
+      margin-left: 12px;
+    }
+    .content {
+      .text {
+        max-width: 90%;
+      }
+    }
+  }
+  .nickname {
+    .ele-text-heading {
+      font-weight: bold;
+    }
+  }
+</style>
diff --git a/src/views/system/myTask/components/tools.vue b/src/views/system/myTask/components/tools.vue
new file mode 100644
index 0000000..66a3ffa
--- /dev/null
+++ b/src/views/system/myTask/components/tools.vue
@@ -0,0 +1,84 @@
+<template>
+  <a-card :bordered="false" class="task-card" title="快捷入口">
+    <a-row type="flex" justify="start" align="top">
+      <a-col
+        v-bind="
+          styleResponsive ? { xl: 8, xs: 10, md: 12, sm: 4 } : { span: 4 }
+        "
+      >
+        <a-button class="tools-btn" @click="openUrl('/oa/task')"
+          >管理首页</a-button
+        >
+      </a-col>
+      <a-col
+        v-bind="
+          styleResponsive ? { xl: 8, xs: 10, md: 12, sm: 4 } : { span: 4 }
+        "
+      >
+        <a-button class="tools-btn" @click="openUrl('/oa/task/hall')"
+          >任务大厅</a-button
+        >
+      </a-col>
+      <a-col
+        v-bind="
+          styleResponsive ? { xl: 8, xs: 10, md: 12, sm: 4 } : { span: 6 }
+        "
+      >
+        <a-button class="tools-btn" @click="openUrl('/oa/task/dict')"
+          >分类设置</a-button
+        >
+      </a-col>
+      <a-col
+        v-bind="
+          styleResponsive ? { xl: 8, xs: 10, md: 12, sm: 4 } : { span: 4 }
+        "
+      >
+        <a-button class="tools-btn" @click="openUrl('/oa/task/add')"
+          >提交工单</a-button
+        >
+      </a-col>
+      <a-col
+        v-bind="
+          styleResponsive ? { xl: 8, xs: 10, md: 12, sm: 4 } : { span: 6 }
+        "
+        v-if="appId > 0"
+      >
+        <a-button class="tools-btn" @click="openUrl('/oa/app/detail/' + appId)"
+          >项目信息</a-button
+        >
+      </a-col>
+      <a-col
+        v-bind="
+          styleResponsive ? { xl: 8, xs: 10, md: 12, sm: 4 } : { span: 6 }
+        "
+      >
+        <a-button
+          class="tools-btn"
+          @click="openUrl('https://modules.gxwebsoft.com/oa/task')"
+          >小程序版</a-button
+        >
+      </a-col>
+    </a-row>
+  </a-card>
+</template>
+
+<script setup lang="ts">
+  import { openUrl } from '@/utils/common';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { useRouter } from 'vue-router';
+  const { currentRoute } = useRouter();
+
+  defineProps<{
+    appId: number | 0;
+  }>();
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+</script>
+<style lang="less" scoped>
+  .tools-btn {
+    margin-bottom: 10px;
+  }
+</style>
diff --git a/src/views/system/myTask/detail/components/app-info.vue b/src/views/system/myTask/detail/components/app-info.vue
new file mode 100644
index 0000000..b7af6eb
--- /dev/null
+++ b/src/views/system/myTask/detail/components/app-info.vue
@@ -0,0 +1,346 @@
+<template>
+  <ele-modal
+    width="90%"
+    :visible="visible"
+    :title="`项目信息（${appId}）`"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    :footer="null"
+    @ok="save"
+  >
+    <div style="background-color: #f3f3f3; padding: 8px">
+      <a-form
+        ref="formRef"
+        :model="form"
+        :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
+        :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
+      >
+        <a-card title="基本信息" :bordered="false">
+          <a-row :gutter="16">
+            <a-col
+              v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
+            >
+              <a-form-item label="租户ID" name="tenantId">
+                <span>{{ form.tenantId }}</span>
+              </a-form-item>
+              <a-form-item label="项目名称" name="appName">
+                <span>{{ form.appName }}</span>
+              </a-form-item>
+              <a-form-item label="项目描述" name="comments">
+                <div v-html="form.comments"></div>
+              </a-form-item>
+            </a-col>
+            <a-col
+              v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
+            >
+              <a-form-item label="项目状态" name="appStatus">
+                <a-tag v-if="form.appStatus == '开发中'" color="red">{{
+                  form.appStatus
+                }}</a-tag>
+                <a-tag v-if="form.appStatus == '已上架'" color="green">{{
+                  form.appStatus
+                }}</a-tag>
+              </a-form-item>
+              <a-form-item label="项目类型" name="appTypeMultiple">
+                <a-tag
+                  v-for="(item, index) in form.appTypeMultiple"
+                  :key="index"
+                  >{{ item }}</a-tag
+                >
+              </a-form-item>
+              <a-form-item label="项目域名" name="appUrl">
+                <span>{{ form.appUrl }}</span>
+              </a-form-item>
+            </a-col>
+            <a-col
+              v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
+            >
+              <div class="upload-image">
+                <ele-image-upload
+                  v-model:value="logo"
+                  :item-style="{ width: '120px', height: '120px' }"
+                  :limit="3"
+                  disabled
+                />
+              </div>
+            </a-col>
+          </a-row>
+        </a-card>
+        <a-divider style="height: 8px" />
+        <a-card title="开发信息" :bordered="false">
+          <a-row :gutter="16">
+            <a-col
+              v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
+            >
+              <a-form-item label="应用标识" name="appCode">
+                {{ form.appCode }}
+              </a-form-item>
+              <a-form-item label="应用包名" name="packageName">
+                <span>{{ form.packageName }}</span>
+              </a-form-item>
+            </a-col>
+            <a-col
+              v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
+            >
+              <a-form-item label="主节点" name="serverUrl">
+                {{ form.serverUrl }}
+              </a-form-item>
+              <a-form-item label="模块节点" name="modulesUrl">
+                {{ form.modulesUrl }}
+              </a-form-item>
+            </a-col>
+            <a-col
+              v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
+            >
+              <a-form-item label="服务端仓库" name="gitUrl">
+                {{ form.gitUrl }}
+              </a-form-item>
+              <a-form-item label="vue端仓库" name="gitUrl">
+                {{ form.gitUrl }}
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-card>
+        <a-divider style="height: 8px" />
+        <a-card title="项目需求" :bordered="false">
+          <a-row :gutter="16">
+            <a-col
+              v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
+            >
+              <a-form-item label="原型图" name="prototypeUrl">
+                {{ form.prototypeUrl }}
+              </a-form-item>
+            </a-col>
+            <a-col
+              v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
+            >
+              <a-form-item label="项目需求" name="docsUrl">
+                {{ form.docsUrl }}
+              </a-form-item>
+            </a-col>
+            <a-col
+              v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
+            >
+              <a-form-item label="腾讯文档" name="docsUrl">
+                {{ form.docsUrl }}
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-card>
+        <a-divider style="height: 8px" />
+        <a-card title="其他资料" :bordered="false">
+          <!-- 编辑器 -->
+          <byte-md-viewer :value="requirement" :plugins="plugins" />
+        </a-card>
+      </a-form>
+    </div>
+  </ele-modal>
+</template>
+<script lang="ts" setup>
+  import { User } from '@/api/system/user/model';
+  import { ref, watch } from 'vue';
+  import { App } from '@/api/oa/app/model';
+  import { getApp } from '@/api/oa/app';
+  import useFormData from '@/utils/use-form-data';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import gfm from '@bytemd/plugin-gfm';
+  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
+  import highlight from '@bytemd/plugin-highlight';
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    appId: number;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done', user: User): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+  const logo = ref<any[]>([]);
+  const requirement = ref('');
+  const qrcode = ref('https://file.jimeigroup.cn/reg-code3/hgkghiji.png');
+
+  // 应用信息
+  const { form, resetFields, assignFields } = useFormData<App>({
+    // 应用id
+    appId: undefined,
+    // 应用秘钥
+    appSecret: '',
+    enName: '',
+    // 应用名称
+    appName: '',
+    // 上级id, 0是顶级
+    parentId: undefined,
+    // 应用编号
+    appCode: '',
+    // 应用图标
+    appIcon: '',
+    appQrcode: '',
+    // 应用截图
+    images: '',
+    // 应用类型
+    appType: '',
+    appTypeMultiple: undefined,
+    // 菜单类型
+    menuType: undefined,
+    // 应用地址
+    appUrl: '',
+    // 后台管理地址
+    adminUrl: undefined,
+    // 下载地址
+    downUrl: undefined,
+    serverUrl: undefined,
+    callbackUrl: undefined,
+    gitUrl: undefined,
+    docsUrl: undefined,
+    prototypeUrl: undefined,
+    ipAddress: undefined,
+    fileUrl: undefined,
+    // 应用包名
+    packageName: '',
+    // 点击次数
+    clicks: '',
+    // 安装次数
+    installs: '',
+    // 项目介绍
+    content: '',
+    // 开发者(个人)
+    developer: '',
+    director: '',
+    projectDirector: '',
+    salesman: '',
+    // 软件定价
+    price: '',
+    // 评分
+    score: '',
+    // 星级
+    star: '',
+    // 菜单组件地址
+    component: '',
+    // 菜单路由地址
+    path: '',
+    // 权限标识
+    authority: '',
+    // 打开位置
+    target: '',
+    // 是否隐藏, 0否, 1是(仅注册路由不显示在左侧菜单)
+    hide: undefined,
+    // 菜单侧栏选中的path
+    active: '',
+    // 其它路由元信息
+    meta: '',
+    // 版本
+    edition: '',
+    // 版本号
+    version: '',
+    // 是否已安装
+    isUse: undefined,
+    // 排序
+    sortNumber: undefined,
+    // 备注
+    comments: '',
+    tenantName: '',
+    companyName: '',
+    // 租户编号
+    tenantCode: '',
+    // 租户id
+    tenantId: undefined,
+    // 创建时间
+    createTime: '',
+    appStatus: '开发中',
+    // 状态
+    status: undefined,
+    // 发布者
+    userId: '',
+    // 发布者昵称
+    nickname: '',
+    // 子菜单
+    children: [],
+    // 权限树回显选中状态, 0未选中, 1选中
+    checked: false,
+    //
+    key: undefined,
+    //
+    value: undefined,
+    //
+    parentIds: [],
+    //
+    openType: undefined,
+    //
+    search: undefined,
+    // 成员管理
+    users: [],
+    // 项目需求
+    requirement: '',
+    file1: '[]',
+    file2: '[]',
+    file3: '[]'
+  });
+
+  const chooseUser = (item: User) => {
+    form.userId = item.userId;
+    form.nickname = item.nickname;
+  };
+
+  // 插件
+  const plugins = ref([
+    gfm({
+      locale: zh_HansGfm
+    }),
+    highlight()
+  ]);
+
+  const save = () => {
+    emit('done', form);
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        // content.value = '';
+        requirement.value = '';
+        if (props.appId) {
+          getApp(props.appId).then((appInfo) => {
+            assignFields(appInfo);
+            logo.value = [];
+            // images.value = [];
+            if (appInfo.appIcon) {
+              logo.value.push({
+                uid: 0,
+                url: appInfo.appIcon,
+                status: 'done'
+              });
+            }
+            if (appInfo.appTypeMultiple) {
+              form.appTypeMultiple = JSON.parse(appInfo.appTypeMultiple);
+            }
+            if (appInfo.requirement) {
+              requirement.value = appInfo.requirement;
+            }
+          });
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>
+<style scoped lang="less">
+  .upload-image {
+    margin-bottom: 30px;
+    display: flex;
+    justify-content: center;
+  }
+</style>
diff --git a/src/views/system/myTask/detail/components/assign.vue b/src/views/system/myTask/detail/components/assign.vue
new file mode 100644
index 0000000..23473e8
--- /dev/null
+++ b/src/views/system/myTask/detail/components/assign.vue
@@ -0,0 +1,54 @@
+<template>
+  <ele-modal
+    :width="400"
+    :visible="visible"
+    :maskClosable="false"
+    :title="`指派人员`"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <SelectStaff
+      :placeholder="`选择指派人员`"
+      v-model:value="form.nickname"
+      :type="`task`"
+      @done="chooseUser"
+    />
+  </ele-modal>
+</template>
+<script lang="ts" setup>
+  import { User } from '@/api/system/user/model';
+  import { reactive } from 'vue';
+
+  defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done', user: User): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 用户信息
+  const form = reactive<User>({
+    userId: undefined,
+    nickname: undefined,
+    roles: undefined
+  });
+
+  const chooseUser = (item: User) => {
+    form.userId = item.userId;
+    form.nickname = item.nickname;
+  };
+
+  const save = () => {
+    emit('done', form);
+  };
+</script>
+<style scoped lang="less"></style>
diff --git a/src/views/system/myTask/detail/components/help.vue b/src/views/system/myTask/detail/components/help.vue
new file mode 100644
index 0000000..5dcb345
--- /dev/null
+++ b/src/views/system/myTask/detail/components/help.vue
@@ -0,0 +1,37 @@
+<template>
+  <a-card
+    title="通知公告"
+    :bordered="false"
+    class="task-card"
+    :split="false"
+    :body-style="{ padding: '5px' }"
+  >
+    <a-list
+      :size="`small`"
+      :bordered="false"
+      :split="false"
+      :data-source="articleList"
+    >
+      <template #renderItem="{ item }">
+        <a-list-item @click="openNew('/cms/article/' + item.articleId)">
+          <a class="ele-text-secondary">{{ item.title }}</a></a-list-item
+        >
+      </template>
+    </a-list>
+  </a-card>
+</template>
+
+<script setup lang="ts">
+  import { openNew } from '@/utils/common';
+  import { ref } from 'vue';
+  import { Article } from '@/api/cms/article/model';
+  import { pageArticle } from '@/api/cms/article';
+
+  const articleList = ref<Article[]>([]);
+
+  pageArticle({ categoryId: 92, limit: 4 }).then((res) => {
+    articleList.value = res?.list || [];
+  });
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/views/system/myTask/detail/components/links.vue b/src/views/system/myTask/detail/components/links.vue
new file mode 100644
index 0000000..ac81ce0
--- /dev/null
+++ b/src/views/system/myTask/detail/components/links.vue
@@ -0,0 +1,40 @@
+<template>
+  <a-card
+    title="实用工具"
+    :bordered="false"
+    class="task-card"
+    :split="false"
+    :body-style="{ padding: '5px' }"
+  >
+    <a-row :gutter="16">
+      <a-col
+        class="gutter-row"
+        :span="12"
+        v-for="(item, index) in list"
+        :key="index"
+      >
+        <a-button
+          :type="`link`"
+          class="ele-text-secondary"
+          @click="openNew(`${item.url}`)"
+          >{{ item.name }}</a-button
+        >
+      </a-col>
+    </a-row>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { openNew } from '@/utils/common';
+  import { ref } from 'vue';
+  import type { Link } from '@/api/oa/link/model';
+  import { pageLink } from '@/api/oa/link';
+
+  const list = ref<Link[]>([]);
+
+  pageLink({ linkType: '实用工具' }).then((res) => {
+    list.value = res?.list || [];
+  });
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/views/system/myTask/detail/components/task-edit.vue b/src/views/system/myTask/detail/components/task-edit.vue
new file mode 100644
index 0000000..da8258a
--- /dev/null
+++ b/src/views/system/myTask/detail/components/task-edit.vue
@@ -0,0 +1,126 @@
+<template>
+  <ele-modal
+    :width="500"
+    :visible="visible"
+    :title="`编辑工单`"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :label-col="{ md: { span: 4 }, sm: { span: 4 }, xs: { span: 24 } }"
+      :wrapper-col="{ md: { span: 18 }, sm: { span: 18 }, xs: { span: 24 } }"
+    >
+      <a-form-item label="工单类型" name="taskType">
+        <a-select
+          optionFilterProp="label"
+          placeholder="请选择工单类型"
+          :options="taskType"
+          allow-clear
+          v-model:value="form.taskType"
+        />
+      </a-form-item>
+      <a-form-item label="工单标题" name="name">
+        <a-input
+          allow-clear
+          placeholder="请输入工单标题"
+          v-model:value="form.name"
+        />
+      </a-form-item>
+      <a-form-item label="关联项目">
+        <SelectApp v-model:value="form.appName" @done="chooseApp" />
+      </a-form-item>
+      <a-form-item label="联系方式" name="phone">
+        <a-input
+          allow-clear
+          :maxlength="11"
+          placeholder="请输入手机号码"
+          v-model:value="form.phone"
+        />
+      </a-form-item>
+      <a-form-item label="逾期天数" name="overdueDays">
+        <a-input
+          allow-clear
+          placeholder="请输入逾期天数"
+          v-model:value="form.overdueDays"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+<script lang="ts" setup>
+  import { watch } from 'vue';
+  import useFormData from '@/utils/use-form-data';
+  import { Task } from '@/api/oa/task/model';
+  import { getDictionaryOptions } from '@/utils/common';
+  import { App } from '@/api/oa/app/model';
+  import { updateTask } from '@/api/oa/task';
+  import { message } from 'ant-design-vue';
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    data: Task;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+  const taskType = getDictionaryOptions('taskType');
+
+  // 应用信息
+  const { form, resetFields, assignFields } = useFormData<Task>({
+    taskId: undefined,
+    taskType: '',
+    phone: '',
+    overdueDays: undefined,
+    appId: undefined,
+    appName: '',
+    name: ''
+  });
+
+  const chooseApp = (item: App) => {
+    console.log(item);
+    form.appId = item.appId;
+    form.appName = item.appName;
+  };
+
+  const save = () => {
+    const { taskId, taskType, phone, appId, name, overdueDays } = form;
+    updateTask({ taskId, taskType, phone, appId, name, overdueDays }).then(
+      (msg) => {
+        message.success(msg);
+        updateVisible(false);
+        emit('done');
+      }
+    );
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          assignFields(props.data);
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>
+<style scoped lang="less">
+  .upload-image {
+    margin-bottom: 30px;
+    display: flex;
+    justify-content: center;
+  }
+</style>
diff --git a/src/views/system/myTask/detail/components/task-qrcode.vue b/src/views/system/myTask/detail/components/task-qrcode.vue
new file mode 100644
index 0000000..74e4707
--- /dev/null
+++ b/src/views/system/myTask/detail/components/task-qrcode.vue
@@ -0,0 +1,83 @@
+<template>
+  <ele-modal
+    :width="400"
+    :visible="visible"
+    :title="`分享工单`"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    ok-text="复制链接"
+    @ok="save"
+  >
+    <div
+      class="qrcode-list"
+      style="display: flex; justify-content: space-around"
+    >
+      <div>
+        <ele-qr-code
+          :value="
+            domain + '/oa/task/detail/' + data.taskId + '&tid=' + data.tenantId
+          "
+          :size="300"
+          level="M"
+          :margin="1"
+          :image-settings="logo"
+        />
+        <div
+          style="
+            display: flex;
+            justify-content: center;
+            font-size: 26px;
+            padding-top: 20px;
+          "
+          >使用微信扫一扫</div
+        >
+      </div>
+    </div>
+  </ele-modal>
+</template>
+<script lang="ts" setup>
+  import { User } from '@/api/system/user/model';
+  import { reactive } from 'vue';
+  import { copyText } from '@/utils/common';
+  import { domain } from '@/config/setting';
+  import { ImageSettings } from 'ele-admin-pro/es/ele-qr-code/types';
+  import { Task } from '@/api/oa/task/model';
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    data: Task;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done', user: User): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  const logo = reactive<ImageSettings>({
+    src: 'https://oss.wsdns.cn/20230722/5e7d3ea18c7f43acae8b7ea82bab7cbc.png',
+    width: 36,
+    height: 36,
+    excavate: true
+  });
+
+  const save = () => {
+    copyText(
+      domain +
+        '/oa/task/detail?id=' +
+        props.data.taskId +
+        '&tid=' +
+        props.data.tenantId
+    );
+  };
+
+  // taskQRCode({ taskId: props.data?.taskId }).then((text) => {
+  //   qrcode.value = String(text);
+  // });
+</script>
+<style scoped lang="less"></style>
diff --git a/src/views/system/myTask/detail/components/task-record-edit.vue b/src/views/system/myTask/detail/components/task-record-edit.vue
new file mode 100644
index 0000000..49fb160
--- /dev/null
+++ b/src/views/system/myTask/detail/components/task-record-edit.vue
@@ -0,0 +1,202 @@
+<template>
+  <ele-modal
+    width="70%"
+    :visible="visible"
+    :title="`编辑记录`"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <!-- 编辑器 -->
+    <byte-md-editor
+      v-model:value="form.content"
+      placeholder="请输入您的回复内容，图片请直接粘贴"
+      :locale="zh_Hans"
+      :plugins="plugins"
+      mode="tab"
+      height="300px"
+      maxLength="500"
+      :editorConfig="{ lineNumbers: true }"
+      contenteditable="true"
+      @paste="onPaste"
+    />
+    <a-space class="files">
+      <a-upload
+        v-model:file-list="fileList"
+        class="upload-list-inline"
+        list-type="picture"
+        :before-upload="onBeforeUpload"
+      >
+        <a-button>
+          <UploadOutlined />
+          上传附件
+        </a-button>
+      </a-upload>
+    </a-space>
+  </ele-modal>
+</template>
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import useFormData from '@/utils/use-form-data';
+  import { message } from 'ant-design-vue';
+  import { TaskRecord } from '@/api/oa/task-record/model';
+  import zh_Hans from 'bytemd/locales/zh_Hans.json';
+  import gfm from '@bytemd/plugin-gfm';
+  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
+  import highlight from '@bytemd/plugin-highlight-ssr';
+  import { updateTaskRecord } from '@/api/oa/task-record';
+  import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
+  import { uploadOss } from "@/api/system/file";
+  import { getVersion, isImage } from "@/utils/common";
+  import { useUserStore } from "@/store/modules/user";
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    data: TaskRecord;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  const user = useUserStore();
+  const content = ref('');
+  const files = ref<any[]>([]);
+  const fileList = ref<any[]>([]);
+  const version = ref<number>(0);
+
+  // 应用信息
+  const { form, resetFields, assignFields } = useFormData<TaskRecord>({
+    appId: 0,
+    avatar: '',
+    children: [],
+    comments: '',
+    createTime: '',
+    developerId: 0,
+    nickname: '',
+    parentId: 0,
+    sortNumber: 0,
+    status: '',
+    taskRecordId: 0,
+    toUser: null,
+    userId: 0,
+    taskId: undefined,
+    content: '',
+    files: ''
+  });
+
+  // 插件
+  const plugins = ref([
+    gfm({
+      locale: zh_HansGfm
+    }),
+    highlight()
+  ]);
+
+  /* 粘贴图片上传服务器并插入编辑器 */
+  const onPaste = (e) => {
+    const items = (e.clipboardData || e.originalEvent.clipboardData).items;
+    let hasFile = false;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.indexOf('image') !== -1) {
+        let file = items[i].getAsFile();
+        const item: ItemType = {
+          file,
+          uid: (file as any).lastModified,
+          name: file.name
+        };
+        uploadOss(<File>item.file)
+          .then((result) => {
+            const addPath = '!['+result.name+']('+ result.url+')\n\r';
+            content.value = content.value + addPath
+          })
+          .catch((e) => {
+            message.error(e.message);
+          });
+        hasFile = true;
+      }
+    }
+    if (hasFile) {
+      e.preventDefault();
+    }
+  }
+
+  // 文件上传事件
+  const onBeforeUpload = (file: File) => {
+    const item: ItemType = {
+      file,
+      uid: (file as any).uid,
+      name: file.name
+    }
+    if (!file.type.startsWith("image")) {
+      if (file.size / 1024 / 1024 > 100) {
+        message.error("大小不能超过 100MB");
+        return;
+      }
+    }
+    onUpload(item);
+    return false;
+  };
+
+  const onUpload = (d: ItemType) => {
+    uploadOss(<File>d.file)
+      .then((result) => {
+        files.value.push({
+          uid: result.id,
+          url: result.path,
+          name: isImage(result.path) ? 'image' : result.name,
+          status: "done"
+        });
+        fileList.value = files.value;
+        message.success("上传成功");
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  const save = () => {
+    const { taskRecordId, content, files } = form;
+    updateTaskRecord({ toUser: null, taskRecordId, content, files: JSON.stringify(fileList.value) }).then((msg) => {
+      fileList.value = [];
+      message.success(msg);
+      updateVisible(false);
+      emit('done');
+    });
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          assignFields(props.data);
+          if (props.data?.files) {
+            fileList.value = JSON.parse(props.data?.files);
+            files.value = JSON.parse(props.data?.files);
+          }
+          version.value = <number>getVersion();
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>
+<style scoped lang="less">
+  .upload-image {
+    margin-bottom: 30px;
+    display: flex;
+    justify-content: center;
+  }
+  .files{
+    margin-top: 10px;
+  }
+</style>
diff --git a/src/views/system/myTask/detail/index.vue b/src/views/system/myTask/detail/index.vue
new file mode 100644
index 0000000..43b3da0
--- /dev/null
+++ b/src/views/system/myTask/detail/index.vue
@@ -0,0 +1,706 @@
+<template>
+  <a-page-header
+    :title="title"
+    :style="{ padding: screenWidth > 480 ? '16px 24px' : '0' }"
+    @back="push('/system/my-task')"
+  >
+    <a-row :gutter="16">
+      <!--      左侧区域-->
+      <a-col
+        v-bind="
+          styleResponsive
+            ? { xl: 18, lg: 12, md: 12, sm: 24, xs: 24 }
+            : { span: 12 }
+        "
+        class="gutter-row"
+        :span="6"
+      >
+        <a-card :bordered="false" style="width: 100%; margin-bottom: 16px;" v-if="screenWidth > 480">
+          <a-steps
+            :current="active"
+            direction="horizontal"
+            :responsive="styleResponsive"
+          >
+            <template v-for="item in taskProgressDict">
+              <a-step :title="item.label" />
+            </template>
+          </a-steps>
+        </a-card>
+        <a-card :bordered="false" :class="screenWidth > 480 ? '' : 'transparent-bg'" style="width: 100%; margin-bottom: 16px" :body-style="{ padding: screenWidth > 480 ? '16px' : '0' }">
+          <a-list item-layout="vertical" size="large" :data-source="taskRecord">
+            <template #renderItem="{ item,index }">
+              <a-list-item key="item.taskRecordId">
+                <a-list-item-meta>
+                  <template #title>
+                    <a-space>
+                      <span class="ele-text-heading" style="font-weight: 500;" v-if="item.userId == loginUserId">{{ item.nickname }}</span>
+                      <span class="ele-text-heading" style="font-weight: 500;" v-else>{{ item.nickname }}</span>
+                      <div class="ele-text-placeholder" style="font-size: 14px" >{{ timeAgo(item.createTime) }}</div>
+                    </a-space>
+                  </template>
+                  <template #avatar><a-avatar :src="item.avatar ? item.avatar : 'https://file.gxwebsoft.com/20230217/c8a5c699b3174866a36dd6d378a09bb9.jpg'" /></template>
+                  <template #description>
+                    <a-card class="user-content" v-if="loginUserId === item.userId" :style="{maxWidth: screenWidth > 480 ? '80%' : '100%'}" :body-style="{ padding: '12px' }">
+                      <byte-md-viewer :value="item.content" :plugins="plugins" />
+                    </a-card>
+                    <a-card class="admin-content" :style="{maxWidth: screenWidth > 480 ? '80%' : '100%'}" v-else :body-style="{ padding: '12px' }">
+                      <byte-md-viewer :value="item.content" :plugins="plugins" />
+                    </a-card>
+                    <a-space class="files" v-if="item.confidential">
+                      <a-alert
+                        :message="`${hasRole('commander') ? decrypt(item.confidential) : '机密信息：****'}`"
+                        type="warning"
+                        :showIcon = false
+                        banner
+                      >
+                      </a-alert>
+                    </a-space>
+                    <a-space class="files" v-if="item.files && item.files != '[]'">
+                      <template v-for="file in JSON.parse(item.files)">
+                        <a-button v-if="file.name && file.name != 'image'" :href="file.url">{{ file.name }}</a-button>
+                        <a-image v-else :width="80" :src="file.url" />
+                      </template>
+                    </a-space>
+                    <template v-if="hasRole('admin') || hasRole('superAdmin') || (hasRole('commander'))">
+                      <template v-if="active != COMPLETED && active != CLOSED">
+<!--                        <div style="margin: 10px 0;">-->
+<!--                          <a class="ele-text-placeholder" @click="openEditRecord(item)">编辑</a>-->
+<!--                          <a-divider type="vertical" />-->
+<!--                          <a-popconfirm-->
+<!--                            title="确定要删除此记录吗？"-->
+<!--                            @confirm="removeRecord(item)"-->
+<!--                          >-->
+<!--                            <a class="ele-text-placeholder">删除</a>-->
+<!--                          </a-popconfirm>-->
+<!--                        </div>-->
+                      </template>
+                    </template>
+                  </template>
+                </a-list-item-meta>
+              </a-list-item>
+            </template>
+            <template #loadMore>
+              <div
+                v-if="total > 100"
+                :style="{
+                  textAlign: 'center',
+                  marginTop: '12px',
+                  height: '32px',
+                  lineHeight: '32px'
+                }"
+              >
+                <a-pagination v-model:current="current" :total="total" @change="reload" />
+              </div>
+            </template>
+          </a-list>
+        </a-card>
+        <!-- 回复表单 -->
+        <div id="bottom" v-if="task">
+          <a-form
+            ref="formRef"
+            :model="form"
+            :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
+            :wrapper-col="{ md: { span: 14 }, sm: { span: 24 }, xs: { span: 24 } }"
+            layout="vertical"
+          >
+          <a-card
+            :title="currentRecord ? `正在回复${currentRecord.nickname}:` : `处理结果`"
+            :class="screenWidth > 480 ? '' : 'transparent-bg'"
+            :bordered="false"
+            v-if="hasRole('superAdmin') || hasRole('admin') || task.status == 0"
+          >
+            <template #extra>
+              <a-space>
+                <template v-if="hasRole('admin') || hasRole('superAdmin')">
+                  <template v-if="active == CLOSED || active == COMPLETED">
+                    <a-button @click="onClose">重开</a-button>
+                  </template>
+                  <template v-else>
+                    <a-space>
+<!--                      <a-button @click="openUser">派单</a-button>-->
+                      <a-button @click="onResolved">已解决</a-button>
+<!--                      <a-button @click="onClose">关单</a-button>-->
+<!--                      <a-button @click="openEdit">编辑</a-button>-->
+<!--                      <a-button @click="remove">删除</a-button>-->
+                    </a-space>
+                  </template>
+                </template>
+                <template v-if="hasRole('commander')">
+                  <a-button @click="onResolved" :v-if="commander != loginUserId">已解决</a-button>
+                  <a-button @click="onClose">{{ taskStatus ? '关单' : '重开' }}</a-button>
+                </template>
+                <template v-if="hasRole('promoter') || hasRole('user')">
+                  <a-button @click="onConfirmCompleted" v-if="active != CLOSED && active != COMPLETED">确认完成</a-button>
+                  <a-button @click="onClose" v-if="active != CLOSED && active != COMPLETED">关闭</a-button>
+                </template>
+                <a-button @click="openAppInfo(appId)" v-if="appId > 0">相关信息</a-button>
+                <a-button @click="openQrcode">分享</a-button>
+              </a-space>
+            </template>
+            <a-space direction="vertical" style="width: 100%">
+              <!-- 编辑器 -->
+              <byte-md-editor
+                v-model:value="content"
+                placeholder="请输入您的回复内容，图片请直接粘贴"
+                :locale="zh_Hans"
+                :plugins="plugins"
+                mode="tab"
+                height="300px"
+                maxLength="500"
+                :editorConfig="{ lineNumbers: true }"
+                contenteditable="true"
+                @paste="onPaste"
+              />
+              <a-row :gutter="16">
+                <a-col
+                  v-bind="styleResponsive ? { md: 24, sm: 12, xs: 24 } : { span: 8 }"
+                >
+                  <a-form-item label="机密信息（选填）" name="confidential">
+                    <a-textarea :rows="3" v-model:value="confidential" placeholder="请在此处填写项目名、账号、密码等机密信息，提交后机密信息将做加密处理"></a-textarea>
+                  </a-form-item>
+                </a-col>
+                <a-col
+                  v-bind="styleResponsive ? { md: 12, sm: 12, xs: 24 } : { span: 8 }"
+                >
+                  <a-form-item label="上传附件（选填）" name="files">
+                    <a-upload
+                      v-model:file-list="fileList"
+                      class="upload-list-inline"
+                      list-type="picture"
+                      :before-upload="onBeforeUpload"
+                    >
+                      <a-button>
+                        <UploadOutlined />
+                        上传附件
+                      </a-button>
+                    </a-upload>
+                  </a-form-item>
+                </a-col>
+              </a-row>
+              <div class="submit-btn">
+                <a-button type="primary" size="large" block @click="save"
+                >提交</a-button
+                >
+              </div>
+            </a-space>
+          </a-card>
+          </a-form>
+        </div>
+      </a-col>
+      <!--      右侧区域-->
+      <a-col
+        v-bind="
+          styleResponsive
+            ? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
+            : { span: 12 }
+        "
+        class="gutter-row"
+        :span="6"
+        v-if="screenWidth > 500"
+      >
+        <Tools :appId="appId" />
+        <Help />
+        <Links />
+      </a-col>
+    </a-row>
+    <!-- 指派人员 -->
+    <Assign v-model:visible="showUser" @done="doneUser" />
+    <!-- 工单二维码 -->
+    <TaskQrcode v-model:visible="showQrcode" :data="task" @done="doneQrcode"/>
+    <!-- 项目信息 -->
+    <AppInfo v-model:visible="showAppInfo" :appId="appId" @done="doneQrcode"/>
+    <!-- 编辑弹窗 -->
+    <TaskEdit v-model:visible="showEdit" :data="task" @done="reload"/>
+    <!-- 编辑弹窗 -->
+    <TaskRecordEdit v-model:visible="showEditRecord" :data="currentRecord" @done="reload"/>
+  </a-page-header>
+</template>
+
+<script lang="ts" setup>
+import { createVNode, ref, unref, watch } from "vue";
+import {
+  StarOutlined,
+  LikeOutlined,
+  MessageOutlined, ExclamationCircleOutlined
+} from "@ant-design/icons-vue";
+  import 'bytemd/dist/index.min.css';
+  import 'github-markdown-css/github-markdown-light.css';
+  // // 链接、删除线、复选框、表格等的插件
+  import gfm from '@bytemd/plugin-gfm';
+  // // 插件的中文语言文件
+  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
+  // 中文语言文件
+  import zh_Hans from 'bytemd/locales/zh_Hans.json';
+  import 'bytemd/dist/index.min.css';
+  import highlight from '@bytemd/plugin-highlight-ssr';
+  import 'highlight.js/styles/default.css';
+  import { useRouter } from 'vue-router';
+import { getTask, removeTask, updateTask } from "@/api/oa/task";
+  import useFormData from '@/utils/use-form-data';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { decrypt, encrypt, getVersion, isImage, openUrl } from "@/utils/common";
+  import { Article } from '@/api/cms/article/model';
+  import { TaskRecord } from '@/api/oa/task-record/model';
+  import { addTaskRecord, pageTaskRecord, removeTaskRecord } from "@/api/oa/task-record";
+  import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
+  import { uploadOss } from "@/api/system/file";
+  import { message, Modal } from "ant-design-vue";
+  import { timeAgo } from "ele-admin-pro";
+  import { toTreeData } from "ele-admin-pro/es";
+  import { useParamsStore } from "@/store/modules/params";
+  import Assign from './components/assign.vue'
+  import AppInfo from './components/app-info.vue';
+  import TaskEdit from './components/task-edit.vue';
+  import TaskRecordEdit from './components/task-record-edit.vue';
+  import TaskQrcode from './components/task-qrcode.vue'
+  import Links from './components/links.vue'
+  import Help from './components/Help.vue'
+  import { Task } from "@/api/oa/task/model";
+  import { CLOSED, COMPLETED, PENDING, PROCESSING, TOBEARRANGED, TOBECONFIRMED } from "@/api/oa/task/model/progress";
+  import { useUserStore } from "@/store/modules/user";
+  import Tools from "@/views/oa/task/components/tools.vue";
+  import { ACTION_1, ACTION_2, ACTION_3, TASK_STATUS_1 } from "@/api/oa/task/model/task";
+  import { hasRole } from "@/utils/permission";
+  import {setPageTabTitle} from "@/utils/page-tab-util";
+import {User} from "@/api/system/user/model";
+  const ROUTE_PATH = '/oa/task/detail';
+
+  const { currentRoute } = useRouter();
+  // 选中步骤
+  const active = ref(0);
+  const { push } = useRouter();
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const param = useParamsStore();
+  const user = useUserStore();
+  const { styleResponsive, screenWidth } = storeToRefs(themeStore);
+  const title = ref('');
+  const version = ref<number>(0);
+  const taskProgressDict = [{ label: "待分派", value: TOBEARRANGED },{ label: "待处理", value: PENDING },{ label: "处理中", value: PROCESSING },{ label: "待评价", value: TOBECONFIRMED },{ label: "已完成", value: COMPLETED },{ label: "已关闭", value: CLOSED }];
+  const articleList = ref<Article[]>([]);
+  const taskId = ref<Number>(0);
+  const appId = ref<Number>(0);
+  const loginUserId = ref(0);
+  const commander = ref(0);
+  const taskRecord = ref<TaskRecord[]>([]);
+  const current = ref(1);
+  const total = ref();
+  const content = ref('');
+  const confidential = ref<string>('');
+  const currentRecord = ref<TaskRecord | any>();
+  const taskStatus = ref(true);
+  const loading = ref(false);
+  const showUser = ref(false);
+  const showQrcode = ref(false);
+  const showAppInfo = ref(false);
+  const showEdit = ref(false);
+  const showEditRecord = ref(false);
+  const fileList = ref<any[]>([]);
+  const files = ref<any[]>([]);
+  const task = ref<Task | any>();
+
+  // 用户信息
+  const { form, assignFields, resetFields } = useFormData<TaskRecord>({
+    children: [],
+    content: "",
+    developerId: 0,
+    files: "",
+    parentId: 0,
+    sortNumber: 0,
+    status: "",
+    toUser: {},
+    userId: 0,
+    taskRecordId: 0,
+    taskId: 0,
+    appId: 0,
+    nickname: undefined,
+    avatar: '',
+    comments: ''
+  });
+
+  const actions: Record<string, any>[] = [
+    { icon: StarOutlined, text: '156' },
+    { icon: LikeOutlined, text: '156' },
+    { icon: MessageOutlined, text: '回复' }
+  ];
+
+  const onReply = (item: TaskRecord) => {
+    currentRecord.value = item;
+    form.parentId = item.userId;
+  }
+
+  const openUser = () => {
+    showUser.value = true;
+  }
+
+  const openAppInfo = (id:number) => {
+    openUrl('/oa/app/detail/' + id)
+    // showAppInfo.value = true;
+  }
+
+  const openQrcode = () => {
+    showQrcode.value = true;
+  }
+
+  const openEdit = () => {
+    showEdit.value = true;
+  }
+
+  /* 打开编辑弹窗 */
+  const openEditRecord = (row?: TaskRecord) => {
+    currentRecord.value = row ?? null;
+    showEditRecord.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = () => {
+    Modal.confirm({
+      title: '操作提示',
+      content: '确定要删除吗？',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeTask(form.taskId)
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            push('/system/my-task')
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  const removeRecord = (item) => {
+    removeTaskRecord(item.taskRecordId)
+      .then((msg) => {
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  /**
+   * 指派人员
+   * 状态变为：待处理
+   * @param item
+   */
+  const doneUser = async (item: User) => {
+    form.toUser = item
+    const msg = await updateTask({ taskId: form.taskId, progress: PENDING, commander: item.userId, action: ACTION_1 })
+    if(msg){
+      active.value = PENDING
+      const data: any = {
+        taskId: form.taskId,
+        content: `已指派给${item.nickname}(工号：${item.userId})`
+      }
+      await addTaskRecord(data)
+      showUser.value = false;
+      reload();
+    }
+  }
+
+  /**
+   * 工单二维码
+   * @param item
+   */
+  const doneQrcode = async (item: Task) => {
+
+  }
+
+  /**
+   * 技术人员已处理完
+   * 状态变为：待评价
+   */
+  const onResolved = async () => {
+    Modal.confirm({
+      title: '操作提示',
+      content: '请回复处理结果！确定要变更状态为已处理吗？',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        const msg = updateTask({ taskId: form.taskId, progress: TOBECONFIRMED, status: TASK_STATUS_1, action: ACTION_2 }).then(async res => {
+          const data: any = {
+            taskId: form.taskId,
+            content: '问题已处理,请查看并确认'
+          }
+          await addTaskRecord(data)
+          setTimeout(() => {
+            hide();
+            active.value = TOBECONFIRMED;
+            message.success("问题已处理，请查看并确认");
+            push('/system/my-task')
+          }, 300)
+        })
+      }
+    });
+  }
+
+  /**
+   * 确认已完成
+   */
+  const onConfirmCompleted = () => {
+    Modal.confirm({
+      title: '操作提示',
+      content: '感谢您的支持！请给技术人员评价！',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        updateTask({taskId: form.taskId,status: TASK_STATUS_1, progress: COMPLETED}).then(() => {
+          message.success("操作成功");
+          push('/system/my-task')
+        })
+      }
+    });
+
+  }
+
+  /**
+   * 关闭工单
+   */
+  const onClose = () => {
+    Modal.confirm({
+      title: '操作提示',
+      content: '确定要操作吗？',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        const taskId = form.taskId
+        const action = ACTION_3;
+        // 关闭
+        let status = 1;
+        let progress = CLOSED;
+        active.value = CLOSED;
+        // 重开
+        if(!taskStatus.value){
+          status = 0;
+          progress = PROCESSING;
+          active.value = TOBECONFIRMED;
+        }
+        const msg = updateTask({ taskId, progress, status, action }).then(res => {
+          setTimeout(() => {
+            hide();
+            message.success("操作成功");
+            if (taskStatus.value) {
+              push('/system/my-task')
+            }else {
+              reload();
+            }
+          },300)
+        })
+      }
+    });
+  }
+
+  // 插件
+  const plugins = ref([
+    gfm({
+      locale: zh_HansGfm
+    }),
+    highlight()
+  ]);
+
+// 文件上传事件
+const onBeforeUpload = (file: File) => {
+  const item: ItemType = {
+    file,
+    uid: (file as any).uid,
+    name: file.name
+  }
+  if (!file.type.startsWith("image")) {
+    if (file.size / 1024 / 1024 > 100) {
+      message.error("大小不能超过 100MB");
+      return;
+    }
+  }
+  onUpload(item);
+  return false;
+};
+
+const onUpload = (d: ItemType) => {
+  uploadOss(<File>d.file)
+    .then((result) => {
+      files.value.push({
+        uid: result.id,
+        url: result.path,
+        name: isImage(result.path) ? 'image' : result.name,
+        status: "done"
+      });
+      message.success("上传成功");
+    })
+    .catch((e) => {
+      message.error(e.message);
+    });
+};
+
+  /* 粘贴图片上传服务器并插入编辑器 */
+  const onPaste = (e) => {
+    const items = (e.clipboardData || e.originalEvent.clipboardData).items;
+    let hasFile = false;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.indexOf('image') !== -1) {
+        let file = items[i].getAsFile();
+        const item: ItemType = {
+          file,
+          uid: (file as any).lastModified,
+          name: file.name
+        };
+        uploadOss(<File>item.file)
+          .then((result) => {
+            const addPath = '!['+result.name+']('+ result.url+')\n\r';
+            content.value = content.value + addPath
+          })
+          .catch((e) => {
+            message.error(e.message);
+          });
+        hasFile = true;
+      }
+    }
+    if (hasFile) {
+      e.preventDefault();
+    }
+  }
+
+  /* 保存编辑 */
+  const save = () => {
+    // 检查是否填写内容
+    if (content.value == '') {
+      message.error('请填写内容')
+      return false;
+    }
+    loading.value = true;
+    const data = {
+      ...form,
+      content: content.value,
+      taskId: form.taskId,
+      parentId: currentRecord.value?.taskRecordId,
+      files: JSON.stringify(files.value),
+      confidential: encrypt(confidential.value)
+    };
+    // 加密信息处理
+    if(confidential.value != ''){
+      data.confidential = encrypt(confidential.value)
+    }else {
+      data.confidential = undefined
+    }
+    addTaskRecord(data)
+      .then((msg) => {
+        loading.value = false;
+        content.value = '';
+        fileList.value = [];
+        files.value = [];
+        confidential.value = '';
+        message.success('回复成功')
+        reload();
+      })
+      .catch((e) => {
+        loading.value = false;
+        message.error(e.message);
+      });
+  };
+
+  /**
+   * 加载数据
+   */
+  const reload = () => {
+    version.value = <number>getVersion();
+    if (form.taskId) {
+      const taskId = form.taskId;
+      getTask(taskId).then((data) => {
+        task.value = data;
+        commander.value = Number(data.commander);
+        active.value = Number(data.progress);
+        appId.value = Number(data.appId);
+        form.appId = Number(data.appId);
+        title.value = `【${taskId}】${data.name}`
+        setPageTabTitle(`${data.name}`)
+        // 兼容小屏幕
+        if (screenWidth.value < 480) {
+          title.value = `工单号：${taskId}`
+        }
+        if(data.progress == CLOSED){
+          taskStatus.value = false;
+        }else{
+          taskStatus.value = true;
+        }
+      });
+      pageTaskRecord({ taskId ,page: current.value, limit: 100}).then((res) => {
+        taskRecord.value = toTreeData({
+          data: res?.list.map((d) => {
+            return { ...d, key: d.taskRecordId, value: d.taskRecordId };
+          }),
+          idField: 'taskRecordId',
+          parentIdField: 'parentId'
+        });
+        total.value = res?.count;
+      });
+    }
+    if(user.info){
+      const { userId } = user?.info
+      loginUserId.value = Number(userId);
+    }
+  };
+
+  watch(
+    currentRoute,
+    (route) => {
+      const { params } = unref(route);
+      const { id } = params;
+      if (id) {
+        form.taskId = Number(id);
+        reload();
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'TaskDetail'
+  };
+</script>
+
+<style lang="less" scoped>
+  .task-card {
+    padding: 2px !important;
+    margin-bottom: 16px;
+  }
+  .user-content {
+    max-width: 100%;
+    border-radius: 8px !important;
+    background-color: #a2ec71;
+    border: none;
+  }
+  .admin-content {
+    border-radius: 8px !important;
+    border: 3px solid #f1f1f1;
+  }
+  /deep/.markdown-body{
+    background-color: transparent; /* 设置背景透明 */
+  }
+  /deep/.markdown-body img {
+    max-width: 360px;
+  }
+  .files{
+    margin-top: 10px;
+  }
+  #bottom{
+    margin-bottom: 20px;
+  }
+  .transparent-bg{
+    background-color: transparent; /* 设置背景透明 */
+  }
+  .submit-btn{
+    margin: auto;
+  }
+</style>
diff --git a/src/views/system/myTask/dict/components/dict-edit.vue b/src/views/system/myTask/dict/components/dict-edit.vue
new file mode 100644
index 0000000..0f5155a
--- /dev/null
+++ b/src/views/system/myTask/dict/components/dict-edit.vue
@@ -0,0 +1,178 @@
+<!-- 分类编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="460"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="isUpdate ? '修改分类' : '添加分类'"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 5, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="分类标识" name="dictCode">
+        <a-input
+          allow-clear
+          :maxlength="20"
+          disabled
+          placeholder="请输入分类标识"
+          v-model:value="form.dictCode"
+        />
+      </a-form-item>
+      <a-form-item label="分类名称" name="dictDataName">
+        <a-input
+          allow-clear
+          :maxlength="20"
+          placeholder="请输入分类名称"
+          v-model:value="form.dictDataName"
+        />
+      </a-form-item>
+      <a-form-item label="排序" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="99999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+      <a-form-item label="备注">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="请输入备注"
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import { addDictData, updateDictData } from '@/api/system/dict-data';
+  import { DictData } from '@/api/system/dict-data/model';
+  import {removeSiteInfoCache} from "@/api/cms/website";
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: DictData | null;
+    // 字典ID
+    dictId?: number | 0;
+  }>();
+
+  //
+  const formRef = ref<FormInstance | null>(null);
+
+  // 是否是修改
+  const isUpdate = ref(false);
+
+  // 提交状态
+  const loading = ref(false);
+
+  // 表单数据
+  const { form, resetFields, assignFields } = useFormData<DictData>({
+    dictId: undefined,
+    dictDataId: undefined,
+    dictDataName: '',
+    dictCode: 'taskType',
+    dictDataCode: '',
+    sortNumber: 100,
+    comments: ''
+  });
+
+  // 表单验证规则
+  const rules = reactive<Record<string, Rule[]>>({
+    dictDataCode: [
+      {
+        required: true,
+        message: '请输入分类名称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    dictCode: [
+      {
+        required: true,
+        message: '请输入分类标识',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const saveOrUpdate = isUpdate.value ? updateDictData : addDictData;
+        form.dictDataCode = form.dictDataName;
+        form.dictId = props.dictId;
+        saveOrUpdate(form)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            // 清除字典缓存
+            removeSiteInfoCache(form.dictCode + ':' + form.tenantId);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          assignFields(props.data);
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+        formRef.value?.clearValidate();
+      }
+    }
+  );
+</script>
diff --git a/src/views/system/myTask/dict/index.vue b/src/views/system/myTask/dict/index.vue
new file mode 100644
index 0000000..29b7cb3
--- /dev/null
+++ b/src/views/system/myTask/dict/index.vue
@@ -0,0 +1,224 @@
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="tableRef"
+        row-key="dictDataId"
+        :columns="columns"
+        :datasource="datasource"
+        :customRow="customRow"
+        v-model:selection="selection"
+        :scroll="{ x: 800 }"
+        cache-key="proSystemRoleTable"
+      >
+        <template #toolbar>
+          <a-space>
+            <a-button type="primary" class="ele-btn-icon" @click="openEdit()">
+              <template #icon>
+                <plus-outlined />
+              </template>
+              <span>新建</span>
+            </a-button>
+            <a-button
+              danger
+              type="primary"
+              class="ele-btn-icon"
+              @click="removeBatch"
+            >
+              <template #icon>
+                <delete-outlined />
+              </template>
+              <span>删除</span>
+            </a-button>
+          </a-space>
+        </template>
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'action'">
+            <a-space>
+              <a @click="openEdit(record)">修改</a>
+              <a-divider type="vertical" />
+              <a-popconfirm
+                placement="topRight"
+                title="确定要删除此分类吗？"
+                @confirm="remove(record)"
+              >
+                <a class="ele-text-danger">删除</a>
+              </a-popconfirm>
+            </a-space>
+          </template>
+        </template>
+      </ele-pro-table>
+    </a-card>
+    <!-- 编辑弹窗 -->
+    <dict-edit
+      v-model:visible="showEdit"
+      :dictId="dictId"
+      :data="current"
+      @done="reload"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue/es';
+  import {
+    PlusOutlined,
+    DeleteOutlined,
+    ExclamationCircleOutlined
+  } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro/es';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { messageLoading } from 'ele-admin-pro/es';
+  import DictEdit from './components/dict-edit.vue';
+  import {
+    pageDictData,
+    removeDictData,
+    removeDictDataBatch
+  } from '@/api/system/dict-data';
+  import { DictParam } from '@/api/system/dict/model';
+  import { DictData } from '@/api/system/dict-data/model';
+  import { addDict, listDictionaries } from '@/api/system/dict';
+  import { Dictionary } from '@/api/system/dictionary/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+  const dictId = ref(0);
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'dictDataId',
+      width: 80,
+      hideInTable: true
+    },
+    {
+      title: '分类名称',
+      dataIndex: 'dictDataName',
+      showSorterTooltip: false
+    },
+    {
+      title: '备注',
+      dataIndex: 'comments',
+      sorter: true,
+      showSorterTooltip: false
+    },
+    {
+      title: '排序号',
+      width: 180,
+      align: 'center',
+      dataIndex: 'sortNumber'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      align: 'center'
+    }
+  ]);
+
+  // 表格选中数据
+  const selection = ref<DictData[]>([]);
+
+  // 当前编辑数据
+  const current = ref<Dictionary | null>(null);
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    where.dictCode = 'taskType';
+    return pageDictData({ ...where, ...orders, page, limit });
+  };
+
+  /* 搜索 */
+  const reload = (where?: DictParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: DictData) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: DictData) => {
+    const hide = messageLoading('请求中..', 0);
+    removeDictData(row.dictDataId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的分类吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = messageLoading('请求中..', 0);
+        removeDictDataBatch(selection.value.map((d) => d.dictDataId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  // 初始化字典
+  const loadDict = () => {
+    listDictionaries({ dictCode: 'taskType' }).then(async (data) => {
+      if (data?.length == 0) {
+        await addDict({ dictCode: 'taskType', dictName: '工单分类' });
+      }
+      await listDictionaries({ dictCode: 'taskType' }).then((list) => {
+        list?.map((d) => {
+          dictId.value = Number(d.dictId);
+        });
+      });
+    });
+  };
+
+  loadDict();
+
+  /* 自定义行属性 */
+  const customRow = (record: DictData) => {
+    return {
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'TaskDictData'
+  };
+</script>
diff --git a/src/views/system/myTask/hall/components/category.vue b/src/views/system/myTask/hall/components/category.vue
new file mode 100644
index 0000000..c99174e
--- /dev/null
+++ b/src/views/system/myTask/hall/components/category.vue
@@ -0,0 +1,71 @@
+<template>
+  <a-card :bordered="false" title="工单分类">
+    <a-list
+      class="demo-loadmore-list"
+      item-layout="horizontal"
+      :data-source="list"
+    >
+      <template #renderItem="{ item }">
+        <a-list-item>
+          <template #actions>
+            <a-popover>
+              <template #content> 待处理 </template>
+              <a class="ele-text-danger">{{ item.pending }}</a>
+            </a-popover>
+            <a-popover>
+              <template #content> 本月处理数 </template>
+              <a class="ele-text-secondary">{{ item.month }}</a>
+            </a-popover>
+          </template>
+          <a-skeleton avatar :title="false" :loading="!!item.loading" active>
+            <a-list-item-meta>
+              <template #title>
+                {{ item.nickname }}
+              </template>
+              <template #avatar>
+                <a-avatar :src="item.avatar" />
+              </template>
+            </a-list-item-meta>
+          </a-skeleton>
+        </a-list-item>
+      </template>
+    </a-list>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { pageTaskCount } from '@/api/oa/task-count';
+  import { TaskCount } from '@/api/oa/task-count/model';
+  import { UserAddOutlined } from '@ant-design/icons-vue';
+
+  const showQrcode = ref(false);
+  const list = ref<TaskCount[]>([]);
+
+  pageTaskCount({ limit: 10, roleCode: 'commander' }).then((res) => {
+    if (res) {
+      list.value = res?.list;
+    }
+  });
+
+  const onShowQrcode = () => {
+    showQrcode.value = true;
+  };
+</script>
+
+<style lang="less" scoped>
+  .monitor-evaluate-text {
+    width: 90px;
+    flex-shrink: 0;
+    white-space: nowrap;
+    opacity: 0.8;
+
+    & > .anticon {
+      font-size: 12px;
+      margin: 0 6px 0 8px;
+    }
+  }
+  /deep/.ant-list-item {
+    padding: 7px 0;
+  }
+</style>
diff --git a/src/views/system/myTask/hall/components/pending-all.vue b/src/views/system/myTask/hall/components/pending-all.vue
new file mode 100644
index 0000000..f6c4b05
--- /dev/null
+++ b/src/views/system/myTask/hall/components/pending-all.vue
@@ -0,0 +1,216 @@
+<template>
+  <a-card :bordered="false">
+    <!-- 表格 -->
+    <ele-pro-table
+      ref="tableRef"
+      row-key="taskId"
+      :columns="columns"
+      :datasource="datasource"
+      :customRow="customRow"
+      tool-class="ele-toolbar-form"
+      class="sys-org-table"
+    >
+      <template #toolbar>
+        <search @search="reload" :selection="selection" />
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'content'">
+          <div class="user-box">
+            <div class="user-info">
+              <a-badge
+                :dot="!record.isRead && record.userId != userStore.info?.userId"
+              >
+                <a-avatar :src="record.lastAvatar" size="large" />
+              </a-badge>
+            </div>
+            <div class="content" style="display: flex; flex-direction: column">
+              <div class="nickname">
+                <span class="ele-text-secondary">{{
+                  record.lastNickname ? record.lastNickname : '未知'
+                }}</span>
+                <span class="ele-text-placeholder" style="padding-left: 10px">{{
+                  timeAgo(record.updateTime)
+                }}</span>
+              </div>
+              <a
+                class="ele-text-heading"
+                :href="'/oa/task/detail/' + record.taskId"
+                >{{ record.content }}</a
+              >
+            </div>
+            <div class="last-time ele-text-info"> </div>
+          </div>
+        </template>
+        <template v-else-if="column.key === 'status'">
+          <a
+            v-if="record.commander === userStore.info?.userId"
+            @click="openUrl('/oa/task/detail/' + record.taskId)"
+            >立即处理</a
+          >
+          <a v-else @click="getTask(record)">领取任务</a>
+        </template>
+        <template v-else-if="column.key === 'progress'">
+          <a-progress :percent="record.progress * 2" :steps="5" />
+        </template>
+        <template v-if="column.key === 'action'">
+          <a-space>
+            <a @click="onDetail(record)">查看</a>
+            <a-divider type="vertical" />
+            <a-popconfirm
+              title="确定要删除此记录吗？"
+              @confirm="remove(record)"
+            >
+              <a class="ele-text-danger">删除</a>
+            </a-popconfirm>
+          </a-space>
+        </template>
+      </template>
+    </ele-pro-table>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { message } from 'ant-design-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import type { DatasourceFunction } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { timeAgo, toDateString } from 'ele-admin-pro';
+  import Search from './search.vue';
+  import { pageTask, removeTask, updateTask } from '@/api/oa/task';
+  import type { Task, TaskParam } from '@/api/oa/task/model';
+  import { useUserStore } from '@/store/modules/user';
+  import { openUrl } from '@/utils/common';
+  import { hasRole } from '@/utils/permission';
+
+  const userStore = useUserStore();
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+  const selection = ref<any[]>();
+  const status = ref<number>();
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    // 搜索条件
+    where.userId = undefined;
+    where.progress = 0;
+    return pageTask({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<any[]>([
+    {
+      title: '工单号',
+      dataIndex: 'taskId',
+      align: 'center',
+      width: 120
+    },
+    {
+      title: '工单类型',
+      dataIndex: 'taskType',
+      width: 120
+    },
+    {
+      title: '工单标题',
+      dataIndex: 'name',
+      key: 'name',
+      ellipsis: true
+    },
+    {
+      title: '操作',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+      width: 120
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      width: 150,
+      customRender: ({ text }) => toDateString(text, 'MM月dd日 HH:mm')
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: TaskParam) => {
+    status.value = where?.status;
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  const onDetail = (record?: Task) => {
+    window.location.href = 'detail?id=' + record?.taskId;
+  };
+
+  const getTask = (item: Task) => {
+    item.commander = userStore.info?.userId;
+    updateTask(item).then(() => {
+      message.success('领取成功');
+      reload();
+    });
+  };
+
+  /* 删除单个 */
+  const remove = (row: Task) => {
+    const hide = message.loading('请求中..', 0);
+    removeTask(row.taskId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  // 是否展现多选按钮及批量删除按钮
+  if (hasRole('superAdmin') || hasRole('admin')) {
+    selection.value = [];
+  }
+
+  /* 自定义行属性 */
+  const customRow = (record: Task) => {
+    return {
+      // 行双击事件
+      onDblclick: () => {
+        window.open('/oa/task/detail/' + record.taskId);
+      }
+    };
+  };
+  //
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'TaskIndex'
+  };
+</script>
+
+<style lang="less" scoped>
+  .user-box {
+    display: flex;
+    align-items: center;
+    .user-info {
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      margin-right: 7px;
+    }
+    .last-time {
+      margin-left: 12px;
+    }
+    .content {
+      .text {
+        max-width: 90%;
+      }
+    }
+  }
+</style>
diff --git a/src/views/system/myTask/hall/components/search.vue b/src/views/system/myTask/hall/components/search.vue
new file mode 100644
index 0000000..717fe61
--- /dev/null
+++ b/src/views/system/myTask/hall/components/search.vue
@@ -0,0 +1,92 @@
+<template>
+  <div style="display: flex; justify-content: space-between">
+    <a-space :size="20" style="flex-wrap: wrap">
+      <a-tabs tabPosition="top" v-model:activeKey="active" @change="onTabs">
+        <a-tab-pane :key="0" tab="任务大厅" />
+        <a-tab-pane :key="1" tab="已领取" />
+      </a-tabs>
+    </a-space>
+    <a-space :size="10" style="flex-wrap: wrap; margin-right: 20px">
+      <DictSelect
+        dict-code="taskType"
+        v-model:value="where.taskType"
+        :placeholder="`选择分类`"
+        style="width: 200px"
+        @change="search"
+      />
+      <SelectCompany
+        :placeholder="`按客户筛选`"
+        v-model:value="where.companyName"
+        @done="chooseCompanyName"
+      />
+      <!--      <SelectApp-->
+      <!--        :placeholder="`按应用筛选`"-->
+      <!--        v-model:value="where.appName"-->
+      <!--        @done="chooseApp"-->
+      <!--      />-->
+      <a-button @click="reset">重置</a-button>
+    </a-space>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { TaskParam } from '@/api/oa/task/model';
+  import useSearch from '@/utils/use-search';
+  import { Company } from '@/api/system/company/model';
+  import SelectCompany from '@/components/SelectCompany/index.vue';
+  // import SelectApp from '@/components/SelectApp/index.vue';
+  import DictSelect from '@/components/DictSelect/index.vue';
+  import { App } from '@/api/oa/app/model';
+  import { useUserStore } from '@/store/modules/user';
+  import { ref } from 'vue';
+
+  const emit = defineEmits<{
+    (e: 'search', where: TaskParam): void;
+  }>();
+
+  // 表单数据
+  const { where, resetFields } = useSearch<TaskParam>({
+    keywords: '',
+    commander: undefined,
+    companyId: undefined,
+    companyName: '',
+    userId: undefined
+  });
+
+  const userStore = useUserStore();
+  const active = ref<number>(0);
+
+  const chooseCompanyName = (item: Company) => {
+    where.companyId = item.companyId;
+    where.companyName = item.companyName;
+    search();
+  };
+
+  const chooseApp = (item: App) => {
+    where.appId = item.appId;
+    where.appName = item.appName;
+    search();
+  };
+
+  const onTabs = () => {
+    if (active.value == 1) {
+      where.commander = userStore.info?.userId;
+    } else {
+      where.commander = undefined;
+      where.progress = undefined;
+    }
+    search();
+  };
+
+  /*  重置 */
+  const reset = () => {
+    resetFields();
+    search();
+  };
+
+  /* 搜索 */
+  const search = () => {
+    console.log(where);
+    emit('search', where);
+  };
+</script>
diff --git a/src/views/system/myTask/hall/index.vue b/src/views/system/myTask/hall/index.vue
new file mode 100644
index 0000000..4749e14
--- /dev/null
+++ b/src/views/system/myTask/hall/index.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="ele-body ele-body-card">
+    <a-row :gutter="16">
+      <a-col
+        v-bind="
+          styleResponsive
+            ? { xl: 18, lg: 18, md: 16, sm: 24, xs: 24 }
+            : { span: 6 }
+        "
+      >
+        <PendingAll />
+      </a-col>
+      <a-col
+        v-bind="
+          styleResponsive
+            ? { xl: 6, lg: 6, md: 8, sm: 24, xs: 24 }
+            : { span: 12 }
+        "
+      >
+        <Tools />
+        <CountUser />
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import Tools from '@/views/oa/task/components/tools.vue';
+  import PendingAll from './components/pending-all.vue';
+  import CountUser from '@/views/oa/task/components/count-user.vue';
+  // import { notification } from 'ant-design-vue';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  /**
+   * 测试账号
+   */
+  // const openNotification = () => {
+  //   notification['warning']({
+  //     message: '管理人员',
+  //     description: '分派专员/123456'
+  //   });
+  //   notification['warning']({
+  //     message: '技术人员1',
+  //     description: '张工/123456'
+  //   });
+  //   notification['warning']({
+  //     message: '客户1',
+  //     description: '客户1/123456'
+  //   });
+  // };
+  // openNotification();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'CountIndex'
+  };
+</script>
+
+<style lang="less" scoped>
+  .a-cursor {
+    cursor: pointer;
+  }
+</style>
diff --git a/src/views/system/myTask/index.vue b/src/views/system/myTask/index.vue
new file mode 100644
index 0000000..7c3a0e2
--- /dev/null
+++ b/src/views/system/myTask/index.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="ele-body ele-body-card">
+    <a-row :gutter="16">
+      <a-col
+        v-bind="
+          styleResponsive
+            ? { xl: 18, lg: 18, md: 16, sm: 24, xs: 24 }
+            : { span: 6 }
+        "
+      >
+        <CountPending />
+      </a-col>
+      <a-col
+        v-bind="
+          styleResponsive
+            ? { xl: 6, lg: 6, md: 8, sm: 24, xs: 24 }
+            : { span: 12 }
+        "
+      >
+        <Carousel />
+        <CountUser
+          v-if="
+            hasRole('commander') || hasRole('admin') || hasRole('superAdmin')
+          "
+          style="margin-top: 17px"
+        />
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import CountNum from './components/count-num.vue';
+  import Carousel from './components/carousel.vue';
+  import Tools from './components/tools.vue';
+  import CountUser from './components/count-user.vue';
+  import CountPending from './search/index.vue';
+  import { hasRole } from '@/utils/permission';
+  // import { notification } from 'ant-design-vue';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  /**
+   * 测试账号
+   */
+  // const openNotification = () => {
+  //   notification['warning']({
+  //     message: '管理人员',
+  //     description: '分派专员/123456'
+  //   });
+  //   notification['warning']({
+  //     message: '技术人员1',
+  //     description: '张工/123456'
+  //   });
+  //   notification['warning']({
+  //     message: '客户1',
+  //     description: '客户1/123456'
+  //   });
+  // };
+  // openNotification();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'CountIndex'
+  };
+</script>
+
+<style lang="less" scoped>
+  .a-cursor {
+    cursor: pointer;
+  }
+</style>
diff --git a/src/views/system/myTask/search/components/search.vue b/src/views/system/myTask/search/components/search.vue
new file mode 100644
index 0000000..c37c96b
--- /dev/null
+++ b/src/views/system/myTask/search/components/search.vue
@@ -0,0 +1,97 @@
+<template>
+  <div style="display: flex; justify-content: space-between">
+    <a-space style="flex-wrap: wrap">
+      <a-button type="primary" class="ele-btn-icon" @click="openUrl('/system/my-task/add')">
+        <template #icon>
+          <plus-outlined />
+        </template>
+        <span>提交工单</span>
+      </a-button>
+      <a-radio-group v-model:value="where.status" @change="search">
+        <a-radio-button value="0">待处理</a-radio-button>
+        <a-radio-button value="1">已完成</a-radio-button>
+      </a-radio-group>
+      <a-button
+        danger
+        v-if="selection?.length"
+        class="ele-btn-icon"
+        @click="removeBatch"
+      >
+        <template #icon>
+          <DeleteOutlined />
+        </template>
+        <span>批量删除</span>
+      </a-button>
+    </a-space>
+    <a-space :size="10" style="flex-wrap: wrap; margin-right: 20px">
+      <a-input-search
+        allow-clear
+        placeholder="工单号|关键词"
+        v-model:value="where.keywords"
+        @pressEnter="search"
+        @search="search"
+      />
+      <a-button @click="reset">重置</a-button>
+    </a-space>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { TaskParam } from '@/api/oa/task/model';
+  import useSearch from '@/utils/use-search';
+  import { DeleteOutlined } from '@ant-design/icons-vue';
+  import { App } from '@/api/oa/app/model';
+  import DictSelect from '@/components/DictSelect/index.vue';
+  import { User } from '@/api/system/user/model';
+  import { openUrl } from "@/utils/common";
+
+  const props = defineProps<{
+    // 勾选的项目
+    selection?: [];
+    status?: number;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'search', where: TaskParam): void;
+    (e: 'remove'): void;
+  }>();
+
+  // 表单数据
+  const { where, resetFields } = useSearch<TaskParam>({
+    keywords: '',
+    status: undefined,
+    commander: undefined
+  });
+
+  const removeBatch = () => {
+    emit('remove');
+  };
+
+  const chooseApp = (data: App) => {
+    where.appName = data.appName;
+    where.appId = data.appId;
+    emit('search', where);
+  };
+
+  const chooseCommander = (data: User) => {
+    console.log(data);
+    where.nickname = data.nickname;
+    where.commander = data.userId;
+    emit('search', where);
+  };
+
+  /*  重置 */
+  const reset = () => {
+    resetFields();
+    search();
+  };
+
+  /* 搜索 */
+  const search = () => {
+    emit('search', where);
+  };
+
+  if (props.status == undefined) {
+    where.status = '0';
+  }
+</script>
diff --git a/src/views/system/myTask/search/index.vue b/src/views/system/myTask/search/index.vue
new file mode 100644
index 0000000..8298480
--- /dev/null
+++ b/src/views/system/myTask/search/index.vue
@@ -0,0 +1,307 @@
+<template>
+  <a-card :bordered="false">
+    <!-- 表格 -->
+    <ele-pro-table
+      ref="tableRef"
+      row-key="taskId"
+      :columns="columns"
+      :datasource="datasource"
+      v-model:selection="selection"
+      :customRow="customRow"
+      tool-class="ele-toolbar-form"
+      class="sys-org-table"
+    >
+      <template #toolbar>
+        <search @search="reload" :selection="selection" @remove="removeBatch" />
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'content'">
+          <div class="user-box">
+            <div class="user-info">
+              <a-badge
+                :dot="!record.isRead && record.userId != userStore.info?.userId"
+              >
+                <a-avatar :src="record.avatar" size="large" />
+              </a-badge>
+            </div>
+            <div class="content" style="display: flex; flex-direction: column">
+              <div class="nickname">
+                <span class="ele-text-secondary">
+                  {{ `${record.nickname}` }}
+                </span>
+                <span class="ele-text-placeholder" style="padding-left: 10px">{{
+                  timeAgo(record.createTime)
+                }}</span>
+              </div>
+              <a
+                class="ele-text-heading"
+                @click="openUrl('/oa/task/detail/' + record.taskId)"
+              >
+                {{ `工单标题：${record.name}` }}
+              </a>
+              <div class="ele-text-placeholder">{{
+                record.appId > 0 ? `项目名称：【${record.appName}】` : ''
+              }}</div>
+              <div
+                class="ele-text-secondary"
+                style="display: flex; align-items: center"
+              >
+                <a-avatar :size="18" :src="record.lastAvatar" />
+                <div class="content" style="padding-left: 8px">
+                  {{ record.content }}
+                </div>
+                <span class="ele-text-placeholder" style="padding-left: 10px">{{
+                  timeAgo(record.updateTime)
+                }}</span>
+              </div>
+            </div>
+            <div class="last-time ele-text-info"> </div>
+          </div>
+        </template>
+        <template v-else-if="column.key === 'status'">
+          <a-tag v-if="record.progress === TOBEARRANGED" color="red"
+            >待安排</a-tag
+          >
+          <a-tag v-if="record.progress === PENDING" color="orange"
+            >待处理</a-tag
+          >
+          <a-tag v-if="record.progress === PROCESSING" color="purple"
+            >处理中</a-tag
+          >
+          <a-tag v-if="record.progress === TOBECONFIRMED" color="cyan"
+            >待评价</a-tag
+          >
+          <a-tag v-if="record.progress === COMPLETED" color="green"
+            >已完成</a-tag
+          >
+          <a-tag v-if="record.progress === CLOSED">已关闭</a-tag>
+          <div class="ele-text-danger" v-if="record.overdueDays">
+            已逾期{{ record.overdueDays }}天
+          </div>
+        </template>
+        <template v-else-if="column.key === 'progress'">
+          <a-progress :percent="record.progress * 2" :steps="5" />
+        </template>
+        <template v-if="column.key === 'action'">
+          <a-space>
+            <a @click="onDetail(record)">查看</a>
+            <a-divider type="vertical" />
+            <a-popconfirm
+              title="确定要删除此记录吗？"
+              @confirm="remove(record)"
+            >
+              <a class="ele-text-danger">删除</a>
+            </a-popconfirm>
+          </a-space>
+        </template>
+      </template>
+    </ele-pro-table>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import type { DatasourceFunction } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { timeAgo } from 'ele-admin-pro';
+  import Search from './components/search.vue';
+  import { pageTask, removeTask, removeBatchTask } from '@/api/oa/task';
+  import type { Task, TaskParam } from '@/api/oa/task/model';
+  import { useUserStore } from '@/store/modules/user';
+  import {
+    CLOSED,
+    COMPLETED,
+    PENDING,
+    PROCESSING,
+    TOBEARRANGED,
+    TOBECONFIRMED
+  } from '@/api/oa/task/model/progress';
+  import { hasRole } from '@/utils/permission';
+  import { openUrl } from '@/utils/common';
+
+  const userStore = useUserStore();
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+  const selection = ref<any[]>([]);
+  const status = ref<number>();
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    // 搜索条件
+    where.userId = undefined;
+    where.commander = userStore.info?.userId;
+    if (where.status != 1) {
+      where.status = 0;
+    }
+    // 工单发起人
+    if (hasRole('promoter') || hasRole('user')) {
+      where.commander = undefined;
+      where.userId = userStore.info?.userId;
+    }
+    // 管理人员
+    if (hasRole('superAdmin') || hasRole('admin')) {
+      where.commander = undefined;
+    }
+    // 工单受理人员
+    if (hasRole('commander')) {
+      where.commander = userStore.info?.userId;
+    }
+    return pageTask({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<any[]>([
+    {
+      title: '工单号',
+      dataIndex: 'taskId',
+      align: 'center',
+      width: 100
+    },
+    {
+      title: '工单类型',
+      dataIndex: 'taskType',
+      width: 100
+    },
+    {
+      title: '工单信息',
+      dataIndex: 'content',
+      key: 'content',
+      ellipsis: true
+    },
+    // {
+    //   title: '所属项目',
+    //   dataIndex: 'appName',
+    //   width: 120,
+    //   ellipsis: true,
+    //   key: 'appName'
+    // },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+      width: 120
+    }
+    // {
+    //   title: '创建时间',
+    //   dataIndex: 'createTime',
+    //   key: 'createTime',
+    //   align: 'center',
+    //   showSorterTooltip: true,
+    //   hideInSetting: true,
+    //   ellipsis: true,
+    //   width: 150,
+    //   customRender: ({ text }) => toDateString(text, 'MM月dd日 HH:mm')
+    // }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: TaskParam) => {
+    status.value = where?.status;
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  const onDetail = (record?: Task) => {
+    window.location.href = 'detail?id=' + record?.taskId;
+  };
+
+  /* 删除单个 */
+  const remove = (row: Task) => {
+    const hide = message.loading('请求中..', 0);
+    removeTask(row.taskId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value?.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    if (selection.value?.length) {
+      Modal.confirm({
+        title: '提示',
+        content: '确定要删除选中的记录吗?',
+        icon: createVNode(ExclamationCircleOutlined),
+        maskClosable: true,
+        onOk: () => {
+          const hide = message.loading('请求中..', 0);
+          removeBatchTask(selection.value.map((d) => d.taskId))
+            .then((msg) => {
+              hide();
+              message.success(msg);
+              reload();
+            })
+            .catch((e) => {
+              hide();
+              message.error(e.message);
+            });
+        }
+      });
+    }
+  };
+
+  // 是否展现多选按钮及批量删除按钮
+  if (hasRole('superAdmin') || hasRole('admin')) {
+    selection.value = [];
+  }
+
+  /* 自定义行属性 */
+  const customRow = (record: Task) => {
+    return {
+      // 行双击事件
+      onDblclick: () => {
+        openUrl('/oa/task/detail/' + record.taskId);
+      }
+    };
+  };
+  //
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'TaskIndex'
+  };
+</script>
+
+<style lang="less" scoped>
+  .user-box {
+    display: flex;
+    align-items: center;
+    .user-info {
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      margin-right: 7px;
+    }
+    .last-time {
+      margin-left: 12px;
+    }
+    .content {
+      .text {
+        max-width: 90%;
+      }
+    }
+  }
+  .nickname {
+    .ele-text-heading {
+      font-weight: bold;
+    }
+  }
+</style>