From 98e306c9ffa6b8ed54709bee8bb8d49204da38d6 Mon Sep 17 00:00:00 2001
From: Charles7c <charles7c@126.com>
Date: Wed, 16 Oct 2024 21:19:00 +0800
Subject: [PATCH 1/2] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=20GiForm=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=BB=A3=E7=A0=81=EF=BC=88=E5=90=8C=E6=AD=A5?=
 =?UTF-8?q?=20GiDemo=20=E6=9B=B4=E6=96=B0=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/GiForm/src/GiForm.vue | 261 ++++++++-------------------
 src/components/GiForm/src/type.ts    |  18 +-
 2 files changed, 85 insertions(+), 194 deletions(-)

diff --git a/src/components/GiForm/src/GiForm.vue b/src/components/GiForm/src/GiForm.vue
index 9dd4818..7889a3c 100644
--- a/src/components/GiForm/src/GiForm.vue
+++ b/src/components/GiForm/src/GiForm.vue
@@ -1,196 +1,30 @@
 <template>
-  <a-form ref="formRef" v-bind="options.form" :model="modelValue" :auto-label-width="true">
+  <a-form ref="formRef" :auto-label-width="true" v-bind="options.form" :model="modelValue">
     <a-row :gutter="14" v-bind="options.row" class="w-full">
       <template v-for="(item, index) in columns" :key="item.field">
