diff --git a/z_ele/src/api/system/composer/model/index.ts b/z_ele/src/api/system/composer/model/index.ts
index 902ae70..92bebae 100644
--- a/z_ele/src/api/system/composer/model/index.ts
+++ b/z_ele/src/api/system/composer/model/index.ts
@@ -1,7 +1,8 @@
 import type { PageParam } from '@/api';
 
 export interface Composer {
-  packages: any;
+  packages: Array<any>;
+  'packages-dev': Array<any>;
 }
 
 export interface ComposerParam extends PageParam {}
diff --git a/z_ele/src/views/system/composer/package/components/package-details.vue b/z_ele/src/views/system/composer/package/components/package-details.vue
new file mode 100644
index 0000000..9a3f693
--- /dev/null
+++ b/z_ele/src/views/system/composer/package/components/package-details.vue
@@ -0,0 +1,87 @@
+<!-- 角色编辑弹窗 -->
+<template>
+  <ele-modal
+    form
+    destroy-on-close
+    v-model="visible"
+    title="PHP Composer Package."
+  >
+    <el-descriptions
+      :border="true"
+      :column="mobile ? 1 : 2"
+      class="detail-table"
+    >
+      <el-descriptions-item label="包名称">
+        <div>
+          <el-tag type="success">{{ data.type }}</el-tag>
+          <el-tag style="margin-left: 5px" v-if="data.dev" type="warning"
+            >Dev</el-tag
+          >
+          {{ data.name }}
+        </div>
+      </el-descriptions-item>
+      <el-descriptions-item label="版本号">
+        <div>{{ data.version }}</div>
+      </el-descriptions-item>
+      <el-descriptions-item label="关键字">
+        <div>
+          <el-tag
+            v-for="name in data.keywords"
+            :key="name"
+            size="small"
+            :disable-transitions="true"
+            style="margin-right: 5px"
+          >
+            {{ name }}
+          </el-tag>
+        </div>
+      </el-descriptions-item>
+      <el-descriptions-item label="发布时间">
+        <div>{{ data.time }}</div>
+      </el-descriptions-item>
+      <el-descriptions-item label="简介" :span="2">
+        <div>{{ data.description }}</div>
+      </el-descriptions-item>
+      <el-descriptions-item label="版权" :span="2">
+        <ele-data-table
+          row-key="name"
+          :columns="columns"
+          :data="data.authors"
+        />
+      </el-descriptions-item>
+    </el-descriptions>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { useMobile } from '@/utils/use-mobile';
+  import { ref } from 'vue';
+  import type { Columns } from 'ele-admin-plus/es/ele-pro-table/types';
+
+  defineProps<{
+    /** 修改回显的数据 */
+    data: any;
+  }>();
+
+  const { mobile } = useMobile();
+  /** 表格列配置 */
+  const columns = ref<Columns>([
+    {
+      type: 'index',
+      columnKey: 'index',
+      width: 50,
+      align: 'center'
+    },
+    {
+      prop: 'name',
+      label: '作者'
+    },
+    {
+      prop: 'homepage',
+      label: '作者主页'
+    }
+  ]);
+
+  /** 弹窗是否打开 */
+  const visible = defineModel({ type: Boolean });
+</script>
diff --git a/z_ele/src/views/system/composer/package/index.vue b/z_ele/src/views/system/composer/package/index.vue
index 9fb4e3d..26c460a 100644
--- a/z_ele/src/views/system/composer/package/index.vue
+++ b/z_ele/src/views/system/composer/package/index.vue
@@ -1,5 +1,24 @@
 <template>
   <ele-page>
+    <ele-card>
+      <div
+        style="
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        "
+      >
+        <el-tag>Hash: {{ info['content-hash'] }}</el-tag>
+
+        <el-tag
+          class="hidden-sm-and-down"
+          type="success"
+          effect="dark"
+          style="float: right"
+          >插件接口版本: {{ info['plugin-api-version'] }}</el-tag
+        >
+      </div>
+    </ele-card>
     <ele-card :body-style="{ paddingTop: '8px' }">
       <!-- 表格 -->
       <ele-pro-table
