chore: update `@pureadmin/descriptions`

package.json

@@ -31,7 +31,7 @@
     "@logicflow/core": "^1.1.16",
     "@logicflow/extension": "^1.1.16",
     "@pureadmin/components": "^1.0.6",
-    "@pureadmin/descriptions": "^1.0.0",
+    "@pureadmin/descriptions": "^1.1.0",
     "@pureadmin/table": "^0.0.1",
     "@vueuse/core": "^8.7.4",
     "@vueuse/motion": "^2.0.0-beta.12",

pnpm-lock.yaml

@@ -19,7 +19,7 @@ specifiers:
   "@logicflow/core": ^1.1.16
   "@logicflow/extension": ^1.1.16
   "@pureadmin/components": ^1.0.6
-  "@pureadmin/descriptions": ^1.0.0
+  "@pureadmin/descriptions": ^1.1.0
   "@pureadmin/table": ^0.0.1
   "@pureadmin/theme": ^2.4.0
   "@types/element-resize-detector": 1.1.3
@@ -124,7 +124,7 @@ dependencies:
   "@logicflow/core": 1.1.16
   "@logicflow/extension": 1.1.16
   "@pureadmin/components": 1.0.6_vue@3.2.37
-  "@pureadmin/descriptions": 1.0.0
+  "@pureadmin/descriptions": 1.1.0
   "@pureadmin/table": 0.0.1
   "@vueuse/core": 8.7.4_vue@3.2.37
   "@vueuse/motion": 2.0.0-beta.12_vue@3.2.37
@@ -1353,10 +1353,10 @@ packages:
       vue: 3.2.37
     dev: false
 
-  /@pureadmin/descriptions/1.0.0:
+  /@pureadmin/descriptions/1.1.0:
     resolution:
       {
-        integrity: sha512-fr+YLrxlmwiXTAVIKPqJbWQsRt3rqeUUz17d1BuH2Fzz8iSCd+hI4BoE1Z/bivzzoXVBC9wxBmWBSlN0n1YFAw==
+        integrity: sha512-Bi6lasPjc8P61kMcCXZjCd9ne99rj+whwUJ1ulKQX7JFupBhjo71Vu0TV5I7oEN52lZuvV1+F0EhJlEoIHpGFQ==
       }
     dependencies:
       "@element-plus/icons-vue": 2.0.6_vue@3.2.37

src/views/about/columns.tsx

@@ -0,0 +1,67 @@
+export function useColumns() {
+  const { pkg, lastBuildTime } = __APP_INFO__;
+  const { version } = pkg;
+  const columns = [
+    {
+      label: "版本",
+      cellRenderer: () => {
+        return <el-tag size="small">{version}</el-tag>;
+      }
+    },
+    {
+      label: "最后编译时间",
+      cellRenderer: () => {
+        return <el-tag size="small">{lastBuildTime}</el-tag>;
+      }
+    },
+    {
+      label: "文档地址",
+      cellRenderer: () => {
+        return (
+          <a href="https://pure-admin-doc.vercel.app" target="_blank">
+            <span style="color: var(--el-color-primary)">文档地址</span>
+          </a>
+        );
+      }
+    },
+    {
+      label: "预览地址",
+      cellRenderer: () => {
+        return (
+          <a href="https://vue-pure-admin.vercel.app" target="_blank">
+            <span style="color: var(--el-color-primary)">预览地址</span>
+          </a>
+        );
+      }
+    },
+    {
+      label: "Github",
+      cellRenderer: () => {
+        return (
+          <a
+            href="https://github.com/xiaoxian521/vue-pure-admin"
+            target="_blank"
+          >
+            <span style="color: var(--el-color-primary)">Github</span>
+          </a>
+        );
+      }
+    },
+    {
+      label: "QQ交流群",
+      cellRenderer: () => {
+        return (
+          <a href="https://jq.qq.com/?_wv=1027&k=HntMx0dt" target="_blank">
+            <span style="color: var(--el-color-primary)">
+              点击链接加入群聊【Pure Admin】
+            </span>
+          </a>
+        );
+      }
+    }
+  ];
+
+  return {
+    columns
+  };
+}