-        <a-col
-          v-if="!isHide(item.hide)"
-          v-show="index <= (options.fold?.index || 0) || (index >= (options.fold?.index || 0) && !collapsed)"
-          :span="item.span || 12"
-          v-bind="item.col || item.span ? item.col : options.col"
-        >
-          <a-form-item
-            v-bind="item.item"
-            :label="item.label"
-            :field="item.field"
-            :rules="item.rules"
-            :disabled="isDisabled(item.disabled)"
-          >
-            <slot :name="item.field" v-bind="{ disabled: isDisabled(item.disabled) }">
-              <template v-if="item.type === 'input'">
-                <a-input
-                  :placeholder="`请输入${item.label}`"
-                  v-bind="(item.props as A.InputInstance['$props'])"
-                  :model-value="modelValue[item.field as keyof typeof modelValue]"
-                  @update:model-value="valueChange($event, item.field)"
-                ></a-input>
-              </template>
-
-              <template v-if="item.type === 'input-password'">
-                <a-input-password
-                  :placeholder="`请输入${item.label}`"
-                  v-bind="(item.props as A.InputInstance['$props'])"
-                  :model-value="modelValue[item.field as keyof typeof modelValue]"
-                  @update:model-value="valueChange($event, item.field)"
-                ></a-input-password>
-              </template>
-
-              <template v-if="item.type === 'input-number'">
-                <a-input-number
-                  :placeholder="`请输入${item.label}`"
-                  v-bind="(item.props as A.InputNumberInstance['$props'])"
-                  :model-value="modelValue[item.field as keyof typeof modelValue]"
-                  @update:model-value="valueChange($event, item.field)"
-                ></a-input-number>
-              </template>
-
-              <template v-if="item.type === 'textarea'">
-                <a-textarea
-                  :placeholder="`请输入${item.label}`"
-                  :show-word-limit="true"
-                  v-bind="(item.props as A.TextareaInstance['$props'])"
-                  :model-value="modelValue[item.field as keyof typeof modelValue]"
-                  @update:model-value="valueChange($event, item.field)"
-                ></a-textarea>
-              </template>
-
-              <template v-if="item.type === 'select'">
-                <a-select
-                  :placeholder="`请选择${item.label}`"
-                  v-bind="(item.props as A.SelectInstance['$props'])"
-                  :options="dicData[item.field] || (item.options as A.SelectInstance['$props']['options'])"
-                  :model-value="modelValue[item.field as keyof typeof modelValue]"
-                  @update:model-value="valueChange($event, item.field)"
-                ></a-select>
-              </template>
-
-              <template v-if="item.type === 'cascader'">
-                <a-cascader
-                  :placeholder="`请选择${item.label}`"
-                  v-bind="(item.props as A.CascaderInstance['$props'])"
-                  :options="dicData[item.field] || (item.options as A.CascaderInstance['$props']['options'])"
-                  :model-value="modelValue[item.field as keyof typeof modelValue]"
-                  @update:model-value="valueChange($event, item.field)"
-                />
-              </template>
-
-              <template v-if="item.type === 'tree-select'">
-                <a-tree-select
-                  :placeholder="`请选择${item.label}`"
-                  v-bind="(item.props as A.TreeSelectInstance['$props'])"
-                  :data="dicData[item.field] || (item.data as A.TreeSelectInstance['$props']['data'])"
-                  :model-value="modelValue[item.field as keyof typeof modelValue]"
-                  @update:model-value="valueChange($event, item.field)"
-                >
-                </a-tree-select>
-              </template>
-
-              <template v-if="item.type === 'radio-group'">
-                <a-radio-group
-                  v-bind="(item.props as A.RadioGroupInstance['$props'])"
-                  :options="dicData[item.field] || (item.options as A.RadioGroupInstance['$props']['options'])"
-                  :model-value="modelValue[item.field as keyof typeof modelValue]"
-                  @update:model-value="valueChange($event, item.field)"
-                ></a-radio-group>
-              </template>
-
-              <template v-if="item.type === 'checkbox-group'">
-                <a-checkbox-group
-                  v-bind="(item.props as A.CheckboxGroupInstance['$props'])"
-                  :options="dicData[item.field] || (item.options as A.CheckboxGroupInstance['$props']['options'])"
-                  :model-value="modelValue[item.field as keyof typeof modelValue]"
-                  @update:model-value="valueChange($event, item.field)"
-                ></a-checkbox-group>
-              </template>
-
-              <template v-if="item.type === 'date-picker'">
-                <a-date-picker
-                  placeholder="请选择日期"
-                  v-bind="(item.props as A.DatePickerInstance['$props'])"
-                  :model-value="modelValue[item.field as keyof typeof modelValue]"
-                  @update:model-value="valueChange($event, item.field)"
-                ></a-date-picker>
-              </template>
-
-              <template v-if="item.type === 'time-picker'">
-                <a-time-picker
-                  placeholder="请选择时间"
-                  v-bind="(item.props as A.TimePickerInstance['$props'])"
-                  :model-value="modelValue[item.field as keyof typeof modelValue]"
-                  @update:model-value="valueChange($event, item.field)"
-                >
-                </a-time-picker>
-              </template>
-
-              <template v-if="item.type === 'year-picker'">
-                <a-year-picker
-                  v-bind="(item.props as A.YearPickerInstance['$props'])"
-                  :model-value="modelValue[item.field as keyof typeof modelValue]"
-                  @update:model-value="valueChange($event, item.field)"></a-year-picker>
-              </template>
-
-              <template v-if="item.type === 'month-picker'">
-                <a-month-picker
-                  v-bind="(item.props as A.MonthPickerInstance['$props'])"
-                  :model-value="modelValue[item.field as keyof typeof modelValue]"
-                  @update:model-value="valueChange($event, item.field)"></a-month-picker>
-              </template>
-
-              <template v-if="item.type === 'quarter-picker'">
-                <a-quarter-picker
-                  v-bind="(item.props as A.QuarterPickerInstance['$props'])"
-                  :model-value="modelValue[item.field as keyof typeof modelValue]"
-                  @update:model-value="valueChange($event, item.field)"></a-quarter-picker>
-              </template>
-
-              <template v-if="item.type === 'week-picker'">
-                <a-week-picker
-                  v-bind="(item.props as A.WeekPickerInstance['$props'])"
-                  :model-value="modelValue[item.field as keyof typeof modelValue]"
-                  @update:model-value="valueChange($event, item.field)"></a-week-picker>
-              </template>
-
+        <a-col v-if="!isHide(item.hide)" v-show="colVShow(index)" :span="item.span || 12"
+               v-bind="item.col || item.span ? item.col : options.col">
+          <a-form-item v-bind="item.item" :label="item.label" :field="item.field" :rules="item.rules"
+                       :disabled="isDisabled(item.disabled)">
+            <slot v-if="!['group-title'].includes(item.type || '')" :name="item.field"
+                  v-bind="{ disabled: isDisabled(item.disabled) }">
               <template v-if="item.type === 'range-picker'">
                 <DateRangePicker v-bind="(item.props as A.RangePickerInstance['$props'])"
                                  :model-value="modelValue[item.field as keyof typeof modelValue]"
                                  @update:model-value="valueChange($event, item.field)" />
               </template>