@@ -9,20 +28,49 @@
         :datasource="datasource"
         :show-overflow-tooltip="true"
         :highlight-current-row="true"
-        cache-key="systemRoleTable"
-      />
+        cache-key="systemComposerPackageTable"
+        :pagination="false"
+      >
+        <template #name="{ row }">
+          <el-tag type="success">{{ row.type }}</el-tag>
+          <el-tag style="margin-left: 5px" v-if="row.dev" type="warning"
+            >Dev</el-tag
+          >
+          {{ row.name }}
+        </template>
+        <template #keywords="{ row }">
+          <el-tag
+            v-for="name in row.keywords"
+            :key="name"
+            size="small"
+            :disable-transitions="true"
+            style="margin-right: 5px"
+          >
+            {{ name }}
+          </el-tag>
+        </template>
+        <template #action="{ row }">
+          <el-link type="primary" underline="never" @click="openDetails(row)">
+            详情
+          </el-link>
+        </template>
+      </ele-pro-table>
     </ele-card>
+
+    <!-- 包详情弹窗 -->
+    <package-details v-model="showDetails" :data="current" />
   </ele-page>
 </template>
 
 <script lang="ts" setup>
   import { ref } from 'vue';
-  import type { EleProTable } from 'ele-admin-plus';
+  import { EleProTable, LayoutTool } from 'ele-admin-plus';
   import type {
     DatasourceFunction,
     Columns
   } from 'ele-admin-plus/es/ele-pro-table/types';
   import { composerInfo } from '@/api/system/composer';
+  import PackageDetails from './components/package-details.vue';
 
   defineOptions({ name: 'SystemComposerPackage' });
 
@@ -31,12 +79,6 @@
 
   /** 表格列配置 */
   const columns = ref<Columns>([
-    {
-      type: 'selection',
-      columnKey: 'selection',
-      width: 50,
-      align: 'center'
-    },
     {
       type: 'index',
       columnKey: 'index',
@@ -44,34 +86,38 @@
       align: 'center'
     },
     {
-      prop: 'roleName',
-      label: '角色名称',
+      prop: 'name',
+      label: '包名称',
       sortable: 'custom',
+      slot: 'name',
+      minWidth: 70
+    },
+    {
+      prop: 'version',
+      label: '版本号',
+      width: 120
+    },
+    {
+      prop: 'description',
+      label: '简介',
+      minWidth: 160
+    },
+    {
+      prop: 'keywords',
+      label: '标签',
+      slot: 'keywords',
       minWidth: 120
     },
     {
-      prop: 'roleCode',
-      label: '角色标识',
-      sortable: 'custom',
-      minWidth: 120
-    },
-    {
-      prop: 'comments',
-      label: '备注',
-      sortable: 'custom',
-      minWidth: 140
-    },
-    {
-      prop: 'createTime',
-      label: '创建时间',
-      sortable: 'custom',
-      width: 180,
+      prop: 'time',
+      label: '发布时间',
+      width: 230,
       align: 'center'
     },
     {
       columnKey: 'action',
       label: '操作',
-      width: 200,
+      width: 100,
       align: 'center' /* ,
       fixed: 'right' */,
       slot: 'action',
@@ -84,7 +130,22 @@
   const datasource: DatasourceFunction = ({ pages, where, orders }) => {
     return composerInfo({ ...where, ...orders, ...pages }).then((data: any) => {
       info.value = data;
-      return data.packages;
+      return data.packages.concat(
+        data['packages-dev'].map((d: any) => {
+          d.dev = true;
+          return d;
+        })
+      );
     });
   };
+
+  /** 当前编辑数据 */
+  const current = ref<Role | null>(null);
+
+  /** 是否显示编辑弹窗 */
+  const showDetails = ref(false);
+  const openDetails = (row: any) => {
+    current.value = row;
+    showDetails.value = true;
+  };
 </script>