create-jnrs-vue 2.0.2 → 2.0.3

package/jnrs-vue/src/views/examples/playground/RequestPage.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { downloadFile } from '@/utils'
 import { LoginApi } from '@/api/system'
-import { NotFoundApi, NoAuthApi, NoNeedAuthApi, FailApi } from '@/api/examples/project-management'
+import { NotFoundApi, NoAuthApi, NoNeedAuthApi, FailApi } from '@/api/examples/playground'
 import { getFileUrl } from '@/utils/file'
 
 import ImageView from '@/components/common/ImageView.vue'
@@ -76,47 +76,106 @@ const handleFileView = async () => {
 </script>
 
 <template>
-  <p>网络请求测试</p>
-  <el-button-group>
-    <el-button type="primary" size="small" @click="handleNotFound">接口返回404</el-button>
-    <el-button type="primary" size="small" @click="handleNoAuth()">接口返回暂无权限</el-button>
-    <el-button type="primary" size="small" @click="handleNoAuth(false)">接口返回暂无权限(不显示 Message)</el-button>
-    <el-button type="primary" size="small" @click="handleNoNeedAuth()">接口不需要权限</el-button>
-    <el-button type="primary" size="small" @click="handleFail()">接口请求失败</el-button>
-  </el-button-group>
-  <el-input v-model="loginParams.account" size="small" style="width: 200px">
-    <template #append>
-      <el-button size="small" @click="handleLogin">验证登录接口</el-button>
-    </template>
-  </el-input>
-  <div>
-    <el-button-group>
-      <el-button type="primary" plain size="small" @click="downloadFile('mock-pdf.pdf')">
-        获取后端服务器文件进行下载
-      </el-button>
-    </el-button-group>
-    <div>
-      <span>通过 ImageView 组件显示的图片（可支持预览）</span>
-      <ImageView
-        loadKeys="mock-png-1.png"
-        preview
-        style="width: 300px; height: 50px; border: 1px solid var(--jnrs-color-primary)"
-      />
+  <section class="playground-section">
+    <h2 class="section-title">网络请求</h2>
+
+    <div class="test-group">
+      <h3 class="group-title">HTTP 状态码</h3>
+      <div class="btn-row">
+        <el-button type="primary" size="small" @click="handleNotFound">404</el-button>
+        <el-button type="warning" size="small" @click="handleNoAuth()">暂无权限</el-button>
+        <el-button type="warning" size="small" @click="handleNoAuth(false)">暂无权限（静默）</el-button>
+        <el-button type="success" size="small" @click="handleNoNeedAuth()">无需权限</el-button>
+        <el-button type="danger" size="small" @click="handleFail()">请求失败</el-button>
+      </div>
     </div>
-    <div>
-      <el-button type="primary" plain size="small" @click="handleFileView">获取后端服务器图片</el-button>
-      <el-avatar shape="circle" :src="squareUrl" />
+
+    <div class="test-group">
+      <h3 class="group-title">登录接口</h3>
+      <div class="login-row">
+        <el-input v-model="loginParams.account" size="small" style="width: 200px" placeholder="账号">
+          <template #append>
+            <el-button size="small" @click="handleLogin">验证登录</el-button>
+          </template>
+        </el-input>
+      </div>
     </div>
-  </div>
+
+    <div class="test-group">
+      <h3 class="group-title">文件操作</h3>
+      <div class="file-section">
+        <div class="file-row">
+          <el-button type="primary" plain size="small" @click="downloadFile('mock-pdf.pdf')">下载文件</el-button>
+        </div>
+        <div class="file-row">
+          <span class="file-label">ImageView 组件（支持预览）</span>
+          <ImageView
+            loadKeys="mock-png-1.png"
+            preview
+            style="width: 300px; height: 50px; border: 1px solid var(--jnrs-color-primary)"
+          />
+        </div>
+        <div class="file-row">
+          <el-button type="primary" plain size="small" @click="handleFileView">获取图片</el-button>
+          <el-avatar v-if="squareUrl" shape="circle" :src="squareUrl" />
+        </div>
+      </div>
+    </div>
+  </section>
 </template>
 
 <style scoped lang="scss">
-h3 {
-  color: var(--jnrs-color-primary);
+.playground-section {
+  margin-bottom: 36px;
+  padding-top: 28px;
+  border-top: 1px solid var(--jnrs-card-primary-03, #e8e8e8);
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--jnrs-font-primary);
+  margin: 0 0 16px;
+}
+
+.test-group {
+  margin-bottom: 20px;
+}
+
+.group-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--jnrs-font-primary-03, #999);
+  margin: 0 0 10px;
 }
-p {
-  margin: 24px 0 8px;
-  color: var(--jnrs-background-primary);
-  background: var(--jnrs-font-primary);
+
+.btn-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.login-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.file-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.file-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.file-label {
+  font-size: 13px;
+  color: var(--jnrs-font-primary-03, #999);
 }
-</style>
+</style>

package/jnrs-vue/src/views/examples/playground/index.vue

@@ -38,12 +38,6 @@ const handleRouterSystemMine = () => {
       id: 1
     }
   })
-  // handleRouter({
-  //   path: '/system/mine/index',
-  //   query: {
-  //     id: 1
-  //   }
-  // })
 }
 
 const changeI18n = () => {
@@ -63,69 +57,215 @@ onMounted(() => {
 </script>
 
 <template>
-  <div>
-    <h3>Playground - 功能测试</h3>
-    <p>国际化测试</p>
-    <div>@jnrs/shared: {{ datetime }}</div>
-    <div>@jnrs/shared/validator: {{ validator }}</div>
-    <div>@jnrs/shared/request: {{ testI18nInCore }}</div>
-    <el-button type="primary" size="small" @click="changeI18n">切换语言后点击按钮更新国际化显示</el-button>
-    <p>权限测试（admin 账号拥有全部权限，请用非 admin 账号测试该功能）</p>
-    <ul>
-      <li>
-        <span>有权限：(期望：正常显示按钮)</span>
-        <el-button type="primary" size="small" v-permissions="['mine:view']">添加</el-button>
-      </li>
-      <li>
-        <span>无权限：(期望：按钮禁用 -> UI 组件：使用 UI 框架提供的禁用属性)</span>
-        <el-button type="primary" size="small" :disabled="!hasPermission(['test:del'])">删除</el-button>
-      </li>
-      <li>
-        <span>无权限：(期望：按钮禁用 -> 原生元素：添加 disabled 属性和类名)</span>
-        <button size="small" v-permissions.disabled="['test:del']">删除</button>
-      </li>
-      <li>
-        <span>无权限：(期望：按钮不可见 -> 添加样式 display:none)</span>
-        <button size="small" v-permissions.display="['test:del']">删除</button>
-      </li>
-      <li>
-        <span>无权限：(期望：按钮不可见 -> remove HTMLElement)</span>
-        <button size="small" v-permissions="['test:del']">删除</button>
-      </li>
-    </ul>
-    <p>完整路由测试（先点击按钮，获取完整菜单数据）</p>
-    <el-button type="success" plain size="small" @click="handleRouterSystemMine">跳转到个人中心</el-button>
-    <el-button type="success" plain size="small" @click="handleMenuApi">获取完整菜单数据</el-button>
-    <el-cascader
-      v-model="currentRoute"
-      :options="routeOptions"
-      :props="{
-        emitPath: false,
-        value: 'name',
-        label: 'name'
-      }"
-      size="small"
-      :show-all-levels="false"
-      @change="handleRouteChange"
-    >
-      <template #default="{ data }">
-        <span>{{ data.meta.title }}</span>
-      </template>
-    </el-cascader>
-    <p>Element 组件测试</p>
-    <el-date-picker-panel v-model="datePicker" />
+  <div class="playground">
+    <header class="playground-header">
+      <h1 class="playground-title">Playground</h1>
+      <p class="playground-subtitle">功能测试与验证</p>
+    </header>
+
+    <!-- 国际化 -->
+    <section class="playground-section">
+      <h2 class="section-title">国际化</h2>
+      <div class="test-grid">
+        <div class="test-item">
+          <span class="test-label">@jnrs/shared</span>
+          <span class="test-value">{{ datetime }}</span>
+        </div>
+        <div class="test-item">
+          <span class="test-label">@jnrs/shared/validator</span>
+          <span class="test-value">{{ validator }}</span>
+        </div>
+        <div class="test-item">
+          <span class="test-label">@jnrs/shared/request</span>
+          <span class="test-value">{{ testI18nInCore }}</span>
+        </div>
+      </div>
+      <el-button type="primary" plain size="small" @click="changeI18n">切换语言后点击更新国际化显示</el-button>
+    </section>
+
+    <!-- 权限 -->
+    <section class="playground-section">
+      <h2 class="section-title">权限指令</h2>
+      <p class="section-note">admin 账号拥有全部权限，请用非 admin 账号测试</p>
+      <ul class="permission-list">
+        <li class="permission-item">
+          <span class="permission-label">有权限（v-permissions）</span>
+          <el-button type="primary" size="small" v-permissions="['mine:view']">添加</el-button>
+        </li>
+        <li class="permission-item">
+          <span class="permission-label">无权限（:disabled）</span>
+          <el-button type="primary" size="small" :disabled="!hasPermission(['test:del'])">删除</el-button>
+        </li>
+        <li class="permission-item">
+          <span class="permission-label">无权限（v-permissions.disabled）</span>
+          <button class="native-btn" size="small" v-permissions.disabled="['test:del']">删除</button>
+        </li>
+        <li class="permission-item">
+          <span class="permission-label">无权限（v-permissions.display）</span>
+          <button class="native-btn" size="small" v-permissions.display="['test:del']">删除</button>
+        </li>
+        <li class="permission-item">
+          <span class="permission-label">无权限（v-permissions remove）</span>
+          <button class="native-btn" size="small" v-permissions="['test:del']">删除</button>
+        </li>
+      </ul>
+    </section>
+
+    <!-- 路由 -->
+    <section class="playground-section">
+      <h2 class="section-title">路由跳转</h2>
+      <div class="route-actions">
+        <el-button type="success" plain size="small" @click="handleRouterSystemMine">跳转到个人中心</el-button>
+        <el-button type="success" plain size="small" @click="handleMenuApi">获取完整菜单数据</el-button>
+        <el-cascader
+          v-model="currentRoute"
+          :options="routeOptions"
+          :props="{
+            emitPath: false,
+            value: 'name',
+            label: 'name'
+          }"
+          size="small"
+          :show-all-levels="false"
+          @change="handleRouteChange"
+        >
+          <template #default="{ data }">
+            <span>{{ data.meta.title }}</span>
+          </template>
+        </el-cascader>
+      </div>
+    </section>
+
+    <!-- Element 组件 -->
+    <section class="playground-section">
+      <h2 class="section-title">Element 组件</h2>
+      <el-date-picker-panel v-model="datePicker" />
+    </section>
+
+    <!-- 网络请求 -->
     <RequestPage />
   </div>
   <router-view></router-view>
 </template>
 
 <style scoped lang="scss">
-h3 {
-  color: var(--jnrs-color-primary);
+.playground {
+  padding: 32px;
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+.playground-header {
+  margin-bottom: 40px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid var(--jnrs-card-primary-03, #e8e8e8);
+}
+
+.playground-title {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--jnrs-font-primary);
+  margin: 0 0 4px;
+  letter-spacing: -0.5px;
+}
+
+.playground-subtitle {
+  font-size: 14px;
+  color: var(--jnrs-font-primary-03, #999);
+  margin: 0;
+}
+
+.playground-section {
+  margin-bottom: 36px;
+
+  + .playground-section {
+    padding-top: 28px;
+    border-top: 1px solid var(--jnrs-card-primary-03, #e8e8e8);
+  }
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--jnrs-font-primary);
+  margin: 0 0 12px;
+}
+
+.section-note {
+  font-size: 12px;
+  color: var(--jnrs-color-warning, #e6a23c);
+  margin: 0 0 12px;
 }
-p {
-  margin: 24px 0 8px;
-  color: var(--jnrs-background-primary);
-  background: var(--jnrs-font-primary);
+
+.test-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.test-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 0;
+}
+
+.test-label {
+  font-size: 13px;
+  color: var(--jnrs-font-primary-03, #999);
+  min-width: 160px;
+  flex-shrink: 0;
+}
+
+.test-value {
+  font-size: 13px;
+  color: var(--jnrs-font-primary);
+  font-family: 'SF Mono', 'Menlo', monospace;
+}
+
+.permission-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.permission-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 0;
+}
+
+.permission-label {
+  font-size: 13px;
+  color: var(--jnrs-font-primary-03, #999);
+  min-width: 220px;
+  flex-shrink: 0;
+}
+
+.native-btn {
+  padding: 5px 12px;
+  font-size: 12px;
+  border: 1px solid var(--jnrs-color-primary);
+  border-radius: 4px;
+  background: var(--jnrs-color-primary);
+  color: #fff;
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.route-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
 }
 </style>

package/jnrs-vue/src/views/examples/portfolio-management/programList/editDialog.vue

@@ -26,6 +26,7 @@ const emit = defineEmits<{
 const loading = ref(false)
 const editDialogRef = ref()
 const ruleFormRef = ref<FormInstance>()
+const editingRow = ref<{ code?: number; name?: string } | null>(null)
 const ruleForm = ref<AddPortfolioProgram | UpdatePortfolioProgram>({
   id: undefined,
   portfolioId: undefined,
@@ -47,6 +48,7 @@ const rules = ref<FormRules>({
 })
 
 const open = (row?: PortfolioProgram, portfolioId?: number) => {
+  editingRow.value = row ? { code: row.code, name: row.name } : null
   editDialogRef.value.open()
   nextTick(() => {
     handleReset()
@@ -106,6 +108,14 @@ defineExpose({
 
 <template>
   <JnDialog ref="editDialogRef" title="项目集管理" width="600px">
+    <el-alert v-if="editingRow" type="warning" :closable="false" show-icon>
+      <template #title>
+        当前编辑：项目集编码
+        <strong>{{ editingRow.code }}</strong>
+        | 项目集名称
+        <strong>{{ editingRow.name }}</strong>
+      </template>
+    </el-alert>
     <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" v-loading="loading">
       <el-form-item prop="id"></el-form-item>
       <el-form-item label="项目集编码" prop="code">

package/jnrs-vue/src/views/examples/portfolio-management/programList/index.vue

@@ -212,7 +212,7 @@ onActivated(() => {
           <el-switch v-model="row.enable" @change="handleEnableChange(row)" />
         </template>
       </el-table-column>
-      <el-table-column label="操作" width="100" align="center" fixed="right">
+      <el-table-column label="操作" width="120" align="center" fixed="right">
         <template #default="{ row }">
           <el-button link type="primary" @click.stop="handleEdit(row)">编辑</el-button>
           <el-button link type="danger" @click.stop="handleDelete(row)">删除</el-button>

package/jnrs-vue/src/views/examples/portfolio-management/projectList/editDialog.vue

@@ -15,10 +15,10 @@ import { ref, nextTick } from 'vue'
 import { ElMessage } from 'element-plus'
 import { objectMatchAssign } from '@jnrs/shared'
 import { extractFieldId } from '@/utils'
-import { getDictList } from '@/utils'
 import { addPortfolioProjectApi, editPortfolioProjectApi } from '@/api/examples/portfolio-management/project'
 import { JnDialog } from '@jnrs/vue-core/components'
 import SelectManager from '@/components/select/SelectManager.vue'
+import DictSelector from '@/components/common/DictSelector.vue'
 
 const emit = defineEmits<{
   success: []
@@ -27,6 +27,7 @@ const emit = defineEmits<{
 const loading = ref(false)
 const editDialogRef = ref()
 const ruleFormRef = ref<FormInstance>()
+const editingRow = ref<{ code?: number; name?: string } | null>(null)
 const ruleForm = ref<AddPortfolioProject | UpdatePortfolioProject>({
   id: undefined,
   programId: undefined,
@@ -48,6 +49,7 @@ const rules = ref<FormRules>({
 })
 
 const open = (programId?: string, row?: PortfolioProject) => {
+  editingRow.value = row ? { code: row.code, name: row.name } : null
   editDialogRef.value.open()
   nextTick(() => {
     handleReset()
@@ -105,6 +107,14 @@ defineExpose({
 
 <template>
   <JnDialog ref="editDialogRef" title="项目管理" width="600px">
+    <el-alert v-if="editingRow" type="info" :closable="false" show-icon>
+      <template #title>
+        当前编辑：项目编码
+        <strong>{{ editingRow.code }}</strong>
+        | 项目名称
+        <strong>{{ editingRow.name }}</strong>
+      </template>
+    </el-alert>
     <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" v-loading="loading">
       <el-form-item prop="id"></el-form-item>
       <el-form-item label="项目编码" prop="code">
@@ -121,14 +131,7 @@ defineExpose({
         <el-input v-model.trim="ruleForm.name" maxlength="20" show-word-limit style="width: 100%" />
       </el-form-item>
       <el-form-item label="项目类型" prop="projectType">
-        <el-select v-model="ruleForm.projectType" filterable placeholder="">
-          <el-option
-            :label="item.label"
-            :value="item.value"
-            v-for="item in getDictList('projectType')"
-            :key="item.value"
-          />
-        </el-select>
+        <DictSelector v-model="ruleForm.projectType" dictName="projectType" />
       </el-form-item>
       <el-form-item label="项目经理" prop="managerId">
         <SelectManager

package/jnrs-vue/src/views/examples/program-management/mainPage/editDialog.vue

@@ -9,7 +9,7 @@ import type { FormInstance, FormRules } from 'element-plus'
 import { ref, nextTick } from 'vue'
 import { ElMessage } from 'element-plus'
 import { objectMatchAssign, verifyNumberGtZero } from '@jnrs/shared'
-import { getDictList, extractFieldId } from '@/utils'
+import { extractFieldId } from '@/utils'
 import {
   type Program,
   type AddProgram,
@@ -19,6 +19,7 @@ import {
 } from '@/api/examples/program-management'
 import { JnDialog } from '@jnrs/vue-core/components'
 import SelectManager from '@/components/select/SelectManager.vue'
+import DictSelector from '@/components/common/DictSelector.vue'
 
 const emit = defineEmits<{
   success: []
@@ -27,6 +28,7 @@ const emit = defineEmits<{
 const loading = ref(false)
 const editDialogRef = ref()
 const ruleFormRef = ref<FormInstance>()
+const editingRow = ref<{ code?: number; name?: string } | null>(null)
 const ruleForm = ref<AddProgram | UpdateProgram>({
   id: '',
   code: 0,
@@ -54,6 +56,7 @@ const rules = ref<FormRules>({
 
 // 打开弹窗
 const open = (row?: Program) => {
+  editingRow.value = row ? { code: row.code, name: row.name } : null
   editDialogRef.value.open()
   nextTick(() => {
     handleReset()
@@ -122,6 +125,14 @@ defineExpose({
 <template>
   <!-- 编辑弹窗 -->
   <JnDialog ref="editDialogRef" title="项目集管理" width="600px">
+    <el-alert v-if="editingRow" type="info" :closable="false" show-icon>
+      <template #title>
+        当前编辑：项目集编码
+        <strong>{{ editingRow.code }}</strong>
+        | 项目集名称
+        <strong>{{ editingRow.name }}</strong>
+      </template>
+    </el-alert>
     <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" v-loading="loading">
       <el-form-item prop="id"></el-form-item>
       <el-form-item label="项目集编码" prop="code">
@@ -161,28 +172,13 @@ defineExpose({
         </el-input-number>
       </el-form-item>
       <el-form-item label="状态" prop="status">
-        <el-select v-model="ruleForm.status" filterable placeholder="">
-          <el-option
-            :label="item.label"
-            :value="item.value"
-            v-for="item in getDictList('programStatus')"
-            :key="item.value"
-          />
-        </el-select>
+        <DictSelector v-model="ruleForm.status" dictName="programStatus" />
       </el-form-item>
       <el-form-item label="开始日期" prop="startDate">
-        <el-date-picker
-          v-model="ruleForm.startDate"
-          value-format="YYYY-MM-DD"
-          style="width: 220px"
-        />
+        <el-date-picker v-model="ruleForm.startDate" value-format="YYYY-MM-DD" style="width: 220px" />
       </el-form-item>
       <el-form-item label="结束日期" prop="endDate">
-        <el-date-picker
-          v-model="ruleForm.endDate"
-          value-format="YYYY-MM-DD"
-          style="width: 220px"
-        />
+        <el-date-picker v-model="ruleForm.endDate" value-format="YYYY-MM-DD" style="width: 220px" />
       </el-form-item>
       <el-form-item label="描述" prop="description">
         <el-input