src/views/about/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useColumns } from "./columns";
 export interface schemaItem {
   field: string;
   label: string;
@@ -8,12 +9,14 @@ defineOptions({
   name: "About"
 });
 
-const { pkg, lastBuildTime } = __APP_INFO__;
-const { dependencies, devDependencies, version } = pkg;
+const { pkg } = __APP_INFO__;
+const { dependencies, devDependencies } = pkg;
 
 const schema: schemaItem[] = [];
 const devSchema: schemaItem[] = [];
 
+const { columns } = useColumns();
+
 Object.keys(dependencies).forEach(key => {
   schema.push({ field: dependencies[key], label: key });
 });
@@ -43,43 +46,7 @@ Object.keys(devDependencies).forEach(key => {
           <span class="font-medium">项目信息</span>
         </div>
       </template>
-      <el-descriptions :column="2" border>
-        <el-descriptions-item label="版本" label-align="left" align="left">
-          <el-tag>{{ version }}</el-tag>
-        </el-descriptions-item>
-        <el-descriptions-item
-          label="最后编译时间"
-          label-align="left"
-          align="left"
-        >
-          <el-tag>{{ lastBuildTime }}</el-tag>
-        </el-descriptions-item>
-        <el-descriptions-item label="文档地址" label-align="left" align="left">
-          <a href="https://pure-admin-doc.vercel.app" target="_blank">
-            <span style="color: var(--el-color-primary)">文档地址</span>
-          </a>
-        </el-descriptions-item>
-        <el-descriptions-item label="预览地址" label-align="left" align="left">
-          <a href="https://vue-pure-admin.vercel.app" target="_blank">
-            <span style="color: var(--el-color-primary)">预览地址</span>
-          </a>
-        </el-descriptions-item>
-        <el-descriptions-item label="Github" label-align="left" align="left">
-          <a
-            href="https://github.com/xiaoxian521/vue-pure-admin"
-            target="_blank"
-          >
-            <span style="color: var(--el-color-primary)">Github</span>
-          </a>
-        </el-descriptions-item>
-        <el-descriptions-item label="QQ交流群" label-align="left" align="left">
-          <a href="https://jq.qq.com/?_wv=1027&k=HntMx0dt" target="_blank">
-            <span style="color: var(--el-color-primary)">
-              点击链接加入群聊【Pure Admin】
-            </span>
-          </a>
-        </el-descriptions-item>
-      </el-descriptions>
+      <PureDescriptions :columns="columns" border :column="3" align="left" />
     </el-card>
 
     <el-card class="box-card m-4" shadow="hover">

src/views/result/columns.tsx

@@ -0,0 +1,66 @@
+import { IconifyIconOffline } from "/@/components/ReIcon";
+
+export function useColumns() {
+  const columns = [
+    {
+      cellRenderer: () => {
+        return (
+          <span class="flex items-center -mt-6">
+            <IconifyIconOffline
+              icon="close-circle-line"
+              color="#F56C6C"
+              width="18px"
+              height="18px"
+            />
+            <span class="ml-1 mr-4">您的账户已被冻结</span>
+            <a
+              href="javascript:void(0);"
+              class="flex items-center"
+              style="color: var(--el-color-primary)"
+            >
+              立即解冻
+              <IconifyIconOffline
+                icon="arrow-right-s-line"
+                color="var(--el-color-primary)"
+                width="18px"
+                height="18px"
+              />
+            </a>
+          </span>
+        );
+      }
+    },
+    {
+      cellRenderer: () => {
+        return (
+          <span class="flex items-center -mt-8">
+            <IconifyIconOffline
+              icon="close-circle-line"
+              color="#F56C6C"
+              width="18px"
+              height="18px"
+            />
+            <span class="ml-1 mr-4">您的账户还不具备申请资格</span>
+            <a
+              href="javascript:void(0);"
+              class="flex items-center"
+              style="color: var(--el-color-primary)"
+            >
+              立即升级
+              <IconifyIconOffline
+                icon="arrow-right-s-line"
+                color="var(--el-color-primary)"
+                width="18px"
+                height="18px"
+              />
+            </a>
+          </span>
+        );
+      }
+    }
+  ];
+
+  return {
+    columns
+  };
+}

src/views/result/fail.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import { useColumns } from "./columns";
 defineOptions({
   name: "Fail"
 });
+
+const { columns } = useColumns();
 </script>
 
 <template>
@@ -20,61 +23,12 @@ defineOptions({
         <el-button type="primary">返回修改</el-button>
       </template>
     </el-result>
-    <el-descriptions
-      :column="1"
+    <PureDescriptions
+      :columns="columns"
       title="您提交的内容有如下错误："
       style="background: rgb(250, 250, 250)"
       class="p-6 ml-10 mr-10"
-    >
-      <el-descriptions-item>
-        <span class="flex items-center -mt-6">
-          <IconifyIconOffline
-            icon="close-circle-line"
-            color="#F56C6C"
-            width="18px"
-            height="18px"
-          />
-          <span class="ml-1 mr-4">您的账户已被冻结</span>
-          <a
-            href="javascript:void(0);"
-            class="flex items-center"
-            style="color: var(--el-color-primary)"
-          >
-            立即解冻
-            <IconifyIconOffline
-              icon="arrow-right-s-line"
-              color="var(--el-color-primary)"
-              width="18px"
-              height="18px"
-            />
-          </a>
-        </span>
-      </el-descriptions-item>
-      <el-descriptions-item>
-        <span class="flex items-center -mt-8">
-          <IconifyIconOffline
-            icon="close-circle-line"
-            color="#F56C6C"
-            width="18px"
-            height="18px"
-          />
-          <span class="ml-1 mr-4">您的账户还不具备申请资格</span>
-          <a
-            href="javascript:void(0);"
-            class="flex items-center"
-            style="color: var(--el-color-primary)"
-          >
-            立即升级
-            <IconifyIconOffline
-              icon="arrow-right-s-line"
-              color="var(--el-color-primary)"
-              width="18px"
-              height="18px"
-            />
-          </a>
-        </span>
-      </el-descriptions-item>
-    </el-descriptions>
+    />
   </el-card>
 </template>
 

src/views/welcome/components/Github.vue

@@ -1,87 +1,31 @@
 <script setup lang="ts">
-import { ref } from "vue";
-const lists = ref([
-  { type: "", label: "善良" },
-  { type: "success", label: "好学" },
-  { type: "info", label: "幽默" },
-  { type: "danger", label: "旅游" },
-  { type: "warning", label: "追剧" }
-]);
+import { useColumns } from "./columns";
+const { columnsA, columnsB, columnsC } = useColumns();
+
+const list = [
+  {
+    columns: columnsA,
+    column: 3
+  },
+  {
+    columns: columnsB,
+    column: 2
+  },
+  {
+    columns: columnsC,
+    column: 1
+  }
+];
 </script>
 
 <template>
-  <el-descriptions class="margin-top" direction="vertical" :column="3" border>
-    <el-descriptions-item>
-      <template #label>
-        <el-icon>
-          <IconifyIconOffline icon="user" />
-        </el-icon>
-        用户名
-      </template>
-      xiaoxian
-    </el-descriptions-item>
-    <el-descriptions-item>
-      <template #label>
-        <el-icon>
-          <IconifyIconOffline icon="iphone" />
-        </el-icon>
-        手机号
-      </template>
-      123456789
-    </el-descriptions-item>
-    <el-descriptions-item>
-      <template #label>
-        <el-icon>
-          <IconifyIconOffline icon="location" />
-        </el-icon>
-        居住地
-      </template>
-      上海
-    </el-descriptions-item>
-  </el-descriptions>
-  <el-descriptions class="margin-top" direction="vertical" :column="2" border>
-    <el-descriptions-item>
-      <template #label>
-        <el-icon>
-          <IconifyIconOffline icon="tickets" />
-        </el-icon>
-        标签
-      </template>
-      <el-tag
-        v-for="item in lists"
-        :key="item.label"
-        :type="item.type"
-        size="small"
-        effect="dark"
-      >
-        {{ item.label }}
-      </el-tag>
-    </el-descriptions-item>
-    <el-descriptions-item>
-      <template #label>
-        <el-icon>
-          <IconifyIconOffline icon="office-building" />
-        </el-icon>
-        联系地址
-      </template>
-      上海市徐汇区
-    </el-descriptions-item>
-  </el-descriptions>
-  <el-descriptions class="margin-top" direction="vertical" :column="1" border>
-    <el-descriptions-item>
-      <template #label>
-        <el-icon>
-          <IconifyIconOffline icon="notebook" />
-        </el-icon>
-        留言
-      </template>
-      好好学习，天天向上
-    </el-descriptions-item>
-  </el-descriptions>
+  <PureDescriptions
+    v-for="(item, index) in list"
+    :key="index"
+    :columns="item.columns"
+    :column="item.column"
+    class="margin-top"
+    direction="vertical"
+    border
+  />
 </template>
-
-<style scoped>
-.el-tag {
-  margin-right: 10px !important;
-}
-</style>

src/views/welcome/components/columns.tsx

@@ -0,0 +1,100 @@
+import { IconifyIconOffline } from "/@/components/ReIcon";
+
+export function useColumns() {
+  const lists = [
+    { type: "", label: "善良" },
+    { type: "success", label: "好学" },
+    { type: "info", label: "幽默" },
+    { type: "danger", label: "旅游" },
+    { type: "warning", label: "追剧" }
+  ];
+
+  const columnsA = [
+    {
+      labelRenderer: () => (
+        <div class="flex items-center">
+          <el-icon>
+            <IconifyIconOffline icon="user" />
+          </el-icon>
+          用户名
+        </div>
+      ),
+      value: "xiaoxian"
+    },
+    {
+      labelRenderer: () => (
+        <div class="flex items-center">
+          <el-icon>
+            <IconifyIconOffline icon="iphone" />
+          </el-icon>
+          手机号
+        </div>
+      ),
+      value: "123456789"
+    },
+    {
+      labelRenderer: () => (
+        <div class="flex items-center">
+          <el-icon>
+            <IconifyIconOffline icon="location" />
+          </el-icon>
+          居住地
+        </div>
+      ),
+      value: "上海"
+    }
+  ];
+
+  const columnsB = [
+    {
+      labelRenderer: () => (
+        <div class="flex items-center">
+          <el-icon>
+            <IconifyIconOffline icon="tickets" />
+          </el-icon>
+          标签
+        </div>
+      ),
+      cellRenderer: () => {
+        return lists.map(v => {
+          return (
+            <el-tag class="mr-10px" type={v.type} size="small" effect="dark">
+              {v.label}
+            </el-tag>
+          );
+        });
+      }
+    },
+    {
+      labelRenderer: () => (
+        <div class="flex items-center">
+          <el-icon>
+            <IconifyIconOffline icon="office-building" />
+          </el-icon>
+          联系地址
+        </div>
+      ),
+      value: "上海市徐汇区"
+    }
+  ];
+
+  const columnsC = [
+    {
+      labelRenderer: () => (
+        <div class="flex items-center">
+          <el-icon>
+            <IconifyIconOffline icon="notebook" />
+          </el-icon>
+          好好学习，天天向上
+        </div>
+      ),
+      value: "上海市徐汇区"
+    }
+  ];
+
+  return {
+    columnsA,
+    columnsB,
+    columnsC
+  };
+}