-
-              <template v-if="item.type === 'color-picker'">
-                <a-color-picker
-                  v-bind="(item.props as A.ColorPickerInstance['$props'])"
-                  :model-value="modelValue[item.field as keyof typeof modelValue]"
-                  @update:model-value="valueChange($event, item.field)"></a-color-picker>
-              </template>
-
-              <template v-if="item.type === 'rate'">
-                <a-rate
-                  v-bind="(item.props as A.RateInstance['$props'])"
-                  :model-value="modelValue[item.field as keyof typeof modelValue]"
-                  @update:model-value="valueChange($event, item.field)"
-                />
-              </template>
-
-              <template v-if="item.type === 'switch'">
-                <a-switch
-                  v-bind="(item.props as A.SwitchInstance['$props'])"
-                  :model-value="modelValue[item.field as keyof typeof modelValue]"
-                  @update:model-value="valueChange($event, item.field)"
-                />
-              </template>
-
-              <template v-if="item.type === 'slider'">
-                <a-slider
-                  v-bind="(item.props as A.SliderInstance['$props'])"
-                  :model-value="modelValue[item.field as keyof typeof modelValue]"
-                  @update:model-value="valueChange($event, item.field)"
-                />
-              </template>
+              <component v-else :is="`a-${item.type}`" v-bind="getComponentBindProps(item)"
+                         :model-value="modelValue[item.field as keyof typeof modelValue]"
+                         @update:model-value="valueChange($event, item.field)"></component>
+            </slot>
+            <slot v-else name="group-title">
+              <a-alert v-bind="item.props">{{ item.label }}</a-alert>
             </slot>
           </a-form-item>
         </a-col>
       </template>
       <a-col v-if="!options.btns?.hide" :span="options.btns?.span || 12" v-bind="options.btns?.col">
-        <a-space wrap :size="[8, 16]" style="flex-wrap: nowrap">
+        <a-space wrap>
           <slot name="suffix">
             <a-button type="primary" @click="emit('search')">
               <template #icon><icon-search /></template>
@@ -215,7 +49,6 @@
 </template>
 
 <script setup lang="ts">
-import type * as A from '@arco-design/web-vue'
 import { cloneDeep } from 'lodash-es'
 import type { Columns, ColumnsItem, ColumnsItemDisabled, ColumnsItemHide, Options } from './type'
 import DateRangePicker from '@/components/DateRangePicker/index.vue'
@@ -234,14 +67,63 @@ const emit = defineEmits<{
   (e: 'reset'): void
 }>()
 
+const formRef = ref('formRef')
+const collapsed = ref(props.options.fold?.defaultCollapsed ?? false)
+const dicData: Record<string, any> = reactive({})
+
+// col组件的显示隐藏
+const colVShow = (index: number) => {
+  return index <= (props.options.fold?.index || 0) || (index >= (props.options.fold?.index || 0) && !collapsed.value)
+}
+
+// 组件的默认props配置
+const getComponentBindProps = (item: ColumnsItem) => {
+  const obj: Partial<ColumnsItem['props'] & { placeholder: string }> = {}
+  if (item.type === 'input') {
+    obj.placeholder = `请输入${item.label}`
+  }
+  if (item.type === 'input-password') {
+    obj.placeholder = `请输入${item.label}`
+  }
+  if (item.type === 'input-number') {
+    obj.placeholder = `请输入${item.label}`
+  }
+  if (item.type === 'textarea') {
+    obj.placeholder = `请输入${item.label}`
+    obj.maxLength = 200
+  }
+  if (item.type === 'select') {
+    obj.placeholder = `请选择${item.label}`
+    obj.options = dicData[item.field] || item.options
+  }
+  if (item.type === 'cascader') {
+    obj.placeholder = `请选择${item.label}`
+    obj.options = dicData[item.field] || item.options
+  }
+  if (item.type === 'tree-select') {
+    obj.placeholder = `请选择${item.label}`
+    obj.data = dicData[item.field] || item.data
+  }
+  if (item.type === 'radio-group') {
+    obj.options = dicData[item.field] || item.options
+  }
+  if (item.type === 'checkbox-group') {
+    obj.options = dicData[item.field] || item.options
+  }
+  if (item.type === 'date-picker') {
+    obj.placeholder = '请选择日期'
+  }
+  if (item.type === 'time-picker') {
+    obj.allowClear = true
+    obj.placeholder = `请选择时间`
+  }
+  return { ...obj, ...item.props }
+}
+
 const valueChange = (value: any, field: string) => {
   emit('update:modelValue', Object.assign(props.modelValue, { [field]: value }))
 }
 
-const collapsed = ref(props.options.fold?.defaultCollapsed ?? false)
-const formRef = ref<A.FormInstance>()
-defineExpose({ formRef })
-
 const isHide = (hide?: ColumnsItemHide<boolean | object>) => {
   if (hide === undefined) return false
   if (typeof hide === 'boolean') return hide
@@ -258,7 +140,8 @@ const isDisabled = (disabled?: ColumnsItemDisabled<boolean | object>) => {
   }
 }
 
-const dicData: Record<string, any> = reactive({})
+defineExpose({ formRef })
+
 props.columns.forEach((item) => {
   if (item.request && typeof item.request === 'function' && item?.init) {
     item.request(props.modelValue).then((res) => {
@@ -305,7 +188,7 @@ watch(cloneForm as any, (newVal, oldVal) => {
 </script>
 
 <style lang="scss" scoped>
-  :deep(.arco-form-item-layout-inline) {
-    margin-right: 0;
-  }
+:deep(.arco-form-item-layout-inline) {
+  margin-right: 0;
+}
 </style>
diff --git a/src/components/GiForm/src/type.ts b/src/components/GiForm/src/type.ts
index b58693b..e3c1167 100644
--- a/src/components/GiForm/src/type.ts
+++ b/src/components/GiForm/src/type.ts
@@ -2,28 +2,32 @@ import type * as A from '@arco-design/web-vue'
 
 export type FormType =
   | 'input'
+  | 'input-password'
+  | 'input-number'
   | 'select'
   | 'radio-group'
   | 'checkbox-group'
   | 'textarea'
   | 'date-picker'
-  | 'time-picker'
   | 'year-picker'
   | 'quarter-picker'
   | 'week-picker'
   | 'range-picker'
   | 'month-picker'
+  | 'time-picker'
   | 'color-picker'
-  | 'input-number'
   | 'rate'
   | 'switch'
   | 'slider'
   | 'cascader'
   | 'tree-select'
-  | 'input-password'
+  | 'upload'
+  | 'group-title'
 
 export type ColumnsItemPropsKey =
   | keyof A.InputInstance['$props']
+  | keyof A.InputPasswordInstance['$props']
+  | keyof A.InputNumberInstance['$props']
   | keyof A.SelectInstance['$props']
   | keyof A.TextareaInstance['$props']
   | keyof A.DatePickerInstance['$props']
@@ -35,13 +39,14 @@ export type ColumnsItemPropsKey =
   | keyof A.RangePickerInstance['$props']
   | keyof A.RadioGroupInstance['$props']
   | keyof A.CheckboxGroupInstance['$props']
-  | keyof A.InputNumberInstance['$props']
   | keyof A.ColorPickerInstance['$props']
   | keyof A.RateInstance['$props']
   | keyof A.SwitchInstance['$props']
   | keyof A.SliderInstance['$props']
   | keyof A.CascaderInstance['$props']
   | keyof A.TreeSelectInstance['$props']
+  | keyof A.UploadInstance['$props']
+  | keyof A.AlertInstance['$props']
 
 export type ColumnsItemHide<F> = boolean | ((form: F) => boolean)
 export type ColumnsItemDisabled<F> = boolean | ((form: F) => boolean)
@@ -71,18 +76,21 @@ export interface ColumnsItem<F = any> {
   item?: Omit<A.FormItemInstance['$props'], 'label' | 'field'> // a-form-item的props
   props?:
     & A.InputInstance['$props']
+    & A.InputPasswordInstance['$props']
+    & A.InputNumberInstance['$props']
     & A.SelectInstance['$props']
     & A.TextareaInstance['$props']
     & A.DatePickerInstance['$props']
     & A.TimePickerInstance['$props']
     & A.RadioGroupInstance['$props']
     & A.CheckboxGroupInstance['$props']
-    & A.InputNumberInstance['$props']
     & A.RateInstance['$props']
     & A.SwitchInstance['$props']
     & A.SliderInstance['$props']
     & A.CascaderInstance['$props']
     & A.TreeSelectInstance['$props']
+    & A.UploadInstance['$props']
+    & A.AlertInstance['$props']
   rules?: A.FormItemInstance['$props']['rules'] // 表单校验规则
   // 下拉列表|复选框组|单选框组|级联选择组件的options
   options?:
-- 
Gitee


From 743bc2f3650f0e6fde2549f069c90b85160e5e59 Mon Sep 17 00:00:00 2001
From: cz176 <1761330201@qq.com>
Date: Sun, 27 Oct 2024 10:33:54 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=83=BD?=
 =?UTF-8?q?=E5=8A=9B=E5=BC=80=E6=94=BE=E6=A8=A1=E5=9D=97=E5=BA=94=E7=94=A8?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/open/app.ts                     |  73 ++++++++++
 src/views/open/app/AppAddModal.vue       | 132 ++++++++++++++++++
 src/views/open/app/AppDetailDrawer.vue   |  44 ++++++
 src/views/open/app/AppGetSecretModal.vue |  60 ++++++++
 src/views/open/app/index.vue             | 169 +++++++++++++++++++++++
 5 files changed, 478 insertions(+)
 create mode 100644 src/apis/open/app.ts
 create mode 100644 src/views/open/app/AppAddModal.vue
 create mode 100644 src/views/open/app/AppDetailDrawer.vue
 create mode 100644 src/views/open/app/AppGetSecretModal.vue
 create mode 100644 src/views/open/app/index.vue

diff --git a/src/apis/open/app.ts b/src/apis/open/app.ts
new file mode 100644
index 0000000..b26e770
--- /dev/null
+++ b/src/apis/open/app.ts
@@ -0,0 +1,73 @@
+import http from '@/utils/http'
+
+const BASE_URL = '/open/app'
+
+export interface AppResp {
+  id: string
+  name: string
+  appKey: string
+  status: string
+  expirationTime: string
+  appDesc: string
+  createUserString: string
+  updateUserString: string
+}
+export interface AppDetailResp {
+  id: string
+  name: string
+  appKey: string
+  status: string
+  expirationTime: string
+  appDesc: string
+  createTime: string
+  updateUser: string
+  updateTime: string
+  createUserString: string
+  updateUserString: string
+}
+export interface AppQuery {
+  name: string
+  appKey: string
+  sort: Array<string>
+}
+export interface AppPageQuery extends AppQuery, PageQuery {}
+
+/** @desc 查询应用列表 */
+export function listApp(query: AppPageQuery) {
+  return http.get<PageRes<AppResp[]>>(`${BASE_URL}`, query)
+}
+
+/** @desc 查询应用详情 */
+export function getApp(id: string) {
+  return http.get<AppDetailResp>(`${BASE_URL}/${id}`)
+}
+
+/** @desc 新增应用 */
+export function addApp(data: any) {
+  return http.post(`${BASE_URL}`, data)
+}
+
+/** @desc 修改应用 */
+export function updateApp(data: any, id: string) {
+  return http.put(`${BASE_URL}/${id}`, data)
+}
+
+/** @desc 删除应用 */
+export function deleteApp(id: string) {
+  return http.del(`${BASE_URL}/${id}`)
+}
+
+/** @desc 导出应用 */
+export function exportApp(query: AppQuery) {
+  return http.download(`${BASE_URL}/export`, query)
+}
+
+/** @desc 查看AK */
+export function getAppSecret(id: string) {
+  return http.get(`${BASE_URL}/${id}/appsecret`)
+}
+
+/** @desc 刷新AK */
+export function refreshAppSecret(id: string) {
+  return http.get(`${BASE_URL}/${id}/refreshas`)
+}
diff --git a/src/views/open/app/AppAddModal.vue b/src/views/open/app/AppAddModal.vue
new file mode 100644
index 0000000..028e12e
--- /dev/null
+++ b/src/views/open/app/AppAddModal.vue
@@ -0,0 +1,132 @@
+<template>
+  <a-modal
+      v-model:visible="visible"
+      :title="title"
+      :mask-closable="false"
+      :esc-to-close="false"
+      :modal-style="{ maxWidth: '520px' }"
+      width="90%"
+      @before-ok="save"
+      @close="reset"
+  >
+    <GiForm ref="formRef" v-model="form" :options="options" :columns="columns" />
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { Message } from '@arco-design/web-vue'
+import { addApp, getApp, updateApp } from '@/apis/open/app'
+import { type Columns, GiForm, type Options } from '@/components/GiForm'
+import { useForm } from '@/hooks'
+import { useDict } from '@/hooks/app'
+
+const emit = defineEmits<{
+  (e: 'save-success'): void
+}>()
+
+const dataId = ref('')
+const isUpdate = computed(() => !!dataId.value)
+const title = computed(() => (isUpdate.value ? '修改应用' : '新增应用'))
+const formRef = ref<InstanceType<typeof GiForm>>()
+
+const { app_type } = useDict('app_type')
+
+const options: Options = {
+  form: {},
+  col: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 },
+  btns: { hide: true }
+}
+
+const columns: Columns = reactive([
+  {
+    label: '应用名称',
+    field: 'name',
+    type: 'input',
+    rules: [{ required: true, message: '请输入应用名称' }]
+  },
+  {
+    label: 'APPKEY',
+    field: 'appKey',
+    type: 'input',
+    rules: [{ required: true, message: '请输入APPKEY' }]
+  },
+  {
+    label: '应用状态',
+    field: 'status',
+    type: 'switch',
+    options: app_type,
+    props: {
+      type: 'round',
+      defaultChecked: true,
+      checkedValue: '1',
+      uncheckedValue: '0',
+      checkedText: '启用',
+      uncheckedText: '禁用',
+      checkedColor: 'green'
+    },
+    rules: [{ required: false, message: '请输入应用状态' }]
+  },
+  {
+    label: '失效时间',
+    field: 'expirationTime',
+    type: 'date-picker',
+    props: {
+      showTime: true
+    },
+    rules: [{ required: true, message: '请输入失效时间' }]
+  },
+  {
+    label: '应用描述',
+    field: 'appDesc',
+    type: 'textarea',
+  },
+])
+
+const { form, resetForm } = useForm({
+  // todo 待补充
+})
+
+// 重置
+const reset = () => {
+  formRef.value?.formRef?.resetFields()
+  resetForm()
+}
+
+const visible = ref(false)
+// 新增
+const onAdd = () => {
+  reset()
+  dataId.value = ''
+  visible.value = true
+}
+
+// 修改
+const onUpdate = async (id: string) => {
+  reset()
+  dataId.value = id
+  const res = await getApp(id)
+  Object.assign(form, res.data)
+  visible.value = true
+}
+
+// 保存
+const save = async () => {
+  try {
+    const isInvalid = await formRef.value?.formRef?.validate()
+    if (isInvalid) return false
+    if (isUpdate.value) {
+      await updateApp(form, dataId.value)
+      Message.success('修改成功')
+    } else {
+      await addApp(form)
+      Message.success('新增成功')
+    }
+    emit('save-success')
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+defineExpose({ onAdd, onUpdate })
+</script>
diff --git a/src/views/open/app/AppDetailDrawer.vue b/src/views/open/app/AppDetailDrawer.vue
new file mode 100644
index 0000000..ebd50c0
--- /dev/null
+++ b/src/views/open/app/AppDetailDrawer.vue
@@ -0,0 +1,44 @@
+<template>
+  <a-drawer v-model:visible="visible" title="应用详情" :width="width >= 580 ? 580 : '100%'" :footer="false" >
+    <a-descriptions :column="1" size="large" class="general-description" bordered>
+      <a-descriptions-item label="应用名称">{{ dataDetail?.name }}</a-descriptions-item>
+      <a-descriptions-item label="APPKEY">{{ dataDetail?.appKey }}</a-descriptions-item>
+      <a-descriptions-item label="应用状态"><GiCellTag :value="dataDetail?.status" :dict="app_type" /></a-descriptions-item>
+      <a-descriptions-item label="失效时间">{{ dataDetail?.expirationTime }}</a-descriptions-item>
+      <a-descriptions-item label="创建人">{{ dataDetail?.createUserString }}</a-descriptions-item>
+      <a-descriptions-item label="创建时间">{{ dataDetail?.createTime }}</a-descriptions-item>
+      <a-descriptions-item label="修改人">{{ dataDetail?.updateUserString }}</a-descriptions-item>
+      <a-descriptions-item label="修改时间">{{ dataDetail?.updateTime }}</a-descriptions-item>
+      <a-descriptions-item label="应用描述">{{ dataDetail?.appDesc }}</a-descriptions-item>
+    </a-descriptions>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { useWindowSize } from '@vueuse/core'
+import { type AppDetailResp, getApp } from '@/apis/open/app'
+import { useDict } from '@/hooks/app'
+
+const { app_type } = useDict('app_type')
+const { width } = useWindowSize()
+
+const visible = ref(false)
+const dataId = ref('')
+const dataDetail = ref<AppDetailResp>()
+// 查询详情
+const getDataDetail = async () => {
+  const res = await getApp(dataId.value)
+  dataDetail.value = res.data
+}
+
+// 打开详情
+const onDetail = async (id: string) => {
+  dataId.value = id
+  await getDataDetail()
+  visible.value = true
+}
+
+defineExpose({ onDetail })
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/open/app/AppGetSecretModal.vue b/src/views/open/app/AppGetSecretModal.vue
new file mode 100644
index 0000000..4c28a9b
--- /dev/null
+++ b/src/views/open/app/AppGetSecretModal.vue
@@ -0,0 +1,60 @@
+<template>
+  <a-modal
+      v-model:visible="visible"
+      title="应用密钥/密码信息"
+      :mask-closable="false"
+      :esc-to-close="false"
+      :modal-style="{ maxWidth: '520px' }"
+      width="90%"
+  >
+    <a-watermark :content="content" :gap="[10, 10]">
+      <div style="width: 100%; height: 150px;" >
+        <a-alert type="warning" style="margin-bottom: 18px">应用密码仅可查看一次，请妥善保管，遗失请刷新。</a-alert>
+        <a-descriptions :data="data" :column="1" bordered/>
+      </div>
+    </a-watermark>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import type { DescData } from '@arco-design/web-vue'
+import dayjs from 'dayjs'
+import { getAppSecret } from '@/apis/open/app'
+import { useUserStore } from '@/stores'
+
+const dataId = ref('')
+const initData = [{
+  label: '应用密钥（appkey）',
+  value: '*********'
+}, {
+  label: '应用密码（appsecret）',
+  value: '*********'
+}]
+const userStore = useUserStore()
+const content = ref([userStore.userInfo.username, dayjs().format('YYYY-MM-DD HH:mm:ss')])
+
+let data = reactive<DescData[]>(initData)
+
+const visible = ref(false)
+
+const getAppSecretData = async (id: string) => {
+  await getAppSecret(id).then((res) => {
+    data = [{
+      label: '应用密钥（appkey）',
+      value: res.data.appKey
+    }, {
+      label: '应用密码（appsecret）',
+      value: res.data.appSecret
+    }]
+  })
+}
+
+// 查看应用密钥/密码
+const onGetSecret = async (id: string) => {
+  dataId.value = ''
+  await getAppSecretData(id)
+  visible.value = true
+}
+
+defineExpose({ onGetSecret })
+</script>
diff --git a/src/views/open/app/index.vue b/src/views/open/app/index.vue
new file mode 100644
index 0000000..8514dc9
--- /dev/null
+++ b/src/views/open/app/index.vue
@@ -0,0 +1,169 @@
+<template>
+  <div class="table-page">
+    <GiTable
+        row-key="id"
+        title="应用管理"
+        :data="dataList"
+        :columns="columns"
+        :loading="loading"
+        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
+        :pagination="pagination"
+        :disabled-tools="['size']"
+        :disabled-column-keys="['name']"
+        @refresh="search"
+    >
+      <template #toolbar-left>
+        <a-input v-model="queryForm.name" placeholder="请输入应用名称" allow-clear @change="search">
+          <template #prefix><icon-search /></template>
+        </a-input>
+        <a-input v-model="queryForm.appKey" placeholder="请输入APPKEY" allow-clear @change="search">
+          <template #prefix><icon-search /></template>
+        </a-input>
+        <a-button @click="reset">
+          <template #icon><icon-refresh /></template>
+          <template #default>重置</template>
+        </a-button>
+      </template>
+      <template #toolbar-right>
+        <a-button v-permission="['open:app:add']" type="primary" @click="onAdd">
+          <template #icon><icon-plus /></template>
+          <template #default>新增</template>
+        </a-button>
+        <a-button v-permission="['open:app:export']" @click="onExport">
+          <template #icon><icon-download /></template>
+          <template #default>导出</template>
+        </a-button>
+      </template>
+      <template #name="{ record }">
+        <a-link @click="onDetail(record)">{{ record.name }}</a-link>
+      </template>
+      <template #appSecret="{ record }">
+        *********
+        <a-button size="mini" style="margin-left: 10px" @click="onGetSecret(record)">
+          <template #icon><icon-eye /></template>
+        </a-button>
+        <a-button size="mini" style="margin-left: 2px" @click="onRefreshAK(record)">
+          <template #icon><icon-refresh /></template>
+        </a-button>
+      </template>
+      <template #status="{ record }">
+        <GiCellTag :value="record.status" :dict="app_type" />
+      </template>
+      <template #action="{ record }">
+        <a-space>
+          <a-link v-permission="['open:app:update']" @click="onUpdate(record)">修改</a-link>
+          <a-link
+              v-permission="['open:app:delete']"
+              status="danger"
+              :disabled="record.disabled"
+              @click="onDelete(record)"
+          >
+            删除
+          </a-link>
+        </a-space>
+      </template>
+    </GiTable>
+    <AppAddModal ref="AppAddModalRef" @save-success="search" />
+    <AppDetailDrawer ref="AppDetailDrawerRef" />
+    <AppGetSecretModal ref="AppGetSecretModalRef" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Message } from '@arco-design/web-vue'
+import AppAddModal from './AppAddModal.vue'
+import AppDetailDrawer from './AppDetailDrawer.vue'
+import AppGetSecretModal from './AppGetSecretModal.vue'
+import { type AppResp, type AppQuery, deleteApp, exportApp, listApp, refreshAppSecret } from '@/apis/open/app'
+import type { TableInstanceColumns } from '@/components/GiTable/type'
+import { useDownload, useTable } from '@/hooks'
+import { isMobile } from '@/utils'
+import has from '@/utils/has'
+import { useDict } from '@/hooks/app'
+
+defineOptions({ name: 'App' })
+
+const { app_type } = useDict('app_type')
+
+const queryForm = reactive<AppQuery>({
+  name: '',
+  appKey: '',
+  sort: ['createTime,desc']
+})
+
+const {
+  tableData: dataList,
+  loading,
+  pagination,
+  search,
+  handleDelete
+} = useTable((page) => listApp({ ...queryForm, ...page }), { immediate: true })
+
+const columns: TableInstanceColumns[] = [
+  { title: '应用名称', dataIndex: 'name', slotName: 'name' },
+  { title: '应用密钥', dataIndex: 'appKey', slotName: 'appKey' },
+  { title: '应用密码', dataIndex: 'appSecret', slotName: 'appSecret' },
+  { title: '应用状态', dataIndex: 'status', slotName: 'status' },
+  { title: '失效时间', dataIndex: 'expirationTime', slotName: 'expirationTime' },
+  {
+    title: '操作',
+    slotName: 'action',
+    width: 130,
+    align: 'center',
+    fixed: !isMobile() ? 'right' : undefined,
+    show: has.hasPermOr(['open:app:update', 'open:app:delete'])
+  }
+]
+
+// 重置
+const reset = () => {
+  queryForm.name = ''
+  queryForm.appKey = ''
+  search()
+}
+
+// 删除
+const onDelete = (record: AppResp) => {
+  return handleDelete(() => deleteApp(record.id), {
+    content: `是否确定删除该条数据？`,
+    showModal: true
+  })
+}
+
+// 导出
+const onExport = () => {
+  useDownload(() => exportApp(queryForm))
+}
+
+const AppAddModalRef = ref<InstanceType<typeof AppAddModal>>()
+// 新增
+const onAdd = () => {
+  AppAddModalRef.value?.onAdd()
+}
+
+// 修改
+const onUpdate = (record: AppResp) => {
+  AppAddModalRef.value?.onUpdate(record.id)
+}
+
+const AppDetailDrawerRef = ref<InstanceType<typeof AppDetailDrawer>>()
+// 详情
+const onDetail = (record: AppResp) => {
+  AppDetailDrawerRef.value?.onDetail(record.id)
+}
+
+// 查看应用密钥/密码
+const AppGetSecretModalRef = ref<InstanceType<typeof AppGetSecretModal>>()
+const onGetSecret = (record: AppResp) => {
+  AppGetSecretModalRef.value?.onGetSecret(record.id)
+}
+
+// 刷新应用密码
+const onRefreshAK = async (record: AppResp) => {
+  await refreshAppSecret(record.id)
+  Message.success('刷新成功')
+  search()
+}
+</script>
+
+<style lang="scss" scoped></style>
-- 
Gitee